/* =====================================================================
   Purelink Ingredients — Public design system
   Hand-written CSS. No framework, no reset library, no web fonts.

   DESIGN INTENT
   This is a B2B ingredient supplier, not a shop. The visual language is
   borrowed from technical documentation and corporate capability
   statements, not from retail:

     - No prices, no cart totals, no "add to bag", no badges or ribbons,
       no star ratings, no urgency devices.
     - Cards read as catalogue entries: specification-led, generous
       whitespace, restrained type.
     - Actions are VIEW DETAILS and INQUIRE NOW — information and contact,
       not purchase.
     - Colour is used sparingly and structurally. The accent green marks
       action; the deep blue marks authority.

   Type is a system font stack: zero network requests, no layout shift,
   and it renders natively on every buyer's machine.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------ */
:root {
  /* Corporate blue — authority, structure */
  --blue-900: #071f3a;
  --blue-800: #0a2d52;
  --blue-700: #0f3d6e;
  --blue-600: #14508f;
  --blue-500: #2a6bb0;
  --blue-100: #dde9f4;
  --blue-50:  #f2f7fc;

  /* Natural green — action, provenance */
  --green-800: #1c5133;
  --green-700: #256841;
  --green-600: #2f7d4f;
  --green-500: #3d9a63;
  --green-100: #e2f1e8;
  --green-50:  #f1f8f4;

  /* Neutrals */
  --ink:     #10192a;
  --body:    #414d60;
  --muted:   #6a7686;
  --faint:   #9aa5b4;
  --line:    #e2e7ee;
  --line-2:  #eef1f6;
  --surface: #ffffff;
  --canvas:  #f7f9fc;
  --canvas-2:#eef3f9;

  /* Feedback */
  --ok-bg: #e6f6ec; --ok-fg: #17683a;
  --err-bg:#fdeceb; --err-fg:#a52017;
  --warn-bg:#fef4e2; --warn-fg:#96590a;

  /* WhatsApp brand green — used only for WhatsApp actions, so the colour
     always means the same thing */
  --wa: #25d366;
  --wa-dark: #1da851;

  /* Shape and depth. Shadows stay soft: heavy drop shadows read as
     consumer UI, flat-with-hairlines reads as technical. */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --shadow-xs: 0 1px 2px rgba(11, 26, 48, .05);
  --shadow-sm: 0 2px 6px rgba(11, 26, 48, .06);
  --shadow:    0 6px 20px rgba(11, 26, 48, .08);
  --shadow-lg: 0 18px 48px rgba(11, 26, 48, .12);

  /* Rhythm */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3.25rem, 8vw, 6rem);
  --wrap: 1240px;
  --wrap-narrow: 860px;

  --header-h: 72px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header instead of hiding under it */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* belt and braces against a stray wide element */
}

/* Long unbreakable strings are the last common cause of horizontal overflow
   once fixed widths are dealt with: an ingredient name like
   "L-Carnitine-L-Tartrate-Monohydrate", a CAS number, or a support email
   address can all be wider than a 320px column. overflow-wrap only breaks
   when a word genuinely does not fit, so normal text is unaffected. */
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, td, th,
figcaption, label, legend, a, code, summary,
.product-name, .cart-name, .category-name, .post-title {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--ink);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance; /* progressive: avoids one-word last lines */
}

h1 { font-size: clamp(1.85rem, 1.1rem + 3.2vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, .95rem + .6vw, 1.35rem); letter-spacing: -.01em; }
h4 { font-size: 1.02rem; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-600); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--blue-700); text-decoration: underline; }

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: .4em; }
li:last-child { margin-bottom: 0; }

code, kbd, samp { font-family: var(--mono); font-size: .9em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

button { font: inherit; }

/* A visible focus ring, always. Removing this breaks keyboard navigation. */
:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--blue-100); color: var(--blue-900); }

/* ---------------------------------------------------------------------
   3. UTILITIES
   ------------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  /* padding-inline, never a shorthand: a shorthand elsewhere would zero the
     side gutter and let content touch the screen edge on phones. */
  padding-inline: var(--gutter);
}

.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.section-alt { background: var(--canvas); }
.section-deep { background: var(--blue-900); color: #c9d6e6; }
.section-deep h2, .section-deep h3 { color: #fff; }

.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;
}

/* Skip link: hidden until focused */
.skip-link {
  position: absolute; top: -100px; left: 16px;
  z-index: 200;
  background: var(--blue-700); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; font-size: .9rem;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; text-decoration: none; color: #fff; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ---------------------------------------------------------------------
   4. SECTION HEADINGS
   ------------------------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--green-700);
  margin-bottom: .85rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px;
  background: var(--green-600); flex: 0 0 26px;
}
.section-deep .eyebrow { color: var(--green-500); }
.section-deep .eyebrow::before { background: var(--green-500); }

.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 46rem; }
.section-head.is-centred { margin-inline: auto; text-align: center; }
.section-head.is-centred .eyebrow { justify-content: center; }

.section-head .lede {
  font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
  color: var(--muted);
  margin-top: .85rem;
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: .82rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 650;
  letter-spacing: .01em;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .16s var(--ease),
              box-shadow .16s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: 0 0 17px; }

