/* Shop archive + single product redesign.
   Archive/category/tag pages render Hestia's OWN .card.card-product markup
   (hestia_woocommerce_template_loop_product_title() in
   inc/compatibility/woocommerce/functions.php) - NOT stock WooCommerce loop
   markup. The front-page #products shop section now renders the SAME
   .card-product markup (forced by shop-cards-redesign.php regardless of
   whether Hestia_Woo_Shop_Page::run() is active), so this file covers it
   too via the #products scope. Scopes used:
   - body.woocommerce.archive  -> shop / product category / tag pages
   - body.single-product       -> single product page + its related/upsell
                                  loops (same .card-product markup)
   - #products                 -> front-page shop section (shortcode loop,
                                  same .card-product markup - card rules
                                  only, page-level rules stay body-scoped)
   The grid itself (display:grid + .columns-N templates in woocommerce.css)
   is driven by the customizer column count and is deliberately left alone on
   desktop - only the card inside each cell is restyled.
   !important appears only where an existing theme rule was confirmed to
   out-specify this file (Hestia's own selectors noted inline). */

body.woocommerce.archive,
body.single-product,
#products,
.woocommerce-photo-reviews-shortcode,
.shortcode-wcpr-modal-light-box {
	--sar-accent: var( --hestia-primary-color, #e91e63 );
	--sar-accent-soft: rgba( 233, 30, 99, 0.09 );
	--sar-accent-soft: color-mix( in srgb, var( --sar-accent ) 9%, #ffffff );
	--sar-ink: #241f2b;
	--sar-muted: #8b8592;
	--sar-line: #eceaf0;
	--sar-gold: #f5a623;
	--sar-success: #1b8a5a;
	--sar-shadow: 0 1px 3px rgba( 40, 20, 50, 0.05 );
	--sar-shadow-lift: 0 24px 48px -18px rgba( 40, 20, 50, 0.26 ), 0 6px 14px rgba( 40, 20, 50, 0.06 );
}

/* Slightly warmer archive canvas than Hestia's flat #f0f0f0 */
body.woocommerce.archive .main {
	background-color: #f6f4f8;
}

/* ============================= ARCHIVE CARDS ========================== */

/* Card shell - flex column. Sized to its own content (not stretched to
   the grid row height): stretching + a bottom-pinned price left a big
   empty gap between the text and the price on shorter cards, which read
   as a layout bug (user request 2026-07-21). Cards now hug their content
   with the price sitting directly under the text. */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card.card-product {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid var( --sar-line );
	border-radius: 20px;
	box-shadow: var( --sar-shadow );
	text-align: left;
	transition: transform 0.28s cubic-bezier( 0.2, 0.8, 0.25, 1 ), box-shadow 0.28s ease, border-color 0.28s ease;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card.card-product:hover {
	transform: translateY( -6px );
	border-color: transparent;
	box-shadow: var( --sar-shadow-lift );
}

/* Hestia's pop-and-glow hover (customizer image-hover style) lifts ONLY
   the image with a heavy shadow - fold that into the whole-card lift
   above instead so the card doesn't tear apart on hover. Other hover
   styles (zoom, swap-images, ...) act on the img and remain untouched. */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product.pop-and-glow:hover .card-image {
	transform: none;
	box-shadow: none;
}

/* Card style "plain" (customizer) pops the image out of the card with a
   negative margin - keep it flush inside the rounded card instead. */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product.card-plain .card-image {
	margin-top: 0;
	padding: 0;
}

/* Image block, flush with the rounded top corners.
   overflow:hidden needs !important: .card-product.pop-and-glow .card-image
   sets overflow:visible (woocommerce.css). */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .card-image {
	position: relative;
	display: block;
	flex: none; /* flex item of the card column - must never grow/shrink past the image */
	height: auto; /* style.css (material kit) sets .card .card-image { height: 60% } - CDP-confirmed */
	/* Own stacking layer ABOVE the stretched title link's ::after (z1):
	   without this the quick-add button lost hit-testing to the overlay
	   on touch viewports (verified via elementsFromPoint on the live
	   site). Everything inside stays clickable: the image's own <a> goes
	   to the product page just like the overlay would. */
	z-index: 2;
	margin: 0;
	border-radius: 19px 19px 0 0;
	overflow: hidden !important;
	box-shadow: none;
	background: #f6f4f8;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .card-image > a {
	display: block;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .card-image a img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Customizer "Swipe Next Image" hover style (swap-images): the card gets
   a .swap-images class and a second <img> (the gallery's first image) is
   appended inside the thumbnail link. The theme normally hides that
   second image and reveals it on hover (assets/sass/6_woocommerce/_card.scss),
   but the generic `.card-image a img { display:block }` rule above was
   overriding its display:none, so BOTH images showed at once. These
   rules restore the one-at-a-time swap at higher specificity (the extra
   .swap-images class), keeping my block/cover sizing. Only active when
   the customizer option is on AND the product actually has a gallery
   image (Hestia only adds the class then), so single-image products are
   unaffected. */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product.swap-images .card-image a img:nth-of-type( 2 ) {
	display: none;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product.swap-images:hover .card-image a img:first-child {
	display: none;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product.swap-images:hover .card-image a img:nth-of-type( 2 ) {
	display: block;
}

/* Sale flash - small, subtle corner tag (concept style, sized like the
   wc-product-badges plugin badges). Overrides Hestia's oversized
   top:-25px/left:-25px placement. Background color keeps coming from the
   theme's dynamic accent CSS. */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product span.onsale {
	position: absolute;
	top: 10px;
	right: 10px;
	left: auto;
	bottom: auto;
	z-index: 3;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 4px 9px;
	border-radius: 6px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 1.6;
	text-transform: uppercase;
	box-shadow: 0 3px 8px rgba( 0, 0, 0, 0.16 );
}

/* wc-product-badges plugin (WPCBM): a product can carry SEVERAL badges
   (e.g. "Sale", "Bestseller", "-25%") inside one .wpcbm-badges stack. On
   the front-page shop cards (#products, the [sale_products] loop) those
   badges piled onto the same absolute corner on MOBILE, hiding every badge
   after the first. That overlap only happens there, so the fix is scoped to
   the front page AND to mobile only - desktop, and the shop/category/product
   pages, keep the plugin's own badge rendering completely untouched. The
   column layout changes nothing unless a second badge actually exists. */
/* Selector deliberately does NOT require .card-product - it matches whether
   the front-page section renders Hestia's rebuilt cards OR stock WooCommerce
   markup, so the fix still applies if the loop rebuild isn't active. The
   !important flags are needed because the plugin absolutely-positions each
   badge onto the same corner (so they piled on top of each other); forcing
   the container to a flex column and every badge back into normal flow is
   what actually separates them. */
@media ( max-width: 991px ) {
	#products ul.products li.product .wpcbm-badges {
		position: absolute !important;
		top: 10px;
		right: 10px;
		left: auto;
		bottom: auto;
		z-index: 3;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-end !important;
		gap: 5px;
		width: auto !important;
		height: auto !important;
		margin: 0;
		pointer-events: none;
	}

	#products ul.products li.product .wpcbm-badges .wpcbm-badge {
		position: static !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		margin: 0 !important;
		float: none !important;
		transform: none !important;
	}
}

/* Variable/external products render a "Kies opties" link (to the product
   page) instead of an AJAX add-to-cart, so clicking the overlay button
   loaded the product page ("redirects on some products"). Hide the overlay
   button on those cards (JS adds .sar-quick-noadd) so the black basket
   button ONLY ever adds to the basket; the whole card still links to the
   product page for choosing options. */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product.sar-quick-noadd .hestia-sar-quick {
	display: none !important;
}

/* Quick add overlay (shop-archive-redesign.php prints WooCommerce's own
   loop add-to-cart link inside .hestia-sar-quick, inside .card-image). */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .hestia-sar-quick {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 4;
	opacity: 0;
	transform: translateY( 10px );
	transition: opacity 0.24s ease, transform 0.24s cubic-bezier( 0.2, 0.8, 0.25, 1 );
	text-align: center;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product:hover .hestia-sar-quick,
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .hestia-sar-quick:focus-within {
	opacity: 1;
	transform: none;
}

/* !important on the box model + colors: the theme's dynamic accent CSS
   paints `.woocommerce a.button` variants with accent background and
   padding at high specificity (class-hestia-woocommerce-manager.php). */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .hestia-sar-quick .button {
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 11px 12px !important;
	border: none;
	border-radius: 12px !important;
	background: #241f2b !important;
	color: #ffffff !important;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none !important;
	letter-spacing: 0;
	box-shadow: 0 10px 20px -8px rgba( 20, 10, 30, 0.5 ) !important;
	transition: filter 0.15s ease;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .hestia-sar-quick .button:hover {
	filter: brightness( 1.35 );
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .hestia-sar-quick .button.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* "View cart" confirmation that WooCommerce injects after an AJAX add
   (Hestia's MutationObserver wraps it in .hestia-view-cart-wrapper and
   normally absolute-positions it under the card - keep it in the flow
   of the overlay instead, as a small white pill). */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .hestia-sar-quick .hestia-view-cart-wrapper {
	position: static !important;
	bottom: auto;
	margin-top: 8px;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .hestia-sar-quick .added_to_cart {
	display: inline-block;
	padding: 7px 14px !important;
	border-radius: 999px !important;
	background: #ffffff !important;
	color: var( --sar-ink ) !important;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: none !important;
	box-shadow: 0 4px 10px rgba( 20, 10, 30, 0.25 ) !important;
}

/* Content block */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .content {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: 13px 16px 15px;
	text-align: left;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .content .category {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: left;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .content .category a {
	color: var( --sar-muted );
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .content .category a:hover {
	color: var( --sar-accent );
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product h4.card-title {
	margin: 4px 0 5px;
	width: 100%;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center; /* product name centered in the card (user request 2026-07-21) */
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product h4.card-title a {
	color: var( --sar-ink );
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product:hover h4.card-title a {
	color: var( --sar-accent );
}

/* Short description (Hestia prints .card-description from the excerpt
   when one exists) - clean 2-line clamp. */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .card-description {
	display: block;
	/* full description shown - no 2-line clamp / "meer" toggle (user request
	   2026-07-22: show the whole description instead of a read-more). */
	margin: 0 0 9px;
	font-size: 12px;
	line-height: 1.45;
	color: var( --sar-muted );
	text-align: left;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .card-description p {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

/* Star rating row - stars + "4,8 (12)" average/count (re-added by
   shop-archive-redesign.php; the JS moves the whole row to the top of
   .content, in the slot the removed category line vacated - the
   direct-child rule below is the graceful fallback position when JS
   hasn't run). */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .hestia-sar-rating {
	/* inline-flex + align-self center: the link hugs just the stars +
	   count and centers in the card, so only the stars are the click
	   target (user request 2026-07-21) - clicking them opens #reviews. */
	display: inline-flex;
	align-items: center;
	align-self: center;
	position: relative;
	z-index: 2; /* above the whole-card title-link overlay (::after, z1) */
	gap: 5px;
	margin: 1px 0 4px;
	font-size: 11px;
	color: var( --sar-muted );
	text-decoration: none;
	cursor: pointer;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product a.hestia-sar-rating:hover .hestia-sar-rcount {
	color: var( --sar-accent );
	text-decoration: underline;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .hestia-sar-rating .star-rating {
	float: none;
	display: inline-block;
	margin: 0;
	font-size: 12px;
	color: var( --sar-gold );
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .hestia-sar-rcount {
	font-weight: 600;
	line-height: 1;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product > .hestia-sar-rating {
	margin: 0 16px 14px;
}

/* Price row sits directly under the text (small fixed gap, not pushed to
   the card bottom - see card shell note about the gap).
   display:flex needs !important: _card.scss sets display:table on .footer
   and display:table-cell !important on .price/.stats. */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .footer {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	margin-top: 2px;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .footer .price {
	display: block !important;
	text-align: left;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .footer .price h4 {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 6px;
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	color: var( --sar-ink );
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .footer .price h4 del {
	font-size: 12px;
	font-weight: 500;
	color: var( --sar-muted );
	opacity: 1;
}

/* Hestia's own icon-only add-to-cart in the footer is replaced by the
   quick-add overlay - exactly one visible add-to-cart per card. */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .footer .stats {
	display: none !important;
}

/* Decorative "go to product" arrow chip on the price row. */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .footer::after {
	content: "\2192";
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var( --sar-accent-soft );
	color: var( --sar-accent );
	font-size: 15px;
	transition: transform 0.15s ease;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product:hover .footer::after {
	transform: translateX( 2px );
}

/* Whole card clickable -> product page. Handled in hestia-shop-archive.js
   (a delegated click that navigates to the product ONLY when the click is
   not on an interactive element), NOT a stretched invisible overlay link:
   the old ::after overlay covered the card and competed with the "Add to
   cart" button, so clicking the button sometimes opened the product page
   instead of adding to the cart. The cursor hint below keeps the whole
   card feeling clickable; real links/buttons inside keep their own
   behaviour untouched. */
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product {
	cursor: pointer;
}

:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product a,
:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product button {
	cursor: pointer;
}

/* Archive toolbar (breadcrumb / result count / ordering) - quiet it down */
body.woocommerce.archive .woocommerce-breadcrumb {
	font-size: 12px;
	color: var( --sar-muted );
}

body.woocommerce.archive .woocommerce-result-count {
	font-size: 12.5px;
	color: var( --sar-muted );
}

body.woocommerce.archive .woocommerce-ordering select.orderby {
	padding: 8px 12px;
	border: 1px solid var( --sar-line );
	border-radius: 10px;
	background-color: #ffffff;
	font-size: 13px;
	color: var( --sar-muted );
}

/* Sidebar / widget-area toggle button on shop & category pages (mobile) -
   swap the theme's filter glyph for a shiny gold star (user request
   2026-07-21). Re-uses the existing <i class="fas fa-filter"> element and
   just overrides its glyph + gives it a warm glow, so no theme markup is
   touched. */
.hestia-sidebar-open i.fa-filter::before {
	content: "\f005"; /* Font Awesome star, replacing the filter glyph */
}

.hestia-sidebar-open i.fa-filter {
	color: #f5c518;
	text-shadow: 0 0 8px rgba( 245, 197, 24, 0.65 ), 0 0 2px rgba( 245, 197, 24, 0.9 );
	animation: hestia-sar-star-shine 2.4s ease-in-out infinite;
}

@keyframes hestia-sar-star-shine {
	0%, 100% { text-shadow: 0 0 6px rgba( 245, 197, 24, 0.5 ), 0 0 2px rgba( 245, 197, 24, 0.8 ); }
	50% { text-shadow: 0 0 12px rgba( 245, 197, 24, 0.85 ), 0 0 4px rgba( 245, 197, 24, 1 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.hestia-sidebar-open i.fa-filter {
		animation: none;
	}
}

/* Mobile: 2-up cards like the concept (desktop grid template stays the
   customizer's .columns-N rule, which only applies >= 992px anyway). */
@media ( max-width: 991px ) {
	:is( body.woocommerce.archive, body.single-product, #products ) ul.products {
		grid-template-columns: repeat( 2, 1fr );
		gap: 0 12px;
	}

	/* No hover on touch - keep the quick-add visible. This is only the
	   fallback position (image overlay) for the brief moment before the
	   JS runs, or if it never runs; normally hestia-shop-archive.js moves
	   the quick-add into the footer and adds .sar-quick-in-footer (below),
	   which overrides these. */
	:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .hestia-sar-quick {
		opacity: 1;
		transform: none;
		left: 8px;
		right: 8px;
		bottom: 8px;
	}

	:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .hestia-sar-quick .button {
		padding: 9px 10px !important;
		font-size: 12px;
	}

	/* Mobile: the big black overlay button is gone (the JS moved the SAME
	   WooCommerce add-to-cart link into the footer). Here it becomes a
	   small round basket button on the right of the footer, where the
	   decorative arrow used to be (user request 2026-07-21). */
	:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product.sar-quick-in-footer .footer::after {
		display: none;
	}

	:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product.sar-quick-in-footer .footer .hestia-sar-quick {
		position: static;
		inset: auto;
		left: auto;
		right: auto;
		bottom: auto;
		width: auto;
		flex: none;
		margin: 0;
		opacity: 1;
		transform: none;
		text-align: right;
	}

	:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product.sar-quick-in-footer .footer .hestia-sar-quick .button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		min-width: 0;
		padding: 0 !important;
		border-radius: 50% !important;
		background: var( --sar-accent ) !important;
		color: #ffffff !important;
		font-size: 0 !important;
		box-shadow: 0 6px 14px -4px color-mix( in srgb, var( --sar-accent ) 55%, transparent ) !important;
	}

	:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product.sar-quick-in-footer .footer .hestia-sar-quick .button::before {
		content: "\f07a"; /* Font Awesome shopping-cart (loaded by the theme) */
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 15px;
		line-height: 1;
		color: #ffffff;
	}

	/* Keep the footer clean after an AJAX add - the nav cart badge and
	   mini-cart already confirm it; don't stack a "view cart" pill here. */
	:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product.sar-quick-in-footer .footer .hestia-sar-quick .added_to_cart {
		display: none !important;
	}

	:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .content {
		padding: 11px 12px 13px;
	}

	:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .footer .price h4 {
		font-size: 14.5px;
	}

	:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .footer::after {
		width: 26px;
		height: 26px;
		font-size: 13px;
	}
}

@media ( max-width: 380px ) {
	:is( body.woocommerce.archive, body.single-product, #products ) ul.products {
		grid-template-columns: 1fr;
	}
}

/* ============================ SINGLE PRODUCT ========================== */

/* Softer container radius on the raised product card */
body.single-product .blog-post .col-md-12 > div[id^="product"].product {
	border-radius: 22px;
}

/* Gallery - rounded, bordered main image; flexslider untouched. */
body.single-product div.product .hestia-product-image-wrap {
	position: relative;
}

body.single-product div.product .hestia-product-image-wrap .woocommerce-product-gallery {
	border: 1px solid var( --sar-line );
	border-radius: 22px;
	overflow: hidden;
	background: #f6f4f8;
}

body.single-product div.product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img,
body.single-product div.product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image--placeholder img {
	width: 100%;
}

body.single-product div.product .flex-control-thumbs {
	margin-top: 12px;
}

body.single-product div.product .flex-control-thumbs li img {
	border-radius: 13px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

body.single-product div.product .flex-control-thumbs li img.flex-active,
body.single-product div.product .flex-control-thumbs li img:hover {
	border-color: var( --sar-accent );
}

/* WooCommerce's gallery zoom trigger defaults to the top-right corner,
   exactly where the sale tag now sits - keep the trigger top-left. */
body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	top: 14px;
	left: 14px;
	right: auto;
}

/* Sale flash on the gallery - same subtle corner tag as the cards.
   Overrides Hestia's top:-25px/left:-25px (and the -10px variant). */
body.single-product div.product .hestia-product-image-wrap span.onsale,
body.single-product.header-layout-classic-blog .product[id^="product-"] span.onsale {
	top: 14px;
	right: 14px;
	left: auto;
	bottom: auto;
	z-index: 3;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 5px 11px;
	border-radius: 6px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 1.6;
	text-transform: uppercase;
	box-shadow: 0 3px 8px rgba( 0, 0, 0, 0.16 );
}

/* Summary column */
body.single-product div.product .summary .product_title {
	margin: 0 0 8px;
	font-size: clamp( 26px, 3.4vw, 33px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

body.single-product div.product .summary .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 4px;
	font-size: 13px;
	color: var( --sar-muted );
}

body.single-product div.product .summary .woocommerce-product-rating .star-rating {
	margin: 0;
	font-size: 13px;
	color: var( --sar-gold );
}

body.single-product div.product .summary .woocommerce-review-link {
	color: var( --sar-muted );
}

/* Price - big accent number, quiet strikethrough */
body.single-product.woocommerce div.product .summary > .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 10px;
	margin: 14px 0 0;
	color: var( --sar-accent );
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
}

body.single-product.woocommerce div.product .summary > .price del {
	font-size: 16px;
	font-weight: 500;
	color: var( --sar-muted );
	opacity: 1;
}

body.single-product.woocommerce div.product .summary > .price ins {
	text-decoration: none;
	font-weight: inherit;
}

/* "Je bespaart €X" (shop-archive-redesign.php, sale only) */
body.single-product .hestia-sar-save {
	margin: 7px 0 0;
	font-size: 12.5px;
	font-weight: 700;
	color: var( --sar-success );
}

body.single-product .hestia-sar-save .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

/* Short description */
body.single-product div.product .summary .woocommerce-product-details__short-description {
	margin-top: 16px;
	color: var( --sar-muted );
	font-size: 14.5px;
	line-height: 1.7;
}

/* Stacked feature lines ("✓ ...") typed on separate lines each become their
   own <p> with the theme's big 30px paragraph margin, which reads as random
   gaps (worse when Enter/Shift+Enter are mixed). Tighten the paragraph
   spacing in the short description AND the description tab so the lines sit as
   a clean list, and drop any empty <p> wpautop inserts (user request
   2026-07-22). */
body.single-product .woocommerce-product-details__short-description p,
body.single-product .woocommerce-Tabs-panel--description p,
body.single-product #tab-description p,
body.single-product .woocommerce-Tabs-panel--description li,
body.single-product #tab-description li {
	margin: 0 0 6px;
	line-height: 1.6;
}

body.single-product .woocommerce-product-details__short-description p:last-child,
body.single-product .woocommerce-Tabs-panel--description p:last-child,
body.single-product #tab-description p:last-child {
	margin-bottom: 0;
}

body.single-product .woocommerce-product-details__short-description p:empty,
body.single-product .woocommerce-Tabs-panel--description p:empty,
body.single-product #tab-description p:empty,
body.single-product .woocommerce-product-details__short-description br + br,
body.single-product .woocommerce-Tabs-panel--description br + br,
body.single-product #tab-description br + br {
	display: none;
}

/* Buy row - quantity stepper look + full-width add button.
   Hestia gives form.cart a 60px top margin; tighten it. */
body.single-product.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
}

/* Quantity: a unified - / + stepper box (buttons injected by
   hestia-shop-archive.js around the native qty input). */
body.single-product.woocommerce div.product form.cart .quantity {
	flex: none;
	margin: 0;
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var( --sar-line );
	border-radius: 14px;
	overflow: hidden;
	background: #ffffff;
}

body.single-product.woocommerce div.product form.cart .quantity .hestia-qty-btn {
	flex: none;
	width: 44px;
	border: none;
	background: transparent;
	color: var( --sar-ink );
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.12s ease, color 0.12s ease;
}

body.single-product.woocommerce div.product form.cart .quantity .hestia-qty-btn:hover {
	background: var( --sar-accent-soft );
	color: var( --sar-accent );
}

/* Hestia/material style underlines the qty input (background-image
   gradient) - strip that; the wrapping .quantity now owns the box. */
body.single-product.woocommerce div.product form.cart .quantity .qty {
	width: 48px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: none !important;
	border-radius: 0;
	background: #ffffff none;
	background-image: none !important;
	font-size: 15px;
	font-weight: 700;
	color: var( --sar-ink );
	text-align: center;
	-moz-appearance: textfield;
}

/* hide the browser's native number spinner - we have our own buttons */
body.single-product.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button,
body.single-product.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Add-to-cart: theme's dynamic accent CSS owns background + shadow at
   high specificity; reshape it (radius/padding/casing confirmed painted
   by `.woocommerce .single-product div.product form.cart .button`). */
body.single-product.woocommerce div.product form.cart .button.single_add_to_cart_button {
	flex: 1 1 auto;
	min-height: 52px;
	margin: 0;
	padding: 12px 26px !important;
	border-radius: 14px !important;
	font-size: 14px;
	font-weight: 800;
	text-transform: none !important;
	letter-spacing: 0;
}

/* Variable products - style WooCommerce's native variation form ONLY
   (labels + selects + variation price); no markup or JS changes, so
   attribute choice, price/stock swap and add-to-cart gating keep
   working exactly as stock WooCommerce. */
body.single-product.woocommerce div.product form.cart .variations {
	flex: 1 1 100%;
	margin: 0 0 2px;
	border: none;
}

body.single-product.woocommerce div.product form.cart .variations tr {
	display: block;
	margin-bottom: 14px;
	border: none;
}

body.single-product.woocommerce div.product form.cart .variations td,
body.single-product.woocommerce div.product form.cart .variations th {
	display: block;
	width: 100%;
	padding: 0;
	text-align: left;
}

body.single-product.woocommerce div.product form.cart .variations .label label {
	margin: 0 0 7px;
	background: transparent;
	color: var( --sar-muted );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Hestia strips select borders for its material underline style -
   border/background need !important to beat that + the dynamic focus
   gradient (confirmed in _generic.scss + woo_colors_inline_style()). */
body.single-product.woocommerce div.product form.cart .variations select {
	width: 100%;
	max-width: 340px;
	padding: 11px 14px;
	border: 1.5px solid var( --sar-line ) !important;
	border-radius: 10px;
	background-color: #ffffff;
	background-image: none !important;
	color: var( --sar-ink );
	font-size: 13.5px;
	font-weight: 600;
}

body.single-product.woocommerce div.product form.cart .variations select:focus {
	border-color: var( --sar-accent ) !important;
	outline: none;
}

body.single-product.woocommerce div.product form.cart .reset_variations {
	font-size: 12px;
	color: var( --sar-muted );
}

body.single-product.woocommerce div.product form.cart .single_variation_wrap {
	flex: 1 1 100%;
}

body.single-product.woocommerce div.product .woocommerce-variation-price .price {
	margin: 0 0 14px;
	color: var( --sar-accent );
	font-size: 24px;
	font-weight: 800;
}

body.single-product.woocommerce div.product .woocommerce-variation-price .price del {
	font-size: 15px;
	font-weight: 500;
	color: var( --sar-muted );
	opacity: 1;
}

body.single-product.woocommerce div.product .woocommerce-variation-price .price ins {
	text-decoration: none;
}

body.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap; /* let the live "Totaal" (flex-basis:100%) drop to its own
	                    line instead of forcing the qty+button row wider than
	                    the viewport - that no-wrap overflow pushed the total
	                    off-screen on mobile variable products (fix 2026-07-22). */
	gap: 12px;
	align-items: stretch;
}

/* min-width:0 so the qty box and add-to-cart button can shrink within the
   wrapped row on narrow screens instead of forcing horizontal overflow. */
body.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart > .quantity,
body.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart > .button {
	min-width: 0;
}

/* Live order total (qty x price), updated by the +/- stepper - sits full
   width under the quantity + add-to-cart row inside form.cart. */
body.single-product .hestia-sar-total {
	flex: 1 1 100%;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 4px 0 0;
	padding-top: 14px;
	border-top: 1px dashed var( --sar-line );
}

body.single-product .hestia-sar-total .hestia-sar-total-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --sar-muted );
}

body.single-product .hestia-sar-total .hestia-sar-total-val {
	font-size: 20px;
	font-weight: 800;
	color: var( --sar-accent );
}

body.single-product .hestia-sar-total .hestia-sar-total-val .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

/* Trust row (shop-archive-redesign.php) */
body.single-product .hestia-sar-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var( --sar-line );
}

body.single-product .hestia-sar-trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	color: var( --sar-muted );
}

body.single-product .hestia-sar-trust-item .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

body.single-product .hestia-sar-trust-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var( --sar-accent-soft );
	color: var( --sar-accent );
}

body.single-product .hestia-sar-trust-ico svg {
	width: 17px;
	height: 17px;
}

/* Product meta - quiet single line under the trust row */
body.single-product div.product .summary .product_meta {
	margin-top: 18px;
	font-size: 12px;
	color: var( --sar-muted );
}

body.single-product div.product .summary .product_meta a {
	color: var( --sar-muted );
	text-decoration: underline;
}

/* Description ("Omschrijving") + tabs: DELIBERATELY LEFT NATIVE.
   An earlier version turned the tabs into forced-open stacked sections
   and restyled the description paragraphs/lists (max-width, colors,
   spacing). On real products that rearranged the actual description
   content, so per the user (2026-07-21) the description section is
   reverted to Hestia/WooCommerce's own un-edited tab rendering - no tab
   bar hiding, no panel force-open, no description text overrides here.
   The unwanted "Additional information" tab is still dropped server-side
   (woocommerce_product_tabs filter in shop-archive-redesign.php keeps
   only description + reviews); everything about HOW those two render is
   native theme behaviour again. Only the review-card presentation below
   is styled, since it doesn't touch the description content. */

/* Reviews - style whatever renders in the reviews panel. Native
   WooCommerce markup styled below; if woocommerce-photo-reviews gets
   (re)installed its own UI replaces this markup untouched.
   The #reviews #comments double-ID prefix matches the specificity of the
   WooCommerce-core + theme rules that absolutely position the avatar and
   pad .comment-text around it (CDP-confirmed those otherwise win). */
body.single-product #reviews #comments ol.commentlist {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

body.single-product #reviews #comments ol.commentlist li {
	margin: 0;
	padding: 0;
}

body.single-product #reviews #comments ol.commentlist li .comment_container {
	display: flex;
	gap: 14px;
	padding: 16px;
	background: #ffffff;
	border: 1px solid var( --sar-line );
	border-radius: 16px;
}

/* No avatar images used (user request 2026-07-21) - hide the gravatar
   placeholder so review cards are a clean single column. */
body.single-product #reviews #comments ol.commentlist li img.avatar {
	display: none;
}

body.single-product #reviews #comments ol.commentlist li .comment-text {
	flex: 1;
	margin: 0;
	padding: 0;
	border: none;
}

body.single-product #reviews .comment-text .star-rating {
	font-size: 12px;
	color: var( --sar-gold );
}

body.single-product #reviews .comment-text .meta {
	margin: 0 0 6px;
	font-size: 13px;
	color: var( --sar-muted );
}

body.single-product #reviews .comment-text .meta .woocommerce-review__author {
	color: var( --sar-ink );
	font-weight: 700;
}

body.single-product #reviews .comment-text .description p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var( --sar-muted );
}

/* Review form */
body.single-product .woocommerce-Reviews #review_form_wrapper #respond {
	margin-top: 20px;
	padding: 20px;
	background: #ffffff;
	border: 1px solid var( --sar-line );
	border-radius: 16px;
}

body.single-product .woocommerce-Reviews #respond .comment-reply-title {
	display: block;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 700;
	color: var( --sar-ink );
}

body.single-product .woocommerce-Reviews #respond .comment-form label {
	font-size: 12.5px;
	font-weight: 600;
	color: var( --sar-muted );
}

body.single-product .woocommerce-Reviews #respond .comment-form input[type="text"],
body.single-product .woocommerce-Reviews #respond .comment-form input[type="email"],
body.single-product .woocommerce-Reviews #respond .comment-form textarea {
	padding: 10px 12px;
	border: 1.5px solid var( --sar-line ) !important;
	border-radius: 10px;
	background-image: none !important;
	font-size: 13.5px;
}

body.single-product .woocommerce-Reviews #respond .comment-form input:focus,
body.single-product .woocommerce-Reviews #respond .comment-form textarea:focus {
	border-color: var( --sar-accent ) !important;
	outline: none;
}

body.single-product .woocommerce-Reviews #respond p.stars a {
	color: var( --sar-gold );
}

body.single-product .woocommerce-Reviews #respond .form-submit input#submit {
	padding: 11px 20px !important;
	border-radius: 12px !important;
	font-size: 13px;
	font-weight: 800;
	text-transform: none !important;
	letter-spacing: 0;
}

/* Related products - fancy centered heading with a sparkle eyebrow and a
   soft accent underline (user request 2026-07-21). */
body.single-product .related.products {
	margin-top: 70px;
}

body.single-product .related.products > h2 {
	position: relative;
	display: block;
	margin: 0 0 34px;
	padding-bottom: 16px;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-align: center;
}

body.single-product .related.products > h2::before {
	content: "\2726"; /* sparkle */
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	line-height: 1;
	color: var( --sar-accent );
}

body.single-product .related.products > h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 64px;
	height: 3px;
	transform: translateX( -50% );
	border-radius: 3px;
	background: linear-gradient( to right, transparent, var( --sar-accent ), transparent );
}

/* Single product, mobile */
@media ( max-width: 767px ) {
	body.single-product .blog-post .col-md-12 > div[id^="product"].product {
		padding: 18px;
		border-radius: 18px;
	}

	body.single-product div.product .summary {
		margin-bottom: 30px;
	}

	body.single-product.woocommerce div.product .summary > .price {
		font-size: 26px;
	}

	body.single-product div.product .summary .product_title {
		font-size: 24px;
	}
}

/* "Toegevoegd aan winkelmand" toast after a card add-to-cart
   (hestia-shop-archive.js, on WooCommerce's added_to_cart event). Sits
   above the floating cart bar; auto-hides. Shown on all viewports but is
   mainly there for mobile, where the card button is just an icon. */
.hestia-sar-toast {
	position: fixed;
	left: 50%;
	bottom: 74px;
	z-index: 1030;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 10px 16px;
	border-radius: 999px;
	background: #241f2b;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 12px 26px -8px rgba( 0, 0, 0, 0.45 );
	opacity: 0;
	transform: translateX( -50% ) translateY( 10px );
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s cubic-bezier( 0.2, 0.8, 0.25, 1 );
}

.hestia-sar-toast.is-visible {
	opacity: 1;
	transform: translateX( -50% ) translateY( 0 );
}

.hestia-sar-toast .hestia-sar-toast-ic {
	color: #4ade80;
	font-size: 14px;
	line-height: 1;
}

/* ===================================================================
   WooCommerce Photo Reviews (plugin: woocommerce-photo-reviews) premium
   restyle. When the plugin is active the product-page reviews render its
   OWN markup (.wcpr-* containers) instead of WooCommerce's default review
   list, which looks generic and drops the theme's button styling. These
   rules bring that markup into the redesign's card language (same --sar-*
   tokens, rounded bordered cards, accent stars, clean meta) and reclaim
   the plugin's buttons for the theme. EVERYTHING is scoped to
   body.single-product #reviews / the plugin's own wrappers, so it can't
   touch any other page. Class names taken from the plugin's REAL rendered
   output on a website-c product page, not guessed.
   =================================================================== */

/* Reviews panel heading ("3 reviews for ...") */
body.single-product #reviews #comments > .woocommerce-Reviews-title {
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var( --sar-ink );
}

