/* ==========================================================================
   Xcess Gulf Storefront — main.css
   Light-first token system; [data-theme="dark"] switches to night showroom.
   ========================================================================== */

:root{
  /* Day in the Gulf (default) */
  --bg:#F7F5EF; --bg-2:#F1EEE4; --surface:#FFFFFF; --surface-2:#F4F1E9;
  --line:#E5E1D4; --line-2:#D2CCBB;
  --ink:#181C25; --ink-2:#525A6B; --ink-3:#84899B;
  --gold:#D09A2B; --gold-2:#E4B457; --gold-ink:#9A6E10; --on-gold:#191002;
  --gold-tint:rgba(208,154,43,.10); --gold-line:rgba(178,128,26,.45);
  --ivory:#F4F1E9; --ivory-2:#E9E4D6;
  --good:#177E63; --sale:#C74430;
  --haze-gold:rgba(228,180,87,.20);
  --toast-bg:#181C25; --toast-ink:#F7F5EF;
  --shadow:0 1px 3px rgba(24,28,37,.06), 0 18px 44px -20px rgba(24,28,37,.18);
  --shadow-lg:0 30px 80px -32px rgba(24,28,37,.30);
  --shadow-gold:0 14px 38px -14px rgba(208,154,43,.45);
  --plinth-shadow:0 34px 70px -30px rgba(24,28,37,.35);
  --r:16px; --r-lg:24px; --r-sm:10px;
  --maxw:1280px;
  --disp:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
:root[data-theme="dark"]{
  /* Night showroom */
  --bg:#07080C; --bg-2:#0B0D13; --surface:#10131B; --surface-2:#151926;
  --line:#1D2230; --line-2:#2A3042;
  --ink:#F2EFE6; --ink-2:#A9B0C0; --ink-3:#6F7686;
  --gold:#D9A441; --gold-2:#F0BE5C; --gold-ink:#F0BE5C; --on-gold:#191002;
  --gold-tint:rgba(217,164,65,.10); --gold-line:rgba(217,164,65,.40);
  --ivory:#F4F1E9; --ivory-2:#EAE6DA;
  --good:#3BBFA5; --sale:#E0563F;
  --haze-gold:rgba(217,164,65,.14);
  --toast-bg:#F4F1E9; --toast-ink:#191002;
  --shadow:0 2px 6px rgba(0,0,0,.5), 0 24px 60px -24px rgba(0,0,0,.8);
  --shadow-lg:0 40px 90px -40px rgba(0,0,0,.85);
  --shadow-gold:0 16px 44px -16px rgba(217,164,65,.45);
  --plinth-shadow:0 50px 100px -34px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--disp); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .3s ease, color .3s ease;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}
.screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px; min-width:0}
.mono{font-family:var(--mono)}
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-ink); font-weight:600; display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--gold),transparent)}
section{padding:clamp(64px,8vw,110px) 0; position:relative}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px}
.sec-head h2{
  font-size:clamp(30px,4vw,52px); line-height:.98; letter-spacing:-.035em; font-weight:800;
  margin:12px 0 0; text-wrap:balance;
}
.sec-head .link{
  font-family:var(--mono); font-size:12.5px; color:var(--ink-2); border-bottom:1px solid var(--line-2);
  padding-bottom:4px; white-space:nowrap; transition:.18s;
}
.sec-head .link:hover{color:var(--gold-ink); border-color:var(--gold)}

/* ============ ANNOUNCE ============ */
.announce{border-bottom:1px solid var(--line); background:var(--bg-2)}
.announce .wrap{display:flex; align-items:center; justify-content:center; gap:12px; height:40px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-2); text-align:center}
.announce b{color:var(--gold-ink); font-weight:600}
.announce .dot{opacity:.35}
@media (max-width:680px){ .announce .hideSm{display:none} }

