/* Brand tokens and button utility classes.
   Canvas provided a `.button*` class family that every template in this
   codebase uses; Rhythm has no equivalent. This file is the single source
   for both the color tokens and those button classes, replacing Canvas's
   style.css for these two concerns. */

/* Cast badges/tabs reuse these pairs: #f0f0f0 on #1e1e1e = 14.63:1;
   #ED69D9 on #1e1e1e = 6.05:1; #141414 on #ED69D9 = 6.69:1.
   White on the deep-pink hover #9E237F = 7.00:1;
   white on the brightest gradient stop #B63196 = 5.43:1. */

:root {
	--primary-color: #ED69D9;   /* Neon pink sampled from the OMG logo */
	--primary-rgb: 237, 105, 217;
	--secondary-color: #9E237F; /* Deep pink — fills and hover states */
	--secondary-rgb: 158, 35, 127;
	--gradient-start: var(--secondary-color);
	--gradient-end: #B63196; /* Deeper pink keeps white gradient labels readable */

	--bg-dark: #141414;
	--surface-dark: #1e1e1e;
	--text-light: #f0f0f0;
	--border-dark: rgba(255, 255, 255, 0.12);
}

body {
	background-color: var(--bg-dark);
	color: var(--text-light);
}

/* ==========================================================================
   Button family — replaces Canvas's .button/.button-* classes
   ========================================================================== */

.button {
	display: inline-block;
	padding: 12px 28px;
	border: 2px solid transparent;
	border-radius: 4px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background: var(--primary-color);
	color: var(--bg-dark);
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
}

.button:hover,
.button:focus {
	background: var(--secondary-color);
	color: #fff;
	text-decoration: none;
}

.button:active {
	transform: translateY(1px);
}

.button-primary {
	background: var(--primary-color);
	color: var(--bg-dark);
}

.button-primary:hover {
	background: var(--secondary-color);
	color: #fff;
}

.button-secondary {
	background: transparent;
	border-color: var(--border-dark);
	color: var(--text-light);
}

.button-secondary:hover {
	border-color: var(--primary-color);
	background: transparent;
	color: var(--primary-color);
}

.button-danger {
	background: #e74c3c;
	color: #fff;
}

.button-danger:hover {
	background: #c0392b;
	color: #fff;
}

.button-border {
	background: transparent;
	border-color: var(--primary-color);
	color: var(--primary-color);
}

.button-border:hover {
	background: var(--primary-color);
	color: var(--bg-dark);
}

.button-white {
	background: #fff;
	color: var(--bg-dark);
}

.button-white:hover {
	background: var(--primary-color);
	color: var(--bg-dark);
}

.button-light {
	background: rgba(255, 255, 255, 0.08);
	color: var(--text-light);
}

.button-light:hover {
	background: rgba(255, 255, 255, 0.16);
}

/* ponytail: flat design has no true 3D bevel — renders as a normal flat
   button, matching Rhythm's aesthetic. Upgrade path: add a shadow/gradient
   here if a future design pass specifically wants a raised look. */
.button-3d {
	background: var(--primary-color);
	color: var(--bg-dark);
}

.button-3d:hover {
	background: var(--secondary-color);
	color: #fff;
}

.button-rounded {
	border-radius: 999px;
}

.button-large {
	padding: 16px 36px;
	font-size: 15px;
}

.button-small {
	padding: 8px 18px;
	font-size: 12px;
}

.button-xlarge {
	padding: 20px 44px;
	font-size: 16px;
}

/* ==========================================================================
   Nav dropdown reveal + mobile/desktop breakpoint toggle.

   Rhythm's own style.css gates BOTH of these behind classes (`.js-opened`,
   `.mobile-on`) that only its own unported all.js ever adds — there is no
   pure-CSS reveal or breakpoint toggle underneath. Confirmed by reading
   style.css directly: `.mn-sub` defaults to `display: none` with no
   `:hover` rule anywhere, and `.desktop-nav`/`.mobile-nav` have no
   `@media` breakpoint at all. Without this block, desktop dropdowns
   (including the search field) are permanently unreachable and the mobile
   hamburger never appears at any viewport width. This replaces Rhythm's
   JS-gated mechanism with a standard CSS-only equivalent.
   ========================================================================== */

.inner-nav.desktop-nav > ul > li {
	position: relative;
}

