/* ==========================================================================
   IGL Coatings Lebanon — storefront v2
   Mobile-first rebuild with scroll motion. Same brand rules as v1.

   Colour   IGL Green #00D000 + Solid Black #000000 only.
            #00D000 is 2.10:1 on white so it never carries text on a light
            surface: accent on black (9.45:1), or a fill with BLACK text
            (10.02:1). #006E00 is the same hue darkened for green text on
            white (6.50:1).
   Type     Montserrat. ExtraBold headlines, Bold subheads, Regular body.
   Motion   transform + opacity only, IntersectionObserver driven, and fully
            disabled under prefers-reduced-motion. Content is visible without
            JavaScript — the reveal styles only apply once .js is set.
   Layout   Written mobile-first: the base rules ARE the phone layout, and
            min-width queries scale up. Most visitors are on a phone.
   ========================================================================== */

:root {
  --brand:        #00D000;
  --brand-deep:   #006E00;
  --brand-deep-h: #005800;

  --ink:      #000000;
  --ink-2:    #0C0C0C;
  --ink-3:    #161616;
  --paper:    #FFFFFF;
  --paper-2:  #F5F7F8;
  --paper-3:  #E9EDEF;
  --line:     #DFE4E7;
  --line-dark:#262626;

  --text:        #111111;
  --text-muted:  #5F6B76;
  --on-dark:     #F3F5F6;
  --on-dark-mut: #A8AEB4;

  --danger: #B3261E;
  --warn:   #8A5300;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.05);
  --shadow-2: 0 6px 18px rgba(0,0,0,.09);
  --shadow-3: 0 18px 44px rgba(0,0,0,.16);

  --z-header: 40; --z-bar: 45; --z-overlay: 90; --z-drawer: 100; --z-lightbox: 110; --z-toast: 120;

  --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; --dur-reveal: 620ms;
  --ease:     cubic-bezier(.2,.7,.3,1);
  --ease-out: cubic-bezier(.16,.84,.32,1);

  --wrap: 1180px;
  --header-h: 64px;
  --bar-h: 68px;            /* mobile bottom action bar */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Montserrat, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  /* room for the fixed bottom bar on phones */
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}
@media (min-width: 860px) { body { padding-bottom: 0; } }

img { max-width: 100%; display: block; }
a { color: var(--brand-deep); }

h1, h2 { font-weight: 800; }
h3, h4 { font-weight: 700; }
h1, h2, h3, h4 {
  margin: 0 0 var(--s3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 1.5rem + 3.4vw, 4rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 2vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 1.02rem + .5vw, 1.35rem); }
p  { margin: 0 0 var(--s4); }

.caption, .field__hint, .trust__note { font-style: italic; font-weight: 500; }
.wrap, .card, td { overflow-wrap: anywhere; }

/* ---------- a11y ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--paper); color: var(--text); padding: var(--s3) var(--s4);
  border-radius: var(--r-sm); box-shadow: var(--shadow-3); font-weight: 700;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s4); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.on-light :focus-visible { outline-color: var(--brand-deep); }

/* ==========================================================================
   SCROLL MOTION
   Only active once JS adds .js to <html>, so a failed script leaves every
   section visible rather than blank. One IntersectionObserver drives it all.
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="scale"] { transform: translate3d(0,18px,0) scale(.96); }
.js [data-reveal="left"]  { transform: translate3d(-26px,0,0); }
.js [data-reveal="right"] { transform: translate3d(26px,0,0); }

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* children arrive one after another; --i is set in JS */
.js [data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.js [data-stagger].is-in > * { opacity: 1; transform: none; }

/* slow drift on the hero motif — decorative, so it is dropped entirely
   under reduced motion */
.js .hero__motif { will-change: transform; }

/* count-up numbers hold their box so nothing reflows while ticking */
.stat__n { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s4); }
@media (min-width: 640px)  { .wrap { padding-inline: var(--s5); } }
@media (min-width: 1024px) { .wrap { padding-inline: var(--s6); } }

.section { padding-block: clamp(52px, 9vw, 104px); }
.section--tight { padding-block: clamp(32px, 5vw, 56px); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark h2 { color: #fff; }
.section--paper { background: var(--paper-2); }

.section-head { max-width: 60ch; margin-bottom: var(--s6); }
.section-head p { color: var(--text-muted); font-size: 1.02rem; margin: 0; }
.section--dark .section-head p { color: var(--on-dark-mut); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-deep); margin-bottom: var(--s3);
}
.section--dark .eyebrow, .hero .eyebrow { color: var(--brand); }
.eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: var(--s3) var(--s5);
  font: inherit; font-weight: 800; line-height: 1.2;
  border: 2px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none; text-align: center;
  touch-action: manipulation;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }

