/* ============================================================================
 * Blue Grotto Beef — standalone reproduction stylesheet
 * Faithful vanilla-CSS port of the React app's inline styles.
 * Tokens mirror src/tokens.js; layout/measurements mirror src/App.jsx.
 * ========================================================================== */

:root {
  --cream: #F2EBDD;
  --cream-deep: #E8DEC8;
  --bone: #FBF6EC;
  --ink: #1A1F24;
  --ink-soft: #3D464E;
  --ox: #1F4051;
  --ox-deep: #13303F;
  --gold: #C9942C;
  --sage: #5C6F4A;
  --hair: rgba(26, 31, 36, 0.14);
  --hair-strong: rgba(26, 31, 36, 0.32);

  --font-stack: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'DM Serif Display', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-stack);
  min-height: 100vh;
  position: relative;
}
img { display: block; }
button { font-family: inherit; }

::selection { background: var(--ox); color: var(--cream); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cream-deep); }
::-webkit-scrollbar-thumb { background: var(--ox); border: 2px solid var(--cream-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--ox-deep); }

@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes bgb-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bgb-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bgb-slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* ---------- Grain overlay ---------- */
.grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; mix-blend-mode: multiply; opacity: 0.07; z-index: 1;
}

/* ---------- Layout helpers ---------- */
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.wrap-1300 { max-width: 1300px; margin: 0 auto; padding: 0 32px; }
.wrap-1100 { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
main { position: relative; z-index: 2; }

/* ---------- Atoms ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ox);
}
.eyebrow.gold { color: var(--gold); }
.eyebrow.cream { color: var(--cream); }

.display {
  font-family: var(--font-display); font-weight: 400; line-height: 0.98;
  letter-spacing: -0.02em; color: var(--ink); margin: 0;
}
.display em, em.a-ox, em.a-gold { font-style: italic; }
.a-ox { color: var(--ox); }
.a-gold { color: var(--gold); }

/* Display size classes — clamp() values computed from the React Display component */
.d-140 { font-size: clamp(87px, 15vw, 140px); }
.d-120 { font-size: clamp(74px, 13vw, 120px); }
.d-104 { font-size: clamp(64px, 11vw, 104px); }
.d-72  { font-size: clamp(45px, 8vw, 72px); }
.d-64  { font-size: clamp(40px, 7vw, 64px); }
.d-56  { font-size: clamp(36px, 6vw, 56px); }
.d-48  { font-size: clamp(36px, 5vw, 48px); }
.d-44  { font-size: clamp(36px, 5vw, 44px); }
.d-28  { font-size: 28px; }

/* Buttons */
.btn {
  font-family: var(--font-stack); font-weight: 600; font-size: 14px;
  letter-spacing: 0.02em; padding: 16px 28px; border-radius: 0; border: none;
  cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  transition: all 200ms ease; text-decoration: none;
}
.btn .ic { display: inline-flex; }
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: var(--ox); }
.btn-ox { background: var(--ox); color: var(--cream); }
.btn-ox:hover { background: var(--ox-deep); }
.btn-cream { background: var(--cream); color: var(--ink); border: 1px solid var(--hair-strong); }
.btn-cream:hover { background: var(--cream-deep); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--hair-strong); }
.btn-ghost:hover { background: var(--cream-deep); }
.btn-full { width: 100%; justify-content: center; }

/* lucide-style icon strokes inline as SVG */
.ic svg { display: block; }

/* ---------- Divider ornament ---------- */
.divider { display: flex; justify-content: center; align-items: center; padding: 8px 0; color: var(--ink); }

