/* ==========================================================================
   Tools: calculator, samples, visualiser, compare, locator, type matrix,
   warranty acknowledgement (+ print).
   ========================================================================== */

.entry-content--tool > * + * { margin-block-start: 1.5rem; }

/* Calculator */
.vf-calc { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; align-items: start; }
.vf-calc__inputs, .vf-calc__out { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: clamp(1rem, 0.8rem + 1vw, 1.5rem); display: grid; gap: 1rem; }
.vf-calc__out { position: sticky; inset-block-start: calc(var(--header-h) + 1rem); background: var(--forest); color: #E3EBE5; border-color: var(--forest); }
.vf-calc__units { display: flex; gap: 1rem; align-items: center; border: 0; padding: 0; margin: 0; font-size: var(--fs-sm); }
.vf-calc__units legend { float: left; margin-inline-end: 0.5rem; font-weight: 600; color: var(--forest); }
.vf-calc__units input { accent-color: var(--forest); }
.vf-calc__rooms { display: grid; gap: 0.5rem; }
.vf-room { display: grid; grid-template-columns: minmax(90px, 1.2fr) 1fr auto 1fr auto auto; gap: 0.5rem; align-items: center; }
.vf-room[data-kind="area"] { grid-template-columns: minmax(90px, 1.2fr) 2fr auto auto; }
.vf-room input { inline-size: 100%; font: inherit; font-size: 16px; padding: 0.55rem 0.65rem; border: 1px solid var(--line); border-radius: var(--radius); min-block-size: 44px; }
.vf-room__unit { font-size: var(--fs-xs); color: var(--muted); min-inline-size: 2.2rem; }
.vf-room__rm { inline-size: 36px; block-size: 36px; border-radius: 50%; color: var(--muted); font-size: 1.2rem; }
.vf-room__rm:hover { background: var(--linen); color: var(--err); }
.vf-calc__add { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vf-calc__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.vf-calc__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; margin: 0; }
.vf-calc__stats dt { font-size: var(--fs-xs); color: #A9BCAE; text-transform: uppercase; letter-spacing: 0.08em; }
.vf-calc__stats dd { margin: 0.15rem 0 0; font-size: var(--fs-sm); color: #fff; }
.vf-calc__stats .is-key { grid-column: 1 / -1; padding: 0.8rem 1rem; border-radius: var(--radius); background: var(--forest-2); }
.vf-calc__stats .is-key dd { font-family: var(--font-head); font-size: var(--fs-3xl); line-height: 1.1; color: #F1D9BC; }
.vf-calc__cost { padding-block-start: 0.75rem; border-block-start: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--fs-sm); }
.vf-calc__cost p { margin: 0 0 0.5rem; }
.vf-calc__cost strong { color: #fff; }
.vf-calc__flag { color: #C9D6CD; font-size: var(--fs-xs); }
.vf-calc__note { margin: 0; font-size: var(--fs-xs); color: #C9D6CD; }
.vf-calc__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vf-calc__out .btn--primary { background: var(--oak); }
.vf-calc__out .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.vf-calc__out .btn--ghost:hover { background: #fff; color: var(--forest); }
.vf-calc--compact { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .vf-calc, .vf-calc--compact { grid-template-columns: 1fr; } .vf-calc__out { position: static; } }
@media (max-width: 520px) { .vf-room { grid-template-columns: 1fr 1fr auto; } .vf-room__name { grid-column: 1 / -1; } .vf-room > span[aria-hidden] { display: none; } .vf-room__unit { display: none; } .vf-calc__row { grid-template-columns: 1fr; } }

/* Samples */
.vf-samples { display: grid; gap: 1.5rem; }
.vf-samples__list { display: grid; gap: 0.6rem; }
.vf-sample-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); }
.vf-sample-item img { inline-size: 64px; block-size: 64px; border-radius: 8px; object-fit: cover; }
.vf-sample-item__body { flex: 1; display: grid; }
.vf-sample-item__body a { color: var(--forest); font-weight: 600; text-decoration: none; }
.vf-sample-item__body small { color: var(--muted); }
.vf-sample-item__rm { font-size: var(--fs-xs); color: var(--muted); text-decoration: underline; }
.vf-samples__meta { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.vf-samples__form { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: clamp(1rem, 0.8rem + 1.5vw, 2rem); }
.vf-samples__title { font-size: var(--fs-xl); }

/* Visualiser */
.vf-vis { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.5rem; align-items: start; }
.vf-vis__stage { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--linen-2); aspect-ratio: 16 / 9; }
.vf-vis__canvas, .vf-vis__fallback { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.vf-vis__canvas { opacity: 0; transition: opacity 300ms; }
.vf-vis__canvas.is-ready { opacity: 1; }
.vf-vis.is-loading .vf-vis__stage::after { content: ""; position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; inline-size: 22px; block-size: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.5); border-block-start-color: #fff; animation: vf-spin 800ms linear infinite; }
@keyframes vf-spin { to { transform: rotate(360deg); } }
.vf-vis__label { position: absolute; inset-inline-end: 0.75rem; inset-block-end: 0.75rem; margin: 0; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); background: rgba(18, 30, 24, 0.7); color: #fff; font-size: var(--fs-xs); }
.vf-vis__panel { display: grid; gap: 1.25rem; }
.vf-vis__rooms, .vf-vis__swatches { border: 0; padding: 0; margin: 0; }
.vf-vis__rooms legend, .vf-vis__swatches legend { font-weight: 600; color: var(--forest); margin-block-end: 0.5rem; }
.vf-vis__rooms { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vf-vis__rooms input { position: absolute; opacity: 0; pointer-events: none; }
.vf-vis__rooms .chip:has(input:focus-visible) { outline: 2px solid var(--oak); outline-offset: 2px; }
.vf-vis__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 0.5rem; max-block-size: 380px; overflow-y: auto; padding: 2px; }
.vf-swatch { aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 2px solid transparent; }
.vf-swatch img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.vf-swatch[aria-pressed="true"] { border-color: var(--oak); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--oak); }
.vf-vis__current { padding: 1rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--line-2); }
.vf-vis__name { margin: 0; font-family: var(--font-head); font-size: var(--fs-lg); }
.vf-vis__name a { color: var(--forest); text-decoration: none; }
.vf-vis__meta { margin: 0.2rem 0 0.75rem; font-size: var(--fs-sm); color: var(--muted); }
.vf-vis__actions { margin: 0; }
@media (max-width: 900px) { .vf-vis { grid-template-columns: 1fr; } }

/* Compare */
.vf-compare__table { min-inline-size: 640px; font-size: var(--fs-sm); }
.vf-compare__table th, .vf-compare__table td { padding: 0.7rem 0.9rem; border-block-end: 1px solid var(--line-2); text-align: start; vertical-align: top; }
.vf-compare__table thead th { vertical-align: bottom; background: var(--linen); }
.vf-compare__table thead img { inline-size: 120px; block-size: 120px; object-fit: cover; border-radius: 10px; margin-block-end: 0.5rem; }
.vf-compare__table thead a { display: block; font-family: var(--font-head); font-size: var(--fs-lg); color: var(--forest); text-decoration: none; }
.vf-compare__table thead small { display: block; color: var(--muted); font-weight: 400; }
.vf-compare__table tbody th { color: var(--muted); font-weight: 500; inline-size: 200px; }
.vf-compare__table td.is-diff { background: #FDF8F0; }
.vf-compare__table td.is-request { color: var(--muted); font-style: italic; }
.vf-compare__rm { margin-block-start: 0.4rem; font-size: var(--fs-xs); text-decoration: underline; color: var(--muted); font-weight: 400; }

/* Locator */
.vf-locator { display: grid; gap: 1.5rem; }
.vf-locator__search { display: grid; grid-template-columns: 2fr 1fr auto; gap: 0.75rem; align-items: end; padding: 1.25rem; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); }
.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.partner-card { padding: 1.25rem; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); }
.partner-card__type { margin: 0; font-size: var(--fs-xs); color: var(--oak-ink); text-transform: uppercase; letter-spacing: 0.1em; }
.partner-card__name { margin: 0.25rem 0; font-size: var(--fs-xl); }
.partner-card__addr, .partner-card__km, .partner-card__services { margin: 0 0 0.35rem; font-size: var(--fs-sm); color: var(--muted); }
.partner-card__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 0; }
@media (max-width: 640px) { .vf-locator__search { grid-template-columns: 1fr; } }

/* Type matrix */
.vf-matrix { min-inline-size: 960px; font-size: var(--fs-sm); }
.vf-matrix th, .vf-matrix td { padding: 0.75rem; border-block-end: 1px solid var(--line-2); text-align: start; vertical-align: top; }
.vf-matrix thead th { background: var(--forest); color: #fff; font-weight: 600; font-size: var(--fs-xs); }
.vf-matrix tbody th a { font-family: var(--font-head); font-size: var(--fs-md); color: var(--forest); }
.vf-matrix tbody tr:nth-child(even) { background: var(--paper); }

/* Warranty acknowledgement */
.warranty-ack { max-inline-size: 760px; padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.warranty-ack__head h2 { font-size: var(--fs-2xl); }
.warranty-ack__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; margin: 1.5rem 0; }
.warranty-ack__list dt { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.warranty-ack__list dd { margin: 0.15rem 0 0; font-weight: 600; color: var(--forest); }
.warranty-ack__note { font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 560px) { .warranty-ack__list { grid-template-columns: 1fr; } }

@media print {
  .site-header, .site-footer, .nav-backdrop, .whatsapp-float, .assistant-fab, .assistant, .modal, .page-hero, .no-print, .vf-toast { display: none !important; }
  body { background: #fff; color: #000; }
  .warranty-ack { border: 0; padding: 0; }
  .has-transparent-header .site-main { margin: 0; }
}

.vf-calc__help { font-size: var(--fs-xs); color: var(--muted); }

/* Help me choose (quiz) */
.vf-quiz { display: grid; gap: 1.5rem; }
.vf-quiz > *, .vf-quiz__results > *, .vf-pat > *, .vf-pat__panel > * { margin-block: 0; }
.vf-quiz__types > li + li, .vf-quiz__products > li + li { margin-block-start: 0; }
.vf-quiz__form { display: grid; gap: 1.25rem; padding: clamp(1rem, 0.8rem + 1.2vw, 1.75rem); background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); }
.vf-quiz__progress { margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oak-ink); }
.vf-quiz__bar { block-size: 6px; border-radius: var(--radius-pill); background: var(--linen-2); overflow: hidden; }
.vf-quiz__bar span { display: block; block-size: 100%; inline-size: 0; background: var(--forest); transition: inline-size var(--dur) var(--ease); }
.vf-quiz__step { display: grid; gap: 1.25rem; }
.vf-quiz__form:not(.is-stepped) .vf-quiz__step + .vf-quiz__step { padding-block-start: 1.25rem; border-block-start: 1px solid var(--line-2); }
.vf-quiz__q { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.vf-quiz__legend { padding: 0; font-family: var(--font-head); font-size: var(--fs-xl); color: var(--forest); }
.vf-quiz__legend:focus { outline: none; }
.vf-quiz__num { color: var(--oak); }
.vf-quiz__help { margin: 0.25rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
.vf-quiz__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 0.5rem; margin-block-start: 0.75rem; }
.vf-quiz__opt { position: relative; display: flex; align-items: center; gap: 0.6rem; min-block-size: 48px; padding: 0.6rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font-size: var(--fs-sm); cursor: pointer; }
.vf-quiz__opt input { flex: none; inline-size: 18px; block-size: 18px; accent-color: var(--forest); }
.vf-quiz__opt:hover, .vf-quiz__opt:has(input:checked) { border-color: var(--forest); background: var(--linen); color: var(--forest); }
.vf-quiz__opt:has(input:focus-visible) { outline: 2px solid var(--oak); outline-offset: 2px; }
.vf-quiz__nav { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.vf-quiz__error { margin: 0; }
.vf-quiz__results { display: grid; gap: 1rem; }
.vf-quiz__results:focus { outline: none; }
.vf-quiz .vf-quiz__title { margin: 0.5rem 0 0; font-size: var(--fs-2xl); }
.vf-quiz .vf-quiz__types { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; counter-reset: vfq; }
.vf-quiz-type { position: relative; padding: 1.25rem 1.25rem 1.25rem 3.25rem; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); counter-increment: vfq; }
.vf-quiz-type::before { content: counter(vfq); position: absolute; inset-block-start: 1.2rem; inset-inline-start: 1.1rem; inline-size: 1.6rem; block-size: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--linen); color: var(--forest); font-weight: 600; font-size: var(--fs-sm); }
.vf-quiz-type.is-top { border-color: var(--forest); box-shadow: var(--shadow-sm); }
.vf-quiz-type.is-top::before { background: var(--forest); color: #fff; }
.vf-quiz .vf-quiz-type__name { margin: 0 0 0.4rem; font-size: var(--fs-xl); }
.vf-quiz-type__name a { color: var(--forest); text-decoration: none; }
.vf-quiz-type__why { margin: 0 0 0.5rem; }
.vf-quiz .vf-quiz-type__pros { margin: 0 0 0.5rem; font-size: var(--fs-sm); }
.vf-quiz-type__caution { margin: 0; font-size: var(--fs-sm); color: var(--warn); }
.vf-quiz .vf-quiz__products { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 1rem; }
.vf-quiz-product { display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden; }
.vf-quiz-product img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vf-quiz-product__body { display: grid; gap: 0.4rem; align-content: start; padding: 1rem; }
.vf-quiz-product__type { margin: 0; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--oak-ink); }
.vf-quiz .vf-quiz-product__name { margin: 0; font-size: var(--fs-lg); }
.vf-quiz-product__name a { color: var(--forest); text-decoration: none; }
.vf-quiz .vf-quiz-product__reasons { margin: 0; padding-inline-start: 1.1rem; font-size: var(--fs-sm); color: var(--muted); }
.vf-quiz-product__price { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.vf-quiz-product .btn { justify-self: start; }
.vf-quiz__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--linen); }
.vf-quiz__how { padding: 1rem 1.15rem; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); font-size: var(--fs-sm); }
.vf-quiz__how summary { cursor: pointer; font-weight: 600; color: var(--forest); }
.vf-quiz__rules { min-inline-size: 640px; }
.vf-quiz__rules th, .vf-quiz__rules td { padding: 0.5rem 0.7rem; border-block-end: 1px solid var(--line-2); text-align: start; vertical-align: top; }
@media (max-width: 520px) { .vf-quiz__nav .btn { flex: 1 1 auto; } }

/* Laying-pattern explorer */
.vf-pat { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; align-items: start; }
.vf-pat__stage { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #C9B59A; aspect-ratio: 16 / 9; }
.vf-pat__canvas { inline-size: 100%; block-size: 100%; }
.vf-pat__label { position: absolute; inset-inline-end: 0.75rem; inset-block-end: 0.75rem; margin: 0; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); background: rgba(18, 30, 24, 0.7); color: #fff; font-size: var(--fs-xs); }
.vf-pat__panel { display: grid; gap: 1rem; }
.vf-pat__choices { display: flex; flex-wrap: wrap; gap: 0.4rem; border: 0; padding: 0; margin: 0; }
.vf-pat__choices legend { font-weight: 600; color: var(--forest); margin-block-end: 0.5rem; }
.vf-pat__choices .chip { min-block-size: 40px; cursor: pointer; }
.vf-pat__choices .chip:has(input:focus-visible) { outline: 2px solid var(--oak); outline-offset: 2px; }
.vf-pat__info { padding: 1.1rem; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); }
.vf-pat .vf-pat__name { margin: 0 0 0.4rem; font-size: var(--fs-xl); }
.vf-pat__facts { display: grid; gap: 0.6rem; margin: 0.75rem 0; }
.vf-pat__facts dt { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.vf-pat__facts dd { margin: 0.1rem 0 0; font-size: var(--fs-sm); }
.vf-pat__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.vf-pat__table { min-inline-size: 760px; font-size: var(--fs-sm); }
.vf-pat__table th, .vf-pat__table td { padding: 0.7rem 0.9rem; border-block-end: 1px solid var(--line-2); text-align: start; vertical-align: top; }
.vf-pat__table thead th { background: var(--linen); }
.vf-pat__table tbody th { color: var(--forest); }
.vf-pat__table tbody th small { display: block; margin-block-start: 0.2rem; font-weight: 400; color: var(--muted); }
@media (max-width: 900px) { .vf-pat { grid-template-columns: 1fr; } }