.inner-nav.desktop-nav > ul > li:hover > .mn-sub,
.inner-nav.desktop-nav > ul > li:focus-within > .mn-sub {
	display: block;
}

@media (max-width: 991px) {
	.inner-nav.desktop-nav {
		display: none;
	}

	.mobile-nav {
		display: table;
	}
}

/* Mobile nav toggle — Task 3 added CSS above to hide .desktop-nav
   below the mobile breakpoint by default; this class un-hides it when
   the hamburger menu is clicked open. */
@media (max-width: 991px) {
	.inner-nav.desktop-nav.mobile-nav-open {
		display: block !important;
	}
}

/* ==========================================================================
   Nav link height.

   Rhythm sizes its nav links at runtime: all.js measures .main-nav and
   stamps `height`/`line-height` inline onto every link (its height_line()).
   Its stylesheet only declares the SCROLLED case
   (`.small-height .inner-nav ul li a`, 65px/62px !important) — the resting
   state has no height at all, so without this the links collapse to their
   23px line box and sit against the top edge of an 85px bar.

   Values mirror .main-nav's own heights: 85px, dropping to 70px at the
   1024px breakpoint style-responsive.css uses. The !important on Rhythm's
   .small-height rule keeps it winning while scrolled.
   ========================================================================== */

.main-nav .inner-nav > ul > li > a {
	height: 85px;
	line-height: 85px;
}

@media (max-width: 1024px) {
	.main-nav .inner-nav > ul > li > a {
		height: 70px;
		line-height: 70px;
	}
}

/* ==========================================================================
   Bootstrap components on a dark page.

   Bootstrap 5.1.3 ships these light and, unlike 5.3, exposes no per-component
   CSS variables to retint — so they have to be overridden by rule. Without
   this, every accordion (FAQ, both policy pages, event detail), every alert
   (nine templates) and every `.bg-light` section renders as a white panel
   dropped into the dark layout.

   Alerts follow the same shape as .omg-toast: surface background, light text,
   a coloured left border carrying the semantic meaning.
   ========================================================================== */

.accordion-item {
	background-color: var(--surface-dark);
	border-color: var(--border-dark);
	color: var(--text-light);
}

.accordion-button {
	background-color: var(--surface-dark);
	color: var(--text-light);
}

.accordion-button:not(.collapsed) {
	background-color: rgba(var(--primary-rgb), 0.12);
	color: var(--primary-color);
	box-shadow: none;
}

.accordion-button:focus {
	border-color: var(--border-dark);
	box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
}

/* The chevron is a data-URI SVG with its colour baked in, so it can't inherit
   one — inverting flips Bootstrap's near-black and blue arrows to light. */
.accordion-button::after {
	filter: invert(1);
}

.accordion-body {
	background-color: var(--surface-dark);
	color: var(--text-light);
}

.alert {
	background-color: var(--surface-dark);
	color: var(--text-light);
	border: 1px solid var(--border-dark);
	border-left: 4px solid var(--primary-color);
}

.alert-danger {
	border-left-color: #e74c3c;
}

.alert-warning {
	border-left-color: #f39c12;
}

.alert-success {
	border-left-color: #27ae60;
}

.alert-info {
	border-left-color: var(--secondary-color);
}

.alert-secondary {
	border-left-color: rgba(240, 240, 240, 0.4);
}

.alert .alert-link {
	color: var(--primary-color);
}

/* Sections marked light in markup predate the dark theme. */
.bg-light {
	background-color: var(--surface-dark) !important;
	color: var(--text-light);
}

/* ==========================================================================
   Cards, brand colour and form controls on a dark page.

   `.card` was the worst of these: Bootstrap paints it #fff, and base.html
   wraps every page in `.light-content`, which Rhythm gives white text — so
   card copy was white on white and literally unreadable. That hit the
   disclaimer (12 cards), shipping policy (6), returns (8) and contact (1),
   plus product detail and both VIP payment pages.

   `.text-primary` and friends are Bootstrap's untouched #0d6efd, left behind
   by the original palette rollout because they're utility classes, not brand tokens.

   Bootstrap's semantic trio (.text-success / .text-danger / .text-warning)
   is deliberately NOT retargeted here: those read as status rather than
   brand, and darkening them for this theme would cost contrast on the
   light-themed POS screens that share this stylesheet.
   ========================================================================== */

