/* Exhibit RSGDX plugin — custom-style.css — v13-plugin
   (adapted from the theme's v13: every previously bare/sitewide selector
   below is now scoped to #exhibitrsgdx-main and #exhibitrsgdx-announcement
   specifically. In the theme, this file owns the whole page, so a bare
   `*`/`body`/`h1` reset is correct. In this plugin, get_header()/
   get_footer() still render the live site's actual header/nav/footer
   around our content on this same page — an unscoped reset here would
   silently restyle that surrounding chrome too, not just our sections.) */

#exhibitrsgdx-main,
#exhibitrsgdx-announcement,
#exhibitrsgdx-main *,
#exhibitrsgdx-main *::before,
#exhibitrsgdx-main *::after,
#exhibitrsgdx-announcement *,
#exhibitrsgdx-announcement *::before,
#exhibitrsgdx-announcement *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Chrome/Safari/Edge — thin, primary-colored scrollbar. Left as a plain
   html-level rule intentionally: a scrollbar is a whole-page feature by
   nature, and applying it sitewide (matching the accent color used on
   our homepage) doesn't touch layout/spacing/typography anywhere, so
   there's no risk of it fighting Elementor the way the reset above
   would have. */
html {
	scroll-behavior: smooth;
	scrollbar-color: var(--exhibitrsgdx-color-primary) var(--exhibitrsgdx-color-surface);
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--exhibitrsgdx-color-surface);
}

::-webkit-scrollbar-thumb {
	background: var(--exhibitrsgdx-color-primary);
	border-radius: var(--exhibitrsgdx-radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--exhibitrsgdx-color-primary-hover);
}

#exhibitrsgdx-main {
	font-family: var(--exhibitrsgdx-font-sans);
	font-size: var(--exhibitrsgdx-text-base);
	line-height: 1.6;
	color: var(--exhibitrsgdx-color-text);
	background-color: var(--exhibitrsgdx-color-bg);
}

/* --- Full-bleed breakout ---
   The active theme (Astra) wraps page content in .ast-container, which
   has its own max-width. Since #exhibitrsgdx-main sits inside that
   container with no width of its own, it was just filling whatever
   width .ast-container allowed — meaning OUR --exhibitrsgdx-content-
   max-width (1400px) never actually applied; Astra's container width
   was the real limit. This breaks #exhibitrsgdx-main and the
   announcement bar out to the full viewport width regardless of
   whatever container the current theme wraps pages in, so our own
   inner __inner wrappers (max-width + margin:auto) are what actually
   controls visual width from here on, consistently regardless of theme. */
#exhibitrsgdx-main,
#exhibitrsgdx-announcement {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

#exhibitrsgdx-main h1,
#exhibitrsgdx-main h2,
#exhibitrsgdx-main h3,
#exhibitrsgdx-main h4,
#exhibitrsgdx-main h5,
#exhibitrsgdx-main h6 {
	font-weight: 600;
	line-height: 1.3;
	color: var(--exhibitrsgdx-color-text);
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-main h1 { font-size: var(--exhibitrsgdx-text-3xl); }

/* Reusable in any title anywhere — wrap a word/phrase to make it orange,
   e.g. Where <span class="exhibitrsgdx-text-accent">Ideas</span> Come Alive */
#exhibitrsgdx-main .exhibitrsgdx-text-accent {
	color: var(--exhibitrsgdx-color-primary);
}
#exhibitrsgdx-main h2 { font-size: var(--exhibitrsgdx-text-2xl); }
#exhibitrsgdx-main h3 { font-size: var(--exhibitrsgdx-text-xl); }
#exhibitrsgdx-main h4 { font-size: var(--exhibitrsgdx-text-lg); }
#exhibitrsgdx-main h5 { font-size: var(--exhibitrsgdx-text-md); }
#exhibitrsgdx-main h6 { font-size: var(--exhibitrsgdx-text-base); }

#exhibitrsgdx-main p {
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-main a,
#exhibitrsgdx-announcement a {
	color: var(--exhibitrsgdx-color-primary);
	text-decoration: none;
	transition: color var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-main a:hover,
#exhibitrsgdx-main a:focus,
#exhibitrsgdx-announcement a:hover,
#exhibitrsgdx-announcement a:focus {
	color: var(--exhibitrsgdx-color-primary-hover);
}

#exhibitrsgdx-main img {
	max-width: 100%;
	display: block;
}

#exhibitrsgdx-main button {
	font-family: inherit;
	cursor: pointer;
}

/* ==========================================================================
   ANNOUNCEMENT BAR
   Sits above the logo row, part of the header's normal flow (not a
   fixed/floating overlay) — settings at Exhibit Settings → Announcement.
   ========================================================================== */

#exhibitrsgdx-announcement {
	background: var(--exhibitrsgdx-color-primary);
	color: #fff;
	text-align: center;
	padding: 6px var(--exhibitrsgdx-space-4);
	font-size: var(--exhibitrsgdx-text-sm);
}

#exhibitrsgdx-announcement .exhibitrsgdx-announcement__inner p {
	margin: 0;
}

#exhibitrsgdx-announcement a {
	color: #fff;
	text-decoration: underline;
}

@media (max-width: 500px) {
	#exhibitrsgdx-announcement {
		font-size: 12px;
	}
}

/* ==========================================================================
   HEADER — single-row bar (v2)
   ========================================================================== */

/* Utility visibility helpers
   Scoped under #exhibitrsgdx-header so specificity (1,1,0) always beats
   .exhibitrsgdx-header__icon-btn (0,1,0) — a bare class-vs-class rule here
   would lose to icon-btn's own display:flex further down the cascade
   regardless of viewport, which is exactly the bug that let the mobile
   hamburger (and the desktop-only Account icon) render on the wrong
   breakpoint. See "Style and script touches" note above. */
#exhibitrsgdx-header .exhibitrsgdx-desktop-only { display: none; }
#exhibitrsgdx-header .exhibitrsgdx-mobile-only  { display: block; }

@media (min-width: 1025px) {
	#exhibitrsgdx-header .exhibitrsgdx-desktop-only { display: flex; }
	#exhibitrsgdx-header .exhibitrsgdx-mobile-only  { display: none; }
}

/* --- Base header wrapper --- */

.exhibitrsgdx-header {
	position: relative;
	z-index: 500;
}

/* --- Logo row --- */

.exhibitrsgdx-header__bar {
	background: var(--exhibitrsgdx-color-surface);
	border-bottom: 2px solid var(--exhibitrsgdx-color-primary);
	position: relative;
	z-index: 600;
	transition: box-shadow var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-header__bar.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	animation: exhibitrsgdx-bar-drop-in 0.3s ease;
}

