/* ============================================================
   Public offer catalogue
   Keeps the existing single-source configurator, but translates its old
   dark presentation into the light architectural homepage language.
   ============================================================ */

body:not(.journey-page) .offer-catalog {
  scroll-margin-top: 20px;
  background:
    radial-gradient(circle at 86% 0, rgba(196, 95, 50, .09), transparent 34%),
    var(--paper-deep);
  border-block: 1px solid var(--line);
}

.offer-catalog__assurance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(28px, 4vw, 46px) 0 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .48);
}

.offer-catalog__assurance span {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 15px 18px;
  color: rgba(35, 33, 30, .62);
  font-size: .78rem;
  line-height: 1.35;
  border-inline-end: 1px solid var(--line);
}

.offer-catalog__assurance span:last-child { border-inline-end: 0; }
.offer-catalog__assurance b { color: var(--graphite); font-size: .94rem; }
.offer-catalog__fine { max-width: 820px; margin: 18px auto 0; color: rgba(35, 33, 30, .58); font-size: .78rem; text-align: center; }

body:not(.journey-page) .cfg__shell {
  overflow: hidden;
  color: var(--graphite);
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(35, 33, 30, .15);
  border-radius: 3px;
  box-shadow: var(--shadow-soft);
}

body:not(.journey-page) .cfg__filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px 18px;
  padding: clamp(20px, 3vw, 30px);
  background: #f6f2eb;
  border-color: var(--line);
}

body:not(.journey-page) .cfg__f > span:first-child {
  color: rgba(35, 33, 30, .62);
  font-weight: 700;
  letter-spacing: .12em;
}

body:not(.journey-page) .cfg__f select,
body:not(.journey-page) .cfg__f-num {
  min-height: 48px;
  color: var(--graphite);
  background-color: #fff;
  border: 1px solid rgba(35, 33, 30, .2);
  border-radius: 2px;
}

body:not(.journey-page) .cfg__f select {
  color: var(--graphite);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--copper) 50%),
    linear-gradient(135deg, var(--copper) 50%, transparent 50%);
}

body:not(.journey-page) .cfg__f select option { color: var(--graphite); background: #fff; }
body:not(.journey-page) .cfg__f-num input { color: var(--graphite); }
body:not(.journey-page) .cfg__f-num em { color: rgba(35, 33, 30, .5); }
body:not(.journey-page) .cfg__f select:focus,
body:not(.journey-page) .cfg__f-num:focus-within { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(196, 95, 50, .1); }
body:not(.journey-page) .cfg__f-num input::placeholder { color: rgba(35, 33, 30, .38); }

body:not(.journey-page) .cfg__body { padding: clamp(22px, 3.8vw, 42px); }
body:not(.journey-page) .cfg__telling { margin-bottom: 18px; color: rgba(35, 33, 30, .6); }
body:not(.journey-page) .tgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(13px, 1.6vw, 20px); }

body:not(.journey-page) .tile {
  min-width: 0;
  padding-bottom: 16px;
  color: var(--graphite);
  background: #fff;
  border: 1px solid rgba(35, 33, 30, .14);
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(48, 38, 30, .06);
}

body:not(.journey-page) .tile:hover {
  border-color: rgba(196, 95, 50, .62);
  box-shadow: 0 16px 38px rgba(48, 38, 30, .11);
}

body:not(.journey-page) .tile.is-picked {
  border-color: var(--copper);
  box-shadow: 0 0 0 2px var(--copper), 0 18px 44px rgba(48, 38, 30, .14);
}