.btn-primary { background: var(--blue-700); color: #fff; border-color: var(--blue-700); }
.btn-primary:hover {
  background: var(--blue-600); border-color: var(--blue-600); color: #fff;
  box-shadow: 0 6px 18px rgba(15, 61, 110, .24);
}

.btn-outline { background: transparent; color: var(--blue-700); border-color: var(--blue-100); }
.btn-outline:hover { background: var(--blue-50); border-color: var(--blue-600); color: var(--blue-700); }

.btn-light { background: #fff; color: var(--blue-700); border-color: #fff; }
.btn-light:hover { background: var(--blue-50); border-color: var(--blue-50); color: var(--blue-700); }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn-ghost-light:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

/* WhatsApp actions carry the WhatsApp green so the affordance is instantly
   recognisable — this is the site's primary conversion path. */
.btn-wa { background: var(--wa); color: #06331a; border-color: var(--wa); }
.btn-wa:hover {
  background: var(--wa-dark); border-color: var(--wa-dark); color: #fff;
  box-shadow: 0 6px 18px rgba(37, 211, 102, .3);
}

.btn-cart { background: var(--green-600); color: #fff; border-color: var(--green-600); }
.btn-cart:hover {
  background: var(--green-700); border-color: var(--green-700); color: #fff;
  box-shadow: 0 6px 18px rgba(47, 125, 79, .26);
}
.btn-cart.is-added { background: var(--green-800); border-color: var(--green-800); }

.btn-sm { padding: .58rem 1.05rem; font-size: .84rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1rem; }

/* A full-width button has no reason to refuse wrapping, and nowrap on one is
   an overflow bug waiting to happen: "Send Inquiry on WhatsApp" at btn-lg is
   wider than a 320px screen once padding is counted, and nowrap would push it
   past its container instead of onto a second line. */
.btn-block {
  width: 100%;
  white-space: normal;
  text-wrap: balance;
}

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn-row.is-centred { justify-content: center; }

/* ---------------------------------------------------------------------
   6. HEADER
   ------------------------------------------------------------------ */
.topbar {
  background: var(--blue-900);
  color: #b9c9dc;
  font-size: .82rem;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 40px;
  padding-block: .4rem;
}
.topbar-contact { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.topbar a { color: #b9c9dc; display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: #fff; text-decoration: none; }
.topbar svg { width: 14px; height: 14px; flex: 0 0 14px; opacity: .75; }
.topbar-social { display: flex; gap: .3rem; }
.topbar-social a {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07);
}
.topbar-social a:hover { background: var(--green-600); }
.topbar-social svg { width: 14px; height: 14px; opacity: 1; }

/* Phones: the top bar is noise. Contact details live in the drawer instead. */
@media (max-width: 899px) { .topbar { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.header-inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand img { max-height: 46px; width: auto; }
.brand-mark {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue-700), var(--green-600));
  color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: .95rem; letter-spacing: -.03em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 750; font-size: 1.03rem; color: var(--blue-800); letter-spacing: -.02em; }
.brand-sub {
  font-size: .64rem; font-weight: 650; color: var(--muted);
  text-transform: uppercase; letter-spacing: .13em;
}

/* --- Desktop navigation --- */
.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav-list > li { margin: 0; position: relative; }

.nav-list > li > a {
  display: flex; align-items: center; gap: 5px;
  padding: .6rem .78rem;
  font-size: .91rem; font-weight: 600;
  color: var(--body);
  border-radius: var(--r-sm);
}
.nav-list > li > a:hover { color: var(--blue-700); background: var(--blue-50); text-decoration: none; }
.nav-list > li > a[aria-current="page"] { color: var(--blue-700); }
.nav-list > li > a[aria-current="page"]::after {
  content: ""; position: absolute; left: .78rem; right: .78rem; bottom: .25rem;
  height: 2px; background: var(--green-600); border-radius: 2px;
}
.nav-caret { width: 13px; height: 13px; transition: transform .18s var(--ease); }

/* --- Category dropdown ---
   Two columns: 11 categories in one column would run off a laptop screen. */
.has-dropdown > .dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 480px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: .65rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: .1rem;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  list-style: none; margin: 0;
  z-index: 95;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown > .dropdown.is-open {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.has-dropdown:hover > a > .nav-caret { transform: rotate(180deg); }

.dropdown li { margin: 0; }
.dropdown a {
  display: block;
  padding: .55rem .7rem;
  border-radius: var(--r-sm);
  font-size: .87rem; font-weight: 550;
  color: var(--body);
}
.dropdown a:hover { background: var(--blue-50); color: var(--blue-700); text-decoration: none; }
.dropdown .dropdown-all {
  grid-column: 1 / -1;
  margin-top: .3rem; padding-top: .55rem;
  border-top: 1px solid var(--line-2);
}
.dropdown .dropdown-all a { color: var(--blue-700); font-weight: 650; }

/* --- Header actions --- */
.header-actions { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; }

.icon-action {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--body);
  cursor: pointer;
  position: relative;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.icon-action:hover { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); text-decoration: none; }
.icon-action svg { width: 19px; height: 19px; }

/* Inquiry cart badge. Hidden at zero — a permanent "(0)" is visual noise
   and implies something is missing. */
.cart-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--green-600); color: #fff;
  font-size: .68rem; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--surface);
  font-variant-numeric: tabular-nums;
}
.cart-count[hidden] { display: none !important; }

.cart-link { gap: 8px; }

/* The cart link shows the full "Inquiry Cart (3)" label on wide screens and
   falls back to the icon plus badge when space is tight. Exactly one of the
   two carries the number at any width. */
.cart-label { display: none; }

@media (min-width: 1180px) {
  .cart-link { width: auto; padding-inline: .85rem; }
  .cart-label { display: inline; font-size: .87rem; font-weight: 600; white-space: nowrap; }
  .cart-link .cart-count { display: none; }
}

.burger { display: grid; }
@media (min-width: 1024px) {
  .burger { display: none; }
}
@media (max-width: 1023px) {
  .nav { display: none; }
  .header-cta { display: none; }
}

/* --- Mobile drawer --- */
.drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(88vw, 380px);
  background: var(--surface);
  z-index: 120;
  transform: translateX(100%);
  transition: transform .3s var(--ease-out);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-lg);
}
.drawer.is-open { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--line);
  min-height: var(--header-h);
}

.drawer-nav { padding: .75rem var(--gutter) 1.25rem; list-style: none; margin: 0; }
.drawer-nav li { margin: 0; }
.drawer-nav > li > a {
  display: block; padding: .8rem 0;
  font-size: 1rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line-2);
}
.drawer-nav > li > a[aria-current="page"] { color: var(--blue-700); }

.drawer-sub { list-style: none; margin: 0; padding: .2rem 0 .6rem .9rem; }
.drawer-sub a {
  display: block; padding: .5rem 0;
  font-size: .89rem; color: var(--muted); font-weight: 500;
}
.drawer-sub a:hover { color: var(--blue-700); text-decoration: none; }

.drawer-disclosure {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: 0;
  padding: .8rem 0;
  font-size: 1rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  text-align: left;
}
.drawer-disclosure svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.drawer-disclosure[aria-expanded="true"] svg { transform: rotate(180deg); }

.drawer-foot {
  margin-top: auto;
  padding: 1.25rem var(--gutter);
  border-top: 1px solid var(--line);
  background: var(--canvas);
}
.drawer-contact { font-size: .88rem; display: grid; gap: .55rem; margin-bottom: 1rem; }
.drawer-contact a { display: flex; align-items: center; gap: 9px; color: var(--body); }
.drawer-contact svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--blue-600); }

.overlay {
  position: fixed; inset: 0;
  background: rgba(7, 31, 58, .5);
  z-index: 110;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.overlay.is-open { opacity: 1; visibility: visible; }

/* --- Header search panel --- */
.search-panel {
  border-top: 1px solid var(--line);
  background: var(--canvas);
  display: none;
}
.search-panel.is-open { display: block; }
.search-panel form {
  display: flex; gap: .5rem; align-items: center;
  padding-block: .9rem;
}
.search-panel input {
  flex: 1; min-width: 0;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit; font-size: .95rem;
  background: var(--surface);
  color: var(--ink);
}
.search-panel input:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(20,80,143,.13); }