.exhibitrsgdx-header__bar.is-stuck {
	box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

@keyframes exhibitrsgdx-bar-drop-in {
	from { transform: translateY(-100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.exhibitrsgdx-header__bar-inner {
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	gap: var(--exhibitrsgdx-space-6);
	padding: 0 var(--exhibitrsgdx-space-6);
	min-height: 64px;
}

/* Logo — alone on the left; everything else (nav + actions) clusters on the
   right via margin-left:auto on .exhibitrsgdx-header__nav below. */

.exhibitrsgdx-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	font-size: var(--exhibitrsgdx-text-xl);
	font-weight: 700;
	color: var(--exhibitrsgdx-color-text);
}

.exhibitrsgdx-header__logo a { color: inherit; }

.exhibitrsgdx-header__logo img {
	max-height: 40px;
	width: auto;
	transition: opacity var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-header__logo a:hover img { opacity: 0.85; }

/* Nav (desktop) */

.exhibitrsgdx-header__nav {
	/* Absorbs all the free space to its own left, pushing nav + the actions
	   that follow it into one flush cluster on the right — logo is the only
	   thing that stays pinned left. */
	margin-left: auto;
	display: flex;
	align-items: stretch;
	overflow: visible;
}

.exhibitrsgdx-header__nav-list {
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.exhibitrsgdx-header__nav-list > li {
	position: relative;
	display: flex;
	align-items: stretch;
}

.exhibitrsgdx-header__nav-list > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0 var(--exhibitrsgdx-space-4);
	color: var(--exhibitrsgdx-color-text);
	font-size: var(--exhibitrsgdx-text-sm);
	font-weight: 500;
	white-space: nowrap;
	letter-spacing: 0.02em;
	transition: color var(--exhibitrsgdx-transition), background var(--exhibitrsgdx-transition);
	position: relative;
}

/* Active state underline */
.exhibitrsgdx-header__nav-list > li > a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: var(--exhibitrsgdx-space-4);
	right: var(--exhibitrsgdx-space-4);
	height: 2px;
	background: var(--exhibitrsgdx-color-primary);
	transform: scaleX(0);
	transition: transform 0.25s ease;
	transform-origin: center;
}

.exhibitrsgdx-header__nav-list > li:hover > a::before,
.exhibitrsgdx-header__nav-list > li.current-menu-item > a::before,
.exhibitrsgdx-header__nav-list > li.current-menu-ancestor > a::before,
.exhibitrsgdx-header__nav-list > li.current_page_item > a::before {
	transform: scaleX(1);
}

/* First item / highlight pill */
.exhibitrsgdx-header__nav-list > li:first-child > a,
.exhibitrsgdx-header__nav-list > li.exhibitrsgdx-nav-highlight > a {
	background: var(--exhibitrsgdx-color-primary);
	color: #fff;
	padding: 0 var(--exhibitrsgdx-space-4);
}

.exhibitrsgdx-header__nav-list > li:first-child > a::before,
.exhibitrsgdx-header__nav-list > li.exhibitrsgdx-nav-highlight > a::before {
	display: none;
}

.exhibitrsgdx-header__nav-list > li:first-child > a:hover,
.exhibitrsgdx-header__nav-list > li.exhibitrsgdx-nav-highlight > a:hover {
	background: var(--exhibitrsgdx-color-primary-hover);
}

.exhibitrsgdx-header__nav-list > li:not(:first-child):not(.exhibitrsgdx-nav-highlight) > a:hover {
	color: var(--exhibitrsgdx-color-primary);
}

/* Dropdown caret */
.exhibitrsgdx-header__nav-list .menu-item-has-children > a::after {
	content: "\f0d7";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 10px;
	margin-left: 2px;
	transition: transform 0.2s ease;
}

.exhibitrsgdx-header__nav-list > li.menu-item-has-children:hover > a::after {
	transform: rotate(180deg);
}

/* Nested flyout caret */
.exhibitrsgdx-header__nav-list .sub-menu .menu-item-has-children > a::after {
	content: "\f0da";
	transform: none;
	margin-left: auto;
	padding-left: 12px;
}

/* --- Standard dropdown --- */

.exhibitrsgdx-header__nav-list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--exhibitrsgdx-color-surface);
	border: 1px solid var(--exhibitrsgdx-color-border-light);
	border-top: 2px solid var(--exhibitrsgdx-color-primary);
	box-shadow: 0 8px 24px rgba(0,0,0,0.45);
	list-style: none;
	margin: 0;
	padding: var(--exhibitrsgdx-space-2) 0;
	z-index: 700;
	/* smooth slide-down */
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	visibility: hidden;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

.exhibitrsgdx-header__nav-list > li:not(.has-image-children):hover > .sub-menu {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	visibility: visible;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
}

/* 3rd-level flyout */
.exhibitrsgdx-header__nav-list .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	border-top: 1px solid var(--exhibitrsgdx-color-border-light);
}

.exhibitrsgdx-header__nav-list .sub-menu li:hover > .sub-menu {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}

.exhibitrsgdx-header__nav-list .sub-menu li {
	position: relative;
}

.exhibitrsgdx-header__nav-list .sub-menu a {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 10px 16px;
	color: var(--exhibitrsgdx-color-text);
	font-size: var(--exhibitrsgdx-text-sm);
	font-weight: 400;
	white-space: nowrap;
	transition: background var(--exhibitrsgdx-transition), color var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-header__nav-list .sub-menu a:hover {
	background: var(--exhibitrsgdx-color-surface-high);
	color: var(--exhibitrsgdx-color-primary);
}

.exhibitrsgdx-header__nav-list .sub-menu .menu-item-has-children:hover > a {
	background: var(--exhibitrsgdx-color-primary);
	color: #fff;
}

/* --- Mega menu (full-width image grid) ---
   Container is [tiles grid] or [tiles grid][parent image] — TWO independent
   regions in a flex row, never one shared grid. Earlier versions put the
   tiles AND the injected parent image into the same CSS Grid (an extra
   "auto" column on the shared grid); grid auto-placement would sometimes
   drop a regular tile into that column instead of the image, and that
   tile's own width:100% breaks against an auto-sized column (undefined/
   circular sizing), falling back to the source photo's full intrinsic
   size — that was the "grid broken" bug. Splitting the two regions with
   flex removes the shared-track problem entirely: the tiles grid
   (.exhibitrsgdx-mega-tiles, built by JS into a nested wrapper <li>) owns
   its own grid, and the parent image is just a flex sibling beside it. */

/* Pull the mega submenu out to the full bar width by anchoring to the bar
   (.exhibitrsgdx-header__bar) via position:static on the parent <li>.
   The bar has position:relative, so absolute children go relative to it. */
.exhibitrsgdx-header__nav-list > li.has-image-children {
	position: static;
}

.exhibitrsgdx-header__nav-list > li.has-image-children > .sub-menu {
	/* Full bar width, centered content via max() padding */
	left: 0;
	right: 0;
	min-width: 0;
	width: 100%;
	display: flex;
	align-items: stretch;
	gap: var(--exhibitrsgdx-space-5);
	padding: var(--exhibitrsgdx-space-5) max(var(--exhibitrsgdx-space-6), calc((100% - var(--exhibitrsgdx-content-max-width)) / 2 + var(--exhibitrsgdx-space-6)));
	/* Hard ceiling on the row's own height — align-items:stretch means the
	   parent image (height:100%) inherits whatever height this row ends up
	   with, so if real tile content (longer titles/subtitles than tested
	   locally) pushes the grid taller than expected, the parent image grows
	   right along with it uncapped. This caps the row itself so neither side
	   can blow out regardless of content. */
	/* Raised from 420px — that was choking off the mega menu's whole point
	   of being "mega" with lots of tiles visible at once. overflow-y:auto
	   is what actually protects against pathological content; this ceiling
	   just needs to be generous rather than tight. */
	max-height: 80vh;
	overflow-y: auto;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-8px);
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.exhibitrsgdx-header__nav-list > li.has-image-children:hover > .sub-menu {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	visibility: visible;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

/* Tiles region — always present, JS wraps the rendered tile <li>s into this
   nested grid regardless of whether a parent image exists. */
.exhibitrsgdx-mega-tiles-wrap {
	display: block;
	position: static;
	flex: 1;
	min-width: 0;
}

/* Columns were `repeat(N, 1fr)` — N equal columns forced to fill the FULL
   row width regardless of how many tiles there are or how wide their
   (300px-capped) images actually are. With few columns (e.g. 3) each
   column was much wider than 300px, so the centered image left a large
   empty gap on either side — that's the "very large spaces" bug. With more
   columns (e.g. 4) the gap shrank but the images still stretched close to
   the column's full share of the row, reading as "still too wide" even
   though the grid math was "working as designed."
   Fix: cap each column at the same 300px the images themselves are capped
   at (`minmax(0, 300px)` instead of `1fr`), so columns size to the content
   instead of the content being forced to fill an oversized column. If the
   resulting grid is narrower than the row (fewer/smaller tiles), `justify-
   content: center` centers the whole tile block instead of stretching
   it — this is what actually fixes both the 3-column and 4-column cases,
   the individual image's own max-width/centering from before stays as a
   secondary safeguard but isn't doing the heavy lifting anymore. */
.exhibitrsgdx-mega-tiles {
	display: grid;
	grid-template-columns: repeat(var(--mega-cols, 4), minmax(0, 300px));
	justify-content: center;
	gap: var(--exhibitrsgdx-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.exhibitrsgdx-mega-tiles > li {
	display: block;
	position: static;
}

.exhibitrsgdx-mega-tiles > li > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	padding: 0;
	white-space: normal;
	font-weight: 700;
	font-size: var(--exhibitrsgdx-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background: none !important;
}

.exhibitrsgdx-mega-tiles > li > a:hover {
	background: none !important;
	color: var(--exhibitrsgdx-color-primary);
}

/* Hide dropdown caret on mega tile items that have children — they expand inline */
.exhibitrsgdx-mega-tiles > li.menu-item-has-children > a::after {
	display: none;
}

/* Inline sub-links below a tile (e.g. COUNTER → sub-links) */
.exhibitrsgdx-mega-tiles > li > .sub-menu {
	position: static !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	background: none;
	border: none;
	box-shadow: none;
	padding: var(--exhibitrsgdx-space-2) 0 0;
	display: block !important;
	min-width: 0;
	width: 100%;
	grid-template-columns: none;
}

.exhibitrsgdx-mega-tiles > li > .sub-menu > li {
	display: block;
	position: static;
}

.exhibitrsgdx-mega-tiles > li > .sub-menu a {
	display: block;
	padding: 5px 0;
	font-size: var(--exhibitrsgdx-text-xs);
	font-weight: 400;
	color: var(--exhibitrsgdx-color-text-muted);
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
	background: none !important;
	transition: color var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-mega-tiles > li > .sub-menu a:hover {
	color: var(--exhibitrsgdx-color-primary);
	background: none !important;
}

/* Scoped under #exhibitrsgdx-header the same way the search input/submit and
   desktop/mobile-only rules already are — a bare class here is (0,1,0)
   specificity, one point below WooCommerce's own ".woocommerce img,
   .woocommerce-page img" rule (class + element = (0,1,1)), so WC's own
   max-width:100% was winning regardless of what we set here, letting some
   tile images render wider than our 300px cap. #id + class = (1,1,0) beats
   it outright. margin-left/right:auto centers the image once its rendered
   width is capped below the grid column's full width — flex auto-margins
   center a flex item even with an explicit width set, unlike align-items
   (which only affects auto-sized items) — this is what closes up the
   unsightly gap the un-centered smaller image was leaving. */
#exhibitrsgdx-header .exhibitrsgdx-menu-item-image {
	width: 100%;
	max-width: 300px;
	aspect-ratio: 4/3;
	object-fit: cover;
	margin-bottom: var(--exhibitrsgdx-space-2);
	margin-left: auto;
	margin-right: auto;
	transition: transform var(--exhibitrsgdx-transition), opacity var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-mega-tiles > li > a:hover .exhibitrsgdx-menu-item-image {
	transform: scale(0.97);
	opacity: 0.9;
}

.exhibitrsgdx-menu-item-subtitle {
	display: block;
	font-size: var(--exhibitrsgdx-text-xs);
	font-weight: 400;
	color: var(--exhibitrsgdx-color-text-subtle);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-top: 2px;
	max-width: 80%;
}

/* Parent image — flex sibling beside the tiles grid, injected by JS only
   when the top-level item itself has an Image URL set. align-items:stretch
   on the .sub-menu flex container (above) already gives this <li> a height
   matching the tiles region's own content height, no circular sizing —
   the img then fills that box at height:100% so its size always follows
   the grid, instead of a fixed crop unrelated to the tile row. */
.exhibitrsgdx-mega-parent-img {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding-left: var(--exhibitrsgdx-space-5);
	border-left: 1px solid var(--exhibitrsgdx-color-border);
}

/* `li.exhibitrsgdx-mega-parent-img img` (element + class ancestor, per
   Ryner's own live-side fix) — bumps this past the same class-vs-
   class+element specificity gap as the other rules in this file, so the
   parent image's own width rules reliably apply. Kept in sync here so this
   source file matches what's actually live. */
li.exhibitrsgdx-mega-parent-img img {
	width: auto;
	max-width: 260px;
	height: 100%;
	/* Raised alongside the row's max-height above — stays a genuine ceiling
	   (not just cosmetic), so pathologically tall tile content still can't
	   drag this past a sane size before the row's own overflow-y:auto takes
	   over. */
	max-height: 600px;
	object-fit: cover;
	display: block;
}

/* --- Actions (phone + icons) --- */

.exhibitrsgdx-header__actions {
	/* No margin-left:auto here — .exhibitrsgdx-header__nav already absorbs
	   the free space, so actions just sits flush after it. */
	display: flex;
	align-items: center;
	gap: var(--exhibitrsgdx-space-2);
	flex-shrink: 0;
}

/* Phone — now the rightmost action (reference site's language-selector slot),
   so the divider moved from the trailing to the leading edge. */
.exhibitrsgdx-header__phone {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--exhibitrsgdx-color-primary);
	font-size: var(--exhibitrsgdx-text-sm);
	font-weight: 500;
	white-space: nowrap;
	padding: 0 var(--exhibitrsgdx-space-3);
	border-left: 1px solid var(--exhibitrsgdx-color-border);
	margin-left: var(--exhibitrsgdx-space-2);
	transition: color var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-header__phone:hover { color: var(--exhibitrsgdx-color-primary-hover); }
.exhibitrsgdx-header__phone i     { font-size: 13px; }

/* Icon buttons (search / account / cart / hamburger) */
.exhibitrsgdx-header__icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: none;
	border: none;
	color: var(--exhibitrsgdx-color-text);
	font-size: 18px;
	cursor: pointer;
	padding: 0;
	border-radius: var(--exhibitrsgdx-radius-md);
	transition: color var(--exhibitrsgdx-transition), background var(--exhibitrsgdx-transition);
	position: relative;
}

.exhibitrsgdx-header__icon-btn:hover {
	color: var(--exhibitrsgdx-color-primary);
}

/* Cart count badge */
.exhibitrsgdx-cart {
	position: relative;
	display: flex;
	align-items: center;
}

.exhibitrsgdx-cart__toggle {
	position: relative;
}

.exhibitrsgdx-cart__count {
	position: absolute;
	top: 3px;
	right: 3px;
	background: var(--exhibitrsgdx-color-primary);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	border-radius: var(--exhibitrsgdx-radius-full);
	padding: 2px 5px;
	min-width: 15px;
	text-align: center;
	pointer-events: none;
}

/* ==========================================================================
   SEARCH BAR — slides down from below the header bar
   ========================================================================== */

.exhibitrsgdx-search-bar {
	background: var(--exhibitrsgdx-color-surface-alt);
	border-bottom: 1px solid var(--exhibitrsgdx-color-border);
	overflow: hidden;
	/* slide-down: max-height 0 → 80px */
	max-height: 0;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.3s ease;
}

.exhibitrsgdx-search-bar.is-open {
	max-height: 80px;
	opacity: 1;
}

.exhibitrsgdx-search-bar__inner {
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--exhibitrsgdx-space-3);
	padding: var(--exhibitrsgdx-space-3) var(--exhibitrsgdx-space-6);
}

.exhibitrsgdx-search-form {
	display: flex;
	flex: 1;
}

/* Scoped under #exhibitrsgdx-search-bar + the "input" element, same as the
   submit button below. A BARE class alone (.exhibitrsgdx-search-form__input)
   is NOT enough here — Astra sets height on `input[type="search"]`, which is
   one element + one attribute selector ((0,1,1) specificity); a bare class
   is only (0,1,0) — one element short, so Astra's rule was winning even
   though it looked like a lower-effort selector. #id + element + class beats
   it outright ((1,1,1) vs (0,1,1), id always wins regardless of the rest). */
#exhibitrsgdx-search-bar input.exhibitrsgdx-search-form__input {
	flex: 1;
	height: 48px;
	box-sizing: border-box;
	background: var(--exhibitrsgdx-color-surface-high);
	border: 1px solid var(--exhibitrsgdx-color-border-light);
	border-right: none;
	border-radius: 0;
	color: var(--exhibitrsgdx-color-text);
	padding: 0 14px;
	font-size: var(--exhibitrsgdx-text-sm);
	font-family: var(--exhibitrsgdx-font-sans);
	transition: border-color var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-search-bar input.exhibitrsgdx-search-form__input::placeholder {
	color: var(--exhibitrsgdx-color-text-subtle);
}

#exhibitrsgdx-search-bar input.exhibitrsgdx-search-form__input:focus {
	outline: none;
	border-color: var(--exhibitrsgdx-color-primary);
}

/* Scoped under #exhibitrsgdx-search-bar + hard resets — Astra ships a global
   button/border-radius rule that beats a bare .exhibitrsgdx-search-form__submit
   class at equal specificity, which is what was rounding this into a pill.
   height is an explicit 48px to match the input exactly (rather than
   height:100% against a flex-stretch parent) so the two visually merge into
   one bar regardless of font-metric rounding differences across browsers. */
#exhibitrsgdx-search-bar .exhibitrsgdx-search-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--exhibitrsgdx-color-primary);
	border: 1px solid var(--exhibitrsgdx-color-primary);
	border-radius: 0;
	color: #fff;
	width: 48px;
	height: 48px;
	box-sizing: border-box;
	line-height: 1;
	flex-shrink: 0;
	cursor: pointer;
	transition: background var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-search-bar .exhibitrsgdx-search-form__submit:hover {
	background: var(--exhibitrsgdx-color-primary-hover);
}

.exhibitrsgdx-search-bar__close {
	background: none;
	border: none;
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: 20px;
	cursor: pointer;
	padding: 4px;
	flex-shrink: 0;
	transition: color var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-search-bar__close:hover { color: var(--exhibitrsgdx-color-primary); }

/* ==========================================================================
   CART DRAWER — slide in from right
   IMPORTANT: .exhibitrsgdx-cart__panel's markup must stay OUTSIDE </header>
   (a sibling in header.php, same as the mobile panel and login modal).
   #exhibitrsgdx-header establishes its own stacking context (position:
   relative + z-index), so anything nested inside it — no matter how high
   its own z-index climbs — is capped at the header's z-index (500) when
   compared against elements outside the header, like this overlay (900).
   That's what let the overlay render on top of the cart panel when the
   panel used to live inside .exhibitrsgdx-header__actions. Don't move the
   panel back inside <header> without re-solving this.
   ========================================================================== */

.exhibitrsgdx-cart__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.55);
	z-index: 900;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.exhibitrsgdx-cart__overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.exhibitrsgdx-cart__panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 500px;
	max-width: 92vw;
	height: 100dvh;
	background: var(--exhibitrsgdx-color-surface);
	box-shadow: -4px 0 32px rgba(0,0,0,0.5);
	z-index: 901;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow: hidden;
}

.exhibitrsgdx-cart__panel.is-open {
	transform: translateX(0);
}

.exhibitrsgdx-cart__panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--exhibitrsgdx-space-4) var(--exhibitrsgdx-space-5);
	border-bottom: 1px solid var(--exhibitrsgdx-color-border-light);
	flex-shrink: 0;
}

