/* =============================================================
   aleagues-fse — single compiled stylesheet
   --------------------------------------------------------------
   Brand tokens live in theme.json (settings.color.palette,
   typography.fontFamilies). Reference them as
   var(--wp--preset--color--*) and var(--wp--preset--font-family--*)
   — never hardcode hex. (VL-BUILD-STANDARDS §3.3.)

   Section order:
     1. Reset + base
     2. Site header (fixed, shrink-on-scroll, hamburger drawer)
     3. Site footer
     4. Home page section variants (hero, onsale, upcoming, enquiry)
     5. A-League Finals — events grid + event card
     6. A-League Finals — products grid + product card
     7. A-League Finals — single event page
     8. A-League Finals — button variants
     9. WooCommerce overrides
    10. Product add-on UI (drinks / catering / guest steppers)
    11. Gravity Forms accents
    12. Cart / checkout layout overrides
    13. Misc / utility
   ============================================================= */


/* =============================================================
   1. RESET + BASE
   ============================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

/* Accessibility — skip link is hidden by default, visible on keyboard focus
   so screen-reader / keyboard users can jump straight to <main id="site-main">. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal;
}
.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9rem;
	font-weight: 700;
	left: 1rem;
	top: 1rem;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	z-index: 100001;
}

/* Default page background is plain white. The diagonal cross-hatch pattern is
   only applied to specific sections that want the textured treatment (header,
   footer, on-sale dark section, Grand Final warm-gold section). Light home
   sections + every other page use this plain white default. */
body {
	background-color: var(--wp--preset--color--bg);
}

strong { color: inherit; }


/* =============================================================
   2. SITE HEADER
   --------------------------------------------------------------
   Two-tier wrapper:
     .site-header        — full viewport width (sticky background, gold edge)
     .site-header__inner — constrained to content-size

   The CSS custom property --header-height is written by
   assets/js/animations.js on load + resize so the
   .wp-site-blocks padding-top tracks the real height in pixels.
   ============================================================= */

.wp-site-blocks {
	padding-top: var(--header-height, 140px);
}

/* -- HEADER (two-tier) ---------------------------------------------------- */
/* Row 1: site-header__logo-row — dark + stripe, dual-logo lockup centred.
   Row 2: site-header__nav-row  — charcoal #1a1a1a, nav centred, gold gradient line above.
   Outer .site-header is the fixed sticky container holding both rows. */

.site-header {
	position: fixed !important;
	top: var(--wp-admin--admin-bar--height, 0px) !important;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
	background-color: var(--wp--preset--color--dark);
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 6px,
		rgba(255, 255, 255, 0.03) 6px,
		rgba(255, 255, 255, 0.03) 7px
	);
	transition: box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

/* Kill the WP-injected block-gap between header rows (flow-layout block-gap
   applied to .site-header__logo-row + .site-header__nav-row). The two rows
   should sit flush. */
.site-header > * { margin-block: 0 !important; }

.site-header::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--primary) 0%,
		var(--wp--preset--color--dark) 100%);
	pointer-events: none;
	z-index: 2;
}

.site-header.is-shrunk { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }

/* Row 1 — logo lockup. More generous vertical space, larger lockup. */
.site-header__logo-row {
	padding: 1.1rem 1.5rem;
	transition: padding 0.3s ease;
}
.site-header.is-shrunk .site-header__logo-row { padding: 0.4rem 1.5rem; }

.site-header__logo {
	margin: 0 !important;
	max-width: 760px;
	width: 100%;
}
.site-header__logo a { display: block; line-height: 0; }
.site-header__logo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 108px;
	object-fit: contain;
	transition: max-height 0.3s ease;
}
.site-header.is-shrunk .site-header__logo img { max-height: 56px; }

/* Row 2 — nav band (charcoal, gold gradient top line). Flush against logo row. */
.site-header__nav-row {
	background-color: var(--wp--preset--color--charcoal);
	padding: 0 1.5rem;
	margin: 0 !important;
	min-height: 44px;
	position: relative;
}

.site-header__nav-row::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--wp--preset--color--primary) 30%,
		var(--wp--preset--color--accent) 50%,
		var(--wp--preset--color--primary) 70%,
		transparent 100%);
	pointer-events: none;
}


/* Nav links — uppercase, gold on charcoal, brand hover */
.site-header__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--bg) !important;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 13px;
	padding: 0.7rem 1.25rem;
}

.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary) !important;
}

/* Belt-and-braces: never wrap inline nav above the drawer breakpoint. */
.site-header__nav .wp-block-navigation__container {
	flex-wrap: nowrap;
}

/* Hamburger button colour */
.site-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--bg);
}


