:root{
  --brand:#9f1f5f;
  --brand-dark:#7d1849;
  --black:#111;
  --ink:#1a1a1a;
  --muted:#777;
  --line:#ebebeb;
  --bg:#fff;
  --bg-soft:#f5f5f5;
  --bg-slate:#8c9aa6;
  --footer:#0e0e0e;
  /* Tipografia për titujt e mëdhenj display (Schutz-style).
     Oswald = alternativë falas e Swiss 721 Bold Condensed (Schutz). */
  --font-display:'Oswald','Swiss 721','Helvetica Neue Condensed','Roboto Condensed',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* `background` on the root element fills the area beyond the body —
   iOS Safari shows it during rubber-band overscroll. Matching it to
   the footer color removes the flash of white below the dark footer
   when the address bar collapses or the user pulls past the bottom. */
html{scroll-behavior:smooth;overflow-x:clip;background:var(--footer)}
body{
  font-family:'Jost','Poppins',system-ui,sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  width:100%;
}
/* Asnjë element të mos zgjerojë faqen horizontalisht — gardian për mobile */
img,video,iframe{max-width:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s}
a:hover{color:var(--brand)}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ─── Mobile touch responsiveness ────────────────────────────────
   Three problems mobile Safari/Chrome have by default that make
   taps feel "slow" or "didn't register":

   1. 300ms tap delay (legacy double-tap-to-zoom heuristic) —
      killed by `touch-action: manipulation` on every interactive
      element. Safari 13+ respects this immediately.

   2. Invisible tap feedback — iOS shows a gray flash but it's
      barely visible on most colors. Set an explicit subtle brand
      flash so users SEE their tap registered.

   3. Sticky-hover state — on touch devices a tap leaves the
      hover state stuck until the user taps elsewhere, which
      reads as a button "still being interacted with". Hover
      effects scoped to `@media (hover: hover)` only.
   ───────────────────────────────────────────────────────────── */
a, button, [role="button"], input, select, textarea, label,
.btn, .swatch, .size-chip, .color-thumb, .product, .ps-arrow,
.cat-card, .filter-toggle, .shop-tags span, .pagination a,
.shop-subcat-pill, .nav-submenu a, .drawer-acc-head, .drawer-nav > a{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(159,31,95,.16);
}
/* Quick active-press feedback so taps look like taps even before
   the next page paint — opacity dip is cheap and universally
   supported. Limited to actual buttons / link CTAs so plain text
   doesn't shimmer when accidentally touched. */
@media (hover:none){
  .btn:active,
  button:active:not(.menu-toggle):not([data-close-drawer]):not([data-cart-close]):not([data-quickview-close]),
  .product-thumb-link:active,
  .filter-toggle:active,
  .shop-subcat-pill:active,
  .size-chip:active,
  .color-thumb:active,
  .swatch:active{
    opacity:.7;transition:opacity 0s;
  }
}
ul{list-style:none}
.container{max-width:1280px;margin:0 auto;padding:0 30px}
.container-wide{max-width:1480px;margin:0 auto;padding:0 30px}

/* Buttons */
.btn{
  display:inline-block;padding:14px 32px;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;
  font-weight:500;border:1px solid var(--black);
  background:var(--black);color:#fff;
  transition:all .25s;
}
.btn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-outline{background:transparent;color:#fff;border-color:#fff}
.btn-outline:hover{background:#fff;color:var(--black);border-color:#fff}
.btn-brand{background:var(--brand);border-color:var(--brand)}
.btn-brand:hover{background:var(--black);border-color:var(--black)}

/* Header */
.topbar{
  background:var(--black);color:#ddd;
  font-size:12px;letter-spacing:1px;
  padding:8px 0;text-align:center;
}
.topbar strong{color:var(--brand);letter-spacing:2px}
/* Clickable variant — used when admin set a link URL. Block display
   matches the div version so the layout is identical. */
.topbar--linked{
  display:block;text-decoration:none;
  transition:background .2s, color .2s;
}
.topbar--linked:hover{background:#1a1a1a;color:#fff}
.topbar--linked:hover strong{color:#fff}
.header{
  background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:100;
}
.header-inner{
  display:flex;align-items:center;height:80px;gap:24px;
}
.menu-toggle{
  display:none;font-size:20px;color:var(--black);
  width:36px;height:36px;align-items:center;justify-content:center;
}
.search-wrap-host{position:relative;flex:0 1 320px}
.search-wrap{
  display:flex;align-items:center;
  border:1px solid var(--line);border-radius:30px;
  padding:8px 18px;width:100%;
}
.search-wrap input{
  border:none;outline:none;flex:1;font-size:13px;background:transparent;
}
.search-wrap i{color:var(--muted);font-size:12px}
/* Live-search results — drops under the input, scrolls when overflowing. */
.search-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  max-height:70vh;overflow-y:auto;
}
.search-result{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line);
  color:var(--ink);text-decoration:none;
}
.search-result:last-child{border-bottom:none}
.search-result:hover,.search-result.is-active{background:#faf9f8}
.search-result-thumb{
  flex:0 0 44px;width:44px;height:44px;border-radius:4px;
  background:#f5f5f5;overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.search-result-thumb img{width:100%;height:100%;object-fit:cover}
.search-result-thumb.empty{color:#cdcdcd;font-size:10px;letter-spacing:1px}
.search-result-body{flex:1;min-width:0}
.search-result-name{
  font-size:13px;color:var(--ink);font-weight:500;letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.search-result-price{font-size:12px;color:var(--muted);margin-top:2px}
.search-result-price del{color:#bbb;margin-right:6px;font-size:11px}
.search-result-footer{
  padding:10px 14px;background:#fafafa;font-size:11px;text-align:center;
  letter-spacing:1px;text-transform:uppercase;
}
.search-result-footer a{color:var(--brand);font-weight:600}
.search-result-empty{
  padding:18px 14px;text-align:center;font-size:12px;color:var(--muted);
}
.logo{
  display:flex;align-items:center;flex-shrink:0;
}
/* Real-image logo: keep aspect, cap height. The image file (logo.png)
   contains the full NOEND mark — no separate text needed alongside. */
.logo--image img{
  display:block;height:42px;width:auto;
}
@media (max-width:560px){
  .logo--image img{height:32px}
}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.header-icons{display:flex;align-items:center;gap:8px}
.logo-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;background:var(--brand);color:#fff;
  font-weight:700;font-size:22px;font-family:'Jost',sans-serif;
  letter-spacing:-1px;
}
.logo-text{
  margin-left:10px;font-weight:600;letter-spacing:3px;
  font-size:18px;color:var(--black);
}
.nav{display:flex;align-items:center;gap:32px;justify-content:center}
.nav > a,
.nav-item > a{
  font-size:13px;letter-spacing:2px;font-weight:500;
  text-transform:uppercase;color:var(--ink);
  position:relative;padding:6px 0;display:inline-flex;align-items:center;gap:6px;
}
.nav > a:hover,
.nav-item > a:hover{color:var(--brand)}
/* Active state = brand color only; no underline bar (per client). */
.nav a.active{color:var(--brand)}
/* Nav me nën-kategori (dropdown në hover) */
.nav-item{position:relative}
.nav-item > a::after{
  content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;
  font-size:9px;opacity:.5;transition:transform .2s;
}
.nav-item:hover > a::after{transform:rotate(180deg)}
.nav-submenu{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(6px);
  background:#fff;border:1px solid var(--line);
  min-width:200px;padding:10px 0;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  z-index:50;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s, transform .2s, visibility .2s;
}
/* Invisible hover-bridge spanning the 6px gap between the parent link and the
   dropdown. Once the submenu is visible (pointer-events:auto), this ::before
   is hoverable too, so the cursor can travel down without losing :hover on
   the .nav-item ancestor. Without this the dropdown closes mid-traversal. */
.nav-submenu::before{
  content:'';
  position:absolute;
  top:-12px; left:0; right:0;
  height:12px;
}
.nav-item:hover .nav-submenu,
.nav-item:focus-within .nav-submenu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-submenu a{
  display:block;padding:10px 22px;
  font-size:12px;letter-spacing:1.5px;font-weight:500;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.nav-submenu a:hover{background:var(--bg-soft);color:var(--brand)}
/* Active sub-link mirrors the top-level active state: brand color so
   the user always sees which sub-cat they're currently viewing. */
.nav-submenu a.active{color:var(--brand) !important}

/* "Të Gjitha" is the first link in every collection's submenu — links
   to the collection root (/shop?cat=…). Bolded so it reads as the
   primary action above its sub-category siblings. */
.nav-submenu-all{font-weight:600;color:var(--ink) !important}
.icon-btn{
  position:relative;width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);font-size:16px;
}
.icon-btn:hover{color:var(--brand)}
.cart-badge,
.wishlist-badge{
  position:absolute;top:2px;right:2px;
  background:var(--brand);color:#fff;
  min-width:14px;height:14px;border-radius:7px;
  font-size:8.5px;display:flex;align-items:center;justify-content:center;
  font-weight:600;
  padding:0;
  line-height:1;
  box-sizing:border-box;
}

/* Page banner */
.page-banner{
  background:var(--bg-slate);color:#fff;
  padding:90px 0 100px;text-align:center;
}
.page-banner h1{
  font-size:42px;font-weight:300;letter-spacing:6px;
  text-transform:uppercase;margin-bottom:14px;
}
.breadcrumb{
  font-size:12px;letter-spacing:2px;
  display:inline-flex;align-items:center;gap:14px;
  text-transform:uppercase;color:rgba(255,255,255,.85);
}
.breadcrumb a:hover{color:#fff;opacity:.8}

/* Hero slider */
.hero{
  background:var(--bg-slate);color:#fff;
  position:relative;overflow:hidden;
  min-height:480px;height:62vh;max-height:560px;
}
.hero-slides{position:relative;width:100%;height:100%}
.hero-slide{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .8s ease;
  pointer-events:none;
}
.hero-slide.active{opacity:1;visibility:visible;pointer-events:auto}
.hero-slide .hero-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
}
.hero-slide .hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.1) 100%);
}
.hero-inner{position:relative;z-index:1;width:100%}
.hero-content{
  max-width:560px;color:#fff;padding:30px 0;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.hero-content .eyebrow{
  font-size:12px;letter-spacing:6px;text-transform:uppercase;
  font-weight:500;margin-bottom:18px;opacity:.95;
}
.hero-content h1{
  font-size:60px;font-weight:300;line-height:1.05;
  letter-spacing:1.5px;margin-bottom:22px;text-transform:uppercase;
}
.hero-content h1 strong{font-weight:600;display:block}
.hero-content p{
  font-size:15px;margin-bottom:28px;opacity:.95;max-width:440px;line-height:1.6;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-actions .btn-outline{display:none}

/* Mobile: full-bleed image with bottom-overlaid text (same pattern as video). */
@media (max-width:900px){
  .hero--image{height:auto;min-height:0;max-height:none;background:var(--bg-slate)}
  .hero--image .hero-slides{min-height:0}
  .hero--image .hero-slide{
    position:relative;display:none;opacity:1;visibility:visible;pointer-events:auto;
    min-height:560px;align-items:flex-end;
  }
  .hero--image .hero-slide.active{display:flex}
  .hero--image .hero-slide .hero-bg{position:absolute;inset:0;display:block}
  .hero--image .hero-slide .hero-bg::after{
    background:linear-gradient(180deg,rgba(0,0,0,.15) 30%,rgba(0,0,0,.75) 100%);
  }
  .hero--image .hero-inner{
    position:relative;z-index:2;background:transparent;
    padding:0 24px 50px !important;
  }
  .hero--image .hero-content{
    max-width:none;padding:0 !important;color:#fff;
    text-shadow:0 2px 12px rgba(0,0,0,.5);
  }
  .hero--image .hero-content .eyebrow{margin-bottom:18px}
  .hero--image .hero-content h1{font-size:34px;margin-bottom:18px}
  .hero--image .hero-content p{font-size:14px;max-width:none;margin-bottom:24px}
  .hero--image .hero-arrows{display:flex !important}
  .hero--image .hero-dots{display:flex}
  .hero--image .hero-actions{margin-top:8px}
  .hero--image .hero-actions .btn-outline{display:none}
}
@media (max-width:420px){
  .hero--image .hero-slide{min-height:480px}
  .hero--image .hero-content h1{font-size:28px;margin-bottom:14px}
  .hero--image .hero-content .eyebrow{margin-bottom:14px;letter-spacing:4px}
  .hero--image .hero-inner{padding:0 20px 40px !important}
  .hero--image .hero-actions{flex-direction:column;align-items:flex-start}
}
.hero-grid{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;
  width:100%;
}
.hero-text .eyebrow{
  font-size:12px;letter-spacing:6px;text-transform:uppercase;
  margin-bottom:24px;color:rgba(255,255,255,.85);font-weight:500;
}
.hero-text h1{
  font-size:80px;font-weight:300;line-height:1;letter-spacing:2px;
  margin-bottom:36px;text-transform:uppercase;
}
.hero-text h1 strong{font-weight:600;display:block}
.hero-text p{
  max-width:440px;margin-bottom:36px;
  color:rgba(255,255,255,.85);
}
.hero-image{
  position:relative;height:560px;
  background-position:center;background-size:cover;
}
.hero-controls{
  display:flex;gap:12px;margin-top:40px;
}
.hero-controls button{
  width:42px;height:42px;border:1px solid rgba(255,255,255,.5);border-radius:50%;
  color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;
}
.hero-controls button:hover{background:#fff;color:var(--black);border-color:#fff}

/* Hero arrows + dots */
.hero-arrows{
  position:absolute;top:50%;left:0;right:0;
  display:flex;justify-content:space-between;
  padding:0 20px;transform:translateY(-50%);
  pointer-events:none;z-index:3;
}
.hero-arrow{
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.4);
  color:#fff;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;pointer-events:auto;
  transition:all .25s;backdrop-filter:blur(6px);
}
.hero-arrow:hover{background:#fff;color:var(--black);border-color:#fff}
.hero-dots{
  position:absolute;bottom:30px;left:50%;
  transform:translateX(-50%);
  display:flex;gap:10px;z-index:3;
}
.hero-dot{
  width:36px;height:3px;background:rgba(255,255,255,.4);
  border:none;cursor:pointer;transition:all .25s;
}
.hero-dot.active{background:#fff;width:54px}
.hero-dot:hover{background:rgba(255,255,255,.7)}

/* Category cards */
.section{padding:90px 0}
.section-tight{padding:60px 0}
.section-title{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:28px;gap:14px;
}
/* Rail / category-slider headings. Tuned down from the original
   display-scale (64–80px) so short Albanian titles like "Më të Reja"
   fit on a single line at every breakpoint. `white-space:nowrap`
   guarantees the one-line rule even when a future title is longer
   than current copy; the title is the constraint, not the row, so a
   too-long string would overflow rather than wrap. */
.section-title h2{
  font-family:var(--font-display);
  font-size:34px;font-weight:700;letter-spacing:-.5px;
  line-height:1.1;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;
}
.section-title .more{
  font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);
  flex-shrink:0;padding-bottom:4px;
}
.section-title .more .more-arrow{
  font-size:14px;
  display:inline-block;
  vertical-align:-1px;
}
/* Centered variant is used for big hero-style intros, not product
   rails — keep it ~2x the rail title so it still reads as the
   page anchor. */
.section-title--center{justify-content:center;text-align:center;margin-bottom:30px}
.section-title--center h2{font-size:72px;white-space:normal}
@media (max-width:900px){
  /* Mobile / tablet: stack vertically so each rail header reads as a
     centered anchor with "Shiko të Gjitha" sitting under the title.
     Title gets some room back so it still feels editorial — just not
     the old screen-dominating 80px. */
  .section-title{
    flex-direction:column;align-items:center;justify-content:center;
    text-align:center;margin-bottom:24px;gap:6px;
  }
  .section-title h2{font-size:46px;letter-spacing:-.5px}
  .section-title .more{padding-bottom:0}
  .section-title--center h2{font-size:56px}
}
@media (max-width:560px){
  .section-title{margin-bottom:20px;gap:4px}
  .section-title h2{font-size:38px;letter-spacing:-.4px}
  .section-title .more{font-size:10px;letter-spacing:2px}
  .section-title--center{margin-bottom:24px}
  .section-title--center h2{font-size:44px;letter-spacing:-.5px}
}
@media (max-width:380px){
  .section-title h2{font-size:32px}
  .section-title--center h2{font-size:38px}
}

.cat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.cat-card{
  position:relative;aspect-ratio:3/4;background:#f5f5f5;
  background-size:cover;background-position:center;
  display:flex;align-items:flex-end;padding:32px;
  overflow:hidden;
}
.cat-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(transparent 40%,rgba(0,0,0,.45));
}
.cat-card-info{position:relative;color:#fff}
.cat-card-info h3{
  font-size:22px;font-weight:500;letter-spacing:2px;margin-bottom:6px;
  text-transform:uppercase;
}
.cat-card-info span{
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:#fff;border-bottom:1px solid #fff;padding-bottom:2px;
}

/* "Më të Dashurat" — category slider. Sized to match the Schutz
   "Most Loved" rail: big square-ish cards that fill the row edge to
   edge with only small gaps. Brighter feel because each photo is
   ~40% larger than the previous portrait layout. */
.cat-slider{
  position:relative;
}
.cat-slider-track{
  display:flex;gap:14px;
  /* Cards fill the row natively at desktop sizes (24% × 4 + gaps ≈
     full container). No center-justify so widescreens spread instead
     of clustering. Native horizontal scroll kicks in only when there
     are more cards than the row fits. */
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;
  scrollbar-width:none;padding-bottom:4px;
}
.cat-slider-track::-webkit-scrollbar{display:none}
/* Pseudo-element spacers exist so that on mobile the first card lands
   centered when scrollLeft=0 (paired with the snap-center arrows). On
   desktop they're disabled — cards just sit on the row. */
.cat-slider-track::before,
.cat-slider-track::after{
  content:'';align-self:stretch;flex:0 0 0;
}
.cat-slider-track .cat-card{
  /* Desktop: ~24% of the container, capped at 520px on very wide
     monitors so cards never get cinematic. min 320px keeps the card
     readable on narrow desktops before the mobile breakpoints kick in. */
  flex:0 0 clamp(320px, 24%, 520px);
  scroll-snap-align:center;scroll-snap-stop:always;
  /* 2/3 portrait — matches the product card ratio everywhere else on
     the site (rails, shop grid) so the homepage strip feels of a piece
     with the product imagery. */
  aspect-ratio:2/3;
  padding:28px;
}
/* Bigger photos deserve a bigger label. Bumped from 22px → 28px on
   desktop so the title doesn't get lost in the larger frame. */
.cat-slider-track .cat-card .cat-card-info h3{
  font-size:28px;letter-spacing:2.5px;
}
.cat-slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:#fff;color:var(--ink);font-size:14px;
  align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.22);z-index:3;cursor:pointer;
  transition:all .2s;
  /* Hidden on desktop — Schutz pattern; only appear on touch breakpoints */
  display:none;
}
.cat-slider-arrow:hover{background:var(--brand);color:#fff}
.cat-slider-arrow.prev{left:14px}
.cat-slider-arrow.next{right:14px}
@media (max-width:1100px){
  /* Spacers stay so the first card center-snaps nicely on touch. Arrows
     stay hidden — native swipe is the expected gesture and the floating
     arrows cover product content (the round button sits right on top of
     the card image, which the client wants gone). */
  .cat-slider-track{justify-content:flex-start}
  .cat-slider-track::before,
  .cat-slider-track::after{flex-basis:14%}
  .cat-slider-track .cat-card{flex-basis:38%;max-height:none;aspect-ratio:4/5}
}
@media (max-width:560px){
  .cat-slider-track{gap:12px}
  .cat-slider-track::before,
  .cat-slider-track::after{flex-basis:16%}
  .cat-slider-track .cat-card{flex-basis:68%;padding:22px;max-height:none;aspect-ratio:3/4}
  .cat-card-info h3{font-size:18px;letter-spacing:1.5px}
}

/* Product swatches (rrathë ngjyrash në kartelë) */
.product-swatches{
  display:flex;gap:6px;margin:6px 0 8px;
}
.swatch{
  display:inline-block;width:12px;height:12px;border-radius:50%;
  border:none;
  box-shadow:inset 0 0 0 2px #fff;
}
/* Reserved class name for active state — still used by the product
   detail page color picker. Cards no longer render this variant
   (they emit a single .swatch--solo instead). */
.swatch--active{
  border-color:var(--brand);
  box-shadow:inset 0 0 0 2px #fff, 0 0 0 1.5px var(--brand);
}
/* Single-color identifier on cards. Each card already represents one
   color (rail siblings show the others), so a small solid dot is
   enough — no white inset, no border, no active ring. */
/* Symmetric vertical margin so the dot sits exactly midway between the
   title above and the price below — equal gap on both sides. */
.product-swatches--single{margin:4px 0}
/* Per-card identifier dot. The dot lives at the very left edge of the
   card's content area. On the slider's FIRST card, there's no
   neighbour to the left, so a flush-left dot looks like it's "cut" —
   even though it isn't. A tiny 2px left margin gives the dot the
   same visual breathing room every other card gets from the inter-
   card gap. The border is also a touch more contrasty (.28 vs .18)
   so the edge of light shades reads against the white background. */
.swatch--solo{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  border:none;box-shadow:none;
  vertical-align:middle;margin-left:2px;
}
.swatch-lg{
  width:24px;height:24px;cursor:pointer;
  border:none;
  box-shadow:inset 0 0 0 2.5px #fff;
  transition:transform .2s, box-shadow .2s;
}
.swatch-lg:hover{transform:scale(1.08)}
.swatch-lg.active{
  box-shadow:inset 0 0 0 2.5px #fff, 0 0 0 2px var(--brand);
}
/* ─── Product reviews tab ─────────────────────────────────────────
   Renders the approved-review list, the verified-buyer form (when
   eligible) and the empty/eligibility-gated states. Styles are
   intentionally restrained — content does most of the work. */
.reviews{font-size:14px;color:var(--ink)}
.review-summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 0 18px;border-bottom:1px solid var(--line);margin-bottom:18px;
  flex-wrap:wrap;
}
.review-summary-stars{display:flex;align-items:center;gap:14px}
.review-summary-stars .stars{font-size:14px}
.review-summary-stars p{font-size:13px;color:var(--muted);margin:0}
.review-cta-note{font-size:13px;color:var(--muted)}
.review-cta-note a{color:var(--brand);text-decoration:underline}

.review-own-status{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;color:var(--ink);
}
.review-own-status--pending{color:#a86b00}
.review-own-status--rejected{color:#b3261e}
.review-own-status--approved{color:#1f8b4c}
.review-rejection-note{
  width:100%;margin-top:4px;font-size:12px;color:var(--muted);
  background:#fff7f6;border-left:2px solid #b3261e;padding:6px 10px;border-radius:2px;
}
.link-btn{
  background:none;border:none;padding:0;color:var(--brand);cursor:pointer;
  font-size:13px;text-decoration:underline;
}

.review-flash{
  padding:10px 14px;border-radius:4px;font-size:13px;margin-bottom:14px;
}
.review-flash--ok{background:#eafaf1;color:#1f6a3f;border:1px solid #c9ecd5}
.review-flash--err{background:#fdecea;color:#9b2620;border:1px solid #f4c7c2}

.review-form{
  background:#fafafa;padding:18px;border-radius:6px;
  border:1px solid var(--line);margin-bottom:24px;
}
.review-form > * + *{margin-top:14px}
.review-form-field label{
  display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink);margin-bottom:6px;
}
.review-form-field input[type=text],
.review-form-field textarea{
  width:100%;padding:10px 12px;font-size:14px;font-family:inherit;
  border:1px solid var(--line);border-radius:4px;background:#fff;
  outline:none;transition:border-color .15s;
}
.review-form-field input[type=text]:focus,
.review-form-field textarea:focus{border-color:var(--brand)}
.review-form-stars > label{
  display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink);margin-bottom:6px;
}

/* 5-radio star input rendered as a horizontal hover-fillable row. The
   input order in the DOM is REVERSED (5→1) so the sibling combinator
   can light up "this star + all stars to the left of it" without JS. */
.star-input{display:inline-flex;flex-direction:row-reverse;gap:2px}
.star-input input{position:absolute;opacity:0;pointer-events:none}
.star-input label{
  cursor:pointer;font-size:22px;color:#ddd;
  transition:color .12s;
}
.star-input label i{display:block}
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label{color:#f6b800}

.review-form-err{font-size:12px;color:#b3261e;margin-top:4px}
.review-form-actions{display:flex;align-items:center;gap:12px}
.review-form-fineprint{font-size:11px;color:var(--muted);margin-top:6px}

.review-empty{
  font-size:14px;color:var(--muted);padding:20px 0;text-align:center;
}
.review-list{list-style:none;padding:0;margin:0}
.review-item{
  padding:18px 0;border-bottom:1px solid var(--line);
}
.review-item:last-child{border-bottom:none}
.review-item-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:6px;flex-wrap:wrap;
}
.review-item-head .stars{font-size:12px}
.review-item-meta{font-size:12px;color:var(--muted);text-align:right}
.review-item-meta strong{color:var(--ink);font-weight:600;margin-right:6px}
.review-item-title{
  font-size:14px;font-weight:600;margin:4px 0 6px;color:var(--ink);
}
.review-item-body{
  font-size:13px;line-height:1.6;color:var(--muted);margin:0;
  white-space:pre-line;
}

/* Per-country shipping rates table inside the "Transporti" tab on
   the product detail page. Populated from /admin/storefront/shipping. */
.shipping-rates-table{
  width:100%;max-width:520px;border-collapse:collapse;
  font-size:13px;margin-top:10px;
}
.shipping-rates-table th{
  text-align:left;font-weight:600;color:var(--ink);
  padding:8px 12px;border-bottom:1px solid var(--line);
  letter-spacing:.4px;
}
.shipping-rates-table td{
  padding:8px 12px;border-bottom:1px solid var(--line);
  color:var(--muted);
}
.shipping-rates-table tr:last-child td{border-bottom:none}

/* Size picker — header row holds the label and the optional
   "Përmasat" trigger that opens the size-guide modal. Mirrors the
   sizing of the color-picker label so the two rows align. */
.size-picker-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:8px;
}
.size-guide-trigger{
  background:none;border:none;padding:0;
  font-size:11px;letter-spacing:1px;color:var(--ink);
  text-transform:uppercase;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  border-bottom:1px solid var(--ink);
}
.size-guide-trigger:hover{color:var(--brand);border-color:var(--brand)}
.size-guide-trigger i{font-size:12px}

/* Size guide modal — reuses .modal infra from the quick view; narrower
   variant since size charts are typically tall + narrow. */
.modal-body--narrow{max-width:560px}
.size-guide-title{
  font-size:13px;letter-spacing:3px;text-transform:uppercase;
  font-weight:600;margin:0 0 18px;
}
.size-guide-image{
  width:100%;height:auto;display:block;background:#f5f5f5;
  border-radius:4px;margin-bottom:14px;
}
.size-guide-content{
  font-size:13px;line-height:1.6;color:var(--muted);
}

/* Photo-tile variant of the color picker (product detail page).
   Renders the per-color variant photo as a small portrait card so the
   buyer sees the actual material/finish rather than a colored dot.
   Falls back to .swatch-lg circles when any color lacks an image — see
   the `color-picker--thumbs` gate in product.blade.php. */
.color-thumb{
  width:62px;height:80px;padding:0;background:#f5f5f5;
  border:1px solid #DFDFDF;border-radius:0;cursor:pointer;
  overflow:hidden;position:relative;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.color-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.color-thumb:hover{border-color:#DFDFDF}
.color-thumb.active{
  border-color:#DFDFDF;
  box-shadow:0 0 0 1px #DFDFDF;
}
.color-picker--thumbs .color-swatches{gap:10px;flex-wrap:wrap}

/* Out-of-stock color tiles — kept visible per client spec, marked with
   a diagonal strikethrough so shoppers can see every colourway but
   instantly recognise which are currently unavailable. The image is
   dimmed (.55 opacity) and a thin diagonal line draws across the tile
   via a CSS gradient — no extra DOM needed. Hover dims slightly more
   so the OOS state feels deliberate, not a hover glitch. */
.color-thumb--oos{position:relative;opacity:.7;cursor:not-allowed}
.color-thumb--oos img{opacity:.55}
.color-thumb--oos::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(0,0,0,.45) calc(50% - 1px),
    rgba(0,0,0,.45) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}
.color-thumb--oos:hover{opacity:.85;border-color:#DFDFDF}
/* Same treatment for the circle-swatch fallback (used when not every
   color has a thumb image). */
.swatch-lg--oos{position:relative;opacity:.5;cursor:not-allowed}
.swatch-lg--oos::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:50%;
  background:linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(0,0,0,.55) calc(50% - 1px),
    rgba(0,0,0,.55) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

.color-picker{margin-bottom:22px}
.color-picker label{
  display:block;font-size:12px;letter-spacing:1px;color:var(--muted);
  text-transform:uppercase;margin-bottom:10px;
}
.color-picker label .color-picker-name{
  color:var(--ink);text-transform:none;letter-spacing:0;font-weight:500;
}
.color-swatches{display:flex;gap:10px;flex-wrap:wrap}

/* Video band — between Most Loved and Trending */
.video-band{
  position:relative;width:100%;
  aspect-ratio:21/9;max-height:560px;
  overflow:hidden;background:#111;
  display:flex;align-items:center;justify-content:center;
}
.video-band-media{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
.video-band-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 60%,rgba(0,0,0,0) 100%);
}
.video-band-inner{
  position:relative;z-index:2;width:100%;height:100%;
  display:flex;align-items:center;
}
.video-band-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  color:#fff;max-width:680px;
}
.video-band-content .eyebrow{
  font-size:12px;letter-spacing:6px;text-transform:uppercase;
  margin-bottom:18px;opacity:.95;
}
.video-band-content h2{
  font-family:var(--font-display);
  font-size:84px;font-weight:700;letter-spacing:-1px;line-height:.95;
  text-transform:uppercase;margin-bottom:26px;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.video-band-content .btn-outline{align-self:flex-start}
@media (max-width:900px){
  .video-band{aspect-ratio:4/5;max-height:none}
  .video-band-inner{align-items:flex-end}
  .video-band-content{padding:0 0 50px;max-width:none;text-align:left}
  .video-band-content h2{font-size:62px;letter-spacing:-.5px}
}
@media (max-width:420px){
  .video-band-content h2{font-size:50px}
  .video-band-content .eyebrow{letter-spacing:4px;margin-bottom:14px}
}

/* Product slider (Më të Reja, Më të Shiturat) — center-mode */
.product-slider{position:relative;overflow:hidden}
.ps-track{
  display:flex;flex-wrap:nowrap;gap:14px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  /* Inline padding at ALL widths — keeps the leftmost card's
     identifier dot, badge, and any focus ring from sitting flush
     against (and getting clipped by) the slider's `overflow:hidden`
     boundary. Gap reduced 24 → 14 per client feedback. */
  padding:0 0 6px;
  align-items:start;
}
.ps-track::-webkit-scrollbar{display:none}
/* Spacer = (100% - cardW) / 2 → karta e parë qendërzohet kur scrollLeft=0 */
.ps-track .product,
.ps-track .ps-item{
  /* Default (small screens / center-mode): 1-and-a-half cards visible
     via percentage so the slider feels card-by-card. Larger screens
     override this with exact-fit math below. */
  flex:0 0 calc((100% - 50px) / 4);
  scroll-snap-align:start;scroll-snap-stop:always;
  min-width:0;
}
/* Rail tiles match the grid (4/5) — slightly shorter than 3/4 so the
   rail visually rhymes with the shop-grid card. */
.ps-track .product .product-thumb{aspect-ratio:4/5}
/* Wider screens: exact-fit math so N full cards are visible at the
   row's right edge — previous percentages (30%, 24%) didn't subtract
   the inter-card gap, so 4×30% + 3×24px overflowed the track and
   cropped the rightmost card. Spacers also hidden on desktop. */
@media (min-width:1280px){
  /* 4 cards visible. Math: 3 × 14px gaps = 42px + 16px track padding
     + 12px safety buffer = 70px subtracted so the 4th card is
     guaranteed to fit even with sub-pixel rounding / scrollbar
     calculation quirks across browsers. Tight gap (14px) means the
     subtraction is small and cards are larger overall. */
  .ps-track .product,
  .ps-track .ps-item{flex-basis:calc((100% - 50px) / 4);scroll-snap-align:start}
}
/* Wider desktop intentionally stays at 4 cards visible — keeping the
   same card density as 1280+ leaves a stable, scannable rail rather
   than packing in a 5th card that crops at the right edge. Beyond 4,
   the user swipes horizontally to load more. */
/* Product-rail arrows are intentionally hidden everywhere. The track
   itself is touch-swipeable on mobile (scroll-snap + touch-action) and
   uses native scroll on desktop trackpads. The floating buttons just
   covered card content (same issue we had on the category slider).
   Markup stays in the DOM so JS handlers still bind — if we ever want
   them back on a specific breakpoint, flip this rule to display:flex. */
.ps-arrow{display:none}
/* Mid-laptop: 3 cards visible exactly. 2 × 14px gaps = 28px + 16
   padding + 12 buffer = 56px subtracted. */
@media (max-width:1280px){
  .ps-track .product,
  .ps-track .ps-item{flex-basis:calc((100% - 36px) / 3)}
}
/* Small tablet: 2 cards visible. 1 × 14 = 14 + 16 + 12 = 42 subtracted. */
@media (max-width:980px){
  .ps-track .product,
  .ps-track .ps-item{flex-basis:calc((100% - 22px) / 2)}
}
/* Mobile: center mode — partial cards visible left/right as a swipe
   affordance. Spacers come back to centre the first card. */
@media (max-width:780px){
  .ps-track{gap:14px}
  .ps-track::before,
  .ps-track::after{
    display:none;
  }
  .ps-track .product,
  .ps-track .ps-item{flex-basis:calc((100% - 14px) / 2);scroll-snap-align:start}
}
@media (max-width:560px){
  .ps-track{gap:10px}
  .ps-track::before,
  .ps-track::after{display:none}
  .ps-track .product,
  .ps-track .ps-item{flex-basis:calc((100% - 10px) / 2)}
}

/* Hero — categories mode */
.hero--categories{
  background:#fff;color:var(--ink);
  height:auto;min-height:0;max-height:none;
  padding:30px 0 60px;
}
.hero-categories-inner{padding-top:20px}
.hero-categories-head{text-align:center;margin-bottom:34px}
.hero-categories-head h1{
  font-size:48px;font-weight:600;letter-spacing:6px;
  text-transform:uppercase;margin-bottom:10px;color:var(--ink);
}
.hero-categories-head p{color:var(--muted);font-size:14px;letter-spacing:1px}
.hero-categories-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.hero-cat-card{
  position:relative;aspect-ratio:3/4;
  background-size:cover;background-position:center;
  display:flex;align-items:flex-end;padding:28px;
  overflow:hidden;color:#fff;
}
.hero-cat-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(transparent 40%,rgba(0,0,0,.5));
}
.hero-cat-card-info{position:relative}
.hero-cat-card-info h3{
  font-size:20px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:6px;
}
.hero-cat-card-info span{
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  border-bottom:1px solid #fff;padding-bottom:2px;
}
@media (max-width:900px){
  .hero-categories-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .hero-categories-head h1{font-size:34px;letter-spacing:4px}
}

/* Hero — video mode */
.hero--video{position:relative}
.hero--video .hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;
}
.hero--video .hero-video-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.2) 60%,rgba(0,0,0,0) 100%);
}
.hero--video .hero-inner{position:relative;z-index:2;width:100%}
@media (max-width:900px){
  .hero--video{height:auto;min-height:0;max-height:none;position:relative}
  .hero--video .hero-video{
    position:relative;display:block;
    height:auto;width:100%;aspect-ratio:4/5;object-fit:cover;
  }
  .hero--video .hero-video-overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.15) 30%,rgba(0,0,0,.75) 100%);
  }
  /* Absolute-position the text over the video instead of the old
     margin-top:-200px hack, which dropped below the video on some aspect ratios. */
  .hero--video .hero-inner{
    position:absolute;left:0;right:0;bottom:0;
    margin:0;padding:0 24px 40px;color:#fff;z-index:2;
  }
  .hero--video .hero-content{
    color:#fff;max-width:none;padding:0;
    text-shadow:0 2px 12px rgba(0,0,0,.5);
  }
}

