:root {
    --color-text: #3a2c2e;
    --color-bg: #fffaf7;
    --color-bg-alt: #faf1ec;
    --color-border: #e9d9d2;
    --color-accent: #b3717a;
    --color-accent-dark: #8f4650;
    --color-rose: #c98a92;
    --color-rose-pale: #f3dde0;
    --color-cream: #fdf6f0;
    --font-heading: "Playfair Display", Georgia, serif;
    --font-script: "Sacramento", cursive;
    --font-body: "Jost", -apple-system, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    font-size: 16px;
    line-height: 1.6;
}

a {
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.accent-script {
    font-family: var(--font-script);
    font-weight: 400;
    color: var(--color-accent-dark);
}

/* Announcement bar */

.announcement-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.4rem;
    padding: 0.5rem 2rem;
    background: var(--color-accent-dark);
}

.utility-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    color: #fff;
    text-decoration: none;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 0;
}

.utility-trigger svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.promo-bar {
    display: flex;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: var(--color-rose);
    color: var(--color-accent-dark);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-align: center;
}

.promo-bar strong {
    letter-spacing: 0.08em;
}

/* Header: nav (left) | brand mark (center) | icons (right) */

.site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 2rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    position: relative;
}

.site-header__brand {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--color-accent-dark);
    justify-self: center;
}

.brand-mark {
    width: 54px;
    height: 54px;
    color: var(--color-accent);
}

.site-header__brand-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    margin: 0.2rem 0 0;
    white-space: nowrap;
}

.site-header__brand-name em {
    font-family: var(--font-script);
    font-style: normal;
    font-size: 1.3rem;
    margin-left: 0.15rem;
}

.site-header__brand-tagline {
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-rose);
}

.site-header__actions {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.header-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
    padding: 0;
}

.header-icon-btn svg {
    width: 20px;
    height: 20px;
}

.header-icon-btn__count {
    position: absolute;
    top: -0.4rem;
    right: -0.5rem;
    background: var(--color-accent);
    color: #fff;
    border-radius: 999px;
    font-size: 0.65rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
}

.cart-icon-wrap,
.account-icon-wrap {
    position: relative;
}

/* .cart-icon-wrap's link isn't a direct flex child of .site-header__actions
   the way the wishlist icon is — flexbox auto-blockifies direct children,
   but this one sits a level deeper, so it stays a true inline-level box and
   picks up the browser's default inline line-box baseline spacing (a few
   px of font-descender room the wishlist icon doesn't get). That's what
   was throwing the cart icon a few pixels out of line with wishlist.
   Flexing the wrapper itself blockifies its child the same way, closing
   the gap. */
.cart-icon-wrap {
    display: flex;
    align-items: center;
}

.account-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    margin-top: 0.75rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(59, 30, 34, 0.15);
    z-index: 60;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.account-icon-wrap:hover .account-dropdown,
.account-icon-wrap:focus-within .account-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.account-dropdown__greeting {
    margin: 0;
    padding: 0.9rem 1.1rem 0.6rem;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    border-bottom: 1px solid var(--color-border);
}

.account-dropdown__links {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0;
}

.account-dropdown a,
.account-dropdown__links button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.1rem;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.account-dropdown a svg,
.account-dropdown__links button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-accent);
}

.account-dropdown a:hover {
    background: var(--color-bg-alt);
}

.account-dropdown__logout-form {
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--color-border);
}

