/*
Theme Name: Sounds Good
Theme URI: https://sounds-good.dk
Author: Sounds Good DJ Collective
Description: Custom block theme for the Sounds Good DJ collective site.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sounds-good
*/

/* Utility classes */

html,
body {
	margin: 0;
	padding: 0;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.sg-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--wp--custom--z--header, 50);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 32px;
	background: transparent;
	transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

.sg-site-header.is-scrolled {
	background: rgba(21, 21, 21, 0.85);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--wp--preset--color--border);
}

body.admin-bar .sg-site-header {
	top: 32px;
}

:root {
	--sg-header-clearance: 88px;
}

/* Plain-content pages (page.html / index.html: legal pages, cookie policy).
   Side padding so text never touches the screen edge once the viewport is
   narrower than the constrained content width. */
.sg-main-offset {
	padding-top: var(--sg-header-clearance);
	padding-inline: var(--wp--preset--spacing--section-x, 6vw);
	padding-bottom: 60px;
}

.sg-site-footer {
	padding: 32px var(--wp--preset--spacing--section-x, 6vw);
	background: var(--wp--preset--color--background);
	border-top: 1px solid var(--wp--preset--color--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	font-family: var(--wp--preset--font-family--gruno);
	font-size: 13px;
	color: var(--wp--preset--color--text-tertiary);
}

.sg-footer-brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sg-footer-brand .sg-footer-meta {
	position: relative;
	left: 35px;
	gap: 6px;
}

.sg-copyright {
	color: var(--wp--preset--color--text-tertiary);
}

.sg-footer-note {
	margin: 0;
	color: var(--wp--preset--color--text-tertiary);
}

.sg-js .sg-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/* `none`, not translateY(0): any transform makes the section the containing
   block for position: fixed children, which pulled WooCommerce's (closed)
   shop filter overlay into the page flow on phones. */
.sg-reveal.sg-revealed {
	opacity: 1;
	transform: none;
}

.sg-logo img {
	display: block;
	width: auto;
}

.sg-logo--wordmark {
	display: block;
	height: 80px;
	overflow: hidden;
}

.sg-logo--wordmark img {
	height: 160px;
	object-fit: contain;
	filter: invert(1);
	margin: -40px 0;
}

.sg-logo--badge img {
	width: 90px;
	height: 90px;
	margin: -25px 0;
}

/* At 160px tall the wordmark renders ~240px wide (2000x1333 source), which
   with the desktop padding + cart + MENU pill overflows a 375px viewport.
   Scale the crop box, image, and negative margin together (box = img / 2,
   margin = -img / 4) so the whitespace crop stays identical. */
/* Logo left, icons + MENU right on one row at every width (WP's flex
   layout wraps by default, which dropped MENU below the logo at 360px). */
.sg-site-header,
.sg-site-header > .wp-block-group {
	flex-wrap: nowrap;
}

/* Phones: nothing may push the page wider than the screen (a sideways-
   scrollable page shows as an empty strip next to the fixed header). */
html {
	overflow-x: clip;
}

@media (max-width: 560px) {
	.sg-site-header {
		padding: 16px;
	}
	/* position: relative + left keeps its layout box in place, so the shift
	   overflowed the screen by ~11px — the source of the sideways scroll. */
	.sg-footer-brand .sg-footer-meta {
		left: 0;
	}
	.sg-logo--wordmark {
		height: 56px;
		flex-shrink: 0;
	}
	.sg-logo--wordmark img {
		height: 112px;
		margin: -28px 0;
	}
}

.sg-events-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--card-gap-lg, 32px);
}

.sg-event-card {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--card, 18px);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: background var(--wp--custom--motion--hover-duration, 0.22s) ease, transform var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-event-card:hover {
	background: var(--wp--preset--color--surface-hover);
	transform: translateY(var(--wp--custom--motion--hover-lift, -6px));
}

/* The trigger wraps everything except the Tickets link (a button can't
   contain a nested <a> — same split as .sg-events-list-trigger) and needs
   to look like plain card content, not a button. */
.sg-event-card-trigger {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.sg-event-card-meta {
	display: flex;
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 15px;
	color: var(--wp--preset--color--accent);
	text-transform: uppercase;
}

.sg-event-card-flyer {
	height: 160px;
	width: 100%;
	border-radius: 14px;
	object-fit: cover;
	display: block;
}

.sg-event-card-title {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 24px;
	text-transform: uppercase;
	margin: 0;
}

.sg-event-card-location {
	color: var(--wp--preset--color--text-secondary);
	font-size: 15px;
}

.sg-event-card-cta {
	display: block;
	margin-top: auto;
	text-align: center;
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 14px;
	color: var(--wp--preset--color--background);
	background: var(--wp--preset--color--text);
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 12px 0;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-event-card-cta:hover {
	background: var(--wp--preset--color--accent);
}

.sg-pill-button {
	display: inline-block;
	align-self: flex-start;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--gruno-bubble);
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 28px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	transition: transform var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-pill-button:hover {
	transform: scale(1.05);
}

.sg-event-hero {
	display: grid;
	/* A capped flyer column (not a proportional fr split) is what actually
	   shrinks the image — a proportional split plus an overall max-width
	   shrank the text column just as much, which is what was cramming the
	   title into a near-vertical stack of single words. The details column
	   keeps the rest of the row, uncapped. */
	grid-template-columns: minmax(240px, 400px) 1fr;
	gap: 48px;
	/* start, not stretch: stretch wins over aspect-ratio for sizing a grid
	   item, so it was force-stretching the flyer to match however tall the
	   text column's own content happened to be, ignoring its aspect-ratio
	   entirely. .sg-detail-overlay-panel below has the same shape (image +
	   text, image capped by aspect-ratio, text scrolls) and uses this same
	   align-items: start — the flyer and the details column each get their
	   own height constraint instead of the flyer dictating the text's. */
	align-items: start;
}

/* [hidden] and a plain class selector tie on specificity, so whichever is
   declared later wins the cascade — since .sg-event-hero sets its own
   display, it was silently beating the browser's default [hidden]{display:
   none}. Same fix already used for .sg-detail-overlay below. Toggled on the
   whole .sg-event-hero-section wrapper (not just .sg-event-hero itself), or
   the wrapper's own sg-section-pad/sg-section-border padding and divider
   line are left behind as an empty gap when the hero inside is hidden. */
.sg-event-hero-section[hidden] {
	display: none;
}

/* Classic padding-bottom aspect-ratio box instead of the `aspect-ratio`
   property directly on the <img> — confirmed by measuring the live element
   that `aspect-ratio: 4/5` on the img was being silently ignored for its
   height (it rendered at the raw HTML height attribute WordPress prints,
   1024px, instead of scaling with the resolved 400px width), some interplay
   between aspect-ratio and being a non-stretched grid item. This technique
   doesn't depend on the aspect-ratio property at all, so it can't have that
   failure mode. */
.sg-event-hero-flyer-wrap {
	position: relative;
	width: 100%;
	padding-bottom: 125%; /* 5/4 - the reciprocal of the 4:5 width:height ratio */
	border-radius: var(--wp--custom--radius--card, 18px);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.sg-event-hero-flyer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* contain, not cover: show the whole flyer, no cropping. */
	object-fit: contain;
}

.sg-event-hero-label {
	color: var(--wp--preset--color--accent);
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 15px;
	margin-bottom: 16px;
}

.sg-event-hero-title {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: clamp(32px, 4.5vw, 56px);
	line-height: 1.05;
	margin: 0 0 20px;
	text-transform: uppercase;
}

.sg-event-hero-location {
	color: var(--wp--preset--color--text-secondary);
	margin-bottom: 8px;
}

.sg-event-hero-details {
	display: flex;
	flex-direction: column;
	min-height: 0;
	/* Its own cap, independent of the flyer — 500px is the flyer's own max
	   rendered height (400px column cap × the 4:5 aspect-ratio). Without an
	   explicit number here, a long description just grows the column (and
	   the section) to fit itself instead of scrolling internally. */
	max-height: 500px;
}

.sg-event-hero-description {
	color: var(--wp--preset--color--text-secondary);
	line-height: 1.7;
	margin: 0 0 32px;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
}

@media (max-width: 780px) {
	.sg-event-hero {
		grid-template-columns: 1fr;
	}

	/* Stacked to a single column here, so there's no sibling image height to
	   match — let the text flow at its natural height instead of scrolling
	   inside an arbitrary box. */
	.sg-event-hero-details {
		max-height: none;
	}
}

.wp-site-blocks > .sg-page-header,
.wp-site-blocks > .sg-hero {
	margin-block-start: 0;
}

/* WooCommerce wraps the single-product template's blocks in its own extra
   group (for classic .woocommerce div.product compatibility) — confirmed
   via the actual rendered markup: <div class="wp-block-group woocommerce
   product ..."><div class="sg-page-header">. That WRAPPER, not
   sg-page-header itself, is the one sitting where the gap-reset rule
   above needs to apply. WordPress's own core block-gap rule is wrapped in
   :where(), giving it zero specificity, so this plain class selector wins
   regardless of nesting depth. */
.sg-page-header {
	margin-block-start: 0;
}

.wp-block-group.woocommerce.product {
	margin-block-start: 0;
}

.sg-page-header {
	position: relative;
	overflow: hidden;
	padding: 180px var(--wp--preset--spacing--section-x, 6vw) 60px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* No eyebrow/title/filters — just the banner strip, sized to the banner's
   own height instead of leaving room for a heading. Used on pages (like
   single-product) that want the same backdrop without a duplicate hero
   title crowding out the actual content. */
.sg-page-header.sg-page-header--compact {
	padding: 160px 0 0;
	border-bottom: none;
}

.sg-page-header .sg-page-header-banner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 160px;
	height: 160px;
	object-fit: cover;
	opacity: 0.35;
	z-index: 0;
}

.sg-page-header-fade {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 160px;
	background: linear-gradient(180deg, transparent 40%, var(--wp--preset--color--background) 100%);
	z-index: 0;
}

.sg-page-header-content {
	position: relative;
	z-index: 1;
	margin-top: 90px;
}

.sg-page-header-eyebrow {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 15px;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--accent);
	text-transform: uppercase;
	margin-bottom: 18px;
}

.sg-page-header-title {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: clamp(48px, 9vw, 140px);
	line-height: 0.95;
	margin: 0;
	text-transform: uppercase;
}

/* Longer, multi-word titles (e.g. "Order Confirmation") overflow at the
   default clamp sized for short single-word titles like "Shop"/"Cart". */
.sg-page-header-title--long {
	font-size: clamp(32px, 5.5vw, 84px);
}

.sg-filter-tabs {
	display: flex;
	gap: 12px;
	margin-top: 36px;
}

.sg-filter-tab {
	cursor: pointer;
}

.sg-pill-button.sg-filter-tab {
	background: var(--wp--preset--color--panel);
	color: var(--wp--preset--color--text);
}

.sg-pill-button.sg-filter-tab.is-active {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

.sg-filter-tab:hover {
	transform: none;
}

.sg-section-pad {
	padding: 80px var(--wp--preset--spacing--section-x, 6vw);
}

/* .sg-page-header already ends in 60px of its own bottom padding below the
   filter tabs — stacked with this section's normal 80px top padding, the
   two combined left a huge dead gap between the tabs and the next-up hero
   that immediately follows it on the Events page. Trimmed, not removed —
   zero top padding here left it feeling glued to the tabs above it. */
.sg-section-pad--tight-top {
	padding-top: 40px;
}

.sg-section-border {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.sg-event-hero-cta {
	margin-top: 8px;
	padding: 18px 36px;
	font-size: 18px;
}

/*
 * Generic detail overlay: reusable modal pattern for any "click a card,
 * see it full-screen with prev/next + Escape" flow — used by the Events
 * list now, and intended for the About page's artist roster later. Class
 * names are content-agnostic on purpose; only the *-panel content (built
 * by each feature's own render function) is domain-specific.
 */
.sg-detail-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--wp--custom--z--overlay, 900);
	background: rgba(10, 10, 10, 0.96);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6vw;
	overflow-y: auto;
	outline: none;
}

.sg-detail-overlay[hidden] {
	display: none;
}

.sg-detail-overlay-close {
	position: absolute;
	top: 24px;
	right: 32px;
}

.sg-pill-button.sg-detail-overlay-close {
	font-size: 14px;
	padding: 12px 24px;
}

.sg-detail-overlay-all-events {
	position: absolute;
	bottom: 24px;
	left: 32px;
	background: none;
	border: none;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--gruno-bubble);
	text-transform: uppercase;
	text-decoration: underline;
	font-size: 14px;
	padding: 12px 0;
	transition: opacity var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-detail-overlay-all-events:hover {
	opacity: 0.75;
}

.sg-detail-overlay-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--wp--preset--color--text-tertiary);
	font-size: 34px;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
	padding: 12px;
	transition: color var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-detail-overlay-arrow:hover {
	color: var(--wp--preset--color--accent);
}

