/**
 * Kim Bos Fotografie — Header MiniCart
 *
 * Implementatie van het "Navigation — MiniCart"-component uit het Kim Bos
 * Fotografie Design System (components/navigation/MiniCart.jsx): een
 * winkelwagen-icoonknop met aantalbadge in de header die een dropdownpaneel
 * opent met de winkelwagenregels, een subtotaal en twee acties
 * ("Doorgaan naar afrekenen" + "Winkelwagen bewerken").
 *
 * Het component wordt als laatste <li> in het header-navmenu geïnjecteerd
 * (zie functions.php). Omdat het binnen `.nav-menu .menu` valt, overschrijven
 * de thema-regels `.nav-menu a { width:100%; display:block }` e.d. de ankers;
 * de `.kb-minicart a.kb-minicart__…`-regels onderaan winnen dat met !important.
 *
 * De winkelwagen-AJAX blijft intact: de inhoud van `.kb-minicart__inner` is een
 * WooCommerce-cartfragment dat bij toevoegen/verwijderen automatisch ververst,
 * en de verwijderknop gebruikt de standaard `remove_from_cart_button`-afhandeling.
 */

.kb-minicart-item {
	/* Designtokens (lokaal — de site heeft de design-system-variabelen niet). */
	--kb-surface: #fff;
	--kb-border-default: rgba(22, 19, 18, 0.14);
	--kb-border-subtle: rgba(118, 56, 57, 0.12);
	--kb-maroon-700: #763839;
	--kb-maroon-800: #5e2d2e;
	--kb-maroon-100: #ecd8d8;
	--kb-peach-50: #faf2e9;
	--kb-peach-200: #eac7a7;
	--kb-ink-700: #3a342f;
	--kb-ink-500: #6b635c;
	--kb-ink-300: #a59c93;
	--kb-text-head: #763839;
	--kb-text-body: #3a342f;
	--kb-text-muted: #6b635c;

	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kb-minicart-item::before,
.kb-minicart-item::after {
	content: none !important;
}

.kb-minicart,
.kb-minicart * {
	box-sizing: border-box;
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.kb-minicart {
	position: relative;
	flex-shrink: 0;
	line-height: 1.3;
	/* Negatieve verticale marge: trekt de margebox van de 52px-knop gelijk met
	   die van de tekst-menu-items (margin-top 16 + regel 20 = 36), zodat de
	   icoonknop de header niet hoger maakt (blijft ~80px, conform het ontwerp). */
	margin: -8px 0;
}

/* Niet uitrekken in de flex-balk van het menu; de knop wordt verticaal
   gecentreerd t.o.v. de navigatietekst. */
.kb-minicart-item {
	align-self: center;
}

.kb-minicart__inner {
	display: contents;
}

/* ---- Trigger (icoonknop 52×52 + badge) ----
   !important omdat het thema `.nav-menu button { background:none; border-width:medium }`
   en `.nav-menu:not(.mobile) button { padding:0 4px; border-radius:4px }` toepast
   en die qua specificiteit van de enkelvoudige `.kb-minicart__trigger`-regel winnen. */
.kb-minicart__trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	padding: 0 !important;
	margin: 0;
	border: 1px solid var(--kb-border-default) !important;
	border-radius: 4px !important;
	background: var(--kb-surface) !important;
	color: var(--kb-ink-700) !important;
	cursor: pointer;
	box-shadow: none;
	transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.kb-minicart__trigger:hover {
	background: var(--kb-maroon-100) !important;
	color: var(--kb-maroon-700) !important;
}

.kb-minicart.is-open .kb-minicart__trigger {
	background: var(--kb-maroon-100) !important;
	color: var(--kb-maroon-700) !important;
	border-color: var(--kb-maroon-700) !important;
}

.kb-minicart__icon {
	width: 22px;
	height: 22px;
	display: block;
}

.kb-minicart__badge {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--kb-maroon-700);
	color: var(--kb-peach-50);
	border-radius: 999px;
	border: 2px solid var(--kb-surface);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}

/* ---- Dropdownpaneel ---- */
.kb-minicart__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 50;
	width: 352px;
	max-width: calc(100vw - 32px);
	background: var(--kb-surface);
	border-radius: 16px;
	box-shadow: 0 18px 48px rgba(79, 37, 38, 0.14);
	border: 1px solid var(--kb-border-subtle);
	overflow: hidden;
}