.account-dropdown__logout-btn {
    display: block;
    width: 100%;
    padding: 0.6rem;
    background: #fff;
    border: 1px solid var(--color-text);
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.account-dropdown__logout-btn:hover {
    background: var(--color-bg-alt);
}

.cart-popover {
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;
    margin-top: 0.75rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(59, 30, 34, 0.15);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.cart-popover.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cart-popover__header {
    margin: 0 0 1rem;
    font-weight: 600;
    color: #067647;
}

.cart-popover__item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cart-popover__item img {
    width: 64px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    background: #f5f5f5;
    flex-shrink: 0;
}

.cart-popover__details {
    min-width: 0;
}

.cart-popover__name {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.cart-popover__meta {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    color: #777;
    text-transform: capitalize;
}

.cart-popover__price {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.cart-popover__cta {
    display: block;
    width: 100%;
    text-align: center;
}

.site-header__logout-form button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.site-header__search {
    position: relative;
    display: flex;
    align-items: center;
}

.site-header__search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    background: none;
    border: none;
    padding: 0;
    color: var(--color-text);
    cursor: pointer;
}

.site-header__search-icon svg {
    width: 16px;
    height: 16px;
}

.site-header__search input {
    width: 220px;
    padding: 0.5rem 0.9rem 0.5rem 2.2rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font: inherit;
    background: var(--color-cream);
}

/* Compact-only: the persistent inline search box is replaced by a small
   trigger icon (matching wishlist/cart) that opens a full-width overlay —
   there's no room in the icon row for an always-visible input at these
   widths. Both hidden on desktop, where the inline form above is always
   visible instead. */
.site-header__search-trigger,
.site-header__search-cancel {
    display: none;
}

/* Nav / mega-menu */

.site-nav {
    grid-column: 1;
}

/* Duplicated inside the hamburger menu so Orders/Rewards/staff links/Logout
   stay reachable on touch devices, where the desktop account icon's hover
   dropdown (.account-dropdown) doesn't work. Hidden on desktop, where that
   dropdown already covers it. The account chip and divider are part of the
   same compact-only sidebar content. */
.site-nav__menu-chip,
.site-nav__menu-divider,
.site-nav__menu-extra {
    display: none;
}

/* Dims the page behind the compact-width sidebar drawer; hidden entirely
   on desktop, where the nav is inline and there's no drawer to back. */
.site-nav__backdrop {
    display: none;
}

/* Compact-only "‹ All" back control and heading shown at the top of a
   drilled-into mega-menu panel; the desktop hover dropdown doesn't use
   either. */
.mega-menu__back,
.mega-menu__title {
    display: none;
}

.site-nav__toggle {
    display: none;
    position: relative;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
}

/* While the compact drawer is open, the close (×) button is pinned to a
   fixed viewport position instead of staying put in the header's normal
   flow. The drawer itself (.site-nav__menu, z-index:100) and its drill-down
   submenu panel (.mega-menu, z-index:101) are both fixed, full-height
   overlays — leaving the toggle in-flow would put it at whatever height the
   header happens to render at, which can land it awkwardly inside the
   drawer's own content (overlapping category text) rather than in a clean,
   consistent corner. z-index:102 keeps it above both layers regardless of
   which one is showing. Switching from position:relative to position:fixed
   is an instant jump (position isn't animatable), so without the delayed
   fade below the × would appear at its pinned corner immediately on click —
   well before the drawer has finished sliding into view over its own 0.25s
   — making it look like the close button shows up ahead of the sidebar
   itself. Holding it invisible for the first 0.2s masks that jump, so it
   only becomes visible once the drawer is essentially already in place. */
.site-nav__toggle[aria-expanded="true"] {
    position: fixed;
    top: 1rem;
    /* Sits just inside the drawer's own right edge — min(85vw, 380px)
       mirrors .site-nav__menu's width so this tracks it at any viewport
       size — rather than the top-left corner, which collides with the
       drawer's own content (the account chip, or the "‹ All" back button
       once drilled into a category). */
    left: calc(min(85vw, 380px) - 3rem);
    z-index: 102;
    animation: site-nav__toggle-reveal 0.1s ease 0.2s both;
}

@keyframes site-nav__toggle-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.site-nav__toggle span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--color-text);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Hamburger → close (×) animation when the compact sidebar is open. */
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
}

.site-nav__menu {
    display: flex;
    align-items: baseline;
    gap: 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__menu > li > a {
    text-decoration: none;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text);
    padding-bottom: 0.2rem;
    border-bottom: 1px solid transparent;
}

.site-nav__menu > li > a:hover {
    color: var(--color-accent-dark);
    border-bottom-color: var(--color-accent);
}

.site-nav__dropdown {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.site-nav__dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.6rem;
    padding: 0;
    color: var(--color-rose);
}

.site-nav__dropdown .mega-menu {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    width: 100%;
    justify-content: center;
    gap: 3rem;
    padding: 2rem 1.5rem;
    background: var(--color-cream);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 12px 24px rgba(59, 30, 34, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    pointer-events: none;
}

.site-nav__dropdown.is-open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Opening is JS-driven only (nav.js toggles .is-open on mouseenter/leave,
   with a close-delay and "close other dropdowns immediately" logic) — there
   used to be a plain CSS :hover fallback here too, but the mega-menu panel
   is positioned against the full header (full page width, not just the nav
   link's own width — see .mega-menu below), so a :hover-driven bridge
   spanning that same full width overlapped sibling nav items' hitboxes
   (e.g. hovering "Men" was actually hovering behind "Women"'s bridge,
   keeping Women's panel stuck open). JS doesn't need a bridge at all: its
   mouseenter/mouseleave fire based on DOM descendance, not visual CSS
   position, so entering the detached panel still counts as re-entering the
   trigger's own <li> and cancels the pending close. */

.mega-menu__column h3 {
    font-family: var(--font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-rose);
    margin: 0 0 0.75rem;
}

.mega-menu__column ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mega-menu__column a {
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--font-heading);
}

.mega-menu__column a:hover {
    color: var(--color-accent-dark);
}

.page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    min-height: 60vh;
}

/* Full-bleed leaf listing pages (subcategory / collection): the page's own
   <main class="page-container"> block is left empty on these templates, so
   its default padding/min-height would otherwise leave a dead gap above the
   footer — collapse it and let the full-width layout below own the page. */
.page-full-bleed .page-container {
    min-height: 0;
    padding-bottom: 0;
}

.page-container--tight {
    padding-bottom: 1rem;
}

/* Leaf listing layout: sticky, independently-scrolling filter sidebar +
   edge-to-edge product grid, no outer page margins. */
.listing-layout--full {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    margin: 0;
}

/* flex-basis/padding change INSTANTLY (0s), not gradually — .product-grid
   uses grid-template-columns: repeat(auto-fill, ...), which recalculates
   its column count at whatever width it happens to be at on every reflow
   frame. Animating the sidebar's width smoothly meant the grid was
   re-snapping columns repeatedly mid-transition — a stutter, not one clean
   move. Instead the space-reclaiming jump stays instant but is DELAYED
   until the fade finishes (see .filters-hidden below), so the one
   unavoidable grid reflow happens while the sidebar is already invisible
   instead of mid-animation. */
.listing-layout--full .filters-sidebar {
    flex: 0 0 280px;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    margin: 0;
    padding: 1.5rem;
    border-right: 1px solid var(--color-border);
    opacity: 1;
    transition: opacity 0.2s ease, border-color 0.2s ease, flex-basis 0s linear, padding-left 0s linear, padding-right 0s linear;
}

.listing-layout--full.filters-hidden .filters-sidebar {
    flex-basis: 0;
    padding-left: 0;
    padding-right: 0;
    border-right-color: transparent;
    opacity: 0;
    transition: opacity 0.2s ease, border-color 0.2s ease, flex-basis 0s linear 0.2s, padding-left 0s linear 0.2s, padding-right 0s linear 0.2s;
    overflow: hidden;
    pointer-events: none;
}

.listing-layout--full .listing-layout__main {
    flex: 1;
    min-width: 0;
    padding: 1.5rem 2rem 3rem;
}

.infinite-scroll-sentinel {
    height: 4px;
}

.infinite-scroll-sentinel.is-loading::after {
    content: 'Loading more…';
    display: block;
    text-align: center;
    padding: 2rem 0;
    color: #8a7276;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

@media (max-width: 900px) {
    .page-full-bleed {
        overflow-x: hidden;
    }

    .listing-layout--full {
        flex-direction: column;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* flex-basis controls height (not width) once the container becomes a
       column, so the desktop rule's fixed 280px basis and its flex-basis
       transition don't apply here — collapse via max-height instead, with
       a ceiling comfortably taller than the panel could ever get. */
    .listing-layout--full .filters-sidebar {
        position: static;
        flex-basis: auto;
        max-height: 2000px;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        transition: max-height 0.3s ease, opacity 0.2s ease, padding-top 0.3s ease, padding-bottom 0.3s ease, border-color 0.3s ease;
    }

    .listing-layout--full .listing-layout__main {
        width: 100%;
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .listing-layout--full .filters-sidebar__actions {
        justify-content: flex-start;
    }

    .listing-layout--full .filters-sidebar__actions a {
        width: auto;
        min-width: 8rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .listing-layout--full.filters-hidden .filters-sidebar {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom-color: transparent;
        overflow: hidden;
    }
}

.messages {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.messages__item {
    --message-bg: #f5f0ed;
    --message-border: #e0d2cc;
    --message-accent: #8f4650;
    --message-text: #3a2c2e;
    position: relative;
    padding: 0.8rem 1rem 0.8rem 3rem;
    border: 1px solid var(--message-border);
    border-left: 4px solid var(--message-accent);
    border-radius: 4px;
    background: var(--message-bg);
    color: var(--message-text);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.messages__item::before {
    content: "i";
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--message-accent);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35rem;
    text-align: center;
}

.messages__item--success {
    --message-bg: #edf5ee;
    --message-border: #cfe3d2;
    --message-accent: #497258;
    --message-text: #2f4d3a;
}

.messages__item--success::before {
    content: "\2713";
}

.messages__item--info,
.messages__item--debug {
    --message-bg: #eef3f8;
    --message-border: #cddbe9;
    --message-accent: #4f7396;
    --message-text: #2f4a63;
}

.messages__item--warning {
    --message-bg: #fff6e5;
    --message-border: #f0d9a6;
    --message-accent: #b07a14;
    --message-text: #6b4a0b;
}

.messages__item--warning::before {
    content: "!";
}

.messages__item--error {
    --message-bg: #fdeeee;
    --message-border: #f2c4c4;
    --message-accent: #a52d35;
    --message-text: #7d1f26;
}

.messages__item--error::before {
    content: "\00d7";
    font-size: 1.05rem;
}

.site-footer {
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    padding: 3rem 2rem 1.5rem;
    margin-top: 4rem;
}

.site-footer__columns {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1.3fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.site-footer__col--brand .brand-mark {
    width: 46px;
    height: 46px;
    color: var(--color-accent);
}

.site-footer__brand-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin: 0.4rem 0 0.75rem;
}

.site-footer__brand-name em {
    font-family: var(--font-script);
    font-style: normal;
    font-size: 1.3rem;
}

.site-footer__col--brand p {
    font-size: 0.85rem;
    color: #6b5459;
    max-width: 32ch;
}

.site-footer h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 1rem;
    color: var(--color-accent-dark);
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: #5a4448;
}

.site-footer ul a,
.footer-link-button {
    text-decoration: none;
}

.site-footer ul a:hover,
.footer-link-button:hover {
    color: var(--color-accent-dark);
}

.footer-link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.site-footer__col p {
    font-size: 0.85rem;
    color: #6b5459;
}

.site-footer__newsletter {
    display: flex;
    margin-top: 0.5rem;
}

.site-footer__newsletter input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: 4px 0 0 4px;
    font: inherit;
    background: #fff;
}

.site-footer__newsletter button {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--color-accent);
    background: var(--color-accent);
    color: #fff;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

.site-footer__social {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--color-rose);
    color: var(--color-accent-dark);
    text-decoration: none;
    font-size: 0.65rem;
}

.site-footer__copyright {
    text-align: center;
    font-size: 0.8rem;
    color: #8a7276;
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 900px) {
    .site-footer__columns {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .site-footer {
        padding: 2.5rem 1.25rem 1.5rem;
    }

    .site-footer__columns {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Product grid & cards */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.product-card {
    position: relative;
}

.product-card__wishlist-form {
    display: contents;
}

.product-card__link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.product-card__image-wrap {
    position: relative;
    /* Our product photography is portrait (roughly 3:4–4:5 — full-body
       shots, not square product-on-white packshots), so a 1:1 crop was
       cutting off a head or a hem on almost every card. 3:4 matches it
       closely enough that object-fit:cover barely has to crop at all. */
    aspect-ratio: 3 / 4;
    background: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
}

.product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-card__image--placeholder {
    background: #eee;
}

.product-card__wishlist {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: #fff;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.product-card__wishlist:hover {
    background: #fdf1f0;
}

.product-card__wishlist--active {
    color: #d92d20;
    border-color: #d92d20;
}

.badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge--sale {
    background: #d92d20;
    color: #fff;
}

.badge--out {
    background: #666;
    color: #fff;
}

.product-card__body {
    padding-top: 0.75rem;
}

.product-card__brand {
    font-size: 0.75rem;
    color: #777;
    margin: 0 0 0.15rem;
    text-transform: uppercase;
}

.product-card__name {
    font-size: 0.95rem;
    margin: 0 0 0.3rem;
}

.product-card__rating {
    color: #ccc;
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
}

.product-card__price--sale {
    font-weight: 700;
}

.product-card__price--regular {
    text-decoration: line-through;
    color: #999;
    margin-left: 0.5rem;
    font-size: 0.85rem;
}

.product-card__dots {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    gap: 0.3rem;
}

.product-card__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.product-card__dot.is-active {
    background: #fff;
    border-color: var(--color-accent, #b3564a);
}

.product-card__swatches {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.product-card__swatch {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    padding: 0;
    cursor: pointer;
}

.product-card__swatch.is-active {
    outline: 2px solid var(--color-accent, #b3564a);
    outline-offset: 1px;
}

/* Category / brand pages */

.category-description {
    color: #555;
    max-width: 60ch;
    font-size: 1.05rem;
    line-height: 1.75;
    margin: 2rem 0 2.75rem;
}

/* Category hub page */

.hub-section {
    margin: 2rem 0;
}

.hub-section h2 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.hub-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

.hub-tile {
    display: block;
    text-decoration: none;
    font-weight: 600;
    color: inherit;
}

.hub-tile__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 6px;
    background: #f0f0f0;
}

.hub-tile__image--placeholder {
    background: linear-gradient(135deg, #ececec, #f7f7f7);
}

.hub-tile__label {
    display: block;
    margin-top: 0.6rem;
}

/* Hero banner */

.hero-banner {
    background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent));
    color: #fff;
    padding: 4rem 1.5rem;
    text-align: center;
}

.hero-banner__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    opacity: 0.85;
    margin: 0 0 0.5rem;
}

.hero-banner h1 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 500;
}

/* More To Explore placeholder */

.explore-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

.explore-tile {
    aspect-ratio: 4 / 5;
    border-radius: 6px;
    background: linear-gradient(135deg, #ececec, #f7f7f7);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
    padding: 1rem;
}

.subcategory-list {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}

.subcategory-list__item {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.875rem;
}

/* Listing layout: sidebar filters + main content */

/* Same reasoning as .listing-layout--full above: grid-template-columns/gap
   jump instantly rather than animating smoothly, so .product-grid's own
   auto-fill columns don't re-snap repeatedly while the width is in
   between — the jump is just delayed until the sidebar's fade finishes. */
.listing-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    align-items: start;
    margin: 1.5rem 0;
    transition: grid-template-columns 0s linear, gap 0s linear;
}

.listing-layout.filters-hidden {
    grid-template-columns: 0fr 1fr;
    gap: 0 2.5rem;
    transition: grid-template-columns 0s linear 0.15s, gap 0s linear 0.15s;
}

.listing-layout.filters-hidden .filters-sidebar {
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.listing-layout.filters-hidden .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.filters-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.filters-sidebar__group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.filters-sidebar__group label {
    color: #555;
    font-weight: 600;
}

.filters-sidebar__group select,
.filters-sidebar__group input[type="number"] {
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font: inherit;
    width: 100%;
}

.filters-sidebar__category-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.filters-sidebar__category-option {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--color-text);
    cursor: pointer;
}

/* No visible checkbox square — Nike's own category list shows plain
   clickable names, with the selected state carried entirely by the text
   itself (see the :has(:checked) rule below). The input stays in the DOM
   (a label still toggles its own hidden checkbox natively) so this is
   still a real, keyboard- and screen-reader-operable control, not a
   decoration standing in for one. */
.filters-sidebar__category-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.filters-sidebar__category-option:hover {
    color: var(--color-accent);
}

.filters-sidebar__category-option:has(input:checked) {
    color: var(--color-accent);
    font-weight: 600;
}

/* Brand/Colour/Size — real, visible checkboxes (matching Nike's own Brand
   list), unlike Category above which hides the box and shows selection
   through the text alone. Nike itself isn't consistent about this across
   its own sidebar, so neither is this — each matches its own reference. */
.filters-sidebar__checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.filters-sidebar__checkbox-list label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--color-text);
    cursor: pointer;
}

.filters-sidebar__checkbox-list input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* Colour filter — circular swatches using each Colour's own hex_code,
   matching the same .swatch visual language as the product detail page's
   colour picker (2rem circle, ring on selection) rather than a plain
   checkbox list, since a colour is something you recognize by sight. */
.colour-swatch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 0.5rem;
}

.colour-swatch-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    text-align: center;
}

.colour-swatch-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.colour-swatch-option__circle {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    display: block;
}

.colour-swatch-option:hover .colour-swatch-option__circle {
    border-color: var(--color-accent);
}

.colour-swatch-option:has(input:checked) .colour-swatch-option__circle {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent);
}

.colour-swatch-option__label {
    font-size: 0.72rem;
    color: var(--color-text);
    line-height: 1.2;
}

.colour-swatch-option:has(input:checked) .colour-swatch-option__label {
    color: var(--color-accent);
    font-weight: 600;
}

/* Size filter — pill buttons (matches the product detail page's own
   .swatch--size), not a vertical list, since sizes read faster scanned
   left-to-right than stacked one per row. Sized to content and wrapped
   (not stretched into equal grid thirds) — a 3-column grid was blowing a
   single letter up to fill a third of the sidebar's width each. */
.size-swatch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.size-swatch-option {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--color-text);
    cursor: pointer;
    text-align: center;
}

.size-swatch-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.size-swatch-option:hover {
    border-color: var(--color-accent);
}

