/*
Theme Name:   Giveaway Ranch Child
Theme URI:    https://giveawayranch.com
Description:  Child theme for Giveaway Ranch — adds the brand palette, button overrides, custom Add-to-Cart label, sold-out overlay polish, sticky mobile CTA, and cleaner checkout. Built on Hello Elementor.
Author:       Giveaway Ranch
Author URI:   https://giveawayranch.com
Template:     hello-elementor
Version:      1.2.6
Text Domain:  giveaway-ranch-child
*/

/* ----- Full-bleed layout + no duplicate titles on designed pages ------- */
.home .site-main, .page-id-24 .site-main, .page-id-25 .site-main, .page-id-26 .site-main,
.page-id-27 .site-main, .page-id-28 .site-main, .page-id-29 .site-main, .page-id-30 .site-main,
.page-id-32 .site-main, .page-id-66 .site-main {
	padding: 0 !important;
	max-width: 100% !important;
}
.home .entry-title, .page-id-24 .entry-title, .page-id-25 .entry-title, .page-id-26 .entry-title,
.page-id-27 .entry-title, .page-id-28 .entry-title, .page-id-29 .entry-title, .page-id-30 .entry-title,
.page-id-32 .entry-title, .page-id-66 .entry-title {
	display: none;
}

/* ----- Brand palette ------------------------------------------------- */
:root {
	--gr-cream:        #F4EBD9;
	--gr-cream-soft:   #FFF4E5;
	--gr-wood:         #3E2E1E;
	--gr-wood-soft:    #6B5942;
	--gr-orange:       #C45000;
	--gr-orange-dark:  #9C3F00;
	--gr-leather:      #8B2E1F;
	--gr-text:         #3E2E1E;
}

body, .elementor-widget-text-editor {
	color: var(--gr-text);
	background-color: var(--gr-cream);
}

a { color: var(--gr-orange); }
a:hover, a:focus { color: var(--gr-leather); }

h1, h2, h3, h4, h5, h6 {
	color: var(--gr-wood);
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: .25px;
}

/* ----- WooCommerce buttons (orange w/ white text) -------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--gr-orange);
	color: #FFF;
	border-radius: 4px;
	border: none;
	padding: 12px 24px;
	font-weight: bold;
	letter-spacing: .5px;
	text-transform: uppercase;
	transition: background .15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--gr-leather);
	color: #FFF;
}

/* Disabled buttons (e.g. "Pick a seat above" before a seat is tapped) —
 * WooCommerce core paints these its default purple; keep them greyed
 * ranch-neutral instead. Covers :disabled + .disabled, base + .alt. */
.woocommerce a.button.disabled, .woocommerce a.button:disabled,
.woocommerce button.button.disabled, .woocommerce button.button:disabled,
.woocommerce input.button.disabled, .woocommerce input.button:disabled,
.woocommerce a.button.alt.disabled, .woocommerce a.button.alt:disabled,
.woocommerce button.button.alt.disabled, .woocommerce button.button.alt:disabled,
.woocommerce input.button.alt.disabled, .woocommerce input.button.alt:disabled,
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce button.button.alt:disabled[disabled]:hover {
	background: var(--gr-wood-soft) !important;
	color: var(--gr-cream) !important;
	cursor: not-allowed;
}

/* Checkout's Place-order button gets disabled for a moment by payment
 * gateways while they tokenize the card — greying it there reads as
 * "checkout broke." Keep it orange, just show a wait cursor. */
.woocommerce-checkout #place_order:disabled,
.woocommerce-checkout #place_order.disabled {
	background: var(--gr-orange) !important;
	color: #FFF !important;
	cursor: wait;
	opacity: .75;
}

/* While seats are held (countdown pill bottom-left), hide the Webinars FAB
 * bottom-right — on a phone the two together outgrow the viewport. */
body:has(#wsm-hold-pill) .gr-mobile-fab { display: none !important; }
body.gr-hide-fab .gr-mobile-fab { display: none !important; }

/* ----- Floating cart button (bottom-right, all widths) ------------------
 * Revealed by JS in functions.php only when the cart has items: a round
 * wood button with the count in an orange dot pinned to its top corner. */
#gr-cart-fab {
	position: fixed;
	bottom: 18px;
	right: 18px;
	z-index: 9999;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--gr-wood);
	font-size: 22px;
	line-height: 52px;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
