:root {
  --bg:#07080b;
  --panel:#101318;
  --panel-2:#0c0f14;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --text:#f5f7fa;
  --muted:#a3acb7;
  --muted-2:#7f8994;
  --accent:#ff3232;
  --accent-soft:rgba(255,50,50,.12);
  --green:#20d26a;
  --radius:24px;
  --shadow:0 26px 70px rgba(0,0,0,.45);
  --shell:min(1180px, calc(100% - 28px));
  --speed:.18s;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,34,34,.16), transparent 24%),
    radial-gradient(circle at 18% 76%, rgba(255,34,34,.08), transparent 22%),
    var(--bg);
  color:var(--text);
}
a { color:inherit; text-decoration:none; }
button, input, select { font:inherit; }
img { max-width:100%; display:block; }
body.modal-open { overflow:hidden; }
.skip-link {
  position:absolute; left:14px; top:-44px; z-index:200;
  padding:10px 14px; border-radius:12px; background:#111; color:#fff;
}
.skip-link:focus { top:14px; }
.shell { width:var(--shell); margin:0 auto; }
.is-hidden { display:none !important; }

.site-header {
  position:sticky; top:0; z-index:80;
  background:rgba(6,8,11,.78); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.header-inner {
  min-height:86px; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
}
.brand { display:flex; align-items:center; gap:14px; min-width:0; }
.brand-logo, .footer-logo { width:44px; height:44px; object-fit:contain; flex:0 0 auto; }
.brand-copy, .footer-brand div { display:grid; gap:2px; }
.brand-copy strong { font-size:18px; letter-spacing:.02em; }
.brand-copy small, .footer-brand small { color:var(--muted); font-size:11px; letter-spacing:.11em; }
.main-nav {
  justify-self:center; display:flex; align-items:center; gap:6px;
  padding:6px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.03);
}
.nav-link {
  padding:12px 20px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.1em;
  color:#b7bfc9; transition:all var(--speed) ease;
}
.nav-link.is-active, .nav-link:hover { background:rgba(255,255,255,.08); color:#fff; }
.status-pill {
  justify-self:end; display:flex; align-items:center; gap:10px; padding:12px 15px;
  border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.03);
}
.status-dot { width:12px; height:12px; border-radius:50%; background:#707780; box-shadow:0 0 0 6px rgba(255,255,255,.02); }
#businessStatus.is-open .status-dot { background:var(--green); box-shadow:0 0 0 6px rgba(32,210,106,.12); }
#businessStatus.is-closed .status-dot { background:#ff6262; box-shadow:0 0 0 6px rgba(255,98,98,.12); }
.status-pill strong { display:block; font-size:12px; letter-spacing:.11em; }
.status-pill small { display:block; color:var(--muted); font-size:10px; }

.hero { position:relative; overflow:hidden; padding:64px 0 38px; }
.hero-orb { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; }
.hero-orb-one { width:360px; height:360px; right:-40px; top:10px; background:rgba(255,35,35,.14); }
.hero-orb-two { width:280px; height:280px; left:-80px; bottom:30px; background:rgba(255,35,35,.08); }
.hero-grid {
  position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center;
  min-height:540px;
}
.hero-copy h1 {
  margin:0; font-size:clamp(84px, 12vw, 150px); line-height:.92; font-weight:950; letter-spacing:-.08em;
}
.hero-copy h1 span { color:var(--accent); }
.hero-lead {
  max-width:760px; margin:22px 0 0; color:#d6dbe2; font-size:clamp(22px, 2.2vw, 29px); line-height:1.42;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.btn {
  appearance:none; border:1px solid var(--line-strong); border-radius:18px; min-height:54px;
  padding:0 22px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:850; font-size:13px; letter-spacing:.08em; cursor:pointer;
  transition:transform var(--speed) ease, border-color var(--speed) ease, background var(--speed) ease, opacity var(--speed) ease;
}
.btn:hover, .btn:focus-visible { transform:translateY(-1px); }
.btn-primary { background:linear-gradient(135deg, #ff4141, #ff1919); color:#fff; border-color:transparent; box-shadow:0 16px 38px rgba(255,50,50,.22); }
.btn-secondary { background:rgba(255,255,255,.04); color:#fff; }
.service-mantra {
  margin-top:24px; display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
}
.service-mantra span { font-weight:700; }
.service-mantra i { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.28); }
.service-mantra strong { color:#dfe4ea; font-size:12px; font-weight:800; letter-spacing:.06em; }
.hero-visual { display:grid; justify-items:center; gap:18px; }
.hero-logo-image {
  width:min(100%, 560px); aspect-ratio:1/1; object-fit:contain;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.4));
}
.hero-sync {
  text-align:center; color:var(--muted);
}
.hero-sync p { margin:0 0 6px; text-transform:uppercase; letter-spacing:.14em; font-size:11px; }
.hero-sync strong { color:#fff; font-size:18px; }

.section { padding:76px 0; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:28px; }
.eyebrow { margin:0 0 8px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.18em; }
.section-heading h2 { margin:0; font-size:clamp(54px, 7vw, 86px); line-height:.94; font-weight:950; letter-spacing:-.07em; }
.section-heading h2 span { color:var(--accent); }
.section-note { margin:0; color:var(--muted); font-size:13px; }
.notice {
  margin-bottom:18px; padding:14px 16px; border-radius:16px;
  background:rgba(255,204,0,.08); border:1px solid rgba(255,204,0,.14); color:#ffe08a; font-size:13px;
}
.product-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.product-card {
  display:grid; grid-template-rows:auto 1fr; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  box-shadow:var(--shadow); transition:transform var(--speed) ease, border-color var(--speed) ease;
  content-visibility:auto; contain-intrinsic-size:420px;
}
.product-card:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.16); }
.product-media { position:relative; aspect-ratio:1/1; padding:16px; background:#050608; }
.card-topline {
  position:absolute; inset:14px 14px auto 14px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.badge, .count-pill {
  display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 10px;
  border:1px solid var(--line); border-radius:999px; font-size:10px; font-weight:900; letter-spacing:.1em;
  background:rgba(255,255,255,.05);
}
.badge.is-promo { color:#ff8f8f; border-color:rgba(255,50,50,.22); background:rgba(255,50,50,.12); }
.product-image-wrap {
  width:100%; height:100%; display:grid; place-items:center; overflow:hidden; border-radius:18px;
}
.product-image {
  width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 18px 30px rgba(0,0,0,.38));
}
.image-fallback {
  width:100%; height:100%; display:none; place-items:center; border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  color:#fff; font-size:64px; font-weight:900; letter-spacing:-.06em;
}
.image-fallback.is-visible { display:grid; }
.product-body { display:grid; gap:14px; padding:18px 18px 20px; }
.product-index { color:var(--muted-2); font-size:10px; font-weight:900; letter-spacing:.14em; }
.product-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.product-title { margin:0; font-size:34px; line-height:.96; letter-spacing:-.05em; }
.product-price { font-size:26px; white-space:nowrap; }
.product-meta { display:flex; flex-wrap:wrap; gap:8px; }
.meta-pill {
  padding:7px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03);
  color:#d9dee5; font-size:10px; font-weight:900; letter-spacing:.09em;
}
.flavor-preview { display:grid; gap:8px; }
.flavor-preview-label { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:11px; }
.flavor-chips { display:flex; flex-wrap:wrap; gap:7px; min-height:30px; }
.flavor-chip {
  max-width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:999px;
  color:#d2d8df; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.flavor-chip.low { color:#ffd28a; border-color:rgba(255,175,64,.18); }
.card-action { width:100%; }
.promo-section { border-top:1px solid rgba(255,255,255,.04); background:linear-gradient(180deg, rgba(255,43,43,.025), transparent 45%); }
.shipping-note {
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:center; text-align:center;
  padding:18px 20px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.03);
}
.shipping-note strong { font-size:14px; }
.shipping-note span { color:var(--muted); font-size:13px; }

.wholesale-section { padding:0 0 44px; }
.wholesale-panel {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 26px; border:1px solid var(--line); border-radius:22px;
  background:rgba(255,255,255,.025);
}
.wholesale-copy { display:grid; gap:5px; }
.wholesale-copy .eyebrow { margin:0; }
.wholesale-copy > strong { font-size:22px; letter-spacing:-.02em; }
.wholesale-copy > span { color:var(--muted); font-size:12px; }
.wholesale-actions { display:flex; gap:10px; flex:0 0 auto; }
.wholesale-actions .btn { min-width:160px; }

.site-footer { border-top:1px solid rgba(255,255,255,.05); padding:30px 0 110px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-brand { display:flex; align-items:center; gap:14px; }
.footer-brand strong { display:block; font-size:15px; }
.footer-copy { display:grid; gap:4px; text-align:right; color:var(--muted); font-size:11px; }

.floating-whatsapp {
  position:fixed; right:18px; bottom:18px; z-index:75; width:58px; height:58px; display:grid; place-items:center;
  border:0; border-radius:18px; background:#25d366; color:#072311; font-size:14px; font-weight:950; cursor:pointer;
  box-shadow:0 18px 40px rgba(37,211,102,.22); transition:transform var(--speed) ease;
}
.floating-whatsapp:hover { transform:translateY(-2px); }
body.modal-open .floating-whatsapp { opacity:0; pointer-events:none; }

.empty-state {
  text-align:center; padding:72px 20px; border:1px dashed var(--line-strong); border-radius:24px;
}
.empty-state span { font-size:38px; color:var(--muted-2); }
.empty-state h3 { margin:12px 0 6px; }
.empty-state p { margin:0 0 18px; color:var(--muted); }

.modal-backdrop {
  position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:18px;
  background:rgba(0,0,0,.72); backdrop-filter:blur(8px);
}
.modal-backdrop.is-open { display:flex; }
.modal-sheet {
  position:relative; width:min(980px, 100%); max-height:min(92vh, 920px); overflow:auto;
  border:1px solid var(--line-strong); border-radius:28px; background:#0c0f13; box-shadow:0 40px 90px rgba(0,0,0,.55);
}
.modal-close {
  position:absolute; right:14px; top:14px; z-index:10; width:42px; height:42px; border:1px solid var(--line); border-radius:14px;
  background:rgba(255,255,255,.03); color:#fff; font-size:24px; cursor:pointer;
}
.modal-header { display:grid; grid-template-columns:320px 1fr; gap:20px; padding:24px 24px 12px; }
.modal-media {
  aspect-ratio:1/1; border-radius:22px; background:#050608; display:grid; place-items:center; overflow:hidden;
}
.modal-media .product-image { width:100%; height:100%; object-fit:contain; }
.modal-summary { display:flex; flex-direction:column; justify-content:flex-end; gap:14px; }
.modal-summary h3 { margin:0; font-size:42px; line-height:.95; letter-spacing:-.06em; }
.modal-facts { display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--muted); }
.modal-facts strong { color:#fff; font-size:30px; }
.modal-body { padding:12px 24px 24px; }
.modal-section { padding:18px 0 22px; border-top:1px solid var(--line); }
.step-heading { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.step-heading > span {
  width:32px; height:32px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px;
  background:rgba(255,50,50,.12); color:#ff8a8a; font-size:12px; font-weight:950;
}
.step-heading strong { display:block; font-size:15px; }
.step-heading small { display:block; color:var(--muted); font-size:12px; }
.option-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.option-card {
  min-height:80px; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:#090b0e;
  color:#fff; text-align:left; cursor:pointer; transition:all var(--speed) ease;
}
.option-card.is-selected { border-color:rgba(255,50,50,.4); background:rgba(255,50,50,.08); }
.option-card strong { display:block; font-size:14px; }
.option-card small { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.qty-box {
  display:grid; grid-template-columns:96px 1fr 96px; gap:0; overflow:hidden;
  border:1px solid var(--line); border-radius:22px; background:#090b0e;
}
.qty-btn {
  min-height:116px; border:0; background:transparent; color:#fff; font-size:52px; cursor:pointer;
}
.qty-display { display:grid; place-items:center; padding:16px 10px; border-inline:1px solid var(--line); text-align:center; }
.qty-display strong { font-size:54px; line-height:1; }
.qty-display small { margin-top:6px; color:var(--muted); font-size:18px; }
.flavor-select-row { display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:center; margin-top:10px; }
.flavor-select-row label { color:var(--muted); font-size:13px; font-weight:800; letter-spacing:.06em; }
.flavor-select-row select {
  width:100%; min-height:56px; border-radius:16px; border:1px solid var(--line);
  background:#090b0e; color:#fff; padding:0 16px; outline:none;
}
.modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-top:22px; }
.modal-note { min-height:20px; margin:12px 0 0; color:#ff9e9e; text-align:center; font-size:13px; }
.toast {
  position:fixed; left:50%; bottom:26px; z-index:120; transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  padding:12px 16px; border:1px solid var(--line-strong); border-radius:14px; background:#171a20; color:#fff;
  box-shadow:var(--shadow); transition:all .24s ease;
}
.toast.is-visible { opacity:1; transform:translate(-50%, 0); }

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns:1fr; min-height:auto; }
  .hero-visual { order:-1; }
  .product-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .modal-header { grid-template-columns:1fr; }
}

@media (max-width: 760px) {
  :root { --shell:min(100% - 20px, 1180px); --radius:20px; }
  .site-header { position:relative; }
  .header-inner { grid-template-columns:1fr auto; gap:12px; min-height:74px; }
  .brand-copy strong { font-size:14px; }
  .brand-copy small { font-size:9px; }
  .main-nav {
    position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:90; width:max-content;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
  }
  .status-pill { grid-column:2; }
  .status-pill small { display:none; }
  .hero { padding:34px 0 28px; }
  .hero-copy h1 { font-size:clamp(72px, 23vw, 110px); }
  .hero-lead { font-size:clamp(18px, 5vw, 24px); }
  .hero-actions { display:grid; grid-template-columns:1fr 1fr; }
  .service-mantra {
    margin-top:14px;
    gap:7px;
    color:var(--muted);
    font-size:9px;
    line-height:1.5;
    letter-spacing:.07em;
  }
  .service-mantra span { font-weight:700; }
  .service-mantra i { width:3px; height:3px; }
  .service-mantra strong { color:#dfe4ea; font-size:9px; font-weight:850; letter-spacing:.05em; }

  .section { padding:44px 0; }
  .section-heading { margin-bottom:18px; gap:6px; }
  .eyebrow { font-size:8px; margin-bottom:5px; }
  .section-heading h2 { font-size:42px; }
  .section-note { font-size:10px; }

  .product-grid { gap:12px; }
  .product-card {
    grid-template-columns:38% 62%;
    grid-template-rows:1fr;
    min-height:220px;
    border-radius:18px;
    content-visibility:auto;
    contain-intrinsic-size:220px;
  }
  .product-media {
    aspect-ratio:auto;
    min-height:220px;
    height:100%;
    padding:9px;
    border-right:1px solid var(--line);
  }
  .card-topline {
    top:8px;
    left:8px;
    right:8px;
    align-items:flex-start;
  }
  .badge,
  .count-pill {
    min-height:22px;
    padding:0 7px;
    font-size:7px;
    letter-spacing:.06em;
  }
  .product-image-wrap { border-radius:13px; }
  .image-fallback { font-size:34px; }
  .product-body {
    min-width:0;
    padding:13px;
    gap:9px;
  }
  .product-index { font-size:7.5px; }
  .product-title-row {
    display:block;
    min-width:0;
  }
  .product-title {
    font-size:21px;
    line-height:1;
    overflow-wrap:anywhere;
  }
  .product-price {
    display:block;
    margin-top:6px;
    font-size:19px;
  }
  .product-meta { gap:5px; }
  .meta-pill {
    padding:5px 7px;
    font-size:7px;
    letter-spacing:.05em;
  }
  .flavor-preview { gap:5px; min-width:0; }
  .flavor-preview-label { font-size:8px; }
  .flavor-chips {
    display:flex;
    flex-wrap:nowrap;
    gap:5px;
    min-height:25px;
    overflow:hidden;
  }
  .flavor-chip {
    flex:0 1 auto;
    padding:5px 7px;
    max-width:72%;
    font-size:8px;
  }
  .card-action {
    min-height:38px;
    margin-top:auto;
    padding:0 8px;
    border-radius:12px;
    font-size:8px;
  }

  .shipping-note { padding:14px 12px; border-radius:16px; }
  .shipping-note strong { font-size:11px; }
  .shipping-note span { font-size:10px; }
  .site-footer { padding-bottom:84px; }
  .footer-logo { width:34px; height:34px; }
  .footer-copy { font-size:9px; }
  .wholesale-section { padding:0 0 28px; }
  .wholesale-panel {
    flex-direction:column; align-items:stretch; gap:14px; padding:18px; border-radius:18px;
  }
  .wholesale-copy > strong { font-size:19px; }
  .wholesale-copy > span { font-size:10px; }
  .wholesale-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .wholesale-actions .btn { min-width:0; min-height:42px; padding:0 10px; font-size:8px; }
  .floating-whatsapp {
    right:12px;
    bottom:12px;
    width:46px;
    height:46px;
    border-radius:15px;
    font-size:10px;
  }

  .modal-backdrop { padding:0; align-items:flex-end; }
  .modal-sheet {
    width:100%;
    max-height:92vh;
    border-radius:22px 22px 0 0;
    border-bottom:0;
  }
  .modal-header {
    grid-template-columns:100px 1fr;
    align-items:end;
    gap:12px;
    padding:16px 16px 8px;
  }
  .modal-media { border-radius:15px; }
  .modal-summary { gap:7px; min-width:0; }
  .modal-summary h3 { font-size:24px; overflow-wrap:anywhere; }
  .modal-facts { gap:8px; font-size:9px; }
  .modal-facts strong { font-size:19px; }
  .modal-close {
    width:36px;
    height:36px;
    right:10px;
    top:10px;
    border-radius:11px;
  }
  .modal-body { padding:8px 14px 18px; }
  .modal-section { padding:14px 0 16px; }
  .step-heading { margin-bottom:10px; gap:9px; }
  .step-heading > span { width:28px; height:28px; border-radius:9px; }
  .step-heading strong { font-size:12px; }
  .step-heading small { font-size:9px; }
  .option-card { min-height:64px; padding:11px 12px; }
  .option-card strong { font-size:11px; }
  .option-card small { font-size:9px; }
  .qty-box { grid-template-columns:56px 1fr 56px; border-radius:17px; }
  .qty-btn { min-height:72px; font-size:31px; }
  .qty-display { padding:10px 7px; }
  .qty-display strong { font-size:34px; }
  .qty-display small { font-size:11px; }
  .flavor-select-row { margin-top:7px; }
  .flavor-select-row label { font-size:8px; }
  .flavor-select-row select { min-height:46px; border-radius:13px; font-size:11px; }
  .modal-actions { gap:8px; padding-top:14px; }
  .modal-actions .btn { min-height:46px; font-size:9px; }
}


/* v6.6 — mobile layout pass. 1100px intentionally catches iOS browsers using desktop-style viewport widths. */
@media (max-width: 1100px) {
  :root { --shell:min(100% - 24px, 1180px); --radius:18px; }

  .site-header {
    position:sticky;
    top:0;
    background:rgba(6,8,11,.94);
    backdrop-filter:blur(14px);
  }

  .header-inner {
    min-height:auto;
    padding:8px 0 9px;
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "brand status"
      "nav nav";
    gap:7px 10px;
  }

  .brand { grid-area:brand; gap:0; }
  .brand-logo { width:38px; height:38px; }
  .brand-copy { display:none; }

  .status-pill {
    grid-area:status;
    grid-column:auto;
    justify-self:end;
    padding:7px 10px;
    border-radius:14px;
    gap:7px;
  }
  .status-dot { width:9px; height:9px; box-shadow:none; }
  #businessStatus.is-open .status-dot,
  #businessStatus.is-closed .status-dot { box-shadow:none; }
  .status-pill strong { font-size:9px; letter-spacing:.1em; }
  .status-pill small { display:none; }

  .main-nav {
    grid-area:nav;
    position:static;
    inset:auto;
    transform:none;
    justify-self:stretch;
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
    padding:4px;
    border-radius:14px;
    box-shadow:none;
  }
  .nav-link {
    text-align:center;
    padding:9px 8px;
    border-radius:10px;
    font-size:9px;
    letter-spacing:.08em;
  }

  .hero { padding:24px 0 26px; }
  .hero-grid {
    grid-template-columns:1fr;
    min-height:auto;
    gap:18px;
  }
  .hero-copy { order:1; }
  .hero-visual {
    order:2;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    justify-items:initial;
    gap:14px;
    padding-top:2px;
  }
  .hero-logo-image {
    width:96px;
    height:96px;
    aspect-ratio:1;
    flex:0 0 auto;
  }
  .hero-sync { text-align:left; }
  .hero-sync p { margin-bottom:3px; font-size:8px; }
  .hero-sync strong { font-size:13px; }

  .hero-copy h1 {
    font-size:clamp(58px, 18vw, 78px);
    line-height:.88;
  }
  .hero-lead {
    margin-top:14px;
    font-size:16px;
    line-height:1.35;
  }
  .hero-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:18px;
  }
  .hero-actions .btn {
    min-height:44px;
    padding:0 10px;
    border-radius:13px;
    font-size:9px;
  }
  .service-mantra {
    margin-top:14px;
    display:flex;
    gap:6px;
    line-height:1.45;
    font-size:8px;
    letter-spacing:.06em;
  }
  .service-mantra strong { font-size:8px; }

  .section { padding:38px 0; }
  .section-heading {
    margin-bottom:16px;
    display:flex;
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
  }
  .section-heading h2 { font-size:40px; }
  .section-note {
    max-width:42%;
    text-align:right;
    font-size:9px;
    line-height:1.3;
  }

  .product-grid {
    grid-template-columns:1fr;
    gap:12px;
  }
  .product-card {
    grid-template-columns:34% 66%;
    grid-template-rows:1fr;
    min-height:205px;
    border-radius:17px;
    contain-intrinsic-size:205px;
  }
  .product-media {
    min-height:205px;
    height:100%;
    padding:9px;
    border-right:1px solid var(--line);
  }
  .product-image-wrap { border-radius:12px; }
  .product-image {
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .image-fallback { font-size:30px; }

  .card-topline {
    top:8px;
    left:8px;
    right:8px;
    gap:4px;
  }
  .badge,
  .count-pill {
    min-height:21px;
    padding:0 6px;
    font-size:7px;
    letter-spacing:.05em;
  }

  .product-body {
    min-width:0;
    padding:12px 12px 12px 13px;
    gap:8px;
  }
  .product-index { font-size:7px; }
  .product-title-row { display:block; }
  .product-title {
    font-size:23px;
    line-height:.96;
    overflow-wrap:normal;
    word-break:normal;
  }
  .product-price {
    display:block;
    margin-top:5px;
    font-size:20px;
  }
  .product-meta { gap:5px; }
  .meta-pill {
    padding:5px 7px;
    font-size:7px;
  }
  .flavor-preview { gap:4px; }
  .flavor-preview-label { font-size:8px; }
  .flavor-chips {
    display:flex;
    flex-wrap:nowrap;
    gap:5px;
    overflow:hidden;
  }
  .flavor-chip {
    max-width:76%;
    padding:5px 7px;
    font-size:8px;
  }
  .card-action {
    min-height:38px;
    margin-top:auto;
    padding:0 8px;
    border-radius:11px;
    font-size:8px;
  }

  .shipping-note {
    padding:13px 12px;
    border-radius:15px;
  }
  .shipping-note strong { font-size:11px; }
  .shipping-note span { font-size:9px; }

  .wholesale-section { padding:0 0 24px; }
  .wholesale-panel {
    padding:16px;
    gap:12px;
    border-radius:17px;
  }
  .wholesale-copy > strong { font-size:18px; }
  .wholesale-copy > span { font-size:9px; }
  .wholesale-actions { grid-template-columns:1fr 1fr; }
  .wholesale-actions .btn {
    min-height:40px;
    padding:0 8px;
    font-size:8px;
    border-radius:12px;
  }

  .site-footer { padding:24px 0 94px; }
  .footer-inner { align-items:flex-start; }
  .footer-brand strong { font-size:12px; }
  .footer-brand small,
  .footer-copy { font-size:8px; }

  .floating-whatsapp {
    right:12px;
    bottom:calc(74px + env(safe-area-inset-bottom));
    width:44px;
    height:44px;
    border-radius:14px;
    font-size:9px;
  }
}

@media (max-width: 420px) {
  .hero-copy h1 { font-size:58px; }
  .hero-logo-image { width:84px; height:84px; }
  .section-heading h2 { font-size:36px; }
  .product-card { grid-template-columns:33% 67%; }
  .product-title { font-size:21px; }
}


/* v6.6 hard override: one-column cards + compact header */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: 1fr !important; }
  .product-card {
    grid-template-columns: 34% 66% !important;
    grid-template-rows: 1fr !important;
    width: 100% !important;
  }
  .site-header .header-inner {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
  }
  .main-nav {
    position: static !important;
    transform: none !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}


/* v6.6 final mobile guarantee */
@media (max-width: 1100px) {
  html, body { max-width:100%; overflow-x:hidden; }
  .shell { width:calc(100% - 20px) !important; max-width:none !important; }
  .product-grid, .promo-grid {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
  }
  .product-card {
    width:100% !important;
    max-width:none !important;
    grid-template-columns:34% minmax(0,66%) !important;
  }
  .hero-logo-image { width:96px !important; height:96px !important; }
  .hero-visual { display:flex !important; align-items:center !important; justify-content:flex-start !important; }
  .main-nav { position:static !important; transform:none !important; }
}


/* v6.8 overrides */
.header-inner{grid-template-columns:1fr auto;}
.main-nav{display:none !important;}
@media (max-width: 900px){
  .header-inner{grid-template-columns:1fr auto !important;}
}