.size-swatch-option:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-rose-pale);
    color: var(--color-accent-dark);
    font-weight: 600;
}

/* Collapsible filter sections (Category, Brand, Colour, Size, Price) —
   Nike's own sidebar structure. Body is visible by default so the page
   works before JS attaches the toggle; .is-collapsed (added by
   filters-toggle.js) is the only thing that hides it. */
.filter-section {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1rem;
}

.filter-section__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    color: #555;
    cursor: pointer;
    margin-bottom: 0.6rem;
}

.filter-section__chevron {
    color: #999;
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.filter-section.is-collapsed .filter-section__chevron {
    transform: rotate(-90deg);
}

/* Same 0fr/1fr grid-row trick as .faq-item__panel — animates height without
   JS ever having to measure the content's actual pixel height. The inner
   wrapper is what actually clips the content as the row shrinks; the grid
   row itself is what's being transitioned. */
.filter-section__body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.25s ease;
}

.filter-section__body-inner {
    overflow: hidden;
    min-height: 0;
}

.filter-section.is-collapsed .filter-section__body {
    grid-template-rows: 0fr;
}

.filter-section__body select,
.filter-section__body input[type="number"] {
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font: inherit;
    width: 100%;
}

/* Price slider — two overlapping native range inputs sharing one visual
   track, since a single <input type="range"> only ever has one thumb. */
.price-slider {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.price-slider__inputs {
    display: flex;
    gap: 0.75rem;
}

.price-slider__inputs label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: #999;
}

.price-slider__track-wrap {
    position: relative;
    height: 1.1rem;
    display: flex;
    align-items: center;
}

.price-slider__track {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
}

.price-slider__track-fill {
    position: absolute;
    height: 4px;
    background: var(--color-accent);
    border-radius: 2px;
}

.price-slider__range {
    position: absolute;
    left: 0;
    width: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.price-slider__range::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    height: 4px;
    background: transparent;
}

.price-slider__range::-moz-range-track {
    height: 4px;
    background: transparent;
    border: none;
}

.price-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    margin-top: -6px;
}

.price-slider__range::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

.price-slider__bounds {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #999;
}

.price-slider__apply {
    padding: 0.6rem;
    border: 1px solid var(--color-accent);
    background: var(--color-accent);
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
}

.price-slider__apply:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.filters-sidebar__group--checkbox label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text);
    font-weight: 400;
}

.filters-sidebar__actions {
    display: flex;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

/* Sized and styled to match .price-slider__apply — the sidebar's other
   full-width pill button — so Reset reads as equally weighted, not a
   throwaway text link. */
.filters-sidebar__actions a {
    display: block;
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--color-accent);
    background: var(--color-accent);
    color: #fff;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.filters-sidebar__actions a:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

/* Listing toolbar */

.listing-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.listing-toolbar__filters-toggle {
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
}

.filters-toggle__show {
    display: none;
}

.filters-hidden .filters-toggle__show {
    display: inline;
}

.filters-hidden .filters-toggle__hide {
    display: none;
}

.listing-toolbar__count {
    color: #777;
    font-size: 0.875rem;
    margin-right: auto;
    margin-left: 1rem;
}

.listing-toolbar__sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.listing-toolbar__sort select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font: inherit;
}

/* Product detail page */

.breadcrumbs {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 1rem;
}

.breadcrumbs a {
    text-decoration: none;
}

.breadcrumbs span {
    margin: 0 0.4rem;
}

.page-container:has(.product-detail) {
    max-width: 1300px;
}

/* The gallery (image + thumbnails) has a fixed, fairly small target size
   (see .product-detail__main-image below) rather than filling a fluid
   grid column — so this is a flex row sized to its own content, centered
   as a unit, instead of a grid with a wide fixed-fraction column that
   would leave a dead gap between a narrow image and the info panel. */
.product-detail {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2.5rem;
}

.product-detail__gallery {
    display: flex;
    gap: 1rem;
    position: sticky;
    top: 1.5rem;
    /* Without this, the flex item's automatic minimum width is driven by
       .product-detail__main-image-wrap's definite (non-percentage) `width`
       below, which can't be shrunk by the flex algorithm — so at narrower
       viewports all the squeeze lands on .product-detail__info instead,
       crushing it down to an unreadable sliver. */
    min-width: 0;
}

.product-detail__main-image-wrap {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    /* A plain fixed `width` plus a separate `max-width: 100%` — not
       `width: min(fixedPx, 100%)` — deliberately. `.product-detail__gallery`
       (this wrap's flex parent) has no width of its own, so it falls back
       to measuring its children's "auto" size to find ITS OWN flex-basis;
       a child whose `width` is a `min()` with a percentage branch gets
       remeasured during that pass against an indeterminate available
       width, which can resolve far larger than intended and cascades
       outward — first showed up as an oversized image wrap, then again as
       a huge gap between the gallery and the info column once that was
       fixed one level down. A plain fixed-length `width` has no percentage
       component to mismeasure, so the ambiguity can't occur; `max-width`
       is a separate property that only clips the final result, uninvolved
       in the intrinsic-size measurement pass. */
    width: calc((7 * 72px + 6 * 0.6rem) * 0.75);
    max-width: 100%;
}

.product-detail__info {
    flex: 0 1 460px;
    min-width: 0;
}

.product-detail__main-image {
    /* Target height matches the total height of a 7-thumbnail column
       (thumbnails themselves stay 72px, untouched) — 3:4 matches our
       portrait photography much more closely than a square crop did. */
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
    background: #f5f5f5;
    border-radius: 6px;
    display: block;
    transition: opacity 0.15s ease;
}

.gallery-nav {
    position: absolute;
    bottom: 1rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: #fff;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

.gallery-nav--prev {
    right: 3.65rem;
}

.gallery-nav--next {
    right: 1rem;
}

.product-detail__thumbnails {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.product-detail__thumbnail {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.product-detail__thumbnail.is-active {
    border-color: var(--color-accent);
}

.product-detail__brand {
    text-transform: uppercase;
    font-size: 0.8rem;
    color: #777;
    margin: 0;
}

.product-detail__name {
    margin: 0.2rem 0 0.5rem;
}

.product-detail__title-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.product-detail__secondary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.product-detail__wishlist-form {
    display: contents;
}

.product-detail__wishlist,
.product-detail__whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.product-detail__wishlist:hover,
.product-detail__whatsapp:hover {
    background: #f7f7f7;
}

.product-detail__wishlist--active {
    color: #d92d20;
    border-color: #d92d20;
}

.product-detail__whatsapp {
    color: #25d366;
    border-color: #25d366;
}

.product-detail__rating {
    color: #ccc;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.product-detail__rating span {
    color: #777;
    font-size: 0.8rem;
    margin-left: 0.3rem;
}

.product-detail__price {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.product-detail__price--regular {
    text-decoration: line-through;
    color: #999;
    font-size: 1rem;
    font-weight: 400;
    margin-left: 0.6rem;
}

.product-detail__price .badge {
    position: static;
    margin-left: 0.6rem;
    display: inline-block;
    vertical-align: middle;
}

.product-detail__option {
    margin-bottom: 1rem;
}

.product-detail__option-label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}

.swatch-list {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    cursor: pointer;
    padding: 0;
}

.swatch.is-selected {
    border-color: var(--color-accent);
}

.swatch--size {
    width: auto;
    height: auto;
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
    background: #fff;
    font-size: 0.85rem;
}

.sold-out-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin: 1rem 0;
    padding: 1rem;
    background: #f5f0ed;
    border-radius: 4px;
    text-align: center;
}

.sold-out-banner strong {
    font-size: 1.05rem;
}

.sold-out-banner[hidden],
.stock-status[hidden],
#add-to-cart-form[hidden] {
    display: none;
}

.swatch--size.is-out-of-stock {
    color: #bbb;
    border-color: #eee;
    cursor: not-allowed;
    text-decoration: line-through;
}

.stock-status {
    font-size: 0.85rem;
    margin: 0.5rem 0 1rem;
}

.stock-status--in {
    color: #067647;
}

.stock-status--low {
    color: #b54708;
}

.stock-status--out {
    color: #d92d20;
}

.product-detail__quantity {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.product-detail__quantity input {
    width: 4.5rem;
    padding: 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.add-to-cart-button {
    display: block;
    width: 100%;
    padding: 0.85rem;
    margin-bottom: 1.5rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.add-to-cart-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.product-detail__short-desc {
    color: #555;
}

.product-detail__style-code {
    font-size: 0.78rem;
    color: #999;
    margin: -0.5rem 0 0.75rem;
}

.product-detail__section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.product-detail__section h2 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.spec-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3rem 1rem;
    margin: 0;
}

.spec-list dt {
    font-weight: 600;
}

.spec-list dd {
    margin: 0;
    color: #555;
}

.related-products {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

/* Account pages */

.account-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2.5rem;
    margin-top: 1.5rem;
}

.account-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.account-nav a,
.account-nav-button {
    text-decoration: none;
    color: #555;
    font-size: 0.9rem;
}

.account-nav-button {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.account-layout__main h2 {
    margin-top: 0;
}

.account-layout__main form {
    max-width: 520px;
}

.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.address-card {
    padding: 1.25rem 1.4rem;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.9rem;
    box-shadow: 0 1px 2px rgba(59, 30, 34, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.address-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 6px 18px rgba(59, 30, 34, 0.1);
}

.address-card p {
    margin: 0.25rem 0;
    color: #5a4448;
    line-height: 1.5;
}

.address-card__label {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-accent-dark);
    margin: 0 0 0.4rem;
}

.address-card__badges {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.badge--default {
    position: static;
    display: inline-block;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-accent);
    color: var(--color-accent-dark);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.address-card__actions {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 1.25rem;
}

.address-card__actions a {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
}

.address-card__actions a:first-child {
    color: var(--color-accent-dark);
}

.address-card__actions a:first-child:hover {
    text-decoration: underline;
}

.address-card__actions a:last-child {
    color: #d92d20;
}

.address-card__actions a:last-child:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .account-layout {
        grid-template-columns: 1fr;
    }

    .account-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }
}

/* Cart */

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

.cart-summary--sticky {
    position: sticky;
    top: 1.5rem;
}

.cart-item {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
}

.cart-item__image-link {
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 6px;
    overflow: hidden;
}

.cart-item__image {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    background: #f5f5f5;
}

.cart-item__image--placeholder {
    background: linear-gradient(135deg, #ececec, #f7f7f7);
}

.cart-item__name {
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}

.cart-item__variant {
    color: #777;
    font-size: 0.85rem;
    margin: 0.2rem 0;
}

.cart-item__price {
    font-weight: 600;
    margin: 0.2rem 0 0.6rem;
}

.cart-item__quantity-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #f5f5f5;
    overflow: visible;
}

.qty-stepper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.qty-stepper__btn:hover:not(:disabled) {
    background: #e8e8e8;
}

.qty-stepper__btn:disabled {
    color: #aaa;
    cursor: not-allowed;
}

.qty-stepper__input {
    width: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}

.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-item__icon-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    margin-left: -0.3rem;
}

.cart-item__save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: none;
    border: none;
    padding: 0.3rem;
    color: #777;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1.1rem;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
}

.cart-item__save:hover {
    background: #f7f7f7;
}

.cart-item__save--active {
    color: #d92d20;
}

.cart-item__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.3rem;
    color: #777;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
}

