/* ==========================================================================
   AZSupply — V1.0 stylesheet
   Canonical design system (tokens → components) + page layouts.
   Reused across every page. Do not fork; extend here.
   ========================================================================== */
:root{
  /* Raw brand palette (from the official logo) */
  --az-primary-blue:#0D3B8A; --az-secondary-blue:#1976D2; --az-green:#38B24A;
  --az-navy:#0A1F44; --az-beige:#F5EFE6; --az-light-gray:#F1F3F6; --az-charcoal:#1A1D23;
  --az-gold:#BFA063; --az-gold-soft:#E7DCC3;

  /* Semantic roles */
  --color-bg:#FBFAF7; --color-surface:#FFFFFF; --color-surface-warm:#F7F3EC;
  --color-surface-cool:#F4F6F9; --color-border:#ECE8E0; --color-border-strong:#DFDACF;
  --color-ink:#1A1D23; --color-ink-soft:#565B64; --color-ink-faint:#8B8F98;
  --color-ink-on-dark:#F4F5F7; --color-ink-on-dark-soft:#B9C0CE;
  --color-primary:var(--az-navy); --color-primary-hover:#132B54;
  --color-accent:var(--az-green); --color-accent-blue:var(--az-secondary-blue);
  --color-gold:var(--az-gold);
  --color-success:#2E9E44; --color-error:#D9534F; --color-warning:#E0A23B; --color-focus:#1976D2;

  /* Type */
  --font-display:"Montserrat", system-ui, -apple-system, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, sans-serif;
  --fs-hero:clamp(2.75rem, 1.6rem + 4.4vw, 4.5rem);
  --fs-h1:clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --fs-h2:clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-h3:1.375rem; --fs-card:1.125rem; --fs-body:1.0625rem; --fs-sm:0.9375rem; --fs-caption:0.8125rem;
  --lh-tight:1.06; --lh-snug:1.25; --lh-normal:1.62; --tr-tight:-0.02em; --tr-eyebrow:0.16em;

  /* Spacing */
  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem;
  --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --section-y:clamp(3.5rem, 2rem + 6vw, 7rem);
  --container:1180px; --gutter:clamp(1.25rem, 0.6rem + 3vw, 2.5rem);

  /* Radius */
  --radius-xs:8px; --radius-sm:12px; --radius-md:16px; --radius-lg:22px; --radius-xl:28px; --radius-pill:999px;

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(16,26,48,.05);
  --shadow-sm:0 2px 10px -3px rgba(16,26,48,.08), 0 1px 2px rgba(16,26,48,.04);
  --shadow-md:0 16px 34px -16px rgba(16,26,48,.14), 0 2px 6px -2px rgba(16,26,48,.06);
  --shadow-lg:0 34px 64px -26px rgba(16,26,48,.20), 0 4px 12px -6px rgba(16,26,48,.08);
  --shadow-focus:0 0 0 3px rgba(25,118,210,.30);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:140ms; --dur:240ms; --dur-slow:440ms;
  --annc-h:38px; --header-h:74px;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-ink);font-family:var(--font-body);
  font-size:var(--fs-body);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none;margin:0;padding:0}
img{max-width:100%;display:block}
svg{display:block}
input,select,textarea{font-family:inherit;font-size:1rem;color:var(--color-ink)}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:6px}
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.container--wide{max-width:1320px}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Type roles */
.t-hero{font-family:var(--font-display);font-weight:700;font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:var(--tr-tight);color:var(--color-ink)}
.t-h1{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h1);line-height:1.1;letter-spacing:var(--tr-tight);color:var(--color-ink)}
.t-h2{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.01em;color:var(--color-ink)}
.t-h3{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);line-height:1.25;color:var(--color-ink)}
.t-card{font-family:var(--font-body);font-weight:600;font-size:var(--fs-card);line-height:1.35;letter-spacing:-.005em;color:var(--color-ink)}
.t-body{font-family:var(--font-body);font-weight:400;font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--color-ink-soft)}
.t-sm{font-size:var(--fs-sm);color:var(--color-ink-soft)}
.t-caption{font-size:var(--fs-caption);line-height:1.5;color:var(--color-ink-faint)}
.eyebrow{font-family:var(--font-body);font-size:var(--fs-caption);font-weight:600;letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--color-gold)}

/* Buttons */
.btn{--btn-py:0.72rem;--btn-px:1.35rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-sm);line-height:1;letter-spacing:.005em;
  padding:var(--btn-py) var(--btn-px);border-radius:var(--radius-pill);border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.btn .icon{width:16px;height:16px}
