/* =====================================================
   sheem.net — design tokens
   Palette: Royal Aubergine / Rose Gold / Champagne (cosmetics + attar)
   Display: Playfair Display  |  Body: Poppins
===================================================== */
:root {
    --cream:      #FAF7F1;
    --header-footer-bg: #FAF7F1;
    --paper:      #F2E8DB;
    --blush:      #F6E9EE;
    --blush-deep: #DDB4C6;
    --rose:       #C98A9C;
    --rose-deep:  #4B2E59;
    --gold:       #E1B89D;
    --gold-light: #F0D9C8;
    --plum:       #3A2246;
    --plum-soft:  #4B2E59;
    --ink:        #2A2A2A;
    --muted:      #8A7B85;
    --line:       #E8DED3;
    --radius:     16px;
    --radius-sm:  10px;
    --shadow:     0 20px 45px -25px rgba(58, 34, 70, 0.35);
    --ease:       cubic-bezier(.22,.68,0,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 .4em;
    letter-spacing: .01em;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 3px; }

.eyebrow {
    display: inline-block;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--rose-deep);
    margin-bottom: .5em;
    letter-spacing: .05em;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: 999px;
    font-size: .92rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: transform .35s var(--ease), background .3s, box-shadow .3s;
}
.btn--dark { background: var(--plum); color: var(--cream); }
.btn--dark:hover { background: var(--rose-deep); transform: translateY(-4px) scale(1.03); }
.btn--primary { background: linear-gradient(120deg, var(--rose) 0%, var(--rose-deep) 100%); color: #fff; box-shadow: 0 12px 24px -12px rgba(93,63,163,.6); border: none; }
.btn--primary:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 20px 32px -12px rgba(93,63,163,.8); }
.btn--outline { background: var(--blush); color: var(--plum); border: 2px solid var(--plum); font-weight: 600; }
.btn--outline:hover { background: var(--plum); color: #fff; transform: translateY(-4px) scale(1.03); }
.btn--block { width: 100%; justify-content: center; margin-bottom: 10px; }

.link-underline {
    position: relative;
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    color: var(--ink);
}
.link-underline--light { color: #fff; }

/* ================= Reveal-on-scroll ================= */
.reveal { opacity: 0; transform: translateY(48px) scale(.97); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
    .reveal, .product-card, .cat-card,
    .rank-card, .deal-card, .arrival-card, .lux-card,
    .rank-card__num, .arrival-card__tag { opacity: 1; transform: none; transition: none; }
    .arrival-card__media img { transform: none; }
    .lux-card__body::before { width: 28px; }
    .trend-list { animation: none; }
    .hero__main, .product-card__badge, .topbar, .reviews__track, .topbar__track { animation: none; }
    .topbar__track { position: static; transform: none; text-align: center; }
}

/* ================= Sales toast (Lilac-style) ================= */
.sales-toast {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 12px 34px 12px 12px;
    max-width: 300px;
    opacity: 0;
    transform: translateX(-120%) scale(.94);
    transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .4s var(--ease);
}
.sales-toast.show { opacity: 1; transform: translateX(0) scale(1); }
.sales-toast img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.sales-toast__lead { margin: 0; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.sales-toast__name { margin: 2px 0; font-family: 'Playfair Display', serif; font-size: .92rem; color: var(--ink); }
.sales-toast__time { margin: 0; font-size: .72rem; color: var(--gold); }
.sales-toast__close { position: absolute; top: 6px; right: 8px; font-size: 1rem; color: var(--muted); line-height: 1; }

/* ================= Top bar ================= */
.topbar {
    background: linear-gradient(90deg, var(--plum) 0%, var(--plum-soft) 25%, var(--plum) 50%, var(--plum-soft) 75%, var(--plum) 100%);
    background-size: 250% 100%; animation: topbarSlide 10s linear infinite;
    color: var(--gold-light); font-size: .92rem; letter-spacing: .03em; font-weight: 300;
    position: relative; height: 44px; overflow: hidden;
}
.topbar__track { position: absolute; top: 50%; left: 0; white-space: nowrap; animation: topbarTicker 15s linear infinite; }
.topbar__track span { padding: 0 28px; white-space: nowrap; }
@keyframes topbarTicker { from { transform: translate(100vw, -50%); } to { transform: translate(-60vw, -50%); } }
@keyframes topbarSlide { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* ================= Header ================= */
.site-header { background: var(--header-footer-bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.site-header__row {
    max-width: 1240px; margin: 0 auto; padding: 18px 24px;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    column-gap: 20px;
}
.logo {
    justify-self: center;
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    letter-spacing: .06em;
    color: var(--plum);
    font-weight: 600;
}
.logo__mark { width: 34px; height: 34px; flex: none; fill: var(--gold); }
.logo__img { height: 58px; width: auto; max-width: 260px; object-fit: contain; display: block; }
/* Logo files often ship with a solid white background rather than a
   transparent one, which shows as a pale rectangle against the tinted
   header. Multiply blends that white into the header colour. (A transparent
   PNG/SVG is still the better upload — this just stops it looking broken.) */
.site-header .logo__img { mix-blend-mode: multiply; }
.logo span { color: var(--rose-deep); }
.logo--light { color: var(--cream); }
.logo--light span { color: var(--gold-light); }
.logo--light .logo__mark { fill: var(--gold-light); }

.menu-toggle {
    justify-self: start; width: 42px; height: 42px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px; margin: 0; padding: 0;
    border-radius: 50%; transition: background .25s;
}
.menu-toggle:hover { background: var(--blush); }
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--plum); border-radius: 2px; transition: transform .3s, opacity .3s; }

.header-actions { justify-self: end; display: flex; align-items: center; gap: 4px; }
.icon-btn {
    position: relative; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    margin: 0; padding: 0; flex: none; border-radius: 50%; transition: background .25s;
}
.icon-btn:hover { background: var(--blush); }
.icon-btn svg { width: 23px; height: 23px; fill: none; stroke: var(--plum); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s, transform .25s; }
.icon-btn:hover svg { stroke: var(--rose-deep); transform: scale(1.06); }
/* Search, account, wishlist, and cart icons all share the exact same
   button size, stroke weight, and gap so they read as one consistent set. */
.cart-count {
    position: absolute; top: -9px; right: -11px; background: var(--rose-deep); color: #fff;
    font-size: .65rem; width: 17px; height: 17px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.cart-count.bump { animation: cartBump .5s var(--ease); }
@keyframes cartBump {
    0% { transform: scale(1); }
    35% { transform: scale(1.55); }
    65% { transform: scale(.85); }
    100% { transform: scale(1); }
}

.search-panel { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); border-top: 1px solid transparent; }
.search-panel.open { max-height: 90px; border-top: 1px solid var(--line); }
.search-panel__form { max-width: 1240px; margin: 0 auto; padding: 16px 24px; display: flex; gap: 10px; }
.search-panel__form input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 12px 18px; font-family: inherit; }
.search-panel__form button { background: var(--plum); color: #fff; padding: 0 22px; border-radius: 999px; }

.main-nav {
    display: flex; align-items: center; justify-content: center; gap: 34px;
    padding: 10px 24px 16px; border-top: 1px solid var(--line);
    font-size: .88rem; letter-spacing: .03em; text-transform: uppercase;
    box-sizing: border-box;
}
.main-nav > a, .nav-drop > a { padding: 6px 2px; position: relative; line-height: 1; display: inline-flex; align-items: center; color: var(--plum); font-weight: 600; }
.main-nav > a.active, .main-nav > a:hover, .nav-drop > a:hover { color: var(--rose-deep); }
.main-nav > a::after, .nav-drop > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold);
    transform: scaleX(0); transition: transform .3s var(--ease);
}
.main-nav > a:hover::after, .nav-drop > a:hover::after { transform: scaleX(1); }
.nav-drop { position: relative; }
.nav-drop__panel {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow); min-width: 190px; padding: 10px 0;
    opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
    text-transform: none; letter-spacing: 0;
}
.nav-drop:hover .nav-drop__panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-drop__panel a { display: block; padding: 8px 20px; font-size: .85rem; }
.nav-drop__panel a:hover { background: var(--blush); color: var(--rose-deep); }

/* ================= Mobile menu ================= */
.mobile-menu {
    position: fixed; top: 0; left: -320px; width: 300px; height: 100%; background: var(--cream);
    z-index: 80; padding: 20px; overflow-y: auto; transition: left .4s var(--ease); box-shadow: var(--shadow);
}
.mobile-menu.open { left: 0; }
.mobile-menu__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.mobile-menu__head button { font-size: 1.6rem; color: var(--ink); }
.mobile-menu a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.mobile-menu__sub { padding-left: 16px !important; font-size: .85rem !important; color: var(--muted); border-bottom: none !important; }
.mobile-menu__group { border-bottom: 1px solid var(--line); }
.mobile-menu__cat {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: none; font: inherit; font-size: .95rem; color: var(--ink);
    text-align: left; padding: 12px 4px; cursor: pointer;
}
.mobile-menu__chevron { width: 11px; height: 11px; transition: transform .3s var(--ease); flex: none; opacity: .65; }
.mobile-menu__cat.is-open .mobile-menu__chevron { transform: rotate(180deg); }
.mobile-menu__subs { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.mobile-menu__subs.is-open { max-height: 400px; }
.mobile-menu__subs .mobile-menu__sub { border-bottom: none !important; }
.mobile-menu__overlay {
    position: fixed; inset: 0; background: rgba(36,27,58,.45); z-index: 70;
    opacity: 0; pointer-events: none; transition: opacity .3s;
}
.mobile-menu__overlay.open { opacity: 1; pointer-events: auto; }

/* ================= Hero =================
   Each promo card's photo IS the card background (full-bleed, no separate
   text panel) — eyebrow/heading/subtext/button sit on top of a soft light
   (cream) glow that fades into the photo, so text stays dark & readable
   without a dark scrim hiding the image. */
.hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin: 28px auto; }
.hero__main {
    border-radius: var(--radius); background-color: var(--blush);
    position: relative; overflow: hidden; display: block; min-height: 380px;
    touch-action: pan-y;
}
/* Slides sit edge-to-edge and slide horizontally (translateX) instead of
   cross-fading, so one banner visibly pushes the next off-screen with no
   opacity seam. Only the active one accepts clicks so a parked slide's
   link can never be tapped. Positions/z-index are driven from JS (main.js)
   since looping back to slide 1 needs an instant, non-animated re-park on
   the entry side before the animated transform runs. */
.hero__slide {
    position: absolute; inset: 0; display: block;
    transform: translateX(100%); pointer-events: none;
    transition: transform .7s var(--ease);
}
.hero__slide.is-active { transform: translateX(0); pointer-events: auto; }
.hero__main-photo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: transform .7s var(--ease);
}
.hero__main:hover .hero__main-photo { transform: scale(1.06); }
.hero__main-copy {
    position: relative; z-index: 2; height: 100%;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
    padding: 40px; max-width: 58%;
}
.hero__h1 {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
    font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--ink);
    font-size: 2.3rem; line-height: 1.2; margin: .12em 0 .25em;
    text-shadow: 0 2px 18px rgba(250,247,241,.85), 0 1px 4px rgba(250,247,241,.9);
}
.hero__sub {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    max-width: 380px; color: var(--muted); margin-bottom: 1em;
    text-shadow: 0 2px 14px rgba(250,247,241,.85), 0 1px 4px rgba(250,247,241,.9);
}
/* A headline this long always fit inside .hero__main's fixed height (needed
   so the slider's photo keeps a consistent size) by capping to a few lines
   with an ellipsis instead of pushing the Shop Now button below the card. */
