/*
Theme Name:   Geus 2026
Theme URI:    https://geusdiervoeding.nl
Description:  Nieuwe vormgeving van Geus Diervoeding (najaar 2026). Eigen thema, los van Flatsome; neemt alles over uit het vorige childthema. De vormgeving staat in assets/css/g26.css.
Author:       Geus Diervoeding
Version:      0.7.33
Requires PHP: 8.1
Text Domain:  geus-2026
*/

/* Hieronder: de regels van het vorige childthema (flatsome-child), ongewijzigd overgenomen. */
/*************** ADD CUSTOM CSS HERE.   ***************/

.page-id-149897 #secondary.widget-area{
	padding:15px;
	border: 2px solid #DDD!important;
}
.page-id-149897 #secondary.widget-area .widget-title {
	text-transform: capitalize;
    color: #000;
    font-weight: 700;
	font-size:18px;
	cursor: pointer;
    margin: 0!important;
    overflow: hidden;
    padding-right: 50px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: normal;
	font-family: "Baloo 2", sans-serif;
}

.fs-wrap, .fs-label-wrap{
	display:flex;
	width:100%;
}
.fs-options{
	padding-top:10px;
	padding-bottom:10px;
}
.nav-dropdown .ux-menu-link__link{
	min-height:1.5em;
}

/* Hide duplicate payment icons. */
.payment-icons[aria-label="Payment icons"] {
  display: none !important;
}

/* Off-canvas (gecentreerd) mobiel menu: geen extra ruimte bovenin. */
.off-canvas-center .mfp-content {
  padding-top: 0;
}

/* Footer styles */

@media only screen and (max-width: 849px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
.hp-new-prods-cont div.products > div.product:last-of-type,
.hp-sale-prods-cont div.products > div.product:last-of-type {
	display:block;
}
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
ul.brand-thumbnails.columns-4{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
}

/* ============================================================
   Quick view (Flatsome lightbox) — Geus restyle
   Markup: child override woocommerce/content-single-product-lightbox.php
   (brand-eyebrow boven de titel; merkregel onderaan verwijderd via functions.php)
   ============================================================ */

/* Kaart: afgeronde hoeken, zachte schaduw */
/* De zichtbare kaart is Flatsome's .lightbox-content (witte bg + schaduw).
   Daar zetten we afronding, breedte én schaduw op, zodat links en rechts
   exact dezelfde hoeken hebben. Alleen de PRODUCT-lightbox, niet andere. */
.product-lightbox.lightbox-content {
	max-width: 1100px;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}

/* Geen dubbele kaart op de binnencontainer (afronding/schaduw zit nu op
   .lightbox-content hierboven) */
.product-quick-view-container {
	background: transparent;
	box-shadow: none;
}

/* Galerij: witte ruimte rondom het beeld zodat het niet tegen de (afgeronde)
   kaartrand plakt en de linkerhoeken niet worden afgesneden */
.product-quick-view-container .product-gallery {
	background: #fff;
	display: flex;
	align-items: center;
	/* Flatsome's .row-collapse>.col zet padding:0 !important — daarom hier ook !important */
	padding: 22px !important;
}
/* Slider-viewport niet afronden, anders krijgt het beeld ronde hoeken */
.product-quick-view-container .product-gallery .slider,
.product-quick-view-container .product-gallery .flickity-viewport {
	border-radius: 0 !important;
}
.product-quick-view-container .product-gallery-slider {
	width: 100%;
}

/* Rechterkolom: ruime padding (inline styles zitten niet meer in de override) */
.product-quick-view-container .qv-inner {
	margin: 1.2em;
	padding: 20px 20px;
}

/* Merk-eyebrow boven de titel */
.product-quick-view-container .qv-brand-eyebrow {
	text-transform: uppercase;
	letter-spacing: .09em;
	font-size: 12px;
	font-weight: 700;
	color: #9b948c;
	margin-bottom: 8px;
	font-family: "Baloo 2", sans-serif;
}

/* Titel: groot, vet, strak */
.product-quick-view-container .qv-inner h1 {
	font-size: 30px;
	line-height: 1.15;
	font-weight: 700;
	margin: 0 0 6px;
	color: #1c1c1c;
}
.product-quick-view-container .qv-title-link:hover h1 {
	color: #1c1c1c;
}

/* Geen divider onder de titel (schoner) */
.product-quick-view-container .qv-inner > .is-divider {
	display: none;
}

/* Prijs */
.product-quick-view-container .price {
	font-size: 22px;
	font-weight: 700;
	color: #1c1c1c;
	margin: 4px 0 14px;
}
.product-quick-view-container .price del {
	font-weight: 400;
	opacity: .5;
}
.product-quick-view-container .price ins {
	text-decoration: none;
}

/* Variabele producten: de prijsRANGE bovenaan weghalen — de gekozen
   variatieprijs verschijnt na selectie in het gereserveerde blok eronder.
   Simpele producten houden hun prijs bovenaan. */
.product-quick-view-container .product-type-variable .price-wrapper {
	display: none;
}

/* Korte omschrijving */
.product-quick-view-container .woocommerce-product-details__short-description {
	color: #555;
	font-size: 15px;
	line-height: 1.55;
	margin-bottom: 18px;
}

/* Variant-knoppen wat lucht geven */
/* Variatie-attribuutlabel (bv. "Hoeveelheid"/"Variant"/"Formaat") weghalen — de
   swatches eronder spreken voor zich. Tabel als blokken zodat de swatches de
   volle breedte pakken. */
.product-quick-view-container .variations {
	display: block;
	margin-bottom: 10px;
}
.product-quick-view-container .variations tbody,
.product-quick-view-container .variations tr,
.product-quick-view-container .variations td.value {
	display: block;
	width: 100%;
}
.product-quick-view-container .variations tr {
	margin-bottom: 8px;
}
.product-quick-view-container .variations th.label {
	display: none;
}

/* Rij met aantal + toevoegen (werkt voor simpele én variabele producten,
   zonder de variations-tabel plat te slaan) */
.product-quick-view-container form.cart:not(.variations_form),
.product-quick-view-container .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 0;
	flex-wrap: wrap;
	margin-top: 8px;
}
/* Flatsome zet gap:1em op form.cart + .woocommerce-variation-add-to-cart
   (flatsome-shop.css). Die extra ruimte willen we niet in de quick view — ook
   op het variabele formulier (dat de selector hierboven uitsluit). */
