/**
 * shop-react patches — loaded ONLY on the React shop page (/shop-react).
 *
 * The shop CSS cascade is reused verbatim from /shop. This file carries the few
 * rules that assume the WooCommerce shop archive context, which a regular WP
 * page does not have.
 */

/* Fix horizontal page scroll on mobile.
   shop-filters.css:756 scopes this to body.woocommerce-shop, a class only the
   real /shop archive gets. Same fix, keyed to the shop wrapper instead: the
   shared footer's #footer-base-logo-section-wrap is a Foundation column MISSING
   the .columns class, so it has no side padding to absorb its child .row's
   margin: 0 -15px, and the row spills 15px past the viewport. */
@media (max-width: 767px) {
	body:has(.sbr-shop-wrap) #footer-base-logo-section-wrap > .row {
		margin-left: 0;
		margin-right: 0;
	}
}

/* Fallback for browsers without :has() — the page template adds this class. */
@media (max-width: 767px) {
	body.sbr-shop-react-page #footer-base-logo-section-wrap > .row {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ── Night-guard hero: stop the card resizing between grind tiers ──────────── */
/*
 * `.sbr-shop-priceline` is `flex-wrap: wrap` and `.sbr-shop-tagline` asks for
 * `flex: 1 1 200px; min-width: 200px` (shop.css). The price line is 432px wide,
 * so whether the member-price label fits beside the price depends on how wide
 * the price string happens to be:
 *
 *   Light    $111.71 $148.95 -25%  -> 213px left  -> label sits inline, row 53px
 *   Average  $123.71 $164.95 -25%  -> under 200px -> label wraps,       row 88px
 *
 * That 35px swing resized the whole card when switching Light/Average/Heavy, and
 * pushed "MEMBER PRICE" onto its own line. Letting the label shrink below its
 * 200px floor keeps it beside the price at every tier, so the row stays 53px and
 * the card height is constant (measured 704px for all three).
 *
 * Desktop only: below 992px the card stacks and the label SHOULD wrap.
 * shop-react only — shop.css is shared with the live /shop.
 */
@media (min-width: 992px) {
	#newsalePage .sbr-ng .sbr-shop-priceline {
		flex-wrap: nowrap;
	}

	#newsalePage .sbr-ng .sbr-shop-priceline > .sbr-shop-tagline {
		flex: 0 1 auto;
		min-width: 0;
	}
}

/*
 * Breathing room above the night-guard CTA. Every other design separates its
 * price line from the button — simple-package and simple-product (the other
 * "Choose your package" cards) both by 16px via `.sbr-*-buy { padding-top: 20px }`,
 * quantity by 14px, package-compare by 22px — but the night-guard button sits
 * directly against the price at 0px, because it is a child of `.sbr-ng-reco`
 * rather than of a dedicated buy block. 16px matches its closest siblings.
 */
#newsalePage .sbr-ng .sbr-ng-choose {
	margin-top: 16px;
}

/*
 * Breathing room between the concern chips and the night-guard card.
 *
 * Every card sits 20px below the chips, but the night-guard is the only design
 * whose `.vc_column-inner` paints the teal #e8f8f8 full-width band (shop.css) —
 * the others are white-on-white, so the same 20px reads as generous on them and
 * cramped here, with a saturated block butting up against the filters.
 *
 * `!important` is required: shop.css pins `#newsalePage.sbr-shop-wrap
 * #product-list .landing-product { margin-top: 0 !important }` on every card
 * (row rhythm comes from its margin-bottom: 24px instead).
 *
 * Scoped to `:first-child` so this is purely the gap under the chips — a
 * night-guard sitting mid-grid keeps the normal 24px row rhythm. Filtering does
 * not break it: hidden cards keep their DOM position, and the night-guard is
 * first in the authored order.
 */
#newsalePage.sbr-shop-wrap #product-list .product-item-display > .sbr-ng-col:first-child {
	margin-top: 20px !important;
}

/* ── Enamel Armour: supply TILES in place of the +/- stepper ──────────────── */
/*
 * The stepper is gone from this arm (EnamelSubscriptionCard.jsx); "choose one of
 * N supply sizes" now looks and behaves exactly like the subscription-plain card
 * two rows down, so the two blocks teach the same pattern.
 *
 * Geometry is `.sbr-sub-variant` (shop-subscription.css:104-111) declaration for
 * declaration, re-tokenised to this card's --ea-* palette. Not a shared class:
 * the --sub-* custom properties are declared on `.sbr-sub`, so borrowing the
 * selector inside `.sbr-ea` would resolve every var() to nothing. This mirrors
 * how the subscription card borrows this card's chip LOOK for its own frequency
 * row (shop-subscription.css:149-151).
 *
 * Lives here rather than in shop-enamel.css because that file is shared with
 * /shop v2, which still renders the stepper.
 */
