/* ============ Round 12: fewer lines (31 Oct 2026, owner: "across all pages reduce the usage of lines, it looks AI generic") ============
   A hairline round every card, a rule between every row, an outline on every chip and badge, a ring on every button: that is the look of a generated page. What the
   good shops do instead (Bloomscape, Brightland, The Sill): surfaces separated by space and by a soft shadow or a tonal fill, and a line only where it carries meaning
   (a form field, the chosen item, a focus ring, a chart axis, the steps of a timeline). So:
   1  the ring of every card goes (the cards keep their soft shadow, a little deeper to make up for it)
   2  rules between rows and sections go (space does the separating)
   3  outlined chips, tags and badges become tonal pills (a pale fill, no outline)
   4  boxes outlined with a 1px border become plain surfaces
   5  secondary buttons and text links lose their ring
   What stays: the borders of form fields and the quantity stepper (WCAG 1.4.11), the ring of the chosen variant and thumbnail, focus rings, the soil chart, the cart's
   progress line, the timeline of the how-to steps, checkbox outlines.
   Measured with a script that counts visible borders, rings, rules and thin pseudo-lines on ten pages (docs/ui-ux/lines-audit.md). */

:root {
  --card-line: transparent;        /* the ring of cards (box-shadow: 0 0 0 1px var(--card-line), ...) */
  --card-hover-line: transparent;
  --chip-line: transparent;        /* the outline of filter chips and tabs */
  --elev-1: 0 1px 2px rgba(30, 60, 44, .06), 0 10px 26px -12px rgba(30, 60, 44, .2);
}

@layer fi-pre {
  /* ---- 2. rules between rows and sections ---- */
  .ssb-group, .ed-foot, .fp-buy, .ed-status-links, .yr-prods, .pdp-calc-out, .pc-specs { border-top: 0 !important; border-bottom: 0 !important; }
  .pdp-faq-item, .pdp-faq-item.open { border-color: transparent !important; }

  /* ---- 3. chips, tags and badges: a pale fill instead of an outline ---- */
  :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, .shop-line-chips .shop-chip, .ssb-seasons .ssb-season-pill) {
    background: rgba(75, 52, 37, .06) !important; box-shadow: none !important;
  }
  a.chip, .chip { border: 0 !important; background: rgba(75, 52, 37, .07) !important; box-shadow: none !important; }
  .ba-tag, .ph-tag, .ed-chip, .soon-chip, .stock-pill, .pdp-linetag-npk, .pdp-gallery-flag, .pdp-gallery-stamp, .cmb-dose, .pay-badge { border: 0 !important; box-shadow: none !important; }
  .ba-tag, .ph-tag, .cmb-dose { background: rgba(255, 255, 255, .86) !important; }
  .ph-tag, .cmb-dose { background: rgba(75, 52, 37, .07) !important; }
  .pay-badge { background: rgba(75, 52, 37, .06) !important; }
  .ai-label, .ai-label-card { box-shadow: none !important; }

  /* ---- 4. boxes outlined with a 1px border: plain surfaces ---- */
  .pdp-maker, .pdp-guarantee, .cmb-card.rv, .cart-empty { border: 0 !important; box-shadow: var(--elev-1) !important; }
  .shop-on-request { border: 0 !important; background: rgba(244, 234, 210, .55) !important; }
  .pdp-calc, .lr-sample { box-shadow: var(--elev-1) !important; }
  .pdp-dl.alt { border-color: transparent !important; background: rgba(47, 122, 85, .09) !important; }

  /* ---- 5. buttons and links: no ring ---- */
  .btn-secondary, .btn-light, .text-link { box-shadow: 0 2px 8px -4px rgba(30, 60, 44, .24) !important; }
  .lang-dd-list { box-shadow: 0 18px 40px -18px rgba(30, 60, 44, .38), 0 2px 6px rgba(30, 60, 44, .06) !important; }
  .nav-dd-trigger.active { box-shadow: none !important; }

  /* glass panels: no inner highlight line on top */
  .hx-season { box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .5) !important; }
  .hx-panel { box-shadow: 0 30px 60px -34px rgba(30, 60, 44, .4) !important; }
}

/* ---- 6. no hard edge where a section's colour stops (owner, 31 Oct 2026: "this is too sharp cut, it looks ugly", the product page above the promise strip) ----
   The page heads of the product, FAQ, about and results pages were slabs of flat paper colour laid over the page's soft background: where they ended, the
   background's tint came back in one straight line. They are now see-through, so the page's own background runs on without a seam.
   The tinted bands (reviews, quiz banner, cart suggestions, soil steps, feature bands, principles, lawns) faded in and out along a straight ramp; a straight ramp
   shows a faint line where it meets the solid colour (a Mach band). They now fade along an S-curve (smoothstep), like the sticky tab row of the shop. The fade
   stays inside each band's top and bottom padding, so no text or card is faded. */
@layer fi-pre {
  .pdp-hero, .faq-head, .wu-hero:not(.wu-hero-photo), section.page-head { background: transparent !important; }
}
:is(.reviews, .quiz-banner, .cart-cross, .soil, .soil-section.dark, .wu-crf, .pg-principles, .lg-sec),
.lr + .fp-sec::before, .soil-section.alt.pg-soil-faq::before {
  --seam: min(var(--sec, 88px), 150px);
  --seam-mask: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .03) calc(var(--seam) * .1), rgba(0, 0, 0, .1) calc(var(--seam) * .2), rgba(0, 0, 0, .22) calc(var(--seam) * .3), rgba(0, 0, 0, .35) calc(var(--seam) * .4), rgba(0, 0, 0, .5) calc(var(--seam) * .5), rgba(0, 0, 0, .65) calc(var(--seam) * .6), rgba(0, 0, 0, .78) calc(var(--seam) * .7), rgba(0, 0, 0, .9) calc(var(--seam) * .8), rgba(0, 0, 0, .97) calc(var(--seam) * .9), #000 var(--seam),
    #000 calc(100% - var(--seam)), rgba(0, 0, 0, .97) calc(100% - var(--seam) * .9), rgba(0, 0, 0, .9) calc(100% - var(--seam) * .8), rgba(0, 0, 0, .78) calc(100% - var(--seam) * .7), rgba(0, 0, 0, .65) calc(100% - var(--seam) * .6), rgba(0, 0, 0, .5) calc(100% - var(--seam) * .5), rgba(0, 0, 0, .35) calc(100% - var(--seam) * .4), rgba(0, 0, 0, .22) calc(100% - var(--seam) * .3), rgba(0, 0, 0, .1) calc(100% - var(--seam) * .2), rgba(0, 0, 0, .03) calc(100% - var(--seam) * .1), transparent 100%);
  -webkit-mask-image: var(--seam-mask); mask-image: var(--seam-mask);
}