/* Sebastopol Geese for Sale — site stylesheet
   Design tokens from design_handoff_sebastopol_farm/README.md
   No shadows anywhere. Separation comes from background bands and hairline rules. */

:root{
  --cream:#FBF7EF;
  --tan:#EDE4D2;
  --ink:#21281F;
  --green:#3E5C43;
  --rust:#A6552E;
  --body:#41483D;
  --secondary:#4C5348;
  --muted:#7A8175;
  --muted-on-tan:#5A6153;
  --footer-text:#D8D2C2;
  --footer-muted:#8E9A85;
  --footer-cream:#F4EEE1;
  --hair:rgba(33,40,31,.14);
  --hair-soft:rgba(33,40,31,.12);
  --hair-tan:rgba(33,40,31,.18);
  --chip-border:rgba(33,40,31,.3);
  --btn-outline:rgba(33,40,31,.35);
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --sans:Karla,system-ui,-apple-system,'Segoe UI',sans-serif;
  --container:1280px;
  --gutter:32px;
  --section-gap:104px;
}

*{box-sizing:border-box;min-width:0}

/* No horizontal wobble on mobile. Three causes, all closed off here:
   a child wider than its column (min-width:0 above), a stray overflow
   (overflow-x hidden below), and a long unbreakable string (overflow-wrap). */
html{-webkit-text-size-adjust:100%;overflow-x:hidden}

body{
  margin:0;
  max-width:100%;
  overflow-x:hidden;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  overflow-wrap:break-word;
  word-break:normal;
}

/* Long URLs, emails and slugs break instead of pushing the page sideways. */
p,li,td,th,h1,h2,h3,h4,figcaption,span,a{overflow-wrap:anywhere}
h1,h2,h3,h4{text-wrap:pretty}

::selection{background:#D9C7A3}

/* Every link in running text is underlined and coloured. Nothing clickable is
   left looking like plain text, so a call to action cannot be scrolled past by
   mistake. Nav, buttons, cards and tiles opt out below and carry their own,
   louder affordance instead. */
a{color:var(--green);text-decoration:none}
a:hover{color:var(--rust)}

p a, li a, .lead a, .prose a, .section-intro a, .answer a, td a, figcaption a{
  color:var(--green);
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:rgba(62,92,67,.45);
}
p a:hover, li a:hover, .lead a:hover, .prose a:hover,
.section-intro a:hover, .answer a:hover, td a:hover{
  color:var(--rust);
  text-decoration-color:currentColor;
  background:rgba(166,85,46,.08);
}

/* things that carry their own affordance */
.nav a, .btn, .card h3 a, .color-tile, .state-list a, .link-underline,
.slider-jump a, .brand, .footer-col a, .site-footer a, .breadcrumb a,
.announce a, .skip{
  text-decoration:none;font-weight:inherit;
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--green);outline-offset:3px;border-radius:2px;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0}

.container{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{max-width:var(--container);margin:0 auto;padding:var(--section-gap) var(--gutter) 0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--cream);padding:12px 18px;border:1px solid var(--ink)}

/* ---------- announcement + header ---------- */

.announce{
  background:var(--ink);color:var(--tan);
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  text-align:center;padding:11px 20px;
}
.announce a{color:var(--tan);border-bottom:1px solid rgba(237,228,210,.45)}
.announce a:hover{color:#fff}

.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(251,247,239,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair-soft);
}
.header-inner{
  max-width:var(--container);margin:0 auto;padding:14px var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
}
.brand{display:flex;align-items:center;gap:14px}
/* The logo is an illustration, so it is contained rather than cropped like
   every other image on the site. The tan disc behind it stands in for the
   artwork's own margin. */
.brand-mark{
  width:56px;height:56px;border-radius:50%;flex:none;
  background:var(--tan);border:1px solid var(--hair);
  object-fit:contain;padding:2px;display:block;
}
.wordmark{font-family:var(--serif);font-size:26px;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;justify-content:flex-end;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
}
.nav a[aria-current="page"]{color:var(--ink);border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---------- hero ---------- */

/* Hero runs full width with no letterboxing and nothing cropped. The trick is
   that the box carries the photo's own aspect ratio, so contain fills it exactly.
   --hero-ratio must match the hero image on that page. Change the photo, change
   the ratio. A wider photo gives a shorter hero. */
.hero{
  position:relative;width:100%;overflow:hidden;background:var(--ink);
  aspect-ratio:var(--hero-ratio,1070/803);
}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:contain;object-position:center}
.hero-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,26,18,.45) 0%,rgba(20,26,18,.18) 40%,rgba(20,26,18,.72) 100%);
}
.hero-content{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;text-align:center;
  padding:0 var(--gutter) 80px;pointer-events:none;
}
.hero h1{
  font-size:clamp(34px,4.4vw,62px);line-height:1.14;color:var(--cream);
  max-width:17ch;text-wrap:pretty;
}
.hero-sub{font-size:17px;line-height:1.7;color:rgba(251,247,239,.86);max-width:62ch;margin:24px 0 0}
.hero-meta{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(251,247,239,.7);margin:40px 0 0}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:34px;pointer-events:auto}

