/* =========================================================================
   Denico custom styles  (loaded late via denico-features.php)
   Batch 1 — staging:
     A) Task 2  rounded corners (homepage tiles + product imagery)
     B) Task 2  stronger horizontal-slider affordance
     C) Task 6  compact cart
     D) Task 5  cross-sells ("Gelijkaardige producten") spacing
   All selectors are scoped to avoid affecting unrelated UI. Tune the
   variables below in one place.
   ========================================================================= */

:root {
	--denico-radius:      14px;     /* tiles / large imagery          */
	--denico-radius-sm:   8px;      /* product cards / thumbnails     */
	--denico-teal:        #7ebbbc;  /* site brand teal (Shop nu/topbar)*/
	--denico-teal-dark:   #5f9c9d;  /* darker teal for hover          */
	--denico-tile-tint:   24, 56, 56; /* dark-teal RGB for tile overlay */
}

/* -------------------------------------------------------------------------
   A) Rounded corners — Task 2
   Homepage category/icon tiles ([av_image] → .grid-item) and product imagery.
   ---------------------------------------------------------------------- */
.grid-item img,
.grid-item .avia_image,
.grid-item .avia-image-container-inner {
	border-radius: var(--denico-radius);
	overflow: hidden;
}

/* all Enfold builder images in the page content (incl. plain [av_image] that
   aren't tiles, e.g. inline content photos). Scoped to #main — Enfold's content
   wrapper that contains EVERY section (the <main> tag only wraps the first
   section, so it would miss home-about etc.); header logo, benefit icons and
   the footer stay untouched. #top + !important outweighs Enfold's framework
   CSS, which scopes its image rules under the body's #top id. */
#top #main .avia-image-container img,
#top #main .avia_image img {
	border-radius: var(--denico-radius) !important;
}

/* Enfold column *background* images (no <img> tag — e.g. the hero title block).
   A background-image is auto-clipped to border-radius, so no overflow needed.
   Two selectors for robustness: `avia-full-stretch` is Enfold's class for
   background-bearing columns (instant, no flash), and `denico-rounded-bg` is
   added by denico-custom.js to ANY <main> column with a background image —
   future-proof against new columns / class-name changes. */
#top #main .flex_column.avia-full-stretch,
#top #main .flex_column.denico-rounded-bg {
	border-radius: var(--denico-radius) !important;
}

/* product-card imagery in shop loops & Enfold product/post sliders. Enfold's
   framework leaves these square (radius 0) under #top, out-specifying a plain
   rule — verified live that `ul.products li.product img` matched but still
   rendered 0px. Match Enfold's weight with #top + !important, and round both the
   <img> and its overflow:hidden .thumbnail_container wrapper for a clean clip. */
#top ul.products li.product img,
#top ul.products li.product .thumbnail_container,
#top .avia-product-slider-container .slide-entry img,
#top .avia-content-slider .slide-entry .slide-image img,
#top .woocommerce ul.products li.product a img {
	border-radius: var(--denico-radius-sm) !important;
}

/* -------------------------------------------------------------------------
   B) Slider affordance — Task 2
   Enfold content/product slider controls: always visible, compact circular
   buttons in the site's teal with the entypo glyph centred. Enfold pins the
   :before glyph absolutely (top:0/left:0, line-height:22px) inside the box, so
   we re-centre it explicitly. font-size:0 on the link hides its "Vorige/
   Volgende" text node. #top + !important beats Enfold's own 60px sizing.
   ---------------------------------------------------------------------- */
/* These sliders are near full-width (no side gutter) and have no pagination
   dots, so side arrows at the vertical middle always land on a card. Move the
   prev/next pair into a dedicated control row at the BOTTOM-centre of the
   slider (reserved via padding-bottom), so they never cover card content — on
   desktop and mobile alike. */
