:root {
  color-scheme: light;
  --canvas: oklch(0.985 0.002 165);
  --surface: oklch(1 0 0);
  --surface-soft: oklch(0.965 0.006 165);
  --surface-strong: oklch(0.925 0.008 165);
  --ink: oklch(0.20 0.018 165);
  --ink-soft: oklch(0.32 0.02 165);
  --muted: oklch(0.46 0.018 165);
  --subtle: oklch(0.58 0.012 165);
  --line: oklch(0.88 0.008 165);
  --line-strong: oklch(0.70 0.015 165);
  --accent: oklch(0.47 0.075 165);
  --accent-dark: oklch(0.34 0.06 165);
  --accent-soft: oklch(0.94 0.025 155);
  --accent-faint: oklch(0.975 0.01 155);
  --signal: oklch(0.78 0.11 105);
  --success: oklch(0.47 0.1 155);
  --success-soft: oklch(0.96 0.03 155);
  --danger: oklch(0.49 0.17 28);
  --shadow-sm: 0 0.0625rem 0.125rem rgb(20 34 29 / 0.03);
  --shadow-md: 0 1.25rem 3.5rem rgb(20 34 29 / 0.1);
  --radius-xs: 0.45rem;
  --radius-sm: 0.65rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.15rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --text-caption: 0.75rem;
  --text-secondary: 0.875rem;
  --text-body: 1rem;
  --text-subheading: 1.1875rem;
  --text-heading: 1.875rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-kerning: normal;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 20rem; background: var(--canvas); color: var(--ink); font-size: var(--text-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 0.1875rem solid color-mix(in oklab, var(--accent) 45%, transparent); outline-offset: 0.1875rem; }

.skip-link { position: fixed; z-index: 50; top: var(--space-sm); left: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--ink); color: white; transform: translateY(-180%); transition: transform 180ms var(--ease-out); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 4; border-bottom: 0.0625rem solid var(--line); background: var(--surface); }
.header-inner, .page-shell { width: min(94rem, calc(100% - 3rem)); margin-inline: auto; }
.header-inner { min-height: 4.25rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--ink); font-size: 1.05rem; font-weight: 820; letter-spacing: -0.025em; text-decoration: none; }
.brand-mark { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 0.25rem; background: var(--ink); color: white; font-size: 0.9rem; font-weight: 850; }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-size: 1rem; letter-spacing: -0.02em; }
.brand-copy small { margin-top: 0.25rem; color: var(--muted); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.01em; }
.header-status { display: flex; align-items: center; gap: var(--space-xs); padding: 0; border: 0; color: var(--muted); font-size: var(--text-caption); font-weight: 680; }
.status-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--success); }

.page-shell { padding-block: 0 7rem; }
.intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(19rem, 0.6fr); gap: clamp(3rem, 8vw, 9rem); align-items: end; min-height: 17.5rem; padding: clamp(2.5rem, 4vw, 4rem) 2rem clamp(2.25rem, 3.5vw, 3.25rem); border-bottom: 0.0625rem solid var(--line); background: var(--surface); color: var(--ink); }
.intro::before, .intro::after { display: none; }
.intro-copy { min-width: 0; }
.context-label, .step-context { margin-bottom: var(--space-xs); color: var(--accent-dark); font-size: var(--text-caption); font-weight: 800; letter-spacing: 0.075em; text-transform: uppercase; }
.context-label { display: flex; align-items: center; gap: 0.65rem; color: var(--accent-dark); }
.context-label span { width: 1.75rem; height: 0.125rem; background: currentColor; }
.intro h1 { max-width: 52rem; margin-bottom: 1rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.8rem, 4.8vw, 4.5rem); font-weight: 400; line-height: 0.95; letter-spacing: -0.04em; }
.lede { max-width: 42rem; margin-bottom: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.intro-guide { padding: 0; border-top: 0.0625rem solid var(--ink); background: transparent; }
.intro-guide > p { margin: 0; padding: 0.7rem 0; border-bottom: 0.0625rem solid var(--line); color: var(--muted); font-family: Georgia, "Times New Roman", serif; font-size: 0.95rem; }
.intro-guide ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.intro-guide li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.65rem; align-items: center; padding: 0.6rem 0; border-bottom: 0.0625rem solid var(--line); font-size: var(--text-caption); font-weight: 650; }
.intro-guide li span { color: var(--accent); font-size: 0.8rem; font-weight: 850; }

