/* ==========================================================================
   EXTRACT LABS — PRODUCT SUMMARY (PDP)
   Built on the shared design tokens (handle: el-tokens). Every colour, space,
   radius and motion value references a --el-* custom property so this page
   stays in lockstep with the rest of the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LAYOUT
   -------------------------------------------------------------------------- */
.product-summary {
	max-width: var(--el-container);
	margin-inline: auto;
	padding-inline: var(--el-space-5);
	padding-block: var(--el-space-7);
	color: var(--el-color-text);
	font-family: var(--el-font-body);
}

.product-summary__container {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--el-space-7);
	align-items: start;
}

.summary__summary {
	display: flex;
	flex-direction: column;
	gap: var(--el-space-6);
}

/* Make the gallery track the page as you scroll a long info column. */
@media (min-width: 901px) {
	.summary__media {
		position: sticky;
		top: var(--el-space-5);
	}
}

/* --------------------------------------------------------------------------
   2. GALLERY
   -------------------------------------------------------------------------- */
.summary-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--el-space-3);
}

.summary-gallery__viewer {
	position: relative;
}

.summary-gallery__media {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--el-radius-lg);
	background: var(--el-color-bg-warm);
	overflow: hidden;
	opacity: 1;
	transition: opacity var(--el-duration) var(--el-ease);
}

.summary-gallery__media.is-changing {
	opacity: 0;
}

.summary-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.summary-gallery__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: var(--el-black);
}

/* play affordance on a video viewer */
.summary-gallery__media--video {
	cursor: pointer;
}

.summary-gallery__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 64px;
	height: 64px;
	border-radius: var(--el-radius-pill);
	background: rgba(26, 26, 26, 0.55);
	display: grid;
	place-items: center;
	transition: background var(--el-duration) var(--el-ease);
}

.summary-gallery__media--video:hover .summary-gallery__play {
	background: var(--el-color-action);
}

.summary-gallery__play::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 4px;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent var(--el-white);
}

/* thumbnails */
.summary-gallery__thumbs {
	display: flex;
	gap: var(--el-space-2);
	flex-wrap: wrap;
}

.summary-gallery__thumb {
	position: relative;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 1px solid var(--el-color-border);
	border-radius: var(--el-radius);
	background: var(--el-color-bg-warm);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--el-duration) var(--el-ease);
}

.summary-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.summary-gallery__thumb:hover {
	border-color: var(--el-color-border-offset);
}

.summary-gallery__thumb.is-active {
	border-color: var(--el-color-action);
	box-shadow: inset 0 0 0 1px var(--el-color-action);
}

.summary-gallery__video-badge {
	position: absolute;
	bottom: 3px;
	left: 3px;
	padding: 1px 6px;
	border-radius: var(--el-radius-sm);
	background: rgba(26, 26, 26, 0.7);
	color: var(--el-white);
	font-family: var(--el-font-display);
	font-size: 0.625rem;
	font-weight: var(--el-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. HEADER
   -------------------------------------------------------------------------- */
.product-breadcrumb {
	font-size: var(--el-text-sm);
	color: var(--el-color-text-muted);
	margin-bottom: var(--el-space-4);
}

.product-breadcrumb a {
	color: var(--el-color-text-soft);
	text-decoration: none;
}

.product-breadcrumb a:hover {
	color: var(--el-color-action);
}

/* chip styling now lives in el-base (.el-chip / --solid / --outline).
   The profile badge gets bottom spacing above the title + bold weight so the
   uppercase pine label catches the eye. */
.product-summary__profile {
	margin-bottom: var(--el-space-2);
	font-weight: var(--el-weight-bold);
}

/* title composes .el-h1; this only sets its spacing in the header flow */
.product-summary__title {
	margin: var(--el-space-3) 0 0;
}

.product-subtitle {
	font-size: var(--el-text-md);
	line-height: var(--el-leading-snug);
	color: var(--el-color-text-soft);
	margin: var(--el-space-2) 0 0;
}

.summary-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--el-space-4);
	margin-top: var(--el-space-4);
}

.summary-price {
	font-family: var(--el-font-display);
	font-size: var(--el-text-xl);
	font-weight: var(--el-weight-semibold);
	color: var(--el-color-text);
}

