/* ==========================================================================
   DINKOMART - Page layouts
   ========================================================================== */

/* ==================================================================== hero
   REMOVED. This held the old full-bleed hero: a photograph with the copy laid
   over it and the controls absolutely positioned across the bottom of the
   frame. That hero no longer exists — it is now the paired carousel in
   req/css/hero.css.

   Leaving it here was not harmless. `.hero-ctl { position: absolute }` from
   this block still applied to the NEW controls, because hero.css never set
   `position` and had nothing to override. The result: the controls left the
   copy column, stretched to the full 1270px page width and rendered below the
   stat strip, which is why the dots sat at one page edge and the arrows at the
   other with 1024px of nothing between them.

   Dead CSS for a component that has been replaced is not dead. Delete it.
   ========================================================================== */

/* ==================================================================== home sections */
.usp-band { padding-block: var(--s-8); background: var(--bg-2); border-bottom: 1px solid var(--border); }

/* Four cards, one of which spans two columns, in a four-column grid is FIVE
   column-units — so the fourth card wrapped onto a second row and sat alone
   beside three empty cells. That is what was on screen.

   A real bento instead: the feature takes the left half over two rows, two
   cards stack top-right, and the fourth runs full width underneath them. Four
   cards, no holes, and the big one still reads as the feature. */
.cat-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 660px)  { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) {
  .cat-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 246px;
  }
  .cat-grid > :nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .cat-grid > :nth-child(2) { grid-column: 3 / 4; grid-row: 1; }
  .cat-grid > :nth-child(3) { grid-column: 4 / 5; grid-row: 1; }
  .cat-grid > :nth-child(4) { grid-column: 3 / 5; grid-row: 2; }
  /* FIVE CARDS since coffee joined on 2026-10-05: the feature keeps the left
     half and the other four tile the right half two by two. The fourth only
     runs full width when it is the last card. */
  .cat-grid > :nth-child(4):not(:last-child) { grid-column: 3 / 4; }
  .cat-grid > :nth-child(5) { grid-column: 4 / 5; grid-row: 2; }
}

.split { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 88px); } }
.split-media { position: relative; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-2); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 940px) { .split.is-reverse .split-media { order: -1; } }

.split-badge {
  position: absolute;
  left: var(--s-5); bottom: var(--s-5);
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  font-size: var(--t-sm);
  font-weight: 700;
}
.split-badge .ico { color: var(--brand); }

.box-facts {
  position: relative;
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg-subtle);
}
.box-facts span { display: inline-flex; align-items: center; gap: 8px; }
.box-facts .ico { color: var(--accent-ink); transition: color var(--dur-1) var(--ease-out); }
.box-facts span:hover .ico { color: var(--accent); }

/* the rule under the buttons draws itself on arrival, the same gesture
   `.sec-rule` makes in craft.css — it closes the column off rather than just
   ending it. Overlaid rather than transitioning the border, so the 1px
   --border underneath stays put if the draw never runs. */
.box-facts::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
html.m-ready .box-facts::before { transition: transform var(--dur-4) var(--ease-soil) 260ms; }
html.m-ready [data-rise].is-in .box-facts::before { transform: scaleX(1); }

/* ---------------------------------------------------------------- crate list

   A LIST OF PROMISES, SO IT READS AS ONE BEING KEPT.

   Three inert rows before: a bare 16px tick and a dashed rule, with nothing
   tying them to the icon language the rest of the page now uses. The tick gets
   a tile like the usp and seller cards, and the row borrows the credential
   wall's gesture — the dashed rule inks in solid on hover. Same meaning in
   both places: the line is confirmed.

   On arrival the three tick down in sequence rather than appearing together,
   so the list reads as being checked off. */
.crate-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.crate-list li {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--border);
  font-size: var(--t-sm); font-weight: 500;
}
.crate-list li:last-child { border-bottom: 0; }

/* the tick, tiled. Painted on the <svg>: there is no wrapper in the markup. */
.crate-list .ico {
  width: 26px; height: 26px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 8px;
  color: var(--sprout);
  background: color-mix(in srgb, var(--sprout) 14%, transparent);
  transition: background-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              border-radius var(--dur-2) var(--ease-spring),
              transform var(--dur-2) var(--ease-spring);
}
.crate-list li:hover .ico {
  background: var(--sprout);
  color: var(--surface);
  border-radius: 11px;
  transform: scale(1.08);
}