.hero__main .eyebrow { text-shadow: 0 2px 14px rgba(250,247,241,.85), 0 1px 4px rgba(250,247,241,.9); }
/* Dots sit ON the banner itself, bottom-right — clear of the Shop Now button
   at bottom-left. They must be a direct child of .hero__main (the only
   positioned ancestor here); in a non-positioned wrapper they escaped and
   rendered at the bottom of the whole hero section. */
.hero__dots {
    position: absolute; bottom: 16px; right: 18px; z-index: 5;
    display: flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.72); padding: 7px 11px; border-radius: 999px;
    box-shadow: 0 4px 14px -6px rgba(36,27,58,.5);
}
.hero__dots button {
    width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
    background: rgba(36,27,58,.35); cursor: pointer; transition: all .3s var(--ease);
}
.hero__dots button:hover { background: var(--rose); }
.hero__dots button.is-active { width: 24px; border-radius: 5px; background: var(--rose-deep); }

.btn--rect { border-radius: 6px; text-transform: none; letter-spacing: 0; font-size: .95rem; padding: 14px 26px; }
/* Without this, the button is a flex item inside a column flex container with the
   default align-items:stretch, so it stretches to the full width of the copy box
   instead of hugging its own text — that's what made it look oversized/misaligned. */
.hero__main-copy .btn--rect { align-self: flex-start; justify-content: center; }

.hero__side { display: flex; flex-direction: column; gap: 20px; }
.hero__side-card {
    flex: 1; border-radius: var(--radius); background-color: var(--paper);
    position: relative; overflow: hidden; min-height: 180px;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.hero__side-card:hover { transform: translateY(-9px); box-shadow: var(--shadow); }
.hero__side-card__copy {
    position: relative; z-index: 2; padding: 20px 22px; max-width: 78%;
    text-shadow: 0 2px 14px rgba(250,247,241,.85), 0 1px 4px rgba(250,247,241,.9);
}
.hero__side-card__copy h3 {
    font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--ink);
    font-size: 1.25rem; margin-bottom: .35em;
}
.hero__side-card__photo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: transform .5s var(--ease);
}
.hero__side-card:hover .hero__side-card__photo { transform: scale(1.09); }

@media (max-width: 880px) {
    .hero { grid-template-columns: 1fr; gap: 14px; margin: 16px auto; }
    .hero__main { min-height: 340px; }
    .hero__main-copy { padding: 22px; max-width: 78%; }
    .hero__h1 { font-size: 1.5rem; margin: .12em 0 .2em; -webkit-line-clamp: 3; }
    .hero__sub { font-size: .85rem; margin-bottom: .7em; -webkit-line-clamp: 2; }
    .hero__side-card { min-height: 190px; }
    .hero__side { gap: 14px; }
    .hero__side-card__copy { padding: 16px 18px; }
    .hero__side-card__copy h3 { font-size: 1.05rem; }
}
/* Mobile: keep all three cards compact enough to be seen together on one
   screen. They're near-identical in height — the slider card is only a
   little taller because it carries the Shop Now button. */
@media (max-width: 480px) {
    .hero { margin: 12px auto; gap: 12px; }
    .hero__side { gap: 12px; }
    .hero__main { min-height: 188px; }
    .hero__main-copy { padding: 14px 16px; max-width: 74%; }
    .hero__main-copy .eyebrow { font-size: .8rem; }
    .hero__h1 { font-size: 1.15rem; margin: .08em 0 .12em; -webkit-line-clamp: 2; }
    .hero__sub { font-size: .74rem; margin-bottom: .55em; line-height: 1.35; -webkit-line-clamp: 1; }
    .hero__main-copy .btn--rect { padding: 8px 16px; font-size: .78rem; }
    .hero__dots { bottom: 12px; right: 12px; gap: 6px; padding: 6px 9px; }
    .hero__dots button { width: 8px; height: 8px; }
    .hero__dots button.is-active { width: 20px; }
    .hero__side-card { min-height: 158px; }
    .hero__side-card__copy { padding: 14px 16px; max-width: 72%; }
    .hero__side-card__copy h3 { font-size: 1rem; margin-bottom: .3em; }
    .hero__side-card__copy .link-underline { font-size: .74rem; }
}

/* ================= Header — mobile ================= */
@media (max-width: 900px) {
    /* Hover-based dropdown nav doesn't work on touch — hamburger menu replaces it */
    .main-nav { display: none; }
    .site-header__row { padding: 14px 14px 14px 10px; column-gap: 10px; }
    /* Hamburger, then logo left-aligned right after it, then the icon group
       pushed all the way to the right edge — keeps the search icon well
       clear of the logo at every width. */
    .site-header__row { grid-template-columns: auto auto 1fr; }
    .logo { justify-self: start; font-size: 1.9rem; }
    .logo__img { height: 54px; max-width: 190px; }
    .menu-toggle { width: 36px; height: 36px; }
    .menu-toggle span { width: 19px; }
    .header-actions { gap: 0; }
    .icon-btn { width: 36px; height: 36px; }
    .icon-btn svg { width: 20px; height: 20px; stroke-width: 1.6; }
}
@media (max-width: 360px) {
    .logo__img { height: 46px; max-width: 160px; }
    .container { padding: 0 16px; }
    .logo { font-size: 1.4rem; }
}

/* ================= Section head ================= */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 40px 0 22px; flex-wrap: wrap; gap: 10px; }
.section-head h2 { font-size: 1.8rem; }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.see-all { font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; color: var(--rose-deep); border-bottom: 1px solid var(--rose-deep); padding-bottom: 2px; }