.summary-price del {
	color: var(--el-color-text-muted);
	font-weight: var(--el-weight-normal);
	margin-right: var(--el-space-2);
}

.summary-price ins {
	text-decoration: none;
	color: var(--el-danger);
}

.summary-reviews {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

/* Price placement.
   - Wide: show the top price beside the stars; hide the in-body one.
   - Narrow (<= 768px / tablet): hide the top price, show the in-body one
     (it sits under the cert badges, above add-to-cart).
   Breakpoint note: the two-column layout itself stacks at 900px, so between
   768–900px the price stays up top in a single column. If you'd rather it
   swap exactly when the layout stacks, change 768px below to 900px. */
.summary-price.mobile--view {
	display: none;
}

@media (max-width: 768px) {
	.summary-price.desktop--view {
		display: none;
	}
	.summary-price.mobile--view {
		display: block;
	}
}

/* --------------------------------------------------------------------------
   4. BODY
   -------------------------------------------------------------------------- */
.summary-text {
	font-size: var(--el-text-base);
	line-height: var(--el-leading-body);
	color: var(--el-color-text-soft);
}

.summary-text p {
	margin: 0 0 var(--el-space-3);
}

.summary-text p:last-child {
	margin-bottom: 0;
}

.summary-text ul {
	margin: 0;
	padding-left: var(--el-space-5);
}

/* quick product highlights (conditional, ACF) — pine check + text on tokens */
.summary-highlights {
	list-style: none;
	margin: var(--el-space-4) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--el-space-2);
}

.summary-highlights__item {
	position: relative;
	padding-left: 1.65rem;
	font-family: var(--el-font-body);
	font-size: var(--el-text-base);
	line-height: var(--el-leading-snug);
	color: var(--el-color-text);
}

.summary-highlights__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.1rem;
	height: 1.1rem;
	background-color: var(--el-color-action);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* certification badges — chip shell from el-base (.el-chip .el-chip--outline);
   this only handles wrap spacing and the small cert logo */
.summary-cert {
	margin: var(--el-space-2) var(--el-space-2) 0 0;
	font-size: var(--el-text-sm);
}

.summary-cert img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	display: block;
}

/* add to cart */
.product-atc {
	margin-top: var(--el-space-2);
}

.product-atc .quantity {
	display: inline-flex;
}

.product-atc .quantity .qty {
	width: 4.5rem;
	padding: 0.75rem;
	border: 1px solid var(--el-color-border-offset);
	border-radius: var(--el-radius-sm);
	font-family: var(--el-font-mono);
	font-size: var(--el-text-base);
	text-align: center;
}

.product-atc .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--el-space-2);
	padding: 0.9rem 1.75rem;
	border: 0;
	border-radius: var(--el-radius-pill);
	background: var(--el-color-cart);
	color: var(--el-color-on-cart);
	font-family: var(--el-font-display);
	font-size: var(--el-text-base);
	font-weight: var(--el-weight-semibold);
	line-height: 1;
	cursor: pointer;
	transition: background var(--el-duration) var(--el-ease), transform var(--el-duration) var(--el-ease);
}

.product-atc .single_add_to_cart_button:hover {
	background: var(--el-color-cart-hover);
	transform: var(--el-lift);
}

/* row built by summary.js: quantity + button */
.summary-cart-actions {
	display: flex;
	align-items: stretch;
	gap: var(--el-space-3);
	margin-top: var(--el-space-3);
}

.summary-cart-actions .single_add_to_cart_button {
	flex: 1;
	background: var(--el-color-cart);
	color: var(--el-color-on-cart);
}

.summary-cart-actions .single_add_to_cart_button:hover {
	background: var(--el-color-cart-hover);
}

/* --------------------------------------------------------------------------
   5. VARIATION SWATCHES  (built by summary.js)
   -------------------------------------------------------------------------- */
.summary-swatches {
	display: flex;
	flex-direction: column;
	gap: var(--el-space-4);
	margin-bottom: var(--el-space-4);
}