.exhibitrsgdx-cart__panel-title {
	font-size: var(--exhibitrsgdx-text-sm);
	font-weight: 700;
	color: var(--exhibitrsgdx-color-text);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}

.exhibitrsgdx-cart__panel-count {
	color: var(--exhibitrsgdx-color-text-muted);
	font-weight: 400;
}

.exhibitrsgdx-cart__panel-close {
	background: none;
	border: none;
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: var(--exhibitrsgdx-text-lg);
	cursor: pointer;
	padding: 4px;
	line-height: 1;
	transition: color 0.2s;
}

.exhibitrsgdx-cart__panel-close:hover { color: var(--exhibitrsgdx-color-primary); }

.exhibitrsgdx-cart__panel-body {
	flex: 1;
	overflow-y: auto;
	padding: var(--exhibitrsgdx-space-5);
	/* Extra bottom clearance — the storefront chat launcher floats fixed at
	   bottom:24px (~48px tall, z-index 999998 — see custom-storefront-chat.css),
	   which sits ABOVE this panel's z-index regardless of scroll position. This
	   padding just keeps the panel's own content (last item, checkout buttons)
	   from ever needing to render underneath it. */
	padding-bottom: calc(var(--exhibitrsgdx-space-5) + 90px);
}

/* Empty bag state */
.exhibitrsgdx-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--exhibitrsgdx-space-4);
	padding-top: var(--exhibitrsgdx-space-3);
}

