/**
 * Reusable components. Each one is a block style or a utility class
 * that can be applied to a core block in the editor (no custom JS).
 *
 *  Headings  : is-style-event-title | event-meta | eyebrow | person-name | script
 *  Buttons   : default (solid blue) | is-style-light
 *  Layout    : .gala-stack, .gala-hero, .gala-item
 *  Chrome    : .gala-cta-bar
 */

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

/* Centered single column with even vertical rhythm (gap, not margins,
   so heading and button styles can't fight it). */
.gala-stack,
.gala-item,
.gala-sections,
.gala-speaker__text,
.gala-splash-tall {
	display: flex;
	flex-direction: column;
	gap: var(--gala-space);
}

.gala-stack > *,
.gala-item > *,
.gala-sections > *,
.gala-speaker__text > *,
.gala-splash-tall > * {
	margin-block: 0;
}

.gala-stack {
	width: 100%;
	padding-inline: var(--gala-gutter);
	max-width: var(--gala-content-width);
	margin-inline: auto;
	text-align: center;
}

/* Left-aligned variant (program, venue). Buttons stay centered. */
.gala-stack.gala-left {
	text-align: left;
}

/* Images size from a max width but never exceed the screen. */
.gala-img {
	align-self: center;
	width: min(var(--gala-img-w, 100%), 100vw - 40px);
	max-width: none;
	margin: 0;
}

.gala-img img {
	display: block;
	width: 100%;
	height: auto;
}

.gala-img--logo {
	--gala-img-w: 911px;
}

.gala-img--hashtag {
	--gala-img-w: 1024px;
}

.gala-img--speaker {
	--gala-img-w: 456px;
}

/* Dotted divider, wider than the text column. */
.gala-stack > .wp-block-separator {
	align-self: center;
	width: min(1083px, 100vw - 2 * var(--gala-gutter));
	margin: 12px 0 88px;
	border: 0;
	border-top: 4px dotted var(--gala-navy);
	background: none;
	height: 0;
	opacity: 1;
}

.gala-stack .wp-block-buttons {
	gap: 10px;
}

.gala-stack p {
	font-size: 18px;
	font-weight: 500;
}

/* Home hero: full width, watercolor splash behind it. */
.gala-hero {
	max-width: none;
	padding-top: 100px;
	background: url("../img/blue-watercolor-sm-min.png") no-repeat var(--gala-splash-a-pos) / 85% auto;
}

.gala-hero .wp-block-buttons {
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 12px;
	margin-bottom: 51px;
}

/* Wraps several sections so one tall splash spans all of them. */
.gala-splash-tall {
	background: url("../img/blue-watercolor-33-vertical-sm.webp") no-repeat var(--gala-splash-b-pos) / contain;
}

/* Program and venue sit side by side on desktop, stacked below that. */
.gala-columns {
	display: flex;
	flex-direction: column;
	gap: var(--gala-space);
}

.gala-item {
	gap: 14px;
}

.gala-item + .gala-item {
	margin-top: 14px;
}

.gala-item > .is-style-event-meta + .is-style-event-meta {
	margin-top: 6px;
}

/* Speaker bio is a narrow column, set a little smaller than body text. */
.gala-speaker__text {
	max-width: 264px;
	margin-inline: auto;
}

.gala-speaker__text p {
	line-height: 1.33;
}

.gala-stack > .is-style-script {
	margin-bottom: -31px;
}

.gala-stack.gala-venue .wp-block-buttons {
	margin-top: 40px;
}

.gala-stack.gala-venue .wp-block-buttons .wp-block-button__link {
	min-width: 225px;
}