.summary-swatches__label {
	font-family: var(--el-font-display);
	font-size: var(--el-text-xs);
	font-weight: var(--el-weight-semibold);
	letter-spacing: var(--el-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--el-color-text-soft);
	margin-bottom: var(--el-space-2);
}

.summary-swatches__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--el-space-2);
}

.summary-swatches__pill {
	padding: 0.5rem 1rem;
	border: 1px solid var(--el-color-border-offset);
	border-radius: var(--el-radius-pill);
	background: var(--el-color-surface);
	color: var(--el-color-text);
	font-family: var(--el-font-body);
	font-size: var(--el-text-sm);
	cursor: pointer;
	transition: border-color var(--el-duration) var(--el-ease), background var(--el-duration) var(--el-ease);
}

.summary-swatches__pill:hover {
	border-color: var(--el-color-action);
}

.summary-swatches__pill.is-active {
	border-color: var(--el-color-action);
	background: var(--el-color-bg-cool);
	color: var(--el-pine-deep);
	font-weight: var(--el-weight-semibold);
}

.summary-swatches__pill.is-disabled {
	color: var(--el-color-text-muted);
	border-color: var(--el-color-border);
	text-decoration: line-through;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   6. SUPPORT BUTTONS
   -------------------------------------------------------------------------- */
.support-button-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--el-space-3);
}

.support-button {
	display: flex;
	align-items: center;
	gap: var(--el-space-3);
	padding: var(--el-space-4);
	border: var(--el-card-border);
	border-radius: var(--el-radius);
	background: var(--el-color-surface);
	box-shadow: var(--el-card-shadow);
	text-align: left;
	cursor: pointer;
	transition: transform var(--el-duration) var(--el-ease), box-shadow var(--el-duration) var(--el-ease);
}

.support-button:hover {
	transform: var(--el-lift);
	box-shadow: var(--el-shadow-hover);
}

.support-card-icon {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	border-radius: var(--el-radius-pill);
	background: var(--el-color-bg-cool);
	color: var(--el-color-action);
}

.support-card-icon svg,
.support-card-icon img {
	width: 1.25rem;
	height: 1.25rem;
}

.support-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.support-card__body-title {
	font-family: var(--el-font-display);
	font-size: var(--el-text-base);
	font-weight: var(--el-weight-semibold);
	color: var(--el-color-text);
}

/* both spellings styled so the markup works whether or not the typo is fixed */
.support-card__body-more,
.suport-card__body-more {
	font-size: var(--el-text-sm);
	color: var(--el-color-text-muted);
}

/* --------------------------------------------------------------------------
   6b. PURCHASE OPTIONS (WCSATT subscribe & save)
   The plugin renders a fieldset of radio prompts (one-time / subscription) and
   a frequency dropdown. We card-ify each prompt on tokens, swap the native
   radio for a custom circle, grey the unselected card, and (via summary.js)
   move the frequency dropdown inside the subscription card so it expands when
   that option is chosen.
   -------------------------------------------------------------------------- */
.product-atc .wcsatt-options-wrapper {
	margin-bottom: var(--el-space-4);
}

.product-atc .wcsatt-options-prompt-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.product-atc .wcsatt-options-prompt-radios {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--el-space-3);
}

/* each option is a card (the <li>), so the in-card dropdown can live below the label */
.product-atc .wcsatt-options-prompt-radio {
	margin: 0;
	border: 1.5px solid var(--el-color-border);
	border-radius: var(--el-radius-lg);
	background: var(--el-color-surface);
	overflow: hidden;
	transition: border-color var(--el-duration) var(--el-ease),
	            background var(--el-duration) var(--el-ease),
	            box-shadow var(--el-duration) var(--el-ease);
}

.product-atc .wcsatt-options-prompt-label {
	display: flex;
	align-items: center;
	gap: var(--el-space-3);
	margin: 0;
	padding: var(--el-space-4) var(--el-space-5);
	cursor: pointer;
}

