/*
Theme Name:   Medi Stitch Child
Theme URI:    https://github.com/JuanJL/medistitch
Description:  Child theme of Hello Elementor for the Medi Stitch site. Use this for any custom CSS, template overrides, or theme-level PHP. Parent theme updates will not overwrite changes here.
Author:       Medi Stitch
Template:     hello-elementor
Version:      1.5.8
Requires PHP: 8.0
Text Domain:  medistitch-child
*/

/* ---- Language switcher ----
 * Renders inline where the old [gtranslate] widget sat in the header (an
 * Elementor icon-box: globe icon + title slot). The wrapper is an inline-block
 * so it flows naturally with the surrounding widget chrome. The menu opens
 * downward as an absolutely-positioned panel that doesn't push other content
 * around.
 */
.medistitch-language-switcher {
	display: inline-block;
	position: relative;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	vertical-align: middle;
}
.medistitch-language-switcher details { display: inline-block; }
.medistitch-language-switcher summary {
	cursor: pointer;
	list-style: none;
	user-select: none;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: inherit;
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	/* Stable width so NL/EN/FR/IT (and future 3-char locales) don't shift
	 * adjacent header widgets when the active language changes. */
	min-width: 2.25em;
	padding: 6px 4px;
}
.medistitch-language-switcher summary:focus-visible,
.medistitch-language-switcher a:focus-visible {
	outline: 2px solid #1d6fed;
	outline-offset: 2px;
	border-radius: 2px;
}
.medistitch-language-switcher summary::-webkit-details-marker { display: none; }
.medistitch-language-switcher summary::after {
	content: "▾";
	font-size: 0.7em;
	opacity: 0.6;
	transition: transform 0.15s ease;
}
.medistitch-language-switcher details[open] summary::after {
	transform: rotate(180deg);
}
.medistitch-language-switcher ul {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 8rem;
	max-width: calc(100vw - 16px);
	background: #fff;
	color: #222;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	z-index: 1000;
}
.medistitch-language-switcher li { margin: 0; }
.medistitch-language-switcher a {
	display: block;
	padding: 8px 16px;
	color: #222;
	text-decoration: none;
	white-space: nowrap;
}
.medistitch-language-switcher a:hover,
.medistitch-language-switcher a:focus {
	background: rgba(0, 0, 0, 0.04);
	outline: none;
}
.medistitch-language-switcher a[aria-current="true"] {
	font-weight: 600;
	background: rgba(0, 0, 0, 0.04);
}
/* Dropdown stacking fix. The switcher lives in a header column (#4eb65ec) that
 * ties z-index:0 with the account/Buy-now cluster (#15993c4f), and its inner
 * box (#9595fed) was left at z-index:-1 — so the open menu painted UNDERNEATH
 * those buttons (very visible on mobile, where the header wraps to rows). Lift
 * the switcher's whole column above its sibling and clear the negative inner
 * z-index. The :has() rule is a resilient fallback should the template ids
 * change. */
.elementor-element-4eb65ec { z-index: 20 !important; }
.elementor-element-9595fed { z-index: auto !important; }
header .e-con:has(.medistitch-language-switcher) { z-index: 20; }

/* ===========================================================================
 *  DESIGN TOKENS — refined Medi Stitch identity (extracted from live brand)
 * =========================================================================== */
:root {
	--ms-blue: #0B71D9;
	--ms-blue-dark: #095bb0;
	--ms-ink: #01071A;
	--ms-muted: #5b6472;
	--ms-line: rgba(1, 7, 26, 0.10);
	--ms-bg-soft: #f5f7fb;
	--ms-radius: 12px;
	--ms-radius-sm: 8px;
	--ms-shadow: 0 6px 24px rgba(1, 7, 26, 0.08);
	--ms-shadow-sm: 0 2px 10px rgba(1, 7, 26, 0.06);
}

/* ===========================================================================
 *  PRODUCT PAGE — single-product design layer
 *  Scoped to .single-product so it never bleeds into Elementor-built pages.
 * =========================================================================== */

/* Breadcrumb — sits just above the product title (prepended to the title
 * widget), so it's left-aligned within the summary column. */
.single-product .medistitch-breadcrumb {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--ms-muted);
}
.single-product .medistitch-breadcrumb a {
	color: var(--ms-muted);
	text-decoration: none;
}
.single-product .medistitch-breadcrumb a:hover { color: var(--ms-blue); }
.single-product .medistitch-breadcrumb__sep { margin: 0 8px; opacity: 0.5; }

