/*
Theme Name: Inner Circle Grading
Theme URI: https://innercirclegrading.com
Author: Zanibytes
Author URI: https://zanibytes.be
Description: Custom WooCommerce block theme (FSE) for Inner Circle Grading — TCG card cleaning, straightening and grading. Dark, editorial design with serif display type. Dutch-first.
Version: 1.2.11
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inner-circle
Tags: full-site-editing, block-patterns, e-commerce, custom-colors, custom-logo, dark-mode, woocommerce
*/

/* Block theme — visual styling lives in theme.json. This file only carries
   small overrides that the editor cannot express. */

/* Smooth-scroll for in-page anchor nav (process, packages, etc.) */
html { scroll-behavior: smooth; }

/* Marquee-free partner strip: subtle hover lift */
.icg-partner-logo img { transition: transform .25s ease, opacity .25s ease; opacity: .85; }
.icg-partner-logo:hover img { transform: translateY(-4px); opacity: 1; }

/* Before/after frame */
.icg-ba-frame { position: relative; overflow: hidden; border-radius: 14px; }
.icg-ba-frame .wp-block-image { margin: 0; }

/* Nav CTA ("Begin met Graden") — filled orange pill, near-black text (8.4:1, AA+).
   Matches the link's own class: theme.json's global link colour is emitted after
   this stylesheet, so an `.icg-nav-cta a` selector alone loses the tie. */
.wp-block-navigation .icg-nav-cta a.wp-block-navigation-item__content,
.icg-header .icg-nav-cta a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--accent);
	font-weight: 800;
	padding: 0.55em 1.1em;
	border-radius: 999px;
	line-height: 1;
	white-space: nowrap;
	transition: background-color .2s ease;
}
.wp-block-navigation .icg-nav-cta a.wp-block-navigation-item__content:hover,
.icg-header .icg-nav-cta a.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--base);
	background-color: #f7ad66;
}

/* The pill is wider than the plain link it replaced, so the nav wrapped to two
   rows on mid-size screens. Tighten spacing there instead of shrinking the pill. */
@media (min-width: 782px) and (max-width: 1240px) {
	.icg-header .wp-block-navigation { font-size: 0.76rem !important; letter-spacing: 0.03em !important; }
	.icg-header .wp-block-navigation .wp-block-navigation__container { gap: 1rem; }
	.icg-header .icg-nav-cta a.wp-block-navigation-item__content { padding: 0.5em 0.85em; }
	.icg-header > .wp-block-group > .wp-block-group { gap: 1rem; }
}

/* Header actions: account link + mini-cart */
.icg-header-actions { align-items: center; }
.icg-header-actions .icg-account-link a {
	color: var(--wp--preset--color--contrast);
	text-transform: uppercase;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.icg-header-actions .icg-account-link a:hover { color: var(--wp--preset--color--accent); }
.icg-header-actions .wc-block-mini-cart__button { color: var(--wp--preset--color--contrast); padding: 0; }
.icg-header-actions .wc-block-mini-cart__amount { display: none; }

/* Language switcher (NL / EN) */
.icg-lang-switcher { display: inline-flex; gap: 0.35rem; align-items: center; }
.icg-lang-switcher .icg-lang {
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	font-weight: 700;
	text-decoration: none;
	padding: 0.15rem 0.35rem;
	border-radius: 4px;
	line-height: 1;
}
.icg-lang-switcher .icg-lang:hover { color: var(--wp--preset--color--contrast); }
.icg-lang-switcher .icg-lang.is-current { color: var(--wp--preset--color--accent); }

/* Drop-off points slider (variable count, from the dropoff_shop CPT) */
.icg-dropoff-slider {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.75rem;
	-webkit-overflow-scrolling: touch;
}
.icg-dropoff-slider .icg-dropoff-card {
	flex: 0 0 300px;
	scroll-snap-align: start;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--base-2);
	padding: var(--wp--preset--spacing--30);
}
.icg-dropoff-slider .icg-dropoff-region {
	color: var(--wp--preset--color--accent);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}
.icg-dropoff-slider .icg-dropoff-name {
	color: var(--wp--preset--color--contrast);
	font-size: 1.3rem;
	line-height: 1.2;
	margin: 0 0 0.5rem;
}
.icg-dropoff-slider .icg-dropoff-addr { color: var(--wp--preset--color--muted); margin: 0; }
/* Single row still fits; only scrolls when it overflows. */
@media (min-width: 900px) { .icg-dropoff-slider .icg-dropoff-card { flex-basis: 320px; } }

/* On small screens the nav collapses to a burger; keep cart + account inline */
@media (max-width: 781px) {
	.icg-header-actions .icg-account-link { display: none; }
}

/* ---- WooCommerce: dark theme harmonisation ---- */
.woocommerce, .woocommerce-page, .wc-block-components-form,
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout {
	color: var(--wp--preset--color--contrast);
}
/* Prices in accent for emphasis */
.woocommerce .price, .wc-block-components-product-price,
.woocommerce-Price-amount { color: var(--wp--preset--color--contrast); }
.woocommerce ins, .woocommerce .price ins { text-decoration: none; }
.woocommerce del, .wc-block-components-product-price__regular { color: var(--wp--preset--color--muted); }
/* "Bekijk winkelwagen" in the added-to-cart banner: the block ships a near-black
   link colour meant for a light theme, so on our dark banner it read as an empty
   gap where a link should be. */
.wc-block-components-notice-banner a,
.woocommerce-message a:not(.button) {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* ---- Checkout: fields the payment plugins paint for a light theme ---- */
/* Mollie's card component labels ship at #222, which on the dark payment box is
   the same colour as the box: "Naam op de kaart", "Kaartnummer", "Vervaldatum"
   and "CVC/CVV" were invisible above their inputs. The inputs themselves are
   Mollie iframes and stay light — their own text is dark, so they read fine. */
.mollie-component-label { color: var(--wp--preset--color--contrast) !important; }
/* WooCommerce marks required fields with a dark red asterisk, near-black here. */
/* woocommerce.css loads after this file and sets the same selector, so this
   needs the flag to stick. */
.woocommerce abbr.required,
.woocommerce .required,
.wc-block-components-label .required {
	color: var(--wp--preset--color--accent) !important;
	border: 0;
	text-decoration: none;
}

/* ---- Shop pages that only got dressed once the store went public ---- */
/* Product tabs ship WooCommerce's light-theme chrome: a white active tab and
   grey type, which on this theme read as a torn-out patch of another site. */
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--wp--preset--color--border); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--wp--preset--color--base-2);
	border-color: var(--wp--preset--color--border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--wp--preset--color--muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--wp--preset--color--base);
	border-bottom-color: var(--wp--preset--color--base);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--contrast); }