.sg-detail-overlay-prev {
	left: 24px;
}

.sg-detail-overlay-next {
	right: 24px;
}

.sg-detail-overlay-panel {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 48px;
	max-width: 1000px;
	width: 100%;
	max-height: calc(100vh - 12vw);
	align-items: stretch;
}

.sg-detail-overlay-panel[hidden] {
	display: none;
}

.sg-detail-overlay-media {
	border-radius: 20px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.sg-detail-overlay-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sg-detail-overlay-content {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 12vw);
}

.sg-detail-overlay-eyebrow {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 15px;
	color: var(--wp--preset--color--accent);
	text-transform: uppercase;
	margin-bottom: 16px;
}

.sg-detail-overlay-title {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: clamp(28px, 4vw, 44px);
	text-transform: uppercase;
	margin: 0 0 16px;
}

.sg-detail-overlay-location {
	font-family: var(--wp--preset--font-family--gruno);
	color: var(--wp--preset--color--text-secondary);
	margin-bottom: 16px;
}

.sg-detail-overlay-description {
	font-family: var(--wp--preset--font-family--gruno);
	font-size: 16px;
	color: #d8d8d2;
	line-height: 1.8;
	white-space: pre-line;
	margin: 0 0 24px;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
}

.sg-detail-overlay-cta {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 14px;
	color: var(--wp--preset--color--background);
	background: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 12px 24px;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	transition: transform var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-detail-overlay-cta:hover {
	transform: scale(1.05);
}

body.sg-detail-overlay-open {
	overflow: hidden;
}

@media (max-width: 780px) {
	.sg-detail-overlay-panel {
		grid-template-columns: 1fr;
	}

	.sg-detail-overlay-media {
		aspect-ratio: 4 / 5;
	}
}

.sg-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 28px;
}

.sg-gallery-scroller {
	display: flex;
	gap: var(--wp--preset--spacing--card-gap, 20px);
	overflow-x: auto;
	padding-bottom: 12px;
	scroll-snap-type: x proximity;
}

.sg-gallery-scroller .sg-album-card {
	flex: 0 0 280px;
	scroll-snap-align: start;
}

.sg-album-card {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	text-decoration: none;
	color: var(--wp--preset--color--text);
}

.sg-album-stack {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.sg-album-stack-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card, 18px);
	transition: transform var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-album-stack-back1 {
	transform: rotate(2deg) scale(0.97);
	z-index: 1;
}

.sg-album-stack-back2 {
	transform: rotate(4deg) scale(0.94);
	z-index: 0;
}

.sg-album-stack-cover {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--wp--custom--radius--card, 18px);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
	transition: transform var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-album-stack-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sg-album-card:hover .sg-album-stack-cover {
	transform: rotate(-4deg) translate(-10px, -6px);
}

.sg-album-card:hover .sg-album-stack-back1 {
	transform: rotate(4deg) translate(10px, 4px);
}

.sg-album-card:hover .sg-album-stack-back2 {
	transform: rotate(10deg) translate(20px, 12px);
}

.sg-album-card-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.75));
	pointer-events: none;
}

.sg-album-card-info {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sg-album-date {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 15px;
	color: var(--wp--preset--color--accent);
	text-transform: uppercase;
}

.sg-album-title {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 28px;
	text-transform: uppercase;
}

.sg-album-count {
	font-family: var(--wp--preset--font-family--gruno);
	font-size: 14px;
	color: #C9C9C2;
}

.sg-album-photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
}

.sg-album-photo {
	position: relative;
	aspect-ratio: 1;
	border: none;
	padding: 0;
	background: none;
	cursor: pointer;
	border-radius: var(--wp--custom--radius--card, 18px);
	overflow: hidden;
}

.sg-album-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Video item with no poster image set on the attachment — same footprint
   as a photo tile so the grid doesn't reflow, just an empty panel behind
   the play icon instead of a broken image. */
.sg-album-photo-fallback {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--panel);
}

