:root {
    --ink: #17231F;
    --ink2: #22332C;
    --ink3: #2D453A;
    --ink4: #3B594A;
    --dust: #F2F5ED;
    --dust2: #E5EBDD;
    --dust3: #D5E0D0;
    --blush: #B6C99A;
    --blush2: #8FAE78;
    --blush3: #D0DDBB;
    --blush4: #E7EEDB;
    --sage: #75977D;
    --gold: #D0A653;
    --gold2: #E8C77D;
    --white: #FFFFFF;
    --bdr: rgba(117, 151, 125, .2);
    --bdr2: rgba(117, 151, 125, .35);
    --bdrw: rgba(255, 255, 255, .1);
    --FD: 'Playfair Display', serif;
    --FB: 'DM Sans', sans-serif;
    --FM: 'Space Mono', monospace;
    --ease: .4s cubic-bezier(.4, 0, .2, 1);
    --spring: .5s cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth }
body {
    font-family: var(--FB);
    background: var(--ink);
    color: var(--dust);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}
::-webkit-scrollbar { width: 4px }
::-webkit-scrollbar-track { background: var(--ink2) }
::-webkit-scrollbar-thumb { background: var(--blush); border-radius: 2px }

/* ── NAV ── */
#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; transition: var(--ease) }
.nb {
    height: 68px; display: flex; align-items: center; padding: 0 2.5rem; gap: 1.5rem;
    background: rgba(13, 13, 13, .95); backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--bdrw); transition: var(--ease)
}
#nav.sc .nb { box-shadow: 0 4px 32px rgba(0, 0, 0, .6) }
.logo {
    font-family: var(--FD); font-size: 1.5rem; font-weight: 700; color: var(--dust);
    text-decoration: none; display: flex; align-items: center; gap: 10px;
    flex-shrink: 0; letter-spacing: -.01em
}
.logo-mark {
    width: 36px; height: 36px; background: linear-gradient(135deg, var(--blush), var(--blush2));
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0; transition: var(--spring)
}
.logo:hover .logo-mark { transform: rotate(10deg) scale(1.1) }
.nlinks { flex: 1; display: flex; align-items: center; gap: .1rem; margin-left: 40px }
.na {
    font-family: var(--FM); font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: rgba(245, 240, 235, .4); text-decoration: none;
    padding: .38rem .7rem; border-radius: 4px; transition: var(--ease)
}
.na:hover { color: var(--blush3); background: rgba(212, 145, 122, .08) }
.nright { display: flex; align-items: center; gap: .45rem; flex-shrink: 0 }
.csell {
    font-family: var(--FM); font-size: .68rem; background: var(--ink3);
    border: 1px solid var(--bdrw); border-radius: 6px; padding: .28rem .7rem;
    color: rgba(245, 240, 235, .6); cursor: pointer; outline: none; transition: var(--ease)
}
.csell:hover { border-color: var(--bdr); color: var(--blush3) }
.ib {
    width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--bdrw);
    background: transparent; color: rgba(245, 240, 235, .4); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: .9rem;
    transition: var(--ease); position: relative
}
.ib:hover { border-color: var(--bdr); color: var(--blush3); background: rgba(212, 145, 122, .08) }
.ibadge {
    position: absolute; top: -5px; right: -5px; width: 17px; height: 17px;
    border-radius: 50%; background: var(--blush); color: var(--ink);
    font-size: .48rem; font-weight: 800; display: flex; align-items: center;
    justify-content: center; border: 2px solid var(--ink)
}

/* ── HERO ── */
#hero {
    height: 650px; padding-top: 68px; display: grid;
    grid-template-columns: 1fr 1fr; position: relative;
    overflow: hidden; background: var(--ink)
}
.hero-l {
    display: flex; flex-direction: column; justify-content: center;
    padding: 5rem 4rem 5rem 5rem; position: relative; z-index: 1
}
.hero-r { position: relative; overflow: hidden; background: var(--ink2) }
.hero-r-img { width: 100%; height: 90%; object-fit: cover; opacity: .7; display: block }
.hero-r-ov {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13, 13, 13, .6) 0%, rgba(212, 145, 122, .15) 100%)
}
.hero-label {
    font-family: var(--FM); font-size: .65rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--blush); margin-bottom: 2rem;
    display: flex; align-items: center; gap: 10px
}
.hero-label::before { content: ''; width: 20px; height: 1px; background: var(--blush) }
.hero-h {
    font-family: var(--FD); font-size: clamp(2.5rem, 5.5vw, 6rem); font-weight: 900;
    color: var(--dust); line-height: .88; letter-spacing: -.03em; margin-bottom: 1.8rem
}
.hero-h em { font-style: italic; color: var(--blush3) }
.hero-p {
    font-family: var(--FB); font-size: 1.1rem; color: rgba(245, 240, 235, .45);
    line-height: 1.8; max-width: 420px; margin-bottom: 3rem; font-weight: 300
}
.hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 4rem }
.btn-primary {
    background: var(--blush); color: var(--ink); border: none; padding: 15px 32px;
    font-family: var(--FM); font-weight: 700; font-size: .72rem; letter-spacing: .1em;
    text-transform: uppercase; border-radius: 4px; cursor: pointer;
    transition: var(--ease); display: inline-flex; align-items: center; gap: 8px
}
.btn-primary:hover {
    background: var(--blush3); transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(212, 145, 122, .3)
}
.btn-line {
    background: transparent; border: 1px solid rgba(245, 240, 235, .2);
    color: rgba(245, 240, 235, .6); padding: 14px 28px; font-family: var(--FM);
    font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    border-radius: 4px; cursor: pointer; transition: var(--ease)
}
.btn-line:hover { border-color: var(--bdr2); color: var(--blush3) }
.hero-strip { display: flex; gap: 0; border-top: 1px solid var(--bdrw) }
.hstat { flex: 1; padding: 1.2rem 0; border-right: 1px solid var(--bdrw) }
.hstat:last-child { border-right: none }
.hstat-n {
    font-family: var(--FD); font-size: 1.8rem; font-weight: 700;
    color: var(--blush3); display: block; line-height: 1
}
.hstat-l {
    font-family: var(--FM); font-size: .6rem; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(245, 240, 235, .3); margin-top: .3rem; display: block
}
.hero-r-float {
    position: absolute; bottom: 2.5rem; left: 2rem; right: 2rem;
    display: flex; gap: .8rem; margin-top: 100px
}
.hero-r-tag {
    background: rgba(13, 13, 13, .8); backdrop-filter: blur(12px);
    border: 1px solid var(--bdrw); border-radius: 8px; padding: .9rem 1.1rem;
    flex: 1; cursor: pointer; transition: var(--ease)
}
.hero-r-tag:hover { border-color: var(--bdr); background: rgba(13, 13, 13, .92) }
.hrt-cat {
    font-family: var(--FM); font-size: .55rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--blush); margin-bottom: .35rem
}
.hrt-name {
    font-family: var(--FD); font-size: .92rem; font-weight: 700;
    color: var(--dust); line-height: 1.25; margin-bottom: .3rem
}
.hrt-price { font-family: var(--FM); font-size: .78rem; color: var(--blush3) }

