/* =============================================================
   HBF Park Satellite Catering — main theme stylesheet

   Most styling comes from theme.json. This file holds:
   - :root design tokens (mirror theme.json palette + custom additions)
   - Block-level overrides theme.json can't express
   - Component-style class hooks (headers, .post-card, etc.)

   HBF Park uses the system font stack (no custom web fonts), so there
   are no @font-face declarations here. If a brand font is licensed
   later, add @font-face here + point --font-display/--font-body at it
   and update theme.json's fontFamilies to match.
   ============================================================= */

:root {
	/* ── Colours ────────────────────────────────────────────── */
	/* Brand colour aliases - single source of truth is theme.json palette (--wp--preset--color--*). */
	--color-primary:        var(--wp--preset--color--primary);
	--color-primary-dark:   var(--wp--preset--color--primary-dark);
	--color-accent:         var(--wp--preset--color--accent);
	--color-accent-dark:    var(--wp--preset--color--accent-dark);
	--color-bg:             var(--wp--preset--color--bg);
	--color-text:           var(--wp--preset--color--body-text);
	--color-muted:          var(--wp--preset--color--muted);
	--color-border:         rgba(0, 0, 0, 0.08);   /* translucent neutral - no palette equivalent */
	--color-error:          var(--wp--preset--color--error);
	--color-error-bg:       color-mix(in srgb, var(--wp--preset--color--error) 12%, transparent);

	/* ── Typography ─────────────────────────────────────────── */
	--font-display:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, helvetica, arial, sans-serif;
	--font-body:            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, helvetica, arial, sans-serif;

	/* ── Layout rhythm ──────────────────────────────────────── */
	--section-padding:      40px;

	/* ── Buttons ────────────────────────────────────────────── */
	--button-radius:        9999px;
	--button-min-height:    44px;

	/* ── Header ─────────────────────────────────────────────── */
	--header-height:        120px;
	--header-transition:    0.3s ease;
	--header-shadow:        0 2px 8px rgba(0, 0, 0, 0.08);
}

/* =============================================================
   Site header
   ============================================================= */

/* Allow position: sticky on descendants. Some FSE wrappers (and
   theme.json-injected styles) set overflow on html/body/.wp-site-blocks
   which silently breaks sticky on the header. `clip` is preferred over
   `hidden` here — `hidden` creates a new containing block, `clip`
   doesn't, so sticky on descendants continues to work. */
html,
body,
.wp-site-blocks {
	overflow-x: clip;
}

/* Footer pinned to viewport bottom on short pages (e.g. a single event
   card), instead of floating directly under the content with a slab of
   blank page below it. Standard flex sticky-footer: .wp-site-blocks fills
   at least the viewport height, main absorbs any slack, footer keeps its
   natural size. On long pages main's real content already exceeds the
   viewport, so this has no effect — footer still lands right after it.
   100dvh (falls back to 100vh) accounts for mobile browser chrome, same
   convention as the nav drawer height above. */
html,
body {
	height: 100%;
}
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
.wp-site-blocks > main {
	flex: 1 0 auto;
}
.wp-site-blocks > footer {
	flex-shrink: 0;
}

/* Sticky header.

   Subtle FSE gotcha: our parts/header.html renders a <header class=
   "site-header"> element, but the wp:template-part block in our
   page templates (with tagName:"header") wraps that in an OUTER
   <header class="wp-block-template-part"> element. Sticky positioning
   sticks within its parent's bounds — if we put position:sticky on
   the inner .site-header, its parent is the outer wrapper, which is
   itself only ~120px tall. The header sticks for ~120px of scroll
   then scrolls away with its short parent.

   Fix: apply sticky to the OUTER template-part wrapper instead, whose
   parent is .wp-site-blocks (the full-page container). The :has()
   selector keeps this from also stickying the footer template-part.

   The inner .site-header keeps the visual treatment (background,
   border, shadow); only the positioning moves outward. */
header.wp-block-template-part:has(.site-header) {
	position: sticky;
	top: var(--admin-bar-height, 0);
	z-index: 100;
}

/* WP admin bar accommodation. When logged in, body has class .admin-bar
   and the bar covers the top 32px of the viewport (46px below 782px).
   Without this, our sticky header would sit BEHIND the admin bar.

   Setting a CSS variable on body.admin-bar, falling back to 0 elsewhere,
   means the sticky's `top` rule above adapts cleanly without separate
   selectors per state. */
