/*
 * Fertilize-it design layer, round 3 (27 Oct 2026, Nikola's brief). Loaded after components.css. Sections:
 *   A  type contrast        B  blended backgrounds       C  form controls        D  buttons and their icons      E  card borders on hover
 *   F  home: season filter  G  cart: free shipping, heavy orders                 H  shop filters
 *   I  quiz, contact, menu icon                          J  soil analysis        K  photographs     L  icons, round 4
 * Same rules as before: a rule that must beat an old !important sits in @layer fi-pre. The global focus ring there has the specificity
 * (0,3,0), so a rule that removes it needs one class more than that.
 * Pictures: real photographs and the fine-line icons of Hugeicons (MIT, Front/PhData.php constant H). Nothing is drawn by hand any more.
 */

/* ============ A. Type contrast ============ */
/* Body and muted text were #36403a and #525c56 (11.5:1 and 7.4:1 on white); now 14:1 and 9:1, and on the tinted panels they stay above 7:1. */
:root {
  --ink-2: #232c26;
  --ink-3: #3b463f;
  --field-line: #8a7d72;       /* the outline of a form field: 3.9:1 on white */
  --hi-w: .95;                 /* line weight of the fine-line icons (24 x 24 drawing, so ~2.5 px at 64 px) */
}

/* The fine-line icons (Ph::line): stroke only, the weight is one token */
.hi { fill: none; stroke: currentColor; stroke-width: var(--hi-w); stroke-linecap: round; stroke-linejoin: round; }

/* ============ B. Blended backgrounds ============ */
/* The page was one flat cream (#f4f7f0). It now carries the colours of the footer (butter, peach, mist, mint, lime, sage) as wide soft blends that
   sit at different heights and sides, in a tile that repeats every 3400 px; every blob stays 600 px away from the tile's top and bottom edge, so
   the repeat has no seam. Tinted sections get their own blend instead of a flat panel. */