/* custom radio circle (native control hidden via appearance) */
.product-atc .wcsatt-options-prompt-action-input {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 2px solid var(--el-color-rule);
	border-radius: 50%;
	background: var(--el-color-surface);
	display: grid;
	place-content: center;
	cursor: pointer;
	transition: border-color var(--el-duration) var(--el-ease);
}
.product-atc .wcsatt-options-prompt-action-input::before {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--el-color-action);
	transform: scale(0);
	transition: transform var(--el-duration) var(--el-ease);
}
.product-atc .wcsatt-options-prompt-action-input:checked {
	border-color: var(--el-color-action);
}
.product-atc .wcsatt-options-prompt-action-input:checked::before {
	transform: scale(1);
}

/* title block (text + injected subtitle / discount badge) */
.product-atc .wcsatt-options-prompt-action {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--el-space-1);
	font-family: var(--el-font-display);
	font-size: var(--el-text-base);
	font-weight: var(--el-weight-bold);
	color: var(--el-color-text);
	line-height: 1.2;
}

/* the discount badge (25%) — small pine chip */
.product-atc .wcsatt-sub-discount {
	display: inline-flex;
	align-items: center;
	border-radius: var(--el-radius-pill);
	padding: 2px 8px;
	background: var(--el-color-action);
	color: var(--el-color-on-action);
	font-size: var(--el-text-xs);
	font-weight: var(--el-weight-bold);
}

/* subtitle + price injected by summary.js */
.product-atc .wcsatt-option-subtitle {
	font-family: var(--el-font-body);
	font-size: var(--el-text-sm);
	font-weight: var(--el-weight-normal);
	color: var(--el-color-text-muted);
}
.product-atc .wcsatt-option-price {
	margin-left: auto;
	align-self: center;
	font-family: var(--el-font-display);
	font-size: var(--el-text-lg);
	font-weight: var(--el-weight-bold);
	color: var(--el-color-text);
	white-space: nowrap;
}

/* selected card */
.product-atc .wcsatt-options-prompt-radio:has(input:checked) {
	border-color: var(--el-color-action);
	box-shadow: var(--el-shadow-sm);
}

/* unselected card — slightly greyed */
.product-atc .wcsatt-options-prompt-radio:has(input:not(:checked)) {
	background: var(--el-color-bg-warm);
}
.product-atc .wcsatt-options-prompt-radio:has(input:not(:checked)) .wcsatt-options-prompt-label {
	opacity: 0.55;
	transition: opacity var(--el-duration) var(--el-ease);
}
.product-atc .wcsatt-options-prompt-radio:has(input:not(:checked)) .wcsatt-options-prompt-label:hover {
	opacity: 0.85;
}

/* frequency dropdown — moved inside the subscription card by summary.js */
.product-atc .wcsatt-options-product-wrapper {
	margin: 0;
	padding: 0 var(--el-space-5) var(--el-space-5);
	border-top: 1px solid var(--el-color-border);
	padding-top: var(--el-space-4);
}
.product-atc .wcsatt-options-product-dropdown-label {
	display: block;
	margin-bottom: var(--el-space-2);
	font-family: var(--el-font-display);
	font-size: var(--el-text-xs);
	font-weight: var(--el-weight-semibold);
	letter-spacing: var(--el-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--el-color-text-soft);
}
.product-atc .wcsatt-options-product-dropdown {
	width: 100%;
	padding: var(--el-space-3);
	border: 1px solid var(--el-color-border-offset);
	border-radius: var(--el-radius-sm);
	background: var(--el-color-surface);
	font-family: var(--el-font-body);
	font-size: var(--el-text-sm);
	color: var(--el-color-text);
	cursor: pointer;
}
/* the verbose native radio list duplicates the dropdown — hide it */
.product-atc .wcsatt-options-product {
	display: none;
}

/* stock status: let the add-to-cart button convey purchasability instead of a
   standalone "In stock" line */
.product-summary .stock,
.product-atc .stock {
	display: none;
}

/* --------------------------------------------------------------------------
   7. TABS
   -------------------------------------------------------------------------- */
.summary-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--el-space-4);
	border-bottom: 1px solid var(--el-color-border);
}

.tabs-button {
	padding: 0 0 var(--el-space-3);
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	background: none;
	color: var(--el-color-text-muted);
	font-family: var(--el-font-display);
	font-size: var(--el-text-base);
	font-weight: var(--el-weight-medium);
	cursor: pointer;
	transition: color var(--el-duration) var(--el-ease), border-color var(--el-duration) var(--el-ease);
}