.sbr-ea-variants {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.sbr-ea-variant {
	cursor: pointer;
	border: 2px solid var(--ea-line);
	background: #fff;
	border-radius: 13px;
	padding: 11px 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	line-height: 1.15;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.sbr-ea-variant__name {
	font-family: var(--ea-ui);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--ea-text);
}
.sbr-ea-variant__price {
	font-family: var(--ea-disp);
	font-weight: 700;
	font-size: 15px;
	color: var(--ea-slate);
	letter-spacing: -.3px;
}
.sbr-ea-variant.is-on {
	border-color: var(--shop-action, var(--ea-teal));
	background: color-mix(in srgb, var(--shop-action, var(--ea-teal)) 7%, #fff);
	box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--shop-action, var(--ea-teal)) 70%, transparent);
}
.sbr-ea-variant.is-on .sbr-ea-variant__price { color: var(--shop-action, var(--ea-teal)); }

/* Deliver every is a full-width row now that it no longer shares .sbr-ea-optrow
   with Quantity — same rhythm the subscription card gives its own freq row
   (shop-subscription.css:147). */
.sbr-ea-field--freq { margin-top: 18px; }

@media (max-width: 560px) {
	.sbr-ea-variant__name { font-size: 12px; }
	.sbr-ea-variant__price { font-size: 14px; }
}
@media (max-width: 767px) {
	.sbr-ea-variants { gap: 6px; }
	.sbr-ea-variant { padding: 8px 4px; border-radius: 11px; gap: 2px; }
	.sbr-ea-variant__name { font-size: 12px; }
	.sbr-ea-variant__price { font-size: 13px; }
	.sbr-ea-field--freq { margin-top: 12px; }

	/* shop-enamel.css:310 hides the label of every .sbr-ea-field that is a direct
	   child of .sbr-ea-controls — written when Supply and Deliver every were
	   nested one level deeper inside .sbr-ea-optrow ("optrow labels are nested
	   deeper → kept"). They are direct children now, so put their labels back:
	   the subscription card shows both on mobile, and losing them is exactly the
	   inconsistency this change is undoing. */
	.sbr-ea-controls > .sbr-ea-field--supply > .sbr-ea-label,
	.sbr-ea-controls > .sbr-ea-field--freq > .sbr-ea-label { display: block; }
}

/* ── Subscription / enamel card: width must not follow the copy ───────────── */
/*
 * `.sbr-sub-card` and `.sbr-ea-card` are grids with fr tracks, but their parent
 * `.product-selection-box` is `display: flex; flex-direction: row`, so each card
 * is a FLEX ITEM sized to its content (flex: 0 1 auto) rather than filling the
 * 1330px column its wrapper reserves. Long body copy happened to push them to
 * the full width, which is why this never showed.
 *
 * Shorten the copy and the whole card collapses — measured on Plaque
 * Highlighters: 1330px wide (centred on the grid axis, 703) with its authored
 * description, 1008px (centre 542, i.e. 161px left of the grid) with a short
 * one. A row flex item is packed at flex-start, so the loss all comes off the
 * RIGHT and the card reads as shifted left.
 *
 * Latent since these designs shipped; the Callout override just made it easy to
 * trigger, since any short description now collapses the card. width:100% pins
 * both to their wrapper so the card is the same size whatever the copy says.
 */
.sbr-sub-card,
.sbr-ea-card {
	width: 100%;
}

/* ── "Short line" promo line above the price block ────────────────────────── */
/*
 * Rendered only when the Shop Presentation "Short line" override is set, so an
 * empty admin box changes nothing on any card (Isle omitEmpty). The quantity
 * card is the exception: it already had a line in this exact position ("Limited
 * stock: up to N per order") and reuses .sbr-qty-cap, so an override swaps that
 * text rather than adding a second line.
 *
 * Type is copied from .sbr-qty-cap (shop-quantity.css:133) — that line is the
 * design precedent for this slot. Colour keys off each card's own faint token
 * with a neutral fallback, since the eight designs use different palettes
 * (--qt-faint / --ea-slate / --sub-slate / --ng-slate / …) and only one of them
 * is in scope on any given card.
 *
 * shop-react only: the PHP renderer never emits this element.
 */
.sbr-shop-shortline {
	font-weight: 500;
	font-size: 10.5px;
	line-height: 1.35;
	color: #8a9897;
	margin: 8px 0 0;
}
/* Full-width cards run larger type throughout; match .sbr-qty--wide's step up
   (shop-quantity.css:193) so the line does not read as fine print beside them. */
.sbr-shop-design-col.medium-12 .sbr-shop-shortline { font-size: 11.5px; margin-top: 9px; }
/* The sports-guard slot sits under the hero copy rather than over a price
   block, so it needs the gap on the other side. */
