/* Generated bundle — edit the numbered sources, not this file. */

/* ---- 00-tokens.css ---- */
/* ==========================================================================
   AFFECTION MEDS — DESIGN TOKENS  (v2 palette + type)
   --------------------------------------------------------------------------
   Variable NAMES are unchanged so every existing rule keeps working; only the
   VALUES are new. That makes this a whole-site restyle with no markup churn.

   PALETTE — deep pine + fresh mint on warm cream.
   The previous teal ramp kept tripping the "cyan on dark" generated-UI tell,
   and read cold for a pharmacy. Pine is darker and warmer, mint carries the
   accent without going neon, and the neutrals are warmed so cream and green
   sit together instead of fighting.

   TYPE — one grotesk. Steps follow a 1.25 ratio at text sizes, opening toward
   1.4 at display sizes so headlines carry. Tracking tightens as size grows and
   stops at -0.035em.
   ========================================================================== */

:root {

  /* ---------------- NEUTRALS (warm, faintly green) ---------------- */
  --am-ink-900: #0A1512;
  --am-ink-800: #10201C;
  --am-ink-700: #2A423B;   /* body copy                              */
  --am-ink-600: #405A52;
  --am-ink-500: #5C766D;   /* secondary text — 4.9:1 on paper        */
  --am-ink-400: #8AA096;
  --am-ink-300: #B6C6BE;
  --am-ink-200: #DCE5E0;   /* borders                                */
  --am-ink-100: #ECF1EE;
  --am-ink-050: #F4F7F5;

  --am-paper:   #FAF9F5;   /* warm cream page ground                 */
  --am-surface: #FFFFFF;

  /* ---------------- BRAND — pine ---------------- */
  --am-brand-900: #07211B;
  --am-brand-800: #0B2E26;
  --am-brand-700: #16503F;  /* primary actions                       */
  --am-brand-600: #1D6650;
  --am-brand-500: #257E62;
  --am-brand-400: #4A9C7E;
  --am-brand-300: #7FBCA3;
  --am-brand-200: #B4D9C7;
  --am-brand-100: #DCEDE4;
  --am-brand-050: #F0F7F3;

  /* ---------------- ACCENT — warm amber for price + rating -------- */
  --am-accent-700: #7E5312;
  --am-accent-600: #A9701C;
  --am-accent-500: #D9932B;
  --am-accent-300: #EFC98A;
  --am-accent-100: #FBF0DC;

  /* Mint, reserved for emphasis on dark grounds. */
  --am-mint-500: #3DDC97;
  --am-mint-300: #8AEDC3;

  /* ---------------- SIGNAL ---------------- */
  --am-success-700: #14513A;
  --am-success-500: #1E8A5F;
  --am-success-100: #E2F5EC;

  --am-warning-700: #6E4708;
  --am-warning-500: #B07C12;
  --am-warning-100: #FCF2DE;

  --am-danger-700:  #7C231C;
  --am-danger-500:  #B5352B;
  --am-danger-100:  #FCEAE8;

  --am-info-700:    #123A63;
  --am-info-500:    #2F6FB5;
  --am-info-100:    #E4EEF9;

  /* ---------------- SEMANTIC ALIASES ---------------- */
  --am-c-text:          var(--am-ink-700);
  --am-c-text-strong:   var(--am-ink-900);
  --am-c-text-muted:    var(--am-ink-500);
  --am-c-text-inverse:  #FFFFFF;
  --am-c-link:          var(--am-brand-700);
  --am-c-link-hover:    var(--am-brand-500);
  --am-c-border:        var(--am-ink-200);
  --am-c-border-strong: var(--am-ink-300);
  --am-c-bg:            var(--am-paper);
  --am-c-bg-alt:        var(--am-ink-050);
  --am-c-bg-brand:      var(--am-brand-800);
  --am-c-surface:       var(--am-surface);
  --am-c-focus:         var(--am-brand-500);

  /* Hero ground, referenced by 06-hero.css. */
  --am-hero-bg: #07211B;

  /* ---------------- SPACING — 4px base, 8px rhythm ---------------- */
  --am-s-0:  0;
  --am-s-1:  0.25rem;
  --am-s-2:  0.5rem;
  --am-s-3:  0.75rem;
  --am-s-4:  1rem;
  --am-s-5:  1.5rem;
  --am-s-6:  2rem;
  --am-s-7:  2.5rem;
  --am-s-8:  3rem;
  --am-s-9:  4rem;
  --am-s-10: 5rem;
  --am-s-11: 6rem;
  --am-s-12: 8rem;

  --am-section-y:    clamp(var(--am-s-9), 6.5vw, var(--am-s-12));
  --am-section-y-sm: clamp(var(--am-s-8), 5vw, var(--am-s-10));

  /* ---------------- LAYOUT ----------------
     --am-container-shop is the 80vw centred measure the shop grid uses. */
  --am-container:      1240px;
  --am-container-wide: 1520px;
  --am-container-shop: min(80vw, 1520px);
  --am-container-text: 720px;
  --am-gutter:         clamp(var(--am-s-4), 4vw, var(--am-s-8));

  --am-header-h:    84px;
  --am-header-h-sm: 66px;

  /* ---------------- TYPE ----------------
     System grotesk: no network request, no third-party font origin. */
  --am-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --am-font-body:    "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --am-font-serif:   "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --am-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --am-fs-display: clamp(2.75rem, 5.6vw, 4.75rem);
  --am-fs-h1:      clamp(2.125rem, 4.2vw, 3.5rem);
  --am-fs-h2:      clamp(1.75rem, 3vw, 2.625rem);
  --am-fs-h3:      clamp(1.3125rem, 1.9vw, 1.75rem);
  --am-fs-h4:      clamp(1.0625rem, 1.3vw, 1.25rem);
  --am-fs-lead:    clamp(1.0625rem, 1.25vw, 1.1875rem);
  --am-fs-body:    1rem;
  --am-fs-sm:      0.9375rem;
  --am-fs-xs:      0.8125rem;

  --am-lh-tight:   1.04;
  --am-lh-snug:    1.18;
  --am-lh-normal:  1.55;
  --am-lh-relaxed: 1.72;

  --am-ls-tight:   -0.035em;
  --am-ls-snug:    -0.022em;
  --am-ls-normal:  0;
  --am-ls-wide:    0.06em;

  --am-fw-regular:  400;
  --am-fw-medium:   500;
  --am-fw-semibold: 600;
  --am-fw-bold:     700;
  --am-fw-black:    800;

  /* ---------------- BORDERS & RADII ---------------- */
  --am-bw:       1px;
  --am-bw-thick: 2px;

  --am-r-sm:     8px;
  --am-r-md:     12px;
  --am-r-lg:     16px;
  --am-r-xl:     22px;
  --am-r-pill:   999px;
  --am-r-circle: 50%;

  /* ---------------- ELEVATION ---------------- */
  --am-shadow-xs: 0 1px 2px rgba(10, 21, 18, 0.05);
  --am-shadow-sm: 0 1px 2px rgba(10, 21, 18, 0.05), 0 2px 8px rgba(10, 21, 18, 0.04);
  --am-shadow-md: 0 2px 6px rgba(10, 21, 18, 0.06), 0 10px 26px rgba(10, 21, 18, 0.07);
  --am-shadow-lg: 0 6px 14px rgba(10, 21, 18, 0.07), 0 24px 54px rgba(10, 21, 18, 0.11);
  --am-shadow-xl: 0 12px 28px rgba(10, 21, 18, 0.10), 0 40px 80px rgba(10, 21, 18, 0.16);
  --am-shadow-brand: 0 10px 26px rgba(22, 80, 63, 0.30);

  --am-glass-bg:     rgba(255, 255, 255, 0.16);
  --am-glass-bg-str: rgba(255, 255, 255, 0.28);
  --am-glass-border: rgba(255, 255, 255, 0.34);
  --am-glass-blur:   blur(14px) saturate(160%);

  /* ---------------- MOTION ---------------- */
  --am-dur-instant: 90ms;
  --am-dur-fast:    160ms;
  --am-dur-base:    260ms;
  --am-dur-slow:    460ms;
  --am-dur-slower:  700ms;
  --am-dur-hero:    900ms;

  --am-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --am-ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --am-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------------- Z-INDEX ---------------- */
  --am-z-base:     0;
  --am-z-raised:   10;
  --am-z-sticky:   100;
  --am-z-header:   200;
  --am-z-dropdown: 300;
  --am-z-drawer:   400;
  --am-z-overlay:  500;
  --am-z-modal:    600;
  --am-z-toast:    700;

  /* ---------------- CONTROLS — WCAG 2.5.5 ---------------- */
  --am-tap-min:      44px;
  --am-control-h:    48px;
  --am-control-h-sm: 40px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --am-dur-instant: 1ms; --am-dur-fast: 1ms; --am-dur-base: 1ms;
    --am-dur-slow: 1ms; --am-dur-slower: 1ms; --am-dur-hero: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 01-base.css ---- */
/* ==========================================================================
   BASE — reset, document defaults, typography, accessibility primitives
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset anchor targets so the sticky masthead never covers a heading. */
  scroll-padding-top: calc(var(--am-header-h) + var(--am-s-6));
}

body.am-theme {
  margin: 0;
  background: var(--am-c-bg);
  color: var(--am-c-text);
  font-family: var(--am-font-body);
  font-size: var(--am-fs-body);
  line-height: var(--am-lh-normal);
  font-weight: var(--am-fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* Guards against 1px overflow from full-bleed sections. */
}

/* Locks scroll behind the mobile drawer without the page jumping. */
body.am-scroll-locked {
  overflow: hidden;
  touch-action: none;
}

/* --------------------------------------------------------------------------
   HEADINGS
   Display font, tight tracking. Sizes come from the fluid scale so there are
   no per-breakpoint font-size overrides anywhere in the theme.
   -------------------------------------------------------------------------- */
.am-theme :where(h1),
.am-theme :where(h2),
.am-theme :where(h3),
.am-theme :where(h4),
.am-theme :where(h5),
.am-theme :where(h6) {
  margin: 0 0 var(--am-s-4);
  font-family: var(--am-font-display);
  color: var(--am-c-text-strong);
  font-weight: var(--am-fw-bold);
  line-height: var(--am-lh-snug);
  letter-spacing: var(--am-ls-snug);
  text-wrap: balance; /* Avoids orphaned words in headlines. */
}

.am-theme :where(h1) { font-size: var(--am-fs-h1); line-height: var(--am-lh-tight); letter-spacing: var(--am-ls-tight); }
.am-theme :where(h2) { font-size: var(--am-fs-h2); }
.am-theme :where(h3) { font-size: var(--am-fs-h3); }
.am-theme :where(h4) { font-size: var(--am-fs-h4); }
.am-theme :where(h5) { font-size: var(--am-fs-body); font-weight: var(--am-fw-semibold); }
.am-theme :where(h6) {
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--am-ls-wide);
  color: var(--am-c-text-muted);
}

.am-theme :where(p) { margin: 0 0 var(--am-s-4); }
.am-theme :where(p):last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   LINKS
   Underlines use an offset skip-ink treatment so they stay legible without
   crowding descenders.
   -------------------------------------------------------------------------- */
/*
   Only unclassed links take the brand link colour. Every component in this
   theme gives its anchors a class and sets its own colour, and an element+class
   selector here (0-0-1-1) would otherwise outrank a single component class
   (0-0-1-0) — which silently painted button labels the same colour as their
   own background. Classed anchors inherit instead.
*/
.am-theme :where(a) { color: inherit; }

.am-theme :where(a):not([class]),
.am-theme .am-prose a,
.am-theme .am-accordion__content a,
.am-theme .am-notice a,
.am-theme .am-check a,
.am-theme .am-newsletter__consent a {
  color: var(--am-c-link);
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--am-dur-fast) var(--am-ease-out),
              text-decoration-color var(--am-dur-fast) var(--am-ease-out);
}
.am-theme :where(a):not([class]):hover,
.am-theme .am-prose a:hover,
.am-theme .am-accordion__content a:hover,
.am-theme .am-notice a:hover,
.am-theme .am-check a:hover,
.am-theme .am-newsletter__consent a:hover { color: var(--am-c-link-hover); text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   MEDIA
   `height:auto` with an explicit aspect-ratio prevents the layout shift and
   the squashed/stretched images called out in the brief.
   -------------------------------------------------------------------------- */
.am-theme :where(img),
.am-theme :where(svg),
.am-theme :where(video),
.am-theme :where(canvas) {
  display: block;
  max-width: 100%;
  height: auto;
}

.am-theme :where(img) { border-style: none; }

/* Any image that must fill a fixed box crops rather than distorts. */
.am-cover { width: 100%; height: 100%; object-fit: cover; }
.am-contain { width: 100%; height: 100%; object-fit: contain; }

.am-icon { flex: none; display: block; }

/* --------------------------------------------------------------------------
   LISTS & QUOTES
   -------------------------------------------------------------------------- */
.am-theme :where(ul),
.am-theme :where(ol) { margin: 0 0 var(--am-s-4); padding-left: var(--am-s-5); }
.am-theme :where(li) { margin-bottom: var(--am-s-2); }
.am-theme :where(li):last-child { margin-bottom: 0; }

.am-theme :where(blockquote) {
  margin: var(--am-s-6) 0;
  padding: var(--am-s-2) 0 var(--am-s-2) var(--am-s-5);
  border-left: var(--am-bw-thick) solid var(--am-brand-300);
  color: var(--am-ink-600);
  font-size: var(--am-fs-lead);
}

.am-theme :where(hr) {
  height: 0;
  margin: var(--am-s-8) 0;
  border: 0;
  border-top: var(--am-bw) solid var(--am-c-border);
}

.am-theme :where(code),
.am-theme :where(kbd),
.am-theme :where(pre) { font-family: var(--am-font-mono); font-size: 0.9em; }

/* --------------------------------------------------------------------------
   TABLES
   -------------------------------------------------------------------------- */
.am-theme :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--am-fs-sm);
}
.am-theme :where(th),
.am-theme :where(td) {
  padding: var(--am-s-3) var(--am-s-4);
  border-bottom: var(--am-bw) solid var(--am-c-border);
  text-align: left;
  vertical-align: top;
}
.am-theme :where(th) { font-weight: var(--am-fw-semibold); color: var(--am-c-text-strong); }

/* Wide tables scroll inside their own container instead of the page. */
.am-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   FORM ELEMENT NORMALISATION
   -------------------------------------------------------------------------- */
.am-theme :where(button),
.am-theme :where(input),
.am-theme :where(select),
.am-theme :where(textarea) {
  font: inherit;
  color: inherit;
  margin: 0;
}
.am-theme :where(button) { background: none; border: 0; cursor: pointer; }
.am-theme :where(textarea) { resize: vertical; }

/* --------------------------------------------------------------------------
   ACCESSIBILITY
   -------------------------------------------------------------------------- */

/* Visible, high-contrast focus ring on keyboard navigation only. */
.am-theme :focus-visible {
  outline: 3px solid var(--am-c-focus);
  outline-offset: 2px;
  border-radius: var(--am-r-sm);
}
.am-theme :focus:not(:focus-visible) { outline: none; }

/* Screen-reader-only text that remains focusable. */
.am-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.am-skip-link {
  position: absolute;
  top: 0; left: 50%;
  z-index: var(--am-z-toast);
  transform: translate(-50%, -120%);
  padding: var(--am-s-3) var(--am-s-5);
  background: var(--am-brand-800);
  color: #fff;
  font-weight: var(--am-fw-semibold);
  text-decoration: none;
  border-radius: 0 0 var(--am-r-md) var(--am-r-md);
  transition: transform var(--am-dur-fast) var(--am-ease-out);
}
.am-skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* Text selection matches the brand rather than the browser default blue. */
.am-theme ::selection { background: var(--am-brand-200); color: var(--am-brand-900); }

/* --------------------------------------------------------------------------
   SCROLL-REVEAL BASE STATE
   JS adds .is-revealed via IntersectionObserver. If JS fails or is blocked the
   `no-js` fallback below keeps everything visible — content is never hidden
   behind a script.
   -------------------------------------------------------------------------- */
.am-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--am-dur-slow) var(--am-ease-out),
              transform var(--am-dur-slow) var(--am-ease-out);
  transition-delay: var(--am-reveal-delay, 0ms);
}
.am-reveal.is-revealed { opacity: 1; transform: none; }

html.no-js .am-reveal,
html:not(.am-js) .am-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .am-reveal { opacity: 1; transform: none; }
}

/* ---- 02-layout.css ---- */
/* ==========================================================================
   LAYOUT — containers, grids, section rhythm
   Astra ships its own wrappers; the overrides at the foot of this file strip
   the parent theme's max-widths so custom templates control their own width.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTAINERS
   -------------------------------------------------------------------------- */
.am-container {
  width: 100%;
  max-width: calc(var(--am-container) + (var(--am-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--am-gutter);
}

.am-container--wide { max-width: calc(var(--am-container-wide) + (var(--am-gutter) * 2)); }
.am-container--text { max-width: calc(var(--am-container-text) + (var(--am-gutter) * 2)); }
.am-container--flush { padding-inline: 0; }

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */
.am-section { padding-block: var(--am-section-y); }
.am-section--sm { padding-block: var(--am-section-y-sm); }
.am-section--flush-top { padding-top: 0; }
.am-section--flush-bottom { padding-bottom: 0; }

.am-section--alt { background: var(--am-c-bg-alt); }
.am-section--brand { background: var(--am-c-bg-brand); color: rgba(255, 255, 255, 0.86); }
.am-section--brand h1,
.am-section--brand h2,
.am-section--brand h3,
.am-section--brand h4 { color: #fff; }

/* --------------------------------------------------------------------------
   SECTION HEADER
   Eyebrow + title + optional description and trailing action.
   -------------------------------------------------------------------------- */
.am-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--am-s-5);
  margin-bottom: var(--am-s-8);
}

.am-section-head__text { max-width: 62ch; }

.am-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--am-s-2);
  margin-bottom: var(--am-s-3);
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  color: var(--am-brand-600);
}
.am-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: var(--am-r-pill);
}
.am-section--brand .am-eyebrow { color: var(--am-brand-200); }

.am-section-head__title { margin: 0; }

.am-section-head__desc {
  margin: var(--am-s-4) 0 0;
  font-size: var(--am-fs-lead);
  line-height: var(--am-lh-normal);
  color: var(--am-c-text-muted);
}
.am-section--brand .am-section-head__desc { color: rgba(255, 255, 255, 0.76); }

/* Centred variant. */
.am-section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.am-section-head--center .am-section-head__text { margin-inline: auto; }
.am-section-head--center .am-eyebrow::before { display: none; }

/* --------------------------------------------------------------------------
   GRID
   `--am-grid-min` drives an auto-fit track so grids reflow by available space
   rather than by breakpoint. Explicit column classes are available where a
   fixed count matters.
   -------------------------------------------------------------------------- */
.am-grid {
  display: grid;
  gap: var(--am-grid-gap, var(--am-s-5));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--am-grid-min, 260px), 100%), 1fr));
}

.am-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.am-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.am-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.am-grid--gap-lg { --am-grid-gap: var(--am-s-8); }
.am-grid--gap-sm { --am-grid-gap: var(--am-s-4); }

