/* Round 6, the cart page and the head of the cart/checkout/thank-you pages (29 Oct 2026). Presentation only.
   Loaded after design.css by Layout::roundStyles(). Cascade: a plain rule here beats site.css' plain rules; the old `!important` ones
   (site.css keeps them inside @layer components) are beaten only from `@layer fi-pre`, so every `!important` below sits in a fi-pre block.

   1. The steps (Cart > Delivery > Payment > Confirmation): one hairline through four markers, no pill, no dashed connectors.
      Markup (Front/Cart/CartHead.php and js/thank-you.js print the same): ol#cart-steps[data-step] > li.cart-step-item > .cart-step
      (.num .lbl [.sr-only] [.of]) with a li.cart-step-line between them that is hidden here.
   2. The list of lines: no boxed cards; a picture, a quiet text block and the price on one grid, hairlines between the lines.
   3. The recommended card of the soil analysis and the hazard cue of the recommendation button (.cx-up-rec, .cx-up-hz).
   Notes and sources: side-session-notes/round6/cart/NOTES.md. */

:root {
  --st-ink: var(--green-ink, #1d3a2c);
  --st-accent: var(--green-deep, #2f7a55);
  --st-mute: var(--text-muted, #5a645d);          /* 5.1:1 on the page */
  --st-ring: #7c877f;                             /* an upcoming marker's ring: 3.5:1 on the page (WCAG 1.4.11) */
  --st-bg: #fff;
  --st-track: rgba(29, 58, 44, .2);
  --st-hair: rgba(29, 58, 44, .14);               /* the hairlines between lines of the cart */
  --st-check: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%23fff%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%222.6%22 d=%22m5 14l3.5 3.5L19 6.5%22/%3E%3C/svg%3E");
}

/* ============ 1. The steps ============ */

/* The old pill, its dashed connectors and its per-step fills are switched off (their rules are !important). */
@layer fi-pre {
  ol#cart-steps.cart-steps {
    display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; padding: 0 !important;
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  ol#cart-steps.cart-steps > li.cart-step-line { display: none !important; }
  ol#cart-steps.cart-steps .cart-step {
    display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important;
    gap: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: none !important; color: var(--st-mute) !important; font-size: 14px !important; text-align: left;
  }
  ol#cart-steps.cart-steps .cart-step.active { background: none !important; color: var(--st-ink) !important; }
  ol#cart-steps.cart-steps .cart-step.done { background: none !important; color: var(--st-ink) !important; }
  ol#cart-steps.cart-steps .cart-step .num { display: none !important; }
  ol#cart-steps.cart-steps .cart-step .lbl { display: block !important; }
  ol#cart-steps.cart-steps .cart-step.done .lbl::before { display: none !important; }
  @media (hover: hover) {
    ol#cart-steps.cart-steps a.cart-step:hover, ol#cart-steps.cart-steps button.cart-step:hover { background: none !important; }
  }
}

ol#cart-steps.cart-steps {
  --p: 0; --p0: 0;                                 /* how far the line is filled now and how far it was on the page before */
  position: relative; isolation: isolate; max-width: 600px; margin: 30px 0 0 5px; overflow: visible; list-style: none;   /* 5 px in: the ring of the current step then lines up with the title */
}
ol#cart-steps[data-step="2"] { --p: .3333; --p0: 0; }
ol#cart-steps[data-step="3"] { --p: .6667; --p0: .3333; }
ol#cart-steps[data-step="4"] { --p: 1; --p0: .6667; }
ol#cart-steps > li.cart-step-item { display: block; flex: none; min-width: 0; }

/* The hairline runs through the middle of the markers (a marker is 16 px: its centre is 8 px from the top and from the column's left edge,
   the last marker's centre is 25% of the width from the right edge minus 8 px); the fill is the same line, thicker, scaled from the left. */
ol#cart-steps::before, ol#cart-steps::after {
  content: ""; position: absolute; z-index: 0; top: 8px; left: 8px; right: calc(25% - 8px); height: 1px; pointer-events: none;
  background: var(--st-track); transform: translateY(-50%);
}
ol#cart-steps::after {
  height: 2px; background: var(--st-accent); transform-origin: 0 50%; transform: translateY(-50%) scaleX(var(--p));
  animation: fi-step-fill .9s var(--ease-soft, cubic-bezier(.22, .61, .36, 1)) .15s backwards;
}
@keyframes fi-step-fill {
  from { transform: translateY(-50%) scaleX(var(--p0)); }
  to { transform: translateY(-50%) scaleX(var(--p)); }
}