.sg-album-photo-scrim {
	position: absolute;
	inset: 0;
	background: rgba(21, 21, 21, 0);
	transition: background var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-album-photo-expand,
.sg-album-photo-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 26px;
	height: 26px;
	opacity: 0;
	transition: opacity var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-album-photo:hover .sg-album-photo-scrim {
	background: rgba(21, 21, 21, 0.4);
}

.sg-album-photo:hover .sg-album-photo-expand,
.sg-album-photo:hover .sg-album-photo-play {
	opacity: 1;
}

/* Video tiles show the play icon regardless of hover/poster state on
   touch devices — no hover to reveal it there. */
@media (hover: none) {
	.sg-album-photo--video .sg-album-photo-play {
		opacity: 1;
	}

	.sg-album-photo--video .sg-album-photo-scrim {
		background: rgba(21, 21, 21, 0.25);
	}
}

.sg-detail-overlay-panel--photo {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 82vw;
	gap: 0;
	width: auto;
}

.sg-detail-overlay-panel--photo img,
.sg-detail-overlay-panel--photo video {
	max-width: 82vw;
	max-height: min(82vh, calc(100vh - 200px));
	object-fit: contain;
	border-radius: 12px;
	display: block;
}

.sg-detail-overlay-photo-counter {
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--gruno);
	font-size: 14px;
	color: var(--wp--preset--color--text-secondary);
}

.sg-album-detail-eyebrow {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 15px;
	color: var(--wp--preset--color--accent);
	text-transform: uppercase;
	margin-bottom: 8px;
}

.sg-pill-button.sg-album-back-link {
	display: inline-block;
	font-size: 14px;
	margin-bottom: 40px;
}

.sg-album-detail-title {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	text-transform: uppercase;
	margin: 0 0 40px;
}

.sg-music-featured {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.sg-mix-featured-play,
.sg-mix-play {
	border: none;
	cursor: pointer;
	border-radius: 50%;
	background: var(--wp--preset--color--surface-hover);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-mix-featured-play {
	width: 96px;
	height: 96px;
}

.sg-mix-featured-play:hover {
	background: var(--wp--preset--color--border);
}

.sg-mix-featured-play-icon,
.sg-mix-play-icon {
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 24px solid var(--wp--preset--color--accent);
	margin-left: 6px;
}

.sg-music-featured-info {
	flex: 1;
	min-width: 240px;
}

.sg-music-featured-eyebrow {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 14px;
	color: var(--wp--preset--color--accent);
	text-transform: uppercase;
	margin-bottom: 10px;
}

.sg-music-featured-title {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: clamp(24px, 3vw, 36px);
	text-transform: uppercase;
	margin-bottom: 8px;
}

.sg-music-featured-meta {
	font-size: 15px;
	color: var(--wp--preset--color--text-secondary);
}

.sg-mix-list {
	display: flex;
	flex-direction: column;
}

.sg-mix-item {
	display: grid;
	grid-template-columns: 56px 1fr auto auto;
	align-items: center;
	gap: 24px;
	padding: 22px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: background var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-mix-item[hidden] {
	display: none;
}

.sg-music-filters {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 32px;
	margin-bottom: 32px;
}

.sg-music-filter-platforms {
	display: flex;
	gap: 12px;
}

.sg-pill-button.sg-platform-toggle {
	background: var(--wp--preset--color--panel);
	color: var(--wp--preset--color--text);
}

.sg-pill-button.sg-platform-toggle.is-active {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

.sg-genre-dropdown {
	position: relative;
}

.sg-pill-button.sg-genre-dropdown-toggle {
	background: var(--wp--preset--color--panel);
	color: var(--wp--preset--color--text);
	cursor: pointer;
}

.sg-pill-button.sg-genre-dropdown-toggle.is-active {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

.sg-genre-dropdown-panel,
.sg-dropdown-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 200px;
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 18px);
	padding: 18px 20px;
}

.sg-genre-dropdown-panel[hidden],
.sg-dropdown-panel[hidden] {
	display: none;
}

.sg-genre-dropdown-panel label {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--text);
	cursor: pointer;
}

.sg-mix-item:hover {
	background: var(--wp--preset--color--panel);
}

.sg-mix-play {
	width: 44px;
	height: 44px;
}

.sg-mix-play:hover {
	background: var(--wp--preset--color--border);
}

.sg-mix-play .sg-mix-play-icon {
	border-top-width: 8px;
	border-bottom-width: 8px;
	border-left-width: 12px;
	margin-left: 3px;
}

.sg-mix-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sg-mix-title {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 18px;
	text-transform: uppercase;
}

.sg-mix-artist {
	font-size: 14px;
	color: var(--wp--preset--color--text-secondary);
}

.sg-mix-genre {
	font-size: 13px;
	color: var(--wp--preset--color--text-tertiary);
	text-transform: uppercase;
	white-space: nowrap;
}

.sg-mix-length {
	font-size: 14px;
	color: var(--wp--preset--color--text-secondary);
	white-space: nowrap;
}

.sg-mix-detail-panel {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	max-width: 640px;
	width: 100%;
	gap: 0;
}

.sg-mix-detail-panel .sg-mix-embed-slot {
	margin-bottom: 24px;
}

.sg-mix-embed-slot iframe {
	width: 100%;
	height: 166px;
	border: none;
	border-radius: var(--wp--custom--radius--card, 18px);
}

.sg-mix-embed-slot[data-platform="youtube"] iframe {
	aspect-ratio: 16 / 9;
	height: auto;
}

/* SoundCloud visual player (artwork background): 300px, as SoundCloud's
   own embed code suggests. */
.sg-mix-embed-slot[data-platform="soundcloud"] iframe {
	height: 300px;
}

/* Short note in the pop-up: under the DJ name, same quiet style. */
.sg-mix-detail-note {
	font-size: 14px;
	color: var(--wp--preset--color--text-secondary);
	margin: -8px 0 16px;
}

/* Mix pop-up, stacked layout (under 900px): anchored from the top instead
   of vertically centred, so the player stays put whatever the text length.
   Wide screens stay centred but with a fixed-height panel (below). */
@media (max-width: 899px) {
	.sg-music-overlay {
		align-items: flex-start;
		padding-top: max(96px, 14vh);
	}
}

/* Mix pop-up on wide screens: player (YouTube video or SoundCloud strip)
   left, all text right. Phones keep the stacked layout. */
@media (min-width: 900px) {
	.sg-mix-detail-panel {
		display: grid;
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: 40px;
		align-items: start;
		max-width: 1180px;
	}
	.sg-mix-detail-panel .sg-mix-embed-slot {
		margin-bottom: 0;
	}
	/* The player alone sets the panel height, so the player is exactly centred
	   on screen for every mix. The text column starts level with the player
	   and may run below it (height: 0 + min-height: 100% keeps it out of the
	   row-height calculation). Description capped at 10 lines, then scrolls. */
	.sg-mix-detail-text {
		height: 0;
		min-height: 100%;
	}
	.sg-mix-detail-text .sg-mix-description {
		max-height: calc(1.8em * 10);
		margin-bottom: 0;
	}
	.sg-mix-detail-panel .sg-detail-overlay-title {
		font-size: clamp(28px, 3vw, 44px);
	}
}

@media (max-width: 640px) {
	.sg-mix-item {
		grid-template-columns: 44px 1fr 60px;
	}
	.sg-mix-genre {
		display: none;
	}
}

.sg-contact-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 560px;
}

.sg-contact-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.sg-input {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 14px 16px;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--unbounded);
	font-size: 15px;
	width: 100%;
	box-sizing: border-box;
}

.sg-input::placeholder {
	color: var(--wp--preset--color--text-tertiary);
}

.sg-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

textarea.sg-input {
	resize: vertical;
}

.sg-contact-form .sg-pill-button {
	border: none;
	font-size: 16px;
	padding: 18px 36px;
	cursor: pointer;
	align-self: flex-start;
	margin-top: 24px;
}

.sg-contact-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sg-contact-message {
	font-size: 14px;
	margin-top: 4px;
}

.sg-contact-message-success {
	color: var(--wp--preset--color--accent);
}

.sg-contact-message-error {
	color: #ff6b6b;
}

@media (max-width: 560px) {
	.sg-contact-row {
		grid-template-columns: 1fr;
	}
}

.sg-contact-columns {
	padding: 90px var(--wp--preset--spacing--section-x, 6vw);
	gap: 60px;
}

.sg-contact-info {
	display: flex;
	flex-direction: column;
	gap: 32px;
	justify-content: center;
}

.sg-contact-info-label {
	color: var(--wp--preset--color--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 13px;
	margin: 0 0 8px;
}

.sg-contact-info-email {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 24px;
}

.sg-contact-social {
	display: flex;
	gap: 6px;
}

.sg-contact-social-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-contact-social-icon:hover {
	transform: scale(1.08);
}

.sg-contact-social-instagram {
	background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5);
}

.sg-contact-social-soundcloud {
	background: #FF5500;
}

