/* =============================================================
   Optus Satellite — main theme stylesheet

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

   Refer to layla-theme/assets/css/style.css for the established pattern.
   ============================================================= */

@font-face {
	font-family: "markot-heavy";
	src: url("../fonts/MarkOT-Heavy.woff2") format("woff2"),
	     url("../fonts/MarkOT-Heavy.ttf")   format("truetype");
	font-weight: 400;
	font-style:  normal;
	font-display: swap;
}

@font-face {
	font-family: "markot-regular";
	src: url("../fonts/MarkOT-Regular.woff2") format("woff2"),
	     url("../fonts/MarkOT-Regular.ttf")   format("truetype");
	font-weight: 400;
	font-style:  normal;
	font-display: swap;
}

: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--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:         "markot-heavy", helvetica, arial, sans-serif;
	--font-body:            "markot-regular", 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;
}

/* 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;
	}
}
.site-header {
	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 optus-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
   ============================================================= */

.site-footer a {
	color: rgba(255, 255, 255, 0.7);
	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: yellow bg + DARK teal text. Hover: solid teal bg + white text.
   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-accent);
	color: var(--color-primary-dark) !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-primary);
	color: var(--color-bg) !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-accent);
	color: var(--color-primary-dark);
	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-primary);
	color: var(--color-bg);
}

/* ── 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: 400; /* markot-heavy is already heavy — no extra weight / faux-bold */
	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; }