/* ============================================================================
 * HEADER
 * ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 50; background: var(--cream);
  border-bottom: 1px solid var(--hair); backdrop-filter: blur(8px);
}
.marquee {
  background: var(--ink); color: var(--cream); padding: 8px 0; overflow: hidden;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
}
.marquee-track { display: flex; gap: 48px; animation: marquee 40s linear infinite; white-space: nowrap; }
.marquee-track > span { display: flex; gap: 48px; align-items: center; }

.header-bar {
  max-width: 1400px; margin: 0 auto; padding: 20px 32px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.header-left { display: flex; align-items: center; gap: 24px; justify-content: flex-start; }
.nav { display: flex; gap: 32px; align-items: center; }
.nav-link {
  background: transparent; border: none; cursor: pointer; font-family: var(--font-stack);
  font-weight: 500; font-size: 14px; letter-spacing: 0.02em; color: var(--ink);
  padding: 0; position: relative; text-decoration: none;
}
.nav-link.active { color: var(--ox); }
.nav-link.active::after {
  content: ""; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--ox);
}
.hamburger {
  background: transparent; border: none; cursor: pointer; color: var(--ink);
  padding: 6px; display: inline-flex; align-items: center;
}
.hamburger:hover { color: var(--ox); }

.logo { background: transparent; border: none; cursor: pointer; text-align: center; padding: 0; text-decoration: none; display: block; }
.logo img { height: 50px; width: auto; display: block; margin: 0 auto; }
.logo-name {
  font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--ink);
  letter-spacing: -0.01em; line-height: 1; white-space: nowrap;
}
.logo-name em { font-style: italic; color: var(--ox); }
.logo-sub {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.3em; color: var(--ink-soft);
  margin-top: 4px; text-transform: uppercase;
}

.header-right { display: flex; gap: 20px; align-items: center; justify-content: flex-end; }
.icon-btn { background: transparent; border: none; cursor: pointer; color: var(--ink); padding: 0; display: inline-flex; }
.cart-btn {
  background: transparent; border: 1px solid var(--hair-strong); cursor: pointer;
  padding: 10px 16px; font-family: var(--font-stack); font-size: 13px; font-weight: 600;
  color: var(--ink); display: flex; align-items: center; gap: 8px;
}
.cart-badge {
  background: var(--ox); color: var(--cream); border-radius: 999px; width: 20px; height: 20px;
  font-size: 11px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono);
}

/* Mobile drawer */
.drawer-overlay { position: fixed; inset: 0; background: rgba(26,31,36,0.4); z-index: 60; backdrop-filter: blur(4px); display: none; }
.drawer {
  position: fixed; top: 0; left: 0; width: min(320px, 85vw); height: 100vh; background: var(--cream);
  z-index: 61; padding: 32px 24px; box-shadow: 8px 0 32px rgba(0,0,0,0.12);
  transform: translateX(-100%); transition: transform 320ms cubic-bezier(0.16,1,0.3,1);
}
body.menu-open .drawer { transform: translateX(0); }
body.menu-open .drawer-overlay { display: block; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.drawer-close { background: transparent; border: 1px solid var(--hair-strong); padding: 8px; cursor: pointer; color: var(--ink); display: inline-flex; }
.drawer-link {
  background: transparent; border: none; cursor: pointer; font-family: var(--font-display); font-size: 32px;
  color: var(--ink); padding: 16px 0; display: block; width: 100%; text-align: left;
  border-bottom: 1px solid var(--hair); letter-spacing: -0.01em; text-decoration: none;
}
.drawer-link.active { color: var(--ox); }
.drawer { overflow-y: auto; }
.drawer-section { margin-top: 28px; }
.drawer-section-label { margin-bottom: 14px; }
.drawer-sublink {
  display: block; font-family: var(--font-stack); font-size: 15px; font-weight: 500;
  color: var(--ink); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--hair);
  transition: color 150ms ease;
}
.drawer-sublink:hover { color: var(--ox); }
.drawer-sublink.active { color: var(--ox); }
/* submenu: the cluster pages nested under the guide pillar link */
.drawer-subnav { margin: 4px 0 4px; padding-left: 16px; border-left: 1px solid var(--hair-strong); display: flex; flex-direction: column; }
.drawer-subnav-link {
  font-family: var(--font-stack); font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--ink-soft); text-decoration: none; padding: 8px 0; transition: color 150ms ease;
}
.drawer-subnav-link:hover { color: var(--ox); }
.drawer-subnav-link.active { color: var(--ox); font-weight: 600; }
.drawer-foot { margin-top: 32px; }
.drawer-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-soft); line-height: 1.8; }

/* ============================================================================
 * HOME — hero
 * ========================================================================== */
