/* ============ Round 5 · product page ============ */
/* 1. The "How much do I need?" dialog (PdpCalcModal.php builds the markup, product.js runs it): a native <dialog> that fills the screen with a
      transparent frame; the scrim and the sheet live inside it. On a phone the sheet is a bottom sheet with a grab handle, on a larger screen it
      is a centred sheet that grows out of the link. Only transform and opacity move.
   2. The calculator in the dosage section (PdpHowToUse.php, classes pdp-calc*), dressed like the dialog so that both read as one tool.
   The older rules of the dialog (components.css section 23, design.css `.pdp-cm-panel`) are no longer used by any element: this file is the dialog now.
   Cascade: plain rules sit outside any layer; only what must beat an older !important (the pdp-calc rules) is inside @layer fi-pre. */

:root {
  --cm-ease: cubic-bezier(.32, .72, 0, 1);   /* the curve of an iOS sheet: quick start, long soft landing */
  --cm-line: rgba(75, 52, 37, .13);          /* hairline between the lines of the answer */
  --cm-paper: #fffdf9;                       /* the sheet: white with a trace of sand */
}

/* ---- the page behind ---- (round 7)
   A mouse or trackpad: locked with overflow: hidden and a scrollbar gutter (class fi-cm-lock, added in cmOpen() and removed in cmFinish()).
   A touch screen: the page is NOT locked this way. On iOS, overflow: hidden on <html> is answered with a change of toolbars and viewport (and since
   Safari 26 a modal dialog does not even keep it, WebKit bug 299084); that change came right before the sheet slid up and showed as a glitch.
   There, touch-action: pinch-zoom on the frame, the scrim and the sheet (no panning, zooming stays; the middle part keeps pan-y), overscroll-behavior and the touchmove guards of
   product.js keep the page still without changing its layout. */
html.fi-cm-lock { overflow: hidden; scrollbar-gutter: stable; }

/* ---- the frame: as big as the visible screen, see-through; hidden whenever it is not [open] ---- */
.pdp-cm {
  position: fixed; inset: var(--cm-top, 0px) 0 auto 0; box-sizing: border-box; width: 100%; max-width: none; height: var(--cm-h, 100%); max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden; overscroll-behavior: contain;
  /* `clip`, not only `hidden`: a hidden box can still be SCROLLED by the browser. Focusing the sheet while it waits below the screen (translateY(100%))
     scrolled this frame by the sheet's height, so the sheet sat in its final place with the page still bright, then floated up and down while the
     slide-in ran: the glitch on phones (round 6). A clipped box has no scroll position at all. */
  overflow: clip;
}
.pdp-cm[open] { display: flex; align-items: flex-end; justify-content: center; }
.pdp-cm::backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
.pdp-cm [hidden] { display: none !important; }
.pdp-cm { touch-action: pinch-zoom; }   /* no panning of the page from the frame; pinching to zoom stays possible */

/* The scrim and the sheet are drawn in their FINAL state. The slide in and out is made by product.js with element.animate() (fill "both": the first frame
   already has the start state, the last one is held), not by CSS transitions on a freshly shown top-layer element: no start state to commit, no
   dependence on @starting-style, and the same on every engine. */
.cm-scrim { position: absolute; inset: 0; background: rgba(33, 24, 17, .5); opacity: 1; touch-action: pinch-zoom; }

/* ---- the sheet ---- */
.cm-sheet {
  position: relative; display: flex; overscroll-behavior: contain; flex-direction: column; width: 100%; max-width: 100%; max-height: calc(100% - 28px);
  border-radius: 22px 22px 0 0; background: var(--cm-paper); color: var(--ink); overflow: hidden; outline: 0;
  box-shadow: 0 -1px 0 rgba(43, 30, 21, .05), 0 -18px 48px -14px rgba(33, 24, 17, .32);
  transform: none; touch-action: pinch-zoom;
}

/* top: handle, product line, title, close. A finger pulled down from anywhere on the sheet closes it (product.js), from here for a mouse too. */
.cm-top { flex: none; padding: 0 20px; touch-action: pinch-zoom; }
.cm-grab { display: block; width: 38px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: rgba(75, 52, 37, .24); }
.cm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0 12px; }
.cm-heads { min-width: 0; }
.cm-eyebrow { margin: 0 0 3px; color: var(--straw-deep); font: 600 12.5px/1.3 var(--font-sans), sans-serif; letter-spacing: .015em; }
.cm-title { margin: 0; color: var(--green-ink); font: 600 24px/1.15 var(--font-display), sans-serif; letter-spacing: -.02em; }
.cm-lead { display: none; margin: 6px 0 0; max-width: 36ch; color: var(--ink-3); font-size: 14.5px; line-height: 1.45; }
.cm-close {
  position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -4px -10px 0 0; padding: 0; border: 0;
  background: transparent; color: var(--loam); cursor: pointer; touch-action: manipulation;
}
.cm-close::before { content: ""; position: absolute; width: 32px; height: 32px; border-radius: 50%; background: var(--sand-soft); transition: background-color .18s ease; }
.cm-close .ph { position: relative; width: 17px; height: 17px; }
@media (hover: hover) { .cm-close:hover::before { background: var(--sand); } }