.sg-contact-social-ra {
	background: #000000;
}

.sg-hero {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 140px 6vw 0;
}

.sg-hero-banner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 160px;
	height: 160px;
	object-fit: cover;
	opacity: 0.35;
	z-index: 0;
}

.sg-hero-fade {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 160px;
	background: linear-gradient(180deg, transparent 40%, var(--wp--preset--color--background) 100%);
	z-index: 0;
}

.sg-hero-content {
	position: relative;
	z-index: 1;
	margin-top: clamp(24px, 8vh, 90px);
}

.sg-hero-eyebrow {
	color: var(--wp--preset--color--accent);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 15px;
	margin-bottom: 18px;
}

.sg-hero-title {
	font-size: var(--wp--preset--font-size--hero);
	line-height: 0.98;
	margin: 0;
	max-width: 20ch;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
}

.sg-hero-accent {
	color: var(--wp--preset--color--accent);
}

.sg-hero-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 44px;
}

.sg-pill-button.sg-hero-cta:hover {
	background: #ffffff;
}

.sg-hero-next-line {
	font-size: 16px;
	color: var(--wp--preset--color--text-secondary);
}

.sg-hero-scroll-hint {
	position: absolute;
	bottom: 24px;
	left: 6vw;
	font-size: 13px;
	color: var(--wp--preset--color--text-tertiary);
	z-index: 1;
}

@media (max-height: 700px) {
	.sg-hero-scroll-hint {
		display: none;
	}
}

.sg-marquee {
	background: var(--wp--preset--color--accent);
	padding: 18px 0;
	overflow: hidden;
	white-space: nowrap;
}

.sg-marquee-track {
	display: inline-flex;
	animation: sg-marquee var(--wp--custom--motion--marquee-duration, 22s) linear infinite;
}

.sg-marquee-text {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 26px;
	color: var(--wp--preset--color--background);
	text-transform: uppercase;
}

@keyframes sg-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.sg-dj-preview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--wp--preset--spacing--card-gap, 20px);
}

.sg-dj-preview-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--wp--preset--color--text);
	text-align: center;
	transition: transform var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-dj-preview-card:hover {
	transform: translateY(-4px);
}

.sg-dj-preview-card img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card, 18px);
}

.sg-dj-preview-card span {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 20px;
	text-transform: uppercase;
}

.sg-contact-cta {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: var(--wp--preset--spacing--section-y, 100px) 0;
}

.sg-contact-cta-decor {
	position: absolute;
	top: -60px;
	left: 50%;
	transform: translateX(-50%);
	width: 480px;
	max-width: 60vw;
	opacity: 0.35;
	pointer-events: none;
}

.sg-contact-cta-content {
	position: relative;
}

.sg-contact-cta-eyebrow {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 15px;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--accent);
	text-transform: uppercase;
	margin-bottom: 20px;
}

.sg-contact-cta-title {
	font-size: var(--wp--preset--font-size--section-header);
	line-height: 0.98;
	margin: 0 0 40px;
}

.sg-contact-cta-btn {
	font-size: 20px;
	padding: 20px 44px;
}

.sg-contact-cta .sg-contact-social {
	justify-content: center;
	gap: 14px;
	margin-top: 40px;
}

.sg-dj-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--card-gap-lg, 32px);
}

.sg-dj-card {
	background: none;
	border: none;
	cursor: pointer;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	color: var(--wp--preset--color--text);
	padding: 0;
	text-align: left;
	transition: transform var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-dj-card:hover {
	transform: translateY(-6px);
}

.sg-dj-card-photo {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 20px;
	display: block;
}

.sg-dj-card-name {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 22px;
	text-transform: uppercase;
}

.sg-dj-card-tagline {
	font-family: var(--wp--preset--font-family--gruno);
	font-size: 14px;
	color: #ADADA6;
	line-height: 1.6;
}

.sg-about-story {
	gap: 60px;
}

.sg-about-story-title {
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.15;
	margin: 0 0 28px;
}

.sg-about-badge img {
	width: 260px;
	height: 260px;
	max-width: 260px;
	border-radius: 50%;
	object-fit: cover;
	transform: scale(1.06);
}

.sg-about-story-text p {
	font-family: var(--wp--preset--font-family--unbounded);
	color: #d8d8d2;
	line-height: 1.8;
	font-size: 17px;
}

#sg-artist-overlay .sg-detail-overlay-description {
	font-family: var(--wp--preset--font-family--unbounded);
}

/* Mix pop-up description: fixed-height box that scrolls, so long texts
   never move the player, title or arrows. Fade at the bottom only while
   there's more to scroll (is-scrollable / is-end set by music-list view.js). */
.sg-mix-description {
	max-height: calc(1.8em * 8);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding-right: 8px;
}

.sg-mix-description.is-scrollable:not(.is-end) {
	mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent);
}

.sg-detail-overlay-description a {
	color: var(--wp--preset--color--accent);
	overflow-wrap: anywhere;
}

/* Text fields in Unbounded everywhere (contact, My Account, checkout blocks,
   quantity boxes, reviews) — including the ones that fell back to the
   browser default (Arial / monospace). Dropdowns stay Gruno (rule below).
   Not the staff box office (.sgt-*): its PIN digits keep the staff font.
   html body prefix: beats WooCommerce blocks' own `font-family: inherit`. */
html body :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="range"]), textarea):not(.sgt-input, .sgt-select, .sgt-form *) {
	font-family: var(--wp--preset--font-family--unbounded);
}

/* Checkout block fields: WooCommerce sets `font-family: inherit` with a
   3-class selector (packages-style.css), so match it and add html body. */
html body .wc-block-components-form :is(.wc-block-components-text-input, .wc-block-components-textarea) :is(input, textarea):not(.sgt-input, .wc-block-components-combobox *) {
	font-family: var(--wp--preset--font-family--unbounded);
}

/* Checkout field names ("Email address", "First name", "Country/Region")
   sit inside white fields but inherited the site's near-white text colour,
   so they were invisible. Theme grey instead. */
html body .wc-block-components-form :is(.wc-block-components-text-input label, .wc-blocks-components-select__label) {
	color: var(--wp--preset--color--text-tertiary);
}

/* Every dropdown keeps Gruno: plain <select>s (contact subject, shop
   sorting, product options, My Account and checkout country/state) and the
   checkout's type-to-search country box. Overrides the field rules above,
   .sg-input and the My Account field rules. */
html body select:not(.sgt-select),
html body .wc-block-components-combobox input,
html body .woocommerce-account .woocommerce form .form-row select {
	font-family: var(--wp--preset--font-family--gruno);
}

/* Fields that were stuck at the browser's default 13px: checkout
   "Apartment, suite…" and the product review box. */
.wc-block-components-address-form input[id$="-address_2"] {
	font-size: 16px;
}
#commentform textarea {
	font-size: 15px;
}

/* Product page: full description sits under Add to cart, next to the image. */
.sg-woo-page .sg-product-description {
	margin-top: 28px;
	line-height: 1.7;
}
.sg-woo-page .sg-product-description > :first-child {
	margin-top: 0;
}

/* Shop reading text: product description, review text, and the
   terms line at checkout. */
.sg-product-description,
#reviews .comment-text .description,
.wc-block-checkout__terms {
	font-family: var(--wp--preset--font-family--unbounded);
}

/* Unbounded is self-hosted (theme.json fontFamilies, assets/fonts/, licence
   assets/fonts/Unbounded-OFL.txt, SIL OFL 1.1) — no Google Fonts request.
   Reading text in Unbounded: event descriptions (featured event + every
   detail pop-up) and plain-content pages (privacy, terms, cookie policy —
   page.html / index.html). Set on the content wrapper so paragraphs, lists
   and Complianz's text inherit it; headings keep their own font. */
.sg-event-hero-description,
.sg-detail-overlay-description,
.sg-main-offset .wp-block-post-content {
	font-family: var(--wp--preset--font-family--unbounded);
}

.sg-home-section {
	padding: var(--wp--preset--spacing--section-y, 100px) var(--wp--preset--spacing--section-x, 6vw);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.sg-home-section--music {
	background: var(--wp--preset--color--panel);
}

.sg-home-section--gallery {
	padding-right: 0;
}

.sg-home-section--gallery .sg-section-header-row {
	padding-right: var(--wp--preset--spacing--section-x, 6vw);
}

.sg-gallery-scroller {
	padding-right: var(--wp--preset--spacing--section-x, 6vw);
}

.sg-section-header-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 48px;
}

.sg-section-link {
	color: var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	text-decoration: none;
	padding-bottom: 2px;
}

