/* ── Variables ── */
:root {
    --accent: #e8ff00;
    --accent2: #ff3d00;
    --bg: #f4f1eb;
    --bg2: #fff;
    --surface: #fff;
    --text: #111;
    --muted: #666;
    --border: rgba(0, 0, 0, .09);
    --hbg: #fff;
    --cbg: #fff;
    --crad: 16px;
    --tagbg: #fff;
    --tagtx: #111;
    --bestbg: #ea580c;
    --besttx: #fff;
    --ctabg: #111;
    --ctatx: #fff;
    --h1: #0f0f0f;
    --h2: #1a1a1a;
    --htx: #fff;
    --hacc: #fff;
    --annbg: #0f0f0f;
    --anntx: #fff;
    --ftbg: #0f0f0f;
    --fttx: #fff;
    --chipbg: #f4f1eb;
    --chipa: #111;
    --chipatx: #fff;
    --ofbg: #fff;
    --filtbg: #f9f9f9;
    --drbg: #fff;
    --lblog: #111;
    --lbbld: #fff;
    --lbbg: #111;
    --overlay: rgba(0, 0, 0, .48);
    --hero-glow: rgba(232, 255, 0, .06);
    --hero-glow-strong: rgba(232, 255, 0, .3);
    --hero-shirt-a: #222;
    --hero-shirt-b: #111;
    --hero-shirt-border: rgba(255, 255, 255, .08);
    --hero-subtle: rgba(255, 255, 255, .65);
    --card-grad-a: #e8e4dc;
    --card-grad-b: #d4cfc4;
    --badge-bg: rgba(0, 0, 0, .6);
    --badge-tx: #fff;
    --star: #fff;
    --chip-ring: rgba(255, 255, 255, .5);
    --wish-bg: rgba(255, 255, 255, .92);
    --discount: #111;
    --foot-soft: rgba(255, 255, 255, .45);
    --foot-faint: rgba(255, 255, 255, .3);
    --foot-panel: rgba(255, 255, 255, .06);
    --foot-panel-border: rgba(255, 255, 255, .12);
    --foot-divider: rgba(255, 255, 255, .08);
    --foot-muted: rgba(255, 255, 255, .28)
}

[data-mode="luxury"] {
    --accent: #d6b56a;
    --accent2: #b78a4a;
    --bg: #090807;
    --bg2: #0f0d0b;
    --surface: #15120f;
    --text: #f4efe4;
    --muted: #a89a83;
    --border: rgba(214, 181, 106, .2);
    --hbg: rgba(9, 8, 7, .96);
    --cbg: #15120f;
    --tagbg: #fff;
    --tagtx: #111;
    --bestbg: #ea580c;
    --besttx: #fff;
    --ctabg: #d6b56a;
    --ctatx: #100c07;
    --h1: #0b0908;
    --h2: #17120e;
    --htx: #f4efe4;
    --hacc: #d6b56a;
    --annbg: #120e0a;
    --anntx: #d6b56a;
    --ftbg: #0b0908;
    --fttx: #f4efe4;
    --chipbg: #15120f;
    --chipa: #d6b56a;
    --chipatx: #100c07;
    --ofbg: #15120f;
    --filtbg: #15120f;
    --drbg: #15120f;
    --lblog: #f4efe4;
    --lbbld: #100c07;
    --lbbg: #d6b56a;
    --overlay: rgba(6, 5, 4, .6);
    --hero-glow: rgba(214, 181, 106, .12);
    --hero-glow-strong: rgba(214, 181, 106, .35);
    --hero-shirt-a: #2a1f14;
    --hero-shirt-b: #140f0a;
    --hero-shirt-border: rgba(214, 181, 106, .28);
    --hero-subtle: rgba(244, 239, 228, .68);
    --card-grad-a: #1d1712;
    --card-grad-b: #12100c;
    --badge-bg: rgba(8, 7, 6, .72);
    --badge-tx: #f4efe4;
    --chip-ring: rgba(214, 181, 106, .5);
    --wish-bg: rgba(24, 20, 16, .9);
    --discount: #dbb770;
    --foot-soft: rgba(244, 239, 228, .55);
    --foot-faint: rgba(244, 239, 228, .4);
    --foot-panel: rgba(214, 181, 106, .08);
    --foot-panel-border: rgba(214, 181, 106, .26);
    --foot-divider: rgba(214, 181, 106, .22);
    --foot-muted: rgba(244, 239, 228, .34)
}

