/* =============================================================
   STOMACARE Design System — Colors & Type
   Premium medical aesthetic for feline chronic stomatitis (FCGS)
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Brand color tokens ---------- */
  --color-primary-900: #063F39;   /* deepest dark green — CTAs, headlines */
  --color-primary-800: #073F3A;   /* near-black green */
  --color-primary-700: #0B4A43;   /* deep teal */
  --color-primary-600: #0F5D54;   /* lighter brand green */
  --color-primary-500: #14776B;   /* hover/secondary green */

  --color-mint-50:    #FAFCF8;    /* warm off-white shell */
  --color-mint-100:   #EAF6F2;    /* pale mint background */
  --color-mint-200:   #D7EEE8;    /* soft mint chip / icon bg */
  --color-mint-300:   #BFE2D9;    /* mint accent */

  --color-page-bg:    #EDF3F1;    /* outer page wash */
  --color-page-bg-alt:#E9F0ED;    /* alt outer wash */

  --color-border:     #D9E5E0;    /* hairline borders */
  --color-border-soft:#E5EDE9;    /* very subtle dividers */

  --color-text:       #102F2C;    /* primary body text */
  --color-text-muted: #4F6560;    /* muted green-gray */
  --color-text-soft:  #6B807B;    /* tertiary captions */
  --color-text-on-dark:#FAFCF8;

  --color-success:    #2E7D6B;
  --color-warning:    #B68A3D;
  --color-danger:     #B7484A;

  /* ---------- Semantic surfaces ---------- */
  --surface-shell:    #FAFCF8;    /* main rounded shell bg */
  --surface-card:     #FFFFFF;    /* white cards */
  --surface-card-soft:rgba(255, 255, 255, 0.78);
  --surface-mint:     var(--color-mint-100);
  --surface-dark:     var(--color-primary-900);

  /* ---------- Radii ---------- */
  --radius-shell:   36px;
  --radius-xl:      24px;
  --radius-lg:      18px;
  --radius-md:      14px;
  --radius-sm:      10px;
  --radius-pill:    999px;

  /* ---------- Spacing tokens ---------- */
  --space-1:  8px;
  --space-2:  12px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;

  /* ---------- Shadows ---------- */
  --shadow-soft:   0 6px 18px rgba(9, 60, 55, 0.06);
  --shadow-card:   0 12px 30px rgba(9, 60, 55, 0.08);
  --shadow-shell:  0 20px 60px rgba(9, 60, 55, 0.10);
  --shadow-lift:   0 24px 70px rgba(9, 60, 55, 0.14);
  --shadow-inner-light: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------- Typography ---------- */
  --font-serif:  "Cormorant Garamond", "Canela", "Playfair Display", Georgia, serif;
  --font-sans:   "Manrope", "Satoshi", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (desktop) */
  --fs-display: 72px;     /* hero headline */
  --fs-h1:      56px;
  --fs-h2:      44px;
  --fs-h3:      32px;
  --fs-h4:      24px;
  --fs-eyebrow: 12px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;

  --lh-display: 1.0;
  --lh-heading: 1.12;
  --lh-body:    1.6;
  --lh-tight:   1.3;

  --tracking-eyebrow: 0.18em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
}

/* =============================================================
   Semantic typography classes
   ============================================================= */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary-700);
  font-weight: 600;
}

/* Force "lining figures" + tabular numbers on every serif element.
   Cormorant Garamond defaults to old-style figures (mixed ascender/
   descender heights, e.g. the 8 dips below baseline) which makes
   prices and stats look slanted/wonky. lnum + tnum align all digits
   to the cap-height and give every digit the same width, so prices
   like "$85.80" render upright and uniform. */
.display, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3,
.p-price, .price, .hero-num, .stat-num,
[class*="-price"], [class*="-num"] {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}

.display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary-900);
  font-weight: 500;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  color: var(--color-primary-900);
  font-weight: 500;
  letter-spacing: -0.005em;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--color-primary-900);
  font-weight: 500;
}

h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--color-primary-900);
  font-weight: 500;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--color-primary-900);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-text);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--color-text-soft);
  letter-spacing: 0.02em;
}

/* =============================================================
   Reset-ish base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  /* Was: var(--color-page-bg) (mint side-bars around the shell card).
     Changed to the same cream as the shell so the page reads as
     "content sits on the page" rather than "card floating on mint".
     Inner layout is unchanged — sections keep their max-width and
     padding, just the side margins around the shell are gone. */
  background: var(--surface-shell);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Force upright "lining" figures across the whole site. The serif
     stack (Cormorant Garamond) defaults to "oldstyle" figures —
     slanted/varying-height "1, 5, 7" that read like lowercase
     letters and look messy next to upright "$", "kg", etc. This
     single rule cascades to every element; anywhere we genuinely
     want oldstyle figures has to opt in explicitly. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* The shell used to look like a rounded "card" floating on a mint
   page background. After the body bg above was matched to the shell
   colour, the border / shadow / rounded corners produce visible
   artefacts against the now-same-colour page. Strip them globally so
   the shell reads as the page itself. Each page's inline <style>
   sets these on .shell, so we need !important to win cascade order. */