.product-quick-view-container form.cart {
	gap: 0;
}

/* Aantal-selector afgerond */
.product-quick-view-container .quantity {
	border: 1px solid #e3ded8;
	border-radius: 8px;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	/* kleine ruimte naar de Toevoegen-knop (de flex-gap staat nu op 0) */
	margin-right: 10px;
}
.product-quick-view-container .quantity .qty {
	border: 0;
	box-shadow: none;
	background: transparent;
	width: 46px;
}
.product-quick-view-container .quantity .minus,
.product-quick-view-container .quantity .plus {
	border: 0;
	background: transparent;
}

/* Toevoegen-knop: Geus-blauw behouden, prominent en afgerond */
.product-quick-view-container .single_add_to_cart_button {
	border-radius: 6px;
	padding: 0 34px;
	min-height: 50px;
	line-height: 50px;
	font-weight: 700;
	letter-spacing: .02em;
	flex: 1 1 auto;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
/* Winkelwagen-icoon vóór de tekst op de Toevoegen-knop (Flatsome's iconenfont) */
.product-quick-view-container .single_add_to_cart_button::before {
	content: "\e908";
	font-family: "fl-icons" !important;
	font-weight: normal;
	font-size: 1.15em;
	line-height: 1;
	margin-right: 9px;
	vertical-align: -2px;
	display: inline-block;
}

/* Meta: ingetogen en gescheiden van de rest */
.product-quick-view-container .product_meta {
	margin-top: 14px;
	border-top: 0;
	font-size: 12.5px;
	color: #8a847d;
}
.product-quick-view-container .product_meta a {
	color: #6f6962;
}
.product-quick-view-container .product_meta > span {
	display: block;
	margin-bottom: 3px;
}

/* Artikelnummer (SKU) niet tonen in de quick view.
   !important nodig: de .product_meta > span regel hieronder (display:block) is
   specifieker en zou 'm anders weer tonen. */
.product-quick-view-container .sku_wrapper {
	display: none !important;
}

/* Vaste hoogte voor het variatie-prijsblok: zo verspringt de kaart niet wanneer
   je een variatie kiest (prijs + voorraad verschijnen in deze gereserveerde ruimte) */
.product-quick-view-container .single_variation {
	display: block !important;
	/* Vaste hoogte + vergrendelde marge/padding/overflow: zo heeft Woo's
	   slide-animatie bij variatie kiezen/wissen geen effect meer op de hoogte,
	   dus geen korte sprong/flikker meer. */
	height: 64px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}
/* Geen rand/marge tonen zolang er nog geen variatie gekozen is (leeg blok) */
.product-quick-view-container .single_variation:empty {
	border: 0;
	margin: 0;
	padding: 0;
}
.product-quick-view-container .single_variation .price {
	margin: 0 0 4px;
}

/* "Direct afrekenen": volledige breedte, onder de aantalselector + Toevoegen-knop */
.product-quick-view-container .geus-buy-now {
	flex: 1 1 100%;
	width: 100%;
	margin: 12px 0 0;
	border-radius: 6px;
	min-height: 48px;
	line-height: 46px;
	padding: 0 24px;
	font-weight: 700;
	letter-spacing: .02em;
}
.product-quick-view-container .geus-buy-now.disabled,
.product-quick-view-container .geus-buy-now:disabled {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
}

@media only screen and (max-width: 549px) {
	.product-quick-view-container .qv-inner {
		padding: 16px 16px;
	}
	.product-quick-view-container .qv-inner h1 {
		font-size: 24px;
	}
	/* Aantalselector + Toevoegen naast elkaar houden op mobiel: de knop mag
	   krimpen (flex-basis 0 + min-width 0) i.p.v. onder de aantalselector te
	   wrappen. "Direct afrekenen" blijft op een eigen volle regel. */
	.product-quick-view-container .single_add_to_cart_button {
		flex: 1 1 0;
		min-width: 0;
		padding: 0 14px;
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------------
   Header: het hoofdmenu breekt nooit af (18-09-2026)
   Tussen 850 px (vanaf daar toont Flatsome het computermenu) en zo'n
   1010 px was er te weinig ruimte. "OP=OP" en "Voeradvies" sprongen dan
   naar een tweede regel, onder de 70 px hoge header. Het zoekveld had
   een vaste minimumbreedte van 250 px. Nu blijft het menu op één regel
   en krimpt het zoekveld mee tot minimaal 140 px. Boven 1100 px
   verandert er niets.
   ------------------------------------------------------------------ */
@media (min-width: 850px) {
	#masthead .header-inner > .flex-col.flex-grow > .header-nav-main {
		flex-wrap: nowrap;
	}
	#masthead .header-inner > .flex-col.flex-grow > .header-nav-main > li > a {
		white-space: nowrap;
	}
}
@media (min-width: 850px) and (max-width: 1099px) {
	#masthead .header-inner > .flex-col.flex-grow {
		flex: 0 0 auto;
	}
	#masthead .header-inner > .flex-col.hide-for-medium.flex-right {
		flex: 1 1 auto;
		min-width: 140px;
		margin-left: 12px;
	}
	#masthead .header-inner > .flex-col.hide-for-medium.flex-right > .header-nav-main {
		width: 100%;
		flex-wrap: nowrap;
	}
	#masthead .header-search-form {
		min-width: 0;
		width: auto;
		flex: 1 1 auto;
	}
}

