/* Round 7 (29 Oct 2026), mobile worker: swipe rows and a tighter phone layout. Everything here sits inside max-width media queries, so the
   desktop look is untouched. Loaded after design.css (Layout::roundStyles). Plain rules; only the ones that must beat an older `!important`
   go in `@layer fi-pre`.
   Sections: 1 the swipe row (data-snap) and its indicator · 2 page by page. */

/* ============ 1. The swipe row ============
   Markup contract (docs: carousel.js): any container with `data-snap` is a row you swipe sideways on a phone. Its children are the cards.
   Optional: data-snap-size="sm" (two cards and a bit), data-snap-flush (the row sits inside a padded panel: no bleed to the screen edge),
   data-snap-tone="light" (indicator for dark photo panels), data-snap="dots|bar|auto" (carousel.js picks the indicator).
   The space for the indicator is reserved here (margin-bottom), so it appears without moving anything. */
:root { --snap-ink: #1d3a2c; --snap-off: rgba(30, 60, 44, .2); --snap-r: 20px; --snap-up: 4px; --snap-step: 16px; }
.fi-snap-ind { display: none; }

@media (max-width: 720px) {
  [data-snap] {
    --snap-pad: var(--gutter, 16px);
    --snap-bleed: var(--snap-pad);
    --snap-gap: 12px;
    --snap-pt: 8px;
    --snap-pb: 14px;
    --snap-w: 86%;
    --snap-max: 340px;
    display: grid;
    grid-template-columns: none;
    grid-template-rows: repeat(var(--snap-rows, 1), auto);
    grid-auto-flow: column;
    grid-auto-columns: min(var(--snap-w), var(--snap-max));
    gap: var(--snap-gap);
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--snap-pad);
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    width: auto;
    max-width: none;
  }
  /* older rules (site.css) set the grid of these containers with !important: the layout of a swipe row has to win over them */
  @layer fi-pre {
    [data-snap] {
      display: grid !important;
      grid-template-columns: none !important;
      grid-template-rows: repeat(var(--snap-rows, 1), auto) !important;
      grid-auto-flow: column !important;
      grid-auto-columns: min(var(--snap-w), var(--snap-max)) !important;
      gap: var(--snap-gap) !important;
      align-items: stretch !important;
      overflow-x: auto !important;
      /* A row that scrolls sideways also clips sideways AND downwards: a card's shadow that reached further than the 14 px of bottom padding ended in a hard
         straight edge (the owner saw it under the season cards of the calendar). The room under the cards is now the padding plus the 20 px that used to be
         the bottom margin (and the margin is 0), so the page does not get a pixel longer, the indicator keeps its place, and a shadow has 34 px to fade out. */
      padding: var(--snap-pt) var(--snap-pad) calc(var(--snap-pb) + var(--snap-r)) !important;
      margin: calc(-1 * var(--snap-pt)) calc(-1 * var(--snap-bleed)) 0 !important;
    }
    [data-snap]:has(> :only-child) { grid-auto-columns: 100% !important; }
  }
  /* the fade-up of site.js (".rv") waits for a card to come into view with a delay by its place in the row: a card swiped in would arrive blank */
  @layer fi-pre {
    .motion [data-snap] > .rv, .motion [data-snap] > .rv.in { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; transition-duration: 0s !important; }
  }
  /* the fallback for WebKit versions that leave the end padding out of the scrollable width (see carousel.js endFix) */
  [data-snap-fix] > :last-child { position: relative; }
  .fi-snap-end { position: absolute; left: 100%; top: 0; width: var(--snap-pad, 16px); height: 1px; pointer-events: none; }
  [data-snap]::-webkit-scrollbar { display: none; }
  [data-snap] > * { min-width: 0; scroll-snap-align: start; }
  [data-snap] > :last-child { scroll-snap-align: end; }
  [data-snap-size="sm"] { --snap-w: 46%; --snap-max: 220px; }
  [data-snap-flush] { --snap-pad: 0px; }

  /* the indicator: dots (the active one is a pill that glides along) or a thin track with a thumb */
  .fi-snap-ind {
    --on: var(--snap-ink);
    --off: var(--snap-off);
    display: block;
    position: relative;
    height: 6px;
    margin: calc(-1 * var(--snap-r) - var(--snap-up) - var(--snap-pg, 0px)) auto calc(var(--snap-r) - 6px + var(--snap-up));
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .fi-snap-ind[hidden] { display: none; }
  .fi-snap-ind[data-tone="light"] { --on: #fff; --off: rgba(255, 255, 255, .42); }
  .fi-snap-ind[data-kind="dots"] { display: flex; gap: calc(var(--snap-step) - 6px); width: max-content; }
  .fi-snap-ind[data-kind="dots"][hidden] { display: none; }
  .fi-snap-ind[data-kind="dots"] > i { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 3px; background: var(--off); }
  .fi-snap-ind[data-kind="dots"] > b { position: absolute; left: -4px; top: 0; width: 14px; height: 6px; border-radius: 3px; background: var(--on); will-change: transform; }
  .fi-snap-ind[data-kind="bar"] { width: 72px; }
  .fi-snap-ind[data-kind="bar"] > i { position: absolute; left: 0; right: 0; top: 1.5px; height: 3px; border-radius: 2px; background: var(--off); }
  .fi-snap-ind[data-kind="bar"] > b { position: absolute; left: 0; top: 1.5px; height: 3px; width: 18px; border-radius: 2px; background: var(--on); will-change: transform; }
}
@media (forced-colors: active) {
  .fi-snap-ind > i { background: GrayText; }
  .fi-snap-ind > b { background: Highlight; }
}

/* ============ 2. Page by page ============ */
@media (max-width: 720px) {
  /* home: the season panel (round5-home.css) keeps its own geometry: the row sits inside the panel, cards 58% wide, light dots on the dark photo */
  .sf-prods[data-snap] { --snap-w: 58%; --snap-bleed: 0px; --snap-pad: 16px; --snap-pt: 0px; }
  .sf-panel .fi-snap-ind { --on: #fff; --off: rgba(255, 255, 255, .42); }
}

/* ---- product page ---- */
@media (max-width: 720px) {
  /* the trust band: five facts as a row of short columns instead of five stacked rows */
  .ptb-list[data-snap] { --snap-w: 74%; --snap-gap: 0px; --snap-pt: 4px; }
  .ptb-list[data-snap] > li { padding: 8px 16px 8px 14px; gap: 12px; border-top: 0; }
  .ptb-list[data-snap] > li + li { border-left: 1px solid rgba(75, 52, 37, .12); }

  /* the partners to combine with: horizontal cards one after another */
  .cmb-grid[data-snap] { --snap-w: 88%; }

  /* the season planner and the other swipe rows of the product page */
  .sp-grid[data-snap] { --snap-w: 78%; }
  .pdp-related-grid[data-snap] { --snap-w: 80%; }

  /* the label steps: a row of steps (no vertical line), the next step peeks in */
  .pdp-label-steps[data-snap] { --snap-w: 80%; --snap-gap: 16px; --snap-pt: 6px; --snap-pad: 16px; --snap-bleed: 16px; }
  @layer fi-pre {
    .pdp-stepper[data-snap] .pdp-label-step { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; padding: 0 !important; align-content: start; }
    .pdp-stepper[data-snap] .pdp-label-step::before { display: none !important; }
    .pdp-stepper[data-snap] h4 { margin: 0 0 4px !important; }
  }
  .pdp-stepper[data-snap] .num { box-shadow: none; }

  /* reviews: the summary as two columns, the cards as a row, the "all reviews" link as the last, narrow tile */
  .pdp-rev-summary { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: center; padding: 16px !important; }
  .pdp-rev-summary > .pdp-rev-big { grid-column: 1; grid-row: 1; }
  .pdp-rev-summary > .pdp-rev-stars { grid-column: 1; grid-row: 2; }
  .pdp-rev-summary > .pdp-rev-count { grid-column: 1 / -1; grid-row: 3; flex-wrap: wrap; row-gap: 4px; margin-top: 6px; }
  .pdp-rev-summary > .pdp-rev-bars { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .pdp-rev-summary > .pdp-rev-write { grid-column: 1 / -1; grid-row: 4; margin-top: 8px; }
  .pdp-rev-list[data-snap] { --snap-w: 84%; }
  .pdp-rev-list[data-snap] > .rv-see-all { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 0 20px; min-width: 150px; }
  .pdp-rev-list[data-snap]:has(> .rv-see-all) { grid-auto-columns: min(var(--snap-w), var(--snap-max)) !important; }

  /* the safety notes stay visible and complete, only tighter */
  @layer fi-pre {
    .pdp-safety { gap: 8px !important; }
    .pdp-safety-item { padding: 12px 14px !important; gap: 12px !important; }
    .pdp-safety-item h4 { margin: 0 0 2px !important; font-size: 16px !important; }
    .pdp-safety-item p { font-size: 14.5px !important; line-height: 1.5 !important; }
  }

  /* "Not sure what your lawn needs?": the two help cards as a row */
  .ph-grid[data-snap] { --snap-w: 86%; }
}

/* ---- soil page, why-us page, results, reviews ---- */
@media (max-width: 720px) {
  /* every child of a swipe row is one column: a card that spans two on the desktop must not here (grid-row stays: the product cards
     span seven rows and use a subgrid for them) */
  [data-snap] > * { grid-column: auto !important; }

  /* the four soil steps (white cards on the dark band) */
  .soil-steps[data-snap] { --snap-w: 82%; }
  .soil-steps[data-snap] > .soil-step { height: auto; }

  /* why us: principles, technology points, timeline */
  .wu-pillars[data-snap] { --snap-w: 84%; }
  .crf-points[data-snap] { --snap-w: 84%; --snap-gap: 12px; }
  .wu-timeline[data-snap] { --snap-w: 66%; --snap-gap: 10px; }
  .wu-timeline[data-snap]::before, .wu-timeline[data-snap]::after { display: none !important; }

  /* results: the before/after pairs and the photo gallery */
  .ba-pairs[data-snap] { --snap-w: 90%; }
  .lg-grid[data-snap] { --snap-w: 54%; --snap-max: 240px; }

  /* the reviews page: two reviews on top of each other per column */
  .rv-masonry[data-snap] { --snap-rows: 2; --snap-w: 86%; --snap-gap: 12px; }
  .rv-masonry[data-snap] > .rv-item { margin: 0 !important; break-inside: auto; }
}

/* ---- why us: the comparison as one card per column (the table has only the first column on a phone) ---- */
.compare-cards { display: none; }
@media (max-width: 720px) {
  @layer fi-pre { .pg-compare .compare-table { display: none !important; } }
  .compare-cards[data-snap] { --snap-w: 80%; --snap-gap: 12px; }
  .cc-card { background: #fff; border-radius: var(--r-card, 20px); padding: 16px 16px 8px; box-shadow: var(--elev-1); align-self: start; }
  .cc-card.fi { box-shadow: 0 0 0 2px var(--green-deep, #2a7050), var(--elev-1); }
  .cc-head { margin: 0 0 6px; font: 600 17px/1.25 var(--font-display, inherit); color: var(--green-ink, #1d3a2c); display: flex; align-items: center; gap: 8px; }
  .cc-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-deep, #2a7050); flex: none; }
  .cc-rows { margin: 0; }
  .cc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(30, 60, 44, .09); }
  .cc-row:first-child { border-top: 0; }
  .cc-row dt { font-size: 13.5px; line-height: 1.3; color: var(--ink-2, #3a453e); margin: 0; }
  .cc-row dd { margin: 0; }
  .cc-val { justify-self: end; text-align: right; font-size: 14px; line-height: 1.3; font-weight: 600; padding: 4px 10px; border-radius: 8px; }
  .cc-val.yes { color: var(--green-ink, #1d3a2c); background: #e2eedd; }
  .cc-val.partial { color: #6f4a14; background: #f3ead2; }
  .cc-val.no { color: #8f2f21; background: #f6e0d8; }
}

/* ---- soil page ----
   The readings of the sample report stay a vertical list: a swipe across them already moves to the next group of readings (soil.js, tested in
   soil-e2e.mjs), so they must not be a second sideways scroller. They are only a little tighter. */
@media (max-width: 720px) {
  .lab-row { padding-block: 13px; gap: 8px 16px; }
  .lab-panel-head { padding-top: 8px; }
}

/* ============ 3. Vertical rhythm on phones ============
   The sections of every page sat 88 px apart (44 px under one and 44 px above the next); the cards inside them had big paddings and the
   photographs were taller than they need to be. Nothing is removed; everything just sits closer. */
@media (max-width: 760px) {
  :root { --sec: 32px; --sec-head: 16px; }
  /* the featured product card (home, soil page): a shorter picture */
  .fp-card .fp-media { max-height: 210px; overflow: hidden; }
  .fp-card .fp-media img { width: 100%; height: 210px; object-fit: cover; }
  .fp-facts { gap: 6px !important; }
  /* the soil page: the photo beside "not just numbers, a plan"; the home page: the soil photo */
  .lab-with-pic img { height: 200px; object-fit: cover; }
  .soil-figure img { height: 210px; object-fit: cover; }
  /* the folded product sections ("Read more"): a shorter taste of the text before the button */
  .pdp-fold:not(.is-open) .pdp-fold-body { max-height: 200px; }
}

/* ---- contact ---- */
@media (max-width: 720px) {
  .c-channels[data-snap] { --snap-w: 88%; }
  .c-channels[data-snap] > .c-channel { align-self: stretch; }
  .c-hours-list .row { min-height: 0; padding-block: 8px; }
}