/* Layout: a touch more breathing room around the summary */
.single-product div.product .entry-summary { padding-left: 8px; }

/* Title — ink, not blue (blue is reserved for the CTA). Override Elementor's
 * product-title widget color. */
.single-product .elementor-widget-woocommerce-product-title .product_title,
.single-product div.product .product_title {
	color: var(--ms-ink) !important;
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 12px;
}

/* Price — make it the strongest element in the buy box.
 * The product layout is an Elementor Theme Builder template, so the price is a
 * woocommerce-product-price widget; .entry-summary covers any non-Elementor
 * fallback. */
.single-product .elementor-widget-woocommerce-product-price .price,
.single-product .elementor-widget-woocommerce-product-price .price ins,
.single-product div.product .entry-summary .price,
.single-product div.product .entry-summary .price ins {
	/* !important deliberately overrides Elementor's per-widget generated CSS,
	 * which loads after the theme stylesheet and otherwise wins. */
	color: var(--ms-ink) !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	line-height: 1.1;
	margin-bottom: 18px;
	text-decoration: none;
}
.single-product .elementor-widget-woocommerce-product-price .price .woocommerce-price-suffix,
.single-product div.product .entry-summary .price .woocommerce-price-suffix {
	display: inline-block;
	margin-left: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ms-muted);
}
.single-product .elementor-widget-woocommerce-product-price .price del,
.single-product div.product .entry-summary .price del {
	font-size: 18px;
	font-weight: 500;
	color: var(--ms-muted);
	opacity: 0.8;
}

/* Quantity stepper */
.single-product div.product form.cart .quantity .qty {
	height: 52px;
	width: 72px;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-sm);
	text-align: center;
	font-weight: 600;
	color: var(--ms-ink);
	background: #fff;
}

/* Add-to-cart — branded, rounded, confident */
.single-product div.product form.cart .single_add_to_cart_button,
.single-product div.product .medistitch-kit-cta__btn {
	background: var(--ms-blue);
	color: #fff;
	border: none;
	border-radius: var(--ms-radius);
	padding: 15px 32px;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.01em;
	box-shadow: var(--ms-shadow-sm);
	transition: background 0.15s ease, transform 0.05s ease;
	display: inline-block;
	text-decoration: none;
}
.single-product div.product form.cart .single_add_to_cart_button:hover,
.single-product div.product .medistitch-kit-cta__btn:hover {
	background: var(--ms-blue-dark);
}
.single-product div.product form.cart .single_add_to_cart_button:active {
	transform: translateY(1px);
}
.single-product div.product form.cart .single_add_to_cart_button:focus-visible,
.single-product div.product .medistitch-kit-cta__btn:focus-visible {
	outline: 3px solid rgba(11, 113, 217, 0.4);
	outline-offset: 2px;
}

/* Kit hub CTA spacing */
.single-product .medistitch-kit-cta { margin: 8px 0 20px; }

/* Trust / USP strip — a clean vertical stack at every width. One item per row
 * reads as an intentional list, is immune to per-language string length
 * (FR/IT labels are longer), and helps fill the buy-box column. */
.single-product .medistitch-trust {
	list-style: none;
	margin: 24px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--ms-line);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.single-product .medistitch-trust__item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ms-ink);
}
.single-product .medistitch-trust__icon {
	display: inline-flex;
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ms-bg-soft);
	color: var(--ms-blue);
}
.single-product .medistitch-trust__icon svg { width: 19px; height: 19px; }

/* Product gallery — soften + frame. A faint surface grounds the transparent
 * product PNGs (scissors, instruments) so they don't float against white,
 * and stops the image bleeding behind the title/price on mobile. */
.single-product div.product .woocommerce-product-gallery {
	border-radius: var(--ms-radius);
}
.single-product div.product .woocommerce-product-gallery__image {
	background: var(--ms-bg-soft);
	border-radius: var(--ms-radius);
	overflow: hidden;
}
.single-product div.product .woocommerce-product-gallery__image img {
	border-radius: var(--ms-radius);
}
.single-product div.product .flex-control-thumbs li img {
	border-radius: var(--ms-radius-sm);
	border: 1px solid var(--ms-line);
}

/* Tabs */
.single-product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--ms-line);
	padding: 0;
	margin-bottom: 24px;
}
.single-product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-radius: 0;
	margin: 0 24px 0 0;
	padding: 0;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none; }