.btn--primary { background: var(--brand); color: var(--ink); }
.btn--primary:hover:not(:disabled) { background: #00B800; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover:not(:disabled) { border-color: var(--text); background: var(--paper-2); }
.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn--on-dark:hover:not(:disabled) { border-color: #fff; background: rgba(255,255,255,.1); }
.btn--wa { background: #0F7C42; color: #fff; }   /* WhatsApp's colour, not IGL's */
.btn--wa:hover:not(:disabled) { background: #0B6635; }
.btn--block { width: 100%; }
.btn--sm { min-height: 46px; padding: var(--s2) var(--s4); font-size: .92rem; }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(0,0,0,.95);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line-dark);
  color: var(--on-dark);
  transition: box-shadow var(--dur) var(--ease);
}
.header[data-scrolled="true"] { box-shadow: 0 8px 28px rgba(0,0,0,.5); }
.header__inner { display: flex; align-items: center; gap: var(--s3); min-height: var(--header-h); }
@media (min-width: 640px) { :root { --header-h: 84px; } }

/* official primary lockup: min 120px wide, clear space = half the "G" height
   (92 of the artwork's 800 units) on every side */
.logo {
  --logo-w: 120px;
  --logo-clear: 15px;
  display: inline-flex; align-items: center; gap: var(--logo-clear);
  text-decoration: none; color: #fff; flex: 0 0 auto; padding-block: var(--s2);
}
@media (min-width: 640px) { .logo { --logo-w: 132px; --logo-clear: 17px; } }
.logo__img { width: var(--logo-w); height: auto; flex: 0 0 auto; }
.logo__country {
  position: relative; padding-left: var(--logo-clear);
  font-size: .58rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--on-dark-mut); white-space: nowrap;
}
.logo__country::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 16px; transform: translateY(-50%); background: var(--line-dark);
}
.logo--footer { --logo-w: 138px; --logo-clear: 16px; margin-bottom: var(--s5); }

.nav { margin-left: auto; display: none; }
@media (min-width: 860px) { .nav { display: flex; gap: var(--s1); align-items: center; } }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4);
  color: var(--on-dark); text-decoration: none; font-weight: 700; font-size: .94rem;
  border-radius: var(--r-sm); position: relative;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--s4); right: var(--s4); bottom: 9px;
  height: 2px; background: var(--brand); border-radius: 2px;
}

.header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
@media (min-width: 860px) { .header__actions { margin-left: var(--s4); } }

.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2); min-width: 48px; min-height: 48px; padding: 0 var(--s3);
  background: transparent; border: 1px solid var(--line-dark); border-radius: var(--r-sm);
  color: var(--on-dark); cursor: pointer; font: inherit; font-weight: 800;
  touch-action: manipulation;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-btn:hover { background: rgba(255,255,255,.09); border-color: #4A4A4A; }
.icon-btn svg { width: 22px; height: 22px; }

.cart-count {
  min-width: 21px; height: 21px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--ink);
  font-size: .72rem; font-weight: 800; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.cart-count[data-empty="true"] { display: none; }

/* the cart button pulses once when something lands in it */
@keyframes cartPop { 0%,100% { transform: scale(1); } 40% { transform: scale(1.18); } }
.cart-count[data-bump="true"] { animation: cartPop 420ms var(--ease); }

.nav-toggle { display: inline-flex; }
@media (min-width: 860px) { .nav-toggle { display: none; } }
.mobile-nav { display: none; border-top: 1px solid var(--line-dark); padding: var(--s2) 0 var(--s4); }
.mobile-nav[data-open="true"] { display: block; }
@media (min-width: 860px) { .mobile-nav { display: none !important; } }
.mobile-nav a {
  display: flex; align-items: center; min-height: 56px; padding: 0 var(--s2);
  color: var(--on-dark); text-decoration: none; font-weight: 700; font-size: 1.05rem;
  border-bottom: 1px solid var(--line-dark);
}
.mobile-nav a[aria-current="page"] { color: var(--brand); }

/* ==========================================================================
   MOBILE BOTTOM ACTION BAR
   Phones hold the cart and the shop link in the thumb zone, so the two things
   that drive a sale are always one tap away.
   ========================================================================== */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  display: flex; gap: var(--s2); align-items: center;
  padding: var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom));
  background: rgba(0,0,0,.96);
  backdrop-filter: saturate(150%) blur(12px);
  border-top: 1px solid var(--line-dark);
  transform: translateY(0);
  transition: transform var(--dur-slow) var(--ease);
}
.actionbar[data-hidden="true"] { transform: translateY(115%); }
/* Store page only: every card carries its own Add, so the primary button has
   nothing to say until there is an order. Drop just the button -- the bar still
   has to carry WhatsApp and the cart, which are the thumb-zone reach now that
   the floating disc is gone. Deliberately a different attribute from
   data-hidden, which motion.js drives on scroll -- the two must not fight. */
.actionbar[data-empty="true"] { justify-content: flex-end; }
.actionbar[data-empty="true"] .btn { display: none; }
.actionbar .btn { flex: 1; min-height: 52px; }
.actionbar__cart, .actionbar__wa {
  flex: 0 0 auto; min-width: 56px; min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: transparent; color: #fff;
  border: 1px solid var(--line-dark); border-radius: var(--r-sm);
  cursor: pointer; font: inherit; font-weight: 800; touch-action: manipulation;
}
.actionbar__cart svg, .actionbar__wa svg { width: 22px; height: 22px; }
.actionbar__wa { background: #0F7C42; border-color: #0F7C42; }   /* WhatsApp green, not IGL */
@media (min-width: 860px) { .actionbar { display: none; } }

/* ---------- hero ---------- */
.hero {
  position: relative; background: var(--ink); color: var(--on-dark);
  padding-block: clamp(40px, 9vw, 104px);
  overflow: hidden; isolation: isolate;
}
/* motif = repetition of the IGL mark, per the guideline (not a hex lattice) */
.hero__motif {
  content: ""; position: absolute; inset: -12% -5%; z-index: -2;
  background-image: url("../img/brand/igl-mark-white.svg");
  background-repeat: repeat;
  background-size: 54px 59px;
  opacity: .04;
}
.hero::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    radial-gradient(760px 420px at 80% 4%, rgba(0,208,0,.16), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.9) 92%);
}
.hero__grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.02fr .98fr; gap: var(--s8); } }