.cart-item__remove svg {
    width: 18px;
    height: 18px;
}

.cart-item__remove:hover {
    color: #d92d20;
    background: #fdf1f0;
}

.cart-item__line-total {
    font-weight: 700;
    white-space: nowrap;
}

/* Wishlist — bigger grid cards (Nike-style) rather than the compact
   cart-row layout, since these are meant to be browsed, not just listed. */

.wishlist-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.wishlist-header__count {
    color: #777;
    font-size: 0.95rem;
}

.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin: 1.5rem 0;
}

.wishlist-card__image-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    background: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
}

.wishlist-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.wishlist-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wishlist-card__image--placeholder {
    background: linear-gradient(135deg, #ececec, #f7f7f7);
}

.wishlist-card__remove-form {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.wishlist-card__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: background 0.2s ease;
}

.wishlist-card__remove svg {
    width: 18px;
    height: 18px;
}

.wishlist-card__remove:hover {
    background: #fff;
}

.wishlist-card__body {
    padding-top: 0.85rem;
}

.wishlist-card__brand {
    font-size: 0.8rem;
    color: #777;
    margin: 0 0 0.2rem;
}

.wishlist-card__name {
    display: block;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.3rem;
}

.wishlist-card__colour {
    margin: 0.1rem 0 0.4rem;
    color: #776f6f;
    font-size: 0.85rem;
}

.wishlist-card__price {
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.wishlist-card__price--regular {
    font-weight: 400;
    text-decoration: line-through;
    color: #999;
    margin-left: 0.4rem;
}

.wishlist-card__move-btn {
    width: 100%;
}

/* Size-picker modal, opened from a wishlist card's "Move to Cart" button —
   the customer picks a size before anything is actually added, instead of
   the old behaviour of silently grabbing whichever variant happened to
   still be in stock. */

.size-modal {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    transition: visibility 0.2s;
    pointer-events: none;
}

.size-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.size-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(59, 30, 34, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.size-modal.is-open .size-modal__backdrop {
    opacity: 1;
}

/* Desktop: a wide two-column panel — image carousel on the left, product
   info + sizes on the right — matching the reference this was modelled on.
   Collapses to a full-screen single column below 960px (see media block).

   `height` (not just max-height) is deliberate: without a definite height,
   the grid row sizes itself to content, and the gallery image's
   `height: 100%` can't resolve against that (percentage heights against an
   auto-sized ancestor are ignored per spec) — so it fell back to the
   image's own intrinsic aspect ratio instead, making the whole panel
   visibly grow or shrink as the carousel cycled through images of
   different proportions. A fixed height sidesteps that entirely. */
.size-modal__panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: 90%;
    max-width: 860px;
    height: min(60vh, 460px);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.size-modal.is-open .size-modal__panel {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.size-modal.size-modal--success .size-modal__panel {
    max-width: 520px;
    height: auto;
    min-height: 320px;
    display: block;
}

.size-modal.size-modal--success .size-modal__gallery {
    display: none;
}

.size-modal.size-modal--success .size-modal__info {
    padding: 0;
}

.size-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.size-modal__close svg {
    width: 18px;
    height: 18px;
}

/* Login modal — same fixed-overlay/backdrop/fade-scale mechanics as
   .size-modal above, just a simple centered card instead of a two-column
   gallery layout, since it only ever holds one phone-number field. */

.login-modal {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    transition: visibility 0.2s;
    pointer-events: none;
}

.login-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.login-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(59, 30, 34, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.login-modal.is-open .login-modal__backdrop {
    opacity: 1;
}

.login-modal__panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: 90%;
    max-width: 420px;
    padding: 2.5rem 2rem;
    background: var(--color-bg, #fff);
    border-radius: 4px;
    text-align: center;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.login-modal.is-open .login-modal__panel {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.login-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
}

.login-modal__close svg {
    width: 18px;
    height: 18px;
}

.login-modal__screen {
    display: none;
}

.login-modal[data-step="phone"] .login-modal__screen--phone,
.login-modal[data-step="otp"] .login-modal__screen--otp {
    display: block;
}

.login-modal__screen h2 {
    margin: 0 0 0.5rem;
}

.login-modal__screen > p {
    color: #777;
    margin: 0 0 1.5rem;
}

.login-modal__form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    text-align: left;
}

.login-modal__form label {
    font-size: 0.8rem;
    font-weight: 600;
}

.login-modal__phone-row {
    display: flex;
    gap: 0.5rem;
}

.login-modal__country-select {
    flex: 0 0 5.2rem;
    padding: 0.7rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    background: #fff;
    color: var(--color-text);
    font: inherit;
}

.login-modal__form input[type="text"] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    font-size: 1rem;
}

.login-modal__error {
    color: #d92d20;
    font-size: 0.82rem;
    margin: -0.4rem 0 0;
}

.login-modal__edit-phone {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-accent-dark);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.login-modal__otp-boxes {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}

.login-modal__otp-box {
    width: 2.6rem;
    height: 3rem;
    text-align: center;
    font-size: 1.3rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.login-modal__otp-box:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(59, 30, 34, 0.08);
}

.login-modal__resend {
    text-align: center;
    font-size: 0.85rem;
    color: #777;
    margin: 0;
}

.login-modal__resend-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-accent-dark);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.favourite-modal {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 210;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.2s;
}

.favourite-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.favourite-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.favourite-modal.is-open .favourite-modal__backdrop {
    opacity: 1;
}

.favourite-modal__panel {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translate(-50%, 1rem);
    width: min(92vw, 520px);
    padding: 2rem;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.favourite-modal.is-open .favourite-modal__panel {
    transform: translate(-50%, 0);
    opacity: 1;
}

.favourite-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: #f6f6f6;
    color: var(--color-text);
    cursor: pointer;
}

.favourite-modal__close svg {
    width: 18px;
    height: 18px;
}

.favourite-modal__heading {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-right: 2.5rem;
    margin-bottom: 1.5rem;
}

.favourite-modal__heading h2 {
    margin: 0;
    font-size: 1.55rem;
}

.favourite-modal__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #10865b;
    color: #fff;
    font-weight: 700;
}

.favourite-modal__product {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.favourite-modal__image-wrap {
    flex: 0 0 6rem;
    width: 6rem;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
}

.favourite-modal__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.favourite-modal__name,
.favourite-modal__price {
    margin: 0;
    font-weight: 600;
}

.favourite-modal__brand {
    margin: 0.2rem 0;
    color: #777;
}

.favourite-modal__button {
    display: flex;
    min-height: 3.6rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #111;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

/* Profile modal — same centered-card mechanics as .login-modal, just
   taller and scrollable since it holds a full set of profile fields. */

.profile-modal {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    transition: visibility 0.2s;
    pointer-events: none;
}

.profile-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.profile-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(59, 30, 34, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.profile-modal.is-open .profile-modal__backdrop {
    opacity: 1;
}

.profile-modal__panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: 90%;
    max-width: 460px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 2.5rem 2rem;
    background: var(--color-bg, #fff);
    border-radius: 4px;
    text-align: center;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.profile-modal.is-open .profile-modal__panel {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.profile-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
}

.profile-modal__close svg {
    width: 18px;
    height: 18px;
}

.profile-modal__panel h2 {
    margin: 0 0 0.5rem;
}

.profile-modal__screen--edit > p {
    color: #777;
    margin: 0 0 1.5rem;
}

.profile-modal__form {
    text-align: left;
}

.profile-modal__screen {
    display: none;
}

.profile-modal[data-step="edit"] .profile-modal__screen--edit,
.profile-modal[data-step="otp"] .profile-modal__screen--otp {
    display: block;
}

.profile-modal__screen--otp h2 {
    margin: 0 0 0.5rem;
}

.profile-modal__screen--otp > p {
    color: #777;
    margin: 0 0 1.5rem;
    text-align: center;
}

/* Terms modal — same centered-card mechanics as .login-modal, but wider
   and left-aligned since it holds a block of legal text rather than a
   form. */

.terms-modal {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    transition: visibility 0.2s;
    pointer-events: none;
}

.terms-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.terms-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(59, 30, 34, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.terms-modal.is-open .terms-modal__backdrop {
    opacity: 1;
}

.terms-modal__panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: 90%;
    max-width: 560px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 2.5rem 2rem;
    background: var(--color-bg, #fff);
    border-radius: 4px;
    text-align: left;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.terms-modal.is-open .terms-modal__panel {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.terms-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
}

.terms-modal__close svg {
    width: 18px;
    height: 18px;
}

.terms-modal__panel h2 {
    margin: 0 0 1rem;
}

.terms-modal__body p {
    color: #555;
    margin: 0 0 1rem;
    line-height: 1.6;
}

.terms-modal-trigger {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.size-modal__gallery {
    position: relative;
    background: #f5f5f5;
    min-height: 0;
    overflow: hidden;
}

.size-modal__gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.size-modal__gallery-nav-wrap {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    gap: 0.6rem;
    z-index: 1;
}

.size-modal__gallery-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: none;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--color-text);
}

.size-modal__info {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 1.5rem;
}

.size-modal__picker {
    display: contents;
}

.size-modal__picker[hidden] {
    display: none;
}

.size-modal__info-scroll {
    flex: 1;
    overflow-y: auto;
    padding-right: 1.5rem;
}

.size-modal__brand {
    font-weight: 600;
    margin: 0 0 0.3rem;
}

.size-modal__name {
    margin: 0 0 0.4rem;
    color: #555;
}

.size-modal__price {
    font-weight: 600;
    margin: 0 0 1.25rem;
}

.size-modal__label {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.size-modal__submit-row {
    padding-top: 1rem;
}

#size-modal-form .add-to-cart-button {
    width: 100%;
}

.size-modal__success {
    min-height: 320px;
    padding: 2.5rem;
    text-align: left;
}

.size-modal__success[hidden] {
    display: none;
}

.size-modal__success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: #10865b;
    color: #10865b;
}

.size-modal__success-icon svg {
    width: 1.2rem;
    height: 1.2rem;
    color: #fff;
}

.size-modal__success-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-right: 2.5rem;
    margin-bottom: 1.75rem;
}

.size-modal__success-title {
    margin: 0;
    font-size: clamp(1.8rem, 5vw, 2.2rem);
    font-weight: 600;
}

.size-modal__success-product {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.75rem;
}

.size-modal__success-image-wrap {
    flex: 0 0 6.8rem;
    width: 6.8rem;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
}

.size-modal__success-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.size-modal__success-name,
.size-modal__success-price {
    margin: 0;
    font-weight: 600;
}

.size-modal__success-brand,
.size-modal__success-size,
.size-modal__success-tax {
    margin: 0.18rem 0;
    color: #777;
}

.size-modal__success-tax {
    margin-top: 0.55rem;
    font-size: 0.92rem;
}

.size-modal__bag-link {
    display: flex;
    width: 100%;
    min-height: 3.6rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #111;
    border-color: #111;
    text-decoration: none;
}

/* Below 960px: a bottom sheet, not a full 100vh takeover — Nike's own
   version leaves a dimmed sliver of the page visible above it rather than
   covering the whole viewport. The whole sheet is one scrollable column:
   the image sits at its natural, uncropped aspect ratio (no fixed
   aspect-ratio/cover crop — that was cutting off heads/feet on our tall
   portrait photos), so its height varies per photo and the sheet simply
   scrolls further to show the rest. The close button is fixed at a
   viewport offset matched to the sheet's own top edge, so it reads as
   pinned to the sheet rather than floating in the dimmed area above it. */
@media (max-width: 960px) {
    .size-modal__panel {
        top: auto;
        bottom: 0;
        left: 0;
        transform: translateY(100%);
        width: 100%;
        height: 88vh;
        max-width: none;
        border-radius: 16px 16px 0 0;
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .size-modal.is-open .size-modal__panel {
        transform: translateY(0);
    }

    .size-modal.size-modal--success .size-modal__panel {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        min-height: 42vh;
        border-radius: 24px 24px 0 0;
    }

    .size-modal__close {
        position: fixed;
        top: calc(12vh + 1rem);
    }

    .size-modal.size-modal--success .size-modal__close {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
    }

    .size-modal__gallery {
        width: 100%;
    }

    .size-modal__gallery img {
        height: auto;
        object-fit: contain;
    }

    .size-modal__info {
        display: block;
        padding: 1.5rem;
    }

    .size-modal__info-scroll {
        overflow-y: visible;
        padding-right: 0;
    }

    .size-modal__submit-row {
        padding-top: 1.5rem;
    }

    .size-modal__success {
        min-height: 42vh;
        padding: 2.5rem 1.5rem 1.75rem;
    }

    .size-modal__success-title {
        font-size: 1.65rem;
    }

    .size-modal__success-image-wrap {
        flex-basis: 5.8rem;
        width: 5.8rem;
    }
}

/* Coupon & points redemption */

.cart-promo {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.cart-promo__form {
    display: flex;
    gap: 0.4rem;
}

.cart-promo__input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font: inherit;
    min-width: 0;
}

.cart-promo__apply {
    padding: 0.5rem 0.9rem;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.cart-promo__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #fff;
    font: inherit;
    color: #555;
    cursor: pointer;
}

.cart-promo__trigger:hover {
    border-color: #999;
}

.cart-promo__trigger-icon {
    color: #999;
    font-size: 1.1rem;
}

.cart-promo__applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 4px;
    font-size: 0.9rem;
}

.cart-promo__remove {
    background: none;
    border: none;
    color: #d92d20;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0;
}

.cart-promo__remove:hover,
.cart-promo__remove:focus-visible {
    background: rgba(217, 45, 32, 0.08);
}

.cart-promo__note {
    padding: 0.5rem 0.75rem;
    background: #f9f9f9;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

.cart-summary {
    padding: 1.5rem;
    background: #f9f9f9;
    border-radius: 8px;
}

.loyalty-tier-card {
    padding: 1.5rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin: 1.5rem 0;
}

.loyalty-tier-card p {
    margin: 0 0 0.5rem;
}

.loyalty-tier-card p:last-child {
    margin-bottom: 0;
}

.loyalty-tier-card__current {
    font-size: 1.1rem;
    color: var(--color-accent-dark);
}

/* FAQ accordion */
.faq-list {
    border-top: 1px solid var(--color-border);
    margin-top: 1.5rem;
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-item__toggle {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    padding: 1.25rem 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

.faq-item__number {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-accent);
    flex: 0 0 auto;
    min-width: 2rem;
}

.faq-item__question {
    flex: 1;
    font-size: 1.05rem;
    font-weight: 500;
}

.faq-item__icon {
    flex: 0 0 auto;
    font-size: 1.3rem;
    color: var(--color-accent);
    transition: transform 0.3s ease;
}

.faq-item.is-open .faq-item__icon {
    transform: rotate(45deg);
}

.faq-item__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.faq-item__panel-inner {
    overflow: hidden;
}

.faq-item.is-open .faq-item__panel {
    grid-template-rows: 1fr;
}

.faq-item__answer {
    padding: 0 0 1.25rem;
    color: #555;
    line-height: 1.6;
}

/* Policy pages (Return Policy, etc.) */
.policy-page__body {
    max-width: 800px;
    line-height: 1.7;
    color: #444;
    margin-top: 1rem;
}

.policy-tabs {
    margin-top: 1.5rem;
}

.policy-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 1px solid var(--color-rose-pale);
}

.policy-tabs__tab {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
}

.policy-tabs__tab:hover {
    color: var(--color-accent-dark);
}

.policy-tabs__tab.is-active {
    color: var(--color-accent-dark);
    border-bottom-color: var(--color-accent);
}

.policy-tabs__panel {
    display: none;
}

.policy-tabs__panel.is-active {
    display: block;
}

.cart-summary h2 {
    margin-top: 0;
}

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.9rem;
}

.cart-summary__row--discount {
    color: #067647;
}

.cart-summary__row--total {
    font-weight: 700;
    font-size: 1.1rem;
    border-top: 1px solid var(--color-border);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}

.cart-summary__note {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #777;
}

@media (max-width: 640px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-item {
        grid-template-columns: 90px 1fr;
    }

    .cart-item__line-total {
        grid-column: 2;
    }
}

/* Checkout */

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

.checkout-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.order-tracker {
    display: flex;
    align-items: flex-start;
    margin: 1.5rem 0 2rem;
    max-width: 700px;
}

.order-tracker__stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.order-tracker__stage::before {
    content: '';
    position: absolute;
    top: 0.4rem;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}

.order-tracker__stage:first-child::before {
    display: none;
}

.order-tracker__stage.is-reached::before {
    background: var(--color-accent);
}

.order-tracker__dot {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--color-border);
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.order-tracker__stage.is-reached .order-tracker__dot {
    background: var(--color-accent);
}

.order-tracker__label {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #888;
}

.order-tracker__stage.is-reached .order-tracker__label {
    color: var(--color-accent-dark);
    font-weight: 600;
}

@media (max-width: 600px) {
    .order-tracker {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 1.15rem;
        column-gap: 0.35rem;
        max-width: 100%;
    }

    .order-tracker__stage {
        min-width: 0;
    }

    .order-tracker__stage:nth-child(4)::before {
        display: none;
    }

    .order-tracker__label {
        font-size: 0.6rem;
        line-height: 1.2;
        max-width: 5.5rem;
    }
}

.checkout-section h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.form-field label {
    color: #555;
    font-weight: 600;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field input[type="search"],
.form-field input[type="password"],
.form-field textarea,
.form-field select {
    padding: 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font: inherit;
    width: 100%;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-field--checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.form-field--checkbox label {
    font-weight: 400;
}

.required-mark {
    color: #d92d20;
}

.required-note {
    font-size: 0.8rem;
    color: #777;
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
}

.form-field__help {
    font-size: 0.75rem;
    color: #777;
    margin: 0.2rem 0 0;
}

.form-field__error {
    font-size: 0.8rem;
    color: #d92d20;
    margin: 0.2rem 0 0;
}

.form-field__error--top {
    background: #fdf1f0;
    border: 1px solid #f3c6c2;
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 1rem;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(59, 30, 34, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-card {
    max-width: 420px;
    margin: 1.5rem auto;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.auth-card h1 {
    margin-top: 0;
    font-size: 1.6rem;
}

.auth-card__footer {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    text-align: center;
}

.auth-card__footer a {
    color: var(--color-accent-dark);
}

.confirm-delete-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.btn-danger {
    display: inline-block;
    padding: 0.7rem 1.8rem;
    background: #d92d20;
    color: #fff;
    text-decoration: none;
    border-radius: 2px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid #d92d20;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-danger:hover {
    background: #b3261e;
}

.btn-cancel {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 9px 15px;
    background: #fff;
    color: #a52d35;
    border: 1px solid #a52d35;
    border-radius: 3px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.btn-cancel:hover {
    filter: brightness(.95);
}

.btn-retry {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 9px 15px;
    background: #9a5962;
    color: #fff;
    border: 1px solid #9a5962;
    border-radius: 3px;
    font: inherit;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}

.btn-retry:hover {
    filter: brightness(.95);
}

.checkout-summary {
    position: sticky;
    top: 1rem;
}

.checkout-summary__item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
    padding: 0.35rem 0;
    color: #555;
}

.checkout-summary__item--with-image {
    align-items: center;
    padding: 0.6rem 0;
}

.checkout-summary__image {
    width: 52px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    background: #f0e7e2;
    flex-shrink: 0;
}

.checkout-summary__item--with-image .checkout-summary__name {
    flex: 1;
    min-width: 0;
}

.checkout-summary__item--with-image .checkout-summary__price {
    flex-shrink: 0;
}

.payment-method-choices ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.payment-method-choices li {
    display: flex;
}

.payment-method-choices label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

/* Payment method picker (checkout Payment step) — cards you select from,
   each expanding its own detail panel right underneath, mirroring how
   Nike's payment page pairs a method list with the chosen method's
   details rather than cramming everything into plain radio rows. */

.payment-method-picker {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.payment-method-picker__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.payment-method-picker__option input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-accent);
    flex-shrink: 0;
}

.payment-method-picker__label {
    font-weight: 600;
    font-size: 0.95rem;
}

.payment-method-picker__option.is-selected {
    border-color: var(--color-accent);
    background: var(--color-bg-alt);
}

.upi-pay-panel {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding: 1.2rem 1.4rem;
    margin: -0.4rem 0 1.5rem;
    background: var(--color-bg-alt);
    border-radius: 8px;
    font-size: 0.88rem;
    color: #5a4448;
}

.upi-pay-panel p {
    margin: 0 0 0.4rem;
}

.upi-pay-panel p:last-child {
    margin-bottom: 0;
}

.upi-pay-panel__qr {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    background: #fff;
    padding: 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.upi-pay-panel__details {
    flex: 1;
}

.upi-pay-panel__id {
    font-size: 0.95rem;
}

.upi-pay-panel__amount {
    font-weight: 600;
    color: var(--color-text);
}

@media (max-width: 640px) {
    .upi-pay-panel {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Checkout stepper (Sign Up / Address / Payment) */

.checkout-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 480px;
    margin: 1.5rem auto 2rem;
}

.checkout-stepper__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    position: relative;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #999;
}

.checkout-stepper__step::before {
    content: '';
    position: absolute;
    top: 0.9rem;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}

.checkout-stepper__step:first-child::before {
    display: none;
}

.checkout-stepper__badge {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    color: #999;
    font-size: 0.85rem;
    position: relative;
    z-index: 1;
}

.checkout-stepper__step.is-done,
.checkout-stepper__step.is-current {
    color: var(--color-accent-dark);
    font-weight: 600;
}

.checkout-stepper__step.is-done .checkout-stepper__badge,
.checkout-stepper__step.is-current .checkout-stepper__badge {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.checkout-stepper__step.is-done::before {
    background: var(--color-accent);
}

/* Address step (choose or add a shipping address) */

.checkout-address-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    grid-template-areas: "main summary";
    gap: 2.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

.checkout-address-layout__main {
    grid-area: main;
}

.checkout-address-layout__summary {
    grid-area: summary;
}

.checkout-address-layout__subtext {
    color: #777;
    margin: -0.5rem 0 1.5rem;
    font-size: 0.9rem;
}

.address-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: 1rem;
    background: #fff;
    width: 100%;
}

.address-tile__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.88rem;
    color: #555;
    text-align: left;
}

.address-tile__body strong {
    color: var(--color-text);
}

.address-tile__name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.address-tile__default-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent-dark);
    border: 1px solid var(--color-accent);
    border-radius: 2px;
    width: fit-content;
}

.address-tile__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.address-tile__edit {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-accent-dark);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
}

.address-tile__edit:hover {
    text-decoration: underline;
}

.address-tile--add {
    justify-content: flex-start;
    background: var(--color-bg-alt);
    border-style: dashed;
    cursor: pointer;
    color: var(--color-accent-dark);
    font-weight: 600;
    font-size: 0.9rem;
}

.address-tile__plus {
    font-size: 1.3rem;
    line-height: 1;
}

.checkout-summary-collapse {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: 1rem;
    padding: 0.9rem 1.1rem;
}

.checkout-summary-collapse summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.checkout-summary-collapse summary::-webkit-details-marker {
    display: none;
}

.checkout-summary-collapse--address summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
}

.checkout-summary-collapse__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkout-summary-collapse--address .checkout-summary-collapse__right {
    width: 100%;
    justify-content: space-between;
}

.checkout-summary-collapse__chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-text);
    transition: transform 0.2s ease;
}

.checkout-summary-collapse[open] .checkout-summary-collapse__chevron {
    transform: rotate(180deg);
}

.checkout-summary-collapse__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #555;
    padding: 0.4rem 0 0;
}

.checkout-address-summary {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.88rem;
    color: #555;
    padding: 1rem 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    position: relative;
}

.checkout-address-summary strong {
    color: var(--color-text);
}

.checkout-address-summary__change {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent-dark);
}

@media (max-width: 640px) {
    .checkout-address-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "summary"
            "main";
    }

    .checkout-address-layout__summary--before-mobile {
        order: -1;
    }

    .checkout-address-layout__main--address-list {
        display: flex;
        flex-direction: column;
    }

    .address-tile:not(.address-tile--add) {
        align-items: flex-start;
        flex-direction: column;
    }

    .address-tile__actions {
        width: 100%;
        margin-top: 0.5rem;
        justify-content: flex-start;
        gap: 0.8rem;
    }
}