.single-product .woocommerce-tabs ul.tabs li a {
	color: var(--ms-muted);
	font-weight: 600;
	padding: 12px 0;
	display: inline-block;
	border-bottom: 2px solid transparent;
}
.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ms-ink);
	border-bottom-color: var(--ms-blue);
}

/* Related products heading */
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
	color: var(--ms-ink);
	font-weight: 700;
}

/* The related / up-sell rows render through an Elementor WooCommerce widget
 * that (a) drops the brand Manrope back to Elementor's default Lato — which
 * reads as cramped, almost space-less, at heading weight — and (b) forces
 * li.product to display:block, so the flex-column card breaks and the CTA can
 * no longer pin to the card bottom (a price-less card like the kit floats its
 * button up). Re-assert both so these cards match the shop grid. */
.single-product .related.products,
.single-product .upsells.products,
.single-product .related.products > h2,
.single-product .upsells.products > h2,
.single-product .related.products .woocommerce-loop-product__title,
.single-product .upsells.products .woocommerce-loop-product__title {
	font-family: 'Manrope', sans-serif;
	letter-spacing: normal;
}
.single-product .related.products ul.products li.product,
.single-product .upsells.products ul.products li.product {
	display: flex !important;
	flex-direction: column;
}

/* Mobile */
@media (max-width: 768px) {
	.single-product div.product .entry-summary .price,
	.single-product div.product .entry-summary .price ins { font-size: 26px; }
	.single-product .medistitch-trust { gap: 12px 18px; }
	.single-product .medistitch-trust__item { font-size: 13px; }
}

/* ===========================================================================
 *  SHOP / CATALOG GRID — stock WooCommerce loop (ul.products li.product)
 *  Applies on the shop, category archives, AND related/up-sell rows on the
 *  single product (same markup) — one consistent product card everywhere.
 * =========================================================================== */
.woocommerce ul.products li.product {
	position: relative;          /* anchor for the .onsale badge */
	display: flex;               /* column layout so the CTA pins to the bottom */
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius);
	box-shadow: var(--ms-shadow-sm);
	padding: 14px;
	text-align: left;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Only lift on hover-capable devices so touch screens don't get a stuck
 * hover state after tapping a card. */
@media (hover: hover) {
	.woocommerce ul.products li.product:hover {
		transform: translateY(-3px);
		box-shadow: var(--ms-shadow);
	}
}

/* Sale badge — branded pill, top-left of the card (default WC is an off-brand
 * circle). Styled defensively even if no product is currently on sale. */
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 18px;
	left: 18px;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--ms-blue);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}
/* Star rating + out-of-stock — quiet, on-token. */
.woocommerce ul.products li.product .star-rating { font-size: 14px; margin: 0 0 8px; }
.woocommerce ul.products li.product .stock.out-of-stock {
	color: var(--ms-muted);
	font-weight: 600;
	font-size: 13px;
	margin: 0 0 8px;
}

/* Uniform image frame — normalizes the inconsistent product photos (some on
 * white, some on the blue backdrop, some bare) into one cohesive set. */
.woocommerce ul.products li.product a img {
	width: 100%;
	height: 200px;
	object-fit: contain;
	background: var(--ms-bg-soft);
	border-radius: var(--ms-radius-sm);
	padding: 10px;
	margin: 0 0 14px;
	box-sizing: border-box;
}

/* Title — fixed min-height keeps prices + buttons aligned across cards. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ms-ink);
	padding: 0;
	margin: 0 0 6px;
	min-height: 2.6em;
}

/* Price — ink + readable (was a stray olive at 14px). */
.woocommerce ul.products li.product .price {
	color: var(--ms-ink);
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 10px;
	display: block;
}
.woocommerce ul.products li.product .price .woocommerce-price-suffix {
	font-size: 12px;
	font-weight: 500;
	color: var(--ms-muted);
	margin-left: 4px;
}
.woocommerce ul.products li.product .price del {
	color: var(--ms-muted);
	font-weight: 500;
	font-size: 14px;
}

