/* Eigen aanpassingen bovenop het v8-ontwerp. De ontwerpbestanden zelf
   (site.css, v8.css, shop-pages.css) blijven byte-gelijk aan websitebanner.nl;
   elke afwijking staat hier, met waarom. */

/* Ries 13-10: "deze ruimte is nog gek" — tussen de stijltegels en de
   proefdrukkaart stond op mobiel ~90 px lege ruimte (62 px bovenmarge in
   #home_extra voor het kaartje dat over de rand steekt, plus de tussenruimte). */
@media (max-width: 699px) {
  #home_extra { padding-top: 30px; }
  #home_eigen_stijl { padding-bottom: 8px; }
}

/* Oneindig scrollen (v8-winkel.js): zolang het script de volgende pagina's
   aanplakt is de paginering overbodig; zonder script blijft hij gewoon staan. */
html.gk-oneindig .catalogue-pagination { display: none; }
.gk-oneindig-wacht { height: 1px; }

/* De vorige-pijl van onze paginering: dezelfde pijl als volgende, gespiegeld. */
.catalogue-pagination a.is-prev svg { transform: scaleX(-1); }

/* Het actieve filter is bij ons een link (naar de doorsnede zonder dat filter). */
a.active-filter { text-decoration: none; }

/* Ries 13-10: "ik mis favorieten etc in de header ... zorg dat er geen functies
   weg gaan". Het ontwerp verbergt Mijn account en Contact op mobiel; onze oude
   mobiele kopbalk had ze wel. Ze komen terug als icoon, net als het hartje en
   de winkelwagen, en de rechterkolom wordt breed genoeg voor vier iconen. */
@media (max-width: 899px) {
  #header_row #menu_inloggen, #header_row #contact { display: list-item; }
  #header_row ul.lower { gap: 4px; }
}
@media (max-width: 599px) {
  #header_row .menu .right { flex: 0 0 auto; }
  #header_row ul.lower > li > a { width: 38px; min-width: 38px; }
}

/* Ries 13-10: niet zoomen, niet zijwaarts schuiven. touch-action laat
   gewoon scrollen (ook de carrousels) toe, maar geen knijpzoom; 16px in
   invoervelden voorkomt dat iOS bij focus inzoomt. */
html, body { overflow-x: clip; }
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 999px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Schilpagina's (zonder eigen v8-ontwerp): de v8-achtergrond loopt door
   achter de inhoud; het thema zette daar een wit vlak. */
body.gk-v8-schil #main,
body.gk-v8-schil #main .page_container,
body.gk-v8-schil #main #content_bg_wrapper,
body.gk-v8-schil #main #main_content_wrapper { background: transparent; box-shadow: none; }

/* Ingelogd (Ries 14-10): het winkelwagen-balletje zit in een eigen span om het
   icoon, net als het favorieten-hartje. De kopbalk verbergt op smallere schermen
   elke span naast het icoon; deze niet, anders valt het mandje weg. */