/* Add New Address drawer — a right-side sliding panel, distinct from the
   centered .login-modal/.size-modal overlay pattern used elsewhere. */

.address-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    transition: visibility 0.25s;
    pointer-events: none;
}

.address-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.address-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(59, 30, 34, 0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.address-drawer.is-open .address-drawer__backdrop {
    opacity: 1;
}

.address-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 90%;
    max-width: 420px;
    background: var(--color-bg, #fff);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    padding: 1.5rem;
}

.address-drawer.is-open .address-drawer__panel {
    transform: translateX(0);
}

.address-drawer__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.address-drawer__header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.address-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    flex-shrink: 0;
}

.address-drawer__close svg {
    width: 18px;
    height: 18px;
}

.address-drawer__form h3 {
    font-size: 0.95rem;
    margin: 1.2rem 0 0.8rem;
}

.address-drawer__form h3:first-child {
    margin-top: 0;
}

.address-drawer__hint {
    font-size: 0.78rem;
    color: #777;
    margin: -0.4rem 0 0.8rem;
}

.address-drawer__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.95rem;
    margin: 0.5rem 0 1rem;
    cursor: pointer;
}

.address-drawer__toggle-label {
    color: var(--color-text);
}

.address-drawer__toggle input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.address-drawer__toggle-switch {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 42px;
    height: 24px;
    background: var(--color-border);
    border-radius: 999px;
    transition: background 0.2s ease;
}