.sg-cart-icon,
.sg-header-icon {
	position: relative;
	display: flex;
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--text);
	margin-right: 16px;
	transition: color var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-cart-icon[hidden] {
	display: none;
}

.sg-cart-icon:hover,
.sg-header-icon:hover {
	color: var(--wp--preset--color--accent);
}

.sg-cart-icon-count {
	position: absolute;
	top: -6px;
	right: -10px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	border-radius: 50%;
	width: 18px;
	height: 18px;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sg-cart-icon-count[hidden] {
	display: none;
}

.sg-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 150;
	background: rgba(21, 21, 21, 0.6);
}

.sg-cart-drawer-inner {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	/* border-box so the padding can't push it past 100% on phones;
	   448px = the old 400px content-box width + 2×24px, desktop unchanged */
	box-sizing: border-box;
	width: min(448px, 100%);
	background: var(--wp--preset--color--surface);
	padding: 32px 24px;
	overflow-y: auto;
}

.sg-cart-drawer-close {
	background: none;
	border: none;
	color: var(--wp--preset--color--text);
	font-size: 24px;
	cursor: pointer;
	margin-bottom: 20px;
}

.sg-cart-drawer-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sg-cart-drawer-item {
	display: grid;
	grid-template-columns: 56px 1fr auto auto;
	gap: 12px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.sg-cart-drawer-item img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 10px;
}

.sg-cart-drawer-remove {
	background: none;
	border: none;
	color: var(--wp--preset--color--text-tertiary);
	cursor: pointer;
	font-size: 18px;
}

.sg-cart-drawer-total {
	margin: 20px 0;
	font-family: var(--wp--preset--font-family--gruno-bubble);
	text-transform: uppercase;
}

.sg-cart-drawer-checkout {
	display: block;
	text-align: center;
}

.sg-cart-drawer-error {
	color: #ff6b6b;
	margin-bottom: 16px;
}

/* Woo pages get no side gutter from the constrained layout, so below the
   1320px wideSize their content runs edge to edge — invisible on desktop,
   clipped on phones. Mobile-only so the approved desktop layout is unchanged. */
@media (max-width: 780px) {
	.sg-woo-page {
		padding-inline: var(--wp--preset--spacing--section-x, 6vw);
	}
	.sg-woo-page > .wp-block-group.is-nowrap {
		flex-wrap: wrap;
	}
}

/* WooCommerce cart/checkout brand-token overrides */
.sg-woo-page .wc-block-components-button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-family: var(--wp--preset--font-family--gruno-bubble);
	text-transform: uppercase;
	border: none;
}

.sg-woo-page .wc-block-components-panel,
.sg-woo-page .wc-block-cart-items,
.sg-woo-page .wc-block-components-product-name {
	color: var(--wp--preset--color--text);
}

/* Classic single-product add-to-cart button (the variations form isn't a
   block, WooCommerce renders it via the classic template/JS) — same pill
   treatment as .wc-block-components-button, but muted while WooCommerce's
   own variation-selection JS has it disabled (no valid size chosen yet). */
.sg-woo-page .single_add_to_cart_button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-family: var(--wp--preset--font-family--gruno-bubble);
	text-transform: uppercase;
	border: none;
	padding: 14px 28px;
	cursor: pointer;
}

.sg-woo-page .single_add_to_cart_button:disabled,
.sg-woo-page .single_add_to_cart_button.disabled {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text-tertiary, var(--wp--preset--color--text-secondary));
	cursor: not-allowed;
}

/* Product image gallery (WooCommerce's classic Flexslider gallery) ships
   with no frame of its own — a flat white square landing straight on the
   black theme background. Give it the same card treatment (radius + shadow)
   used for every other image surface on the site, see .sg-album-stack-cover.
   Flexslider JS wraps .woocommerce-product-gallery__wrapper (the wide slide
   track, which pans via transform) in a .flex-viewport div — round/clip the
   viewport, since rounding the track itself only shows the corner that
   happens to be at the current scroll offset. Also cover .wrapper directly
   for the no-JS/single-image case where .flex-viewport never gets inserted. */
.sg-woo-page .woocommerce-product-gallery__wrapper,
.sg-woo-page .flex-viewport {
	border-radius: var(--wp--custom--radius--card, 18px);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.sg-woo-page .flex-control-thumbs {
	display: flex;
	gap: 10px;
	/* !important: WooCommerce's own gallery CSS targets this element as
	   .woocommerce div.product div.images .flex-control-thumbs (4 classes +
	   2 elements), which out-specifies a plain two-class theme selector and
	   was cancelling this margin-top via its own margin:0 reset. */
	margin-top: var(--wp--preset--spacing--card-gap, 20px) !important;
}

.sg-woo-page .flex-control-thumbs li {
	width: auto;
	flex: 1;
}

.sg-woo-page .flex-control-thumbs img {
	border-radius: 10px;
	opacity: 0.55;
	transition: opacity var(--wp--custom--motion--hover-duration, 0.22s) ease,
		box-shadow var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-woo-page .flex-control-thumbs img.flex-active,
.sg-woo-page .flex-control-thumbs img:hover {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--wp--preset--color--accent);
}

/* Product Collection block cards — same flat-square-on-black problem as the
   single-product gallery above. Covers both the Shop archive grid and the
   "New in store" cross-sell shown on the empty Cart page: both render via
   woocommerce/product-collection, sharing this exact image block markup. */
.sg-woo-page .wc-block-components-product-image {
	border-radius: var(--wp--custom--radius--card, 18px);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.sg-woo-page input,
.sg-woo-page select {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	color: var(--wp--preset--color--text);
}

.sg-woo-page select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 10px 36px 10px 14px;
	font-family: inherit;
	font-size: 15px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23F5F5F5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.sg-woo-page .woocommerce-breadcrumb,
.sg-woo-page .wp-block-post-terms {
	line-height: 2.2;
}

.sg-woo-page .woocommerce-breadcrumb a,
.sg-woo-page .wp-block-post-terms a {
	display: inline-block;
	padding: 22px 0 10px;
	margin: -22px 0 -10px;
}

/* Native WooCommerce Product Filters block (category chips on the Shop
   page) — matches the same pill look as .sg-filter-tab (Events tabs)
   since it's the identical visual role, just backed by real WC classes
   instead of our own markup. */
.sg-woo-page .wc-block-product-filters {
	margin-bottom: 40px;
}

.sg-woo-page .wc-block-product-filter-chips__items {
	gap: 12px;
}

.sg-woo-page .wc-block-product-filter-chips__item {
	background: var(--wp--preset--color--panel);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--gruno-bubble);
	text-transform: uppercase;
	font-size: 14px;
	padding: 10px 22px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	border: none;
	transition: background var(--wp--custom--motion--hover-duration, 0.22s) ease, color var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-woo-page .wc-block-product-filter-chips__item[aria-checked="true"] {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	border: none;
}

.sg-woo-page .wc-block-product-filters__open-overlay {
	background: var(--wp--preset--color--panel);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--gruno-bubble);
	text-transform: uppercase;
	font-size: 14px;
	padding: 10px 22px;
	border-radius: var(--wp--custom--radius--pill, 999px);
}

.sg-woo-page .wc-block-product-filters__overlay-dialog {
	background: var(--wp--preset--color--background);
}

/* Complianz cookie policy: its document CSS hard-codes light backgrounds
   (#fff, #f7f7f7, #dadada, translucent white) that vanish under our light
   text. Repaint them with theme surfaces; `body` prefix outranks its
   #cmplz-document selectors regardless of stylesheet load order. */
body #cmplz-document .cmplz-dropdown,
body #cmplz-cookies-overview .cmplz-dropdown {
	background-color: var(--wp--preset--color--panel);
}

body #cmplz-document .cmplz-dropdown summary,
body #cmplz-cookies-overview .cmplz-dropdown summary {
	background-color: var(--wp--preset--color--surface-hover);
}

body #cmplz-document .cmplz-dropdown .cookies-per-purpose,
body #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose {
	background-color: var(--wp--preset--color--border);
}

body #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(n),
body #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(n) {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
}

/* Complianz sizes its dropdown blocks width: 100% + 15px side padding in
   content-box, so each one ran 30px past the text column (cut off on
   phones). Count the padding inside the width instead. */
body #cmplz-document .cmplz-dropdown *,
body #cmplz-cookies-overview .cmplz-dropdown * {
	box-sizing: border-box;
}

/* Cookie table: label column as wide as its longest label ("Expiration"
   was clipped at 100px); value column capped to the space left, so the
   full-width section headings and long cookie names wrap instead of
   stretching the table past the screen. */