/* the dashed rule, inked */
.crate-list li::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--sprout);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-soil);
}
.crate-list li:last-child::after { display: none; }
.crate-list li:hover::after { transform: scaleX(1); }

/* THE TICK-DOWN. Guarded on html.m-ready exactly like `.sec-rule`: motion.js
   sets that class, so if the script never runs the class never appears and all
   three lines are simply already there. The row hover above deliberately moves
   no `transform` on the <li> itself — this rule lands at (0,4,1) and would
   out-rank it, and a hover that silently does nothing is worse than no hover. */
html.m-ready [data-rise] .crate-list li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-soil);
}
html.m-ready [data-rise].is-in .crate-list li { opacity: 1; transform: none; }
html.m-ready [data-rise].is-in .crate-list li:nth-child(1) { transition-delay: 120ms; }
html.m-ready [data-rise].is-in .crate-list li:nth-child(2) { transition-delay: 230ms; }
html.m-ready [data-rise].is-in .crate-list li:nth-child(3) { transition-delay: 340ms; }

/* The group card. Band-only, so it is styled entirely from --band-* here and
   was taken out of the `.on-band` restatement in atmosphere.css — that rule is
   (0,2,0) in a file that loads after this one, so it out-ranked `.lineage:hover`
   and the hover fill would never have landed. Same trap as `.seller-perk`. */
/* IT WAS FULL-BLEED WITH HALF OF IT EMPTY, AND THAT WAS THE ACTUAL PROBLEM.

   `.lineage` sits in a `.wrap`, so the panel ran the full ~1400px measure
   while `.lineage-text` is capped at 60ch — about 600px. The remaining 700px
   was dead panel. No amount of border or hover fixes a box that is twice the
   width of its contents; it just makes a well-lit empty box. `fit-content`
   with a ceiling lets it hug the text instead, so the card is the size of what
   is in it and the band keeps its air. */
.lineage {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5);
  width: fit-content;
  max-width: min(100%, 860px);
  margin-top: var(--s-8); padding: var(--s-5) var(--s-6);
  border: 1px solid var(--band-border); border-radius: var(--r-panel);
  background-color: rgba(255, 255, 255, .045);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, transparent 40%);
  overflow: hidden;
  transition: border-color var(--dur-1) var(--ease-out),
              background-color var(--dur-1) var(--ease-out);
}
/* the sweep, accent into sprout — the same gesture the seller perks make, and
   the same meaning: this is the other half of the same business */
.lineage::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--band-accent), var(--band-sprout));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-soil);
}
.lineage:hover {
  border-color: var(--band-accent);
  background-color: rgba(255, 255, 255, .07);
}
.lineage:hover::after { transform: scaleX(1); }
/* the artwork has white baked into it, so the tile has to be white — but a bare
   white square on a near-black band reads as pasted on. A ring in the band's
   own border colour seats it. */
.lineage img {
  width: 62px; height: 62px; border-radius: var(--r-ctl); object-fit: cover;
  background: #fff; flex: none;
  border: 1px solid var(--band-border);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .03);
  transition: transform var(--dur-2) var(--ease-spring);
}
.lineage:hover img { transform: scale(1.05) rotate(-1.5deg); }
.lineage-kicker { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--band-fg-muted); margin: 0 0 4px; }
.lineage-text { margin: 0; color: var(--band-fg-muted); max-width: 60ch; font-size: var(--t-sm); }
.lineage-text b { color: var(--band-fg); font-weight: 700; }

/* ==================================================================== inner page head */
.page-head { padding-block: var(--s-9) var(--s-8); border-bottom: 1px solid var(--border); background: var(--bg-2); }
.page-head h1 { font-size: var(--t-3xl); margin-bottom: var(--s-3); max-width: 20ch; }
.page-head .lede { max-width: 62ch; }
.page-head-grid { display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 900px) { .page-head-grid { grid-template-columns: minmax(0, 1fr) auto; } }