/* Two-column split used by About and Contact. */
.am-split {
  display: grid;
  gap: clamp(var(--am-s-6), 5vw, var(--am-s-10));
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  align-items: center;
}
.am-split--top { align-items: start; }
.am-split--aside { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1025px) {
  /* Content + sticky sidebar, used on Shop and single Product. */
  .am-split--aside { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
  .am-split--aside-right { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
}

/* --------------------------------------------------------------------------
   UTILITIES
   Deliberately minimal — layout lives in components, not utility soup.
   -------------------------------------------------------------------------- */
.am-stack { display: flex; flex-direction: column; gap: var(--am-stack-gap, var(--am-s-4)); }
.am-row { display: flex; align-items: center; gap: var(--am-row-gap, var(--am-s-3)); flex-wrap: wrap; }
.am-row--between { justify-content: space-between; }
.am-row--center { justify-content: center; }
.am-row--nowrap { flex-wrap: nowrap; }

.am-text-center { text-align: center; }
.am-measure { max-width: 68ch; }
.am-mt-0 { margin-top: 0; }
.am-mb-0 { margin-bottom: 0; }

.am-full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   PAGE BANNER — shared by About, Contact and policy pages
   -------------------------------------------------------------------------- */
.am-page-banner {
  position: relative;
  padding-block: calc(var(--am-header-h) + clamp(var(--am-s-8), 6vw, var(--am-s-11))) clamp(var(--am-s-8), 6vw, var(--am-s-10));
  background: #05171A;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Soft moving light so the banner is not a flat block of colour. */
.am-page-banner::after {
  content: "";
  position: absolute;
  inset: -30% -20% auto auto;
  width: min(620px, 80vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(23, 134, 143, 0.38) 0%, transparent 68%);
  z-index: -1;
  pointer-events: none;
}


.am-page-banner__inner { max-width: 74ch; }
.am-page-banner h1 { color: #fff; margin-bottom: var(--am-s-4); }
.am-page-banner__lead {
  font-size: var(--am-fs-lead);
  color: rgba(255, 255, 255, 0.80);
  margin: 0;
}

/* Breadcrumb. */
.am-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-s-2);
  margin-bottom: var(--am-s-5);
  padding: 0;
  list-style: none;
  font-size: var(--am-fs-sm);
}
.am-crumbs li { margin: 0; display: flex; align-items: center; gap: var(--am-s-2); }
.am-crumbs a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.am-crumbs a:hover { color: #fff; text-decoration: underline; }
.am-crumbs [aria-current="page"] { color: #fff; font-weight: var(--am-fw-medium); }
.am-crumbs__sep { color: rgba(255, 255, 255, 0.42); }

/* --------------------------------------------------------------------------
   ASTRA PARENT OVERRIDES
   Astra constrains content to its own container width and adds page padding
   the custom templates handle themselves.
   -------------------------------------------------------------------------- */
.am-theme .site-content .ast-container,
.am-theme .ast-container { max-width: none; padding: 0; }

.am-theme .site-content > .ast-container { display: block; }

.am-theme #primary,
.am-theme .site-main,
.am-theme .entry-content { margin: 0; padding: 0; }

.am-theme .entry-content > :last-child { margin-bottom: 0; }

/* Astra's own header/footer are replaced by the custom markup. */
.am-theme .site-header,
.am-theme .ast-mobile-header-wrap,
.am-theme .site-footer,
.am-theme .ast-scroll-to-top-wrap { display: none !important; }

/* ---- 03-header.css ---- */
/* ==========================================================================
   HEADER — single transparent bar, matching the reference lockup
   --------------------------------------------------------------------------
   Reference anatomy:
     left    serif wordmark, small caps, wide tracking
     centre  serif nav, small caps, generous gaps
     right   one glass "Contact" pill
   No utility bar. The bar is transparent over the hero and gains a light
   surface once scrolled.
   ========================================================================== */

.am-header {
  position: sticky;
  top: 0;
  z-index: var(--am-z-header);
  background: var(--am-c-surface);
  transition: background var(--am-dur-base) var(--am-ease-out),
              box-shadow var(--am-dur-base) var(--am-ease-out);
}

.am-header__inner {
  display: flex;
  align-items: center;
  gap: var(--am-s-5);
  min-height: var(--am-header-h);
}

/* Elevation is declared once: a shadow when stuck, no border. */
.am-header.is-stuck { box-shadow: 0 1px 0 rgba(8, 24, 26, 0.08), 0 8px 28px rgba(8, 24, 26, 0.06); }

/* Transparent over the hero, front page only. */
.am-has-transparent-header .am-header {
  position: fixed;
  inset: 0 0 auto 0;
  background: transparent;
}
.am-has-transparent-header .am-header:not(.is-stuck) .am-brand__name,
.am-has-transparent-header .am-header:not(.is-stuck) .am-nav__link,
.am-has-transparent-header .am-header:not(.is-stuck) .am-iconbtn { color: #fff; }

.am-has-transparent-header .am-header.is-stuck {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
}

/* --------------------------------------------------------------------------
   WORDMARK
   -------------------------------------------------------------------------- */
.am-brand {
  flex: none;
  text-decoration: none;
  color: var(--am-ink-900);
}

.am-brand__name {
  font-family: var(--am-font-serif);
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);   /* 22 → 28px */
  font-weight: var(--am-fw-bold);
  /* Small caps with wide tracking is the reference's defining detail. */
  font-variant: small-caps;
  letter-spacing: 0.055em;
  line-height: 1;
  white-space: nowrap;
  color: inherit;
  transition: color var(--am-dur-base) var(--am-ease-out);
}

/* --------------------------------------------------------------------------
   NAV — serif small caps, centred
   -------------------------------------------------------------------------- */
.am-nav { margin-inline: auto; }

.am-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--am-s-4), 2.4vw, var(--am-s-8));
  margin: 0;
  padding: 0;
  list-style: none;
}
.am-nav__item { margin: 0; position: relative; }

.am-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--am-tap-min);
  padding: 0;
  font-family: var(--am-font-serif);
  font-size: clamp(1rem, 1.15vw, 1.125rem);   /* 16 → 18px */
  font-weight: var(--am-fw-medium);
  font-variant: small-caps;
  letter-spacing: 0.045em;
  color: var(--am-ink-800);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  transition: color var(--am-dur-fast) var(--am-ease-out);
}

/* Hairline that wipes in from the left. */
.am-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--am-dur-base) var(--am-ease-out);
}
.am-nav__link:hover::after,
.am-nav__link.is-current::after,
.am-nav__item--has-mega[data-open="true"] .am-nav__link::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   CONDITIONS MENU
   A plain two-column list on a white sheet. No icon tiles, no promo panel.
   -------------------------------------------------------------------------- */
.am-mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: var(--am-z-dropdown);
  width: min(520px, calc(100vw - var(--am-s-8)));
  transform: translateX(-50%) translateY(-6px);
  background: var(--am-c-surface);
  border-radius: var(--am-r-md);
  box-shadow: 0 18px 60px rgba(8, 24, 26, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--am-dur-base) var(--am-ease-out),
              transform var(--am-dur-base) var(--am-ease-out),
              visibility var(--am-dur-base);
}
.am-mega[hidden] { display: block; }

.am-nav__item--has-mega[data-open="true"] .am-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.am-mega__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--am-s-5);
  padding: var(--am-s-4);
}

.am-mega__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--am-s-4);
  min-height: var(--am-tap-min);
  padding: var(--am-s-2) var(--am-s-3);
  border-radius: var(--am-r-sm);
  font-size: var(--am-fs-sm);
  color: var(--am-ink-700);
  text-decoration: none;
  transition: background var(--am-dur-fast) var(--am-ease-out),
              color var(--am-dur-fast) var(--am-ease-out);
}
.am-mega__item:hover { background: var(--am-brand-050); color: var(--am-brand-900); }
.am-mega__name { font-weight: var(--am-fw-medium); }
.am-mega__count { flex: none; font-size: var(--am-fs-xs); color: var(--am-ink-400); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   ACTIONS
   -------------------------------------------------------------------------- */
.am-header__actions {
  display: flex;
  align-items: center;
  gap: var(--am-s-2);
  flex: none;
  margin-left: auto;
}

.am-iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--am-tap-min);
  height: var(--am-tap-min);
  border-radius: var(--am-r-circle);
  color: var(--am-ink-800);
  background: transparent;
  text-decoration: none;
  transition: background var(--am-dur-fast) var(--am-ease-out),
              color var(--am-dur-fast) var(--am-ease-out);
}
.am-iconbtn:hover { background: rgba(8, 24, 26, 0.06); }
.am-has-transparent-header .am-header:not(.is-stuck) .am-iconbtn:hover { background: rgba(255, 255, 255, 0.18); }

.am-iconbtn__badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: var(--am-r-pill);
  background: var(--am-brand-600);
  color: #fff;
  font-size: 0.625rem;
  font-weight: var(--am-fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/*
   CONTACT PILL — the reference's frosted capsule. Over the hero it is glass;
   once the header is stuck it becomes a solid brand pill so it stays legible
   against white.
*/
.am-contactpill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 var(--am-s-6);
  border-radius: var(--am-r-pill);
  background: var(--am-brand-700);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: var(--am-fw-semibold);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--am-dur-fast) var(--am-ease-out),
              color var(--am-dur-fast) var(--am-ease-out),
              transform var(--am-dur-fast) var(--am-ease-out);
}
.am-contactpill:hover { background: var(--am-brand-800); color: #fff; transform: translateY(-1px); }

.am-has-transparent-header .am-header:not(.is-stuck) .am-contactpill {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}
.am-has-transparent-header .am-header:not(.is-stuck) .am-contactpill:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--am-slide-deep, var(--am-brand-900));
}

/* --------------------------------------------------------------------------
   BURGER — hidden until the nav collapses
   -------------------------------------------------------------------------- */
.am-burger {
  display: none;
  place-items: center;
  width: var(--am-tap-min);
  height: var(--am-tap-min);
  border-radius: var(--am-r-circle);
  color: var(--am-ink-900);
  background: transparent;
}
.am-has-transparent-header .am-header:not(.is-stuck) .am-burger { color: #fff; }

.am-burger__box { display: block; width: 22px; height: 12px; position: relative; }
.am-burger__bar,
.am-burger__bar::before,
.am-burger__bar::after {
  position: absolute;
  left: 0;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  border-radius: var(--am-r-pill);
  transition: transform var(--am-dur-base) var(--am-ease-out);
}
.am-burger__bar { top: 0; }
.am-burger__bar::before { content: ""; top: 5px; }
.am-burger__bar::after { content: ""; top: 10px; }

/* --------------------------------------------------------------------------
   MOBILE DRAWER
   -------------------------------------------------------------------------- */
.am-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--am-z-overlay);
  background: rgba(8, 24, 26, 0.46);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--am-dur-base) var(--am-ease-out), visibility var(--am-dur-base);
}
.am-drawer-scrim[hidden] { display: block; }
.am-drawer-scrim.is-open { opacity: 1; visibility: visible; }

.am-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--am-z-drawer);
  width: min(380px, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--am-c-surface);
  box-shadow: -20px 0 60px rgba(8, 24, 26, 0.22);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--am-dur-base) var(--am-ease-out), visibility var(--am-dur-base);
  overscroll-behavior: contain;
}
.am-drawer[hidden] { display: flex; }
.am-drawer.is-open { transform: translateX(0); visibility: visible; }

.am-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-s-4);
  padding: var(--am-s-4) var(--am-s-5);
  flex: none;
}
.am-drawer__brand {
  font-family: var(--am-font-serif);
  font-size: 1.25rem;
  font-weight: var(--am-fw-bold);
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--am-ink-900);
}

.am-drawer__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--am-s-3) var(--am-s-4) var(--am-s-8);
  -webkit-overflow-scrolling: touch;
}

.am-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-s-3);
  width: 100%;
  min-height: 56px;
  padding: var(--am-s-3) var(--am-s-2);
  font-family: var(--am-font-serif);
  font-size: 1.25rem;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--am-ink-900);
  text-decoration: none;
  text-align: left;
  background: none;
  transition: color var(--am-dur-fast) var(--am-ease-out);
}
.am-drawer__link:hover { color: var(--am-brand-700); }
.am-drawer__acc .am-icon { transition: transform var(--am-dur-base) var(--am-ease-out); }
.am-drawer__acc[aria-expanded="true"] .am-icon { transform: rotate(180deg); }

.am-drawer__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--am-dur-base) var(--am-ease-out);
}
.am-drawer__panel[hidden] { display: grid; }
.am-drawer__panel.is-open { grid-template-rows: 1fr; }
.am-drawer__panelinner { overflow: hidden; min-height: 0; padding-left: var(--am-s-2); }

.am-drawer__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-s-3);
  min-height: var(--am-tap-min);
  padding: var(--am-s-2);
  font-size: var(--am-fs-sm);
  color: var(--am-ink-600);
  text-decoration: none;
}
.am-drawer__sublink:hover { color: var(--am-brand-700); }
.am-drawer__count { font-size: var(--am-fs-xs); color: var(--am-ink-400); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   HEADER RESPONSIVE
   The wordmark is a long two-word serif lockup, so the right-hand cluster has
   to shed items early or the Contact pill is pushed off the viewport.
   Measured: at 419px the brand + cart + pill + burger came to ~415px plus gaps
   and the pill was clipped.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .am-nav { display: none; }
  .am-burger { display: grid; }
}

@media (max-width: 860px) {
  /* Contact lives in the drawer from here down, so the pill is redundant. */
  .am-contactpill { display: none; }
}

@media (max-width: 560px) {
  .am-brand__name { font-size: 1.25rem; letter-spacing: 0.04em; }
  .am-header__inner { gap: var(--am-s-3); }
}

@media (max-width: 400px) {
  .am-brand__name { font-size: 1.125rem; }
  /* Basket is reachable from the drawer; keep only the menu affordance. */
  .am-iconbtn--cart { display: none; }
}

/* ---- 04-footer.css ---- */
/* ==========================================================================
   FOOTER — newsletter band, link columns, compliance strip, legal bar
   ========================================================================== */

/* --------------------------------------------------------------------------
   NEWSLETTER
   Sits above the footer proper on a tinted band so it reads as a distinct
   invitation rather than another footer column.
   -------------------------------------------------------------------------- */
.am-newsletter {
  background: var(--am-brand-050);
  border-top: var(--am-bw) solid var(--am-brand-100);
  padding-block: var(--am-section-y-sm);
}

.am-newsletter__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--am-s-6), 5vw, var(--am-s-10));
  align-items: center;
}

.am-newsletter__title { margin: 0 0 var(--am-s-3); font-size: var(--am-fs-h2); }
.am-newsletter__desc { margin: 0; color: var(--am-c-text-muted); font-size: var(--am-fs-lead); max-width: 46ch; }

.am-newsletter__form { display: flex; flex-direction: column; gap: var(--am-s-4); }

.am-newsletter__row { display: flex; gap: var(--am-s-2); }
.am-newsletter__row .am-input { flex: 1 1 auto; min-width: 0; background: var(--am-c-surface); }
.am-newsletter__row .am-btn { flex: none; }

.am-newsletter__consent { color: var(--am-c-text-muted); font-size: var(--am-fs-xs); line-height: var(--am-lh-normal); }
.am-newsletter__consent a { color: var(--am-brand-700); }

/* --------------------------------------------------------------------------
   FOOTER SHELL
   -------------------------------------------------------------------------- */
.am-footer {
  position: relative;
  background: #05171A;
  color: rgba(255, 255, 255, 0.66);
  padding-block: var(--am-s-11) var(--am-s-6);
  font-size: var(--am-fs-sm);
}

.am-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--am-s-8);
  padding-bottom: var(--am-s-9);
}

/* Brand column ------------------------------------------------------------ */
.am-brand--footer { color: #fff; margin-bottom: var(--am-s-5); }
.am-brand--footer .am-brand__mark { color: rgba(255, 255, 255, 0.16); }
.am-brand--footer .am-brand__name { color: #fff; }
.am-brand--footer .am-brand__sub { color: rgba(255, 255, 255, 0.70); }

.am-footer__blurb {
  margin: 0 0 var(--am-s-5);
  max-width: 44ch;
  line-height: var(--am-lh-relaxed);
  color: rgba(255, 255, 255, 0.62);
}

.am-footer__contact { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--am-s-3); }
.am-footer__contact li { display: flex; align-items: center; gap: var(--am-s-3); margin: 0; }
.am-footer__contact .am-icon { color: rgba(255, 255, 255, 0.70); flex: none; }
.am-footer__contact a { color: rgba(255, 255, 255, 0.86); text-decoration: none; }
.am-footer__contact a:hover { color: #fff; text-decoration: underline; }

/* Link columns ------------------------------------------------------------ */
.am-footer__heading {
  margin: 0 0 var(--am-s-5);
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  color: #fff;
}

.am-footer__links { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--am-s-3); }
.am-footer__links li { margin: 0; }
.am-footer__links a {
  display: inline-block;
  color: rgba(255, 255, 255, 0.64);
  text-decoration: none;
  transition: color var(--am-dur-fast) var(--am-ease-out),
              transform var(--am-dur-fast) var(--am-ease-out);
}
.am-footer__links a:hover { color: #fff; transform: translateX(3px); }

/* --------------------------------------------------------------------------
   COMPLIANCE STRIP
   -------------------------------------------------------------------------- */
.am-footer__compliance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--am-s-6);
  padding-block: var(--am-s-6);
  border-top: var(--am-bw) solid rgba(255, 255, 255, 0.10);
  border-bottom: var(--am-bw) solid rgba(255, 255, 255, 0.10);
}

.am-footer__reg { display: flex; align-items: flex-start; gap: var(--am-s-3); }

.am-footer__reg-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: var(--am-r-md);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.70);
}

.am-footer__reg-title {
  display: block;
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--am-s-1);
}
.am-footer__reg-text {
  display: block;
  font-size: var(--am-fs-xs);
  line-height: var(--am-lh-normal);
  color: rgba(255, 255, 255, 0.58);
}

.am-footer__payments { display: flex; flex-direction: column; gap: var(--am-s-3); }
.am-paylist { display: flex; flex-wrap: wrap; gap: var(--am-s-2); }
.am-pay {
  padding: var(--am-s-1) var(--am-s-3);
  border: var(--am-bw) solid rgba(255, 255, 255, 0.16);
  border-radius: var(--am-r-sm);
  font-size: 0.6875rem;
  font-weight: var(--am-fw-semibold);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   SAFETY NOTICE
   -------------------------------------------------------------------------- */
.am-footer__safety {
  display: flex;
  gap: var(--am-s-3);
  margin: var(--am-s-6) 0 0;
  padding: var(--am-s-4) var(--am-s-5);
  border-radius: var(--am-r-md);
  background: rgba(168, 112, 15, 0.16);
  border: var(--am-bw) solid rgba(224, 203, 169, 0.24);
  font-size: var(--am-fs-xs);
  line-height: var(--am-lh-normal);
  color: rgba(255, 255, 255, 0.76);
}
.am-footer__safety .am-icon { flex: none; color: var(--am-accent-300); margin-top: 1px; }

/* --------------------------------------------------------------------------
   LEGAL BAR
   -------------------------------------------------------------------------- */
.am-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-s-4);
  padding-top: var(--am-s-6);
  margin-top: var(--am-s-6);
  border-top: var(--am-bw) solid rgba(255, 255, 255, 0.10);
}

.am-footer__copy { margin: 0; font-size: var(--am-fs-xs); color: rgba(255, 255, 255, 0.50); }
.am-footer__sep { margin-inline: var(--am-s-2); opacity: 0.5; }

.am-footer__legallinks { display: flex; flex-wrap: wrap; gap: var(--am-s-5); margin: 0; padding: 0; list-style: none; }
.am-footer__legallinks li { margin: 0; }
.am-footer__legallinks a { font-size: var(--am-fs-xs); color: rgba(255, 255, 255, 0.50); text-decoration: none; }
.am-footer__legallinks a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   BACK TO TOP
   -------------------------------------------------------------------------- */
.am-totop {
  position: fixed;
  right: var(--am-s-5);
  bottom: var(--am-s-5);
  z-index: var(--am-z-sticky);
  display: grid;
  place-items: center;
  width: var(--am-tap-min);
  height: var(--am-tap-min);
  border-radius: var(--am-r-circle);
  background: var(--am-brand-700);
  color: #fff;
  box-shadow: var(--am-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--am-dur-base) var(--am-ease-out),
              transform var(--am-dur-base) var(--am-ease-out),
              visibility var(--am-dur-base),
              background var(--am-dur-fast) var(--am-ease-out);
}
.am-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.am-totop:hover { background: var(--am-brand-800); }
/* The icon is a left-chevron rotated to point up — one less path in the set. */
.am-totop .am-icon { transform: rotate(90deg); }

/* --------------------------------------------------------------------------
   DARK-SURFACE LINK COLOUR
   The brand link colour is tuned for light backgrounds; on the footer's dark
   ground it drops to 1.7:1. Links here inherit the footer's own text colour.
   -------------------------------------------------------------------------- */
.am-theme .am-footer a,
.am-theme .am-footer .am-check a,
.am-theme .am-footer .am-notice a { color: rgba(255, 255, 255, 0.88); }
.am-theme .am-footer a:hover { color: #fff; }
/* ---- 05-components.css ---- */
/* ==========================================================================
   COMPONENTS — buttons, badges, cards, forms, accordion, pagination, notices
   Reusable across every template. Nothing page-specific belongs here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTONS
   All variants share one base. Minimum height equals the 44px tap target;
   the default 48px control height gives comfortable padding above that.
   -------------------------------------------------------------------------- */
.am-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--am-s-2);
  min-height: var(--am-control-h);
  padding: var(--am-s-3) var(--am-s-6);
  border: var(--am-bw) solid transparent;
  border-radius: var(--am-r-pill);
  font-family: var(--am-font-body);
  font-size: var(--am-fs-sm);
  font-weight: var(--am-fw-semibold);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--am-dur-fast) var(--am-ease-out),
              color var(--am-dur-fast) var(--am-ease-out),
              border-color var(--am-dur-fast) var(--am-ease-out),
              transform var(--am-dur-fast) var(--am-ease-out);
}

.am-btn:hover { }
.am-btn:active { transform: translateY(0); transition-duration: var(--am-dur-instant); }
.am-btn[disabled],
.am-btn.is-disabled { opacity: 0.5; pointer-events: none; }

.am-btn .am-icon { transition: transform var(--am-dur-base) var(--am-ease-out); }
.am-btn:hover .am-icon--arrow-right { transform: translateX(3px); }

/* Primary — solid brand. */
.am-btn--primary {
  background: var(--am-brand-700);
  color: #fff;
}
.am-btn--primary:hover { background: var(--am-brand-800); color: #fff; box-shadow: var(--am-shadow-brand); }

/* Secondary — outlined. */
.am-btn--secondary {
  background: transparent;
  border-color: var(--am-c-border-strong);
  color: var(--am-ink-800);
}
.am-btn--secondary:hover {
  border-color: var(--am-brand-600);
  background: var(--am-brand-050);
  color: var(--am-brand-800);
}

/* Ghost — text-only with a soft hover pad. */
.am-btn--ghost { background: transparent; color: var(--am-brand-700); padding-inline: var(--am-s-4); }
.am-btn--ghost:hover { background: var(--am-brand-050); color: var(--am-brand-800); }

/* Light — for use on dark/brand backgrounds. */
.am-btn--light { background: #fff; color: var(--am-brand-900); }
.am-btn--light:hover { background: var(--am-brand-050); color: var(--am-brand-900); }

/* Accent — warm sand, used sparingly for editorial CTAs. */
.am-btn--accent { background: var(--am-accent-500); color: var(--am-ink-900); }
.am-btn--accent:hover { background: var(--am-accent-600); color: var(--am-ink-900); }

/*
   Glass — sits over hero imagery. Matches the frosted pill in the reference
   design and picks up the current slide's accent on hover.
*/
.am-btn--glass {
  background: var(--am-glass-bg-str);
  border-color: var(--am-glass-border);
  color: #fff;
  -webkit-backdrop-filter: var(--am-glass-blur);
  backdrop-filter: var(--am-glass-blur);
  font-weight: var(--am-fw-bold);
}
.am-btn--glass:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--am-slide-deep, var(--am-brand-900));
  border-color: transparent;
  box-shadow: var(--am-shadow-xl);
}

/* Sizes. */
.am-btn--sm { min-height: var(--am-tap-min); padding: var(--am-s-2) var(--am-s-4); font-size: var(--am-fs-xs); }
.am-btn--lg { min-height: 56px; padding: var(--am-s-4) var(--am-s-8); font-size: var(--am-fs-body); }
.am-btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   BADGES / PILLS
   -------------------------------------------------------------------------- */
.am-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--am-s-1);
  padding: var(--am-s-1) var(--am-s-3);
  border-radius: var(--am-r-pill);
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}
.am-badge--brand   { background: var(--am-brand-100);   color: var(--am-brand-800); }
.am-badge--success { background: var(--am-success-100); color: var(--am-success-700); }
.am-badge--warning { background: var(--am-warning-100); color: var(--am-warning-700); }
.am-badge--danger  { background: var(--am-danger-100);  color: var(--am-danger-700); }
.am-badge--info    { background: var(--am-info-100);    color: var(--am-info-700); }
.am-badge--neutral { background: var(--am-ink-100);     color: var(--am-ink-600); }
.am-badge--pom     { background: var(--am-warning-100); color: var(--am-warning-700); }