.shell {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 抑制瀏覽器 Caret Browsing 模式（F7）在非輸入區域顯示閃爍游標 */
html { caret-color: transparent; }
input, textarea, select, [contenteditable="true"], [contenteditable=""] {
  caret-color: auto;
}

/* =============================================================
   Mobile responsive — applies globally to all pages
   ============================================================= */
@media (max-width: 900px) {
  /* ----- Shell goes edge-to-edge ----- */
  body { padding: 0 !important; }
  .shell {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }
  .shell > section { padding: 32px 18px !important; }

  /* ----- Site header ----- */
  .site-header {
    padding: 14px 18px !important;
    height: auto !important;
    position: relative;
    z-index: 50;
  }
  .logo-group .word { font-size: 18px !important; }
  .logo-group .sub { font-size: 8.5px !important; }
  .logo-group .mark { height: 22px !important; }

  /* Hide desktop nav, show mobile toggle */
  .site-header .nav {
    display: none !important;
  }

  /* ----- Header actions: shrink icons ----- */
  .header-actions { gap: 6px !important; }
  .btn-icon-circle { width: 38px !important; height: 38px !important; }

  /* ----- Generic grid collapses ----- */
  .grid-2, .grid-3, .grid-4,
  [class*="grid-cols-2"], [class*="grid-cols-3"], [class*="grid-cols-4"] {
    grid-template-columns: 1fr !important;
  }

  /* ----- Hero typography ----- */
  h1 { font-size: clamp(32px, 8vw, 44px) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(26px, 6vw, 34px) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(18px, 4.5vw, 22px) !important; }

  /* ----- Cart drawer on mobile ----- */
  #cart-drawer, .cart-drawer { width: 100% !important; max-width: 100% !important; }

  /* ----- Disable horizontal scroll body-wide ----- */
  body, html { overflow-x: hidden; }

  /* ----- Common section paddings ----- */
  section { padding-left: 18px; padding-right: 18px; }

  /* ----- Tables / large layouts ----- */
  table { font-size: 13px !important; }
  table td, table th { padding: 8px 6px !important; }
}

/* =============================================================
   Hamburger drawer — works at ANY viewport.

   The hamburger sits in the header at all widths so customers can
   reach the long secondary nav items (pre-treatment, treatment-
   guide) from a clean drawer instead of fighting for space in the
   inline desktop nav. mobile-nav.js tags those long links with
   class="nav-secondary"; CSS below hides them from the inline nav
   on desktop and surfaces them inside the drawer when it's open.
   ============================================================= */

/* Hamburger toggle (visible at all widths).
   z-index lives at "header" level (50) so the cart drawer (z=101) and
   other overlays can cover it cleanly. Only when the hamburger drawer
   is OPEN does it need to be the topmost element (raised to 1001 so it
   sits above the drawer's own backdrop). */
.mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  color: var(--color-primary-900);
  padding: 0;
  margin-left: 6px;
  position: relative;
  z-index: 50;
}
.site-header.mobile-nav-open .mobile-nav-toggle { z-index: 1001; }
.mobile-nav-toggle svg { width: 18px; height: 18px; }
.site-header.mobile-nav-open .mobile-nav-toggle .ic-open { display: none; }
.site-header:not(.mobile-nav-open) .mobile-nav-toggle .ic-close { display: none; }

/* Drawer: when .mobile-nav-open is on the header, the .nav element
   pops out of layout flow and slides in from the right. */
.site-header.mobile-nav-open .nav {
  display: flex !important;
  flex-direction: column !important;
  position: fixed;
  top: 0; right: 0;
  width: min(82vw, 340px);
  height: 100vh;
  padding: 80px 24px 24px;
  background: var(--surface-shell);
  box-shadow: -12px 0 40px rgba(9,60,55,0.12);
  gap: 6px !important;
  z-index: 1000;
  overflow-y: auto;
}
.site-header.mobile-nav-open .nav a {
  padding: 14px 8px !important;
  font-size: 16px !important;
  border-bottom: 1px solid var(--color-border-soft);
  width: 100%;
  display: block !important;
}
.site-header.mobile-nav-open .nav a:last-child { border-bottom: none; }
.site-header.mobile-nav-open::before {
  content: "";
  position: fixed; inset: 0;
  background: rgba(8, 30, 27, 0.42);
  z-index: 999;
}

/* Desktop only: hide secondary nav items from the inline nav; they
   live in the drawer instead. When the drawer is open, show them.
   !important is needed because the .nav-group base rule below uses
   `display: inline-flex` with the same specificity, and being declared
   later in the file would otherwise win and re-show .nav-group items
   that also carry .nav-secondary (i.e. the FCV Treatment dropdown). */
@media (min-width: 901px) {
  .site-header .nav .nav-secondary { display: none !important; }
  .site-header.mobile-nav-open .nav .nav-secondary { display: block !important; }
}

