/* ==========================================================================
   SNN Checkout — premium bespoke reservation experience
   Layout: warm off-white page · spacious contact form (left) ·
           dark sticky "ticket" summary card (right)
   ========================================================================== */

[hidden] { display: none !important; }

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
	/* Neutrals */
	--co-ink:       #0f0f0e;
	--co-ink-2:     #2c2c2b;
	--co-ink-3:     #6b6b69;
	--co-ink-4:     #a3a3a0;
	--co-ink-5:     #d4d4d1;
	--co-paper:     #ffffff;
	--co-surface:   #f9f9f7;
	--co-surface-2: #f1f1ee;
	--co-page:      #f4f3f0;  /* warm off-white page bg */
	--co-rule:      rgba(0,0,0,.07);
	--co-rule-md:   rgba(0,0,0,.13);

	/* Brand accents */
	--co-amber:     #d97706;
	--co-amber-lt:  #fef3c7;
	--co-amber-dk:  #92400e;
	--co-red:       #dc2626;
	--co-red-lt:    #fee2e2;
	--co-green:     #16a34a;
	--co-green-lt:  #dcfce7;

	/* Dark card (summary) */
	--co-dark:      #111110;
	--co-dark-2:    #1c1c1b;
	--co-dark-3:    #282827;
	--co-dark-rule: rgba(255,255,255,.08);
	--co-dark-text: #f0f0ed;
	--co-dark-muted:#888884;

	/* Radii */
	--co-r:         12px;
	--co-r-sm:      7px;
	--co-r-xs:      4px;

	/* Shadows */
	--co-sh-xs: 0 1px 2px rgba(0,0,0,.05);
	--co-sh-sm: 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
	--co-sh:    0 2px 12px rgba(0,0,0,.08), 0 6px 28px rgba(0,0,0,.05);
	--co-sh-lg: 0 4px 24px rgba(0,0,0,.12), 0 12px 48px rgba(0,0,0,.08);
}

/* ── Page chrome ─────────────────────────────────────────────────────────── */
body.woocommerce-checkout {
	background: var(--co-page);
}

/* ── TT25 / block-theme content-column escape ────────────────────────────── *
 * Twenty Twenty-Five constrains post content to 645px via Gutenberg layout.
 *
 * Crucially: Gutenberg generates its layout rules with :where() selectors,
 * which have ZERO specificity.  That means any normal rule (even 1 class)
 * overrides it — no !important needed.  Our grid rule
 *   .woocommerce-page .woocommerce { max-width: 1060px }  (0,2,0 specificity)
 * already beats Gutenberg's :where(.is-layout-flow) > :where(...) (0,0,0).
 *
 * The only thing we need to do is ensure the PARENT container (.wp-block-
 * post-content) doesn't clip our .woocommerce div before it even renders.
 * ──────────────────────────────────────────────────────────────────────── */
body.woocommerce-checkout .wp-block-post-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .page-content {
	max-width:      none !important; /* parent must not be narrower than 1060px */
	padding-inline: 0    !important;
	width:          100%;
}

/* WC's shortcode block wrapper */
body.woocommerce-checkout .wp-block-shortcode {
	max-width: none !important;
	padding:   0    !important;
}

/* ── Grid container ──────────────────────────────────────────────────────── */
.woocommerce-page .woocommerce {
	max-width:   1060px !important; /* beats any inherited !important from parent */
	width:       100%;
	margin:      0 auto !important;
	padding:     0 28px 100px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size:   15px;
	color:       var(--co-ink);

	/* Two columns: form | summary */
	display:               grid;
	grid-template-columns: 1fr 356px;
	grid-template-rows:    auto; /* rows size to content */
	column-gap:            44px;
	align-items:           start;
}