.progress-wrap { width: 100%; margin: 0; overflow-x: auto; border-bottom: 0.0625rem solid var(--line); scrollbar-width: none; scroll-margin-top: 1rem; }
.progress-wrap::-webkit-scrollbar { display: none; }
.progress { min-width: 44rem; display: grid; grid-template-columns: repeat(var(--step-count, 5), 1fr); margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--surface); box-shadow: none; list-style: none; }
.progress li { position: relative; }
.progress li + li::before { content: ""; position: absolute; z-index: 1; top: 1.05rem; bottom: 1.05rem; left: 0; width: 0.0625rem; background: var(--line); }
.progress button { width: 100%; min-height: 3.65rem; display: grid; grid-template-columns: 1.65rem 1fr; grid-template-rows: auto auto; column-gap: 0.6rem; align-items: center; padding: 0.55rem 0.8rem; border: 0; border-radius: 0; background: transparent; color: var(--muted); text-align: left; transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out); }
.progress li:first-child button { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.progress li:last-child button { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.progress button > span { grid-row: 1 / 3; width: 1.65rem; height: 1.65rem; display: grid; place-items: center; border: 0.0625rem solid var(--line-strong); border-radius: 50%; background: white; color: var(--muted); font-size: 0.68rem; font-weight: 800; transition: 180ms var(--ease-out); }
.progress strong { align-self: end; color: var(--ink); font-size: var(--text-secondary); line-height: 1.2; }
.progress small { align-self: start; margin-top: 0.12rem; color: var(--subtle); font-size: var(--text-caption); line-height: 1.2; }
.progress li:not(.completed):not(.active) button { cursor: not-allowed; }
.progress .active button { background: var(--surface-soft); box-shadow: inset 0 -0.15rem var(--ink); }
.progress .active button > span { border-color: var(--ink); background: var(--ink); color: white; box-shadow: none; }
.progress .completed button { cursor: pointer; }
.progress .completed button > span { border-color: var(--success); background: var(--success-soft); color: var(--success); font-size: 0; }
.progress .completed button > span::before { content: "✓"; font-size: var(--text-caption); }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(28rem, 31rem); gap: 0; align-items: stretch; border-bottom: 0.0625rem solid var(--line); }
.main-column { min-width: 0; }
.panel, .cart { border: 0; border-radius: 0; background: var(--surface); box-shadow: none; }
.panel { min-height: 33rem; padding: clamp(1.4rem, 2.7vw, 2.6rem) clamp(1.5rem, 4vw, 4rem); }
.panel-heading { margin-bottom: 0.85rem; padding-bottom: 0; border-bottom: 0; }
.panel-heading h2 { margin-bottom: 0.4rem; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 400; line-height: 1.02; letter-spacing: -0.035em; }
.panel-heading h2:focus { outline: none; }
.panel-heading p:not(.step-context) { max-width: 46rem; margin-bottom: 0; color: var(--muted); }

.rooms-field { display: grid; grid-template-columns: minmax(10rem, 1fr) auto; align-items: center; gap: 0.2rem var(--space-lg); padding: 0.7rem 0 0.8rem; border-bottom: 0.0625rem solid var(--ink); background: white; color: var(--ink); }
.rooms-field::after { display: none; }
.rooms-field > label { font-size: var(--text-subheading); font-weight: 760; }
.field-help, .field-error { grid-column: 1; margin-bottom: 0; font-size: var(--text-secondary); }
.field-help { color: var(--muted); }
.field-error { color: oklch(0.87 0.09 28); }
.number-control { display: grid; grid-template-columns: 2.75rem minmax(3rem, 4.5rem) 2.75rem; align-items: center; }
.number-control button { min-width: 2.75rem; min-height: 2.75rem; border: 0.0625rem solid var(--line); background: white; color: var(--ink); font-size: 1.15rem; transition: background-color 150ms ease, border-color 150ms ease; }
.number-control button:hover { z-index: 1; border-color: var(--accent); background: var(--accent-faint); color: var(--accent-dark); }
.number-control button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.number-control button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.number-control input { width: 100%; min-height: 2.75rem; border: 0; border-block: 0.0625rem solid var(--line); background: white; color: var(--ink); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.number-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.large-number-control { grid-row: 1 / 3; grid-column: 2; grid-template-columns: 3.2rem 5.5rem 3.2rem; }
.large-number-control button, .large-number-control input { min-height: 3rem; }
.large-number-control input { font-size: 1.3rem; }

.zone { margin: 0.8rem 0 0; padding: 0; border: 0; }
.zone + .zone { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 0.0625rem solid var(--line); }
.zone legend { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); margin-bottom: 0.6rem; padding: 0; }
.zone legend span { font-size: var(--text-subheading); font-weight: 760; }
.zone legend small { color: var(--muted); font-size: var(--text-secondary); }
.freestanding-choice { display: flex; align-items: center; gap: 0.5rem; min-height: 1.9rem; padding-block: 0.35rem 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.25; cursor: pointer; }
.freestanding-choice input { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin: 0.1rem 0 0; accent-color: var(--accent); cursor: pointer; }
.freestanding-choice > span { display: inline-flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; }
.freestanding-choice small { display: inline; margin: 0; color: var(--subtle); font-size: 0.67rem; text-decoration: underline dotted; text-underline-offset: 0.18em; }
.freestanding-choice:has(input:checked) > span { color: var(--accent-dark); }
.freestanding-choice:has(input:disabled), .freestanding-choice input:disabled { cursor: not-allowed; }
.freestanding-choice:has(input:disabled) > span, .freestanding-choice:has(input:disabled) small { color: var(--muted); }
.count-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem; }
.count-choices-sink { grid-template-columns: repeat(3, 1fr); }
.count-choices label, .product-choice, .line-option { position: relative; display: block; }
.count-choices input, .product-choice input, .line-option input { position: absolute; width: 0.0625rem; height: 0.0625rem; opacity: 0; pointer-events: none; }
.count-choices label > span { min-height: 5.3rem; display: flex; flex-direction: column; justify-content: space-between; padding: 0.85rem; border: 0.0625rem solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out); }
.count-choices b { font-size: 1.4rem; line-height: 1; }
.count-choices em { color: var(--muted); font-size: var(--text-secondary); font-style: normal; }
.count-choices input:checked + span, .product-choice input:checked + .product-choice-content, .line-option input:checked + .line-option-content { border-color: var(--accent); background: var(--accent-faint); box-shadow: inset 0 0 0 0.0625rem var(--accent); }
.count-choices input:checked + span::after, .product-choice input:checked + .product-choice-content::after, .line-option input:checked + .line-option-content::after { content: "✓"; position: absolute; top: 0.65rem; right: 0.65rem; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--signal); font-size: 0.68rem; font-weight: 900; }
.count-choices input:focus-visible + span, .product-choice input:focus-visible + .product-choice-content, .line-option input:focus-visible + .line-option-content { outline: 0.1875rem solid color-mix(in oklab, var(--accent) 42%, transparent); outline-offset: 0.1875rem; }
.product-checkboxes .product-choice-content { min-height: 4.1rem; justify-content: center; gap: 0.2rem; padding: 0.6rem 3rem 0.6rem 0.8rem; border-radius: 0; }
.product-checkboxes .product-choice-title { padding: 0; font-size: var(--text-body); }
.product-checkboxes .product-choice-content small { font-size: var(--text-caption); }
.combination-advice { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.65rem; align-items: start; margin-top: var(--space-sm); padding: 0.8rem 0.9rem; border: 0.0625rem solid oklch(0.79 0.08 68); border-radius: var(--radius-sm); background: oklch(0.97 0.025 72); color: oklch(0.34 0.045 55); font-size: var(--text-secondary); line-height: 1.45; }
.combination-advice[hidden] { display: none; }
.combination-advice > span { width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: 50%; background: oklch(0.55 0.12 55); color: white; font-size: var(--text-caption); font-weight: 800; }
.combination-advice p { margin: 0; }
.combination-advice strong { color: oklch(0.27 0.045 55); }
.configuration-math { margin: 0.8rem 0 0; padding-block: 0.55rem; border-block: 0.0625rem solid var(--line); color: var(--ink-soft); font-size: var(--text-caption); }
.refill-row .refill-capacity { margin-top: 0.65rem; color: var(--muted); font-size: var(--text-caption); }
.number-control button:disabled { color: var(--subtle); background: var(--surface-soft); opacity: 0.6; }
.form-error { min-height: 1.1rem; margin: 0.5rem 0 0; color: var(--danger); font-size: var(--text-caption); font-weight: 700; }