.hero { background: var(--cream); position: relative; border-bottom: 1px solid var(--hair); overflow: hidden; }
.hero-arc { position: absolute; top: -120px; right: -120px; width: 600px; height: 600px; opacity: 0.06; z-index: 0; }
.hero-grid {
  max-width: 1400px; margin: 0 auto; padding: 60px 32px 80px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: end;
  position: relative; z-index: 1;
}
.hero-title { letter-spacing: -0.035em; }
.hero-lede { font-size: 18px; line-height: 1.55; color: var(--ink-soft); max-width: 460px; margin-top: 36px; }
.hero-cta { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; align-items: center; }
.hero-rating {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--ink-soft);
  text-transform: uppercase; margin-left: 8px; display: flex; align-items: center; gap: 8px;
}
.hero-rating .star { color: var(--gold); display: inline-flex; }
.hero-rating-mobile { display: none; }

.hero-media { position: relative; }
.hero-seal { position: absolute; top: -36px; right: -36px; background: var(--ox); border-radius: 50%; padding: 8px; box-shadow: 0 14px 40px rgba(19,48,63,0.35); }
.spec-card {
  position: absolute; bottom: -32px; left: -32px; background: var(--cream); border: 1px solid var(--hair-strong);
  padding: 24px; max-width: 280px; box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}
.spec-num { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--ink); }
.spec-num span { font-size: 16px; color: var(--ink-soft); margin-left: 4px; }
.spec-num .spec-from { font-size: 21px; color: var(--ink); margin: 0 6px 0 0; }
.spec-desc { font-size: 13px; color: var(--ink-soft); margin-top: 6px; line-height: 1.4; }

/* Photo placeholder/image */
.photo { position: relative; overflow: hidden; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-4-5 { aspect-ratio: 4 / 5; }
.r-1-1 { aspect-ratio: 1 / 1; }

/* Ranch seal */
.seal { position: relative; color: var(--cream); }
.seal svg.ring { animation: bgb-spin 32s linear infinite; display: block; }
.seal-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; pointer-events: none;
}
.seal-bg { font-family: var(--font-display); line-height: 1; font-style: italic; font-weight: 300; }
.seal-tag { font-family: var(--font-mono); letter-spacing: 0.3em; margin-top: 4px; opacity: 0.75; }

/* Trust strip */
.trust { border-top: 1px solid var(--hair); background: var(--cream-deep); }
.trust-grid { max-width: 1400px; margin: 0 auto; padding: 20px 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.trust-item { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink); font-weight: 500; line-height: 1.3; }
.trust-item .ic { color: var(--ox); flex-shrink: 0; }
.trust-short { display: none; }

/* ---------- Generic sections ---------- */
.section { padding: 120px 0; }
.section.cream { background: var(--cream); }
.section.cream-deep { background: var(--cream-deep); }
.section-head-center { text-align: center; margin-bottom: 80px; }

/* Featured / variety header row */
.head-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; gap: 24px; }
.text-link {
  background: transparent; border: none; cursor: pointer; font-family: var(--font-stack); font-weight: 600;
  font-size: 14px; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 0; text-decoration: none;
}

/* Product grid */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }

.card { background: transparent; border: none; padding: 0; cursor: pointer; text-align: left; transition: transform 250ms ease; display: block; text-decoration: none; width: 100%; }
.card:hover { transform: translateY(-4px); }
.card-media { position: relative; }
.card-badge {
  position: absolute; top: 16px; left: 16px; background: var(--cream); color: var(--ink); padding: 6px 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600;
}
.card-body { padding-top: 20px; }
.card-name { font-family: var(--font-display); font-size: 24px; color: var(--ink); line-height: 1.1; margin: 0 0 6px; font-weight: 400; }
.card-tagline { font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; line-height: 1.4; }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--hair); }
.card-price { font-family: var(--font-mono); font-size: 16px; color: var(--ink); font-weight: 600; }
.card-weight { font-size: 12px; color: var(--ink-soft); font-family: var(--font-mono); letter-spacing: 0.05em; }

/* Story strip (dark) */
.story { background: var(--ink); color: var(--cream); padding: 120px 0; position: relative; }
.story-grid { max-width: 1400px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; }
.story-copy { font-size: 17px; line-height: 1.6; color: rgba(242,235,221,0.8); max-width: 520px; margin-top: 32px; }