.card {
	background-color: var(--surface-dark);
	color: var(--text-light);
	border-color: var(--border-dark);
}

.card-header,
.card-footer {
	background-color: rgba(255, 255, 255, 0.04);
	border-color: var(--border-dark);
	color: var(--text-light);
}

.card-title {
	color: var(--text-light);
}

.text-primary {
	color: var(--primary-color) !important;
}

.bg-primary {
	background-color: var(--primary-color) !important;
	color: var(--bg-dark) !important;
}

.border-primary {
	border-color: var(--primary-color) !important;
}

.btn-outline-primary {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.show {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--bg-dark);
}

/* #6c757d scores 3.93:1 on the page background — short of the 4.5:1 body
   text needs. This clears 6.9:1 and still reads as secondary. */
.text-muted {
	color: #9aa0a6 !important;
}

.form-control,
.form-select {
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--text-light);
	border-color: var(--border-dark);
}

.form-control::placeholder {
	color: rgba(240, 240, 240, 0.45);
}

.form-control:focus,
.form-select:focus {
	background-color: rgba(255, 255, 255, 0.09);
	color: var(--text-light);
	border-color: var(--primary-color);
	box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
}

/* The select chevron is a data-URI SVG with #343a40 baked in — invisible on
   a dark field, so it gets redrawn in the light text colour. */
.form-select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f0f0f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* A <select>'s open list is drawn by the browser, not the page, so it kept the
   light system palette while inheriting the light text above — the choices
   were near-invisible until clicked. `color-scheme` is the supported way to
   tell the UA to paint its own widgets dark; the explicit option colours cover
   browsers that render the list themselves. */
.form-select,
.form-control {
	color-scheme: dark;
}

.form-select option,
.form-control option {
	background-color: var(--surface-dark);
	color: var(--text-light);
}

/* ==========================================================================
   Bootstrap's .btn family.

   Two button systems coexist here: Canvas's .button* (30 uses, reimplemented
   above) and Bootstrap's .btn* (36 uses, still on framework defaults). Their
   shapes differ — 12px/28px uppercase 600 vs 6px/12px sentence-case 400 — but
   that's a markup convergence job. This only brings the colours over, so no
   blue or invisible buttons remain.

   .btn-success / .btn-danger are left alone: they read as status, and their
   Bootstrap values hold contrast on the light POS screens.
   ========================================================================== */

.btn-primary {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--bg-dark);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
	color: #fff;
}

.btn-secondary {
	background-color: transparent;
	border-color: var(--border-dark);
	color: var(--text-light);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
	background-color: transparent;
	border-color: var(--primary-color);
	color: var(--primary-color);
}

/* #212529 on #141414 is 1.19:1 — the outline-dark button was invisible. */
.btn-outline-secondary,
.btn-outline-dark {
	color: var(--text-light);
	border-color: var(--border-dark);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-dark:hover,
.btn-outline-dark:focus {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--bg-dark);
}

/* ==========================================================================
   Links styled as buttons.

   base.html wraps every page in `.bg-dark`, and Rhythm's `.bg-dark a` rule
   (specificity 0,1,1) outranks every .button and .btn colour rule above
   (0,1,0). So an <a class="button…"> came out rgba(255,255,255,.8) whatever
   its variant — faded white on the bright brand fill. A <button> with identical
   classes was unaffected, which is why this only shows on link-buttons.

   These re-state each variant's own colour at matching specificity; source
   order does the rest.
   ========================================================================== */

.bg-dark a.button,
.bg-dark a.button-primary,
.bg-dark a.button-3d,
.bg-dark a.button-white,
.bg-dark a.btn-primary {
	color: var(--bg-dark);
}

.bg-dark a.button-secondary,
.bg-dark a.button-light,
.bg-dark a.btn-secondary,
.bg-dark a.btn-outline-secondary,
.bg-dark a.btn-outline-dark {
	color: var(--text-light);
}

.bg-dark a.button-border,
.bg-dark a.btn-outline-primary {
	color: var(--primary-color);
}

.bg-dark a.button-danger {
	color: #fff;
}

.bg-dark a.button:hover,
.bg-dark a.button:focus,
.bg-dark a.button-primary:hover,
.bg-dark a.button-3d:hover,
.bg-dark a.btn-primary:hover,
.bg-dark a.btn-primary:focus {
	color: #fff;
}

.bg-dark a.button-secondary:hover {
	color: var(--primary-color);
}