@media (min-width: 1025px) {
	.gala-hero {
		padding-top: 109px;
	}

	.gala-hero .wp-block-buttons {
		flex-direction: row;
		gap: 37px;
		margin-top: 8px;
		margin-bottom: 75px;
	}

	/* Speaker: photo left, text right, divider underneath. */
	.gala-speaker {
		display: grid;
		grid-template-columns: 456px 1fr;
		column-gap: 0;
		row-gap: 0;
		max-width: 1154px;
		padding-inline: 0;
	}

	.gala-speaker > .gala-img {
		justify-self: start;
	}

	.gala-speaker__text {
		align-self: center;
		justify-self: start;
		max-width: 474px;
		margin-left: 68px;
	}

	.gala-stack > .is-style-script {
		margin-bottom: -24px;
	}

	.gala-speaker > .wp-block-separator {
		grid-column: 1 / -1;
		justify-self: center;
		margin-top: 0;
	}

	.gala-item + .gala-item {
		margin-top: 18px;
	}

	.gala-columns {
		flex-direction: row;
		align-items: stretch;
		width: 100%;
		max-width: 1082px;
		margin-inline: auto;
	}

	.gala-columns > .gala-stack {
		width: auto;
		max-width: none;
		padding-inline: 0;
	}

	.gala-columns > .gala-program {
		flex: 624;
	}

	.gala-columns > .gala-venue {
		flex: 424;
		padding-bottom: 30px;
	}

	.gala-stack.gala-venue .wp-block-buttons {
		justify-content: flex-start;
		margin-top: auto;
	}

	.gala-stack.gala-venue .wp-block-buttons .wp-block-button__link {
		min-width: 280px;
	}
}

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */

.wp-block-heading.is-style-event-title,
.wp-block-heading.is-style-event-meta,
.wp-block-heading.is-style-eyebrow,
.wp-block-heading.is-style-person-name {
	font-family: var(--gala-font-display);
	font-weight: 500;
	letter-spacing: normal;
	line-height: 1.2;
	margin-block: 0;
}

.wp-block-heading.is-style-event-title {
	color: var(--gala-blue);
	font-size: 28px;
	text-transform: uppercase;
}