/* How it works */
.step { border-top: 2px solid var(--ink); padding-top: 24px; }
.step-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--ox); margin-bottom: 16px; }
.step-h { font-family: var(--font-display); font-size: 32px; line-height: 1.05; color: var(--ink); margin-bottom: 16px; }
.step-c { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* Manifesto */
.manifesto { background: var(--cream); padding: 160px 0 140px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.manifesto-head { font-family: var(--font-display); font-size: clamp(40px, 5.5vw, 84px); line-height: 1.08; color: var(--ink); text-align: center; letter-spacing: -0.025em; max-width: 1100px; margin: 32px auto 0; }
.manifesto-head em { font-style: italic; color: var(--ox); }
.manifesto-sub { text-align: center; margin-top: 56px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; color: var(--ink-soft); text-transform: uppercase; }

/* Testimonials */
.grid-3-32 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.quote-card { background: var(--bone); border: 1px solid var(--hair); padding: 40px; }
.quote-stars { display: flex; gap: 4px; margin-bottom: 24px; color: var(--ox); }
.quote-stars .ic { display: inline-flex; }
.quote-text { font-family: var(--font-display); font-size: 22px; line-height: 1.35; color: var(--ink); margin-bottom: 24px; }
.quote-author { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.quote-loc { color: var(--ink-soft); opacity: 0.6; font-weight: 400; margin-left: 8px; }

/* Big CTA */
.cta { background: var(--ox); color: var(--cream); padding: 120px 0; }
.cta-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; text-align: center; }
.cta-lede { font-size: 18px; color: rgba(242,235,221,0.8); margin: 32px auto 0; max-width: 580px; line-height: 1.5; }

/* ============================================================================
 * NEWSLETTER + FOOTER (all pages)
 * ========================================================================== */
.newsletter { background: var(--cream-deep); padding: 100px 0; border-top: 1px solid var(--hair); }
.newsletter-grid { max-width: 1100px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
.newsletter-copy { font-size: 15px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 20px; }
.newsletter-form { display: flex; border: 1px solid var(--hair-strong); background: var(--bone); }
.newsletter-form input { flex: 1; padding: 16px 18px; border: none; background: transparent; font-family: var(--font-stack); font-size: 14px; color: var(--ink); outline: none; }
.newsletter-form button { background: var(--ox); color: var(--cream); border: none; padding: 0 28px; font-family: var(--font-stack); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background 200ms; }
.newsletter-form button:hover { background: var(--ox-deep); }

.footer { background: var(--ink); color: var(--cream); margin-top: 80px; }
.footer-inner { max-width: 1400px; margin: 0 auto; padding: 80px 32px 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; }
.footer-brand-name { font-family: var(--font-display); font-size: 36px; line-height: 1; }
.footer-brand-name em { font-style: italic; color: var(--gold); }
.footer-addr { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; margin-top: 16px; opacity: 0.6; text-transform: uppercase; }
.footer-blurb { margin-top: 24px; font-size: 14px; line-height: 1.6; opacity: 0.7; max-width: 320px; }
.footer-contact { margin-top: 24px; font-size: 13px; opacity: 0.7; font-family: var(--font-mono); letter-spacing: 0.05em; line-height: 1.6; }
.footer-col-item { margin-bottom: 10px; font-size: 14px; opacity: 0.85; cursor: pointer; display: block; color: inherit; text-decoration: none; }
.footer-col-item:hover { opacity: 1; text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(242,235,221,0.15); padding-top: 24px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.5; gap: 16px; }

/* ============================================================================
 * SHOP
 * ========================================================================== */
.shop { background: var(--cream); min-height: 100vh; }
.shop-head { border-bottom: 1px solid var(--hair); padding: 80px 32px 60px; background: var(--cream); }
.shop-head-grid { max-width: 1400px; margin: 0 auto; }
.shop-head-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; }
.shop-head-copy { font-size: 16px; line-height: 1.6; color: var(--ink-soft); padding-bottom: 12px; }

.filter-bar { border-bottom: 1px solid var(--hair); background: var(--cream); position: sticky; top: 80px; z-index: 10; }
.filter-inner { max-width: 1400px; margin: 0 auto; padding: 20px 32px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.filter-cats { display: flex; gap: 4px; }
.filter-cat { background: transparent; color: var(--ink); border: 1px solid var(--hair-strong); padding: 10px 18px; font-family: var(--font-stack); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 150ms ease; }
.filter-cat.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.filter-right { display: flex; align-items: center; gap: 12px; }
.filter-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; color: var(--ink-soft); text-transform: uppercase; }
.sort-wrap { position: relative; display: flex; align-items: center; gap: 4px; }
.sort-wrap select { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid var(--hair-strong); padding: 10px 36px 10px 14px; font-family: var(--font-stack); font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; border-radius: 0; }
.sort-wrap .chev { position: absolute; right: 12px; pointer-events: none; display: inline-flex; }
.shop-grid-wrap { max-width: 1400px; margin: 0 auto; padding: 60px 32px 120px; }
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }

/* ============================================================================
 * ABOUT
 * ========================================================================== */
.about { background: var(--cream); }
.about-hero { border-bottom: 1px solid var(--hair); padding: 100px 32px 80px; }
.about-hero-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.about-hero-copy { font-size: 18px; line-height: 1.6; color: var(--ink-soft); }

.stats { background: var(--ink); color: var(--cream); padding: 60px 32px; }
.stats-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat-num { font-family: var(--font-display); font-size: 96px; line-height: 1; color: var(--gold); }
.stat-label { margin-top: 16px; opacity: 0.6; }

.about-story { padding: 120px 32px; }
.about-story-inner { max-width: 1100px; margin: 0 auto; }
.story-block { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 100px; }
.story-block:last-child { margin-bottom: 0; }
.story-block.reverse .story-block-text { order: 2; }
.story-block.reverse .story-block-media { order: 1; }
.story-year { font-family: var(--font-display); font-size: 72px; line-height: 1; color: var(--ox); margin-bottom: 16px; }
.story-block-copy { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

.practices { background: var(--cream-deep); padding: 120px 32px; }
.practices-inner { max-width: 1400px; margin: 0 auto; }
.practice-card { background: var(--cream); border: 1px solid var(--hair); padding: 32px; }
.practice-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ox); margin-bottom: 16px; text-transform: uppercase; }
.practice-c { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.about-cta { background: var(--ox); color: var(--cream); padding: 100px 32px; text-align: center; }
.about-cta-inner { max-width: 700px; margin: 0 auto; }

/* ============================================================================
 * CART DRAWER (empty state — matches default SPA state)
 * ========================================================================== */
.cart-overlay { position: fixed; inset: 0; background: rgba(28,24,18,0.5); z-index: 100; backdrop-filter: blur(4px); display: none; }
body.cart-open .cart-overlay { display: block; }
.cart-drawer { position: fixed; top: 0; right: 0; width: 460px; max-width: 100vw; height: 100vh; background: var(--cream); z-index: 101; transform: translateX(100%); transition: transform 350ms cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; box-shadow: -20px 0 40px rgba(0,0,0,0.1); }
body.cart-open .cart-drawer { transform: translateX(0); }
.cart-head { padding: 24px 28px; border-bottom: 1px solid var(--hair); display: flex; justify-content: space-between; align-items: center; }
.cart-head-count { font-family: var(--font-display); font-size: 28px; color: var(--ink); margin-top: 4px; }
.cart-body { flex: 1; overflow-y: auto; padding: 28px; }
.cart-empty { text-align: center; padding: 60px 20px; }
.cart-empty-title { font-family: var(--font-display); font-size: 24px; color: var(--ink); margin-bottom: 8px; }
.cart-empty-sub { font-size: 14px; color: var(--ink-soft); margin-bottom: 24px; }

/* ============================================================================
 * PRODUCT DETAIL PAGE (PDP)
 * ========================================================================== */
.pdp { background: var(--cream); }
.pdp-crumbs-wrap { max-width: 1400px; margin: 0 auto; padding: 32px 32px 0; }
.pdp-crumbs { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; color: var(--ink-soft); text-transform: uppercase; }
.pdp-crumbs a { color: inherit; text-decoration: none; }
.pdp-crumbs .sep { margin: 0 8px; }
.pdp-crumbs .current { color: var(--ink); }

.pdp-main { max-width: 1400px; margin: 0 auto; padding: 32px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.pdp-thumbs .photo { cursor: pointer; }
.pdp-info { position: sticky; top: 100px; height: fit-content; }
.pdp-stars { display: flex; gap: 4px; margin-bottom: 24px; color: var(--ox); align-items: center; }
.pdp-stars .ic { display: inline-flex; }
.pdp-stars .rev { font-size: 12px; color: var(--ink-soft); margin-left: 8px; }
.pdp-desc { font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 32px; }
.pdp-price-row { padding: 24px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; }
.pdp-price { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--ink); }
.pdp-perlb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; color: var(--ink-soft); margin-top: 8px; text-transform: uppercase; }
.pdp-feeds { text-align: right; }
.pdp-feeds-val { font-size: 14px; color: var(--ink); font-weight: 500; }
.pdp-buy { display: flex; gap: 12px; margin-bottom: 16px; }
.qty { display: flex; align-items: center; border: 1px solid var(--hair-strong); }
.qty button { background: transparent; border: none; padding: 16px 14px; cursor: pointer; color: var(--ink); display: inline-flex; }
.qty-val { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); min-width: 32px; text-align: center; }
.reserve { flex: 1; background: var(--ink); color: var(--cream); border: none; padding: 16px 28px; font-family: var(--font-stack); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background 200ms; }
.reserve.added { background: var(--sage); }
.pdp-ship { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase; margin-bottom: 32px; }
.pdp-includes { margin-bottom: 32px; }
.inc-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.inc-name { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.inc-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.inc-qty { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--ink-soft); white-space: nowrap; }
.pdp-specs { background: var(--bone); border: 1px solid var(--hair); padding: 24px; }
.specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; font-size: 13px; }
.spec-item { border-bottom: 1px dashed var(--hair); padding-bottom: 10px; }
.spec-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.spec-v { color: var(--ink); font-weight: 500; line-height: 1.4; }
.pdp-related { border-top: 1px solid var(--hair); padding: 100px 32px 120px; margin-top: 80px; }
.pdp-related-inner { max-width: 1400px; margin: 0 auto; }