#top .avia-content-slider,
#top .avia-product-slider-container {
	padding-bottom: 58px !important;   /* room for the bottom control row */
}
#top .avia-content-slider .avia-slideshow-controls a.prev-slide,
#top .avia-content-slider .avia-slideshow-controls a.next-slide,
#top .avia-product-slider-container .avia-slideshow-controls a.prev-slide,
#top .avia-product-slider-container .avia-slideshow-controls a.next-slide {
	opacity: 1 !important;
	visibility: visible !important;
	width: 40px !important;
	height: 40px !important;
	top: auto !important;
	bottom: 8px !important;            /* sit in the reserved bottom row        */
	margin-top: 0 !important;
	background: var(--denico-teal) !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
	z-index: 50;
	font-size: 0 !important;           /* hide the "Vorige/Volgende" text node */
	transition: background .2s ease;   /* colour only — no scale */
}
/* centre the pair horizontally at the bottom */
#top .avia-content-slider .avia-slideshow-controls a.prev-slide,
#top .avia-product-slider-container .avia-slideshow-controls a.prev-slide {
	left: 50% !important;
	right: auto !important;
	margin-left: -46px !important;     /* left of centre (40px + 6px gap/2)     */
}
#top .avia-content-slider .avia-slideshow-controls a.next-slide,
#top .avia-product-slider-container .avia-slideshow-controls a.next-slide {
	left: 50% !important;
	right: auto !important;
	margin-left: 6px !important;       /* right of centre                       */
}
/* centre the entypo glyph on both axes inside the circle */
#top .avia-content-slider .avia-slideshow-controls a.prev-slide:before,
#top .avia-content-slider .avia-slideshow-controls a.next-slide:before,
#top .avia-product-slider-container .avia-slideshow-controls a.prev-slide:before,
#top .avia-product-slider-container .avia-slideshow-controls a.next-slide:before {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	line-height: 40px !important;      /* = circle height → vertical centre */
	text-align: center !important;     /* horizontal centre */
	font-size: 18px !important;
	color: #fff !important;
}
/* hover: darker teal, no scale */
#top .avia-content-slider .avia-slideshow-controls a.prev-slide:hover,
#top .avia-content-slider .avia-slideshow-controls a.next-slide:hover,
#top .avia-product-slider-container .avia-slideshow-controls a.prev-slide:hover,
#top .avia-product-slider-container .avia-slideshow-controls a.next-slide:hover {
	background: var(--denico-teal-dark) !important;
	transform: none !important;
}

/* pagination dots (reviews slider etc.) — clearer active state */
.avia-slideshow-dots.avia-slideshow-controls a.goto-slide {
	opacity: .45;
}
.avia-slideshow-dots.avia-slideshow-controls a.goto-slide.active {
	opacity: 1;
}

/* Slider product cards on phones: the card header reserves a fixed min-height
   (~91px on the wrapper, 80px on the title) which leaves a lot of empty space
   per card. Below 768px (1–2 cards per view, so cross-card alignment doesn't
   matter) let the header size to its content instead, so cards aren't so tall. */
@media only screen and (max-width: 768px) {
	#top .avia-content-slider .inner_product_header,
	#top .avia-product-slider-container .inner_product_header {
		min-height: 0 !important;
		padding-top: 6px !important;
	}
	#top .avia-content-slider .inner_product_header h2,
	#top .avia-product-slider-container .inner_product_header h2 {
		min-height: 0 !important;
	}
}

/* -------------------------------------------------------------------------
   E) Tile overlays — Task 2  (home-hero "too busy" + home-about consistency)
   The category tiles are busy photos with a white caption. Calm them down so
   the caption reads clearly, then reveal the full image on hover. Applies to
   ALL .grid-item tiles, so the hero and about sections stay consistent.
   Tune the tint via --denico-tile-tint and the opacities below.
   - Mute: desaturate + darken the photo by default; restore on hover.
   - Gradient: a dark-teal wash via Enfold's caption overlay-bg layer (sits
     above the image, below the caption text), stronger top-left where the
     caption sits; fades on hover.
   ---------------------------------------------------------------------- */
#top .grid-item img {
	transition: filter .45s ease;
	filter: saturate(.82) brightness(.8);
}
#top .grid-item:hover img {
	filter: saturate(1.12) brightness(.94);   /* vivid reveal, not washed out */
}
/* Caption scrim — kept CONSTANT in both states (only the photo brightens on
   hover), so the white caption stays readable. Strongest top-left where the
   caption sits, fading to a clear photo at the bottom. */
#top .grid-item [class*="image-overlay-bg"] {
	background: linear-gradient(
		165deg,
		rgba(var(--denico-tile-tint), .62) 0%,
		rgba(var(--denico-tile-tint), .24) 45%,
		rgba(var(--denico-tile-tint), 0)   100%
	) !important;
}
/* caption text legibility */
#top .grid-item .av-image-caption-overlay-position,
#top .grid-item .av-image-caption-overlay p {
	color: #fff !important;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}

/* Hero "title-block" column (salad background): white text to match the tiles
   + a left-anchored gradient scrim for readability. Uses ::after because the
   column already carries an Enfold ::before we must not clobber; content is
   lifted above the scrim with z-index. */