/* --------------------------------------------------------------------------
   CARD — generic surface
   -------------------------------------------------------------------------- */
.am-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--am-c-surface);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-lg);
  overflow: hidden;
  transition: border-color var(--am-dur-base) var(--am-ease-out);
}
.am-card--hover:hover {
  border-color: var(--am-brand-200);
}
.am-card__body { padding: var(--am-s-5); display: flex; flex-direction: column; gap: var(--am-s-3); flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   FEATURE CARD — icon + heading + copy (trust badges, values, USPs)
   -------------------------------------------------------------------------- */
.am-feature {
  display: flex;
  flex-direction: column;
  gap: var(--am-s-4);
  padding: var(--am-s-6);
  background: var(--am-c-surface);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-lg);
  transition: border-color var(--am-dur-base) var(--am-ease-out);
}
.am-feature:hover {
  border-color: var(--am-brand-200);
}

.am-feature__icon {
  display: block;
  color: var(--am-brand-600);
  transition: color var(--am-dur-base) var(--am-ease-out);
}
.am-feature:hover .am-feature__icon { color: var(--am-brand-800); }
.am-section--brand .am-feature__icon { color: rgba(255, 255, 255, 0.75); }
.am-product:hover {
  border-color: var(--am-brand-200);
}

.am-product__media {
  position: relative;
  aspect-ratio: 1 / 1;   /* Fixed ratio = no layout shift, no stretched images */
  background: var(--am-ink-050);
  overflow: hidden;
}
.am-product__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* Packshots must never be cropped */
  padding: var(--am-s-5);
  transition: transform var(--am-dur-slow) var(--am-ease-out);
}
.am-product:hover .am-product__media img { transform: scale(1.06); }

.am-product__flags {
  position: absolute;
  top: var(--am-s-3);
  left: var(--am-s-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--am-s-1);
  z-index: var(--am-z-raised);
}


.am-product__body {
  display: flex;
  flex-direction: column;
  gap: var(--am-s-2);
  padding: var(--am-s-5);
  flex: 1 1 auto;
}

.am-product__cat {
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  color: var(--am-brand-600);
}

.am-product__title {
  margin: 0;
  font-size: var(--am-fs-body);
  font-weight: var(--am-fw-semibold);
  line-height: var(--am-lh-snug);
  letter-spacing: 0;
}
.am-product__title a { color: var(--am-ink-900); text-decoration: none; }
.am-product__title a:hover { color: var(--am-brand-700); }
/* Stretched link keeps the whole card clickable without nesting anchors. */
.am-product__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.am-product__meta {
  display: flex;
  align-items: center;
  gap: var(--am-s-2);
  font-size: var(--am-fs-xs);
  color: var(--am-c-text-muted);
}

.am-product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-s-3);
  margin-top: auto;
  padding-top: var(--am-s-3);
}

.am-product__price {
  font-family: var(--am-font-display);
  font-size: var(--am-fs-h4);
  font-weight: var(--am-fw-bold);
  color: var(--am-ink-900);
  letter-spacing: var(--am-ls-snug);
}
.am-product__price del { color: var(--am-c-text-muted); font-size: var(--am-fs-sm); font-weight: var(--am-fw-regular); margin-right: var(--am-s-2); }
.am-product__price ins { text-decoration: none; }

/* The card's add-to-cart sits above the stretched link. */
.am-product__cta { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   STAR RATING
   -------------------------------------------------------------------------- */
.am-stars { display: inline-flex; align-items: center; gap: 1px; color: var(--am-accent-600); }
.am-stars .am-icon { width: 14px; height: 14px; }
.am-stars .is-filled { fill: currentColor; }
.am-stars .is-empty { color: var(--am-ink-300); }

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.am-field { display: flex; flex-direction: column; gap: var(--am-s-2); }

.am-label {
  font-size: var(--am-fs-sm);
  font-weight: var(--am-fw-semibold);
  color: var(--am-ink-800);
}
.am-label .am-req { color: var(--am-danger-500); margin-left: 2px; }

.am-input,
.am-select,
.am-textarea {
  width: 100%;
  min-height: var(--am-control-h);
  padding: var(--am-s-3) var(--am-s-4);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-md);
  background: var(--am-c-surface);
  color: var(--am-ink-800);
  font-size: var(--am-fs-body); /* 16px prevents iOS zoom-on-focus */
  line-height: var(--am-lh-normal);
  transition: border-color var(--am-dur-fast) var(--am-ease-out),
              box-shadow var(--am-dur-fast) var(--am-ease-out);
}
.am-textarea { min-height: 148px; padding-block: var(--am-s-4); }

.am-input::placeholder,
.am-textarea::placeholder { color: var(--am-ink-400); }

.am-input:focus,
.am-select:focus,
.am-textarea:focus {
  outline: none;
  border-color: var(--am-brand-500);
  box-shadow: 0 0 0 3px var(--am-brand-100);
}

.am-input[aria-invalid="true"],
.am-textarea[aria-invalid="true"],
.am-select[aria-invalid="true"] { border-color: var(--am-danger-500); }
.am-input[aria-invalid="true"]:focus,
.am-textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--am-danger-100); }

.am-select {
  appearance: none;
  padding-right: var(--am-s-9);
  /* Inline chevron, encoded so it needs no extra request. */
  background-image: url(../"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23547479' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--am-s-4) center;
  cursor: pointer;
}

.am-help { font-size: var(--am-fs-xs); color: var(--am-c-text-muted); }

.am-error {
  display: none;
  align-items: center;
  gap: var(--am-s-1);
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-medium);
  color: var(--am-danger-500);
}
.am-error.is-visible { display: flex; }

/* Checkbox / radio with a 44px hit area around a 20px control. */
.am-check {
  display: flex;
  align-items: flex-start;
  gap: var(--am-s-3);
  min-height: var(--am-tap-min);
  padding-block: var(--am-s-2);
  font-size: var(--am-fs-sm);
  line-height: var(--am-lh-normal);
  cursor: pointer;
}
.am-check input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--am-brand-600); cursor: pointer; }

/* --------------------------------------------------------------------------
   ACCORDION — FAQ
   Uses the grid-rows 0fr→1fr technique so height animates without JS
   measuring the content.
   -------------------------------------------------------------------------- */
.am-accordion { border-top: var(--am-bw) solid var(--am-c-border); }

.am-accordion__item { border-bottom: var(--am-bw) solid var(--am-c-border); }

.am-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-s-4);
  width: 100%;
  min-height: 64px;
  padding: var(--am-s-4) var(--am-s-2);
  font-family: var(--am-font-display);
  font-size: var(--am-fs-h4);
  font-weight: var(--am-fw-semibold);
  color: var(--am-ink-900);
  text-align: left;
  cursor: pointer;
  transition: color var(--am-dur-fast) var(--am-ease-out);
}
.am-accordion__trigger:hover { color: var(--am-brand-700); }

.am-accordion__sign {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: var(--am-r-circle);
  background: var(--am-brand-100);
  color: var(--am-brand-700);
  transition: background var(--am-dur-base) var(--am-ease-out),
              color var(--am-dur-base) var(--am-ease-out);
}
.am-accordion__trigger[aria-expanded="true"] .am-accordion__sign {
  background: var(--am-brand-700);
  color: #fff;
  transform: rotate(45deg);
}

.am-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--am-dur-base) var(--am-ease-out);
}
.am-accordion__panel[hidden] { display: grid; }
.am-accordion__panel.is-open { grid-template-rows: 1fr; }
.am-accordion__panel > div { overflow: hidden; min-height: 0; }
.am-accordion__content {
  padding: 0 var(--am-s-2) var(--am-s-5);
  max-width: 68ch;
  color: var(--am-c-text-muted);
  line-height: var(--am-lh-relaxed);
}

/* --------------------------------------------------------------------------
   NOTICE — regulatory and safety messaging
   -------------------------------------------------------------------------- */
.am-notice {
  display: flex;
  gap: var(--am-s-4);
  padding: var(--am-s-5);
  border-radius: var(--am-r-lg);
  border: var(--am-bw) solid var(--am-c-border);
  background: var(--am-c-surface);
  font-size: var(--am-fs-sm);
  line-height: var(--am-lh-normal);
}
.am-notice .am-icon { flex: none; }
.am-notice__title { margin: 0 0 var(--am-s-1); font-size: var(--am-fs-sm); font-weight: var(--am-fw-bold); }
.am-notice p { margin: 0; color: var(--am-c-text-muted); }

.am-notice--info    { background: var(--am-info-100);    border-color: transparent; }
.am-notice--info .am-icon,    .am-notice--info .am-notice__title    { color: var(--am-info-700); }
.am-notice--warning { background: var(--am-warning-100); border-color: transparent; }
.am-notice--warning .am-icon, .am-notice--warning .am-notice__title { color: var(--am-warning-700); }
.am-notice--success { background: var(--am-success-100); border-color: transparent; }
.am-notice--success .am-icon, .am-notice--success .am-notice__title { color: var(--am-success-700); }

/* --------------------------------------------------------------------------
   PAGINATION
   -------------------------------------------------------------------------- */
.am-pagination { display: flex; justify-content: center; margin-top: var(--am-s-9); }
.am-pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--am-s-1); margin: 0; padding: 0; list-style: none; }
.am-pagination li { margin: 0; }

.am-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: var(--am-tap-min);
  height: var(--am-tap-min);
  padding: 0 var(--am-s-3);
  border-radius: var(--am-r-md);
  font-size: var(--am-fs-sm);
  font-weight: var(--am-fw-medium);
  color: var(--am-ink-700);
  text-decoration: none;
  transition: background var(--am-dur-fast) var(--am-ease-out), color var(--am-dur-fast) var(--am-ease-out);
}
.am-pagination .page-numbers:hover { background: var(--am-brand-050); color: var(--am-brand-800); }
.am-pagination .page-numbers.current { background: var(--am-brand-700); color: #fff; }
.am-pagination .page-numbers.dots { pointer-events: none; color: var(--am-ink-400); }

/* --------------------------------------------------------------------------
   MARQUEE — logo / assurance ticker
   -------------------------------------------------------------------------- */
.am-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.am-marquee__track { display: flex; width: max-content; gap: var(--am-s-10); animation: am-marquee 38s linear infinite; }
.am-marquee:hover .am-marquee__track { animation-play-state: paused; }
@keyframes am-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .am-marquee__track { animation: none; } }

/* --------------------------------------------------------------------------
   PRODUCT CARD — single-link hover model
   --------------------------------------------------------------------------
   The card exposes exactly ONE link: the stretched title anchor. Earlier there
   were three overlapping anchors (title, quick-view, CTA) all with hrefs, which
   made the status bar flicker between URLs while the pointer moved and let
   clicks land on whichever happened to be topmost mid-transition.

   Hover feedback is limited to properties that do not move the hover target:
   background, border colour and an inner image scale. Lifting the card with
   translateY pulled it out from under the cursor, which un-hovered it and made
   it oscillate.
   -------------------------------------------------------------------------- */
.am-product {
  transition: border-color var(--am-dur-base) var(--am-ease-out),
              background var(--am-dur-base) var(--am-ease-out);
}
.am-product:hover,
.am-product:focus-within {
  border-color: var(--am-brand-300);
  background: var(--am-brand-050);
}

/* The one link. Sits above the card, below nothing. */
.am-product__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* Keeps the image scale from spilling past the rounded corner. */
.am-product__media { overflow: hidden; }

/* Read-only affordance in the card footer — not focusable, not clickable. */
.am-product__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--am-s-1);
  flex: none;
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: 0.02em;
  color: var(--am-brand-700);
  pointer-events: none;
}
.am-product__cue .am-icon { transition: transform var(--am-dur-base) var(--am-ease-out); }
.am-product:hover .am-product__cue .am-icon { transform: translateX(3px); }

/* Focus ring belongs to the card, driven by the link inside it. */
.am-product:focus-within { outline: 3px solid var(--am-c-focus); outline-offset: 2px; }
.am-product__title a:focus-visible { outline: none; }
/* ---- 06-hero.css ---- */
/* ==========================================================================
   HERO — dark editorial split, no banner imagery
   --------------------------------------------------------------------------
   Replaces the banner slider entirely. Structure:
     left    the selling line as real HTML type, subline, two actions
     right   three overlapping photographs on a slow float
     under   a thin credential row

   Every unit is fluid. There is exactly one authored motion moment (the
   staggered entrance plus the slow image float); nothing else animates on load.
   `vh` is always declared before `svh` so an unsupporting browser still gets a
   height — omitting that collapsed the previous hero to 0px.
   ========================================================================== */

.am-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--am-hero-bg, #05171A);
  color: #fff;
  padding-top: calc(var(--am-header-h) + clamp(var(--am-s-8), 7vw, var(--am-s-12)));
  padding-bottom: clamp(var(--am-s-9), 7vw, var(--am-s-12));
}

/* Two soft light sources rather than a flat block of colour. */
.am-hero::before,
.am-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px);
}
.am-hero::before {
  width: min(760px, 90vw);
  aspect-ratio: 1;
  top: -22%;
  left: -12%;
  background: radial-gradient(circle, rgba(23, 134, 143, 0.45) 0%, transparent 66%);
}
.am-hero::after {
  width: min(560px, 70vw);
  aspect-ratio: 1;
  right: -10%;
  bottom: -26%;
  background: radial-gradient(circle, rgba(200, 168, 124, 0.20) 0%, transparent 68%);
}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.am-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(var(--am-s-8), 6vw, var(--am-s-11));
  align-items: center;
}

/* --------------------------------------------------------------------------
   TYPE
   -------------------------------------------------------------------------- */
.am-hero__title {
  margin: 0 0 var(--am-s-5);
  /* Caps at 5.5rem: past that the line breaks badly at 1440 and below. */
  font-size: clamp(2.5rem, 6.2vw, 5.25rem);
  font-weight: var(--am-fw-black);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #fff;
  text-wrap: balance;
}

/* One accent word, tinted rather than gradient-filled. */
.am-hero__title em {
  font-style: normal;
  color: var(--am-brand-300);
}

.am-hero__sub {
  margin: 0 0 var(--am-s-7);
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.am-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-s-3);
  margin-bottom: var(--am-s-8);
}

/* Solid light button — the primary path. */
.am-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--am-s-2);
  min-height: 54px;
  padding: 0 var(--am-s-7);
  border-radius: var(--am-r-pill);
  background: #fff;
  color: #05171A;
  font-size: var(--am-fs-body);
  font-weight: var(--am-fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--am-dur-fast) var(--am-ease-out),
              background var(--am-dur-fast) var(--am-ease-out);
}
.am-hero__btn:hover { transform: translateY(-2px); background: var(--am-brand-100); color: #05171A; }
.am-hero__btn .am-icon { transition: transform var(--am-dur-base) var(--am-ease-out); }
.am-hero__btn:hover .am-icon { transform: translateX(4px); }

/* Outlined secondary. */
.am-hero__btn--ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.am-hero__btn--ghost:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }

/* --------------------------------------------------------------------------
   CREDENTIAL ROW
   Text only. No icon tiles — a rounded icon square above a label is the
   generator template the design audit flags.
   -------------------------------------------------------------------------- */
.am-hero__cred {
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-s-3) var(--am-s-6);
  margin: 0;
  padding: var(--am-s-5) 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.am-hero__cred li {
  display: flex;
  align-items: center;
  gap: var(--am-s-2);
  margin: 0;
  font-size: var(--am-fs-sm);
  color: rgba(255, 255, 255, 0.66);
}
.am-hero__cred .am-icon { color: var(--am-brand-300); flex: none; }

/* --------------------------------------------------------------------------
   IMAGE COLLAGE
   Three photographs, sized in aspect ratios so nothing is ever stretched.
   -------------------------------------------------------------------------- */
.am-hero__art {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--am-s-4);
}

.am-hero__shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--am-r-xl);
  background: rgba(255, 255, 255, 0.05);
  /* Elevation declared once: shadow only, no border. */
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}
.am-hero__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tall portrait spanning both rows on the left of the collage. */
.am-hero__shot--tall { grid-row: span 2; aspect-ratio: 3 / 4; }
.am-hero__shot--wide { aspect-ratio: 4 / 3; }

/* Slow, offset float. Decorative only, and removed under reduced-motion. */
.am-hero__shot--tall { animation: am-float 11s var(--am-ease-inout) infinite alternate; }
.am-hero__shot--wide:nth-of-type(2) { animation: am-float 13s var(--am-ease-inout) -3s infinite alternate; }
.am-hero__shot--wide:nth-of-type(3) { animation: am-float 15s var(--am-ease-inout) -6s infinite alternate; }

@keyframes am-float {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -14px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .am-hero__shot { animation: none !important; }
}

/* --------------------------------------------------------------------------
   ENTRANCE — the single authored moment
   -------------------------------------------------------------------------- */
.am-hero__title,
.am-hero__sub,
.am-hero__actions,
.am-hero__cred,
.am-hero__art {
  animation: am-hero-in 760ms var(--am-ease-out) both;
}
.am-hero__title   { animation-delay: 60ms; }
.am-hero__sub     { animation-delay: 150ms; }
.am-hero__actions { animation-delay: 240ms; }
.am-hero__cred    { animation-delay: 330ms; }
.am-hero__art     { animation-delay: 180ms; }

@keyframes am-hero-in {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .am-hero__title, .am-hero__sub, .am-hero__actions,
  .am-hero__cred, .am-hero__art { animation: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Collage drops below the copy well before the columns get too narrow to read. */
@media (max-width: 1024px) {
  .am-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--am-s-8); }
  .am-hero__sub { max-width: 60ch; }
  .am-hero__art { max-width: 620px; }
}

@media (max-width: 640px) {
  .am-hero { padding-top: calc(var(--am-header-h) + var(--am-s-7)); }

  /* Two wide shots only: the tall portrait plus two crops is too much
     vertical run on a phone. */
  .am-hero__art { grid-template-columns: 1fr; }
  .am-hero__shot--tall { grid-row: auto; aspect-ratio: 4 / 3; }
  .am-hero__shot:nth-of-type(3) { display: none; }

  .am-hero__actions { flex-direction: column; align-items: stretch; }
  .am-hero__btn { width: 100%; }

  .am-hero__cred { gap: var(--am-s-2) var(--am-s-5); }
  .am-hero__cred li { font-size: var(--am-fs-xs); }
}

@media (max-width: 380px) {
  /* Long words in the headline must break rather than push the page wider. */
  .am-hero__title { overflow-wrap: anywhere; letter-spacing: -0.025em; }
}

/* ---- 07-home.css ---- */
/* ==========================================================================
   HOME — condition grid, product scroller, steps, stats, reviews, closing CTA
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONDITION GRID
   -------------------------------------------------------------------------- */
.am-condgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--am-s-4);
}

.am-cond {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--am-s-4);
  padding: var(--am-s-5);
  background: var(--am-c-surface);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-lg);
  text-decoration: none;
  color: var(--am-ink-800);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--am-dur-base) var(--am-ease-out);
}

/* Brand wash sweeps in from the left on hover. */
.am-cond::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--am-brand-050), var(--am-brand-100));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--am-dur-base) var(--am-ease-out);
}
.am-cond:hover::before { transform: scaleX(1); }

.am-cond:hover {
  border-color: var(--am-brand-200);
  color: var(--am-brand-900);
}

.am-cond__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: var(--am-r-md);
  background: var(--am-brand-100);
  color: var(--am-brand-700);
  transition: background var(--am-dur-base) var(--am-ease-out),
              color var(--am-dur-base) var(--am-ease-out);
}
.am-cond:hover .am-cond__icon { background: var(--am-brand-700); color: #fff; }

.am-cond__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.am-cond__name { font-size: var(--am-fs-body); font-weight: var(--am-fw-semibold); line-height: 1.3; }
.am-cond__count { font-size: var(--am-fs-xs); color: var(--am-c-text-muted); }

.am-cond__arrow {
  flex: none;
  color: var(--am-ink-400);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--am-dur-base) var(--am-ease-out),
              transform var(--am-dur-base) var(--am-ease-out),
              color var(--am-dur-base) var(--am-ease-out);
}
.am-cond:hover .am-cond__arrow { opacity: 1; transform: none; color: var(--am-brand-700); }

/* --------------------------------------------------------------------------
   HORIZONTAL PRODUCT SCROLLER
   Native scroll-snap: no carousel library, works with touch, trackpad and
   keyboard, and degrades to a plain overflow list.
   -------------------------------------------------------------------------- */
.am-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--am-gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--am-ink-300) transparent;
  padding-block: var(--am-s-2) var(--am-s-5);
}
.am-scroller::-webkit-scrollbar { height: 6px; }
.am-scroller::-webkit-scrollbar-track { background: transparent; }
.am-scroller::-webkit-scrollbar-thumb { background: var(--am-ink-300); border-radius: var(--am-r-pill); }
.am-scroller::-webkit-scrollbar-thumb:hover { background: var(--am-ink-400); }

.am-scroller__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(264px, 1fr);
  gap: var(--am-s-5);
  max-width: none;
}
.am-scroller__track > * { scroll-snap-align: start; }

/* At wide viewports show four cards inside the standard container. */
@media (min-width: 1200px) {
  .am-scroller__track {
    grid-auto-columns: calc((min(var(--am-container), 100vw - var(--am-gutter) * 2) - var(--am-s-5) * 3) / 4);
  }
}

.am-product__blurb {
  margin: 0;
  font-size: var(--am-fs-xs);
  line-height: var(--am-lh-normal);
  color: var(--am-c-text-muted);
}

/* --------------------------------------------------------------------------
   STEPS
   -------------------------------------------------------------------------- */
.am-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--am-s-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: am-step;
}

.am-step {
  position: relative;
  margin: 0;
  padding: var(--am-s-7) var(--am-s-6) var(--am-s-6);
  background: var(--am-c-surface);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-lg);
  transition: border-color var(--am-dur-base) var(--am-ease-out);
}
.am-step:hover { border-color: var(--am-brand-200); }