/* ---------------------------------------------------------------------
   6b. HOMEPAGE HERO
   Light, not dark: the homepage opens on white so the product imagery and
   the blue/green accents carry the colour, rather than a heavy dark band.
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 420px at 88% -10%, var(--blue-50), transparent 62%),
    radial-gradient(600px 360px at -5% 110%, var(--green-50), transparent 58%),
    var(--surface);
  padding-block: clamp(2.75rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--line);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.hero-copy h1 { margin-bottom: 1.1rem; }
.hero-accent {
  /* A tinted phrase rather than a gradient: it survives Windows High Contrast
     and prints legibly, which a background-clipped gradient does not. */
  color: var(--green-700);
}

.hero-copy .hero-lede {
  font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
  color: var(--muted);
  max-width: 38rem;
  margin-bottom: 2rem;
}

.hero-stats {
  display: flex; flex-wrap: wrap;
  gap: 1rem 2.25rem;
  list-style: none; margin: 2.5rem 0 0; padding: 2rem 0 0;
  border-top: 1px solid var(--line);
}
.hero-stats li { margin: 0; display: flex; flex-direction: column; }
.hero-stats strong {
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
  font-weight: 750; color: var(--blue-700);
  letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hero-stats span {
  font-size: .8rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; margin-top: .25rem;
}

/* --- Hero visual --- */
.hero-visual { position: relative; display: none; }

.hero-card {
  position: relative; z-index: 2;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem;
}
.hero-card-label {
  display: block;
  font-size: .72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .13em;
  margin-bottom: 1.1rem;
}
.hero-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-chips li {
  margin: 0;
  padding: .45rem .9rem;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: 99px;
  font-size: .82rem; font-weight: 600; color: var(--blue-700);
}
.hero-chips li:nth-child(3n) {
  background: var(--green-50); border-color: #cfe7da; color: var(--green-700);
}

.hero-blob { position: absolute; border-radius: 50%; filter: blur(46px); z-index: 1; }
.hero-blob-1 {
  width: 260px; height: 260px; top: -60px; right: -50px;
  background: rgba(20, 80, 143, .16);
}
.hero-blob-2 {
  width: 220px; height: 220px; bottom: -70px; left: -40px;
  background: rgba(47, 125, 79, .16);
}

@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.15fr .85fr; }
  .hero-visual { display: block; }
}

/* ---------------------------------------------------------------------
   6c. HOMEPAGE + ABOUT SHARED BLOCKS
   ------------------------------------------------------------------ */

/* --- Introduction --- */
.intro-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.intro-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.intro-points li { display: flex; gap: 1rem; margin: 0; }
.intro-points h3 { font-size: 1rem; margin-bottom: .35rem; }
.intro-points p { font-size: .9rem; color: var(--muted); margin: 0; }

.point-icon {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 10px;
  background: var(--blue-50);
  color: var(--blue-700);
  display: grid; place-items: center;
}
.intro-points li:nth-child(3n) .point-icon {
  background: var(--green-50); color: var(--green-700);
}

@media (min-width: 900px) {
  .intro-grid { grid-template-columns: 1.1fr .9fr; }
}

/* --- Why choose us --- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}

.why-card {
  padding: 1.6rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .11);
}
.why-card h3 { color: #fff; font-size: 1.02rem; margin-bottom: .5rem; }
.why-card p { color: #a9bdd4; font-size: .89rem; margin: 0; }

.why-icon {
  width: 46px; height: 46px;
  border-radius: 11px;
  background: rgba(47, 125, 79, .22);
  color: var(--green-500);
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
}

/* On a light section the same card inverts */
.why-card.is-light {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-xs);
}
.why-card.is-light h3 { color: var(--ink); }
.why-card.is-light p { color: var(--muted); }
.why-card.is-light .why-icon { background: var(--green-50); color: var(--green-700); }

/* --- Applications --- */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1rem, 2.2vw, 1.5rem);
}

.app-card {
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.app-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--blue-100); }
.app-card h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.app-card p { font-size: .89rem; color: var(--muted); margin: 0; }

.app-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-50), var(--green-50));
  color: var(--blue-700);
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
  border: 1px solid var(--blue-100);
}

/* --- Showcase strip --- */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 1rem;
}
.showcase-item {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--canvas-2);
  position: relative;
}
.showcase-item img { aspect-ratio: 1/1; width: 100%; object-fit: cover; max-width: 100%; }
.showcase-item figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 1.5rem .8rem .7rem;
  background: linear-gradient(to top, rgba(7, 31, 58, .82), transparent);
  color: #fff; font-size: .82rem; font-weight: 600;
}

/* --- Blog preview --- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}

.post-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.post-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--blue-100); }

.post-media { display: block; aspect-ratio: 16/9; background: var(--canvas-2); overflow: hidden; max-width: 100%; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.post-card:hover .post-media img { transform: scale(1.04); }

.post-body { padding: 1.2rem; display: flex; flex-direction: column; flex: 1; }
.post-date {
  font-size: .75rem; font-weight: 700; color: var(--green-700);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .55rem;
}
.post-title { font-size: 1.05rem; line-height: 1.35; margin-bottom: .55rem; }
.post-title a { color: var(--ink); }
.post-title a:hover { color: var(--blue-700); text-decoration: none; }
.post-excerpt {
  font-size: .88rem; color: var(--muted); margin: 0 0 1rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-more {
  margin-top: auto;
  font-size: .85rem; font-weight: 650;
  display: inline-flex; align-items: center; gap: .4rem;
}
.post-more svg { transition: transform .2s var(--ease); }
.post-more:hover { text-decoration: none; }
.post-more:hover svg { transform: translateX(3px); }

/* --- Contact CTA / details --- */
.contact-cta {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.contact-list li { display: flex; gap: 1rem; margin: 0; }
.contact-list a { color: var(--body); font-weight: 600; }
.contact-list a:hover { color: var(--blue-700); }

.contact-icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 11px;
  background: var(--blue-50);
  color: var(--blue-700);
  display: grid; place-items: center;
}
.contact-label {
  display: block;
  font-size: .72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .2rem;
}

.contact-actions {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.25rem, 3vw, 1.85rem);
}
.contact-actions h3 { font-size: 1.05rem; margin-bottom: 1.1rem; }

.contact-note {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .8rem; color: var(--muted);
  margin: 1.1rem 0 0;
}
.contact-note svg { flex: 0 0 14px; margin-top: .22rem; color: var(--green-600); }

@media (min-width: 900px) {
  .contact-cta { grid-template-columns: 1.15fr .85fr; }
}

/* ---------------------------------------------------------------------
   6d. ABOUT PAGE
   ------------------------------------------------------------------ */
.about-intro, .about-split {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}