.tabs-button:hover {
	color: var(--el-color-text);
}

.tabs-button.is-active {
	color: var(--el-color-action);
	border-bottom-color: var(--el-color-action);
}

/* panels */
.summary-tab-panels {
	width: 100%;
}

.summary-tab__panel[data-panel] {
	display: none;
	padding-top: var(--el-space-5);
	font-size: var(--el-text-base);
	line-height: var(--el-leading-body);
	color: var(--el-color-text-soft);
}

.summary-tab__panel[data-panel].is-active {
	display: block;
}

.summary-tab__panel[data-panel] p {
	margin: 0 0 var(--el-space-3);
}

/* --------------------------------------------------------------------------
   8. SLIDE-OUT PANEL + OVERLAY  (rendered as siblings of the section)
   -------------------------------------------------------------------------- */
.summary-panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	width: min(420px, 100%);
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--el-color-surface);
	box-shadow: var(--el-shadow-hover);
	transform: translateX(100%);
	transition: transform var(--el-duration) var(--el-ease);
}

.summary-panel.is-open {
	transform: translateX(0);
}

.summary-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--el-space-4);
	padding: var(--el-space-5);
	border-bottom: 1px solid var(--el-color-border);
}

.summary-panel__title {
	font-family: var(--el-font-display);
	font-size: var(--el-text-lg);
	font-weight: var(--el-weight-semibold);
	margin: 0;
}

.summary-panel__close {
	flex: none;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: var(--el-radius-pill);
	background: var(--el-color-surface-warm);
	color: var(--el-color-text);
	cursor: pointer;
	position: relative;
}

.summary-panel__close::before,
.summary-panel__close::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 14px;
	height: 2px;
	background: currentColor;
}

.summary-panel__close::before {
	transform: rotate(45deg);
}

.summary-panel__close::after {
	transform: rotate(-45deg);
}

.summary-panel__body {
	padding: var(--el-space-5);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--el-space-4);
}

.summary-panel__subheading {
	font-size: var(--el-text-md);
	color: var(--el-color-text-soft);
	margin: 0;
}

.summary-panel-card {
	padding: var(--el-space-4);
	border: var(--el-card-border);
	border-radius: var(--el-radius);
	background: var(--el-color-surface-warm);
}

.summary-panel-card__title {
	font-family: var(--el-font-display);
	font-size: var(--el-text-base);
	font-weight: var(--el-weight-semibold);
	margin: 0 0 var(--el-space-2);
}

.summary-panel-card__body {
	font-size: var(--el-text-sm);
	line-height: var(--el-leading-body);
	color: var(--el-color-text-soft);
}

.summary-panel__footnote {
	font-size: var(--el-text-sm);
	color: var(--el-color-text-muted);
	margin: 0;
}

.summary-overlay {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(26, 26, 26, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--el-duration) var(--el-ease), visibility var(--el-duration) var(--el-ease);
}

.summary-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}

body.summary-panel-active {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   9. SUBSCRIBE & SAVE SELECTOR (WCSATT)
   Card-ified purchase options. One-time is default; the unselected card is
   greyed; selecting the subscription card expands its delivery-frequency
   dropdown inside it. Native radios hidden, custom circle indicator drawn.
   -------------------------------------------------------------------------- */
.product-atc .wcsatt-options-prompt-fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.product-atc .wcsatt-options-prompt-radios {
	list-style: none;
	margin: 0 0 var(--el-space-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--el-space-3);
}

/* each purchase option is a card */
.product-atc .wcsatt-options-prompt-radio {
	margin: 0;
	padding: var(--el-space-4) var(--el-space-5);
	border: 1.5px solid var(--el-color-border);
	border-radius: var(--el-radius-lg);
	background: var(--el-color-surface);
	transition: border-color var(--el-duration) var(--el-ease),
	            box-shadow var(--el-duration) var(--el-ease),
	            opacity var(--el-duration) var(--el-ease);
}

/* clickable header row inside the card */
.product-atc .wcsatt-options-prompt-label {
	display: flex;
	align-items: center;
	gap: var(--el-space-3);
	margin: 0;
	cursor: pointer;
}

/* hide native radio, draw a custom circle indicator */
.product-atc .wcsatt-options-prompt-action-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.product-atc .wcsatt-options-prompt-label::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: var(--el-radius-pill);
	border: 2px solid var(--el-color-rule);
	transition: border-color var(--el-duration) var(--el-ease),
	            box-shadow var(--el-duration) var(--el-ease);
}