#gr-cart-fab:hover, #gr-cart-fab:focus { background: var(--gr-leather); }
/* Keeps the `hidden` attribute working — the rules above would otherwise
 * out-rank the browser's built-in [hidden]{display:none}. */
#gr-cart-fab[hidden] { display: none; }
#gr-cart-fab-n {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: 99px;
	background: var(--gr-orange);
	color: #FFF;
	font: bold 12px/20px Arial, Helvetica, sans-serif;
	text-align: center;
	border: 2px solid var(--gr-cream);
	line-height: 16px;
}
/* A cart you can return to beats "browse Webinars" for the same corner. */
body.gr-cart-fab-on .gr-mobile-fab { display: none !important; }
/* Narrowest phones (or large text scaling) + countdown pill: lift the cart
 * button clear so it can never sit on the pill's "finish checkout" tail. */
@media (max-width: 480px) {
	body:has(#wsm-hold-pill) #gr-cart-fab { bottom: 74px; }
}

/* ----- Add to Cart on webinar products -------------------------------
 * The seat picker JS (in webinar-seat-manager.php) takes over the button
 * label dynamically: "Pick a seat above" when nothing's selected, and
 * "Claim N Seat(s)" once at least one seat is picked. We just need a
 * starting state that doesn't say "Add to Cart" before the JS has run. */
.woocommerce.product-type-webinar_giveaway button.single_add_to_cart_button {
	font-weight: bold;
	letter-spacing: .5px;
}
.woocommerce.product-type-webinar_giveaway button.single_add_to_cart_button[data-wsm-active="0"] {
	opacity: .7;
}

/* Hide the WooCommerce qty input on webinar products — quantity is
 * derived from the number of seats picked in the seat grid, not typed in. */
.woocommerce.product-type-webinar_giveaway .quantity {
	display: none !important;
}

/* ----- "N of T seats left" badge on archive tiles ---------------------- */
.woocommerce ul.products li.product .gr-seats-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--gr-orange);
	color: #FFF;
	font-size: 12px;
	font-weight: bold;
	padding: 5px 12px;
	border-radius: 99px;
	z-index: 5;
	pointer-events: none;
}

/* ----- My Account: branded login/register forms ------------------------ */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
	background: #FFF;
	border: 2px solid var(--gr-wood) !important;
	border-radius: 10px !important;
	padding: 24px !important;
}
.woocommerce-account .u-columns h2 {
	font-family: Georgia, "Times New Roman", serif;
	color: var(--gr-wood);
}
.woocommerce form .woocommerce-form-row input.input-text {
	border: 1px solid var(--gr-wood);
	border-radius: 4px;
	padding: 11px 12px;
}

/* ----- Sold-out polish on archive (works with the seat-manager CSS)  ----- */
.woocommerce ul.products li.product.outofstock .price,
.woocommerce ul.products li.product.outofstock .button {
	opacity: .5;
}

/* ----- Sticky "Active Webinars" mobile CTA (bottom-right) ----------
 * Rendered as a real <a class="gr-mobile-fab"> from functions.php so it's
 * actually clickable (a body::after pseudo-element can't take a link). */
.gr-mobile-fab { display: none; }
@media (max-width: 768px) {
	.gr-mobile-fab {
		display: block;
		position: fixed;
		bottom: 18px;
		right: 18px;
		background: var(--gr-orange);
		color: #FFF;
		padding: 12px 18px;
		border-radius: 28px;
		font-weight: bold;
		font-size: 14px;
		z-index: 999;
		box-shadow: 0 4px 12px rgba(62, 46, 30, .4);
		text-decoration: none;
	}
	.gr-mobile-fab:hover, .gr-mobile-fab:focus { color: #FFF; background: var(--gr-leather); }
	body.gr-hide-fab .gr-mobile-fab { display: none; }
}

/* ----- Cleaner checkout: single column, larger inputs, orange total -- */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	width: 100% !important;
	float: none !important;
	max-width: 720px;
	margin: 0 auto !important;
}