.address-drawer__toggle-switch::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.address-drawer__toggle input:checked + .address-drawer__toggle-switch {
    background: var(--color-accent);
}

.address-drawer__toggle input:checked + .address-drawer__toggle-switch::before {
    transform: translateX(18px);
}

.address-drawer__toggle input:focus-visible + .address-drawer__toggle-switch {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.address-drawer__submit {
    width: 100%;
    margin-top: 0.5rem;
}

/* Buttons */

.btn-primary {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--color-accent);
    color: #fff;
    text-decoration: none;
    border-radius: 2px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--color-accent);
    transition: background 0.2s;
}

.btn-primary:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.btn-outline {
    display: inline-block;
    padding: 0.7rem 1.8rem;
    background: transparent;
    color: var(--color-accent-dark);
    text-decoration: none;
    border-radius: 2px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--color-accent);
}

.btn-outline:hover {
    background: var(--color-rose-pale);
}

/* Hero carousel */

.hero-carousel {
    position: relative;
    overflow: hidden;
}

.hero-carousel__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.hero-carousel__track::-webkit-scrollbar {
    display: none;
}

.hero-slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    height: 70vh;
    min-height: 420px;
    max-height: 640px;
}

.hero-slide__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-slide__text {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    max-width: 460px;
    background: rgba(255, 250, 247, 0.82);
    padding: 2.5rem;
    border-radius: 4px;
}

.hero-slide__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    color: var(--color-accent);
    margin: 0 0 0.5rem;
}

.hero-slide__text h1 {
    font-size: 2.6rem;
    line-height: 1.15;
    margin: 0 0 0.75rem;
    font-weight: 500;
}

.hero-slide__text h1 .accent-script {
    font-size: 3rem;
}

.hero-slide__tagline {
    color: var(--color-rose);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin: 0 0 1.5rem;
}

.hero-carousel__dots {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
}

.hero-carousel__dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    display: block;
}

.hero-carousel__dots span.is-active {
    background: #fff;
}

/* Feature icons row */

.feature-icons-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5rem;
    padding: 2rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    border-bottom: 1px solid var(--color-border);
}

.feature-icon {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.feature-icon svg {
    width: 30px;
    height: 30px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.feature-icon strong {
    display: block;
    font-size: 0.85rem;
}

.feature-icon span {
    display: block;
    font-size: 0.75rem;
    color: #8a7276;
}

/* Section heading */

.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.section-heading h2 {
    font-size: 1.6rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.section-heading--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
}

/* Shop by Collection */

.collection-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.collection-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    text-align: center;
}

.collection-tile img,
.collection-tile__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: var(--color-bg-alt);
    margin-bottom: 0.75rem;
}

.collection-tile__label {
    display: block;
    font-family: var(--font-heading);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Home "Shop by Collection": a row of tiles that is always the same size, however many
   collections there are: three and a half across on a wide screen, so the next tile peeks in and
   shows there is more. The arrows sit on top of the tiles (they take no room, so nothing resizes)
   and an arrow is hidden when there is nothing further to scroll to. */
.carousel.collection-carousel {
    display: block;
}

.collection-carousel .carousel__track {
    gap: 1.5rem;
    padding-bottom: 0;
}

.collection-carousel .carousel__item {
    flex: 0 0 calc((100% - 3 * 1.5rem) / 3.5);
    min-width: 0;
}

.collection-carousel .carousel__nav {
    position: absolute;
    top: calc(50% - 1.5rem);
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: opacity 0.15s;
}

.collection-carousel .carousel__nav--prev {
    left: 0.75rem;
}

.collection-carousel .carousel__nav--next {
    right: 0.75rem;
}

.collection-carousel .carousel__nav:disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 900px) {
    .collection-carousel .carousel__track {
        gap: 1rem;
    }

    .collection-carousel .carousel__item {
        flex-basis: calc((100% - 2 * 1rem) / 2.5);
    }
}

@media (max-width: 600px) {
    .collection-carousel .carousel__item {
        flex-basis: calc((100% - 1rem) / 1.6);
    }
}

/* Home page top-level category showcase — full-bleed, edge to edge like the
   product listing pages, not boxed into .page-container. */
.category-showcase-section {
    padding-top: 2.5rem;
}

.category-showcase-section .page-container {
    min-height: 0;
    padding-bottom: 0;
}

.category-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    width: 100%;
}

.category-showcase__tile {
    position: relative;
    display: block;
    height: 45vh;
    max-height: 480px;
    min-height: 280px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
}

.category-showcase__tile img,
.category-showcase__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--color-bg-alt);
    transition: transform 0.6s ease;
}

.category-showcase__tile:hover img {
    transform: scale(1.05);
}

.category-showcase__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: linear-gradient(to top, rgba(59, 30, 34, 0.55), transparent 65%);
}

.category-showcase__label {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.category-showcase__cta {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
}

@media (max-width: 640px) {
    .category-showcase {
        grid-template-columns: 1fr;
    }

    .category-showcase__tile {
        height: 55vw;
        max-height: 320px;
        min-height: 220px;
    }
}

/* Promo banner */

.promo-banner {
    position: relative;
    margin: 3rem 0;
    border-radius: 4px;
    overflow: hidden;
}

.promo-banner img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

.promo-banner__text {
    position: absolute;
    top: 50%;
    left: 6%;
    transform: translateY(-50%);
    max-width: 380px;
    background: rgba(255, 250, 247, 0.85);
    padding: 1.75rem;
    border-radius: 4px;
}

.promo-banner .eyebrow {
    text-transform: uppercase;
    color: var(--color-accent);
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    margin: 0 0 0.3rem;
}

.promo-banner h2 {
    margin: 0 0 0.5rem;
    font-size: 1.8rem;
}

/* Brand story */

.brand-story {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    margin: 4rem auto;
    max-width: 1100px;
    padding: 0 1.5rem;
}

.brand-story img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 4px;
}

.brand-story__text h2 {
    font-size: 1.8rem;
    margin: 0 0 1rem;
}

.brand-story__text p {
    color: #5a4448;
}


/* Feature strip */

.feature-strip {
    background: var(--color-accent-dark);
    color: #fff;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    margin: 3rem 0;
}

.feature-strip__item svg {
    width: 34px;
    height: 34px;
    margin-bottom: 0.5rem;
}

.feature-strip__item strong {
    display: block;
    font-family: var(--font-heading);
    margin-bottom: 0.3rem;
}

.feature-strip__item span {
    display: block;
    font-size: 0.8rem;
    opacity: 0.85;
}

/* Instagram-style gallery */

.instagram-gallery {
    text-align: center;
    margin: 4rem auto;
    max-width: 1100px;
    padding: 0 1.5rem;
}

.instagram-gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.instagram-gallery__grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
}

/* Brand marquee — a continuously-scrolling strip of brand logos near the
   bottom of the home page. The track renders the same set of logos twice
   back-to-back and animates from 0 to -50%, so the moment the first copy
   scrolls fully out of view the second (identical) copy is exactly back
   where the first one started — a seamless loop with no jump or reset. */

.brand-marquee {
    margin: 4rem 0 0;
    padding: 2.5rem 0 3rem;
    border-top: 1px solid var(--color-rose-pale);
}

.brand-marquee__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.brand-marquee__track {
    display: flex;
    width: max-content;
    animation: brand-marquee-scroll 38s linear infinite;
}

