/**
 * Liquid Glass — dark imitation with red glint.
 *
 * Site-wide translucent glass system. Every surface that wants the aesthetic
 * applies `.slist-glass` (plus optional modifiers). Tokens live in tokens.css
 * so adjusting intensity / glint / blur is one-file work.
 *
 * Stack of effects per glass panel:
 *   1. Semi-transparent white base (rgba 6% dark / 55% light)
 *   2. backdrop-filter blur + saturation bump for the "liquid" feel
 *   3. 1px inset top highlight — the specular lip catching overhead light
 *   4. 1px inset bottom shadow — subtle depth, material thickness
 *   5. Ambient drop-shadow below — separates panel from body
 *   6. ::after radial gradient in top-right corner = RED GLINT
 *      — static subtle, hover intensifies
 *
 * Glass panels MUST establish a stacking context (position + isolation) so
 * the ::after glint composites correctly with the panel content.
 */

/* ========================================================================== */
/* ---- Base glass surface                                                    */
/* ========================================================================== */

.slist-glass {
	position: relative;
	isolation: isolate;
	background: var(--slist-glass-bg);
	border: 1px solid var(--slist-glass-border);
	border-radius: var(--slist-radius-lg);
	backdrop-filter: var(--slist-glass-filter);
	-webkit-backdrop-filter: var(--slist-glass-filter);
	box-shadow:
		var(--slist-glass-inset-top),
		var(--slist-glass-inset-bottom),
		var(--slist-glass-shadow);
	overflow: hidden;
	transition:
		background var(--slist-transition-default),
		border-color var(--slist-transition-default),
		box-shadow var(--slist-transition-default);
}

/* Content inside glass needs to sit above the glint pseudo. */
.slist-glass > * {
	position: relative;
	z-index: 2;
}

/* Red glint — specular red catch-light in top-right corner.
   Size + opacity controlled via tokens; hover ramps the intensity. */
.slist-glass::after {
	content: "";
	position: absolute;
	top: -5%;
	left: -5%;
	width: var(--slist-glint-size);
	height: var(--slist-glint-size);
	background: radial-gradient(
		ellipse at 0% 0%,
		var(--slist-glint-color) 0%,
		rgba(255, 0, 0, 0.08) 35%,
		transparent 70%
	);
	opacity: var(--slist-glint-opacity);
	pointer-events: none;
	z-index: 1;
	transition:
		opacity var(--slist-transition-default),
		transform var(--slist-transition-slow);
	mix-blend-mode: normal;
}

/* Subtle diagonal specular sweep — a second highlight simulating the light
   rolling across the glass as you look at it. Very faint, white, runs from
   top-left to mid. */
.slist-glass::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 40%;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.25) 50%,
		transparent 100%
	);
	pointer-events: none;
	z-index: 1;
	opacity: 0.7;
}

/* Hover/focus intensifies the glint + lifts the panel slightly. */
.slist-glass:hover,
.slist-glass:focus-within {
	background: var(--slist-glass-bg-hover);
	border-color: rgba(255, 255, 255, 0.14);
}

.slist-glass:hover::after,
.slist-glass:focus-within::after {
	opacity: var(--slist-glint-opacity-hover);
	transform: translate(-8%, 8%);
}

/* ========================================================================== */
/* ---- Modifiers                                                             */
/* ========================================================================== */

/* Dense glass — heavier blur, for navigation chrome that sits over content */
.slist-glass--dense {
	backdrop-filter: var(--slist-glass-filter-dense);
	-webkit-backdrop-filter: var(--slist-glass-filter-dense);
}

/* Thin glass — reduced shadow + smaller glint, for inline form inputs */
.slist-glass--thin {
	box-shadow:
		var(--slist-glass-inset-top),
		0 1px 6px rgba(0, 0, 0, 0.25);
	border-radius: var(--slist-radius-md);
}