.bg-dark a.button-border:hover,
.bg-dark a.button-white:hover,
.bg-dark a.btn-outline-secondary:hover,
.bg-dark a.btn-outline-dark:hover,
.bg-dark a.btn-outline-primary:hover {
	color: var(--bg-dark);
}

.bg-dark a.button-danger:hover {
	color: #fff;
}

#cart-side-panel :is(button, a):focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 3px;
}

/* ==========================================================================
   POS is a light-themed screen that shares this stylesheet (pos_main.html
   extends base.html), so the dark rules above have to be handed back there.
   Scoped to `.pos-page` on <body>, not `.pos-wrapper`: its Bootstrap modals
   render outside that wrapper, and a wrapper-scoped rule left every field and
   dropdown in them light-on-white. Its own tokens come from css/pos.css.
   ========================================================================== */

.pos-page {
	/* White on green #15803d = 5.02:1; green on its selected tint = 4.80:1.
	   Warning #92400e on white = 7.09:1. Muted #526277 on white = 6.23:1,
	   and on the POS background #f1f5f9 = 5.68:1. */
	--pos-success: #15803d;
	--pos-success-hover: #166534;
	--pos-warning: #92400e;
	--pos-text-muted: #526277;
	--pos-text-light: var(--pos-text-muted);
}

.pos-page .text-muted {
	color: var(--pos-text-muted) !important;
}

.pos-page .text-primary {
	color: var(--pos-primary) !important;
}

.pos-page .form-control,
.pos-page .form-select {
	background-color: var(--pos-card);
	color: var(--pos-text);
	border-color: var(--pos-border);
}

.pos-page .form-control::placeholder {
	color: var(--pos-text-muted);
	opacity: 1;
}

.pos-page .form-select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.pos-page .form-select,
.pos-page .form-control {
	color-scheme: light;
}

.pos-page .form-select option,
.pos-page .form-control option {
	background-color: var(--pos-card);
	color: var(--pos-text);
}

/* POS keeps Bootstrap's own button colours — its --pos-primary is a blue of
   its own, and pos.css never restyles .btn-primary. */
.pos-page .btn-primary {
	background-color: #0d6efd;
	border-color: #0d6efd;
	color: #fff;
}

.pos-page .btn-primary:hover,
.pos-page .btn-primary:focus,
.pos-page .btn-primary:active {
	background-color: #0b5ed7;
	border-color: #0a58ca;
	color: #fff;
}

.pos-page .btn-outline-secondary {
	color: #6c757d;
	border-color: #6c757d;
}

.pos-page .btn-outline-secondary:hover,
.pos-page .btn-outline-secondary:focus {
	background-color: #6c757d;
	border-color: #6c757d;
	color: #fff;
}

/* POS's header actions are <a class="btn …">, which the `.bg-dark a.btn-*`
   rules above would otherwise repaint light-on-white. */
.pos-page a.btn-outline-secondary {
	color: #6c757d;
}

.pos-page a.btn-outline-secondary:hover,
.pos-page a.btn-outline-secondary:focus {
	color: #fff;
}

.pos-page a.btn-primary {
	color: #fff;
}

/* ==========================================================================
   Product tabs and the quantity stepper.

   `.canvas-tabs` is a Canvas leftover that nothing styles, so these tabs fell
   back to Bootstrap's bare defaults: a white active pill and a #0d6efd
   inactive link on a dark page. home.html already carried a dark treatment in
   its own <style>; it lives here now so product detail and bundle detail —
   which use identical markup — get it too.

   `.quantity`/.qty/.minus/.plus were never styled at all, leaving a white
   input and grey browser buttons. POS is unaffected: it uses its own
   .quantity-control / .qty-btn classes from pos.css.
   ========================================================================== */

.canvas-tabs.nav-tabs .nav-link {
	color: rgba(240, 240, 240, 0.6);
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	padding: 10px 20px;
}

.canvas-tabs.nav-tabs .nav-link.active {
	color: var(--text-light);
	background: transparent;
	border-bottom-color: var(--primary-color);
}

.canvas-tabs.nav-tabs .nav-link:hover:not(.active) {
	color: var(--text-light);
}

.quantity .qty {
	width: 64px;
	height: 42px;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--text-light);
	border: 1px solid var(--border-dark);
}