/* ── Grid placement — all rows EXPLICIT to avoid auto-placement collisions ── *
 *
 * Problem: if summary has grid-row:2/8 and page-header is auto-placed with
 * grid-column:1/-1, the auto-placer can't fit it in rows 2-8 (col-2 is taken)
 * and pushes it below the content — invisible at the top.  Assigning every
 * direct child an explicit row prevents this entirely.
 *
 * DOM order inside .woocommerce (our hook fires before <form>):
 *  1. .woocommerce-notices-wrapper      (WC always renders this)
 *  2. .snn-co-page-header               (our PHP banner)
 *  3. #snn-hold-bar                     (our PHP banner, hidden until JS)
 *  4. #snn-expired-overlay              (position:fixed — outside grid flow)
 *  5. .snn-co-summary                   (our PHP banner, right column)
 *  6. .woocommerce-form-login-toggle    (WC — hidden via CSS)
 *  7. form.woocommerce-form-login       (WC — hidden via CSS)
 *  8. .woocommerce-form-coupon-toggle   (WC — hidden via CSS)
 *  9. form#woocommerce-checkout-form-coupon (WC — hidden via CSS)
 * 10. .woocommerce-notices-wrapper      (second WC instance, usually empty)
 * 11. form.woocommerce-checkout         (WC form, left column)
 * ──────────────────────────────────────────────────────────────────────── */
.woocommerce-page .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
	grid-row:    1;
}

.woocommerce-page .woocommerce > .snn-co-page-header {
	grid-column: 1 / -1;
	grid-row:    2;
}

.woocommerce-page .woocommerce > #snn-hold-bar {
	grid-column:    1 / -1;
	grid-row:       3;
	border-radius:  var(--co-r-sm);
	margin-bottom:  20px;
}

/* Summary → right column, sticky, spans rows 4–10 (alongside notices row + form rows) */
.woocommerce-page .woocommerce > .snn-co-summary {
	grid-column: 2;
	grid-row:    4 / 10;
	position:    sticky;
	top:         28px;
	margin:      0;
}

/* Second notices-wrapper (WC adds a second one just before the form — row 4) */
.woocommerce-page .woocommerce > .woocommerce-notices-wrapper:last-of-type {
	grid-column: 1 / -1;
	grid-row:    4;
}