.kb-minicart:not(.is-open) .kb-minicart__panel {
	display: none;
}

.kb-minicart.is-open .kb-minicart__panel {
	animation: kb-mc-pop 160ms ease;
}

@keyframes kb-mc-pop {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.kb-minicart__caret {
	position: absolute;
	top: -7px;
	right: 18px;
	width: 13px;
	height: 13px;
	background: var(--kb-surface);
	border-left: 1px solid var(--kb-border-subtle);
	border-top: 1px solid var(--kb-border-subtle);
	transform: rotate(45deg);
}

.kb-minicart__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--kb-border-subtle);
}

.kb-minicart__title {
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--kb-text-head);
}

.kb-minicart__count {
	font-size: 0.875rem;
	color: var(--kb-text-muted);
}

/* ---- Regels ---- */
.kb-minicart__items {
	max-height: 288px;
	overflow-y: auto;
}

.kb-minicart__item {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px 24px;
	border-bottom: 1px solid var(--kb-border-subtle);
}

.kb-minicart__thumb {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
	background: var(--kb-peach-200);
}

.kb-minicart__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kb-minicart__meta {
	flex: 1;
	min-width: 0;
}

.kb-minicart__name {
	font-size: 0.875rem;
	color: var(--kb-text-head);
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kb-minicart__qty {
	font-size: 0.75rem;
	color: var(--kb-text-muted);
	margin-top: 2px;
}

.kb-minicart__line {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--kb-text-head);
	white-space: nowrap;
}

/* WooCommerce wikkelt prijzen in <span class="woocommerce-Price-amount">;
   die moeten de kleur/grootte van hun container erven. */
.kb-minicart .woocommerce-Price-amount,
.kb-minicart .woocommerce-Price-amount bdi {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	background: none;
}

/* ---- Subtotaal + acties ---- */
.kb-minicart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 16px 24px;
}

.kb-minicart__subtotal-label {
	font-size: 1rem;
	color: var(--kb-text-body);
}

.kb-minicart__subtotal-amount {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--kb-text-head);
}

.kb-minicart__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 24px 24px;
}

.kb-minicart__empty {
	padding: 48px 24px;
	text-align: center;
	color: var(--kb-text-muted);
	font-size: 0.875rem;
}

/* ---- Ankers verstevigen tegen de thema-menuregels (.nav-menu a …) ---- */
.kb-minicart a.kb-minicart__remove {
	flex-shrink: 0;
	width: 24px !important;
	height: 24px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 4px;
	background: transparent !important;
	color: var(--kb-ink-300) !important;
	line-height: 0 !important;
	text-decoration: none !important;
	font-size: 0;
}

.kb-minicart a.kb-minicart__remove:hover {
	color: var(--kb-maroon-700) !important;
}

.kb-minicart a.kb-minicart__btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100% !important;
	height: auto !important;
	padding: 12px 24px !important;
	margin: 0 !important;
	border-radius: 999px;
	font-family: inherit;
	font-weight: 500;
	font-size: 1rem !important;
	line-height: 1 !important;
	letter-spacing: 0.04em !important;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.kb-minicart a.kb-minicart__btn--primary {
	background: var(--kb-maroon-700) !important;
	color: var(--kb-peach-50) !important;
	border: 1px solid var(--kb-maroon-700) !important;
}