[data-mode="affordable"] .pcard:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .1)
}

[data-mode="affordable"] .nl.hot,
[data-mode="affordable"] .dl.dh2,
[data-mode="affordable"] .cbsp,
[data-mode="affordable"] .coff,
[data-mode="affordable"] .cirm:hover {
    color: #111
}

[data-mode="affordable"] .ftnl h3 span,
[data-mode="affordable"] .ftcol h5 {
    color: #fff
}

[data-mode="affordable"] .nlf button,
[data-mode="affordable"] .sbt:hover {
    background: var(--accent);
    color: #111;
    border-color: var(--accent)
}

[data-mode="affordable"] .ctg.best {
    background: var(--bestbg);
    color: var(--besttx);
    border: 1px solid rgba(0, 0, 0, .14)
}

[data-mode="affordable"] .crat,
[data-mode="affordable"] .cwish {
    border: 1px solid rgba(0, 0, 0, .14)
}

/* ── Reset ── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    transition: background .4s, color .4s
}

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

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

/* ── Announce Bar ── */
.ann {
    background: var(--annbg);
    color: var(--anntx);
    font-family: 'Rajdhani', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .05em;
    height: 34px;
    overflow: hidden;
    display: flex;
    align-items: center
}

.ann-track {
    display: inline-flex;
    gap: 60px;
    padding-left: 100%;
    animation: tick 30s linear infinite;
    white-space: nowrap
}

@keyframes tick {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

/* ── Header ── */
.hdr {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--hbg);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .08);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
    transition: background .4s
}

.hdr-in {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 16px
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0
}

.logo-b {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-size: clamp(1.7rem, 2.3vw, 2.15rem);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lblog);
    text-rendering: optimizeLegibility;
    -webkit-text-stroke: .2px currentColor;
    line-height: 1;
    transition: color .4s
}

.logo-u {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    letter-spacing: .06em;
    background: var(--lbbg);
    color: var(--lbbld);
    padding: 2px 8px 1px;
    border-radius: 4px;
    line-height: 1;
    transition: background .4s, color .4s
}

/* Desktop Nav */
.dnav {
    display: flex;
    gap: 4px;
    margin-left: auto
}

.nl {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: .87rem;
    letter-spacing: .07em;
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--text);
    text-transform: uppercase;
    transition: background .2s
}

.nl:hover {
    background: var(--border)
}

.nl.hot {
    color: var(--accent2)
}

/* Header Actions */
.hact {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto
}

.dnav~.hact {
    margin-left: 16px
}

.ibtn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    transition: background .2s;
    position: relative
}

.ibtn:hover {
    background: var(--border)
}

.ccnt {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--accent2);
    color: var(--ctatx);
    font-size: .6rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

/* Hamburger */
.ham {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 5px;
    justify-content: center
}

.ham span {
    display: block;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all .3s
}

.ham.on span:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
}

.ham.on span:nth-child(2) {
    opacity: 0
}

.ham.on span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
}

/* Search */
.srch {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 12px 20px;
    display: none;
    align-items: center;
    gap: 10px
}

.srch.on {
    display: flex
}

.srch input {
    flex: 1;
    background: var(--filtbg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: .95rem;
    color: var(--text);
    outline: none;
    transition: border-color .2s
}

.srch input:focus {
    border-color: var(--accent)
}

.srch-x {
    color: var(--muted);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 1rem
}

.srch-x:hover {
    background: var(--border)
}

/* ── Nav Drawer ── */
.nover {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    backdrop-filter: blur(4px);
    z-index: 1998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s
}

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

.ndraw {
    position: fixed;
    top: 0;
    left: -310px;
    width: 290px;
    height: 100vh;
    background: var(--drbg);
    z-index: 1999;
    transition: left .35s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto
}

.ndraw.on {
    left: 0
}

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

.dx {
    color: var(--muted);
    font-size: 1.2rem;
    padding: 4px 8px
}

.dnav2 {
    padding: 10px 0;
    flex: 1
}

.dl {
    display: block;
    padding: 14px 24px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
    border-left: 3px solid transparent;
    transition: all .2s
}

.dl:hover {
    background: var(--filtbg);
    border-left-color: var(--accent)
}

.dl.dh2 {
    color: var(--accent2)
}

.dft {
    padding: 20px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px
}

.dft a {
    font-family: 'Rajdhani', sans-serif;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--muted);
    text-transform: uppercase;
    padding: 7px 0
}