.woocommerce-checkout #order_review {
	background: var(--gr-cream);
	border: 1px solid var(--gr-wood);
	border-radius: 6px;
	padding: 20px;
	margin-top: 20px;
}

/* CLASSIC checkout fields only — note the #customer_details / #order_review
 * scoping, and do NOT loosen it back to a bare .woocommerce-checkout prefix.
 * Why: the site now serves the BLOCK checkout (Store API, .wc-block-components-*
 * markup), and <body> still carries .woocommerce-checkout there. This rule used
 * to match block fields too, and its symmetric 12px top padding wiped out the
 * extra top padding WooCommerce reserves for the floating label to shrink into.
 * Result on a real buyer's phone: "Address" printed on top of "216 rolling
 * hills dr", "City" on top of "Lampasas", "ZIP Code" on top of "76550" — every
 * label sitting on its own value. Fixed in 1.1.9 by scoping to the classic
 * containers, which the block checkout never renders. */
.woocommerce-checkout #customer_details input[type="text"],
.woocommerce-checkout #customer_details input[type="email"],
.woocommerce-checkout #customer_details input[type="tel"],
.woocommerce-checkout #customer_details select,
.woocommerce-checkout #customer_details textarea,
.woocommerce-checkout #order_review input[type="text"],
.woocommerce-checkout #order_review input[type="email"],
.woocommerce-checkout #order_review input[type="tel"],
.woocommerce-checkout #order_review select,
.woocommerce-checkout #order_review textarea {
	font-size: 16px !important;
	padding: 12px 14px !important;
	border-radius: 4px !important;
	border: 1px solid var(--gr-wood) !important;
}

/* iOS zoom guard for the classic fields that live OUTSIDE #customer_details /
 * #order_review — the coupon box and the checkout login form. Scoping the rule
 * above to those two containers correctly stopped it reaching block fields, but
 * it also stopped reaching these, and any input under 16px makes iOS Safari
 * zoom the whole page in when it's tapped. Font-size only: padding is what
 * broke the block labels, so it deliberately isn't repeated here, and these
 * form selectors never match block-checkout markup. */
form.checkout_coupon input[type="text"],
form.woocommerce-form-login input[type="text"],
form.woocommerce-form-login input[type="email"],
form.woocommerce-form-login input[type="password"] {
	font-size: 16px !important;
}