.exhibitrsgdx-cart__empty-msg {
	font-size: var(--exhibitrsgdx-text-sm);
	color: var(--exhibitrsgdx-color-text-muted);
	margin: 0;
}

/* Suppress Astra's duplicate empty-cart message */
.exhibitrsgdx-header-active .ast-mini-cart-empty {
	display: none !important;
}

/* Full-width login button inside cart panel */
.exhibitrsgdx-btn--full {
	width: 100%;
	text-align: center;
	display: block;
	padding: 14px var(--exhibitrsgdx-space-5);
	background: #111;
	color: #fff;
	border: none;
	font-family: var(--exhibitrsgdx-font-sans);
	font-weight: 700;
	font-size: var(--exhibitrsgdx-text-sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-btn--full:hover { background: var(--exhibitrsgdx-color-primary); }

/* ==========================================================================
   ACCOUNT DROPDOWN
   ========================================================================== */

.exhibitrsgdx-account {
	position: relative;
}

.exhibitrsgdx-account__dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 200px;
	background: var(--exhibitrsgdx-color-surface);
	border: 1px solid var(--exhibitrsgdx-color-border);
	box-shadow: 0 12px 32px rgba(0,0,0,0.35);
	padding: var(--exhibitrsgdx-space-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 950;
}

.exhibitrsgdx-account__dropdown.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.exhibitrsgdx-account__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px var(--exhibitrsgdx-space-3);
	font-family: var(--exhibitrsgdx-font-sans);
	font-size: var(--exhibitrsgdx-text-sm);
	color: var(--exhibitrsgdx-color-text);
	background: none;
	border: none;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--exhibitrsgdx-transition), color var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-account__item i {
	width: 16px;
	color: var(--exhibitrsgdx-color-text-muted);
	flex-shrink: 0;
}

.exhibitrsgdx-account__item:hover {
	background: var(--exhibitrsgdx-color-surface-alt);
	color: var(--exhibitrsgdx-color-primary);
}

.exhibitrsgdx-account__item:hover i {
	color: var(--exhibitrsgdx-color-primary);
}

/* ==========================================================================
   LOGIN MODAL
   ========================================================================== */

.exhibitrsgdx-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	align-items: center;
	justify-content: center;
}

.exhibitrsgdx-modal.is-open {
	display: flex;
}

.exhibitrsgdx-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.6);
}

.exhibitrsgdx-modal__dialog {
	position: relative;
	background: var(--exhibitrsgdx-color-surface);
	width: 100%;
	max-width: 420px;
	margin: var(--exhibitrsgdx-space-5);
	box-shadow: 0 20px 60px rgba(0,0,0,0.6);
	animation: exhibitrsgdx-modal-in 0.25s ease;
}