/* Buttons — Add to cart + Read more, branded + rounded (was default grey). */
.woocommerce ul.products li.product .button {
	background: var(--ms-blue);
	color: #fff;
	border: none;
	border-radius: var(--ms-radius-sm);
	font-weight: 600;
	font-size: 14px;
	padding: 10px 18px;
	/* margin-top:auto pins the CTA to the card bottom so buttons align across
	 * a row regardless of how many lines the title wraps to. align-self keeps
	 * the button hugging its content rather than stretching full-width. */
	margin: auto 0 0;
	align-self: flex-start;
	transition: background 0.15s ease;
}
.woocommerce ul.products li.product .button:hover {
	background: var(--ms-blue-dark);
	color: #fff;
}
.woocommerce ul.products li.product .button:focus-visible {
	outline: 3px solid rgba(11, 113, 217, 0.4);
	outline-offset: 2px;
}
/* "View cart" link shown after an ajax add */
.woocommerce ul.products li.product .added_to_cart {
	display: inline-block;
	margin-left: 10px;
	color: var(--ms-blue);
	font-weight: 600;
	text-decoration: none;
}

/* Result count + sorting bar — quieter, aligned with the tokens. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { color: var(--ms-muted); }

@media (max-width: 768px) {
	.woocommerce ul.products li.product a img { height: 160px; }
	/* Mobile is a 2-column grid, so titles still need a clamp to keep prices
	 * and the (bottom-pinned) CTA aligned across a row. */
	.woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 2.4em; }
}

/* ===========================================================================
 *  FIXED-HEADER OFFSET — stock WooCommerce pages
 *  The Elementor header is position:fixed (~100px). Elementor-built pages
 *  reserve space via their hero's top padding, but the stock WooCommerce
 *  content area (shop, category archives, cart, checkout, account) does not,
 *  so its page title slides up under the header. Add the offset here.
 * =========================================================================== */
.post-type-archive-product main,
.tax-product_cat main,
.woocommerce-cart main,
.woocommerce-checkout main,
.woocommerce-account main {
	padding-top: 130px;
}
/* Anchored scrolls (in-page links) also clear the fixed header. */
html { scroll-padding-top: 110px; }

@media (max-width: 768px) {
	.post-type-archive-product main,
	.tax-product_cat main,
	.woocommerce-cart main,
	.woocommerce-checkout main,
	.woocommerce-account main {
		padding-top: 96px;
	}
}

/* ===========================================================================
 *  CART — brand the pro-elements / WooCommerce cart (default teal buttons →
 *  brand blue, card-framed table + totals, consistent inputs).
 * =========================================================================== */
.elementor-widget-woocommerce-cart .shop_table,
.elementor-widget-woocommerce-cart .cart_totals {
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius);
	box-shadow: var(--ms-shadow-sm);
	background: #fff;
}
.elementor-widget-woocommerce-cart .cart_totals h2 { color: var(--ms-ink); font-weight: 700; }

/* Primary CTA — Proceed to Checkout. !important overrides the pro-elements cart
 * widget's own high-specificity teal (#5bc0de) default. */
.elementor-widget-woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.elementor-widget-woocommerce-cart a.checkout-button {
	background: var(--ms-blue) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--ms-radius-sm);
	font-weight: 700;
	font-size: 16px;
	padding: 14px 24px;
	text-align: center;
	transition: background 0.15s ease;
}
.elementor-widget-woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--ms-blue-dark) !important; color: #fff !important; }

/* Secondary — Update Cart + Apply coupon (outline). */
.elementor-widget-woocommerce-cart .actions .button,
.elementor-widget-woocommerce-cart .coupon .button {
	background: #fff !important;
	color: var(--ms-blue) !important;
	border: 1.5px solid var(--ms-blue) !important;
	border-radius: var(--ms-radius-sm);
	font-weight: 600;
	padding: 11px 20px;
	transition: background 0.15s ease, color 0.15s ease;
}
.elementor-widget-woocommerce-cart .actions .button:hover,
.elementor-widget-woocommerce-cart .coupon .button:hover { background: var(--ms-blue) !important; color: #fff !important; }
.elementor-widget-woocommerce-cart .actions .button:disabled,
.elementor-widget-woocommerce-cart .actions .button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Inputs — coupon + quantity. */
.elementor-widget-woocommerce-cart .coupon #coupon_code,
.elementor-widget-woocommerce-cart .quantity input.qty {
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-sm);
	padding: 10px 12px;
}
.elementor-widget-woocommerce-cart .quantity input.qty { width: 64px; text-align: center; }
.elementor-widget-woocommerce-cart .cart_totals .order-total .amount { color: var(--ms-ink); }

