/* lux-bridge */
/* ============================================================================
   LUX bridge.css: WordPress-only overrides, loaded after main.css.
   Never edit the ported stylesheet; anything Elementor or WordPress still
   beats goes here, with the reason.
   ========================================================================= */

/* Elementor's frontend.min.css ships `.elementor img{height:auto}` at (0,1,1),
   which beats the design's own image sizing. Re-assert the frames the design
   sizes by height. Extend when a ported section sizes an <img>. */
.elementor .brand img,
.elementor .footer-logo img {
  height: 100%;
}

/* WordPress themes reset figure margins; the design expects none. */
.elementor figure {
  margin: 0;
}

/* Elementor's default 10px container padding would inset every section. */
.elementor-location-header .e-con,
.elementor-location-footer .e-con,
.e-con.lux-full {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
}

/* Elementor lazy-loads background images; the design's reveals must show in
   the editor canvas or the canvas looks blank. */
body.elementor-editor-active [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* Sideways scroll guard on phones (amprite lesson): clip blocks programmatic
   X-scroll and creates no scroll container, so sticky headers are untouched. */
html {
  overflow-x: clip;
}

/* Sticky header. Every Elementor box between <body> and .site-header (the
   theme-builder <header>, its container, the widget, the widget container and
   the LUX wrapper) is exactly the header's height, so `position: sticky` had
   nothing to slide inside. On the front end those boxes step out of layout;
   the editor keeps them so the canvas stays selectable. The mobile bar and
   promo bar share the wrapper class. */
body:not(.elementor-editor-active) .elementor-location-header,
body:not(.elementor-editor-active) .elementor-location-header > .e-con,
body:not(.elementor-editor-active) .elementor-location-header .elementor-widget-lux-header,
body:not(.elementor-editor-active) .elementor-location-header .elementor-widget-lux-promo-bar,
body:not(.elementor-editor-active) .elementor-location-header .elementor-widget-lux-header > .elementor-widget-container,
body:not(.elementor-editor-active) .elementor-location-header .elementor-widget-lux-promo-bar > .elementor-widget-container,
body:not(.elementor-editor-active) .lux-chrome {
  display: contents;
}

/* React never rendered the inactive showroom panels; WordPress renders them with the hidden attribute, and main.css
   display rules (.map-stage, .showroom-card, .map-gate) would otherwise beat it. Hidden means hidden, everywhere. */
[hidden] { display: none !important; }

/* Home, phone: the compact shop-path rows reset min-height, but main.css line 2092 gives the third row 210px with
   higher specificity (a:nth-child(3)), leaving a tall gap under "Street legal carts". Same reset, same weight. */
@media (max-width: 700px) { .path-grid > a:nth-child(3) { min-height: 0; } }

/* Accessibility: WCAG AA contrast for small gold and grey text on light panels (axe color-contrast, 26 Sept 2026).
   --gold-deep was #ac8a4a (2.8:1 on cream); #7f652c keeps the hue at 4.9:1 on cream and 5.5:1 on white. */
:root { --gold-deep: #7f652c; }
.product-warranty-head { color: #5c605d; }
.fsteps-mark { color: #5c605d; }

/* Fine print on the dark lender card inherited the light-panel grey (3.2:1 on #171a18). */
.finance-concept > p { color: #c9cdc9 !important; }
.finance-concept .finance-fine { color: #a9ada9 !important; }

/* FAQ "Background" control: paper variant (the demo only had cream). */
.section-paper { background: var(--paper); }

/* Hero photo always fills its frame, whatever inline style the image helper printed. */
.page-hero-image .media-clip > img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* SECTION RHYTHM (Elementor): the demo's ".section-cream + .section-cream" alternation, applied to the widget
   wrappers because every LUX section sits in its own Elementor element. A cream section right after another
   steps to paper, a third back to cream, a fourth to paper. */
.elementor-widget:has(.lux-section > .section-cream) + .elementor-widget:has(.lux-section > .section-cream) .lux-section > .section-cream { background: var(--paper); }
.elementor-widget:has(.lux-section > .section-cream) + .elementor-widget:has(.lux-section > .section-cream) + .elementor-widget:has(.lux-section > .section-cream) .lux-section > .section-cream { background: var(--cream); }
.elementor-widget:has(.lux-section > .section-cream) + .elementor-widget:has(.lux-section > .section-cream) + .elementor-widget:has(.lux-section > .section-cream) + .elementor-widget:has(.lux-section > .section-cream) .lux-section > .section-cream { background: var(--paper); }

/* Style tab: Section background. Explicit choice beats the rhythm rule. */
.lux-surface-paper .lux-section > .section, .lux-surface-paper .lux-section > .section-cream { background: var(--paper) !important; }
.lux-surface-cream .lux-section > .section, .lux-surface-cream .lux-section > .section-cream { background: var(--cream) !important; }

/* Style tab: Motion off. Reveals show at once, drawings sit in their finished state. */
.lux-motion-off .lux-section *, .lux-motion-off .lux-section *::before, .lux-motion-off .lux-section *::after { animation: none !important; transition: none !important; }
.lux-motion-off .lux-section [data-reveal], .lux-motion-off .lux-section [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
.lux-motion-off .lux-section svg path, .lux-motion-off .lux-section svg circle, .lux-motion-off .lux-section svg line, .lux-motion-off .lux-section svg polyline { stroke-dashoffset: 0 !important; }

/* Promo bar: lines take turns instead of cross-fading, so two are never visible in the same instant (seen as overlapped text in a mid-fade screenshot). Outgoing fades in 0.22 s, the next comes in after it. */
.promo-item { transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s; }
.promo-item.is-on { transition: opacity 0.32s ease 0.24s, transform 0.32s ease 0.24s, visibility 0s linear 0.24s; }
@media (prefers-reduced-motion: reduce) { .promo-item, .promo-item.is-on { transition: none; } }

/* PHONE MENU (27 Sept). Lock the page on <html> only: overflow on <body> made it a scroll box of its own and the
   sticky header, with the open menu inside it, snapped back to the top of the page after any scroll. */
@media (max-width: 999.98px) {
  html.menu-open body { overflow: visible; }
  html.menu-open { overflow: hidden; }
  .main-nav.open { max-height: calc(100svh - var(--menu-top, 142px)); }

  /* Brands panel rows: logo chip, then name and stock line. The desktop rules for these live at 1000px and up. */
  .main-nav .nav-panel a.nav-brand { display: flex !important; align-items: center; gap: 14px; padding: 10px 2px !important; }
  .main-nav .nav-brand-mark { flex: 0 0 auto; position: relative; display: grid; place-items: center; width: 64px; height: 34px; overflow: hidden; }
  .main-nav .nav-brand-mark img { object-fit: contain; }
  .main-nav .nav-brand-mark .nav-brand-word { font-size: 12px; }
  .main-nav .nav-brand-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .main-nav .nav-brand-copy b { color: #e7e9e5; font-size: 15px; font-weight: 600; }
  .main-nav .nav-brand-copy small { color: #8f948e; font-size: 12.5px; letter-spacing: 0.04em; }
}

/* COMPARE ON PHONES (27 Sept). Row label on top, one value per cart side by side, cart heads pinned. */
@media (max-width: 700px) {
  .compare-page .compare-page-scroll { overflow: visible; margin-left: 0; margin-right: 0; }
  .compare-page .compare-table, .compare-page .compare-table thead, .compare-page .compare-table tbody { display: block; width: 100%; }
  .compare-page .compare-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; }
  .compare-page .compare-table tr:not(:has(> :nth-child(4))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-page .compare-table tr:not(:has(> :nth-child(3))) { grid-template-columns: minmax(0, 1fr); }
  .compare-page .compare-table th, .compare-page .compare-table td { display: block; width: auto; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }

  /* Cart heads: photo, name, links. Pinned under the header while the rows scroll. */
  .compare-page .compare-table thead { position: sticky; top: var(--lux-head-h, 64px); z-index: 3; background: var(--paper); padding: 10px 0 12px; border-bottom: 1px solid var(--line); box-shadow: 0 10px 18px -16px rgba(20, 28, 22, 0.35); }
  .compare-page .compare-table thead tr > td:first-child { display: none; }
  .compare-page .compare-table thead th { position: static; background: none; }
  .compare-page .compare-head-img { height: auto; aspect-ratio: 4 / 3; margin-bottom: 8px; }
  .compare-page .compare-table thead b { font-size: 14.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .compare-page .compare-table thead a { margin-top: 6px; font-size: 10px; letter-spacing: 0.08em; }

  /* Rows: label across, values below. */
  .compare-page .compare-table tbody tr { padding: 12px 0 13px; border-bottom: 1px solid var(--line); row-gap: 6px; }
  .compare-page .compare-table tbody th { grid-column: 1 / -1; width: auto; font-size: 10.5px; }
  .compare-page .compare-table tbody td { font-size: 14px; line-height: 1.4; }
  .compare-page .compare-table tr[data-differs] { background: rgba(214, 182, 118, 0.11); margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .compare-page .compare-table tr[data-differs] td { background: none; }
}

/* HERO PHOTO FIRST ON PHONES (27 Sept). Full width photo band under the header, fading into the hero, then the text. */
@media (max-width: 800px) {
  .page-hero:not(:has(.product-hero-price)):has(.page-hero-image img) { padding-top: 0; }
  .page-hero:not(:has(.product-hero-price)):has(.page-hero-image img) .page-hero-grid { display: flex; flex-direction: column; }
  .page-hero:not(:has(.product-hero-price)):has(.page-hero-image img) .page-hero-media { display: block !important; order: -1; align-self: flex-start; /* QA 12 Nov 2026: centred in the column it sat 10px off, leaving a strip on the right */ width: 100vw; max-width: none; margin: 0 0 0 calc(50% - 50vw); padding: 0; transform: none !important; }
  .page-hero:not(:has(.product-hero-price)):has(.page-hero-image img) .page-hero-media .media-bloom, .page-hero:not(:has(.product-hero-price)):has(.page-hero-image img) .page-hero-media .media-floor { display: none; }
  .page-hero:not(:has(.product-hero-price)):has(.page-hero-image img) .page-hero-image { position: relative; width: 100% !important; height: auto !important; aspect-ratio: 16 / 10 !important; min-height: 0 !important; max-height: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .page-hero:not(:has(.product-hero-price)):has(.page-hero-image img) .page-hero-image .media-clip { transform: none !important; }
  .page-hero:not(:has(.product-hero-price)):has(.page-hero-image img) .page-hero-image::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 42%; z-index: 3; pointer-events: none; border-radius: 0; box-shadow: none; background: linear-gradient(0deg, rgba(12, 15, 14, 0.92) 0%, rgba(12, 15, 14, 0.45) 45%, rgba(12, 15, 14, 0) 100%); }
  .page-hero:not(:has(.product-hero-price)):has(.page-hero-image img) .breadcrumbs-hero { padding-top: 16px; }
}

/* PHONE SWEEP (27 Sept). */
@media (max-width: 700px) {
  .listing-ledger-head { font-size: 11px; }

  /* Brands comparison: one card per brand, four labelled facts in two columns. */
  .brand-compare-scroll { overflow: visible; }
  .brand-compare-table, .brand-compare-table tbody { display: block; width: 100%; min-width: 0 !important; }
  .brand-compare-table thead { display: none; }
  .brand-compare-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .brand-compare-table tbody th, .brand-compare-table tbody td { display: block; padding: 0; border: 0; text-align: left; }
  .brand-compare-table tbody th[scope="row"] { grid-column: 1 / -1; }
  .brand-compare-table tbody td { font-size: 15px; line-height: 1.35; }
  .brand-compare-table tbody td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
}

/* Cart pages, single-column widths (up to 999 px): the detail column cannot be stretched by the photo strip. */
@media (max-width: 999.98px) {
  .product-detail-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .product-detail-grid > *, .product-detail-left > *, .product-detail-grid .gal, .product-detail-grid .gal-b { min-width: 0; max-width: 100%; }
}

/* COMPARE ROUND TWO (27 Sept). */
/* Whole cart in every compare photo, never cropped. */
.compare-head-img, .compare-chip-img { background: #efece5; }
.compare-head-img img, .compare-chip-img img { object-fit: contain !important; }
/* A tray or sheet rebuilt after a change appears in place instead of sliding in again. */
.compare-tray.no-enter, .compare-modal.no-enter .compare-sheet, .compare-modal.no-enter .compare-backdrop { animation: none !important; }

@media (max-width: 700px) {
  /* The pop-up gets the same phone rows as the full compare page. */
  .compare-sheet .compare-scroll { overflow: visible; }
  .compare-sheet .compare-table, .compare-sheet .compare-table thead, .compare-sheet .compare-table tbody { display: block; width: 100%; min-width: 0 !important; }
  .compare-sheet .compare-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; }
  .compare-sheet .compare-table tr:not(:has(> :nth-child(4))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-sheet .compare-table tr:not(:has(> :nth-child(3))) { grid-template-columns: minmax(0, 1fr); }
  .compare-sheet .compare-table th, .compare-sheet .compare-table td { display: block; width: auto; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
  .compare-sheet .compare-table thead { position: sticky; top: 0; z-index: 3; background: var(--paper); padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
  .compare-sheet .compare-table thead tr > td:first-child { display: none; }
  .compare-sheet .compare-table thead th { position: static; background: none; }
  .compare-sheet .compare-head-img { height: auto !important; aspect-ratio: 4 / 3; margin-bottom: 8px; }
  .compare-sheet .compare-table thead b { font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .compare-sheet .compare-table thead a, .compare-sheet .compare-table thead button { margin-top: 6px; font-size: 10px; letter-spacing: 0.08em; }
  .compare-sheet .compare-table tbody tr { padding: 12px 0 13px; border-bottom: 1px solid var(--line); row-gap: 6px; }
  .compare-sheet .compare-table tbody th { grid-column: 1 / -1; width: auto; font-size: 10.5px; }
  .compare-sheet .compare-table tbody td { font-size: 14px; line-height: 1.4; }
  .compare-sheet .compare-table tr[data-differs] { background: rgba(214, 182, 118, 0.11); margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .compare-sheet .compare-table tr[data-differs] td { background: none; }
  .compare-page .compare-head-img { height: auto !important; }

  /* Tray: all three carts show as small overlapping photos. */
  .compare-tray .compare-chips { display: flex; flex: 1 1 auto; min-width: 0; gap: 0; }
  .compare-tray .compare-chips li { margin: 0 0 0 -10px; padding: 0; background: none; border: 0; }
  .compare-tray .compare-chips li:first-child { margin-left: 0; }
  .compare-tray .compare-chip-img { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(15, 19, 17, 0.95); }
  .compare-tray .compare-chip-copy, .compare-tray .compare-chips li > button { display: none; }
}

/* COMPARE ROUND TWO, refinements. */
@media (min-width: 701px) { .compare-page .compare-head-img, .compare-sheet .compare-head-img { height: 220px; } }
@media (max-width: 700px) {
  .compare-sheet .compare-scroll { padding: 0 16px; }
  .compare-sheet .compare-table tr[data-differs] { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .compare-tray .compare-chips { flex: 0 0 auto; }
  .compare-tray .compare-tray-inner { gap: 10px; }
  .compare-tray .compare-tray-actions { gap: 10px; }
  .compare-tray .compare-tray-actions .button { padding: 11px 12px; }
}

/* Tray fit on narrow phones: the thumbnails say how many carts, so the count label steps aside and the actions tighten. */
@media (max-width: 460px) {
  .compare-tray .compare-tray-label { display: none; }
  .compare-tray .compare-tray-inner { padding: 10px 12px; gap: 10px; flex-wrap: nowrap; }
  .compare-tray .compare-tray-actions { flex: 1 1 auto; min-width: 0; width: auto; justify-content: flex-end; gap: 6px; }
  .compare-tray .compare-tray-actions .button, .compare-tray .compare-tray-actions button, .compare-tray .compare-tray-actions a { padding: 10px 9px; font-size: 10.5px; letter-spacing: 0.06em; white-space: nowrap; }
}

/* Header on narrow laptops (1000 to 1399px): the six menu triggers, Call and
   Schedule a test ride ran up to 117px past the right edge. Gaps and trigger
   type scale with the window; below 1140px the outline Call button steps aside,
   since the gold utility bar right above it carries the same number. */
@media (min-width: 1000px) and (max-width: 1399px) {
  .site-header .nav-inner { gap: clamp(18px, 2.2vw, 34px); }
  .site-header .main-nav { gap: clamp(14px, 1.6vw, 30px); }
  .site-header .main-nav .nav-trigger { font-size: clamp(12px, 1.02vw, 13.5px); letter-spacing: 0.08em; }
  .site-header .main-nav > .button { padding: 0 clamp(12px, 1.25vw, 20px); white-space: nowrap; }
}
@media (min-width: 1000px) and (max-width: 1139px) {
  .site-header .main-nav > .nav-call { display: none; }
  .site-header .main-nav { gap: 14px; }
  .site-header .main-nav .nav-trigger { letter-spacing: 0.06em; }
  .site-header .main-nav > .button-gold { margin-left: auto; }
  .site-header .brand, .site-header .brand img { width: 110px; }
}

/* Cart hero, factory cut-out (widgets/lux-cart-hero.php adds .is-cutout when the
   main photo has a transparent ground). Same full-bleed panel and feathered
   edge as every other cart; the panel gets the design's lit dark ground and
   the cart shows whole instead of being cropped to its seats. */
.page-hero-media.is-cutout .page-hero-image {
	background:
		radial-gradient(70% 55% at 50% 62%, rgba(214, 182, 118, .16) 0%, transparent 68%),
		linear-gradient(160deg, #1c2320 0%, #0f1413 100%) !important;
}
.page-hero-media.is-cutout .page-hero-image .media-clip > img {
	object-fit: contain !important;
	padding: clamp(20px, 2.5vw, 44px) clamp(8px, 1.2vw, 20px) clamp(20px, 2.5vw, 44px) clamp(36px, 4.5vw, 80px) !important;
	box-sizing: border-box;
	filter: drop-shadow(0 28px 30px rgba(0, 0, 0, .55));
	box-shadow: none; /* the photo rule's box shadow (main.css) would outline the transparent padding */
}
/* Phones keep the 4:5 frame with the name over its dark lower fade; the cart
   sits whole in the upper part, clear of the title. */
@media (max-width: 900px) {
	.page-hero:has(.product-hero-price) .page-hero-media.is-cutout .page-hero-image .media-clip > img {
		object-position: center top !important;
		padding: 22px 16px 32% !important;
	}
}

/* Cart sheet, single factory cut-out (widgets/lux-cart-sheet.php): the whole
   cart on a soft studio ground instead of a crop to the seats. */
.product-detail-media.is-cutout {
	min-height: 0;
	aspect-ratio: 4 / 3;
	background: radial-gradient(70% 60% at 50% 58%, #fbf9f4 0%, #ece7dc 100%);
}
.product-detail-media.is-cutout img {
	object-fit: contain !important;
	padding: clamp(18px, 3vw, 44px);
	box-sizing: border-box;
	filter: drop-shadow(0 22px 22px rgba(30, 26, 18, .22));
}

/* Compare pop-up (main.js drawModal). The page is locked on <html> while it is
   open, and the pop-up scrolls inside itself: on phones the table rows used to
   spill past the sheet's height with nothing to scroll, so the last rows and
   "Book a test ride" were out of reach, and swipes dragged the page behind. */
html.compare-open { overflow: hidden; }
.compare-modal { overscroll-behavior: contain; }
@media (max-width: 700px) {
	.compare-modal { padding: 12px; }
	.compare-sheet { max-height: calc(100dvh - 24px); }
	.compare-sheet .compare-scroll {
		flex: 1 1 auto;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	.compare-sheet .compare-sheet-foot { flex: 0 0 auto; }
}
/* Full compare page on phones: the sticky row of cart photos rides its own
   compositor layer, so momentum scrolling on iOS does not make it shudder. */
@media (max-width: 900px) {
}

/* Phones and touch screens: the film-grain overlay (.grain) is a fixed layer
   twice the screen size, blended with mix-blend-mode over everything and
   jumped every 1.2s. Mobile browsers re-blend the whole page on every scroll
   frame because of it, and the sticky header and its links shook while
   scrolling. At 3.5% it is invisible on a phone, so it stays desktop only,
   and the sticky header gets its own compositor layer. */
@media (max-width: 900px), (hover: none) {
	.grain { display: none !important; animation: none !important; }
}

/* Touch screens and phones: nothing moves with the scroll. main.js only runs
   the parallax and ghost drift for a fine pointer; these rules also clear any
   value left from a first paint, drop the frosted blur on the fixed bars
   (they are 90 to 97% opaque, so they look the same) and hide the 2px
   progress line, so the fixed and sticky parts stay still while scrolling. */
@media (max-width: 900px), (hover: none) {
	[data-parallax] { transform: none !important; will-change: auto !important; }
	[data-ghost]::before { transform: translateY(-38%) !important; }
	.compare-tray, .mobile-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
	.compare-tray { background: rgba(15, 19, 17, 0.97); }
	.scroll-progress { display: none !important; }
}

/* Phones: the header looks the same scrolled or not. The stuck state used to
   shrink the logo from 122x56 to 104x48 with a 0.45s animation; on a phone the
   scroll position crosses the threshold back and forth (address bar, top
   bounce), so the logo kept shrinking and growing and the header shook. */
@media (max-width: 900px) {
	.site-header,
	.site-header .nav-inner,
	.site-header .brand,
	.site-header .brand img { transition: none !important; }
	.site-header .brand,
	.site-header.is-stuck .brand { width: 112px; height: 52px; }
	.site-header .brand img,
	.site-header.is-stuck .brand img { width: 112px; }
	.site-header,
	.site-header.is-stuck { box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
}

/* The promo bar's close button sat 4px from the right edge and its enlarged
   tap area (::after, inset -6px) reached 2px past the screen. Chrome clips it,
   but iPhone Safari lets a finger pan the page those 2px sideways while
   scrolling, so the top bars and the header wiggled. The button moves in and
   the bar clips its own edges; the tap area keeps its 44px. */
.promo-bar { overflow-x: clip; }
@media (max-width: 1100px) {
	.promo-close { right: 10px; }
}

/* COMPARE ON PHONES, round three. The pinned row of cart heads was a white box
   inside the 20px gutter, its photos flush with its edge, while the highlighted
   rows ran wider than it. On iPhones it also shook: Safari jitters a sticky
   element that carries a transform, and clips a sticky element's ancestor
   with overflow clip. The band and the rows now run edge to edge with 24px of
   padding, the heads sit on no transform, and the section no longer clips. */
@media (max-width: 700px) {
	.compare-page-section { overflow-x: visible; }
	.compare-page .compare-table thead {
		width: auto; /* the earlier width: 100% kept the band at the container's width */
		margin: 0 calc(50% - 50vw);
		padding: 12px calc(50vw - 50% + 4px) 12px;
		transform: none !important;
		will-change: auto;
		box-shadow: 0 12px 20px -16px rgba(20, 28, 22, 0.35);
	}
	.compare-page .compare-table tbody tr { margin: 0 calc(50% - 50vw); padding: 12px calc(50vw - 50% + 4px) 13px; }
	.compare-page .compare-table tr[data-differs] { margin: 0 calc(50% - 50vw); padding-left: calc(50vw - 50% + 4px); padding-right: calc(50vw - 50% + 4px); }

	/* The pop-up: title, cart heads and rows share one 20px inset from the sheet's
	   edge; highlighted rows run to the edge. */
	.compare-sheet .compare-sheet-head { padding: 22px 20px 16px; }
	.compare-sheet .compare-scroll { padding: 0 20px; }
	.compare-sheet .compare-table thead { padding: 12px 0 12px; transform: none !important; }
	.compare-sheet .compare-table tr[data-differs] { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
	.compare-sheet .compare-sheet-foot { padding: 16px 20px; }
	/* Fingers on the head, foot or the dark backdrop must not drag the page behind
	   the pop-up (iOS scroll chaining); only the table scrolls. */
	.compare-backdrop, .compare-sheet-head, .compare-sheet-foot { touch-action: none; }
	.compare-sheet .compare-scroll { touch-action: pan-y; }
	.compare-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 10, 9, 0.78); }
}
/* iOS keeps scrolling a page under a fixed pop-up even with overflow hidden,
   and the pop-up shakes with it. main.js pins the body at the scroll position
   while the pop-up is open and puts it back on close. */
html.compare-open body { position: fixed; left: 0; right: 0; width: 100%; overflow: visible; }

/* TABLET BAND (23 Oct). From 801 to 999px the hero still slides up under the sticky header (header ends 118px below
   the hero's top) but kept a 26px top padding, so the logo sat on the breadcrumb. Clear the header as desktop does. */
@media (min-width: 801px) and (max-width: 999.98px) {
  .page-hero { padding-top: 150px; }
  .inventory-hero.inventory-band { padding-top: 140px; } /* the inventory pages' hero: 22px here, 140px from 1000px */
}

/* SHORT LAPTOP SCREENS (23 Oct). The Inventory mega-menu opens 172px down but was capped at 100vh - 120px, so at
   1280x720 its last row sat below the screen. Cap it at the space actually left under the header. */
@media (min-width: 1000px) {
  .nav-panel[data-showcase] { max-height: calc(100vh - 188px); }
}

/* Header phone (23 Oct): the call link in the gold bar was 12px; a step up so it reads as the conversion link it is. */
.utility-inner > a[href^="tel:"] { font-size: 14px; }

/* POST-LAUNCH QA ROUND 2: LAYOUT (12 Nov 2026). Photo first on phones, headline on the first screen
   (design-phone-hero-headline-below-fold, design-phone-hero-empty-band, design-phone-hero-dead-band).
   The 52px gap of the old two-column grid still applied to the flex column, and the 16:10 photo plus that gap
   pushed the H1 and the buttons under the bottom bar. No gap, a 12px step to the breadcrumb, and a 16:9 band
   that never takes more than a third of a short screen. */
@media (max-width: 800px) {
  .page-hero:not(:has(.product-hero-price)):has(.page-hero-image img) .page-hero-grid { gap: 0; }
  .page-hero:not(:has(.product-hero-price)):has(.page-hero-image img) .page-hero-image { aspect-ratio: 16 / 9 !important; max-height: 32svh !important; }
  .page-hero:not(:has(.product-hero-price)):has(.page-hero-image img) .breadcrumbs-hero { padding-top: 12px; }
}

/* lux-cart */
/* =============================================================================
   LUX cart page additions (approved 25 Sept 2026): the photo mosaic with its
   full-screen viewer, and the "Full listing details" sheet. Everything else
   on the cart page is the ported design in main.css.
   ========================================================================== */

/* --------------------------------------------------------------- mosaic */
.gal { position: relative; }
.gal-b { display: grid; grid-template-columns: 1.55fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 16 / 10; }
.gal-b[data-n="2"] { grid-template-columns: 1.55fr 1fr; }
.gal-b[data-n="3"], .gal-b[data-n="4"] { grid-template-columns: 1.55fr 1fr; }
.gal-b[data-n="2"] .gal-b-tile:not(.gal-b-lead), .gal-b[data-n="3"] .gal-b-tile:nth-child(2) { grid-row: 1 / 3; }
.gal-b-tile { position: relative; overflow: hidden; border: 0; padding: 0; border-radius: 4px; background: #ddd9d0; cursor: pointer; }
.gal-b-lead { grid-row: 1 / 3; }
.gal-b-tile img { object-fit: cover; transition: transform 1.4s var(--ease); }
.gal-b-tile:hover img { transform: scale(1.04); }
.gal-b-tile::after { content: ""; position: absolute; inset: 0; background: rgba(10, 13, 12, 0); transition: background 0.4s var(--ease); }
.gal-b-tile:hover::after { background: rgba(10, 13, 12, 0.12); }
.gal-b-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gal-b-label { position: absolute; left: 22px; bottom: 20px; z-index: 2; display: grid; gap: 4px; text-align: left; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.gal-b-label b { font: 400 26px/1 "Fraunces", Georgia, serif; }
.gal-b-label small { font: 500 11px/1.3 "Instrument Sans", system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.gal-b-more { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 2px; color: #fff; background: rgba(10, 13, 12, 0.58); backdrop-filter: blur(2px); transition: background 0.4s var(--ease); }
.gal-b-tile:hover .gal-b-more { background: rgba(10, 13, 12, 0.42); }
.gal-b-more b { font: 400 40px/1 "Fraunces", Georgia, serif; color: var(--gold-light); }
.gal-b-more small { font: 600 11px/1 "Instrument Sans", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
.gal-b-strip { display: none; }
@media (max-width: 900px) {
  .gal-b { display: block; aspect-ratio: auto; }
  .gal-b-tile { display: none; }
  .gal-b-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 8px; }
  .gal-b-strip::-webkit-scrollbar { display: none; }
  .gal-b-strip button { position: relative; flex: 0 0 86vw; aspect-ratio: 4 / 3; border: 0; padding: 0; border-radius: 4px; overflow: hidden; background: #ddd9d0; scroll-snap-align: center; }
  .gal-b-strip img { object-fit: cover; }
  .gal-b-strip span { position: absolute; left: 14px; bottom: 12px; color: #fff; font: 400 20px/1 "Fraunces", Georgia, serif; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
}

/* --------------------------------------------------------------- viewer */
.lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: var(--forest-3); color: #fff; }
.lb::backdrop { background: rgba(10, 13, 12, 0.92); }
.lb-stage { position: absolute; inset: 72px 80px 84px; margin: 0; }
.lb-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lb-stage figcaption { position: absolute; left: 0; right: 0; bottom: -52px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font: 500 12px/1 "Instrument Sans", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.lb-stage figcaption b { font: 400 18px/1 "Fraunces", Georgia, serif; letter-spacing: 0; text-transform: none; color: #fff; }
.lb-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; }
.lb-close:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.04); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2; transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.lb-arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
@media (max-width: 900px) {
  .lb-stage { inset: 64px 12px 96px; }
  .lb-arrow { top: auto; bottom: 22px; transform: none; }
  .lb-stage figcaption { bottom: -44px; left: 84px; right: 84px; flex-direction: column; gap: 6px; }
}

/* -------------------------------------------------------- listing sheet */
/* On paper, ruled off from the price sheet above it; the model story below is the cream section. */
.listing-sheet { border-top: 1px solid var(--line); }
.listing-para { max-width: 72ch; margin: 0 0 18px; color: var(--ink-2); }
.listing-grid { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: clamp(28px, 4vw, 48px); }
.listing-grid-single { grid-template-columns: 1fr; }
.listing-grid-ledger { grid-template-columns: 1fr; }
.listing-grid-ledger .listing-ledger { columns: 2; column-gap: clamp(32px, 5vw, 72px); }
.listing-grid-ledger .listing-ledger > div { break-inside: avoid; }
.listing-grid-ledger .listing-ledger-head { column-span: all; }
.listing-grid-stack { grid-template-columns: 1fr; }
.listing-grid-stack .listing-ledger { columns: 2; column-gap: clamp(32px, 5vw, 72px); }
.listing-grid-stack .listing-ledger > div { break-inside: avoid; }
.listing-grid-stack .listing-ledger-head { column-span: all; }
.listing-grid-stack .listing-groups { margin-top: clamp(28px, 4vw, 44px); }
.listing-grid-stack .listing-group-wide ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.listing-ledger { margin: 0; border-top: 1px solid var(--ink); }
.listing-ledger-head { display: block; padding: 14px 0 6px; font: 600 10px/1 "Instrument Sans", system-ui, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); }
.listing-ledger div { display: grid; grid-template-columns: 136px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.listing-ledger dt { font: 600 11px/1.5 "Instrument Sans", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.listing-ledger dd { margin: 0; font: 400 16.5px/1.45 "Fraunces", Georgia, serif; color: var(--ink); }
.listing-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); position: relative; }
.listing-groups[data-cols="1"] { grid-template-columns: 1fr; }
.listing-groups[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.listing-group h3 { font: 400 22px/1.2 "Fraunces", Georgia, serif; margin: 10px 0 14px; }
.listing-group-num { font: 400 13px/1 "Fraunces", Georgia, serif; color: var(--gold-deep); letter-spacing: 0.1em; }
.listing-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.listing-group-wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px clamp(20px, 3vw, 40px); }
.listing-grid-single .listing-group-wide ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.listing-group li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font: 400 14.5px/1.5 "Instrument Sans", system-ui, sans-serif; color: var(--ink-2); }
.listing-group li strong { font-weight: 600; color: var(--ink); }
.listing-group li i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--gold-light); color: var(--ink); margin-top: 1px; }
.listing-groups:not(.is-open) .listing-group li[data-extra] { display: none; }
.listing-more { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0 0 6px; cursor: pointer; font: 600 11px/1 "Instrument Sans", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--gold-deep); }
.listing-more svg { transform: rotate(90deg); transition: transform 0.3s var(--ease); }
.listing-groups.is-open .listing-more svg { transform: rotate(-90deg); }
.listing-foot { margin: clamp(24px, 3vw, 36px) 0 0; font: 400 13px/1.5 "Instrument Sans", system-ui, sans-serif; color: var(--muted); }
@media (max-width: 900px) {
  .listing-grid { grid-template-columns: 1fr; }
  .listing-groups { grid-template-columns: 1fr; }
  .listing-groups[data-cols="2"], .listing-group-wide ul, .listing-grid-single .listing-group-wide ul { grid-template-columns: 1fr; }
  .listing-grid-ledger .listing-ledger, .listing-grid-stack .listing-ledger { columns: 1; }
  .listing-grid-stack .listing-group-wide ul { grid-template-columns: 1fr; }
  .listing-ledger div { grid-template-columns: 100px 1fr; }
  .listing-more { min-height: 44px; padding: 10px 0; } /* a real tap target on phones */
}

/* lux-child */
/*
Theme Name: LUX Golf Carts
Template: hello-elementor
Description: Child theme for the LUX Golf Carts site. Ported from the approved luxgolfcarts redesign; every section is an editable Elementor widget.
Version: 1.0.0
Author: Local Howl
Text Domain: lux-child
*/

/* lux-page-a11y */
/* ============================================================================
   ACCESSIBILITY AND FORM BEHAVIOUR (QA round 2, 12 Nov 2026)
   Loaded on every page with the other group files (inc/perf.php bundles it
   after main.css), so equal-weight rules here win over main.css.
   ========================================================================= */

/* --- Lead forms: a focus ring keyboard users can see ------------------------
   main.css drew the focused field with a pale gold border and glow (#d6b676,
   about 1.9:1 on the white field) and switched the outline off, and that rule
   outweighed the site-wide dark ring. The fields and the dealership chips now
   take the same dark ring with the gold halo as every other control. */
.lead-form input:focus-visible,
.lead-form select:focus-visible,
.lead-form textarea:focus-visible {
  outline: 2px solid #1a1d1c;
  outline-offset: 3px;
  border-color: #1a1d1c;
  box-shadow: 0 0 0 5px var(--gold-light, #ecd7a9);
}
.form-chip input:focus-visible + span {
  outline: 2px solid #1a1d1c;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--gold-light, #ecd7a9);
}

/* --- Test-ride dialog ---------------------------------------------------------
   The consent line was #858985 on the dialog's paper (3.4:1); this is the grey
   the lead forms' small print already uses (about 6:1). */
.ride-dialog small {
  color: #5c605c;
}
.ride-dialog .form-legend {
  margin: 0;
}

/* --- Thank-you headings take focus (forms.js); no ring for that programmatic
   focus, which only marks where the reader is. */
.form-success h2:focus,
.form-success h2:focus-visible {
  outline: none;
  box-shadow: none;
}

/* --- One skip link -------------------------------------------------------------
   The Ally plugin adds a second "Skip to content" link, in its own navigation
   landmark, beside the theme's "Skip to main content". The theme's stays. */
nav[aria-label="Skip to content navigation"] {
  display: none !important;
}

/* --- Map gates (locations.js) ---------------------------------------------------
   The gate stays and the map is drawn on top of it once Google has loaded it,
   so a slow, blocked or unpainted map never leaves an empty block. */
.map-gate {
  position: relative;
}
.map-gate > iframe.map-gate-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.map-gate.is-map-shown > iframe.map-gate-frame {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s ease, visibility 0s;
}
.location-map-section .map-gate > iframe.map-gate-frame {
  filter: saturate(0.82) contrast(0.96);
}
.contact-showroom-map .map-gate {
  min-height: 420px;
}
@media (max-width: 900px) {
  .contact-showroom-map .map-gate {
    min-height: 320px;
  }
}
.map-gate .map-gate-open {
  margin-top: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .map-gate > iframe.map-gate-frame,
  .map-gate.is-map-shown > iframe.map-gate-frame {
    transition: none;
  }
}

/* --- 404 game: one stop in the Tab order (notfound.js) ------------------------- */
.nfgame:focus {
  outline: none;
}
.nfgame:focus-visible {
  outline: 2px solid #1a1d1c;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--gold-light, #ecd7a9);
}

/* --- Footer legal row: four links now ("Your privacy choices"), so it wraps on
   phones instead of running off the screen. */
.footer-bottom .footer-legal {
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 0;
}

/* lux-page-art */
/*
 * The line drawings and their Elementor "Drawing" controls (widgets/_art-helpers.php).
 *
 * Two jobs, both scoped to the drawing's wrapper:
 *
 * 1. `.art-static` parks a drawing in its finished state: keyframes off,
 *    transitions off, draw-on strokes fully drawn (dashoffset 0). Each block
 *    reproduces the end frame of the keyframes in main.css exactly.
 * 2. Strokes main.css painted with fixed rgba() values move onto
 *    currentColor plus stroke-opacity, with the same colour set as the
 *    wrapper's default `color`, so the look is unchanged until the wrapper
 *    carries an inline `color` (the Drawing color control) or the Style tab's
 *    Icon color sets `color` on the svg.
 *
 * Loaded after main.css: functions.php enqueues every file in assets/css/pages/
 * with lux-main as a dependency, so equal-specificity rules here win.
 */

/* ----------------------------------------------------------------------------
   CART ANATOMY (lux-cart-anatomy): .anatomy-stage wraps the schematic.
   main.css strokes rgba(233,235,231,.3) (frame, parts) and .16 (ground):
   #e9ebe7 at those opacities. The active part and the ring stay on the gold
   tokens, so the Section palette reaches them.
   ------------------------------------------------------------------------- */
.anatomy-stage {
  color: #e9ebe7;
}
.anat-ground,
.anat-frame line,
.anat-frame circle,
.anat-part line,
.anat-part path,
.anat-part circle,
.anat-part rect {
  stroke: currentColor;
  stroke-opacity: 0.3;
  transition:
    stroke 0.4s var(--ease),
    stroke-width 0.4s var(--ease),
    stroke-opacity 0.4s var(--ease);
}
.anat-ground {
  stroke-opacity: 0.16;
}
.anatomy-svg[data-active="color"] [data-part="color"] line,
.anatomy-svg[data-active="color"] [data-part="color"] path,
.anatomy-svg[data-active="seating"] [data-part="seating"] line,
.anatomy-svg[data-active="windshield"] [data-part="windshield"] line,
.anatomy-svg[data-active="belts"] [data-part="belts"] line,
.anatomy-svg[data-active="lamps"] [data-part="lamps"] circle,
.anatomy-svg[data-active="signals"] [data-part="signals"] circle,
.anatomy-svg[data-active="mirrors"] [data-part="mirrors"] line,
.anatomy-svg[data-active="vin"] [data-part="vin"] rect {
  stroke-opacity: 1;
}
/* rgba(214,182,118,.62) in main.css is --gold (#d6b676) at .62. */
.anat-ring {
  stroke: var(--gold);
  stroke-opacity: 0.62;
}
/* Static: anat-ring-in ends at opacity 1, scale(1); no highlight fades. */
.anatomy-stage.art-static .anat-ring {
  animation: none;
}
.anatomy-stage.art-static .anat-ground,
.anatomy-stage.art-static .anat-frame line,
.anatomy-stage.art-static .anat-frame circle,
.anatomy-stage.art-static .anat-part line,
.anatomy-stage.art-static .anat-part path,
.anatomy-stage.art-static .anat-part circle,
.anatomy-stage.art-static .anat-part rect {
  transition: none;
}

/* ----------------------------------------------------------------------------
   LSV ANATOMY (lux-lsv-anatomy): figure.lsv-anatomy-stage wraps the drawing.
   Its strokes already sit on currentColor. Static: lsv-halo-spin ends where it
   starts (a full turn), so no transform is the finished frame.
   ------------------------------------------------------------------------- */
.lsv-anatomy-stage.art-static .lsv-anatomy-halo {
  animation: none;
  transition: none;
}
.lsv-anatomy-stage.art-static .lsv-anatomy-part line,
.lsv-anatomy-stage.art-static .lsv-anatomy-part rect,
.lsv-anatomy-stage.art-static .lsv-anatomy-part circle,
.lsv-anatomy-stage.art-static .lsv-anatomy-part path,
.lsv-anatomy-stage.art-static .lsv-anatomy-tag,
.lsv-anatomy-stage.art-static .lsv-anatomy-beam {
  transition: none;
}

/* ----------------------------------------------------------------------------
   LOCATION CART (lux-loc-depth through lux_loc_cart_line_art()): .cartart is
   the wrapper. Strokes are currentColor already. Static: cartart-draw ends at
   stroke-dashoffset 0, cartart-drive at translateX(0), cartart-spin at
   rotate(0), so the drawing simply sits fully drawn and parked. The selectors
   match main.css's `.cartart.is-in …` rules in specificity so they win here.
   ------------------------------------------------------------------------- */
.cartart.art-static path {
  stroke-dashoffset: 0;
  animation: none;
}
.cartart.art-static .cartart-ground {
  animation: none;
}
.cartart.art-static svg,
.cartart.art-static .cartart-wheel {
  animation: none;
}

/* ----------------------------------------------------------------------------
   LIGHT LAB (lux-svc-light-lab): figure.ll-stage wraps the drawing. Strokes
   are currentColor already; the kits still switch on and off, they just no
   longer fade.
   ------------------------------------------------------------------------- */
.ll-stage.art-static .ll-glow,
.ll-stage.art-static .ll-strip,
.ll-stage.art-static .ll-ring {
  transition: none;
}

/* ----------------------------------------------------------------------------
   PARTS EXPLORER (lux-svc-parts-explorer): the panel .parts-detail carries the
   class (services.js re-creates the panel on every choice and keeps its
   attributes); the glyph span carries the colour. Static: parts-in ends at
   opacity 1 with no transform.
   ------------------------------------------------------------------------- */
.parts-detail.art-static {
  animation: none;
}

/* ----------------------------------------------------------------------------
   SPEED BAND (lux-guide-speed-band): .speed-stage wraps the scale. main.css
   strokes rgba(255,255,255,.3) (axis, ticks), .42 (road) and #fff (marker):
   white at those opacities. Every text inside the stage sets its own colour.
   The LSV window and the marker's "inside" state stay on the gold tokens.
   ------------------------------------------------------------------------- */
.speed-stage {
  color: #fff;
}
.speed-axis,
.speed-tick line {
  stroke: currentColor;
  stroke-opacity: 0.3;
}
.speed-road line {
  stroke: currentColor;
  stroke-opacity: 0.42;
}
.speed-marker line {
  stroke: currentColor;
}
.speed-marker circle {
  fill: currentColor;
}
.speed-stage.art-static .speed-marker {
  transition: none;
}

/* lux-page-banner-slider */
/* ============================================================================
   LUX Hero Slider (widgets/lux-banner-slider.php): the home page hero.
   Full-bleed photo slides behind a dark gradient with live text, or finished
   banner images shown whole; numbered tabs with progress along the bottom.
   ========================================================================= */

.lux-slider {
  --ls-ink: #0a0d0c;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: var(--ls-ink);
  height: min(880px, 100svh);
  min-height: 620px;
}
/* On desktop the store bar and header float transparent over the top of the
   page; the hero rises behind them, as the photo hero did. */
@media (min-width: 801px) {
  .lux-slider {
    margin-top: -118px;
  }
}

.ls-h1 {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ls-stage {
  position: absolute;
  inset: 0;
}

.ls-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--ease, ease), visibility 0s linear 1s;
}
.ls-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 1s var(--ease, ease), visibility 0s;
}

/* --- Designed slides ----------------------------------------------------- */

.ls-bg,
.ls-bg picture {
  position: absolute;
  inset: 0;
  display: block;
}
.lux-slider .ls-bg-img,
.elementor .lux-slider .ls-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--ls-focus, 65% 50%);
  transform-origin: 70% 50%;
}
.ls-slide.is-active .ls-bg-img {
  animation: ls-drift calc(var(--ls-interval, 7s) + 3s) var(--ease-soft, ease-out) both;
}
@keyframes ls-drift {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

/* Three layers: the text side, the tab band at the foot, the bars at the top. */
.ls-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 13, 12, 0.94) 0%, rgba(10, 13, 12, 0.82) 30%, rgba(10, 13, 12, 0.38) 58%, rgba(10, 13, 12, 0.08) 82%),
    linear-gradient(0deg, rgba(10, 13, 12, 0.9) 0%, rgba(10, 13, 12, 0) 30%),
    linear-gradient(180deg, rgba(10, 13, 12, 0.7) 0%, rgba(10, 13, 12, 0) 26%);
}

.ls-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: 118px;
  padding-bottom: 120px;
}
.ls-copy {
  max-width: 660px;
}

.ls-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  color: var(--gold-light, #ecd7a9);
  font-family: var(--sans, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.3;
  text-transform: uppercase;
}
.ls-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold, #d6b676), rgba(214, 182, 118, 0.15));
}

.lux-slider .ls-title {
  margin: 0 0 22px;
  color: #fff;
  font-family: var(--serif, serif);
  font-size: clamp(46px, 5.4vw, 86px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lux-slider .ls-title em {
  /* Room for the italic overhang, which background-clip would cut off. */
  padding-right: 0.12em;
  margin-right: -0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-style: italic;
  color: transparent;
  background: var(--gold-grad, linear-gradient(135deg, #f0dcb4, #d6b676 42%, #b08f52));
  -webkit-background-clip: text;
  background-clip: text;
}

.lux-slider .ls-text {
  max-width: 540px;
  margin: 0 0 34px;
  color: #e1e3df;
  font-family: var(--sans, sans-serif);
  font-size: 18px;
  line-height: 1.6;
}

.ls-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.ls-actions .button {
  width: auto;
}

.lux-slider .ls-fine {
  max-width: 520px;
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--sans, sans-serif);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

/* The copy steps in when its slide arrives. */
.ls-copy > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease, ease), transform 0.8s var(--ease, ease);
}
.ls-slide.is-active .ls-copy > * {
  opacity: 1;
  transform: none;
}
.ls-slide.is-active .ls-copy > :nth-child(1) { transition-delay: 0.15s; }
.ls-slide.is-active .ls-copy > :nth-child(2) { transition-delay: 0.25s; }
.ls-slide.is-active .ls-copy > :nth-child(3) { transition-delay: 0.35s; }
.ls-slide.is-active .ls-copy > :nth-child(4) { transition-delay: 0.45s; }
.ls-slide.is-active .ls-copy > :nth-child(5) { transition-delay: 0.55s; }

/* The offer seal: a gold medallion with a slow ring of text. */
.ls-seal {
  position: absolute;
  right: 4%;
  top: 50%;
  width: clamp(150px, 13vw, 200px);
  aspect-ratio: 1;
  margin-top: -20px;
  color: var(--gold, #d6b676);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 1s var(--ease, ease) 0.5s;
}
.ls-slide.is-active .ls-seal {
  opacity: 1;
}
.ls-seal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(24, 28, 26, 0.92), rgba(10, 13, 12, 0.96));
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(214, 182, 118, 0.25);
}
.ls-seal-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ls-seal-spin {
  transform-origin: 80px 80px;
  animation: ls-spin 28s linear infinite;
}
@keyframes ls-spin {
  to { transform: rotate(360deg); }
}
.ls-seal-core {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ls-seal-core b {
  font-family: var(--serif, serif);
  font-size: clamp(30px, 2.7vw, 42px);
  font-weight: 500;
  color: transparent;
  background: var(--gold-grad, linear-gradient(135deg, #f0dcb4, #d6b676 42%, #b08f52));
  -webkit-background-clip: text;
  background-clip: text;
}
.ls-seal-core span {
  margin-top: 6px;
  font-family: var(--sans, sans-serif);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.3em;
  color: #fff;
}

/* --- Banner slides: the finished image, whole, on the dark ground ---------- */

.ls-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 118px 0 96px;
}
.ls-banner-link,
.ls-banner picture {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.lux-slider .ls-banner-img,
.elementor .lux-slider .ls-banner-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(min(880px, 100svh) - 214px);
  object-fit: contain;
}

/* --- Tabs and controls ---------------------------------------------------- */

.ls-nav {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: 28px;
}
.ls-nav-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.ls-tabs {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 18px;
  flex: 1;
  max-width: 820px;
}
.ls-tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 0 4px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--sans, sans-serif);
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease;
}
.ls-tab:hover,
.ls-tab[aria-current="true"] {
  color: #fff;
}
.ls-tab:focus-visible {
  outline: 2px solid var(--gold, #d6b676);
  outline-offset: 4px;
}
.ls-tab-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.ls-tab-bar i {
  position: absolute;
  inset: 0;
  background: var(--gold, #d6b676);
  transform: scaleX(0);
  transform-origin: left center;
}
.ls-tab[aria-current="true"] .ls-tab-bar i {
  transform: scaleX(1);
}
.lux-slider.is-playing .ls-tab[aria-current="true"] .ls-tab-bar i {
  animation: ls-fill var(--ls-interval, 7s) linear both;
}
@keyframes ls-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.ls-tab-num {
  color: var(--gold, #d6b676);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.14em;
}
.ls-tab-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ls-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ls-count {
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--sans, sans-serif);
  font-size: 12px;
  letter-spacing: 0.14em;
}
.ls-count b {
  color: #fff;
  font-weight: 700;
}
.ls-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(10, 13, 12, 0.35);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.ls-btn:hover,
.ls-btn:focus-visible {
  border-color: var(--gold, #d6b676);
  color: var(--gold-light, #ecd7a9);
}
.ls-btn:focus-visible {
  outline: 2px solid var(--gold, #d6b676);
  outline-offset: 2px;
}
.ls-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ls-pause .ls-i-play,
.ls-pause[aria-pressed="true"] .ls-i-pause {
  display: none;
}
.ls-pause[aria-pressed="true"] .ls-i-play {
  display: block;
  fill: currentColor;
  stroke: none;
}

/* --- Phones: the header is solid here; text sits at the foot of the photo -- */

@media (max-width: 800px) {
  .lux-slider {
    height: auto;
    min-height: min(720px, calc(100svh - 70px));
  }
  .lux-slider .ls-bg-img,
  .elementor .lux-slider .ls-bg-img {
    object-position: var(--ls-focus-m, var(--ls-focus, 65% 50%));
  }
  .ls-shade {
    background:
      linear-gradient(0deg, rgba(10, 13, 12, 0.97) 0%, rgba(10, 13, 12, 0.86) 42%, rgba(10, 13, 12, 0.25) 72%, rgba(10, 13, 12, 0.1) 100%);
  }
  .ls-inner {
    align-items: flex-end;
    padding-top: 40px;
    padding-bottom: 104px;
  }
  .lux-slider .ls-title {
    font-size: clamp(38px, 10.5vw, 52px);
    margin-bottom: 16px;
  }
  .lux-slider .ls-text {
    font-size: 16px;
    margin-bottom: 24px;
  }
  .ls-actions .button {
    flex: 1 1 100%;
  }
  .lux-slider .ls-fine {
    margin-top: 18px;
    font-size: 11px;
  }
  .ls-seal {
    top: 22px;
    right: 18px;
    width: 104px;
    margin-top: 0;
    transform: none;
  }
  .ls-seal-core b {
    font-size: 24px;
  }
  .ls-seal-core span {
    font-size: 9px;
  }
  .ls-nav {
    padding-bottom: 20px;
  }
  .ls-nav-inner {
    gap: 14px;
  }
  .ls-tabs {
    gap: 8px;
  }
  .ls-tab {
    padding-top: 12px;
  }
  .ls-tab-label,
  .ls-count {
    display: none;
  }
  .ls-btn {
    width: 40px;
    height: 40px;
  }
  .ls-banner {
    padding: 24px 0 88px;
  }
  .lux-slider .ls-banner-img,
  .elementor .lux-slider .ls-banner-img {
    max-height: none;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-slide,
  .ls-slide.is-active,
  .ls-copy > *,
  .ls-seal {
    transition: none;
  }
  .ls-slide.is-active .ls-bg-img,
  .ls-seal-spin,
  .lux-slider.is-playing .ls-tab[aria-current="true"] .ls-tab-bar i {
    animation: none;
  }
}

/* The editor shows the first slide flat, so its controls are easy to reach. */
body.elementor-editor-active .lux-slider {
  margin-top: 0;
}

/* --- Sale event slides: the Black Friday look of the store's own banners,
   in live text. Black and red sale tag, offer panels, countdown, a red glow
   along the foot. ------------------------------------------------------------ */

.ls-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.ls-event {
  --le-red: #e3161f;
  --le-red-hi: #ff5148;
  --le-red-lo: #8e060d;
  --le-silver: linear-gradient(180deg, #ffffff 0%, #eef0f2 38%, #9aa1a8 52%, #e9ecef 70%, #ffffff 100%);
  --le-gold: linear-gradient(180deg, #fff1b8 0%, #ffd04a 40%, #d79a12 62%, #ffe28a 100%);
  --le-redtext: linear-gradient(180deg, #ff6a5f 0%, #f0222b 48%, #b10912 78%, #e3161f 100%);
}
.ls-event .ls-shade {
  background:
    linear-gradient(90deg, rgba(7, 7, 8, 0.97) 0%, rgba(7, 7, 8, 0.9) 30%, rgba(7, 7, 8, 0.45) 56%, rgba(7, 7, 8, 0.06) 80%),
    radial-gradient(70% 55% at 8% 30%, rgba(227, 22, 31, 0.22) 0%, rgba(227, 22, 31, 0) 70%),
    linear-gradient(0deg, rgba(7, 7, 8, 0.92) 0%, rgba(7, 7, 8, 0) 32%),
    linear-gradient(180deg, rgba(7, 7, 8, 0.72) 0%, rgba(7, 7, 8, 0) 26%);
}

/* The red sweep along the foot of the store's banners. */
.le-swoosh {
  position: absolute;
  z-index: 1;
  left: -12%;
  right: -12%;
  bottom: -150px;
  height: 260px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-top: 2px solid rgba(255, 81, 72, 0.95);
  background: radial-gradient(60% 90% at 70% 0%, rgba(227, 22, 31, 0.5), rgba(227, 22, 31, 0) 70%);
  box-shadow: 0 -12px 50px rgba(227, 22, 31, 0.45);
  transform: rotate(-2deg);
  pointer-events: none;
}

/* A set width (not shrink-to-fit) so the offer panels sit side by side. */
.lux-slider .le-copy {
  width: min(820px, 100%);
  max-width: none;
}
.le-kicker {
  margin: 0 0 10px;
  color: #ffd04a;
  font-family: var(--sans, sans-serif);
  font-size: clamp(15px, 1.25vw, 20px);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The sale tag: red rim, black face, a punched hole at the point. The h2
   carries the shadow (a clip-path would cut it off) and takes part in the
   slide's step-in, so the tilt sits on the rim inside it. */
.lux-slider .le-tag {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 0 14px -6px;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.55));
  font-size: inherit;
  line-height: 1;
}
.le-tag-rim {
  display: block;
  padding: 4px;
  background: linear-gradient(160deg, var(--le-red-hi), var(--le-red) 45%, var(--le-red-lo));
  clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 50%, calc(100% - 56px) 100%, 0 100%);
  transform: rotate(-3deg);
  transform-origin: left center;
}
.le-tag-in {
  position: relative;
  display: block;
  padding: 16px 92px 20px 30px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 50%),
    linear-gradient(160deg, #202024 0%, #0c0c0e 70%);
  clip-path: polygon(0 0, calc(100% - 54px) 0, 100% 50%, calc(100% - 54px) 100%, 0 100%);
}
.le-tag-in::after {
  content: "";
  position: absolute;
  right: 30px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: #050505;
  box-shadow: inset 0 0 0 3px var(--le-red), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.le-tag-1,
.le-tag-2 {
  display: block;
  /* Room for the slant, which background-clip would cut off. */
  padding-right: 0.08em;
  font-family: var(--sans, sans-serif);
  font-style: italic;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.le-tag-1 {
  font-size: clamp(56px, 5.6vw, 92px);
  background-image: var(--le-silver);
}
.le-tag-2 {
  font-size: clamp(66px, 6.6vw, 108px);
  background-image: var(--le-redtext);
}

/* Longer words ("Evolutions") step the tag type down so it keeps its shape. */
.le-tag-long .le-tag-1 { font-size: clamp(44px, 4.2vw, 68px); }
.le-tag-long .le-tag-2 { font-size: clamp(50px, 4.9vw, 80px); }

.le-sub {
  display: block;
  width: fit-content;
  margin: 0 0 22px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--le-red);
  color: #fff;
  font-family: var(--sans, sans-serif);
  font-size: clamp(22px, 2.1vw, 34px);
  font-style: italic;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}

/* Offer panels: red, slanted, with the big words in silver (then gold). */
.le-offers {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.le-offer {
  padding: 0;
  margin: 0;
  transform: skewX(-8deg);
  border: 1px solid rgba(255, 106, 95, 0.75);
  border-radius: 8px;
  background: linear-gradient(105deg, #c70f19 0%, #7d050b 62%, #4a0307 100%);
  box-shadow: 0 22px 40px -20px rgba(227, 22, 31, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -10px 24px rgba(0, 0, 0, 0.25);
}
.le-offer-in {
  display: grid;
  gap: 4px;
  padding: 12px 26px 14px 22px;
  transform: skewX(8deg);
}
.le-offer b {
  padding-right: 0.08em;
  font-family: var(--sans, sans-serif);
  font-size: clamp(32px, 3.1vw, 50px);
  font-style: italic;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: transparent;
  background-image: var(--le-silver);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
}
.le-offer:nth-child(2) b {
  background-image: var(--le-gold);
}
.le-offer span {
  color: #fff;
  font-family: var(--sans, sans-serif);
  font-size: clamp(12px, 0.95vw, 15px);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.le-strip {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--sans, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.le-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
}
.le-count {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--sans, sans-serif);
}
.le-count-label {
  max-width: 6.5em;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.le-count-units {
  display: flex;
  gap: 6px;
}
.le-unit {
  display: grid;
  justify-items: center;
  min-width: 52px;
  padding: 7px 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.le-unit b {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.le-unit i {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lux-slider .le-btn {
  color: #fff;
  border-color: var(--le-red-hi);
  background: linear-gradient(180deg, var(--le-red-hi) 0%, var(--le-red) 55%, #b80d16 100%);
  box-shadow: 0 16px 30px -14px rgba(227, 22, 31, 0.9);
}
.lux-slider .le-btn:hover {
  color: #fff;
  background: linear-gradient(180deg, #ff6a5f 0%, #f0222b 60%, #c70f19 100%);
}
.ls-event .ls-fine {
  margin-top: 20px;
}
.ls-event .ls-tab-bar i,
.lux-slider:has(.ls-event.is-active) .ls-tab[aria-current="true"] .ls-tab-bar i {
  background: var(--le-red-hi, #ff5148);
}
.lux-slider:has(.ls-event.is-active) .ls-tab-num {
  color: #ff6a5f;
}

.ls-slide.is-active .ls-copy > :nth-child(6) { transition-delay: 0.65s; }
.ls-slide.is-active .ls-copy > :nth-child(7) { transition-delay: 0.75s; }

@media (min-width: 801px) and (max-height: 860px) {
  .le-tag-1 { font-size: clamp(48px, 4.8vw, 76px); }
  .le-tag-2 { font-size: clamp(56px, 5.6vw, 90px); }
  .le-offer b { font-size: clamp(28px, 2.6vw, 42px); }
  .le-sub { margin-bottom: 16px; }
}

@media (max-width: 800px) {
  .ls-event .ls-shade {
    background:
      linear-gradient(0deg, rgba(7, 7, 8, 0.98) 0%, rgba(7, 7, 8, 0.9) 48%, rgba(7, 7, 8, 0.3) 74%, rgba(7, 7, 8, 0.12) 100%),
      radial-gradient(90% 40% at 0% 55%, rgba(227, 22, 31, 0.25), rgba(227, 22, 31, 0) 70%);
  }
  .lux-slider:has(.ls-event) {
    min-height: min(860px, calc(100svh + 120px));
  }
  .le-swoosh {
    bottom: -190px;
  }
  .lux-slider .le-tag {
    margin-bottom: 10px;
  }
  .le-tag-in {
    padding: 10px 62px 13px 18px;
    clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 50%, calc(100% - 38px) 100%, 0 100%);
  }
  .le-tag-rim {
    clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 0 100%);
  }
  .le-tag-in::after {
    right: 20px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
  }
  .le-tag-1 { font-size: clamp(40px, 11.5vw, 54px); }
  .le-tag-2 { font-size: clamp(48px, 13.5vw, 64px); }
  .le-tag-long .le-tag-1 { font-size: clamp(30px, 8.4vw, 40px); }
  .le-tag-long .le-tag-2 { font-size: clamp(34px, 9.6vw, 46px); }
  .le-sub {
    font-size: clamp(19px, 5.4vw, 24px);
    margin-bottom: 16px;
  }
  .le-offers {
    gap: 10px;
    margin-bottom: 14px;
  }
  .le-offer {
    flex: 1 1 100%;
  }
  .le-offer-in {
    padding: 10px 18px 11px;
  }
  .le-offer b {
    font-size: clamp(26px, 7.6vw, 34px);
  }
  .le-offer span {
    font-size: 12px;
  }
  .le-strip {
    font-size: 10px;
    letter-spacing: 0.16em;
    margin-bottom: 14px;
  }
  .le-row {
    gap: 14px;
  }
  .le-row .ls-actions {
    flex: 1 1 100%;
  }
  .le-unit {
    min-width: 46px;
  }
  .le-unit b {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .le-offer,
  .le-offer-in {
    transition: none;
  }
}

/* lux-page-hero-photo */
/*
 * Home hero, photo mode (widgets/lux-hero.php, Background set to Photo).
 *
 * The section keeps every class the video hero has (.hero, .hero-shade,
 * .hero-inner, .hero-chip, .hero-scroll), so main.css places the copy
 * exactly where it sits over the video. This file adds the picture and a
 * grade strong enough for a bright showroom photo. The widget writes three
 * custom properties on section.hero:
 *   --hero-shade    0 to 0.9, the Darken the photo slider (0.55 default)
 *   --hero-focus    object-position above 800px (center 45% default)
 *   --hero-focus-m  object-position up to 800px (center 50% default)
 *
 * Selectors carry three classes on purpose: Elementor's
 * .elementor img { height: auto } is (0,1,1), and main.css's phone
 * .hero-shade rule (the Home hero on phones block) is !important.
 * The photo does not reuse .hero-poster: main.css pins that class's
 * object-position with !important on phones, which would ignore the
 * focus controls.
 */

.hero.hero-photo-mode .hero-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  margin: 0;
  overflow: hidden;
}
.hero.hero-photo-mode .hero-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--hero-focus, center 45%);
}

/* Above 800px the hero rises 118px behind the gold bar and the transparent
   nav. Three layers, all scaled by --hero-shade (an alpha above 1 clamps):
   a top band for the nav over the bright ceiling, the left-to-right scrim
   behind the copy (close to the video grade at the default 0.55), and a
   bottom fade so the photo meets the next section on dark. */
.hero.hero-photo-mode .hero-shade {
  background:
    linear-gradient(
      180deg,
      rgba(6, 8, 7, calc(var(--hero-shade, 0.55) * 1.2)) 0,
      rgba(6, 8, 7, calc(var(--hero-shade, 0.55) * 0.7)) 118px,
      rgba(6, 8, 7, 0) 320px
    ),
    linear-gradient(
      90deg,
      rgba(9, 12, 11, calc(var(--hero-shade, 0.55) * 1.6)) 0%,
      rgba(9, 12, 11, calc(var(--hero-shade, 0.55) * 1.15)) 40%,
      rgba(9, 12, 11, calc(var(--hero-shade, 0.55) * 0.35)) 70%,
      rgba(9, 12, 11, calc(var(--hero-shade, 0.55) * 0.55)) 100%
    ),
    linear-gradient(
      0deg,
      rgba(7, 9, 8, calc(var(--hero-shade, 0.55) * 1.4)) 0%,
      rgba(7, 9, 8, calc(var(--hero-shade, 0.55) * 0.5)) 22%,
      rgba(7, 9, 8, 0) 50%
    );
}

/* The showroom photo carries the LUX sign a little right of center. Between
   about 1150 and 1400px main.css lets the headline run to two long lines that
   cross the sign; capping it in em keeps the same three-line break it has at
   1440 and wider (Luxury golf carts / for sale in Sarasota / and Venice.). */
@media (min-width: 1051px) {
  .hero.hero-photo-mode .hero-inner h1 { width: min(6.7em, 68%); }
}

/* Phones and small tablets: main.css turns the hero into a media band
   (--band tall, set on .hero) with the copy below on #0b0e0d. The photo
   takes that band exactly as the poster and the video do, and the grade
   goes solid before the headline, which starts at band minus 36px. The
   header is solid at this width, so the top layer is light. */
@media (max-width: 800px) {
  .hero.hero-photo-mode .hero-photo {
    top: 0;
    bottom: auto;
    height: var(--band);
  }
  .hero.hero-photo-mode .hero-shade {
    background: linear-gradient(
      180deg,
      rgba(11, 14, 13, calc(var(--hero-shade, 0.55) * 0.5)) 0,
      rgba(11, 14, 13, 0) 90px,
      rgba(11, 14, 13, 0) calc(var(--band) - 150px),
      rgba(11, 14, 13, calc(0.3 + var(--hero-shade, 0.55) * 0.6)) calc(var(--band) - 64px),
      #0b0e0d calc(var(--band) - 20px),
      #0b0e0d 100%
    ) !important;
  }
}

/* The phone photo's own focus, at the width its <source> serves. */
@media (max-width: 800px) {
  .hero.hero-photo-mode .hero-photo-img {
    object-position: var(--hero-focus-m, center 50%);
  }
}

/* lux-page-loc-showrooms */
/* LUX Showrooms Hero (widgets/lux-loc-showrooms-hero.php): /locations opener,
   hero concept C. Dark band; three dealership panels, one open at a time.
   Phones: stacked accordion. 900px and up: a row, the open panel widens. */

.shr {
	--shr-ink: #f4efe3;
	--shr-ink-2: rgba(244, 239, 227, .78);
	--shr-ink-3: rgba(244, 239, 227, .58);
	--shr-line: rgba(244, 239, 227, .16);
	--shr-ground: #0b0f0d;
	--shr-ok: #8fd19e;
	position: relative;
	background: var(--forest, #0f1c17);
	color: var(--shr-ink);
	padding-block: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 36px);
	overflow: hidden;
}
.shr::before { /* the gold aura the other inner heroes carry */
	content: ""; position: absolute; inset: -30% -10% auto auto; width: 60%; aspect-ratio: 1;
	background: radial-gradient(closest-side, rgba(201, 168, 106, .16), transparent 70%); pointer-events: none;
}
.shr .breadcrumbs { color: var(--shr-ink-3); font-size: 13px; margin-bottom: 18px; }
.shr .breadcrumbs a { color: var(--shr-ink-2); }
.shr .breadcrumbs a:hover { color: var(--gold-light, #e3c98f); }

.shr-top { position: relative; display: grid; gap: 14px; margin-bottom: clamp(18px, 2.4vw, 30px); }
.shr-top h1 {
	font-family: var(--serif); font-weight: 350; letter-spacing: -.02em; line-height: 1.02;
	font-size: clamp(40px, 6.2vw, 84px); margin: 12px 0 0; color: var(--shr-ink); text-wrap: balance;
}
.shr-top h1 em { font-style: italic; font-weight: 300; color: var(--gold-light, #e3c98f); }
.shr-lede { color: var(--shr-ink-2); font-size: 16px; line-height: 1.55; max-width: 46ch; margin: 0; }
.shr-call {
	display: inline-flex; align-items: baseline; gap: 10px; margin-top: 10px; text-decoration: none;
	font-family: var(--serif); font-size: clamp(26px, 2.6vw, 36px); color: var(--gold-light, #e3c98f);
	font-variant-numeric: tabular-nums;
}
.shr-call small { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--shr-ink-3); font-weight: 600; }
.shr-call:hover { color: var(--shr-ink); }

/* Panels: phone accordion first. */
.shr-panels { position: relative; display: flex; flex-direction: column; gap: 3px; }
.shr-panel {
	position: relative; overflow: hidden; height: 72px; border-radius: 6px; background: var(--shr-ground);
	transition: height .7s var(--ease, cubic-bezier(.2, .7, .2, 1)), flex-grow .7s var(--ease, cubic-bezier(.2, .7, .2, 1));
}
.shr-panel.is-open { height: 480px; }
.shr-panel .shr-img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.06); filter: saturate(.6) brightness(.55);
	transition: transform 1.2s var(--ease, ease), filter .7s ease;
}
.shr-panel.is-open .shr-img { transform: scale(1); filter: none; }
.shr-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 10, 9, .95) 0%, rgba(8, 10, 9, .72) 40%, rgba(8, 10, 9, .18) 74%, rgba(8, 10, 9, .35) 100%); }
.shr-panel:not(.is-open) .shr-veil { background: rgba(8, 10, 9, .6); }

.shr-tab {
	position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; background: transparent; cursor: pointer;
	display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
	padding: 20px 18px; text-align: left; color: var(--shr-ink); font: inherit;
}
.shr-panel.is-open .shr-tab { height: 72px; }
.shr-tab:focus-visible { outline: 2px solid var(--gold-light, #e3c98f); outline-offset: -4px; border-radius: 6px; }
.shr-name { font-family: var(--serif); font-size: 24px; line-height: 1.1; }
.shr-ext { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold, #c9a86a); white-space: nowrap; }
.shr-ext svg { width: 14px; height: 14px; transition: transform .5s ease; }
.shr-panel.is-open .shr-ext svg { transform: rotate(180deg); }

.shr-body {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 18px;
	opacity: 0; visibility: hidden; transform: translateY(16px);
	transition: opacity .5s ease .15s, transform .7s var(--ease, ease) .1s, visibility 0s linear .7s;
}
.shr-panel.is-open .shr-body { opacity: 1; visibility: visible; transform: none; transition-delay: .15s, .1s, 0s; }
.shr-status {
	display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 4px 10px; border-radius: 999px;
	font-size: 13px; font-weight: 600; background: rgba(0, 0, 0, .45); border: 1px solid var(--shr-line); color: var(--shr-ink);
}
.shr-status:empty, .shr-status span:empty { display: none; }
.shr-status i { width: 8px; height: 8px; border-radius: 50%; background: #a3a7a4; }
.shr-status.is-open i { background: var(--shr-ok); box-shadow: 0 0 0 4px rgba(143, 209, 158, .18); }
.shr-body h2 { display: none; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.05; margin: 0; color: var(--shr-ink); }
.shr-biz { font-size: 13px; color: var(--shr-ink-3); margin: 2px 0 8px; }
.shr-facts { display: grid; gap: 2px; font-size: 14.5px; font-style: normal; color: var(--shr-ink-2); }
.shr-facts b { color: var(--shr-ink); font-weight: 600; }
.shr-note { margin: 8px 0 0; font-size: 14px; color: var(--gold-light, #e3c98f); max-width: 46ch; }
.shr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.shr-actions .button { min-height: 44px; font-size: 14px; padding: 0 16px; }
.shr-actions .button-outline { color: var(--shr-ink); border-color: rgba(244, 239, 227, .45); background: transparent; }
.shr-actions .button-outline:hover { color: var(--forest, #0f1c17); background: var(--shr-ink); border-color: var(--shr-ink); }
.shr-actions .shr-page { display: none; }
.shr-foot { position: relative; margin: 14px auto 0; font-size: 13.5px; color: var(--shr-ink-2); }

@media (min-width: 900px) {
	.shr-top { grid-template-columns: 1.4fr 1fr; align-items: end; gap: 32px; }
	.shr-side { justify-self: end; text-align: right; }
	.shr-lede { margin-left: auto; }
	.shr-panels { flex-direction: row; height: clamp(440px, 36vw, 540px); gap: 4px; }
	.shr-panel { height: auto; flex: 1 1 0; min-width: 0; }
	.shr-panel.is-open { height: auto; flex-grow: 3.4; }
	.shr-tab { flex-direction: column; justify-content: space-between; padding: 24px 22px; }
	.shr-panel.is-open .shr-tab { height: 100%; pointer-events: none; }
	.shr-panel:not(.is-open) .shr-name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 34px; align-self: flex-start; order: 2; }
	.shr-panel:not(.is-open) .shr-ext { order: 1; }
	.shr-panel.is-open .shr-name, .shr-panel.is-open .shr-ext { opacity: 0; }
	.shr-ext svg { display: none; }
	.shr-body { padding: 28px 30px; }
	.shr-body h2 { display: block; }
	.shr-actions .shr-page { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
	.shr-panel, .shr-panel .shr-img, .shr-body, .shr-ext svg { transition: none !important; }
}
.shr-status[hidden] { display: none; }

/* lux-page-video-portrait */
/*
 * LUX Portrait Video (widgets/lux-video-portrait.php): a 9:16 walkthrough
 * film in a gold-edged frame beside a copy column.
 *
 * Dark by default. The forest ground is painted on the widget's wrapper
 * (.lux-video-portrait-wrap, the same element as .lux-section) with a single
 * class selector, and .vp-section stays transparent. So everything under
 * Style > Background and spacing applies: the Background image or gradient
 * (its {{WRAPPER}} > .lux-section rule outranks this one), the Overlay color
 * (an inset shadow over the ground) and the padding. Picking a background
 * type there adds .vp-ground-custom in render(), which lifts the default
 * layers so a classic color shows too. Choosing Paper or Cream puts
 * .lux-surface-paper or .lux-surface-cream on the widget: bridge.css then
 * paints .vp-section (with !important), the wrapper goes light too, and the
 * light flip below swaps the text tokens. Text colors come from --vp-*
 * custom properties or :where(), so the Style tab's own {{WRAPPER}} rules
 * still win.
 *
 * The frame is never taller than 78svh: its width is capped at
 * 78svh x 9/16 (--vp-cap). At 800px and below it comes first, centered,
 * never wider than the container (20px gutters from main.css).
 *
 * Square corners follow the site's SQUARE EDGES direction (--r-lg is 0);
 * only the play disc is round.
 */

/* ------------------------------------------------------------- ground */
/* One class only (0,1,0): the Style tab's {{WRAPPER}} > .lux-section
   background, overlay and padding all outrank it. */
.lux-video-portrait-wrap {
  background-color: var(--forest-3);
  background-image:
    radial-gradient(80% 110% at 88% 6%, rgba(214, 182, 118, 0.1) 0%, transparent 55%),
    radial-gradient(90% 130% at 10% 100%, #1e2724 0%, transparent 60%),
    linear-gradient(170deg, var(--forest-2) 0%, var(--forest-3) 100%);
}
/* A Style tab background is set: keep only the fallback color under it. */
.lux-video-portrait-wrap.vp-ground-custom {
  background-image: none;
}
/* Paper or Cream: light all the way to the edge, padding included. */
.lux-surface-paper .lux-video-portrait-wrap {
  background-color: var(--paper);
  background-image: none;
}
.lux-surface-cream .lux-video-portrait-wrap {
  background-color: var(--cream);
  background-image: none;
}

/* ------------------------------------------------------------- tokens */
.vp-section {
  --vp-cap: calc(78vh * 0.5625);
  --vp-w: min(400px, var(--vp-cap));
  --vp-text: #eef0ed;
  --vp-soft: #c2c7c2;
  --vp-accent: var(--gold-light);
  --vp-rule: rgba(236, 215, 169, 0.22);
  --vp-shadow: var(--lift-dark);
  position: relative;
  color: var(--vp-text);
}
@supports (height: 1svh) {
  .vp-section {
    --vp-cap: calc(78svh * 0.5625);
  }
}

/* Light flip: Paper or Cream chosen in the Style tab. */
.lux-surface-paper .vp-section,
.lux-surface-cream .vp-section {
  --vp-text: var(--ink);
  --vp-soft: var(--muted);
  --vp-accent: #6c5a38;
  --vp-rule: var(--line);
  --vp-shadow: var(--lift-3);
}

/* --------------------------------------------------------------- grid */
.vp-grid {
  display: grid;
  grid-template-columns: minmax(0, 620px) var(--vp-w);
  grid-template-areas:
    "copy frame"
    ". transcript";
  justify-content: center;
  column-gap: clamp(48px, 8vw, 128px);
  align-items: center;
}
.vp-grid[data-video="left"] {
  grid-template-columns: var(--vp-w) minmax(0, 620px);
  grid-template-areas:
    "frame copy"
    "transcript .";
}
.vp-copy {
  grid-area: copy;
  min-width: 0;
}

/* --------------------------------------------------------------- copy */
:where(.vp-copy) .eyebrow {
  color: var(--vp-accent);
}
/* Serif and tight even when the heading tag is set to p, div or h3. */
.vp-title {
  margin: 16px 0 24px;
  font-family: var(--serif);
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.02;
  text-wrap: balance;
}
.vp-line {
  display: block;
}
:where(.vp-body) p {
  max-width: 54ch;
  color: var(--vp-soft);
  font-size: 17px;
  line-height: 1.75;
}
:where(.vp-body) p:last-child {
  margin-bottom: 0;
}
.vp-actions {
  align-items: center;
  column-gap: 28px;
}

/* -------------------------------------------------------------- frame */
.vp-frame {
  grid-area: frame;
  justify-self: center;
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: var(--vp-w);
  max-width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 50% at 50% 40%, #243029 0%, transparent 70%),
    var(--forest-3);
  /* A gold hairline, then a soft cast. main.css owns this element's
     transition through [data-reveal], so none is set here. */
  box-shadow: 0 0 0 1px rgba(214, 182, 118, 0.45), var(--vp-shadow);
}
.vp-frame .vp-poster,
.vp-frame .vp-video {
  border-radius: inherit;
}
.vp-frame .vp-poster {
  object-fit: cover;
}
.vp-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 50% 52%, rgba(6, 8, 7, 0.34), transparent 70%),
    linear-gradient(
      180deg,
      rgba(8, 10, 9, 0.18) 0%,
      rgba(8, 10, 9, 0) 28%,
      rgba(8, 10, 9, 0) 52%,
      rgba(8, 10, 9, 0.66) 100%
    );
}

/* -------------------------------------------------------- play button */
/* Two classes, so an Elementor kit `button` style cannot restyle it. */
.vp-frame .vp-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 24px 16px;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vp-frame .vp-play:hover,
.vp-frame .vp-play:focus {
  color: #fff;
  background: transparent;
}
/* The ring is drawn inside the frame, which clips anything outside it. */
.vp-frame .vp-play:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 5px #1a1d1c;
  border-radius: var(--r-lg);
}
.vp-play-disc {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: clamp(64px, 22%, 88px);
  aspect-ratio: 1 / 1;
  padding-left: 5px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--gold-grad);
  box-shadow:
    0 0 0 10px rgba(214, 182, 118, 0.16),
    0 18px 40px -12px rgba(0, 0, 0, 0.6);
}
.vp-play-disc svg {
  display: block;
  width: 38%;
  height: auto;
}
.vp-play-label {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid rgba(236, 215, 169, 0.4);
  background: rgba(10, 13, 12, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.vp-play-time {
  padding-left: 10px;
  border-left: 1px solid rgba(236, 215, 169, 0.4);
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ------------------------------------------------------------ playing */
.vp-frame.is-playing .vp-shade {
  display: none;
}
.vp-video {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.vp-frame .vp-video:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: -3px;
  box-shadow: none;
}

/* --------------------------------------------------------- transcript */
.vp-transcript {
  grid-area: transcript;
  justify-self: center;
  align-self: start;
  width: var(--vp-w);
  max-width: 100%;
  margin-top: 18px;
  border-top: 1px solid var(--vp-rule);
}
.vp-transcript summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 12px 2px;
  color: var(--vp-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
.vp-transcript summary::-webkit-details-marker {
  display: none;
}
.vp-transcript summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
.vp-transcript[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}
.vp-transcript-body {
  padding: 4px 0 8px;
}
:where(.vp-transcript-body) p {
  margin: 0 0 12px;
  color: var(--vp-soft);
  font-size: 15px;
  line-height: 1.7;
}

/* -------------------------------------------------------- editor only */
.vp-placeholder {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 560px;
  margin: 24px auto;
  padding: 40px 24px;
  border: 1px dashed rgba(127, 101, 44, 0.7);
  border-radius: var(--r-md);
  color: var(--ink);
  background: var(--cream);
  text-align: center;
}
.vp-placeholder-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  padding-left: 3px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--gold-grad);
}
.vp-placeholder-mark svg {
  width: 22px;
  height: 22px;
}
.vp-placeholder b {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
}
.vp-placeholder span {
  font-size: 15px;
}
.vp-placeholder small {
  color: var(--muted);
  font-size: 13px;
}
.vp-editor-note {
  margin: 0;
  padding: 10px 16px;
  border-left: 3px solid var(--gold);
  color: #5b4828;
  background: #fff7e6;
  font-size: 14px;
}

/* --------------------------------------------------------- responsive */
/* Keep the copy column readable between 801 and 1050px. */
@media (max-width: 1050px) {
  .vp-section {
    --vp-w: min(340px, var(--vp-cap));
  }
}
/* Phones and small tablets: the frame first, then the transcript, then the copy. */
@media (max-width: 800px) {
  .vp-grid,
  .vp-grid[data-video="left"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "frame"
      "transcript"
      "copy";
  }
  .vp-frame {
    width: min(100%, 420px, var(--vp-cap));
  }
  .vp-transcript {
    width: min(100%, 420px);
  }
  .vp-copy {
    margin-top: 40px;
  }
}
@media (max-width: 600px) {
  .vp-title {
    font-size: clamp(32px, 9.5vw, 40px);
  }
  :where(.vp-body) p {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------- motion */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .vp-frame .vp-poster {
    transition: transform 1.2s var(--ease);
  }
  .vp-frame:not(.is-playing):hover .vp-poster {
    transform: scale(1.035);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .vp-play-disc {
    transition:
      transform 0.35s var(--ease),
      box-shadow 0.35s var(--ease);
  }
  .vp-frame .vp-play:hover .vp-play-disc,
  .vp-frame .vp-play:focus-visible .vp-play-disc {
    transform: scale(1.07);
    box-shadow:
      0 0 0 14px rgba(214, 182, 118, 0.2),
      0 22px 46px -12px rgba(0, 0, 0, 0.65);
  }
  .vp-transcript summary::after {
    transition: transform 0.3s var(--ease);
  }
}