.slist-glass--thin::after {
	width: 30%;
	height: 30%;
	opacity: calc(var(--slist-glint-opacity) * 0.7);
}

/* Sharp — no border-radius for full-width bars (nav, footer) */
.slist-glass--sharp {
	border-radius: 0;
	border-left: none;
	border-right: none;
}

/* Flat — no lift shadow, for panels that sit directly on content (tabs, etc.) */
.slist-glass--flat {
	box-shadow:
		var(--slist-glass-inset-top),
		var(--slist-glass-inset-bottom);
}

/* Interactive — brighter hover response, for buttons/clickable panels */
.slist-glass--interactive {
	cursor: pointer;
}

.slist-glass--interactive:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* ========================================================================== */
/* ---- Reduced motion / reduced transparency respect                         */
/* ========================================================================== */

@media (prefers-reduced-transparency: reduce) {
	.slist-glass {
		background: var(--slist-surface);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.slist-glass::after,
	.slist-glass::before {
		display: none;
	}
}

/* Mobile (<768px): kill every remaining backdrop-filter. Mobile GPUs stall
   or loop on backdrop-filter with sticky/fixed parents, which manifests as
   "website never finishes loading" on slower devices. Translucent
   appearance via rgba alone is still fine. */
@media (max-width: 767px) {
	body .site-header,
	.slist-shop-toolbar,
	.slist-glass,
	.slist-cart-drawer__panel {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
	/* Drop the body::before fixed ambient layer — also expensive on mobile. */
	body::before {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.slist-glass,
	.slist-glass::after {
		transition: none;
	}
}

/* ========================================================================== */
/* ---- Body ambient — gives backdrop-filter something to interact with       */
/* ------------------------------------------------------------------------   */
/* Pure black body with no layering = glass has nothing to blur = panels      */
/* look flat. A very subtle radial layer (2 small gradients) creates enough   */
/* luminance variation that glass reads as glass when you scroll past it.     */
/* Positioned fixed so it persists across page scroll.                        */
/* ========================================================================== */

body::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		radial-gradient(60% 50% at 20% 15%, rgba(255, 255, 255, 0.025) 0%, transparent 70%),
		radial-gradient(50% 40% at 80% 85%, rgba(255, 0, 0, 0.018) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

body > * {
	position: relative;
	z-index: 1;
}

/* ========================================================================== */
/* ---- Site-wide retrofit — existing surfaces inherit glass without          */
/*      markup changes. Each selector below is an existing theme class that   */
/*      should now read as glass rather than solid surface.                   */
/* ========================================================================== */

/* ---- Navigation header (GeneratePress `.site-header`) ---- */

body .site-header {
	/* `fixed` — viewport-anchored, not sticky. Always visible regardless of
	   scroll container, iOS webview quirks, or ancestor overflow-clip bugs.
	   Combined with body padding-top below, content still lays out correctly
	   below the nav. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: var(--slist-z-header);
	background: var(--slist-glass-bg) !important;
	backdrop-filter: var(--slist-glass-filter-dense);
	-webkit-backdrop-filter: var(--slist-glass-filter-dense);
	border-bottom: 1px solid var(--slist-glass-border);
	box-shadow: var(--slist-glass-inset-top), 0 2px 16px rgba(0, 0, 0, 0.4);
	overflow: hidden;
	height: var(--slist-header-height, 64px);
}

/* When the WP admin bar is visible, push the fixed nav below it. WP adds
   `.admin-bar` class to <body> on logged-in front-end views. Admin bar is
   32px on desktop, 46px on mobile (WP standard breakpoint 782px). Body
   padding-top is also bumped so content clears both bars. */
body.admin-bar .site-header {
	top: 32px;
}

body.admin-bar {
	padding-top: calc(var(--slist-header-height, 64px) + 32px) !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
	body.admin-bar {
		padding-top: calc(var(--slist-header-height, 64px) + 46px) !important;
	}
}

/* Hide the Home menu item — users don't need a dedicated link since the
   logo returns them to home. Saves one slot in the top-level nav. */
body .main-navigation .menu-item-home {
	display: none !important;
}

/* Compensate for the fixed nav — push body content down by the nav height
   so nothing hides behind it. Higher specificity + !important to override
   theme/plugin resets that were zeroing it. */
html body,
html body.home,
html body.archive,
html body.single,
html body.page {
	padding-top: var(--slist-header-height, 64px) !important;
}

body .inside-header,
body .site-header .inside-header {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	height: 100%;
	min-height: 0;
}

/* ---- Hamburger / mobile menu control — transparent background, no chrome ---- */

body .menu-toggle,
body .menu-toggle:hover,
body .menu-toggle:focus,
body .mobile-menu-control-wrapper .menu-toggle,
body .has-inline-mobile-toggle #site-navigation.toggled,
.site-header .menu-toggle {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

body .main-navigation .menu-toggle:hover,
body .main-navigation .menu-toggle:focus {
	background: transparent !important;
	background-color: transparent !important;
}

/* ---- Nav container: no solid background anywhere ----
   GP ships `.main-navigation` and children with `background-color: #000`
   via an inline <style> block. Nuked at every level with !important and
   `background: none` to cover background-image paths too. Uses `:where()`
   with 0-specificity on the root so theme-level overrides still work. */
html body .main-navigation,
html body .main-navigation ul,
html body .main-navigation ul ul,
html body .main-nav,
html body .main-nav ul,
html body .menu-bar-items,
html body .inside-navigation,
html body .site-header .main-navigation,
html body .site-header .inside-navigation,
html body .site-header .main-nav {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
}

/* ---- Nav items: no black hover background ----
   GP sets background-color: #111 on nav link hover, showing as a visible
   black box around the menu item. Kill it — red text color is the only
   hover feedback needed. */
body .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
body .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
body .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
body .main-navigation .menu-bar-item:hover > a,
body .main-navigation .menu-bar-item.sfHover > a,
body .navigation-search input[type="search"]:active,
body .navigation-search input[type="search"]:focus,
body .main-navigation .main-nav ul li.search-item.active > a,
body .main-navigation .menu-bar-items .search-item.active > a {
	background: transparent !important;
	background-color: transparent !important;
}

/* Submenu dropdowns (if any) — also transparent */
body .main-navigation .main-nav ul li > ul,
body .main-navigation .menu-bar-items ul {
	background: transparent !important;
	background-color: transparent !important;
}

/* ---- Sticky nav at ALL times ----
   Disable the hide-on-scroll behavior. The JS still adds `.is-hidden` when
   scrolling down, but the transform never applies — nav stays visible. */
body .site-header.is-hidden {
	transform: none !important;
}

body .site-header::after {
	content: "";
	position: absolute;
	top: -20%;
	left: -3%;
	width: 18%;
	height: 260%;
	background: radial-gradient(
		ellipse at 0% 50%,
		var(--slist-glint-color) 0%,
		transparent 65%
	);
	opacity: var(--slist-glint-opacity);
	pointer-events: none;
	mix-blend-mode: normal;
}

body .site-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 10%;
	right: 30%;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.22) 50%,
		transparent 100%
	);
	pointer-events: none;
}

/* ---- Shop toolbar already sticky; upgrade to glass tokens ---- */

.slist-shop-toolbar {
	background: var(--slist-glass-bg) !important;
	backdrop-filter: var(--slist-glass-filter);
	-webkit-backdrop-filter: var(--slist-glass-filter);
	border-bottom: 1px solid var(--slist-glass-border);
	box-shadow: var(--slist-glass-inset-top);
	overflow: visible; /* let the sort dropdown overflow if needed */
	position: sticky;
	padding: var(--slist-space-3) var(--slist-space-3);
	border-radius: var(--slist-radius-lg);
	margin-top: var(--slist-space-3);
	isolation: isolate;
}

.slist-shop-toolbar::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 18%;
	height: 100%;
	background: radial-gradient(
		ellipse at 0% 50%,
		var(--slist-glint-color) 0%,
		transparent 65%
	);
	opacity: var(--slist-glint-opacity);
	pointer-events: none;
	mix-blend-mode: normal;
	z-index: 0;
	border-radius: var(--slist-radius-lg);
}

.slist-shop-toolbar > * {
	position: relative;
	z-index: 1;
}

/* ---- Shop cards — glass APPEARANCE without backdrop-filter cost ----
   Cards are visual chrome, not translucent overlays. Using backdrop-filter
   on every card creates 6–20 GPU compositing layers that repaint every
   scroll frame. Solid rgba glass color + inset highlight + shadow gives
   the same *look* at ~5% of the GPU cost. Backdrop-filter stays only on
   nav + toolbar + drawer where there's genuine content-behind to blur. */

/* ---- Product cards — GHOST MANNEQUIN ----
   No gray card background, no dissolve overlay, no box. Product floats on
   the body void. Hover = subtle image zoom, that's it. The garment IS the
   design; any chrome competes with the photography. */
.woocommerce ul.products li.product.slist-card--product {
	background: transparent !important;
	border: none;
	box-shadow: none;
	overflow: visible;
	isolation: isolate;
}

.woocommerce ul.products li.product.slist-card--product .slist-card__media {
	position: relative;
	overflow: hidden;
	background: transparent !important;
}

/* Image zooms on hover — only hover feedback. No background color change,
   no overlay dissolve. Full-bleed product on void. */
.woocommerce ul.products li.product.slist-card--product .slist-card__media img {
	transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
	transform: scale(1);
}

.woocommerce ul.products li.product.slist-card--product:hover,
.woocommerce ul.products li.product.slist-card--product:focus-within {
	background: transparent !important;
}

.woocommerce ul.products li.product.slist-card--product:hover .slist-card__media img,
.woocommerce ul.products li.product.slist-card--product:focus-within .slist-card__media img {
	transform: scale(1.04);
}

/* Kill any remaining glass pseudos on product cards */
.woocommerce ul.products li.product.slist-card--product::before,
.woocommerce ul.products li.product.slist-card--product::after {
	display: none !important;
}

/* Ghost mannequin rule — applies to ALL product cards regardless of context
   (home merch teaser, shop archive, related products, cross-sells). */
.slist-card--product,
.slist-card--product:hover,
.slist-card--product:focus-within {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

.slist-card--product .slist-card__media {
	background: transparent !important;
}

.slist-card--product .slist-card__media::before,
.slist-card--product::before,
.slist-card--product::after {
	display: none !important;
}

.slist-card--product .slist-card__media img {
	transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.slist-card--product:hover .slist-card__media img,
.slist-card--product:focus-within .slist-card__media img {
	transform: scale(1.04);
}

/*
 * Ghost mannequin — NO pseudos on product cards. Previously we rendered a
 * red-glint ::after and a 1px top-highlight ::before here. Both created
 * visible chrome around the product on hover ("dark box" effect reported
 * by user). The only hover feedback is image zoom (defined above).
 *
 * Keep these display:none rules AFTER the earlier no-op rules so
 * cascade order guarantees they win.
 */
.woocommerce ul.products li.product.slist-card--product::after,
.woocommerce ul.products li.product.slist-card--product::before,
.woocommerce ul.products li.product.slist-card--product:hover::after,
.woocommerce ul.products li.product.slist-card--product:hover::before,
.woocommerce ul.products li.product.slist-card--product:focus-within::after,
.woocommerce ul.products li.product.slist-card--product:focus-within::before,
.slist-card--product::after,
.slist-card--product::before,
.slist-card--product:hover::after,
.slist-card--product:hover::before {
	display: none !important;
	content: none !important;
	background: none !important;
	opacity: 0 !important;
}

.woocommerce ul.products li.product.slist-card--product > * {
	position: relative;
	z-index: 2;
}

/* Card media becomes transparent — product floats inside the glass panel
   with its own drop-shadow for weight. Removes the solid noise surface. */
.woocommerce ul.products li.product.slist-card--product .slist-card__media,
.slist-card--product .slist-card__media {
	background: transparent !important;
	overflow: visible;
}

.woocommerce ul.products li.product.slist-card--product .slist-card__media::after,
.slist-card--product .slist-card__media::after {
	display: none !important;
}

/* ---- PDP gallery — solid glass color (large surface, filter = expensive) ---- */

.single-product .slist-main--shop .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.single-product .slist-main--shop .woocommerce-product-gallery .woocommerce-product-gallery__image {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid var(--slist-glass-border);
	box-shadow:
		var(--slist-glass-inset-top),
		var(--slist-glass-inset-bottom),
		var(--slist-glass-shadow);
	border-radius: var(--slist-radius-lg);
	isolation: isolate;
}

.single-product .slist-main--shop .woocommerce-product-gallery .woocommerce-product-gallery__wrapper::after {
	background: radial-gradient(
		ellipse at 0% 0%,
		var(--slist-glint-color) 0%,
		rgba(255, 0, 0, 0.10) 35%,
		transparent 70%
	) !important;
	opacity: var(--slist-glint-opacity);
	width: 40%;
	height: 40%;
	top: -3%;
	left: -3%;
	border-radius: var(--slist-radius-lg);
}

/* ---- PDP tab panels, related products frame ---- */

.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--slist-glass-border);
	border-radius: var(--slist-radius-lg);
	box-shadow: var(--slist-glass-inset-top), var(--slist-glass-shadow);
	padding: var(--slist-space-4) var(--slist-space-5);
	margin-top: var(--slist-space-6);
	isolation: isolate;
	position: relative;
	overflow: hidden;
}

.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs::after {
	content: "";
	position: absolute;
	top: -8%;
	left: -5%;
	width: 30%;
	height: 50%;
	background: radial-gradient(
		ellipse at 0% 0%,
		var(--slist-glint-color) 0%,
		transparent 65%
	);
	opacity: var(--slist-glint-opacity);
	pointer-events: none;
	mix-blend-mode: normal;
	z-index: 0;
}

.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs > * {
	position: relative;
	z-index: 1;
}

/* ---- Cart + checkout tables — solid glass appearance, no backdrop-filter.
   These panels are large; backdrop-filter on them would paint the entire
   tablescape every scroll frame. ---- */

.woocommerce-cart table.shop_table,
.woocommerce-cart .cart_totals table,
.woocommerce-checkout #order_review table,
.woocommerce-checkout #payment,
.woocommerce-checkout .checkout_coupon {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid var(--slist-glass-border) !important;
	box-shadow:
		var(--slist-glass-inset-top),
		var(--slist-glass-shadow) !important;
	overflow: hidden;
	isolation: isolate;
	position: relative;
}

.woocommerce-cart table.shop_table::after,
.woocommerce-cart .cart_totals table::after,
.woocommerce-checkout #payment::after {
	content: "";
	position: absolute;
	top: -5%;
	left: -5%;
	width: 22%;
	height: 55%;
	background: radial-gradient(
		ellipse at 0% 0%,
		var(--slist-glint-color) 0%,
		transparent 60%
	);
	opacity: var(--slist-glint-opacity);
	pointer-events: none;
	mix-blend-mode: normal;
	z-index: 0;
}

/* ---- Form inputs — solid glass color, no backdrop-filter ----
   Inputs repaint frequently (typing, focus). Backdrop-filter on every
   input makes every keystroke re-composite half the page. ---- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout .select2-container--default .select2-selection--single,
input.qty,
.single-product .slist-main--shop table.variations select,
.woocommerce .slist-shop-toolbar .woocommerce-ordering select {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid var(--slist-glass-border) !important;
	box-shadow: var(--slist-glass-inset-top);
	color: var(--slist-text-primary);
	transition:
		background var(--slist-transition-fast),
		border-color var(--slist-transition-fast),
		box-shadow var(--slist-transition-fast);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
input.qty:focus,
.single-product .slist-main--shop table.variations select:focus,
.woocommerce .slist-shop-toolbar .woocommerce-ordering select:focus {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 0, 0, 0.45) !important;
	/* Visible red focus ring — bumped from 2px/12% to 4px/22% */
	box-shadow:
		var(--slist-glass-inset-top),
		0 0 0 4px rgba(255, 0, 0, 0.22);
	outline: none;
}