/* --------- Hamburger drawer (VL-BUILD-STANDARDS §2.3) -------- */

/* Scroll lock — safe at any breakpoint because .is-menu-open only exists when open. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) {
	overflow: hidden;
}

@media (max-width: 1023px) {

	.site-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.site-header .wp-block-navigation__responsive-close {
		position: fixed !important;
		inset: 0 !important;
		background: rgba(0, 0, 0, 0.5) !important;
		z-index: 9998 !important;
	}

	body .site-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		background: none !important;
		z-index: 9998 !important;
		box-shadow: none !important;
		padding: 0 !important;
		animation: none !important;
		overflow: visible !important;
	}

	.site-header .wp-block-navigation__responsive-dialog {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		width: 320px !important;
		max-width: 85vw !important;
		height: 100dvh !important;
		background: var(--wp--preset--color--dark) !important;
		background-image: repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 6px,
			rgba(255, 255, 255, 0.03) 6px,
			rgba(255, 255, 255, 0.03) 7px
		) !important;
		z-index: 9999 !important;
		overflow-y: auto !important;
		padding: var(--header-height, 90px) 2rem 2rem !important;
		box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4) !important;
		animation: site-drawer-in 0.25s ease-out !important;
		display: flex !important;
		flex-direction: column !important;
	}

	@keyframes site-drawer-in {
		from { transform: translateX(100%); }
		to   { transform: translateX(0); }
	}

	.site-header .wp-block-navigation__responsive-container-close {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		width: 4rem !important;
		height: var(--header-height, 90px) !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		background: transparent !important;
		border: 0 !important;
		cursor: pointer !important;
		color: var(--wp--preset--color--bg) !important;
		z-index: 1 !important;
	}

	.site-header .is-menu-open .wp-block-navigation__container {
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		gap: 0 !important;
	}

	.site-header .is-menu-open .wp-block-navigation-item {
		width: 100% !important;
	}
}

@media (min-width: 1024px) {
	.site-header .wp-block-navigation__responsive-container-open {
		display: none !important;
	}
	.site-header .wp-block-navigation__responsive-container {
		display: block;
		position: static;
		background: transparent;
		width: auto;
	}
}

/* Drawer item links — full-width stacked (always safe; scoped by .is-menu-open) */
.site-header .is-menu-open .wp-block-navigation-item__content {
	display: block !important;
	width: 100% !important;
	padding: 0.875rem 0 !important;
	text-align: left !important;
	color: var(--wp--preset--color--bg) !important;
	border-bottom: 1px solid rgba(185, 154, 75, 0.18);
}


/* =============================================================
   3. SITE FOOTER
   ============================================================= */

/* Single-row footer matching live: dark bg + stripe, gold gradient top line,
   copyright text left, footer nav right. No 'Quick Links' heading, no brand
   block, no separate copyright row. */
.site-footer {
	background-color: var(--wp--preset--color--dark);
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 6px,
		rgba(255, 255, 255, 0.03) 6px,
		rgba(255, 255, 255, 0.03) 7px
	);
	color: var(--wp--preset--color--muted);
	padding: 1.25rem 1.5rem;
	position: relative;
}

.site-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--primary) 0%,
		var(--wp--preset--color--dark) 100%);
}

.site-footer a { color: var(--wp--preset--color--primary); text-decoration: none; }
.site-footer a:hover { color: var(--wp--preset--color--bg); text-decoration: underline; }

.site-footer__inner {
	max-width: var(--wp--style--global--content-size, 1310px);
	margin-inline: auto;
	gap: 1.5rem;
	width: 100%;
}

.site-footer__copyright {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	margin: 0 !important;
}

.site-footer__nav .wp-block-navigation-item__content {
	font-size: 0.85rem;
	padding: 0 0 0 1.5rem !important;
	color: var(--wp--preset--color--primary) !important;
	letter-spacing: 0.02em;
	text-transform: none !important;
}
.site-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--bg) !important;
}


/* =============================================================
   4. HOME PAGE SECTIONS
   ============================================================= */

/* Kill the block-gap above the first content block under the header AND
   between sibling sections inside <main>. .site-main has is-layout-flow which
   injects `margin-block-start: var(--wp--style--global--block-gap)` on every
   sibling after the first — that's what creates the off-white stripe band
   visible between the hero and the first home section. Zero them all out. */
.wp-site-blocks > .wp-block-template-part { margin: 0 !important; }
.site-main { margin: 0 !important; }
.site-main > * { margin-block: 0 !important; }

/* Constrained inner wrapper used by page.html, single.html, single-aleague_event.html.
   Force max-width + center + inline padding so content sits in the 1310px column
   on every page — the WP-injected constrained-layout container class can be
   inconsistent when nested inside a layout:default main. */
