/* Shared refinements. Product pages keep their immersive, dark hero. */

:root {
  --focus-ring: var(--brown);
}

html { scroll-padding-top: calc(var(--header-h) + 24px); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 5px;
}

:where(.on-dark, .section--dark, .section--ink, .site-footer, .site-header--dark, .summary-card)
  :where(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--yellow);
}

.btn { min-height: 48px; }
.btn--sm { min-height: 44px; }
.btn svg { flex-shrink: 0; }
.split > *, .feature, .price-tiles, .price-tile { min-width: 0; }

/* Navigation stays quiet so photography and the products lead. */
.site-header .main-nav > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.site-header .main-nav > .btn--primary {
  color: var(--black);
  background: var(--yellow);
}

.site-header .main-nav > .btn--primary:hover {
  color: var(--black);
  background: var(--yellow-soft);
}

.site-header--dark.is-solid {
  background: rgba(0, 0, 0, .94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.editorial-inner {
  --header-h: 88px;
  --cream: var(--white);
  --cream-2: color-mix(in srgb, var(--taupe) 14%, var(--white));
  background: var(--cream);
}

.editorial-inner .site-header {
  background: rgba(255, 255, 255, .97);
  border-bottom-color: rgba(79, 69, 56, .1);
}

.editorial-inner .site-header .container { gap: 24px; }
.editorial-inner .brand { gap: 10px; }
.editorial-inner .brand img.mark { height: 34px; }
.editorial-inner .brand img.word { height: 18px; }

.editorial-inner .main-nav > a:not(.btn) {
  border-radius: 0;
  background: transparent;
  padding-inline: 12px;
  color: var(--text-soft);
  font-size: .88rem;
}

.editorial-inner .main-nav > a:not(.btn):hover,
.editorial-inner .main-nav > a.is-active:not(.btn) {
  color: var(--black);
  box-shadow: inset 0 -2px 0 var(--black);
}

.editorial-inner .nav-cta {
  border-radius: 8px;
  font-size: .86rem;
  padding-inline: 20px;
  box-shadow: none;
}

.editorial-inner .page-hero {
  background: var(--cream);
  background-image: none;
  color: var(--black);
  border-bottom: 1px solid var(--line);
}

.editorial-inner .page-hero .display {
  max-width: 22ch;
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1.04;
  text-wrap: balance;
}

.editorial-inner .page-hero :is(.kicker, .lead, .breadcrumbs) { color: var(--text-soft); }
.editorial-inner .page-hero .breadcrumbs { font-size: .8rem; margin-bottom: 30px; }
.editorial-inner .page-hero .breadcrumbs a:hover { color: var(--black); }
.editorial-inner .page-hero .btn--ghost { color: var(--black); border-color: var(--line); }
.editorial-inner .page-hero .btn--ghost:hover { border-color: var(--black); }
.editorial-inner .page-hero .btn { border-radius: 10px; }
.editorial-inner .page-hero :focus-visible { outline-color: var(--focus-ring); }

/* A smaller radius, fine borders and calm hover states bring the inner pages
   into the same material language as the editorial home page. */
body:not(.editorial-home) :is(.product-card, .feature, .split__media, .vs-card) { border-radius: 12px; }
body:not(.editorial-home) .product-card { border: 1px solid var(--line); box-shadow: none; }
body:not(.editorial-home) .product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, .08); }
body:not(.editorial-home) .product-card__index { border-radius: 6px; }
body:not(.editorial-home) .product-card__body { gap: 14px; }
body:not(.editorial-home) .product-card__body h3 { font-weight: 600; letter-spacing: -.035em; }
body:not(.editorial-home) .feature { padding: 30px; }
body:not(.editorial-home) .feature__icon { border-radius: 10px; }
body:not(.editorial-home) .feature:not(a):hover { transform: none; box-shadow: none; }
body:not(.editorial-home) .split__media { box-shadow: none; }

.site-footer { padding-top: clamp(56px, 7vw, 96px); }
.footer-grid { gap: 40px 32px; }
.footer-grid > * { min-width: 0; }
.site-footer h4 { font-size: .7rem; letter-spacing: .14em; }
.site-footer ul { gap: 7px; font-size: .9rem; }
.site-footer ul a { display: inline-flex; min-height: 36px; align-items: center; }
.site-footer :is(a, p, li) { overflow-wrap: anywhere; }
.footer-brand p { margin-top: 18px; line-height: 1.65; }
.footer-legal { padding-bottom: 88px; gap: 20px; line-height: 1.65; }
.footer-legal > span { max-width: 90ch; }
.footer-legal__links { gap: 8px 24px; }
.footer-legal__links a { display: inline-flex; align-items: center; min-height: 36px; }

/* Configurator: the existing fields, quote calculation and PDF engine remain
   intact. Only spacing, selection states and touch comfort are adjusted. */