#top #main .title-block::after {
	content: "";
	position: absolute;
	/* width/height:100% (not inset:0) — inset:0 doesn't stretch a pseudo inside
	   Enfold's display:table-cell equal-height column, leaving a stray 150x103
	   box in the corner. */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		rgba(var(--denico-tile-tint), .72) 0%,
		rgba(var(--denico-tile-tint), .52) 38%,
		rgba(var(--denico-tile-tint), .22) 62%,
		rgba(var(--denico-tile-tint), 0)   88%
	);
}
#top #main .title-block > * {
	position: relative;
	z-index: 1;
}
#top #main .title-block .av-special-heading-tag,
#top #main .title-block .av-special-heading-subheading,
#top #main .title-block .av-subheading,
#top #main .title-block p {
	color: #fff !important;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}

/* -------------------------------------------------------------------------
   C) Compact cart — Task 6
   CSS-first (no cart.php override). Tighter rows, smaller thumbs, compact
   totals, full-width checkout, cleaner actions row, better mobile stacking.
   Preserves the existing cart JS (local-pickup / flexible-shipping toggles).
   ---------------------------------------------------------------------- */
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
	padding: 10px 12px;
	vertical-align: middle;
}
/* Keep the remove ("×") column narrow. The cart table is width:100% with
   table-layout:auto, and in that mode the remove column refuses to shrink — it
   sticks at ~436px no matter what width is set on the cell (verified live in a
   real browser: width:1% and width:44px were both ignored). The only reliable
   lever is `table-layout:fixed`, which makes declared column widths
   authoritative; product-name (left unsized) then absorbs the slack.
   Scoped to desktop so the responsive ≤768px cart keeps its own stacking.
   #top (id) out-specifies Enfold's woocommerce-mod.css column rules.
   (Selector gotcha learned the hard way: `.woocommerce-cart` is on <body>, an
   ANCESTOR of #top, so it must NOT follow #top in the selector.) */
#top table.shop_table.cart td.product-remove,
#top table.shop_table.cart th.product-remove {
	white-space: nowrap;
	text-align: center !important;
	padding-left: 6px !important;
	padding-right: 6px !important;
}
/* ≥768: all six columns are real (Enfold stops hiding at 768), so px + one
   auto column behave normally. r7: was min-769; 768 itself fell in a gap. */
@media (min-width: 768px) {
	#top table.shop_table.cart { table-layout: fixed !important; }
	#top table.shop_table.cart td.product-remove,
	#top table.shop_table.cart th.product-remove    { width: 44px !important; }
	#top table.shop_table.cart td.product-thumbnail,
	#top table.shop_table.cart th.product-thumbnail { width: 90px !important; }
	#top table.shop_table.cart td.product-price,
	#top table.shop_table.cart th.product-price     { width: 13% !important; }
	#top table.shop_table.cart td.product-quantity,
	#top table.shop_table.cart th.product-quantity  { width: 15% !important; }
	#top table.shop_table.cart td.product-subtotal,
	#top table.shop_table.cart th.product-subtotal  { width: 14% !important; }
}
.woocommerce-cart table.cart img {
	width: 64px;
	height: auto;
	border-radius: var(--denico-radius-sm);
}
.woocommerce-cart table.cart td.product-thumbnail {
	width: 84px;
}
.woocommerce-cart table.cart td.product-name {
	line-height: 1.35;
}
.woocommerce-cart table.cart .quantity .qty {
	width: 64px;
	padding: 6px;
}

/* totals box */
.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
}
.woocommerce-cart .cart_totals table {
	margin: 0;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	padding: 8px 10px;
}

/* prominent, full-width checkout button */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	padding: 14px;
	font-size: 1.05em;
	border-radius: var(--denico-radius-sm);
}

/* r7: coupon input + button side by side. Two Enfold problems: it gives both a
   fixed width (182/200px, 100% ≤479) and display:block, which stacked them —
   and our old fix put display:flex on td.actions itself, which strips its
   table-cell display so an ANONYMOUS cell wraps it into column 1 (59px wide on
   mobile, squeezing the coupon to nothing). Leave the td alone; flex the
   .coupon div instead (it also carries an Enfold float). The update-cart
   button in the same td is hidden by a code-snippet, so nothing else needs
   layout there. */