.site-main__inner {
	max-width: var(--wp--style--global--content-size, 1310px);
	margin-inline: auto !important;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
	width: 100%;
	box-sizing: border-box;
}

/* HERO — full-bleed brand artwork (wp:image figure, headline baked into JPG).
   The home-hero pattern emits <figure class="wp-block-image alignfull home-hero">
   with one <img> child. We strip default figure margin and stretch the image. */
.home-hero {
	position: relative;
	margin: 0 !important;
	padding: 0;
	background-color: var(--wp--preset--color--dark);
	overflow: hidden;
}

.home-hero img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.home-hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--primary) 0%,
		var(--wp--preset--color--accent) 50%,
		var(--wp--preset--color--primary) 100%);
	pointer-events: none;
	z-index: 2;
}


/* Each section: full-width bg, generous padding so content (heading, grid)
   doesn't touch viewport edges. !important on padding-block because the
   inline `style="padding-top:var(--wp--preset--spacing--2xl)..."` from block
   markup wins over normal class CSS — when that CSS var fails to resolve,
   padding silently collapses to 0. !important here keeps the visual rhythm
   reliable regardless. */
.home-section {
	padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
	padding-block: clamp(3.5rem, 7vw, 6.5rem) !important;
}

/* Constrain the events / products grids inside the (often alignfull) section so
   cards stop short of the viewport edge. The home-section's inline padding
   gives the breathing room around the grid block. */
.home-section .alf-events-grid,
.home-section .alf-products-grid {
	max-width: var(--wp--style--global--content-size, 1310px);
	margin-inline: auto;
}

/* Grand Final section narrower: prestige single-card treatment caps at 800px
   even though the section itself spans full width. Higher specificity selector
   so this wins over the .home-section rule above regardless of source order. */
.home-section.home-section--grandfinal .alf-events-grid {
	max-width: 800px;
	margin-inline: auto;
}

/* Single-card grids — when [alf_events_grid columns="N"] returns only one
   card, CSS Grid leaves the empty columns on the right, making the lone card
   look stuck in column 1. Make any only-child card span all columns and cap
   its width so it sits centred regardless of the declared column count. */
.alf-events-grid > .alf-event-card:only-child,
.alf-products-grid > .alf-product-card:only-child {
	grid-column: 1 / -1;
	max-width: 540px;
	margin-inline: auto;
	width: 100%;
}

/* Grand Final variant allows wider single-card treatment (matches the live
   prestige look — single Auckland FC card filling most of the 800px column). */
.home-section.home-section--grandfinal .alf-events-grid > .alf-event-card:only-child {
	max-width: 800px;
}

/* Section heading + lead — force size via !important because the wp-block-heading
   default rules win same-specificity battles when source-ordered later. */
.home-section__heading {
	margin-top: 0 !important;
	margin-bottom: 0.85rem !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--wp--preset--font-size--3xl) !important;
	line-height: 1.05 !important;
}

.home-section__lead {
	margin-top: 0;
	margin-bottom: 2rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--lg) !important;
	line-height: 1.5;
}

/* On-sale — dark, action-oriented */
.home-section--onsale {
	background-color: var(--wp--preset--color--dark);
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 6px,
		rgba(255, 255, 255, 0.03) 6px,
		rgba(255, 255, 255, 0.03) 7px
	);
	color: var(--wp--preset--color--bg);
}

.home-section--onsale .home-section__heading {
	color: var(--wp--preset--color--bg);
}

.home-section--onsale .home-section__lead {
	color: rgba(255, 255, 255, 0.7);
}

/* Grand Final — dark warm gold/brown, prestige treatment, larger centered card */
.home-section--grandfinal {
	background-color: var(--wp--preset--color--dark-warm);
	background-image:
		linear-gradient(180deg, rgba(185, 154, 75, 0.12) 0%, transparent 50%),
		repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 6px,
			rgba(255, 255, 255, 0.025) 6px,
			rgba(255, 255, 255, 0.025) 7px
		);
	color: var(--wp--preset--color--bg);
}

.home-section--grandfinal .home-section__heading {
	color: var(--wp--preset--color--primary);
}

.home-section--grandfinal .home-section__lead {
	color: rgba(255, 255, 255, 0.7);
}

/* GF card overrides — single centred large card with shimmer top accent */
.home-section--grandfinal .alf-events-grid {
	max-width: 800px;
	margin-inline: auto;
}

.home-section--grandfinal .alf-event-card {
	background: var(--wp--preset--color--dark-warm-2);
	border-color: rgba(185, 154, 75, 0.35);
	box-shadow:
		0 0 0 1px rgba(185, 154, 75, 0.25),
		0 8px 40px rgba(0, 0, 0, 0.5);
}