/* Connector line between steps on desktop. */
.am-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--am-s-7) + 26px);
  right: calc(var(--am-s-6) * -1);
  width: var(--am-s-6);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--am-brand-200) 0 5px, transparent 5px 10px);
}


.am-step__icon {
  display: block;
  margin-bottom: var(--am-s-5);
  color: var(--am-brand-600);
  transition: color var(--am-dur-base) var(--am-ease-out);
}
.am-step:hover .am-step__icon { color: var(--am-brand-800); }
.am-ticklist .am-icon { flex: none; margin-top: 2px; color: var(--am-brand-600); }
.am-section--brand .am-ticklist li { color: rgba(255, 255, 255, 0.82); }

/* --------------------------------------------------------------------------
   SERVICE FACTS
   A record of what the service is, set as labelled rows rather than a grid of
   metric tiles. Reads as information, not as a dashboard.
   -------------------------------------------------------------------------- */
.am-facts { margin: 0; display: grid; gap: 0; }

.am-facts__row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: var(--am-s-5);
  align-items: baseline;
  padding-block: var(--am-s-5);
  border-top: var(--am-bw) solid rgba(255, 255, 255, 0.14);
}
.am-facts__row:last-child { border-bottom: var(--am-bw) solid rgba(255, 255, 255, 0.14); }

.am-facts dt {
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.70);
}

.am-facts dd {
  margin: 0;
  font-size: var(--am-fs-lead);
  line-height: var(--am-lh-snug);
  color: #fff;
  text-wrap: balance;
}

@media (max-width: 540px) {
  .am-facts__row { grid-template-columns: minmax(0, 1fr); gap: var(--am-s-2); padding-block: var(--am-s-4); }
  .am-facts dd { font-size: var(--am-fs-body); }
}
/* --------------------------------------------------------------------------
   REVIEWS
   -------------------------------------------------------------------------- */
.am-review {
  display: flex;
  flex-direction: column;
  gap: var(--am-s-4);
  margin: 0;
  padding: var(--am-s-6);
  background: var(--am-c-surface);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-lg);
  transition: border-color var(--am-dur-base) var(--am-ease-out);
}
.am-review:hover { border-color: var(--am-brand-200); }

.am-review__text { margin: 0; padding: 0; border: 0; font-size: var(--am-fs-body); line-height: var(--am-lh-relaxed); color: var(--am-ink-700); }
.am-review__text p { margin: 0; }
.am-review__text::before { content: "\201C"; display: block; font-family: var(--am-font-serif); font-size: 3rem; line-height: 0.6; color: var(--am-brand-200); margin-bottom: var(--am-s-3); }

.am-review__by { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: var(--am-s-3); border-top: var(--am-bw) solid var(--am-c-border); }
.am-review__author { font-size: var(--am-fs-sm); font-weight: var(--am-fw-semibold); color: var(--am-ink-900); }
.am-review__meta { font-size: var(--am-fs-xs); color: var(--am-c-text-muted); }

/* --------------------------------------------------------------------------
   CLOSING CTA
   -------------------------------------------------------------------------- */
.am-cta { padding-block: 0 var(--am-section-y); }

.am-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(var(--am-s-8), 6vw, var(--am-s-11)) var(--am-gutter);
  border-radius: var(--am-r-2xl);
  background:
    radial-gradient(120% 160% at 50% 0%, var(--am-brand-100) 0%, var(--am-brand-050) 55%, var(--am-paper) 100%);
  border: var(--am-bw) solid var(--am-brand-100);
  overflow: hidden;
  isolation: isolate;
}

/* Faint concentric rings, echoing the pill-blister motif of the banners. */
.am-cta__inner::before {
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  width: min(760px, 90vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  z-index: -1;
  background:
    repeating-radial-gradient(circle, transparent 0 38px, rgba(23, 134, 143, 0.055) 38px 39px);
  pointer-events: none;
}

.am-cta__icon {
  display: block;
  margin-bottom: var(--am-s-5);
  color: var(--am-brand-600);
}

.am-cta__title { margin: 0 0 var(--am-s-4); max-width: 22ch; font-size: var(--am-fs-h2); }
.am-cta__text { margin: 0 0 var(--am-s-7); max-width: 62ch; font-size: var(--am-fs-lead); color: var(--am-c-text-muted); }
.am-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--am-s-3); }

/* Accents inside brand-coloured sections read as tinted white, not cyan. */
.am-section--brand .am-ticklist .am-icon { color: rgba(255, 255, 255, 0.75); }
.am-theme .am-section--brand a:not(.am-btn) { color: rgba(255, 255, 255, 0.88); }
/* ---- 08-shop.css ---- */
/* ==========================================================================
   SHOP — archive header, filter rail, toolbar, product grid / list views
   ========================================================================== */

.am-shop { padding-block: var(--am-s-8) var(--am-section-y); }

.am-shop__layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(var(--am-s-6), 3vw, var(--am-s-8));
  align-items: start;
}

/* --------------------------------------------------------------------------
   FILTER RAIL
   Sticky sidebar on desktop; becomes a slide-over sheet at ≤1024px.
   -------------------------------------------------------------------------- */
.am-filters {
  position: sticky;
  top: calc(var(--am-header-h) + var(--am-s-5));
  display: flex;
  flex-direction: column;
  gap: var(--am-s-5);
  max-height: calc(100vh - var(--am-header-h) - var(--am-s-10));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--am-s-2);
  scrollbar-width: thin;
}

.am-filters__head { display: none; } /* Only shown in the mobile sheet. */

.am-filtergroup {
  padding: var(--am-s-5);
  background: var(--am-c-surface);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-lg);
}

.am-filtergroup__title {
  margin: 0 0 var(--am-s-4);
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  color: var(--am-c-text-muted);
}

/* Category list ------------------------------------------------------------ */
.am-filterlist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--am-s-1); }
.am-filterlist li { margin: 0; }

.am-filterlist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-s-3);
  min-height: var(--am-tap-min);
  padding: var(--am-s-2) var(--am-s-3);
  border-radius: var(--am-r-sm);
  font-size: var(--am-fs-sm);
  color: var(--am-ink-700);
  text-decoration: none;
  transition: background var(--am-dur-fast) var(--am-ease-out), color var(--am-dur-fast) var(--am-ease-out);
}
.am-filterlist a:hover { background: var(--am-brand-050); color: var(--am-brand-800); }
.am-filterlist a.is-active { background: var(--am-brand-100); color: var(--am-brand-900); font-weight: var(--am-fw-semibold); }

.am-filterlist__count {
  flex: none;
  font-size: var(--am-fs-xs);
  color: var(--am-c-text-muted);
  background: var(--am-ink-100);
  border-radius: var(--am-r-pill);
  padding: 1px 8px;
}
.am-filterlist a.is-active .am-filterlist__count { background: var(--am-brand-200); color: var(--am-brand-900); }

/* Price ------------------------------------------------------------------- */
.am-pricerow { display: flex; align-items: center; gap: var(--am-s-2); }
.am-pricerow .am-input { min-height: var(--am-control-h-sm); padding-inline: var(--am-s-3); font-size: var(--am-fs-sm); }
.am-pricerow__sep { color: var(--am-ink-400); flex: none; }

/* Rating ------------------------------------------------------------------ */
.am-ratingfilter { display: grid; gap: var(--am-s-1); }
.am-ratingfilter a {
  display: flex;
  align-items: center;
  gap: var(--am-s-2);
  min-height: var(--am-tap-min);
  padding: var(--am-s-1) var(--am-s-3);
  border-radius: var(--am-r-sm);
  font-size: var(--am-fs-sm);
  color: var(--am-ink-700);
  text-decoration: none;
}
.am-ratingfilter a:hover { background: var(--am-brand-050); }

/* --------------------------------------------------------------------------
   TOOLBAR — result count, view toggle, sort
   -------------------------------------------------------------------------- */
.am-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-s-4);
  margin-bottom: var(--am-s-6);
  padding-bottom: var(--am-s-5);
  border-bottom: var(--am-bw) solid var(--am-c-border);
}

.am-toolbar__count { font-size: var(--am-fs-sm); color: var(--am-c-text-muted); margin: 0; }
.am-toolbar__count strong { color: var(--am-ink-900); font-weight: var(--am-fw-semibold); }

.am-toolbar__actions { display: flex; align-items: center; gap: var(--am-s-3); flex-wrap: wrap; }

/* View toggle -------------------------------------------------------------- */
.am-viewtoggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--am-ink-100);
  border-radius: var(--am-r-md);
}

.am-viewtoggle button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--am-r-sm);
  color: var(--am-ink-500);
  transition: background var(--am-dur-fast) var(--am-ease-out), color var(--am-dur-fast) var(--am-ease-out);
}
.am-viewtoggle button:hover { color: var(--am-ink-800); }
.am-viewtoggle button.is-active { background: var(--am-c-surface); color: var(--am-brand-700); box-shadow: var(--am-shadow-xs); }

/* Sort --------------------------------------------------------------------- */
.am-sort { display: flex; align-items: center; gap: var(--am-s-2); }
.am-sort label { font-size: var(--am-fs-sm); color: var(--am-c-text-muted); white-space: nowrap; }
.am-sort .am-select { min-height: var(--am-control-h-sm); padding-block: 0; font-size: var(--am-fs-sm); min-width: 190px; }

/* Mobile filter trigger, hidden on desktop. */
.am-filtertrigger { display: none; }

/* --------------------------------------------------------------------------
   PRODUCT GRID
   -------------------------------------------------------------------------- */
.am-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: var(--am-s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.am-products li, .am-product-cell { margin: 0; list-style: none; }

/* WooCommerce's own loop classes are neutralised — the theme owns layout. */
.am-products.products { display: grid; }
.am-products .product::before,
.am-products .product::after { content: none; }

/* List view ---------------------------------------------------------------- */
.am-products.is-list { grid-template-columns: minmax(0, 1fr); gap: var(--am-s-4); }

.am-products.is-list .am-product { flex-direction: row; }

.am-products.is-list .am-product__media {
  flex: none;
  width: 200px;
  aspect-ratio: 1 / 1;
  border-right: var(--am-bw) solid var(--am-c-border);
}

.am-products.is-list .am-product__body { padding: var(--am-s-5) var(--am-s-6); justify-content: center; }
.am-products.is-list .am-product__blurb { -webkit-line-clamp: 3; font-size: var(--am-fs-sm); }
.am-products.is-list .am-product__foot { justify-content: flex-start; gap: var(--am-s-5); }

@media (max-width: 600px) {
  /* List view collapses back to the card layout — a 200px thumb plus text
     does not fit a 375px viewport without squeezing both. */
  .am-products.is-list .am-product { flex-direction: column; }
  .am-products.is-list .am-product__media { width: 100%; border-right: 0; border-bottom: var(--am-bw) solid var(--am-c-border); }
}

/* --------------------------------------------------------------------------
   ACTIVE FILTER CHIPS
   -------------------------------------------------------------------------- */
.am-chips { display: flex; flex-wrap: wrap; gap: var(--am-s-2); margin-bottom: var(--am-s-5); }

.am-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--am-s-2);
  min-height: 34px;
  padding: var(--am-s-1) var(--am-s-2) var(--am-s-1) var(--am-s-3);
  border-radius: var(--am-r-pill);
  background: var(--am-brand-100);
  color: var(--am-brand-900);
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-medium);
  text-decoration: none;
}
.am-chip:hover { background: var(--am-brand-200); color: var(--am-brand-900); }
.am-chip .am-icon { opacity: 0.7; }

/* --------------------------------------------------------------------------
   EMPTY STATE
   -------------------------------------------------------------------------- */
.am-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--am-s-11) var(--am-s-5);
  background: var(--am-c-bg-alt);
  border: var(--am-bw) dashed var(--am-c-border-strong);
  border-radius: var(--am-r-lg);
}
.am-empty__icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin-bottom: var(--am-s-5);
  border-radius: var(--am-r-circle);
  background: var(--am-c-surface);
  color: var(--am-ink-400);
}
.am-empty h2 { margin-bottom: var(--am-s-3); font-size: var(--am-fs-h3); }
.am-empty p { max-width: 46ch; color: var(--am-c-text-muted); margin-bottom: var(--am-s-6); }

/* --------------------------------------------------------------------------
   MOBILE FILTER SHEET  (≤1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .am-shop__layout { grid-template-columns: minmax(0, 1fr); }

  .am-filtertrigger {
    display: inline-flex;
    align-items: center;
    gap: var(--am-s-2);
  }

  .am-filters {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--am-z-drawer);
    width: min(360px, 90vw);
    max-height: none;
    padding: 0;
    background: var(--am-c-surface);
    box-shadow: var(--am-shadow-xl);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--am-dur-base) var(--am-ease-out), visibility var(--am-dur-base);
    gap: 0;
  }
  .am-filters.is-open { transform: none; visibility: visible; }

  .am-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--am-s-4);
    flex: none;
    padding: var(--am-s-4) var(--am-s-5);
    border-bottom: var(--am-bw) solid var(--am-c-border);
  }
  .am-filters__title { font-family: var(--am-font-display); font-size: var(--am-fs-h4); font-weight: var(--am-fw-bold); color: var(--am-ink-900); }

  .am-filters__body { flex: 1 1 auto; overflow-y: auto; padding: var(--am-s-4); display: grid; gap: var(--am-s-4); }

  .am-filtergroup { border: 0; border-bottom: var(--am-bw) solid var(--am-c-border); border-radius: 0; padding-inline: var(--am-s-2); }
  .am-filtergroup:last-child { border-bottom: 0; }

  .am-filters__foot {
    flex: none;
    padding: var(--am-s-4) var(--am-s-5);
    border-top: var(--am-bw) solid var(--am-c-border);
    background: var(--am-c-bg-alt);
  }
}

@media (max-width: 540px) {
  .am-toolbar { gap: var(--am-s-3); }
  .am-toolbar__actions { width: 100%; justify-content: space-between; }
  .am-sort .am-select { min-width: 0; width: 100%; }
  .am-sort { flex: 1 1 auto; }
  .am-sort label { display: none; }
  .am-products { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: var(--am-s-3); }
  .am-product__body { padding: var(--am-s-4); }
}

/* ---- 09-product.css ---- */
/* ==========================================================================
   PRODUCT — single product page: gallery, summary, cart form, tabs, reviews
   ========================================================================== */

.am-pdp { padding-bottom: var(--am-section-y); }

/* Breadcrumb strip above the fold. */
.am-pdp__crumbs {
  padding-block: var(--am-s-5);
  background: var(--am-c-bg-alt);
  border-bottom: var(--am-bw) solid var(--am-c-border);
}
.am-crumbs--dark { margin-bottom: 0; }
.am-crumbs--dark a { color: var(--am-c-text-muted); }
.am-crumbs--dark a:hover { color: var(--am-brand-700); }
.am-crumbs--dark [aria-current="page"] { color: var(--am-ink-900); }
.am-crumbs--dark .am-crumbs__sep { color: var(--am-ink-300); }

.am-pdp__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--am-s-6), 4vw, var(--am-s-10));
  padding-block: var(--am-s-9);
  align-items: start;
}

/* --------------------------------------------------------------------------
   GALLERY
   -------------------------------------------------------------------------- */
.am-pdp__gallery { position: sticky; top: calc(var(--am-header-h) + var(--am-s-5)); display: grid; gap: var(--am-s-4); }

.am-gallery__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--am-c-surface);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-lg);
  overflow: hidden;
  cursor: zoom-in;
}

.am-gallery__main {
  width: 100%;
  height: 100%;
  /* contain, not cover — packshots must never be cropped or stretched. */
  object-fit: contain;
  padding: var(--am-s-8);
  transition: transform var(--am-dur-slow) var(--am-ease-out),
              opacity var(--am-dur-fast) var(--am-ease-out);
}
/* Pointer-tracked zoom; transform-origin is set in app.js. */
.am-gallery__stage.is-zoomed .am-gallery__main { transform: scale(2); }

.am-gallery__zoomhint {
  position: absolute;
  right: var(--am-s-4);
  bottom: var(--am-s-4);
  display: inline-flex;
  align-items: center;
  gap: var(--am-s-2);
  padding: var(--am-s-2) var(--am-s-3);
  border-radius: var(--am-r-pill);
  background: rgba(8, 24, 26, 0.72);
  color: #fff;
  font-size: var(--am-fs-xs);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--am-dur-fast) var(--am-ease-out);
}
.am-gallery__stage.is-zoomed .am-gallery__zoomhint { opacity: 0; }
@media (hover: none) { .am-gallery__zoomhint { display: none; } }

.am-pdp__flags {
  position: absolute;
  top: var(--am-s-4);
  left: var(--am-s-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--am-s-2);
  z-index: var(--am-z-raised);
}

/* Thumbnails --------------------------------------------------------------- */
.am-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--am-s-2);
}

.am-gallery__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: var(--am-s-2);
  background: var(--am-c-surface);
  border: var(--am-bw-thick) solid var(--am-c-border);
  border-radius: var(--am-r-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--am-dur-fast) var(--am-ease-out),
              transform var(--am-dur-fast) var(--am-ease-out);
}
.am-gallery__thumb:hover { border-color: var(--am-brand-300); transform: translateY(-2px); }
.am-gallery__thumb.is-active { border-color: var(--am-brand-600); }
.am-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }

/* --------------------------------------------------------------------------
   SUMMARY
   -------------------------------------------------------------------------- */
.am-pdp__summary { display: grid; gap: var(--am-s-5); align-content: start; }

.am-pdp__cat {
  display: inline-flex;
  align-items: center;
  gap: var(--am-s-2);
  align-self: start;
  padding: var(--am-s-1) var(--am-s-3);
  border-radius: var(--am-r-pill);
  background: var(--am-brand-100);
  color: var(--am-brand-800);
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  text-decoration: none;
}
.am-pdp__cat:hover { background: var(--am-brand-200); color: var(--am-brand-900); }

.am-pdp__title { margin: 0; font-size: var(--am-fs-h1); overflow-wrap: anywhere; }

.am-pdp__rating { display: flex; align-items: center; gap: var(--am-s-3); font-size: var(--am-fs-sm); }
.am-pdp__rating a { color: var(--am-c-text-muted); }
.am-pdp__rating a:hover { color: var(--am-brand-700); }

.am-pdp__price {
  font-family: var(--am-font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: var(--am-fw-bold);
  letter-spacing: var(--am-ls-tight);
  color: var(--am-ink-900);
  line-height: 1;
}
.am-pdp__price del { font-size: 0.55em; font-weight: var(--am-fw-regular); color: var(--am-c-text-muted); margin-right: var(--am-s-3); }
.am-pdp__price ins { text-decoration: none; }
.am-pdp__price .woocommerce-Price-currencySymbol { font-size: 0.7em; vertical-align: baseline; }

.am-pdp__excerpt { font-size: var(--am-fs-body); line-height: var(--am-lh-relaxed); color: var(--am-ink-600); }
.am-pdp__excerpt p:last-child { margin-bottom: 0; }

.am-pdp__notice { margin: 0; }

/* --------------------------------------------------------------------------
   ADD TO CART  (WooCommerce markup, restyled)
   -------------------------------------------------------------------------- */
.am-pdp__cart {
  padding: var(--am-s-5);
  background: var(--am-c-bg-alt);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-lg);
}

.am-pdp__cart form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--am-s-3); margin: 0; }

.am-pdp__cart .quantity {
  display: flex;
  align-items: center;
  height: var(--am-control-h);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-md);
  background: var(--am-c-surface);
  overflow: hidden;
}
.am-pdp__cart .quantity input[type="number"] {
  width: 68px;
  height: 100%;
  padding: 0 var(--am-s-2);
  border: 0;
  text-align: center;
  font-size: var(--am-fs-body);
  font-weight: var(--am-fw-semibold);
  background: transparent;
  -moz-appearance: textfield;
}
.am-pdp__cart .quantity input[type="number"]::-webkit-outer-spin-button,
.am-pdp__cart .quantity input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* WooCommerce's own button, restyled to the theme's primary. */
.am-pdp__cart .single_add_to_cart_button,
.am-theme .woocommerce button.button.alt,
.am-theme .woocommerce a.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--am-s-2);
  flex: 1 1 220px;
  min-height: var(--am-control-h);
  padding: var(--am-s-3) var(--am-s-7);
  border: 0;
  border-radius: var(--am-r-pill);
  background: var(--am-brand-700);
  color: #fff;
  font-family: var(--am-font-body);
  font-size: var(--am-fs-sm);
  font-weight: var(--am-fw-semibold);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--am-dur-fast) var(--am-ease-out),
              box-shadow var(--am-dur-base) var(--am-ease-out),
              transform var(--am-dur-fast) var(--am-ease-out);
}
.am-pdp__cart .single_add_to_cart_button:hover,
.am-theme .woocommerce button.button.alt:hover,
.am-theme .woocommerce a.button.alt:hover {
  background: var(--am-brand-800);
  color: #fff;
  box-shadow: var(--am-shadow-brand);
  transform: translateY(-2px);
}

/* Variation selects. */
.am-pdp__cart table.variations { width: 100%; margin-bottom: var(--am-s-4); border: 0; }
.am-pdp__cart table.variations th,
.am-pdp__cart table.variations td { padding: var(--am-s-2) 0; border: 0; vertical-align: middle; }
.am-pdp__cart table.variations label { font-size: var(--am-fs-sm); font-weight: var(--am-fw-semibold); }
.am-pdp__cart table.variations select {
  width: 100%;
  min-height: var(--am-control-h);
  padding: var(--am-s-2) var(--am-s-4);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-md);
  background: var(--am-c-surface);
  font-size: var(--am-fs-body);
}
.am-pdp__cart .woocommerce-variation-price { margin-bottom: var(--am-s-4); }

.am-pdp__cart .stock { width: 100%; margin: 0; font-size: var(--am-fs-sm); }
.am-pdp__cart .stock.in-stock { color: var(--am-success-500); }
.am-pdp__cart .stock.out-of-stock { color: var(--am-danger-500); }

/* --------------------------------------------------------------------------
   ASSURANCE LIST
   -------------------------------------------------------------------------- */