.btn:active{transform:translateY(0)}
.btn--lg{--btn-py:0.95rem;--btn-px:1.7rem;font-size:var(--fs-body)}
.btn--sm{--btn-py:0.5rem;--btn-px:1rem;font-size:var(--fs-caption)}
.btn--block{width:100%}
.btn--primary{background:var(--color-primary);color:var(--color-ink-on-dark);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--primary .icon{transition:transform var(--dur) var(--ease)}
.btn--primary:hover .icon{transform:translateX(3px)}
.btn--secondary{background:var(--color-surface);color:var(--color-ink);border-color:var(--color-border-strong);box-shadow:var(--shadow-xs)}
.btn--secondary:hover{background:var(--color-surface-warm);border-color:var(--color-ink-faint);transform:translateY(-1px)}
.btn--outline{background:transparent;color:var(--color-ink);border-color:var(--color-border-strong)}
.btn--outline:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn--text{background:transparent;color:var(--color-primary);padding-inline:.4rem;border-radius:var(--radius-xs);position:relative}
.btn--text>span{position:relative;background-image:linear-gradient(var(--color-accent),var(--color-accent));background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size var(--dur) var(--ease);padding-bottom:2px}
.btn--text:hover>span{background-size:100% 1.5px}
.btn--onDark{background:var(--color-surface);color:var(--color-ink)}
.btn--onDark:hover{background:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none;transform:none}

/* Icons */
.icon{display:inline-grid;place-items:center;color:currentColor;width:22px;height:22px}
.icon svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.icon--sm{width:18px;height:18px}.icon--md{width:22px;height:22px}.icon--lg{width:26px;height:26px}

/* Media / image containers (placeholder-aware) */
.media{position:relative;overflow:hidden;border-radius:var(--radius-md);
  background:radial-gradient(120% 120% at 30% 20%, #FCFBF8 0%, var(--color-surface-warm) 60%, #EFE9DE 100%);
  border:1px solid var(--color-border)}
.media>img{width:100%;height:100%;object-fit:cover;display:block}
.media--16x9{aspect-ratio:16/9}.media--3x2{aspect-ratio:3/2}.media--4x5{aspect-ratio:4/5}.media--1x1{aspect-ratio:1/1}
.media__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;color:#B9B09B;text-align:center;padding:1rem}
.media__ph .icon{width:28px;height:28px}
.media__ph span{font-size:var(--fs-caption);letter-spacing:.04em;color:#B0A78F}
.media__ph small{font-size:11px;color:#C4BCA9;text-transform:uppercase;letter-spacing:.1em}

/* Cards */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
  display:flex;flex-direction:column;overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-border-strong)}
.card__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}

/* Product card (reusable component) */
.pcard{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-border-strong)}
.pcard__media{position:relative;display:block}
.pcard__media .media{border:none;border-radius:0;border-bottom:1px solid var(--color-border)}
.pcard__media img{transition:transform var(--dur-slow) var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.04)}
.pcard__flag{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--color-primary);background:rgba(255,255,255,.92);padding:5px 10px;border-radius:var(--radius-pill);box-shadow:var(--shadow-xs)}
.pcard__body{padding:var(--sp-4) var(--sp-5) var(--sp-5);display:flex;flex-direction:column;gap:6px;flex:1}
.pcard__cat{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent)}
.pcard__name{font-family:var(--font-body);font-weight:600;font-size:var(--fs-card);color:var(--color-ink);line-height:1.3}
.pcard__desc{font-size:var(--fs-caption);color:var(--color-ink-faint);line-height:1.5}
.pcard__foot{margin-top:auto;padding-top:var(--sp-3);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.pcard__price{font-family:var(--font-display);font-weight:600;font-size:1.125rem;color:var(--color-ink)}
.pcard__add{width:40px;height:40px;flex:none;border-radius:var(--radius-pill);display:grid;place-items:center;
  background:var(--color-primary);color:var(--color-ink-on-dark);transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.pcard__add:hover{background:var(--color-primary-hover);transform:scale(1.06)}
.pcard__add .icon{width:17px;height:17px}
.pcard__add.is-added{background:var(--color-success)}

/* Solution card */
.scard{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.scard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-border-strong)}
.scard__icon{width:52px;height:52px;border-radius:var(--radius-md);display:grid;place-items:center;color:var(--color-primary);background:var(--color-surface-cool);margin-bottom:var(--sp-4)}
.scard__icon .icon{width:24px;height:24px}
.scard__title{font-family:var(--font-body);font-weight:600;font-size:var(--fs-card);color:var(--color-ink);margin:0 0 6px}
.scard__value{font-size:var(--fs-sm);color:var(--color-ink-soft);line-height:1.55;margin:0}
.scard__more{margin-top:var(--sp-4);display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:var(--fs-sm);color:var(--color-primary)}
.scard__more .icon{width:15px;height:15px;transition:transform var(--dur) var(--ease)}
.scard:hover .scard__more .icon{transform:translateX(4px)}

/* Grids + reveal */
.grid{display:grid;gap:var(--sp-5)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.section{padding:var(--section-y) 0}
.section--warm{background:var(--color-surface-warm)}
.section--cool{background:var(--color-surface-cool)}
.section__head{max-width:60ch;margin-bottom:var(--sp-7)}
.section__head--center{margin-inline:auto;text-align:center}
.section__head .eyebrow{display:block;margin-bottom:var(--sp-3)}
.section__head .t-h2{margin:0 0 var(--sp-3)}
.section__head p{margin:0;color:var(--color-ink-soft)}
.section__foot{margin-top:var(--sp-7);display:flex;justify-content:center}

/* ==========================================================================
   HEADER + FOOTER + OVERLAYS (rendered by app.js on every page)
   ========================================================================== */
.az-annc{height:var(--annc-h);background:var(--az-navy);color:var(--color-ink-on-dark);font-size:var(--fs-caption);display:flex;align-items:center}
.az-annc .container{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.az-annc__list{display:flex;align-items:center;gap:14px;min-width:0;overflow:hidden}
.az-annc__item{display:flex;align-items:center;gap:14px;white-space:nowrap;color:var(--color-ink-on-dark-soft)}
.az-annc__item::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--color-gold);flex:none}
.az-annc__item:first-child::before{display:none}
.az-annc__right{display:flex;align-items:center;gap:14px;white-space:nowrap}
.az-annc__trust{color:var(--color-ink-on-dark-soft)}
.az-annc__div{width:1px;height:13px;background:rgba(255,255,255,.2);flex:none}
.az-annc__help{display:inline-flex;align-items:center;gap:7px;color:var(--color-ink-on-dark);font-weight:500}
.az-annc__help:hover{color:#fff}.az-annc__help .icon{width:14px;height:14px;color:var(--color-gold)}
.az-sticky{position:sticky;top:0;z-index:60;background:rgba(251,250,247,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--color-border);transition:box-shadow var(--dur) var(--ease)}
.az-sticky.is-lifted{box-shadow:var(--shadow-sm)}
.az-bar{height:var(--header-h);display:flex;align-items:center;gap:26px}
.az-logo{display:inline-flex;align-items:center;flex:none}
.az-logo img{height:34px;width:auto}
.az-nav{display:flex;align-items:center;gap:2px;margin:0 auto}
.az-nav__btn{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:var(--radius-xs);font-size:var(--fs-sm);font-weight:600;color:var(--color-ink);transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.az-nav__btn .icon{width:11px;height:11px;color:var(--color-ink-faint);transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.az-nav__btn:hover{color:var(--color-primary);background:var(--color-surface-cool)}
.az-nav__item.is-open .az-nav__btn{color:var(--color-primary);background:var(--color-surface-cool)}
.az-nav__item.is-open .az-nav__btn .icon{transform:rotate(180deg)}
.az-actions{display:flex;align-items:center;gap:4px;flex:none}
.az-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--color-ink);position:relative;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.az-icon .icon{width:20px;height:20px}
.az-icon:hover{background:var(--color-surface-cool);color:var(--color-primary)}
.az-cart__count{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;background:var(--color-accent);color:#fff;border-radius:var(--radius-pill);font-size:10px;font-weight:700;line-height:17px;text-align:center;border:2px solid var(--color-bg)}
.az-cta{margin-left:8px}
.az-burger{display:none}
.az-panel{position:absolute;left:0;right:0;top:100%;background:var(--color-surface);border-top:1px solid var(--color-border);border-radius:0 0 24px 24px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity var(--dur) var(--ease),transform var(--dur-slow) var(--ease),visibility var(--dur);z-index:55}
.az-panel.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.az-panel__inner{padding:34px 0 40px}
.az-mega{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px}
.az-mega--simple{grid-template-columns:repeat(2,minmax(0,240px))}
.az-grp__title{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:700;color:var(--color-ink);margin-bottom:10px}
.az-grp__title .dot{width:6px;height:6px;border-radius:50%;background:var(--color-accent)}
.az-links{display:flex;flex-direction:column;gap:1px}
.az-link{display:flex;align-items:center;padding:6px 8px;margin:0 -8px;border-radius:var(--radius-xs);font-size:var(--fs-sm);color:var(--color-ink-soft);font-weight:500;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.az-link:hover{background:var(--color-surface-cool);color:var(--color-primary)}

/* Overlays: scrim, drawers, mobile */
.az-scrim{position:fixed;inset:0;background:rgba(10,31,68,.42);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur);z-index:80}
.az-scrim.is-open{opacity:1;visibility:visible}
.az-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,94vw);background:var(--color-bg);z-index:90;display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--dur-slow) var(--ease);box-shadow:var(--shadow-lg)}
.az-drawer.is-open{transform:translateX(0)}
.az-drawer__top{display:flex;align-items:center;justify-content:space-between;padding:20px var(--sp-5);border-bottom:1px solid var(--color-border)}
.az-drawer__top h3{font-family:var(--font-display);font-weight:600;font-size:1.2rem;margin:0}
.az-drawer__body{flex:1;overflow-y:auto;padding:var(--sp-4) var(--sp-5)}
.az-drawer__foot{padding:var(--sp-5);border-top:1px solid var(--color-border);background:var(--color-surface)}
.az-drawer__empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:var(--sp-7)}
.az-drawer__empty .ico{width:64px;height:64px;border-radius:50%;background:var(--color-surface-cool);display:grid;place-items:center;color:var(--color-primary)}
.az-drawer__empty .ico .icon{width:28px;height:28px}
.az-close{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--color-ink)}
.az-close:hover{background:var(--color-surface-cool)}.az-close .icon{width:19px;height:19px}