.hero h1 { color: #fff; margin-bottom: var(--s4); }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__lead { font-size: clamp(1rem, .96rem + .35vw, 1.18rem); color: var(--on-dark-mut); max-width: 52ch; }
.hero__cta { display: grid; gap: var(--s3); margin-top: var(--s5); }
@media (min-width: 460px) { .hero__cta { display: flex; flex-wrap: wrap; } }

.hero__badges {
  display: grid; gap: var(--s3);
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--line-dark);
}
@media (min-width: 560px) { .hero__badges { grid-template-columns: repeat(3, auto); gap: var(--s5); justify-content: start; } }
.hero__badge { display: flex; align-items: center; gap: var(--s2); font-size: .88rem; font-weight: 700; color: var(--on-dark-mut); margin: 0; }
.hero__badge svg { width: 20px; height: 20px; color: var(--brand); flex: 0 0 auto; }

/* The packshot is a cut-out on transparency, so it sits straight on the hero
   black - no card. That also lets the droplet motif show through behind it.
   aspect-ratio matches the asset (900x563) so the slot is reserved and the
   hero does not shift as the image decodes. */
.hero__art {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  order: -1;                 /* on phones the product leads */
}
@media (min-width: 940px) { .hero__art { order: 0; } }
.hero__art img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- category tiles ---------- */
.tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .tiles { gap: var(--s4); grid-template-columns: repeat(4, 1fr); } }
/* The packshots are products on white, so overlaying text on top of them meant
   reserving ~40% of the tile for a scrim and squeezing the product into what was
   left. Instead the product gets the full width on a light plate and the label
   sits underneath — same anatomy as the product cards, and the bottles read
   properly at a glance. */