/* ---------- buttons ---------- */

/* Every button is filled and solid. Nothing transparent, nothing washed into the
   background. Hierarchy comes from which fill, not from outline versus solid. */
.btn{
  display:inline-block;text-align:center;
  padding:19px 40px;border-radius:2px;border:2px solid transparent;
  font-family:var(--sans);font-size:14px;letter-spacing:.14em;line-height:1.2;
  text-transform:uppercase;font-weight:700;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn-light{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-light:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn-solid{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-solid:hover{background:#12170f;border-color:#12170f;color:var(--cream)}
.btn-ghost,.btn-outline{background:var(--green);color:#fff;border-color:var(--green)}
.btn-ghost:hover,.btn-outline:hover{background:#31492f;border-color:#31492f;color:#fff}
.btn-block{display:block;width:100%;padding:19px 24px}
.btn-lg{padding:23px 52px;font-size:15px}

.link-underline{
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  border-bottom:2px solid currentColor;padding-bottom:4px;align-self:flex-start;
}

/* ---------- slider ---------- */
/* Every photo is a real <img> in the markup, so all of them are crawlable and
   the gallery works with JavaScript switched off: it is a native scroll area
   with snap points. The arrow buttons are injected by JS purely as an
   enhancement, so there is never a dead button on the page. */
.slider-wrap{position:relative}
.slider{
  display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;padding:0 0 18px;
}
/* Slides are capped by height as well as width, so a tall portrait bird scales
   down to fit the screen instead of running off the bottom. Nothing is cropped:
   the figure shrinks to whatever width the height cap leaves, which is why
   slides are deliberately not all the same width. */
.slider>figure{
  flex:0 0 auto;width:auto;max-width:min(86vw,620px);
  scroll-snap-align:center;margin:0;
}
.slider img{
  width:auto;height:auto;
  max-width:min(86vw,620px);max-height:60vh;
  display:block;border-radius:3px;background:var(--tan);
}
.slider figcaption{
  margin-top:14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--muted-on-tan);
}
.slider::-webkit-scrollbar{height:12px}
.slider::-webkit-scrollbar-track{background:var(--tan);border-radius:99px}
.slider::-webkit-scrollbar-thumb{background:var(--green);border-radius:99px}
.slider:focus-visible{outline:2px solid var(--green);outline-offset:6px}

/* Big, filled, obviously clickable. Not ghost chevrons floating on the photo. */
.slider-btn{
  position:absolute;top:38%;transform:translateY(-50%);z-index:5;
  width:60px;height:60px;border-radius:50%;border:2px solid var(--cream);
  background:var(--ink);color:var(--cream);
  font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.slider-btn:hover{background:var(--green)}
.slider-btn[disabled]{opacity:.3;cursor:default}
.slider-btn.prev{left:-6px}
.slider-btn.next{right:-6px}

/* Jump chips work with no JS at all: they are plain anchors to slide ids. */
.slider-jump{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.slider-jump a{
  border:2px solid var(--chip-border);border-radius:99px;padding:9px 18px;
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--ink);background:var(--cream);
}
.slider-jump a:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.slider>figure{scroll-margin-left:0}
.slider-hint{font-size:14px;color:var(--muted);margin:14px 0 0}

@media (max-width:760px){
  .slider>figure{max-width:88vw}
  .slider img{max-width:88vw;max-height:56vh}
  .slider-btn{width:52px;height:52px;font-size:22px;top:32%}
  .slider-btn.prev{left:-2px}
  .slider-btn.next{right:-2px}
  .slider-jump{gap:8px}
  .slider-jump a{padding:8px 14px;font-size:11.5px}
}

/* ---------- section header pattern ---------- */

.section-head{display:flex;align-items:baseline;gap:20px;margin-bottom:14px}
.section-head h2{font-size:40px}
.section-head::after{content:"";flex:1;height:1px;background:rgba(33,40,31,.16)}
.section-head.on-tan::after{background:var(--hair-tan)}
.section-head.sm h2{font-size:32px}
.section-intro{margin:0 0 44px;font-size:16px;line-height:1.7;color:var(--secondary);max-width:70ch}

/* ---------- cards ---------- */

/* Grids are wide so photos run large, and align to the top rather than
   stretching. Rows come out uneven because the photos are, which is the point:
   a portrait bird and a landscape flock shot should not be forced to the same
   box. */
.grid-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:48px 36px;align-items:start}
.grid-three{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:48px 36px;align-items:start}
.grid-cross{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:48px 36px;align-items:start}

/* Cards read as one clickable object: the frame lifts, the photo brightens and
   the title turns on hover, so it is obvious the whole thing is a route in. */
.card{
  display:flex;flex-direction:column;gap:16px;
  border:2px solid transparent;border-radius:3px;
  padding:0 0 4px;transition:border-color .15s ease,transform .15s ease;
}
.card:hover{border-color:var(--chip-border);transform:translateY(-3px)}
.card:hover h3 a{color:var(--rust)}
.card h3 a{
  color:var(--ink);border-bottom:2px solid transparent;transition:color .15s ease;
}
.card:hover .btn-solid{background:#12170f;border-color:#12170f}
.card:hover .btn-outline{background:#31492f;border-color:#31492f}

/* price row, on the card and on the product page */
.pricing{display:flex;flex-direction:column;gap:4px;margin:2px 0 4px}
.price-row{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.price-row strong{font-weight:700;color:var(--ink);line-height:1.2}
.price-row span{font-size:13.5px;color:var(--muted)}

.price-panel{
  background:var(--tan);border-radius:3px;padding:26px 28px;
  display:flex;flex-direction:column;gap:16px;max-width:560px;
}
.price-panel .panel-label{margin:0}
.price-panel .fine{margin:0}

/* nav order button */
.nav-cta{
  background:var(--ink);color:var(--cream)!important;
  padding:11px 20px;border-radius:2px;border:2px solid var(--ink);
  font-weight:700;letter-spacing:.12em;
}
.nav-cta:hover{background:var(--green);border-color:var(--green);color:#fff!important}
.nav-cta[aria-current="page"]{background:var(--green);border-color:var(--green)}

/* No fixed aspect ratio anywhere. Each photo sets its own height, so nothing is
   cropped and nothing is letterboxed. The r45 / r32 / r11 classes are kept as
   no-ops so existing markup stays valid, but they no longer force a shape. */
.card-media{position:relative;width:100%;overflow:hidden;background:var(--tan);border-radius:2px}
.card-media img{width:100%;height:auto;display:block}
.card h3{font-size:24px}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--rust)}
.card p{margin:0;font-size:15px;line-height:1.7;color:var(--secondary)}
.card-meta{display:flex;align-items:baseline;gap:10px}
.card-meta strong{font-size:19px;font-weight:600}
.card-meta span{font-size:13.5px;color:var(--muted)}

.badge{
  position:absolute;top:12px;left:12px;pointer-events:none;
  background:var(--cream);color:var(--ink);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:6px 10px;border-radius:2px;
}
.badge.muted{background:var(--tan);color:var(--muted-on-tan)}

/* ---------- colour strip ---------- */

.grid-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:48px 32px;align-items:start}
.color-tile{display:flex;flex-direction:column;gap:14px;color:var(--ink)}
.color-tile:hover{color:var(--rust)}
.color-tile h3{font-size:24px}
.color-tile p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}
.tile-empty{
  min-height:300px;border-radius:2px;background:var(--tan);
  border:1px solid var(--hair);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;
}
.tile-empty span{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--muted-on-tan);line-height:1.5;
}

/* ---------- tan band ---------- */

.band{margin-top:var(--section-gap);background:var(--tan);padding:96px var(--gutter)}
.band-inner{max-width:var(--container);margin:0 auto}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:64px;align-items:center}
.two-col h3{font-size:29px;line-height:1.25}
.two-col p{margin:0;font-size:16.5px;line-height:1.75;color:var(--body)}
.stack{display:flex;flex-direction:column;gap:22px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.chip{
  border:1px solid var(--chip-border);border-radius:99px;padding:8px 14px;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- feature columns ---------- */

.grid-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:40px}
.feature{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.feature-mark{
  width:60px;height:60px;border-radius:50%;flex:none;
  background:var(--tan);border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:24px;color:var(--muted-on-tan);
}
.feature h3{font-family:var(--sans);font-size:19px;font-weight:600;line-height:1.45}
.feature p{margin:0;font-size:15px;line-height:1.7;color:var(--secondary)}

/* ---------- breadcrumb ---------- */

.breadcrumb{
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 32px;
}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--rust)}

/* ---------- product detail ---------- */

.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:56px;align-items:start}
.gallery{display:flex;flex-direction:column;gap:12px}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.buy{display:flex;flex-direction:column;gap:22px}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--green);font-weight:600;margin:0}
.buy h1{font-size:clamp(34px,3.4vw,48px);line-height:1.12}
.lead{margin:0;font-size:16.5px;line-height:1.75;color:var(--body)}
.panel{background:var(--tan);border-radius:3px;padding:22px;display:flex;flex-direction:column;gap:14px}
.panel-label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--muted-on-tan);margin:0}
.panel-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.panel select{
  min-width:150px;padding:14px;border:1px solid var(--chip-border);
  background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:15px;border-radius:2px;
}
.fine{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted-on-tan)}
.details{border-top:1px solid var(--hair);padding-top:24px}
.details h2{font-size:22px;margin-bottom:18px}
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:14px 28px}
.fact{font-size:15px;line-height:1.6;color:var(--body);margin:0}
.fact strong{display:block;font-weight:700;color:var(--ink)}