/* BLOCK checkout fields — brand colour ONLY.
 * The block checkout uses a floating-label pattern: the <label> is absolutely
 * positioned inside the field and slides up into top padding that WooCommerce
 * reserves on the input. That geometry is theirs, not ours.
 * NEVER set padding, line-height, height, position, top, font-size or
 * transform on .wc-block-components-text-input, its input, or its label —
 * each of those participates in the floating-label math and will drop the
 * label back on top of the typed value (the 1.1.9 bug above).
 * Border colour, border radius and background are the only safe knobs.
 * No !important here on purpose: these selectors already out-specify
 * WooCommerce's own, so nothing needs to be forced. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-blocks-components-select .wc-blocks-components-select__select {
	border-color: var(--gr-wood);
	border-radius: 4px;
	background-color: #FFF;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total .woocommerce-Price-amount {
	color: var(--gr-orange);
	font-size: 20px;
	font-weight: bold;
}

/* ----- Header: wood-brown bar, cream nav, orange accents -------------- */
.site-header, header.site-header, header#site-header {
	background: var(--gr-wood) !important;
	border-bottom: 3px solid var(--gr-orange);
	/* Hello Elementor boxes the header element itself — stretch the bar
	   full-bleed while keeping the content aligned to the 1140px column. */
	max-width: 100% !important;
	width: 100% !important;
	padding: 14px max(16px, calc((100% - 1140px) / 2)) !important;
}
.site-header .site-title, .site-header .site-title a,
.site-header h1, .site-header h1 a, .site-header h4, .site-header h4 a {
	font-family: Georgia, "Times New Roman", serif;
	color: var(--gr-cream) !important;
	letter-spacing: 1px;
	text-decoration: none;
}
.site-header .site-description { color: #FFD9B0 !important; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.site-header .custom-logo, .site-header .site-logo img, .site-header img {
	max-height: 80px;
	width: auto;
}
.site-header nav a, .site-header .menu a, .site-header ul li a {
	color: var(--gr-cream) !important;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: .5px;
	text-decoration: none;
}
.site-header nav a:hover, .site-header .menu a:hover { color: #FFD9B0 !important; }
.site-header .current-menu-item > a, .site-header .current_page_item > a { color: var(--gr-orange) !important; }
@media (max-width: 768px) {
	.site-header { padding: 10px 16px !important; }
	.site-header img, .site-header .custom-logo { max-height: 50px; }
	.site-header ul { flex-wrap: wrap; justify-content: center; }
	/* Phone nav diet: 8 links squeezed to 13px was unreadable and untappable.
	 * Hide the ones a buyer doesn't need in the header — every hidden link
	 * still lives in the footer menu, and the site-wide AMOE footer bar keeps
	 * the legally-required free-entry link visible on every single page.
	 * Menu-item ID -> name map (if the menu is ever rebuilt, WP assigns new
	 * IDs and these classes must be updated to match):
	 *   .menu-item-36 = FAQ
	 *   .menu-item-38 = Free Entry
	 *   .menu-item-39 = Contact
	 *   .menu-item-68 = About
	 * Survivors: Webinars · How It Works · Winners · Sign In / My Account. */
	.site-header .menu-item-36,
	.site-header .menu-item-38,
	.site-header .menu-item-39,
	.site-header .menu-item-68 {
		display: none;
	}
	/* The surviving four get room to breathe: back up to a readable size and
	 * a 44px-tall tap target (Apple/Google minimum for thumbs). */
	.site-header nav a, .site-header .menu a, .site-header ul li a {
		font-size: 15px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		padding: 0 10px;
	}
}

/* ----- WooCommerce archive: card-style product tiles ------------------- */
.woocommerce ul.products li.product {
	background: #FFF;
	border: 2px solid var(--gr-wood);
	border-radius: 10px;
	padding: 0 0 18px !important;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(62, 46, 30, .08);
	transition: transform .12s ease, box-shadow .12s ease;
	text-align: center;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(62, 46, 30, .16);
}
.woocommerce ul.products li.product img { margin-bottom: 12px; }

/* Product/webinar tile images — show full product, less crop (2026-09-03) */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
  object-fit: contain;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  background: #F4EBD9;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	color: var(--gr-wood);
	padding: 0 14px;
}
.woocommerce ul.products li.product .price {
	color: var(--gr-orange) !important;
	font-size: 18px;
	font-weight: bold;
}
.woocommerce ul.products li.product .price::after { content: " / seat"; font-size: 12px; color: var(--gr-wood-soft); font-weight: normal; }
.woocommerce ul.products li.product .button { margin-top: 8px; }

/* ----- Single product: cleaner summary column -------------------------- */
.single-product div.product .product_title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 34px;
	color: var(--gr-wood);
}
.single-product div.product p.price { color: var(--gr-orange) !important; font-size: 26px; font-weight: bold; }
.single-product div.product p.price::after { content: " per seat"; font-size: 14px; color: var(--gr-wood-soft); font-weight: normal; }
.single-product div.product .woocommerce-product-details__short-description { font-size: 16px; color: var(--gr-wood-soft); }

/* ----- WC notices in brand colors --------------------------------------
 * COLORS, BORDERS AND RADIUS ONLY — never add padding/margin/height/size
 * overrides to any notice (classic or block). A previous geometry override
 * on block markup is what broke the checkout's floating labels (the 1.1.9
 * incident documented above); geometry stays WooCommerce's. */
.woocommerce-message, .woocommerce-info {
	border-top-color: var(--gr-orange) !important;
	background: var(--gr-cream-soft) !important;
	color: var(--gr-wood) !important;
	border-radius: 6px;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--gr-orange) !important; }
.woocommerce-error {
	border-top-color: var(--gr-leather) !important;
	background: var(--gr-cream-soft) !important;
	color: var(--gr-wood) !important;
	border-radius: 6px;
}