.home-section--grandfinal .alf-event-card::before {
	height: 6px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--dark-warm) 0%,
		var(--wp--preset--color--primary) 30%,
		var(--wp--preset--color--accent) 50%,
		var(--wp--preset--color--primary) 70%,
		var(--wp--preset--color--dark-warm) 100%);
}

.home-section--grandfinal .alf-event-card:hover {
	box-shadow:
		0 0 0 1px rgba(185, 154, 75, 0.5),
		0 12px 50px rgba(185, 154, 75, 0.3);
}

.home-section--grandfinal .alf-match-title {
	color: var(--wp--preset--color--bg);
	font-size: 1.4em;
}

.home-section--grandfinal .alf-round-label {
	font-size: 12px;
	letter-spacing: 0.12em;
}

.home-section--grandfinal .alf-event-meta {
	color: rgba(255, 255, 255, 0.65);
}

.home-section--grandfinal .alf-event-meta .dashicons {
	color: var(--wp--preset--color--primary);
}

.home-section--grandfinal .alf-event-body {
	padding: 28px 32px;
}

.home-section--grandfinal .alf-event-footer {
	background: var(--wp--preset--color--dark-warm);
	border-top-color: rgba(185, 154, 75, 0.25);
}

.home-section--grandfinal .alf-event-thumb img {
	height: 400px;
}

.home-section--grandfinal .alf-btn-primary:hover {
	color: var(--wp--preset--color--bg) !important;
	border-color: var(--wp--preset--color--accent);
}

/* Upcoming — light, informational. Plain off-white, no stripe overlay. */
.home-section--upcoming {
	background-color: var(--wp--preset--color--bg-alt);
}

/* Enquiry — LIGHT background to match live design. Plain white, no stripe. */
.home-section--enquiry {
	background-color: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--body);
}

.home-section--enquiry .home-section__heading {
	color: var(--wp--preset--color--primary) !important;
}

.home-section--enquiry .home-section__lead {
	color: var(--wp--preset--color--body) !important;
}



/* =============================================================
   5. A-LEAGUE FINALS — Events grid + Event card
   --------------------------------------------------------------
   These class names are shared with the aleague-finals plugin's
   assets/frontend.css. The plugin ships the structural CSS; the
   rules here are the brand-polish layer.
   ============================================================= */

.alf-events-grid {
	display: grid;
	gap: 24px;
	margin: 2em 0;
}

.alf-cols-1 { grid-template-columns: 1fr; }
.alf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.alf-cols-3 { grid-template-columns: repeat(3, 1fr); }
.alf-cols-4 { grid-template-columns: repeat(4, 1fr); }
.alf-cols-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1100px) { .alf-cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .alf-cols-3, .alf-cols-4, .alf-cols-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .alf-cols-2, .alf-cols-3, .alf-cols-4, .alf-cols-5 { grid-template-columns: 1fr; } }

.alf-event-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	overflow: hidden;
	background: var(--wp--preset--color--bg);
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	position: relative;
}

.alf-event-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(135deg,
		var(--wp--preset--color--primary) 0%,
		var(--wp--preset--color--dark) 100%);
	border-radius: 4px 4px 0 0;
}

.alf-event-card:hover {
	box-shadow: 0 8px 30px rgba(185, 154, 75, 0.2);
	transform: translateY(-2px);
}

.alf-event-thumb img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	display: block;
}

.alf-event-body {
	padding: 18px 20px;
	flex: 1;
}

.alf-round-label {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0;
}

.alf-match-title {
	font-size: 1.15em;
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--heading);
	margin: 6px 0 14px;
	line-height: 1.3;
}

.alf-event-meta {
	list-style: none !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	font-size: 13px;
	color: #6b6560;
}

.alf-event-meta li {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
}

.alf-event-meta .dashicons {
	font-size: 15px;
	color: var(--wp--preset--color--primary);
}

.alf-event-footer {
	padding: 14px 20px;
	border-top: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--bg-alt);
}

/* On-sale-section card variants — gold shimmer + deeper shadow */
.home-section--onsale .alf-event-card {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.home-section--onsale .alf-event-card::before {
	height: 5px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--primary) 0%,
		var(--wp--preset--color--accent) 50%,
		var(--wp--preset--color--primary) 100%);
}
.home-section--onsale .alf-event-card:hover {
	box-shadow: 0 8px 40px rgba(185, 154, 75, 0.35);
	transform: translateY(-3px);
}

