/* ==========================================================================
   De Printkamer · zoeken.css — live zoeken: paneel onder het zoekveld in de header (≥ 1100)
   en schermvullend zoekscherm (overlay #zoeken, mobiel en tablet).
   Ontwerp: tab 2 · 44:1195, 145:4898, 145:5498; mobiel 45:1389, 145:18498, 145:18388.
   ========================================================================== */

.alleen-mobiel-blok { display: none; }
@media (max-width: 767px) { .alleen-groot-blok { display: none !important; } .alleen-mobiel-blok { display: block; } }

/* Header: wisknop en paneel */
.zoekveld { position: relative; }
.zoekveld.is-open { border-color: var(--kleur-inkt); }
.zoekveld__wis { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--kleur-lavendel-licht); position: relative; }
.zoekveld__wis::after { content: ""; position: absolute; inset: -10px; }
.zoekveld__wis .icoon { width: 12px; height: 12px; }
.zoekveld__wis[hidden] { display: none; }

.zoekpaneel { position: absolute; right: 0; top: calc(100% + 17px); z-index: 210; width: 640px; max-width: calc(100vw - 2 * var(--marge)); }
.zoekpaneel__dimmer { position: fixed; left: 0; right: 0; bottom: 0; top: var(--zoek-top, 123px); z-index: -1; background: rgba(47, 47, 64, .4); }
.zoekpaneel__kaart { position: relative; border-radius: 24px; background: var(--kleur-wit); box-shadow: 0 24px 48px rgba(46, 46, 64, .16); overflow: hidden; max-height: calc(100vh - var(--zoek-top, 123px) - 32px); overflow-y: auto; }
.zoekpaneel__kaart:empty { display: none; }

/* Inhoud (paneel) */
.zoekresultaat__inhoud { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; padding: 24px 24px 20px; }
.zoekresultaat__kolom--links { display: grid; gap: 18px; align-content: start; }
.zoekresultaat__kolom--links:empty { display: none; }
.zoekresultaat__groep { display: grid; gap: 18px; align-content: start; }
.zoekresultaat__groep[hidden] { display: none; }
.zoekresultaat__kop { font: 700 13px/1.2 var(--font-tekst); letter-spacing: .08em; text-transform: uppercase; color: var(--kleur-lavendel-donker); }
.zoekresultaat__termen { display: grid; gap: 18px; }
.zoek-term { display: inline-flex; align-items: center; gap: 8px; min-height: 25px; font-size: 16px; line-height: 1.55; text-decoration: none; border-radius: 8px; }
.zoek-term .icoon { width: 16px; height: 16px; flex: none; }
.zoek-term .icoon--klok { color: var(--kleur-grijs); }
.zoek-term strong { font-weight: 700; }
.zoek-term:hover span, .zoek-term[aria-selected="true"] span { text-decoration: underline; }
.zoekresultaat__cats { display: grid; gap: 18px; justify-items: start; }
.zoekresultaat__groep--cats { gap: 18px; }
.zoek-cat { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 12px; border-radius: var(--radius-rond); background: var(--kleur-lavendel-licht); font: 600 15px/1 var(--font-tekst); text-decoration: none; }
.zoek-cat__aantal { font: 400 14px/1.45 var(--font-tekst); color: var(--kleur-grijs); }
.zoek-cat:hover, .zoek-cat[aria-selected="true"] { background: var(--kleur-lavendel); }
.zoekresultaat__producten { display: grid; gap: 8px; }
.zoekresultaat__kolom:not(.zoekresultaat__kolom--links) { gap: 8px; }
.zoek-product { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 16px; text-decoration: none; transition: background-color var(--snel) var(--ease); }
.zoek-product:hover, .zoek-product[aria-selected="true"] { background: var(--kleur-creme); }
.zoek-product__foto { position: relative; width: 56px; height: 56px; flex: none; border-radius: 12px; background: var(--kaart-kleur, var(--kleur-lavendel-licht)); overflow: hidden; }
.zoek-product__foto img { position: absolute; left: 7px; top: 7px; width: 43px; height: 43px; object-fit: contain; }
.zoek-product__tekst { flex: 1; display: grid; gap: 2px; min-width: 0; }
.zoek-product__naam { font: 600 15px/1.2 var(--font-tekst); }
.zoek-product__naam strong { font-weight: 700; }
.zoek-product .voorraad { font-size: 14px; line-height: 1.45; }
.zoek-product__prijs { font: 600 16px/1.2 var(--font-display); white-space: nowrap; }
.zoekresultaat__voet { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 16px 24px; background: var(--kleur-lavendel-licht); font: 600 15px/1 var(--font-tekst); text-decoration: none; }
.zoekresultaat__voet .icoon { width: 18px; height: 18px; transition: transform var(--snel) var(--ease); }
.zoekresultaat__voet:hover .icoon, .zoekresultaat__voet[aria-selected="true"] .icoon { transform: translateX(3px); }
.zoekresultaat__voet[aria-selected="true"] { background: var(--kleur-lavendel); }
.zoekresultaat [aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--kleur-lavendel-donker); }
.zoekresultaat__voet[aria-selected="true"] { box-shadow: none; }