body.admin-bar {
	--admin-bar-height: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar {
		--admin-bar-height: 46px;
	}
}
/* Header surface — background + bottom hairline live here (not as inline
   styles on parts/header.html) so the colours resolve through tokens and
   can't drift from the palette. --color-border is the rgba(0,0,0,0.08)
   translucent neutral (no palette equivalent), matching the value the block
   editor previously serialised inline. */
.site-header {
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--header-shadow);
}

/* Header inner row — padding controlled here (not via inline style on
   parts/header.html) so we can transition it for shrink-on-scroll.

   !important is here because the wp:group block in parts/header.html
   used to carry inline padding via the spacing.padding JSON, and the
   block editor's Site Editor may have saved customisations of this
   template part that re-inject inline padding. Inline beats class
   selectors, so !important is required to keep CSS-driven padding
   from being overridden by stale Site Editor saves. */
.site-header__inner {
	padding-top: 18px !important;
	padding-bottom: 18px !important;
	transition: padding 0.2s ease;
}

/* Shrink-on-scroll. The is-stuck class is toggled by
   assets/js/header-shrink.js via an IntersectionObserver on a sentinel
   inserted above the header. When the sentinel exits viewport, header
   gains .is-stuck and tightens its padding + logo size. */
header.wp-block-template-part.is-stuck .site-header__inner {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}
header.wp-block-template-part .wp-block-site-logo img {
	transition: max-height 0.2s ease, width 0.2s ease;
}
header.wp-block-template-part.is-stuck .wp-block-site-logo img {
	max-height: 36px;
	width: auto;
}

/* Zero out the default blockGap on the header and main.

   theme.json's blockGap injects `margin-block-start: 24px` on every direct
   child of .wp-site-blocks via a :where() rule (low specificity). Two
   places that 24px shows up unwantedly:

     - On the header (first child): WP's admin-bar padding on body
       prevents margin-collapse, so the 24px appears as a gap between
       the admin bar and the sticky header.
     - On main: appears as a 24px gap below the sticky header.

   We zero both. Footer keeps its blockGap so it has natural space above
   it, which is correct for a footer at the bottom of long content. */
.wp-site-blocks > header,
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Page content breathing room.

   With main flush against the sticky header (above), we need explicit
   top space inside main so headings/content don't butt up against the
   header bottom border. padding-top (rather than restoring blockGap or
   relying on the first child's margin) is consistent across pages no
   matter what the first block is — plain heading, columns, shortcode
   output, etc. */
main.wp-block-group {
	padding-top: 40px;
}
@media (max-width: 640px) {
	main.wp-block-group {
		padding-top: 24px;
	}
}

/* Override WC blocktheme.css's max-width: 1000px on cart/checkout/account.

   WooCommerce ships a default blocktheme.css that caps `.woocommerce-cart
   main .woocommerce` (and equivalents) at 1000px, ignoring the active
   theme's wideSize from theme.json. Result: the cart and checkout tables
   render narrower than the alignwide columns above them on those pages.

   Removing the max-width lets our theme's layout (constrained / alignwide)
   take over, so cart/checkout content matches the surrounding page width. */
.woocommerce-cart main .woocommerce,
.woocommerce-checkout main .woocommerce,
.woocommerce-account main .woocommerce {
	max-width: none;
}

/* Nav link colours — !important beats the inline color WP injects on the
   nav block wrapper when a colour is set or inherited from a saved nav post */
.site-header .wp-block-navigation a,
.site-header .wp-block-navigation a:link,
.site-header .wp-block-navigation a:visited {
	color: var(--color-primary) !important;
	text-decoration: none;
	font-weight: 700;
}
.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation a:focus {
	color: var(--color-primary-dark) !important;
}

/* Welcome greeting injected by Account::welcome_item() — non-clickable
   label, tone down vs the link items so it reads as a label not a CTA.
   Lighter weight than the nav links (which are 700) so the greeting
   reads as supplementary copy, not a menu item. */
.site-header .wp-block-navigation .sc-nav-welcome > .wp-block-navigation-item__content {
	color: var(--color-text);
	font-weight: 400;
	cursor: default;
}

/* =============================================================
   Mobile hamburger drawer — VL-BUILD-STANDARDS §2.3 + §2.3a
   =============================================================
   The WP Navigation block defaults overlayMenu="mobile" to switch
   into overlay mode at 600px, with no drawer-style treatment for
   the panel itself. Per the build standards, all VL FSE builds:

   1. Body scroll lock when the overlay is open
   2. Dark backdrop covering the viewport
   3. 320px panel sliding in from the right
   4. Close (×) button positioned inside the panel
   5. Nav items stacked vertically, each stretched to full drawer width
   6. Explicit breakpoint override to keep the inline → overlay
      transition at 1024px (not WP's 600px default)

   Adaptations for hbfpark-satellite:
   - Drawer background: var(--color-bg) (white) instead of dark
   - Close icon and item colours: var(--color-text)
   - Item separator: rgba(0,0,0,0.08) (light border on white)
   ============================================================= */

/* 1. Scroll lock — global. Safe outside the media query because
      .is-menu-open only exists while the overlay is open. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) {
	overflow: hidden;
}

/* 2. Belt-and-braces: prevent items from wrapping mid-layout above the
      breakpoint. Without this, the last nav item can drop to its own
      line at common laptop widths (1000–1100px) before the overlay
      kicks in. */
.site-header .wp-block-navigation__container {
	flex-wrap: nowrap;
}

/* 3. Open/close button colours — apply globally; WP's own CSS handles
      which one shows at which breakpoint. Do NOT set `display` here:
      WP uses display:none on the hamburger above its breakpoint and
      our @media block below replaces that with our own breakpoint. */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	color: var(--color-text);
	padding: 0;
	align-items: center;
	justify-content: center;
}