.page-hero {
  position: relative;
  min-height: 340px;
  display: grid;
  align-content: center;
  padding-block: var(--s-10);
  overflow: hidden;
  isolation: isolate;
  background: var(--raw-night);
  color: #fff;
}
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(6, 18, 11, .90), rgba(6, 18, 11, .62) 55%, rgba(6, 18, 11, .35));
}
.page-hero h1 { color: #fff; font-size: var(--t-3xl); max-width: 18ch; margin-bottom: var(--s-4); }
.page-hero .lede { color: rgba(255, 255, 255, .86); max-width: 56ch; }
.page-hero .breadcrumb { color: rgba(255, 255, 255, .7); }
.page-hero .breadcrumb a:hover { color: var(--raw-sprout); }
.page-hero .eyebrow { color: rgba(255, 255, 255, .75); }
.page-hero .eyebrow::before { background: var(--raw-sprout); }

/* ==================================================================== shop */
.shop-layout { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1080px) { .shop-layout { grid-template-columns: 250px minmax(0, 1fr); gap: var(--s-9); } }

.filters { display: grid; gap: var(--s-7); }
@media (min-width: 1080px) { .filters { position: sticky; top: 100px; } }

.filter-group h3 {
  font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--fg-subtle);
  margin-bottom: var(--s-3);
}
.filter-list { display: grid; gap: 2px; }
.filter-opt {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 46px; padding: 0 var(--s-4);
  border: 1px solid transparent; border-radius: var(--r-ctl);
  background: transparent;
  font-size: var(--t-sm); font-weight: 600; color: var(--fg-muted);
  text-align: left; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.filter-opt .ico { color: var(--fg-subtle); }
.filter-opt:hover { background: var(--surface-2); color: var(--fg); }
.filter-opt[aria-pressed='true'] { background: var(--brand-soft); border-color: transparent; color: var(--brand); }
.filter-opt[aria-pressed='true'] .ico { color: var(--brand); }
.filter-opt .n { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }

.shop-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding-bottom: var(--s-5); margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--border);
}
.shop-count { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-subtle); }
.shop-bar .select { width: auto; min-width: 190px; min-height: 46px; margin-left: auto; background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px; }
.shop-search { position: relative; flex: 1 1 240px; }
.shop-search .input { padding-left: 44px; min-height: 46px; border-radius: var(--r-pill); }
.shop-search .ico { position: absolute; left: 15px; top: 23px; transform: translateY(-50%); color: var(--fg-subtle); pointer-events: none; }

.filter-toggle { display: inline-flex; }
@media (min-width: 1080px) { .filter-toggle { display: none; } }
@media (max-width: 1079px) { .filters-desktop { display: none; } }

.prod-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* ==================================================================== product detail */
.pdp { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 980px) { .pdp { grid-template-columns: 1.02fr .98fr; gap: clamp(40px, 4.4vw, 76px); } }

@media (min-width: 980px) { .pdp-media { position: sticky; top: 104px; } }

.pdp-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 1 / 1;
}
.pdp-frame img { width: 100%; height: 100%; object-fit: cover; }
.pdp-frame.is-contain { background: #fff; }
.pdp-frame.is-contain img { object-fit: contain; padding: clamp(16px, 3vw, 40px); }
.pdp-frame .specimen svg { max-width: 168px; }

.pdp-thumbs { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.pdp-thumb {
  width: 74px; height: 74px;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  overflow: hidden;
  background: var(--surface-2);
  padding: 0;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out);
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.pdp-thumb[aria-pressed='true'] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }

.pdp-title { font-size: var(--t-3xl); margin-bottom: var(--s-3); }
.pdp-model { display: inline-flex; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--fg-subtle); margin-bottom: var(--s-3); }
.pdp-price { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin: var(--s-6) 0; }
.pdp-price .now { font-family: var(--font-display); font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pdp-price .was { font-family: var(--font-mono); color: var(--fg-subtle); text-decoration: line-through; }
.pdp-price .unit { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-subtle); }

.variant-set { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); }
.variant-opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 62px; padding: 0 var(--s-5);
  border: 1.5px solid var(--border); border-radius: var(--r-ctl);
  background: var(--surface);
  font-size: var(--t-sm); font-weight: 600;
  cursor: pointer; text-align: left;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.variant-opt b { font-family: var(--font-display); font-size: var(--t-md); font-weight: 800; font-variant-numeric: tabular-nums; }
.variant-opt:hover { border-color: var(--border-strong); }
.variant-opt[aria-pressed='true'] { border-color: var(--brand); background: var(--brand-soft); }

.pdp-actions { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); }
@media (min-width: 520px) { .pdp-actions { grid-template-columns: 1fr auto; } }

.pdp-block { padding-top: var(--s-7); margin-top: var(--s-7); border-top: 1px solid var(--border); }
.pdp-block h2 { font-size: var(--t-lg); margin-bottom: var(--s-4); }

/* The supplier's description on a bio-input page (catalog.js paintAbout).
   Long dose tables in plain paragraphs, so the measure is held and the
   run-in labels — "Seed treatment:", "Drip irrigation:" — carry the scan. */