/* Geen suggesties */
.zoekresultaat__geen { display: grid; justify-items: center; gap: 10px; padding: 40px 40px 40px; text-align: center; }
.zoekresultaat__icoon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; background: var(--kleur-lavendel-licht); }
.zoekresultaat__icoon .icoon { width: 24px; height: 24px; }
.zoekresultaat__geen-titel { font: 600 19px/1.25 var(--font-tekst); }
.zoekresultaat__geen-tekst { max-width: 400px; font-size: 14px; line-height: 1.45; color: var(--kleur-grijs); }
.zoekresultaat__geen [role="group"] { display: grid; justify-items: center; gap: 12px; margin-top: 8px; }
.zoekresultaat__probeer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.zoek-term--chip { min-height: 31px; padding: 6px 12px; border-radius: var(--radius-rond); background: var(--kleur-lavendel-licht); font: 600 15px/1 var(--font-tekst); }
.zoek-term--chip .alleen-mobiel-icoon { display: none; }
.zoek-term--chip:hover span { text-decoration: none; }

/* Laden */
.zoekresultaat.is-laden { opacity: .6; }

/* ==========================================================================
   Zoekscherm (overlay #zoeken)
   ========================================================================== */
.zoekscherm .overlay__paneel { background: var(--kleur-creme); }
.zoekscherm__balk { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--kleur-lijn); flex: none; }
.zoekscherm__veld { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; height: 52px; padding: 0 12px 0 16px; border: 1.5px solid var(--kleur-inkt); border-radius: var(--radius-rond); background: var(--kleur-wit); }
.zoekscherm__veld > .icoon { width: 20px; height: 20px; }
.zoekscherm__veld input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 17px; outline: none; }
.zoekscherm__veld input::placeholder { color: var(--kleur-grijs); opacity: 1; }
.zoekscherm__veld input::-webkit-search-cancel-button { -webkit-appearance: none; }
.zoekscherm__annuleer { min-height: 44px; font: 600 15px/1 var(--font-tekst); }
.zoekscherm__resultaten { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px 32px; }

.zoekscherm .zoekresultaat__inhoud { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 0; }
.zoekscherm .zoekresultaat__kolom--links { display: contents; }
.zoekscherm .zoekresultaat__groep { gap: 14px; }
.zoekscherm .zoekresultaat__termen { display: flex; flex-wrap: wrap; gap: 8px; }
.zoekscherm .zoekresultaat__termen > li { display: block; }
.zoekscherm .zoekresultaat__termen > li.alleen-groot-blok { display: none; }
.zoekscherm .zoek-term { min-height: 38px; padding: 8px 14px 8px 12px; border: 1px solid var(--kleur-lijn); border-radius: var(--radius-rond); background: var(--kleur-wit); font-size: 15px; line-height: 1.3; }
.zoekscherm .zoek-term .icoon { width: 14px; height: 14px; }
.zoekscherm .zoek-term:hover span { text-decoration: none; }
.zoekscherm .zoekresultaat__groep--cats { order: 3; }
.zoekscherm .zoekresultaat__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.zoekscherm .zoekresultaat__producten { gap: 10px; }
.zoekscherm .zoek-product { padding: 8px 12px 8px 8px; background: var(--kleur-wit); }
.zoekscherm .zoek-product__naam { font-size: 15px; }
.zoekscherm .zoek-product__prijs { font-size: 17px; }
.zoekscherm .zoekresultaat__voet { justify-content: center; position: relative; margin-top: 24px; min-height: 48px; padding: 15px 52px; border-radius: var(--radius-rond); background: var(--kleur-inkt); color: var(--kleur-wit); --icoon-accent: var(--kleur-limoen); }
.zoekscherm .zoekresultaat__voet .icoon { position: absolute; right: 24px; top: 50%; margin-top: -9px; }
.zoekscherm .zoekresultaat__geen { padding: 26px 0 0; gap: 12px; }
.zoekscherm .zoekresultaat__icoon { width: 64px; height: 64px; margin-bottom: 10px; }
.zoekscherm .zoekresultaat__geen-titel { font: 600 21px/1.22 var(--font-display); }
.zoekscherm .zoekresultaat__geen-tekst { font-size: 16px; line-height: 1.55; }
.zoekscherm .zoek-term--chip { min-height: 38px; padding: 8px 14px 8px 12px; border: 1px solid var(--kleur-lijn); background: var(--kleur-wit); font: 400 15px/1.3 var(--font-tekst); }
.zoekscherm .zoek-term--chip .alleen-mobiel-icoon { display: block; }
.zoekscherm [aria-selected="true"] { box-shadow: 0 0 0 2px var(--kleur-lavendel-donker); }
@media (min-width: 768px) {
	.zoekscherm__balk, .zoekscherm__resultaten { padding-inline: max(40px, calc((100% - 720px) / 2)); }
}
.zoekveld input:focus-visible, .zoekscherm__veld input:focus-visible, .zoekgroot__veld:focus-visible { box-shadow: none; }