.woocommerce-cart .woocommerce-cart-form .actions .coupon {
	float: none;
	width: 100%;
	max-width: 512px;
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.woocommerce-cart .woocommerce-cart-form .actions .coupon .input-text {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	margin: 0 !important;
}
.woocommerce-cart .woocommerce-cart-form .actions .coupon .button {
	flex: 0 0 auto;
	width: auto !important;
	white-space: nowrap;
}

/* r7: the remove ("×") column measured 201px of a 332px table at 390px — the
   same table-layout:auto "remove refuses to shrink" trap as on desktop (r5),
   which was only fixed ≥769. Below 768 Enfold HIDES columns (≤479: thumbnail/
   qty/subtotal; 480–767: thumbnail/qty), and Chrome's fixed layout treats a
   display:none first-row cell's column as AUTO — ignoring its width rules —
   and hands every leftover pixel to those phantom columns (calc(%−px) is
   ignored outright). So per range: fixed layout + percentages on ALL VISIBLE
   columns totalling 100%, leaving nothing for the phantoms. */
@media (max-width: 479px) {
	#top table.shop_table.cart { table-layout: fixed !important; }
	#top table.shop_table.cart td.product-remove,
	#top table.shop_table.cart th.product-remove { width: 11% !important; }
	#top table.shop_table.cart td.product-name,
	#top table.shop_table.cart th.product-name   { width: 63% !important; }
	#top table.shop_table.cart td.product-price,
	#top table.shop_table.cart th.product-price  { width: 26% !important; }
}
@media (min-width: 480px) and (max-width: 767px) {
	#top table.shop_table.cart { table-layout: fixed !important; }
	#top table.shop_table.cart td.product-remove,
	#top table.shop_table.cart th.product-remove   { width: 8% !important; }
	#top table.shop_table.cart td.product-name,
	#top table.shop_table.cart th.product-name     { width: 52% !important; }
	#top table.shop_table.cart td.product-price,
	#top table.shop_table.cart th.product-price    { width: 18% !important; }
	#top table.shop_table.cart td.product-subtotal,
	#top table.shop_table.cart th.product-subtotal { width: 22% !important; }
}

@media (max-width: 768px) {
	/* r6: client asked for an even more compact mobile cart — smaller thumbs,
	   tighter cell padding, also in the totals box. */
	.woocommerce-cart table.cart img {
		width: 44px;
	}
	.woocommerce-cart table.cart td,
	.woocommerce-cart table.cart th {
		padding: 6px 8px;
	}
	.woocommerce-cart .cart_totals table th,
	.woocommerce-cart .cart_totals table td {
		padding: 6px 8px;
	}
	.woocommerce-cart .cross-sells {
		margin-top: 20px;
	}
}

/* -------------------------------------------------------------------------
   D) Product-page suggestion blocks — Task 5
   Spacing for "Vaak samen gekocht" (our curated cross-sell row) below the
   product summary. It inherits the theme's normal shop-loop card styling.
   (`.denico-upsells` used to be a second, auto-generated row here — removed,
   it duplicated the parent theme's upsell heading. See denico-features.php.)
   ---------------------------------------------------------------------- */
.denico-cross-sells {
	margin-top: 40px;
	clear: both;
}
.denico-cross-sells > h2 {
	margin-bottom: 18px;
}
/* cart cross-sell block heading spacing */
.woocommerce-cart .cross-sells {
	margin-top: 28px;
}

/* Phones: style.css draws the section hairline with
   `.single-product .related.products:before { top: 18px }` — a fixed offset
   that assumes a single-line <h2>. Below 768px the heading wraps to two lines
   and the rule cuts straight through it, which reads as "no room above the
   row". The line is decorative, so drop it here rather than chase the offset,
   and give the block more breathing room instead. */
@media only screen and (max-width: 768px) {
	#top .denico-cross-sells,
	#top .up-sells.upsells {
		margin-top: 56px;
	}
	/* NB: `.single-product` sits on <body>, an ANCESTOR of #top, so
	   `#top .single-product …` can never match — target the blocks directly. */
	#top .denico-cross-sells:before,
	#top .up-sells.upsells:before {
		display: none;
	}
	#top .denico-cross-sells > h2,
	#top .up-sells.upsells > h2 {
		padding-right: 0;
		margin-bottom: 14px;
	}
}

/* -------------------------------------------------------------------------
   F) WhatsApp floating button — Task 7
   Fixed bottom-right; Enfold's back-to-top is stacked above it so they don't
   overlap. z-index below the cookie banner (9998) so consent stays clickable.
   ---------------------------------------------------------------------- */