.dft a:hover {
    color: var(--text)
}

/* ── Hero ── */
.hero {
    background: linear-gradient(135deg, var(--h1) 0%, var(--h2) 100%);
    color: var(--htx);
    min-height: 520px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    padding: 60px 80px;
    gap: 40px;
    position: relative;
    overflow: hidden
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 70% 50%, var(--hero-glow), transparent);
    pointer-events: none
}

.h-sub {
    font-family: 'Rajdhani', sans-serif;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--hacc);
    margin-bottom: 12px
}

.h-ttl {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 1;
    letter-spacing: .04em;
    margin-bottom: 12px
}

.h-ttl em {
    font-style: normal;
    color: var(--hacc);
    font-size: 1.25em
}

.h-pw {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 32px
}

.h-at {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    opacity: .7;
    letter-spacing: .1em
}

.h-pr {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--hacc);
    letter-spacing: .04em;
    text-shadow: 0 0 30px var(--hero-glow-strong)
}

.h-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--hacc);
    color: var(--h1);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: .12em;
    padding: 14px 32px;
    border-radius: 4px;
    transition: transform .2s, box-shadow .2s
}

.h-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .3)
}

.h-vis {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 380px
}

.h-ring {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 2px solid var(--hacc);
    opacity: .15;
    animation: spin 20s linear infinite
}

.h-ring::after {
    content: '';
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    border: 1px dashed var(--hacc);
    opacity: .4
}

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

.h-shirt {
    width: 180px;
    height: 200px;
    background: linear-gradient(145deg, var(--hero-shirt-a), var(--hero-shirt-b));
    border-radius: 16px 16px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px solid var(--hero-shirt-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    position: relative;
    z-index: 2;
    animation: flt 3s ease-in-out infinite
}

@keyframes flt {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

.h-st {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.5rem;
    color: var(--hacc);
    letter-spacing: .1em;
    line-height: 1
}

.h-ss {
    font-family: 'Rajdhani', sans-serif;
    font-size: .7rem;
    letter-spacing: .35em;
    color: var(--hero-subtle);
    text-transform: uppercase
}

.h-badge {
    position: absolute;
    bottom: 20px;
    right: 0;
    background: var(--hacc);
    color: var(--h1);
    padding: 12px 16px;
    border-radius: 12px;
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    z-index: 3;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3)
}

.bst {
    font-size: .65rem;
    letter-spacing: 2px
}

.bnum {
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: .05em
}

.blbl {
    font-size: .6rem;
    letter-spacing: .06em;
    opacity: .7
}

/* ── Categories ── */
.cats {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
    transition: background .4s
}

.cscr {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 20px;
    scrollbar-width: none;
    max-width: 1400px;
    margin: 0 auto
}

.cscr::-webkit-scrollbar {
    display: none
}

.cc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 88px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--chipbg);
    border: 1.5px solid var(--border);
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap
}

.cc:hover,
.cc.on {
    background: var(--chipa);
    border-color: var(--chipa)
}

.cc.on .cem,
.cc.on span,
.cc:hover .cem,
.cc:hover span {
    color: var(--chipatx)
}

.cem {
    font-size: 1.5rem
}

.cc span {
    font-family: 'Rajdhani', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
    text-align: center
}

/* ── Products Section ── */
.prod {
    max-width: 1400px;
    margin: 0 auto;
    padding: 36px 20px 60px
}

.ph {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px
}

.ptw {
    display: flex;
    align-items: baseline;
    gap: 12px
}