/* ------------------------------------------------------------------
   Homepage: de vier blokken onder de welkomstfoto twee aan twee
   tussen 850 en 1099 px (19-09-2026)
   Vanaf 850 px zet Flatsome ze naast elkaar (large-3). Tot zo'n 1085 px
   hield een blok dan minder dan 190 px over voor tekst, en liepen
   "Webwinkelkeurmerk" en het e-mailadres eruit. Onder 850 px staan ze al
   twee aan twee (medium-6), vanaf 1100 px passen ze naast elkaar.
   ------------------------------------------------------------------ */
@media (min-width: 850px) and (max-width: 1099px) {
	.home .row:has(> .col.large-3 .icon-box.featured-box) > .col.large-3 {
		flex-basis: 50%;
		max-width: 50%;
	}
}

/* ------------------------------------------------------------------
   Topbalk links: alle iconen op dezelfde afstand, met een streepje
   ertussen (19-09-2026)
   Tussen de contacticonen zat 27 px met een streepje (22 px marge plus
   een lege <span> met 5 px marge achter elk icoon). Naast "Nieuwsbrief"
   was het 14 px, vóór Facebook 16 px en tussen Facebook en Instagram
   7 px, zonder streepje. Nu overal 22 px, met het streepje van Flatsome
   precies in het midden.
   ------------------------------------------------------------------ */