.denico-wa {
	position: fixed;
	right: 28px;
	bottom: 28px;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25d366;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	transition: background .2s ease, box-shadow .2s ease;
}
.denico-wa svg {
	width: 34px;
	height: 34px;
	fill: #fff;
}
.denico-wa:hover {
	background: #1ebe5d;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .34);
}
/* stack Enfold's back-to-top neatly above the WhatsApp button */
#top #scroll-top-link {
	right: 33px !important;
	bottom: 100px !important;
}
@media (max-width: 768px) {
	.denico-wa { right: 18px; bottom: 18px; width: 52px; height: 52px; }
	.denico-wa svg { width: 30px; height: 30px; }
	#top #scroll-top-link { right: 27px !important; bottom: 82px !important; }
}

/* -------------------------------------------------------------------------
   G) Newsletter (Formidable) form grid — scoped to #newsletter ONLY.
   (r5: the old unscoped span-4 block here hit EVERY Formidable form site-wide
   and wrecked the contact page's layout — do not re-add global frm_ rules.)
   Keep the newsletter's email field + "Inschrijven" button on ONE row at ALL
   widths. Formidable forces every field full-width on mobile (with !important),
   dropping the button to the next line. Re-assert the 12-col grid and the spans
   with !important: email = span 8, the button (and the rest) = span 4, so they
   stay side by side on phones too. minmax(0,1fr) kills the tracks' min-content
   floor (1fr alone let the input+button overflow the phone width);
   The field and the button meet at their shared rounded seam, so the row must
   have NO gap: r9 removed column-gap:10px together with the negative margins in
   style.css that used to cancel it (the two disagreed at 769-989px — gap 10 vs
   margin -12 — and the button overlapped the field by 2px there). Both boxes get
   an explicit height:42px in style.css; see the note there. */
#newsletter .frm_fields_container {
	display: grid !important;
	grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
	column-gap: 0;
	align-items: stretch;
}
#newsletter .frm_fields_container > * {
	grid-column: span 4 / span 12 !important;     /* button + others stay narrow */
	min-width: 0;
}
#newsletter .frm_fields_container > .frm_required_field {
	grid-column: span 8 / span 12 !important;     /* email keeps the wide span    */
}

/* -------------------------------------------------------------------------
   H) Header — Task 3
   H1) Account link → icon only (desktop + mobile). The top-bar account link
       already carries Enfold's person glyph (.av-icon-char); we drop the
       visible "Mijn account" word to reclaim space. font-size:0 hides the text
       NODE but keeps it in the accessibility tree (screen readers still
       announce "Mijn account") — unlike display:none. Matched by href so it
       survives menu-item-ID differences between staging and live.
   H2) Free-shipping promoted into the (mobile) top bar. denico-custom.js clones
       the "Gratis verzending…" badge text into .denico-topbar-freeship inside
       #header_meta; here we hide it on desktop and surface it on mobile.
   ---------------------------------------------------------------------- */

/* H1 — account: icon only, label hidden (kept for screen readers) */
#header_meta #avia2-menu a[href*="mijn-account"] {
	font-size: 0 !important;          /* collapse the "Mijn account" text node   */
	letter-spacing: 0 !important;
}
/* r8: logged-in users get a second "Uitloggen" item in this menu, which breaks
   the one-icon top-bar layout — hide it (logout stays available inside Mijn
   account). href-matched so it survives menu-item-ID differences; the bare
   anchor rule is the fallback for browsers without :has(). */
#header_meta #avia2-menu li:has(> a[href*="log-uit"]),
#header_meta #avia2-menu a[href*="log-uit"] {
	display: none !important;
}
#header_meta #avia2-menu a[href*="mijn-account"] .av-icon-char {
	font-size: 16px !important;       /* restore the person glyph                 */
	margin: 0 !important;
}

/* H2 — free-shipping top-bar promotion.
   Hidden on desktop (the .header-benefits badge row already shows free-shipping
   there). Shown in the teal top bar on mobile/tablet, where the theme hides
   .denico-header (phone/hours/promo) at ≤989px and the bar would otherwise hold
   only the account icon. */