.ptl {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: .06em;
    color: var(--text)
}

.pitm {
    font-size: .85rem;
    color: var(--muted)
}

.pc {
    display: flex;
    gap: 10px;
    align-items: center
}

.fbtn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 9px 16px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
    transition: all .2s
}

.fbtn:hover,
.fbtn.on {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text)
}

.sw {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 9px 14px;
    color: var(--muted)
}

.sw select {
    background: none;
    border: none;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
    outline: none;
    cursor: pointer
}

/* Filter Panel */
.fpnl {
    background: var(--filtbg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px
}

.fpnl.on {
    display: grid
}

.fg h4 {
    font-family: 'Rajdhani', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px
}

.fcs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.fc {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 5px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: all .2s
}

.fc.on,
.fc:hover {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text)
}

.csws {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.csw {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: transform .2s, border-color .2s
}

.csw:hover {
    transform: scale(1.15)
}

.csw.on {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--text)
}

/* Product Grid */
.pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px
}

/* Product Card */
.pcard {
    background: var(--cbg);
    border-radius: var(--crad);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform .25s, box-shadow .25s;
    animation: fiu .4s ease both
}

.pcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .12)
}

[data-mode="luxury"] .pcard:hover {
    box-shadow: 0 12px 40px rgba(214, 181, 106, .2)
}

@keyframes fiu {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.cimg {
    position: relative;
    aspect-ratio: 3/4;
    background: linear-gradient(135deg, var(--card-grad-a), var(--card-grad-b));
    overflow: hidden;
    cursor: pointer
}

.ciph {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.cico {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    color: var(--text);
    opacity: .13
}

.cinm {
    font-family: 'Rajdhani', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
    opacity: .28;
    text-align: center;
    padding: 0 12px
}

.ctg {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--tagbg);
    color: var(--tagtx);
    font-family: 'Rajdhani', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px
}

.ctg.best {
    background: var(--bestbg);
    color: var(--besttx);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    animation: bestGlow 2.2s ease-in-out infinite
}

.ctg.deal {
    background: #000;
    color: #fff !important;
    border: 1px solid #000;
    text-shadow: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2), 0 0 10px rgba(0, 0, 0, .35);
    transition: background-color .2s, border-color .2s;
    animation: dealGlow 1.9s ease-in-out infinite alternate
}

.ctg.deal:hover {
    background: #111111;
    border-color: #111111
}

@keyframes bestGlow {
    0%,
    100% {
        box-shadow: 0 1px 3px rgba(0, 0, 0, .2), 0 0 0 rgba(234, 88, 12, 0)
    }

    50% {
        box-shadow: 0 1px 3px rgba(0, 0, 0, .2), 0 0 8px rgba(234, 88, 12, .32)
    }
}

@keyframes dealGlow {
    from {
        box-shadow: 0 1px 3px rgba(0, 0, 0, .2), 0 0 8px rgba(0, 0, 0, .28)
    }

    to {
        box-shadow: 0 1px 3px rgba(0, 0, 0, .2), 0 0 14px rgba(0, 0, 0, .5)
    }
}

@media (prefers-reduced-motion: reduce) {
    .ctg.best,
    .ctg.deal {
        animation: none
    }
}

.crat {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--badge-bg);
    backdrop-filter: blur(6px);
    color: var(--badge-tx);
    font-family: 'Rajdhani', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px
}

.si {
    color: var(--star)
}

.cclrs {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 4px
}

.ccd {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--chip-ring)
}

.cwish {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: var(--wish-bg);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
    font-size: .9rem
}

.pcard:hover .cwish {
    opacity: 1
}

.cbdy {
    padding: 14px 16px 16px
}

.cnm {
    font-family: 'DM Sans', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.cprw {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px
}

.cpr {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text)
}

.cmrp {
    font-size: .8rem;
    color: var(--muted);
    text-decoration: line-through
}

.coff {
    font-family: 'Rajdhani', sans-serif;
    font-size: .78rem;
    font-weight: 700;
    color: var(--discount);
    letter-spacing: .03em
}