@keyframes exhibitrsgdx-modal-in {
	from { opacity: 0; transform: translateY(-16px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.exhibitrsgdx-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--exhibitrsgdx-space-4) var(--exhibitrsgdx-space-5);
	border-bottom: 1px solid var(--exhibitrsgdx-color-border);
}

.exhibitrsgdx-modal__title {
	font-size: var(--exhibitrsgdx-text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--exhibitrsgdx-color-text);
}

.exhibitrsgdx-modal__close {
	background: none;
	border: none;
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: 18px;
	cursor: pointer;
	padding: 4px;
	transition: color 0.2s;
}

.exhibitrsgdx-modal__close:hover { color: var(--exhibitrsgdx-color-primary); }

.exhibitrsgdx-modal__body {
	padding: var(--exhibitrsgdx-space-5);
}

/* Sign In / Register tabs — same rules drive both, JS just toggles
   is-active on the buttons + the matching .exhibitrsgdx-auth-panel. */
.exhibitrsgdx-auth-tabs {
	display: flex;
	border-bottom: 1px solid var(--exhibitrsgdx-color-border);
	margin-bottom: var(--exhibitrsgdx-space-4);
}

.exhibitrsgdx-auth-tabs__btn {
	flex: 1;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: var(--exhibitrsgdx-space-3) 0;
	font-family: var(--exhibitrsgdx-font-sans);
	font-size: var(--exhibitrsgdx-text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--exhibitrsgdx-color-text-muted);
	cursor: pointer;
	transition: color var(--exhibitrsgdx-transition), border-color var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-auth-tabs__btn:hover {
	color: var(--exhibitrsgdx-color-text);
}

.exhibitrsgdx-auth-tabs__btn.is-active {
	color: var(--exhibitrsgdx-color-primary);
	border-bottom-color: var(--exhibitrsgdx-color-primary);
}

.exhibitrsgdx-auth-panel {
	display: none;
}

.exhibitrsgdx-auth-panel.is-active {
	display: block;
}

.exhibitrsgdx-auth-form__error {
	background: rgba(211, 51, 51, 0.08);
	border: 1px solid var(--exhibitrsgdx-color-error);
	color: var(--exhibitrsgdx-color-error);
	font-size: var(--exhibitrsgdx-text-xs);
	padding: var(--exhibitrsgdx-space-3);
	margin: 0 0 var(--exhibitrsgdx-space-4);
}

/* Login form (wp_login_form) + Register form share the same field look */
#exhibitrsgdx-wp-login-form p,
#exhibitrsgdx-register-form p {
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-wp-login-form label,
#exhibitrsgdx-register-form label {
	display: block;
	font-size: var(--exhibitrsgdx-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--exhibitrsgdx-color-text-muted);
	margin-bottom: 6px;
}

#exhibitrsgdx-wp-login-form input[type="text"],
#exhibitrsgdx-wp-login-form input[type="password"],
#exhibitrsgdx-register-form input[type="email"],
#exhibitrsgdx-register-form input[type="password"] {
	width: 100%;
	background: var(--exhibitrsgdx-color-surface-high);
	border: 1px solid var(--exhibitrsgdx-color-border-light);
	color: var(--exhibitrsgdx-color-text);
	padding: 10px 14px;
	font-size: var(--exhibitrsgdx-text-sm);
	font-family: var(--exhibitrsgdx-font-sans);
	box-sizing: border-box;
	transition: border-color var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-wp-login-form input[type="text"]:focus,
#exhibitrsgdx-wp-login-form input[type="password"]:focus,
#exhibitrsgdx-register-form input[type="email"]:focus,
#exhibitrsgdx-register-form input[type="password"]:focus {
	outline: none;
	border-color: var(--exhibitrsgdx-color-primary);
}

#exhibitrsgdx-wp-login-form input[type="checkbox"] {
	accent-color: var(--exhibitrsgdx-color-primary);
	margin-right: 6px;
}

#exhibitrsgdx-wp-login-form .forgetmenot {
	display: flex;
	align-items: center;
	font-size: var(--exhibitrsgdx-text-xs);
	color: var(--exhibitrsgdx-color-text-muted);
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-login-submit,
#exhibitrsgdx-register-submit {
	width: 100%;
	background: var(--exhibitrsgdx-color-primary);
	border: none;
	color: #fff;
	padding: 13px;
	font-family: var(--exhibitrsgdx-font-sans);
	font-weight: 700;
	font-size: var(--exhibitrsgdx-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-login-submit:hover,
#exhibitrsgdx-register-submit:hover { background: var(--exhibitrsgdx-color-primary-hover); }

#exhibitrsgdx-login-submit:disabled,
#exhibitrsgdx-register-submit:disabled {
	opacity: 0.7;
	cursor: default;
}

.exhibitrsgdx-modal__links {
	margin-top: var(--exhibitrsgdx-space-4);
	text-align: center;
	font-size: var(--exhibitrsgdx-text-xs);
}

.exhibitrsgdx-modal__links a {
	color: var(--exhibitrsgdx-color-text-muted);
	transition: color var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-modal__links a:hover { color: var(--exhibitrsgdx-color-primary); }

/* ==========================================================================
   MOBILE PANEL — slides in from left
   ========================================================================== */

.exhibitrsgdx-mobile-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.55);
	z-index: 800;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.exhibitrsgdx-mobile-overlay.is-open {
	display: block;
	opacity: 1;
}

.exhibitrsgdx-mobile-panel {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 90vw;
	height: 100dvh;
	background: var(--exhibitrsgdx-color-surface);
	box-shadow: 4px 0 32px rgba(0,0,0,0.5);
	z-index: 850;
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
	overflow: hidden;
}

.exhibitrsgdx-mobile-panel.is-open {
	transform: translateX(0);
}

.exhibitrsgdx-mobile-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--exhibitrsgdx-space-4) var(--exhibitrsgdx-space-5);
	border-bottom: 1px solid var(--exhibitrsgdx-color-border);
	flex-shrink: 0;
}

.exhibitrsgdx-mobile-panel__header img {
	max-height: 34px;
	width: auto;
}

.exhibitrsgdx-mobile-panel__close {
	background: none;
	border: none;
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: 20px;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
	transition: color 0.2s;
}

.exhibitrsgdx-mobile-panel__close:hover { color: var(--exhibitrsgdx-color-primary); }

.exhibitrsgdx-mobile-panel__body {
	flex: 1;
	overflow-y: auto;
}

/* Mobile nav list */
.exhibitrsgdx-mobile-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.exhibitrsgdx-mobile-nav-list > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px var(--exhibitrsgdx-space-5);
	color: var(--exhibitrsgdx-color-text);
	font-size: var(--exhibitrsgdx-text-sm);
	font-weight: 500;
	border-bottom: 1px solid var(--exhibitrsgdx-color-border);
	transition: color var(--exhibitrsgdx-transition), background var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-mobile-nav-list > li > a:hover {
	background: var(--exhibitrsgdx-color-surface-high);
	color: var(--exhibitrsgdx-color-primary);
}

/* Caret for items with children */
.exhibitrsgdx-mobile-nav-list .menu-item-has-children > a::after {
	content: "\f054";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 11px;
	transition: transform 0.22s ease;
}

.exhibitrsgdx-mobile-nav-list .menu-item-has-children.is-open > a::after {
	transform: rotate(90deg);
}

/* Mobile submenus */
.exhibitrsgdx-mobile-nav-list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--exhibitrsgdx-color-bg);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.exhibitrsgdx-mobile-nav-list .menu-item-has-children.is-open > .sub-menu {
	/* Large enough that any real menu fits */
	max-height: 1000px;
}

.exhibitrsgdx-mobile-nav-list .sub-menu a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
	padding: 12px var(--exhibitrsgdx-space-4) 12px var(--exhibitrsgdx-space-4);
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: var(--exhibitrsgdx-text-sm);
	border-bottom: 1px solid var(--exhibitrsgdx-color-border);
	transition: color var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-mobile-nav-list .sub-menu a:hover { color: var(--exhibitrsgdx-color-primary); }

/* Small icon before the title + subtext wrapped onto its own line below —
   same source data as the desktop mega tiles (image + subtext from
   nav-menu-image.php), different layout for a narrow accordion row.
   flex-basis:100% on the subtitle is what forces it onto a new line inside
   the flex-wrap row above, no markup change needed. */
#exhibitrsgdx-mobile-panel .exhibitrsgdx-menu-item-image {
	width: 28px;
	height: 28px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--exhibitrsgdx-radius-md);
	flex-shrink: 0;
	margin-bottom: 0;
}