/* ============ HEADER ============ */
header.site{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:saturate(1.3) blur(16px);
  -webkit-backdrop-filter:saturate(1.3) blur(16px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; gap:20px; height:74px}
.brand{display:flex; align-items:center; gap:12px; margin-right:8px}
.brand .mark{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  background:linear-gradient(150deg, var(--gold-2), var(--gold) 55%, #A87A22);
  display:grid; place-items:center; color:var(--on-gold); font-weight:900; font-size:20px;
  box-shadow:var(--shadow-gold);
}
.brand .name{display:flex; flex-direction:column; line-height:1}
.brand .name b{font-size:20px; letter-spacing:.16em; font-weight:800}
.brand .name span{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink-3); margin-top:4px}
nav.menu ul{list-style:none; display:flex; gap:2px; margin:0; padding:0}
nav.menu a{
  display:block; font-size:13.5px; font-weight:500; color:var(--ink-2); padding:9px 11px; border-radius:9px;
  transition:.16s; white-space:nowrap;
}
nav.menu a:hover{color:var(--ink); background:var(--surface-2)}
nav.menu li.hot > a, nav.menu a.hot,
nav.menu li.current > a,
nav.menu li.current-menu-item > a,
nav.menu li.current-menu-parent > a,
nav.menu li.current-menu-ancestor > a,
nav.menu li.current-product_cat > a,
nav.menu li.current_page_item > a{ color:var(--gold-ink); background:var(--surface-2); }
.drawer li.current > a,
.drawer li.current-menu-item > a{ color:var(--gold-ink); }
.search{
  flex:1; min-width:0; display:flex; align-items:center; gap:9px; height:44px; padding:0 15px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; color:var(--ink-3);
  max-width:320px; margin-left:auto; transition:.16s;
}
.search:focus-within{border-color:var(--gold)}
.search input{border:0; background:none; outline:none; flex:1; min-width:0; font-family:var(--disp); font-size:14px; color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.search .k{font-family:var(--mono); font-size:10px; color:var(--ink-3); border:1px solid var(--line-2); border-radius:5px; padding:2px 6px}
.icons{display:flex; align-items:center; gap:4px}
.iconbtn{
  position:relative; width:44px; height:44px; border-radius:12px; border:1px solid transparent;
  background:none; color:var(--ink-2); display:grid; place-items:center; transition:.16s;
}
.iconbtn:hover{background:var(--surface-2); color:var(--ink)}
.iconbtn svg{width:20px; height:20px}
.iconbtn .sun{display:none}
.iconbtn .moon{display:block}
:root[data-theme="dark"] .iconbtn .sun{display:block}
:root[data-theme="dark"] .iconbtn .moon{display:none}
.cart-count{
  position:absolute; top:5px; right:5px; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--gold); color:var(--on-gold); font-family:var(--mono); font-size:10px; font-weight:700;
  display:grid; place-items:center; line-height:1; transform:scale(0); transition:transform .22s cubic-bezier(.2,1.3,.4,1)}
.cart-count.on{transform:scale(1)}
.menu-toggle{display:none}
@media (max-width:1120px){ nav.menu{display:none} .search{display:none} .menu-toggle{display:grid} }
@media (max-width:520px){ .brand .name span{display:none} }
/* mobile drawer */
.drawer{display:none; border-top:1px solid var(--line); background:var(--bg-2)}
.drawer.open{display:block}
.drawer ul{list-style:none; margin:0; padding:10px 26px 18px}
.drawer a{display:block; padding:11px 0; font-size:15px; font-weight:500; color:var(--ink-2); border-bottom:1px solid var(--line)}
.drawer a:hover{color:var(--gold-ink)}

/* ============ HERO ============ */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--bg)}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero .haze{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(52% 60% at 72% 30%, var(--haze-gold), transparent 65%),
    linear-gradient(180deg, transparent 50%, var(--bg) 96%);
}
.gulf-kicker{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  flex-wrap:wrap;
}
.gulf-kicker .route b{color:var(--gold-ink); font-weight:600}
.gulf-kicker .route span{margin:0 6px; opacity:.5}
.gulf-kicker .ar{color:var(--gold-ink); letter-spacing:.06em}
@media (max-width:680px){ .gulf-kicker{display:none} }

.hero-market{position:relative; z-index:2; display:grid; grid-template-columns:1.62fr 1fr; gap:20px; padding:clamp(20px,3vw,34px) 0 clamp(28px,4vw,44px)}
@media (max-width:960px){ .hero-market{grid-template-columns:1fr} }