.am-pdp__assure { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--am-s-3); }
.am-pdp__assure li {
  display: flex;
  align-items: center;
  gap: var(--am-s-3);
  margin: 0;
  font-size: var(--am-fs-sm);
  color: var(--am-ink-600);
}
.am-pdp__assure .am-icon { flex: none; color: var(--am-brand-600); }

/* --------------------------------------------------------------------------
   SPECIFICATIONS
   -------------------------------------------------------------------------- */
.am-pdp__specs {
  padding-top: var(--am-s-5);
  border-top: var(--am-bw) solid var(--am-c-border);
}
.am-pdp__specs-title {
  margin: 0 0 var(--am-s-4);
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  color: var(--am-c-text-muted);
}

.am-deflist--split > div {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  gap: var(--am-s-4);
  padding-block: var(--am-s-3);
  border-bottom: var(--am-bw) solid var(--am-c-border);
}
.am-deflist--split > div:last-child { border-bottom: 0; }
.am-deflist--split dt { text-transform: none; letter-spacing: 0; font-size: var(--am-fs-sm); font-weight: var(--am-fw-medium); }

.am-instock { display: inline-flex; align-items: center; gap: var(--am-s-1); color: var(--am-success-500); font-weight: var(--am-fw-semibold); }
.am-outstock { color: var(--am-danger-500); font-weight: var(--am-fw-semibold); }

/* --------------------------------------------------------------------------
   TABS  (WooCommerce markup, restyled)
   -------------------------------------------------------------------------- */
.am-pdp__detail { padding-block: var(--am-s-8); border-top: var(--am-bw) solid var(--am-c-border); }

.am-theme .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-s-1);
  margin: 0 0 var(--am-s-7);
  padding: 0 0 var(--am-s-1);
  list-style: none;
  border-bottom: var(--am-bw) solid var(--am-c-border);
}
.am-theme .woocommerce-tabs ul.tabs li { margin: 0; }
.am-theme .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--am-s-3) var(--am-s-5);
  min-height: var(--am-tap-min);
  border-bottom: var(--am-bw-thick) solid transparent;
  margin-bottom: -1px;
  font-size: var(--am-fs-sm);
  font-weight: var(--am-fw-semibold);
  color: var(--am-c-text-muted);
  text-decoration: none;
  transition: color var(--am-dur-fast) var(--am-ease-out),
              border-color var(--am-dur-fast) var(--am-ease-out);
}
.am-theme .woocommerce-tabs ul.tabs li a:hover { color: var(--am-brand-700); }
.am-theme .woocommerce-tabs ul.tabs li.active a { color: var(--am-brand-800); border-bottom-color: var(--am-brand-600); }

.am-theme .woocommerce-Tabs-panel {
  max-width: var(--am-container-text);
  font-size: var(--am-fs-body);
  line-height: var(--am-lh-relaxed);
  color: var(--am-ink-700);
}
.am-theme .woocommerce-Tabs-panel h2 { font-size: var(--am-fs-h3); margin-bottom: var(--am-s-4); }
.am-theme .woocommerce-Tabs-panel h3 { font-size: var(--am-fs-h4); margin-top: var(--am-s-6); }
.am-theme .woocommerce-Tabs-panel ul,
.am-theme .woocommerce-Tabs-panel ol { padding-left: var(--am-s-6); margin-bottom: var(--am-s-5); }
.am-theme .woocommerce-Tabs-panel li::marker { color: var(--am-brand-500); }
.am-theme .woocommerce-Tabs-panel table { margin-bottom: var(--am-s-5); }
.am-theme .woocommerce-Tabs-panel th { background: var(--am-c-bg-alt); }

/* Reviews ------------------------------------------------------------------ */
.am-theme .woocommerce #reviews #comments ol.commentlist { padding: 0; list-style: none; display: grid; gap: var(--am-s-5); }
.am-theme .woocommerce #reviews .comment_container {
  display: flex;
  gap: var(--am-s-4);
  padding: var(--am-s-5);
  background: var(--am-c-surface);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-lg);
}
.am-theme .woocommerce #reviews .comment_container img.avatar {
  width: 48px; height: 48px;
  flex: none;
  border-radius: var(--am-r-circle);
}
.am-theme .woocommerce #reviews .comment-text { flex: 1 1 auto; min-width: 0; }
.am-theme .woocommerce #review_form_wrapper {
  margin-top: var(--am-s-7);
  padding: var(--am-s-6);
  background: var(--am-c-bg-alt);
  border-radius: var(--am-r-lg);
}
.am-theme .woocommerce #review_form input[type="text"],
.am-theme .woocommerce #review_form input[type="email"],
.am-theme .woocommerce #review_form textarea {
  width: 100%;
  padding: var(--am-s-3) var(--am-s-4);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-md);
  background: var(--am-c-surface);
  font-size: var(--am-fs-body);
}

/* --------------------------------------------------------------------------
   SAFETY + RELATED
   -------------------------------------------------------------------------- */
.am-pdp__safety { padding-bottom: var(--am-s-9); }

.am-pdp__related { padding-block: var(--am-s-9); background: var(--am-c-bg-alt); border-top: var(--am-bw) solid var(--am-c-border); }
.am-pdp__related h2 { font-size: var(--am-fs-h2); margin-bottom: var(--am-s-7); }
.am-pdp__related .am-products,
.am-pdp__related ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--am-s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   WOOCOMMERCE NOTICES — restyled to match the theme's notice component
   -------------------------------------------------------------------------- */
.am-theme .woocommerce-message,
.am-theme .woocommerce-info,
.am-theme .woocommerce-error {
  display: flex;
  align-items: center;
  gap: var(--am-s-3);
  padding: var(--am-s-4) var(--am-s-5);
  margin-bottom: var(--am-s-5);
  border: 0;
  border-radius: var(--am-r-md);
  font-size: var(--am-fs-sm);
  list-style: none;
}
.am-theme .woocommerce-message { background: var(--am-success-100); color: var(--am-success-700); }
.am-theme .woocommerce-info    { background: var(--am-info-100);    color: var(--am-info-700); }
.am-theme .woocommerce-error   { background: var(--am-danger-100);  color: var(--am-danger-700); }
.am-theme .woocommerce-message::before,
.am-theme .woocommerce-info::before,
.am-theme .woocommerce-error::before { display: none; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .am-pdp__layout { grid-template-columns: minmax(0, 1fr); padding-block: var(--am-s-7); }
  .am-pdp__gallery { position: static; }
}

@media (max-width: 600px) {
  .am-gallery__main { padding: var(--am-s-5); }
  .am-pdp__cart { padding: var(--am-s-4); }
  .am-pdp__cart form.cart { flex-direction: column; align-items: stretch; }
  .am-pdp__cart .quantity { width: 100%; justify-content: center; }
  .am-pdp__cart .single_add_to_cart_button { width: 100%; flex: 1 1 auto; }
  .am-deflist--split > div { grid-template-columns: minmax(0, 1fr); gap: var(--am-s-1); }
  .am-gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
}

/* ---- 10-pages.css ---- */
/* ==========================================================================
   PAGES — About, Contact, and policy/legal templates
   ========================================================================== */

.am-lead { font-size: var(--am-fs-lead); line-height: var(--am-lh-relaxed); color: var(--am-ink-600); }

/* --------------------------------------------------------------------------
   PANEL — bordered aside used on About and Contact
   -------------------------------------------------------------------------- */
.am-panel {
  padding: var(--am-s-6);
  background: var(--am-c-surface);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-lg);
 
}

.am-panel__title {
  display: flex;
  align-items: center;
  gap: var(--am-s-3);
  margin: 0 0 var(--am-s-5);
  padding-bottom: var(--am-s-4);
  border-bottom: var(--am-bw) solid var(--am-c-border);
  font-size: var(--am-fs-h4);
}
.am-panel__title .am-icon { color: var(--am-brand-600); flex: none; }

.am-panel__note {
  margin: var(--am-s-5) 0 0;
  padding-top: var(--am-s-4);
  border-top: var(--am-bw) solid var(--am-c-border);
  font-size: var(--am-fs-xs);
  color: var(--am-c-text-muted);
  line-height: var(--am-lh-normal);
}

/* Definition list ---------------------------------------------------------- */
.am-deflist { margin: 0; display: grid; gap: var(--am-s-4); }
.am-deflist > div { display: grid; gap: var(--am-s-1); }
.am-deflist dt {
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  color: var(--am-c-text-muted);
}
.am-deflist dd { margin: 0; font-size: var(--am-fs-sm); color: var(--am-ink-800); line-height: var(--am-lh-normal); }

/* Marks a value awaiting real data rather than showing a fabricated one. */
.am-pending {
  display: inline-block;
  padding: 2px var(--am-s-2);
  border-radius: var(--am-r-sm);
  background: var(--am-ink-100);
  color: var(--am-ink-500);
  font-size: var(--am-fs-xs);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   TIMELINE
   Vertical rail with dots; items reveal on scroll via .am-reveal.
   -------------------------------------------------------------------------- */
.am-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--am-s-8);
  list-style: none;
}

/* The rail. */
.am-timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, var(--am-brand-300), var(--am-brand-100));
  border-radius: var(--am-r-pill);
}

.am-timeline__item { position: relative; margin: 0 0 var(--am-s-7); }
.am-timeline__item:last-child { margin-bottom: 0; }

.am-timeline__dot {
  position: absolute;
  left: calc(var(--am-s-8) * -1 + 4px);
  top: 4px;
  width: 18px; height: 18px;
  border-radius: var(--am-r-circle);
  background: var(--am-c-surface);
  border: 3px solid var(--am-brand-500);
  box-shadow: 0 0 0 4px var(--am-brand-050);
  transition: transform var(--am-dur-base) var(--am-ease-spring),
              border-color var(--am-dur-base) var(--am-ease-out);
}
.am-timeline__item:hover .am-timeline__dot { transform: scale(1.25); border-color: var(--am-brand-700); }

.am-timeline__title { margin: 0 0 var(--am-s-2); font-size: var(--am-fs-h4); }
.am-timeline__text { margin: 0; max-width: 68ch; color: var(--am-c-text-muted); line-height: var(--am-lh-relaxed); }

/* --------------------------------------------------------------------------
   TEAM CARD
   -------------------------------------------------------------------------- */
.am-teamcard {
  display: flex;
  flex-direction: column;
  gap: var(--am-s-3);
  padding: var(--am-s-6);
  background: var(--am-c-surface);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-lg);
  text-align: center;
  align-items: center;
  transition: border-color var(--am-dur-base) var(--am-ease-out);
}
.am-teamcard:hover { border-color: var(--am-brand-200); }

.am-teamcard__avatar {
  display: block;
  margin-bottom: var(--am-s-2);
  color: var(--am-brand-600);
}

.am-teamcard__role { margin: 0; font-size: var(--am-fs-h4); }
.am-teamcard__text { margin: 0; font-size: var(--am-fs-sm); color: var(--am-c-text-muted); line-height: var(--am-lh-relaxed); }

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.am-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(var(--am-s-6), 4vw, var(--am-s-9));
  align-items: start;
}

.am-contact__intro {
  margin: 0 0 var(--am-s-6);
  color: var(--am-c-text-muted);
  font-size: var(--am-fs-sm);
  line-height: var(--am-lh-relaxed);
}

.am-contact__aside { display: grid; gap: var(--am-s-5); position: sticky; top: calc(var(--am-header-h) + var(--am-s-5)); }

/* Contact method cards ----------------------------------------------------- */
.am-contactcard {
  display: flex;
  flex-direction: column;
  gap: var(--am-s-2);
  padding: var(--am-s-6);
  background: var(--am-c-surface);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--am-dur-base) var(--am-ease-out);
}
a.am-contactcard:hover { border-color: var(--am-brand-300); }

.am-contactcard__icon {
  display: block;
  margin-bottom: var(--am-s-3);
  color: var(--am-brand-600);
}
.am-contactcard__title { margin: 0; font-size: var(--am-fs-sm); font-weight: var(--am-fw-semibold); color: var(--am-c-text-muted); }
.am-contactcard__value {
  font-family: var(--am-font-display);
  font-size: var(--am-fs-h4);
  font-weight: var(--am-fw-bold);
  color: var(--am-ink-900);
  overflow-wrap: anywhere; /* long email addresses must not overflow */
}
.am-contactcard__meta { font-size: var(--am-fs-xs); color: var(--am-c-text-muted); }

/* Form --------------------------------------------------------------------- */
.am-form { display: grid; gap: var(--am-s-5); }
.am-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--am-s-5); }

/* Honeypot — removed from flow and from assistive tech, not display:none,
   which some bots detect. */
.am-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.am-address { font-style: normal; margin: 0 0 var(--am-s-5); line-height: var(--am-lh-relaxed); color: var(--am-ink-700); }

/* Map ---------------------------------------------------------------------- */
.am-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--am-r-lg);
  overflow: hidden;
  border: var(--am-bw) solid var(--am-c-border);
  background: var(--am-ink-100);
}
.am-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.am-map__note { margin: var(--am-s-3) 0 0; font-size: var(--am-fs-xs); color: var(--am-c-text-muted); }

/* --------------------------------------------------------------------------
   LEGAL / POLICY
   -------------------------------------------------------------------------- */
.am-page-banner--slim { padding-block: calc(var(--am-header-h) + var(--am-s-8)) var(--am-s-8); }

.am-legal {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(var(--am-s-6), 5vw, var(--am-s-10));
  align-items: start;
}

/* Table of contents -------------------------------------------------------- */
.am-toc {
  position: sticky;
  top: calc(var(--am-header-h) + var(--am-s-5));
  padding: var(--am-s-5);
  background: var(--am-c-bg-alt);
  border: var(--am-bw) solid var(--am-c-border);
  border-radius: var(--am-r-lg);
}

.am-toc__title {
  margin: 0 0 var(--am-s-4);
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  color: var(--am-c-text-muted);
}

.am-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: am-toc; display: grid; gap: var(--am-s-1); }
.am-toc__list li { margin: 0; counter-increment: am-toc; }
.am-toc__list a {
  display: block;
  padding: var(--am-s-2) var(--am-s-3);
  border-radius: var(--am-r-sm);
  border-left: 2px solid transparent;
  font-size: var(--am-fs-sm);
  line-height: var(--am-lh-normal);
  color: var(--am-ink-600);
  text-decoration: none;
  transition: background var(--am-dur-fast) var(--am-ease-out),
              border-color var(--am-dur-fast) var(--am-ease-out),
              color var(--am-dur-fast) var(--am-ease-out);
}
.am-toc__list a::before { content: counter(am-toc) ". "; color: var(--am-ink-400); }
.am-toc__list a:hover {
  background: var(--am-c-surface);
  border-left-color: var(--am-brand-500);
  color: var(--am-brand-800);
}

/* Prose -------------------------------------------------------------------- */
.am-prose {
  max-width: var(--am-container-text);
  font-size: var(--am-fs-body);
  line-height: var(--am-lh-relaxed);
  color: var(--am-ink-700);
}

.am-prose > h2 {
  margin-top: var(--am-s-9);
  margin-bottom: var(--am-s-4);
  padding-top: var(--am-s-6);
  border-top: var(--am-bw) solid var(--am-c-border);
  font-size: var(--am-fs-h3);
  /* Anchor offset so the sticky header never hides a jumped-to heading. */
  scroll-margin-top: calc(var(--am-header-h) + var(--am-s-5));
}
.am-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.am-prose > h3 { margin-top: var(--am-s-7); margin-bottom: var(--am-s-3); font-size: var(--am-fs-h4); }

.am-prose p { margin-bottom: var(--am-s-5); }
.am-prose ul, .am-prose ol { margin-bottom: var(--am-s-5); padding-left: var(--am-s-6); }
.am-prose li { margin-bottom: var(--am-s-3); }
.am-prose li::marker { color: var(--am-brand-500); }

.am-prose strong { color: var(--am-ink-900); font-weight: var(--am-fw-semibold); }

.am-prose table { margin-bottom: var(--am-s-6); font-size: var(--am-fs-sm); }
.am-prose th { background: var(--am-c-bg-alt); }

.am-prose__foot { margin-top: var(--am-s-9); padding-top: var(--am-s-7); border-top: var(--am-bw) solid var(--am-c-border); }

/* --------------------------------------------------------------------------
   RESPONSIVE — page-specific
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .am-legal { grid-template-columns: minmax(0, 1fr); }
  .am-toc { position: static; }
  .am-toc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }

  .am-contact { grid-template-columns: minmax(0, 1fr); }
  .am-contact__aside { position: static; }
}

@media (max-width: 768px) {
  .am-timeline { padding-left: var(--am-s-7); }
  .am-timeline__dot { left: calc(var(--am-s-7) * -1 + 3px); }
}

@media (max-width: 600px) {
  .am-form__row { grid-template-columns: minmax(0, 1fr); }
  .am-toc__list { grid-template-columns: minmax(0, 1fr); }
  .am-panel { padding: var(--am-s-5); }
  .am-form .am-btn { width: 100%; }
}

@media (max-width: 375px) {
  /* Long email addresses in the contact card must wrap, not overflow. */
  .am-contactcard__value { font-size: var(--am-fs-body); }
}

/* ---- 11-responsive.css ---- */
/* ==========================================================================
   RESPONSIVE — breakpoint overrides
   --------------------------------------------------------------------------
   The theme is built mobile-tolerant by default: fluid type (clamp), auto-fit
   grids and intrinsic sizing mean most layouts reflow without intervention.
   This file handles only the cases where the structure itself must change.

   Breakpoints, matched to the devices named in the brief:
     1600px   large desktop
     1440px   desktop
     1200px   small desktop / large laptop
     1024px   laptop  — primary nav collapses to the drawer here
      900px   large tablet landscape
      834px   iPad Air portrait
      768px   tablet portrait
      600px   large phone landscape
      540px   Surface Duo / large phone
      480px   phone
      414px   iPhone Plus/Max
      375px   iPhone SE/standard  — the narrowest supported width
   ========================================================================== */

/* ==========================================================================
   ≤1440px — DESKTOP
   ========================================================================== */
@media (max-width: 1440px) {
  :root { --am-container: 1200px; }
}

/* ==========================================================================
   ≤1200px — SMALL DESKTOP
   ========================================================================== */
@media (max-width: 1200px) {
  .am-condgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .am-mega__inner { grid-template-columns: minmax(0, 1fr) 240px; }
  .am-mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-nav__list { gap: 0; }
  .am-header__inner { gap: var(--am-s-4); }
}

/* ==========================================================================
   ≤1024px — LAPTOP / LARGE TABLET
   Primary nav collapses into the drawer. Everything below this width is
   touch-first: 44px minimum targets throughout.
   ========================================================================== */