.tile {
  position: relative; display: flex; flex-direction: column;
  padding: 0;
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none; overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.tile:active { transform: scale(.98); }
@media (hover: hover) {
  .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: #C3CBD0; }
}

.tile img {
  position: static;
  width: 100%; aspect-ratio: 1 / 1; height: auto;
  object-fit: contain;
  padding: var(--s3);
  background: var(--paper-2);
  opacity: 1; mix-blend-mode: normal;
  transition: transform var(--dur-slow) var(--ease);
}
@media (min-width: 760px) { .tile img { padding: var(--s4); } }
@media (hover: hover) { .tile:hover img { transform: scale(1.04); } }

/* the old scrim is no longer needed */
.tile::after { content: none; }

.tile h3 {
  margin: 0; padding: var(--s3) var(--s3) 2px;
  font-size: 1rem; line-height: 1.15; color: var(--text);
}
/* 2px under an 18px heading left the count line visually touching the title;
   the type is bigger here than on a phone, so it needs proportionate leading */
@media (min-width: 760px) { .tile h3 { font-size: 1.15rem; padding: var(--s4) var(--s4) var(--s2); } }
.tile p {
  margin: 0 0 auto; padding: 0 var(--s3) var(--s3);
  font-size: .78rem; color: var(--text-muted);
}
@media (min-width: 760px) { .tile p { padding: 0 var(--s4) var(--s4); font-size: .82rem; } }
/* #00D000 is only 2.10:1 on white, so the count uses the darkened brand green */
.tile__count { color: var(--brand-deep); font-weight: 800; }

/* ---------- product cards: 2-up on phones ---------- */
.grid { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .grid { gap: var(--s4); grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grid { gap: var(--s5); grid-template-columns: repeat(4, 1fr); } }
.grid--wide { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .grid--wide { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grid--wide { grid-template-columns: repeat(4, 1fr); } }

.card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
@media (hover: hover) { .card:hover { border-color: #B9C2C7; box-shadow: var(--shadow-2); } }
.card__media {
  position: relative; aspect-ratio: 1 / 1; background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s3); overflow: hidden;
}
/* max-width/max-height rather than width/height:100%: a centred grid/flex item
   is not stretched, so height:100% did not resolve and tall bottles (e.g. the
   357x900 Hydrocoat) overflowed the square and were cropped at the shoulder.
   The container's aspect-ratio already reserves the space, so no layout shift. */
.card__media img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  transition: transform var(--dur-slow) var(--ease);
}
@media (hover: hover) { .card:hover .card__media img { transform: scale(1.05); } }
.card__line {
  position: absolute; top: var(--s2); left: var(--s2);
  background: var(--ink); color: #fff;
  font-size: .56rem; font-weight: 800; letter-spacing: .05em; 
  padding: 4px 7px; border-radius: var(--r-sm);
}
.card__body { display: flex; flex-direction: column; flex: 1; padding: var(--s3); gap: var(--s2); }
@media (min-width: 700px) { .card__body { padding: var(--s4); gap: var(--s3); } }
.card__name { font-size: .92rem; font-weight: 800; margin: 0; line-height: 1.25; }
@media (min-width: 700px) { .card__name { font-size: 1rem; } }
.card__desc {
  margin: 0; font-size: .78rem; color: var(--text-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 460px) { .card__desc { display: none; } }   /* the phone wants price + size, not prose */

.sizes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.sizes legend { font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; min-width: 50px; padding: 0 var(--s2);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-size: .8rem; font-weight: 800; white-space: nowrap;
  background: var(--paper); color: var(--text);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--brand-deep); outline-offset: 2px; }
.chip input:disabled + span { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.card__foot { margin-top: auto; display: flex; align-items: center; gap: var(--s2); padding-top: var(--s1); flex-wrap: wrap; }
.price { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 0; }
@media (min-width: 700px) { .price { font-size: 1.28rem; } }
.price small { font-size: .66rem; font-weight: 800; color: var(--text-muted); display: block; margin-top: -2px; }
.card__foot .btn { margin-left: auto; }
@media (max-width: 420px) {
  /* grid tiles are 2-up on a phone (~160px each): the price and the button
     cannot sit side by side, so the button takes its own row */
  .card__foot .btn { width: 100%; margin-left: 0; }
  /* ...but the product page is a single full-width card, where a stretched
     button reads as the end of the page and buries Pairs with / Benefits
     beneath it. There is ~230px free beside the price, so keep Add inline
     exactly as it is above 420px. */
  .card--detail .card__foot .btn { width: auto; margin-left: auto; }
}

.stock-note { font-size: .72rem; font-weight: 700; display: flex; align-items: center; gap: 5px; margin: 0; }
.stock-note svg { width: 14px; height: 14px; flex: 0 0 auto; }
.stock-note.is-in  { color: var(--brand-deep); }
.stock-note.is-low { color: var(--warn); }
.stock-note.is-out { color: var(--danger); }
.cart-item__meta .is-low { color: var(--warn); font-weight: 700; }

/* ---------- features / steps ---------- */
.features { display: grid; gap: var(--s6); }
@media (min-width: 700px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .features { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }
.feature__icon {
  width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: var(--s3);
  border: 1.5px solid rgba(0,208,0,.45); border-radius: var(--r-sm); color: var(--brand);
}
.section:not(.section--dark) .feature__icon { border-color: rgba(0,110,0,.3); color: var(--brand-deep); }
.feature__icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.05rem; }
.feature p { margin: 0; color: var(--text-muted); font-size: .92rem; }
.section--dark .feature p { color: var(--on-dark-mut); }

.steps { counter-reset: step; display: grid; gap: var(--s5); }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
/* The badge is absolutely positioned, so the step has to reserve room for it
   by hand. Both the offset and the badge derive from --step-size: hard-coding
   them separately is how the badge ended up overlapping the heading by 6px on
   desktop (38px badge, only 32px reserved). */
.step { --step-size: 38px; position: relative; padding-left: calc(var(--step-size) + var(--s3) + 2px); }
@media (min-width: 1024px) { .step { padding-left: 0; padding-top: calc(var(--step-size) + var(--s3)); } }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: var(--step-size); height: var(--step-size); display: grid; place-items: center;
  background: var(--brand); color: var(--ink); border-radius: var(--r-pill);
  font-weight: 800; font-size: 1rem;
}
.step h3 { font-size: 1.02rem; }
.step p { margin: 0; color: var(--text-muted); font-size: .9rem; }

/* ---------- store toolbar ---------- */
.store-more { display: block; margin: var(--s5) auto 0; min-width: 220px; }

.toolbar { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.toolbar__row { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .toolbar__row { grid-template-columns: 1fr auto; align-items: end; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.field input, .field select, .field textarea {
  font: inherit; min-height: 52px; padding: var(--s3) var(--s4);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--text); width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand-deep); box-shadow: 0 0 0 3px rgba(0,110,0,.16); outline: none;
}
.field__hint { font-size: .78rem; color: var(--text-muted); }
.field__err { font-size: .82rem; font-weight: 700; color: var(--danger); display: none; align-items: center; gap: 5px; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: var(--danger); }
.field[data-invalid="true"] .field__err { display: flex; }

.search { position: relative; }
.search input { padding-left: 46px; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-muted); pointer-events: none; }

/* filters scroll sideways on a phone rather than wrapping to four rows.
   This is a filter strip, not page content, so a horizontal swipe here does
   not fight the vertical scroll of the catalogue. */
/* These wrap at every width rather than scrolling sideways on a phone. The
   scroller fitted three and a half chips on a 390px screen and gave no hint
   there were seven, so Ecoclean, Kits and Accessories were effectively
   invisible -- on a page that is otherwise a very long scroll. Three rows of
   pills costs ~100px once; a hidden category costs the sale. */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  padding-bottom: var(--s2);
}
.filter {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 46px; padding: 0 var(--s4); flex: 0 0 auto;
  scroll-snap-align: start;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-pill);
  font: inherit; font-size: .86rem; font-weight: 800; color: var(--text);
  cursor: pointer; white-space: nowrap; touch-action: manipulation;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.results-line { font-size: .88rem; color: var(--text-muted); font-weight: 700; }

.empty { text-align: center; padding: var(--s8) var(--s4); }
.empty svg { width: 48px; height: 48px; color: var(--line); margin-bottom: var(--s4); }
.empty p { color: var(--text-muted); margin-bottom: var(--s5); }
/* the order-sent panel reuses .empty, but it is a confirmation, not an absence */
.empty--sent svg { color: #0F7C42; }

/* ---------- cart drawer: full screen on phones ---------- */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(0,0,0,.66);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.overlay[data-open="true"] { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  display: flex; flex-direction: column;
  background: var(--paper);
  transform: translateY(100%); visibility: hidden;
  transition: transform var(--dur-slow) var(--ease), visibility var(--dur-slow) var(--ease);
}
@media (min-width: 640px) {
  .drawer {
    inset: 0 0 0 auto; width: min(440px, 100vw);
    transform: translateX(100%);
    box-shadow: var(--shadow-3);
  }
}
.drawer[data-open="true"] { transform: none; visibility: visible; }

.drawer__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4); border-bottom: 1px solid var(--line); flex: 0 0 auto;
  padding-top: calc(var(--s4) + env(safe-area-inset-top));
}
.drawer__head h2 { margin: 0; font-size: 1.12rem; }
.drawer__close {
  margin-left: auto; width: 48px; height: 48px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; color: var(--text); touch-action: manipulation;
}
.drawer__close svg { width: 20px; height: 20px; }
.drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--s4); }
.drawer__foot {
  flex: 0 0 auto; border-top: 1px solid var(--line);
  padding: var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  background: var(--paper); box-shadow: 0 -6px 16px rgba(0,0,0,.06);
}
[data-cart-foot] { padding-top: var(--s5); }