/* The rounded tab corners are drawn with white box-shadows, which left two
   bright hooks either side of the active tab. */
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	border-color: var(--wp--preset--color--border) !important;
	/* woocommerce.css loads after this file and paints the same selector, so the
	   corner shadow only goes away with the flag. */
	box-shadow: none !important;
}

/* Shop grid: the product template stretches every card to the row's height, but
   the rows inside it are free to slide, so a two-line title pushed that card's
   price and button below its neighbours'. Let the button take the slack. */
.wc-block-product { display: flex; flex-direction: column; }
.wc-block-product > .wc-block-components-product-button { margin-top: auto; }

/* The stand-alone products have no photography yet, and Woo's placeholder is a
   white tile — four of them lit up the shop grid. Invert it into the dark. */
img[src*="woocommerce-placeholder"] { filter: invert(1) brightness(.3); border-radius: 12px; }

/* "Misschien ook interessant" renders its heading even when the related-products
   block comes back empty, leaving a title with nothing under it. */
.wp-block-group:has(> .wp-block-woocommerce-related-products:empty) { display: none; }

/* Inputs / selects / textareas — dark fields.
   woocommerce.css loads after this stylesheet and its own
   `.woocommerce form .form-row .input-text` rule outspecifies ours, so the
   fields came out white. It paints from these custom properties, though —
   setting them wins without a specificity arms race. */
:root {
	--wc-form-color-background: var(--wp--preset--color--surface);
	--wc-form-color-text: var(--wp--preset--color--contrast);
	--wc-form-border-color: var(--wp--preset--color--border);
	--wc-form-border-radius: 10px;
}
.woocommerce form .input-text,
.woocommerce input[type="text"], .woocommerce input[type="email"],
.woocommerce input[type="tel"], .woocommerce input[type="password"],
.woocommerce input[type="number"], .woocommerce textarea, .woocommerce select,
.wc-block-components-text-input input, .wc-block-components-textarea,
.icg-form input, .icg-form textarea, .wpcf7 input, .wpcf7 textarea, .wpcf7 select {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	border-radius: 10px;
	padding: 0.85rem 1rem;
	width: 100%;
}
.icg-form input:focus, .icg-form textarea:focus,
.wpcf7 input:focus, .wpcf7 textarea:focus,
.woocommerce .input-text:focus, .wc-block-components-text-input input:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(238,148,65,0.18);
}
.wc-block-components-text-input label, .woocommerce label { color: var(--wp--preset--color--muted); }

/* Cards / tables / notices */
.woocommerce table.shop_table, .woocommerce .cart-collaterals .cart_totals,
.wc-block-components-sidebar, .woocommerce-info, .woocommerce-message,
.wc-block-cart__sidebar, .wc-block-components-totals-wrapper {
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	color: var(--wp--preset--color--contrast);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--wp--preset--color--border); }
.woocommerce-info, .woocommerce-message { border-left: 3px solid var(--wp--preset--color--accent); }

/* WooCommerce block notices (coupon bar, "added to cart") ship a white/pastel
   banner from wc-blocks.css. Chained class beats their single-class rule. */
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning {
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--border);
	border-radius: 12px;
}
.wc-block-components-notice-banner.is-info a,
.wc-block-components-notice-banner.is-success a { color: var(--wp--preset--color--accent); }

/* Payment-gateway description box — WooCommerce paints it lavender via an
   id-carrying selector, so match that weight. */
.woocommerce-checkout #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
#add_payment_method #payment div.payment_box {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
}
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
#add_payment_method #payment div.payment_box::before {
	border-bottom-color: var(--wp--preset--color--surface);
}

/* Buttons inherit theme.json button styling; ensure WC default buttons match */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button.alt,
.wc-block-components-button, .wpcf7-submit {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--base) !important;
	border-radius: 999px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.85rem 2rem !important;
	border: none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.wc-block-components-button:hover, .wpcf7-submit:hover {
	background: var(--wp--preset--color--contrast) !important;
}

/* Star ratings + sale flash */
.woocommerce span.onsale { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); border-radius: 999px; }
.woocommerce .star-rating span { color: var(--wp--preset--color--accent); }

/* Product grid cards */
.woocommerce ul.products li.product, .wc-block-grid__product, .wc-block-product {
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 1rem;
}

/* ---- Contact form layout ---- */
.icg-form .icg-field { margin-bottom: 1rem; }
.icg-form label { display:block; margin-bottom:.4rem; color: var(--wp--preset--color--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; }
.wpcf7 .wpcf7-spinner { display:none; }

/* ---- Drop-off point map embed ---- */
.icg-map iframe { width:100%; min-height:420px; border:0; border-radius:16px; filter: grayscale(0.2) contrast(1.05); }

/* ---- Grading video ---- */
.icg-video video { width:100%; display:block; border-radius:18px; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.7); background:#000; }

/* ---- Process photo cards (square, consistent) ---- */
.icg-proc-img img { aspect-ratio: 1 / 1; object-fit: cover; width:100%; display:block; }

/* ---- Package cards ---- */
.icg-pkg-card { transition: transform .25s ease, border-color .25s ease; height:100%; }
.icg-pkg-card:hover { transform: translateY(-6px); }
.icg-pkg-card .wp-block-image img { width:100%; aspect-ratio:1/1; object-fit:cover; }
/* Featured ("Meest gekozen") accent is set per render from the product edit page,
   so it must beat the inline border/shadow baked into the seeded card blocks. */
.icg-pkg-card { position: relative; border-color: var(--wp--preset--color--border) !important; box-shadow: none !important; }
.icg-pkg-card.is-featured { border-color: var(--wp--preset--color--accent) !important; box-shadow: var(--wp--preset--shadow--accent) !important; }

/* ---- Footer polish ---- */
.icg-footer a:not(.wp-block-button__link) { color: var(--wp--preset--color--muted); text-decoration:none; }
.icg-footer a:not(.wp-block-button__link):hover { color: var(--wp--preset--color--accent); }
/* CTA button keeps its black-on-orange label (was inheriting the grey link colour) */
.icg-footer .wp-block-button__link { color: #0a0a0a !important; }
.icg-footer .is-style-none { list-style:none; padding-left:0; }
.icg-footer-cta { border-bottom:1px solid var(--wp--preset--color--border); }

/* ---- Homepage: no black gaps around the full-bleed sections ---- */
/* main has a top margin + block-gap margins between alignfull sections —
   on the black page bg those show as ugly black bands above/below the hero. */
.home main { margin-top: 0 !important; }
.home main > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* ---- Homepage: hero image to the very top, header overlaid transparent ---- */
.home .icg-header {
	position: absolute !important;
	top: 0; left: 0; right: 0;
	background: transparent !important;
	border-bottom-color: transparent !important;
	z-index: 30;
}
/* subtle top gradient so white nav stays legible over bright parts of the image */
.home .icg-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 100%);
}