/* slider */
.slider{
  position:relative; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:var(--shadow);
}
.slides{display:flex; transition:transform .65s cubic-bezier(.3,1,.35,1)}
.slide{flex:0 0 100%; min-width:0; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:8px;
  padding:clamp(26px,3.6vw,50px)}
.slide .s-tag{
  display:inline-flex; align-items:center; gap:8px; width:fit-content;
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-ink); border:1px solid var(--gold-line); border-radius:8px; padding:6px 10px;
  background:var(--gold-tint);
}
.slide h2{font-size:clamp(26px,3.2vw,44px); line-height:1; letter-spacing:-.03em; font-weight:800; margin:16px 0 0; text-wrap:balance}
.slide .spec{font-family:var(--mono); font-size:12px; color:var(--ink-2); margin-top:12px; letter-spacing:.02em}
.slide .spec i{font-style:normal; color:var(--ink-3); margin:0 7px}
.slide .s-price{display:flex; align-items:baseline; gap:12px; margin-top:20px; flex-wrap:wrap}
.slide .s-price .from{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.slide .s-price .now{font-family:var(--mono); font-size:clamp(24px,2.6vw,34px); font-weight:700; font-variant-numeric:tabular-nums}
.slide .s-price .now .cur{font-size:14px; color:var(--ink-3); font-weight:500}
.slide .s-price .old{font-family:var(--mono); font-size:14px; color:var(--ink-3); text-decoration:line-through}
.slide .s-price .off{font-family:var(--mono); font-size:11px; font-weight:700; color:var(--sale); background:color-mix(in srgb, var(--sale) 13%, transparent); padding:4px 8px; border-radius:6px}
.slide .s-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; height:50px; padding:0 24px; border-radius:13px;
  font-weight:700; font-size:14.5px; border:1px solid transparent; letter-spacing:-.01em;
  transition:transform .14s, box-shadow .2s, background .16s, border-color .16s, color .16s;
}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(140deg, var(--gold-2), var(--gold)); color:var(--on-gold); box-shadow:var(--shadow-gold)}
.btn-gold:hover{box-shadow:0 20px 54px -16px color-mix(in srgb, var(--gold) 60%, transparent)}
.btn-line{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-line:hover{border-color:var(--ink-3)}
.slide .s-meta{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:18px; display:flex; gap:14px; flex-wrap:wrap}
.slide .s-meta .g{color:var(--good)}
.s-media{position:relative; display:grid; place-items:center}
.s-plinth{
  width:min(100%, 330px); aspect-ratio:1/1; border-radius:24px;
  background:linear-gradient(165deg, var(--ivory), var(--ivory-2));
  border:1px solid var(--line);
  box-shadow:var(--plinth-shadow), inset 0 1px 0 rgba(255,255,255,.7);
  display:grid; place-items:center; padding:30px; position:relative;
}
.s-plinth::before{content:""; position:absolute; inset:12px; border-radius:16px; border:1px solid rgba(25,16,2,.08)}
.s-plinth img{max-height:84%; width:auto; object-fit:contain; mix-blend-mode:multiply;
  filter:drop-shadow(0 26px 30px rgba(25,16,2,.25)); animation:heroFloat 7s ease-in-out infinite}
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(-3deg)}}
.slider-ui{position:absolute; left:clamp(26px,3.6vw,50px); bottom:20px; display:flex; align-items:center; gap:16px; z-index:3}
.dots{display:flex; gap:8px}
.dot-btn{width:26px; height:4px; border-radius:2px; border:0; background:var(--line-2); padding:0; transition:.25s}
.dot-btn.on{background:var(--gold); width:40px}
.s-count{font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.14em}
@media (max-width:640px){
  .slide{grid-template-columns:1fr; padding-bottom:64px}
  .s-media{order:-1}
  .s-plinth{width:min(70%,240px)}
}