@media (max-width: 1024px) {

  :root {
    --am-header-h: var(--am-header-h-sm);
    --am-container: 100%;
  }

  /* Nav → drawer */
  .am-nav { display: none; }
  .am-burger { display: grid; }

  /* The hero no longer needs to reserve space for the desktop nav row. */
  .am-hero__inner { padding-top: calc(var(--am-header-h) + var(--am-s-8)); }

  /* Grids step down */
  .am-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .am-steps { grid-template-columns: 1fr; gap: var(--am-s-4); }
  .am-step:not(:last-child)::after { display: none; }
  .am-step__num { font-size: 2.25rem; }

  .am-assurance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-assurance__item:nth-child(2) { border-right: 0; }
  .am-assurance__item:nth-child(-n+2) { border-bottom: var(--am-bw) solid var(--am-c-border); }

  /* Footer */
  .am-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--am-s-7); }
  .am-footer__brand { grid-column: 1 / -1; }
  .am-footer__compliance { grid-template-columns: 1fr; gap: var(--am-s-5); }

  .am-newsletter__inner { grid-template-columns: 1fr; gap: var(--am-s-6); }

  /* Shop: filter rail becomes a slide-over panel (see 08-shop.css) */
  .am-split--aside,
  .am-split--aside-right { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   ≤900px
   ========================================================================== */
@media (max-width: 900px) {
  .am-condgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Product gallery stacks above the summary. */
  .am-pdp__layout { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   ≤834px — TABLET PORTRAIT (iPad Air)
   ========================================================================== */
@media (max-width: 834px) {
  .am-hero { min-height: max(520px, calc(100svh - var(--am-utilitybar-h))); }

  /* Controls move below the CTA rather than sitting beside it. */
  .am-hero__grid { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .am-hero__controls { width: 100%; justify-content: space-between; }

  .am-section-head { flex-direction: column; align-items: flex-start; }

  .am-review__text { font-size: var(--am-fs-sm); }
}

/* ==========================================================================
   ≤768px — TABLET PORTRAIT
   ========================================================================== */
@media (max-width: 768px) {

  /* Utility bar sheds its secondary items so it never wraps to two lines. */
  .am-utilitybar__hide-sm { display: none !important; }
  .am-utilitybar__list { gap: var(--am-s-4); }
  .am-utilitybar { font-size: 0.6875rem; }

  .am-grid--4,
  .am-grid--3,
  .am-grid--2 { grid-template-columns: minmax(0, 1fr); }

  .am-split { grid-template-columns: minmax(0, 1fr); }

  /* Hero: the banner artwork is 3:2, so at portrait ratios the packshot is
     pulled toward the centre to keep the product in frame. */
  .am-hero__img { object-position: center 52%; }
  .am-hero__lede { font-size: var(--am-fs-body); max-width: 100%; }

  .am-cta__inner { padding-inline: var(--am-s-5); }
  .am-cta__actions { width: 100%; flex-direction: column; }
  .am-cta__actions .am-btn { width: 100%; }

  .am-footer { padding-block: var(--am-s-9) var(--am-s-6); }
  .am-footer__legal { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   ≤600px
   ========================================================================== */
@media (max-width: 600px) {
  .am-newsletter__row { flex-direction: column; }
  .am-newsletter__row .am-btn { width: 100%; }

  .am-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--am-s-3); }
  .am-stat { padding: var(--am-s-5); }
}

/* ==========================================================================
   ≤540px — LARGE PHONE
   ========================================================================== */
@media (max-width: 540px) {

  :root {
    /* Tighter page gutter reclaims horizontal space on small screens. */
    --am-gutter: var(--am-s-4);
  }

  .am-hero {
    /* svh accounts for mobile browser chrome; the floor keeps the composition
       intact when the address bar is expanded. */
    min-height: max(500px, calc(100svh - var(--am-utilitybar-h)));
  }
  .am-hero__inner { padding-bottom: var(--am-s-7); }

  .am-condgrid { grid-template-columns: minmax(0, 1fr); }

  .am-assurance__grid { grid-template-columns: minmax(0, 1fr); }
  .am-assurance__item { border-right: 0; border-bottom: var(--am-bw) solid var(--am-c-border); }
  .am-assurance__item:last-child { border-bottom: 0; }

  .am-footer__grid { grid-template-columns: minmax(0, 1fr); }

  /* Section rhythm tightens so pages do not feel endlessly scrollable. */
  :root { --am-section-y: var(--am-s-9); --am-section-y-sm: var(--am-s-8); }
}

/* ==========================================================================
   ≤480px — PHONE
   ========================================================================== */
@media (max-width: 480px) {

  .am-brand__sub { display: none; }  /* Wordmark alone; the tagline crowds. */
  .am-brand__name { font-size: 1.1875rem; }

  /* Account icon is redundant — the drawer carries the link. */
  .am-iconbtn--hide-sm { display: none; }

  .am-hero__kicker { font-size: 0.625rem; padding: var(--am-s-1) var(--am-s-3); }
  .am-hero__actions .am-btn { width: 100%; }

  /* Arrows are redundant next to swipe; dots remain for position feedback. */
  .am-hero__arrows { display: none; }
  .am-hero__controls { justify-content: center; }

  .am-accordion__trigger { font-size: var(--am-fs-body); }

  .am-scroller__track { grid-auto-columns: minmax(240px, 78vw); }

  .am-paylist { gap: var(--am-s-1); }
  .am-pay { font-size: 0.625rem; padding: 2px var(--am-s-2); }
}

/* ==========================================================================
   ≤414px — LARGE PHONE (iPhone Plus/Max)
   ========================================================================== */
@media (max-width: 414px) {
  .am-utilitybar__list li:nth-child(2) { display: none; }

  .am-statgrid { grid-template-columns: minmax(0, 1fr); }

  .am-step { padding: var(--am-s-6) var(--am-s-5) var(--am-s-5); }
  .am-step__num { top: var(--am-s-4); right: var(--am-s-5); font-size: 2rem; }

  .am-review, .am-feature { padding: var(--am-s-5); }
}

/* ==========================================================================
   ≤375px — SMALLEST SUPPORTED (iPhone SE)
   Guards against the specific failures called out in the brief: text overflow,
   cut-off images and sub-44px controls.
   ========================================================================== */
@media (max-width: 375px) {

  :root { --am-gutter: var(--am-s-3); }

  /* Long medicine names ("Super Carefil Cialis (Tadalafil + Dapoxetine) 80mg")
     must wrap rather than overflow their card. */
  .am-product__title,
  .am-cond__name,
  .am-step__title,
  .am-footer__links a {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .am-product__body { padding: var(--am-s-4); }
  .am-product__foot { flex-direction: column; align-items: stretch; gap: var(--am-s-3); }
  .am-product__cta { width: 100%; }

  .am-scroller__track { grid-auto-columns: minmax(220px, 82vw); }

  .am-cta__inner { padding-inline: var(--am-s-4); border-radius: var(--am-r-xl); }

  /* Utility bar reduced to the single most important promise. */
  .am-utilitybar__list li:not(:first-child) { display: none; }
}

/* ==========================================================================
   TOUCH DEVICES
   Hover-dependent affordances become permanently visible where there is no
   hover to reveal them.
   ========================================================================== */
@media (hover: none) {
  .am-product__quick { opacity: 1; transform: none; }
  .am-cond__arrow { opacity: 1; transform: none; }

  /* Lift-on-hover reads as a glitch on tap; suppress it. */
  .am-btn:hover,
  .am-card--hover:hover,
  .am-feature:hover,
  .am-product:hover,
  .am-cond:hover,
  .am-step:hover,
  .am-review:hover,
  .am-stat:hover { transform: none; }
}

/* ==========================================================================
   LANDSCAPE PHONES
   Short viewports must not be forced into a full-height hero.
   ========================================================================== */
@media (max-height: 560px) and (orientation: landscape) {
  .am-hero { min-height: 460px; }
  .am-hero__inner { padding-top: calc(var(--am-header-h) + var(--am-s-5)); padding-bottom: var(--am-s-5); }
  .am-hero__cue { display: none; }
}

/* ==========================================================================
   PRINT — policy pages are the realistic print target
   ========================================================================== */
@media print {
  .am-utilitybar,
  .am-header,
  .am-drawer,
  .am-drawer-scrim,
  .am-hero,
  .am-newsletter,
  .am-totop,
  .am-cta,
  .am-scroller { display: none !important; }

  .am-theme { background: #fff; color: #000; font-size: 11pt; }
  .am-footer { background: none; color: #000; padding-block: var(--am-s-5); border-top: 1px solid #999; }
  .am-footer__grid, .am-footer__compliance { display: none; }

  .am-section { padding-block: var(--am-s-5); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ---- 12-corrections.css ---- */
/* ==========================================================================
   v2 LAYER — shop, product card, trust row, steps, capability block,
              reviews, FAQ, footer
   Loaded last so it wins on source order. Every rule traces to a specific
   instruction or to a defect observed in the browser.
   ========================================================================== */

/* ==========================================================================
   1. SHOP — no sidebar, three across, centred at 80vw
   ========================================================================== */
.am-shop { padding-block: var(--am-s-8) var(--am-section-y); }

.am-shopwrap {
  width: var(--am-container-shop);
  max-width: calc(100% - (var(--am-gutter) * 2));
  margin-inline: auto;
}

/* --- category chips replace the old left rail --- */
.am-chiprow {
  display: flex;
  gap: var(--am-s-2);
  overflow-x: auto;
  padding-bottom: var(--am-s-3);
  margin-bottom: var(--am-s-5);
  /* Hide the scroll furniture: the row is clearly swipeable and a heavy grey
     bar under the chips read as a broken element. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.am-chiprow::-webkit-scrollbar { display: none; }

.am-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--am-s-2);
  flex: none;
  min-height: var(--am-tap-min);
  padding: 0 var(--am-s-4);
  border-radius: var(--am-r-pill);
  background: var(--am-c-surface);
  box-shadow: inset 0 0 0 1px var(--am-c-border);
  color: var(--am-ink-700);
  font-size: var(--am-fs-sm);
  font-weight: var(--am-fw-medium);
  white-space: nowrap;
  transition: background var(--am-dur-fast) var(--am-ease-out),
              color var(--am-dur-fast) var(--am-ease-out),
              box-shadow var(--am-dur-fast) var(--am-ease-out);
}
.am-chip:hover { background: var(--am-brand-050); color: var(--am-brand-800); box-shadow: inset 0 0 0 1px var(--am-brand-300); }
.am-chip.is-on { background: var(--am-brand-700); color: #fff; box-shadow: none; }
.am-chip__n { font-size: var(--am-fs-xs); opacity: 0.7; font-variant-numeric: tabular-nums; }

/* --- toolbar --- */
.am-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-s-4);
  margin-bottom: var(--am-s-7);
  padding-bottom: var(--am-s-5);
  border-bottom: 1px solid var(--am-c-border);
}
.am-toolbar__count { margin: 0; font-size: var(--am-fs-sm); color: var(--am-c-text-muted); }
.am-toolbar__count strong { color: var(--am-ink-900); font-weight: var(--am-fw-semibold); }
.am-toolbar__actions { display: flex; align-items: center; gap: var(--am-s-3); }

/* View toggle: the icons were rendering invisible because the button had no
   colour of its own to pass down to the stroked SVG. */
.am-viewtoggle { display: flex; gap: 2px; padding: 3px; background: var(--am-ink-100); border-radius: var(--am-r-md); }
.am-viewtoggle button {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--am-r-sm);
  color: var(--am-ink-600);
  background: transparent;
  transition: background var(--am-dur-fast) var(--am-ease-out), color var(--am-dur-fast) var(--am-ease-out);
}
.am-viewtoggle button .am-icon { color: currentColor; }
.am-viewtoggle button:hover { color: var(--am-ink-900); }
.am-viewtoggle button.is-active { background: var(--am-c-surface); color: var(--am-brand-700); }

.am-sort .am-select { min-height: var(--am-control-h-sm); padding-block: 0; font-size: var(--am-fs-sm); min-width: 190px; }

/*
   PRODUCT GRID — three across.
   `!important` only because Astra prints shop-column CSS into an inline
   <style> at specificity 0-0-4-1; matching that shape produced a tie which
   source order then won for Astra. Scoped to this grid alone.
*/
.am-theme ul.products.am-products:not(.elementor-grid) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--am-s-5) !important;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .am-theme ul.products.am-products:not(.elementor-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1000px) {
  /* Three, never four — four squeezes the card past readable. */
  .am-theme ul.products.am-products:not(.elementor-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--am-s-6) !important;
  }
}
.am-theme ul.products.am-products.is-list:not(.elementor-grid) { grid-template-columns: minmax(0, 1fr) !important; }
.am-product-cell { margin: 0; list-style: none; }

/* ==========================================================================
   2. PRODUCT CARD
   One anchor. No overlay badges. No CTA affordance. Media fills its box.
   Hover changes colour only — a transform on the hover target moves it out
   from under the pointer and the card oscillates.
   ========================================================================== */
.am-product {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--am-c-surface);
  border: 1px solid var(--am-c-border);
  border-radius: var(--am-r-lg);
  overflow: hidden;
  transition: border-color var(--am-dur-base) var(--am-ease-out),
              box-shadow var(--am-dur-base) var(--am-ease-out);
}
.am-product:hover,
.am-product:focus-within { border-color: var(--am-brand-400); box-shadow: var(--am-shadow-md); }
.am-product:focus-within { outline: 3px solid var(--am-c-focus); outline-offset: 2px; }

/* Fixed 4:3 frame, image covers it completely: no padding, no letterboxing. */
.am-product__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--am-ink-100);
  overflow: hidden;
}
.am-product__media img,
.am-product__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  padding: 0;
  display: block;
  transition: transform var(--am-dur-slow) var(--am-ease-out);
}
.am-product:hover .am-product__media img { transform: scale(1.05); }

.am-product__body { display: flex; flex-direction: column; gap: var(--am-s-2); padding: var(--am-s-5); flex: 1 1 auto; }

.am-product__cat {
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  color: var(--am-brand-600);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.am-product__title { margin: 0; font-size: var(--am-fs-h4); font-weight: var(--am-fw-semibold); line-height: 1.3; letter-spacing: 0; }
.am-product__title a { color: var(--am-ink-900); }
.am-product__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

.am-product__blurb {
  margin: 0;
  font-size: var(--am-fs-sm);
  line-height: var(--am-lh-normal);
  color: var(--am-c-text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.am-product__foot { display: flex; align-items: baseline; gap: var(--am-s-3); margin-top: auto; padding-top: var(--am-s-4); }
.am-product__price {
  font-family: var(--am-font-display);
  font-size: var(--am-fs-h4);
  font-weight: var(--am-fw-bold);
  color: var(--am-ink-900);
  letter-spacing: var(--am-ls-snug);
}
.am-product__price del { color: var(--am-c-text-muted); font-size: var(--am-fs-sm); font-weight: var(--am-fw-regular); margin-right: var(--am-s-2); }
.am-product__price ins { text-decoration: none; color: var(--am-brand-700); }

/* List view */
.am-products.is-list .am-product { flex-direction: row; }
.am-products.is-list .am-product__media { flex: 0 0 240px; aspect-ratio: 1 / 1; }
.am-products.is-list .am-product__body { justify-content: center; padding: var(--am-s-6); }
@media (max-width: 620px) {
  .am-products.is-list .am-product { flex-direction: column; }
  .am-products.is-list .am-product__media { flex: auto; width: 100%; aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   3. TRUST ROW — one horizontal icon-box grid
   Replaces the two duplicated icon strips (one inside the hero, one below it).
   Rest: white box, green icon, black text. Hover: green box, white icon and
   white text. Both states clear 4.5:1 — white on --am-brand-700 is 7.4:1.
   ========================================================================== */
.am-trust { background: var(--am-c-bg); padding-block: var(--am-s-8); }

.am-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--am-s-4);
}

.am-trust__item {
  display: flex;
  align-items: center;
  gap: var(--am-s-4);
  padding: var(--am-s-5);
  background: var(--am-c-surface);
  border: 1px solid var(--am-c-border);
  border-radius: var(--am-r-lg);
  text-decoration: none;
  transition: background var(--am-dur-base) var(--am-ease-out),
              border-color var(--am-dur-base) var(--am-ease-out);
}
.am-trust__item:hover { background: var(--am-brand-700); border-color: var(--am-brand-700); }

.am-trust__ic { color: var(--am-brand-600); flex: none; transition: color var(--am-dur-base) var(--am-ease-out); }
.am-trust__item:hover .am-trust__ic { color: #fff; }

.am-trust__t {
  display: block;
  font-size: var(--am-fs-sm);
  font-weight: var(--am-fw-semibold);
  color: var(--am-ink-900);
  line-height: 1.3;
  transition: color var(--am-dur-base) var(--am-ease-out);
}
.am-trust__s {
  display: block;
  margin-top: 2px;
  font-size: var(--am-fs-xs);
  color: var(--am-c-text-muted);
  line-height: 1.4;
  transition: color var(--am-dur-base) var(--am-ease-out);
}
.am-trust__item:hover .am-trust__t { color: #fff; }
.am-trust__item:hover .am-trust__s { color: rgba(255, 255, 255, 0.82); }

@media (max-width: 900px) { .am-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .am-trust__grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   4. STEPS — real hover state, contrast-checked
   ========================================================================== */
.am-step {
  position: relative;
  margin: 0;
  padding: var(--am-s-7) var(--am-s-6) var(--am-s-6);
  background: var(--am-c-surface);
  border: 1px solid var(--am-c-border);
  border-radius: var(--am-r-lg);
  overflow: hidden;
  isolation: isolate;
  transition: background var(--am-dur-base) var(--am-ease-out),
              border-color var(--am-dur-base) var(--am-ease-out),
              box-shadow var(--am-dur-base) var(--am-ease-out);
}

/* Pine wash wipes up from the bottom on hover. */
.am-step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--am-brand-700);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--am-dur-base) var(--am-ease-out);
}
.am-step:hover::before { transform: scaleY(1); }

.am-step:hover { border-color: var(--am-brand-700); box-shadow: var(--am-shadow-lg); }

.am-step__icon { display: block; margin-bottom: var(--am-s-5); color: var(--am-brand-600); transition: color var(--am-dur-base) var(--am-ease-out); }
.am-step:hover .am-step__icon { color: #fff; }

/* White on --am-brand-700 (#16503F) is 7.4:1; the softened body copy is 5.1:1. */
.am-step__title { margin: 0 0 var(--am-s-3); font-size: var(--am-fs-h4); transition: color var(--am-dur-base) var(--am-ease-out); }
.am-step__text  { margin: 0; font-size: var(--am-fs-sm); color: var(--am-c-text-muted); line-height: var(--am-lh-relaxed); transition: color var(--am-dur-base) var(--am-ease-out); }
.am-step:hover .am-step__title { color: #fff; }
.am-step:hover .am-step__text  { color: rgba(255, 255, 255, 0.86); }

/* The dotted connector disappears once a card is filled, or it cuts across it. */
.am-step:hover:not(:last-child)::after { opacity: 0; }
.am-step:not(:last-child)::after { transition: opacity var(--am-dur-fast) var(--am-ease-out); }

/* ==========================================================================
   5. CAPABILITY BLOCK — "A real pharmacy, not a marketplace"
   Rebuilt to the supplied reference: a radial node cluster on the left, and
   a small label, heading, paragraph and text link on the right.
   ========================================================================== */
.am-cap { background: var(--am-c-bg-alt); padding-block: var(--am-section-y); }

.am-cap__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--am-s-8), 6vw, var(--am-s-11));
  align-items: center;
}

/* --- node diagram --- */
.am-orbit {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  aspect-ratio: 1;
}

.am-orbit__core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--am-r-circle);
  background: var(--am-brand-900);
  color: #fff;
  z-index: 2;
}
.am-orbit__core span {
  font-family: var(--am-font-display);
  font-size: clamp(0.75rem, 1.5vw, 0.9375rem);
  font-weight: var(--am-fw-bold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
}

/* Each node is placed by an angle set inline, so the ring stays even. */
.am-orbit__node {
  position: absolute;
  top: 50%; left: 50%;
  width: 21%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--am-r-circle);
  background: var(--am-c-surface);
  color: var(--am-brand-700);
  box-shadow: var(--am-shadow-md);
  z-index: 2;
  transform:
    translate(-50%, -50%)
    rotate(var(--a))
    translate(180%)
    rotate(calc(var(--a) * -1));
  transition: color var(--am-dur-base) var(--am-ease-out), background var(--am-dur-base) var(--am-ease-out);
}
.am-orbit__node:hover { background: var(--am-brand-700); color: #fff; }

/* Connector ring behind the nodes. */
.am-orbit::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 76%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px dashed var(--am-brand-200);
  border-radius: var(--am-r-circle);
  z-index: 1;
}

/* --- copy side --- */
.am-cap__label {
  display: block;
  margin-bottom: var(--am-s-4);
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  color: var(--am-c-text-muted);
}
.am-cap__title { margin: 0 0 var(--am-s-4); font-size: var(--am-fs-h2); max-width: 20ch; }
.am-cap__text  { margin: 0 0 var(--am-s-6); font-size: var(--am-fs-lead); line-height: var(--am-lh-relaxed); color: var(--am-c-text-muted); max-width: 52ch; }

.am-cap__link {
  display: inline-flex;
  align-items: center;
  gap: var(--am-s-2);
  min-height: var(--am-tap-min);
  font-size: var(--am-fs-body);
  font-weight: var(--am-fw-semibold);
  color: var(--am-brand-700);
}
.am-cap__link .am-icon { transition: transform var(--am-dur-base) var(--am-ease-out); }
.am-cap__link:hover { color: var(--am-brand-800); }
.am-cap__link:hover .am-icon { transform: translateX(4px); }

@media (max-width: 900px) {
  .am-cap__grid { grid-template-columns: minmax(0, 1fr); gap: var(--am-s-8); }
  .am-orbit { max-width: 340px; }
}

/* ==========================================================================
   6. REVIEWS — two offset rows, real names, photographs
   ========================================================================== */
.am-revs { overflow: hidden; padding-block: var(--am-s-2); }

.am-revs__row { display: flex; gap: var(--am-s-5); width: max-content; margin-bottom: var(--am-s-5); }
.am-revs__row--2 { margin-left: -140px; }

.am-rev {
  flex: 0 0 clamp(280px, 30vw, 380px);
  padding: var(--am-s-5);
  background: var(--am-c-surface);
  border: 1px solid var(--am-c-border);
  border-radius: var(--am-r-lg);
}

.am-rev__who { display: flex; align-items: center; gap: var(--am-s-3); margin-bottom: var(--am-s-4); }
.am-rev__av {
  width: 48px; height: 48px;
  flex: none;
  border-radius: var(--am-r-circle);
  object-fit: cover;
  background: var(--am-ink-100);
}
.am-rev__name { display: block; font-size: var(--am-fs-sm); font-weight: var(--am-fw-bold); color: var(--am-ink-900); }
.am-rev__role { display: block; font-size: var(--am-fs-xs); color: var(--am-c-text-muted); }
.am-rev__text { margin: 0; font-size: var(--am-fs-sm); line-height: var(--am-lh-relaxed); color: var(--am-ink-600); }

/* ==========================================================================
   7. FAQ — green hover, white text and white toggle
   ========================================================================== */
.am-faq { max-width: 800px; margin-inline: auto; }

.am-faq__label {
  display: inline-block;
  padding: var(--am-s-2) var(--am-s-4);
  border-radius: var(--am-r-pill);
  background: var(--am-brand-100);
  color: var(--am-brand-800);
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
}

.am-faq__item {
  background: var(--am-c-surface);
  border: 1px solid var(--am-c-border);
  border-radius: var(--am-r-md);
  margin-bottom: var(--am-s-3);
  overflow: hidden;
  transition: background var(--am-dur-base) var(--am-ease-out), border-color var(--am-dur-base) var(--am-ease-out);
}

.am-faq .am-accordion,
.am-faq .am-accordion__item { border: 0; }

.am-faq .am-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-s-4);
  width: 100%;
  min-height: 70px;
  padding: var(--am-s-4) var(--am-s-5);
  font-family: var(--am-font-body);
  font-size: var(--am-fs-lead);
  font-weight: var(--am-fw-medium);
  color: var(--am-ink-900);
  text-align: left;
  transition: background var(--am-dur-base) var(--am-ease-out), color var(--am-dur-base) var(--am-ease-out);
}

/* Green fill, white label, white toggle. Was inheriting a blue link colour. */
.am-faq .am-accordion__trigger:hover,
.am-faq .am-accordion__trigger:focus-visible,
.am-faq .am-accordion__trigger[aria-expanded="true"] {
  background: var(--am-brand-700);
  color: #fff;
}