/* Block cart/checkout notices ("added to cart", errors) — same brand look.
 * Same rule as above: colors + border + radius only. */
.wc-block-components-notice-banner {
	background-color: var(--gr-cream-soft);
	color: var(--gr-wood);
	border-color: var(--gr-orange);
	border-radius: 6px;
}
.wc-block-components-notice-banner a { color: var(--gr-orange); }
.wc-block-components-notice-banner > svg { background-color: var(--gr-orange); }
.wc-block-components-notice-banner.is-error {
	border-color: var(--gr-leather);
}
.wc-block-components-notice-banner.is-error > svg { background-color: var(--gr-leather); }

/* ----- Cart + checkout + account tables -------------------------------- */
.woocommerce table.shop_table {
	background: #FFF;
	border: 1px solid var(--gr-wood);
	border-radius: 6px;
}
.woocommerce table.shop_table th { color: var(--gr-wood); background: var(--gr-cream-soft); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	background: #FFF;
	border: 1px solid var(--gr-wood);
	border-radius: 6px;
	padding: 10px 16px;
	margin-bottom: 6px;
	color: var(--gr-wood);
	font-weight: bold;
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--gr-orange);
	border-color: var(--gr-orange);
	color: #FFF;
}

/* ----- Page titles on inner pages -------------------------------------- */
.entry-title, .page-title { font-family: Georgia, "Times New Roman", serif; color: var(--gr-wood); }

/* ----- Footer mini AMOE notice ---------------------------------------- */
.gr-amoe-footer {
	background: var(--gr-wood);
	color: var(--gr-cream);
	padding: 18px 20px;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
}
.gr-amoe-footer a {
	color: var(--gr-orange);
	font-weight: bold;
}

/* ----- PDP CTA stack gap (sitewide) — 2026-09-03 --------------------
 * "Pick a seat above" (Woo ATC, often float:left) and ".wsm-share-btn"
 * ("Tell a buddy…") sat flush / bled on mobile. Clear the float, full-
 * width the claim button, and give the share/buddy block a hard gap so
 * sticky/FAB stacks never overlap the seat CTA. */
form.cart:has(.wsm-widget) button.single_add_to_cart_button {
	float: none !important;
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	clear: both;
}
form.cart:has(.wsm-widget) .wsm-share-btn,
.woocommerce form.cart .wsm-share-btn,
.wsm-share-btn {
	display: block !important;
	clear: both !important;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-top: 20px !important;
}
@media (max-width: 480px) {
	form.cart:has(.wsm-widget) .wsm-share-btn,
	.woocommerce form.cart .wsm-share-btn,
	.wsm-share-btn {
		margin-top: 24px !important;
	}
}

/* Mobile PDP CTA: gap between ATC ("Pick a seat above") and share ("Tell a buddy…")
 * Float on ATC collapses share margin at ~390px; clear + margin fixes bleed (2026-09-03). */
@media (max-width: 480px) {
	.single-product form.cart button.single_add_to_cart_button {
		float: none !important;
		display: block;
		margin-bottom: 16px !important;
	}
	.single-product form.cart .wsm-share-btn,
	.single-product .wsm-share-btn {
		clear: both !important;
		display: block;
		margin-top: 4px !important;
	}
}

/* Tell a buddy — solid orange, white text (Tyler 2026-09-03) */
.wsm-share-btn,
.woocommerce form.cart .wsm-share-btn,
.single-product .wsm-share-btn {
  background: #C45000 !important; /* match --wsm-orange / --gr-orange / ATC brand orange */
  color: #FFFFFF !important;
  border-color: #C45000 !important;
}
.wsm-share-btn:hover,
.woocommerce form.cart .wsm-share-btn:hover,
.single-product .wsm-share-btn:hover {
  background: #9C3F00 !important; /* --gr-orange-dark */
  color: #FFFFFF !important;
  border-color: #9C3F00 !important;
}

