:root{
  --bg:#F7F4EE;
  --bg-raised:#F7F4EE;
  --text:#151310;
  --muted:#78736A;
  --line:#E7E1D3;
  --line-soft:#F0EBDF;
  --accent:#8F4517;
  --accent-2:#C06A3E;
  --ok:#3E7D53;
  --shadow: rgba(20,17,10,.08);
  --btn-text:#FFFFFF;
  --surface:#FFFFFF;
  --danger:#B23A3A;
  --warn:#B5842B;
}
html[data-theme="dark"]{
  --bg:#141210;
  --bg-raised:#1C1A17;
  --text:#F3EFE6;
  --muted:#948E82;
  --line:#332F28;
  --line-soft:#242119;
  --accent:#C06A3E;
  --accent-2:#DB8455;
  --ok:#4E8A63;
  --shadow: rgba(0,0,0,.35);
  --btn-text:#141210;
  --surface:#1C1A17;
  --danger:#E0736F;
  --warn:#DFAE5C;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Montserrat',sans-serif; -webkit-font-smoothing:antialiased;
  transition: background .35s ease, color .35s ease;
}
.display{font-family:'Montserrat',sans-serif;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent); color:#fff;}

/* ---------- Nav: floating dark pill ---------- */
nav{
  position:sticky; top:16px; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  width:calc(100% - 12vw); margin:16px auto 0;
  padding:0; border-radius:100px;
  background:transparent; box-shadow:none;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
/* Brand-colored bar, shown only once the page has scrolled — Umber #904014 from the charter */
nav.scrolled{
  padding:8px 8px 8px 20px;
  background:rgba(144,64,20,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.35);
}
nav.scrolled .logo-img-light{display:none !important;}
nav.scrolled .logo-img-dark{display:block !important;}
nav.scrolled .back-link{color:rgba(255,255,255,.85);}
nav.scrolled .back-link:hover{color:#fff;}
/* Buttons lose their own chip once the bar behind them provides the contrast */
nav.scrolled .nav-icon-btn{
  background:transparent; border-color:transparent; box-shadow:none; color:#fff;
}
nav.scrolled .nav-icon-btn:hover{background:rgba(255,255,255,.16);}
.logo{
  display:flex; align-items:center;
}
.logo-img{height:72px; width:auto; display:block; transition:height .3s ease;}
nav.scrolled .logo-img{height:42px;}
.logo-img-dark{display:none;}
html[data-theme="dark"] .logo-img-light{display:none;}
html[data-theme="dark"] .logo-img-dark{display:block;}

.nav-right{display:flex; align-items:center; gap:8px;}

.back-link{
  font-size:13px; color:var(--muted); white-space:nowrap;
  display:flex; align-items:center; gap:6px; padding:0 6px;
}
.back-link:hover{color:var(--text);}

.nav-icon-btn{
  position:relative;
  width:42px; height:42px; border-radius:12px;
  background:var(--bg-raised); border:1px solid var(--line);
  box-shadow:0 12px 24px -16px var(--shadow);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--text); transition: background .2s, border-color .2s;
}
.nav-icon-btn:hover{background:color-mix(in srgb, var(--text) 8%, var(--bg-raised));}
#themeToggle:hover{transform:rotate(20deg);}
.nav-icon-btn svg{width:18px; height:18px;}
.basket-count{
  position:absolute; top:-5px; right:-5px;
  min-width:17px; height:17px; padding:0 4px; border-radius:100px;
  background:var(--accent-2); color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

.pill-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:13.5px;
  padding:12px 22px; border-radius:100px; border:1.5px solid var(--text);
  cursor:pointer; background:transparent; color:var(--text);
  transition: background .2s, color .2s;
}
.pill-btn:hover{background:var(--text); color:var(--bg);}
.pill-btn.solid{background:var(--accent); border-color:var(--accent); color:#fff;}
.pill-btn.solid:hover{background:var(--accent-2); border-color:var(--accent-2);}

/* ---------- Hero ---------- */
.hero{position:relative; padding:8vw 0 6vw; overflow:hidden; border-bottom:0px solid var(--line-soft);}
.hero-arc{
  position:absolute; top:-260px; right:-260px; width:640px; height:640px;
  border:1px solid var(--line); border-radius:50%; pointer-events:none;
}
.hero-inner{
  position:relative; z-index:2; display:grid; grid-template-columns:1.3fr .9fr; gap:32px; align-items:start;
  width:calc(100% - 12vw); margin:0 auto;
}
.hero-text{min-width:0;}
.hero-tags{display:flex; gap:10px; margin-bottom:36px; flex-wrap:wrap;}
.hero-tags span{
  display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted);
  padding:6px 14px; border:1px solid var(--line); border-radius:100px;
}
.hero-tags span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);}
h1.hero-title{
  font-family:'Montserrat',sans-serif; font-weight:600;
  font-size:clamp(40px, 5.6vw, 80px); line-height:0.98; letter-spacing:-.01em;
  margin:0 0 44px; max-width:13ch;
}
.hero-bottom{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;}
.hero-copy{color:var(--muted); font-size:16.5px; line-height:1.65; max-width:40ch;}
.hero-copy .accent-line{display:block; color:var(--accent); font-family:'Montserrat',sans-serif; font-weight:600; margin-top:10px;}