/* ── TICKER ── */
.ticker { overflow: hidden; padding: .55rem 0; background: var(--blush); position: relative }
.ticker-t { display: flex; animation: tk 30s linear infinite; width: max-content }
.ticker-t:hover { animation-play-state: paused }
.ti {
    white-space: nowrap; font-family: var(--FM); font-size: .62rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: rgba(13, 13, 13, .7);
    display: flex; align-items: center; padding: 0 2rem; gap: 2rem
}
.ti::after { content: '◆'; font-size: .35rem; opacity: .5 }
@keyframes tk { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ── CAT NAV ── */
.cat-nav {
    background: var(--ink2); border-bottom: 1px solid var(--bdrw);
    padding: .9rem 0; overflow-x: auto; scrollbar-width: none;
    position: sticky; top: 68px; z-index: 800
}
.cat-nav::-webkit-scrollbar { display: none }
.cat-nav-inner { display: flex; gap: .5rem; padding: 0 2.5rem; width: max-content }
.cnpill {
    font-family: var(--FM); font-size: .6rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; padding: .4rem 1rem; border-radius: 20px;
    border: 1px solid var(--bdrw); color: rgba(245, 240, 235, .4);
    cursor: pointer; transition: var(--ease); background: transparent;
    display: flex; align-items: center; gap: .5rem; white-space: nowrap
}
.cnpill:hover, .cnpill.active {
    background: var(--blush); color: var(--ink); border-color: var(--blush)
}

/* ── SECTIONS ── */
.sec-magazine { padding: 7rem 0; background: var(--ink) }
.sec-mg-hd {
    padding: 0 2.5rem 3rem; display: flex; align-items: flex-end; justify-content: space-between
}
.sec-label {
    font-family: var(--FM); font-size: .65rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--blush); margin-bottom: .6rem; display: block
}
.sec-title {
    font-family: var(--FD); font-size: clamp(2.5rem, 4vw, 5rem); font-weight: 900;
    color: var(--dust); line-height: .9; letter-spacing: -.025em
}
.sec-title em { font-style: italic; color: var(--blush3) }
.sec-sub {
    font-family: var(--FB); font-size: .95rem; color: rgba(245, 240, 235, .35);
    margin-top: .5rem; font-weight: 300
}
.mg-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--ink3) }
.mg-card {
    background: var(--ink2); overflow: hidden; cursor: pointer;
    position: relative; transition: var(--ease)
}
.mg-card:hover { background: var(--ink3); z-index: 2 }
.mg-img-wrap {
    aspect-ratio: 3/4; overflow: hidden; background: var(--ink3); position: relative
}
.mg-img-wrap img {
    width: 100%; height: 100%; object-fit: contain; padding: 1.5rem;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1)
}
.mg-card:hover .mg-img-wrap img { transform: scale(1.05) }
.mg-badge {
    position: absolute; top: 10px; left: 10px; font-family: var(--FM);
    font-size: .5rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; padding: .18rem .55rem; border-radius: 2px;
    background: var(--blush); color: var(--ink)
}
.mg-wish {
    position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
    background: rgba(13, 13, 13, .7); border: 1px solid var(--bdrw);
    border-radius: 6px; color: rgba(245, 240, 235, .35); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; transition: var(--ease); backdrop-filter: blur(8px)
}
.mg-wish:hover, .mg-wish.on {
    background: rgba(212, 145, 122, .2); color: var(--blush3); border-color: var(--bdr)
}
.mg-body { padding: .85rem 1rem 1rem }
.mg-cat {
    font-family: var(--FM); font-size: .52rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--blush); margin-bottom: .35rem; opacity: .8
}
.mg-name {
    font-family: var(--FD); font-size: .95rem; font-weight: 700; color: var(--dust);
    line-height: 1.25; margin-bottom: .6rem; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden
}
.mg-foot { display: flex; align-items: center; justify-content: space-between }
.mg-price { font-family: var(--FM); font-size: .85rem; font-weight: 700; color: var(--blush3) }
.mg-add {
    width: 30px; height: 30px; border-radius: 6px; background: var(--ink4);
    border: 1px solid var(--bdrw); color: rgba(245, 240, 235, .4);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: .75rem; transition: var(--ease)
}
.mg-add:hover { background: var(--blush); color: var(--ink); border-color: var(--blush) }
.mg-detail-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(0deg, rgba(13, 13, 13, .95), transparent);
    padding: 1.5rem .9rem .85rem; transform: translateY(100%);
    transition: .4s cubic-bezier(.16, 1, .3, 1); pointer-events: none
}
.mg-card:hover .mg-detail-bar { transform: translateY(0); pointer-events: all }
.mg-detail-btn {
    width: 100%; background: var(--blush); color: var(--ink); border: none;
    padding: 9px; border-radius: 4px; font-family: var(--FM); font-weight: 700;
    font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer; transition: var(--ease); display: flex;
    align-items: center; justify-content: center; gap: 7px
}
.mg-detail-btn:hover { background: var(--blush3) }