body:not(.journey-page) .tile__shot { background: #ded8ce; }
body:not(.journey-page) .tile__shot img { transition: transform .45s ease; }
body:not(.journey-page) .tile:hover .tile__shot img { transform: scale(1.025); }
body:not(.journey-page) .tile__tag { color: #fff; background: rgba(35, 33, 30, .74); }
body:not(.journey-page) .tile__naam {
  min-height: 3.8em;
  color: var(--graphite);
  font-size: clamp(.94rem, 1.2vw, 1.08rem);
}
body:not(.journey-page) .tile__maat { color: rgba(35, 33, 30, .55); }
body:not(.journey-page) .tile__prijs { margin-top: auto; padding-top: 10px; color: var(--copper); font-size: 1.04rem; font-weight: 700; }
body:not(.journey-page) .tile__was s { color: rgba(35, 33, 30, .48); }
body:not(.journey-page) .tile__pct,
body:not(.journey-page) .tile__beste { color: #fff; background: var(--copper); }

body:not(.journey-page) .cfg__overig { border-color: var(--line); }
body:not(.journey-page) .cfg__overig-kop b { color: var(--graphite); }
body:not(.journey-page) .cfg__overig-kop span { color: rgba(35, 33, 30, .55); }
body:not(.journey-page) .cfg__incl { border-color: var(--line); }
body:not(.journey-page) .cfg__incl-lbl { color: var(--copper); font-weight: 700; }
body:not(.journey-page) .cfg__incl-lijst { color: rgba(35, 33, 30, .64); }
body:not(.journey-page) .cfg__incl-excl { color: #9d321f; }

body:not(.journey-page) .cfg__detail:not(:empty) {
  color: var(--graphite);
  background: #f4efe7;
  border-color: var(--line);
}

body:not(.journey-page) .keuze { gap: clamp(24px, 4vw, 52px); }
body:not(.journey-page) .keuze__shot { border-radius: 2px; background: #ded8ce; }
body:not(.journey-page) .keuze__titel { color: var(--graphite); }
body:not(.journey-page) .keuze__lbl { color: rgba(35, 33, 30, .55); }
body:not(.journey-page) .keuze__lines { color: rgba(35, 33, 30, .78); }
body:not(.journey-page) .keuze__lines li.is-standaard { color: rgba(35, 33, 30, .58); }
body:not(.journey-page) .keuze__prijs { border-color: var(--line); }
body:not(.journey-page) .keuze__prijs b { color: var(--graphite); }
body:not(.journey-page) .keuze__prijs em { color: rgba(35, 33, 30, .56); }
body:not(.journey-page) .keuze__excl { color: #9d321f; }

body:not(.journey-page) .cfg__form {
  max-width: 860px;
  margin-top: clamp(30px, 5vw, 52px);
  padding-top: clamp(26px, 4vw, 40px);
  border-top: 1px solid var(--line);
}

body:not(.journey-page) .cfg__form-titel { color: var(--graphite); }
body:not(.journey-page) .cfg__form-hint { color: rgba(35, 33, 30, .64); }
body:not(.journey-page) .field label { color: rgba(35, 33, 30, .68); }
body:not(.journey-page) .field input,
body:not(.journey-page) .field select,
body:not(.journey-page) .field textarea {
  min-height: 48px;
  color: var(--graphite);
  background: #fff;
  border: 1px solid rgba(35, 33, 30, .2);
  border-radius: 2px;
}
body:not(.journey-page) .field textarea { min-height: 96px; resize: vertical; padding: 13px 14px; }
body:not(.journey-page) .field input::placeholder,
body:not(.journey-page) .field textarea::placeholder { color: rgba(35, 33, 30, .38); }
body:not(.journey-page) .field input:focus,
body:not(.journey-page) .field select:focus,
body:not(.journey-page) .field textarea:focus { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(196, 95, 50, .1); }
body:not(.journey-page) .field__optional { margin-left: 6px; color: rgba(35, 33, 30, .43); font-size: .72rem; font-weight: 500; text-transform: none; }
body:not(.journey-page) .field__err,
body:not(.journey-page) .form__err { color: #9d321f; }
body:not(.journey-page) .form__err { background: rgba(157, 50, 31, .07); border-color: rgba(157, 50, 31, .24); }
body:not(.journey-page) .form__fine { color: rgba(35, 33, 30, .56); }
body:not(.journey-page) .cfg__form .btn--primary,
body:not(.journey-page) .cfg__acties .btn--primary {
  min-height: 52px;
  width: fit-content;
  padding: 14px 24px;
  color: #fff;
  background: var(--copper);
  border: 1px solid var(--copper);
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(196, 95, 50, .2);
}
body:not(.journey-page) .cfg__acties .btn--ghost {
  min-height: 52px;
  color: var(--graphite);
  border: 1px solid rgba(35, 33, 30, .28);
  border-radius: 2px;
}
body:not(.journey-page) .cfg__bedrag { color: var(--graphite); }
body:not(.journey-page) .cfg__vrij,
body:not(.journey-page) .cfg__mail { color: rgba(35, 33, 30, .72); }
body:not(.journey-page) .cfg__na,
body:not(.journey-page) .cfg__wa-note { color: rgba(35, 33, 30, .56); }
body:not(.journey-page) .cfg__vrij b { color: var(--copper); }

.wa-fab {
  position: fixed;
  z-index: 64;
  right: clamp(24px, 3vw, 32px);
  bottom: clamp(24px, 3vw, 32px);
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #fff !important;
  background: #1fa855;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 50%;
  box-shadow: 0 14px 34px rgba(23, 82, 48, .32);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.wa-fab:hover { color: #fff; background: #178d47; transform: translateY(-2px); box-shadow: 0 18px 38px rgba(23, 82, 48, .38); }
.wa-fab svg { width: 29px; height: 29px; fill: currentColor; }
@media (max-width: 1050px) {
  body:not(.journey-page) .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .offer-catalog__assurance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-catalog__assurance span:nth-child(2) { border-inline-end: 0; }
  .offer-catalog__assurance span:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  body:not(.journey-page) .cfg__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:not(.journey-page) .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:not(.journey-page) .keuze { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .offer-catalog__assurance { margin-top: 24px; }
  .offer-catalog__assurance span { min-height: 68px; padding: 12px 13px; }
  body:not(.journey-page) .cfg__filters { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
  body:not(.journey-page) .cfg__body,
  body:not(.journey-page) .cfg__detail:not(:empty) { padding: 18px 14px 24px; }
  body:not(.journey-page) .tgrid { grid-template-columns: 1fr; }
  body:not(.journey-page) .tile__naam { min-height: 0; }
  body:not(.journey-page) .field-row { grid-template-columns: 1fr; }
  body:not(.journey-page) .cfg__form .btn--primary { width: 100%; }
  .wa-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.journey-page) .tile__shot img,
  .wa-fab { transition: none; }
}