/* Behaviour and mobile layer on top of the design's inline styles. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #0B6B57; outline-offset: 2px; }
[hidden] { display: none !important; }

/* honeypot */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 0; padding: 12px 14px; border-radius: 4px; background: #FCEDEA; color: #8A2A1B; font-size: 14px; }

/* accordions */
[data-acc] .i-minus { display: none; }
[data-acc][aria-expanded="true"] .i-minus { display: block; }
[data-acc][aria-expanded="true"] .i-plus { display: none; }

/* brand chips on the inquiry form */
button[data-chip] .i-check { display: none; }
button[data-chip][aria-pressed="true"] { background: #F3F3EF !important; color: #0B6B57 !important; border-color: #0B6B57 !important; }
button[data-chip][aria-pressed="true"] .i-check { display: block; }

/* brands filter tabs */
button[data-filter][aria-pressed="true"] { color: #12201D !important; border-bottom-color: #12201D !important; }
button[data-filter][aria-pressed="false"] { color: #636966 !important; border-bottom-color: transparent !important; }

/* brand gallery thumbs */
[data-gallery] button[aria-pressed="true"] { border-color: #12201D !important; }
[data-gallery] button[aria-pressed="false"] { border-color: transparent !important; }

/* header menu button (phones and small tablets) */
.menu-btn { display: none; }
@media (max-width: 920px) {
  .site-header .menu-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 1px solid #D6DCDA; border-radius: 4px; background: #fff; color: #12201D; cursor: pointer;
  }
  .site-nav { display: none !important; flex-basis: 100%; flex-direction: column; align-items: stretch !important; padding: 4px 0 8px; }
  .site-nav.open { display: flex !important; }
  .site-nav a { border-top: 1px solid #ECEDEB; }
  .site-nav a:last-child { margin: 12px 0 0 !important; justify-content: center; border-top: 0; }
}

/* home hero visual on tablets and phones: keep the whole scene in view */
@media (max-width: 900px) {
  .hero-visual { min-height: 0 !important; flex-basis: 100% !important; padding-bottom: 30px; }
  .hero-frame { position: relative !important; inset: auto !important; max-width: 560px; margin: 0 auto; padding: 26px 14px 0; }
  .hero-inner { position: relative !important; inset: auto !important; aspect-ratio: 1100 / 1040; }
  .hero-seal { width: 96px !important; height: 96px !important; left: max(0px, calc(50% - 300px)) !important; bottom: 0 !important; }
  .hero-seal img { height: 27px !important; }
}
@media (max-width: 600px) {
  .wa-float { width: 56px; height: 56px; min-height: 0 !important; padding: 0 !important; justify-content: center; border-radius: 50% !important; right: 16px !important; bottom: 16px !important; }
  .wa-float .wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* multi-column grids on phones */
@media (max-width: 600px) {
  [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 14px !important; }
  [style*="grid-auto-rows: 300px"] { grid-auto-rows: 200px !important; }
  figure > div[style*="height: 300px"] { height: 200px !important; }
  figure > div[style*="height: 300px"] img[style*="height: 260px"] { height: 170px !important; }
}

/* keep the WhatsApp button above the sticky brand bar */
body:has([style*="position: sticky; bottom: 0px"]) .wa-float { bottom: 96px !important; }