/* ============================================================
   ScanToShop360 — Storefront styles (light, multi-theme aware)
   ============================================================ */

/* ---- White theme base (storefront pages only) ----
   Pure-white page; depth comes from borders + soft shadows, not grey fills. */
body{background:#ffffff}
.site-main{background:#ffffff}
.site-header{background:rgba(255,255,255,.86)}

/* ---- Header ---- */
.topbar-note{background:var(--warn-bg);color:#7c4a03;text-align:center;font-size:13px;padding:7px 12px}
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);transition:box-shadow .2s ease,background .2s ease}
.site-header.scrolled{background:rgba(255,255,255,.92);box-shadow:0 4px 20px -8px rgba(16,24,40,.18)}
.site-header-inner{display:flex;align-items:center;gap:18px;padding:10px 20px;min-height:64px;position:relative;z-index:2}
.logo{flex:none;display:flex;align-items:center}
.logo img{display:block}
/* How big the logo is set in Settings → Branding is the shopkeeper's call,
   but on a phone it still has to leave room for the search box and the cart. */
@media(max-width:560px){.site-header .brand-logo-img{max-height:52px}}

/* search */
.search{flex:1;max-width:860px;display:flex;position:relative}
.search .input{padding:12px 54px 12px 18px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.search .input:focus{background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.search-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;
  width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--grad);color:#fff;
  font-size:15px;cursor:pointer;line-height:1;transition:.15s;box-shadow:var(--shadow-sm)}
.search-btn:hover{filter:brightness(1.08);color:#fff}
/* ---- Search autocomplete ---- */
.search-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.28);overflow:hidden;max-height:70vh;overflow-y:auto}
.search-suggest[hidden]{display:none}
.ss-group-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:12px 16px 6px}
.ss-item{display:flex;align-items:center;gap:12px;padding:9px 16px;cursor:pointer;
  text-decoration:none;color:var(--ink);border:none;background:none;width:100%;text-align:left;font:inherit}
.ss-item:hover,.ss-item.active{background:var(--surface-2)}
.ss-thumb{width:44px;height:44px;flex:0 0 44px;border-radius:10px;object-fit:cover;
  background:var(--surface-2);border:1px solid var(--line)}
.ss-thumb.ph{display:grid;place-items:center;font-size:20px;color:var(--muted)}
.ss-info{min-width:0;flex:1}
.ss-name{font-size:14px;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-meta{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;margin-top:2px}
.ss-price{color:var(--brand);font-weight:600}
.ss-old{text-decoration:line-through;color:var(--muted);font-weight:400}
.ss-cat{display:flex;align-items:center;gap:8px;padding:9px 16px;text-decoration:none;color:var(--ink);font-size:13.5px}
.ss-cat:hover,.ss-cat.active{background:var(--surface-2)}
.ss-cat b{font-weight:600}
.ss-all{display:block;padding:11px 16px;text-align:center;font-size:13px;font-weight:600;
  color:var(--brand);text-decoration:none;border-top:1px solid var(--line);background:var(--surface-2)}
.ss-all:hover,.ss-all.active{filter:brightness(.97);text-decoration:underline}
.ss-empty{padding:18px 16px;text-align:center;color:var(--muted);font-size:13.5px}
.ss-sep{height:1px;background:var(--line);margin:4px 0}

/* nav */
.site-nav{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--ink-soft);margin-left:auto}
/* text links (Shop, account) get a soft pill hover; icon links are excluded */
.site-nav>a:not(.cart-link):not(.wish-link){color:var(--ink-soft);padding:8px 12px;border-radius:10px;transition:.15s;white-space:nowrap}
.site-nav>a:not(.cart-link):not(.wish-link):hover{color:var(--brand);background:var(--brand-soft);text-decoration:none}
.cur-switch{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer}

/* unified icon buttons (cart + wishlist) */
.cart-link,.wish-link{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  font-size:17px;color:var(--ink-soft);flex:none;transition:.15s;background:var(--surface-2)}
.nav-div{width:1px;height:28px;background:var(--line);margin:0 4px;flex:none}
.cart-link:hover{background:var(--surface-2);color:var(--brand);text-decoration:none}
.wish-link:hover{background:var(--surface-2);color:#e11d48;text-decoration:none}
.cart-count{position:absolute;top:-2px;right:-2px;background:var(--grad);color:#fff;font-size:9.5px;
  font-weight:700;min-width:16px;height:16px;border-radius:999px;display:grid;place-items:center;padding:0 4px;
  border:2px solid var(--surface);box-sizing:border-box;line-height:1}

.site-main{min-height:60vh;padding-bottom:40px}
.section{padding:40px 20px 10px}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--brand-soft),transparent)}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:60px 20px}
.hero-text h1{font-size:clamp(30px,4.4vw,52px);margin:14px 0 12px}
.hero-text .lead{font-size:18px;color:var(--ink-soft);max-width:520px;margin-bottom:24px}
.hero-art{position:relative;height:300px}
.blob{position:absolute;border-radius:50%;filter:blur(8px);opacity:.5}
.blob.b1{width:240px;height:240px;background:var(--brand);right:30px;top:10px}
.blob.b2{width:180px;height:180px;background:var(--brand-2);right:140px;top:120px}
.hero-card{position:absolute;right:50px;top:120px;background:#fff;box-shadow:var(--shadow-lg);
  border-radius:18px;padding:22px 26px;font-size:40px;text-align:center;display:grid;gap:8px}