/* Product grid — mobile-first responsive grid ladder.
   Tier contract (per client):
     <768   → 2 cards (mobile, iPhone 11 Pro 375px → 2 per row)
     768+   → 3 cards (tablet, sidebar in drawer)
     1024+  → 4 cards (desktop, sidebar still drawer up to 1199)
     1200+  → 4 cards (sidebar reappears, .shop-layout re-grids)
   Explicit grid tracks avoid flex wrapping leaving a row-end hole when
   the shop column width lands on fractional pixels. */
.products{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  /* `align-items:flex-start` so a card with a shorter title doesn't
     stretch to match its row-mates' height. */
  align-items:flex-start;
}
.products > .product{
  min-width:0;
}
@media (min-width:768px){
  .products{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
}
@media (min-width:1024px){
  .products{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
}
@media (min-width:1200px){
  .products{gap:30px}
}
.product{
  text-align:left;
  /* `min-width:0` so grid items don't refuse to shrink below their
     intrinsic content width — without this, a wide image or long
     title forces the card to push past its grid track, which then
     ripples into adjacent tracks and ends up rendering a 4-col grid
     as a broken 2-col layout on the shop page. */
  min-width:0;
}
.product-thumb{
  /* Compact aspect: 4/5 instead of 2/3 (the classic portrait of fashion
     photography). Cards are still portrait but ~25% shorter, which
     lets more cards fit on first paint and avoids long-scroll pages. */
  position:relative;background:transparent;aspect-ratio:4/5;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;overflow:hidden;
}
.product-thumb img{
  width:100%;height:100%;object-fit:cover;transition:transform .5s;
}
.product-thumb-link{display:block;width:100%;height:100%;position:relative}
/* Default hover: gentle zoom (no secondary image available). */
.product:hover .product-thumb img{transform:scale(1.05)}

/* Image-swap hover: when a second photo is rendered alongside the
   primary, the primary fades out and the secondary fades in. We
   override the default zoom on the primary so the two effects don't
   stack into a jittery double transform. */
.product-thumb-img--hover{
  position:absolute;inset:0;
  opacity:0;transition:opacity .35s ease;
  pointer-events:none;
}
.product-thumb-img--primary{transition:opacity .35s ease, transform .5s ease}
.product:has(.product-thumb-img--hover):hover .product-thumb-img--primary{
  opacity:0;transform:none;
}
.product:has(.product-thumb-img--hover):hover .product-thumb-img--hover{opacity:1}
.product-actions{
  position:absolute;bottom:18px;left:50%;transform:translate(-50%,12px);
  display:flex;gap:10px;opacity:0;transition:all .3s;
}
.product:hover .product-actions{opacity:1;transform:translate(-50%,0)}
.product-actions button{
  width:40px;height:40px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:all .2s;
}
.product-actions button:hover{background:var(--brand);color:#fff}
.product-actions button .lucide,
.product-actions button svg{
  font-size:18px;
  vertical-align:0;
}
/* Mobile / tablet: the action buttons (quick view, wishlist, cart) are
   hover-only. Touch devices don't have hover so they'd stay invisible
   anyway, but on iPad the "sticky hover" state can flash them on top
   of card content. Drop them from the DOM via display:none below the
   tablet breakpoint — the card itself remains a tap target. */
@media (max-width:900px){
  .product-actions{display:none}
}
.product-badge{
  position:absolute;top:14px;
  font-size:11px;font-weight:600;color:#fff;
  padding:4px 10px;letter-spacing:1px;
  /* `transform:scale` on the image creates its own stacking context on
     hover and would otherwise paint above the badge (later sibling in
     DOM). Explicit z-index keeps the badge anchored above the image
     during the hover-zoom transition. */
  z-index:2;
}
/* NEW — brand color, top-right (existing position preserved). */
.product-badge--new{right:14px;background:var(--brand)}
/* SALE — black, top-left so it can coexist with NEW without overlap. */
.product-badge--sale{left:14px;background:#0a0a0a}
.product h4{
  font-size:13px;font-weight:500;letter-spacing:.5px;
  /* Tight, equal rhythm to the swatches+price stack below — the
     `.product-swatches--single` margin matches so the gap above and
     below the dot is identical. Previously this h4 reserved 2.7em
     (2 full lines) regardless of actual title length, leaving a dead
     band of whitespace under single-line titles. The grid rows now
     size to the tallest card in each row instead, so short-title
     cards just sit shorter — no alignment fight. */
  margin-bottom:4px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
}
/* "Ofertë" eyebrow only renders when the card has a real discount
   (`product.old_price` exists). Brand color so it reads as an offer,
   not as a generic tag. */
.product-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.5px;
  color:var(--brand);margin-bottom:4px;text-transform:capitalize;
}
.product .price{
  font-size:16px;color:var(--ink);font-weight:700;letter-spacing:.2px;
}
/* When the card is on sale, the active price flips to brand red and the
   old price renders before it as a struck-through grey number — same
   visual order/treatment as the daily-deal hero. */
.product .price--sale{color:var(--brand)}
.product .price del{
  color:var(--muted);margin-right:8px;font-weight:500;font-size:14px;
}

/* Tabs */
.tabs{
  display:flex;gap:36px;justify-content:center;margin-bottom:40px;
  font-size:12px;letter-spacing:3px;text-transform:uppercase;
}
.tabs button{
  padding-bottom:6px;color:var(--muted);font-weight:500;letter-spacing:3px;
}
.tabs button.active{color:var(--ink);border-bottom:1px solid var(--brand)}

/* Deal of day */
.deal{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;
  padding:32px 0;
}
.deal-text h2{
  font-family:var(--font-display);
  font-size:84px;font-weight:700;letter-spacing:-1px;
  line-height:.95;text-transform:uppercase;
  margin-bottom:8px;
}
.deal-text h2 span{display:block;padding-bottom:6px;width:max-content}
.deal-text h3{
  font-size:18px;font-weight:500;margin:30px 0 10px;
}
.deal-text .price{font-size:18px;font-weight:600;margin-bottom:18px}
.deal-text .price del{color:var(--muted);margin-left:8px;font-weight:400}
.deal-text p{color:var(--muted);max-width:440px;margin-bottom:30px;font-size:14px}
.countdown{display:flex;gap:14px;margin-bottom:30px;flex-wrap:wrap;justify-content:flex-start}
.countdown div{
  width:78px;text-align:center;border:1px solid var(--line);
  padding:14px 0;
}
.countdown strong{font-size:22px;display:block;font-weight:500}
.countdown small{font-size:10px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
.deal-image{aspect-ratio:1/1;background:#fff7f0;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.deal-image img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .deal{display:flex;flex-direction:column;gap:30px;text-align:center;align-items:center}
  .deal-image{order:-1;aspect-ratio:16/9;border-radius:8px;width:100%}
  .deal-image img{width:100%;height:100%;object-fit:cover}
  .deal-text h2{font-size:78px;letter-spacing:-.5px;line-height:1.15}
  .deal-text h2 span{margin:0 auto}
  .deal-text p{margin-left:auto;margin-right:auto}
  .countdown{justify-content:center}
}
@media (max-width:560px){
  .deal-text h2{font-size:64px}
}
@media (max-width:380px){
  .deal-text h2{font-size:54px}
}

/* Banner promos */
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.promo{
  position:relative;aspect-ratio:16/9;
  background-size:cover;background-position:center;
  display:flex;align-items:center;padding:50px;color:#fff;overflow:hidden;
}
.promo::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.25)}
.promo > *{position:relative}
.promo h3{font-size:32px;font-weight:300;letter-spacing:2px;margin-bottom:18px;line-height:1.1}
.promo .btn{padding:10px 24px;font-size:11px}

/* Features bar */
.features{
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:50px 0;
}
.feature{display:flex;align-items:center;gap:18px}
.feature i,
.feature .lucide,
.feature svg{font-size:38px;color:var(--black)}
.feature h4{font-size:16px;font-weight:600;letter-spacing:1px;margin-bottom:2px}
.feature p{font-size:13.5px;color:var(--muted)}

/* Brand logos */
.brands{
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;gap:30px;
  border-top:1px solid var(--line);padding:50px 0;
}
.brands span{
  text-align:center;font-family:'Jost',serif;
  letter-spacing:3px;color:#bbb;font-size:18px;font-weight:500;
  text-transform:uppercase;transition:color .2s;
}
.brands span:hover{color:var(--brand)}

/* Newsletter */
.newsletter{
  background:var(--footer);color:#fff;padding:70px 0;text-align:center;
}
.newsletter h3{
  font-size:18px;letter-spacing:4px;font-weight:500;
  text-transform:uppercase;margin-bottom:8px;
}
.newsletter p{color:#aaa;font-size:13px;margin-bottom:30px}
.newsletter form{
  max-width:520px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto;
  border:1px solid #2a2a2a;
}
.newsletter input{
  background:transparent;border:none;outline:none;
  padding:16px 20px;color:#fff;font-size:13px;
}
.newsletter button{
  background:var(--brand);color:#fff;border:none;
  padding:0 32px;font-size:12px;letter-spacing:2px;text-transform:uppercase;
  font-weight:500;cursor:pointer;
}
.newsletter button:hover{background:#fff;color:var(--black)}

/* Footer */
.footer{background:var(--footer);color:#aaa;padding:70px 0 0}
.footer-grid{
  /* Five columns: Contact · Account · BRAND · Company · Payment.
     Brand sits at position 3 (the true middle) so the logo block reads
     as the page's visual anchor. Social icons moved INTO the brand
     block as a small row beneath the tagline — see .footer-social. */
  display:grid;grid-template-columns:1fr 1fr 1.4fr 1fr 1fr;gap:36px;padding-bottom:60px;
}
.footer h5{
  color:#fff;font-size:13px;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:24px;font-weight:600;
}
.footer ul li{margin-bottom:12px;font-size:13px}
.footer-brand{text-align:center}
.footer-brand .logo-mark{margin:0 auto 16px}
.footer-brand p{font-size:13px;color:#aaa;margin-top:14px}
/* Footer logo image — the file's wordmark is dark; on the dark footer
   we lift it via `filter: brightness/invert` so the NOEND wordmark
   reads in white while the N badge stays brand-magenta. `auto` width
   keeps the file's natural aspect intact. */
.footer-brand-logo{
  display:block;margin:0 auto;
  height:54px;width:auto;
  filter:brightness(0) invert(1);
}
.footer-social{
  display:flex;justify-content:center;gap:14px;margin-top:20px;
}
.footer-social a{
  width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #2a2a2a;color:#aaa;font-size:13px;
  transition:all .2s;
}
.footer-social a:hover{
  background:var(--brand);border-color:var(--brand);color:#fff;
}
.footer-bottom{
  border-top:1px solid #1d1d1d;padding:20px 0;
  display:flex;align-items:center;justify-content:space-between;font-size:12px;
}
.payment-icons{display:flex;gap:8px}
.payment-icons span{
  background:#fff;color:#000;padding:4px 10px;font-size:11px;
  font-weight:600;border-radius:3px;
}

/* Forms */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.form-field{margin-bottom:20px}
/* Inner fields inside a row inherit the grid's own gap — adding their
   own margin-bottom doubled the vertical space below the row (40px),
   which made the gap above the next field bigger than the gaps between
   subsequent stacked fields (20px). Reset to 0 so every row reads at
   the same 20px rhythm. */
.form-row .form-field{margin-bottom:0}
.form-field label{
  display:block;font-size:12px;color:var(--muted);
  letter-spacing:1px;margin-bottom:8px;
}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line);
  font-family:inherit;font-size:14px;outline:none;
  transition:border-color .2s;background:#fff;
}
/* Native <select> arrow sits right at the inner border edge by default
   which reads as cramped. Custom SVG caret + extra padding-right pushes
   it ~12px inside so it breathes. `appearance:none` is the prerequisite
   for the SVG to show on every browser. */
.form-field select{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23555'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:38px;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  border-color:var(--brand);
}
.form-field textarea{min-height:120px;resize:vertical}

/* Shop layout — sidebar drawer below 1200 so the products column has
   full container width for 4-col at typical 1024-1199 laptops. From
   1200+ the sidebar reappears persistently next to a narrower 4-col. */
.shop-layout{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:1200px){
  .shop-layout{grid-template-columns:260px 1fr;gap:40px}
}
.filter-drawer-head{display:none}
.filter-toggle{
  display:none;align-items:center;gap:8px;
  padding:9px 18px;border:1px solid var(--ink);background:var(--ink);
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  font-weight:600;cursor:pointer;color:#fff;border-radius:6px;
}
.filter-toggle:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.filter-toggle:hover i{color:#fff}
.filter-toggle i{font-size:12px;color:#fff}

/* ─── Sort dropdown (matches the Filtro pill styling) ─────────── */
.shop-sort-dropdown{position:relative;display:inline-block}
.shop-sort-dropdown > summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px;border:1px solid var(--ink);background:var(--ink);
  color:#fff;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  font-weight:600;border-radius:6px;
}
.shop-sort-dropdown > summary::-webkit-details-marker{display:none}
.shop-sort-dropdown > summary:hover{background:var(--brand);border-color:var(--brand)}
.shop-sort-dropdown > summary i{font-size:10px;transition:transform .15s}
.shop-sort-dropdown[open] > summary i{transform:rotate(180deg)}
.shop-sort-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:30;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 14px 32px rgba(0,0,0,.10);
  min-width:230px;padding:6px 0;
}
.shop-sort-menu a{
  display:block;padding:9px 18px;
  font-size:12px;color:var(--ink);
  text-transform:none;letter-spacing:0;font-weight:400;
}
.shop-sort-menu a:hover{background:var(--bg-soft);color:var(--brand)}
.shop-sort-menu a.active{color:var(--brand);font-weight:600}

/* ─── Sub-category tag pills (top of collection page) ─────────── */
.shop-subcat-pills{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--line);
}
.shop-subcat-pill{
  display:inline-flex;align-items:center;
  padding:8px 18px;border:1px solid var(--line);background:#fff;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  font-weight:500;color:var(--ink);border-radius:4px;
  transition:all .15s;
}
.shop-subcat-pill:hover{border-color:var(--ink);color:var(--ink)}
.shop-subcat-pill.active{
  background:var(--ink);color:#fff;border-color:var(--ink);
}

/* ─── Vendors / Firmat list (sidebar) ─────────────────────────── */
.shop-vendors{list-style:none;padding:0;margin:0}
.shop-vendors li{
  padding:8px 0;font-size:13px;color:var(--muted);cursor:pointer;
  transition:color .15s;
}
.shop-vendors li:hover{color:var(--ink)}
.shop-vendors li.active{color:var(--brand);font-weight:600}

/* ─── Dual-handle price range slider ──────────────────────────── */
.price-slider{padding:8px 0 4px;position:relative}
.price-slider-track{
  position:relative;height:4px;background:var(--line);
  border-radius:2px;margin:18px 10px 22px;
}
.price-slider-fill{
  position:absolute;top:0;bottom:0;
  background:var(--ink);border-radius:2px;
  pointer-events:none;
}
.price-slider-handle{
  position:absolute;top:50%;
  width:18px;height:18px;border-radius:50%;
  background:#fff;border:2px solid var(--ink);
  transform:translate(-50%, -50%);
  cursor:grab;padding:0;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.price-slider-handle::after{
  content:'';
  position:absolute;
  top:-15px;left:-15px;right:-15px;bottom:-15px;
}
.price-slider-handle:focus{outline:2px solid var(--brand);outline-offset:2px}
.price-slider-handle:active{cursor:grabbing}
.price-slider-readout{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12px;color:var(--ink);
}
.price-slider-values{color:var(--muted);font-weight:500}
.price-apply{
  background:var(--ink);color:#fff;border:none;cursor:pointer;
  padding:8px 18px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  font-weight:600;border-radius:4px;
}
.price-apply:hover{background:var(--brand)}
.price-clear{
  display:inline-block;margin-top:8px;
  font-size:11px;color:var(--muted);text-decoration:underline;
}

.filter-reset-all{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border:1px solid var(--line);background:#fff;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  font-weight:500;color:var(--muted);border-radius:4px;
  transition:all .15s;
}
.filter-reset-all:hover{border-color:var(--ink);color:var(--ink)}
.shop-sidebar h5{
  font-size:13px;letter-spacing:2px;text-transform:uppercase;
  font-weight:600;margin-bottom:18px;
}
.shop-sidebar .widget{padding:24px 0;border-bottom:1px solid var(--line)}
.shop-sidebar .widget:first-child{padding-top:0}
.shop-sidebar ul li{
  font-size:14px;color:var(--ink);padding:6px 0;cursor:pointer;
  display:flex;align-items:center;gap:8px;
}
.shop-sidebar ul li:hover{color:var(--brand)}
.shop-sidebar ul li::before{
  content:'';width:6px;height:6px;border:1px solid #ccc;border-radius:50%;
}
.shop-sidebar ul li.active{color:var(--brand)}
.shop-sidebar ul li.active::before{background:var(--brand);border-color:var(--brand)}
.shop-tags{display:flex;flex-wrap:wrap;gap:8px}
.shop-tags span{
  /* Fixed footprint so 2-char ("35") and 3-char ("STD") chips render
     the same width — keeps the grid even. min-width covers content
     scale, padding sets the visual size; box-sizing already border-box
     globally so this stays predictable across browsers. */
  display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;font-size:12px;padding:6px 10px;
  border:1px solid var(--line);cursor:pointer;
  letter-spacing:1px;transition:background .15s,color .15s,border-color .15s;
  text-align:center;
}
.shop-tags span:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.shop-tags span.active{
  background:var(--ink);color:#fff;border-color:var(--ink);
}
/* Color filter — small clickable swatches arranged as a cloud. The cap
   is enforced per-swatch via .shop-color-hidden so the cutoff stays
   exactly two rows regardless of sidebar width. */
.shop-colors{display:flex;flex-wrap:wrap;gap:8px}
.shop-colors .swatch-lg{width:22px;height:22px}
.shop-color-hidden{display:none}
.shop-colors.expanded .shop-color-hidden{display:inline-block}
.shop-colors-more{
  background:none;border:none;color:var(--ink);font-size:12px;
  letter-spacing:.5px;text-decoration:underline;cursor:pointer;
  padding:8px 0 0;margin:0;
}

/* Price range — two compact number inputs + Apply / Clear. */
.price-filter .price-inputs{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.price-filter .price-inputs input{
  flex:1;min-width:0;width:100%;
  border:1px solid var(--line);padding:8px 10px;font-size:12px;
  font-family:inherit;background:#fff;color:var(--ink);
}
.price-filter .price-inputs input:focus{outline:none;border-color:var(--brand)}
.price-filter .price-inputs span{color:var(--muted);font-size:13px}
.price-filter .price-apply{
  background:var(--ink);color:#fff;border:none;
  padding:8px 18px;font-size:11px;letter-spacing:1px;
  text-transform:uppercase;cursor:pointer;font-weight:600;
}
.price-filter .price-apply:hover{background:var(--brand)}
.price-filter .price-clear{
  margin-left:10px;font-size:11px;letter-spacing:.5px;
  color:var(--muted);text-decoration:underline;
}

/* Flash notice rendered above the page banner when a redirect lands
   the visitor on /shop (e.g. they clicked a link to a now-unavailable
   product). Soft tone — neutral grey-on-cream so it informs without
   shouting "ERROR". */
.storefront-notice{
  background:#fff8ee;border-bottom:1px solid #f1e6cf;
  color:#7a5e1e;font-size:13px;
  padding:12px 0;text-align:center;
}

.shop-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:24px;margin-bottom:30px;border-bottom:1px solid var(--line);
  font-size:13px;color:var(--muted);
  gap:14px;flex-wrap:wrap;
}
.shop-toolbar select{
  padding:8px 14px;border:1px solid var(--line);background:#fff;
  font-size:13px;font-family:inherit;
}
/* On mobile the toolbar is cramped (Filtrat + count + sort in a single
   row). Drop the count to its own row so each control gets full width
   and reads cleanly. Filter button + sort select share row 1. */
@media (max-width:560px){
  /* Count above the buttons. The toolbar has TWO direct children —
     the actions wrapper and the count span — so the `order` rules
     must target THOSE, not the inner sort/filter elements which are
     nested inside `.shop-toolbar-actions`. */
  .shop-toolbar{align-items:center;border-bottom:none;padding-bottom:14px;margin-bottom:18px}
  .shop-toolbar > #shop-count{
    order:-1;flex-basis:100%;
    text-align:right;font-size:11px;letter-spacing:.4px;
    margin:0 0 10px;padding:0;border:none;
  }
  .shop-toolbar > .shop-toolbar-actions{
    order:1;flex-basis:100%;
    /* Rendit sipas on the left, Filtro pinned to the right. The
       legacy layout just sat them flush at the start of the row,
       which looked unbalanced against the full-width count line
       above it. */
    display:flex;justify-content:space-between;align-items:stretch;gap:10px;
  }
  /* Force equal pill height — `<summary>` and `<button>` pick up
     different default line-heights/box models, which is why "Rendit
     sipas" rendered taller than "Filtro". Locking both to 44px with
     border-box and centered content makes them visually identical. */
  .shop-toolbar-actions .shop-sort-dropdown > summary,
  .shop-toolbar-actions .filter-toggle{
    height:44px;box-sizing:border-box;
    display:inline-flex;align-items:center;justify-content:center;
    padding:0 18px;
  }
  /* The dropdown is anchored on the LEFT, so its menu should also
     open from the left edge — overrides any positioning we might add
     later if the toggle moves. */
  .shop-toolbar-actions .shop-sort-dropdown{display:inline-flex}
}
.pagination{
  display:flex;justify-content:center;gap:6px;margin-top:50px;
}
.pagination a{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);font-size:13px;font-weight:500;
}
.pagination a.active,.pagination a:hover{background:var(--black);color:#fff;border-color:var(--black)}

/* ─── Lucide icons ────────────────────────────────────────────────
   Lucide replaces `<i data-lucide="name">` with `<svg class="lucide
   lucide-name">`. The base rule makes every SVG behave like the FA
   icons it replaced: size in `em` so parent `font-size` controls
   visual size, color via `currentColor` (already Lucide's default
   for stroke), and consistent stroke weight. Per-icon adjustments
   live next to the component that uses them. */
.lucide{
  width:1em;height:1em;display:inline-block;vertical-align:-0.15em;
  stroke:currentColor;stroke-width:2;fill:none;
  flex-shrink:0;
}
/* Wishlist heart "filled" state — Lucide hearts are stroke-only by
   default; toggling `.in-wishlist` on the parent button paints the
   path with the current color so it reads as a filled heart. */
.in-wishlist .lucide-heart,
#pd-wish.in-wishlist .lucide-heart{fill:currentColor}
/* Stars in reviews: the legacy markup used `fa-solid fa-star` for
   filled and `fa-regular fa-star` for empty. Lucide has just one
   `star`; we differentiate via a `.is-filled` class added on the
   server side when rendering the rating. */
.lucide-star.is-filled{fill:currentColor}

/* Compact text breadcrumb on the product detail page. Sits above the
   section, hugs the same container-wide so it lines up with the gallery
   left edge. Quiet visual weight — small, all-lowercase except the link
   text, with the `›` separator muted further so the crumb itself stays
   the focus. */
.product-breadcrumb{
  padding:18px 0 6px;font-size:13.5px;letter-spacing:.4px;color:var(--muted);
}
.product-breadcrumb .container-wide{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.product-breadcrumb a{color:var(--muted);text-decoration:none;transition:color .15s}
.product-breadcrumb a:hover{color:var(--ink)}
.product-breadcrumb-sep{color:var(--line);font-size:14px;line-height:1}
.product-breadcrumb-current{color:var(--ink);font-weight:500}
@media (max-width:780px){
  .product-breadcrumb{padding:10px 0 0;font-size:12.5px}
}

/* Product single — fixed-width gallery + flexible info column.
   Client wants the gallery compact (not dominating the page), with
   the rest of the available width going to the description, picker
   labels, spec lines and product tabs. 460px is wide enough for a
   strong product photo on a wide viewport but leaves the info
   column with the lion's share of the row — closing the dead band
   between image and info that 1fr/1fr produced.
   `align-items:start` keeps both columns top-aligned so neither
   centres vertically when one is taller than the other.
   The fixed track collapses to `1fr` below the desktop breakpoint
   in the mobile rule further down. */
.product-single{display:grid;grid-template-columns:460px 1fr;gap:48px;align-items:start}
/* On the product detail page, pull the gallery hard against the page's
   left edge — was sitting inside a 30px container padding which read as
   wasted real-estate between the cream image rectangle and the viewport
   edge. Right side keeps its padding so the info column doesn't bleed
   under the page's right gutter. The negative margin lets the gallery
   bleed past the container without resizing the grid track itself
   (otherwise the right column would shift to fill the new space). */
@media (min-width:781px){
  /* Use the standard `.container-wide` left padding (30px) so the
     gallery's left edge lines up with the breadcrumb above it AND
     with the header nav/logo at the top of the page — a single
     consistent left rule across the entire page. The "image pulled
     left" feel from earlier comes from `object-position:left center`
     on `.gallery-main img` (the photo content sticks to the left of
     its rectangle), not from container padding. */
  .section--product{padding-top:14px}
}
/* Long-form content pages — privacy, terms, shipping, returns, careers,
   press, sustainability. Reasonable line length + heading rhythm so
   policies stay legible. */
.content-page{
  max-width:760px;margin:0 auto;color:var(--ink);font-size:14px;line-height:1.8;
}
.content-page .content-page-lead{
  font-size:16px;color:var(--ink);line-height:1.7;margin-bottom:24px;
}
.content-page .content-page-meta{
  font-size:12px;color:var(--muted);letter-spacing:1px;
  text-transform:uppercase;margin:-12px 0 30px;
}
.content-page h2{
  font-size:18px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  margin:36px 0 14px;color:var(--ink);
}
.content-page p{margin:0 0 14px;color:var(--muted)}
.content-page ul,
.content-page ol{margin:0 0 18px;padding-left:22px}
.content-page li{margin-bottom:8px;color:var(--muted)}
.content-page strong{color:var(--ink);font-weight:600}
.content-page a{color:var(--brand);text-decoration:underline}
.content-page a:hover{color:var(--ink)}

/* Branded error pages (404 / 403 / 419 / 429 / 500). Self-contained
   block so they look right whether or not the page has any other content
   around them. 503 has its own bespoke layout (no chrome). */
.error-page{
  padding:80px 0 100px;background:#fff;
}
.error-inner{
  max-width:620px;margin:0 auto;text-align:center;
}
.error-code{
  font-size:140px;font-weight:600;letter-spacing:6px;
  color:var(--brand);line-height:1;margin-bottom:18px;
  font-family:'Oswald','Jost',sans-serif;
}
.error-inner h1{
  font-size:32px;font-weight:300;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:18px;color:var(--ink);
}
.error-inner p{
  font-size:14px;color:var(--muted);line-height:1.8;
  max-width:480px;margin:0 auto 30px;
}
.error-search{
  position:relative;max-width:380px;margin:0 auto 30px;
}
.error-search input{
  width:100%;border:1px solid var(--line);background:#fff;
  padding:14px 44px 14px 18px;font-size:14px;font-family:inherit;
  color:var(--ink);
}
.error-search input:focus{outline:none;border-color:var(--brand)}
.error-search i{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:14px;pointer-events:none;
}
.error-actions{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
@media (max-width:560px){
  .error-page{padding:60px 0 80px}
  .error-code{font-size:96px;letter-spacing:4px}
  .error-inner h1{font-size:24px;letter-spacing:1px}
}

/* Lightbox — opens when user clicks the main gallery image */
#noend-lightbox{
  position:fixed;inset:0;z-index:9000;
  display:none;align-items:center;justify-content:center;
}
#noend-lightbox.open{display:flex}
.lightbox-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.92);
}
.lightbox-image{
  position:relative;z-index:2;
  max-width:min(92vw, 1200px);max-height:90vh;
  object-fit:contain;cursor:zoom-out;
  background:transparent;
}
.lightbox-close{
  position:absolute;top:20px;right:24px;z-index:3;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;font-size:18px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);transition:background .15s;
}
.lightbox-close:hover{background:rgba(255,255,255,.18)}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:54px;height:54px;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;font-size:18px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);transition:background .15s;
}
.lightbox-nav:hover{background:rgba(255,255,255,.18)}
.lightbox-prev{left:24px}
.lightbox-next{right:24px}
.lightbox-counter{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;
  color:rgba(255,255,255,.7);font-size:12px;letter-spacing:2px;
}
@media (max-width:560px){
  .lightbox-nav{width:40px;height:40px;font-size:14px}
  .lightbox-prev{left:10px}
  .lightbox-next{right:10px}
  .lightbox-close{top:12px;right:12px;width:38px;height:38px;font-size:14px}
}