.cbsp {
    font-size: .75rem;
    color: var(--accent2);
    font-weight: 500;
    margin-bottom: 10px
}

.cta-row {
    display: flex;
    min-width: 0;
    gap: 8px
}

.atc {
    flex: 1.8;
    width: auto;
    min-width: 0;
    white-space: nowrap;
    text-align: center;
    background: var(--ctabg);
    color: var(--ctatx);
    font-family: 'Bebas Neue', sans-serif;
    font-size: .95rem;
    letter-spacing: .1em;
    padding: 11px;
    border-radius: 8px;
    transition: opacity .2s, transform .1s
}

.atc:hover {
    opacity: .88
}

.atc:active {
    transform: scale(.98)
}

.buy {
    flex: 1;
    width: auto;
    min-width: 0;
    white-space: nowrap;
    text-align: center;
    background: #FFD700;
    color: #000;
    border: 1px solid #FFD700;
    font-family: 'Bebas Neue', sans-serif;
    font-size: .88rem;
    letter-spacing: .08em;
    padding: 11px 8px;
    border-radius: 8px;
    transition: background-color .2s, border-color .2s, transform .1s
}

.buy:hover {
    background: #E6C200;
    border-color: #E6C200
}

.buy:active {
    transform: scale(.98)
}

/* Load More */
.lmw {
    text-align: center;
    margin-top: 36px
}

.lmb {
    background: transparent;
    border: 2px solid var(--text);
    color: var(--text);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: .12em;
    padding: 14px 48px;
    border-radius: 4px;
    transition: all .2s
}

.lmb:hover {
    background: var(--text);
    color: var(--bg)
}

/* ── Offer Strip ── */
.ofs {
    background: var(--ofbg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    transition: background .4s
}

.ofi {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px;
    gap: 6px;
    border-right: 1px solid var(--border)
}

.ofi:last-child {
    border-right: none
}

.ofic {
    font-size: 1.8rem;
    margin-bottom: 4px
}

.ofi strong {
    font-family: 'Rajdhani', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text)
}

.ofi p {
    font-size: .78rem;
    color: var(--muted)
}

/* ── Footer ── */
.ft {
    background: var(--ftbg);
    color: var(--fttx);
    padding: 60px 20px 20px
}

.ftnl {
    max-width: 500px;
    margin: 0 auto 50px;
    text-align: center
}

.ftnl h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: .06em;
    line-height: 1.1;
    margin-bottom: 10px
}

.ftnl h3 span {
    color: var(--accent)
}

.ftnl p {
    font-size: .88rem;
    color: var(--foot-soft);
    margin-bottom: 24px
}

.nlf {
    display: flex;
    background: var(--foot-panel);
    border: 1px solid var(--foot-panel-border);
    border-radius: 8px;
    overflow: hidden
}

.nlf input {
    flex: 1;
    background: none;
    border: none;
    padding: 14px 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: .9rem;
    color: var(--fttx);
    outline: none
}

.nlf input::placeholder {
    color: var(--foot-faint)
}

.nlf button {
    background: var(--accent);
    color: var(--ctatx);
    font-family: 'Bebas Neue', sans-serif;
    font-size: .9rem;
    letter-spacing: .1em;
    padding: 14px 24px;
    transition: opacity .2s
}

.nlf button:hover {
    opacity: .85
}

.ftsoc {
    text-align: center;
    margin-bottom: 50px
}

.ftsoc>p {
    font-family: 'Rajdhani', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--foot-faint);
    margin-bottom: 14px
}

.sgrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px
}

.sbt {
    background: var(--foot-panel);
    border: 1px solid var(--foot-panel-border);
    border-radius: 8px;
    padding: 10px 22px;
    font-family: 'Rajdhani', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fttx);
    transition: all .2s
}

.sbt:hover {
    background: var(--accent);
    color: var(--ctatx);
    border-color: var(--accent)
}

.ftlnks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto 50px
}

.ftcol h5 {
    font-family: 'Rajdhani', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px
}

.ftcol a {
    display: block;
    padding: 5px 0;
    font-size: .85rem;
    color: var(--foot-soft);
    transition: color .2s
}