.cart-item { display: grid; grid-template-columns: 64px 1fr; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--paper-3); }
.cart-item:first-child { padding-top: 0; }
.cart-item__img { width: 64px; height: 64px; background: var(--paper-2); border-radius: var(--r-sm); object-fit: contain; padding: 5px; }
/* the photo is the big tap target back to the product; 64px square like the
   grid column it sits in, so wrapping it in a link changes no layout */
.cart-item__imglink { display: block; width: 64px; height: 64px; border-radius: var(--r-sm); }
.cart-item__name { font-weight: 800; font-size: .92rem; line-height: 1.3; margin: 0 0 2px; }
.cart-item__link { color: inherit; text-decoration: none; }
.cart-item__link:hover { text-decoration: underline; }
.cart-item__meta { font-size: .76rem; color: var(--text-muted); margin: 0 0 var(--s3); font-variant-numeric: tabular-nums; }
.cart-item__row { display: flex; align-items: center; gap: var(--s3); }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.qty button {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--paper); border: 0; cursor: pointer; color: var(--text);
  font-size: 1.15rem; font-weight: 800; line-height: 1; touch-action: manipulation;
}
.qty button:disabled { opacity: .35; cursor: not-allowed; }
.qty output { min-width: 40px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; font-size: .95rem; }

.cart-item__price { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.link-btn {
  background: none; border: 0; padding: 4px; font: inherit; font-size: .8rem; font-weight: 800;
  color: var(--danger); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: 44px;
}

.totals { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.totals__row { display: flex; justify-content: space-between; font-size: .9rem; color: var(--text-muted); }
.totals__row--grand { font-size: 1.18rem; font-weight: 800; color: var(--text); padding-top: var(--s3); border-top: 1px solid var(--line); }
.totals__row span:last-child { font-variant-numeric: tabular-nums; }

.cod-note {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--paper-2); border-left: 3px solid var(--brand-deep);
  padding: var(--s3); border-radius: var(--r-sm);
  font-size: .84rem; color: var(--text-muted); margin-bottom: var(--s4);
}
.cod-note svg { width: 18px; height: 18px; color: var(--brand-deep); flex: 0 0 auto; margin-top: 2px; }

.checkout-form { display: grid; gap: var(--s4); }
.error-summary { display: none; border: 2px solid var(--danger); border-radius: var(--r-sm); padding: var(--s3); background: #FDF2F1; }
.error-summary[data-show="true"] { display: block; }
.error-summary h3 { font-size: .92rem; margin: 0 0 var(--s2); color: var(--danger); }
.error-summary ul { margin: 0; padding-left: var(--s5); font-size: .86rem; }
.error-summary a { color: var(--danger); font-weight: 700; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; z-index: var(--z-toast);
  bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 12px);
  transform: translate(-50%, 160%);
  display: flex; align-items: center; gap: var(--s3);
  max-width: min(420px, calc(100vw - 24px));
  background: var(--ink); color: #fff;
  padding: var(--s3) var(--s4); border-radius: var(--r-pill);
  box-shadow: var(--shadow-3); font-weight: 700; font-size: .88rem;
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (min-width: 860px) { .toast { bottom: 24px; } }
.toast[data-show="true"] { transform: translate(-50%, 0); }
.toast svg { width: 20px; height: 20px; color: var(--brand); flex: 0 0 auto; }

/* ---------- about / contact ---------- */
.split { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.08fr .92fr; gap: var(--s8); } }
.prose { max-width: 66ch; }
.prose p { color: var(--text-muted); font-size: 1rem; }
.prose h3 { margin-top: var(--s6); }

.stat-row { display: grid; gap: var(--s5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat__n { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.8rem); font-weight: 800; color: var(--brand); line-height: 1; letter-spacing: -.03em; }
.stat__l { font-size: .82rem; color: var(--on-dark-mut); margin-top: var(--s2); }

.contact-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); }
.contact-list { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s4); }
.contact-list li { display: flex; gap: var(--s3); align-items: flex-start; }
.contact-list svg { width: 22px; height: 22px; color: var(--brand-deep); flex: 0 0 auto; margin-top: 3px; }
.contact-list .ct-dt { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
.contact-list .ct-dd { margin: 0; font-weight: 700; }
.contact-list a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; margin-block: -10px; }
.contact-list a:hover { color: var(--brand-deep); text-decoration: underline; }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) 0; cursor: pointer; font-weight: 800; font-size: .98rem;
  list-style: none; min-height: 60px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-left: auto; width: 10px; height: 10px; flex: 0 0 auto;
  border-right: 2.5px solid var(--text-muted); border-bottom: 2.5px solid var(--text-muted);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq p { color: var(--text-muted); padding-bottom: var(--s4); margin: 0; max-width: 68ch; font-size: .94rem; }

