/*
 * Front-end styling for bigboss-events: single event pages and the
 * [bbe_upcoming_events] homepage shortcode. Palette matches the site's
 * existing dark/gold nightlife aesthetic (colors sampled directly from the
 * live homepage - #04000A background, #F7B722 gold, #DC3545 countdown red,
 * Montserrat).
 */

.bbe-upcoming-events,
.bbe-single-event,
.bbe-ticket-selector {
	font-family: 'Montserrat', sans-serif;
	color: #d2d2d2;
	box-sizing: border-box;
}

.bbe-upcoming-events *,
.bbe-single-event *,
.bbe-ticket-selector * {
	box-sizing: border-box;
}

/* Buttons */

.bbe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 32px;
	border-radius: 45px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 15px;
	border: 1.25px solid #f7b722;
	transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	cursor: pointer;
}

.bbe-btn:hover {
	transform: translateY(-2px);
	opacity: 0.9;
}

.bbe-btn.bbe-btn--solid {
	background: #f7b722;
	color: #000;
	font-weight: 700;
}

/* Keep the gold solid button's label dark on hover/focus. Our buttons use the
   class "bbe-btn" (not "btn"), so the theme rule `a:not(.btn):hover` would
   otherwise recolour the text to a light link colour on hover - this locks it
   dark in every state, on every page. */
.bbe-btn.bbe-btn--solid,
.bbe-btn.bbe-btn--solid:hover,
.bbe-btn.bbe-btn--solid:focus,
.bbe-btn.bbe-btn--solid:active { color: #231c07 !important; }

/* Event pages: the gold "Purchase Tickets" solid button turns soft red only
   while hovered or pressed (active). At rest it stays gold. Scoped off the
   homepage so the homepage "Get Tickets" buttons keep their gold hover. */
body:not(.home) .bbe-btn.bbe-btn--solid:hover,
body:not(.home) .bbe-btn.bbe-btn--solid:focus-visible,
body:not(.home) .bbe-btn.bbe-btn--solid:active {
	background: #e8807f !important;
	border-color: #e8807f !important;
	color: #3a0f0f !important;
}

.bbe-btn--outline {
	background: transparent;
	color: #d2d2d2;
}

.bbe-btn--block {
	display: flex;
	width: 100%;
}

.bbe-ticket-status {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: #888;
}

/* Countdown */

.bbe-countdown {
	display: flex;
	gap: 48px;
	margin: 20px 0;
	flex-wrap: wrap;
}

.bbe-countdown--compact {
	gap: 18px;
	margin: 12px 0;
}

.bbe-countdown__item {
	text-align: center;
}

.bbe-countdown__num {
	display: block;
	font-size: 64px;
	font-weight: 800;
	color: #dc3545;
	line-height: 1;
	font-family: 'Montserrat', sans-serif;
}

.bbe-countdown--compact .bbe-countdown__num {
	font-size: 36px;
}

.bbe-countdown__label {
	display: block;
	font-size: 12px;
	color: #f0f0f1;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 4px;
}

/* Single event hero
 * The square event flyer (1080x1080) sits to the RIGHT of the title /
 * countdown / date block. The old full-width banner header is collapsed to
 * zero height and the flyer image is pulled out and anchored to the right of
 * the 1100px content column. Stacks on tablets / phones (see media query). */

.bbe-single-event {
	position: relative;
}

.bbe-event-hero {
	/* Banner strip collapsed - the flyer below replaces it. Do NOT set
	 * position here: the flyer anchors against .bbe-single-event instead. */
	min-height: 0;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
	background: none;
}

.bbe-event-hero__img {
	display: block;
	position: absolute;
	top: 28px;
	right: max(24px, calc(50% - 550px));
	width: 400px;
	height: 400px;
	max-width: 38vw;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
	z-index: 5;
}

.bbe-event-hero-content {
	width: 100%;
	background: #04000a;
	padding: 32px 24px 40px;
	border-bottom: 1px solid rgba(247, 183, 34, 0.2);
}

.bbe-event-hero-content__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding-right: 460px; /* clears the flyer on the right */
}

.bbe-event-hero__title {
	font-size: clamp(20px, 2.5vw, 32px);
	font-weight: 800;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 8px;
	letter-spacing: 1px;
}

/* Follow us (hero) */