.product-choices { display: grid; gap: 0.55rem; }
.two-columns { grid-template-columns: repeat(2, 1fr); }
.color-options { grid-template-columns: repeat(3, 1fr); }
.product-choice-content { position: relative; min-height: 5rem; display: flex; flex-direction: column; justify-content: space-between; padding: 0.8rem; border: 0.0625rem solid var(--line); border-radius: 0; background: white; transition: 160ms var(--ease-out); }
.product-choice-title { display: flex; align-items: center; gap: var(--space-sm); padding-right: 1.4rem; font-weight: 760; }
.product-choice-content small { color: var(--muted); line-height: 1.35; }
.swatch { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; border: 0.0625rem solid rgb(17 29 47 / 0.2); border-radius: 50%; background: var(--swatch); }
.product-choice-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
#brackets-panel .zone { margin-top: 1rem; border: 0; }
#brackets-panel .zone:first-child { margin-top: 0; }
#brackets-panel .zone legend { margin-bottom: 0.5rem; }
#brackets-panel .zone legend > span { font-size: var(--text-body); font-weight: 650; }
#brackets-panel .bracket-options, #brackets-panel .color-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.mount-note { width: 100%; display: none; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.45rem; align-items: start; margin: 0.5rem 0 0; padding: 0.5rem 0.65rem; border: 0.0625rem solid var(--line); border-radius: var(--radius-xs); background: var(--accent-faint); color: var(--muted); font-size: 0.69rem; line-height: 1.4; text-wrap: pretty; }
.bracket-options:has(input[name="bracketMount"]) + .mount-note { display: grid; }
.mount-note-icon { width: 1rem; height: 1rem; display: grid; place-items: center; margin-top: 0.02rem; border: 0.0625rem solid var(--line-strong); border-radius: 50%; color: var(--accent-dark); font-size: 0.62rem; font-weight: 800; line-height: 1; }
.mount-note strong { color: var(--ink-soft); font-weight: 700; }
#brackets-panel .product-choice-content { min-height: 4.4rem; justify-content: center; padding: 0.7rem 2rem 0.7rem 0.75rem; border-radius: var(--radius-sm); transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out); }
#brackets-panel .product-choice--illustrated .product-choice-content { min-height: 5.35rem; flex-direction: row; align-items: center; justify-content: start; gap: 0.7rem; }
#brackets-panel .product-choice-title { padding: 0; font-size: var(--text-body); font-weight: 650; }
#brackets-panel .product-choice-content small { font-size: 0.75rem; line-height: 1.35; }
.bracket-option-icon { flex: 0 0 auto; width: 2.65rem; height: 2.65rem; color: var(--muted); transition: color 160ms var(--ease-out); }
#brackets-panel .product-choice-content::after { content: ""; position: absolute; top: 0.7rem; right: 0.7rem; width: 0.9rem; height: 0.9rem; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); }
#brackets-panel .product-choice input:checked + .product-choice-content { background: var(--surface); border-color: var(--accent); box-shadow: inset 0 0 0 0.5px var(--accent); }
#brackets-panel .product-choice input:checked + .product-choice-content::after { content: ""; border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
#brackets-panel .product-choice input:checked + .product-choice-content .bracket-option-icon { color: var(--accent-dark); }
#brackets-panel .product-choice:hover .product-choice-content { transform: none; box-shadow: none; }
#brackets-panel .product-choice:hover input:not(:checked) + .product-choice-content { border-color: var(--line-strong); background: var(--surface-soft); }
#brackets-panel .color-options .product-choice-content { min-height: 4.1rem; }
#brackets-panel .color-options .product-choice-content small { padding-left: 1.65rem; }
#brackets-panel .color-options .swatch { width: 1.1rem; height: 1.1rem; }
#brackets-panel .selected-product-strip { margin-top: 1rem; padding: 0.8rem 0 0; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: 0.75rem; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
#brackets-panel .selected-product-strip img { width: 3.2rem; height: 3.2rem; padding: 0; }
#brackets-panel .selected-product-strip h3 { font-weight: 650; }
#brackets-panel .selected-product-strip p { font-size: var(--text-caption); }
#brackets-panel .selected-product-strip > strong { font-size: var(--text-body); font-weight: 650; }

@media (max-width: 34rem) {
  #brackets-panel .product-choice--illustrated .product-choice-content { min-height: 6.35rem; flex-direction: column; align-items: start; gap: 0.4rem; padding: 0.7rem 0.65rem; }
  .bracket-option-icon { width: 2.25rem; height: 2.25rem; }
  #brackets-panel .product-choice--illustrated .product-choice-title { padding-right: 0; }
  #brackets-panel .color-options .product-choice-content { padding: 0.8rem 1.9rem 0.8rem 0.65rem; }
  #brackets-panel .color-options .product-choice-title { gap: 0.45rem; }
  #brackets-panel .color-options .swatch { width: 1.1rem; height: 1.1rem; }
  #brackets-panel .color-options .product-choice-content small { padding-left: 0; }
  #brackets-panel .selected-product-strip { grid-template-columns: 3rem minmax(0, 1fr); gap: 0.5rem 0.75rem; }
  #brackets-panel .selected-product-strip img { width: 3rem; height: 3.5rem; grid-row: 1 / 3; }
  #brackets-panel .selected-product-strip > strong { grid-column: 2; }
}
.selected-product-strip { display: grid; grid-template-columns: 5.25rem 1fr auto; gap: var(--space-md); align-items: center; margin-top: var(--space-lg); padding: var(--space-md); border: 0.0625rem solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); }
.selected-product-strip img { width: 5.25rem; height: 5.25rem; padding: 0.35rem; border-radius: var(--radius-sm); background: white; object-fit: contain; }
.selected-product-strip h3 { margin-bottom: var(--space-2xs); font-size: var(--text-body); }
.selected-product-strip p { margin-bottom: 0; color: var(--muted); font-size: var(--text-secondary); }
.selected-product-strip strong { white-space: nowrap; font-size: var(--text-subheading); font-variant-numeric: tabular-nums; }