/* -------- rating summary (breakdown bars) -------- */
/* Concept summary: a big average score on the left, the rating-breakdown
   bars on the right (hestia-shop-archive.js injects .hestia-rev-avg from
   the plugin's own breakdown data). */
body.single-product #reviews .wcpr-overall-rating-and-rating-count {
	display: grid !important;
	grid-template-columns: auto 1fr;
	gap: 34px;
	align-items: center;
	margin: 0 0 26px;
	padding: 20px 22px;
	background: #ffffff;
	border: 1px solid var( --sar-line );
	border-radius: 16px;
	box-shadow: var( --sar-shadow );
}

/* Big average block (built by the JS) */
body.single-product #reviews .hestia-rev-avg {
	text-align: center;
}

/* "Klantreviews" heading above the average - matches the bulk review page
   (user request 2026-07-22). */
body.single-product #reviews .hestia-rev-avg-title {
	margin-bottom: 4px;
	font-size: 15px;
	font-weight: 800;
	color: var( --sar-ink );
}

body.single-product #reviews .hestia-rev-avg-num {
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	color: var( --sar-ink );
}

body.single-product #reviews .hestia-rev-avg-stars {
	margin: 6px 0 4px;
	color: var( --sar-gold );
	font-size: 16px;
	letter-spacing: 2px;
}