.denico-topbar-freeship {
	display: none;
}
@media only screen and (max-width: 989px) {
	/* The top bar becomes a single flex row: [Google rating] · [free-shipping
	   (fills, centred)] · [account icon]. Each side item is content-sized;
	   free-shipping takes the slack and ellipses if space is tight. The rating
	   (denico-custom.js) and free-shipping are both prepended, so source order
	   is [rating, free-shipping, account-nav]. */
	#header_meta .container {
		display: flex;
		align-items: center;
		gap: 6px;
		min-height: 30px;
	}
	.denico-topbar-freeship {
		display: block;
		flex: 1 1 auto;
		min-width: 0;                 /* allow the ellipsis inside the flex item  */
		text-align: center;
		color: #222;                  /* match the top bar's native text colour   */
		font-size: 13px;
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.denico-topbar-freeship:before {
		font-family: 'fontello';
		content: '\e809';             /* free-shipping glyph — matches benefit badge #4 */
		margin-right: 7px;
		font-size: 15px;
		vertical-align: -2px;
	}
	.denico-grating {
		flex: 0 0 auto;               /* rating: compact, left                    */
	}
	#header_meta nav.sub_menu {
		flex: 0 0 auto;               /* account icon: compact, right             */
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	#header_meta #avia2-menu,
	#header_meta #avia2-menu li {
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		line-height: normal !important;
	}
	/* r7: account icon vertical centring — STRUCTURAL, no px nudges. History:
	   r3 added top:6px (too low on real devices), r5 removed it (client then
	   reported off-centre again). Headless measures the icon's BOX perfectly
	   centred either way — the device drift is font-BASELINE rendering, which
	   headless and phones do differently. So take the baseline out of the
	   equation: flex-centre the glyph's em box inside a bar-height anchor.
	   Deterministic on every device; any residual offset is the glyph's
	   ink-in-em offset, identical everywhere. */
	#header_meta #avia2-menu a[href*="mijn-account"] {
		display: inline-flex !important;
		align-items: center;
		height: 30px;                 /* = the top bar's min-height */
	}
	#header_meta #avia2-menu a[href*="mijn-account"] .av-icon-char {
		display: block;
		line-height: 1 !important;    /* box = the 16px em box, no baseline math */
	}
}

/* -------------------------------------------------------------------------
   H3) Mobile top-bar rotator — alternate rating ↔ free-shipping
   denico-custom.js wraps .denico-grating + .denico-topbar-freeship in
   .denico-topbar-rotator and toggles .is-active between them on a ~5s timer
   (the row was "too busy" with both at once). Desktop: display:contents → the
   wrapper vanishes and the children behave exactly as the H2/I rules expect
   (rating shows, free-shipping stays hidden), so no desktop change. Mobile
   (≤989px): the wrapper becomes the centre flex slot and the two children stack
   in the same spot and cross-fade; the account icon stays put at the right.
   ---------------------------------------------------------------------- */
.denico-topbar-rotator {
	display: contents;
}
@media only screen and (max-width: 989px) {
	#header_meta .denico-topbar-rotator {
		display: block;
		position: relative;
		flex: 1 1 auto;
		align-self: stretch;
		min-width: 0;
		min-height: 22px;
	}
	/* both children stacked, vertically centred, cross-faded by .is-active */
	#header_meta .denico-topbar-rotator > .denico-grating,
	#header_meta .denico-topbar-rotator > .denico-topbar-freeship {
		position: absolute;
		top: 50%;
		margin: 0;
		opacity: 0;
		transition: opacity .5s ease;
		pointer-events: none;
	}
	#header_meta .denico-topbar-rotator > .is-active {
		opacity: 1;
		pointer-events: auto;
	}
	/* free-shipping fills the slot (keeps its centred text + ellipsis) */
	#header_meta .denico-topbar-rotator > .denico-topbar-freeship {
		left: 0;
		right: 0;
		transform: translateY(-50%);
	}
	/* rating chip: natural width, centred in the slot */
	#header_meta .denico-topbar-rotator > .denico-grating {
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

/* -------------------------------------------------------------------------
   I) Google review-score badge — Task 1
   Compact "[G] ★★★★★ 5,0 (36)" badge built + injected into the top bar by
   denico-custom.js. Text uses the top bar's native dark colour (#222 — same as
   the phone/hours/account) so it sits in the bar instead of fighting it; amber
   partial stars (fill-layer width = rating/5) as the one accent. Desktop: left
   of the bar; mobile: the left item of the flex row (section H2).
   ---------------------------------------------------------------------- */