.about-aside {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.about-aside h3 { font-size: 1rem; margin-bottom: 1.15rem; }
.about-aside dl { margin: 0; }
.about-aside dt {
  font-size: .72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .09em;
}
.about-aside dd {
  margin: .2rem 0 1rem; color: var(--ink); font-weight: 600; font-size: .95rem;
}
.about-aside dd:last-of-type { margin-bottom: 0; }

.approach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.approach-card {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-xs);
}
.approach-num {
  display: inline-block;
  font-size: 1.6rem; font-weight: 800;
  color: var(--blue-100);
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: .75rem;
  font-variant-numeric: tabular-nums;
}
.approach-card h3 { font-size: 1.02rem; margin-bottom: .55rem; }
.approach-card p { font-size: .9rem; color: var(--muted); margin: 0; }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.check-list li {
  display: flex; gap: .85rem; margin: 0;
  padding: 1.1rem 1.25rem;
  background: var(--green-50);
  border: 1px solid #d5e9de;
  border-radius: var(--r-sm);
  font-size: .9rem; color: var(--body);
}
.check-list svg { flex: 0 0 17px; color: var(--green-700); margin-top: .2rem; }
.check-list strong { display: block; color: var(--ink); margin-bottom: .2rem; }

.quality-band {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: start;
}
.quality-note {
  display: flex; gap: .7rem; align-items: flex-start;
  margin-top: 1.5rem; padding: 1.1rem 1.25rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-sm);
}
.quality-note svg { flex: 0 0 16px; color: var(--green-500); margin-top: .22rem; }
.quality-note p { margin: 0; font-size: .87rem; color: #b9cadd; }
.quality-actions { align-self: center; }

@media (min-width: 900px) {
  .about-intro { grid-template-columns: 1.25fr .75fr; }
  .about-split { grid-template-columns: 1.05fr .95fr; }
  .quality-band { grid-template-columns: 1.4fr .6fr; }
}

/* ---------------------------------------------------------------------
   6e. GALLERY
   ------------------------------------------------------------------ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(.8rem, 1.8vw, 1.25rem);
}

.gallery-item {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.gallery-item:hover {
  box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--blue-100);
}

.gallery-link {
  display: block; position: relative;
  aspect-ratio: 1/1;
  background: var(--canvas-2);
  overflow: hidden;
  max-width: 100%;
}
.gallery-link img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.gallery-item:hover .gallery-link img { transform: scale(1.05); }

.gallery-zoom {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(7, 31, 58, .42);
  color: #fff;
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.gallery-link:hover .gallery-zoom,
.gallery-link:focus-visible .gallery-zoom { opacity: 1; }

.gallery-item figcaption {
  padding: .85rem 1rem 1rem;
  font-size: .85rem;
  color: var(--muted);
}
.gallery-item figcaption strong { display: block; color: var(--ink); font-size: .92rem; margin-bottom: .2rem; }

/* --- Lightbox --- */
.lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(4, 16, 31, .94);
  display: grid; place-items: center;
  padding: clamp(2.75rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity .24s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }

.lightbox-figure {
  margin: 0;
  max-width: min(100%, 1100px);
  max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.lightbox-figure img {
  max-width: 100%;
  max-height: 72vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: #0b1a2f;
}
.lightbox-figure figcaption {
  color: #cfdbe9; text-align: center; font-size: .9rem;
  max-width: 50rem;
}
.lightbox-figure figcaption strong { display: block; color: #fff; font-size: 1rem; margin-bottom: .3rem; }

.lightbox-close, .lightbox-nav {
  position: absolute;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  color: #fff;
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover {
  background: rgba(255, 255, 255, .2); border-color: #fff;
}
.lightbox-close { top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); }
.lightbox-prev { left: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lightbox-nav[hidden] { display: none; }

.lightbox-counter {
  position: absolute; bottom: clamp(.75rem, 2vw, 1.5rem); left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: #8fa5bd; font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

/* On phones the side arrows overlap the image, so move them to the bottom */
@media (max-width: 559px) {
  .lightbox-prev, .lightbox-next { top: auto; bottom: 3.5rem; transform: none; }
  .lightbox-prev { left: 25%; }
  .lightbox-next { right: 25%; }
  .lightbox-figure img { max-height: 58vh; }
}

/* ---------------------------------------------------------------------
   6f. CONTACT PAGE
   ------------------------------------------------------------------ */
.contact-layout {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}

.contact-details h2 { font-size: 1.3rem; margin-bottom: 1.5rem; }

.contact-quick {
  margin-top: 2.25rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.contact-quick h3 { font-size: 1rem; margin-bottom: 1rem; }

.contact-map { margin-top: 2.25rem; }
.contact-map h3 { font-size: 1rem; margin-bottom: 1rem; }
.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--canvas-2);
  aspect-ratio: 16/9;
  max-width: 100%;
}
.map-frame iframe { width: 100%; height: 100%; display: block; border: 0; }

.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
}
.contact-card h2 { font-size: 1.3rem; margin-bottom: .45rem; }
.contact-card-lede { font-size: .89rem; color: var(--muted); margin-bottom: 1.75rem; }

/* --- Form fields --- */
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 1.1rem; }

.contact-card .field { margin-bottom: 1.25rem; }
.contact-card label {
  display: block;
  font-size: .87rem; font-weight: 650; color: var(--ink);
  margin-bottom: .45rem;
}
.contact-card .req { color: var(--err-fg); }
.contact-card .opt { color: var(--faint); font-weight: 500; }

.contact-card input[type="text"],
.contact-card input[type="email"],
.contact-card input[type="tel"],
.contact-card textarea {
  width: 100%;
  padding: .8rem 1rem;
  font: inherit; font-size: .95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid #ccd5e0;
  border-radius: var(--r-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.contact-card input:focus, .contact-card textarea:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(20, 80, 143, .13);
}
.contact-card textarea { min-height: 150px; resize: vertical; }
.contact-card ::placeholder { color: var(--faint); }

/* 16px stops iOS Safari zooming the page when a field is focused */
@media (max-width: 767px) {
  .contact-card input, .contact-card textarea { font-size: 16px; }
}

.field.has-error input, .field.has-error textarea { border-color: var(--err-fg); }
.field.has-error input:focus, .field.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(165, 32, 23, .13);
}

.field-error {
  font-size: .82rem; color: var(--err-fg); font-weight: 600;
  margin: .4rem 0 0;
}
.field-help { font-size: .82rem; color: var(--muted); margin: .45rem 0 0; }

.form-alert {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: 1rem 1.15rem;
  border-radius: var(--r-sm);
  border: 1px solid;
  margin-bottom: 1.5rem;
  font-size: .9rem;
}
.form-alert p { margin: 0; }
.form-alert svg { flex: 0 0 18px; margin-top: .15rem; }
.form-alert.is-success { background: var(--ok-bg); border-color: #bce3cb; color: var(--ok-fg); }
.form-alert.is-error   { background: var(--err-bg); border-color: #f6c9c5; color: var(--err-fg); }
.form-alert.is-warning { background: var(--warn-bg); border-color: #f5ddb0; color: var(--warn-fg); }
.form-alert.is-info    { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700); }

.cart-attach {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  background: var(--green-50);
  border: 1px solid #d5e9de;
  border-radius: var(--r-sm);
}
.cart-attach[hidden] { display: none; }
.cart-attach .checkline {
  background: none; border: 0; padding: 0; margin: 0;
  font-size: .89rem; color: var(--body);
}
.cart-attach .checkline input { width: 17px; height: 17px; flex: 0 0 17px; margin: 0; }

.checkline { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; }

.form-footnote {
  display: flex; gap: .5rem; align-items: flex-start;
  font-size: .8rem; color: var(--muted);
  margin: 1.1rem 0 0;
}
.form-footnote svg { flex: 0 0 14px; margin-top: .2rem; color: var(--green-600); }

@media (min-width: 600px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .contact-layout { grid-template-columns: .85fr 1.15fr; }
}

/* ---------------------------------------------------------------------
   7. PAGE HERO (interior pages)
   ------------------------------------------------------------------ */
.page-hero {
  position: relative;
  background: var(--blue-900);
  color: #c4d3e4;
  padding-block: clamp(2.5rem, 6vw, 4.25rem);
  overflow: hidden;
}
/* A restrained structural motif rather than a decorative photo: two soft
   radial washes. No parallax, no video, nothing that costs a repaint. */
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(760px 340px at 8% -20%, rgba(20, 80, 143, .5), transparent 62%),
    radial-gradient(560px 300px at 96% 120%, rgba(47, 125, 79, .28), transparent 60%);
  pointer-events: none;
}
.page-hero > * { position: relative; }
.page-hero h1 { color: #fff; }
.page-hero .hero-lede {
  font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
  max-width: 44rem;
  margin-top: .9rem;
  color: #b9cadd;
}
.page-hero .hero-meta {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  margin-top: 1.4rem;
  font-size: .85rem;
  color: #9db3cb;
}
.page-hero .hero-meta strong { color: #fff; font-weight: 650; }

/* ---------------------------------------------------------------------
   8. BREADCRUMBS
   ------------------------------------------------------------------ */
.breadcrumb {
  font-size: .82rem;
  margin-bottom: 1.15rem;
}
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  list-style: none; margin: 0; padding: 0;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .3rem; }
.breadcrumb li + li::before {
  content: "/"; color: var(--faint); margin-right: .15rem;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--blue-700); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

/* On the dark hero */
.page-hero .breadcrumb a { color: #9db3cb; }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero .breadcrumb [aria-current] { color: #fff; }
.page-hero .breadcrumb li + li::before { color: #6d8399; }

/* ---------------------------------------------------------------------
   9. PRODUCT CARD
   The core component. Restrained on purpose — image, category, name,
   one line of description, two actions. Nothing else.
   ------------------------------------------------------------------ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}

.product-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              transform .2s var(--ease);
}
.product-card:hover {
  border-color: var(--blue-100);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.product-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--canvas-2);
  overflow: hidden;
  /* Guards the aspect-ratio box on browsers without support */
  max-width: 100%;
}
.product-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.product-card:hover .product-media img { transform: scale(1.045); }

.product-body {
  padding: 1.05rem 1.15rem 1.15rem;
  display: flex; flex-direction: column; flex: 1;
}

.product-category {
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .11em;
  color: var(--green-700);
  margin-bottom: .45rem;
}
.product-category a { color: inherit; }
.product-category a:hover { color: var(--green-800); text-decoration: none; }

.product-name {
  font-size: 1.02rem; font-weight: 700;
  line-height: 1.32; letter-spacing: -.01em;
  margin-bottom: .45rem;
}
.product-name a { color: var(--ink); }
.product-name a:hover { color: var(--blue-700); text-decoration: none; }

.product-excerpt {
  font-size: .87rem;
  color: var(--muted);
  line-height: 1.58;
  margin: 0 0 1.05rem;
  /* Two lines, so every card in a row has the same height regardless of
     how much description the admin entered */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-cas {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--faint);
  margin: -.6rem 0 .8rem;
}

/* Actions pinned to the bottom so buttons align across a row */
.product-actions {
  margin-top: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
}
.product-actions .btn { padding-inline: .6rem; font-size: .82rem; }

/* Below 360px two buttons side by side are too cramped to read */
@media (max-width: 359px) {
  .product-actions { grid-template-columns: 1fr; }
}

/* Tertiary card action: Add to Inquiry Cart.
   Deliberately quieter than the two buttons above — a text-weight control, not
   a third filled button — but still full width and 40px tall so it is a
   comfortable tap target. */
.cart-add {
  margin-top: .55rem;
  width: 100%;
  min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .5rem .75rem;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  color: var(--green-700);
  font-size: .81rem; font-weight: 650;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease),
              color .15s var(--ease);
}
.cart-add:hover {
  background: var(--green-50);
  border-color: var(--green-600);
  border-style: solid;
  color: var(--green-800);
}
.cart-add svg { flex: 0 0 15px; }

/* Already in the cart: solid, checked, and clearly a different state rather
   than just a colour change. */
.cart-add.is-added {
  background: var(--green-100);
  border-style: solid;
  border-color: var(--green-500);
  color: var(--green-800);
}
.cart-add.is-added svg { display: none; }
.cart-add.is-added::before {
  content: "";
  width: 15px; height: 15px; flex: 0 0 15px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c5133' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ---------------------------------------------------------------------
   10. CATEGORY CARD
   ------------------------------------------------------------------ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.category-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              transform .2s var(--ease);
}
.category-card:hover {
  border-color: var(--blue-100);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  text-decoration: none;
}

.category-media {
  aspect-ratio: 16 / 10;
  background: var(--canvas-2);
  overflow: hidden;
  max-width: 100%;
}
.category-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.category-card:hover .category-media img { transform: scale(1.05); }

.category-body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; flex: 1; }

.category-name {
  font-size: 1.04rem; font-weight: 700; color: var(--ink);
  letter-spacing: -.01em; line-height: 1.3;
  margin-bottom: .4rem;
}
.category-card:hover .category-name { color: var(--blue-700); }

.category-desc {
  font-size: .86rem; color: var(--muted); line-height: 1.55;
  margin: 0 0 .9rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.category-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  font-size: .8rem; font-weight: 650;
  color: var(--blue-700);
}
.category-count {
  color: var(--muted); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.category-foot svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.category-card:hover .category-foot svg { transform: translateX(3px); }

/* --- Compact category chips (filter strip) --- */
.chip-row {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .48rem .95rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  font-size: .85rem; font-weight: 600;
  color: var(--body);
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.chip:hover { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700); text-decoration: none; }
.chip.is-active {
  background: var(--blue-700); border-color: var(--blue-700); color: #fff;
}
.chip-num {
  font-size: .74rem; opacity: .7; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   11. LISTING TOOLBAR
   ------------------------------------------------------------------ */
.listing-bar {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 1.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.listing-count { font-size: .88rem; color: var(--muted); }
.listing-count strong { color: var(--ink); font-weight: 650; }

.search-form {
  display: flex; gap: .5rem; align-items: stretch;
  flex: 1 1 300px; max-width: 460px;
}
.search-input-wrap { position: relative; flex: 1; min-width: 0; }
.search-input-wrap svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--faint); pointer-events: none;
}
.search-form input[type="search"] {
  width: 100%;
  padding: .7rem .9rem .7rem 2.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit; font-size: .92rem;
  background: var(--surface); color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.search-form input[type="search"]:focus {
  outline: none; border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(20, 80, 143, .12);
}
.search-form input::placeholder { color: var(--faint); }

/* 16px minimum on mobile stops iOS Safari zooming the page on focus */
@media (max-width: 767px) {
  .search-form input[type="search"], .search-panel input { font-size: 16px; }
}

.sort-select {
  padding: .7rem 2rem .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font: inherit; font-size: .88rem; color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7686' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 15px;
}
.sort-select:focus { outline: none; border-color: var(--blue-600); }

/* Active filter summary */
.filter-tags { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: 1.3rem; }
.filter-tag {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .75rem;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: 99px;
  font-size: .8rem; color: var(--blue-700); font-weight: 600;
}
.filter-tag a { color: var(--blue-700); display: grid; place-items: center; line-height: 0; }
.filter-tag svg { width: 13px; height: 13px; }

/* ---------------------------------------------------------------------
   12. EMPTY AND LOADING STATES
   ------------------------------------------------------------------ */
.empty-state {
  text-align: center;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--gutter);
  background: var(--canvas);
  border: 1px dashed var(--line);
  border-radius: var(--r);
}
.empty-icon {
  width: 60px; height: 60px; margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--blue-600);
}
.empty-icon svg { width: 27px; height: 27px; }
.empty-state h2, .empty-state h3 { font-size: 1.2rem; margin-bottom: .55rem; }
.empty-state p { color: var(--muted); max-width: 34rem; margin-inline: auto; font-size: .93rem; }
.empty-state .btn-row { margin-top: 1.5rem; }

/* Skeleton placeholders, used while a JS filter is in flight */
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: 1.6rem; }
.skeleton-card {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--surface);
}
.skeleton-media { aspect-ratio: 4 / 3; background: var(--canvas-2); }
.skeleton-body { padding: 1.1rem; }
.skeleton-line { height: 11px; border-radius: 4px; background: var(--line-2); margin-bottom: .6rem; }
.skeleton-line.is-short { width: 42%; }
.skeleton-line.is-mid { width: 76%; }
.skeleton-pulse { animation: skeleton 1.4s ease-in-out infinite; }
@keyframes skeleton { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.is-loading { position: relative; min-height: 180px; }
.is-loading::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(1px);
}

/* ---------------------------------------------------------------------
   13. PAGINATION
   ------------------------------------------------------------------ */
.pagination {
  display: flex; flex-wrap: wrap; gap: .4rem;
  align-items: center; justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.pagination a, .pagination span {
  display: inline-grid; place-items: center;
  min-width: 42px; height: 42px; padding: 0 .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .89rem; font-weight: 650;
  color: var(--body);
  background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.pagination a:hover {
  background: var(--blue-50); border-color: var(--blue-600);
  color: var(--blue-700); text-decoration: none;
}
.pagination .is-current {
  background: var(--blue-700); border-color: var(--blue-700); color: #fff;
}
.pagination .is-gap { border-color: transparent; background: none; min-width: 26px; color: var(--faint); }
.pagination .is-nav { font-weight: 600; }

@media (max-width: 559px) {
  .pagination .page-number:not(.is-current) { display: none; }
}

/* ---------------------------------------------------------------------
   14. PRODUCT DETAIL
   ------------------------------------------------------------------ */
.product-detail {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}

.detail-media {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--canvas-2);
  aspect-ratio: 1 / 1;
  max-width: 100%;
}
.detail-media img { width: 100%; height: 100%; object-fit: cover; }

.detail-head { margin-bottom: 1.3rem; }
.detail-category {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--green-700);
  margin-bottom: .7rem;
}
.detail-category a { color: inherit; }

.detail-title { margin-bottom: .7rem; }
.detail-lede { font-size: 1.05rem; color: var(--body); line-height: 1.62; }

.detail-facts {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.15rem 0 0;
}
.fact {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .8rem;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .8rem; color: var(--body);
}
.fact strong { color: var(--ink); font-weight: 650; }
.fact-mono { font-family: var(--mono); }

/* Action block — the site's primary conversion point */
.detail-actions {
  margin-top: 1.6rem;
  padding: 1.25rem;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.detail-actions .btn-row { margin-bottom: .85rem; }
.detail-actions .btn { flex: 1 1 200px; }
.detail-actions .action-note {
  font-size: .8rem; color: var(--muted); margin: 0;
  display: flex; align-items: flex-start; gap: .5rem;
}
.detail-actions .action-note svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: .22rem; color: var(--green-600); }

.detail-contact {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  font-size: .85rem;
}
.detail-contact a { display: inline-flex; align-items: center; gap: .45rem; color: var(--body); font-weight: 550; }
.detail-contact a:hover { color: var(--blue-700); }
.detail-contact svg { width: 15px; height: 15px; color: var(--blue-600); flex: 0 0 15px; }

/* --- Specification blocks --- */
.spec-sections { margin-top: clamp(2.5rem, 5vw, 3.75rem); display: grid; gap: 1.15rem; }

.spec-block {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}
.spec-block > h2 {
  font-size: .95rem; font-weight: 700;
  letter-spacing: .01em;
  padding: .95rem 1.25rem;
  margin: 0;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  color: var(--blue-800);
  display: flex; align-items: center; gap: .6rem;
}
.spec-block > h2 svg { width: 17px; height: 17px; color: var(--green-600); flex: 0 0 17px; }
.spec-body { padding: 1.25rem; font-size: .93rem; }
.spec-body p { margin-bottom: .9rem; }
.spec-body p:last-child { margin-bottom: 0; }

/* Line-per-parameter content renders as a definition-style list */
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem;
  padding: .6rem 0;
  border-bottom: 1px dashed var(--line);
  margin: 0;
  font-size: .9rem;
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list .spec-key { font-weight: 650; color: var(--ink); min-width: 11rem; flex: 0 0 auto; }
.spec-list .spec-val { color: var(--body); }
.spec-list li.is-plain { display: list-item; list-style: disc; margin-left: 1.15rem; padding: .3rem 0; border: 0; }

/* ---------------------------------------------------------------------
   15. RELATED PRODUCTS / CTA
   ------------------------------------------------------------------ */
.cta-band {
  background: linear-gradient(135deg, var(--blue-800), var(--blue-900) 60%);
  color: #c4d3e4;
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(520px 260px at 100% 0%, rgba(47, 125, 79, .3), transparent 62%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; margin-bottom: .7rem; }
.cta-band p { color: #b9cadd; max-width: 40rem; }
.cta-band .btn-row { margin-top: 1.5rem; }

/* ---------------------------------------------------------------------
   15b. INQUIRY CART
   A selection list, not a basket: no prices, no totals, no subtotal row.
   ------------------------------------------------------------------ */
.cart-layout { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }

.cart-list { list-style: none; margin: 0; padding: 0; }

.cart-row {
  display: grid;
  grid-template-columns: auto 64px minmax(0, 1fr);
  grid-template-areas:
    "num thumb info"
    "qty qty   remove";
  gap: .75rem 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.cart-row:first-child { border-top: 1px solid var(--line); }

.cart-num {
  grid-area: num;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: .78rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cart-thumb {
  grid-area: thumb;
  width: 64px; height: 64px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--canvas-2);
  flex: 0 0 64px;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }

.cart-info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.cart-cat {
  font-size: .68rem; font-weight: 700; color: var(--green-700);
  text-transform: uppercase; letter-spacing: .1em;
}
.cart-name { font-size: .96rem; font-weight: 650; color: var(--ink); line-height: 1.35; }
.cart-name:hover { color: var(--blue-700); }
.cart-cas { font-family: var(--mono); font-size: .74rem; color: var(--faint); }

.cart-qty { grid-area: qty; display: flex; align-items: center; gap: .5rem; }
.cart-qty input {
  width: 82px; padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: .88rem; text-align: center;
  color: var(--ink); background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.cart-qty input:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(20,80,143,.12); }
.cart-qty-hint { font-size: .76rem; color: var(--faint); }

.cart-remove {
  grid-area: remove;
  justify-self: end;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--muted);
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.cart-remove:hover { background: var(--err-bg); color: var(--err-fg); border-color: #f6c9c5; }

/* Send panel */
.cart-send {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
}
.cart-send h2 { font-size: 1.1rem; margin-bottom: .5rem; }
.cart-send > p { font-size: .88rem; color: var(--muted); margin-bottom: 1.15rem; }

.cart-preview { margin-top: 1.35rem; }
.cart-preview h3 {
  font-size: .72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .11em; margin-bottom: .55rem;
}
.cart-preview pre {
  margin: 0;
  padding: .85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.6;
  color: var(--body);
  white-space: pre-wrap;   /* wrap, never scroll sideways */
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
}

.cart-assurance { list-style: none; margin: 1.35rem 0 0; padding: 0; display: grid; gap: .5rem; }
.cart-assurance li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .83rem; color: var(--body); margin: 0;
}
.cart-assurance svg { flex: 0 0 15px; color: var(--green-600); margin-top: .2rem; }

.alert-note {
  padding: .9rem 1.1rem;
  background: var(--warn-bg);
  border: 1px solid #f5ddb0;
  border-radius: var(--r-sm);
  font-size: .87rem;
  color: var(--warn-fg);
  margin-top: 1.25rem;
}
.alert-note p { margin-bottom: .7rem; }
.alert-note p:last-child { margin-bottom: 0; }

@media (min-width: 620px) {
  .cart-row {
    grid-template-columns: auto 64px minmax(0, 1fr) auto auto;
    grid-template-areas: "num thumb info qty remove";
  }
}

@media (min-width: 960px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .cart-send { position: sticky; top: calc(var(--header-h) + 20px); }
}

/* ---------------------------------------------------------------------
   15c. BLOG ARTICLE
   Long-form typography. The measure is capped by .wrap-narrow because
   line lengths beyond ~75 characters are measurably harder to read.
   ------------------------------------------------------------------ */
.article-head { margin-bottom: 1.75rem; }

.article-meta {
  display: flex; flex-wrap: wrap; gap: .4rem .6rem;
  align-items: center;
  font-size: .84rem; color: var(--muted);
  margin-bottom: .9rem;
}
.article-sep { color: var(--faint); }

.article-head h1 { margin-bottom: .9rem; }

.article-standfirst {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.article-image {
  margin: 0 0 2.25rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--canvas-2);
  aspect-ratio: 16/9;
  max-width: 100%;
}
.article-image img { width: 100%; height: 100%; object-fit: cover; }

/* --- Article body ---
   These selectors style admin-authored markup. Only tags the sanitiser
   permits are listed; anything else cannot reach the page. */
.article-body { font-size: 1.02rem; line-height: 1.75; color: var(--body); }

.article-body > *:first-child { margin-top: 0; }
.article-body > *:last-child { margin-bottom: 0; }

.article-body h2 {
  font-size: clamp(1.28rem, 1.1rem + .7vw, 1.6rem);
  margin: 2.5rem 0 .85rem;
}
.article-body h3 {
  font-size: clamp(1.1rem, 1rem + .4vw, 1.28rem);
  margin: 2rem 0 .7rem;
}
.article-body h4 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; }

.article-body p { margin: 0 0 1.35rem; }

.article-body ul, .article-body ol { margin: 0 0 1.35rem; padding-left: 1.5rem; }
.article-body li { margin-bottom: .55rem; }
.article-body li > ul, .article-body li > ol { margin-top: .55rem; margin-bottom: .3rem; }

.article-body dl { margin: 0 0 1.35rem; }
.article-body dt { font-weight: 700; color: var(--ink); margin-top: 1rem; }
.article-body dd { margin: .25rem 0 0; padding-left: 1rem; border-left: 2px solid var(--line); }

.article-body a { font-weight: 550; text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--blue-700); }

.article-body strong, .article-body b { color: var(--ink); font-weight: 700; }

.article-body blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--blue-50);
  border-left: 3px solid var(--blue-600);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink);
  font-size: 1.04rem;
}
.article-body blockquote p:last-child { margin-bottom: 0; }