/* Cream/beige backdrop that matches the brand's product-photo
   background. With `object-fit:contain` the gallery now letterboxes
   tall photos with side bars — this colour makes those bars blend
   seamlessly into the photo's own backdrop. Scoped to .product-gallery
   so only the product details page picks it up; cart/cards/modals
   keep #f5f5f5. */
/* Background removed per client — letterboxing now shows the page
   colour beneath (white) instead of a colored fill. */
.product-gallery img{width:100%;background:transparent}

/* Hover-zoom: the image scales up to 2.2x with transform-origin set
   by JS to follow the cursor. We clip overflow on the wrap so the
   magnified pixels don't bleed into the column next to the gallery.
   `transition:transform` is short (.18s) so the zoom feels responsive
   even as the cursor moves continuously. */
.gallery-main--zoomable{overflow:hidden}
.gallery-main--zoomable img{transition:transform .18s ease-out, opacity .35s ease}
.gallery-main--zoomable img.is-zoomed{transform:scale(2.2);cursor:zoom-out}
.gallery-main{position:relative}
/* Compacted from 2/3 to 4/5 — the column is wide on desktop, so the
   old portrait ratio made the image tower over the right-side specs.
   `object-fit:contain` shows the FULL product photo without cropping
   (side bars appear when the original is taller than 4/5); the
   background already inherits #f5f5f5 from `.product-gallery img`
   so the letterboxing blends with the photo's typical backdrop.
   `max-height` caps the frame on tall viewports. */