.hero-visual{display:flex; flex-direction:column; align-items:center; gap:22px; margin-top:70px;}

/* ---------- Fan of images (each card cycles through the deck) ----------
   Two size zones, not one shared formula: below/at 880px .hero-visual is
   stacked full-width (lots of room), above it it's squeezed into a narrow
   grid column that's also capped at ~543px max once .hero-inner hits its
   1360px ceiling. A single vw-rate that's safe for the narrow desktop band
   ends up far too conservative for mobile — hence the split. Offsets stay
   percentage-based (relative to each card's own width) so they track the
   width automatically within each zone. */
.fan-wrap{
  position:relative; height:clamp(240px, 25.6vw, 420px); width:100%; margin:0;
}
.fan-card{
  position:absolute; left:50%; bottom:0;
  width:clamp(115px, 20vw, 165px);
  margin-left:calc(clamp(115px, 20vw, 165px) / -2);
  aspect-ratio:1689 / 2112; border-radius:22px; overflow:hidden;
  box-shadow:0 30px 55px -20px var(--shadow); border:1px solid var(--line-soft);
  transform-origin:bottom center; opacity:0; transform:translateY(70px) rotate(0deg);
  transition: transform 1s cubic-bezier(.22,1,.36,1), opacity .9s ease, width .3s ease, margin-left .3s ease;
  background:var(--bg-raised);
}
.fan-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transform:translateX(105%);
  transition:transform .7s cubic-bezier(.65,0,.35,1);
}
.fan-card img.pos-center{ transform:translateX(0); z-index:2; }
.fan-card img.pos-left{ transform:translateX(-105%); z-index:1; }
.fan-card img.no-transition{ transition:none; }

.fan-card.card-left{ z-index:1; transition-delay:.05s; }
.fan-card.card-center{
  width:clamp(150px, 26vw, 215px);
  margin-left:calc(clamp(150px, 26vw, 215px) / -2);
  z-index:3;
}
.fan-card.card-right{ z-index:2; transition-delay:.1s; }

.fan-wrap.in-view .card-left{ opacity:1; transform: translateY(-6px) translateX(-60%) rotate(-17deg); }
.fan-wrap.in-view .card-center{ opacity:1; transform: translateY(-34px) translateX(0) rotate(0deg); }
.fan-wrap.in-view .card-right{ opacity:1; transform: translateY(-6px) translateX(60%) rotate(17deg); }

/* Desktop zone: bigger cards, sized against the real ~543px capped ceiling
   of .hero-visual rather than the mobile-safe rate above. */
