/*
 * Supplement to the compiled Tailwind stylesheet (app.css).
 *
 * Everything here is either (a) a component this theme introduces that has no
 * React equivalent — the CSS hover dropdowns, the mobile drawer, the native
 * <details> accordion, the scroll-snap carousel — or (b) a utility class used in
 * the PHP templates that did not exist in the React source, and therefore is not
 * in the compiled Tailwind output.
 *
 * Keeping it separate means app.css can be replaced wholesale whenever the
 * Tailwind build is re-run, without losing any of this.
 */

/* ---------------------------------------------------------- design tokens */
/* Re-declared so this file is meaningful on its own and so the custom rules
   below can reference the same colours the compiled utilities use. */
:root {
	--gwd-primary: 211 66% 22%;
	--gwd-accent: 27 96% 50%;
	--gwd-accent-strong: 27 96% 38%;
	--gwd-border: 214 20% 88%;
	--gwd-muted-fg: 214 14% 42%;
	--gwd-fg: 213 48% 13%;
}

/* ------------------------------------------------ utilities not in app.css */
.fill-accent { fill: hsl(var(--accent, var(--gwd-accent))); }
.fill-none { fill: none; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.divide-y > * + * { border-top-width: 1px; }
.divide-border > * + * { border-color: hsl(var(--border, var(--gwd-border))); }
.border-y { border-top-width: 1px; border-bottom-width: 1px; }
.z-\[60\] { z-index: 60; }
.z-\[70\] { z-index: 70; }
.max-w-\[85vw\] { max-width: 85vw; }
.text-muted-foreground\/30 { color: hsl(var(--muted-foreground, var(--gwd-muted-fg)) / 0.3); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }

/* Star rows: unfilled stars keep their outline, filled ones take the accent. */
.gwd-star-filled { fill: currentColor; }

/* line-clamp, in case the plugin was not part of the build */
.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ------------------------------------------------------------ navigation */
/* Hover/focus dropdowns with no JavaScript. app.js only adds the chevron
   rotation and Escape-to-close; the panels themselves are pure CSS, so the nav
   works even if the script fails to load. */
.gwd-drop-panel {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
	pointer-events: none;
}
.gwd-drop:hover > .gwd-drop-panel,
.gwd-drop:focus-within > .gwd-drop-panel,
.gwd-drop.is-open > .gwd-drop-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
/* The mega panel is horizontally centred, so its transform must be preserved. */
.gwd-drop-panel.-translate-x-1\/2 { transform: translate(-50%, -4px); }
.gwd-drop:hover > .gwd-drop-panel.-translate-x-1\/2,
.gwd-drop:focus-within > .gwd-drop-panel.-translate-x-1\/2,
.gwd-drop.is-open > .gwd-drop-panel.-translate-x-1\/2 { transform: translate(-50%, 0); }

.gwd-drop.is-open .gwd-drop-chevron { transform: rotate(180deg); }

/* --------------------------------------------------------- mobile drawer */
.gwd-drawer {
	transform: translateX(100%);
	transition: transform .24s ease;
}
.gwd-drawer.is-open { transform: translateX(0); }
.gwd-drawer-backdrop { opacity: 0; transition: opacity .24s ease; }
.gwd-drawer-backdrop.is-open { opacity: 1; }
body.gwd-drawer-locked { overflow: hidden; }

/* ------------------------------------------------------------- accordion */
.gwd-accordion summary::-webkit-details-marker { display: none; }
.gwd-accordion summary::marker { content: ''; }
.gwd-accordion summary:focus-visible {
	outline: 2px solid hsl(var(--ring, var(--gwd-primary)));
	outline-offset: 2px;
	border-radius: .375rem;
}

/* ------------------------------------------------------------- carousel */
.gwd-carousel-track {
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
}
.gwd-carousel-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
	.gwd-carousel-track { scroll-behavior: auto; }
}

/* --------------------------------------------------------------- reveal */
/* Progressive: elements are visible by default and only animate once app.js
   marks the document as script-enabled. A broken script can never leave the
   page blank, which is the failure mode of a JS-gated fade-in. */