/* Upcoming-section cards — muted, signals "informational, not bookable yet" */
.home-section--upcoming .alf-event-card {
	opacity: 0.92;
	border-color: #ddd8d0;
}
.home-section--upcoming .alf-event-card:hover { opacity: 1; }
.home-section--upcoming .alf-event-card::before {
	background: linear-gradient(90deg, #c8b882 0%, var(--wp--preset--color--accent) 100%);
	opacity: 0.6;
}


/* =============================================================
   6. A-LEAGUE FINALS — Products grid + Product card
   ============================================================= */

.alf-products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	margin: 2em 0;
}

.alf-product-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	overflow: hidden;
	background: var(--wp--preset--color--bg);
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	position: relative;
}

.alf-product-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(135deg,
		var(--wp--preset--color--primary) 0%,
		var(--wp--preset--color--dark) 100%);
	border-radius: 4px 4px 0 0;
}

.alf-product-card:hover {
	box-shadow: 0 8px 30px rgba(185, 154, 75, 0.2);
	transform: translateY(-2px);
}

.alf-product-card img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.alf-product-body {
	padding: 18px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.alf-product-body h4 {
	margin: 0 0 10px;
	font-size: 1.1em;
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--heading);
}

.alf-product-desc {
	font-size: 13px;
	color: #6b6560;
	margin-bottom: 16px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.alf-product-price {
	font-size: 1.4em;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--primary);
	margin: auto 0 18px;
}

.alf-per-person {
	font-size: 0.75em;
	font-weight: 400;
	color: #9a8f85;
}

.alf-product-actions {
	display: flex;
	gap: 10px;
	margin-top: auto;
}

.alf-product-actions .alf-btn {
	flex: 1;
	font-size: 11px;
	padding: 10px 12px;
}


/* =============================================================
   7. A-LEAGUE FINALS — Single event page (block template
      + the [aleagues_event_meta] shortcode in functions.php)
   ============================================================= */

/* Full-bleed featured image */
.alf-event-hero {
	margin-top: 0;
}
.alf-event-hero img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	display: block;
}

/* .alf-single-event inherits the 1310px constraint from its parent
   .site-main__inner — no narrower override here. The page is mostly cards and
   structured panels (meta + products grid); constraining to a reading-column
   width just cramps the products section without making content more readable.

   For long-form event descriptions, target paragraphs specifically:
       .alf-single-event-content p { max-width: 65ch; }
   That gives comfortable line length only where it matters. */

.alf-single-event-title {
	margin: 1rem 0 1rem;
	color: var(--wp--preset--color--heading);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--3xl) !important;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.alf-single-event-content {
	margin-bottom: 32px;
	font-size: 1.05rem;
	line-height: 1.65;
}

.alf-single-event-content a {
	color: var(--wp--preset--color--primary);
}
.alf-single-event-content a:hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

.alf-single-event-meta {
	background: var(--wp--preset--color--bg-alt);
	border-left: 4px solid var(--wp--preset--color--primary);
	padding: 20px 24px;
	margin: 0 0 36px;
	border-radius: 0 4px 4px 0;
}

.alf-single-event-meta .alf-round-label {
	font-size: 12px;
	margin-bottom: 6px;
}

.alf-single-event-meta .alf-event-meta {
	margin-top: 8px !important;
	font-size: 14px;
}

.alf-single-event-products-heading {
	margin: 0 0 16px;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.alf-no-products {
	color: #6b6560;
	font-style: italic;
	padding: 20px 0;
}
.alf-no-products a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.alf-no-products a:hover { text-decoration: underline; }


/* Product page — event notice block (rendered by plugin) */
.alf-product-event-info {
	background: var(--wp--preset--color--bg-alt);
	border-left: 4px solid var(--wp--preset--color--primary);
	padding: 16px 20px;
	margin: 20px 0;
	border-radius: 0 4px 4px 0;
}
.alf-product-event-info h4 {
	margin: 0 0 8px;
	font-size: 1em;
	color: var(--wp--preset--color--heading);
	font-family: var(--wp--preset--font-family--heading);
}
.alf-product-event-info ul {
	list-style: none !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-size: 13px;
	color: #6b6560;
}
.alf-product-event-info ul li { margin-bottom: 4px; }

.alf-back-to-event {
	font-size: 12px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.alf-back-to-event:hover { text-decoration: underline; }


/* =============================================================
   8. A-LEAGUE FINALS — Button variants
   ============================================================= */

.alf-btn {
	display: inline-block;
	padding: 14px 26px;
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.2;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

.alf-btn-primary {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--dark) !important;
	border: 2px solid var(--wp--preset--color--primary);
}
.alf-btn-primary:hover {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--bg) !important;
}

.alf-btn-secondary {
	background: transparent;
	color: var(--wp--preset--color--dark) !important;
	border: 2px solid var(--wp--preset--color--dark);
}
.alf-btn-secondary:hover {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--bg) !important;
}

