/* ══════════════════════════════════════════════════════════════
   PDP — Product tag chips
   ──────────────────────────────────────────────────────────────
   The tag row on the product page, and nothing else.

   These rules shipped inside pdp-price.css until v10.6.1, which was
   never a naming slip: that file contained ONLY these rules, while the
   actual price styles live in pdp-grid.css. The consequence was a
   component whose appearance depended on a neighbour's condition —
   the bundle was requested from inside `if (price_is_public() &&
   $price > 0)`, so the moment a store hid its prices, the tags lost
   their stylesheet and rendered as bare text. That is exactly what an
   RFQ or browse-only catalogue does by definition, so the tag row was
   broken in those modes for every product in the catalogue.

   The bundle is now named after what it styles and is requested from
   inside the tag block's own guard, so no condition anywhere else on
   the page can undress it again.
   ══════════════════════════════════════════════════════════════ */

.pdp-tags-row{
    display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
    margin: 2px 0 4px;
}
.pdp-tags-label{
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; color: var(--clr-text-3);
    white-space: nowrap; padding-top: 5px;
}
.pdp-tags-label i{ font-size: 11px; opacity: .8; }

.pdp-tags-chips{ display: flex; flex-wrap: wrap; gap: 7px; }

/* --tag-c is set inline per chip from the tag's own admin colour. */
a.pdp-tag-chip{
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 99px;
    font-size: 12.5px; font-weight: 700; text-decoration: none;
    color: var(--tag-c);
    background: color-mix(in srgb, var(--tag-c) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tag-c) 30%, transparent);
    transition: background .15s ease, color .15s ease, transform .12s ease;
}
a.pdp-tag-chip i{ font-size: 10px; opacity: .85; }
a.pdp-tag-chip:hover{ background: var(--tag-c); color: #fff; transform: translateY(-1px); }

/* Graceful fallback where color-mix() is unsupported (older browsers). */
@supports not (background: color-mix(in srgb, red 10%, white)){
    a.pdp-tag-chip{ background: var(--clr-surface-2, #f1f5f9); border-color: var(--clr-border, #e2e8f0); }
}

@media (prefers-reduced-motion: reduce){
    a.pdp-tag-chip{ transition: none; }
    a.pdp-tag-chip:hover{ transform: none; }
}