html.gwd-js [data-gwd-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .5s ease, transform .5s ease;
	transition-delay: var(--gwd-delay, 0s);
}
html.gwd-js [data-gwd-reveal].is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html.gwd-js [data-gwd-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------------ editor prose ----*/
/* For page.php and any content the marketing person writes in the block editor. */
.gwd-prose { color: hsl(var(--foreground, var(--gwd-fg))); line-height: 1.75; }
.gwd-prose > * + * { margin-top: 1.15em; }
.gwd-prose h2 {
	font-family: "Archivo", sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1.25;
	color: hsl(var(--primary, var(--gwd-primary)));
	margin-top: 2em;
}
.gwd-prose h3 {
	font-family: "Archivo", sans-serif;
	font-weight: 800;
	font-size: 1.15rem;
	color: hsl(var(--primary, var(--gwd-primary)));
	margin-top: 1.6em;
}
.gwd-prose p, .gwd-prose li { color: hsl(var(--muted-foreground, var(--gwd-muted-fg))); }
.gwd-prose a { color: hsl(var(--accent-strong, var(--gwd-accent-strong))); font-weight: 600; text-decoration: underline; }
.gwd-prose ul, .gwd-prose ol { padding-left: 1.4em; }
.gwd-prose ul { list-style: disc; }
.gwd-prose ol { list-style: decimal; }
.gwd-prose li + li { margin-top: .4em; }
.gwd-prose table { width: 100%; border-collapse: collapse; font-size: .925rem; }
.gwd-prose th, .gwd-prose td {
	border: 1px solid hsl(var(--border, var(--gwd-border)));
	padding: .6rem .75rem;
	text-align: left;
}
.gwd-prose th { background: hsl(var(--secondary, 210 28% 93%)); font-weight: 700; }
.gwd-prose blockquote {
	border-left: 3px solid hsl(var(--accent, var(--gwd-accent)));
	padding-left: 1rem;
	font-style: normal;
}

/* -------------------------------------------------------------- forms ---*/
.gwd-form [aria-invalid="true"] {
	border-color: hsl(var(--destructive, 0 74% 48%));
}
.gwd-form select:required:invalid,
.gwd-form select.gwd-placeholder {
	color: hsl(var(--muted-foreground, var(--gwd-muted-fg)) / 0.7);
}

/* Skip link needs to beat the sticky header's stacking context. */
a[href="#main-content"]:focus { z-index: 100; }

/* Print: nobody needs the nav or a quote form on paper. */
@media print {
	header, footer, .gwd-drawer, .gwd-drawer-backdrop, .gwd-form-wrap, [data-gwd-carousel] { display: none !important; }
	body { background: #fff; }
}

/* ---------------------------------------------------- calculator pills ---*/
/* The pill is the <label>; the radio inside it is visually hidden. Selected and
   disabled states come from classes app.js toggles, and :focus-within gives the
   keyboard user a visible ring without any script at all. */
.gwd-pill { user-select: none; }
.gwd-pill.is-selected {
	border-color: hsl(var(--accent, var(--gwd-accent)));
	background: hsl(var(--accent-strong, var(--gwd-accent-strong)));
	color: hsl(var(--accent-foreground, 0 0% 100%));
	box-shadow: 0 8px 20px -8px hsl(var(--accent, var(--gwd-accent)) / 0.6);
}
.gwd-pill.is-selected .text-muted-foreground { color: hsl(0 0% 100% / 0.8); }
.gwd-pill.is-disabled {
	cursor: not-allowed;
	opacity: .5;
}
.gwd-pill:focus-within {
	outline: 2px solid hsl(var(--ring, var(--gwd-primary)));
	outline-offset: 2px;
}
[data-gwd-calc-style-row][hidden],
[data-gwd-calc-size-row][hidden] { display: none !important; }

/* ------------------------------------------- utilities app.css is missing */
/*
 * app.css is the compiled Tailwind build, and it was generated from the
 * original React source. Classes that only ever appeared in these PHP
 * templates were therefore never emitted, and the failure is silent: the
 * markup is correct, the class is in the HTML, and nothing styles it. That is
 * what flattened the review carousel — the three card-width classes did not
 * exist, so each card sized to its own unwrapped text and the track showed one
 * card per row with the quote running off the edge.
 *
 * Every rule below restores one specific missing class, written as plain CSS
 * rather than Tailwind output. If app.css is ever rebuilt with these templates
 * in its content globs, this block becomes redundant but stays harmless. To
 * check whether anything else is missing, compare the class tokens in the
 * rendered HTML against the selectors in app.css — that is how these were
 * found.
 */

/* Review carousel: three cards on desktop, two on tablet, one on mobile. */
.w-\[85\%\] { width: 85%; }
.snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness, proximity); }
.snap-mandatory { --tw-scroll-snap-strictness: mandatory; }
.snap-start { scroll-snap-align: start; }