/* LAYOUT B: Belt */
.sec-belt { padding: 7rem 0; background: var(--ink2) }
.belt-overflow { overflow: hidden; position: relative }
.belt-overflow::before, .belt-overflow::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 60px;
    z-index: 10; pointer-events: none
}
.belt-overflow::before { left: 0; background: linear-gradient(90deg, var(--ink2), transparent) }
.belt-overflow::after { right: 0; background: linear-gradient(270deg, var(--ink2), transparent) }
.belt-track {
    display: flex; gap: 1.2rem; padding: .5rem 2.5rem 1.5rem;
    width: max-content; animation: hscroll var(--dur, 50s) linear infinite
}
.belt-track:hover { animation-play-state: paused }
@keyframes hscroll { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
.bc {
    flex: 0 0 240px; background: var(--ink); border: 1px solid var(--bdrw);
    border-radius: 12px; overflow: hidden; cursor: pointer;
    transition: var(--ease); position: relative
}
.bc:hover { border-color: var(--bdr2); transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0, 0, 0, .4) }
.bc-img {
    height: 180px; background: var(--ink3); display: flex; align-items: center;
    justify-content: center; padding: 1.2rem; overflow: hidden; position: relative
}
.bc-img img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    transition: transform .45s; display: block
}
.bc:hover .bc-img img { transform: scale(1.08) }
.bc-wish {
    position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
    background: rgba(13, 13, 13, .7); border: 1px solid var(--bdrw);
    border-radius: 5px; color: rgba(245, 240, 235, .35); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; transition: var(--ease)
}
.bc-wish:hover, .bc-wish.on {
    background: rgba(212, 145, 122, .2); color: var(--blush3); border-color: var(--bdr)
}
.bc-body { padding: .8rem }
.bc-cat {
    font-family: var(--FM); font-size: .5rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--blush); margin-bottom: .3rem; opacity: .8
}
.bc-name {
    font-family: var(--FD); font-size: .88rem; font-weight: 700; color: var(--dust);
    line-height: 1.3; margin-bottom: .5rem; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden
}
.bc-foot { display: flex; align-items: center; justify-content: space-between }
.bc-price { font-family: var(--FM); font-size: .8rem; font-weight: 700; color: var(--blush3) }
.bc-add {
    width: 28px; height: 28px; border-radius: 5px; background: var(--ink3);
    border: 1px solid var(--bdrw); color: rgba(245, 240, 235, .4);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: .7rem; transition: var(--ease)
}
.bc-add:hover { background: var(--blush); color: var(--ink); border-color: var(--blush) }

/* LAYOUT C: Feature */
.sec-feature { padding: 7rem 0; background: var(--ink) }
.feat-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1px; background: var(--bdrw) }
.feat-big {
    background: var(--ink2); display: flex; flex-direction: column;
    position: relative; overflow: hidden; cursor: pointer; transition: var(--ease)
}
.feat-big:hover { background: var(--ink3) }
.feat-big-img {
    height: 380px; overflow: hidden; background: var(--ink3);
    position: relative; display: flex; align-items: center;
    justify-content: center; padding: 2rem
}
.feat-big-img img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1)
}
.feat-big:hover .feat-big-img img { transform: scale(1.06) }
.feat-big-body { padding: 2rem; flex: 1 }
.feat-small-grid { display: grid; grid-template-rows: repeat(3, 1fr); gap: 1px; background: var(--bdrw) }
.feat-sm {
    background: var(--ink2); display: flex; gap: 1rem; align-items: center;
    padding: 1.2rem 1.5rem; cursor: pointer; transition: var(--ease)
}
.feat-sm:hover { background: var(--ink3) }
.feat-sm-img {
    width: 80px; height: 80px; flex-shrink: 0; background: var(--ink3);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    padding: .6rem; overflow: hidden
}
.feat-sm-img img { max-width: 100%; max-height: 100%; object-fit: contain }
.feat-sm-body { flex: 1; min-width: 0 }
.feat-sm-cat {
    font-family: var(--FM); font-size: .52rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--blush); margin-bottom: .25rem
}
.feat-sm-name {
    font-family: var(--FD); font-size: .92rem; font-weight: 700; color: var(--dust);
    line-height: 1.25; margin-bottom: .4rem; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden
}
.feat-sm-price { font-family: var(--FM); font-size: .78rem; font-weight: 700; color: var(--blush3) }
.feat-sm-btns { display: flex; gap: .4rem; flex-shrink: 0 }
.fsb {
    width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--bdrw);
    background: transparent; color: rgba(245, 240, 235, .35); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; transition: var(--ease)
}
.fsb.add:hover { background: var(--blush); color: var(--ink); border-color: var(--blush) }
.fsb.wish:hover, .fsb.wish.on {
    background: rgba(212, 145, 122, .15); color: var(--blush3); border-color: var(--bdr)
}

/* LAYOUT D: Cards */
.sec-cards { padding: 7rem 0; background: var(--ink2) }
.cards-wrap { max-width: 1440px; margin: 0 auto; padding: 0 2.5rem }
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem }
.card-v {
    background: var(--ink); border: 1px solid var(--bdrw); border-radius: 16px;
    overflow: hidden; cursor: pointer; transition: var(--ease);
    display: flex; flex-direction: column
}
.card-v:hover { border-color: var(--bdr2); transform: translateY(-5px); box-shadow: 0 20px 48px rgba(0, 0, 0, .35) }
.card-v-img {
    height: 220px; background: var(--ink3); display: flex; align-items: center;
    justify-content: center; padding: 1.4rem; position: relative; overflow: hidden
}
.card-v-img img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    transition: transform .45s; display: block
}
.card-v:hover .card-v-img img { transform: scale(1.08) }
.card-v-badge {
    position: absolute; top: 10px; left: 10px; font-family: var(--FM);
    font-size: .5rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; padding: .2rem .55rem; border-radius: 3px
}
.card-v-wish {
    position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
    background: rgba(13, 13, 13, .7); border: 1px solid var(--bdrw);
    border-radius: 7px; color: rgba(245, 240, 235, .35); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; transition: var(--ease)
}
.card-v-wish:hover, .card-v-wish.on {
    background: rgba(212, 145, 122, .2); color: var(--blush3); border-color: var(--bdr)
}
.card-v-body {
    padding: .9rem 1rem 1rem; flex: 1; display: flex;
    flex-direction: column; justify-content: space-between
}
.card-v-cat {
    font-family: var(--FM); font-size: .52rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--blush); margin-bottom: .3rem; opacity: .8
}
.card-v-name {
    font-family: var(--FD); font-size: .98rem; font-weight: 700; color: var(--dust);
    line-height: 1.28; margin-bottom: .6rem; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden
}
.card-v-foot { display: flex; align-items: center; justify-content: space-between }
.card-v-price { font-family: var(--FM); font-size: .88rem; font-weight: 700; color: var(--blush3) }
.card-v-actions { display: flex; gap: .35rem }
.cva {
    width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--bdrw);
    background: transparent; color: rgba(245, 240, 235, .35); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; transition: var(--ease)
}
.cva.add:hover { background: var(--blush); color: var(--ink); border-color: var(--blush) }
.cva.wish:hover, .cva.wish.on {
    background: rgba(212, 145, 122, .15); color: var(--blush3); border-color: var(--bdr)
}