/* mobile-nav.js appends an Account link with class .nav-mobile-only to the
   nav. This rule centralises the hide/show logic so every page (including
   new ones added later) gets correct behaviour — previously each HTML had
   to declare these rules itself and a missing one caused Account to leak
   into the desktop nav (see vet-* pages). KEEP IT HERE. */
.nav-mobile-only { display: none; }
@media (max-width: 900px) {
  .site-header .nav a.nav-mobile-only { display: inline !important; }
}

/* ============================================================
   Nav dropdown — groups sub-pages under a parent label.
   Implemented as <details>/<summary> for zero-JS open/close and
   keyboard accessibility (same pattern as the lang picker).
   ============================================================ */
.site-header .nav .nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.site-header .nav .nav-group > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Inherit the same typography as sibling <a> links so the dropdown
     toggle blends into the nav row. */
  color: inherit;
  font: inherit;
  user-select: none;
}
.site-header .nav .nav-group > summary::-webkit-details-marker { display: none; }
.site-header .nav .nav-group > summary::marker { content: ""; }
.site-header .nav .nav-group .nav-chev {
  width: 12px;
  height: 12px;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.site-header .nav .nav-group[open] .nav-chev { transform: rotate(180deg); }
/* Active state — when current page is under this dropdown (e.g. on
   pre-treatment.html or treatment-guide.html), highlight the parent
   toggle to mirror how flat .nav a.active links are styled. The exact
   color/underline rules live per-page (each HTML inlines .nav a.active),
   so we just inherit + mark the summary with the same hooks. */
.site-header .nav .nav-group.active > summary {
  color: var(--color-primary-900);
  font-weight: 600;
  position: relative;
}
.site-header .nav .nav-group.active > summary::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 18px;
  height: 2px;
  background: var(--color-primary-900);
  border-radius: 1px;
}
/* When the dropdown is OPEN the floating panel sits just below the
   toggle and visually collides with the active underline. Hide the
   underline while open — the active state is still communicated by
   the bold toggle text + the highlighted child link inside the panel. */
.site-header .nav .nav-group.active[open] > summary::after {
  display: none;
}
/* Highlight the active child link inside the dropdown panel so the
   user can tell which sub-page they're currently on. */
.site-header .nav .nav-group .nav-group-menu a.active {
  background: var(--surface-shell, #f6f4ee);
  color: var(--color-primary-900);
  font-weight: 600;
}
.site-header .nav .nav-group .nav-group-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -8px;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(8, 30, 27, 0.10);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-header .nav .nav-group .nav-group-menu a {
  padding: 10px 12px !important;
  border-radius: 6px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-text);
  font-size: 14px;
  display: block;
}
.site-header .nav .nav-group .nav-group-menu a:hover,
.site-header .nav .nav-group .nav-group-menu a:focus-visible {
  background: var(--surface-shell, #f6f4ee);
  color: var(--color-primary-900);
}

/* Hamburger drawer — render the FCV-Treatment dropdown inline
   (accordion style) instead of floating. These rules MUST live outside
   any viewport media query: the drawer can be opened on desktop too
   (the hamburger button is now shown at all widths), and the underlying
   .site-header.mobile-nav-open .nav rules (drawer slide-out, fixed
   positioning) are also unscoped to viewport. When `.mobile-nav-open`
   is on the header, the dropdown should look like a drawer item at
   every viewport. The summary must look identical to a sibling <a>
   link in the drawer: same padding, border-bottom, font-size,
   left-aligned. The desktop active underline is suppressed here — the
   drawer rows are full-width so the underline reads as a stray
   divider. */
.site-header.mobile-nav-open .nav .nav-group {
  display: block !important;
  width: 100% !important;
  position: static !important;
}
.site-header.mobile-nav-open .nav .nav-group > summary {
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 14px 8px !important;
  font-size: 16px !important;
  line-height: 1;
  border-bottom: 1px solid var(--color-border-soft);
  text-align: left !important;
}
.site-header.mobile-nav-open .nav .nav-group.active > summary {
  font-weight: 600;
  color: var(--color-primary-900);
}
.site-header.mobile-nav-open .nav .nav-group.active > summary::after {
  display: none !important;
}
.site-header.mobile-nav-open .nav .nav-group > summary .nav-chev {
  width: 16px !important;
  height: 16px !important;
}
.site-header.mobile-nav-open .nav .nav-group .nav-group-menu {
  position: static !important;
  top: auto !important;
  left: auto !important;
  background: var(--surface-shell, #f6f4ee) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
  min-width: 0 !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--color-border-soft);
}
.site-header.mobile-nav-open .nav .nav-group .nav-group-menu a {
  padding: 12px 8px 12px 24px !important;
  font-size: 14px !important;
  border-bottom: 1px solid var(--color-border-soft);
  border-radius: 0 !important;
  width: 100%;
  box-sizing: border-box;
  display: block !important;
}
.site-header.mobile-nav-open .nav .nav-group .nav-group-menu a:last-child {
  border-bottom: none;
}
.site-header.mobile-nav-open .nav .nav-group .nav-group-menu a.active {
  font-weight: 600;
  color: var(--color-primary-900);
  background: transparent;
}