/* 4. Drawer + backdrop CSS — must be inside the mobile media query.
      On desktop, the container is display:flex; position:static; any
      position:fixed rules on children would otherwise apply at all
      breakpoints and cover the desktop nav. */
@media (max-width: 1023px) {

	/* Show hamburger, hide the inline container. Belt-and-braces against
	   WP's 600px default — see §2.3a. */
	.site-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
		width: 32px;
		height: 32px;
	}
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	/* Backdrop — full-viewport dim overlay behind the drawer. */
	.site-header .wp-block-navigation__responsive-close {
		position: fixed !important;
		inset: 0 !important;
		background: rgba(0, 0, 0, 0.4) !important;
		z-index: 9998 !important;
	}

	/* Container reset — transparent full-viewport wrapper. The drawer
	   panel inside this is what gets the background and slide-in. */
	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;
	}

	/* Drawer panel — slides in from the right. 320px wide, capped at
	   85vw so it doesn't dominate small phones. Padding-top equals the
	   header height so the first nav item sits below the close button. */
	.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(--color-bg) !important;
		z-index: 9999 !important;
		overflow-y: auto !important;
		padding: var(--header-height, 120px) 2rem 2rem !important;
		box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !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); }
	}

	/* Close (×) button — position:absolute (NOT fixed) inside the dialog.
	   The drawer's translateX animation creates a containing block for
	   position:fixed descendants — they snap around during the slide-in.
	   Absolute makes the button travel with the drawer. */
	.site-header .wp-block-navigation__responsive-container-close {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		bottom: auto !important;
		left: auto !important;
		width: 4rem !important;
		height: var(--header-height, 120px) !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		z-index: 1 !important;
		background: transparent !important;
		border: 0 !important;
		cursor: pointer !important;
		color: var(--color-text) !important;
	}

	/* Nav container inside the open drawer — switch from WP's default
	   flex-row to column so items stack and fill the drawer width. */
	.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;
	}
}

/* Nav item links inside the open drawer — full-width stacked rows with
   a subtle separator. Scoped by .is-menu-open so the rule is harmless
   above the breakpoint. */
.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(--color-text) !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* =============================================================
   Site footer
   ============================================================= */

/* Footer surface — navy background + white text via tokens (not inline styles
   on parts/footer.html). Uses the brand navy (--color-primary, #0c2649) so the
   footer tracks the palette rather than the near-black body-text token. */
.site-footer {
	background-color: var(--color-primary);
	color: var(--color-bg);
}