@media only screen and (max-width: 600px) {
	/* Complianz's own 2-column phone layout (100px 1fr) uses this exact
	   selector at this breakpoint; `body` prefix wins. */
	body #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose,
	body #cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
		grid-template-columns: max-content minmax(0, 1fr);
	}
}

body #cmplz-document .cmplz-dropdown .cookies-per-purpose > div,
body #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose > div {
	min-width: 0;
}

/* Long cookie names (links or plain text, e.g. wcpay_appearance_…) wrap
   anywhere; the labels column keeps whole words. */
body #cmplz-document .cmplz-dropdown .cookies-per-purpose .name,
body #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .name {
	overflow-wrap: anywhere;
}

/* Phones: each dropdown's header row is a 3-column grid (service name,
   "uses cookies" note, toggle) that doesn't fit ~340px and pushed the
   page wider than the screen. Let it wrap instead. */
@media (max-width: 560px) {
	body #cmplz-document .cmplz-service-header > div,
	body #cmplz-cookies-overview .cmplz-service-header > div {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 10px;
	}
}

/* The hidden "Consent to service …" text of each toggle sat as a 1px box
   just past the toggle, i.e. past the screen edge. Pin it inside. */
body #cmplz-document .cmplz_consent_per_service_label,
body #cmplz-cookies-overview .cmplz_consent_per_service_label {
	position: relative;
}

body #cmplz-document .cmplz_consent_per_service_label .screen-reader-text,
body #cmplz-cookies-overview .cmplz_consent_per_service_label .screen-reader-text {
	top: 0;
	left: 0;
}

body #cmplz-document .cmplz-dropdown summary div::after,
body #cmplz-cookies-overview .cmplz-dropdown summary div::after {
	filter: invert(1);
}

.sg-footer-legal {
	display: flex;
	gap: 16px;
	margin: 0;
	font-size: 10px;
}

.sg-footer-legal a {
	color: var(--wp--preset--color--text-tertiary);
	text-decoration: none;
}

.sg-footer-legal a:hover {
	color: var(--wp--preset--color--text);
}


/* =========================================================================
   Tickets: ticket product page (tier list) - templates/single-product-ticket.html
   Row rhythm and type follow the events list; sizes per approved mockup.
   ========================================================================= */
.sg-ticket-page .wp-block-post-title {
	margin-top: 0;
}

.sg-ticket-flyer {
	aspect-ratio: 4 / 5;
}

.sg-ticket-tiers .sg-event-facts {
	margin: 0 0 8px;
}

.sg-tier-head {
	display: flex;
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--gruno);
	font-size: 13px;
	color: var(--wp--preset--color--text-tertiary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 8px 0 12px;
}

.sg-tier-list {
	border-top: 1px solid var(--wp--preset--color--border);
	margin: 0 0 12px;
}

.sg-tier-row {
	all: unset;
	box-sizing: border-box;
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--gruno-bubble);
	text-transform: uppercase;
	font-size: 14px;
	color: var(--wp--preset--color--text);
	transition: background var(--wp--custom--motion--hover-duration, 0.22s) ease;
}

.sg-tier-row:hover {
	background: var(--wp--preset--color--surface-hover);
}

.sg-tier-row:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

.sg-tier-row.is-selected {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

.sg-tier-row.is-ended,
.sg-tier-row.is-sold-out {
	color: var(--wp--preset--color--text-tertiary);
	text-decoration: line-through;
	cursor: default;
}

.sg-tier-row.is-upcoming {
	color: var(--wp--preset--color--text-tertiary);
	cursor: default;
}

.sg-tier-row.is-ended:hover,
.sg-tier-row.is-sold-out:hover,
.sg-tier-row.is-upcoming:hover {
	background: none;
}

.sg-tier-row small {
	display: block;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--gruno);
	font-size: 12px;
	text-transform: none;
	text-decoration: none;
}

.sg-tier-price {
	white-space: nowrap;
}

.sg-tier-price .woocommerce-Price-amount {
	font-family: inherit;
}

.sg-tier-note,
.sg-tier-soldout {
	font-family: var(--wp--preset--font-family--gruno);
	font-size: 13px;
	color: var(--wp--preset--color--text-tertiary);
	margin: 0 0 32px;
}

.sg-tier-buy {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.sg-qty {
	display: flex;
	align-items: center;
	gap: 20px;
}

.sg-qty button {
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	border: 1px solid var(--wp--preset--color--accent);
	background: none;
	color: var(--wp--preset--color--text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.sg-qty button:disabled {
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--text-tertiary);
	cursor: default;
}

.sg-qty output {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 28px;
	min-width: 1ch;
	text-align: center;
}

.sg-tier-buy .sg-pill-button {
	border: none;
	font-size: 14px;
	padding: 14px 32px;
	cursor: pointer;
}

.sg-tier-buy .sg-pill-button:disabled {
	opacity: 0.6;
	cursor: wait;
}

.sg-tier-error {
	color: #ff8a8a;
	font-family: var(--wp--preset--font-family--gruno);
	font-size: 14px;
	margin: 16px 0 0;
}

.sg-ticket-lineup-section {
	padding-top: 100px;
}

/* =========================================================================
   Tickets: My Account (WooCommerce account pages, restyled with the site's
   existing input / pill / events-list components)
   ========================================================================= */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

.sg-account-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 48px;
}

.sg-account-nav .sg-filter-tab {
	text-decoration: none;
}

/* Inputs and buttons: same look as .sg-input and the pill buttons. */
.woocommerce-account .woocommerce-Input,
.woocommerce-account input.input-text,
.woocommerce-account select,
.woocommerce-account textarea {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 14px 16px;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--unbounded);
	font-size: 15px;
	width: 100%;
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-Input:focus,
.woocommerce-account input.input-text:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

.woocommerce-account .woocommerce-button,
.woocommerce-account button.button,
.woocommerce-account .woocommerce-Button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	border: none;
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 16px 32px;
	font-family: var(--wp--preset--font-family--gruno-bubble);
	text-transform: uppercase;
	font-size: 15px;
	cursor: pointer;
}

.woocommerce-account label {
	font-family: var(--wp--preset--font-family--gruno);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--text-tertiary);
}

/* Account details: details form, billing + shipping address forms, then the
   password change — each a section with the same heading style. */
.woocommerce-account .woocommerce-EditAccountForm ~ form,
.sg-account-password {
	margin-top: 64px;
}

.sg-account-password fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

/* Outside any <form>, so WooCommerce's .woocommerce form .form-row spacing
   doesn't reach these rows: match it so they line up with the fields above. */
.sg-account-password .form-row {
	padding: 3px;
	margin: 0 0 6px;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.sg-account-password legend {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	text-transform: uppercase;
	font-weight: normal;
	padding: 0;
	margin: 0 0 24px;
}

/* Country / state pickers (selectWoo): same look as the inputs. */
.woocommerce-account .select2-container .select2-selection--single {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	height: 51px; /* = the text inputs: 2 × 14px padding + 21px line + border */
	padding: 0 6px;
	display: flex;
	align-items: center;
}

.woocommerce-account .select2-container .select2-selection--single .select2-selection__rendered {
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--gruno);
	font-size: 15px;
	line-height: 1.4;
	padding-left: 10px;
	flex: 1;
}

.woocommerce-account .select2-container .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: 10px;
}

.woocommerce-account .select2-container .select2-selection--single .select2-selection__arrow b {
	border-top-color: var(--wp--preset--color--text-secondary);
}

.woocommerce-account .select2-dropdown {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--gruno);
}

.woocommerce-account .select2-container--default .select2-search--dropdown .select2-search__field {
	background: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
}

.woocommerce-account .select2-container--default .select2-results__option--highlighted[aria-selected],
.woocommerce-account .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

/* Logged out: one centred panel, Log in OR Create account. WooCommerce caps
   main .woocommerce at 1000px, left-aligned: centre that box too, or the
   panel is only centred within it. */
.woocommerce-account main .woocommerce:has(> .sg-account-panel) {
	margin-inline: auto;
}

.sg-account-panel {
	max-width: 520px;
	margin: 0 auto;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 20px;
	padding: 40px;
	box-sizing: border-box;
}

.sg-account-panel form[hidden] {
	display: none !important; /* WooCommerce's form CSS would otherwise override [hidden] */
}

.sg-account-panel .woocommerce-Input,
.sg-account-panel input.input-text {
	background: var(--wp--preset--color--background);
}

.sg-account-panel h2 {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	text-transform: uppercase;
	font-weight: normal;
	margin: 0 0 24px;
}