#exhibitrsgdx-mobile-panel .exhibitrsgdx-menu-item-subtitle {
	flex-basis: 100%;
	margin-left: 38px; /* icon width (28px) + column-gap (10px) — aligns under the title, not the icon */
}

.exhibitrsgdx-mobile-panel__footer {
	padding: var(--exhibitrsgdx-space-4) var(--exhibitrsgdx-space-5);
	border-top: 1px solid var(--exhibitrsgdx-color-border);
	flex-shrink: 0;
}

.exhibitrsgdx-mobile-panel__phone {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--exhibitrsgdx-color-primary);
	font-size: var(--exhibitrsgdx-text-sm);
	font-weight: 600;
}

/* ==========================================================================
   RESPONSIVE — header bar on small screens
   ========================================================================== */

@media (max-width: 1024px) {
	.exhibitrsgdx-header__bar-inner {
		padding: 0 var(--exhibitrsgdx-space-4);
		min-height: 56px;
	}

	/* Nav is hidden on mobile — it lives in the mobile panel */
	.exhibitrsgdx-header__nav { display: none; }

	.exhibitrsgdx-header__logo {
		margin-right: auto;
	}

	.exhibitrsgdx-header__actions {
		margin-left: 0;
		gap: var(--exhibitrsgdx-space-1);
	}
}


/* ==========================================================================
   BUTTONS — global utility classes
   Radius, padding, and hover behavior are all defined once here rather
   than per-component, so every button site-wide stays consistent.
   ========================================================================== */

#exhibitrsgdx-main .exhibitrsgdx-btn {
	display: inline-block;
	font-family: var(--exhibitrsgdx-font-sans);
	font-weight: 700;
	font-size: 12px;
	padding: 6px 20px;
	border-radius: var(--exhibitrsgdx-radius-button);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--exhibitrsgdx-transition), color var(--exhibitrsgdx-transition), border-color var(--exhibitrsgdx-transition);
}

/* Smaller variant — use inside cards/grids (product cards, etc.) */
#exhibitrsgdx-main .exhibitrsgdx-btn--sm {
	padding: 6px 14px;
	font-size: var(--exhibitrsgdx-text-xs);
}

/* Primary — orange fill, inverts to black on hover with an orange border */
#exhibitrsgdx-main .exhibitrsgdx-btn--primary {
	background: var(--exhibitrsgdx-btn-color, var(--exhibitrsgdx-color-primary));
	color: #fff;
	border-color: var(--exhibitrsgdx-btn-color, var(--exhibitrsgdx-color-primary));
}

#exhibitrsgdx-main .exhibitrsgdx-btn--primary:hover {
	background: #000;
	color: #fff;
	border-color: var(--exhibitrsgdx-btn-color, var(--exhibitrsgdx-color-primary));
}

/* Secondary — outline style, same invert-to-black hover behavior */
#exhibitrsgdx-main .exhibitrsgdx-btn--secondary {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

#exhibitrsgdx-main .exhibitrsgdx-btn--secondary:hover {
	background: #000;
	color: #fff;
	border-color: #fff;
}

/* ==========================================================================
   FEATURES GRID
   Icon + title + subtext cards — currently used on the homepage (content
   comes from that page's own post meta) but the pattern itself is
   generic enough to reuse elsewhere later.
   ========================================================================== */

#exhibitrsgdx-main .exhibitrsgdx-features {
	padding: 60px 0;
}

#exhibitrsgdx-main .exhibitrsgdx-features__inner {
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	padding: 0 var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-main .exhibitrsgdx-features__header {
	text-align: center;
	margin: 0 auto var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-main .exhibitrsgdx-features__title {
	font-size: var(--exhibitrsgdx-text-2xl);
	margin-bottom: var(--exhibitrsgdx-space-3);
}

#exhibitrsgdx-main .exhibitrsgdx-features__description {
	color: var(--exhibitrsgdx-color-text-muted);
	margin-bottom: 0;
}

#exhibitrsgdx-main .exhibitrsgdx-features__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--exhibitrsgdx-space-5);
}

#exhibitrsgdx-main .exhibitrsgdx-features__card {
	background: var(--exhibitrsgdx-color-surface);
	border: 1px solid var(--exhibitrsgdx-color-border);
	padding: var(--exhibitrsgdx-space-5);
	text-align: center;
	transition: transform var(--exhibitrsgdx-transition), border-color var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-main .exhibitrsgdx-features__card:hover {
	transform: translateY(-4px);
	border-color: var(--exhibitrsgdx-color-primary);
}

#exhibitrsgdx-main .exhibitrsgdx-features__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--exhibitrsgdx-color-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	margin: 0 auto var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-main .exhibitrsgdx-features__card-title {
	font-size: var(--exhibitrsgdx-text-md);
	margin-bottom: var(--exhibitrsgdx-space-2);
}

#exhibitrsgdx-main .exhibitrsgdx-features__card-subtext {
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: var(--exhibitrsgdx-text-sm);
	margin-bottom: 0;
}

@media (max-width: 1200px) {
#exhibitrsgdx-main .exhibitrsgdx-features__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
#exhibitrsgdx-main .exhibitrsgdx-features__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   BRAND SINGLE / ARCHIVE — landing pages for the "brands" post type
   ========================================================================== */

#exhibitrsgdx-main .exhibitrsgdx-brand-single__hero {
	position: relative;
}

#exhibitrsgdx-main .exhibitrsgdx-brand-single__hero-image img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
}