/* Cart line item (shared drawer + cart page) */
.cline{display:grid;grid-template-columns:64px 1fr auto;gap:var(--sp-3);padding:var(--sp-4) 0;border-bottom:1px solid var(--color-border)}
.cline__media{width:64px;height:64px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--color-border);background:var(--color-surface-warm)}
.cline__name{font-weight:600;font-size:var(--fs-sm);color:var(--color-ink);line-height:1.3}
.cline__meta{font-size:var(--fs-caption);color:var(--color-ink-faint);margin-top:2px}
.cline__price{font-weight:600;font-size:var(--fs-sm);white-space:nowrap}
.cline__qty{display:inline-flex;align-items:center;gap:2px;margin-top:8px;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);padding:2px}
.cline__qty button{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--color-ink);font-size:15px;line-height:1}
.cline__qty button:hover{background:var(--color-surface-cool)}
.cline__qty span{min-width:22px;text-align:center;font-size:var(--fs-sm);font-weight:600}
.cline__remove{margin-top:8px;font-size:var(--fs-caption);color:var(--color-ink-faint)}
.cline__remove:hover{color:var(--color-error)}
.csum{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}
.csum b{font-family:var(--font-display);font-size:1.15rem}
.csum--muted{color:var(--color-ink-soft);font-size:var(--fs-sm)}