.wp-block-heading.is-style-event-meta {
	color: var(--gala-navy);
	font-size: 15px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.wp-block-heading.is-style-eyebrow {
	color: var(--gala-navy);
	font-size: 24px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.wp-block-heading.is-style-person-name {
	color: var(--gala-blue);
	font-size: 27.5px;
	font-weight: 600;
	text-transform: none;
}

.wp-block-heading.is-style-script {
	color: #000;
	font-family: var(--gala-font-script);
	font-size: 72px;
	font-weight: 400;
	letter-spacing: -0.5px;
	line-height: 1.3;
	text-transform: none;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.wp-block-button .wp-block-button__link.wp-element-button {
	background: var(--gala-blue);
	border-radius: 0;
	color: var(--gala-white);
	font-family: var(--gala-font-ui);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 4px;
	padding: 12px 20px;
	text-transform: uppercase;
}

.wp-block-button .wp-block-button__link.wp-element-button:hover,
.wp-block-button .wp-block-button__link.wp-element-button:focus {
	background: var(--gala-navy);
	color: var(--gala-white);
}

.wp-block-button.is-style-light .wp-block-button__link {
	background: var(--gala-white);
	color: var(--gala-navy);
}

.wp-block-button.is-style-light .wp-block-button__link:hover,
.wp-block-button.is-style-light .wp-block-button__link:focus {
	background: var(--gala-pale);
}

/* Stacked CTA buttons share one width. */
.gala-stack .wp-block-buttons .wp-block-button__link {
	min-width: 280px;
}

/* --------------------------------------------------------------------------
   Content area: let the watercolor background show through.
   -------------------------------------------------------------------------- */

.gala-full-layout .site-content,
.gala-full-layout .inside-article {
	background: transparent;
	padding: 0;
}

.gala-full-layout .site-main {
	margin: 0;
}

.gala-full-layout .entry-header {
	display: none;
}

/* Sections stack with the same rhythm as the content inside them. */
.gala-full-layout .entry-content {
	display: flex;
	flex-direction: column;
	gap: var(--gala-space);
	margin: 0;
	padding-bottom: 162px;
}

/* --------------------------------------------------------------------------
   Sticky call-to-action bar (parts/cta-bar.php)
   -------------------------------------------------------------------------- */

.gala-cta-bar {
	position: fixed;
	inset: auto 0 3px;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 15px;
	min-height: 78px;
	padding: 0 15px;
	background: var(--gala-blue);
}

.gala-cta-bar .wp-block-buttons {
	flex: 1;
}

.gala-cta-bar .wp-block-button {
	width: 100%;
}

.gala-cta-bar .wp-block-button__link {
	display: block;
	text-align: center;
}

.gala-cta-bar__top {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	background: var(--gala-sky);
	color: var(--gala-white);
	text-decoration: none;
}

/* Keep the last section clear of the fixed bar. */
.gala-full-layout .site-footer {
	padding-bottom: 90px;
}

/* Desktop heading sizes, and no footer credit line on gala pages. */
@media (min-width: 1025px) {
	.wp-block-heading.is-style-event-title {
		font-size: 36px;
	}

	.wp-block-heading.is-style-person-name {
		font-size: 48px;
		line-height: 0.9;
	}
}

.gala-full-layout .site-info,
.gala-full-layout .footer-widgets {
	display: none;
}

.gala-full-layout .site-footer {
	background: transparent;
}

@media (min-width: 1025px) {
	.gala-full-layout .entry-content {
		padding-bottom: 229px;
	}
}

/* Program and venue are a narrower column on phones; desktop resets this. */
.gala-columns > .gala-stack {
	padding-inline: 56px;
}

@media (min-width: 1025px) {
	.wp-block-button .wp-block-button__link.wp-element-button {
		padding-block: 14px;
	}

	.gala-columns > .gala-stack {
		padding-inline: 0;
	}
}

.gala-columns > .gala-venue {
	margin-top: 13px;
}

@media (min-width: 1025px) {
	.gala-columns > .gala-venue {
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
   Inner pages: splash strip, title band, WooCommerce product grid
   -------------------------------------------------------------------------- */

/* Strip under the floating header with the watercolor corner. */
.gala-splash-top {
	height: 80px;
	background: url("../img/blue-watercolor-sm-min.png") no-repeat -184px -200px / cover;
}

.gala-page-title {
	padding: 16px 20px 4px;
	background: #b7d7e9;
	text-align: center;
}

.gala-page-title .wp-block-heading {
	margin: 0;
	color: #10223d;
	font-family: var(--gala-font-display);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}

.gala-products {
	padding: 60px 40px 0;
}

.gala-products ul.products {
	display: block;
	max-width: 342px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.gala-products ul.products li.product {
	width: 100%;
	margin: 0;
	text-align: center;
}

.gala-products .woocommerce-LoopProduct-link {
	display: block;
	color: var(--gala-navy);
	text-decoration: none;
}

.gala-products .gala-thumb {
	position: relative;
	display: block;
}

.gala-products li.product img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 10px solid var(--gala-pale);
}

.gala-sold-out {
	position: absolute;
	inset: auto 16px 16px;
	padding: 8px 6px 11px;
	background: rgba(255, 255, 255, 0.88);
	color: var(--gala-sky);
	font-family: var(--gala-font-body);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.5;
	text-transform: uppercase;
}

.gala-products .woocommerce-loop-product__title {
	margin: 0;
	padding: 6px 0 0;
	color: var(--gala-navy);
	font-family: var(--gala-font-ui);
	font-size: 16.6px;
	font-weight: 500;
	letter-spacing: 4.6px;
	line-height: 1.5;
	text-transform: uppercase;
}

.gala-products .price {
	display: block;
	color: var(--gala-navy);
	font-size: 14px;
}

.gala-products li.product .button {
	margin-top: 16px;
	padding: 10px 20px;
	background: var(--gala-sky);
	border-radius: 0;
	color: var(--gala-white);
	font-family: var(--gala-font-ui);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 4px;
	text-transform: uppercase;
}

@media (min-width: 1025px) {
	.gala-splash-top {
		height: 127px;
		background-position: -704px -640px;
	}

	.gala-page-title {
		padding: 10px 101px 7px;
	}

	.gala-page-title .wp-block-heading {
		font-size: 36px;
	}

	.gala-products {
		padding-top: 110px;
	}

	.gala-products .gala-sold-out {
		font-size: 12px;
	}

	.gala-products li.product .button {
		font-size: 18px;
	}
}

/* Inner-page spacing (beats WooCommerce's loop defaults) and page end. */
.gala-page-title,
.gala-products {
	margin-top: -20px;
}

.gala-products ul.products li.product a img {
	margin: 0;
}

.gala-products ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	line-height: 32px;
}

.gala-products ul.products li.product .price {
	margin: 0;
	line-height: 21px;
}

.gala-products ul.products li.product .button {
	margin-top: 11px;
}

.gala-sold-out {
	line-height: 1.65;
}

.gala-full-layout .entry-content:has(.gala-products) {
	padding-bottom: 78px;
}

@media (min-width: 1025px) {
	.gala-full-layout .entry-content:has(.gala-products) {
		padding-bottom: 94px;
	}
}

/* Bottom bar: full-width button on phones, centred content-sized button on
   desktop; the back-to-top arrow sits over the bar's right end. */
.gala-cta-bar {
	justify-content: center;
	padding-inline: 17px;
}

.gala-cta-bar .wp-block-button .wp-block-button__link.wp-element-button {
	padding: 15px 20px;
	line-height: 14px;
}

.gala-cta-bar__top {
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
}

@media (min-width: 1025px) {
	.gala-cta-bar {
		min-height: 94px;
	}

	.gala-cta-bar .wp-block-buttons {
		flex: none;
	}

	.gala-cta-bar .wp-block-button {
		width: auto;
	}

	.gala-cta-bar .wp-block-button .wp-block-button__link.wp-element-button {
		padding: 15px 30px;
		font-size: 18px;
		line-height: 18px;
	}

	.gala-cta-bar__top {
		right: 30px;
	}
}

/* Full-bleed strips: don't cap the page at GeneratePress's 1200px container. */
.gala-full-layout .grid-container {
	max-width: none;
}

.gala-products {
	padding-bottom: 60px;
}

.gala-products ul.products li.product {
	margin-bottom: 8px;
}

.gala-sold-out {
	padding-inline: 0;
}

@media (min-width: 1025px) {
	.gala-page-title {
		padding-bottom: 9px;
	}

	.gala-products {
		padding-bottom: 77px;
	}

	.gala-products .gala-sold-out {
		inset: auto 12px 10px;
		padding: 6px 0 8.4px;
	}

	.gala-products ul.products li.product .button {
		margin-top: 14px;
	}
}

.gala-products ul.products li.product .price,
.gala-products ul.products li.product .price .amount {
	color: var(--gala-navy);
}

/* --------------------------------------------------------------------------
   Sponsorship cards
   -------------------------------------------------------------------------- */

.gala-back {
	margin-top: -20px;
	padding: 36px 7.5% 52px;
}

.gala-back p {
	margin: 0;
	font-size: 14.4px;
	line-height: 14px;
	letter-spacing: -0.05px;
}

.gala-back a {
	color: #b0b0b0;
	text-decoration: none;
}

.gala-tiers {
	display: grid;
	grid-template-columns: 1fr;
	gap: 35px;
	margin-top: -20px;
	padding-inline: 32px;
}

.gala-tier {
	display: flex;
	flex-direction: column;
}

.gala-tier__perks {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 20px;
	padding: 50px;
	background: var(--gala-blue);
}

.gala-tier__price {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 30px;
	background: var(--gala-mist);
}

.gala-tier__perks > *,
.gala-tier__price > * {
	margin-block: 0;
}

.wp-block-heading.is-style-eyebrow-small {
	color: var(--gala-tier-eyebrow);
	font-family: var(--gala-font-ui);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 4.6px;
	line-height: 1.2;
	text-transform: uppercase;
}

.wp-block-heading.is-style-tier-name,
.wp-block-heading.is-style-tier-price {
	font-family: var(--gala-font-display);
	font-size: 30px;
	font-weight: 400;
	line-height: 39px;
	text-transform: uppercase;
}

.wp-block-heading.is-style-tier-name {
	color: var(--gala-tier-blue);
}

.wp-block-heading.is-style-tier-price {
	color: var(--gala-navy);
}

/* Perk list: white text, circled check in front. */
.gala-perks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gala-perks li {
	position: relative;
	padding-left: 22px;
	color: var(--gala-white);
	font-family: "filson-pro", sans-serif;
	font-size: 14.4px;
	line-height: 24px;
}

.gala-perks li::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Ccircle cx='7' cy='7' r='6.2'/%3E%3Cpath d='M4 7.2l2 2 4-4.2'/%3E%3C/svg%3E") no-repeat center / contain;
}

.gala-tier__cart {
	justify-content: stretch;
	margin: 0;
	padding: 20px;
}

.gala-tier__cart .wp-block-button {
	width: 100%;
}

.wp-block-button.is-style-mist .wp-block-button__link.wp-element-button {
	display: block;
	background: var(--gala-mist);
	color: var(--gala-navy);
	text-align: center;
}

.wp-block-button.is-style-mist .wp-block-button__link.wp-element-button:hover,
.wp-block-button.is-style-mist .wp-block-button__link.wp-element-button:focus {
	background: var(--gala-navy);
	color: var(--gala-white);
}

@media (min-width: 1025px) {
	.gala-back {
		padding: 30px 7.4% 105px;
	}

	.gala-tiers {
		grid-template-columns: repeat(3, 303px);
		justify-content: center;
		padding-inline: 0;
	}

	.wp-block-button.is-style-mist .wp-block-button__link.wp-element-button {
		font-size: 18px;
	}
}

.wp-block-button.is-style-mist .wp-block-button__link.wp-element-button {
	padding: 10px 20px;
	line-height: 1.3;
}

@media (min-width: 1025px) {
	.wp-block-heading.is-style-tier-name,
	.wp-block-heading.is-style-tier-price {
		font-size: 36px;
		line-height: 47px;
	}

	.wp-block-button.is-style-mist .wp-block-button__link.wp-element-button {
		line-height: 20px;
	}
}

.gala-full-layout .entry-content:has(.gala-tiers) {
	padding-bottom: 99px;
}

@media (min-width: 1025px) {
	.gala-back {
		padding: 33px 6.3% 102px;
	}

	.gala-full-layout .entry-content:has(.gala-tiers) {
		padding-bottom: 157px;
	}
}

/* --------------------------------------------------------------------------
   Donate: thank-you line (desktop only, as on live) and the plugin's form
   -------------------------------------------------------------------------- */

.gala-message {
	display: none;
	margin-top: -20px;
	padding: 50px 70px 0;
	text-align: center;
}

.gala-message .wp-block-heading {
	margin: 0;
	color: var(--gala-navy);
	font-family: var(--gala-font-display);
	font-size: 36px;
	font-weight: 400;
	line-height: 45px;
	text-transform: uppercase;
}

/* The Donation product shows only the plugin's form, not photo/title/price. */
.gala-donate {
	padding-top: 191px;
}

.gala-donate ul.products {
	max-width: 400px;
}

.gala-products.gala-donate ul.products li.product a.woocommerce-loop-product__link,
.gala-products.gala-donate ul.products li.product .price {
	display: none;
}

@media (min-width: 1025px) {
	.gala-message {
		display: block;
	}

	.gala-donate {
		padding-top: 61px;
	}
}

/* The plugin's form inherits live's small uppercase body text. */
.gala-donate .mikvah-donation-form {
	font-family: var(--gala-font-body);
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 1.65;
	text-transform: uppercase;
}

.gala-donate .mikvah-donation-form .donation-input {
	font-size: 12px;
	line-height: 24px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.gala-donate .mikvah-donation-form .donation-input {
	box-sizing: border-box;
	width: 150px;
	height: 40px;
	padding: 10px;
}

.gala-donate .mikvah-donation-form .donate-button {
	line-height: 16px;
}

.gala-donate .mikvah-donation-form .adf-form-header {
	line-height: 1.3;
}

.gala-donate .mikvah-donation-form .donate-button {
	margin-top: -22px;
}

.gala-products.gala-donate {
	padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Raffle: ticket tabs, "Next" band, white ticket sections with a 3-up grid
   -------------------------------------------------------------------------- */

.gala-tabs {
	margin: 0;
	justify-content: center;
	gap: 0;
}

.gala-tabs .wp-block-button__link.wp-element-button {
	min-width: 226px;
	padding: 20px 24px;
	background: var(--gala-white);
	border: 1px solid var(--gala-blue);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
	color: var(--gala-blue);
	text-align: center;
}

.gala-tabs .wp-block-button__link.wp-element-button:hover,
.gala-tabs .wp-block-button__link.wp-element-button:focus {
	background: var(--gala-pale);
	color: var(--gala-blue);
}

.gala-raffle-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 0 20px;
}

.gala-raffle-actions > * {
	margin: 0;
}

.gala-next-band {
	display: flex;
	justify-content: center;
	padding: 23px 20px;
	background: var(--gala-blue);
}

.gala-next-band .wp-block-buttons {
	margin: 0;
}

.gala-raffle-section {
	padding: 40px 20px 20px;
	background: var(--gala-white);
}

.gala-raffle-section > * {
	margin-block: 0;
}

.gala-raffle-section .wp-block-heading {
	margin-bottom: 40px;
	color: var(--gala-tier-eyebrow);
	font-family: var(--gala-font-display);
	font-size: 36px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
}

.gala-raffle-section ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gala-raffle-section ul.products li.product {
	width: auto;
	margin: 0;
	padding: 15px 15px 20px;
	background: var(--gala-white);
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.gala-raffle-section ul.products li.product img {
	width: 100%;
	height: auto;
	margin: 0 0 12px;
	border: 10px solid var(--gala-pale);
}

.gala-raffle-section .woocommerce-loop-product__title {
	padding: 0;
	color: var(--gala-navy);
	font-family: var(--gala-font-ui);
	font-size: 16.6px;
	font-weight: 500;
	letter-spacing: 4.6px;
	text-transform: uppercase;
}

.gala-raffle-section li.product .price {
	color: var(--gala-navy);
}

.gala-raffle-section li.product .button {
	margin-top: 12px;
	padding: 10px 20px;
	background: var(--gala-mist);
	border-radius: 0;
	color: var(--gala-navy);
	font-family: var(--gala-font-ui);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 4px;
	text-transform: uppercase;
}

.gala-raffle-section hr.wp-block-separator {
	margin: 40px 0;
}

@media (min-width: 768px) {
	.gala-raffle-section ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	.gala-raffle-section {
		padding-inline: 73px;
	}

	.gala-raffle-section ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Beat WooCommerce's column-width and float rules for the ticket grids. */
.gala-raffle-section ul.products[class*="columns-"] li.product {
	float: none;
	width: auto;
	margin: 0;
}

.gala-raffle-actions {
	margin-top: -40px;
}

@media (min-width: 1025px) {
	.gala-raffle-actions {
		margin-top: -111px;
	}
}

/* WooCommerce's clearfix pseudo-elements would take the first grid cells. */
.gala-raffle-section ul.products::before,
.gala-raffle-section ul.products::after {
	display: none;
}

.gala-raffle-section ul.products li.product .price,
.gala-raffle-section ul.products li.product .price .amount {
	color: var(--gala-navy);
}

/* --------------------------------------------------------------------------
   WooCommerce notices: the Elementor pages hid them (inline CSS), so a click
   on "Add to cart" showed no banner. Same here, (the cart and checkout keep theirs, as on live).
   -------------------------------------------------------------------------- */

body:has(.gala-tiers) .woocommerce-notices-wrapper,
body:has(.gala-tiers) .woocommerce-message,
body:has(.gala-tiers) .woocommerce-error,
body:has(.gala-tiers) .woocommerce-info,
body:has(.gala-raffle-section) .woocommerce-notices-wrapper,
body:has(.gala-raffle-section) .woocommerce-message,
body:has(.gala-raffle-section) .woocommerce-error,
body:has(.gala-raffle-section) .woocommerce-info,
body:has(.gala-products) .woocommerce-notices-wrapper,
body:has(.gala-products) .woocommerce-message,
body:has(.gala-products) .woocommerce-error,
body:has(.gala-products) .woocommerce-info {
	display: none;
}

/* --------------------------------------------------------------------------
   Cart: two cards (items + coupon on the left, totals on the right)
   -------------------------------------------------------------------------- */

.gala-woo {
	padding: 40px 20px 0;
}

.gala-woo .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	max-width: 1129px;
	margin-inline: auto;
}

.gala-woo .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.gala-woo .woocommerce-cart-form,
.gala-woo .cart_totals {
	float: none;
	width: auto;
	margin: 0;
	padding: 20px 30px;
	background: var(--gala-white);
	border: 1px solid #d5d8dc;
	border-radius: 2px;
}

.gala-woo .cart-collaterals {
	float: none;
	width: auto;
}

.gala-woo table.shop_table {
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.gala-woo table.shop_table th,
.gala-woo table.shop_table td {
	padding: 0 20px 8px 0;
	border: 0;
	background: none;
	text-align: left;
}

.gala-woo table.cart thead th {
	color: var(--gala-navy);
	font-family: var(--gala-font-ui);
	font-size: 16.6px;
	font-weight: 500;
	letter-spacing: 4.6px;
	text-transform: uppercase;
}

.gala-woo table.cart td {
	padding-block: 20px;
	color: var(--gala-navy);
	font-family: "filson-pro", sans-serif;
	font-size: 14.4px;
}

.gala-woo table.cart td.product-name a {
	color: var(--gala-tier-eyebrow);
	text-decoration: none;
	text-transform: uppercase;
}

.gala-woo table.cart img {
	width: 55px;
	height: 55px;
}

.gala-woo a.remove {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid var(--gala-sky);
	border-radius: 50%;
	color: var(--gala-sky);
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	text-decoration: none;
}

.gala-woo a.remove:hover {
	background: var(--gala-sky);
	color: var(--gala-white);
}

.gala-woo .quantity input.qty {
	width: 150px;
	height: 28px;
	padding: 1px 2px;
	border: 1px solid #d5d8dc;
	color: var(--gala-navy);
	text-align: center;
}

/* Coupon: its own card under the items. */
.gala-woo td.actions {
	padding: 16px 0 0;
}

.gala-woo .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	align-items: center;
	margin-top: 16px;
	padding: 16px 30px;
	background: var(--gala-white);
	border: 1px solid #d5d8dc;
}

.gala-woo .coupon input.input-text {
	flex: 1 1 200px;
	width: auto;
	padding: 16px;
	background: #f9fafa;
	border: 0;
}

.gala-woo .coupon button,
.gala-woo button[name="update_cart"] {
	padding: 10px 24px;
	background: transparent;
	border: 2px solid var(--gala-tier-eyebrow);
	border-radius: 0;
	color: #69727d;
	font-family: var(--gala-font-ui);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 4px;
	text-transform: uppercase;
}

.gala-woo .cart_totals h2 {
	margin: 0 0 12px;
	color: var(--gala-navy);
	font-family: var(--gala-font-display);
	font-size: 36px;
	font-weight: 400;
	line-height: 1.4;
	text-transform: uppercase;
}

.gala-woo .cart_totals th,
.gala-woo .cart_totals td {
	padding: 1px 12px 1px 0;
	color: var(--gala-navy);
	font-family: var(--gala-font-body);
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.gala-woo .cart_totals td {
	text-align: right;
}

.gala-woo .wc-proceed-to-checkout a.checkout-button {
	padding: 15px 18px;
	background: var(--gala-blue);
	border-radius: 4px;
	color: var(--gala-white);
	font-family: var(--gala-font-ui);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 4px;
	text-align: center;
	text-transform: uppercase;
}

@media (min-width: 1025px) {
	.gala-woo .woocommerce {
		grid-template-columns: minmax(0, 680fr) minmax(0, 396fr);
		gap: 53px;
		align-items: start;
	}
}

/* Beat WooCommerce's float/48% rules for the totals card; tighten the gap
   under the back link. */
.gala-woo .cart-collaterals .cart_totals {
	float: none;
	width: auto;
}

.gala-woo .cart-collaterals .cart_totals h2 {
	font-size: 36px;
}

.gala-back + .gala-woo {
	margin-top: -50px;
}

@media (min-width: 1025px) {
	.gala-back + .gala-woo {
		margin-top: -72px;
	}
}

.gala-woo .woocommerce-cart-form .coupon {
	float: none;
	width: 100%;
	box-sizing: border-box;
	flex-wrap: nowrap;
}

.gala-woo .woocommerce-cart-form .coupon input.input-text,
.gala-woo .woocommerce-cart-form .coupon button {
	margin: 0;
}

.gala-woo .woocommerce-cart-form button[name="update_cart"] {
	display: block;
	float: none;
	margin: 16px 0 0 auto;
}

@media (max-width: 600px) {
	.gala-woo .woocommerce-cart-form .coupon {
		flex-wrap: wrap;
		gap: 16px;
	}
}

/* --------------------------------------------------------------------------
   Cart badge on the menu icon (same look as the live site: black dot,
   white 11px bold number, top right of the icon)
   -------------------------------------------------------------------------- */

.main-navigation .menu-item-cart a {
	position: relative;
}

.gala-cart-count {
	position: absolute;
	top: -10px;
	right: 8px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	box-sizing: border-box;
	background: #000;
	border-radius: 99px;
	color: var(--gala-white);
	font-family: var(--gala-font-body);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	letter-spacing: 0;
}

/* Back link written as a single paragraph block (class "gala-back"). */
p.gala-back {
	margin: -20px 0 0;
	font-size: 14.4px;
	line-height: 14px;
	letter-spacing: -0.05px;
}

p.gala-back a {
	color: #b0b0b0;
	text-decoration: none;
}