/** Shopify CDN: Minification failed

Line 2518:8 Unexpected "}"

**/
/* ══════════════════════════════════════
   YEEZY DNA:
   - Near-white (#f5f4f2) background, near-black (#0a0a0a) text
   - Unbounded font (geometric, heavy, condensable — Yeezy's visual voice)
   - DM Mono for all utility text (prices, labels, nav links)
   - NO color except strategic red (#c8241a) as single accent
   - Cards: no border, extreme whitespace, image fills entire card
   - Nav: single-weight ALL-CAPS mono text, no underlines, no hover color
   - Hero: massive editorial typography, almost no decoration
   - Hover states: SLOW, deliberate (1.0s+ transitions)
   - Product names: ALL-CAPS, tight tracking, minimal weight
   - Prices: mono, small, understated
   - Grid: 5 columns desktop, asymmetric gaps
══════════════════════════════════════ */
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        :root {
            --bg: #f5f4f2;
            --bg2: #eceae6;
            --black: #0a0a0a;
            --off: #1a1a1a;
            --red: #c8241a;
            --muted: #888580;
            --border: #dedad4;
            --white: #ffffff;
            --cart-w: 420px;
        }

        html {
            scroll-behavior: smooth;
            background: var(--bg);
            max-width: 100vw;
            width: 100%;
            overflow-x: hidden;
        }

        body {
            font-family: 'DM Mono', monospace;
            background: var(--bg);
            color: var(--black);
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
            font-size: 10px;
            -webkit-font-smoothing: antialiased;
            cursor: default;
        }

        a {
            text-decoration: none;
            color: inherit
        }

        button {
            font-family: inherit;
            cursor: pointer;
            border: none;
            background: none;
            color: inherit
        }

        img {
            display: block;
            max-width: 100%
        }

        ::-webkit-scrollbar {
            width: 1px
        }

        ::-webkit-scrollbar-thumb {
            background: var(--black)
        }

        /* ── WIPE ── */
        #wipe {
            position: fixed;
            inset: 0;
            background: var(--black);
            z-index: 9999;
            pointer-events: none;
            animation: wipeOut .9s cubic-bezier(.76, 0, .24, 1) .1s forwards
        }

        @keyframes wipeOut {
            to {
                transform: translateY(-100%)
            }
        }

        /* ── TOAST ── */
        .toast {
            position: fixed;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: var(--black);
            color: var(--bg);
            padding: 12px 20px 12px 28px;
            font-size: 8px;
            letter-spacing: .3em;
            text-transform: uppercase;
            z-index: 9000;
            white-space: nowrap;
            pointer-events: none;
            transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
            border-radius: 2px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
        }

        .toast.show {
            transform: translateX(-50%) translateY(0);
            pointer-events: all;
            /* allow clicks on View Cart button */
        }

        /* ── ANNOUNCEMENT BAR ── */
        .ann {
            background: var(--black);
            color: var(--bg);
            height: 24px;
            overflow: hidden;
            display: flex;
            align-items: center
        }

        .ann-inner {
            display: inline-flex;
            white-space: nowrap;
            animation: ticker 50s linear infinite
        }

        .ann-item {
            font-size: 7.5px;
            letter-spacing: .5em;
            text-transform: uppercase;
            padding: 0 40px
        }

        .ann-sep {
            color: var(--red);
            opacity: .7;
            margin: 0 4px
        }

        @keyframes ticker {
            to {
                transform: translateX(-50%)
            }
        }

        /* ══ NAV — pure Yeezy: flat, minimal, mono ══ */
        nav {
            position: sticky;
            top: 0;
            z-index: 300;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
        }

        .nav-inner {
            max-width: 1800px;
            margin: 0 auto
        }

        .nav-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 52px;
            padding: 0 32px;
        }

        /* nav-logo replaced by nav-logo-wrap */
        .nav-right {
            display: flex;
            align-items: center;
            gap: 0
        }

        /* ── LOGO ── */
        .nav-logo-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            flex-shrink: 0
        }

        .nav-logo-img {
            height: 36px;
            width: 36px;
            display: block;
            object-fit: cover;
            border-radius: 50%
        }

        .nav-wordmark {
            font-family: 'Unbounded', sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--black);
            white-space: nowrap
        }

        .nav-wordmark .r {
            color: var(--red)
        }

        /* ── LOGO (old rule cleanup) ── */
        .ni {
            width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--black);
            transition: opacity .2s;
            position: relative;
        }

        .ni:hover {
            opacity: .5
        }

        .ni svg {
            pointer-events: none;
            stroke-width: 1.2
        }

        /* cart badge */
        .cbadge {
            position: absolute;
            top: 7px;
            right: 7px;
            background: var(--red);
            color: #fff;
            border-radius: 50%;
            width: 13px;
            height: 13px;
            font-size: 6.5px;
            font-weight: 700;
            display: none;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        .cbadge.on {
            display: flex
        }

        /* currency */
        .cur-wrap {
            position: relative;
            margin-right: 4px
        }

        .cur-btn {
            padding: 6px 12px;
            font-size: 8px;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--muted);
            transition: color .2s;
            border: none;
            background: none;
            font-family: 'DM Mono', monospace;
        }

        .cur-btn:hover {
            color: var(--black)
        }

        .cur-drop {
            position: absolute;
            top: calc(100% + 4px);
            right: 0;
            background: var(--white);
            border: 1px solid var(--border);
            width: 180px;
            max-height: 280px;
            overflow-y: auto;
            display: none;
            z-index: 400;
            box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
        }

        .cur-drop.open {
            display: block
        }

        .cur-opt {
            padding: 10px 16px;
            font-size: 8.5px;
            letter-spacing: .12em;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            color: var(--muted);
            transition: background .1s;
            text-transform: uppercase;
        }

        .cur-opt:hover {
            background: var(--bg);
            color: var(--black)
        }

        .cur-opt.on {
            color: var(--black);
            font-weight: 400
        }

        .cur-opt.on::after {
            content: '✓';
            color: var(--red)
        }

        /* ── NAV LINKS ROW — horizontal, no mobile slider ── */
        .nav-links {
            display: flex;
            align-items: center;
            border-top: 1px solid var(--border);
            padding: 0 32px;
            overflow: hidden;
            /* NO horizontal scroll — links wrap or hide on mobile */
        }

        .nl {
            padding: 9px 16px 10px;
            font-size: 7.5px;
            letter-spacing: .32em;
            text-transform: uppercase;
            color: var(--muted);
            cursor: pointer;
            border-bottom: 1px solid transparent;
            transition: color .2s, border-color .2s;
            white-space: nowrap;
            font-family: 'DM Mono', monospace;
        }

        .nl:hover {
            color: var(--black)
        }

        .nl.on {
            color: var(--black);
            border-bottom-color: var(--black)
        }

        /* search */
        .search-bar {
            width: 100%;
            padding: 8px 32px;
            display: none;
            border-top: 1px solid var(--border)
        }

        .search-bar.open {
            display: block
        }

        .search-inner {
            position: relative;
            max-width: 560px;
            margin: 0 auto
        }

        .search-inner input {
            width: 100%;
            padding: 10px 42px 10px 0;
            border: none;
            border-bottom: 1px solid var(--black);
            background: transparent;
            font-family: 'DM Mono', monospace;
            font-size: 11px;
            outline: none;
            letter-spacing: .04em;
            color: var(--black);
        }

        .search-inner input::placeholder {
            color: var(--border)
        }

        .search-x {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            color: var(--muted);
            transition: color .14s
        }

        .search-x:hover {
            color: var(--black)
        }

        .s-results {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--white);
            border: 1px solid var(--border);
            border-top: none;
            max-height: 320px;
            overflow-y: auto;
            z-index: 400;
        }

        .s-row {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 10px 14px;
            cursor: pointer;
            border-bottom: 1px solid var(--bg);
            transition: background .1s
        }

        .s-row:hover {
            background: var(--bg)
        }

        .s-img {
            width: 42px;
            height: 50px;
            background: var(--bg2);
            flex-shrink: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .s-img img,
        .s-img svg {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .s-label {
            font-size: 8.5px;
            letter-spacing: .12em;
            text-transform: uppercase
        }

        .s-price {
            font-size: 8px;
            color: var(--muted);
            margin-top: 3px
        }

        .s-empty {
            padding: 20px;
            text-align: center;
            font-size: 8px;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: var(--muted)
        }

        /* ── PAGES ── */
        .page {
            display: none
        }

        .page.on {
            display: block
        }

        /* ══ HERO — Yeezy editorial: giant type, raw, no chrome ══ */
        .hero {
            position: relative;
            background: var(--bg2);
            overflow: hidden;
            min-height: 580px;
            display: flex;
            align-items: flex-end;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            transition: transform 10s ease;
        }

        .hero:hover .hero-bg {
            transform: scale(1.03);
        }

        .hero-content {
            position: relative;
            z-index: 2;
            padding: 0 56px 64px;
            max-width: 700px
        }

        .hero-tag {
            font-size: 7px;
            letter-spacing: .6em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 24px;
            display: block;
        }

        .hero-title {
            font-family: 'Unbounded', sans-serif;
            font-size: clamp(64px, 9.5vw, 148px);
            line-height: .84;
            font-weight: 900;
            letter-spacing: -.02em;
            text-transform: uppercase;
            color: var(--black);
            margin-bottom: 28px;
        }

        .hero-title .r {
            color: var(--red)
        }

        .hero-cta-row {
            display: flex;
            align-items: center;
            gap: 0
        }

        .btn-hero {
            padding: 14px 36px;
            background: var(--black);
            color: var(--bg);
            font-family: 'DM Mono', monospace;
            font-size: 8px;
            letter-spacing: .38em;
            text-transform: uppercase;
            transition: background .3s;
            display: inline-block;
        }

        .btn-hero:hover {
            background: var(--red)
        }

        .btn-ghost {
            padding: 14px 36px;
            font-family: 'DM Mono', monospace;
            font-size: 8px;
            letter-spacing: .38em;
            text-transform: uppercase;
            color: var(--muted);
            transition: color .3s;
            display: inline-block;
            margin-left: 2px;
        }

        .btn-ghost:hover {
            color: var(--black)
        }

        /* hero nav */
        .hero-arr {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 5;
            width: 48px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: rgba(0, 0, 0, .15);
            transition: color .2s;
        }

        .hero-arr:hover {
            color: var(--black)
        }

        .hero-arr.l {
            left: 0
        }

        .hero-arr.r {
            right: 0
        }

        .hero-pips {
            position: absolute;
            bottom: 24px;
            right: 56px;
            display: flex;
            gap: 6px;
            z-index: 5;
        }

        .pip {
            width: 16px;
            height: 1px;
            background: rgba(0, 0, 0, .18);
            cursor: pointer;
            transition: all .3s
        }

        .pip.on {
            background: var(--black);
            width: 32px
        }

        /* ══ SECTION HEADER ══ */
        .sec-head {
            max-width: 1800px;
            margin: 0 auto;
            padding: 56px 32px 18px;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }

        .sec-title {
            font-family: 'Unbounded', sans-serif;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .sec-title .r {
            color: var(--red)
        }

        .view-all {
            font-size: 7.5px;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: var(--muted);
            cursor: pointer;
            transition: color .2s;
            text-decoration: underline;
            text-underline-offset: 4px;
            text-decoration-color: transparent;
            transition: all .2s;
        }

        .view-all:hover {
            color: var(--black);
            text-decoration-color: rgba(0, 0, 0, .3)
        }

        /* ══ PRODUCT GRID — Yeezy style: clean, roomy, image-first ══ */
        .grid-wrap {
            max-width: 1800px;
            margin: 0 auto;
            padding: 0 32px 120px
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1px;
            background: var(--border)
        }

        /* skeleton */
        .skel-card {
            background: var(--bg2);
            aspect-ratio: 3/4;
            animation: pulse 1.8s ease infinite
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: .5
            }
        }

        /* ── PRODUCT CARD — Yeezy: image IS the card, no borders, no chrome ── */
        .pcard {
            position: relative;
            cursor: pointer;
            opacity: 0;
            transform: translateY(12px);
            animation: cardIn .6s cubic-bezier(.25, .46, .45, .94) forwards;
            background: var(--bg2);
        }

        @keyframes cardIn {
            to {
                opacity: 1;
                transform: none
            }
        }

        .pcard-img {
            aspect-ratio: 3/4;
            overflow: hidden;
            position: relative;
            background: var(--bg2);
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
        }

        /* Yeezy: very slow zoom — 1.4s is the signature */
        .pcard-img .main-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 1.4s cubic-bezier(.25, .46, .45, .94);
            will-change: transform;
            mix-blend-mode: multiply;
        }

        .pcard-img .main-svg {
            width: 60%;
            height: 60%;
            transition: transform 1.4s cubic-bezier(.25, .46, .45, .94);
            will-change: transform;
            margin: auto;
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pcard-img .alt-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity .8s ease;
            pointer-events: none;
        }

        .pcard:hover .pcard-img .main-img {
            transform: scale(1.06)
        }

        .pcard:hover .pcard-img .main-svg {
            transform: scale(1.06)
        }

        .pcard:hover .pcard-img .alt-img {
            opacity: 1
        }

        /* Yeezy "Add to bag" — slides up slowly */
        .pcard-cta {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(10, 10, 10, .82);
            color: var(--bg);
            padding: 13px;
            text-align: center;
            font-family: 'DM Mono', monospace;
            font-size: 7.5px;
            letter-spacing: .4em;
            text-transform: uppercase;
            transform: translateY(100%);
            transition: transform .45s cubic-bezier(.25, .46, .45, .94);
            backdrop-filter: blur(6px);
        }

        .pcard-cta:hover {
            background: var(--red)
        }

        .pcard:hover .pcard-cta {
            transform: translateY(0)
        }

        /* wishlist heart */
        .pcard-wish {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 3;
            background: rgba(245, 244, 242, .82);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            color: var(--muted);
            opacity: 0;
            transition: opacity .25s, color .16s;
            backdrop-filter: blur(4px);
        }

        .pcard:hover .pcard-wish {
            opacity: 1
        }

        .pcard-wish.on {
            opacity: 1;
            color: var(--red)
        }

        .sale-tag {
            position: absolute;
            top: 12px;
            left: 12px;
            background: var(--red);
            color: #fff;
            font-size: 6.5px;
            letter-spacing: .3em;
            padding: 3px 7px;
            text-transform: uppercase;
            z-index: 2;
        }

        .sold-veil {
            position: absolute;
            inset: 0;
            background: rgba(245, 244, 242, .5);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 7.5px;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, .3);
            z-index: 1;
            pointer-events: none;
        }

        /* card info — understated Yeezy style */
        .pcard-info {
            padding: 12px 6px 16px;
            background: var(--bg)
        }

        .pcard-name {
            font-family: 'DM Mono', monospace;
            font-size: 8.5px;
            letter-spacing: .1em;
            text-transform: uppercase;
            line-height: 1.5;
            color: var(--black);
        }

        .pcard-price {
            font-size: 8.5px;
            margin-top: 3px;
            color: var(--muted)
        }

        .pcard-price .sp {
            color: var(--red)
        }

        .pcard-price .op {
            text-decoration: line-through;
            margin-left: 6px;
            font-size: 8px
        }

        .pcard-colors {
            font-size: 7.5px;
            margin-top: 2px;
            color: rgba(0, 0, 0, .28)
        }

        /* ══ MORPH ZOOM ANIMATION (unchanged from fixed version) ══ */
        #morph {
            position: fixed;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            z-index: 800;
            pointer-events: none;
            overflow: hidden;
            background: var(--bg2);
            opacity: 0;
            will-change: top, left, width, height, opacity;
        }

        #morph img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        #morph svg {
            width: 64%;
            height: 64%;
            display: block;
            margin: auto;
            position: absolute;
            inset: 0
        }

        #morph.expanding {
            transition:
                top .54s cubic-bezier(.76, 0, .24, 1),
                left .54s cubic-bezier(.76, 0, .24, 1),
                width .54s cubic-bezier(.76, 0, .24, 1),
                height .54s cubic-bezier(.76, 0, .24, 1),
                opacity .1s ease;
        }

        #morph.collapsing {
            transition:
                top .5s cubic-bezier(.76, 0, .24, 1),
                left .5s cubic-bezier(.76, 0, .24, 1),
                width .5s cubic-bezier(.76, 0, .24, 1),
                height .5s cubic-bezier(.76, 0, .24, 1),
                opacity .22s ease .32s;
        }

        /* ══ DETAIL VIEW ══ */
        #detail {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 500;
            display: grid;
            grid-template-rows: 52px 1fr;
            opacity: 0;
            pointer-events: none;
            transition: opacity .24s ease;
        }

        #detail.on {
            opacity: 1;
            pointer-events: all
        }

        .dbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 28px;
            border-bottom: 1px solid var(--border);
            background: rgba(245, 244, 242, .98);
            backdrop-filter: blur(16px);
        }

        .dback {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 7.5px;
            letter-spacing: .32em;
            text-transform: uppercase;
            color: var(--muted);
            transition: color .2s;
        }

        .dback:hover {
            color: var(--red)
        }

        .dback:hover svg {
            transform: translateX(-4px)
        }

        .dback svg {
            transition: transform .2s;
            stroke-width: 1.2
        }

        .dbody {
            display: grid;
            grid-template-columns: 1fr 460px;
            height: 100%;
            overflow: hidden
        }

        .dleft {
            background: var(--bg2);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
        }

        .dimg-wrap {
            flex: 1;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: zoom-in
        }

        .dimg-track {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform .6s cubic-bezier(.76, 0, .24, 1)
        }

        .dimg-slide {
            min-width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px 80px;
            overflow: hidden;
        }

        .dimg-slide img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: transform 1.4s cubic-bezier(.25, .46, .45, .94);
            mix-blend-mode: multiply;
        }

        .dimg-slide svg {
            width: 54%;
            height: 54%;
            transition: transform 1.4s cubic-bezier(.25, .46, .45, .94)
        }

        .dimg-wrap:hover .dimg-slide img,
        .dimg-wrap:hover .dimg-slide svg {
            transform: scale(1.06)
        }

        .dthumb-row {
            display: flex;
            gap: 4px;
            padding: 8px 12px 12px;
            flex-shrink: 0;
            overflow-x: auto;
            scrollbar-width: none;
        }

        .dthumb-row::-webkit-scrollbar {
            display: none
        }

        .dthumb {
            width: 48px;
            height: 56px;
            background: var(--bg);
            flex-shrink: 0;
            overflow: hidden;
            cursor: pointer;
            border: 1px solid transparent;
            transition: border-color .16s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .dthumb img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .dthumb.on {
            border-color: var(--black)
        }

        .dcarr {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 4;
            width: 36px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: rgba(0, 0, 0, .2);
            transition: color .2s;
        }

        .dcarr:hover {
            color: var(--black)
        }

        .dcarr.l {
            left: 8px
        }

        .dcarr.r {
            right: 8px
        }

        /* detail right panel */
        .dright {
            overflow-y: auto;
            padding: 40px 44px 44px;
            display: flex;
            flex-direction: column;
            background: var(--bg);
        }

        .dright::-webkit-scrollbar {
            width: 1px
        }

        .dright::-webkit-scrollbar-thumb {
            background: var(--border)
        }

        .d-name {
            font-family: 'Unbounded', sans-serif;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: -.01em;
            text-transform: uppercase;
            line-height: 1.05;
            margin-bottom: 16px;
        }

        .d-price-row {
            display: flex;
            align-items: baseline;
            gap: 12px;
            margin-bottom: 6px
        }

        .d-price-row .sale {
            color: var(--red);
            font-size: 18px
        }

        .d-price-row .orig {
            text-decoration: line-through;
            color: var(--muted);
            font-size: 12px
        }

        .d-price-row .reg {
            font-size: 18px
        }

        .d-stock {
            font-size: 7.5px;
            letter-spacing: .3em;
            text-transform: uppercase;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .d-stock::before {
            content: '';
            width: 4px;
            height: 4px;
            border-radius: 50%;
            flex-shrink: 0
        }

        .d-stock.in {
            color: #3a7a3e
        }

        .d-stock.in::before {
            background: #4caf50
        }

        .d-stock.low {
            color: var(--red)
        }

        .d-stock.low::before {
            background: var(--red)
        }

        .d-stock.out {
            color: #c62828
        }

        .d-stock.out::before {
            background: #e53935
        }

        .divider {
            height: 1px;
            background: var(--border);
            margin: 20px 0
        }

        .d-lbl {
            font-size: 7px;
            letter-spacing: .42em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 10px
        }

        .d-desc {
            font-size: 9.5px;
            line-height: 2;
            color: rgba(0, 0, 0, .48)
        }

        .d-swatches {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 6px
        }

        .d-swatch {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            cursor: pointer;
            outline: 1.5px solid transparent;
            outline-offset: 3px;
            transition: all .16s;
        }

        .d-swatch:hover {
            transform: scale(1.14)
        }

        .d-swatch.on {
            outline-color: var(--black)
        }

        .d-sw-name {
            font-size: 8px;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 18px;
            min-height: 12px
        }

        .d-sizes {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
            margin-bottom: 6px
        }

        .d-sz {
            min-width: 48px;
            height: 48px;
            padding: 0 12px;
            border: 1px solid var(--border);
            font-size: 9px;
            letter-spacing: .1em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all .18s;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--black);
            background: var(--bg);
        }

        .d-sz:hover {
            border-color: var(--black)
        }

        .d-sz.on {
            background: var(--black);
            color: var(--bg);
            border-color: var(--black)
        }

        .d-sz.na {
            opacity: .22;
            cursor: not-allowed;
            text-decoration: line-through
        }

        .szguide {
            font-size: 7.5px;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--muted);
            text-decoration: underline;
            text-underline-offset: 4px;
            cursor: pointer;
            transition: color .16s;
            margin-bottom: 24px;
            display: inline-block;
        }

        .szguide:hover {
            color: var(--black)
        }

        .qty-row {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 20px
        }

        .qty-lbl {
            font-size: 7.5px;
            letter-spacing: .34em;
            text-transform: uppercase;
            color: var(--muted)
        }

        .qty-ctrl {
            display: flex;
            align-items: center;
            border: 1px solid var(--border)
        }

        .qbtn {
            width: 38px;
            height: 38px;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--black);
            transition: background .12s
        }

        .qbtn:hover {
            background: var(--bg2)
        }

        .qval {
            width: 38px;
            text-align: center;
            font-size: 11px
        }

        .d-actions {
            display: flex;
            gap: 8px;
            padding-top: 8px
        }

        .d-add {
            flex: 1;
            padding: 16px;
            background: var(--black);
            color: var(--bg);
            font-family: 'DM Mono', monospace;
            font-size: 8px;
            letter-spacing: .38em;
            text-transform: uppercase;
            transition: background .25s;
        }

        .d-add:hover {
            background: var(--red)
        }

        .d-add.added {
            background: #2e7d32
        }

        .d-add:disabled {
            opacity: .3;
            cursor: not-allowed
        }

        .d-heart {
            width: 52px;
            height: 52px;
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--muted);
            transition: all .18s;
            flex-shrink: 0;
        }

        .d-heart:hover {
            border-color: var(--black);
            color: var(--black)
        }

        .d-heart.on {
            color: var(--red);
            border-color: var(--red)
        }

        .d-accord {
            margin-top: 20px;
            border-top: 1px solid var(--border)
        }

        .ac {
            border-bottom: 1px solid var(--border)
        }

        .ac-hd {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 0;
            cursor: pointer;
            font-size: 7.5px;
            letter-spacing: .32em;
            text-transform: uppercase;
            color: var(--muted);
            transition: color .16s;
        }

        .ac-hd:hover {
            color: var(--black)
        }

        .ac-ico {
            font-size: 16px;
            transition: transform .26s;
            line-height: 1;
            flex-shrink: 0
        }

        .ac.open .ac-ico {
            transform: rotate(45deg)
        }

        .ac-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height .32s cubic-bezier(.25, .46, .45, .94)
        }

        .ac.open .ac-body {
            max-height: 360px
        }

        .ac-text {
            font-size: 9.5px;
            line-height: 1.9;
            color: rgba(0, 0, 0, .44);
            padding-bottom: 16px
        }

        .spin {
            display: inline-block;
            width: 10px;
            height: 10px;
            border: 1.5px solid rgba(245, 244, 242, .3);
            border-top-color: var(--bg);
            border-radius: 50%;
            animation: sp .7s linear infinite;
            vertical-align: middle;
            margin-right: 6px
        }

        @keyframes sp {
            to {
                transform: rotate(360deg)
            }
        }

        .detail-info {
            display: none !important
        }

        /* ══ CART ══ */
        .cart-bg {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .24);
            z-index: 400;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s;
            backdrop-filter: blur(2px)
        }

        .cart-bg.on {
            opacity: 1;
            pointer-events: all
        }

        .cart-panel {
            position: fixed;
            top: 0;
            right: calc(-1 * var(--cart-w) - 2px);
            width: var(--cart-w);
            height: 100%;
            background: var(--bg);
            z-index: 600;
            border-left: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            transition: right .44s cubic-bezier(.76, 0, .24, 1);
        }

        .cart-panel.on {
            right: 0
        }

        .cart-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24px 28px 20px;
            border-bottom: 1px solid var(--border);
        }

        .cart-head h2 {
            font-family: 'Unbounded', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        .cart-close {
            font-size: 22px;
            color: var(--muted);
            transition: color .16s
        }

        .cart-close:hover {
            color: var(--black)
        }

        .cart-body {
            flex: 1;
            overflow-y: auto;
            padding: 16px 28px
        }

        .cart-body::-webkit-scrollbar {
            width: 1px
        }

        .cart-empty-msg {
            height: 220px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            font-size: 8px;
            letter-spacing: .4em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .empty-cta {
            padding: 11px 24px;
            background: var(--black);
            color: var(--bg);
            font-family: 'DM Mono', monospace;
            font-size: 8px;
            letter-spacing: .28em;
            text-transform: uppercase;
            transition: background .2s;
        }

        .empty-cta:hover {
            background: var(--red)
        }

        .citem {
            display: flex;
            gap: 14px;
            padding: 14px 0;
            border-bottom: 1px solid var(--bg2);
            position: relative;
            animation: cslide .28s ease
        }

        @keyframes cslide {
            from {
                opacity: 0;
                transform: translateX(12px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .cthumb {
            width: 60px;
            height: 72px;
            background: var(--bg2);
            flex-shrink: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .cthumb img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .cthumb svg {
            width: 76%;
            height: 76%
        }

        .cname {
            font-size: 8.5px;
            letter-spacing: .1em;
            text-transform: uppercase;
            margin-bottom: 4px
        }

        .cmeta {
            font-size: 7.5px;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--muted);
            margin-top: 2px
        }

        .cprice {
            font-size: 9px;
            color: var(--red);
            margin-top: 5px
        }

        .cqty {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 8px
        }

        .cq-btn {
            width: 22px;
            height: 22px;
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: background .12s
        }

        .cq-btn:hover {
            background: var(--bg2)
        }

        .cq-n {
            font-size: 9px;
            min-width: 16px;
            text-align: center
        }

        .crm {
            position: absolute;
            top: 14px;
            right: 0;
            font-size: 18px;
            color: var(--border);
            transition: color .14s
        }

        .crm:hover {
            color: var(--black)
        }

        .cart-foot {
            padding: 16px 28px 28px;
            border-top: 1px solid var(--border)
        }

        .cart-sub {
            display: flex;
            justify-content: space-between;
            font-size: 8px;
            letter-spacing: .12em;
            text-transform: uppercase;
            margin-bottom: 6px;
            color: var(--muted)
        }

        .cart-total {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            letter-spacing: .1em;
            text-transform: uppercase;
            margin-bottom: 5px
        }

        .cart-note {
            font-size: 8px;
            color: var(--muted);
            margin-bottom: 16px;
            font-style: italic
        }

        .checkout-btn {
            width: 100%;
            padding: 16px;
            background: var(--black);
            color: var(--bg);
            font-family: 'DM Mono', monospace;
            font-size: 8.5px;
            letter-spacing: .38em;
            text-transform: uppercase;
            transition: background .22s;
            margin-bottom: 8px;
        }

        .checkout-btn:hover {
            background: var(--red)
        }

        .checkout-btn:disabled {
            opacity: .35;
            cursor: not-allowed
        }

        .secure-note {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 7.5px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, .24);
            margin-top: 12px
        }

        /* ══ MOBILE MENU — full screen, Yeezy ══ */
        .mob-menu {
            position: fixed;
            inset: 0;
            background: var(--black);
            color: var(--bg);
            z-index: 700;
            display: none;
            flex-direction: column;
            padding: 0;
            overflow-y: auto;
            transform: translateX(-100%);
            transition: transform .5s cubic-bezier(.76, 0, .24, 1);
        }

        .mob-menu.on {
            display: flex;
            transform: translateX(0)
        }

        .mob-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 32px;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
        }

        .mob-logo {
            font-family: 'Unbounded', sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase
        }

        .mob-logo span {
            color: var(--red)
        }

        .mob-x {
            font-size: 26px;
            color: rgba(255, 255, 255, .4);
            transition: color .16s;
            padding: 0 4px
        }

        .mob-x:hover {
            color: var(--bg)
        }

        .mob-links {
            flex: 1;
            list-style: none;
            padding: 32px 0
        }

        .mob-links li {
            border-bottom: 1px solid rgba(255, 255, 255, .04)
        }

        .mob-links a {
            display: block;
            padding: 22px 32px;
            font-family: 'Unbounded', sans-serif;
            font-size: clamp(28px, 6vw, 44px);
            font-weight: 900;
            letter-spacing: -.01em;
            color: rgba(255, 255, 255, .7);
            text-transform: uppercase;
            cursor: pointer;
            transition: color .2s;
        }

        .mob-links a:hover {
            color: var(--bg)
        }

        .mob-foot {
            padding: 24px 32px 40px;
            border-top: 1px solid rgba(255, 255, 255, .06);
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .mob-foot a {
            font-size: 7.5px;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .3);
            cursor: pointer;
            transition: color .16s
        }

        .mob-foot a:hover {
            color: var(--bg)
        }

        /* ══ STATIC PAGES ══ */
        .inner {
            max-width: 800px;
            margin: 0 auto;
            padding: 80px 32px 120px
        }

        .ph1 {
            font-family: 'Unbounded', sans-serif;
            font-size: clamp(28px, 5vw, 52px);
            font-weight: 900;
            letter-spacing: -.01em;
            text-transform: uppercase;
            margin-bottom: 52px
        }

        .ph1 .r {
            color: var(--red)
        }

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

        .faq-q {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 22px 0;
            cursor: pointer;
            font-size: 10.5px;
            transition: color .16s
        }

        .faq-q:hover {
            color: var(--red)
        }

        .faq-ico {
            font-size: 18px;
            transition: transform .26s;
            flex-shrink: 0;
            margin-left: 16px
        }

        .faq-item.open .faq-ico {
            transform: rotate(45deg)
        }

        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height .32s cubic-bezier(.25, .46, .45, .94)
        }

        .faq-item.open .faq-a {
            max-height: 240px
        }

        .faq-a p {
            font-size: 10px;
            line-height: 1.9;
            color: var(--muted);
            padding-bottom: 22px
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px
        }

        .contact-info h3 {
            font-family: 'Unbounded', sans-serif;
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 16px
        }

        .contact-info p {
            font-size: 10px;
            line-height: 1.9;
            color: var(--muted);
            margin-bottom: 12px
        }

        .contact-info a {
            color: var(--red)
        }

        .socials {
            display: flex;
            gap: 6px;
            margin-top: 20px
        }

        .schip {
            padding: 9px 18px;
            border: 1px solid var(--border);
            font-size: 8px;
            letter-spacing: .22em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all .18s;
            color: var(--muted);
        }

        .schip:hover {
            background: var(--black);
            color: var(--bg);
            border-color: var(--black)
        }

        .warn-box {
            margin-top: 28px;
            padding: 16px 20px;
            background: #fff8f6;
            border-left: 3px solid var(--red)
        }

        .warn-lbl {
            font-size: 7px;
            letter-spacing: .36em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 5px
        }

        .warn-box p {
            font-size: 9.5px;
            color: var(--muted)
        }

        .ff {
            margin-bottom: 18px
        }

        .ff label {
            display: block;
            font-size: 7.5px;
            letter-spacing: .36em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 7px
        }

        .ff input,
        .ff textarea {
            width: 100%;
            padding: 11px 0;
            border: none;
            border-bottom: 1px solid var(--border);
            background: transparent;
            font-family: 'DM Mono', monospace;
            font-size: 10px;
            outline: none;
            resize: vertical;
            transition: border-color .18s;
            color: var(--black);
        }

        .ff input:focus,
        .ff textarea:focus {
            border-color: var(--black)
        }

        .ff textarea {
            min-height: 110px;
            padding-top: 8px
        }

        .form-submit {
            width: 100%;
            padding: 15px;
            background: var(--black);
            color: var(--bg);
            font-family: 'DM Mono', monospace;
            font-size: 8px;
            letter-spacing: .38em;
            text-transform: uppercase;
            transition: background .22s;
        }

        .form-submit:hover {
            background: var(--red)
        }

        .wish-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;
            margin-top: 24px
        }

        /* ══ SIZE MODAL ══ */
        .modal-bg {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .44);
            z-index: 900;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .22s;
            backdrop-filter: blur(6px);
        }

        .modal-bg.on {
            opacity: 1;
            pointer-events: all
        }

        .modal-box {
            background: var(--bg);
            max-width: 540px;
            width: 92%;
            padding: 40px;
            position: relative;
            animation: mIn .3s cubic-bezier(.25, .46, .45, .94) both;
            max-height: 80vh;
            overflow-y: auto;
        }

        @keyframes mIn {
            from {
                transform: translateY(16px);
                opacity: 0
            }

            to {
                transform: none;
                opacity: 1
            }
        }

        .modal-x {
            position: absolute;
            top: 16px;
            right: 18px;
            font-size: 20px;
            color: var(--muted);
            transition: color .14s
        }

        .modal-x:hover {
            color: var(--black)
        }

        .modal-title {
            font-family: 'Unbounded', sans-serif;
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 20px
        }

        .sztable {
            width: 100%;
            border-collapse: collapse;
            font-size: 9.5px
        }

        .sztable th {
            background: var(--black);
            color: var(--bg);
            padding: 10px 14px;
            text-align: left;
            font-size: 7px;
            letter-spacing: .3em;
            text-transform: uppercase;
            font-weight: 400
        }

        .sztable td {
            padding: 10px 14px;
            border-bottom: 1px solid var(--bg2);
            color: var(--muted)
        }

        .sztable tr:last-child td {
            border-bottom: none
        }

        /* ══ EDITORIAL STRIP — between grid sections ══ */
        .editorial {
            background: var(--black);
            color: var(--bg);
            padding: 64px 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
            flex-wrap: wrap;
        }

        .ed-title {
            font-family: 'Unbounded', sans-serif;
            font-size: clamp(32px, 5vw, 72px);
            font-weight: 900;
            letter-spacing: -.02em;
            text-transform: uppercase;
            line-height: .9
        }

        .ed-title .r {
            color: var(--red)
        }

        .ed-right {
            display: flex;
            flex-direction: column;
            gap: 8px;
            text-align: right
        }

        .ed-stat {
            font-size: 7px;
            letter-spacing: .4em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .32)
        }

        .ed-val {
            font-family: 'Unbounded', sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: var(--bg)
        }

        /* ══ FOOTER ══ */
        footer {
            background: var(--black);
            color: var(--bg);
            padding: 72px 32px 32px
        }

        .ft-inner {
            max-width: 1800px;
            margin: 0 auto
        }

        .ft-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 48px;
            padding-bottom: 60px
        }

        .ft-logo {
            font-family: 'Unbounded', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            margin-bottom: 16px
        }

        .ft-logo span {
            color: var(--red)
        }

        .ft-desc {
            font-size: 9px;
            line-height: 1.9;
            color: rgba(255, 255, 255, .3);
            max-width: 220px;
            margin-bottom: 24px
        }

        .ft-nl {
            display: flex;
            margin-bottom: 20px
        }

        .ft-nl input {
            flex: 1;
            padding: 12px 14px;
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(255, 255, 255, .08);
            border-right: none;
            color: var(--bg);
            font-family: 'DM Mono', monospace;
            font-size: 9px;
            outline: none;
        }

        .ft-nl input::placeholder {
            color: rgba(255, 255, 255, .18)
        }

        .ft-nl button {
            padding: 12px 18px;
            background: var(--red);
            border: none;
            color: var(--bg);
            font-family: 'DM Mono', monospace;
            font-size: 7.5px;
            letter-spacing: .22em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background .18s;
        }

        .ft-nl button:hover {
            background: #a81c13
        }

        .ft-soc {
            display: flex;
            gap: 6px
        }

        .fsoc {
            width: 30px;
            height: 30px;
            border: 1px solid rgba(255, 255, 255, .08);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: rgba(255, 255, 255, .28);
            transition: all .18s;
            cursor: pointer;
        }

        .fsoc:hover {
            border-color: var(--red);
            color: var(--red)
        }

        .ft-col h4 {
            font-size: 7px;
            letter-spacing: .44em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .2);
            margin-bottom: 16px
        }

        .ft-col ul {
            list-style: none
        }

        .ft-col li {
            margin-bottom: 10px
        }

        .ft-col a {
            font-size: 9px;
            color: rgba(255, 255, 255, .38);
            cursor: pointer;
            transition: color .16s
        }

        .ft-col a:hover {
            color: var(--bg)
        }

        .ft-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid rgba(255, 255, 255, .06);
            padding-top: 24px;
            flex-wrap: wrap;
            gap: 12px;
        }

        .ft-copy {
            font-size: 8px;
            letter-spacing: .1em;
            color: rgba(255, 255, 255, .16)
        }

        .ft-pays {
            display: flex;
            gap: 4px
        }

        .payc {
            font-size: 6.5px;
            letter-spacing: .1em;
            text-transform: uppercase;
            border: 1px solid rgba(255, 255, 255, .08);
            padding: 3px 7px;
            color: rgba(255, 255, 255, .2)
        }

        .ft-btm-links {
            display: flex;
            gap: 20px;
            flex-wrap: wrap
        }

        .ft-btm-links a {
            font-size: 8px;
            letter-spacing: .1em;
            color: rgba(255, 255, 255, .18);
            cursor: pointer;
            transition: color .18s
        }

        .ft-btm-links a:hover {
            color: rgba(255, 255, 255, .6)
        }

        /* ══ RESPONSIVE ══ */
        @media(max-width:1280px) {
            .grid {
                grid-template-columns: repeat(4, 1fr)
            }
        }

        /* ── MOBILE: NO horizontal scrolling nav, no slider ── */
        @media(max-width:900px) {
            .nav-links {
                display: none
            }

            /* hidden on mobile — use hamburger */
            .dbody {
                grid-template-columns: 1fr;
                grid-template-rows: 80vw 1fr
            }

            .dleft {
                border-right: none;
                border-bottom: 1px solid var(--border)
            }

            .dright {
                padding: 24px 24px 32px
            }

            .ft-grid {
                grid-template-columns: 1fr 1fr;
                gap: 32px
            }

            .contact-grid {
                grid-template-columns: 1fr
            }

            .editorial {
                flex-direction: column;
                text-align: center
            }

            .ed-right {
                text-align: center
            }
        }

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

            .grid-wrap {
                padding: 0 28px 80px
            }

            .sec-head {
                padding: 36px 16px 12px
            }

            .hero-content {
                padding: 0 24px 48px
            }

            .hero-title {
                font-size: clamp(52px, 14vw, 80px)
            }

            .nav-top {
                padding: 0 14px
            }

            .ft-grid {
                grid-template-columns: 1fr
            }

            .ft-bottom {
                flex-direction: column;
                text-align: center
            }

            .wish-grid {
                grid-template-columns: 1fr 1fr
            }

            .inner {
                padding: 60px 20px 100px
            }

            .editorial {
                padding: 48px 20px
            }

            .pcard-img {
                aspect-ratio: 3/5
            }

            .pcard-name {
                font-size: 9px
            }

            .pcard-info {
                padding: 10px 6px 14px
            }

            .col-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .search-page-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

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

            .pcard-img {
                aspect-ratio: 3/5
            }

            .col-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .search-page-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        .pcard-img {
            aspect-ratio: 4/3
        }

        .col-grid {
            grid-template-columns: 1fr
        }

        /* Recently Viewed grids: always 2 columns on mobile */
        #recentGrid,
        #homeRecentGrid {
            grid-template-columns: repeat(2, 1fr)
        }

        .search-page-grid {
            grid-template-columns: 1fr
        }
        }

        /* ══════════════════════════════════════
   COLLECTION PAGE
══════════════════════════════════════ */
        .col-breadcrumb {
            max-width: 1800px;
            margin: 0 auto;
            padding: 16px 32px 0;
            font-size: 8px;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--muted);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .col-bc-sep {
            color: var(--border)
        }

        .col-header {
            max-width: 1800px;
            margin: 0 auto;
            padding: 20px 32px 24px;
            border-bottom: 1px solid var(--border);
        }

        .col-header-inner {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap
        }

        .col-title {
            font-family: 'Unbounded', sans-serif;
            font-size: clamp(22px, 3.5vw, 40px);
            font-weight: 900;
            letter-spacing: -.01em;
            text-transform: uppercase;
            color: var(--black);
        }

        .col-meta {
            font-size: 8px;
            letter-spacing: .28em;
            text-transform: uppercase;
            color: var(--muted)
        }

        /* Layout: sidebar + products */
        .col-layout {
            max-width: 1800px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 240px 1fr;
            grid-template-rows: auto 1fr;
            min-height: 60vh;
        }

        .col-mobile-bar {
            display: none;
            grid-column: 1/-1;
            padding: 12px 32px;
            border-bottom: 1px solid var(--border);
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .mob-filter-btn {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 9px 16px;
            border: 1px solid var(--border);
            font-size: 8px;
            letter-spacing: .28em;
            text-transform: uppercase;
            color: var(--black);
            transition: all .18s;
            background: var(--bg);
            cursor: pointer;
        }

        .mob-filter-btn:hover {
            border-color: var(--black)
        }

        .mob-filter-count {
            background: var(--red);
            color: #fff;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            font-size: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* Sidebar */
        .col-sidebar {
            border-right: 1px solid var(--border);
            padding: 24px 0;
            height: fit-content;
            position: sticky;
            top: 96px;
        }

        .filter-group {
            border-bottom: 1px solid var(--border)
        }

        .filter-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 24px;
            cursor: pointer;
            font-size: 8px;
            letter-spacing: .34em;
            text-transform: uppercase;
            color: var(--black);
            user-select: none;
            transition: color .14s;
        }

        .filter-head:hover {
            color: var(--red)
        }

        .filter-arr {
            font-size: 16px;
            transition: transform .22s;
            color: var(--muted)
        }

        .filter-group.closed .filter-arr {
            transform: rotate(0)
        }

        .filter-body {
            padding: 0 24px 16px;
            overflow: hidden;
            max-height: 300px;
            transition: max-height .3s ease, padding .3s ease;
        }

        .filter-group.closed .filter-body {
            max-height: 0;
            padding-bottom: 0
        }

        .filter-opt {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 0;
            font-size: 9px;
            letter-spacing: .08em;
            cursor: pointer;
            color: var(--black);
            transition: color .14s;
        }

        .filter-opt:hover {
            color: var(--red)
        }

        .filter-opt input[type=radio],
        .filter-opt input[type=checkbox] {
            accent-color: var(--red);
            width: 14px;
            height: 14px;
            cursor: pointer;
            flex-shrink: 0;
        }

        .filter-clear {
            margin: 16px 24px 0;
            display: block;
            font-size: 8px;
            letter-spacing: .26em;
            text-transform: uppercase;
            color: var(--muted);
            text-decoration: underline;
            text-underline-offset: 3px;
            cursor: pointer;
            transition: color .14s;
            background: none;
            border: none;
            padding: 0;
        }

        .filter-clear:hover {
            color: var(--black)
        }

        /* Products area */
        .col-products {
            padding: 0
        }

        .col-sort-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 28px;
            border-bottom: 1px solid var(--border);
            gap: 12px;
            flex-wrap: wrap;
        }

        .col-result-count {
            font-size: 8.5px;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--muted)
        }

        .col-sort-wrap {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .col-sort {
            font-family: 'DM Mono', monospace;
            font-size: 8px;
            letter-spacing: .2em;
            text-transform: uppercase;
            padding: 7px 10px;
            border: 1px solid var(--border);
            background: var(--bg);
            color: var(--black);
            cursor: pointer;
            outline: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
            padding-right: 24px;
            transition: border-color .16s;
        }

        .col-sort:hover,
        .col-sort:focus {
            border-color: var(--black)
        }

        .col-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2px;
            background: var(--border);
            padding: 2px;
        }

        .col-empty {
            grid-column: 1/-1;
            text-align: center;
            padding: 100px 24px;
            font-size: 8px;
            letter-spacing: .4em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* Mobile filter drawer */
        .mob-filter-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .3);
            z-index: 500;
        }

        .mob-filter-overlay.on {
            display: block
        }

        .col-sidebar.mob-open {
            display: block !important;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            width: 280px;
            background: var(--bg);
            z-index: 600;
            overflow-y: auto;
            box-shadow: 4px 0 24px rgba(0, 0, 0, .08);
            animation: slideInLeft .3s ease;
            border-right: 1px solid var(--border);
        }

        @keyframes slideInLeft {
            from {
                transform: translateX(-100%)
            }

            to {
                transform: none
            }
        }

        .col-sidebar .mob-close-btn {
            display: none;
            width: 100%;
            padding: 16px 24px;
            font-size: 8px;
            letter-spacing: .28em;
            text-transform: uppercase;
            border-bottom: 1px solid var(--border);
            text-align: left;
            cursor: pointer;
            color: var(--black);
        }

        .col-sidebar.mob-open .mob-close-btn {
            display: block
        }

        /* Active filter tags */
        .active-filters {
            padding: 10px 28px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            border-bottom: 1px solid var(--border);
            min-height: 0;
        }

        .active-filters:empty {
            display: none
        }

        .filter-tag {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background: var(--black);
            color: var(--bg);
            font-size: 7.5px;
            letter-spacing: .2em;
            text-transform: uppercase;
        }

        .filter-tag button {
            font-size: 14px;
            line-height: 1;
            color: rgba(255, 255, 255, .6);
            padding: 0 2px;
            transition: color .14s;
        }

        .filter-tag button:hover {
            color: #fff
        }

        /* ══════════════════════════════════════
   SEARCH PAGE
══════════════════════════════════════ */
        .search-page-inner {
            max-width: 1800px;
            margin: 0 auto;
            padding: 40px 32px 120px
        }

        .search-page-header {
            margin-bottom: 32px
        }

        .search-page-title {
            font-family: 'Unbounded', sans-serif;
            font-size: clamp(24px, 4vw, 48px);
            font-weight: 900;
            letter-spacing: -.01em;
            text-transform: uppercase;
            margin-bottom: 20px;
            color: var(--black);
        }

        .search-page-bar {
            position: relative;
            max-width: 640px;
            border-bottom: 2px solid var(--black);
            display: flex;
            align-items: center;
        }

        .search-page-bar input {
            flex: 1;
            padding: 14px 40px 14px 0;
            border: none;
            background: transparent;
            font-family: 'DM Mono', monospace;
            font-size: 14px;
            outline: none;
            color: var(--black);
            letter-spacing: .02em;
        }

        .search-page-bar input::placeholder {
            color: var(--border)
        }

        .search-page-icon {
            position: absolute;
            right: 40px;
            color: var(--muted);
            pointer-events: none
        }

        .search-page-clear {
            position: absolute;
            right: 0;
            font-size: 20px;
            color: var(--muted);
            transition: color .14s;
            padding: 0 4px;
        }

        .search-page-clear:hover {
            color: var(--black)
        }

        .search-page-meta {
            font-size: 8px;
            letter-spacing: .24em;
            text-transform: uppercase;
            color: var(--muted);
            margin-top: 12px;
            min-height: 16px;
        }

        /* Category filter chips */
        .search-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 28px;
        }

        .schip2 {
            padding: 8px 18px;
            border: 1px solid var(--border);
            font-family: 'DM Mono', monospace;
            font-size: 8px;
            letter-spacing: .28em;
            text-transform: uppercase;
            cursor: pointer;
            color: var(--muted);
            background: transparent;
            transition: all .18s;
        }

        .schip2:hover {
            border-color: var(--black);
            color: var(--black)
        }

        .schip2.on {
            background: var(--black);
            color: var(--bg);
            border-color: var(--black)
        }

        .search-page-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 2px;
            background: var(--border);
        }

        .search-empty {
            grid-column: 1/-1;
            text-align: center;
            padding: 80px 24px;
            font-size: 8px;
            letter-spacing: .4em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* Responsive */
        @media(max-width:1100px) {
            .col-grid {
                grid-template-columns: repeat(3, 1fr)
            }

            .search-page-grid {
                grid-template-columns: repeat(4, 1fr)
            }
        }

        @media(max-width:900px) {
            .col-layout {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto 1fr
            }

            .col-sidebar {
                display: none;
                position: static
            }

            .col-mobile-bar {
                display: flex
            }

            .col-sort-bar .col-sort-wrap {
                display: none
            }

            /* handled in mobile bar */
        }

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

            .search-page-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .search-page-inner {
                padding: 28px 16px 80px
            }

            .col-breadcrumb {
                padding: 12px 16px 0
            }

            .col-header {
                padding: 16px 16px 20px
            }

            .col-sort-bar {
                padding: 12px 16px
            }

            .active-filters {
                padding: 8px 16px
            }

            .col-mobile-bar {
                padding: 10px 16px
            }
        }


        /* ══════════════════════════════════════
   VITALS STICKY FLOATING WIDGET
══════════════════════════════════════ */
        #vitalsFloat {
            position: fixed;
            right: 0;
            bottom: 130px;
            z-index: 350;
            display: none;
            align-items: center;
            cursor: pointer;
            filter: drop-shadow(-3px 3px 10px rgba(0, 0, 0, .12));
            transition: transform .35s cubic-bezier(.25, .46, .45, .94);
        }

        #vitalsFloat:hover {
            transform: translateX(-4px)
        }

        #vitalsFloat.cart-open {
            transform: translateX(-440px)
        }

        .vitals-pill {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-right: none;
            padding: 12px 16px 12px 14px;
            border-radius: 6px 0 0 6px;
            min-width: 230px;
            max-width: 290px;
        }

        .vitals-progress-ring {
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            position: relative;
        }

        .vitals-progress-ring svg {
            width: 44px;
            height: 44px;
            transform: rotate(-90deg);
        }

        .vitals-ring-bg {
            fill: none;
            stroke: var(--border);
            stroke-width: 3.5
        }

        .vitals-ring-fg {
            fill: none;
            stroke: var(--black);
            stroke-width: 3.5;
            stroke-linecap: round;
            transition: stroke-dashoffset .7s cubic-bezier(.25, .46, .45, .94), stroke .3s;
        }

        .vitals-ring-fg.done {
            stroke: #2e7d32
        }

        .vitals-pct {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8px;
            font-weight: 600;
            letter-spacing: .04em;
            color: var(--black);
        }

        .vitals-text {
            flex: 1;
            min-width: 0
        }

        .vitals-msg {
            font-size: 8.5px;
            line-height: 1.55;
            color: var(--black);
            letter-spacing: .02em
        }

        .vitals-msg strong {
            color: var(--red);
            font-weight: 600
        }

        .vitals-msg.done strong {
            color: #2e7d32
        }

        .vitals-msg.done {
            color: #2e7d32
        }

        .vitals-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--red);
            flex-shrink: 0;
            animation: vdot 2s ease infinite;
        }

        .vitals-dot.done {
            background: #2e7d32;
            animation: none
        }

        @keyframes vdot {

            0%,
            100% {
                opacity: 1;
                transform: scale(1)
            }

            50% {
                opacity: .45;
                transform: scale(.65)
            }
        }

        /* Also style the in-cart version */
        .vitals-bar-cart {
            margin: 0 0 14px;
            padding: 11px 14px;
            background: var(--bg2);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .vitals-bar-cart .vitals-msg {
            font-size: 8px
        }

        @media(max-width:700px) {
            #vitalsFloat {
                bottom: 72px
            }

            .vitals-pill {
                min-width: 190px;
                max-width: 240px;
                padding: 10px 12px 10px 11px;
                gap: 9px
            }

            .vitals-progress-ring {
                width: 36px;
                height: 36px
            }

            .vitals-progress-ring svg {
                width: 36px;
                height: 36px
            }

            .vitals-msg {
                font-size: 8px
            }

            #vitalsFloat.cart-open {
                transform: translateX(0)
            }
        }