/* ==========================================================================
   Orderday — default skin
   --------------------------------------------------------------------------
   Every design value reads a public custom property `--od-*` with a neutral
   fallback (documented in docs/theming.md). They are copied once into private
   `--_od-*` properties on the component roots below, so a theme sets the
   public ones anywhere up the tree (usually :root) and wins.
   Only transform and opacity animate (≤ 200 ms, ease-out); reduced motion
   zeroes every duration. The sheet's shadow is the only shadow.
   ========================================================================== */

:where(.od-sheet-host, .od-mount, .od-cart, .od-conflict, .od-booking, .od-product-line, .orderday-checkout, .orderday-cart-block, [data-orderday-promise], [data-orderday-gate]) {
  --_od-surface: var(--od-surface, #ffffff);
  --_od-ground: var(--od-ground, #f6f6f4);
  --_od-ink: var(--od-ink, #1d1f1e);
  --_od-ink-soft: var(--od-ink-soft, #4e5450);
  --_od-ink-muted: var(--od-ink-muted, #6f7571);
  --_od-line: var(--od-line, #e2e4e1);
  --_od-line-strong: var(--od-line-strong, #b9bdb9);
  --_od-hover: var(--od-hover, #f0f1ee);
  --_od-accent: var(--od-accent, #1f5c3f);
  --_od-accent-hover: var(--od-accent-hover, #174a32);
  --_od-on-accent: var(--od-on-accent, #ffffff);
  --_od-selected: var(--od-selected, #1f5c3f);
  --_od-on-selected: var(--od-on-selected, #ffffff);
  --_od-chip: var(--od-chip, #1d1f1e);
  --_od-on-chip: var(--od-on-chip, #ffffff);
  --_od-segment: var(--od-segment, #ecedea);
  --_od-disabled: var(--od-disabled, #ecedea);
  --_od-link: var(--od-link, #1f5c3f);
  --_od-link-hover: var(--od-link-hover, #174a32);
  --_od-focus: var(--od-focus, #1a6be0);
  --_od-warn-bg: var(--od-warn-bg, #fbeccb);
  --_od-warn-ink: var(--od-warn-ink, #5c3b00);
  --_od-low: var(--od-low, #7a4e00);
  --_od-success: var(--od-success, #1e6b3a);
  --_od-error: var(--od-error, #b3261e);
  --_od-scrim: var(--od-scrim, rgb(0 0 0 / .4));
  --_od-shadow: var(--od-shadow, 0 12px 40px rgb(0 0 0 / .18));

  --_od-font: var(--od-font, inherit);
  --_od-font-display: var(--od-font-display, inherit);
  --_od-fz-tag: var(--od-fz-tag, .75rem);
  --_od-fz-meta: var(--od-fz-meta, .8125rem);
  --_od-fz-ui: var(--od-fz-ui, .875rem);
  --_od-fz-body: var(--od-fz-body, 1rem);
  --_od-fz-num: var(--od-fz-num, 1.125rem);
  --_od-fz-title: var(--od-fz-title, 1.375rem);
  --_od-lh-body: var(--od-lh-body, 1.5);
  --_od-lh-ui: var(--od-lh-ui, 1.3);
  --_od-lh-tight: var(--od-lh-tight, 1.15);
  --_od-fw-medium: var(--od-fw-medium, 500);
  --_od-fw-strong: var(--od-fw-strong, 600);
  --_od-ls-title: var(--od-ls-title, normal);

  --_od-s1: var(--od-space-1, 4px);
  --_od-s2: var(--od-space-2, 8px);
  --_od-s3: var(--od-space-3, 12px);
  --_od-s4: var(--od-space-4, 16px);
  --_od-s5: var(--od-space-5, 24px);
  --_od-s6: var(--od-space-6, 32px);
  --_od-target: var(--od-target, 44px);
  --_od-day-h: var(--od-day-h, 52px);
  --_od-sheet-width: var(--od-sheet-width, 600px);
  --_od-sheet-top: var(--od-sheet-top, 4rem);
  --_od-gutter: var(--od-gutter, 16px);
  --_od-r-s: var(--od-radius-s, 6px);
  --_od-r-m: var(--od-radius-m, 10px);
  --_od-r-l: var(--od-radius-l, 16px);
  --_od-r-btn: var(--od-radius-btn, 10px);
  --_od-r-pill: var(--od-radius-pill, 999px);
  --_od-focus-w: var(--od-focus-width, 2px);
  --_od-focus-o: var(--od-focus-offset, 2px);

  --_od-t-color: var(--od-dur-color, 150ms);
  --_od-t-move: var(--od-dur-move, 200ms);
  --_od-t-press: var(--od-dur-press, 75ms);
  --_od-ease: var(--od-ease, cubic-bezier(.2, .7, .2, 1));
  --_od-z: var(--od-z-sheet, 1000);
}
@media (prefers-reduced-motion: reduce) {
  :where(.od-sheet-host, .od-mount, .od-cart, .od-conflict, .od-booking, .od-product-line, .orderday-checkout, .orderday-cart-block, [data-orderday-promise]) { --_od-t-color: 0s; --_od-t-move: 0s; --_od-t-press: 0s; }
}

/* ---------- shared bits ---------- */
.od-sheet-host [hidden], .od-mount [hidden], .od-cart[hidden], .od-cart [hidden], .od-conflict[hidden] { display: none !important; }
.od-icon { width: calc(var(--_od-s4) + var(--_od-s1)); height: calc(var(--_od-s4) + var(--_od-s1)); flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.od-live { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.od-locked, html.od-locked body { overflow: hidden; }

.od-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--_od-s2); min-height: var(--_od-target); padding: 0 var(--_od-s5); border: 1px solid transparent; border-radius: var(--_od-r-btn); background: transparent; color: inherit; font: inherit; font-size: var(--_od-fz-ui); font-weight: var(--_od-fw-medium); line-height: var(--_od-lh-ui); text-decoration: none; cursor: pointer;
  transition: background-color var(--_od-t-color) var(--_od-ease), color var(--_od-t-color) var(--_od-ease), border-color var(--_od-t-color) var(--_od-ease), transform var(--_od-t-press) var(--_od-ease); }
.od-btn:active { transform: scale(.97); }
.od-btn--primary { background: var(--_od-accent); color: var(--_od-on-accent); }
.od-btn--primary:hover { background: var(--_od-accent-hover); }
.od-btn--primary[disabled], .od-btn--primary[aria-disabled="true"] { background: var(--_od-disabled); color: var(--_od-ink-muted); cursor: not-allowed; transform: none; }
.od-btn--secondary { border-color: var(--_od-line-strong); color: var(--_od-ink); }
.od-btn--secondary:hover { background: var(--_od-hover); }
.od-btn--sm { min-height: calc(var(--_od-target) - var(--_od-s2)); padding: 0 var(--_od-s4); font-size: var(--_od-fz-meta); }
.od-btn--quiet { min-height: calc(var(--_od-target) - var(--_od-s2)); padding: 0 var(--_od-s2); color: var(--_od-link); font-size: var(--_od-fz-meta); text-decoration: underline; text-underline-offset: .15em; }
.od-btn--quiet:hover { color: var(--_od-link-hover); }
.od-btn--icon { width: var(--_od-target); height: var(--_od-target); padding: 0; color: var(--_od-ink); }
.od-btn--icon:hover { background: var(--_od-hover); }
.od-btn:focus-visible, .od-cell:focus-visible, .od-win:focus-visible, .od-sheet-host a:focus-visible, .od-compact__link:focus-visible, .od-day--more:focus-visible, [data-orderday-promise]:focus-visible { outline: var(--_od-focus-w) solid var(--_od-focus); outline-offset: var(--_od-focus-o); }

.od-input { min-height: var(--_od-target); padding: 0 var(--_od-s3); border: 1px solid var(--_od-line-strong); border-radius: var(--_od-r-s); background: var(--_od-surface); color: var(--_od-ink); font: inherit; font-variant-numeric: tabular-nums; }
.od-input:focus-visible { outline: var(--_od-focus-w) solid var(--_od-focus); outline-offset: var(--_od-focus-o); }
.od-input[aria-invalid="true"] { border-color: var(--_od-error); }

/* ---------- the sheet host: scrim + dialog. Closed = visibility hidden. Opening is instant so focus can
   land inside on the same frame; closing keeps it visible for the exit, then hides it ---------- */
.od-sheet-host { position: fixed; inset: 0; z-index: var(--_od-z); visibility: hidden; font-family: var(--_od-font); transition: visibility var(--_od-t-move) var(--_od-ease); }
.od-sheet-host[data-open] { visibility: visible; transition: none; }
.od-scrim { position: absolute; inset: 0; background: var(--_od-scrim); opacity: 0; transition: opacity var(--_od-t-move) var(--_od-ease); }
.od-sheet-host[data-open] .od-scrim { opacity: 1; }
.od-sheet { position: absolute; left: 50%; top: var(--_od-sheet-top); box-sizing: border-box; width: min(var(--_od-sheet-width), calc(100% - 2 * var(--_od-gutter))); max-height: calc(100dvh - var(--_od-sheet-top) - var(--_od-s4)); overflow: auto; overscroll-behavior: contain;
  padding: var(--_od-s5); padding-bottom: calc(var(--_od-s5) + env(safe-area-inset-bottom)); border-radius: var(--_od-r-l); background: var(--_od-surface); color: var(--_od-ink); box-shadow: var(--_od-shadow);
  font-size: var(--_od-fz-body); line-height: var(--_od-lh-body); text-wrap: pretty;
  transform: translate(-50%, var(--_od-s3)); opacity: 0; transition: transform var(--_od-t-move) var(--_od-ease), opacity var(--_od-t-move) var(--_od-ease); }
.od-sheet-host[data-open] .od-sheet { transform: translate(-50%, 0); opacity: 1; }
.od-sheet__head { display: flex; align-items: flex-start; gap: var(--_od-s3); margin-bottom: var(--_od-s4); }
.od-sheet__title { flex: 1; margin: 0; font: var(--_od-fw-strong) var(--_od-fz-title) / var(--_od-lh-tight) var(--_od-font-display); letter-spacing: var(--_od-ls-title); text-wrap: balance; }
.od-sheet__head .od-btn--icon { margin: calc(-1 * var(--_od-s2)) calc(-1 * var(--_od-s2)) 0 0; }
.od-sheet__intro { max-width: 60ch; margin: calc(-1 * var(--_od-s2)) 0 var(--_od-s4); color: var(--_od-ink-soft); font-size: var(--_od-fz-meta); }
@media (max-width: 599px) {
  .od-sheet { top: auto; bottom: 0; left: 0; width: 100%; max-height: calc(100dvh - var(--_od-s5)); padding: var(--_od-s4); padding-bottom: calc(var(--_od-s4) + env(safe-area-inset-bottom)); border-radius: var(--_od-r-l) var(--_od-r-l) 0 0; transform: translateY(100%); opacity: 1; }
  .od-sheet-host[data-open] .od-sheet { transform: translateY(0); }
  .od-sheet__head { position: sticky; top: calc(-1 * var(--_od-s4)); z-index: 1; margin: calc(-1 * var(--_od-s4)) calc(-1 * var(--_od-s4)) var(--_od-s3); padding: var(--_od-s4); background: var(--_od-surface); }
}

/* ---------- the sheet's picker ---------- */
.od-sheet__form { display: grid; gap: var(--_od-s5); }
.od-step { display: grid; gap: var(--_od-s2); min-width: 0; margin: 0; padding: 0; border: 0; }
.od-legend { margin-bottom: var(--_od-s2); padding: 0; color: var(--_od-ink-soft); font-size: var(--_od-fz-meta); font-weight: var(--_od-fw-medium); }

.od-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--_od-s3); }
.od-tile { position: relative; display: grid; gap: var(--_od-s1); padding: var(--_od-s3) var(--_od-s4); border: 1px solid var(--_od-line-strong); border-radius: var(--_od-r-m); background: var(--_od-surface); cursor: pointer;
  transition: background-color var(--_od-t-color) var(--_od-ease), border-color var(--_od-t-color) var(--_od-ease), transform var(--_od-t-press) var(--_od-ease); }
.od-tile:hover { background: var(--_od-hover); }
.od-tile:active { transform: scale(.985); }
.od-tile input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.od-tile__title { font-weight: var(--_od-fw-strong); }
.od-tile__sub { color: var(--_od-ink-soft); font-size: var(--_od-fz-meta); font-variant-numeric: tabular-nums; }
.od-tile:has(input:checked) { border-color: var(--_od-accent); box-shadow: inset 0 0 0 1px var(--_od-accent); }
.od-tile:has(input:focus-visible) { outline: var(--_od-focus-w) solid var(--_od-focus); outline-offset: var(--_od-focus-o); }

.od-zone__field { display: flex; gap: var(--_od-s2); }
.od-zone__field .od-input { width: 10ch; }
.od-zone__msg { margin: 0; color: var(--_od-ink-soft); font-size: var(--_od-fz-ui); }
.od-zone__msg.is-ok { color: var(--_od-success); }
.od-zone__msg.is-out { color: var(--_od-error); }
.od-zone__alt { display: block; margin-top: var(--_od-s1); color: var(--_od-ink); }
.od-zone__alt a { color: var(--_od-link); }

/* the strip — whole weeks × 7, Monday first, weekday named in every cell */
.od-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--_od-s2); }
.od-cell { display: grid; justify-items: center; align-content: start; gap: 1px; width: 100%; min-height: calc(var(--_od-target) + var(--_od-s4)); padding: var(--_od-s2) var(--_od-s1) var(--_od-s1); border: 1px solid var(--_od-line-strong); border-radius: var(--_od-r-m); background: var(--_od-surface); color: var(--_od-ink); font: inherit; line-height: var(--_od-lh-ui); text-align: center; cursor: pointer;
  transition: background-color var(--_od-t-color) var(--_od-ease), color var(--_od-t-color) var(--_od-ease), border-color var(--_od-t-color) var(--_od-ease), transform var(--_od-t-press) var(--_od-ease); }
.od-cell:active { transform: scale(.96); }
.od-cell__wd, .od-cell__mo { color: var(--_od-ink-soft); font-size: var(--_od-fz-tag); font-weight: var(--_od-fw-medium); }
.od-cell__d { font-size: var(--_od-fz-num); font-weight: var(--_od-fw-strong); font-variant-numeric: tabular-nums; }
.od-cell__cap { max-width: 100%; color: var(--_od-ink-soft); font-size: var(--_od-fz-tag); line-height: var(--_od-lh-tight); hyphens: manual; }
.od-cell.is-ok:hover { border-color: var(--_od-ink); background: var(--_od-hover); }
.od-cell[aria-checked="true"] { border-color: var(--_od-selected); background: var(--_od-selected); color: var(--_od-on-selected); }
.od-cell[aria-checked="true"] :is(.od-cell__wd, .od-cell__cap, .od-cell__mo) { color: var(--_od-on-selected); }
.od-cell[aria-disabled="true"] { border-color: var(--_od-line); background: transparent; color: var(--_od-ink-muted); cursor: not-allowed; }
.od-cell[aria-disabled="true"] :is(.od-cell__wd, .od-cell__cap, .od-cell__mo) { color: var(--_od-ink-muted); }
.od-cell.is-past, .od-cell.is-beyond { border-style: dashed; }
.od-cell.is-today .od-cell__wd::after { content: "·"; margin-left: 2px; color: var(--_od-low); font-weight: 700; }
.od-cell:focus-visible { position: relative; z-index: 1; }
.od-strip.is-off .od-cell { pointer-events: none; }
.od-line { min-height: calc(var(--_od-fz-ui) * var(--_od-lh-body)); margin: 0; font-size: var(--_od-fz-ui); }
.od-line b { font-weight: var(--_od-fw-strong); }
.od-line__reason { color: var(--_od-ink-soft); }
@media (max-width: 599px) {
  .od-strip { gap: var(--_od-s1); }
  .od-cell { min-height: calc(var(--_od-target) + var(--_od-s2)); }
  .od-cell__cap, .od-cell__mo { display: none; }
  .od-cell__d { font-size: var(--_od-fz-ui); }
}

/* the sheet's window pills */
.od-pills { display: flex; flex-wrap: wrap; gap: var(--_od-s2); }
.od-pill { position: relative; display: inline-flex; align-items: center; gap: var(--_od-s2); min-height: calc(var(--_od-target) - var(--_od-s1)); padding: 0 var(--_od-s4); border: 1px solid var(--_od-line-strong); border-radius: var(--_od-r-pill); background: var(--_od-surface); font-weight: var(--_od-fw-medium); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color var(--_od-t-color) var(--_od-ease), color var(--_od-t-color) var(--_od-ease), border-color var(--_od-t-color) var(--_od-ease), transform var(--_od-t-press) var(--_od-ease); }
.od-pill:hover { border-color: var(--_od-ink); background: var(--_od-hover); }
.od-pill:active { transform: scale(.97); }
.od-pill input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.od-pill__sub { color: var(--_od-ink-soft); font-size: var(--_od-fz-tag); font-weight: 400; }
.od-pill__sub.is-low { color: var(--_od-low); }
.od-pill:has(input:checked) { border-color: var(--_od-chip); background: var(--_od-chip); color: var(--_od-on-chip); }
.od-pill:has(input:checked) .od-pill__sub { color: var(--_od-on-chip); opacity: .8; }
.od-pill:has(input:disabled) { border-color: var(--_od-line); background: transparent; color: var(--_od-ink-muted); cursor: not-allowed; transform: none; }
.od-pill:has(input:disabled) .od-pill__sub { color: var(--_od-ink-muted); }
.od-pill:has(input:disabled) input { cursor: not-allowed; }
.od-pill:has(input:focus-visible) { outline: var(--_od-focus-w) solid var(--_od-focus); outline-offset: var(--_od-focus-o); }

.od-cutoff { display: grid; gap: var(--_od-s1); color: var(--_od-ink-soft); font-size: var(--_od-fz-ui); }
.od-cutoff p { margin: 0; }
.od-cutoff b { color: var(--_od-ink); font-weight: var(--_od-fw-strong); font-variant-numeric: tabular-nums; }
.od-sheet__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_od-s3); }
.od-draft { flex: 1 1 100%; margin: 0; font-weight: var(--_od-fw-medium); font-variant-numeric: tabular-nums; }

/* ---------- the conflict chip (product cards, cart rows — never on the photo) ---------- */
.od-conflict { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--_od-s1); padding: 3px var(--_od-s3); border-radius: var(--_od-r-pill); background: var(--_od-warn-bg); color: var(--_od-warn-ink); font-size: var(--_od-fz-tag); font-weight: var(--_od-fw-medium); line-height: var(--_od-lh-tight); white-space: nowrap;
  transition: opacity var(--_od-t-color) var(--_od-ease); }
.od-conflict.is-leaving { opacity: 0; }

/* ---------- the cart summary block ---------- */
.od-cart { display: grid; gap: var(--_od-s2); padding: var(--_od-s4); background: var(--_od-ground); color: var(--_od-ink); font-family: var(--_od-font); font-size: var(--_od-fz-body); line-height: var(--_od-lh-body); }
.od-cart__line { display: flex; align-items: center; gap: var(--_od-s2); margin: 0; font-weight: var(--_od-fw-medium); font-variant-numeric: tabular-nums; }
.od-cart__line .od-icon { color: var(--_od-link); }
.od-cart__line > span { min-width: 0; }
.od-cart__edit { flex: none; margin-left: auto; }
.od-cart__threshold { margin: 0; color: var(--_od-ink-soft); font-size: var(--_od-fz-meta); font-variant-numeric: tabular-nums; }
.od-meter { height: var(--_od-s1); overflow: hidden; border-radius: var(--_od-r-pill); background: var(--_od-line); }
.od-meter > span { display: block; height: 100%; background: var(--_od-accent); transform-origin: left; transition: transform var(--_od-t-move) var(--_od-ease); }
.od-cart__issues { display: grid; gap: var(--_od-s2); margin: 0; padding: 0; list-style: none; }
.od-cart__issue { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_od-s1) var(--_od-s3); padding-top: var(--_od-s2); border-top: 1px solid var(--_od-line); font-size: var(--_od-fz-meta); }
.od-cart__issue-name { flex: 1 1 100%; color: var(--_od-ink); font-weight: var(--_od-fw-medium); }
.od-cart__issue .od-btn--quiet { min-height: calc(var(--_od-target) - var(--_od-s4)); padding: 0 2px; }
.od-cart__why { flex: 1 1 100%; color: var(--_od-ink-soft); font-size: var(--_od-fz-tag); }
.od-cart__gate { margin: 0; color: var(--_od-ink-soft); font-size: var(--_od-fz-meta); }
.od-cart__gate:empty { display: none; }
.od-cart__gate .od-gate, [data-orderday-gate] .od-gate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_od-s2) var(--_od-s3); padding: var(--_od-s2) 0; }
.od-gate + .od-gate { border-top: 1px solid var(--_od-line); }
.od-gate__txt { flex: 1 1 14em; color: var(--_od-ink); }
.od-gate__note { color: var(--_od-ink-soft); }
.od-gate__pc { display: flex; flex: 1 1 100%; align-items: center; gap: var(--_od-s2); }
.od-gate__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.od-gate__input { flex: 0 1 9em; min-width: 0; }

/* ---------- mounts: `full` ---------- */
.od-mount { color: var(--_od-ink); font-family: var(--_od-font); }
.od-mount--full { display: grid; gap: var(--_od-s3); align-items: stretch; container-type: inline-size; margin: 0; }
.od-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; padding: 3px; border-radius: var(--_od-r-pill); background: var(--_od-segment); }
.od-modes label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--_od-target) - var(--_od-s3)); padding: 0 var(--_od-s4); border-radius: var(--_od-r-pill); font-size: var(--_od-fz-ui); font-weight: var(--_od-fw-medium); cursor: pointer;
  transition: background-color var(--_od-t-color) var(--_od-ease), color var(--_od-t-color) var(--_od-ease); }
.od-modes input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.od-modes label:has(input:checked) { background: var(--_od-chip); color: var(--_od-on-chip); }
.od-modes label:has(input:focus-visible) { outline: var(--_od-focus-w) solid var(--_od-focus); outline-offset: var(--_od-focus-o); }

.od-days { display: flex; flex-wrap: wrap; gap: var(--_od-s2); }
.od-day { position: relative; box-sizing: border-box; display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: calc((100% - 3 * var(--_od-s2)) / 4); min-height: var(--_od-day-h); padding: 0 6px;
  border: 1px solid var(--_od-line-strong); border-radius: var(--_od-r-pill); background: transparent; color: var(--_od-ink); line-height: var(--_od-lh-tight); text-align: center; text-decoration: none; cursor: pointer; font-variant-numeric: tabular-nums lining-nums;
  transition: background-color var(--_od-t-color) var(--_od-ease), border-color var(--_od-t-color) var(--_od-ease), transform var(--_od-t-press) var(--_od-ease); }
.od-day:active { transform: scale(.97); }
.od-day input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.od-day__d { font-size: var(--_od-fz-ui); font-weight: var(--_od-fw-medium); }
.od-day__cap { max-width: 100%; margin-top: 2px; color: var(--_od-ink-soft); font-size: var(--_od-fz-tag); hyphens: manual; }
.od-day:hover { background: var(--_od-hover); }
.od-day:has(input:checked) { border-color: var(--_od-selected); background: var(--_od-selected); color: var(--_od-on-selected); }
.od-day:has(input:checked) .od-day__cap { color: var(--_od-on-selected); }
.od-day:has(input:disabled) { border-color: var(--_od-line); background: transparent; color: var(--_od-ink-muted); cursor: not-allowed; }
.od-day:has(input:disabled) .od-day__cap { color: var(--_od-ink-muted); }
.od-day:has(input:disabled) input { cursor: not-allowed; }
.od-day:has(input:focus-visible) { outline: var(--_od-focus-w) solid var(--_od-focus); outline-offset: var(--_od-focus-o); }
.od-day--more { border-style: dashed; color: var(--_od-ink); }

/* time row: 3-across at every width; a pill grows only when it carries a second line */
.od-windows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--_od-s2); }
.od-win { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(var(--_od-target) - var(--_od-s1)); padding: var(--_od-s1) var(--_od-s2); border: 1px solid var(--_od-line-strong); border-radius: var(--_od-r-pill); background: transparent; color: var(--_od-ink); font: inherit; font-size: var(--_od-fz-ui); font-weight: var(--_od-fw-medium); font-variant-numeric: tabular-nums; line-height: var(--_od-lh-ui); text-align: center; cursor: pointer;
  transition: background-color var(--_od-t-color) var(--_od-ease), color var(--_od-t-color) var(--_od-ease), border-color var(--_od-t-color) var(--_od-ease), transform var(--_od-t-press) var(--_od-ease); }
.od-win:hover { border-color: var(--_od-ink); background: var(--_od-hover); }
.od-win:active { transform: scale(.97); }
.od-win__sub { margin-top: 2px; color: var(--_od-ink-soft); font-size: var(--_od-fz-tag); font-weight: 400; white-space: nowrap; }
.od-win__sub.is-low { color: var(--_od-low); }
.od-win[aria-checked="true"] { border-color: var(--_od-chip); background: var(--_od-chip); color: var(--_od-on-chip); }
.od-win[aria-checked="true"] .od-win__sub { color: var(--_od-on-chip); opacity: .8; }
.od-win[aria-disabled="true"] { border-color: var(--_od-line); background: transparent; color: var(--_od-ink-muted); cursor: not-allowed; transform: none; }
.od-win[aria-disabled="true"] .od-win__sub { color: var(--_od-ink-muted); }
.od-mount--full[data-state="none"] .od-windows { opacity: .6; }
html:not(.od-js) .od-windows { display: none; }   /* without JS the <select> in .od-mount__nojs is the time step */

.od-mount__summary { margin: 0; color: var(--_od-ink); font-size: var(--_od-fz-body); font-weight: var(--_od-fw-medium); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.od-mount__note { margin: 0; color: var(--_od-ink-soft); font-size: var(--_od-fz-meta); }
.od-mount__rule { display: block; }

/* collapsible mounts: the sentence + Change until expanded */
.od-mount__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_od-s1) var(--_od-s3); }
.od-mount__bar .od-mount__summary { flex: 1 1 12rem; }
.od-mount:not(.od-mount--collapsed) .od-mount__bar { display: none; }
.od-mount--collapsed > :not(.od-mount__bar):not(.od-mount__moved):not(input[type="hidden"]) { display: none; }
/* an explicitly chosen time went stale and was moved (Orderday.moved()) — said once, until the next choice */
.od-mount__moved { margin: 0; padding: var(--_od-s2) var(--_od-s3); border-radius: var(--_od-r-s); background: var(--_od-warn-bg); color: var(--_od-warn-ink); font-size: var(--_od-fz-meta); line-height: var(--_od-lh-body); text-wrap: pretty; font-variant-numeric: tabular-nums; }
.od-mount__moved[hidden] { display: none; }

/* no-JS fields (GET form) — hidden once the script runs */
.od-mount__nojs { display: flex; flex-wrap: wrap; align-items: end; gap: var(--_od-s3) var(--_od-s4); padding: var(--_od-s3); border-radius: var(--_od-r-m); background: var(--_od-ground); }
.od-field { display: grid; gap: var(--_od-s1); color: var(--_od-ink-soft); font-size: var(--_od-fz-meta); }
.od-field input, .od-field select { min-height: calc(var(--_od-target) - var(--_od-s1)); padding: 0 var(--_od-s3); border: 1px solid var(--_od-line-strong); border-radius: var(--_od-r-s); background: var(--_od-surface); color: var(--_od-ink); font: inherit; font-size: var(--_od-fz-ui); }
.od-js .od-mount__nojs, .od-js .od-mount__submit { display: none; }

/* narrow hosts (sidebars, drawers at 375): cells grow to two lines instead of clipping */
@container (max-width: 360px) {
  .od-day { height: auto; min-height: calc(var(--_od-target) + var(--_od-s2)); padding: var(--_od-s1); }
  .od-day__cap { line-height: 1.1; }
  .od-day__cap-prefix, .od-day--more .od-day__cap { display: none; }
  .od-win { padding: var(--_od-s1); font-size: var(--_od-fz-meta); }
}
@container (max-width: 300px) {
  .od-day { padding: var(--_od-s1) 0; }
  .od-windows { grid-template-columns: 1fr; }
}

html:not(.od-js) .od-mount--checkout :is(.od-modes, .od-days, .od-windows) { display: none; }   /* without JS the shipping radios pick the mode and the <noscript> fields the day */

/* ---------- mounts: `compact` ---------- */
.od-mount--compact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_od-s1) var(--_od-s3); margin: 0; font-size: var(--_od-fz-ui); }
.od-compact__text { font-weight: var(--_od-fw-medium); font-variant-numeric: tabular-nums; }
.od-compact__link { display: inline-flex; align-items: center; min-height: var(--_od-target); color: var(--_od-link); text-underline-offset: .15em; }
.od-compact__link:hover { color: var(--_od-link-hover); }

/* the product line (single product): compact mount + the product's own conflict */
.od-product-line { display: grid; gap: var(--_od-s1); margin: var(--_od-s3) 0; }
.od-product-line__conflict { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_od-s1) var(--_od-s2); margin: 0; color: var(--_od-ink-soft); font-size: var(--_od-fz-meta); }
.od-product-line__conflict:not(:has(:not([hidden]))) { display: none; }

/* ---------- promise chip (theme-owned element; only the parts) ---------- */
.od-promise__short { display: none; }
@media (max-width: 599px) { .od-promise__long { display: none; } .od-promise__short { display: inline; } }
.od-promise__edit { color: var(--_od-link); }

/* ---------- order screens (thank-you, My Account) ---------- */
.od-booking { margin: 0 0 var(--_od-s5); padding: var(--_od-s4); border: 1px solid var(--_od-line); border-radius: var(--_od-r-m); background: var(--_od-ground); color: var(--_od-ink); }
.od-booking__title { margin: 0 0 var(--_od-s2); font-size: var(--_od-fz-body); font-weight: var(--_od-fw-strong); }
.od-booking__summary { margin: 0 0 var(--_od-s2); font-weight: var(--_od-fw-medium); font-variant-numeric: tabular-nums; }
.od-booking__list { display: grid; grid-template-columns: max-content 1fr; gap: var(--_od-s1) var(--_od-s4); margin: 0; font-size: var(--_od-fz-meta); }
.od-booking__list dt { color: var(--_od-ink-soft); }
.od-booking__list dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- reduced motion: the sheet must also not travel ---------- */
@media (prefers-reduced-motion: reduce) {
  .od-sheet, .od-sheet-host[data-open] .od-sheet { transform: translate(-50%, 0); }
  .od-sheet-host { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 599px) {
  .od-sheet, .od-sheet-host[data-open] .od-sheet { transform: none; }
}

/* ---------- automatic placements (cart page, checkout) ---------- */
.orderday-cart-block { display: grid; gap: var(--_od-s4); margin-bottom: var(--_od-s5); }
.orderday-checkout { display: grid; gap: var(--_od-s3); margin: 0 0 var(--_od-s5); }
.orderday-checkout__title { margin: 0; }