/* selected — pine border + filled dot + lift */
.product-atc .wcsatt-options-prompt-radio:has(.wcsatt-options-prompt-action-input:checked) {
	border-color: var(--el-color-action);
	box-shadow: var(--el-shadow-sm);
}
.product-atc .wcsatt-options-prompt-radio:has(.wcsatt-options-prompt-action-input:checked) .wcsatt-options-prompt-label::before {
	border-color: var(--el-color-action);
	box-shadow: inset 0 0 0 4px var(--el-color-action);
}

/* unselected — slightly greyed */
.product-atc .wcsatt-options-prompt-radio:has(.wcsatt-options-prompt-action-input:not(:checked)) {
	opacity: 0.55;
}
.product-atc .wcsatt-options-prompt-radio:hover {
	opacity: 1;
}
.product-atc .wcsatt-options-prompt-radio:focus-within {
	outline: var(--el-focus-ring);
	outline-offset: var(--el-focus-offset);
}

/* title + subtitle column (wrapper injected by JS) */
.product-atc .wcsatt-option-text {
	flex: 1 1 auto;
	min-width: 0;
}
.product-atc .wcsatt-options-prompt-action {
	display: block;
	font-family: var(--el-font-display);
	font-size: var(--el-text-md);
	font-weight: var(--el-weight-bold);
	color: var(--el-color-text);
}
.product-atc .wcsatt-option-subtitle {
	display: block;
	margin-top: 3px;
	font-family: var(--el-font-body);
	font-size: var(--el-text-sm);
	font-weight: var(--el-weight-normal);
	color: var(--el-color-text-muted);
}

/* 25% discount badge (sits under the Subscribe title) */
.product-atc .wcsatt-sub-discount {
	display: inline-flex;
	align-items: center;
	border-radius: var(--el-radius-pill);
	padding: 0.15rem var(--el-space-2);
	background: var(--el-color-action);
	color: var(--el-color-on-action);
	font-family: var(--el-font-display);
	font-size: var(--el-text-xs);
	font-weight: var(--el-weight-semibold);
	line-height: 1.45;
}

/* price (injected) — right aligned */
.product-atc .wcsatt-option-price {
	margin-left: auto;
	font-family: var(--el-font-display);
	font-size: var(--el-text-lg);
	font-weight: var(--el-weight-semibold);
	color: var(--el-color-text);
	white-space: nowrap;
}
.product-atc .wcsatt-option-price del {
	color: var(--el-color-text-muted);
	font-weight: var(--el-weight-normal);
	font-size: var(--el-text-base);
	margin-right: var(--el-space-2);
}
.product-atc .wcsatt-option-price ins {
	text-decoration: none;
}

/* delivery-frequency dropdown — hidden until the subscription card is selected,
   then expands inside that card (JS moves the wrapper into the subscription li) */
.product-atc .wcsatt-options-product-wrapper {
	margin-top: var(--el-space-3);
	padding-top: var(--el-space-3);
	border-top: 1px solid var(--el-color-border);
	display: none;
}
.product-atc .wcsatt-options-prompt-radio:has(.wcsatt-options-prompt-action-input:checked) .wcsatt-options-product-wrapper {
	display: block;
}
.product-atc .wcsatt-options-product-dropdown-label {
	display: block;
	margin-bottom: var(--el-space-2);
	font-family: var(--el-font-display);
	font-size: var(--el-text-xs);
	font-weight: var(--el-weight-semibold);
	letter-spacing: var(--el-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--el-color-text-soft);
}
.product-atc .wcsatt-options-product-dropdown {
	width: 100%;
	padding: var(--el-space-3);
	border: 1px solid var(--el-color-border-offset);
	border-radius: var(--el-radius-sm);
	background: var(--el-color-surface);
	color: var(--el-color-text);
	font-family: var(--el-font-body);
	font-size: var(--el-text-base);
}