/* The markers are drawn by .cart-step::before (the digit in span.num stays in the markup and is not shown): upcoming = an empty ring, done = a
   filled disc with a thin white check, current = a filled disc inside a larger ring (two opaque box-shadow rings, so the hairline does not show
   through the gap and the layout never changes). The 16 px box keeps the line on the centres whatever the state. */
ol#cart-steps .cart-step::before {
  content: ""; position: relative; z-index: 1; box-sizing: border-box; flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--st-bg); box-shadow: inset 0 0 0 1.5px var(--st-ring);
}
ol#cart-steps .cart-step.done::before { background: var(--st-check) center / 10px no-repeat, var(--st-accent); box-shadow: none; }
ol#cart-steps .cart-step.active::before { background: var(--st-accent); box-shadow: 0 0 0 3.5px var(--st-bg), 0 0 0 5px var(--st-accent); }
/* Arriving at a later step: the line draws up to it, then the marker settles (an answer to the button you pressed, never a loop). */
ol#cart-steps:is([data-step="2"], [data-step="3"], [data-step="4"]) .cart-step.active::before {
  animation: fi-step-ring .5s var(--ease-soft, cubic-bezier(.22, .61, .36, 1)) .7s backwards;
}
@keyframes fi-step-ring { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* The labels: always under their marker on a screen that is wide enough; the current one in ink and bold, the others muted. */
ol#cart-steps .cart-step .lbl {
  margin: 13px 0 0; font: 500 14px/1.3 var(--font-sans, sans-serif); letter-spacing: 0; white-space: nowrap; color: inherit;
}
ol#cart-steps .cart-step.active .lbl { font-weight: 700; }
ol#cart-steps .cart-step.done .lbl { color: var(--st-ink); }
ol#cart-steps a.cart-step, ol#cart-steps button.cart-step { position: relative; width: fit-content; cursor: pointer; text-decoration: none; font: inherit; appearance: none; -webkit-appearance: none; }
/* The steps you can go back to are 44 px or more in both directions: on a screen with labels the label and the marker make the box; on a phone
   (only the marker is left) the padding does, and the negative margin keeps the marker where it is. The caption that is positioned against the
   list belongs to the current step, which is never a link or a button. */
@media (hover: hover) {
  ol#cart-steps a.cart-step:hover .lbl, ol#cart-steps button.cart-step:hover .lbl { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}
/* keyboard focus: the site's one focus ring (refresh.css) draws around the marker and the label */

/* "Step 2 of 4": read out on every screen, shown on phones only. */
ol#cart-steps .cart-step :is(.of, .sr-only) { display: block; }   /* site.css hides every span after the first under 380 px */
ol#cart-steps .cart-step .of {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Phones: four markers across the whole width, the current label and "Step 2 of 4" on one line under the hairline. The two !important
   declarations that must win over the base ones above sit in the fi-pre layer again, after them. */
@layer fi-pre {
  @media (max-width: 599px) {
    ol#cart-steps.cart-steps[data-step] { grid-template-columns: repeat(3, minmax(0, 1fr)) 16px !important; padding-bottom: 38px !important; }
    ol#cart-steps.cart-steps .cart-step:not(.active) .lbl { display: none !important; }
    ol#cart-steps.cart-steps a.cart-step, ol#cart-steps.cart-steps button.cart-step { padding: 14px !important; margin: -14px !important; }
  }
}
@media (max-width: 599px) {
  ol#cart-steps.cart-steps { margin: 26px 5px 0; max-width: none; }
  ol#cart-steps::before, ol#cart-steps::after { right: 8px; }
  ol#cart-steps .cart-step.active .lbl { position: absolute; left: -5px; top: 40px; margin: 0; font-size: 15px; }
  ol#cart-steps .cart-step.active .of {
    position: absolute; right: -5px; top: 41px; left: auto; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none;
    font: 500 13px/1.3 var(--font-sans, sans-serif); color: var(--st-mute);
  }
}
@media (prefers-reduced-motion: reduce) {
  ol#cart-steps::after, ol#cart-steps .cart-step.active::before { animation: none !important; }
}