/* ----- Mobile archive: 2-col product tiles (~390px phones) — 2026-09-03
 * Shop (/shop/) and webinars (/webinars/) were 1 full-width card per row
 * on phone. Switch to a compact 2-column grid; desktop multi-col unchanged.
 * Keep object-fit:contain images; slightly smaller type so titles/prices/CTAs
 * stay readable in ~180px-wide cards. Badge scale matches card density.
 *
 * Webinars is page-id-32. Customizer Additional CSS (26 Aug) forces
 * .page-id-32 ul.products { display:block !important } and li width:100%.
 * Those rules load AFTER this stylesheet, so we beat them with body.page-id-32
 * (higher specificity) — desktop 1-col centered cards stay as-is. */
@media (max-width: 768px) {
	.woocommerce ul.products,
	body.page-id-32 ul.products,
	body.page-id-32 .woocommerce ul.products,
	body.page-id-32 ul.products.columns-3,
	body.page-id-32 ul.products.columns-2,
	body.page-id-32 ul.products.columns-4,
	body.page-id-32 .products.columns-3,
	body.page-id-32 .products.columns-2,
	body.page-id-32 .products.columns-4 {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 12px !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none;
		clear: both;
		float: none !important;
	}
	.woocommerce ul.products::before,
	.woocommerce ul.products::after,
	body.page-id-32 ul.products::before,
	body.page-id-32 ul.products::after {
		display: none !important;
		content: none !important;
	}
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product.first,
	.woocommerce ul.products li.product.last,
	body.page-id-32 ul.products li.product,
	body.page-id-32 .woocommerce ul.products li.product,
	body.page-id-32 ul.products li.product.first,
	body.page-id-32 ul.products li.product.last {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 0 !important;
		float: none !important;
		clear: none !important;
		padding: 0 0 12px !important;
		box-sizing: border-box !important;
	}
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	body.page-id-32 ul.products li.product .woocommerce-loop-product__title {
		font-size: 14px;
		line-height: 1.25;
		padding: 0 8px;
	}
	.woocommerce ul.products li.product .price,
	body.page-id-32 ul.products li.product .price {
		font-size: 14px;
	}
	.woocommerce ul.products li.product .price::after,
	body.page-id-32 ul.products li.product .price::after {
		font-size: 10px;
	}
	.woocommerce ul.products li.product .button,
	body.page-id-32 ul.products li.product .button {
		font-size: 12px;
		padding: 8px 10px;
		margin-top: 6px;
	}
	.woocommerce ul.products li.product img,
	body.page-id-32 ul.products li.product img {
		margin-bottom: 8px;
	}
	.woocommerce ul.products li.product .gr-seats-badge,
	body.page-id-32 ul.products li.product .gr-seats-badge {
		top: 8px;
		left: 8px;
		font-size: 10px;
		padding: 3px 8px;
	}
}

/* ----- Thank-you / order-received cleanup (Tyler Order 500, 2026-09-03) -----
 * 1) Hide DATE from ORDER NUMBER / DATE / EMAIL / TOTAL / PAYMENT row.
 * 2) Restack overview so dashed/dotted column dividers aren't misaligned
 *    (Woo float + border-right looked broken at ~390px). Keep seats card,
 *    what-happens-next, Tell a buddy + My Account CTAs untouched.
 */
.woocommerce-order-received ul.woocommerce-order-overview li.woocommerce-order-overview__date,
.woocommerce-checkout ul.woocommerce-order-overview li.woocommerce-order-overview__date,
.woocommerce ul.order_details li.date {
	display: none !important;
}

.woocommerce-order-received ul.woocommerce-order-overview,
.woocommerce-order-received ul.order_details {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	margin: 0 0 1.5em !important;
	padding: 0 !important;
	list-style: none !important;
	clear: both;
}

.woocommerce-order-received ul.woocommerce-order-overview::before,
.woocommerce-order-received ul.woocommerce-order-overview::after,
.woocommerce-order-received ul.order_details::before,
.woocommerce-order-received ul.order_details::after {
	display: none !important;
	content: none !important;
}