/* ---------- accreditations ---------- */
.trust { background: var(--paper); border-top: 1px solid var(--line); padding-block: var(--s6); }
.trust__head { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
@media (min-width: 640px) { .trust__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); } }
.trust__head h2 { margin: 0; font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.trust__note { margin: 0; font-size: .8rem; color: var(--text-muted); }
.trust__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); }
.trust__row img {
  height: 40px; width: auto; flex: 0 0 auto;
  filter: grayscale(1); opacity: .72;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
@media (min-width: 640px) { .trust__row img { height: 50px; gap: var(--s5) var(--s6); } }
@media (hover: hover) { .trust__row img:hover { filter: none; opacity: 1; } }

.creds { display: grid; gap: var(--s3); grid-template-columns: repeat(3, 1fr); }
@media (min-width: 640px) { .creds { gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } }
.cred {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s2); padding: var(--s3) var(--s2);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
}
.cred img { height: 44px; width: auto; }
@media (min-width: 640px) { .cred img { height: 58px; } }
.cred span { font-size: .68rem; font-weight: 800; line-height: 1.3; color: var(--text-muted); text-wrap: balance; }
@media (min-width: 640px) { .cred span { font-size: .76rem; } }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--on-dark-mut); padding-block: var(--s7) var(--s5); }
.footer__grid { display: grid; gap: var(--s6); }
@media (min-width: 560px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer h3 { color: #fff; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s3); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.footer a { color: var(--on-dark-mut); text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; }
.footer a:hover { color: #fff; text-decoration: underline; }
/* Contact rows scan faster as glyph + label than as bare text. .footer a is
   already inline-flex, so this only adds the gap and sizes the glyph. Green on
   black is the guideline's own pairing (10.02:1), and the glyph carries no
   meaning the label does not, so it stays decorative. */
.footer a[data-icon] { gap: var(--s2); }
.footer a[data-icon] svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--brand); }
.footer__tagline { margin: 0 0 var(--s3); font-size: .88rem; font-weight: 700; color: var(--brand); }
.footer__disclaimer { max-width: 58ch; font-size: .78rem; line-height: 1.55; }
.footer__bottom {
  margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line-dark);
  display: grid; gap: var(--s2); font-size: .78rem;
}
@media (min-width: 760px) { .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; } }

/* ---------- floating whatsapp: lifted clear of the action bar ---------- */
.wa-fab {
  position: fixed; right: 14px; z-index: 60;
  bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 14px);
  width: 54px; height: 54px; display: grid; place-items: center;
  background: #0F7C42; color: #fff; border-radius: 50%;
  box-shadow: var(--shadow-3); text-decoration: none;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
@media (min-width: 860px) { .wa-fab { bottom: 20px; right: 20px; width: 56px; height: 56px; } }
.wa-fab:hover { background: #0B6635; }
.wa-fab:active { transform: scale(.94); }
.wa-fab svg { width: 28px; height: 28px; }
/* The floating disc swept the right edge of every page as it scrolled, clipping
   a word or two of whatever passed behind it. Retire it on phones -- but only
   where the action bar exists to carry WhatsApp instead. 404.html has no bar,
   so it keeps the disc. wireActionbar() sets .has-actionbar, so if scripting
   fails the disc simply stays, which is the old behaviour. Above 860px the bar
   is gone and the disc clears the text column anyway. */
@media (max-width: 859px) { body.has-actionbar .wa-fab { display: none; } }

@media print {
  .header, .footer, .wa-fab, .drawer, .overlay, .toolbar, .actionbar { display: none !important; }
}

/* ==========================================================================
   Product page
   ========================================================================== */

.pdp { padding-block: var(--s5) var(--s7); }

/* breadcrumb */
.crumbs { margin-bottom: var(--s4); }
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1);
  font-size: .78rem; letter-spacing: .02em;
}
.crumbs li + li::before {
  content: "/"; margin-right: var(--s1); color: var(--muted); opacity: .6;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); font-weight: 600; }

/* mobile-first: buy box, then thumbnails, then the copy */
.pdp__top { display: grid; gap: var(--s4); }

/* the buy box reuses .card, so undo the grid-tile framing */
.card--detail { border: 0; background: transparent; overflow: visible; }
@media (hover: hover) { .card--detail:hover { border-color: transparent; box-shadow: none; } }
.card--detail .card__media {
  border: 1px solid var(--line); border-radius: var(--r-md);
  aspect-ratio: 1 / 1; padding: var(--s4);
}
.card--detail .card__body { padding-inline: 0; }
.card--detail .card__name { font-size: 1.5rem; line-height: 1.15; }
.card--detail .card__desc { font-size: .95rem; }
.card--detail .price { font-size: 1.5rem; }