.bbe-follow-us {
	margin-top: 32px;
}

.bbe-follow-us__row {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.bbe-follow-us__label {
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #fff;
	margin-right: 4px;
}

.bbe-follow-us__tagline {
	margin: 12px 0 0;
	font-size: 15px;
	color: #999;
	text-transform: uppercase;
	font-weight: 700;
}

.bbe-follow-us .bbe-share-btn {
	width: 50px;
	height: 50px;
}

.bbe-follow-us .bbe-share-btn svg {
	width: 24px;
	height: 24px;
}

/* Meta bar */

.bbe-event-meta-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 32px 24px;
	padding-right: 460px; /* clears the flyer, which overlaps the top of this bar */
	box-sizing: border-box;
	border-bottom: 1px solid rgba(247, 183, 34, 0.2);
}

.bbe-event-meta-bar--compact {
	padding: 12px 0;
	margin: 0;
	border-bottom: none;
	gap: 28px;
}

.bbe-event-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bbe-event-meta__label {
	font-size: 15px;
	color: #f7b722;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
}

.bbe-event-meta__value {
	font-size: 18px;
	color: #fff;
	font-weight: 600;
}

.bbe-event-meta__value--muted {
	color: #aaa;
	font-weight: 500;
	font-size: 15px;
}

.bbe-event-meta--venue {
	flex-direction: row;
	align-items: center;
	gap: 24px;
}

.bbe-event-meta__venue-details {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bbe-venue-contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.bbe-venue-contact__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 2px 10px rgba(37, 211, 102, 0.35);
}

.bbe-venue-contact__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.5);
}

.bbe-venue-contact__btn svg {
	width: 30px;
	height: 30px;
}

.bbe-venue-contact__label {
	font-size: 13px;
	font-weight: 600;
	color: #ccc;
	white-space: nowrap;
}

.bbe-event-sponsors__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.bbe-event-sponsors__logo-frame {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 8px;
	padding: 10px 18px;
	transition: transform 0.15s ease;
}

a.bbe-event-sponsors__logo-frame:hover {
	transform: translateY(-2px);
}

.bbe-event-sponsors__logo {
	display: block;
	max-width: 150px;
	max-height: 60px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Event content */

.bbe-event-content {
	max-width: 1100px;
	margin: 0 auto;
	padding: 32px 24px;
	line-height: 1.7;
}

/* Slightly larger body copy on the single event page for readability. */
.bbe-event-content,
.bbe-event-content p,
.bbe-event-content li {
	font-size: 18px;
	line-height: 1.75;
}

/* Ticket selector */

.bbe-ticket-selector {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px 60px;
}

.bbe-ticket-selector__heading {
	font-size: 28px;
	font-weight: 800;
	text-transform: uppercase;
	color: #f7b722;
	margin-bottom: 20px;
}

.bbe-ticket-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	padding: 20px;
	margin-bottom: 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(247, 183, 34, 0.15);
	border-radius: 12px;
}

.bbe-ticket-row__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bbe-ticket-row__name {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}

.bbe-ticket-row__price {
	font-size: 20px;
	font-weight: 800;
	color: #f7b722;
}

.bbe-ticket-row__price del {
	font-size: 14px;
	font-weight: 500;
	color: #888;
	opacity: 0.8;
	margin-right: 8px;
}

.bbe-ticket-row__price ins {
	color: #f7b722;
	text-decoration: none;
}

.bbe-ticket-row__meta {
	font-size: 13px;
	color: #999;
}

.bbe-ticket-form {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* Quantity stepper: [ - ] [ input ] [ + ] as one segmented control */
.bbe-qty {
	display: inline-flex;
	align-items: stretch;
	flex: 0 0 auto;
	border: 1px solid rgba(247, 183, 34, 0.35);
	border-radius: 8px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.05);
}

.bbe-qty__btn {
	width: 44px;
	min-height: 46px;
	padding: 0;
	border: 0;
	background: rgba(247, 183, 34, 0.14);
	color: #f7b722;
	font-size: 24px;
	line-height: 1;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.15s ease;
}

.bbe-qty__btn:hover {
	background: rgba(247, 183, 34, 0.28);
}

.bbe-qty__btn:active {
	background: rgba(247, 183, 34, 0.45);
}