.denico-grating {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #222 !important;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none !important;
	vertical-align: middle;
	/* white "review chip" on the teal bar — amber stars + dark text read as a
	   proper Google badge; padding/radius give it room and rounded corners */
	background: #fff;
	padding: 4px 10px;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
.denico-grating:hover {
	color: #222 !important;
	opacity: .75;
}
.denico-grating .dgr-g {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	display: block;
}
.denico-grating .dgr-stars {
	position: relative;
	display: inline-block;
	color: rgba(34, 34, 34, .22);      /* empty star colour (only shows if <5) */
	letter-spacing: 1px;
	font-size: 12px;
}
.denico-grating .dgr-stars-fill {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #f5a623;                    /* warm amber — reads cleanly on the teal */
}
.denico-grating .dgr-score {
	font-weight: 700;
}
.denico-grating .dgr-count {
	opacity: .7;
}

/* Desktop: keep the top bar a SINGLE row. The badge must not push it to two
   rows — that grew #header_meta from 32→57px and dropped the account icon out
   of line with the cart (which is pulled up into the bar with margin-top:-57px).
   Flex the bar: rating (left) · contact info · account (far right). */
@media only screen and (min-width: 990px) {
	#header_meta .container {
		display: flex;
		align-items: center;
	}
	#header_meta .denico-grating {
		order: 0;
		margin-right: 22px;
	}
	#header_meta .denico-header {
		order: 1;
	}
	#header_meta nav.sub_menu {
		order: 2;
		float: none;
		margin: 0 0 0 auto;        /* push the account to the far right */
		top: 0;
	}
}

/* Mobile/tablet: the badge shares the one-row top bar with free-shipping +
   the account icon, so trim it to "[G] ★★★★★ 5,0" (drop the review count) and
   tighten it — that keeps the free-shipping line from truncating down to ~360px. */
@media only screen and (max-width: 989px) {
	#header_meta .denico-grating {
		font-size: 11px;
		gap: 4px;
	}
	#header_meta .denico-grating .dgr-g {
		width: 13px;
		height: 13px;
	}
	#header_meta .denico-grating .dgr-stars {
		font-size: 11px;
		letter-spacing: 0;
	}
	#header_meta .denico-grating .dgr-count {
		display: none;          /* recover ~28px so "Gratis verzending vanaf €250" fits */
	}
}
/* Very narrow phones (≤380px): drop the free-shipping line a step so the full
   "…vanaf €250" still fits beside the rating + account without ellipsis. */
@media only screen and (max-width: 380px) {
	#header_meta .denico-topbar-freeship {
		font-size: 12px;
	}
}

/* =========================================================================
   J) Client feedback round — header icon alignment + popular-products heights
   ========================================================================= */

/* J1) Desktop (≥990px): account + cart as a matched, level pair.
   The cart lives in the MAIN menu (#menu-item-shop) and is pulled up into the top
   bar — so it sits ~3.5px LOWER than the account glyph and 1px smaller (measured
   on staging: cart centre +3.5px vs account). Nudge the whole cart widget up to
   the account's centre and match the glyph size so they read as a level, equal
   pair. The -4.5px lands the centres within 0.03px (verified on staging). */
@media only screen and (min-width: 990px) {
	#top #menu-item-shop {
		position: relative;
		top: -4.5px;
	}
	#top #menu-item-shop a.cart_dropdown_link span[data-av_icon] {
		font-size: 16px !important;
		vertical-align: middle;
	}
}

/* J2) Mobile (≤989px): centre the free-shipping truck glyph against its own text
   so the icon+text unit sits level with the account icon (replaces the older
   magic -2px nudge with deterministic centring). With the H3 rotator each item
   shows alone in the centred slot, so this mainly tidies the glyph baseline. */
@media only screen and (max-width: 989px) {
	#header_meta .denico-topbar-freeship:before {
		vertical-align: middle;
	}
}

/* J3) Equal-height product cards, EVERY product grid, EVERY width.
   The cards are floated (the loop <ul> is display:block), so a row that mixes
   variable products (variation swatches + range price + "Opties selecteren")
   with simpler ones comes out ragged. Flex the <ul> so cards in a row match the
   tallest, and pin the price/add-to-cart block to the card bottom so the buttons
   line up.

   Scoped to `#top ul.products` — one rule set instead of one per container. It
   covers the Enfold product sliders ("De populairste producten"), the shop and
   category archive grids, the "Andere klanten kochten ook" block on category
   pages, and the product-page suggestion rows.

   Was previously scoped to `.avia-product-slider-container` AND wrapped in
   `min-width: 769px`, which is why the client still saw ragged cards on his
   phone and on the category pages. Both limits are gone; section B still drops
   the card-header min-heights ≤768px, so phone cards stay compact — flex now
   does the aligning that the fixed min-heights used to fake.

   ponytail: `> div:last-child` is structural, not a class — if a plugin ever
   appends a trailing element inside .inner_product the buttons stop aligning.
   Swap to an explicit selector for the buy block if that happens. */
#top ul.products {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
#top ul.products li.product {
	display: flex;
	flex-direction: column;
}
#top ul.products li.product .inner_product {
	display: flex;
	flex-direction: column;
	height: 100%;
}
/* the action area (qty + add-to-cart / "Opties selecteren") is the last block
   in .inner_product — pin it to the card bottom so buttons align across a row */
