/* =====================================================================
   GREENYARD — design system
   Tokens follow ui-design-rules.md:
   - spacing scale 4/8/12/16/24/32/40/48/64 only
   - type scale base 16, ratio ~1.2 (H1 40 / H2 32 / H3 24 / H4 20 / 16 / 14)
   - 1 brand hue (HSB ~152) + neutrals, black + white
   - contrast: >=4.5:1 text, >=3:1 large text / borders / UI
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ---- spacing scale (the only allowed values) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px; --s-9: 64px;

  /* ---- colour: brand hue 152, ~5 HSB variations + neutrals ---- */
  --bg:          #F4F5F1;  /* page — cool workshop paper            */
  --surface:     #FFFFFF;
  --ink:         #16211B;  /* text-strong (near-black, green tinted) */
  --ink-soft:    #3A453F;  /* body                                  */
  --muted:       #55605A;  /* secondary text  (>=4.5 on bg)         */
  --brand:       #2C6E49;  /* interactive: links, buttons (152,60,43)*/
  --brand-deep:  #1F4E34;  /* hover / active / on-tint text         */
  --brand-tint:  #E7EFEA;  /* weak fill                             */
  --field-border:#6B746E;  /* form fields (>=3:1)                   */
  --hair:        #D6DBD7;  /* dividers (decorative)                 */
  --focus:       #1F4E34;

  /* ---- type ---- */
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --disp: 'Fraunces', Georgia, 'Times New Roman', serif;

  --fs-1: 14px;  /* tiny  */
  --fs-2: 16px;  /* body  */
  --fs-3: 20px;  /* h4    */
  --fs-4: 24px;  /* h3    */
  --fs-5: 32px;  /* h2    */
  --fs-6: 40px;  /* h1    */

  --rail-w: 264px;
  --radius: 10px;
}

/* ---- reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-2);
  line-height:1.5;
  color:var(--ink-soft);
  background:var(--bg);
  font-feature-settings:"tnum" 0;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:var(--brand); text-underline-offset:3px; }
a:hover{ color:var(--brand-deep); }
h1,h2,h3,h4{ color:var(--ink); margin:0; font-weight:600; }
h1{ font-family:var(--disp); font-size:var(--fs-6); line-height:44px; letter-spacing:-0.01em; }
h2{ font-family:var(--disp); font-size:var(--fs-5); line-height:40px; letter-spacing:-0.005em; }
h3{ font-size:var(--fs-4); line-height:32px; }
h4{ font-size:var(--fs-3); line-height:28px; }
p{ margin:0; }

:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }

/* =====================================================================
   APP SHELL — left index rail + main column
   ===================================================================== */
.app{ display:grid; grid-template-columns:var(--rail-w) 1fr; min-height:100vh; }

/* ---- rail ---- */
.rail{
  position:sticky; top:0; align-self:start;
  height:100vh; overflow-y:auto;
  background:var(--surface);
  border-right:1px solid var(--hair);
  padding:var(--s-6) var(--s-5);
  display:flex; flex-direction:column; gap:var(--s-6);
}
.brand{ display:flex; flex-direction:column; gap:var(--s-1); text-decoration:none; }
.brand__mark{
  font-family:var(--disp); font-weight:600; font-size:var(--fs-4);
  line-height:1.1; color:var(--ink);
}
.brand__mark span{ color:var(--brand); }
.brand__tag{ font-size:var(--fs-1); color:var(--muted); }

.rail__label{
  font-size:var(--fs-1); color:var(--muted);
  margin:0 0 var(--s-2);
}

/* nav */
.nav{ display:flex; flex-direction:column; gap:var(--s-1); }
.nav a{
  display:flex; align-items:center; min-height:48px;
  padding:0 var(--s-3);
  border-radius:var(--radius);
  color:var(--ink); text-decoration:none; font-weight:500;
}
.nav a:hover{ background:var(--brand-tint); color:var(--brand-deep); }
.nav a[aria-current="page"]{
  background:var(--brand-tint); color:var(--brand-deep);
  box-shadow:inset 3px 0 0 var(--brand);
}