.ftcol a:hover {
    color: var(--fttx)
}

.ftbot {
    border-top: 1px solid var(--foot-divider);
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .78rem;
    color: var(--foot-muted)
}

.pmt {
    display: flex;
    gap: 8px
}

.pmt span {
    background: var(--foot-panel);
    border-radius: 4px;
    padding: 4px 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em
}

/* ── Cart Sidebar ── */
.cover {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    backdrop-filter: blur(4px);
    z-index: 1998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s
}

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

.csid {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100vh;
    background: var(--surface);
    z-index: 1999;
    transition: right .35s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border)
}

.csid.on {
    right: 0
}

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

.chdr h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    letter-spacing: .1em;
    color: var(--text)
}

.chdr button {
    color: var(--muted);
    font-size: 1.1rem;
    padding: 4px 8px
}

.chdr button:hover {
    color: var(--text)
}

.citms {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px
}

.cemp {
    text-align: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--muted)
}

.cemp p {
    font-size: .9rem
}

.sshop {
    background: var(--ctabg);
    color: var(--ctatx);
    font-family: 'Bebas Neue', sans-serif;
    font-size: .85rem;
    letter-spacing: .1em;
    padding: 10px 24px;
    border-radius: 6px;
    margin-top: 8px;
    display: inline-block
}

.citem {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border)
}

.cii {
    width: 72px;
    height: 90px;
    background: var(--filtbg);
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem
}

.cinfo {
    flex: 1
}

.cinf {
    font-size: .85rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 4px;
    line-height: 1.3
}

.cipr {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text)
}

.cirm {
    font-size: .7rem;
    color: var(--muted);
    margin-top: 6px;
    display: block
}

.cirm:hover {
    color: var(--accent2)
}

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

.qb {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--filtbg);
    border: 1px solid var(--border);
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text)
}

.qv {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: .9rem
}

.cft {
    padding: 20px 24px;
    border-top: 1px solid var(--border)
}

.ctr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 14px;
    color: var(--text)
}

.ckbt {
    width: 100%;
    background: var(--ctabg);
    color: var(--ctatx);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: .12em;
    padding: 15px;
    border-radius: 8px;
    transition: opacity .2s
}

.ckbt:hover {
    opacity: .88
}

/* ── Toast ── */
.tst {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--text);
    color: var(--bg);
    font-family: 'Rajdhani', sans-serif;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .06em;
    padding: 12px 28px;
    border-radius: 30px;
    opacity: 0;
    transition: all .3s;
    pointer-events: none;
    white-space: nowrap;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2)
}

.tst.on {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
}

/* ── Responsive ── */
@media(max-width:900px) {
    .dnav {
        display: none
    }

    .ham {
        display: flex
    }

    .hero {
        grid-template-columns: 1fr;
        padding: 50px 24px;
        min-height: auto
    }

    .h-vis {
        height: 280px
    }

    .h-ring {
        width: 220px;
        height: 220px
    }

    .h-shirt {
        width: 130px;
        height: 150px
    }

    .h-st {
        font-size: 2.5rem
    }

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

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

    .ofi:nth-child(odd) {
        border-right: 1px solid var(--border)
    }

    .ofi:last-child {
        border-bottom: none
    }

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

}

@media(max-width:600px) {
    .ann {
        font-size: .72rem;
        height: 30px
    }

    .hdr-in {
        height: 58px;
        padding: 0 14px;
        gap: 10px
    }

    .logo-b {
        font-size: clamp(1.25rem, 7vw, 1.65rem);
        letter-spacing: .07em
    }

    .hact {
        gap: 6px
    }

    .ibtn {
        width: 34px;
        height: 34px
    }

    .cscr {
        gap: 8px;
        padding: 4px 12px
    }

    .cc {
        min-width: 76px;
        padding: 10px 8px
    }

    .cem {
        font-size: 1.2rem
    }

    .cc span {
        font-size: .62rem
    }

    .prod {
        padding: 28px 14px 44px
    }

    .pgrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }

    .cta-row {
        gap: 6px
    }

    .atc {
        font-size: .78rem;
        letter-spacing: .05em;
        padding: 10px 6px
    }

    .buy {
        font-size: .78rem;
        letter-spacing: .05em;
        padding: 10px 6px
    }

    .csid {
        width: 100%
    }

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

    .ph {
        flex-direction: column;
        align-items: flex-start
    }

    .hero {
        padding: 40px 18px
    }

    .ft {
        padding: 48px 14px 18px
    }
}