@media (min-width: 640px) {
	.sm\:w-\[calc\(50\%-0\.75rem\)\] { width: calc(50% - 0.75rem); }
}
@media (min-width: 1024px) {
	.lg\:w-\[calc\(33\.333\%-1rem\)\] { width: calc(33.333% - 1rem); }
}

/* Mobile menu: the backdrop was fully transparent and the panel had no shadow,
   so the drawer read as floating text over the page underneath. */
.bg-primary\/60 { background-color: hsl(var(--primary) / 0.6); }
.backdrop-blur-sm { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }

/* FAQ accordion: the chevron never turned when an answer opened. */
.group[open] .group-open\:rotate-180 { transform: rotate(180deg); }
.pb-5 { padding-bottom: 1.25rem; }
.pt-8 { padding-top: 2rem; }

/* Product cards: the image zoom and the lift on hover. */
.group:hover .group-hover\:scale-\[1\.04\] { transform: scale(1.04); }
.hover\:shadow-\[0_18px_44px_-18px_hsl\(213_48\%_13\%\/0\.32\)\]:hover { box-shadow: 0 18px 44px -18px hsl(213 48% 13% / 0.32); }

.text-muted-foreground\/50 { color: hsl(var(--muted-foreground) / 0.5); }

/* ------------------------------------------------- review card expansion */
/*
 * Review cards hold the full review, clamped to seven lines, with a Read more
 * button that app.js reveals only on the cards whose text is actually clamped.
 *
 * The clamp is gated on html.gwd-js: if the script does not run, the button
 * stays hidden, so clamping the text would hide part of a review with no way
 * to reach it. Unclamped long reviews make for tall cards — that is the right
 * failure.
 *
 * Cards in a flex row stretch to the tallest one, so a single expanded card
 * would pad out all 24 others. Sizing each card to its own content and giving
 * them a floor instead keeps every box identical until one is opened, and then
 * only that one grows.
 */
html.gwd-js [data-gwd-quote] {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	overflow: hidden;
}
html.gwd-js [data-gwd-quote].is-expanded {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}
.gwd-carousel-track { align-items: flex-start; }
.gwd-carousel-track > li > figure { min-height: 21rem; }

/* Two more classes app.css never emitted, both used by the Read more button. */
.underline { text-decoration-line: underline; }
.hover\:text-accent-strong:hover { color: hsl(var(--accent-strong, var(--gwd-accent-strong))); }

/* The promotion bar swaps a long message for a short one on phones, and
   sm:hidden is the one utility that pairing needs which nothing else on the
   site had ever used — so app.css never emitted it. */
@media (min-width: 640px) {
	.sm\:hidden { display: none; }
}

/* ------------------------------------------------ call / quote bar (phones) */
.gwd-mobile-cta,
.gwd-mobile-cta-spacer { display: none; }