/* Checkout form → left column, row 5 (second notices-wrapper occupies row 4) */
.woocommerce-page .woocommerce > form.woocommerce-checkout {
	grid-column: 1;
	grid-row:    5;
	min-width:   0;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.snn-co-page-header {
	padding: 44px 0 36px;
}

.snn-co-page-header__eyebrow {
	display:        block;
	font-size:      .7rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color:          var(--co-amber);
	margin-bottom:  10px;
}

.snn-co-page-header__title {
	font-size:      2.1rem;
	font-weight:    800;
	letter-spacing: -.03em;
	line-height:    1.1;
	margin:         0 0 8px;
	color:          var(--co-ink);
}

.snn-co-page-header__sub {
	font-size:  .9rem;
	color:      var(--co-ink-3);
	margin:     0;
	line-height: 1.5;
}

/* ── Hold-timer bar ──────────────────────────────────────────────────────── */
.snn-hold-bar {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             10px;
	padding:         11px 28px;
	background:      var(--co-amber-lt);
	color:           var(--co-amber-dk);
	font-size:       .84rem;
	font-weight:     500;
	border-top:      1px solid rgba(217,119,6,.15);
	border-bottom:   1px solid rgba(217,119,6,.15);
	margin-bottom:   0;
}

.snn-hold-bar__time {
	font-variant-numeric: tabular-nums;
	font-weight:          800;
	font-size:            .95rem;
	color:                var(--co-amber);
}

.snn-hold-bar__note {
	font-size: .78rem;
	opacity:   .8;
}

.snn-hold-bar--urgent {
	background:   var(--co-red-lt);
	color:        #7f1d1d;
	border-color: rgba(220,38,38,.15);
}
.snn-hold-bar--urgent .snn-hold-bar__time { color: var(--co-red); }

/* ── Expired overlay ─────────────────────────────────────────────────────── */
.snn-expired-overlay {
	position:        fixed;
	inset:           0;
	z-index:         9999;
	background:      rgba(0,0,0,.72);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         24px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.snn-expired-overlay__card {
	background:    var(--co-paper);
	border-radius: 16px;
	padding:       48px 40px;
	max-width:     400px;
	width:         100%;
	text-align:    center;
	box-shadow:    var(--co-sh-lg);
}

.snn-expired-overlay__icon { font-size: 2.8rem; margin-bottom: 14px; display: block; }

.snn-expired-overlay__card h3 {
	font-size:      1.25rem;
	font-weight:    800;
	letter-spacing: -.02em;
	margin:         0 0 10px;
}

.snn-expired-overlay__card p {
	font-size:   .9rem;
	color:       var(--co-ink-3);
	margin:      0 0 28px;
	line-height: 1.65;
}

.snn-expired-overlay__card .snn-btn-restart {
	display:         block;
	padding:         14px 20px;
	background:      var(--co-ink);
	color:           #fff;
	font-family:     inherit;
	font-size:       .95rem;
	font-weight:     700;
	border:          none;
	border-radius:   var(--co-r-sm);
	text-decoration: none;
	cursor:          pointer;
	transition:      background .14s;
}
.snn-expired-overlay__card .snn-btn-restart:hover { background: #222; }

/* ─────────────────────────────────────────────────────────────────────────
   RESERVATION SUMMARY CARD  (matches billing / payment card aesthetic)
   ───────────────────────────────────────────────────────────────────────── */
.snn-co-summary {
	background:    var(--co-paper);
	border:        1px solid var(--co-rule-md);
	border-radius: var(--co-r);
	overflow:      hidden;
	box-shadow:    var(--co-sh-sm);
}

/* "Reservation Summary" eyebrow — same strip treatment as section card headers */
.snn-co-summary::before {
	content:        "Reservation Summary";
	display:        block;
	font-size:      .65rem;
	font-weight:    800;
	text-transform: uppercase;
	letter-spacing: .13em;
	color:          var(--co-ink-3);
	background:     var(--co-surface);
	border-bottom:  1px solid var(--co-rule);
	padding:        14px 22px;
}

/* Show header */
.snn-co-summary__show {
	padding:       16px 22px 18px;
	border-bottom: 1px solid var(--co-rule);
}

.snn-co-summary__show strong {
	display:        block;
	font-size:      1rem;
	font-weight:    700;
	color:          var(--co-ink);
	letter-spacing: -.01em;
	margin-bottom:  3px;
	line-height:    1.3;
}

.snn-co-summary__show span {
	font-size: .82rem;
	color:     var(--co-ink-4);
}

/* Seat + guest list */
.snn-co-summary__seats {
	padding: 4px 0;
}

.snn-co-summary__seat-row {
	display:       flex;
	align-items:   center;
	gap:           10px;
	padding:       9px 22px;
	border-bottom: 1px solid var(--co-rule);
	font-size:     .84rem;
}

.snn-co-summary__seat-row:last-child { border-bottom: none; }

.snn-co-summary__seat-id {
	flex-shrink:   0;
	font-family:   "SF Mono", "Fira Code", Consolas, monospace;
	font-size:     .7rem;
	font-weight:   600;
	color:         var(--co-ink-3);
	background:    var(--co-surface);
	border:        1px solid var(--co-rule-md);
	border-radius: var(--co-r-xs);
	padding:       3px 7px;
	letter-spacing: .03em;
	white-space:   nowrap;
}

.snn-co-summary__seat-guest {
	flex:          1;
	color:         var(--co-ink-2);
	font-weight:   500;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
}

.snn-co-summary__footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         12px 22px 14px;
	border-top:      1px solid var(--co-rule);
	background:      var(--co-surface);
}

.snn-co-summary__edit {
	display:         flex;
	align-items:     center;
	gap:             5px;
	font-size:       .78rem;
	font-weight:     600;
	color:           var(--co-ink-4);
	text-decoration: none;
	transition:      color .14s;
}
.snn-co-summary__edit:hover { color: var(--co-ink); }

.snn-co-summary__total {
	text-align: right;
	font-size:  .8rem;
	color:      var(--co-ink-3);
}

.snn-co-summary__total strong {
	display:        block;
	font-size:      1.15rem;
	font-weight:    800;
	color:          var(--co-ink);
	letter-spacing: -.02em;
	line-height:    1.2;
}

/* ─────────────────────────────────────────────────────────────────────────
   WC STRUCTURE RESET
   ───────────────────────────────────────────────────────────────────────── */

/* ── Flatten WC's two-column billing wrapper ─────────────────────────────── *
 * WooCommerce ships:
 *   .woocommerce-page .woocommerce-checkout .col2-set .col-1 { width: 48%; float: left }
 * That selector is 0,4,0 — more specific than our simple resets.
 * We match it exactly (same specificity) but appear later, so we win.
 * The !important on float ensures even inline styles can't re-float it.
 * ──────────────────────────────────────────────────────────────────────── */
.woocommerce-page .woocommerce-checkout #customer_details,
.woocommerce-page .woocommerce-checkout .col2-set,
.woocommerce-page .woocommerce-checkout .col2-set .col-1,
.woocommerce-page .woocommerce-checkout .col2-set .col-2 {
	display:   block   !important;
	width:     100%    !important;
	max-width: none    !important;
	float:     none    !important;
	margin:    0       !important;
	padding:   0       !important;
	clear:     none    !important;
}

.woocommerce-checkout .col-2:empty { display: none !important; }

/* Kill WC clearfix pseudo-elements */
.woocommerce-checkout .col2-set::after,
.woocommerce-checkout::after { content: none !important; display: none !important; }

/* Hide WC's native order-review section — our sidebar card replaces it */
#order_review_heading                    { display: none !important; }
.woocommerce-checkout-review-order-table { display: none !important; }
#order_review { background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }

/* Hide "Additional information" / order-notes section (disabled via PHP too) */
.woocommerce-additional-fields { display: none !important; }

/* Hide WC login/coupon toggles and forms — they auto-place below the submit button
   via grid, creating confusing orphaned UI in a reservation-only flow. */
.woocommerce-page .woocommerce > .woocommerce-form-login-toggle,
.woocommerce-page .woocommerce > .woocommerce-form-login,
.woocommerce-page .woocommerce > .woocommerce-form-coupon-toggle,
.woocommerce-page .woocommerce > #woocommerce-checkout-form-coupon,
.woocommerce-page .woocommerce > form.checkout_coupon { display: none !important; }

/* Kill WC required-star underline */
.woocommerce-checkout abbr.required { text-decoration: none; }

/* ─────────────────────────────────────────────────────────────────────────
   SECTION CARDS  (billing + payment)
   ───────────────────────────────────────────────────────────────────────── */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout #payment {
	background:    var(--co-paper);
	border:        1px solid var(--co-rule-md);
	border-radius: var(--co-r);
	box-shadow:    var(--co-sh-sm);
	margin-bottom: 16px;
	overflow:      hidden; /* keep border-radius clipping children */
}

/* Section inner padding (not on the card element itself to allow full-bleed header) */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout #payment > * { padding: 0; }

/* ── Card header strip ───────────────────────────────────────────────────── */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout #payment > h3 {
	display:        block;
	font-size:      .65rem;
	font-weight:    800;
	text-transform: uppercase;
	letter-spacing: .13em;
	color:          var(--co-ink-3);
	background:     var(--co-surface);
	border-bottom:  1px solid var(--co-rule);
	margin:         0;
	padding:        14px 26px;
}