#header_row ul.lower>li>a>span.gk-wagen-wrap{position:relative;display:flex;width:auto;height:auto;clip-path:none;overflow:visible}
.gk-stand-teller{position:absolute;top:-9px;right:-10px;min-width:20px;padding-inline:3px;font:600 var(--small-size)/1.35 var(--body);border-radius:999px;background:#ece8dc;text-align:center;color:#405958}
#header_row ul.lower>li>a>.aantal{display:none}
.gk-stand-teller:not(.gk-erop){display:none}
/* Het ingelogde account-menu (hun opbouw): de regels met een aantal staan als
   .button.left, die horen er net zo uit te zien als de gewone regels, met het
   aantal rechts. */
#header_row .sub-menu-block.account .button.left{background:none;color:var(--ink);padding:10px 0;border:0;justify-content:flex-start;text-align:left;min-height:40px;font-weight:400;transform:none;gap:10px}
#header_row .sub-menu-block.account .button.left .count{margin-left:auto;min-width:24px;padding:0 7px;border-radius:999px;background:#ece8dc;color:#405958;font-size:var(--small-size);line-height:1.6;text-align:center}
#header_row .sub-menu-block.account .button.list{gap:10px}
#header_row .sub-menu-block.account form{margin:0}
/* Winkelwagen-popup met artikelen (Ries 23-10, bijgewerkt naar header-footer.scss van kerstkaarten
   van 23-10 08:15): hun opbouw zet "Aantal kaarten" en "Totaalbedrag" als .button.left; bij kerst zijn
   het .cart-line-regels. Zelfde maten: aantal vet in de accentkleur zonder bolletje, totaal 20px vet in
   de accentkleur (met €, zoals kerst), 18px ruimte boven "Bekijk winkelwagen". */
#header_row .sub-menu-block.winkelwagen{min-width:260px}
#header_row .sub-menu-block.winkelwagen .button.left{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:0;margin:0;padding:9px 4px;border:0;border-radius:0;background:none;box-shadow:none;transform:none;color:var(--ink);font-size:14px;font-weight:500;text-align:left}
#header_row .sub-menu-block.winkelwagen .button.left:hover{background:none;color:var(--ink)}
#header_row .sub-menu-block.winkelwagen .button.left>span{margin-left:auto;padding-left:8px;color:#2b6055;font-weight:700}
#header_row .sub-menu-block.winkelwagen .button.left.totaal{margin-bottom:18px}
#header_row .sub-menu-block.winkelwagen .button.left.totaal>span{font-size:20px}
/* Kerst zet sinds 23-10 "€ " voor het totaal; onze bron levert alleen het getal. */
#header_row .sub-menu-block.winkelwagen .button.left.totaal>span::before{content:"\20AC\00a0"}
#header_row .sub-menu-block.winkelwagen .divider{height:1px;margin:10px 0;background:var(--line)}
/* Ingelogd is het poppetje gevuld blauw (#00ade7), zoals in de vorige versie
   (Ries 09-09 en 14-10). Dezelfde tekening als in kopbalk-stand.css; de
   lijn-svg van v8 blijft staan voor de maat, maar onzichtbaar. */
#menu_inloggen.gk-ingelogd>a>i,#account.gk-ingelogd>a>i{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20448%20512%27%3E%3Cpath%20fill%3D%27%2300ade7%27%20d%3D%27M224%20256A128%20128%200%201%200%20224%200a128%20128%200%201%200%200%20256zm-45.7%2048C79.8%20304%200%20383.8%200%20482.3C0%20498.7%2013.3%20512%2029.7%20512l388.6%200c16.4%200%2029.7-13.3%2029.7-29.7C448%20383.8%20368.2%20304%20269.7%20304l-91.4%200z%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain}
#menu_inloggen.gk-ingelogd>a>i>svg,#account.gk-ingelogd>a>i>svg{visibility:hidden}

/* Ries 14-10, vervolg: de vier mobiele kopbalkiconen duidelijk dichter bij elkaar.
   Stap 35px (34px link + 1px ruimte); iconen blijven 20px, tikvlakken 44px hoog. */
@media (max-width: 599px) {
  #header_row ul.lower { gap: 1px; }
  #header_row ul.lower > li > a { width: 34px; min-width: 34px; min-height: 44px; }
}
/* Inlogblok boven "Tijdelijk opgeslagen ontwerpen" (Ries 14-10). */
#main .content_right.account>.gk-ontwerpen-inlog{grid-area:auto!important;grid-column:1/-1!important;float:none;width:auto;max-width:480px;margin:0 0 36px;padding:0 0 28px;border-bottom:1px solid #e6e1d3}
#main .gk-ontwerpen-inlog h2{margin:0 0 16px}

/* E-mailformulier op de infopagina's (fancybox, onze eigen HTML) in de stijl
   van .info-contact-form uit het ontwerp. #telefoon is de spamval van het
   formulier: die hield het thema verborgen en moet verborgen blijven. */
#berichtForm #telefoon { display: none; }
.info-page #mailForm { max-width: 570px; width: calc(100% - 24px); padding: 23px; border-radius: 12px; background: #fffdf8; color: #536458; font: 400 16px/1.5 var(--body, 'Work Sans', 'Segoe UI', Arial, sans-serif); }
.info-page #mailForm .h2 { margin: 0 0 6px; color: #2c5145; font: 400 1.6rem/1.2 var(--display, Georgia, serif); }
.info-page #berichtForm { display: grid; gap: 8px; }
.info-page #berichtForm .h3 { margin: 8px 0 0; color: #2c5145; font-weight: 600; font-size: 16px; }
.info-page #berichtForm .h3 span { color: #2c5145; }
.info-page #berichtForm br { display: none; }
.info-page #berichtForm label.select { display: block; }
.info-page #berichtForm input.field, .info-page #berichtForm select, .info-page #berichtForm textarea {
  width: 100%; min-height: 48px; background: #fff; border: 1px solid #cfd6c6; border-radius: 7px; padding: 12px; font: inherit; font-size: 16px; color: #2c5145; box-sizing: border-box; }
.info-page #berichtForm textarea { resize: vertical; min-height: 140px; height: auto !important; }
.info-page #berichtForm .button { margin-top: 15px; justify-self: start; }

/* Ries 21-10: "specials zijn nog met een oud zijmenu" (o.a. /speciale-geboortekaartjes/).
   Het kaartenmenu links op schilpagina's krijgt dezelfde v8-opmaak als het zijpaneel op de
   info- en Handig-pagina's (info-pages.css). Op mobiel blijft het uitklapmenu van het thema. */
@media (min-width: 768px) {
  body.gk-v8-schil #main #left_container.kaarten { padding: 17px 13px 20px !important; margin-top: 0 !important; min-height: 0; background: #f3f0e7; border: 1px solid #e1e1d6; border-radius: 14px; box-sizing: border-box; width: calc(20% - 28px); margin-right: 28px; }
  body.gk-v8-schil #main #left_container.kaarten .h2 { margin: 18px 0 9px !important; padding: 18px 11px 0; border-top: 1px solid #dedbcc; background: none; color: #68735e; font: 600 13px/1.4 var(--body, 'Work Sans', 'Segoe UI', Arial, sans-serif); letter-spacing: .04em; text-transform: uppercase; }
  body.gk-v8-schil #main #left_container.kaarten .h2:first-of-type { margin-top: 0 !important; padding-top: 0; border-top: 0; }
  body.gk-v8-schil #main #left_container.kaarten .h2::after { right: 11px !important; color: #8a9483; }
  body.gk-v8-schil #main #left_container.kaarten ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  body.gk-v8-schil #main #left_container.kaarten li { float: none; margin: 0; padding: 0; background: none; border: 0; }
  body.gk-v8-schil #main #left_container.kaarten li a { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 11px; border-radius: 7px; color: #576653; font: 400 14px/1.45 var(--body, 'Work Sans', 'Segoe UI', Arial, sans-serif); text-decoration: none; }
  body.gk-v8-schil #main #left_container.kaarten li a:hover { background: #e9e7dc; color: #2c5145; text-decoration: none; }
  body.gk-v8-schil #main #left_container.kaarten li a span { position: static; font: 600 10px/1.4 var(--body, 'Work Sans', sans-serif); padding: 2px 4px; background: #e2e7d6; color: #536d50; border-radius: 3px; }
}

/* Hoofdmenu op desktop zoals op kerstkaarten.nl: geen uitklappen op hover, alleen op klik
   (.is-open, gezet door js/v8-menu-klik.js). Zonder dat script (html zonder .gk-menu-klik)
   blijft hover gewoon werken. De chevron (ook van dat script) alleen op desktop. */
.main-nav>li>a>.gk-menu-chevron{display:none}
@media(min-width:900px){
 html.gk-menu-klik .main-nav>li:not(.is-open)>.sub-menu-block{display:none!important}
 /* functions.min.js (thema) zet bij hover een inline breedte op het uitklapmenu, gemeten
    terwijl het nog dicht is: Specials werd zo ~528px links (Ries 22-10). Altijd volle breedte. */
 html.gk-menu-klik .main-nav>li>.sub-menu-block{width:auto!important}
 html.gk-menu-klik .main-nav>li>a>.gk-menu-chevron{display:inline-block;flex:none;width:10px;height:10px;margin-left:6px;transition:transform .2s}
 html.gk-menu-klik .main-nav>li.is-open>a>.gk-menu-chevron{transform:rotate(180deg)}
}
/* De chevrons kosten ~26px: zonder dit brak het menu op 1000px af op twee regels. */
@media(min-width:900px) and (max-width:1099px){html.gk-menu-klik .main-nav>li>a{padding-left:4px;padding-right:4px}}

/* Zoekpagina in de opbouw van dev.kerstkaarten.nl (Ries 22-10): geen filterpaneel,
   dus de kaarten over de volle breedte in vier kolommen; kop zoals collection-head. */
.search-main .search-head{border-bottom:1px solid var(--line,#e2e3d6);margin-bottom:26px}
.search-main .search-head .shop-eyebrow{display:flex;align-items:center;gap:8px}
.search-main .search-head .shop-eyebrow svg{width:18px;height:18px;flex:none}
.search-main .search-head .result-count{margin:0}
.search-main .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1150px){.search-main .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.search-main .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.search-main .search-empty{max-width:620px;margin:10px auto 40px;text-align:center}
.search-main .search-empty h2{margin:0 0 8px}
.search-main .search-empty p{color:var(--muted);margin:0 0 20px}
.search-main .search-again{display:flex;gap:10px;margin:0 0 18px}
.search-main .search-again input{flex:1;min-width:0;height:48px;padding:0 16px;border:1px solid #d3d8c9;border-radius:11px;background:#fff;font:inherit;color:inherit}
.search-main .search-again .shop-button{display:inline-flex;align-items:center;gap:8px;height:48px}
.search-main .search-again .shop-button svg{width:18px;height:18px}
.search-main .search-suggesties{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.search-main .search-suggesties a{padding:8px 14px;border:1px solid #d3d8c9;border-radius:999px;color:var(--nh-ink,#2c5145);text-decoration:none;font-size:15px}
.search-main .search-suggesties a:hover{background:#f3f1e8}
.search-main .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Categoriepagina's: linkermenu breder (Ries 22-10: "veel dingen worden afgebroken naar een
   nieuwe regel"). Op 220/200px braken "Verfijn je keuze" en "Mijn favorieten" af; op 270/250
   staat alles op één regel. */
.catalogue-layout{grid-template-columns:270px minmax(0,1fr)}
@media(max-width:1150px){.catalogue-layout{grid-template-columns:250px minmax(0,1fr)}}