@media (min-width:881px){
  .fan-card{
    width:min(14vw, 230px);
    margin-left:calc(min(14vw, 230px) / -2);
  }
  .fan-card.card-center{
    width:min(18.2vw, 299px);
    margin-left:calc(min(18.2vw, 299px) / -2);
  }
}

@media (max-width:880px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{order:-1; margin-top:0;}
  .fan-wrap{margin-top:8vw;}
}

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(64px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.packs-grid .pack-card:nth-child(1){ transition-delay:0s; }
.packs-grid .pack-card:nth-child(2){ transition-delay:.2s; }
.packs-grid .pack-card:nth-child(3){ transition-delay:.10s; }

/* ---------- Section label ---------- */
.section-label{
  display:flex; align-items:baseline; gap:14px; padding:60px 0 30px;
  width:calc(100% - 12vw); margin:0 auto;
}
.section-label .num{font-family:'Montserrat',sans-serif; font-size:12px; color:var(--accent); font-weight:600;}
.section-label h2{font-family:'Montserrat',sans-serif; font-weight:600; font-size:clamp(30px,4.6vw,52px);margin:0 0 22px; max-width:14ch;}

/* ---------- Product color carousel ----------
   Auto-scroll speed and the drag-to-browse interaction are both driven from
   script.js now (not a CSS @keyframes animation) — dragging mid-animation
   isn't something CSS animations can do on their own, since there's no way
   for JS to grab the live offset out of a running keyframe and hand control
   back smoothly. The track's inline transform is set entirely by JS; this
   file only handles layout, sizing, and the grab/grabbing cursor affordance. */
.product-carousel{
  width:calc(100% - 12vw); margin:0 auto 60px;
}
.carousel-viewport{overflow:hidden; touch-action:pan-y; cursor:grab;}
.carousel-viewport:active{cursor:grabbing;}
.carousel-track{
  display:flex; gap:16px; width:max-content;
  user-select:none;
  will-change:transform;
}

.carousel-slide{
  position:relative; flex:0 0 auto;
  width:clamp(220px, 26vw, 340px);
  border-radius:22px; overflow:hidden;
  aspect-ratio:4/5;
  border:1px solid var(--line-soft);
  box-shadow:0 20px 40px -22px var(--shadow);
  background:var(--bg-raised);
}
.carousel-slide img{width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; user-drag:none; pointer-events:none;}
.carousel-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 18px;
  background:linear-gradient(180deg, transparent, rgba(20,17,10,.65));
  color:#fff; font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px;
}

@media (max-width:640px){
  .carousel-slide{width:clamp(180px, 62vw, 260px);}
}

/* ---------- Packs grid (OKC-style asymmetric cards) ---------- */
.packs-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:60px 40px; padding:0 0 20px;
  width:calc(100% - 12vw); margin:0 auto;
}
.pack-card{ position:relative; }
.pack-card:nth-child(2){ margin-top:56px; }
.pack-card.wide{ grid-column:1 / -1; margin-top:10px; }
.pack-card.wide .pack-media{ aspect-ratio:21/8; }