/* Field area */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   20px;
	padding:               28px 26px;
}

/* First name | Last name → each takes one column */
.woocommerce-checkout .form-row-first {
	grid-column: 1;
	float:       none !important;
	width:       auto !important;
	margin:      0 !important;
	padding:     0 !important;
	clear:       none !important;
}

.woocommerce-checkout .form-row-last {
	grid-column: 2;
	float:       none !important;
	width:       auto !important;
	margin:      0 !important;
	padding:     0 !important;
	clear:       none !important;
}

/* Email + Phone → each span full width for prominence */
.woocommerce-checkout .form-row-wide {
	grid-column: 1 / -1;
}

/* ── Form rows ───────────────────────────────────────────────────────────── */
.woocommerce-checkout .form-row {
	margin:  0;
	padding: 0;
}

.woocommerce-checkout .form-row label {
	display:        block;
	font-size:      .72rem;
	font-weight:    600;
	color:          var(--co-ink-3);
	margin-bottom:  7px;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce-checkout .form-row label .required {
	color:       var(--co-red);
	margin-left: 2px;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.woocommerce-checkout .woocommerce-input-wrapper {
	display: block;
	width:   100%;
}

.woocommerce-checkout .woocommerce-input-wrapper input[type="text"],
.woocommerce-checkout .woocommerce-input-wrapper input[type="email"],
.woocommerce-checkout .woocommerce-input-wrapper input[type="tel"],
.woocommerce-checkout .woocommerce-input-wrapper input[type="password"] {
	display:            block;
	width:              100%;
	padding:            13px 16px;
	background:         var(--co-surface);
	border:             1.5px solid var(--co-rule-md);
	border-radius:      var(--co-r-sm);
	color:              var(--co-ink);
	font-size:          1rem;
	font-family:        inherit;
	line-height:        1.5;
	outline:            none;
	box-shadow:         none;
	box-sizing:         border-box;
	-webkit-appearance: none;
	transition:         border-color .15s, background .15s, box-shadow .15s;
}

.woocommerce-checkout .woocommerce-input-wrapper input::placeholder {
	color: var(--co-ink-5);
}

.woocommerce-checkout .woocommerce-input-wrapper input:hover {
	border-color: var(--co-ink-4);
	background:   var(--co-paper);
}

.woocommerce-checkout .woocommerce-input-wrapper input:focus {
	border-color: var(--co-ink);
	background:   var(--co-paper);
	box-shadow:   0 0 0 3px rgba(15,15,14,.08);
}

.woocommerce-checkout .form-row.woocommerce-invalid input {
	border-color: var(--co-red);
	box-shadow:   0 0 0 3px rgba(220,38,38,.08);
}

.woocommerce-checkout .form-row.woocommerce-validated input {
	border-color: var(--co-green);
}

/* Kill WC pseudo-element icon overlays */
.woocommerce-checkout .form-row .woocommerce-input-wrapper::after,
.woocommerce            .form-row .woocommerce-input-wrapper::after { content: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   PAYMENT SECTION
   ───────────────────────────────────────────────────────────────────────── */

/* "Payment" header strip via ::before (WC template has no <h3> in #payment) */
.woocommerce-checkout #payment::before {
	content:        "Payment";
	display:        block;
	font-size:      .65rem;
	font-weight:    800;
	text-transform: uppercase;
	letter-spacing: .13em;
	color:          var(--co-ink-3);
	background:     var(--co-surface);
	border-bottom:  1px solid var(--co-rule);
	padding:        14px 26px;
}

/* Pad the actual direct children of #payment (no .woocommerce-checkout-payment
   wrapper exists in this WC version — direct children are the <ul> and place-order) */
#payment > ul.wc_payment_methods {
	padding: 22px 26px 0;
}
#payment > .form-row.place-order {
	padding: 20px 26px 26px;
}