.pdp-about { font-size: var(--t-sm); line-height: 1.65; }
.pdp-about h3 {
  font-size: var(--t-sm); font-weight: 700; letter-spacing: var(--tr-snug);
  margin: var(--s-5) 0 var(--s-2);
}
.pdp-about h2 + h3 { margin-top: 0; }
.pdp-about p { margin: 0 0 var(--s-3); max-width: 68ch; color: var(--fg-muted); }
.pdp-about p b { color: var(--fg); }
.pdp-about-list { margin: 0 0 var(--s-3); padding-left: 1.2em; max-width: 68ch; }
.pdp-about-list li { margin-bottom: var(--s-1); }
.pdp-about-list li::marker { color: var(--brand); }
.pdp-about .pdp-about-src { margin-top: var(--s-5); font-size: var(--t-xs); color: var(--fg-subtle); }

/* ==========================================================================
   THE COLUMN OWNS THE SPACING BETWEEN ITS BLOCKS, BECAUSE THE BLOCKS CANNOT.

   `.pdp-info` is block flow and every child carries its own margin — 12 at the
   top of the column, then 20, 24 and 32 as it opens out. That works until a
   component is dropped in that is ALSO used somewhere else: `.quotebar`,
   `.pincheck`, `.cutoff` and `.seal` are shared with the cart, the shop and
   the home page, so none of them carries a margin of its own, and none of them
   should — `.pincheck` sits in a grid cell on cart.php where a margin would be
   wrong.

   The result was four joins at exactly ZERO on every product page, measured
   across all four categories at 420 and 1100:

     pdp-secondary -> quotebar     bio, machinery   (Save touching the panel)
     pdp-secondary -> cutoff       produce, millet  (Save touching the clock)
     quotebar      -> seal         machinery
     pdp-block     -> pincheck     all four         (the pill on the card)

   Reported as components overlapping — and with a border and a shadow on each,
   two boxes that merely touch do read as overlapping.

   MARGINS COLLAPSE HERE, WHICH IS THE WHOLE POINT. These are block-level
   siblings in normal flow, so the gap is the LARGER of the two facing margins,
   never their sum. Where the neighbour already carries 24px this changes
   nothing; where it carries none, the floor applies. It cannot double-space,
   and it cannot be defeated by adding another component in between.

   Scoped with `>` to this column on purpose. Do not move these onto the
   components themselves — that is the bug, not the fix. */
.pdp-info > .pdp-secondary,
.pdp-info > .quotebar { margin-bottom: var(--s-6); }
.pdp-info > .pincheck { margin-top: var(--s-6); }

/* mobile: keep the buy action reachable without scrolling back up */
.buy-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(16, 38, 26, .08);
  transform: translateY(110%);
  transition: transform var(--dur-2) var(--ease-out);
}
.buy-bar.is-up { transform: none; }
@media (max-width: 979px) { .buy-bar { display: flex; } }

/* THE BAR HAS ONE LINE OF ROOM AND TWO THINGS TO PUT IN IT, SO ONE OF THEM
   HAS TO BE ABLE TO GIVE — and `flex: none` on the price meant neither could.
   `.price` is `display: block` (craft.css), so a quoted product laid its two
   lines out INLINE: "On request quoted by volume" is one 212px run on a 339px
   line, and the Enquire button — `white-space: nowrap` inside 32px of padding,
   min-content 151px — was pushed 22px off a 375px screen and 77px off a 320px
   one. `html { overflow-x: clip }` meant it did not scroll into view either;
   the label simply lost its last letters.

   The price is the one that gives, because the button is the reason the bar
   exists. Stacking its two lines drops the block to the width of its wider
   line, `min-width: 0` lets it shrink past that, and the ellipsis keeps the
   truncation legible. The button is NOT given `min-width: 0` on purpose —
   its min-content is the floor the price shrinks against, and `.btn` carries
   `overflow: hidden`, so letting it shrink is how the label gets cut instead. */
.buy-bar .price {
  flex: 0 1 auto;
  min-width: 0;
  display: grid;
  gap: 1px;
}
.buy-bar .price-now,
.buy-bar .price-unit {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.buy-bar .btn { flex: 1; }
/* 32px of padding each side is a desktop measurement on a 320px phone */
@media (max-width: 400px) { .buy-bar .btn { padding-inline: var(--s-4); } }

/* ==================================================================== farm box */
.fb-hero { text-align: center; padding-block: var(--s-11) var(--s-9); }
.fb-hero h1 { font-size: var(--t-4xl); max-width: 17ch; margin-inline: auto; }
.fb-hero .lede { margin-inline: auto; }
.fb-hero .eyebrow { justify-content: center; }

.box-band { background: var(--bg-2); border-block: 1px solid var(--border); }

.box-grid { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 940px) { .box-grid { grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 5vw, 88px); } }