/* Photo placeholder (mirrors the React <Photo> fallback) */
.ph { position: absolute; inset: 0; }
.ph-dots { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.14; }
.ph-border { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); opacity: 0.55; }
.ph-top, .ph-bottom { position: absolute; left: 28px; right: 28px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; opacity: 0.7; }
.ph-top { top: 28px; align-items: center; }
.ph-bottom { bottom: 28px; align-items: flex-end; }
.ph-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px; text-align: center; }
.ph-icon { font-size: clamp(28px, 8%, 48px); opacity: 0.45; margin-bottom: 14px; filter: saturate(0.85); }
.ph-url { font-family: var(--font-mono); font-size: clamp(10px, 1.6cqw, 15px); font-weight: 500; letter-spacing: 0.04em; line-height: 1.35; margin-bottom: 10px; word-break: break-all; max-width: 92%; opacity: 0.95; }
.ph-dims { font-family: var(--font-mono); font-size: clamp(8px, 1.1cqw, 11px); letter-spacing: 0.25em; text-transform: uppercase; opacity: 0.55; padding-top: 6px; border-top: 1px solid currentColor; display: inline-block; }

@media (max-width: 767px) {
  .pdp-crumbs-wrap { padding: 32px 20px 0; }
  .pdp-main { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
  .pdp-info { position: static; top: auto; }
  .pdp-thumbs { gap: 8px; }
  .specs-grid { grid-template-columns: 1fr; }
  .pdp-related { padding: 56px 20px; margin-top: 0; }
}

/* ============================================================================
 * LIVE CART DRAWER (populated by cart.js)
 * ========================================================================== */
.cart-line { display: grid; grid-template-columns: 80px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.cart-line-title { font-family: var(--font-display); font-size: 18px; color: var(--ink); line-height: 1.2; margin-bottom: 4px; }
.cart-line-price { font-size: 12px; color: var(--ink-soft); margin-bottom: 12px; }
.cart-line-qty { display: flex; align-items: center; border: 1px solid var(--hair); width: fit-content; }
.cart-line-qty button { background: transparent; border: none; padding: 6px 10px; cursor: pointer; color: var(--ink); display: inline-flex; }
.cart-line-qty .n { font-family: var(--font-mono); font-size: 12px; padding: 0 8px; color: var(--ink); }
.cart-line-total { text-align: right; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); }
.cart-foot { padding: 28px; border-top: 1px solid var(--hair); background: var(--bone); }
.cart-foot-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.cart-foot-row .lbl { color: var(--ink-soft); }
.cart-foot-row .val { font-family: var(--font-mono); color: var(--ink); }
.cart-foot-note { font-size: 12px; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.4; }
.cart-total-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--hair); margin-bottom: 16px; }
.cart-total-row .t { font-family: var(--font-display); font-size: 24px; color: var(--ink); }
.cart-total-row .v { font-family: var(--font-display); font-size: 32px; color: var(--ink); }
.cart-secure { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--ink-soft); text-align: center; margin-top: 12px; text-transform: uppercase; }
.cart-loading { text-align: center; padding: 60px 20px; color: var(--ink-soft); font-size: 14px; }

