/**
 * Product icons: the feature strip under the colour/material rows, and the care
 * symbols inside the "Details" table.
 *
 * The icons are bare — their wording lives in a Bootstrap tooltip
 * (assets/js/product-icons.js), so nothing here reserves room for a caption and
 * the glyphs are sized to be read on their own.
 *
 * Nothing here mirrors an icon in RTL — the flow direction is inherited from
 * the page, which is all that should flip. Care symbols are standardised
 * marks, and a mirrored one is a different mark.
 */

.product-icons {
    display: flex;
    flex-wrap: wrap;
    /* On the base rule, not only on the two placements below: a strip printed
       anywhere else — a quick-view modal, a template yet to exist — should
       still have room between its icons rather than run them together. */
    gap: 14px 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-icon {
    /* The pointer says "this will explain itself", which is the only cue an
       unlabelled glyph gets. */
    cursor: help;
}

/* Focus is a tooltip trigger here (a phone has no hover), so a tap would
   otherwise leave a focus ring behind it. Written as `:focus:not(:focus-visible)`
   rather than a plain `:focus` reset plus a `:focus-visible` ring: a browser
   that does not know `:focus-visible` drops this whole rule and keeps its own
   ring, where the two-rule form would have dropped only the ring and left
   keyboard users with nothing. */
.product-icon:focus:not(:focus-visible) {
    outline: none;
}

.product-icon:focus-visible {
    outline: 2px solid #999;
    outline-offset: 3px;
}

.product-icon__image {
    display: block;
    width: auto;
}

/* The strip prints inside the quick-view modal too, and that modal sits at
   z-index 99999 against Bootstrap's 1070 for a tooltip. Only ours is lifted —
   the theme's other tooltips (wishlist, compare) never open over a modal. */
.product-icon-tooltip {
    z-index: 100000;
}

/* The strip follows the colour and material rows, which are separated from
   each other by the same rule the variations table draws. */
.entry-summary .product-icons--features {
    margin: 22px 0 0;
    border-top: 1px solid #e5e5e5;
    padding-top: 22px;
}

/* Close to the 46px the source draws these at: the marks carry fine detail —
   BREATHABLE and QUICK_DRY differ by a few dots — and shrinking them further
   costs the difference. Seven of them, the catalogue's worst case, still fit
   one row of the desktop summary column and wrap to two on a phone. */
.product-icons--features .product-icon__image {
    height: 42px;
}

/* Inside the "Details" table cell, where the row already has its own label. */
.product-icons--care .product-icon__image {
    height: 34px;
}