.quantity .qty:focus {
	outline: none;
	border-color: var(--primary-color);
}

/* The -/+ buttons make the native number spinner redundant. */
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quantity .qty[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.quantity .minus,
.quantity .plus {
	width: 38px;
	height: 42px;
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--text-light);
	border: 1px solid var(--border-dark);
	cursor: pointer;
	line-height: 1;
}

.quantity .minus:hover,
.quantity .plus:hover {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--bg-dark);
}

/* Footer — keeps the existing 4-column structure, dark skin */
#footer .footer-logo { display: block; width: 120px; max-width: 100%; height: auto; margin-bottom: 12px; }
#footer.dark {
	background-color: var(--surface-dark);
	color: var(--text-light);
	padding: 40px 0 0;
	font-size: 14px;
	line-height: 1.6;
}

#footer .footer-widgets-wrap > .row { row-gap: 24px; }
#footer .widget { margin-bottom: 0; font-size: inherit; line-height: inherit; }
#footer .widget p { margin-bottom: 16px; }
#footer.dark .widget h4 {
	color: var(--text-light);
	font-size: 16px;
	line-height: 1.4;
	margin-bottom: 12px;
}

#footer .widget_links ul { list-style: none; padding: 0; margin: 0; }
#footer .widget_links a { display: inline-flex; align-items: center; min-height: 28px; }
#footer a, #footer a:hover, #footer a:focus { text-decoration: none; }
#footer a:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; }
#footer #newsletter-email { min-height: 44px; font-size: 16px; }
#footer #newsletter-submit-btn { width: 44px; min-height: 44px; padding: 0; margin: 0; }

#footer.dark .widget_links ul li a {
	color: rgba(240, 240, 240, 0.7);
}

#footer.dark .widget_links ul li a:hover {
	color: var(--primary-color);
}

.storefront-social-links { display: flex; gap: 8px; }
#footer .footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border-dark); background: transparent; color: var(--text-light); font-size: 20px; text-decoration: none; }
#footer a.footer-social-link:hover { color: var(--primary-color); border-color: var(--primary-color); }
#footer a.footer-social-link:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; }

/* Schedule filter: #f0f0f0 on #1e1e1e = 14.63:1;
   label #ED69D9 on #141414 = 6.69:1. */
.events-filter label { color: var(--primary-color); }
.events-filter select { color: var(--text-light); color-scheme: dark; }
.events-filter select option { color: var(--text-light); background-color: var(--surface-dark); }

#footer.dark #copyrights {
	background-color: var(--bg-dark);
	color: rgba(240, 240, 240, 0.6);
	padding: 16px 0;
	margin-top: 24px;
	font-size: 12px;
}
#footer .copyrights-menu a { display: inline-block; min-height: 24px; line-height: 24px; }

#footer.dark #copyrights a {
	color: rgba(240, 240, 240, 0.6);
}

#footer.dark #copyrights a:hover {
	color: var(--primary-color);
}

@media (max-width: 767px) {
	#footer.dark { padding-top: 28px; font-size: 13px; }
	#footer .footer-logo { width: 108px; }
	#footer.dark .widget h4 { font-size: 15px; }
	#footer .footer-widgets-wrap > .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
	#footer .footer-widgets-wrap > .row > div:first-child,
	#footer .footer-widgets-wrap > .row > div:last-child { grid-column: 1 / -1; }
	#footer.dark #copyrights { margin-top: 20px; padding: 14px 0; }
	#footer #copyrights .row { row-gap: 8px; }
}

/* ==========================================================================
   CJK face — the theme's --font-global is "HK_Grotesk, arial, sans-serif" and
   HK Grotesk ships no CJK glyphs (27KB per weight, Latin only), so Chinese
   text falls to the next family that has them.

   Noto Sans TC is loaded in base.html and sits first among the CJK faces, so
   it wins everywhere instead of each OS picking its own (PingFang TC on
   macOS, Microsoft JhengHei on Windows). Those two stay behind it as the
   fallback if the webfont fails to load. HK_Grotesk stays first overall, so
   Latin still renders in the theme's own face.
   ========================================================================== */

:root {
	--font-global: HK_Grotesk, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", arial, sans-serif;
	--font-global-alt: HK_Grotesk_alt, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", arial, sans-serif;
}