/* Mobile drawer nav */
.az-mobile{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);background:var(--color-bg);z-index:90;display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--dur-slow) var(--ease);box-shadow:var(--shadow-lg)}
.az-mobile.is-open{transform:translateX(0)}
.az-mobile__top{display:flex;align-items:center;justify-content:space-between;padding:16px var(--gutter);border-bottom:1px solid var(--color-border)}
.az-mobile__top img{height:30px}
.az-mobile__scroll{flex:1;overflow-y:auto;padding:8px 0}
.az-macc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:15px var(--gutter);font-size:1rem;font-weight:600;color:var(--color-ink)}
.az-macc__btn .icon{width:15px;height:15px;color:var(--color-ink-faint);transition:transform var(--dur) var(--ease)}
.az-macc.is-open>.az-macc__btn .icon{transform:rotate(180deg)}
.az-macc__panel{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease);background:var(--color-surface-warm)}
.az-macc__panel a{display:block;padding:11px var(--gutter);font-size:var(--fs-sm);color:var(--color-ink-soft)}
.az-macc__panel a:hover{color:var(--color-primary)}
.az-mobile__foot{padding:16px var(--gutter);border-top:1px solid var(--color-border)}

/* Sticky mobile CTA bar */
.az-mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,250,247,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--color-border)}
.az-mbar .btn{flex:1}

