/* ==========================================================================
   Rover Nature - Tallow PDP - LIVE laag
   Laadt NA pdp-base/v2/v3. Bevat alleen wat er anders is dan het concept:
   1. het concept had z'n eigen header/footer, live komt die van Elementor
   2. echte WooCommerce-onderdelen (reviews, notices) in de huisstijl
   3. sticky-offset wordt gemeten (§57), nooit hardgecodeerd
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scope-reparaties: de concept-CSS heeft globale resets (body, a, button,
   h1-h4, img, p). Die mogen de Elementor-header/footer/popup niet raken.
   -------------------------------------------------------------------------- */
.elementor-location-header,
.elementor-location-footer,
.elementor-location-popup {
	font-family: var( --e-global-typography-text-font-family, inherit );
	line-height: normal;
	letter-spacing: normal;
}
.elementor-location-header p,
.elementor-location-footer p,
.elementor-location-popup p {
	margin: 0 0 1em;
}
.elementor-location-header h1, .elementor-location-header h2,
.elementor-location-header h3, .elementor-location-header h4,
.elementor-location-footer h1, .elementor-location-footer h2,
.elementor-location-footer h3, .elementor-location-footer h4,
.elementor-location-popup  h1, .elementor-location-popup  h2,
.elementor-location-popup  h3, .elementor-location-popup  h4 {
	font-family: inherit;
	color: inherit;
	line-height: inherit;
}
/* Elementor-knoppen mogen hun eigen achtergrond/rand houden */
.elementor-location-header button,
.elementor-location-footer button,
.elementor-location-popup button {
	cursor: pointer;
}

/* het concept had een eigen mini-cart-teller; die bestaat live niet */
.rn-pdp .hdr, .rn-pdp .ftr, .rn-pdp .announce, .rn-pdp .concept, .rn-pdp .devnote { display: none !important; }

/* --------------------------------------------------------------------------
   2. Mobiel: nooit horizontaal kunnen scrollen (§51). `clip` i.p.v. `hidden`,
   anders sneuvelt elke position:sticky (galerij + Elementor-header).
   -------------------------------------------------------------------------- */
html:has(body.rn-tallow-pdp),
body.rn-tallow-pdp {
	overflow-x: hidden; /* fallback oude Safari */
	overflow-x: clip;
}
body.rn-tallow-pdp .rn-pdp > * { min-width: 0; }
body.rn-tallow-pdp .rn-pdp h1,
body.rn-tallow-pdp .rn-pdp h2,
body.rn-tallow-pdp .rn-pdp .price { overflow-wrap: anywhere; }

/* anker-sprongen (#voordelen, #faq) niet onder de sticky header */
html:has(body.rn-tallow-pdp) { scroll-padding-top: calc(var(--rn-hdr, 78px) + 16px); }

/* --------------------------------------------------------------------------
   3. Sticky galerij: offset gemeten in JS (--rn-hdr), token als fallback
   -------------------------------------------------------------------------- */
.rn-pdp .gal { top: calc(var(--rn-hdr, 78px) + 22px); }

/* --------------------------------------------------------------------------
   4. Buybox-formulier: het is nu een echte <form class="cart">, die mag geen
   extra ruimte of grid-gedrag introduceren.
   -------------------------------------------------------------------------- */
.rn-pdp form.rn-cart { margin: 0; padding: 0; border: 0; display: block; }
.rn-pdp form.rn-cart .block:first-of-type { border-top: 1px solid var(--line); }

/* WooCommerce add-on-plugins hangen aan woocommerce_before/after_add_to_cart_button.
   Hun markup krijgt een eigen wrapper zodat het geen grid-cel claimt (§56). */
.rn-pdp .rn-hookzone { min-width: 0; margin: 0 0 14px; }
.rn-pdp .rn-hookzone:empty { display: none; margin: 0; }

/* knop kan disabled raken als een variant uitverkocht is */
.rn-pdp .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* variant/bundel uitverkocht */
.rn-pdp .variant.is-disabled,
.rn-pdp .bundle.is-disabled { opacity: .4; cursor: not-allowed; }
.rn-pdp .variant.is-disabled .variant__per::after { content: " · uitverkocht"; }

/* --------------------------------------------------------------------------
   5. Cross-sell: het hoofd-item is een spiegel van de buybox, geen keuze
   -------------------------------------------------------------------------- */
.rn-pdp .xitem.is-locked { cursor: default; }
.rn-pdp .xitem .xprice s { font-size: 12px; opacity: .45; margin-right: 8px; font-weight: 600; }

/* --------------------------------------------------------------------------
   6. Echte WooCommerce-reviews in de huisstijl
   -------------------------------------------------------------------------- */