.brand-marquee:hover .brand-marquee__track {
    animation-play-state: paused;
}

.brand-marquee__set {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-marquee__logo {
    flex: 0 0 auto;
    width: 120px;
    height: 70px;
    margin: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(100%);
    opacity: 0.65;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.brand-marquee__logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.brand-marquee__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand-marquee__logo--placeholder {
    border: 1px dashed var(--color-rose-pale);
    border-radius: 4px;
    opacity: 0.5;
    pointer-events: none;
}

@keyframes brand-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .brand-marquee__track {
        animation: none;
    }
}

@media (max-width: 600px) {
    .brand-marquee__logo {
        width: 96px;
        height: 56px;
        margin: 0 0.7rem;
    }
}

/* Home page sections */

.home-section {
    margin: 2.5rem 0;
}

.home-section h2 {
    margin-bottom: 0.5rem;
}

@media (max-width: 900px) {
    .collection-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-story {
        grid-template-columns: 1fr;
    }

    .feature-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .instagram-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-slide__text {
        left: 5%;
        right: 5%;
        max-width: none;
        padding: 1.5rem;
    }

    .hero-slide__text h1 {
        font-size: 1.8rem;
    }

    .hero-slide__text h1 .accent-script {
        font-size: 2.1rem;
    }

    .promo-banner__text {
        left: 5%;
        right: 5%;
        max-width: none;
    }
}

/* Carousel */

.carousel-section {
    margin: 3rem 0;
}

.carousel-section h2 {
    margin-bottom: 1rem;
}

.carousel {
    position: relative;
    display: flex;
    align-items: center;
}

.carousel__track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
    display: none;
}

.carousel__item {
    flex: 0 0 220px;
    scroll-snap-align: start;
}

.carousel__nav {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: #fff;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    z-index: 5;
}

.carousel__nav:disabled {
    opacity: 0.4;
    cursor: default;
}

.carousel__nav--prev {
    margin-right: -1.25rem;
}

.carousel__nav--next {
    margin-left: -1.25rem;
}

/* The header carries a lot of content — main nav, search/account/wishlist/
   cart, plus staff-only text links (Inventory, Reports, Orders, Rewards,
   Logout). That doesn't fit in two flexible side columns once the viewport
   drops below roughly desktop width, well before the phone-only breakpoint
   below — without this, the tablet range shows a broken wrapped column of
   nav links instead of the compact hamburger header. */
@media (max-width: 1100px) {
    /* The header keeps the same symmetric 1fr/auto/1fr grid as desktop, so
       the brand block stays truly centered (equal side columns) without
       resorting to absolute positioning — which previously fought with the
       search row wrapping onto its own line below and produced an overlap. */
    .site-header__brand {
        width: max-content;
    }

    .site-header__brand-tagline {
        display: none;
    }

    .site-header__actions {
        gap: 0.6rem;
    }

    .site-nav__menu-chip,
    .site-nav__menu-divider,
    .site-nav__menu-extra {
        display: list-item;
    }

    .site-nav__menu-extra form {
        display: contents;
    }

    .site-nav__menu-extra button {
        background: none;
        border: none;
        padding: 0;
        font: inherit;
        cursor: pointer;
        color: inherit;
        width: 100%;
        text-align: left;
    }

    .site-nav__toggle {
        display: flex;
    }

    /* A true off-canvas drawer (fixed to the viewport, not the header) so it
       overlays the page — like Nike's — instead of pushing page content
       down. Slid fully off-screen by default and eased in on open via
       `left` rather than `transform` — a transformed ancestor becomes the
       containing block for any position:fixed descendants (per spec), which
       would make the drill-down .mega-menu panel below size itself against
       this drawer's own (already 85%/380px) box instead of the real
       viewport, shrinking it well short of full width. `left` carries no
       such side effect. The backdrop dims the rest of the page and closes
       the drawer when tapped. */
    .site-nav__menu {
        display: flex;
        position: fixed;
        top: 0;
        left: -400px;
        bottom: 0;
        z-index: 100;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 85%;
        max-width: 380px;
        background: var(--color-bg);
        padding: 1rem;
        border-bottom: none;
        border-right: 1px solid var(--color-border);
        box-shadow: 16px 0 32px rgba(59, 30, 34, 0.18);
        max-height: none;
        overflow-y: auto;
        transition: left 0.25s ease;
    }

    .site-nav__menu.is-open {
        left: 0;
    }

    .site-nav__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 90;
        background: rgba(59, 30, 34, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s;
    }

    .site-nav__backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* Nike-style account chip pinned to the top of the sidebar panel. */
    .site-nav__menu-chip {
        padding-bottom: 0.85rem;
        margin-bottom: 0.35rem;
        border-bottom: 1px solid var(--color-border);
    }

    .site-nav__menu-chip a,
    .site-nav__menu-chip button {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        text-decoration: none;
        color: var(--color-text);
        font-size: 1rem;
        font-weight: 600;
        background: none;
        border: none;
        padding: 0;
        width: 100%;
        text-align: left;
        cursor: pointer;
        font-family: inherit;
    }

    .site-nav__menu-chip svg {
        width: 24px;
        height: 24px;
        color: var(--color-accent);
        flex-shrink: 0;
    }

    .site-nav__menu-divider {
        height: 1px;
        background: var(--color-border);
        margin: 0.35rem 0 0.5rem;
        padding: 0;
    }

    /* Plain links (Shop, New Arrivals, About Us) become full-width rows
       with a right-hand divider, like Nike's sidebar list. */
    .site-nav__menu > li:not(.site-nav__dropdown) > a {
        display: block;
        padding: 0.85rem 0;
        font-size: 1rem;
        border-bottom: 1px solid var(--color-border);
    }

    /* Dropdown items (Women/Men) carry their own full-width divider on the
       <li> itself, since the row is split between the link and the chevron
       toggle button and neither child alone spans the full row. */
    .site-nav__dropdown {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--color-border);
    }

    .site-nav__dropdown > a {
        display: block;
        font-size: 1rem;
    }

    /* Swap the desktop's small ▾ glyph for a right-aligned chevron, matching
       the ">" indicators Nike uses for expandable sidebar entries. */
    .site-nav__dropdown-toggle {
        font-size: 0;
        margin-left: auto;
        padding: 0.4rem;
    }

    .site-nav__dropdown-toggle::after {
        content: '\203A';
        font-size: 1.3rem;
        color: var(--color-text);
    }

    /* Clicking a chevron swaps the whole drawer panel over to that
       category's submenu — a Nike-style drill-down "page" — rather than
       accordioning content in below the row. It's a same-position, same-size
       overlay on top of the main list, dismissed via the "‹ All" back
       button (see .mega-menu__back). */
    .site-nav__dropdown .mega-menu {
        display: flex;
        position: fixed;
        top: 0;
        left: -400px;
        right: auto;
        bottom: 0;
        z-index: 101;
        width: 85%;
        max-width: 380px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 1.5rem;
        border: none;
        box-shadow: none;
        padding: 1rem;
        min-width: 0;
        background: var(--color-bg);
        overflow-y: auto;
        opacity: 1;
        transform: none;
        visibility: hidden;
        transition: left 0.25s ease, visibility 0.25s;
    }

    .site-nav__dropdown.is-open .mega-menu {
        left: 0;
        visibility: visible;
    }

    .mega-menu__back {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        background: none;
        border: none;
        padding: 0.5rem 0;
        margin: 0 0 0.5rem;
        font-size: 0.85rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-text);
        cursor: pointer;
        border-bottom: 1px solid var(--color-border);
    }

    .mega-menu__back::before {
        content: '\2039';
        font-size: 1.3rem;
        line-height: 1;
    }

    .mega-menu__title {
        display: block;
        font-family: var(--font-heading);
        font-size: 1.4rem;
        margin: 0;
    }

    /* Bottom utility rows (Wishlist, Cart, Orders, Profile, Addresses,
       Rewards, staff links, Logout) — icon + label, matching Nike's
       Help/Bag/Favourites rows at the foot of its sidebar. */
    .site-nav__menu-extra a,
    .site-nav__menu-extra button {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        font-size: 0.95rem;
        padding: 0.6rem 0;
        text-decoration: none;
        color: var(--color-text);
    }

    .site-nav__menu-extra svg {
        width: 20px;
        height: 20px;
        color: var(--color-accent);
        flex-shrink: 0;
    }

    .site-nav__menu-extra-count {
        background: var(--color-accent);
        color: #fff;
        border-radius: 999px;
        font-size: 0.7rem;
        line-height: 1;
        padding: 0.2rem 0.45rem;
    }

    .site-nav__menu-extra--logout {
        margin-top: 0.35rem;
        padding-top: 0.6rem;
        border-top: 1px solid var(--color-border);
    }

    .site-nav__menu-extra--logout button {
        color: var(--color-accent-dark);
        font-weight: 600;
    }

    .site-header__search-trigger {
        display: inline-flex;
    }

    /* The persistent inline box only fits alongside wishlist/cart on wide
       screens — at compact widths it becomes an overlay (Nike's pattern: a
       search row pinned to the top, "Cancel" to dismiss), opened via the
       trigger icon above. Between this breakpoint and 960px it only covers
       the top half of the viewport, leaving the page visible beneath —
       matching Nike's own behaviour at that width — and only becomes a
       full-page takeover below 960px (see the follow-up media block). */
    .site-header__search {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 50vh;
        z-index: 110;
        align-items: center;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 0.75rem;
        background: var(--color-bg);
        padding: 1rem 1.25rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
        pointer-events: none;
    }

    .site-header__search.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .site-header__search-icon {
        position: static;
        transform: none;
    }

    .site-header__search input {
        flex: 1;
        width: auto;
        padding: 0.6rem 1rem;
    }

    .site-header__search-cancel {
        display: block;
        background: none;
        border: none;
        padding: 0;
        font: inherit;
        color: var(--color-text);
        cursor: pointer;
        white-space: nowrap;
    }
}

/* Below 960px the search overlay becomes a full-page takeover instead of
   the half-height panel above — there's no longer enough width for the
   page content peeking out beneath it to read as intentional rather than
   just cramped, so it fully covers the viewport instead. */
@media (max-width: 960px) {
    .site-header__search {
        height: 100vh;
    }
}