.sg-account-panel p.form-row {
	margin: 0 0 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sg-account-panel p.sg-account-remember {
	flex-direction: row;
}

.sg-account-panel .woocommerce-form-login__submit,
.sg-account-panel .woocommerce-form-register__submit {
	width: 100%;
}

.sg-account-switch,
.sg-account-hint {
	font-family: var(--wp--preset--font-family--gruno);
	color: var(--wp--preset--color--text-secondary);
	font-size: 14px;
	line-height: 1.6;
	margin: 24px 0 0;
}

.sg-claim-note {
	font-family: var(--wp--preset--font-family--gruno);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 0 0 24px;
	line-height: 1.6;
}

.sg-claim-note strong {
	color: var(--wp--preset--color--accent);
	font-weight: normal;
}

/* Tickets tab: events-list rows whose trigger is a link. */
.sgt-account-tickets .sg-events-list-trigger {
	text-decoration: none;
	color: inherit;
}

.sgt-account-past-label {
	margin-top: 64px;
}

.sgt-back {
	display: inline-block;
	margin-bottom: 40px;
}

/* One ticket: the event detail panel, laid inline, QR in the media slot. */
.sgt-ticket-panel {
	max-width: 1000px;
	max-height: none;
}

.sgt-ticket-panel .sg-detail-overlay-content {
	max-height: none;
}

.sgt-ticket-qr {
	background: var(--wp--preset--color--text);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
}

.sgt-ticket-qr svg {
	width: 100%;
	height: auto;
	display: block;
}

.sgt-ticket-qr.is-used svg {
	opacity: 0.25;
}

.sgt-ticket-status {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--gruno-bubble);
	text-transform: uppercase;
	font-size: 13px;
	padding: 6px 14px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	margin-bottom: 16px;
}

.sgt-ticket-status.is-used {
	background: var(--wp--preset--color--surface-hover);
	color: var(--wp--preset--color--text-secondary);
}

.sgt-ticket-facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 24px;
	margin: 0 0 24px;
	font-family: var(--wp--preset--font-family--gruno);
}

.sgt-ticket-facts dt {
	color: var(--wp--preset--color--text-tertiary);
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.06em;
	align-self: center;
}

.sgt-ticket-facts dd {
	margin: 0;
	color: var(--wp--preset--color--text);
}

/* Transfer: its own panel under the ticket, same width. */
.sgt-ticket-transfer {
	box-sizing: border-box;
	max-width: 1000px;
	margin-top: 64px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 20px;
	padding: 48px;
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 48px;
	align-items: start;
}

.sgt-ticket-transfer .sg-detail-overlay-title {
	white-space: nowrap;
	font-size: clamp(24px, 3vw, 36px);
}

.sgt-ticket-warning {
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 16px;
	padding: 20px 24px;
	font-family: var(--wp--preset--font-family--gruno);
	line-height: 1.6;
}

.sgt-ticket-warning strong {
	display: block;
	margin-bottom: 6px;
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-weight: normal;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.sgt-ticket-transfer-form {
	max-width: none;
	gap: 8px;
}

.sgt-ticket-transfer-form .sg-input {
	background: var(--wp--preset--color--background);
	margin-bottom: 8px;
}

.sgt-ticket-transfer-form .sg-pill-button {
	margin-top: 8px;
}

.sgt-label {
	font-family: var(--wp--preset--font-family--gruno);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--text-tertiary);
}

/* WooCommerce notices on account pages (transfer done, claim errors). */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
	list-style: none;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 0 0 32px;
	background: none;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--gruno);
}

.woocommerce-account .woocommerce-error {
	border-color: #ff8a8a;
}

@media (max-width: 780px) {
	.sg-account-panel {
		padding: 28px;
	}

	.sgt-ticket-transfer {
		grid-template-columns: 1fr;
		padding: 28px;
		gap: 28px;
	}

	.sgt-ticket-transfer .sg-detail-overlay-title {
		white-space: normal;
	}
}

/* Header icons: cart (only when it has items) + account, right before Menu. */
.sg-header-icons {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-right: 16px;
}

.sg-header-icons .sg-cart-icon,
.sg-header-icons .sg-header-icon {
	margin-right: 0;
}

.sg-account-menu {
	position: relative;
}

/* The shared dropdown panel, anchored to the right edge under the icon. */
.sg-account-menu .sg-dropdown-panel {
	left: auto;
	right: 0;
	z-index: 20;
	min-width: 180px;
}

.sg-account-menu .sg-dropdown-panel a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--gruno);
	white-space: nowrap;
}

.sg-account-menu .sg-dropdown-panel a:hover,
.sg-account-menu .sg-dropdown-panel a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* WooCommerce's form CSS (.woocommerce form.login { border; padding } and
   .woocommerce form .form-row .input-text { white }) out-specifies the rules
   above; match its specificity so the single dark panel wins. */
.woocommerce-account .woocommerce .sg-account-panel form.login,
.woocommerce-account .woocommerce .sg-account-panel form.register {
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

.woocommerce-account .woocommerce form .form-row .input-text,
.woocommerce-account .woocommerce form .form-row select {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 14px 16px;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--unbounded);
	font-size: 15px;
	line-height: 1.4;
}

.woocommerce-account .woocommerce .sg-account-panel form .form-row .input-text {
	background: var(--wp--preset--color--background);
}

.woocommerce-account .woocommerce form .form-row .input-text:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

.woocommerce-account .woocommerce .sg-account-panel .password-input,
.woocommerce-account .woocommerce .sg-account-panel .show-password-input {
	color: var(--wp--preset--color--text-secondary);
}

/* =========================================================================
   Phones — tighter page tops, DJ swipe strip, one-line contact email
   ========================================================================= */
