/* =========================
   V-STORE — banner
   ========================= */
  /* ===== Dynamic Brand Banner ===== */


/* =========================
   V-STORE — Home add-ons (align index.html)
   
   ========================= */
/* Country picker modal */
#country-dialog::backdrop { background: rgb(0 0 0 / .45); }
#country-dialog {
  border: 0;
  padding: 0;
  background: var(--card);
  color: var(--text);
  border-radius: 16px;
  box-shadow: var(--shadow-l);
  width: min(560px, 92vw);
}
.deliver-inline{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .55rem; border:1px solid var(--border);
  border-radius:10px; background:color-mix(in oklab, var(--text) 4%, transparent);
}
.utility-bar .deliver-inline{ color:#0e0e0e; border-color:rgba(232, 13, 13, 0.18); background:rgba(177, 207, 41, 0.06); }
.deliver-inline select{
  border:0; background:transparent; color:inherit; padding:.25rem .2rem; min-width:150px;
}
.deliver-inline select:focus{ outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 40%, transparent); border-radius:8px; }
.country-modal { display: grid; gap: .75rem; padding: .9rem; }
.country-modal__header {
  display:flex; align-items:center; justify-content:space-between;
  padding: .25rem .15rem .25rem .15rem;
}
.country-modal__header h3 { margin: 0; font-size: 1.1rem; }
.country-close {
  border:0; background:transparent; font-size:1.1rem; cursor:pointer;
  border-radius: 8px; padding: .35rem .45rem;
}
.country-close:hover { background: color-mix(in oklab, var(--text) 8%, transparent); }

.country-search input{
  width:100%; padding:.7rem .8rem; border-radius:12px;
  border:1px solid var(--border); background:var(--bg); color:var(--text);
}
.country-search input:focus { box-shadow: 0 0 0 3px color-mix(in oklab,var(--accent) 25%, transparent); outline:none; }

.country-list {
  max-height: 50vh; overflow:auto; display:grid; gap:.35rem;
  padding-right: .2rem;
}
.country-option{
  width:100%; text-align:left; padding:.6rem .7rem; border-radius:10px;
  border:1px solid var(--border); background:var(--card); color:inherit; cursor:pointer;
}
.country-option:hover,
.country-option:focus-visible{
  background: color-mix(in oklab, var(--text) 6%, transparent);
  outline: none;
}
.country-modal__footer {
  display:flex; justify-content:flex-end; gap:.5rem; margin-top:.25rem;
}

/* Mobile tweaks */
@media (max-width: 480px){
  #country-dialog { width: 94vw; }
}

/* ---------- PROMO TICKER ---------- */
.promo{
  background:var(--brand);color:var(--brand-ink);font-weight:600;
  border-bottom:1px solid color-mix(in oklab,var(--brand-ink) 10%,transparent)
}
.promo .promo-track{display:flex;gap:24px;overflow:auto;white-space:nowrap;padding:.4rem .75rem}
.promo .promo-track::-webkit-scrollbar{display:none}

/* =========================
   HEADER (two rows)
   ========================= */
.site-header{position:relative;z-index:50}