.sbr-spg-hero .sbr-shop-shortline { margin: 10px 0 0; }

/* ── Reset link: a darker shade of the active-filter accent ───────────────── */
/*
 * shop-filters.css:444 lights Reset in the EXACT same
 * --shop-filter/--shop-accent as an active pill, so the two read as the same
 * kind of control sitting side by side. Same hue, mixed 30% toward black: still
 * obviously the "filters are on" colour, one clear step darker than the pills.
 * The icon follows for free (stroke="currentColor").
 *
 * !important at the same specificity as the rule it replaces. The original needs
 * !important because the legacy #resetDropdowns rule
 * (sale-products-styles-top.css) sets colour at ID specificity; this file is
 * enqueued with shop-filters.css as a dependency, so it lands later and an
 * equal-specificity !important wins.
 *
 * shop-react only — shop-filters.css is shared with /shop v2.
 */
.sbr-shop-wrap .sbr-v1-reset.is-on {
	color: color-mix(in srgb, var(--shop-filter, var(--shop-accent, #9e1e82)) 70%, #000) !important;
}

/* ── "Discounted only" toggle ─────────────────────────────────────────────── */
/*
 * Replaces v1's #productSelect discount dropdown on this arm (ShopPage.jsx +
 * src/shop/lib/filterEngine.js). Lives here, not in shop-filters.css, because
 * that file is shared with /shop v2 — which still ships the dropdown.
 *
 * Geometry is matched to `.sbr-v1-drop > .selected` (shop-filters.css:217) so
 * the pill is the same height as the Category/Concern pills beside it and the
 * filter bar's own box does not change (verify-shop-react.js compares it across
 * arms). Those pills are 1.5+10+16.2+10+1.5 = 39.2px; the 18px check box here is
 * taller than the 13.5px/1.2 text line, so the vertical padding is 9px, not 10px
 * — 1.5+9+18+9+1.5 = 39px, still under the dropdowns that set the bar height.
 * The trailing 36px chevron gutter is dropped: there is no menu to open.
 */
.sbr-shop-wrap .sbr-v1-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	border: 1.5px solid var(--v1-line);
	border-radius: 999px;
	background: #fff;
	padding: 9px 16px 9px 14px;
	margin: 0;
	font-family: var(--v1-ui);
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--v1-ink2);
	white-space: nowrap;
	min-height: 0;
	height: auto;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s, background-color .15s, color .15s;
}
.sbr-shop-wrap .sbr-v1-toggle:hover,
.sbr-shop-wrap .sbr-v1-toggle:focus-visible {
	border-color: var(--shop-filter, var(--shop-accent, #9e1e82));
	outline: none;
}

/* Square check marker, matching the Category/Concern option checkboxes
   (shop-filters.css:300-325) — same 18px box, same accent fill + tick. */
.sbr-shop-wrap .sbr-v1-toggle__box {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	border: 2px solid #cfd6d5;
	border-radius: 6px;
	background: #fff;
	display: inline-flex;
}
.sbr-shop-wrap .sbr-v1-toggle.is-on .sbr-v1-toggle__box {
	border-color: var(--shop-filter, var(--shop-accent, #9e1e82));
	background: var(--shop-filter, var(--shop-accent, #9e1e82));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
/* Lit state = the accent ring + 6% tint the dropdown pills use when a selection
   is active (shop-filters.css:245), so an active Discount reads the same as an
   active Category. */
.sbr-shop-wrap .sbr-v1-toggle.is-on {
	border-color: var(--shop-filter, var(--shop-accent, #9e1e82));
	background-color: color-mix(in srgb, var(--shop-filter, var(--shop-accent, #9e1e82)) 6%, #fff);
	color: var(--v1-ink);
}

/* Mobile sheet: filterUI.js relocates the live button into
   .sbr-v1-sheet__body, where the .custom-selects render as flat, always-open
   sections. Match that — kill the pill chrome and paint the section heading
   from data-label, exactly like `.custom-select > .selected::before`
   (shop-filters.css:698). ID specificity outranks the .is-on rules above, so no
   !important is needed to undo the pill fill. */
@media (max-width: 991px) {
	.sbr-v1-sheet__body #discountToggle {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
		width: 100%;
		border: 0;
		border-radius: 0;
		background: none;
		padding: 14px 4px 11px;
		font-size: 14px;
		font-weight: 500;
		color: var(--v1-ink2);
		white-space: normal;
	}
	.sbr-v1-sheet__body #discountToggle::before {
		content: attr(data-label);
		width: 100%;
		font-family: var(--v1-ui);
		font-weight: 800;
		font-size: 10.5px;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: var(--v1-faint);
		margin-bottom: 6px;
	}
	.sbr-v1-sheet__body #discountToggle.is-on {
		font-weight: 700;
		color: var(--v1-ink);
	}
}