/*
 * Round 5, home and shop (29 Oct 2026, Nikola's list). Loaded after design.css. Sections:
 *   R1  product cards: the picture stays still        R2  equipment pictures (the sprayer)
 *   R3  the season filter of the home page (tab bar, panel in the colour of its season, cards with reviews)
 * Same cascade rules as before: plain declarations here beat the older layers; an !important that must beat an older !important sits in @layer fi-pre.
 */

/* ============ R1. Product cards: the picture stays still ============ */
/* The picture of a product used to grow and settle (3.5 to 4 %, 0.9 s) when the pointer was over its card, which looked restless on bottles and bags.
   The card keeps its quiet hover (ring and shadow); nothing in it moves. */
.pc-media img:not(.fi-bd), .shop-card-img img { transition: none; }
@media (hover: hover) and (pointer: fine) {
  :is(.product-card, .shop-card):hover .pc-media img:not(.fi-bd), .shop-card:hover .shop-card-img img,
  :is(.product-card, .shop-card):hover .pc-media.is-bottle img:not(.fi-bd) { transform: none; }
}

/* ============ R2. Equipment pictures (the sprayer) ============ */
/* A white tank multiplied into the pale card turned into the card (its left side vanished and it looked cropped). Equipment keeps its own colours,
   gets room round it and a soft contact shadow on a slightly deeper ground. */