/* Copyright line — translucent white. No palette equivalent for the 60%
   tint, so derive it from --color-bg via color-mix rather than hardcoding
   rgba(255,255,255,0.6). */
.site-footer__copyright {
	color: color-mix(in srgb, var(--color-bg) 60%, transparent);
}

.site-footer a {
	color: color-mix(in srgb, var(--color-bg) 70%, transparent);
	text-decoration: none;
}
.site-footer a:hover {
	color: var(--color-bg);
}

/* =============================================================
   WooCommerce — form inputs, selects, buttons, notices
   ============================================================= */

/* ── Inputs & textareas ─────────────────────────────────────── */
.woocommerce .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea,
.woocommerce-page .input-text,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="number"],
.woocommerce-page input[type="password"],
.woocommerce-page textarea {
	border: 1px solid var(--color-border);
	border-radius: 6px;
	padding: 10px 14px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-text);
	background: var(--color-bg);
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.woocommerce .input-text:focus,
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce textarea:focus,
.woocommerce-page .input-text:focus,
.woocommerce-page input[type="text"]:focus,
.woocommerce-page input[type="email"]:focus,
.woocommerce-page input[type="tel"]:focus,
.woocommerce-page input[type="number"]:focus,
.woocommerce-page input[type="password"]:focus,
.woocommerce-page textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(0, 163, 173, 0.15);
}

/* ── Select elements ────────────────────────────────────────── */
.woocommerce select,
.woocommerce-page select {
	border: 1px solid var(--color-border);
	border-radius: 6px;
	padding: 10px 14px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-text);
	background: var(--color-bg);
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.woocommerce select:focus,
.woocommerce-page select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(0, 163, 173, 0.15);
}

/* ── Form labels ────────────────────────────────────────────── */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 4px;
}

/* ── Quantity input ─────────────────────────────────────────── */
.woocommerce .quantity input.qty {
	border-radius: 6px;
	text-align: center;
	padding: 8px 10px;
}

/* ── Buttons ────────────────────────────────────────────────── */
/* Initial state: navy bg + white text. Hover: solid teal bg + dark navy text
   (white-on-teal fails contrast, so hover flips to a dark text colour).
   Note: text colour is matched in theme.json (elements.button.color.text) so
   block buttons inherit the same default. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	min-height: var(--button-min-height);
	border-radius: var(--button-radius);
	border: none;
	background: var(--color-primary);
	color: var(--color-bg) !important;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s, color .2s;
	box-shadow: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
	background: var(--color-accent);
	color: var(--color-primary-dark) !important;
	text-decoration: none;
}

/* My Account orders table — the row-level View button is rendered inside a
   small td; the site-wide 12px×24px button padding overflows the cell and
   the button leans askew against the row border. Tighter padding + auto
   height keeps the button inside its row. Scoped to .woocommerce-orders-table
   so it doesn't shrink CTAs elsewhere (cart, checkout, single product). */
.woocommerce-orders-table a.button,
.woocommerce-orders-table button.button {
	padding: 6px 16px;
	min-height: 0;
	font-size: 12px;
}

/* ── Notices ────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: 8px;
	font-family: var(--font-body);
}
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--color-primary);
}
.woocommerce-error {
	border-top-color: var(--color-error);
}

/* ── Checkout ───────────────────────────────────────────────── */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3 {
	font-size: 18px;
	margin-bottom: 16px;
}
.woocommerce-checkout #payment {
	border-radius: 8px;
}
.woocommerce-checkout #payment div.payment_box {
	background: rgba(0, 163, 173, 0.06);
}

/* ── Cart table ─────────────────────────────────────────────── */
.woocommerce table.shop_table {
	border-radius: 8px;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--color-border);
}
.woocommerce table.shop_table th {
	background: rgba(0, 163, 173, 0.06);
	color: var(--color-text);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 12px 16px;
}
.woocommerce table.shop_table td {
	padding: 14px 16px;
	border-top: 1px solid var(--color-border);
}

/* ── Cart — proceed to checkout button ──────────────────────── */
/* WC core CSS gives .checkout-button a block-level full-width treatment.
   Override to keep it inline-sized like every other CTA on the site. */