.mach-head { display: grid; gap: var(--s-6); align-items: end; margin-bottom: var(--s-8); }
@media (min-width: 900px) { .mach-head { grid-template-columns: minmax(0, 1fr) auto; } }

.crate {
  position: relative;
  padding: var(--s-7) var(--s-6) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
}
.crate::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 8px;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: repeating-linear-gradient(90deg, var(--accent) 0 26px, transparent 26px 42px);
  opacity: .6;
}
.crate-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.crate-head .mono { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-subtle); }
.crate-foot { margin: var(--s-4) 0 0; font-size: var(--t-xs); color: var(--fg-subtle); }

.season {
  display: grid; gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .season { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .season { grid-template-columns: repeat(6, 1fr); } }
.season-cell { background: var(--surface); padding: var(--s-5) var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.season-cell.is-now { background: var(--brand-soft); }
.season-m { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--fg-subtle); }
.season-cell.is-now .season-m { color: var(--brand); font-weight: 700; }
.season-cell ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-xs); color: var(--fg-muted); }

.plan-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr)); }
.plan {
  position: relative;
  display: grid; gap: var(--s-4); align-content: start;
  padding: var(--s-7) var(--s-6);
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.plan:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.plan.is-pick { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .plan:hover { transform: none; } }
.plan-name { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; }
.plan-price { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; margin: 0; }
.plan-price small { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 400; color: var(--fg-subtle); letter-spacing: .05em; text-transform: uppercase; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--fg-muted); }
.plan ul li { display: flex; gap: var(--s-3); align-items: flex-start; }
.plan ul .ico { color: var(--brand); margin-top: 2px; flex: none; }

/* ==================================================================== farmers */
.seq { display: grid; gap: var(--s-8); }
.seq-row { display: grid; gap: var(--s-5); align-items: start; padding-bottom: var(--s-8); border-bottom: 1px solid var(--border); }
.seq-row:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 880px) { .seq-row { grid-template-columns: 116px minmax(0, 1fr) 300px; gap: var(--s-8); } }
.seq-n { font-family: var(--font-mono); font-size: var(--t-2xl); font-weight: 600; color: var(--accent-ink); letter-spacing: -.03em; line-height: 1; }
.seq-body h2 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.seq-body p { color: var(--fg-muted); margin-bottom: 0; }
.seq-aside {
  padding: var(--s-5);
  border: 1px dashed var(--border-strong); border-radius: var(--r-card);
  background: var(--surface-2);
  font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1.65; color: var(--fg-muted);
}
.seq-aside b { display: block; font-size: var(--t-2xs); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--fg-subtle); margin-bottom: var(--s-2); }

/* ==================================================================== about */
.timeline { display: grid; }
.tl-row { display: grid; gap: var(--s-3); padding: var(--s-6) 0; border-top: 1px solid var(--border); }
@media (min-width: 800px) { .tl-row { grid-template-columns: 210px minmax(0, 1fr); gap: var(--s-8); align-items: baseline; } }
.tl-key { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--accent-ink); font-weight: 600; }
.tl-row h2 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.tl-row p { color: var(--fg-muted); margin: 0; }

/* ==================================================================== contact */
.contact-grid { display: grid; gap: var(--s-9); align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1.1fr .9fr; gap: clamp(44px, 5vw, 88px); } }

.reach { display: grid; gap: var(--s-3); }
.reach-item {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.reach-item:hover { border-color: var(--brand); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .reach-item:hover { transform: none; } }
.reach-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--brand-soft); }
.reach-ico .ico { color: var(--brand); }
.reach-txt { display: grid; gap: 2px; min-width: 0; }
.reach-txt b { font-size: var(--t-sm); font-weight: 700; overflow-wrap: anywhere; }
.reach-txt small { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-subtle); }

.form-grid { display: grid; gap: 0 var(--s-4); }
@media (min-width: 560px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }

.order-summary { padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); margin-bottom: var(--s-5); }
.order-summary h3 { font-size: var(--t-md); margin-bottom: var(--s-4); }
.order-summary .cart-line { grid-template-columns: minmax(0, 1fr) auto; }
.order-summary .cart-thumb { display: none; }