.alf-btn-disabled {
	background: #333333;
	color: #666666 !important;
	border: 2px solid #333333;
	cursor: not-allowed;
}

/* On-sale (dark) section — secondary button needs light outline to read */
.home-section--onsale .alf-btn-secondary {
	color: var(--wp--preset--color--bg) !important;
	border-color: var(--wp--preset--color--bg);
}
.home-section--onsale .alf-btn-secondary:hover {
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--dark) !important;
}

/* Grand Final (dark warm) section — secondary button gold-on-transparent */
.home-section--grandfinal .alf-btn-secondary {
	color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary);
}
.home-section--grandfinal .alf-btn-secondary:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--dark) !important;
}

/* Card footers — wider gutter so buttons aren't edge-to-edge */
.alf-event-footer {
	padding: 18px 22px;
}

/* Core button (wp-block-button) — match alf primary CTA */
.wp-block-button .wp-block-button__link,
.wp-element-button {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--dark);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.wp-block-button .wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
}

/* Outline variant — transparent w/ gold border (used in dark hero) */
.wp-block-button.is-style-outline-light .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--bg);
	border: 2px solid var(--wp--preset--color--bg);
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--dark);
}

/* Fill variant — primary on the home hero */
.wp-block-button.is-style-fill .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--dark);
}
.wp-block-button.is-style-fill .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--dark);
}


/* =============================================================
   9. WOOCOMMERCE OVERRIDES
   ============================================================= */

.woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--heading);
}

.price,
.woocommerce .price,
span.woocommerce-Price-amount {
	color: var(--wp--preset--color--primary);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--dark);
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 4px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
}

/* Single product layout — already block-laid-out by single-product.html */
.single-product .product_title {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--heading);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: var(--wp--preset--font-size--3xl) !important;
	line-height: 1.05;
	margin: 0 0 0.5rem !important;
}

.single-product__price {
	font-size: 1.15rem !important;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	margin: 0 0 1.25rem !important;
}

/* Column gap is set globally in theme.json (1rem horizontal). No per-block
   override needed here — the single-product layout uses the same gap as every
   other wp:columns block. */

/* Make WC product image gallery fill its column. Without this, the gallery
   defers to the image's natural width and leaves visible empty space in the
   gallery column, making the "gap" between gallery and summary look larger
   than it actually is. */
.single-product__gallery-col,
.single-product__gallery-col .wp-block-woocommerce-product-image-gallery,
.single-product__gallery-col .wp-block-woocommerce-product-image-gallery > * {
	width: 100%;
}
.single-product__gallery-col img,
.single-product__gallery-col figure {
	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
	margin: 0;
}

/* Long description (post_content) — sits inside the summary column under the
   title, above the price + add-to-cart. wp:post-content runs the_content
   filter chain (paragraphs, shortcodes, oEmbed). */
.single-product__description {
	margin: 0.5rem 0 1.25rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--body);
}
.single-product__description .wp-block-post-content > * {
	margin-top: 0;
	margin-bottom: 0.85em;
}
.single-product__description .wp-block-post-content > *:last-child {
	margin-bottom: 0;
}
.single-product__description .wp-block-post-content h2,
.single-product__description .wp-block-post-content h3,
.single-product__description .wp-block-post-content h4 {
	font-size: 1rem;
	margin: 1em 0 0.4em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.single-product__description .wp-block-post-content ul,
.single-product__description .wp-block-post-content ol {
	padding-left: 1.25em;
}
.single-product__description .wp-block-post-content ul li,
.single-product__description .wp-block-post-content ol li {
	margin-bottom: 0.25em;
}
.single-product__description .wp-block-post-content iframe,
.single-product__description .wp-block-post-content .wp-block-embed,
.single-product__description .wp-block-post-content .wp-block-image {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 1em 0;
}
.single-product__description .wp-block-post-content iframe {
	aspect-ratio: 16 / 9;
}

.product_meta { display: none; }

.single-product-summary ul {
	list-style: disc !important;
	margin-left: 30px !important;
}

/* Item meta inside cart / checkout — inline format (plugin already writes <div>
   lines in the email context; this is for cart and order-received pages) */
.woocommerce-cart .wc-item-meta,
.woocommerce-checkout .wc-item-meta,
.woocommerce-order .wc-item-meta {
	margin: 4px 0 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	font-size: 13px;
}

.woocommerce-cart .wc-item-meta li,
.woocommerce-checkout .wc-item-meta li,
.woocommerce-order .wc-item-meta li {
	margin: 2px 0 !important;
	padding: 0 !important;
	display: block !important;
	line-height: 1.4 !important;
}

.woocommerce-cart .wc-item-meta li *,
.woocommerce-checkout .wc-item-meta li *,
.woocommerce-order .wc-item-meta li * {
	display: inline !important;
	font-size: 13px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
}

.woocommerce-cart .wc-item-meta-label,
.woocommerce-checkout .wc-item-meta-label,
.woocommerce-order .wc-item-meta-label {
	font-weight: 600 !important;
}


/* =============================================================
   10. PRODUCT PAGE — Add-on UI (drinks / catering / guest steppers)
   --------------------------------------------------------------
   Markup is injected by mu-plugins/site-core.php (sections 10–11).
   Class names: site-core-drinks-option, site-core-catering-option,
   site-core-guest-count. CSS here stays close to the legacy theme
   so the existing JS interactions keep working.
   ============================================================= */

.site-core-drinks-option,
.site-core-catering-option,
.site-core-guest-count {
	margin: 20px 0;
	padding: 20px;
	background: #f8f7f5;
	border: 1px solid #e8e0d5;
	border-radius: 4px;
}

.site-core-drinks-option .drinks-question,
.site-core-catering-option .catering-question,
.site-core-guest-count .guest-count-label {
	margin: 0 0 12px;
	font-size: 15px;
	color: var(--wp--preset--color--charcoal);
}

.site-core-drinks-option .drinks-label,
.site-core-catering-option .catering-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 24px;
	font-size: 14px;
	cursor: pointer;
	color: var(--wp--preset--color--charcoal);
}