.rn-pdp #reviews .woocommerce-Reviews-title { display: none; }
.rn-pdp #reviews .commentlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 820px) { .rn-pdp #reviews .commentlist { grid-template-columns: 1fr; } }
.rn-pdp #reviews .commentlist li { background: var(--cream); border: 1px solid var(--line); padding: 24px; }
.rn-pdp #reviews .comment_container { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.rn-pdp #reviews .comment_container img.avatar { width: 52px; height: 52px; border-radius: 99px; }
.rn-pdp #reviews .comment-text { min-width: 0; }
.rn-pdp #reviews .woocommerce-review__author { font-family: var(--h); font-weight: 800; font-size: 15px; }
.rn-pdp #reviews .woocommerce-review__published-date { font-size: 12px; opacity: .5; margin-left: 8px; }
.rn-pdp #reviews .woocommerce-review__verified { font-size: 11px; color: var(--green); font-family: var(--h); font-weight: 700; }
.rn-pdp #reviews .star-rating { color: var(--gold); font-size: 13px; }
.rn-pdp #reviews .description p { font-size: 14.5px; line-height: 1.65; opacity: .85; }

.rn-pdp #review_form_wrapper { max-width: 720px; margin: 40px auto 0; background: var(--cream); border: 1px solid var(--line); padding: clamp(24px, 3vw, 36px); }
.rn-pdp #review_form_wrapper .comment-reply-title { font-family: var(--h); font-weight: 800; font-size: 20px; display: block; margin-bottom: 6px; }
.rn-pdp #review_form_wrapper .comment-form-rating label,
.rn-pdp #review_form_wrapper .comment-form-comment label,
.rn-pdp #review_form_wrapper .comment-form-author label,
.rn-pdp #review_form_wrapper .comment-form-email label {
	display: block; font-family: var(--h); font-size: 11px; font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase; margin-bottom: 7px;
}
.rn-pdp #review_form_wrapper input[type="text"],
.rn-pdp #review_form_wrapper input[type="email"],
.rn-pdp #review_form_wrapper textarea {
	width: 100%; background: #fff; border: 1.5px solid var(--line);
	padding: 13px 14px; font-family: var(--b); font-size: 15px; border-radius: var(--radius);
}
.rn-pdp #review_form_wrapper input:focus,
.rn-pdp #review_form_wrapper textarea:focus { outline: 0; border-color: var(--ink); }
.rn-pdp #review_form_wrapper .form-submit input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--h); font-size: 13px; font-weight: 800; letter-spacing: .12em;
	text-transform: uppercase; padding: 16px 30px; border: 0; cursor: pointer;
	background: var(--ink); color: var(--cream); border-radius: var(--radius); width: auto;
}
.rn-pdp #review_form_wrapper .form-submit input[type="submit"]:hover { background: var(--ink-3); }
.rn-pdp #reviews .stars a { color: var(--gold); }

/* --------------------------------------------------------------------------
   7. WooCommerce notices op deze pagina
   -------------------------------------------------------------------------- */
.rn-pdp .woocommerce-notices-wrapper .woocommerce-message,
.rn-pdp .woocommerce-notices-wrapper .woocommerce-error,
.rn-pdp .woocommerce-notices-wrapper .woocommerce-info {
	background: var(--cream); border-left: 3px solid var(--gold);
	padding: 14px 18px; font-size: 14px; list-style: none; margin: 18px 0 0;
}
.rn-pdp .woocommerce-notices-wrapper .woocommerce-error { border-left-color: var(--wine); }

/* --------------------------------------------------------------------------
   8. Toast krijgt live een echte link naar de winkelwagen
   -------------------------------------------------------------------------- */
.rn-toast-link {
	display: inline-block; margin-left: 10px; border-bottom: 1px solid var(--gold);
	color: var(--gold); font-weight: 800;
}
.toast.is-error { border-left-color: var(--wine); }

/* de sticky balk mag niet over een Elementor-cookiebalk heen vallen */
body.rn-tallow-pdp .cli-bar-container { z-index: 90; }

/* --------------------------------------------------------------------------
   9. Bezig-staat op de add-to-cart-knoppen
   -------------------------------------------------------------------------- */
.rn-pdp [data-atc].is-busy { pointer-events: none; opacity: .6; }
.rn-pdp [data-atc].is-busy::after {
	content: ""; width: 14px; height: 14px; margin-left: 10px; border-radius: 99px;
	border: 2px solid currentColor; border-top-color: transparent;
	animation: rnSpin .7s linear infinite; display: inline-block;
}
@keyframes rnSpin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   10. Visueel verborgen, maar WEL focusbaar en WEL door WooCommerce gelezen.
   Geen display:none (§7): de <select name="attribute_aantal-ml"> is het echte
   WooCommerce-veld. Zonder JS maakt het <noscript>-blok in de template hem
   weer zichtbaar; die regels staan daar, niet hier, zodat ze alleen bestaan
   als JS ook echt uit is.
   -------------------------------------------------------------------------- */