/* ---------- prose (guides, colour pages) ---------- */

.prose{max-width:72ch}
.prose h2{font-size:32px;margin:56px 0 16px}
.prose h3{font-size:24px;margin:40px 0 12px}
.prose p{margin:0 0 18px;font-size:16.5px;line-height:1.75;color:var(--body)}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;font-size:16.5px;line-height:1.75;color:var(--body)}
.prose li{margin-bottom:8px}
.prose a{border-bottom:1px solid rgba(62,92,67,.4)}
.prose a:hover{border-bottom-color:currentColor}

.answer{
  background:var(--tan);border-radius:3px;padding:26px 28px;margin:0 0 40px;max-width:72ch;
}
.answer p{margin:0;font-size:17px;line-height:1.75;color:var(--body)}

.color-section{
  display:grid;grid-template-columns:minmax(min(260px,100%),1fr) minmax(min(300px,100%),1.2fr);
  gap:40px;align-items:center;padding:48px 0;border-bottom:1px solid var(--hair);
}
.color-section:last-of-type{border-bottom:0}
.color-section h3{font-size:26px;margin:0 0 12px}
.color-section p{margin:0 0 14px;font-size:16px;line-height:1.75;color:var(--body)}

.data-table{width:100%;border-collapse:collapse;font-size:15.5px;margin:0 0 24px}
.data-table th,.data-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--hair)}
.data-table th{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--muted-on-tan);
}
.data-table td{color:var(--body)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- newsletter ---------- */

.newsletter-wrap{margin-top:var(--section-gap);padding:0 var(--gutter)}
.newsletter{
  max-width:var(--container);margin:0 auto;background:var(--green);color:var(--footer-cream);
  border-radius:3px;padding:80px 40px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.newsletter h2{font-size:38px;color:var(--footer-cream)}
.newsletter p{margin:0;font-size:16.5px;line-height:1.7;max-width:58ch;color:rgba(244,238,225,.86)}
.newsletter form{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;width:100%;max-width:480px}
.newsletter input{
  flex:1;min-width:200px;background:transparent;border:1px solid rgba(244,238,225,.45);
  color:var(--footer-cream);padding:14px 16px;font-family:var(--sans);font-size:15px;border-radius:2px;
}
.newsletter input::placeholder{color:rgba(244,238,225,.6)}
.newsletter button{
  background:var(--footer-cream);color:var(--ink);border:none;padding:14px 26px;
  font-family:var(--sans);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;border-radius:2px;cursor:pointer;
}
.newsletter button:hover{background:#fff}

/* ---------- footer ---------- */

.site-footer{
  margin-top:var(--section-gap);background:var(--ink);color:var(--footer-text);
  padding:88px var(--gutter) 32px;
}
.footer-grid{
  max-width:var(--container);margin:0 auto;display:grid;
  grid-template-columns:minmax(min(260px,100%),1.4fr) repeat(auto-fit,minmax(min(150px,100%),1fr));gap:48px 40px;
}
.footer-brand{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.footer-mark{
  width:64px;height:64px;border-radius:50%;flex:none;
  background:var(--cream);border:1px solid rgba(216,210,194,.25);
  object-fit:contain;padding:2px;display:block;
}
.footer-brand h2{font-size:27px;color:var(--cream)}
.footer-brand p{margin:0;font-size:15px;line-height:1.75;max-width:44ch}
.footer-col{display:flex;flex-direction:column;gap:12px}
.footer-col h2{
  font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--footer-muted);font-weight:600;margin-bottom:6px;
}
.footer-col a,.footer-col p{color:var(--footer-text);font-size:14.5px;margin:0;line-height:1.7}
.footer-col a:hover{color:#fff}
.site-footer a{color:var(--footer-text)}
.site-footer a.email{border-bottom:1px solid rgba(216,210,194,.4)}
.footer-bottom{
  max-width:var(--container);margin:64px auto 0;padding-top:24px;
  border-top:1px solid rgba(216,210,194,.18);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-size:13px;color:var(--footer-muted);
}
.footer-bottom a{color:var(--footer-muted)}

/* ---------- buy box and cart ---------- */

.buy-box{
  background:var(--tan);border-radius:3px;padding:26px 28px;
  margin:28px 0 0;max-width:760px;
}
.buy-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.buy-field{display:flex;flex-direction:column;gap:6px;flex:1 1 190px;min-width:0}
.buy-field.qty{flex:0 1 120px}
.buy-field label{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--muted-on-tan);
}
.buy-field select,.buy-field input{
  font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--cream);
  border:2px solid var(--chip-border);border-radius:2px;padding:13px 14px;width:100%;
}
.buy-field select:focus,.buy-field input:focus{border-color:var(--green);outline:none}
.buy-row .btn{flex:0 0 auto;padding:15px 30px}

.cart-note{
  margin:16px 0 0;padding:11px 15px;border-radius:2px;font-size:14.5px;font-weight:600;
}
.cart-note.good{background:#dbe7dc;color:#26431f}
.cart-note.warn{background:#f5ecd0;color:#6b551a}

.cart-badge{
  display:inline-block;min-width:21px;padding:1px 7px;margin-left:7px;
  border-radius:99px;background:var(--rust);color:#fff;
  font-size:11.5px;letter-spacing:0;font-weight:700;
}

.cart-lines{border-top:2px solid var(--hair)}
.cart-line{
  display:grid;
  grid-template-columns:1fr auto auto auto;
  gap:14px 18px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--hair);
}
.cart-line-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.cart-line-main strong{font-size:16.5px;color:var(--ink)}
.cart-line-total{font-size:18px;font-weight:700;color:var(--ink);min-width:88px;text-align:right}
.cart-remove{
  background:transparent;border:0;cursor:pointer;padding:6px 2px;
  font-family:var(--sans);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:var(--muted);
  border-bottom:2px solid transparent;
}
.cart-remove:hover{color:var(--rust);border-bottom-color:currentColor}
.cart-total{margin-top:28px;max-width:460px;margin-left:auto}

@media (max-width:640px){
  .cart-line{grid-template-columns:1fr auto;grid-template-areas:
    "main main" "step total" "rm rm";}
  .cart-line-main{grid-area:main}
  .cart-line .stepper{grid-area:step}
  .cart-line-total{grid-area:total}
  .cart-remove{grid-area:rm;justify-self:start}
  .cart-total{margin-left:0;max-width:none}
  .buy-row .btn{width:100%}
}

/* ---------- buy box and cart ---------- */

.buy-box{
  background:var(--tan);border-radius:3px;padding:26px 28px;
  margin:28px 0 0;max-width:760px;
}
.buy-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.buy-field{display:flex;flex-direction:column;gap:6px;flex:1 1 190px;min-width:0}
.buy-field.qty{flex:0 1 120px}
.buy-field label{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--muted-on-tan);
}
.buy-field select,.buy-field input{
  font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--cream);
  border:2px solid var(--chip-border);border-radius:2px;padding:13px 14px;width:100%;
}
.buy-field select:focus,.buy-field input:focus{border-color:var(--green);outline:none}
.buy-row .btn{flex:0 0 auto;padding:15px 30px}

.cart-note{
  margin:16px 0 0;padding:11px 15px;border-radius:2px;font-size:14.5px;font-weight:600;
}
.cart-note.good{background:#dbe7dc;color:#26431f}
.cart-note.warn{background:#f5ecd0;color:#6b551a}

.cart-badge{
  display:inline-block;min-width:21px;padding:1px 7px;margin-left:7px;
  border-radius:99px;background:var(--rust);color:#fff;
  font-size:11.5px;letter-spacing:0;font-weight:700;
}

.cart-lines{border-top:2px solid var(--hair)}
.cart-line{
  display:grid;grid-template-columns:1fr auto auto auto;
  gap:14px 18px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--hair);
}
.cart-line-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.cart-line-main strong{font-size:16.5px;color:var(--ink)}
.cart-line-total{font-size:18px;font-weight:700;color:var(--ink);min-width:88px;text-align:right}
.cart-remove{
  background:transparent;border:0;cursor:pointer;padding:6px 2px;
  font-family:var(--sans);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:var(--muted);
  border-bottom:2px solid transparent;
}
.cart-remove:hover{color:var(--rust);border-bottom-color:currentColor}
.cart-total{margin-top:28px;max-width:460px;margin-left:auto}

@media (max-width:640px){
  .cart-line{
    grid-template-columns:1fr auto;
    grid-template-areas:"main main" "step total" "rm rm";
  }
  .cart-line-main{grid-area:main}
  .cart-line .stepper{grid-area:step}
  .cart-line-total{grid-area:total;text-align:left}
  .cart-remove{grid-area:rm;justify-self:start}
  .cart-total{margin-left:0;max-width:none}
  .buy-row .btn{width:100%}
}

/* ---------- payment details on the confirmation ---------- */

.pay-box{
  background:var(--tan);border-radius:3px;padding:26px 28px;
  margin:22px 0 0;max-width:620px;
}
/* A phone number or email someone has to copy into a banking app by hand.
   Set in a plain monospaced face, not the display serif: a serif 1 and l look
   alike, and digits that are not fixed-width are harder to read back in
   groups. Tabular figures and a little letter-spacing make a mistyped payment
   less likely, which matters more here than the page's typography. */
.pay-handle{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:clamp(21px,3.4vw,27px);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;font-weight:600;
  color:var(--ink);margin:6px 0 14px;word-break:break-all;user-select:all;
}
.pay-box .panel-label{margin:0}
.pay-box .fine{margin:0 0 8px}
/* The text-us hand-off. Green rather than tan so it reads as the next action
   on the page, not another block of confirmation text. */
#sms-box{
  background:var(--green);color:var(--footer-cream);
  border-radius:3px;padding:24px 26px;margin:22px 0 0;max-width:620px;
}
#sms-box p{color:var(--footer-cream);margin:0 0 14px}
#sms-box .panel-label{color:var(--footer-cream);opacity:.75;margin:0 0 8px}
#sms-box .btn-solid{background:var(--footer-cream);color:var(--ink);border-color:var(--footer-cream)}
#sms-box .btn-solid:hover{background:#fff;border-color:#fff}
#sms-box .fine{color:var(--footer-cream);opacity:.8;margin:12px 0 0}
#sms-box .fine:empty{display:none}

/* Deliberately not .fine: this asks the buyer to do something, and the
   instruction that speeds up their own order should not be the smallest,
   faintest text in the box. */
.pay-receipt{
  margin:14px 0 0;padding-top:14px;font-size:15px;line-height:1.6;
  color:var(--body);border-top:1px solid rgba(33,40,31,.18);
}
.pay-receipt a{color:var(--green);font-weight:600}

/* The pair price, shown live under the two colour selects. */
.pair-price{
  margin:14px 0 0;font-family:var(--serif);font-size:20px;color:var(--ink);
}
.pair-price:empty{display:none}

/* ---------- order flow ---------- */

.progress{
  list-style:none;margin:0 0 44px;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 10px;counter-reset:step;
}
.progress li{
  display:flex;align-items:center;gap:9px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--muted);
  border:2px solid var(--hair);border-radius:99px;padding:8px 15px;
}
.progress li::before{
  counter-increment:step;content:counter(step);
  width:21px;height:21px;border-radius:50%;flex:none;
  background:var(--tan);color:var(--muted-on-tan);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:0;
}
.progress li.now{color:var(--ink);border-color:var(--ink)}
.progress li.now::before{background:var(--ink);color:var(--cream)}
.progress li.done{color:var(--green);border-color:var(--green)}
.progress li.done::before{background:var(--green);color:#fff;content:"\2713"}

.step{max-width:760px}
.step[hidden]{display:none}
.step h2{font-size:30px;margin:0 0 10px}
.step h2:focus{outline:none}
.step > p{margin:0 0 28px;font-size:16.5px;line-height:1.7;color:var(--body)}

.pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:18px}
.product-pick{
  display:flex;flex-direction:column;gap:10px;text-align:left;cursor:pointer;
  background:var(--cream);border:2px solid var(--chip-border);border-radius:3px;
  padding:22px;font-family:var(--sans);color:var(--ink);
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.product-pick:hover{border-color:var(--ink);transform:translateY(-2px)}
.product-pick.chosen{border-color:var(--green);background:var(--tan)}
.product-pick strong{font-family:var(--serif);font-weight:400;font-size:23px}
.product-pick span{font-size:14px;color:var(--secondary);line-height:1.6}
.product-pick em{font-style:normal;font-size:15px;font-weight:700;color:var(--ink)}

.field{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.field label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted-on-tan)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--cream);border:2px solid var(--chip-border);
  border-radius:2px;padding:14px 15px;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--green);outline:none;
}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#8c3a1e}
.field-error{font-size:13.5px;color:#8c3a1e;font-weight:600}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:0 20px}
.hint{font-size:13.5px;color:var(--muted-on-tan);margin:-14px 0 22px}

.color-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--hair);
}
.color-name{font-size:17px;font-weight:600}
.stepper{display:flex;align-items:center;gap:6px}
.step-btn{
  width:46px;height:46px;border-radius:2px;cursor:pointer;
  background:var(--ink);color:var(--cream);border:2px solid var(--ink);
  font-size:22px;line-height:1;font-family:var(--sans);
}
.step-btn:hover{background:var(--green);border-color:var(--green)}
.stepper output{
  min-width:52px;text-align:center;font-size:19px;font-weight:700;
  padding:10px 0;background:var(--tan);border-radius:2px;
}
.color-name{display:flex;flex-direction:column;gap:2px}
.color-price{font-size:13.5px;font-weight:400;color:var(--muted)}
.alloc{
  margin:22px 0 0;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--muted-on-tan);
}
.alloc.ok{color:var(--green)}
.running-total{
  margin:8px 0 0;font-family:var(--serif);font-size:26px;color:var(--ink);
}