/* Pill buttons — solid glass color, no backdrop-filter */
.slist-btn--pill {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid var(--slist-glass-border) !important;
	box-shadow: var(--slist-glass-inset-top);
}

.slist-btn--pill:hover {
	background: rgba(255, 255, 255, 0.10) !important;
	border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Size chips — solid, no backdrop-filter */
.slist-chip {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid var(--slist-glass-border) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.slist-chip:hover:not(.slist-chip--oos) {
	background: rgba(255, 255, 255, 0.10) !important;
	border-color: rgba(255, 0, 0, 0.3) !important;
}

/* ---- Card media bg goes transparent everywhere (not just products) ----
   The base .slist-card__media in card.css sets a solid #242428 noise surface
   that made sense for the pre-glass era. Under glass, every card panel is
   transparent — media area too. Otherwise event flyers sit on a solid gray
   patch inside the glass, killing the translucency effect.                  */

.slist-card .slist-card__media,
.slist-card--lineup .slist-card__media,
.slist-card:not(.slist-card--product) .slist-card__media {
	background: transparent !important;
}

/* ---- Event flyers + lineup images: full-bleed treatment ----
   These are opaque rectangular images that should fill the card. Three
   overrides vs. the product-card defaults (which assume transparent PNGs):
     1. filter: none — no rim-light/drop-shadow halo
     2. object-fit: cover — fill the card edge-to-edge (contain creates a
        letterbox that Chrome compositor misrenders as black when the card
        has backdrop/glass layers upstream)
     3. z-index: 2 — force a compositing layer above the card's glass chrome
        pseudo-elements so the flyer always renders on top
   Without (2) and (3), flyers render as pure black on home + event archive
   because the compositor drops them behind the glass pseudo stack.         */

.slist-card:not(.slist-card--product) .slist-card__media img,
.slist-card--lineup .slist-card__media img {
	filter: none !important;
	object-fit: cover !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: relative;
	z-index: 2;
}

/* Perfmatters lazy-load hides images with opacity: 0 until pmloaded class
   lands. On flyer cards the glass layering confuses Chrome's compositor
   and the opacity transition never completes — flyer stays black forever.
   Force fully visible for lazy-load entered state (covers the window
   between `entered` and `pmloaded` classes). */
.slist-card:not(.slist-card--product) img.perfmatters-lazy,
.slist-card:not(.slist-card--product) img.perfmatters-lazy.entered,
.slist-card--lineup img.perfmatters-lazy,
.slist-card--lineup img.perfmatters-lazy.entered {
	opacity: 1 !important;
	visibility: visible !important;
}

/* ---- Event / lineup cards (home + event archive) pick up glass ----
   .slist-card is the base class used site-wide for cards outside the shop.
   `.slist-card--interactive` hover lifts + brightens glint. `.slist-card--
   lineup` is used on event pages for artist rows and gets the same glass. */

/*
 * Event / lineup cards are IMAGE-FIRST — the flyer fills the whole panel,
 * so glass here is chrome-only: thin border + specular top-edge + red corner
 * glint. No backdrop-filter (would double-composite over the flyer and fail
 * in Chrome/Safari compositor when the image is taller than the container;
 * manifests as flyer rendering pure black). No background-color either — the
 * flyer supplies its own.
 */
.slist-card:not(.slist-card--product):not(.slist-post-card):not(.slist-update-card) {
	background: transparent !important;
	border: none !important;
	box-shadow:
		var(--slist-glass-inset-top),
		var(--slist-glass-shadow);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* Blog post cards — NO glass chrome. Centered sections don't need boxes
   around each post; the image + text carry the design. */
.slist-post-card,
.slist-post-card.slist-card,
.slist-post-card.slist-card--interactive {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	overflow: visible;
}

.slist-post-card::before,
.slist-post-card::after {
	display: none !important;
}

.slist-card:not(.slist-card--product):not(.slist-post-card):not(.slist-update-card)::after {
	content: "";
	position: absolute;
	top: -8%;
	left: -8%;
	width: 45%;
	height: 45%;
	background: radial-gradient(
		ellipse at 0% 0%,
		var(--slist-glint-color) 0%,
		rgba(255, 0, 0, 0.08) 35%,
		transparent 70%
	);
	opacity: 0.5;
	pointer-events: none;
	/* Normal blend (not screen) because event flyer is opaque content;
	   screen over a saturated flyer creates a pink wash we don't want. */
	mix-blend-mode: normal;
	z-index: 3;
	transition:
		opacity var(--slist-transition-default),
		transform var(--slist-transition-slow);
	border-radius: inherit;
}

.slist-card:not(.slist-card--product):not(.slist-post-card):not(.slist-update-card)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 8%;
	right: 40%;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.22) 50%,
		transparent 100%
	);
	pointer-events: none;
	z-index: 1;
}