.requirements-wrap { margin-bottom: 1rem; padding: 0.75rem; border: 0.0625rem solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); }
.requirements-wrap > strong { display: block; margin-bottom: var(--space-sm); font-size: var(--text-secondary); }
.requirements { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.requirements li { padding: 0.32rem 0.6rem; border: 0.0625rem solid var(--line); border-radius: 999px; background: white; color: var(--ink-soft); font-size: var(--text-caption); font-weight: 700; }
.line-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); }
.line-results-head h3 { margin-bottom: 0; font-size: var(--text-body); }
.mount-included { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); }
.mount-included-icons { display: flex; flex-shrink: 0; gap: 0.25rem; color: var(--ink-soft); }
.mount-included-icons .bracket-option-icon { width: 2rem; height: 2.5rem; }
.mount-included strong { font-size: var(--text-body); font-weight: 650; }
.mount-included p { margin: 0.25rem 0 0; color: var(--muted); font-size: var(--text-secondary); line-height: 1.5; }
.line-results-head span { color: var(--muted); font-size: var(--text-secondary); }
.line-price-help { margin: 0 0 1rem; max-width: 70ch; color: var(--muted); font-size: var(--text-secondary); line-height: 1.5; }
.line-price-help strong { color: var(--ink-soft); font-weight: 600; }
.line-list { display: flex; flex-direction: column; gap: 0.5rem; }
.line-option-content { position: relative; min-height: 6.2rem; display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.7rem 2.4rem 0.7rem 0.65rem; border: 0.0625rem solid var(--line); border-radius: 0; background: white; transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.line-option-image { width: 4rem; height: 4rem; padding: 0.25rem; border-radius: var(--radius-sm); background: var(--surface-soft); object-fit: contain; }
.line-option-details { min-width: 0; }
.line-option-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.line-option-name { display: block; font-size: var(--text-body); font-weight: 700; cursor: pointer; }
.line-option-name::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; }
.line-coverage { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.4; }
.line-certifications { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin-top: 0.2rem; }
.certification-button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; max-width: 100%; padding: 0.2rem 0; border: 0; border-radius: 0.2rem; background: none; color: var(--muted); font: inherit; font-size: var(--text-caption); font-weight: 650; text-align: left; cursor: help; }
.certification-button svg { flex-shrink: 0; }
.certification-button:hover, .certification-button[aria-expanded="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.certification-button:focus-visible { outline: 0.15rem solid var(--accent); outline-offset: 0.15rem; }
.certification-tooltip { position: fixed; inset: auto; width: min(22rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); overflow: auto; margin: 0; padding: 1rem; border: 0.0625rem solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-md); font-size: var(--text-secondary); line-height: 1.5; }
.certification-tooltip strong { display: block; margin-bottom: 0.35rem; font-weight: 700; }
.certification-tooltip p { margin: 0; color: var(--muted); }
.line-price { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; text-align: right; font-size: var(--text-caption); color: var(--muted); }
.line-price-label { color: var(--ink-soft); font-size: var(--text-caption); font-weight: 600; }
.line-price strong { display: block; color: var(--ink); font-size: 1.25rem; line-height: 1.35; font-weight: 700; font-variant-numeric: tabular-nums; }
.line-refill-price { margin-top: 0.45rem; font-size: var(--text-caption); }
.line-refill-price span { white-space: nowrap; }
.empty-state { padding: var(--space-md); border: 0.0625rem solid oklch(0.85 0.04 28); border-radius: var(--radius-md); background: oklch(0.97 0.025 28); color: oklch(0.4 0.12 28); }

.product-review-list { display: flex; flex-direction: column; }
.product-review { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr) minmax(13rem, 0.65fr); gap: 1rem; align-items: center; padding: 0.85rem 0; border-bottom: 0.0625rem solid var(--line); }
.product-review:first-child { padding-top: 0; }
.product-review:last-child { padding-bottom: 0; border-bottom: 0; }
.product-review-image { width: 5.75rem; height: 6.5rem; padding: 0.35rem; border-radius: var(--radius-md); background: var(--surface-soft); object-fit: contain; }
.product-review h3 { margin-bottom: var(--space-2xs); font-size: var(--text-subheading); }
.product-review .variant { margin-bottom: var(--space-sm); color: var(--muted); font-size: var(--text-secondary); }
.product-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.product-tag { padding: 0.28rem 0.5rem; border-radius: 999px; background: var(--success-soft); color: var(--success); font-size: var(--text-caption); font-weight: 750; }
.product-facts { margin: 0; padding: 0.45rem 0.75rem; border-radius: var(--radius-sm); background: var(--surface-soft); }
.product-facts div { display: flex; justify-content: space-between; gap: var(--space-md); padding: 0.4rem 0; border-bottom: 0.0625rem solid var(--line); }
.product-facts div:last-child { border-bottom: 0; }
.product-facts dt, .product-facts dd { margin: 0; font-size: var(--text-caption); }
.product-facts dt { color: var(--muted); }
.product-facts dd { font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }
.product-facts .product-unit-price, .dialog-product-facts .product-unit-price { color: var(--muted); font-size: 0.6875rem; font-weight: 400; white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.price-display { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0.2rem 0.4rem; max-width: 100%; font-variant-numeric: tabular-nums; }
.price-current { white-space: nowrap; }
.price-original { color: var(--muted); font-size: var(--text-caption); font-weight: 400; white-space: nowrap; text-decoration-thickness: 1px; }
.price-display--sale .price-current { color: var(--accent-dark); }
.sale-badge { display: inline-flex; align-items: center; padding: 0.12rem 0.35rem; border-radius: 0.25rem; background: var(--accent-soft); color: var(--accent-dark); font-size: var(--text-caption); line-height: 1.35; font-weight: 650; white-space: nowrap; }
.line-price .price-display { justify-content: flex-start; }
.product-facts .product-unit-price { display: block; margin-top: 0.1rem; }
.refill-meta .price-display { justify-content: flex-start; }

.refill-list { display: flex; flex-direction: column; gap: 0.5rem; }
.refill-row, .accessory-row { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.75rem; border: 0.0625rem solid var(--line); border-radius: 0; background: white; transition: border-color 160ms ease, box-shadow 160ms ease; }
.refill-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 0.1875rem var(--accent-soft); }
.refill-row img, .accessory-row img { width: 5rem; height: 5rem; padding: 0.3rem; border-radius: var(--radius-sm); background: var(--surface-soft); object-fit: contain; }
.refill-row h3, .accessory-row h3 { margin-bottom: var(--space-2xs); font-size: var(--text-body); }
.refill-row p, .accessory-row p { margin-bottom: 0; color: var(--muted); font-size: var(--text-secondary); }
.refill-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); color: var(--ink); font-size: var(--text-secondary); }
.refill-meta strong { font-variant-numeric: tabular-nums; }
.accessory-row { margin-top: 1rem; background: var(--surface-soft); }
.completion-note { margin-top: var(--space-lg); padding: var(--space-md); border: 0.0625rem solid oklch(0.79 0.045 160); border-radius: var(--radius-md); background: var(--success-soft); color: oklch(0.36 0.075 160); }
.completion-note strong { display: block; margin-bottom: var(--space-2xs); }
.completion-note p { margin-bottom: 0; font-size: var(--text-secondary); }