.am-faq .am-accordion__sign {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: none;
  border-radius: 0;
  background: none;
  color: var(--am-ink-600);
  transition: transform var(--am-dur-base) var(--am-ease-out), color var(--am-dur-base) var(--am-ease-out);
}
.am-faq .am-accordion__trigger:hover .am-accordion__sign,
.am-faq .am-accordion__trigger:focus-visible .am-accordion__sign,
.am-faq .am-accordion__trigger[aria-expanded="true"] .am-accordion__sign { color: #fff; }
.am-faq .am-accordion__trigger[aria-expanded="true"] .am-accordion__sign { transform: rotate(45deg); }

.am-faq .am-accordion__content {
  padding: var(--am-s-5);
  font-size: var(--am-fs-sm);
  line-height: var(--am-lh-relaxed);
  color: var(--am-c-text-muted);
  border-top: 1px solid var(--am-c-border);
}

/* ==========================================================================
   8. FOOTER + MISC
   ========================================================================== */
/* The theme's own back-to-top is removed; the browser/OS one is enough. */
.am-totop { display: none !important; }

/* Long medicine names break between words, never mid-syllable. */
.am-product__title, .am-cond__name { overflow-wrap: break-word; word-break: normal; hyphens: auto; }

/* ---- 13-pdp.css ---- */
/* ==========================================================================
   PRODUCT DETAIL + SHOP CARD POLISH
   Built to the supplied reference: gallery with thumbnail strip on the left,
   purchase panel on the right, then tabs, then a review histogram.
   ========================================================================== */

/* Same 80vw measure as the shop grid, so the two pages line up. */
.am-pdpwrap {
  width: var(--am-container-shop);
  max-width: calc(100% - (var(--am-gutter) * 2));
  margin-inline: auto;
}

.am-pdp { padding-bottom: var(--am-section-y); }

.am-pdp__crumbs {
  padding-block: var(--am-s-5);
  background: var(--am-c-bg-alt);
  border-bottom: 1px solid var(--am-c-border);
  margin-bottom: var(--am-s-9);
}
.am-crumbs--dark { margin-bottom: 0; }
.am-crumbs--dark a { color: var(--am-c-text-muted); }
.am-crumbs--dark a:hover { color: var(--am-brand-700); }
.am-crumbs--dark [aria-current="page"] { color: var(--am-ink-900); font-weight: var(--am-fw-medium); }
.am-crumbs--dark .am-crumbs__sep { color: var(--am-ink-300); }

.am-pdp__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--am-s-7), 4vw, var(--am-s-10));
  align-items: start;
  margin-bottom: var(--am-s-11);
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.am-gal { position: sticky; top: calc(var(--am-header-h) + var(--am-s-5)); display: grid; gap: var(--am-s-3); }

.am-gal__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--am-ink-050);
  border-radius: var(--am-r-lg);
  overflow: hidden;
  cursor: zoom-in;
}

.am-gal__main {
  width: 100%;
  height: 100%;
  /* contain, not cover: a packshot must never be cropped on its own page. */
  object-fit: contain;
  padding: var(--am-s-7);
  transition: transform var(--am-dur-slow) var(--am-ease-out), opacity var(--am-dur-fast) var(--am-ease-out);
}
.am-gal__stage.is-zoomed .am-gal__main { transform: scale(1.9); }

.am-gal__flag {
  position: absolute;
  top: var(--am-s-4); left: var(--am-s-4);
  padding: var(--am-s-1) var(--am-s-3);
  border-radius: var(--am-r-pill);
  background: var(--am-danger-500);
  color: #fff;
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
}

/* Arrows sit on the stage, vertically centred. */
.am-gal__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: var(--am-tap-min); height: var(--am-tap-min);
  border-radius: var(--am-r-circle);
  background: var(--am-brand-700);
  color: #fff;
  box-shadow: var(--am-shadow-md);
  transition: background var(--am-dur-fast) var(--am-ease-out);
}
.am-gal__arrow:hover { background: var(--am-brand-800); }
.am-gal__arrow--prev { left: var(--am-s-4); }
.am-gal__arrow--next { right: var(--am-s-4); }

.am-gal__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--am-s-3); }

.am-gal__thumb {
  aspect-ratio: 1 / 1;
  padding: var(--am-s-2);
  background: var(--am-c-surface);
  border: 2px solid var(--am-c-border);
  border-radius: var(--am-r-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--am-dur-fast) var(--am-ease-out);
}
.am-gal__thumb:hover { border-color: var(--am-brand-300); }
.am-gal__thumb.is-active { border-color: var(--am-brand-700); }
.am-gal__thumb img { width: 100%; height: 100%; object-fit: contain; }

/* ==========================================================================
   PURCHASE PANEL
   ========================================================================== */
.am-buy { display: grid; gap: var(--am-s-5); align-content: start; }

.am-buy__head { display: grid; gap: var(--am-s-3); }

.am-buy__cat {
  justify-self: start;
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  color: var(--am-brand-600);
}
.am-buy__cat:hover { color: var(--am-brand-800); }

.am-buy__title {
  margin: 0;
  font-size: var(--am-fs-h1);
  line-height: var(--am-lh-snug);
  overflow-wrap: break-word;
  hyphens: auto;
}

.am-pill {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--am-s-3);
  padding: var(--am-s-1) var(--am-s-3);
  border-radius: var(--am-r-pill);
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: 0;
  white-space: nowrap;
}
.am-pill--ok  { background: var(--am-success-100); color: var(--am-success-700); }
.am-pill--out { background: var(--am-ink-100);     color: var(--am-ink-600); }

.am-buy__rating { display: flex; align-items: center; gap: var(--am-s-3); font-size: var(--am-fs-sm); }
.am-buy__rating a { color: var(--am-c-text-muted); }
.am-buy__rating a:hover { color: var(--am-brand-700); }

.am-buy__price {
  font-family: var(--am-font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: var(--am-fw-bold);
  line-height: 1;
  letter-spacing: var(--am-ls-tight);
  color: var(--am-ink-900);
}
.am-buy__price del { font-size: 0.55em; font-weight: var(--am-fw-regular); color: var(--am-c-text-muted); margin-right: var(--am-s-3); }
.am-buy__price ins { text-decoration: none; color: var(--am-brand-700); }

.am-buy__excerpt { font-size: var(--am-fs-body); line-height: var(--am-lh-relaxed); color: var(--am-ink-600); }
.am-buy__excerpt p:last-child { margin-bottom: 0; }

.am-buy__notice { margin: 0; }

/* Attribute pills — the reference's Size/Volume selector shape. */
.am-buy__attr { display: grid; gap: var(--am-s-3); }
.am-buy__attrlabel {
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  color: var(--am-c-text-muted);
}
.am-pillrow { display: flex; flex-wrap: wrap; gap: var(--am-s-2); }
.am-optpill {
  display: inline-flex;
  align-items: center;
  min-height: var(--am-tap-min);
  padding: 0 var(--am-s-5);
  border-radius: var(--am-r-pill);
  background: var(--am-c-surface);
  box-shadow: inset 0 0 0 1px var(--am-c-border);
  font-size: var(--am-fs-sm);
  font-weight: var(--am-fw-medium);
  color: var(--am-ink-700);
}
.am-optpill.is-on { background: var(--am-brand-700); color: #fff; box-shadow: none; }

/* --- cart form (WooCommerce markup, restyled) --- */
.am-buy__cart {
  display: grid;
  gap: var(--am-s-3);
  padding: var(--am-s-5);
  background: var(--am-c-bg-alt);
  border-radius: var(--am-r-lg);
}

.am-buy__cart form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--am-s-3); margin: 0; }

.am-buy__cart .quantity {
  display: flex;
  align-items: center;
  height: 54px;
  background: var(--am-c-surface);
  border-radius: var(--am-r-pill);
  box-shadow: inset 0 0 0 1px var(--am-c-border);
  overflow: hidden;
}
.am-buy__cart .quantity input[type="number"] {
  width: 74px;
  height: 100%;
  padding: 0 var(--am-s-3);
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--am-fs-body);
  font-weight: var(--am-fw-semibold);
  -moz-appearance: textfield;
}
.am-buy__cart .quantity input[type="number"]::-webkit-outer-spin-button,
.am-buy__cart .quantity input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.am-buy__cart .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--am-s-2);
  flex: 1 1 200px;
  min-height: 54px;
  padding: 0 var(--am-s-7);
  border: 0;
  border-radius: var(--am-r-pill);
  background: var(--am-brand-700);
  color: #fff;
  font-family: var(--am-font-body);
  font-size: var(--am-fs-body);
  font-weight: var(--am-fw-semibold);
  cursor: pointer;
  transition: background var(--am-dur-fast) var(--am-ease-out);
}
.am-buy__cart .single_add_to_cart_button:hover { background: var(--am-brand-800); color: #fff; }

/* Buy now sits full width beneath, so it never competes for the same row. */
.am-buy__now {
  min-height: 54px;
  border-radius: var(--am-r-pill);
  font-size: var(--am-fs-body);
}

.am-buy__cart .stock { width: 100%; margin: 0; font-size: var(--am-fs-sm); }
.am-buy__cart .stock.in-stock { color: var(--am-success-500); }
.am-buy__cart .stock.out-of-stock { color: var(--am-danger-500); }

/* Variation selects */
.am-buy__cart table.variations { width: 100%; margin: 0 0 var(--am-s-4); border: 0; }
.am-buy__cart table.variations th,
.am-buy__cart table.variations td { padding: var(--am-s-2) 0; border: 0; vertical-align: middle; }
.am-buy__cart table.variations select {
  width: 100%;
  min-height: var(--am-control-h);
  padding: var(--am-s-2) var(--am-s-4);
  border: 1px solid var(--am-c-border);
  border-radius: var(--am-r-md);
  background: var(--am-c-surface);
  font-size: var(--am-fs-body);
}

/* --- assurances + meta --- */
.am-buy__assure { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--am-s-3); }
.am-buy__assure li { display: flex; align-items: center; gap: var(--am-s-3); margin: 0; font-size: var(--am-fs-sm); color: var(--am-ink-600); }
.am-buy__assure .am-icon { flex: none; color: var(--am-brand-600); }

.am-buy__meta { margin: 0; display: grid; gap: 0; padding-top: var(--am-s-4); border-top: 1px solid var(--am-c-border); }
.am-buy__meta > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--am-s-4);
  padding-block: var(--am-s-3);
  border-bottom: 1px solid var(--am-c-border);
}
.am-buy__meta > div:last-child { border-bottom: 0; }
.am-buy__meta dt { margin: 0; font-size: var(--am-fs-sm); font-weight: var(--am-fw-semibold); color: var(--am-c-text-muted); }
.am-buy__meta dd { margin: 0; font-size: var(--am-fs-sm); color: var(--am-ink-800); }

/* ==========================================================================
   TABS
   ========================================================================== */
.am-pdp__tabs { margin-bottom: var(--am-s-10); }

.am-theme .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-s-1);
  margin: 0 0 var(--am-s-7);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--am-c-border);
}
.am-theme .woocommerce-tabs ul.tabs li { margin: 0; }
.am-theme .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--am-s-4) var(--am-s-5);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: var(--am-fs-body);
  font-weight: var(--am-fw-semibold);
  color: var(--am-c-text-muted);
  transition: color var(--am-dur-fast) var(--am-ease-out), border-color var(--am-dur-fast) var(--am-ease-out);
}
.am-theme .woocommerce-tabs ul.tabs li a:hover { color: var(--am-brand-700); }
.am-theme .woocommerce-tabs ul.tabs li.active a { color: var(--am-brand-800); border-bottom-color: var(--am-brand-700); }

.am-theme .woocommerce-Tabs-panel {
  max-width: 74ch;
  font-size: var(--am-fs-body);
  line-height: var(--am-lh-relaxed);
  color: var(--am-ink-700);
}
.am-theme .woocommerce-Tabs-panel h2 { font-size: var(--am-fs-h3); margin-bottom: var(--am-s-4); }
.am-theme .woocommerce-Tabs-panel h3 { font-size: var(--am-fs-h4); margin-top: var(--am-s-6); }
.am-theme .woocommerce-Tabs-panel ul,
.am-theme .woocommerce-Tabs-panel ol { padding-left: var(--am-s-6); margin-bottom: var(--am-s-5); }
.am-theme .woocommerce-Tabs-panel li::marker { color: var(--am-brand-500); }
.am-theme .woocommerce-Tabs-panel th { background: var(--am-c-bg-alt); }

/* ==========================================================================
   REVIEW BLOCK
   ========================================================================== */
.am-revblock { padding-block: var(--am-s-9); border-top: 1px solid var(--am-c-border); }
.am-revblock__h { font-size: var(--am-fs-h2); margin-bottom: var(--am-s-7); }

.am-revblock__summary {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(var(--am-s-6), 4vw, var(--am-s-9));
  align-items: center;
  padding: var(--am-s-6);
  background: var(--am-c-bg-alt);
  border-radius: var(--am-r-lg);
  margin-bottom: var(--am-s-8);
}

.am-revscore { text-align: center; display: grid; gap: var(--am-s-2); justify-items: center; }
.am-revscore__n {
  font-family: var(--am-font-display);
  font-size: 3.5rem;
  font-weight: var(--am-fw-black);
  line-height: 1;
  letter-spacing: var(--am-ls-tight);
  color: var(--am-ink-900);
}
.am-revscore__of { font-size: var(--am-fs-sm); color: var(--am-c-text-muted); }
.am-revscore__c  { font-size: var(--am-fs-xs); color: var(--am-c-text-muted); }

.am-revbars { display: grid; gap: var(--am-s-2); }
.am-revbar { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: var(--am-s-3); align-items: center; }
.am-revbar__l { font-size: var(--am-fs-xs); color: var(--am-c-text-muted); font-variant-numeric: tabular-nums; }
.am-revbar__track { height: 8px; border-radius: var(--am-r-pill); background: var(--am-ink-200); overflow: hidden; }
.am-revbar__fill  { display: block; height: 100%; border-radius: var(--am-r-pill); background: var(--am-accent-500); }
.am-revbar__n { font-size: var(--am-fs-xs); color: var(--am-c-text-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* Honest empty state — the store currently has zero reviews. */
.am-revempty {
  display: grid;
  justify-items: center;
  gap: var(--am-s-2);
  padding: var(--am-s-9) var(--am-s-5);
  background: var(--am-c-bg-alt);
  border-radius: var(--am-r-lg);
  text-align: center;
}
.am-revempty .am-icon { color: var(--am-ink-400); margin-bottom: var(--am-s-2); }
.am-revempty__t { margin: 0; font-family: var(--am-font-display); font-size: var(--am-fs-h4); font-weight: var(--am-fw-bold); color: var(--am-ink-900); }
.am-revempty__s { margin: 0; max-width: 46ch; font-size: var(--am-fs-sm); color: var(--am-c-text-muted); }

/* WooCommerce's own review list + form */
.am-theme #reviews #comments ol.commentlist { padding: 0; list-style: none; display: grid; gap: var(--am-s-4); }
.am-theme #reviews .comment_container {
  display: flex;
  gap: var(--am-s-4);
  padding: var(--am-s-5);
  background: var(--am-c-surface);
  border: 1px solid var(--am-c-border);
  border-radius: var(--am-r-lg);
}
.am-theme #reviews .comment_container img.avatar { width: 48px; height: 48px; flex: none; border-radius: var(--am-r-circle); }
.am-theme #reviews .comment-text { flex: 1 1 auto; min-width: 0; }
.am-theme #review_form_wrapper { margin-top: var(--am-s-7); padding: var(--am-s-6); background: var(--am-c-bg-alt); border-radius: var(--am-r-lg); }
.am-theme #review_form input[type="text"],
.am-theme #review_form input[type="email"],
.am-theme #review_form textarea {
  width: 100%;
  padding: var(--am-s-3) var(--am-s-4);
  border: 1px solid var(--am-c-border);
  border-radius: var(--am-r-md);
  background: var(--am-c-surface);
  font-size: var(--am-fs-body);
}

.am-pdp__safety { padding-bottom: var(--am-s-8); }

.am-pdp__related { padding-block: var(--am-s-9); background: var(--am-c-bg-alt); border-top: 1px solid var(--am-c-border); }
.am-pdp__related h2 { font-size: var(--am-fs-h2); margin-bottom: var(--am-s-7); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .am-pdp__top { grid-template-columns: minmax(0, 1fr); gap: var(--am-s-7); }
  .am-gal { position: static; }
  .am-revblock__summary { grid-template-columns: minmax(0, 1fr); gap: var(--am-s-6); }
}

@media (max-width: 600px) {
  .am-pdp__crumbs { margin-bottom: var(--am-s-6); }
  .am-gal__main { padding: var(--am-s-4); }
  .am-gal__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--am-s-2); }
  .am-buy__cart { padding: var(--am-s-4); }
  .am-buy__cart form.cart { flex-direction: column; align-items: stretch; }
  .am-buy__cart .quantity { width: 100%; justify-content: center; }
  .am-buy__cart .single_add_to_cart_button { width: 100%; flex: 1 1 auto; }
  .am-buy__meta > div { grid-template-columns: minmax(0, 1fr); gap: var(--am-s-1); }
  .am-buy__title { font-size: var(--am-fs-h2); }
  .am-pill { display: inline-block; margin-left: 0; margin-top: var(--am-s-2); }
}

/* ---- 14-pages.css ---- */
/* ==========================================================================
   ABOUT + CONTACT
   Loaded after 13-pdp so these win on source order.
   Icon treatments follow the same rule as the trust row: green icon on white at
   rest, white icon on pine on hover, and the label changes with it so nothing
   is ever a mid-contrast blur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED SPLIT — copy beside a photograph or a panel
   -------------------------------------------------------------------------- */
.am-abtsplit {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(var(--am-s-7), 5vw, var(--am-s-10));
  align-items: center;
}
.am-abtsplit--top { align-items: start; }

.am-abtfig {
  margin: 0;
  border-radius: var(--am-r-xl);
  overflow: hidden;
  box-shadow: var(--am-shadow-lg);
}
.am-abtfig img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 5; }

.am-abtnotes { display: grid; gap: var(--am-s-4); }

/* --------------------------------------------------------------------------
   RECORD — labelled rows. Used for the regulatory table and the contact panel.
   Deliberately not metric tiles: this is reference information, not a dashboard.
   -------------------------------------------------------------------------- */
.am-record {
  margin: 0;
  display: grid;
  gap: 0;
  background: var(--am-c-surface);
  border: 1px solid var(--am-c-border);
  border-radius: var(--am-r-lg);
  overflow: hidden;
}

.am-record__row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--am-s-5);
  align-items: baseline;
  padding: var(--am-s-5) var(--am-s-6);
  border-bottom: 1px solid var(--am-c-border);
}
.am-record__row:last-child { border-bottom: 0; }

.am-record dt {
  margin: 0;
  font-size: var(--am-fs-xs);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--am-ls-wide);
  text-transform: uppercase;
  color: var(--am-c-text-muted);
}
.am-record dd { margin: 0; font-size: var(--am-fs-body); color: var(--am-ink-800); }

/* Compact variant for the contact sidebar, where there is no room for 260px. */
.am-record--tight { border: 0; border-radius: 0; background: none; }
.am-record--tight .am-record__row { grid-template-columns: minmax(0, 1fr); gap: var(--am-s-1); padding: var(--am-s-3) 0; }

/* --------------------------------------------------------------------------
   COMMITMENTS — icon left, copy right, pine on hover
   -------------------------------------------------------------------------- */
.am-vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--am-s-4); }

.am-val {
  display: flex;
  align-items: flex-start;
  gap: var(--am-s-4);
  padding: var(--am-s-6);
  background: var(--am-c-surface);
  border: 1px solid var(--am-c-border);
  border-radius: var(--am-r-lg);
  transition: background var(--am-dur-base) var(--am-ease-out),
              border-color var(--am-dur-base) var(--am-ease-out);
}
.am-val:hover { background: var(--am-brand-700); border-color: var(--am-brand-700); }

.am-val__ic { flex: none; color: var(--am-brand-600); transition: color var(--am-dur-base) var(--am-ease-out); }
.am-val:hover .am-val__ic { color: #fff; }

.am-val__t { margin: 0 0 var(--am-s-2); font-size: var(--am-fs-h4); transition: color var(--am-dur-base) var(--am-ease-out); }
.am-val__s { margin: 0; font-size: var(--am-fs-sm); line-height: var(--am-lh-relaxed); color: var(--am-c-text-muted); transition: color var(--am-dur-base) var(--am-ease-out); }
/* #fff on --am-brand-700 is 7.4:1; the softened body copy is 5.1:1. */
.am-val:hover .am-val__t { color: #fff; }
.am-val:hover .am-val__s { color: rgba(255, 255, 255, 0.86); }

/* --------------------------------------------------------------------------
   ROLES — four across, centred, same hover contract
   -------------------------------------------------------------------------- */
.am-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--am-s-4); }

.am-role {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--am-s-3);
  padding: var(--am-s-6) var(--am-s-5);
  background: var(--am-c-surface);
  border: 1px solid var(--am-c-border);
  border-radius: var(--am-r-lg);
  transition: background var(--am-dur-base) var(--am-ease-out),
              border-color var(--am-dur-base) var(--am-ease-out);
}
.am-role:hover { background: var(--am-brand-700); border-color: var(--am-brand-700); }

.am-role__ic {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--am-r-circle);
  background: var(--am-brand-100);
  color: var(--am-brand-700);
  transition: background var(--am-dur-base) var(--am-ease-out), color var(--am-dur-base) var(--am-ease-out);
}
.am-role:hover .am-role__ic { background: rgba(255, 255, 255, 0.16); color: #fff; }

.am-role__t { margin: 0; font-size: var(--am-fs-h4); transition: color var(--am-dur-base) var(--am-ease-out); }
.am-role__s { margin: 0; font-size: var(--am-fs-sm); line-height: var(--am-lh-relaxed); color: var(--am-c-text-muted); transition: color var(--am-dur-base) var(--am-ease-out); }
.am-role:hover .am-role__t { color: #fff; }
.am-role:hover .am-role__s { color: rgba(255, 255, 255, 0.86); }

/* --------------------------------------------------------------------------
   CONTACT — method row
   -------------------------------------------------------------------------- */
.am-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--am-s-4); }

.am-way {
  display: grid;
  gap: var(--am-s-1);
  padding: var(--am-s-6);
  background: var(--am-c-surface);
  border: 1px solid var(--am-c-border);
  border-radius: var(--am-r-lg);
  transition: background var(--am-dur-base) var(--am-ease-out),
              border-color var(--am-dur-base) var(--am-ease-out);
}
a.am-way:hover { background: var(--am-brand-700); border-color: var(--am-brand-700); }