#payment ul.payment_methods {
	list-style: none;
	margin:     0 0 20px;
	padding:    0;
	border:     none;
	display:    flex;
	flex-direction: column;
	gap:        10px;
}

/* ── Payment method list item ────────────────────────────────────────────── *
 * WC HTML structure inside <li>:
 *   <input type="radio" />      ← sibling of label, NOT inside it
 *   <label>Pay at Door</label>
 *   <div class="payment_box">Description</div>
 *
 * We use flex on the <li> to pull the radio and label into one visual row,
 * then let payment_box span the full width on the next line.
 * ──────────────────────────────────────────────────────────────────────── */
#payment ul.payment_methods li {
	display:       flex;
	flex-wrap:     wrap;
	align-items:   center;
	border:        1.5px solid var(--co-rule-md);
	border-radius: var(--co-r-sm);
	background:    var(--co-surface);
	cursor:        pointer;
	overflow:      hidden;
	transition:    border-color .14s, background .14s;
}

#payment ul.payment_methods li:has(input:checked) {
	border-color: var(--co-ink);
	background:   var(--co-paper);
}

/* Radio sits at the start of the label row */
#payment ul.payment_methods li > input[type="radio"] {
	flex-shrink:  0;
	order:        1;
	width:        17px;
	height:       17px;
	accent-color: var(--co-ink);
	margin:       0 0 0 18px;
	cursor:       pointer;
	/* ensure the input doesn't stretch */
	align-self:   center;
}

/* Label occupies the rest of the first row */
#payment ul.payment_methods li > label {
	order:          2;
	flex:           1;
	display:        flex;
	align-items:    center;
	gap:            10px;
	padding:        15px 18px 15px 12px;
	font-size:      .93rem;
	font-weight:    600;
	color:          var(--co-ink);
	cursor:         pointer;
	margin:         0;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* Any payment method logo/image */
#payment ul.payment_methods li > label img {
	height:     20px;
	width:      auto;
	flex-shrink: 0;
}