.bbe-qty__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.bbe-ticket-qty {
	width: 48px;
	padding: 8px 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	text-align: center;
	font-family: inherit;
	font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Hide the native number spinners - the -/+ buttons replace them */
.bbe-ticket-qty::-webkit-outer-spin-button,
.bbe-ticket-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Slimmer Add to Cart inside ticket controls: compact (doesn't stretch to
   fill the row), leaving space for the ticket description beside it. */
.bbe-ticket-group__action .bbe-btn,
.bbe-ticket-form .bbe-btn {
	padding: 13px 30px;
	font-size: 13px;
	white-space: nowrap;
	flex: 0 0 auto;
}

/* Ticket description shown next to the Add to Cart button on the selector.
   For dropdown groups the text is filled/swapped by bbe-ticket-group.js as
   the selection changes; single rows print it directly. */
.bbe-ticket-desc {
	flex: 1 1 200px;
	min-width: 0;
	margin: 0;
	color: #c2c2c2;
	font-size: 14px;
	line-height: 1.45;
}

/* Grouped ticket dropdown - a category with more than one ticket type
   (several Early Bird phases, etc.) collapses into one card with a
   dropdown instead of a wall of near-identical rows. */

.bbe-ticket-group {
	padding: 20px;
	margin-bottom: 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(247, 183, 34, 0.15);
	border-radius: 12px;
}

.bbe-ticket-group__heading {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 14px;
}

.bbe-ticket-group__select {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid rgba(247, 183, 34, 0.3);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	margin-bottom: 14px;
}

.bbe-ticket-group__select option {
	background: #14101c;
	color: #fff;
}

.bbe-ticket-group__action {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* Upcoming / previous events grids (homepage shortcodes) */

.bbe-event-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 28px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 24px 60px;
}

/* Row layout: [bbe_upcoming_events layout="row"] - one full-width horizontal
   card per event (flyer | title + date + buttons | description). */
.bbe-event-rowlist {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 20px 24px 60px;
}

.bbe-event-hrow {
	display: grid;
	grid-template-columns: 270px minmax(190px, 230px) 1fr;
	gap: 16px 26px;
	align-items: start;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(247, 183, 34, 0.18);
	border-radius: 16px;
	padding: 20px;
}

.bbe-event-hrow__flyer {
	display: block;
}

.bbe-event-hrow__flyer img {
	width: 270px;
	height: 270px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.bbe-event-hrow__mid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bbe-event-hrow__title {
	grid-column: 1 / -1;
	margin: 0 0 2px;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.bbe-event-hrow__meta {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #f7b722;
}

.bbe-event-hrow__meta span {
	display: block;
	margin-top: 3px;
	font-size: 17px;
	font-weight: 700;
	color: #d8d8d8;
}

.bbe-event-hrow__btns {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 2px;
}

.bbe-event-hrow__desc {
	color: #d0d0d0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
}

.bbe-event-hrow__desc h4 {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #f7b722;
}

.bbe-event-hrow__desc p {
	margin: 0;
}

/* Optional per-event headline shown below the buttons (e.g. "Tickets on sale
   now!"). Editable in the event's "Card headline" field; hidden when empty. */
.bbe-event-hrow__headline {
	margin: 10px 0 0;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: #f7b722;
}

@media (max-width: 760px) {
	.bbe-event-hrow {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 16px;
	}

	.bbe-event-hrow__flyer img {
		margin: 0 auto;
	}

	.bbe-event-hrow__btns {
		width: 100%;
		max-width: 280px;
		margin: 0 auto;
	}

	.bbe-event-hrow__desc {
		text-align: center;
	}
}

.bbe-event-card {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(247, 183, 34, 0.15);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.2s ease;
}

.bbe-event-card:hover {
	transform: translateY(-4px);
}

.bbe-event-card__image {
	display: block;
	aspect-ratio: 1 / 1; /* square slot so square 1080x1080 flyers aren't side-cropped */
	background-size: cover;
	background-position: center;
	background-color: #111;
}

.bbe-event-card__body {
	padding: 14px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bbe-event-card__title {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
}

.bbe-event-card__date {
	font-size: 12px;
	color: #f7b722;
	font-weight: 600;
	margin-bottom: 10px;
}

.bbe-event-card__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bbe-event-card__actions .bbe-btn {
	padding: 14px 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.3px;
	white-space: nowrap;
}

/* Previous events - visually de-emphasized so the eye reads "upcoming" as primary */

.bbe-event-grid--past .bbe-event-card__image {
	filter: grayscale(60%);
	opacity: 0.85;
}

/* Flyer-only strip: [bbe_previous_events layout="flyers"] - finished events
   auto-populate here as plain square posters, 4 across to match the site's
   existing hand-built "Previous Events" rows. */
.bbe-event-flyers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px;
}

.bbe-event-flyer {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.2s ease;
}

.bbe-event-flyer:hover {
	transform: translateY(-4px);
}

.bbe-event-flyer img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

@media (max-width: 900px) {
	.bbe-event-flyers {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.bbe-event-flyers {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

/* Section heading shared by gallery / venue map / related events */

.bbe-section-heading {
	font-size: 26px;
	font-weight: 800;
	text-transform: uppercase;
	color: #f7b722;
	margin: 0 0 20px;
}

.bbe-event-lineup__inner,
.bbe-event-map__inner,
.bbe-event-sponsors__inner,
.bbe-event-share__inner,
.bbe-related-events__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px 60px;
}

/* Artist Line-Up */

.bbe-event-lineup__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 20px;
}

.bbe-event-lineup__item {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(247, 183, 34, 0.15);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.15s ease;
}

.bbe-event-lineup__item:hover {
	transform: translateY(-4px);
}

.bbe-event-lineup__photo {
	display: block;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	background-color: #111;
}

.bbe-event-lineup__caption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
}

.bbe-event-lineup__name {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
}

.bbe-event-lineup__time {
	font-size: 13px;
	font-weight: 600;
	color: #f7b722;
}

/* Venue map */

.bbe-event-map__embed {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
	border-radius: 12px;
	margin-bottom: 20px;
}

/* Share */

.bbe-event-share__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.bbe-event-share__label {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #d2d2d2;
	margin-right: 4px;
}

.bbe-share-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.25px solid rgba(247, 183, 34, 0.4);
	background: transparent;
	color: #d2d2d2;
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bbe-share-btn:hover {
	transform: translateY(-2px);
	border-color: #f7b722;
	color: #f7b722;
}

.bbe-share-btn svg {
	width: 18px;
	height: 18px;
}

.bbe-share-btn__tooltip {
	position: absolute;
	bottom: 120%;
	left: 50%;
	transform: translateX(-50%);
	background: #f7b722;
	color: #000;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.bbe-share-btn--copied .bbe-share-btn__tooltip {
	opacity: 1;
}

/* Related events - reuses .bbe-event-grid from the homepage shortcodes */

.bbe-related-events .bbe-event-grid {
	padding: 0;
	max-width: none;
}

/* Tablets & phones: the flyer stacks above the title instead of sitting to
 * the right, and the text columns reclaim the space reserved for it. */
@media (max-width: 991px) {
	.bbe-event-hero {
		height: auto;
		padding: 26px 0 0;
	}

	.bbe-event-hero__img {
		position: static;
		width: min(340px, 80vw);
		height: auto;
		aspect-ratio: 1 / 1;
		max-width: none;
		margin: 0 auto;
		top: auto;
	}

	.bbe-event-hero-content__inner {
		padding-right: 0;
	}

	.bbe-event-meta-bar {
		padding-right: 24px;
	}
}

@media (max-width: 700px) {
	.bbe-countdown__num {
		font-size: 40px;
	}

	.bbe-countdown {
		gap: 16px;
	}
}

/* Cart / checkout: the per-ticket description shown under the item name
   (see WooCommerce\Cart_Display). */
.bbe-cart-item__desc {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.45;
	color: #9a9a9a;
}

.bbe-cart-item__desc p {
	margin: 0 0 4px;
}

.bbe-cart-item__desc p:last-child {
	margin-bottom: 0;
}

/* WooCommerce block cart - roomier ticket line items so the name, price,
   flyer and description aren't cramped. Targets the block cart markup
   (Cart Block / Store API), which this site's Cart page uses.
   !important throughout: WooCommerce's own block styles load after this
   sheet at equal specificity, so they'd otherwise win the cascade. */

/* --- Universal (all screen sizes): colour, weight, ordering only.
       Nothing here changes element dimensions, so it's safe on mobile. --- */
.wc-block-components-product-name,
.wc-block-components-product-name a {
	font-weight: 700 !important;
	color: #f7b722 !important; /* brand gold */
}

.wc-block-components-product-metadata,
.wc-block-components-product-metadata * {
	color: #e0e0e0 !important;
}

/* Description drops below the quantity stepper + bin */
.wc-block-cart-item__wrap .wc-block-components-product-metadata {
	order: 1 !important;
	margin: 14px 0 0 !important;
}

.wc-block-cart__totals-title {
	font-weight: 700 !important;
	color: #f7b722 !important; /* brand gold */
}

.wc-block-cart__submit-button {
	font-weight: 700 !important;
}

.wc-block-components-panel__button {
	font-size: 14px !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	font-size: 14px !important;
}

/* --- Desktop / wider tablets (>700px): the roomy sizing + bigger flyer.
       Kept out of the mobile layout, where a forced 140px flyer overflows
       the block cart's narrow image column and overlaps the text. --- */
@media (min-width: 701px) {
	.wc-block-cart-items__row > td,
	.wc-block-cart-items__row > .wc-block-cart-item__image,
	.wc-block-cart-items__row > .wc-block-cart-item__product,
	.wc-block-cart-items__row > .wc-block-cart-item__total {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.wc-block-cart-item__wrap {
		gap: 18px !important;
	}

	.wc-block-components-product-name,
	.wc-block-components-product-name a {
		font-size: 21px !important;
		line-height: 1.4 !important;
	}

	.wc-block-cart-item__prices,
	.wc-block-components-product-price {
		font-size: 18px !important;
	}

	.wc-block-components-product-metadata,
	.wc-block-components-product-metadata * {
		font-size: 16px !important;
		line-height: 1.55 !important;
	}

	.wc-block-cart-item__quantity {
		transform: scale(1.22);
		transform-origin: left center;
		margin-top: 14px !important;
		margin-bottom: 8px !important;
	}

	.wc-block-cart-item__image {
		width: 140px !important;
		padding-right: 24px !important;
	}

	.wc-block-cart-item__image img {
		width: 140px !important;
		height: auto !important;
		border-radius: 10px !important;
	}

	.wc-block-cart__totals-title {
		font-size: 15px !important;
	}
}

/* --- Phones (<=700px): let the block cart's own image column size the
       flyer (no forced width), and scale text down so nothing overlaps. --- */
@media (max-width: 700px) {
	.wc-block-cart-items__row > td {
		padding-top: 18px !important;
		padding-bottom: 18px !important;
	}

	.wc-block-cart-item__image img {
		border-radius: 8px !important;
	}

	.wc-block-components-product-name,
	.wc-block-components-product-name a {
		font-size: 16px !important;
		line-height: 1.3 !important;
	}

	.wc-block-cart-item__prices,
	.wc-block-components-product-price {
		font-size: 15px !important;
	}

	.wc-block-components-product-metadata,
	.wc-block-components-product-metadata * {
		font-size: 14px !important;
		line-height: 1.5 !important;
	}

	.wc-block-cart-item__quantity {
		margin-top: 10px !important;
	}

	.wc-block-cart__totals-title {
		font-size: 14px !important;
	}
}

/* Block checkout field labels: the theme renders the floating labels white,
   which disappears against the white input backgrounds - so customers can't
   tell which field is which. Darken them to a readable grey. Scoped to the
   input labels only, leaving section headings / checkbox labels (which sit on
   the dark page background) untouched. */
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-block-components-combobox label,
.wc-block-checkout .wc-block-components-select label,
.wc-block-checkout .wc-block-components-country-input label,
.wc-block-checkout .wc-block-components-state-input label {
	color: #555 !important;
}

/* =========================================================================
   HOMEPAGE CREAM THEME - Phase 1 (front page only, scoped to body.home)
   Converts the near-black homepage to the cream / daytime palette without
   touching any other page. Later phases extend this sitewide and remove the
   .home scoping. Palette: cream #f6f1e7, card #fffdf8, ink #241f18,
   amber #8a6100, gold #f7b722.
   ========================================================================= */

/* Base canvas + inherited text */
body.home { background: #f6f1e7 !important; color: #241f18 !important; }
body.home main,
body.home .main { background: transparent !important; }
body.home .elementor-heading-title { color: #241f18 !important; }
body.home .elementor-widget-text-editor,
body.home .elementor-widget-text-editor * { color: #3c352b !important; }

/* Header / navigation */
body.home .header-section { background: transparent !important; }
body.home .header-section .navbar.navbar-dark {
	background: rgba(246, 241, 231, 0.92) !important;
	box-shadow: 0 4px 18px rgba(140, 110, 50, 0.10) !important;
}
body.home .header-section a,
body.home .navbar-nav a,
body.home .header-section li a,
body.home .nav-link { color: #3c352b !important; }
body.home .header-section .dropdown-menu {
	background: #fffdf8 !important;
	border: 1px solid #e7ddc8 !important;
}
body.home .header-section .dropdown-menu a { color: #3c352b !important; }
body.home a.btn-danger,
body.home .header-section .btn,
body.home .book-now {
	background: #f7b722 !important;
	border-color: #f7b722 !important;
	color: #231c07 !important;
}

/* Upcoming event rows -> cream cards */
body.home .bbe-event-hrow {
	background: #fffdf8 !important;
	border: 1px solid #e7ddc8 !important;
	box-shadow: 0 6px 16px rgba(120, 90, 40, 0.10), 0 16px 40px rgba(120, 90, 40, 0.16) !important;
}
body.home .bbe-event-hrow__title { color: #241f18 !important; }
body.home .bbe-event-hrow__meta { color: #8a6100 !important; }
body.home .bbe-event-hrow__meta span { color: #3c352b !important; }
body.home .bbe-event-hrow__desc { color: #6d6559 !important; }
body.home .bbe-event-hrow__desc h4 { color: #b5481f !important; }
body.home .bbe-btn--solid {
	background: #f7b722 !important;
	border-color: #f7b722 !important;
	color: #231c07 !important;
}
body.home .bbe-btn--outline,
body.home .bbe-btn--outline:hover,
body.home .bbe-btn--outline:focus,
body.home .bbe-btn--outline:active {
	color: #241f18 !important;
	border-color: #c79a2e !important;
	background: transparent !important;
	font-weight: 700 !important;
}
body.home .bbe-event-hrow__headline { color: #6d6559 !important; }

/* Featured-event CTA buttons (the theme .btn buttons in the about_event widget,
   "Purchase Tickets" / "Get More Info"): the theme renders the solid label white
   and the outline label light grey, and its link-hover rule lightens them
   further on hover. Lock both to dark, readable ink in every state. */
body.home .elementor-widget-about_event .btn-primary,
body.home .elementor-widget-about_event .btn-primary:hover,
body.home .elementor-widget-about_event .btn-primary:focus,
body.home .elementor-widget-about_event .btn-primary:active { color: #231c07 !important; }
body.home .elementor-widget-about_event .btn-outline-primary,
body.home .elementor-widget-about_event .btn-outline-primary:hover,
body.home .elementor-widget-about_event .btn-outline-primary:focus,
body.home .elementor-widget-about_event .btn-outline-primary:active { color: #241f18 !important; }
/* Slightly larger, bold labels on the featured-event CTA buttons. */
body.home .elementor-widget-about_event .btn-primary,
body.home .elementor-widget-about_event .btn-outline-primary { font-size: 15px !important; font-weight: 700 !important; }

/* Align the upcoming events to the main menu box margins (Bootstrap .container,
   max-width 1320px with 12px side padding), so the rows sit in the same
   centered column as the nav rather than stretching to the full banner width. */
body.home .elementor-element-b389301 > .e-con-inner { max-width: 1320px !important; }
body.home .bbe-event-rowlist {
	max-width: none !important;
	padding-left: 12px !important;
	padding-right: 12px !important;
}

/* Desktop: the two action buttons sit side by side (matching the approved card
   spacing), with a wider middle column to hold them. Below 1024px the base row
   layout's stacked buttons take over, so tablet/mobile is unaffected. */
@media (min-width: 1024px) {
	body.home .bbe-event-hrow { grid-template-columns: 270px minmax(360px, 380px) 1fr !important; }
	body.home .bbe-event-hrow__mid { align-items: flex-start; }
	body.home .bbe-event-hrow__btns {
		flex-direction: row !important;
		flex-wrap: nowrap;
		gap: 12px;
		margin-top: 4px;
	}
	body.home .bbe-event-hrow__btns .bbe-btn {
		width: auto !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		flex: 1 1 0;
		white-space: nowrap;
	}
}

/* Services / FAQ accordion -> white cards with dark text */
body.home .elementor-widget-event_faqs .section-title { color: #241f18 !important; }
body.home .elementor-widget-event_faqs .accordion-item,
body.home .elementor-widget-event_faqs .accordion-button,
body.home .elementor-widget-event_faqs .accordion-body {
	background: #fffdf8 !important;
	color: #241f18 !important;
}
body.home .elementor-widget-event_faqs .accordion-item {
	border: 1px solid #e7ddc8 !important;
	margin-bottom: 8px;
	border-radius: 10px;
	overflow: hidden;
}
body.home .elementor-widget-event_faqs .accordion-button { color: #241f18 !important; font-weight: 600; }
body.home .elementor-widget-event_faqs .accordion-button::after { filter: invert(1) brightness(0.4); }

/* Footer grounded in dark ink */
body.home .footer-section { background: #241f18 !important; }

/* Hero banner: line the banner up with the menu box / event cards (same 1296px
   centred column) and slim its height, so its margins match the rest of the
   page instead of leaving an odd cream frame. */
body.home .elementor-element-4d2ef88 { padding: 0 !important; max-width: 100% !important; }
body.home .hero-section .hero-wrapper.box-hero {
	max-width: 1296px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding-top: 150px !important; /* slimmer band (was ~280px) */
}
/* Drop the widget's drop-shadow so the banner sits flat on the cream instead
   of reading as a raised white card. */
body.home .elementor-widget-slider .elementor-widget-container { box-shadow: none !important; }

/* Darken the theme's leftover light-grey text (.text-opacity, ~#d2d2d2) to
   near-black on the cream homepage - the Featured Event title/labels, the
   countdown unit labels, and FAQ headings. Red (.text-danger) numbers and
   already-dark text are untouched. */
body.home .text-opacity { color: #1a1a1a !important; }
/* The theme dims label text inside .text-opacity to 15% (.text-opacity span
   { opacity: .15 }). On the cream homepage that reads as faint grey and only
   appears to "darken" as the block's scroll-in animation plays. Force full
   opacity so this text (countdown Days/Hours/Minutes/Seconds labels, section
   eyebrows, etc.) stays solid dark at all times, regardless of scroll. */
body.home .text-opacity span { opacity: 1 !important; }
/* Section eyebrow labels ("Featured Event - JHB", "What We Offer") use
   .straight-line-wrapper with a light-grey (#d2d2d2) colour that reads as faint
   on the cream background - darken to near-black. */
body.home .straight-line-wrapper { color: #1a1a1a !important; }
body.home .elementor-widget-about_event .fw-extra-bold { color: #1a1a1a !important; }
/* Featured-event meta-bar column headings (date, venue, age restriction, table
   bookings) in terracotta to match the "About this event" heading. */
body.home .about-3-text h4.fw-extra-bold { color: #b5481f !important; }
body.home .elementor-widget-event_faqs .accordion-body h1,
body.home .elementor-widget-event_faqs .accordion-body h2,
body.home .elementor-widget-event_faqs .accordion-body h3,
body.home .elementor-widget-event_faqs .accordion-body h4 { color: #1a1a1a !important; }

/* "DRESS UP AND YOU COULD WIN R2500 IN CASH" sub-title in the about_event
   widget: smaller, solid terracotta (matching the "About this event" heading),
   dropping the theme's large gold outlined/hollow treatment. */
body.home .elementor-widget-about_event .sub-title {
	font-size: 26px !important;
	color: #b5481f !important;
	-webkit-text-fill-color: #b5481f !important;
	-webkit-text-stroke: 0 !important;
}

/* Enlarge the featured-event body copy on the homepage (the description
   paragraphs under the title/sub-title) for readability. Targets only the
   paragraph-level div/p blocks, leaving the "Featured Event" label, the big
   event title, and the DRESS UP sub-title untouched. */
body.home .elementor-widget-about_event .section-title > div,
body.home .elementor-widget-about_event .section-title > p {
	font-size: 18px !important;
	line-height: 1.75 !important;
}