/* ==========================================================================
   Catalog card image box. The theme's .post-prev-img sets only width:100%
   because every demo image it ships is the same size; a real catalog has
   mixed aspect ratios, which leaves the grid rows ragged. Constrain the box
   and crop instead.
   ponytail: square crop. If portrait art matters later, switch the ratio
   here rather than per-page.
   ========================================================================== */

.post-prev-img > a {
	display: block;
	aspect-ratio: 1 / 1;
}

.post-prev-img > a img {
	height: 100%;
	object-fit: cover;
}

/* Paused/sold-out card labels: #141414 on Rhythm's #f1f1f1 = 16.31:1. */
body:not(.pos-page) .intro-label .badge.bg-gray {
	color: var(--bg-dark);
}

/* Shared storefront typography and header use OMG's original neutral surfaces.
   Logo pink on #141414: 6.69:1; #f0f0f0 on #1e1e1e: 14.63:1.
   Utility text #c7bdcb on #141414: 10.15:1 (9.18:1 on #1e1e1e).
   POS keeps its existing styling. */
body:not(.pos-page) {
	--border-dark: rgba(240, 240, 240, .14);
	--font-display: Georgia, "Noto Serif TC", "Songti TC", "PMingLiU", serif;
	--storefront-radius: 0;
	font-size: 16px;
}

/* Compact storefront defaults; component-specific scales still take priority. */
:where(body:not(.pos-page)) :is(h1, .h1) { font-size: clamp(28px, 3vw, 36px); }
:where(body:not(.pos-page)) :is(h2, .h2) { font-size: 28px; }
:where(body:not(.pos-page)) :is(h3, .h3) { font-size: 22px; }
:where(body:not(.pos-page)) :is(h4, .h4) { font-size: 20px; }
:where(body:not(.pos-page)) :is(h5, .h5) { font-size: 18px; }
:where(body:not(.pos-page)) :is(h6, .h6) { font-size: 16px; }

body:not(.pos-page) #wrapper.bg-dark {
	background-color: var(--bg-dark) !important;
}

body:not(.pos-page) #content h1,
body:not(.pos-page) #content h2,
body:not(.pos-page) #content .fancy-title h3 {
	font-family: var(--font-display);
	text-wrap: balance;
}

/* One square-corner rule covers shared components, page-local/inline radii and
   Bootstrap's !important rounded utilities. Keep radio indicators and loading
   rings circular; POS retains its own shape system. */
body:not(.pos-page) :where(*):not(input[type="radio"], .spinner-border, .spinner-grow, .swiper-lazy-preloader),
body:not(.pos-page) :where(*):not(.loading-spinner, .spinner-border, .spinner-grow, .swiper-lazy-preloader)::before,
body:not(.pos-page) :where(*):not(.loading-spinner, .spinner-border, .spinner-grow, .swiper-lazy-preloader)::after {
	border-radius: var(--storefront-radius) !important;
}

/* The original banner still needs a height after Canvas's size utilities
   were removed; its background-only slides otherwise collapse to zero. */
.slider-element.swiper_wrapper .swiper-parent {
	height: min(760px, calc(100svh - 80px));
	min-height: 420px;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: var(--bg-dark);
	border-bottom: 1px solid var(--border-dark);
}

.site-header .main-nav {
	--header-nav-height: 80px;
	height: var(--header-nav-height) !important;
	position: relative;
	background: var(--bg-dark);
}
.site-header .main-nav.small-height { --header-nav-height: 68px; }
.site-header .full-wrapper { margin: 0; padding: 0 32px; }
.header-main-inner { display: flex; align-items: center; gap: 24px; }
.site-header .nav-logo-wrap { float: none; margin: 0; flex-shrink: 0; }
.site-header .nav-logo-wrap .logo { height: var(--header-nav-height) !important; }
.site-header .nav-logo-wrap .logo img { width: 112px; height: auto; max-width: 112px; max-height: calc(var(--header-nav-height) - 16px); object-fit: contain; }
.site-header .inner-nav { float: none; flex: 1; min-width: 0; position: static; }
.site-header .inner-nav ul { float: none; }
.site-header .inner-nav ul li { margin-left: 0; }
.site-header .header-menu { display: flex; justify-content: center; gap: 4px; align-items: center; }
.site-header .header-menu > li { float: none; }