/* Hero fills the viewport exactly: at 90vh the next (dark) section showed as a
   black bar along the bottom edge. svh keeps it honest on mobile, where the
   browser chrome makes 100vh taller than what is actually visible.
   Applies to the seeded homepage content too, which carries the old inline
   min-height from before the pattern was changed. */
.home main .wp-block-cover:first-of-type {
	min-height: 100vh !important;
	min-height: 100svh !important;
}

/* ---- Outline buttons readable over imagery (hero "Inleverpunten", CTA) ---- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: rgba(10,10,10,0.45) !important;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	border-color: rgba(255,255,255,0.55) !important;
	color: #ffffff !important;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: #ffffff !important;
	color: #0a0a0a !important;
	border-color: #ffffff !important;
}

/* ---- Trim tall whitespace above page titles (first section of inner pages) ---- */
.wp-block-post-content > .wp-block-group:first-child,
.wp-block-post-content > .wp-block-cover:first-child,
.wp-block-post-content > .wp-block-group:first-child > .wp-block-group:first-child {
	padding-top: var(--wp--preset--spacing--30) !important;
}
/* Pages that render the post title (page.html template) — tighten its top gap */
.wp-block-post-content:first-child,
main > .wp-block-post-title:first-child { margin-top: var(--wp--preset--spacing--20) !important; }

/* ---- Collapse the header nav to a hamburger on medium screens (was wrapping to 2 lines) ---- */
@media (max-width: 1000px) {
	/* show the hamburger toggle */
	.icg-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	/* hide the inline menu until opened (overlay still works via the toggle) */
	.icg-header .wp-block-navigation:not(.is-menu-open) .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	/* keep account link visible alongside the burger on tablet */
	.icg-header-actions .icg-account-link { display: inline-flex; }
}

/* ---- Mobile/tablet overlay menu styling (was right-stuck + unstyled) ---- */
.icg-header .wp-block-navigation__responsive-container.is-menu-open {
	background: rgba(10,10,10,0.98) !important;
	padding: 4.5rem 1.5rem 2rem;
}
.icg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
}
.icg-header .is-menu-open .wp-block-navigation__container {
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 1.5rem !important;
	width: 100%;
}
.icg-header .is-menu-open .wp-block-navigation-item { width: auto; text-align: center; }
.icg-header .is-menu-open .wp-block-navigation-item__content {
	font-size: 1.5rem !important;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff !important;
}
.icg-header .is-menu-open .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent) !important; }
/* Overlay menu forces white link text above — keep the CTA pill readable on orange.
   It also forces 1.5rem on every item, which blew the pill's em-based padding up
   into a full-width slab. Size the CTA on its own and separate it from the list. */