#top-bar .nav-left > li.header-newsletter-item,
#top-bar .nav-left > li.header-contact-wrapper,
#top-bar .nav-left > li.header-social-icons {
	margin: 0;
	position: relative;
}
#top-bar .nav-left > li.header-contact-wrapper {
	margin-left: 22px;
}
#top-bar .nav-left > li.header-social-icons {
	margin-left: 22px !important; /* Flatsome zet er ml-0 op, en die heeft !important */
}
#top-bar #header-contact > li {
	margin: 0 0 0 22px;
}
#top-bar #header-contact > li:first-child {
	margin-left: 0;
}
#top-bar #header-contact > li > a > span {
	display: none; /* leeg, maar met 5 px marge */
}
#top-bar #header-contact > li > a::after {
	left: -11.5px;
}
#top-bar .header-social-icons .social-icons a {
	margin: 0;
	position: relative;
}
#top-bar .header-social-icons .social-icons a + a {
	margin-left: 22px;
}
#top-bar .nav-left > li.header-contact-wrapper::before,
#top-bar .nav-left > li.header-social-icons::before,
#top-bar .header-social-icons .social-icons a + a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -11.5px;
	height: 15px;
	margin-top: -7.5px;
	border-left: 1px solid rgba(0, 0, 0, .1);
}

/* ------------------------------------------------------------------
   Mijn account (uitgelogd): Facebook- en Google-knop naast "Inloggen"
   en "Registreren" (18-09-2026)
   Nextend Social Login zet ze aan het eind van het formulier, onder
   "Wachtwoord vergeten?", met een lege strook eronder. Het formulier
   wordt een raster. De alinea met de knop doet zelf niet mee
   (display: contents), zodat de knop en de sociale knoppen naast
   elkaar komen. Zonder :has() in de browser blijft alles zoals het was.
   ------------------------------------------------------------------ */
.woocommerce-form-login:has(.nsl-container),
.woocommerce-form-register:has(.nsl-container) {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 12px;
	align-items: center;
}
.woocommerce-form-login:has(.nsl-container) > *,
.woocommerce-form-register:has(.nsl-container) > * {
	grid-column: 1 / -1;
}
.woocommerce-form-login:has(.nsl-container) > p:has(> button[type="submit"]),
.woocommerce-form-register:has(.nsl-container) > p:has(> button[type="submit"]) {
	display: contents;
}
.woocommerce-form-login:has(.nsl-container) > p:has(> button[type="submit"]) > label {
	grid-column: 1 / -1;
}
.woocommerce-form-login:has(.nsl-container) button[type="submit"],
.woocommerce-form-register:has(.nsl-container) button[type="submit"] {
	grid-column: 1;
	margin-bottom: 0;
}
.woocommerce-form-login > div:has(> .nsl-container),
.woocommerce-form-register > div:has(> .nsl-container) {
	grid-column: 2;
	order: 1;
}
.woocommerce-form-login:has(.nsl-container) > .woocommerce-LostPassword {
	order: 2;
	margin-top: .8em;
}
.woocommerce-form-login .nsl-container,
.woocommerce-form-register .nsl-container {
	margin: 0 !important;
}