@media (max-width: 767px) {
	.gwd-mobile-cta-spacer { display: block; height: 4.75rem; }
	.gwd-mobile-cta {
		display: flex;
		gap: 0.625rem;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40; /* under the menu drawer (60/70), over page content */
		padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid hsl(var(--gwd-border));
		box-shadow: 0 -10px 28px -14px hsl(var(--gwd-fg) / 0.45);
		transition: transform 0.25s ease, visibility 0s linear 0s;
	}
	/* Only hidden when the script that can reveal it is running. */
	html.gwd-js .gwd-mobile-cta {
		transform: translateY(110%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}
	html.gwd-js .gwd-mobile-cta.is-visible {
		transform: none;
		visibility: visible;
		transition: transform 0.25s ease, visibility 0s linear 0s;
	}
	.gwd-mobile-cta a {
		display: flex;
		flex: 1 1 0;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-height: 3rem;
		border-radius: 0.375rem;
		font-weight: 800;
		font-size: 1rem;
		line-height: 1;
		text-decoration: none;
	}
	.gwd-mobile-cta__call { background: hsl(var(--gwd-primary)); color: #fff; }
	.gwd-mobile-cta__quote { background: hsl(var(--gwd-accent-strong)); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
	.gwd-mobile-cta, html.gwd-js .gwd-mobile-cta { transition: none; }
}

/* Spacing utilities the lean ad landing pages use that the compiled stylesheet
   never emitted (checked against the live app.css on 6 Oct 2026). */
.pt-10 { padding-top: 2.5rem; }
.pb-12 { padding-bottom: 3rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
@media (min-width: 1024px) {
	.lg\:pt-14 { padding-top: 3.5rem; }
	.lg\:pb-20 { padding-bottom: 5rem; }
}

/* Phones: form fields at 16px. Anything smaller makes iPhone Safari zoom the
   whole page in when a field is tapped, which on a quote form pushes the
   button off screen and is a known reason people give up. The fields were 14px
   (Tailwind's text-sm). Scoped to the quote form so nothing else changes. */
@media (max-width: 767px) {
	form[data-gwd-form] input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
	form[data-gwd-form] select,
	form[data-gwd-form] textarea {
		font-size: 16px;
	}
}

/* Ad landing pages: spacing utilities the compiled Tailwind file does not include. */
.gwd-lp-section { padding-top: 3rem; }
@media (min-width: 640px) { .gwd-lp-section { padding-top: 3.5rem; } }
.gwd-lp-tile-img { padding: 0.75rem; }

/* Offer banner: Fall Special (parts/offers.php) */
.gwd-offer-wrap { padding: 2rem 0; background: hsl(27 96% 50% / 0.08); }
.gwd-offer-inner { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .gwd-offer-wrap { padding: 3rem 0; } .gwd-offer-inner { padding: 0 1.5rem; } }
.gwd-deal { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; border-radius: 1.25rem; padding: 1.75rem 1.25rem; color: #fff;
	background: radial-gradient(120% 140% at 85% 0%, hsl(24 90% 42%) 0%, transparent 55%), linear-gradient(135deg, hsl(14 55% 16%) 0%, hsl(211 60% 18%) 55%, hsl(211 60% 26%) 100%);
	box-shadow: 0 30px 60px -25px hsl(14 55% 10% / .7); border: 3px solid hsl(36 95% 55%); }
.gwd-leaf { position: absolute; fill: hsl(36 95% 55%); opacity: .22; pointer-events: none; }
.gwd-leaf-a { width: 5rem; right: 12%; top: -.5rem; transform: rotate(25deg); }
.gwd-leaf-b { width: 3.2rem; right: 3%; bottom: 1rem; transform: rotate(-30deg); fill: hsl(14 80% 55%); opacity: .3; }
.gwd-leaf-c { width: 3.6rem; left: 42%; bottom: -.8rem; transform: rotate(60deg); fill: hsl(27 96% 55%); }
.gwd-deal-art { position: relative; flex: none; width: min(18rem, 78%); }
.gwd-art-svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgb(0 0 0 / .4)); }
.gwd-deal-main { position: relative; text-align: center; }
.gwd-deal-kicker { display: inline-block; margin: 0; font-size: .8rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: hsl(14 55% 14%); background: hsl(36 95% 58%); padding: .35rem .9rem; border-radius: 999px; }
.gwd-deal-big { margin: .8rem 0 0; font-weight: 900; line-height: .92; letter-spacing: -.02em; text-transform: uppercase; font-size: clamp(3.4rem, 15vw, 6.4rem); color: hsl(36 100% 62%); text-shadow: 0 4px 0 hsl(14 55% 12% / .6); }
.gwd-deal-upto, .gwd-deal-off { display: inline-block; font-size: .34em; letter-spacing: .02em; color: #fff; vertical-align: .55em; text-shadow: none; }
.gwd-deal-off { vertical-align: baseline; font-size: .4em; }
.gwd-deal-on { margin: .5rem 0 0; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(1rem, 4vw, 1.5rem); color: #fff; }
.gwd-deal-plus { margin: .9rem 0 0; font-weight: 900; text-transform: uppercase; font-size: clamp(1.3rem, 5.5vw, 2rem); line-height: 1; color: hsl(27 96% 62%); }
.gwd-deal-plus span { color: #fff; margin-right: .2rem; }
.gwd-deal-sub { margin: .8rem auto 0; max-width: 30rem; font-size: 1rem; line-height: 1.5; color: hsl(0 0% 100% / .92); }
.gwd-deal-sub strong { color: #fff; }
.gwd-deal-actions { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .8rem; align-items: stretch; }
.gwd-deal-btn { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: 1rem 1.5rem; border-radius: .6rem; font-weight: 900; font-size: 1.1rem; text-decoration: none; color: #fff; background: hsl(14 85% 46%); box-shadow: 0 14px 30px -8px hsl(14 85% 40% / .8); border: 2px solid hsl(36 95% 58%); transition: filter .15s, transform .1s; }
.gwd-deal-btn:hover { filter: brightness(1.1); }
.gwd-deal-btn:active { transform: scale(.98); }
.gwd-deal-call { text-align: center; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.gwd-deal-clock { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 8rem; height: 8rem; border-radius: 50%; background: hsl(36 100% 96%); color: hsl(14 55% 16%); box-shadow: 0 0 0 6px hsl(36 95% 58% / .55); text-align: center; line-height: 1.1; }
.gwd-deal-clock-num { font-weight: 900; font-size: 2.9rem; color: hsl(14 85% 44%); line-height: 1; }
.gwd-deal-clock-txt { font-weight: 900; text-transform: uppercase; font-size: .9rem; letter-spacing: .06em; }
.gwd-deal-clock-note { font-size: .68rem; font-weight: 700; margin-top: .15rem; opacity: .8; }
@media (min-width: 900px) {
	.gwd-deal { flex-direction: row; justify-content: space-between; gap: 2rem; padding: 2.5rem 3rem; }
	.gwd-deal-art { width: 20rem; }
	.gwd-deal-main { text-align: left; flex: 1; }
	.gwd-deal-sub { margin-left: 0; }
	.gwd-deal-actions { flex-direction: row; align-items: center; gap: 1.5rem; }
	.gwd-deal-clock { width: 11rem; height: 11rem; }
	.gwd-deal-clock-num { font-size: 4.2rem; }
}
.gwd-offer-terms { margin: .75rem 0 0; font-size: .8rem; color: hsl(215 14% 32%); }
.gwd-offer-terms summary { cursor: pointer; display: inline-block; font-weight: 700; }
.gwd-offer-terms p { margin: .5rem 0 0; font-size: .75rem; line-height: 1.55; }
.gwd-rebate { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.25rem; padding: 1.1rem 1.25rem; background: #fff; border: 2px dashed hsl(27 96% 50% / .6); border-radius: .9rem; }
.gwd-rebate-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: hsl(27 96% 50% / .15); color: hsl(27 96% 38%); }
.gwd-rebate-title { margin: 0; font-weight: 900; color: hsl(211 66% 22%); font-size: 1.05rem; }
.gwd-rebate-body { margin: .25rem 0 0; font-size: .92rem; line-height: 1.5; color: hsl(215 16% 35%); }
.gwd-deal-call { white-space: nowrap; }
@media (min-width: 900px) { .gwd-deal-btn { white-space: nowrap; padding: 1rem 1.25rem; font-size: 1rem; } .gwd-deal-art { width: 17rem; } }
/* Fall Special layout: badge in the corner, small pictures, biggest possible offer text */
.gwd-deal { padding-top: 2rem; }
.gwd-deal-clock { position: absolute; top: .75rem; right: .75rem; width: 5.6rem; height: 5.6rem; box-shadow: 0 0 0 4px hsl(36 95% 58% / .55); z-index: 2; }
.gwd-deal-clock-num { font-size: 1.9rem; }
.gwd-deal-clock-txt { font-size: .6rem; }
.gwd-deal-clock-note { font-size: .5rem; }
.gwd-deal-art { width: min(10rem, 45%); }
.gwd-deal-big { font-size: clamp(3.6rem, 21vw, 9.5rem); line-height: .88; }
.gwd-deal-on { font-size: clamp(1.1rem, 5.2vw, 2.2rem); }
.gwd-deal-plus { font-size: clamp(1.6rem, 8vw, 3.4rem); }
@media (min-width: 900px) {
	.gwd-deal { padding: 2.75rem 3rem 2.5rem 2.5rem; gap: 1.75rem; }
	.gwd-deal-art { width: 11rem; align-self: center; }
	.gwd-deal-clock { top: 1rem; right: 1rem; width: 7rem; height: 7rem; }
	.gwd-deal-clock-num { font-size: 2.6rem; }
	.gwd-deal-clock-txt { font-size: .75rem; }
	.gwd-deal-clock-note { font-size: .6rem; }
	.gwd-deal-big { font-size: clamp(5rem, 9.5vw, 9.5rem); }
	.gwd-deal-main { padding-right: 5rem; }
}
@media (max-width: 899px) {
	.gwd-deal-upto { display: block; font-size: 1.6rem; margin-bottom: .2rem; }
	.gwd-deal-big { font-size: clamp(3.4rem, 22vw, 7rem); }
	.gwd-deal-off { font-size: .55em; }
}
@media (max-width: 899px) { .gwd-deal-big { font-size: clamp(3rem, 19vw, 6.5rem); white-space: nowrap; } .gwd-deal-off { font-size: .5em; } }
/* Fall Special v3: biggest offer text, plain "days left" bubble */
.gwd-deal-clock-note { display: none; }
.gwd-deal-clock { width: 5rem; height: 5rem; }
.gwd-deal-main { width: 100%; }
@media (min-width: 900px) {
	.gwd-deal-main { padding-right: 0; flex: 1 1 auto; }
	.gwd-deal-art { width: 9.5rem; }
	.gwd-deal-big { font-size: clamp(6rem, 14.5vw, 13rem); line-height: .85; white-space: nowrap; }
	.gwd-deal-upto { font-size: .3em; }
	.gwd-deal-off { font-size: .5em; }
	.gwd-deal-on { font-size: clamp(1.6rem, 3.6vw, 3.2rem); }
	.gwd-deal-plus { font-size: clamp(2.2rem, 5.4vw, 4.6rem); }
	.gwd-deal-sub { max-width: none; font-size: 1.15rem; }
	.gwd-deal-clock { top: .9rem; right: .9rem; width: 6.2rem; height: 6.2rem; }
}
/* Fall Special label: bigger */
.gwd-deal-kicker { font-size: 1rem; padding: .45rem 1.1rem; }
@media (min-width: 900px) {
	.gwd-deal-kicker { font-size: 2rem; padding: .55rem 1.6rem; letter-spacing: .16em; }
	.gwd-deal-art { width: 11.5rem; }
}

/* -----------------------------------------------------------------------------
 * BBB video section (parts/home/bbb-video.php). Self-contained so it does not
 * depend on Tailwind classes being present in the compiled app.css.
 * -------------------------------------------------------------------------- */
.gwd-bbbv { background: hsl(var(--gwd-primary) / 0.04); border-top: 1px solid hsl(var(--gwd-border)); border-bottom: 1px solid hsl(var(--gwd-border)); padding: 3.5rem 0; }
.gwd-bbbv__inner { max-width: 72rem; margin: 0 auto; padding: 0 1rem; display: grid; gap: 2rem; align-items: center; }
.gwd-bbbv__eyebrow { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--gwd-accent-strong)); }
.gwd-bbbv__title { margin: .6rem 0 0; font-size: 1.875rem; line-height: 1.15; font-weight: 800; color: hsl(var(--gwd-primary)); }
.gwd-bbbv__lead { margin: 1rem 0 0; line-height: 1.6; color: hsl(var(--gwd-muted-fg)); }
.gwd-bbbv__link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem; padding: .7rem 1.25rem; border: 2px solid hsl(var(--gwd-primary) / 0.2); border-radius: .375rem; font-size: .875rem; font-weight: 800; color: hsl(var(--gwd-primary)); text-decoration: none; }
.gwd-bbbv__link:hover { border-color: hsl(var(--gwd-accent)); color: hsl(var(--gwd-accent-strong)); }
.gwd-bbbv__frame { position: relative; aspect-ratio: 16 / 9; border-radius: .75rem; overflow: hidden; background: #fff; box-shadow: 0 12px 32px -12px hsl(var(--gwd-primary) / 0.35); }
.gwd-bbbv__frame iframe, .gwd-bbbv__play, .gwd-bbbv__play img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gwd-bbbv__play { padding: 0; cursor: pointer; background: none; border: 0; }
.gwd-bbbv__play img { object-fit: cover; }
.gwd-bbbv__btn { position: absolute; right: 1rem; bottom: 1rem; display: flex; align-items: center; justify-content: center; width: 3.75rem; height: 3.75rem; padding-left: .2rem; border-radius: 9999px; background: hsl(var(--gwd-accent)); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.3); transition: transform .15s; }
.gwd-bbbv__play:hover .gwd-bbbv__btn, .gwd-bbbv__play:focus-visible .gwd-bbbv__btn { transform: scale(1.08); }
.gwd-bbbv__play:focus-visible { outline: 3px solid hsl(var(--gwd-accent)); outline-offset: -3px; }
.gwd-bbbv__note { margin: .6rem 0 0; font-size: .75rem; color: hsl(var(--gwd-muted-fg)); }
.gwd-bbbv__note a { color: inherit; text-decoration: underline; }
@media (min-width: 640px) { .gwd-bbbv__inner { padding: 0 1.5rem; } .gwd-bbbv__title { font-size: 2.25rem; } }
@media (min-width: 900px) { .gwd-bbbv { padding: 4.5rem 0; } .gwd-bbbv__inner { grid-template-columns: 5fr 7fr; gap: 3rem; } }

.gwd-offer-star { margin: .75rem 0 0; font-size: .8rem; font-weight: 700; color: hsl(215 14% 32%); }