.woocommerce .wc-proceed-to-checkout {
	text-align: right;
}
.woocommerce .wc-proceed-to-checkout .checkout-button,
.woocommerce .wc-proceed-to-checkout a.button.alt {
	display: inline-flex !important;
	width: auto !important;
	padding: 12px 28px !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
}

/* ── Barn2 product tables ─────────────────────────────────────── */
/* Barn2 emits <table class="wc-product-table"> with column classes
   verified from the rendered DOM:
     .col-namedescription   — product name + description (column 1)
     .col-price             — price column
     .col-buy.col-add-to-cart — qty + delivery time + add-to-cart (last column)

   The shortcode passes responsive="false" (see
   shortcode_sc_category_tables in satellite-catering.php), which prevents
   DataTables Responsive from initialising. Note that Barn2 still emits
   the .dtr-control class on the name cell regardless — do NOT target it
   for hiding; it would hide the entire name column.

   Layout intent:
   • table-layout: fixed for predictable column proportions across categories
   • name column gets ~half the width (catering items have long names)
   • buy cell flows qty + time selects + button inline on a single line
   • buy-cell controls are all 36px tall so they line up visually */
.wc-product-table {
	width: 100%;
	table-layout: fixed;
}

/* Column widths — !important needed to override Barn2's inline th widths */
.wc-product-table th.col-namedescription,
.wc-product-table td.col-namedescription {
	width: 48% !important;
}
.wc-product-table th.col-price,
.wc-product-table td.col-price {
	width: 12% !important;
}
.wc-product-table th.col-buy,
.wc-product-table td.col-buy {
	width: 40% !important;
}

/* Cell alignment + wrapping */
.wc-product-table tbody td {
	vertical-align: middle;
	white-space: nowrap;
}
.wc-product-table tbody td.col-namedescription {
	white-space: normal;
}
.wc-product-table tbody td.col-buy,
.wc-product-table tbody td.col-add-to-cart {
	text-align: right;
}
/* form.cart: !important on display because some upstream rule (Barn2 or
   WC frontend) sets form.cart to display: block with higher specificity
   or earlier load order — our align-items/gap apply but display loses,
   which collapses the flex layout to block. Verified via Computed tab
   on staging: align-items:center applied, display:block overriding. */
.wc-product-table tbody td.col-buy form.cart,
.wc-product-table tbody td.col-add-to-cart form.cart {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin: 0;
	flex-wrap: nowrap;
}

/* Buy cell controls — all 40px tall, compact button to match selects.
   box-sizing: border-box on every control + wrapper is critical: without
   it, height/min-height applies to content only and padding gets added
   on top, producing different rendered heights across selects, inputs,
   and buttons even when their `height` value is the same.
   .quantity wrapper is locked to 40px explicitly because Barn2 leaves
   it unstyled and the qty input's native stepper renders ~1–2px taller
   than other native form controls, leaking past the row line. */
.wc-product-table tbody td .sc-delivery-time-wrap,
.wc-product-table tbody td .add-to-cart-button {
	height: 40px;
	box-sizing: border-box;
}
.wc-product-table tbody td .sc-delivery-time-wrap select,
.wc-product-table tbody td .quantity input.qty,
.wc-product-table tbody td.col-buy form.cart .button,
.wc-product-table tbody td.col-buy form.cart button.button,
.wc-product-table tbody td.col-add-to-cart form.cart .button,
.wc-product-table tbody td.col-add-to-cart form.cart button.button {
	box-sizing: border-box;
}
.wc-product-table tbody td .sc-delivery-time-wrap select {
	height: 40px;
	padding: 4px 8px;
	font-size: 13px;
}
.wc-product-table tbody td .quantity {
	margin: 0;
	height: 40px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
}
.wc-product-table tbody td .quantity input.qty {
	width: 56px;
	height: 40px;
	padding: 6px 8px;
}
.wc-product-table tbody td.col-buy form.cart .button,
.wc-product-table tbody td.col-buy form.cart button.button,
.wc-product-table tbody td.col-add-to-cart form.cart .button,
.wc-product-table tbody td.col-add-to-cart form.cart button.button {
	height: 40px !important;
	min-height: 40px !important;
	padding: 6px 14px !important;
	font-size: 12px !important;
}