/* deal rail */
.rail-cards{display:grid; grid-template-rows:1fr 1fr; gap:20px}
@media (max-width:960px){ .rail-cards{grid-template-rows:none; grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .rail-cards{grid-template-columns:1fr} }
.mini{
  position:relative; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:22px; display:flex; gap:16px; align-items:stretch; box-shadow:var(--shadow);
  transition:border-color .2s, transform .25s;
}
.mini:hover{border-color:var(--gold-line); transform:translateY(-3px)}
.mini.hot{border-color:var(--gold-line);
  background:
    radial-gradient(80% 100% at 0% 0%, var(--gold-tint), transparent 60%),
    color-mix(in srgb, var(--surface) 82%, transparent);
}
.mini .m-copy{flex:1; min-width:0; display:flex; flex-direction:column}
.mini .m-tag{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink)}
.mini h3{font-size:16.5px; font-weight:700; letter-spacing:-.015em; line-height:1.25; margin:8px 0 0}
.mini .m-price{font-family:var(--mono); font-size:16px; font-weight:700; margin-top:auto; padding-top:10px; font-variant-numeric:tabular-nums}
.mini .m-price .cur{font-size:11px; color:var(--ink-3); font-weight:500}
.mini .m-price .old{font-size:12px; color:var(--ink-3); text-decoration:line-through; font-weight:500; margin-left:8px}
.mini .m-go{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); margin-top:10px; display:inline-flex; align-items:center; gap:7px; transition:color .16s}
.mini:hover .m-go{color:var(--gold-ink)}
.mini .m-media{width:104px; flex:0 0 auto; border-radius:16px; background:linear-gradient(165deg, var(--ivory), var(--ivory-2));
  border:1px solid var(--line);
  display:grid; place-items:center; padding:14px; align-self:center; aspect-ratio:1/1;
  box-shadow:var(--shadow)}
.mini .m-media img{max-height:100%; width:auto; object-fit:contain; mix-blend-mode:multiply}
.mini-cd{display:flex; gap:6px; margin-top:10px}
.mini-cd b{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--gold-ink);
  background:var(--bg); border:1px solid var(--line-2); border-radius:7px; padding:4px 7px; font-variant-numeric:tabular-nums}
.mini-cd span{font-family:var(--mono); font-size:13px; color:var(--ink-3); align-self:center}

/* stats strip */
.hero-stats{
  position:relative; z-index:2; display:flex; gap:0; border-top:1px solid var(--line);
  padding:0 0 26px; flex-wrap:wrap;
}
.hstat{padding:18px 26px 0 0; margin-right:26px; border-right:1px solid var(--line); padding-right:26px}
.hstat:last-child{border-right:0}
.hstat b{font-family:var(--mono); font-size:19px; font-weight:700; letter-spacing:-.02em; display:block; font-variant-numeric:tabular-nums}
.hstat b i{font-style:normal; color:var(--gold-ink)}
.hstat span{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}

/* ============ TICKER ============ */
.ticker{border-bottom:1px solid var(--line); background:var(--bg-2); overflow:hidden; padding:15px 0}
.ticker-track{display:flex; gap:48px; width:max-content; animation:scroll 30s linear infinite}
.ticker-track span{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
.ticker-track b{color:var(--gold-ink)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============ DIRECTORY ============ */
.dir-row{
  position:relative; display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:22px;
  padding:30px 8px; border-top:1px solid var(--line); transition:background .2s;
}
.dir-row:last-child{border-bottom:1px solid var(--line)}
.dir-row .idx{font-family:var(--mono); font-size:13px; color:var(--ink-3); letter-spacing:.1em; display:flex; flex-direction:column; gap:4px}
.dir-row .idx b{font-size:22px; color:var(--ink-2); font-weight:600; transition:color .2s}
.dir-row .name{
  font-size:clamp(26px,4.4vw,58px); font-weight:800; letter-spacing:-.035em; line-height:1;
  color:var(--ink-2); transition:color .2s, transform .3s cubic-bezier(.2,1,.3,1);
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
}
.dir-row .name small{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase}
.dir-row .go{width:52px; height:52px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--ink-3); transition:.22s; flex:0 0 auto}
.dir-row .go svg{width:20px; height:20px; transition:transform .22s}
.dir-row:hover{background:linear-gradient(90deg, transparent, var(--gold-tint) 30%, transparent 90%)}
.dir-row:hover .name{color:var(--ink); transform:translateX(14px)}
.dir-row:hover .idx b{color:var(--gold-ink)}
.dir-row:hover .go{background:var(--gold); border-color:var(--gold); color:var(--on-gold); box-shadow:var(--shadow-gold)}
.dir-row:hover .go svg{transform:rotate(-45deg)}
.dir-peek{
  position:absolute; right:110px; top:50%; transform:translateY(-50%) scale(.86) rotate(3deg); opacity:0;
  width:168px; height:168px; border-radius:22px; background:linear-gradient(165deg, var(--ivory), var(--ivory-2));
  border:1px solid var(--line);
  display:grid; place-items:center; padding:20px; pointer-events:none; z-index:5;
  box-shadow:var(--shadow-lg);
  transition:opacity .25s, transform .35s cubic-bezier(.2,1.2,.3,1);
}
.dir-peek img{max-height:100%; width:auto; object-fit:contain; mix-blend-mode:multiply}
.dir-row:hover .dir-peek{opacity:1; transform:translateY(-50%) scale(1) rotate(-2deg)}
@media (max-width:820px){
  .dir-row{grid-template-columns:56px 1fr auto; padding:22px 4px}
  .dir-peek{display:none}
  .dir-row .go{width:44px; height:44px}
}

/* ============ PRODUCT GRID ============ */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; perspective:1400px}
.grid::before,.grid::after{content:none; display:none}