body.single-product #reviews .hestia-rev-avg-count {
	color: var( --sar-muted );
	font-size: 12.5px;
}

body.single-product #reviews .wcpr-stars-count {
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 100%;
	margin: 0;
}

body.single-product #reviews .wcpr-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

body.single-product #reviews .wcpr-col-number {
	min-width: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var( --sar-muted );
	text-align: right;
}

body.single-product #reviews .wcpr-col-star .star-rating {
	font-size: 12px;
	color: var( --sar-gold );
}

body.single-product #reviews .wcpr-col-process {
	flex: 1;
}

body.single-product #reviews .wcpr-col-process .rate-percent-bg {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: var( --sar-line );
	overflow: hidden;
}

/* gold fill (matches the approved concept; overrides the plugin colour) */
body.single-product #reviews .wcpr-col-process .rate-percent {
	height: 100%;
	border-radius: 999px;
	background: var( --sar-gold );
}

/* the plugin prints the "%" label inside the track; move it out of the way */
body.single-product #reviews .wcpr-col-process .rate-percent-bg-1 {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY( -50% );
	font-size: 10px;
	font-weight: 700;
	color: var( --sar-muted );
	background: none;
}

body.single-product #reviews .wcpr-col-rank-count {
	min-width: 16px;
	font-size: 13px;
	font-weight: 700;
	color: var( --sar-ink );
	text-align: right;
}