/* category index (home only) */
.index{ display:flex; flex-direction:column; gap:var(--s-1); }
.index a{
  display:block; min-height:48px; padding:var(--s-2) var(--s-3);
  border-radius:var(--radius); text-decoration:none; color:var(--ink-soft);
}
.index a:hover{ background:var(--brand-tint); color:var(--brand-deep); }
.index a b{ display:block; color:var(--ink); font-weight:600; }
.index a small{ font-size:var(--fs-1); color:var(--muted); }

/* currency segmented control */
.seg{
  display:inline-grid; grid-template-columns:1fr 1fr; gap:var(--s-1);
  background:var(--bg); border:1px solid var(--hair);
  border-radius:var(--radius); padding:var(--s-1);
}
.seg button{
  min-height:44px; border:0; border-radius:6px; cursor:pointer;
  font-family:var(--sans); font-size:var(--fs-1); font-weight:600;
  color:var(--ink-soft); background:transparent;
}
.seg button[aria-pressed="true"]{ background:var(--brand); color:#fff; }

.rail__contact{ font-size:var(--fs-1); color:var(--muted); line-height:1.5; }
.rail__contact a{ color:var(--brand); word-break:break-word; }
.rail__spacer{ flex:1 1 auto; }

/* basket pill */
.basket{
  display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:44px; padding:0 var(--s-3);
  font-size:var(--fs-1); color:var(--muted);
}
.basket b{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* =====================================================================
   MAIN
   ===================================================================== */
.main{ padding:var(--s-8) var(--s-8) var(--s-9); }
.wrap{ max-width:1120px; margin:0 auto; }

/* mobile top bar (hidden on desktop) */
.topbar{ display:none; }

/* ---- masthead (compact statement band, not a full hero) ---- */
.masthead{
  display:grid; grid-template-columns:7fr 5fr; gap:var(--s-8);
  align-items:end;
  padding-bottom:var(--s-7);
  border-bottom:1px solid var(--hair);
}
.eyebrow{
  font-size:var(--fs-1); font-weight:600; color:var(--brand);
  margin:0 0 var(--s-3);
}
.masthead h1{ margin-bottom:var(--s-4); max-width:16ch; }
.masthead p{ color:var(--muted); max-width:52ch; margin-bottom:var(--s-5); }
.trust{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3); }
.trust li{ display:flex; gap:var(--s-3); font-size:var(--fs-1); color:var(--ink-soft); }
.trust b{ color:var(--ink); }
.trust .mk{
  flex:0 0 auto; width:var(--s-4); height:var(--s-4); margin-top:3px;
  border:2px solid var(--brand); border-radius:50%;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s-2); min-height:48px; padding:0 var(--s-5);
  font-family:var(--sans); font-size:var(--fs-2); font-weight:600;
  border-radius:var(--radius); text-decoration:none; cursor:pointer;
  border:2px solid transparent;
}
.btn--primary{ background:var(--brand); color:#fff; }
.btn--primary:hover{ background:var(--brand-deep); color:#fff; }
.btn--secondary{
  background:var(--brand-tint); color:var(--brand-deep);
  border-color:transparent; width:100%;
}
.btn--secondary:hover{ background:#D8E6DD; color:var(--brand-deep); }

/* ---- category sections ---- */
.section{ padding-top:var(--s-8); }
.section__head{ display:flex; align-items:baseline; gap:var(--s-4); margin-bottom:var(--s-6); flex-wrap:wrap; }
.section__head .num{
  font-family:var(--disp); font-size:var(--fs-3); color:var(--brand);
  font-variant-numeric:tabular-nums;
}
.section__head p{ color:var(--muted); font-size:var(--fs-1); }

/* ---- product grid (12-col -> 3 up) ---- */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6) var(--s-5); }

.card{ display:flex; flex-direction:column; gap:var(--s-3); }
.card__media{
  aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  background:var(--brand-tint);
}
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__name{ margin-top:var(--s-1); }
.card__desc{ font-size:var(--fs-1); color:var(--muted); flex:1 1 auto; }
.card__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); }
.price{
  font-size:var(--fs-3); font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.card .btn--secondary{ width:auto; padding:0 var(--s-4); min-height:48px; }

/* =====================================================================
   POLICY PAGES
   ===================================================================== */
.doc{ max-width:760px; }
.doc .eyebrow{ margin-bottom:var(--s-2); }
.doc h1{ margin-bottom:var(--s-2); }
.doc__meta{ color:var(--muted); font-size:var(--fs-1); margin-bottom:var(--s-6); }
.doc h2{ margin:var(--s-8) 0 var(--s-3); font-size:var(--fs-4); font-family:var(--disp); line-height:32px; }
.doc h3{ margin:var(--s-6) 0 var(--s-2); font-size:var(--fs-3); }
.doc p{ margin-bottom:var(--s-4); max-width:70ch; }
.doc ul{ margin:0 0 var(--s-4); padding-left:var(--s-5); }
.doc li{ margin-bottom:var(--s-2); max-width:68ch; }
.doc .lead{ color:var(--ink-soft); font-size:var(--fs-3); line-height:1.5; }
.callout{
  background:var(--brand-tint); border-radius:var(--radius);
  padding:var(--s-5); margin:var(--s-6) 0; color:var(--brand-deep);
}
.doc table{ border-collapse:collapse; width:100%; margin:var(--s-4) 0 var(--s-6); font-size:var(--fs-1); }
.doc th,.doc td{ text-align:left; padding:var(--s-3); border-bottom:1px solid var(--hair); vertical-align:top; }
.doc th{ color:var(--ink); font-weight:600; }

/* =====================================================================
   FOOTER (config-driven, on every page)
   ===================================================================== */
.foot{
  margin-top:var(--s-9); padding-top:var(--s-6);
  border-top:1px solid var(--hair);
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s-6);
  font-size:var(--fs-1); color:var(--muted);
}
.foot h4{ font-size:var(--fs-1); color:var(--ink); margin-bottom:var(--s-3); font-weight:600; }
.foot a{ color:var(--brand); }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-2); }
.foot__legal{ grid-column:1 / -1; padding-top:var(--s-5); border-top:1px solid var(--hair);
  display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .grid{ grid-template-columns:repeat(2,1fr); }
  .masthead{ grid-template-columns:1fr; gap:var(--s-6); }
}
@media (max-width:860px){
  .app{ grid-template-columns:1fr; }
  .rail{
    position:static; height:auto; border-right:0; border-bottom:1px solid var(--hair);
    display:none;
  }
  .rail.open{ display:flex; }
  .topbar{
    display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
    position:sticky; top:0; z-index:20;
    padding:var(--s-3) var(--s-4);
    background:var(--surface); border-bottom:1px solid var(--hair);
  }
  .topbar .brand__mark{ font-size:var(--fs-3); }
  .topbar__actions{ display:flex; align-items:center; gap:var(--s-3); }
  .menu-btn{
    min-height:48px; min-width:48px; padding:0 var(--s-4);
    border:2px solid var(--field-border); background:var(--surface);
    border-radius:var(--radius); font-weight:600; color:var(--ink); cursor:pointer;
  }
  .main{ padding:var(--s-6) var(--s-4) var(--s-8); }
  .foot{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  :root{ --fs-6:32px; --fs-5:26px; }
  h1{ line-height:38px; }
  h2{ line-height:32px; }
  .grid{ grid-template-columns:1fr; }
  .foot{ grid-template-columns:1fr; }
  .section__head{ gap:var(--s-2); }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}
html{ scroll-behavior:smooth; }