@media (max-width: 640px) {
    .site-header {
        padding: 0.75rem 1rem;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
    }

    .site-header__brand-name {
        font-size: 0.85rem;
    }

    .site-header__brand-name em {
        font-size: 1rem;
    }

    .hub-tile-grid {
        grid-template-columns: 1fr;
    }

    .listing-layout {
        grid-template-columns: 1fr;
    }

    .product-detail {
        flex-direction: column;
        align-items: stretch;
    }

    .product-detail__info {
        flex-basis: auto;
    }

    .product-detail__gallery {
        flex-direction: column;
        position: static;
        top: auto;
        width: 100%;
    }

    .product-detail__main-image-wrap {
        width: 100%;
    }

    .product-detail__thumbnails {
        flex-direction: row;
        order: 2;
        flex-wrap: wrap;
    }

    .favourite-modal__panel {
        left: 0;
        bottom: 0;
        transform: translateY(100%);
        width: 100%;
        max-width: none;
        padding: 2.25rem 1.5rem 1.5rem;
        border-radius: 24px 24px 0 0;
    }

    .favourite-modal.is-open .favourite-modal__panel {
        transform: translateY(0);
    }

    .favourite-modal__heading h2 {
        font-size: 1.35rem;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .listing-toolbar {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.75rem 1rem;
        align-items: center;
    }

    .listing-toolbar__filters-toggle {
        padding: 0.55rem 0.85rem;
        min-width: 7rem;
        text-align: center;
    }

    .listing-toolbar__count {
        margin: 0;
        text-align: right;
        white-space: nowrap;
    }

    .listing-toolbar__sort {
        grid-column: 1 / -1;
        justify-content: space-between;
        width: 100%;
        gap: 1rem;
    }

    .listing-toolbar__sort select {
        flex: 1;
        min-width: 0;
        max-width: 14rem;
    }
}

@media (max-width: 650px) {
    .listing-layout--full .filters-sidebar__actions {
        justify-content: flex-start;
    }

    .listing-toolbar {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 0.75rem 1rem;
    }

    .listing-toolbar__filters-toggle {
        width: auto;
        min-width: 8rem;
        padding-left: 2rem;
        padding-right: 2rem;
        justify-self: start;
    }

    .listing-toolbar__count {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        justify-self: end;
        align-self: start;
        text-align: right;
        white-space: nowrap;
    }

    .listing-toolbar__sort {
        grid-column: 1;
        grid-row: 2;
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
        width: auto;
    }

    .listing-toolbar__sort select {
        width: clamp(10rem, 45vw, 13rem);
        max-width: 13rem;
        flex: 0 0 auto;
    }
}

@media (max-width: 430px) {
    .filters-sidebar__actions a {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .listing-toolbar__filters-toggle {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Inventory (staff) pages */
.inventory-page {
    max-width: 900px;
}

.inventory-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.inventory-table th,
.inventory-table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.inventory-table th {
    color: #555;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.inventory-table-wrap {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.inventory-table--clickable tbody tr {
    cursor: pointer;
}

.inventory-table--clickable tbody tr:hover {
    background: var(--color-bg-alt);
}

.inventory-table tfoot th {
    text-transform: none;
    color: inherit;
}

.inventory-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem 1.5rem;
    margin: 0 0 2rem;
}

.inventory-facts dt {
    color: #776f6f;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.inventory-facts dd {
    margin: 0.15rem 0 0;
}

.inventory-flag--low {
    color: #b07a14;
    font-weight: 600;
}

@media (max-width: 640px) {
    .orders-table {
        display: block;
        width: 100%;
    }

    .orders-table thead {
        display: none;
    }

    .orders-table tbody,
    .orders-table tr,
    .orders-table td {
        display: block;
        width: 100%;
    }

    .orders-table tr {
        border: 1px solid var(--color-border);
        border-radius: 6px;
        margin-bottom: 1rem;
        padding: 0.75rem 1rem;
        background: #fff;
    }

    .orders-table td {
        display: grid;
        grid-template-columns: minmax(6rem, 38%) 1fr;
        gap: 1rem;
        align-items: start;
        padding: 0.45rem 0;
        border-bottom: 0;
        overflow-wrap: anywhere;
    }

    .orders-table td::before {
        content: attr(data-label);
        color: #777;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
    }
}

.variant-lookup-result {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1rem 0 1.5rem;
    background: #fafafa;
}

.variant-lookup-result__body {
    min-width: 0;
}

.inventory-thumb {
    display: block;
    width: 40px;
    height: 50px;
    object-fit: cover;
    border-radius: 3px;
    background: #f0e7e2;
    flex-shrink: 0;
}

.inventory-product-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 180px;
}

.inventory-thumb--large {
    width: 84px;
    height: 104px;
    border-radius: 4px;
}

.variant-lookup-result__stats {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #555;
}

.pack-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 0.6rem;
}

.pack-item--complete {
    border-color: #1a7f37;
    background: #f0fdf4;
}

.pack-item__image, .pack-item__image-placeholder {
    width: 48px;
    height: 58px;
    object-fit: cover;
    border-radius: 4px;
    background: #f0e7e2;
    flex-shrink: 0;
}

.pack-item__details {
    flex: 1;
}

.pack-item__progress {
    font-weight: 600;
    flex-shrink: 0;
}

.inventory-empty {
    color: #777;
    font-size: 0.9rem;
}

/* Cart report */
.cart-report-toolbar {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}

.cart-report-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 210px;
}

.cart-report-actions form {
    margin: 0;
}

.cart-report-actions .btn-outline {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: center;
    padding: 0.5rem 0.7rem;
    font-size: 0.7rem;
    line-height: 1.4;
    white-space: normal;
    box-sizing: border-box;
}

.download-modal {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    transition: visibility 0.2s;
    pointer-events: none;
}

.download-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.download-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(59, 30, 34, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.download-modal.is-open .download-modal__backdrop {
    opacity: 1;
}

.download-modal__panel {
    position: relative;
    background: var(--color-bg, #fff);
    border-radius: 4px;
    padding: 1.75rem;
    max-width: 380px;
    width: 90%;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.download-modal.is-open .download-modal__panel {
    opacity: 1;
    transform: scale(1);
}

.download-modal__panel h3 {
    margin: 0 0 1.2rem;
    padding-right: 2rem;
}

.download-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
}

.download-modal__close svg {
    width: 18px;
    height: 18px;
}

.download-modal__group {
    margin-bottom: 1.2rem;
}

.download-modal__group > span {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.download-modal__group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    cursor: pointer;
}

.download-modal__actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.download-modal__actions button {
    flex: 1;
}

.coupon-modal {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    transition: visibility 0.2s;
    pointer-events: none;
}

.coupon-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.coupon-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(59, 30, 34, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.coupon-modal.is-open .coupon-modal__backdrop {
    opacity: 1;
}

.coupon-modal__panel {
    position: relative;
    background: var(--color-bg, #fff);
    border-radius: 4px;
    padding: 1.75rem;
    max-width: 420px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.coupon-modal.is-open .coupon-modal__panel {
    opacity: 1;
    transform: scale(1);
}

.coupon-modal__header {
    flex-shrink: 0;
    margin-bottom: 1.2rem;
}

.coupon-modal__header h3 {
    margin: 0;
    padding-right: 2rem;
}

.coupon-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
}

.coupon-modal__close svg {
    width: 18px;
    height: 18px;
}

.coupon-modal__manual {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.coupon-modal__list {
    overflow-y: auto;
    max-height: 320px;
    padding-right: 0.5rem;
    margin-right: -0.5rem;
}

.coupon-modal__section {
    margin-bottom: 1.2rem;
}

.coupon-modal__section:last-child {
    margin-bottom: 0;
}

.coupon-modal__section-title {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: #555;
}

.coupon-modal__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}

.coupon-modal__item:last-child {
    border-bottom: none;
}

.coupon-modal__item p {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: #666;
}

.coupon-modal__item--locked {
    opacity: 0.65;
}

.coupon-modal__item p.coupon-modal__unlock {
    color: var(--color-accent-dark);
    font-weight: 600;
}

/* Shorter viewports need the coupon list itself capped tighter (as a
   share of viewport height) than the fixed desktop pixel value, since the
   modal's header/manual-entry row already eat into a smaller available
   height there. */
@media (max-width: 640px) {
    .coupon-modal__panel {
        max-height: 92vh;
    }

    .coupon-modal__list {
        max-height: 42vh;
    }
}

.coupon-modal__empty {
    color: #777;
    font-size: 0.9rem;
    margin: 0;
}

/* Star ratings & reviews */

.star-rating {
    color: #f5a623;
    letter-spacing: 1px;
}

.star-rating__count {
    font-size: 0.85rem;
    color: #777;
    margin-left: 0.4rem;
}

.reviews-section {
    margin-top: 3rem;
    border-top: 1px solid var(--color-border);
    padding-top: 2rem;
    max-width: 700px;
}

.review-form {
    max-width: 500px;
    margin-bottom: 2rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.review-form h3 {
    margin-top: 0;
}

.review {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
}

.review__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.review__verified {
    font-size: 0.75rem;
    color: #1a7f37;
    background: #f0fdf4;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.review__meta {
    font-size: 0.8rem;
    color: #777;
    margin: 0.2rem 0 0.4rem;
}

.review__delete {
    background: none;
    border: none;
    color: #d92d20;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
    margin-top: 0.4rem;
}

.review--own {
    background: #fafafa;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

/* ---- Return request item picker ---- */
.return-request-items {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.return-request-item {
    display: grid;
    grid-template-columns: auto 64px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid #e6dcd6;
    border-radius: 6px;
    background: var(--color-bg);
}
.return-request-item:has(.return-request-item__check:checked) {
    border-color: var(--color-text);
    background: var(--color-bg-alt);
}
.return-request-item__check {
    width: 1.1rem;
    height: 1.1rem;
}
.return-request-item img, .return-request-item__placeholder {
    width: 64px;
    height: 78px;
    object-fit: cover;
    border-radius: 4px;
    background: #f0e7e2;
}
.return-request-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    cursor: pointer;
}
.return-request-item__body span {
    font-size: 0.85rem;
    color: #736e6e;
}
.return-request-item__ordered {
    font-size: 0.8rem !important;
}
.return-request-item__qty-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-end;
}
.return-request-item__qty-group label {
    font-size: 0.75rem;
    color: #736e6e;
    white-space: nowrap;
}
.return-request-item__qty {
    width: 4.5rem;
    padding: 0.4rem;
    border: 1px solid #d9cbc8;
    border-radius: 4px;
    font: inherit;
}
@media (max-width: 560px) {
    .return-request-item {
        grid-template-columns: auto 56px 1fr;
        grid-template-rows: auto auto;
    }
    .return-request-item__qty-group {
        grid-column: 1 / -1;
        align-items: flex-start;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
    }
}

/* Out-of-stock cart items and the "remove to continue" modal */
.cart-item--unavailable .cart-item__image,
.cart-item--unavailable .cart-item__name {
    opacity: 0.55;
}

.stock-modal[hidden] {
    display: none;
}

.stock-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.stock-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(58, 44, 46, 0.55);
}

.stock-modal__panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.75rem;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.stock-modal__panel h2 {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
}

.stock-modal__items {
    list-style: none;
    margin: 1rem 0 1.5rem;
    padding: 0;
    border-top: 1px solid var(--color-border);
}

.stock-modal__items li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.stock-modal__items li[hidden] {
    display: none;
}

.stock-modal__items small {
    display: block;
    color: #776f6f;
}

.stock-modal__items em {
    flex-shrink: 0;
    font-style: normal;
    font-size: 0.85rem;
    font-weight: 600;
    color: #a52d35;
}

.stock-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.stock-modal__confirm,
.stock-modal__cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.2rem;
    border-radius: 3px;
    font: inherit;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
}

.stock-modal__confirm {
    background: #9a5962;
    color: #fff;
    border: 1px solid #9a5962;
}

.stock-modal__cancel {
    background: #fff;
    color: #8f4650;
    border: 1px solid #9a5962;
}