/* -------- filter bar (Met afbeeldingen / Geverifieerd / Alle sterren) -------- */
body.single-product #reviews .wcpr-filter-container {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 0 0 22px;
	padding: 0;
	border: none;
}

body.single-product #reviews .wcpr-filter-container .wcpr-filter-button,
body.single-product #reviews .wcpr-filter-container .wcpr-filter-button-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 9px 16px;
	background: #ffffff;
	border: 1.5px solid var( --sar-line );
	border-radius: 999px;
	color: var( --sar-ink );
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

body.single-product #reviews .wcpr-filter-container .wcpr-filter-button:hover {
	border-color: var( --sar-accent );
	color: var( --sar-accent );
}

/* active state (the plugin marks it .wcpr-active) -> accent pill */
body.single-product #reviews .wcpr-filter-container .wcpr-filter-button.wcpr-active,
body.single-product #reviews .wcpr-filter-container .wcpr-filter-button-wrap.wcpr-active > .wcpr-filter-rating-placeholder,
body.single-product #reviews .wcpr-filter-container .wcpr-active > a.wcpr-active {
	background: var( --sar-accent );
	border-color: var( --sar-accent );
	color: #ffffff;
}

body.single-product #reviews .wcpr-filter-container .wcpr-filter-button-count {
	color: inherit;
	opacity: 0.85;
	font-weight: 700;
}