.site-core-drinks-option .drinks-label input[type="radio"],
.site-core-catering-option .catering-label input[type="radio"] {
	accent-color: var(--wp--preset--color--primary);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	cursor: pointer;
	margin: 0;
}

/* Guest count stepper */
.guest-count-stepper {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.guest-minus,
.guest-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--dark);
	border: none;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	line-height: 1;
	transition: background 0.2s ease;
}
.guest-minus:hover,
.guest-plus:hover {
	background: var(--wp--preset--color--primary-dark);
}
.guest-minus:disabled,
.guest-plus:disabled {
	background: #d4c9b0;
	cursor: not-allowed;
}

.guest-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 36px;
	border-top: 1px solid #e8e0d5;
	border-bottom: 1px solid #e8e0d5;
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--charcoal);
	background: var(--wp--preset--color--bg);
	text-align: center;
}

.guest-count-note {
	margin: 8px 0 0;
	font-size: 12px;
	color: #9a8f85;
	font-style: italic;
}

/* Hide WC qty input on guest-count products only (1129 stadium, 1117 corporate suite) */
.postid-1129 .quantity,
.postid-1117 .quantity {
	display: none !important;
}


/* =============================================================
   11. GRAVITY FORMS — accents to match brand
   ============================================================= */

.gform_validation_errors,
.validation_message {
	color: var(--wp--preset--color--dark) !important;
}

/* Gravity Forms submit button — match the site's default button (.wp-block-button
   .wp-block-button__link). GF's own theme CSS uses !important on several rules
   so we use higher-specificity selectors + !important to win the cascade.
   Same padding (0.85em / 1.8em), same font-size token, same hover behaviour. */
.gform_button,
.gform_wrapper button[type=submit],
.gform_wrapper input[type=submit],
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_page_footer input[type=submit] {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--dark) !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: var(--wp--preset--font-size--sm) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	line-height: 1.2 !important;
	padding: 0.85em 1.8em !important;
	border: 2px solid var(--wp--preset--color--primary) !important;
	border-radius: 4px !important;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
}
.gform_button:hover,
.gform_wrapper button[type=submit]:hover,
.gform_wrapper input[type=submit]:hover,
.gform_wrapper .gform_footer input[type=submit]:hover,
.gform_wrapper .gform_page_footer input[type=submit]:hover {
	background-color: transparent !important;
	color: var(--wp--preset--color--primary) !important;
}

/* Light-bg enquiry section — labels dark, inputs slightly tinted for warmth */
.home-section--enquiry .gform_wrapper label,
.home-section--enquiry .gform_wrapper legend,
.home-section--enquiry .gform_wrapper .gfield_label {
	color: var(--wp--preset--color--charcoal);
}
.home-section--enquiry .gform_wrapper input[type=text],
.home-section--enquiry .gform_wrapper input[type=email],
.home-section--enquiry .gform_wrapper input[type=tel],
.home-section--enquiry .gform_wrapper textarea,
.home-section--enquiry .gform_wrapper select {
	background-color: var(--wp--preset--color--bg-alt);
	color: var(--wp--preset--color--charcoal);
	border: 1px solid var(--wp--preset--color--border);
}