/* Hide the inline "View cart" link that Woo injects after add-to-cart.
   Barn2's stylesheet renders it as display:block which makes the buy
   cell taller and pushes the time selects out of vertical alignment.
   Suppressed here as an interim while we wire up the mini-cart drawer
   auto-open in the follow-up pass — the drawer replaces the function
   of this link entirely. */
.wc-product-table a.added_to_cart {
	display: none !important;
}

/* ── Order summary sidebar ───────────────────────────────── */
/* Rendered by [sc_cart_summary]. Replaces the deprecated WC_Widget_Cart.
   The inner .widget_shopping_cart_content div is the WC fragment
   selector — WC swaps it wholesale on every AJAX add-to-cart event,
   keeping the surrounding wrapper and heading intact. */
.sc-cart-summary {
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 16px;
	background: var(--color-bg);
}
.sc-cart-summary__title {
	margin: 0 0 12px;
	font-size: 16px;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 8px;
}
.sc-cart-summary .cart_list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.sc-cart-summary .mini_cart_item {
	position: relative;
	padding: 10px 0 10px 24px;
	border-bottom: 1px solid var(--color-border);
}
.sc-cart-summary .mini_cart_item:last-child {
	border-bottom: none;
}
/* The remove "×" goes top-left of each row */
.sc-cart-summary .mini_cart_item .remove {
	position: absolute;
	top: 10px;
	left: 0;
	width: 18px;
	height: 18px;
	line-height: 16px;
	text-align: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.06);
	color: var(--color-muted);
	text-decoration: none;
	font-size: 16px;
	font-weight: 700;
}
.sc-cart-summary .mini_cart_item .remove:hover {
	background: var(--color-error);
	color: var(--color-bg);
}
.sc-cart-summary .mini_cart_item a:not(.remove) {
	display: block;
	color: var(--color-text);
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.3;
}
.sc-cart-summary .mini_cart_item a:not(.remove):hover {
	color: var(--color-primary);
}
.sc-cart-summary .mini_cart_item .variation {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--color-muted);
}
.sc-cart-summary .mini_cart_item .variation dt,
.sc-cart-summary .mini_cart_item .variation dd {
	display: inline;
	margin: 0;
}
.sc-cart-summary .mini_cart_item .variation dt::after {
	content: " ";
}
.sc-cart-summary .mini_cart_item .variation dd p {
	display: inline;
	margin: 0;
}
.sc-cart-summary .mini_cart_item .quantity {
	display: block;
	font-size: 12px;
	color: var(--color-muted);
	margin-top: 4px;
}
.sc-cart-summary .woocommerce-mini-cart__total {
	margin: 12px 0;
	padding-top: 12px;
	border-top: 1px solid var(--color-border);
	color: var(--color-primary-dark);
	font-size: 14px;
}
.sc-cart-summary .woocommerce-mini-cart__buttons {
	margin: 12px 0 0;
	display: flex;
	gap: 8px;
}
.sc-cart-summary .woocommerce-mini-cart__buttons .button {
	flex: 1;
	text-align: center;
	font-size: 12px;
	padding: 10px 14px;
	min-height: 36px;
	border-radius: var(--button-radius);
	background: var(--color-primary);
	color: var(--color-bg);
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: .04em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	transition: background .2s, color .2s;
}
.sc-cart-summary .woocommerce-mini-cart__buttons .button:hover {
	background: var(--color-accent);
	color: var(--color-primary-dark);
}

/* ── Sticky cart sidebar on the order form ───────────────── */
/* Keeps the right column (event/location/order summary) in view while
   the user scrolls the long product table on the left. Targets via
   :has(.sc-cart-summary) since [sc_cart_summary] only ever appears in
   this layout, so we don't need a body or page-slug selector.

   Long-cart handling: max-height + overflow-y:auto means the sidebar
   scrolls internally when the cart grows past the viewport rather
   than breaking the sticky behaviour or hiding the action buttons.

   Sticky requires (a) a non-stretch flex parent — the order form's
   columns block already uses verticalAlignment:"top" which gives
   align-items: flex-start — and (b) align-self: flex-start on the
   sticky child so it sizes to its own content rather than the long
   product-table column.

   Mobile (<783px) gets normal flow — columns stack and sticky on a
   stacked column would obscure content. */