/* ------------------------------------------------------------------
   App-installatiebalk (Super Progressive Web Apps Pro) (19-09-2026)
   Was een blauwe strook over de hele breedte met "Geus App" op twee
   regels, een rode knop met zwarte letters en een los grijs rondje.
   Nu een witte zwevende kaart: app-icoon, naam met een regel uitleg,
   een knop in logoblauw en een rustig kruisje. De plugin zet zijn
   kleuren inline, vandaar de !important. De plugin centreert de balk
   met een transform; die gaat uit, de kaart centreert met max-width.
   ------------------------------------------------------------------ */
#superpwa-sticky-bar.superpwa-sticky-banner {
	background: #fff !important;
	left: 10px !important;
	right: 10px !important;
	width: auto !important;
	max-width: 460px;
	margin: 0 auto 10px;
	transform: none !important;
	box-sizing: border-box;
	padding: 10px 48px 10px 12px;
	align-items: center;
	border-radius: 16px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .08);
}
#superpwa-sticky-bar .superpwa-cta-btn {
	width: 100%;
}
#superpwa-sticky-bar .superpwa-stky-blk {
	background: transparent !important;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
#superpwa-sticky-bar .superpwa-stky-blk::before {
	content: "";
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: #f7f3ef url(/wp-content/uploads/2026/04/Logo-192x192-1.png) center / cover no-repeat;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
#superpwa-sticky-bar .superpwa-stky-blk h2 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: #353535 !important;
	font-family: "Baloo 2", sans-serif;
	font-weight: 700;
	font-size: 16px !important;
	line-height: 1.15;
	text-align: left;
}
#superpwa-sticky-bar .superpwa-stky-blk h2::after {
	content: "Sneller bestellen vanaf je beginscherm";
	display: block;
	margin-top: 2px;
	font-family: Quicksand, sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 1.3;
	color: #6b6b6b;
}
#superpwa-sticky-bar .superpwa-butn {
	flex: none;
	margin: 0;
	padding: 11px 16px;
	background: #12789f !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(18, 120, 159, .35);
	cursor: pointer;
}
#superpwa-sticky-bar .superpwa_add_home_close {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	line-height: 30px;
	text-align: center;
	font-size: 22px;
	color: #8a8a8a;
	background: transparent !important;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	text-decoration: none;
}
/* Zolang de cookiebanner (Complianz) open staat, wacht de appbalk. Hij lag
   eroverheen, op de knop "Bekijk voorkeuren", en die moet bereikbaar zijn. */
body:has(.cmplz-cookiebanner.cmplz-show) #superpwa-sticky-bar {
	display: none !important;
}

/* ------------------------------------------------------------------
   Footer op de telefoon korter (19-09-2026)
   De vier blokken stonden onder elkaar met letters van 16 px: 1164 px
   footer op elke pagina. Nu staan Info en Service naast elkaar, met
   kleinere letters en minder ruimte ertussen: zo'n 770 px.
   ------------------------------------------------------------------ */
@media (max-width: 549px) {
	.footer-1 .row > #nav_menu-6,
	.footer-1 .row > #nav_menu-7 {
		flex-basis: 50%;
		max-width: 50%;
		padding-right: 10px;
	}
	.footer-1 .widget {
		margin-bottom: 18px;
	}
	.footer-1 .widget .widget-title {
		font-size: 14px;
		margin-bottom: 4px;
	}
	.footer-1 .widget .is-divider {
		margin: 6px 0 8px;
	}
	.footer-1 .widget_nav_menu li {
		font-size: 13.5px;
		line-height: 1.3;
	}
	.footer-1 .widget_nav_menu li > a {
		display: block;
		padding: 5px 0;
	}
	.footer-1 #block_widget-6 .icon-box-text,
	.footer-1 #block_widget-6 .icon-box-text * {
		font-size: 13.5px;
		line-height: 1.45;
	}
	.footer-widgets.footer-1 {
		padding-top: 20px;
	}
}