/* dropdown popover of star filters */
body.single-product #reviews .wcpr-filter-button-wrap .wcpr-filter-button-ul {
	border: 1px solid var( --sar-line );
	border-radius: 12px;
	box-shadow: var( --sar-shadow-lift );
	overflow: hidden;
}

body.single-product #reviews .wcpr-filter-button-wrap .wcpr-filter-button-li .wcpr-filter-button {
	border: none;
	border-radius: 0;
	justify-content: flex-start;
	width: 100%;
}

/* Remove the "Alle sterren" star dropdown from the filter bar (user request
   2026-07-21). It stays in the DOM (hidden) so its filter links can still be
   driven by the clickable summary rows below; visually it is replaced by the
   "Schrijf een review" button. */
body.single-product #reviews .wcpr-filter-container .wcpr-filter-button-wrap {
	display: none !important;
}

/* hide the "Met afbeeldingen" filter when this product has no review photos
   (the JS adds .hestia-hide-empty when its count is 0) */
body.single-product #reviews .wcpr-filter-button-images.hestia-hide-empty {
	display: none !important;
}

/* the JS moves the filter bar INTO the summary card so it reads as one
   "total reviews" block (user request); make it a full-width bottom row
   with a divider instead of a separate bubble. */
body.single-product #reviews .wcpr-overall-rating-and-rating-count .wcpr-filter-container {
	grid-column: 1 / -1;
	margin: 6px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var( --sar-line );
}

/* "Schrijf een review" button - a prominent accent pill that jumps to the
   add-review form (added by hestia-shop-archive.js). */
body.single-product #reviews .wcpr-filter-container .hestia-rev-write-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 9px 18px;
	background: var( --sar-accent );
	border: 1.5px solid var( --sar-accent );
	border-radius: 999px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
	cursor: pointer;
	transition: filter 0.15s ease;
}

body.single-product #reviews .wcpr-filter-container .hestia-rev-write-btn:hover {
	filter: brightness( 1.06 );
}

/* Clickable rating-breakdown rows -> filter the list by that star rating
   (wired by hestia-shop-archive.js). The whole row (stars + bar + count) is
   the hit target. */
body.single-product #reviews .wcpr-row.hestia-rev-row-click {
	padding: 4px 8px;
	margin: 0 -8px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease;
}

body.single-product #reviews .wcpr-row.hestia-rev-row-click:hover,
body.single-product #reviews .wcpr-row.hestia-rev-row-click.is-active {
	background: var( --sar-accent-soft );
}

body.single-product #reviews .wcpr-row.hestia-rev-row-click.is-active .wcpr-col-number,
body.single-product #reviews .wcpr-row.hestia-rev-row-click.is-active .wcpr-col-rank-count {
	color: var( --sar-accent );
}

