/* ==========================================================
   MMatrics Pharmaceuticals – site stylesheet (single file)
   Order: base (former style.css) → page sections → app shell
   (former app.css). Each page section is scoped to
   <body data-page="…"> with :where(), which adds no
   specificity, so every rule behaves exactly as it did when
   that page loaded its own stylesheet.
   ========================================================== */

/* ==========================================================
   MMatrics Pharmaceuticals – main stylesheet
   Full-width layout: every size is expressed in "design units"
   (--u = 1 pixel of the 749px-wide design), so the page scales
   edge-to-edge with the viewport exactly like the artwork.
   ========================================================== */

:root {
  --vw: 100vw;                     /* real content width – set by layout.js (excludes scrollbar) */
  --site: .92;                     /* share of the viewport the design occupies – leaves calm side margins */
  --u: calc(var(--vw) * var(--site) / 749);   /* desktop: fluid design unit */
  --f: clamp(1.4px, calc(var(--u) * .86), 1.7px);   /* type unit: follows layout, capped so text never gets oversized */
  --navy: #0a1f5c;
  --navy-2: #0b2458;
  --navy-btn: #062e6f;
  --navy-dark: #003b78;
  --blue: #0b5bc0;
  --blue-2: #0169c6;
  --blue-link: #0a52b5;
  --teal: #0a96a3;
  --teal-2: #038b9c;
  --pink: #f24d82;
  --red: #f2232b;
  --text: #26324b;
  --muted: #6b7488;
  --line: #e7edf5;
  --footer: #032a4d;
  --shadow-sm: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(16, 42, 92, .06);
  --shadow-md: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(16, 42, 92, .14);
  --ease: cubic-bezier(.22, .8, .26, 1);
  --gutter: calc(17 * var(--u) + var(--vw) * (1 - var(--site)) / 2);
  /* icons drawn from CSS (pseudo-elements) – same Phosphor set as js/icons.js */
  --ico-stetho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M220,160a12,12,0,1,1-12-12A12,12,0,0,1,220,160Zm-4.55,39.29A48.08,48.08,0,0,1,168,240H144a48.05,48.05,0,0,1-48-48V151.49A64,64,0,0,1,40,88V40a8,8,0,0,1,8-8H72a8,8,0,0,1,0,16H56V88a48,48,0,0,0,48.64,48c26.11-.34,47.36-22.25,47.36-48.83V48H136a8,8,0,0,1,0-16h24a8,8,0,0,1,8,8V87.17c0,32.84-24.53,60.29-56,64.31V192a32,32,0,0,0,32,32h24a32.06,32.06,0,0,0,31.22-25,40,40,0,1,1,16.23.27ZM232,160a24,24,0,1,0-24,24A24,24,0,0,0,232,160Z'/%3E%3C/svg%3E");
  --ico-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
  --ico-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM120,104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm8,88a12,12,0,1,1,12-12A12,12,0,0,1,128,192Z'/%3E%3C/svg%3E");
  --ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z'/%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  --ico-caret-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2315b1a2'%3E%3Cpath d='M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z'/%3E%3C/svg%3E");
  --ico-caret-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23fff'%3E%3Cpath d='M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z'/%3E%3C/svg%3E");
}
@media (max-width: 1099px) { :root { --u: 1.55px; --gutter: calc(17 * var(--u)); } }
:root { --sec-gap: clamp(40px, calc(30 * var(--u)), 70px); }   /* space between page sections */
@media (max-width: 767px)  { :root { --sec-gap: 40px; } }
@media (max-width: 767px)  { :root { --u: 1.75px; --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: calc(8 * var(--f));
  line-height: 1.6;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;   /* hides sideways overflow without making body a scroll container, so the sticky header works (hidden is the fallback for old browsers) */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; border: 0; background: none; color: inherit; }

/* slim scrollbars everywhere (page, drawers, lists). Chromium & Safari use the ::-webkit
   rules; Firefox only understands scrollbar-width, which would switch those rules off in
   Chromium, so it is set for Firefox alone. Rows that hide their bar keep doing so. */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c3d2e6; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #8fb0d9; }
::-webkit-scrollbar-corner { background: transparent; }
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: #c3d2e6 transparent; }
}

.container { width: 100%; padding-inline: var(--gutter); margin-inline: auto; }

/* ---------- icons: <i class="fa-…"> becomes inline SVG (js/icons.js) ----------
   zero-specificity base, so every existing size / colour rule still wins */
:where(i[class*="fa-"]) { display: inline-flex; align-items: center; justify-content: center; min-width: 1em; min-height: 1em; font-style: normal; line-height: 1; vertical-align: -.125em; flex-shrink: 0; }
i.ico > svg { display: block; flex: none; width: 1.28em; height: 1.28em; margin: -.14em; overflow: visible; }   /* Phosphor art has more padding than FA glyphs – scale up inside the same box */
i.ico .d { opacity: var(--ico-tint, .24); }          /* duotone back layer */

/* ---------- left navigation: collapsible panels + show more / less (main.js) ---------- */
[data-collapse-toggle] { cursor: pointer; }
[data-collapse-toggle] > .fa-chevron-down { transition: transform .35s var(--ease); }
.is-collapsed [data-collapse-toggle] > .fa-chevron-down { transform: rotate(-90deg); }
[data-collapse-body] { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s var(--ease), opacity .3s, visibility .4s; }
[data-collapse-body] > * { min-height: 0; overflow: hidden; padding: 0 3px 3px; margin: 0 -3px -3px; }   /* room for focus rings */
.is-collapsed [data-collapse-body] { grid-template-rows: 0fr; opacity: 0; visibility: hidden; }

[data-more]:not(.show-all) > .nav-extra:not(:has(.active, :checked, [aria-pressed="true"])) { display: none; }
[data-more].show-all > .nav-extra { animation: navIn .35s var(--ease) both; }
@keyframes navIn { from { opacity: 0; transform: translateY(-4px); } }
.nav-more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .5em;
  margin-top: calc(6 * var(--u)); padding: calc(3.5 * var(--u)) calc(8 * var(--u)) calc(3.5 * var(--u)) calc(6 * var(--u));
  border-radius: 99px; font-size: max(12.5px, calc(7.2 * var(--f))); font-weight: 700; line-height: 1.2;
  color: var(--c, var(--blue)); background: var(--c-bg, #eef5fe); transition: background-color .3s, color .3s;
}
.nav-more i { font-size: .7em; width: 1.9em; height: 1.9em; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(16,42,92,.14); transition: transform .35s var(--ease); }
.nav-more:hover { background: var(--c, var(--blue)); color: #fff; }
.nav-more:hover i { color: var(--c, var(--blue)); transform: rotate(90deg); }

/* ---------- section rhythm (all pages) ---------- */
main > section:not(:first-child) { margin-top: var(--sec-gap); }
main > nav + section:not(:first-child) { margin-top: 0; }              /* breadcrumb hugs its content */
main:not(:has(> .newsletter:last-child, > .ab-cert:last-child)) { padding-bottom: var(--sec-gap); }

/* ---------- shared bits ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(7 * var(--u));
  height: calc(26 * var(--u)); padding: 0 calc(16 * var(--u));
  border-radius: calc(4.5 * var(--u));
  font-weight: 700; font-size: calc(8.8 * var(--f)); white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s, color .35s;
  position: relative; overflow: hidden; isolation: isolate;
}
.btn::before {                       /* shine sweep */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn:hover::before { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn i, .btn-pill i, .link-arrow i, .cat-btn i, .b-more i { transition: transform .35s var(--ease); }
.btn:hover i, .btn-pill:hover i, .link-arrow:hover i, .b-more:hover i { animation: arrowNudge .8s var(--ease) infinite; }
@keyframes arrowNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

.btn-navy { background: var(--navy-btn); color: #fff; }
.btn-navy-dark { background: linear-gradient(90deg, #003b78, #0a4c94); color: #fff; }
.btn-outline { background: rgba(255,255,255,.75); color: var(--navy-btn); border: 1.5px solid #7d8fb6; }
.btn-outline:hover { background: var(--navy-btn); color: #fff; border-color: var(--navy-btn); }
.btn-blue { background: var(--blue-2); color: #fff; }
.btn-teal { background: linear-gradient(90deg, #048d9e, #0aa3ad); color: #fff; }

.eyebrow {
  display: block; color: var(--teal); font-weight: 700;
  font-size: max(12px, calc(7.6 * var(--f))); letter-spacing: .38em;
}
.sec-title { color: var(--navy); font-weight: 800; font-size: calc(18.5 * var(--f)); line-height: 1.25; letter-spacing: -.01em; }

.decor { position: absolute; pointer-events: none; z-index: 0; height: auto; }

/* ---------- accordions (FAQs on every page) ----------
   Any <details>; main.js animates the height and keeps one open per
   [data-accordion] (or per parent). .closing marks a closing item
   that is still [open] until its animation ends. */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.acc-tog {
  position: relative; flex-shrink: 0; width: calc(18 * var(--u)); height: calc(18 * var(--u)); min-width: 26px; min-height: 26px;
  border-radius: 50%; border: 1.5px solid #d3ddea; color: var(--acc, var(--blue)); background: #fff;
  transition: background-color .35s, border-color .35s, color .35s, transform .45s var(--ease);
}
.acc-tog::before, .acc-tog::after {                   /* plus, the vertical bar folds away into a minus */
  content: ""; position: absolute; left: 50%; top: 50%; width: 42%; height: 2px; border-radius: 2px;
  background: currentColor; translate: -50% -50%; transition: transform .45s var(--ease);
}
.acc-tog::after { transform: rotate(90deg); }
summary:hover .acc-tog { border-color: var(--acc, var(--blue)); }
details[open]:not(.closing) > summary .acc-tog { background: var(--acc, var(--blue)); border-color: var(--acc, var(--blue)); color: #fff; transform: rotate(180deg); }
details[open]:not(.closing) > summary .acc-tog::after { transform: rotate(0deg); }

/* ==========================================================
   HEADER
   ========================================================== */
.site-header { position: sticky; top: calc(-21 * var(--u)); z-index: 100; }
.topbar {
  background: linear-gradient(90deg, #013f76, #04548e 45%, #014977);
  color: #fff; font-size: max(13px, calc(7.6 * var(--f)));
}
.topbar-inner {
  display: flex; justify-content: space-between; align-items: center;
  height: calc(21 * var(--u)); padding-inline: calc(42 * var(--u)) calc(38 * var(--u));
}
.topbar-info, .topbar-links { display: flex; align-items: center; }
.topbar-info { gap: calc(28 * var(--u)); }
.topbar-info i { margin-right: calc(5 * var(--u)); font-size: calc(6.6 * var(--f)); }
.topbar-links li + li { border-left: 1px solid rgba(255,255,255,.35); }
.topbar-links a { display: inline-flex; align-items: center; padding: 0 calc(11 * var(--u)); opacity: .95; transition: opacity .3s; }
.topbar-links a > .fa-boxes-stacked { margin-right: calc(4 * var(--u)); font-size: calc(6.6 * var(--f)); }   /* same icon size as the info items */
.topbar-links a:hover { opacity: 1; text-decoration: underline; }
.topbar-cart { position: relative; font-size: calc(8.5 * var(--f)); translate: 0 calc(1.5 * var(--u)); }   /* sits a little low so the badge has room above it */
.topbar-links li:last-child { border-left: 0; }
.topbar li, .topbar a { white-space: nowrap; }   /* the bar always stays on one line */
.cart-badge {
  position: absolute; top: calc(-3.5 * var(--u)); right: calc(3 * var(--u));
  min-width: calc(9 * var(--u)); height: calc(9 * var(--u)); padding: 0 2px; border-radius: 99px;
  background: #ef2a4f; color: #fff; font-size: calc(5.5 * var(--f)); font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
.cart-badge.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.5); } }

.navbar { background: #fff; position: relative; transition: box-shadow .3s; }
.site-header.scrolled .navbar { box-shadow: 0 6px 24px rgba(10, 31, 92, .08); }
.navbar-inner {
  height: calc(40 * var(--u)); display: flex; align-items: center;
  padding-inline: calc(40 * var(--u)) calc(44 * var(--u));
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: calc(32 * var(--u)); width: auto; transition: transform .5s var(--ease), filter .5s; }
.logo:hover img { transform: scale(1.04); filter: drop-shadow(0 4px 10px rgba(29, 95, 200, .18)); }

.main-nav { margin-left: calc(30 * var(--u)); flex: 1; min-width: 0; }
.main-nav > ul { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); max-width: calc(500 * var(--u)); }
.main-nav > ul > li { position: relative; flex-shrink: 0; }
.main-nav > ul > li > a {
  display: flex; align-items: center; gap: calc(3 * var(--u));
  height: calc(40 * var(--u)); font-size: calc(8.4 * var(--f)); font-weight: 500; color: #24324a;
  position: relative; white-space: nowrap; transition: color .3s;
}
.main-nav > ul > li > a i { font-size: calc(4.6 * var(--f)); transition: transform .3s; }
.main-nav > ul > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(1 * var(--u));
  height: 2px; background: linear-gradient(90deg, #1d5fc8, #15b1a2); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.main-nav > ul > li > a:hover, .main-nav > ul > li > a.active { color: #0d3a8a; }
.main-nav > ul > li > a.active { font-weight: 700; }
.main-nav > ul > li > a:hover::after, .main-nav > ul > li > a.active::after { transform: scaleX(1); }
.has-drop:hover > a i { transform: rotate(180deg); }
.drop {
  position: absolute; top: 100%; left: calc(-10 * var(--u)); min-width: calc(118 * var(--u));
  background: #fff; border-radius: 0; padding: calc(6 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u));
  box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(16, 42, 92, .16), 0 0 0 1px rgba(16, 42, 92, .05);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: .3s var(--ease);
}
.drop::before {                                       /* gradient accent along the top edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #1d5fc8, #15b1a2);
}
.has-drop:hover .drop { opacity: 1; visibility: visible; transform: none; }
.drop a {                                             /* same type as the menu items */
  display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(5 * var(--u)) calc(9 * var(--u)) calc(5 * var(--u)) calc(6 * var(--u));
  font-size: calc(8.4 * var(--f)); font-weight: 500; color: #24324a; white-space: nowrap;
  transition: background-color .25s, color .25s;
}
.drop a::before {                                     /* arrow chip, as in the footer links */
  content: ""; flex: none; width: calc(11 * var(--u)); height: calc(11 * var(--u)); min-width: 18px; min-height: 18px; border-radius: 50%;
  background: var(--ico-caret-teal) center / 58% no-repeat, rgba(21, 177, 162, .12);
  transition: background .3s, transform .35s var(--ease);
}
.drop a:hover { background: #f1f6fd; color: var(--blue); }
.drop a:hover::before { background: var(--ico-caret-white) center / 58% no-repeat, linear-gradient(135deg, #1d5fc8, #15b1a2); transform: translateX(3px); }
@media (min-width: 1100px) {
  /* desktop panel: divided rows; hover grows an accent bar on the left, washes the row and slides a chevron in on the right */
  .drop {
    min-width: calc(128 * var(--u)); padding: 3px 0 0;
    border: 1px solid rgba(16, 42, 92, .06); border-top: 0;              /* the gradient bar is the top edge – no second line */
    box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(16, 42, 92, .18);
  }
  .main-nav > ul > li.has-drop:hover > a::after { transform: scaleX(0); }   /* the open panel's top bar replaces the underline */
  .drop li + li a { border-top: 1px solid #eef2f8; }
  .drop a {
    position: relative; justify-content: space-between; gap: calc(10 * var(--u));
    padding: calc(6.5 * var(--u)) calc(11 * var(--u)) calc(6.5 * var(--u)) calc(12 * var(--u));
    transition: background-color .3s, color .25s, padding-left .35s var(--ease);
  }
  .drop a::before {                                   /* accent bar */
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px; height: auto; min-width: 0; min-height: 0; border-radius: 0;
    background: linear-gradient(180deg, #1d5fc8, #15b1a2); transform: scaleY(0); transition: transform .35s var(--ease);
  }
  .drop a::after {                                    /* chevron */
    content: ""; flex: none; width: calc(7 * var(--u)); min-width: 11px; aspect-ratio: 1;
    background: var(--ico-caret-teal) center / contain no-repeat;
    opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .35s var(--ease);
  }
  .drop a:hover, .drop a.active { background: linear-gradient(90deg, #eef5fe, rgba(238, 245, 254, 0) 90%); color: #0d3a8a; padding-left: calc(16 * var(--u)); }
  .drop a.active { font-weight: 600; }
  .drop a:hover::before, .drop a.active::before { background: linear-gradient(180deg, #1d5fc8, #15b1a2); transform: scaleY(1); }
  .drop a:hover::after, .drop a.active::after { opacity: 1; transform: none; }

  /* items cascade in as the menu opens */
  .drop li { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .35s var(--ease); }
  .has-drop:hover .drop li { opacity: 1; transform: none; }
  .has-drop:hover .drop li:nth-child(2) { transition-delay: .04s; }
  .has-drop:hover .drop li:nth-child(3) { transition-delay: .08s; }
  .has-drop:hover .drop li:nth-child(4) { transition-delay: .12s; }
  .has-drop:hover .drop li:nth-child(5) { transition-delay: .16s; }
}
.m-tog { display: none; }                            /* +/- toggle, mobile menu only */
.nav-logo { display: none; }                         /* logo heading, mobile drawer only */

/* ---------- Shop mega menu (desktop only – the mobile menu keeps a plain "Shop" link) ----------
   Spans the navbar: a column per category, a featured product card and a trust strip. */
.main-nav > ul > li.has-mega { position: static; }   /* panel anchors to .navbar, not the menu item */
.has-mega:hover > a i { transform: rotate(180deg); }
.main-nav > ul > li.has-mega:hover > a::after { transform: scaleX(0); }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: #fff;
  box-shadow: 0 calc(22 * var(--u)) calc(44 * var(--u)) rgba(16, 42, 92, .16), 0 1px 0 rgba(16, 42, 92, .06);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
}
.mega::before {                                      /* gradient accent along the top edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #1d5fc8, #15b1a2);
}
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) calc(168 * var(--u)); gap: calc(22 * var(--u));
  padding: calc(18 * var(--u)) calc(44 * var(--u)) calc(16 * var(--u)) calc(40 * var(--u));
}
.mega-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega-col { padding-inline: calc(13 * var(--u)); border-left: 1px solid #eef2f8; }
.mega-col:first-child { padding-left: 0; border-left: 0; }
.mega-head { display: flex; align-items: center; gap: calc(7 * var(--u)); }
.mega-ico {
  flex: none; display: grid; place-items: center; width: calc(22 * var(--u)); aspect-ratio: 1;
  background: var(--mc-bg); color: var(--mc); font-size: calc(10 * var(--f)); transition: background-color .3s, color .3s;
}
.mega-head:hover .mega-ico { background: var(--mc); color: #fff; }
.mega-head b { display: block; font-size: calc(8.8 * var(--f)); font-weight: 700; color: var(--navy-2); line-height: 1.25; transition: color .3s; }
.mega-head small { display: block; margin-top: 1px; font-size: max(11.5px, calc(6.4 * var(--f))); color: var(--muted); font-weight: 500; }
.mega-head:hover b { color: var(--mc); }
.mega-col ul { margin-top: calc(9 * var(--u)); padding-top: calc(7 * var(--u)); border-top: 1px dashed #e3eaf4; }
.mega-col li a {                                     /* a short tick that stretches on hover */
  display: flex; align-items: center; gap: calc(5 * var(--u)); padding-block: calc(3.4 * var(--u));
  font-size: calc(7.9 * var(--f)); font-weight: 500; color: #3a4760; transition: color .25s;
}
.mega-col li a::before {
  content: ""; flex: none; width: calc(4 * var(--u)); height: 2px; background: var(--mc); opacity: .35;
  transition: width .35s var(--ease), opacity .3s;
}
.mega-col li a:hover { color: var(--mc); }
.mega-col li a:hover::before { width: calc(9 * var(--u)); opacity: 1; }
.mega-all { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); margin-top: calc(7 * var(--u)); font-size: calc(7.4 * var(--f)); font-weight: 700; color: var(--mc); }
.mega-all i, .mega-promo-go i, .mega-browse i { font-size: .9em; transition: transform .35s var(--ease); }
.mega-all:hover i, .mega-promo:hover .mega-promo-go i, .mega-browse:hover i { transform: translateX(4px); }

.mega-promo { display: flex; flex-direction: column; background: linear-gradient(150deg, #0a2a66, #041a45); color: #fff; overflow: hidden; }
.mega-promo-img { display: block; height: calc(84 * var(--u)); background: #e8f1fb 72% 50% / cover no-repeat; transition: transform .8s var(--ease); }
.mega-promo:hover .mega-promo-img { transform: scale(1.06); }
.mega-promo-body { position: relative; display: flex; flex-direction: column; gap: calc(3 * var(--u)); padding: calc(12 * var(--u)) calc(11 * var(--u)) calc(11 * var(--u)); background: inherit; }
.mega-promo-tag {
  position: absolute; left: calc(11 * var(--u)); top: 0; translate: 0 -50%; padding: calc(2.5 * var(--u)) calc(6 * var(--u));
  background: linear-gradient(90deg, #1d5fc8, #15b1a2); font-size: max(10px, calc(5.8 * var(--f))); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.mega-promo-body b { font-size: calc(9.4 * var(--f)); font-weight: 800; line-height: 1.25; }
.mega-promo-body small { font-size: max(11.5px, calc(6.6 * var(--f))); line-height: 1.45; color: rgba(255, 255, 255, .75); }
.mega-promo-go { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); margin-top: calc(3 * var(--u)); font-size: calc(7.4 * var(--f)); font-weight: 700; color: #5fe0e6; }

.mega-foot {
  display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u));
  padding: calc(8 * var(--u)) calc(44 * var(--u)) calc(8 * var(--u)) calc(40 * var(--u)); background: #f6f9fd; border-top: 1px solid #eef2f8;
}
.mega-foot ul { display: flex; gap: calc(18 * var(--u)); }
.mega-foot li { display: flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(7.2 * var(--f)); font-weight: 600; color: var(--navy-2); }
.mega-foot li i { color: #15b1a2; font-size: 1.15em; }
.mega-browse { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(7.6 * var(--f)); font-weight: 700; color: var(--blue); }
.mega-browse:hover { color: #0d3a8a; }

/* columns and the promo card rise in one after another as the panel opens */
.mega-col, .mega-promo { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .4s var(--ease); }
.has-mega:hover :is(.mega-col, .mega-promo), .has-mega:focus-within :is(.mega-col, .mega-promo) { opacity: 1; transform: none; }
.has-mega:hover .mega-col:nth-child(2) { transition-delay: .05s; }
.has-mega:hover .mega-col:nth-child(3) { transition-delay: .1s; }
.has-mega:hover .mega-col:nth-child(4) { transition-delay: .15s; }
.has-mega:hover .mega-promo { transition-delay: .2s; }
@media (max-width: 1099px) {
  .mega, .main-nav > ul > li.has-mega > a i { display: none; }
}

.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-left: calc(10 * var(--u)); flex-shrink: 0; }
.icon-btn { font-size: calc(9 * var(--f)); color: #1d2c4c; padding: 6px; transition: color .3s, transform .3s; }
.icon-btn:hover { color: var(--blue); transform: scale(1.1); }
.burger { display: none; }
.search-panel {
  position: absolute; left: 0; right: 0; top: 100%; background: #fff; box-shadow: var(--shadow-md);
  padding: calc(10 * var(--u)) 0; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .3s var(--ease);
}
.search-panel.open { opacity: 1; visibility: visible; transform: none; }
.search-form {
  display: flex; align-items: center; gap: 10px; max-width: calc(420 * var(--u)); margin: auto;
  border: 1.5px solid var(--line); border-radius: 99px; padding: 4px 4px 4px 16px;
}
.search-form i { color: var(--muted); }
.search-form input { flex: 1; border: 0; outline: 0; font-size: max(13px, calc(7.5 * var(--f))); padding: 6px 0; min-width: 0; }
.search-form button { background: var(--blue); color: #fff; border-radius: 99px; padding: 8px 20px; font-weight: 600; }

/* ---------- search suggestions (layout.js) – drop under any search form ---------- */
.has-suggest { position: relative; }
.mm-suggest {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; min-width: min(340px, 92vw);
  max-height: min(70vh, 470px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(16, 42, 92, .16);
}
.mm-suggest.open { display: block; animation: sgIn .22s var(--ease); }
@keyframes sgIn { from { opacity: 0; transform: translateY(-6px); } }
.mm-suggest i { color: inherit; font-size: inherit; }  /* the forms style their own icons; not these */
.sg-head {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a94a8;
}
.mm-suggest .sg-clear { padding: 0; border-radius: 0; background: none; color: var(--blue-link); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.mm-suggest .sg-clear:hover { text-decoration: underline; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 8px; }
.sg-opt { display: flex; align-items: center; gap: 10px; border-radius: 10px; color: var(--navy-2); transition: background-color .2s, border-color .2s, color .2s; }
.sg-opt:hover, .sg-opt[aria-selected="true"] { background: #f1f6fd; }
.sg-chip { gap: 6px; padding: 6px 12px; border-radius: 99px; background: #f4f7fb; border: 1px solid #e3eaf3; font-size: 13px; font-weight: 600; }
.mm-suggest .sg-chip i { font-size: 11px; color: var(--muted); }
.sg-chip:hover, .sg-chip[aria-selected="true"] { background: #e7f0fc; border-color: #b9d2f2; color: var(--blue); }
.sg-prod, .sg-cat { padding: 7px 8px; }
.sg-img { flex: none; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: #eceef1; }
.sg-img img { width: 100%; height: 100%; object-fit: cover; }
.sg-img img:not(.p-card-img) { object-fit: contain; mix-blend-mode: multiply; }   /* original photo when the framed card is missing */
.sg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.sg-text b, .sg-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-text b { font-size: 14px; font-weight: 700; color: var(--navy-2); }
.sg-text small { font-size: 12px; color: var(--muted); }
.sg-opt mark { background: none; color: var(--blue); font-weight: 800; }
.sg-text small mark { font-weight: 700; }
.sg-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sg-side b { font-size: 14px; font-weight: 800; color: var(--navy); }
.sg-side em { padding: 1px 6px; border-radius: 4px; background: #fde8ec; color: #d0264b; font-size: 10.5px; font-weight: 700; font-style: normal; }
.sg-cat-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #eaf2fd; color: var(--blue); font-size: 17px; }
.mm-suggest .sg-go { margin-left: auto; color: #a3afc4; font-size: 12px; transition: transform .25s var(--ease); }
.sg-opt:hover .sg-go, .sg-opt[aria-selected="true"] .sg-go { transform: translateX(3px); color: var(--blue); }
.sg-all { gap: 8px; margin-top: 4px; padding: 11px 10px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; font-size: 13.5px; color: var(--blue-link); }
.sg-all b { color: var(--navy-2); }
.sg-empty { padding: 18px 12px; text-align: center; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.mm-suggest .sg-empty i { display: block; margin: 0 auto 6px; font-size: 20px; color: #b4c0d4; }
.nav-overlay { display: none; }

/* ==========================================================
   HERO  (background is the design artwork – aspect locked)
   ========================================================== */
.hero {
  position: relative; overflow: hidden; container-type: inline-size;
  aspect-ratio: 749 / 288; background: #eaf4fd;
}
.hero > * { --h: calc(100cqw / 749); --hf: clamp(1.1px, calc(var(--h) * .9), 1.85px); }       /* hero unit: always tracks hero width */

/* ---- slider ---- */
.hero-swiper { position: absolute !important; inset: 0; }
.hero-slide { position: relative; overflow: hidden; height: 100%; }
.hero-bg {
  position: absolute; inset: 0; background-color: #eaf4fd;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: scale(1.08); transform-origin: 70% 50%;
}
.hero-slide.swiper-slide-active .hero-bg { transform: scale(1); transition: transform 7s ease-out; }  /* slow ken-burns */
.hero-bg::before {                                               /* soften banner left side for text */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(240,247,254,.78) 0%, rgba(240,247,254,.45) 34%, rgba(240,247,254,0) 52%);
}
.hero-content {
  position: absolute; left: calc(50 * var(--h)); top: calc(27 * var(--h)); width: calc(290 * var(--h));
  z-index: 2;
}
.hero-nav {
  position: absolute; z-index: 6; top: 50%; translate: 0 -50%;
  width: calc(24 * var(--h)); height: calc(24 * var(--h)); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(8 * var(--hf));
  background: rgba(255,255,255,.75); color: #0b2458; backdrop-filter: blur(6px);
  box-shadow: 0 calc(4 * var(--h)) calc(12 * var(--h)) rgba(10,40,90,.15);
  opacity: 0; transition: opacity .4s, transform .4s var(--ease), background .3s, color .3s;
}
.hero-prev { left: calc(12 * var(--h)); transform: translateX(-10px); }
.hero-next { right: calc(12 * var(--h)); transform: translateX(10px); }
.hero:hover .hero-nav { opacity: 1; transform: none; }
.hero-nav:hover { background: #0b2458; color: #fff; }
.hero-pagination {
  position: absolute; z-index: 6; left: 0 !important; right: 0; bottom: calc(10 * var(--h)) !important;
  display: flex; justify-content: center; gap: calc(5 * var(--h));
}
.hero-pagination .swiper-pagination-bullet {
  width: calc(6 * var(--h)); height: calc(6 * var(--h)); margin: 0 !important; opacity: 1;
  background: rgba(11,36,88,.25); border-radius: 99px; transition: width .5s var(--ease), background .3s;
  position: relative; overflow: hidden;
}
.hero-pagination .swiper-pagination-bullet-active { width: calc(28 * var(--h)); background: rgba(11,36,88,.2); }
.hero-pagination .swiper-pagination-bullet-active::after {   /* autoplay progress fill */
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0b2458, #10a9ab);
  transform-origin: left; animation: heroProgress var(--hero-delay, 6s) linear forwards;
}
@keyframes heroProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero:hover .hero-pagination .swiper-pagination-bullet-active::after { animation-play-state: paused; }
.hero-eyebrow {
  display: block; font-size: calc(7.6 * var(--hf)); font-weight: 700; letter-spacing: .42em;
  color: #0c8f9f; margin-bottom: calc(8 * var(--h)); white-space: nowrap;
}
.hero-title { font-weight: 800; letter-spacing: -.035em; line-height: 1.04; font-size: calc(33 * var(--hf)); }
.hero-title .line { display: block; width: max-content; max-width: 100cqw; white-space: nowrap; }
.hero-title .l1 { color: #0b1f5c; }
.hero-title .l2 {
  background: linear-gradient(90deg, #0a8f9c, #10a9ab 60%, #0a8f9c); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 6s ease-in-out infinite;
}
@keyframes gradShift { 50% { background-position: 100% 0; } }
.hero-text { margin-top: calc(7 * var(--h)); font-size: calc(9.6 * var(--hf)); line-height: 1.5; color: #1c2a44; font-weight: 500; max-width: calc(226 * var(--h)); }
.hero-btns { display: flex; gap: calc(13 * var(--h)); margin-top: calc(12 * var(--h)); }
.hero-btns .btn {
  height: calc(30 * var(--h)); font-size: calc(9 * var(--hf)); border-radius: calc(5 * var(--h)); gap: calc(8 * var(--h));
}
.hero-btns .btn { padding: 0 calc(14 * var(--h)); }
.hero-btns .btn-navy { min-width: calc(125 * var(--h)); }
.hero-btns .btn-outline { min-width: calc(119 * var(--h)); }
.hero-features {                                   /* stays fixed while slides change */
  position: absolute; z-index: 5; left: calc(35 * var(--h)); top: calc(213 * var(--h));
  display: flex; gap: calc(26 * var(--h));
}
.hf { display: flex; flex-direction: column; align-items: center; text-align: center; width: calc(48 * var(--h)); }
.hf-icon {
  width: calc(40 * var(--h)); height: calc(40 * var(--h)); border-radius: 50%; position: relative;
  display: grid; place-items: center; font-size: calc(18 * var(--hf));
  box-shadow: inset 0 0 0 calc(3 * var(--h)) rgba(255,255,255,.55), 0 calc(4 * var(--h)) calc(10 * var(--h)) rgba(30,60,120,.08);
  transition: transform .4s var(--ease);
}
.hf:hover .hf-icon { transform: translateY(-4px) rotate(-6deg); }
.hf-check { position: absolute; font-size: calc(7 * var(--hf)); color: #fff; }
.hf > span:last-child { margin-top: calc(4 * var(--h)); font-size: calc(7.8 * var(--hf)); font-weight: 700; line-height: 1.25; white-space: nowrap; }
.hf-blue .hf-icon { background: radial-gradient(circle at 35% 30%, #e8f3ff, #bcdcfb); color: #1a5ec4; }
.hf-blue > span:last-child { color: #0b2a66; }
.hf-pink .hf-icon { background: radial-gradient(circle at 35% 30%, #fff1f5, #fbd3e0); color: #ef3f74; }
.hf-pink > span:last-child { color: #d8366a; }
.hf-teal .hf-icon { background: radial-gradient(circle at 35% 30%, #effcfb, #c9efec); color: #0b8f99; }
.hf-teal > span:last-child { color: #0b8f99; }
.hf-purple .hf-icon { background: radial-gradient(circle at 35% 30%, #f4f1ff, #ddd7fb); color: #5a3fd0; }
.hf-purple > span:last-child { color: #2d2580; }


/* ==========================================================
   CATEGORY CARDS
   ========================================================== */
.categories { padding-top: 0; }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(9 * var(--u)); }
.cat-card {
  position: relative; min-height: calc(152 * var(--u)); border-radius: calc(7 * var(--u)); overflow: hidden;
  display: flex; isolation: isolate; box-shadow: var(--shadow-sm);           /* grows rather than squeezing the button */
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.cat-bg {
  position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: right center;
  transition: transform 1.1s var(--ease);
}
.cat-card::before {                   /* gradient transition */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(100deg, var(--cat-glow) 0%, transparent 60%);
  transition: opacity .6s var(--ease);
}
.cat-card::after {                    /* overlay reveal (light sweep) */
  content: ""; position: absolute; top: 0; bottom: 0; width: 60%; left: -80%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: left .9s var(--ease);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.cat-card:hover .cat-bg { transform: scale(1.08); }
.cat-card:hover::before { opacity: 1; }
.cat-card:hover::after { left: 130%; }
.cat-body {
  position: relative; z-index: 2; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
  padding: calc(11 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
}
.cat-icon {
  width: calc(41 * var(--u)); height: calc(41 * var(--u)); border-radius: 50%; display: grid; place-items: center;
  font-size: calc(19 * var(--f)); background: var(--cat-icon-bg); color: var(--cat-color);
  animation: floatY 3.6s ease-in-out infinite; transition: transform .5s var(--ease);
}
.cat-card:hover .cat-icon { transform: rotate(-12deg) scale(1.08); }
@keyframes floatY { 0%,100% { translate: 0 0; } 50% { translate: 0 calc(-4 * var(--u)); } }
.cat-title {
  margin-top: calc(11 * var(--u)); font-size: calc(11.4 * var(--f)); font-weight: 800; line-height: 1.25; color: var(--cat-title);
  transition: transform .45s var(--ease), letter-spacing .45s;
}
.cat-sub { margin-top: calc(5 * var(--u)); margin-bottom: calc(10 * var(--u)); font-size: calc(8.8 * var(--f)); line-height: 1.4; color: var(--cat-sub); transition: transform .5s var(--ease) .05s; }
.cat-card:hover .cat-title, .cat-card:hover .cat-sub { transform: translateX(calc(4 * var(--u))); }
.cat-btn {
  margin-top: auto; display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  height: calc(21 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(3.5 * var(--u));
  background: var(--cat-color-btn, var(--cat-color)); color: #fff; font-size: max(13.5px, calc(7.8 * var(--f))); font-weight: 700;
  transition: box-shadow .4s, padding .4s var(--ease);
}
.cat-card:hover .cat-btn { padding-right: calc(13 * var(--u)); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.cat-card:hover .cat-btn i { animation: arrowNudge .8s var(--ease) infinite; }
.cat-eye { --cat-color: #0a76d0; --cat-icon-bg: radial-gradient(circle at 35% 30%, #def0ff, #a9d6fb); --cat-title: #0b2458; --cat-sub: #3c4d6e; --cat-glow: rgba(10,118,208,.18); }
.cat-tab { --cat-color: #f05a22; --cat-color-btn: #f9732e; --cat-icon-bg: radial-gradient(circle at 35% 30%, #fff0e3, #fed3b3); --cat-title: #7d2a0e; --cat-sub: #8a4a33; --cat-glow: rgba(249,115,46,.18); }
.cat-vit { --cat-color: #0f8a5f; --cat-color-btn: #00947b; --cat-icon-bg: radial-gradient(circle at 35% 30%, #f3fde3, #d6f2b5); --cat-title: #0b2458; --cat-sub: #34465f; --cat-glow: rgba(0,148,123,.16); }
.cat-syr { --cat-color: #d6347f; --cat-color-btn: #d7468e; --cat-icon-bg: radial-gradient(circle at 35% 30%, #fde9f4, #f4c6e1); --cat-title: #8c1450; --cat-sub: #8a3d68; --cat-glow: rgba(215,70,142,.16); }

/* ==========================================================
   FEATURED PRODUCTS
   ========================================================== */
.featured { padding-top: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(5 * var(--u)); }
.sec-title-line {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  font-size: calc(14.6 * var(--f)); font-weight: 800; color: var(--navy-2); letter-spacing: .01em;
}
.sec-title-line::after { content: ""; width: calc(19 * var(--u)); height: 2px; background: #1d4fa0; border-radius: 2px; }
.sec-sub { margin-top: calc(1 * var(--u)); font-size: calc(8.4 * var(--f)); color: var(--muted); }
.btn-pill {
  display: inline-flex; align-items: center; gap: calc(7 * var(--u));
  height: calc(25 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 99px;
  background: #e8f1fc; color: var(--blue-link); font-weight: 700; font-size: calc(8.4 * var(--f));
  box-shadow: inset 0 0 0 1px #d6e6fa; transition: background .3s, color .3s, transform .3s;
}
.btn-pill:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }

.product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(8 * var(--u)) calc(9 * var(--u)); }
.product-card {
  position: relative; background: #fff; border-radius: calc(7 * var(--u)); border: 1px solid #eef2f7;
  padding: calc(8 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u)) calc(10 * var(--u));
  box-shadow: 0 1px calc(6 * var(--u)) rgba(16,42,92,.05); isolation: isolate; overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.product-card::before {               /* gradient transition */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(180deg, #eef6ff 0%, #fff 55%); transition: opacity .6s var(--ease);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: #dbe8f8; }
.product-card:hover::before { opacity: 1; }
.p-media { position: relative; height: calc(84 * var(--u)); display: grid; place-items: center; overflow: hidden; border-radius: calc(5 * var(--u)); }
.p-media img { height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.12); transition: transform .9s var(--ease); }
.product-card:hover .p-media img { transform: scale(1.22); }
.p-badge {
  position: absolute; z-index: 3; left: calc(5 * var(--u)); top: calc(7 * var(--u));
  height: calc(17 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: calc(5 * var(--u));
  display: inline-flex; align-items: center; color: #fff; font-weight: 700; font-size: calc(8.4 * var(--f));
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
}
.badge-red { background: linear-gradient(90deg, #f0141c, #fb3a42); }
.badge-teal { background: linear-gradient(90deg, #04888f, #10a3a7); }
.p-wish {
  position: absolute; z-index: 3; right: calc(7 * var(--u)); top: calc(8 * var(--u));
  font-size: calc(11.5 * var(--f)); color: #7a83a0; transition: color .3s, transform .3s;
}
.product-card:hover .p-wish { animation: floatY 2s ease-in-out infinite; }
.p-wish:hover, .p-wish.on { color: #ef2a4f; }
.p-wish.on i { font-weight: 900; }
.p-wish.pop { transform: scale(1.35); }
.p-name {
  margin-top: calc(5 * var(--u)); font-size: calc(9.8 * var(--f)); font-weight: 700; color: var(--navy-2); line-height: 1.3;
  transition: transform .45s var(--ease), color .3s;
}
.product-card:hover .p-name { transform: translateX(calc(3 * var(--u))); color: var(--blue); }
.p-desc { margin-top: calc(1 * var(--u)); font-size: max(12.5px, calc(7 * var(--f))); line-height: 1.45; color: var(--muted); min-height: 2.9em; }
.p-price { margin-top: calc(2 * var(--u)); font-size: calc(13.4 * var(--f)); font-weight: 800; color: var(--navy-2); line-height: 1.3; }
.p-price--sale { color: #e01d4b; }
.p-price del { color: #9aa1b3; font-weight: 700; margin-left: calc(4 * var(--u)); }
.btn-cart {
  margin-top: calc(4 * var(--u)); width: 100%; height: calc(25 * var(--u)); border-radius: calc(4 * var(--u));
  background: linear-gradient(90deg, #0457b4, #0b62c4); color: #fff; font-weight: 700; font-size: calc(8.8 * var(--f));
  display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u));
  position: relative; overflow: hidden; transition: background .4s, box-shadow .4s;
}
.btn-cart::before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #062e6f, #0b4fb3);
  transform: translateX(-101%); transition: transform .45s var(--ease);
}
.btn-cart > * , .btn-cart { z-index: 0; }
.btn-cart i { position: relative; transition: transform .45s var(--ease); }
.btn-cart:hover::before { transform: none; }
.btn-cart:hover { box-shadow: 0 8px 18px rgba(11,91,192,.3); }
.btn-cart:hover i { animation: cartRoll .9s var(--ease) infinite; }
.btn-cart { isolation: isolate; }
.btn-cart::before { z-index: -1; }
.btn-cart.added { background: linear-gradient(90deg, #00947b, #0aa38d); }
@keyframes cartRoll { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px) rotate(-8deg); } }

/* ==========================================================
   PROMO BANNERS + TRUST STRIP
   ========================================================== */
.promos { padding-top: 0; }
.promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(9 * var(--u)); }
.promo {
  position: relative; height: calc(127 * var(--u)); border-radius: calc(8 * var(--u)); overflow: hidden; isolation: isolate;
  display: flex; align-items: center; box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.promo-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: right center; transition: transform 1.2s var(--ease); }
.promo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .6s;
  background: linear-gradient(90deg, rgba(255,255,255,.55), transparent 55%);
}
.promo::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg);
  transition: left 1s var(--ease);
}
.promo:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.promo:hover .promo-bg { transform: scale(1.06); }
.promo:hover::before { opacity: 1; }
.promo:hover::after { left: 120%; }
.promo-body { padding-left: calc(23 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; }
.promo-title { font-size: calc(17.5 * var(--f)); font-weight: 800; color: #041c64; line-height: 1.3; letter-spacing: -.01em; transition: transform .5s var(--ease); }
.promo-sub { font-size: calc(16.5 * var(--f)); color: #0b2458; line-height: 1.3; transition: transform .55s var(--ease); }
.promo:hover .promo-title, .promo:hover .promo-sub { transform: translateX(calc(4 * var(--u))); }
.promo-eye .btn { margin-top: calc(10 * var(--u)); height: calc(26 * var(--u)); width: calc(111 * var(--u)); }
.promo-vit .promo-body { padding-left: calc(24 * var(--u)); margin-top: calc(-28 * var(--u)); }
.promo-vit .btn { margin-top: calc(14 * var(--u)); height: calc(30 * var(--u)); width: calc(100 * var(--u)); border-radius: calc(5 * var(--u)); }

.trust-strip {
  margin-top: calc(14 * var(--u)); height: calc(54 * var(--u));
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: linear-gradient(180deg, #f7fbfe, #eef6fb); border: 1px solid #e6f0f7; border-radius: calc(8 * var(--u));
  padding: 0 calc(10 * var(--u));
}
.trust-strip li { display: flex; align-items: center; gap: calc(9 * var(--u)); white-space: nowrap; padding-left: calc(16 * var(--u)); position: relative; }
.trust-strip li + li::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: #d9e5ee; }
.ts-icon {
  width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: #e1f5f5; color: #1fa2aa; font-size: calc(17 * var(--f)); transition: transform .5s var(--ease), background .4s, color .4s;
}
.trust-strip li:hover .ts-icon { transform: translateY(-4px) rotateY(180deg); background: #1fa2aa; color: #fff; }
.trust-strip b { display: block; color: #0b1f4f; font-size: calc(8.8 * var(--f)); line-height: 1.4; font-weight: 800; }
.trust-strip small { display: block; color: var(--muted); font-size: calc(8.2 * var(--f)); }
.trust-strip small.dark { color: #0b1f4f; font-weight: 600; }

/* ==========================================================
   ABOUT
   ========================================================== */
.about { position: relative; padding-top: 0; }
.decor-about { right: 0; top: calc(16 * var(--u)); width: calc(78 * var(--u)); }
.about-panel {
  position: relative; z-index: 1; border-radius: calc(12 * var(--u));
  background: linear-gradient(180deg, rgba(246,250,255,.85), rgba(255,255,255,.6));
  padding: calc(7 * var(--u)) calc(9 * var(--u)) calc(10 * var(--u));
}
.about-grid { display: grid; grid-template-columns: calc(318 * var(--u)) 1fr; gap: calc(24 * var(--u)); align-items: start; }
.about-media { position: relative; }
.about-img { border-radius: calc(9 * var(--u)); overflow: hidden; aspect-ratio: 318 / 172; }
.about-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.about-media:hover .about-img img { transform: scale(1.06); }
.about-badge {
  position: absolute; right: calc(1 * var(--u)); bottom: calc(-13 * var(--u)); width: calc(84 * var(--u)); aspect-ratio: 1;
  border-radius: 50%; background: rgba(240, 250, 252, .92); backdrop-filter: blur(4px);
  border: calc(2.5 * var(--u)) solid rgba(255,255,255,.95); box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(10,60,110,.15);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  color: #0b2458; animation: floatY 4s ease-in-out infinite;
}
.about-badge i { color: #13958f; font-size: calc(15 * var(--f)); margin-bottom: calc(4 * var(--u)); }
.about-badge span { font-size: calc(8.4 * var(--f)); line-height: 1.4; font-weight: 500; }
.about-text { padding-top: calc(6 * var(--u)); }
.about-text .sec-title { margin-top: calc(4 * var(--u)); font-size: calc(18.5 * var(--f)); line-height: 1.24; }
.about-text p { margin-top: calc(9 * var(--u)); font-size: calc(9.2 * var(--f)); line-height: 1.45; color: #4f5b73; max-width: calc(330 * var(--u)); }
.about-text .btn { margin-top: calc(14 * var(--u)); height: calc(28 * var(--u)); width: calc(145 * var(--u)); }
.about-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: calc(18 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u));
}
.about-stats li { display: flex; align-items: center; gap: calc(10 * var(--u)); position: relative; padding-left: calc(18 * var(--u)); }
.about-stats li:first-child { padding-left: 0; }
.about-stats li + li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: #d8e2ee; }
.as-icon {
  width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  border: 1.5px solid #bfd5ef; color: #1a5ec4; font-size: calc(13 * var(--f)); background: #fff;
  transition: transform .5s var(--ease), background .4s, color .4s;
}
.about-stats li:hover .as-icon { transform: translateY(-4px) scale(1.06); background: #1a5ec4; color: #fff; }
.about-stats b { display: block; color: #0b1f4f; font-size: calc(9.4 * var(--f)); }
.about-stats small { display: block; color: var(--muted); font-size: calc(8.6 * var(--f)); }

/* ==========================================================
   TESTIMONIALS
   ========================================================== */
.testimonials {
  position: relative; padding: calc(var(--sec-gap) * .7) 0 calc(var(--sec-gap) * .55);
  background: linear-gradient(90deg, #fff3e6 0%, #fffaf5 18%, #ffffff 45%, #fffbfd 75%, #fff2f8 100%);
}
.decor-test { right: 0; top: calc(26 * var(--u)); width: calc(40 * var(--u)); }
.test-head { position: relative; text-align: center; }
.test-head .sec-title { margin-top: calc(2 * var(--u)); }
.test-swiper { margin: calc(8 * var(--u)) calc(17 * var(--u)) 0; padding: calc(4 * var(--u)) calc(2 * var(--u)) calc(12 * var(--u)) !important; }
.test-swiper .swiper-slide { height: auto; }          /* equal-height cards */
.t-card {
  position: relative; height: 100%; display: flex; flex-direction: column;
  background: #fff; border-radius: calc(10 * var(--u)); overflow: hidden;
  padding: calc(13 * var(--u)) calc(15 * var(--u)) calc(12 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(200, 120, 150, .12); border: 1px solid #f6eef3;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.t-card::before {                   /* soft glow behind the quote badge */
  content: ""; position: absolute; left: calc(-30 * var(--u)); top: calc(-30 * var(--u)); width: calc(90 * var(--u)); height: calc(90 * var(--u));
  border-radius: 50%; background: radial-gradient(circle, rgba(247,166,195,.22), transparent 70%); pointer-events: none;
}
.t-card::after {                    /* pink folded corner */
  content: ""; position: absolute; right: 0; bottom: 0; width: calc(22 * var(--u)); height: calc(22 * var(--u));
  background: linear-gradient(135deg, transparent 50%, #fbc4d8 50%, #f7a6c3);
  border-top-left-radius: calc(6 * var(--u)); transition: width .5s var(--ease), height .5s var(--ease);
}
.t-card:hover { transform: translateY(-6px); box-shadow: 0 calc(12 * var(--u)) calc(28 * var(--u)) rgba(200, 90, 130, .18); border-color: #f7d3e1; }
.t-card:hover::after { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.t-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.t-quote {
  width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(7 * var(--u));
  background: linear-gradient(135deg, #ff86ab, #ec3f75); color: #fff; font-size: calc(9 * var(--f));
  box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(236, 63, 117, .3);
  transition: transform .5s var(--ease);
}
.t-card:hover .t-quote { transform: rotate(-8deg) scale(1.06); }
.t-stars { color: #f5a623; font-size: calc(8 * var(--f)); display: flex; gap: calc(1.5 * var(--u)); padding: calc(3 * var(--u)) calc(6 * var(--u)); border-radius: 99px; background: #fff7e8; }
.t-card p { position: relative; flex: 1; margin-top: calc(9 * var(--u)); font-size: calc(9.2 * var(--f)); line-height: 1.5; color: #3a4560; }
.t-card p b { color: #0b1f4f; font-weight: 700; }
.t-user { display: flex; align-items: center; gap: calc(9 * var(--u)); margin-top: calc(10 * var(--u)); padding-top: calc(10 * var(--u)); border-top: 1px dashed #efdbe4; }
.t-user img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fbd3e2, 0 4px 10px rgba(0,0,0,.12); }
.t-user b { display: block; color: #0b1f4f; font-size: calc(10 * var(--f)); }
.t-user small { display: flex; align-items: center; gap: .35em; color: #0f9a8c; font-weight: 600; font-size: calc(8 * var(--f)); }

/* controls under the cards: ‹ dots › – never overlaps a card */
.test-controls { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); margin-top: calc(2 * var(--u)); }
.test-controls button {
  width: calc(22 * var(--u)); height: calc(22 * var(--u)); min-width: 40px; min-height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: #0b2458; font-size: calc(8 * var(--f));
  border: 1px solid #f1e3ea; box-shadow: 0 4px 14px rgba(200, 120, 150, .16);
  transition: background-color .3s, color .3s, transform .35s var(--ease), box-shadow .3s, border-color .3s;
}
.test-controls button:hover { background: linear-gradient(135deg, #ff86ab, #ec3f75); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(236, 63, 117, .32); }
.test-prev:hover { transform: translateX(-3px); }
.test-next:hover { transform: translateX(3px); }
.test-controls .test-pagination { position: static; width: auto !important; display: flex; align-items: center; gap: calc(4 * var(--u)); }
.test-pagination .swiper-pagination-bullet { width: calc(4.5 * var(--u)); height: calc(4.5 * var(--u)); min-width: 7px; min-height: 7px; background: #e6c9d6; opacity: 1; margin: 0 !important; border-radius: 99px; transition: width .4s var(--ease), background-color .3s; }
.test-pagination .swiper-pagination-bullet-active { width: calc(16 * var(--u)); min-width: 22px; background: linear-gradient(90deg, #ff86ab, #ec3f75); }

/* ==========================================================
   BLOGS
   ========================================================== */
.blogs { position: relative; padding: 0 0 calc(10 * var(--u)); background: linear-gradient(180deg, #fffaf9, #fff 40%); }
.decor-blog-l { left: 0; top: calc(10 * var(--u)); width: calc(32 * var(--u)); }
.decor-blog-r { right: 0; top: calc(55 * var(--u)); width: calc(27 * var(--u)); }
.blog-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 calc(9 * var(--u)); }
.blog-head .eyebrow { font-size: calc(8 * var(--f)); letter-spacing: .5em; }
.blog-head .sec-title { margin-top: calc(1 * var(--u)); }
.link-arrow { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); color: var(--blue-link); font-weight: 700; font-size: calc(9 * var(--f)); margin-bottom: calc(6 * var(--u)); }
.blog-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(20 * var(--u)); margin-top: calc(3 * var(--u)); padding: 0 calc(9 * var(--u)); }
.blog-card {
  display: flex; flex-direction: column;
  background: #fff; border-radius: calc(8 * var(--u)); overflow: hidden; box-shadow: 0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(16,42,92,.08);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.b-media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.b-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.blog-card:hover .b-media img { transform: scale(1.1); }
.b-overlay {                         /* overlay reveal with gradient */
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: calc(14 * var(--f));
  background: linear-gradient(135deg, rgba(10,82,181,.7), rgba(16,169,171,.55));
  clip-path: circle(0% at 50% 50%); transition: clip-path .7s var(--ease);
}
.blog-card:hover .b-overlay { clip-path: circle(75% at 50% 50%); }
.b-float {                           /* floating icon */
  position: absolute; right: calc(6 * var(--u)); top: calc(6 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u));
  border-radius: 50%; background: #fff; color: var(--blue); display: grid; place-items: center; font-size: calc(8 * var(--f));
  box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(-10px); transition: opacity .4s, transform .5s var(--ease);
}
.blog-card:hover .b-float { opacity: 1; transform: none; animation: floatY 2.4s ease-in-out .5s infinite; }
.b-body { flex: 1; display: flex; flex-direction: column; padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u)); }
.b-body h3 { font-size: calc(9.6 * var(--f)); line-height: 1.45; font-weight: 700; color: var(--navy-2); min-height: 2.9em; transition: transform .45s var(--ease); }
.b-body h3 a { text-decoration: none; transition: color .3s; }
.blog-card:hover h3 { transform: translateX(calc(3 * var(--u))); }
.blog-card:hover h3 a { color: var(--blue); }
.b-meta {
  display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: calc(8 * var(--u));
  border-top: 1px dashed #e3e9f2; font-size: calc(8 * var(--f)); color: var(--muted);
}
.b-body h3 { margin-bottom: calc(10 * var(--u)); }
.b-meta i { margin-right: 3px; }
.b-more { color: var(--blue-link); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.blog-card:hover .b-more i { animation: arrowNudge .8s var(--ease) infinite; }

/* ==========================================================
   NEWSLETTER
   ========================================================== */
.newsletter {
  position: relative; overflow: hidden; height: calc(64 * var(--u));
  background: linear-gradient(90deg, #fcd1dc 0%, #fee1bd 13%, #fee8d5 20%, #fde7e5 27%, #f9e4f1 33%, #f3defa 40%, #f2e8fd 50%, #e8d5fe 62%, #e9e3fd 73%, #e2e8fe 82%, #dde4fa 100%);
}
.nl-leaf { position: absolute; top: 0; height: 100%; width: auto; max-width: 22%; object-fit: cover; pointer-events: none; }
.nl-leaf-l { object-position: left center; }
.nl-leaf-r { object-position: right center; }
.nl-leaf-l { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent); mask-image: linear-gradient(90deg, #000 75%, transparent); }
.nl-leaf-r { right: 0; -webkit-mask-image: linear-gradient(270deg, #000 75%, transparent); mask-image: linear-gradient(270deg, #000 75%, transparent); }
.nl-inner { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: space-between; padding-inline: calc(105 * var(--u)) calc(101 * var(--u)); }
.nl-text { display: flex; align-items: center; gap: calc(11 * var(--u)); }
.nl-icon {
  width: calc(41 * var(--u)); height: calc(41 * var(--u)); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #fde3e1 55%, #fbd2cf); color: #f8335d; font-size: calc(17 * var(--f));
  animation: floatY 3s ease-in-out infinite;
}
.nl-text h3 { color: var(--navy-2); font-weight: 800; font-size: calc(13 * var(--f)); }
.nl-text p { font-size: calc(8 * var(--f)); color: #2e3a55; font-weight: 500; }
/* held to 46–52px tall; the button sits inside the bar as a pill */
.nl-form {
  display: flex; align-items: center; gap: 6px; width: calc(262 * var(--u)); height: clamp(46px, calc(26 * var(--u)), 52px); padding: 5px;
  border-radius: 12px; box-shadow: 0 4px 16px rgba(160,100,160,.12); background: #fff;
}
.nl-form input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 10px 0 14px; font-size: 15px; color: var(--text); }
.nl-form input::placeholder { color: #7a8299; }
.nl-form button {
  flex: none; height: 100%; padding: 0 clamp(18px, calc(14 * var(--u)), 28px); border-radius: 8px; color: #fff; font-weight: 700; font-size: 15px;
  background: linear-gradient(90deg, #f03d73, #f2558a); background-size: 200% 100%; transition: background-position .5s, box-shadow .3s;
}
.nl-form button:hover { background-position: 100% 0; box-shadow: 0 6px 18px rgba(240,61,115,.35); }

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer { background: #021f3b; color: #fff; }
.footer-main {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 90% at 0% 100%, rgba(16,169,171,.16), transparent 60%),
    radial-gradient(50% 80% at 100% 0%, rgba(29,95,200,.22), transparent 60%),
    linear-gradient(180deg, #05305a 0%, #032a4d 55%, #022543 100%);
}
.footer-main::before {                /* gradient accent line on top */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #f7941d, #15b1a2 35%, #1d5fc8 70%, #f24d82);
}
.footer-main::after {                 /* faint watermark icon */
  content: ""; position: absolute; z-index: -1; right: calc(10 * var(--u)); bottom: calc(-22 * var(--u));
  width: calc(150 * var(--f)); height: calc(150 * var(--f)); background: rgba(255,255,255,.045); transform: rotate(-18deg);
  -webkit-mask: var(--ico-stetho) center / contain no-repeat; mask: var(--ico-stetho) center / contain no-repeat;
}
.footer-grid {
  display: grid; grid-template-columns: 1.35fr .8fr 1.5fr 1.15fr 2.2fr; column-gap: calc(6 * var(--u));
  padding: calc(26 * var(--u)) calc(9 * var(--u)) calc(22 * var(--u));
}
.footer-col { padding-left: calc(15 * var(--u)); position: relative; }
.footer-col + .footer-col::before {
  content: ""; position: absolute; left: 0; top: calc(2 * var(--u)); bottom: calc(2 * var(--u)); width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.14) 20%, rgba(255,255,255,.14) 80%, transparent);
}
.footer-brand { padding-left: 0; }
.footer-brand .logo { display: inline-flex; }
.footer-brand .logo img { height: auto; width: 100%; max-width: calc(142 * var(--u)); }
.footer-tag {
  margin-top: calc(10 * var(--u)); font-size: max(13px, calc(7.8 * var(--f))); color: #c9d6e6;
  padding-left: calc(8 * var(--u)); border-left: 2px solid #15b1a2;
}
.socials { display: flex; gap: calc(8 * var(--u)); margin-top: calc(13 * var(--u)); }
.socials a {
  position: relative; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: calc(9.5 * var(--f));
  box-shadow: 0 0 0 calc(2.5 * var(--u)) rgba(255,255,255,.06);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.socials a:hover { transform: translateY(-4px); box-shadow: 0 0 0 calc(3.5 * var(--u)) rgba(255,255,255,.14), 0 8px 18px rgba(0,0,0,.35); }
.s-fb { background: #1877f2; }
.s-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.s-yt { background: #ff0000; }
.s-in { background: #0a7fd0; }

.footer-col h4 {
  position: relative; font-size: calc(9.6 * var(--f)); font-weight: 700; letter-spacing: .01em;
  padding-bottom: calc(6 * var(--u)); margin-bottom: calc(10 * var(--u));
}
.footer-col h4::before, .footer-col h4::after {   /* accent underline: bar + dot */
  content: ""; position: absolute; bottom: 0; height: 2px; border-radius: 2px;
}
.footer-col h4::before { left: 0; width: calc(20 * var(--u)); background: linear-gradient(90deg, #15b1a2, #1d8fe0); }
.footer-col h4::after { left: calc(23 * var(--u)); width: calc(4 * var(--u)); background: #f7941d; }

.footer-col ul li { margin-bottom: calc(5.5 * var(--u)); font-size: calc(8.4 * var(--f)); color: #c9d6e6; }
.footer-col:not(.footer-contact) ul a {
  display: inline-flex; align-items: center; gap: calc(5 * var(--u));
  transition: color .3s, transform .35s var(--ease);
}
.footer-col:not(.footer-contact) ul a::before {   /* arrow before each menu item */
  content: ""; flex: none;
  width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%;
  background: var(--ico-caret-teal) center / 58% no-repeat, rgba(21,177,162,.12);
  transition: background .3s, color .3s, transform .35s var(--ease);
}
.footer-col:not(.footer-contact) ul a:hover { color: #fff; transform: translateX(calc(4 * var(--u))); }
.footer-col:not(.footer-contact) ul a:hover::before { background: var(--ico-caret-white) center / 58% no-repeat, #15b1a2; transform: rotate(360deg); }

.footer-contact li { display: grid; grid-template-columns: calc(20 * var(--u)) 1fr; gap: calc(8 * var(--u)); align-items: center; }
.footer-contact li:last-child { align-items: start; }
.fc-icon {
  width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(21,177,162,.22), rgba(29,95,200,.22)); border: 1px solid rgba(255,255,255,.12);
  color: #6fe0d4; font-size: calc(8 * var(--f)); transition: transform .4s var(--ease), background .3s, color .3s;
}
.footer-contact li:hover .fc-icon { transform: rotate(-12deg) scale(1.08); background: #15b1a2; color: #fff; }
.footer-contact a { transition: color .3s; }
.footer-contact a:hover { color: #fff; }
.footer-contact li > span:last-child { line-height: 1.6; font-size: calc(8 * var(--f)); }

.footer-bottom { background: #011a33; color: #a9b8cc; border-top: 1px solid rgba(255,255,255,.08); }
.footer-bottom-inner {
  min-height: calc(32 * var(--u)); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(12 * var(--u));
  padding-inline: calc(26 * var(--u)); font-size: max(13px, calc(7.6 * var(--f)));
}
.footer-bottom .credit { justify-self: end; }
.credit a {
  color: inherit; font: inherit; position: relative;   /* same size and colour as the "Designed & Developed by" text */
  background: linear-gradient(90deg, #6fe0d4, #8cc4ff) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease), color .3s;
}
.credit a:hover { color: #6fe0d4; background-size: 100% 1px; }
/* accepted payments – bottom of the Contact Us column */
.footer-pay { margin-top: calc(10 * var(--u)); padding-top: calc(10 * var(--u)); border-top: 1px dashed rgba(255,255,255,.14); }
.footer-pay-label {
  display: inline-flex; align-items: center; gap: calc(5 * var(--u)); margin-bottom: calc(7 * var(--u));
  font-size: max(12px, calc(7.2 * var(--f))); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8fe3da;
}
.footer-pay-label i { font-size: .9em; }
.payments { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--u)); }
.footer-pay .pay { padding-inline: calc(5.5 * var(--u)); }
.pay {
  display: inline-flex; align-items: center; justify-content: center; height: calc(18 * var(--u)); padding: 0 calc(7 * var(--u));
  background: #fff; border-radius: calc(4 * var(--u)); box-shadow: 0 2px 6px rgba(0,0,0,.25);
  font-weight: 800; font-size: calc(8.4 * var(--f)); line-height: 1; transition: transform .3s;
}
.pay:hover { transform: translateY(-2px); }
.pay-visa { color: #1a1f71; font-style: italic; letter-spacing: -.02em; font-size: calc(9.2 * var(--f)); }
.pay-mc i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: #eb001b; display: block; }
.pay-mc i + i { background: #f79e1b; margin-left: calc(-4 * var(--u)); mix-blend-mode: multiply; }
.pay-rupay { color: #0d3880; font-style: italic; padding-right: calc(10 * var(--u)); }
.pay-rupay b { color: #0d3880; position: relative; }
.pay-rupay b::after { content: ""; position: absolute; right: -6px; top: 1px; border-left: 5px solid #f58220; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.pay-upi { color: #5b5b5f; font-style: italic; gap: 1px; }
.pay-upi i { color: #f37021; font-size: .55em; }
.pay-paytm { color: #002e6e; letter-spacing: -.02em; }
.pay-paytm b { color: #00baf2; }
.pay-gpay { color: #5f6368; font-weight: 600; gap: 2px; }
.pay-gpay i { color: #4285f4; }   /* icons.js draws the G as an SVG in currentColor – a background-clip:text gradient left it invisible */

/* ==========================================================
   FLOATING WHATSAPP / CALL
   ========================================================== */
.float-contact {
  --fc: clamp(46px, 3.6vw, 60px);
  position: fixed; right: clamp(14px, 1.4vw, 26px); bottom: clamp(18px, 2.2vw, 36px); z-index: 105;
  display: flex; flex-direction: column; gap: 14px;
}
.fc-btn {
  position: relative; width: var(--fc); height: var(--fc); border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: calc(var(--fc) * .48);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  animation: fcIn .7s var(--ease) backwards;
  transition: transform .35s var(--ease), box-shadow .35s;
}
.fc-wa { background: #25d366; font-size: calc(var(--fc) * .52); box-shadow: 0 8px 22px rgba(18, 140, 126, .35); animation-delay: .6s; }   /* official WhatsApp green + mark */
.fc-call { background: linear-gradient(145deg, #1d8fe0, #0b4fb3); animation-delay: .8s; }
.fc-btn::before, .fc-btn::after {            /* pulsing rings */
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  background: inherit; opacity: .55; animation: fcPulse 2.2s ease-out infinite;
}
.fc-btn::after { animation-delay: 1.1s; }
.fc-btn:hover { transform: scale(1.1); box-shadow: 0 12px 28px rgba(0, 0, 0, .3); }
.fc-call i { animation: fcRing 2.4s ease-in-out infinite; }
.fc-tip {                                    /* label slides out on hover */
  position: absolute; right: calc(100% + 12px); top: 50%; translate: 0 -50%;
  white-space: nowrap; padding: 8px 14px; border-radius: 8px;
  background: #0b2458; color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-md); pointer-events: none;
  opacity: 0; transform: translateX(10px); transition: opacity .3s, transform .35s var(--ease);
}
.fc-tip::after {
  content: ""; position: absolute; left: 100%; top: 50%; translate: 0 -50%;
  border: 6px solid transparent; border-left-color: #0b2458;
}
.fc-btn:hover .fc-tip, .fc-btn:focus-visible .fc-tip { opacity: 1; transform: none; }
@keyframes fcIn { from { opacity: 0; transform: translateX(80px) scale(.6); } }
@keyframes fcPulse { to { transform: scale(1.7); opacity: 0; } }
@keyframes fcRing {
  0%, 50%, 100% { transform: rotate(0); }
  5%, 15%, 25% { transform: rotate(-14deg); }
  10%, 20%, 30% { transform: rotate(14deg); }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1099px) {
  .site-header { top: 0; }
  .topbar-info li:first-child { display: none; }
  .navbar-inner, .topbar-inner { padding-inline: var(--gutter); }
  .topbar-info { gap: 18px; }
  .topbar-links a { padding: 0 10px; }
  .burger { display: flex; flex-direction: column; gap: 5px; padding: 8px; }
  .burger span { width: 22px; height: 2px; background: #0d2a62; border-radius: 2px; transition: .3s; }
  .nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .burger span:nth-child(2) { opacity: 0; }
  .nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .main-nav {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 85vw); margin: 0; z-index: 120;
    background: #fff; padding: 80px 24px 24px; overflow-y: auto; box-shadow: var(--shadow-md);
    transform: translateX(-100%); transition: transform .45s var(--ease);
  }
  .nav-open .main-nav { transform: none; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul > li > a { height: auto; padding: 12px 0; font-size: 15px; border-bottom: 1px solid var(--line); justify-content: space-between; }
  .main-nav > ul > li > a i { font-size: 11px; }
  .main-nav > ul > li > a::after { display: none; }

  /* submenus: +/− accordion with a smooth height animation (main.js sets max-height) */
  .main-nav > ul > li.has-drop > a i { display: none; }
  .has-drop.open > a { color: #0d3a8a; font-weight: 700; border-bottom-color: transparent; }
  .m-tog {                                             /* bare +/− sign, no box */
    display: block; position: relative; flex-shrink: 0; width: 28px; height: 28px;
    color: var(--blue); transition: color .35s, transform .45s var(--ease);
  }
  .m-tog::before, .m-tog::after {                      /* plus; the vertical bar folds away into a minus */
    content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px;
    background: currentColor; translate: -50% -50%; transition: transform .45s var(--ease);
  }
  .m-tog::after { transform: rotate(90deg); }
  .has-drop > a:hover .m-tog { color: #0d3a8a; }
  .has-drop.open .m-tog { color: #0d3a8a; transform: rotate(180deg); }
  .has-drop.open .m-tog::after { transform: rotate(0deg); }
  .drop {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0;
    max-height: 0; overflow: hidden; padding: 0 0 0 4px; transition: max-height .45s var(--ease);
  }
  .has-drop.open .drop { border-bottom: 1px solid var(--line); }
  .drop li { opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .4s var(--ease); }
  .drop li:last-child { padding-bottom: 10px; }
  .has-drop.open .drop li { opacity: 1; transform: none; }
  .has-drop.open .drop li:nth-child(2) { transition-delay: .04s; }
  .has-drop.open .drop li:nth-child(3) { transition-delay: .08s; }
  .has-drop.open .drop li:nth-child(4) { transition-delay: .12s; }
  .has-drop.open .drop li:nth-child(5) { transition-delay: .16s; }
  .drop::before, .drop::after { display: none; }
  .drop a { font-size: 15px; gap: 10px; padding: 9px 10px; }
  .drop a::before { width: 22px; height: 22px; border-radius: 0; }
  .nav-overlay { display: block; position: fixed; inset: 0; background: rgba(5,20,50,.45); z-index: 110; opacity: 0; visibility: hidden; transition: .3s; }
  .nav-open .nav-overlay { opacity: 1; visibility: visible; }
  .icon-btn { font-size: 18px; }

  /* hero: text above, artwork keeps product side visible */
  .hero { aspect-ratio: auto; }
  .hero > * { --h: 1.6px; }
  .hero-swiper { position: relative !important; inset: auto; }
  .hero-slide { height: auto; }
  .hero-bg { background-color: #eef6fd; background-size: auto 56% !important; background-position: 100% 100% !important; }
  .hero-bg::before { display: none; }
  .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #eaf4fd 0%, rgba(234,244,253,0) 45%); }
  .hero-content { position: relative; left: auto; top: auto; width: auto; padding: 36px var(--gutter) 380px; }
  .hero-text { max-width: 460px; }
  .hero-nav { opacity: 1; transform: none; top: auto; bottom: 16px; translate: none; }
  .hero-features {
    position: static; justify-content: center; flex-wrap: wrap; gap: 18px;
    padding: 18px var(--gutter); background: #fff; border-bottom: 1px solid var(--line);
  }

  .cat-grid, .promo-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(5, 1fr); }
  .trust-strip { grid-template-columns: repeat(3, 1fr); height: auto; padding: 14px; row-gap: 16px; }
  .trust-strip li:nth-child(4)::before { display: none; }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .about-stats { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .about-stats li:nth-child(3) { padding-left: 0; }
  .about-stats li:nth-child(3)::before { display: none; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .newsletter { height: auto; padding: 26px 0; }
  .nl-inner { flex-direction: column; gap: 18px; padding-inline: 130px; }
  .nl-form { width: 100%; max-width: 520px; height: 50px; }   /* 50px tablet, 48px phone – inside the clamp range */
  .footer-grid { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col:nth-child(2)::before { display: none; }
  .footer-contact { grid-column: span 3; }
  .footer-contact::before { display: none; }
  .footer-col:nth-child(5) { padding-left: 0; }
  .footer-col:nth-child(2) { padding-left: 0; }
  .footer-bottom-inner { min-height: 0; padding: 18px var(--gutter); grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; }
  .footer-bottom .credit { justify-self: center; }
}

@media (max-width: 939px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .p-media { height: 170px; }
}

@media (max-width: 767px) {
  .topbar-info { gap: 14px; }
  .topbar-info li:nth-child(3), .topbar-links li:nth-child(1), .topbar-links li:nth-child(2) { display: none; }
  .topbar-links li:nth-child(3) { border-left: 0; }
  .topbar { font-size: 12.5px; }
  .topbar-inner { height: 38px; }
  .topbar-links a { padding: 0 9px; }
  .topbar-links li:last-child a { padding-right: 0; }
  /* hero: banner photo on top (products kept in frame), its lower edge fading into the text panel below */
  .hero > * { --h: 1.15px; }
  .hero-slide { display: flex; flex-direction: column; height: auto; background: linear-gradient(180deg, #f3f8fd 0%, #e8f1fc 100%); }
  .hero-content {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
    width: 100%; margin-top: -34px; padding: 0 var(--gutter) 50px;
  }
  .hero-eyebrow {
    margin-bottom: 14px; padding: 6px 13px; border-radius: 99px; background: rgba(255,255,255,.9); box-shadow: var(--shadow-sm);
    font-size: 10px; letter-spacing: .24em;
  }
  .hero-title { font-size: 34px; line-height: 1.08; }
  .hero-title .line { width: auto; white-space: normal; }
  .hero-text { margin: 10px auto 0; max-width: 34ch; font-size: 14.5px; }
  .hero-btns { width: 100%; gap: 10px; margin-top: auto; padding-top: 20px; }   /* buttons line up across slides */
  .hero-btns .btn { flex: 1; min-width: 0 !important; height: 50px; padding: 0 12px; border-radius: 12px; font-size: 14.5px; box-shadow: var(--shadow-md); }
  .hero-btns .btn-outline { background: rgba(255,255,255,.94); }
  .hero-nav { display: none; }                                     /* swipe on phones */
  .hero-pagination { bottom: 20px !important; }
  .hero-features { gap: 12px; }
  .hf { width: 70px; }
  .hf-icon { width: 54px; height: 54px; font-size: 20px; }
  .hf > span:last-child { font-size: 11.5px; }
  .hero-bg {
    position: relative; inset: auto; flex: none; width: 100%; aspect-ratio: 1.3;
    background-size: cover !important; background-position: 96% 60% !important; background-color: #f3f8fd;
  }
  .hero-bg::after {                                                /* photo melts into the panel colour */
    display: block; z-index: 1;
    background: linear-gradient(180deg, rgba(243,248,253,0) 52%, rgba(243,248,253,.75) 80%, #f3f8fd 100%);
  }

  .cat-grid, .promo-grid, .blog-grid { grid-template-columns: 1fr; }
  .cat-card { min-height: 220px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .p-media { height: 150px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .promo { height: 200px; }
  .promo-bg { background-position: 70% center; }
  .promo-body { background: linear-gradient(90deg, rgba(255,255,255,.7), transparent); padding-block: 12px; }
  .promo-vit .promo-body { margin-top: 0; }
  .trust-strip { grid-template-columns: 1fr 1fr; }
  .trust-strip li::before { display: none; }
  .trust-strip li { padding-left: 0; white-space: normal; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-badge { width: 120px; right: 10px; }
  .about-stats { grid-template-columns: 1fr; }
  .about-stats li { padding-left: 0 !important; }
  .about-stats li::before { display: none; }
  .decor-about, .decor-test, .decor-blog-l, .decor-blog-r { opacity: .5; }
  .test-head { text-align: left; }
  .test-swiper { padding-inline: 2px !important; }
  .blog-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .nl-inner { padding-inline: 16px; }
  .nl-leaf { opacity: .35; }
  .nl-form { height: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-contact { grid-column: 1 / -1; padding-left: 0; }
  .footer-col:nth-child(3) { padding-left: 0; }
  .footer-col::before { display: none; }
  .footer-col:nth-child(3)::before { display: none; }
  .footer-col:nth-child(4) { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================
   CART DRAWER  (slides in from the right – js/layout.js)
   ========================================================== */
.cart-drawer-wrap { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.cart-drawer-wrap.open { pointer-events: auto; }
.cart-overlay {
  position: absolute; inset: 0; background: rgba(5, 20, 50, .45); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .45s ease;
}
.cart-drawer-wrap.open .cart-overlay { opacity: 1; }
.cart-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw);
  display: flex; flex-direction: column; background: #fff; outline: 0;
  box-shadow: -18px 0 50px rgba(5, 20, 50, .22);
  transform: translateX(105%); transition: transform .55s cubic-bezier(.22, .9, .24, 1);
}
.cart-drawer-wrap.open .cart-drawer { transform: none; }
.cart-lock { overflow: hidden; }

.cd-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, #013f76, #04548e);
  color: #fff;
}
.cd-head h2 { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.cd-count { font-weight: 600; opacity: .85; }
.cd-close {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 17px;
  background: rgba(255, 255, 255, .14); transition: background .3s, transform .4s var(--ease);
}
.cd-close:hover { background: rgba(255, 255, 255, .28); transform: rotate(90deg); }

.cd-list { flex: 1; overflow-y: auto; padding: 8px 20px; overscroll-behavior: contain; }
.cd-item {
  position: relative; display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid #edf1f6; max-height: 200px;
  transition: max-height .32s ease, padding .32s ease, opacity .25s ease, transform .32s ease, background .3s;
}
/* rows stagger in only as the drawer opens, not on every quantity change */
.cd-list.animate .cd-item { animation: cdIn .5s var(--ease) backwards; animation-delay: calc(.12s + var(--i, 0) * 60ms); }
@keyframes cdIn { from { opacity: 0; translate: 40px 0; } }
.cd-item.just-added { animation: cdFlash 1.6s ease .5s; }
.cd-list.animate .cd-item.just-added { animation: cdIn .5s var(--ease) backwards calc(.12s + var(--i, 0) * 60ms), cdFlash 1.6s ease .6s; }
@keyframes cdFlash { 0%, 100% { background: transparent; } 25% { background: #e7f6ef; } }
.cd-item.removing { opacity: 0; transform: translateX(60px); max-height: 0; padding-block: 0; overflow: hidden; }
.cd-img {
  width: 74px; height: 74px; border-radius: 10px; overflow: hidden; background: #f3f6fa; border: 1px solid #e6edf5;
}
.cd-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.cd-item:hover .cd-img img { transform: scale(1.08); }
.cd-info { min-width: 0; }
.cd-name { display: block; font-size: 15px; font-weight: 700; color: var(--navy-2); line-height: 1.3; transition: color .3s; }
.cd-name:hover { color: var(--blue); }
.cd-info small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.cd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.cd-qty { display: inline-flex; align-items: center; height: 32px; border: 1px solid #d5dfec; border-radius: 8px; overflow: hidden; }
.cd-qty button { width: 30px; height: 100%; font-size: 11px; color: var(--navy-2); transition: background .25s; }
.cd-qty button:hover { background: #eef4fb; }
.cd-qty span { min-width: 30px; text-align: center; font-weight: 700; font-size: 14px; color: var(--navy-2); }
.cd-line { font-size: 15px; font-weight: 800; color: var(--navy); }
.cd-remove {
  align-self: start; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: #8a94a8; font-size: 14px; transition: color .3s, background .3s;
}
.cd-remove:hover { color: #d0264b; background: #fde8ec; }

.cd-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 10px; color: var(--muted); }
.cd-empty-ico {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px;
  background: #eaf2fd; color: var(--blue); font-size: 30px; animation: floatY 3s ease-in-out infinite;
}
.cd-empty b { font-size: 18px; color: var(--navy-2); }
.cd-empty p { margin-top: 4px; font-size: 14px; }

.cd-foot { padding: 16px 20px 20px; border-top: 1px solid var(--line); background: #f8fbfe; }
.cd-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: var(--navy-2); font-weight: 600; }
.cd-total b { font-size: 22px; font-weight: 800; color: var(--navy); }
.cd-note { margin: 4px 0 14px; font-size: 12.5px; color: var(--muted); }
.cd-btn { width: 100%; height: 48px; font-size: 15px; border-radius: 8px; }
.cd-btn .fa-whatsapp { font-size: 19px; }
.cd-continue { display: block; width: 100%; margin-top: 10px; padding: 8px; font-size: 14px; font-weight: 600; color: var(--blue-link); }
.cd-continue:hover { text-decoration: underline; }
@media (max-width: 399px) {
  .topbar-links li:nth-child(3) { display: none; }          /* My Account – keeps phone, wishlist and cart on one line */
  .topbar-links li:nth-child(4) { border-left: 0; }
}
@media (max-width: 374px) {                                  /* small phones (iPhone SE 1st gen, older Androids) */
  .hero-title { font-size: 30px; }
  .hero-btns { gap: 8px; }
  .hero-btns .btn { padding: 0 8px; gap: 6px; font-size: 13.5px; }
}

/* ==========================================================
   Shared helpers used by several pages
   ========================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } }

/* no pinch / double-tap zoom on touch screens (with layout.js).
   Selection / long-press / copy blocking follows the admin settings – see body.no-copy in _Layout.cshtml */
html { touch-action: pan-x pan-y; }

/* ##########################################################
   PAGE: shop  ·  scope body[data-page="home" | "shop"]
   ########################################################## */
/* ==========================================================
   MMatrics Pharmaceuticals – shop (products.html) and
   product details (product.html). Follows the base section and
   uses the same design unit (--u) and tokens.
   ========================================================== */

:where(body[data-page=home], body[data-page=shop]) select { font: inherit; }

/* category tones (pills, sidebar icons, highlight tiles) */
:where(body[data-page=home], body[data-page=shop]) .tone-blue   { --tone: #0a6fc9; --tone-bg: #e7f2fd; --tone-soft: #f2f8fe; }
:where(body[data-page=home], body[data-page=shop]) .tone-orange { --tone: #e85d1f; --tone-bg: #fff0e6; --tone-soft: #fff7f1; }
:where(body[data-page=home], body[data-page=shop]) .tone-green  { --tone: #0d8a5f; --tone-bg: #e5f6ee; --tone-soft: #f2faf6; }
:where(body[data-page=home], body[data-page=shop]) .tone-pink   { --tone: #d6347f; --tone-bg: #fde9f3; --tone-soft: #fef5f9; }
:where(body[data-page=home], body[data-page=shop]) .tone-navy   { --tone: #0b3e8f; --tone-bg: #e8eef9; --tone-soft: #f4f7fc; }

/* product photos: fade in; phone screenshots get their black bars cropped */
:where(body[data-page=home], body[data-page=shop]) img.js-fit { opacity: 0; transition: opacity .45s ease, transform .9s var(--ease); }
:where(body[data-page=home], body[data-page=shop]) img.js-fit.loaded { opacity: 1; }
:where(body[data-page=home], body[data-page=shop]) img.is-shot { clip-path: inset(15.6% 0 15% 0 round 6px); }
:where(body[data-page=home], body[data-page=shop]) .img-missing { background: #f1f5fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b7c3d6'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") center / 30% no-repeat !important; }

/* ---------- breadcrumb ---------- */
:where(body[data-page=home], body[data-page=shop]) .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--u)); padding: calc(8 * var(--u)) 0; font-size: max(13px, calc(7.4 * var(--f))); color: var(--muted); }
:where(body[data-page=home], body[data-page=shop]) .crumbs li { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .crumbs li + li::before {
  content: ""; width: calc(5 * var(--f)); height: calc(5 * var(--f)); min-width: 8px; min-height: 8px; color: #9aa6bb;
  background: currentColor; -webkit-mask: var(--ico-chevron) center / contain no-repeat; mask: var(--ico-chevron) center / contain no-repeat;
}
:where(body[data-page=home], body[data-page=shop]) .crumbs a { color: #3c4a66; transition: color .3s; }
:where(body[data-page=home], body[data-page=shop]) .crumbs a:hover { color: var(--blue); }
:where(body[data-page=home], body[data-page=shop]) .crumbs li:last-child { color: var(--navy-2); font-weight: 600; }
:where(body[data-page=home], body[data-page=shop]) .crumbs i.fa-house { color: var(--navy-2); margin-right: 2px; }

/* ==========================================================
   SHOP BANNER
   ========================================================== */
:where(body[data-page=home], body[data-page=shop]) .shop-hero { position: relative; overflow: hidden; isolation: isolate; min-height: calc(132 * var(--u)); display: flex; align-items: center; background: #eef5fe; }
:where(body[data-page=home], body[data-page=shop]) .shop-hero-bg {                    /* artwork on the right, never stretched past its own size – keeps it sharp */
  position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: 64%;
  background: #eaf3fd url(../uploads/banners/home-slide-2.webp?v=979b2549c1) right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%); mask-image: linear-gradient(90deg, transparent 0, #000 32%);
  animation: heroDrift 18s ease-in-out infinite alternate;
}
:where(body[data-page=home], body[data-page=shop]) .shop-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, #eef5fe 0%, rgba(238,245,254,.96) 34%, rgba(238,245,254,.6) 52%, rgba(238,245,254,0) 68%);
}
@keyframes heroDrift { to { transform: scale(1.05); } }
:where(body[data-page=home], body[data-page=shop]) .shop-hero-inner { position: relative; z-index: 1; padding-block: calc(16 * var(--u)); padding-left: calc(32 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .shop-hero-title {
  display: flex; align-items: center; gap: calc(9 * var(--u));
  font-size: calc(32 * var(--f)); font-weight: 800; color: var(--navy); letter-spacing: -.03em; line-height: 1.1;
  animation: fadeUp .8s var(--ease) both;
}
:where(body[data-page=home], body[data-page=shop]) .shop-hero-title i { color: #10a37a; font-size: .72em; transform: rotate(-20deg); }
:where(body[data-page=home], body[data-page=shop]) .shop-hero-text { margin-top: calc(6 * var(--u)); max-width: calc(300 * var(--u)); font-size: calc(10.4 * var(--f)); color: #23314f; line-height: 1.45; animation: fadeUp .8s var(--ease) .1s both; }
:where(body[data-page=home], body[data-page=shop]) .shop-hero-feats { display: flex; flex-wrap: wrap; gap: calc(20 * var(--u)); margin-top: calc(12 * var(--u)); animation: fadeUp .8s var(--ease) .2s both; }
:where(body[data-page=home], body[data-page=shop]) .shop-hero-feats li { display: flex; align-items: center; gap: calc(7 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .shf-ico {
  width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: #fff; color: #0b5bc0; font-size: calc(10 * var(--f)); box-shadow: 0 0 0 1.5px #bcd6f3;
}
:where(body[data-page=home], body[data-page=shop]) .shop-hero-feats b { display: block; font-size: calc(8 * var(--f)); color: var(--navy-2); }
:where(body[data-page=home], body[data-page=shop]) .shop-hero-feats small { display: block; font-size: max(13px, calc(7 * var(--f))); color: var(--muted); }

/* ==========================================================
   SHOP LAYOUT
   ========================================================== */
:where(body[data-page=home], body[data-page=shop]) .shop-layout { display: grid; grid-template-columns: calc(146 * var(--u)) 1fr; gap: calc(12 * var(--u)); align-items: start; padding-bottom: calc(14 * var(--u)); }

/* ---------- sidebar ---------- */
:where(body[data-page=home], body[data-page=shop]) .shop-side {
  position: sticky; top: calc(48 * var(--u));
  background: #fff; border: 1px solid #e7edf5; border-radius: calc(7 * var(--u));
  padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u)); box-shadow: var(--shadow-sm);
}
:where(body[data-page=home], body[data-page=shop]) .shop-side:has(.mm-suggest.open) { z-index: 20; }    /* sticky makes its own layer: lift it so suggestions sit over the product grid */
:where(body[data-page=home], body[data-page=shop]) .side-head { display: none; }
:where(body[data-page=home], body[data-page=shop]) .side-apply { display: none !important; }
:where(body[data-page=home], body[data-page=shop]) .side-search {
  display: flex; align-items: center; gap: calc(5 * var(--u)); height: calc(24 * var(--u));
  border: 1px solid #dbe4ef; border-radius: calc(5 * var(--u)); padding: 0 calc(7 * var(--u)); transition: border-color .3s, box-shadow .3s;
}
:where(body[data-page=home], body[data-page=shop]) .side-search:focus-within { border-color: #7fb0e8; box-shadow: 0 0 0 3px rgba(11,91,192,.1); }
:where(body[data-page=home], body[data-page=shop]) .side-search i { color: var(--muted); font-size: calc(7.5 * var(--f)); }
:where(body[data-page=home], body[data-page=shop]) .side-search input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: max(13px, calc(7.6 * var(--f))); background: transparent; color: var(--text); }
:where(body[data-page=home], body[data-page=shop]) .f-group { padding-top: calc(11 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .f-group + .f-group { margin-top: calc(9 * var(--u)); border-top: 1px solid #edf1f6; }
:where(body[data-page=home], body[data-page=shop]) .f-group h3 { font-size: calc(10 * var(--f)); font-weight: 800; color: var(--navy-2); }
:where(body[data-page=home], body[data-page=shop]) .f-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left;
  font: inherit; color: inherit; transition: color .3s;
}
:where(body[data-page=home], body[data-page=shop]) .f-toggle i {
  font-size: .62em; width: 2em; height: 2em; border-radius: 50%; color: var(--muted); background: #f2f6fb;
  transition: transform .35s var(--ease), background-color .3s, color .3s;
}
:where(body[data-page=home], body[data-page=shop]) .f-toggle:hover { color: var(--blue); }
:where(body[data-page=home], body[data-page=shop]) .f-toggle:hover i { background: #e6f0fc; color: var(--blue); }
:where(body[data-page=home], body[data-page=shop]) .f-body > .f-inner { padding-top: calc(6 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .f-group.is-collapsed { padding-bottom: 0; }

:where(body[data-page=home], body[data-page=shop]) .f-cats li + li { margin-top: calc(2 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .f-cat {
  width: 100%; display: flex; align-items: center; gap: calc(7 * var(--u)); text-align: left;
  padding: calc(4.5 * var(--u)) calc(6 * var(--u)); border-radius: calc(5 * var(--u));
  font-size: max(13px, calc(7.8 * var(--f))); color: #34425f; transition: background .3s, color .3s;
}
:where(body[data-page=home], body[data-page=shop]) .f-cat:hover { background: #f3f7fc; color: var(--blue); }
:where(body[data-page=home], body[data-page=shop]) .f-cat.active { background: #e9f2fd; color: #0b4fb3; font-weight: 700; }
:where(body[data-page=home], body[data-page=shop]) .f-cat-ico {
  width: calc(17 * var(--u)); height: calc(17 * var(--u)); border-radius: calc(4 * var(--u)); flex-shrink: 0;
  display: grid; place-items: center; background: var(--tone-bg); color: var(--tone); font-size: calc(8 * var(--f));
  transition: transform .4s var(--ease);
}
:where(body[data-page=home], body[data-page=shop]) .f-cat:hover .f-cat-ico { transform: rotate(-10deg) scale(1.08); }
:where(body[data-page=home], body[data-page=shop]) .f-cat-name { flex: 1; }
:where(body[data-page=home], body[data-page=shop]) .f-cat-num { font-size: max(12px, calc(7.2 * var(--f))); color: var(--muted); font-weight: 600; }

:where(body[data-page=home], body[data-page=shop]) .f-list li + li { margin-top: calc(4 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .f-check { display: flex; align-items: center; gap: calc(6 * var(--u)); cursor: pointer; font-size: max(13px, calc(7.8 * var(--f))); color: #34425f; }
:where(body[data-page=home], body[data-page=shop]) .f-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
:where(body[data-page=home], body[data-page=shop]) .f-box {
  width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(2.5 * var(--u)); flex-shrink: 0;
  border: 1.5px solid #b9c5d6; display: grid; place-items: center; color: #fff; font-size: calc(6 * var(--f));
  transition: background .25s, border-color .25s, transform .25s;
}
:where(body[data-page=home], body[data-page=shop]) .f-box i { transform: scale(0); transition: transform .25s var(--ease); }
:where(body[data-page=home], body[data-page=shop]) .f-check:hover .f-box { border-color: var(--blue); }
:where(body[data-page=home], body[data-page=shop]) .f-check input:checked + .f-box { background: var(--blue); border-color: var(--blue); }
:where(body[data-page=home], body[data-page=shop]) .f-check input:checked + .f-box i { transform: scale(1); }
:where(body[data-page=home], body[data-page=shop]) .f-check input:focus-visible + .f-box { outline: 2px solid #7fb0e8; outline-offset: 2px; }
:where(body[data-page=home], body[data-page=shop]) .f-num { color: var(--muted); font-size: .92em; }
:where(body[data-page=home], body[data-page=shop]) .f-empty { font-size: max(14px, calc(7.4 * var(--f))); color: var(--muted); }

:where(body[data-page=home], body[data-page=shop]) .price-out { font-size: calc(8.4 * var(--f)); font-weight: 600; color: var(--navy-2); }
:where(body[data-page=home], body[data-page=shop]) .price-track { position: relative; height: calc(14 * var(--u)); margin-top: calc(4 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .price-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(3 * var(--u)); transform: translateY(-50%); border-radius: 9px;
  background: linear-gradient(90deg, #d8e1ec var(--from, 0%), #0b3e8f var(--from, 0%) var(--to, 100%), #d8e1ec var(--to, 100%));
}
:where(body[data-page=home], body[data-page=shop]) .price-track input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
:where(body[data-page=home], body[data-page=shop]) .price-track input::-webkit-slider-runnable-track { background: none; border: 0; }
:where(body[data-page=home], body[data-page=shop]) .price-track input::-moz-range-track { background: none; border: 0; }
:where(body[data-page=home], body[data-page=shop]) .price-track input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; cursor: grab;
  width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%;
  background: #0b3e8f; border: 2.5px solid #fff; box-shadow: 0 1px 6px rgba(11,36,88,.35); transition: transform .2s;
}
:where(body[data-page=home], body[data-page=shop]) .price-track input::-moz-range-thumb {
  pointer-events: auto; cursor: grab; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%;
  background: #0b3e8f; border: 2.5px solid #fff; box-shadow: 0 1px 6px rgba(11,36,88,.35);
}
:where(body[data-page=home], body[data-page=shop]) .price-track input:active::-webkit-slider-thumb { transform: scale(1.2); cursor: grabbing; }
:where(body[data-page=home], body[data-page=shop]) .price-track input:focus-visible::-webkit-slider-thumb { outline: 2px solid #7fb0e8; outline-offset: 2px; }
:where(body[data-page=home], body[data-page=shop]) .price-scale { display: flex; justify-content: space-between; font-size: max(13px, calc(7 * var(--f))); color: var(--muted); }

:where(body[data-page=home], body[data-page=shop]) .btn-clear {
  margin-top: calc(14 * var(--u)); width: 100%; height: calc(25 * var(--u)); border-radius: calc(5 * var(--u));
  border: 1.5px solid #0b4fb3; color: #0b4fb3; font-weight: 700; font-size: calc(8.2 * var(--f)); transition: background .3s, color .3s;
}
:where(body[data-page=home], body[data-page=shop]) .btn-clear:hover { background: #0b4fb3; color: #fff; }
:where(body[data-page=home], body[data-page=shop]) .side-overlay { display: none; }

/* ---------- toolbar ---------- */
:where(body[data-page=home], body[data-page=shop]) .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); min-height: calc(28 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .shop-count { font-size: calc(8.2 * var(--f)); color: #3c4a66; }
:where(body[data-page=home], body[data-page=shop]) .shop-count b { color: var(--navy-2); }
:where(body[data-page=home], body[data-page=shop]) .shop-tools { display: flex; align-items: center; gap: calc(5 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .sort-wrap { position: relative; display: block; }
:where(body[data-page=home], body[data-page=shop]) .sort-wrap select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  height: calc(23 * var(--u)); padding: 0 calc(22 * var(--u)) 0 calc(9 * var(--u));
  border: 1px solid #dbe4ef; border-radius: calc(4.5 * var(--u)); background: #fff; color: var(--navy-2);
  font-size: max(13px, calc(7.6 * var(--f))); font-weight: 500; transition: border-color .3s;
}
:where(body[data-page=home], body[data-page=shop]) .sort-wrap select:hover, :where(body[data-page=home], body[data-page=shop]) .sort-wrap select:focus { border-color: #7fb0e8; outline: 0; }
:where(body[data-page=home], body[data-page=shop]) .sort-wrap i { position: absolute; right: calc(8 * var(--u)); top: 50%; transform: translateY(-50%); font-size: calc(5.5 * var(--f)); color: var(--muted); pointer-events: none; }
:where(body[data-page=home], body[data-page=shop]) .view-btn {
  width: calc(23 * var(--u)); height: calc(23 * var(--u)); border-radius: calc(4.5 * var(--u)); border: 1px solid #dbe4ef;
  color: #7a86a0; font-size: calc(8.5 * var(--f)); display: grid; place-items: center; transition: .3s;
}
:where(body[data-page=home], body[data-page=shop]) .view-btn:hover { color: var(--blue); border-color: #7fb0e8; }
:where(body[data-page=home], body[data-page=shop]) .view-btn.active { color: var(--blue); border-color: var(--blue); background: #eef5fe; }
:where(body[data-page=home], body[data-page=shop]) .filter-toggle { display: none; }

:where(body[data-page=home], body[data-page=shop]) .chips { display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .chips:not(:empty) { margin: calc(4 * var(--u)) 0 calc(6 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .chip {
  display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(17 * var(--u)); padding: 0 calc(7 * var(--u));
  border-radius: 99px; background: #e9f2fd; color: #0b4fb3; font-size: max(12px, calc(7.2 * var(--f))); font-weight: 600; transition: .3s;
  animation: chipIn .35s var(--ease) backwards;
}
:where(body[data-page=home], body[data-page=shop]) .chip i { font-size: .85em; }
:where(body[data-page=home], body[data-page=shop]) .chip:hover { background: #0b4fb3; color: #fff; }
:where(body[data-page=home], body[data-page=shop]) .chip-clear { background: none; color: #d0264b; text-decoration: underline; }
:where(body[data-page=home], body[data-page=shop]) .chip-clear:hover { background: #fde8ec; color: #d0264b; }
@keyframes chipIn { from { opacity: 0; scale: .8; } }

/* ==========================================================
   PRODUCT CARDS (grid + list)
   ========================================================== */
:where(body[data-page=home], body[data-page=shop]) .shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .shop-card { display: flex; flex-direction: column; padding: calc(7 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); animation: cardIn .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes cardIn { from { opacity: 0; translate: 0 18px; } }
:where(body[data-page=home], body[data-page=shop]) .shop-card .p-media {
  height: calc(112 * var(--u)); margin-top: calc(4 * var(--u));
  background: radial-gradient(circle at 50% 40%, #fff 0%, #f4f7fb 70%);
}
/* absolutely centred: a % height doesn't resolve against the media box's auto grid row */
:where(body[data-page=home], body[data-page=shop]) .shop-card .p-media img { position: absolute; inset: 0; margin: auto; height: 92%; width: auto; max-width: 96%; object-fit: contain; transform: scale(1); }
:where(body[data-page=home], body[data-page=shop]) .shop-card:hover .p-media img { transform: scale(1.07); }
:where(body[data-page=home], body[data-page=shop]) .shop-card .p-media img.is-shot { transform: scale(1.38); }
:where(body[data-page=home], body[data-page=shop]) .shop-card:hover .p-media img.is-shot { transform: scale(1.46); }
/* framed card images carry their own backdrop: fill the box edge to edge so nothing mismatched shows */
:where(body[data-page=home], body[data-page=shop]) .shop-card .p-media img.p-card-img { width: 100%; height: 100%; max-width: none; object-fit: cover; mix-blend-mode: normal; }
:where(body[data-page=home], body[data-page=shop]) .shop-card .p-media:has(.p-card-img) { background: #e9ebee; }
/* product page & quick view: framed square images fill the stage and thumbnails */
:where(body[data-page=home], body[data-page=shop]) .pd-main.p-card-img, :where(body[data-page=home], body[data-page=shop]) .qv-main.p-card-img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
:where(body[data-page=home], body[data-page=shop]) .pd-stage:has(.p-card-img), :where(body[data-page=home], body[data-page=shop]) .qv-stage:has(.p-card-img), :where(body[data-page=home], body[data-page=shop]) .pd-thumb:has(.p-card-img), :where(body[data-page=home], body[data-page=shop]) .qv-thumb:has(.p-card-img) { background: #eceef1; }
:where(body[data-page=home], body[data-page=shop]) .p-media-link { position: absolute; inset: 0; display: block; }
:where(body[data-page=home], body[data-page=shop]) .shop-card .p-wish, :where(body[data-page=home], body[data-page=shop]) .shop-card .p-qv {  /* white chips: readable on any photo backdrop */
  z-index: 4; top: calc(15 * var(--u)); right: calc(13 * var(--u));
  width: calc(17 * var(--u)); height: calc(17 * var(--u)); min-width: 30px; min-height: 30px; border-radius: 50%;
  /* flex, not grid: iOS Safari didn't centre a grid <button> reliably, and the default 1px 6px button padding skewed it */
  display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; -webkit-appearance: none; appearance: none;
  font-size: calc(9 * var(--f));
  background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(16, 42, 92, .15); backdrop-filter: blur(4px);
}
/* quick view sits under the heart: slides in on hover / focus, always shown on touch screens */
:where(body[data-page=home], body[data-page=shop]) .shop-card .p-qv {
  position: absolute; top: calc(15 * var(--u) + max(17 * var(--u), 30px) + 6px); color: var(--navy-2);
  opacity: 0; transform: translateX(8px); transition: opacity .35s, transform .4s var(--ease), background-color .3s, color .3s;
}
:where(body[data-page=home], body[data-page=shop]) .shop-card:hover .p-qv, :where(body[data-page=home], body[data-page=shop]) .shop-card:focus-within .p-qv { opacity: 1; transform: none; }
:where(body[data-page=home], body[data-page=shop]) .shop-card .p-qv:hover { background: var(--blue); color: #fff; }
@media (hover: none) {
  :where(body[data-page=home], body[data-page=shop]) .shop-card .p-qv { opacity: 1; transform: none; }
}
:where(body[data-page=home], body[data-page=shop]) .p-body { display: flex; flex-direction: column; flex: 1; }
:where(body[data-page=home], body[data-page=shop]) .shop-card .p-name { font-size: calc(9.6 * var(--f)); }
:where(body[data-page=home], body[data-page=shop]) .shop-card .p-name a { transition: color .3s; }
:where(body[data-page=home], body[data-page=shop]) .shop-card .p-desc {
  font-size: max(12.5px, calc(7 * var(--f))); line-height: 1.45; min-height: 2.9em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
:where(body[data-page=home], body[data-page=shop]) .p-summary { display: none; }
:where(body[data-page=home], body[data-page=shop]) .p-meta { display: flex; align-items: center; gap: calc(4 * var(--u)); margin-top: calc(4 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .p-cat {
  display: inline-flex; align-items: center; height: calc(13 * var(--u)); padding: 0 calc(6 * var(--u)); border-radius: calc(3.5 * var(--u));
  background: var(--tone-bg); color: var(--tone); font-size: max(12px, calc(6.8 * var(--f))); font-weight: 600; transition: filter .3s;
}
:where(body[data-page=home], body[data-page=shop]) .p-cat:hover { filter: brightness(.95); }
:where(body[data-page=home], body[data-page=shop]) .p-rx, :where(body[data-page=home], body[data-page=shop]) .p-otc {
  display: inline-flex; align-items: center; gap: 3px; height: calc(13 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: calc(3.5 * var(--u));
  font-size: max(12px, calc(6.6 * var(--f))); font-weight: 800; color: #c81e45; border: 1px solid #f5b8c7; background: #fff5f7;
}
:where(body[data-page=home], body[data-page=shop]) .p-otc { color: #0d8a5f; border-color: #b3e2cf; background: #f1fbf6; }
:where(body[data-page=home], body[data-page=shop]) .p-buy { margin-top: auto; padding-top: calc(4 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .shop-card .p-price { font-size: calc(12.6 * var(--f)); }
:where(body[data-page=home], body[data-page=shop]) .p-price small { font-size: max(12px, .55em); font-weight: 600; color: var(--muted); }
:where(body[data-page=home], body[data-page=shop]) .shop-card .btn-cart { height: calc(23 * var(--u)); font-size: calc(8 * var(--f)); }

/* list view */
:where(body[data-page=home], body[data-page=shop]) .shop-grid.is-list { grid-template-columns: 1fr; }
:where(body[data-page=home], body[data-page=shop]) .is-list .shop-card { flex-direction: row; align-items: center; gap: calc(14 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .is-list .shop-card .p-media { width: calc(140 * var(--u)); height: calc(104 * var(--u)); margin: 0; flex-shrink: 0; }
:where(body[data-page=home], body[data-page=shop]) .is-list .p-body { display: grid; grid-template-columns: 1fr calc(120 * var(--u)); grid-template-rows: auto auto auto 1fr; column-gap: calc(18 * var(--u)); align-self: stretch; padding-block: calc(4 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .is-list .p-body > * { grid-column: 1; }
:where(body[data-page=home], body[data-page=shop]) .is-list .p-name { margin-top: 0; font-size: calc(11 * var(--f)); }
:where(body[data-page=home], body[data-page=shop]) .is-list .p-desc { min-height: 0; -webkit-line-clamp: 1; }
:where(body[data-page=home], body[data-page=shop]) .is-list .p-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: calc(3 * var(--u)); font-size: max(14px, calc(7.8 * var(--f))); color: #4f5b73; line-height: 1.5; }
:where(body[data-page=home], body[data-page=shop]) .is-list .p-buy { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; padding: 0; text-align: right; }
:where(body[data-page=home], body[data-page=shop]) .is-list .p-badge { left: calc(10 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .is-list .p-wish, :where(body[data-page=home], body[data-page=shop]) .is-list .p-qv { right: auto; left: calc(126 * var(--u)); }

/* empty state */
:where(body[data-page=home], body[data-page=shop]) .shop-empty { grid-column: 1 / -1; text-align: center; padding: calc(40 * var(--u)) calc(10 * var(--u)); border: 1.5px dashed #d5dfec; border-radius: calc(8 * var(--u)); animation: cardIn .5s var(--ease) backwards; }
:where(body[data-page=home], body[data-page=shop]) .shop-empty-ico {
  width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: #eaf2fd; color: var(--blue); font-size: calc(18 * var(--f)); animation: floatY 3s ease-in-out infinite;
}
:where(body[data-page=home], body[data-page=shop]) .shop-empty h3 { margin-top: calc(10 * var(--u)); font-size: calc(12 * var(--f)); color: var(--navy-2); }
:where(body[data-page=home], body[data-page=shop]) .shop-empty p { margin-top: calc(3 * var(--u)); color: var(--muted); font-size: calc(8.4 * var(--f)); }
:where(body[data-page=home], body[data-page=shop]) .shop-empty .btn { margin-top: calc(12 * var(--u)); }

/* pagination */
:where(body[data-page=home], body[data-page=shop]) .pager { display: flex; justify-content: center; gap: calc(4 * var(--u)); margin-top: calc(14 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pager button {
  min-width: calc(23 * var(--u)); height: calc(23 * var(--u)); padding: 0 calc(4 * var(--u)); border-radius: calc(5 * var(--u));
  border: 1px solid #dbe4ef; color: var(--navy-2); font-size: calc(8 * var(--f)); font-weight: 700; transition: .3s;
}
:where(body[data-page=home], body[data-page=shop]) .pager button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
:where(body[data-page=home], body[data-page=shop]) .pager button.current { background: var(--navy-btn); border-color: var(--navy-btn); color: #fff; }
:where(body[data-page=home], body[data-page=shop]) .pager button:disabled { opacity: .4; cursor: default; }

/* category tiles */
:where(body[data-page=home], body[data-page=shop]) .cat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--u)); padding-bottom: calc(10 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .cat-card--mini { height: calc(84 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .cat-card--mini .cat-body { justify-content: center; padding: calc(10 * var(--u)) calc(12 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .cat-card--mini .cat-title { margin-top: 0; font-size: calc(11.5 * var(--f)); }
:where(body[data-page=home], body[data-page=shop]) .cat-card--mini .cat-sub { margin-top: calc(1 * var(--u)); margin-bottom: 0; font-size: calc(8.4 * var(--f)); }
:where(body[data-page=home], body[data-page=shop]) .cat-card--mini .cat-btn { margin-top: calc(8 * var(--u)); }

/* ==========================================================
   PRODUCT DETAILS
   ========================================================== */
:where(body[data-page=home], body[data-page=shop]) .pd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(26 * var(--u)); align-items: center; }   /* gallery 50% | details 50% */

/* gallery */
:where(body[data-page=home], body[data-page=shop]) .pd-gallery { display: grid; grid-template-columns: calc(48 * var(--u)) minmax(0, 1fr); gap: calc(9 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-thumbs { display: flex; flex-direction: column; gap: calc(6 * var(--u)); height: 0; min-height: 100%; overflow-y: auto; scrollbar-width: none; }   /* as tall as the stage, scrolls past that */
:where(body[data-page=home], body[data-page=shop]) .pd-thumbs::-webkit-scrollbar { display: none; }
:where(body[data-page=home], body[data-page=shop]) .pd-thumb {
  flex-shrink: 0; width: 100%; aspect-ratio: 1; border-radius: calc(5 * var(--u)); overflow: hidden; background: #f4f7fb;
  border: 1.5px solid #e2e9f2; transition: border-color .3s, transform .3s, box-shadow .3s;
}
:where(body[data-page=home], body[data-page=shop]) .pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
:where(body[data-page=home], body[data-page=shop]) .pd-thumb img.is-shot { clip-path: none; }
:where(body[data-page=home], body[data-page=shop]) .pd-thumb:hover { transform: translateY(-2px); border-color: #9cc2ee; }
:where(body[data-page=home], body[data-page=shop]) .pd-thumb.active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(11,91,192,.15); }
:where(body[data-page=home], body[data-page=shop]) .pd-stage {
  position: relative; aspect-ratio: 1 / 1.02; border-radius: calc(8 * var(--u)); overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #f1f5fa 75%); border: 1px solid #e7edf5;
}
:where(body[data-page=home], body[data-page=shop]) .pd-main {
  position: absolute; inset: 0; margin: auto; height: 86%; width: auto; max-width: 92%; object-fit: contain; cursor: zoom-in;
  transform-origin: var(--zx, 50%) var(--zy, 50%); transform: scale(calc(var(--base, 1) * var(--z, 1)));
  transition: opacity .45s ease, transform .35s var(--ease);
}
:where(body[data-page=home], body[data-page=shop]) .pd-main.is-shot { --base: 1.32; }
:where(body[data-page=home], body[data-page=shop]) .pd-stage.zooming .pd-main { --z: 1.9; }
:where(body[data-page=home], body[data-page=shop]) .pd-stage .p-badge { left: calc(9 * var(--u)); top: calc(9 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-nav, :where(body[data-page=home], body[data-page=shop]) .pd-expand {
  position: absolute; z-index: 2; display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: var(--navy-2); box-shadow: var(--shadow-sm); transition: background .3s, color .3s, transform .3s, opacity .3s;
}
:where(body[data-page=home], body[data-page=shop]) .pd-nav { top: 50%; width: calc(22 * var(--u)); height: calc(22 * var(--u)); transform: translateY(-50%); font-size: calc(8 * var(--f)); opacity: .9; }
:where(body[data-page=home], body[data-page=shop]) .pd-prev { left: calc(9 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-next { right: calc(9 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-nav:hover { background: var(--navy-btn); color: #fff; opacity: 1; }
:where(body[data-page=home], body[data-page=shop]) .pd-expand { right: calc(9 * var(--u)); bottom: calc(9 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u)); font-size: calc(8 * var(--f)); }
/* phones & touch screens: swipe the photo (or tap a thumbnail) instead of arrows */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  :where(body[data-page=home], body[data-page=shop]) .pd-nav { display: none; }
}
:where(body[data-page=home], body[data-page=shop]) .pd-expand:hover { background: var(--navy-btn); color: #fff; transform: scale(1.08); }
:where(body[data-page=home], body[data-page=shop]) .pd-counter { position: absolute; left: calc(9 * var(--u)); bottom: calc(9 * var(--u)); font-size: max(12px, calc(7 * var(--f))); color: var(--muted); background: rgba(255,255,255,.85); padding: 2px calc(6 * var(--u)); border-radius: 99px; }

/* info */
:where(body[data-page=home], body[data-page=shop]) .pd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: calc(5 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-badge { display: inline-flex; align-items: center; height: calc(14 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: calc(4 * var(--u)); color: #fff; font-size: max(12px, calc(7.4 * var(--f))); font-weight: 700; }
:where(body[data-page=home], body[data-page=shop]) .pd-tags .p-cat, :where(body[data-page=home], body[data-page=shop]) .pd-tags .p-rx, :where(body[data-page=home], body[data-page=shop]) .pd-tags .p-otc { height: calc(14 * var(--u)); font-size: max(12px, calc(7.2 * var(--f))); }
:where(body[data-page=home], body[data-page=shop]) .pd-title { margin-top: calc(6 * var(--u)); font-size: calc(23 * var(--f)); font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.15; }
:where(body[data-page=home], body[data-page=shop]) .pd-generic { margin-top: calc(3 * var(--u)); font-size: calc(11.4 * var(--f)); color: #0b4fb3; font-weight: 500; line-height: 1.35; }
:where(body[data-page=home], body[data-page=shop]) .pd-generic span { color: var(--muted); font-size: .85em; }
:where(body[data-page=home], body[data-page=shop]) .pd-summary { margin-top: calc(8 * var(--u)); font-size: calc(8.8 * var(--f)); line-height: 1.6; color: #42506b; }
:where(body[data-page=home], body[data-page=shop]) .pd-price-row { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); padding-top: calc(9 * var(--u)); border-top: 1px dashed #dfe6f0; }
:where(body[data-page=home], body[data-page=shop]) .pd-price { font-size: calc(22 * var(--f)); font-weight: 800; color: var(--navy); line-height: 1.1; }
:where(body[data-page=home], body[data-page=shop]) .pd-price small { font-size: .42em; font-weight: 600; color: var(--muted); }
:where(body[data-page=home], body[data-page=shop]) .pd-tax { font-size: max(13px, calc(7.4 * var(--f))); color: var(--muted); }
:where(body[data-page=home], body[data-page=shop]) .pd-stock {
  display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(19 * var(--u)); padding: 0 calc(9 * var(--u));
  border-radius: 99px; background: #e5f6ee; color: #0d8a5f; font-size: max(13px, calc(7.8 * var(--f))); font-weight: 700;
}
:where(body[data-page=home], body[data-page=shop]) .pd-stock.out { background: #fde8ec; color: #c81e45; }

:where(body[data-page=home], body[data-page=shop]) .pd-buy { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); margin-top: calc(10 * var(--u)); }
/* buy row: sized off the design unit but held to 42–46px so it never balloons on wide screens */
:where(body[data-page=home], body[data-page=shop]) .qty { display: flex; align-items: center; height: clamp(42px, calc(24 * var(--u)), 46px); border: 1px solid #d5dfec; border-radius: 8px; overflow: hidden; }
:where(body[data-page=home], body[data-page=shop]) .qty-btn { width: clamp(36px, calc(20 * var(--u)), 42px); height: 100%; color: var(--navy-2); font-size: 13px; transition: background .3s; }
:where(body[data-page=home], body[data-page=shop]) .qty-btn:hover { background: #eef4fb; }
:where(body[data-page=home], body[data-page=shop]) .qty input {
  width: clamp(40px, calc(24 * var(--u)), 48px); height: 100%; border: 0; border-inline: 1px solid #e3e9f2; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--navy-2); -moz-appearance: textfield; outline: 0;
}
:where(body[data-page=home], body[data-page=shop]) .qty input::-webkit-inner-spin-button, :where(body[data-page=home], body[data-page=shop]) .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:where(body[data-page=home], body[data-page=shop]) .pd-cart, :where(body[data-page=home], body[data-page=shop]) .pd-now { height: clamp(42px, calc(24 * var(--u)), 46px); font-size: 15px; flex: 1; min-width: calc(100 * var(--u)); border-radius: 8px; }
:where(body[data-page=home], body[data-page=shop]) .pd-cart { background: linear-gradient(90deg, #0457b4, #0b62c4); color: #fff; }
:where(body[data-page=home], body[data-page=shop]) .pd-cart.added { background: linear-gradient(90deg, #00947b, #0aa38d); }
:where(body[data-page=home], body[data-page=shop]) .pd-now { background: #fff; color: #0b4fb3; border: 1.5px solid #0b4fb3; }
:where(body[data-page=home], body[data-page=shop]) .pd-now:hover { background: #0b4fb3; color: #fff; }
:where(body[data-page=home], body[data-page=shop]) .pd-moq { margin-top: calc(7 * var(--u)); font-size: max(14px, calc(7.6 * var(--f))); color: #4f5b73; }
:where(body[data-page=home], body[data-page=shop]) .pd-moq i { color: #0b5bc0; margin-right: 3px; }
:where(body[data-page=home], body[data-page=shop]) .pd-moq a { color: #0b4fb3; font-weight: 700; }
:where(body[data-page=home], body[data-page=shop]) .pd-moq a:hover { text-decoration: underline; }
:where(body[data-page=home], body[data-page=shop]) .pd-moq a i { font-size: .8em; margin: 0 0 0 2px; }

:where(body[data-page=home], body[data-page=shop]) .pd-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-trust li { display: flex; align-items: center; gap: calc(5 * var(--u)); font-size: max(13px, calc(7.2 * var(--f))); line-height: 1.3; color: var(--navy-2); font-weight: 600; }
:where(body[data-page=home], body[data-page=shop]) .pd-trust i { font-size: calc(13 * var(--f)); color: #0b5bc0; transition: transform .5s var(--ease); }
:where(body[data-page=home], body[data-page=shop]) .pd-trust li:hover i { transform: translateY(-3px) rotateY(180deg); }
:where(body[data-page=home], body[data-page=shop]) .pd-actions { display: flex; flex-wrap: wrap; gap: calc(18 * var(--u)); margin-top: calc(11 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-actions button { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(8.4 * var(--f)); font-weight: 600; color: var(--navy-2); transition: color .3s, transform .25s; }
:where(body[data-page=home], body[data-page=shop]) .pd-actions button i { font-size: calc(10 * var(--f)); }
:where(body[data-page=home], body[data-page=shop]) .pd-actions button:hover, :where(body[data-page=home], body[data-page=shop]) .pd-actions .js-wish.on { color: #ef2a4f; }
:where(body[data-page=home], body[data-page=shop]) .pd-actions .js-share:hover { color: var(--blue); }
:where(body[data-page=home], body[data-page=shop]) .pd-actions .pop { transform: scale(1.08); }

/* highlight tiles */
:where(body[data-page=home], body[data-page=shop]) .pd-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(9 * var(--u)); margin-top: calc(14 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-hl {
  display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(10 * var(--u)) calc(11 * var(--u));
  border-radius: calc(6 * var(--u)); background: linear-gradient(90deg, var(--tone-bg), var(--tone-soft)); border: 1px solid var(--tone-bg);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
:where(body[data-page=home], body[data-page=shop]) .pd-hl:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
:where(body[data-page=home], body[data-page=shop]) .pd-hl-ico {
  width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: #fff; color: var(--tone); font-size: calc(13 * var(--f)); box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: transform .5s var(--ease);
}
:where(body[data-page=home], body[data-page=shop]) .pd-hl:hover .pd-hl-ico { transform: rotate(-12deg) scale(1.08); }
:where(body[data-page=home], body[data-page=shop]) .pd-hl b { font-size: calc(8.8 * var(--f)); color: var(--navy-2); line-height: 1.35; }
:where(body[data-page=home], body[data-page=shop]) .tone-orange.pd-hl .pd-hl-ico { background: var(--tone); color: #fff; }

/* tabs */
:where(body[data-page=home], body[data-page=shop]) .pd-tabs-wrap { margin-top: calc(16 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-tablist-bar { background: linear-gradient(180deg, #f7faff, #fff); border-bottom: 1px solid #e3eaf3; }
:where(body[data-page=home], body[data-page=shop]) .pd-tablist { display: flex; justify-content: flex-start; gap: calc(22 * var(--u)); overflow-x: auto; scrollbar-width: none; }
:where(body[data-page=home], body[data-page=shop]) .pd-tablist::-webkit-scrollbar { display: none; }
:where(body[data-page=home], body[data-page=shop]) .pd-tablist button {
  position: relative; flex-shrink: 0; padding: calc(11 * var(--u)) calc(3 * var(--u)); font-size: calc(9.2 * var(--f)); font-weight: 500; color: #34425f;
  transition: color .3s;
}
:where(body[data-page=home], body[data-page=shop]) .pd-tablist button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 2px;
  background: linear-gradient(90deg, #1d5fc8, #15b1a2); transform: scaleX(0); transition: transform .35s var(--ease);
}
:where(body[data-page=home], body[data-page=shop]) .pd-tablist button:hover { color: #0b4fb3; }
:where(body[data-page=home], body[data-page=shop]) .pd-tablist button[aria-selected="true"] { color: var(--navy); font-weight: 700; }
:where(body[data-page=home], body[data-page=shop]) .pd-tablist button[aria-selected="true"]::after { transform: scaleX(1); }
:where(body[data-page=home], body[data-page=shop]) .pd-tabs-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(24 * var(--u)); padding-top: calc(16 * var(--u)); align-items: start; }
:where(body[data-page=home], body[data-page=shop]) .pd-panel { animation: fadeUp .5s var(--ease); }
:where(body[data-page=home], body[data-page=shop]) .pd-h2 { font-size: calc(15 * var(--f)); font-weight: 800; color: var(--navy); margin-bottom: calc(8 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-panel > p { font-size: calc(9 * var(--f)); line-height: 1.65; color: #42506b; }
:where(body[data-page=home], body[data-page=shop]) .pd-panel > p + p { margin-top: calc(7 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-ingredients li { display: flex; gap: calc(8 * var(--u)); padding: calc(7 * var(--u)) 0; border-bottom: 1px solid #edf1f6; }
:where(body[data-page=home], body[data-page=shop]) .ing-ico { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: #e9f2fd; color: var(--blue); font-size: calc(9 * var(--f)); }
:where(body[data-page=home], body[data-page=shop]) .pd-ingredients b { font-size: calc(9 * var(--f)); color: var(--navy-2); }
:where(body[data-page=home], body[data-page=shop]) .pd-ingredients em { font-style: normal; color: #0d8a5f; font-weight: 700; margin-left: 4px; }
:where(body[data-page=home], body[data-page=shop]) .pd-ingredients p { font-size: calc(8.2 * var(--f)); color: #4f5b73; margin-top: 1px; }
:where(body[data-page=home], body[data-page=shop]) .pd-list li { position: relative; padding: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(16 * var(--u)); font-size: calc(8.8 * var(--f)); color: #34425f; line-height: 1.5; }
:where(body[data-page=home], body[data-page=shop]) .pd-list li::before {
  content: ""; position: absolute; left: 0; top: calc(4 * var(--u) + .75em - .5 * max(14px, calc(8.5 * var(--f))));   /* centred on the first line */
  width: max(14px, calc(8.5 * var(--f))); height: max(14px, calc(8.5 * var(--f)));
  background: currentColor; -webkit-mask: var(--pd-ico) center / contain no-repeat; mask: var(--pd-ico) center / contain no-repeat;
}
:where(body[data-page=home], body[data-page=shop]) .pd-list--check li::before { --pd-ico: var(--ico-check); color: #0d8a5f; }
:where(body[data-page=home], body[data-page=shop]) .pd-list--warn li::before { --pd-ico: var(--ico-warn); color: #e8901f; }
:where(body[data-page=home], body[data-page=shop]) .pd-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
:where(body[data-page=home], body[data-page=shop]) .pd-steps li { counter-increment: step; position: relative; padding: calc(4 * var(--u)) 0 calc(6 * var(--u)) calc(22 * var(--u)); font-size: calc(8.8 * var(--f)); color: #34425f; line-height: 1.5; }
:where(body[data-page=home], body[data-page=shop]) .pd-steps li::before {
  content: counter(step); position: absolute; left: 0; top: calc(3 * var(--u)); width: calc(15 * var(--u)); height: calc(15 * var(--u));
  border-radius: 50%; background: var(--navy-btn); color: #fff; font-size: calc(7.4 * var(--f)); font-weight: 700; display: grid; place-items: center;
}
:where(body[data-page=home], body[data-page=shop]) .pd-note { margin-top: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(5 * var(--u)); background: #f3f7fc; font-size: max(14px, calc(7.8 * var(--f))) !important; color: #4f5b73; }
:where(body[data-page=home], body[data-page=shop]) .pd-note i { color: var(--blue); margin-right: 4px; }
:where(body[data-page=home], body[data-page=shop]) .pd-faqs details { border: 1px solid #e3eaf3; border-radius: calc(5 * var(--u)); background: #fff; transition: box-shadow .3s, border-color .3s; }
:where(body[data-page=home], body[data-page=shop]) .pd-faqs details + details { margin-top: calc(5 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-faqs details[open]:not(.closing) { box-shadow: var(--shadow-sm); border-color: #cfe5ea; }
:where(body[data-page=home], body[data-page=shop]) .pd-faqs summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(8 * var(--u)) calc(10 * var(--u)); font-size: calc(8.8 * var(--f)); font-weight: 700; color: var(--navy-2);
  transition: color .3s;
}
:where(body[data-page=home], body[data-page=shop]) .pd-faqs summary:hover { color: var(--blue); }
:where(body[data-page=home], body[data-page=shop]) .pd-faqs .acc-tog { --acc: var(--teal); width: calc(14 * var(--u)); height: calc(14 * var(--u)); min-width: 24px; min-height: 24px; }
:where(body[data-page=home], body[data-page=shop]) .pd-faqs details p { padding: 0 calc(10 * var(--u)) calc(9 * var(--u)); font-size: calc(8.4 * var(--f)); line-height: 1.6; color: #4f5b73; }

:where(body[data-page=home], body[data-page=shop]) .pd-quick { background: #f5f9fe; border: 1px solid #e3ecf7; border-radius: calc(7 * var(--u)); padding: calc(11 * var(--u)) calc(13 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-quick h3 { font-size: calc(11 * var(--f)); font-weight: 800; color: var(--navy); margin-bottom: calc(5 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-quick dl { margin: 0; }
:where(body[data-page=home], body[data-page=shop]) .pd-quick dl div { display: grid; grid-template-columns: 42% 1fr; gap: calc(6 * var(--u)); padding: calc(4.5 * var(--u)) 0; border-bottom: 1px solid #e6edf6; }
:where(body[data-page=home], body[data-page=shop]) .pd-quick dl div:last-child { border-bottom: 0; }
:where(body[data-page=home], body[data-page=shop]) .pd-quick dt { font-size: calc(8 * var(--f)); color: var(--navy-2); font-weight: 600; }
:where(body[data-page=home], body[data-page=shop]) .pd-quick dd { margin: 0; font-size: calc(8 * var(--f)); color: #4f5b73; }

/* promo banner */
:where(body[data-page=home], body[data-page=shop]) .pd-promo {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u));
  margin-top: calc(18 * var(--u)); min-height: calc(104 * var(--u)); border-radius: calc(8 * var(--u)); overflow: hidden; isolation: isolate;
  box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
:where(body[data-page=home], body[data-page=shop]) .pd-promo-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: right center; transition: transform 1.2s var(--ease); }
:where(body[data-page=home], body[data-page=shop]) .pd-promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--tone-soft) 0%, rgba(255,255,255,.88) 40%, rgba(255,255,255,.15) 75%); }
:where(body[data-page=home], body[data-page=shop]) .pd-promo:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
:where(body[data-page=home], body[data-page=shop]) .pd-promo:hover .pd-promo-bg { transform: scale(1.05); }
:where(body[data-page=home], body[data-page=shop]) .pd-promo-body { display: flex; flex-direction: column; align-items: flex-start; padding: calc(12 * var(--u)) calc(24 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-promo-title { font-size: calc(17 * var(--f)); font-weight: 800; color: var(--navy); line-height: 1.2; letter-spacing: -.01em; }
:where(body[data-page=home], body[data-page=shop]) .pd-promo-sub { font-size: calc(12 * var(--f)); color: #23314f; }
:where(body[data-page=home], body[data-page=shop]) .pd-promo .btn { margin-top: calc(9 * var(--u)); height: calc(24 * var(--u)); font-size: calc(8 * var(--f)); }
:where(body[data-page=home], body[data-page=shop]) .pd-promo-shots { display: flex; gap: calc(8 * var(--u)); padding-right: calc(22 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-promo-shot {
  width: calc(66 * var(--u)); height: calc(78 * var(--u)); border-radius: calc(6 * var(--u)); overflow: hidden; background: #fff;
  box-shadow: 0 6px 18px rgba(16,42,92,.16); transform: rotate(var(--r, 0deg)); transition: transform .5s var(--ease);
}
:where(body[data-page=home], body[data-page=shop]) .pd-promo-shot:nth-child(1) { --r: -5deg; }
:where(body[data-page=home], body[data-page=shop]) .pd-promo-shot:nth-child(3) { --r: 5deg; }
:where(body[data-page=home], body[data-page=shop]) .pd-promo:hover .pd-promo-shot { transform: rotate(0) translateY(-4px); }
:where(body[data-page=home], body[data-page=shop]) .pd-promo-shot img { width: 100%; height: 100%; object-fit: cover; }
:where(body[data-page=home], body[data-page=shop]) .pd-promo-shot img.is-shot { clip-path: none; }

/* related */
:where(body[data-page=home], body[data-page=shop]) .pd-related { padding: 0 var(--gutter); }
:where(body[data-page=home], body[data-page=shop]) .pd-related .sec-head { margin-bottom: calc(6 * var(--u)); }
:where(body[data-page=home], body[data-page=shop]) .pd-related .sec-title { font-size: calc(15 * var(--f)); }
:where(body[data-page=home], body[data-page=shop]) .pd-related .link-arrow { margin: 0; }

:where(body[data-page=home], body[data-page=shop]) .pd-missing { text-align: center; padding: calc(60 * var(--u)) var(--gutter); }
:where(body[data-page=home], body[data-page=shop]) .pd-missing h1 { margin-top: calc(12 * var(--u)); font-size: calc(20 * var(--f)); color: var(--navy); }
:where(body[data-page=home], body[data-page=shop]) .pd-missing p { margin: calc(4 * var(--u)) 0 calc(14 * var(--u)); color: var(--muted); }

/* lightbox */
:where(body[data-page=home], body[data-page=shop]) .lightbox {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(4,18,46,.92);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
:where(body[data-page=home], body[data-page=shop]) .lightbox.open { opacity: 1; visibility: visible; }
:where(body[data-page=home], body[data-page=shop]) .lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: scale(.94); transition: transform .4s var(--ease); }
:where(body[data-page=home], body[data-page=shop]) .lightbox.open figure { transform: none; }
:where(body[data-page=home], body[data-page=shop]) .lightbox img { height: min(78vh, 900px); width: auto; max-width: 88vw; object-fit: contain; border-radius: 8px; background: #fff; }
:where(body[data-page=home], body[data-page=shop]) .lightbox img.is-shot { transform: scale(1.25); }
:where(body[data-page=home], body[data-page=shop]) .lightbox figcaption { color: #cdd8ea; font-size: 14px; }
:where(body[data-page=home], body[data-page=shop]) .lb-close, :where(body[data-page=home], body[data-page=shop]) .lb-nav {
  position: absolute; z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: #fff; font-size: 18px; transition: background .3s, transform .3s;
}
:where(body[data-page=home], body[data-page=shop]) .lb-close:hover, :where(body[data-page=home], body[data-page=shop]) .lb-nav:hover { background: rgba(255,255,255,.25); transform: scale(1.06); }
:where(body[data-page=home], body[data-page=shop]) .lb-close { top: 20px; right: 20px; }
:where(body[data-page=home], body[data-page=shop]) .lb-prev { left: 20px; }
:where(body[data-page=home], body[data-page=shop]) .lb-next { right: 20px; }
.lb-lock:where(body[data-page=home], body[data-page=shop]) { overflow: hidden; }

/* toast */
:where(body[data-page=home], body[data-page=shop]) .mm-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 320; display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 10px; background: var(--navy-2); color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(5,20,50,.3); transform: translate(-50%, 30px); opacity: 0; visibility: hidden;
  transition: transform .4s var(--ease), opacity .4s, visibility .4s; max-width: calc(100vw - 32px);
}
:where(body[data-page=home], body[data-page=shop]) .mm-toast i { color: #3ee0b0; }
:where(body[data-page=home], body[data-page=shop]) .mm-toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ==========================================================
   QUICK VIEW (js/shop.js)
   ========================================================== */
:where(body[data-page=home], body[data-page=shop]) .qv { position: fixed; inset: 0; z-index: 350; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px 72px; visibility: hidden; pointer-events: none; transition: visibility .45s; }
:where(body[data-page=home], body[data-page=shop]) .qv.open { visibility: visible; pointer-events: auto; }
:where(body[data-page=home], body[data-page=shop]) .qv-overlay { position: absolute; inset: 0; background: rgba(5, 20, 50, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s ease; }
:where(body[data-page=home], body[data-page=shop]) .qv.open .qv-overlay { opacity: 1; }
:where(body[data-page=home], body[data-page=shop]) .qv-dialog {
  position: relative; width: min(1000px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(5, 20, 50, .35);
  opacity: 0; transform: translateY(30px) scale(.96); transition: transform .5s var(--ease), opacity .4s ease;
}
:where(body[data-page=home], body[data-page=shop]) .qv.open .qv-dialog { opacity: 1; transform: none; }
.qv-lock:where(body[data-page=home], body[data-page=shop]) { overflow: hidden; }
:where(body[data-page=home], body[data-page=shop]) .qv-close {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px; color: var(--navy-2); background: #f1f5fa; transition: background .3s, color .3s, transform .4s var(--ease);
}
:where(body[data-page=home], body[data-page=shop]) .qv-close:hover { background: var(--navy-btn); color: #fff; transform: rotate(90deg); }
:where(body[data-page=home], body[data-page=shop]) .qv-side {
  position: absolute; top: 50%; z-index: 3; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--navy-2); font-size: 17px; box-shadow: 0 8px 24px rgba(5, 20, 50, .25);
  transition: background .3s, color .3s, transform .3s var(--ease);
}
:where(body[data-page=home], body[data-page=shop]) .qv-side.qv-prev { left: -64px; }
:where(body[data-page=home], body[data-page=shop]) .qv-side.qv-next { right: -64px; }
:where(body[data-page=home], body[data-page=shop]) .qv-side:hover { background: var(--navy-btn); color: #fff; }
:where(body[data-page=home], body[data-page=shop]) .qv-side.qv-prev:hover { transform: translateX(-4px); }
:where(body[data-page=home], body[data-page=shop]) .qv-side.qv-next:hover { transform: translateX(4px); }
:where(body[data-page=home], body[data-page=shop]) .qv.single .qv-side { visibility: hidden; }
:where(body[data-page=home], body[data-page=shop]) .qv-bar { display: none; }                            /* phones only – see below */

:where(body[data-page=home], body[data-page=shop]) .qv-pane { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; border-radius: 16px; }
:where(body[data-page=home], body[data-page=shop]) .qv-body { display: grid; grid-template-columns: 1fr 1.05fr; gap: 34px; padding: 34px; }
:where(body[data-page=home], body[data-page=shop]) .qv-stage {
  position: relative; aspect-ratio: 1 / .95; border-radius: 12px; overflow: hidden; border: 1px solid #e7edf5;
  background: radial-gradient(circle at 50% 42%, #fff 0%, #f1f5fa 75%);
}
:where(body[data-page=home], body[data-page=shop]) .qv-stage .p-badge { left: 12px; top: 12px; height: 26px; font-size: 13px; padding: 0 10px; }
:where(body[data-page=home], body[data-page=shop]) .qv-main { position: absolute; inset: 0; margin: auto; height: 86%; width: auto; max-width: 92%; object-fit: contain; }
:where(body[data-page=home], body[data-page=shop]) .qv-main.is-shot { transform: scale(1.3); }
:where(body[data-page=home], body[data-page=shop]) .qv-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
:where(body[data-page=home], body[data-page=shop]) .qv-thumb {
  flex-shrink: 0; width: 62px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #f4f7fb;
  border: 1.5px solid #e2e9f2; transition: border-color .3s, transform .3s;
}
:where(body[data-page=home], body[data-page=shop]) .qv-thumb img { width: 100%; height: 100%; object-fit: cover; }
:where(body[data-page=home], body[data-page=shop]) .qv-thumb img.is-shot { clip-path: none; }
:where(body[data-page=home], body[data-page=shop]) .qv-thumb:hover { transform: translateY(-2px); border-color: #9cc2ee; }
:where(body[data-page=home], body[data-page=shop]) .qv-thumb.active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(11, 91, 192, .15); }

:where(body[data-page=home], body[data-page=shop]) .qv-info { min-width: 0; padding-top: 4px; }
:where(body[data-page=home], body[data-page=shop]) .qv-info .pd-tags { padding-right: 44px; }
:where(body[data-page=home], body[data-page=shop]) .qv-info .pd-tags .p-cat, :where(body[data-page=home], body[data-page=shop]) .qv-info .pd-tags .p-rx, :where(body[data-page=home], body[data-page=shop]) .qv-info .pd-tags .p-otc { height: 24px; font-size: 12px; padding: 0 9px; }
:where(body[data-page=home], body[data-page=shop]) .qv-title { margin-top: 10px; font-size: 28px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.15; }
:where(body[data-page=home], body[data-page=shop]) .qv-generic { margin-top: 4px; font-size: 15.5px; color: #0b4fb3; font-weight: 500; line-height: 1.4; }
:where(body[data-page=home], body[data-page=shop]) .qv-generic span { color: var(--muted); font-size: .88em; }
:where(body[data-page=home], body[data-page=shop]) .qv-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #dfe6f0; }
:where(body[data-page=home], body[data-page=shop]) .qv-price { font-size: 30px; font-weight: 800; color: var(--navy); line-height: 1.1; }
:where(body[data-page=home], body[data-page=shop]) .qv-price small { font-size: 14px; font-weight: 600; color: var(--muted); }
:where(body[data-page=home], body[data-page=shop]) .qv-price-row .pd-stock { height: 30px; font-size: 13px; padding: 0 12px; }
:where(body[data-page=home], body[data-page=shop]) .qv-summary { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: #42506b; }
:where(body[data-page=home], body[data-page=shop]) .qv-ings { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
:where(body[data-page=home], body[data-page=shop]) .qv-ings li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: #f1f6fd; color: var(--navy-2); font-size: 12.5px; font-weight: 600; }
:where(body[data-page=home], body[data-page=shop]) .qv-ings i { color: var(--blue); font-size: 11px; }
:where(body[data-page=home], body[data-page=shop]) .qv-ings em { font-style: normal; color: #0d8a5f; }
:where(body[data-page=home], body[data-page=shop]) .qv-buy { margin-top: 16px; gap: 10px; }
:where(body[data-page=home], body[data-page=shop]) .qv-buy .qty { height: 44px; }
:where(body[data-page=home], body[data-page=shop]) .qv-buy .qty-btn { width: 38px; }
:where(body[data-page=home], body[data-page=shop]) .qv-buy .qty input { width: 44px; }
:where(body[data-page=home], body[data-page=shop]) .qv-buy .pd-cart { height: 44px; min-width: 160px; }
:where(body[data-page=home], body[data-page=shop]) .qv-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
:where(body[data-page=home], body[data-page=shop]) .qv-links .js-wish { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--navy-2); transition: color .3s; }
:where(body[data-page=home], body[data-page=shop]) .qv-links .js-wish i { font-size: 16px; }
:where(body[data-page=home], body[data-page=shop]) .qv-links .js-wish:hover, :where(body[data-page=home], body[data-page=shop]) .qv-links .js-wish.on { color: #ef2a4f; }
:where(body[data-page=home], body[data-page=shop]) .qv-more { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; color: var(--blue-link); }
:where(body[data-page=home], body[data-page=shop]) .qv-more:hover i { animation: arrowNudge .8s var(--ease) infinite; }

@media (max-width: 1159px) {
  /* no room outside the dialog: arrows sit just inside its edges */
  :where(body[data-page=home], body[data-page=shop]) .qv { padding: 24px; }
  :where(body[data-page=home], body[data-page=shop]) .qv-side { width: 40px; height: 40px; margin-top: -20px; font-size: 14px; background: rgba(255, 255, 255, .92); }
  :where(body[data-page=home], body[data-page=shop]) .qv-side.qv-prev { left: 8px; }
  :where(body[data-page=home], body[data-page=shop]) .qv-side.qv-next { right: 8px; }
}
@media (max-width: 767px) {
  /* phones: a full-screen page that slides in from the right; swipe sideways for the next product */
  :where(body[data-page=home], body[data-page=shop]) .qv { padding: 0; place-items: stretch; grid-template-rows: minmax(0, 1fr); }
  :where(body[data-page=home], body[data-page=shop]) .qv-overlay { display: none; }
  :where(body[data-page=home], body[data-page=shop]) .qv-dialog {
    width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none;
    opacity: 1; transform: translateX(100%); transition: transform .45s cubic-bezier(.22, .9, .24, 1);
  }
  :where(body[data-page=home], body[data-page=shop]) .qv.open .qv-dialog { transform: none; }
  :where(body[data-page=home], body[data-page=shop]) .qv-close, :where(body[data-page=home], body[data-page=shop]) .qv-side { display: none; }

  :where(body[data-page=home], body[data-page=shop]) .qv-bar {
    position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; flex: none;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: #fff; border-bottom: 1px solid var(--line);
  }
  :where(body[data-page=home], body[data-page=shop]) .qv-back {
    flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    background: #f1f5fa; color: var(--navy-2); font-size: 17px; transition: background .25s, transform .25s;
  }
  :where(body[data-page=home], body[data-page=shop]) .qv-back:active { transform: scale(.9); background: #e2eaf5; }
  :where(body[data-page=home], body[data-page=shop]) .qv-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
  :where(body[data-page=home], body[data-page=shop]) .qv-bar-text b { font-size: 16px; font-weight: 800; color: var(--navy); }
  :where(body[data-page=home], body[data-page=shop]) .qv-count { font-size: 12.5px; font-weight: 600; color: var(--muted); }
  :where(body[data-page=home], body[data-page=shop]) .qv-hint { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; background: #eef4fb; color: var(--blue); font-size: 12px; font-weight: 700; }
  :where(body[data-page=home], body[data-page=shop]) .qv-hint i { font-size: 10px; animation: qvNudge 1.6s ease-in-out infinite; }
  :where(body[data-page=home], body[data-page=shop]) .qv-hint i:first-child { animation-direction: reverse; }
  :where(body[data-page=home], body[data-page=shop]) .qv.single .qv-hint, :where(body[data-page=home], body[data-page=shop]) .qv.single .qv-progress { display: none; }
  :where(body[data-page=home], body[data-page=shop]) .qv-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; overflow: hidden; }
  :where(body[data-page=home], body[data-page=shop]) .qv-progress span {
    display: block; height: 100%; width: calc(100% / var(--n, 1)); transform: translateX(calc(var(--i, 0) * 100%));
    background: linear-gradient(90deg, #0b5bc0, #0a96a3); border-radius: 3px; transition: transform .4s var(--ease);
  }

  :where(body[data-page=home], body[data-page=shop]) .qv-pane { border-radius: 0; touch-action: pan-y; }
  :where(body[data-page=home], body[data-page=shop]) .qv-body { grid-template-columns: 1fr; gap: 16px; padding: 16px 16px 0; }
  :where(body[data-page=home], body[data-page=shop]) .qv-stage { aspect-ratio: 1 / .85; border-radius: 16px; }
  :where(body[data-page=home], body[data-page=shop]) .qv-info { display: flex; flex-direction: column; }
  :where(body[data-page=home], body[data-page=shop]) .qv-info .pd-tags { padding-right: 0; }
  :where(body[data-page=home], body[data-page=shop]) .qv-title { font-size: 24px; }
  :where(body[data-page=home], body[data-page=shop]) .qv-price { font-size: 26px; }
  :where(body[data-page=home], body[data-page=shop]) .qv-links { order: 1; margin-top: 16px; padding-bottom: 6px; }
  /* buy bar stays pinned to the bottom while the details scroll */
  :where(body[data-page=home], body[data-page=shop]) .qv-buy {
    order: 2; position: sticky; bottom: 0; z-index: 2; margin: 14px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); box-shadow: 0 -8px 20px rgba(16, 42, 92, .06);
  }
  :where(body[data-page=home], body[data-page=shop]) .qv-buy .qty { height: 44px; }
  :where(body[data-page=home], body[data-page=shop]) .qv-buy .pd-cart { flex: 1; min-width: 0; height: 44px; border-radius: 10px; }
}
@keyframes qvNudge { 50% { transform: translateX(2px); } }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1099px) {
  :where(body[data-page=home], body[data-page=shop]) .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :where(body[data-page=home], body[data-page=shop]) .shop-hero-inner { padding-left: var(--gutter); }
  :where(body[data-page=home], body[data-page=shop]) .shop-hero::before { background: linear-gradient(90deg, #eef5fe 0%, rgba(238,245,254,.95) 45%, rgba(238,245,254,.35) 80%); }
  :where(body[data-page=home], body[data-page=shop]) .shop-side { top: 70px; }
  :where(body[data-page=home], body[data-page=shop]) .cat-tiles { grid-template-columns: repeat(2, 1fr); }
  :where(body[data-page=home], body[data-page=shop]) .pd-top { grid-template-columns: 1fr 1fr; }
  :where(body[data-page=home], body[data-page=shop]) .pd-gallery { grid-template-columns: 1fr; }
  :where(body[data-page=home], body[data-page=shop]) .pd-thumbs { order: 2; flex-direction: row; height: auto; min-height: 0; overflow-x: auto; }
  :where(body[data-page=home], body[data-page=shop]) .pd-thumb { width: 62px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-stage { height: auto; aspect-ratio: 1 / .95; }
  :where(body[data-page=home], body[data-page=shop]) .pd-trust { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-highlights { grid-template-columns: repeat(2, 1fr); }
  :where(body[data-page=home], body[data-page=shop]) .shop-grid--related { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 939px) {
  :where(body[data-page=home], body[data-page=shop]) .shop-layout { grid-template-columns: 1fr; }
  :where(body[data-page=home], body[data-page=shop]) .shop-side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 130; width: min(340px, 88vw); border-radius: 0; border: 0;
    overflow-y: auto; padding: 0 18px 90px; transform: translateX(-100%); transition: transform .45s var(--ease);
  }
  .filters-open:where(body[data-page=home], body[data-page=shop]) .shop-side { transform: none; }
  :where(body[data-page=home], body[data-page=shop]) .side-head {
    display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2;
    margin: 0 -18px 12px; padding: 16px 18px; background: #fff; border-bottom: 1px solid var(--line);
  }
  :where(body[data-page=home], body[data-page=shop]) .side-head h2 { font-size: 18px; color: var(--navy); }
  :where(body[data-page=home], body[data-page=shop]) .side-close { font-size: 20px; color: var(--navy-2); padding: 4px 8px; }
  :where(body[data-page=home], body[data-page=shop]) .side-apply { display: flex !important; position: fixed; left: 18px; bottom: 16px; width: calc(min(340px, 88vw) - 36px); height: 46px; transform: translateX(calc(-100% - 40px)); transition: transform .45s var(--ease); }
  .filters-open:where(body[data-page=home], body[data-page=shop]) .side-apply { transform: none; }
  :where(body[data-page=home], body[data-page=shop]) .side-overlay { display: block; position: fixed; inset: 0; z-index: 125; background: rgba(5,20,50,.45); opacity: 0; visibility: hidden; transition: .3s; }
  .filters-open:where(body[data-page=home], body[data-page=shop]) .side-overlay { opacity: 1; visibility: visible; }
  .filters-open:where(body[data-page=home], body[data-page=shop]) { overflow: hidden; }
  :where(body[data-page=home], body[data-page=shop]) .filter-toggle {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 8px;
    border: 1px solid #d5dfec; font-weight: 700; font-size: 14px; color: var(--navy-2);
  }
  :where(body[data-page=home], body[data-page=shop]) .filter-count { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--blue); color: #fff; font-size: 11px; display: grid; place-items: center; }
  :where(body[data-page=home], body[data-page=shop]) .filter-count[hidden] { display: none; }
  :where(body[data-page=home], body[data-page=shop]) .shop-toolbar { flex-wrap: wrap; row-gap: 10px; }
  :where(body[data-page=home], body[data-page=shop]) .shop-count { order: 3; width: 100%; }
  /* Filters + sort + view buttons share one row; the sort box gives up width first */
  :where(body[data-page=home], body[data-page=shop]) .filter-toggle { flex: none; }
  :where(body[data-page=home], body[data-page=shop]) .shop-tools { flex: 1 1 0; min-width: 0; justify-content: flex-end; gap: 6px; }
  :where(body[data-page=home], body[data-page=shop]) .sort-wrap { flex: 0 1 auto; min-width: 0; }
  :where(body[data-page=home], body[data-page=shop]) .sort-wrap select { width: 100%; max-width: 100%; text-overflow: ellipsis; padding-right: 30px; }
  :where(body[data-page=home], body[data-page=shop]) .sort-wrap select, :where(body[data-page=home], body[data-page=shop]) .view-btn { height: 38px; }
  :where(body[data-page=home], body[data-page=shop]) .view-btn { flex: none; width: 38px; }
}
@media (max-width: 374px) {                            /* small phones: leave the sort box room to read */
  :where(body[data-page=home], body[data-page=shop]) .filter-toggle { padding: 0 10px; gap: 6px; font-size: 13.5px; }
  :where(body[data-page=home], body[data-page=shop]) .shop-tools { gap: 4px; }
  :where(body[data-page=home], body[data-page=shop]) .view-btn { width: 34px; }
  :where(body[data-page=home], body[data-page=shop]) .sort-wrap select { padding-left: 9px; padding-right: 24px; }
  :where(body[data-page=home], body[data-page=shop]) .sort-wrap i { right: 8px; }
}

@media (max-width: 767px) {
  /* hero on phones: the artwork as a sharp full-opacity band on top (cropped to its product side),
     fading into the hero colour, then the text below it – nothing sits over the photo */
  :where(body[data-page=home], body[data-page=shop]) .shop-hero { min-height: 0; flex-direction: column; align-items: stretch; }
  :where(body[data-page=home], body[data-page=shop]) .shop-hero-bg {
    position: relative; z-index: 0; inset: auto; width: 100%; height: 190px; flex-shrink: 0;
    background-size: cover; background-position: right center; animation: none;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent);
  }
  :where(body[data-page=home], body[data-page=shop]) .shop-hero::before { display: none; }
  :where(body[data-page=home], body[data-page=shop]) .shop-hero-inner { padding-block: 4px 26px; }
  :where(body[data-page=home], body[data-page=shop]) .shop-hero-title { font-size: 30px; }
  :where(body[data-page=home], body[data-page=shop]) .shop-hero-text { margin-top: 8px; font-size: 15px; }
  :where(body[data-page=home], body[data-page=shop]) .shop-hero-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
  :where(body[data-page=home], body[data-page=shop]) .shop-hero-feats li {
    width: auto; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 12px 6px; text-align: center;
    background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(11, 36, 88, .07);
  }
  :where(body[data-page=home], body[data-page=shop]) .shop-hero-feats .shf-ico { width: 38px; height: 38px; font-size: 16px; }
  :where(body[data-page=home], body[data-page=shop]) .shop-hero-feats b { font-size: 12.5px; line-height: 1.25; }
  :where(body[data-page=home], body[data-page=shop]) .shop-hero-feats small { margin-top: 2px; font-size: 11px; line-height: 1.3; }
  :where(body[data-page=home], body[data-page=shop]) .crumbs ol { font-size: 13px; }
  :where(body[data-page=home], body[data-page=shop]) .shop-grid, :where(body[data-page=home], body[data-page=shop]) .shop-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  :where(body[data-page=home], body[data-page=shop]) .shop-grid:not(.is-list), :where(body[data-page=home], body[data-page=shop]) .shop-grid--related { grid-auto-rows: 1fr; }   /* every card row the same height */
  :where(body[data-page=home], body[data-page=shop]) .shop-card { padding: 10px; }
  :where(body[data-page=home], body[data-page=shop]) .shop-card .p-media { height: 170px; }
  :where(body[data-page=home], body[data-page=shop]) .shop-card .p-name { font-size: 15px; }
  :where(body[data-page=home], body[data-page=shop]) .shop-card .p-desc { font-size: 11.5px; }
  :where(body[data-page=home], body[data-page=shop]) .shop-card .btn-cart { height: 40px; font-size: 13.5px; }
  :where(body[data-page=home], body[data-page=shop]) .p-cat, :where(body[data-page=home], body[data-page=shop]) .p-rx, :where(body[data-page=home], body[data-page=shop]) .p-otc { font-size: 11px; height: 22px; }
  /* list view: compact rows – square photo on the left, details on the right, price + icon cart button along the bottom */
  :where(body[data-page=home], body[data-page=shop]) .shop-grid.is-list { gap: 10px; }
  :where(body[data-page=home], body[data-page=shop]) .is-list .shop-card { flex-direction: row; align-items: stretch; gap: 12px; padding: 10px; }
  :where(body[data-page=home], body[data-page=shop]) .is-list .shop-card .p-media { width: 124px; height: auto; min-height: 156px; margin: 0; align-self: stretch; border-radius: 8px; }
  :where(body[data-page=home], body[data-page=shop]) .is-list .p-body { display: flex; flex-direction: column; min-width: 0; padding: 2px 0 0; }
  :where(body[data-page=home], body[data-page=shop]) .is-list .p-name { font-size: 15px; line-height: 1.25; }
  :where(body[data-page=home], body[data-page=shop]) .is-list .p-desc { font-size: 12px; margin-top: 2px; -webkit-line-clamp: 1; }
  :where(body[data-page=home], body[data-page=shop]) .is-list .p-summary { font-size: 12.5px; line-height: 1.45; margin-top: 4px; }
  :where(body[data-page=home], body[data-page=shop]) .is-list .p-meta { margin-top: 6px; gap: 6px; }
  :where(body[data-page=home], body[data-page=shop]) .is-list .p-buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; align-self: stretch; margin-top: auto; padding-top: 10px; border-top: 1px dashed #e3e8f0; text-align: left; }
  :where(body[data-page=home], body[data-page=shop]) .is-list .p-price { margin: 0; font-size: 18px; white-space: nowrap; }
  :where(body[data-page=home], body[data-page=shop]) .is-list .btn-cart { flex: none; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 10px; font-size: 0; gap: 0; }
  :where(body[data-page=home], body[data-page=shop]) .is-list .btn-cart i { font-size: 15px; }
  /* badge along the photo's bottom edge, heart + quick view stacked on its right edge */
  :where(body[data-page=home], body[data-page=shop]) .is-list .p-badge { left: 14px; top: auto; bottom: 14px; height: 20px; padding: 0 7px; font-size: 10.5px; border-radius: 5px; }
  :where(body[data-page=home], body[data-page=shop]) .is-list .p-wish, :where(body[data-page=home], body[data-page=shop]) .is-list .p-qv { left: 100px; right: auto; width: 28px; height: 28px; min-width: 28px; min-height: 28px; font-size: 13px; }
  :where(body[data-page=home], body[data-page=shop]) .is-list .p-wish { top: 14px; }
  :where(body[data-page=home], body[data-page=shop]) .is-list .p-qv { top: 48px; }
  :where(body[data-page=home], body[data-page=shop]) .shop-empty h3 { font-size: 19px; }
  :where(body[data-page=home], body[data-page=shop]) .shop-empty p { font-size: 14px; }
  :where(body[data-page=home], body[data-page=shop]) .pager button { min-width: 38px; height: 38px; font-size: 14px; }
  :where(body[data-page=home], body[data-page=shop]) .chip { height: 30px; font-size: 13px; padding: 0 12px; }
  :where(body[data-page=home], body[data-page=shop]) .cat-tiles { grid-template-columns: 1fr; }
  :where(body[data-page=home], body[data-page=shop]) .cat-card--mini { height: 140px; }

  :where(body[data-page=home], body[data-page=shop]) .pd-top { grid-template-columns: 1fr; gap: 24px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-title { font-size: 28px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-generic { font-size: 16px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-summary, :where(body[data-page=home], body[data-page=shop]) .pd-panel > p, :where(body[data-page=home], body[data-page=shop]) .pd-list li, :where(body[data-page=home], body[data-page=shop]) .pd-steps li { font-size: 15px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-price { font-size: 32px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-buy { gap: 10px; }
  :where(body[data-page=home], body[data-page=shop]) .qty { height: 44px; }
  :where(body[data-page=home], body[data-page=shop]) .qty-btn { width: 38px; }
  :where(body[data-page=home], body[data-page=shop]) .qty input { width: 44px; font-size: 16px; }              /* 16px stops iOS zooming in on focus */
  :where(body[data-page=home], body[data-page=shop]) .pd-cart, :where(body[data-page=home], body[data-page=shop]) .pd-now { height: 44px; min-width: 130px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-trust li { font-size: 13px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-trust i { font-size: 22px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-actions button { font-size: 14px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-highlights { grid-template-columns: 1fr 1fr; gap: 10px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-hl { padding: 12px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-hl b { font-size: 13px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-tablist { gap: 22px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-tablist button { font-size: 15px; padding: 14px 2px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-tabs-body { grid-template-columns: 1fr; }
  :where(body[data-page=home], body[data-page=shop]) .pd-h2 { font-size: 22px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-ingredients b, :where(body[data-page=home], body[data-page=shop]) .pd-faqs summary { font-size: 15px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-ingredients p, :where(body[data-page=home], body[data-page=shop]) .pd-faqs details p, :where(body[data-page=home], body[data-page=shop]) .pd-quick dt, :where(body[data-page=home], body[data-page=shop]) .pd-quick dd { font-size: 14px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-quick h3 { font-size: 18px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-promo { flex-direction: column; align-items: flex-start; }
  /* full card width so long category names wrap instead of running off the card */
  :where(body[data-page=home], body[data-page=shop]) .pd-promo-body { width: 100%; padding: 22px 18px 0; }
  :where(body[data-page=home], body[data-page=shop]) .pd-promo-title { font-size: 24px; overflow-wrap: anywhere; }
  :where(body[data-page=home], body[data-page=shop]) .pd-promo-sub { font-size: 17px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-promo .btn { height: auto; min-height: 44px; max-width: 100%; padding-block: 10px; font-size: 14px; white-space: normal; text-align: left; line-height: 1.3; }
  :where(body[data-page=home], body[data-page=shop]) .pd-promo-shots { padding: 0 18px 22px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-promo-shot { width: 80px; height: 96px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-related .sec-head { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
  :where(body[data-page=home], body[data-page=shop]) .pd-related .sec-title { font-size: 24px; }
  /* lightbox on phones: close button in its own band below the status bar / notch, arrows in a band
     above the home indicator, and the photo fitted between them so nothing overlaps the controls */
  :where(body[data-page=home], body[data-page=shop]) .lightbox { padding: calc(72px + var(--safe-t, 0px)) 12px calc(84px + var(--safe-b, 0px)); grid-template: minmax(0, 1fr) / minmax(0, 1fr); background: rgba(4,18,46,.97); }
  :where(body[data-page=home], body[data-page=shop]) .lightbox figure { width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 10px; }
  :where(body[data-page=home], body[data-page=shop]) .lightbox img { width: 100%; height: 100%; max-width: none; object-fit: contain; background: none; border-radius: 0; }
  :where(body[data-page=home], body[data-page=shop]) .lightbox img.is-shot { transform: none; }
  :where(body[data-page=home], body[data-page=shop]) .lightbox figcaption { font-size: 13px; text-align: center; }
  :where(body[data-page=home], body[data-page=shop]) .lb-close { top: calc(14px + var(--safe-t, 0px)); right: calc(14px + var(--safe-r, 0px)); width: 44px; height: 44px; font-size: 20px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
  :where(body[data-page=home], body[data-page=shop]) .lb-nav { top: auto; bottom: calc(18px + var(--safe-b, 0px)); }
}

@media (max-width: 420px) {
  :where(body[data-page=home], body[data-page=shop]) .pd-highlights { grid-template-columns: 1fr; }
  :where(body[data-page=home], body[data-page=shop]) .shop-hero-feats li { width: 100%; }
}

/* ##########################################################
   PAGE: about  ·  scope body[data-page="about"]
   ########################################################## */
/* ==========================================================
   MMatrics Pharmaceuticals – About Us (about.html)
   Follows the base section. The About artwork is 872px wide, so
   sizes use --a (1 pixel of that design) derived from --u.
   ========================================================== */

:where(body[data-page=about]) .ab { --a: calc(var(--u) * 749 / 872); --af: calc(var(--f) * .94); overflow: hidden; }
@media (min-width: 1100px) {                         /* line up with the site's centred width; the hero stays full-bleed */
  :where(body[data-page=about]) .ab > section:not(.ab-hero) { margin-inline: calc(var(--vw) * (1 - var(--site)) / 2); }
}

:where(body[data-page=about]) .ab-eyebrow {
  display: block; color: #0d8f9c; font-weight: 800;
  font-size: max(12px, calc(7.4 * var(--af))); letter-spacing: .42em; line-height: 1.3;
}
:where(body[data-page=about]) .ab-eyebrow--blue { color: #1d5fae; }
:where(body[data-page=about]) .ab-title { font-size: calc(21 * var(--af)); line-height: 1.2; letter-spacing: -.015em; }
:where(body[data-page=about]) .ab-blue { color: #0b5bc0; }
@keyframes abFadeUp { from { opacity: 0; transform: translateY(24px); } }

/* ==========================================================
   HERO
   ========================================================== */
:where(body[data-page=about]) .ab-hero {
  position: relative; height: calc(330 * var(--a)); isolation: isolate;
  background:
    radial-gradient(ellipse at 18% 30%, rgba(255,255,255,.8), transparent 60%),
    linear-gradient(180deg, #d9ebfd 0%, #e9f4fe 55%, #f1f8ff 100%);
}
:where(body[data-page=about]) .ab-hero-art {
  position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: calc(572 * var(--a));
  background-size: cover; background-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  animation: abArt 1.6s var(--ease) both;
}
@keyframes abArt { from { opacity: 0; transform: scale(1.06); } }
:where(body[data-page=about]) .ab-hero-leaf {
  position: absolute; left: calc(3 * var(--a)); top: calc(12 * var(--a));
  font-size: calc(24 * var(--af)); color: #13a07f; transform: rotate(-12deg);
  animation: floatY 4s ease-in-out infinite;
}
:where(body[data-page=about]) .ab-hero-content { position: absolute; left: calc(52 * var(--a)); top: calc(22 * var(--a)); width: calc(320 * var(--a)); }
:where(body[data-page=about]) .ab-hero-content > * { animation: abFadeUp .9s var(--ease) both; }
:where(body[data-page=about]) .ab-hero-title { animation-delay: .1s; }
:where(body[data-page=about]) .ab-hero-text { animation-delay: .2s; }
:where(body[data-page=about]) .ab-hero-feats { animation-delay: .3s; }
:where(body[data-page=about]) .ab-hero-title {
  margin-top: calc(5 * var(--a)); font-weight: 800; font-size: calc(36 * var(--af)); line-height: 1.04;
  letter-spacing: -.035em; color: #0b1f5c;
}
:where(body[data-page=about]) .ab-hero-title .line { display: block; white-space: nowrap; }
:where(body[data-page=about]) .ab-hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, #0a8f9c, #10a9ab 60%, #0a8f9c); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 6s ease-in-out infinite;
}
:where(body[data-page=about]) .ab-hero-text { margin-top: calc(8 * var(--a)); font-size: calc(10.4 * var(--af)); line-height: 1.5; color: #1c2a44; font-weight: 500; max-width: calc(290 * var(--a)); }
:where(body[data-page=about]) .ab-hero-feats { display: flex; gap: calc(14 * var(--a)); margin: calc(16 * var(--a)) 0 0 calc(-6 * var(--a)); }
:where(body[data-page=about]) .ahf { display: flex; align-items: center; gap: calc(9 * var(--a)); }
:where(body[data-page=about]) .ahf-icon {
  position: relative; width: calc(46 * var(--a)); height: calc(46 * var(--a)); border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: calc(19 * var(--af));
  box-shadow: inset 0 0 0 calc(3 * var(--a)) rgba(255,255,255,.6), 0 calc(4 * var(--a)) calc(10 * var(--a)) rgba(30,60,120,.08);
  transition: transform .45s var(--ease);
}
:where(body[data-page=about]) .ahf:hover .ahf-icon { transform: translateY(-4px) rotate(-8deg); }
:where(body[data-page=about]) .ahf-check { position: absolute; font-size: calc(7 * var(--af)); color: #fff; }
:where(body[data-page=about]) .ahf > span:last-child { font-size: max(13px, calc(8.2 * var(--af))); font-weight: 700; line-height: 1.35; color: #0b2a66; white-space: nowrap; }
:where(body[data-page=about]) .ahf-blue .ahf-icon { background: radial-gradient(circle at 35% 30%, #eaf4ff, #c3defb); color: #1a5ec4; }
:where(body[data-page=about]) .ahf-teal .ahf-icon { background: radial-gradient(circle at 35% 30%, #eefafd, #c6ebf5); color: #1b8fc4; }
:where(body[data-page=about]) .ahf-green .ahf-icon { background: radial-gradient(circle at 35% 30%, #f0fbf3, #cdeed7); color: #16996b; }
:where(body[data-page=about]) .ahf-green .ahf-check { font-size: calc(6 * var(--af)); margin-top: calc(4 * var(--a)); }

:where(body[data-page=about]) .ab-hero-script {
  position: absolute; right: calc(28 * var(--a)); top: calc(16 * var(--a)); width: calc(104 * var(--a));
  font-family: 'Caveat', cursive; font-weight: 700; font-size: calc(27 * var(--af)); line-height: .98; color: #0b2a7a;
  transform: rotate(-9deg); transform-origin: left top;
}
:where(body[data-page=about]) .ab-hero-script span { display: block; animation: abFadeUp .8s var(--ease) both; }
:where(body[data-page=about]) .ab-hero-script span:nth-child(2) { padding-left: calc(10 * var(--a)); animation-delay: .5s; }
:where(body[data-page=about]) .ab-hero-script span:nth-child(1) { animation-delay: .4s; }
:where(body[data-page=about]) .ab-hero-script span:nth-child(3) { animation-delay: .6s; }
:where(body[data-page=about]) .ab-hero-script span:nth-child(4) { padding-left: calc(28 * var(--a)); animation-delay: .7s; }
:where(body[data-page=about]) .ab-hero-script svg { display: block; width: calc(66 * var(--a)); margin: calc(4 * var(--a)) 0 0 calc(26 * var(--a)); overflow: visible; }
:where(body[data-page=about]) .ab-hero-script path {
  fill: none; stroke: #10a3a7; stroke-width: 3.2; stroke-linecap: round;
  stroke-dasharray: 80; stroke-dashoffset: 80; animation: abDraw 1.2s var(--ease) 1.1s forwards;
}
@keyframes abDraw { to { stroke-dashoffset: 0; } }

/* ==========================================================
   OUR STORY
   ========================================================== */
:where(body[data-page=about]) .ab-story {
  display: grid; grid-template-columns: calc(382 * var(--a)) calc(286 * var(--a)) 1fr; column-gap: calc(12 * var(--a));
  padding-right: calc(22 * var(--a)); background: #fefefe;
}
:where(body[data-page=about]) .ab-story-media { position: relative; aspect-ratio: 382 / 240; }
:where(body[data-page=about]) .ab-story-photo {                      /* arch: soft top-left, sweeping top-right */
  position: absolute; left: 15.2%; right: 4.4%; top: 2.5%; bottom: 3%; overflow: hidden;
  border-radius: 22% 48% calc(8 * var(--a)) calc(8 * var(--a)) / 26% 56% calc(8 * var(--a)) calc(8 * var(--a));
  box-shadow: 0 calc(8 * var(--a)) calc(22 * var(--a)) rgba(16,42,92,.12);
}
:where(body[data-page=about]) .ab-story-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 22% center; transition: transform 1.2s var(--ease); }
:where(body[data-page=about]) .ab-story-media:hover .ab-story-photo img { transform: scale(1.05); }
:where(body[data-page=about]) .ab-story-leaf {
  position: absolute; z-index: 1; left: -2%; top: 6%; width: 19%; height: auto; pointer-events: none;
  scale: -1 1; transform-origin: 50% 100%; animation: abSway 4s ease-in-out infinite alternate;
}
@keyframes abSway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
:where(body[data-page=about]) .ab-story-badge {
  position: absolute; left: 70.4%; top: 60.4%; z-index: 2;
  width: 29.3%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f4fcfa, #e2f5f0); box-shadow: 0 calc(6 * var(--a)) calc(18 * var(--a)) rgba(10,90,90,.12);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #0b2458; font-size: calc(11 * var(--af)); font-weight: 500; line-height: 1.28;
  animation: floatY 4.5s ease-in-out infinite;
}
:where(body[data-page=about]) .ab-badge-leaf {
  position: absolute; right: calc(4 * var(--a)); top: calc(-4 * var(--a));
  width: calc(28 * var(--a)); height: calc(28 * var(--a)); border-radius: 50% 0 50% 0;
  background: linear-gradient(135deg, #12a597, #0b8a80); color: #fff; display: grid; place-items: center;
  font-size: calc(11 * var(--af)); transform: rotate(-6deg);
}
:where(body[data-page=about]) .ab-story-text { padding-top: calc(23 * var(--a)); }
:where(body[data-page=about]) .ab-story-text .ab-title { margin-top: calc(5 * var(--a)); }
:where(body[data-page=about]) .ab-story-text p { margin-top: calc(9 * var(--a)); font-size: max(14px, calc(8.5 * var(--af))); line-height: 1.62; color: #55627a; }
:where(body[data-page=about]) .ab-story-text p + p { margin-top: calc(10 * var(--a)); }
:where(body[data-page=about]) .ab-story-list { padding-top: calc(19 * var(--a)); }
:where(body[data-page=about]) .ab-story-list li { display: flex; align-items: center; gap: calc(9 * var(--a)); height: calc(48 * var(--a)); position: relative; }
:where(body[data-page=about]) .ab-story-list li + li::before { content: ""; position: absolute; top: 0; left: calc(48 * var(--a)); right: 0; height: 1px; background: #e5ecf3; }
:where(body[data-page=about]) .asl-icon {
  width: calc(40 * var(--a)); height: calc(40 * var(--a)); border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #f1fbfc, #d8f0f2); color: #0f97a4; font-size: calc(16 * var(--af));
  transition: transform .5s var(--ease), background .4s, color .4s;
}
:where(body[data-page=about]) .ab-story-list li:hover .asl-icon { transform: rotateY(180deg); background: #0f97a4; color: #fff; }
:where(body[data-page=about]) .ab-story-list li > span:last-child { font-size: calc(8.6 * var(--af)); font-weight: 600; line-height: 1.45; color: #0b2458; }

/* ==========================================================
   STATS
   ========================================================== */
:where(body[data-page=about]) .ab-stats-wrap { padding: 0 calc(15 * var(--a)) 0 calc(14 * var(--a)); }
:where(body[data-page=about]) .ab-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; height: calc(93 * var(--a));
  border-radius: calc(10 * var(--a)); padding: 0 calc(20 * var(--a));
  background: linear-gradient(90deg, #fff1f2 0%, #fef8f7 30%, #fffaf8 60%, #fff3eb 100%);
  box-shadow: 0 calc(2 * var(--a)) calc(10 * var(--a)) rgba(200,120,110,.06);
}
:where(body[data-page=about]) .ab-stats li { display: flex; align-items: center; gap: calc(11 * var(--a)); position: relative; padding-left: calc(20 * var(--a)); }
:where(body[data-page=about]) .ab-stats li:first-child { padding-left: 0; }
:where(body[data-page=about]) .ab-stats li + li::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: #f0e1dd; }
:where(body[data-page=about]) .st-icon {
  width: calc(57 * var(--a)); height: calc(57 * var(--a)); border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-size: calc(24 * var(--af)); background: var(--st-bg); color: var(--st);
  transition: transform .5s var(--ease);
}
:where(body[data-page=about]) .ab-stats li:hover .st-icon { transform: translateY(-4px) rotate(-8deg) scale(1.05); }
:where(body[data-page=about]) .st-india {
  --india: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABgCAYAAAC3+ZRmAAAG/UlEQVR42u2dW2xUVRSGv5lOuQzWYuUicpNYBVRQSRUvSIIVlYgJYqoRJUTUBIL65IMYE1808RZRow9GFEWIJqLGSxC8pyrEGDHcLEGKQOkFrJQKtLQznfFhryaTcTqzz5lz2rP3YSX7aTrdc/7Ze6+1/vWvPSXo20hgFjAdOA20c8b6tKuBD4HDwFHgB+ARYNIZaP5vY4CPgXTW6AR+Ah4XQIeFAYySAq9HgSXAMqA067UYMAGYI+NyYDxQBpTL30yQVRiRbdxjOmARjdW1DrhR8/8lgDbgBHAIGCXgHZTV+Daw1+YVOAdoybEd3Ywk8BEwzmRAogVenwZUeLj954uziNsIWFTOoFIP5xsE3CNOwsoV5oeNAxYCg20DLAX8Kd7Na0dzvXhU61bYL0CDD/NWAlfaCNg+oNaHeYdJyGIdYCeBN4HdHs+bBE7ZnA0sAg54FI+lZeVW2RzAxoD7PATtjTDknjGgRrZnMWDtAmaGhbmISODZ6BKsZmCpRtJvlQ0BXncJ1jJTA9ZibYl4OSdgLQ8rWADXothXHbBabAIrWkSoEUEv3loLrAG6wgzYFE3apwHY4EM+ahxgZwlVU8gGA+eEidPvyy4FbpHYrBCwlSiePw502JwS5bPlcibpesluOfw3AguAoWEC62LgsyIi/SZgpaw+q+184H7gO1R1qJj0qA14CjjP1hxyHvAlqnzmFWPRAbyPoURiPqsG6jwEKnOkgF+BOyXlMt4qUJqKtM+jCXgSQ1nYTFsItPYDYL1b9BPgdlTFPDIAzztI5i5zE4dViDfrL2a0VDKIauA6YKIE1qcETL8D+CrgURnVEnA3oWh6LbvZQ5mAm9EjH3gjsAK4TCNQdmNxYDGwPWv+U8BqHEgbVsqHTgdgnAZ2Ak/IlvHyjH4GOJIn4H4LGKsTSqwKCFjZ59xa4CK8qcC/qMHrdctKywvaCGBTAAHr3aqrisgUSoG5wOeycnVTu+fJU7i5AW/Lal6PBpTe1qlNBp4G9ruYsx6YE+uDkqlBKXeCasNlFzg5qxagCjDXuGRpxgBTYznc6x0Sf0UCDFhKU/4ZAWYAD8sznV3EnIlsaioK3IWqSqcDPn6T7VXI5gPbPJqzNtPZRGUbmgDWcQkuSwrEVndTfNG5d2wBbstkqGeiKtJBByuFEseU50ltqsSLehF0t6BkDVdkH6BrDACrtzdgcR6gngP2eBBwN6J6E2pyhRKzgb8MASwJvAyMlu1RhtLLPusRUCckPpsnCylnRD8V1UdkStFmqRRW9ki0XoVqnihWr1uHkkBskFSpT1shKUc6xOMflMimIOhReYMbaxOv+q8FROluCRtSOoClXIB2QGKh40IxdxgO2D4hSrWIs3rgmIN/3p0huaySg7cN83VvEV3AjjqsRifEGw2TbP8Y5hdmJ+m2CMVc5IxxVD1xi4A3xgL9xIUCWpPOCmsr5EZzLN9p4tqno/okI4YDdq5ud3FMDrtGF0WDsdhjg4FLJM7rKfTgXahm0DThtahQPxGdP0yiKiYdljx8WnZNiwMhX7eQD0ldQd12ySdNtxTwhSToNajKl07LdJNgoG1DUZUR01OcP7KaVyNCTdcVKHC8pNslXJIh3j0pfPcIg7fiWlRTf2aKs1cAKxUGYkjGNjwofNdrkk86ulUgCjyA0m2Z6AGPoPoHNvfxejmqej5F+LMuVHF4pxPRciRHUDoLVQipQtX+YhKoBl0xuF6Yl/aBao+ZJN/GdDlEazMS9aCNFhTnHii7Cf3uj/4e6/Lw/AOm0290Iv3pRzuKkn62Bw2wyXirnPHKvkFdUxOoTpA4cGtfhYEBtGY57NuDBth41F0TQWIlEhJ3fR9Elz27iC5cP0YCeIcAX3w0GdgRMLACfbNKHFWzSwUArHdNuYZmNv0vsktKzteJKta8wgDr1pyokreJ+57YD5+rE1Uz+Eo8YLfkfHUY1j64SB7Ab4XOalNvf8q2C+Sb9zsvnIslLcwNKHV1Cn9pmoO2ANYDfIsqmvhlo4LcR+lGIrQD2OpzCDPSJsBOAJ/in56iDFUjtOoahs2oVr20TyFFIxbaDOB3H7zkJltCilyr80GURswrsLbiriXGGBsOvOrBLQNdwAfAVYTAKoGvi8wX3zP9jmpc3DxQ7xKww5LYh+pq5VoUVdzjkmY+FDbAEsIsNLt4bxMGKbG9vLy7waGSkYxW4vIwAuY2iB2Kt1fQW3c9vFdAGw+Yttbd4e+SWAtYl8vDO4G//FpgAWuV1MbpFqsH/g4jYElhMHY5fN9+QnovYu8X8FCeq1myxyH0fzPJWosD96J+HiNfUt4KPIZhF62V+CQS2Qn8LJF/SlZeqaROrcCPwAsoIVwnFv3UmBdbdDSq+WmqgHYARTw2m7h9/gPq7A/8FFbswwAAAABJRU5ErkJggg==);   /* inline: css masks can't load file:// images */
  display: block; width: calc(27 * var(--a)); height: calc(23 * var(--a)); background: currentColor;
  -webkit-mask: var(--india) center / contain no-repeat; mask: var(--india) center / contain no-repeat;
}
:where(body[data-page=about]) .ab-stats b { display: block; font-size: calc(21 * var(--af)); font-weight: 800; line-height: 1.1; color: #0b1f5c; letter-spacing: -.01em; }
:where(body[data-page=about]) .ab-stats strong { display: block; font-size: calc(10.6 * var(--af)); font-weight: 600; color: #0b2458; line-height: 1.4; }
:where(body[data-page=about]) .ab-stats small { display: block; font-size: max(13px, calc(7.6 * var(--af))); color: var(--muted); }
:where(body[data-page=about]) .st-pink   { --st: #e8395f; --st-bg: radial-gradient(circle at 35% 30%, #fff0f3, #fcd5de); }
:where(body[data-page=about]) .st-blue   { --st: #1a5ec4; --st-bg: radial-gradient(circle at 35% 30%, #f1f7ff, #d5e6fb); }
:where(body[data-page=about]) .st-orange { --st: #f2652a; --st-bg: radial-gradient(circle at 35% 30%, #fff1ea, #fcd6c4); }
:where(body[data-page=about]) .st-amber  { --st: #f2891e; --st-bg: radial-gradient(circle at 35% 30%, #fff8ee, #fde5c8); }

/* ==========================================================
   MISSION, VISION & VALUES
   ========================================================== */
:where(body[data-page=about]) .ab-mvv {
  display: grid; grid-template-columns: calc(184 * var(--a)) calc(181 * var(--a)) calc(181 * var(--a)) 1fr;
  grid-template-rows: auto minmax(calc(133 * var(--a)), auto); column-gap: calc(10 * var(--a)); row-gap: calc(8 * var(--a));
  padding: 0 0 0 calc(28 * var(--a));
}
:where(body[data-page=about]) .ab-mvv-head { grid-column: 1 / 4; align-self: end; }
:where(body[data-page=about]) .mvv-card {
  grid-row: 2; display: grid; grid-template-columns: calc(42 * var(--a)) 1fr; column-gap: calc(14 * var(--a)); align-items: start;
  padding: calc(10 * var(--a)) calc(10 * var(--a)) calc(10 * var(--a)) calc(11 * var(--a));
  border-radius: calc(8 * var(--a)); border: 1px solid #e6f0fa;
  background: linear-gradient(160deg, #eef6ff 0%, #f6fbff 70%);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
:where(body[data-page=about]) .mvv-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
:where(body[data-page=about]) .mvv-icon {
  width: calc(42 * var(--a)); height: calc(42 * var(--a)); border-radius: 50%; display: grid; place-items: center;
  font-size: calc(18 * var(--af)); background: var(--mvv-bg); color: var(--mvv);
  transition: transform .5s var(--ease);
}
:where(body[data-page=about]) .mvv-card:hover .mvv-icon { transform: rotate(-12deg) scale(1.08); }
:where(body[data-page=about]) .mvv-card h3 { margin-top: calc(14 * var(--a)); font-size: calc(11 * var(--af)); font-weight: 800; color: #0b2458; }
:where(body[data-page=about]) .mvv-card p { margin-top: calc(3 * var(--a)); font-size: max(14px, calc(7.8 * var(--af))); line-height: 1.65; color: #55627a; }
:where(body[data-page=about]) .mvv-card ul { margin-top: calc(3 * var(--a)); margin-left: calc(-14 * var(--a)); }
:where(body[data-page=about]) .mvv-card ul li { position: relative; padding-left: calc(14 * var(--a)); font-size: max(14px, calc(7.8 * var(--af))); line-height: 1.5; padding-block: .175em; color: #3c4a66; }
:where(body[data-page=about]) .mvv-card ul li::before {
  content: ""; position: absolute; left: calc(2 * var(--a)); top: .925em; width: calc(4.5 * var(--a)); height: calc(4.5 * var(--a));
  border-radius: 50%; background: #0b3e8f; translate: 0 -50%;
}
:where(body[data-page=about]) .mvv-pink  { --mvv: #e8336d; --mvv-bg: radial-gradient(circle at 35% 30%, #fff0f5, #fcd3e1); }
:where(body[data-page=about]) .mvv-teal  { --mvv: #11a0ad; --mvv-bg: radial-gradient(circle at 35% 30%, #eefbfd, #cdeef3); }
:where(body[data-page=about]) .mvv-green { --mvv: #13a28d; --mvv-bg: radial-gradient(circle at 35% 30%, #effbf8, #cdefe6); }

:where(body[data-page=about]) .ab-family {
  grid-column: 4; grid-row: 1 / 3; position: relative; margin-left: calc(4 * var(--a));
  background: linear-gradient(90deg, rgba(238,245,253,0) 0%, #eef5fd 55%, #e4eefb 100%);
}
:where(body[data-page=about]) .ab-family img {
  width: calc(172 * var(--a)); height: 100%; object-fit: cover;
  border-radius: calc(86 * var(--a)) calc(86 * var(--a)) calc(6 * var(--a)) calc(6 * var(--a));
}
:where(body[data-page=about]) .ab-family-script {
  position: absolute; left: calc(178 * var(--a)); top: calc(24 * var(--a));
  font-family: 'Caveat', cursive; font-weight: 700; font-size: calc(18 * var(--af)); line-height: 1.02; color: #0b2a7a;
  transform: rotate(-11deg);
}
:where(body[data-page=about]) .ab-family-heart { position: absolute; left: calc(212 * var(--a)); top: calc(90 * var(--a)); display: flex; align-items: center; gap: calc(6 * var(--a)); color: #10a3a7; font-size: calc(15 * var(--af)); }
:where(body[data-page=about]) .ab-family-heart i.fa-heart { animation: abBeat 1.6s ease-in-out infinite; }
:where(body[data-page=about]) .ab-tick { display: block; width: calc(14 * var(--a)); height: 2px; background: #10a3a7; border-radius: 2px; transform: rotate(-24deg); margin-top: calc(6 * var(--a)); }
@keyframes abBeat { 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(1.2); } }

/* ==========================================================
   QUALITY & SAFETY
   ========================================================== */
:where(body[data-page=about]) .ab-quality {
  position: relative; display: grid; grid-template-columns: calc(446 * var(--a)) 1fr; column-gap: calc(10 * var(--a));
  min-height: calc(198 * var(--a)); padding-right: calc(20 * var(--a));
}
:where(body[data-page=about]) .ab-decor-q { right: 0; top: calc(-40 * var(--a)); width: calc(50 * var(--a)); z-index: 2; }
:where(body[data-page=about]) .ab-q-media { position: relative; overflow: hidden; border-radius: 0 calc(8 * var(--a)) calc(8 * var(--a)) 0; }
:where(body[data-page=about]) .ab-q-media > img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; transition: transform 1.2s var(--ease); }
:where(body[data-page=about]) .ab-q-media:hover > img { transform: scale(1.05); }
:where(body[data-page=about]) .ab-play {
  position: absolute; left: 63.9%; top: 54.5%;
  display: flex; align-items: center; gap: calc(10 * var(--a)); color: #fff;
}
:where(body[data-page=about]) .ab-play-btn {
  position: relative; width: calc(50 * var(--a)); height: calc(50 * var(--a)); border-radius: 50%;
  background: #fff; color: #0b2463; display: grid; place-items: center; font-size: calc(16 * var(--af));
  box-shadow: 0 calc(6 * var(--a)) calc(18 * var(--a)) rgba(0,0,0,.18); transition: transform .4s var(--ease), background .3s, color .3s;
}
:where(body[data-page=about]) .ab-play-btn i { margin-left: calc(3 * var(--a)); }
:where(body[data-page=about]) .ab-play-btn::before, :where(body[data-page=about]) .ab-play-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.8);
  animation: abPulse 2.4s ease-out infinite;
}
:where(body[data-page=about]) .ab-play-btn::after { animation-delay: 1.2s; }
@keyframes abPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
:where(body[data-page=about]) .ab-play:hover .ab-play-btn { transform: scale(1.08); background: #0b2463; color: #fff; }
:where(body[data-page=about]) .ab-play-text { font-size: calc(9.2 * var(--af)); font-weight: 700; line-height: 1.3; text-shadow: 0 1px 6px rgba(0,30,80,.45); }

:where(body[data-page=about]) .ab-q-card {
  border-radius: calc(8 * var(--a)); padding: calc(17 * var(--a)) calc(22 * var(--a)) 0;
  background: linear-gradient(135deg, #eaf5fe 0%, #f3f9fe 60%, #ecf5fe 100%);
}
:where(body[data-page=about]) .ab-q-card .ab-title { margin-top: calc(5 * var(--a)); font-size: calc(22 * var(--af)); color: #0b2b5c; }
:where(body[data-page=about]) .ab-q-card p { margin-top: calc(7 * var(--a)); font-size: calc(10.2 * var(--af)); line-height: 1.5; color: #4f5b73; max-width: calc(290 * var(--a)); }
:where(body[data-page=about]) .ab-q-feats { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; margin-top: calc(16 * var(--a)); }
:where(body[data-page=about]) .ab-q-feats li { display: flex; align-items: center; gap: calc(6 * var(--a)); position: relative; padding-left: calc(10 * var(--a)); }
:where(body[data-page=about]) .ab-q-feats li:first-child { padding-left: 0; }
:where(body[data-page=about]) .ab-q-feats li + li::before { content: ""; position: absolute; left: 0; top: 5%; bottom: 5%; width: 1px; background: #d7e5f1; }
:where(body[data-page=about]) .ab-q-feats i { font-size: calc(17 * var(--af)); color: #0d9a9c; transition: transform .5s var(--ease); }
:where(body[data-page=about]) .ab-q-feats li:hover i { transform: translateY(-3px) rotateY(180deg); }
:where(body[data-page=about]) .ab-q-feats b { display: block; font-size: max(13px, calc(8 * var(--af))); color: #0b2458; line-height: 1.3; }
:where(body[data-page=about]) .ab-q-feats small { display: block; font-size: max(13px, calc(7 * var(--af))); color: var(--muted); }

/* ==========================================================
   PRODUCT CATEGORIES
   ========================================================== */
:where(body[data-page=about]) .ab-cats { padding: 0 calc(21 * var(--a)) 0 calc(28 * var(--a)); }
:where(body[data-page=about]) .ab-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10 * var(--a)); margin-top: calc(7 * var(--a)); }
:where(body[data-page=about]) .ab-cat {
  position: relative; height: calc(97 * var(--a)); border-radius: calc(7 * var(--a)); overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: calc(36 * var(--a)) 1fr; column-gap: calc(8 * var(--a)); align-content: start;
  padding: calc(8 * var(--a)) calc(8 * var(--a)); background: var(--c-bg);
  box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
:where(body[data-page=about]) .ab-cat::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 50%; left: -70%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg);
  transition: left .9s var(--ease);
}
:where(body[data-page=about]) .ab-cat:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
:where(body[data-page=about]) .ab-cat:hover::after { left: 130%; }
:where(body[data-page=about]) .ac-img {
  position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 58%;
  background-size: cover; background-position: var(--c-pos, right center);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%); mask-image: linear-gradient(90deg, transparent, #000 38%);
  transition: transform 1s var(--ease);
}
:where(body[data-page=about]) .ab-cat:hover .ac-img { transform: scale(1.08); }
:where(body[data-page=about]) .ac-icon {
  width: calc(36 * var(--a)); height: calc(36 * var(--a)); border-radius: 50%; display: grid; place-items: center;
  font-size: calc(16 * var(--af)); background: var(--c-icon-bg); color: var(--c);
  transition: transform .5s var(--ease);
}
:where(body[data-page=about]) .ab-cat:hover .ac-icon { transform: rotate(-12deg) scale(1.08); }
:where(body[data-page=about]) .ac-body { padding-top: calc(5 * var(--a)); }
:where(body[data-page=about]) .ac-body b { display: block; font-size: max(13px, calc(8.4 * var(--af))); font-weight: 800; color: #0b2458; white-space: nowrap; }
:where(body[data-page=about]) .ac-body span { display: block; margin-top: calc(3 * var(--a)); font-size: calc(8.6 * var(--af)); line-height: 1.55; color: #3c4d6e; }
:where(body[data-page=about]) .ac-link {
  position: absolute; left: calc(20 * var(--a)); bottom: calc(10 * var(--a));
  display: inline-flex; align-items: center; gap: calc(5 * var(--a)); font-size: max(13px, calc(7.8 * var(--af))); font-weight: 700; color: var(--c-link, #0b2458);
}
:where(body[data-page=about]) .ab-cat:hover .ac-link i { animation: arrowNudge .8s var(--ease) infinite; }
:where(body[data-page=about]) .ac-eye { --c: #0a6fd0; --c-bg: linear-gradient(90deg, #d9eafb, #e8f2fd); --c-icon-bg: radial-gradient(circle at 35% 30%, #e6f2ff, #c4ddf8); --c-pos: 55% 30%; }
:where(body[data-page=about]) .ac-tab { --c: #f0632a; --c-bg: linear-gradient(90deg, #fde9de, #fdf3ec); --c-icon-bg: radial-gradient(circle at 35% 30%, #fff1e7, #fdd6bf); }
:where(body[data-page=about]) .ac-vit { --c: #13915f; --c-link: #0d8a5f; --c-bg: linear-gradient(90deg, #dff4da, #ecf8e6); --c-icon-bg: radial-gradient(circle at 35% 30%, #effbe9, #cdeec4); }
:where(body[data-page=about]) .ac-syr { --c: #d93a62; --c-bg: linear-gradient(90deg, #fde2ea, #fdeef2); --c-icon-bg: radial-gradient(circle at 35% 30%, #fff0f4, #fbd2dd); }

/* ==========================================================
   OUR COMMITMENT
   ========================================================== */
:where(body[data-page=about]) .ab-commit {
  position: relative; isolation: isolate; min-height: calc(176 * var(--a));
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(46 * var(--a)) 0 calc(97 * var(--a));
}
:where(body[data-page=about]) .ab-commit-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform 6s ease-out; }
:where(body[data-page=about]) .ab-commit:hover .ab-commit-bg { transform: scale(1.04); }
:where(body[data-page=about]) .ab-commit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(246,250,255,0) 0%, rgba(246,250,255,.62) 12%, rgba(246,250,255,.5) 34%, rgba(246,250,255,0) 46%),
    linear-gradient(270deg, rgba(255,253,246,.62) 0%, rgba(255,253,246,.35) 18%, rgba(255,253,246,0) 26%);
}
:where(body[data-page=about]) .ab-commit-text { max-width: calc(300 * var(--a)); margin-top: calc(-4 * var(--a)); }
:where(body[data-page=about]) .ab-commit-title { margin-top: calc(4 * var(--a)); font-size: calc(23.5 * var(--af)); line-height: 1.08; color: #0b2a6b; letter-spacing: -.02em; }
:where(body[data-page=about]) .ab-commit-text p { margin-top: calc(7 * var(--a)); font-size: calc(9 * var(--af)); line-height: 1.45; color: #2e3a55; font-weight: 500; max-width: calc(255 * var(--a)); }
:where(body[data-page=about]) .ab-commit-text .btn { margin-top: calc(11 * var(--a)); height: calc(26 * var(--a)); min-width: calc(124 * var(--a)); font-size: max(13.5px, calc(8.2 * var(--af))); border-radius: calc(4 * var(--a)); }
:where(body[data-page=about]) .ab-commit-list { width: calc(136 * var(--a)); }
:where(body[data-page=about]) .ab-commit-list li {
  display: flex; align-items: center; gap: calc(9 * var(--a)); height: calc(33 * var(--a)); position: relative;
  font-size: max(14px, calc(8.4 * var(--af))); font-weight: 700; color: #1c2a44;
}
:where(body[data-page=about]) .ab-commit-list li + li::before { content: ""; position: absolute; top: 0; left: calc(35 * var(--a)); right: 0; height: 1px; background: rgba(170,180,170,.4); }
:where(body[data-page=about]) .acl-icon {
  width: calc(26 * var(--a)); height: calc(26 * var(--a)); border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #f0fbf4, #d2f0de); color: #0f8a5f; font-size: calc(11 * var(--af));
  box-shadow: 0 0 0 calc(2 * var(--a)) rgba(255,255,255,.7); transition: transform .5s var(--ease), background .4s, color .4s;
}
:where(body[data-page=about]) .ab-commit-list li:hover .acl-icon { transform: rotate(-12deg) scale(1.1); background: #0f8a5f; color: #fff; }

/* ==========================================================
   CERTIFICATIONS + PARTNER
   ========================================================== */
:where(body[data-page=about]) .ab-cert {
  position: relative; display: grid; grid-template-columns: calc(392 * var(--a)) 1fr calc(301 * var(--a)); align-items: start;
  padding: calc(14 * var(--a)) calc(20 * var(--a)) calc(8 * var(--a)) calc(28 * var(--a));
  background: linear-gradient(90deg, #fff 0%, #fff 45%, #f1f6fe 62%, #fff 100%);
}
:where(body[data-page=about]) .ab-cert-list { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: calc(4 * var(--a)); background: #fbfcfd; border-radius: calc(6 * var(--a)); }
:where(body[data-page=about]) .ab-cert-list li {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(9 * var(--a)) 0 calc(7 * var(--a)); font-size: max(14px, calc(7.8 * var(--af))); line-height: 1.4; color: var(--muted);
}
:where(body[data-page=about]) .ab-cert-list li + li::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px; background: linear-gradient(180deg, transparent, #e0e7f0 25%, #e0e7f0 75%, transparent); }
:where(body[data-page=about]) .ab-cert-list img { width: calc(48 * var(--a)); height: calc(48 * var(--a)); border-radius: 50%; margin-bottom: calc(6 * var(--a)); transition: transform .6s var(--ease); }
:where(body[data-page=about]) .ab-cert-list li:hover img { transform: rotateY(360deg) scale(1.06); }
:where(body[data-page=about]) .ab-cert-list b { font-size: max(13px, calc(8.2 * var(--af))); color: #0b2458; font-weight: 800; }
:where(body[data-page=about]) .ab-cert-list span { color: #4f5b73; }
:where(body[data-page=about]) .ab-cert-leaf {
  left: calc(440 * var(--a)); top: calc(15 * var(--a)); width: calc(105 * var(--a));
  filter: drop-shadow(0 calc(6 * var(--a)) calc(10 * var(--a)) rgba(40,120,60,.18));
}
:where(body[data-page=about]) .ab-partner {
  grid-column: 3; position: relative; overflow: hidden; height: calc(107 * var(--a)); border-radius: calc(8 * var(--a));
  background: linear-gradient(90deg, #d9edfc 0%, #e3f1fd 60%, #e8f3fd 100%);
  box-shadow: var(--shadow-sm); transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
:where(body[data-page=about]) .ab-partner:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
:where(body[data-page=about]) .ab-partner-img {
  position: absolute; right: 0; top: 0; height: 100%; width: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%);
  transition: transform 1s var(--ease);
}
:where(body[data-page=about]) .ab-partner:hover .ab-partner-img { transform: scale(1.06); }
:where(body[data-page=about]) .ab-partner-body { position: relative; padding: calc(10 * var(--a)) 0 0 calc(24 * var(--a)); }
:where(body[data-page=about]) .ab-partner h3 { font-size: calc(14.4 * var(--af)); font-weight: 800; color: #0b2458; }
:where(body[data-page=about]) .ab-partner p { margin-top: calc(4 * var(--a)); font-size: calc(8.6 * var(--af)); line-height: 1.5; color: #1c2a44; }
:where(body[data-page=about]) .ab-partner .btn { margin-top: calc(9 * var(--a)); height: calc(27 * var(--a)); min-width: calc(101 * var(--a)); font-size: max(13.5px, calc(8.2 * var(--af))); border-radius: calc(4 * var(--a)); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1099px) {
  :where(body[data-page=about]) .ab { --a: 1.3px; }
  :where(body[data-page=about]) .ab-eyebrow { font-size: 11px; }

  :where(body[data-page=about]) .ab-hero { height: auto; padding: 40px var(--gutter) 0; display: flex; flex-direction: column; }
  :where(body[data-page=about]) .ab-hero-content { position: relative; left: auto; top: auto; width: auto; max-width: 560px; }
  :where(body[data-page=about]) .ab-hero-title { font-size: 46px; }
  :where(body[data-page=about]) .ab-hero-text { font-size: 16px; max-width: 520px; }
  :where(body[data-page=about]) .ab-hero-feats { margin-left: 0; flex-wrap: wrap; }
  :where(body[data-page=about]) .ab-hero-art {
    position: relative; inset: auto; z-index: 0; width: calc(100% + 2 * var(--gutter)); margin: 24px calc(-1 * var(--gutter)) 0;
    aspect-ratio: 572 / 330; -webkit-mask-image: none; mask-image: none;
  }
  :where(body[data-page=about]) .ab-hero-script { top: 40px; right: var(--gutter); }

  :where(body[data-page=about]) .ab-story { grid-template-columns: 1fr 1fr; padding: 0 var(--gutter) 0 0; row-gap: 24px; }
  :where(body[data-page=about]) .ab-story-list { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; padding: 0 0 0 var(--gutter); }
  :where(body[data-page=about]) .ab-story-list li + li::before { display: none; }

  :where(body[data-page=about]) .ab-stats-wrap { padding: 20px var(--gutter) 0; }
  :where(body[data-page=about]) .ab-stats { grid-template-columns: 1fr 1fr; height: auto; padding: 20px; row-gap: 22px; }
  :where(body[data-page=about]) .ab-stats li:nth-child(3) { padding-left: 0; }
  :where(body[data-page=about]) .ab-stats li:nth-child(3)::before { display: none; }

  :where(body[data-page=about]) .ab-mvv { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; padding: 24px var(--gutter) 0; row-gap: 12px; }
  :where(body[data-page=about]) .mvv-card { grid-row: auto; }
  :where(body[data-page=about]) .ab-family { grid-column: 1 / -1; grid-row: auto; margin: 0; height: 240px; }

  :where(body[data-page=about]) .ab-quality { grid-template-columns: 1fr; height: auto; row-gap: 14px; padding: 0 var(--gutter); }
  :where(body[data-page=about]) .ab-q-media { border-radius: 10px; aspect-ratio: 446 / 198; }
  :where(body[data-page=about]) .ab-q-card { padding-bottom: 20px; }
  :where(body[data-page=about]) .ab-q-card p { max-width: none; }
  :where(body[data-page=about]) .ab-decor-q { display: none; }

  :where(body[data-page=about]) .ab-cats { padding: 24px var(--gutter) 0; }
  :where(body[data-page=about]) .ab-cat-grid { grid-template-columns: 1fr 1fr; }

  :where(body[data-page=about]) .ab-commit { height: auto; padding: 40px var(--gutter); flex-direction: column; align-items: flex-start; gap: 24px; }
  :where(body[data-page=about]) .ab-commit::before { background: linear-gradient(90deg, rgba(246,250,255,.8), rgba(246,250,255,.35) 70%, rgba(246,250,255,.15)); }
  :where(body[data-page=about]) .ab-commit-list { width: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  :where(body[data-page=about]) .ab-commit-list li + li::before { display: none; }

  :where(body[data-page=about]) .ab-cert { grid-template-columns: 1fr; row-gap: 20px; padding: 24px var(--gutter); background: #fff; }
  :where(body[data-page=about]) .ab-cert-leaf { display: none; }
  :where(body[data-page=about]) .ab-partner { grid-column: auto; }
}

@media (max-width: 767px) {
  :where(body[data-page=about]) .ab { --a: 1.45px; }
  :where(body[data-page=about]) .ab-hero-title { font-size: 36px; }
  :where(body[data-page=about]) .ab-hero-title .line { white-space: normal; }
  :where(body[data-page=about]) .ab-hero-text { font-size: 15px; }
  :where(body[data-page=about]) .ab-hero-script { display: none; }
  :where(body[data-page=about]) .ab-hero-leaf { font-size: 22px; }

  :where(body[data-page=about]) .ab-story { grid-template-columns: 1fr; padding: 0; }
  :where(body[data-page=about]) .ab-story-text, :where(body[data-page=about]) .ab-story-list { padding-inline: var(--gutter); }
  :where(body[data-page=about]) .ab-story-media { margin-right: var(--gutter); }
  :where(body[data-page=about]) .ab-story-list { grid-template-columns: 1fr; }

  :where(body[data-page=about]) .ab-stats { grid-template-columns: 1fr; }
  :where(body[data-page=about]) .ab-stats li { padding-left: 0 !important; }
  :where(body[data-page=about]) .ab-stats li::before { display: none; }

  :where(body[data-page=about]) .ab-mvv { grid-template-columns: 1fr; }
  :where(body[data-page=about]) .ab-mvv-head { grid-column: 1; }
  :where(body[data-page=about]) .ab-family { grid-column: 1; height: 220px; }
  :where(body[data-page=about]) .ab-family img { width: 50%; }
  :where(body[data-page=about]) .ab-family-script { left: 54%; }
  :where(body[data-page=about]) .ab-family-heart { left: 64%; top: 150px; }

  :where(body[data-page=about]) .ab-q-feats { grid-template-columns: 1fr 1fr; row-gap: 14px; justify-content: stretch; }
  :where(body[data-page=about]) .ab-q-feats li { padding-left: 0; }
  :where(body[data-page=about]) .ab-q-feats li::before { display: none; }
  :where(body[data-page=about]) .ab-play { left: 50%; top: 50%; translate: -50% -50%; }

  :where(body[data-page=about]) .ab-cat-grid { grid-template-columns: 1fr; }
  :where(body[data-page=about]) .ab-cat { height: 150px; }

  :where(body[data-page=about]) .ab-commit-list { grid-template-columns: 1fr; }
  :where(body[data-page=about]) .ab-cert-list { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  :where(body[data-page=about]) .ab-cert-list li:nth-child(3)::before { display: none; }
  :where(body[data-page=about]) .ab-partner { height: auto; padding-bottom: 20px; }
  :where(body[data-page=about]) .ab-partner-img { opacity: .35; }
}

/* ##########################################################
   PAGE: blog  ·  scope body[data-page="blog"]
   ########################################################## */
/* ==========================================================
   MMatrics Pharmaceuticals – health blog (blog.html) and
   article page (blog-details.html). Follows the base section
   and uses the same design unit (--u) and tokens.
   ========================================================== */

:where(body[data-page=blog]) select { font: inherit; }

/* topic tones */
:where(body[data-page=blog]) .tone-blue   { --tone: #0a6fc9; --tone-2: #2b9af0; --tone-bg: #e7f2fd; }
:where(body[data-page=blog]) .tone-green  { --tone: #0d8a5f; --tone-2: #27c08a; --tone-bg: #e5f6ee; }
:where(body[data-page=blog]) .tone-orange { --tone: #e2591c; --tone-2: #f79a3e; --tone-bg: #fff0e6; }
:where(body[data-page=blog]) .tone-pink   { --tone: #d6347f; --tone-2: #f46aa4; --tone-bg: #fde9f3; }
:where(body[data-page=blog]) .tone-teal   { --tone: #038b9c; --tone-2: #1fc2c4; --tone-bg: #e1f6f7; }
:where(body[data-page=blog]) .tone-navy   { --tone: #0b3e8f; --tone-2: #2a6fd6; --tone-bg: #e8eef9; }

:where(body[data-page=blog]) .bl, :where(body[data-page=blog]) .bd { overflow: clip; }
:where(body[data-page=blog]) .bl-eyebrow { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); color: var(--teal); font-weight: 800; font-size: max(11px, calc(7.4 * var(--f))); letter-spacing: .38em; }
:where(body[data-page=blog]) .bl-eyebrow::before { content: ""; width: calc(16 * var(--u)); height: 2px; border-radius: 2px; background: linear-gradient(90deg, #15b1a2, #1d5fc8); }
@keyframes blUp { from { opacity: 0; transform: translateY(26px); } }
@keyframes blIn { from { opacity: 0; transform: translateY(30px) scale(.97); } }

/* ---------- breadcrumb ---------- */
:where(body[data-page=blog]) .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--u)); padding: calc(8 * var(--u)) 0; font-size: max(12px, calc(7.4 * var(--f))); color: var(--muted); }
:where(body[data-page=blog]) .crumbs li { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); }
:where(body[data-page=blog]) .crumbs li + li::before {
  content: ""; width: calc(5 * var(--f)); height: calc(5 * var(--f)); min-width: 8px; min-height: 8px; color: #9aa6bb;
  background: currentColor; -webkit-mask: var(--ico-chevron) center / contain no-repeat; mask: var(--ico-chevron) center / contain no-repeat;
}
:where(body[data-page=blog]) .crumbs a { color: #3c4a66; transition: color .3s; }
:where(body[data-page=blog]) .crumbs a:hover { color: var(--blue); }
:where(body[data-page=blog]) .crumbs li:last-child { color: var(--navy-2); font-weight: 600; }
:where(body[data-page=blog]) .crumbs i.fa-house { color: var(--navy-2); margin-right: 2px; }

/* ---------- shared bits: pill, avatar, byline ---------- */
:where(body[data-page=blog]) .bl-pill {
  display: inline-flex; align-items: center; gap: calc(3.5 * var(--u)); white-space: nowrap;
  padding: calc(2.4 * var(--u)) calc(7 * var(--u)); border-radius: 99px;
  background: var(--tone-bg); color: var(--tone); font-size: max(11px, calc(6.8 * var(--f))); font-weight: 700;
  transition: background .3s, color .3s;
}
:where(body[data-page=blog]) .bl-pill:hover { background: var(--tone); color: #fff; }
:where(body[data-page=blog]) .bl-avatar {
  flex-shrink: 0; width: calc(20 * var(--u)); height: calc(20 * var(--u)); min-width: 34px; min-height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: max(11px, calc(6.6 * var(--f))); letter-spacing: .04em;
  background: linear-gradient(135deg, #0b3e8f, #0aa3ad); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #cfe2f6;
}
:where(body[data-page=blog]) .bl-by { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); min-width: 0; }
:where(body[data-page=blog]) .bl-by b { display: block; font-size: max(12px, calc(7.4 * var(--f))); color: var(--navy-2); line-height: 1.3; }
:where(body[data-page=blog]) .bl-by small { display: block; font-size: max(11px, calc(6.8 * var(--f))); color: var(--muted); }
:where(body[data-page=blog]) .bl-mins { font-size: max(11.5px, calc(7 * var(--f))); color: var(--muted); white-space: nowrap; }
:where(body[data-page=blog]) .bl-mins i { margin-right: 3px; }

/* ==========================================================
   LISTING HERO
   ========================================================== */
:where(body[data-page=blog]) .bl-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(circle at 8% 20%, rgba(252, 209, 220, .75), transparent 32%),
    radial-gradient(circle at 30% 100%, rgba(254, 232, 213, .8), transparent 35%),
    radial-gradient(circle at 85% 15%, rgba(205, 228, 253, .95), transparent 40%),
    linear-gradient(120deg, #fff6f8 0%, #f3f6ff 50%, #e8f3fe 100%);
}
:where(body[data-page=blog]) .bl-hero::before {                     /* dotted texture */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45;
  background-image: radial-gradient(rgba(11, 62, 143, .18) 1px, transparent 1.2px);
  background-size: calc(12 * var(--u)) calc(12 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, transparent 85%); mask-image: linear-gradient(90deg, transparent, #000 40%, transparent 85%);
}
:where(body[data-page=blog]) .bl-hero .decor { z-index: -1; }
:where(body[data-page=blog]) .bl-hero-leaf-l { left: 0; top: calc(20 * var(--u)); width: calc(26 * var(--u)); }
:where(body[data-page=blog]) .bl-hero-leaf-r { right: 0; bottom: calc(-40 * var(--u)); width: calc(24 * var(--u)); }
:where(body[data-page=blog]) .bl-hero-inner {
  display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: calc(20 * var(--u));
  padding: calc(6 * var(--u)) calc(30 * var(--u)) calc(26 * var(--u));
}
:where(body[data-page=blog]) .bl-hero-text > * { animation: blUp .8s var(--ease) both; }
:where(body[data-page=blog]) .bl-hero-text > :nth-child(2) { animation-delay: .08s; }
:where(body[data-page=blog]) .bl-hero-text > :nth-child(3) { animation-delay: .16s; }
:where(body[data-page=blog]) .bl-hero-text > :nth-child(4) { animation-delay: .24s; }
:where(body[data-page=blog]) .bl-hero-text > :nth-child(5) { animation-delay: .32s; }
:where(body[data-page=blog]) .bl-hero-text > :nth-child(6) { animation-delay: .4s; }
:where(body[data-page=blog]) .bl-hero-text .crumbs ol { padding-top: 0; }
:where(body[data-page=blog]) .bl-hero-title {
  margin-top: calc(6 * var(--u));
  font-size: calc(30 * var(--f)); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--navy);
}
:where(body[data-page=blog]) .bl-hero-title em {
  position: relative; display: inline-block; font-style: normal;
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.32em; line-height: .8; letter-spacing: 0;
  background: linear-gradient(90deg, #0b5bc0, #0aa3ad); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-inline: .04em;
}
:where(body[data-page=blog]) .bl-hero-title em svg { position: absolute; left: 0; bottom: -.12em; width: 100%; height: .3em; overflow: visible; }
:where(body[data-page=blog]) .bl-hero-title em path { fill: none; stroke: #f24d82; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; animation: blDraw 1.2s var(--ease) .8s forwards; }
@keyframes blDraw { to { stroke-dashoffset: 0; } }
:where(body[data-page=blog]) .bl-hero-sub { margin-top: calc(9 * var(--u)); max-width: calc(290 * var(--u)); font-size: calc(9.6 * var(--f)); line-height: 1.6; color: #34405c; }

:where(body[data-page=blog]) .bl-search {
  display: flex; align-items: center; margin-top: calc(13 * var(--u)); max-width: calc(300 * var(--u));
  height: calc(30 * var(--u)); min-height: 50px; padding: 4px 4px 4px calc(11 * var(--u));
  background: #fff; border-radius: 99px; border: 1px solid #dfe7f3;
  box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(16, 42, 92, .1);
  transition: box-shadow .35s var(--ease), border-color .35s;
}
:where(body[data-page=blog]) .bl-search:focus-within { border-color: #8fb8ea; box-shadow: 0 0 0 4px rgba(11, 91, 192, .12), 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(16, 42, 92, .12); }
:where(body[data-page=blog]) .bl-search > i { color: #7d8aa3; font-size: max(14px, calc(8 * var(--f))); }
:where(body[data-page=blog]) .bl-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; padding: 0 calc(7 * var(--u)); font-size: max(14px, calc(8.4 * var(--f))); color: var(--text); }
:where(body[data-page=blog]) .bl-search input::-webkit-search-cancel-button { cursor: pointer; }
:where(body[data-page=blog]) .bl-search button {
  height: 100%; padding: 0 calc(14 * var(--u)); border-radius: 99px; color: #fff; font-weight: 700; font-size: max(13px, calc(8 * var(--f)));
  background: linear-gradient(90deg, #062e6f, #0b5bc0, #0aa3ad); background-size: 200% 100%; transition: background-position .5s var(--ease);
}
:where(body[data-page=blog]) .bl-search button:hover { background-position: 100% 0; }

:where(body[data-page=blog]) .bl-hero-stats { display: flex; gap: calc(20 * var(--u)); margin-top: calc(15 * var(--u)); }
:where(body[data-page=blog]) .bl-hero-stats li { position: relative; }
:where(body[data-page=blog]) .bl-hero-stats li + li { padding-left: calc(20 * var(--u)); }
:where(body[data-page=blog]) .bl-hero-stats li + li::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1px; background: #cdd8e8; }
:where(body[data-page=blog]) .bl-hero-stats b { display: block; font-size: calc(18 * var(--f)); font-weight: 800; color: var(--navy); line-height: 1.1; }
:where(body[data-page=blog]) .bl-hero-stats span { font-size: max(11.5px, calc(7.2 * var(--f))); color: var(--muted); font-weight: 600; }

/* collage of the latest covers */
:where(body[data-page=blog]) .bl-collage { position: relative; height: calc(222 * var(--u)); animation: blUp 1s var(--ease) .2s both; }
:where(body[data-page=blog]) .blc {
  position: absolute; display: block; overflow: hidden; background: #fff;
  border: calc(4 * var(--u)) solid #fff; border-radius: calc(10 * var(--u));
  box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(16, 42, 92, .2);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), z-index 0s .3s;
}
:where(body[data-page=blog]) .blc img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(6 * var(--u)); transform: scale(1.06); transition: transform 1.2s var(--ease); }
:where(body[data-page=blog]) .blc-1 { z-index: 2; left: calc(28 * var(--u)); top: calc(4 * var(--u)); width: calc(220 * var(--u)); height: calc(128 * var(--u)); transform: rotate(-3deg); }
:where(body[data-page=blog]) .blc-2 { z-index: 3; right: 0; bottom: calc(6 * var(--u)); width: calc(160 * var(--u)); height: calc(108 * var(--u)); transform: rotate(4deg); }
:where(body[data-page=blog]) .blc-3 { z-index: 1; left: 0; bottom: 0; width: calc(140 * var(--u)); height: calc(92 * var(--u)); transform: rotate(2.5deg); }
:where(body[data-page=blog]) .blc:hover { z-index: 5; transform: rotate(0) translateY(-6px) scale(1.03); box-shadow: 0 calc(20 * var(--u)) calc(44 * var(--u)) rgba(16, 42, 92, .28); transition-delay: 0s; }
:where(body[data-page=blog]) .blc:hover img { transform: scale(1.14); }
:where(body[data-page=blog]) .blc-cap {
  position: absolute; left: calc(6 * var(--u)); bottom: calc(6 * var(--u));
  display: inline-flex; align-items: center; gap: 5px; padding: calc(2.5 * var(--u)) calc(7 * var(--u)); border-radius: 99px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); color: var(--navy-2); font-size: max(11px, calc(6.6 * var(--f))); font-weight: 700;
}
:where(body[data-page=blog]) .blc-cap i { color: var(--teal); }
:where(body[data-page=blog]) .blc-chip {
  position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: calc(5 * var(--u));
  padding: calc(5 * var(--u)) calc(9 * var(--u)); border-radius: calc(8 * var(--u)); background: #fff;
  box-shadow: var(--shadow-md); font-size: max(12px, calc(7.4 * var(--f))); font-weight: 600; color: var(--navy-2); white-space: nowrap;
  animation: floatY 3.6s ease-in-out infinite;
}
:where(body[data-page=blog]) .blc-chip i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); min-width: 26px; min-height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .85em; }
:where(body[data-page=blog]) .blc-chip-a { right: calc(18 * var(--u)); top: calc(10 * var(--u)); }
:where(body[data-page=blog]) .blc-chip-a i { background: linear-gradient(135deg, #0b5bc0, #0aa3ad); }
:where(body[data-page=blog]) .blc-chip-b { left: calc(118 * var(--u)); bottom: calc(-4 * var(--u)); animation-delay: 1.2s; }
:where(body[data-page=blog]) .blc-chip-b i { background: linear-gradient(135deg, #f24d82, #f79a3e); }

/* ==========================================================
   FEATURED POST
   ========================================================== */
:where(body[data-page=blog]) .bl-featured-wrap { position: relative; }
:where(body[data-page=blog]) .bl-feat {
  position: relative; display: grid; grid-template-columns: 1.12fr 1fr; overflow: hidden;
  margin-inline: calc(13 * var(--u)); background: #fff; border-radius: calc(12 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) rgba(16, 42, 92, .12);
}
:where(body[data-page=blog]) .bl-feat[hidden] { display: none; }
:where(body[data-page=blog]) .bl-feat::after {                       /* gradient frame */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1.5px;
  background: linear-gradient(120deg, #1d5fc8, #15b1a2 40%, #f24d82);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
:where(body[data-page=blog]) .bl-feat-media { position: relative; display: block; min-height: calc(210 * var(--u)); overflow: hidden; }
:where(body[data-page=blog]) .bl-feat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 1.4s var(--ease); }
:where(body[data-page=blog]) .bl-feat:hover .bl-feat-media img { transform: scale(1.12); }
:where(body[data-page=blog]) .bl-feat-ribbon {
  position: absolute; left: calc(12 * var(--u)); top: calc(12 * var(--u));
  display: inline-flex; align-items: center; gap: 6px; padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: 99px;
  background: linear-gradient(90deg, #f24d82, #f79a3e); color: #fff; font-weight: 800; font-size: max(11.5px, calc(7 * var(--f)));
  box-shadow: 0 6px 16px rgba(242, 77, 130, .35);
}
:where(body[data-page=blog]) .bl-feat-ribbon i { animation: blSpin 6s linear infinite; }
@keyframes blSpin { to { transform: rotate(360deg); } }
:where(body[data-page=blog]) .bl-feat-body { display: flex; flex-direction: column; justify-content: center; padding: calc(20 * var(--u)) calc(24 * var(--u)); }
:where(body[data-page=blog]) .bl-feat-body h2 { margin-top: calc(9 * var(--u)); font-size: calc(18 * var(--f)); line-height: 1.25; font-weight: 800; color: var(--navy); letter-spacing: -.015em; }
:where(body[data-page=blog]) .bl-feat-body h2 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease), color .3s; }
:where(body[data-page=blog]) .bl-feat-body h2 a:hover { background-size: 100% 2px; color: var(--blue); }
:where(body[data-page=blog]) .bl-feat-body > p { margin-top: calc(7 * var(--u)); font-size: calc(8.8 * var(--f)); color: #4a5570; line-height: 1.65; }
:where(body[data-page=blog]) .bl-feat-points { margin-top: calc(10 * var(--u)); display: grid; gap: calc(5 * var(--u)); }
:where(body[data-page=blog]) .bl-feat-points li { display: flex; gap: calc(6 * var(--u)); font-size: calc(8.2 * var(--f)); color: #2f3a52; line-height: 1.5; }
:where(body[data-page=blog]) .bl-feat-points i { color: #10a37a; margin-top: .25em; }
:where(body[data-page=blog]) .bl-feat .bl-card-foot { margin-top: calc(14 * var(--u)); padding-top: calc(12 * var(--u)); }

/* ==========================================================
   BROWSE: tabs, toolbar, grid
   ========================================================== */
:where(body[data-page=blog]) .bl-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
:where(body[data-page=blog]) .bl-sec-head .eyebrow { font-size: max(11px, calc(7.6 * var(--f))); }
:where(body[data-page=blog]) .bl-sec-head .sec-title { margin-top: calc(2 * var(--u)); }
:where(body[data-page=blog]) .bl-browse { padding-inline: calc(30 * var(--u)); scroll-margin-top: calc(50 * var(--u)); }

:where(body[data-page=blog]) .bl-tabs { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); padding: 4px 2px calc(6 * var(--u)); }
:where(body[data-page=blog]) .bl-tab {
  scroll-snap-align: start; flex-shrink: 0; display: inline-flex; align-items: center; gap: calc(5 * var(--u));
  height: calc(26 * var(--u)); min-height: 42px; padding: 0 calc(5 * var(--u)) 0 calc(4 * var(--u)); border-radius: 99px;
  background: #fff; border: 1px solid #e1e8f2; color: var(--navy-2); font-weight: 700; font-size: max(13px, calc(7.8 * var(--f)));
  transition: background .35s, color .35s, border-color .35s, transform .35s var(--ease), box-shadow .35s;
}
:where(body[data-page=blog]) .bl-tab:hover { transform: translateY(-2px); border-color: var(--tone); box-shadow: var(--shadow-sm); }
:where(body[data-page=blog]) .bl-tab-ico {
  width: calc(18 * var(--u)); height: calc(18 * var(--u)); min-width: 30px; min-height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--tone-bg); color: var(--tone); transition: background .35s, color .35s;
}
:where(body[data-page=blog]) .bl-tab-n { min-width: 24px; padding: 2px 7px; border-radius: 99px; background: #f0f4fa; color: var(--muted); font-size: .82em; text-align: center; transition: background .35s, color .35s; }
:where(body[data-page=blog]) .bl-tab.active { background: linear-gradient(120deg, var(--tone), var(--tone-2)); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -6px var(--tone); }
:where(body[data-page=blog]) .bl-tab.active .bl-tab-ico { background: rgba(255, 255, 255, .22); color: #fff; }
:where(body[data-page=blog]) .bl-tab.active .bl-tab-n { background: rgba(255, 255, 255, .25); color: #fff; }

:where(body[data-page=blog]) .bl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: calc(8 * var(--u)) 0 calc(12 * var(--u)); }
:where(body[data-page=blog]) .bl-count { font-size: max(13px, calc(7.8 * var(--f))); color: var(--muted); }
:where(body[data-page=blog]) .bl-count b { color: var(--navy-2); }
:where(body[data-page=blog]) .bl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
:where(body[data-page=blog]) .bl-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 99px;
  background: #eaf2fd; color: var(--blue); font-weight: 700; font-size: 13px; transition: background .3s, color .3s;
}
:where(body[data-page=blog]) .bl-chip:hover { background: var(--blue); color: #fff; }
:where(body[data-page=blog]) .bl-sort { position: relative; margin-left: auto; }
:where(body[data-page=blog]) .bl-sort select {
  appearance: none; height: calc(24 * var(--u)); min-height: 40px; padding: 0 36px 0 14px; border-radius: 99px;
  border: 1px solid #dbe4ef; background: #fff; color: var(--navy-2); font-weight: 600; font-size: max(13px, calc(7.6 * var(--f))); cursor: pointer;
}
:where(body[data-page=blog]) .bl-sort i { position: absolute; right: 14px; top: 50%; translate: 0 -50%; font-size: 11px; color: var(--muted); pointer-events: none; }

:where(body[data-page=blog]) .bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--u)); }

/* ---------- post card ---------- */
:where(body[data-page=blog]) .bl-card {
  display: flex; flex-direction: column; background: #fff; border-radius: calc(9 * var(--u)); overflow: hidden;
  box-shadow: 0 calc(3 * var(--u)) calc(14 * var(--u)) rgba(16, 42, 92, .08);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
  animation: blIn .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms);
}
:where(body[data-page=blog]) .bl-card:hover { transform: translateY(-8px); box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) -6px rgba(16, 42, 92, .2); }
:where(body[data-page=blog]) .bl-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
:where(body[data-page=blog]) .bl-card-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.1s var(--ease); }
:where(body[data-page=blog]) .bl-card:hover .bl-card-media img { transform: scale(1.16); }
:where(body[data-page=blog]) .bl-card-shade {
  position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(6, 30, 70, .45));
  opacity: .6; transition: opacity .5s;
}
:where(body[data-page=blog]) .bl-card:hover .bl-card-shade { opacity: 1; }
:where(body[data-page=blog]) .bl-date {
  position: absolute; left: calc(9 * var(--u)); top: calc(9 * var(--u)); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; min-width: calc(26 * var(--u)); padding: 0 0 calc(3 * var(--u));
  background: #fff; border-radius: calc(5 * var(--u)); box-shadow: var(--shadow-sm);
  font-size: max(10.5px, calc(6.2 * var(--f))); font-weight: 700; text-transform: uppercase; color: var(--muted); line-height: 1.1;
}
:where(body[data-page=blog]) .bl-date::before { content: ""; align-self: stretch; height: 4px; margin-bottom: 3px; background: linear-gradient(90deg, var(--tone), var(--tone-2)); }
:where(body[data-page=blog]) .bl-date b { font-size: 1.95em; color: var(--navy); line-height: 1; }
:where(body[data-page=blog]) .bl-card-icon {
  position: absolute; right: calc(9 * var(--u)); bottom: calc(9 * var(--u));
  width: calc(22 * var(--u)); height: calc(22 * var(--u)); min-width: 36px; min-height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .95); color: var(--tone); font-size: max(14px, calc(8 * var(--f)));
  opacity: 0; transform: translateY(12px) scale(.7); transition: opacity .4s, transform .55s var(--ease);
}
:where(body[data-page=blog]) .bl-card:hover .bl-card-icon { opacity: 1; transform: none; }
:where(body[data-page=blog]) .bl-card-body { flex: 1; display: flex; flex-direction: column; padding: calc(10 * var(--u)) calc(11 * var(--u)) calc(11 * var(--u)); }
:where(body[data-page=blog]) .bl-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
:where(body[data-page=blog]) .bl-card h3 {
  margin-top: calc(7 * var(--u)); font-size: calc(10.4 * var(--f)); line-height: 1.38; font-weight: 800; color: var(--navy-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
:where(body[data-page=blog]) .bl-card h3 a { transition: color .3s; }
:where(body[data-page=blog]) .bl-card:hover h3 a { color: var(--tone); }
:where(body[data-page=blog]) .bl-card-body > p {
  margin-top: calc(5 * var(--u)); font-size: calc(8 * var(--f)); color: #5b6680; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
:where(body[data-page=blog]) .bl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: calc(10 * var(--u)); border-top: 1px dashed #e3e9f2; }
:where(body[data-page=blog]) .bl-card-body > p + .bl-card-foot { margin-top: calc(10 * var(--u)); }
:where(body[data-page=blog]) .bl-go {
  flex-shrink: 0; width: calc(20 * var(--u)); height: calc(20 * var(--u)); min-width: 36px; min-height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: var(--tone); border: 1.5px solid var(--tone-bg); background: #fff;
  transition: background .4s, color .4s, border-color .4s, transform .5s var(--ease);
}
:where(body[data-page=blog]) .bl-go i { transition: transform .5s var(--ease); }
:where(body[data-page=blog]) .bl-card:hover .bl-go { background: var(--tone); border-color: var(--tone); color: #fff; }
:where(body[data-page=blog]) .bl-card:hover .bl-go i { transform: rotate(-45deg); }

/* ---------- promo band (inside the grid) ---------- */
:where(body[data-page=blog]) .bl-promo {
  grid-column: 1 / -1; position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(18 * var(--u)) calc(26 * var(--u));
  border-radius: calc(12 * var(--u)); color: #fff;
  background: linear-gradient(115deg, #062e6f 0%, #0b5bc0 48%, #0aa3ad 100%);
  box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) -8px rgba(6, 46, 111, .45);
  animation: blIn .8s var(--ease) both .3s;
}
:where(body[data-page=blog]) .bl-promo::before { content: ""; position: absolute; z-index: -1; width: calc(180 * var(--u)); aspect-ratio: 1; right: -4%; top: -120%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 65%); }
:where(body[data-page=blog]) .bl-promo-icon {
  flex-shrink: 0; width: calc(46 * var(--u)); height: calc(46 * var(--u)); min-width: 64px; min-height: 64px; border-radius: 50%;
  display: grid; place-items: center; font-size: calc(18 * var(--f)); background: rgba(255, 255, 255, .15); box-shadow: 0 0 0 8px rgba(255, 255, 255, .07);
  animation: floatY 3s ease-in-out infinite;
}
:where(body[data-page=blog]) .bl-promo-text { flex: 1; min-width: 0; }
:where(body[data-page=blog]) .bl-promo-script { font-family: 'Caveat', cursive; font-size: calc(15 * var(--f)); line-height: 1; color: #9df0e6; }
:where(body[data-page=blog]) .bl-promo h3 { margin-top: 2px; font-size: calc(15 * var(--f)); font-weight: 800; letter-spacing: -.01em; }
:where(body[data-page=blog]) .bl-promo-text > p:last-child { margin-top: 3px; font-size: calc(8.2 * var(--f)); opacity: .88; }
:where(body[data-page=blog]) .bl-promo-btns { display: flex; flex-wrap: wrap; gap: 10px; }
:where(body[data-page=blog]) .bl-promo .btn { min-height: 44px; }
:where(body[data-page=blog]) .bl-promo .btn-teal { background: #25d366; }
:where(body[data-page=blog]) .bl-promo .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
:where(body[data-page=blog]) .bl-promo .btn-outline:hover { background: #fff; color: var(--navy-btn); }
:where(body[data-page=blog]) .bl-promo-bg { position: absolute; z-index: -1; right: calc(26 * var(--u)); bottom: -24%; font-size: calc(80 * var(--f)); opacity: .07; transform: rotate(-12deg); }

/* ---------- load more / empty ---------- */
:where(body[data-page=blog]) .bl-more-wrap { display: flex; justify-content: center; margin-top: calc(18 * var(--u)); }
:where(body[data-page=blog]) .bl-more { min-height: 46px; border-radius: 99px !important; padding-inline: calc(20 * var(--u)) !important; }
:where(body[data-page=blog]) .bl-more[hidden] { display: none; }
:where(body[data-page=blog]) .bl-more i { transition: transform .5s var(--ease); }
:where(body[data-page=blog]) .bl-more:hover i { animation: none !important; transform: rotate(180deg); }
:where(body[data-page=blog]) .bl-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(30 * var(--u)) 16px; }
:where(body[data-page=blog]) .bl-empty-ico {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 32px;
  background: #eaf2fd; color: var(--blue); animation: floatY 3s ease-in-out infinite;
}
:where(body[data-page=blog]) .bl-empty h3, :where(body[data-page=blog]) .bd-missing h1 { margin-top: 16px; font-size: 22px; color: var(--navy); font-weight: 800; }
:where(body[data-page=blog]) .bl-empty p, :where(body[data-page=blog]) .bd-missing p { margin: 6px 0 18px; color: var(--muted); max-width: 420px; }

/* ---------- popular topics ---------- */
:where(body[data-page=blog]) .bl-topics-wrap { padding-inline: calc(30 * var(--u)); }
:where(body[data-page=blog]) .bl-topics-card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: calc(190 * var(--u)) 1fr; gap: calc(20 * var(--u)); align-items: center;
  padding: calc(20 * var(--u)) calc(24 * var(--u)); border-radius: calc(12 * var(--u));
  background: linear-gradient(120deg, #f2f8ff, #f6fbf8 60%, #fff5f8); border: 1px solid #e5edf6;
}
:where(body[data-page=blog]) .bl-topics-card .sec-title { font-size: calc(16 * var(--f)); }
:where(body[data-page=blog]) .bl-topics-card p { margin-top: calc(5 * var(--u)); font-size: calc(8 * var(--f)); color: var(--muted); }
:where(body[data-page=blog]) .bl-topics { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
:where(body[data-page=blog]) .bl-topic {
  display: inline-flex; align-items: center; gap: 6px; padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: 99px;
  background: #fff; border: 1px solid #dde6f1; color: var(--navy-2); font-weight: 600; font-size: max(12.5px, calc(7.6 * var(--f)));
  transition: background .35s, color .35s, border-color .35s, transform .35s var(--ease);
}
:where(body[data-page=blog]) .bl-topic small { padding: 0 6px; border-radius: 99px; background: #eef3fa; color: var(--muted); font-size: .8em; transition: background .35s, color .35s; }
:where(body[data-page=blog]) .bl-topic:hover, :where(body[data-page=blog]) .bl-topic.active { background: var(--navy-btn); border-color: var(--navy-btn); color: #fff; transform: translateY(-2px); }
:where(body[data-page=blog]) .bl-topic:hover small, :where(body[data-page=blog]) .bl-topic.active small { background: rgba(255, 255, 255, .2); color: #fff; }

/* ==========================================================
   ARTICLE PAGE
   ========================================================== */
:where(body[data-page=blog]) .bd > .bd-hero { margin-top: 0; }
:where(body[data-page=blog]) .bd-progress { position: fixed; z-index: 300; left: 0; right: 0; top: 0; height: 4px; pointer-events: none; }
:where(body[data-page=blog]) .bd-progress span { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #f24d82, #1d5fc8, #15b1a2); }

:where(body[data-page=blog]) .bd-hero {
  position: relative; isolation: isolate;
  padding-bottom: calc(84 * var(--u));
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, .9), transparent 30%),
    radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--tone-2) 22%, transparent), transparent 40%),
    linear-gradient(180deg, var(--tone-bg), #f7faff 85%, #fff);
}
:where(body[data-page=blog]) .bd-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(color-mix(in srgb, var(--tone) 22%, transparent) 1px, transparent 1.2px);
  background-size: calc(12 * var(--u)) calc(12 * var(--u));
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 30% 40%, #000, transparent 70%);
}
:where(body[data-page=blog]) .bd-hero-leaf { right: 0; top: calc(10 * var(--u)); width: calc(22 * var(--u)); z-index: -1; }
/* full width: article intro on the left, facts card on the right */
:where(body[data-page=blog]) .bd-hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, calc(205 * var(--u)), 420px); gap: calc(30 * var(--u));
  align-items: center; padding-block: calc(14 * var(--u)) calc(8 * var(--u));
}
:where(body[data-page=blog]) .bd-hero-text > * { animation: blUp .8s var(--ease) both; }
:where(body[data-page=blog]) .bd-hero-text > :nth-child(2) { animation-delay: .08s; }
:where(body[data-page=blog]) .bd-hero-text > :nth-child(3) { animation-delay: .16s; }
:where(body[data-page=blog]) .bd-hero-text > :nth-child(4) { animation-delay: .24s; }
:where(body[data-page=blog]) .bd-hero-text > :nth-child(5) { animation-delay: .32s; }
:where(body[data-page=blog]) .bd-hero .crumbs li:last-child { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
:where(body[data-page=blog]) .bd-hero-pill { margin-top: calc(6 * var(--u)); background: #fff; box-shadow: var(--shadow-sm); }
:where(body[data-page=blog]) .bd-title {
  margin-top: calc(7 * var(--u)); max-width: 24ch; font-size: clamp(30px, calc(27 * var(--f)), 56px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; color: var(--navy);
  text-wrap: balance;
}
:where(body[data-page=blog]) .bd-lead { margin-top: calc(8 * var(--u)); max-width: 64ch; font-size: clamp(15px, calc(9.6 * var(--f)), 18px); line-height: 1.65; color: #3d4966; text-wrap: pretty; }
:where(body[data-page=blog]) .bd-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: calc(12 * var(--u)); }
:where(body[data-page=blog]) .bd-hero-tags a {
  padding: 5px 13px; border-radius: 99px; background: rgba(255, 255, 255, .8); border: 1px solid color-mix(in srgb, var(--tone) 20%, #fff);
  color: var(--navy-2); font-size: max(12.5px, calc(7.2 * var(--f))); font-weight: 600; transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease);
}
:where(body[data-page=blog]) .bd-hero-tags a:hover { background: var(--tone); border-color: var(--tone); color: #fff; transform: translateY(-2px); }

:where(body[data-page=blog]) .bd-hero-card {
  padding: clamp(18px, calc(14 * var(--u)), 26px); border-radius: clamp(16px, calc(12 * var(--u)), 22px);
  background: rgba(255, 255, 255, .8); border: 1px solid #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) -12px rgba(16, 42, 92, .22);
  animation: blUp .9s var(--ease) .25s both;
}
:where(body[data-page=blog]) .bd-hero-by { gap: 12px; width: 100%; padding-bottom: 14px; border-bottom: 1px dashed #dbe4f0; }
:where(body[data-page=blog]) .bd-hero-by .bl-avatar { width: 54px; height: 54px; font-size: 15px; }
:where(body[data-page=blog]) .bd-hero-by b { font-size: 16px; }
:where(body[data-page=blog]) .bd-hero-by small { font-size: 12.5px; }
:where(body[data-page=blog]) .bd-hero-by .bd-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tone); }
:where(body[data-page=blog]) .bd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-top: 14px; }
:where(body[data-page=blog]) .bd-facts li { display: flex; align-items: center; gap: 10px; min-width: 0; }
:where(body[data-page=blog]) .bd-facts li > span { min-width: 0; }
:where(body[data-page=blog]) .bd-facts i { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--tone-bg); color: var(--tone); font-size: 14px; }
:where(body[data-page=blog]) .bd-facts small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
:where(body[data-page=blog]) .bd-facts b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--navy-2); }
:where(body[data-page=blog]) .bd-hero-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #dbe4f0; }
:where(body[data-page=blog]) .bd-hero-share > span { margin-right: auto; font-size: 13px; font-weight: 800; color: var(--navy-2); }
:where(body[data-page=blog]) .bd-hero-share .bd-share-btn { width: 36px; height: 36px; font-size: 14px; box-shadow: none; }

:where(body[data-page=blog]) .bd > .bd-cover-wrap { position: relative; z-index: 2; margin-top: calc(-66 * var(--u)); }
:where(body[data-page=blog]) .bd-cover {
  position: relative; margin: 0; aspect-ratio: 21 / 7;
  border-radius: calc(14 * var(--u)); border: calc(4 * var(--u)) solid #fff; background: #fff;
  box-shadow: 0 calc(20 * var(--u)) calc(50 * var(--u)) -10px rgba(16, 42, 92, .3);
  animation: blUp 1s var(--ease) .2s both;
}
:where(body[data-page=blog]) .bd-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(10 * var(--u)); animation: bdZoom 14s ease-out both; }
:where(body[data-page=blog]) .bd-cover img.lz-in:not([aria-hidden]) { animation: var(--mm-fade-blur, none), bdZoom 14s ease-out both; }   /* fade in without losing the zoom */
@keyframes bdZoom { from { transform: scale(1.12); } to { transform: scale(1.03); } }
:where(body[data-page=blog]) .bd-cover { overflow: hidden; }
:where(body[data-page=blog]) .bd-cover-icon {
  position: absolute; right: calc(16 * var(--u)); bottom: calc(14 * var(--u));
  width: calc(36 * var(--u)); height: calc(36 * var(--u)); min-width: 56px; min-height: 56px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: calc(14 * var(--f));
  background: linear-gradient(135deg, var(--tone, #0b5bc0), var(--tone-2, #0aa3ad)); box-shadow: 0 0 0 6px rgba(255, 255, 255, .55), var(--shadow-md);
  animation: floatY 3.4s ease-in-out infinite;
}

/* ---------- 3-column reading layout (full width) ---------- */
:where(body[data-page=blog]) .bd > .bd-layout { margin-top: calc(var(--sec-gap) * .8); }
:where(body[data-page=blog]) .bd-layout {
  display: grid; align-items: start;
  grid-template-columns: 52px minmax(0, 1fr) clamp(300px, calc(205 * var(--u)), 420px); gap: clamp(24px, calc(26 * var(--u)), 56px);
}
:where(body[data-page=blog]) .bd-rail { position: sticky; top: calc(50 * var(--u) + 20px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
:where(body[data-page=blog]) .bd-rail-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #8a95ab; margin-bottom: 4px; }
:where(body[data-page=blog]) .bd-share-btn {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 16px;
  background: #fff; color: var(--navy-2); border: 1px solid #e1e8f2; box-shadow: var(--shadow-sm);
  transition: background .35s, color .35s, border-color .35s, transform .4s var(--ease);
}
:where(body[data-page=blog]) .bd-share-btn:hover { transform: translateY(-3px) scale(1.06); color: #fff; border-color: transparent; }
:where(body[data-page=blog]) .bd-share-btn.s-wa:hover { background: #25d366; }
:where(body[data-page=blog]) .bd-share-btn.s-fb:hover { background: #1877f2; }
:where(body[data-page=blog]) .bd-share-btn.s-x:hover { background: #111; }
:where(body[data-page=blog]) .bd-share-btn.s-in:hover { background: #0a66c2; }
:where(body[data-page=blog]) .bd-share-btn.s-copy:hover { background: var(--teal); }

/* ---------- article ---------- */
:where(body[data-page=blog]) .bd-article { min-width: 0; }
:where(body[data-page=blog]) .bd-glance {
  position: relative; padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(10 * var(--u));
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #1d5fc8, #15b1a2, #f24d82) border-box;
  border: 2px solid transparent; box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) -10px rgba(16, 42, 92, .2);
}
:where(body[data-page=blog]) .bd-glance-title { display: flex; align-items: center; gap: 8px; font-size: clamp(16px, calc(10 * var(--f)), 19px); font-weight: 800; color: var(--navy); }
:where(body[data-page=blog]) .bd-glance-title i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; color: #fff; background: linear-gradient(135deg, #f79a3e, #f24d82); }
:where(body[data-page=blog]) .bd-glance ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px calc(16 * var(--u)); margin-top: 12px; counter-reset: g; }
:where(body[data-page=blog]) .bd-glance li { position: relative; padding-left: 36px; font-size: clamp(14px, calc(8.4 * var(--f)), 16px); line-height: 1.55; color: #2f3a52; counter-increment: g; }
:where(body[data-page=blog]) .bd-glance li::before {
  content: counter(g); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--blue); background: #eaf2fd;
}

:where(body[data-page=blog]) .bd-prose { margin-top: calc(14 * var(--u)); font-size: clamp(15.5px, calc(10 * var(--f)), 17.5px); line-height: 1.85; color: #2f3a52; }
:where(body[data-page=blog]) .bd-prose > * + * { margin-top: 1.1em; }
:where(body[data-page=blog]) .bd-prose > p:first-child::first-letter {
  float: left; margin: .08em .12em 0 0; font-size: 3.6em; line-height: .8; font-weight: 800;
  background: linear-gradient(135deg, #0b3e8f, #0aa3ad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
:where(body[data-page=blog]) .bd-prose b { color: var(--navy-2); }
:where(body[data-page=blog]) .bd-prose a { color: var(--blue-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
:where(body[data-page=blog]) .bd-prose h2, :where(body[data-page=blog]) .bd-faq h2 {
  position: relative; margin-top: 1.9em; padding-left: 18px; scroll-margin-top: calc(50 * var(--u) + 24px);
  font-size: clamp(21px, calc(14.5 * var(--f)), 28px); line-height: 1.3; font-weight: 800; color: var(--navy); letter-spacing: -.015em;
}
:where(body[data-page=blog]) .bd-prose h2::before, :where(body[data-page=blog]) .bd-faq h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 5px; border-radius: 4px; background: linear-gradient(180deg, #1d5fc8, #15b1a2); }
:where(body[data-page=blog]) .bd-prose h2 + * { margin-top: .7em; }
:where(body[data-page=blog]) .bd-prose h3 { font-size: 1.15em; font-weight: 800; color: var(--navy-2); }

:where(body[data-page=blog]) .bd-list { display: grid; gap: .55em; }
:where(body[data-page=blog]) .bd-list li { display: flex; gap: 12px; }
:where(body[data-page=blog]) .bd-list i { flex-shrink: 0; margin-top: .42em; font-size: .85em; color: #10a37a; }
:where(body[data-page=blog]) .bd-olist { padding-left: 1.3em; list-style: decimal; display: grid; gap: .4em; }

:where(body[data-page=blog]) .bd-steps { list-style: none; padding: 0; display: grid; gap: 0; }
:where(body[data-page=blog]) .bd-steps li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding-bottom: 18px; }
:where(body[data-page=blog]) .bd-steps li:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 50px; bottom: 4px; border-left: 2px dashed #c9d9ee; }
:where(body[data-page=blog]) .bd-step-n {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #fff;
  background: linear-gradient(135deg, #0b5bc0, #0aa3ad); box-shadow: 0 8px 18px -6px rgba(11, 91, 192, .55);
  transition: transform .5s var(--ease), border-radius .5s var(--ease);
}
:where(body[data-page=blog]) .bd-steps li:hover .bd-step-n { transform: rotate(-8deg) scale(1.06); border-radius: 50%; }
:where(body[data-page=blog]) .bd-steps b { display: block; color: var(--navy-2); font-size: 1.04em; line-height: 1.4; padding-top: 10px; }
:where(body[data-page=blog]) .bd-steps p { margin-top: 4px; font-size: .95em; color: #4a5570; line-height: 1.7; }

:where(body[data-page=blog]) .bd-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 14px; }
:where(body[data-page=blog]) .bd-gcard {
  position: relative; overflow: hidden; padding: 18px 18px 16px; border-radius: 14px; background: #f7faff; border: 1px solid #e3ecf7;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .45s;
}
:where(body[data-page=blog]) .bd-gcard:hover { transform: translateY(-4px); background: #fff; box-shadow: var(--shadow-md); }
:where(body[data-page=blog]) .bd-gicon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; color: var(--blue); background: #fff; box-shadow: 0 0 0 1px #dbe7f6; transition: background .45s, color .45s; }
:where(body[data-page=blog]) .bd-gcard:hover .bd-gicon { background: linear-gradient(135deg, #0b5bc0, #0aa3ad); color: #fff; }
:where(body[data-page=blog]) .bd-gcard b { display: block; margin-top: 10px; color: var(--navy-2); font-size: 1em; line-height: 1.35; }
:where(body[data-page=blog]) .bd-gcard p { margin-top: 4px; font-size: .9em; line-height: 1.6; color: #55617b; }

:where(body[data-page=blog]) .bd-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 16px; overflow: hidden;
  background: linear-gradient(115deg, #062e6f, #0b5bc0 55%, #0aa3ad); color: #fff;
}
:where(body[data-page=blog]) .bd-stats li { padding: 20px 18px; text-align: center; }
:where(body[data-page=blog]) .bd-stats li + li { border-left: 1px solid rgba(255, 255, 255, .18); }
:where(body[data-page=blog]) .bd-stats b { display: block; font-size: 1.75em; line-height: 1.15; font-weight: 800; }
:where(body[data-page=blog]) .bd-stats span { display: block; margin-top: 4px; font-size: .8em; line-height: 1.45; opacity: .85; }

:where(body[data-page=blog]) .bd-quote {
  position: relative; margin-inline: 0; padding: 26px 28px 24px 70px; border-radius: 16px;
  background: linear-gradient(120deg, #fff5f8, #f3f6ff); border: 1px solid #f1e3ec;
}
:where(body[data-page=blog]) .bd-quote > i { position: absolute; left: 22px; top: 22px; font-size: 30px; color: #f24d82; opacity: .85; }
:where(body[data-page=blog]) .bd-quote p { font-family: 'Caveat', cursive; font-size: 1.65em; line-height: 1.3; color: var(--navy); }
:where(body[data-page=blog]) .bd-quote cite { display: block; margin-top: 8px; font-style: normal; font-size: .85em; font-weight: 700; color: var(--muted); }

:where(body[data-page=blog]) .bd-callout { display: flex; gap: 14px; padding: 16px 18px; border-radius: 14px; border-left: 5px solid var(--c); background: var(--c-bg); }
:where(body[data-page=blog]) .bd-tip  { --c: #10a37a; --c-bg: #ecf8f2; }
:where(body[data-page=blog]) .bd-warn { --c: #e2591c; --c-bg: #fff3ea; }
:where(body[data-page=blog]) .bd-note { --c: #0b5bc0; --c-bg: #edf4fd; }
:where(body[data-page=blog]) .bd-callout-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c); font-size: 15px; }
:where(body[data-page=blog]) .bd-callout b { display: block; color: var(--c); font-size: 1em; }
:where(body[data-page=blog]) .bd-callout p { margin-top: 2px; font-size: .95em; line-height: 1.7; color: #3a4560; }

:where(body[data-page=blog]) .bd-figure { margin-inline: 0; }
:where(body[data-page=blog]) .bd-figure img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 16px; }
:where(body[data-page=blog]) .bd-figure figcaption { margin-top: 8px; font-size: .82em; color: var(--muted); text-align: center; }

/* FAQ */
:where(body[data-page=blog]) .bd-faq { margin-top: calc(14 * var(--u)); font-size: clamp(15.5px, calc(10 * var(--f)), 17.5px); }
:where(body[data-page=blog]) .bd-faq h2 { margin: 0 0 .8em; }
:where(body[data-page=blog]) .bd-faq-item { border: 1px solid #e3eaf3; border-radius: 14px; background: #fff; transition: box-shadow .35s, border-color .35s; }
:where(body[data-page=blog]) .bd-faq-item + .bd-faq-item { margin-top: 10px; }
:where(body[data-page=blog]) .bd-faq-item[open] { border-color: #bcd4f0; box-shadow: var(--shadow-sm); }
:where(body[data-page=blog]) .bd-faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--navy-2); line-height: 1.45;
}
:where(body[data-page=blog]) .bd-faq-item summary::-webkit-details-marker { display: none; }
:where(body[data-page=blog]) .bd-faq-item summary i {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px;
  background: #eaf2fd; color: var(--blue); transition: transform .4s var(--ease), background .4s, color .4s;
}
:where(body[data-page=blog]) .bd-faq-item[open] summary i { transform: rotate(135deg); background: var(--blue); color: #fff; }
:where(body[data-page=blog]) .bd-faq-item p { padding: 0 18px 18px; font-size: .94em; line-height: 1.75; color: #4a5570; animation: blUp .45s var(--ease); }

:where(body[data-page=blog]) .bd-disclaimer {
  display: flex; gap: 12px; margin-top: calc(14 * var(--u)); padding: 14px 16px; border-radius: 12px;
  background: #f5f7fb; border: 1px dashed #cdd7e5; font-size: 13.5px; line-height: 1.65; color: #5b6680;
}
:where(body[data-page=blog]) .bd-disclaimer i { margin-top: 3px; color: var(--teal); }
:where(body[data-page=blog]) .bd-disclaimer b { color: var(--navy-2); }

:where(body[data-page=blog]) .bd-tagrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: calc(14 * var(--u)); padding: 16px 0; border-block: 1px solid #e7edf5; }
:where(body[data-page=blog]) .bd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:where(body[data-page=blog]) .bd-tags > i { color: var(--muted); margin-right: 2px; }
:where(body[data-page=blog]) .bd-tags a { padding: 5px 12px; border-radius: 99px; background: #f1f5fb; color: var(--navy-2); font-size: 13.5px; font-weight: 600; transition: background .3s, color .3s; }
:where(body[data-page=blog]) .bd-tags a:hover { background: var(--navy-btn); color: #fff; }
:where(body[data-page=blog]) .bd-share-inline { display: flex; align-items: center; gap: 8px; }
:where(body[data-page=blog]) .bd-share-inline > span { font-weight: 700; font-size: 14px; color: var(--navy-2); margin-right: 2px; }
:where(body[data-page=blog]) .bd-share-inline .bd-share-btn { width: 38px; height: 38px; font-size: 14px; }

:where(body[data-page=blog]) .bd-author {
  display: flex; gap: 18px; align-items: center; margin-top: 22px; padding: 20px 22px; border-radius: 16px;
  background: linear-gradient(120deg, #f2f8ff, #f4fbf8);
}
:where(body[data-page=blog]) .bd-author .bl-avatar { width: 68px; height: 68px; font-size: 20px; }
:where(body[data-page=blog]) .bd-author small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
:where(body[data-page=blog]) .bd-author b { display: block; font-size: 18px; color: var(--navy); }
:where(body[data-page=blog]) .bd-author p { margin-top: 3px; font-size: 14px; line-height: 1.6; color: #55617b; }

:where(body[data-page=blog]) .bd-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
:where(body[data-page=blog]) .bd-pn-item {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #e3eaf3;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
:where(body[data-page=blog]) .bd-pn-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
:where(body[data-page=blog]) .bd-pn-item img { flex-shrink: 0; width: 76px; height: 76px; border-radius: 10px; object-fit: cover; }
:where(body[data-page=blog]) .bd-pn-item small { display: block; font-size: 12px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .06em; }
:where(body[data-page=blog]) .bd-pn-item b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: 14.5px; line-height: 1.4; color: var(--navy-2); }
:where(body[data-page=blog]) .bd-next { justify-content: flex-end; text-align: right; }

/* ---------- sidebar ---------- */
:where(body[data-page=blog]) .bd-side { align-self: stretch; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
:where(body[data-page=blog]) .bd-side-sticky { position: sticky; top: calc(50 * var(--u) + 20px); display: flex; flex-direction: column; gap: 18px; }
:where(body[data-page=blog]) .bd-box { padding: 18px; border-radius: 16px; background: #fff; border: 1px solid #e5ecf5; box-shadow: var(--shadow-sm); }
:where(body[data-page=blog]) .bd-box h3 { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; color: var(--navy); }
:where(body[data-page=blog]) .bd-box h3 i { color: var(--teal); }
:where(body[data-page=blog]) .bd-toc ol { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 2px; counter-reset: t; max-height: 46vh; overflow-y: auto; }
:where(body[data-page=blog]) .bd-toc a {
  position: relative; display: flex; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 14px; line-height: 1.4; color: #4a5570;
  counter-increment: t; transition: background .3s, color .3s;
}
:where(body[data-page=blog]) .bd-toc a::before { content: counter(t, decimal-leading-zero); flex-shrink: 0; font-weight: 800; font-size: 12px; color: #9aa6bb; padding-top: 1px; transition: color .3s; }
:where(body[data-page=blog]) .bd-toc a:hover { background: #f2f7fd; color: var(--navy-2); }
:where(body[data-page=blog]) .bd-toc a.active { background: linear-gradient(90deg, #e6f0fd, #effaf9); color: var(--blue); font-weight: 700; }
:where(body[data-page=blog]) .bd-toc a.active::before { color: var(--teal); }

/* search, categories, latest articles, tag cloud */
:where(body[data-page=blog]) .bd-search { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 16px; transition: border-color .3s, box-shadow .3s; }
:where(body[data-page=blog]) .bd-search:focus-within { border-color: #9cc2ee; box-shadow: 0 0 0 4px rgba(26, 111, 214, .1); }
:where(body[data-page=blog]) .bd-search input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: none; font: inherit; font-size: 14.5px; color: var(--text); }
:where(body[data-page=blog]) .bd-search input::placeholder { color: #8a95ab; }
:where(body[data-page=blog]) .bd-search input::-webkit-search-cancel-button { display: none; }
:where(body[data-page=blog]) .bd-search button { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #0b5bc0, #0aa3ad); transition: transform .35s var(--ease); }
:where(body[data-page=blog]) .bd-search button:hover { transform: scale(1.06); }

:where(body[data-page=blog]) .bd-cats ul { margin-top: 12px; display: grid; gap: 4px; }
:where(body[data-page=blog]) .bd-cats a {
  display: flex; align-items: center; gap: 11px; padding: 7px 10px 7px 7px; border-radius: 12px;
  font-size: 14.5px; font-weight: 600; color: #2f3a52; transition: background .3s, color .3s, transform .35s var(--ease);
}
:where(body[data-page=blog]) .bd-cats a > span:nth-child(2) { flex: 1; min-width: 0; }
:where(body[data-page=blog]) .bd-cat-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--tone-bg); color: var(--tone); font-size: 14px; transition: background .3s, color .3s; }
:where(body[data-page=blog]) .bd-cats a b { min-width: 30px; padding: 2px 8px; border-radius: 99px; background: #f1f5fb; color: #55617b; font-size: 12px; text-align: center; transition: background .3s, color .3s; }
:where(body[data-page=blog]) .bd-cats a:hover, :where(body[data-page=blog]) .bd-cats a.active { background: var(--tone-bg); color: var(--tone); }
:where(body[data-page=blog]) .bd-cats a:hover { transform: translateX(4px); }
:where(body[data-page=blog]) .bd-cats a:hover .bd-cat-ico, :where(body[data-page=blog]) .bd-cats a.active .bd-cat-ico, :where(body[data-page=blog]) .bd-cats a:hover b, :where(body[data-page=blog]) .bd-cats a.active b { background: var(--tone); color: #fff; }

:where(body[data-page=blog]) .bd-recent ul { margin-top: 14px; display: grid; gap: 12px; }
:where(body[data-page=blog]) .bd-recent li + li { padding-top: 12px; border-top: 1px dashed #e3e9f2; }
:where(body[data-page=blog]) .bd-rp { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; }
:where(body[data-page=blog]) .bd-rp-img { position: relative; width: 84px; height: 68px; border-radius: 11px; overflow: hidden; background: #f3f6fa; }
:where(body[data-page=blog]) .bd-rp-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
:where(body[data-page=blog]) .bd-rp-img em {
  position: absolute; left: 5px; top: 5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--tone); font-style: normal; font-size: 11px; font-weight: 800; box-shadow: 0 2px 6px rgba(16, 42, 92, .2);
}
:where(body[data-page=blog]) .bd-rp-cat { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tone); }
:where(body[data-page=blog]) .bd-rp b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--navy-2); transition: color .3s; }
:where(body[data-page=blog]) .bd-rp-date { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
:where(body[data-page=blog]) .bd-rp:hover b { color: var(--blue); }
:where(body[data-page=blog]) .bd-rp:hover img { transform: scale(1.1); }

:where(body[data-page=blog]) .bd-tagcloud div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
:where(body[data-page=blog]) .bd-tagcloud a {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 9px; border: 1px solid #e3e9f2; background: #fff;
  color: #3a4560; font-size: 13px; font-weight: 600; transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease);
}
:where(body[data-page=blog]) .bd-tagcloud a small { font-size: 11px; font-weight: 800; color: #9aa6bb; transition: color .3s; }
:where(body[data-page=blog]) .bd-tagcloud a:hover { background: var(--navy-btn); border-color: var(--navy-btn); color: #fff; transform: translateY(-2px); }
:where(body[data-page=blog]) .bd-tagcloud a.on { background: #e8f1fd; border-color: #b9d3f3; color: var(--blue); }
:where(body[data-page=blog]) .bd-tagcloud a:hover small { color: rgba(255, 255, 255, .7); }

:where(body[data-page=blog]) .bd-prods ul { margin-top: 12px; display: grid; gap: 10px; }
:where(body[data-page=blog]) .bd-prod { display: grid; grid-template-columns: 66px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; transition: background .3s; }
:where(body[data-page=blog]) .bd-prod:hover { background: #f5f9fe; }
:where(body[data-page=blog]) .bd-prod-img { width: 66px; height: 66px; border-radius: 10px; overflow: hidden; background: #f3f6fa; border: 1px solid #e6edf5; }
:where(body[data-page=blog]) .bd-prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
:where(body[data-page=blog]) .bd-prod:hover .bd-prod-img img { transform: scale(1.1); }
:where(body[data-page=blog]) .bd-prod-info { min-width: 0; }
:where(body[data-page=blog]) .bd-prod-name { display: block; font-size: 14.5px; font-weight: 700; color: var(--navy-2); line-height: 1.3; transition: color .3s; }
:where(body[data-page=blog]) .bd-prod-name:hover { color: var(--blue); }
:where(body[data-page=blog]) .bd-prod-info > small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.4; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(body[data-page=blog]) .bd-prod-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
:where(body[data-page=blog]) .bd-prod-row > b { font-size: 15px; font-weight: 800; color: var(--navy); }
:where(body[data-page=blog]) .bd-prod-row > b small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
:where(body[data-page=blog]) .bd-rx { padding: 1px 6px; border-radius: 5px; background: #fde8ec; color: #d0264b; font-size: 11px; font-weight: 800; }
:where(body[data-page=blog]) .bd-prod-add {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 14px;
  background: #eaf2fd; color: var(--blue); transition: background .3s, color .3s, transform .4s var(--ease);
}
:where(body[data-page=blog]) .bd-prod-add:hover, :where(body[data-page=blog]) .bd-prod-add.added { background: var(--blue); color: #fff; transform: scale(1.08); }
:where(body[data-page=blog]) .bd-prod-add.added { font-size: 0; }
:where(body[data-page=blog]) .bd-prod-add.added i { font-size: 14px; }
:where(body[data-page=blog]) .bd-box-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; font-size: 14px; color: var(--blue-link); }
:where(body[data-page=blog]) .bd-box-link:hover i { animation: arrowNudge .8s var(--ease) infinite; }

:where(body[data-page=blog]) .bd-help {
  position: relative; overflow: hidden; text-align: center; color: #fff; border: 0;
  background: linear-gradient(150deg, #062e6f, #0b5bc0 60%, #0aa3ad);
}
:where(body[data-page=blog]) .bd-help::after { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -60px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
:where(body[data-page=blog]) .bd-help-ico {
  width: 58px; height: 58px; margin: 4px auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
  background: rgba(255, 255, 255, .15); box-shadow: 0 0 0 7px rgba(255, 255, 255, .07); animation: floatY 3s ease-in-out infinite;
}
:where(body[data-page=blog]) .bd-help h3 { justify-content: center; color: #fff; font-size: 18px; }
:where(body[data-page=blog]) .bd-help p { margin: 6px 0 14px; font-size: 14px; line-height: 1.6; opacity: .88; }
:where(body[data-page=blog]) .bd-help .btn { width: 100%; height: 46px; font-size: 14.5px; position: relative; z-index: 1; }
:where(body[data-page=blog]) .bd-help .btn + .btn { margin-top: 8px; }
:where(body[data-page=blog]) .bd-help .btn-navy { background: #fff; color: var(--navy-btn); }
:where(body[data-page=blog]) .bd-btn-wa { background: #25d366; color: #fff; }

/* ---------- related ---------- */
:where(body[data-page=blog]) .bd-related { padding-block: calc(var(--sec-gap) * .8); background: linear-gradient(180deg, #fff, #f4f8fd 30%, #fffaf9); }
:where(body[data-page=blog]) .bd-related .container { padding-inline: calc(var(--gutter) + 13 * var(--u)); }
:where(body[data-page=blog]) .bl-grid--related { margin-top: calc(14 * var(--u)); }
:where(body[data-page=blog]) .bd > .bd-related + .newsletter { margin-top: 0; }

:where(body[data-page=blog]) .bd-missing { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 80px; }

/* toast */
:where(body[data-page=blog]) .bl-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 500; display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 99px; background: #0b2458; color: #fff; font-weight: 600; font-size: 14.5px;
  box-shadow: 0 12px 30px rgba(5, 20, 50, .3);
  transform: translate(-50%, 20px); opacity: 0; visibility: hidden; transition: transform .45s var(--ease), opacity .35s, visibility .35s;
}
:where(body[data-page=blog]) .bl-toast i { color: #3ee0b0; }
:where(body[data-page=blog]) .bl-toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1099px) {
  :where(body[data-page=blog]) .bl-hero-inner { grid-template-columns: minmax(0, 1fr); padding: 10px var(--gutter) 40px; gap: 34px; }
  :where(body[data-page=blog]) .bl-hero-title { font-size: 46px; }
  :where(body[data-page=blog]) .bl-hero-sub { max-width: 560px; font-size: 16px; }
  :where(body[data-page=blog]) .bl-search { max-width: 560px; }
  :where(body[data-page=blog]) .bl-hero-stats b { font-size: 28px; }
  :where(body[data-page=blog]) .bl-collage { height: 380px; max-width: 640px; width: 100%; justify-self: center; }
  :where(body[data-page=blog]) .blc-1 { left: 40px; top: 0; width: 360px; height: 210px; }
  :where(body[data-page=blog]) .blc-2 { width: 270px; height: 180px; }
  :where(body[data-page=blog]) .blc-3 { width: 230px; height: 150px; }
  :where(body[data-page=blog]) .blc-chip-b { left: 180px; bottom: -6px; }
  :where(body[data-page=blog]) .bl-feat { margin-inline: 0; grid-template-columns: 1fr; }
  :where(body[data-page=blog]) .bl-feat-media { min-height: 0; aspect-ratio: 16 / 8; }
  :where(body[data-page=blog]) .bl-feat-body { padding: 26px; }
  :where(body[data-page=blog]) .bl-feat-body h2 { font-size: 28px; }
  :where(body[data-page=blog]) .bl-browse, :where(body[data-page=blog]) .bl-topics-wrap { padding-inline: var(--gutter); }
  :where(body[data-page=blog]) .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  :where(body[data-page=blog]) .bl-grid--related > :nth-child(3) { display: none; }
  :where(body[data-page=blog]) .bl-card h3 { font-size: 18px; }
  :where(body[data-page=blog]) .bl-card-body { padding: 18px; }
  :where(body[data-page=blog]) .bl-promo { flex-wrap: wrap; padding: 26px; }
  :where(body[data-page=blog]) .bl-promo-text { flex-basis: calc(100% - 100px); }
  :where(body[data-page=blog]) .bl-promo h3 { font-size: 22px; }
  :where(body[data-page=blog]) .bl-promo-script { font-size: 22px; }
  :where(body[data-page=blog]) .bl-topics-card { grid-template-columns: 1fr; gap: 16px; padding: 26px; }
  :where(body[data-page=blog]) .bl-topics-card .sec-title { font-size: 26px; }

  :where(body[data-page=blog]) .bd-hero { padding-bottom: 110px; }
  :where(body[data-page=blog]) .bd-title { font-size: 40px; }
  :where(body[data-page=blog]) .bd-hero-inner { grid-template-columns: 1fr; gap: 26px; }
  :where(body[data-page=blog]) .bd-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :where(body[data-page=blog]) .bd > .bd-cover-wrap { margin-top: -90px; }
  :where(body[data-page=blog]) .bd-cover { aspect-ratio: 16 / 8; border-width: 5px; border-radius: 18px; }
  :where(body[data-page=blog]) .bd-cover img { border-radius: 13px; }
  :where(body[data-page=blog]) .bd-layout { grid-template-columns: minmax(0, 1fr); }
  :where(body[data-page=blog]) .bd-rail { display: none; }
  :where(body[data-page=blog]) .bd-side { flex-direction: row; flex-wrap: wrap; }
  :where(body[data-page=blog]) .bd-side > *, :where(body[data-page=blog]) .bd-side-sticky { flex: 1 1 320px; }
  :where(body[data-page=blog]) .bd-side-sticky { position: static; }
  :where(body[data-page=blog]) .bd-toc { display: none; }
  :where(body[data-page=blog]) .bd-related .container { padding-inline: var(--gutter); }
}

@media (max-width: 767px) {
  :where(body[data-page=blog]) .bl-hero-title { font-size: 36px; }
  :where(body[data-page=blog]) .bl-hero-stats { gap: 16px; }
  :where(body[data-page=blog]) .bl-hero-stats li + li { padding-left: 16px; }
  :where(body[data-page=blog]) .bl-hero-stats b { font-size: 24px; }
  :where(body[data-page=blog]) .bl-collage { height: 300px; }
  :where(body[data-page=blog]) .blc { border-width: 4px; border-radius: 12px; }
  :where(body[data-page=blog]) .blc-1 { left: 4%; width: 74%; height: 170px; }
  :where(body[data-page=blog]) .blc-2 { width: 56%; height: 130px; bottom: 16px; }
  :where(body[data-page=blog]) .blc-3 { width: 48%; height: 110px; }
  :where(body[data-page=blog]) .blc-chip-a { right: 0; top: -6px; }
  :where(body[data-page=blog]) .blc-chip-b { left: auto; right: 4%; bottom: -14px; }
  :where(body[data-page=blog]) .bl-feat-media { aspect-ratio: 16 / 10; }
  :where(body[data-page=blog]) .bl-feat-body { padding: 20px; }
  :where(body[data-page=blog]) .bl-feat-body h2 { font-size: 23px; }
  :where(body[data-page=blog]) .bl-feat .bl-card-foot { flex-wrap: wrap; }
  :where(body[data-page=blog]) .bl-sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  :where(body[data-page=blog]) .bl-tabs { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  :where(body[data-page=blog]) .bl-tabs::-webkit-scrollbar { display: none; }
  :where(body[data-page=blog]) .bl-sort { margin-left: 0; }
  :where(body[data-page=blog]) .bl-grid { grid-template-columns: 1fr; gap: 20px; }
  :where(body[data-page=blog]) .bl-grid--related > :nth-child(3) { display: flex; }
  :where(body[data-page=blog]) .bl-promo { padding: 22px 20px; text-align: center; justify-content: center; }
  :where(body[data-page=blog]) .bl-promo-text { flex-basis: 100%; }
  :where(body[data-page=blog]) .bl-promo-btns { justify-content: center; width: 100%; }
  :where(body[data-page=blog]) .bl-promo .btn { flex: 1 1 200px; }
  :where(body[data-page=blog]) .bl-topics-card { padding: 20px; }
  :where(body[data-page=blog]) .bl-topics-card .sec-title { font-size: 23px; }

  :where(body[data-page=blog]) .bd-hero { padding-bottom: 70px; }
  :where(body[data-page=blog]) .bd-title { font-size: 30px; }
  :where(body[data-page=blog]) .bd-hero .crumbs li:last-child { max-width: 18ch; }
  :where(body[data-page=blog]) .bd-facts { grid-template-columns: 1fr 1fr; }
  :where(body[data-page=blog]) .bd-hero-card { padding: 18px 16px; }
  :where(body[data-page=blog]) .bd-hero-share > span { flex-basis: 100%; }
  :where(body[data-page=blog]) .bd > .bd-cover-wrap { margin-top: -54px; }
  :where(body[data-page=blog]) .bd-cover { aspect-ratio: 16 / 10; border-width: 4px; border-radius: 14px; }
  :where(body[data-page=blog]) .bd-cover img { border-radius: 10px; }
  :where(body[data-page=blog]) .bd-glance { padding: 18px; }
  :where(body[data-page=blog]) .bd-glance ul { grid-template-columns: 1fr; }
  :where(body[data-page=blog]) .bd-grid { grid-template-columns: 1fr; }
  :where(body[data-page=blog]) .bd-stats { grid-template-columns: 1fr; }
  :where(body[data-page=blog]) .bd-stats li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
  :where(body[data-page=blog]) .bd-quote { padding: 54px 20px 20px; }
  :where(body[data-page=blog]) .bd-quote > i { left: 20px; top: 18px; }
  :where(body[data-page=blog]) .bd-steps li { grid-template-columns: 40px 1fr; gap: 12px; }
  :where(body[data-page=blog]) .bd-step-n { width: 40px; height: 40px; font-size: 14px; border-radius: 12px; }
  :where(body[data-page=blog]) .bd-steps li:not(:last-child)::before { left: 19px; top: 42px; }
  :where(body[data-page=blog]) .bd-steps b { padding-top: 7px; }
  :where(body[data-page=blog]) .bd-callout { padding: 14px; gap: 12px; }
  :where(body[data-page=blog]) .bd-callout-ico { width: 32px; height: 32px; font-size: 13px; }
  :where(body[data-page=blog]) .bd-pn { grid-template-columns: 1fr; }
  :where(body[data-page=blog]) .bd-pn-item img { width: 60px; height: 60px; }
  :where(body[data-page=blog]) .bd-author { flex-direction: column; text-align: center; }
}

/* ##########################################################
   PAGE: bulk-order  ·  scope body[data-page="bulk"]
   ########################################################## */
/* ==========================================================
   MMatrics Pharmaceuticals – bulk order page (bulk-order.html)
   Follows the base section and uses the same design unit (--u)
   and tokens.
   ========================================================== */

:where(body[data-page=bulk]) textarea, :where(body[data-page=bulk]) select { font: inherit; }
:where(body[data-page=bulk]) .bulk-page [hidden] { display: none; }

:where(body[data-page=bulk]) .bo-sec-head { text-align: center; }
:where(body[data-page=bulk]) .bo-sec-head .eyebrow { font-size: max(12px, calc(6.8 * var(--f))); }
:where(body[data-page=bulk]) .bo-sec-head .sec-title { margin-top: calc(3 * var(--u)); }
:where(body[data-page=bulk]) .bo-sub { margin-top: calc(3 * var(--u)); font-size: calc(9.2 * var(--f)); color: #4f5b73; }

/* ==========================================================
   HERO
   ========================================================== */
:where(body[data-page=bulk]) .bo-hero { position: relative; overflow: hidden; isolation: isolate; min-height: calc(201 * var(--u)); display: flex; align-items: center; }
:where(body[data-page=bulk]) .bo-hero-bg {
  position: absolute; inset: 0 0 0 38%; z-index: -2;
  background: #eaf3fd url(../uploads/company/warehouse2.webp?v=750fd258ff) center 40% / cover no-repeat;
  animation: boDrift 18s ease-in-out infinite alternate;
}
:where(body[data-page=bulk]) .bo-hero::before {                                    /* fade the photo into the text side */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #ecf5fd 0%, #ecf5fd 38%, rgba(236,245,253,.75) 48%, rgba(236,245,253,0) 70%);
}
@keyframes boDrift { to { transform: scale(1.06); } }
:where(body[data-page=bulk]) .bo-hero-inner { padding-block: calc(18 * var(--u)); padding-left: calc(51 * var(--u)); }
:where(body[data-page=bulk]) .bo-hero-inner > * { animation: fadeUp .8s var(--ease) both; }
:where(body[data-page=bulk]) .bo-hero-inner > :nth-child(2) { animation-delay: .08s; }
:where(body[data-page=bulk]) .bo-hero-inner > :nth-child(3) { animation-delay: .16s; }
:where(body[data-page=bulk]) .bo-hero-inner > :nth-child(4) { animation-delay: .24s; }
:where(body[data-page=bulk]) .bo-hero-inner > :nth-child(5) { animation-delay: .32s; }
:where(body[data-page=bulk]) .bo-hero .eyebrow { color: #0b2a66; font-size: max(12px, calc(6.8 * var(--f))); letter-spacing: .4em; }
:where(body[data-page=bulk]) .bo-hero-title { margin-top: calc(5 * var(--u)); font-weight: 800; font-size: calc(35 * var(--f)); line-height: 1.02; letter-spacing: -.035em; }
:where(body[data-page=bulk]) .bo-hero-title span { display: block; width: max-content; max-width: 100%; }
:where(body[data-page=bulk]) .bo-hero-title .l1 { color: #0b1f5c; }
:where(body[data-page=bulk]) .bo-hero-title .l2 {
  background: linear-gradient(90deg, #0a8f9c, #10a9ab 60%, #0a8f9c); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 6s ease-in-out infinite;
}
:where(body[data-page=bulk]) .bo-hero-text { margin-top: calc(8 * var(--u)); max-width: calc(290 * var(--u)); font-size: calc(10.2 * var(--f)); line-height: 1.45; color: #1c2a44; font-weight: 500; }
:where(body[data-page=bulk]) .bo-hero-feats { display: flex; flex-wrap: wrap; gap: calc(18 * var(--u)); margin-top: calc(13 * var(--u)); }
:where(body[data-page=bulk]) .bo-hero-feats li { display: flex; align-items: center; gap: calc(7 * var(--u)); }
:where(body[data-page=bulk]) .bo-hero-feats i { font-size: calc(18 * var(--f)); color: #0e5bc4; width: calc(22 * var(--u)); text-align: center; transition: transform .45s var(--ease); }
:where(body[data-page=bulk]) .bo-hero-feats li:nth-child(2) i { color: #0b3e8f; }
:where(body[data-page=bulk]) .bo-hero-feats li:nth-child(3) i { color: #1a7be0; }
:where(body[data-page=bulk]) .bo-hero-feats li:nth-child(4) i { color: #12a150; }
:where(body[data-page=bulk]) .bo-hero-feats li:hover i { transform: translateY(-3px) rotate(-8deg); }
:where(body[data-page=bulk]) .bo-hero-feats span { font-size: max(13px, calc(7.6 * var(--f))); font-weight: 700; line-height: 1.3; color: #0b2458; }
:where(body[data-page=bulk]) .bo-hero-btns { display: flex; flex-wrap: wrap; gap: calc(9 * var(--u)); margin-top: calc(15 * var(--u)); }

/* ==========================================================
   WHO WE SUPPLY
   ========================================================== */
:where(body[data-page=bulk]) .bo-who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10 * var(--u)); margin-top: calc(14 * var(--u)); }
:where(body[data-page=bulk]) .bo-who-grid li {
  position: relative; overflow: hidden; padding: calc(14 * var(--u)) calc(12 * var(--u)) calc(15 * var(--u));
  border-radius: calc(7 * var(--u)); background: var(--bw-bg); border: 1px solid var(--bw-line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
:where(body[data-page=bulk]) .bo-who-grid li::after {                              /* corner glow */
  content: ""; position: absolute; right: calc(-30 * var(--u)); top: calc(-30 * var(--u)); width: calc(80 * var(--u)); aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bw) 14%, transparent), transparent 70%); pointer-events: none;
}
:where(body[data-page=bulk]) .bo-who-grid li:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
:where(body[data-page=bulk]) .bw-ico {
  width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; display: grid; place-items: center;
  background: var(--bw-ico-bg); color: var(--bw); font-size: calc(14 * var(--f)); transition: transform .5s var(--ease), background .4s, color .4s;
}
:where(body[data-page=bulk]) .bo-who-grid li:hover .bw-ico { transform: rotateY(180deg); background: var(--bw); color: #fff; }
:where(body[data-page=bulk]) .bo-who-grid b { display: block; margin-top: calc(9 * var(--u)); font-size: calc(10 * var(--f)); font-weight: 700; color: #0b1f4f; line-height: 1.3; }
:where(body[data-page=bulk]) .bo-who-grid small { display: block; margin-top: calc(3 * var(--u)); font-size: calc(8.2 * var(--f)); color: #56627a; line-height: 1.45; }
:where(body[data-page=bulk]) .bw-blue   { --bw: #1a6fd6; --bw-bg: #f0f6fd; --bw-line: #e2edf9; --bw-ico-bg: #dcebfb; }
:where(body[data-page=bulk]) .bw-teal   { --bw: #0a96a3; --bw-bg: #eef9f9; --bw-line: #d9f0f1; --bw-ico-bg: #d3eff1; }
:where(body[data-page=bulk]) .bw-pink   { --bw: #e8437a; --bw-bg: #fef2f6; --bw-line: #fbdfe9; --bw-ico-bg: #fcd9e6; }
:where(body[data-page=bulk]) .bw-orange { --bw: #f06a22; --bw-bg: #fff6f0; --bw-line: #fde8da; --bw-ico-bg: #ffe2cc; }

/* ==========================================================
   HOW IT WORKS
   ========================================================== */
:where(body[data-page=bulk]) .bo-steps-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10 * var(--u)); margin: calc(14 * var(--u)) 0 0; padding: 0; list-style: none; }
:where(body[data-page=bulk]) .bo-steps-list li {
  position: relative; text-align: center; padding: calc(16 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));
  background: #fff; border: 1px solid #edf1f7; border-radius: calc(7 * var(--u)); box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
:where(body[data-page=bulk]) .bo-steps-list li:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
:where(body[data-page=bulk]) .bo-steps-list li:not(:last-child)::after {           /* dashed connector to the next step */
  content: ""; position: absolute; top: calc(30 * var(--u)); right: calc(-10 * var(--u)); width: calc(10 * var(--u));
  border-top: 2px dashed #b9cbe3;
}
:where(body[data-page=bulk]) .bs-num {
  position: absolute; top: calc(8 * var(--u)); left: calc(9 * var(--u));
  font-size: calc(18 * var(--f)); font-weight: 800; line-height: 1; color: #e3ecf7;
}
:where(body[data-page=bulk]) .bo-steps-list i {
  display: grid; place-items: center; margin: 0 auto; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%;
  background: linear-gradient(135deg, #0b5fd0, #0a96a3); color: #fff; font-size: calc(12 * var(--f));
  box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(11,95,208,.25);
  animation: floatY 3.6s ease-in-out infinite;
}
:where(body[data-page=bulk]) .bo-steps-list li:nth-child(2) i { animation-delay: .4s; }
:where(body[data-page=bulk]) .bo-steps-list li:nth-child(3) i { animation-delay: .8s; }
:where(body[data-page=bulk]) .bo-steps-list li:nth-child(4) i { animation-delay: 1.2s; }
:where(body[data-page=bulk]) .bo-steps-list b { display: block; margin-top: calc(8 * var(--u)); font-size: calc(9.8 * var(--f)); font-weight: 700; color: #0b1f4f; }
:where(body[data-page=bulk]) .bo-steps-list small { display: block; margin-top: calc(2 * var(--u)); font-size: calc(8.2 * var(--f)); color: #56627a; line-height: 1.45; }

/* ==========================================================
   ORDER SHEET
   ========================================================== */
:where(body[data-page=bulk]) .bo-order { scroll-margin-top: calc(60 * var(--u)); }
:where(body[data-page=bulk]) .bo-order-head { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(12 * var(--u)); }
:where(body[data-page=bulk]) .bo-order-head .eyebrow, :where(body[data-page=bulk]) .bo-form-card .eyebrow { font-size: max(12px, calc(6.8 * var(--f))); color: #0a8f9c; }
:where(body[data-page=bulk]) .bo-order-head .sec-title { margin-top: calc(3 * var(--u)); }
:where(body[data-page=bulk]) .bo-import {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u)); flex-shrink: 0;
  height: calc(22 * var(--u)); padding: 0 calc(11 * var(--u)); border-radius: 99px;
  background: #e9f6f4; color: #037d8b; border: 1px solid #c5e8e5; font-weight: 700; font-size: max(13px, calc(7.8 * var(--f)));
  transition: background-color .3s, color .3s, transform .35s var(--ease);
}
:where(body[data-page=bulk]) .bo-import:hover { background: #0a96a3; color: #fff; transform: translateY(-2px); }

:where(body[data-page=bulk]) .bo-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: calc(9 * var(--u)); margin-top: calc(12 * var(--u)); }
:where(body[data-page=bulk]) .bo-tabs { display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); }
:where(body[data-page=bulk]) .bo-tabs button {
  display: inline-flex; align-items: center; gap: calc(5 * var(--u)); height: calc(21 * var(--u)); padding: 0 calc(9 * var(--u));
  border-radius: 99px; border: 1px solid #d9e2ee; background: #fff; color: #33405c;
  font-size: max(13px, calc(7.6 * var(--f))); font-weight: 600; transition: background-color .3s, color .3s, border-color .3s;
}
:where(body[data-page=bulk]) .bo-tabs button i { font-size: .9em; color: #0b5fd0; transition: color .3s; }
:where(body[data-page=bulk]) .bo-tabs button span { min-width: 1.6em; padding: 0 .4em; border-radius: 99px; background: #eef3f9; font-size: .82em; font-weight: 700; color: #4f5b73; text-align: center; }
:where(body[data-page=bulk]) .bo-tabs button:hover { border-color: #0b5fd0; color: #0b5fd0; }
:where(body[data-page=bulk]) .bo-tabs button[aria-selected="true"] { background: var(--navy-btn); border-color: var(--navy-btn); color: #fff; }
:where(body[data-page=bulk]) .bo-tabs button[aria-selected="true"] i { color: #7fd3da; }
:where(body[data-page=bulk]) .bo-tabs button[aria-selected="true"] span { background: rgba(255,255,255,.18); color: #fff; }

:where(body[data-page=bulk]) .bo-tools-right { display: flex; align-items: center; gap: calc(10 * var(--u)); }
:where(body[data-page=bulk]) .bo-search { position: relative; display: block; }
:where(body[data-page=bulk]) .bo-search i { position: absolute; left: calc(9 * var(--u)); top: 50%; translate: 0 -50%; color: #6b7488; font-size: calc(8 * var(--f)); pointer-events: none; }
:where(body[data-page=bulk]) .bo-search input {
  width: calc(170 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(9 * var(--u)) 0 calc(23 * var(--u));
  border: 1px solid #d9e2ee; border-radius: 99px; outline: 0; background: #fff; font-size: max(13px, calc(7.8 * var(--f))); color: var(--text);
  transition: border-color .3s, box-shadow .3s;
}
:where(body[data-page=bulk]) .bo-search input:focus { border-color: #1a6fd6; box-shadow: 0 0 0 3px rgba(26,111,214,.12); }
:where(body[data-page=bulk]) .bo-only { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); cursor: pointer; font-size: max(13px, calc(7.8 * var(--f))); font-weight: 600; color: #33405c; white-space: nowrap; }
:where(body[data-page=bulk]) .bo-only input { position: absolute; opacity: 0; pointer-events: none; }
:where(body[data-page=bulk]) .bo-switch { position: relative; flex-shrink: 0; width: 34px; height: 20px; border-radius: 99px; background: #cdd7e5; transition: background-color .3s; }
:where(body[data-page=bulk]) .bo-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: translate .35s var(--ease);
}
:where(body[data-page=bulk]) .bo-only input:checked + .bo-switch { background: #0a96a3; }
:where(body[data-page=bulk]) .bo-only input:checked + .bo-switch::after { translate: 14px 0; }
:where(body[data-page=bulk]) .bo-only input:focus-visible + .bo-switch { outline: 2px solid #1a6fd6; outline-offset: 2px; }

:where(body[data-page=bulk]) .bo-sheet-wrap { margin-top: calc(10 * var(--u)); border: 1px solid #e3eaf3; border-radius: calc(7 * var(--u)); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
:where(body[data-page=bulk]) .bo-sheet { width: 100%; border-collapse: collapse; font-size: calc(8.4 * var(--f)); }
:where(body[data-page=bulk]) .bo-sheet th {
  padding: calc(7 * var(--u)) calc(9 * var(--u)); text-align: left; white-space: nowrap;
  background: linear-gradient(90deg, #0b2458, #0b3f7f); color: #fff; font-size: max(12px, calc(7.4 * var(--f))); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
:where(body[data-page=bulk]) .bo-sheet th:nth-child(5) { text-align: center; }
:where(body[data-page=bulk]) .bo-sheet th:last-child, :where(body[data-page=bulk]) .bo-sheet td:last-child { text-align: right; }
:where(body[data-page=bulk]) .bo-sheet td { padding: calc(7 * var(--u)) calc(9 * var(--u)); border-top: 1px solid #edf1f7; vertical-align: middle; color: #33405c; }
:where(body[data-page=bulk]) .bo-row { animation: fadeUp .5s var(--ease) both; animation-delay: calc(var(--i) * 30ms); transition: background-color .3s; }
:where(body[data-page=bulk]) .bo-row:hover { background: #f8fbfe; }
:where(body[data-page=bulk]) .bo-row.is-on { background: #f0f8f7; }
:where(body[data-page=bulk]) .bo-row.is-on td:first-child { box-shadow: inset 3px 0 0 #0a96a3; }
:where(body[data-page=bulk]) .bo-row.is-out { opacity: .6; }

:where(body[data-page=bulk]) .bo-prod { display: flex; align-items: center; gap: calc(9 * var(--u)); min-width: calc(200 * var(--u)); }
:where(body[data-page=bulk]) .bo-img { display: block; flex-shrink: 0; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(5 * var(--u)); overflow: hidden; background: #f3f6fa; border: 1px solid #edf1f7; }
:where(body[data-page=bulk]) .bo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
:where(body[data-page=bulk]) .bo-row:hover .bo-img img { transform: scale(1.1); }
:where(body[data-page=bulk]) .bo-name { display: block; font-weight: 700; color: #0b1f4f; line-height: 1.3; transition: color .3s; }
:where(body[data-page=bulk]) .bo-name:hover { color: var(--blue); }
:where(body[data-page=bulk]) .bo-prod small { display: block; margin-top: 1px; font-size: max(12px, calc(7.2 * var(--f))); color: #6b7488; line-height: 1.35; }
:where(body[data-page=bulk]) .bo-tag { display: inline-block; margin-top: calc(3 * var(--u)); padding: 0 .6em; border-radius: 99px; font-size: max(11px, calc(6.4 * var(--f))); font-weight: 700; line-height: 1.7; }
:where(body[data-page=bulk]) .bo-tag--rx { background: #fde8ee; color: #c92a5c; }
:where(body[data-page=bulk]) .bo-tag--otc { background: #e2f5ea; color: #0f8a50; }
:where(body[data-page=bulk]) .bo-none { color: #9aa3b5; }
:where(body[data-page=bulk]) .bo-price { white-space: nowrap; font-weight: 700; color: #0b1f4f; }
:where(body[data-page=bulk]) .bo-price small { font-weight: 500; color: #6b7488; }
:where(body[data-page=bulk]) .bo-amt { white-space: nowrap; font-weight: 800; color: #0b1f4f; min-width: calc(60 * var(--u)); }

:where(body[data-page=bulk]) .bo-qty-cell { text-align: center; }
:where(body[data-page=bulk]) .bo-qty { display: inline-flex; align-items: center; border: 1px solid #d3ddea; border-radius: calc(5 * var(--u)); background: #fff; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
:where(body[data-page=bulk]) .bo-qty:focus-within { border-color: #1a6fd6; box-shadow: 0 0 0 3px rgba(26,111,214,.12); }
:where(body[data-page=bulk]) .bo-qty button { width: calc(20 * var(--u)); height: calc(22 * var(--u)); min-width: 30px; min-height: 34px; color: #0b2458; font-size: max(11px, calc(6.6 * var(--f))); transition: background-color .25s, color .25s; }
:where(body[data-page=bulk]) .bo-qty button:hover { background: #0b5fd0; color: #fff; }
:where(body[data-page=bulk]) .bo-qty input {
  width: calc(38 * var(--u)); min-width: 52px; height: calc(22 * var(--u)); min-height: 34px; border: 0; outline: 0; text-align: center;
  font-weight: 700; font-size: max(14px, calc(8.4 * var(--f))); color: #0b1f4f; background: transparent; -moz-appearance: textfield; appearance: textfield;
}
:where(body[data-page=bulk]) .bo-qty input::-webkit-outer-spin-button, :where(body[data-page=bulk]) .bo-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:where(body[data-page=bulk]) .bo-row.is-on .bo-qty { border-color: #0a96a3; }
:where(body[data-page=bulk]) .bo-hint { display: block; min-height: 1.4em; margin-top: 2px; font-size: max(11px, calc(6.6 * var(--f))); color: #6b7488; }
:where(body[data-page=bulk]) .bo-hint.warn { color: #d9761a; font-weight: 700; }
:where(body[data-page=bulk]) .bo-hint.warn::before {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; margin-right: .35em; background: currentColor;
  -webkit-mask: var(--ico-warn) center / contain no-repeat; mask: var(--ico-warn) center / contain no-repeat;
}

:where(body[data-page=bulk]) .bo-empty { display: grid; justify-items: center; gap: calc(4 * var(--u)); padding: calc(24 * var(--u)) calc(12 * var(--u)); text-align: center; }
:where(body[data-page=bulk]) .bo-empty-ico { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #eef3f9; color: #0b5fd0; font-size: calc(14 * var(--f)); }
:where(body[data-page=bulk]) .bo-empty b { font-size: calc(10 * var(--f)); color: #0b1f4f; }
:where(body[data-page=bulk]) .bo-empty p { font-size: calc(8.4 * var(--f)); color: #56627a; }
:where(body[data-page=bulk]) .bo-sheet-note { margin-top: calc(7 * var(--u)); font-size: max(13px, calc(7.6 * var(--f))); color: #56627a; }
:where(body[data-page=bulk]) .bo-sheet-note i { color: #0a96a3; margin-right: calc(3 * var(--u)); }

/* ==========================================================
   DETAILS + SUMMARY
   ========================================================== */
:where(body[data-page=bulk]) .bo-checkout { display: grid; grid-template-columns: 420fr 290fr; gap: calc(12 * var(--u)); align-items: start; scroll-margin-top: calc(60 * var(--u)); }
:where(body[data-page=bulk]) .bo-card { border-radius: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u)); }
:where(body[data-page=bulk]) .bo-form-card { background: #fff; border: 1px solid #edf1f7; box-shadow: 0 calc(3 * var(--u)) calc(16 * var(--u)) rgba(16,42,92,.06); }
:where(body[data-page=bulk]) .bo-title { margin-top: calc(3 * var(--u)); font-size: calc(19 * var(--f)); }

:where(body[data-page=bulk]) .bo-form { display: grid; grid-template-columns: 1fr 1fr; gap: calc(9 * var(--u)) calc(11 * var(--u)); margin-top: calc(12 * var(--u)); }
:where(body[data-page=bulk]) .bo-field { position: relative; display: block; }
:where(body[data-page=bulk]) .bo-field--wide { grid-column: 1 / -1; }
:where(body[data-page=bulk]) .bo-label { display: block; margin-bottom: calc(3 * var(--u)); font-size: max(13px, calc(7.6 * var(--f))); font-weight: 700; color: #0b2458; }
:where(body[data-page=bulk]) .bo-label em { font-style: normal; color: #e5484d; }
:where(body[data-page=bulk]) .bo-field > i {
  position: absolute; left: calc(10 * var(--u)); bottom: calc(9.5 * var(--u)); font-size: calc(8.8 * var(--f));
  color: #4f5b73; pointer-events: none; transition: color .3s;
}
:where(body[data-page=bulk]) .bo-field--area > i { bottom: auto; top: calc(25 * var(--u)); }
:where(body[data-page=bulk]) .bo-field > i.bo-caret { left: auto; right: calc(10 * var(--u)); font-size: calc(7 * var(--f)); }
:where(body[data-page=bulk]) .bo-field input, :where(body[data-page=bulk]) .bo-field select, :where(body[data-page=bulk]) .bo-field textarea {
  width: 100%; height: calc(28 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(26 * var(--u));
  border: 1px solid #d9e2ee; border-radius: calc(5 * var(--u)); background: #fff; outline: 0;
  font-size: calc(8.6 * var(--f)); color: var(--text); transition: border-color .3s, box-shadow .3s;
}
:where(body[data-page=bulk]) .bo-field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: calc(24 * var(--u)); }
:where(body[data-page=bulk]) .bo-field textarea { display: block; height: calc(56 * var(--u)); min-height: calc(44 * var(--u)); padding-top: calc(8 * var(--u)); resize: vertical; }
:where(body[data-page=bulk]) .bo-field input::placeholder, :where(body[data-page=bulk]) .bo-field textarea::placeholder { color: #8a93a6; }
:where(body[data-page=bulk]) .bo-field input:focus, :where(body[data-page=bulk]) .bo-field select:focus, :where(body[data-page=bulk]) .bo-field textarea:focus { border-color: #1a6fd6; box-shadow: 0 0 0 3px rgba(26,111,214,.12); }
:where(body[data-page=bulk]) .bo-field:focus-within > i:not(.bo-caret) { color: #1a6fd6; }
:where(body[data-page=bulk]) .bo-form.tried :invalid { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,.1); }

:where(body[data-page=bulk]) .bo-summary {
  position: sticky; top: calc(56 * var(--u));
  background: linear-gradient(160deg, #0b2458 0%, #0b3f7f 60%, #0a5a8f 100%); color: #fff;
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(11,36,88,.25); overflow: hidden;
}
:where(body[data-page=bulk]) .bo-summary::after {                                  /* soft glow decor */
  content: ""; position: absolute; right: calc(-60 * var(--u)); top: calc(-60 * var(--u)); width: calc(180 * var(--u)); aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, rgba(16,169,171,.35), transparent 70%); pointer-events: none;
}
:where(body[data-page=bulk]) .bo-summary > * { position: relative; z-index: 1; }
:where(body[data-page=bulk]) .bo-sum-title { display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(13 * var(--f)); font-weight: 800; }
:where(body[data-page=bulk]) .bo-sum-title i { color: #7fd3da; }

:where(body[data-page=bulk]) .bo-sum-list { margin-top: calc(9 * var(--u)); max-height: calc(150 * var(--u)); overflow-y: auto; padding-right: calc(3 * var(--u)); }
:where(body[data-page=bulk]) .bo-sum-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); }    /* light thumb on the navy card */
@supports (-moz-appearance: none) { :where(body[data-page=bulk]) .bo-sum-list { scrollbar-color: rgba(255,255,255,.3) transparent; } }
:where(body[data-page=bulk]) .bo-sum-list li {
  display: grid; grid-template-columns: calc(24 * var(--u)) 1fr auto auto; align-items: center; gap: calc(7 * var(--u));
  padding: calc(6 * var(--u)) 0; border-bottom: 1px solid rgba(255,255,255,.12); animation: fadeUp .4s var(--ease) both;
}
:where(body[data-page=bulk]) .bo-sum-list img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(4 * var(--u)); object-fit: contain; background: #fff; }
:where(body[data-page=bulk]) .bo-sum-list b { display: block; font-size: calc(8.2 * var(--f)); font-weight: 700; line-height: 1.3; }
:where(body[data-page=bulk]) .bo-sum-list small { display: block; font-size: max(12px, calc(7 * var(--f))); color: rgba(255,255,255,.72); }
:where(body[data-page=bulk]) .bo-sum-list em { font-style: normal; color: #ffc078; font-weight: 700; }
:where(body[data-page=bulk]) .bo-sum-list strong { font-size: calc(8.4 * var(--f)); white-space: nowrap; }
:where(body[data-page=bulk]) .bo-sum-rm { width: 24px; height: 24px; border-radius: 50%; color: rgba(255,255,255,.65); font-size: 12px; transition: background-color .25s, color .25s; }
:where(body[data-page=bulk]) .bo-sum-rm:hover { background: rgba(255,255,255,.15); color: #fff; }
:where(body[data-page=bulk]) .bo-sum-list .bo-sum-empty { display: flex; gap: calc(9 * var(--u)); align-items: center; padding: calc(10 * var(--u)) 0; color: rgba(255,255,255,.8); font-size: calc(8.4 * var(--f)); line-height: 1.45; animation: none; }
:where(body[data-page=bulk]) .bo-sum-empty i { font-size: calc(16 * var(--f)); color: #7fd3da; }
:where(body[data-page=bulk]) .bo-sum-empty a { color: #7fd3da; font-weight: 700; text-decoration: underline; }

:where(body[data-page=bulk]) .bo-sum-totals { margin: calc(9 * var(--u)) 0 0; display: grid; gap: calc(4 * var(--u)); }
:where(body[data-page=bulk]) .bo-sum-totals div { display: flex; justify-content: space-between; font-size: calc(8.6 * var(--f)); color: rgba(255,255,255,.82); }
:where(body[data-page=bulk]) .bo-sum-totals dd { margin: 0; font-weight: 700; color: #fff; }
:where(body[data-page=bulk]) .bo-sum-grand { margin-top: calc(3 * var(--u)); padding-top: calc(7 * var(--u)); border-top: 1px dashed rgba(255,255,255,.3); }
:where(body[data-page=bulk]) .bo-sum-grand dt { font-weight: 700; color: #fff; }
:where(body[data-page=bulk]) .bo-sum-grand dd { font-size: calc(14 * var(--f)); font-weight: 800; }
:where(body[data-page=bulk]) .bo-sum-note { margin-top: calc(3 * var(--u)); font-size: max(12px, calc(7 * var(--f))); color: rgba(255,255,255,.65); }

:where(body[data-page=bulk]) .bo-send {
  width: 100%; height: calc(29 * var(--u)); margin-top: calc(11 * var(--u));
  background: linear-gradient(90deg, #12a150, #1dbb63); color: #fff; font-size: calc(9.6 * var(--f)); font-weight: 700; border-radius: calc(5 * var(--u));
}
:where(body[data-page=bulk]) .bo-send i { font-size: 1.25em; }
:where(body[data-page=bulk]) .bo-send.sent { background: linear-gradient(90deg, #0a96a3, #10a9ab); }
:where(body[data-page=bulk]) .bo-sum-alt { display: grid; grid-template-columns: 1fr 1fr auto; gap: calc(5 * var(--u)); margin-top: calc(6 * var(--u)); }
:where(body[data-page=bulk]) .bo-alt {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(5 * var(--u));
  height: calc(22 * var(--u)); min-height: 36px; padding: 0 calc(8 * var(--u)); border-radius: calc(5 * var(--u));
  border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: max(12.5px, calc(7.4 * var(--f))); font-weight: 600; white-space: nowrap;
  transition: background-color .3s, border-color .3s;
}
:where(body[data-page=bulk]) .bo-alt:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
:where(body[data-page=bulk]) .bo-alt--clear:hover { background: rgba(229,72,77,.25); border-color: #ff8a8e; }
:where(body[data-page=bulk]) .bo-status { min-height: 1.4em; margin-top: calc(6 * var(--u)); font-size: max(12.5px, calc(7.6 * var(--f))); font-weight: 600; }
:where(body[data-page=bulk]) .bo-status.ok { color: #8be3b4; }
:where(body[data-page=bulk]) .bo-status.err { color: #ffb3b5; }

/* ==========================================================
   FAQ
   ========================================================== */
:where(body[data-page=bulk]) .bo-faq-list { max-width: calc(520 * var(--u)); margin: calc(12 * var(--u)) auto 0; display: grid; gap: calc(7 * var(--u)); }
:where(body[data-page=bulk]) .bo-q { background: #fff; border: 1px solid #e3eaf3; border-radius: calc(6 * var(--u)); transition: border-color .3s, box-shadow .3s; }
:where(body[data-page=bulk]) .bo-q[open]:not(.closing) { border-color: #bcd3ee; box-shadow: var(--shadow-sm); }
:where(body[data-page=bulk]) .bo-q summary {
  display: flex; justify-content: space-between; align-items: center; gap: calc(10 * var(--u));
  padding: calc(9 * var(--u)) calc(12 * var(--u)); font-size: calc(9.4 * var(--f)); font-weight: 700; color: #0b1f4f;
}
:where(body[data-page=bulk]) .bo-a { padding: 0 calc(12 * var(--u)) calc(11 * var(--u)); font-size: calc(8.6 * var(--f)); color: #3c4a66; line-height: 1.6; }
:where(body[data-page=bulk]) .bo-a a { color: var(--blue-link); font-weight: 600; text-decoration: underline; }

/* ==========================================================
   CTA
   ========================================================== */
:where(body[data-page=bulk]) .bo-cta {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u));
  padding: calc(20 * var(--u)) calc(22 * var(--u)); border-radius: calc(8 * var(--u));
  background: linear-gradient(90deg, #e9f6f4 0%, #f4faf9 50%, #e8f1fb 100%); box-shadow: var(--shadow-sm);
}
:where(body[data-page=bulk]) .bo-cta::after {                                      /* light sweep */
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none; z-index: -1;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-18deg); transition: left 1.1s var(--ease);
}
:where(body[data-page=bulk]) .bo-cta:hover::after { left: 120%; }
:where(body[data-page=bulk]) .bo-cta h2 { font-size: calc(14 * var(--f)); font-weight: 800; color: #0b1f5c; line-height: 1.25; letter-spacing: -.01em; }
:where(body[data-page=bulk]) .bo-cta p { margin-top: calc(4 * var(--u)); font-size: calc(8.8 * var(--f)); color: #2f3b56; max-width: calc(320 * var(--u)); }
:where(body[data-page=bulk]) .bo-cta-btns { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); flex-shrink: 0; }
:where(body[data-page=bulk]) .bo-cta-wa { background: #12a150; color: #fff; }

/* ==========================================================
   STICKY ORDER BAR
   ========================================================== */
:where(body[data-page=bulk]) .bo-bar {
  position: fixed; z-index: 104; left: 50%; bottom: clamp(14px, 1.6vw, 26px);
  display: flex; align-items: center; gap: 22px; padding: 10px 10px 10px 20px; border-radius: 99px;
  background: rgba(11,36,88,.96); color: #fff; box-shadow: 0 12px 32px rgba(11,36,88,.35);
  backdrop-filter: blur(6px);
  translate: -50% 160%; opacity: 0; pointer-events: none; transition: translate .5s var(--ease), opacity .4s;
}
:where(body[data-page=bulk]) .bo-bar.show { translate: -50% 0; opacity: 1; pointer-events: auto; }
:where(body[data-page=bulk]) .bo-bar-info { display: flex; align-items: center; gap: 12px; }
:where(body[data-page=bulk]) .bo-bar-info > i { font-size: 20px; color: #7fd3da; }
:where(body[data-page=bulk]) .bo-bar-info b { display: block; font-size: 15px; line-height: 1.2; }
:where(body[data-page=bulk]) .bo-bar-info small { display: block; font-size: 13px; color: rgba(255,255,255,.75); white-space: nowrap; }
:where(body[data-page=bulk]) .bo-bar .btn { height: 42px; padding: 0 20px; border-radius: 99px; font-size: 14px; background: linear-gradient(90deg, #0a96a3, #10a9ab); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1099px) {
  :where(body[data-page=bulk]) .bo-hero-inner { padding-left: var(--gutter); }
  :where(body[data-page=bulk]) .bo-hero-bg { inset: 0; }
  :where(body[data-page=bulk]) .bo-hero::before { background: linear-gradient(90deg, rgba(236,245,253,.96) 0%, rgba(236,245,253,.88) 50%, rgba(236,245,253,.25) 85%); }
  :where(body[data-page=bulk]) .bo-who-grid, :where(body[data-page=bulk]) .bo-steps-list { grid-template-columns: repeat(2, 1fr); }
  :where(body[data-page=bulk]) .bo-steps-list li::after { display: none; }
  :where(body[data-page=bulk]) .bo-tools { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  :where(body[data-page=bulk]) .bo-tools-right { justify-content: space-between; }
  :where(body[data-page=bulk]) .bo-search { flex: 1; }
  :where(body[data-page=bulk]) .bo-search input { width: 100%; }
}

/* order sheet becomes stacked cards */
@media (max-width: 939px) {
  :where(body[data-page=bulk]) .bo-checkout { grid-template-columns: 1fr; }
  :where(body[data-page=bulk]) .bo-summary { position: static; }
  :where(body[data-page=bulk]) .bo-cta { flex-direction: column; align-items: flex-start; }

  :where(body[data-page=bulk]) .bo-sheet-wrap { border: 0; background: none; box-shadow: none; overflow: visible; }
  :where(body[data-page=bulk]) .bo-sheet thead { display: none; }
  :where(body[data-page=bulk]) .bo-sheet, :where(body[data-page=bulk]) .bo-sheet tbody { display: block; }
  :where(body[data-page=bulk]) .bo-sheet tbody { display: grid; gap: 12px; }
  :where(body[data-page=bulk]) .bo-row {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 14px;
    background: #fff; border: 1px solid #e3eaf3; border-radius: 12px; box-shadow: var(--shadow-sm);
  }
  :where(body[data-page=bulk]) .bo-row.is-on { background: #f0f8f7; border-color: #a8dcd9; }
  :where(body[data-page=bulk]) .bo-row.is-on td:first-child { box-shadow: none; }
  :where(body[data-page=bulk]) .bo-sheet td { display: block; padding: 0; border: 0; text-align: left; font-size: 14px; }
  :where(body[data-page=bulk]) .bo-sheet td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a93a6; }
  :where(body[data-page=bulk]) .bo-sheet td.bo-prod { display: flex; grid-column: 1 / -1; min-width: 0; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed #e3eaf3; }
  :where(body[data-page=bulk]) .bo-img { width: 56px; height: 56px; border-radius: 8px; }
  :where(body[data-page=bulk]) .bo-name { font-size: 16px; }
  :where(body[data-page=bulk]) .bo-prod small { font-size: 13px; }
  :where(body[data-page=bulk]) .bo-tag { font-size: 11px; }
  :where(body[data-page=bulk]) .bo-qty-cell { grid-column: 1 / 3; text-align: left; }
  :where(body[data-page=bulk]) .bo-qty button { width: 40px; height: 40px; font-size: 13px; }
  :where(body[data-page=bulk]) .bo-qty input { width: 70px; height: 40px; font-size: 16px; }
  :where(body[data-page=bulk]) .bo-hint { font-size: 12px; }
  :where(body[data-page=bulk]) .bo-sheet td.bo-amt { align-self: start; min-width: 0; text-align: right; font-size: 16px; }   /* desktop min-width pushed it past the card edge */
  :where(body[data-page=bulk]) .bo-sheet td.bo-amt::before { text-align: right; }
}

@media (max-width: 767px) {
  :where(body[data-page=bulk]) .bo-hero { min-height: 0; }
  :where(body[data-page=bulk]) .bo-hero-bg { background-position: 70% center; opacity: .5; }
  :where(body[data-page=bulk]) .bo-hero::before { background: linear-gradient(180deg, rgba(236,245,253,.9), rgba(236,245,253,.78)); }
  :where(body[data-page=bulk]) .bo-hero-inner { padding-block: 32px; }
  :where(body[data-page=bulk]) .bo-hero .eyebrow { font-size: 11px; letter-spacing: .3em; }
  :where(body[data-page=bulk]) .bo-hero-title { font-size: 38px; }
  :where(body[data-page=bulk]) .bo-hero-text { font-size: 15px; }
  :where(body[data-page=bulk]) .bo-hero-feats { gap: 14px 18px; }
  :where(body[data-page=bulk]) .bo-hero-feats li { width: calc(50% - 9px); }
  :where(body[data-page=bulk]) .bo-hero-feats i { font-size: 22px; width: 28px; }
  :where(body[data-page=bulk]) .bo-hero-feats span { font-size: 13px; }
  :where(body[data-page=bulk]) .bo-hero-btns { gap: 10px; margin-top: 22px; }
  :where(body[data-page=bulk]) .bo-hero-btns .btn { height: 46px; padding: 0 20px; font-size: 15px; flex: 1 1 auto; }

  :where(body[data-page=bulk]) .bo-sec-head .eyebrow, :where(body[data-page=bulk]) .bo-order-head .eyebrow, :where(body[data-page=bulk]) .bo-form-card .eyebrow { font-size: 11px; }
  :where(body[data-page=bulk]) .bo-sub { font-size: 14px; }
  :where(body[data-page=bulk]) .bo-who-grid { grid-template-columns: 1fr; gap: 10px; }
  :where(body[data-page=bulk]) .bo-who-grid li { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; padding: 16px; }
  :where(body[data-page=bulk]) .bw-ico { grid-row: span 2; width: 48px; height: 48px; font-size: 20px; }
  :where(body[data-page=bulk]) .bo-who-grid b { margin-top: 0; font-size: 16px; }
  :where(body[data-page=bulk]) .bo-who-grid small { font-size: 13.5px; }
  :where(body[data-page=bulk]) .bo-steps-list { gap: 10px; }
  :where(body[data-page=bulk]) .bo-steps-list li { padding: 18px 12px 16px; }
  :where(body[data-page=bulk]) .bs-num { font-size: 26px; top: 10px; left: 12px; }
  :where(body[data-page=bulk]) .bo-steps-list i { width: 46px; height: 46px; font-size: 18px; }
  :where(body[data-page=bulk]) .bo-steps-list b { font-size: 15px; margin-top: 10px; }
  :where(body[data-page=bulk]) .bo-steps-list small { font-size: 13px; }

  :where(body[data-page=bulk]) .bo-order-head { flex-direction: column; align-items: flex-start; }
  :where(body[data-page=bulk]) .bo-import { height: 40px; padding: 0 16px; font-size: 14px; }
  :where(body[data-page=bulk]) .bo-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  :where(body[data-page=bulk]) .bo-tabs::-webkit-scrollbar { display: none; }
  :where(body[data-page=bulk]) .bo-tabs button { flex-shrink: 0; height: 38px; padding: 0 14px; font-size: 14px; }
  :where(body[data-page=bulk]) .bo-tools-right { flex-wrap: wrap; gap: 12px; }
  :where(body[data-page=bulk]) .bo-search { flex: 1 1 100%; }
  :where(body[data-page=bulk]) .bo-search i { left: 14px; font-size: 14px; }
  :where(body[data-page=bulk]) .bo-search input { height: 44px; font-size: 15px; padding-left: 38px; }
  :where(body[data-page=bulk]) .bo-only { font-size: 14px; }
  :where(body[data-page=bulk]) .bo-sheet-note { font-size: 13px; }
  :where(body[data-page=bulk]) .bo-empty b { font-size: 16px; }
  :where(body[data-page=bulk]) .bo-empty p { font-size: 14px; }
  :where(body[data-page=bulk]) .bo-empty-ico { width: 52px; height: 52px; font-size: 20px; }

  :where(body[data-page=bulk]) .bo-card { padding: 20px 16px 22px; }
  :where(body[data-page=bulk]) .bo-title { font-size: 28px; }
  :where(body[data-page=bulk]) .bo-form { grid-template-columns: 1fr; gap: 14px; }
  :where(body[data-page=bulk]) .bo-label { font-size: 14px; margin-bottom: 5px; }
  :where(body[data-page=bulk]) .bo-field > i { left: 14px; bottom: 16px; font-size: 15px; }
  :where(body[data-page=bulk]) .bo-field--area > i { top: 44px; bottom: auto; }
  :where(body[data-page=bulk]) .bo-field > i.bo-caret { right: 14px; font-size: 12px; }
  :where(body[data-page=bulk]) .bo-field input, :where(body[data-page=bulk]) .bo-field select { height: 50px; font-size: 15px; padding-left: 42px; }
  :where(body[data-page=bulk]) .bo-field textarea { height: 110px; font-size: 15px; padding: 14px 14px 0 42px; }
  :where(body[data-page=bulk]) .bo-sum-title { font-size: 20px; }
  :where(body[data-page=bulk]) .bo-sum-list { max-height: 300px; }
  :where(body[data-page=bulk]) .bo-sum-list li { grid-template-columns: 40px 1fr auto auto; gap: 10px; padding: 10px 0; }
  :where(body[data-page=bulk]) .bo-sum-list img { width: 40px; height: 40px; }
  :where(body[data-page=bulk]) .bo-sum-list b { font-size: 14px; }
  :where(body[data-page=bulk]) .bo-sum-list small { font-size: 12.5px; }
  :where(body[data-page=bulk]) .bo-sum-list strong { font-size: 14px; }
  :where(body[data-page=bulk]) .bo-sum-list .bo-sum-empty { font-size: 14px; }
  :where(body[data-page=bulk]) .bo-sum-totals div { font-size: 14px; }
  :where(body[data-page=bulk]) .bo-sum-grand dd { font-size: 22px; }
  :where(body[data-page=bulk]) .bo-sum-note { font-size: 12.5px; }
  :where(body[data-page=bulk]) .bo-send { height: 52px; font-size: 16px; }
  :where(body[data-page=bulk]) .bo-sum-alt { grid-template-columns: 1fr 1fr; }
  :where(body[data-page=bulk]) .bo-alt { height: 42px; font-size: 13.5px; }
  :where(body[data-page=bulk]) .bo-alt--clear { grid-column: 1 / -1; }
  :where(body[data-page=bulk]) .bo-sum-alt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(body[data-page=bulk]) .bo-alt { white-space: normal; text-align: center; line-height: 1.2; padding-inline: 8px; }
  :where(body[data-page=bulk]) .bo-status { font-size: 14px; }

  :where(body[data-page=bulk]) .bo-q summary { padding: 14px 16px; font-size: 15px; }
  :where(body[data-page=bulk]) .bo-a { padding: 0 16px 16px; font-size: 14px; }
  :where(body[data-page=bulk]) .bo-cta { padding: 24px 18px; }
  :where(body[data-page=bulk]) .bo-cta h2 { font-size: 22px; }
  :where(body[data-page=bulk]) .bo-cta p { font-size: 14px; }
  :where(body[data-page=bulk]) .bo-cta-btns { width: 100%; }
  :where(body[data-page=bulk]) .bo-cta-btns .btn { height: 46px; font-size: 14.5px; flex: 1 1 auto; }

  /* bar spans the width, leaving room for the floating WhatsApp / call buttons */
  :where(body[data-page=bulk]) .bo-bar { left: 12px; right: 76px; bottom: 14px; translate: 0 160%; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 16px; }
  :where(body[data-page=bulk]) .bo-bar.show { translate: 0 0; }
  :where(body[data-page=bulk]) .bo-bar-info { gap: 10px; min-width: 0; }
  :where(body[data-page=bulk]) .bo-bar-info b { font-size: 14px; }
  :where(body[data-page=bulk]) .bo-bar-info small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  :where(body[data-page=bulk]) .bo-bar-info > i { display: none; }
  :where(body[data-page=bulk]) .bo-bar .btn { height: 40px; padding: 0 14px; font-size: 13.5px; flex-shrink: 0; }
}

/* ##########################################################
   PAGE: contact  ·  scope body[data-page="contact"]
   ########################################################## */
/* ==========================================================
   MMatrics Pharmaceuticals – contact page (contact.html)
   Follows the base section and uses the same design unit (--u)
   and tokens.
   ========================================================== */

:where(body[data-page=contact]) textarea { font: inherit; }
:where(body[data-page=contact]) .contact-page { padding-bottom: calc(10 * var(--u)); }

/* ==========================================================
   HERO
   ========================================================== */
:where(body[data-page=contact]) .ct-hero { position: relative; overflow: hidden; isolation: isolate; min-height: calc(201 * var(--u)); display: flex; align-items: center; }
:where(body[data-page=contact]) .ct-hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background: #eaf3fd url(../images/banners/contact-us.webp?v=c433fd7b85) center 62% / cover no-repeat;
  animation: ctDrift 18s ease-in-out infinite alternate;
}
:where(body[data-page=contact]) .ct-hero::before {                                    /* soften left side for text */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(236,245,253,.92) 0%, rgba(236,245,253,.7) 36%, rgba(236,245,253,0) 58%);
}
@keyframes ctDrift { to { transform: scale(1.05); } }
:where(body[data-page=contact]) .ct-hero-inner { padding-block: calc(18 * var(--u)); padding-left: calc(51 * var(--u)); }
:where(body[data-page=contact]) .ct-hero-inner > * { animation: fadeUp .8s var(--ease) both; }
:where(body[data-page=contact]) .ct-hero-inner > :nth-child(2) { animation-delay: .08s; }
:where(body[data-page=contact]) .ct-hero-inner > :nth-child(3) { animation-delay: .16s; }
:where(body[data-page=contact]) .ct-hero-inner > :nth-child(4) { animation-delay: .24s; }
:where(body[data-page=contact]) .ct-hero .eyebrow { color: #0b2a66; font-size: max(12px, calc(6.8 * var(--f))); letter-spacing: .4em; }
:where(body[data-page=contact]) .ct-hero-title { margin-top: calc(5 * var(--u)); font-weight: 800; font-size: calc(35 * var(--f)); line-height: 1.02; letter-spacing: -.035em; }
:where(body[data-page=contact]) .ct-hero-title span { display: block; width: max-content; max-width: 100%; }
:where(body[data-page=contact]) .ct-hero-title .l1 { color: #0b1f5c; }
:where(body[data-page=contact]) .ct-hero-title .l2 {
  background: linear-gradient(90deg, #0a8f9c, #10a9ab 60%, #0a8f9c); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 6s ease-in-out infinite;
}
:where(body[data-page=contact]) .ct-hero-text { margin-top: calc(8 * var(--u)); max-width: calc(284 * var(--u)); font-size: calc(10.6 * var(--f)); line-height: 1.4; color: #1c2a44; font-weight: 500; }
:where(body[data-page=contact]) .ct-hero-feats { display: flex; flex-wrap: wrap; gap: calc(18 * var(--u)); margin-top: calc(14 * var(--u)); }
:where(body[data-page=contact]) .ct-hero-feats li { display: flex; align-items: center; gap: calc(7 * var(--u)); }
:where(body[data-page=contact]) .ct-hero-feats i {
  font-size: calc(20 * var(--f)); color: #0e5bc4; width: calc(24 * var(--u)); text-align: center;
  transition: transform .45s var(--ease);
}
:where(body[data-page=contact]) .ct-hero-feats li:nth-child(2) i { color: #0b3e8f; }
:where(body[data-page=contact]) .ct-hero-feats li:nth-child(3) i { color: #1a7be0; }
:where(body[data-page=contact]) .ct-hero-feats li:nth-child(4) i { color: #0a96a3; }
:where(body[data-page=contact]) .ct-hero-feats li:hover i { transform: translateY(-3px) rotate(-8deg); }
:where(body[data-page=contact]) .ct-hero-feats span { font-size: max(13px, calc(7.8 * var(--f))); font-weight: 700; line-height: 1.3; color: #0b2458; }

/* "Need Help?" call bubble */
:where(body[data-page=contact]) .ct-help {
  position: absolute; z-index: 2; left: calc(414 * var(--u)); top: 50%; translate: 0 -38%;
  width: calc(91 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #fb6f9d, #ec3f77 70%);
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(236,63,119,.35);
  transition: transform .45s var(--ease), box-shadow .45s;
  animation: fadeUp .8s var(--ease) .3s both;
}
:where(body[data-page=contact]) .ct-help::before, :where(body[data-page=contact]) .ct-help::after {                   /* pulse rings */
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(242,77,130,.45);
  animation: ctPulse 2.6s ease-out infinite; pointer-events: none;
}
:where(body[data-page=contact]) .ct-help::after { animation-delay: 1.3s; }
@keyframes ctPulse { from { transform: scale(1); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
:where(body[data-page=contact]) .ct-help:hover { transform: scale(1.06); box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(236,63,119,.45); }
:where(body[data-page=contact]) .ct-help i { font-size: calc(15 * var(--f)); margin-bottom: calc(5 * var(--u)); animation: ctRing 2.4s ease-in-out infinite; }
@keyframes ctRing { 0%, 60%, 100% { transform: rotate(0); } 65%, 75%, 85% { transform: rotate(-14deg); } 70%, 80% { transform: rotate(14deg); } }
:where(body[data-page=contact]) .ct-help b { font-size: calc(10 * var(--f)); font-weight: 600; line-height: 1.25; }
:where(body[data-page=contact]) .ct-help span { font-size: calc(8.6 * var(--f)); font-weight: 600; white-space: nowrap; }

/* ==========================================================
   FORM + CONTACT INFO
   ========================================================== */
:where(body[data-page=contact]) .ct-main { display: grid; grid-template-columns: 392fr 311fr; gap: calc(12 * var(--u)); padding-top: 0; }
:where(body[data-page=contact]) .ct-card { border-radius: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u)); }
:where(body[data-page=contact]) .ct-form-card { display: flex; flex-direction: column; }
:where(body[data-page=contact]) .ct-form-card .ct-form { flex: 1; grid-template-rows: auto auto auto minmax(calc(65 * var(--u)), 1fr) auto auto; }
:where(body[data-page=contact]) .ct-form-card .ct-field--area textarea { height: 100%; }
:where(body[data-page=contact]) .ct-form-card { position: relative; overflow: hidden; background: #fff; border: 1px solid #edf1f7; box-shadow: 0 calc(3 * var(--u)) calc(16 * var(--u)) rgba(16,42,92,.06); }
:where(body[data-page=contact]) .ct-form-card::before {                               /* gradient accent along the top edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #0b5fd0, #0a96a3, #f0457d);
}
:where(body[data-page=contact]) .ct-form-card .eyebrow { font-size: max(12px, calc(6.8 * var(--f))); color: #0a8f9c; }
:where(body[data-page=contact]) .ct-title { margin-top: calc(3 * var(--u)); font-size: calc(19 * var(--f)); }
:where(body[data-page=contact]) .ct-sub { margin-top: calc(3 * var(--u)); font-size: calc(9.2 * var(--f)); color: #4f5b73; }

:where(body[data-page=contact]) .ct-form { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)) calc(11 * var(--u)); margin-top: calc(12 * var(--u)); }
/* topic chips (radio buttons styled as pills) */
:where(body[data-page=contact]) .ct-topics { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); min-width: 0; margin: 0; padding: 0; border: 0; }
:where(body[data-page=contact]) .ct-topics legend { padding: 0; margin-bottom: calc(6 * var(--u)); font-size: max(13px, calc(8 * var(--f))); font-weight: 700; color: var(--navy-2); }
:where(body[data-page=contact]) .ct-topics label { position: relative; }
:where(body[data-page=contact]) .ct-topics input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
:where(body[data-page=contact]) .ct-topics span {
  display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(20 * var(--u)); padding: 0 calc(9 * var(--u));
  border: 1px solid #dfe7f2; border-radius: 99px; background: #fff; font-size: max(12.5px, calc(7.6 * var(--f))); font-weight: 600; color: #3c4a66;
  transition: background .3s, border-color .3s, color .3s, box-shadow .3s, transform .3s var(--ease);
}
:where(body[data-page=contact]) .ct-topics span i { color: #1a6fd6; font-size: .95em; transition: color .3s; }
:where(body[data-page=contact]) .ct-topics label:hover span { border-color: #1a6fd6; color: #0b4fb3; transform: translateY(-1px); }
:where(body[data-page=contact]) .ct-topics input:checked + span { background: linear-gradient(90deg, #0b5fd0, #1a73e2); border-color: transparent; color: #fff; box-shadow: 0 6px 14px rgba(11,95,208,.25); }
:where(body[data-page=contact]) .ct-topics input:checked + span i { color: #fff; }
:where(body[data-page=contact]) .ct-topics input:focus-visible + span { outline: 2px solid #1a6fd6; outline-offset: 2px; }

/* fields: soft fill, icon on the left, label floats up once the field is focused or filled */
:where(body[data-page=contact]) .ct-field { position: relative; display: block; }
:where(body[data-page=contact]) .ct-field--area { grid-column: 1 / -1; }
:where(body[data-page=contact]) .ct-field i {
  position: absolute; z-index: 1; left: calc(11 * var(--u)); top: 0; height: calc(32 * var(--u)); display: flex; align-items: center;
  font-size: calc(9.6 * var(--f)); color: #8391a9; pointer-events: none; transition: color .3s;
}
:where(body[data-page=contact]) .ct-field--area i { top: calc(10 * var(--u)); height: auto; }
:where(body[data-page=contact]) .ct-field input, :where(body[data-page=contact]) .ct-field textarea {
  width: 100%; height: calc(32 * var(--u)); padding: calc(11 * var(--u)) calc(10 * var(--u)) 0 calc(29 * var(--u));
  border: 1px solid #e1e8f2; border-radius: calc(6 * var(--u)); background: #f6f9fd; outline: 0;
  font-size: calc(8.6 * var(--f)); color: var(--text);
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
:where(body[data-page=contact]) .ct-field textarea { height: calc(65 * var(--u)); padding-top: calc(16 * var(--u)); padding-bottom: calc(6 * var(--u)); resize: vertical; min-height: calc(50 * var(--u)); display: block; }
:where(body[data-page=contact]) .ct-field:hover :is(input, textarea) { border-color: #c9d7ea; }
:where(body[data-page=contact]) .ct-field :is(input, textarea):focus { background: #fff; border-color: #1a6fd6; box-shadow: 0 0 0 4px rgba(26,111,214,.1); }
:where(body[data-page=contact]) .ct-field:focus-within i { color: #1a6fd6; }
:where(body[data-page=contact]) .ct-label {
  position: absolute; left: calc(29 * var(--u)); top: calc(16 * var(--u)); translate: 0 -50%; pointer-events: none; white-space: nowrap;
  font-size: calc(8.6 * var(--f)); color: #6b7488; transition: top .25s var(--ease), font-size .25s var(--ease), color .25s;
}
:where(body[data-page=contact]) .ct-label em { font-style: normal; color: #e5484d; }
:where(body[data-page=contact]) .ct-field--area .ct-label { top: calc(14.5 * var(--u)); }
:where(body[data-page=contact]) .ct-field :is(input, textarea):is(:focus, :not(:placeholder-shown)) ~ .ct-label { top: calc(8.5 * var(--u)); font-size: max(10.5px, calc(6.2 * var(--f))); font-weight: 600; }
:where(body[data-page=contact]) .ct-field--area textarea:is(:focus, :not(:placeholder-shown)) ~ .ct-label { top: calc(7.5 * var(--u)); }
:where(body[data-page=contact]) .ct-field :is(input, textarea):focus ~ .ct-label { color: #1a6fd6; }
:where(body[data-page=contact]) .ct-form.tried :is(input, textarea):invalid { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,.1); }
:where(body[data-page=contact]) .ct-form.tried :is(input, textarea):invalid ~ .ct-label { color: #d93a40; }

/* image security code: picture · refresh · input in one row */
:where(body[data-page=contact]) .ct-captcha { grid-column: 1 / -1; display: grid; grid-template-columns: auto calc(32 * var(--u)) minmax(0, 1fr); gap: calc(6 * var(--u)); align-items: center; }
:where(body[data-page=contact]) .ct-captcha-img { display: block; height: calc(32 * var(--u)); border: 1px solid #e1e8f2; border-radius: calc(6 * var(--u)); overflow: hidden; background: #eef5fe; }
:where(body[data-page=contact]) .ct-captcha-img img { display: block; width: auto; height: 100%; }
:where(body[data-page=contact]) .ct-captcha-refresh { height: calc(32 * var(--u)); border: 1px solid #e1e8f2; border-radius: calc(6 * var(--u)); background: #fff; color: #1a6fd6; cursor: pointer; transition: background .2s; }
:where(body[data-page=contact]) .ct-captcha-refresh:hover { background: #eef5fe; }
:where(body[data-page=contact]) .ct-captcha-refresh i { transition: transform .4s; }
:where(body[data-page=contact]) .ct-captcha-refresh:active i { transform: rotate(180deg); }
:where(body[data-page=contact]) .ct-captcha-input input { text-transform: uppercase; letter-spacing: .2em; font-weight: 700; }
@media (max-width: 520px) {
  :where(body[data-page=contact]) .ct-captcha { grid-template-columns: minmax(0, 1fr) calc(32 * var(--u)); }
  :where(body[data-page=contact]) .ct-captcha-input { grid-column: 1 / -1; }
}

:where(body[data-page=contact]) .ct-actions { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: calc(8 * var(--u)) calc(14 * var(--u)); margin-top: calc(2 * var(--u)); }
:where(body[data-page=contact]) .ct-send {
  height: calc(30 * var(--u)); padding: 0 calc(22 * var(--u)); gap: calc(6 * var(--u));
  background: linear-gradient(90deg, #0b5fd0, #1a73e2); color: #fff; font-size: calc(9.6 * var(--f)); font-weight: 700;
  border-radius: calc(6 * var(--u)); box-shadow: 0 8px 20px rgba(11,95,208,.25); transition: box-shadow .3s, transform .3s var(--ease), background .4s;
}
:where(body[data-page=contact]) .ct-send:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(11,95,208,.32); }
:where(body[data-page=contact]) .ct-note { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: max(12px, calc(7.4 * var(--f))); color: var(--muted); }
:where(body[data-page=contact]) .ct-note i { color: #12a150; }
:where(body[data-page=contact]) .ct-send:hover i { animation: ctFly .9s var(--ease) infinite; }
@keyframes ctFly { 50% { transform: translate(3px, -3px); } }
:where(body[data-page=contact]) .ct-send.sent { background: linear-gradient(90deg, #00947b, #0aa38d); }
:where(body[data-page=contact]) .ct-status { grid-column: 1 / -1; min-height: 1.4em; margin-top: calc(-4 * var(--u)); font-size: calc(8.2 * var(--f)); font-weight: 600; }
:where(body[data-page=contact]) .ct-status.ok { color: #0b8a63; }
:where(body[data-page=contact]) .ct-status.err { color: #d93a40; }

:where(body[data-page=contact]) .ct-info { position: relative; overflow: hidden; background: linear-gradient(135deg, #ecf5fd 0%, #f4f9fe 55%, #eaf4fc 100%); }
:where(body[data-page=contact]) .ct-info::after {                                      /* soft wave decor */
  content: ""; position: absolute; right: calc(-60 * var(--u)); bottom: calc(-70 * var(--u)); width: calc(220 * var(--u)); aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 70%); pointer-events: none;
}
:where(body[data-page=contact]) .ct-info-title { font-size: calc(14 * var(--f)); font-weight: 800; color: var(--navy-2); letter-spacing: -.01em; }
:where(body[data-page=contact]) .ct-info .ct-sub { font-size: calc(8.8 * var(--f)); }
/* each channel is a tile: accent edge, tinted icon, small label, bold value, round action button */
:where(body[data-page=contact]) .ct-info-list { position: relative; z-index: 1; margin-top: calc(12 * var(--u)); display: grid; gap: calc(8 * var(--u)); }
:where(body[data-page=contact]) .ct-info-list li {
  position: relative; overflow: hidden; display: grid; grid-template-columns: calc(26 * var(--u)) minmax(0, 1fr) auto; gap: calc(10 * var(--u)); align-items: center;
  padding: calc(9 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u)) calc(12 * var(--u));
  background: rgba(255,255,255,.88); border: 1px solid #e2ebf5; border-radius: calc(7 * var(--u));
  box-shadow: 0 2px 10px rgba(16,42,92,.04); transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
:where(body[data-page=contact]) .ct-info-list li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ci); }
:where(body[data-page=contact]) .ct-info-list li:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ci) 30%, #fff); box-shadow: 0 10px 24px rgba(16,42,92,.09); }
:where(body[data-page=contact]) .ci-ico {
  width: calc(26 * var(--u)); aspect-ratio: 1; border-radius: calc(7 * var(--u)); display: grid; place-items: center;
  color: var(--ci); font-size: calc(11.5 * var(--f)); background: color-mix(in srgb, var(--ci) 12%, #fff);
  transition: background-color .35s, color .35s, transform .45s var(--ease);
}
:where(body[data-page=contact]) .ct-info-list li:hover .ci-ico { background: var(--ci); color: #fff; transform: rotate(-8deg); }
:where(body[data-page=contact]) .ci-teal  { --ci: #0a96a3; }
:where(body[data-page=contact]) .ci-pink  { --ci: #f0457d; }
:where(body[data-page=contact]) .ci-blue  { --ci: #1a6fd6; }
:where(body[data-page=contact]) .ci-green { --ci: #12a150; }
:where(body[data-page=contact]) .ci-green .ci-ico { font-size: calc(13 * var(--f)); }
:where(body[data-page=contact]) .ci-body { min-width: 0; }
:where(body[data-page=contact]) .ct-info-list h3 { font-size: max(11px, calc(6.2 * var(--f))); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1.3; }
:where(body[data-page=contact]) .ci-val { display: inline-block; margin-top: 1px; font-size: calc(10.4 * var(--f)); font-weight: 800; color: var(--navy-2); line-height: 1.35; overflow-wrap: anywhere; transition: color .3s; }
:where(body[data-page=contact]) .ci-val:hover { color: var(--ci); }
:where(body[data-page=contact]) .ct-info-list p { display: flex; align-items: center; gap: calc(4 * var(--u)); margin-top: 2px; font-size: max(12.5px, calc(7.6 * var(--f))); color: #5a6680; line-height: 1.4; }
:where(body[data-page=contact]) .ct-info-list p i { color: var(--ci); font-size: .95em; }
:where(body[data-page=contact]) .ci-go {
  width: calc(20 * var(--u)); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #dbe5f1; color: var(--ci); font-size: calc(8 * var(--f)); transition: background-color .3s, color .3s, border-color .3s;
}
:where(body[data-page=contact]) .ci-go i { transition: transform .35s var(--ease); }
:where(body[data-page=contact]) .ct-info-list li:hover .ci-go { background: var(--ci); border-color: var(--ci); color: #fff; }
:where(body[data-page=contact]) .ci-go:hover i { transform: translateX(2px); }
/* address tile: the address set out line by line, with a directions pill */
:where(body[data-page=contact]) .ci-addr { grid-template-columns: calc(26 * var(--u)) minmax(0, 1fr); align-items: start; }
:where(body[data-page=contact]) .ct-info-list address { display: grid; gap: 1px; margin-top: calc(3 * var(--u)); font-style: normal; font-size: max(13px, calc(8 * var(--f))); line-height: 1.5; color: #3c4a66; }
:where(body[data-page=contact]) .ct-info-list address b { font-size: calc(9.2 * var(--f)); font-weight: 800; color: var(--navy-2); }
:where(body[data-page=contact]) .ci-dir {
  display: inline-flex; align-items: center; gap: calc(4 * var(--u)); margin-top: calc(7 * var(--u)); height: calc(18 * var(--u)); padding: 0 calc(9 * var(--u));
  border-radius: 99px; background: color-mix(in srgb, var(--ci) 10%, #fff); color: var(--ci); font-size: max(12.5px, calc(7.4 * var(--f))); font-weight: 700;
  transition: background-color .3s, color .3s;
}
:where(body[data-page=contact]) .ci-dir i { font-size: .9em; transition: transform .35s var(--ease); }
:where(body[data-page=contact]) .ci-dir:hover { background: var(--ci); color: #fff; }
:where(body[data-page=contact]) .ci-dir:hover i { transform: translateX(3px); }

:where(body[data-page=contact]) .ct-follow {
  position: relative; z-index: 1; display: flex; align-items: center; gap: calc(12 * var(--u));
  margin-top: calc(14 * var(--u)); padding-top: calc(11 * var(--u)); border-top: 1px solid #d9e6f3;
}
:where(body[data-page=contact]) .ct-follow h3 { font-size: calc(10.8 * var(--f)); font-weight: 700; color: var(--navy); }
:where(body[data-page=contact]) .ct-follow .socials { margin-top: 0; gap: calc(8 * var(--u)); }
:where(body[data-page=contact]) .ct-follow .socials a { width: calc(24 * var(--u)); height: calc(24 * var(--u)); font-size: calc(10.5 * var(--f)); }
:where(body[data-page=contact]) .s-wa { background: #12a150; }

/* ==========================================================
   LOCATION + OFFICE
   ========================================================== */
:where(body[data-page=contact]) .ct-visit { display: grid; grid-template-columns: 428fr 266fr; gap: calc(17 * var(--u)); padding-top: 0; align-items: end; }
:where(body[data-page=contact]) .ct-head { display: flex; align-items: center; gap: calc(8 * var(--u)); margin: 0 0 calc(8 * var(--u)) calc(8 * var(--u)); }
:where(body[data-page=contact]) .ct-head-ico {
  width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  color: #fff; font-size: calc(12 * var(--f)); animation: floatY 3.6s ease-in-out infinite;
}
:where(body[data-page=contact]) .ct-head-navy { background: #0b2f7a; }
:where(body[data-page=contact]) .ct-head-teal { background: #0a96a3; }
:where(body[data-page=contact]) .ct-head h2 { font-size: calc(14 * var(--f)); font-weight: 800; color: var(--navy-2); line-height: 1.25; }
:where(body[data-page=contact]) .ct-head p { font-size: calc(8.8 * var(--f)); color: #4f5b73; }

:where(body[data-page=contact]) .ct-map, :where(body[data-page=contact]) .ct-office-img {
  position: relative; height: calc(162 * var(--u)); border-radius: calc(7 * var(--u)); overflow: hidden;
  background: #eef3f8; box-shadow: var(--shadow-sm); border: 1px solid #e7edf5;
}
:where(body[data-page=contact]) .ct-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
:where(body[data-page=contact]) .ct-map-card {
  position: absolute; z-index: 1; left: calc(8 * var(--u)); top: calc(8 * var(--u)); width: calc(212 * var(--u));
  background: #fff; border-radius: calc(5 * var(--u)); padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(11 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(16,42,92,.16);
}
:where(body[data-page=contact]) .ct-map-card h3 { font-size: calc(8.8 * var(--f)); font-weight: 700; color: #0b1f4f; }
:where(body[data-page=contact]) .ct-map-card p {
  margin-top: calc(6 * var(--u)); padding-bottom: calc(8 * var(--u)); border-bottom: 1px solid var(--line);
  font-size: max(14px, calc(7 * var(--f))); line-height: 1.6; color: #3c4a66;
}
:where(body[data-page=contact]) .ct-map-card .btn { margin-top: calc(9 * var(--u)); height: calc(19 * var(--u)); padding: 0 calc(10 * var(--u)); font-size: max(13.5px, calc(7.2 * var(--f))); gap: calc(6 * var(--u)); border-radius: calc(3.5 * var(--u)); background: #0b5fd0; }
:where(body[data-page=contact]) .ct-office-img img { width: 100%; height: 100%; object-fit: cover; object-position: 22% center; transition: transform 1.2s var(--ease); }
:where(body[data-page=contact]) .ct-office:hover .ct-office-img img { transform: scale(1.06); }

/* ==========================================================
   FEATURES
   ========================================================== */
:where(body[data-page=contact]) .ct-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(9 * var(--u)); margin-top: calc(13 * var(--u)); }
:where(body[data-page=contact]) .ct-feats li {
  display: flex; align-items: center; gap: calc(11 * var(--u)); height: calc(62 * var(--u));
  padding: 0 calc(12 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--cf-bg);
  border: 1px solid var(--cf-line); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
:where(body[data-page=contact]) .ct-feats li:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
:where(body[data-page=contact]) .cf-ico {
  width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: var(--cf-ico-bg); color: var(--cf); font-size: calc(15 * var(--f)); transition: transform .5s var(--ease), background .4s, color .4s;
}
:where(body[data-page=contact]) .ct-feats li:hover .cf-ico { transform: rotateY(180deg); background: var(--cf); color: #fff; }
:where(body[data-page=contact]) .ct-feats b { display: block; font-size: calc(9.2 * var(--f)); font-weight: 700; color: #0b1f4f; line-height: 1.35; }
:where(body[data-page=contact]) .ct-feats small { display: block; margin-top: calc(1 * var(--u)); font-size: calc(8 * var(--f)); color: #56627a; line-height: 1.35; max-width: calc(110 * var(--u)); }
:where(body[data-page=contact]) .cf-blue   { --cf: #1a6fd6; --cf-bg: #f0f6fd; --cf-line: #e2edf9; --cf-ico-bg: #dcebfb; }
:where(body[data-page=contact]) .cf-orange { --cf: #f06a22; --cf-bg: #fff6f0; --cf-line: #fde8da; --cf-ico-bg: #ffe2cc; }
:where(body[data-page=contact]) .cf-green  { --cf: #11a06a; --cf-bg: #f0f9f3; --cf-line: #dcf1e4; --cf-ico-bg: #d5f0df; }
:where(body[data-page=contact]) .cf-pink   { --cf: #e8437a; --cf-bg: #fef2f6; --cf-line: #fbdfe9; --cf-ico-bg: #fcd9e6; }

/* ==========================================================
   HELP + BUSINESS BANNERS
   ========================================================== */
:where(body[data-page=contact]) .ct-banners { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); margin-top: calc(11 * var(--u)); }
:where(body[data-page=contact]) .ct-banner {
  position: relative; overflow: hidden; isolation: isolate; height: calc(91 * var(--u)); border-radius: calc(7 * var(--u));
  display: flex; align-items: center; box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
:where(body[data-page=contact]) .ct-banner::after {                                   /* light sweep */
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg);
  transition: left 1s var(--ease);
}
:where(body[data-page=contact]) .ct-banner:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
:where(body[data-page=contact]) .ct-banner:hover::after { left: 120%; }
:where(body[data-page=contact]) .ct-banner--help { background: linear-gradient(90deg, #eaf3fc 0%, #f3f8fd 50%, #e6f0fa 100%); }
:where(body[data-page=contact]) .ct-banner--biz  { background: linear-gradient(90deg, #e9f6f4 0%, #f4faf9 50%, #e8f1fb 100%); }
:where(body[data-page=contact]) .ct-banner-body { position: relative; z-index: 1; padding-left: calc(19 * var(--u)); max-width: calc(200 * var(--u)); }
:where(body[data-page=contact]) .ct-banner--biz .ct-banner-body { padding-left: calc(13 * var(--u)); max-width: calc(210 * var(--u)); }
:where(body[data-page=contact]) .ct-banner h2 { font-size: calc(14 * var(--f)); font-weight: 800; color: #0b1f5c; line-height: 1.25; letter-spacing: -.01em; display: flex; align-items: center; gap: calc(7 * var(--u)); }
:where(body[data-page=contact]) .ct-banner h2 i { color: #0a96a3; font-size: calc(16 * var(--f)); }
:where(body[data-page=contact]) .ct-banner p { margin-top: calc(5 * var(--u)); font-size: calc(8.8 * var(--f)); line-height: 1.4; color: #2f3b56; }
:where(body[data-page=contact]) .ct-banner--biz p { padding-left: calc(23 * var(--u)); }
:where(body[data-page=contact]) .ct-banner .btn { margin-top: calc(10 * var(--u)); height: calc(20 * var(--u)); padding: 0 calc(12 * var(--u)); font-size: max(13.5px, calc(7.6 * var(--f))); gap: calc(7 * var(--u)); border-radius: calc(3.5 * var(--u)); }
:where(body[data-page=contact]) .ct-banner--biz .btn { margin-left: calc(23 * var(--u)); }

/* illustrations built from icons, right side of each banner */
:where(body[data-page=contact]) .ct-banner-art { position: absolute; z-index: 0; right: 0; top: 0; bottom: 0; width: 48%; pointer-events: none; }
:where(body[data-page=contact]) .ct-banner-art > * { position: absolute; transition: transform .8s var(--ease); }
:where(body[data-page=contact]) .art-bottle { right: calc(22 * var(--u)); top: calc(14 * var(--u)); font-size: calc(46 * var(--f)); color: #fff; filter: drop-shadow(0 6px 12px rgba(16,42,92,.15)); -webkit-text-stroke: 1px #d5e3f1; }
:where(body[data-page=contact]) .art-leaf   { right: calc(70 * var(--u)); top: calc(10 * var(--u)); font-size: calc(30 * var(--f)); color: #3fa34d; transform: rotate(-25deg); animation: floatY 4s ease-in-out infinite; }
:where(body[data-page=contact]) .art-caps   { right: calc(74 * var(--u)); bottom: calc(10 * var(--u)); font-size: calc(26 * var(--f)); color: #fff; filter: drop-shadow(0 4px 8px rgba(16,42,92,.18)); -webkit-text-stroke: 1px #d5e3f1; }
:where(body[data-page=contact]) .art-tabs   { right: calc(118 * var(--u)); bottom: calc(14 * var(--u)); font-size: calc(18 * var(--f)); color: #fff; filter: drop-shadow(0 4px 8px rgba(16,42,92,.18)); -webkit-text-stroke: 1px #d5e3f1; }
:where(body[data-page=contact]) .ct-banner--help:hover .art-bottle { transform: translateY(-4px) rotate(4deg); }
:where(body[data-page=contact]) .ct-banner--help:hover .art-caps { transform: translateX(-4px) rotate(-8deg); }

:where(body[data-page=contact]) .art-bars { right: calc(70 * var(--u)); bottom: calc(10 * var(--u)); display: flex; align-items: flex-end; gap: calc(4 * var(--u)); height: calc(46 * var(--u)); }
:where(body[data-page=contact]) .art-bars i { width: calc(9 * var(--u)); border-radius: calc(2 * var(--u)) calc(2 * var(--u)) 0 0; background: linear-gradient(180deg, #2f8ef0, #1257c9); transform-origin: bottom; animation: ctBar 1.2s var(--ease) both; }
:where(body[data-page=contact]) .art-bars i:nth-child(1) { height: 30%; animation-delay: .1s; }
:where(body[data-page=contact]) .art-bars i:nth-child(2) { height: 50%; animation-delay: .2s; }
:where(body[data-page=contact]) .art-bars i:nth-child(3) { height: 72%; animation-delay: .3s; }
:where(body[data-page=contact]) .art-bars i:nth-child(4) { height: 100%; animation-delay: .4s; }
@keyframes ctBar { from { transform: scaleY(0); } }
:where(body[data-page=contact]) .ct-banner--biz:hover .art-bars i { animation: ctBar .9s var(--ease) both; }
:where(body[data-page=contact]) .art-trend  { right: calc(64 * var(--u)); top: calc(10 * var(--u)); font-size: calc(26 * var(--f)); color: #2f8ef0; opacity: .85; }
:where(body[data-page=contact]) .art-shake  { right: calc(10 * var(--u)); top: 50%; translate: 0 -50%; font-size: calc(46 * var(--f)); color: #f2b48a; filter: drop-shadow(0 6px 12px rgba(16,42,92,.15)); }
:where(body[data-page=contact]) .ct-banner--biz:hover .art-shake { transform: rotate(-6deg) scale(1.05); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1099px) {
  :where(body[data-page=contact]) .ct-hero-inner { padding-left: var(--gutter); }
  :where(body[data-page=contact]) .ct-hero::before { background: linear-gradient(90deg, rgba(236,245,253,.95) 0%, rgba(236,245,253,.85) 50%, rgba(236,245,253,.2) 85%); }
  :where(body[data-page=contact]) .ct-help { left: auto; right: var(--gutter); }
}

@media (max-width: 939px) {
  :where(body[data-page=contact]) .ct-main, :where(body[data-page=contact]) .ct-visit, :where(body[data-page=contact]) .ct-banners { grid-template-columns: 1fr; }
  :where(body[data-page=contact]) .ct-feats { grid-template-columns: repeat(2, 1fr); }
  :where(body[data-page=contact]) .ct-help { display: none; }
}

@media (max-width: 767px) {
  :where(body[data-page=contact]) .ct-hero { min-height: 0; }
  :where(body[data-page=contact]) .ct-hero-bg { background-position: 78% center; opacity: .55; }
  :where(body[data-page=contact]) .ct-hero::before { background: linear-gradient(180deg, rgba(236,245,253,.9), rgba(236,245,253,.75)); }
  :where(body[data-page=contact]) .ct-hero-inner { padding-block: 32px; }
  :where(body[data-page=contact]) .ct-hero .eyebrow { font-size: 11px; }
  :where(body[data-page=contact]) .ct-hero-title { font-size: 36px; }
  :where(body[data-page=contact]) .ct-hero-text { font-size: 15px; }
  :where(body[data-page=contact]) .ct-hero-feats { gap: 14px 18px; }
  :where(body[data-page=contact]) .ct-hero-feats li { width: calc(50% - 9px); }
  :where(body[data-page=contact]) .ct-hero-feats i { font-size: 24px; width: 30px; }
  :where(body[data-page=contact]) .ct-hero-feats span { font-size: 13px; }

  :where(body[data-page=contact]) .ct-card { padding: 20px 16px 22px; }
  :where(body[data-page=contact]) .ct-title { font-size: 28px; }
  :where(body[data-page=contact]) .ct-sub, :where(body[data-page=contact]) .ct-info .ct-sub { font-size: 14px; }
  :where(body[data-page=contact]) .ct-form, :where(body[data-page=contact]) .ct-form-card .ct-form { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; }
  :where(body[data-page=contact]) .ct-form-card .ct-field--area textarea { height: 120px; }
  :where(body[data-page=contact]) .ct-topics { gap: 8px; }
  :where(body[data-page=contact]) .ct-topics legend { font-size: 14.5px; margin-bottom: 10px; }
  :where(body[data-page=contact]) .ct-topics span { height: 36px; padding: 0 14px; gap: 7px; font-size: 13.5px; }
  :where(body[data-page=contact]) .ct-field i { left: 15px; height: 54px; font-size: 16px; }
  :where(body[data-page=contact]) .ct-field--area i { top: 18px; height: auto; }
  /* 16px text stops iOS zooming in on focus */
  :where(body[data-page=contact]) .ct-field input { height: 54px; font-size: 16px; padding: 20px 14px 0 44px; border-radius: 12px; }
  :where(body[data-page=contact]) .ct-field textarea { height: 130px; font-size: 16px; padding: 28px 14px 10px 44px; border-radius: 12px; }
  :where(body[data-page=contact]) .ct-label { left: 44px; top: 27px; font-size: 15px; }
  :where(body[data-page=contact]) .ct-field--area .ct-label { top: 26px; }
  :where(body[data-page=contact]) .ct-field :is(input, textarea):is(:focus, :not(:placeholder-shown)) ~ .ct-label { top: 15px; font-size: 11.5px; }
  :where(body[data-page=contact]) .ct-field--area textarea:is(:focus, :not(:placeholder-shown)) ~ .ct-label { top: 14px; }
  :where(body[data-page=contact]) .ct-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  :where(body[data-page=contact]) .ct-send { height: 52px; font-size: 16px; border-radius: 12px; }
  :where(body[data-page=contact]) .ct-note { justify-content: center; font-size: 13px; }
  :where(body[data-page=contact]) .ct-status { font-size: 14px; margin-top: 0; }
  :where(body[data-page=contact]) .ct-info-title { font-size: 22px; }
  :where(body[data-page=contact]) .ct-info-list { gap: 18px; }
  :where(body[data-page=contact]) .ct-info-list { gap: 12px; }
  :where(body[data-page=contact]) .ct-info-list li { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 14px; }
  :where(body[data-page=contact]) .ci-addr { grid-template-columns: 44px minmax(0, 1fr); }
  :where(body[data-page=contact]) .ci-ico { width: 44px; border-radius: 12px; font-size: 19px; }
  :where(body[data-page=contact]) .ct-info-list h3 { font-size: 11.5px; }
  :where(body[data-page=contact]) .ci-val { font-size: clamp(14.5px, 4.3vw, 17px); overflow-wrap: break-word; }
  :where(body[data-page=contact]) .ct-info-list p { font-size: 13.5px; gap: 6px; }
  :where(body[data-page=contact]) .ct-info-list address { font-size: 14px; }
  :where(body[data-page=contact]) .ct-info-list address b { font-size: 15px; }
  :where(body[data-page=contact]) .ci-go { width: 36px; font-size: 14px; }
  :where(body[data-page=contact]) .ci-dir { height: 36px; padding: 0 14px; gap: 6px; font-size: 13.5px; margin-top: 10px; }
  :where(body[data-page=contact]) .ct-follow { flex-wrap: wrap; gap: 12px 16px; margin-top: 20px; padding-top: 16px; }
  :where(body[data-page=contact]) .ct-follow h3 { font-size: 16px; }
  :where(body[data-page=contact]) .ct-follow .socials { gap: 10px; }
  :where(body[data-page=contact]) .ct-follow .socials a { width: 40px; height: 40px; font-size: 17px; }

  :where(body[data-page=contact]) .ct-head { margin-left: 0; }
  :where(body[data-page=contact]) .ct-head h2 { font-size: 22px; }
  :where(body[data-page=contact]) .ct-head p { font-size: 14px; }
  :where(body[data-page=contact]) .ct-map { height: auto; display: flex; flex-direction: column; }
  :where(body[data-page=contact]) .ct-map iframe { position: relative; height: 260px; order: 2; }
  :where(body[data-page=contact]) .ct-map-card { position: static; width: auto; border-radius: 0; box-shadow: none; padding: 16px; }
  :where(body[data-page=contact]) .ct-map-card h3 { font-size: 16px; }
  :where(body[data-page=contact]) .ct-map-card p { font-size: 13.5px; }
  :where(body[data-page=contact]) .ct-map-card .btn { height: 40px; font-size: 14px; padding: 0 18px; }
  :where(body[data-page=contact]) .ct-office-img { height: 240px; }

  :where(body[data-page=contact]) .ct-feats { grid-template-columns: 1fr; gap: 10px; }
  :where(body[data-page=contact]) .ct-feats li { height: auto; padding: 16px; }
  :where(body[data-page=contact]) .cf-ico { width: 48px; height: 48px; font-size: 20px; }
  :where(body[data-page=contact]) .ct-feats b { font-size: 15px; }
  :where(body[data-page=contact]) .ct-feats small { font-size: 13px; max-width: none; }

  :where(body[data-page=contact]) .ct-banner { height: auto; padding: 22px 0; }
  :where(body[data-page=contact]) .ct-banner-body, :where(body[data-page=contact]) .ct-banner--biz .ct-banner-body { padding-left: 18px; max-width: 64%; }
  :where(body[data-page=contact]) .ct-banner h2 { font-size: 20px; }
  :where(body[data-page=contact]) .ct-banner h2 i { font-size: 20px; }
  :where(body[data-page=contact]) .ct-banner p { font-size: 14px; }
  :where(body[data-page=contact]) .ct-banner--biz p { padding-left: 0; }
  :where(body[data-page=contact]) .ct-banner .btn { height: 40px; font-size: 14px; padding: 0 16px; }
  :where(body[data-page=contact]) .ct-banner--biz .btn { margin-left: 0; }
  :where(body[data-page=contact]) .ct-banner-art { width: 40%; opacity: .7; }
  :where(body[data-page=contact]) .art-tabs, :where(body[data-page=contact]) .art-leaf, :where(body[data-page=contact]) .art-trend { display: none; }
  :where(body[data-page=contact]) .art-bottle { right: 16px; top: 20px; font-size: 54px; }
  :where(body[data-page=contact]) .art-caps { right: 70px; bottom: 16px; font-size: 30px; }
  :where(body[data-page=contact]) .art-bars { right: 20px; bottom: 16px; height: 60px; }
  :where(body[data-page=contact]) .art-shake { right: 40px; top: 32%; font-size: 44px; }
}

/* ##########################################################
   PAGE: faq  ·  scope body[data-page="faq"]
   ########################################################## */
/* ==========================================================
   MMatrics Pharmaceuticals – FAQ page (faq.html)
   Follows the base section and uses the same design unit (--u)
   and tokens. The accordion motion and plus/minus toggle are
   shared (base section .acc-tog + main.js); this section styles them.
   ========================================================== */

/* topic colours: --c accent, --c-bg tint */
:where(body[data-page=faq]) .fq-c-all    { --c: #0b5bc0; --c-bg: #e8f0fb; }
:where(body[data-page=faq]) .fq-c-blue   { --c: #1a6fd6; --c-bg: #e8f1fd; }
:where(body[data-page=faq]) .fq-c-teal   { --c: #0a96a3; --c-bg: #e2f5f6; }
:where(body[data-page=faq]) .fq-c-pink   { --c: #e8437a; --c-bg: #fde9f0; }
:where(body[data-page=faq]) .fq-c-orange { --c: #f06a22; --c-bg: #fff0e6; }
:where(body[data-page=faq]) .fq-c-green  { --c: #11a06a; --c-bg: #e3f6ec; }
:where(body[data-page=faq]) .fq-c-navy   { --c: #0b3e8f; --c-bg: #e6ecf8; }

/* ==========================================================
   HERO
   ========================================================== */
:where(body[data-page=faq]) .fq-hero {
  position: relative; overflow: hidden; isolation: isolate; min-height: calc(196 * var(--u)); display: flex; align-items: center;
  background: linear-gradient(118deg, #e8f2fd 0%, #f4f9fe 46%, #e5f4f5 100%);
}
:where(body[data-page=faq]) .fq-hero::before {                                    /* soft glows */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 78% 46%, rgba(255,255,255,.95) 0, rgba(255,255,255,0) calc(110 * var(--u))),
    radial-gradient(circle at 96% 8%, rgba(10,150,163,.14) 0, rgba(10,150,163,0) calc(90 * var(--u))),
    radial-gradient(circle at 4% 96%, rgba(26,111,214,.12) 0, rgba(26,111,214,0) calc(100 * var(--u)));
}
:where(body[data-page=faq]) .fq-hero::after {                                     /* dot grid */
  content: ""; position: absolute; left: calc(14 * var(--u)); top: calc(16 * var(--u)); width: calc(60 * var(--u)); height: calc(46 * var(--u));
  z-index: -1; opacity: .5; pointer-events: none;
  background: radial-gradient(#9fbde3 1.2px, transparent 1.6px) 0 0 / calc(8 * var(--u)) calc(8 * var(--u));
}
:where(body[data-page=faq]) .fq-hero-inner { padding-block: calc(22 * var(--u)); padding-left: calc(51 * var(--u)); }
:where(body[data-page=faq]) .fq-hero-inner > * { animation: fadeUp .8s var(--ease) both; max-width: calc(330 * var(--u)); }
:where(body[data-page=faq]) .fq-hero-inner > :nth-child(2) { animation-delay: .08s; }
:where(body[data-page=faq]) .fq-hero-inner > :nth-child(3) { animation-delay: .16s; }
:where(body[data-page=faq]) .fq-hero-inner > :nth-child(4) { animation-delay: .24s; }
:where(body[data-page=faq]) .fq-hero-inner > :nth-child(5) { animation-delay: .32s; }
:where(body[data-page=faq]) .fq-hero .eyebrow { color: #0b2a66; font-size: max(12px, calc(6.8 * var(--f))); letter-spacing: .4em; }
:where(body[data-page=faq]) .fq-hero-title { margin-top: calc(5 * var(--u)); font-weight: 800; font-size: calc(32 * var(--f)); line-height: 1.04; letter-spacing: -.035em; }
:where(body[data-page=faq]) .fq-hero-title span { display: block; width: max-content; max-width: 100%; }
:where(body[data-page=faq]) .fq-hero-title .l1 { color: #0b1f5c; }
:where(body[data-page=faq]) .fq-hero-title .l2 {
  background: linear-gradient(90deg, #0a8f9c, #1a6fd6 55%, #0a8f9c); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 6s ease-in-out infinite;
}
:where(body[data-page=faq]) .fq-hero-text { margin-top: calc(7 * var(--u)); font-size: calc(9.8 * var(--f)); line-height: 1.5; color: #1c2a44; font-weight: 500; }

/* search */
:where(body[data-page=faq]) .fq-search {
  position: relative; display: flex; align-items: center; gap: calc(6 * var(--u));
  margin-top: calc(12 * var(--u)); height: calc(34 * var(--u)); min-height: 48px; padding: 0 calc(4 * var(--u)) 0 calc(13 * var(--u));
  background: #fff; border: 1px solid #dde7f3; border-radius: 99px;
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(16,42,92,.08);
  transition: border-color .3s, box-shadow .3s;
}
:where(body[data-page=faq]) .fq-search:focus-within { border-color: #1a6fd6; box-shadow: 0 0 0 4px rgba(26,111,214,.12), 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(16,42,92,.08); }
:where(body[data-page=faq]) .fq-search > i { font-size: calc(9.6 * var(--f)); color: #6b7a96; transition: color .3s; }
:where(body[data-page=faq]) .fq-search:focus-within > i { color: #1a6fd6; }
:where(body[data-page=faq]) .fq-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none;
  font-size: max(14px, calc(8.8 * var(--f))); color: var(--text);
}
:where(body[data-page=faq]) .fq-search input::placeholder { color: #7a869c; }
:where(body[data-page=faq]) .fq-search input::-webkit-search-cancel-button { display: none; }
:where(body[data-page=faq]) .fq-clear {
  width: calc(18 * var(--u)); height: calc(18 * var(--u)); min-width: 28px; min-height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: #6b7a96; background: #f1f5fa; font-size: max(12px, calc(7 * var(--f)));
  opacity: 0; visibility: hidden; transform: scale(.6); transition: opacity .25s, transform .3s var(--ease), visibility .25s, background-color .25s;
}
:where(body[data-page=faq]) .fq-search.has-value .fq-clear { opacity: 1; visibility: visible; transform: none; }
:where(body[data-page=faq]) .fq-clear:hover { background: #e3ebf5; color: var(--navy); }
:where(body[data-page=faq]) .fq-go {
  height: calc(26 * var(--u)); min-height: 38px; padding: 0 calc(15 * var(--u)); border-radius: 99px;
  background: linear-gradient(90deg, #0b5fd0, #1a73e2); color: #fff; font-weight: 700; font-size: max(13.5px, calc(8.2 * var(--f)));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
:where(body[data-page=faq]) .fq-go:hover { transform: translateY(-1px); box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(11,95,208,.3); }

/* popular tags */
:where(body[data-page=faq]) .fq-tags { display: flex; flex-wrap: wrap; align-items: center; gap: calc(5 * var(--u)) calc(6 * var(--u)); margin-top: calc(10 * var(--u)); }
:where(body[data-page=faq]) .fq-tags span { font-size: max(12.5px, calc(7.6 * var(--f))); font-weight: 700; color: #0b2458; margin-right: calc(2 * var(--u)); }
:where(body[data-page=faq]) .fq-tags button {
  padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: 99px; background: rgba(255,255,255,.75); border: 1px solid #d6e2f0;
  font-size: max(12.5px, calc(7.4 * var(--f))); font-weight: 600; color: #2f3b56;
  transition: background-color .3s, color .3s, border-color .3s, transform .35s var(--ease);
}
:where(body[data-page=faq]) .fq-tags button:hover { background: #1a6fd6; border-color: #1a6fd6; color: #fff; transform: translateY(-2px); }

/* illustration: question circle with chat bubbles */
:where(body[data-page=faq]) .fq-art { position: absolute; right: calc(46 * var(--u)); top: 50%; translate: 0 -50%; width: calc(250 * var(--u)); height: calc(176 * var(--u)); pointer-events: none; animation: fadeUp 1s var(--ease) .2s both; }
:where(body[data-page=faq]) .fq-art-circle {
  position: absolute; left: calc(56 * var(--u)); top: calc(14 * var(--u)); width: calc(148 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #e4f0fc 55%, #cfe3f8 100%);
  box-shadow: inset 0 calc(-8 * var(--u)) calc(20 * var(--u)) rgba(26,111,214,.12), 0 calc(16 * var(--u)) calc(36 * var(--u)) rgba(16,42,92,.12);
}
:where(body[data-page=faq]) .fq-art-circle b {
  font-size: calc(96 * var(--f)); font-weight: 800; line-height: 1.2; padding: 0 .06em;
  background: linear-gradient(160deg, #1a6fd6, #0a96a3); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(8 * var(--u)) rgba(10,150,163,.25));
  animation: fqTilt 5s ease-in-out infinite;
}
@keyframes fqTilt { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-3px); } }
:where(body[data-page=faq]) .fq-art-orbit {
  position: absolute; left: calc(40 * var(--u)); top: calc(-2 * var(--u)); width: calc(180 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px dashed rgba(26,111,214,.28); animation: fqSpin 40s linear infinite;
}
:where(body[data-page=faq]) .fq-art-orbit::before {                               /* satellite dot */
  content: ""; position: absolute; top: 12%; left: 10%; width: calc(9 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  background: #f24d82; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(242,77,130,.18);
}
@keyframes fqSpin { to { transform: rotate(360deg); } }
:where(body[data-page=faq]) .fq-bubble {
  position: absolute; display: flex; align-items: center; gap: calc(6 * var(--u)); white-space: nowrap;
  padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  background: #fff; border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(3 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(16,42,92,.12);
  font-size: max(11px, calc(7.4 * var(--f))); font-weight: 700; color: #0b1f4f;
  animation: floatY 4s ease-in-out infinite;
}
:where(body[data-page=faq]) .fq-bubble--q { left: 0; top: calc(26 * var(--u)); }
:where(body[data-page=faq]) .fq-bubble--a { right: 0; bottom: calc(22 * var(--u)); border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(3 * var(--u)) calc(12 * var(--u)); animation-delay: -2s; }
:where(body[data-page=faq]) .fq-bubble-ico { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: max(9px, calc(6.6 * var(--f))); background: #1a6fd6; }
:where(body[data-page=faq]) .fq-bubble--a .fq-bubble-ico { background: #0a96a3; }
:where(body[data-page=faq]) .fq-ok { color: #12a150; }
:where(body[data-page=faq]) .fq-art-caps   { position: absolute; left: calc(36 * var(--u)); bottom: calc(6 * var(--u)); font-size: calc(22 * var(--f)); color: #fff; -webkit-text-stroke: 1px #c8d9ee; filter: drop-shadow(0 4px 8px rgba(16,42,92,.16)); animation: floatY 5s ease-in-out -1s infinite; }
:where(body[data-page=faq]) .fq-art-leaf   { position: absolute; right: calc(28 * var(--u)); top: calc(8 * var(--u)); font-size: calc(22 * var(--f)); color: #3fa34d; transform: rotate(-25deg); animation: floatY 4.4s ease-in-out infinite; }
:where(body[data-page=faq]) .fq-art-bottle { position: absolute; right: calc(6 * var(--u)); top: calc(44 * var(--u)); font-size: calc(18 * var(--f)); color: #f24d82; opacity: .85; animation: floatY 3.8s ease-in-out -.6s infinite; }

/* ==========================================================
   TOPICS + QUESTIONS
   ========================================================== */
:where(body[data-page=faq]) .fq-main { display: grid; grid-template-columns: calc(196 * var(--u)) 1fr; gap: calc(18 * var(--u)); align-items: start; }

/* sidebar */
:where(body[data-page=faq]) .fq-side { position: sticky; top: calc(52 * var(--u)); display: grid; gap: calc(12 * var(--u)); }
:where(body[data-page=faq]) .fq-cats {
  background: #fff; border: 1px solid #edf1f7; border-radius: calc(8 * var(--u)); padding: calc(11 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
  box-shadow: 0 calc(3 * var(--u)) calc(16 * var(--u)) rgba(16,42,92,.06);
}
:where(body[data-page=faq]) .fq-side-title { padding: 0 calc(4 * var(--u)) calc(7 * var(--u)); font-size: calc(10.5 * var(--f)); font-weight: 800; color: var(--navy-2); transition: padding .4s var(--ease); }
:where(body[data-page=faq]) .fq-cats.is-collapsed .fq-side-title { padding-bottom: calc(2 * var(--u)); }
:where(body[data-page=faq]) .nav-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; font: inherit; color: inherit; }
:where(body[data-page=faq]) .nav-toggle i {
  font-size: .6em; width: 2em; height: 2em; border-radius: 50%; color: var(--muted); background: #f2f6fb;
  transition: transform .35s var(--ease), background-color .3s, color .3s;
}
:where(body[data-page=faq]) .nav-toggle:hover i { background: #e6f0fc; color: var(--blue); }
:where(body[data-page=faq]) .fq-cats ul { display: grid; gap: calc(2 * var(--u)); }
:where(body[data-page=faq]) .fq-cat {
  position: relative; width: 100%; display: flex; align-items: center; gap: calc(7 * var(--u)); text-align: left;
  padding: calc(5 * var(--u)) calc(6 * var(--u)); border-radius: calc(6 * var(--u));
  transition: background-color .3s;
}
:where(body[data-page=faq]) .fq-cat::before {                                     /* active bar */
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--c);
  transform: scaleY(0); transition: transform .4s var(--ease);
}
:where(body[data-page=faq]) .fq-cat:hover { background: #f5f8fc; }
:where(body[data-page=faq]) .fq-cat.active { background: var(--c-bg); }
:where(body[data-page=faq]) .fq-cat.active::before { transform: none; }
:where(body[data-page=faq]) .fq-cat-ico {
  width: calc(22 * var(--u)); height: calc(22 * var(--u)); min-width: 32px; min-height: 32px; flex-shrink: 0; border-radius: calc(6 * var(--u));
  display: grid; place-items: center; background: var(--c-bg); color: var(--c); font-size: calc(9 * var(--f));
  transition: background-color .35s, color .35s, transform .45s var(--ease);
}
:where(body[data-page=faq]) .fq-cat:hover .fq-cat-ico { transform: rotate(-8deg) scale(1.06); }
:where(body[data-page=faq]) .fq-cat.active .fq-cat-ico { background: var(--c); color: #fff; box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) color-mix(in srgb, var(--c) 30%, transparent); }
:where(body[data-page=faq]) .fq-cat-name { flex: 1; min-width: 0; font-size: max(13px, calc(8.4 * var(--f))); font-weight: 600; color: #2f3b56; line-height: 1.3; }
:where(body[data-page=faq]) .fq-cat.active .fq-cat-name { color: #0b1f4f; font-weight: 700; }
:where(body[data-page=faq]) .fq-cat-n {
  min-width: calc(16 * var(--u)); padding: 1px calc(5 * var(--u)); border-radius: 99px; text-align: center;
  background: #f1f5fa; font-size: max(11.5px, calc(7 * var(--f))); font-weight: 700; color: #56627a;
  transition: background-color .3s, color .3s;
}
:where(body[data-page=faq]) .fq-cat.active .fq-cat-n { background: #fff; color: var(--c); }

/* help card */
:where(body[data-page=faq]) .fq-help {
  position: relative; overflow: hidden; isolation: isolate; border-radius: calc(8 * var(--u)); padding: calc(13 * var(--u)) calc(12 * var(--u));
  background: linear-gradient(140deg, #0a8f9c 0%, #0b5fd0 100%); color: #fff;
}
:where(body[data-page=faq]) .fq-help::after {
  content: ""; position: absolute; right: calc(-30 * var(--u)); top: calc(-30 * var(--u)); width: calc(100 * var(--u)); aspect-ratio: 1; z-index: -1;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
}
:where(body[data-page=faq]) .fq-help-ico {
  width: calc(28 * var(--u)); height: calc(28 * var(--u)); min-width: 40px; min-height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.18); font-size: calc(12 * var(--f)); animation: floatY 3.6s ease-in-out infinite;
}
:where(body[data-page=faq]) .fq-help h3 { margin-top: calc(8 * var(--u)); font-size: calc(11.5 * var(--f)); font-weight: 800; line-height: 1.3; }
:where(body[data-page=faq]) .fq-help p { margin-top: calc(3 * var(--u)); font-size: max(13px, calc(8 * var(--f))); line-height: 1.45; opacity: .9; }
:where(body[data-page=faq]) .fq-help-btns { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); }
:where(body[data-page=faq]) .fq-help .btn { height: calc(21 * var(--u)); min-height: 34px; padding: 0 calc(10 * var(--u)); font-size: max(13px, calc(7.6 * var(--f))); gap: calc(5 * var(--u)); border-radius: 99px; }
:where(body[data-page=faq]) .fq-help-call { background: #fff; color: #0b3e8f; }
:where(body[data-page=faq]) .fq-help-wa { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.45); }
:where(body[data-page=faq]) .fq-help-wa:hover { background: #12a150; border-color: #12a150; }

/* list */
:where(body[data-page=faq]) .fq-content { min-width: 0; scroll-margin-top: calc(56 * var(--u)); }
:where(body[data-page=faq]) .fq-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: calc(8 * var(--u)); }
:where(body[data-page=faq]) .fq-status { font-size: max(13px, calc(8.2 * var(--f))); color: #56627a; }
:where(body[data-page=faq]) .fq-status b { color: var(--navy-2); }

:where(body[data-page=faq]) .fq-group { --acc: var(--c); }
:where(body[data-page=faq]) .fq-group + .fq-group { margin-top: calc(16 * var(--u)); }
:where(body[data-page=faq]) .fq-group.fq-in { animation: fadeUp .55s var(--ease) both; }
:where(body[data-page=faq]) .fq-group-head { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-bottom: calc(8 * var(--u)); }
:where(body[data-page=faq]) .fq-group-ico {
  width: calc(26 * var(--u)); height: calc(26 * var(--u)); min-width: 36px; min-height: 36px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: calc(10.5 * var(--f)); background: var(--c);
  box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) color-mix(in srgb, var(--c) 30%, transparent);
}
:where(body[data-page=faq]) .fq-group-head h2 { font-size: calc(13 * var(--f)); font-weight: 800; color: var(--navy-2); letter-spacing: -.01em; line-height: 1.25; }
:where(body[data-page=faq]) .fq-group-head h2::after {                            /* underline that fills on reveal */
  content: ""; display: block; width: calc(26 * var(--u)); height: 3px; margin-top: calc(3 * var(--u)); border-radius: 3px; background: var(--c);
}

/* item */
:where(body[data-page=faq]) .fq-item {
  position: relative; background: #fff; border: 1px solid #e7edf5; border-radius: calc(7 * var(--u));
  transition: border-color .35s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
:where(body[data-page=faq]) .fq-item + .fq-item { margin-top: calc(6 * var(--u)); }
:where(body[data-page=faq]) .fq-item::before {                                    /* accent bar on the open item */
  content: ""; position: absolute; left: -1px; top: calc(10 * var(--u)); bottom: calc(10 * var(--u)); width: 3px; border-radius: 0 3px 3px 0;
  background: var(--c); transform: scaleY(0); transition: transform .45s var(--ease);
}
:where(body[data-page=faq]) .fq-item:hover { border-color: color-mix(in srgb, var(--c) 30%, #e7edf5); box-shadow: var(--shadow-sm); }
:where(body[data-page=faq]) .fq-item[open]:not(.closing) { border-color: color-mix(in srgb, var(--c) 35%, #fff); box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(16,42,92,.08); }
:where(body[data-page=faq]) .fq-item[open]:not(.closing)::before { transform: none; }

:where(body[data-page=faq]) .fq-q { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: inherit; }
:where(body[data-page=faq]) .fq-q:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
:where(body[data-page=faq]) .fq-num {
  flex-shrink: 0; min-width: calc(22 * var(--u)); padding: calc(2.5 * var(--u)) calc(4 * var(--u)); border-radius: calc(5 * var(--u)); text-align: center;
  background: var(--c-bg); color: var(--c); font-size: max(12px, calc(7.4 * var(--f))); font-weight: 800; font-variant-numeric: tabular-nums;
  transition: background-color .35s, color .35s;
}
:where(body[data-page=faq]) .fq-item[open]:not(.closing) .fq-num { background: var(--c); color: #fff; }
:where(body[data-page=faq]) .fq-qt { flex: 1; min-width: 0; font-size: calc(9.6 * var(--f)); font-weight: 700; color: #0b1f4f; line-height: 1.4; transition: color .3s; }
:where(body[data-page=faq]) .fq-q:hover .fq-qt, :where(body[data-page=faq]) .fq-item[open]:not(.closing) .fq-qt { color: var(--c); }
:where(body[data-page=faq]) .fq-qt mark, :where(body[data-page=faq]) .fq-a-body mark { background: #fff1b8; color: inherit; border-radius: 3px; padding: 0 2px; }

/* answer */
:where(body[data-page=faq]) .fq-a-body { padding: 0 calc(14 * var(--u)) 0 calc(44 * var(--u)); font-size: calc(8.8 * var(--f)); line-height: 1.7; color: #3c4a66; }
:where(body[data-page=faq]) .fq-item[open]:not(.closing) .fq-a-body > * { animation: fadeUp .5s var(--ease) both; }
:where(body[data-page=faq]) .fq-item[open]:not(.closing) .fq-a-body > :nth-child(2) { animation-delay: .05s; }
:where(body[data-page=faq]) .fq-item[open]:not(.closing) .fq-a-body > :nth-child(3) { animation-delay: .1s; }
:where(body[data-page=faq]) .fq-item[open]:not(.closing) .fq-a-body > :nth-child(n+4) { animation-delay: .15s; }
:where(body[data-page=faq]) .fq-a-body p + p, :where(body[data-page=faq]) .fq-a-body p + ul, :where(body[data-page=faq]) .fq-a-body ul + p { margin-top: calc(5 * var(--u)); }
:where(body[data-page=faq]) .fq-a-body ul { display: grid; gap: calc(3 * var(--u)); }
:where(body[data-page=faq]) .fq-a-body li { position: relative; padding-left: calc(14 * var(--u)); }
:where(body[data-page=faq]) .fq-a-body li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: calc(6 * var(--u)); height: calc(6 * var(--u)); min-width: 7px; min-height: 7px;
  border-radius: 50%; background: var(--c-bg); box-shadow: inset 0 0 0 2px var(--c);
}
:where(body[data-page=faq]) .fq-a-body a { color: var(--c); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c) 35%, transparent); text-underline-offset: 3px; transition: text-decoration-color .3s; }
:where(body[data-page=faq]) .fq-a-body a:hover { text-decoration-color: currentColor; }
:where(body[data-page=faq]) .fq-a-body b { color: #0b1f4f; }

/* "Was this helpful?" — the last child, so its padding gives the open answer its bottom space */
:where(body[data-page=faq]) .fq-vote {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--u));
  margin-top: calc(9 * var(--u)); padding: calc(8 * var(--u)) 0 calc(12 * var(--u)); border-top: 1px dashed #e1e8f1;
  font-size: max(12.5px, calc(7.6 * var(--f))); color: #6b7488;
}
:where(body[data-page=faq]) .fq-vote span { margin-right: calc(2 * var(--u)); }
:where(body[data-page=faq]) .fq-vote button {
  display: inline-flex; align-items: center; gap: 5px; padding: calc(2.5 * var(--u)) calc(9 * var(--u)); border-radius: 99px;
  border: 1px solid #dbe3ee; font-size: inherit; font-weight: 600; color: #3c4a66;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
:where(body[data-page=faq]) .fq-vote button:hover { border-color: var(--c); color: var(--c); transform: translateY(-1px); }
:where(body[data-page=faq]) .fq-vote-thanks { color: #0b8a63; font-weight: 600; animation: fadeUp .45s var(--ease) both; }
:where(body[data-page=faq]) .fq-vote-thanks i { margin-right: 4px; }

/* empty state */
:where(body[data-page=faq]) .fq-empty {
  text-align: center; padding: calc(26 * var(--u)) calc(16 * var(--u)); border-radius: calc(8 * var(--u));
  background: linear-gradient(135deg, #f3f8fe, #f7fbfc); border: 1px dashed #d5e1ef; animation: fadeUp .5s var(--ease) both;
}
:where(body[data-page=faq]) .fq-empty[hidden] { display: none; }
:where(body[data-page=faq]) .fq-empty-ico {
  width: calc(40 * var(--u)); height: calc(40 * var(--u)); min-width: 56px; min-height: 56px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: #e5effb; color: var(--blue); font-size: calc(15 * var(--f)); animation: floatY 3s ease-in-out infinite;
}
:where(body[data-page=faq]) .fq-empty h3 { margin-top: calc(9 * var(--u)); font-size: calc(12 * var(--f)); font-weight: 800; color: var(--navy-2); }
:where(body[data-page=faq]) .fq-empty p { margin-top: calc(3 * var(--u)); font-size: calc(8.8 * var(--f)); color: #56627a; }
:where(body[data-page=faq]) .fq-empty-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
:where(body[data-page=faq]) .fq-empty .btn { min-height: 40px; }

/* ==========================================================
   STILL NEED HELP
   ========================================================== */
:where(body[data-page=faq]) .fq-cta {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: calc(20 * var(--u));
  padding: calc(24 * var(--u)) calc(26 * var(--u)); border-radius: calc(10 * var(--u)); color: #fff;
  background: linear-gradient(118deg, #062e6f 0%, #0b4fa8 55%, #0a8f9c 100%);
  box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(6,46,111,.22);
}
:where(body[data-page=faq]) .fq-cta::before {                                     /* dot grid */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; pointer-events: none;
  background: radial-gradient(#fff 1px, transparent 1.4px) 0 0 / calc(10 * var(--u)) calc(10 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); mask-image: linear-gradient(90deg, #000, transparent 60%);
}
:where(body[data-page=faq]) .fq-cta-mark { position: absolute; z-index: -1; font-weight: 800; line-height: 1; color: rgba(255,255,255,.07); pointer-events: none; }
:where(body[data-page=faq]) .fq-cta-mark--1 { right: calc(-6 * var(--u)); top: calc(-34 * var(--u)); font-size: calc(170 * var(--f)); transform: rotate(14deg); }
:where(body[data-page=faq]) .fq-cta-mark--2 { left: 40%; bottom: calc(-40 * var(--u)); font-size: calc(110 * var(--f)); transform: rotate(-12deg); }
:where(body[data-page=faq]) .fq-cta .eyebrow { color: #8fe3ea; font-size: max(12px, calc(6.8 * var(--f))); }
:where(body[data-page=faq]) .fq-cta h2 { margin-top: calc(5 * var(--u)); font-size: calc(17 * var(--f)); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
:where(body[data-page=faq]) .fq-cta p { margin-top: calc(5 * var(--u)); font-size: calc(8.8 * var(--f)); line-height: 1.5; color: rgba(255,255,255,.85); }
:where(body[data-page=faq]) .fq-ch { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)); }
:where(body[data-page=faq]) .fq-ch-card {
  height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(2 * var(--u));
  padding: calc(13 * var(--u)) calc(8 * var(--u)); border-radius: calc(8 * var(--u));
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .45s var(--ease), background-color .35s, box-shadow .45s var(--ease);
}
:where(body[data-page=faq]) .fq-ch-card:hover { transform: translateY(-5px); background: rgba(255,255,255,.18); box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(0,0,0,.18); }
:where(body[data-page=faq]) .fq-ch-ico {
  width: calc(30 * var(--u)); height: calc(30 * var(--u)); min-width: 44px; min-height: 44px; margin-bottom: calc(5 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--ch); font-size: calc(12.5 * var(--f));
  transition: transform .5s var(--ease);
}
:where(body[data-page=faq]) .fq-ch-card:hover .fq-ch-ico { transform: rotateY(180deg); }
:where(body[data-page=faq]) .fq-ch-call { --ch: #0b5fd0; }
:where(body[data-page=faq]) .fq-ch-wa   { --ch: #12a150; }
:where(body[data-page=faq]) .fq-ch-mail { --ch: #e8437a; }
:where(body[data-page=faq]) .fq-ch-wa .fq-ch-ico { font-size: calc(15 * var(--f)); }
:where(body[data-page=faq]) .fq-ch-card b { font-size: calc(9.6 * var(--f)); font-weight: 700; }
:where(body[data-page=faq]) .fq-ch-card small { font-size: max(12px, calc(7.4 * var(--f))); color: rgba(255,255,255,.82); overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  :where(body[data-page=faq]) .fq-art *, :where(body[data-page=faq]) .fq-art, :where(body[data-page=faq]) .fq-hero-title .l2, :where(body[data-page=faq]) .fq-help-ico, :where(body[data-page=faq]) .fq-empty-ico { animation: none !important; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1099px) {
  :where(body[data-page=faq]) .fq-hero-inner { padding-left: var(--gutter); }
  :where(body[data-page=faq]) .fq-art { right: var(--gutter); opacity: .9; }
  :where(body[data-page=faq]) .fq-hero-inner > * { max-width: calc(300 * var(--u)); }
}

@media (max-width: 939px) {
  :where(body[data-page=faq]) .fq-art { display: none; }
  :where(body[data-page=faq]) .fq-hero-inner > * { max-width: 600px; }
  :where(body[data-page=faq]) .fq-main { grid-template-columns: minmax(0, 1fr); gap: 20px; }   /* minmax: the scrolling chip row mustn't widen the column */
  :where(body[data-page=faq]) .fq-side { position: static; min-width: 0; grid-template-columns: minmax(0, 1fr); }   /* an auto column would grow to the chip row's full width */
  :where(body[data-page=faq]) .fq-help { display: none; }                         /* the CTA band below covers it */
  :where(body[data-page=faq]) .fq-cats { padding: 0; background: none; border: 0; box-shadow: none; }
  :where(body[data-page=faq]) .fq-side-title { display: none; }
  :where(body[data-page=faq]) .fq-cats [data-collapse-body] { grid-template-rows: 1fr; grid-template-columns: minmax(0, 1fr); opacity: 1; visibility: visible; }   /* chip row: always open */
  :where(body[data-page=faq]) .fq-cats [data-collapse-body] > * { overflow: visible; padding: 0; margin: 0; min-width: 0; }
  :where(body[data-page=faq]) .fq-cats .nav-more { display: none; }
  :where(body[data-page=faq]) .fq-cats li.nav-extra { display: block !important; }
  :where(body[data-page=faq]) .fq-cats ul {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px;
  }
  :where(body[data-page=faq]) .fq-cats ul::-webkit-scrollbar { display: none; }
  :where(body[data-page=faq]) .fq-cats li { flex-shrink: 0; scroll-snap-align: start; }
  :where(body[data-page=faq]) .fq-cat { width: auto; padding: 6px 12px 6px 6px; border: 1px solid #e3eaf3; border-radius: 99px; background: #fff; }
  :where(body[data-page=faq]) .fq-cat::before { display: none; }
  :where(body[data-page=faq]) .fq-cat.active { border-color: var(--c); }
  :where(body[data-page=faq]) .fq-cat-ico { border-radius: 50%; }
  :where(body[data-page=faq]) .fq-cat-name { white-space: nowrap; }
  :where(body[data-page=faq]) .fq-cta { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :where(body[data-page=faq]) .fq-hero { min-height: 0; }
  :where(body[data-page=faq]) .fq-hero-inner { padding-block: 34px; }
  :where(body[data-page=faq]) .fq-hero .eyebrow { font-size: 11px; }
  :where(body[data-page=faq]) .fq-hero-title { font-size: 36px; }
  :where(body[data-page=faq]) .fq-hero-text { font-size: 15px; }
  :where(body[data-page=faq]) .fq-search { padding-left: 16px; }
  :where(body[data-page=faq]) .fq-search > i { font-size: 16px; }
  :where(body[data-page=faq]) .fq-go { padding: 0 16px; }
  :where(body[data-page=faq]) .fq-tags span { width: 100%; }

  :where(body[data-page=faq]) .fq-cat-ico { font-size: 14px; }
  :where(body[data-page=faq]) .fq-status { font-size: 13.5px; }
  :where(body[data-page=faq]) .fq-group + .fq-group { margin-top: 28px; }
  :where(body[data-page=faq]) .fq-group-head { gap: 12px; margin-bottom: 12px; }
  :where(body[data-page=faq]) .fq-group-ico { font-size: 15px; }
  :where(body[data-page=faq]) .fq-group-head h2 { font-size: 20px; }
  :where(body[data-page=faq]) .fq-item + .fq-item { margin-top: 10px; }
  :where(body[data-page=faq]) .fq-item { border-radius: 12px; }
  :where(body[data-page=faq]) .fq-q { gap: 12px; padding: 14px; }
  :where(body[data-page=faq]) .fq-num { min-width: 30px; padding: 3px 6px; border-radius: 7px; }
  :where(body[data-page=faq]) .fq-qt { font-size: 15.5px; }
  :where(body[data-page=faq]) .fq-a-body { padding: 0 16px 0 56px; font-size: 14.5px; }
  :where(body[data-page=faq]) .fq-a-body li { padding-left: 18px; }
  :where(body[data-page=faq]) .fq-vote { padding-bottom: 16px; }

  :where(body[data-page=faq]) .fq-empty { padding: 32px 18px; }
  :where(body[data-page=faq]) .fq-empty h3 { font-size: 19px; }
  :where(body[data-page=faq]) .fq-empty p { font-size: 14px; }

  :where(body[data-page=faq]) .fq-cta { padding: 28px 18px; border-radius: 16px; gap: 22px; }
  :where(body[data-page=faq]) .fq-cta .eyebrow { font-size: 11px; }
  :where(body[data-page=faq]) .fq-cta h2 { font-size: 24px; }
  :where(body[data-page=faq]) .fq-cta p { font-size: 14.5px; }
  :where(body[data-page=faq]) .fq-ch { grid-template-columns: 1fr; gap: 10px; }
  :where(body[data-page=faq]) .fq-ch-card { display: grid; grid-template-columns: auto 1fr; align-items: center; text-align: left; gap: 0 14px; padding: 14px; border-radius: 12px; }
  :where(body[data-page=faq]) .fq-ch-ico { grid-row: span 2; margin-bottom: 0; }
  :where(body[data-page=faq]) .fq-ch-card b { align-self: end; font-size: 16px; }
  :where(body[data-page=faq]) .fq-ch-card small { align-self: start; font-size: 13.5px; }
}
@media (max-width: 420px) {
  :where(body[data-page=faq]) .fq-a-body { padding-left: 16px; }
  :where(body[data-page=faq]) .fq-go { display: none; }
}

/* ##########################################################
   PAGE: gallery  ·  scope body[data-page="gallery"]
   ########################################################## */
/* ==========================================================
   MMatrics Pharmaceuticals – Video gallery (gallery.html)
   Follows the base section and uses the same design unit (--u)
   and tokens. Stage, library cards, shorts and the lightbox
   are rendered by gallery.js from its video data.
   ========================================================== */

@keyframes vgUp { from { opacity: 0; transform: translateY(18px); } }
@keyframes vgPulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
@keyframes vgBar { from { width: 0; } to { width: 100%; } }
@keyframes vgBlink { 50% { opacity: .35; } }

:where(body[data-page=gallery]) :where(.vg-page, .vg-modal) button { padding: 0; text-align: inherit; }   /* zero specificity – component rules set their own */

/* topic colours – cards pick theirs up through --c */
:where(body[data-page=gallery]) .vg-card--products { --c: #0b5bc0; --c-bg: #e8f1fd; }
:where(body[data-page=gallery]) .vg-card--health   { --c: #e8437a; --c-bg: #fde9f0; }
:where(body[data-page=gallery]) .vg-card--inside   { --c: #0a96a3; --c-bg: #e2f5f6; }
:where(body[data-page=gallery]) .vg-card--stories  { --c: #f06a22; --c-bg: #fff0e6; }

/* shared section head */
:where(body[data-page=gallery]) .vg-head { text-align: center; max-width: calc(440 * var(--u)); margin-inline: auto; }
:where(body[data-page=gallery]) .vg-head .sec-title { margin-top: calc(3 * var(--u)); }
:where(body[data-page=gallery]) .vg-head p { margin-top: calc(5 * var(--u)); font-size: calc(8.8 * var(--f)); line-height: 1.55; color: var(--muted); }

/* shared bits: duration badge, chips, meta row, buttons */
:where(body[data-page=gallery]) .vg-dur {
  position: absolute; right: calc(5 * var(--u)); bottom: calc(5 * var(--u)); z-index: 2;
  padding: calc(1.5 * var(--u)) calc(4.5 * var(--u)); border-radius: calc(3 * var(--u));
  background: rgba(4, 16, 40, .8); color: #fff; font-size: max(11px, calc(6.2 * var(--f))); font-weight: 700; letter-spacing: .02em; line-height: 1.4;
  backdrop-filter: blur(4px);
}
:where(body[data-page=gallery]) .vg-dur--lg { right: calc(10 * var(--u)); bottom: calc(10 * var(--u)); font-size: max(12px, calc(7 * var(--f))); }
:where(body[data-page=gallery]) .vg-tag {
  display: inline-flex; align-items: center; gap: calc(3.5 * var(--u)); padding: calc(2.5 * var(--u)) calc(8 * var(--u)); border-radius: 99px;
  background: rgba(255,255,255,.94); color: var(--navy); font-size: max(11.5px, calc(6.6 * var(--f))); font-weight: 700; line-height: 1.4;
  box-shadow: 0 4px 12px rgba(4,16,40,.18);
}
:where(body[data-page=gallery]) .vg-tag i { color: var(--teal); }
:where(body[data-page=gallery]) .vg-tag--hot { background: linear-gradient(90deg, #f24d82, #f58a5c); color: #fff; }
:where(body[data-page=gallery]) .vg-tag--hot i { color: #fff; }
:where(body[data-page=gallery]) .vg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--u)) calc(11 * var(--u)); font-size: max(12px, calc(6.9 * var(--f))); font-weight: 600; color: var(--muted); }
:where(body[data-page=gallery]) .vg-meta span { display: inline-flex; align-items: center; gap: calc(3.5 * var(--u)); }
:where(body[data-page=gallery]) .vg-meta i { color: var(--teal); }
:where(body[data-page=gallery]) .vg-btn-white { background: #fff; color: var(--navy-btn); }
:where(body[data-page=gallery]) .vg-btn-yt { background: #ff0033; color: #fff; }
:where(body[data-page=gallery]) .vg-btn-yt:hover { background: #e0002d; }
:where(body[data-page=gallery]) .vg-btn-wa { background: #25d366; color: #fff; }
:where(body[data-page=gallery]) .vg-btn-wa:hover { background: #1fb959; }
:where(body[data-page=gallery]) .vg-btn-yt i, :where(body[data-page=gallery]) .vg-btn-wa i { font-size: 1.2em; }

/* round "play" disc used on cards and shorts */
:where(body[data-page=gallery]) .vg-play {
  position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%;
  width: calc(30 * var(--u)); min-width: 44px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.7); color: #fff; font-size: max(14px, calc(9 * var(--f)));
  backdrop-filter: blur(6px); scale: .86;
  transition: scale .45s var(--ease), background-color .35s, border-color .35s, box-shadow .45s var(--ease);
}
:where(body[data-page=gallery]) .vg-play i { margin-left: .14em; }   /* optical centre of the triangle */

/* ==========================================================
   HERO
   ========================================================== */
:where(body[data-page=gallery]) .vg-hero {
  position: relative; overflow: hidden; isolation: isolate; min-height: calc(214 * var(--u)); display: flex; align-items: center; color: #fff;
  background:
    radial-gradient(circle at 78% 42%, rgba(10,150,163,.38) 0, rgba(10,150,163,0) calc(150 * var(--u))),
    radial-gradient(circle at 6% 100%, rgba(242,77,130,.26) 0, rgba(242,77,130,0) calc(130 * var(--u))),
    linear-gradient(120deg, #041a45 0%, #0a2a66 55%, #064783 100%);
}
:where(body[data-page=gallery]) .vg-hero::before {                                    /* faint grid, fading towards the edges */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px) 0 0 / calc(24 * var(--u)) calc(24 * var(--u)),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px) 0 0 / calc(24 * var(--u)) calc(24 * var(--u));
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 70%);
}
:where(body[data-page=gallery]) .vg-hero::after {                                     /* film-strip perforations along the bottom */
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(6 * var(--u)); height: calc(4 * var(--u)); z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 calc(8 * var(--u)), transparent calc(8 * var(--u)) calc(16 * var(--u)));
  border-radius: 2px;
}
:where(body[data-page=gallery]) .vg-hero-inner { padding-block: calc(26 * var(--u)); padding-left: calc(51 * var(--u)); }
:where(body[data-page=gallery]) .vg-hero-inner > * { animation: vgUp .8s var(--ease) both; max-width: calc(320 * var(--u)); }
:where(body[data-page=gallery]) .vg-hero-inner > :nth-child(2) { animation-delay: .08s; }
:where(body[data-page=gallery]) .vg-hero-inner > :nth-child(3) { animation-delay: .16s; }
:where(body[data-page=gallery]) .vg-hero-inner > :nth-child(4) { animation-delay: .24s; }
:where(body[data-page=gallery]) .vg-hero-inner > :nth-child(5) { animation-delay: .32s; }
:where(body[data-page=gallery]) .vg-hero .eyebrow { color: #5fe0e6; font-size: max(12px, calc(6.8 * var(--f))); letter-spacing: .36em; }
:where(body[data-page=gallery]) .vg-hero-title { margin-top: calc(5 * var(--u)); font-weight: 800; font-size: calc(30 * var(--f)); line-height: 1.08; letter-spacing: -.035em; }
:where(body[data-page=gallery]) .vg-hero-title span { display: block; width: max-content; max-width: 100%; }
:where(body[data-page=gallery]) .vg-hero-title .l2 {
  background: linear-gradient(90deg, #5fe0e6, #9ec2ff 35%, #f58bb0 70%, #5fe0e6); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 6s ease-in-out infinite;
}
:where(body[data-page=gallery]) .vg-hero-text { margin-top: calc(7 * var(--u)); font-size: calc(9.6 * var(--f)); line-height: 1.55; color: rgba(255,255,255,.82); font-weight: 500; }

:where(body[data-page=gallery]) .vg-hero-stats { display: flex; margin-top: calc(12 * var(--u)); }
:where(body[data-page=gallery]) .vg-hero-stats li { padding-inline: calc(13 * var(--u)); }
:where(body[data-page=gallery]) .vg-hero-stats li:first-child { padding-left: 0; }
:where(body[data-page=gallery]) .vg-hero-stats li + li { border-left: 1px solid rgba(255,255,255,.18); }
:where(body[data-page=gallery]) .vg-hero-stats b { display: block; font-size: calc(17 * var(--f)); font-weight: 800; line-height: 1.1; }
:where(body[data-page=gallery]) .vg-hero-stats small { font-size: max(11.5px, calc(6.8 * var(--f))); color: rgba(255,255,255,.66); font-weight: 600; }
:where(body[data-page=gallery]) .vg-hero-btns { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(13 * var(--u)); }

/* illustration: three stacked screens */
:where(body[data-page=gallery]) .vg-art { position: absolute; right: calc(48 * var(--u)); top: 50%; translate: 0 -50%; width: calc(270 * var(--u)); height: calc(180 * var(--u)); pointer-events: none; animation: vgUp 1s var(--ease) .2s both; }
:where(body[data-page=gallery]) .vg-screen {
  position: absolute; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(9 * var(--u));
  border: 2px solid rgba(255,255,255,.85); background: #0a2a66;
  box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(0,6,24,.5);
}
:where(body[data-page=gallery]) .vg-screen img { width: 100%; height: 100%; object-fit: cover; }
:where(body[data-page=gallery]) .vg-screen--3 { right: 0; top: 0; width: calc(150 * var(--u)); rotate: 7deg; opacity: .5; animation: floatY 5s ease-in-out -1s infinite; }
:where(body[data-page=gallery]) .vg-screen--2 { left: 0; top: calc(16 * var(--u)); width: calc(150 * var(--u)); rotate: -8deg; opacity: .65; animation: floatY 4.6s ease-in-out -2.4s infinite; }
:where(body[data-page=gallery]) .vg-screen--2 img { object-position: 50% 40%; }
:where(body[data-page=gallery]) .vg-screen--1 { left: calc(40 * var(--u)); top: calc(46 * var(--u)); width: calc(196 * var(--u)); border-width: 3px; animation: floatY 4s ease-in-out infinite; }
:where(body[data-page=gallery]) .vg-screen--1 img { object-position: 80% center; }
:where(body[data-page=gallery]) .vg-screen--1::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,16,40,0) 50%, rgba(4,16,40,.55)); }
:where(body[data-page=gallery]) .vg-screen-play {
  position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%;
  width: calc(36 * var(--u)); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #ff0033; font-size: calc(13 * var(--f)); box-shadow: 0 8px 24px rgba(0,6,24,.35);
}
:where(body[data-page=gallery]) .vg-screen-play i { margin-left: .14em; }
:where(body[data-page=gallery]) .vg-screen-play::before, :where(body[data-page=gallery]) .vg-screen-play::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.75);
  animation: vgPulse 2.4s ease-out infinite;
}
:where(body[data-page=gallery]) .vg-screen-play::after { animation-delay: 1.2s; }
:where(body[data-page=gallery]) .vg-screen-bar { position: absolute; left: calc(9 * var(--u)); right: calc(9 * var(--u)); bottom: calc(8 * var(--u)); z-index: 2; height: 3px; border-radius: 99px; background: rgba(255,255,255,.3); }
:where(body[data-page=gallery]) .vg-screen-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: #ff0033; animation: vgBar 7s linear infinite; }
:where(body[data-page=gallery]) .vg-screen-bar i::after { content: ""; position: absolute; right: -5px; top: 50%; translate: 0 -50%; width: 10px; height: 10px; border-radius: 50%; background: #ff0033; box-shadow: 0 0 0 3px rgba(255,0,51,.25); }
:where(body[data-page=gallery]) .vg-chip {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: calc(4.5 * var(--u)); white-space: nowrap;
  padding: calc(5 * var(--u)) calc(10 * var(--u)); border-radius: 99px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(10px);
  font-size: max(11px, calc(6.8 * var(--f))); font-weight: 700; color: #fff;
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0,6,24,.25);
  animation: floatY 4s ease-in-out infinite;
}
:where(body[data-page=gallery]) .vg-chip--1 { left: calc(-34 * var(--u)); top: calc(150 * var(--u)); animation-delay: -1.5s; }
:where(body[data-page=gallery]) .vg-chip--1 i { color: #5fe0e6; }
:where(body[data-page=gallery]) .vg-chip--2 { right: calc(-6 * var(--u)); top: calc(-12 * var(--u)); animation-delay: -3s; }
:where(body[data-page=gallery]) .vg-chip--3 { right: calc(-14 * var(--u)); bottom: calc(6 * var(--u)); background: #fff; color: var(--navy); border-color: #fff; }
:where(body[data-page=gallery]) .vg-chip--3 i { color: #ff0033; font-size: 1.25em; }
:where(body[data-page=gallery]) .vg-live { width: 8px; height: 8px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 0 3px rgba(255,59,92,.3); animation: vgBlink 1.4s ease-in-out infinite; }

/* ==========================================================
   FEATURED STAGE + UP NEXT
   ========================================================== */
:where(body[data-page=gallery]) .vg-feature-grid { display: grid; grid-template-columns: 1fr calc(222 * var(--u)); gap: calc(12 * var(--u)); margin-top: calc(14 * var(--u)); padding-inline: calc(9 * var(--u)); }
:where(body[data-page=gallery]) .vg-stage {
  position: relative; overflow: hidden; border-radius: calc(14 * var(--u));
  background: linear-gradient(160deg, #0a2a66, #041a45); color: #fff; box-shadow: var(--shadow-md);
}
:where(body[data-page=gallery]) .vg-stage-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #020b1f; }
:where(body[data-page=gallery]) .vg-stage-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
:where(body[data-page=gallery]) .vg-stage-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4,16,40,.25) 0%, rgba(4,16,40,0) 30%, rgba(4,16,40,0) 60%, rgba(4,16,40,.55) 100%); }
:where(body[data-page=gallery]) .vg-stage.playing .vg-stage-media::after { display: none; }
:where(body[data-page=gallery]) .vg-stage:hover .vg-stage-media > img { transform: scale(1.04); }
:where(body[data-page=gallery]) .vg-stage-media iframe, :where(body[data-page=gallery]) .vg-stage-media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
:where(body[data-page=gallery]) .vg-stage-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
:where(body[data-page=gallery]) .vg-stage-play span {
  position: relative; width: calc(48 * var(--u)); min-width: 64px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #ff0033; font-size: max(22px, calc(16 * var(--f)));
  box-shadow: 0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(0,6,24,.4); transition: scale .45s var(--ease), background-color .3s, color .3s;
}
:where(body[data-page=gallery]) .vg-stage-play span i { margin-left: .14em; }
:where(body[data-page=gallery]) .vg-stage-play span::before, :where(body[data-page=gallery]) .vg-stage-play span::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.8);
  animation: vgPulse 2.4s ease-out infinite;
}
:where(body[data-page=gallery]) .vg-stage-play span::after { animation-delay: 1.2s; }
:where(body[data-page=gallery]) .vg-stage-play:hover span, :where(body[data-page=gallery]) .vg-stage-play:focus-visible span { scale: 1.1; background: #ff0033; color: #fff; }
:where(body[data-page=gallery]) .vg-stage-tags { position: absolute; left: calc(10 * var(--u)); top: calc(10 * var(--u)); z-index: 3; display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); }
:where(body[data-page=gallery]) .vg-stage-info { padding: calc(13 * var(--u)) calc(16 * var(--u)) calc(15 * var(--u)); animation: vgUp .6s var(--ease) both; }
:where(body[data-page=gallery]) .vg-stage-info h3 { font-size: calc(13.5 * var(--f)); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
:where(body[data-page=gallery]) .vg-stage-info p { margin-top: calc(4 * var(--u)); max-width: calc(380 * var(--u)); font-size: calc(8.4 * var(--f)); line-height: 1.55; color: rgba(255,255,255,.74); }
:where(body[data-page=gallery]) .vg-stage-info .vg-meta { margin-top: calc(8 * var(--u)); color: rgba(255,255,255,.66); }
:where(body[data-page=gallery]) .vg-stage-info .vg-meta i { color: #5fe0e6; }

/* up next: never taller than the stage – its list scrolls instead */
:where(body[data-page=gallery]) .vg-next {
  display: flex; flex-direction: column; height: 0; min-height: 100%;
  padding: calc(11 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); border-radius: calc(14 * var(--u));
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
:where(body[data-page=gallery]) .vg-next-head { display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--u)); padding: 0 calc(4 * var(--u)) calc(8 * var(--u)); border-bottom: 1px dashed #dfe6f0; }
:where(body[data-page=gallery]) .vg-next-head h3 { display: flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(10 * var(--f)); font-weight: 800; color: var(--navy); }
:where(body[data-page=gallery]) .vg-next-head h3 i { color: var(--teal); }
:where(body[data-page=gallery]) .vg-next-auto { display: inline-flex; align-items: center; gap: calc(3 * var(--u)); padding: calc(2 * var(--u)) calc(7 * var(--u)); border-radius: 99px; background: #e2f5f6; color: #067d88; font-size: max(11px, calc(6.2 * var(--f))); font-weight: 700; }
:where(body[data-page=gallery]) .vg-next-list { flex: 1; min-height: 0; overflow-y: auto; margin: calc(6 * var(--u)) 0 0; padding: 0 2px 0 0; list-style: none; }
:where(body[data-page=gallery]) .vg-next-list li { animation: vgUp .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
:where(body[data-page=gallery]) .vg-next-item {
  display: grid; grid-template-columns: calc(78 * var(--u)) 1fr; gap: calc(7 * var(--u)); align-items: center; width: 100%;
  padding: calc(4 * var(--u)); border-radius: calc(8 * var(--u)); text-align: left; transition: background-color .3s;
}
:where(body[data-page=gallery]) .vg-next-item:hover, :where(body[data-page=gallery]) .vg-next-item:focus-visible { background: #f2f7fd; }
:where(body[data-page=gallery]) .vg-next-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(6 * var(--u)); background: #e9eef6; }
:where(body[data-page=gallery]) .vg-next-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
:where(body[data-page=gallery]) .vg-next-thumb .vg-dur { right: 3px; bottom: 3px; font-size: 10.5px; padding: 0 4px; }
:where(body[data-page=gallery]) .vg-next-play {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(4,16,40,.45); color: #fff; font-size: max(13px, calc(8 * var(--f)));
  opacity: 0; transition: opacity .3s;
}
:where(body[data-page=gallery]) .vg-next-item:hover .vg-next-play, :where(body[data-page=gallery]) .vg-next-item:focus-visible .vg-next-play { opacity: 1; }
:where(body[data-page=gallery]) .vg-next-item:hover .vg-next-thumb img { transform: scale(1.08); }
:where(body[data-page=gallery]) .vg-next-text b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: max(13px, calc(7.6 * var(--f))); font-weight: 700; line-height: 1.35; color: var(--navy);
}
:where(body[data-page=gallery]) .vg-next-text small { display: block; margin-top: calc(2 * var(--u)); font-size: max(11.5px, calc(6.4 * var(--f))); color: var(--muted); font-weight: 600; }

/* ==========================================================
   LIBRARY
   ========================================================== */
:where(body[data-page=gallery]) .vg-lib { padding-block: var(--sec-gap); background: linear-gradient(180deg, #f3f7fd 0%, #f7fafe 70%, #fff 100%); }

:where(body[data-page=gallery]) .vg-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); margin-top: calc(14 * var(--u)); padding-inline: calc(9 * var(--u)); }
:where(body[data-page=gallery]) .vg-tabs {
  position: relative; display: flex; gap: calc(2 * var(--u)); max-width: 100%; overflow-x: auto; scrollbar-width: none;
  padding: calc(3 * var(--u)); border-radius: 99px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
:where(body[data-page=gallery]) .vg-tabs::-webkit-scrollbar { display: none; }
:where(body[data-page=gallery]) .vg-glider {
  position: absolute; left: 0; top: calc(3 * var(--u)); bottom: calc(3 * var(--u)); width: 0; border-radius: 99px;
  background: linear-gradient(90deg, #062e6f, #0b5bc0); box-shadow: 0 6px 16px rgba(11,91,192,.3);
  transition: transform .5s var(--ease), width .5s var(--ease);
}
:where(body[data-page=gallery]) .vg-tab {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: calc(4 * var(--u)); white-space: nowrap;
  padding: calc(5 * var(--u)) calc(11 * var(--u)); border-radius: 99px;
  font-size: max(13px, calc(7.6 * var(--f))); font-weight: 700; color: #3a4560; transition: color .35s;
}
:where(body[data-page=gallery]) .vg-tab:hover { color: var(--blue); }
:where(body[data-page=gallery]) .vg-tab.active { color: #fff; }
:where(body[data-page=gallery]) .vg-tab .n { min-width: 1.9em; padding: 0 .5em; border-radius: 99px; background: #eef2f7; color: var(--muted); font-size: .8em; line-height: 1.7; text-align: center; transition: background-color .35s, color .35s; }
:where(body[data-page=gallery]) .vg-tab.active .n { background: rgba(255,255,255,.2); color: #fff; }

:where(body[data-page=gallery]) .vg-controls { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
:where(body[data-page=gallery]) .vg-search, :where(body[data-page=gallery]) .vg-select {
  position: relative; display: flex; align-items: center; height: calc(24 * var(--u)); min-height: 42px;
  border-radius: 99px; background: #fff; border: 1px solid #dbe3ee; transition: border-color .3s, box-shadow .3s;
}
:where(body[data-page=gallery]) .vg-search:focus-within, :where(body[data-page=gallery]) .vg-select:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(11,91,192,.12); }
:where(body[data-page=gallery]) .vg-search > i { position: absolute; left: calc(9 * var(--u)); color: var(--muted); font-size: max(13px, calc(7.4 * var(--f))); pointer-events: none; }
:where(body[data-page=gallery]) .vg-search input { width: calc(150 * var(--u)); height: 100%; padding: 0 calc(12 * var(--u)) 0 calc(24 * var(--u)); border: 0; background: none; outline: none; font-size: max(14px, calc(7.6 * var(--f))); color: var(--text); }
:where(body[data-page=gallery]) .vg-search input::placeholder { color: #98a2b5; }
:where(body[data-page=gallery]) .vg-select::after {
  content: ""; position: absolute; right: calc(9 * var(--u)); width: 12px; height: 12px; pointer-events: none; background: currentColor; color: var(--muted);
  -webkit-mask: var(--ico-caret) center / contain no-repeat; mask: var(--ico-caret) center / contain no-repeat;
}
:where(body[data-page=gallery]) .vg-select select {
  height: 100%; padding: 0 calc(24 * var(--u)) 0 calc(11 * var(--u)); border: 0; background: none; outline: none; appearance: none; -webkit-appearance: none;
  font: inherit; font-size: max(13.5px, calc(7.6 * var(--f))); font-weight: 600; color: var(--text); cursor: pointer;
}

:where(body[data-page=gallery]) .vg-status { margin-top: calc(9 * var(--u)); text-align: center; font-size: max(12px, calc(7 * var(--f))); color: var(--muted); font-weight: 600; }
:where(body[data-page=gallery]) .vg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--u)); margin-top: calc(8 * var(--u)); padding-inline: calc(9 * var(--u)); }

:where(body[data-page=gallery]) .vg-card {
  --c: var(--blue); --c-bg: #e8f1fd;
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: calc(12 * var(--u));
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  animation: vgUp .6s var(--ease) both; animation-delay: calc(var(--i) * 70ms);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
:where(body[data-page=gallery]) .vg-card:hover { transform: translateY(-6px); box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(16,42,92,.16); border-color: transparent; }
:where(body[data-page=gallery]) .vg-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #e9eef6; }
:where(body[data-page=gallery]) .vg-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
:where(body[data-page=gallery]) .vg-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,16,40,0) 45%, rgba(4,16,40,.5)); transition: background-color .4s; }
:where(body[data-page=gallery]) .vg-card:hover .vg-thumb img { transform: scale(1.07); }
:where(body[data-page=gallery]) .vg-card:hover .vg-thumb::after { background-color: rgba(4,16,40,.18); }
:where(body[data-page=gallery]) .vg-card:hover .vg-play, :where(body[data-page=gallery]) .vg-thumb:focus-visible .vg-play { scale: 1; background: var(--c); border-color: var(--c); box-shadow: 0 0 0 8px rgba(255,255,255,.22); }
:where(body[data-page=gallery]) .vg-new {
  position: absolute; left: calc(6 * var(--u)); top: calc(6 * var(--u)); z-index: 2; padding: 1px calc(6 * var(--u)); border-radius: 99px;
  background: #ff0033; color: #fff; font-size: max(10.5px, calc(6 * var(--f))); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.7;
}
:where(body[data-page=gallery]) .vg-card-body { flex: 1; display: flex; flex-direction: column; padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u)); }
:where(body[data-page=gallery]) .vg-card-cat { align-self: flex-start; display: inline-flex; align-items: center; gap: calc(3 * var(--u)); padding: 1px calc(6 * var(--u)); border-radius: 99px; background: var(--c-bg); color: var(--c); font-size: max(11px, calc(6.3 * var(--f))); font-weight: 800; letter-spacing: .04em; line-height: 1.7; }
:where(body[data-page=gallery]) .vg-card h3 { margin-top: calc(5 * var(--u)); font-size: calc(9.8 * var(--f)); font-weight: 800; line-height: 1.35; color: var(--navy); }
:where(body[data-page=gallery]) .vg-card h3 button { text-align: left; font: inherit; color: inherit; transition: color .3s; }
:where(body[data-page=gallery]) .vg-card h3 button:hover { color: var(--c); }
:where(body[data-page=gallery]) .vg-card p {
  margin-top: calc(3 * var(--u)); font-size: max(13px, calc(7.5 * var(--f))); line-height: 1.55; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
:where(body[data-page=gallery]) .vg-card .vg-meta { margin-top: auto; padding-top: calc(8 * var(--u)); }
:where(body[data-page=gallery]) .vg-card .vg-meta::before { content: ""; flex-basis: 100%; height: 1px; margin-bottom: calc(3 * var(--u)); border-top: 1px dashed #dfe6f0; }
:where(body[data-page=gallery]) .vg-card .vg-meta i { color: var(--c); }
:where(body[data-page=gallery]) .vg-card mark { background: linear-gradient(transparent 55%, #ffe38a 55%); color: inherit; padding: 0 .05em; }

:where(body[data-page=gallery]) .vg-empty { max-width: 420px; margin: calc(14 * var(--u)) auto 0; text-align: center; animation: vgUp .5s var(--ease) both; }
:where(body[data-page=gallery]) .vg-empty-ico { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: #e8f1fd; color: var(--blue); font-size: 24px; }
:where(body[data-page=gallery]) .vg-empty h3 { font-size: calc(11 * var(--f)); color: var(--navy); }
:where(body[data-page=gallery]) .vg-empty p { margin: 4px 0 14px; color: var(--muted); }
:where(body[data-page=gallery]) .vg-more-wrap { margin-top: calc(16 * var(--u)); text-align: center; }

/* ==========================================================
   SHORTS
   ========================================================== */
:where(body[data-page=gallery]) .vg-shorts {
  position: relative; overflow: hidden; isolation: isolate; padding-block: var(--sec-gap); color: #fff;
  background:
    radial-gradient(circle at 92% 10%, rgba(242,77,130,.22) 0, rgba(242,77,130,0) calc(140 * var(--u))),
    radial-gradient(circle at 0% 100%, rgba(10,150,163,.3) 0, rgba(10,150,163,0) calc(150 * var(--u))),
    linear-gradient(135deg, #041a45, #0a2f6e);
}
:where(body[data-page=gallery]) main > .vg-lib + .vg-shorts { margin-top: 0; }   /* the library band already fades out to white */
:where(body[data-page=gallery]) .vg-shorts .eyebrow { color: #5fe0e6; }
:where(body[data-page=gallery]) .vg-shorts .sec-title { color: #fff; margin-top: calc(3 * var(--u)); }
:where(body[data-page=gallery]) .vg-shorts-head { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(12 * var(--u)); padding-inline: calc(9 * var(--u)); }
:where(body[data-page=gallery]) .vg-shorts-arrows { display: flex; gap: calc(6 * var(--u)); }
:where(body[data-page=gallery]) .vg-arrow {
  width: calc(26 * var(--u)); min-width: 42px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(255,255,255,.35); color: #fff; font-size: max(13px, calc(7.4 * var(--f)));
  transition: background-color .3s, color .3s, border-color .3s, opacity .3s, transform .35s var(--ease);
}
:where(body[data-page=gallery]) .vg-arrow:hover:not(:disabled) { background: #fff; color: var(--navy); border-color: #fff; transform: scale(1.06); }
:where(body[data-page=gallery]) .vg-arrow:disabled { opacity: .3; cursor: default; }
:where(body[data-page=gallery]) .vg-shorts-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc(118 * var(--u)); gap: calc(11 * var(--u));
  /* bleeds to the screen edges, with room below so the card shadows aren't clipped */
  margin: calc(10 * var(--u)) calc(-1 * var(--gutter)) calc(-18 * var(--u));
  padding: calc(4 * var(--u)) calc(var(--gutter) + 9 * var(--u)) calc(28 * var(--u));
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: calc(var(--gutter) + 9 * var(--u)); scrollbar-width: none;
}
:where(body[data-page=gallery]) .vg-shorts-track::-webkit-scrollbar { display: none; }
:where(body[data-page=gallery]) .vg-short {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: calc(14 * var(--u)); scroll-snap-align: start;
  background: #fff; text-align: left; box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(0,6,24,.35);
  outline: 2px solid transparent; outline-offset: 3px;
  transition: transform .5s var(--ease), outline-color .35s;
}
:where(body[data-page=gallery]) .vg-short img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
:where(body[data-page=gallery]) .vg-short::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,14,40,.15) 0%, rgba(4,14,40,0) 25%, rgba(4,14,40,.15) 45%, rgba(4,14,40,.92) 100%); }
:where(body[data-page=gallery]) .vg-short:hover, :where(body[data-page=gallery]) .vg-short:focus-visible { transform: translateY(-6px); outline-color: #5fe0e6; }
:where(body[data-page=gallery]) .vg-short:hover img { transform: scale(1.07); }
:where(body[data-page=gallery]) .vg-short:hover .vg-play, :where(body[data-page=gallery]) .vg-short:focus-visible .vg-play { scale: 1; background: #ff0033; border-color: #ff0033; }
:where(body[data-page=gallery]) .vg-short .vg-play { top: 42%; background: rgba(4,16,40,.35); }
:where(body[data-page=gallery]) .vg-short-badge {
  position: absolute; left: calc(7 * var(--u)); top: calc(7 * var(--u)); z-index: 2; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px calc(6 * var(--u)) 2px calc(5 * var(--u)); border-radius: 99px; background: #ff0033; color: #fff;
  font-size: max(10.5px, calc(6 * var(--f))); font-weight: 800; line-height: 1.6;
}
:where(body[data-page=gallery]) .vg-short-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: calc(10 * var(--u)) calc(9 * var(--u)); color: #fff; }
:where(body[data-page=gallery]) .vg-short-text b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: max(13.5px, calc(8.2 * var(--f))); font-weight: 800; line-height: 1.3; }
:where(body[data-page=gallery]) .vg-short-text small { display: flex; align-items: center; gap: 4px; margin-top: calc(3 * var(--u)); font-size: max(11.5px, calc(6.4 * var(--f))); font-weight: 600; color: rgba(255,255,255,.75); }

/* ==========================================================
   SUBSCRIBE CTA
   ========================================================== */
:where(body[data-page=gallery]) .vg-cta-card {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(16 * var(--u));
  margin-inline: calc(9 * var(--u)); padding: calc(20 * var(--u)) calc(26 * var(--u)); border-radius: calc(16 * var(--u));
  background: linear-gradient(115deg, #fff3f5 0%, #fff 45%, #eef5ff 100%); border: 1px solid #f3e3e8; box-shadow: var(--shadow-sm);
}
:where(body[data-page=gallery]) .vg-cta-ring { position: absolute; z-index: -1; border-radius: 50%; border: 1.5px dashed rgba(255,0,51,.18); pointer-events: none; }
:where(body[data-page=gallery]) .vg-cta-ring--1 { width: calc(150 * var(--u)); aspect-ratio: 1; left: calc(-50 * var(--u)); top: calc(-60 * var(--u)); }
:where(body[data-page=gallery]) .vg-cta-ring--2 { width: calc(220 * var(--u)); aspect-ratio: 1; right: calc(-70 * var(--u)); bottom: calc(-140 * var(--u)); border-color: rgba(11,91,192,.14); }
:where(body[data-page=gallery]) .vg-cta-ico {
  width: calc(46 * var(--u)); min-width: 64px; aspect-ratio: 1; border-radius: calc(14 * var(--u)); display: grid; place-items: center;
  background: linear-gradient(135deg, #ff2a55, #e0002d); color: #fff; font-size: max(28px, calc(20 * var(--f)));
  rotate: -8deg; box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(224,0,45,.3);
  animation: floatY 4s ease-in-out infinite;
}
:where(body[data-page=gallery]) .vg-cta-text h2 { font-size: calc(15 * var(--f)); font-weight: 800; color: var(--navy); line-height: 1.25; letter-spacing: -.01em; }
:where(body[data-page=gallery]) .vg-cta-text p { margin-top: calc(4 * var(--u)); max-width: calc(330 * var(--u)); font-size: calc(8.4 * var(--f)); line-height: 1.55; color: var(--muted); }
:where(body[data-page=gallery]) .vg-cta-btns { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }

/* ==========================================================
   LIGHTBOX PLAYER
   ========================================================== */
body.vg-lock:where([data-page=gallery]) { overflow: hidden; }
:where(body[data-page=gallery]) .vg-modal {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 64px 24px 24px;
  opacity: 0; transition: opacity .3s;
}
:where(body[data-page=gallery]) .vg-modal.open { opacity: 1; }
:where(body[data-page=gallery]) .vg-modal[hidden] { display: none; }
:where(body[data-page=gallery]) .vg-modal-backdrop { position: absolute; inset: 0; background: rgba(3,10,30,.84); backdrop-filter: blur(8px); }
:where(body[data-page=gallery]) .vg-modal-box {
  position: relative; width: min(960px, 100%, calc((100dvh - 250px) * 16 / 9)); border-radius: 18px; background: #0b1a3c; color: #fff; outline: none;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transform: translateY(16px) scale(.97); transition: transform .45s var(--ease);
}
:where(body[data-page=gallery]) .vg-modal.open .vg-modal-box { transform: none; }
:where(body[data-page=gallery]) .vg-modal-box.is-short { width: min(400px, 100%, calc((100dvh - 250px) * 9 / 16)); }
:where(body[data-page=gallery]) .vg-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px 18px 0 0; background: #000; }
:where(body[data-page=gallery]) .is-short .vg-player { aspect-ratio: 9 / 16; }
:where(body[data-page=gallery]) .vg-player iframe, :where(body[data-page=gallery]) .vg-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
:where(body[data-page=gallery]) .vg-modal-info { padding: 16px 22px 20px; }
:where(body[data-page=gallery]) .vg-modal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.66); }
:where(body[data-page=gallery]) .vg-modal-meta > span:not(.vg-tag) { display: inline-flex; align-items: center; gap: 5px; }
:where(body[data-page=gallery]) .vg-modal-meta i { color: #5fe0e6; }
:where(body[data-page=gallery]) .vg-modal-meta .vg-tag { box-shadow: none; }
:where(body[data-page=gallery]) .vg-modal-info h2 { margin-top: 10px; font-size: 21px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
:where(body[data-page=gallery]) .vg-modal-info p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.74); }
:where(body[data-page=gallery]) .vg-modal-info p:empty { display: none; }
:where(body[data-page=gallery]) .vg-modal-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
:where(body[data-page=gallery]) .vg-share {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 99px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 13.5px; font-weight: 700;
  transition: background-color .3s, border-color .3s, color .3s;
}
:where(body[data-page=gallery]) .vg-share:hover { background: #fff; color: var(--navy); border-color: #fff; }
:where(body[data-page=gallery]) .vg-share--wa:hover { background: #25d366; color: #fff; border-color: #25d366; }
:where(body[data-page=gallery]) .vg-share.done { background: #12a150; border-color: #12a150; color: #fff; }
:where(body[data-page=gallery]) .vg-modal-close, :where(body[data-page=gallery]) .vg-modal-nav {
  position: absolute; z-index: 3; display: grid; place-items: center; border-radius: 50%; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px);
  transition: background-color .3s, color .3s, transform .4s var(--ease);
}
:where(body[data-page=gallery]) .vg-modal-close { right: 0; top: -52px; width: 42px; height: 42px; font-size: 17px; }
:where(body[data-page=gallery]) .vg-modal-close:hover { background: #fff; color: var(--navy); transform: rotate(90deg); }
:where(body[data-page=gallery]) .vg-player-wrap { position: relative; }
:where(body[data-page=gallery]) .vg-modal-nav { top: 50%; translate: 0 -50%; width: 50px; height: 50px; font-size: 18px; }
:where(body[data-page=gallery]) .vg-modal-prev { left: -74px; }
:where(body[data-page=gallery]) .vg-modal-next { right: -74px; }
:where(body[data-page=gallery]) .vg-modal-nav:hover { background: #fff; color: var(--navy); transform: scale(1.08); }
:where(body[data-page=gallery]) .vg-modal-nav[hidden] { display: none; }

/* "coming soon" screen for videos without a source yet */
:where(body[data-page=gallery]) .vg-soon { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: #041a45; }
:where(body[data-page=gallery]) .vg-soon-bg { position: absolute; inset: -10%; width: 120%; max-width: none; height: 120%; object-fit: cover; filter: blur(18px) brightness(.42) saturate(1.2); }
:where(body[data-page=gallery]) .vg-soon-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 360px; padding: 20px; text-align: center; animation: vgUp .6s var(--ease) both; }
:where(body[data-page=gallery]) .vg-soon-ico { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); font-size: 24px; color: #5fe0e6; }
:where(body[data-page=gallery]) .vg-soon b { margin-top: 4px; font-size: 22px; font-weight: 800; color: #fff; }
:where(body[data-page=gallery]) .vg-soon p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.8); }
:where(body[data-page=gallery]) .vg-soon .btn { margin-top: 6px; height: 42px; font-size: 14px; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  :where(body[data-page=gallery]) .vg-hero *, :where(body[data-page=gallery]) .vg-hero-inner > *, :where(body[data-page=gallery]) .vg-card, :where(body[data-page=gallery]) .vg-next-list li, :where(body[data-page=gallery]) .vg-stage-info, :where(body[data-page=gallery]) .vg-cta-ico, :where(body[data-page=gallery]) .vg-soon-body { animation: none !important; }
  :where(body[data-page=gallery]) .vg-stage-play span::before, :where(body[data-page=gallery]) .vg-stage-play span::after { animation: none; }
  :where(body[data-page=gallery]) .vg-modal, :where(body[data-page=gallery]) .vg-modal-box { transition: none; }
}

@media (max-width: 1179px) {
  :where(body[data-page=gallery]) .vg-modal-prev { left: 10px; }
  :where(body[data-page=gallery]) .vg-modal-next { right: 10px; }
  :where(body[data-page=gallery]) .vg-modal-nav { width: 42px; height: 42px; font-size: 15px; background: rgba(4,16,40,.5); }
}

@media (max-width: 1099px) {
  :where(body[data-page=gallery]) .vg-hero-inner { padding-left: var(--gutter); }
  :where(body[data-page=gallery]) .vg-hero-inner > * { max-width: calc(290 * var(--u)); }
  :where(body[data-page=gallery]) .vg-art { right: calc(var(--gutter) + 20px); scale: .88; }
  :where(body[data-page=gallery]) .vg-feature-grid { grid-template-columns: 1fr calc(200 * var(--u)); }
}

@media (max-width: 939px) {
  :where(body[data-page=gallery]) .vg-art { display: none; }
  :where(body[data-page=gallery]) .vg-hero-inner > * { max-width: 620px; }
  :where(body[data-page=gallery]) .vg-feature-grid { grid-template-columns: 1fr; }
  :where(body[data-page=gallery]) .vg-next { height: auto; min-height: 0; }
  :where(body[data-page=gallery]) .vg-next-list { overflow: visible; }
  :where(body[data-page=gallery]) .vg-grid { grid-template-columns: 1fr 1fr; }
  :where(body[data-page=gallery]) .vg-toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  :where(body[data-page=gallery]) .vg-tabs { align-self: center; }
  :where(body[data-page=gallery]) .vg-controls { justify-content: center; }
  :where(body[data-page=gallery]) .vg-shorts-track { grid-auto-columns: 200px; }
  :where(body[data-page=gallery]) .vg-cta-card { grid-template-columns: auto 1fr; }
  :where(body[data-page=gallery]) .vg-cta-btns { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 767px) {
  :where(body[data-page=gallery]) .vg-head p { font-size: 15px; }
  :where(body[data-page=gallery]) .vg-hero { min-height: 0; }
  :where(body[data-page=gallery]) .vg-hero-inner { padding-block: 34px 44px; }
  :where(body[data-page=gallery]) .vg-hero .eyebrow { font-size: 11px; }
  :where(body[data-page=gallery]) .vg-hero-title { font-size: 34px; }
  :where(body[data-page=gallery]) .vg-hero-text { font-size: 15px; }
  :where(body[data-page=gallery]) .vg-hero-stats b { font-size: 24px; }
  :where(body[data-page=gallery]) .vg-hero-stats li { padding-inline: 18px; }
  :where(body[data-page=gallery]) .vg-hero-btns .btn { flex: 1; height: 46px; }

  :where(body[data-page=gallery]) .vg-feature-grid, :where(body[data-page=gallery]) .vg-toolbar, :where(body[data-page=gallery]) .vg-grid, :where(body[data-page=gallery]) .vg-shorts-head { padding-inline: 0; }
  :where(body[data-page=gallery]) .vg-feature-grid { gap: 14px; }
  :where(body[data-page=gallery]) .vg-stage { border-radius: 16px; }
  :where(body[data-page=gallery]) .vg-stage-info { padding: 16px 18px 18px; }
  :where(body[data-page=gallery]) .vg-stage-info h3 { font-size: 19px; }
  :where(body[data-page=gallery]) .vg-stage-info p { font-size: 14.5px; }
  :where(body[data-page=gallery]) .vg-stage-tags { left: 12px; top: 12px; }
  :where(body[data-page=gallery]) .vg-next { padding: 16px 12px 12px; border-radius: 16px; }
  :where(body[data-page=gallery]) .vg-next-head h3 { font-size: 16px; }
  :where(body[data-page=gallery]) .vg-next-item { grid-template-columns: 120px 1fr; gap: 12px; padding: 6px; }

  :where(body[data-page=gallery]) .vg-tabs { align-self: stretch; }
  :where(body[data-page=gallery]) .vg-tab { padding: 8px 14px; }
  :where(body[data-page=gallery]) .vg-controls { flex-wrap: nowrap; }
  :where(body[data-page=gallery]) .vg-search { flex: 1; }
  :where(body[data-page=gallery]) .vg-search input { width: 100%; padding-left: 38px; }
  :where(body[data-page=gallery]) .vg-search > i { left: 14px; }
  :where(body[data-page=gallery]) .vg-select select { padding-left: 16px; padding-right: 36px; }
  :where(body[data-page=gallery]) .vg-select::after { right: 14px; }

  :where(body[data-page=gallery]) .vg-grid { gap: 16px; }
  :where(body[data-page=gallery]) .vg-card { border-radius: 16px; }
  :where(body[data-page=gallery]) .vg-card-body { padding: 14px 16px 16px; }
  :where(body[data-page=gallery]) .vg-card h3 { font-size: 17px; }

  :where(body[data-page=gallery]) .vg-shorts-track { grid-auto-columns: 44%; gap: 12px; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  :where(body[data-page=gallery]) .vg-short { border-radius: 16px; }
  :where(body[data-page=gallery]) .vg-arrow { display: none; }

  :where(body[data-page=gallery]) .vg-cta-card { grid-template-columns: 1fr; justify-items: center; text-align: center; margin-inline: 0; padding: 30px 20px 24px; border-radius: 18px; }
  :where(body[data-page=gallery]) .vg-cta-text h2 { font-size: 23px; }
  :where(body[data-page=gallery]) .vg-cta-text p { font-size: 15px; }
  :where(body[data-page=gallery]) .vg-cta-btns { flex-direction: column; width: 100%; }
  :where(body[data-page=gallery]) .vg-cta-btns .btn { height: 46px; font-size: 15px; }

  :where(body[data-page=gallery]) .vg-modal { padding: 60px 10px 16px; }
  :where(body[data-page=gallery]) .vg-modal-box { border-radius: 16px; }
  :where(body[data-page=gallery]) .vg-player { border-radius: 16px 16px 0 0; }
  :where(body[data-page=gallery]) .vg-modal-info { padding: 14px 16px 18px; }
  :where(body[data-page=gallery]) .vg-modal-info h2 { font-size: 18px; }
  :where(body[data-page=gallery]) .vg-modal-close { top: -50px; }
}

@media (max-width: 599px) {
  :where(body[data-page=gallery]) .vg-grid { grid-template-columns: 1fr; }
}

/* ##########################################################
   PAGE: legal  ·  scope body[data-page="legal"]
   ########################################################## */
/* ==========================================================
   MMatrics Pharmaceuticals – legal pages
   (privacy-policy, terms-and-conditions, refund-policy,
    shipping-policy, disclaimer)
   Follows the base section and uses the same design unit (--u).
   Each page sets its accent on <main> with an lg-c-* class.
   legal.js builds the contents list, the live title and the
   copy-link headings.
   ========================================================== */

/* the base section gives body overflow-x: hidden, which makes it a scroll container and
   stops position: sticky from working; clip hides overflow the same way without that */
body:has(.legal-page):where([data-page=legal]) { overflow-x: clip; }

/* page accents: --c accent, --c2 second gradient stop, --c-bg tint, --c-hi light accent for the dark hero */
:where(body[data-page=legal]) .lg-c-blue   { --c: #1a6fd6; --c2: #0a96a3; --c-bg: #e8f1fd; --c-hi: #7cbcff; }
:where(body[data-page=legal]) .lg-c-navy   { --c: #0b3e8f; --c2: #1a6fd6; --c-bg: #e6ecf8; --c-hi: #9ec2ff; }
:where(body[data-page=legal]) .lg-c-green  { --c: #11a06a; --c2: #0a96a3; --c-bg: #e3f6ec; --c-hi: #5fe3a8; }
:where(body[data-page=legal]) .lg-c-orange { --c: #f06a22; --c2: #e8437a; --c-bg: #fff0e6; --c-hi: #ffa772; }
:where(body[data-page=legal]) .lg-c-pink   { --c: #e8437a; --c2: #7a4fd6; --c-bg: #fde9f0; --c-hi: #f58bb0; }

/* ==========================================================
   HERO
   ========================================================== */
:where(body[data-page=legal]) .lg-hero {                                           /* dark navy, as on the video gallery */
  position: relative; overflow: hidden; isolation: isolate; min-height: calc(180 * var(--u)); display: flex; align-items: center; color: #fff;
  background:
    radial-gradient(circle at 78% 46%, color-mix(in srgb, var(--c2) 36%, transparent) 0, transparent calc(140 * var(--u))),
    radial-gradient(circle at 6% 100%, color-mix(in srgb, var(--c) 28%, transparent) 0, transparent calc(130 * var(--u))),
    linear-gradient(120deg, #041a45 0%, #0a2a66 55%, #064783 100%);
}
:where(body[data-page=legal]) .lg-hero::before {                                    /* faint grid, fading towards the edges */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px) 0 0 / calc(24 * var(--u)) calc(24 * var(--u)),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px) 0 0 / calc(24 * var(--u)) calc(24 * var(--u));
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 70%);
}
:where(body[data-page=legal]) .lg-hero::after {                                     /* dot grid */
  content: ""; position: absolute; left: calc(14 * var(--u)); top: calc(16 * var(--u)); width: calc(60 * var(--u)); height: calc(46 * var(--u));
  z-index: -1; opacity: .5; pointer-events: none;
  background: radial-gradient(rgba(255,255,255,.4) 1.2px, transparent 1.6px) 0 0 / calc(8 * var(--u)) calc(8 * var(--u));
}
:where(body[data-page=legal]) .lg-hero-inner { padding-block: calc(22 * var(--u)); padding-left: calc(51 * var(--u)); }
:where(body[data-page=legal]) .lg-hero-inner > * { animation: fadeUp .8s var(--ease) both; max-width: calc(330 * var(--u)); }
:where(body[data-page=legal]) .lg-hero-inner > :nth-child(2) { animation-delay: .08s; }
:where(body[data-page=legal]) .lg-hero-inner > :nth-child(3) { animation-delay: .16s; }
:where(body[data-page=legal]) .lg-hero-inner > :nth-child(4) { animation-delay: .24s; }
:where(body[data-page=legal]) .lg-hero-inner > :nth-child(5) { animation-delay: .32s; }

:where(body[data-page=legal]) .lg-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--u)); margin-bottom: calc(9 * var(--u)); font-size: max(12px, calc(7 * var(--f))); font-weight: 600; color: rgba(255,255,255,.66); }
:where(body[data-page=legal]) .lg-crumb a { color: rgba(255,255,255,.9); transition: color .25s; }
:where(body[data-page=legal]) .lg-crumb a:hover { color: var(--c-hi); }
:where(body[data-page=legal]) .lg-crumb i { font-size: .7em; opacity: .6; }
:where(body[data-page=legal]) .lg-hero .eyebrow { color: #5fe0e6; font-size: max(12px, calc(6.8 * var(--f))); letter-spacing: .4em; }

/* --- the live title: letters rise in, then wave & burst on click --- */
:where(body[data-page=legal]) .lg-hero-title {
  margin-top: calc(5 * var(--u)); font-weight: 800; font-size: calc(32 * var(--f)); line-height: 1.08; letter-spacing: -.035em;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; position: relative; width: max-content; max-width: 100%;
}
:where(body[data-page=legal]) .lg-hero-title:focus-visible { outline: 2px dashed var(--c-hi); outline-offset: 6px; border-radius: 6px; }
:where(body[data-page=legal]) .lg-hero-title > span { display: block; width: max-content; max-width: 100%; }
:where(body[data-page=legal]) .lg-hero-title .l1 { color: #fff; }
:where(body[data-page=legal]) .lg-hero-title .l2 {
  background: linear-gradient(90deg, #5fe0e6, var(--c-hi) 55%, #5fe0e6); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 6s ease-in-out infinite;
}
:where(body[data-page=legal]) .lg-word { display: inline-block; white-space: nowrap; }
:where(body[data-page=legal]) .lg-ch { display: inline-block; animation: lgRise .7s var(--ease) both; animation-delay: calc(.25s + var(--i) * 32ms); }
/* once split, each letter carries its own slice of the gradient so it survives the transform */
:where(body[data-page=legal]) .lg-hero-title.split .l2 { background: none; animation: none; color: inherit; }
:where(body[data-page=legal]) .lg-hero-title.split .l2 .lg-ch {
  background: linear-gradient(90deg, #5fe0e6, var(--c-hi) 55%, #5fe0e6);
  background-size: calc(var(--n) * 100%) 100%; background-position: calc(var(--k) / max(var(--n) - 1, 1) * 100%) 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:where(body[data-page=legal]) .lg-hero-title.risen .lg-ch { animation: none; }       /* so ending a wave doesn't replay the entrance */
:where(body[data-page=legal]) .lg-hero-title.is-waving .lg-ch { animation: lgWave .75s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * 28ms); }
:where(body[data-page=legal]) .lg-hero-title.is-waving .l2 .lg-ch { animation-name: lgWave2; }
@keyframes lgRise { from { opacity: 0; transform: translateY(.45em) rotate(6deg); filter: blur(4px); } }
@keyframes lgWave { 0%, 100% { transform: none; } 40% { transform: translateY(-.28em) scale(1.08); color: var(--c-hi); } }
@keyframes lgWave2 { 0%, 100% { transform: none; } 40% { transform: translateY(-.28em) scale(1.08) rotate(-4deg); } }
:where(body[data-page=legal]) .lg-tap-hint {
  display: inline-flex; align-items: center; gap: 5px; margin-left: calc(6 * var(--u)); vertical-align: middle;
  font-size: max(11px, calc(5.6 * var(--f))); font-weight: 700; letter-spacing: .02em; color: var(--c);
  padding: 3px 9px; border-radius: 99px; background: #fff; box-shadow: var(--shadow-sm);
  opacity: 0; animation: fadeUp .6s var(--ease) 1.4s forwards;
}
:where(body[data-page=legal]) .lg-hero-title.was-clicked .lg-tap-hint { opacity: 0 !important; transition: opacity .3s; animation: none; }

/* burst particles from the click point */
:where(body[data-page=legal]) .lg-spark {
  position: fixed; z-index: 400; left: 0; top: 0; pointer-events: none; font-size: 15px; line-height: 1;
  color: var(--spark, #1a6fd6); animation: lgSpark .9s cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes lgSpark {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.3) rotate(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); }
}

:where(body[data-page=legal]) .lg-hero-text { margin-top: calc(7 * var(--u)); font-size: calc(9.8 * var(--f)); line-height: 1.5; color: rgba(255,255,255,.82); font-weight: 500; }
:where(body[data-page=legal]) .lg-meta { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); }
:where(body[data-page=legal]) .lg-meta li, :where(body[data-page=legal]) .lg-print {
  display: inline-flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u));
  border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px);
  font-size: max(12.5px, calc(7.2 * var(--f))); font-weight: 600; color: #fff;
}
:where(body[data-page=legal]) .lg-meta i { color: var(--c-hi); }
:where(body[data-page=legal]) .lg-meta .lg-print-li { padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
:where(body[data-page=legal]) .lg-print { cursor: pointer; transition: background .25s, color .25s, transform .25s var(--ease); }
:where(body[data-page=legal]) .lg-print:hover { background: #fff; color: var(--c); transform: translateY(-2px); }
:where(body[data-page=legal]) .lg-print:hover i { color: var(--c); }

/* hero art: big badge in a dashed orbit with floating chips */
:where(body[data-page=legal]) .lg-art { position: absolute; right: calc(56 * var(--u)); top: 50%; translate: 0 -50%; width: calc(230 * var(--u)); height: calc(170 * var(--u)); pointer-events: none; animation: fadeUp 1s var(--ease) .2s both; }
:where(body[data-page=legal]) .lg-art-orbit {
  position: absolute; left: calc(36 * var(--u)); top: calc(-4 * var(--u)); width: calc(176 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.26); animation: lgSpin 40s linear infinite;
}
:where(body[data-page=legal]) .lg-art-orbit::before {
  content: ""; position: absolute; top: 12%; left: 10%; width: calc(9 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  background: #f24d82; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(242,77,130,.18);
}
@keyframes lgSpin { to { transform: rotate(360deg); } }
:where(body[data-page=legal]) .lg-art-circle {
  position: absolute; left: calc(52 * var(--u)); top: calc(12 * var(--u)); width: calc(144 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.24) 0%, rgba(255,255,255,.08) 60%, rgba(255,255,255,.04) 100%);
  border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px);
  box-shadow: inset 0 calc(-8 * var(--u)) calc(20 * var(--u)) rgba(0,6,24,.18), 0 calc(16 * var(--u)) calc(36 * var(--u)) rgba(0,6,24,.3);
}
:where(body[data-page=legal]) .lg-art-circle i {
  font-size: calc(62 * var(--f));
  background: linear-gradient(160deg, #fff, var(--c-hi)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(8 * var(--u)) rgba(10,60,140,.2));
  animation: lgTilt 5s ease-in-out infinite;
}
@keyframes lgTilt { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg) translateY(-3px); } }
:where(body[data-page=legal]) .lg-chip {
  position: absolute; display: flex; align-items: center; gap: calc(5 * var(--u)); white-space: nowrap;
  padding: calc(5 * var(--u)) calc(9 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u)); border-radius: 99px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(10px);
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0,6,24,.25);
  font-size: calc(7 * var(--f)); font-weight: 700; color: #fff;
  animation: floatY 4.6s ease-in-out infinite;
}
:where(body[data-page=legal]) .lg-chip b { display: grid; place-items: center; width: calc(17 * var(--u)); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.16); color: var(--c-hi); font-size: calc(7.4 * var(--f)); }
:where(body[data-page=legal]) .lg-chip--a { left: 0; top: calc(30 * var(--u)); }
:where(body[data-page=legal]) .lg-chip--b { right: calc(-6 * var(--u)); bottom: calc(26 * var(--u)); animation-delay: -2.2s; }

/* ==========================================================
   MAIN: contents sidebar + document
   ========================================================== */
:where(body[data-page=legal]) .lg-main { display: grid; grid-template-columns: calc(186 * var(--u)) minmax(0, 1fr); gap: calc(22 * var(--u)); align-items: start; padding-inline: calc(51 * var(--u)); }
:where(body[data-page=legal]) .lg-side {                                           /* stays in view; the list scrolls if it can't fit */
  position: sticky; top: calc(52 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u));
  max-height: calc(100vh - 52 * var(--u) - 16px);
}
:where(body[data-page=legal]) .lg-help { flex: none; }

:where(body[data-page=legal]) .lg-toc {
  display: flex; flex-direction: column; min-height: 0;
  padding: calc(10 * var(--u)); background: #fff; border: 1px solid var(--line); border-radius: calc(8 * var(--u)); box-shadow: var(--shadow-sm);
}
:where(body[data-page=legal]) .lg-toc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0 calc(4 * var(--u)); text-align: left; cursor: default; }
:where(body[data-page=legal]) .lg-toc-title { font-size: calc(10.5 * var(--f)); font-weight: 800; color: var(--navy-2); }
:where(body[data-page=legal]) .lg-toc-pct { font-size: max(11px, calc(6.4 * var(--f))); font-weight: 700; color: var(--c); font-variant-numeric: tabular-nums; }
:where(body[data-page=legal]) .lg-toc-head .fa-chevron-down {
  flex: none; font-size: .6em; width: 2em; height: 2em; border-radius: 50%; color: var(--c); background: var(--c-bg);
  transition: transform .35s var(--ease);
}
@media (min-width: 940px) {                         /* desktop: heading folds the list away */
  :where(body[data-page=legal]) .lg-toc-head { cursor: pointer; }
  :where(body[data-page=legal]) .lg-toc-pct { margin-left: auto; }
  :where(body[data-page=legal]) .lg-toc.is-collapsed .lg-toc-head .fa-chevron-down { transform: rotate(-90deg); }
  :where(body[data-page=legal]) .lg-toc.is-collapsed ol, :where(body[data-page=legal]) .lg-toc.is-collapsed .nav-more { display: none; }
  :where(body[data-page=legal]) .lg-toc.is-collapsed .lg-progress { margin-bottom: 0; }
}
:where(body[data-page=legal]) .lg-progress { height: 4px; margin: calc(7 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u)); border-radius: 9px; background: var(--c-bg); overflow: hidden; }
:where(body[data-page=legal]) .lg-progress span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--c), var(--c2)); border-radius: inherit; transition: transform .15s linear; }
:where(body[data-page=legal]) .lg-toc ol { list-style: none; margin: 0; padding: 0 2px 0 0; counter-reset: toc; display: grid; gap: 2px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
:where(body[data-page=legal]) .lg-toc a {
  position: relative; display: flex; gap: calc(6 * var(--u)); padding: calc(4.5 * var(--u)) calc(6 * var(--u)); border-radius: calc(5 * var(--u));
  font-size: max(13px, calc(7.6 * var(--f))); font-weight: 600; line-height: 1.35; color: #4a5670;
  transition: background .25s, color .25s, padding .3s var(--ease);
}
:where(body[data-page=legal]) .lg-toc a b { flex: none; min-width: 1.7em; font-weight: 800; color: #a7b3c8; font-variant-numeric: tabular-nums; transition: color .25s; }
:where(body[data-page=legal]) .lg-toc a:hover { background: #f4f8fd; color: var(--navy-2); }
:where(body[data-page=legal]) .lg-toc a.active { background: var(--c-bg); color: var(--navy); padding-left: calc(10 * var(--u)); }
:where(body[data-page=legal]) .lg-toc a.active b { color: var(--c); }
:where(body[data-page=legal]) .lg-toc a::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--c); transform: scaleY(0); transition: transform .3s var(--ease); }
:where(body[data-page=legal]) .lg-toc a.active::before { transform: scaleY(1); }

:where(body[data-page=legal]) .lg-help {
  position: relative; overflow: hidden; padding: calc(13 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u)); color: #fff;
  background: linear-gradient(140deg, #062e6f, #0b4fa8 60%, #0a8f9c);
}
:where(body[data-page=legal]) .lg-help::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 110px; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.08); }
:where(body[data-page=legal]) .lg-help h3 { font-size: calc(10 * var(--f)); font-weight: 800; }
:where(body[data-page=legal]) .lg-help p { margin-top: 4px; font-size: max(12.5px, calc(7.2 * var(--f))); line-height: 1.5; color: rgba(255,255,255,.82); }
:where(body[data-page=legal]) .lg-help a { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: calc(7 * var(--u)); font-size: max(13px, calc(7.4 * var(--f))); font-weight: 700; }
:where(body[data-page=legal]) .lg-help a i { width: 26px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); transition: background .25s; }
:where(body[data-page=legal]) .lg-help a:hover i { background: #25d366; }

/* --- the document --- */
:where(body[data-page=legal]) .lg-doc { min-width: 0; }
:where(body[data-page=legal]) .lg-intro {
  padding: calc(13 * var(--u)) calc(15 * var(--u)); border-radius: calc(8 * var(--u)); border-left: 4px solid var(--c);
  background: linear-gradient(90deg, var(--c-bg), #fff); font-size: calc(8.8 * var(--f)); line-height: 1.7; color: #1c2a44;
}
:where(body[data-page=legal]) .lg-glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
:where(body[data-page=legal]) .lg-glance li {
  padding: calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
:where(body[data-page=legal]) .lg-glance li:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--c) 35%, transparent); }
:where(body[data-page=legal]) .lg-glance i { display: grid; place-items: center; width: calc(22 * var(--u)); aspect-ratio: 1; border-radius: calc(6 * var(--u)); background: var(--c-bg); color: var(--c); font-size: calc(9 * var(--f)); transition: transform .4s var(--ease); }
:where(body[data-page=legal]) .lg-glance li:hover i { transform: rotate(-10deg) scale(1.1); }
:where(body[data-page=legal]) .lg-glance b { display: block; margin-top: calc(6 * var(--u)); font-size: calc(8.4 * var(--f)); font-weight: 800; color: var(--navy); line-height: 1.3; }
:where(body[data-page=legal]) .lg-glance small { display: block; margin-top: 2px; font-size: max(12.5px, calc(7 * var(--f))); line-height: 1.45; color: var(--muted); }

:where(body[data-page=legal]) .lg-sec { margin-top: calc(18 * var(--u)); padding-top: calc(16 * var(--u)); border-top: 1px dashed #dbe4f0; scroll-margin-top: calc(56 * var(--u)); }
:where(body[data-page=legal]) .lg-sec:first-of-type { border-top: 0; }
:where(body[data-page=legal]) .lg-h { font-size: calc(13 * var(--f)); font-weight: 800; color: var(--navy); line-height: 1.3; letter-spacing: -.01em; }
:where(body[data-page=legal]) .lg-h a { display: inline-flex; align-items: baseline; gap: calc(7 * var(--u)); }
:where(body[data-page=legal]) .lg-num {
  flex: none; display: inline-grid; place-items: center; min-width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: 0 4px; translate: 0 -.1em;
  border-radius: calc(6 * var(--u)); background: var(--c-bg); color: var(--c); font-size: calc(8.4 * var(--f)); font-variant-numeric: tabular-nums;
  transition: background .3s, color .3s, transform .4s var(--ease);
}
:where(body[data-page=legal]) .lg-link-ico { font-size: .6em; color: var(--c); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s var(--ease); }
:where(body[data-page=legal]) .lg-h a:hover .lg-num, :where(body[data-page=legal]) .lg-sec.flash .lg-num { background: var(--c); color: #fff; transform: rotate(-6deg) scale(1.05); }
:where(body[data-page=legal]) .lg-h a:hover .lg-link-ico, :where(body[data-page=legal]) .lg-h a:focus-visible .lg-link-ico { opacity: 1; transform: none; }
:where(body[data-page=legal]) .lg-sec.flash { animation: lgFlash 1.3s ease; }
@keyframes lgFlash { 0%, 100% { background: transparent; } 20% { background: color-mix(in srgb, var(--c-bg) 70%, transparent); } }

:where(body[data-page=legal]) .lg-body { margin-top: calc(7 * var(--u)); font-size: calc(8.6 * var(--f)); line-height: 1.75; color: #3a4660; }
:where(body[data-page=legal]) .lg-body > * + * { margin-top: calc(6 * var(--u)); }
:where(body[data-page=legal]) .lg-body h3 { margin-top: calc(10 * var(--u)); font-size: calc(9.4 * var(--f)); font-weight: 800; color: var(--navy-2); }
:where(body[data-page=legal]) .lg-body a { color: var(--blue-link); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(10,82,181,.3); text-underline-offset: 3px; transition: text-decoration-color .25s; }
:where(body[data-page=legal]) .lg-body a:hover { text-decoration-color: currentColor; }
:where(body[data-page=legal]) .lg-body b { color: var(--navy-2); }
:where(body[data-page=legal]) .lg-body ul { display: grid; gap: calc(4 * var(--u)); }
:where(body[data-page=legal]) .lg-body ul li { position: relative; padding-left: calc(14 * var(--u)); }
:where(body[data-page=legal]) .lg-body ul li::before { content: ""; position: absolute; left: calc(2 * var(--u)); top: .62em; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--c); }
:where(body[data-page=legal]) .lg-body ol { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: calc(6 * var(--u)); }
:where(body[data-page=legal]) .lg-body ol li { position: relative; padding-left: calc(20 * var(--u)); counter-increment: st; }
:where(body[data-page=legal]) .lg-body ol li::before {
  content: counter(st); position: absolute; left: 0; top: .15em; display: grid; place-items: center; width: calc(14 * var(--u)); min-width: 22px; aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(140deg, var(--c), var(--c2)); color: #fff; font-size: .78em; font-weight: 800;
}

/* callouts */
:where(body[data-page=legal]) .lg-note {
  display: flex; gap: calc(8 * var(--u)); padding: calc(9 * var(--u)) calc(11 * var(--u)); border-radius: calc(7 * var(--u));
  background: #f4f8fd; border: 1px solid #dfe9f6; color: #2c3a57;
}
:where(body[data-page=legal]) .lg-note > i { flex: none; margin-top: .3em; color: var(--blue); }
:where(body[data-page=legal]) .lg-note--warn { background: #fff7ec; border-color: #fde2bf; }
:where(body[data-page=legal]) .lg-note--warn > i { color: #e2860b; }
:where(body[data-page=legal]) .lg-note--ok { background: #ecf8f2; border-color: #c7ebd9; }
:where(body[data-page=legal]) .lg-note--ok > i { color: #11a06a; }

/* two-column yes / no lists (refunds) */
:where(body[data-page=legal]) .lg-split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); }
:where(body[data-page=legal]) .lg-split > div { padding: calc(10 * var(--u)) calc(11 * var(--u)); border-radius: calc(7 * var(--u)); border: 1px solid var(--line); }
:where(body[data-page=legal]) .lg-split h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 calc(5 * var(--u)); font-size: calc(8.8 * var(--f)); font-weight: 800; }
:where(body[data-page=legal]) .lg-yes { background: #f2fbf6; } :where(body[data-page=legal]) .lg-yes h4 { color: #0d8a5a; }
:where(body[data-page=legal]) .lg-no  { background: #fdf3f5; } :where(body[data-page=legal]) .lg-no h4 { color: #c92a55; }
:where(body[data-page=legal]) .lg-split ul li::before { border-color: currentColor; opacity: .55; }

/* table (shipping) */
:where(body[data-page=legal]) .lg-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: calc(7 * var(--u)); }
:where(body[data-page=legal]) .lg-table { width: 100%; border-collapse: collapse; font-size: calc(8 * var(--f)); }
:where(body[data-page=legal]) .lg-table th, :where(body[data-page=legal]) .lg-table td { padding: calc(6 * var(--u)) calc(9 * var(--u)); text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
:where(body[data-page=legal]) .lg-table th { background: var(--c-bg); color: var(--navy); font-weight: 800; }
:where(body[data-page=legal]) .lg-table tr:last-child td { border-bottom: 0; }
:where(body[data-page=legal]) .lg-table tbody tr { transition: background .2s; }
:where(body[data-page=legal]) .lg-table tbody tr:hover { background: #f8fbfe; }

/* contact card inside the document */
:where(body[data-page=legal]) .lg-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(7 * var(--u)); }
:where(body[data-page=legal]) .lg-contact a, :where(body[data-page=legal]) .lg-contact div {
  display: flex; flex-direction: column; gap: 2px; padding: calc(9 * var(--u)); border-radius: calc(7 * var(--u)); background: #f6f9fd; border: 1px solid var(--line);
  text-decoration: none !important; color: var(--navy-2); transition: transform .3s var(--ease), box-shadow .3s;
}
:where(body[data-page=legal]) .lg-contact a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
:where(body[data-page=legal]) .lg-contact i { color: var(--c); margin-bottom: 4px; }
:where(body[data-page=legal]) .lg-contact small { font-size: .82em; font-weight: 600; color: var(--muted); }
:where(body[data-page=legal]) .lg-contact span { font-weight: 700; word-break: break-word; }

/* back-to-top under the document */
:where(body[data-page=legal]) .lg-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: calc(20 * var(--u)); padding-top: calc(12 * var(--u)); border-top: 1px solid var(--line); font-size: max(13px, calc(7.4 * var(--f))); color: var(--muted); }
:where(body[data-page=legal]) .lg-top { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--c); }
:where(body[data-page=legal]) .lg-top i { transition: transform .3s var(--ease); }
:where(body[data-page=legal]) .lg-top:hover i { transform: translateY(-3px); }

/* copy-link toast */
:where(body[data-page=legal]) .lg-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 500; display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 99px; background: #0b1f5c; color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(10,31,92,.3); translate: -50% 20px; opacity: 0; pointer-events: none;
  transition: opacity .3s, translate .4s var(--ease);
}
:where(body[data-page=legal]) .lg-toast i { color: #4fe0a0; }
:where(body[data-page=legal]) .lg-toast.show { opacity: 1; translate: -50% 0; }

/* ==========================================================
   OTHER LEGAL PAGES
   ========================================================== */
:where(body[data-page=legal]) .lg-more { padding-inline: calc(51 * var(--u)); }
:where(body[data-page=legal]) .lg-more-head { text-align: center; }
:where(body[data-page=legal]) .lg-more-head .sec-title { margin-top: calc(3 * var(--u)); }
:where(body[data-page=legal]) .lg-more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10 * var(--u)); margin-top: calc(14 * var(--u)); }
:where(body[data-page=legal]) .lg-more-card {
  position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: calc(3 * var(--u));
  padding: calc(14 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u));
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
:where(body[data-page=legal]) .lg-more-card::before {                               /* accent bar that grows on hover */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--c), var(--c2));
  transform: scaleX(.25); transform-origin: left; transition: transform .5s var(--ease);
}
:where(body[data-page=legal]) .lg-more-card::after {                                /* soft tint in the corner */
  content: ""; position: absolute; right: -40px; bottom: -40px; width: 120px; aspect-ratio: 1; border-radius: 50%;
  background: var(--c-bg); opacity: .7; z-index: 0; transition: transform .5s var(--ease);
}
:where(body[data-page=legal]) .lg-more-card > * { position: relative; z-index: 1; }
:where(body[data-page=legal]) .lg-more-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--c) 30%, transparent); }
:where(body[data-page=legal]) .lg-more-card:hover::before { transform: scaleX(1); }
:where(body[data-page=legal]) .lg-more-card:hover::after { transform: scale(1.5); }
:where(body[data-page=legal]) .lg-more-ico {
  display: grid; place-items: center; width: calc(24 * var(--u)); aspect-ratio: 1; margin-bottom: calc(5 * var(--u)); border-radius: calc(7 * var(--u));
  background: var(--c-bg); color: var(--c); font-size: calc(10 * var(--f)); transition: background .35s, color .35s, transform .45s var(--ease);
}
:where(body[data-page=legal]) .lg-more-card:hover .lg-more-ico { background: linear-gradient(140deg, var(--c), var(--c2)); color: #fff; transform: rotate(-10deg) scale(1.06); }
:where(body[data-page=legal]) .lg-more-card b { font-size: calc(9.4 * var(--f)); font-weight: 800; color: var(--navy); line-height: 1.3; }
:where(body[data-page=legal]) .lg-more-card small { font-size: max(12.5px, calc(7.2 * var(--f))); line-height: 1.5; color: var(--muted); }
:where(body[data-page=legal]) .lg-more-go { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: calc(6 * var(--u)); font-size: max(13px, calc(7.4 * var(--f))); font-weight: 700; color: var(--c); }
:where(body[data-page=legal]) .lg-more-go i { transition: transform .35s var(--ease); }
:where(body[data-page=legal]) .lg-more-card:hover .lg-more-go i { animation: arrowNudge .8s var(--ease) infinite; }

/* ==========================================================
   CTA band
   ========================================================== */
:where(body[data-page=legal]) .lg-cta {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--u));
  margin-inline: calc(34 * var(--u)); padding: calc(20 * var(--u)) calc(26 * var(--u)); border-radius: calc(10 * var(--u)); color: #fff;
  background: linear-gradient(118deg, #062e6f 0%, #0b4fa8 55%, #0a8f9c 100%);
  box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(6,46,111,.22);
}
:where(body[data-page=legal]) .lg-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; pointer-events: none; background: radial-gradient(#fff 1px, transparent 1.4px) 0 0 / calc(10 * var(--u)) calc(10 * var(--u)); }
:where(body[data-page=legal]) .lg-cta .eyebrow { color: #8fe3ea; font-size: max(12px, calc(6.8 * var(--f))); }
:where(body[data-page=legal]) .lg-cta h2 { margin-top: calc(5 * var(--u)); font-size: calc(16 * var(--f)); font-weight: 800; line-height: 1.25; }
:where(body[data-page=legal]) .lg-cta p { margin-top: calc(4 * var(--u)); font-size: calc(8.6 * var(--f)); color: rgba(255,255,255,.85); }
:where(body[data-page=legal]) .lg-cta-btns { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); }
:where(body[data-page=legal]) .lg-cta .btn-wa { background: #25d366; color: #fff; }
:where(body[data-page=legal]) .lg-cta .btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.45); }

/* ==========================================================
   REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  :where(body[data-page=legal]) .lg-art, :where(body[data-page=legal]) .lg-art *, :where(body[data-page=legal]) .lg-hero-title .l2, :where(body[data-page=legal]) .lg-ch, :where(body[data-page=legal]) .lg-hero-title.is-waving .lg-ch, :where(body[data-page=legal]) .lg-chip { animation: none !important; }
  :where(body[data-page=legal]) .lg-spark { display: none; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1099px) {
  :where(body[data-page=legal]) .lg-hero-inner { padding-left: var(--gutter); }
  :where(body[data-page=legal]) .lg-art { right: var(--gutter); opacity: .9; }
  :where(body[data-page=legal]) .lg-hero-inner > * { max-width: calc(300 * var(--u)); }
  :where(body[data-page=legal]) .lg-main { padding-inline: var(--gutter); grid-template-columns: 240px minmax(0, 1fr); }
  :where(body[data-page=legal]) .lg-side { top: 90px; }
  :where(body[data-page=legal]) .lg-sec { scroll-margin-top: 90px; }
  :where(body[data-page=legal]) .lg-cta { margin-inline: var(--gutter); }
  :where(body[data-page=legal]) .lg-more { padding-inline: var(--gutter); }
  :where(body[data-page=legal]) .lg-more-grid { grid-template-columns: repeat(2, 1fr); }
  :where(body[data-page=legal]) .lg-glance { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 939px) {
  :where(body[data-page=legal]) .lg-art { display: none; }
  :where(body[data-page=legal]) .lg-hero-inner > * { max-width: 640px; }
  :where(body[data-page=legal]) .lg-main { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  :where(body[data-page=legal]) .lg-side { position: sticky; top: 64px; z-index: 5; gap: 0; max-height: none; }
  :where(body[data-page=legal]) .lg-help { display: none; }
  /* contents collapse into a sticky bar with a drop-down list */
  :where(body[data-page=legal]) .lg-toc { padding: 10px 12px; box-shadow: 0 8px 22px rgba(16,42,92,.1); }
  :where(body[data-page=legal]) .lg-toc-head { cursor: pointer; padding: 0; }
  :where(body[data-page=legal]) .lg-toc-head .fa-chevron-down { display: inline-flex; }
  :where(body[data-page=legal]) .lg-toc.open .lg-toc-head .fa-chevron-down { transform: rotate(180deg); }
  :where(body[data-page=legal]) .lg-toc-title { font-size: 15px; display: flex; flex-direction: column; min-width: 0; }
  :where(body[data-page=legal]) .lg-toc-now { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :where(body[data-page=legal]) .lg-progress { margin: 8px 0 0; }
  :where(body[data-page=legal]) .lg-toc ol { display: none; max-height: 55vh; overflow-y: auto; margin-top: 8px; }
  :where(body[data-page=legal]) .lg-toc.open ol { display: grid; animation: fadeUp .35s var(--ease); }
  :where(body[data-page=legal]) .lg-toc:not(.open) .nav-more { display: none; }
  :where(body[data-page=legal]) .lg-cta { flex-direction: column; align-items: flex-start; }
}
:where(body[data-page=legal]) .lg-toc-now { display: none; }
@media (max-width: 939px) { :where(body[data-page=legal]) .lg-toc-now { display: block; } }

@media (max-width: 767px) {
  :where(body[data-page=legal]) .lg-hero { min-height: 0; }
  :where(body[data-page=legal]) .lg-hero-inner { padding-block: 30px 44px; }
  :where(body[data-page=legal]) .lg-hero .eyebrow { font-size: 11px; }
  :where(body[data-page=legal]) .lg-hero-title { font-size: 38px; }
  :where(body[data-page=legal]) .lg-tap-hint { display: none; }
  :where(body[data-page=legal]) .lg-hero-text { font-size: 15px; }
  :where(body[data-page=legal]) .lg-meta li, :where(body[data-page=legal]) .lg-print { font-size: 12.5px; padding: 6px 12px; }
  :where(body[data-page=legal]) .lg-more-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  :where(body[data-page=legal]) .lg-more-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; padding: 16px; border-radius: 12px; }
  :where(body[data-page=legal]) .lg-more-ico { grid-row: span 3; width: 44px; margin: 0; border-radius: 12px; font-size: 17px; }
  :where(body[data-page=legal]) .lg-more-card b { font-size: 16px; }
  :where(body[data-page=legal]) .lg-more-go { padding-top: 4px; }
  :where(body[data-page=legal]) .lg-intro { padding: 16px; font-size: 15px; }
  :where(body[data-page=legal]) .lg-glance { gap: 10px; }
  :where(body[data-page=legal]) .lg-glance li { padding: 14px; border-radius: 12px; }
  :where(body[data-page=legal]) .lg-glance i { width: 36px; border-radius: 10px; font-size: 15px; }
  :where(body[data-page=legal]) .lg-glance b { font-size: 14.5px; margin-top: 10px; }
  :where(body[data-page=legal]) .lg-sec { margin-top: 26px; padding-top: 22px; scroll-margin-top: 130px; }
  :where(body[data-page=legal]) .lg-h { font-size: 21px; }
  :where(body[data-page=legal]) .lg-num { min-width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
  :where(body[data-page=legal]) .lg-link-ico { opacity: .5; transform: none; }
  :where(body[data-page=legal]) .lg-body { font-size: 15px; }
  :where(body[data-page=legal]) .lg-body h3 { font-size: 16px; }
  :where(body[data-page=legal]) .lg-body ul li { padding-left: 20px; }
  :where(body[data-page=legal]) .lg-body ol li { padding-left: 34px; }
  :where(body[data-page=legal]) .lg-note { padding: 14px; gap: 12px; border-radius: 12px; }
  :where(body[data-page=legal]) .lg-split, :where(body[data-page=legal]) .lg-contact { grid-template-columns: 1fr; gap: 10px; }
  :where(body[data-page=legal]) .lg-split > div, :where(body[data-page=legal]) .lg-contact a, :where(body[data-page=legal]) .lg-contact div { padding: 14px; border-radius: 12px; }
  :where(body[data-page=legal]) .lg-split h4 { font-size: 15px; }
  :where(body[data-page=legal]) .lg-table { font-size: 14px; }
  :where(body[data-page=legal]) .lg-table th, :where(body[data-page=legal]) .lg-table td { padding: 10px 12px; }
  :where(body[data-page=legal]) .lg-cta { padding: 28px 18px; border-radius: 16px; gap: 18px; }
  :where(body[data-page=legal]) .lg-cta .eyebrow { font-size: 11px; }
  :where(body[data-page=legal]) .lg-cta h2 { font-size: 23px; }
  :where(body[data-page=legal]) .lg-cta p { font-size: 14.5px; }
  :where(body[data-page=legal]) .lg-cta-btns { width: 100%; }
  :where(body[data-page=legal]) .lg-cta-btns .btn { flex: 1 1 100%; height: 48px; font-size: 15px; }
}

@media (max-width: 420px) {
  :where(body[data-page=legal]) .lg-hero-title { font-size: 33px; }
  :where(body[data-page=legal]) .lg-glance { grid-template-columns: 1fr; }
}

/* ==========================================================
   PRINT – just the policy text
   ========================================================== */
@media print {
  :where(body[data-page=legal]) .site-header, :where(body[data-page=legal]) .site-footer, :where(body[data-page=legal]) .float-contact, :where(body[data-page=legal]) .cart-drawer-wrap, :where(body[data-page=legal]) .lg-art, :where(body[data-page=legal]) .lg-more, :where(body[data-page=legal]) .lg-side, :where(body[data-page=legal]) .lg-cta, :where(body[data-page=legal]) .lg-meta .lg-print-li, :where(body[data-page=legal]) .lg-end, :where(body[data-page=legal]) .lg-tap-hint, :where(body[data-page=legal]) .lg-link-ico, :where(body[data-page=legal]) .lg-crumb { display: none !important; }
  :where(body[data-page=legal]) .lg-hero { min-height: 0; background: none; color: #0b1f5c; }
  :where(body[data-page=legal]) .lg-hero::before, :where(body[data-page=legal]) .lg-hero::after { display: none; }
  :where(body[data-page=legal]) .lg-hero .eyebrow, :where(body[data-page=legal]) .lg-hero-title .l1 { color: #0b1f5c; }
  :where(body[data-page=legal]) .lg-hero-text { color: #1c2a44; }
  :where(body[data-page=legal]) .lg-meta li { color: var(--navy-2); background: none; border-color: #dde7f3; backdrop-filter: none; }
  :where(body[data-page=legal]) .lg-meta i { color: var(--c); }
  :where(body[data-page=legal]) .lg-hero-title .l2, :where(body[data-page=legal]) .lg-hero-title.split .l2 .lg-ch { color: #0b1f5c; background: none; -webkit-text-fill-color: #0b1f5c; }
  :where(body[data-page=legal]) .lg-main { display: block; padding: 0; }
  :where(body[data-page=legal]) .lg-glance li, :where(body[data-page=legal]) .lg-sec { break-inside: avoid; }
  :where(body[data-page=legal]) .lg-body a { text-decoration: none; }
  :where(body[data-page=legal]) * { animation: none !important; }
}

/* ##########################################################
   PAGE: testimonials  ·  scope body[data-page="testimonials"]
   ########################################################## */
/* ==========================================================
   MMatrics Pharmaceuticals – Testimonials page (testimonials.html)
   Follows the base section and uses the same design unit (--u)
   and tokens. Review cards are rendered by testimonials.js
   from its review data.
   ========================================================== */

@keyframes tmSpin { to { transform: rotate(360deg); } }
@keyframes tmPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
@keyframes tmShake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }

:where(body[data-page=testimonials]) .g-logo { width: 1em; height: 1em; flex-shrink: 0; display: inline-block; vertical-align: -.125em; }
:where(body[data-page=testimonials]) .tm-stars { display: inline-flex; gap: .16em; color: #f5a623; }
:where(body[data-page=testimonials]) .tm-stars .off { color: #dfe3ea; }

/* shared section head */
:where(body[data-page=testimonials]) .tm-head { text-align: center; max-width: calc(440 * var(--u)); margin-inline: auto; }
:where(body[data-page=testimonials]) .tm-head .sec-title { margin-top: calc(3 * var(--u)); }
:where(body[data-page=testimonials]) .tm-head p { margin-top: calc(5 * var(--u)); font-size: calc(8.8 * var(--f)); line-height: 1.55; color: var(--muted); }

/* ==========================================================
   HERO
   ========================================================== */
:where(body[data-page=testimonials]) .tm-hero {
  position: relative; overflow: hidden; isolation: isolate; min-height: calc(210 * var(--u)); display: flex; align-items: center;
  background: linear-gradient(118deg, #fff1e6 0%, #fff8f3 30%, #fdf3f8 62%, #eef3fd 100%);
}
:where(body[data-page=testimonials]) .tm-hero::before {                                    /* soft glows */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 76% 48%, rgba(255,255,255,.95) 0, rgba(255,255,255,0) calc(110 * var(--u))),
    radial-gradient(circle at 96% 6%, rgba(242,77,130,.14) 0, rgba(242,77,130,0) calc(90 * var(--u))),
    radial-gradient(circle at 4% 96%, rgba(245,166,35,.16) 0, rgba(245,166,35,0) calc(100 * var(--u)));
}
:where(body[data-page=testimonials]) .tm-hero::after {                                     /* dot grid */
  content: ""; position: absolute; left: calc(14 * var(--u)); top: calc(16 * var(--u)); width: calc(60 * var(--u)); height: calc(46 * var(--u));
  z-index: -1; opacity: .5; pointer-events: none;
  background: radial-gradient(#f2a9c2 1.2px, transparent 1.6px) 0 0 / calc(8 * var(--u)) calc(8 * var(--u));
}
:where(body[data-page=testimonials]) .tm-hero-inner { padding-block: calc(24 * var(--u)); padding-left: calc(51 * var(--u)); }
:where(body[data-page=testimonials]) .tm-hero-inner > * { animation: fadeUp .8s var(--ease) both; max-width: calc(320 * var(--u)); }
:where(body[data-page=testimonials]) .tm-hero-inner > :nth-child(2) { animation-delay: .08s; }
:where(body[data-page=testimonials]) .tm-hero-inner > :nth-child(3) { animation-delay: .16s; }
:where(body[data-page=testimonials]) .tm-hero-inner > :nth-child(4) { animation-delay: .24s; }
:where(body[data-page=testimonials]) .tm-hero-inner > :nth-child(5) { animation-delay: .32s; }
:where(body[data-page=testimonials]) .tm-hero .eyebrow { color: #e8437a; font-size: max(12px, calc(6.8 * var(--f))); letter-spacing: .36em; }
:where(body[data-page=testimonials]) .tm-hero-title { margin-top: calc(5 * var(--u)); font-weight: 800; font-size: calc(30 * var(--f)); line-height: 1.08; letter-spacing: -.035em; }
:where(body[data-page=testimonials]) .tm-hero-title span { display: block; width: max-content; max-width: 100%; }
:where(body[data-page=testimonials]) .tm-hero-title .l1 { color: #0b1f5c; }
:where(body[data-page=testimonials]) .tm-hero-title .l2 {
  background: linear-gradient(90deg, #e8437a, #f08a3c 50%, #e8437a); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 6s ease-in-out infinite;
}
:where(body[data-page=testimonials]) .tm-hero-text { margin-top: calc(7 * var(--u)); font-size: calc(9.8 * var(--f)); line-height: 1.5; color: #1c2a44; font-weight: 500; }

/* score chips */
:where(body[data-page=testimonials]) .tm-hero-scores { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
:where(body[data-page=testimonials]) .tm-score-chip {
  display: flex; align-items: center; gap: calc(7 * var(--u));
  padding: calc(5 * var(--u)) calc(14 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u));
  background: #fff; border: 1px solid #f1e4ea; border-radius: 99px;
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(16,42,92,.07);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
:where(body[data-page=testimonials]) .tm-score-chip:hover { transform: translateY(-3px); border-color: #f7a6c3; box-shadow: var(--shadow-md); }
:where(body[data-page=testimonials]) .tm-score-ico {
  width: calc(24 * var(--u)); min-width: 38px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: #f4f7fb; font-size: max(17px, calc(11 * var(--f)));
}
:where(body[data-page=testimonials]) .tm-score-ico--site { background: linear-gradient(135deg, #0a96a3, #1a6fd6); color: #fff; font-size: max(15px, calc(9.5 * var(--f))); }
:where(body[data-page=testimonials]) .tm-score-chip b { font-size: max(17px, calc(11 * var(--f))); font-weight: 800; color: var(--navy); line-height: 1; }
:where(body[data-page=testimonials]) .tm-score-chip .tm-stars { font-size: max(11px, calc(6.8 * var(--f))); margin-left: 2px; }
:where(body[data-page=testimonials]) .tm-score-chip small { display: block; font-size: max(11.5px, calc(6.8 * var(--f))); color: var(--muted); font-weight: 600; line-height: 1.4; }
:where(body[data-page=testimonials]) .tm-hero-btns { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }

/* illustration: rating core, orbiting reviewers, floating bubbles */
:where(body[data-page=testimonials]) .tm-art { position: absolute; right: calc(52 * var(--u)); top: 50%; translate: 0 -50%; width: calc(250 * var(--u)); height: calc(196 * var(--u)); pointer-events: none; animation: fadeUp 1s var(--ease) .2s both; }
:where(body[data-page=testimonials]) .tm-art-orbit {
  position: absolute; left: calc(42 * var(--u)); top: calc(10 * var(--u)); width: calc(176 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px dashed rgba(232,67,122,.32); animation: tmSpin 40s linear infinite;
}
:where(body[data-page=testimonials]) .tm-orb {
  position: absolute; width: calc(30 * var(--u)); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  animation: tmSpin 40s linear infinite reverse;       /* counter-spin keeps the faces upright */
}
:where(body[data-page=testimonials]) .tm-orb img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(16,42,92,.2); }
:where(body[data-page=testimonials]) .tm-orb--1 { left: 50%; top: 0; }
:where(body[data-page=testimonials]) .tm-orb--2 { left: 93.3%; top: 75%; }
:where(body[data-page=testimonials]) .tm-orb--3 { left: 6.7%; top: 75%; }
:where(body[data-page=testimonials]) .tm-orb--heart, :where(body[data-page=testimonials]) .tm-orb--g { width: calc(17 * var(--u)); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(16,42,92,.16); }
:where(body[data-page=testimonials]) .tm-orb--heart { left: 93.3%; top: 25%; background: #f24d82; color: #fff; font-size: calc(7.5 * var(--f)); }
:where(body[data-page=testimonials]) .tm-orb--g { left: 6.7%; top: 25%; background: #fff; font-size: calc(9 * var(--f)); }
:where(body[data-page=testimonials]) .tm-art-core {
  position: absolute; left: calc(76 * var(--u)); top: calc(44 * var(--u)); width: calc(108 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #ffeef4 55%, #fdd7e5 100%);
  box-shadow: inset 0 calc(-8 * var(--u)) calc(20 * var(--u)) rgba(232,67,122,.12), 0 calc(16 * var(--u)) calc(36 * var(--u)) rgba(232,67,122,.2);
}
:where(body[data-page=testimonials]) .tm-art-core::before, :where(body[data-page=testimonials]) .tm-art-core::after {           /* pulse rings */
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(242,77,130,.35);
  animation: tmPulse 3s ease-out infinite;
}
:where(body[data-page=testimonials]) .tm-art-core::after { animation-delay: 1.5s; }
:where(body[data-page=testimonials]) .tm-art-core b {
  font-size: calc(38 * var(--f)); font-weight: 800; line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(160deg, #e8437a, #0b2a66); -webkit-background-clip: text; background-clip: text; color: transparent;
}
:where(body[data-page=testimonials]) .tm-art-core .tm-stars { margin-top: calc(4 * var(--u)); font-size: calc(7.6 * var(--f)); }
:where(body[data-page=testimonials]) .tm-art-core small { margin-top: calc(3 * var(--u)); font-size: max(10px, calc(5.6 * var(--f))); font-weight: 800; color: #6b7488; letter-spacing: .16em; text-transform: uppercase; }
:where(body[data-page=testimonials]) .tm-bubble {
  position: absolute; display: flex; align-items: center; gap: calc(6 * var(--u)); white-space: nowrap;
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  background: #fff; border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(3 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(16,42,92,.12);
  font-size: max(11px, calc(7 * var(--f))); font-weight: 700; color: #0b1f4f;
  animation: floatY 4s ease-in-out infinite;
}
:where(body[data-page=testimonials]) .tm-bubble--1 { left: calc(-34 * var(--u)); top: calc(20 * var(--u)); flex-direction: column; align-items: flex-start; gap: calc(2 * var(--u)); }
:where(body[data-page=testimonials]) .tm-bubble--1 .tm-stars { font-size: .82em; }
:where(body[data-page=testimonials]) .tm-bubble--2 { right: calc(-14 * var(--u)); top: calc(94 * var(--u)); border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(3 * var(--u)) calc(12 * var(--u)); animation-delay: -1.5s; }
:where(body[data-page=testimonials]) .tm-bubble--2 .g-logo { font-size: calc(13 * var(--f)); }
:where(body[data-page=testimonials]) .tm-bubble--2 b, :where(body[data-page=testimonials]) .tm-bubble--2 small { display: block; line-height: 1.25; }
:where(body[data-page=testimonials]) .tm-bubble--2 small { color: var(--muted); font-weight: 600; }
:where(body[data-page=testimonials]) .tm-bubble--3 { left: calc(-4 * var(--u)); bottom: calc(4 * var(--u)); animation-delay: -3s; }
:where(body[data-page=testimonials]) .tm-bubble--3 i { color: #12a150; }
:where(body[data-page=testimonials]) .tm-art-q { position: absolute; right: calc(34 * var(--u)); top: calc(-4 * var(--u)); font-size: calc(24 * var(--f)); color: rgba(242,77,130,.28); transform: rotate(-10deg); animation: floatY 5s ease-in-out -1s infinite; }
:where(body[data-page=testimonials]) .tm-art-leaf { position: absolute; right: calc(4 * var(--u)); bottom: calc(26 * var(--u)); font-size: calc(18 * var(--f)); color: #3fa34d; transform: rotate(-25deg); animation: floatY 4.4s ease-in-out infinite; }

/* ==========================================================
   RATINGS OVERVIEW
   ========================================================== */
:where(body[data-page=testimonials]) .tm-rate-grid { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: calc(12 * var(--u)); margin-top: calc(14 * var(--u)); padding-inline: calc(9 * var(--u)); }
:where(body[data-page=testimonials]) .tm-rate {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: calc(11 * var(--u));
  padding: calc(15 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); border-radius: calc(10 * var(--u));
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
:where(body[data-page=testimonials]) .tm-rate::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; }
:where(body[data-page=testimonials]) .tm-rate--google::before { background: linear-gradient(90deg, #4285f4 0 25%, #ea4335 25% 50%, #fbbc05 50% 75%, #34a853 75%); }
:where(body[data-page=testimonials]) .tm-rate--site::before { background: linear-gradient(90deg, #0a96a3, #1a6fd6, #f24d82); }
:where(body[data-page=testimonials]) .tm-rate:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
:where(body[data-page=testimonials]) .tm-rate-head { display: flex; align-items: center; gap: calc(8 * var(--u)); }
:where(body[data-page=testimonials]) .tm-rate-logo {
  width: calc(26 * var(--u)); min-width: 40px; aspect-ratio: 1; border-radius: calc(7 * var(--u)); display: grid; place-items: center;
  background: #f4f7fb; font-size: max(18px, calc(12 * var(--f)));
}
:where(body[data-page=testimonials]) .tm-rate--site .tm-rate-logo { background: linear-gradient(135deg, #0a96a3, #1a6fd6); color: #fff; font-size: max(16px, calc(10 * var(--f))); }
:where(body[data-page=testimonials]) .tm-rate-head h3 { font-size: calc(10.5 * var(--f)); font-weight: 800; color: var(--navy); line-height: 1.3; }
:where(body[data-page=testimonials]) .tm-rate-head small { display: block; font-size: max(12px, calc(7.2 * var(--f))); color: var(--muted); }
:where(body[data-page=testimonials]) .tm-rate-body { display: grid; grid-template-columns: auto 1fr; gap: calc(14 * var(--u)); align-items: center; }
:where(body[data-page=testimonials]) .tm-rate-score { text-align: center; padding-right: calc(14 * var(--u)); border-right: 1px dashed #dfe6f0; }
:where(body[data-page=testimonials]) .tm-rate-score b { display: block; font-size: calc(30 * var(--f)); font-weight: 800; color: var(--navy); line-height: 1; letter-spacing: -.03em; }
:where(body[data-page=testimonials]) .tm-rate-score .tm-stars { margin-top: calc(4 * var(--u)); font-size: max(11px, calc(7.4 * var(--f))); }
:where(body[data-page=testimonials]) .tm-rate-score small { display: block; margin-top: calc(3 * var(--u)); font-size: max(11.5px, calc(7 * var(--f))); color: var(--muted); white-space: nowrap; }
:where(body[data-page=testimonials]) .tm-bars li {
  display: grid; grid-template-columns: 2.2em 1fr 2.4em; align-items: center; gap: calc(5 * var(--u));
  font-size: max(12px, calc(7.2 * var(--f))); font-weight: 700; color: #3a4560;
}
:where(body[data-page=testimonials]) .tm-bars li + li { margin-top: calc(3.5 * var(--u)); }
:where(body[data-page=testimonials]) .tm-bars li > span:first-child i { color: #f5a623; font-size: .8em; }
:where(body[data-page=testimonials]) .tm-bar { height: calc(5 * var(--u)); min-height: 6px; border-radius: 99px; background: #eef2f7; overflow: hidden; }
:where(body[data-page=testimonials]) .tm-bar i {
  display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #f5a623, #f7c04a);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease);
}
:where(body[data-page=testimonials]) .tm-rate.in .tm-bar i { transform: scaleX(1); }
:where(body[data-page=testimonials]) .tm-bars li:nth-child(2) .tm-bar i { transition-delay: .1s; }
:where(body[data-page=testimonials]) .tm-bars li:nth-child(3) .tm-bar i { transition-delay: .2s; }
:where(body[data-page=testimonials]) .tm-bars li:nth-child(4) .tm-bar i { transition-delay: .3s; }
:where(body[data-page=testimonials]) .tm-bars li:nth-child(5) .tm-bar i { transition-delay: .4s; }
:where(body[data-page=testimonials]) .tm-bar-n { text-align: right; color: var(--muted); font-weight: 600; }
:where(body[data-page=testimonials]) .tm-rate > .btn { margin-top: auto; width: 100%; }
:where(body[data-page=testimonials]) .tm-btn-google { background: #fff; color: #1f2a44; border: 1.5px solid #dadce0; }
:where(body[data-page=testimonials]) .tm-btn-google:hover { border-color: #4285f4; color: #1a56c9; }
:where(body[data-page=testimonials]) .tm-btn-google .g-logo { font-size: 1.15em; }

/* stats */
:where(body[data-page=testimonials]) .tm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); }
:where(body[data-page=testimonials]) .tm-stat {
  display: flex; flex-direction: column; justify-content: center; gap: calc(1 * var(--u));
  padding: calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--s-bg);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
:where(body[data-page=testimonials]) .tm-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
:where(body[data-page=testimonials]) .tm-stat-ico {
  width: calc(20 * var(--u)); min-width: 32px; aspect-ratio: 1; margin-bottom: calc(4 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--s); font-size: max(13px, calc(8.4 * var(--f)));
  box-shadow: 0 4px 10px rgba(16,42,92,.08); transition: transform .5s var(--ease);
}
:where(body[data-page=testimonials]) .tm-stat:hover .tm-stat-ico { transform: rotate(-12deg) scale(1.1); }
:where(body[data-page=testimonials]) .tm-stat b { font-size: calc(16 * var(--f)); font-weight: 800; color: var(--navy); line-height: 1.1; }
:where(body[data-page=testimonials]) .tm-stat small { font-size: max(12px, calc(7.2 * var(--f))); color: #4a5670; font-weight: 600; line-height: 1.35; }
:where(body[data-page=testimonials]) .tm-stat--pink   { --s: #e8437a; --s-bg: #fde9f0; }
:where(body[data-page=testimonials]) .tm-stat--blue   { --s: #1a6fd6; --s-bg: #e8f1fd; }
:where(body[data-page=testimonials]) .tm-stat--teal   { --s: #0a96a3; --s-bg: #e2f5f6; }
:where(body[data-page=testimonials]) .tm-stat--orange { --s: #f06a22; --s-bg: #fff0e6; }

/* ==========================================================
   STORY SPOTLIGHT
   ========================================================== */
:where(body[data-page=testimonials]) .tm-spot-card {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: calc(210 * var(--u)) 1fr; gap: calc(30 * var(--u)); align-items: center;
  margin: calc(14 * var(--u)) calc(9 * var(--u)) 0; padding: calc(20 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u));
  border-radius: calc(14 * var(--u)); border: 1px solid #f3e6ec;
  background: linear-gradient(120deg, #fff6f0, #fff 45%, #f1f6fe); box-shadow: var(--shadow-sm);
}
:where(body[data-page=testimonials]) .tm-spot-card::before {                               /* oversized closing quote */
  content: "\201D"; position: absolute; z-index: -1; right: calc(14 * var(--u)); top: calc(-46 * var(--u));
  font: 800 calc(230 * var(--f)) / 1 Georgia, 'Times New Roman', serif; color: rgba(242,77,130,.07); pointer-events: none;
}
:where(body[data-page=testimonials]) .tm-spot-media { position: relative; aspect-ratio: 1 / 1.04; }
:where(body[data-page=testimonials]) .tm-spot-blob {
  position: absolute; inset: 0 4% 6% 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--u));
  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; color: #fff;
  background: linear-gradient(135deg, #f24d82, #f7a46b);
  box-shadow: inset 0 calc(-10 * var(--u)) calc(30 * var(--u)) rgba(150,20,70,.18), 0 calc(16 * var(--u)) calc(36 * var(--u)) rgba(242,77,130,.25);
  animation: tmBlob 10s ease-in-out infinite;
}
:where(body[data-page=testimonials]) .tm-spot-blob::before {                               /* inner ring */
  content: ""; position: absolute; inset: 9%; border-radius: inherit; border: 1.5px dashed rgba(255,255,255,.45);
}
:where(body[data-page=testimonials]) .tm-spot-mark { font-size: calc(54 * var(--f)); opacity: .95; filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(120,10,50,.2)); margin-top: -12%; }
:where(body[data-page=testimonials]) .tm-spot-blob .tm-stars { color: #fff; font-size: calc(9 * var(--f)); gap: .3em; }
@keyframes tmBlob { 50% { border-radius: 58% 42% 45% 55% / 42% 58% 42% 58%; } }
/* the reviewer photo sits as an inset avatar – the source images are small, so they stay small */
:where(body[data-page=testimonials]) .tm-spot-imgs {
  position: absolute; right: 0; bottom: 0; width: 34%; aspect-ratio: 1; overflow: hidden; border-radius: 50%;
  border: 4px solid #fff; background: #fff; box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(16,42,92,.22);
}
:where(body[data-page=testimonials]) .tm-spot-imgs img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08); transition: opacity .8s, transform 1.2s var(--ease);
}
:where(body[data-page=testimonials]) .tm-spot-imgs img.active { opacity: 1; transform: none; }
:where(body[data-page=testimonials]) .tm-spot-badge {
  position: absolute; left: calc(-8 * var(--u)); bottom: calc(18 * var(--u)); display: flex; align-items: center; gap: calc(5 * var(--u));
  padding: calc(5 * var(--u)) calc(11 * var(--u)); border-radius: 99px; background: #fff; box-shadow: var(--shadow-md);
  font-size: max(12px, calc(7.2 * var(--f))); font-weight: 700; color: #0b1f4f; animation: floatY 4s ease-in-out infinite;
}
:where(body[data-page=testimonials]) .tm-spot-badge i { color: #12a150; }
:where(body[data-page=testimonials]) .tm-spot-q { font-size: calc(20 * var(--f)); color: #f24d82; }
:where(body[data-page=testimonials]) .tm-stories { display: grid; margin-top: calc(6 * var(--u)); }
:where(body[data-page=testimonials]) .tm-story {
  grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .6s, transform .7s var(--ease), visibility .6s;
}
:where(body[data-page=testimonials]) .tm-story.active { opacity: 1; visibility: visible; transform: none; }
:where(body[data-page=testimonials]) .tm-story blockquote { margin: 0; font-size: calc(12.6 * var(--f)); line-height: 1.55; font-weight: 600; color: #1c2a44; letter-spacing: -.005em; }
:where(body[data-page=testimonials]) .tm-story mark { background: linear-gradient(transparent 58%, #ffd6e4 58%); color: inherit; padding: 0 .1em; }
:where(body[data-page=testimonials]) .tm-story figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: calc(5 * var(--u)) calc(12 * var(--u)); margin-top: calc(11 * var(--u)); }
:where(body[data-page=testimonials]) .tm-story-who b { display: block; font-size: calc(10.4 * var(--f)); color: var(--navy); }
:where(body[data-page=testimonials]) .tm-story-who small { display: block; font-size: max(12px, calc(7.4 * var(--f))); color: var(--muted); }
:where(body[data-page=testimonials]) .tm-story-prod {
  display: inline-flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(3 * var(--u)) calc(10 * var(--u)); border-radius: 99px;
  background: #e2f5f6; color: #067d88; font-size: max(12px, calc(7.2 * var(--f))); font-weight: 700; transition: background-color .3s, color .3s;
}
:where(body[data-page=testimonials]) .tm-story-prod:hover { background: #0a96a3; color: #fff; }
:where(body[data-page=testimonials]) .tm-spot-nav { display: flex; align-items: center; gap: calc(9 * var(--u)); margin-top: calc(16 * var(--u)); }
:where(body[data-page=testimonials]) .tm-spot-dot {
  position: relative; width: calc(26 * var(--u)); min-width: 42px; aspect-ratio: 1; padding: 4px; border-radius: 50%;
  opacity: .55; filter: grayscale(.7); transition: opacity .35s, filter .35s, transform .45s var(--ease);
}
:where(body[data-page=testimonials]) .tm-spot-dot:hover { opacity: .85; filter: none; }
:where(body[data-page=testimonials]) .tm-spot-dot.active { opacity: 1; filter: none; transform: scale(1.08); }
:where(body[data-page=testimonials]) .tm-spot-dot img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
:where(body[data-page=testimonials]) .tm-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
:where(body[data-page=testimonials]) .tm-ring circle { fill: none; stroke: #f24d82; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 116.3; stroke-dashoffset: 116.3; }
/* the ring fills over one slide; testimonials.js advances on its animationend */
:where(body[data-page=testimonials]) .tm-spot-dot.active .tm-ring circle { animation: tmRing 7s linear forwards; }
:where(body[data-page=testimonials]) .tm-spot-card:hover .tm-ring circle, :where(body[data-page=testimonials]) .tm-spot-card:focus-within .tm-ring circle { animation-play-state: paused; }
@keyframes tmRing { to { stroke-dashoffset: 0; } }
:where(body[data-page=testimonials]) .tm-spot-arrows { display: flex; gap: calc(6 * var(--u)); margin-left: auto; }
:where(body[data-page=testimonials]) .tm-spot-arrows button {
  width: calc(22 * var(--u)); min-width: 38px; aspect-ratio: 1; border-radius: 50%; background: #fff; color: #0b2458;
  border: 1px solid #e3e9f2; font-size: max(13px, calc(7.6 * var(--f))); transition: .3s var(--ease);
}
:where(body[data-page=testimonials]) .tm-spot-arrows button:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; transform: scale(1.08); }

/* ==========================================================
   WALL OF LOVE
   ========================================================== */
:where(body[data-page=testimonials]) .tm-wall { position: relative; padding: calc(var(--sec-gap) * .8) 0; background: linear-gradient(180deg, #fff, #fbf6fa 30%, #f4f8fd 100%); }
:where(body[data-page=testimonials]) .tm-decor { right: 0; top: calc(20 * var(--u)); width: calc(40 * var(--u)); }
:where(body[data-page=testimonials]) .tm-wall .container { position: relative; z-index: 1; }
:where(body[data-page=testimonials]) .tm-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); padding-inline: calc(9 * var(--u)); }
:where(body[data-page=testimonials]) .tm-tabs { position: relative; display: flex; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 99px; box-shadow: var(--shadow-sm); }
:where(body[data-page=testimonials]) .tm-glider {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, #062e6f, #0b5bc0); box-shadow: 0 6px 14px rgba(6,46,111,.25);
  transition: transform .5s var(--ease), width .5s var(--ease);
}
:where(body[data-page=testimonials]) .tm-tab {
  position: relative; display: flex; align-items: center; gap: calc(5 * var(--u)); white-space: nowrap;
  min-height: 40px; padding: calc(5 * var(--u)) calc(12 * var(--u)); border-radius: 99px;
  font-size: max(13px, calc(7.8 * var(--f))); font-weight: 700; color: #4a5670; transition: color .35s;
}
:where(body[data-page=testimonials]) .tm-tab:hover { color: var(--navy); }
:where(body[data-page=testimonials]) .tm-tab.active { color: #fff; }
:where(body[data-page=testimonials]) .tm-tab > i { color: #e8437a; transition: color .35s; }
:where(body[data-page=testimonials]) .tm-tab[data-src="site"] > i { color: #0a96a3; }
:where(body[data-page=testimonials]) .tm-tab.active > i { color: #fff; }
:where(body[data-page=testimonials]) .tm-tab .g-logo { width: 1.45em; height: 1.45em; padding: 2px; border-radius: 50%; background: #fff; }
:where(body[data-page=testimonials]) .tm-tab .n { min-width: 2em; padding: 0 .5em; border-radius: 99px; background: #eef2f7; color: #4a5670; font-size: .82em; line-height: 1.75; text-align: center; transition: background-color .35s, color .35s; }
:where(body[data-page=testimonials]) .tm-tab.active .n { background: rgba(255,255,255,.22); color: #fff; }
:where(body[data-page=testimonials]) .tm-controls { display: flex; gap: calc(6 * var(--u)); }
:where(body[data-page=testimonials]) .tm-select { position: relative; }
:where(body[data-page=testimonials]) .tm-select::after {
  content: ""; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--ico-caret) center / contain no-repeat; mask: var(--ico-caret) center / contain no-repeat; position: absolute; right: 14px; top: 50%; translate: 0 -50%;
  color: #6b7a96; pointer-events: none;
}
:where(body[data-page=testimonials]) .tm-select select {
  appearance: none; -webkit-appearance: none; height: calc(24 * var(--u)); min-height: 42px; padding: 0 34px 0 calc(12 * var(--u));
  border: 1px solid var(--line); border-radius: 99px; background: #fff; box-shadow: var(--shadow-sm);
  font: inherit; font-size: max(13px, calc(7.6 * var(--f))); font-weight: 600; color: var(--text); cursor: pointer; transition: border-color .3s;
}
:where(body[data-page=testimonials]) .tm-select select:hover, :where(body[data-page=testimonials]) .tm-select select:focus-visible { border-color: #1a6fd6; outline: 0; }
:where(body[data-page=testimonials]) .tm-status { margin-top: calc(8 * var(--u)); padding-inline: calc(9 * var(--u)); font-size: max(13px, calc(7.6 * var(--f))); color: var(--muted); }
:where(body[data-page=testimonials]) .tm-status b { color: var(--navy); }

/* masonry: testimonials.js deals cards into the shortest column */
:where(body[data-page=testimonials]) .tm-grid { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); margin-top: calc(6 * var(--u)); padding-inline: calc(9 * var(--u)); }
:where(body[data-page=testimonials]) .tm-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(12 * var(--u)); }

:where(body[data-page=testimonials]) .tm-card {
  position: relative; overflow: hidden; padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u));
  background: #fff; border: 1px solid #edf1f6; box-shadow: 0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(16,42,92,.06);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
  animation: tmCardIn .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms);
}
:where(body[data-page=testimonials]) .tm-grid.no-anim .tm-card { animation: none; }
@keyframes tmCardIn { from { opacity: 0; transform: translateY(24px) scale(.98); } }
:where(body[data-page=testimonials]) .tm-card::after {                                     /* brand line grows in on hover */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
:where(body[data-page=testimonials]) .tm-card--google::after { background: linear-gradient(90deg, #4285f4 0 25%, #ea4335 25% 50%, #fbbc05 50% 75%, #34a853 75%); }
:where(body[data-page=testimonials]) .tm-card--site::after { background: linear-gradient(90deg, #0a96a3, #1a6fd6, #f24d82); }
:where(body[data-page=testimonials]) .tm-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
:where(body[data-page=testimonials]) .tm-card:hover::after { transform: scaleX(1); }
:where(body[data-page=testimonials]) .tm-card--google:hover { border-color: #d2e3fc; }
:where(body[data-page=testimonials]) .tm-card--site:hover { border-color: #fbd3e1; }
:where(body[data-page=testimonials]) .tm-card--mine { border: 1.5px dashed #f7a6c3; background: linear-gradient(180deg, #fff7fa, #fff 40%); }

:where(body[data-page=testimonials]) .tm-card-head { display: flex; align-items: center; gap: calc(7 * var(--u)); }
:where(body[data-page=testimonials]) .tm-av {
  width: calc(22 * var(--u)); min-width: 40px; aspect-ratio: 1; flex-shrink: 0; overflow: hidden; border-radius: 50%;
  display: grid; place-items: center; background: var(--av); color: #fff; font-weight: 800; font-size: max(15px, calc(9 * var(--f)));
}
:where(body[data-page=testimonials]) .tm-av img { width: 100%; height: 100%; object-fit: cover; }
:where(body[data-page=testimonials]) .tm-who { flex: 1; min-width: 0; }
:where(body[data-page=testimonials]) .tm-who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: max(14px, calc(8.6 * var(--f))); color: #0b1f4f; line-height: 1.3; }
:where(body[data-page=testimonials]) .tm-who small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: max(11.5px, calc(6.9 * var(--f))); color: var(--muted); }
:where(body[data-page=testimonials]) .tm-guide { color: #c25e00; font-weight: 700; }
:where(body[data-page=testimonials]) .tm-guide i { font-size: .85em; }
:where(body[data-page=testimonials]) .tm-src {
  width: calc(16 * var(--u)); min-width: 30px; aspect-ratio: 1; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: #f4f7fb; font-size: max(15px, calc(8.6 * var(--f)));
}
:where(body[data-page=testimonials]) .tm-card--site .tm-src { background: #e2f5f6; color: #0a96a3; font-size: max(13px, calc(7.6 * var(--f))); }
:where(body[data-page=testimonials]) .tm-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px calc(6 * var(--u)); margin-top: calc(7 * var(--u)); font-size: max(12px, calc(7 * var(--f))); color: var(--muted); }
:where(body[data-page=testimonials]) .tm-card-meta .tm-stars { font-size: max(12px, calc(7.4 * var(--f))); }
:where(body[data-page=testimonials]) .tm-verified { display: inline-flex; align-items: center; gap: 4px; color: #11a06a; font-weight: 700; }
:where(body[data-page=testimonials]) .tm-pending { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; background: #fff4e0; color: #a85f00; font-weight: 700; }
:where(body[data-page=testimonials]) .tm-text { margin-top: calc(5 * var(--u)); font-size: max(14px, calc(8.2 * var(--f))); line-height: 1.6; color: #3a4560; overflow-wrap: anywhere; }
:where(body[data-page=testimonials]) .tm-text.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
:where(body[data-page=testimonials]) .tm-readmore { margin-top: 4px; font-size: max(13px, calc(7.6 * var(--f))); font-weight: 700; color: var(--blue-link); }
:where(body[data-page=testimonials]) .tm-readmore:hover { text-decoration: underline; }
:where(body[data-page=testimonials]) .tm-prod {
  display: inline-flex; align-items: center; gap: 6px; margin-top: calc(7 * var(--u)); padding: 3px 10px; border-radius: 99px;
  background: #f1f5fb; color: #0b3e8f; font-size: max(12px, calc(7 * var(--f))); font-weight: 700; transition: background-color .3s, color .3s;
}
:where(body[data-page=testimonials]) .tm-prod:hover { background: #0b3e8f; color: #fff; }
:where(body[data-page=testimonials]) .tm-reply {
  margin-top: calc(8 * var(--u)); padding: calc(7 * var(--u)) calc(9 * var(--u)); border-left: 3px solid #4285f4;
  border-radius: 0 calc(6 * var(--u)) calc(6 * var(--u)) 0; background: #f6f9ff;
  font-size: max(13px, calc(7.6 * var(--f))); line-height: 1.55; color: #4a5670;
}
:where(body[data-page=testimonials]) .tm-reply b { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; color: #0b1f4f; font-size: .92em; }
:where(body[data-page=testimonials]) .tm-reply b i { color: #4285f4; }
:where(body[data-page=testimonials]) .tm-card-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: calc(9 * var(--u)); padding-top: calc(7 * var(--u));
  border-top: 1px dashed #e6ecf3; font-size: max(12px, calc(7 * var(--f))); color: var(--muted);
}
:where(body[data-page=testimonials]) .tm-card-foot > span { display: inline-flex; align-items: center; gap: 5px; }
:where(body[data-page=testimonials]) .tm-helpful {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 99px; border: 1px solid #e3e9f2;
  font-size: inherit; font-weight: 700; color: #4a5670; transition: background-color .3s, border-color .3s, color .3s;
}
:where(body[data-page=testimonials]) .tm-helpful:hover { border-color: #1a6fd6; color: #1a6fd6; }
:where(body[data-page=testimonials]) .tm-helpful.on { background: #e8f1fd; border-color: #1a6fd6; color: #1a6fd6; }
:where(body[data-page=testimonials]) .tm-helpful.pop i { animation: bump .4s var(--ease); }

:where(body[data-page=testimonials]) .tm-empty { margin: calc(10 * var(--u)) calc(9 * var(--u)) 0; padding: calc(26 * var(--u)) calc(14 * var(--u)); text-align: center; border-radius: calc(12 * var(--u)); background: #fff; border: 1px dashed #d6e2f0; }
:where(body[data-page=testimonials]) .tm-empty-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff4e0; color: #f5a623; font-size: 22px; }
:where(body[data-page=testimonials]) .tm-empty h3 { margin: 12px 0 14px; font-size: calc(11 * var(--f)); color: var(--navy); }
:where(body[data-page=testimonials]) .tm-more-wrap { display: flex; justify-content: center; margin-top: calc(16 * var(--u)); }
:where(body[data-page=testimonials]) .tm-more-wrap[hidden] { display: none; }

/* ==========================================================
   WRITE A REVIEW
   ========================================================== */
:where(body[data-page=testimonials]) .tm-write-card {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: .92fr 1.08fr; gap: calc(26 * var(--u)); align-items: center;
  margin-inline: calc(9 * var(--u)); padding: calc(22 * var(--u)); border-radius: calc(14 * var(--u)); color: #fff;
  background: linear-gradient(125deg, #062e6f 0%, #0b4fa8 52%, #0a8f9c 100%);
  box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(6,46,111,.22);
}
:where(body[data-page=testimonials]) .tm-write-card::before {                              /* dot grid */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; pointer-events: none;
  background: radial-gradient(#fff 1px, transparent 1.4px) 0 0 / calc(10 * var(--u)) calc(10 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 55%); mask-image: linear-gradient(90deg, #000, transparent 55%);
}
:where(body[data-page=testimonials]) .tm-w-star { position: absolute; z-index: -1; color: rgba(255,255,255,.08); pointer-events: none; line-height: 1; }
:where(body[data-page=testimonials]) .tm-w-star--1 { left: 34%; top: calc(-18 * var(--u)); font-size: calc(80 * var(--f)); transform: rotate(18deg); }
:where(body[data-page=testimonials]) .tm-w-star--2 { left: calc(-14 * var(--u)); bottom: calc(-20 * var(--u)); font-size: calc(110 * var(--f)); transform: rotate(-14deg); }
:where(body[data-page=testimonials]) .tm-w-star--3 { left: 40%; bottom: calc(14 * var(--u)); font-size: calc(26 * var(--f)); color: rgba(242,77,130,.45); animation: floatY 4s ease-in-out infinite; }
:where(body[data-page=testimonials]) .tm-write-intro .eyebrow { color: #ffc2d6; font-size: max(12px, calc(6.8 * var(--f))); }
:where(body[data-page=testimonials]) .tm-write-intro h2 { margin-top: calc(5 * var(--u)); font-size: calc(18 * var(--f)); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
:where(body[data-page=testimonials]) .tm-write-intro > p { margin-top: calc(6 * var(--u)); font-size: calc(8.8 * var(--f)); line-height: 1.55; color: rgba(255,255,255,.85); }
:where(body[data-page=testimonials]) .tm-perks { margin-top: calc(12 * var(--u)); display: grid; gap: calc(6 * var(--u)); }
:where(body[data-page=testimonials]) .tm-perks li { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: max(13.5px, calc(8.2 * var(--f))); font-weight: 600; }
:where(body[data-page=testimonials]) .tm-perks li span {
  width: calc(18 * var(--u)); min-width: 30px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); font-size: .85em;
}
:where(body[data-page=testimonials]) .tm-gbox {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u));
  padding: calc(9 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u));
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
:where(body[data-page=testimonials]) .tm-gbox-ico { width: calc(22 * var(--u)); min-width: 38px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: max(18px, calc(11 * var(--f))); }
:where(body[data-page=testimonials]) .tm-gbox > span:nth-child(2) { flex: 1; min-width: 140px; }
:where(body[data-page=testimonials]) .tm-gbox b { display: block; font-size: max(14px, calc(8.6 * var(--f))); }
:where(body[data-page=testimonials]) .tm-gbox small { display: block; font-size: max(12px, calc(7.2 * var(--f))); color: rgba(255,255,255,.8); }
:where(body[data-page=testimonials]) .tm-gbox-btn { background: #fff; color: #0b2458; height: calc(22 * var(--u)); min-height: 38px; }

/* form */
:where(body[data-page=testimonials]) .tm-form { position: relative; overflow: hidden; padding: calc(16 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; color: var(--text); box-shadow: 0 calc(16 * var(--u)) calc(36 * var(--u)) rgba(0,0,0,.18); }
:where(body[data-page=testimonials]) .tm-pick { margin: 0; padding: 0; border: 0; }
:where(body[data-page=testimonials]) .tm-pick legend { padding: 0; font-size: max(14px, calc(8.6 * var(--f))); font-weight: 800; color: var(--navy); }
:where(body[data-page=testimonials]) .tm-pick-row { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(3 * var(--u)); }
:where(body[data-page=testimonials]) .tm-pick-stars { display: inline-flex; flex-direction: row-reverse; gap: calc(3 * var(--u)); }
:where(body[data-page=testimonials]) .tm-pick-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
:where(body[data-page=testimonials]) .tm-pick-stars label { cursor: pointer; font-size: max(26px, calc(16 * var(--f))); color: #dfe3ea; line-height: 1; transition: color .2s, transform .3s var(--ease); }
/* DOM order is 5→1, shown 1→5: "~ label" reaches the lower stars */
:where(body[data-page=testimonials]) .tm-pick-stars input:checked ~ label { color: #f5a623; }
:where(body[data-page=testimonials]) .tm-pick-stars:hover input ~ label { color: #dfe3ea; }
:where(body[data-page=testimonials]) .tm-pick-stars:hover label:hover, :where(body[data-page=testimonials]) .tm-pick-stars:hover label:hover ~ label { color: #f7b733; }
:where(body[data-page=testimonials]) .tm-pick-stars label:hover { transform: scale(1.18) rotate(-8deg); }
:where(body[data-page=testimonials]) .tm-pick-stars label:active { transform: scale(.85); }
:where(body[data-page=testimonials]) .tm-pick-stars input:focus-visible + label { outline: 2px solid #1a6fd6; outline-offset: 3px; border-radius: 4px; }
:where(body[data-page=testimonials]) .tm-pick-stars input:checked + label { animation: bump .45s var(--ease); }
:where(body[data-page=testimonials]) .tm-pick-word { font-size: max(13px, calc(7.8 * var(--f))); font-weight: 700; color: var(--muted); transition: color .3s; }
:where(body[data-page=testimonials]) .tm-pick-word.on { color: #e88b00; }
:where(body[data-page=testimonials]) .tm-pick.err .tm-pick-stars { animation: tmShake .45s; }
:where(body[data-page=testimonials]) .tm-pick.err .tm-pick-word { color: #d93025; }

:where(body[data-page=testimonials]) .tm-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); }
:where(body[data-page=testimonials]) .tm-field { position: relative; margin-top: calc(9 * var(--u)); }
:where(body[data-page=testimonials]) .tm-field input, :where(body[data-page=testimonials]) .tm-field select, :where(body[data-page=testimonials]) .tm-field textarea {
  width: 100%; height: calc(28 * var(--u)); min-height: 50px; padding: 16px calc(10 * var(--u)) 0;
  border: 1.5px solid #dfe6f0; border-radius: calc(6 * var(--u)); background: #fbfcfe; outline: 0;
  font: inherit; font-size: max(14px, calc(8.2 * var(--f))); color: var(--text);
  transition: border-color .3s, background-color .3s, box-shadow .3s;
}
:where(body[data-page=testimonials]) .tm-field select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; }
:where(body[data-page=testimonials]) .tm-field--select::after { content: ""; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--ico-caret) center / contain no-repeat; mask: var(--ico-caret) center / contain no-repeat; position: absolute; right: 14px; top: 50%; translate: 0 -50%; color: #6b7a96; pointer-events: none; }
:where(body[data-page=testimonials]) .tm-field textarea { height: calc(70 * var(--u)); min-height: 124px; padding-top: 24px; padding-bottom: 22px; resize: vertical; line-height: 1.5; }
:where(body[data-page=testimonials]) .tm-field label {
  position: absolute; left: calc(10 * var(--u)); top: max(25px, calc(14 * var(--u))); translate: 0 -50%;
  font-size: max(14px, calc(8.2 * var(--f))); color: #7a869c; pointer-events: none;
  transition: top .25s var(--ease), font-size .25s var(--ease), color .25s;
}
:where(body[data-page=testimonials]) .tm-field :focus + label, :where(body[data-page=testimonials]) .tm-field input:not(:placeholder-shown) + label, :where(body[data-page=testimonials]) .tm-field textarea:not(:placeholder-shown) + label, :where(body[data-page=testimonials]) .tm-field select + label {
  top: 13px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #1a6fd6;
}
:where(body[data-page=testimonials]) .tm-field select:not(:focus) + label, :where(body[data-page=testimonials]) .tm-field input:not(:focus):not(:placeholder-shown) + label, :where(body[data-page=testimonials]) .tm-field textarea:not(:focus):not(:placeholder-shown) + label { color: #6b7488; }
:where(body[data-page=testimonials]) .tm-field input:focus, :where(body[data-page=testimonials]) .tm-field select:focus, :where(body[data-page=testimonials]) .tm-field textarea:focus { border-color: #1a6fd6; background: #fff; box-shadow: 0 0 0 4px rgba(26,111,214,.1); }
:where(body[data-page=testimonials]) .tm-field.err input, :where(body[data-page=testimonials]) .tm-field.err textarea { border-color: #e5484d; background: #fff8f8; animation: tmShake .45s; }
:where(body[data-page=testimonials]) .tm-field.err label { color: #d93025; }
:where(body[data-page=testimonials]) .tm-count { position: absolute; right: 12px; bottom: 8px; font-size: 11.5px; font-weight: 600; color: #8a95a8; }
:where(body[data-page=testimonials]) .tm-check { display: flex; align-items: flex-start; gap: 9px; margin-top: calc(9 * var(--u)); font-size: max(13px, calc(7.6 * var(--f))); color: #4a5670; cursor: pointer; }
:where(body[data-page=testimonials]) .tm-check input { flex-shrink: 0; width: 17px; height: 17px; margin: 2px 0 0; accent-color: #0b5bc0; }
:where(body[data-page=testimonials]) .tm-check.err { color: #d93025; }
:where(body[data-page=testimonials]) .tm-form-msg { min-height: 0; margin-top: 8px; font-size: 13px; font-weight: 600; color: #d93025; }
:where(body[data-page=testimonials]) .tm-form-msg:empty { display: none; }
:where(body[data-page=testimonials]) .tm-submit { width: 100%; height: calc(28 * var(--u)); min-height: 48px; margin-top: calc(10 * var(--u)); }
:where(body[data-page=testimonials]) .tm-form-note { margin-top: 9px; text-align: center; font-size: max(12px, calc(7 * var(--f))); color: var(--muted); }
:where(body[data-page=testimonials]) .tm-form-note i { margin-right: 4px; color: #11a06a; }

/* success state */
:where(body[data-page=testimonials]) .tm-success {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(16 * var(--u)); background: radial-gradient(circle at 50% 0, #fff3f7, #fff 60%); animation: fadeUp .6s var(--ease) both;
}
:where(body[data-page=testimonials]) .tm-success[hidden] { display: none; }
:where(body[data-page=testimonials]) .tm-success-ico {
  position: relative; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #12a150, #2fc77a); color: #fff; font-size: 28px; box-shadow: 0 12px 26px rgba(18,161,80,.3);
}
:where(body[data-page=testimonials]) .tm-success-ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #2fc77a; animation: tmPulse 1.8s ease-out infinite; }
:where(body[data-page=testimonials]) .tm-success h3 { margin-top: 16px; font-size: calc(13 * var(--f)); font-weight: 800; color: var(--navy); }
:where(body[data-page=testimonials]) .tm-success p { max-width: 360px; margin-top: 6px; font-size: max(13.5px, calc(8 * var(--f))); line-height: 1.55; color: #4a5670; }
:where(body[data-page=testimonials]) .tm-success-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
:where(body[data-page=testimonials]) .tm-btn-wa { background: linear-gradient(90deg, #12a150, #25c26b); color: #fff; }
:where(body[data-page=testimonials]) .tm-again { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--blue-link); }
:where(body[data-page=testimonials]) .tm-again:hover { text-decoration: underline; }
:where(body[data-page=testimonials]) .tm-confetti { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; animation: tmFall var(--d, 1.8s) cubic-bezier(.3,.6,.5,1) forwards; }
@keyframes tmFall { to { transform: translate(var(--x, 0), 520px) rotate(var(--r, 540deg)); opacity: 0; } }

/* ==========================================================
   REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  :where(body[data-page=testimonials]) .tm-art, :where(body[data-page=testimonials]) .tm-art *, :where(body[data-page=testimonials]) .tm-hero-title .l2, :where(body[data-page=testimonials]) .tm-spot-blob, :where(body[data-page=testimonials]) .tm-spot-badge, :where(body[data-page=testimonials]) .tm-w-star, :where(body[data-page=testimonials]) .tm-card, :where(body[data-page=testimonials]) .tm-art-core::before, :where(body[data-page=testimonials]) .tm-art-core::after { animation: none !important; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1099px) {
  :where(body[data-page=testimonials]) .tm-hero-inner { padding-left: var(--gutter); }
  :where(body[data-page=testimonials]) .tm-hero-inner > * { max-width: calc(290 * var(--u)); }
  :where(body[data-page=testimonials]) .tm-art { right: calc(var(--gutter) + 20px); scale: .9; }
  :where(body[data-page=testimonials]) .tm-rate-grid { grid-template-columns: 1fr 1fr; }
  :where(body[data-page=testimonials]) .tm-stats { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  :where(body[data-page=testimonials]) .tm-spot-card { grid-template-columns: calc(170 * var(--u)) 1fr; gap: calc(22 * var(--u)); }
}

@media (max-width: 939px) {
  :where(body[data-page=testimonials]) .tm-art { display: none; }
  :where(body[data-page=testimonials]) .tm-hero-inner > * { max-width: 620px; }
  :where(body[data-page=testimonials]) .tm-spot-card { grid-template-columns: 1fr; padding: 28px 24px; }
  :where(body[data-page=testimonials]) .tm-spot-media { width: min(260px, 70%); margin-inline: auto; }
  :where(body[data-page=testimonials]) .tm-write-card { grid-template-columns: 1fr; }
  :where(body[data-page=testimonials]) .tm-toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }   /* a wrapping column sizes its line to the widest item, not the container */
  :where(body[data-page=testimonials]) .tm-tabs { align-self: center; }
  :where(body[data-page=testimonials]) .tm-controls { justify-content: center; }
}

@media (max-width: 767px) {
  :where(body[data-page=testimonials]) .tm-head p { font-size: 15px; }
  :where(body[data-page=testimonials]) .tm-hero { min-height: 0; }
  :where(body[data-page=testimonials]) .tm-hero-inner { padding-block: 34px 38px; }
  :where(body[data-page=testimonials]) .tm-hero .eyebrow { font-size: 11px; }
  :where(body[data-page=testimonials]) .tm-hero-title { font-size: 34px; }
  :where(body[data-page=testimonials]) .tm-hero-text { font-size: 15px; }
  :where(body[data-page=testimonials]) .tm-hero-scores { gap: 10px; }
  :where(body[data-page=testimonials]) .tm-score-chip { padding-right: 16px; }
  :where(body[data-page=testimonials]) .tm-hero-btns .btn { flex: 1; height: 46px; }

  :where(body[data-page=testimonials]) .tm-rate-grid { grid-template-columns: 1fr; gap: 14px; padding-inline: 0; }
  :where(body[data-page=testimonials]) .tm-rate { padding: 22px 18px 18px; border-radius: 16px; gap: 18px; }
  :where(body[data-page=testimonials]) .tm-rate-head h3 { font-size: 17px; }
  :where(body[data-page=testimonials]) .tm-rate-score b { font-size: 42px; }
  :where(body[data-page=testimonials]) .tm-rate-body { gap: 18px; }
  :where(body[data-page=testimonials]) .tm-rate-score { padding-right: 18px; }
  :where(body[data-page=testimonials]) .tm-bars li + li { margin-top: 7px; }
  :where(body[data-page=testimonials]) .tm-rate > .btn { height: 46px; font-size: 15px; }
  :where(body[data-page=testimonials]) .tm-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  :where(body[data-page=testimonials]) .tm-stat { padding: 16px; border-radius: 14px; }
  :where(body[data-page=testimonials]) .tm-stat b { font-size: 24px; }

  :where(body[data-page=testimonials]) .tm-spot-card { margin-inline: 0; padding: 26px 18px; border-radius: 18px; }
  :where(body[data-page=testimonials]) .tm-spot-q { font-size: 28px; }
  :where(body[data-page=testimonials]) .tm-story blockquote { font-size: 17px; }
  :where(body[data-page=testimonials]) .tm-story-who b { font-size: 16px; }
  :where(body[data-page=testimonials]) .tm-spot-nav { gap: 10px; }

  :where(body[data-page=testimonials]) .tm-toolbar, :where(body[data-page=testimonials]) .tm-status, :where(body[data-page=testimonials]) .tm-grid { padding-inline: 0; }
  :where(body[data-page=testimonials]) .tm-tabs { align-self: stretch; overflow-x: auto; scrollbar-width: none; }
  :where(body[data-page=testimonials]) .tm-tabs::-webkit-scrollbar { display: none; }
  :where(body[data-page=testimonials]) .tm-tab { flex: 1; justify-content: center; padding: 8px 12px; }
  :where(body[data-page=testimonials]) .tm-toolbar > * { min-width: 0; }
  :where(body[data-page=testimonials]) .tm-controls > * { flex: 1; min-width: 0; }
  :where(body[data-page=testimonials]) .tm-select select { width: 100%; text-overflow: ellipsis; }
  :where(body[data-page=testimonials]) .tm-grid, :where(body[data-page=testimonials]) .tm-col { gap: 14px; }
  :where(body[data-page=testimonials]) .tm-card { padding: 18px 16px 14px; border-radius: 14px; }
  :where(body[data-page=testimonials]) .tm-card-meta { margin-top: 12px; }
  :where(body[data-page=testimonials]) .tm-reply { padding: 10px 12px; }
  :where(body[data-page=testimonials]) .tm-empty { margin-inline: 0; }

  :where(body[data-page=testimonials]) .tm-write-card { margin-inline: 0; padding: 28px 16px 16px; border-radius: 18px; gap: 26px; }
  :where(body[data-page=testimonials]) .tm-write-intro .eyebrow { font-size: 11px; }
  :where(body[data-page=testimonials]) .tm-write-intro h2 { font-size: 25px; }
  :where(body[data-page=testimonials]) .tm-write-intro > p { font-size: 15px; }
  :where(body[data-page=testimonials]) .tm-form { padding: 20px 16px; border-radius: 14px; }
  :where(body[data-page=testimonials]) .tm-row { grid-template-columns: 1fr; gap: 0; }
  :where(body[data-page=testimonials]) .tm-field { margin-top: 12px; }
  :where(body[data-page=testimonials]) .tm-field input, :where(body[data-page=testimonials]) .tm-field select, :where(body[data-page=testimonials]) .tm-field textarea { border-radius: 10px; padding-inline: 14px; }
  :where(body[data-page=testimonials]) .tm-field label { left: 14px; }
  :where(body[data-page=testimonials]) .tm-success h3 { font-size: 21px; }
}
@media (max-width: 420px) {
  :where(body[data-page=testimonials]) .tm-hero-title { font-size: 30px; }
  :where(body[data-page=testimonials]) .tm-tab { font-size: 12.5px; padding: 8px 9px; gap: 5px; }
  :where(body[data-page=testimonials]) .tm-tab > i { display: none; }
  :where(body[data-page=testimonials]) .tm-gbox-btn { width: 100%; }
  :where(body[data-page=testimonials]) .tm-success-btns .btn { width: 100%; }
}

/* ##########################################################
   APP SHELL (phones & tablets) – keep last
   ########################################################## */
/* ==========================================================
   MMatrics Pharmaceuticals – app shell (phones & tablets)
   Follows every page section. Under 1100px the site
   behaves like an installed app: compact header, bottom tab
   bar, bottom-sheet cart, footer accordions, press feedback.
   Markup comes from js/layout.js (app shell part). Desktop is untouched.
   ========================================================== */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
.f-acc-tog, .nav-cart, .nav-close { display: none; }

/* ---------- smooth loading (every screen size) ----------
   Classes come from layout.js: img.lz-wait / [data-bg] = still loading → soft shimmer,
   .lz-in = just arrived → fades in. js-fit product photos shimmer on their frame instead. */
@view-transition { navigation: auto; }                  /* page-to-page cross-fade (browsers that support it) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

img.lz-wait:not([aria-hidden]), [data-bg]:not([data-bg-idle]) { background-color: #eef2f7; }
img.lz-wait:not([aria-hidden]), [data-bg]:not([data-bg-idle]),
.p-media:has(img.js-fit:not(.loaded)), .pd-stage:has(img.js-fit:not(.loaded)), .qv-stage:has(img.js-fit:not(.loaded)),
.pd-thumb:has(img.js-fit:not(.loaded)), .qv-thumb:has(img.js-fit:not(.loaded)), .pd-promo-shot:has(img.js-fit:not(.loaded)) {
  background-image: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 70%);
  background-size: 200% 100%; background-position: 150% 0; background-repeat: no-repeat;
  animation: var(--mm-shimmer, none);
}
.lz-in { animation: var(--mm-fade, none); }
img.lz-in:not([aria-hidden]) { animation: var(--mm-fade-blur, none); }
main { animation: var(--mm-page-in, none); }

@keyframes mm-shimmer { to { background-position: -50% 0; } }
@keyframes mm-lz-in { from { opacity: 0; } }
@keyframes mm-lz-in-blur { from { opacity: 0; filter: blur(10px); } }

@media (prefers-reduced-motion: no-preference) {
  :root {
    --mm-shimmer: mm-shimmer 1.4s linear infinite;
    --mm-fade: mm-lz-in .7s ease-out;
    --mm-fade-blur: mm-lz-in-blur .7s ease-out;
    --mm-page-in: mm-lz-in .45s ease-out;
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

@media (max-width: 1099px) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
  .site-header { view-transition-name: app-header; }

  html { -webkit-tap-highlight-color: transparent; }
  main { padding-left: var(--safe-l); padding-right: var(--safe-r); }

  /* ---------- compact app header ---------- */
  /* the blue top bar (phone, account, wishlist) shows above the navbar and scrolls away;
     the navbar itself stays pinned under the status bar */
  .topbar-inner { height: 38px; }
  .site-header { top: -38px; padding-top: var(--safe-t); background: #fff; }
  .navbar-inner { height: 60px; }
  .logo img { height: 38px; }
  /* menu button: left of the logo, opens the drawer (which slides in from the left) */
  .burger { flex: none; justify-content: center; width: 40px; height: 40px; margin: 0 6px 0 -8px; padding: 9px; }
  .nav-close {
    display: grid; place-items: center; position: absolute; top: calc(22px + var(--safe-t)); right: 16px; width: 38px; height: 38px;
    border-radius: 50%; background: #eef4fb; color: var(--navy-2); font-size: 16px;
  }
  .nav-close:active { transform: scale(.9); }
  .nav-actions { gap: 8px; }
  .nav-actions .icon-btn {
    width: 42px; height: 42px; padding: 0; border-radius: 50%; display: grid; place-items: center;
    background: #eef4fb; color: var(--navy-2); font-size: 17px;
  }
  .nav-actions .icon-btn:active { transform: scale(.9); background: #dfe9f6; }
  .nav-actions .nav-cart { display: grid; position: relative; color: #fff; background: linear-gradient(145deg, #1d8fe0, #0b4fb3); }
  .nav-actions .nav-cart:active { background: #0b4fb3; }
  .nav-cart .cart-badge { top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid #fff; font-size: 10.5px; font-weight: 800; }
  .nav-cart .cart-badge[hidden] { display: none; }
  .search-panel .search-form { border-radius: 14px; }

  .main-nav { padding-top: calc(28px + var(--safe-t)); padding-bottom: calc(var(--safe-b) + 24px); border-radius: 0; }
  .main-nav .nav-logo { display: flex; margin-bottom: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }   /* drawer heading */
  .main-nav .nav-logo img { height: 40px; }

  /* floating WhatsApp / call in the bottom corner (no hover tips on touch) */
  .float-contact { --fc: 50px; right: calc(14px + var(--safe-r)); bottom: calc(var(--safe-b) + 16px); }
  .fc-tip { display: none; }
  .fc-btn::before, .fc-btn::after { animation-duration: 3.2s; opacity: .35; }
  body.kb-open .float-contact { display: none; }

  /* ---------- press feedback instead of hover lifts ---------- */
  .btn:active, .btn-pill:active, .cat-btn:active { transform: scale(.97); }
  .product-card, .cat-card, .blog-card, .b-card, .lg-more-card, .fq-ch-card { -webkit-tap-highlight-color: transparent; }
}

/* touch screens: hover effects shouldn't stick after a tap */
@media (hover: none) {
  .btn:hover { transform: none; box-shadow: none; }
  .btn:hover::before { transform: translateX(-120%); }
  .btn:hover i, .btn-pill:hover i, .link-arrow:hover i, .b-more:hover i { animation: none; }
  .fc-btn:hover { transform: none; }
}

@media (max-width: 767px) {
  /* ---------- cart: bottom sheet ---------- */
  .cart-drawer {
    top: auto; left: 0; right: 0; width: 100%; height: min(88vh, 88dvh);
    border-radius: 22px 22px 0 0; transform: translateY(105%); padding-bottom: var(--safe-b);
    box-shadow: 0 -18px 50px rgba(5,20,50,.25);
  }
  .cd-head { position: relative; border-radius: 22px 22px 0 0; padding-top: 24px; }
  .cd-head::before {                                      /* grabber */
    content: ""; position: absolute; left: 50%; top: 9px; width: 40px; height: 4px; border-radius: 4px;
    background: rgba(255,255,255,.45); translate: -50% 0;
  }
  .cd-btn { height: 52px; border-radius: 14px; }

  /* ---------- footer: compact, link groups fold away ---------- */
  .footer-grid { grid-template-columns: 1fr; row-gap: 0; padding: 30px var(--gutter) 10px; }
  .footer-brand { padding-bottom: 18px; text-align: center; }
  .footer-brand .logo img { max-width: 190px; }
  .footer-tag { display: inline-block; text-align: left; }
  .socials { justify-content: center; }
  .socials a { width: 40px; height: 40px; font-size: 16px; }
  .footer-col, .footer-col:nth-child(n) { padding-left: 0; grid-column: auto; }
  .footer-col.f-acc { border-top: 1px solid rgba(255,255,255,.1); }
  .footer-col.f-acc h4 {
    display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 16px 2px;
    font-size: 16px; cursor: pointer;
  }
  .footer-col.f-acc h4::before, .footer-col.f-acc h4::after { display: none; }
  .f-acc-tog {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.08);
    font-size: 12px; color: #8fe3da; transition: transform .35s var(--ease), background .3s;
  }
  .footer-col.open .f-acc-tog { transform: rotate(180deg); background: #15b1a2; color: #fff; }
  .footer-col.f-acc > :not(h4) { display: none; }
  .footer-col.f-acc.open > :not(h4) { display: block; animation: fAccIn .35s var(--ease); }
  .footer-col.f-acc.open > ul { padding-bottom: 14px; }
  .footer-col ul li { font-size: 15px; margin-bottom: 0; }
  .footer-col:not(.footer-contact) ul a { padding: 9px 0; }
  .footer-contact li { grid-template-columns: 38px 1fr; margin-bottom: 12px; }
  .fc-icon { width: 38px; height: 38px; font-size: 15px; }
  .footer-contact li > span:last-child { font-size: 14px; }
  .footer-pay { padding-bottom: 16px; }
  .pay { height: 30px; padding: 0 9px; font-size: 13px; border-radius: 6px; }
  .pay-visa { font-size: 14px; }
  .pay-mc i { width: 16px; height: 16px; }
  .pay-mc i + i { margin-left: -6px; }
  /* side padding keeps the centred copyright clear of the floating WhatsApp button (50px + 14px from the edge) */
  .footer-bottom-inner { font-size: 12.5px; gap: 6px; padding-block: 16px; padding-inline: calc(72px + var(--safe-r)); }
}
@keyframes fAccIn { from { opacity: 0; transform: translateY(-6px); } }

/* installed app: no browser chrome to imitate */
@media (display-mode: standalone) and (max-width: 1099px) {
  .footer-bottom .credit { display: none; }
  body { overscroll-behavior-y: none; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ==========================================================
   ERROR PAGES (404 / 500 / 403 / 429) – Views/Error/Index
   ========================================================== */
.err-page { padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 90px); background: radial-gradient(900px 420px at 85% 0%, rgba(10,150,163,.08), transparent 60%), radial-gradient(800px 400px at 0% 10%, rgba(26,111,214,.08), transparent 60%); }
.err-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.err-art { position: relative; display: grid; place-items: center; min-height: 260px; }
.err-code { font-size: clamp(110px, 17vw, 220px); font-weight: 800; line-height: 1; letter-spacing: -.04em; background: linear-gradient(135deg, #0a3d91, #0b5bc0 45%, #0a96a3); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .95; }
.err-ico { position: absolute; right: 12%; bottom: 8%; display: grid; place-items: center; width: clamp(64px, 8vw, 92px); height: clamp(64px, 8vw, 92px); border-radius: 50%; background: #fff; color: #0b5bc0; font-size: clamp(26px, 3vw, 36px); box-shadow: 0 18px 40px rgba(16,42,92,.18); animation: errFloat 3.5s ease-in-out infinite; }
@keyframes errFloat { 50% { transform: translateY(-10px); } }
.err-eyebrow { display: inline-block; padding: 5px 12px; border-radius: 99px; background: #e8f1fe; color: #0b5bc0; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.err-text h1 { margin: 14px 0 10px; font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; line-height: 1.15; color: #0a1f5c; }
.err-text > p { max-width: 540px; color: #5b6784; font-size: 16.5px; line-height: 1.65; }
.err-search { position: relative; display: flex; gap: 8px; max-width: 540px; margin-top: 22px; }
.err-search > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #93a1bd; }
.err-search input { flex: 1; min-width: 0; height: 50px; padding: 0 16px 0 42px; border: 1.5px solid #dbe3ef; border-radius: 12px; background: #fff; font: inherit; outline: 0; transition: border-color .2s, box-shadow .2s; }
.err-search input:focus { border-color: #1a6fd6; box-shadow: 0 0 0 4px rgba(26,111,214,.12); }
.err-search .btn { height: 50px; padding: 0 22px; border-radius: 12px; }
.err-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.err-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.err-btn-ghost { border: 1.5px solid #d5deec; background: #fff; color: #0a1f5c; }
.err-btn-ghost:hover { border-color: #0b5bc0; color: #0b5bc0; }
.err-help { margin-top: 18px; color: #6b7690; font-size: 14.5px; }
.err-help a { color: #0b5bc0; font-weight: 700; }
.err-cats { margin-top: clamp(36px, 5vw, 64px); }
.err-cats h2 { margin-bottom: 14px; font-size: 20px; font-weight: 800; color: #0a1f5c; }
.err-cats ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.err-cats a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #e6ebf3; border-radius: 14px; background: #fff; color: #0a1f5c; font-weight: 700; transition: transform .2s, box-shadow .2s, border-color .2s; }
.err-cats a:hover { transform: translateY(-2px); border-color: #c9d7ea; box-shadow: 0 12px 26px rgba(16,42,92,.08); }
.err-cats a > i { margin-left: auto; color: #93a1bd; font-size: 13px; }
.err-cat-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e8f1fe; color: #0b5bc0; }
.err-cats .tone-green .err-cat-ico { background: #e5f6ee; color: #0b8a5f; }
.err-cats .tone-orange .err-cat-ico { background: #fff0e6; color: #c2531b; }
.err-cats .tone-pink .err-cat-ico { background: #fde9f3; color: #e23d74; }
@media (max-width: 860px) {
  .err-wrap { grid-template-columns: 1fr; text-align: center; }
  .err-art { min-height: 0; }
  .err-text > p, .err-search { margin-left: auto; margin-right: auto; }
  .err-actions { justify-content: center; }
}
@media (max-width: 480px) {
  .err-search { flex-direction: column; }
  /* stacked: flex:1 would size the input's height (to ~0) – keep its 50px; icon centred on the input, not the form */
  .err-search input { flex: none; }
  .err-search > i { top: 25px; }
}
@media (prefers-reduced-motion: reduce) { .err-ico { animation: none; } }

/* "Logged in as …" strip – session opened by an admin's one-time login link (_Layout) */
.mm-magic-strip { position: relative; z-index: 101; background: linear-gradient(90deg, #7a3e00, #b45309 55%, #d97706); color: #fff; font-size: 14px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }
.mm-magic-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.mm-magic-text { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.4; }
.mm-magic-text i { font-size: 16px; }
.mm-magic-email { opacity: .85; }
.mm-magic-out { margin: 0; }
.mm-magic-out button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid rgba(255,255,255,.6); border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background .2s; }
.mm-magic-out button:hover { background: rgba(255,255,255,.28); }
@media (max-width: 600px) { .mm-magic-strip { font-size: 13px; } .mm-magic-email { display: none; } }

/* ==========================================================
   ACCOUNT MENU in the menu bar (Header/Default + layout.js)
   signed in: avatar (photo or initials) + name → dropdown · signed out: "Login" pill
   ========================================================== */
.nav-login {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  background: linear-gradient(135deg, #0b5bc0, #0a96a3); color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(11,91,192,.28); transition: transform .2s, box-shadow .2s;
}
.nav-login:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(11,91,192,.34); }
.nav-login i { font-size: 15px; }

.nav-user { position: relative; }
.nav-user-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 3px 12px 3px 3px; border-radius: 999px;
  background: #f1f6fc; border: 1px solid #e1e9f4; color: var(--navy-2); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.nav-user-btn:hover, .nav-user.open .nav-user-btn { background: #fff; border-color: #c9d8ec; box-shadow: 0 6px 16px rgba(16,42,92,.1); }
.nav-user-avatar {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(140deg, #0a3d91, #0b5bc0 45%, #0a96a3); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .02em;
}
.nav-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-user-avatar--lg { width: 46px; height: 46px; font-size: 16px; box-shadow: 0 0 0 3px #e7f2fd; }
.nav-user-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-caret { font-size: 10px; opacity: .6; transition: transform .25s; }
.nav-user.open .nav-user-caret { transform: rotate(180deg); }

.nav-user-menu {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 130; width: 270px; padding: 8px;
  background: #fff; border: 1px solid #e6ebf3; border-radius: 16px; box-shadow: 0 22px 50px rgba(16,42,92,.18);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s;
}
.nav-user-menu::before { content: ""; position: absolute; right: 26px; top: -7px; width: 12px; height: 12px; background: #fff; border-left: 1px solid #e6ebf3; border-top: 1px solid #e6ebf3; transform: rotate(45deg); }
.nav-user-menu::after { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* hover bridge */
.nav-user.open .nav-user-menu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .nav-user:hover .nav-user-menu { opacity: 1; visibility: visible; transform: none; } }
.nav-user-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding: 10px 10px 14px; border-bottom: 1px solid #eef2f8; }
.nav-user-who { display: grid; min-width: 0; }
.nav-user-who b { color: var(--navy-2); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-who small { color: #6b7690; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-menu a, .nav-user-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px;
  color: #34405c; font: inherit; font-size: 14px; font-weight: 600; text-align: left; background: none; border: 0; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-user-menu a i, .nav-user-menu button i { width: 18px; color: #8492ad; text-align: center; transition: color .15s; }
.nav-user-menu a:hover, .nav-user-menu a:focus-visible { background: #f1f6fd; color: var(--blue); }
.nav-user-menu a:hover i { color: var(--blue); }
.nav-user-menu form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid #eef2f8; }
.nav-user-out { color: #c02a3b !important; }
.nav-user-out i { color: #e5848f !important; }
.nav-user-out:hover { background: #fdecef !important; }

/* phones & tablets: round icon buttons like the rest of the bar */
@media (max-width: 1099px) {
  .nav-login { width: 42px; height: 42px; padding: 0; justify-content: center; box-shadow: none; }
  .nav-login span { display: none; }
  .nav-user-btn { height: 42px; padding: 3px; border: 0; background: #eef4fb; }
  .nav-user-avatar { width: 36px; height: 36px; }
  .nav-user-name, .nav-user-caret { display: none; }
  .nav-user-menu { position: fixed; right: 12px; top: calc(var(--safe-t, 0px) + 70px); width: min(290px, calc(100vw - 24px)); }
  .nav-user-menu::before { right: 22px; }
}
/* phones under 400px: menu + logo + search + account + cart must fit inside the side gutters */
@media (max-width: 399px) {
  .navbar-inner > .logo img { height: 32px; }
  .nav-actions { gap: 6px; padding-left: 6px; }
  .nav-actions .icon-btn, .nav-login, .nav-user-btn { width: 38px; height: 38px; font-size: 15px; }
  .nav-user-avatar { width: 32px; height: 32px; }
}
@media (max-width: 340px) {
  .navbar-inner > .logo img { height: 28px; }
  .burger { margin-right: 4px; }
  .nav-actions { gap: 5px; }
  .nav-actions .icon-btn, .nav-login, .nav-user-btn { width: 36px; height: 36px; font-size: 14px; }
}

/* ==========================================================
   SECURITY CODE on public forms (layout.js · Infrastructure/FormGuards.cs)
   picture · refresh · input in one row; full row in grid / flex forms
   ========================================================== */
.mm-captcha {
  grid-column: 1 / -1; flex: 1 1 100%; display: grid; grid-template-columns: auto 46px minmax(0, 1fr); gap: 8px; align-items: center;
  width: 100%; margin: 12px 0 4px; animation: mmCapIn .35s ease both;
}
@keyframes mmCapIn { from { opacity: 0; transform: translateY(-4px); } }
.mm-captcha-img { display: block; width: 150px; height: 48px; overflow: hidden; border-radius: 12px; border: 1.5px solid #dbe3ef; background: #eef5fe; }
.mm-captcha-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-captcha-refresh {
  display: grid; place-items: center; height: 48px; border-radius: 12px; border: 1.5px solid #dbe3ef; background: #fff; color: #0b5bc0; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.mm-captcha-refresh:hover { background: #eef5fe; border-color: #b9cde8; }
.mm-captcha-refresh i { transition: transform .4s; }
.mm-captcha-refresh:active i { transform: rotate(180deg); }
.mm-captcha-input {
  width: 100%; min-width: 0; height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #dbe3ef; background: #f8fafd; color: #0b2458;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; outline: 0; transition: border-color .2s, box-shadow .2s, background .2s;
}
.mm-captcha-input::placeholder { letter-spacing: normal; text-transform: none; font-weight: 500; color: #8a96ad; }
.mm-captcha-input:focus { background: #fff; border-color: #1a6fd6; box-shadow: 0 0 0 4px rgba(26,111,214,.12); }
/* under one-line forms (newsletter bands, often on colour): a small white card */
.mm-captcha--below { max-width: 460px; margin: 10px auto 0; padding: 8px; border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 10px 26px rgba(10,31,92,.14); }
.mm-captcha--below .mm-captcha-img, .mm-captcha--below .mm-captcha-refresh, .mm-captcha--below .mm-captcha-input { height: 42px; }
.mm-captcha--below .mm-captcha-img { width: 132px; }
@media (max-width: 420px) {
  .mm-captcha { grid-template-columns: minmax(0, 1fr) 46px; }
  .mm-captcha-img { width: 100%; }
  .mm-captcha-input { grid-column: 1 / -1; }
}

/* products on phones: load on scroll (shop.js) – "loading more" / "seen all" line in place of the pager */
:where(body[data-page=shop]) .pager .shop-more,
:where(body[data-page=shop]) .pager .shop-end { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 0; padding: 14px; color: #6b7690; font-size: 14px; font-weight: 600; }
:where(body[data-page=shop]) .shop-more-spin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #dbe6f4; border-top-color: var(--blue); animation: shopSpin .8s linear infinite; }
@keyframes shopSpin { to { transform: rotate(360deg); } }
:where(body[data-page=shop]) .shop-end i { color: #0b8a5f; }
@media (prefers-reduced-motion: reduce) { :where(body[data-page=shop]) .shop-more-spin { animation-duration: 2s; } }