/* Alleen wat een webshop extra nodig heeft.
   De kop, de menubalk, de knoppen en de voet komen uit de stylesheets van powernexx.nl zelf,
   dus daar staat hier niets over. Verandert de huisstijl daar, dan verandert de winkel mee. */

:root {
  --shop-lijn: var(--c-border, #d4d2ce);
  --shop-zacht: var(--c-bg-light, #e9e7e3);
  --shop-ink: var(--c-text, #1c1b1a);
  --shop-ink-2: var(--c-text-muted, #4a4949);
  --shop-muted: var(--c-text-muted-light, #6b7280);
  --shop-accent: var(--c-accent, #ff6a1a);
  --shop-accent-tekst: var(--c-accent-ink, #a63e00);
  --shop-accent-zacht: var(--c-accent-soft, #fff0e6);
  --shop-oranje: var(--c-accent, #ff6a1a);
  --shop-oranje-tekst: var(--c-accent-ink, #a63e00);
  --shop-oranje-zacht: var(--c-accent-soft, #fff0e6);
  --shop-schaduw: var(--schaduw-kaart, 0 10px 30px rgba(28, 27, 26, .07));
}

body.shop { background: #fff; }

.overslaan { position: absolute; left: -9999px; }
.overslaan:focus { left: 8px; top: 8px; z-index: 999; background: var(--shop-ink); color: #fff; padding: 10px 14px; border-radius: 8px; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Het woordje shop naast het logo, in dezelfde toon als de rest van de kop. */
.shop-logo-label {
  display: inline-block; margin-left: 6px; vertical-align: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--shop-muted);
}

/* Zoekveld in de menubalk */
.nav-bar-inner { gap: 16px; }
.shop-zoek { display: flex; gap: 6px; margin-left: auto; }
.shop-zoek input {
  font: inherit; font-size: 14px; padding: 8px 12px; min-width: 190px;
  border: 1px solid var(--shop-lijn); border-radius: 8px; background: #fff; color: var(--shop-ink);
}
.shop-zoek input:focus-visible { outline: 2px solid var(--shop-accent); outline-offset: 1px; }
.shop-zoek button {
  font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--shop-lijn); border-radius: 8px; background: var(--shop-zacht); color: var(--shop-ink);
}
.shop-zoek button:hover { border-color: var(--shop-accent); color: var(--shop-accent-tekst); }
@media (max-width: 860px) { .shop-zoek { width: 100%; margin: 8px 0 4px; } .shop-zoek input { flex: 1; min-width: 0; } }

/* Monteursbalk */
.monteursbalk { background: var(--shop-oranje); color: #fff; font-size: 14px; }
.monteursbalk__in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-block: 9px; }
.monteursbalk button {
  font: inherit; font-weight: 600; background: rgba(255, 255, 255, .18); color: #fff;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 8px; padding: 5px 13px; cursor: pointer;
}
.monteursbalk form { margin-left: auto; }

/* Secties in de winkel */
.shop-sectie { padding-block: clamp(38px, 4.5vw, 68px); }
.shop-sectie--zacht { background: var(--shop-zacht); border-block: 1px solid var(--shop-lijn); }
.shop-sectie--kop { padding-block: clamp(22px, 3vw, 38px) 0; }
.shop-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.shop-kop h2 { font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.05rem); margin: 0; letter-spacing: -.02em; }
.shop-kop p { color: var(--shop-muted); margin: 8px 0 0; max-width: 56ch; }
.shop-link { font-weight: 600; color: var(--shop-accent-tekst); text-decoration: none; }
.shop-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.shop-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--shop-accent-tekst); margin: 0 0 10px; }
.shop-lead { color: var(--shop-ink-2); font-size: 1.03rem; }
.shop-klein { font-size: 13px; color: var(--shop-muted); }
.shop-leeg { color: var(--shop-muted); padding: 26px 0; }

.kruimels { display: flex; gap: 8px; font-size: 13px; color: var(--shop-muted); padding-top: 16px; }
.kruimels a { text-decoration: none; color: var(--shop-muted); }
.kruimels a:hover { color: var(--shop-accent-tekst); }

/* Hero van de winkel */
.shop-hero { padding-block: clamp(30px, 4vw, 56px); border-bottom: 1px solid var(--shop-lijn); }
.shop-hero__in { display: grid; gap: clamp(22px, 3.5vw, 44px); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
@media (max-width: 880px) { .shop-hero__in { grid-template-columns: 1fr; } }
.shop-hero h1 { font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.85rem); margin: 0; letter-spacing: -.025em; line-height: 1.14; }
.shop-hero h1 span { color: var(--shop-oranje); }
.shop-hero .shop-lead { margin-top: 14px; max-width: 46ch; }
.shop-hero__acties { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.beloften { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.beloften li { background: var(--shop-zacht); border: 1px solid var(--shop-lijn); border-radius: 12px; padding: 15px 17px; display: grid; gap: 2px; }
.beloften strong { font-size: 15px; }
.beloften span { color: var(--shop-muted); font-size: 13.5px; }

/* Kaarten */
.categorie-grid { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.categorie-kaart { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--shop-lijn); border-radius: 14px; padding: 22px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.categorie-kaart:hover { border-color: var(--shop-accent); box-shadow: var(--shop-schaduw); transform: translateY(-2px); }
.categorie-kaart h3 { font-size: 1.15rem; margin: 0; }
.categorie-kaart p { color: var(--shop-muted); font-size: 14px; margin: 0; }
.categorie-kaart__aantal { margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--shop-accent-tekst); font-weight: 600; }

.product-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); }
.product-kaart { position: relative; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--shop-lijn); border-radius: 14px; padding: 17px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.product-kaart:hover { border-color: var(--shop-accent); box-shadow: var(--shop-schaduw); transform: translateY(-2px); }
.product-kaart__beeld { height: 118px; border-radius: 10px; background: var(--shop-zacht); display: grid; place-items: center; font-size: 32px; font-weight: 700; color: var(--c-border, #d4d2ce); }
.product-kaart h3 { font-size: 15.5px; margin: 0; }
.product-kaart p { color: var(--shop-muted); font-size: 13.5px; margin: 0; }
.product-kaart__voet { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--shop-lijn); }
.vlag { position: absolute; top: 10px; right: 10px; background: var(--shop-oranje-zacht); color: var(--shop-oranje-tekst); font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 6px; }
.prijs { font-weight: 700; font-size: 17px; display: grid; }
.prijs small { font-weight: 400; font-size: 12px; color: var(--shop-muted); }

.subnav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.subnav a { text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 15px; border: 1px solid var(--shop-lijn); border-radius: 999px; background: #fff; color: var(--shop-ink-2); }
.subnav a:hover { border-color: var(--shop-accent); color: var(--shop-accent-tekst); }
.intro { color: var(--shop-ink-2); margin-top: 12px; max-width: 62ch; }

/* Productpagina */
.product { display: grid; gap: clamp(22px, 3vw, 46px); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding-block: 24px; align-items: start; }
@media (max-width: 880px) { .product { grid-template-columns: 1fr; } }
.product__beeld img { border-radius: 16px; border: 1px solid var(--shop-lijn); }
.product__geenbeeld { aspect-ratio: 1; border-radius: 16px; background: var(--shop-zacht); display: grid; place-items: center; font-size: 80px; font-weight: 700; color: var(--c-border, #d4d2ce); }
.product__info h1 { font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.2rem); margin: 0; letter-spacing: -.025em; line-height: 1.16; }
.product__info .shop-lead { margin-top: 12px; }

.prijsblok { margin-top: 20px; display: grid; gap: 2px; }
.prijsblok__hoofd { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; }
.prijsblok__sub { color: var(--shop-muted); font-size: 13.5px; }

.kenmerken { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.kenmerken li { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--shop-lijn); padding-bottom: 8px; font-size: 14px; }
.kenmerken strong { font-weight: 600; }
.kenmerken span { color: var(--shop-muted); }

.keuze { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); margin-top: 24px; }
.keuze__blok { border: 1px solid var(--shop-lijn); border-radius: 14px; padding: 19px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.keuze__blok h2 { font-size: 1.05rem; margin: 0; }
.keuze__blok p { color: var(--shop-muted); font-size: 14px; margin: 0; }
.keuze__blok--accent { background: var(--shop-accent-zacht); border-color: var(--c-accent, #ff6a1a); }
.keuze__blok--accent p { color: var(--shop-ink-2); }
.keuze__blok--dicht { background: var(--shop-zacht); }
.keuze__prijs { font-weight: 700; font-size: 18px; color: var(--shop-ink) !important; margin-top: auto; }
.keuze__prijs small { font-weight: 400; font-size: 12px; color: var(--shop-muted); }
.keuze .btn { margin-top: 6px; }

.producttekst { padding-block: 18px 56px; max-width: 70ch; }
.producttekst h2 { font-size: 1.3rem; margin: 28px 0 0; }
.producttekst h3 { font-size: 1.08rem; margin: 22px 0 0; }
.producttekst p, .producttekst ul { margin-top: 12px; color: var(--shop-ink-2); }

.uitleg { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; }
@media (max-width: 820px) { .uitleg { grid-template-columns: 1fr; } }
.uitleg p { margin-top: 14px; color: var(--shop-ink-2); }
.kader { background: var(--shop-zacht); border: 1px solid var(--shop-lijn); border-radius: 14px; padding: 22px; display: grid; gap: 12px; }
.kader h3 { font-size: 1.08rem; margin: 0; }
.kader p { color: var(--shop-ink-2); font-size: 14.5px; margin: 0; }
.kader .btn { justify-self: start; }

.footer-bottom { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; padding-top: 18px; margin-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; opacity: .8; }

/* Het label naast het logo, in dezelfde vorm als het "nieuw" bij de kennisbank. */
.shop-label { margin-left: 8px; vertical-align: 12px; }

/* De voetregel onderaan de winkel. */
.footer-bottom-shop {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  padding-top: 16px; margin-top: 16px; border-top: 1px solid rgba(28, 27, 26, .12);
  font-size: 13px; opacity: .75;
}

/* Vertrouwensblokken op de homepage, dezelfde signalen als op de hoofdsite. */
.trust { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 26px; }
.trust__blok { background: #fff; border: 1px solid var(--shop-lijn); border-radius: var(--radius-lg, 12px); padding: 16px 18px; display: grid; gap: 2px; }
.trust__blok b { font-size: 20px; letter-spacing: -.02em; }
.trust__blok span { color: var(--shop-muted); font-size: 13px; }
.trust__ster { color: var(--c-accent, #ff6a1a); }

/* Voorraad en fouten zijn de enige plekken waar een andere kleur mag. */
.voorraad { font-size: 13px; font-weight: 600; color: var(--c-ok, #1c6b3a); }
.voorraad--nee { color: var(--c-text-muted-light, #6b7280); font-weight: 400; }
.foutmelding { background: var(--c-fout-soft, #fdecea); color: var(--c-fout, #b3261e); border-radius: 8px; padding: 10px 14px; font-size: 14px; }

/* Verwijzing naar het kennisbankartikel dat bij dit product hoort. */
.kb-link {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 20px;
  background: var(--shop-zacht); border: 1px solid var(--shop-lijn);
  border-radius: var(--radius-lg, 12px); padding: 14px 16px; text-decoration: none; color: inherit;
}
.kb-link:hover { border-color: var(--c-accent, #ff6a1a); }
.kb-link__icoon { font-size: 20px; line-height: 1; }
.kb-link strong { display: block; font-size: 14.5px; }
.kb-link span { color: var(--shop-muted); font-size: 13px; }

/* Ruimte onderaan zodat de vaste balk op een telefoon niets afdekt. */
@media (max-width: 900px) { body.shop { padding-bottom: 72px; } }

/* De hoofdsite kleurt kleine bovenkopjes nog teal. In de winkel is oranje de enige accentkleur,
   dus die regel zetten we hier recht. Groen blijft alleen voor voorraad, rood voor fouten. */
body.shop .shop-eyebrow,
body.shop [class*="eyebrow"] { color: var(--c-accent-ink, #a63e00) !important; }
body.shop a { color: inherit; }
body.shop .shop-link, body.shop .kruimels a:hover { color: var(--c-accent-ink, #a63e00); }

/* Het woordje shop krijgt dezelfde vorm als het label "nieuw" in het menu. */
body.shop .header-logo { display: inline-flex; align-items: center; gap: 4px; }
body.shop .shop-label { position: static; margin-left: 6px; vertical-align: middle; }

/* De twee knoppen rechtsboven passen naast de contactgegevens, net als op de hoofdsite. */
body.shop .header-inner { flex-wrap: nowrap; }
body.shop .header-cta-wrap { margin-left: auto; }
@media (max-width: 1100px) { body.shop .header-inner { flex-wrap: wrap; } }

/* Vier vertrouwensblokken naast elkaar, ook op een smaller scherm. */
.trust { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* De knoppen in de kop mogen niet over twee regels breken. */
body.shop .header-cta { white-space: nowrap; }
body.shop .header-contact .contact-label { white-space: nowrap; }

/* Winkelwagen */
.wagen { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr); align-items: start; }
@media (max-width: 900px) { .wagen { grid-template-columns: 1fr; } }
.wagen__regels { display: grid; gap: 10px; }
.wagenregel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--shop-lijn); border-radius: 12px; padding: 15px 17px; }
.wagenregel strong { display: block; font-size: 15.5px; }
.wagenregel .shop-klein { display: block; }
.wagenregel__aantal { display: flex; gap: 6px; }
.wagenregel__aantal input { font: inherit; width: 64px; padding: 8px 10px; border: 1px solid var(--shop-lijn); border-radius: 8px; }
.wagenregel__aantal button { font: inherit; font-size: 13px; padding: 8px 12px; border: 1px solid var(--shop-lijn); border-radius: 8px; background: var(--shop-zacht); cursor: pointer; }
.wagenregel__prijs { font-weight: 700; text-align: right; display: grid; }
.wagenregel__prijs small { font-weight: 400; font-size: 11.5px; color: var(--shop-muted); }
.wagen__legen button { font: inherit; font-size: 13px; background: none; border: none; color: var(--shop-muted); text-decoration: underline; cursor: pointer; padding: 6px 0; }
.wagen__totaal { background: var(--shop-zacht); border: 1px solid var(--shop-lijn); border-radius: 14px; padding: 20px; display: grid; gap: 10px; }
.wagen__totaal h2 { font-size: 1.15rem; margin: 0; }
.totaalregel { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.totaalregel b { font-weight: 600; }
.totaalregel--groot { border-top: 1px solid var(--shop-lijn); padding-top: 10px; margin-top: 4px; font-size: 16px; }
.totaalregel--groot b { font-size: 19px; }
.wagen__totaal .btn { margin-top: 6px; }

/* Informatiepagina's: rustige, leesbare tekst met een vaste maat. */
.infopagina { max-width: 74ch; }
.infopagina h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.3rem); margin: 0; letter-spacing: -.025em; }
.infopagina h2 { font-size: 1.25rem; margin: 34px 0 0; letter-spacing: -.02em; }
.infopagina h3 { font-size: 1.05rem; margin: 22px 0 0; }
.infopagina p { margin-top: 12px; color: var(--shop-ink-2); }
.infopagina .shop-lead { margin-top: 14px; }
.infolijst { margin: 12px 0 0; padding-left: 20px; color: var(--shop-ink-2); display: grid; gap: 7px; }
.infotabel { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14.5px; }
.infotabel th { text-align: left; background: var(--shop-zacht); padding: 10px 12px; font-size: 13px; }
.infotabel td { padding: 10px 12px; border-top: 1px solid var(--shop-lijn); color: var(--shop-ink-2); vertical-align: top; }
.infopagina .btn { margin: 14px 8px 0 0; }

.bedrijfsblok { margin-top: 40px; padding: 20px 22px; background: var(--shop-zacht); border: 1px solid var(--shop-lijn); border-radius: var(--radius-lg, 12px); }
.bedrijfsblok h2 { margin: 0 0 10px; font-size: 1.05rem; }
.bedrijfsblok dl { margin: 0; display: grid; gap: 6px; }
.bedrijfsblok dl div { display: flex; gap: 12px; font-size: 14px; }
.bedrijfsblok dt { min-width: 110px; color: var(--shop-muted); }
.bedrijfsblok dd { margin: 0; }

/* Modelformulier */
.formulierpagina { max-width: 62ch; }
.formulierpagina label { display: grid; gap: 5px; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--shop-muted); }
.formulierpagina input, .formulierpagina textarea, .formulierpagina select {
  font: inherit; font-size: 15px; font-weight: 400; color: var(--shop-ink);
  padding: 11px 13px; border: 1px solid var(--shop-lijn); border-radius: 9px; background: #fff;
}
.formulierpagina input:focus-visible, .formulierpagina textarea:focus-visible { outline: 2px solid var(--c-accent, #ff6a1a); outline-offset: 1px; }
.melding-goed { background: var(--c-ok-soft, #e6f5ec); color: var(--c-ok, #1c6b3a); border-radius: 10px; padding: 14px 16px; font-size: 14.5px; }

/* ══ Telefoon ══════════════════════════════════════════════════════════
   Ontworpen op 390 breed, gecontroleerd op 360. De menubalk van de hoofdsite
   valt op een telefoon weg, dus daar komt een eigen menu voor in de plaats. */

.mobielmenu { display: none; }

@media (max-width: 900px) {
  /* De menubalk met categorieën past niet; die vervangen we door het knopmenu. */
  body.shop .nav-bar-links { display: none; }
  body.shop .nav-bar-inner { padding-block: 8px; }
  body.shop .shop-zoek { width: 100%; margin: 0; }
  body.shop .shop-zoek input { flex: 1; min-width: 0; font-size: 16px; }
  body.shop .header-cta-wrap { display: none; }
  body.shop .header-contact { display: none; }

  .mobielmenu { display: block; margin-left: auto; position: relative; }
  .mobielmenu > summary {
    list-style: none; width: 44px; height: 44px; display: grid; align-content: center;
    gap: 5px; padding: 0 10px; cursor: pointer; border: 1px solid var(--shop-lijn);
    border-radius: 10px; background: #fff;
  }
  .mobielmenu > summary::-webkit-details-marker { display: none; }
  .mobielmenu > summary span { display: block; height: 2px; background: var(--shop-ink); border-radius: 2px; }
  .mobielmenu[open] > summary { border-color: var(--c-accent, #ff6a1a); }
  .mobielmenu__paneel {
    position: absolute; right: 0; top: 52px; z-index: 60; width: min(84vw, 320px);
    background: #fff; border: 1px solid var(--shop-lijn); border-radius: 12px;
    box-shadow: var(--shop-schaduw); padding: 8px; display: grid;
    max-height: 70vh; overflow-y: auto;
  }
  .mobielmenu__paneel a {
    display: block; padding: 12px 14px; min-height: 44px; text-decoration: none;
    color: var(--shop-ink); font-size: 15.5px; border-radius: 8px;
  }
  .mobielmenu__paneel a:hover { background: var(--shop-zacht); }
  .mobielmenu__sub { padding-left: 28px !important; color: var(--shop-muted) !important; font-size: 14.5px !important; }
  .mobielmenu__winkelwagen { background: var(--c-accent, #ff6a1a); color: #fff !important; font-weight: 600; margin-bottom: 6px; }

  /* De installatieweg staat bovenaan; dat is waar het verschil zit met een gewone webshop. */
  .keuze { grid-template-columns: 1fr; }
  .keuze__blok--accent { order: -1; }
  .keuze__blok--dicht { order: 1; }

  /* Safari zoomt in op velden onder 16px. */
  body.shop input, body.shop select, body.shop textarea { font-size: 16px; }
  body.shop .btn, body.shop button, body.shop .mobielmenu__paneel a { min-height: 44px; }

  /* Ruimte voor de vaste balk onderaan, met respect voor de veilige zone van de telefoon. */
  body.shop { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* De contactbalk van de hoofdsite: drie gelijke vakken in plaats van twee grote en een losse. */
  body.shop .mobile-bar { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  body.shop .mobile-bar-btn { display: grid !important; place-items: center; gap: 2px; min-height: 52px; border-radius: 10px; font-size: 12.5px; }
  body.shop .mobile-bar-text { display: block !important; font-size: 12px; }

  /* Tabellen worden gestapelde blokken. */
  .infotabel, .infotabel thead, .infotabel tbody, .infotabel tr, .infotabel th, .infotabel td { display: block; }
  .infotabel thead { display: none; }
  .infotabel tr { border: 1px solid var(--shop-lijn); border-radius: 10px; margin-top: 10px; padding: 4px 0; }
  .infotabel td { border: none; padding: 6px 12px; }
  .infotabel td:first-child { font-weight: 600; color: var(--shop-ink); }

  .wagenregel { grid-template-columns: 1fr; gap: 10px; }
  .wagenregel__prijs { text-align: left; }
}

@media (max-width: 380px) {
  body.shop .merk, body.shop .header-logo img { max-width: 150px; }
  .shop-hero h1 { font-size: 1.65rem; }
}

/* De actiebalk die op koop-pagina's de contactbalk vervangt. */
.mobiel-actie { display: none; }
@media (max-width: 900px) {
  .mobiel-actie {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: #fff; border-top: 1px solid var(--shop-lijn);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .mobiel-actie__knop { display: flex; width: 100%; justify-content: center; }
}

/* De vaste balk onderaan.
   Op de hoofdsite komen twee regels uit critical.min.css, dat hier niet geladen wordt: de balk
   heeft drie knoppen maar het raster staat op twee kolommen, en de derde knop mist zijn kleur.
   Die twee regels staan daarom hier. */
@media (max-width: 900px) {
  body.shop .mobile-bar { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; padding-inline: 12px; }
  body.shop .mobile-bar-btn--offerte { background-color: #c2410c; color: #fff; }
  body.shop .mobile-bar-btn { font-size: .875rem; }
}