.rn-pdp .rn-vh {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
/* toetsenbordgebruikers: bij focus weer in beeld, netjes gestyled */
.rn-pdp select.rn-vh:focus,
.rn-pdp select.rn-vh:focus-visible {
	position: static !important;
	width: auto; height: auto;
	margin: 12px 0; padding: 12px 14px;
	clip: auto; clip-path: none;
	overflow: visible;
	background: #fff; border: 1.5px solid var(--ink);
	font-family: var(--b); font-size: 15px;
}

/* --------------------------------------------------------------------------
   11. Progressive enhancement (§63): elke knop staat STANDAARD zichtbaar.
   Het <noscript><style>-blok in de template verbergt wat JS nodig heeft
   (bundels, qty-stepper, cross-sell-totaal) en toont de echte select.
   Dus hier géén display:none - dat zou de controls ook mét JS slopen.
   -------------------------------------------------------------------------- */
.rn-pdp .rn-nojs-note { display: none; }

/* --------------------------------------------------------------------------
   12. Sticky balk: alles op één rij.

   Het concept zet `grid-template-columns:60px 1fr auto auto` - vier kolommen,
   terwijl de balk vijf kinderen heeft: afbeelding, titel, serum-chip, prijs,
   knop. Het vijfde kind (de knop) viel daardoor op een tweede rij. Onder
   760px speelt hetzelfde: twee kolommen, drie zichtbare kinderen.

   Oplossing is bewust flex met `nowrap` en niet een vijfde kolom: het aantal
   kinderen varieert. De serum-chip verdwijnt als het serum uitverkocht is
   (partial rendert 'm dan niet) én is verborgen onder 820px. Een vaste
   kolomtelling klopt dan weer niet; flex telt vanzelf mee.
   -------------------------------------------------------------------------- */
.rn-pdp .sticky__in {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 18px;
}
.rn-pdp .sticky__in > img { flex: 0 0 60px; }

/* De titel is het enige element dat mag krimpen. Zonder `min-width:0` weigert
   een flex-item kleiner te worden dan zijn inhoud en duwt het de knop alsnog
   uit beeld. */
.rn-pdp .sticky__t {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.rn-pdp .sticky__t em {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Chip, prijs en knop houden hun natuurlijke breedte. */
.rn-pdp .sticky__add,
.rn-pdp .sticky__p { flex: 0 0 auto; }
.rn-pdp .sticky .btn { flex: 0 0 auto; white-space: nowrap; }

/* Mobiel: geen afbeelding en geen chip meer, dus titel + prijs + knop. Type
   iets kleiner zodat de titel niet meteen tot een ellipsis wordt gereduceerd. */
@media (max-width: 760px) {
	.rn-pdp .sticky__in { gap: 12px; }
	.rn-pdp .sticky__p { font-size: 17px; }
	.rn-pdp .sticky .btn { padding: 14px 16px; }
}
@media (max-width: 420px) {
	.rn-pdp .sticky__in { gap: 10px; }
	.rn-pdp .sticky__t { font-size: 13px; }
	.rn-pdp .sticky__p { font-size: 15px; }
	.rn-pdp .sticky .btn { padding: 13px 14px; font-size: 11px; }
}

/* --------------------------------------------------------------------------
   13. De rode labels ("Meest gekozen", "Samen 15% korting").

   In het concept zijn dit absoluut gepositioneerde vlaggetjes op `top:-9px`
   resp. `top:-11px`, terwijl de kaart maar 15-16px padding aan de bovenkant
   heeft. Het label sneed daardoor door de titel van de kaart heen, en op
   mobiel (waar de tekst naar twee regels valt) werd het onleesbaar.

   Hier worden ze een ECHT rasteritem op een eigen eerste rij: het label staat
   altijd boven de inhoud, ongeacht de hoogte van de kaart of de lengte van de
   tekst. Ze zijn in de markup al het eerste kind, dus `grid-column:1 / -1`
   levert vanzelf rij 1 op. Meteen ook iets groter en met minder letterafstand,
   want de klant las 9,5px met .14em tracking slecht.

   Bewust in deze laag en niet in pdp-base/v3: die twee blijven het concept.
   -------------------------------------------------------------------------- */
.rn-pdp .bundle__save,
.rn-pdp .addon__save {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	grid-column: 1 / -1;
	justify-self: start;
	align-self: start;
	margin: 0;
	padding: 5px 10px;
	font-size: 10.5px;
	letter-spacing: .08em;
	line-height: 1.25;
	white-space: nowrap;
	border-radius: 2px;
}

/* De kaart heeft er nu een rij bij. `gap:14px` gold voor beide assen en gaf
   te veel lucht tussen het label en de inhoud; alleen de rij-as terugbrengen. */
.rn-pdp .bundle,
.rn-pdp .addon {
	row-gap: 9px;
	padding-top: 14px;
}

/* Smalle schermen: het label mag daar wel afbreken in plaats van de kaart
   breder te maken dan het scherm. */
@media (max-width: 420px) {
	.rn-pdp .bundle__save,
	.rn-pdp .addon__save {
		white-space: normal;
		font-size: 10px;
	}
}

/* --------------------------------------------------------------------------
   14. Twee donkere secties direct onder elkaar.
   Voor/na en voordelen zijn omgewisseld, dus volgt voordelen (sec--dark) nu
   direct op gebruik (sec--dark). Zonder naad lezen die twee als een blok.
   .trust valt hier bewust buiten: dat is een balk, geen sectie.
   -------------------------------------------------------------------------- */
.rn-pdp .sec--dark + .sec--dark { border-top: 1px solid rgba(255,255,255,.08); }