/* thumbnail strip — scrolls sideways on a phone, wraps on a wide screen */
.pdp__thumbs {
  display: flex; gap: var(--s2);
  overflow-x: auto; padding-bottom: var(--s1);
  scrollbar-width: thin;
}
.thumb {
  flex: 0 0 auto; width: 66px; height: 66px; padding: 4px;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb:hover { border-color: #B9C2C7; }
.thumb[aria-current] { border-color: var(--brand-deep); border-width: 2px; padding: 3px; }
.thumb:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* long-form copy */
.pdp__info { margin-top: var(--s6); max-width: 68ch; }
.pdp__lede {
  font-size: 1.06rem; line-height: 1.65; color: var(--text);
  margin: 0 0 var(--s4);
}
.pdp__pairs {
  margin: 0 0 var(--s5); padding: var(--s3) var(--s4);
  background: var(--paper-2); border-left: 3px solid var(--brand-deep);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .92rem; color: var(--muted);
}
.pdp__block { margin-bottom: var(--s5); }
.pdp__block h2 {
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s2); font-weight: 700;
}
.pdp__block ul { margin: 0; padding-left: 1.15rem; }
.pdp__block li { margin-bottom: var(--s1); line-height: 1.55; }

/* compatibility flags read at a glance: tick = safe, triangle = not safe */
.pdp__flags { list-style: none; padding: 0; margin: 0 0 var(--s3); }
.pdp__flags li {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s1); line-height: 1.4;
}
.pdp__flags svg { width: 18px; height: 18px; flex: 0 0 auto; }
.pdp__flags .is-yes { color: var(--ok, #006E00); }
.pdp__flags .is-no  { color: var(--warn, #A8410A); }
.pdp__surface { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.55; }
.pdp__surface strong { color: var(--text); }

.pdp__source {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--muted);
}
.pdp__back { margin-top: var(--s6); }

/* wide screens: image + thumbnails on the left, everything you need to buy
   on the right. One grid on the card itself, so the phone order (image,
   thumbnails, details) survives unchanged when the columns collapse. */
@media (min-width: 860px) {
  .card--detail {
    display: grid;
    /* cap the image column: a 1fr square grows to ~500px on a wide screen,
       which dwarfs the few lines of buy detail beside it */
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--s6);
    align-items: start;
  }
  .card--detail .card__media  { grid-column: 1; grid-row: 1; }
  .card--detail .pdp__thumbs  { grid-column: 1; grid-row: 2; margin-top: var(--s3);
                                flex-wrap: wrap; overflow-x: visible; }
  .card--detail .card__body   { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 1024px) {
  .card--detail .card__name { font-size: 1.75rem; }
}

/* the product name is the link into the product page; on the page itself the
   heading is rendered by the same template, so neutralise the link styling */
.card__name a { color: inherit; text-decoration: none; }
.card__name a:hover { text-decoration: underline; text-underline-offset: 2px; }
.card__name a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.card--detail .card__name a { pointer-events: none; text-decoration: none; }

/* summary sits inside the buy column, between the tagline and the size chips */
.card--detail .pdp__lede { margin: var(--s3) 0 var(--s4); font-size: 1rem; }

/* Grid and flex items default to min-width:auto, so the thumbnail row (six
   66px buttons that must not wrap) set a min-content floor of ~436px and
   pushed the whole product page sideways on a phone. min-width:0 lets the
   column shrink and hands the overflow back to the strip's own scroller. */
.pdp__top,
.pdp__buy,
.card--detail,
.card--detail .card__body,
.pdp__thumbs { min-width: 0; }

.pdp__empty {
  margin: 0; padding: var(--s4);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--muted); line-height: 1.6;
}
.pdp__empty a { color: var(--brand-deep); font-weight: 600; }

/* Range tiles: the three line-up shots are pre-composed onto --paper-2, the
   same ground the tile panel uses, so image and padding blend seamlessly and
   all four tiles share one treatment. */

/* ---------- product gallery: swipe, arrows, counter ---------- */

/* pan-y keeps vertical page scrolling native while horizontal gestures reach
   the swipe handler; without it the browser eats the drag */
.card--detail .card__media {
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  cursor: grab;
}
.card--detail .card__media:active { cursor: grabbing; }
.card--detail .card__media:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.card--detail .card__media img { -webkit-user-drag: none; }

.gallery__count {
  position: absolute; right: var(--s2); bottom: var(--s2); margin: 0;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .66); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  pointer-events: none;
}

.gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94); color: var(--text);
  cursor: pointer; opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gallery__nav::before {
  content: ''; width: 10px; height: 10px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.gallery__nav--prev { left: var(--s2); }
.gallery__nav--prev::before { transform: rotate(45deg); margin-left: 3px; }
.gallery__nav--next { right: var(--s2); }
.gallery__nav--next::before { transform: rotate(-135deg); margin-right: 3px; }
.card__media:hover .gallery__nav,
.gallery__nav:focus-visible { opacity: 1; }
.gallery__nav:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Touch devices never hover, so the arrows would sit invisible on top of the
   photo. Swipe is the control there, with the thumbnails as the fallback. */
@media (hover: none) { .gallery__nav { display: none; } }

/* the whole photo is a link into the product page (grid cards only — the
   product page unwraps it so the gallery keeps its swipe) */
.card__imglink {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}

/* ---------- full-screen image viewer ---------- */

.card--detail .card__media.is-zoomable { cursor: zoom-in; }
.card--detail .card__media.is-zoomable:active { cursor: grabbing; }

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  display: flex; flex-direction: column;
  /* near-solid: at .94 the bright green action bar and the WhatsApp button
     read straight through the backdrop even though they sit below it */
  background: rgba(8, 10, 11, .985);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.lightbox[data-open="true"] { opacity: 1; visibility: visible; }

.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s3) var(--s4);
  flex: 0 0 auto;
}
.lightbox__count { margin: 0; color: #fff; font-size: .84rem; font-weight: 700; letter-spacing: .04em; }
.lightbox__btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .22); }
.lightbox__btn svg { width: 22px; height: 22px; }