#exhibitrsgdx-main .exhibitrsgdx-brand-single__hero-text {
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	padding: var(--exhibitrsgdx-space-5) var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-single__category {
	color: var(--exhibitrsgdx-color-primary);
	font-size: var(--exhibitrsgdx-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--exhibitrsgdx-space-2);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-single__title {
	font-size: var(--exhibitrsgdx-text-3xl);
	margin-bottom: 0;
}

#exhibitrsgdx-main .exhibitrsgdx-brand-single__content {
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	padding: var(--exhibitrsgdx-space-5) var(--exhibitrsgdx-space-6) var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--exhibitrsgdx-space-5);
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	padding: 0 var(--exhibitrsgdx-space-6) var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-archive__card {
	display: block;
	background: var(--exhibitrsgdx-color-surface);
	border: 1px solid var(--exhibitrsgdx-color-border);
	overflow: hidden;
	transition: border-color var(--exhibitrsgdx-transition), transform var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-archive__card:hover {
	border-color: var(--exhibitrsgdx-color-primary);
	transform: translateY(-4px);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-archive__card-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

#exhibitrsgdx-main .exhibitrsgdx-brand-archive__card-body {
	padding: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-archive__card-category {
	color: var(--exhibitrsgdx-color-primary);
	font-size: var(--exhibitrsgdx-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--exhibitrsgdx-space-2);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-archive__card-title {
	color: var(--exhibitrsgdx-color-text);
	margin-bottom: 0;
}

@media (max-width: 1200px) {
#exhibitrsgdx-main .exhibitrsgdx-brand-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
#exhibitrsgdx-main .exhibitrsgdx-brand-archive__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
#exhibitrsgdx-main .exhibitrsgdx-features {
		padding: var(--exhibitrsgdx-space-6) 0;
	}
}
/* ==========================================================================
   FOOTER
   Column 1 (brand) + any number of link columns (Settings -> Footer, a
   flexible repeater) + Artwork Submission column, then a copyright/socials
   row below. Flexbox with wrap rather than a fixed-count grid, since the
   number of link columns is settings-driven and can change.

   Every selector below is prefixed with #exhibitrsgdx-footer (an ID,
   matching the id="exhibitrsgdx-footer" already on the <footer> element)
   rather than relying on the class alone. This isn't about load order --
   the old rsgdx plugin's CSS uses selectors like `body.rsgdx-active h3`,
   which has higher specificity (1 class + 2 elements) than a bare class
   selector like `.exhibitrsgdx-footer__col-title` (1 class) ever could,
   regardless of which stylesheet loads last. An ID always outranks any
   number of classes/elements in CSS specificity, so this wins outright.
   ========================================================================== */

#exhibitrsgdx-footer {
	background: var(--exhibitrsgdx-color-bg);
	border-top: 1px solid var(--exhibitrsgdx-color-border);
	padding: var(--exhibitrsgdx-space-6) 0 var(--exhibitrsgdx-space-5);
	/* Same breakout as #exhibitrsgdx-main — harmless no-op if this is
	   already outside Astra's .ast-container by the time wp_footer()
	   fires, but safe to include either way. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__inner {
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	padding: 0 var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--exhibitrsgdx-space-6);
	padding-bottom: var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__col--brand {
	flex: 1 1 260px;
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__col--link {
	flex: 1 1 160px;
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__col--artwork {
	flex: 1 1 240px;
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__logo img {
	max-height: 40px;
	width: auto;
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__logo--text {
	color: var(--exhibitrsgdx-color-text);
	font-size: var(--exhibitrsgdx-text-lg);
	font-weight: 700;
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__desc,
#exhibitrsgdx-footer .exhibitrsgdx-footer__address {
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: var(--exhibitrsgdx-text-sm);
	margin-bottom: var(--exhibitrsgdx-space-3);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__col-title {
	color: var(--exhibitrsgdx-color-text);
	font-size: var(--exhibitrsgdx-text-md);
	font-weight: 700;
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__col-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--exhibitrsgdx-space-3);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__col-list a {
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: var(--exhibitrsgdx-text-sm);
	text-decoration: none;
	transition: color var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__col-list a:hover {
	color: var(--exhibitrsgdx-color-primary);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__artwork-desc {
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: var(--exhibitrsgdx-text-sm);
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__artwork-btn {
	display: inline-block;
}

/* Button base classes duplicated here, scoped to #exhibitrsgdx-footer —
   the main .exhibitrsgdx-btn rules only apply inside #exhibitrsgdx-main,
   and the footer renders as a separate subtree via wp_footer, not nested
   inside main, so those rules never reached it. */
#exhibitrsgdx-footer .exhibitrsgdx-btn {
	display: inline-block;
	font-family: var(--exhibitrsgdx-font-sans);
	font-weight: 700;
	font-size: 12px;
	padding: 6px 20px;
	border-radius: var(--exhibitrsgdx-radius-button);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--exhibitrsgdx-transition), color var(--exhibitrsgdx-transition), border-color var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-footer .exhibitrsgdx-btn--primary {
	background: var(--exhibitrsgdx-btn-color, var(--exhibitrsgdx-color-primary));
	color: #fff;
	border-color: var(--exhibitrsgdx-btn-color, var(--exhibitrsgdx-color-primary));
}

#exhibitrsgdx-footer .exhibitrsgdx-btn--primary:hover {
	background: #000;
	color: #fff;
	border-color: var(--exhibitrsgdx-btn-color, var(--exhibitrsgdx-color-primary));
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--exhibitrsgdx-space-3);
	padding-top: var(--exhibitrsgdx-space-5);
	border-top: 1px solid var(--exhibitrsgdx-color-border);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__copy {
	color: #ffffff;
	font-size: var(--exhibitrsgdx-text-sm);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__bottom-sep {
	color: var(--exhibitrsgdx-color-border);
	font-size: 6px;
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__socials {
	display: flex;
	gap: var(--exhibitrsgdx-space-3);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--exhibitrsgdx-color-surface);
	color: var(--exhibitrsgdx-color-text);
	transition: background var(--exhibitrsgdx-transition), color var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__social-link:hover {
	background: var(--exhibitrsgdx-color-primary);
	color: #fff;
}

@media (max-width: 767px) {
	#exhibitrsgdx-footer .exhibitrsgdx-footer__grid {
		flex-direction: column;
		gap: var(--exhibitrsgdx-space-5);
	}

	#exhibitrsgdx-footer .exhibitrsgdx-footer__bottom {
		flex-direction: column;
		align-items: center;
	}

	#exhibitrsgdx-footer .exhibitrsgdx-footer__bottom-sep {
		display: none;
	}
}

/* ==========================================================================
   CART DRAWER — Mini cart contents
   Scoped under #exhibitrsgdx-cart-panel (ID root) so selectors beat
   Astra/Elementor class-only rules without needing !important.
   Rule: #id .child — never class-only. See version-logs.md § CSS scoping.

   Layout notes (see version-logs.md § Active legacy plugins → WAPI):
   - WAPI appends .rsgdx-wapi-lines INSIDE the product <a> tag via
     woocommerce_cart_item_name, so the <li> child structure is:
       1. a.remove_from_cart_button  (remove link — DOM-first but shown last)
       2. a:not(.remove)             (img + name text node + .rsgdx-wapi-lines)
       3. dl.variation               (WooSB only)
       4. span.quantity
   - <li> is display:flex flex-direction:column so CSS order can push
     the remove button to the bottom
   - Image floats left inside the <a>; name text and inclusions flow right
   - WAPI's own mini cart CSS is scoped to .rsgdx-mini-cart-inner (old
     rsgdx plugin wrapper) — it does NOT apply here; style everything explicitly
   ========================================================================== */

/* Reset WC's default widget list */
#exhibitrsgdx-cart-panel .woocommerce-mini-cart {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Cart item — relative + left-padded so absolutely-placed image never
   overlaps text, regardless of which <a> WC puts the image in.
   Flex column lets us reorder the remove button to the bottom. */
#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* right padding (34px) clears the trash-icon remove button, which now
	   sits top-right of each item instead of as a full-width bottom row —
	   see .remove_from_cart_button below. */
	padding: var(--exhibitrsgdx-space-4) 34px var(--exhibitrsgdx-space-4) 72px;
	border-bottom: 1px solid var(--exhibitrsgdx-color-border);
	min-height: calc(60px + var(--exhibitrsgdx-space-4) * 2);
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item:first-child {
	padding-top: 0;
	min-height: calc(60px + var(--exhibitrsgdx-space-4));
}

/* Image — absolutely anchored top-left on every item, regardless of
   whether WC puts it in a shared <a> or its own separate link.
   float:none + margin:0 neutralise any WC/Astra/Elementor defaults.
   !important is required here specifically — WooCommerce CORE's own
   woocommerce.css hardcodes `!important` on ul.cart_list li img /
   ul.product_list_widget li img (width/height/float/margin), and no
   non-!important rule can beat an !important one regardless of ID
   scoping or specificity. This is the one legitimate case where matching
   !important is the correct fix, not a substitute for proper scoping. */
#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item img {
	position: absolute !important;
	left: 0 !important;
	top: var(--exhibitrsgdx-space-4) !important;
	width: 60px !important;
	height: 60px !important;
	object-fit: contain !important;
	background: var(--exhibitrsgdx-color-surface-alt) !important;
	border: 1px solid var(--exhibitrsgdx-color-border) !important;
	display: block !important;
	float: none !important;
	margin: 0 !important;
	transform: none !important;
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item:first-child img {
	top: 0 !important;
}

/* Product link(s) — order 1; in-flow text benefits from li padding-left.
   If WC uses a separate image-only <a>, it collapses to zero height
   (its only child is absolute) and takes no visual space. */
#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item > a:not(.remove_from_cart_button) {
	order: 1;
	display: block;
	font-size: var(--exhibitrsgdx-text-sm);
	font-weight: 600;
	color: var(--exhibitrsgdx-color-primary);
	text-decoration: none;
	line-height: 1.4;
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item > a:not(.remove_from_cart_button):hover {
	color: var(--exhibitrsgdx-color-primary-light);
	text-decoration: none;
}