/* Row 1: Utility bar */
.nav.utility-bar{background:#131921;color:#fff}
.utility-bar .nav-inner{
  max-width:var(--container);margin-inline:auto;padding:.5rem clamp(8px,3vw,16px);
  display:grid;align-items:center;gap:8px;
  grid-template-columns:auto auto 1fr auto auto auto auto auto;
}
.logo{font-size:1.25rem;font-weight:800;letter-spacing:.3px}
.utility-bar .icon-btn,.utility-bar a,.utility-bar button{color:#fff}

.header-search{
  display:grid;grid-template-columns:auto 1fr auto;gap:0;background:#fff;border-radius:999px;
  overflow:hidden;border:2px solid transparent;
}
.header-search:focus-within{border-color:var(--brand)}
.header-search select{border:0;padding:.65rem .7rem;background:#f2f3f6;color:#111;min-width:110px}
.header-search input{border:0;padding:.65rem .75rem;min-width:0;color:#111}
.header-search button{background:var(--brand);color:#111;font-weight:700;padding:.65rem 1rem}
.cart-link{display:inline-flex;align-items:center;gap:.4rem}
.nav-toggle{display:none;color:#fff}

/* Row 2: Departments strip */
.nav.dept-bar{background:#232f3e;color:#fff;border-bottom:1px solid #1b2430}
.dept-bar .nav-inner{
  max-width:var(--container);margin-inline:auto;padding:.4rem clamp(8px,3vw,16px);
  display:flex;align-items:center;gap:10px;overflow:auto;
}
.dept-bar .chip{
  background:transparent;border:1px solid transparent;color:#fff;
  padding:.45rem .7rem;border-radius:999px;white-space:nowrap
}
.dept-bar .chip:hover{background:rgba(255,255,255,.08)}

/* ---------- SEARCH SUGGESTIONS PANEL ---------- */
.search-results{
  position:absolute;left:50%;transform:translateX(-50%);
  width:min(860px,92vw);max-height:60vh;overflow:auto;z-index:60;
  background:var(--card);border:1px solid var(--border);border-top:0;border-radius:0 0 12px 12px;box-shadow:var(--shadow-m);
}

/* =========================
   HERO (left cats + carousel + side panels)
   ========================= */
.hero.hero-amz{background:var(--bg-elev);position:relative}
.hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 40% at 50% 0, color-mix(in oklab,var(--accent) 12%, transparent), transparent 60%)}
.hero-grid{
  max-width:var(--container);margin:0 auto;padding:clamp(8px,3vw,16px);
  display:grid;gap:16px;grid-template-columns:220px 1fr 300px;
}
.side-cats{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:.6rem;box-shadow:var(--shadow-s);height:100%
}
.side-cats a{display:block;padding:.45rem .6rem;border-radius:8px;color:var(--accent)}
.side-cats a:hover{background:color-mix(in oklab,var(--text) 6%,transparent)}

.carousel{
  position:relative;border-radius:12px;overflow:hidden;background:var(--card);
  border:1px solid var(--border);box-shadow:var(--shadow-l)
}
.carousel .slide{display:none}
.carousel .slide[aria-current="true"], .carousel .slide:first-child{display:block}
.carousel img{width:100%;height:auto;display:block}

.hero-panels{display:grid;gap:12px}
.hero-panels .panel{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:1rem;box-shadow:var(--shadow-s)
}

/* =========================
   SHELVES / PRODUCTS (home rows)
   ========================= */
.shelf{padding:8px clamp(12px,4vw,24px) 20px;max-width:var(--container);margin:0 auto}
.section-title{font-size:1.25rem;margin:10px 0 12px}

.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:540px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:840px){.product-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1140px){.product-grid{grid-template-columns:repeat(6,1fr)}}

.product-item{
  background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.75rem;box-shadow:var(--shadow-s);
  display:grid;gap:.5rem;align-content:start
}
.product-item .media{display:grid;place-items:center;background:var(--bg-elev);border-radius:10px;aspect-ratio:1/1;overflow:hidden}
.product-title{font-size:.95rem;line-height:1.2;margin:0}
.rating{font-size:.9rem;color:#10d354}
.price{font-weight:700}
.add-to-cart{background:var(--brand);color:#111;font-weight:700;border-radius:10px;padding:.55rem .8rem}

/* =========================
   DEAL CARDS
   ========================= */
.deals{max-width:var(--container);margin:0 auto;padding:12px clamp(12px,4vw,24px)}
.deal-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.deal-card{
  position:relative;background:linear-gradient(180deg,var(--card) 0,var(--bg-elev) 100%);
  border:1px solid var(--border);border-radius:14px;padding:1rem;box-shadow:var(--shadow-s)
}
.ribbon{
  position:absolute;top:10px;left:-6px;background:var(--brand);color:#111;font-weight:800;
  padding:.25rem .5rem;border-radius:6px;box-shadow:var(--shadow-s)
}

/* =========================
   TESTIMONIALS
   ========================= */
.testimonials{max-width:var(--container);margin:0 auto;padding:8px clamp(12px,4vw,24px) 20px}
.testimonials .carousel{border:1px solid var(--border);background:var(--card);border-radius:12px;box-shadow:var(--shadow-s);overflow:hidden}
.testimonials .slide{padding:1rem}
.testimonials blockquote{margin:0 0 .5rem 0; font-style:italic; color:var(--text)}

/* =========================
   FOOTER + NEWSLETTER
   ========================= */
.footer{background:#131921;color:#fff;margin-top:24px}
.footer-inner{max-width:var(--container);margin:0 auto;padding:24px clamp(12px,4vw,24px)}
.footer-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.footer a{color:#cfe3ff}
.newsletter{display:flex;gap:.5rem;flex-wrap:wrap}
.newsletter input{
  flex:1 1 220px;padding:.7rem .9rem;border-radius:12px;border:1px solid color-mix(in oklab,#fff 14%,transparent);
  background:#fff;color:#111;
}
.newsletter button{padding:.7rem .9rem;border-radius:12px;border:0;background:#fff;color:#111;font-weight:800}
.form-hint{margin:.25rem 0 0;color:#c9d2e3;font-size:.9rem}
.legal{border-top:1px solid rgba(255,255,255,.1);margin-top:16px;padding-top:12px;color:#c9d2e3}

/* =========================
   CHAT WIDGET
   ========================= */
.chat-open{
  position:fixed;right:16px;bottom:16px;z-index:70;border-radius:999px;
  background:var(--accent);color:#fff;font-weight:700;padding:.7rem 1rem;box-shadow:var(--shadow-l)
}
.chat-box{
  position:fixed;right:16px;bottom:80px;width:min(420px,92vw);max-height:70vh;
  display:grid;grid-template-rows:auto 1fr auto;background:var(--bg);
  border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-l);z-index:80
}
.chat-box[hidden]{display:none}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem .8rem;border-bottom:1px solid var(--border)}
.chat-log{padding:.6rem .8rem;overflow:auto}
.chat-form{display:flex;gap:8px;border-top:1px solid var(--border);padding:.6rem .8rem}
.chat-form input{flex:1;border:1px solid var(--border);border-radius:10px;padding:.55rem .7rem;background:var(--bg)}
.chat-form button{background:var(--brand);color:#111;font-weight:700;border-radius:10px;padding:.55rem .9rem}

/* =========================
   RESPONSIVE (header/hero tweaks)
   ========================= */
@media (max-width:1200px){ .hero-grid{grid-template-columns:200px 1fr 280px} }
@media (max-width:992px){
  .utility-bar .nav-inner{grid-template-columns:auto auto 1fr auto auto auto}
  .hero-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .side-cats{order:2} .hero-panels{order:3}
}
@media (max-width:768px){
  .utility-bar .nav-inner{grid-template-columns:auto 1fr auto auto}
  .header-search select{display:none}
  .dept-bar .nav-inner{gap:6px}
  .nav-toggle{display:inline-flex}
}
@media (max-width:480px){
  .header-search input{padding:.55rem .6rem}
  .header-search button{padding:.55rem .75rem}
  .chat-open{right:12px;bottom:12px}
  .chat-box{right:12px;bottom:68px}
}

/* ---------- TOKENS ---------- */
:root{
  --bg:#fff; --bg-elev:#f6f7f9; --card:#fff; --text:#0b0c10; --muted:#5c6170; --border:#e5e8ee;
  --brand:#ff9900; --brand-ink:#111; --accent:#146eb4;
  --chip-bg:#f2f3f6; --chip-ink:#202231;
  --radius-s:.5rem; --radius-m:.75rem; --radius-l:1rem;
  --shadow-s:0 1px 2px rgba(0,0,0,.06); --shadow-m:0 4px 14px rgba(0,0,0,.08); --shadow-l:0 10px 30px rgba(0,0,0,.12);
  --container:1200px;
}
[data-theme="dark"]{
  --bg:#0b0d10; --bg-elev:#0f1318; --card:#0f1318; --text:#e7e9ee; --muted:#aeb4c2; --border:#1d2330;
  --chip-bg:#121826; --chip-ink:#dfe3ee; --accent:#5aa9ff;
}

/* ---------- RESET/BASE ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
ul{list-style:none;margin:0;padding:0}
.visually-hidden{position:absolute!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;border:0!important;padding:0!important;margin:-1px!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- NAV (matches your existing top nav) ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}
.nav .nav-inner{max-width:var(--container);margin:0 auto;padding:.6rem 1rem;display:flex;align-items:center;gap:12px}
.logo{font-weight:800;letter-spacing:.3px}
.nav-toggle{display:none}
.nav-links{display:flex;gap:12px;margin-left:auto;align-items:center}
.badge{display:inline-block;min-width:1.25rem;padding:.05rem .35rem;border-radius:999px;background:var(--brand);color:var(--brand-ink);font-weight:700}

/* ---------- PAGE HERO ---------- */
.page-hero{
  border-bottom:1px solid var(--border);
  background: radial-gradient(70% 40% at 10% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent) var(--bg-elev);
}
.hero-inner{max-width:var(--container);margin:0 auto;padding:1.2rem 1rem}
.hero-inner h1{margin:.2rem 0 .25rem;font-size:clamp(1.6rem,3.5vw,2.2rem)}
.muted{color:var(--muted)}
.row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-top:.6rem}

/* Search form (uses your IDs) */
.search{display:flex;gap:.5rem}
.search input{
  width:min(560px,90vw);padding:.75rem .9rem;border-radius:999px;border:1px solid var(--border);background:var(--card)
}
.search input:focus{box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 25%, transparent)}
.search button{
  padding:.75rem 1rem;border-radius:999px;border:0;background:var(--brand);color:#111;font-weight:700
}

/* Sort select */
.sort select{
  padding:.7rem .8rem;border-radius:10px;border:1px solid var(--border);
  background:var(--card);min-width:180px
}

/* ---------- DEPT GRID (Shop by Department) ---------- */
.section-title{max-width:var(--container);margin:1.2rem auto .6rem;padding:0 1rem;font-size:1.25rem}
.dept-grid-wrap{max-width:var(--container);margin:0 auto;padding:0 1rem}
.dept-grid{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.dept-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.dept-grid{grid-template-columns:1fr}}
.dept-card{
  display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;background:var(--card);
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-s);transition:transform .15s ease, box-shadow .15s ease
}
.dept-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.dept-emoji{font-size:1.5rem}
.dept-name{font-weight:800}
.dept-card.fruits{border-left:4px solid color-mix(in oklab,var(--brand) 60%, transparent)}
.dept-card.vegetables{border-left:4px solid color-mix(in oklab,#22c55e 60%, transparent)}
.dept-card.dairy{border-left:4px solid color-mix(in oklab,#8a5bff 60%, transparent)}
.dept-card.eggs{border-left:4px solid color-mix(in oklab,var(--text) 25%, transparent)}
.dept-card.meat{border-left:4px solid color-mix(in oklab,#ff7a7a 60%, transparent)}
.dept-card.seafood{border-left:4px solid color-mix(in oklab,#4db6ff 60%, transparent)}
.dept-card.bakery{border-left:4px solid color-mix(in oklab,#ffc46b 60%, transparent)}
.dept-card.pantry{border-left:4px solid color-mix(in oklab,#b8a4ff 60%, transparent)}
.dept-card.beverages{border-left:4px solid color-mix(in oklab,#7ce0ff 60%, transparent)}

/* ---------- FEATURED ROWS (placeholder container) ---------- */
.featured-rows.container{max-width:var(--container);margin:0 auto;padding:0 1rem 1rem}
#featured-rows{display:grid;gap:1rem}

/* ---------- MAIN LAYOUT ---------- */
.container{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:280px 1fr;gap:1rem;padding:1rem}
@media (max-width:980px){.container{grid-template-columns:1fr}}

/* Filters sidebar */
.filters{
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1rem;height:max-content;
  position:sticky;top:76px;box-shadow:var(--shadow-s)
}
.filters-title{margin:.2rem 0 .6rem}
.checklist{display:grid;gap:.4rem}
.checklist input{margin-right:.4rem}
.range{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;align-items:end;margin-top:.25rem}
.range label{font-size:.9rem;color:var(--muted)}
.range input{
  padding:.6rem .7rem;border-radius:10px;border:1px solid var(--border);background:var(--card)
}
.filter-actions{display:flex;gap:.5rem;margin-top:.7rem}
.btn-ghost{border:1px solid var(--border);background:transparent;padding:.6rem .9rem;border-radius:10px}
.btn-primary{border:0;background:linear-gradient(135deg,var(--brand),#ffd089);color:#111;padding:.6rem .9rem;border-radius:10px;font-weight:800}

/* Results / toolbar */
.results .toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;gap:.75rem;flex-wrap:wrap}
#result-count{color:var(--muted)}
#active-chips.chips{display:flex;gap:.4rem;flex-wrap:wrap}
#active-chips .chip{
  display:inline-flex;align-items:center;gap:.35rem;background:var(--chip-bg);color:var(--chip-ink);
  border:1px solid var(--border);padding:.3rem .6rem;border-radius:999px;font-size:.9rem
}
#active-chips .chip button{border:0;background:transparent;cursor:pointer}

/* Product grid (cards are injected by JS) */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.card{
  position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1rem;
  box-shadow:var(--shadow-s);transition:transform .15s ease, box-shadow .15s ease
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.wish{position:absolute;top:10px;right:10px;border:0;background:color-mix(in oklab,var(--text) 10%, transparent);border-radius:999px;width:36px;height:36px}
.media{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--bg-elev);margin-bottom:.7rem}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.card:hover .media img{transform:scale(1.03)}
.title{margin:.1rem 0 .3rem}
.meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.rating{color:#ffd34d}
.price{font-weight:800}
.actions{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem;gap:.6rem}
.qty{
  display:inline-grid;grid-auto-flow:column;gap:.4rem;align-items:center;
  background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:.2rem .4rem
}
.qty .dec,.qty .inc{border:0;background:transparent;font-size:1.1rem;padding:.2rem .45rem}
.add-to-cart{
  flex:1;border:0;background:linear-gradient(135deg,var(--brand),#ffd089);
  color:#111;font-weight:800;padding:.6rem .8rem;border-radius:10px
}

/* ---------- TOAST ---------- */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(10px);
  background:var(--card);color:var(--text);border:1px solid var(--border);
  padding:.75rem 1rem;border-radius:12px;box-shadow:var(--shadow-m);
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:1000
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
[hidden].toast{display:none}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--border);background:var(--bg-elev);margin-top:1rem}
.footer-inner{max-width:var(--container);margin:0 auto;padding:1rem}

/* ---------- RESPONSIVE TOUCHES ---------- */
@media (max-width:860px){
  .filters{position:static}
}
@media (max-width:700px){
  .search input{width:100%}
}
@media (max-width:520px){
  .btn-primary,.btn-ghost{flex:1}
}
/* ======= Top Nav: desktop bar + mobile drawer ======= */
:root{
  --nav-h: 56px;
  --brand: #ff9900;
  --border: #2b2f36;
  --surface-1: #0f141a;
  --text: #e6e6e6;
  --bg: #0b0f14;
}
html[data-theme="light"]{
  --border:#e5e7eb; --surface-1:#ffffff; --text:#111827; --bg:#ffffff;
}

.nav{
  position: sticky; top: 0; z-index: 1000;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.nav-inner{
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); padding: 0 16px; gap: 10px;
}
.logo{ font-weight: 800; font-size: 1.2rem; color: var(--text); text-decoration: none; }

.nav-toggle{
  appearance: none; border: 0; background: transparent; color: var(--text);
  font-size: 1.3rem; line-height: 1; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; display: none; /* shown on mobile */
}

.nav-links{
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 14px;
}
.nav-links a, .nav-links button.icon-btn{
  color: var(--text); text-decoration: none; font: inherit;
  padding: 8px 10px; border-radius: 10px; border: 0; background: transparent;
}
.nav-links a:hover{ background: rgba(255,255,255,.06); }

.badge{
  display: inline-flex; min-width: 18px; height: 18px; padding: 0 6px;
  align-items: center; justify-content: center; border-radius: 999px;
  background: var(--brand); color: #000; font-size: .75rem; font-weight: 700;
}

.icon-btn{ cursor: pointer; }

/* ---- Mobile drawer ---- */
@media (max-width: 900px){
  .nav-toggle{ display: inline-flex; }
  .nav-links{
    position: fixed; z-index: 1001;
    top: 0; right: 0; bottom: 0; width: min(80vw, 320px);
    flex-direction: column; align-items: stretch;
    padding: 72px 16px 16px; gap: 4px;
    background: var(--surface-1); border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform .25s ease;
  }
  .nav-links.open{ transform: translateX(0%); }
  .nav-links li a, .nav-links li button{
    text-align: left; border-radius: 12px; padding: 12px 14px;
  }
}

/* overlay behind drawer */
.nav-overlay{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.nav-overlay.show{ opacity: 1; pointer-events: auto; }

/* ---- Department “chips” bar looks like a menu ---- */
.dept-nav{
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.dept-chips{
  list-style: none; display: flex; gap: 8px;
  padding: 10px 16px; margin: 0; overflow: auto;
}
.dept-chips a{
  display: inline-block; border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 999px; text-decoration: none;
  color: var(--text); white-space: nowrap;
}
.dept-chips a:hover{ background: rgba(255,255,255,.06); }
.dept-chips a[aria-current="page"]{
  background: var(--brand); color: #111; border-color: var(--brand);
  font-weight: 700;
}
/* ===================== PRINT RECEIPT ===================== */
.screen-only { display: initial; }
.print-only  { display: none; }

@media print {
  :root{
    /* High-contrast print palette */
    --print-fg: #111;
    --print-muted: #555;
    --print-border: #d7d9e0;
  }

  @page { size: A4; margin: 12mm; }

  html, body{
    background: #fff !important;
    color: var(--print-fg) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide chrome we don't want in the PDF */
  .promo, .nav, .footer, .skip-link, .page-hero,
  .btn-primary, .btn-ghost, .toast, .filters,
  .screen-only { display: none !important; }

  .print-only { display: initial !important; }

  /* Layout simplification */
  .container{ display:block !important; max-width: 800px; }
  .results{ width:100% !important; }

  .card{
    background:#fff !important;
    color: var(--print-fg) !important;
    border: 1px solid var(--print-border) !important;
    box-shadow: none !important;
  }

  /* Header line with brand + order id (from JS variables) */
  body::before{
    content: var(--print-brand, "V-STORE") " — " var(--print-order, "");
    display:block;
    font: 700 14pt/1.2 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
    margin: 0 0 6mm;
  }

  /* Typography */
  h1{ font-size:16pt; margin:0 0 3mm; }
  h2{ font-size:13pt; margin:0 0 2mm; }
  h3{ font-size:11pt; margin:4mm 0 1.5mm; }
  .muted, .form-hint{ color: var(--print-muted) !important; }

  /* Items list */
  #order-items > li{ padding: 6mm 5mm !important; break-inside: avoid; }
  #order-items img{ width:24mm; height:24mm; object-fit:cover; border-radius:4px; }

  /* Totals */
  .summary-lines .meta{ font-size:10.5pt; }
  #sum-total{ font-size:12pt; }

  /* Links: remove color/underline, optionally show URL */
  a{ color: inherit !important; text-decoration: none !important; }
  a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:9pt; color: var(--print-muted);
  }

  /* Avoid weird transforms in print */
  *{ transform:none !important; filter:none !important; }
}
body::after{
    /* The text comes from CSS variables set in thank-you.js */
    content:
      "Ship to:\A"
      var(--print-ship-name) "\A"
      var(--print-ship-address) "\A"
      var(--print-ship-contact);
    white-space: pre-wrap;

    display: block;
    margin: 0 0 6mm;
    padding: 4mm 5mm;
    border: 1px solid var(--print-border);
    border-radius: 4px;

    font: 12pt/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
    color: var(--print-fg);
  }