/*
 * gooek-product-page runtime stylesheet.
 *
 * Reacts to the gooek-pp-* body-class flags and the --gooek-pp-* custom
 * properties inlined by Support\Css. Everything is scoped under a gooek-pp body
 * class so it can never affect a page where the module is disabled.
 *
 * Baseline (per site owner): the quantity selector and variation/SKU cards are
 * a 1:1 port of autoolstore.com; the Add-to-Cart button keeps Blocksy's own
 * global styles (this file never touches it). No build step -- edit directly.
 */

/* ---------------------------------------------------------------------------
 * Design tokens -- mapped to Blocksy's palette so everything adopts gooek's
 * brand automatically (same mapping autoolstore uses).
 * ------------------------------------------------------------------------- */
.gooek-pp {
	/* Use Blocksy's *semantic* vars (reliable across sites) + safe literals.
	   NOTE: do not map to --theme-palette-color-N slots -- their meaning
	   differs per site (on gooek, color-8 is dark, which turned cards black). */
	--gooek-pp-brand: var(--theme-palette-color-1, #111827);
	--gooek-pp-ink: var(--theme-headings-color, #1a1a1a);
	--gooek-pp-text: var(--theme-font-color, #33373d);
	--gooek-pp-muted: #6b7280;
	--gooek-pp-border: var(--theme-border-color, #e2e8f0);
	--gooek-pp-surface: #ffffff;
	--gooek-pp-surface-alt: #f7f8fa;
	--gooek-pp-display-font: var(--theme-button-font-family, var(--theme-font-family, inherit));
}

/* ---------------------------------------------------------------------------
 * Foundation
 * ------------------------------------------------------------------------- */
.gooek-pp .entry-summary {
	max-width: var(--gooek-pp-container-max, 560px);
}

/* Blocksy puts the gallery and the product information side by side down to
   1200px and drops them onto separate rows below that. The max width above
   exists to keep the information column readable *beside* the gallery; once
   stacked it just strands the content in a narrow block on the left while the
   gallery spans the whole container. From the stacking point down, hand the
   full container back. Mobile is included: it is already effectively
   full-width there, so the rule simply keeps the cap out of the way. */
@media (max-width: 1199.98px) {
	.gooek-pp.gooek-pp-summary-wide .entry-summary {
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
 * Title, rating and price summary
 *
 * Blocksy's own .entry-summary remains the wrapper so its direct-child layer
 * selectors and third-party hooks keep working. Only known layer elements are
 * styled here; the main Add to Cart button is deliberately untouched.
 * ------------------------------------------------------------------------- */
.gooek-pp-has-summary .entry-summary-items > .gooek-pp-eyebrow {
	display: inline-flex;
	width: max-content;
	max-width: 100%;
	margin: 0 0 calc(var(--gooek-pp-block-gap, 20px) * -0.45);
	color: var(--gooek-pp-muted);
	font-family: var(--gooek-pp-display-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.gooek-pp-has-summary .entry-summary-items > .entry-title {
	max-width: 100%;
	font-size: var(--gooek-pp-summary-title-size, 34px);
	line-height: 1.12;
	overflow-wrap: anywhere;
}
.gooek-pp-title-autool .entry-summary-items > .entry-title {
	font-family: var(--gooek-pp-display-font);
	font-weight: 750;
	letter-spacing: -0.025em;
}
.gooek-pp-title-clean .entry-summary-items > .entry-title {
	font-weight: 600;
	letter-spacing: -0.035em;
}
.gooek-pp-title-compact .entry-summary-items > .entry-title {
	font-family: var(--gooek-pp-display-font);
	font-size: max(20px, calc(var(--gooek-pp-summary-title-size, 34px) - 6px));
	font-weight: 700;
	line-height: 1.18;
}
.gooek-pp-has-summary .entry-summary-items > :is(.woocommerce-product-rating, .gooek-pp-rating-empty) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	width: max-content;
	max-width: 100%;
	color: var(--gooek-pp-muted);
	font-size: 13px;
	line-height: 1.4;
}
.gooek-pp-has-summary .entry-summary-items > .woocommerce-product-rating .star-rating {
	margin: 0;
}
.gooek-pp-has-summary .entry-summary-items > .gooek-pp-rating-empty > :first-child {
	color: var(--gooek-pp-brand);
	font-size: 17px;
	letter-spacing: 0.08em;
}
.gooek-pp-has-summary .entry-summary-items > a.gooek-pp-rating-empty {
	text-decoration: none;
	text-underline-offset: 3px;
}
.gooek-pp-has-summary .entry-summary-items > a.gooek-pp-rating-empty:hover,
.gooek-pp-has-summary .entry-summary-items > a.gooek-pp-rating-empty:focus-visible {
	color: var(--gooek-pp-ink);
	text-decoration: underline;
}
.gooek-pp-has-summary .entry-summary-items > .price {
	width: max-content;
	max-width: 100%;
	margin-inline: 0;
	font-family: var(--gooek-pp-display-font);
	font-size: var(--gooek-pp-summary-price-size, 24px);
	font-weight: 750;
	line-height: 1.2;
}
.gooek-pp-price-badge .entry-summary-items > .price {
	display: inline-flex;
	align-items: center;
	padding: 8px 12px;
	border: 1px solid var(--gooek-pp-border);
	border-radius: 8px;
	background: var(--gooek-pp-surface-alt);
}
.gooek-pp-price-minimal .entry-summary-items > .price {
	font-weight: 600;
}
.gooek-pp-has-summary .gooek-pp-price-sync-active .woocommerce-variation-price {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Key Features -- compact list + "View Details" popup trigger
 *
 * Rendered in the short-description slot (or immediately above the purchase
 * form when the theme renders no such layer), so it inherits that slot's
 * spacing and never touches the native Description or its tab.
 * ------------------------------------------------------------------------- */
.gooek-pp .gooek-pp-kf {
	margin: 0;
}
.gooek-pp .gooek-pp-kf__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 8px;
}
.gooek-pp .gooek-pp-kf__title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--gooek-pp-ink);
	font-family: var(--gooek-pp-display-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.gooek-pp .gooek-pp-kf__more {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--gooek-pp-text);
	font-family: var(--gooek-pp-display-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}
/* Padding rather than a bare 20px line box: the visual stays a text link
   (baseline alignment is unaffected) while the tap target grows. */
.gooek-pp .gooek-pp-kf__more--text-link {
	min-height: 32px;
	padding: 6px 2px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.gooek-pp .gooek-pp-kf__more--button {
	min-height: 34px;
	padding: 7px 14px;
	border: 1px solid var(--gooek-pp-border);
	border-radius: var(--gooek-pp-qty-radius, 3px);
	background: var(--gooek-pp-surface);
	box-shadow: none;
	text-decoration: none;
}
.gooek-pp .gooek-pp-kf__more--text-link:hover,
.gooek-pp .gooek-pp-kf__more--text-link:focus-visible {
	color: var(--gooek-pp-ink);
	text-decoration-thickness: 2px;
}
.gooek-pp .gooek-pp-kf__more--button:hover,
.gooek-pp .gooek-pp-kf__more--button:focus-visible {
	border-color: var(--gooek-pp-ink);
	background: var(--gooek-pp-surface-alt);
	color: var(--gooek-pp-ink);
}
.gooek-pp .gooek-pp-kf__more-arrow {
	width: 6px;
	height: 6px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}
.gooek-pp .gooek-pp-kf__list {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gooek-pp .gooek-pp-kf__item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	color: var(--gooek-pp-text);
	font-size: 13.5px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.gooek-pp .gooek-pp-kf__item::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gooek-pp-brand);
	transform: translateY(-2px);
}
.gooek-pp .gooek-pp-kf__label {
	font-weight: 600;
	color: var(--gooek-pp-ink);
}

/* --- List preset: check marks --------------------------------------------- */
.gooek-pp-kf-checks .gooek-pp-kf__item::before {
	width: 13px;
	height: 7px;
	border: 0;
	border-left: 2px solid var(--gooek-pp-brand);
	border-bottom: 2px solid var(--gooek-pp-brand);
	border-radius: 0;
	background: transparent;
	transform: translateY(-1px) rotate(-45deg);
}

/* --- List preset: two columns --------------------------------------------- */
.gooek-pp-kf-grid .gooek-pp-kf__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 18px;
}
@media (max-width: 689.98px) {
	.gooek-pp-kf-grid .gooek-pp-kf__list {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Comfortable touch target for the popup trigger on phones. */
	.gooek-pp .gooek-pp-kf__more--text-link {
		min-height: 40px;
		padding: 10px 2px;
	}
	.gooek-pp .gooek-pp-kf__more--button {
		min-height: 40px;
	}
}

/* ---------------------------------------------------------------------------
 * Shared modal -- one overlay reused by Key Features (and, later, B2B and
 * Reviews). The preset lands on the overlay as data-style.
 * ------------------------------------------------------------------------- */
.gooek-pp-modal-open,
.gooek-pp-modal-open body {
	overflow: hidden;
}
/* The overlay is created by our JS as a direct child of <body>; the
   gooek-pp-modal-* prefix is ours alone, so these rules can only ever match it. */
.gooek-pp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	padding: 20px;
	background: rgba(15, 18, 22, 0.55);
	opacity: 0;
	transition: opacity 0.22s ease;
}
.gooek-pp-modal[hidden] {
	display: none;
}
.gooek-pp-modal.is-open {
	opacity: 1;
}
.gooek-pp-modal__panel {
	display: flex;
	flex-direction: column;
	width: min(560px, 100%);
	max-height: min(80vh, 720px);
	margin: auto;
	overflow: hidden;
	border-radius: 10px;
	background: var(--gooek-pp-surface, #fff);
	box-shadow: 0 24px 60px rgba(15, 18, 22, 0.28);
	transform: translateY(12px);
	transition: transform 0.24s ease;
}
.gooek-pp-modal.is-open .gooek-pp-modal__panel {
	transform: none;
}
.gooek-pp-modal__panel:focus {
	outline: none;
}
.gooek-pp-modal__header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--gooek-pp-border, #e2e8f0);
}
.gooek-pp-modal__title {
	margin: 0;
	color: var(--gooek-pp-ink, #1a1a1a);
	font-family: var(--gooek-pp-display-font, inherit);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
}
.gooek-pp-modal__title[hidden] {
	display: none;
}
.gooek-pp-modal__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 0;
	border: 1px solid var(--gooek-pp-border, #e2e8f0);
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--gooek-pp-ink, #1a1a1a);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.gooek-pp-modal__close:hover,
.gooek-pp-modal__close:focus-visible {
	border-color: var(--gooek-pp-ink, #1a1a1a);
	background: var(--gooek-pp-surface-alt, #f7f8fa);
}
.gooek-pp-modal__body {
	flex: 1 1 auto;
	padding: 18px 20px 22px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	color: var(--gooek-pp-text, #33373d);
	font-size: 14px;
	line-height: 1.65;
}
.gooek-pp-modal__body > div > *:first-child { margin-top: 0; }
.gooek-pp-modal__body > div > *:last-child { margin-bottom: 0; }
.gooek-pp-modal__body img {
	max-width: 100%;
	height: auto;
}
.gooek-pp-kf-modal__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gooek-pp-kf-modal__list li {
	margin: 0;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--gooek-pp-border, #e2e8f0);
}
.gooek-pp-kf-modal__list li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.gooek-pp-kf-modal__label {
	font-weight: 600;
	color: var(--gooek-pp-ink, #1a1a1a);
}

/* --- Modal preset: centered glass card (default) -------------------------- */
.gooek-pp-modal[data-style="center-glass"] .gooek-pp-modal__panel {
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

/* --- Modal preset: slide in from the right -------------------------------- */
.gooek-pp-modal[data-style="slide-right"] {
	padding: 0;
}
.gooek-pp-modal[data-style="slide-right"] .gooek-pp-modal__panel {
	width: min(460px, 100%);
	max-height: none;
	height: 100%;
	margin: 0 0 0 auto;
	border-radius: 0;
	transform: translateX(24px);
}
.gooek-pp-modal[data-style="slide-right"].is-open .gooek-pp-modal__panel {
	transform: none;
}

/* --- Modal preset: bottom sheet ------------------------------------------- */
.gooek-pp-modal[data-style="bottom-sheet"] {
	padding: 0;
}
.gooek-pp-modal[data-style="bottom-sheet"] .gooek-pp-modal__panel {
	width: 100%;
	max-height: 82vh;
	margin: auto 0 0;
	border-radius: 16px 16px 0 0;
	transform: translateY(24px);
}
.gooek-pp-modal[data-style="bottom-sheet"].is-open .gooek-pp-modal__panel {
	transform: none;
}

/* --- Modal preset: minimal ------------------------------------------------ */
.gooek-pp-modal[data-style="minimal"] {
	background: rgba(15, 18, 22, 0.35);
}
.gooek-pp-modal[data-style="minimal"] .gooek-pp-modal__panel {
	border: 1px solid var(--gooek-pp-border, #e2e8f0);
	border-radius: 2px;
	box-shadow: none;
}
.gooek-pp-modal[data-style="minimal"] .gooek-pp-modal__header {
	padding-bottom: 12px;
}

/* Small screens: the centered presets become sheets so the panel never exceeds
   the viewport or hides its close control behind browser chrome. The drawer
   preset keeps its own full-height rule (higher specificity) -- a full-screen
   drawer is the expected phone mapping for it. */
@media (max-width: 689.98px) {
	.gooek-pp-modal {
		padding: 0;
	}
	.gooek-pp-modal .gooek-pp-modal__panel {
		width: 100%;
		max-height: 86vh;
		height: auto;
		margin: auto 0 0;
		border-radius: 14px 14px 0 0;
	}
}

/* Motion opt-out. */
.gooek-pp-no-motion .gooek-pp *[class*="gooek-pp-"] {
	transition: none !important;
	animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.gooek-pp *[class*="gooek-pp-"] {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Quantity selector -- autoolstore 1:1
 *
 * Resets Blocksy's absolutely-positioned steppers to a static  − input +  row
 * and re-skins with our tokens. Sizing from the CSS vars (button size / input
 * width / radius).
 * ------------------------------------------------------------------------- */
.gooek-pp-has-atc .ct-product-add-to-cart .quantity {
	--gpp-qbtn: var(--gooek-pp-qty-button-size, 44px);
	--gpp-qinput: var(--gooek-pp-qty-input-width, 64px);
	display: inline-flex;
	align-items: stretch;
	width: auto;
	min-width: calc((var(--gpp-qbtn) * 2) + var(--gpp-qinput));
	min-height: var(--gpp-qbtn);
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--gooek-pp-border);
	border-radius: var(--gooek-pp-qty-radius, 3px);
	background: var(--gooek-pp-surface);
	box-shadow: none;
}
.gooek-pp-has-atc .ct-cart-actions .quantity {
	flex: 0 0 auto;
	max-width: 100%;
}
.gooek-pp-has-atc .ct-product-add-to-cart .quantity :is(button, .ct-increase, .ct-decrease) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: static !important;
	inset: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	flex: 0 0 var(--gpp-qbtn);
	width: var(--gpp-qbtn);
	min-width: var(--gpp-qbtn);
	/* Blocksy gives the steppers `height: calc(50% - 1px)` (they are stacked
	   half-height arrows in its own layout). An explicit height defeats the
	   container's `align-items: stretch`, which is what left the buttons at
	   their 44px min-height inside a 55px box while the input filled it.
	   Back to auto so both stretch to the same content box. */
	height: auto;
	min-height: var(--gpp-qbtn);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gooek-pp-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.gooek-pp-has-atc .ct-product-add-to-cart .quantity .ct-decrease { order: 1; }
.gooek-pp-has-atc .ct-product-add-to-cart .quantity input.qty { order: 2; }
.gooek-pp-has-atc .ct-product-add-to-cart .quantity .ct-increase { order: 3; }
.gooek-pp-has-atc .ct-product-add-to-cart .quantity .ct-decrease::before {
	content: "\2212";
	font-family: var(--gooek-pp-display-font);
	font-size: 20px;
	line-height: 1;
	transform: none;
}
.gooek-pp-has-atc .ct-product-add-to-cart .quantity .ct-increase::before {
	content: "\002B";
	font-family: var(--gooek-pp-display-font);
	font-size: 20px;
	line-height: 1;
	transform: none;
}
/* Same interaction as autoolstore (brand fill on hover); white text keeps
   contrast on gooek's darker brand where autoolstore used ink on yellow. */
.gooek-pp-has-atc .ct-product-add-to-cart .quantity :is(button, .ct-increase, .ct-decrease):hover {
	background: var(--gooek-pp-brand);
	color: #fff;
}
.gooek-pp-has-atc .ct-product-add-to-cart .quantity input.qty {
	flex: 0 0 var(--gpp-qinput);
	width: var(--gpp-qinput);
	min-width: var(--gpp-qinput);
	/* Blocksy's `div.quantity input[type="number"] { height: inherit }` copies
	   the container's *specified* height, so the input ignored any container
	   padding (the segmented preset adds 4px) and could out-grow the buttons.
	   Stretching instead keeps input and steppers on one content box. */
	height: auto;
	min-height: var(--gpp-qbtn);
	margin: 0;
	padding: 0 6px;
	border: 0;
	border-left: 1px solid var(--gooek-pp-border);
	border-right: 1px solid var(--gooek-pp-border);
	border-radius: 0;
	background: transparent;
	color: var(--gooek-pp-ink);
	text-align: center;
	font-weight: 700;
	-moz-appearance: textfield;
}
.gooek-pp-has-atc .ct-product-add-to-cart .quantity input.qty::-webkit-outer-spin-button,
.gooek-pp-has-atc .ct-product-add-to-cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --- Quantity preset: compact --------------------------------------------- */
.gooek-pp-qty-compact.gooek-pp-has-atc .ct-product-add-to-cart .quantity {
	--gpp-qbtn: max(32px, calc(var(--gooek-pp-qty-button-size, 44px) - 8px));
	--gpp-qinput: max(40px, calc(var(--gooek-pp-qty-input-width, 64px) - 12px));
}
.gooek-pp-qty-compact.gooek-pp-has-atc .ct-product-add-to-cart .quantity :is(.ct-increase, .ct-decrease)::before {
	font-size: 17px;
}
.gooek-pp-qty-compact.gooek-pp-has-atc .ct-product-add-to-cart .quantity input.qty {
	font-size: 14px;
}

/* --- Quantity preset: segmented pill --------------------------------------- */
.gooek-pp-qty-segmented.gooek-pp-has-atc .ct-product-add-to-cart .quantity {
	gap: 4px;
	padding: 4px;
	overflow: visible;
	border-color: transparent;
	border-radius: 999px;
	background: var(--gooek-pp-surface-alt);
}
.gooek-pp-qty-segmented.gooek-pp-has-atc .ct-product-add-to-cart .quantity :is(button, .ct-increase, .ct-decrease) {
	border-radius: 50%;
	background: var(--gooek-pp-surface);
}
.gooek-pp-qty-segmented.gooek-pp-has-atc .ct-product-add-to-cart .quantity input.qty {
	border-left: 0;
	border-right: 0;
	background: transparent;
}

/* ---------------------------------------------------------------------------
 * Variation / SKU cards -- autoolstore 1:1
 *
 * The native <select> is kept for form submission but visually hidden; a grid
 * of card buttons mirrors it (state synced by variation-cards.js).
 * ------------------------------------------------------------------------- */
/* gooek's Blocksy Companion renders its own swatches (.ct-swatch-container)
   alongside the dropdown we card-ify. Hide those so only the autoolstore-style
   cards show (autoolstore itself runs plain dropdowns, no Blocksy swatches). */
.gooek-pp-variation-cards .ct-variation-swatches > .ct-swatch-container {
	display: none !important;
}
/* Our "Clear selection" link replaces Woo's native reset link. */
.gooek-pp-variation-cards .reset_variations {
	display: none !important;
}

.gooek-pp-variation-cards table.variations {
	margin-bottom: 20px;
}
.gooek-pp-variation-cards table.variations tr {
	display: block;
	margin-bottom: 14px;
}
.gooek-pp-variation-cards table.variations :is(th, td) {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: start;
}
.gooek-pp-variation-cards table.variations th.label {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}
.gooek-pp-variation-cards table.variations th.label label {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
	color: var(--gooek-pp-muted);
	font-family: var(--gooek-pp-display-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.gooek-pp-variation-cards .gooek-pp-variation-field {
	display: block;
	width: 100%;
}
.gooek-pp-variation-cards .gooek-pp-variation-select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.gooek-pp-variation-cards .gooek-pp-variation-grid {
	display: grid;
	grid-template-columns: repeat(var(--gooek-pp-variation-auto-columns, 4), minmax(0, 1fr));
	gap: 8px;
	width: 100%;
}
.gooek-pp-variation-cards .gooek-pp-variation-grid[data-gooek-variation-layout="fixed"] {
	grid-template-columns: repeat(var(--gooek-pp-variation-columns, 4), minmax(0, 1fr));
}
.gooek-pp-variation-cards .gooek-pp-variation-grid[data-gooek-variation-count="1"] {
	grid-template-columns: minmax(0, 1fr);
}
.gooek-pp-variation-cards .gooek-pp-variation-grid[data-gooek-variation-force-columns="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gooek-pp-variation-cards .gooek-pp-variation-grid .gooek-pp-variation-card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: var(--gooek-pp-variation-card-height, 56px);
	width: 100%;
	padding: 10px;
	border: 1px solid var(--gooek-pp-border);
	border-radius: var(--gooek-pp-variation-card-radius, 3px);
	background-color: var(--gooek-pp-surface);
	background-image: none;
	color: var(--gooek-pp-ink);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	text-align: center;
	white-space: normal;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.gooek-pp-variation-cards .gooek-pp-variation-grid .gooek-pp-variation-card strong {
	display: block;
	min-width: 0;
	max-width: 100%;
	color: inherit;
	font-family: var(--gooek-pp-display-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.22;
	text-transform: uppercase;
	overflow-wrap: break-word;
	word-break: normal;
}
.gooek-pp-variation-cards .gooek-pp-variation-grid .gooek-pp-variation-card:hover {
	border-color: var(--gooek-pp-ink);
}
.gooek-pp-variation-cards .gooek-pp-variation-grid .gooek-pp-variation-card.is-active {
	border-color: var(--gooek-pp-brand);
	background: var(--gooek-pp-surface-alt);
	background: color-mix(in srgb, var(--gooek-pp-brand) 8%, #fff);
	box-shadow: inset 0 0 0 1px var(--gooek-pp-brand);
}
.gooek-pp-variation-cards .gooek-pp-variation-grid .gooek-pp-variation-card.is-disabled,
.gooek-pp-variation-cards .gooek-pp-variation-grid .gooek-pp-variation-card[disabled] {
	opacity: 0.42;
	cursor: not-allowed;
}
.gooek-pp-variation-cards .gooek-pp-variation-clear {
	display: inline-flex;
	width: max-content;
	margin: 0 0 0 auto;
	color: var(--gooek-pp-text);
	font-family: var(--gooek-pp-display-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.gooek-pp-variation-cards .gooek-pp-variation-clear[hidden] {
	display: none !important;
}
.gooek-pp-variation-cards .gooek-pp-variation-clear:hover,
.gooek-pp-variation-cards .gooek-pp-variation-clear:focus {
	color: var(--gooek-pp-ink);
	text-decoration-thickness: 2px;
}

/* --- Variation preset: outline cards -------------------------------------- */
.gooek-pp-variation-outline .gooek-pp-variation-grid .gooek-pp-variation-card {
	border-width: 2px;
	background-color: transparent;
}
.gooek-pp-variation-outline .gooek-pp-variation-grid .gooek-pp-variation-card.is-active {
	border-color: var(--gooek-pp-brand);
	background: transparent;
	box-shadow: none;
}

/* --- Variation preset: soft surface cards ---------------------------------- */
.gooek-pp-variation-soft .gooek-pp-variation-grid .gooek-pp-variation-card {
	border-color: transparent;
	border-radius: max(8px, var(--gooek-pp-variation-card-radius, 3px));
	background-color: var(--gooek-pp-surface-alt);
}
.gooek-pp-variation-soft .gooek-pp-variation-grid .gooek-pp-variation-card:hover {
	border-color: transparent;
	background-color: color-mix(in srgb, var(--gooek-pp-brand) 6%, var(--gooek-pp-surface-alt));
}
.gooek-pp-variation-soft .gooek-pp-variation-grid .gooek-pp-variation-card.is-active {
	border-color: transparent;
	box-shadow: inset 0 0 0 2px var(--gooek-pp-brand);
}

/* --- Selected-variation description, moved below the cards ----------------- */
.gooek-pp .gooek-pp-variation-description {
	margin: -6px 0 16px;
	color: var(--gooek-pp-text);
	font-size: 13.5px;
	line-height: 1.6;
}
.gooek-pp .gooek-pp-variation-description[hidden] {
	display: none !important;
}
.gooek-pp .gooek-pp-variation-description > *:first-child { margin-top: 0; }
.gooek-pp .gooek-pp-variation-description > *:last-child { margin-bottom: 0; }
/* WooCommerce still prints its own (now empty) description wrapper. */
.gooek-pp .woocommerce-variation-description:empty {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Smooth variation switching
 *
 * WooCommerce blocks the form with a white overlay while it fetches variation
 * data and reveals the variation panel with a slide. The overlay is hidden here
 * and the slide is completed instantly by variation-cards.js, so choosing a
 * variation does not make the purchase column jump.
 * ------------------------------------------------------------------------- */
.gooek-pp-variation-smooth .variations_form .blockUI.blockOverlay {
	display: none !important;
}
.gooek-pp-variation-smooth .variations_form .single_variation {
	transition: none !important;
}

/* ---------------------------------------------------------------------------
 * Mobile purchase row
 *
 * Quantity and Add to Cart share one row while it fits. Only geometry is set
 * here -- the button's colours, hover and focus stay Blocksy's.
 * ------------------------------------------------------------------------- */
@media (max-width: 689.98px) {
	.gooek-pp-mobile-row.gooek-pp-has-atc .ct-product-add-to-cart .ct-cart-actions {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 10px;
	}
	.gooek-pp-mobile-row.gooek-pp-has-atc .ct-product-add-to-cart .ct-cart-actions .quantity {
		flex: 0 0 auto;
	}
	.gooek-pp-mobile-row.gooek-pp-has-atc .ct-product-add-to-cart .ct-cart-actions .single_add_to_cart_button {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Purchase stack -- the ordered modules below the Add-to-Cart form
 *
 * One flow container owns the rhythm, so each module only styles itself and
 * a disabled module leaves no gap behind (it emits no element at all).
 * ------------------------------------------------------------------------- */
.gooek-pp .gooek-pp-stack {
	display: flex;
	flex-direction: column;
	gap: var(--gooek-pp-purchase-stack-gap, 16px);
	margin-top: var(--gooek-pp-purchase-stack-gap, 16px);
}
.gooek-pp .gooek-pp-stack__item {
	min-width: 0;
}

/* --- Dividers between modules ----------------------------------------------
 *
 * Each module carries its own "line above this one" choice, applied by PHP as
 * `is-divided`. `:not(:first-child)` is what keeps this honest: a module that
 * is disabled or has nothing to say emits no element at all (see
 * PurchaseStack::build), so whichever module ends up first never draws a line
 * above the top of the stack no matter which boxes are ticked.
 *
 * While the master switch is on the container's gap is dropped and every seam
 * states its own spacing, so a seam with a line and a seam without one can sit
 * in the same stack without one of them collapsing shut. Flex-item margins
 * never collapse and padding cannot collapse at all, so neither value is
 * silently swallowed by a module's own first-child margin. */
.gooek-pp.gooek-pp-stack-dividers .gooek-pp-stack {
	gap: 0;
}
/* The line itself -- border, colour and both spacings -- is emitted per seam by
   Support\Css::divider_rules(), because each seam may override any of them.
   Only the parts that are the same for every seam live here.

   Seam the merchant left unticked: no line, and the ordinary module gap is
   restored by hand because the container no longer supplies one. */
.gooek-pp.gooek-pp-stack-dividers .gooek-pp-stack__item:not(.is-divided):not(:first-child) {
	margin-top: var(--gooek-pp-purchase-stack-gap, 16px);
}
/* The sections module carries its own top rule for the standalone case. Behind
   a divider that would read as a double line, so it defers -- but a sections
   module with no line above it keeps its rule. */
.gooek-pp.gooek-pp-stack-dividers .gooek-pp-stack__item.is-divided:not(:first-child) .gooek-pp-sections {
	border-top: 0;
}

.gooek-pp .gooek-pp-after-cart > *:first-child { margin-top: 0; }
.gooek-pp .gooek-pp-after-cart > *:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
 * Trust badges -- three presets, all driven by the gooek-pp-trust-* body flag
 * ------------------------------------------------------------------------- */
.gooek-pp .gooek-pp-trust {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gooek-pp .gooek-pp-trust__item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	min-width: 0;
	color: var(--gooek-pp-text);
}
.gooek-pp .gooek-pp-trust__media {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--gooek-pp-brand);
}
.gooek-pp .gooek-pp-trust__image {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}
.gooek-pp .gooek-pp-trust__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.gooek-pp .gooek-pp-trust__title {
	color: var(--gooek-pp-ink);
	font-family: var(--gooek-pp-display-font);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	overflow-wrap: anywhere;
}
.gooek-pp .gooek-pp-trust__text {
	color: var(--gooek-pp-muted);
	font-size: 12px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* Presets below decide how a badge *looks*; how many sit on a line is the
   wrapping block's job further down, so the two can be combined freely. */

/* --- Preset: icon cards ---------------------------------------------------- */
.gooek-pp-trust-cards .gooek-pp-trust__item {
	flex-direction: column;
	gap: 8px;
	padding: 14px 10px;
	border: 1px solid var(--gooek-pp-border);
	border-radius: var(--gooek-pp-variation-card-radius, 3px);
	background: var(--gooek-pp-surface);
	text-align: center;
}
.gooek-pp-trust-cards .gooek-pp-trust__body {
	align-items: center;
}

/* --- Preset: inline row ----------------------------------------------------
   Pair with the "Never wrap" wrapping option for the original single-row band. */
.gooek-pp-trust-inline-row .gooek-pp-trust {
	gap: 14px;
	padding: 12px 0;
	border-block: 1px solid var(--gooek-pp-border);
}

/* --- Preset: compact list -------------------------------------------------- */
.gooek-pp-trust-compact .gooek-pp-trust {
	gap: 6px;
}
.gooek-pp-trust-compact .gooek-pp-trust__item {
	gap: 8px;
}
.gooek-pp-trust-compact .gooek-pp-trust__body {
	flex-direction: row;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}
.gooek-pp-trust-compact .gooek-pp-trust__title {
	font-size: 12px;
}

/* --- Preset: stacked (icon above centred text) ----------------------------- */
.gooek-pp-trust-stacked .gooek-pp-trust__item {
	flex-direction: column;
	gap: 8px;
	text-align: center;
}
.gooek-pp-trust-stacked .gooek-pp-trust__body {
	align-items: center;
}

/* --- Preset: list (one per row, ruled) --------------------------------------
   The one preset that does dictate its own track layout: "one per row" is what
   it is, so it outranks the wrapping options below rather than being overridden
   into a multi-column grid of ruled cells. The wrapping setting still applies
   to every other preset. */
.gooek-pp.gooek-pp-trust-list .gooek-pp-trust {
	grid-template-columns: minmax(0, 1fr);
	grid-auto-flow: row;
	gap: 0;
}
.gooek-pp-trust-list .gooek-pp-trust__item {
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--gooek-pp-border);
}
.gooek-pp-trust-list .gooek-pp-trust__item:first-child {
	padding-top: 0;
}
.gooek-pp-trust-list .gooek-pp-trust__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* --- Preset: pills --------------------------------------------------------- */
.gooek-pp-trust-pill .gooek-pp-trust__item {
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid var(--gooek-pp-border);
	border-radius: 999px;
	background: var(--gooek-pp-surface-alt);
}
.gooek-pp-trust-pill .gooek-pp-trust__body {
	flex-direction: row;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}
.gooek-pp-trust-pill .gooek-pp-trust__title {
	font-size: 12px;
}

/* --- Preset: plain --------------------------------------------------------- */
.gooek-pp-trust-plain .gooek-pp-trust__item {
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
}

/* --- Wrapping ---------------------------------------------------------------
 *
 * Three behaviours, applied on top of whichever preset is active so a merchant
 * can pick a look and a wrapping rule independently.
 *
 * "Fit to content" is the one worth explaining: `auto-fit` + `minmax()` lets the
 * browser decide how many badges fit on a line from the minimum width, so long
 * titles push a badge onto the next line on their own instead of being squeezed
 * or clipped. `1fr` as the max lets the row still fill the width once it has
 * settled on a count. This is why the minimum-width setting is responsive --
 * it is the real control over "same line or new line" at each breakpoint. */
.gooek-pp-trustwrap-auto .gooek-pp-trust {
	grid-template-columns: repeat(auto-fit, minmax(min(var(--gooek-pp-trust-min-width, 150px), 100%), 1fr));
	grid-auto-flow: row;
}
.gooek-pp-trustwrap-fixed .gooek-pp-trust {
	grid-template-columns: repeat(var(--gooek-pp-trust-columns, 3), minmax(0, 1fr));
	grid-auto-flow: row;
}
/* One row that never breaks; badges shrink instead, and their text wraps
   internally rather than overflowing the column. */
.gooek-pp-trustwrap-nowrap .gooek-pp-trust {
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-template-columns: none;
}
.gooek-pp-trustwrap-nowrap .gooek-pp-trust__item {
	min-width: 0;
}

/* --- Alignment ------------------------------------------------------------- */
.gooek-pp-trustalign-center .gooek-pp-trust__item {
	justify-content: center;
	text-align: center;
}
.gooek-pp-trustalign-center .gooek-pp-trust__body {
	align-items: center;
}
/* A single ruled row per badge reads better left-aligned even when the rest of
   the block is centred, so the list preset keeps its icon against the edge. */
.gooek-pp-trustalign-center.gooek-pp-trust-list .gooek-pp-trust__item {
	justify-content: flex-start;
	text-align: left;
}
.gooek-pp-trustalign-center.gooek-pp-trust-list .gooek-pp-trust__body {
	align-items: flex-start;
}

/* ---------------------------------------------------------------------------
 * B2B "Request a Quote"
 *
 * Deliberately secondary to Blocksy's Add-to-Cart button: no brand fill, no
 * competing shadow. Only the quote dialog's own content is styled here.
 * ------------------------------------------------------------------------- */
.gooek-pp .gooek-pp-b2b {
	display: block;
}
.gooek-pp .gooek-pp-b2b__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 18px;
	color: var(--gooek-pp-ink);
	font-family: var(--gooek-pp-display-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.gooek-pp .gooek-pp-b2b__trigger--outline {
	border: 1px solid var(--gooek-pp-ink);
	border-radius: var(--gooek-pp-qty-radius, 3px);
	background: transparent;
	box-shadow: none;
}
.gooek-pp .gooek-pp-b2b__trigger--solid {
	border: 1px solid var(--gooek-pp-border);
	border-radius: var(--gooek-pp-qty-radius, 3px);
	background: var(--gooek-pp-surface-alt);
	box-shadow: none;
}
.gooek-pp .gooek-pp-b2b__trigger--link {
	width: max-content;
	min-height: 32px;
	padding: 6px 2px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.gooek-pp .gooek-pp-b2b__trigger--outline:hover,
.gooek-pp .gooek-pp-b2b__trigger--outline:focus-visible {
	background: var(--gooek-pp-surface-alt);
}
.gooek-pp .gooek-pp-b2b__trigger--solid:hover,
.gooek-pp .gooek-pp-b2b__trigger--solid:focus-visible {
	border-color: var(--gooek-pp-ink);
}
.gooek-pp .gooek-pp-b2b__trigger--link:hover,
.gooek-pp .gooek-pp-b2b__trigger--link:focus-visible {
	text-decoration-thickness: 2px;
}
/* Inside Blocksy's floating bar the action has to stay small and inline. */
.gooek-pp .gooek-pp-b2b--floating {
	display: inline-flex;
	align-items: center;
}
.gooek-pp .gooek-pp-b2b--floating .gooek-pp-b2b__trigger {
	width: auto;
	min-height: 36px;
	padding: 6px 10px;
	font-size: 12px;
	white-space: nowrap;
}

/* Quote dialog content. */
.gooek-pp-modal .gooek-pp-b2b__context {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 16px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--gooek-pp-surface-alt, #f7f8fa);
	font-size: 13px;
}
.gooek-pp-modal .gooek-pp-b2b__context-label {
	color: var(--gooek-pp-muted, #6b7280);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.gooek-pp-modal .gooek-pp-b2b__context-name {
	color: var(--gooek-pp-ink, #1a1a1a);
	font-weight: 600;
}
.gooek-pp-modal .gooek-pp-b2b__context-sku {
	color: var(--gooek-pp-muted, #6b7280);
	font-size: 12px;
}
.gooek-pp-modal .gooek-pp-b2b__form > *:first-child { margin-top: 0; }
.gooek-pp-modal .gooek-pp-b2b__form > *:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
 * Shipping / availability microcopy
 * ------------------------------------------------------------------------- */
.gooek-pp .gooek-pp-shipping {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--gooek-pp-text);
	font-size: 13px;
	line-height: 1.5;
}
.gooek-pp .gooek-pp-shipping__media {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 1px;
	color: var(--gooek-pp-brand);
}
.gooek-pp .gooek-pp-shipping__body {
	min-width: 0;
}
.gooek-pp .gooek-pp-shipping__note > *:first-child { margin-top: 0; }
.gooek-pp .gooek-pp-shipping__note > *:last-child { margin-bottom: 0; }
.gooek-pp .gooek-pp-shipping__availability {
	color: var(--gooek-pp-muted);
	font-size: 12.5px;
}

/* ---------------------------------------------------------------------------
 * Purchasable extended warranty
 * ------------------------------------------------------------------------- */
.gooek-pp .gooek-pp-warranty {
	min-width: 0;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}
.gooek-pp .gooek-pp-warranty__title {
	width: 100%;
	margin: 0 0 9px;
	padding: 0;
	color: var(--gooek-pp-ink);
	font-family: var(--gooek-pp-display-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}
.gooek-pp .gooek-pp-warranty__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
.gooek-pp .gooek-pp-warranty__option {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--gooek-pp-border);
	border-radius: 6px;
	background: var(--gooek-pp-surface);
	color: var(--gooek-pp-ink);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.gooek-pp .gooek-pp-warranty__option:hover {
	border-color: var(--gooek-pp-ink);
}
.gooek-pp .gooek-pp-warranty__option.is-selected {
	border-color: var(--gooek-pp-brand);
	background: color-mix(in srgb, var(--gooek-pp-brand) 7%, var(--gooek-pp-surface));
}
.gooek-pp .gooek-pp-warranty__option input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--gooek-pp-brand);
}
.gooek-pp .gooek-pp-warranty__option input:focus-visible {
	outline: 2px solid var(--gooek-pp-brand);
	outline-offset: 3px;
}
.gooek-pp .gooek-pp-warranty__copy {
	display: grid;
	gap: 2px;
	min-width: 0;
}
.gooek-pp .gooek-pp-warranty__label {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
}
.gooek-pp .gooek-pp-warranty__description {
	color: var(--gooek-pp-muted);
	font-size: 11.5px;
	line-height: 1.35;
}
.gooek-pp .gooek-pp-warranty__price {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}
.gooek-pp .gooek-pp-warranty__price ins { text-decoration: none; }
.gooek-pp .gooek-pp-warranty__select {
	width: 100%;
	min-height: 44px;
	margin: 0;
}

/* Radio-list preset: one quiet full-width row per plan. */
.gooek-pp-warranty-radio .gooek-pp-warranty__options {
	grid-template-columns: 1fr;
	gap: 0;
	border-block: 1px solid var(--gooek-pp-border);
}
.gooek-pp-warranty-radio .gooek-pp-warranty__option {
	min-height: 48px;
	padding-inline: 2px;
	border: 0;
	border-radius: 0;
}
.gooek-pp-warranty-radio .gooek-pp-warranty__option + .gooek-pp-warranty__option {
	border-top: 1px solid var(--gooek-pp-border);
}

@media (max-width: 689.98px) {
	.gooek-pp .gooek-pp-warranty__options {
		grid-template-columns: 1fr;
	}
	.gooek-pp .gooek-pp-warranty__option {
		min-height: 52px;
	}
}

/* ---------------------------------------------------------------------------
 * Frequently Bought Together
 * ------------------------------------------------------------------------- */
.gooek-pp .gooek-pp-fbt {
	padding: 18px;
	border: 1px solid var(--gooek-pp-border);
	border-radius: 4px;
	background: var(--gooek-pp-surface);
}
.gooek-pp .gooek-pp-fbt__title {
	margin: 0 0 14px;
	font-family: var(--gooek-pp-display-font);
	font-size: 17px;
	line-height: 1.25;
}
.gooek-pp .gooek-pp-fbt__items {
	display: grid;
	gap: 8px;
}
.gooek-pp .gooek-pp-fbt__item {
	display: grid;
	grid-template-columns: 22px 58px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 10px;
	border: 1px solid transparent;
	color: var(--gooek-pp-ink);
	cursor: pointer;
}
.gooek-pp .gooek-pp-fbt__item--main {
	cursor: default;
}
.gooek-pp .gooek-pp-fbt__item input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--gooek-pp-brand);
}
.gooek-pp .gooek-pp-fbt__item input:focus-visible {
	outline: 2px solid var(--gooek-pp-brand);
	outline-offset: 3px;
}
.gooek-pp .gooek-pp-fbt__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	overflow: hidden;
	background: var(--gooek-pp-surface-alt);
}
.gooek-pp .gooek-pp-fbt__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gooek-pp .gooek-pp-fbt__body {
	display: grid;
	gap: 3px;
	min-width: 0;
}
.gooek-pp .gooek-pp-fbt__name {
	color: var(--gooek-pp-ink);
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.gooek-pp .gooek-pp-fbt__name:hover,
.gooek-pp .gooek-pp-fbt__name:focus-visible {
	color: var(--gooek-pp-brand);
}
.gooek-pp .gooek-pp-fbt__meta {
	color: var(--gooek-pp-muted);
	font-size: 12px;
}
.gooek-pp .gooek-pp-fbt__price {
	font-weight: 700;
	white-space: nowrap;
}
.gooek-pp .gooek-pp-fbt__price del,
.gooek-pp .gooek-pp-fbt__price ins {
	display: block;
}
.gooek-pp .gooek-pp-fbt__price ins {
	text-decoration: none;
}
.gooek-pp .gooek-pp-fbt__action {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px 14px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--gooek-pp-border);
}
.gooek-pp .gooek-pp-fbt__total-label {
	color: var(--gooek-pp-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.gooek-pp .gooek-pp-fbt__total {
	grid-column: 1;
	font-family: var(--gooek-pp-display-font);
	font-size: 20px;
}
.gooek-pp .gooek-pp-fbt__add {
	grid-column: 2;
	grid-row: 1 / span 2;
	min-height: 44px;
	padding-inline: 18px;
	border-color: var(--gooek-pp-ink);
	background: var(--gooek-pp-ink);
	color: #fff;
}
.gooek-pp .gooek-pp-fbt__add:hover,
.gooek-pp .gooek-pp-fbt__add:focus-visible {
	border-color: var(--gooek-pp-brand);
	background: var(--gooek-pp-brand);
	color: var(--gooek-pp-ink);
}
.gooek-pp .gooek-pp-fbt__add[disabled] {
	opacity: 0.48;
	cursor: not-allowed;
}
.gooek-pp .gooek-pp-fbt__status {
	grid-column: 1 / -1;
	min-height: 1.35em;
	margin: 6px 0 0;
	color: var(--gooek-pp-muted);
	font-size: 13px;
}
.gooek-pp .gooek-pp-fbt__status.is-error { color: #b42318; }
.gooek-pp .gooek-pp-fbt__status.is-success { color: #137333; }

/* Default clean list: light dividers, no competing card surfaces. */
.gooek-pp-fbt-autool .gooek-pp-fbt__item + .gooek-pp-fbt__item {
	border-top-color: var(--gooek-pp-border);
}

/* Card preset. */
.gooek-pp-fbt-cards .gooek-pp-fbt__items {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gooek-pp-fbt-cards .gooek-pp-fbt__item {
	grid-template-columns: 22px 54px minmax(0, 1fr);
	border-color: var(--gooek-pp-border);
	background: var(--gooek-pp-surface-alt);
}
.gooek-pp-fbt-cards .gooek-pp-fbt__price {
	grid-column: 3;
	padding-left: 0;
}

/* Compact checklist preset. */
.gooek-pp-fbt-compact .gooek-pp-fbt {
	padding: 14px;
}
.gooek-pp-fbt-compact .gooek-pp-fbt__item {
	grid-template-columns: 22px minmax(0, 1fr) auto;
	min-height: 44px;
	padding: 6px 4px;
}
.gooek-pp-fbt-compact .gooek-pp-fbt__media {
	display: none;
}

@media (max-width: 689.98px) {
	.gooek-pp .gooek-pp-fbt {
		padding: 14px;
	}
	.gooek-pp .gooek-pp-fbt__item,
	.gooek-pp-fbt-cards .gooek-pp-fbt__item {
		grid-template-columns: 22px 48px minmax(0, 1fr);
		gap: 8px;
		padding-inline: 4px;
	}
	.gooek-pp .gooek-pp-fbt__media {
		width: 48px;
		height: 48px;
	}
	.gooek-pp .gooek-pp-fbt__price,
	.gooek-pp-fbt-cards .gooek-pp-fbt__price {
		grid-column: 3;
	}
	.gooek-pp-fbt-cards .gooek-pp-fbt__items {
		grid-template-columns: 1fr;
	}
	.gooek-pp-fbt-compact .gooek-pp-fbt__item {
		grid-template-columns: 22px minmax(0, 1fr) auto;
	}
	.gooek-pp .gooek-pp-fbt__action {
		grid-template-columns: 1fr auto;
	}
	.gooek-pp .gooek-pp-fbt__add {
		grid-column: 1 / -1;
		grid-row: auto;
		width: 100%;
		margin-top: 8px;
	}
}

/* ---------------------------------------------------------------------------
 * Sticky purchase bar (the theme's) and section navigation (ours)
 *
 * The bar is never re-rendered here -- only hidden per tier, and used as the
 * offset the contact widget's floating button lifts above.
 * ------------------------------------------------------------------------- */
@media (min-width: 1000px) {
	.gooek-pp-no-sticky-desktop .ct-floating-bar { display: none !important; }
	.gooek-pp-no-section-nav-desktop .gooek-pp-section-nav { display: none; }
}
@media (min-width: 690px) and (max-width: 999.98px) {
	.gooek-pp-no-sticky-tablet .ct-floating-bar { display: none !important; }
	.gooek-pp-no-section-nav-tablet .gooek-pp-section-nav { display: none; }
}
@media (max-width: 689.98px) {
	.gooek-pp-no-sticky-mobile .ct-floating-bar { display: none !important; }
	.gooek-pp-no-section-nav-mobile .gooek-pp-section-nav { display: none; }
}

/* Collision offset: while the bar is up, the contact widget's floating button
   moves above it instead of overlapping. Transform only -- no layout shift. */
.gooek-pp.gooek-pp-sticky-visible .gooek-contact-fab {
	transform: translateY(calc(-1 * var(--gooek-pp-sticky-height, 0px)));
	transition: transform 0.25s ease;
}

/* The option the sticky button sent the visitor to. */
.gooek-pp .gooek-pp-variation-field--wanted .gooek-pp-variation-grid {
	outline: 2px solid var(--gooek-pp-brand);
	outline-offset: 6px;
	border-radius: 4px;
}

.gooek-pp .gooek-pp-section-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	margin: 0 0 24px;
	background: var(--gooek-pp-surface);
}
.gooek-pp .gooek-pp-section-nav__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	list-style: none;
}
.gooek-pp .gooek-pp-section-nav__list::-webkit-scrollbar {
	display: none;
}
.gooek-pp .gooek-pp-section-nav__item {
	margin: 0;
	flex: 0 0 auto;
}
.gooek-pp .gooek-pp-section-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 14px;
	color: var(--gooek-pp-muted);
	font-family: var(--gooek-pp-display-font);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.gooek-pp .gooek-pp-section-nav__link:hover,
.gooek-pp .gooek-pp-section-nav__link:focus-visible {
	color: var(--gooek-pp-ink);
}

/* --- Nav preset: prominent bar --------------------------------------------- */
.gooek-pp-nav-prominent .gooek-pp-section-nav {
	border-block: 1px solid var(--gooek-pp-border);
}
.gooek-pp-nav-prominent .gooek-pp-section-nav__link.is-active {
	color: var(--gooek-pp-ink);
	background: var(--gooek-pp-surface-alt);
}

/* --- Nav preset: fading underline ------------------------------------------ */
.gooek-pp-nav-fade .gooek-pp-section-nav {
	border-bottom: 1px solid var(--gooek-pp-border);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.gooek-pp-nav-fade .gooek-pp-section-nav__link {
	border-bottom: 2px solid transparent;
}
.gooek-pp-nav-fade .gooek-pp-section-nav__link.is-active {
	border-bottom-color: var(--gooek-pp-brand);
	color: var(--gooek-pp-ink);
}

/* ---------------------------------------------------------------------------
 * Reviews
 *
 * Only the controls this plugin adds are styled. The theme's own review
 * summary, distribution bars, titles and images are left untouched -- this
 * module wraps that output, it does not replace it.
 * ------------------------------------------------------------------------- */
.gooek-pp .gooek-pp-reviews__filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
}
.gooek-pp .gooek-pp-reviews__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	margin: 0;
	padding: 6px 12px;
	border: 1px solid var(--gooek-pp-border);
	border-radius: 999px;
	background: var(--gooek-pp-surface);
	box-shadow: none;
	color: var(--gooek-pp-text);
	font-family: var(--gooek-pp-display-font);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.gooek-pp .gooek-pp-reviews__chip:hover,
.gooek-pp .gooek-pp-reviews__chip:focus-visible {
	border-color: var(--gooek-pp-ink);
}
.gooek-pp .gooek-pp-reviews__chip.is-active {
	border-color: var(--gooek-pp-brand);
	background: color-mix(in srgb, var(--gooek-pp-brand) 8%, #fff);
	color: var(--gooek-pp-ink);
}
.gooek-pp .gooek-pp-reviews__count {
	color: var(--gooek-pp-muted);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}
.gooek-pp .gooek-pp-reviews__chip.is-active .gooek-pp-reviews__count {
	color: inherit;
}
.gooek-pp .gooek-pp-reviews__write {
	margin-inline-start: auto;
	min-height: 34px;
	padding: 7px 14px;
	border: 1px solid var(--gooek-pp-ink);
	border-radius: var(--gooek-pp-qty-radius, 3px);
	background: transparent;
	box-shadow: none;
	color: var(--gooek-pp-ink);
	font-family: var(--gooek-pp-display-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}
.gooek-pp .gooek-pp-reviews__write:hover,
.gooek-pp .gooek-pp-reviews__write:focus-visible {
	background: var(--gooek-pp-surface-alt);
}
.gooek-pp .gooek-pp-reviews__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: 4px 0 20px;
	padding: 10px 18px;
	border: 1px solid var(--gooek-pp-border);
	border-radius: var(--gooek-pp-qty-radius, 3px);
	background: var(--gooek-pp-surface);
	box-shadow: none;
	color: var(--gooek-pp-ink);
	font-family: var(--gooek-pp-display-font);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	cursor: pointer;
}
.gooek-pp .gooek-pp-reviews__more:hover,
.gooek-pp .gooek-pp-reviews__more:focus-visible {
	border-color: var(--gooek-pp-ink);
	background: var(--gooek-pp-surface-alt);
}
.gooek-pp .gooek-pp-reviews__no-match {
	margin: 0 0 20px;
	color: var(--gooek-pp-muted);
	font-size: 13.5px;
}
.gooek-pp .gooek-pp-review__verified {
	display: inline-flex;
	align-items: center;
	margin-inline-start: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--gooek-pp-brand) 10%, #fff);
	color: var(--gooek-pp-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
}
.gooek-pp .gooek-pp-reviews .commentlist > li[hidden] {
	display: none !important;
}

/* --- Review preset: elevated cards ----------------------------------------- */
.gooek-pp-reviews-cards .gooek-pp-reviews .commentlist > li.gooek-pp-review {
	margin: 0 0 14px;
	padding: 16px 18px;
	border: 1px solid var(--gooek-pp-border);
	border-radius: 10px;
	background: var(--gooek-pp-surface);
	box-shadow: 0 1px 2px rgba(15, 18, 22, 0.04);
}

/* --- Review preset: minimal list ------------------------------------------- */
.gooek-pp-reviews-minimal .gooek-pp-reviews .commentlist > li.gooek-pp-review {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--gooek-pp-border);
}
.gooek-pp-reviews-minimal .gooek-pp-reviews .commentlist > li.gooek-pp-review img.avatar {
	display: none;
}

/* The review form keeps its native look inside the dialog. */
.gooek-pp-modal #review_form_wrapper {
	margin: 0;
}
.gooek-pp-modal #review_form_wrapper[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Collapsible sections (accordion) -- tuned for the purchasing column
 * ------------------------------------------------------------------------- */
.gooek-pp .gooek-pp-sections {
	margin-top: 22px;
	border-top: 1px solid var(--gooek-pp-border);
}
/* Inside the stack the container owns the rhythm. */
.gooek-pp .gooek-pp-stack .gooek-pp-sections {
	margin-top: 0;
}
.gooek-pp .gooek-pp-acc {
	border-bottom: 1px solid var(--gooek-pp-border);
}
.gooek-pp .gooek-pp-acc__btn {
	width: 100%;
	min-height: 54px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 15px 2px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--gooek-pp-ink);
	font: inherit;
	font-family: var(--gooek-pp-display-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-align: left;
	cursor: pointer;
}
.gooek-pp .gooek-pp-acc__btn:hover .gooek-pp-acc__title {
	opacity: 0.7;
}
.gooek-pp .gooek-pp-acc__title {
	flex: 1 1 auto;
	transition: opacity 0.2s ease;
}
.gooek-pp .gooek-pp-acc__marker {
	flex: 0 0 auto;
	display: inline-block;
	color: var(--gooek-pp-ink);
	transition: transform 0.3s ease;
}
.gooek-pp .gooek-pp-acc__panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}
.gooek-pp .gooek-pp-acc__inner {
	padding: 0 2px 18px;
	color: var(--gooek-pp-text);
	font-size: 13.5px;
	line-height: 1.65;
}
.gooek-pp .gooek-pp-acc__inner > *:first-child { margin-top: 0; }
.gooek-pp .gooek-pp-acc__inner > *:last-child { margin-bottom: 0; }

/* Tables inside a section panel.
 *
 * Section HTML is merchant-authored, so a panel can hold any table, not just
 * WooCommerce's attributes one. The baseline below gives every cell real
 * padding on all four sides -- a merchant table that draws its own cell borders
 * must not have text sitting on the rule. The attributes table then opts its
 * outer edges back to flush (it is bottom-ruled only, so the first and last
 * columns should line up with the panel's other content) while keeping a wide
 * gutter between the label and value columns. */
.gooek-pp .gooek-pp-acc__inner table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin: 0 0 14px;
	font-size: inherit;
}
.gooek-pp .gooek-pp-acc__inner table:last-child {
	margin-bottom: 0;
}
/* Padding on all four sides, outer edges included. The attributes table tints
   alternate rows and merchant tables tend to draw their own cell borders, so a
   flush edge would put text straight onto the tint/rule. The cell box still
   spans the full panel width -- only the text insets. */
.gooek-pp .gooek-pp-acc__inner table :is(th, td) {
	padding: 10px 14px;
	vertical-align: top;
	text-align: left;
	font-style: normal;
	word-break: break-word;
}

/* Additional-information table (WooCommerce attributes) tidy-up. */
.gooek-pp .gooek-pp-acc__inner table.woocommerce-product-attributes,
.gooek-pp .gooek-pp-acc__inner table.shop_attributes {
	margin: 0;
}
.gooek-pp .gooek-pp-acc__inner table.shop_attributes :is(th, td) {
	border-bottom: 1px solid var(--gooek-pp-border);
}
.gooek-pp .gooek-pp-acc__inner table.shop_attributes th {
	width: 42%;
	color: var(--gooek-pp-ink);
	font-weight: 600;
}

/* --- Marker: plus that rotates to × --------------------------------------- */
.gooek-pp-accordion-plus-rotate .gooek-pp-acc__marker {
	position: relative;
	width: 14px;
	height: 14px;
}
.gooek-pp-accordion-plus-rotate .gooek-pp-acc__marker::before,
.gooek-pp-accordion-plus-rotate .gooek-pp-acc__marker::after {
	content: "";
	position: absolute;
	background: currentColor;
}
.gooek-pp-accordion-plus-rotate .gooek-pp-acc__marker::before {
	left: 0;
	top: 6px;
	width: 14px;
	height: 2px;
}
.gooek-pp-accordion-plus-rotate .gooek-pp-acc__marker::after {
	left: 6px;
	top: 0;
	width: 2px;
	height: 14px;
}
.gooek-pp-accordion-plus-rotate .gooek-pp-acc.is-open .gooek-pp-acc__marker {
	transform: rotate(45deg);
}

/* --- Marker: chevron ------------------------------------------------------ */
.gooek-pp-accordion-chevron .gooek-pp-acc__marker {
	width: 9px;
	height: 9px;
	margin-bottom: 4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
.gooek-pp-accordion-chevron .gooek-pp-acc.is-open .gooek-pp-acc__marker {
	margin-bottom: 0;
	margin-top: 4px;
	transform: rotate(-135deg);
}

/* --- Marker: caret -------------------------------------------------------- */
.gooek-pp-accordion-caret .gooek-pp-acc__marker {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
}
.gooek-pp-accordion-caret .gooek-pp-acc.is-open .gooek-pp-acc__marker {
	transform: rotate(180deg);
}