/* touch-action:none so pinch and drag reach the handlers instead of the page */
.lightbox__stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.lightbox__stage img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  -webkit-user-drag: none;
}
.lightbox[data-zoomed="true"] .lightbox__stage { cursor: grab; }
.lightbox[data-zoomed="true"] .lightbox__stage:active { cursor: grabbing; }

.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox__nav::before {
  content: ''; width: 12px; height: 12px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.lightbox__nav--prev { left: var(--s3); }
.lightbox__nav--prev::before { transform: rotate(45deg); margin-left: 4px; }
.lightbox__nav--next { right: var(--s3); }
.lightbox__nav--next::before { transform: rotate(-135deg); margin-right: 4px; }
/* the arrows would sit under a pinching hand; swipe covers it on touch */
@media (hover: none) { .lightbox__nav { display: none; } }

.lightbox__hint {
  margin: 0; padding: 0 var(--s4) var(--s4);
  text-align: center; color: rgba(255, 255, 255, .62);
  font-size: .78rem; flex: 0 0 auto;
}
.lightbox[data-zoomed="true"] .lightbox__hint { visibility: hidden; }

.lightbox__btn:focus-visible,
.lightbox__nav:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* ==========================================================================
   Header search + example search hints
   ========================================================================== */

/* Collapsible row under the header. On the store page app.js removes this
   entirely -- one search input per page, never two. */
.header-search {
  display: flex; align-items: center; gap: var(--s2);
  position: relative;
  padding: 0 0 var(--s4);
}
.header-search[hidden] { display: none; }

.header-search__icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--on-dark-mut); pointer-events: none;
}
.header-search__icon svg { width: 20px; height: 20px; }

.header-search__input {
  flex: 1 1 auto; min-width: 0;
  min-height: 48px; padding: 0 var(--s3) 0 46px;
  background: var(--ink-3); color: var(--on-dark);
  border: 1px solid var(--line-dark); border-radius: var(--r-sm);
  font: inherit;
}
.header-search__input::placeholder { color: var(--on-dark-mut); }
.header-search__input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.header-search__close { flex: 0 0 auto; }

/* At 375px the row is input + Search + close, and the button was wrapping to
   "Sear / ch". Keep it on one line and let the input give up the space. */
.header-search .btn { flex: 0 0 auto; white-space: nowrap; }

/* Under ~400px the word is not worth the room: Enter submits, the keyboard
   shows a search key (enterkeyhint), and the close button stays reachable. */
@media (max-width: 400px) {
  .header-search .btn { display: none; }
}

/* Example searches. Quieter than the category filters on purpose: they teach,
   they are not the primary control. */
.search-hints {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s3);
}
.search-hints__label {
  font-size: .8rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.hint {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 var(--s3);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: .84rem; font-weight: 700; color: var(--text);
  text-decoration: none;
}
.hint:hover { background: var(--paper-3); border-color: var(--line-strong, var(--text-muted)); }
.hint:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 2px; }

.search-hints--empty { justify-content: center; margin-top: var(--s3); }

/* ---- clear button inside the store search field ---------------------------
   .search svg above positions the magnifier absolutely on the left, and that
   selector would catch this icon too — so the position is reset explicitly.
   The browser's own clear button is suppressed so there is never a second X. */
.search input { padding-right: 46px; }
.search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
}

.search__clear {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--text-muted); cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.search__clear[hidden] { display: none; }
.search__clear:hover { background: var(--paper-3); color: var(--text); }
.search__clear:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 2px; }
.search__clear svg {
  position: static; left: auto; top: auto; transform: none;
  width: 18px; height: 18px; color: inherit; pointer-events: none;
}

/* ==========================================================================
   Narrow-phone fixes (found on a real iPhone at 402px, 2026-09-16)
   ========================================================================== */

/* The header carries a logo, "Lebanon", and three 48px controls. Adding the
   search icon pushed it 17px over the edge on a 402px screen, which clipped
   the cart badge. "Lebanon" is decorative here — the mark already reads IGL
   COATINGS, and the country is in the title, footer and about page — so it is
   the first thing to go. Targets stay at 48px; only the padding tightens. */
@media (max-width: 430px) {
  .logo__country { display: none; }
  .header__actions { gap: var(--s1); }
  .header__actions .icon-btn { padding: 0 var(--s2); }
}

/* One visit in the logs came from a 320px screen, where the row still had no
   slack. The mark shrinks rather than the touch targets. */
@media (max-width: 360px) {
  .logo { --logo-w: 104px; }
}

/* The toast slid down by 160% of its OWN height, which clears the screen on
   desktop where it sits 24px up, but not on a phone where it sits above the
   action bar — it stopped behind the bar and stayed there for good. Fade and
   hide it as well, so it leaves regardless of how high it started. */
.toast {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--dur-slow) var(--ease-out),
              opacity   var(--dur-slow) var(--ease-out),
              visibility 0s linear var(--dur-slow);
}
.toast[data-show="true"] {
  opacity: 1;
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out),
              opacity   var(--dur-slow) var(--ease-out),
              visibility 0s;
}

/* A two-digit cart count wrapped to two lines inside the 21px badge and got
   clipped — "1" over "0" instead of "10". The pill does grow (min-width, not a
   fixed width), but the text box ends up a fraction narrower than the digits,
   and `white-space: normal` lets them break. Two guards: never break the
   number, and never let the button shrink the badge below its content. */
.cart-count {
  white-space: nowrap;
  flex: 0 0 auto;
  line-height: 1;
}