/* WAPI inclusions block — inside the <a> (appended by woocommerce_cart_item_name) */
#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item .rsgdx-wapi-lines {
	margin-top: var(--exhibitrsgdx-space-2);
	font-weight: 400;
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item .rsgdx-wapi-lines label {
	display: block;
	font-size: var(--exhibitrsgdx-text-xs);
	font-weight: 600;
	color: var(--exhibitrsgdx-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item .rsgdx-wapi-lines ul.rsgdx-wapi-lines-ul {
	list-style: disc;
	padding-left: var(--exhibitrsgdx-space-4);
	margin: 0;
	opacity: 1; /* override WAPI global 0.7 opacity */
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item .rsgdx-wapi-lines li.rsgdx-wapi-lines-li {
	font-size: var(--exhibitrsgdx-text-xs);
	color: var(--exhibitrsgdx-color-text-subtle);
	padding: 0;
	margin: 0;
	min-height: 0;
	border: 0;
	line-height: 1.6;
}

/* WooSB dl — order 2 */
#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item dl {
	order: 2;
	margin: 0;
	padding: 0;
	font-size: var(--exhibitrsgdx-text-xs);
	color: var(--exhibitrsgdx-color-text-subtle);
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item dl dt {
	font-weight: 600;
	color: var(--exhibitrsgdx-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 2px;
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item dl dd {
	margin: 0;
	line-height: 1.6;
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item dl dd p {
	margin: 0;
}

/* Quantity × price — order 3 */
#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item .quantity {
	order: 3;
	display: block;
	font-size: var(--exhibitrsgdx-text-sm);
	font-weight: 700;
	color: var(--exhibitrsgdx-color-text);
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item .quantity .woocommerce-Price-amount {
	color: var(--exhibitrsgdx-color-text);
}

/* WooCommerce's original remove link — kept fully functional (JS .click()s
   it to perform the actual removal) but visually hidden. Standard
   screen-reader-only hiding, not display:none — stays keyboard/AT
   reachable, and critically: Astra hooks woocommerce_cart_item_remove_link
   to inject its OWN <span class="ahfb-svg-iconset"><svg class="ast-close-svg">
   icon into THIS exact element. Trying to hide/override just that injected
   span (previous attempt) breaks the moment Astra changes its markup or is
   removed. Hiding the whole original link and building an entirely separate
   button (below) sidesteps Astra altogether — nothing here depends on
   Astra existing, or on what it does to this link. */
.exhibitrsgdx-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Our own remove button — small trash-icon, top-right of each item, built
   entirely independent of WooCommerce/Astra markup (see refreshCartUI() in
   custom-script.js). Positioned absolutely so it doesn't participate in the
   column flex order. */
#exhibitrsgdx-cart-panel .exhibitrsgdx-cart-remove-btn {
	position: absolute;
	top: var(--exhibitrsgdx-space-4);
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0;
	color: var(--exhibitrsgdx-color-text-muted);
	background: transparent;
	border: 1px solid var(--exhibitrsgdx-color-border);
	border-radius: var(--exhibitrsgdx-radius-md, 4px);
	cursor: pointer;
	transition: color var(--exhibitrsgdx-transition), background var(--exhibitrsgdx-transition), border-color var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart-item:first-child .exhibitrsgdx-cart-remove-btn {
	top: 0;
}

#exhibitrsgdx-cart-panel .exhibitrsgdx-cart-remove-btn i {
	font-size: 12px;
	line-height: 1;
}

/* Hover — near-primary, not red (red read as a destructive/error color,
   off-brand for a routine "remove one line item" action). */
#exhibitrsgdx-cart-panel .exhibitrsgdx-cart-remove-btn:hover {
	color: #fff;
	background: var(--exhibitrsgdx-color-primary);
	border-color: var(--exhibitrsgdx-color-primary);
}

/* Subtotal row */
#exhibitrsgdx-cart-panel .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--exhibitrsgdx-space-4) 0 var(--exhibitrsgdx-space-3);
	margin: 0;
	font-size: var(--exhibitrsgdx-text-base);
	color: var(--exhibitrsgdx-color-text);
	border-bottom: 1px solid var(--exhibitrsgdx-color-border);
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart__total strong {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--exhibitrsgdx-text-sm);
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart__total .woocommerce-Price-amount {
	font-size: var(--exhibitrsgdx-text-md);
	font-weight: 700;
	color: var(--exhibitrsgdx-color-text);
}

/* Buttons — View cart (outlined) + Checkout (filled) */
#exhibitrsgdx-cart-panel .woocommerce-mini-cart__buttons {
	display: flex;
	gap: var(--exhibitrsgdx-space-3);
	margin: var(--exhibitrsgdx-space-4) 0 0;
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart__buttons .button {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px var(--exhibitrsgdx-space-4);
	font-size: var(--exhibitrsgdx-text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	border-radius: var(--exhibitrsgdx-radius-button);
	transition: background var(--exhibitrsgdx-transition), color var(--exhibitrsgdx-transition), border-color var(--exhibitrsgdx-transition);
	cursor: pointer;
	border: 2px solid transparent;
	box-shadow: none;
}

/* "View cart" — outlined */
#exhibitrsgdx-cart-panel .woocommerce-mini-cart__buttons .button:not(.checkout) {
	background: transparent;
	border-color: var(--exhibitrsgdx-color-primary);
	color: var(--exhibitrsgdx-color-primary);
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
	background: var(--exhibitrsgdx-color-primary);
	color: #fff;
}

/* "Checkout" — filled */
#exhibitrsgdx-cart-panel .woocommerce-mini-cart__buttons .button.checkout {
	background: var(--exhibitrsgdx-color-primary);
	border-color: var(--exhibitrsgdx-color-primary);
	color: #fff;
}

#exhibitrsgdx-cart-panel .woocommerce-mini-cart__buttons .button.checkout:hover {
	background: var(--exhibitrsgdx-color-primary-hover);
	border-color: var(--exhibitrsgdx-color-primary-hover);
}

/* Empty cart message */
#exhibitrsgdx-cart-panel .woocommerce-mini-cart__empty-message {
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: var(--exhibitrsgdx-text-sm);
	text-align: center;
	padding: var(--exhibitrsgdx-space-6) 0;
	margin: 0;
}

/* Hide chat pill while cart drawer is open — chat z-index (999998) would
   otherwise float over the cart panel. :has() is baseline 2023. */
body:has(#exhibitrsgdx-cart-panel.is-open) #exhibitrsgdx-chat-floating-bar {
	display: none;
}

/* ==========================================================================
   SCROLL ANIMATIONS — v1
   Generic reveal-on-scroll system driven by custom-script.js
   (IntersectionObserver adds/removes .is-visible on any element carrying
   a data-animate attribute). Kept here rather than per-section CSS files
   since it's one shared mechanism used across every section, not
   section-specific styling.

   Usage: add data-animate="fade-up" (default), "fade-in", "zoom-in", or
   "fade-left" / "fade-right" to any element. Optional data-animate-delay
   ="150" (ms) staggers a group of siblings. Elements toggle back to
   hidden when scrolled back out of view, so the effect replays on the
   way down AND the way up ("exit" animation) — this only affects
   opacity/transform, never removes content from the accessibility tree.

   prefers-reduced-motion: content is shown immediately, no transform/
   opacity animation at all — respects the user's OS-level setting
   rather than just making the animation shorter.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	[data-animate] {
		opacity: 0;
		transition: opacity 0.7s ease, transform 0.7s ease;
		transition-delay: var(--exhibitrsgdx-animate-delay, 0ms);
		will-change: opacity, transform;
	}

	[data-animate="fade-up"] {
		transform: translateY(28px);
	}

	[data-animate="fade-in"] {
		transform: none;
	}

	[data-animate="zoom-in"] {
		transform: scale(0.92);
	}

	[data-animate="fade-left"] {
		transform: translateX(-32px);
	}

	[data-animate="fade-right"] {
		transform: translateX(32px);
	}

	[data-animate].is-visible {
		opacity: 1;
		transform: none;
	}

}

/* With reduced motion, everything is simply visible — no opacity: 0
   starting state that could get stuck if JS fails to load for any
   reason. */
@media (prefers-reduced-motion: reduce) {
	[data-animate] {
		opacity: 1;
		transform: none;
	}
}