/* WCSATT's redundant hidden radio list — the styled select is the control */
.product-atc .wcsatt-options-product.wcsatt-options-product--hidden {
	display: none;
}

/* Remove the redundant "In stock" line — the add-to-cart button carries status */
.product-summary .stock.in-stock {
	display: none;
}

/* --------------------------------------------------------------------------
   10. VARIATION SWATCHES (Variation Swatches plugin — e.g. Strength)
   -------------------------------------------------------------------------- */
.product-atc .variations {
	width: 100%;
	margin: 0 0 var(--el-space-4);
	border: 0;
}
.product-atc .variations,
.product-atc .variations tbody,
.product-atc .variations tr,
.product-atc .variations th,
.product-atc .variations td {
	display: block;
	padding: 0;
	border: 0;
}
.product-atc .variations .label label,
.product-atc .variations .label {
	font-family: var(--el-font-display);
	font-size: var(--el-text-xs);
	font-weight: var(--el-weight-semibold);
	letter-spacing: var(--el-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--el-color-text-soft);
}
.product-atc .woo-selected-variation-item-name {
	font-family: var(--el-font-body);
	font-weight: var(--el-weight-normal);
	letter-spacing: 0;
	text-transform: none;
	color: var(--el-color-text);
}
.product-atc .variations .value {
	margin-top: var(--el-space-2);
}

/* the button swatches */
.product-atc .variable-items-wrapper.button-variable-items-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--el-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.product-atc .variable-item.button-variable-item {
	margin: 0;
	border: 1.5px solid var(--el-color-border);
	border-radius: var(--el-radius);
	background: var(--el-color-surface);
	box-shadow: none;
	overflow: hidden;
	transition: border-color var(--el-duration) var(--el-ease),
	            background var(--el-duration) var(--el-ease);
}
.product-atc .variable-item.button-variable-item .variable-item-span {
	display: block;
	padding: 0.6rem 1.1rem;
	font-family: var(--el-font-display);
	font-size: var(--el-text-base);
	font-weight: var(--el-weight-semibold);
	color: var(--el-color-text);
	line-height: 1;
}
.product-atc .variable-item.button-variable-item:hover {
	border-color: var(--el-color-text);
}
.product-atc .variable-item.button-variable-item.selected {
	border-color: var(--el-color-action);
	background: var(--el-color-surface-warm);
}
.product-atc .variable-item.button-variable-item:focus-visible,
.product-atc .variable-item.button-variable-item.focus {
	outline: var(--el-focus-ring);
	outline-offset: var(--el-focus-offset);
}
.product-atc .variable-item.button-variable-item.disabled,
.product-atc .variable-item.button-variable-item.out-of-stock {
	opacity: 0.45;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Clear link */
.product-atc .reset_variations {
	display: inline-block;
	margin-top: var(--el-space-2);
	font-family: var(--el-font-body);
	font-size: var(--el-text-sm);
	color: var(--el-color-text-muted);
	text-decoration: none;
}
.product-atc .reset_variations:hover {
	color: var(--el-color-action);
}

/* The variation block reprints the price (we already show it in .summary-price)
   — hide that duplicate but keep the WCSATT selector that lives beside it. */
.product-atc .woocommerce-variation-price > .price {
	display: none;
}

/* --------------------------------------------------------------------------
   11. STICKY ADD TO CART
   Fixed bottom bar, hidden by default, revealed (.is-visible) by JS whenever
   the real add-to-cart button is out of view. Its button submits the real form.
   -------------------------------------------------------------------------- */
.summary-sticky-atc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 120;
	background: var(--el-color-surface);
	border-top: 1px solid var(--el-color-border);
	box-shadow: 0 -4px 16px rgba(26, 26, 26, 0.08);
	padding: var(--el-space-3) 0;
	transform: translateY(110%);
	visibility: hidden;
	transition: transform var(--el-duration) var(--el-ease),
	            visibility var(--el-duration) var(--el-ease);
}
.summary-sticky-atc.is-visible {
	transform: translateY(0);
	visibility: visible;
}