.kb-minicart a.kb-minicart__btn--primary:hover {
	background: var(--kb-maroon-800) !important;
	border-color: var(--kb-maroon-800) !important;
}

.kb-minicart a.kb-minicart__btn--secondary {
	background: transparent !important;
	color: var(--kb-maroon-700) !important;
	border: 1px solid var(--kb-maroon-700) !important;
}

.kb-minicart a.kb-minicart__btn--secondary:hover {
	background: var(--kb-maroon-100) !important;
}

/* ---- Mobiel: minicart altijd zichtbaar in de header --------------------
   Op mobiel klapt het hele header-navmenu in de hamburger-dropdown
   (`.menu-hoofdmenu-container`, height:0 + overflow:hidden + visibility:hidden
   als gesloten), waardoor het minicart-<li> — het laatste menu-item — mee
   verdween. We halen het uit die dropdown en pinnen het absoluut in de 52px
   nav-balk, links naast de hamburger, zodat het altijd zichtbaar blijft.

   De dropdown-container zet `visibility:hidden` als hij gesloten is; die erft
   door naar het absoluut gepositioneerde item (visibility erft via de DOM, niet
   via de containing-block-keten), dus zetten we het item expliciet terug op
   `visible`. Het item ontsnapt wél aan de `overflow:hidden`-clipping omdat de
   containing block (`.nav-menu.mobile`) een voorouder van die container is. */
.nav-menu.mobile {
	position: relative;
}

.nav-menu.mobile .kb-minicart-item {
	position: absolute;
	top: 0;
	right: 80px; /* laat ~10px ruimte tot de 70px brede hamburger */
	height: 52px;
	margin: 0;
	padding: 0;
	z-index: 60;
	align-items: center;
	visibility: visible;
}

.nav-menu.mobile .kb-minicart {
	margin: 0;
}

/* Het paneel hangt normaal met `right:0` aan de (nu naar rechts geschoven)
   trigger; dat zou het links buiten beeld duwen. We verankeren het aan het
   viewport met 16px marge aan beide kanten: de trigger staat 80px van de
   rechterrand, dus -64px verlegt de rechterrand van het paneel naar 16px. */
.nav-menu.mobile .kb-minicart__panel {
	left: auto;
	right: -64px;
	width: calc(100vw - 32px);
	max-width: calc(100vw - 32px);
}

.nav-menu.mobile .kb-minicart__caret {
	right: 92px; /* wijst naar het midden van de trigger */
}

/* Zoek-icoon overlap op mobiel. De parent-thema zoekknop (`.toggle-search` in
   `.search-trap-focus`) leeft in een APARTE DOM-tak (`.sidebar.s2.group`), niet
   in het navmenu, en staat `position:absolute; top:-50px` verankerd aan die
   sidebar. De hamburger-dropdown (`.menu-hoofdmenu-container`) opent IN DE FLOW:
   bij openen groeit hij en duwt alles eronder omlaag — inclusief die sidebar,
   die de absolute zoekknop meesleept, pal over het laatste menu-item.

   We kunnen de container NIET uit de flow halen: de minicart-<li> hangt z'n
   absolute verankering juist op aan `.nav-menu.mobile` en zou dan de (nu
   positioned) container als containing block krijgen en uit de nav-balk zakken.
   Het thema zet ook geen open-state class op `body`, dus cross-branch selecteren
   kan alleen met `:has()`: zet de zoekknop opzij ZOLANG het mobiele menu open
   is. Zoeken blijft volledig werken (menu dicht → icoon staat links in de balk
   en opent een zoekveld); alleen tijdens een open menu — waar je toch navigeert,
   niet zoekt — stapt het icoon opzij i.p.v. over de menu-items te vallen.
   `:has()` wordt door alle moderne mobiele browsers ondersteund. */
@media (max-width: 719px) {
	body:has(.nav-menu.mobile.toggled) .search-trap-focus {
		visibility: hidden;
	}
}

#menu-terms-and-policy {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}