/* Footer */
.az-foot{background:var(--az-navy);color:var(--color-ink-on-dark-soft);padding:var(--sp-9) 0 var(--sp-6)}
.az-foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-6)}
.az-foot__brand img{height:34px;margin-bottom:var(--sp-4)}
.az-foot__brand p{max-width:34ch;font-size:var(--fs-sm);color:var(--color-ink-on-dark-soft);margin:0 0 var(--sp-4)}
.az-foot__news{display:flex;gap:8px;max-width:320px}
.az-foot__news input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-pill);padding:11px 16px;color:#fff}
.az-foot__news input::placeholder{color:var(--color-ink-on-dark-soft)}
.az-foot__col h4{font-family:var(--font-body);font-size:var(--fs-caption);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 var(--sp-4)}
.az-foot__col a{display:block;padding:6px 0;font-size:var(--fs-sm);color:var(--color-ink-on-dark-soft)}
.az-foot__col a:hover{color:#fff}
.az-foot__bot{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--fs-caption)}
.az-foot__pay{display:flex;gap:8px;align-items:center;color:var(--color-ink-on-dark-soft)}

/* Toast */
.az-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:120;background:var(--az-navy);color:#fff;padding:12px 20px;border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);font-weight:500;display:flex;align-items:center;gap:10px;opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.az-toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.az-toast .icon{width:16px;height:16px;color:var(--color-accent)}

/* ==========================================================================
   PAGE: HOME
   ========================================================================== */
.hero{position:relative;overflow:hidden;padding:calc(var(--section-y) + .5rem) 0 var(--section-y)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero .eyebrow{display:block;margin-bottom:var(--sp-4)}
.hero__title{margin:0 0 var(--sp-5);max-width:15ch}
.hero__title .accent{color:var(--color-accent)}
.hero__sub{font-size:1.2rem;color:var(--color-ink-soft);max-width:46ch;margin:0 0 var(--sp-6)}
.hero__cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.hero__trust{margin-top:var(--sp-6);display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;color:var(--color-ink-soft);font-size:var(--fs-sm)}
.hero__stars{display:inline-flex;gap:2px;color:var(--color-gold)}
.hero__stars .icon{width:16px;height:16px}
.hero__stars svg{fill:currentColor;stroke:none}
.hero__trust .dot{width:3px;height:3px;border-radius:50%;background:var(--color-ink-faint)}
.hero__visual{position:relative}
.hero__visual .media{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}
.hero__badge{position:absolute;bottom:-18px;left:-18px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:14px 18px;display:flex;align-items:center;gap:12px;max-width:230px}
.hero__badge .ico{width:38px;height:38px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--color-accent) 12%, white);color:var(--color-accent);display:grid;place-items:center;flex:none}
.hero__badge .ico .icon{width:20px;height:20px}
.hero__badge b{display:block;font-size:var(--fs-sm);color:var(--color-ink)}
.hero__badge span{font-size:var(--fs-caption);color:var(--color-ink-faint)}
.hero__marquee{margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--color-border);display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;color:var(--color-ink-faint);font-size:var(--fs-sm)}
.hero__marquee b{color:var(--color-ink);font-family:var(--font-display);font-weight:600}

.why{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6) var(--sp-8)}
.why__item{display:flex;gap:var(--sp-4)}
.why__ico{width:46px;height:46px;flex:none;border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border);display:grid;place-items:center;color:var(--color-primary)}
.why__ico .icon{width:22px;height:22px}
.why__item h3{font-family:var(--font-body);font-weight:600;font-size:var(--fs-card);margin:2px 0 6px;color:var(--color-ink)}
.why__item p{margin:0;font-size:var(--fs-sm);color:var(--color-ink-soft);line-height:1.55}

/* Reviews */
.rev{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--sp-6);align-items:stretch}
.rev__feat{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:var(--sp-7);display:flex;flex-direction:column;justify-content:center;gap:var(--sp-4)}
.rev__metric{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:var(--color-primary);letter-spacing:var(--tr-tight)}
.rev__metric span{color:var(--color-accent)}
.rev__quote{font-family:var(--font-display);font-weight:500;font-size:1.35rem;line-height:1.4;color:var(--color-ink);margin:0}
.rev__who{display:flex;align-items:center;gap:12px;margin-top:auto}
.rev__ava{width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--color-surface-warm);border:1px solid var(--color-border);flex:none}
.rev__who b{display:block;font-size:var(--fs-sm);color:var(--color-ink)}
.rev__who span{font-size:var(--fs-caption);color:var(--color-ink-faint)}
.rev__side{display:flex;flex-direction:column;gap:var(--sp-5)}
.rev__mini{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--sp-5);flex:1}
.rev__stars{display:inline-flex;gap:2px;color:var(--color-gold);margin-bottom:10px}
.rev__stars .icon{width:15px;height:15px}.rev__stars svg{fill:currentColor;stroke:none}
.rev__mini p{margin:0 0 10px;font-size:var(--fs-sm);color:var(--color-ink);line-height:1.55}
.rev__mini cite{font-style:normal;font-size:var(--fs-caption);color:var(--color-ink-faint)}