@media(max-width:480px) {
    .hdr-in {
        height: 54px;
        padding: 0 10px
    }

    .logo-b {
        font-size: clamp(1.05rem, 6.8vw, 1.35rem);
        letter-spacing: .05em
    }

    .hact {
        gap: 4px
    }

    .ibtn {
        width: 32px;
        height: 32px
    }

    .ccnt {
        top: 1px;
        right: 1px
    }

    .srch {
        padding: 10px
    }

    .srch input {
        padding: 9px 12px;
        font-size: .85rem
    }

    .hero {
        padding: 28px 12px;
        gap: 20px
    }

    .h-sub {
        font-size: .68rem;
        letter-spacing: .14em;
        margin-bottom: 8px
    }

    .h-ttl {
        font-size: clamp(2rem, 11vw, 2.5rem);
        margin-bottom: 6px
    }

    .h-pw {
        gap: 8px;
        margin-bottom: 20px
    }

    .h-at {
        font-size: 1.25rem
    }

    .h-pr {
        font-size: clamp(1.8rem, 10vw, 2.25rem)
    }

    .h-cta {
        font-size: .88rem;
        letter-spacing: .08em;
        padding: 10px 16px
    }

    .cscr {
        padding: 4px 10px
    }

    .cc {
        min-width: 68px;
        padding: 8px 6px;
        border-radius: 10px
    }

    .cc span {
        font-size: .56rem
    }

    .ph {
        gap: 8px
    }

    .ptw {
        gap: 8px
    }

    .pitm {
        font-size: .76rem
    }

    .fbtn,
    .sw {
        padding: 7px 9px
    }

    .fbtn,
    .sw select {
        font-size: .72rem
    }

    .fpnl {
        padding: 14px;
        gap: 14px
    }

    .pgrid {
        gap: 10px
    }

    .cnm {
        font-size: .8rem
    }

    .cpr {
        font-size: .98rem
    }

    .cbsp {
        font-size: .66rem;
        margin-bottom: 8px
    }

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

    .ofi,
    .ofi:nth-child(odd) {
        border-right: none
    }

    .ofi {
        border-bottom: 1px solid var(--border);
        padding: 18px 12px
    }

    .ofi:last-child {
        border-bottom: none
    }

    .nlf {
        flex-direction: column
    }

    .nlf input {
        padding: 12px 14px
    }

    .nlf button {
        width: 100%;
        padding: 12px
    }

    .sgrid {
        gap: 8px
    }

    .sbt {
        padding: 8px 14px;
        font-size: .74rem
    }

    .ftnl,
    .ftsoc,
    .ftlnks {
        margin-bottom: 34px
    }

    .ftbot {
        gap: 8px;
        font-size: .72rem
    }

    .pmt span {
        padding: 4px 8px;
        font-size: .64rem
    }

    .ndraw {
        width: 84vw;
        left: -86vw
    }

    .dl {
        padding: 12px 18px;
        font-size: .86rem
    }

    .chdr {
        padding: 16px 14px
    }

    .citms {
        padding: 12px 14px
    }

    .cft {
        padding: 16px 14px
    }

    .tst {
        max-width: calc(100vw - 20px);
        padding: 10px 14px;
        font-size: .78rem
    }
}

@media(max-width:420px) {
    .cbdy {
        padding: 12px 12px 14px
    }

    .cta-row {
        gap: 5px
    }

    .atc {
        flex: 1.6;
        font-size: .74rem;
        letter-spacing: .03em;
        padding: 10px 5px
    }

    .buy {
        flex: 1.2;
        font-size: .74rem;
        letter-spacing: .03em;
        padding: 10px 5px
    }
}

@media(max-width:360px) {
    .pgrid {
        grid-template-columns: 1fr
    }
}