/* delivery method */
.ship-set{border:0;padding:0;margin:8px 0 28px}
.ship-set legend{
  padding:0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--muted-on-tan);margin-bottom:6px;
}
.ship-opt{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  border:2px solid var(--chip-border);border-radius:3px;
  padding:16px 18px;margin-bottom:10px;background:var(--cream);
  transition:border-color .15s ease,background .15s ease;
}
.ship-opt:hover{border-color:var(--ink)}
.ship-opt:has(input:checked){border-color:var(--green);background:var(--tan)}
.ship-opt input{width:22px;height:22px;flex:none;accent-color:var(--green)}
.ship-body{display:flex;flex-direction:column;gap:2px;flex:1}
.ship-body strong{font-size:16.5px}
.ship-body span{font-size:13.5px;color:var(--muted);line-height:1.5}
.ship-price{font-size:19px;font-weight:700;flex:none}

.review-head{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--muted-on-tan);padding:14px 0 6px;
}
.review-row.grand{
  border-bottom:0;border-top:2px solid var(--ink);margin-top:4px;padding-top:16px;
}
.review-row.grand span,.review-row.grand strong{
  font-size:22px;font-family:var(--serif);font-weight:400;color:var(--ink);
}

.review{border-top:2px solid var(--hair);margin:0 0 28px}
.review-row{
  display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;
  padding:13px 0;border-bottom:1px solid var(--hair);font-size:15.5px;
}
.review-row span{color:var(--muted)}
.review-row strong{font-weight:700;text-align:right}