/* LAYOUT E: List */
.sec-list { padding: 7rem 0; background: var(--ink) }
.list-wrap { max-width: 1440px; margin: 0 auto; padding: 0 2.5rem }
.list-row {
    display: grid; grid-template-columns: 120px 1fr auto; gap: 1.5rem;
    align-items: center; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--bdrw);
    cursor: pointer; transition: var(--ease); border-radius: 8px; margin-bottom: .2rem
}
.list-row:hover { background: var(--ink2); border-color: transparent }
.list-row:last-child { border-bottom: none }
.lr-img {
    width: 120px; height: 80px; background: var(--ink3); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: .6rem; overflow: hidden; flex-shrink: 0
}
.lr-img img { max-width: 100%; max-height: 100%; object-fit: contain }
.lr-mid { min-width: 0 }
.lr-cat {
    font-family: var(--FM); font-size: .52rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--blush); margin-bottom: .3rem
}
.lr-name {
    font-family: var(--FD); font-size: 1.05rem; font-weight: 700; color: var(--dust);
    line-height: 1.25; margin-bottom: .4rem; display: -webkit-box;
    -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden
}
.lr-desc {
    font-family: var(--FB); font-size: .83rem; color: rgba(245, 240, 235, .35);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden
}
.lr-right { display: flex; align-items: center; gap: 1rem; flex-shrink: 0 }
.lr-price { font-family: var(--FM); font-size: 1rem; font-weight: 700; color: var(--blush3); white-space: nowrap }
.lr-actions { display: flex; gap: .35rem }
.lra {
    width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--bdrw);
    background: transparent; color: rgba(245, 240, 235, .35); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; transition: var(--ease)
}
.lra.add:hover { background: var(--blush); color: var(--ink); border-color: var(--blush) }
.lra.wish:hover, .lra.wish.on {
    background: rgba(212, 145, 122, .15); color: var(--blush3); border-color: var(--bdr)
}

/* ── ABOUT ── */
#about {
    min-height: 80vh; display: grid; grid-template-columns: 1fr 1fr;
    background: var(--ink2); position: relative; overflow: hidden
}
.about-img-side { position: relative; overflow: hidden }
.about-img-side img {
    width: 100%; height: 100%; object-fit: cover; opacity: .6;
    display: block; min-height: 500px
}
.about-img-ov { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--ink2)) }
.about-txt-side {
    padding: 6rem 5rem 6rem 4rem; display: flex; flex-direction: column;
    justify-content: center; position: relative; z-index: 1
}
.ab-eyebrow {
    font-family: var(--FM); font-size: .65rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--blush); margin-bottom: 1.2rem;
    display: flex; align-items: center; gap: 10px
}
.ab-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--blush) }
.ab-h {
    font-family: var(--FD); font-size: clamp(2.5rem, 4vw, 5rem); font-weight: 900;
    color: var(--dust); line-height: .9; letter-spacing: -.025em; margin-bottom: 1.5rem
}
.ab-h em { font-style: italic; color: var(--blush3) }
.ab-p {
    font-family: var(--FB); font-size: 1rem; color: rgba(245, 240, 235, .4);
    line-height: 1.9; margin-bottom: 2.5rem; font-weight: 300; max-width: 420px
}
.ab-feats { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 2.5rem }
.abf { display: flex; align-items: flex-start; gap: .8rem }
.abf-ic {
    width: 38px; height: 38px; border-radius: 8px; background: rgba(212, 145, 122, .1);
    border: 1px solid var(--bdr); color: var(--blush3); display: flex;
    align-items: center; justify-content: center; font-size: .85rem;
    flex-shrink: 0; transition: var(--spring)
}
.abf:hover .abf-ic {
    background: var(--blush); color: var(--ink);
    border-color: var(--blush); transform: scale(1.1)
}
.abf-t {
    font-family: var(--FM); font-size: .68rem; font-weight: 700;
    letter-spacing: .05em; color: var(--dust); margin-bottom: 3px
}
.abf-d { font-family: var(--FB); font-size: .82rem; color: rgba(245, 240, 235, .35); line-height: 1.5 }

/* ── WHY ── */
#why { padding: 8rem 0; background: var(--ink); position: relative; overflow: hidden }
#why::before {
    content: 'WHY'; position: absolute; right: -2rem; top: 50%;
    transform: translateY(-50%); font-family: var(--FD); font-size: 20rem;
    color: rgba(255, 255, 255, .015); line-height: 1; pointer-events: none; font-weight: 900
}
.why-wrap { max-width: 1440px; margin: 0 auto; padding: 0 2.5rem }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--bdrw) }
.wc {
    padding: 2.5rem 2rem; border-right: 1px solid var(--bdrw);
    border-bottom: 1px solid var(--bdrw); transition: var(--ease);
    position: relative; overflow: hidden
}
.wc:nth-child(3n) { border-right: none }
.wc:nth-child(4), .wc:nth-child(5), .wc:nth-child(6) { border-bottom: none }
.wc:hover { background: var(--ink2) }
.wc-num {
    font-family: var(--FM); font-size: .6rem; font-weight: 700;
    letter-spacing: .2em; color: var(--blush); margin-bottom: 1.2rem; display: block
}
.wc-ic {
    width: 44px; height: 44px; border-radius: 10px; background: rgba(212, 145, 122, .08);
    border: 1px solid var(--bdr); color: var(--blush3); display: flex;
    align-items: center; justify-content: center; font-size: 1rem;
    margin-bottom: 1.1rem; transition: var(--spring)
}
.wc:hover .wc-ic {
    background: var(--blush); color: var(--ink);
    border-color: var(--blush); transform: rotate(-6deg) scale(1.08)
}
.wc-t {
    font-family: var(--FD); font-weight: 700; font-size: 1.2rem;
    color: var(--dust); margin-bottom: .6rem; letter-spacing: -.01em
}
.wc-d { font-family: var(--FB); font-size: .88rem; color: rgba(245, 240, 235, .38); line-height: 1.72; font-weight: 300 }