.icg-header .is-menu-open .icg-nav-cta { margin-top: 1rem; }
.icg-header .is-menu-open .icg-nav-cta .wp-block-navigation-item__content,
.icg-header .is-menu-open .icg-nav-cta .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--base) !important;
	font-size: 1rem !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.85em 2.2em;
	line-height: 1;
}
.icg-header .wp-block-navigation__responsive-container-close { color: #fff; }

/* ---- Footer: compact (client asked for less vertical space) ---- */
.icg-footer { padding-bottom: var(--wp--preset--spacing--30) !important; }
.icg-footer-cta { padding-top: var(--wp--preset--spacing--30) !important; padding-bottom: var(--wp--preset--spacing--30) !important; }
.icg-footer .wp-block-columns { margin-top: var(--wp--preset--spacing--30) !important; }
.icg-footer .wp-block-list { line-height: 1.75 !important; }
.icg-footer h4 { margin-bottom: 0.5rem; }
.icg-footer .wp-block-social-links { margin-top: 0.75rem !important; }
.icg-footer > .wp-block-group:last-child { margin-top: var(--wp--preset--spacing--30) !important; padding-top: var(--wp--preset--spacing--20) !important; }

/* ---- Mobile footer: compact (was very long with everything stacked) ---- */
@media (max-width: 600px) {
	.icg-footer .wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem 1rem;
	}
	/* logo/tagline column spans full width above the link columns */
	.icg-footer .wp-block-columns > .wp-block-column:first-child { grid-column: 1 / -1; }
	/* Contact spans the row too: in a 167px half-column the address broke inside
	   the word — "info@innercirclegrading.c / om". */
	.icg-footer .wp-block-columns > .wp-block-column:last-child { grid-column: 1 / -1; }
	.icg-footer .wp-block-columns > .wp-block-column { flex-basis: auto !important; }
	/* Logo / tagline / socials centre on a narrow screen — left-aligned they read
	   as a stray column above the two link grids. */
	.icg-footer .wp-block-columns > .wp-block-column:first-child { text-align: center; }
	.icg-footer .wp-block-columns > .wp-block-column:first-child .wp-block-site-logo,
	.icg-footer .wp-block-columns > .wp-block-column:first-child .wp-block-social-links { justify-content: center; margin-left: auto; margin-right: auto; }
	.icg-footer .is-style-none { line-height: 1.9 !important; }
	/* CTA band stacks tightly */
	.icg-footer-cta { flex-direction: column; align-items: flex-start; gap: .75rem; padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
	.icg-footer { padding-bottom: 1.5rem; }
	/* bottom bar wraps tidy */
	.icg-footer > .wp-block-group:last-child { gap: .35rem; }
}

/* Header: drop any empty <p> wpautop injects into the shortcode-rendered nav,
   and keep nav / actions / logo on one vertically-centered row. */
.icg-header p:empty { display: none; }
.icg-header .wp-block-navigation { align-self: center; }
.icg-header .icg-header-actions { align-self: center; }

/* Header cart icon + count badge */
.icg-header-actions .icg-cart-link { display:inline-flex; align-items:center; position:relative; color:var(--wp--preset--color--contrast,#fff); text-decoration:none; }
.icg-header-actions .icg-cart-link:hover { color:var(--wp--preset--color--accent,#ee9441); }
.icg-cart-count { position:absolute; top:-6px; right:-9px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--wp--preset--color--accent,#ee9441); color:#0a0a0a; font-size:10px; font-weight:800; line-height:16px; text-align:center; display:none; }
.icg-cart-count.is-filled { display:block; }

/* ---- Packages ---- */

/* Legacy 4-column package block (pattern-detached pages the client edits by
   hand): the columns were only as tall as their own copy, so badges, prices
   and buttons landed at different heights per card. Stretch them and pin the
   button to the bottom — works whatever length the descriptions grow to. */
.wp-block-columns:has(> .icg-pkg-card) { align-items: stretch; }
.icg-pkg-card { display: flex; flex-direction: column; }
.icg-pkg-card > .wp-block-buttons { margin-top: auto; }
.icg-pkg-card > .wp-block-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

/* Per-service packages ([icg_packages]). Names, order and prices come from the
   same model + products the wizard uses. */
.icg-pkg2 { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50, 3rem); }
/* The theme has no global border-box, so every width:100% child inside a padded
   card measured wider than the card it sits in — a few pixels each time, enough
   to shove buttons and badges past the card edge on a phone. Bound it here for
   the whole packages tree; the service logo opts back out on purpose below. */
.icg-pkg2, .icg-pkg2 * { box-sizing: border-box; }
.icg-pkg2-service__head { text-align: center; margin-bottom: var(--wp--preset--spacing--30, 1.5rem); }
/* bgs.svg is white artwork and psa.svg is transparent — on the light Pakketten
   section the BGS mark disappeared entirely. A dark chip makes both marks read
   on any section background. */
.icg-pkg2-service__logo {
	display: block;
	height: 54px;
	width: auto;
	margin: 0 auto .75rem;
	box-sizing: content-box;
	padding: .75rem 1.25rem;
	background: var(--wp--preset--color--base-2);
	border-radius: 14px;
}
.icg-pkg2-service__logo--text { font-size: 2rem; font-weight: 800; letter-spacing: .04em; }
.icg-pkg2-service__sub { margin: 0; color: var(--wp--preset--color--muted); font-size: .95rem; }
.icg-pkg2-service__warn { color: var(--wp--preset--color--accent); }

/* auto-fit keeps BGS (4 tiers) and PSA (5 tiers) on their own tidy rows
   without hard-coding a column count per service. */
.icg-pkg2-grid {
	display: grid;
	/* Centred cards of one fixed size, so BGS and PSA render identically —
	   stretching each row to full width made the two services look like
	   different components.

	   min(248px, 100%) rather than a bare 248px: a fixed track keeps claiming
	   its width on a viewport narrower than that, and the row runs off the side
	   of the screen instead of wrapping. Bounding the minimum by the container
	   lets the track shrink on a phone. Same lesson as the drop-off delivery
	   cards — measure the space you are in, not the window.

	   280px, not 248px: the drawn tier panel sits inside the card's own padding,
	   which left it 166px to draw in — PLATINUM and CLEANING hyphenated across
	   two lines in there. Four 280px cards still fit the content width. */
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 280px));
	justify-content: center;
	gap: var(--wp--preset--spacing--30, 1.5rem);
	align-items: stretch;
}
.icg-pkg2-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	padding: var(--wp--preset--spacing--30, 1.5rem);
	color: var(--wp--preset--color--contrast);
}
/* Square slot for every tier, artwork or placeholder, so the name/price/button
   rows line up across the whole grid. */
.icg-pkg2-card__badge { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
/* Two lines of headroom so a one-word and a two-word tier name still line the
   price row up across the grid. */
.icg-pkg2-card__name { margin: 1rem 0 .35rem; font-size: 1.25rem; line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; }
.icg-pkg2-card__price { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.icg-pkg2-card__price--tbd { font-size: 1.2rem; color: var(--wp--preset--color--muted); }
.icg-pkg2-card__price .woocommerce-Price-amount { color: inherit; }
.icg-pkg2-card__note { margin: .5rem 0 1rem; font-size: .82rem; color: var(--wp--preset--color--muted); min-height: 2.4em; }
.icg-pkg2-card__btn {
	margin-top: auto;
	display: block;
	width: 100%;
	padding: .7rem 1rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
}
.icg-pkg2-card__btn:hover { background: var(--wp--preset--color--accent); color: #0a0a0a; }
@media (max-width: 600px) {
	/* Two-up still suits the small repair cards — a badge, a name and a button.
	   A drawn tier card cannot live in half a phone: its spec rows put a label
	   and a value on one line, and at ~150px they collide or push the card off
	   screen. Those get one comfortable column instead, capped so it does not
	   stretch edge to edge on a tablet-width phone. */
	/* minmax(0, 1fr), not 1fr: a bare 1fr track cannot shrink below the widest
	   word in the card, so a treatment like OPPERVLAKTEHERSTEL pushed both
	   columns off the screen. */
	.icg-pkg2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.icg-pkg2-grid:has(.icg-pkg2-card--drawn) { grid-template-columns: minmax(0, 340px); }
	.icg-pkg2-grid > * { max-width: none; min-width: 0; }
	/* break-word + hyphens, not `anywhere`: a name that does not fit should
	   hyphenate ("Diepterei-niging"), not snap mid-syllable. */
	.icg-pkg2-card__name, .icg-pkg2-card__note { overflow-wrap: break-word; hyphens: auto; }
	.icg-pkg2-card__name { min-height: 0; font-size: 1.05rem; }
	/* Two-up on a 375px screen leaves a card ~160px wide, and the desktop
	   1.5rem of card padding eats 48px of that before any content. Give the
	   width back to the content. */
	.icg-pkg2-card { padding: 1rem .7rem; }
	/* The badge is a square sized off that width, so its text gets ~88px to
	   live in. At 1rem a name like DIEPTEREINIGING & VLEKKEN needs seven lines
	   and grows straight out of the square. Scale the type to the box it is
	   actually in, and let the box grow rather than the text escape. */
	.icg-pkg2-card__badge--placeholder {
		padding: .5rem;
		font-size: .68rem;
		letter-spacing: .03em;
		line-height: 1.2;
		aspect-ratio: auto;
		min-height: 5.5rem;
	}
	.icg-pkg2-card__price { font-size: 1.4rem; }
}
/* Tier without artwork yet — same slot, tier colour, correct wording. Beats
   reusing another tier's badge, which would read wrong.

   The text is an anonymous flex item, so it carries min-width:auto and refuses
   to shrink below its min-content width. That was fine while the only nameless
   tier was "Diamond"; the repair treatments put words like OPPERVLAKTEHERSTEL
   in here, ~216px of min-content inside a 162px badge, and they painted
   straight through the border.

   overflow-wrap:anywhere is the one value that actually lowers min-content
   size (break-word does not), so it is what stops the overflow; hyphens:auto
   makes the browser prefer a real break point over splitting mid-syllable.
   box-sizing is load-bearing next to the padding: the badge is width:100% with
   aspect-ratio 1/1, and content-box would add the padding on top of both. */
.icg-pkg2-card__badge--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	padding: .75rem;
	background: #101010;
	border: 1px solid var(--icg-tier-color, #a8a8a8);
	color: var(--icg-tier-color, #a8a8a8);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.25;
	letter-spacing: .06em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* ── Pakket tier card (drawn, not photographed) ───────────────────────────
   The client's per-tier PNG rebuilt in CSS. Two nested panels: the outer one
   carries the metal's edge and glow, the inner one holds the content. Each
   metal is two stops — a highlight and a shade — and everything on the card
   (edge, pill, pips, wordmark) is mixed from that one pair, so a new tier is
   a modifier class and nothing else. */
.icg-tier {
	--icg-metal-hi: #e9edf2;
	--icg-metal-lo: #9aa4b0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .9rem;
	width: 100%;
	/* The grid stretches the cards to equal height, but this panel sized to its
	   own content, so a tier with fewer spec rows — Cleaning has two where the
	   PSA tiers have three — ended shorter and dragged its price and button up
	   out of line with the row. Growing into the card is what lines them up;
	   the tagline's margin-top:auto then drops to the true bottom. */
	flex: 1;
	padding: 1.1rem .85rem 1rem;
	border: 1px solid color-mix(in srgb, var(--icg-metal-lo) 55%, transparent);
	border-radius: 16px;
	background:
		radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--icg-metal-lo) 9%, transparent), transparent 70%),
		linear-gradient(170deg, #14161b, #0b0c0f);
	box-shadow: 0 0 22px -14px var(--icg-metal-lo);
}
.icg-tier--bronze   { --icg-metal-hi: #f0b878; --icg-metal-lo: #c97b3c; }
.icg-tier--silver   { --icg-metal-hi: #f2f5f9; --icg-metal-lo: #9aa4b0; }
.icg-tier--gold     { --icg-metal-hi: #f9e29a; --icg-metal-lo: #c9982e; }
.icg-tier--platinum { --icg-metal-hi: #e6eefb; --icg-metal-lo: #93a5be; }
.icg-tier--diamond  { --icg-metal-hi: #daf0ff; --icg-metal-lo: #7fb6e6; }

.icg-tier__pill {
	padding: .3rem .8rem;
	border: 1px solid color-mix(in srgb, var(--icg-metal-lo) 65%, transparent);
	border-radius: 999px;
	color: var(--icg-metal-hi);
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
}
.icg-tier__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
	width: 100%;
	/* margin-top:auto on the tagline needs somewhere to push against, so the
	   inner panel takes the leftover height instead of hugging its text —
	   that is what lines the taglines up across a row of unequal cards. */
	flex: 1;
	padding: .95rem .75rem .8rem;
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
}
.icg-tier__pips { display: flex; gap: .3rem; }
/* A rotated square, so the rank marks need no glyph and no image. */
.icg-tier__pip {
	width: .34rem;
	height: .34rem;
	transform: rotate(45deg);
	border: 1px solid color-mix(in srgb, var(--icg-metal-lo) 60%, transparent);
}
.icg-tier__pip.is-on {
	border-color: var(--icg-metal-hi);
	background: var(--icg-metal-hi);
}
.icg-tier__name {
	margin: 0;
	font-size: clamp(1.15rem, 1rem + 1.4vw, 1.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-align: center;
	/* The metal itself: a gradient clipped to the glyphs. background-clip:text
	   needs a transparent fill to show through, and the -webkit- pair is still
	   required — Safari does not honour the unprefixed property. */
	background: linear-gradient(180deg, var(--icg-metal-hi) 12%, var(--icg-metal-lo) 55%, var(--icg-metal-hi) 92%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	/* A tier name is a wordmark: it may wrap between words, never inside one.
	   `anywhere` + hyphens:auto turned CLEANING into "CLEANI-NG" and PLATINUM
	   into "PLATIN-UM" as soon as the panel got tight. The panel is wide enough
	   now; a two-word name still breaks at its space. */
	overflow-wrap: normal;
	hyphens: manual;
}
.icg-tier__kicker {
	font-size: .55rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #8a8a8a);
}
.icg-tier__specs {
	width: 100%;
	margin: .35rem 0 0;
	padding-top: .55rem;
	border-top: 1px solid color-mix(in srgb, var(--icg-metal-lo) 30%, transparent);
}
.icg-tier__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	padding: .4rem 0;
}
.icg-tier__row + .icg-tier__row { border-top: 1px solid rgba(255, 255, 255, .05); }
/* Neither side may force the row wider than the card: the label wraps, the
   value keeps its own words together but can drop under the label if the pair
   genuinely will not fit. */
.icg-tier__label { min-width: 0; }
.icg-tier__value { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 360px) {
	.icg-tier__row { flex-direction: column; align-items: flex-start; gap: .15rem; }
	.icg-tier__value { text-align: left; }
}
.icg-tier__label {
	margin: 0;
	font-size: .55rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #8a8a8a);
}
.icg-tier__value {
	margin: 0;
	font-size: .78rem;
	font-weight: 700;
	text-align: right;
	color: var(--wp--preset--color--contrast, #fff);
}
.icg-tier__tagline {
	margin-top: auto;
	padding-top: .6rem;
	font-size: .55rem;
	letter-spacing: .14em;
	text-align: center;
	color: color-mix(in srgb, var(--wp--preset--color--muted, #8a8a8a) 75%, transparent);
}
/* A drawn card sets its own rhythm — the badge-era name/note spacing above the
   price does not apply, and the card must be free to be taller than a square.
   The price needs air on BOTH sides: margin-top separates it from the card it
   prices, and the button below has margin-top:auto, which only pushes the
   button down and leaves nothing between the two. */
/* The drawn card is a panel inside a panel, so the outer 1.5rem of padding is
   width the tier artwork could use. Narrow it on the sides only. */
.icg-pkg2-card--drawn { padding: 1.5rem 1.25rem 1.25rem; }
/* The drawn card has no note between the price and the button, so 1.1rem put
   the two almost against each other — the repair cards get their air from the
   note plus margin-top:auto. */
.icg-pkg2-card--drawn .icg-pkg2-card__price { margin-top: 1rem; margin-bottom: 1.75rem; }
.icg-pkg2-card--drawn .icg-pkg2-card__price--tbd { margin-bottom: 1.9rem; }
@media (prefers-reduced-motion: no-preference) {
	.icg-tier { transition: border-color .2s, box-shadow .2s; }
	.icg-pkg2-card:hover .icg-tier {
		border-color: color-mix(in srgb, var(--icg-metal-lo) 85%, transparent);
		box-shadow: 0 0 26px -10px var(--icg-metal-lo);
	}
}

/* ── Header: keep one row ─────────────────────────────────────────────────
   The nav is nowrap now, because the Dashboard entry the dropoff plugin
   appends for affiliates was dropping onto a line of its own. Nowrap alone
   would overflow instead of wrapping, so the row is also allowed to tighten:
   an affiliate carries one extra item and .icg-is-affiliate on <body> is
   already there to key off. */
.icg-header .wp-block-navigation__container { flex-wrap: nowrap; }
.icg-header .wp-block-navigation-item__content { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1300px) {
	body.icg-is-affiliate .icg-header .wp-block-navigation {
		font-size: .74rem;
		letter-spacing: .04em;
	}
	body.icg-is-affiliate .icg-header .wp-block-navigation__container { gap: 1rem; }
}
/* Logout is an icon; give it the same hit area a text link had rather than
   shrinking the target to the glyph. */
.icg-logout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	color: var(--wp--preset--color--contrast, #fff);
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.icg-logout:hover { background: rgba(255, 255, 255, .08); color: var(--wp--preset--color--accent, #ee9441); }
.icg-logout:focus-visible { outline: 2px solid var(--wp--preset--color--accent, #ee9441); outline-offset: 2px; }
.icg-logout-icon { display: block; }
/* Account + logout icons sit side by side, never stacked. */
.icg-header-actions .icg-account-link { display: inline-flex; flex-direction: row; align-items: center; gap: .25rem; white-space: nowrap; }

/* ── Checkout: terms acceptance ──────────────────────────────────────────
   The accept checkbox is the last thing between a customer and shipping their
   cards away for an irreversible service, so it gets a box of its own instead
   of the usual grey line of fine print above the button. Markup comes from
   inc/checkout-terms.php + WooCommerce's own terms template. */
.woocommerce-terms-and-conditions-wrapper {
	margin: 1.5rem 0;
	padding: 1.25rem 1.4rem;
	border: 2px solid var(--wp--preset--color--accent, #ee9441);
	border-radius: 12px;
	background: rgba(238, 148, 65, .07);
}
.icg-terms-intro h3 {
	margin: 0 0 .4rem;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.icg-terms-intro p {
	margin: 0 0 1rem;
	font-size: .95rem;
	line-height: 1.55;
}
/* Woo renders the checkbox inside .woocommerce-terms-and-conditions-wrapper. */
.woocommerce-terms-and-conditions-wrapper .form-row,
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
	margin: 0;
	padding: 0;
}
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
	cursor: pointer;
}
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--wp--preset--color--accent, #ee9441);
	cursor: pointer;
}
.woocommerce-terms-and-conditions-wrapper a {
	text-decoration: underline;
	font-weight: 700;
}
.woocommerce-terms-and-conditions-wrapper .required {
	color: var(--wp--preset--color--accent, #ee9441);
	text-decoration: none;
}
/* Woo marks the row .woocommerce-invalid when the box is left unticked. */
.woocommerce-terms-and-conditions-wrapper.has-error,
.woocommerce-terms-and-conditions-wrapper .woocommerce-invalid input[type="checkbox"] {
	outline: 2px solid #ff3c5a;
	outline-offset: 3px;
}

/* ---- Mijn account + winkelwagen: same chrome as the rest of the site ---- */
/* Both pages are plain shortcodes inside the 720px content column, which left
   the account nav and the cart totals cramped while the title sat wide. Let
   the title and the WooCommerce wrapper use the wide column, like the shop. */
body.woocommerce-account main > .wp-block-post-title,
body.woocommerce-cart main > .wp-block-post-title,
body.woocommerce-account main > .entry-content,
body.woocommerce-cart main > .entry-content,
body.woocommerce-account .entry-content > .woocommerce,
body.woocommerce-cart .entry-content > .woocommerce {
	max-width: var(--wp--style--global--wide-size, 1240px);
}
body.woocommerce-account main > .wp-block-post-title,
body.woocommerce-cart main > .wp-block-post-title { margin-bottom: var(--wp--preset--spacing--40); }
/* Account: order tables and card lists want room on a desktop, so the two
   cards run wider than the site's wide column. The cart keeps 1240px. */
body.woocommerce-account main > .wp-block-post-title,
body.woocommerce-account main > .entry-content,
body.woocommerce-account .entry-content > .woocommerce { max-width: 1560px; }

/* Account: nav card on the left, content card on the right. */
body.woocommerce-account.logged-in .entry-content > .woocommerce {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40, 2rem);
	align-items: start;
}
/* WooCommerce clears the floats with ::before/::after tables; in a grid those
   become items and push the nav into the second column. */
body.woocommerce-account.logged-in .entry-content > .woocommerce::before,
body.woocommerce-account.logged-in .entry-content > .woocommerce::after { display: none; content: none; }
body.woocommerce-account .woocommerce-notices-wrapper:not(:empty),
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-info { grid-column: 1 / -1; }
body.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; }
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
}
.woocommerce-MyAccount-navigation { padding: .5rem; position: sticky; top: 6.5rem; }
body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: .75rem 1rem;
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	text-transform: uppercase;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .06em;
	transition: background-color .2s, color .2s;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--accent); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base) !important; text-decoration: none !important; }
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout { border-top: 1px solid var(--wp--preset--color--border); margin-top: .5rem; padding-top: .5rem; }
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--wp--preset--color--muted); }
.woocommerce-MyAccount-content { padding: 1.75rem 2rem; min-height: 20rem; }
.woocommerce-MyAccount-content > :first-child { margin-top: 0; }
.woocommerce-MyAccount-content > :last-child { margin-bottom: 0; }
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3, .woocommerce-MyAccount-content legend {
	font-size: 1.15rem;
	margin: 1.5rem 0 .75rem;
}
.woocommerce-MyAccount-content p { color: var(--wp--preset--color--muted); }
.woocommerce-MyAccount-content p a { color: var(--wp--preset--color--accent); }
.woocommerce-MyAccount-content mark { background: none; color: var(--wp--preset--color--contrast); font-weight: 700; }
/* Fieldsets and address cards. */
.woocommerce-MyAccount-content fieldset { border: 1px solid var(--wp--preset--color--border); border-radius: 12px; padding: 1rem 1.25rem 1.25rem; margin: 1.5rem 0; }
.woocommerce-MyAccount-content fieldset legend { padding: 0 .5rem; margin: 0; }
.woocommerce-MyAccount-content .woocommerce-Address { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 12px; padding: 1.25rem; }
.woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.woocommerce-MyAccount-content .woocommerce-Address-title h2, .woocommerce-MyAccount-content .woocommerce-Address-title h3 { margin: 0; }
.woocommerce-MyAccount-content .woocommerce-Address-title a { float: none; white-space: nowrap; text-transform: uppercase; font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--wp--preset--color--accent); }
.woocommerce-MyAccount-content address { font-style: normal; color: var(--wp--preset--color--muted); line-height: 1.6; margin-top: .75rem; }
.woocommerce-MyAccount-content .woocommerce-Addresses.col2-set { display: flex; gap: 1.5rem; align-items: stretch; }
.woocommerce-MyAccount-content .woocommerce-Addresses.col2-set::before, .woocommerce-MyAccount-content .woocommerce-Addresses.col2-set::after { display: none; }
.woocommerce-MyAccount-content .woocommerce-Addresses.col2-set .col-1,
.woocommerce-MyAccount-content .woocommerce-Addresses.col2-set .col-2 { float: none; width: auto; flex: 1 1 0; max-width: none; }
/* Notice banners render their action ("Blader door producten", "Bekijk
   winkelwagen") as a ghost button in near-black text. Make it a real link. */
.woocommerce .wc-block-components-notice-banner a.button,
.woocommerce .woocommerce-info a.button, .woocommerce .woocommerce-message a.button {
	background: transparent !important;
	color: var(--wp--preset--color--accent) !important;
	padding: 0 !important;
	font-size: .8rem;
	text-decoration: underline;
	text-underline-offset: .2em;
	opacity: 1;
}
/* Order and download tables: quiet header, roomy rows, small pill actions. */
.woocommerce-MyAccount-content table.shop_table { border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; margin: 0; }
.woocommerce-MyAccount-content table.shop_table th {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	padding: .8rem 1rem;
}
.woocommerce-MyAccount-content table.shop_table td { padding: .9rem 1rem; vertical-align: middle; background: transparent; }
.woocommerce-MyAccount-content table.shop_table tbody tr:last-child td { border-bottom: 0; }
.woocommerce-MyAccount-content table.shop_table td a:not(.button) { color: var(--wp--preset--color--accent); text-decoration: none; }
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button,
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .woocommerce-button {
	padding: .45rem 1rem !important;
	font-size: .72rem;
	margin: 0 .25rem 0 0;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button + .button { background: transparent !important; color: var(--wp--preset--color--contrast) !important; box-shadow: inset 0 0 0 1px var(--wp--preset--color--border); }
.woocommerce-MyAccount-content .woocommerce-pagination { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1rem; }
/* Dashboard wording: the WooCommerce greeting spells out every link in accent,
   which on our palette reads as three shouting buttons. Calm it down. */
.woocommerce-MyAccount-content p:first-of-type { color: var(--wp--preset--color--contrast); font-size: 1.1rem; }
/* Logged out: centre the login card and give the heading the same rhythm as
   the other forms on the site. */
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce { max-width: 520px; }
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce > h2 { font-size: 1.4rem; margin: 0 0 1rem; }
/* With registration on, Woo puts Login and Register side by side
   (#customer_login): two cards, so twice the room, and both headings small. */
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce:has(#customer_login) { max-width: 1080px; }
#customer_login.col2-set { display: flex; gap: 2rem; align-items: stretch; }
#customer_login.col2-set::before, #customer_login.col2-set::after { display: none; content: none; }
#customer_login.col2-set .col-1, #customer_login.col2-set .col-2 { float: none; width: auto; flex: 1 1 0; max-width: none; display: flex; flex-direction: column; }
#customer_login.col2-set .col-1 > form, #customer_login.col2-set .col-2 > form { flex: 1 1 auto; }
#customer_login h2 { font-size: 1.4rem; margin: 0 0 1rem; }
@media (max-width: 781px) { #customer_login.col2-set { flex-direction: column; } #customer_login.col2-set .col-1, #customer_login.col2-set .col-2 { width: 100%; } }
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword {
	background: var(--wp--preset--color--base-2) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 16px !important;
	padding: 1.75rem 2rem !important;
	margin: 0 !important;
}
.woocommerce-form-login .woocommerce-form-login__submit { margin-right: 1rem !important; }
.woocommerce-form-login .lost_password { margin: 1rem 0 0; }
.woocommerce-form-login .lost_password a { color: var(--wp--preset--color--muted); }
.woocommerce-form-login .lost_password a:hover { color: var(--wp--preset--color--accent); }

/* Cart: product names in contrast, totals as a right-hand summary card that
   lines up with the table edge, coupon row that does not fight the buttons. */
body.woocommerce-cart table.shop_table td.product-name a { color: var(--wp--preset--color--contrast); text-decoration: none; font-weight: 600; }
body.woocommerce-cart table.shop_table td.product-name a:hover { color: var(--wp--preset--color--accent); }
body.woocommerce-cart table.shop_table th { color: var(--wp--preset--color--muted); text-transform: uppercase; font-size: .72rem; font-weight: 600; letter-spacing: .08em; }
body.woocommerce-cart table.shop_table td.product-remove a.remove { color: var(--wp--preset--color--muted) !important; font-weight: 400; }
body.woocommerce-cart table.shop_table td.product-remove a.remove:hover { background: var(--wp--preset--color--danger); color: var(--wp--preset--color--contrast) !important; }
body.woocommerce-cart table.shop_table td.product-thumbnail img { border-radius: 10px; width: 72px; }
/* The cell must stay a table-cell (colspan), so: coupon floats left, update
   button floats right, both boxes the same height. */
body.woocommerce-cart table.shop_table td.actions { padding: 1rem; }
body.woocommerce-cart table.shop_table td.actions .coupon { float: left; display: flex; gap: .75rem; align-items: center; }
body.woocommerce-cart table.shop_table td.actions .coupon .input-text { width: 14rem !important; height: 2.75rem !important; box-sizing: border-box; padding: 0 1rem !important; margin: 0; }
body.woocommerce-cart table.shop_table td.actions .button { height: 2.75rem; box-sizing: border-box; padding: 0 1.5rem !important; line-height: 1; margin: 0; white-space: nowrap; }
body.woocommerce-cart table.shop_table td.actions > .button[name="update_cart"] { float: right; }
body.woocommerce-cart table.shop_table td.quantity .qty { min-width: 3.5rem; }
body.woocommerce-cart table.shop_table td.actions .button:disabled { opacity: .35; }
body.woocommerce-cart .cart-collaterals { display: flex; justify-content: flex-end; margin-top: var(--wp--preset--spacing--30, 1.5rem); }
body.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: min(100%, 440px); padding: 1.5rem; }
body.woocommerce-cart .cart_totals h2 { font-size: 1.15rem; margin: 0 0 1rem; }
body.woocommerce-cart .cart_totals table.shop_table { border: 0; background: transparent; margin: 0; }
body.woocommerce-cart .cart_totals table.shop_table th { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--wp--preset--color--muted); font-weight: 500; }
body.woocommerce-cart .cart_totals table.shop_table th, body.woocommerce-cart .cart_totals table.shop_table td { border-width: 0 0 1px; padding: .9rem 0; }
body.woocommerce-cart .cart_totals .order-total th, body.woocommerce-cart .cart_totals .order-total td { border-bottom: 0; font-size: 1.15rem; color: var(--wp--preset--color--contrast); font-weight: 700; }
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination { color: var(--wp--preset--color--muted); font-size: .9rem; }
body.woocommerce-cart .wc-proceed-to-checkout { padding: 1rem 0 0; }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { margin: 0; font-size: 1rem; }
body.woocommerce-cart .return-to-shop .button { background: transparent !important; color: var(--wp--preset--color--contrast) !important; box-shadow: inset 0 0 0 1px var(--wp--preset--color--border); }
body.woocommerce-cart .cart-empty.woocommerce-info { font-size: 1.1rem; }

@media (max-width: 781px) {
	body.woocommerce-account.logged-in .entry-content > .woocommerce { grid-template-columns: 1fr; }
	/* Titles like "Accountdetails" broke mid-word at 390px. */
	body.woocommerce-account main > .wp-block-post-title,
	body.woocommerce-cart main > .wp-block-post-title { font-size: clamp(2.2rem, 9vw, 4rem); overflow-wrap: anywhere; }
	/* Nav: wrapping 2-column grid instead of a scroll strip. */
	.woocommerce-MyAccount-navigation { position: static; padding: .4rem; }
	.woocommerce-MyAccount-navigation ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; }
	.woocommerce-MyAccount-navigation a { text-align: center; padding: .6rem .5rem; font-size: .72rem; }
	.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; }
	.woocommerce-MyAccount-content { padding: 1rem; min-height: 0; }
	.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword { padding: 1.25rem !important; }
	.woocommerce-MyAccount-content .woocommerce-Addresses.col2-set .col-1,
	.woocommerce-MyAccount-content .woocommerce-Addresses.col2-set .col-2 { width: 100%; }
	.woocommerce-MyAccount-content .woocommerce-Addresses.col2-set { flex-direction: column; }
	/* Orders list: every row is its own card, order number as title. */
	.woocommerce-MyAccount-content table.woocommerce-orders-table { overflow: visible; background: transparent; border: 0; }
	.woocommerce-MyAccount-content table.woocommerce-orders-table tbody { display: flex; flex-direction: column; gap: .75rem; }
	.woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr { display: block; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 12px; padding: .9rem; }
	.woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr:nth-child(2n) td { background: transparent; }
	.woocommerce-MyAccount-content table.woocommerce-orders-table td,
	.woocommerce-MyAccount-content table.woocommerce-orders-table th.woocommerce-orders-table__cell-order-number { display: flex !important; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: .25rem; padding: .4rem 0; border: 0; background: transparent; text-align: right; }
	.woocommerce-MyAccount-content table.woocommerce-orders-table th.woocommerce-orders-table__cell-order-number { justify-content: flex-start; text-align: left; font-size: 1.05rem; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 0 0 .5rem; margin-bottom: .25rem; border-bottom: 1px solid var(--wp--preset--color--border); }
	.woocommerce-MyAccount-content table.woocommerce-orders-table th.woocommerce-orders-table__cell-order-number a { color: var(--wp--preset--color--contrast); }
	.woocommerce-MyAccount-content table.woocommerce-orders-table td::before { float: none; margin-right: auto; padding-right: 1rem; font-weight: 600; color: var(--wp--preset--color--muted); text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; }
	.woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { display: flex !important; gap: .5rem; padding-top: .75rem; }
	.woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before { display: none; }
	.woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button { flex: 1 1 0; margin: 0; padding: .55rem .5rem !important; text-align: center; }
	/* Order view: product name full width, totals as label/value rows. */
	.woocommerce-MyAccount-content .woocommerce-table--order-details tbody td { display: block; padding: .75rem 1rem; border: 0; }
	.woocommerce-MyAccount-content .woocommerce-table--order-details tbody td.product-total { padding-top: 0; text-align: right; font-weight: 600; }
	.woocommerce-MyAccount-content .woocommerce-table--order-details tbody tr { display: block; border-bottom: 1px solid var(--wp--preset--color--border); }
	.woocommerce-MyAccount-content .woocommerce-table--order-details,
	.woocommerce-MyAccount-content .woocommerce-table--order-details thead,
	.woocommerce-MyAccount-content .woocommerce-table--order-details tbody,
	.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot { display: block; width: 100%; box-sizing: border-box; }
	.woocommerce-MyAccount-content .woocommerce-table--order-details thead tr { display: flex; justify-content: space-between; }
	.woocommerce-MyAccount-content .woocommerce-table--order-details thead th { display: block; flex: 1 1 0; }
	.woocommerce-MyAccount-content .woocommerce-table--order-details thead th:last-child { text-align: right; }
	.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0 1rem; }
	.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot th,
	.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot td { padding: .75rem 0; text-align: left; }
	.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot td { text-align: right; }
	/* Cart: input, coupon button, update button each full width, same edges. */
	body.woocommerce-cart table.shop_table td.actions .coupon { float: none; flex-direction: column; align-items: stretch; gap: .75rem; }
	body.woocommerce-cart table.shop_table td.actions .coupon .input-text { width: 100% !important; }
	body.woocommerce-cart table.shop_table td.actions .button { float: none !important; width: 100% !important; margin: 0 !important; }
	body.woocommerce-cart table.shop_table td.actions > .button[name="update_cart"] { margin-top: .75rem !important; }
	body.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; }
}
/* Customer sections printed by icg-dropoff (progress, cards, recent): only the
   spacing around them lives here; the plugin styles the insides. */
.woocommerce-MyAccount-content .icg-acct-progress,
.woocommerce-MyAccount-content .icg-acct-cards,
.woocommerce-MyAccount-content .icg-acct-recent { margin: 0 0 1.5rem; }
/* Order detail (Bekijken): totals rows and the address block below. */
.woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce-MyAccount-content .woocommerce-customer-details h2 { font-size: 1.15rem; margin: 1.5rem 0 .75rem; }
.woocommerce-MyAccount-content table.shop_table tfoot th { background: transparent; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--wp--preset--color--muted); }
.woocommerce-MyAccount-content table.shop_table tfoot tr:last-child th,
.woocommerce-MyAccount-content table.shop_table tfoot tr:last-child td { color: var(--wp--preset--color--contrast); font-weight: 700; }
.woocommerce-MyAccount-content .woocommerce-customer-details address { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 12px; padding: 1.25rem; margin: 0; }
.woocommerce-MyAccount-content .woocommerce-customer-details .col2-set { display: flex; gap: 1.5rem; }
.woocommerce-MyAccount-content .woocommerce-customer-details .col2-set::before, .woocommerce-MyAccount-content .woocommerce-customer-details .col2-set::after { display: none; }
.woocommerce-MyAccount-content .woocommerce-customer-details .col2-set .col-1,
.woocommerce-MyAccount-content .woocommerce-customer-details .col2-set .col-2 { float: none; width: auto; flex: 1 1 0; max-width: none; }
@media (max-width: 781px) {
	.woocommerce-MyAccount-content .woocommerce-customer-details .col2-set { flex-direction: column; }
}