#confirmation{max-width:720px}
#confirmation:focus{outline:none}
/* The confirmation banner is green with cream text. Scoping the text colour to
   the banner itself, rather than to every .answer inside #confirmation, matters:
   the payment-pending box below is also an .answer but sits on tan, and the
   blanket rule left cream text on a tan background, which simply disappeared. */
#confirmation > .answer{background:var(--green);color:var(--footer-cream)}
#confirmation > .answer p{color:var(--footer-cream)}
#confirmation > .answer strong{color:#fff}

/* Anything else in the confirmation keeps normal dark-on-light text. */
#confirmation .answer.on-tan{background:var(--tan)}
#confirmation .answer.on-tan p{color:var(--body)}
#confirmation .answer.on-tan strong{color:var(--ink)}

/* ---------- state directory ---------- */

.state-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:2px 32px;
}
.state-list li{border-bottom:1px solid var(--hair)}
.state-list a{
  display:block;padding:14px 2px;font-size:15.5px;color:var(--ink);
}
.state-list a:hover{color:var(--rust)}

/* ---------- live chat ---------- */

.chat-root{position:fixed;right:20px;bottom:20px;z-index:90}
.chat-bubble{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-width:74px;height:60px;padding:0 22px;border-radius:99px;cursor:pointer;
  background:var(--ink);color:var(--cream);border:2px solid var(--cream);
  font-family:var(--sans);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;
}
.chat-bubble:hover{background:var(--green);border-color:var(--green)}
.chat-badge{
  position:absolute;top:-5px;right:-5px;min-width:24px;height:24px;
  border-radius:99px;background:var(--rust);color:#fff;
  font-size:12px;letter-spacing:0;display:flex;align-items:center;
  justify-content:center;padding:0 6px;
}
.chat-panel{
  position:absolute;right:0;bottom:74px;width:min(92vw,380px);
  background:var(--cream);border:2px solid var(--ink);border-radius:4px;
  display:flex;flex-direction:column;max-height:min(72vh,560px);overflow:hidden;
}
.chat-panel[hidden]{display:none}
.chat-head{
  background:var(--ink);color:var(--cream);padding:16px 18px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
}
.chat-head strong{display:block;font-family:var(--serif);font-weight:400;font-size:19px}
.chat-head span{font-size:12.5px;color:var(--footer-muted)}
.chat-close{
  background:transparent;border:2px solid rgba(251,247,239,.5);color:var(--cream);
  padding:7px 12px;border-radius:2px;cursor:pointer;flex:none;
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;
}
.chat-close:hover{background:rgba(251,247,239,.15)}
.chat-log{
  flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;
}
.chat-msg p{
  margin:0;padding:12px 15px;border-radius:3px;font-size:15px;line-height:1.6;
  max-width:88%;
}
.chat-msg.farm p{background:var(--tan);color:var(--body)}
.chat-msg.you{align-items:flex-end;display:flex;flex-direction:column}
.chat-msg.you p{background:var(--green);color:var(--footer-cream)}
.chat-form{border-top:1px solid var(--hair);padding:14px 16px;background:var(--cream)}
.chat-identity{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.chat-identity label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--muted-on-tan);
}
.chat-identity input,.chat-form textarea{
  font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;
  border:2px solid var(--chip-border);border-radius:2px;padding:10px 12px;width:100%;
}
.chat-identity input:focus,.chat-form textarea:focus{border-color:var(--green);outline:none}
.chat-send{display:flex;gap:8px;align-items:flex-end}
.chat-send textarea{resize:none;flex:1}
.chat-submit{
  background:var(--ink);color:var(--cream);border:2px solid var(--ink);
  border-radius:2px;padding:12px 18px;cursor:pointer;flex:none;
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;
}
.chat-submit:hover{background:var(--green);border-color:var(--green)}
.chat-sr{position:absolute;left:-9999px}