/* ── REVIEWS ── */
#reviews { padding: 8rem 0; background: var(--ink2) }
.rev-wrap { max-width: 1440px; margin: 0 auto; padding: 0 2.5rem }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bdrw); margin-top: 4rem }
.rv { background: var(--ink2); padding: 2rem; transition: var(--ease); position: relative; overflow: hidden }
.rv:hover { background: var(--ink3) }
.rv-stars { color: var(--gold); font-size: .75rem; letter-spacing: .1em; margin-bottom: 1rem }
.rv-txt {
    font-family: var(--FD); font-size: 1rem; font-style: italic;
    color: rgba(245, 240, 235, .6); line-height: 1.75; margin-bottom: 1.5rem; font-weight: 400
}
.rv-hdr { display: flex; align-items: center; gap: .8rem; border-top: 1px solid var(--bdrw); padding-top: 1.1rem }
.rv-av {
    width: 42px; height: 42px; border-radius: 50%; background: var(--ink4);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--FM); font-size: .68rem; font-weight: 700;
    color: var(--blush3); flex-shrink: 0
}
.rv-nm { font-family: var(--FM); font-size: .72rem; font-weight: 700; color: var(--dust); letter-spacing: .05em }
.rv-rl { font-family: var(--FB); font-size: .72rem; color: rgba(245, 240, 235, .3) }

/* ── FAQ ── */
#faq { padding: 8rem 0; background: var(--ink) }
.faq-wrap { max-width: 1440px; margin: 0 auto; padding: 0 2.5rem }
.faq-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8rem; align-items: start }
.faq-left-h {
    font-family: var(--FD); font-size: clamp(2.5rem, 5vw, 6rem); font-weight: 900;
    color: var(--dust); line-height: .88; letter-spacing: -.03em; margin-bottom: 1.2rem
}
.faq-left-h em { font-style: italic; color: var(--blush3) }
.faq-left-p {
    font-family: var(--FB); font-size: .95rem; color: rgba(245, 240, 235, .38);
    line-height: 1.85; margin-bottom: 2.5rem; font-weight: 300
}
.fq { border-bottom: 1px solid var(--bdrw); overflow: hidden }
.fq-q {
    padding: 1.2rem 0; display: flex; justify-content: space-between;
    align-items: center; cursor: pointer; gap: 1rem
}
.fq-qt {
    font-family: var(--FM); font-size: .8rem; font-weight: 700;
    letter-spacing: .03em; color: rgba(245, 240, 235, .7); transition: .3s
}
.fq.op .fq-qt { color: var(--blush3) }
.fq-ic {
    width: 24px; height: 24px; border: 1px solid var(--bdrw); border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; color: rgba(245, 240, 235, .3); flex-shrink: 0;
    transition: var(--spring); background: var(--ink3)
}
.fq.op .fq-ic {
    background: var(--blush); color: var(--ink);
    border-color: var(--blush); transform: rotate(45deg)
}
.fq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s }
.fq.op .fq-a { max-height: 200px; padding: 0 0 1.2rem }
.fq-a p { font-family: var(--FB); font-size: .88rem; color: rgba(245, 240, 235, .38); line-height: 1.75; font-weight: 300 }

/* ── SUBSCRIBE ── */
#subscribe { padding: 8rem 0; background: var(--blush2); position: relative; overflow: hidden }
#subscribe::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(13, 13, 13, .06) 1px, transparent 1px);
    background-size: 24px 24px
}
.sub-inner { max-width: 600px; margin: 0 auto; text-align: center; padding: 0 2rem; position: relative; z-index: 1 }
.sub-label {
    font-family: var(--FM); font-size: .65rem; letter-spacing: .2em;
    text-transform: uppercase; color: rgba(13, 13, 13, .55); margin-bottom: 1rem; display: block
}
.sub-h {
    font-family: var(--FD); font-size: clamp(2.8rem, 6vw, 7rem); font-weight: 900;
    color: var(--ink); line-height: .85; margin-bottom: .8rem; letter-spacing: -.03em
}
.sub-h em { font-style: italic }
.sub-d {
    font-family: var(--FB); font-size: 1rem; color: rgba(13, 13, 13, .5);
    margin-bottom: 2.5rem; line-height: 1.75; font-weight: 300
}
.sub-box {
    background: rgba(13, 13, 13, .1); border: 1px solid rgba(13, 13, 13, .12);
    border-radius: 16px; padding: 2rem; text-align: left; backdrop-filter: blur(8px)
}
.sfl {
    font-family: var(--FM); font-size: .58rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: rgba(13, 13, 13, .45);
    display: block; margin-bottom: .35rem
}
.sfi {
    background: rgba(13, 13, 13, .08); border: 1px solid rgba(13, 13, 13, .1);
    border-radius: 6px; padding: .75rem 1rem; color: var(--ink);
    font-family: var(--FB); font-size: .9rem; width: 100%; outline: none; transition: .3s
}
.sfi:focus { border-color: rgba(13, 13, 13, .25); background: rgba(13, 13, 13, .12) }
.sfi::placeholder { color: rgba(13, 13, 13, .3) }
.sfrow { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem }
.sfg { display: flex; flex-direction: column; gap: .3rem }
.sfck { display: flex; align-items: flex-start; gap: .6rem }
.sfck input { accent-color: var(--ink); width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px }
.sfck label { font-family: var(--FB); font-size: .78rem; color: rgba(13, 13, 13, .45); line-height: 1.55; font-weight: 300 }
.btn-sub {
    background: var(--ink); color: var(--dust); border: none; padding: .95rem;
    border-radius: 6px; font-family: var(--FM); font-weight: 700; font-size: .7rem;
    letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: var(--ease)
}
.btn-sub:hover { background: var(--ink2); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(13, 13, 13, .3) }
.sub-note { font-family: var(--FB); font-size: .8rem; color: rgba(13, 13, 13, .38); margin-top: .9rem; font-weight: 300 }
.sub-note a { color: rgba(13, 13, 13, .6); cursor: pointer; text-decoration: underline }