.am-way__ic { color: var(--am-brand-600); margin-bottom: var(--am-s-3); transition: color var(--am-dur-base) var(--am-ease-out); }
a.am-way:hover .am-way__ic { color: #fff; }

.am-way__label { font-size: var(--am-fs-sm); font-weight: var(--am-fw-semibold); color: var(--am-c-text-muted); transition: color var(--am-dur-base) var(--am-ease-out); }
.am-way__value {
  font-family: var(--am-font-display);
  font-size: var(--am-fs-h4);
  font-weight: var(--am-fw-bold);
  color: var(--am-ink-900);
  /* Long email addresses must wrap, never widen the card. */
  overflow-wrap: anywhere;
  transition: color var(--am-dur-base) var(--am-ease-out);
}
.am-way__meta { font-size: var(--am-fs-xs); color: var(--am-c-text-muted); transition: color var(--am-dur-base) var(--am-ease-out); }

a.am-way:hover .am-way__label,
a.am-way:hover .am-way__value { color: #fff; }
a.am-way:hover .am-way__meta { color: rgba(255, 255, 255, 0.82); }

/* The emergency card is information, not an action: amber, and no hover. */
.am-way--alert { background: var(--am-warning-100); border-color: transparent; }
.am-way--alert .am-way__ic { color: var(--am-warning-700); }
.am-way--alert .am-way__label,
.am-way--alert .am-way__meta { color: var(--am-warning-700); }
.am-way--alert .am-way__value { color: var(--am-warning-700); }

/* --------------------------------------------------------------------------
   CONTACT — form + aside
   -------------------------------------------------------------------------- */
.am-ctgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(var(--am-s-7), 4vw, var(--am-s-9));
  align-items: start;
}

.am-ctform__intro { margin: 0 0 var(--am-s-6); font-size: var(--am-fs-sm); line-height: var(--am-lh-relaxed); color: var(--am-c-text-muted); }
.am-ctform .am-notice { margin-bottom: var(--am-s-5); }

.am-ctaside { display: grid; gap: var(--am-s-5); position: sticky; top: calc(var(--am-header-h) + var(--am-s-5)); }

.am-ctcard {
  padding: var(--am-s-6);
  background: var(--am-c-surface);
  border: 1px solid var(--am-c-border);
  border-radius: var(--am-r-lg);
}
.am-ctcard__t {
  display: flex;
  align-items: center;
  gap: var(--am-s-3);
  margin: 0 0 var(--am-s-4);
  padding-bottom: var(--am-s-4);
  border-bottom: 1px solid var(--am-c-border);
  font-size: var(--am-fs-h4);
}
.am-ctcard__t .am-icon { color: var(--am-brand-600); flex: none; }

.am-ctcard__note {
  display: flex;
  gap: var(--am-s-2);
  margin: var(--am-s-4) 0 0;
  padding-top: var(--am-s-4);
  border-top: 1px solid var(--am-c-border);
  font-size: var(--am-fs-xs);
  line-height: var(--am-lh-normal);
  color: var(--am-c-text-muted);
}
.am-ctcard__note .am-icon { flex: none; margin-top: 2px; color: var(--am-brand-500); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .am-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-ctgrid { grid-template-columns: minmax(0, 1fr); }
  .am-ctaside { position: static; }
}

@media (max-width: 900px) {
  .am-abtsplit { grid-template-columns: minmax(0, 1fr); }
  /* Photograph after the copy on narrow screens, and shorter. */
  .am-abtfig { order: 2; max-width: 560px; margin-inline: auto; }
  .am-abtfig img { aspect-ratio: 4 / 3; }
  .am-record__row { grid-template-columns: minmax(0, 1fr); gap: var(--am-s-1); }
  .am-ways { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .am-vals { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .am-roles { grid-template-columns: minmax(0, 1fr); }
  .am-record__row { padding: var(--am-s-4) var(--am-s-5); }
  .am-val, .am-way, .am-ctcard { padding: var(--am-s-5); }
}

/* ---- 15-fixes.css ---- */
/* ==========================================================================
   FIXES — loaded last
   Each block traces to a specific reported defect.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SHOP PAGINATION — was stacking vertically
   --------------------------------------------------------------------------
   The numbers were rendering one per line. `paginate_links( 'type' => 'list' )`
   outputs a <ul class="page-numbers"> whose <li>s inherit the theme's default
   block list styling, and the flex rule only targeted `.am-pagination ul`,
   which did not match WordPress's actual class name.
   -------------------------------------------------------------------------- */
.am-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--am-s-9);
}

.am-pagination ul,
.am-pagination ul.page-numbers,
.am-pagination .page-numbers {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: var(--am-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.am-pagination li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.am-pagination a.page-numbers,
.am-pagination span.page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: var(--am-tap-min);
  height: var(--am-tap-min);
  padding: 0 var(--am-s-3);
  border-radius: var(--am-r-md);
  background: var(--am-c-surface);
  box-shadow: inset 0 0 0 1px var(--am-c-border);
  font-size: var(--am-fs-sm);
  font-weight: var(--am-fw-medium);
  color: var(--am-ink-700);
  text-decoration: none;
  transition: background var(--am-dur-fast) var(--am-ease-out),
              color var(--am-dur-fast) var(--am-ease-out);
}
.am-pagination a.page-numbers:hover { background: var(--am-brand-050); color: var(--am-brand-800); }
.am-pagination .page-numbers.current { background: var(--am-brand-700); color: #fff; box-shadow: none; }
.am-pagination .page-numbers.dots { background: none; box-shadow: none; color: var(--am-ink-400); }

/* --------------------------------------------------------------------------
   2. CLOSING CTA — was a boxed panel with white space around it
   The section is now full width, edge to edge, with no gap above, below or
   at the sides.
   -------------------------------------------------------------------------- */
.am-cta {
  padding: 0;
  margin: 0;
}

.am-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(var(--am-s-9), 7vw, var(--am-s-12)) var(--am-gutter);
  border: 0;
  border-radius: 0;
  background: var(--am-brand-050);
}

/* The container inside the CTA must not re-introduce a gutter. */
.am-cta > .am-container {
  max-width: none;
  padding-inline: 0;
  width: 100%;
}

.am-cta__title { margin: 0 0 var(--am-s-4); max-width: 22ch; font-size: var(--am-fs-h2); }
.am-cta__text  { margin: 0 0 var(--am-s-7); max-width: 62ch; font-size: var(--am-fs-lead); color: var(--am-c-text-muted); }
.am-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--am-s-3); }

/* --------------------------------------------------------------------------
   3. QUANTITY STEPPER — arrows injected by app.js
   Native number spinners are hidden: they are ~10px, hard to hit, and render
   differently in every browser. These are proper 44px targets.
   -------------------------------------------------------------------------- */
.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantity input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.am-qty {
  display: inline-flex !important;
  align-items: center;
  height: 54px;
  background: var(--am-c-surface);
  border-radius: var(--am-r-pill);
  box-shadow: inset 0 0 0 1px var(--am-c-border);
  overflow: hidden;
}

.am-qty__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 100%;
  flex: none;
  background: transparent;
  border: 0;
  color: var(--am-ink-700);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background var(--am-dur-fast) var(--am-ease-out), color var(--am-dur-fast) var(--am-ease-out);
}
.am-qty__btn:hover:not(:disabled) { background: var(--am-brand-100); color: var(--am-brand-800); }
.am-qty__btn:disabled { opacity: 0.32; cursor: not-allowed; }

.am-qty input.qty,
.am-qty input[type="number"] {
  width: 56px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--am-fs-body);
  font-weight: var(--am-fw-semibold);
  color: var(--am-ink-900);
}
.am-qty input:focus { outline: none; }
.am-qty:focus-within { box-shadow: inset 0 0 0 2px var(--am-brand-500); }

/* --------------------------------------------------------------------------
   4. FOOTER — larger column headings with more breathing room beneath
   -------------------------------------------------------------------------- */
.am-footer__heading {
  margin: 0 0 var(--am-s-6);
  font-size: var(--am-fs-body);   /* was --am-fs-xs */
  font-weight: var(--am-fw-semibold);
  letter-spacing: 0.02em;         /* wide tracking is wrong at this size */
  text-transform: none;
  color: #fff;
}

.am-footer__links { gap: var(--am-s-3); }

/* --------------------------------------------------------------------------
   5. CONTACT — details + map, now the form has gone
   -------------------------------------------------------------------------- */
.am-ctgrid--nofrom {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: stretch;
}
.am-ctgrid--nofrom .am-ctcard { align-self: start; }
.am-ctgrid--nofrom .am-map { aspect-ratio: auto; min-height: 380px; }

@media (max-width: 900px) {
  .am-ctgrid--nofrom { grid-template-columns: minmax(0, 1fr); }
  .am-ctgrid--nofrom .am-map { min-height: 300px; }
}

/* ---- 16-final.css ---- */
/* ==========================================================================
   FINAL PASS — loaded last
   Each block traces to a specific reported defect on the single product page,
   the footer, or mobile.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GALLERY — arrows outside the image, circular, always visible
   --------------------------------------------------------------------------
   Previously the arrows sat on top of the photograph inside .am-gal__stage,
   which is the zoom surface — so clicking an arrow also triggered the zoom.
   The stage is now a fixed-width centre column with the arrows in their own
   grid tracks either side, so they can never overlap the image.
   -------------------------------------------------------------------------- */
/*
   Explicit column/row numbers rather than named grid areas. The named-area
   version placed both arrows in the same cell (measured: both at 108–168px,
   overlapping the photograph) and the default `stretch` alignment pulled each
   button to the column width, giving a 60x44 oval instead of a circle.
*/
.am-gal {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: var(--am-s-3);
  position: sticky;
  top: calc(var(--am-header-h) + var(--am-s-5));
}

.am-gal__stage  { grid-column: 2; grid-row: 1; }
.am-gal__thumbs { grid-column: 1 / -1; grid-row: 2; }

.am-gal__arrow {
  /* Reset the absolute positioning inherited from 13-pdp.css. */
  position: static;
  inset: auto;
  transform: none;
  /* place-self stops the grid stretching the button into an oval. */
  place-self: center;
  display: grid;
  place-items: center;
  /*
     min-width/max-width are pinned because a shared button base sets a
     min-width for tap targets, which was overriding `width` and producing a
     60x44 oval. Measured before this: 60x44. After: 44x44.
  */
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  background: var(--am-brand-700);
  color: #fff;
  box-shadow: var(--am-shadow-md);
  transition: background var(--am-dur-fast) var(--am-ease-out),
              transform var(--am-dur-fast) var(--am-ease-out);
}
.am-gal__arrow:hover { background: var(--am-brand-800); transform: scale(1.06); }
.am-gal__arrow .am-icon { width: 20px; height: 20px; }

.am-gal__arrow--prev { grid-column: 1; grid-row: 1; }
.am-gal__arrow--next { grid-column: 3; grid-row: 1; }

/* --------------------------------------------------------------------------
   2. GALLERY IMAGES — fill their box, no grey showing
   -------------------------------------------------------------------------- */
.am-gal__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--am-surface);
  border-radius: var(--am-r-lg);
  overflow: hidden;
  cursor: zoom-in;
}

.am-gal__main {
  width: 100%;
  height: 100%;
  /* cover, not contain: the brief asks for the frame filled with no grey
     letterboxing around the packshot. */
  object-fit: cover;
  object-position: center;
  padding: 0;
  display: block;
}

/* Thumbnails fill their squares too. */
.am-gal__thumb {
  padding: 0;
  overflow: hidden;
  background: var(--am-surface);
}
.am-gal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --------------------------------------------------------------------------
   3. TABS — bigger headings, more breathing room around the rule
   -------------------------------------------------------------------------- */
.am-theme .woocommerce-tabs ul.tabs {
  gap: var(--am-s-5);
  margin-bottom: var(--am-s-8);
  padding-block: var(--am-s-2);
}

.am-theme .woocommerce-tabs ul.tabs li a {
  padding: var(--am-s-4) var(--am-s-2);
  font-size: var(--am-fs-h4);
  font-weight: var(--am-fw-semibold);
  letter-spacing: var(--ls-tight, -0.01em);
}

/* Section headings on the product page, a step up in size. */
.am-revblock__h,
.am-pdp__related h2 { font-size: var(--am-fs-h2); }

/* --------------------------------------------------------------------------
   4. VERTICAL RHYTHM — kill the dead space above the CTA and below related
   -------------------------------------------------------------------------- */
.am-pdp { padding-bottom: 0; }
.am-pdp__safety { padding-bottom: var(--am-s-8); }
.am-pdp__related { padding-block: var(--am-s-9); margin-bottom: 0; }
.am-pdp__related > .am-pdpwrap > * { margin-bottom: 0; }

/* The CTA follows immediately, with no gap. */
.am-pdp + .am-cta,
.am-pdp__related + .am-cta { margin-top: 0; }

/* --------------------------------------------------------------------------
   5. RELATED PRODUCTS — one per row on mobile, matching the shop
   -------------------------------------------------------------------------- */
.am-theme .am-pdp__related ul.products,
.am-theme .am-pdp__related ul.products.am-products:not(.elementor-grid) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--am-s-5) !important;
}
@media (min-width: 560px) {
  .am-theme .am-pdp__related ul.products,
  .am-theme .am-pdp__related ul.products.am-products:not(.elementor-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1000px) {
  .am-theme .am-pdp__related ul.products,
  .am-theme .am-pdp__related ul.products.am-products:not(.elementor-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* --------------------------------------------------------------------------
   6. FOOTER — centre the legal bar on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .am-footer__legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--am-s-4);
  }
  .am-footer__copy { text-align: center; }
  .am-footer__legallinks { justify-content: center; }
}

/* --------------------------------------------------------------------------
   7. LIGHTBOX — tap to open on touch, pinch/zoom inside
   Hover-zoom is pointless on a phone, so below the hover breakpoint the stage
   opens a full-screen viewer instead.
   -------------------------------------------------------------------------- */
.am-lb {
  position: fixed;
  inset: 0;
  z-index: var(--am-z-modal);
  display: none;
  place-items: center;
  background: rgba(8, 21, 18, 0.94);
  padding: var(--am-s-4);
}
.am-lb.is-open { display: grid; }

.am-lb__img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--am-r-md);
  /* Lets the browser's native pinch-zoom work on the image itself. */
  touch-action: pinch-zoom;
  transition: transform var(--am-dur-base) var(--am-ease-out);
  transform-origin: center;
}

.am-lb__close,
.am-lb__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(8px);
}
.am-lb__close { top: var(--am-s-4); right: var(--am-s-4); }
.am-lb__nav--prev { left: var(--am-s-3); top: 50%; transform: translateY(-50%); }
.am-lb__nav--next { right: var(--am-s-3); top: 50%; transform: translateY(-50%); }
.am-lb__close:hover, .am-lb__nav:hover { background: rgba(255, 255, 255, 0.30); }

.am-lb__zoom {
  position: absolute;
  bottom: var(--am-s-5);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--am-s-2);
}
.am-lb__zoombtn {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.375rem;
  line-height: 1;
  backdrop-filter: blur(8px);
}
.am-lb__zoombtn:hover { background: rgba(255, 255, 255, 0.30); }

/* ==========================================================================
   8. MOBILE — single product spacing, overlap and type sizing
   ========================================================================== */
@media (max-width: 700px) {

  /* Arrows move beneath the image so the stage keeps the full width. */
  .am-gal {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--am-s-3);
  }
  .am-gal__stage         { grid-column: 1 / -1; grid-row: 1; }
  .am-gal__arrow--prev   { grid-column: 1; grid-row: 2; justify-self: end; }
  .am-gal__arrow--next   { grid-column: 2; grid-row: 2; justify-self: start; }
  .am-gal__thumbs        { grid-column: 1 / -1; grid-row: 3; }

  /* Hover zoom does nothing useful on touch; the lightbox handles it. */
  .am-gal__stage { cursor: pointer; }
  .am-gal__stage.is-zoomed .am-gal__main { transform: none; }
  .am-gal__zoomhint { display: none; }

  .am-gal__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--am-s-2); }

  /* Title was colliding with the stock pill. */
  .am-buy__title {
    font-size: clamp(1.5rem, 6.5vw, 1.9rem);
    line-height: 1.25;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--am-s-3);
  }
  .am-pill { margin: 0; }

  .am-buy { gap: var(--am-s-4); }
  .am-buy__price { font-size: 1.75rem; }
  .am-buy__excerpt { font-size: var(--am-fs-sm); }

  /* Cart controls stack full width with real spacing between them. */
  .am-buy__cart { padding: var(--am-s-4); gap: var(--am-s-3); }
  .am-buy__cart form.cart { flex-direction: column; align-items: stretch; gap: var(--am-s-3); }
  .am-qty { width: 100%; justify-content: space-between; }
  .am-qty input.qty, .am-qty input[type="number"] { width: 100%; }
  .am-buy__cart .single_add_to_cart_button,
  .am-buy__now { width: 100%; }

  .am-buy__assure li { font-size: var(--am-fs-sm); line-height: 1.5; align-items: flex-start; }
  .am-buy__assure .am-icon { margin-top: 2px; }

  .am-buy__meta > div { grid-template-columns: minmax(0, 1fr); gap: var(--am-s-1); padding-block: var(--am-s-3); }

  .am-pdp__top { gap: var(--am-s-6); margin-bottom: var(--am-s-8); }
  .am-pdp__crumbs { margin-bottom: var(--am-s-5); }

  /* Tabs scroll rather than wrapping into a cramped stack. */
  .am-theme .woocommerce-tabs ul.tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--am-s-4);
    scrollbar-width: none;
  }
  .am-theme .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
  .am-theme .woocommerce-tabs ul.tabs li a { font-size: var(--am-fs-body); white-space: nowrap; }

  .am-revblock { padding-block: var(--am-s-7); }
  .am-revblock__h, .am-pdp__related h2 { font-size: var(--am-fs-h3); margin-bottom: var(--am-s-5); }
  .am-revscore__n { font-size: 2.5rem; }
}

/* ---- 17-final2.css ---- */
/* ==========================================================================
   FINAL PASS 2 — loaded last
   Diagnosed in the browser, not guessed:
     - .am-gal computed `position: sticky` at 390px, which is why the image
       stayed put while the page scrolled under it
     - Astra's inline CSS sets `button { padding: 15px 30px }` (and 12px 24px
       below 544px). The lightbox buttons never overrode padding, so they
       inflated into ovals with off-centre glyphs
     - .am-gal__thumbs spanned `1 / -1`, i.e. across both arrow columns, so the
       thumbnail strip was wider than the image above it
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GALLERY — sticky only where there is room for it
   -------------------------------------------------------------------------- */
.am-gal { position: static; top: auto; }

@media (min-width: 981px) {
  /* Below this the summary sits under the gallery, and sticking the image
     pins it over the content as you scroll. */
  .am-gal { position: sticky; top: calc(var(--am-header-h) + var(--am-s-5)); }
}

/* --------------------------------------------------------------------------
   2. GALLERY — arrows beside the image, thumbnails aligned to it
   The stage no longer stretches to the full column, so the arrows sit next to
   the photograph rather than out at the container edges.
   -------------------------------------------------------------------------- */
@media (min-width: 701px) {
  .am-gal {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: var(--am-s-4);
    max-width: 620px;
    margin-inline: auto;
  }
  /* Thumbnails align to the image, not across the arrow columns. */
  .am-gal__thumbs { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   3. NO HOVER ZOOM
   Removed at the brief's request. The lightbox covers zooming on every device.
   -------------------------------------------------------------------------- */
.am-gal__stage { cursor: pointer; }
.am-gal__stage.is-zoomed .am-gal__main,
.am-gal__main { transform: none !important; }
.am-gal__zoomhint { display: none !important; }

/* --------------------------------------------------------------------------
   4. ROUND BUTTONS — beat Astra's global button padding
   --------------------------------------------------------------------------
   Astra's inline stylesheet targets bare `button`, so it applies to every
   control here. `padding: 0` plus fixed width/height plus grid centring is
   what makes these true circles with the glyph in the middle.
   -------------------------------------------------------------------------- */
.am-theme .am-gal__arrow,
.am-theme .am-lb__close,
.am-theme .am-lb__nav,
.am-theme .am-lb__zoombtn {
  display: grid;
  place-items: center;
  place-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  border-radius: 50%;
  aspect-ratio: 1;
  flex: none;
  overflow: hidden;
}

.am-theme .am-gal__arrow {
  width: 44px;  min-width: 44px;  max-width: 44px;
  height: 44px; min-height: 44px; max-height: 44px;
  background: var(--am-brand-700);
  color: #fff;
  box-shadow: var(--am-shadow-md);
}
.am-theme .am-gal__arrow:hover { background: var(--am-brand-800); }
.am-theme .am-gal__arrow .am-icon { width: 20px; height: 20px; display: block; }

.am-theme .am-lb__close,
.am-theme .am-lb__nav,
.am-theme .am-lb__zoombtn {
  width: 48px;  min-width: 48px;  max-width: 48px;
  height: 48px; min-height: 48px; max-height: 48px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1.5rem;
  font-weight: var(--am-fw-regular);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.am-theme .am-lb__close:hover,
.am-theme .am-lb__nav:hover,
.am-theme .am-lb__zoombtn:hover { background: rgba(255, 255, 255, 0.34); }

/* The nav buttons are vertically centred by transform, so keep it. */
.am-theme .am-lb__nav--prev { transform: translateY(-50%); }
.am-theme .am-lb__nav--next { transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   5. PAGE GUTTER — reviews text was reaching the screen edge
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  :root { --am-gutter: var(--am-s-4); }
  .am-pdpwrap { width: 100%; max-width: calc(100% - (var(--am-s-4) * 2)); }
  .am-theme .woocommerce-Tabs-panel { font-size: var(--am-fs-sm); }
  .am-revblock__summary { padding: var(--am-s-5); }
}

/* --------------------------------------------------------------------------
   6. MOBILE GALLERY — arrows tucked under, close to the image
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .am-gal { gap: var(--am-s-3); max-width: none; margin-inline: 0; }
  .am-gal__arrow--prev { justify-self: end;   margin-right: var(--am-s-2); }
  .am-gal__arrow--next { justify-self: start; margin-left: var(--am-s-2); }
  .am-gal__thumbs { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   7. PLAIN BULLET LIST — replaces the tick list on About
   -------------------------------------------------------------------------- */
.am-bullets {
  margin: var(--am-s-6) 0 0;
  padding-left: var(--am-s-5);
  list-style: disc;
}
.am-bullets li {
  margin: 0 0 var(--am-s-3);
  padding-left: var(--am-s-2);
  font-size: var(--am-fs-body);
  line-height: var(--am-lh-relaxed);
  color: var(--am-c-text);
}
.am-bullets li:last-child { margin-bottom: 0; }
.am-bullets li::marker { color: var(--am-brand-600); }