.woocommerce-order-received ul.woocommerce-order-overview li,
.woocommerce-order-received ul.order_details li {
	float: none !important;
	display: block !important;
	width: 50% !important;
	max-width: 50% !important;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 10px 14px 10px 0 !important;
	border: 0 !important;
	border-bottom: 1px dashed #D8CDB8 !important;
	border-right: none !important;
	line-height: 1.35 !important;
	text-transform: uppercase;
	font-size: 0.72em;
	list-style: none !important;
}

.woocommerce-order-received ul.woocommerce-order-overview li strong,
.woocommerce-order-received ul.order_details li strong {
	display: block;
	margin-top: 4px;
	text-transform: none;
	font-size: 1.25em;
	line-height: 1.3;
	word-break: break-word;
}

@media (min-width: 769px) {
	.woocommerce-order-received ul.woocommerce-order-overview li,
	.woocommerce-order-received ul.order_details li {
		width: 25% !important;
		max-width: 25% !important;
		border-bottom: none !important;
		border-right: 1px dashed #D8CDB8 !important;
		padding: 0 1.25em 0 0 !important;
		margin: 0 !important;
	}
	.woocommerce-order-received ul.woocommerce-order-overview li:last-child,
	.woocommerce-order-received ul.order_details li:last-child {
		border-right: none !important;
		padding-right: 0 !important;
	}
}

.woocommerce-order-received .wsm-thankyou {
	margin-top: 8px;
}
.woocommerce-order-received .wsm-thankyou .wsm-share-btn {
	margin-top: 12px !important;
}

/* ----- Product-tile grids: the "jumbled" layout — 2026-09-03 ----------------
 * Two Woo defaults fight any CSS grid we put on ul.products:
 *   1. .products::before/::after (Woo's clearfix) become GRID ITEMS and eat the
 *      first cells, so every tile lands one cell late — that's the offset,
 *      staggered homepage rows.
 *   2. li.product keeps float:left + width:30.75%, and inside a grid cell that
 *      percentage resolves against the ~350px CELL, not the row — 108px-wide
 *      cards in 350px columns.
 * The 2026-09-03 mobile round killed these below 768px only, so desktop stayed
 * broken. Kill them at every width, for the homepage drops section (.gr-live)
 * and the webinars archive alike. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.gr-live ul.products::before,
.gr-live ul.products::after,
body.page-id-32 ul.products::before,
body.page-id-32 ul.products::after {
	display: none !important;
	content: none !important;
}
.gr-live ul.products li.product,
body.page-id-32 ul.products li.product,
body.page-id-32 .woocommerce ul.products li.product {
	float: none !important;
	clear: none !important;
}

/* Homepage "Live & upcoming webinars": let the authored 3-col grid apply.
 * (Grid template lives in the page's own <style> — build/pages/home.html.) */
.gr-live ul.products li.product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

/* ----- /webinars/ desktop: 2-up grid, not one tall column — 2026-09-03 ------
 * Customizer Additional CSS rule "10)" (26 Aug) pinned this page to
 * display:block with li max-width:420px + auto margins, back when the catalog
 * was a single drop ("one card, not a 2-col with an empty cell"). There are 15
 * live drops now, so that rule produced a 9,000px single-file scroll. Beat it
 * with body.page-id-32 (higher specificity than the Customizer's .page-id-32).
 * NOTE: Customizer rule "10)" is now dead weight and should be deleted. */
@media (min-width: 769px) {
	body.page-id-32 ul.products,
	body.page-id-32 .woocommerce ul.products,
	body.page-id-32 ul.products.columns-2,
	body.page-id-32 ul.products.columns-3,
	body.page-id-32 ul.products.columns-4 {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 28px !important;
		max-width: 900px !important;
		margin: 0 auto 16px !important;
		padding: 0 !important;
		float: none !important;
		list-style: none;
	}
	body.page-id-32 ul.products li.product,
	body.page-id-32 .woocommerce ul.products li.product {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}
}

/* /webinars/: the first tile butted straight against the dark .gr-wbhero
 * banner (banner bottom and tile top both landed at y=287). Give the archive
 * some air under the hero. */
body.page-id-32 .page-content > .woocommerce {
	padding-top: 32px;
}
@media (max-width: 768px) {
	body.page-id-32 .page-content > .woocommerce {
		padding-top: 20px;
	}
}