.slist-card:not(.slist-card--product) > * {
	position: relative;
	z-index: 2;
}

.slist-card--interactive:hover {
	background: var(--slist-glass-bg-hover) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
}

.slist-card--interactive:hover::after {
	opacity: var(--slist-glint-opacity-hover);
	transform: translate(-6%, 6%);
}

/*
 * Ghost-mannequin overrides — product cards must stay chrome-free on hover
 * even when they also carry `.slist-card--interactive` (which they do on
 * the home merch grid). Specificity 2,0,0 beats the 1,0,0 .slist-card--interactive:hover
 * rule above regardless of source order. Every possible hover-induced
 * surface (background, border, shadow, transform, glint) is neutralised
 * so the only visible feedback is the image zoom defined earlier.
 *
 * Without this, hovered merch cards show the glass-hover tint as a dark
 * rectangle around the garment — the very "box on hover" we keep chasing.
 */
.slist-card--product.slist-card--interactive,
.slist-card--product.slist-card--interactive:hover,
.slist-card--product.slist-card--interactive:focus-within {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}

.slist-card--product.slist-card--interactive::before,
.slist-card--product.slist-card--interactive::after,
.slist-card--product.slist-card--interactive:hover::before,
.slist-card--product.slist-card--interactive:hover::after,
.slist-card--product.slist-card--interactive:focus-within::before,
.slist-card--product.slist-card--interactive:focus-within::after {
	display: none !important;
	content: none !important;
	background: none !important;
	opacity: 0 !important;
}

/* ---- Footer — solid glass color (backdrop-filter below-fold = pure waste) ---- */

body .site-footer,
body .footer-widgets,
body .site-info {
	background: rgba(255, 255, 255, 0.03) !important;
	border-top: 1px solid var(--slist-glass-border);
	box-shadow: var(--slist-glass-inset-top);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

body .site-footer::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 15%;
	height: 100%;
	background: radial-gradient(
		ellipse at 0% 50%,
		var(--slist-glint-color) 0%,
		transparent 65%
	);
	opacity: calc(var(--slist-glint-opacity) * 0.7);
	pointer-events: none;
	mix-blend-mode: normal;
}

/* ---- WC notices — solid glass color, no backdrop-filter ---- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid var(--slist-glass-border) !important;
	border-left: 3px solid var(--slist-primary) !important;
	box-shadow: var(--slist-glass-inset-top);
}