/* ============ BRANDS ============ */
.brand-grid{display:grid; grid-template-columns:repeat(8,1fr); gap:14px}
.brand-grid::before,.brand-grid::after{content:none; display:none}
@media (max-width:1080px){ .brand-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:560px){ .brand-grid{grid-template-columns:repeat(2,1fr)} }
.brand-chip{
  display:grid; place-items:center; text-align:center; min-height:84px; padding:14px 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.brand-chip span{font-weight:700; font-size:15px; letter-spacing:-.01em; color:var(--ink-2); transition:color .2s; line-height:1.15}
.brand-chip:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--gold-line)}
.brand-chip:hover span{color:var(--gold-ink)}
@media (max-width:1020px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px){ .grid{grid-template-columns:repeat(2,1fr); gap:14px} }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; position:relative;
  transition:transform .25s cubic-bezier(.2,1,.3,1), box-shadow .25s, border-color .25s;
  transform-style:preserve-3d; will-change:transform;
}
.card:hover{border-color:var(--line-2); box-shadow:var(--shadow); z-index:2}
.card .thumb{position:relative; aspect-ratio:1/1; margin:10px 10px 0; border-radius:12px;
  background:linear-gradient(168deg, var(--ivory), var(--ivory-2));
  display:grid; place-items:center; padding:24px; overflow:hidden}