/* Final CTA */
.fcta{background:linear-gradient(160deg,var(--az-primary-blue),var(--az-navy));border-radius:var(--radius-xl);padding:clamp(2.5rem,6vw,5rem);text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.fcta::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(56,178,74,.28),transparent 68%)}
.fcta__inner{position:relative;z-index:1}
.fcta h2{color:#fff;margin:0 auto var(--sp-3);max-width:18ch}
.fcta p{color:var(--color-ink-on-dark-soft);max-width:44ch;margin:0 auto var(--sp-6)}
.fcta__row{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}
.fcta__trust{margin-top:var(--sp-5);color:var(--color-ink-on-dark-soft);font-size:var(--fs-caption)}

/* ==========================================================================
   SHARED PAGE HEADER (collection/about/contact/etc.)
   ========================================================================== */
.page-hero{padding:var(--sp-8) 0 var(--sp-6);border-bottom:1px solid var(--color-border)}
.page-hero .eyebrow{display:block;margin-bottom:var(--sp-3)}
.page-hero h1{margin:0 0 var(--sp-3)}
.page-hero p{margin:0;max-width:56ch;color:var(--color-ink-soft)}
.crumb{display:flex;align-items:center;gap:8px;font-size:var(--fs-caption);color:var(--color-ink-faint);margin-bottom:var(--sp-4)}
.crumb a:hover{color:var(--color-primary)}
.crumb .sep{opacity:.5}

/* Form controls */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4)}
.field label{font-size:var(--fs-sm);font-weight:600;color:var(--color-ink)}
.field .hint{font-size:var(--fs-caption);color:var(--color-ink-faint)}
.input,.select,.textarea{width:100%;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);padding:12px 14px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--color-focus);box-shadow:var(--shadow-focus)}
.textarea{min-height:130px;resize:vertical}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}

/* ==========================================================================
   PAGE: PRODUCT COLLECTION
   ========================================================================== */
.col-layout{display:grid;gap:var(--sp-6)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 16px;border-radius:var(--radius-pill);border:1.5px solid var(--color-border);background:var(--color-surface);font-size:var(--fs-sm);font-weight:600;color:var(--color-ink-soft);transition:all var(--dur) var(--ease);white-space:nowrap}
.chip:hover{border-color:var(--color-border-strong);color:var(--color-ink)}
.chip.is-active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.toolbar__right{display:flex;align-items:center;gap:12px}
.toolbar__count{font-size:var(--fs-sm);color:var(--color-ink-faint)}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
.empty-state{text-align:center;padding:var(--sp-9) 0;color:var(--color-ink-faint)}
.empty-state .ico{width:64px;height:64px;border-radius:50%;background:var(--color-surface-cool);color:var(--color-primary);display:grid;place-items:center;margin:0 auto var(--sp-4)}

/* ==========================================================================
   PAGE: PRODUCT DETAIL
   ========================================================================== */
.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.pdp__gallery{position:sticky;top:calc(var(--header-h) + 20px)}
.pdp__main{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:var(--sp-3)}
.pdp__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.pdp__thumb{border-radius:var(--radius-md);overflow:hidden;border:1.5px solid var(--color-border);cursor:pointer;background:var(--color-surface-warm)}
.pdp__thumb.is-active{border-color:var(--color-primary)}
.pdp__cat{font-size:var(--fs-caption);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent)}
.pdp__title{margin:var(--sp-2) 0 var(--sp-3)}
.pdp__rating{display:flex;align-items:center;gap:8px;color:var(--color-ink-faint);font-size:var(--fs-sm);margin-bottom:var(--sp-4)}
.pdp__rating .stars{display:inline-flex;gap:2px;color:var(--color-gold)}.pdp__rating .stars .icon{width:15px;height:15px}.pdp__rating .stars svg{fill:currentColor;stroke:none}
.pdp__price{font-family:var(--font-display);font-weight:600;font-size:1.9rem;color:var(--color-ink);margin-bottom:var(--sp-5)}
.pdp__desc{color:var(--color-ink-soft);margin-bottom:var(--sp-5)}
.pdp__buy{display:flex;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-5)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--color-border-strong);border-radius:var(--radius-pill);padding:4px}
.qty button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px}
.qty button:hover{background:var(--color-surface-cool)}
.qty span{min-width:30px;text-align:center;font-weight:600}
.pdp__meta{border-top:1px solid var(--color-border);padding-top:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}
.pdp__meta .row{display:flex;align-items:center;gap:12px;font-size:var(--fs-sm);color:var(--color-ink-soft)}
.pdp__meta .row .icon{width:20px;height:20px;color:var(--color-primary)}