/* middle: the only part that scrolls */
.cm-body { flex: 1 1 auto; min-height: 0; padding: 4px 20px 10px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
.cm-view[data-view="calc"] { display: grid; gap: 14px; }

/* the field: one hairline border, the number big in the middle with "m²" right behind it, a stepper on each side */
.cm-field { display: grid; gap: 8px; }
.cm-label { color: var(--ink-3); font: 600 13px/1.2 var(--font-sans), sans-serif; letter-spacing: .01em; }
.cm-box {
  display: flex; align-items: center; gap: 4px; height: 68px; padding: 0 8px; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--field-line); transition: box-shadow .18s ease;
}
.cm-box:has(.cm-input:focus) { box-shadow: inset 0 0 0 1.5px var(--green-deep), 0 0 0 4px rgba(47, 122, 85, .16); }
@supports not selector(:has(*)) { .cm-box:focus-within { box-shadow: inset 0 0 0 1.5px var(--green-deep), 0 0 0 4px rgba(47, 122, 85, .16); } }
.cm-entry { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; align-content: center; justify-content: center; gap: 6px; align-self: stretch; min-width: 0; cursor: text; }
.cm-input {
  width: 3ch; min-width: 1ch; max-width: 100%; height: auto; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none;
  color: var(--peat); text-align: right; font: 600 40px/1 var(--font-display), sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: none;
}
.cm-input::placeholder { color: rgba(75, 52, 37, .28); opacity: 1; }
.cm-input::selection { background: rgba(47, 122, 85, .2); color: inherit; }
.cm-unit { color: var(--ink-3); font: 500 19px/1 var(--font-sans), sans-serif; }
.cm-step {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--loam);
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color .15s ease, transform .12s ease;
}
.cm-step .ph { width: 20px; height: 20px; }
.cm-step:active:not([aria-disabled="true"]) { background: var(--sand-soft); transform: scale(.93); }
.cm-step[aria-disabled="true"] { color: rgba(75, 52, 37, .3); cursor: default; }
@media (hover: hover) { .cm-step:hover:not([aria-disabled="true"]) { background: var(--sand-soft); } }

/* the common sizes: one segmented control, a white thumb slides under the size that matches (and fades when the number is something else) */
.cm-seg { --i: 1; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 3px; border-radius: 13px; background: var(--sand-soft); }
.cm-seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 5); border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 .5px rgba(75, 52, 37, .12), 0 1px 3px rgba(43, 30, 21, .16); opacity: 0; transform: translateX(calc(var(--i) * 100%));
  transition: transform .3s var(--cm-ease), opacity .18s ease;
}
.cm-seg.has-pick .cm-seg-thumb { opacity: 1; }
.cm-seg-btn {
  position: relative; z-index: 1; min-height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--loam); cursor: pointer;
  font: 600 15px/1 var(--font-sans), sans-serif; font-variant-numeric: tabular-nums; touch-action: manipulation; transition: color .18s ease;
}
.cm-seg-btn[aria-pressed="true"] { color: var(--peat); }
@media (hover: hover) { .cm-seg-btn[aria-pressed="false"]:hover { color: var(--peat); } }

