/* Figma Design System vHEQrob1MyfY2PNMTZKLmR — inspected 2026-10-26.
   Component variants take precedence over the older semantic CTA table.
   Homepage-specific responsive sizes remain in figma.css. */
:root {
  --brown-900: #2e2823;
  --brown-800: #4a4038;
  --brown-600: #615348;
  --brown-400: #8c7a6c;
  --brown-200: #c7bab0;
  --brown-100: #e2dbd5;
  --sage-900: #2e3a30;
  --sage-700: #4d5d4f;
  --sage-600: #566a58;
  --terracotta-900: #5a3219;
  --terracotta-700: #8e522d;
  --terracotta-600: #a05d33;
  --cream-200: #f1decc;
  --cream-100: #f9eee5;
  --cream-50: #fdf8f3;
  --ink: var(--brown-800);
  --body: var(--brown-600);
  --brown: var(--brown-600);
  --green: var(--sage-600);
  --green-dark: var(--sage-700);
  --copper: var(--terracotta-600);
  --cream: var(--cream-100);
  --paper: var(--cream-50);
  --line: var(--cream-200);
  --title-h1: 400 64px/1.1 var(--serif);
  --title-h2: 400 48px/1.15 var(--serif);
  --title-h3: 400 36px/1.2 var(--serif);
  --title-h4: 400 28px/1.25 var(--serif);
  --title-h5: 400 24px/1.3 var(--serif);
  --title-h6: 400 18px/1.4 var(--serif);
  --title-eyebrow: 400 14px/1.5 var(--serif);
  --body-l: 16px;
  --body-m: 14px;
  --body-line: 1.5;
  --microcopy-size: 12px;
  --microcopy-line: 1.6;
  --button-radius: 200px;
  --button-gap: 8px;
}

.button {
  gap: var(--button-gap);
  border-radius: var(--button-radius);
  font-weight: 600;
  color: var(--cream-100);
  transition: background-color .18s, color .18s;
}
.button:hover { background: var(--sage-700); transform: none; }
.button:active { background: var(--sage-900); }
.hero .button:hover { background: var(--sage-600); }
.hero .button:active { background: var(--sage-900); }
.button--copper:hover, .add-to-cart:hover { background: var(--terracotta-700); }
.button--copper:active, .add-to-cart:active { background: var(--terracotta-900); }
.button:disabled {
  background: var(--brown-100);
  color: var(--brown-400);
  cursor: not-allowed;
}
.circle-button:hover:not(:disabled) { background: var(--sage-700); }
.circle-button:active:not(:disabled) { background: var(--sage-900); }

.category h3 { font: var(--title-h4); }
.benefit h3, .review h3 { font: var(--title-h6); }
.newsletter h2 { font: var(--title-h5); }
.footer-column h3 { font: var(--title-eyebrow); }
.product-price del, .survey-date { color: var(--brown-400); }
.email-field {
  gap: 8px;
  padding: 10px 10px 10px 12px;
  border-color: var(--cream-200);
  background: var(--cream-50);
  color: var(--brown-400);
  box-shadow: 0 1px 2px 0 rgb(228 229 231 / .24);
}
.email-field .icon { width: 20px; height: 20px; }
.email-field input::placeholder { color: var(--brown-400); }
.email-field:hover { background: var(--cream-100); }
.email-field:focus-within {
  border-color: var(--sage-600);
  outline: 1px solid var(--sage-600);
  outline-offset: 0;
}
.newsletter .button { background: var(--sage-700); color: var(--cream-100); }
.newsletter .button:hover:not(:disabled) { background: var(--sage-600); }
.newsletter .button:active:not(:disabled) { background: var(--sage-900); }
.newsletter .button:disabled { background: var(--brown-100); color: var(--brown-400); }

@media (min-width: 761px) {
  .trust-intro h2 { font: var(--title-h2); }
}
@media (max-width: 760px) {
  /* Explicit homepage instance overrides, retained from the supplied frame. */
  .category h3 { font-size: 26px; }
}

/* Native details semantics, with reversible height animation handled in app.js. */
.faq details {
  overflow: hidden;
  overflow: clip;
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.faq details[data-expanded="true"] {
  border-color: var(--sage-600);
  box-shadow: 0 4px 16px rgb(74 64 56 / .04);
}
.faq details[data-expanded="false"] { border-color: var(--line); }
.faq summary { transition: color 180ms ease; }
.faq summary:hover { color: var(--sage-700); }
.faq summary:focus-visible { outline-offset: -5px; border-radius: 10px; }
.faq summary .icon { transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
.faq details[data-expanded="true"] summary .icon { transform: rotate(180deg); }
.faq details[data-expanded="false"] summary .icon { transform: rotate(0); }
.faq-answer { transition: opacity 200ms ease; }
.faq details[data-expanded="false"] .faq-answer { opacity: 0; }
.faq details[data-expanded="true"] .faq-answer { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .faq details, .faq summary, .faq summary .icon, .faq-answer { transition: none; }
}

/* Catalogue cards can link to a completed static product page. */
a.product-image-button { display: block; }
a.product-title { display: inline-block; }
[hidden] { display: none !important; }
/* Use the compact shared navigation before desktop labels begin wrapping. */
@media (min-width: 761px) and (max-width: 1000px) {
  .header-inner { height: 55px; gap: 16px; }
  .brand { width: 68px; }
  .desktop-nav,.header-cart { display: none; }
  .mobile-shop { display: inline-flex; min-height: 32px; line-height: 20px; padding: 6px 24px; font-size: 14px; margin-left: auto; }
  .menu-toggle { display: inline-grid; }
  .header-actions { margin-left: 0; gap: 16px; }
}