/* ── CONTACT ── */
#contact { padding: 8rem 0; background: var(--ink2) }
.con-wrap { max-width: 1440px; margin: 0 auto; padding: 0 2.5rem }
.con-g { display: grid; grid-template-columns: 1fr 1.6fr; gap: 7rem; align-items: start }
.con-info-h {
    font-family: var(--FD); font-size: clamp(2rem, 3.5vw, 4rem); font-weight: 900;
    color: var(--dust); margin-bottom: 2.2rem; line-height: .9; letter-spacing: -.025em
}
.ci { display: flex; gap: .9rem; margin-bottom: 1.4rem; align-items: flex-start }
.ci-ic {
    width: 44px; height: 44px; flex-shrink: 0; background: rgba(212, 145, 122, .08);
    border: 1px solid var(--bdr); color: var(--blush3); display: flex;
    align-items: center; justify-content: center; font-size: .88rem;
    border-radius: 10px; transition: var(--spring)
}
.ci:hover .ci-ic {
    background: var(--blush); color: var(--ink);
    border-color: var(--blush); transform: scale(1.08)
}
.ci-l {
    font-family: var(--FM); font-size: .55rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(245, 240, 235, .25); margin-bottom: 3px
}
.ci-v { font-family: var(--FB); font-size: .92rem; color: var(--dust); font-weight: 400 }
.con-fb { background: var(--ink); border: 1px solid var(--bdrw); border-radius: 16px; padding: 2.5rem }
.con-fb h4 { font-family: var(--FD); font-size: 2rem; font-weight: 900; color: var(--dust); margin-bottom: 1.8rem; letter-spacing: -.02em }
.cfl {
    font-family: var(--FM); font-size: .58rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(245, 240, 235, .25); display: block; margin-bottom: .35rem
}
.cfi {
    background: var(--ink2); border: 1px solid var(--bdrw); border-radius: 7px;
    padding: .75rem 1rem; color: var(--dust); font-family: var(--FB);
    font-size: .9rem; width: 100%; outline: none; transition: .3s
}
.cfi:focus { border-color: var(--bdr); background: var(--ink3) }
.cfi::placeholder { color: rgba(245, 240, 235, .2) }
.cfrow { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem }

/* ── FOOTER ── */
footer { background: var(--ink); border-top: 1px solid var(--bdrw) }
.f-accent {
    height: 2px;
    background: linear-gradient(90deg, var(--blush2), var(--blush), var(--gold), var(--blush3), var(--blush));
    background-size: 200% 100%; animation: gradShift 5s linear infinite
}
@keyframes gradShift { 0% { background-position: 0 0 } 100% { background-position: 200% 0 } }
.f-main {
    max-width: 1440px; margin: 0 auto; padding: 5rem 2.5rem 3rem;
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem;
    border-bottom: 1px solid var(--bdrw)
}
.f-brand {
    font-family: var(--FD); font-size: 1.4rem; font-weight: 700;
    color: var(--dust); margin-bottom: .9rem; display: flex;
    align-items: center; gap: 10px; letter-spacing: -.01em
}
.f-brand-mark {
    width: 32px; height: 32px; border-radius: 6px;
    background: linear-gradient(135deg, var(--blush), var(--blush2));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: var(--ink)
}
.f-desc {
    font-family: var(--FB); font-size: .9rem; color: rgba(245, 240, 235, .28);
    line-height: 1.82; max-width: 260px; margin-bottom: 1.6rem; font-weight: 300
}
.f-soc { display: flex; gap: .4rem }
.fsc {
    width: 36px; height: 36px; background: var(--ink2); border: 1px solid var(--bdrw);
    color: rgba(245, 240, 235, .25); display: flex; align-items: center;
    justify-content: center; font-size: .82rem; border-radius: 7px;
    cursor: pointer; transition: var(--ease); text-decoration: none
}
.fsc:hover {
    background: var(--blush); color: var(--ink);
    border-color: var(--blush); transform: translateY(-2px)
}
.fch {
    font-family: var(--FM); font-size: .75rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(245, 240, 235, 0.623); margin-bottom: 1.2rem
}
.flks { display: flex; flex-direction: column; gap: .55rem }
.flk {
    font-family: var(--FB); font-size: .9rem; color: rgba(245, 240, 235, 0.507);
    cursor: pointer; transition: .3s; text-decoration: none; font-weight: 300
}
.flk:hover { color: var(--blush3) }
.f-bot {
    max-width: 1440px; margin: 0 auto; padding: 1.2rem 2.5rem;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem
}
.f-copy { font-family: var(--FM); font-size: .85rem; color: rgba(245, 240, 235, 0.653); letter-spacing: .08em }

/* ── DRAWERS ── */
.ov {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .88);
    backdrop-filter: blur(16px); opacity: 0; pointer-events: none;
    transition: .3s; z-index: 2000
}
.ov.open { opacity: 1; pointer-events: all }
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 2001;
    width: 420px; max-width: 95vw; background: var(--ink2);
    border-left: 1px solid var(--bdrw); transform: translateX(100%);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
    display: flex; flex-direction: column; box-shadow: -16px 0 48px rgba(0, 0, 0, .5)
}
.drawer.open { transform: translateX(0) }
.dr-h {
    padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--bdrw);
    display: flex; justify-content: space-between; align-items: center; background: var(--ink3)
}
.dr-title { font-family: var(--FD); font-size: 1.2rem; font-weight: 700; color: var(--dust); letter-spacing: -.01em }
.dr-x {
    width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--bdrw);
    background: var(--ink4); color: rgba(245, 240, 235, .3); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem; transition: var(--ease)
}
.dr-x:hover { background: rgba(212, 145, 122, .15); color: var(--blush3); border-color: var(--bdr) }
.dr-body { flex: 1; overflow-y: auto; padding: 1.4rem }
.dr-body::-webkit-scrollbar { width: 3px }
.dr-body::-webkit-scrollbar-thumb { background: var(--blush); border-radius: 2px }
.dr-item { display: flex; gap: .9rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--bdrw) }
.dr-img {
    width: 64px; height: 64px; flex-shrink: 0; background: var(--ink3);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    padding: 6px; overflow: hidden; border: 1px solid var(--bdrw)
}
.dr-img img { max-width: 100%; max-height: 100%; object-fit: contain }
.dr-nm {
    font-family: var(--FD); font-weight: 700; font-size: .82rem;
    color: var(--dust); margin-bottom: 3px; line-height: 1.3
}
.dr-pr { font-family: var(--FM); font-size: .88rem; color: var(--blush3) }
.dr-rm {
    background: var(--ink4); border: 1px solid var(--bdrw); width: 30px;
    height: 30px; border-radius: 7px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; font-size: .65rem;
    color: rgba(245, 240, 235, .3); transition: var(--ease);
    margin-left: auto; flex-shrink: 0
}
.dr-rm:hover { background: rgba(212, 145, 122, .15); color: var(--blush3); border-color: var(--bdr) }
.dr-foot { padding: 1.4rem; border-top: 1px solid var(--bdrw); background: var(--ink3) }
.empty-s { text-align: center; padding: 3.5rem 2rem; color: rgba(245, 240, 235, .25) }
.empty-s i { font-size: 2.5rem; margin-bottom: 1rem; display: block; opacity: .12 }
.empty-s p { font-family: var(--FD); font-size: 1rem; font-style: italic }