@media (max-width:760px){
  /* Smaller on a phone, because a floating widget sits over whatever happens
     to be under it and a full-width call to action is often exactly that. The
     body gains matching bottom padding so the end of the page can always be
     scrolled clear of it. */
  .chat-root{right:12px;bottom:12px}
  .chat-bubble{height:48px;min-width:48px;padding:0 15px;font-size:11px;letter-spacing:.1em}
  .chat-panel{bottom:60px;max-height:74vh}
  .chat-badge{min-width:20px;height:20px;font-size:11px}
  body{padding-bottom:64px}
}

/* ---------- lightbox ---------- */
/* Only styled once JS has tagged the images, so with JS off nothing suggests a
   zoom that will not happen. */
img.zoomable{cursor:zoom-in}
img.zoomable:focus-visible{outline:3px solid var(--green);outline-offset:3px}

.lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(18,23,15,.94);
  display:flex;align-items:center;justify-content:center;padding:28px;
}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:100%;max-height:100%;display:flex;
  flex-direction:column;align-items:center;gap:16px}
.lightbox img{
  max-width:min(96vw,1400px);max-height:82vh;width:auto;height:auto;
  object-fit:contain;border-radius:3px;display:block;
}
.lightbox figcaption{
  color:var(--footer-text);font-size:14.5px;text-align:center;max-width:70ch;
}
.lightbox-close{
  position:absolute;top:20px;right:20px;
  background:var(--cream);color:var(--ink);border:2px solid var(--cream);
  padding:13px 24px;border-radius:2px;cursor:pointer;
  font-family:var(--sans);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;
}
.lightbox-close:hover{background:#fff}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:64px;height:64px;border-radius:50%;
  background:var(--cream);color:var(--ink);border:2px solid var(--cream);
  font-size:30px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.lightbox-nav:hover{background:var(--green);border-color:var(--green);color:#fff}
.lightbox-nav.prev{left:20px}
.lightbox-nav.next{right:20px}

@media (max-width:760px){
  .lightbox{padding:14px}
  .lightbox img{max-height:70vh}
  .lightbox-nav{width:52px;height:52px;font-size:26px}
  .lightbox-nav.prev{left:8px}
  .lightbox-nav.next{right:8px}
  .lightbox-close{top:12px;right:12px;padding:11px 18px}
}

/* ---------- responsive ---------- */

@media (max-width:760px){
  :root{--gutter:18px;--section-gap:64px}

  /* Hero stacks rather than overlaying. At phone width the photo is only about
     290px tall, and a headline, a paragraph and two buttons will not fit over
     that without spilling. Photo on top at its own ratio, words underneath. */
  .hero{aspect-ratio:auto;background:transparent;overflow:visible}
  .hero-media{position:static}
  .hero-media img{height:auto;object-fit:contain}
  .hero-overlay{display:none}
  .hero-content{
    position:static;padding:30px var(--gutter) 0;
    text-align:center;pointer-events:auto;
  }
  .hero h1{color:var(--ink);max-width:none}
  .hero-sub{color:var(--body);font-size:16px}
  .hero-meta{color:var(--muted);margin-top:26px}
  .btn-row{margin-top:26px}
  .btn-light{background:var(--ink);color:var(--cream);border-color:var(--ink)}
  .btn-light:hover{background:#12170f;border-color:#12170f;color:var(--cream)}

  .btn{padding:17px 26px;font-size:13px;width:100%}
  .btn-lg{padding:19px 26px;font-size:13.5px}
  .btn-row{flex-direction:column;align-items:stretch;width:100%}

  .section-head h2{font-size:28px}
  .section-head{gap:14px}
  .band{padding:56px var(--gutter)}
  .two-col,.product-grid{gap:32px}
  .newsletter{padding:48px 20px}
  .newsletter h2{font-size:28px}
  .newsletter form{flex-direction:column}
  .newsletter input,.newsletter button{width:100%}
  .site-footer{padding:56px var(--gutter) 26px}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .color-section{grid-template-columns:1fr;gap:22px;padding:32px 0}
  .prose h2{font-size:25px}
  .prose p,.prose li{font-size:16px}
  .grid-products,.grid-three,.grid-cross,.grid-colors{gap:40px 20px}
  .fact-grid{grid-template-columns:1fr}
  /* The farm name is long. Held on one line it is wider than a small phone
     before the logo is even counted, which is the other half of the wobble.
     Let it wrap. */
  .wordmark{font-size:19px;white-space:normal;line-height:1.15}
  .brand{gap:10px;flex:1 1 auto;min-width:0}
  .brand-mark{width:42px;height:42px}
  .nav{font-size:13px;gap:10px 14px}
  .header-inner{padding:12px var(--gutter)}
  .announce{font-size:11.5px;letter-spacing:.12em;padding:10px 14px}
  [id]{scroll-margin-top:80px}
}

/* Very narrow phones. Stops the nav and headline from forcing a sideways drag. */
@media (max-width:380px){
  :root{--gutter:14px}
  .nav{font-size:12px;gap:8px 12px}
  .hero h1{font-size:30px}
  .wordmark{font-size:17px}
  .brand-mark{width:36px;height:36px}
  .btn,.btn-lg{padding:16px 14px;font-size:12.5px;letter-spacing:.1em}
  .nav-cta{padding:10px 14px}
  .step-btn{width:42px;height:42px}
  .stepper output{min-width:44px}
  .color-row{gap:10px}
}

/* Last-resort guard. If anything ever does escape the viewport, this stops the
   page itself from sliding under the user's thumb. It is a safety net, not the
   fix: the fixes are the clamped grid minimums and the wrapping wordmark above. */
@media (max-width:900px){
  html,body{max-width:100vw;overflow-x:clip}
}

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

html{scroll-behavior:smooth}
[id]{scroll-margin-top:110px}