/* ============ Round 16: the buy box (31 Oct 2026, the owner: "make this element less AI generic"; and the 30 kg limit was not visible while choosing) ============
   It was a white card with a "Pack" label and one bordered, ticked option, even when there was nothing to choose. Lawn shops (Sunday, Anderson's)
   sell by lawn area: "one pouch covers up to…", then how many your lawn needs. So now: the price leads, with what it buys and the price per kg; a
   choice of size only where there is one, as the shop's own segmented control (ui.js slides its white thumb); the add button carries its label on
   the left and the total on the right (no middle dot); under it one quiet line that says how much lawn the chosen packs cover, with "How much do I
   need?"; over the order weight limit a calm note with Mathieu's way out (collection or pallet) and a prefilled mail. Markup: Front/Shop/PdpBuyBox.php,
   PdpPick.php; behaviour: assets/js/product.js syncPick(). */

/* ---- the price ---------------------------------------------------------------------------------------------------------------------------------------- */
@layer fi-pre {
  .pdp-buy .pdp-variant.pdp-pick { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 0 18px !important; }
}
.pdp-price-line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; margin: 0; }
.pdp-price-big { color: var(--green-ink, #1d3a2c); font: 600 clamp(32px, 3.1vw, 42px) / 1 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pdp-price-pack { color: var(--ink-2, #2c3a32); font: 500 16px / 1.3 var(--font-sans), sans-serif; }
.pdp-price-line .pdp-unit-price { color: var(--ink-3, #4a5650); font: 500 14px / 1.3 var(--font-sans), sans-serif; font-variant-numeric: tabular-nums; }
.pdp-price-line .pdp-unit-price[hidden] { display: none; }

/* ---- the sizes, only when there are several: the shop's segmented control ------------------------------------------------------------------------------ */
@layer fi-pre {
  .pdp-pick .pdp-variant-options { display: inline-flex !important; grid-template-columns: none !important; gap: 2px !important; }
  .pdp-pick .pdp-variant-opt {
    display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important;
    padding: 7px 18px !important; border: 0 !important; border-radius: 14px !important; background: transparent !important; box-shadow: none !important; text-align: center !important;
  }
  .pdp-pick .pdp-variant-opt .na { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; height: auto !important; }
  .pdp-pick .pdp-variant-opt.active:not(.is-na) { background: #fff !important; box-shadow: 0 1px 2px rgba(30, 60, 44, .1), 0 6px 14px -6px rgba(30, 60, 44, .28) !important; }
  .pdp-pick .pdp-variant-options.has-mark .pdp-variant-opt.active { background: transparent !important; box-shadow: none !important; }
  .pdp-pick .pdp-variant-opt.active::after { content: none !important; }
  .pdp-pick .pdp-variant-opt .size { font: 600 16px / 1.1 var(--font-sans), sans-serif !important; color: var(--green-ink, #1d3a2c) !important; letter-spacing: 0 !important; }
  .pdp-pick .pdp-variant-opt .price, .pdp-pick .pdp-variant-opt .na { margin: 0 !important; font: 500 13px / 1.2 var(--font-sans), sans-serif !important; color: var(--ink-3, #4a5650) !important; font-variant-numeric: tabular-nums; }
  .pdp-pick .pdp-variant-opt:is(.is-na, .is-soldout) .size { color: var(--ink-3, #4a5650) !important; text-decoration: line-through; text-decoration-thickness: 1px; }
}
.pdp-pick .pdp-variant-options { position: relative; width: fit-content; max-width: 100%; margin: 16px 0 0; padding: 4px; border-radius: 18px; background: color-mix(in srgb, var(--green-ink, #1d3a2c) 6.5%, #fff); }
.pdp-pick .pdp-variant-opt { position: relative; z-index: 1; min-width: 88px; min-height: 52px; cursor: pointer; }
.pdp-pick .pdp-variant-opt:focus-visible { outline: 2px solid var(--focus, #2f7a55); outline-offset: -2px; }

/* ---- the add button: the label on the left, the total on the right ------------------------------------------------------------------------------------- */
@layer fi-pre {
  .pdp-buy .pdp-add-cart { justify-content: flex-start !important; gap: 10px !important; padding-inline: 24px !important; }
  .pdp-buy .pdp-add-cart .price-now { margin-left: auto !important; padding-left: 16px; font-variant-numeric: tabular-nums; }
}

/* ---- under the button: how much lawn, and the calculator ---------------------------------------------------------------------------------------------- */
.pdp-cover { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 4px; margin: 14px 0 0; color: var(--ink-2, #2c3a32); font: 500 15px / 1.45 var(--font-sans), sans-serif; }
.pdp-cover [data-fi-cover] { font-variant-numeric: tabular-nums; }
.pdp-cover [hidden] { display: none; }

/* ---- over the order weight limit: a note, not an alarm ----------------------------------------------------------------------------------------------- */
.pdp-heavy { margin: 12px 0 0; padding: 14px 16px; border-radius: 16px; background: rgba(244, 234, 210, .7); color: var(--loam, #4b3425); }
.pdp-heavy[hidden] { display: none; }
.pdp-heavy-text { margin: 0 0 6px; font: 500 14.5px / 1.45 var(--font-sans), sans-serif; color: inherit; }
.pdp-heavy-link { color: var(--green-ink, #1d3a2c); font: 700 14.5px / 1.4 var(--font-sans), sans-serif; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .pdp-heavy-link:hover { color: var(--green-deep, #2f7a55); } }

.pdp-buy .pdp-vat-note { margin-top: 10px; }

.pdp-buy .pdp-add-label { white-space: nowrap; }
/* a phone: the stepper gives up a little width and the cart icon steps aside, so "Add to cart" and the total fit on one line */
@layer fi-pre {
  @media (max-width: 480px) {
    .pdp-buy .pdp-cta-row { grid-template-columns: 112px minmax(0, 1fr) !important; }
    .pdp-buy .pdp-add-cart { padding-inline: 18px !important; gap: 8px !important; }
    .pdp-buy .pdp-add-cart > svg { display: none !important; }
    .pdp-pick .pdp-variant-opt { padding: 7px 14px !important; }
  }
}
@media (max-width: 480px) { .pdp-pick .pdp-variant-opt { min-width: 76px; } }