/*
 * Header actions: the cart and contact links beside the logo.
 *
 * Loaded on every page, like the market switcher - the header is shared. The
 * icons are Phosphor Regular SVGs (images/icons/), inlined with
 * fill="currentColor" so their colour is set here.
 *
 * The container keeps its legacy .top-bar-icons class for the flex layout
 * combined.css gives it; everything icon-specific lives in this file.
 *
 * Sized by eye, not to one number: the cart spans almost the whole 256px
 * canvas (88% wide) while the handset fills about 78% of it as one diagonal
 * shape, so the phone is set a little smaller to read at the same weight -
 * 22/24 on a phone, 30/32 above.
 */

.header-actions__link {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 36px;
    margin-inline-end: 4px;
    color: var(--shop-accent);
    transition: color var(--shop-duration) var(--shop-ease);
}

/* On a phone the box is the old icons' footprint - 36px tall, so the header
   keeps its height, and narrow, so the logo beside it keeps its width - while
   the hit area overhangs it to a 44px-tall target without taking any layout. */
.header-actions__link::before {
    content: "";
    position: absolute;
    inset: -4px -2px;
}

.header-actions__link:hover,
.header-actions__link:focus {
    color: var(--shop-accent-strong);
    text-decoration: none;
}

.header-actions__link:focus-visible {
    outline: 2px solid var(--shop-accent);
    outline-offset: 2px;
    border-radius: var(--shop-radius-sm);
}

.header-actions__link svg {
    display: block;
    flex: none;
}

.header-actions__link--cart svg {
    width: 24px;
    height: 24px;
}

.header-actions__link--contact svg {
    width: 22px;
    height: 22px;
}

.header-actions__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The cart count, at every width: white on the commerce orange of the prices
   and the hero button. White on this orange is the 2.44:1 recorded in
   tokens.css - the same accepted pairing as the hero button's label. Placed
   against the basket's upper-right corner and grown rightward, so a second
   digit widens it away from the icon rather than over it. On a phone the cart
   link keeps a little more room after it for that. */
.header-actions__link .top-bar-icons-indicator {
    inset-block-start: 1px;
    inset-inline-start: 17px;
    margin: 0;
    background: var(--shop-brand-orange);
    color: #fff;
}

.header-actions__link--cart {
    margin-inline-end: 8px;
}

/* Below desktop it is more compact - where the legacy rule used to shrink the
   count to a bare dot, and on tablets too - and grows to a pill for a second
   digit. The white ring keeps it off the icon's strokes. Desktop keeps the
   legacy rule's 20px circle. A max-width query, as with the market switcher:
   the badge is layered over a legacy default. */
@media (max-width: 1023.98px) {
    .header-actions__link .top-bar-icons-indicator {
        box-sizing: border-box;
        min-width: 16px;
        width: auto;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        box-shadow: 0 0 0 2px var(--shop-surface);
        font-family: var(--shop-font);
        font-size: var(--shop-text-2xs);
        font-weight: var(--shop-weight-bold);
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }
}

@media (min-width: 640px) {
    /* The old icons sat 67px apart with 24px after each; a 44px target with
       22px after it puts the new ones on the same centres. */
    .header-actions__link {
        width: var(--shop-tap);
        height: var(--shop-tap);
        margin-inline-end: 22px;
    }

    .header-actions__link::before {
        content: none;
    }

    .header-actions__link--cart svg {
        width: 32px;
        height: 32px;
    }

    .header-actions__link--contact svg {
        width: 30px;
        height: 30px;
    }

    .header-actions__link .top-bar-icons-indicator {
        inset-block-start: 0;
        inset-inline-start: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-actions__link {
        transition: none;
    }
}