.card .thumb img{max-height:100%; width:auto; object-fit:contain; mix-blend-mode:multiply; transition:transform .35s cubic-bezier(.2,1,.3,1)}
.card:hover .thumb img{transform:scale(1.07) translateY(-3px)}
.badge{position:absolute; top:12px; left:12px; z-index:2; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 9px; border-radius:7px}
.badge.new{background:var(--surface); color:var(--gold-ink); border:1px solid var(--gold-line)}
.badge.sale{background:var(--sale); color:#fff}
.wish{position:absolute; top:10px; right:10px; z-index:2; width:36px; height:36px; border-radius:10px; border:1px solid rgba(25,16,2,.12);
  background:rgba(255,255,255,.65); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#6b6252; display:grid; place-items:center; transition:.16s}
.wish:hover, .wish.on{color:var(--sale); border-color:var(--sale)}
.wish.on svg{fill:var(--sale)}
.wish svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8}
.card .body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1}
.card .brandline{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.card h3{font-size:15px; font-weight:600; line-height:1.35; margin:0; letter-spacing:-.01em; color:var(--ink)}
.card h3 a:hover{color:var(--gold-ink)}
.stars{display:flex; align-items:center; gap:5px; color:var(--gold); font-size:12px}
.stars svg{width:13px; height:13px; fill:currentColor}
.stars span{font-family:var(--mono); color:var(--ink-3); font-size:11px}
.priceline{display:flex; align-items:baseline; gap:9px; margin-top:auto; padding-top:8px}
.price{font-family:var(--mono); font-weight:700; font-size:17px; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--ink)}
.price .cur{font-size:11px; color:var(--ink-3); font-weight:500; margin-right:2px}
.price del{color:var(--ink-3); font-weight:500; font-size:12px; margin-right:6px}
.price ins{text-decoration:none}
.was{font-family:var(--mono); font-size:12px; color:var(--ink-3); text-decoration:line-through}
.card .add{
  margin-top:13px; height:44px; width:100%; border-radius:11px; border:1px solid var(--line-2); background:transparent;
  color:var(--ink); font-weight:600; font-size:13.5px; display:flex; align-items:center; justify-content:center; gap:9px;
  transition:.18s;
}
.card .add:hover{background:var(--gold); border-color:var(--gold); color:var(--on-gold); box-shadow:var(--shadow-gold)}
.card .add svg{width:16px; height:16px}
.card .add.added{background:var(--good); border-color:var(--good); color:#fff}

/* ============ DEAL ============ */
.deal-sec{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.deal{
  border:1px solid var(--gold-line); border-radius:var(--r-lg); overflow:hidden;
  display:grid; grid-template-columns:1fr 1.1fr; position:relative;
  background:
    radial-gradient(70% 90% at 10% 0%, var(--gold-tint), transparent 60%),
    var(--surface);
  box-shadow:var(--shadow);
}
@media (max-width:860px){ .deal{grid-template-columns:1fr} }
.deal .dmedia{display:grid; place-items:center; padding:44px; position:relative; min-height:340px}
.deal .dmedia .plate{width:min(100%,360px); aspect-ratio:1/1; border-radius:24px;
  background:linear-gradient(165deg, var(--ivory), var(--ivory-2)); border:1px solid var(--line);
  display:grid; place-items:center; padding:36px;
  box-shadow:var(--plinth-shadow)}
.deal .dmedia img{max-height:100%; width:auto; mix-blend-mode:multiply; filter:drop-shadow(0 24px 28px rgba(25,16,2,.22))}
.deal .dbody{padding:clamp(30px,4vw,56px); display:flex; flex-direction:column; justify-content:center}
.deal h3{font-size:clamp(26px,3.4vw,44px); line-height:1; letter-spacing:-.035em; font-weight:800; margin:14px 0 0; text-wrap:balance}
.deal p{color:var(--ink-2); margin:16px 0 0; max-width:46ch}
.countdown{display:flex; gap:10px; margin:28px 0 0}
.countdown .u{background:var(--bg); border:1px solid var(--line-2); border-radius:12px; padding:12px 16px; text-align:center; min-width:68px}
.countdown .u b{font-family:var(--mono); font-size:26px; font-weight:700; display:block; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--gold-ink)}
.countdown .u span{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.deal .dprice{display:flex; align-items:baseline; gap:14px; margin:28px 0 0; flex-wrap:wrap}
.deal .dprice .now{font-family:var(--mono); font-size:34px; font-weight:700; font-variant-numeric:tabular-nums}
.deal .dprice .now .cur{font-size:15px; color:var(--ink-3); font-weight:500}
.deal .dprice .old{font-family:var(--mono); font-size:16px; color:var(--ink-3); text-decoration:line-through}
.deal .dprice .off{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--sale); background:color-mix(in srgb, var(--sale) 13%, transparent); padding:5px 9px; border-radius:7px}

/* ============ PROMOS ============ */
.promos{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:760px){ .promos{grid-template-columns:1fr} }
.promo{
  position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--surface);
  border:1px solid var(--line); min-height:320px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:30px; isolation:isolate; transition:border-color .2s, transform .25s;
}
.promo:hover{border-color:var(--line-2); transform:translateY(-4px)}
.promo .pimg{position:absolute; z-index:-1; right:-2%; top:48%; transform:translateY(-50%); width:54%;
  filter:drop-shadow(0 30px 40px rgba(24,28,37,.35)); transition:transform .4s cubic-bezier(.2,1,.3,1)}
.promo:hover .pimg{transform:translateY(-52%) scale(1.04)}
.promo::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, var(--surface) 38%, transparent 92%),
    radial-gradient(60% 80% at 85% 30%, var(--gold-tint), transparent 70%)}