.pack-media{
  aspect-ratio:4/3.4; border-radius:26px; overflow:hidden; position:relative;
  box-shadow:0 24px 50px -20px var(--shadow); border:1px solid var(--line-soft);
  background:var(--bg-raised);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.pack-card:hover .pack-media{
  transform:translateY(-8px);
  box-shadow:0 34px 64px -22px var(--shadow);
}
.pack-media img{width:100%; height:100%; object-fit:cover; object-position:center bottom; display:block;}

/* Tinted scrim so any photo underneath stays legible and on-brand */
.pack-overlay{
  position:absolute; inset:0; z-index:2;
  background: linear-gradient(155deg, rgba(143,69,23,.18) 0%, rgba(143,69,23,.55) 55%, rgba(96,45,15,.88) 100%);
  display:flex; flex-direction:column; padding:22px 24px 88px;
  color:#fff;
}
.ov-price{
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(50px,3.4vw,40px);
  display:flex; align-items:flex-start; gap:6px; align-self:flex-end;
}
.ov-price .ov-fcfa{
  font-size:15px; font-weight:600; letter-spacing:.12em; writing-mode:vertical-rl;
  opacity:.85; margin-top:4px;
}
.ov-bottom{max-width:65%; margin-top:auto;}
.ov-name{font-family:'Montserrat',sans-serif; font-weight:600; font-size:25px; margin-bottom:8px;}
.ov-list{list-style:none; margin:0 0 10px; padding:0; font-size:15.5px; line-height:1.55; opacity:.95;}
.ov-list li{padding-left:12px; position:relative;}
.ov-list li::before{content:"°"; position:absolute; left:0; opacity:1;}
.ov-tag{font-size:10.5px; opacity:.8; font-style:italic;}

/* Long pill bar, sitting inside the card, bottom-right of the image */
.pick-bar{
  position:absolute; bottom:16px; right:16px; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  width:206px; height:52px; padding:0 6px 0 20px; border-radius:100px; border:none; cursor:pointer;
  background:rgba(20,17,10,.55); backdrop-filter:blur(6px);
  color:#fff; font-family:'Montserrat',sans-serif; font-weight:600; font-size:13.5px;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.35); transition: background .2s, transform .2s;
}
.pick-bar:hover{background:var(--accent); transform:translateY(-2px);}
.pick-bar-dot{
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
}
@media (max-width:880px){
  .packs-grid{grid-template-columns:1fr; gap:70px;}
  .pack-card:nth-child(2){margin-top:0;}
  .pack-card.wide .pack-media{aspect-ratio:4/3.4;}
}

/* ---------- Order section ---------- */
.order-section{display:none; border-top:1px solid var(--line-soft);}
.order-section.show{display:block;}
.order-wrap{max-width:560px; margin:0 auto; padding:70px 6vw 100px;}

.order-recap{margin-bottom:20px;}
.recap-row{display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line-soft);}
.recap-row img{width:52px; height:52px; object-fit:cover; border-radius:10px; border:1px solid var(--line); flex-shrink:0;}
.recap-row-body{flex:1; min-width:0;}
.recap-row-head{display:flex; justify-content:space-between; gap:10px; font-size:14.5px; margin-bottom:4px;}
.recap-row-head b{font-family:'Montserrat',sans-serif; font-weight:600;}
.recap-row-list{font-size:12px; color:var(--muted); line-height:1.5;}
.order-recap-total{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:16px;
  padding:16px 0 34px; border-bottom:1px solid var(--line-soft); margin-bottom:30px;
}

.field{margin-bottom:26px;}
.field label{
  display:block; font-family:'Montserrat',sans-serif; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); margin-bottom:10px; font-weight:500;
}
.field input, .field select{
  width:100%; padding:11px 0; border:none; border-bottom:1.5px solid var(--line);
  font-family:'Montserrat',sans-serif; font-size:16px; background:transparent; color:var(--text);
}
.field select option{background:var(--bg); color:var(--text);}
.field-optional{font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); font-size:11px;}