/* ===========================================================================
 *  CHECKOUT — block payment-method radios. The WooCommerce checkout block's
 *  radio <input> inherits a generic text-input box style from the parent theme
 *  (52×25px with 12px/30px padding), so the oversized box overran the option's
 *  48px label padding and CLIPPED the label text ("…ecte bankoverschrijving").
 *  Restore compact, brand-blue radio circles, vertically centred on the row.
 * =========================================================================== */
.wc-block-components-radio-control__option { display: flex; align-items: center; }
.wc-block-components-radio-control__input[type="radio"] {
	box-sizing: border-box;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	padding: 0 !important;
	margin: 0 !important;
	top: 50% !important;
	transform: translateY(-50%);
	border: 1.5px solid var(--ms-line) !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.wc-block-components-radio-control__input[type="radio"]:checked {
	border-color: var(--ms-blue) !important;
	background: radial-gradient(circle, var(--ms-blue) 0 45%, #fff 50%) !important;
}
.wc-block-components-radio-control__input[type="radio"]:focus-visible {
	outline: 2px solid var(--ms-blue);
	outline-offset: 2px;
}

/* ===========================================================================
 *  STICKY HEADER FIT — the header is an Elementor sticky header. Its invisible
 *  placeholder clone (.elementor-sticky__spacer, which reserves the header's
 *  height while the real header is position:fixed) lets its cart toggle overflow
 *  ~50px past the viewport, forcing a horizontal scrollbar and squeezing the
 *  right cluster on ~1280 laptops. Clip the spacer — it's invisible, so this
 *  only affects the placeholder, never the active header or its cart.
 * =========================================================================== */
.elementor-sticky__spacer { overflow: hidden !important; }

/* ===========================================================================
 *  MOBILE UX POLISH — trust + smoothness pass (from a multi-lens design
 *  review). The header's three-row STACK on phones needs the Elementor editor
 *  to truly fix (flagged to the owner); everything here is the high-value CSS
 *  layer: empty-cart trust cue, a calmer cart button, credibility-logo rhythm,
 *  hero CTAs, footer affordance, and touch feedback.
 * =========================================================================== */

/* Header cart — an empty cart shouting "€ 0,00" on every page reads to a first-
 * time buyer as a broken store. Hide the running total while the cart is empty
 * (leaving just the icon), and demote the heavy blue pill to a light outline so
 * "Nu kopen" stays the single clear primary action. */
.elementor-widget-woocommerce-menu-cart:has(.woocommerce-mini-cart__empty-message) .elementor-button-text {
	display: none !important;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button {
	background: transparent !important;
	color: var(--ms-blue) !important;
	border: 1.5px solid var(--ms-blue) !important;
	border-radius: var(--ms-radius-sm);
	transition: background 0.15s ease, color 0.15s ease;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button:hover {
	background: var(--ms-blue) !important;
	color: #fff !important;
}

/* Header controls — comfortable 44px touch targets; keep "Mijn account" on a
 * single line (it was wrapping to two in the cramped row). */
.medistitch-language-switcher summary { min-height: 44px; }
.elementor-element-c74e1f5 .elementor-icon-box-title,
.elementor-element-c74e1f5 .elementor-icon-box-title a { white-space: nowrap; }

/* Credibility logos (Artsen Zonder Grenzen, ReMedI, KU Leuven, BeMSA …) — one
 * optical height in a calm 2-up grid so the trust strip reads as a designed row
 * instead of mismatched, one-per-screen stacked images. Gallery #377d7d5 is the
 * only image-gallery on the homepage and shares its id across all languages. */
@media (max-width: 1024px) {
	.elementor-element-377d7d5 .gallery {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 22px 16px;
	}
	.elementor-element-377d7d5 .gallery-item img {
		max-height: 50px;
		width: auto;
		margin: 0 auto;
		object-fit: contain;
	}
}

/* Hero CTAs — keep the label and its chevron together and centred instead of a
 * full-bleed pill with the arrow stranded on the far right. */
@media (max-width: 768px) {
	.elementskit-btn { justify-content: center !important; }
	/* elementskit sets a 30px icon spacing → a dead gap between label and arrow
	 * on the narrow mobile button; tighten it so they read as one unit. */
	.elementskit-btn i { margin-left: 0.5em !important; }
}

/* Footer — the shipping/returns/privacy links buyers look for were tiny, low-
 * contrast and packed too tight to tap reliably. */
[data-elementor-type="footer"] a {
	display: inline-block;
	padding: 6px 0;
	color: var(--ms-ink);
	transition: color 0.15s ease;
}
[data-elementor-type="footer"] a:hover { color: var(--ms-blue); }

/* Touch feedback + control consistency — every button/stepper gets a pressed
 * state (there is no hover on touch), and the quantity controls meet the 44px
 * floor with the shared radius token. */
.elementor-button:active,
.elementskit-btn:active,
.single_add_to_cart_button:active,
.wc-block-components-button:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
	transform: translateY(1px);
	filter: brightness(0.95);
}
.quantity .qty,
.quantity .plus,
.quantity .minus,
.quantity button {
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--ms-radius-sm);
}

/* Cart — make the final "Totaal" the clear price anchor over the subtotal. */
.elementor-widget-woocommerce-cart .cart_totals .order-total th,
.elementor-widget-woocommerce-cart .cart_totals .order-total td {
	font-size: 18px;
	font-weight: 800;
	color: var(--ms-ink);
}

/* Sticky header — a soft elevation cue when pinned so the transition isn't
 * abrupt. */
header.elementor-sticky--effects,
header.elementor-sticky--active {
	box-shadow: 0 2px 12px rgba(1, 7, 26, 0.07);
	transition: box-shadow 0.2s ease;
}

/* ===========================================================================
 *  KIT CONFIGURATOR — WPC composite "build your kit" rows. Stock plugin CSS
 *  let titles wrap word-per-line, broke the price mid-phrase ("incl. / btw"),
 *  and rendered washed-out checkmark tiles that read as disabled. Align each
 *  option as one calm row: check / thumb / name+price / stepper.
 * =========================================================================== */
.wooco_component_product_selection_list_item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: var(--ms-radius-sm);
}
.wooco_component_product_selection_list_item_image { flex: 0 0 56px; }
.wooco_component_product_selection_list_item_image img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}
.wooco_component_product_selection_list_item_info { flex: 1 1 auto; min-width: 0; }
.wooco_component_product_selection_list_item_name {
	font-weight: 600;
	line-height: 1.35;
	color: var(--ms-ink);
}
/* Price stays on one line — "€ 5,00 incl. btw" must never fracture. */
.wooco_component_product_selection_list_item_desc { white-space: nowrap; }
.wooco_component_product_selection_list_item_desc .woocommerce-price-suffix { color: var(--ms-muted); }