/* ================= Popular categories ================= */
.popular-cats { margin: 44px auto; }
.popular-cats .section-head h2 { font-family: 'Poppins', sans-serif; font-weight: 700; }
.popular-cats__row {
    display: grid;
    grid-template-columns: repeat(var(--cat-count, 6), 1fr);
    gap: 16px;
}
.cat-card { display: block; min-width: 0; }
.cat-card__media {
    display: block; width: 100%; aspect-ratio: 1/1; border-radius: var(--radius-sm);
    background-repeat: no-repeat; background-position: center; background-size: cover;
    margin-bottom: 12px; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    background-color: var(--blush);
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(79,174,114,.35);
}
.cat-card__media::after {
    content: ""; position: absolute; top: 8px; right: 8px; width: 16px; height: 16px;
    border-top: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold);
    opacity: .75;
}
.cat-card:hover .cat-card__media { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--gold); }
.cat-card__name {
    font-weight: 600; font-size: .95rem; color: var(--ink); letter-spacing: .01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}

.cat-card:nth-child(6n+1) .cat-card__media { background-color: #EDE4F9; }
.cat-card:nth-child(6n+2) .cat-card__media { background-color: #E1F3E3; }
.cat-card:nth-child(6n+3) .cat-card__media { background-color: #E6DCF6; }
.cat-card:nth-child(6n+4) .cat-card__media { background-color: #DCF0DE; }
.cat-card:nth-child(6n+5) .cat-card__media { background-color: #E9E0F8; }
.cat-card:nth-child(6n+6) .cat-card__media { background-color: #DEF1E4; }

@media (max-width: 880px) {
    .popular-cats__row {
        display: flex; grid-template-columns: none; overflow-x: auto; gap: 14px;
        scroll-snap-type: x proximity; padding-bottom: 4px;
        scrollbar-width: none; -ms-overflow-style: none;
    }
    .popular-cats__row::-webkit-scrollbar { display: none; }
    .cat-card { flex: 0 0 92px; scroll-snap-align: start; }
    .cat-card__name { white-space: normal; font-size: .82rem; }
}
@media (max-width: 480px) {
    .popular-cats__row { gap: 10px; }
    .cat-card { flex: 0 0 78px; }
}

/* =================================================
   Staggered entrance — a different motion per section
   Each homepage section reveals in its own way so scrolling feels varied.
   Distances stay modest and durations short so the effect is just as
   legible on a phone as on desktop.
================================================= */
.product-grid .product-card,
.popular-cats__row .cat-card {
    opacity: 0; transform: translateY(34px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}

/* 1. Best Selling — cards lift, then the big numeral slides in after them. */
.rank-rail .rank-card {
    opacity: 0; transform: translateY(30px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.rank-rail .rank-card__num {
    opacity: 0; transform: translateX(-26px);
    transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.reveal.in-view .rank-card__num { opacity: 1; transform: translateX(0); transition-delay: .28s; }

/* 2. Deals — tiles pop in from slightly small, and a light sweeps the hero. */
.deal-bento .deal-card {
    opacity: 0; transform: scale(.9);
    transition: opacity .5s var(--ease), transform .55s var(--ease);
}
.reveal.in-view .deal-card { transform: scale(1); }
.deal-card--hero .deal-card__link::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; z-index: 1;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
    transform: skewX(-18deg); pointer-events: none;
}
.reveal.in-view .deal-card--hero .deal-card__link::after { animation: dealSweep 1.5s var(--ease) .5s; }
@keyframes dealSweep { from { left: -60%; } to { left: 130%; } }

/* 3. New Arrivals — cards rise while the photo settles out of a slow zoom. */
.arrival-grid .arrival-card {
    opacity: 0; transform: translateY(38px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.arrival-grid .arrival-card__media img { transform: scale(1.16); transition: transform 1.1s var(--ease); }
.reveal.in-view .arrival-card__media img { transform: scale(1); }
.arrival-card__tag { transform: translateX(-100%); transition: transform .5s var(--ease); }
.reveal.in-view .arrival-card__tag { transform: translateX(0); transition-delay: .35s; }

/* 4. Signature — cards glide in from the right, matching the swipe rail,
      and the gold rule under each one draws itself out. */
.lux-rail .lux-card {
    opacity: 0; transform: translateX(46px);
    transition: opacity .6s var(--ease), transform .65s var(--ease);
}
.reveal.in-view .lux-card { transform: translateX(0); }
.lux-card__body::before { width: 0; transition: width .6s var(--ease); }
.reveal.in-view .lux-card__body::before { width: 28px; transition-delay: .45s; }

.reveal.in-view .product-card,
.reveal.in-view .rank-card,
.reveal.in-view .deal-card,
.reveal.in-view .arrival-card,
.reveal.in-view .lux-card,
.reveal.in-view .cat-card { opacity: 1; transform: translateY(0); }
/* The scale/translateX variants above re-declare their own transform, so
   restate them after the shared rule to keep them winning. */
.reveal.in-view .deal-card { transform: scale(1); }
.reveal.in-view .lux-card { transform: translateX(0); }
.product-grid .product-card:nth-child(1), .popular-cats__row .cat-card:nth-child(1) { transition-delay: .02s; }
.product-grid .product-card:nth-child(2), .popular-cats__row .cat-card:nth-child(2) { transition-delay: .08s; }
.product-grid .product-card:nth-child(3), .popular-cats__row .cat-card:nth-child(3) { transition-delay: .14s; }
.product-grid .product-card:nth-child(4), .popular-cats__row .cat-card:nth-child(4) { transition-delay: .20s; }
.product-grid .product-card:nth-child(5), .popular-cats__row .cat-card:nth-child(5) { transition-delay: .26s; }
.product-grid .product-card:nth-child(6), .popular-cats__row .cat-card:nth-child(6) { transition-delay: .32s; }
.product-grid .product-card:nth-child(7), .popular-cats__row .cat-card:nth-child(7) { transition-delay: .38s; }
.product-grid .product-card:nth-child(8), .popular-cats__row .cat-card:nth-child(8) { transition-delay: .44s; }
.product-grid .product-card:nth-child(n+9), .popular-cats__row .cat-card:nth-child(n+9) { transition-delay: .5s; }
.rank-rail .rank-card:nth-child(1), .deal-bento .deal-card:nth-child(1), .arrival-grid .arrival-card:nth-child(1), .lux-rail .lux-card:nth-child(1) { transition-delay: .02s; }
.rank-rail .rank-card:nth-child(2), .deal-bento .deal-card:nth-child(2), .arrival-grid .arrival-card:nth-child(2), .lux-rail .lux-card:nth-child(2) { transition-delay: .09s; }
.rank-rail .rank-card:nth-child(3), .deal-bento .deal-card:nth-child(3), .arrival-grid .arrival-card:nth-child(3), .lux-rail .lux-card:nth-child(3) { transition-delay: .16s; }
.rank-rail .rank-card:nth-child(4), .deal-bento .deal-card:nth-child(4), .arrival-grid .arrival-card:nth-child(4), .lux-rail .lux-card:nth-child(4) { transition-delay: .23s; }
.rank-rail .rank-card:nth-child(5), .deal-bento .deal-card:nth-child(5), .arrival-grid .arrival-card:nth-child(5), .lux-rail .lux-card:nth-child(5) { transition-delay: .30s; }
.rank-rail .rank-card:nth-child(n+6), .deal-bento .deal-card:nth-child(n+6), .arrival-grid .arrival-card:nth-child(n+6), .lux-rail .lux-card:nth-child(n+6) { transition-delay: .37s; }
/* Each card's numeral inherits its card's delay so the two stay in sync. */
.rank-rail .rank-card:nth-child(2) .rank-card__num { transition-delay: .35s; }
.rank-rail .rank-card:nth-child(3) .rank-card__num { transition-delay: .42s; }
.rank-rail .rank-card:nth-child(4) .rank-card__num { transition-delay: .49s; }
.rank-rail .rank-card:nth-child(n+5) .rank-card__num { transition-delay: .56s; }

/* ================= Product grid & card ================= */
.featured-section .section-head { align-items: center; }
.featured-section__title { display: flex; align-items: center; gap: 12px; }
.featured-section__title svg { width: 30px; height: 30px; fill: var(--gold); flex: none; }
.featured-section__title .eyebrow { display: block; margin: 0 0 2px; font-size: .78rem; }
.featured-section__title h2 { margin: 0; }
.product-section { margin: 10px auto 20px; }
.product-section--tinted { background: var(--paper); padding: 46px 0; margin-top: 46px; }
.product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.product-grid--wide { grid-template-columns: repeat(3, 1fr); }

.product-card {
    position: relative;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    transition: box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-10px) scale(1.015); border-color: var(--blush-deep); }
.product-card__wish {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.9);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(36,27,58,.15); transition: transform .25s var(--ease);
}
.product-card__wish svg { width: 17px; height: 17px; fill: none; stroke: var(--plum); stroke-width: 1.8; transition: fill .25s, stroke .25s; }
.product-card__wish:hover { transform: scale(1.12); }
.product-card__wish.is-active svg { fill: var(--rose-deep); stroke: var(--rose-deep); }
.product-card__wish.pop svg { animation: wishPop .4s var(--ease); }
@keyframes wishPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.product-card__media { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--blush); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.14); }
.product-card__media::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 2;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    transform: skewX(-18deg); transition: left .75s var(--ease);
}
.product-card:hover .product-card__media::after { left: 130%; }
.product-card__badge {
    position: absolute; top: 12px; left: 12px; background: var(--rose-deep); color: #fff;
    font-size: .72rem; padding: 4px 9px; border-radius: 999px; z-index: 2;
    animation: badgePulse 2.6s ease-in-out infinite;
}
@keyframes badgePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.product-card__quickadd {
    position: absolute; left: 0; right: 0; bottom: 0; background: var(--plum); color: #fff;
    text-align: center; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase;
    padding: 10px; transform: translateY(100%); transition: transform .35s var(--ease);
}
.product-card:hover .product-card__quickadd { transform: translateY(0); }
.product-card__body { padding: 16px 16px 18px; }
.product-card__cat { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--rose-deep); margin: 0 0 4px; }
.product-card__name { font-size: 1rem; margin: 0 0 6px; }
.product-card__stars { color: var(--gold); font-size: .8rem; margin-bottom: 8px; }
.product-card__stars span { color: var(--muted); }
.price-old { color: var(--muted); text-decoration: line-through; font-size: .85rem; margin-right: 8px; }
.price-now { font-weight: 600; color: var(--ink); font-size: 1.05rem; }

@media (max-width: 1080px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) {
    .product-grid, .product-grid--wide { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .product-grid--scroll {
        display: flex; grid-template-columns: none; overflow-x: auto; gap: 14px;
        scroll-snap-type: x proximity; padding-bottom: 4px;
        scrollbar-width: none; -ms-overflow-style: none;
    }
    .product-grid--scroll::-webkit-scrollbar { display: none; }
    .product-grid--scroll .product-card { flex: 0 0 62%; min-width: 190px; scroll-snap-align: start; }
}

/* =====================================================
   Homepage product sections — four deliberately distinct
   treatments so the page doesn't read as one repeated grid.
   1. Best Selling  — numbered chart rail (swipe on mobile)
   2. Best Deals    — bento mosaic, copy overlaid on photo
   3. New Arrivals  — calm editorial white cards (2-col mobile)
   4. Signature     — luxury dark shelf (swipe on mobile)
===================================================== */

/* ---------- 1. Best Selling: numbered chart rail ---------- */
.rank-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.rank-card { position: relative; }
.rank-card__media {
    position: relative; display: block; aspect-ratio: 3/4; overflow: hidden;
    border-radius: var(--radius); background: var(--blush);
}
.rank-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.rank-card:hover .rank-card__media img { transform: scale(1.07); }
/* The numeral is the signature of this section — oversized, half off the
   edge of the photo, so the row reads like a chart countdown. */
.rank-card__num {
    position: absolute; left: -6px; bottom: -14px; z-index: 2;
    font-family: 'Playfair Display', serif; font-weight: 700; font-size: 4.2rem; line-height: 1;
    color: #fff; text-shadow: 0 2px 14px rgba(36,27,58,.45); letter-spacing: -.03em;
}
.rank-card__off {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: var(--rose-deep); color: #fff; font-size: .72rem; padding: 4px 9px; border-radius: 999px;
}
.rank-card__wish {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(36,27,58,.15); transition: transform .25s var(--ease);
}
.rank-card__wish svg { width: 17px; height: 17px; fill: none; stroke: var(--plum); stroke-width: 1.8; }
.rank-card__wish:hover { transform: scale(1.12); }
.rank-card__wish.is-active svg { fill: var(--rose-deep); stroke: var(--rose-deep); }
.rank-card__wish.pop svg { animation: wishPop .4s var(--ease); }
.rank-card__body { padding: 14px 2px 0; }
.rank-card__cat { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rose-deep); margin: 0 0 4px; }
.rank-card__name { font-size: .98rem; margin: 0 0 8px; line-height: 1.35; }
.rank-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rank-card__add {
    width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--line);
    background: #fff; display: flex; align-items: center; justify-content: center;
    transition: background .25s var(--ease), border-color .25s var(--ease);
}
.rank-card__add svg { width: 15px; height: 15px; fill: none; stroke: var(--plum); stroke-width: 2; stroke-linecap: round; }
.rank-card__add:hover { background: var(--plum); border-color: var(--plum); }
.rank-card__add:hover svg { stroke: #fff; }

/* ---------- 2. Best Deals: bento mosaic ---------- */
.deals-section { background: var(--paper); padding: 42px 0 48px; margin: 46px auto 20px; }
.deal-bento {
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 168px; gap: 16px;
}
/* First deal spans a 2x2 block so the section has a clear focal point
   instead of six identical tiles. */
.deal-card--hero { grid-column: span 2; grid-row: span 2; }
.deal-card { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--blush); }
.deal-card__link { position: absolute; inset: 0; display: block; }
.deal-card__photo {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    transition: transform .6s var(--ease);
}
.deal-card:hover .deal-card__photo { transform: scale(1.07); }
.deal-card__veil {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(24,17,40,.86) 0%, rgba(24,17,40,.55) 34%, rgba(24,17,40,.12) 62%, rgba(24,17,40,0) 85%);
}
.deal-card__save {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: var(--rose-deep); color: #fff; border-radius: 10px;
    padding: 6px 9px; display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.deal-card__save b { font-size: .95rem; }
.deal-card__save i { font-style: normal; font-size: .58rem; letter-spacing: .1em; opacity: .85; }
.deal-card__copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px; display: block; }
.deal-card__cat { display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 4px; }
.deal-card__name { display: block; color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.3; margin-bottom: 6px; }
.deal-card__price { display: block; }
.deal-card__price .price-now { color: #fff; font-size: 1rem; }
.deal-card__price .price-old { color: rgba(255,255,255,.6); }
.deal-card__cta {
    display: inline-block; margin-top: 12px; background: #fff; color: var(--plum);
    font-size: .8rem; font-weight: 600; padding: 9px 18px; border-radius: 6px;
    transition: background .25s var(--ease), color .25s var(--ease);
}
.deal-card:hover .deal-card__cta { background: var(--gold-light); }
.deal-card--hero .deal-card__save { top: 16px; left: 16px; padding: 9px 13px; border-radius: 12px; }
.deal-card--hero .deal-card__save b { font-size: 1.5rem; }
.deal-card--hero .deal-card__copy { padding: 24px; }
.deal-card--hero .deal-card__name { font-size: 1.5rem; margin-bottom: 8px; }
.deal-card--hero .deal-card__price .price-now { font-size: 1.3rem; }
.deal-card__wish {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center; transition: transform .25s var(--ease);
}
.deal-card__wish svg { width: 17px; height: 17px; fill: none; stroke: var(--plum); stroke-width: 1.8; }
.deal-card__wish:hover { transform: scale(1.12); }
.deal-card__wish.is-active svg { fill: var(--rose-deep); stroke: var(--rose-deep); }
.deal-card__wish.pop svg { animation: wishPop .4s var(--ease); }

/* ---------- 3. New Arrivals: calm editorial cards ---------- */
.arrival-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.arrival-card { position: relative; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.arrival-card:hover { box-shadow: var(--shadow); transform: translateY(-6px); }
.arrival-card__media { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--blush); }
.arrival-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.arrival-card:hover .arrival-card__media img { transform: scale(1.08); }
.arrival-card__tag {
    position: absolute; left: 0; top: 14px; z-index: 2;
    background: var(--plum); color: #fff; font-size: .64rem; letter-spacing: .12em;
    text-transform: uppercase; padding: 5px 10px 5px 12px; border-radius: 0 999px 999px 0;
}
.arrival-card__wish {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center; transition: transform .25s var(--ease);
}
.arrival-card__wish svg { width: 16px; height: 16px; fill: none; stroke: var(--plum); stroke-width: 1.8; }
.arrival-card__wish:hover { transform: scale(1.12); }
.arrival-card__wish.is-active svg { fill: var(--rose-deep); stroke: var(--rose-deep); }
.arrival-card__wish.pop svg { animation: wishPop .4s var(--ease); }
.arrival-card__body { padding: 14px 15px 16px; border-top: 1px solid var(--line); }
.arrival-card__cat { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 5px; }
.arrival-card__name {
    font-size: .95rem; margin: 0 0 10px; line-height: 1.35;
    /* Capped at two lines so one long product name can't make its card
       taller than the rest of the row. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.arrival-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.arrival-card__add {
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--plum); background: transparent; color: var(--plum);
    font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
    padding: 6px 13px; border-radius: 999px;
    transition: background .25s var(--ease), color .25s var(--ease);
}
.arrival-card__add svg { display: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.arrival-card__add:hover { background: var(--plum); color: #fff; }

/* ---------- 4. Signature: luxury shelf ----------
   A fixed intro panel on the left and a single swipe rail on the right, so
   the products never wrap into a stranded half-empty row. */
.lux-section {
    background: linear-gradient(160deg, var(--plum) 0%, var(--plum-soft) 100%);
    padding: 52px 0 56px; margin: 46px auto 20px; position: relative; overflow: hidden;
}
.lux-shelf { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: start; }
.lux-intro { padding-top: 6px; }
.lux-intro__star { display: block; margin-bottom: 12px; }
.lux-intro__star svg { width: 26px; height: 26px; fill: var(--gold); }
.lux-intro .eyebrow { color: var(--gold); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.lux-intro h2 { color: var(--cream); font-size: 2rem; margin: 6px 0 14px; line-height: 1.2; }
.lux-intro p { color: rgba(255,255,255,.62); font-size: .9rem; line-height: 1.65; margin-bottom: 22px; }
.lux-intro__btn {
    display: inline-block; border: 1px solid var(--gold); color: var(--gold);
    font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
    padding: 11px 22px; border-radius: 999px;
    transition: background .3s var(--ease), color .3s var(--ease);
}
.lux-intro__btn:hover { background: var(--gold); color: var(--plum); }
.lux-rail {
    display: flex; gap: 20px; overflow-x: auto; padding-bottom: 6px;
    scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none;
}
.lux-rail::-webkit-scrollbar { display: none; }
.lux-card { position: relative; flex: 0 0 232px; scroll-snap-align: start; }
.lux-card__media {
    position: relative; display: block; aspect-ratio: 4/5; overflow: hidden;
    border-radius: var(--radius); background: rgba(255,255,255,.06);
}
.lux-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.lux-card:hover .lux-card__media img { transform: scale(1.07); }
.lux-card__wish {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%; background: rgba(20,15,32,.5);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; transition: transform .25s var(--ease);
}
.lux-card__wish svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.8; }
.lux-card__wish:hover { transform: scale(1.12); }
.lux-card__wish.is-active svg { fill: var(--gold-light); stroke: var(--gold-light); }
.lux-card__wish.pop svg { animation: wishPop .4s var(--ease); }
/* Thin gold rule between photo and copy — the one "signature" detail, kept
   off the photo itself so it never fights with a busy product shot. */
.lux-card__body { padding: 14px 2px 0; position: relative; }
.lux-card__body::before {
    content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 2px; background: var(--gold);
}
.lux-card__cat { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0 0 5px; }
.lux-card__name { font-size: .95rem; margin: 0 0 8px; color: var(--cream); line-height: 1.35; }
.lux-card__price .price-now { color: #fff; }
.lux-card__price .price-old { color: rgba(255,255,255,.45); }

/* =====================================================
   Hover states — a different reaction per section
   Every card also gets cursor:pointer so the hand cursor shows anywhere on
   the card, not only over the text links inside it.
===================================================== */
.rank-card, .deal-card, .arrival-card, .lux-card, .trend-item, .trend-lead { cursor: pointer; }
.rank-card__add, .arrival-card__add, .rank-card__wish, .deal-card__wish,
.arrival-card__wish, .lux-card__wish { cursor: pointer; }

/* 1. Best Selling — the whole card lifts and the chart numeral jumps up
      and turns gold, like a position moving up the chart. */
.rank-card { transition: transform .4s var(--ease); }
/* The reveal rule (.reveal.in-view .rank-card) is more specific than a plain
   :hover, so the lift has to be restated at that weight or it never applies. */
.rank-card:hover,
.reveal.in-view .rank-card:hover { transform: translateY(-8px); }
.rank-rail .rank-card__num { transition: opacity .5s var(--ease), transform .6s var(--ease), color .35s var(--ease); }
.rank-card:hover .rank-card__num,
.reveal.in-view .rank-card:hover .rank-card__num {
    transform: translateY(-9px) scale(1.14); color: var(--gold-light); transition-delay: 0s;
}
.rank-card:hover .rank-card__media img { transform: scale(1.09); }
.rank-card__add { transition: background .25s var(--ease), border-color .25s var(--ease), transform .35s var(--ease); }
.rank-card:hover .rank-card__add { transform: rotate(90deg); }

/* 2. Deals — energetic: deeper zoom, a light sweeping across the tile, and
      the discount badge kicks. */
.deal-card__link::before {
    content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; z-index: 1;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
    transform: skewX(-18deg); pointer-events: none; transition: left .8s var(--ease);
}
.deal-card:hover .deal-card__link::before { left: 130%; }
.deal-card:hover .deal-card__photo { transform: scale(1.12); }
.deal-card__save { transition: transform .35s var(--ease); }
.deal-card:hover .deal-card__save { transform: scale(1.14) rotate(-5deg); }
.deal-card__copy { transition: transform .35s var(--ease); }
.deal-card:hover .deal-card__copy,
.reveal.in-view .deal-card:hover .deal-card__copy { transform: translateY(-4px); }

/* 3. New Arrivals — calm: no bounce, the frame turns gold and the Add
      button fills in from transparent. */
.arrival-card { transition: box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease); }
.arrival-card:hover,
.reveal.in-view .arrival-card:hover { transform: translateY(-6px); border-color: var(--gold); }
.arrival-card:hover .arrival-card__media img { transform: scale(1.06); }
.arrival-card__add { transition: background .3s var(--ease), color .3s var(--ease), letter-spacing .3s var(--ease), transform .3s var(--ease); }
.arrival-card:hover .arrival-card__add { background: var(--plum); color: #fff; letter-spacing: .12em; }
/* On mobile the button is a round icon, so widen-the-letters doesn't apply. */
@media (max-width: 680px) {
    .arrival-card:hover .arrival-card__add { letter-spacing: normal; transform: rotate(90deg); }
}
.arrival-card__tag { transition: transform .5s var(--ease), background .3s var(--ease); }
.arrival-card:hover .arrival-card__tag { background: var(--rose-deep); }

/* 4. Signature — luxury: no lift at all. The photo settles, a soft gold
      glow appears, and the gold rule draws out across the full width. */
.lux-card__media { transition: box-shadow .45s var(--ease); }
.lux-card:hover .lux-card__media { box-shadow: 0 18px 42px -20px rgba(190,239,201,.55); }
.lux-card:hover .lux-card__media img { transform: scale(1.05); }
.lux-card:hover .lux-card__body::before,
.reveal.in-view .lux-card:hover .lux-card__body::before { width: 100%; transition-delay: 0s; }
.lux-card__name { transition: color .3s var(--ease); }
.lux-card:hover .lux-card__name { color: var(--gold-light); }

/* 5. Trending — the row nudges sideways like a list item being picked. */
.trend-item { transition: background .25s var(--ease), transform .3s var(--ease); }
.trend-item:hover { transform: translateX(7px); }
.trend-item__thumb { transition: transform .35s var(--ease); }
.trend-item:hover .trend-item__thumb { transform: scale(1.1) rotate(-3deg); }
.trend-item__rank { transition: color .3s var(--ease); }
.trend-lead__copy { transition: transform .4s var(--ease); }
.trend-lead:hover .trend-lead__copy { transform: translateY(-5px); }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
    .rank-rail { grid-template-columns: repeat(3, 1fr); }
    .arrival-grid { grid-template-columns: repeat(3, 1fr); }
    .lux-shelf { grid-template-columns: 260px 1fr; gap: 26px; }
    .lux-intro h2 { font-size: 1.7rem; }
    .deal-bento { grid-auto-rows: 150px; }
}
@media (max-width: 860px) {
    /* Intro stacks above the rail; the rail still runs edge-to-edge so it
       reads as a shelf you swipe rather than a wrapped grid. */
    .lux-shelf { grid-template-columns: 1fr; gap: 22px; }
    .lux-intro p { max-width: 520px; }
}

/* ---------- Mobile ----------
   Mixed on purpose: the two "browse a shelf" sections (Best Selling,
   Signature) become swipe rails, while Deals stays a stacked mosaic and
   New Arrivals a 2-column grid — so scrolling the phone never feels like
   the same block four times. */
@media (max-width: 680px) {
    .rank-rail {
        display: flex; overflow-x: auto; gap: 14px; padding-bottom: 4px;
        scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none;
    }
    .rank-rail::-webkit-scrollbar { display: none; }
    .rank-card { flex: 0 0 58%; min-width: 175px; scroll-snap-align: start; }
    .rank-card__num { font-size: 3rem; left: -3px; bottom: -10px; }
    .rank-card__name { font-size: .9rem; }

    .deals-section { padding: 30px 0 34px; margin-top: 30px; }
    .deal-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 12px; }
    .deal-card--hero { grid-column: span 2; grid-row: span 2; }
    .deal-card--hero .deal-card__copy { padding: 16px; }
    .deal-card--hero .deal-card__name { font-size: 1.15rem; }
    .deal-card--hero .deal-card__price .price-now { font-size: 1.05rem; }
    .deal-card--hero .deal-card__save b { font-size: 1.15rem; }
    .deal-card__copy { padding: 12px; }
    /* Small tiles are too short for cat + name + price without the copy
       running up into the discount badge — drop the category on tiles only. */
    .deal-card--tile .deal-card__cat { display: none; }
    .deal-card__name { font-size: .82rem; }
    .deal-card__price .price-now { font-size: .88rem; }
    .deal-card__price .price-old { font-size: .72rem; }
    .deal-card__cta { padding: 8px 15px; font-size: .76rem; margin-top: 10px; }
    .deal-card--tile .deal-card__save { padding: 4px 7px; border-radius: 8px; }
    .deal-card--tile .deal-card__save b { font-size: .8rem; }
    .deal-card--tile .deal-card__save i { font-size: .5rem; }
    .deal-card__wish { width: 28px; height: 28px; top: 10px; right: 10px; }
    .deal-card__wish svg { width: 15px; height: 15px; }

    /* The card was running very tall on a phone: a 4:5 photo, a name free to
       wrap to three lines, and a full-width Add button on its own row. Now
       the photo is square, the name is clamped, and Add collapses to a small
       round + button sitting beside the price on one line. */
    .arrival-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .arrival-card__media { aspect-ratio: 1/1; }
    .arrival-card__body { padding: 10px 11px 12px; }
    .arrival-card__cat { font-size: .58rem; margin-bottom: 3px; }
    .arrival-card__name { font-size: .82rem; margin-bottom: 8px; line-height: 1.3; }
    .arrival-card__foot { flex-direction: row; align-items: center; gap: 6px; }
    .arrival-card__price .price-now { font-size: .92rem; }
    .arrival-card__price .price-old { font-size: .72rem; margin-right: 5px; }
    .arrival-card__add { width: 30px; height: 30px; padding: 0; border-radius: 50%; }
    .arrival-card__add svg { display: block; }
    .arrival-card__add-label { display: none; }
    .arrival-card__tag { font-size: .58rem; padding: 4px 8px 4px 9px; top: 10px; }
    .arrival-card__wish { width: 27px; height: 27px; top: 9px; right: 9px; }
    .arrival-card__wish svg { width: 14px; height: 14px; }

    .lux-section { padding: 34px 0 38px; margin-top: 30px; }
    .lux-intro h2 { font-size: 1.5rem; }
    .lux-intro p { font-size: .85rem; margin-bottom: 18px; }
    .lux-intro__btn { padding: 10px 18px; font-size: .75rem; }
    .lux-rail { gap: 14px; }
    .lux-card { flex: 0 0 56%; min-width: 168px; }
    .lux-card__name { font-size: .88rem; }
}
@media (max-width: 400px) {
    .deal-bento { grid-auto-rows: 136px; }
    .deal-card__name { font-size: .78rem; }
}

/* =================================================
   Trending — contained panel
   Stays inside the page container (not a full-bleed band) and uses a list
   layout no other section has: one large #1 feature beside a compact ranked
   list. On a phone the list is still a list, so nothing needs swiping.
================================================= */
.trending { margin: 46px auto; }
.trend-panel {
    display: grid; grid-template-columns: 1.05fr 1fr;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; box-shadow: 0 24px 50px -40px rgba(36,27,58,.5);
}
.trend-lead { position: relative; display: block; min-height: 0; overflow: hidden; }
.trend-lead__photo {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    transition: transform .7s var(--ease);
}
.trend-lead:hover .trend-lead__photo { transform: scale(1.06); }
.trend-lead__veil {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(24,17,40,.88) 0%, rgba(24,17,40,.45) 38%, rgba(24,17,40,0) 68%);
}
.trend-lead__rank {
    position: absolute; top: 20px; left: 20px; z-index: 2;
    background: var(--rose-deep); color: #fff; font-weight: 700; font-size: .9rem;
    padding: 7px 14px; border-radius: 999px; letter-spacing: .02em;
}
.trend-lead__copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px; }
.trend-lead__cat { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 6px; }
.trend-lead__name { display: block; color: #fff; font-weight: 700; font-size: 1.45rem; line-height: 1.25; margin-bottom: 8px; }
.trend-lead__price { display: block; color: #fff; font-size: 1.15rem; font-weight: 600; }

/* Grid items default to min-width:auto, so the nowrap product names in the
   list would push this column wider than the panel and clip the prices. */
.trend-side { padding: 26px 26px 20px; display: flex; flex-direction: column; min-width: 0; }
.trend-side__head { margin-bottom: 16px; }
.trending__live {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--blush); border-radius: 999px;
    padding: 5px 13px 5px 10px; font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--rose-deep);
}
.trending__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--rose-deep); animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
.trend-side__head h2 { font-size: 1.7rem; margin: 10px 0 4px; }
.trend-side__head p { color: var(--muted); font-size: .86rem; }

/* The list scrolls itself bottom-to-top on a loop. This viewport must be a
   FIXED window — with flex:1/min-height it grew to fit all the duplicated
   rows, which blew up the panel height and left dead space at the end of the
   loop. Its height is deliberately shorter than one full pass of the list
   (5 rows) so the -50% reset always lands on filled rows. */
.trend-list-view {
    position: relative; overflow: hidden; flex: none; height: 300px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.trend-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; animation: trendVScroll 26s linear infinite; }
.trend-list-view:hover .trend-list { animation-play-state: paused; }
@keyframes trendVScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.trend-item {
    display: flex; align-items: center; gap: 13px; padding: 11px 8px;
    border-top: 1px solid var(--line); border-radius: 8px;
    transition: background .25s var(--ease);
}
.trend-list li:first-child .trend-item { border-top: none; }
.trend-item:hover { background: var(--paper); }
.trend-item__rank {
    flex: none; width: 26px; font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: 1.05rem; color: var(--blush-deep); text-align: center;
}
.trend-item:hover .trend-item__rank { color: var(--gold); }
.trend-item__thumb {
    width: 48px; height: 48px; flex: none; border-radius: 10px;
    background-size: cover; background-position: center; background-color: var(--blush);
}
.trend-item__text { flex: 1; min-width: 0; }
.trend-item__cat { display: block; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 2px; }
.trend-item__name {
    display: block; font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trend-item__price { flex: none; font-size: .92rem; font-weight: 700; color: var(--ink); }

@media (max-width: 880px) {
    .trend-panel { grid-template-columns: 1fr; }
    .trend-lead { min-height: 250px; }
    .trend-lead__copy { padding: 18px; }
    .trend-lead__name { font-size: 1.2rem; }
    .trend-lead__price { font-size: 1rem; }
    .trend-side { padding: 20px 16px 14px; }
    .trend-side__head h2 { font-size: 1.4rem; }
    .trend-list-view { height: 280px; }
    .trend-item { padding: 10px 4px; gap: 11px; }
    .trend-item__thumb { width: 42px; height: 42px; }
    .trend-item__name { font-size: .84rem; }
    .trend-item__price { font-size: .85rem; }
    .trend-item__rank { width: 20px; font-size: .95rem; }
}

/* ================= Reels — shoppable video shelf ================= */
.reels { margin: 60px auto; }
.reels__tabs { display: flex; gap: 10px; margin: 4px 0 22px; flex-wrap: wrap; }
.reels__tab {
    font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--ink);
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: 9px 20px; cursor: pointer; transition: all .25s var(--ease);
}
.reels__tab:hover { border-color: var(--gold); }
.reels__tab.is-active { background: var(--plum); border-color: var(--plum); color: #fff; }

.reels__row {
    display: flex; gap: 18px; overflow-x: auto; padding-bottom: 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none;
}
.reels__row::-webkit-scrollbar { display: none; }
.reels__row[hidden] { display: none; }
.reel-card { flex: 0 0 auto; width: 200px; min-width: 200px; scroll-snap-align: start; }
.reel-card__media {
    display: block; aspect-ratio: 3/4; border-radius: var(--radius-sm);
    background-size: cover; background-position: center; position: relative;
    overflow: hidden; margin-bottom: 10px;
}
.reel-card__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(36,27,58,.35) 0%, rgba(36,27,58,0) 45%);
}
.reel-card__play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 46px; height: 46px; z-index: 2; transition: transform .3s var(--ease);
}
.reel-card__play svg { width: 100%; height: 100%; }
.reel-card:hover .reel-card__play { transform: translate(-50%,-50%) scale(1.12); }