.phone-input{display:flex; align-items:center; gap:8px; border-bottom:1.5px solid var(--line);}
.phone-prefix{
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:16px; color:var(--text);
  padding:11px 0; white-space:nowrap;
}
.phone-input input{border-bottom:none; padding-left:0;}
.field input::placeholder{color:var(--muted); opacity:.6;}
.field input:focus, .field select:focus{outline:none; border-color:var(--accent);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.submit-btn{
  width:100%; margin-top:14px;
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:15px;
  background:var(--accent); color:#fff; border:none; border-radius:100px;
  padding:16px; cursor:pointer;
}
.submit-btn:hover{background:var(--accent-2);}
.form-note{font-size:12.5px; color:var(--muted); margin-top:16px; text-align:center;}

/* ---------- Confirmation ---------- */
.confirm{display:none; padding:40px 0 100px;}
.confirm.show{display:block;}

.confirm-card{
  width:100%; max-width:440px; margin:0 auto; text-align:center;
  background:var(--bg-raised); border:1px solid var(--line-soft); border-radius:28px;
  padding:44px 34px;
}
.confirm-icon{
  width:56px;height:56px;border-radius:50%; background:var(--ok); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:23px; margin:0 auto 22px;
}
.confirm h3{font-family:'Montserrat',sans-serif; font-weight:600; font-size:23px; margin:0 0 12px;}
.confirm-thanks{color:var(--muted); font-size:14.5px; line-height:1.6; margin:0 0 28px;}
.confirm-thanks b{color:var(--text); font-weight:600;}

.confirm-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  padding:20px 0; margin-bottom:24px; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.confirm-stat{display:flex; flex-direction:column; gap:4px;}
.confirm-stat-label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
.confirm-stat-value{font-family:'Montserrat',sans-serif; font-weight:600; font-size:20px; color:var(--accent);}

.confirm-note{color:var(--muted); font-size:13.5px; line-height:1.6; margin:0 0 24px;}
.confirm-note b{color:var(--text); font-weight:600;}

.ref-block{
  display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:28px;
}
.ref-label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
.ref{
  font-family:'Montserrat',sans-serif; font-weight:500; border:1px solid var(--line); padding:9px 18px; border-radius:100px;
  display:inline-block; font-size:13px; letter-spacing:.02em; white-space:nowrap; background:var(--bg);
}

.confirm-actions{display:flex; flex-direction:column; gap:10px;}
.confirm-actions .pill-btn{width:100%; justify-content:center; white-space:nowrap;}

/* ---------- Footer CTA ---------- */
.footer-cta{
  padding:8vw 0 5vw; border-top:0px solid var(--line-soft);
  width:calc(100% - 12vw); margin:0 auto;
}
.footer-cta h2{
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:clamp(30px,4.6vw,52px);
  margin:0 0 22px; max-width:14ch;
}
.footer-cta p{color:var(--muted); font-size:15.5px; line-height:1.65; max-width:44ch; margin:0 0 34px;}

footer{
  padding:0 0 50px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px;
  width:calc(100% - 12vw); margin:0 auto;
}
.foot-col{font-size:13.5px; color:var(--muted); line-height:1.8;}
.foot-col .label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px; display:block;}
.foot-col .big{font-family:'Montserrat',sans-serif; font-weight:600; font-size:17px; color:var(--text);}
.foot-bottom{
  display:flex; justify-content:space-between; padding:24px 0 30px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--muted); flex-wrap:wrap; gap:10px;
  width:calc(100% - 12vw); margin:0 auto;
}
.admin-link{cursor:pointer; text-decoration:underline; color:var(--muted);}
.admin-link:hover{color:var(--text);}