/* `object-position:left` pins the image content to the left edge of
   its box. With `object-fit:contain` + a `max-height` cap, tall
   viewports leave horizontal slack between the image and the column
   edges; the default `center` then floats the photo to the middle of
   the column, which read as "image isn't aligned left" in QA. */
/* `display:block` strips the trailing inline-baseline whitespace that
   <img> elements carry by default — without it, ~4-6px of phantom gap
   appears between the bottom of the photo and the start of the thumb
   strip below.
   `aspect-ratio` + `object-fit:contain` removed: that combo reserved
   a fixed 4/5 box and letterboxed the photo inside whenever the
   natural aspect didn't match — leaving an empty band on the right
   that read as "image narrower than thumb strip below". The image
   now renders at its NATURAL ratio at 100% column width, so the
   cream rectangle and the thumb strip share exactly the same width. */
.gallery-main img{display:block;width:100%;height:auto}
/* Image-swap loading overlay — shown while the new color's image is
   preloading. Subtle white wash + centered spinner so the previous
   image stays partially visible (less jarring than a blank box). */
.gallery-main-loader{
  position:absolute;inset:0;
  background:rgba(255,255,255,.65);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:2;
  animation:gallery-loader-fade-in .15s ease;
}
.gallery-main-loader[hidden]{display:none}
.gallery-main-spinner{
  width:34px;height:34px;border-radius:50%;
  border:2.5px solid rgba(0,0,0,.12);
  border-top-color:var(--brand);
  animation:gallery-spin .8s linear infinite;
}
@keyframes gallery-spin{ to { transform: rotate(360deg); } }
@keyframes gallery-loader-fade-in{
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Single-row scrollable thumb strip — overflows horizontally on lots of
   images instead of wrapping into rows. Wrapper holds prev/next arrows
   absolutely; the strip itself is the scroll container with the native
   scrollbar visually hidden (still scroll-able via touch / wheel). */
.gallery-thumbs-wrap{
  /* margin-top intentionally matches the inter-thumb gap below so the
     vertical gap above the thumb row equals the horizontal gap between
     thumbs — visually uniform whitespace around every thumb tile. */
  position:relative;margin-top:6px;
}
.gallery-thumbs{
  display:flex;flex-wrap:nowrap;gap:6px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;       /* Firefox */
  -ms-overflow-style:none;    /* IE/old Edge */
}
.gallery-thumbs::-webkit-scrollbar{display:none}  /* Chrome/Safari */
.gallery-thumbs img{
  /* 6px gap between thumbs across breakpoints → 3 gaps × 6 = 18px
     subtracted for 4 visible thumbs on desktop. */
  flex:0 0 calc((100% - 18px) / 4);
  max-width:100px;aspect-ratio:4/5;
  /* `cover` (not `contain`) — the image FILLS the tile edge-to-edge.
     With `contain` the photo was letterboxed inside the tile whenever
     its natural aspect didn't match 4/5, leaving white space inside
     each tile that READ as a horizontal gap between thumbs. A small
     amount of cropping at the top/bottom is acceptable on thumbs —
     the gallery-main image keeps `contain` so the full photo is
     visible when selected. */
  object-fit:cover;object-position:center;background:transparent;
  scroll-snap-align:start;
}
@media (max-width:780px){
  /* 3 thumbs visible at 6px gap → 2 gaps × 6 = 12px */
  .gallery-thumbs img{flex-basis:calc((100% - 12px) / 3)}
}
@media (max-width:480px){
  /* 2.5 thumbs visible at 6px gap → 1.5 gaps × 6 = 9px */
  .gallery-thumbs img{flex-basis:calc((100% - 9px) / 2.5)}
}
.gallery-thumbs-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:#fff;color:var(--ink);font-size:12px;
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:opacity .2s, background .15s, color .15s;
}
.gallery-thumbs-arrow:hover{background:var(--ink);color:#fff}
.gallery-thumbs-arrow.prev{left:-12px}
.gallery-thumbs-arrow.next{right:-12px}
.gallery-thumbs-arrow.disabled{
  opacity:0;pointer-events:none;
}
@media (max-width:560px){
  .gallery-thumbs-arrow{width:30px;height:30px;font-size:10px}
  .gallery-thumbs-arrow.prev{left:-4px}
  .gallery-thumbs-arrow.next{right:-4px}
}
.gallery-thumbs img{cursor:pointer;border:none;transition:opacity .2s}
.gallery-thumbs img:hover{opacity:.85}
.gallery-thumbs img.active{opacity:1}
.gallery-main img{cursor:zoom-in}
.product-info h1{
  font-size:32px;font-weight:400;line-height:1.2;margin-bottom:18px;letter-spacing:1px;
}
.product-info .price-big{
  font-size:26px;font-weight:600;color:var(--brand);margin-bottom:18px;
}
.stars{color:#f5b50a;font-size:13px;margin-bottom:18px;text-decoration:none}
a.stars{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
a.stars:hover span{color:var(--brand)}
.stars span{color:var(--muted);font-size:12px;margin-left:6px}
.stars span{color:var(--muted);margin-left:8px;font-size:12px}
/* Short-desc spec block under the price (Materiali / Përmasa, etc.
   The "Ngjyra:" line is filtered out server-side because the color
   picker right below already conveys it).
   Each line is its own <p> — tight internal spacing so the spec list
   reads as a compact stack, plus a generous bottom margin so the
   color picker sits clearly in its own section, not crammed under it. */
.product-info .desc{
  margin-top:18px;margin-bottom:30px;
  padding-bottom:24px;border-bottom:1px solid var(--line);
}
.product-info .desc p{
  /* Bumped 13 → 15px so the spec lines (Materiali / Shtresa / Tabani)
     read at the same scale as the product-tabs body below — previously
     the spec block looked like a secondary footnote between price and
     picker. Same scale as `.product-tabs .tab-content p`. */
  color:var(--muted);font-size:15px;line-height:1.55;
  margin:0 0 4px;
}
.product-info .desc p:last-child{margin-bottom:0}

/* Mobile compactness for the product detail page. Shrinks every gap on
   the right column so title → price → specs → color → size → button →
   wishlist read as a tight, scrollable stack — instead of widely-spaced
   sections that force a lot of scrolling on phone viewports. Also
   trims the main gallery + thumb-strip heights so the image area
   doesn't dominate the first fold. */
@media (max-width:780px){
  /* Top of the product page: tighten the section padding ONLY when
     it wraps the product detail (`.product-single`). Other pages
     keep their normal section padding. */
  .section:has(.product-single){padding:18px 0 24px}

  .gallery-main img {
    aspect-ratio: auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    max-height: 70vh !important;
    object-fit: contain !important;
  }
  /* 6px breathing room above the thumb strip AND 6px between each
     thumb — a clean uniform whitespace rhythm around every tile. */
  .gallery-thumbs-wrap{margin-top:6px}
  .gallery-thumbs{margin-top:0;gap:6px}
  /* Thumbs bumped from 78px → 110px so each photo is roughly 40%
     larger — easier to recognise on phones. */
  .gallery-thumbs img{max-width:110px;aspect-ratio:1/1}
  /* Title sits flush against the thumb strip — no top margin AND
     the grid row-gap is collapsed to a tight 6px so the title hugs
     the gallery (the desktop 40px gap reads as a dead band on mobile). */
  .product-info{margin-top:0}
  .product-single{gap:6px}
  /* Bumped sizes again for readability on mobile — the title, price
     and spec lines all step up one notch so they stand out clearly.
     Picker labels (NGJYRA / MADHËSIA) also up so they're legible
     at arm's length. */
  .product-info h1{font-size:26px;margin-bottom:8px;letter-spacing:.5px;line-height:1.25;font-weight:500}
  .product-info .price-big{font-size:24px;margin-bottom:12px;font-weight:600}
  .product-info .desc{margin-top:8px;margin-bottom:14px;padding-bottom:12px}
  .product-info .desc p{font-size:14px;line-height:1.55}
  .color-picker{margin-bottom:12px}
  .color-picker label{margin-bottom:8px;font-size:13px}
  .size-picker{margin-bottom:12px !important}
  .size-picker label{margin-bottom:8px;font-size:13px}
  .size-picker-head{margin-bottom:8px}
  /* Mobile add-to-cart row: compress the qty stepper and let the
     CTA fill the remaining width so "SHTO NË SHPORTË" stays on a
     single line even at iPhone 11 Pro width (~375px viewport).
     Letter-spacing also trimmed from the global .btn's 2px → 1px
     so the label has a bit more breathing room horizontally. */
  .qty-add{margin-bottom:10px;gap:8px;align-items:stretch}
  .qty-add .qty{flex:0 0 auto}
  .qty-add .qty button{width:34px;height:44px;font-size:16px}
  .qty-add .qty input{width:36px;font-size:14px;height:44px}
  .qty-add .btn{
    flex:1;min-width:0;padding:0 14px;height:44px;
    font-size:12px;letter-spacing:1px;white-space:nowrap;
    display:inline-flex;align-items:center;justify-content:center;
  }
  /* Wishlist link — small bottom margin only. */
  #pd-wish{margin-bottom:6px !important;font-size:13px;padding:2px 0}
  /* Tabs hug the wishlist link tightly. */
  .product-tabs{margin-top:4px}
  /* Mobile tab headers also stay one notch larger + bolder than the
     body so the hierarchy reads correctly on phone screens. */
  .product-tabs .tabs{margin-bottom:10px;padding-bottom:8px;font-size:15px;letter-spacing:1.2px}
  .product-tabs .tabs button{font-size:15px;letter-spacing:1.2px;font-weight:600}
  /* Removed the desktop `min-height:220px` reserve entirely on mobile —
     it was eating ~60-80px of dead space under short tab content
     (e.g. when the description is just 3-4 spec lines). Accept a
     small layout jump on tab switch in exchange for no whitespace
     under the description. */
  .product-tabs .tab-content{min-height:0;font-size:14px;line-height:1.6}
  /* Related-products block — pull it tight under the tabs on mobile
     so the user doesn't scroll through dead space to reach it. */
  .related-products{margin-top:6px !important}
  .related-products .section-title{margin-bottom:10px}
}
/* Size picker — chip-style buttons (replaces the legacy <select>) */
.size-picker label{
  display:block;font-size:12px;letter-spacing:1px;color:var(--muted);
  text-transform:uppercase;margin-bottom:10px;
}
.size-chips{display:flex;flex-wrap:wrap;gap:8px}
.size-chip{
  position:relative;
  min-width:46px;height:44px;padding:0 10px;
  border:1px solid #d9d9d9;background:#fff;color:var(--ink);
  font-size:13px;font-weight:500;letter-spacing:.3px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .15s,color .15s,background .15s;
  overflow:hidden;
}
.size-chip:hover{border-color:var(--ink)}
.size-chip--active{
  border-color:var(--ink);background:var(--ink);color:#fff;
}
.size-chip--oos{
  color:#bbb;cursor:not-allowed;
}
.size-chip--oos:hover{border-color:#d9d9d9}
/* Out-of-stock: cross out the chip with an X (two diagonal lines) instead
   of a single strikethrough — clearer "unavailable" signal in a grid of
   size buttons. */
.size-chip--oos::before,
.size-chip--oos::after{
  content:'';position:absolute;
  top:50%;left:8%;right:8%;height:1px;
  background:currentColor;opacity:.7;
  pointer-events:none;
}
.size-chip--oos::before{transform:rotate(45deg)}
.size-chip--oos::after{transform:rotate(-45deg)}

.qty-add{display:flex;gap:14px;margin-bottom:30px;align-items:center}
.qty{
  display:inline-flex;border:1px solid var(--line);
}
.qty button{
  width:42px;height:48px;font-size:18px;color:var(--ink);
}
.qty input{
  width:50px;text-align:center;border:none;outline:none;font-size:14px;
}
/* Low-stock hint under the qty stepper (e.g. "Vetëm 1 copë në stok").
   Pulled up to sit snug beneath .qty-add's 30px bottom margin. */
.pd-stock-note{
  margin:-22px 0 24px;font-size:12px;letter-spacing:.3px;color:#7a1e1e;
}
.pd-stock-note[hidden]{display:none}
.product-meta{padding-top:20px;border-top:1px solid var(--line);font-size:13px}
.product-meta p{margin-bottom:6px;color:var(--muted)}
.product-meta strong{color:var(--ink);text-transform:uppercase;font-size:12px;letter-spacing:1px;margin-right:8px}
.product-tabs{margin-top:20px}
/* Related products block on the product detail page — sits below the
   tabs. ~20px breathing room is enough; the section-title underneath
   carries its own bottom margin. */
.related-products{margin-top:20px}
.related-products .section-title{margin-bottom:18px}
/* Related products as a horizontal SLIDER at every breakpoint — same
   touch-friendly scroll-snap pattern the home-page rails use. Each
   breakpoint sets how many cards are visible at once via flex-basis
   on the card. Card count: 4 desktop / 3 mid-laptop / 2 small tablet
   / center-mode single-and-a-half on mobile.
   `display:flex` overrides the inherited `.products{display:grid}`
   from the global product-grid rule. */
.related-products .products{
  display:flex;flex-wrap:nowrap;gap:14px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding:0 0 6px;
  grid-template-columns:none;
  align-items:start;
}
.related-products .products::-webkit-scrollbar{display:none}
.related-products .products > .product{
  /* 4 cards SLIGHTLY SMALLER than exact fit (subtract 50px instead
     of the exact 42px) so 4 fit comfortably with ~8px of dead space
     on the right rather than the 4th card overflowing on browsers
     that include scrollbar width in the viewport calculation. */
  flex:0 0 calc((100% - 50px) / 4);
  scroll-snap-align:start;
  scroll-snap-stop:always;
  min-width:0;
}
@media (max-width:1280px){
  .related-products .products > .product{flex-basis:calc((100% - 36px) / 3)}
}
@media (max-width:980px){
  .related-products .products > .product{flex-basis:calc((100% - 22px) / 2)}
}
/* Mobile: 2-column slider mode — snaps card-by-card on swipe, displaying two cards per view. */
@media (max-width:780px){
  .related-products .products{gap:14px}
  .related-products .products::before,
  .related-products .products::after{
    display:none;
  }
  .related-products .products > .product{
    flex-basis:calc((100% - 14px) / 2);
    scroll-snap-align:start;
  }
}
@media (max-width:560px){
  .related-products .products{gap:10px}
  .related-products .products::before,
  .related-products .products::after{display:none}
  .related-products .products > .product{flex-basis:calc((100% - 10px) / 2)}
}
.product-tabs .tabs{
  justify-content:flex-start;border-bottom:1px solid var(--line);
  padding-bottom:14px;margin-bottom:24px;
  /* Tab headers MUST read as headers — heavier and slightly larger
     than the 15px tab body below. Previously they were 13px which
     made them look like footnote labels under the description text.
     16px + 600 weight + uppercase delivers a clear hierarchy:
     header (16/uppercase/bold) > body (15/regular). */
  font-size:16px;letter-spacing:1.5px;
}
.product-tabs .tabs button{font-size:16px;letter-spacing:1.5px;font-weight:600}
.product-tabs .tab-content{
  /* Body type bumped 14px → 15px so the description doesn't read as
     a secondary block compared to the picker labels / spec lines. */
  font-size:15px;color:var(--muted);max-width:900px;
  /* All three panes share a minimum height so "Produkte të Ngjashme"
     below the tabs stays anchored when the user switches between
     Përshkrimi / Vlerësime / Transporti. 220px fits the typical
     Transporti + Vlerësime states; longer Përshkrimi just grows
     past it. */
  min-height:220px;
}
.product-tabs .tab-content p{margin-bottom:10px;line-height:1.6;font-size:15px}
/* Description tab: legacy data shipped inline color/font/family/size on
   nearly every span. We already stripped those attributes server-side,
   but old cached versions and pasted Google-Docs HTML can still come
   through with style="..." — these rules normalise EVERY descendant to
   the site's own typography so descriptions can't fight the design. */
.product-tabs .tab-content--desc,
.product-tabs .tab-content--desc *{
  font-family:inherit !important;
  color:var(--muted) !important;
  background:transparent !important;
}
.product-tabs .tab-content--desc strong,
.product-tabs .tab-content--desc b{color:var(--ink) !important;font-weight:600}
.product-tabs .tab-content--desc a{color:var(--brand) !important;text-decoration:underline}
.product-tabs .tab-content--desc h2,
.product-tabs .tab-content--desc h3,
.product-tabs .tab-content--desc h4{
  color:var(--ink) !important;
  margin:18px 0 8px;line-height:1.3;
}

/* Cart — card layout */
.cart-lines{
  display:flex;flex-direction:column;
  border-top:1px solid var(--line);
  margin-bottom:30px;
}
.cart-line{
  display:grid;grid-template-columns:160px 1fr;gap:24px;
  padding:20px 0;border-bottom:1px solid var(--line);
  /* Row height is driven by the right column (name → meta → qty →
     stock warning). The thumb container stretches with the grid;
     its <img> is absolutely positioned so the photo's natural 2:3
     ratio CAN'T push the row taller — top aligns with the product
     name, bottom aligns with the stock-warning line. */
  align-items:stretch;
}
.cart-line-thumb{
  display:block;position:relative;width:100%;background:transparent;
  overflow:hidden;align-self:stretch;
}
.cart-line-thumb img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;
  transition:transform .3s;
}
.cart-line-thumb:hover img{transform:scale(1.04)}
.cart-line-info{display:flex;flex-direction:column;gap:8px;min-width:0}
.cart-line-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.cart-line-name{
  font-weight:500;font-size:15px;letter-spacing:.3px;color:var(--ink);
}
.cart-line-name:hover{color:var(--brand)}
.cart-line-remove{
  width:28px;height:28px;font-size:18px;color:var(--muted);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cart-line-remove:hover{color:var(--brand)}
.cart-line-price{color:var(--muted);font-size:13px}
.cart-line-bottom{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:4px;
}
.cart-line-subtotal{font-weight:600;font-size:16px;color:var(--ink)}
.cart-line-stock{
  font-size:11px;color:var(--muted);margin:6px 0 0;letter-spacing:.3px;
}
.cart-line-stock.is-cap{color:#7a1e1e}
.qty button[disabled]{opacity:.4;cursor:not-allowed}
/* Cart-line variant: more compact than the product-detail variant. The
   stock warning ("Stoku maksimal është 4 copë.") drops to its own
   line under the qty, so we don't need the chunky 48px control here. */
.cart-line .qty button{width:32px;height:32px;font-size:14px}
.cart-line .qty input{width:42px;font-size:13px}
@media (max-width:560px){
  .cart-line{grid-template-columns:96px 1fr;gap:14px;padding:14px 0}
  .cart-line-thumb{width:100%;height:auto;min-height:96px}
  .cart-line-name{font-size:13px;line-height:1.3}
  .cart-line-subtotal{font-size:15px}
  .cart-line-info{gap:6px}
}

/* Old cart-table styles (kept for backwards compatibility) */
.cart-table{width:100%;border-collapse:collapse}
.cart-table th{
  text-align:left;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;padding:18px;
  border-bottom:1px solid var(--line);font-weight:600;
}
.cart-table td{padding:18px;border-bottom:1px solid var(--line);vertical-align:middle}
.cart-table img{width:70px;height:70px;object-fit:cover;background:#f5f5f5}
.cart-product{display:flex;align-items:center;gap:18px}
.cart-product b{font-weight:500}
.remove-btn{color:var(--muted);font-size:18px}
.remove-btn:hover{color:var(--brand)}
.cart-coupon{
  display:flex;gap:14px;justify-content:space-between;align-items:center;
  margin-top:30px;flex-wrap:wrap;
}
.cart-coupon-form{display:flex;gap:10px}
.cart-coupon-form input{
  padding:12px 16px;border:1px solid var(--line);font-size:13px;outline:none;
}
.cart-totals{
  max-width:420px;margin-top:60px;border:1px solid var(--line);padding:30px;
}
.cart-totals h3{
  font-size:14px;letter-spacing:3px;text-transform:uppercase;
  margin-bottom:20px;font-weight:600;
}
.cart-totals .row{
  display:flex;justify-content:space-between;padding:14px 0;
  border-bottom:1px solid var(--line);font-size:14px;
}
.cart-totals .row.total{font-weight:600;font-size:16px;color:var(--brand)}
.cart-totals-note{
  font-size:11px;color:var(--muted);margin:6px 0 0;letter-spacing:.3px;
}
.cart-checkout{
  width:100%;margin-top:22px;background:var(--brand);border-color:var(--brand);
}
.cart-checkout[disabled]{
  opacity:.55;cursor:not-allowed;
}
.cart-checkout-note{
  font-size:11px;color:var(--muted);text-align:center;margin:8px 0 0;
}

/* Two-column cart layout: lines on the left, totals card on the right. */
.cart-grid{
  display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start;
}
.cart-grid .cart-lines{margin-bottom:0}
.cart-grid .cart-totals{margin-top:0;max-width:none}
@media (max-width:900px){
  .cart-grid{grid-template-columns:1fr;gap:30px}
}

.cart-line-meta{
  display:flex;gap:10px;flex-wrap:wrap;
  font-size:12px;color:var(--muted);letter-spacing:.3px;
}
.cart-line-meta span{
  display:inline-block;padding:2px 8px;border:1px solid var(--line);
}
.cart-line-thumb-empty{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:#f5f5f5;color:#bbb;font-size:10px;letter-spacing:.15em;
}

.cart-empty{
  text-align:center;padding:80px 0;
}
.cart-empty i{font-size:48px;color:#ddd;margin-bottom:18px;display:block}
.cart-empty h3{font-weight:400;margin-bottom:14px;font-size:22px}
.cart-empty p{color:var(--muted);margin-bottom:24px}

/* Cart drawer — slide-out from the right. Uses the same backdrop pattern
   as the mobile nav drawer. */
.cart-drawer{
  position:fixed;inset:0;z-index:200;
  visibility:hidden;pointer-events:none;
}
.cart-drawer.open{visibility:visible;pointer-events:auto}
.cart-drawer-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.45);
  opacity:0;transition:opacity .28s ease;
}
.cart-drawer.open .cart-drawer-backdrop{opacity:1}
.cart-drawer-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(420px, 92vw);background:#fff;
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s ease;
  box-shadow:-8px 0 36px rgba(0,0,0,.18);
}
/* Mobile drawer goes edge-to-edge — the 92vw fallback above leaves an
   8% sliver of the backdrop showing which felt cramped on narrow
   phones; full-bleed gives the cart room to breathe and matches the
   rest of the mobile UI (header, modals). */
@media (max-width:640px){
  .cart-drawer-panel{width:100vw;max-width:100%;box-shadow:none}
}
.cart-drawer.open .cart-drawer-panel{transform:translateX(0)}
.cart-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px;border-bottom:1px solid var(--line);
}
.cart-drawer-head h3{
  font-size:13px;letter-spacing:3px;text-transform:uppercase;
  font-weight:600;margin:0;line-height:1;
  display:inline-flex;align-items:center;gap:8px;
}
.cart-drawer-count{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.5px;
  min-width:18px;height:18px;padding:0 6px;border-radius:10px;
}
.cart-drawer-close{
  width:32px;height:32px;font-size:18px;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;cursor:pointer;padding:0;
  -webkit-appearance:none;appearance:none;
}
.cart-drawer-close i{color:inherit}
.cart-drawer-close:hover{color:var(--brand)}
.cart-drawer-body{
  flex:1;overflow-y:auto;padding:18px 24px 24px;
}
.cart-drawer-loading{
  text-align:center;color:var(--muted);font-size:13px;padding:60px 0;
}
.cart-drawer-empty{
  text-align:center;color:var(--muted);font-size:13px;padding:60px 0;
}
.cart-drawer-line{
  display:grid;grid-template-columns:64px 1fr;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.cart-drawer-line:first-child{padding-top:0}
.cart-drawer-line-thumb{width:64px;height:64px;background:transparent;overflow:hidden;display:block}
.cart-drawer-line-thumb img{width:100%;height:100%;object-fit:contain}
.cart-drawer-line-info{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:13px}
.cart-drawer-line-name{font-weight:500;color:var(--ink);letter-spacing:.2px}
.cart-drawer-line-meta{color:var(--muted);font-size:11px;letter-spacing:.3px}
.cart-drawer-line-row{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.cart-drawer-line-qty{color:var(--muted);font-size:12px}
.cart-drawer-line-price{font-weight:600;color:var(--ink)}
.cart-drawer-foot{
  padding:20px 24px;border-top:1px solid var(--line);background:#fafafa;
}
.cart-drawer-subtotal{
  display:flex;justify-content:space-between;font-size:14px;font-weight:500;
  margin-bottom:14px;
}
.cart-drawer-foot .btn{display:block;text-align:center;width:100%}
.cart-drawer-foot .btn + .btn{margin-top:8px}
.cart-drawer-view{
  background:transparent;color:var(--ink);border:1px solid var(--ink);
}
.cart-drawer-view:hover{background:var(--ink);color:#fff}

/* Checkout */
.checkout-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:50px}
.checkout-section h3{
  font-size:14px;letter-spacing:3px;text-transform:uppercase;
  margin-bottom:24px;font-weight:600;
}
.order-summary{
  background:#fafafa;padding:30px;border:1px solid var(--line);
}
.order-summary table{width:100%;font-size:14px}
.order-summary td{padding:12px 0;border-bottom:1px solid var(--line)}
.order-summary tr:last-child td{border:none}
.order-summary .total{font-weight:600;color:var(--brand);font-size:16px}
/* Validation error under form fields */
.form-field small.error{
  display:block;margin-top:4px;color:#7a1e1e;font-size:11px;letter-spacing:.3px;
}

/* Checkout "save my details" checkbox — sits outside .form-field so the
   wrapper's `input{width:100%;display:block}` doesn't stretch the box. */
.checkout-checkbox{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  margin:6px 0 24px;
}
.checkout-checkbox input{
  width:16px;height:16px;margin:0;flex:0 0 auto;
}
.checkout-checkbox span{
  font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink);
}

/* Gift recipient sub-block — appears inside the billing column under the
   "this is a gift" checkbox. Indented and lightly tinted so it reads as
   a nested section instead of merging with the billing fields. */
.gift-block{
  margin:-8px 0 24px;padding:18px 20px;
  background:#faf7fb;border:1px solid #eadde4;border-radius:8px;
  /* Equalise every gap inside the block to exactly 18px. flex+gap
     beats per-field margin-bottom because bare inputs (no label) and
     labelled inputs no longer create different row heights — the gap
     between any two children is now identical. */
  display:flex;flex-direction:column;gap:18px;
}
.gift-block > .form-row,
.gift-block > .form-field{margin:0}
.gift-block h4{
  font-size:13px;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink);margin-bottom:6px;font-weight:600;
}
.gift-block-hint{
  font-size:12px;color:var(--muted);margin-bottom:18px;line-height:1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   Customer account area — login, register, dashboard, orders, profile
   ═══════════════════════════════════════════════════════════════════ */

.account-auth{max-width:480px;margin:0 auto}
.account-auth-card{
  background:#fff;border:1px solid var(--line);padding:40px 38px;
}
.account-auth-card h2{
  font-size:24px;font-weight:400;letter-spacing:1.5px;
  text-transform:uppercase;margin-bottom:6px;text-align:center;
}
.account-auth-sub{
  color:var(--muted);font-size:13px;text-align:center;margin-bottom:30px;
}
.account-auth-alt{
  margin-top:24px;text-align:center;font-size:13px;color:var(--muted);
}
.account-auth-alt a{color:var(--brand);font-weight:500}
.account-auth-alt a:hover{text-decoration:underline}

/* Dashboard layout — sidebar + main column */
.account-layout{
  display:grid;grid-template-columns:240px 1fr;gap:40px;
}
.account-sidebar{
  background:#fff;border:1px solid var(--line);padding:24px 18px;
  align-self:start;
}
.account-sidebar-greeting{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.account-sidebar-label{
  display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px;
}
.account-sidebar-greeting strong{
  font-size:16px;font-weight:500;color:var(--ink);
}
.account-sidebar nav{display:flex;flex-direction:column}
.account-sidebar nav a,
.account-sidebar-logout button{
  display:flex;align-items:center;gap:10px;
  padding:10px 6px;font-size:13px;color:var(--ink);
  letter-spacing:.3px;cursor:pointer;border:none;background:none;
  text-align:left;font-family:inherit;
  border-bottom:1px solid transparent;
}
.account-sidebar nav a:hover,
.account-sidebar-logout button:hover{color:var(--brand)}
.account-sidebar nav a.active{color:var(--brand);font-weight:500}
.account-sidebar nav a i,
.account-sidebar-logout button i{width:18px;color:var(--muted)}
.account-sidebar nav a.active i{color:var(--brand)}
.account-sidebar-logout{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* Main column */
.account-main{min-width:0}
.account-flash{
  padding:12px 16px;font-size:13px;margin-bottom:20px;
}
.account-flash--ok{
  background:#e6f4ea;border:1px solid #b6dabd;color:#1b5e20;
}
.account-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;
}
.account-stat{
  background:#fff;border:1px solid var(--line);padding:18px 20px;
}
.account-stat-label{
  display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.account-stat strong{
  font-size:18px;font-weight:500;color:var(--ink);overflow-wrap:anywhere;
}

.account-card{
  background:#fff;border:1px solid var(--line);padding:28px 30px;
}
.account-card-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.account-card-head h3{
  font-size:14px;letter-spacing:2px;text-transform:uppercase;
  font-weight:500;margin:0;
}
.account-card-more{
  font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--brand);
}
.account-card-more:hover{text-decoration:underline}

.account-empty{
  padding:30px 0;text-align:center;color:var(--muted);font-size:14px;
}
.account-empty a{
  display:inline-block;margin-left:6px;color:var(--brand);font-weight:500;
}
.account-empty a:hover{text-decoration:underline}

/* Orders table */
.account-orders-table{
  width:100%;font-size:13px;border-collapse:collapse;
}
.account-orders-table th{
  text-align:left;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:10px 0;border-bottom:1px solid var(--line);
}
.account-orders-table td{
  padding:14px 0;border-bottom:1px solid var(--line);
}
.account-orders-table tr:last-child td{border-bottom:none}
.account-orders-view{
  font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:1px;
}
.account-orders-view:hover{color:var(--brand);border-color:var(--brand)}

.account-pagination{margin-top:20px;display:flex;justify-content:center}
.account-pagination > nav{font-size:13px}

/* Address book */
.address-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;
}
.address-card{
  position:relative;background:#fafafa;border:1px solid var(--line);
  padding:18px 20px;font-size:13px;color:var(--ink);
}
.address-card--default{
  background:#fff;border-color:var(--brand);
}
.address-card-pill{
  position:absolute;top:10px;right:10px;
  background:var(--brand);color:#fff;
  font-size:9px;letter-spacing:1px;text-transform:uppercase;
  padding:3px 8px;font-weight:600;
}
.address-card-body p{margin:2px 0;line-height:1.5}
.address-card-body p:first-child{margin-top:0}
.address-card-actions{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:1px;text-transform:uppercase;
}
.address-card-actions a,
.address-link{
  color:var(--ink);background:none;border:none;padding:0;
  cursor:pointer;font-size:11px;letter-spacing:1px;text-transform:uppercase;
  font-family:inherit;font-weight:600;
}
.address-card-actions a:hover,
.address-link:hover{color:var(--brand)}
.address-link--danger{color:#7a1e1e}
.address-link--danger:hover{color:#7a1e1e;text-decoration:underline}

/* Order status pills */
.order-status{
  display:inline-block;padding:3px 10px;font-size:11px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;
}
.order-status--pending  {background:#fff3cd;color:#856404}
.order-status--sent     {background:#cce5ff;color:#004085}
.order-status--completed{background:#d4edda;color:#155724}
.order-status--cancelled{background:#f5e2e2;color:#721c24;text-decoration:line-through}

/* Order detail head row */
.account-order-head{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  padding-bottom:20px;border-bottom:1px solid var(--line);
}
.account-order-head strong{font-size:14px;font-weight:500;color:var(--ink);display:block}

/* Tracking callout — surfaces ctracking / ccarrier on the account order page */
.order-tracking{
  display:flex;align-items:center;gap:18px;
  padding:20px 24px;margin:24px 0 0;
  background:#fff;border:1px solid var(--brand);
}
.order-tracking i{
  font-size:24px;color:var(--brand);flex:0 0 auto;
}
.order-tracking-body{flex:1;min-width:0}
.order-tracking-label{
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px;
}
.order-tracking-number{
  font-family:monospace;font-size:18px;font-weight:600;color:var(--ink);
  word-break:break-all;
}

@media (max-width:780px){
  .account-layout{grid-template-columns:1fr;gap:24px}
  .account-stats{grid-template-columns:1fr 1fr}
  .account-order-head{grid-template-columns:1fr}
}

/* Order confirmation page */
.order-confirmation{max-width:880px;margin:0 auto}
.order-confirmation-head{text-align:center;margin-bottom:50px}
.order-confirmation-head i{font-size:48px;color:var(--brand);margin-bottom:14px;display:block}
.order-confirmation-head h2{font-size:28px;font-weight:400;letter-spacing:1px;margin-bottom:10px}
.order-confirmation-head p{color:var(--muted);font-size:14px;margin-bottom:14px}
.order-confirmation-number{
  display:inline-block;padding:10px 18px;border:1px solid var(--line);
  font-size:13px;letter-spacing:1px;
}
.order-confirmation-grid{
  display:grid;grid-template-columns:1.4fr 1fr;gap:50px;
}
.order-confirmation-grid h3{
  font-size:13px;letter-spacing:2px;text-transform:uppercase;
  font-weight:600;margin-bottom:14px;
}
.order-confirmation-lines{border-top:1px solid var(--line)}
.order-confirmation-line{
  display:flex;justify-content:space-between;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;
}
.order-confirmation-totals{margin-top:20px;font-size:14px}
.order-confirmation-totals > div{
  display:flex;justify-content:space-between;padding:8px 0;
}
.order-confirmation-totals .total{
  font-weight:600;color:var(--brand);font-size:16px;
  border-top:1px solid var(--line);margin-top:8px;padding-top:14px;
}
@media (max-width:780px){
  .order-confirmation-grid{grid-template-columns:1fr;gap:30px}
}

.payment-method{
  background:#fff;border:1px solid var(--line);padding:18px;font-size:13px;
  color:var(--muted);margin-top:20px;
}
.payment-method--disabled{opacity:.55}
/* Each block is one flex row: radio | text-stack. The text-stack
   houses the bold title above the grey subline; `justify-content:
   center` vertically centers the pair against the radio so all three
   blocks read at identical heights. */
.payment-method-label{
  display:flex;align-items:center;gap:12px;
  color:var(--ink);font-weight:500;cursor:pointer;margin:0;
}
.payment-method-text{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  line-height:1.35;
}
.payment-method-text strong{
  color:var(--ink);font-weight:600;font-size:13px;letter-spacing:.3px;
}
.payment-method-text small{
  color:var(--muted);font-size:12px;font-weight:400;letter-spacing:0;
  text-transform:none;
}

/* About */
.about-intro{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-intro img{width:100%}
.about-intro .eyebrow{
  font-size:12px;letter-spacing:4px;text-transform:uppercase;
  color:var(--brand);margin-bottom:14px;font-weight:600;
}
.about-intro h2{
  font-size:36px;font-weight:300;line-height:1.2;margin-bottom:20px;letter-spacing:1px;
}
.about-intro p{color:var(--muted);margin-bottom:18px}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.team-card{text-align:center}
.team-card img{aspect-ratio:1/1;object-fit:cover;margin-bottom:18px}
.team-card h4{font-size:16px;font-weight:500;letter-spacing:1px}
.team-card span{font-size:12px;color:var(--muted);letter-spacing:2px;text-transform:uppercase}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:60px}
.contact-info-block{margin-bottom:34px;display:flex;gap:18px;align-items:flex-start}
.contact-info-block i,
.contact-info-block svg{
  color:var(--black);font-size:38px;flex-shrink:0;
  margin-top:4px;
}
.contact-info-block h5{
  font-size:13px;letter-spacing:2px;text-transform:uppercase;
  margin-bottom:6px;font-weight:600;
}
.contact-info-block p{font-size:14px;color:var(--muted);line-height:1.7}

/* Reveal */
.reveal{opacity:0;transform:translateY(20px);transition:all .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Toasts */
#toast-host{
  position:fixed;bottom:30px;right:30px;z-index:1000;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;
}
.toast{
  background:var(--black);color:#fff;padding:14px 20px;
  border-left:3px solid var(--brand);font-size:13px;
  min-width:240px;max-width:340px;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
  opacity:0;transform:translateX(40px);transition:all .3s;
}
.toast.show{opacity:1;transform:translateX(0)}
.toast-error{border-left-color:#e54b4b}

/* Wishlist active state */
.in-wishlist{color:var(--brand)!important}
.in-wishlist i{color:var(--brand)}
.product-actions button.in-wishlist:hover{
  color:#fff !important;
  background:var(--brand);
}

/* Modal */
.modal{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal.open{display:flex}
.modal-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.55);
  animation:fadeIn .25s ease;
}
.modal-body{
  position:relative;background:#fff;max-width:840px;width:100%;
  max-height:90vh;overflow:auto;
  animation:slideUp .3s ease;
}
.modal-close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:36px;height:36px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.12);font-size:14px;
  /* iOS Safari paints <button> text in -apple-system-blue by default.
     Force ink + neutralise the native chrome so the X stays black. */
  border:none;color:var(--ink);cursor:pointer;padding:0;
  -webkit-appearance:none;appearance:none;
}
.modal-close i{color:inherit}
.modal-close:hover{color:var(--brand)}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.modal-img{background:transparent;position:relative}
.modal-img img{width:100%;height:100%;object-fit:cover}
.modal-info{padding:50px 40px}
.modal-info h3{font-size:24px;font-weight:500;margin-bottom:14px;letter-spacing:1px}
.modal-price{font-size:20px;font-weight:600;color:var(--brand);margin-bottom:20px}
.modal-info p{color:var(--muted);margin-bottom:24px;font-size:14px}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.modal-actions .btn{padding:12px 20px;font-size:11px}
/* The global .btn-outline is white-on-dark (designed for the hero /
   video band). Inside the modal (white background) it's invisible
   until hovered. Override to ink-on-white so "Shiko Detajet" reads
   clearly at rest. */
.modal-actions .btn-outline{
  background:transparent;color:var(--ink);border-color:var(--ink);
}
.modal-actions .btn-outline:hover{
  background:var(--ink);color:#fff;border-color:var(--ink);
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:700px){
  .modal-grid{grid-template-columns:1fr}
  .modal-img{aspect-ratio:1/1}
  .modal-info{padding:30px}
  #toast-host{left:20px;right:20px;bottom:20px}
  .toast{min-width:0;max-width:none}
}

/* Responsive */
@media (max-width:1100px){
  .menu-toggle{display:inline-flex;font-size:22px}
  .nav{display:none}
  /* Mobile header order (left → right):
        1. Hamburger
        2. Logo image
        3. Search bar (takes remaining width)
        4. Account + Cart icons
     Putting the logo BEFORE the search bar matches the client's mock —
     brand sits next to the menu trigger, the search input fills the
     middle, and the action icons cap the right. */
  .search-wrap{display:flex}
  .search-wrap-host{flex:1 1 auto;order:3;min-width:0}
  .search-wrap{padding:8px 14px}
  .search-wrap input{font-size:13px;min-width:0;width:100%}
  .search-wrap i,
  .search-wrap .lucide{font-size:14px}
  .icon-btn{font-size:19px}
  .menu-toggle{order:1}
  .logo{order:2;margin:0;flex-shrink:0}
  .header-icons{order:4}
  /* 3 cards is intentionally NOT triggered at 1100 — the .products
     grid stays at 4 cols down to a narrower breakpoint defined
     separately below so typical desktop laptops (1280-1440px) still
     render 4 cards on the shop page. */
  .header-inner{height:64px;gap:10px;flex-wrap:nowrap}
  .container,.container-wide{padding:0 20px}
}
@media (max-width:560px){
  .search-wrap-host{flex:1 1 auto}
}
@media (max-width:900px){
  .section{padding:60px 0}
  .section-tight{padding:40px 0}
  .hero-grid{grid-template-columns:1fr}
  .hero-image{height:380px}
  .hero-text h1{font-size:54px}
  .cat-grid{grid-template-columns:1fr}
  .deal{grid-template-columns:1fr;gap:24px;padding:24px 0}
  .promo-grid{grid-template-columns:1fr}
  .features{grid-template-columns:repeat(2,1fr);gap:20px}
  .brands{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  /* On mobile/tablet the brand block leads — full width at the top of
     the footer, ahead of the link columns. CSS grid `order:-1` lifts
     it above its DOM siblings without touching the markup, so the
     desktop center-of-row layout stays intact above 900px. */
  .footer-brand{order:-1;grid-column:1 / -1}
  /* The newsletter sits right above the footer and both share the
     same dark background. 70px + 70px = 140px of empty void on the
     seam; tighten on mobile so the brand block doesn't float in
     empty space. */
  .newsletter{padding:42px 0 28px}
  .footer{padding:28px 0 0}
  .product-single{grid-template-columns:1fr}
  .checkout-grid{grid-template-columns:1fr}
  .about-intro{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .team{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .page-banner{padding:60px 0}
  .page-banner h1{font-size:30px}
}
/* Filter drawer band — active wherever .shop-layout has collapsed to
   a single column (≤1199.98px). The sidebar slides in from the left
   as an overlay drawer triggered by .filter-toggle. Synced with the
   .shop-layout breakpoint (1200px) so there's no dead band where the
   sidebar is hidden but the filter toggle is also missing. */
@media (max-width:1199.98px){
  .filter-toggle{display:inline-flex}
  .filter-drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 24px;border-bottom:1px solid var(--line);
  }
  /* Same iOS-blue-button override as .drawer-close — see the comment
     there for context. Without this the X icon appears in
     -apple-system-blue on iPhone Safari. */
  .filter-close{
    font-size:18px;width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    background:transparent;border:none;color:var(--ink);
    -webkit-appearance:none;appearance:none;cursor:pointer;padding:0;
  }
  .filter-close i{color:inherit}
  .filter-close:hover{color:var(--brand)}
  .shop-sidebar{
    position:fixed;top:0;left:0;bottom:0;
    width:320px;max-width:85vw;
    background:#fff;z-index:201;
    transform:translateX(-100%);
    transition:transform .3s ease;
    overflow-y:auto;padding:0 0 30px;
  }
  .shop-sidebar .widget{padding:20px 24px}
  .shop-sidebar.open{transform:translateX(0)}
  body.filters-open::after{
    content:'';position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;
    animation:fadeIn .25s ease;
  }
  body.filters-open{overflow:hidden}
}
@media (max-width:560px){
  .container,.container-wide{padding:0 18px}
  .section{padding:60px 0}
  /* Footer mbahet me dy kolona në mobile — Kontakti + Kompania krah për krah */
  .footer-grid{
    grid-template-columns:1fr 1fr;
    column-gap:24px;row-gap:34px;
  }
  .footer-brand{
    grid-column:1 / -1;text-align:center;
    /* Brand sits at the TOP on mobile (via `order:-1` in the 900px
       rule), so a border-top against the newsletter section above
       would look like an unintended seam. Only the bottom hairline
       remains, separating brand from the link columns below. */
    padding:14px 0 18px;border-top:none;border-bottom:1px solid #1d1d1d;
  }
  .footer h5{font-size:12px;margin-bottom:14px;letter-spacing:1.5px}
  .footer ul li{font-size:12px;margin-bottom:8px;line-height:1.5;word-break:break-word}
  .footer-bottom{flex-direction:column;gap:14px;text-align:center;padding:24px 0}
  .topbar{display:none}
  .product h4{font-size:12px;letter-spacing:.3px}
  .product .price{font-size:12px}
  .product .price del{font-size:11px}
  .product-swatches .swatch{width:11px;height:11px}
  .product-swatches .swatch--solo{width:12px;height:12px}
}

/* Mobile drawer — animacion i butë në hapje/mbyllje */
#mobile-drawer{
  position:fixed;inset:0;z-index:300;
  visibility:hidden;
  transition:visibility 0s linear .3s;
}
#mobile-drawer.open{
  visibility:visible;
  transition:visibility 0s linear 0s;
}
.drawer-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.5);
  opacity:0;transition:opacity .3s ease;
}
#mobile-drawer.open .drawer-backdrop{opacity:1}
.drawer-panel{
  position:absolute;top:0;left:0;bottom:0;
  width:300px;max-width:85vw;background:#fff;
  display:flex;flex-direction:column;
  overflow-y:auto;
  transform:translateX(-100%);
  transition:transform .3s ease;
}
#mobile-drawer.open .drawer-panel{transform:translateX(0)}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px;border-bottom:1px solid var(--line);
}
.drawer-close{
  width:36px;height:36px;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  /* iOS Safari renders <button> text in -apple-system-blue by default,
     even when the icon is a FontAwesome glyph (the <i> inherits color).
     Force black + reset the native chrome so the X stays brand-correct. */
  background:transparent;border:none;color:var(--ink);
  -webkit-appearance:none;appearance:none;cursor:pointer;padding:0;
}
.drawer-close i{color:inherit}
.drawer-close:hover{color:var(--brand)}
.drawer-search{
  position:relative;padding:18px 20px;border-bottom:1px solid var(--line);
}
.drawer-search input{
  width:100%;padding:12px 40px 12px 16px;
  border:1px solid var(--line);border-radius:30px;
  font-family:inherit;font-size:13px;outline:none;
}
.drawer-search i{
  position:absolute;right:32px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:12px;
}
.drawer-nav{
  display:flex;flex-direction:column;padding:20px;flex:1;
}
.drawer-nav > a,
.drawer-nav > .drawer-acc > .drawer-acc-head{
  padding:14px 0;font-size:15px;font-weight:500;letter-spacing:2px;
  text-transform:uppercase;border-bottom:1px solid var(--line);
  display:block;color:var(--ink);
}
.drawer-nav > a:last-child,
.drawer-nav > .drawer-acc:last-child > .drawer-acc-head{border-bottom:none}

/* ─── Smooth accordion (replaces <details>) ───────────────────────
   .drawer-acc          : wrapper around a head + body pair
   .drawer-acc-head     : the clickable button (level 1 uses default
                          font-size; level-2 head shrinks via the
                          --nested modifier below)
   .drawer-acc-body     : the collapsible panel — max-height is set
                          in JS to scrollHeight for transitions to
                          actually animate (max-height:auto can't
                          transition).
   .drawer-acc-inner    : pure content holder, no spacing — keeps
                          scrollHeight readings accurate. */
.drawer-acc-head{
  background:none;border:none;width:100%;text-align:left;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  font:inherit;
}
.drawer-acc-head::after{
  content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;
  font-size:11px;opacity:.6;transition:transform .25s ease;
  margin-left:10px;
}
.drawer-acc-head[aria-expanded="true"]::after{transform:rotate(180deg)}
/* grid-template-rows 0fr → 1fr is the modern way to smoothly animate
   between "collapsed" and "natural height" without measuring children
   in JS. Works because the inner row track expands from 0 to its
   natural height. Nested accordions cascade automatically since the
   outer track grows as the inner content's natural height grows —
   no ancestor sync needed. Supported in all current Chromium / Safari
   / Firefox (released 2023-2024); on older browsers the transition
   silently snaps instead of animating, which is acceptable. */
.drawer-acc{margin:0;padding:0}
.drawer-acc-body{
  display:grid;
  grid-template-rows:0fr;
  /* Hard belt: max-height clamp + min-height:0 + height:0 guarantee
     zero geometric contribution when closed. Three belts because
     Safari's grid-row interpolation and `min-height: auto` (the
     default for grid items) BOTH like to reserve 1-3px of space
     each, which made closed accordion items sit lower than plain
     links. Triple-belt = exactly 0px. */
  max-height:0;min-height:0;height:0;margin:0;padding:0;
  transition:grid-template-rows .3s ease, max-height .3s ease,
             height .3s ease,
             visibility 0s linear .3s, opacity .12s ease;
  overflow:hidden;
  visibility:hidden;opacity:0;
}
.drawer-acc-head[aria-expanded="true"] + .drawer-acc-body{
  grid-template-rows:1fr;
  max-height:1200px;height:auto;
  visibility:visible;opacity:1;
  transition:grid-template-rows .3s ease, max-height .35s ease,
             visibility 0s linear 0s, opacity .15s ease;
}
.drawer-acc-inner{
  display:flex;flex-direction:column;
  padding:0 0 14px 4px;
  overflow:hidden;min-height:0;
}
.drawer-acc-inner a{
  padding:10px 0;font-size:13px;font-weight:400;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted);border:none;display:block;
}
.drawer-acc-inner a:hover{color:var(--brand)}

/* Nested second-level accordion: smaller type, muted by default, no
   border-bottom on the head (would clutter the inner stack), and a
   subtle left border on its body to communicate hierarchy. */
.drawer-acc-head--nested{
  padding:10px 0 !important;
  font-size:13px !important;font-weight:500 !important;letter-spacing:1.5px !important;
  text-transform:uppercase;color:var(--muted) !important;
  border-bottom:none !important;
}
.drawer-acc-head--nested[aria-expanded="true"]{color:var(--ink) !important}
.drawer-acc-head--nested::after{font-size:10px;opacity:.45}
.drawer-acc--nested > .drawer-acc-body > .drawer-acc-inner{
  padding:0 0 8px 12px;border-left:1px solid var(--line);margin-left:2px;
}
.drawer-acc--nested > .drawer-acc-body > .drawer-acc-inner a{
  padding:8px 0;font-size:12px;letter-spacing:1.2px;
}
.drawer-cat-all{font-weight:600;color:var(--ink) !important}
.drawer-cat-leaf{
  padding:10px 0;font-size:13px;font-weight:400;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted);
}
.drawer-foot{
  padding:20px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);
}
.drawer-foot p{margin-bottom:6px}

/* Cart table — make scrollable on small screens */
@media (max-width:760px){
  .cart-table{display:block;overflow-x:auto;white-space:nowrap}
  .cart-product{min-width:200px}
  .cart-coupon{flex-direction:column;align-items:stretch}
  .cart-coupon-form{flex-direction:column}
  .cart-coupon-form input{width:100%}
  .cart-totals{max-width:none}
}

/* Hero text safety on very small screens */
@media (max-width:420px){
  .hero-text h1{font-size:28px;letter-spacing:1px}
  .hero-slide .hero-image{height:220px}
  .page-banner h1{font-size:24px;letter-spacing:3px}
  .countdown div{width:64px}
  .countdown strong{font-size:18px}
}