/* ==========================================================================
   PAGE: CART + CHECKOUT
   ========================================================================== */
.cart-layout,.checkout-layout{display:grid;grid-template-columns:1.5fr .9fr;gap:var(--sp-7);align-items:start}
.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--sp-6)}
.summary{position:sticky;top:calc(var(--header-h) + 20px)}
.summary h3{font-family:var(--font-display);font-weight:600;font-size:1.15rem;margin:0 0 var(--sp-4)}
.summary__line{display:flex;justify-content:space-between;padding:8px 0;font-size:var(--fs-sm);color:var(--color-ink-soft)}
.summary__total{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--color-border)}
.summary__total b{font-family:var(--font-display);font-size:1.4rem;color:var(--color-ink)}
.summary__trust{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:8px;font-size:var(--fs-caption);color:var(--color-ink-faint)}
.summary__trust .row{display:flex;align-items:center;gap:8px}.summary__trust .icon{width:15px;height:15px;color:var(--color-success)}
.checkout-steps{display:flex;flex-direction:column;gap:var(--sp-6)}
.cstep__head{display:flex;align-items:center;gap:12px;margin-bottom:var(--sp-4)}
.cstep__num{width:28px;height:28px;border-radius:50%;background:var(--color-primary);color:#fff;display:grid;place-items:center;font-size:var(--fs-caption);font-weight:700;flex:none}
.cstep__head h3{font-family:var(--font-display);font-weight:600;font-size:1.1rem;margin:0}
.pay-note{display:flex;align-items:center;gap:10px;background:var(--color-surface-cool);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:12px 14px;font-size:var(--fs-caption);color:var(--color-ink-soft);margin-top:var(--sp-3)}
.pay-note .icon{width:18px;height:18px;color:var(--color-primary)}

/* ==========================================================================
   PAGE: ABOUT
   ========================================================================== */
.about-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);text-align:center}
.stat-band .num{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,2.8rem);color:var(--color-primary);line-height:1}
.stat-band .lbl{font-size:var(--fs-caption);color:var(--color-ink-faint);margin-top:6px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}

/* ==========================================================================
   PAGE: CONTACT
   ========================================================================== */
.contact-layout{display:grid;grid-template-columns:1fr .8fr;gap:var(--sp-8);align-items:start}
.contact-info{display:flex;flex-direction:column;gap:var(--sp-5)}
.contact-info .row{display:flex;gap:14px;align-items:flex-start}
.contact-info .ico{width:44px;height:44px;flex:none;border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border);display:grid;place-items:center;color:var(--color-primary)}
.contact-info b{display:block;font-size:var(--fs-sm);color:var(--color-ink)}
.contact-info span{font-size:var(--fs-sm);color:var(--color-ink-soft)}

/* ==========================================================================
   PAGE: SEARCH
   ========================================================================== */
.search-hero{max-width:640px;margin:0 auto;text-align:center}
.search-box{display:flex;align-items:center;gap:12px;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-pill);padding:14px 22px;box-shadow:var(--shadow-sm);margin-top:var(--sp-5)}
.search-box:focus-within{border-color:var(--color-focus);box-shadow:var(--shadow-focus)}
.search-box input{flex:1;border:none;outline:none;background:none;font-size:1.1rem}
.search-box .icon{width:22px;height:22px;color:var(--color-ink-faint)}
.search-suggest{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:var(--sp-4)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .az-nav,.az-cta,.az-icon--search,.az-icon--account{display:none}
  .az-burger{display:grid}.az-actions{margin-left:auto}
  .az-annc__trust,.az-annc__div{display:none}
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .az-foot__top{grid-template-columns:1fr 1fr 1fr}
  .az-foot__brand{grid-column:1/-1}
}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:var(--sp-7)}
  .hero__visual{order:-1}
  .rev{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr}.pdp__gallery{position:static}
  .cart-layout,.checkout-layout,.contact-layout,.about-hero{grid-template-columns:1fr}
  .summary{position:static}
  .why{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .az-mbar{display:flex}
  body{padding-bottom:74px}
}
@media (max-width:720px){
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:1fr}
  .stat-band{grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
  .az-annc__list .az-annc__item:nth-child(n+2){display:none}
  .az-foot__top{grid-template-columns:1fr 1fr}
  .row-2{grid-template-columns:1fr}
  .pdp__thumbs{grid-template-columns:repeat(4,1fr)}
  .hero__badge{left:0}
}
@media (max-width:480px){
  .grid--4,.grid--2{grid-template-columns:1fr}
  .az-foot__top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}.reveal{opacity:1;transform:none}
  .pcard:hover .pcard__media img{transform:none}
}