.site-header .main-nav .inner-nav .header-nav-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: var(--header-nav-height) !important;
	line-height: 1.4 !important;
	padding: 0 10px;
	border-bottom: 2px solid transparent;
	font-family: var(--font-global);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .03em;
	white-space: nowrap;
	color: var(--text-light);
	opacity: 1;
	text-decoration: none;
	cursor: pointer;
}
.site-header .main-nav .inner-nav .header-nav-link:hover { background: var(--surface-dark); }
.site-header .main-nav .inner-nav .header-nav-link[aria-current],
.site-header .main-nav .inner-nav .header-events-toggle[data-current-section],
.site-header .main-nav .inner-nav .header-events-toggle[aria-expanded="true"] {
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
}

.header-actions { display: flex; flex-shrink: 0; align-items: center; gap: 6px; padding-left: 20px; border-left: 1px solid var(--border-dark); }
.site-header .header-actions > a,
.site-header .header-search > summary,
.site-header #top-account-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--border-dark);
	color: var(--text-light);
	text-decoration: none;
	font-size: 19px;
	cursor: pointer;
}
.site-header #top-account-trigger > span { display: none; }
.site-header .header-actions > a:hover,
.site-header .header-search > summary:hover,
.site-header .header-search[open] > summary,
.site-header #top-account-trigger:hover {
	color: var(--primary-color);
	border-color: var(--primary-color);
	background: var(--surface-dark);
}
.site-header #header-cart-count { top: 0; right: 0; margin: 0; transform: translate(35%, -35%); font-size: 10px; }
.site-header summary { list-style: none; }
.site-header summary::-webkit-details-marker { display: none; }
.header-search { position: relative; }
.header-events-toggle { width: 100%; border: 0; background: transparent; }
.header-events-toggle > i { transition: transform .4s ease; }
.header-events-toggle[aria-expanded="true"] > i { transform: rotate(180deg); }
.site-header .header-mobile-events { display: none; }
.event-choice-period { display: block; font-size: 12px; line-height: 1.6; }
.event-choice-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.header-search-panel {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 260px;
	padding: 12px;
	margin: 0;
	list-style: none;
	background: var(--surface-dark);
	border: 1px solid var(--border-dark);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
	z-index: 10;
}
.site-header .header-events-row {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows .4s ease, visibility 0s linear .4s;
}
.site-header.header-events-open .header-events-row {
	grid-template-rows: 1fr;
	visibility: visible;
	transition-delay: 0s;
}
.header-events-content {
	min-height: 0;
	overflow: hidden;
	background: var(--surface-dark);
}
.site-header .header-event-options {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 1fr);
	gap: 16px;
	max-width: 1344px;
	width: 100%;
	padding: 22px 32px 26px;
	margin: 0 auto;
	overflow-x: auto;
	list-style: none;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--primary-color) var(--surface-dark);
	transform: translateY(-20px);
	transition: transform .4s ease;
}
.header-event-options::-webkit-scrollbar { height: 6px; }
.header-event-options::-webkit-scrollbar-track { background: var(--surface-dark); }
.header-event-options::-webkit-scrollbar-thumb { background: var(--primary-color); }
.site-header.header-events-open .header-event-options { transform: translateY(0); }
.site-header .header-event-options > li { float: none; min-width: 0; margin: 0; }
.site-header .header-event-link {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 100px;
	height: auto !important;
	line-height: 1.5 !important;
	padding: 16px 20px;
	border: 1px solid var(--border-dark);
	background: var(--bg-dark);
	color: var(--text-light);
	text-align: left;
	text-decoration: none;
	white-space: normal;
	opacity: 1;
}
.site-header .header-event-link:hover,
.site-header .header-event-link[aria-current] { border-color: var(--primary-color); }
.header-event-date { flex: 0 0 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--primary-color); }
.header-event-date span { font-size: 12px; }
.header-event-date strong { font-size: 30px; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; }
.header-event-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 6px; }
.header-event-copy > strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.header-event-copy > span { font-size: 12px; color: var(--text-light); }
.header-event-link > i { flex-shrink: 0; font-size: 20px; color: var(--primary-color); }
.header-search-panel { top: calc(100% + 18px); width: 360px; padding: 22px; }
.header-search-panel label { display: block; font-size: 14px; margin-bottom: 12px; }
.header-search-field { display: flex; border: 1px solid var(--border-dark); }
.header-search-field input { flex: 1; min-width: 0; width: 0; border: 0; padding: 12px; font: inherit; font-size: 14px; background: var(--bg-dark); color: var(--text-light); }
.header-search-field input::placeholder { color: #c7bdcb; opacity: 1; }
.header-search-field button { flex-shrink: 0; width: 44px; border: 0; background: var(--primary-color); color: var(--bg-dark); }
.site-header .user-account-dropdown { margin-top: 0; }
.site-header .user-menu-link { display: flex; min-height: 44px; font-size: 14px; }
.site-header .mobile-nav { display: none; }
.site-header a:focus-visible, .site-header summary:focus-visible, .site-header button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; }
.header-search-field:focus-within { outline: 2px solid var(--primary-color); outline-offset: 4px; }
.header-search-field input:focus-visible, .header-search-field button:focus-visible { outline: none; }