:root {
  --mesh-page:
    radial-gradient(ellipse 760px 620px at 8% 780px, rgba(234, 216, 164, .62), transparent 72%),
    radial-gradient(ellipse 820px 560px at 96% 1080px, rgba(233, 199, 168, .50), transparent 72%),
    radial-gradient(ellipse 900px 640px at 66% 1560px, rgba(207, 224, 189, .66), transparent 72%),
    radial-gradient(ellipse 720px 600px at 4% 1980px, rgba(214, 222, 196, .72), transparent 70%),
    radial-gradient(ellipse 860px 560px at 92% 2360px, rgba(234, 216, 164, .52), transparent 72%),
    radial-gradient(ellipse 800px 600px at 34% 2760px, rgba(233, 199, 168, .42), transparent 72%);
  --mesh-sect-a: radial-gradient(ellipse 52% 90% at 0% 0%, rgba(234, 216, 164, .70), transparent 72%), radial-gradient(ellipse 56% 100% at 100% 100%, rgba(214, 222, 196, .85), transparent 72%), radial-gradient(ellipse 40% 70% at 62% 8%, rgba(207, 224, 189, .75), transparent 74%);
  --mesh-sect-b: radial-gradient(ellipse 50% 90% at 100% 0%, rgba(233, 199, 168, .55), transparent 72%), radial-gradient(ellipse 56% 100% at 0% 100%, rgba(207, 224, 189, .85), transparent 72%), radial-gradient(ellipse 36% 60% at 40% 90%, rgba(234, 216, 164, .55), transparent 74%);
}
/* the older rule `body { background: var(--paper) !important }` has to be answered in the same layer; the white price list keeps its own white */
@layer fi-pre {
  body:not(:has(.pl-page)) { background-color: #f4f7f0 !important; background-image: var(--grain), var(--mesh-page) !important; background-size: auto, 100% 3400px !important; background-repeat: repeat, repeat-y !important; }
}
.fp-sec.fp-tone-paper, section.reviews { background-image: var(--grain), var(--mesh-sect-a); background-color: #e9efe4; }
.soil-section.alt.pg-soil-faq { background-image: var(--grain), var(--mesh-sect-b); background-color: #f7f6ec; }
/* the sections that painted their own flat cream over the page: they let the blends through (found with a scan of 12 pages) */
@layer fi-pre {
  section.pg-picks, section.seasons, section.soil.pg-feature, section.ba-sec, section.home-news, section.home-join, section.shop-head, aside.shop-on-request,
  section.soil-hero, section.soil-section.lr, section.blog-head, section.rv-hero, section.cart-head { background-color: transparent !important; }
}

/* ============ C. Form controls ============ */
/* One border, never two. Older rules drew an outline round the input AND a ring round its wrapper (the coupon pill, the calculator field, the
   checkbox). Now the wrapper carries the one border and the one focus ring, and the input inside has neither. */
@layer fi-pre {
  .cart-promo-input input:not(:focus), .cx-promo-input input:not(:focus), .cx-promo-input input { box-shadow: none !important; }
  .cx-promo-input input, .cx-promo-input button { height: 44px !important; }
  .cx-promo-input { background: #fff !important; box-shadow: inset 0 0 0 1.5px var(--field-line) !important; }
  .cx-promo-input:focus-within { box-shadow: inset 0 0 0 2px var(--green-deep), 0 0 0 4px rgba(47, 122, 85, .16) !important; }
  .cx-promo-input:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 1.5px #d9765e !important; }
  .cx-promo .cx-promo-input input:focus-visible, .cx-promo .cx-promo-input input:focus { outline: 0 !important; }
  .pdp-cm-panel .pdp-cm-input input:focus-visible, .pdp-cm-panel .pdp-cm-input input:focus { outline: 0 !important; box-shadow: none !important; }
  .co-check input:focus-visible + .co-check-box { outline: 0 !important; box-shadow: inset 0 0 0 2px var(--green-deep), 0 0 0 4px rgba(47, 122, 85, .22) !important; }
}
.co-check-box { box-shadow: inset 0 0 0 1.5px var(--field-line); }

/* Dropdowns: the list that opens is no longer the grey system box. Browsers that can style it (customizable select, Chrome and Edge 135+) get a
   rounded white sheet that fades and settles in, with the chosen row marked; the others keep their own list. The closed select is unchanged and
   keeps the arrow the site already draws. */
@supports (appearance: base-select) {
  .fld select, .c-field select, .cf-country select, .sort-select { appearance: base-select; }
  .fld select::picker-icon, .c-field select::picker-icon, .cf-country select::picker-icon, .sort-select::picker-icon { display: none; }
  :is(.fld, .c-field, .cf-country) select::picker(select), .sort-select::picker(select) {
    box-sizing: border-box; margin-top: 8px; padding: 8px; border: 0; border-radius: 20px; background: #fff; max-height: min(340px, 50vh);
    box-shadow: 0 0 0 1.5px rgba(75, 52, 37, .14), 0 28px 50px -24px rgba(43, 30, 21, .5);
    opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top center;
    transition: opacity .2s ease, transform .3s var(--ease-soft), overlay .3s allow-discrete, display .3s allow-discrete;
  }
  :is(.fld, .c-field, .cf-country) select::picker(select):popover-open, .sort-select::picker(select):popover-open { opacity: 1; transform: none; }
  @starting-style {
    :is(.fld, .c-field, .cf-country) select::picker(select):popover-open, .sort-select::picker(select):popover-open { opacity: 0; transform: translateY(-8px) scale(.98); }
  }
  :is(.fld, .c-field, .cf-country) select option, .sort-select option { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: transparent; color: var(--ink); font: 600 15.5px/1.3 var(--font-sans), sans-serif; cursor: pointer; }
  :is(.fld, .c-field, .cf-country) select option:hover, :is(.fld, .c-field, .cf-country) select option:focus-visible, .sort-select option:hover { background: var(--moss-soft); outline: 0; }
  :is(.fld, .c-field, .cf-country) select option:checked, .sort-select option:checked { background: var(--sand-soft); font-weight: 700; }
  :is(.fld, .c-field, .cf-country) select option::checkmark, .sort-select option::checkmark { content: ""; order: 2; width: 18px; height: 18px; margin-left: auto; background: var(--green-deep); -webkit-mask: var(--hi-tick) center / contain no-repeat; mask: var(--hi-tick) center / contain no-repeat; }
}

/* ============ E. Card borders on hover ============ */
/* The old hover was a dark-green border colour and a gold glow that followed the pointer. Now only a thin ring of light follows the pointer along
   the border (a 1.5 px ring cut out of a radial gradient with a mask); the card itself stays calm. The pointer position comes from site.js. */
.pc::before, .sz-card::before, .news-card::before, .b2::before, .cat::before, .review-card::before, .pillar::before, .wu-pillar::before, .c-channel::before, .quiz-opt::before, .sf-prods a::before {
  content: ""; position: absolute; inset: 0; box-sizing: border-box; padding: 1.5px; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(47, 122, 85, .85), rgba(47, 122, 85, .22) 48%, transparent 74%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.quiz-opt, .sf-prods a { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .quiz-opt:hover::before, .sf-prods a:hover::before { opacity: 1; }
}
@layer fi-pre {
  .pc:hover, .sz-card:hover, .news-card:hover, .b2:hover, .cat:hover { border-color: transparent !important; }
}

/* ============ F. Home: the season filter ============ */
/* Moved to round5-home.css (29 Oct 2026): the tab bar, the panel in the colour of the season, the cards with their reviews. */

/* ============ G. Cart: the free-shipping ticket and the heavy-order card ============ */
/* Bare line icons as masks: a block of one colour cut out with the shape of a Hugeicons icon (truck, parcel, mail, tick).
   Cascade note: a plain declaration inside @layer fi-pre LOSES to every later layer (the reset sets margin: 0 on everything), so the layer below
   holds only what must beat the older !important rules; geometry and motion are plain rules outside any layer. */
:root {
  --hi-truck: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22%3E%3Cpath d=%22M19.5 17.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm-10 0a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z%22/%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M14.5 17.5h-5m10 0h.763c.22 0 .33 0 .422-.012a1.5 1.5 0 0 0 1.303-1.302c.012-.093.012-.203.012-.423V13a6.5 6.5 0 0 0-6.5-6.5M2 4h10c1.414 0 2.121 0 2.56.44C15 4.878 15 5.585 15 7v8.5M2 12.75V15c0 .935 0 1.402.201 1.75a1.5 1.5 0 0 0 .549.549c.348.201.815.201 1.75.201M2 7h6m-6 3h4%22/%3E%3C/g%3E%3C/svg%3E");
  --hi-parcel: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22%3E%3Cpath d=%22M15.5 7.5h-2c-2.828 0-4.243 0-5.121.879C7.5 9.257 7.5 10.672 7.5 13.5v2c0 2.828 0 4.243.879 5.121c.878.879 2.293.879 5.121.879h2c2.828 0 4.243 0 5.121-.879c.879-.878.879-2.293.879-5.121v-2c0-2.828 0-4.243-.879-5.121C19.743 7.5 18.328 7.5 15.5 7.5%22/%3E%3Cpath d=%22M16 7.5h-3v3c0 .471 0 .707.146.854c.147.146.383.146.854.146h1c.471 0 .707 0 .854-.146c.146-.147.146-.383.146-.854zm-5.5 11h3m-6-15h14m-14 0v-1m0 1v1m14-1v-1m0 1v1m-18 3v14m0-14h1m-1 0h-1m1 14h1m-1 0h-1%22/%3E%3C/g%3E%3C/svg%3E");
  --hi-mail: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22%3E%3Cpath d=%22m2 6l6.913 3.917c2.549 1.444 3.625 1.444 6.174 0L22 6%22/%3E%3Cpath d=%22M2.016 13.476c.065 3.065.098 4.598 1.229 5.733c1.131 1.136 2.705 1.175 5.854 1.254c1.94.05 3.862.05 5.802 0c3.149-.079 4.723-.118 5.854-1.254c1.131-1.135 1.164-2.668 1.23-5.733c.02-.986.02-1.966 0-2.952c-.066-3.065-.099-4.598-1.23-5.733c-1.131-1.136-2.705-1.175-5.854-1.254a115 115 0 0 0-5.802 0c-3.149.079-4.723.118-5.854 1.254c-1.131 1.135-1.164 2.668-1.23 5.733a69 69 0 0 0 0 2.952Z%22/%3E%3C/g%3E%3C/svg%3E");
  --hi-tick: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22 d=%22m5 14l3.5 3.5L19 6.5%22/%3E%3C/svg%3E");
}

/* G1. The ticket: loam brown with grain and two perforation notches. A rail runs along it with a truck on it; the truck rides to the goal as the
   cart grows, and the amount that is left is the biggest thing on the ticket. The fill is a scaleX and the truck a translateX (cqw = 1% of the
   rail), so only transform animates. */
.cart-freeship, .fi-mc-ship { position: relative;
  -webkit-mask: radial-gradient(circle 9px at 0 58%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 58%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 9px at 0 58%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 58%, #0000 97%, #000) right / 51% 100% no-repeat; }
.cart-freeship-msg { display: flex; align-items: center; gap: 12px; }
.cart-freeship-msg::before { content: ""; flex: none; -webkit-mask: var(--hi-truck) center / contain no-repeat; mask: var(--hi-truck) center / contain no-repeat; }
.cart-freeship.is-reached .cart-freeship-msg::before { -webkit-mask-image: var(--hi-tick); mask-image: var(--hi-tick); }
.cart-freeship-msg strong, .cart-freeship-msg b { white-space: nowrap; letter-spacing: -.01em; }
.cart-freeship-bar, .fi-mc-bar { position: relative; display: block; container-type: inline-size; }
.cart-freeship-bar i, .fi-mc-bar i { position: absolute; inset: 0; display: block; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(calc(var(--p, 0) / 100)); transition: transform .9s var(--ease-soft); }
.cart-freeship-bar::after, .fi-mc-bar::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(241, 212, 154, .8); }
.cart-freeship-truck, .fi-mc-truck { position: absolute; z-index: 1; left: 0; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #f7ecd2;
  box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .55); transform: translateX(calc(var(--p, 0) * 1cqw)); transition: transform .9s var(--ease-soft); }
.cart-freeship-truck::before, .fi-mc-truck::before { content: ""; position: absolute; inset: 7px; background: #4a3323; -webkit-mask: var(--hi-truck) center / contain no-repeat; mask: var(--hi-truck) center / contain no-repeat; }
.fi-mc-truck { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.fi-mc-truck::before { inset: 5px; }
.fi-mc-ship-txt { margin-bottom: 16px; }

@layer fi-pre {
  .cart-freeship, .fi-mc-ship { margin: 0 0 18px !important; padding: 18px 22px 22px !important; border: 0 !important; border-radius: 20px !important; opacity: 1 !important; box-shadow: none !important; color: var(--sand-soft) !important;
    background: var(--grain), radial-gradient(80% 140% at 0% 0%, rgba(222, 176, 92, .30), transparent 68%), linear-gradient(165deg, #5b3e2a 0%, #33241a 100%), #33241a !important; }
  .cart-freeship.is-reached { background: var(--grain), radial-gradient(80% 140% at 0% 0%, rgba(222, 176, 92, .38), transparent 68%), linear-gradient(165deg, #5b3e2a 0%, #33241a 100%), #33241a !important; }
  .cart-freeship-msg { margin: 0 0 22px !important; color: var(--sand-soft) !important; font: 500 15px/1.35 var(--font-sans), sans-serif !important; }
  .cart-freeship-msg::before { width: 28px !important; height: 28px !important; background: #f1d49a !important; filter: none !important; }
  .cart-freeship-msg strong, .cart-freeship-msg b { color: #fff !important; font: 700 21px/1 var(--font-display), sans-serif !important; }
  .cart-freeship.is-reached .cart-freeship-msg { color: #fff !important; font: 700 17px/1.3 var(--font-display), sans-serif !important; }
  .cart-freeship.is-reached .cart-freeship-msg::before { filter: none !important; }
  .cart-freeship-bar, .fi-mc-bar { height: 8px !important; margin: 4px 17px 2px !important; overflow: visible !important; border: 0 !important; border-radius: 99px !important; background: rgba(255, 255, 255, .17) !important; }
  .cart-freeship-bar i, .fi-mc-bar i, .cart-freeship.is-reached .cart-freeship-bar i { width: 100% !important; height: 100% !important; box-shadow: none !important; background: linear-gradient(90deg, #c8963a, #f1d49a) !important; transition: transform .9s var(--ease-soft) !important; }
  .fi-mc-ship { margin: 14px 0 0 !important; padding: 14px 16px 18px !important; }
  .fi-mc-ship-txt { color: var(--sand-soft) !important; font-size: 13.5px !important; }
  .fi-mc-ship-txt svg { color: #f1d49a !important; }
  .fi-mc-ship-txt b { color: #fff !important; font: 700 16px/1 var(--font-display), sans-serif !important; }
  .fi-mc-bar { margin: 2px 13px 0 !important; height: 6px !important; }
}

/* G2. Too heavy to ship: one card where the order button would be. The gauge shows the limit and how far over the cart is; the text says what to
   do; the button is the way out (a mail with the cart written out), so there is no disabled button beside a warning box. */
.cart-heavy { display: grid; gap: 12px; padding: 20px; border-radius: 20px; color: var(--sand-soft);
  background: var(--grain), radial-gradient(80% 140% at 100% 0%, rgba(217, 98, 43, .30), transparent 66%), linear-gradient(165deg, #5b3e2a 0%, #33241a 100%), #33241a; }
.cart-heavy-title { display: flex; align-items: center; gap: 12px; color: #fff; font: 700 18px/1.25 var(--font-display), sans-serif; letter-spacing: -.01em; }
.cart-heavy-title::before { content: ""; flex: none; width: 30px; height: 30px; background: #f1d49a; -webkit-mask: var(--hi-parcel) center / contain no-repeat; mask: var(--hi-parcel) center / contain no-repeat; }
.cart-heavy-gauge { display: flex; height: 10px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .15); }
.cart-heavy-gauge i { display: block; height: 100%; }
.cart-heavy-gauge .ok { flex: 0 0 calc(var(--ok, 90) * 1%); background: linear-gradient(90deg, #c8963a, #f1d49a); }
.cart-heavy-gauge .over { flex: 1 1 auto; background: repeating-linear-gradient(135deg, #d9622b 0 6px, #f0a074 6px 12px); }
.cart-heavy-scale { display: flex; justify-content: space-between; margin-top: -4px; font: 700 13.5px/1 var(--font-sans), sans-serif; color: #f1d49a; }
.cart-heavy-scale span:last-child { color: #f6b08c; }
.cart-heavy-text { margin: 2px 0 4px; font-size: 14.5px; line-height: 1.5; }
.cart-heavy-btn { display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; max-width: 100%; min-height: 54px; padding: 10px 20px; border-radius: 999px; background: #f7ecd2; font: 700 15.5px/1.25 var(--font-sans), sans-serif; text-align: center; text-decoration: none; text-wrap: balance; white-space: normal; transition: transform .4s var(--ease-soft), background-color .3s ease; }
.cart-heavy-btn::before { content: ""; flex: none; width: 21px; height: 21px; background: currentColor; -webkit-mask: var(--hi-mail) center / contain no-repeat; mask: var(--hi-mail) center / contain no-repeat; }
@media (hover: hover) and (pointer: fine) { .cart-heavy-btn:hover { background: #fff; transform: translateY(-2px); } }
@layer fi-pre {
  .cart-heavy-text { color: var(--sand-soft) !important; }
  .cart-heavy-btn { color: #3a281b !important; }
  .cart-heavy-title { color: #fff !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-freeship-bar i, .fi-mc-bar i, .cart-freeship-truck, .fi-mc-truck, .cart-heavy-btn { transition: none !important; }
}

/* ============ K. Photographs on the cards ============ */
/* The "Holy Grail" badge sat under the product photo (badge z-index 1, photo 2). And a photo that is shown whole over its blurred copy ended in a
   hard edge on both sides; its sides now fade into the blur, so the photo and its backdrop read as one picture. */
.pc-badge { z-index: 4; }
@layer fi-pre {
  /* the photo takes its own width (height 100%, width from its shape) and sits in the middle, so the fade is on the photo's own edges */
  .pc-media.is-whole img:not(.fi-bd), .fi-pic.is-whole img:not(.fi-bd) { inset: 0 auto 0 50% !important; width: auto !important; max-width: 100% !important; height: 100% !important; transform: translateX(-50%); object-fit: contain !important;
    -webkit-mask: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.07) 2.17%, rgba(0, 0, 0, 0.26) 4.33%, rgba(0, 0, 0, 0.5) 6.5%, rgba(0, 0, 0, 0.74) 8.67%, rgba(0, 0, 0, 0.93) 10.83%, #000 13%, #000 87%, rgba(0, 0, 0, 0.93) 89.17%, rgba(0, 0, 0, 0.74) 91.33%, rgba(0, 0, 0, 0.5) 93.5%, rgba(0, 0, 0, 0.26) 95.67%, rgba(0, 0, 0, 0.07) 97.83%, transparent 100%); mask: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.07) 2.17%, rgba(0, 0, 0, 0.26) 4.33%, rgba(0, 0, 0, 0.5) 6.5%, rgba(0, 0, 0, 0.74) 8.67%, rgba(0, 0, 0, 0.93) 10.83%, #000 13%, #000 87%, rgba(0, 0, 0, 0.93) 89.17%, rgba(0, 0, 0, 0.74) 91.33%, rgba(0, 0, 0, 0.5) 93.5%, rgba(0, 0, 0, 0.26) 95.67%, rgba(0, 0, 0, 0.07) 97.83%, transparent 100%); }
}

/* ============ H. Shop filters ============ */
/* No pills and no chips. The product lines above the grid are plain words on a hairline: the chosen one has an underline that grows in from the
   left. The seasons in the sidebar are four line icons; the chosen one takes the colour of its season and gets the same underline. The ticks
   in the lists are drawn as a mask, so they pop in with a scale. */
@layer fi-pre {
  .shop-line-chips { gap: 4px !important; margin: 0 0 18px !important; padding: 0 !important; background: transparent !important; border-bottom: 1px solid rgba(75, 52, 37, .2); }
  .shop-main .shop-line-chips .shop-chip { position: relative; display: inline-flex !important; align-items: baseline; gap: 3px; height: 54px !important; min-height: 54px !important; padding: 0 16px !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; color: var(--ink-3) !important; font: 700 17px/1 var(--font-display), sans-serif !important; letter-spacing: -.01em !important; transform: none !important; }
  .shop-main .shop-line-chips .shop-chip::before { display: none !important; }
  .shop-main .shop-line-chips .shop-chip::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--green-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-soft); }
  .shop-main .shop-line-chips .shop-chip.active, .shop-main .shop-line-chips .shop-chip[aria-pressed="true"], .shop-main .shop-line-chips .shop-chip.active:hover { background: transparent !important; color: var(--green-ink) !important; box-shadow: none !important; }
  .shop-main .shop-line-chips .shop-chip.active::after, .shop-main .shop-line-chips .shop-chip[aria-pressed="true"]::after { transform: scaleX(1); }
  .shop-main .shop-line-chips .shop-chip .shop-chip-n { align-self: flex-start; margin: 5px 0 0 2px !important; color: var(--ink-3) !important; font: 600 12px/1 var(--font-sans), sans-serif !important; opacity: 1 !important; }
  .shop-chip-filters { margin-left: auto; align-items: center; }

  .shop-sidebar .ssb-seasons { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 !important; margin-top: 2px; border-bottom: 1px solid rgba(75, 52, 37, .14); }
  .shop-sidebar .ssb-seasons .ssb-season-pill { position: relative; display: grid !important; justify-items: center; align-content: start; gap: 4px; height: auto !important; min-height: 0 !important; padding: 8px 0 14px !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; color: var(--ink-3) !important; font: 700 13.5px/1.1 var(--font-sans), sans-serif !important; letter-spacing: 0 !important; transform: none !important; }
  .shop-sidebar .ssb-seasons .ssb-season-pill::before { display: none !important; }
  .shop-sidebar .ssb-seasons .ssb-season-pill::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 3px; border-radius: 3px; background: var(--green-ink); transform: scaleX(0); transition: transform .45s var(--ease-soft); }
  .shop-sidebar .ssb-seasons .ssb-season-pill.active::after, .shop-sidebar .ssb-seasons .ssb-season-pill[aria-pressed="true"]::after { transform: scaleX(1); }
  .shop-sidebar .ssb-seasons .ssb-season-pill .s-ic { display: grid !important; place-items: center; width: 40px; height: 40px; color: inherit !important; transition: transform .5s var(--ease-soft); }
  .shop-sidebar .ssb-seasons .ssb-season-pill .s-ic svg { display: block !important; width: 34px !important; height: 34px !important; }
  /* (the "All" button that used to be the first, wide item is gone: a season is un-chosen by pressing it again; 31 Oct 2026) */
  .shop-sidebar .ssb-seasons .ssb-season-pill.active, .shop-sidebar .ssb-seasons .ssb-season-pill[aria-pressed="true"], .shop-sidebar .ssb-seasons .ssb-season-pill.active:hover { background: transparent !important; color: var(--green-ink) !important; box-shadow: none !important; }
  .shop-sidebar .ssb-seasons .ssb-season-pill[data-s="spring"].active .s-ic, .shop-sidebar .ssb-seasons .ssb-season-pill[data-s="spring"][aria-pressed="true"] .s-ic { color: var(--season-spring) !important; }
  .shop-sidebar .ssb-seasons .ssb-season-pill[data-s="summer"].active .s-ic, .shop-sidebar .ssb-seasons .ssb-season-pill[data-s="summer"][aria-pressed="true"] .s-ic { color: var(--season-summer) !important; transform: rotate(90deg); }
  .shop-sidebar .ssb-seasons .ssb-season-pill[data-s="autumn"].active .s-ic, .shop-sidebar .ssb-seasons .ssb-season-pill[data-s="autumn"][aria-pressed="true"] .s-ic { color: var(--season-autumn) !important; transform: rotate(-12deg); }
  .shop-sidebar .ssb-seasons .ssb-season-pill[data-s="winter"].active .s-ic, .shop-sidebar .ssb-seasons .ssb-season-pill[data-s="winter"][aria-pressed="true"] .s-ic { color: var(--season-winter) !important; transform: rotate(60deg); }

  .shop-sidebar .ssb-check { padding: 9px 10px !important; border-radius: 12px !important; font: 600 15px/1.25 var(--font-sans), sans-serif !important; }
  .shop-sidebar .ssb-box { position: relative; width: 22px !important; height: 22px !important; border: 0 !important; border-radius: 7px !important; background: #fff !important; box-shadow: inset 0 0 0 1.5px var(--field-line); transition: none !important; }
  .shop-sidebar .ssb-box svg { display: none !important; }
  .shop-sidebar .ssb-box::after { content: ""; position: absolute; inset: 4px; background: #fff; transform: scale(0); transition: transform .3s var(--ease-soft); -webkit-mask: var(--hi-tick) center / contain no-repeat; mask: var(--hi-tick) center / contain no-repeat; }
  .shop-sidebar .ssb-check.active .ssb-box { background: var(--green-deep) !important; box-shadow: none; }
  .shop-sidebar .ssb-check.active .ssb-box::after { transform: scale(1); }
  .shop-sidebar .ssb-check .ssb-num { font-variant-numeric: tabular-nums; font-size: 13px !important; }
  .shop-sidebar .ssb-check:has(input:focus-visible) .ssb-box { outline: 0 !important; box-shadow: 0 0 0 4px rgba(47, 122, 85, .26), inset 0 0 0 2px var(--green-deep) !important; }
  .shop-sidebar.is-collapsible.is-open > :not(.ssb-title) { animation: fi-sheet .45s var(--ease-soft) backwards; }
}
@media (hover: hover) and (pointer: fine) {
  @layer fi-pre {
    .shop-main .shop-line-chips .shop-chip:not(.active):hover { background: transparent !important; box-shadow: none !important; color: var(--green-ink) !important; transform: none !important; }
    .shop-main .shop-line-chips .shop-chip:not(.active):hover::after { transform: scaleX(.3); }
    .shop-sidebar .ssb-seasons .ssb-season-pill:not(.active):hover { background: transparent !important; box-shadow: none !important; color: var(--green-ink) !important; transform: none !important; }
    .shop-sidebar .ssb-seasons .ssb-season-pill:not(.active):hover .s-ic { transform: translateY(-3px); }
    .shop-sidebar .ssb-check:hover { background: var(--moss-soft) !important; }
  }
}
@keyframes fi-sheet { from { opacity: 0; transform: translateY(-10px); } }
/* the cards that appear after a filter or a sort rise in one by one (ui.js sets --i and the class) */
@keyframes fi-enter { from { opacity: 0; transform: translateY(16px) scale(.985); } }
.fi-entering { animation: fi-enter .55s var(--ease-soft) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) {
  .shop-main .shop-line-chips .shop-chip::after, .shop-sidebar .ssb-seasons .ssb-season-pill::after, .shop-sidebar .ssb-seasons .ssb-season-pill .s-ic, .shop-sidebar .ssb-box::after { transition: none !important; }
  .fi-entering, .shop-sidebar.is-collapsible.is-open > :not(.ssb-title) { animation: none !important; }
}

/* ============ I. Menu icon, quiz, contact ============ */
/* I1. The menu button: two lines of different length instead of three equal ones. Opening turns them into a cross; only transform and opacity move. */
.nav-burger { position: relative; width: 48px; height: 48px; border: 0 !important; border-radius: 50% !important; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(75, 52, 37, .24); }
.nav-burger span { position: absolute; left: 13px; top: 50%; width: 22px; height: 2px; margin: -1px 0 0; border-radius: 2px; background: var(--green-ink); transform-origin: 50% 50%; transition: transform .55s var(--ease-soft), opacity .3s ease; }
.nav-burger span:nth-child(1) { transform: translateY(-4px); }
.nav-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger span:nth-child(3) { transform: translate(4px, 4px) scaleX(.64); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .nav-burger:not([aria-expanded="true"]):hover span:nth-child(3) { transform: translate(4px, 4px) scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .nav-burger span { transition: none; } }

/* I2. The quiz options: one hairline instead of a border plus an inset ring, no tile behind the icon, a clear chosen state */
@layer fi-pre {
  .quiz-opt { border: 0 !important; border-radius: 24px !important; background: #fff !important; box-shadow: inset 0 0 0 1px rgba(75, 52, 37, .18) !important; }
  .quiz-opt:has(.quiz-opt-input:checked) { background: #f1f7ec !important; box-shadow: inset 0 0 0 2px var(--green-deep) !important; }
  .quiz-opt-icon .fi-tile { width: auto !important; height: auto !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
  .quiz-opt-icon .fi-tile svg { width: 44px !important; height: 44px !important; color: var(--green-ink) !important; }
}

/* I3. Contact: the head in the style of the home page. A lawn photograph in a rounded frame, the title on frosted glass (the same glass as the
   home hero), and a person at work on the lawn: a photograph with its background taken off (Vision), standing on the bottom edge. */
.contact-stage { position: relative; display: grid; align-items: end; min-height: 500px; margin-top: 22px; padding: 34px; overflow: hidden; border-radius: 36px; isolation: isolate;
  background: linear-gradient(180deg, rgba(20, 40, 28, 0) 55%, rgba(20, 40, 28, 0.01) 59.09%, rgba(20, 40, 28, 0.03) 63.18%, rgba(20, 40, 28, 0.06) 67.27%, rgba(20, 40, 28, 0.11) 71.36%, rgba(20, 40, 28, 0.15) 75.45%, rgba(20, 40, 28, 0.2) 79.55%, rgba(20, 40, 28, 0.24) 83.64%, rgba(20, 40, 28, 0.29) 87.73%, rgba(20, 40, 28, 0.32) 91.82%, rgba(20, 40, 28, 0.34) 95.91%, rgba(20, 40, 28, 0.35) 100%), url("../img/photo/lawn-stripes.webp") 50% 55% / cover no-repeat, #5d7f3f; }
@layer fi-pre {
  .contact-stage .contact-hero { display: block !important; max-width: 600px; margin: 0 !important; padding: 34px 38px 36px !important; border-radius: 28px;
    background: rgba(247, 249, 242, .76); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65), 0 30px 60px -34px rgba(20, 40, 28, .55); }
  .contact-stage .contact-hero p { max-width: 460px; margin-top: 16px !important; color: var(--ink-2) !important; }
}
.contact-person { position: absolute; right: 6%; bottom: 0; z-index: 1; width: auto; height: min(74%, 400px); filter: drop-shadow(0 22px 16px rgba(10, 24, 14, .38)); }
@media (max-width: 860px) {
  .contact-stage { min-height: 0; padding: 18px; border-radius: 28px; }
  .contact-stage .contact-hero { padding: 24px 22px 26px !important; }
  .contact-person { display: none; }
}

/* ============ J. Soil analysis ============ */
/* The report (glass card, tabs and rows, soil core, "what you get") is round5-soil.css since 29 Oct 2026; its old dial, tile, ring and person
   rules are gone. What stays: the icons of the four steps are bare. */
@layer fi-pre {
  .soil-step-icon { background: transparent !important; box-shadow: none !important; }
}

/* K2 (the man who spread seed next to the two route cards) is gone with the redesign of the routes: see round5-home.css R4. */

/* ============ D. Icons in buttons ============ */
/* The arrows and icons that sit in buttons ride a little when the pointer is on the button: the arrow moves ahead, the icon of a primary action
   leans in. Transform only; touch screens and reduced motion get nothing. */
.btn svg, .cart-checkout-btn svg, .anchor-link svg, .hx-cta svg, .cart-heavy-btn::before { transition: transform .45s var(--ease-soft); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover svg.ph-arrow-right, .cart-checkout-btn:hover svg.ph-arrow-right, .anchor-link:hover svg, .hx-cta:hover svg { transform: translateX(4px); }
  .btn:hover svg.ph-arrow-up-right { transform: translate(3px, -3px); }
  .cart-heavy-btn:hover::before { transform: translateY(-2px) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) { .btn svg, .cart-checkout-btn svg, .anchor-link svg, .hx-cta svg { transition: none; } }

/* K3. The shop page head: the man with the lawn mower stands in the empty right half (same kind of picture: a person with the background taken off). */
.shop-head:has(+ .shop-body) .container { position: relative; }
/* the lawn-mower man that stood in the corner of the shop head is gone (Nikola, 29 Oct 2026) */

/* K9. The official EU notice on the legal guarantee (Implementing Regulation (EU) 2025/1960): the picture is shown whole and unedited (no crop, no filter, no rounded corners). */
.pdp-guarantee-notice { margin: 20px 0 0; }
.pdp-guarantee-notice img { display: block; width: 100%; max-width: 560px; height: auto; border: 1px solid rgba(24, 56, 41, .18); }
.pdp-guarantee-notice a { display: block; }
.pdp-guarantee-notice img { cursor: zoom-in; }
.pdp-guarantee-notice figcaption { margin-top: 10px; font-size: 14px; }
.pdp-guarantee-notice figcaption a { display: inline-block; min-height: 44px; padding: 10px 0; text-decoration: underline; text-underline-offset: 3px; }


/* ============ L. Icons, round 4 (28 Oct 2026) ============ */
/* Fine-line icons (Hugeicons, Ph::line) with a soft earth-toned blob behind them instead of a white chip: the line is the meaning, the blob is the colour.
   Which icon means what lives in Ph.php (TRUST, FACT, PRODUCT, DESIGN_LINE). The line weight of an icon grows with its size (--hi-w is for a 24 x 24 drawing). */

/* L1. The promise strip under the product hero: five icons over one line each. Phones: a list with hairlines; tablets: three and two; desktop: five columns. */
.ptb-list { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 20px; --hi-w: 1.2; }
.ptb-list li { align-items: flex-start; gap: 16px; padding: 16px 0; }
.ptb-list li + li { border-top: 1px solid rgba(75, 52, 37, .13); }
.ptb-ic, .cart-trust-ic { --hi-tone: var(--m-butter); position: relative; display: block; flex: none; width: 46px; height: 46px; border-radius: 0; background: none; box-shadow: none; color: var(--green-ink); }
.ptb-ic::before, .cart-trust-ic::before { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--hi-tone); }
.ptb-ic svg, .cart-trust-ic svg { position: absolute; right: 0; top: 0; width: 38px; height: 38px; }
[data-ptb="free"] .ptb-ic { --hi-tone: var(--m-mint); }
[data-ptb="withdraw"] .ptb-ic, .cart-trust-ic[data-ti="withdraw"] { --hi-tone: var(--m-peach); }
[data-ptb="pay"] .ptb-ic, .cart-trust-ic[data-ti="pay"] { --hi-tone: var(--season-winter-bg); }
[data-ptb="company"] .ptb-ic { --hi-tone: var(--m-lime); }
.ptb-txt { gap: 3px; }
.ptb-txt b { font-size: 17px; line-height: 1.2; letter-spacing: -.005em; }
.ptb-txt small { font-size: 14px; line-height: 1.45; }
@media (min-width: 761px) {
  .ptb-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 28px; padding: 22px 28px; }
  .ptb-list li { grid-column: span 2; padding: 12px 0; }
  .ptb-list li:nth-child(n + 4) { grid-column: span 3; }
  .ptb-list li + li { border-top: 0; }
}
@media (min-width: 1180px) {
  .ptb-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 26px 8px; }
  .ptb-list li, .ptb-list li:nth-child(n + 4) { grid-column: auto; flex-direction: column; gap: 18px; padding: 4px 26px; }
  .ptb-list li + li { border-left: 1px solid rgba(75, 52, 37, .13); }
}

/* L2. Product cards: the product's own line icon in the meta row (Basic, Pro, elixir, booster, seed, sprayer) and an icon in each fact chip (NPK, pack, season). */
.pc-meta svg.hi { width: 18px; height: 18px; stroke-width: 1.45; color: var(--green-deep); }
.pc-specs dt { display: flex; align-items: center; gap: 5px; }
.pc-specs dt svg.hi { flex: none; width: 15px; height: 15px; stroke-width: 1.7; color: var(--green-deep); }
@layer fi-pre { .pc-specs dt { font-size: 12px !important; } }
.pc-specs dt[data-season="spring"] svg.hi { color: var(--season-spring); }
.pc-specs dt[data-season="summer"] svg.hi { color: var(--season-summer); }
.pc-specs dt[data-season="autumn"] svg.hi { color: var(--season-autumn); }
.pc-specs dt[data-season="winter"] svg.hi { color: var(--season-winter); }

/* L3. Product page: the line icon in front of the line name, the photo stamp, the season planner and the safety tiles. */
.pdp-linetag svg.hi { width: 22px; height: 22px; stroke-width: 1.35; }
.pgs-ic svg.hi { width: 22px; height: 22px; stroke-width: 1.4; }
.sp-ic svg.hi { width: 36px; height: 36px; stroke-width: 1.1; }
.sp-rows div { grid-template-columns: minmax(84px, auto) minmax(0, 1fr) !important; }
.sp-rows dt { display: flex; align-items: center; gap: 6px; }
.sp-rows dt svg.hi { flex: none; width: 16px; height: 16px; stroke-width: 1.7; color: var(--green-deep); }
.pdp-safety-item svg.hi { flex: none; width: 30px; height: 30px; stroke-width: 1.2; }
.sp-rows div { align-items: center !important; }
.pdp-spec-key { display: flex; align-items: center; gap: 9px; }
.pdp-spec-key svg.hi { flex: none; width: 20px; height: 20px; stroke-width: 1.5; color: var(--green-deep); }

/* L4. The icon tiles of the block sections (home pillars, FAQ groups, commitments, contact channels, soil points): the fine-line icon bare over a soft
   earth-toned blob instead of a sage square. The tile keeps the size the old rules give it; the icon and the blob are a share of it. */
@layer fi-pre {
  .ico:has(> svg.hi) { --ico-tone: var(--m-butter); position: relative; display: block !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; color: var(--green-ink) !important; }
  .ico:has(> svg.hi)::before { content: ""; position: absolute; left: 0; bottom: 0; width: 68%; height: 68%; border-radius: 50%; background: var(--ico-tone); }
  .ico:has(> svg.hi) > svg.hi { position: absolute; right: 0; top: 0; width: 74% !important; height: 74% !important; stroke-width: 1.25; }
  :is(.pillar, .wu-pillar, .soil-measure, .faq-block, .cert-row, .c-channel, .principle, .has-ico):nth-child(4n + 2) .ico:has(> svg.hi) { --ico-tone: var(--m-mint); }
  :is(.pillar, .wu-pillar, .soil-measure, .faq-block, .cert-row, .c-channel, .principle, .has-ico):nth-child(4n + 3) .ico:has(> svg.hi) { --ico-tone: var(--m-peach); }
  :is(.pillar, .wu-pillar, .soil-measure, .faq-block, .cert-row, .c-channel, .principle, .has-ico):nth-child(4n) .ico:has(> svg.hi) { --ico-tone: var(--season-winter-bg); }
}

/* L5. The free-shipping line under the home hero buttons. */
.hx-promise svg.hi { width: 26px; height: 26px; stroke-width: 1.4; color: var(--green-ink); }

/* L6. The reassurance rows beside the cart total and the checkout summary (pay, delivery, withdrawal): the same icon over a blob as the strip, a little smaller. */
@layer fi-pre {
  .cart-trust-item { gap: 14px !important; }
  .cart-trust-item .cart-trust-ic { width: 40px; height: 40px; --hi-w: 1.3; }
  .cart-trust-item .cart-trust-ic::before { width: 30px; height: 30px; }
  .cart-trust-item .cart-trust-ic svg { width: 32px !important; height: 32px !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; background: none !important; }
}
.cx-fi svg.hi { width: 19px; height: 19px; stroke-width: 1.7; }

/* L7. The contact lines of the footer. */
.fc-ico svg.hi { width: 18px; height: 18px; stroke-width: 1.6; }

/* The tiles that sit on a dark band (soil analysis, the controlled-release band of "why us", the quiz call on the home page): white icon over a soft white blob. */
@layer fi-pre {
  :is(.dark, .soil-section.dark, .wu-crf, .join-quiz, .pg-tone-dark, .pg-cta-dark, .wu-pillar.dark, .rv-item.dark) .ico:has(> svg.hi) { --ico-tone: rgba(255, 255, 255, .18); color: #fff !important; }
}

/* L8. The topic links beside the FAQ. */
.faq-jump a svg.hi { flex: none; width: 19px; height: 19px; stroke-width: 1.6; }