/* -------- review list: 2-column boxed cards (no avatars) -------- */
/* The plugin wraps every review in one <li.wcpr-grid> holding the
   .wcpr-grid-item rows. Layout is a 2-up grid of bordered white cards on
   desktop, collapsing to 1 column on mobile (user request 2026-07-21 - the
   boxed-card version, not the single-column rows). Force an explicit CSS
   grid and neutralise the plugin's masonry / CSS-column positioning (its
   masonry script is also dequeued on product pages, see
   shop-archive-redesign.php) so the layout is stable. */
body.single-product #reviews ol.commentlist > li.wcpr-grid {
	display: grid !important;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px;
	height: auto !important;
	min-height: 0 !important;
	position: static !important;
	column-count: auto !important;
	columns: auto !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media ( max-width: 767px ) {
	body.single-product #reviews ol.commentlist > li.wcpr-grid {
		grid-template-columns: 1fr;
	}
}

/* material-kit adds a clearfix ::before/::after to list rows; in a flex
   container those become stray flex items - remove them. */
body.single-product #reviews ol.commentlist > li.wcpr-grid::before,
body.single-product #reviews ol.commentlist > li.wcpr-grid::after {
	content: none !important;
	display: none !important;
}

body.single-product #reviews ol.commentlist li.wcpr-grid .wcpr-grid-item {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	transform: none !important;
	margin: 0 !important;
	padding: 16px !important;
	background: #ffffff;
	border: 1px solid var( --sar-line );
	border-radius: 16px;
}

/* the bordered card box lives on .wcpr-grid-item above - keep the inner
   content flush. Flex column so a photo review's image block can be ordered
   below the text. */
body.single-product #reviews .wcpr-grid-item .wcpr-content {
	display: flex;
	flex-direction: column;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}

body.single-product #reviews .wcpr-grid-item .review-content-container {
	order: 1;
}

body.single-product #reviews .review-content-container-top {
	margin: 0;
}

/* name (bold) + green "Geverifieerd" tag inline */
body.single-product #reviews .wcpr-comment-author {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 700;
	color: var( --sar-ink );
}

/* verified -> small green tag (concept), keeping the plugin's tick glyph */
body.single-product #reviews .wcpr-comment-author .woocommerce-review__verified,
body.single-product #reviews .wcpr-comment-author em.wcpr-icon-badge {
	color: var( --sar-success );
	font-size: 11px;
	font-weight: 700;
}

body.single-product #reviews .wcpr-comment-author .woocommerce-review__verified::after {
	content: " Geverifieerd";
	font-style: normal;
}

/* stars (gold) + right-aligned date on one line */
body.single-product #reviews .wcpr-review-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

body.single-product #reviews .wcpr-review-rating .star-rating {
	font-size: 12px;
	color: var( --sar-gold );
}

body.single-product #reviews .wcpr-review-date {
	margin-left: auto;
	font-size: 11.5px;
	color: var( --sar-muted );
}

/* optional review title (present on photo reviews) */
body.single-product #reviews .wcpr-review-title {
	margin-top: 7px;
	font-size: 13.5px;
	font-weight: 700;
	color: var( --sar-ink );
}

body.single-product #reviews .wcpr-review-title + .wcpr-review-content {
	margin-top: 3px;
}

body.single-product #reviews .wcpr-review-content {
	margin-top: 7px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var( --sar-muted );
}

/* Reviews show their FULL text - no "…Meer" read-more truncation (user
   request 2026-07-22, superseding the earlier bold-"Meer" styling). Hide the
   short/truncated copy + the read-more control, always show the full copy.
   Covers both the single-product reviews and the shortcode review page. */
.wcpr-review-content-short,
.shortcode-wcpr-review-content-short,
.wcpr-read-more,
.shortcode-wcpr-read-more {
	display: none !important;
}

.wcpr-review-content-full,
.shortcode-wcpr-review-content-full {
	display: block !important;
}

/* Product-page reviews: 14-recent + "Laad meer" (user request 2026-07-22).
   Hidden overflow reviews + an accent pill button, matching the theme. */
body.single-product #reviews .wcpr-grid-item.hestia-rev-hidden {
	display: none !important;
}

body.single-product #reviews .hestia-review-loadmore {
	display: block;
	margin: 18px auto 4px;
	padding: 11px 26px;
	border: 1px solid var( --sar-line );
	border-radius: 999px;
	background: #ffffff;
	color: var( --sar-ink );
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.single-product #reviews .hestia-review-loadmore:hover {
	background: var( --sar-accent );
	border-color: var( --sar-accent );
	color: #ffffff;
}

/* Shortcode review page: auto-load (infinite scroll) - hide the plugin's
   manual "Meer laden" button; a sentinel auto-triggers it (user request
   2026-07-22, see initShortcodeReviewAutoLoad() in hestia-shop-archive.js). */
.woocommerce-photo-reviews-shortcode.hestia-review-autoload .wcpr-load-more-reviews-button-container {
	display: none !important;
}

.hestia-review-sentinel {
	width: 100%;
	height: 1px;
	pointer-events: none;
}

/* uploaded customer photos: small rounded thumbnails BELOW the text (the
   plugin renders them full-size and above the review by default). */
body.single-product #reviews .wcpr-grid-item .reviews-images-container {
	order: 2;
	margin: 10px 0 0;
	display: block;
	text-align: left;
}

body.single-product #reviews .reviews-images-wrap-right {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px;
}

body.single-product #reviews img.reviews-images {
	width: 64px !important;
	height: 64px !important;
	margin: 0 !important;
	object-fit: cover;
	border-radius: 10px;
	cursor: pointer;
}

/* full-size photo lightbox (built by hestia-shop-archive.js). Appended to
   <body>, so it can't be nested under #reviews - a unique class only ever
   spawned from a review-photo click. */
.hestia-rev-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba( 20, 10, 25, 0.82 );
	opacity: 0;
	transition: opacity 0.2s ease;
	cursor: zoom-out;
}

.hestia-rev-lightbox.is-open {
	opacity: 1;
}

.hestia-rev-lightbox img {
	max-width: min( 92vw, 900px );
	max-height: 88vh;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.5 );
	cursor: default;
}

.hestia-rev-lightbox-close {
	position: absolute;
	top: 18px;
	right: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.14 );
	color: #ffffff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.hestia-rev-lightbox-close:hover {
	background: rgba( 255, 255, 255, 0.28 );
}

/* helpful ("Nuttig?") vote row -> quiet inline meta (the concept omits it;
   kept functional but understated) */
body.single-product #reviews .wcpr-comment-helpful-button-container {
	margin-top: 10px;
	font-size: 12px;
	color: var( --sar-muted );
}

body.single-product #reviews .wcpr-comment-helpful-button-label {
	font-weight: 700;
	color: var( --sar-ink );
}

/* -------- write-a-review form: reclaim the plugin's buttons -------- */
/* review-title input matches the other redesigned fields */
body.single-product #reviews .wcpr-comment-form-title input[type="text"] {
	padding: 10px 12px;
	border: 1.5px solid var( --sar-line ) !important;
	border-radius: 10px;
	background-image: none !important;
	font-size: 13.5px;
}

/* "Kies foto's & video's" upload trigger -> theme secondary button
   (the plugin ships a flat grey .button; make it accent-outline so it
   reads as part of the theme, not the plugin) */
body.single-product #reviews .wcpr-comment-form-images .wcpr_image_upload_button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px !important;
	background: var( --sar-accent-soft ) !important;
	border: 1.5px solid var( --sar-accent ) !important;
	border-radius: 12px !important;
	color: var( --sar-accent ) !important;
	font-size: 12.5px;
	font-weight: 800;
	text-transform: none !important;
	letter-spacing: 0;
	box-shadow: none !important;
	transition: background 0.18s ease, color 0.18s ease;
}

body.single-product #reviews .wcpr-comment-form-images .wcpr_image_upload_button.button:hover {
	background: var( --sar-accent ) !important;
	color: #ffffff !important;
}

/* -------- reviews: mobile -------- */
@media ( max-width: 767px ) {
	/* stack the average above the bars */
	body.single-product #reviews .wcpr-overall-rating-and-rating-count {
		grid-template-columns: 1fr;
		gap: 16px;
		justify-items: center;
	}

	body.single-product #reviews .wcpr-stars-count {
		max-width: 340px;
	}

	body.single-product #reviews .wcpr-filter-container .wcpr-filter-button,
	body.single-product #reviews .wcpr-filter-container .wcpr-filter-button-wrap {
		flex: 1 1 auto;
	}
}