.pc-media.is-tool { background: radial-gradient(62% 56% at 50% 46%, #fff 0%, #e4ecdd 100%); }
@layer fi-pre {
  .pc-media.is-tool img:not(.fi-bd) { mix-blend-mode: normal !important; padding: 10% 16% 9% !important; filter: drop-shadow(0 16px 14px rgba(30, 60, 44, .22)) drop-shadow(0 2px 2px rgba(30, 60, 44, .14)); }
}

/* ============ R3. The season filter of the home page ============ */
.s-spring { --sf-c: var(--season-spring); --sa-hi: #bde37f; --sf-1: #2d5740; --sf-2: #1a3225; --sf-tint: #e7f1de; }
.s-summer { --sf-c: var(--season-summer); --sa-hi: #ffd98a; --sf-1: #66501f; --sf-2: #3d2f11; --sf-tint: #fbf0cd; }
.s-autumn { --sf-c: var(--season-autumn); --sa-hi: #f9bc94; --sf-1: #6a3b23; --sf-2: #3e2214; --sf-tint: #f9e5d4; }
.s-winter { --sf-c: var(--season-winter); --sa-hi: #cbe6f7; --sf-1: #34566f; --sf-2: #1f3445; --sf-tint: #e2edf6; }

.sf { margin-top: 12px; }
.sf-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
.sf-tab { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; margin: 0; padding: 14px 8px 18px; border: 0; background: none; color: var(--ink-2); font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-ico { position: relative; display: grid; place-items: center; width: 92px; height: 92px; }
.sf-ico svg { position: relative; width: 68px; height: 68px; color: var(--ink-3); opacity: .72; transition: color .5s ease, opacity .5s ease; }
/* a soft halo in the colour of the season behind the chosen icon */
.sf-ico::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sf-c) 26%, transparent) 0%, transparent 68%); opacity: 0; transform: scale(.7); transition: opacity .6s ease, transform .7s var(--ease-soft); }
.sf-tab[aria-selected="true"] .sf-ico svg { color: var(--sf-c); opacity: 1; }
.sf-tab[aria-selected="true"] .sf-ico::before { opacity: 1; transform: scale(1); }
.sf-name { margin-top: 2px; font: 700 26px/1.1 var(--font-display), sans-serif; letter-spacing: -.02em; color: var(--green-ink); }
.sf-months { color: var(--ink-3); font-size: 14.5px; line-height: 1.3; }
.sf-tab:not([aria-selected="true"]) .sf-name { opacity: .78; }

/* The chosen icon moves, very quietly and for ever: the sprout sways, the sun turns, the leaf drifts, the snowflake turns. Transform and opacity only. */
@media (prefers-reduced-motion: no-preference) {
  .sf-tab[aria-selected="true"] .sf-ico::before { animation: sf-halo 4.8s ease-in-out .7s infinite; }
  .sf-tab[aria-selected="true"].s-spring .sf-ico svg { transform-origin: 50% 94%; animation: sf-sway 5.4s ease-in-out infinite; }
  .sf-tab[aria-selected="true"].s-summer .sf-ico svg { animation: sf-turn 70s linear infinite; }
  .sf-tab[aria-selected="true"].s-autumn .sf-ico svg { transform-origin: 50% 20%; animation: sf-drift 6.4s ease-in-out infinite; }
  .sf-tab[aria-selected="true"].s-winter .sf-ico svg { animation: sf-turn 36s linear infinite; }
}
@keyframes sf-halo { 0%, 100% { opacity: .55; transform: scale(.93); } 50% { opacity: 1; transform: scale(1.07); } }
@keyframes sf-sway { 0%, 100% { transform: rotate(-3.6deg) scale(1.04); } 50% { transform: rotate(3.6deg) scale(1.04); } }
@keyframes sf-drift { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(6deg) translateY(3px); } }
@keyframes sf-turn { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) { .sf-tab:not([aria-selected="true"]):hover .sf-ico svg { opacity: 1; color: var(--ink-2); } }

/* The stage: the four panels share one grid cell, so the section never changes height while a season is chosen; the chosen one fades in and the one
   that leaves slides a little away to the side it came from (--sf-off is set by ui.js: negative for seasons before the chosen one, positive after). */
.sf-stage { display: grid; margin-top: 12px; }
.sf-panel { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: minmax(240px, 31%) minmax(0, 1fr); align-items: center; gap: 0 26px; padding: 22px 22px 22px 0; border-radius: 30px; overflow: hidden; isolation: isolate; color: #fff;
  background: var(--grain), linear-gradient(180deg, var(--sf-1) 0%, var(--sf-2) 100%); box-shadow: 0 30px 56px -38px color-mix(in srgb, var(--sf-2) 80%, transparent);
  opacity: 0; visibility: hidden; transform: translate3d(var(--sf-off, 0px), 0, 0); transition: opacity .45s var(--ease-soft), transform .65s var(--ease-soft), visibility 0s linear .65s; }
.sf-panel[data-active] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* The photograph of the season covers the whole left part of the panel, from its top to its bottom, and fades into the colour of the panel towards the products. */
.sf-photo { --sf-fade: linear-gradient(90deg, #000 0, #000 34%, rgba(0, 0, 0, 0.98) 39.5%, rgba(0, 0, 0, 0.93) 45%, rgba(0, 0, 0, 0.84) 50.5%, rgba(0, 0, 0, 0.74) 56%, rgba(0, 0, 0, 0.62) 61.5%, rgba(0, 0, 0, 0.5) 67%, rgba(0, 0, 0, 0.38) 72.5%, rgba(0, 0, 0, 0.26) 78%, rgba(0, 0, 0, 0.16) 83.5%, rgba(0, 0, 0, 0.07) 89%, rgba(0, 0, 0, 0.02) 94.5%, transparent 100%); position: absolute; inset: 0 auto 0 0; z-index: -1; width: 60%; margin: 0; }
.sf-photo img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: var(--sf-fade); mask-image: var(--sf-fade); }
.sf-photo::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--sf-2) 96%, transparent) 0%, color-mix(in srgb, var(--sf-2) 78%, transparent) 26%, color-mix(in srgb, var(--sf-2) 28%, transparent) 54%, transparent 78%); -webkit-mask-image: var(--sf-fade); mask-image: var(--sf-fade); }
.sf-text { position: absolute; z-index: 2; left: 28px; bottom: 26px; display: grid; gap: 9px; max-width: min(270px, 26%); }
.sf-goal { margin: 0; font: 700 21px/1.22 var(--font-display), sans-serif; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.sf-meta { display: grid; gap: 5px; margin: 0; color: rgba(255, 255, 255, .95); font-size: 14px; }
.sf-meta span { display: inline-flex; align-items: center; gap: 8px; }
.sf-meta svg.hi { flex: none; width: 18px; height: 18px; stroke-width: 1.6; color: var(--sa-hi); }

/* Four compact cards, two by two. */
.sf-prods { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sf-prods li { margin: 0; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-soft), transform .65s var(--ease-soft); }
.sf-panel[data-active] .sf-prods li { opacity: 1; transform: none; transition-delay: calc(var(--n, 0) * 70ms + 140ms); }
.sf-prods li:nth-child(2) { --n: 1; } .sf-prods li:nth-child(3) { --n: 2; } .sf-prods li:nth-child(4) { --n: 3; }

/* The product card: a warm white sheet; the picture on a pale tint of the season, then name, line, reviews and price. The whole card is the link. */
.sf-card { display: flex; align-items: stretch; gap: 14px; height: 100%; padding: 8px; border-radius: 20px; background: #fffdf8; color: var(--ink); text-decoration: none; box-shadow: 0 14px 24px -20px rgba(29, 58, 44, .5); transition: box-shadow .45s var(--ease-soft); }
.sf-card-pic.fi-pic { flex: none; width: 104px; aspect-ratio: 4 / 5; border-radius: 14px; background: var(--sf-tint); }
@layer fi-pre { .sf-card-pic.fi-pic.is-bottle img:not(.fi-bd) { padding: 6% 14% 5% !important; } }
.sf-card-body { display: grid; flex: 1; min-width: 0; align-content: center; gap: 3px; padding: 2px 6px 2px 0; }
.sf-card-name { color: var(--green-ink); font: 700 17px/1.2 var(--font-display), sans-serif; letter-spacing: -.01em; }
.sf-card-role { color: var(--ink-3); font-size: 13px; line-height: 1.3; }
.sf-card-rate { display: inline-flex; align-items: center; gap: 6px; margin-top: 1px; color: var(--ink-3); font-size: 12.5px; }
.sf-card-rate b { color: var(--green-ink); font-weight: 700; }
.sf-card-price { margin-top: 6px; color: var(--green-ink); font: 700 19px/1.1 var(--font-display), sans-serif; letter-spacing: -.01em; }
.sf-card-price small { display: block; margin-top: 2px; color: var(--ink-3); font: 500 12px/1.35 var(--font-sans), sans-serif; letter-spacing: 0; }
@media (hover: hover) and (pointer: fine) { .sf-card:hover { box-shadow: 0 18px 28px -20px rgba(29, 58, 44, .6); } }
.sf-panel .pg-sz-ai { position: absolute; right: 22px; bottom: 6px; margin: 0; color: rgba(255, 255, 255, .9) !important; font-size: 12px; }

@media (max-width: 1100px) {
  .sf-panel { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 22px; }
  .sf-photo { --sf-fade: linear-gradient(180deg, #000 0, #000 52%, rgba(0, 0, 0, 0.98) 56%, rgba(0, 0, 0, 0.93) 60%, rgba(0, 0, 0, 0.84) 64%, rgba(0, 0, 0, 0.74) 68%, rgba(0, 0, 0, 0.62) 72%, rgba(0, 0, 0, 0.5) 76%, rgba(0, 0, 0, 0.38) 80%, rgba(0, 0, 0, 0.26) 84%, rgba(0, 0, 0, 0.16) 88%, rgba(0, 0, 0, 0.07) 92%, rgba(0, 0, 0, 0.02) 96%, transparent 100%); position: relative; inset: auto; z-index: 0; width: 100%; height: 230px; }
  .sf-text { left: 24px; right: 24px; bottom: 42px; max-width: 520px; }
  .sf-prods { grid-column: 1; margin-top: -20px; padding: 0 20px; position: relative; z-index: 1; }
}
@media (max-width: 720px) {
  .sf-bar { margin-top: 6px; }
  .sf-tab { padding: 10px 2px 14px; }
  .sf-ico { width: 62px; height: 62px; }
  .sf-ico svg { width: 46px; height: 46px; }
  .sf-name { font-size: 17px; }
  .sf-months { display: none; }
  .sf-panel { border-radius: 28px; padding-bottom: 20px; }
  .sf-photo { height: 210px; }
  .sf-goal { font-size: 20px; }
  /* the cards are a row you swipe through, one and a bit at a time, picture over text */
  .sf-prods { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 58%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 16px 8px; scroll-padding-inline: 16px; scrollbar-width: none; }
  .sf-prods::-webkit-scrollbar { display: none; }
  .sf-prods li { scroll-snap-align: start; }
  .sf-card { flex-direction: column; gap: 0; padding: 8px 8px 14px; }
  .sf-card-pic.fi-pic { width: auto; aspect-ratio: 1 / 1; }
  .sf-card-body { padding: 12px 8px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-panel, .sf-prods li, .sf-ico svg, .sf-ico::before { transition: none !important; transform: none !important; }
  .sf-panel { transition: opacity .2s linear !important; }
}

/* ============ R4. The two routes: a photograph set into a light card (rebuilt 30 Oct 2026) ============ */
/* The first version was white type over a photograph under a dark green wash, with large prices on top of it: heavy, and the photographs hardly showed.
   Looked at for the rebuild (Bloomscape's category cards, Huel's goal tiles and shop list, Brightland's product tiles): the photograph in its own colours,
   the words on a light surface under it, one small row per product (name left, price right), one clear arrow. So: a white card, the photograph running to its
   edges and fading into the sheet (31 Oct 2026, Nikola: "a bleed or fade to the right", the route's icon straight on the photograph, no disc behind it),
   then the sheet: title, a few words, a pill that says which season it is, this season's two picks as rows and a last row with the arrow into the shop.
   Two cards side by side, the photograph above the sheet and fading down; on a tablet the photograph stands beside the sheet and fades to the right; on a
   phone the cards are the shared swipe row (data-snap, carousel.js). The fade is a mask on the picture (static; nothing moves). Markup: Front/Blocks/Categories.php routes(). */
.routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 32px; }
.route {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 34px; background: #fff; color: var(--ink-2, #232c26);
  box-shadow: var(--elev-1);
}
.route-photo { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; }
.route-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 40%, rgba(0, 0, 0, 0.98) 44%, rgba(0, 0, 0, 0.93) 48%, rgba(0, 0, 0, 0.84) 52%, rgba(0, 0, 0, 0.74) 56%, rgba(0, 0, 0, 0.62) 60%, rgba(0, 0, 0, 0.5) 64%, rgba(0, 0, 0, 0.38) 68%, rgba(0, 0, 0, 0.26) 72%, rgba(0, 0, 0, 0.16) 76%, rgba(0, 0, 0, 0.07) 80%, rgba(0, 0, 0, 0.02) 84%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0, #000 40%, rgba(0, 0, 0, 0.98) 44%, rgba(0, 0, 0, 0.93) 48%, rgba(0, 0, 0, 0.84) 52%, rgba(0, 0, 0, 0.74) 56%, rgba(0, 0, 0, 0.62) 60%, rgba(0, 0, 0, 0.5) 64%, rgba(0, 0, 0, 0.38) 68%, rgba(0, 0, 0, 0.26) 72%, rgba(0, 0, 0, 0.16) 76%, rgba(0, 0, 0, 0.07) 80%, rgba(0, 0, 0, 0.02) 84%, transparent 88%);
}
.route-granular .route-img { object-position: 50% 64%; }
.route-liquid .route-img { object-position: 50% 45%; filter: saturate(1.15) brightness(1.04); }
/* the route's icon sits in the heading, in front of the title (it was on the photograph in the corner: the owner wanted it where the text is, 31 Oct 2026). Sized in em
   from the title, as tall as its first line, so it stays level with the first line when the title wraps */
.route-body h3 { display: flex; align-items: flex-start; gap: .38em; }
.route-ic { flex: none; display: grid; align-items: center; height: 1.08em; color: var(--green-deep, #2f7a55); --hi-w: 1.6; }
.route-ic svg { display: block; width: .88em; height: .88em; }
/* the sheet starts on the faded foot of the photograph, so the title sits on the picture's last light bit and the two are one surface */
.route-main {
  position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; gap: 22px; margin-top: calc(-1 * clamp(22px, 3vw, 44px));
  padding: 0 clamp(22px, 2.6vw, 32px) 12px;
}
.route-body { display: grid; gap: 10px; }
.route-body h3 { margin: 0; color: var(--green-ink, #1d3a2c); font: 600 clamp(28px, 2.6vw, 36px) / 1.08 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.022em; }
.route-body p { margin: 0; max-width: 40em; color: var(--text-muted); font-size: 16.5px; line-height: 1.55; }
.route-recs { display: grid; gap: 4px; align-content: start; margin-top: auto; }   /* the picks and the arrow row sit at the bottom of the card, so the two cards line up whatever the length of their words */
/* "autumn programme, in season now": a pill with the season's own icon, not a loose line of text */
.route-now {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin: 0 0 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--sand-soft);
  color: var(--loam); font: 600 14px / 1.25 var(--font-sans), sans-serif;
}
.route-now svg { flex: none; width: 19px; height: 19px; color: var(--clay); --hi-w: 1.6; }
.route-items { display: grid; margin: 0; padding: 0; list-style: none; }
.route-items li { margin: 0; }
.ri { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 100px; padding: 12px 4px; border-radius: 18px; color: inherit; text-decoration: none; }
.ri-pic { position: relative; display: block; width: 76px; height: 92px; overflow: hidden; border-radius: 18px; background: radial-gradient(120% 90% at 50% 0%, #fbf5e4 0%, var(--sand-soft) 62%, #ecdfba 100%); }
.ri-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* a bag: the cut-out, with a soft shadow on its tile */
.ri-pic.is-cutout img { inset: 8px 6px 8px; width: calc(100% - 12px); height: calc(100% - 16px); object-fit: contain; filter: drop-shadow(0 8px 6px rgba(43, 30, 21, .26)); }
/* a bottle: its photograph is a crop on grass, shown whole in the tile */
.ri-pic.is-photo img { object-fit: cover; object-position: 50% 38%; }
.ri-body { display: grid; gap: 2px; min-width: 0; }
.ri-name { color: var(--green-ink, #1d3a2c); font: 600 18px / 1.2 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.01em; }
.ri-role { color: var(--text-muted); font-size: 14px; line-height: 1.35; }
.ri-rate { display: inline-flex; align-items: center; gap: 7px; margin-top: 3px; color: var(--text-muted); font-size: 13.5px; }
.ri-rate b { color: var(--ink-2, #232c26); font-weight: 600; }
.ri-price { text-align: right; color: var(--ink-2, #232c26); font: 600 19px / 1.15 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.ri-price small { display: block; margin-top: 3px; color: var(--text-muted); font: 400 12.5px / 1.35 var(--font-sans), sans-serif; letter-spacing: 0; }
/* the last row: where the route leads, with the arrow in a disc */
.route-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; margin-top: auto; padding: 10px 2px 10px 6px;
  color: var(--green-ink, #1d3a2c); font: 600 17px / 1.2 var(--font-sans), sans-serif; text-decoration: none;
}
.route-link svg { flex: none; box-sizing: content-box; width: 18px; height: 18px; padding: 13px; border-radius: 50%; background: var(--green-ink, #1d3a2c); color: #fff; transition: transform var(--dur-base) var(--ease-out); }
.route-recs + .route-link { margin-top: 0; }
@media (hover: hover) and (pointer: fine) {
  .ri:hover { background: color-mix(in srgb, var(--sand-soft) 55%, transparent); }
  .ri-pic.is-cutout img { transition: transform .45s var(--ease-soft); }
  .ri:hover .ri-pic.is-cutout img { transform: translateY(-3px); }
  .route-link:hover svg { transform: translate3d(4px, 0, 0); }
}
.ri:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .ri-pic.is-cutout img, .route-link svg { transition: none; } .ri:hover .ri-pic.is-cutout img, .route-link:hover svg { transform: none; } }
/* a tablet: one card per row, the photograph beside the sheet */
@media (min-width: 721px) and (max-width: 1100px) {
  .routes { grid-template-columns: minmax(0, 1fr); }
  .route { display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 1fr); gap: 0; }
  .route-photo { aspect-ratio: auto; min-height: 100%; }
  /* beside the sheet the photograph fades to the right instead of downwards */
  .route-img {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 44%, rgba(0, 0, 0, 0.98) 48.67%, rgba(0, 0, 0, 0.93) 53.33%, rgba(0, 0, 0, 0.84) 58%, rgba(0, 0, 0, 0.74) 62.67%, rgba(0, 0, 0, 0.62) 67.33%, rgba(0, 0, 0, 0.5) 72%, rgba(0, 0, 0, 0.38) 76.67%, rgba(0, 0, 0, 0.26) 81.33%, rgba(0, 0, 0, 0.16) 86%, rgba(0, 0, 0, 0.07) 90.67%, rgba(0, 0, 0, 0.02) 95.33%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 44%, rgba(0, 0, 0, 0.98) 48.67%, rgba(0, 0, 0, 0.93) 53.33%, rgba(0, 0, 0, 0.84) 58%, rgba(0, 0, 0, 0.74) 62.67%, rgba(0, 0, 0, 0.62) 67.33%, rgba(0, 0, 0, 0.5) 72%, rgba(0, 0, 0, 0.38) 76.67%, rgba(0, 0, 0, 0.26) 81.33%, rgba(0, 0, 0, 0.16) 86%, rgba(0, 0, 0, 0.07) 90.67%, rgba(0, 0, 0, 0.02) 95.33%, transparent 100%);
  }
  .route-main { margin: 0 0 0 calc(-1 * clamp(36px, 7vw, 64px)); padding: 28px 28px 10px 0; }
  .route-granular .route-img { object-position: 50% 70%; }
}
/* a phone: the two cards are a swipe row (the layout of the row itself is round7-mobile.css) */
@media (max-width: 720px) {
  .routes[data-snap] { --snap-w: 90%; --snap-max: 400px; margin-top: 22px; }
  .route { border-radius: 30px; }
  .route-photo { aspect-ratio: 4 / 3; }
  .route-main { gap: 18px; margin-top: -30px; padding: 0 20px 8px; }
  .route-body h3 { font-size: 28px; }
  .route-body p { font-size: 16px; }
  /* the row is narrow here: the price goes under the name, next to the pack, instead of a column of its own */
  .ri { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "pic body" "pic price"; align-items: start; column-gap: 14px; row-gap: 6px; min-height: 92px; }
  .ri-pic { grid-area: pic; align-self: center; width: 64px; height: 80px; border-radius: 16px; }
  .ri-body { grid-area: body; }
  .ri-price { grid-area: price; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; text-align: left; white-space: normal; font-size: 18px; }
  .ri-price small { display: inline; margin: 0; }
  .ri-name { font-size: 17px; }
}

/* ============ R5. "See the results": the same two photographs, side by side, with the heading and the button beside them ============ */
@media (min-width: 981px) {
  .ba-feature .container { display: grid; grid-template-columns: minmax(280px, 34%) minmax(0, 1fr); grid-template-rows: 1fr 1fr; grid-template-areas: "head pairs" "cta pairs"; column-gap: 56px; align-items: start; }
  .ba-feature .section-head { grid-area: head; align-self: end; display: block; margin: 0; }
  .ba-feature .section-head p { margin: 14px 0 0; }
  .ba-feature .ba-pairs { grid-area: pairs; margin: 0; max-width: none; }
  .ba-feature .ba-cta { grid-area: cta; align-self: start; display: flex; justify-content: flex-start; margin: 26px 0 0; text-align: left; }
  .ba-feature .ba-title { margin: 0 0 16px; font-size: 20px; }
  .ba-feature .ba-grid { gap: 14px; }
  .ba-feature .ba-img { aspect-ratio: 4 / 5; }
  .ba-feature .ba-img img { width: 100%; height: 100%; object-fit: cover; }
  .ba-feature .ba-caption { margin-top: 16px; max-width: 62ch; }
}

/* ============ R6. The newsletter field: one outline, not two ============ */
/* The field of the form in the pill had its own square outline (the rule for all newsletter fields) inside the pill that already is the field. The pill
   carries the focus ring; the field inside has nothing of its own. */
@layer fi-pre {
  .join-form.nls-form input, .join-form.nls-form input:focus, .join-form.nls-form input:focus-visible { border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; border-radius: 999px !important; }
}
.join-form.nls-form:focus-within { box-shadow: inset 0 0 0 2px var(--green-deep), 0 0 0 4px rgba(47, 122, 85, .16); }

/* ============ R7. The mark that slides to the chosen tab or link (ui.js slidingMark) ============ */
/* the list keeps the position it has (the shop's line tabs are sticky); ui.js makes a static list relative so the mark can sit inside it */
.fi-mark { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; transition: transform .55s var(--ease-soft), opacity .3s ease; }
.fi-mark-ink { top: auto; bottom: -1px; width: 100px; height: 3px; border-radius: 3px; background: var(--green-ink); transform-origin: 0 50%; transform: translateX(var(--mx, 0px)) scaleX(var(--mw, 0)); }
.fi-mark-pill { width: var(--mw, 0px); height: var(--mh, 0px); border-radius: var(--mr, 14px); background: var(--green-ink); transform: translate(var(--mx, 0px), var(--my, 0px)); }
.has-mark > :is(a, button):not(.fi-mark) { position: relative; z-index: 1; }
@layer fi-pre {
  .shop-line-chips.has-mark .shop-chip::after { content: none !important; }
  .faq-jump.has-mark a.on, .faq-jump.has-mark a[aria-current="true"] { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
}

/* The shop's line tabs stay readable over the cards while they stick to the top. */
/* the sticky row needs a real surface (an older rule makes it transparent with !important, so the toolbar text under it showed through) */
@layer fi-pre {
  .shop-main .shop-line-chips { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* stuck under the header, the tab row gets a frosted surface that melts into the page below it (a mask with an S-curve), not a flat slab with a hard lower edge (31 Oct 2026) */
  .shop-main .shop-line-chips.is-stuck { background: transparent !important; box-shadow: none !important; isolation: isolate; }
  .shop-main .shop-line-chips.is-stuck::before {
    content: ""; position: absolute; inset: 0 0 -26px; z-index: -1; pointer-events: none; background: rgba(244, 247, 240, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, rgba(0, 0, 0, 0.97) 65.8%, rgba(0, 0, 0, 0.9) 69.6%, rgba(0, 0, 0, 0.78) 73.4%, rgba(0, 0, 0, 0.65) 77.2%, rgba(0, 0, 0, 0.5) 81%, rgba(0, 0, 0, 0.35) 84.8%, rgba(0, 0, 0, 0.22) 88.6%, rgba(0, 0, 0, 0.1) 92.4%, rgba(0, 0, 0, 0.03) 96.2%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 62%, rgba(0, 0, 0, 0.97) 65.8%, rgba(0, 0, 0, 0.9) 69.6%, rgba(0, 0, 0, 0.78) 73.4%, rgba(0, 0, 0, 0.65) 77.2%, rgba(0, 0, 0, 0.5) 81%, rgba(0, 0, 0, 0.35) 84.8%, rgba(0, 0, 0, 0.22) 88.6%, rgba(0, 0, 0, 0.1) 92.4%, rgba(0, 0, 0, 0.03) 96.2%, transparent 100%);
  }
}

/* ============ R8. Why us: a hero that fills the screen ============ */
/* A golf fairway at dawn with the greenkeeper's mower (Keith Tanner, Unsplash; docs/ui-ux/CREDITS.md): the world the formulas come from. The title sits low on
   the left over a dark green fall-off, the way a film title does; one quiet rise when the page opens, no moving picture. */
.wu-hero-photo { position: relative; display: flex; align-items: flex-end; min-height: clamp(560px, 80vh, 820px); margin: 0; padding: 0; overflow: hidden; isolation: isolate; color: #fff; background: #1c3020; border-radius: 0 0 44px 44px; }
.wu-hero-photo picture { position: absolute; inset: 0; z-index: -2; display: block; }
.wu-hero-bg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.wu-hero-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 28, 18, 0.5) 0, rgba(14, 28, 18, 0.47) 3.71%, rgba(14, 28, 18, 0.4) 7.43%, rgba(14, 28, 18, 0.3) 11.14%, rgba(14, 28, 18, 0.2) 14.86%, rgba(14, 28, 18, 0.1) 18.57%, rgba(14, 28, 18, 0.03) 22.29%, rgba(14, 28, 18, 0) 26%), linear-gradient(0deg, rgba(14, 28, 18, 0.86) 0, rgba(14, 28, 18, 0.84) 5.17%, rgba(14, 28, 18, 0.8) 10.33%, rgba(14, 28, 18, 0.73) 15.5%, rgba(14, 28, 18, 0.64) 20.67%, rgba(14, 28, 18, 0.54) 25.83%, rgba(14, 28, 18, 0.43) 31%, rgba(14, 28, 18, 0.32) 36.17%, rgba(14, 28, 18, 0.22) 41.33%, rgba(14, 28, 18, 0.13) 46.5%, rgba(14, 28, 18, 0.06) 51.67%, rgba(14, 28, 18, 0.02) 56.83%, rgba(14, 28, 18, 0) 62%), linear-gradient(90deg, rgba(14, 28, 18, 0.5) 0, rgba(14, 28, 18, 0.49) 4.67%, rgba(14, 28, 18, 0.46) 9.33%, rgba(14, 28, 18, 0.42) 14%, rgba(14, 28, 18, 0.37) 18.67%, rgba(14, 28, 18, 0.31) 23.33%, rgba(14, 28, 18, 0.25) 28%, rgba(14, 28, 18, 0.19) 32.67%, rgba(14, 28, 18, 0.13) 37.33%, rgba(14, 28, 18, 0.08) 42%, rgba(14, 28, 18, 0.04) 46.67%, rgba(14, 28, 18, 0.01) 51.33%, rgba(14, 28, 18, 0) 56%); }
.wu-hero-photo .container { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; width: 100%; min-height: inherit; padding-top: 28px; padding-bottom: clamp(40px, 7vw, 88px); }
.wu-hero-photo .breadcrumbs, .wu-hero-photo .breadcrumbs a, .wu-hero-photo .breadcrumbs .sep { color: rgba(255, 255, 255, .92); }
.wu-hero-photo .breadcrumbs .current { color: #fff; }
.wu-hero-copy { display: grid; gap: 22px; max-width: 980px; }
.wu-hero-photo h1 { margin: 0; color: #fff; font: 700 clamp(44px, 7.2vw, 108px)/.98 var(--font-display), sans-serif; letter-spacing: -.035em; max-width: 14ch; text-wrap: balance; }
.wu-hero-photo .lede { margin: 0; max-width: 54ch; color: rgba(255, 255, 255, .94); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; }
.wu-hero-photo .pg-facts { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .wu-hero-photo .wu-hero-copy > * { animation: wu-rise 1s var(--ease-soft) both; }
  .wu-hero-photo .wu-hero-copy > :nth-child(2) { animation-delay: .14s; }
  .wu-hero-photo .wu-hero-copy > :nth-child(3) { animation-delay: .26s; }
}
@keyframes wu-rise { from { opacity: 0; transform: translateY(22px); } }
@media (max-width: 700px) {
  .wu-hero-photo { min-height: min(86svh, 720px); border-radius: 0 0 30px 30px; }
  .wu-hero-bg { object-position: 56% 60%; }
}
@layer fi-pre {
  .wu-hero-photo h1, .wu-hero-photo h1 .accent { color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; }
  .wu-hero-photo .lede, .wu-hero-photo .breadcrumbs, .wu-hero-photo .breadcrumbs a, .wu-hero-photo .breadcrumbs .sep { color: rgba(255, 255, 255, .94) !important; }
  .wu-hero-photo .breadcrumbs .current { color: #fff !important; }
}

/* ============ R9. The promise strip under the product hero: seamless ============ */
/* No card, no gradient, no ring, no hairlines: the five promises sit straight on the page, separated by space only. */
.ptb-list { background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0; padding-inline: 0; }
.ptb-list li, .ptb-list li + li, .ptb-list li:nth-child(n + 4) { border: 0 !important; }
@media (min-width: 1180px) { .ptb-list { padding-block: 8px; } .ptb-list li, .ptb-list li:nth-child(n + 4) { padding: 4px 22px 4px 0; } .ptb-list li:not(:first-child) { padding-left: 22px; } }
@media (max-width: 760px) { .ptb-list li { padding: 12px 0; } }

/* ============ R10. The hazard cue on the cards: an exclamation in a diamond (the shape of a CLP pictogram), not the triangle character ============ */
.shop-card-add.is-hazard svg.hi { width: 24px; height: 24px; stroke-width: 1.55; color: #a3162a; }

/* ============ R11. "Recommended partners" on the product page: the words, no pill, a larger icon ============ */
@layer fi-pre {
  .cmb-tag { height: auto !important; padding: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; gap: 10px !important; color: var(--green-ink) !important; font: 600 17px/1.2 var(--font-display), sans-serif !important; letter-spacing: -.005em !important; }
  .cmb-tag svg.ph { width: 28px !important; height: 28px !important; --ph-tone: var(--moss); color: var(--green-deep) !important; }
}