.reel-card__product {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 8px 10px; transition: border-color .3s;
}
.reel-card__product:hover { border-color: var(--gold); }
.reel-card__product-img {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 6px;
    background-size: cover; background-position: center; background-color: var(--blush);
}
.reel-card__product-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reel-card__product-name {
    font-size: .78rem; color: var(--ink); font-weight: 500; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.6em;
}
.reel-card__product-price { display: flex; align-items: baseline; gap: 6px; }
.reel-card__product-price .price-now { font-size: .84rem; font-weight: 700; }
.reel-card__product-price .price-old { font-size: .72rem; }

/* ================= Reviews — auto-scrolling marquee ================= */
.reviews { margin: 60px auto; }
.reviews__track-wrap { overflow: hidden; }
.reviews__track { display: flex; gap: 20px; width: max-content; padding: 4px 24px 8px; animation: reviewScroll 38s linear infinite; }
.reviews__track--static { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
@keyframes reviewScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.review-card {
    flex: 0 0 340px; width: 340px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px; box-shadow: 0 2px 10px rgba(36,27,58,.04);
    display: flex; flex-direction: column; min-height: 240px;
}
.review-card p { flex: 1; }
.review-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.review-card__name { font-weight: 700; color: var(--ink); font-size: .98rem; }
.review-card__verified { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: #2E90E5; font-weight: 500; white-space: nowrap; }
.review-card__verified svg { width: 15px; height: 15px; flex: none; }
.review-card__stars { color: var(--gold); margin-bottom: 10px; letter-spacing: 1px; }
.review-card p { color: var(--ink); margin-bottom: 16px; font-size: .95rem; line-height: 1.6; }

.review-card__product {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 10px 12px; transition: border-color .3s;
}
.review-card__product:hover { border-color: var(--gold); }
.review-card__product-img {
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: 8px;
    background-size: cover; background-position: center; background-color: var(--blush);
}
.review-card__product-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.review-card__product-name {
    font-size: .82rem; color: var(--ink); font-weight: 500; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.review-card__product-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.review-card__product-price .price-now { font-weight: 700; font-size: .92rem; color: var(--ink); }
.review-card__product-price .price-old { font-size: .78rem; color: var(--muted); text-decoration: line-through; }
.review-card__save { font-size: .76rem; color: var(--rose-deep); font-weight: 600; }

@media (max-width: 680px) { .review-card { flex-basis: 280px; width: 280px; } }

/* ================= Trust badges ================= */
.trust-badges { background: linear-gradient(180deg, var(--blush) 0%, var(--cream) 100%); padding: 54px 0; margin-top: 20px; }
.trust-badges__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.trust-badge svg { width: 46px; height: 46px; stroke: var(--rose-deep); fill: none; stroke-width: 1.4; margin-bottom: 14px; }
.trust-badge svg .check { stroke: var(--gold); }
.trust-badge h3 { font-size: 1.05rem; margin-bottom: 6px; }
.trust-badge p { font-size: .84rem; color: var(--muted); margin: 0; }
@media (max-width: 880px) { .trust-badges__grid { grid-template-columns: repeat(2, 1fr); } }

/* ================= Footer ================= */
.site-footer { background: var(--plum); color: #E4D5DE; padding: 54px 0 0; margin-top: 20px; position: relative; overflow: hidden; }
.footer-flourish {
    position: absolute; bottom: 0; width: 160px; height: 210px; color: var(--gold);
    pointer-events: none; z-index: 0;
}
.footer-flourish--left { left: 0; }
.footer-flourish--right { right: 0; transform: scaleX(-1); }
.footer-flourish svg { width: 100%; height: 100%; display: block; }
.site-footer > .container, .site-footer .footer-bottom { position: relative; z-index: 1; }
@media (max-width: 700px) { .footer-flourish { width: 100px; height: 140px; opacity: .7; } }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 26px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); }
/* Brand, Policies, Company, and Contact all sit in a single row of four
   equal-ish columns on desktop (Shop was removed, so this is now 4 groups
   total); on mobile they stack, each centered. */
.footer-col--contact { text-align: center; }
.footer-col--brand p { color: #D6B8C7; max-width: 260px; margin: 14px 0 18px; font-size: .9rem; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
    width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #E4D5DE;
    display: flex; align-items: center; justify-content: center; font-size: .75rem; text-transform: uppercase;
    transition: background .3s, border-color .3s, color .3s;
}
.footer-social a:hover { background: var(--rose-deep); border-color: var(--rose-deep); color: #fff; }
.footer-col h4 { color: var(--gold-light); font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col a, .footer-col p { display: block; color: #D6B8C7; font-size: .88rem; margin-bottom: 10px; }
.footer-col a:hover { color: var(--gold-light); }
/* The generic ".footer-col a { display: block }" rule above has higher
   specificity than ".logo { display: inline-flex }", so without this the
   brand logo link would collapse to a block box and ignore text-align:
   center on mobile. Restore its inline-flex layout explicitly. */
.footer-col--brand .logo { display: inline-flex; }
.footer-col--contact p { margin-left: auto; margin-right: auto; }
.footer-bottom { text-align: center; padding: 20px; font-size: .8rem; color: #A98FA0; }
.footer-credit { margin-top: 4px; font-size: .78rem; color: #A98FA0; }
.footer-credit a { color: var(--gold-light); font-weight: 600; }
.footer-credit a:hover { color: #fff; }
@media (max-width: 880px) {
    .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
    .footer-col--brand, .footer-col--contact { grid-column: 1 / -1; text-align: center; }
    .footer-col--brand p { margin-left: auto; margin-right: auto; }
    .footer-social { justify-content: center; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-col--brand, .footer-col--contact { grid-column: auto; }
}

/* ================= Shop page ================= */
.shop-hero { padding: 30px 0 10px; }
.breadcrumb { font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.breadcrumb a { color: var(--rose-deep); }
.shop-hero h1 { font-size: 2.1rem; }
.shop-hero__note { color: var(--muted); }

.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 34px; margin: 24px auto 60px; align-items: start; }
.shop-filters h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.filter-list > li { margin-bottom: 4px; }
.filter-list a { display: block; padding: 8px 0; font-size: .92rem; border-bottom: 1px solid var(--line); }
.filter-list a.active, .filter-list a:hover { color: var(--rose-deep); }
.filter-list__sub { padding-left: 14px; }
.filter-list__sub a { font-size: .85rem; color: var(--muted); border-bottom: none; padding: 6px 0; }
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: .88rem; color: var(--muted); flex-wrap: wrap; gap: 10px; }
.sort-form { display: flex; align-items: center; gap: 8px; }
.sort-form select { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; font-family: inherit; background: #fff; }
.empty-note { padding: 60px 0; text-align: center; color: var(--muted); }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 36px; }
.pagination a {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 50%; font-size: .85rem; transition: background .3s, color .3s;
}
.pagination a.active, .pagination a:hover { background: var(--rose-deep); color: #fff; border-color: var(--rose-deep); }

.shop-filters__toggle { display: none; }

@media (max-width: 880px) {
    .shop-layout { grid-template-columns: 1fr; }
    /* Collapsed by default so products show right away on mobile instead of
       the whole category list pushing them down the page — tap to expand. */
    .shop-filters { margin-bottom: 20px; }
    .shop-filters__toggle {
        display: flex; align-items: center; justify-content: space-between; width: 100%;
        padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
        font-weight: 600; font-size: .92rem; color: var(--ink);
    }
    .shop-filters__toggle svg { width: 14px; height: 14px; transition: transform .3s var(--ease); flex: none; }
    .shop-filters__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
    .shop-filters__panel { max-height: 0; overflow: hidden; }
    .shop-filters__panel.is-open { max-height: 1000px; margin-top: 10px; }
    .shop-filters h4 { display: none; }
}

/* ================= Product detail ================= */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; margin: 20px auto 60px; min-width: 0; }
.product-detail__gallery, .product-detail__info { min-width: 0; }
.product-detail__main { aspect-ratio: 1/1; border-radius: var(--radius); background-size: cover; background-position: center; position: relative; }
.product-detail__thumbs { display: flex; gap: 12px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.product-detail__thumbs span { width: 70px; height: 70px; flex-shrink: 0; border-radius: var(--radius-sm); background-size: cover; background-position: center; cursor: pointer; border: 2px solid transparent; }
.product-detail__thumbs span.active { border-color: var(--gold); }
.product-detail__info h1 { font-size: 1.9rem; margin-bottom: .2em; }
.product-detail__price { margin: 16px 0; display: flex; align-items: center; gap: 12px; font-size: 1.1rem; flex-wrap: wrap; }
.product-detail__price .price-now { font-size: 1.6rem; }
.save-tag { background: var(--blush); color: var(--rose-deep); font-size: .78rem; padding: 4px 10px; border-radius: 999px; }
.product-detail__short { color: var(--muted); margin-bottom: 10px; }
.product-detail__desc { color: var(--ink); margin-bottom: 26px; }
.product-detail__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 30px; }
.product-detail__buttons { display: flex; gap: 12px; flex: 1; min-width: 220px; }
.product-detail__buttons .btn { flex: 1; justify-content: center; white-space: nowrap; }
.qty-box { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; }
.qty-box button { width: 40px; height: 46px; font-size: 1.1rem; }
.qty-box input { width: 46px; border: none; text-align: center; font-family: inherit; -moz-appearance: textfield; }
.qty-box input::-webkit-outer-spin-button, .qty-box input::-webkit-inner-spin-button { -webkit-appearance: none; }
@media (max-width: 420px) {
    .product-detail__actions { flex-direction: column; align-items: stretch; }
    .product-detail__buttons { min-width: 0; }
}
.product-detail__meta { border-top: 1px solid var(--line); padding-top: 16px; }
.product-detail__meta li { font-size: .88rem; margin-bottom: 8px; color: var(--muted); }
.product-detail__meta a { color: var(--rose-deep); }
.product-detail__trust { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 20px; font-size: .8rem; color: var(--rose-deep); }
.product-detail__trust span::before { content: "✓ "; color: var(--gold); }

@media (max-width: 880px) { .product-detail { grid-template-columns: 1fr; } }

.product-description { margin: 0 auto 60px; }
.product-description h2 { font-size: 1.5rem; margin-bottom: 14px; }
.product-description .product-detail__desc { color: var(--ink); }

/* ================= Buy Now / checkout modal ================= */
.checkout-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.checkout-modal[hidden] { display: none; }
.checkout-modal__overlay { position: absolute; inset: 0; background: rgba(36,27,58,.55); }
.checkout-modal__box {
    position: relative; background: var(--cream, #fff); border-radius: var(--radius); width: 100%; max-width: 760px;
    max-height: 90vh; overflow-y: auto; padding: 30px; box-shadow: var(--shadow);
}
.checkout-modal__close {
    position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1;
    background: var(--blush); color: var(--plum); z-index: 1;
}
.checkout-modal__body .checkout-layout { grid-template-columns: 1fr; margin: 0; min-width: 0; }
.checkout-modal__body .checkout-form { padding: 0; border: none; min-width: 0; }
.checkout-modal__body .checkout-summary { position: static; min-width: 0; }
.checkout-modal__body .form-errors { color: #b3261e; margin-bottom: 14px; }
@media (max-width: 600px) {
    .checkout-modal { padding: 0; }
    .checkout-modal__box { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; }
}

/* ================= Cart page ================= */
.cart-page { display: grid; grid-template-columns: 1fr 320px; gap: 34px; margin: 20px auto 70px; align-items: start; }
.cart-row { display: grid; grid-template-columns: 70px 1fr auto auto auto; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-row img { width: 70px; height: 70px; object-fit: cover; border-radius: var(--radius-sm); }
.cart-row__info a { font-family: 'Playfair Display', serif; }
.cart-row__info p { color: var(--muted); font-size: .85rem; margin: 4px 0 0; }
.qty-box--sm button { width: 30px; height: 36px; }
.qty-box--sm input { width: 36px; }
.cart-row__total { font-weight: 600; }
.cart-row__remove { font-size: 1.3rem; color: var(--muted); }
.cart-row__remove:hover { color: var(--rose-deep); }
.cart-summary { background: var(--paper); border-radius: var(--radius); padding: 26px; position: sticky; top: 100px; }
.cart-summary__row { display: flex; justify-content: space-between; margin: 16px 0; font-size: 1.05rem; }
.cart-summary__note { font-size: .8rem; color: var(--muted); margin-bottom: 16px; }
@media (max-width: 780px) {
    .cart-page { grid-template-columns: 1fr; }
    .cart-row { grid-template-columns: 54px 1fr; grid-template-areas: "img info" "img qty" "img total"; row-gap: 6px; }
    .cart-row img { grid-area: img; }
    .cart-row__info { grid-area: info; }
    .qty-box--sm { grid-area: qty; }
    .cart-row__total { grid-area: total; }
    .cart-row__remove { position: absolute; right: 0; top: 16px; }
    .cart-row { position: relative; }
}

/* ================= Checkout page ================= */
.checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 34px; margin: 20px auto 70px; align-items: start; min-width: 0; }
.checkout-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; min-width: 0; }
.checkout-summary { min-width: 0; }
.checkout-form h3 { margin-bottom: 18px; }
.checkout-form label {
    display: block; font-size: .85rem; font-weight: 600; color: var(--ink);
    margin-bottom: 16px;
}
.checkout-form input:not([type="radio"]):not([type="checkbox"]),
.checkout-form textarea, .checkout-form select {
    display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font: inherit; font-size: .92rem; color: var(--ink); background: var(--paper);
    transition: border-color .25s;
}
.checkout-form input:focus, .checkout-form textarea:focus, .checkout-form select:focus { outline: none; border-color: var(--gold); }
.checkout-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .checkout-form__row { grid-template-columns: 1fr; } }
.checkout-payment { margin: 22px 0; padding-top: 18px; border-top: 1px solid var(--line); }
.checkout-form label.checkout-payment__option {
    display: flex; align-items: center; gap: 10px; font-weight: 500;
    background: var(--paper); padding: 14px 16px; border-radius: var(--radius-sm); cursor: pointer;
    margin-bottom: 10px; width: auto;
}
.checkout-form label.checkout-payment__option input[type="radio"] {
    width: auto; margin: 0; flex: none;
}
.checkout-payment__row { display: flex; gap: 10px; }
.checkout-payment__row .checkout-payment__option { flex: 1; margin-bottom: 0; padding: 14px 10px; justify-content: center; }
.checkout-payment__badge { display: block; flex: none; }
.checkout-payment__badge--img { object-fit: contain; height: 24px; width: auto; }
@media (max-width: 480px) { .checkout-payment__row { flex-wrap: wrap; } .checkout-payment__row .checkout-payment__option { flex: 1 1 30%; } }
.checkout-payment__box {
    background: var(--blush); border: 1px dashed var(--gold); border-radius: var(--radius-sm);
    padding: 14px 16px; margin: 10px 0 16px; font-size: .88rem; color: var(--ink);
}
.checkout-payment__box strong { font-size: 1.05rem; letter-spacing: .5px; }
.checkout-payment__extra { margin-top: 12px; }
.checkout-summary {
    background: var(--paper); border-radius: var(--radius); padding: 26px; position: sticky; top: 100px;
}
.checkout-summary h3 { margin-bottom: 16px; }
.checkout-summary__items { max-height: 320px; overflow-y: auto; margin-bottom: 16px; }
.checkout-summary__item {
    display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.checkout-summary__item img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.checkout-summary__item div { flex: 1; min-width: 0; }
.checkout-summary__item p { font-size: .85rem; color: var(--ink); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checkout-summary__item span { font-size: .78rem; color: var(--muted); }
.checkout-summary__item strong { font-size: .88rem; flex: none; }
.checkout-summary__row { display: flex; justify-content: space-between; margin: 12px 0; font-size: .95rem; }
.checkout-summary__row--total { font-size: 1.15rem; font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.form-errors { background: #FDEDEE; border: 1px solid #E8A5AC; color: #A23B44; border-radius: var(--radius-sm); padding: 14px 18px; margin: 20px 0; font-size: .9rem; }
.form-errors p { margin: 4px 0; }

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

/* ================= Policies page ================= */
.policies-page { display: grid; grid-template-columns: 220px 1fr; gap: 40px; margin: 20px auto 80px; align-items: start; }
.policies-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 100px; }
.policies-nav a {
    padding: 10px 14px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500;
    color: var(--ink); transition: background .25s;
}
.policies-nav a:hover { background: var(--blush); }
.policies-content article { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.policies-content article:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.policies-content h2 { margin-bottom: 14px; }
.policies-content p { color: var(--ink); margin-bottom: 12px; line-height: 1.7; }
@media (max-width: 780px) {
    .policies-page { grid-template-columns: 1fr; }
    .policies-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}
/* ================= Order success page ================= */
.order-success { max-width: 560px; margin: 50px auto 80px; text-align: center; }
.order-success__icon { width: 64px; height: 64px; margin: 0 auto 18px; color: var(--gold); }
.order-success__icon svg { width: 100%; height: 100%; }
.order-success h1 { margin-bottom: 10px; }
.order-success > p { color: var(--muted); margin-bottom: 6px; }
.order-success__no { font-size: 1rem; color: var(--ink); margin-bottom: 26px; }
.order-success__summary {
    background: var(--paper); border-radius: var(--radius); padding: 24px; text-align: left; margin-bottom: 30px;
}