#top ul.products li.product .inner_product > div:last-child {
	margin-top: auto;
}

/* J4) Mobile (≤989px): cart + burger grouped at the top-right — burger SMALLER
   and on the far right, cart immediately to its LEFT (client request). The burger
   lives in nav.main_menu, which Enfold's bottom-nav header positions ABSOLUTELY
   (so it can't be floated). Pin that nav to the right edge, scale the oversized
   hamburger down, and give the float:right cart a right-margin so it clears the
   (out-of-flow) burger and sits just to its left. The px below are a first cut —
   fine-tuned against a real mobile screenshot. */
@media only screen and (max-width: 989px) {
	#header_main .inner-container nav.main_menu {
		left: auto !important;
		right: 6px !important;
	}
	#header_main .av-burger-menu-main .av-hamburger {
		transform: scale(0.6);
		transform-origin: right center;
	}
	#header_main #menu-item-shop {
		float: right !important;
		margin-right: 42px !important;
	}
}

/* J5) Mobile (≤767px): kill the Enfold "last menu item" right-spacing
   (padding-right:13px + margin-right:20px) that pushes the burger left into the
   cart and makes the two overlap. With both zeroed the burger sits flush to the
   right and clears the cart. (Client-identified rule.) */
@media only screen and (max-width: 767px) {
	.responsive.html_cart_at_menu #top .main_menu .menu > li:last-child {
		padding-right: 0 !important;
		margin-right: 0 !important;
	}
}

/* -------------------------------------------------------------------------
   K) Client feedback r6 — cart simplification + bulk discount
   ---------------------------------------------------------------------- */

/* The "verzendopties worden geüpdatet" text is filtered away (denico-features)
   but the <p> itself remains (site JS toggles it) — flatten its box. */
.woocommerce-cart p.woocommerce-shipping-destination {
	margin: 0;
	padding: 0;
}

/* Free-shipping progress bar (FS "LFFS progress bar", enabled per method in
   the shipping settings). The plugin's default is a white track with a white
   fill — invisible inside the theme's light notice box. Grey track, teal fill. */
#top .fs-free-shipping-notice-progress-bar {
	border: none !important;
	background: #dfe3df;
	height: 8px;
}
#top .fs-free-shipping-notice-progress-bar > span {
	background-color: var(--denico-teal) !important;
	border-radius: 10px;
	min-width: 6px; /* a sliver of teal even at 1–2% */
}
.fs-free-shipping-notice-and-button-wrapper {
	row-gap: 6px;
}

/* Bulk-discount table on the product page. Enfold gives tables borders and
   striped rows — the #top resets beat that (avia table styles carry #top). */
.denico-bulk-table {
	margin: 14px 0 18px;
	max-width: 340px;
	border: 1px solid #dddfdc;
	border-radius: var(--denico-radius-sm);
	padding: 12px 14px;
	font-size: 0.92em;
}
.denico-bulk-table__title {
	font-weight: 600;
	color: #333;
	margin-bottom: 4px;
}
#top .denico-bulk-table table {
	margin: 0;
	border: none;
	width: 100%;
	background: transparent;
}
#top .denico-bulk-table tr,
#top .denico-bulk-table td {
	border: none !important;
	background: transparent !important;
	padding: 3px 0 !important;
}
#top .denico-bulk-table td:last-child {
	text-align: right;
	font-weight: 600;
	color: var(--denico-teal-dark);
}
.denico-bulk-table__note {
	margin-top: 6px;
	color: #6c7280;
	font-size: 0.9em;
	line-height: 1.45;
}

/* -------------------------------------------------------------------------
   L) Client feedback r9 — WooCommerce show/hide-password toggle, hidden.
   WooCommerce injects <button class="show-password-input"> next to every
   password field from its own JS. Enfold empties woocommerce_enqueue_styles
   (parent config-woocommerce/config.php), so WC's styling for it never loads
   and it renders with raw user-agent chrome: a 4x4px grey button with a 2px
   outset border, position:static, so it drops BELOW the field instead of
   sitting inside it. That is the "2 rare rondjes" the client reported on
   /mijn-account/ (login + register) — it is on live too, WC changed the
   element from a <span> to a <button>. Client asked for it gone.
   The wrapper <span class="password-input"> is display:inline and holds only
   the input, so hiding the button moves nothing else.
   ---------------------------------------------------------------------- */
.show-password-input {
	display: none;
}