.panel-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: 0.8rem; padding-top: 0.8rem; border-top: 0.0625rem solid var(--line); }
.panel-actions-end { justify-content: flex-end; }
.button-primary, .button-secondary, .button-quiet, .button-small { min-height: 2.75rem; border-radius: 0.15rem; font-weight: 750; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
.button-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: 0.75rem 1.15rem; border: 0.0625rem solid var(--ink); background: var(--ink); color: white; box-shadow: 0 0.45rem 1rem rgb(20 44 38 / 0.18); }
.button-primary span { color: var(--signal); }
.button-primary:hover { border-color: var(--accent); background: var(--accent); transform: translateY(-0.0625rem); }
.button-primary:active { transform: translateY(0.0625rem); }
.button-primary:disabled { border-color: var(--line-strong); background: var(--line-strong); box-shadow: none; transform: none; }
.button-secondary { padding: 0.65rem 0.8rem; border: 0.0625rem solid var(--line); background: white; color: var(--ink); }
.button-secondary:hover, .button-small:hover { border-color: var(--line-strong); background: var(--surface-soft); }
.button-quiet { padding: 0.65rem 0; border: 0; background: transparent; color: var(--muted); }
.button-quiet:hover { color: var(--ink); }
.button-small { min-height: 2.25rem; padding: 0.45rem 0.65rem; border: 0.0625rem solid var(--line); background: white; color: var(--muted); font-size: var(--text-caption); }
.button-small[aria-pressed="true"], .button-secondary[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }

.cart { position: sticky; top: 0; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); align-self: start; overflow: hidden; border-left: 0.0625rem solid var(--line); background: var(--surface-soft); box-shadow: none; scroll-margin-top: 1rem; }
.cart-visual { position: relative; z-index: 1; min-height: 12.5rem; padding: 1rem 1.4rem 0.7rem; overflow: hidden; border-bottom: 0.0625rem solid var(--line); background: #fff; color: var(--ink); }
.cart-details-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.print-document-head, .print-configuration { display: none; }
.cart-visual::before { display: none; }
.cart-visual-head { position: relative; z-index: 2; display: flex; align-items: start; justify-content: space-between; gap: var(--space-md); }
.cart-visual-head p { margin-bottom: var(--space-2xs); color: var(--accent-dark); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.065em; text-transform: uppercase; }
.cart-visual-head h2 { margin-bottom: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; font-weight: 400; }
.cart-visual-head > span { max-width: 10rem; padding: 0.25rem 0; border: 0; border-bottom: 0.0625rem solid var(--accent); border-radius: 0; background: transparent; color: var(--accent-dark); font-size: var(--text-caption); font-weight: 650; text-align: right; }
.assembly-stage { display: flex; align-items: stretch; gap: 0.8rem; padding: 0.6rem 0 0.45rem; }
.assembly-zone { flex-basis: 0; min-width: 0; }
.assembly-zone + .assembly-zone { padding-left: 1rem; border-left: 1px solid var(--line); }
.assembly-zone h3 { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-bottom: 0.15rem; color: var(--muted); font-size: var(--text-caption); font-weight: 600; }
.assembly-zone h3 span { color: var(--subtle); font-weight: 400; }
.assembly-zone-mode { min-height: 2.4em; margin: 0 0 0.35rem; color: var(--muted); font-size: 0.65rem; line-height: 1.25; text-align: center; text-wrap: balance; }
.assembly-products { display: flex; justify-content: center; gap: 0.6rem; }
.assembly { flex: 1 1 0; min-width: 0; max-width: 9rem; display: flex; flex-direction: column; align-items: center; justify-content: end; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: zoom-in; }
.bottle-visual { --bottle-height: 7.5rem; --bottle-ratio: 281 / 900; position: relative; display: block; flex: 0 0 auto; width: min(100%, calc(var(--bottle-height) * var(--bottle-ratio))); aspect-ratio: var(--bottle-ratio); }
.bottle-visual img { width: 100%; height: 100%; object-fit: contain; }
.bottle-visual--layered .assembly-photo-crop { position: absolute; overflow: hidden; }
.bottle-visual--layered .assembly-photo-crop img { position: absolute; max-width: none; object-fit: fill; }
.bottle-visual--layered .assembly-abs-shell, .bottle-visual--layered .assembly-pump { position: absolute; object-fit: fill; }
.assembly-abs-shell { z-index: 1; }
.assembly-pump { z-index: 2; }
.bottle-visual--layered [data-finish="white"] { filter: url(#preview-white-plastic); }
.bottle-visual--layered [data-finish="clear"] { filter: url(#preview-clear-plastic); }
.preview-material-filters { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.assembly-mount-band { position: absolute; left: 19.8%; top: 21.1%; width: 60.5%; height: 1.12%; border-radius: 8% / 25%; background: linear-gradient(180deg, color-mix(in srgb, var(--bracket-color) 78%, white), var(--bracket-color) 45%, color-mix(in srgb, var(--bracket-color) 70%, black)); }
.assembly-label { width: 100%; min-height: 1.5rem; margin-top: 0.3rem; color: var(--muted); font-size: 0.62rem; line-height: 1.25; text-align: center; }
.assembly:hover .assembly-label { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 0.2em; }
.assembly-placeholder { width: 100%; margin: 2.7rem auto; color: var(--muted); font-size: var(--text-secondary); text-align: center; }
.assembly-support, .preview-hint { display: none; }
.cart-overview { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; margin: 0 1.4rem; padding: 0.8rem 0; border-bottom: 0.0625rem solid var(--ink); background: transparent; color: var(--ink); }
.cart-overview > span { color: var(--muted); font-size: var(--text-secondary); }
.cart-overview > strong { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.cart-overview > small { grid-column: 1 / -1; color: var(--muted); font-size: var(--text-caption); }
.cart-quantity-note { margin: 0.8rem 1.25rem 0; color: var(--accent-dark); font-size: var(--text-caption); }
.product-dialog { position: fixed; inset: 0; width: min(46rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; overflow: auto; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; color: var(--ink); box-shadow: var(--shadow-md); }
.product-dialog::backdrop { background: rgb(15 23 32 / 0.5); }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.dialog-heading p { margin-bottom: 0.25rem; color: var(--muted); font-size: var(--text-secondary); }
.dialog-heading h2 { margin: 0; font-size: 1.5rem; }
.dialog-heading .button-small { flex-shrink: 0; }
.dialog-product-content { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); align-items: center; gap: 1.5rem; margin-top: 1.5rem; }
.dialog-product-image { display: flex; justify-content: center; min-width: 0; }
.dialog-product-image .bottle-visual { --bottle-height: min(52dvh, 25rem); }
.dialog-product-info { min-width: 0; }
.dialog-description { max-width: 48ch; margin: 0 0 1rem; color: var(--ink-soft); font-size: var(--text-secondary); line-height: 1.6; }
.dialog-product-facts { margin: 1rem 0; }
.dialog-product-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.dialog-product-facts dt, .dialog-product-facts dd { margin: 0; font-size: var(--text-caption); }
.dialog-product-facts dt { color: var(--muted); }
.dialog-product-facts dd { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dialog-product-facts .product-unit-price { display: block; }
.dialog-product-note { margin: 0.5rem 0 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.5; }
body:has(.product-dialog[open]) { overflow: hidden; }
.cart-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--space-md); padding: 1rem 1.4rem 0.7rem; border-bottom: 0.0625rem solid var(--line); }
.cart-heading h2 { margin-bottom: var(--space-2xs); font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; font-weight: 400; letter-spacing: -0.02em; }
.cart-heading p { margin-bottom: 0; color: var(--muted); font-size: var(--text-caption); }
.spares-button { width: calc(100% - 2.5rem); display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-md) 1.25rem 0; padding: 0.75rem; border: 0.0625rem solid oklch(0.84 0.04 55); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--ink); text-align: left; transition: 160ms var(--ease-out); }
.spares-button:hover:not(:disabled) { border-color: var(--accent); }
.spares-button:disabled { opacity: 0.55; }
.spares-button[aria-pressed="true"] { border-color: var(--success); background: var(--success-soft); }
.spares-icon { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-sm); background: white; color: var(--accent-dark); box-shadow: inset 0 0 0 0.0625rem rgb(17 29 47 / 0.06); font-size: var(--text-caption); font-weight: 850; }
.spares-button[aria-pressed="true"] .spares-icon { color: var(--success); }
.spares-button strong, .spares-button small { display: block; }
.spares-button strong { font-size: var(--text-secondary); }
.spares-button small { margin-top: 0.12rem; color: var(--muted); font-size: 0.7rem; line-height: 1.35; }

.refill-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; margin: 0.45rem 0 0.25rem; color: var(--muted); font-size: var(--text-caption); }
.refill-summary strong { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }

.cart-lines { padding: 0 1.4rem; }
.cart-empty { padding: var(--space-lg) 0; color: var(--muted); font-size: var(--text-secondary); text-align: center; }
.cart-group-label { display: block; margin: 0.7rem 0 0.15rem; color: var(--ink); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.045em; text-transform: uppercase; }
.cart-line { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr) auto; gap: 0.35rem 0.6rem; align-items: center; padding: 0.55rem 0; border-bottom: 0.0625rem solid var(--line); }
.cart-line-image { grid-row: 1; width: 2.3rem; height: 2.3rem; padding: 0.15rem; border-radius: var(--radius-xs); background: var(--surface-soft); object-fit: contain; }
.cart-line-main { min-width: 0; }
.cart-line-main strong { display: block; overflow: hidden; color: var(--ink); font-size: 0.79rem; text-overflow: ellipsis; white-space: nowrap; }
.cart-line-main small { display: block; margin-top: 0.08rem; color: var(--muted); font-size: 0.69rem; line-height: 1.35; }
.cart-line-price { align-self: center; color: var(--ink); font-size: var(--text-caption); font-weight: 780; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-line-price .price-display { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; }
.cart-line[data-cart-kind="refill"], .cart-line[data-cart-kind="refill"] .cart-line-image { background: transparent; }
.cart-line .manual-quantity { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: 0.25rem; }
.cart-line .manual-quantity label { color: var(--muted); font-size: 0.68rem; }
.cart-line .number-control { grid-template-columns: 2.2rem 3.25rem 2.2rem; }
.cart-line .number-control button, .cart-line .number-control input { min-height: 2.2rem; }
.custom-badge { display: inline-block; margin-left: var(--space-2xs); color: var(--accent-dark); font-size: 0.58rem; font-weight: 850; }
.cart-totals { margin: 0.35rem 1.4rem 0.7rem; padding: 0.65rem 0 0.7rem; border: 0; border-top: 0.0625rem solid var(--line); border-radius: 0; background: transparent; }
.cart-totals > div { display: flex; justify-content: space-between; gap: var(--space-lg); padding: 0.25rem 0; color: var(--muted); font-size: var(--text-secondary); }
.cart-totals strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.cart-totals .grand-total { align-items: baseline; margin-top: var(--space-xs); padding-top: var(--space-sm); border-top: 0.0625rem solid var(--line-strong); color: var(--ink); font-weight: 800; }
.grand-total strong { font-size: 1.55rem; letter-spacing: -0.025em; }
.cart-disclaimer { margin: 0; padding: 0.8rem 1.25rem; border-top: 0.0625rem solid var(--line); color: var(--muted); font-size: 0.68rem; line-height: 1.45; }
.cart-footer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); padding: 0 1.25rem 1.25rem; }
.cart-adjustments .spares-button { margin-top: 0; margin-bottom: var(--space-sm); }
.cart-adjustments #reset-quantities-button { grid-column: 1 / -1; min-height: 2.25rem; padding: 0.25rem; font-size: var(--text-caption); }
.cart-adjustments #reset-quantities-button:disabled { display: none; }