/* Checkmark tile: clear affordance + a real selected state. */
.wooco_component_product_selection_list_item_choose {
	flex: 0 0 auto;
}
.wooco_component_product_selection_list_item_choose span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1.5px solid var(--ms-line);
	border-radius: 6px;
	background: #fff;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.wooco_item_selected .wooco_component_product_selection_list_item_choose span {
	border-color: var(--ms-blue);
	background: var(--ms-blue);
	color: #fff;
}
.wooco_item_selected {
	border-color: var(--ms-blue) !important;
	background: rgba(11, 113, 217, 0.04);
}

/* Quantity stepper: 40px touch cells, shared radius, press feedback. */
.wooco-qty-wrap .wooco-minus,
.wooco-qty-wrap .wooco-plus {
	min-width: 40px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ms-radius-sm);
	cursor: pointer;
	user-select: none;
}
.wooco-qty-wrap .wooco-minus:active,
.wooco-qty-wrap .wooco-plus:active { background: rgba(0, 0, 0, 0.06); }

/* The optional-component dropdown looked disabled; give it input affordance. */
.wooco_components select {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1.5px solid var(--ms-line);
	border-radius: var(--ms-radius-sm);
	background: #fff;
	color: var(--ms-ink);
	cursor: pointer;
}
.wooco_components select:focus-visible { outline: 2px solid var(--ms-blue); outline-offset: 1px; }

/* ===========================================================================
 *  TRUSTINDEX — the footer badge's 7-day trial EXPIRED, so the widget now
 *  renders a red "check our subscription plans!" error box to every visitor.
 *  Hide all Trustindex output until the subscription question is settled
 *  (remove this rule to bring the badge back once it renders reviews again).
 * =========================================================================== */
.ti-widget { display: none !important; }
/* The expired-trial notice renders WITHOUT the .ti-widget class — hide the
 * footer container that exists solely to host the Trustindex badge. */
[data-elementor-type="footer"] .elementor-element-5d85c8ba { display: none !important; }