.summary-sticky-atc__inner {
	max-width: var(--el-container);
	margin-inline: auto;
	padding-inline: var(--el-space-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--el-space-4);
}

.summary-sticky-atc__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.summary-sticky-atc__name {
	font-family: var(--el-font-display);
	font-size: var(--el-text-sm);
	font-weight: var(--el-weight-semibold);
	color: var(--el-color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 42ch;
}
.summary-sticky-atc__price {
	font-family: var(--el-font-display);
	font-size: var(--el-text-lg);
	font-weight: var(--el-weight-bold);
	color: var(--el-color-text);
	line-height: 1.1;
}

.summary-sticky-atc__actions {
	display: flex;
	align-items: center;
	gap: var(--el-space-3);
	flex: none;
}

/* qty stepper */
.summary-sticky-atc__qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--el-color-border-offset);
	border-radius: var(--el-radius-pill);
	overflow: hidden;
}
.summary-sticky-atc__step {
	border: 0;
	background: transparent;
	padding: 0 0.85rem;
	font-family: var(--el-font-display);
	font-size: var(--el-text-md);
	color: var(--el-color-text);
	cursor: pointer;
	line-height: 1;
	transition: background var(--el-duration) var(--el-ease);
}
.summary-sticky-atc__step:hover {
	background: var(--el-color-surface-warm);
}
.summary-sticky-atc__qty-input {
	width: 2.5rem;
	border: 0;
	border-inline: 1px solid var(--el-color-border);
	background: transparent;
	text-align: center;
	font-family: var(--el-font-mono);
	font-size: var(--el-text-base);
	color: var(--el-color-text);
	-moz-appearance: textfield;
	appearance: textfield;
}
.summary-sticky-atc__qty-input::-webkit-outer-spin-button,
.summary-sticky-atc__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.summary-sticky-atc__btn {
	white-space: nowrap;
}

/* disabled (e.g. variable product, no strength chosen yet) */
.summary-sticky-atc.is-disabled .summary-sticky-atc__btn,
.summary-sticky-atc__btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

@media (max-width: 600px) {
	/* keep price + qty + button; the product name is the first thing to drop */
	.summary-sticky-atc__name {
		display: none;
	}
	.summary-sticky-atc__inner {
		padding-inline: var(--el-space-4);
		gap: var(--el-space-3);
	}
}

/* --------------------------------------------------------------------------
   12. FOCUS + RESPONSIVE
   -------------------------------------------------------------------------- */
.product-summary button:focus-visible,
.product-summary a:focus-visible,
.product-summary .qty:focus-visible,
.summary-panel button:focus-visible {
	outline: var(--el-focus-ring);
	outline-offset: var(--el-focus-offset);
}

@media (max-width: 900px) {
	.product-summary__container {
		grid-template-columns: 1fr;
		gap: var(--el-space-6);
	}
}

/* Small tablet and below: product identity (breadcrumb, badge, name, subtitle,
   rating) sits ABOVE the gallery, then everything else below it →
   product > image(s) > the rest. display:contents promotes the header/body/tabs
   to flex items of the container so they can be ordered against the gallery.
   Aligned to the 768px price-swap breakpoint so the mobile buy-box layout
   transitions in one step; change 768px if you want a different cutoff. */
@media (max-width: 768px) {
	.product-summary__container {
		display: flex;
		flex-direction: column;
		gap: var(--el-space-6);
	}
	.summary__summary {
		display: contents;
	}
	.product-summary__header { order: 1; }
	.summary__media          { order: 2; }
	.summary-body            { order: 3; }
	.summary-tabs            { order: 4; }
	.summary-tab-panels       { order: 5; }
}

@media (max-width: 600px) {
	/* Keep the 2x2 grid (don't collapse to one long column); just tighten it
	   and drop the icon so the tiles read compactly. */
	.support-button-grid {
		gap: var(--el-space-2);
	}

	.support-button {
		padding: var(--el-space-3);
		gap: var(--el-space-2);
	}

	.support-card-icon {
		display: none;
	}

	.support-card__body-title {
		font-size: var(--el-text-sm);
	}

	.summary-panel {
		width: 100%;
	}
}