.promo h3{font-size:clamp(22px,2.6vw,32px); line-height:1.02; letter-spacing:-.03em; font-weight:800; margin:12px 0 0; max-width:13ch; text-wrap:balance}
.promo p{color:var(--ink-2); font-size:14px; margin:10px 0 0; max-width:32ch}
.promo .plink{display:inline-flex; align-items:center; gap:9px; margin-top:20px; font-family:var(--mono); font-size:12.5px;
  color:var(--ink); border-bottom:1px solid var(--line-2); padding-bottom:4px; width:fit-content; transition:.18s}
.promo .plink:hover{color:var(--gold-ink); border-color:var(--gold)}

/* ============ NEWSLETTER ============ */
.news{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(40px,6vw,72px); text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(55% 90% at 50% 0%, var(--gold-tint), transparent 65%),
    var(--surface);
}
.news h2{font-size:clamp(28px,3.8vw,48px); line-height:1; letter-spacing:-.035em; font-weight:800; margin:14px auto 0; max-width:18ch; text-wrap:balance}
.news p{color:var(--ink-2); margin:16px auto 0; max-width:48ch}
.news form{display:flex; gap:10px; max-width:480px; margin:30px auto 0}
.news input{flex:1; min-width:0; height:54px; border-radius:14px; border:1px solid var(--line-2); background:var(--bg);
  color:var(--ink); padding:0 18px; font-family:var(--disp); font-size:15px; outline:none; transition:border-color .16s}
.news input::placeholder{color:var(--ink-3)}
.news input:focus{border-color:var(--gold)}
@media (max-width:520px){ .news form{flex-direction:column} }

/* ============ FOOTER ============ */
footer.site{border-top:1px solid var(--line); padding:70px 0 34px; background:var(--bg-2)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px}
@media (max-width:840px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }
.foot-brand p{color:var(--ink-2); font-size:14px; max-width:36ch; margin:16px 0 0}
.foot-brand .contact{font-family:var(--mono); font-size:12.5px; color:var(--ink-3); margin-top:18px; line-height:2}
.foot-col h4{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin:0 0 18px; font-weight:600}
.foot-col ul{list-style:none; margin:0; padding:0}
.foot-col a{display:block; color:var(--ink-2); font-size:14px; padding:6px 0; transition:color .15s}
.foot-col a:hover{color:var(--gold-ink)}
.foot-bottom{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:52px; padding-top:26px; border-top:1px solid var(--line); flex-wrap:wrap}
.foot-bottom .cc{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.pays{display:flex; gap:8px; flex-wrap:wrap}
.pays span{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.06em; color:var(--ink-2); border:1px solid var(--line-2); border-radius:7px; padding:6px 10px}

/* ============ TOAST ============ */
.toast{position:fixed; left:50%; bottom:30px; transform:translate(-50%, calc(100% + 44px)); z-index:200; visibility:hidden;
  background:var(--toast-bg); color:var(--toast-ink); font-size:14px; font-weight:600; padding:14px 22px; border-radius:14px;
  display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-lg);
  transition:transform .35s cubic-bezier(.2,1,.3,1), visibility 0s .35s}
.toast.show{transform:translate(-50%,0); visibility:visible; transition:transform .35s cubic-bezier(.2,1,.3,1), visibility 0s}
.toast svg{width:18px; height:18px; color:var(--gold)}

/* ============ GENERIC CONTENT (index / pages / WooCommerce wrappers) ============ */
.site-main{padding:clamp(40px,6vw,72px) 0; min-height:40vh; overflow-x:hidden}
.site-main .wrap{ width:100%; }
.site-main img{ max-width:100%; height:auto; }
.site-main *{ min-width:0; }
.search-list{display:grid; gap:16px; margin-top:24px}
.search-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px 24px}
.search-item .entry-title{font-size:18px; font-weight:700; letter-spacing:-.01em; margin:0 0 8px}
.search-item .entry-title a:hover{color:var(--gold-ink)}
.search-item .entry-summary{color:var(--ink-2); font-size:14px}
.site-main h1.page-title{font-size:clamp(28px,4vw,44px); letter-spacing:-.03em; font-weight:800; margin:0 0 24px}
.site-main article.hentry{margin-bottom:40px}
.site-main .entry-title a:hover{color:var(--gold-ink)}
.woocommerce-page .site-main ul.products{list-style:none; padding:0}

/* reveal on scroll */
.rv{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,1,.3,1)}
.rv.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}