.article-body img {
  border-radius: var(--r-sm);
  margin: 1.75rem 0;
  border: 1px solid var(--line);
  /* Admin-supplied width/height attributes must not break the layout */
  max-width: 100%;
  height: auto;
}

.article-body figure { margin: 2rem 0; }
.article-body figure img { margin: 0; }
.article-body figcaption {
  font-size: .85rem; color: var(--muted);
  margin-top: .65rem; text-align: center;
}

.article-body hr { margin: 2.5rem 0; }

.article-body code {
  background: var(--canvas-2);
  padding: .12em .4em;
  border-radius: 4px;
  font-size: .88em;
  color: var(--blue-800);
}
.article-body pre {
  background: var(--blue-900);
  color: #dce7f2;
  padding: 1.15rem 1.25rem;
  border-radius: var(--r-sm);
  overflow-x: auto;   /* the block scrolls, never the page */
  margin: 0 0 1.35rem;
  font-size: .86rem;
  line-height: 1.6;
}
.article-body pre code { background: none; color: inherit; padding: 0; }

.article-body mark { background: #fdf3cf; color: var(--ink); padding: .05em .2em; }

/* Tables in article content: the wrapper scrolls on narrow screens */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.35rem;
  font-size: .92rem;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.article-body caption {
  caption-side: bottom;
  font-size: .84rem; color: var(--muted);
  padding-top: .6rem; text-align: left;
}
.article-body th, .article-body td {
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.article-body th { background: var(--blue-50); color: var(--ink); font-weight: 650; }

@media (min-width: 700px) {
  /* Wide enough to lay the table out properly */
  .article-body table { display: table; white-space: normal; }
}

.article-foot {
  display: flex; flex-wrap: wrap; gap: .7rem;
  align-items: center;
  margin-top: 2.75rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------------
   16. FOOTER
   ------------------------------------------------------------------ */
.site-footer { background: var(--blue-900); color: #96aac2; font-size: .9rem; }

.footer-main {
  display: grid; grid-template-columns: 1fr; gap: 2.25rem;
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
}

.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: #7e93ad; }
.footer-about { margin: 1.1rem 0 1.25rem; line-height: 1.7; max-width: 30rem; }

.footer-col h3 {
  font-size: .78rem; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: .13em;
  margin-bottom: 1.05rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .6rem; }
.footer-col a { color: #96aac2; }
.footer-col a:hover { color: #fff; text-decoration: none; }

.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.footer-contact li { display: flex; align-items: flex-start; gap: .65rem; margin: 0; }
.footer-contact svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: .22rem; color: var(--green-500); }
.footer-contact a, .footer-contact span { color: #96aac2; line-height: 1.55; }
.footer-contact a:hover { color: #fff; }

.footer-social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.footer-social a {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .07);
  color: #96aac2;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.footer-social a:hover { background: var(--green-600); color: #fff; }
.footer-social svg { width: 17px; height: 17px; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 1.35rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: .82rem;
  color: #7e93ad;
}
.footer-bottom a { color: #7e93ad; }
.footer-bottom a:hover { color: #fff; }

/* ---------------------------------------------------------------------
   17. FLOATING WHATSAPP
   ------------------------------------------------------------------ */
.wa-float {
  position: fixed; bottom: 20px; right: 20px;
  z-index: 80;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--wa);
  color: #06331a;
  display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(37, 211, 102, .42);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-float:hover {
  transform: scale(1.07);
  box-shadow: 0 10px 32px rgba(37, 211, 102, .55);
  text-decoration: none; color: #06331a;
}
.wa-float svg { width: 28px; height: 28px; }

@media (max-width: 767px) {
  .wa-float { bottom: 16px; right: 16px; width: 50px; height: 50px; }
  .wa-float svg { width: 26px; height: 26px; }
}

/* ---------------------------------------------------------------------
   18. TOAST (cart feedback)
   ------------------------------------------------------------------ */
.toast-stack {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 140;
  display: grid; gap: .5rem;
  width: min(92vw, 400px);
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: .7rem;
  background: var(--ink); color: #fff;
  padding: .85rem 1.05rem;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  font-size: .89rem;
  pointer-events: auto;
  animation: toast-in .28s var(--ease-out);
}
.toast.is-out { animation: toast-out .24s var(--ease) forwards; }
.toast svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: .15rem; color: var(--green-500); }
.toast a { color: #8fe0aa; font-weight: 650; text-decoration: underline; }
.toast-close {
  margin-left: auto; background: none; border: 0; color: #9aa7b8;
  cursor: pointer; padding: 0 0 0 .5rem; line-height: 1;
  font-size: 1.1rem;
}
.toast-close:hover { color: #fff; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

/* ---------------------------------------------------------------------
   19. REVEAL ANIMATION
   Opacity and transform only, so it stays on the compositor. The
   no-js/no-support fallback is "already visible", never hidden content.
   ------------------------------------------------------------------ */
/* Opt IN, not out. Content is visible by default and only starts hidden once
   main.js has added .js to <html>. If the script fails to load or is blocked,
   every product card is still on the page — the usual way scroll animations
   break a site is by hiding content that the reveal script never reaches. */
.reveal { opacity: 1; transform: none; }

.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}

/* ---------------------------------------------------------------------
   20. BREAKPOINTS
   ------------------------------------------------------------------ */
@media (min-width: 640px) {
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .product-detail { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
  .spec-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Full-width blocks for long-form content */
  .spec-block.is-wide { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .footer-main { grid-template-columns: 2.2fr 1fr 1.1fr 1.5fr; gap: 2.5rem; }
}

@media (min-width: 1100px) {
  .product-detail { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
}

/* Very small phones: tighten, never clip */
@media (max-width: 359px) {
  :root { --gutter: .85rem; }

  /* Wrapping is preferable to overflowing at this width, so nowrap comes off
     every button, not just the block ones. */
  .btn {
    padding-inline: 1rem;
    font-size: .87rem;
    white-space: normal;
  }
  .btn-lg { padding: .85rem 1.1rem; font-size: .93rem; }

  /* The detail action buttons stack rather than sharing a 290px row */
  .detail-actions { padding: 1rem; }
  .detail-actions .btn { flex: 1 1 100%; }

  .cart-send { padding: 1rem; }
}

/* Touch devices: secondary icon controls get a comfortable target.
   34px is below the 44px recommendation, which matters most for the cart's
   remove button — a mis-tap there deletes a product the buyer chose. */
@media (hover: none) and (pointer: coarse) {
  .cart-remove { width: 42px; height: 42px; }
  .icon-action { width: 42px; height: 42px; }
}

/* ---------------------------------------------------------------------
   21. MOTION PREFERENCE
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Revealed content must never stay invisible when motion is disabled.
     Written as .js .reveal so it outranks the opt-in rule above — a plain
     .reveal selector would lose on specificity even inside a media query. */
  .js .reveal, .js .reveal.is-visible { opacity: 1; transform: none; }
  .product-card:hover, .category-card:hover { transform: none; }
  .product-card:hover .product-media img { transform: none; }
}

/* ---------------------------------------------------------------------
   22. PRINT — buyers print specification sheets
   ------------------------------------------------------------------ */
@media print {
  .topbar, .site-header, .site-footer, .wa-float, .toast-stack,
  .drawer, .overlay, .detail-actions, .pagination, .cta-band,
  .search-form, .listing-bar { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .page-hero { background: #fff !important; color: #000; padding-block: 0; }
  .page-hero h1, .page-hero .hero-lede { color: #000; }
  .page-hero::before { display: none; }
  .spec-block { border-color: #bbb; break-inside: avoid; }
  .spec-block > h2 { background: #f2f2f2; }
  .product-detail { grid-template-columns: 1fr; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}