/* ============ 2. The lines of the cart ============
   Before: a white box (border, 10 px radius, overflow hidden) with a white card inside for every line (24 px radius, shadow, 14 px padding) and
   a picture in a tile in a frame: three edges where the eye expects one. Now the lines sit on the page itself, separated by hairlines; the
   picture has no frame of its own; the name, the quiet facts, the quantity and the price share one grid. */

@layer fi-pre {
  .cart-items { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .cart-items-head { background: none !important; border: 0 !important; border-bottom: 1px solid var(--st-hair) !important; padding: 0 0 14px !important; }
  .cart-items-head h2 { font-size: 20px !important; }

  .cart-item:not(.cf-skeleton-item) {
    background: none !important; border: 0 !important; border-bottom: 1px solid var(--st-hair) !important; border-radius: 0 !important; box-shadow: none !important;
    margin: 0 !important; padding: 26px 0 !important; column-gap: 28px !important; row-gap: 0 !important;
    grid-template-columns: 112px minmax(0, 1fr) auto !important;
  }
  .cart-item.cf-skeleton-item { background: none !important; border: 0 !important; border-bottom: 1px solid var(--st-hair) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 26px 0 !important; }
  .cart-item .cart-item-img { width: 112px !important; height: auto !important; aspect-ratio: 4 / 5; }
  .cart-item .cart-item-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; background: none !important; border-radius: 0 !important; }
  .cart-item .cart-item-prices { grid-area: price !important; }
  .cart-item .cart-qty { background: rgba(255, 255, 255, .55) !important; border: 0 !important; border-radius: 12px !important; box-shadow: inset 0 0 0 1.5px var(--field-line, #8a7d72) !important; }
  .cart-item .cart-item-meta .cart-item-tag {
    height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important;
    color: var(--st-mute) !important; font: 500 14px/1.4 var(--font-sans, sans-serif) !important; letter-spacing: 0 !important; display: inline-flex !important;
  }
  .cart-item .cart-item-meta .cart-item-tag.amber { color: #7a3f0b !important; font-weight: 600 !important; }
  .cart-item .cart-item-line { font-size: 13px !important; }

  @media (max-width: 640px) {
    .cart-item:not(.cf-skeleton-item) { grid-template-columns: 72px minmax(0, 1fr) auto !important; column-gap: 14px !important; padding: 20px 0 !important; }
    .cart-item .cart-item-img { width: 72px !important; }
    .cart-items-head { padding: 0 0 6px !important; row-gap: 0 !important; }
  }
}

.cart-items { overflow: visible; }
.cart-items-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cart-items-clear { min-height: 44px; padding: 0; font: 500 14px/1 var(--font-sans, sans-serif); color: var(--st-mute); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(29, 58, 44, .3); }
.cart-items-clear svg { display: none; }
@media (hover: hover) { .cart-items-clear:hover { color: #9a2f22; text-decoration-color: currentColor; } }

.cart-lines { margin: 0; padding: 0; list-style: none; }

/* One grid per line. The text block's wrapper is dissolved (display: contents) so the quantity can sit on the same row as the price on a phone. */
.cart-item:not(.cf-skeleton-item) {
  display: grid; align-items: start;
  grid-template-areas: "img line price" "img name price" "img meta price" "img warn price" "img ctrl price";
}
.cart-item:not(.cf-skeleton-item) > .cart-item-body { display: contents; }
.cart-item > .cart-item-img { grid-area: img; position: relative; min-width: 0; border-radius: 12px; overflow: hidden; background: #eaf0e5; }
.cart-item .cart-item-line { grid-area: line; margin: 0; font: 500 13px/1.3 var(--font-sans, sans-serif); letter-spacing: 0; color: var(--st-mute); white-space: normal; overflow: visible; text-overflow: clip; }
.cart-item .cart-item-name a { display: inline-block; padding: 11px 0; margin: -11px 0; }   /* the link is 45 px high, the line does not grow */
.cart-item .cart-item-name { grid-area: name; margin: 3px 0 0; font: 600 21px/1.2 var(--font-display, sans-serif); letter-spacing: -.015em; color: var(--ink, #18201b); overflow-wrap: anywhere; }
.cart-item .cart-item-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; margin: 8px 0 0; }
.cart-item .cart-item-tag svg { display: none; }
.cart-item .cart-item-tag.amber svg { display: block; width: 14px; height: 14px; }
.cart-item .cart-item-tag.amber { gap: 5px; }

/* The no-tank-mix note stays on the line, as quiet text with an amber rule. (The hazard statements are no longer printed on the cart line.) */
.cart-item .cart-item-warning { grid-area: warn; margin: 14px 0 0; padding: 1px 0 1px 12px; border-radius: 0; border-left: 2px solid #c8963a; background: none; color: #6f3a0a; font: 600 14px/1.45 var(--font-sans, sans-serif); }

/* Quantity and remove. */
.cart-item .cart-item-controls { grid-area: ctrl; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 16px 0 0; }
.cart-item .cart-qty { height: 40px; overflow: hidden; }
.cart-item .cart-qty button { width: 40px; height: 40px; }
.cart-item .cart-qty input { align-self: stretch; width: 44px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cart-item .cart-item-actions { gap: 0; }
.cart-item .cart-item-action { min-height: 44px; padding: 0; font: 500 14px/1 var(--font-sans, sans-serif); color: var(--st-mute); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(29, 58, 44, .3); }
.cart-item .cart-item-action svg { display: none; }
@media (hover: hover) { .cart-item .cart-item-action.remove:hover { color: #9a2f22; text-decoration-color: currentColor; } }

/* Price column: the line total is the one loud number; the sum behind it is quiet. */
.cart-item .cart-item-prices { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; gap: 0; width: auto; min-width: 0; padding: 0; border: 0; text-align: right; }
.cart-item .cart-item-price { font: 700 21px/1.2 var(--font-display, sans-serif); letter-spacing: -.01em; color: var(--green-ink, #1d3a2c); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-item .cart-item-unit { margin-top: 3px; max-width: 190px; font-size: 13px; line-height: 1.4; color: var(--st-mute); text-wrap: balance; }
.cart-item .cart-item-ref { max-width: 190px; font-size: 13px; line-height: 1.4; }

@media (max-width: 760px) {
  .cart-item .cart-qty button { width: 44px; height: 44px; }
  .cart-item .cart-qty { height: 44px; }
}
@media (max-width: 640px) {
  .cart-item:not(.cf-skeleton-item) {
    grid-template-areas: "img line line" "img name name" "img meta meta" "warn warn warn" "ctrl ctrl price";
  }
  .cart-item .cart-item-name { font-size: 18px; margin-top: 2px; }
  .cart-item .cart-item-meta { margin-top: 6px; }
  .cart-item .cart-item-warning { margin-top: 14px; }
  .cart-item .cart-item-controls { flex-direction: column; align-items: flex-start; margin-top: 14px; gap: 0; }
  .cart-item .cart-item-prices { align-self: start; margin-top: 14px; }
  .cart-item .cart-item-price { font-size: 20px; }
  .cart-item .cart-item-unit, .cart-item .cart-item-ref { max-width: 176px; }
}

/* ============ 3. Recommended, hazard cue ============
   "Recommended" on the soil analysis card was a white pill on the picture. It is plain text now, in the card body, with a larger fine-line seal in
   front (the cart script prints p.cx-up-rec). The hazard cue of a classified product's button (was the character ⚠) is the alert-diamond icon. */
.cx-up-body > p.cx-up-rec { display: flex; align-items: center; gap: 10px; margin: 0 0 -2px; font: 600 14px/1.2 var(--font-sans, sans-serif); letter-spacing: 0; color: var(--ink, #18201b); }
.cx-up-rec .hi { flex: none; width: 26px; height: 26px; --hi-w: 1.5; color: var(--st-accent); }
.cx-up-cta .hi { flex: none; width: 19px; height: 19px; --hi-w: 1.7; }

/* The recommendation cards of the cart page: their title link and "view product" link are 44 px high without moving anything. */
.cart-left .cx-up-top h3 a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.cart-left .cx-up-more { min-height: 44px; display: inline-flex; align-items: center; }