/* ── PRODUCT DETAIL MODAL ── */
.mwrap {
    position: fixed; inset: 0; z-index: 3000; display: flex;
    align-items: center; justify-content: center; padding: 20px;
    opacity: 0; pointer-events: none; transition: .3s
}
.mwrap.open { opacity: 1; pointer-events: all }
.mbg { position: absolute; inset: 0; background: rgba(0, 0, 0, .92); backdrop-filter: blur(20px) }
.mbox {
    position: relative; background: var(--ink2); border: 1px solid var(--bdrw);
    border-radius: 16px; box-shadow: 0 32px 80px rgba(0, 0, 0, .6);
    max-width: 88vw; width: 860px; max-height: 90vh; overflow-y: auto
}
.mbox::-webkit-scrollbar { width: 3px }
.mclose {
    position: absolute; top: 1.1rem; right: 1.1rem; background: var(--ink3);
    border: 1px solid var(--bdrw); width: 34px; height: 34px; border-radius: 8px;
    color: rgba(245, 240, 235, .3); cursor: pointer; display: flex;
    align-items: center; justify-content: center; font-size: .82rem;
    transition: var(--ease); z-index: 5
}
.mclose:hover { background: rgba(212, 145, 122, .15); color: var(--blush3); border-color: var(--bdr) }
.pd-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px }
.pd-img-side {
    background: var(--ink3); border-radius: 16px 0 0 16px; display: flex;
    align-items: center; justify-content: center; padding: 3rem;
    position: relative; overflow: hidden
}
.pd-img-side img {
    max-width: 100%; max-height: 340px; object-fit: contain;
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .5))
}
.pd-img-bg { position: absolute; inset: 0; opacity: .06; pointer-events: none }
.pd-txt-side { padding: 2.5rem 2.8rem; display: flex; flex-direction: column; justify-content: center }
.pd-cat {
    font-family: var(--FM); font-size: .6rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--blush); margin-bottom: .7rem;
    display: flex; align-items: center; gap: 8px
}
.pd-cat::before { content: ''; width: 14px; height: 1px; background: var(--blush) }
.pd-name {
    font-family: var(--FD); font-size: 1.7rem; font-weight: 900;
    color: var(--dust); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 1rem
}
.pd-desc {
    font-family: var(--FB); font-size: .92rem; color: rgba(245, 240, 235, .42);
    line-height: 1.8; margin-bottom: 1.8rem; font-weight: 300
}
.pd-price-row { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 2rem }
.pd-price { font-family: var(--FM); font-size: 2.2rem; font-weight: 700; color: var(--blush3) }
.pd-price-label {
    font-family: var(--FM); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(245, 240, 235, .3)
}
.pd-actions { display: flex; gap: .75rem; flex-wrap: wrap }
.pd-btn-main {
    flex: 1; background: var(--blush); color: var(--ink); border: none;
    padding: 13px 20px; border-radius: 6px; font-family: var(--FM);
    font-weight: 700; font-size: .72rem; letter-spacing: .1em;
    text-transform: uppercase; cursor: pointer; transition: var(--ease);
    display: flex; align-items: center; justify-content: center;
    gap: 8px; min-width: 120px
}
.pd-btn-main:hover { background: var(--blush3); transform: translateY(-2px) }
.pd-btn-wish {
    width: 46px; height: 46px; border-radius: 6px; border: 1px solid var(--bdrw);
    background: transparent; color: rgba(245, 240, 235, .35); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; transition: var(--ease); flex-shrink: 0
}
.pd-btn-wish:hover, .pd-btn-wish.on {
    background: rgba(212, 145, 122, .15); color: var(--blush3); border-color: var(--bdr)
}
.pd-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.5rem }
.pd-tag {
    font-family: var(--FM); font-size: .52rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem;
    border-radius: 3px; border: 1px solid var(--bdrw);
    color: rgba(245, 240, 235, .3); background: var(--ink3)
}

/* Policy */
.pol h2 { font-family: var(--FD); font-size: 2.2rem; font-weight: 900; color: var(--dust); margin-bottom: 1.2rem; letter-spacing: -.02em }
.pol h3 { font-family: var(--FM); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blush); margin: 1.5rem 0 .5rem }
.pol p, .pol li { font-family: var(--FB); font-size: .92rem; color: rgba(245, 240, 235, .4); line-height: 1.75; margin-bottom: .4rem; font-weight: 300 }
.pol ul { padding-left: 1.5rem }

/* ── TOAST ── */
.toast-c { position: fixed; bottom: 2rem; right: 2rem; z-index: 9999; display: flex; flex-direction: column; gap: .4rem }
.toast-i {
    background: var(--ink2); color: var(--dust); padding: .8rem 1.2rem;
    border-radius: 10px; border-left: 3px solid var(--blush);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5); display: flex;
    align-items: center; gap: 10px; font-family: var(--FM);
    font-weight: 700; font-size: .68rem; letter-spacing: .04em;
    animation: tslide .4s cubic-bezier(.34, 1.56, .64, 1)
}
@keyframes tslide {
    from { opacity: 0; transform: translateX(24px) scale(.9) }
    to { opacity: 1; transform: translateX(0) scale(1) }
}

/* ── SCROLL REVEAL ── */
.reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1)
}
.reveal.on { opacity: 1; transform: translateY(0) }
.rd1 { transition-delay: .1s }
.rd2 { transition-delay: .2s }
.rd3 { transition-delay: .3s }