/* =====================================================================
   woocommerce-photo-reviews LISTING shortcode [wc_photo_reviews_shortcode]
   Renders a cross-product review grid with its OWN .shortcode-wcpr-* markup
   (distinct from the single-product #reviews block). These rules give it the
   same premium look: a summary card (big average + gold bars + clickable
   rows), pill filters, boxed review cards and thumbnailed photos. Everything
   is scoped to the .woocommerce-photo-reviews-shortcode wrapper so it can't
   leak to any other content on the page.
   ===================================================================== */

.woocommerce-photo-reviews-shortcode {
	color: var( --sar-ink );
}

/* -------- summary (overall_rating="on") -------- */
.woocommerce-photo-reviews-shortcode .shortcode-wcpr-overall-rating-and-rating-count {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 34px;
	align-items: center;
	margin: 0 0 26px;
	padding: 20px 22px;
	background: #ffffff;
	border: 1px solid var( --sar-line );
	border-radius: 16px;
	box-shadow: var( --sar-shadow );
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-overall-rating {
	text-align: center;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-overall-rating h2 {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var( --sar-ink );
}

/* the plugin wraps the average in a coloured box - strip it back to a plain
   big number (matches the single-product summary). */
.woocommerce-photo-reviews-shortcode .shortcode-wcpr-overall-rating-left {
	background: none !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-overall-rating-left-average {
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	color: var( --sar-ink ) !important;
	background: none !important;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-overall-rating-right-star {
	display: flex;
	justify-content: center;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-overall-rating-right-star .star-rating {
	margin: 6px 0 4px;
	color: var( --sar-gold );
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-overall-rating-right-total {
	font-size: 12.5px;
	color: var( --sar-muted );
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-stars-count {
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 100%;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-col-number {
	min-width: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var( --sar-muted );
	text-align: right;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-col-star .star-rating {
	font-size: 12px;
	color: var( --sar-gold );
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-col-process {
	flex: 1;
}

.woocommerce-photo-reviews-shortcode .rate-percent-bg {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: var( --sar-line );
	overflow: hidden;
}

.woocommerce-photo-reviews-shortcode .rate-percent {
	height: 100%;
	border-radius: 999px;
	background: var( --sar-gold ) !important;
}

.woocommerce-photo-reviews-shortcode .rate-percent-bg-1 {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY( -50% );
	font-size: 10px;
	font-weight: 700;
	color: var( --sar-muted );
	background: none;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-col-rank-count {
	min-width: 16px;
	font-size: 13px;
	font-weight: 700;
	color: var( --sar-ink );
	text-align: right;
}

/* clickable rating rows -> filter by star (wired by the JS) */
.woocommerce-photo-reviews-shortcode .shortcode-wcpr-row.hestia-rev-row-click {
	padding: 4px 8px;
	margin: 0 -8px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-row.hestia-rev-row-click:hover,
.woocommerce-photo-reviews-shortcode .shortcode-wcpr-row.hestia-rev-row-click.is-active {
	background: var( --sar-accent-soft );
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-row.hestia-rev-row-click.is-active .shortcode-wcpr-col-number,
.woocommerce-photo-reviews-shortcode .shortcode-wcpr-row.hestia-rev-row-click.is-active .shortcode-wcpr-col-rank-count {
	color: var( --sar-accent );
}

@media ( max-width: 767px ) {
	.woocommerce-photo-reviews-shortcode .shortcode-wcpr-overall-rating-and-rating-count {
		grid-template-columns: 1fr;
		gap: 16px;
		justify-items: center;
	}

	.woocommerce-photo-reviews-shortcode .shortcode-wcpr-stars-count {
		max-width: 340px;
	}

	/* keep the two remaining filter pills side by side (no odd wrap/gap) */
	.woocommerce-photo-reviews-shortcode .shortcode-wcpr-filter-container {
		flex-wrap: nowrap;
	}

	.woocommerce-photo-reviews-shortcode .shortcode-wcpr-filter-button {
		flex: 1 1 0;
		min-width: 0;
		padding: 9px 10px;
	}
}

/* -------- filter pills -------- */
.woocommerce-photo-reviews-shortcode .shortcode-wcpr-filter-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 0;
	border: none;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-filter-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 9px 16px;
	background: #ffffff;
	border: 1.5px solid var( --sar-line );
	border-radius: 999px;
	color: var( --sar-ink );
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-filter-button:hover {
	border-color: var( --sar-accent );
	color: var( --sar-accent );
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-filter-button.shortcode-wcpr-active {
	background: var( --sar-accent );
	border-color: var( --sar-accent );
	color: #ffffff;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-filter-button-count {
	color: inherit;
	opacity: 0.85;
	font-weight: 700;
}

/* the "Alle sterren" dropdown is removed - the clickable summary rows drive
   the star filtering now. It stays in the DOM (hidden) so its links can be
   clicked programmatically. */
.woocommerce-photo-reviews-shortcode .shortcode-wcpr-filter-button-wrap {
	display: none !important;
}

/* the JS moves the filter bar INTO the summary card so it reads as one
   "total reviews" block (user request); full-width bottom row + divider. */
.woocommerce-photo-reviews-shortcode .shortcode-wcpr-overall-rating-and-rating-count .shortcode-wcpr-filter-container {
	grid-column: 1 / -1;
	margin: 6px 0 0;
	padding: 16px 0 0;
}

/* hide the "Met afbeeldingen" filter when there are no review photos
   (the JS adds .hestia-hide-empty when its count is 0) */
.woocommerce-photo-reviews-shortcode .shortcode-wcpr-filter-button-images.hestia-hide-empty {
	display: none !important;
}

/* -------- review cards: boxed, clean grid -------- */
/* Override the plugin's fragile CSS-grid masonry (per-item grid-row-end span
   set from the ORIGINAL, un-restyled height) - once the photo is shrunk to a
   thumbnail those spans leave huge gaps/overlap. Force a plain responsive
   grid instead: 3 cols (the shortcode's cols=3) down to 1 on phones. */
.woocommerce-photo-reviews-shortcode .shortcode-wcpr-grid {
	display: grid !important;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	grid-auto-rows: auto !important;
	gap: 16px;
	align-items: start;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-grid-item {
	grid-row-end: auto !important;
	width: auto !important;
	margin: 0 !important;
	padding: 16px !important;
	background: #ffffff;
	border: 1px solid var( --sar-line );
	border-radius: 16px;
	box-shadow: var( --sar-shadow );
	box-sizing: border-box;
}

@media ( max-width: 991px ) {
	.woocommerce-photo-reviews-shortcode .shortcode-wcpr-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 600px ) {
	.woocommerce-photo-reviews-shortcode .shortcode-wcpr-grid {
		grid-template-columns: 1fr;
	}
}

/* inner content: flex column so a photo can sit below the text */
.woocommerce-photo-reviews-shortcode .shortcode-wcpr-content {
	display: flex;
	flex-direction: column;
}

.woocommerce-photo-reviews-shortcode .shortcode-review-content-container {
	order: 1;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-comment-author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px 7px;
	font-size: 13.5px;
	font-weight: 700;
	color: var( --sar-ink );
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-comment-author .woocommerce-review__verified {
	color: var( --sar-success );
	font-size: 11px;
	font-weight: 700;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-comment-author .woocommerce-review__verified::after {
	content: " Geverifieerd";
	font-style: normal;
}

.woocommerce-photo-reviews-shortcode .wcpr-review-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

.woocommerce-photo-reviews-shortcode .wcpr-review-rating .star-rating {
	font-size: 12px;
	color: var( --sar-gold );
}

.woocommerce-photo-reviews-shortcode .wcpr-review-date {
	margin-left: auto;
	font-size: 11.5px;
	color: var( --sar-muted );
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-review-title {
	margin-top: 7px;
	font-size: 13.5px;
	font-weight: 700;
	color: var( --sar-ink );
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-review-content {
	margin-top: 7px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var( --sar-muted );
}

/* uploaded photos -> small rounded thumbnails below the text */
.woocommerce-photo-reviews-shortcode .shortcode-reviews-images-container {
	order: 2;
	margin: 10px 0 0;
	display: block;
	text-align: left;
}

.woocommerce-photo-reviews-shortcode .shortcode-reviews-images-wrap-right {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px;
}

.woocommerce-photo-reviews-shortcode img.shortcode-reviews-images {
	width: 64px !important;
	height: 64px !important;
	margin: 0 !important;
	object-fit: cover;
	border-radius: 10px;
	cursor: pointer;
}

/* helpful ("Nuttig?") vote row -> quiet meta */
.woocommerce-photo-reviews-shortcode .wcpr-comment-helpful-button-container {
	margin-top: 10px;
	font-size: 12px;
	color: var( --sar-muted );
}

.woocommerce-photo-reviews-shortcode .wcpr-comment-helpful-button-label {
	font-weight: 700;
	color: var( --sar-ink );
}

/* ---- helpful ("Nuttig?") vote buttons: shared makeover ----
   Same .wcpr-comment-helpful-button-* markup on the single-product reviews
   AND the shortcode listing - turn the plugin's bare thumb icons into small
   round icon buttons that pick up the theme accent on hover. */
:is( body.single-product #reviews, .woocommerce-photo-reviews-shortcode ) .wcpr-comment-helpful-button-vote-container {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

:is( body.single-product #reviews, .woocommerce-photo-reviews-shortcode ) .wcpr-comment-helpful-button-up-vote-count,
:is( body.single-product #reviews, .woocommerce-photo-reviews-shortcode ) .wcpr-comment-helpful-button-down-vote-count {
	font-size: 12px;
	font-weight: 700;
	color: var( --sar-muted );
}

:is( body.single-product #reviews, .woocommerce-photo-reviews-shortcode ) .wcpr-comment-helpful-button.woocommerce-photo-reviews-vote-like {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1.5px solid var( --sar-line );
	background: #ffffff;
	color: var( --sar-muted );
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

:is( body.single-product #reviews, .woocommerce-photo-reviews-shortcode ) .wcpr-comment-helpful-button.woocommerce-photo-reviews-vote-like:hover {
	border-color: var( --sar-accent );
	color: var( --sar-accent );
	background: var( --sar-accent-soft );
}

/* "Load more" button (shows only when there are more reviews than the page
   size) -> theme accent pill */
.woocommerce-photo-reviews-shortcode .shortcode-wcpr-loadmore,
.woocommerce-photo-reviews-shortcode [class*="loadmore-button"],
.woocommerce-photo-reviews-shortcode button[class*="loadmore"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 24px auto 0;
	padding: 11px 26px;
	background: var( --sar-accent );
	border: 1.5px solid var( --sar-accent );
	border-radius: 999px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.woocommerce-photo-reviews-shortcode .shortcode-wcpr-loadmore:hover,
.woocommerce-photo-reviews-shortcode [class*="loadmore-button"]:hover,
.woocommerce-photo-reviews-shortcode button[class*="loadmore"]:hover {
	filter: brightness( 1.06 );
}

/* =====================================================================
   Review quick-view modal (masonry_popup="review"). Appended to <body>, so
   scoped to its own .shortcode-wcpr-modal-light-box class. Full restyle to
   the theme card language: rounded white panel, premium review meta and a
   product/buy block that reads like a Hestia product card.
   ===================================================================== */

.shortcode-wcpr-modal-light-box .shortcode-wcpr-overlay {
	background: rgba( 20, 10, 25, 0.72 );
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-modal-wrap {
	background: #ffffff !important;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var( --sar-shadow-lift );
}

/* photo pane */
.shortcode-wcpr-modal-light-box #shortcode-reviews-content-left {
	background: #f6f4f8;
}

/* right pane */
.shortcode-wcpr-modal-light-box #shortcode-reviews-content-right {
	padding: 26px 26px 24px;
}

/* review meta */
.shortcode-wcpr-modal-light-box .shortcode-wcpr-comment-author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px 7px;
	font-size: 15px;
	font-weight: 800;
	color: var( --sar-ink );
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-comment-author .woocommerce-review__verified {
	color: var( --sar-success );
	font-size: 11px;
	font-weight: 700;
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-comment-author .woocommerce-review__verified::after {
	content: " Geverifieerd";
	font-style: normal;
}

.shortcode-wcpr-modal-light-box .wcpr-review-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 5px;
}

.shortcode-wcpr-modal-light-box .wcpr-review-rating .star-rating {
	color: var( --sar-gold );
	font-size: 13px;
}

.shortcode-wcpr-modal-light-box .wcpr-review-date {
	margin-left: auto;
	font-size: 12px;
	color: var( --sar-muted );
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-review-title {
	margin-top: 12px;
	font-size: 15px;
	font-weight: 800;
	color: var( --sar-ink );
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-review-content {
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.65;
	color: var( --sar-muted );
}

/* helpful ("Nuttig?") buttons - round makeover */
.shortcode-wcpr-modal-light-box .wcpr-comment-helpful-button-container {
	margin-top: 14px;
	font-size: 12px;
	color: var( --sar-muted );
}

.shortcode-wcpr-modal-light-box .wcpr-comment-helpful-button-vote-container {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.shortcode-wcpr-modal-light-box .wcpr-comment-helpful-button-label {
	font-weight: 700;
	color: var( --sar-ink );
}

.shortcode-wcpr-modal-light-box .wcpr-comment-helpful-button-up-vote-count,
.shortcode-wcpr-modal-light-box .wcpr-comment-helpful-button-down-vote-count {
	font-size: 12px;
	font-weight: 700;
	color: var( --sar-muted );
}

.shortcode-wcpr-modal-light-box .wcpr-comment-helpful-button.woocommerce-photo-reviews-vote-like {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1.5px solid var( --sar-line );
	background: #ffffff;
	color: var( --sar-muted );
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.shortcode-wcpr-modal-light-box .wcpr-comment-helpful-button.woocommerce-photo-reviews-vote-like:hover {
	border-color: var( --sar-accent );
	color: var( --sar-accent );
	background: var( --sar-accent-soft );
}

/* -------- product / buy block -> Hestia product-card language -------- */
.shortcode-wcpr-modal-light-box .shortcode-wcpr-single-product-summary-content-container {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var( --sar-line ) !important;
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-single-product-summary-meta-title a {
	font-size: 16px;
	font-weight: 800;
	color: var( --sar-ink );
	text-decoration: none;
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-single-product-summary-meta-title a:hover {
	color: var( --sar-accent );
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-single-product-summary-meta-reviews {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-single-product-summary-meta-reviews .star-rating {
	color: var( --sar-gold );
	font-size: 12px;
}

.shortcode-wcpr-modal-light-box .woocommerce-photo-reviews-review-count-container {
	color: var( --sar-muted );
	font-size: 12px;
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-single-product-summary-meta-price .price {
	margin: 10px 0 0;
	font-size: 20px;
	font-weight: 800;
	color: var( --sar-ink );
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-single-product-summary-meta-price .price del {
	margin-right: 7px;
	color: var( --sar-muted );
	font-weight: 500;
	font-size: 14px;
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-single-product-summary-meta-price .price ins {
	color: var( --sar-accent );
	text-decoration: none;
	font-weight: 800;
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-single-product-summary-meta-shop {
	margin-top: 16px;
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-single-product-summary-meta-shop .add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 12px 26px !important;
	background: var( --sar-accent ) !important;
	border: none !important;
	border-radius: 12px !important;
	color: #ffffff !important;
	font-size: 14px;
	font-weight: 800;
	text-transform: none !important;
	letter-spacing: 0;
	box-shadow: 0 12px 22px -10px color-mix( in srgb, var( --sar-accent ) 70%, transparent );
	transition: filter 0.15s ease, transform 0.12s ease;
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-single-product-summary-meta-shop .add_to_cart_button:hover {
	filter: brightness( 1.06 );
	transform: translateY( -1px );
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-single-product-summary-meta-shop .added_to_cart {
	display: none !important;
}

/* close / prev / next - keep the plugin's glyphs, just tidy round targets */
.shortcode-wcpr-modal-light-box .shortcode-wcpr-close,
.shortcode-wcpr-modal-light-box .shortcode-wcpr-prev,
.shortcode-wcpr-modal-light-box .shortcode-wcpr-next {
	border-radius: 50%;
	transition: opacity 0.15s ease;
}

.shortcode-wcpr-modal-light-box .shortcode-wcpr-close:hover,
.shortcode-wcpr-modal-light-box .shortcode-wcpr-prev:hover,
.shortcode-wcpr-modal-light-box .shortcode-wcpr-next:hover {
	opacity: 0.7;
}