@media (min-width: 783px) {
	.wp-block-columns > .wp-block-column:has(.sc-cart-summary) {
		position: sticky;
		top: calc(var(--header-height) + 16px);
		align-self: flex-start;
		max-height: calc(100vh - var(--header-height) - 32px);
		overflow-y: auto;
	}
}

/* ── Cart page tweaks ────────────────────────────────── */
/* Hide the empty thumbnail column. The image suppression filter on
   woocommerce_product_get_image returns '' so no <img> renders, but
   WC's cart.php template still emits the <th> and <td class=
   "product-thumbnail">. Without this rule the empty cells eat ~80px
   between the remove (×) and product name columns. */
.woocommerce-cart-form .product-thumbnail,
table.shop_table .product-thumbnail {
	display: none;
}

/* Let the cart form fill our content width. WC's stylesheet leaves
   .woocommerce-cart-form at its natural width but some block-editor
   wrappers cap it at ~1000px on certain templates. */
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals {
	max-width: none;
	width: 100%;
}

/* Row dividers between product items — subtle visual separation.
   --color-border is rgba(0,0,0,.08), matching input borders elsewhere.
   Border is applied to td (not tr) because Barn2's table uses
   border-collapse: separate, under which tr borders never render.
   Same pattern as our shop_table rule above. */
.wc-product-table tbody td {
	border-bottom: 1px solid var(--color-border);
}
.wc-product-table tbody tr:last-child td {
	border-bottom: none;
}

/* Cascade flex-centering down into the .add-to-cart-button wrapper.
   Barn2 leaves this as a default block container; without explicit
   alignment the qty + button render slightly above the row centerline
   while the time selects (which are inline-flex centered) sit on it.
   Height is set above with .sc-delivery-time-wrap so the two flex
   wrappers are guaranteed to be the same height under form.cart's
   align-items: center. */
.wc-product-table tbody td .add-to-cart-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* =============================================================
   Header cart indicator

   Rendered by the satellite-catering plugin's [sc_header_cart]
   shortcode (see Cart::shortcode_header_cart). The shortcode
   block sits inside the right-side group of parts/header.html,
   next to the wp:navigation. Markup:

     <a class="sc-header-cart [has-items]">
       <svg class="sc-header-cart__icon">…</svg>
       <span class="sc-header-cart__count">N</span>  // only when N > 0
     </a>

   The badge is positioned absolutely against the icon's bounding
   box; the wrapper is `position: relative` to anchor it. The link
   inherits the navigation text colour by default and shifts to
   teal on hover/focus, matching the menu item behaviour above.
   ============================================================= */
.sc-header-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--color-text);
	text-decoration: none;
	border-radius: var(--button-radius, 9999px);
	transition: color .15s, background-color .15s;
}

.sc-header-cart:hover,
.sc-header-cart:focus {
	color: var(--color-primary);
	outline: none;
}

.sc-header-cart__icon {
	width: 22px;
	height: 22px;
	display: block;
}

/* Count badge — yellow circle pinned to top-right of the icon, slightly
   offset past the icon edge so the badge reads as a separate marker rather
   than overlapping the cart shape. Width and height locked equal so single
   and double-digit counts stay circular; padding stays at zero (the inline-
   flex centring handles single digits; two-digit counts slightly overflow
   the 20px circle, which looks intentional on this scale). */
.sc-header-cart__count {
	position: absolute;
	top: -4px;
	right: -6px;
	width: 20px;
	height: 20px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-accent);
	color: var(--color-text);
	border-radius: 50%;
	font-family: var(--font-display, inherit);
	font-size: 11px;
	font-weight: 700; /* small count badge — bold for legibility at 11px */
	line-height: 1;
	box-shadow: 0 0 0 2px var(--color-bg);
	pointer-events: none;
}

/* Accessibility: skip-link + screen-reader-text (VL-BUILD-STANDARDS 2.1a) */
.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(--color-primary);
	color: var(--color-bg);
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 700;
	left: 1rem;
	top: 1rem;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	z-index: 100001;
}


/* Skip-link is the first child of .wp-site-blocks, bumping the fixed header off
   :first-child - WP block-gap then adds an unwanted 24px margin above the header
   (a visible gap below the fixed header). The fixed header must never have a top margin. */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > main { margin-block-start: 0 !important; }