/*
 * Fertilize-it components (loaded after refresh.css). The look of the site stays; this file gives the parts one shared recipe:
 *   1 icons and flags    2 icon tiles and icon + text rows    3 chips and pills    4 card picture frame    5 card hover
 * Rules here are plain (they beat the old stylesheet's layered rules); anything that must beat an old !important sits in @layer fi-pre.
 * Colours and spacing come from the tokens of site.css and refresh.css; the season colours are new and meant for icons and tints only.
 */

:root {
  /* ground and soil: the earth of a lawn, from peat to bunker sand. They replace the pastel butter, mint and peach of the first design (the
     generic "AI gradient" look): panels, meters and chips take their colour from the ground the grass grows in. */
  --peat: #2b1e15; --loam: #4b3425; --topsoil: #6e4f36;
  --clay: #a4562f; --clay-soft: #efd9c8;
  --sand: #e7d5a8; --sand-soft: #f4ead2;
  --straw: #c8963a; --straw-deep: #7a5a1c;
  --moss: #5b7b3a; --moss-soft: #e0e8cc;
  --grass-bright: #8cc152;
  --butter: var(--sand-soft); --gold-soft: var(--sand-soft);
  --m-butter: #ead8a4; --m-peach: #e9c7a8; --m-mist: #d6dec4; --m-mint: #cfe0bd; --m-lime: #dfe8b6; --m-sage: #d9e5cc;
  --gold: #dcb055;
  --g-gold: linear-gradient(180deg, #e6c06a 0%, #d9ab4b 100%);
  --season-spring: #2f7a55; --season-spring-bg: #e1efd9;
  --season-summer: #8f6d12; --season-summer-bg: #fbf0cb;
  --season-autumn: #a9501f; --season-autumn-bg: #f9e3d3;
  --season-winter: #35648a; --season-winter-bg: #e0ecf5;
  --tile-sm: 40px; --tile-md: 48px; --tile-lg: 64px;
  --pill-h: 28px;
  --ring: rgba(30, 60, 44, .12);
  --card-line: #d9e2d3;
  --card-hover-line: #a9c7b3;
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
}

/* ============ 1. Icons and flags ============ */
/* Phosphor icons (MIT) as inline SVG: the shape in the text colour over a 24% back layer that --ph-tone can tint. */
@layer fi-pre {
  svg.ph { fill: currentColor !important; stroke: none !important; }
  svg.ph .t { fill: var(--ph-tone, currentColor) !important; opacity: .26; }
}
.ph { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.14em; }
.ph-r { vertical-align: -.125em; }
.flag { display: inline-block; width: 1.25em; height: 1.25em; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(30, 60, 44, .16); vertical-align: -.25em; }

/* ============ 2. Icon tiles and icon + text rows ============ */
/* .fi-tile: a rounded square that holds one icon. Sizes by modifier; tones by season or by role. */
.fi-tile {
  --ph-tone: var(--tile-ink, var(--green-deep));
  display: inline-grid; place-items: center; flex: none; width: var(--tile-md); height: var(--tile-md); border-radius: 14px;
  background: var(--tile-bg, var(--sage)); color: var(--tile-ink, var(--green-deep)); font-size: calc(var(--tile-md) * .58);
}
.fi-tile.is-sm { width: var(--tile-sm); height: var(--tile-sm); border-radius: 12px; font-size: 23px; }
.fi-tile.is-lg { width: var(--tile-lg); height: var(--tile-lg); border-radius: 18px; font-size: 38px; }
.fi-tile.is-round { border-radius: 50%; }
.fi-tile[data-season="spring"], .is-spring { --tile-bg: var(--season-spring-bg); --tile-ink: var(--season-spring); }
.fi-tile[data-season="summer"], .is-summer { --tile-bg: var(--season-summer-bg); --tile-ink: var(--season-summer); }
.fi-tile[data-season="autumn"], .is-autumn { --tile-bg: var(--season-autumn-bg); --tile-ink: var(--season-autumn); }
.fi-tile[data-season="winter"], .is-winter { --tile-bg: var(--season-winter-bg); --tile-ink: var(--season-winter); }
.fi-tile.on-dark { --tile-bg: rgba(255, 255, 255, .12); --tile-ink: var(--gold); }

/* An icon beside text: the icon is centred on the text block (one line) or on its first line (several lines), and the tile is as tall as
   the text it sits beside. (Measured with wordpress/scripts/ux-align.mjs: the old 64 px tile beside one line of text was 21 px off.) */
.fi-row { display: flex; align-items: center; gap: 14px; }
.fi-row.is-top { align-items: flex-start; }
.fi-row > .fi-tile { margin-block: 0; }
.fi-row-text { display: grid; gap: 2px; min-width: 0; }
.fi-row-text b { font-weight: 600; line-height: 1.3; }
.fi-row-text span { color: var(--ink-3); font-size: .93em; line-height: 1.4; }

/* ============ 3. Chips and pills ============ */
/* One grammar for every small label (v2, 27 Oct 2026; the first version was a tinted capsule with a dot: the generic "badge" look).
     tag      a field label: transparent, a hairline of loam, 9 px corners (a label, not a capsule), 13 px type, no dot
     status   a state (verified, soon, high…): a soft earth tint and a leaf-shaped mark in front
     toggle   a filter: the same hairline, 40 px, the label rolls up on hover (refresh.js), the chosen one is filled deep green, counts sit like superscripts
     picture  on a photo: frosted sand glass with a double hairline
   Colours are ground and soil: loam, moss, straw, clay. */
:root { --chip-r: 9px; --chip-line: rgba(75, 52, 37, .28); --chip-ink: var(--loam); }
@layer fi-pre {
  :is(.news-tag, .b-tag, .rv-tag, .tag, .qr-tag, .ed-tag, .case-tag, .ph-tag, .qr-chip, .max-pill) {
    display: inline-flex !important; align-items: center; gap: 7px; height: 28px !important; min-height: 0 !important; padding: 0 11px !important;
    border: 0 !important; border-radius: var(--chip-r) !important; background: transparent !important; color: var(--chip-ink) !important;
    box-shadow: inset 0 0 0 1px var(--chip-line) !important; font: 600 13px/1 var(--font-sans), sans-serif !important; letter-spacing: .005em !important;
    text-transform: none !important; white-space: nowrap;
  }
  :is(.pc-badge, .soon-chip) {
    display: inline-flex !important; align-items: center; gap: 7px; height: 28px !important; min-height: 0 !important; padding: 0 11px 0 10px !important;
    border: 0 !important; border-radius: var(--chip-r) !important; background: var(--chip-bg, var(--sand-soft)) !important; color: var(--chip-ink, var(--straw-deep)) !important;
    box-shadow: inset 0 0 0 1px var(--chip-ring, rgba(200, 150, 58, .42)) !important; font: 600 13px/1 var(--font-sans), sans-serif !important; letter-spacing: .005em !important;
    text-transform: none !important; white-space: nowrap;
  }
}
/* the leaf: a 7 px square with two opposite corners rounded, the mark in front of a status (and of a plain tag that has no icon) */
:is(.pc-badge, .soon-chip, .news-tag, .b-tag, .rv-tag, .qr-tag, .ed-tag, .case-tag, .ph-tag):not(:has(svg, img))::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 0 7px 0 7px; background: currentColor; transform: rotate(-8deg); opacity: .85;
}
:is(.pc-badge, .soon-chip, .pdp-gallery-flag, .tag) svg { width: 15px; height: 15px; flex: none; }
.pc-badge.is-soldout { --chip-bg: #ece4d9; --chip-ink: var(--loam); --chip-ring: rgba(75, 52, 37, .26); }
.max-pill { margin-left: 8px; }
/* on a picture: frosted sand glass, readable on any photo */
@layer fi-pre {
  :is(.pdp-gallery-flag, .pc-media .pc-badge) {
    --chip-bg: rgba(246, 239, 220, .8); --chip-ink: var(--peat); --chip-ring: rgba(255, 255, 255, .55);
    border-radius: 8px !important; -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
    box-shadow: 0 0 0 1px rgba(43, 30, 21, .1), inset 0 0 0 1px rgba(255, 255, 255, .55) !important;
  }
  .pc-media .pc-badge.is-soldout { --chip-bg: rgba(236, 228, 217, .9); }
  .ai-label { height: 22px; padding: 0 9px; border-radius: 6px; font: 600 11.5px/22px var(--font-sans), sans-serif; background: rgba(246, 239, 220, .82); color: var(--peat); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(43, 30, 21, .1); }
}

/* Filters. The label rolls up on hover and its twin rolls in (refresh.js wraps it); the chosen filter is filled with the deep green. */
@layer fi-pre {
  :is(.shop-chip, .ssb-season-pill, .rv-filter-group .chip, .chip-btn, .c-topic, .faq-jump a, .blog-filters button, .quiz-opt-chip) {
    display: inline-flex !important; align-items: center; gap: 9px; height: 40px !important; padding: 0 16px !important; border-radius: 11px !important;
    border: 0 !important; background: transparent !important; color: var(--loam) !important; box-shadow: inset 0 0 0 1px var(--chip-line) !important;
    font: 600 14px/1 var(--font-sans), sans-serif !important; letter-spacing: .005em !important;
    transition: background-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft), color .3s var(--ease-soft);
  }
  :is(.shop-chip, .ssb-season-pill, .rv-filter-group .chip, .chip-btn, .c-topic, .faq-jump a, .blog-filters button, .quiz-opt-chip):is(.is-on, .is-active, .active, [aria-pressed="true"], [aria-checked="true"], .on) {
    background: var(--green-ink) !important; color: var(--sand-soft) !important; box-shadow: none !important;
  }
}
@media (hover: hover) {
  :is(.shop-chip, .ssb-season-pill, .rv-filter-group .chip, .chip-btn, .c-topic, .faq-jump a, .blog-filters button, .quiz-opt-chip):not(.is-on, .is-active, .active, [aria-pressed="true"], [aria-checked="true"], .on):hover {
    background: var(--sand-soft) !important; box-shadow: inset 0 0 0 1px rgba(75, 52, 37, .55) !important; color: var(--peat) !important;
  }
}
/* the counts on a filter: superscript figures, not a bubble */
:is(.shop-chip, .ssb-season-pill, .rv-filter-group .chip) :is(.shop-chip-n, .count, small, i) { align-self: flex-start; margin: 10px 0 0 -4px; font: 600 12px/1 var(--font-sans), sans-serif; font-variant-numeric: tabular-nums; opacity: .72; }
/* the rolling label */
.roll { display: inline-grid; overflow: hidden; vertical-align: top; line-height: 1.3; padding-block: .06em; margin-block: -.06em; }
.roll > span { grid-area: 1 / 1; display: block; transition: transform .5s var(--ease-soft); }
.roll > span:last-child { transform: translateY(105%); }
@media (hover: hover) and (pointer: fine) {
  :is(.shop-chip, .ssb-season-pill, .chip, .chip-btn, .c-topic, .faq-jump a, .blog-filters button, .quiz-opt-chip):not(.is-on, .active, [aria-pressed="true"]):hover .roll > span:first-child { transform: translateY(-105%); }
  :is(.shop-chip, .ssb-season-pill, .chip, .chip-btn, .c-topic, .faq-jump a, .blog-filters button, .quiz-opt-chip):not(.is-on, .active, [aria-pressed="true"]):hover .roll > span:last-child { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .roll > span { transition: none; } }

/* ============ 4. Card picture frame ============ */
/* Product pictures are tall bottles, portrait bags and white packshots. A 4:5 frame shows each of them whole (contain); the sides are
   filled with a blurred copy of the same picture (the same URL: no extra download), so a narrow bottle never leaves an empty strip. */
.pc-media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--m-base, #e8f0e3); isolation: isolate; }
.pc-media .fi-bd { position: absolute !important; inset: -12% !important; width: 124% !important; height: 124% !important; object-fit: cover !important; filter: blur(28px) saturate(.8) brightness(1.04); opacity: .5; z-index: 0; pointer-events: none; }
@layer fi-pre {
  .pc-media img:not(.fi-bd) { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 2; padding: 0 !important; }
  .pc-media.is-fill img:not(.fi-bd) { object-fit: cover !important; object-position: 50% 45% !important; }
  .pc-media.is-whole img:not(.fi-bd) {
    object-fit: contain !important; padding: 0 !important;
    /* feather the four edges so the sharp picture melts into the blurred one behind it */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.07) 2.67%, rgba(0, 0, 0, 0.26) 5.33%, rgba(0, 0, 0, 0.5) 8%, rgba(0, 0, 0, 0.74) 10.67%, rgba(0, 0, 0, 0.93) 13.33%, #000 16%, #000 84%, rgba(0, 0, 0, 0.93) 86.67%, rgba(0, 0, 0, 0.74) 89.33%, rgba(0, 0, 0, 0.5) 92%, rgba(0, 0, 0, 0.26) 94.67%, rgba(0, 0, 0, 0.07) 97.33%, transparent 100%), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.07) 1.17%, rgba(0, 0, 0, 0.26) 2.33%, rgba(0, 0, 0, 0.5) 3.5%, rgba(0, 0, 0, 0.74) 4.67%, rgba(0, 0, 0, 0.93) 5.83%, #000 7%, #000 93%, rgba(0, 0, 0, 0.93) 94.17%, rgba(0, 0, 0, 0.74) 95.33%, rgba(0, 0, 0, 0.5) 96.5%, rgba(0, 0, 0, 0.26) 97.67%, rgba(0, 0, 0, 0.07) 98.83%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.07) 2.67%, rgba(0, 0, 0, 0.26) 5.33%, rgba(0, 0, 0, 0.5) 8%, rgba(0, 0, 0, 0.74) 10.67%, rgba(0, 0, 0, 0.93) 13.33%, #000 16%, #000 84%, rgba(0, 0, 0, 0.93) 86.67%, rgba(0, 0, 0, 0.74) 89.33%, rgba(0, 0, 0, 0.5) 92%, rgba(0, 0, 0, 0.26) 94.67%, rgba(0, 0, 0, 0.07) 97.33%, transparent 100%), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.07) 1.17%, rgba(0, 0, 0, 0.26) 2.33%, rgba(0, 0, 0, 0.5) 3.5%, rgba(0, 0, 0, 0.74) 4.67%, rgba(0, 0, 0, 0.93) 5.83%, #000 7%, #000 93%, rgba(0, 0, 0, 0.93) 94.17%, rgba(0, 0, 0, 0.74) 95.33%, rgba(0, 0, 0, 0.5) 96.5%, rgba(0, 0, 0, 0.26) 97.67%, rgba(0, 0, 0, 0.07) 98.83%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .pc-media.is-bottle img:not(.fi-bd) { object-fit: contain !important; padding: 7% 12% 5% !important; }
  .pc-media .pc-badge, .pc-media .ai-label { z-index: 4; }
}
.pc-media img:not(.fi-bd) { transition: transform .9s var(--ease-soft); transform-origin: 50% 55%; }
.pc-media.is-whole::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(244, 247, 240, 0) 60%, rgba(244, 247, 240, 0.01) 64%, rgba(244, 247, 240, 0.02) 68%, rgba(244, 247, 240, 0.04) 72%, rgba(244, 247, 240, 0.06) 76%, rgba(244, 247, 240, 0.09) 80%, rgba(244, 247, 240, 0.12) 84%, rgba(244, 247, 240, 0.14) 88%, rgba(244, 247, 240, 0.16) 92%, rgba(244, 247, 240, 0.17) 96%, rgba(244, 247, 240, 0.18) 100%); pointer-events: none; }