.admin-panel{display:none; padding:30px 6vw 70px; border-top:1px solid var(--line-soft);}
.admin-panel.show{display:block;}
.admin-panel h3{font-family:'Montserrat',sans-serif; font-weight:600;}
.order-row{
  border:1px solid var(--line-soft); border-radius:12px; padding:12px 16px; margin-bottom:10px;
  font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.order-row b{color:var(--text);}

@media (max-width:880px){
  .field-row{grid-template-columns:1fr;}
  .hero-bottom{flex-direction:column; align-items:flex-start;}
}

/* ---------- Color picker modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; z-index:70; background:rgba(20,17,10,.5);
  display:none; align-items:center; justify-content:center; padding:5vw;
  backdrop-filter:blur(3px);
}
.modal-backdrop.show{display:flex;}
.modal-card{
  position:relative; width:100%; max-width:480px; max-height:86vh; overflow-y:auto;
  background:var(--bg); border-radius:24px; padding:32px; border:1px solid var(--line-soft);
}
.modal-close{
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:var(--bg-raised); color:var(--text); font-size:18px; line-height:1; cursor:pointer;
}
.modal-header{display:flex; gap:14px; align-items:center; margin-bottom:24px; padding-right:36px;}
.modal-header img{width:56px; height:56px; object-fit:cover; border-radius:12px; border:1px solid var(--line);}
.modal-pack-name{font-family:'Montserrat',sans-serif; font-weight:600; font-size:18px;}
.modal-pack-price{color:var(--accent); font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px;}

.modal-items{display:flex; flex-direction:column; gap:18px; margin-bottom:26px;}
.modal-item{padding-bottom:16px; border-bottom:1px solid var(--line-soft);}
.modal-item-label{font-size:13.5px; margin-bottom:10px;}
.modal-color-preview{
  width:100%;
  height:180px;
  object-fit:cover;
  object-position:center 30%;
  border-radius:14px;
  border:1px solid var(--line);
  margin-bottom:12px;
  display:block;
}
.modal-swatches{display:flex; gap:9px; align-items:center; flex-wrap:wrap;}
.modal-swatches .swatch{
  width:24px; height:24px; border-radius:50%; cursor:pointer;
  border:1.5px solid var(--line); position:relative; flex-shrink:0;
}
.modal-swatches .swatch.active::after{
  content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--accent);
}
.modal-swatch-label{font-size:12px; color:var(--muted); margin-left:2px;}

@media (max-width:480px){
  .modal-card{padding:26px 22px; max-width:100%;}
  .modal-swatches{gap:8px;}
  .modal-swatches .swatch{width:26px; height:26px;}
  /* Always put the color name on its own line on mobile — otherwise longer
     names (e.g. "Vert bouteille") wrap awkwardly while short ones stay inline,
     making the row look inconsistent/misaligned from item to item. */
  .modal-swatch-label{
    flex-basis:100%; margin-left:0; margin-top:6px; font-size:13px;
  }
}

/* ---------- Basket panel ---------- */
.basket-backdrop{
  position:fixed; inset:0; z-index:80; background:rgba(20,17,10,.45);
  display:none;
}
.basket-backdrop.show{display:block;}
.basket-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:81;
  width:min(420px, 92vw); background:var(--bg);
  transform:translateX(100%); transition:transform .35s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column; box-shadow:-20px 0 50px rgba(0,0,0,.15);
}
.basket-panel.show{transform:translateX(0);}
.basket-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:24px 24px 18px; border-bottom:1px solid var(--line-soft);
}
.basket-head h3{font-family:'Montserrat',sans-serif; font-weight:600; font-size:18px; margin:0;}
.basket-head .modal-close{position:static;}
.basket-items{flex:1; overflow-y:auto; padding:18px 24px;}
.basket-empty{color:var(--muted); font-size:14px; text-align:center; margin-top:40px;}

.basket-item{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line-soft); position:relative;}
.basket-item img{width:52px; height:52px; object-fit:cover; border-radius:10px; border:1px solid var(--line); flex-shrink:0;}
.basket-item-body{flex:1; min-width:0; padding-right:20px;}
.basket-item-head{display:flex; justify-content:space-between; gap:8px; font-size:14px; margin-bottom:4px;}
.basket-item-head b{font-family:'Montserrat',sans-serif; font-weight:600;}
.basket-item-list{list-style:none; margin:0; padding:0; font-size:11.5px; color:var(--muted); line-height:1.6;}
.basket-item-remove{
  position:absolute; top:14px; right:0;
  width:22px; height:22px; border-radius:50%; border:1px solid var(--line);
  background:var(--bg-raised); color:var(--muted); font-size:14px; line-height:1; cursor:pointer;
}
.basket-item-remove:hover{color:var(--text);}

.basket-foot{padding:20px 24px 26px; border-top:1px solid var(--line-soft);}
.basket-total{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:16px; margin-bottom:14px;
}
#basketCheckout:disabled{opacity:.5; cursor:not-allowed;}