.mobile-cart-bar { display: none; }
.toast { position: fixed; z-index: 40; right: var(--space-lg); bottom: var(--space-lg); max-width: 24rem; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--ink); color: white; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transform: translateY(0.75rem); transition: opacity 180ms ease, transform 180ms var(--ease-out); }
.toast.visible { opacity: 1; transform: translateY(0); }

@media (hover: hover) {
  .count-choices label:hover > span, .product-choice:hover .product-choice-content { border-color: var(--line-strong); transform: translateY(-0.0625rem); box-shadow: var(--shadow-sm); }
  .line-option:hover .line-option-content { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
}

@media (max-width: 75rem) {
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(24rem, 27rem); }
  .line-option-content { grid-template-columns: 3.75rem minmax(0, 1fr); }
  .line-option-image { width: 3.75rem; height: 3.75rem; }
  .line-price { grid-column: 2; align-items: flex-start; text-align: left; }
  .product-review { grid-template-columns: 5.25rem minmax(0, 1fr); }
  .product-review-image { width: 5.25rem; height: 6rem; }
  .product-facts { grid-column: 1 / -1; }
}

@media (max-width: 60rem) {
  .header-inner, .page-shell { width: min(100% - 2rem, 94rem); }
  .page-shell { padding-bottom: 7.5rem; }
  .intro { grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr); gap: 2rem; min-height: 19rem; }
  .workspace { grid-template-columns: 1fr; }
  .cart { position: static; height: auto; display: block; border-top: 0.0625rem solid var(--line); border-left: 0; }
  .cart-details-scroll { overflow: visible; }
  .cart-lines { max-height: none; overflow: visible; }
  .mobile-cart-bar { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-sm) max(var(--space-md), env(safe-area-inset-right)) max(var(--space-sm), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left)); border-top: 0.0625rem solid var(--line); background: rgb(255 255 255 / 0.98); box-shadow: 0 -0.5rem 1.5rem rgb(17 29 47 / 0.1); }
  .mobile-cart-bar span, .mobile-cart-bar strong { display: block; }
  .mobile-cart-bar span { color: var(--muted); font-size: var(--text-caption); }
  .mobile-cart-bar strong { font-size: var(--text-subheading); font-variant-numeric: tabular-nums; }
  .mobile-cart-bar button { min-height: 2.75rem; padding: 0.6rem 0.9rem; border: 0; border-radius: 0.15rem; background: var(--accent); color: white; font-weight: 750; }
}