.config-layout { gap: 28px; }
.config-main, .config-aside { min-width: 0; }
.config-step { border-radius: 14px; box-shadow: none; }
.config-step__head { align-items: flex-start; gap: 16px; }
.config-step__num { border-radius: 50%; width: 32px; height: 32px; font-size: .83rem; }
.config-step__head h2 { font-size: 1.2rem; letter-spacing: -.025em; font-weight: 600; line-height: 1.3; }
.config-step__head p { margin-top: 5px; line-height: 1.6; }
.radio-cards:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.radio-card__box { border-radius: 10px; background: var(--white); }
.radio-card:hover .radio-card__box { transform: none; box-shadow: none; border-color: var(--taupe); }
.radio-card input:checked + .radio-card__box { border-color: var(--black); box-shadow: 0 0 0 2px var(--yellow); }
.radio-card__label { padding: 18px; }
.radio-card__label b { font-weight: 600; letter-spacing: -.025em; }
.pill-radio__box { border-radius: 10px; }
.opt-row { border-radius: 10px; flex-wrap: wrap; }
.opt-row__text { min-width: min(180px, 100%); }
.opt-row__text span { display: block; line-height: 1.5; margin-top: 3px; }
.opt-row:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.field :is(input, select, textarea) { border-radius: 8px; min-height: 48px; }
.field textarea { resize: vertical; }
.field :is(input, select, textarea):focus { border-color: var(--black); box-shadow: 0 0 0 3px rgba(253, 184, 19, .23); }
.range-val input { min-height: 48px; border-radius: 8px; }
.range-row input[type="range"] { margin-block: 14px; }
.range-row input[type="range"]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 9px; }
.stepper { border-radius: 8px; }
.stepper :is(button, input) { min-width: 44px; min-height: 44px; }
.stepper:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.summary-card { border-radius: 14px; box-shadow: none; }
.summary-card__head { flex-wrap: wrap; padding: 26px; }
.summary-lines { max-height: none; }
.summary-total { padding-block: 26px; }
.summary-total b #sum-total { color: var(--white); font-size: inherit; letter-spacing: -.045em; }
.summary-actions .btn { white-space: normal; border-radius: 8px; padding: 15px 16px; font-size: .92rem; line-height: 1.45; }
.summary-actions .btn--dark { background: var(--white); color: var(--black); }
.summary-actions .btn--dark:hover { background: var(--cream-2); }
.summary-actions .btn--ghost { color: var(--text-inv); border-color: var(--line-inv); }
.summary-actions .btn--ghost:hover { border-color: var(--text-inv); }
.summary-note { line-height: 1.65; margin-top: 6px; }

.call-fab { padding: 14px 18px; box-shadow: 0 5px 18px rgba(0, 0, 0, .14); animation: none; }
.call-fab::before { animation: none; }
.call-fab.is-quiet { opacity: 0; visibility: hidden; pointer-events: none; }

/* Native modal dialog covers the viewport and lets the browser manage inertness. */
dialog.lightbox {
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; border: 0;
}
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .5); }
.lightbox__close { z-index: 1; }
.lightbox :focus-visible { outline-color: var(--yellow); }

@media (max-width: 1100px) and (min-width: 961px) {
  .editorial-inner .site-header .container { gap: 16px; }
  .editorial-inner .main-nav { gap: 0; }
  .editorial-inner .main-nav > a:not(.btn) { padding-inline: 9px; }
}

@media (max-width: 960px) {
  .main-nav {
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 24px 24px;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .main-nav.is-open { visibility: visible; }
  .site-header .main-nav > a { justify-content: flex-start; min-height: 48px; }
  .site-header .main-nav > .nav-cta { justify-content: center; }
  .editorial-inner .main-nav { background: var(--cream); }
  .editorial-inner .main-nav > a:not(.btn) { padding: 14px 12px; font-size: 1rem; }
  .editorial-inner .nav-toggle { border-radius: 8px; }
  .nav-open .call-fab { visibility: hidden; pointer-events: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .site-footer ul a { min-height: 40px; }
}

@media (max-width: 640px) {
  .editorial-inner { --header-h: 76px; }
  .editorial-inner .brand img.mark { height: 30px; }
  .editorial-inner .brand img.word { height: 16px; }
  .editorial-inner .page-hero { padding-top: calc(var(--header-h) + 36px); }
  .editorial-inner .page-hero .display { font-size: clamp(2.6rem, 11vw, 3.8rem); }
  .editorial-inner .page-hero .lead { font-size: 1rem; }
  .editorial-inner .page-hero .hero__actions { gap: 10px; }
  .editorial-inner .page-hero .btn { width: 100%; font-size: .95rem; padding-inline: 12px; white-space: normal; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > :last-child { grid-column: 1 / -1; }
  .footer-legal { padding-bottom: 96px; font-size: .76rem; }
  .footer-legal__links a { min-height: 44px; }
  .config-step { padding: 22px 18px; margin-bottom: 18px; }
  .config-step__head { gap: 12px; }
  .radio-cards:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
  .radio-card__box { display: grid; grid-template-columns: 38% 1fr; align-items: center; }
  .radio-card__img { aspect-ratio: 1; height: 100%; min-height: 130px; }
  .radio-card__label { padding: 16px; }
  .radio-card__check { left: 8px; top: 8px; right: auto; }
  .summary-card__head, .summary-total, .summary-actions { padding-inline: 22px; }
  .summary-lines { padding-inline: 22px; }
  .summary-line { gap: 10px; }
  .summary-line__name { min-width: 0; }
  .toast { width: calc(100% - 36px); max-width: 440px; padding: 16px 20px; border-radius: 12px; font-size: .9rem; }
  .toast svg { flex-shrink: 0; }
  .call-fab { width: 52px; height: 52px; justify-content: center; padding: 0; }
  .call-fab span { display: none; }
  .lightbox__close { top: 16px; right: 16px; }
  .lightbox img { max-height: 80dvh; border-radius: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .product-card:hover, .feature:hover { transform: none; }
}

@media (max-width: 480px) {
  .btn { max-width: 100%; white-space: normal; text-align: center; }
  .price-tile__value { white-space: normal; overflow-wrap: anywhere; }
}