@media (max-width: 560px) {
	/* Page titles sat ~300px down (180px padding + 90px content offset);
	   start them just below the 160px banner strip instead. */
	.sg-page-header {
		padding: 184px var(--wp--preset--spacing--section-x, 6vw) 32px;
	}
	.sg-page-header-content {
		margin-top: 0;
	}

	/* Section rhythm: the desktop spacing (100px section-y on both sides of
	   every home section, 80–90px section pads, 48px under section headings)
	   left 200px+ of empty screen between sections. Roughly halve it. */
	body {
		--wp--preset--spacing--section-y: 52px;
	}
	.sg-section-pad {
		padding-block: 44px;
	}
	.sg-section-pad--tight-top {
		padding-top: 24px;
	}
	.sg-contact-columns {
		padding-block: 44px;
		gap: 40px;
	}
	.sg-about-story {
		gap: 28px;
	}
	.sg-section-header-row {
		margin-bottom: 24px;
	}
	.sg-music-featured {
		gap: 20px;
	}

	/* Home hero: no full-screen height on phones — content right below the
	   160px banner strip, next section right after the button. */
	.sg-hero {
		min-height: 0;
		padding: 184px var(--wp--preset--spacing--section-x, 6vw) 44px;
	}
	.sg-hero-content {
		margin-top: 0;
	}
	/* "Copenhagen DJ collective": small one-line label over the big title,
	   like desktop (15px wrapped to two lines here; 11px is ~257px wide). */
	.sg-hero-eyebrow {
		font-size: 11px;
		white-space: nowrap;
		margin-bottom: 12px;
	}
	.sg-hero-scroll-hint {
		display: none;
	}

	/* Home DJ photos: swipe strip (same pattern as .sg-gallery-scroller).
	   ~2.5 cards visible + a fade on the right edge so the cut-off card
	   reads as "there's more, swipe". */
	.sg-dj-preview-grid {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-right: calc(-1 * var(--wp--preset--spacing--section-x, 6vw));
		padding-right: var(--wp--preset--spacing--section-x, 6vw);
		mask-image: linear-gradient(to right, #000 75%, transparent);
	}
	.sg-dj-preview-grid::-webkit-scrollbar {
		display: none;
	}
	.sg-dj-preview-card {
		flex: 0 0 38%;
		scroll-snap-align: start;
		gap: 8px;
	}
	.sg-dj-preview-card span {
		font-size: 15px;
	}

	.sg-contact-info-email {
		font-size: clamp(14px, 4.6vw, 24px);
		white-space: nowrap;
	}

	/* Mix pop-up on phones: starts just under CLOSE, ‹ › on their own row
	   right after the text, and everything fits the screen — when space runs
	   short the description box shrinks (and scrolls) instead of the pop-up
	   overflowing under CLOSE or pushing the arrows off-screen.
	   Row 1 takes all the height above the arrows row, so the arrows stay
	   pinned at the bottom and the player at the top whatever the text. */
	.sg-music-overlay {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: minmax(0, 1fr) auto;
		align-content: stretch;
		align-items: stretch; /* base overlay centres items, which kept the panel at full content height */
		justify-content: stretch;
		padding: 92px var(--wp--preset--spacing--section-x, 6vw) 12px;
		overflow: hidden;
	}
	.sg-music-overlay .sg-detail-overlay-panel {
		grid-column: 1 / -1;
		grid-row: 1;
		min-height: 0;
		max-height: none;
		overflow: hidden;
	}
	.sg-music-overlay .sg-detail-overlay-arrow {
		position: static;
		transform: none;
		grid-row: 2;
		margin-top: 8px;
	}
	.sg-music-overlay .sg-detail-overlay-next {
		grid-column: 3;
	}
	.sg-mix-detail-text {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}
	.sg-mix-description {
		flex: 0 1 auto;
		min-height: calc(1.8em * 3);
		max-height: none;
		margin-bottom: 0;
	}

	/* Shop: always two products per row. WooCommerce's responsive grid
	   wants >= ~150px per card + 20px gap, so at 360px it fell to one. */
	.wc-block-product-template.wc-block-product-template__responsive {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 14px;
	}
	/* On the link: the title block's has-medium-font-size is !important. */
	.wc-block-product-template .wc-block-product .wp-block-post-title a {
		font-size: 15px;
	}
	/* Sorting dropdown: own full-width line (its fixed 340px wouldn't
	   shrink inside the results-count row, so it ran past the edge). */
	.wc-block-catalog-sorting {
		flex: 1 1 100%;
		min-width: 0;
	}
	.woocommerce-ordering select {
		width: 100%;
	}
	.wc-block-product-template .wc-block-product .wp-element-button,
	.wc-block-product-template .wc-block-product .button {
		font-size: 12px;
		padding: 10px 14px;
		white-space: normal;
	}

	/* The wordmark PNG has ~22px of empty space left of the letters, so
	   match it on the right: MENU then sits as far from the edge as the
	   visible logo does. */
	.sg-site-header {
		padding-right: 38px;
	}

	/* About: two DJs per row. */
	.sg-dj-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 14px;
	}
	.sg-dj-card {
		gap: 10px;
	}
	.sg-dj-card-photo {
		border-radius: 14px;
	}
	.sg-dj-card-name {
		font-size: 16px;
	}
	.sg-dj-card-tagline {
		font-size: 12px;
		line-height: 1.5;
	}

	/* Footer: one centered column — badge, note, then copyright + legal
	   links last. `display: contents` lifts badge and meta out of the brand
	   group so `order` can put the note between them. */
	/* .wp-block-group prefix: outranks WP's generated flex-layout rule
	   (row + wrap + space-between), which can print after this stylesheet. */
	.wp-block-group.sg-site-footer,
	.wp-block-group.sg-footer-meta {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.wp-block-group.sg-site-footer {
		gap: 20px;
	}
	.wp-block-group.sg-footer-brand {
		display: contents;
	}
	.sg-footer-brand .sg-logo {
		order: 1;
	}
	.sg-footer-note {
		order: 2;
	}
	.sg-footer-brand .sg-footer-meta {
		order: 3;
	}
}

/* Smallest phones (360px): shrink the wordmark a step so logo, account
   icon and MENU still fit on one row. Same crop maths as the 560px rule. */
@media (max-width: 400px) {
	.sg-site-header {
		padding-right: 30px;
	}
	.sg-site-header > .wp-block-group {
		gap: 10px;
	}
	.sg-logo--wordmark {
		height: 48px;
	}
	.sg-logo--wordmark img {
		height: 96px;
		margin: -24px 0;
	}
}

/* ── 3-year anniversary landing page (templates/page-3-years.html) ── */

.sg-anniv {
	/* The compact sg/page-header banner above already clears the fixed header. */
	padding-top: 0;
}

.sg-anniv > * {
	margin-block: 0;
}

.sg-anniv-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	max-width: 1240px;
	margin-inline: auto;
	gap: clamp(32px, 4vw, 56px);
	/* stretch: the flyer column matches the text + sign-up column's height. */
	align-items: stretch;
	padding: 48px var(--wp--preset--spacing--section-x, 6vw) var(--wp--preset--spacing--section-y, 100px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.sg-anniv-flyer {
	display: block;
	width: 100%;
	/* height 0 + min-height 100%: the flyer doesn't size the row itself, it
	   fills whatever height the text + sign-up column sets (cropping a little
	   off the top/bottom, where the flyer has no text). */
	height: 0;
	min-height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card, 18px);
}

.sg-anniv-hero-main {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.sg-anniv-hero-main > * {
	margin-block: 0;
}

.sg-anniv-title {
	font-size: clamp(26px, 3.2vw, 46px);
	line-height: 0.95;
	margin: 0 0 24px;
}

.sg-anniv-lede {
	font-family: var(--wp--preset--font-family--unbounded);
	color: var(--wp--preset--color--text-secondary);
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.6;
	max-width: 34em;
	margin: 0;
}

/* Newsletter offer (sg/newsletter-offer): the one lime surface on the page. */
.sg-offer {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	border-radius: var(--wp--custom--radius--card, 18px);
	padding: clamp(28px, 4vw, 44px);
}

.sg-offer [hidden] {
	display: none;
}

.sg-offer-success:focus {
	outline: none;
}

.sg-offer-heading {
	/* One line: sized to the box width (desktop column / phone width). */
	font-size: clamp(18px, 2.1vw, 30px);
	white-space: nowrap;
	line-height: 1;
	margin: 0 0 12px;
}

.sg-offer-intro {
	font-family: var(--wp--preset--font-family--unbounded);
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 24px;
}

.sg-offer-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.sg-offer-form .sg-input {
	flex: 1 1 200px;
	width: auto;
	/* An input's default min-width is its intrinsic size (~20 characters of
	   the wide Unbounded face), which overflowed the box on narrow phones. */
	min-width: 0;
	background: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--background);
}

.sg-offer .sg-pill-button {
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--accent);
	border: none;
	font-size: 16px;
	cursor: pointer;
}

.sg-offer .sg-pill-button:disabled {
	opacity: 0.6;
	cursor: wait;
}

.sg-offer .sg-pill-button:focus-visible,
.sg-offer-copy:focus-visible,
.sg-offer a:focus-visible {
	outline: 2px solid var(--wp--preset--color--background);
	outline-offset: 3px;
}

.sg-offer-error {
	font-family: var(--wp--preset--font-family--unbounded);
	font-size: 14px;
	font-weight: 600;
	margin: 12px 0 0;
}

.sg-offer-fineprint {
	font-family: var(--wp--preset--font-family--unbounded);
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.75;
	margin: 16px 0 0;
}

.sg-offer a:not(.sg-pill-button) {
	color: inherit;
}

.sg-offer-code-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 2px dashed var(--wp--preset--color--background);
	border-radius: 12px;
	padding: 14px 14px 14px 20px;
	margin-bottom: 24px;
}

.sg-offer-code {
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: clamp(26px, 3vw, 36px);
	letter-spacing: 0.04em;
}

.sg-offer-copy {
	background: transparent;
	border: 2px solid var(--wp--preset--color--background);
	border-radius: var(--wp--custom--radius--pill, 999px);
	color: inherit;
	font-family: var(--wp--preset--font-family--unbounded);
	font-size: 14px;
	font-weight: 600;
	padding: 8px 16px;
	cursor: pointer;
}

@media (max-width: 900px) {
	.sg-anniv-flyer {
		height: auto;
		min-height: 0;
	}

	.sg-offer-heading {
		font-size: min(5vw, 30px);
	}

	/* Keeps "Three years of" on one line on small phones (~320px). */
	.sg-anniv-title {
		font-size: min(7.2vw, 38px);
	}

	.sg-anniv-hero {
		grid-template-columns: minmax(0, 480px);
		justify-content: center;
		gap: 32px;
		padding-top: 24px;
	}
}

/* ── Newsletter offer pop-up (inc/offer-popup.php) ── */

.sg-offer-popup {
	width: min(520px, calc(100vw - 32px));
	max-width: none;
	padding: 0;
	border: none;
	background: transparent;
	color: inherit;
	overflow: visible;
}

.sg-offer-popup::backdrop {
	background: rgba(0, 0, 0, 0.7);
}

.sg-offer-popup-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--accent);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.sg-offer-popup-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--background);
	outline-offset: 3px;
}

/* Room for the close button beside the heading. */
.sg-offer-popup .sg-offer-heading {
	padding-right: 40px;
}

.sg-offer-popup-tab {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: var(--wp--custom--z--header, 50);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	border: none;
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 10px 18px;
	font-family: var(--wp--preset--font-family--gruno-bubble);
	font-size: 14px;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.sg-offer-popup-tab[hidden] {
	display: none;
}

.sg-offer-popup-tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--text);
	outline-offset: 3px;
}