/* the answer: one big number, then calm lines between hairlines, then the price */
.cm-result { display: grid; margin-top: 2px; }
.cm-hero { padding: 2px 0 12px; }
.cm-cap { margin: 0 0 4px; color: var(--ink-3); font: 600 13px/1.3 var(--font-sans), sans-serif; letter-spacing: .01em; }
.cm-heroline { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.cm-num { display: inline-grid; color: var(--peat); font: 600 72px/1 var(--font-display), sans-serif; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.cm-digits { grid-area: 1 / 1; }
.cm-digits.is-in { animation: cm-in .26s var(--cm-ease) both; }
.cm-digits.is-out { animation: cm-out .2s ease-in both; pointer-events: none; }
.cm-herounit { min-width: 0; color: var(--loam); font: 500 22px/1.2 var(--font-display), sans-serif; letter-spacing: -.01em; }
.cm-sentence { margin: 10px 0 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }
.cm-result[data-state="empty"] .cm-num { color: rgba(75, 52, 37, .62); }
.cm-kv { margin: 0; border-top: 1px solid var(--cm-line); }
.cm-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; border-bottom: 1px solid var(--cm-line); }
.cm-row dt { margin: 0; color: var(--ink-3); font-size: 14.5px; line-height: 1.3; }
@layer fi-pre { .cm-row dt { font-size: 14.5px !important; } }   /* refresh.css sets every dt to 12px with !important */
.cm-row dd { margin: 0; color: var(--peat); font: 600 17px/1.25 var(--font-display), sans-serif; font-variant-numeric: tabular-nums; text-align: right; }
.cm-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 14px 0 2px; }
.cm-total-label { color: var(--ink-2); font: 600 15px/1.2 var(--font-sans), sans-serif; }
.cm-total strong { color: var(--peat); font: 600 30px/1 var(--font-display), sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cm-total small { grid-column: 2; justify-self: end; margin-top: 5px; color: var(--ink-3); font-size: 12.5px; line-height: 1.2; }
.cm-hint { margin: 10px 0 0; color: var(--warn); font-size: 14px; line-height: 1.45; }

/* bottom: always visible. One clear button, one quiet text action. */
.cm-foot { position: relative; flex: none; display: grid; gap: 2px; padding: 12px 20px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--cm-line); background: var(--cm-paper); }
/* when the middle has more below the fold, it fades out into the bottom (product.js sets .has-more) */
.cm-foot::before { content: ""; position: absolute; left: 0; right: 0; top: -29px; height: 28px; background: linear-gradient(to bottom, rgba(255, 253, 249, 0), var(--cm-paper)); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.cm-sheet.has-more .cm-foot[data-view="calc"]::before { opacity: 1; }
.cm-buy { width: 100%; min-height: 56px; justify-content: center; padding: 0 22px; border-radius: 14px; font-size: 16px; text-align: center; }
.cm-buy[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.cm-skip {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-3); cursor: pointer; touch-action: manipulation;
  font: 600 14.5px/1 var(--font-sans), sans-serif; text-decoration: none;
}
@media (hover: hover) { .cm-skip:hover { color: var(--peat); text-decoration: underline; text-underline-offset: 4px; } }

/* after "add": a calm confirmation in place of the question */
.cm-done { display: grid; justify-items: center; gap: 6px; padding: 28px 8px 22px; text-align: center; }
.cm-check { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 50%; background: var(--green-deep); color: #fff; animation: cm-pop .42s var(--cm-ease) both; }
.cm-check .ph { width: 24px; height: 24px; }
.cm-done-title { margin: 0; color: var(--green-ink); font: 600 22px/1.2 var(--font-display), sans-serif; letter-spacing: -.015em; }
.cm-done-text { margin: 0; color: var(--ink-3); font-size: 15px; line-height: 1.4; }

@keyframes cm-in { from { opacity: 0; transform: translateY(.18em); } }
@keyframes cm-out { to { opacity: 0; transform: translateY(-.18em); } }
@keyframes cm-pop { from { opacity: 0; transform: scale(.7); } }

/* a larger screen: centred, grows out of the link (product.js sets transform-origin), a little more air */
@media (min-width: 641px) {
  .pdp-cm[open] { align-items: center; padding: 24px; }
  .cm-sheet {
    width: min(480px, 100%); max-height: 100%; border-radius: 22px;
    box-shadow: 0 0 0 1px rgba(43, 30, 21, .06), 0 2px 6px rgba(43, 30, 21, .06), 0 26px 60px -14px rgba(33, 24, 17, .34);
  }
  .cm-grab { display: none; }
  .cm-top { padding: 24px 28px 0; }
  .cm-head { padding: 0 0 14px; }
  .cm-close { margin: -8px -12px 0 0; }
  .cm-lead { display: block; }
  .cm-body { padding: 4px 28px 12px; }
  .cm-foot { padding: 14px 28px 16px; }
}

/* a screen that is not very high: the lead sentence goes too */
@media (min-width: 641px) and (max-height: 860px) { .cm-lead { display: none; } }

/* a phone: the lead sentence goes (the title and the label say it), the number is a little smaller */
@media (max-width: 640px) {
  .cm-view[data-view="calc"] { gap: 12px; }
  .cm-num { font-size: 60px; }
  .cm-herounit { font-size: 20px; }
  .cm-total { padding-top: 12px; }
}

/* a short phone (iPhone SE and the like): a little tighter, so that the sheet leaves a strip of the page above it */
@media (max-width: 640px) and (max-height: 720px) {
  .cm-eyebrow { display: none; }
  .cm-grab { margin-top: 6px; }
  .cm-head { padding: 6px 0 8px; }
  .cm-title { font-size: 22px; }
  .cm-view[data-view="calc"] { gap: 10px; }
  .cm-box { height: 60px; }
  .cm-num { font-size: 48px; }
  .cm-hero { padding-bottom: 8px; }
  .cm-row { min-height: 40px; }
  .cm-total strong { font-size: 26px; }
  .cm-foot { padding-top: 10px; }
  .cm-buy { min-height: 52px; }
}

/* a low screen (a phone on its side): everything tighter so that the middle still has room to scroll */
@media (max-height: 520px) {
  .pdp-cm[open] { padding: 8px; }
  .cm-lead, .cm-eyebrow { display: none; }
  .cm-top { padding-top: 12px; }
  .cm-num { font-size: 52px; }
  .cm-buy { min-height: 48px; }
  .cm-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-sheet, .cm-scrim, .cm-seg-thumb, .cm-step, .cm-box, .cm-close::before { transition: none !important; }
  .cm-digits, .cm-check { animation: none !important; }
}

/* ============ 2. The calculator in the dosage section ============ */
/* Same field, same lines, same button as the dialog. The older rules (site.css, the cards' shared padding and shadow) use !important, so these sit in the
   earliest layer. */
@layer fi-pre {
  .pdp-calc {
    gap: 14px !important; padding: 22px !important; border-radius: 22px !important; background: var(--cm-paper) !important;
    box-shadow: 0 0 0 1px rgba(75, 52, 37, .08), 0 1px 2px rgba(43, 30, 21, .04), 0 18px 38px -22px rgba(43, 30, 21, .28) !important;
  }
  .pdp-calc h3 { color: var(--green-ink) !important; font: 600 20px/1.2 var(--font-display), sans-serif !important; letter-spacing: -.015em !important; }
  .pdp-calc .pdp-calc-input {
    flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; height: 68px !important; padding: 0 22px !important; overflow: visible !important;
    border-radius: 16px !important; background: #fff !important; box-shadow: inset 0 0 0 1px var(--field-line) !important;
  }
  .pdp-calc .pdp-calc-input:focus-within { box-shadow: inset 0 0 0 1.5px var(--green-deep), 0 0 0 4px rgba(47, 122, 85, .16) !important; }
  .pdp-calc .pdp-calc-input input {
    flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 100% !important; min-height: 44px !important; padding: 0 !important; border: 0 !important; outline: 0 !important;
    background: transparent !important; box-shadow: none !important; color: var(--peat) !important; font: 600 38px/1 var(--font-display), sans-serif !important;
    letter-spacing: -.02em !important; font-variant-numeric: tabular-nums;
  }
  .pdp-calc .pdp-calc-input input:focus-visible { outline: 0 !important; }
  /* touch screens: refresh.css sets every field to 16 px (so iOS does not zoom in); these two are much bigger, so no zoom either */
  #pdp-cm-area.cm-input { font-size: 40px !important; }
  /* one focus ring: the box round the field carries it (refresh.css gives every focused input its own 3 px outline) */
  #pdp-cm-area.cm-input:focus-visible, #pdp-cm-area.cm-input:focus { outline: 0 !important; box-shadow: none !important; }
  .pdp-calc .pdp-calc-input input[inputmode][min][max] { font-size: 38px !important; }
  .pdp-calc .pdp-calc-input .unit {
    flex: none !important; width: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important;
    color: var(--ink-3) !important; font: 500 19px/1 var(--font-sans), sans-serif !important;
  }
  .pdp-calc .pdp-calc-result { display: block !important; margin: 0 !important; border-top: 1px solid var(--cm-line); }
  .pdp-calc .pdp-calc-out {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important;
    gap: 16px !important; min-height: 46px; margin: 0 !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--cm-line) !important;
    border-radius: 0 !important; background: transparent !important;
  }
  .pdp-calc .pdp-calc-out span { color: var(--ink-3) !important; font: 400 14.5px/1.3 var(--font-sans), sans-serif !important; }
  .pdp-calc .pdp-calc-out strong { color: var(--peat) !important; font: 600 17px/1.25 var(--font-display), sans-serif !important; text-align: right; font-variant-numeric: tabular-nums; }
  .pdp-calc .pdp-calc-sentence { margin: 0 !important; color: var(--ink-3) !important; font: 400 13.5px/1.5 var(--font-sans), sans-serif !important; }
  .pdp-calc .pdp-calc-add { width: 100%; min-height: 56px; margin: 2px 0 0 !important; justify-content: center; border-radius: 14px !important; font-size: 16px !important; }
  .pdp-calc .pdp-calc-added { margin: 0 !important; color: var(--green-deep) !important; font: 600 14px/1.4 var(--font-sans), sans-serif !important; }
  .pdp-calc .pdp-calc-note { margin: 0 !important; color: var(--ink-3) !important; font-size: 13px !important; line-height: 1.5; }
}
@media (max-width: 640px) {
  @layer fi-pre {
    .pdp-calc { padding: 18px !important; }
    .pdp-calc .pdp-calc-input { height: 64px !important; padding: 0 18px !important; }
    .pdp-calc .pdp-calc-input input[inputmode][min][max] { font-size: 34px !important; }
  }
}