/* =============================================================
   12. CHECKOUT — single-column layout (site-core injects
       customisations into the order-notes field, etc.)
   ============================================================= */

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	float: none !important;
	width: 100% !important;
	margin: 0 auto;
	padding: 0 !important;
}

.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	float: none !important;
	width: 100% !important;
}

/* When site-core removes order_comments by default, hide its heading */
.woocommerce-checkout #order_comments_heading,
.woocommerce-additional-fields {
	display: none !important;
}

/* Phone field description — set by site-core */
.woocommerce-checkout #billing_phone_field .description {
	display: block;
	font-size: 12px;
	color: #9a8f85;
	margin-top: 4px;
	font-style: italic;
}


/* =============================================================
   13. MISC
   ============================================================= */

.page-title {
	margin-top: 0;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Single post hero (default 'single' template) */
.single-post__hero {
	margin: 0 0 2rem;
}
.single-post__title {
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Blog cards — VL standard layout */
.layla-blog-card {
	display: flex !important;
	flex-direction: column !important;
	background: var(--wp--preset--color--bg);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	overflow: hidden;
	padding: 0 0 1.25rem;
}
.layla-blog-card .wp-block-post-featured-image { margin: 0; }
.layla-blog-card .wp-block-post-date,
.layla-blog-card .wp-block-post-title,
.layla-blog-card .wp-block-post-excerpt {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
.layla-blog-card .wp-block-post-date { margin: 1rem 0 0.25rem; font-size: 0.85rem; color: var(--wp--preset--color--muted); }
.layla-blog-card .wp-block-post-title { margin: 0 0 0.75rem; }
.layla-blog-card .wp-block-post-excerpt {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	margin: 0 !important;
}
.layla-blog-card .wp-block-post-excerpt__more-link {
	margin-top: auto;
	padding-top: 1rem;
	display: inline-block;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
	text-decoration: none;
}
.layla-blog-card .wp-block-post-excerpt__more-link:hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

.site-404 { text-align: center; }
.site-404 h1 { font-size: 4rem; }

/* Blank landing-page template (templates/page-blank.html). No header / footer
   chrome — used for one-off destination pages reached via campaign links. The
   .wp-site-blocks padding-top (set globally to header-height) needs reverting
   so blank pages start at the top of the viewport. */
body.page-template-page-blank .wp-site-blocks { padding-top: 0; }
body.page-template-page-blank .site-main--blank {
	max-width: var(--wp--style--global--content-size, 1310px);
	margin-inline: auto;
	padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem);
}
body.page-template-page-blank .page-blank__title {
	margin-bottom: 1.5rem;
}


/* =============================================================
   AVIA SHIM — minimal styling for legacy Avia pages rendered via
   the shortcode shim (see includes/avia-shim.php). Just enough
   structure to make the content readable; not visually identical
   to Enfold. Delete this block once those pages are migrated to
   native blocks.
   ============================================================= */

.avia-shim-section {
	padding: 2.5rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.avia-shim-section:last-child { border-bottom: 0; }

.avia-shim-row,
.avia-shim-section > .wp-block-shortcode {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	max-width: var(--wp--style--global--content-size, 1310px);
	margin-inline: auto;
}

.avia-shim-col {
	flex: 1 1 0;
	min-width: 220px;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.avia-shim-col {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}

.avia-shim-textblock > p:first-child { margin-top: 0; }
.avia-shim-textblock > p:last-child { margin-bottom: 0; }

.avia-shim-hr {
	border: 0;
	height: 1px;
	background: var(--wp--preset--color--border);
	margin: 2rem 0;
}

.avia-shim-heading {
	margin-top: 0;
	margin-bottom: 0.75rem;
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--heading);
}

.avia-shim-image {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}
.avia-shim-image-fig {
	margin: 1rem 0;
	text-align: center;
}
.avia-shim-image-fig figcaption {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	margin-top: 0.5rem;
}

.avia-shim-button {
	width: auto;
	display: inline-block;
}

.avia-shim-iconlist {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
}
.avia-shim-iconlist-item {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.avia-shim-slideshow {
	display: grid;
	gap: 1rem;
	margin: 1.5rem 0;
}
.avia-shim-slide {
	margin: 0;
}
.avia-shim-slide img {
	width: 100%;
	height: auto;
	display: block;
}
.avia-shim-slide figcaption {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	margin-top: 0.5rem;
}

.avia-shim-table-wrap { overflow-x: auto; margin: 1rem 0; }
.avia-shim-table {
	width: 100%;
	border-collapse: collapse;
}
.avia-shim-table th,
.avia-shim-table td {
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--wp--preset--color--border);
	text-align: left;
}