/* Description box spans full width under the radio+label row */
#payment ul.payment_methods .payment_box {
	order:         3;
	flex-basis:    100%;
	margin:        0;
	padding:       10px 18px 14px 47px; /* 47px = 18px left-pad + 17px radio + 12px gap */
	background:    transparent;
	border-top:    1px solid var(--co-rule);
	border-radius: 0;
	font-size:     .82rem;
	color:         var(--co-ink-3);
	line-height:   1.6;
}
#payment ul.payment_methods .payment_box::before,
#payment ul.payment_methods .payment_box::after { content: none !important; }
.payment_box p { margin: 0; }

/* ── Submit button ───────────────────────────────────────────────────────── */
#payment #place_order {
	display:        block;
	width:          100%;
	padding:        17px 24px;
	background:     var(--co-ink);
	color:          #fff;
	font-family:    inherit;
	font-size:      1rem;
	font-weight:    700;
	letter-spacing: .01em;
	border:         none;
	border-radius:  var(--co-r-sm);
	cursor:         pointer;
	transition:     background .14s, transform .1s, box-shadow .14s;
	box-shadow:     0 1px 3px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.1);
}

#payment #place_order:hover:not(:disabled) {
	background:  #1c1c1b;
	box-shadow:  0 2px 6px rgba(0,0,0,.24), 0 8px 24px rgba(0,0,0,.14);
	transform:   translateY(-1px);
}

#payment #place_order:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

#payment #place_order:disabled {
	background: var(--co-surface-2);
	color:      var(--co-ink-5);
	cursor:     not-allowed;
	box-shadow: none;
	transform:  none;
}

/* ── Privacy / terms ─────────────────────────────────────────────────────── */
.woocommerce-checkout .woocommerce-privacy-policy-text,
#payment .terms-and-conditions-wrapper {
	font-size:   .73rem;
	color:       var(--co-ink-4);
	text-align:  center;
	margin-top:  12px;
	line-height: 1.5;
}

/* ── WC notices ──────────────────────────────────────────────────────────── */
.woocommerce-checkout .woocommerce-notices-wrapper :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
	border:        none;
	border-radius: var(--co-r-sm);
	padding:       12px 18px;
	font-size:     .88rem;
	margin-bottom: 16px;
	box-shadow:    none;
	list-style:    none;
}

.woocommerce-checkout .woocommerce-notices-wrapper :is(.woocommerce-error, .woocommerce-message)::before { content: none; }

.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error   { background: var(--co-red-lt);   color: #991b1b; }
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message { background: var(--co-green-lt); color: #15803d; }
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info    { background: var(--co-surface-2); color: var(--co-ink-3); }

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────── */

/* Mid: tighten the summary column slightly */
@media (max-width: 900px) {
	.woocommerce-page .woocommerce {
		grid-template-columns: 1fr 290px;
		column-gap:            28px;
		padding:               0 20px 80px;
	}
}

/* Stack: summary above form */
@media (max-width: 720px) {
	.woocommerce-page .woocommerce {
		grid-template-columns: 1fr;
		column-gap:            0;
		padding:               0 16px 60px;
	}

	/* Re-assign all rows for single-column stacking */
	.woocommerce-page .woocommerce > .woocommerce-notices-wrapper            { grid-row: 1; }
	.woocommerce-page .woocommerce > .snn-co-page-header                     { grid-row: 2; }
	.woocommerce-page .woocommerce > #snn-hold-bar                           { grid-row: 3; border-radius: var(--co-r-xs); }
	.woocommerce-page .woocommerce > .snn-co-summary {
		grid-column:   1;
		grid-row:      4;
		position:      static;
		margin-bottom: 24px;
	}
	.woocommerce-page .woocommerce > .woocommerce-notices-wrapper:last-of-type { grid-row: 5; }
	.woocommerce-page .woocommerce > form.woocommerce-checkout                 { grid-column: 1; grid-row: 6; }

	.snn-co-page-header       { padding: 28px 0 24px; }
	.snn-co-page-header__title { font-size: 1.55rem; }
}

/* Narrow: single-column form fields */
@media (max-width: 480px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr;
		gap:                   16px;
		padding:               22px 20px;
	}
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last { grid-column: 1; }

	.woocommerce-checkout .woocommerce-billing-fields > h3 { padding: 12px 20px; }
	#payment .woocommerce-checkout-payment > h3             { padding: 12px 20px; margin-left: -20px; margin-right: -20px; }
	#payment > .woocommerce-checkout-payment                { padding: 0 20px 22px; }
}