@media (max-width: 46rem) {
  .header-inner, .page-shell { width: min(100% - 1.25rem, 94rem); }
  .header-inner { min-height: 4rem; }
  .brand-mark { width: 1.8rem; height: 1.8rem; }
  .header-status { padding: 0.35rem 0.5rem; }
  .status-dot { display: none; }
  .page-shell { padding-top: 0; }
  .intro { display: block; min-height: 0; margin-bottom: 0; padding: 2.5rem 0 2.25rem; border-radius: 0; }
  .intro-guide { display: none; }
  .intro h1 { font-size: 2.55rem; line-height: 0.96; }
  .lede { font-size: var(--text-body); }
  .progress-wrap { width: 100%; margin: 0; }
  .progress { min-width: 0; grid-template-columns: repeat(var(--step-count, 5), minmax(0, 1fr)); }
  .progress button { min-height: 3.55rem; grid-template-columns: 1fr; grid-template-rows: 1.55rem auto; justify-items: center; gap: 0.15rem; padding: 0.35rem 0.1rem; text-align: center; }
  .progress button > span { grid-row: 1; width: 1.5rem; height: 1.5rem; }
  .progress small { display: none; }
  .progress strong { align-self: center; max-width: 100%; overflow: hidden; font-size: 0.65rem; text-overflow: ellipsis; }
  .panel { min-height: 0; padding: 1.2rem 0; border-radius: 0; }
  .panel-heading { margin-bottom: 0.8rem; padding-bottom: 0; }
  .panel-heading h2 { font-size: 1.85rem; }
  .rooms-field { grid-template-columns: 1fr; }
  .large-number-control { grid-row: auto; grid-column: auto; justify-self: start; margin-top: var(--space-xs); }
  .field-help, .field-error { grid-column: auto; }
  .count-choices { grid-template-columns: repeat(2, 1fr); }
  .count-choices-sink { grid-template-columns: repeat(3, 1fr); }
  .zone legend { display: block; }
  .zone legend small { display: block; margin-top: var(--space-2xs); }
  .two-columns, .color-options { grid-template-columns: 1fr; }
  #rooms-panel .product-checkboxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #rooms-panel .product-checkboxes .product-choice-content { min-height: 4.6rem; padding: 0.65rem 2.4rem 0.65rem 0.7rem; }
  .selected-product-strip { grid-template-columns: 4.5rem 1fr; }
  .selected-product-strip img { width: 4.5rem; height: 4.5rem; }
  .selected-product-strip > strong { grid-column: 2; }
  .line-option-content { grid-template-columns: 3.5rem minmax(0, 1fr); padding-right: 2.4rem; }
  .line-option-image { width: 3.5rem; height: 3.5rem; }
  .line-price { grid-column: 1 / -1; padding-top: 0.8rem; border-top: 0.0625rem solid var(--line); }
  .certification-button { min-height: 2.75rem; }
  .product-review { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.75rem; }
  .product-review-image { width: 4.5rem; height: 5.25rem; }
  .refill-row, .accessory-row { grid-template-columns: 4rem minmax(0, 1fr); }
  .refill-row img, .accessory-row img { width: 4rem; height: 4rem; }
  .refill-row .number-control, .accessory-row .number-control { grid-column: 1 / -1; justify-self: end; }
  .panel-actions { align-items: stretch; flex-direction: column-reverse; }
  .panel-actions .button-primary, .panel-actions .button-quiet { width: 100%; }
  .cart-visual { padding-inline: 1rem; }
  .assembly-stage { gap: 0.65rem; }
  .assembly-zone + .assembly-zone { padding-left: 0.65rem; }
  .assembly-products { gap: 0.3rem; }
  .bottle-visual { --bottle-height: 7.75rem; }
  .cart-heading, .cart-totals, .cart-disclaimer, .cart-footer-actions { padding-inline: 1rem; }
  .spares-button { width: calc(100% - 2rem); margin-inline: 1rem; }
  .cart-lines { padding-inline: 1rem; }
  .cart-footer-actions { grid-template-columns: 1fr; }
  .cart-line .manual-quantity { grid-column: 2 / -1; flex-wrap: wrap; }
  .product-dialog { padding: 1rem; }
  .dialog-product-content { grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
  .dialog-product-image .bottle-visual { --bottle-height: min(30dvh, 15rem); }
}

@media (max-width: 25rem) {
  .header-status { display: none; }
  .count-choices-sink { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .count-choices-sink label > span { padding: 0.7rem 0.4rem; }
  .count-choices-sink em { font-size: 0.72rem; }
  #rooms-panel .product-checkboxes { grid-template-columns: 1fr; }
  #rooms-panel .product-checkboxes .product-choice-content { min-height: 4.75rem; }
  .cart-line { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .cart-line-price { grid-column: 2; justify-self: start; }
  .cart-line-price .price-display { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.4rem; }
  .cart-line .manual-quantity { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  @page { size: A4; margin: 15mm; }
  html, body { min-width: 0; background: white; color: #171a18; font-size: 10pt; }
  .site-header, .skip-link, .intro, .progress-wrap, .main-column, .mobile-cart-bar, .cart-adjustments, .cart-quantity-note, .button-small, .manual-quantity, .preview-hint, .product-dialog, .certification-tooltip, .toast { display: none !important; }
  .page-shell { width: 100%; margin: 0; padding: 0; }
  .workspace { display: block; }
  .cart { position: static; display: flex; flex-direction: column; width: 100%; height: auto; overflow: visible; border: 0; background: white; box-shadow: none; }
  .cart-details-scroll { display: contents; }
  .print-document-head { order: 1; display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 4mm; padding-bottom: 3mm; border-bottom: 1.5pt solid #171a18; }
  .print-brand { display: flex; align-items: center; gap: 3mm; }
  .print-brand img { width: 9mm; height: 9mm; object-fit: contain; }
  .print-brand strong { font-size: 17pt; letter-spacing: -0.035em; }
  .print-document-meta { display: grid; gap: 0.5mm; text-align: right; }
  .print-document-meta strong { font-size: 9pt; letter-spacing: 0.06em; text-transform: uppercase; }
  .print-document-meta span { color: #59625e; font-size: 8pt; }
  .print-configuration { order: 2; display: block; margin-bottom: 4mm; break-inside: avoid; }
  .print-configuration-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2mm; }
  .print-configuration-heading h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 22pt; font-weight: 400; letter-spacing: -0.03em; }
  .print-configuration-heading p { margin: 0; color: #59625e; font-size: 8pt; }
  .print-configuration-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1pt solid #171a18; border-bottom: 1pt solid #c7cdca; }
  .print-configuration-grid > div { display: grid; grid-template-columns: 25mm minmax(0, 1fr); gap: 3mm; margin: 0; padding: 1.6mm 0; border-bottom: 0.5pt solid #dce0de; }
  .print-configuration-grid > div:nth-child(odd):not(.print-detail-wide) { padding-right: 6mm; }
  .print-configuration-grid > div:nth-child(even):not(.print-detail-wide) { padding-left: 6mm; border-left: 0.5pt solid #dce0de; }
  .print-configuration-grid > div:nth-last-child(-n + 1) { border-bottom: 0; }
  .print-configuration-grid .print-detail-wide { grid-column: 1 / -1; }
  .print-configuration-grid dt, .print-configuration-grid dd { margin: 0; font-size: 8pt; line-height: 1.35; }
  .print-configuration-grid dt { color: #59625e; font-weight: 500; }
  .print-configuration-grid dd { color: #171a18; font-weight: 700; }
  .cart-heading { display: none; }
  .cart-overview { order: 3; margin: 0; padding: 2mm 0; }
  .cart-overview::before { content: "Riepilogo economico"; grid-column: 1 / -1; margin-bottom: 1mm; font-size: 9pt; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
  .cart-overview > span { font-size: 8pt; }
  .cart-overview > strong { font-size: 16pt; }
  .cart-overview > small { font-size: 8pt; }
  .cart-lines { order: 4; max-height: none; overflow: visible; padding: 0; }
  .cart-group-label { margin: 2mm 0 0; padding: 1.2mm 0; border-bottom: 0.75pt solid #171a18; font-size: 7.5pt; }
  .cart-line { grid-template-columns: 7mm minmax(0, 1fr) auto; gap: 1.2mm 3mm; padding: 1.6mm 0; }
  .cart-line-image { width: 7mm; height: 7mm; padding: 0; }
  .cart-line-main strong { overflow: visible; font-size: 8.5pt; text-overflow: clip; white-space: normal; }
  .cart-line-main small, .cart-line-price { font-size: 7.5pt; }
  .cart-line-price .price-display { gap: 0.5mm; }
  .refill-summary { margin: 1.5mm 0 0; font-size: 7.5pt; }
  .cart-totals { order: 5; width: 78mm; margin: 2.5mm 0 1mm auto; padding: 2mm 0 0; }
  .cart-totals > div { padding: 0.7mm 0; font-size: 8.5pt; }
  .cart-totals .grand-total { margin-top: 1mm; padding-top: 2mm; }
  .grand-total strong { font-size: 15pt; }
  .cart-disclaimer { order: 6; margin-top: 2mm; padding: 2mm 0 0; font-size: 7pt; }
  .cart-disclaimer::after { content: " Il documento è un riepilogo indicativo della configurazione e non costituisce preventivo vincolante."; }
  .cart-visual { order: 7; display: block; min-height: 0; margin-top: 8mm; padding: 5mm 0 0; overflow: visible; border: 0; border-top: 1.5pt solid #171a18; background: white; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cart-visual-head p { margin-bottom: 1mm; font-size: 7.5pt; }
  .cart-visual-head h2 { font-size: 18pt; }
  .cart-visual-head > span { font-size: 8pt; }
  .assembly-stage { justify-content: center; gap: 5mm; padding: 5mm 0 0; }
  .assembly-zone + .assembly-zone { padding-left: 5mm; }
  .assembly-zone h3, .assembly-zone-mode { font-size: 7pt; }
  .assembly-products { gap: 3mm; }
  .bottle-visual { --bottle-height: 32mm; }
  .assembly-label { min-height: 0; margin-top: 1mm; font-size: 7pt; }
  .cart-line, .cart-totals, .refill-summary { break-inside: avoid; }
  .print-document-head, .cart-overview, .cart-group-label { break-after: avoid; }
}