@media (max-width: 1199px) {
	.site-header .full-wrapper { padding: 0 24px; }
	.header-main-inner { gap: 16px; }
	.header-actions { padding-left: 14px; }
	.site-header .main-nav .inner-nav .header-nav-link { padding: 0 8px; font-size: 13px; }
}

@media (max-width: 991px) {
	.site-header .main-nav,
	.site-header .main-nav.small-height { --header-nav-height: 72px; }
	.header-main-inner { gap: 8px; }
	.site-header .nav-logo-wrap { margin-right: auto; }
	.header-actions { padding: 0; border: 0; gap: 4px; }
	.site-header .mobile-nav { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px !important; margin: 0; padding: 0; border: 1px solid var(--border-dark); background: transparent; color: var(--text-light); font-size: 22px; }
	.site-header .inner-nav.desktop-nav { position: absolute; top: 100%; left: 0; width: 100%; padding: 0; max-height: calc(100dvh - 144px); overflow-y: auto; background: var(--bg-dark); border-bottom: 1px solid var(--border-dark); }
	.site-header .inner-nav .header-menu { display: block; width: 100%; background: var(--bg-dark); overflow: visible; }
	.site-header .header-menu > li { display: block; overflow: visible; }
	.site-header .main-nav .inner-nav .header-nav-link { justify-content: flex-start; gap: 10px; height: auto !important; min-height: 52px; padding: 14px 24px; border-bottom: 1px solid var(--border-dark); font-size: 15px; }
	.site-header .main-nav .inner-nav .header-nav-link[aria-current],
	.site-header .main-nav .inner-nav .header-events-toggle[data-current-section],
	.site-header .main-nav .inner-nav .header-events-toggle[aria-expanded="true"] { border-left: 3px solid var(--primary-color); padding-left: 21px; background: var(--surface-dark); }
	.site-header .header-events-row { display: none; }
	.site-header.header-events-open .header-mobile-events { display: block; float: none; width: 100%; padding: 0; margin: 0; list-style: none; background: var(--surface-dark); }
	.site-header .header-mobile-events > li { display: block; float: none; width: 100%; margin: 0; }
	.site-header .main-nav .inner-nav .header-mobile-event-link { display: block; height: auto !important; min-height: 52px; padding: 12px 24px 12px 36px; line-height: 1.5 !important; border-bottom: 1px solid var(--border-dark); color: var(--text-light); text-decoration: none; text-align: left; opacity: 1; }
	.site-header .header-mobile-event-link:hover,
	.site-header .header-mobile-event-link[aria-current] { background: var(--bg-dark); }
	.header-mobile-event-link .event-choice-period { color: var(--primary-color); }
	.header-mobile-event-link .event-choice-name { font-size: 14px; }
	.header-search-panel { position: fixed; top: 72px; left: 16px; right: 16px; width: auto; min-width: 0; padding: 12px; line-height: 1.5; }
	.header-search-panel label { margin-bottom: 8px; font-size: 12px; }
	.header-search-field input { height: 44px; font-size: 16px; }
	.header-search-field button { height: 44px; }
}

@media (max-width: 767px) {
	.slider-element.swiper_wrapper .swiper-parent { height: 50vh; min-height: 0; }
}

@media (max-width: 575px) {
	.site-header .full-wrapper { padding: 0 16px; }
	.site-header .nav-logo-wrap .logo img { width: 88px; max-width: 88px; }
}

@media (max-width: 359px) {
	.header-main-inner { gap: 4px; }
	.site-header .nav-logo-wrap .logo img { width: 80px; max-width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header, .site-header * { transition: none !important; }
}