/* ============ 5. One quiet hover for every card ============ */
/* The surface keeps its colour (no flash): the ring turns green, the shadow rises one step, the picture eases in 3.5% and the arrow
   moves 3 px. Only for devices that can hover; reduced motion keeps the colour change and drops the movement. */
@layer fi-pre {
  :is(.product-card, .shop-card, .cat, .news-card, .sz-card, .review-card, .rv-item, .pdp-related-card, .cart-cross-card, .csg-card, .contact-card, .ph-card, .wu-pillar, .pillar, .soil-measure, .soil-price-card, .soil-step, .cs-card, .case-card) {
    transition: box-shadow .5s var(--ease-soft), border-color .5s var(--ease-soft), background-color .5s var(--ease-soft) !important;
    transform: none !important;
  }
}
@media (hover: hover) and (pointer: fine) {
  @layer fi-pre {
    :is(.product-card, .shop-card, .cat, .news-card, .sz-card, .review-card, .rv-item, .pdp-related-card, .cart-cross-card, .csg-card, .contact-card, .ph-card, .wu-pillar, .pillar, .soil-measure, .soil-price-card, .soil-step, .cs-card, .case-card):hover {
      background-color: #fff !important; border-color: var(--card-hover-line) !important; box-shadow: var(--elev-2) !important; transform: none !important;
    }
  }
  :is(.product-card, .shop-card):hover .pc-media img:not(.fi-bd), .shop-card:hover .shop-card-img img, .news-card:hover .news-media img, .cat:hover .cat-img img, .ph-card:hover .ph-media img, .sz-card:hover .sz-media img { transform: scale(1.035); }
  .pc-media.is-bottle img:not(.fi-bd) { transform-origin: 50% 90%; }
  :is(.product-card, .shop-card):hover .pc-media.is-bottle img:not(.fi-bd) { transform: scale(1.04); }
  .news-card:hover .news-more svg, .cat:hover .cat-link svg, .ph-card:hover .ph-cta svg, .pc:hover .pc-view svg { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .pc-media img:not(.fi-bd), .news-media img, .cat-img img, .ph-media img, .sz-media img { transition: none !important; transform: none !important; }
}

/* ============ 6. Home: the four seasons ============ */
/* Before: the product lists were pushed to the bottom of each column (margin-top: auto), so the four columns' cards started at four different
   heights, with different crops, multiply-blended dark photos and thin generic icons. Now each column is a subgrid of the same rows
   (title, months and temperature, goal, products), the picture frame is the shop's, and the season has its own icon tile and tint. */
.fi-pic { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--m-base, #e8f0e3); isolation: isolate; }
.fi-pic .fi-bd { position: absolute !important; inset: -12% !important; width: 124% !important; height: 124% !important; object-fit: cover !important; filter: blur(28px) saturate(.8) brightness(1.04); opacity: .5; z-index: 0; pointer-events: none; }
@layer fi-pre {
  .fi-pic img:not(.fi-bd) { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 2; padding: 0 !important; mix-blend-mode: normal !important; box-shadow: none !important; background: none !important; border-radius: 0 !important; transition: transform .9s var(--ease-soft); transform-origin: 50% 55%; }
  .fi-pic.is-fill img:not(.fi-bd) { object-fit: cover !important; object-position: 50% 45% !important; }
  .fi-pic.is-whole img:not(.fi-bd) {
    object-fit: contain !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.07) 2.67%, rgba(0, 0, 0, 0.26) 5.33%, rgba(0, 0, 0, 0.5) 8%, rgba(0, 0, 0, 0.74) 10.67%, rgba(0, 0, 0, 0.93) 13.33%, #000 16%, #000 84%, rgba(0, 0, 0, 0.93) 86.67%, rgba(0, 0, 0, 0.74) 89.33%, rgba(0, 0, 0, 0.5) 92%, rgba(0, 0, 0, 0.26) 94.67%, rgba(0, 0, 0, 0.07) 97.33%, transparent 100%), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.07) 1.17%, rgba(0, 0, 0, 0.26) 2.33%, rgba(0, 0, 0, 0.5) 3.5%, rgba(0, 0, 0, 0.74) 4.67%, rgba(0, 0, 0, 0.93) 5.83%, #000 7%, #000 93%, rgba(0, 0, 0, 0.93) 94.17%, rgba(0, 0, 0, 0.74) 95.33%, rgba(0, 0, 0, 0.5) 96.5%, rgba(0, 0, 0, 0.26) 97.67%, rgba(0, 0, 0, 0.07) 98.83%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.07) 2.67%, rgba(0, 0, 0, 0.26) 5.33%, rgba(0, 0, 0, 0.5) 8%, rgba(0, 0, 0, 0.74) 10.67%, rgba(0, 0, 0, 0.93) 13.33%, #000 16%, #000 84%, rgba(0, 0, 0, 0.93) 86.67%, rgba(0, 0, 0, 0.74) 89.33%, rgba(0, 0, 0, 0.5) 92%, rgba(0, 0, 0, 0.26) 94.67%, rgba(0, 0, 0, 0.07) 97.33%, transparent 100%), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.07) 1.17%, rgba(0, 0, 0, 0.26) 2.33%, rgba(0, 0, 0, 0.5) 3.5%, rgba(0, 0, 0, 0.74) 4.67%, rgba(0, 0, 0, 0.93) 5.83%, #000 7%, #000 93%, rgba(0, 0, 0, 0.93) 94.17%, rgba(0, 0, 0, 0.74) 95.33%, rgba(0, 0, 0, 0.5) 96.5%, rgba(0, 0, 0, 0.26) 97.67%, rgba(0, 0, 0, 0.07) 98.83%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .fi-pic.is-bottle img:not(.fi-bd) { object-fit: contain !important; padding: 7% 12% 5% !important; mix-blend-mode: multiply !important; }
}

#seasons .sz-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@layer fi-pre {
  #seasons .sz-card { display: grid !important; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; padding: 26px 22px 22px !important; height: auto !important; border-radius: 28px !important; overflow: hidden !important; }
  #seasons .sz-body { display: contents !important; padding: 0 !important; }
  #seasons .sz-title { margin: 0 0 16px !important; gap: 14px !important; align-items: center !important; min-height: var(--tile-lg); }
  #seasons .sz-card h3 { font-size: 30px !important; line-height: 1.05; margin: 0 !important; letter-spacing: -.01em; }
  #seasons .sz-meta { display: flex; flex-wrap: wrap; gap: 8px !important; margin: 0 0 16px !important; align-content: flex-start; }
  #seasons .sz-task { margin: 0 0 22px !important; min-height: 0 !important; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
  #seasons .sz-prods { margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; align-items: stretch; }
  #seasons .sz-prods > li { display: flex; min-width: 0; }
  #seasons .sz-prods a { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; width: 100%; height: auto !important; padding: 0 !important; overflow: hidden; border-radius: 20px !important; background: #f3f7ef !important; box-shadow: inset 0 0 0 1px rgba(30, 60, 44, .07) !important; transform: none !important; transition: box-shadow .5s var(--ease-soft), background-color .5s var(--ease-soft) !important; text-decoration: none; }
  #seasons .sz-prods a > span:not(.sz-pic) { display: flex !important; flex-direction: column; flex: 1; gap: 2px !important; padding: 12px 12px 14px !important; min-width: 0; }
  #seasons .sz-prods b { hyphens: auto; overflow-wrap: anywhere; font-size: 15px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
  #seasons .sz-prods i { hyphens: auto; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
  #seasons .sz-prods .sz-price { margin-top: auto !important; padding-top: 8px; font-size: 17px !important; line-height: 1.15; }
  #seasons .sz-prods .sz-price small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.35; }
  #seasons .sz-prods .sz-rate { margin-top: 6px; }
  #seasons .sz-now { top: 22px !important; right: 20px !important; }
}
#seasons .sz-ico { flex: none; }
#seasons .sz-meta span { display: inline-flex; align-items: center; gap: 6px; height: var(--pill-h); padding: 0 12px 0 10px; border-radius: 999px; background: var(--season-bg, var(--sage)); color: var(--season-ink, var(--green-deep)); font: 600 12.5px/1 var(--font-sans), sans-serif; white-space: nowrap; }
#seasons .sz-meta .ph { font-size: 15px; }
#seasons .sz-card.s-spring { --season-bg: var(--season-spring-bg); --season-ink: var(--season-spring); }
#seasons .sz-card.s-summer { --season-bg: var(--season-summer-bg); --season-ink: var(--season-summer); }
#seasons .sz-card.s-autumn { --season-bg: var(--season-autumn-bg); --season-ink: var(--season-autumn); }
#seasons .sz-card.s-winter { --season-bg: var(--season-winter-bg); --season-ink: var(--season-winter); }
@layer fi-pre { #seasons .sz-card.is-now { box-shadow: 0 0 0 2px var(--season-ink, var(--green)), var(--elev-2) !important; border-color: transparent !important; } }
#seasons .sz-now { --chip-bg: var(--season-ink, var(--green-ink)); --chip-ink: #fff; height: 26px; }
@layer fi-pre { #seasons .sz-now { background: var(--season-ink, var(--green-ink)) !important; color: #fff !important; box-shadow: none !important; padding: 0 12px !important; } }
#seasons .pg-sz-ai { grid-column: 1; margin: 12px 0 0; font-size: 11.5px; color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) {
  #seasons .sz-prods a:hover { background: #fff !important; box-shadow: inset 0 0 0 1px var(--card-hover-line), var(--elev-1) !important; }
  #seasons .sz-prods a:hover .fi-pic img:not(.fi-bd) { transform: scale(1.04); }
}
@media (max-width: 1100px) {
  #seasons .sz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones: the four cards scroll sideways and snap; each card is its own stack (no shared rows) */
@media (max-width: 700px) {
  #seasons .sz-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(var(--gutter, 16px) * -1); padding: 4px var(--gutter, 16px) 16px; scrollbar-width: none; }
  #seasons .sz-grid::-webkit-scrollbar { display: none; }
  @layer fi-pre { #seasons .sz-card { flex: 0 0 min(88vw, 380px); scroll-snap-align: center; display: flex !important; flex-direction: column; padding: 22px 18px 18px !important; } #seasons .sz-body { display: flex !important; flex-direction: column; flex: 1; } #seasons .sz-prods { margin-top: auto !important; } }
  #seasons .sz-task { min-height: 3.1em !important; margin-bottom: 18px !important; }
}

/* ============ 7. Icon tiles everywhere ============ */
/* The icons of the blocks are Phosphor duotone now (DesignIcon::ico). One size per role, and an icon beside text is centred on that text:
   the old rules fought (one said centre, a later one said top), which left a 64 px tile 21 px off a single line of text. */
@layer fi-pre {
  .ico { width: 52px !important; height: 52px !important; border-radius: 16px !important; font-size: 28px; --ph-tone: var(--green-deep); }
  .ico svg { width: 1em !important; height: 1em !important; }
  .ico-sm, .has-ico .ico, .cert-row .ico, .c-channel .ico, .pdp-safety-item .ico { width: 46px !important; height: 46px !important; border-radius: 14px !important; font-size: 25px; }
  :is(.pillar, .wu-pillar, .soil-measure, .faq-block) .ico { width: 56px !important; height: 56px !important; border-radius: 17px !important; font-size: 30px; }
  .wu-pillar > .ico { width: 56px !important; height: 56px !important; }
  .soil-points li.has-ico, .pg-feature .soil-points li.has-ico, .cert-row, .faq-block-head.has-ico, .c-channel { align-items: center !important; gap: 16px !important; }
  .soil-points li.has-ico > span:not(.ico) { line-height: 1.4; }
}

/* ============ 8. Text beside a picture: the same height ============ */
/* Measured before: About's picture 103 px shorter than its text, the soil hero's picture 59 px taller. Side by side, the two columns now share
   one height (the picture covers its column); stacked on small screens the picture keeps its own ratio. */
@media (min-width: 981px) {
  @layer fi-pre {
    .pg-feature .soil-head { align-items: stretch !important; }
    .pg-feature .soil-head-left { display: flex; flex-direction: column; justify-content: center; }
    .pg-feature .soil-figure { aspect-ratio: auto !important; height: auto !important; min-height: 420px; align-self: stretch; }
    .soil-hero-grid { align-items: stretch !important; }
    .soil-hero-copy { display: flex; flex-direction: column; justify-content: center; }
    .soil-hero-visual { aspect-ratio: auto !important; height: auto !important; min-height: 480px; align-self: stretch; position: relative; }
    .soil-hero-visual img { height: 100% !important; object-fit: cover !important; }
  }
}

/* ============ 9. Language dropdown (all sizes) ============ */
/* Flag and code in a pill; a card of three rows opens under it. Before: three bare letters (NL FR EN) in three different places. */
.lang-wrap { position: relative; flex: none; }
.lang-dd { position: relative; }
.lang-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 9px; border-radius: 999px; font: 600 13.5px/1 var(--font-sans), sans-serif; color: var(--ink-2); user-select: none; -webkit-user-select: none; transition: background-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft); }
.lang-dd > summary::-webkit-details-marker { display: none; }
.lang-dd .flag { width: 20px; height: 20px; }
.lang-dd-caret { width: 13px; height: 13px; opacity: .65; transition: transform .25s var(--ease-soft); }
.lang-dd[open] .lang-dd-caret { transform: rotate(180deg); }
.lang-dd-label { display: none; }
.lang-dd-list { position: absolute; z-index: 300; right: 0; top: calc(100% + 8px); min-width: 212px; margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px rgba(30, 60, 44, .08), var(--elev-3); animation: fi-pop .18s var(--ease-soft); }
.lang-dd-list li { margin: 0; padding: 0; }
.lang-dd-list a { display: flex !important; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border-radius: 12px; color: var(--ink) !important; opacity: 1 !important; font: 600 14.5px/1 var(--font-sans), sans-serif; text-decoration: none !important; min-width: 0 !important; transition: background-color .15s; }
.lang-dd-list a .flag { width: 24px; height: 24px; }
.lang-dd-list a.active { background: #e8f1e3; color: var(--green-ink) !important; }
.lang-dd-check { margin-left: auto; width: 16px; height: 16px; color: var(--green-deep); }
@media (hover: hover) { .lang-dd-list a:not(.active):hover { background: #f1f6ee; } }
@keyframes fi-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lang-dd-list { animation: none; } .lang-dd-caret { transition: none; } }

.lang-wrap.is-promo .lang-dd > summary { height: 34px; background: transparent; color: var(--green-ink); }
.lang-wrap.is-promo .lang-dd[open] > summary { background: #fff; box-shadow: 0 0 0 1px var(--line-2); }
@media (hover: hover) { .lang-wrap.is-promo .lang-dd > summary:hover { background: rgba(255, 255, 255, .75); } }
.lang-wrap.is-nav { display: none; }
@media (max-width: 1000px) { .lang-wrap.is-nav { display: block; } }
.lang-wrap.is-nav .lang-dd > summary { height: 44px; padding: 0 12px 0 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.lang-wrap.is-nav .lang-dd[open] > summary { box-shadow: inset 0 0 0 1px var(--green-light); }
@media (max-width: 359px) { .lang-wrap.is-nav .lang-dd-code { display: none; } .lang-wrap.is-nav .lang-dd > summary { padding: 0 9px; gap: 6px; } }
.lang-wrap.is-drawer .lang-dd > summary { width: 100%; height: 56px; padding: 0 18px 0 16px; gap: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); border-radius: 18px; color: var(--ink); font-size: 16px; }
.lang-wrap.is-drawer .lang-dd .flag { width: 26px; height: 26px; }
.lang-wrap.is-drawer .lang-dd-code { display: none; }
.lang-wrap.is-drawer .lang-dd-label { display: inline; }
.lang-wrap.is-drawer .lang-dd-caret { margin-left: auto; width: 16px; height: 16px; }
.lang-wrap.is-drawer .lang-dd-list { position: static; min-width: 0; padding: 8px 0 0; background: transparent; box-shadow: none; animation: none; }
.lang-wrap.is-drawer .lang-dd-list a { height: 52px; font-size: 16px; }

/* ============ 10. The mobile menu ============ */
/* Before: a plain text list. Now: a sheet with an icon tile and a caret on every row, the page you are on lifted onto a white card, the cart and
   customer service together, the language in the same dropdown, and the phone and e-mail one tap away. Rows slide in one after another. */
@layer fi-pre { .md-panel { width: min(92vw, 420px) !important; border-radius: 28px 0 0 28px; box-shadow: -24px 0 60px -30px rgba(14, 59, 39, .45); } }
.md-head { padding: 16px 18px; }
.md-body { gap: 20px !important; padding: 12px 14px 20px !important; }
.md-links { gap: 4px !important; }
@layer fi-pre {
  .md-links a.md-link, .md-account .md-row {
    display: flex !important; align-items: center; gap: 14px; min-height: 58px; padding: 7px 14px 7px 8px !important; border-radius: 18px !important;
    font: 600 17px/1.2 var(--font-sans), sans-serif !important; color: var(--ink) !important; background: transparent !important; text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  .md-links a.md-link.active { background: #fff !important; box-shadow: var(--elev-1); color: var(--green-ink) !important; }
  .md-links a.md-link.active .fi-tile { --tile-bg: var(--green-ink); --tile-ink: #fff; --ph-tone: #fff; }
}
.md-link-text { flex: 1; min-width: 0; }
.md-link-caret { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.md-account { display: grid; gap: 2px; padding: 6px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.md-account .badge { margin-left: auto; }
.md-section-label { padding: 0 6px 8px !important; font-size: 12.5px !important; font-weight: 600 !important; }
.md-foot { gap: 12px !important; padding: 14px 18px 22px !important; }
.md-contacts { display: grid; gap: 8px; }
.md-contact { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 600 14.5px/1.2 var(--font-sans), sans-serif; text-decoration: none; overflow-wrap: anywhere; }
.md-contact .ph { font-size: 20px; color: var(--green-deep); flex: none; }
.md-meta { display: flex; gap: 18px; font-size: 13px; }
.md-meta a { color: var(--ink-3); }
@media (hover: hover) {
  .md-links a.md-link:not(.active):hover, .md-account .md-row:hover { background: rgba(255, 255, 255, .8) !important; }
  .md-link:hover .md-link-caret { transform: translateX(3px); }
}
.md-link-caret { transition: transform .25s var(--ease-soft); }
@media (prefers-reduced-motion: no-preference) {
  .md-links a.md-link, .md-account, .md-lang-block, .md-foot { opacity: 0; transform: translateX(16px); transition: opacity .38s var(--ease-soft), transform .38s var(--ease-soft); }
  .mobile-drawer.is-open .md-links a.md-link { opacity: 1; transform: none; transition-delay: calc(90ms + var(--i, 0) * 32ms); }
  .mobile-drawer.is-open .md-account { opacity: 1; transform: none; transition-delay: 460ms; }
  .mobile-drawer.is-open .md-lang-block { opacity: 1; transform: none; transition-delay: 520ms; }
  .mobile-drawer.is-open .md-foot { opacity: 1; transform: none; transition-delay: 580ms; }
}
@layer fi-pre {
  .md-panel { overflow-y: auto !important; overscroll-behavior: contain; }
  .md-head { position: sticky; top: 0; z-index: 3; background: var(--paper); }
  .md-body { flex: 0 0 auto !important; overflow: visible !important; }
  .md-foot { margin-top: auto; border-top: 0 !important; }
  .md-links a.md-link, .md-account .md-row { min-height: clamp(50px, 6.6vh, 58px) !important; }
}

/* ============ 11. The lawn quiz: questions ============ */
/* Before: a check, a cross and a question mark as icons, the answer and its explanation squeezed on one line, and a radio circle floating
   at the far end. Now: one tile per answer (icon above the words for up to four answers, beside them for more), the explanation under the
   answer, a check badge on the chosen one, nutrient answers as element tiles, season answers in their season colour. */
.quiz-root { max-width: 980px; margin-inline: auto; }
.quiz-progress-wrap { margin: 0 0 20px; }
.quiz-progress-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font: 600 14px/1 var(--font-sans), sans-serif; color: var(--ink-3); }
.quiz-progress-meta strong { color: var(--green-ink); font-size: 16px; }
.quiz-progress-bar { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; height: 8px; background: none !important; overflow: visible !important; }
.quiz-progress-bar i { display: block; height: 100%; border-radius: 99px; background: #d5dfce; transition: background-color .4s var(--ease-soft), transform .4s var(--ease-soft); }
.quiz-progress-bar i.is-done { background: var(--green-light); }
.quiz-progress-bar i.is-current { background: var(--green-deep); transform: scaleY(1.35); }

@layer fi-pre {
  .quiz-card { padding: clamp(24px, 4.2vw, 52px) !important; border-radius: 32px !important; background: #fff !important; box-shadow: var(--elev-2) !important; border: 0 !important; }
}
@media (prefers-reduced-motion: no-preference) { .quiz-card { animation: fi-step .42s var(--ease-soft); } }
@keyframes fi-step { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.quiz-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz-legend { padding: 0; margin: 0 0 6px; display: block; width: 100%; }
.quiz-question { font: 700 clamp(28px, 4.4vw, 42px)/1.06 var(--font-display), sans-serif; letter-spacing: -.018em; color: var(--green-ink); margin: 0; text-wrap: balance; }
.quiz-helper { margin: 12px 0 30px; color: var(--ink-3); font-size: clamp(16px, 1.7vw, 18px); line-height: 1.45; max-width: 60ch; }
.quiz-helper .max-pill { vertical-align: 2px; }

.quiz-options { display: grid; gap: 12px; }
.quiz-options.is-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.quiz-options.is-tiles[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-options.is-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-opt { position: relative; display: flex; cursor: pointer; background: #f6f9f3; border-radius: 24px; box-shadow: inset 0 0 0 1.5px #dbe4d4; transition: background-color .25s var(--ease-soft), box-shadow .25s var(--ease-soft); -webkit-tap-highlight-color: transparent; min-width: 0; }
.is-tiles .quiz-opt { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 20px 22px; }
.is-rows .quiz-opt { flex-direction: row; align-items: center; gap: 16px; padding: 14px 56px 14px 14px; border-radius: 20px; min-height: 80px; }
.quiz-opt-input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.quiz-opt-icon { display: grid; flex: none; }
.quiz-opt-icon .fi-tile { --tile-md: 52px; width: 52px; height: 52px; font-size: 30px; border-radius: 16px; background: #e4eedd; transition: background-color .25s, color .25s; }
.is-tiles .quiz-opt-icon .fi-tile { --tile-md: 60px; width: 60px; height: 60px; font-size: 34px; border-radius: 18px; }
.quiz-opt-body { display: grid; gap: 4px; min-width: 0; }
.quiz-opt-label { font: 700 clamp(16.5px, 1.5vw, 18.5px)/1.22 var(--font-display), sans-serif; color: var(--green-ink); letter-spacing: -.005em; }
.quiz-opt-sub { font: 400 14.5px/1.4 var(--font-sans), sans-serif; color: var(--ink-3); }
.quiz-opt-check { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--green-deep); color: #fff; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .35s var(--spring); }
.quiz-opt-check .ph { width: 15px; height: 15px; }
.is-rows .quiz-opt-check { top: 50%; right: 16px; margin-top: -14px; }
.quiz-opt.selected { background: #fff; box-shadow: inset 0 0 0 2.5px var(--green-deep), var(--elev-2); }
.quiz-opt.selected .quiz-opt-check { opacity: 1; transform: scale(1); }
.quiz-opt.selected .quiz-opt-icon .fi-tile:not([data-season]) { background: var(--green-deep); color: #fff; --ph-tone: #fff; }
.quiz-opt.disabled { opacity: .45; cursor: not-allowed; }
.quiz-opt:has(.quiz-opt-input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) { .quiz-opt:not(.selected):not(.disabled):hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--card-hover-line), var(--elev-1); } }
.quiz-count { margin: 18px 0 0; font: 600 14px/1 var(--font-sans), sans-serif; color: var(--ink-3); }
.quiz-note { margin: -14px 0 22px; padding: 10px 14px; border-radius: 14px; background: var(--season-summer-bg); color: #5f4a0c; font-size: 14.5px; }
.quiz-hint { margin: 18px 0 0; color: #8a2a1a; font-weight: 600; }

.fi-tile.is-el { position: relative; font-size: 0; }
.fi-tile.is-el b { font: 700 22px/1 var(--font-display), sans-serif; letter-spacing: -.01em; }
.fi-tile.is-el[data-z]::before { content: attr(data-z); position: absolute; top: 6px; left: 8px; font: 600 12px/1 var(--font-sans), sans-serif; opacity: .7; }
.fi-tile.is-patch { font-size: 0; }
.fi-tile.is-patch svg { width: 36px; height: 36px; }

.quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px !important; padding-top: 24px; border-top: 1px solid var(--line); }
.quiz-back, .quiz-next { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; font: 700 15.5px/1 var(--font-sans), sans-serif; cursor: pointer; border: 0; transition: background-color .25s, box-shadow .25s, transform .12s; }
.quiz-back { background: transparent; color: var(--ink-2); padding: 0 16px 0 12px; }
.quiz-back .ph, .quiz-next .ph { width: 18px; height: 18px; }
.quiz-back.hidden { visibility: hidden; }
.quiz-next { background: var(--g-green); color: #fff; box-shadow: 0 10px 22px -12px rgba(31, 92, 59, .7); }
.quiz-next[aria-disabled="true"] { background: #cfd9ca; color: #fff; box-shadow: none; cursor: not-allowed; }
@media (hover: hover) { .quiz-back:hover { background: #eef3ea; } .quiz-next:not([aria-disabled="true"]):hover .ph { transform: translateX(3px); } }
.quiz-next .ph { transition: transform .25s var(--ease-soft); }
.quiz-privacy { margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--ink-3); }

@media (max-width: 860px) { .quiz-options.is-rows { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .quiz-options.is-tiles { grid-template-columns: minmax(0, 1fr) !important; }
  .is-tiles .quiz-opt { flex-direction: row; align-items: center; gap: 16px; padding: 14px 56px 14px 14px; }
  .is-tiles .quiz-opt-icon .fi-tile { --tile-md: 52px; width: 52px; height: 52px; font-size: 30px; border-radius: 16px; }
  .is-tiles .quiz-opt-check { top: 50%; right: 16px; margin-top: -14px; }
  .quiz-card { border-radius: 26px !important; }
  .quiz-next { padding: 0 20px; }
}
@layer fi-pre {
  .quiz-opt { box-shadow: inset 0 0 0 1.5px #dbe4d4 !important; background: #f6f9f3 !important; }
  .quiz-opt.selected { background: #fff !important; box-shadow: inset 0 0 0 2.5px var(--green-deep), var(--elev-2) !important; }
}
@media (hover: hover) { @layer fi-pre { .quiz-opt:not(.selected):not(.disabled):hover { background: #fff !important; box-shadow: inset 0 0 0 1.5px var(--card-hover-line), var(--elev-1) !important; } } }

/* ============ 12. The lawn quiz: your plan ============ */
/* "Your complete plan, in one click" used to sit at the very bottom, after the tips. Now it is a panel next to the title (it stays in view
   while you read the products; on a phone it comes right under the title). Cards use the shop's picture frame and one layout. */
.quiz-results { max-width: 1200px; margin-inline: auto; }
.qr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "head plan" "body plan"; column-gap: 40px; align-items: start; }
.qr-head { grid-area: head; text-align: left !important; padding: 6px 0 26px; }
.qr-title { font: 700 clamp(32px, 4.6vw, 52px)/1.04 var(--font-display), sans-serif !important; letter-spacing: -.02em; color: var(--green-ink); margin: 0 0 14px !important; text-wrap: balance; }
.qr-subtitle { margin: 0 0 18px !important; max-width: 56ch; color: var(--ink-3); font-size: 17px; line-height: 1.5; }
.qr-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0; list-style: none; justify-content: flex-start !important; }
@layer fi-pre { .qr-chip { gap: 7px !important; padding: 0 13px 0 10px !important; } }
.qr-chip .ph { font-size: 16px; }
.qr-body { grid-area: body; min-width: 0; }

.qr-plan { grid-area: plan; position: sticky; top: calc(var(--navh, 72px) + 20px); align-self: start; padding: 26px; border-radius: 30px; color: #fff; background: radial-gradient(120% 90% at 100% 0, #3a7a58 0, rgba(58, 122, 88, 0) 60%), linear-gradient(165deg, #1f4332 0, #1a3a2c 100%); box-shadow: var(--elev-3); display: grid; gap: 14px; }
.qr-thumbs { display: flex; padding-left: 12px; }
.qr-thumb { position: relative; width: 52px; height: 52px; margin-left: -12px; border-radius: 16px; overflow: hidden; background: #2a5a43; box-shadow: 0 0 0 3px #1f4332; display: grid; place-items: center; color: #cfe6d3; }
.qr-thumb img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.qr-thumb .ph { font-size: 24px; }
.qr-plan-title { margin: 6px 0 0 !important; font: 700 clamp(26px, 2.6vw, 32px)/1.08 var(--font-display), sans-serif !important; letter-spacing: -.015em; color: #fff !important; }
.qr-plan-title .accent { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; }
.qr-plan-text { margin: 0 !important; color: #cfe0d4; font-size: 15px; line-height: 1.5; }
.qr-plan-total { display: grid; gap: 2px; padding: 14px 0 4px; border-top: 1px solid rgba(255, 255, 255, .16); }
.qr-plan .total-num { font: 700 40px/1 var(--font-display), sans-serif; color: #fff; letter-spacing: -.02em; }
.qr-plan .total-sub { font-size: 13px; color: #b6cdbf; }
.qr-plan .btn-primary { width: 100%; justify-content: center; height: 58px; font-size: 16.5px; background: var(--g-gold) !important; color: var(--green-ink) !important; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .5) !important; }
.qr-plan .btn-primary[aria-disabled="true"] { background: #ffffff1f !important; color: #fff !important; box-shadow: none !important; }
.qr-plan .btn-secondary, .qr-plan .qr-viewcart { width: 100%; justify-content: center; background: #ffffff14 !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important; }
.qr-restart { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; background: none; border: 0; color: #cfe0d4; font: 600 14px/1 var(--font-sans), sans-serif; cursor: pointer; border-radius: 999px; }
@media (hover: hover) { .qr-restart:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } }
.qr-plan :focus-visible { outline-color: var(--focus-on-dark, #e9cf86); }

.qr-section-h { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px !important; }
.qr-section-title { font: 700 22px/1.2 var(--font-display), sans-serif !important; color: var(--green-ink); margin: 0 !important; }
.quiz-root:has(.quiz-results) { max-width: 1200px; }
@layer fi-pre { .qr-elixirs { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; } }
.qr-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 4px 24px; padding: 20px; border-radius: 28px; background: #fff; box-shadow: var(--elev-1); margin: 0 0 16px !important; border: 0 !important; align-items: start; }
.qr-elixirs .qr-card { margin: 0 !important; grid-template-columns: 160px minmax(0, 1fr); }
.qr-foundation { box-shadow: 0 0 0 2px var(--green-deep), var(--elev-2); grid-template-columns: 210px minmax(0, 1fr); }
.qr-pic { border-radius: 20px; aspect-ratio: 4 / 5; width: 100%; }
.qr-pic-ico { position: absolute; inset: 0; margin: auto; font-size: 44px; color: var(--green-deep); z-index: 2; }
.qr-card-body { min-width: 0; display: grid; gap: 10px; align-content: start; padding-top: 2px; }
.qr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.qr-quantity, .qr-spec { display: inline-flex; align-items: center; gap: 6px; height: var(--pill-h); padding: 0 11px; border-radius: 999px; background: #eef4ea; color: var(--green-ink); font: 600 12.5px/1 var(--font-sans), sans-serif; white-space: nowrap; }
.qr-quantity .ph { font-size: 15px; }
.qr-spec { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.qr-name { margin: 0 !important; font: 700 clamp(22px, 2.2vw, 28px)/1.1 var(--font-display), sans-serif !important; letter-spacing: -.012em; }
.qr-name a { color: var(--green-ink); text-decoration: none; }
.qr-desc { margin: 0 !important; color: var(--ink-2); font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qr-details { display: grid; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); border-top-style: solid !important; }
.qr-why-title { margin: 0 !important; font: 700 13px/1 var(--font-sans), sans-serif !important; color: var(--ink-3) !important; text-transform: none !important; letter-spacing: 0 !important; }
.qr-why, .qr-item-notes { margin: 0 !important; padding: 0 !important; list-style: none; display: grid; gap: 6px; }
.qr-why li, .qr-item-notes li, .qr-when { display: flex !important; gap: 9px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); margin: 0 !important; padding: 0 !important; }
.qr-why li::before, .qr-item-notes li::before { display: none !important; }
.qr-why .ph, .qr-item-notes .ph, .qr-when .ph { flex: none; font-size: 18px; margin-top: 1px; color: var(--green-deep); }
.qr-item-notes .ph { color: var(--season-summer); }
.qr-buy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 20px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.qr-buy .qr-price { grid-row: 1; } .qr-buy .qr-each { grid-row: 2; } .qr-buy .qr-add-btn, .qr-buy .product-soldout { grid-column: 2; grid-row: 1 / span 2; }
.qr-price { font: 700 28px/1 var(--font-display), sans-serif; color: var(--green-ink); letter-spacing: -.015em; }
.qr-each { font-size: 13px; color: var(--ink-3); }
.qr-add-btn { justify-content: center; height: 48px; padding-inline: 22px; font-size: 14.5px; white-space: nowrap; }
.qr-add-btn.is-added { background: #e4eedd !important; color: var(--green-deep) !important; box-shadow: none !important; }
.qr-warning { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: #fbf1d6; color: #5c4508; border: 0 !important; box-shadow: inset 4px 0 0 #c99a1e; }
.qr-warning .ph { flex: none; font-size: 22px; color: #a97c0e; }
.qr-warning p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.qr-notes { margin: 22px 0 16px; padding: 22px 22px 8px; border-radius: 28px; background: #fff; box-shadow: var(--elev-1); border: 0 !important; }
.qr-notes-title { margin: 0 0 14px !important; font: 700 20px/1.2 var(--font-display), sans-serif !important; color: var(--green-ink); }
.qr-notes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 22px; }
.qr-notes li { display: flex; gap: 12px; align-items: center; padding: 8px 0 !important; margin: 0 !important; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.qr-notes li::before { display: none !important; }
.qr-soil { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 22px; margin: 0 0 18px; border-radius: 28px; background: var(--season-spring-bg); border: 0 !important; }
.qr-soil-title { margin: 0 0 4px !important; font: 700 20px/1.2 var(--font-display), sans-serif !important; color: var(--green-ink); }
.qr-soil p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.qr-final-cta { margin-top: 28px; }
.qr-final-cta .btn-primary { background: var(--g-green); }

@media (max-width: 1040px) {
  .qr-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "plan" "body"; }
  .qr-plan { position: static; margin-bottom: 28px; }
  .qr-thumb { width: 56px; height: 56px; }
}
@media (max-width: 760px) {
  .qr-card, .qr-elixirs .qr-card, .qr-foundation { grid-template-columns: 116px minmax(0, 1fr); gap: 4px 16px; padding: 14px; border-radius: 24px; }
  .qr-buy { grid-template-columns: minmax(0, 1fr) auto; }
  .qr-notes ul { grid-template-columns: minmax(0, 1fr); }
  .qr-soil { grid-template-columns: auto minmax(0, 1fr); } .qr-soil .btn { grid-column: 1 / -1; justify-content: center; }
  .qr-plan { padding: 22px; border-radius: 26px; }
}
@layer fi-pre {
  .qr-plan .btn-primary { background: var(--g-gold) !important; color: var(--green-ink) !important; }
  .qr-plan .btn-primary[aria-disabled="true"] { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
}
.qr-warning { margin-top: 14px; }
.qr-section-h { margin-top: 30px !important; }
.qr-body > .qr-section-h:first-child { margin-top: 6px !important; }
@layer fi-pre {
  .quiz-opt-icon { width: auto !important; height: auto !important; min-width: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .quiz-opt-icon svg.ph { width: 1em !important; height: 1em !important; }
}

/* ============ 13. Soil analysis: the lab report ============ */
/* Everything the lab measures (SoilReport.php). Round 5 (29 Oct 2026) moved the report's own rules (the frosted-glass card on the photograph, the
   tabs and the rows with a bar and a needle, the soil core, "what you get") to round5-soil.css; what stays here is the section's head, the
   sample-report download and the footnote. Colour is never the only signal: the state also stands in words with an arrow, and the target in
   numbers. The palette is the ground the grass grows in (peat, loam, sand, moss, straw, clay); text 4.5:1 or better, the band 3:1. */
.lr {
  --lr-line: #e6dfcd; --lr-band: #4f7a33;
  --lr-ok-ink: #3f5a25; --lr-low-ink: #6a4b2e; --lr-high-ink: #8a3f1e;
}
.lr-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 410px); gap: 32px 64px; align-items: end; margin-bottom: 40px; }
.lr .soil-receive-p { max-width: 560px; margin-bottom: 20px; }
.lr-example { display: flex; align-items: flex-start; gap: 10px; max-width: 560px; margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.lr-example .ph { width: 20px; height: 20px; margin-top: 1px; --ph-tone: var(--straw-deep); color: var(--straw-deep); }

/* The sample report */
.lr-sample { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: center; padding: 22px; border-radius: 28px; background: #fff; border: 1px solid var(--card-line); }
/* .lr-sheet (the report icon) is styled in round8-icons.css */
.lr-sample h3 { margin: 0 0 4px; font: 700 18px/1.25 var(--font-display), sans-serif; letter-spacing: -.01em; color: var(--green-ink); }
.lr-sample p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.lr-sample .lr-sample-btn { grid-column: 1 / -1; justify-content: center; margin-top: 14px; }
.lr-sample .lr-sample-btn .ph { width: 20px; height: 20px; }
.lr-sample .lr-sample-meta { grid-column: 1 / -1; margin: 6px 0 0; text-align: center; color: var(--ink-3); font-size: 13px; }

@media (max-width: 1100px) {
  .lr-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .lr-sample { max-width: 520px; }
}
@media (max-width: 760px) { .lr-sample { border-radius: 24px; } }

/* ============ 14. Reviews ============ */
/* Before: an AI illustration of four bottles in the title row, a wall of fourteen filter pills, plain cards. Now: the rating summary beside the
   title, one product dropdown (a <details>, same behaviour as the language menu), and cards with the verified badge on top, a tinted avatar and
   the product with its picture. Only reviews that exist are shown; every number is computed from them. */
.rv-hero-grid { align-items: center; }
.rv-hero .rv-empty { display: grid; justify-items: start; gap: 12px; max-width: none; margin: 0; padding: 32px 36px; border-radius: 28px; background: #fff; border: 1px solid var(--card-line); box-shadow: none; text-align: left; }
.rv-hero .rv-empty h2 { margin: 6px 0 0; font: 700 26px/1.15 var(--font-display), sans-serif; letter-spacing: -.01em; color: var(--green-ink); }
.rv-hero .rv-empty p { margin: 0; max-width: 46ch; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.rv-hero .rv-empty .btn { margin-top: 8px; }
.rv-hero .rv-rating { border-radius: 28px; border: 1px solid var(--card-line); box-shadow: none; }

.rv-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 24px; }
.rv-toolbar-meta { margin: 0; color: var(--ink-3); font-size: 14px; }
.rv-filter { margin: 0; position: relative; min-width: 0; max-width: 100%; }
.rv-dd { position: relative; }
.rv-dd > summary { list-style: none; cursor: pointer; user-select: none; }
.rv-dd > summary::-webkit-details-marker { display: none; }
.rv-dd-btn { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 48px; padding: 0 14px 0 16px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); font: 600 15px/1 var(--font-sans), sans-serif; transition: box-shadow .25s var(--ease-soft); }
.rv-dd-btn > .ph:first-child { width: 20px; height: 20px; flex: none; --ph-tone: var(--green-deep); color: var(--green-deep); }
.rv-dd-label { color: var(--ink-3); font-weight: 500; }
.rv-dd-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--green-ink); font-weight: 700; }
.rv-dd-count { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--season-spring-bg); color: var(--lr-ok-ink, #256543); font: 700 12.5px/1 var(--font-sans), sans-serif; font-variant-numeric: tabular-nums; }
.rv-dd-caret { flex: none; width: 14px; height: 14px; opacity: .7; transition: transform .25s var(--ease-soft); }
.rv-dd[open] .rv-dd-caret { transform: rotate(180deg); }
.rv-dd[open] > .rv-dd-btn { box-shadow: inset 0 0 0 1.5px var(--green-light); }
@media (hover: hover) { .rv-dd:not([open]) > .rv-dd-btn:hover { box-shadow: inset 0 0 0 1px var(--card-hover-line); } }
.fi-dd-list { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: min(440px, calc(100vw - 32px)); max-height: min(70vh, 540px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(30, 60, 44, .08), var(--elev-3); animation: fi-pop .18s var(--ease-soft); }
.fi-dd-list ul { margin: 0; padding: 0; list-style: none; }
.fi-dd-list li { margin: 0; padding: 0; }
.rv-dd-group { margin: 12px 12px 4px; color: var(--ink-3); font: 600 13px/1.2 var(--font-sans), sans-serif; }
.fi-dd-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px 6px 8px; border-radius: 14px; color: var(--ink); text-decoration: none; font: 600 15px/1.25 var(--font-sans), sans-serif; opacity: 1; }
.fi-dd-list a.active { background: #e8f1e3; color: var(--green-ink); }
@media (hover: hover) { .fi-dd-list a:not(.active):hover { background: #f1f6ee; } }
.rv-dd-img { position: relative; width: 36px; height: 36px; flex: none; border-radius: 10px; overflow: hidden; background: var(--sage); }
.fi-tile.is-sm.rv-dd-img { width: 36px; height: 36px; font-size: 22px; border-radius: 10px; }
.rv-dd-name { min-width: 0; overflow-wrap: anywhere; }
.rv-dd-meta { color: var(--ink-3); font: 600 13px/1 var(--font-sans), sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-dd-meta [aria-hidden] { color: var(--star); }
.rv-dd-n { font-weight: 500; }
.rv-dd-check { width: 16px; height: 16px; color: var(--green-deep); }
@media (prefers-reduced-motion: reduce) { .fi-dd-list { animation: none; } .rv-dd-caret { transition: none; } }

/* the product that is filtered on */
.rv-product-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 0 0 24px; padding: 14px 18px; border-radius: 24px; background: #fff; border: 1px solid var(--card-line); }
.rv-pl-img { position: relative; width: 56px; height: 56px; flex: none; border-radius: 16px; overflow: hidden; background: var(--sage); }
.fi-tile.rv-pl-img { width: 56px; height: 56px; font-size: 32px; }
.rv-pl-text { display: grid; gap: 4px; min-width: 0; }
.rv-pl-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rv-pl-rate .rv-stars { font-size: 17px; }
.rv-pl-rate .num { color: var(--green-ink); font-weight: 700; }
.rv-pl-rate .count { color: var(--ink-3); }
.rv-product-line .rv-product-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--green-ink); font: 600 14.5px/1 var(--font-sans), sans-serif; text-decoration: none; transition: background-color .25s var(--ease-soft), box-shadow .25s var(--ease-soft); }
@media (hover: hover) { .rv-product-line .rv-product-link:hover { background: #f1f6ee; box-shadow: inset 0 0 0 1px var(--card-hover-line); } }

/* the cards */
@layer fi-pre {
  .rv-item { padding: 24px !important; border-radius: 26px !important; gap: 14px !important; }
  .rv-item .rv-body { font-size: 14.5px !important; line-height: 1.6 !important; }
  .rv-item .rv-tag.has-thumb { gap: 8px !important; height: 32px !important; padding-left: 4px !important; }
  .rv-item .rv-meta { color: var(--ink-3) !important; font-size: 13px !important; font-weight: 500 !important; }
  .rv-avatar { width: 44px !important; height: 44px !important; font-size: 14px !important; }
  .rv-avatar[data-tone="spring"] { background: var(--season-spring-bg) !important; color: var(--lr-ok-ink, #256543) !important; }
  .rv-avatar[data-tone="summer"] { background: var(--season-summer-bg) !important; color: #6b520f !important; }
  .rv-avatar[data-tone="autumn"] { background: var(--season-autumn-bg) !important; color: #8f410f !important; }
  .rv-avatar[data-tone="winter"] { background: var(--season-winter-bg) !important; color: #2d5a7c !important; }
}
.rv-head { gap: 10px; flex-wrap: wrap; }
.rv-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 8px; border-radius: 999px; background: var(--season-spring-bg); color: var(--lr-ok-ink, #256543); font: 600 12.5px/1 var(--font-sans), sans-serif; white-space: nowrap; }
.rv-badge .ph { width: 16px; height: 16px; --ph-tone: var(--lr-ok-ink, #256543); }
.rv-tag.has-thumb::before { content: none !important; }
.rv-tag-img { position: relative; display: block; width: 24px; height: 24px; flex: none; border-radius: 50%; overflow: hidden; background: var(--sage); }
.rv-reply { border-radius: 4px 14px 14px 4px; }
.rv-foot > div:last-child { min-width: 0; }

/* ============ 15. Blog cards ============ */
/* Before: a green pill with a dot and a plain date above the title, a butter-coloured "coming soon" pill at the bottom, no author, no reading time.
   Now: the category (with its icon) and "coming soon" are frosted chips on the picture, like the badges on product cards; the footer has a
   byline, the date and the reading time (shown with the first real text), and an arrow. The home page uses the same cards. */
.ed-chips { position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; pointer-events: none; }
.ed-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); color: var(--green-ink); font: 600 13px/1 var(--font-sans), sans-serif; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .14), inset 0 0 0 1px rgba(255, 255, 255, .65); }
.ed-chip .ph { width: 18px; height: 18px; flex: none; --ph-tone: var(--green-deep); color: var(--green-deep); }
.ed-chip.is-soon { margin-left: auto; color: #6b520f; }
.ed-chip.is-soon .ph { --ph-tone: #8f6d12; color: #8f6d12; }
.ed-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.bf2-text .ed-foot { margin-top: 10px; }
.ed-by { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ed-by-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--season-spring-bg); color: var(--lr-ok-ink, #256543); font: 700 13px/1 var(--font-display), sans-serif; }
.ed-by-av.is-shop { font-size: 22px; --ph-tone: var(--lr-ok-ink, #256543); }
.ed-by-av[data-tone="summer"] { background: var(--season-summer-bg); color: #6b520f; }
.ed-by-av[data-tone="autumn"] { background: var(--season-autumn-bg); color: #8f410f; }
.ed-by-av[data-tone="winter"] { background: var(--season-winter-bg); color: #2d5a7c; }
.ed-by-text { display: grid; gap: 2px; min-width: 0; }
.ed-by-name { font: 600 14px/1.25 var(--font-sans), sans-serif; color: var(--green-ink); }
.ed-by-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; color: var(--ink-3); font-size: 13px; line-height: 1.3; }
.ed-time { display: inline-flex; align-items: center; gap: 5px; }
.ed-time .ph { width: 14px; height: 14px; }
.ed-go { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--sage); color: var(--green-deep); transition: background-color .35s var(--ease-soft), color .35s var(--ease-soft); }
.ed-go svg { width: 18px; height: 18px; transition: transform .35s var(--ease-soft); }
@media (hover: hover) and (pointer: fine) {
  .ed-card:hover .ed-go { background: var(--green-deep); color: #fff; }
  .ed-card:hover .ed-go svg { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) { .ed-go, .ed-go svg { transition: none; } }

/* ============ 16. Contact: where to find us ============ */
/* The visit address on a fixed picture of OpenStreetMap (no third-party request). The picture keeps its natural size, so the street names
   stay readable, and the card is a window onto it: a narrow card crops the sides instead of shrinking the map. The pin sits on the picture's centre. */
.cm { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-top: 40px; overflow: hidden; border-radius: 28px; background: #fff; border: 1px solid var(--card-line); }
.cm.is-plain { grid-template-columns: minmax(0, 1fr); }
.cm-map { position: relative; margin: 0; min-height: 400px; overflow: hidden; background: #e8efe4; }
.cm-map img { position: absolute; left: 50%; top: 50%; width: 900px; height: 640px; max-width: none; transform: translate(-50%, -50%); filter: saturate(.55) contrast(.96) brightness(1.04); }
.cm-pin { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -52px 0 0 -28px; color: var(--green-deep); filter: drop-shadow(0 6px 6px rgba(18, 50, 34, .38)); }
.cm-pin svg { display: block; width: 100%; height: 100%; }
.cm-credit { position: absolute; right: 10px; bottom: 10px; margin: 0; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .9); font: 500 12px/1.5 var(--font-sans), sans-serif; }
.cm-credit a { color: var(--ink-2); text-decoration: none; }
@media (hover: hover) { .cm-credit a:hover { text-decoration: underline; } }
.cm-info { display: grid; align-content: center; gap: 18px; padding: 40px; }
.cm-info h2 { margin: 0; font: 700 clamp(26px, 2.4vw, 32px)/1.1 var(--font-display), sans-serif; letter-spacing: -.02em; color: var(--green-ink); }
.cm-info p { margin: 0; max-width: 40ch; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.cm-info address { font-style: normal; padding: 14px 16px; border-radius: 20px; background: var(--paper); }
.cm-info address .fi-row-text span { color: var(--ink-2); font-size: 15px; }
.cm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cm-actions .btn .ph { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .cm { grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
  .cm-map { min-height: 300px; }
  .cm-info { padding: 26px 22px 28px; }
}

/* Contact channels: the whole card is the link; an arrow shows it, and moves a little on hover (devices that can hover only). */
.c-channel { align-items: center; }
.c-channel > div { min-width: 0; }
.c-go { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; background: var(--sage); color: var(--green-deep); transition: background-color .35s var(--ease-soft), color .35s var(--ease-soft); }
.c-go .ph { width: 18px; height: 18px; transition: transform .35s var(--ease-soft); }
@media (hover: hover) and (pointer: fine) {
  .c-channel:hover .c-go { background: var(--green-deep); color: #fff; }
  .c-channel:hover .c-go .ph { transform: translate(2px, -2px); }
}
@media (prefers-reduced-motion: reduce) { .c-go, .c-go .ph { transition: none; } }
@media (max-width: 560px) { .cm-actions .btn { width: 100%; justify-content: center; } }

/* ============ 17. Product page: combine with, and the other recommended cards ============ */
/* "Combine with these elixirs" used to sit in the tank-mix section, about half way down. It is now a row of compact cards under the buy box:
   picture, name, rating, a line of text, the dose, the price and a round "+" that adds the elixir without leaving the page. */
.cmb-section { padding: 56px 0 8px; }
.cmb-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 24px; }
.cmb-head h2 { margin: 0 0 6px; font: 700 clamp(28px, 3vw, 38px)/1.1 var(--font-display), sans-serif; letter-spacing: -.02em; color: var(--green-ink); }
.cmb-head p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.cmb-tag { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 9px; border-radius: 999px; background: var(--season-spring-bg); color: var(--lr-ok-ink, #256543); font: 600 13px/1 var(--font-sans), sans-serif; white-space: nowrap; }
.cmb-tag .ph { width: 18px; height: 18px; --ph-tone: var(--lr-ok-ink, #256543); }
.cmb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cmb-card { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 16px; border-radius: 26px; background: #fff; border: 1px solid var(--card-line); transition: box-shadow .5s var(--ease-soft), border-color .5s var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .cmb-card:hover { border-color: var(--card-hover-line); box-shadow: var(--elev-2); } }
.cmb-card .pc-media { width: 112px; align-self: start; border-radius: 18px; }
@layer fi-pre { .cmb-card .pc-media { aspect-ratio: 4 / 5 !important; height: auto !important; } }
.cmb-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cmb-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.cmb-name { margin: 0; font: 700 19px/1.2 var(--font-display), sans-serif; letter-spacing: -.01em; color: var(--green-ink); }
.cmb-name a { color: inherit; text-decoration: none; }
.cmb-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cmb-rate { color: var(--ink-2); font: 600 13px/1 var(--font-sans), sans-serif; white-space: nowrap; }
.cmb-rate [aria-hidden="true"]:first-child { color: var(--star); }
.cmb-n { font-weight: 500; color: var(--ink-3); }
.cmb-desc { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cmb-dose { display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; height: 28px; margin: 0; padding: 0 12px 0 8px; border-radius: 999px; background: var(--season-winter-bg); color: #2d5a7c; font: 600 13px/1 var(--font-sans), sans-serif; }
.cmb-dose .ph { width: 16px; height: 16px; flex: none; --ph-tone: #2d5a7c; }
.cmb-dose span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; }
.cmb-price { display: grid; gap: 3px; }
.cmb-price b { font: 700 20px/1 var(--font-display), sans-serif; letter-spacing: -.01em; color: var(--green-ink); }
.cmb-price small { color: var(--ink-3); font-size: 12.5px; line-height: 1; }
.cmb-act { position: relative; z-index: 2; }
.cmb-foot .shop-card-add, .cmb-foot .product-soldout { position: relative; z-index: 2; }
@media (max-width: 1180px) { .cmb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .cmb-section { padding-top: 40px; }
  .cmb-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cmb-card { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 24px; }
  .cmb-card .pc-media { width: 96px; border-radius: 16px; }
}

/* The other recommended cards ("Often bought together"): the three spec boxes become one quiet row with hairlines. */
@layer fi-pre {
  .pdp-related-grid .pc-specs { gap: 0 !important; padding: 12px 0 !important; border-block: 1px solid var(--line) !important; border-radius: 0 !important; overflow: visible !important; }
  .pdp-related-grid .pc-specs > div { min-width: 0; padding: 0 12px !important; border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; }
  .pdp-related-grid .pc-specs > div:first-child { padding-left: 0 !important; border-left: 0 !important; }
  .pdp-related-grid .pc-specs dt { margin: 0 0 3px !important; font: 500 12px/1.2 var(--font-sans), sans-serif !important; color: var(--ink-3) !important; white-space: normal !important; text-overflow: clip !important; overflow: visible !important; }
  .pdp-related-grid .pc-specs dd { margin: 0 !important; font: 600 14px/1.25 var(--font-sans), sans-serif !important; color: var(--green-ink) !important; white-space: normal !important; text-overflow: clip !important; overflow: visible !important; overflow-wrap: anywhere; }
}
/* A classified product's round button is not an "add": it opens the page at its hazard information first (CLP art. 48). The old rule for it
   (white, red ring) lost to the green of every other round button; it is back. */
@layer fi-pre {
  .shop-card-add.is-hazard { background: #fff !important; color: #7a1f1f !important; box-shadow: inset 0 0 0 2px #c8102e !important; filter: none !important; }
}
@media (hover: hover) { .shop-card-add.is-hazard:hover { background: #fff3f3 !important; } }

/* ============ 18. Cut-out products ============ */
/* The bags, the sprayer and the seed bag are cut out of the client's photos (a transparent WebP, class fi-cutout on the <img>). They are shown whole,
   in their own colours (the multiply of the white-background packshots would tint a white bag with the card colour), on a soft light, with a
   shadow under them. The liquid elixirs keep their photos. */
@layer fi-pre {
  img.fi-cutout { mix-blend-mode: normal !important; filter: drop-shadow(0 16px 12px rgba(24, 58, 40, .2)) drop-shadow(0 2px 3px rgba(24, 58, 40, .14)) !important; }
  :is(.pc-media, .cx-up-media, .sz-pic, .qr-pic).is-bottle img.fi-cutout { object-fit: contain !important; padding: 8% 10% 11% !important; transform-origin: 50% 85%; }
  .pc-media.is-bottle:has(img.fi-cutout)::before, .cx-up-media.is-bottle:has(img.fi-cutout)::before { display: none !important; }
  .pdp-gallery-main.is-cutout img { object-fit: contain !important; padding: 5% 9% 7% !important; }
  .pdp-thumb.is-cutout img { object-fit: contain !important; padding: 8% !important; }
}
:is(.pc-media, .cx-up-media, .sz-pic, .qr-pic, .pdp-gallery-main.is-cutout, .pdp-thumb.is-cutout):has(img.fi-cutout) { background: radial-gradient(85% 70% at 50% 38%, #fbfdf9 0%, #e6eee1 100%); }
.pdp-gallery-main.is-cutout { background: radial-gradient(85% 70% at 50% 38%, #fbfdf9 0%, #e6eee1 100%); }
@media (hover: hover) and (pointer: fine) { .pc:hover .pc-media.is-bottle img.fi-cutout { transform: scale(1.03) !important; } }

/* ============ 19. Elements in the composition, and the technology points ============ */
/* Each line of a product's composition has a tile: the element's symbol with its atomic number (two or three overlapping tiles when a line names
   several elements), or an icon for an ingredient that is not an element. Before, the lettered squares were hidden. The four points of "the
   technology behind every granule" have an icon each instead of the numbers 01-04: they are four properties, not four steps. */
@layer fi-pre {
  .pdp-blend-item { grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; gap: 16px !important; }
  .crf-points { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px !important; margin: 0 !important; padding: 0 !important; list-style: none; }
  .crf-point { display: flex !important; align-items: flex-start !important; gap: 18px !important; padding: 22px !important; border-radius: 26px !important; background: #fff !important; border: 1px solid var(--card-line) !important; box-shadow: none !important; }
}
.pdp-blend-pic { display: block; line-height: 0; }
.pdp-els { display: flex; align-items: center; flex: none; }
.pdp-els .fi-tile { --tile-md: 56px; width: 56px; height: 56px; border-radius: 16px; font-size: 30px; }
.pdp-els .fi-tile.is-el b { font-size: 24px; }
.pdp-els .fi-tile.is-el[data-z]::before { color: color-mix(in srgb, var(--tile-ink) 70%, #000); opacity: 1; }
/* one tile split into a cell per element ("Ca | S"): the same 56 px picture on every line */
.fi-tile.is-split { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); place-items: stretch; overflow: hidden; padding: 0; background: none; }
.fi-tile.is-split > span { display: grid; place-items: center; background: var(--tile-bg); color: var(--tile-ink); }
.fi-tile.is-split > span[data-season="spring"] { --tile-bg: var(--season-spring-bg); --tile-ink: var(--season-spring); }
.fi-tile.is-split > span[data-season="summer"] { --tile-bg: var(--season-summer-bg); --tile-ink: var(--season-summer); }
.fi-tile.is-split > span[data-season="autumn"] { --tile-bg: var(--season-autumn-bg); --tile-ink: var(--season-autumn); }
.fi-tile.is-split > span[data-season="winter"] { --tile-bg: var(--season-winter-bg); --tile-ink: var(--season-winter); }
.fi-tile.is-split > span + span { box-shadow: -1px 0 0 #fff; }
.fi-tile.is-split b { font: 700 18px/1 var(--font-display), sans-serif; letter-spacing: -.01em; }
.fi-tile.is-split[style*="--n:3"] b { font-size: 13px; letter-spacing: -.03em; }
.crf-point > .fi-tile { flex: none; }
.crf-point h3 { margin: 0 0 6px; font: 700 20px/1.25 var(--font-display), sans-serif; letter-spacing: -.01em; color: var(--green-ink); }
.crf-point p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 860px) { .crf-points { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 520px) { .crf-point > .fi-tile.is-lg { --tile-lg: 52px; width: 52px; height: 52px; font-size: 30px; } .crf-point { padding: 18px !important; gap: 14px !important; } }

/* ============ 20. Ground and soil colours ============ */
/* The free-shipping meter: a strip of loam with the lawn growing along it. (It was butter yellow with a gold bar.) */
@layer fi-pre {
  .cart-freeship { background: linear-gradient(180deg, var(--loam) 0%, var(--peat) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important; }
  .cart-freeship-msg { color: var(--sand-soft) !important; }
  .cart-freeship-msg strong, .cart-freeship-msg b { color: #fff !important; }
  .cart-freeship-bar { background: rgba(255, 255, 255, .16) !important; height: 8px !important; }
  .cart-freeship-bar i { background: linear-gradient(90deg, var(--moss) 0%, var(--grass-bright) 100%) !important; box-shadow: 0 0 12px rgba(140, 193, 82, .45); }
  .cart-freeship.is-reached { background: linear-gradient(180deg, #2f6a45 0%, #1f4a31 100%) !important; }
  .cart-freeship.is-reached .cart-freeship-msg { color: #fff !important; }
  .cart-freeship.is-reached .cart-freeship-bar i { background: var(--grass-bright) !important; }
  .cart-freeship-msg::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6c06a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3z'/%3E%3Cpath d='M14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='17.5' cy='17.5' r='1.8'/%3E%3C/svg%3E") center / contain no-repeat !important; }
  .cart-freeship.is-reached .cart-freeship-msg::before { filter: brightness(1.6); }
}

/* ============ 21. Chips v2 on the later components ============ */
/* The chips of the report, the reviews, the product page and the blog follow the grammar of section 3: tags are hairline labels, statuses are
   earth-tinted with a leaf, picture chips are frosted sand. Ground colours: moss (fine), topsoil (low), clay (high), straw (waiting). */
.lr-state, .rv-dd-count, .rv-badge, .cmb-tag, .cmb-dose { height: 28px; border-radius: var(--chip-r); font: 600 13px/1 var(--font-sans), sans-serif; letter-spacing: .005em; }
.rv-dd-count { min-width: 28px; padding: 0 8px; border-radius: 8px; background: transparent; color: var(--loam); box-shadow: inset 0 0 0 1px var(--chip-line); font-variant-numeric: tabular-nums; }
.rv-badge { padding: 0 11px 0 8px; background: var(--moss-soft); color: #3f5a25; box-shadow: inset 0 0 0 1px rgba(91, 123, 58, .32); }
.rv-badge .ph { --ph-tone: #3f5a25; }
.cmb-tag { padding: 0 12px 0 9px; background: var(--moss-soft); color: #3f5a25; box-shadow: inset 0 0 0 1px rgba(91, 123, 58, .32); }
.cmb-tag .ph { --ph-tone: #3f5a25; }
.cmb-dose { padding: 0 11px 0 8px; background: transparent; color: var(--loam); box-shadow: inset 0 0 0 1px var(--chip-line); }
.cmb-dose .ph { --ph-tone: var(--moss); color: var(--moss); }
.ed-chip { height: 30px; border-radius: 8px; background: rgba(246, 239, 220, .82); color: var(--peat); box-shadow: 0 0 0 1px rgba(43, 30, 21, .1), inset 0 0 0 1px rgba(255, 255, 255, .55); }
.ed-chip .ph { --ph-tone: var(--moss); color: var(--moss); }
.ed-chip.is-soon { color: var(--straw-deep); }
.ed-chip.is-soon .ph { --ph-tone: var(--straw-deep); color: var(--straw-deep); }
.rv-item .rv-tag.has-thumb::before { display: none; }

/* The review stars: see section 25. */
/* A link that is not in a line of text is 44 px high for a finger. */
@media (pointer: coarse) {
  @layer fi-pre { .rv-tag-row .rv-tag, .rv-tag-row a.rv-tag.has-thumb { min-height: 44px; height: 44px !important; padding-right: 16px !important; } }  /* the chip rules sit in fi-pre: only a rule there can win */
  .cmb-name a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ============ 22. Motion for the new graphics ============ */
/* Everything here moves with transform and opacity only, once, when the part scrolls into view (site.js adds .in; the .motion class is set only
   when the visitor has not asked for reduced motion). The resting state is the finished picture: a part that is never reported as seen (a jump
   to the end of the page, a printout) is simply shown complete. Hover touches are for devices that can hover. */
.motion .lr-stage.rv { opacity: 1 !important; transform: none !important; }  /* the stage only carries the .in class: its card does not move with the box */
@keyframes lr-pop { from { transform: scale(.2); opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  .fi-tile svg, .ico svg { transition: transform .55s var(--ease-soft); transform-origin: 50% 60%; }
  :is(.crf-point, .pdp-blend-item, .sz-card, .pillar, .pc, .cmb-card, .c-channel):hover :is(.fi-tile, .ico) svg { transform: rotate(-7deg) scale(1.1); }
  .fi-tile.is-el b { transition: transform .55s var(--ease-soft); }
  .pdp-blend-item:hover .fi-tile.is-el b { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .fi-tile svg, .ico svg, .fi-tile.is-el b { transition: none !important; }
}

/* ============ 23. "How much do I need?" dialog ============ */
/* Opens from the button above the package sizes (product.js builds it from the template of PdpCalcModal.php). A native <dialog>: focus stays inside,
   Escape closes it, the page behind is locked. On a phone it is a sheet from the bottom. */
html.modal-open { overflow: hidden; }
.pdp-cm { width: min(560px, calc(100vw - 24px)); max-width: none; max-height: min(94vh, 800px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.pdp-cm::backdrop { background: rgba(43, 30, 21, .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pdp-cm-panel { position: relative; display: grid; gap: 22px; max-height: min(94vh, 800px); overflow-y: auto; overscroll-behavior: contain; padding: 30px; border-radius: 32px; background: #fff; box-shadow: var(--elev-4); }
.pdp-cm-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--sand-soft); color: var(--loam); cursor: pointer; transition: background-color .25s var(--ease-soft); }
.pdp-cm-x .ph { width: 20px; height: 20px; }
@media (hover: hover) { .pdp-cm-x:hover { background: var(--sand); } }
.pdp-cm-head { display: flex; align-items: center; gap: 16px; padding-right: 48px; }
.pdp-cm-head h2 { margin: 0 0 4px; font: 700 26px/1.15 var(--font-display), sans-serif; letter-spacing: -.02em; color: var(--green-ink); }
.pdp-cm-head p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.pdp-cm-main { display: grid; gap: 16px; }
.pdp-cm-field { display: grid; gap: 8px; color: var(--ink-2); font: 600 14px/1.2 var(--font-sans), sans-serif; }
.pdp-cm-input { display: flex; align-items: baseline; gap: 10px; height: 72px; padding: 0 20px; border-radius: 20px; background: var(--sand-soft); box-shadow: inset 0 0 0 1.5px rgba(75, 52, 37, .28); transition: box-shadow .25s var(--ease-soft), background-color .25s var(--ease-soft); }
.pdp-cm-input:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--green-deep), 0 0 0 4px rgba(47, 122, 85, .15); }
@layer fi-pre { .pdp-cm-input input:focus-visible { outline: 0 !important; outline-offset: 0 !important; } }
.pdp-cm-input input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--green-ink); font: 700 38px/72px var(--font-display), sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pdp-cm-input b { color: var(--ink-3); font: 600 20px/72px var(--font-sans), sans-serif; }
.pdp-cm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-cm-result { display: grid; gap: 14px; padding: 20px; border-radius: 24px; background: linear-gradient(180deg, var(--sand-soft), #f0e5c6); }
.pdp-cm-big { margin: 0; }
.pdp-cm-big small { display: block; margin-bottom: 6px; color: var(--straw-deep); font: 600 13px/1 var(--font-sans), sans-serif; }
.pdp-cm-big strong { display: block; color: var(--peat); font: 700 clamp(28px, 6vw, 38px)/1.1 var(--font-display), sans-serif; letter-spacing: -.02em; }
.pdp-cm-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pdp-cm-rows .pdp-calc-out { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .72); border: 0; }
.pdp-cm-rows .pdp-calc-out span { color: var(--ink-3); font-size: 13px; }
.pdp-cm-rows .pdp-calc-out strong { color: var(--peat); font: 700 17px/1.2 var(--font-display), sans-serif; }
.pdp-cm-sentence, .pdp-cm-hint { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.pdp-cm-price { display: flex; align-items: baseline; gap: 10px; margin: 0; padding-top: 14px; border-top: 1px solid rgba(75, 52, 37, .2); }
.pdp-cm-price span { color: var(--ink-2); font-weight: 600; }
.pdp-cm-price strong { margin-left: auto; color: var(--peat); font: 700 28px/1 var(--font-display), sans-serif; letter-spacing: -.01em; }
.pdp-cm-price small { color: var(--ink-3); font-size: 13px; }
.pdp-cm-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.pdp-cm-actions .btn { justify-content: center; min-height: 56px; }
.pdp-cm-done { display: grid; justify-items: center; gap: 8px; padding: 26px 12px; text-align: center; }
.pdp-cm-done strong { color: var(--green-ink); font: 700 24px/1.2 var(--font-display), sans-serif; letter-spacing: -.01em; }
.pdp-cm-done p { margin: 0; color: var(--ink-2); font-size: 16px; }
.pdp-cm-tick { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 4px; border-radius: 50%; background: var(--moss-soft); color: #3f5a25; }
.pdp-cm-tick svg { width: 30px; height: 30px; }
@keyframes pdp-cm-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes pdp-cm-fade { from { opacity: 0; } }
@keyframes pdp-cm-tick { from { opacity: 0; transform: scale(.4); } }
.pdp-cm[open] .pdp-cm-panel { animation: pdp-cm-in .4s var(--ease-soft); }
.pdp-cm[open]::backdrop { animation: pdp-cm-fade .3s ease; }
.pdp-cm-done .pdp-cm-tick { animation: pdp-cm-tick .5s var(--ease-soft) .1s backwards; }
@media (max-width: 560px) {
  .pdp-cm { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 96vh; }
  .pdp-cm-panel { max-height: 96vh; gap: 18px; padding: 22px 18px 24px; border-radius: 28px 28px 0 0; }
  .pdp-cm-head h2 { font-size: 23px; }
  .pdp-cm-input { height: 64px; }
  .pdp-cm-input input { font-size: 32px; line-height: 64px; }
  .pdp-cm-input b { line-height: 64px; }
  .pdp-cm-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .pdp-cm[open] .pdp-cm-panel, .pdp-cm[open]::backdrop, .pdp-cm-done .pdp-cm-tick { animation: none; } }

/* ============ 24. Page heads with a picture, season photos ============ */
/* "Why us" and the lawn calendar had a one-column head with the right half empty. From 900 px up they now have a picture there (HeroVisual.php:
   a photograph in an arch, and the year wheel); below that it follows the text. The season cards of the calendar start with a photograph. */
@media (min-width: 900px) {
  @layer fi-pre {
    .pg-hero-grid.has-visual, .shop-head-grid.has-visual { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important; align-items: center !important; gap: clamp(32px, 6vw, 96px) !important; }
  }
}
.pg-visual { margin: 0 0 32px; justify-self: center; width: min(100%, 440px); }  /* the head has no bottom padding: the room under the picture is its own */
.pg-visual.is-arch { width: min(100%, 400px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 36px 36px; background: var(--moss-soft); box-shadow: 0 40px 60px -40px rgba(43, 30, 21, .5); }
.pg-visual.is-arch img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .pg-visual { justify-self: start; margin-top: 4px; }
  .pg-visual.is-arch { width: min(100%, 440px); aspect-ratio: 16 / 10; border-radius: 28px; }
  .pg-wheel { width: min(100%, 300px); justify-self: center; }
}
.pg-wheel svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pg-wheel { aspect-ratio: 1; }
.wh-m.is-spring, .wh-s.is-spring, .wh-l.is-spring, .wh-chip.is-spring { --wh-bg: var(--season-spring-bg); --wh-ink: var(--season-spring); }
.wh-m.is-summer, .wh-s.is-summer, .wh-l.is-summer, .wh-chip.is-summer { --wh-bg: var(--season-summer-bg); --wh-ink: var(--season-summer); }
.wh-m.is-autumn, .wh-s.is-autumn, .wh-l.is-autumn, .wh-chip.is-autumn { --wh-bg: var(--season-autumn-bg); --wh-ink: var(--season-autumn); }
.wh-m.is-winter, .wh-s.is-winter, .wh-l.is-winter, .wh-chip.is-winter { --wh-bg: var(--season-winter-bg); --wh-ink: var(--season-winter); }
.wh-m { fill: var(--wh-bg); transition: fill .4s var(--ease-soft); }
.wh-s { fill: var(--wh-ink); }
.wh-l { fill: color-mix(in srgb, var(--wh-ink) 78%, #000); font: 700 16px var(--font-display), sans-serif; text-anchor: middle; }
.wh-m.is-now { fill: var(--wh-ink); }
.wh-l.is-now { fill: #fff; }
.wh-core { fill: var(--sand-soft); }
.wh-core-line { fill: none; stroke: rgba(75, 52, 37, .3); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.pg-wheel svg.ph { color: var(--moss); --ph-tone: var(--moss); }
.wh-chip { transform-box: fill-box; transform-origin: center; }
.wh-chip circle { fill: #fff; stroke: var(--wh-ink); stroke-width: 3.5; }
.wh-chip svg.ph { color: var(--wh-ink); --ph-tone: var(--wh-ink); }
.wh-needle { transform-origin: 260px 260px; transform: rotate(var(--a, 0deg)); opacity: 0; }
.wh-needle path { fill: none; stroke: var(--green-ink); stroke-width: 4; stroke-linecap: round; }
.wh-needle circle { fill: var(--clay); stroke: #fff; stroke-width: 4; }
.wh-needle .wh-hub { fill: var(--green-ink); stroke: none; }
.pg-wheel.is-set .wh-needle { opacity: 1; }
.wh-ring { transform-origin: 260px 260px; }
@keyframes wh-spin { from { transform: rotate(-50deg); opacity: 0; } }
@keyframes wh-needle { from { transform: rotate(0deg); } }
.motion .pg-wheel.rv { opacity: 1 !important; transform: none !important; }
.motion .pg-wheel.in .wh-ring { animation: wh-spin 1.1s var(--ease-soft) backwards; }
.motion .pg-wheel.in .wh-chip { animation: lr-pop .6s var(--ease-soft) calc(var(--i, 0) * 90ms + 700ms) backwards; }
.motion .pg-wheel.in.is-set .wh-needle { animation: wh-needle 1.4s cubic-bezier(.3, 1.2, .4, 1) 1.1s backwards; }
@media (max-width: 520px) { .wh-l { display: none; } }
@media (prefers-reduced-motion: reduce) { .wh-ring, .wh-chip, .wh-needle, .wh-m { animation: none !important; transition: none !important; } }

.pg-season-card { padding: 10px 10px 22px; gap: 12px; overflow: hidden; }
.pg-season-photo { aspect-ratio: 12 / 7; overflow: hidden; border-radius: 16px; background: var(--sand-soft); }
.pg-season-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-soft); }
.pg-season-card > :not(.pg-season-photo) { margin-inline: 14px; }
@layer fi-pre { .pg-season-card h3.pg-season-label { margin-top: 4px; font-size: 13.5px !important; font-weight: 700 !important; } }  /* the old rule said 11.5px, which the minimum of 12px then lifted */
@media (hover: hover) and (pointer: fine) { .pg-season-card:hover .pg-season-photo img { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .pg-season-photo img { transition: none; } }

/* ============ 25. Fixes from the full audit (27 Oct 2026: 38 pages x 3 sizes) ============ */
/* A hover rule that was not behind (hover: hover). */
@media (hover: hover) { @layer fi-pre { .pdp-related-grid .pc:hover .pc-specs > div { background: none !important; } } }
/* The rating stars: the filled ones in the star colour (4.9:1; the bright gold of the reviews hero was 2.2:1). The empty ones stay pale on purpose: they only show what is missing
   (the rating is also in words beside them), and a darker empty star would hide how much of the last star is filled. The old rules sit in the reviews hero with !important. */
@layer fi-pre {
  .rv-stars, .rv-stars-fill, .rv-hero .rv-rating .rv-stars, .rv-hero .rv-rating .rv-stars-fill { color: var(--star) !important; }
  .rv-stars-base, .rv-head .stars .off, .stars .off, .pdp-rev-stars-row .off, .rv-hero .rv-rating .rv-stars-base { color: #d3c7a0 !important; }
}
/* The price slider's track was 1.35:1 on white; now a taupe that holds 3:1. */
.ssb-range-input { background: #93857c; }
/* Links that were 16 to 19 px high: at least 24 px (WCAG 2.2) with a mouse, 44 px for a finger. */
.pg-cal-picks { gap: 4px; }
.pg-cal-picks a { display: flex; align-items: center; min-height: 28px; }
.cm-credit a { display: inline-block; padding-block: 3px; margin-block: -3px; }
@media (pointer: coarse) {
  .pg-cal-picks { gap: 0; }
  .pg-cal-picks a { min-height: 44px; }
  .cm-credit a { padding-block: 13px; margin-block: -13px; }
  a[href*="wa.me"] { display: inline-flex; align-items: center; min-height: 44px; }
  @layer fi-pre { .nls-form input { font-size: 16px !important; } }  /* below 16 px a phone or iPad zooms into the field */
}