/* =============================================================
   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;
}

.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);
  background: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 抑制瀏覽器 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 {
    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;
  }
  .site-header.mobile-nav-open .nav {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0; right: 0;
    width: min(82vw, 320px);
    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%;
  }
  .site-header.mobile-nav-open .nav a:last-child { border-bottom: none; }

  /* Hamburger toggle button */
  .mobile-nav-toggle {
    display: inline-flex !important;
    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: 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; }

  /* Backdrop when menu open */
  .site-header.mobile-nav-open::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(8, 30, 27, 0.42);
    z-index: 999;
  }

  /* ----- 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; }
}

/* ----- Hide mobile toggle button on desktop ----- */
@media (min-width: 901px) {
  .mobile-nav-toggle { display: none !important; }
}