/* LUMEN — v0.46.0 LUMEN UNIVERSE / CUSTOMER EXPERIENCE RELEASE.
 *
 * A NEW, presentation-only sitewide layer. Everything here is either:
 *   (a) fixed-position, aria-hidden, pointer-events:none decoration
 *       (viewport corners, exposure rail, chapter readout, arrival
 *       sequence), or
 *   (b) a small set of opt-in reveal/enhancement utility classes that
 *       other LUMEN component stylesheets reference explicitly
 *       (.lumen-account-cards, .dbl-lumen-shop-frame, etc.) — never a
 *       generic unscoped selector.
 *
 * Namespacing: every new selector here is prefixed `.lumen-exp-` or
 * `.lumen-universe` — never a bare `.card`/`.frame`/`.overlay`/`.active`.
 *
 * Motion budget: transform/opacity only, one rAF-throttled scroll
 * listener (in lumen-experience.js) driving `transform: scaleX()` on the
 * rail fill — never top/width/height, so it never triggers layout. No
 * infinite loops, no canvas, no WebGL, no external animation library.
 * Full `prefers-reduced-motion: reduce` handling at the bottom disables
 * every animation/transition introduced in this file.
 */

/* ── 1. Sitewide viewport frame — thin architectural corner marks ────── */
.lumen-exp-frame {
	position: fixed;
	inset: 0;
	z-index: 9000;
	pointer-events: none;
}
.lumen-exp-corner {
	position: absolute;
	width: 18px;
	height: 18px;
	pointer-events: none;
	opacity: 0.38;
}
.lumen-exp-corner::before,
.lumen-exp-corner::after {
	content: '';
	position: absolute;
	background: var(--lumen-gold, #d9a441);
}
.lumen-exp-corner::before { width: 100%; height: 1px; }
.lumen-exp-corner::after  { width: 1px; height: 100%; }

.lumen-exp-corner--tl {
	top: max(10px, env(safe-area-inset-top));
	left: max(10px, env(safe-area-inset-left));
}
.lumen-exp-corner--tl::before,
.lumen-exp-corner--tl::after { top: 0; left: 0; }

.lumen-exp-corner--tr {
	top: max(10px, env(safe-area-inset-top));
	right: max(10px, env(safe-area-inset-right));
}
.lumen-exp-corner--tr::before { top: 0; right: 0; }
.lumen-exp-corner--tr::after  { top: 0; right: 0; }

.lumen-exp-corner--bl {
	bottom: max(10px, env(safe-area-inset-bottom));
	left: max(10px, env(safe-area-inset-left));
}
.lumen-exp-corner--bl::before { bottom: 0; left: 0; }
.lumen-exp-corner--bl::after  { bottom: 0; left: 0; }

.lumen-exp-corner--br {
	bottom: max(10px, env(safe-area-inset-bottom));
	right: max(10px, env(safe-area-inset-right));
}
.lumen-exp-corner--br::before { bottom: 0; right: 0; }
.lumen-exp-corner--br::after  { bottom: 0; right: 0; }

/* Simplify on narrow/mobile viewports — corners shrink and the bottom
   pair is dropped entirely so nothing ever competes with the Android
   system navigation bar (the exact class of bug v0.43.0/v0.43.1 fixed
   for the mobile Index panel is never repeated here). */
@media (max-width: 600px) {
	.lumen-exp-corner {
		width: 12px;
		height: 12px;
		opacity: 0.28;
	}
	.lumen-exp-corner--bl,
	.lumen-exp-corner--br {
		display: none;
	}
}

/* ── 2. Sitewide exposure/progress rail — a thin illuminated photographic
   scale, not a generic thick progress bar. transform: scaleX() only —
   never width — so updating it on scroll cannot trigger layout. ─────── */
.lumen-exp-rail {
	position: fixed;
	top: max(0px, env(safe-area-inset-top));
	left: 0;
	width: 100%;
	height: 2px;
	background: rgba(217, 164, 65, 0.12);
	z-index: 9001;
	pointer-events: none;
}
.lumen-exp-rail__fill {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--lumen-gold-deep, #b8862c), var(--lumen-gold-bright, #e8c766));
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}
@media (max-width: 600px) {
	.lumen-exp-rail {
		height: 1.5px;
	}
}

/* ── 3. Chapter readout — a tiny technical page/chapter label. Pure
   orientation text, never a link, never interactive. ────────────────── */
.lumen-exp-readout {
	position: fixed;
	right: max(14px, env(safe-area-inset-right));
	bottom: max(14px, env(safe-area-inset-bottom));
	z-index: 9000;
	margin: 0;
	padding: 4px 9px;
	color: var(--lumen-gold, #d9a441);
	background: rgba(10, 10, 11, 0.55);
	border: 1px solid rgba(217, 164, 65, 0.25);
	font-size: 10px;
	opacity: 0.72;
	pointer-events: none;
	backdrop-filter: blur(2px);
}
/* Never let the admin toolbar collide with a fixed decorative label. */
.admin-bar .lumen-exp-readout {
	bottom: max(14px, env(safe-area-inset-bottom));
}
@media (max-width: 600px) {
	.lumen-exp-readout {
		font-size: 9px;
		padding: 3px 7px;
		right: max(10px, env(safe-area-inset-right));
		bottom: max(10px, env(safe-area-inset-bottom));
	}
}

/* ── 4. Arrival lightline — Home page only (v0.49.0).
   v0.46–v0.48 used a full-screen, fixed, ground-coloured overlay that
   covered the real homepage for ~0.85s. v0.49.0 replaces it with a
   NON-BLOCKING accent: the real page is painted immediately and a single
   hairline of gold light travels across the top of the viewport once.
   Compositor-only (transform: scaleX + opacity, transform-origin left — no
   width/clip-path/filter animation), pointer-events: none, never occludes
   content, and nothing ever waits for it. It finishes (fill: forwards,
   ending at opacity 0) even if JavaScript never runs; JS may only ADD
   `.is-skipped` (repeat visit in the same tab, reduced motion, Motion
   Off/Minimal). New class names on purpose, so a stale cached Critical
   CSS copy of the old overlay rules can never match this element. ───── */
.lumen-exp-lightline {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 9999;
	pointer-events: none;
	overflow: hidden;
	contain: strict;
}
.lumen-exp-lightline__beam {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(90deg, transparent 0%, rgba(232, 199, 102, 0.15) 12%, var(--lumen-gold-bright, #e8c766) 55%, rgba(255, 243, 207, 0.95) 78%, transparent 100%);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
	animation: lumen-exp-lightline 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}
@keyframes lumen-exp-lightline {
	0%   { transform: scaleX(0); opacity: 0; }
	25%  { opacity: 1; }
	70%  { transform: scaleX(1); opacity: 1; }
	100% { transform: scaleX(1); opacity: 0; }
}
.lumen-exp-lightline.is-skipped {
	display: none;
}

/* ── 5. UNIFIED REVEAL CONTROLLER (v0.47.0) ──────────────────────────────
   One controller, three styles, chosen in LUMEN Experience Controls
   (body.lumen-reveal-fade-rise | -light-sweep | -frame-open | -off).

   Content is VISIBLE BY DEFAULT. The ONLY hidden state below requires
   BOTH html.lumen-exp-js (added by lumen-experience.js after it has
   initialized successfully) AND an active reveal style on <body>. With
   reveal off, motion off, reduced motion, or any JS failure, nothing is
   ever hidden.

   v0.47.0 CORRECTION: v0.46.0 revealed by transitioning to
   `transform: translateY(0)` and left that transform on permanently. Any
   transform other than `none` makes the element a containing block for
   position:fixed descendants — which is exactly how WooCommerce's
   full-image viewer (a fixed <dialog> inside the digital-print panel) got
   trapped inside the page layout. Every style now runs as a keyframe
   animation with `backwards` fill only: once it finishes, the element is
   left with NO transform, clip-path, or mask at all. */
body.lumen-universe {
	--lumen-reveal-duration: 0.7s;
	--lumen-reveal-distance: 14px;
}
body.lumen-universe.lumen-motion-minimal {
	--lumen-reveal-duration: 0.4s;
	--lumen-reveal-distance: 6px;
}
html.lumen-exp-js body:is(.lumen-reveal-fade-rise, .lumen-reveal-light-sweep, .lumen-reveal-frame-open) :is(.lumen-account-card, .dbl-lumen-shop-frame, .dbl-bcs-step, .wp-block-woocommerce-single-product.woocommerce):not(.is-lumen-exp-in) {
	opacity: 0;
}
html.lumen-exp-js body.lumen-reveal-fade-rise :is(.lumen-account-card, .dbl-lumen-shop-frame, .dbl-bcs-step, .wp-block-woocommerce-single-product.woocommerce).is-lumen-exp-in:not(.is-lumen-exp-done) {
	animation: lumen-reveal-rise var(--lumen-reveal-duration, 0.7s) cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
html.lumen-exp-js body.lumen-reveal-light-sweep :is(.lumen-account-card, .dbl-lumen-shop-frame, .dbl-bcs-step, .wp-block-woocommerce-single-product.woocommerce).is-lumen-exp-in:not(.is-lumen-exp-done) {
	animation: lumen-reveal-sweep var(--lumen-reveal-duration, 0.7s) cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
html.lumen-exp-js body.lumen-reveal-frame-open :is(.lumen-account-card, .dbl-lumen-shop-frame, .dbl-bcs-step, .wp-block-woocommerce-single-product.woocommerce).is-lumen-exp-in:not(.is-lumen-exp-done) {
	animation: lumen-reveal-frame var(--lumen-reveal-duration, 0.7s) cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
@keyframes lumen-reveal-rise {
	from { opacity: 0; transform: translateY(var(--lumen-reveal-distance, 14px)); }
	to   { opacity: 1; transform: none; }
}
/* Light Sweep — an exposure wipe travelling left to right. */
@keyframes lumen-reveal-sweep {
	from { opacity: 0.35; clip-path: inset(0 100% 0 0); }
	to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
/* Frame Open — the section opens outward from a slightly inset frame. */
@keyframes lumen-reveal-frame {
	from { opacity: 0; clip-path: inset(7% 5% 7% 5%); }
	to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* ── 6. THE LIGHTBOARD — My Account asymmetric editorial composition.
   Pure CSS evolution of the real, existing v0.45.x markup
   (.lumen-account-intro / .lumen-account-quick-actions /
   .lumen-account-cards / .lumen-account-card) — class-lumen-account.php
   itself is completely untouched, per explicit instruction. Upcoming
   Session receives the dominant visual position (first card, spans full
   width) when it exists; the remaining cards read more like a timeline /
   contact sheet than four identical equal boxes. ────────────────────── */
body.lumen-universe .lumen-account-intro {
	position: relative;
	padding: 22px 24px 20px;
	padding: var(--lumen-frame-pad-md, 22px) var(--lumen-frame-pad-lg, 24px);
	margin-bottom: 18px;
	border: 1px solid rgba(217, 164, 65, 0.2);
	background: linear-gradient(180deg, rgba(217, 164, 65, 0.06), transparent);
}
body.lumen-universe .lumen-account-intro::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 2px;
	background: var(--lumen-gold, #d9a441);
}
body.lumen-universe .lumen-account-intro__title {
	font-family: 'Cinzel', serif;
	letter-spacing: 0.01em;
}
body.lumen-universe .lumen-account-quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0 2px;
}
body.lumen-universe .lumen-account-quick-actions a {
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.82;
	transition: opacity 0.2s ease;
}
body.lumen-universe .lumen-account-quick-actions a:hover,
body.lumen-universe .lumen-account-quick-actions a:focus-visible {
	opacity: 1;
}
body.lumen-universe .lumen-account-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
/* Upcoming Session is always the FIRST card DBL_BCS_Lumen_Account renders
   — dominant position, full width, a heavier frame — whether it's the
   real data card or the premium empty state (the asymmetry is purely
   layout; no data is invented either way). */
body.lumen-universe .lumen-account-cards > .lumen-account-card:first-child {
	grid-column: 1 / -1;
	padding: 22px 24px;
	padding: var(--lumen-frame-pad-lg, 24px);
	border: 1px solid rgba(217, 164, 65, 0.35);
	background: rgba(217, 164, 65, 0.045);
}
body.lumen-universe .lumen-account-cards > .lumen-account-card:first-child .lumen-account-card__label {
	color: var(--lumen-gold, #d9a441);
}
body.lumen-universe .lumen-account-cards > .lumen-account-card:first-child .lumen-account-card__value {
	font-family: 'Cinzel', serif;
	font-size: 20px;
}
/* Remaining cards read as a small contact-sheet / timeline row. */
body.lumen-universe .lumen-account-cards > .lumen-account-card:not(:first-child) {
	position: relative;
	padding: 16px 18px;
	padding: var(--lumen-frame-pad-md, 18px);
	border: 1px solid rgba(217, 164, 65, 0.14);
}
body.lumen-universe .lumen-account-cards > .lumen-account-card:not(:first-child)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: 1px;
	background: rgba(217, 164, 65, 0.4);
}
@media (max-width: 720px) {
	body.lumen-universe .lumen-account-cards {
		grid-template-columns: 1fr;
	}
}


/* ── v0.46.2 — reCAPTCHA VISUAL INTEGRATION ───────────────────────────
   Google's injected corner badge visibly fights LUMEN's bottom-right
   chapter/dock language in the real staging recordings. We do NOT resize,
   recolor, restyle, remove, or interfere with Google's iframe/script.
   lumen-experience.js merely detects the injected .grecaptcha-badge and
   then adds body.lumen-recaptcha-present. ONLY in that proven-present
   state do we hide the floating badge and reveal a small, visible
   reCAPTCHA disclosure in normal document flow after the footer.

   Fail-safe: without JS, or if Google never injects the badge, this rule
   never activates and Google's original badge remains visible. */
.lumen-exp-recaptcha {
	display: none;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 7px 16px calc(7px + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(217, 164, 65, 0.10);
	background: var(--lumen-ground, #0a0a0b);
	color: rgba(236, 231, 218, 0.52);
	font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 0.045em;
	line-height: 1.45;
	text-align: center;
}
body.lumen-recaptcha-present .grecaptcha-badge {
	visibility: hidden !important;
}
body.lumen-recaptcha-present .lumen-exp-recaptcha {
	display: block;
}
@media (max-width: 600px) {
	.lumen-exp-recaptcha {
		padding-inline: 12px;
		font-size: 8.5px;
		letter-spacing: 0.025em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lumen-exp-lightline,
	.lumen-exp-lightline__beam {
		animation: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
	}
	html.lumen-exp-js body :is(.lumen-account-card, .dbl-lumen-shop-frame, .dbl-bcs-step, .wp-block-woocommerce-single-product.woocommerce) {
		opacity: 1 !important;
		animation: none !important;
		transform: none !important;
		clip-path: none !important;
	}
	.lumen-exp-rail__fill {
		transition: none !important;
	}
}

/* ════════════════════════════════════════════════════════════════════
   v0.47.0 — LUMEN EXPERIENCE CONTROLS + FRAME SPACING SYSTEM
   Every rule below keys off a body state class written by
   DBL_BCS_Lumen_Experience_Settings::body_classes() from validated
   admin settings. Presentation only; no rule changes what any control
   does, and none intercepts pointer events.
   ════════════════════════════════════════════════════════════════════ */

/* ── A. FRAME SPACING SYSTEM — "gallery matting" ──────────────────────
   One consistent scale instead of one-off paddings. Compact on phones,
   moderate on tablets, generous on desktop. */
body.lumen-universe {
	--lumen-frame-pad-sm: clamp(14px, 3.2vw, 18px);
	--lumen-frame-pad-md: clamp(18px, 3.6vw, 30px);
	--lumen-frame-pad-lg: clamp(22px, 4.2vw, 44px);
}

/* Cart table. ROOT CAUSE of the cramped look: Blocksy's WooCommerce CSS
   sets `table.shop_table tr>*:first-child{padding-inline-start:0}` (and
   the same for :last-child's end) and, below 690px, `padding: 1em 0` on
   every stacked cell — so product rows ran flush into LUMEN's framed
   table border. These restore real inner breathing room. The table's own
   markup and WooCommerce's responsive behavior are untouched. */
body.lumen-universe.woocommerce-cart table.shop_table.cart {
	--theme-table-padding: clamp(1.05em, 1.6vw, 1.45em) 0.8em;
}
body.lumen-universe.woocommerce-cart table.shop_table.cart tr > *:first-child {
	padding-inline-start: var(--lumen-frame-pad-md);
}
body.lumen-universe.woocommerce-cart table.shop_table.cart tr > *:last-child {
	padding-inline-end: var(--lumen-frame-pad-md);
}
/* Blocksy hides the remove/price/qty/subtotal cells below 1000px, making
   the thumbnail the first VISIBLE cell and the name the last. */
@media (max-width: 999.98px) {
	body.lumen-universe.woocommerce-cart table.shop_table.cart tr > .product-thumbnail {
		padding-inline-start: var(--lumen-frame-pad-md);
	}
	body.lumen-universe.woocommerce-cart table.shop_table.cart tr > .product-name {
		padding-inline-end: var(--lumen-frame-pad-md);
	}
}
@media (max-width: 689.98px) {
	body.lumen-universe.woocommerce-cart table.shop_table.cart tbody td,
	body.lumen-universe.woocommerce-cart table.shop_table.cart tbody td:first-child,
	body.lumen-universe.woocommerce-cart table.shop_table.cart tbody td:last-child {
		padding-inline: var(--lumen-frame-pad-sm);
	}
}
/* Cart Totals + Checkout order review: the flat 26px (18px on phones)
   from lumen-cart-checkout.css — left byte-for-byte unchanged — is
   replaced on the same scale by a higher-specificity rule. */
body.lumen-universe.woocommerce-cart .cart_totals,
body.lumen-universe.woocommerce-checkout #order_review {
	padding: var(--lumen-frame-pad-lg);
}
body.lumen-universe.woocommerce-cart .cart_totals > h2,
body.lumen-universe.woocommerce-checkout #order_review_heading {
	margin-bottom: clamp(12px, 1.6vw, 20px);
}
body.lumen-universe.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
	padding-top: clamp(10px, 1.4vw, 18px);
}
body.lumen-universe.woocommerce-checkout ul.wc_payment_methods {
	padding: var(--lumen-frame-pad-sm) var(--lumen-frame-pad-md);
}
/* !important only because the rule it replaces (Deposet's payment-
   options box in lumen-cart-checkout.css) is itself !important, to beat
   Deposet's own inline styles. Padding only; no Deposet logic or
   values are touched. */
body.lumen-universe.woocommerce-checkout .deposet-options {
	padding: var(--lumen-frame-pad-md) !important;
}
/* Contract booking summary (the v0.46.4 inline color hardening in
   class-contract-shortcode.php sets no padding, so it is unaffected). */
body.lumen-universe .dbl-bcs-summary-grid {
	padding: var(--lumen-frame-pad-md);
}

/* ── B. MOTION PROFILE ───────────────────────────────────────────────── */
/* OFF + MINIMAL: no arrival lightline (decorative movement). */
body.lumen-motion-off .lumen-exp-lightline,
body.lumen-motion-minimal .lumen-exp-lightline {
	display: none;
}
/* OFF + MINIMAL: no hero parallax. !important only to outrank the inline
   transform lumen-home.js writes; the resting value is the one
   lumen-home.css already uses. */
body.lumen-motion-off .lumen-home [data-lumen-parallax],
body.lumen-motion-minimal .lumen-home [data-lumen-parallax] {
	transform: scale(1.04) !important;
}
/* OFF: decorative entrance/sweep animations removed. Status feedback
   (status pulse, Focus-Lock selection confirmation) is kept. */
body.lumen-motion-off .lumen-aperture-open,
body.lumen-motion-off .lumen-frame-construct,
body.lumen-motion-off .dbl-se-deep-link-entry,
body.lumen-motion-off .lumen-frame-construct-corners rect,
body.lumen-motion-off .lumen-frame-construct-corners path {
	animation: none;
	clip-path: none;
	stroke-dashoffset: 0;
}
body.lumen-motion-minimal .lumen-aperture-open,
body.lumen-motion-minimal .lumen-frame-construct {
	animation-duration: 0.25s;
}
body.lumen-motion-minimal .dbl-se-deep-link-entry {
	animation-duration: 0.45s;
}

/* Home sections reveal through lumen-home.js's own [data-lumen-rise]
   observer; the Section Reveal setting maps onto it here. v0.49.0: every
   rule is scoped to `.is-reveal-pending` — the class lumen-home.js adds ONLY
   to sections that were below the fold when it initialized — so nothing
   already on screen is ever hidden, shifted, wiped, or clipped, and
   nothing is hidden at all without JavaScript. (lumen-home.js also reads
   body.lumen-reveal-off / body.lumen-motion-off and skips reveals.) */
body.lumen-reveal-off .lumen-home [data-lumen-rise],
body.lumen-reveal-off .lumen-home [data-lumen-rise].is-revealed {
	opacity: 1;
	transform: none;
	transition: none;
}
body.lumen-motion-minimal.lumen-reveal-fade-rise .lumen-home [data-lumen-rise].is-reveal-pending {
	transition-duration: var(--lumen-reveal-duration, 0.4s);
}
body.lumen-motion-minimal.lumen-reveal-fade-rise .lumen-home [data-lumen-rise].is-reveal-pending:not(.is-revealed) {
	transform: translateY(var(--lumen-reveal-distance, 6px));
}
body.lumen-reveal-light-sweep .lumen-home [data-lumen-rise].is-reveal-pending,
body.lumen-reveal-frame-open .lumen-home [data-lumen-rise].is-reveal-pending {
	transition: opacity 0.2s linear;
}
body.lumen-reveal-light-sweep .lumen-home [data-lumen-rise].is-reveal-pending:not(.is-revealed),
body.lumen-reveal-frame-open .lumen-home [data-lumen-rise].is-reveal-pending:not(.is-revealed) {
	transform: none;
}
body.lumen-reveal-light-sweep .lumen-home [data-lumen-rise].is-reveal-pending.is-revealed {
	animation: lumen-reveal-sweep var(--lumen-reveal-duration, 0.7s) cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
body.lumen-reveal-frame-open .lumen-home [data-lumen-rise].is-reveal-pending.is-revealed {
	animation: lumen-reveal-frame var(--lumen-reveal-duration, 0.7s) cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

/* ── C. FRAME ACCENTS ──────────────────────────────────────────────────
   Surfaces: Cart Totals, Checkout order review, Session Explorer photo
   frame (+ the digital-print panel, in lumen-shop-archive.css). The
   default (Minimal Corners / Medium) matches no rule below, so the
   current look is preserved exactly. */
body.lumen-frame-int-low {
	--lumen-accent-size: 10px;
	--lumen-accent-weight: 1px;
	--lumen-accent-opacity: 0.6;
}
body.lumen-frame-int-high {
	--lumen-accent-size: 24px;
	--lumen-accent-weight: 2px;
	--lumen-accent-opacity: 1;
}
body.lumen-frame-int-low.woocommerce-cart .cart_totals::before,
body.lumen-frame-int-low.woocommerce-cart .cart_totals::after,
body.lumen-frame-int-high.woocommerce-cart .cart_totals::before,
body.lumen-frame-int-high.woocommerce-cart .cart_totals::after,
body.lumen-frame-int-low.woocommerce-checkout #order_review::before,
body.lumen-frame-int-low.woocommerce-checkout #order_review::after,
body.lumen-frame-int-high.woocommerce-checkout #order_review::before,
body.lumen-frame-int-high.woocommerce-checkout #order_review::after {
	width: var(--lumen-accent-size);
	height: var(--lumen-accent-size);
	opacity: var(--lumen-accent-opacity);
}
body.lumen-frame-int-low.woocommerce-cart .cart_totals::before,
body.lumen-frame-int-high.woocommerce-cart .cart_totals::before,
body.lumen-frame-int-low.woocommerce-checkout #order_review::before,
body.lumen-frame-int-high.woocommerce-checkout #order_review::before {
	border-top-width: var(--lumen-accent-weight);
	border-left-width: var(--lumen-accent-weight);
}
body.lumen-frame-int-low.woocommerce-cart .cart_totals::after,
body.lumen-frame-int-high.woocommerce-cart .cart_totals::after,
body.lumen-frame-int-low.woocommerce-checkout #order_review::after,
body.lumen-frame-int-high.woocommerce-checkout #order_review::after {
	border-bottom-width: var(--lumen-accent-weight);
	border-right-width: var(--lumen-accent-weight);
}
body.lumen-frame-off.woocommerce-cart .cart_totals::before,
body.lumen-frame-off.woocommerce-cart .cart_totals::after,
body.lumen-frame-off.woocommerce-checkout #order_review::before,
body.lumen-frame-off.woocommerce-checkout #order_review::after,
body.lumen-frame-brackets.woocommerce-cart .cart_totals::before,
body.lumen-frame-brackets.woocommerce-cart .cart_totals::after,
body.lumen-frame-brackets.woocommerce-checkout #order_review::before,
body.lumen-frame-brackets.woocommerce-checkout #order_review::after {
	display: none;
}
/* Editorial Frame: a fine inner "mat" line, drawn with inset shadows
   (no extra elements, no layout change). */
body.lumen-frame-editorial.woocommerce-cart .cart_totals,
body.lumen-frame-editorial.woocommerce-checkout #order_review {
	box-shadow: inset 0 0 0 10px #101216, inset 0 0 0 11px rgba(217, 164, 65, 0.2);
}
/* Focus Brackets: all four corners, drawn as background layers over the
   panel's existing background color. */
body.lumen-frame-brackets.woocommerce-cart .cart_totals,
body.lumen-frame-brackets.woocommerce-checkout #order_review {
	--lumen-bracket: #d9a441;
	background-image:
		linear-gradient(var(--lumen-bracket), var(--lumen-bracket)),
		linear-gradient(var(--lumen-bracket), var(--lumen-bracket)),
		linear-gradient(var(--lumen-bracket), var(--lumen-bracket)),
		linear-gradient(var(--lumen-bracket), var(--lumen-bracket)),
		linear-gradient(var(--lumen-bracket), var(--lumen-bracket)),
		linear-gradient(var(--lumen-bracket), var(--lumen-bracket)),
		linear-gradient(var(--lumen-bracket), var(--lumen-bracket)),
		linear-gradient(var(--lumen-bracket), var(--lumen-bracket));
	background-size:
		var(--lumen-accent-size, 14px) var(--lumen-accent-weight, 2px),
		var(--lumen-accent-weight, 2px) var(--lumen-accent-size, 14px),
		var(--lumen-accent-size, 14px) var(--lumen-accent-weight, 2px),
		var(--lumen-accent-weight, 2px) var(--lumen-accent-size, 14px),
		var(--lumen-accent-size, 14px) var(--lumen-accent-weight, 2px),
		var(--lumen-accent-weight, 2px) var(--lumen-accent-size, 14px),
		var(--lumen-accent-size, 14px) var(--lumen-accent-weight, 2px),
		var(--lumen-accent-weight, 2px) var(--lumen-accent-size, 14px);
	background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
	background-repeat: no-repeat;
	background-origin: border-box;
}
/* Session Explorer photo corners (already four brackets): Off hides them;
   intensity scales them. */
body.lumen-frame-off .dbl-se-corner {
	display: none;
}
body.lumen-frame-int-low .dbl-se-corner {
	width: 18px;
	height: 18px;
	border-width: 1px;
	opacity: 0.6;
}
body.lumen-frame-int-high .dbl-se-corner {
	width: 34px;
	height: 34px;
	opacity: 1;
}

/* ── D. CTA LIGHT ACCENT — important actions only. Hover / keyboard focus
   (or, for Soft Pulse, one pulse the first time it scrolls into view).
   Never intercepts clicks; never changes the control's behavior; never
   loops. Disabled controls are excluded. */
body.lumen-cta-halo :is(.lumen-home__shutter, .lumen-header__shutter, .lumen-header__mobile-cta, .single_add_to_cart_button, .dbl-se-commit, .lumen-se-dock__action, .dbl-bcs-continue-btn, .dbl-bcs-submit-btn, .checkout-button, #place_order, .woocommerce-MyAccount-downloads-file):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
	/* !important only because lumen-cart-checkout.css (unchanged) sets
	   `box-shadow: none !important` on the Checkout buttons. */
	box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.28), 0 0 24px rgba(232, 199, 102, 0.22) !important;
}
body.lumen-cta-lightline :is(.lumen-home__shutter, .lumen-header__shutter, .lumen-header__mobile-cta, .single_add_to_cart_button, .dbl-se-commit, .lumen-se-dock__action, .dbl-bcs-continue-btn, .dbl-bcs-submit-btn, .checkout-button, #place_order, .woocommerce-MyAccount-downloads-file):not(:disabled):not([aria-disabled="true"]) {
	outline: 1px solid transparent;
	outline-offset: 1px;
	transition: outline-color 0.35s ease, outline-offset 0.35s ease;
}
body.lumen-cta-lightline :is(.lumen-home__shutter, .lumen-header__shutter, .lumen-header__mobile-cta, .single_add_to_cart_button, .dbl-se-commit, .lumen-se-dock__action, .dbl-bcs-continue-btn, .dbl-bcs-submit-btn, .checkout-button, #place_order, .woocommerce-MyAccount-downloads-file):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
	outline-color: rgba(232, 199, 102, 0.85);
	outline-offset: 5px;
}
body.lumen-cta-pulse :is(.lumen-home__shutter, .lumen-header__shutter, .lumen-header__mobile-cta, .single_add_to_cart_button, .dbl-se-commit, .lumen-se-dock__action, .dbl-bcs-continue-btn, .dbl-bcs-submit-btn, .checkout-button, #place_order, .woocommerce-MyAccount-downloads-file).is-lumen-cta-seen:not(:disabled) {
	animation: lumen-cta-pulse 1.4s ease-out 1;
}
body.lumen-cta-pulse :is(.lumen-home__shutter, .lumen-header__shutter, .lumen-header__mobile-cta, .single_add_to_cart_button, .dbl-se-commit, .lumen-se-dock__action, .dbl-bcs-continue-btn, .dbl-bcs-submit-btn, .checkout-button, #place_order, .woocommerce-MyAccount-downloads-file):not(:disabled):is(:hover, :focus-visible) {
	outline: 1px solid rgba(232, 199, 102, 0.7);
	outline-offset: 3px;
}
/* The pulse is an expanding outline ring (outline never affects layout,
   and is not locked by any !important rule). */
@keyframes lumen-cta-pulse {
	0%   { outline: 1px solid rgba(232, 199, 102, 0.75); outline-offset: 0; }
	100% { outline: 1px solid rgba(232, 199, 102, 0); outline-offset: 12px; }
}

/* ── E. IMAGE FOCUS TREATMENT — Session Explorer photo (the digital-print
   photo is handled in lumen-shop-archive.css). One pseudo-element; the
   existing ::after glow is untouched. */
body.lumen-focus-crop .dbl-se-photo-wrap::before,
body.lumen-focus-frame .dbl-se-photo-wrap::before {
	content: '';
	position: absolute;
	inset: 14px;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s ease;
}
body.lumen-focus-crop .dbl-se-photo-wrap::before {
	--lumen-crop: rgba(232, 199, 102, 0.8);
	background:
		linear-gradient(var(--lumen-crop), var(--lumen-crop)) 0 0 / 18px 1px no-repeat,
		linear-gradient(var(--lumen-crop), var(--lumen-crop)) 0 0 / 1px 18px no-repeat,
		linear-gradient(var(--lumen-crop), var(--lumen-crop)) 100% 0 / 18px 1px no-repeat,
		linear-gradient(var(--lumen-crop), var(--lumen-crop)) 100% 0 / 1px 18px no-repeat,
		linear-gradient(var(--lumen-crop), var(--lumen-crop)) 0 100% / 18px 1px no-repeat,
		linear-gradient(var(--lumen-crop), var(--lumen-crop)) 0 100% / 1px 18px no-repeat,
		linear-gradient(var(--lumen-crop), var(--lumen-crop)) 100% 100% / 18px 1px no-repeat,
		linear-gradient(var(--lumen-crop), var(--lumen-crop)) 100% 100% / 1px 18px no-repeat;
}
body.lumen-focus-frame .dbl-se-photo-wrap::before {
	border: 1px solid rgba(232, 199, 102, 0.55);
}
@media (hover: hover) {
	body.lumen-focus-crop .dbl-se-photo-wrap:hover::before,
	body.lumen-focus-frame .dbl-se-photo-wrap:hover::before {
		opacity: 1;
	}
}
@media (hover: none) {
	body.lumen-focus-crop .dbl-se-photo-wrap::before,
	body.lumen-focus-frame .dbl-se-photo-wrap::before {
		opacity: 0.5;
	}
}

/* ── F. DIGITAL PRINT VIEWER COEXISTENCE — while WooCommerce's full-image
   viewer is open, LUMEN's own fixed layers step aside so nothing sits on
   top of (or visually competes with) the photograph. They return the
   moment WooCommerce removes its open-state class. */
body.wc-block-product-gallery-dialog-open .lumen-exp-frame,
body.wc-block-product-gallery-dialog-open .lumen-exp-rail,
body.wc-block-product-gallery-dialog-open .lumen-exp-readout,
body.wc-block-product-gallery-dialog-open .lumen-exp-lightline,
body.wc-block-product-gallery-dialog-open .lumen-se-dock {
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	body :is(.lumen-home__shutter, .lumen-header__shutter, .lumen-header__mobile-cta, .single_add_to_cart_button, .dbl-se-commit, .lumen-se-dock__action, .dbl-bcs-continue-btn, .dbl-bcs-submit-btn, .checkout-button, #place_order, .woocommerce-MyAccount-downloads-file) {
		animation: none !important;
	}
	body.lumen-cta-lightline :is(.lumen-home__shutter, .lumen-header__shutter, .lumen-header__mobile-cta, .single_add_to_cart_button, .dbl-se-commit, .lumen-se-dock__action, .dbl-bcs-continue-btn, .dbl-bcs-submit-btn, .checkout-button, #place_order, .woocommerce-MyAccount-downloads-file) {
		transition: none !important;
	}
	body.lumen-focus-crop .dbl-se-photo-wrap::before,
	body.lumen-focus-frame .dbl-se-photo-wrap::before {
		transition: none !important;
	}
	body .lumen-home [data-lumen-rise].is-revealed {
		animation: none !important;
	}
}


/* ── v0.48.0 — LUMEN SOUND toggle (exists only when Sound Experience is
   on; built by lumen-sound.js). A transparent 44×44 hit area around a
   framed square matching the header's own icon buttons; negative margins
   keep the header's visual spacing exactly as it was. */
.lumen-sound-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	margin: -5px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--lumen-ink-dim, #a99f88);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.lumen-sound-toggle__frame {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	box-sizing: border-box;
	border: 1px solid rgba(217, 164, 65, 0.3);
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.lumen-sound-toggle:hover .lumen-sound-toggle__frame,
.lumen-sound-toggle:focus-visible .lumen-sound-toggle__frame {
	color: var(--lumen-gold-bright, #e8c766);
	border-color: var(--lumen-gold, #d9a441);
	background: rgba(217, 164, 65, 0.1);
}
.lumen-sound-toggle:focus-visible {
	outline: 2px solid var(--lumen-gold-bright, #e8c766);
	outline-offset: -3px;
}
.lumen-sound-toggle.is-muted .lumen-sound-toggle__frame {
	opacity: 0.75;
}
@media (max-width: 782px) {
	.lumen-sound-toggle__frame {
		width: 32px;
		height: 32px;
	}
	.lumen-sound-toggle {
		margin: -6px;
	}
}
/* Fallback when the LUMEN header is not active: a small fixed control,
   safe-area aware, lifted above the Session Focus Dock when it shows. */
.lumen-sound-toggle--floating {
	position: fixed;
	left: max(10px, env(safe-area-inset-left));
	bottom: max(10px, env(safe-area-inset-bottom));
	margin: 0;
	z-index: 9002;
	background: rgba(10, 10, 11, 0.7);
	border-radius: 50%;
}
body.lumen-se-dock-active .lumen-sound-toggle--floating {
	bottom: calc(96px + env(safe-area-inset-bottom));
}
body.wc-block-product-gallery-dialog-open .lumen-sound-toggle--floating {
	visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
	.lumen-sound-toggle__frame {
		transition: none !important;
	}
}
/* Phones (≤640px): the header row is already full (brand + search + Index),
   so an extra icon would push Index past the edge. There the visitor's
   control lives inside the Index panel instead, as a full-width row above
   the booking button — same state, same labels, 48px tall. */
.lumen-sound-toggle--panel {
	display: none;
}
@media (max-width: 640px) {
	.lumen-header:has(.lumen-sound-toggle--panel) .lumen-sound-toggle--header {
		display: none;
	}
	.lumen-header .lumen-sound-toggle--panel {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		width: calc(100% - 32px);
		min-height: 48px;
		height: auto;
		margin: 2px 16px 10px;
		padding: 6px 12px 6px 6px;
		box-sizing: border-box;
		border: 1px solid rgba(217, 164, 65, 0.18);
		font: inherit;
		font-size: 11px;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		text-align: left;
	}
	.lumen-sound-toggle--panel .lumen-sound-toggle__label {
		color: var(--lumen-ink-dim, #a99f88);
	}
}