/* ==========================================================================
   LANGUAGE TOGGLE (announcement bar) — VI | EN
   ========================================================================== */
.az-lang{display:inline-flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-pill);padding:2px;gap:2px;flex:none}
.az-lang button{padding:3px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--color-ink-on-dark-soft);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.az-lang button:hover{color:#fff}
.az-lang button.is-on{background:#fff;color:var(--az-navy)}
@media (max-width:720px){
  .az-annc__help span{display:none}
}

/* ==========================================================================
   RICH PRODUCT STORY (Zensoak-style solution page)
   ========================================================================== */
.zs-state{padding:var(--section-y) 0;text-align:center;border-top:1px solid var(--color-border)}
.zs-state h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,1.2rem + 2.4vw,2.6rem);letter-spacing:-.015em;line-height:1.18;max-width:24ch;margin:0 auto var(--sp-4);color:var(--color-ink)}
.zs-state p{max-width:56ch;margin:0 auto;color:var(--color-ink-soft);font-size:1.1rem}
.pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pillx{padding:10px 18px;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:var(--color-surface);font-size:var(--fs-sm);font-weight:600;color:var(--color-ink-soft)}
.zs-inside{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.ckl{display:flex;flex-direction:column;gap:14px}
.ckl li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-body);color:var(--color-ink)}
.ckl .icon{width:22px;height:22px;color:var(--color-success);flex:none;margin-top:2px}
.zs-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-5)}
.zstep .n{width:34px;height:34px;border-radius:50%;background:var(--color-primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm);margin-bottom:12px;font-family:var(--font-display)}
.zstep p{margin:0;font-size:var(--fs-sm);color:var(--color-ink-soft);line-height:1.55}
.pdp__thumb{padding:0;display:block;width:100%}
.pdp__thumb .media{border:none;border-radius:0}
@media (max-width:900px){
  .zs-inside{grid-template-columns:1fr}
  .zs-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){.zs-steps{grid-template-columns:1fr}}

/* Variant / combo selector (PDP) */
.vsel-label{display:block;margin:0 0 10px}
.vsel{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 var(--sp-5)}
.vopt{padding:11px 16px;border:1.5px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);font-size:var(--fs-sm);font-weight:600;color:var(--color-ink-soft);transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease)}
.vopt:hover{border-color:var(--color-ink-faint)}
.vopt.is-on{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-surface-cool)}

/* Area calculator (per-m² products, e.g. window decal) */
.calc{margin:0 0 var(--sp-5)}
.calc__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin:var(--sp-3) 0}
.calc__out{padding:12px 16px;background:var(--color-surface-cool);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--fs-sm);color:var(--color-ink-soft)}
.calc__out b{color:var(--color-ink)}

/* Menu "why different" badge grid */
.mbadges{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.mbadge{display:flex;align-items:center;gap:12px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:14px 16px;box-shadow:var(--shadow-xs)}
.mbadge .icon{width:20px;height:20px;color:var(--color-primary);flex:none}
.mbadge span{font-size:var(--fs-sm);font-weight:600;color:var(--color-ink)}
@media (max-width:720px){.mbadges{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.mbadges{grid-template-columns:1fr}}


/* ==========================================================================
   MOBILE PRODUCT GRID — 2-up so a phone screen shows ~4 products
   ========================================================================== */
@media (max-width:720px){
  .product-grid{gap:var(--sp-3)}
}
@media (max-width:480px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .pcard__body{padding:10px 12px 12px;gap:3px}
  .pcard__cat{font-size:9.5px;letter-spacing:.06em}
  .pcard__name{font-size:.92rem;line-height:1.25}
  .pcard__desc{display:none}
  .pcard__foot{padding-top:8px}
  .pcard__price{font-size:.98rem}
  .pcard__add{width:32px;height:32px}
  .pcard__add .icon{width:14px;height:14px}
  .pcard__flag{top:8px;left:8px;font-size:9px;padding:3px 8px}
}

/* Variant "save" sub-label + popular flag on combo buttons */
.vopt{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;line-height:1.3}
.vopt small{font-size:11px;font-weight:600;color:var(--color-success)}
.vopt .pop{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--color-gold);color:#fff;font-size:9px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:var(--radius-pill);white-space:nowrap}
.vopt.is-on small{color:var(--color-primary)}