/* Calculator, media track and before/after. */
.estimate-shell { display:grid; grid-template-columns:minmax(0,1fr) 365px; gap:28px; padding:60px; color:var(--paper); background:#41454b; border:1px solid rgb(255 255 255 / .12); border-radius:var(--radius-control); }
.choice-group { min-width:0; padding:0; margin:0; border:0; }
.choice-group + .choice-group { margin-top:32px; }
.choice-group legend { font-size:20px; font-weight:600; margin-bottom:16px; }
.choice-group legend > span { display:inline-block; margin-right:12px; font-size:13px; font-weight:400; opacity:.8; }
.choice-group__options { display:flex; flex-wrap:wrap; gap:8px; }
.choice-chip { position:relative; display:block; cursor:pointer; max-width:100%; }
.choice-chip input { position:absolute; width:1px; height:1px; opacity:0; }
.choice-chip span { display:flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border:1px solid rgb(255 255 255 / .35); border-radius:var(--radius-control); font-size:13px; text-align:center; transition:background-color var(--motion-fast) var(--ease); }
.choice-chip input:checked + span { background:var(--brand); border-color:var(--brand); color:var(--ink); }
.choice-chip input:focus-visible + span { outline:2px solid var(--paper); outline-offset:3px; }
.estimate-shell__result { min-width:0; padding:24px; border:1px solid rgb(255 255 255 / .2); border-radius:var(--radius-control); background:rgb(0 0 0 / .12); }
.estimate-price { font-size:36px; line-height:1.2; font-weight:600; margin-top:16px; }
.estimate-note { font-size:12px; line-height:1.55; margin-top:16px; color:#f0f0f0; }
.estimate-selection { min-height:64px; margin-top:16px; font-size:12px; line-height:1.5; }
.estimate-fields { margin-top:20px; display:grid; gap:12px; }
.estimate-fields label { display:grid; gap:4px; font-size:12px; }
.estimate-fields input { display:block; width:100%; min-width:0; padding:12px; min-height:48px; border:1px solid var(--line); border-radius:var(--radius-control); font:inherit; background:var(--paper); color:var(--ink); }
.estimate-fields input:disabled { opacity:.65; cursor:not-allowed; }
.estimate-shell__result .action { margin-top:20px; width:100%; }
.image-comparison { min-width:0; }
.image-comparison__stage { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:hidden; border-radius:var(--radius-media); background:var(--surface); }
.image-comparison figure { min-width:0; margin:0; }
.image-comparison img { display:block; width:100%; height:auto; }
.image-comparison figcaption { padding:8px 12px; font-size:12px; }
.image-comparison__handle { display:none; }
.image-comparison.is-interactive .image-comparison__stage { display:block; aspect-ratio:3/2; touch-action:pan-y; cursor:ew-resize; user-select:none; }
.image-comparison--square.is-interactive .image-comparison__stage { aspect-ratio:1; }
.image-comparison.is-interactive figure { position:absolute; inset:0; }
.image-comparison.is-interactive img { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.image-comparison.is-interactive .image-comparison__after { clip-path:inset(0 0 0 var(--compare-position,50%)); }
.image-comparison.is-interactive figcaption { position:absolute; top:16px; left:16px; background:rgb(11 27 34 / .85); color:var(--paper); border-radius:4px; }
.image-comparison.is-interactive .image-comparison__after figcaption { left:auto; right:16px; }
.image-comparison.is-interactive .image-comparison__handle { position:absolute; top:0; bottom:0; left:var(--compare-position,50%); display:flex; align-items:center; justify-content:center; width:2px; background:var(--paper); color:var(--ink); font-size:0; pointer-events:none; }
.image-comparison__handle::after { content:"↔"; display:grid; place-items:center; flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--paper); font-size:20px; box-shadow:0 2px 8px rgb(0 0 0 / .2); }
.image-comparison__controls { padding-top:12px; }
.image-comparison__controls label { display:block; font-size:12px; color:var(--copy); }
.image-comparison__controls input { width:100%; min-height:44px; accent-color:var(--ink); cursor:ew-resize; margin:0; }
.comparison-actions { display:flex; justify-content:space-between; align-items:center; font-size:12px; }
.comparison-actions button { min-height:44px; padding:8px 16px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--paper); }
.media-gallery { min-width:0; }
.media-gallery__track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 44px) / 3); gap:22px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding:4px 0 16px; scrollbar-width:thin; }
.media-gallery__track > * { scroll-snap-align:start; }
.media-gallery__controls { display:flex; justify-content:flex-end; align-items:center; gap:16px; margin-top:16px; }
.media-gallery__controls p { font-size:13px; color:var(--copy); }
.gallery-arrow { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:var(--paper); font-size:22px; }
.gallery-arrow:disabled { opacity:.4; cursor:default; }
@media (max-width:1023px) {
  .estimate-shell { grid-template-columns:minmax(0,1fr); padding:32px; }
  .estimate-shell__result { display:block; }
  .estimate-selection { min-height:0; }
  .estimate-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .media-gallery__track { grid-auto-columns:calc((100% - 22px) / 2); }
}
@media (max-width:767px) {
  .estimate-shell { padding:24px 16px; gap:24px; }
  .choice-group legend { font-size:18px; }
  .choice-chip span { padding:10px 12px; }
  .estimate-fields { grid-template-columns:minmax(0,1fr); }
  .estimate-shell__result { padding:20px; }
  .estimate-price { font-size:30px; }
  .media-gallery__track { grid-auto-columns:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .media-gallery__track { scroll-behavior:auto; scroll-snap-type:none; }
}