/* ── UTILITIES ── */
.btn-main {
    background: var(--blush); color: var(--ink); border: none; padding: 13px 28px;
    font-family: var(--FM); font-weight: 700; font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase; border-radius: 6px;
    cursor: pointer; transition: var(--ease); display: inline-flex;
    align-items: center; gap: 8px
}
.btn-main:hover { background: var(--blush3); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(212, 145, 122, .3) }
.btn-ghost {
    background: transparent; border: 1px solid rgba(245, 240, 235, .2);
    color: rgba(245, 240, 235, .55); padding: 12px 24px; font-family: var(--FM);
    font-weight: 700; font-size: .72rem; letter-spacing: .1em;
    text-transform: uppercase; border-radius: 6px; cursor: pointer; transition: var(--ease)
}
.btn-ghost:hover { border-color: var(--bdr2); color: var(--blush3) }
.btn-alt {
    background: rgba(13, 13, 13, .2); border: 1px solid rgba(13, 13, 13, .15);
    color: rgba(13, 13, 13, .65); padding: 12px 24px; font-family: var(--FM);
    font-weight: 700; font-size: .72rem; letter-spacing: .1em;
    text-transform: uppercase; border-radius: 6px; cursor: pointer; transition: var(--ease)
}
.btn-alt:hover { background: rgba(13, 13, 13, .3) }

/* ── PAGE HEADER (for sub-pages) ── */
.page-header {
    padding: 10rem 2.5rem 4rem;
    background: var(--ink);
    text-align: center;
    border-bottom: 1px solid var(--bdrw)
}
.page-header h1 {
    font-family: var(--FD);
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 900;
    color: var(--dust);
    line-height: .9;
    letter-spacing: -.025em;
    margin-bottom: 1rem
}
.page-header h1 em { font-style: italic; color: var(--blush3) }
.page-header p {
    font-family: var(--FB);
    font-size: 1rem;
    color: rgba(245, 240, 235, .4);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
    font-weight: 300
}

/* ── CHECKOUT PAGE ── */
.checkout-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2.5rem 8rem
}
.checkout-section-title {
    font-family: var(--FM);
    font-size: .65rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 240, 235, .28);
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--bdrw)
}
.checkout-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem
}
.checkout-form-grid .full { grid-column: 1 / -1 }
.order-summary-card {
    background: var(--ink2);
    border: 1px solid var(--bdrw);
    border-radius: 16px;
    padding: 2rem;
    position: sticky;
    top: 100px
}
.order-item {
    display: flex;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--bdrw);
    align-items: center
}
.order-item-img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: var(--ink3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    flex-shrink: 0;
    border: 1px solid var(--bdrw);
    overflow: hidden
}
.order-item-img img { max-width: 100%; max-height: 100%; object-fit: contain }
.order-item-info { flex: 1; min-width: 0 }
.order-item-name {
    font-family: var(--FD);
    font-size: .82rem;
    font-weight: 700;
    color: var(--dust);
    line-height: 1.3;
    margin-bottom: 3px
}
.order-item-meta {
    font-family: var(--FM);
    font-size: .7rem;
    color: rgba(245, 240, 235, .3)
}
.order-item-price {
    font-family: var(--FM);
    font-size: .85rem;
    font-weight: 700;
    color: var(--blush3);
    white-space: nowrap
}
.cod-badge {
    background: rgba(212, 145, 122, .08);
    border: 1px solid var(--bdr);
    border-radius: 10px;
    padding: 1.2rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: .9rem
}
.cod-badge i { font-size: 1.5rem; color: var(--blush3) }
.cod-badge-label {
    font-family: var(--FM);
    font-size: .55rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(245, 240, 235, .28);
    margin-bottom: .25rem
}
.cod-badge-value {
    font-family: var(--FM);
    font-weight: 700;
    font-size: .88rem;
    color: var(--blush3)
}

/* ── WISHLIST PAGE ── */
.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem 2.5rem 8rem
}

/* ── NEWSLETTER / UNSUBSCRIBE PAGES ── */
.nl-page-wrap {
    max-width: 700px;
    margin: 0 auto;
    padding: 4rem 2.5rem 8rem
}
.nl-card {
    background: var(--ink2);
    border: 1px solid var(--bdrw);
    border-radius: 16px;
    padding: 2.5rem
}
.nl-card .sfl { color: rgba(245, 240, 235, .3) }
.nl-card .sfi {
    background: var(--ink3);
    border-color: var(--bdrw);
    color: var(--dust)
}
.nl-card .sfi:focus { border-color: var(--bdr); background: var(--ink4) }
.nl-card .sfi::placeholder { color: rgba(245, 240, 235, .2) }
.nl-card .sfck label { color: rgba(245, 240, 235, .35) }
.nl-card .sfck input { accent-color: var(--blush) }

/* ── LEGAL PAGES ── */
.legal-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem 2.5rem 8rem
}
.legal-wrap .pol h2 { font-size: 2.5rem }
.legal-wrap .pol h3 { font-size: .8rem }

/* ── CONTACT PAGE ── */
.contact-page-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2.5rem 8rem
}

/* ── RESPONSIVE ── */
@media(max-width:1100px) {
    #hero { grid-template-columns: 1fr }
    .hero-r { display: none }
    .about-img-side { display: none }
    #about { grid-template-columns: 1fr }
    .mg-grid { grid-template-columns: repeat(3, 1fr) }
    .cards-grid { grid-template-columns: repeat(2, 1fr) }
    .f-main { grid-template-columns: 1fr 1fr }
    .pd-layout { grid-template-columns: 1fr }
    .pd-img-side { border-radius: 16px 16px 0 0; min-height: 280px }
    .faq-layout { grid-template-columns: 1fr; gap: 3rem }
    .checkout-layout { grid-template-columns: 1fr; gap: 2.5rem }
    .wishlist-grid { grid-template-columns: repeat(3, 1fr) }
}

@media(max-width:760px) {
    .nb { padding: 0 1.2rem }
    .nlinks { display: none }
    .hero-l { padding: 4rem 1.5rem }
    .why-grid { grid-template-columns: 1fr 1fr }
    .rev-grid { grid-template-columns: 1fr }
    .mg-grid { grid-template-columns: repeat(2, 1fr) }
    .cards-grid { grid-template-columns: 1fr 1fr }
    .feat-grid { grid-template-columns: 1fr }
    .feat-small-grid { grid-template-rows: auto }
    .con-g { grid-template-columns: 1fr }
    .sfrow, .cfrow { grid-template-columns: 1fr }
    .f-main { grid-template-columns: 1fr }
    .checkout-form-grid { grid-template-columns: 1fr }
    .wishlist-grid { grid-template-columns: repeat(2, 1fr) }
}

@media(max-width:480px) {
    .wishlist-grid { grid-template-columns: 1fr }
    .mg-grid { grid-template-columns: 1fr }
    .cards-grid { grid-template-columns: 1fr }
}