.hero-card span{font-size:14px;font-weight:600;color:var(--ink-soft)}
.hero-trust{margin-top:22px;font-size:13.5px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero-trust .stars{color:#f59e0b;letter-spacing:1px}
.hero-trust .dot{opacity:.4}

/* ---- Hero slider / carousel ---- */
.hero-slider{position:relative;overflow:hidden}
.hs-track{display:flex;transition:transform .6s cubic-bezier(.22,1,.36,1);will-change:transform}
.hs-slide{min-width:100%;color:#fff}
.hs-slide.hs-brand{background:var(--grad)}
.hs-slide.hs-sunset{background:linear-gradient(120deg,#f97316,#ef4444 70%,#ec4899)}
.hs-slide.hs-ocean{background:linear-gradient(120deg,#0ea5e9,#06b6d4 70%,#22d3ee)}
.hs-slide.hs-forest{background:linear-gradient(120deg,#059669,#10b981 70%,#84cc16)}
.hs-slide.hs-dark{background:linear-gradient(120deg,#1e293b,#334155 70%,#0f172a)}
.hs-slide.hs-halloween{background:linear-gradient(120deg,#3b0764,#6d28d9 55%,#c2410c)}
.hs-inner{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;padding:54px 20px;min-height:400px}
.hs-text{max-width:560px}
.hs-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;letter-spacing:.03em;margin-bottom:16px}
.hs-text h1{color:#fff;font-size:clamp(28px,4.4vw,48px);line-height:1.12;margin:0 0 12px}
.hs-text p{color:rgba(255,255,255,.92);font-size:17px;margin:0 0 24px;max-width:460px}
.hs-cta{background:#fff;color:var(--ink);border:none;font-weight:700;box-shadow:var(--shadow)}
.hs-cta:hover{transform:translateY(-2px);filter:brightness(.98)}
.hs-art{display:grid;place-items:center;min-height:280px}
.hs-photo{width:300px;height:300px;border-radius:28px;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4);transform:rotate(-3deg);animation:hs-float 6s ease-in-out infinite}
.hs-photo img{width:100%;height:100%;object-fit:cover}
.hs-photo.emoji{font-size:120px}
@keyframes hs-float{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-12px)}}
.hs-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:none;background:rgba(255,255,255,.9);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--shadow);transition:.15s;z-index:3;opacity:0}
.hero-slider:hover .hs-arrow{opacity:1}
.hs-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.hs-arrow.prev{left:18px}.hs-arrow.next{right:18px}
.hs-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.hs-dots button{width:10px;height:10px;border-radius:999px;border:none;background:rgba(255,255,255,.5);cursor:pointer;transition:.2s;padding:0}
.hs-dots button.active{background:#fff;width:26px}
@media(max-width:760px){
  .hs-inner{grid-template-columns:1fr;text-align:center;padding:38px 18px;min-height:auto;gap:18px}
  .hs-text{margin:0 auto}.hs-text p{margin-left:auto;margin-right:auto}
  .hs-art{display:none}
  .hs-arrow{display:none}
}

/* promo strip */
.promo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:8px 20px 0}
.promo-card{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--radius);color:#fff;
  box-shadow:var(--shadow-sm);transition:.16s;overflow:hidden;position:relative}
.promo-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.promo-card .pc-ic{font-size:28px;width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
.promo-card b{display:block;font-size:16px}.promo-card span{font-size:13px;opacity:.92}
.promo-card.p1{background:linear-gradient(120deg,#f97316,#ef4444)}
.promo-card.p2{background:linear-gradient(120deg,#6366f1,#8b5cf6)}
.promo-card.p3{background:linear-gradient(120deg,#0ea5e9,#06b6d4)}

/* section heading */
.section-head{margin:0 0 20px}
.section-head .eyebrow{display:inline-block;color:var(--brand);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.section-head h2{font-size:26px;margin:0}
.section .flex.between h2{font-size:24px;position:relative;padding-left:14px}
.section .flex.between h2::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:3px;background:var(--grad)}

/* ---- Category grid ---- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.cat-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 12px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);font-weight:600;color:var(--ink);transition:.15s}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none;border-color:var(--brand)}
.cat-emoji{font-size:30px;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:var(--brand-soft)}

/* ---- Product grid + card ---- */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.prod-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:.18s;box-shadow:var(--shadow-sm)}
.prod-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.prod-thumb{position:relative;aspect-ratio:1/1;background:var(--surface-2);display:block;overflow:hidden}
.prod-thumb img{width:100%;height:100%;object-fit:cover}
.thumb-ph{width:100%;height:100%;display:grid;place-items:center;font-size:54px;opacity:.5}
.sale-badge{position:absolute;top:10px;left:10px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:999px;z-index:2}
.out-badge{position:absolute;inset:0;background:rgba(255,255,255,.66);display:grid;place-items:center;
  font-weight:700;color:var(--ink-soft);z-index:2}
/* heart on product cards (overlaid top-right of the thumb) */
.wish-heart{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border:none;border-radius:50%;
  background:rgba(255,255,255,.9);box-shadow:var(--shadow);cursor:pointer;font-size:16px;line-height:1;
  color:#c0c6d4;display:grid;place-items:center;transition:.15s}
.wish-heart:hover{transform:scale(1.1);color:#e11d48}
.wish-heart.active{color:#e11d48}
.wish-heart:disabled{opacity:.6;cursor:default}
/* heart buttons on the product detail page */
.wish-btn.active{color:#e11d48;border-color:#e11d48}
/* header wishlist badge (link styling lives in the unified icon-button rule above) */
.wish-count{position:absolute;top:-2px;right:-2px;background:var(--grad);color:#fff;font-size:9.5px;
  font-weight:700;min-width:16px;height:16px;border-radius:999px;display:grid;place-items:center;padding:0 4px;
  border:2px solid var(--surface);box-sizing:border-box;line-height:1}
.prod-body{padding:14px;display:flex;flex-direction:column;gap:10px;flex:1}
.prod-name{font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.prod-name:hover{color:var(--brand);text-decoration:none}
.prod-price{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.prod-price .price{font-size:18px}

/* star ratings (cards + reuse) */
.card-rating{display:flex;align-items:center;gap:6px;margin-top:-2px}
.stars{position:relative;display:inline-block;font-size:13px;letter-spacing:2px;color:var(--line-strong);line-height:1;white-space:nowrap}
.stars::before{content:'★★★★★';position:absolute;left:0;top:0;width:var(--pct,0);overflow:hidden;white-space:nowrap;color:#f59e0b}
.card-rating .rc{font-size:12px;color:var(--muted);font-weight:600}

/* ---- Mini-cart slide-out drawer ---- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;z-index:70}
.drawer-backdrop.open{opacity:1;visibility:visible}
.mini-cart{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:#fff;z-index:71;
  display:flex;flex-direction:column;box-shadow:-12px 0 40px -12px rgba(16,24,40,.3);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.mini-cart.open{transform:none}
.mc-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.mc-head h3{margin:0;font-size:18px;display:flex;align-items:center;gap:8px}
.mc-head .mc-count{background:var(--grad);color:#fff;font-size:12px;font-weight:700;border-radius:999px;min-width:22px;height:22px;display:inline-grid;place-items:center;padding:0 7px}
.mc-close{border:none;background:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:4px}
.mc-close:hover{color:var(--ink)}
.mc-items{flex:1;overflow-y:auto;padding:8px 14px}
.mc-empty{text-align:center;color:var(--muted);padding:60px 20px;display:flex;flex-direction:column;align-items:center;gap:4px}
.mc-empty .mce-ic{font-size:48px;margin-bottom:6px;opacity:.85}
.mc-empty b{color:var(--ink);font-size:16px}
.mc-row{display:flex;gap:12px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--line)}
.mc-thumb{width:58px;height:58px;border-radius:10px;background:var(--surface-2);overflow:hidden;flex:none;display:grid;place-items:center;font-size:22px}
.mc-thumb img{width:100%;height:100%;object-fit:cover}
.mc-info{flex:1;min-width:0}
.mc-name{font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-price{font-size:12.5px;color:var(--muted)}
.mc-qty{display:flex;align-items:center;gap:8px;margin-top:6px}
.mc-qty button{width:26px;height:26px;border-radius:7px;border:1px solid var(--line-strong);background:#fff;cursor:pointer;font-size:15px;line-height:1;color:var(--ink)}
.mc-qty button:hover{border-color:var(--brand);color:var(--brand)}
.mc-qty .q{min-width:22px;text-align:center;font-weight:700;font-size:14px}
.mc-line{font-weight:700;font-size:14px;white-space:nowrap}
.mc-del{border:none;background:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 4px}
.mc-del:hover{color:var(--bad)}
.mc-foot{border-top:1px solid var(--line);padding:16px 20px;background:var(--surface)}
.mc-sub{display:flex;justify-content:space-between;font-size:16px;font-weight:800;margin-bottom:4px}
.mc-note{font-size:12px;color:var(--muted);margin-bottom:12px}
.mc-foot .btn-block + .btn-block{margin-top:8px}
@media(max-width:480px){.mini-cart{width:100vw}}

/* ---- Trust band ---- */
.band{background:linear-gradient(180deg,#fff,var(--brand-soft));border-top:1px solid var(--line);margin-top:40px}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:28px 20px}
.band-item{display:flex;align-items:center;gap:14px}
.band-item .bi{font-size:26px;width:50px;height:50px;display:grid;place-items:center;border-radius:14px;background:var(--brand-soft)}
.band-item b{display:block;font-size:14px}.band-item span{font-size:13px;color:var(--muted)}

/* ---- Shop / filters ---- */
.shop-wrap{display:grid;grid-template-columns:268px 1fr;gap:26px;padding:28px 20px}
.filters{align-self:start;position:sticky;top:92px}
.filters-toggle{display:none}
.filter-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.filter-card h4{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 12px;font-weight:700}
/* sidebar search */
.filter-search{position:relative}
.filter-search .input{padding:11px 42px 11px 14px;border-radius:999px;background:var(--surface-2);border-color:transparent}
.filter-search .input:focus{background:var(--surface);border-color:var(--brand)}
.filter-search button{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:none;background:none;font-size:15px;cursor:pointer;padding:6px;color:var(--ink-soft)}
/* category list */
.filter-cats{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.filter-cats a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-radius:10px;color:var(--ink-soft);font-size:14px;font-weight:500;transition:.12s}
.filter-cats a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.filter-cats a.active{background:var(--brand-soft);color:var(--brand);font-weight:700}
.filter-cats a b{font-size:11px;font-weight:700;background:var(--surface-2);color:var(--muted);min-width:22px;text-align:center;border-radius:999px;padding:2px 7px}
.filter-cats a.active b{background:var(--brand);color:#fff}
/* price range */
.price-range{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.price-range .input{padding:9px 10px;text-align:center}
.price-range .pr-sep{color:var(--muted)}
.filter-check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft);margin-bottom:14px;cursor:pointer}
.filter-clear{display:block;text-align:center;font-size:13px;font-weight:600;color:var(--bad);padding:8px}
.filter-clear:hover{text-decoration:underline}

/* shop head + sort + chips */
.shop-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;flex-wrap:wrap;gap:12px}
.shop-head h1{margin:0 0 2px}
.shop-sort{display:flex;align-items:center;gap:8px}
.shop-sort label{font-size:13px;color:var(--muted);font-weight:600}
.shop-sort select{width:auto;padding:9px 12px;border-radius:10px}
.active-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip-x{background:var(--brand-soft);color:var(--brand);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600}
.chip-x:hover{background:var(--brand);color:#fff;text-decoration:none}

/* ---- Product detail ---- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:30px 20px}
.pdp-media{position:relative;background:var(--surface-2);border-radius:var(--radius-lg);aspect-ratio:1/1;display:grid;place-items:center;
  overflow:hidden;font-size:90px;cursor:zoom-in}
.pdp-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.pdp-media:hover img{transform:scale(1.18)}
/* little "expand" hint shown on hover */
.pdp-zoom-hint{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;
  background:rgba(15,23,42,.55);color:#fff;display:grid;place-items:center;font-size:16px;
  opacity:0;transform:translateY(-4px);transition:.2s;pointer-events:none;z-index:2}
.pdp-media:hover .pdp-zoom-hint{opacity:1;transform:none}

/* full-image lightbox popup */
.img-lb{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(15,23,42,.86);backdrop-filter:blur(3px);padding:24px;cursor:zoom-out}
.img-lb.show{display:flex;animation:lb-fade .2s ease}
.img-lb img{max-width:92vw;max-height:90vh;object-fit:contain;border-radius:12px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);cursor:default;animation:lb-pop .2s ease}
.img-lb-close{position:absolute;top:18px;right:22px;width:46px;height:46px;border:none;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.15s}
.img-lb-close:hover{background:rgba(255,255,255,.32)}
@keyframes lb-fade{from{opacity:0}to{opacity:1}}
@keyframes lb-pop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pdp-thumb{width:68px;height:68px;border-radius:12px;overflow:hidden;border:2px solid var(--line);background:var(--surface-2);cursor:pointer;padding:0}
.pdp-thumb.active{border-color:var(--brand)}
.pdp-thumb img{width:100%;height:100%;object-fit:cover}
.pdp h1{font-size:30px;margin-top:6px}
.pdp .pdp-price{display:flex;align-items:baseline;gap:12px;margin:14px 0}
.pdp .pdp-price .price{font-size:30px}
.qty-row{display:flex;align-items:center;gap:14px;margin:22px 0}
.qty-box{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--radius-sm);overflow:hidden}
.qty-box button{border:none;background:var(--surface-2);width:42px;height:44px;font-size:20px;cursor:pointer}
.qty-box input{width:54px;text-align:center;border:none;font-size:16px;font-weight:600}
.pdp-meta{margin-top:22px;padding:16px 18px;font-size:14px;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);display:grid;gap:10px}
.pdp-meta div{margin:0;display:flex;align-items:center;gap:8px}
/* PDP polish */
.pdp-brand{color:var(--brand);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin:10px 0 2px}
.pdp h1{font-size:32px;line-height:1.2;margin-top:2px}
.pdp .pdp-price .price{font-size:34px;color:var(--brand)}
.pdp .pdp-price{align-items:center;gap:14px}
.pdp .badge.b-brand{font-size:12px;letter-spacing:.03em}
.pdp .soft{font-size:15px;line-height:1.7}
.qty-row{margin:24px 0 8px}
.qty-box{box-shadow:var(--shadow-sm)}
.pdp .add-cart{flex:1;min-width:160px}
.wish-btn{background:var(--surface);border:1px solid var(--line-strong)}

/* ---- Cart ---- */
.page-head{padding:26px 20px 6px}.page-head h1{font-size:28px}
/* CMS content pages (privacy, terms, etc.) */
/* ---- CMS pages (privacy, terms, about, faq) ---- */
.cms-hero{background:linear-gradient(180deg,var(--brand-soft),#fff);border-bottom:1px solid var(--line);padding:30px 0 26px;text-align:center}
.cms-hero .crumbs{font-size:13px;color:var(--muted);margin-bottom:10px}
.cms-hero .crumbs a{color:var(--ink-soft);font-weight:600}
.cms-hero .crumbs span{opacity:.5;margin:0 4px}
.cms-hero h1{font-size:clamp(26px,4vw,38px);margin:0;display:inline-flex;align-items:center;gap:12px}
.cms-hero .cms-ic{width:54px;height:54px;border-radius:16px;background:#fff;box-shadow:var(--shadow-sm);
  display:inline-grid;place-items:center;font-size:28px}
.cms-updated{color:var(--muted);font-size:13px;margin:12px 0 0}
.cms-wrap{max-width:840px;margin:0 auto;padding:36px 20px 50px}
.cms-content{line-height:1.8;color:var(--ink-soft);font-size:15.5px}
.cms-content h2{font-size:20px;color:var(--ink);margin:30px 0 10px;padding-left:14px;position:relative}
.cms-content h2::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:3px;background:var(--grad)}
.cms-content h2:first-child{margin-top:0}
.cms-content p{margin:0 0 16px}
.cms-content ul,.cms-content ol{margin:0 0 16px;padding-left:4px;list-style:none}
.cms-content ul li{position:relative;padding-left:26px;margin-bottom:10px}
.cms-content ul li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand);font-weight:800}
.cms-content ol{counter-reset:c;padding-left:0}
.cms-content ol li{position:relative;padding-left:34px;margin-bottom:10px;counter-increment:c}
.cms-content ol li::before{content:counter(c);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:700;display:grid;place-items:center}
.cms-content a{color:var(--brand);text-decoration:underline}
.cms-content b{color:var(--ink)}
.cms-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:34px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px}
.cms-cta b{display:block;color:var(--ink);font-size:16px}
.cms-cta span{color:var(--muted);font-size:14px}
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:26px;padding:10px 20px 40px;align-items:start}
.cart-row{display:flex;align-items:center;gap:14px;padding:14px;border-bottom:1px solid var(--line)}
.cart-row .ct-thumb{width:70px;height:70px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;font-size:26px;overflow:hidden;flex:none}
.cart-row .ct-thumb img{width:100%;height:100%;object-fit:cover}
.cart-row .ct-info{flex:1;min-width:0}
.cart-row .ct-name{font-weight:600}
.summary{position:sticky;top:90px}
.srow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;color:var(--ink-soft);font-size:14px}
.srow span:last-child{font-weight:600;color:var(--ink);white-space:nowrap}
.stotal{font-size:20px;font-weight:800;color:var(--ink);border-top:1px solid var(--line);margin-top:8px;padding-top:14px}
.stotal span:last-child{color:var(--brand)}
.summary h3{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
/* cart polish */
.cart-row{transition:background .12s}
.cart-row:hover{background:var(--surface-2)}
.cart-row .ct-thumb{box-shadow:var(--shadow-sm)}
.free-ship{background:var(--surface-2);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:14px;font-size:13px;color:var(--ink-soft)}
.free-ship b{color:var(--ink)}
.fs-bar{height:7px;border-radius:999px;background:var(--line-strong);margin-top:9px;overflow:hidden}
.fs-bar i{display:block;height:100%;background:var(--grad);border-radius:999px;transition:width .4s ease}
.secure-note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:12px}

/* ---- Checkout ---- */
.checkout-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:26px;padding:20px 20px 50px;align-items:start}
.step-head{display:flex;align-items:center;gap:10px;font-size:18px;margin-bottom:16px}
.step-head .step{width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;flex:none}
.method-opt{display:flex;gap:12px;align-items:flex-start;padding:15px;border:1.5px solid var(--line-strong);
  border-radius:var(--radius-sm);cursor:pointer;margin-bottom:10px;transition:.12s}
.method-opt:hover{border-color:var(--brand)}
.method-opt.active{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px var(--brand-soft)}
.method-opt input{margin-top:3px;accent-color:var(--brand)}
.bank-box{background:var(--surface-2);border-radius:var(--radius-sm);padding:14px;white-space:pre-line;font-size:13px;margin-top:8px}
/* bank-transfer payment proof */
.pp-form .field{margin-bottom:12px}
.pp-form .field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.pp-form textarea.input{resize:vertical;min-height:64px;font:inherit}
.pp-form input[type=file].input{padding:9px 12px;background:var(--surface-2);cursor:pointer}
.pp-summary{margin:4px 0 2px}
.pp-thumb{max-height:88px;max-width:160px;border-radius:10px;border:1px solid var(--line);object-fit:cover;display:block}
.checkout-grid .summary h3{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}

/* ---- Auth pages ---- */
/* the auth pages carry data-skin, so let the active skin's tokens paint them
   instead of the storefront's hard white body */
body.auth-page{background:var(--bg)}
.auth-wrap{min-height:78vh;display:grid;place-items:center;padding:30px 16px}
/* split-screen layout (brand panel + form) */
.auth-split{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.auth-brand{position:relative;overflow:hidden;background:var(--grad);color:#fff;padding:48px 52px;
  display:flex;flex-direction:column;justify-content:space-between}
.auth-brand::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.12)}
.auth-brand::before{content:"";position:absolute;left:-60px;bottom:-90px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.10)}
.ab-logo{position:relative;z-index:1}
/* the panel already *is* the theme gradient, so invert the lockup onto it */
.auth-brand .brand-mark{background:#fff;color:var(--brand);box-shadow:0 10px 26px -8px rgba(0,0,0,.32)}
.auth-brand .brand-text b{color:#fff}
.auth-brand .brand-text small{color:rgba(255,255,255,.72)}
/* Only a logo that would otherwise disappear into the panel is knocked through
   to white; one carrying its own colours reads better as it is, and a filled
   mark inverts into an unreadable white blob. PHP sets these classes — CSS
   cannot see inside the file. */
.auth-brand .brand-invert .brand-logo-img{filter:brightness(0) invert(1)}
/* No alpha channel at all: the mark arrives as a rectangle, so give it a chip
   rather than letting its own background look like a mistake. */
.auth-brand .brand-opaque .brand-logo-img{background:#fff;border-radius:10px;padding:4px}
.ab-body{position:relative;z-index:1}
.auth-brand h2{color:#fff;font-size:clamp(26px,3vw,38px);line-height:1.15;margin:0 0 14px}
.auth-brand p{color:rgba(255,255,255,.9);font-size:16px;max-width:420px;margin:0 0 28px}
.ab-perks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ab-perks li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500}
.ab-perks li .perk-ic{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:18px;flex:none}
.ab-foot{position:relative;z-index:1;color:rgba(255,255,255,.7);font-size:13px;margin:0}
.auth-main{display:grid;place-items:center;padding:40px 24px;background:var(--bg)}

.auth-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:36px}
.auth-card .logo-c{text-align:center;margin-bottom:18px}
.auth-card h1{font-size:24px;text-align:center;margin-bottom:4px}
.auth-sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:24px}
.auth-card .field label{font-size:13px}
.auth-card .input{padding:12px 14px}
.password-field{position:relative}
.password-field .input{padding-right:46px}
.password-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  border:none;background:transparent;padding:4px;cursor:pointer;
  color:var(--muted);font-size:18px;line-height:1
}
.password-toggle:hover{color:var(--ink)}
.password-toggle:focus{outline:none;color:var(--brand)}

/* ---- Password strength, on the forms that set one ----
   Two separate things, deliberately not merged. The RULES are the server's
   policy restated -- password_policy_error() refuses exactly those, so a fully
   ticked list means the form will be accepted. The METER is advice and has no
   veto: a shop that rejects a long passphrase for lacking a digit is teaching
   its customers to write passwords on the back of the loyalty card.

   Hidden until the field has something in it. An empty bar sitting under an
   empty box reads as a requirement not yet met, which is a discouraging thing
   to show somebody who has not started typing. */
.pw-meter{margin-top:10px}
.pw-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.pw-seg{height:5px;border-radius:99px;background:var(--line-strong);transition:background .25s ease}
.pw-meter[data-score="1"] .pw-seg:nth-child(-n+1){background:var(--bad)}
.pw-meter[data-score="2"] .pw-seg:nth-child(-n+2){background:var(--warn)}
.pw-meter[data-score="3"] .pw-seg:nth-child(-n+3){background:var(--good)}
.pw-meter[data-score="4"] .pw-seg{background:var(--good)}
.pw-note{margin:6px 0 0;font-size:12px;color:var(--muted);min-height:1em}
.pw-meter[data-score="1"] .pw-word{color:var(--bad)}
.pw-meter[data-score="2"] .pw-word{color:var(--warn)}
.pw-meter[data-score="3"] .pw-word,
.pw-meter[data-score="4"] .pw-word{color:var(--good)}
.pw-word{font-weight:700}

.pw-rules{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.pw-rule{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);transition:color .2s ease}
.pw-rule .pw-tick{
  width:16px;height:16px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--line-strong);background:transparent;color:transparent;
  font-size:9px;line-height:1;transition:.2s ease
}
.pw-rule.is-ok{color:var(--ink-soft)}
.pw-rule.is-ok .pw-tick{background:var(--good);border-color:var(--good);color:#fff}

/* The sign-up form's terms line -- quieter than .auth-alt, which is a call to
   action; this one only has to be findable. */
.auth-legal{margin:14px 0 0;text-align:center;font-size:12px;line-height:1.55;color:var(--muted)}
.auth-legal a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.auth-legal a:hover{color:var(--brand)}

/* An alert that carries a way out of the dead end it describes. */
.auth-card .alert a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  .pw-seg,.pw-rule,.pw-rule .pw-tick{transition:none}
}
.auth-alt{text-align:center;font-size:14px;color:var(--ink-soft);margin-top:16px}
.demo-creds{margin-top:18px;background:var(--surface-2);border-radius:12px;padding:13px;font-size:12.5px;color:var(--ink-soft);text-align:center}
.demo-login-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0 8px}
.demo-login-btn{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
.demo-login-btn:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.demo-note{display:block;font-size:11.5px;color:var(--muted);line-height:1.4}
.demo-creds b{color:var(--ink)}
@media(max-width:860px){
  .auth-split{grid-template-columns:1fr;min-height:auto}
  .auth-brand{padding:30px 24px;text-align:center}
  .auth-brand .ab-perks{display:none}
  .auth-brand p{margin:0 auto 6px}
  .auth-main{padding:28px 18px}
}

/* ============================================================
   Ecommerce header — utility bar + category nav row
   ============================================================ */
.util-bar{background:var(--ink);color:#cbd5e1;font-size:12.5px}
.util-inner{display:flex;align-items:center;justify-content:space-between;min-height:36px;gap:12px;flex-wrap:wrap}
.util-left{opacity:.9}.util-left strong{color:#fff}
.util-right{display:flex;align-items:center;gap:14px}
.util-right a{color:#cbd5e1;font-weight:500}
.util-right a:hover{color:#fff;text-decoration:none}
.util-right .dim{opacity:.4}
.util-bar .cur-switch{background:transparent;border-color:rgba(255,255,255,.25);color:#fff;padding:3px 8px}
.util-bar .cur-switch option{color:#111}

/* account dropdown in the main header */
.acct-menu{position:relative;flex:none;align-self:center}
.acct-link{display:flex;align-items:center;gap:9px;color:var(--ink-soft);padding:4px 12px 4px 4px;border-radius:999px;border:1px solid transparent;transition:.15s;
  background:transparent;font:inherit;cursor:pointer;list-style:none}
.acct-menu>summary::-webkit-details-marker,.acct-menu>summary::marker{display:none;content:''}
.acct-link:hover,.acct-menu[open]>.acct-link{color:var(--brand);background:var(--brand-soft);text-decoration:none}
.acct-link .ai{width:34px;height:34px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;font-size:17px;line-height:1;flex:none;transition:.15s}
.acct-link:hover .ai,.acct-menu[open]>.acct-link .ai{background:#fff}
.acct-link .al{font-weight:600;font-size:13.5px;white-space:nowrap}
.acct-caret{font-size:10px;opacity:.5;margin-left:1px;transition:transform .18s ease}
.acct-menu[open] .acct-caret{transform:rotate(180deg)}
/* the customer's own profile picture, when they have uploaded one */
.acct-link .ai.has-pic{background:none;padding:0;overflow:hidden}
.acct-link .ai.has-pic img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.acct-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:70;min-width:232px;max-width:min(280px,calc(100vw - 24px));
  padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.28)}
.acct-head{padding:8px 12px 10px;margin:0 0 4px;border-bottom:1px solid var(--line)}
.acct-head-name{display:block;font-weight:700;font-size:14px;color:var(--ink);line-height:1.3}
.acct-head-sub{display:block;font-size:12px;color:var(--muted);margin-top:2px;font-weight:500}
.acct-panel a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  color:var(--ink);font-size:13.5px;font-weight:500;text-decoration:none;white-space:nowrap}
.acct-panel a i{width:16px;text-align:center;opacity:.72;font-size:13px;flex:none}
.acct-panel a:hover{background:var(--brand-soft);color:var(--brand);text-decoration:none}
.acct-panel .acct-out{color:var(--bad)}
.acct-panel .acct-out:hover{background:var(--bad-bg);color:var(--bad)}
.acct-sep{height:1px;background:var(--line);margin:6px 4px}
.nav-burger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink);padding:4px 8px;margin-right:4px}

/* category nav row */
.nav-row{border-top:1px solid var(--line);background:var(--surface)}
/* Lux renders the category bar for the burger's sake only -- on desktop that
   skin's header is deliberately just the lockup, search, account and bag. Unlike
   the other skins it stays out of the flow entirely until the ☰ is tapped, so a
   closed menu leaves no stray rule under that header. */
.nav-row-mobile{display:none}
@media(max-width:860px){body.nav-open .nav-row-mobile{display:block}}
.nav-row-inner{display:flex;align-items:center;gap:clamp(10px,1.6vw,24px);justify-content:flex-start;overflow-x:auto;padding:0 20px;scrollbar-width:none}
.nav-row-inner::-webkit-scrollbar{display:none}
.nav-row-inner a{white-space:nowrap;padding:12px 8px;font-size:14px;font-weight:600;color:var(--ink-soft);border-bottom:2px solid transparent;transition:.15s}
.nav-row-inner a:hover{color:var(--brand);text-decoration:none;border-bottom-color:var(--brand)}
.nav-row-inner a.nav-hot{color:var(--bad)}

/* ============================================================
   Footer (rich)
   ============================================================ */
.newsletter-band{background:var(--grad);color:#fff;margin-top:48px}
.nl-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:30px 20px}
.nl-text h3{color:#fff;font-size:22px;margin:0 0 4px}
.nl-text p{margin:0;opacity:.9;font-size:14px}
.nl-form{display:flex;gap:10px;flex:1;max-width:460px;min-width:260px}
.nl-form .input{flex:1;border-radius:999px;border:none}
.nl-form .btn{border-radius:999px;background:#fff;color:var(--brand);border:none}
.nl-form .btn:hover{filter:brightness(.97)}

.foot-trust{background:var(--surface);border-bottom:1px solid var(--line)}
.foot-trust-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:22px 20px}
.foot-trust .ft-item{display:flex;align-items:center;gap:12px}
.foot-trust .ft-ic{font-size:24px;width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:var(--brand-soft);flex:none}
.foot-trust b{display:block;font-size:14px;color:var(--ink)}
.foot-trust span{font-size:12.5px;color:var(--muted)}

.site-footer{background:var(--ink);color:#cbd5e1}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:30px;padding:48px 20px 30px}
.footer-grid h4{color:#fff;font-size:14px;margin-bottom:14px;letter-spacing:.02em}
.footer-grid a{display:block;color:#cbd5e1;font-size:14px;padding:4px 0;transition:.15s}
.footer-grid a:hover{color:#fff;padding-left:4px}
/* the footer is dark: the lockup inherits --ink, so lift it back to white */
.foot-brand-logo .brand-text b{color:#fff}
.foot-brand-logo .brand-text small{color:#94a3b8}
.foot-brand-logo.brand-invert .brand-logo-img{filter:brightness(0) invert(1);opacity:.95}
.foot-brand-logo.brand-opaque .brand-logo-img{background:#fff;border-radius:10px;padding:4px}
.foot-brand .fmuted{margin:12px 0 0}
.fmuted{color:#94a3b8;font-size:13px;margin:8px 0 0;line-height:1.7}
.socials{display:flex;gap:8px;margin-top:16px}
.socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:16px;padding:0;transition:.15s}
.socials a svg{width:18px;height:18px}
.socials a:hover{background:var(--brand);color:#fff;transform:translateY(-2px)}
.pay-methods{display:flex;flex-wrap:wrap;gap:8px}
.pay-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:6px 10px;font-size:12.5px;color:#e2e8f0;white-space:nowrap}
.footer-bottom{border-top:1px solid #334155;font-size:13px;color:#94a3b8}
.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px}
.footer-bottom p{margin:0}

/* Back-to-top button (classic skin) — fixed so it never adds flow space after the footer */
.to-top{position:fixed;bottom:calc(24px + var(--safe-b,0px));right:24px;width:46px;height:46px;border-radius:50%;
  background:var(--grad);color:#fff;border:none;font-size:20px;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--shadow);z-index:90;
  opacity:0;pointer-events:none;transform:translateY(16px);transition:.25s ease}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
/* wraps: four links in a row overflow the viewport below ~400px */
.foot-legal{display:flex;align-items:center;justify-content:center;gap:8px 18px;flex-wrap:wrap}
.foot-legal a{color:#94a3b8}.foot-legal a:hover{color:#fff}
.foot-legal b{color:#fff}
.foot-credit a{color:#c4b5fd}
.foot-credit a:hover{color:#fff;text-decoration:underline}
.foot-credit b{color:inherit}

/* ---- order tracking steps ---- */
.track-steps{display:flex;justify-content:space-between;gap:6px;position:relative;margin:10px 0}
.track-steps::before{content:"";position:absolute;top:16px;left:6%;right:6%;height:3px;background:var(--line);z-index:0}
.track-step{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;font-size:12px;color:var(--muted)}
.track-step .ts-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);font-weight:700;font-size:13px;color:var(--muted)}
.track-step.done{color:var(--ink);font-weight:600}
.track-step.done .ts-dot{background:var(--grad);border-color:transparent;color:#fff}

/* ---- Track order page ---- */
.track-wrap{max-width:780px;margin:0 auto;padding:30px 20px 50px}
.track-hero{text-align:center;margin-bottom:24px}
.track-hero .th-ic{width:72px;height:72px;margin:0 auto 12px;border-radius:20px;background:var(--brand-soft);
  display:grid;place-items:center;font-size:36px}
.track-hero h1{margin:0 0 6px}
.track-hero p{color:var(--ink-soft);max-width:460px;margin:0 auto}
.track-form{margin-bottom:20px}
.tf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-bottom:6px}
.track-notfound{text-align:center}
.track-notfound .tn-ic{font-size:42px;margin-bottom:8px}
.track-result{overflow:hidden;padding:0}
.track-banner{display:flex;align-items:center;gap:16px;padding:22px 24px;color:#fff;flex-wrap:wrap}
.track-banner .tb-emoji{font-size:38px;line-height:1}
.track-banner .tb-text{flex:1;min-width:170px}
.track-banner .tb-text b{display:block;font-size:19px}
.track-banner .tb-text span{font-size:13.5px;opacity:.92}
.track-banner .tb-meta{text-align:right;font-size:12.5px;opacity:.95;display:flex;flex-direction:column;gap:2px}
.track-banner .tb-no{font-weight:800;font-size:14px;letter-spacing:.02em}
.tb-pending,.tb-processing{background:linear-gradient(120deg,#6366f1,#7c3aed)}
.tb-shipped{background:linear-gradient(120deg,#0ea5e9,#06b6d4)}
.tb-delivered,.tb-completed{background:linear-gradient(120deg,#059669,#10b981)}
.tb-cancelled{background:linear-gradient(120deg,#64748b,#475569)}
.track-body{padding:24px}
.track-eta{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:var(--radius-sm);
  padding:11px 14px;font-size:14px;color:var(--ink-soft);margin-bottom:20px}
.track-eta b{color:var(--ink)}
.track-ship{display:flex;align-items:center;gap:14px;background:var(--brand-soft);border-radius:var(--radius-sm);
  padding:14px 16px;margin:18px 0;flex-wrap:wrap}
.track-ship .ts-ic{font-size:24px}
.track-ship .ts-body{display:flex;flex-direction:column}
.track-ship .ts-no{margin-left:auto;font-family:monospace;font-weight:700;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:6px 12px;font-size:14px}
.ts-copy{border:1px solid var(--line-strong);background:#fff;border-radius:8px;padding:7px 12px;font-size:13px;
  font-weight:600;cursor:pointer;color:var(--ink-soft);transition:.15s}
.ts-copy:hover{border-color:var(--brand);color:var(--brand)}
.ts-copy.copied{border-color:var(--good);color:var(--good)}
.track-step.current .ts-dot{animation:tsPulse 1.6s infinite}
@keyframes tsPulse{0%{box-shadow:0 0 0 0 rgba(124,58,237,.45)}70%{box-shadow:0 0 0 10px rgba(124,58,237,0)}100%{box-shadow:0 0 0 0 rgba(124,58,237,0)}}
.tr-sub{margin:20px 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tr-items{display:flex;flex-direction:column;gap:4px}
.tri-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.tri-thumb{width:48px;height:48px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;
  font-size:20px;overflow:hidden;flex:none}
.tri-thumb img{width:100%;height:100%;object-fit:cover}
.tri-info{flex:1;min-width:0}
.tri-name{font-weight:600;font-size:14px}
.tri-line{font-weight:700;white-space:nowrap}
.tr-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.tr-actions .btn-primary{margin-left:auto}
@media(max-width:560px){.tf-grid{grid-template-columns:1fr}.tr-actions .btn-primary{margin-left:0}.tr-actions .btn{flex:1}}

/* order success */
.os-hero{position:relative;overflow:hidden}
.os-check{width:80px;height:80px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;
  font-size:40px;font-weight:800;color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);
  box-shadow:0 12px 30px -8px rgba(22,163,74,.5);animation:os-pop .5s cubic-bezier(.22,1,.36,1)}
@keyframes os-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.os-hero h1{font-size:26px;margin:6px 0 6px}

/* account page — the dashboard's styles live in assets/css/account.css,
   loaded only on account.php via $page_css. */

/* ---- Scroll-reveal animations ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.stagger>*{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .6s cubic-bezier(.22,1,.36,1)}
  .reveal.stagger.in>*{opacity:1;transform:none}
  .reveal.stagger.in>*:nth-child(1){transition-delay:.04s}
  .reveal.stagger.in>*:nth-child(2){transition-delay:.10s}
  .reveal.stagger.in>*:nth-child(3){transition-delay:.16s}
  .reveal.stagger.in>*:nth-child(4){transition-delay:.22s}
  .reveal.stagger.in>*:nth-child(5){transition-delay:.28s}
  .reveal.stagger.in>*:nth-child(6){transition-delay:.34s}
  .reveal.stagger.in>*:nth-child(7){transition-delay:.40s}
  .reveal.stagger.in>*:nth-child(8){transition-delay:.46s}
  /* hero text entrance (first slide on load) */
  .hs-slide:first-child .hs-text>*{animation:hsIn .7s both cubic-bezier(.22,1,.36,1)}
  .hs-slide:first-child .hs-text>*:nth-child(2){animation-delay:.10s}
  .hs-slide:first-child .hs-text>*:nth-child(3){animation-delay:.20s}
  .hs-slide:first-child .hs-text>*:nth-child(4){animation-delay:.30s}
  @keyframes hsIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  /* subtle hover lift */
  .cat-card,.promo-card{transition:transform .2s ease,box-shadow .2s ease}
  .cat-card:hover{transform:translateY(-4px)}
}

/* ---- empty states ---- */
.empty-state{text-align:center;padding:70px 20px;color:var(--muted)}
.empty-state .emoji{font-size:56px;margin-bottom:14px}

/* ---- Contact page ---- */
.contact-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:26px;padding:10px 20px 50px;align-items:start}
.contact-grid .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.contact-info .card{position:sticky;top:92px}
.ci-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
.ci-list li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-soft)}
.ci-list li span{font-size:20px;flex:none}
.ci-list li b{color:var(--ink)}
.ci-list a{word-break:break-word}
.ci-links{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:8px;font-weight:600}
.contact-done{text-align:center;padding:30px 10px}
.contact-done .cd-ic{font-size:52px;margin-bottom:8px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}.contact-grid .form-grid{grid-template-columns:1fr}.contact-info .card{position:static}}

/* ---- Responsive ---- */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr}.hero-art{display:none}
  .pdp,.checkout-grid,.cart-layout,.shop-wrap{grid-template-columns:1fr}
  .filters{position:static}.summary{position:static}
  .filters-toggle{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-strong);
    border-radius:12px;padding:11px 16px;font-weight:700;font-size:14px;cursor:pointer;color:var(--ink);width:100%;justify-content:center;box-shadow:var(--shadow-sm)}
  .filters-panel{display:none;margin-top:12px}
  .filters.open .filters-panel{display:block}
  .band-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .search{order:3;flex-basis:100%;max-width:none}
  .site-header-inner{flex-wrap:wrap}
}
/* ecommerce header/footer responsive */
@media(max-width:860px){
  .nav-burger{display:block}
  .acct-link .al,.acct-caret{display:none}
  .acct-link{padding:4px;gap:0}
  .nav-row-inner{flex-direction:column;align-items:stretch;display:none;padding:6px 10px}
  body.nav-open .nav-row-inner{display:flex}
  .nav-row-inner a{border-bottom:1px solid var(--line);border-radius:0}
  .nav-row-inner a:hover{border-bottom-color:var(--line);background:var(--brand-soft)}
}
@media(max-width:760px){
  .util-left{display:none}
  .util-inner{justify-content:center}
  .foot-trust-inner{grid-template-columns:1fr 1fr;gap:14px}
  .nl-inner{flex-direction:column;align-items:stretch;text-align:center}
  .nl-form{max-width:none}
  .footer-bottom-inner{flex-direction:column;text-align:center}
}
@media(max-width:560px){
  /* clear the fixed back-to-top button so it never sits on the credit link */
  .footer-bottom-inner{padding-bottom:60px}
}
@media(max-width:480px){
  .foot-trust-inner{grid-template-columns:1fr}
}

/* verified-buyer review gate */
.review-gate{text-align:center;padding:16px 6px;color:var(--ink-soft);font-size:14px;line-height:1.6}
.review-gate .rg-ic{font-size:34px;display:block;margin-bottom:8px}
.review-gate p{margin:0}

/* Category images (admin → Categories) in place of the emoji */
.cat-emoji.has-img{overflow:hidden;padding:0}
.cat-emoji.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.filter-cats .fc-img{width:22px;height:22px;border-radius:6px;object-fit:cover;vertical-align:-6px;margin-right:2px}


/* ---- Tracking page: updates the shop shared with the customer ---- */
.tr-notes{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.tr-note{border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--radius-sm);
  padding:11px 14px;background:var(--surface)}
.tr-note-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:13.5px}
.tr-note-h span{font-size:12px;color:var(--muted)}
.tr-note p{margin:5px 0 0;font-size:14px;color:var(--ink-soft);line-height:1.5}

/* Delivery verdict under the checkout address fields, and the cart-page ZIP
   checker. Neutral until the server has actually answered -- colouring a line
   green before anything was checked is a promise the page has not earned. */
.zip-verdict{display:flex;gap:8px;align-items:flex-start;margin:-4px 0 14px;
  padding:10px 13px;border-radius:10px;font-size:13.5px;line-height:1.45;
  background:var(--surface-2,#f6f7fb);border:1px solid var(--line,#e5e7eb);color:var(--ink-soft,#475569)}
.zip-verdict.good{background:var(--good-bg);border-color:#bbe9cb;color:#14532d}
.zip-verdict.bad{background:var(--bad-bg);border-color:#f5c2c2;color:#7f1d1d}
.zip-verdict[hidden]{display:none}

.zip-check{display:flex;gap:8px;margin-top:10px}
.zip-check input{flex:1;min-width:0}
.zip-check .btn{flex:none}

/* Visible only to a screen reader. Used for labels on inputs whose purpose is
   obvious by sight -- a coupon box next to an Apply button -- but which are
   nameless to anyone not looking at them. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   Order confirmation (order-success.php)

   Built out of tokens only -- no literal brand colour anywhere --
   so the four skins keep overriding this page the way they always
   have. levania.css already restyles .os-check and .track-step;
   nothing below fights it.
   ============================================================ */

.os-hero h1{font-size:28px;margin:4px 0 4px;letter-spacing:-.01em}
.os-sub{margin:0 0 14px}

/* Order number and date as one quiet line. They are reference data --
   needed when something goes wrong, ignored the rest of the time -- so
   they read as a caption rather than competing with the thank-you. */
.os-ref{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;
  margin:0;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);
  font-size:13px;color:var(--muted)}
.os-ref b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:var(--ink);letter-spacing:.02em}

.os-steps{max-width:540px;margin:26px auto 4px}
.os-points{margin-top:16px}

/* ---- the facts strip ---- */
.os-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:16px}
.os-fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 15px;min-width:0}
.os-fact .of-k{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.os-fact .of-v{display:block;margin-top:5px;font-size:14.5px;line-height:1.45;color:var(--ink);
  font-weight:600;overflow-wrap:anywhere}
.os-fact .of-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}
.os-fact em{display:inline-block;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;padding:2px 8px;border-radius:999px;margin-left:2px;vertical-align:1px}
.of-paid{background:var(--good-bg);color:#14532d}
.of-due{background:var(--warn-bg);color:#7c4a03}

.os-mailed{text-align:center;font-size:13.5px;margin:14px 0 0}

/* ---- actions ---- */
.os-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.os-actions .os-act-last{margin-left:auto}
.os-return{text-align:center;font-size:13px;margin:14px 0 0}

/* ---- phones ----
   The tracker is the reason this block exists. Five steps across a 360px
   screen leaves 64px a step, and labels like "Out for delivery" wrap into
   each other. Below 560px it becomes a left-aligned vertical list, which
   has room for the words and reads in the order things happen. */
@media(max-width:560px){
  .os-hero h1{font-size:23px}
  .os-ref{width:100%;justify-content:center}

  .os-steps{margin:20px 0 4px}
  .track-steps.os-steps{flex-direction:column;gap:0}
  .track-steps.os-steps::before{top:16px;bottom:16px;left:17px;right:auto;width:3px;height:auto}
  .os-steps .track-step{flex-direction:row;align-items:center;gap:12px;text-align:left;
    font-size:13.5px;padding:7px 0;width:100%}
  .os-steps .track-step .ts-dot{flex:none}

  .os-actions{flex-direction:column;align-items:stretch}
  .os-actions .btn{width:100%}
  .os-actions .os-act-last{margin-left:0}
}

/* ---- the entrance, for people who asked not to have one ---- */
@media(prefers-reduced-motion:reduce){
  .os-check{animation:none}
  .track-step.current .ts-dot{animation:none}
}

/* ---- print ----
   People keep these. Anything that only makes sense on a screen -- the
   header, the footer, buttons that cannot be pressed on paper -- comes
   off, and the cards flatten so the receipt is not three boxes of
   wasted ink. */
@media print{
  .site-header,.site-footer,.os-actions,.os-return,.pp-form,.newsletter,.topbar-note{display:none!important}
  .os-check{box-shadow:none;background:none;color:var(--ink);border:2px solid var(--ink)}
  .card,.os-fact{border:1px solid #ccc!important;box-shadow:none!important;break-inside:avoid}
  .os-facts{grid-template-columns:repeat(2,1fr)}
  body,.site-main{background:#fff}
}

/* The message under a box that was rejected. Hidden rather than absent when
   there is nothing to say, so the pre-flight check can fill it without the
   layout jumping. */
.field-err{margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--bad,#b3261e)}
.field-err[hidden]{display:none}
.input[aria-invalid="true"],textarea.input[aria-invalid="true"],select.input[aria-invalid="true"]{
  border-color:var(--bad,#b3261e);
}

/* ============================================================
   Brands directory (brands.php)

   Works in every skin: colours come from tokens, and the only
   per-brand colour is a hue the page computes from the name and
   passes in as --bh, so no skin has to know a brand exists.
   ============================================================ */

.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.brand-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);
  overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.brand-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--line-strong)}

.brand-shot{display:block;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.brand-shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.brand-card:hover .brand-shot img{transform:scale(1.07)}
.brand-shot-ph{display:grid;place-items:center;width:100%;height:100%;font-size:26px;color:var(--muted)}

.brand-body{position:relative;padding:0 18px 18px;display:grid;gap:7px;justify-items:start}

/* The monogram overlaps the photo, which is what stops a grid of these
   reading as a plain list of thumbnails. hsl() off --bh gives every brand
   its own colour without anyone storing one. */
.brand-mark{display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;
  border-radius:16px;border:4px solid var(--surface);
  background:hsl(var(--bh,150) 55% 42%);color:#fff;
  font-weight:800;font-size:17px;letter-spacing:.01em;line-height:1;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.brand-card:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}

.brand-name{margin:0;font-size:17px;line-height:1.3}
.brand-name a{color:var(--ink)}
.brand-name a:hover{color:var(--brand)}
.brand-facts{margin:0;display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);font-size:13px}
.brand-facts i{color:var(--brand);margin-right:4px}
.brand-out{font-size:12px;font-weight:700;color:var(--warn);background:var(--warn-bg);
  padding:3px 9px;border-radius:999px}
.brand-btn{margin-top:4px}

@media(max-width:560px){
  .brand-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .brand-body{padding:0 14px 14px}
  .brand-mark{width:44px;height:44px;margin-top:-22px;font-size:15px}
  .brand-btn{width:100%;text-align:center}
}