/* ============================================================================
 * REVEAL animation
 * ========================================================================== */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1000ms cubic-bezier(0.16,1,0.3,1), transform 1000ms cubic-bezier(0.16,1,0.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================================
 * RESPONSIVE — mirror useIsMobile (767) / useIsTablet (1023) + data-bgb overrides
 * ========================================================================== */
@media (max-width: 1023px) {
  .grid-4, .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 767px) {
  .wrap, .wrap-1300, .wrap-1100 { padding: 0 20px; }

  /* Header → mobile (hamburger stays; primary nav collapses into the drawer) */
  .marquee { font-size: 10px; }
  .header-bar { padding: 14px 18px; gap: 12px; }
  .nav { display: none; }
  .header-right .icon-btn.search { display: none; }
  .header-right { gap: 10px; }
  .cart-btn { padding: 8px 12px; }
  .cart-label { display: none; }
  .logo-name { font-size: 19px; }
  .logo-sub { font-size: 7.5px; }
  .logo img { height: 38px; }

  /* Hero */
  .hero-grid { grid-template-columns: 1fr; gap: 48px; padding: 40px 20px 60px; align-items: stretch; }
  .hero-arc { width: 320px; height: 320px; }
  .hero-title { font-size: clamp(56px, 16vw, 88px); }
  .hero-lede { font-size: 16px; margin-top: 24px; }
  .hero-cta { margin-top: 28px; }
  .hero-rating { display: none; }
  .hero-rating-mobile { display: flex; font-size: 10px; margin-top: 16px; margin-left: 0; }
  .hero-media { margin-top: 16px; }
  .hero-seal { top: -18px; right: -18px; }
  .spec-card { bottom: -20px; left: 12px; padding: 18px; max-width: 220px; }
  .spec-num { font-size: 30px; }
  .spec-num span { font-size: 14px; }
  .spec-num .spec-from { font-size: 16px; }
  .spec-desc { font-size: 12px; }

  /* Trust strip stays 2-col, short labels */
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px 20px; }
  .trust-full { display: none; }
  .trust-short { display: inline; }

  /* Stack everything else */
  .grid-4, .grid-3, .grid-3-32, .shop-grid,
  .story-grid, .newsletter-grid, .shop-head-cols, .about-hero-grid,
  .story-block, .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .story-block { margin-bottom: 56px; }
  .story-block.reverse .story-block-text { order: 1; }
  .story-block.reverse .story-block-media { order: 2; }

  .head-row { flex-direction: column; align-items: flex-start; gap: 16px; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .stat-num { font-size: 72px; }

  /* Compress big section paddings */
  .section, .story, .cta, .manifesto, .newsletter,
  .about-story, .practices, .about-cta, .stats { padding-top: 56px; padding-bottom: 56px; }
  .about-hero { padding: 56px 20px; }
  .shop-head { padding: 56px 20px 40px; }
  .footer-inner { padding: 56px 20px 24px; }
  .footer-bottom { flex-direction: column; gap: 12px; }

  .filter-bar { top: 64px; }
}