/* ═══════════════════════════════════════════════════════════════════
   CART + CHECKOUT — enqueued only on is_cart() / is_checkout()
   (see inc/checkout/cart.php). Uses the theme's existing tokens from
   assets/css/theme.css (--yellow, --yellow-d, --yellow-ink, --ink,
   --text1/2/3, --line, --r, --r-lg, --font-display, --font-mono, --shadow)
   — no new palette is introduced here.

   SCOPING. Every rule below is prefixed with body.woocommerce-cart or
   body.woocommerce-checkout (WooCommerce's own body classes on those two
   pages) — the cart/checkout fix pass found a real bug caused by NOT doing
   this: .cen-stepper was used for two unrelated components (the cart's
   qty +/- control and the checkout step nav) and, because checkout.css
   loads on both pages, the cart's rule (border + overflow:hidden) was
   leaking onto the checkout nav. The qty control is .cen-qty-stepper now
   and every selector is page-scoped so this class of bug can't recur.
   ═══════════════════════════════════════════════════════════════════ */

.cen-icon{display:inline-block;vertical-align:-3px;flex-shrink:0}

/* Breadcrumb — identical on both pages, genuinely shared, not page-specific. */
.cen-crumbs{font-size:12px;color:var(--text3);margin-bottom:16px}
.cen-crumbs a{text-decoration:none;color:inherit}
.cen-crumbs a:hover{color:var(--yellow-ink)}
.cen-crumbs__current{color:var(--text1)}

/* ═══════════════════════════════════════════════════════════════════
   1. CART PAGE — body.woocommerce-cart
   ═══════════════════════════════════════════════════════════════════ */
body.woocommerce-cart .cen-cart{padding:32px 16px 96px}
body.woocommerce-cart .cen-cart__head{margin-bottom:28px}
body.woocommerce-cart .cen-cart__title{font-size:clamp(26px,4vw,36px);color:var(--ink);margin:0 0 6px}
body.woocommerce-cart .cen-cart__count{font-size:13.5px;color:var(--text3);margin:0}

body.woocommerce-cart .cen-cart__grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}

/* ---- Item rows ---- */
body.woocommerce-cart .cen-cart__items{display:flex;flex-direction:column}
body.woocommerce-cart .cen-item{display:grid;grid-template-columns:72px 1fr auto auto auto;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
body.woocommerce-cart .cen-cart__items .cen-item:first-child{border-top:1px solid var(--line)}

body.woocommerce-cart .cen-item__media{width:72px;height:72px;border-radius:var(--r);overflow:hidden;background:var(--paper-warm);flex-shrink:0}
body.woocommerce-cart .cen-item__media img{width:100%;height:100%;object-fit:cover}

body.woocommerce-cart .cen-item__info{min-width:0}
body.woocommerce-cart .cen-item__name{font-size:15px;margin:0 0 4px;line-height:1.3}
body.woocommerce-cart .cen-item__name a{color:var(--ink);text-decoration:none}
body.woocommerce-cart .cen-item__name a:hover{color:var(--yellow-ink)}
body.woocommerce-cart .cen-item__sku{font-family:var(--font-mono);font-size:10.5px;color:var(--text3);letter-spacing:.03em;margin-bottom:4px}
body.woocommerce-cart .cen-item__variation{font-size:12px;color:var(--text3);margin-bottom:4px}
body.woocommerce-cart .cen-item__variation p{margin:0}   
body.woocommerce-cart .cen-item__unit{font-size:13px;color:var(--text2);font-weight:600}
body.woocommerce-cart .cen-item__each{font-weight:400;color:var(--text3);font-size:12px;margin-left:2px}
body.woocommerce-cart .cen-item__backorder{font-size:11.5px;color:var(--yellow-ink);margin:4px 0 0}

/* Plain quantity box — no +/- buttons (removed from the markup entirely,
   not just hidden, so there's no leftover empty button/border). Typing a
   new value still updates the cart the same way it always did (native
   input.qty + Update Cart / Enter), nothing about that changed. */
body.woocommerce-cart .cen-item__qty{flex-shrink:0}
body.woocommerce-cart .cen-qty-input.qty,body.woocommerce-cart input.cen-qty-input.qty{width:56px;min-height:44px;padding:0 6px;border:1.5px solid var(--line);border-radius:var(--r);text-align:center;font-family:var(--font-body);font-size:14px;color:var(--ink);background:var(--paper);-moz-appearance:textfield;transition:border-color .15s ease}
body.woocommerce-cart .cen-qty-input.qty:focus{outline:none;border-color:var(--yellow-d)}
body.woocommerce-cart .cen-qty-input.qty::-webkit-inner-spin-button,body.woocommerce-cart .cen-qty-input.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

body.woocommerce-cart .cen-item__total{text-align:right;flex-shrink:0;min-width:84px}
body.woocommerce-cart .cen-item__total-label{display:none}
body.woocommerce-cart .cen-item__total .amount,body.woocommerce-cart .cen-item__total{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink)}

body.woocommerce-cart .cen-item__remove{flex-shrink:0}
body.woocommerce-cart .cen-item__remove-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--text3);text-decoration:none;transition:background .15s ease,color .15s ease}
body.woocommerce-cart .cen-item__remove-btn:hover{background:#fef2f2;color:var(--error)}

body.woocommerce-cart .cen-cart__actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}
/* Continue Shopping (items list) — .btn-outline-dark's own look (white/
   off-white fill, dark text, thin border, shared --r radius), just sized
   down to sit comfortably next to Update Cart. */
body.woocommerce-cart .cen-link-back{display:inline-flex;align-items:center;gap:8px;padding:0.5em;font-size:13px;min-height:44px;color:var(--ink);border-color:var(--line)}
body.woocommerce-cart .cen-link-back:hover{border-color:var(--yellow-d);color:var(--yellow-ink);background:var(--yellow-l)}
body.woocommerce-cart .cen-link-back:focus-visible{outline:2px solid var(--yellow-d);outline-offset:2px}
body.woocommerce-cart .cen-cart__update{min-height:44px;padding:11px 20px;font-size:13px}

/* ---- Order summary card ---- */
body.woocommerce-cart .cen-cart__aside{position:sticky;top:90px}
body.woocommerce-cart .cen-summary{display:flex;flex-direction:column;gap:16px}
body.woocommerce-cart .cen-summary__card{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--yellow);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow)}
body.woocommerce-cart .cen-summary__title{font-size:19px;color:var(--ink);margin:0 0 18px}

body.woocommerce-cart .cen-ship-bar{margin-bottom:18px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-warm)}
body.woocommerce-cart .cen-ship-bar__text{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12.5px;color:var(--text2)}
body.woocommerce-cart .cen-ship-bar__text .cen-icon{color:var(--yellow-d)}
body.woocommerce-cart .cen-ship-bar.is-unlocked .cen-ship-bar__text{color:var(--yellow-ink)}
body.woocommerce-cart .cen-ship-bar__track{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
body.woocommerce-cart .cen-ship-bar__fill{display:block;height:100%;background:var(--yellow-d);border-radius:99px;transition:width .3s ease}
body.woocommerce-cart .cen-ship-bar.is-unlocked .cen-ship-bar__fill{background:var(--yellow)}

/* ---- Coupon box: restored to the pre-Phase-1 design (.vx-coupon-* classes,
   styled in theme.css — search "vx-coupon-chip" there). Only the two small
   layout-only bits that original inline-styled are given real rules here. ---- */
body.woocommerce-cart .vx-coupon{margin-bottom:18px}
body.woocommerce-cart .vx-coupon-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:6px}
body.woocommerce-cart .vx-coupon-row{display:flex;gap:8px}
body.woocommerce-cart .vx-coupon-input{flex:1;text-transform:uppercase;font-size:13px;min-height:44px}
body.woocommerce-cart .vx-coupon-apply{padding:0 18px;font-size:13px;min-height:44px}

body.woocommerce-cart .cen-summary__lines{margin:0 0 20px;padding-top:16px;border-top:1px solid var(--line)}
body.woocommerce-cart .cen-summary__line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 11px;font-size:13.5px}
body.woocommerce-cart .cen-summary__line dt{font-weight:400;color:var(--text2)}
body.woocommerce-cart .cen-summary__line dd{margin:0;font-weight:700;color:var(--ink);text-align:right}
body.woocommerce-cart .cen-summary__line--discount dd{color:var(--yellow-ink)}
body.woocommerce-cart .cen-summary__note{font-weight:400;color:var(--text3);font-size:12.5px}
body.woocommerce-cart .cen-summary__free{color:var(--yellow-ink)}
body.woocommerce-cart .cen-summary__line--total{padding-top:12px;border-top:1px solid var(--line);margin-bottom:0}
body.woocommerce-cart .cen-summary__line--total dt{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink)}
body.woocommerce-cart .cen-summary__line--total dd{font-family:var(--font-display);font-weight:800;font-size:19px}

/* Proceed to Checkout — full width, but a proportional ~46px/15px button
   instead of the oversized default .btn-flame padding (15px 30px). */
body.woocommerce-cart .cen-summary__cta{display:flex;flex-direction:column;gap:11px;margin-top:4px}
/* WooCommerce's own woocommerce.css ships
   ".woocommerce-cart .wc-proceed-to-checkout a.checkout-button" (3 classes
   + 1 type) with display:block, font-size:1.25em, padding:1em,
   margin-bottom:1em — higher specificity than a plain
   "body.woocommerce-cart .cen-summary__checkout" rule (2 classes + 1
   type), so it was winning on every one of those properties no matter
   what this file set. Matched here by including .checkout-button and the
   "a" element in the same selector (3 classes + 2 types), which outranks
   it, instead of reaching for !important or editing core's stylesheet. */
body.woocommerce-cart a.checkout-button.cen-summary__checkout{display:inline-flex;text-align:center;width:100%;justify-content:center;gap:8px;margin-bottom:0;padding:0.5em;font-size:15px;min-height:46px;border-radius:var(--r)}
body.woocommerce-cart .cen-summary__checkout .cen-icon{width:16px;height:16px}
body.woocommerce-cart .cen-summary__checkout:disabled,
body.woocommerce-cart .cen-summary__checkout[aria-disabled="true"]{opacity:.55;cursor:default;pointer-events:none}

/* Continue Shopping (order summary) — outlined, same width/radius as the
   checkout button above it, 11px gap between the two. */
body.woocommerce-cart .cen-summary__continue{width:100%;justify-content:center;padding:0.5em;font-size:14px;min-height:44px;border-radius:var(--r);color:var(--ink);border-color:var(--line)}
body.woocommerce-cart .cen-summary__continue:hover{border-color:var(--yellow-d);color:var(--yellow-ink);background:var(--yellow-l)}

/* Delivery/payment reassurance — one compact card under the summary,
   matching its width, instead of two loose lines. */
body.woocommerce-cart .cen-trust{list-style:none;margin:16px 0 0;padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:var(--paper-warm);border:1px solid var(--line);border-radius:var(--r-lg)}
body.woocommerce-cart .cen-trust__item{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text2)}
body.woocommerce-cart .cen-trust__icon{display:flex;flex-shrink:0;color:var(--yellow-d)}

/* ---- Empty cart ---- */
body.woocommerce-cart .cen-empty{max-width:460px;margin:24px auto 0;padding:52px 32px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg)}
body.woocommerce-cart .cen-empty__icon{width:84px;height:84px;margin:0 auto 20px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;color:var(--ink)}
body.woocommerce-cart .cen-empty__title{font-size:21px;color:var(--ink);margin:0 0 10px}
body.woocommerce-cart .cen-empty__text{font-size:13.5px;color:var(--text2);line-height:1.7;margin:0 0 28px}
body.woocommerce-cart .cen-empty__actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}

/* ---- Mobile sticky checkout bar ---- */
body.woocommerce-cart .cen-cart__sticky{display:none}

@media(max-width:1024px){
	body.woocommerce-cart .cen-cart__grid{grid-template-columns:1fr}
	body.woocommerce-cart .cen-cart__aside{position:static}
}

@media(max-width:760px){
	body.woocommerce-cart .cen-item{grid-template-columns:56px 1fr;grid-template-areas:"media info" "qty qty" "total remove";row-gap:10px;padding:18px 0}
	body.woocommerce-cart .cen-item__media{grid-area:media;width:56px;height:56px}
	body.woocommerce-cart .cen-item__info{grid-area:info}
	body.woocommerce-cart .cen-item__qty{grid-area:qty}
	body.woocommerce-cart .cen-item__total{grid-area:total;text-align:left}
	body.woocommerce-cart .cen-item__remove{grid-area:remove;justify-self:end}
	body.woocommerce-cart .cen-qty-input.qty{width:64px}
	body.woocommerce-cart .cen-cart{padding-bottom:132px}
	body.woocommerce-cart .cen-cart__sticky{display:flex;align-items:center;justify-content:space-between;gap:16px;position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--paper);border-top:1px solid var(--line);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(0,0,0,.08)}
	body.woocommerce-cart .cen-cart__sticky-total{display:flex;flex-direction:column;font-size:11px;color:var(--text3);line-height:1.3}
	body.woocommerce-cart .cen-cart__sticky-total strong{font-family:var(--font-display);font-size:18px;color:var(--ink)}
	body.woocommerce-cart .cen-cart__sticky-btn{padding:13px 22px;font-size:13.5px;min-height:44px}
}

@media(max-width:480px){
	body.woocommerce-cart .cen-empty{padding:40px 20px}
	body.woocommerce-cart .cen-cart__actions{justify-content:center;text-align:center}
}

/* ═══════════════════════════════════════════════════════════════════
   2. CHECKOUT PAGE — body.woocommerce-checkout
   ═══════════════════════════════════════════════════════════════════ */

/* ---- Vertical rhythm: banner → 32px → breadcrumb → 16px → stepper →
   24px → form/summary. .cen-crumbs already carries its own 16px
   margin-bottom (shared rule above); the other gaps are set here. The
   trust badges below the heading were removed from the markup (not just
   hidden), so the banner's own bottom padding is the only thing closing
   the gap underneath the heading now — no leftover empty space. ---- */
/* Eyebrow above the heading uses the theme's own shared .eyebrow
   .eyebrow-on-dark component (see template-parts/page-hero.php, also used
   by About/Contact/blog) — no checkout-specific eyebrow styling needed. */
body.woocommerce-checkout .cen-checkout-banner{padding-top:40px;padding-bottom:32px}
body.woocommerce-checkout .cen-checkout-banner .h1{font-size:clamp(22px,3.4vw,32px);margin:0;max-width:640px}
body.woocommerce-checkout .cen-checkout{padding:32px 16px 80px}
body.woocommerce-checkout .cen-checkout-empty{padding:64px 16px;text-align:center}

/* ---- Returning-customer / notices band — woocommerce_before_checkout_form,
   fired between the stepper and the form (see form-checkout.php) so it
   can never land inside a hidden step. ---- */
body.woocommerce-checkout .cen-checkout-notices:empty{display:none}
body.woocommerce-checkout .cen-checkout-notices{margin-bottom:20px}
body.woocommerce-checkout .cen-checkout-notices .woocommerce-info{position:relative;display:block;margin:0 0 12px;padding:13px 16px 13px 44px;background:var(--yellow-l);border:1px solid var(--yellow-d);border-left:3px solid var(--yellow-d);border-radius:var(--r);font-size:13px;color:var(--text1);list-style:none}
body.woocommerce-checkout .cen-checkout-notices .woocommerce-info::before{content:'\f31a';font-family:'bootstrap-icons';position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--yellow-d);font-size:15px}
body.woocommerce-checkout .cen-checkout-notices .woocommerce-info a{color:var(--yellow-ink);font-weight:700;text-decoration:none}
body.woocommerce-checkout .cen-checkout-notices .woocommerce-info a:hover{text-decoration:underline}
body.woocommerce-checkout .cen-checkout-notices .woocommerce-error,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout ul,
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error{
	position:relative!important;
	display:block!important;
	margin:0 0 18px 0!important;
	padding:16px 20px 16px 54px!important;
	border:1px solid #fecaca!important;
	border-left:4px solid #dc2626!important;
	border-top:1px solid #fecaca!important;
	border-radius:var(--r,8px)!important;
	background:#fef2f2!important;
	color:#991b1b!important;
	font-family:var(--font-body,inherit)!important;
	font-size:13.5px!important;
	line-height:1.55!important;
	font-weight:500!important;
	list-style:none!important;
	box-shadow:0 1px 3px rgba(220,38,38,.06)!important;
	box-sizing:border-box!important;
	width:100%!important;
	text-align:left!important
}
body.woocommerce-checkout .cen-checkout-notices .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout ul::before,
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error::before{
	position:absolute!important;
	left:18px!important;
	top:15px!important;
	transform:none!important;
	font-size:18px!important;
	line-height:1!important;
	color:#dc2626!important;
	margin:0!important;
	padding:0!important;
	display:inline-block!important
}
body.woocommerce-checkout .cen-checkout-notices .woocommerce-error li,
body.woocommerce-checkout .woocommerce-error li,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout ul li,
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error li{
	margin:0!important;
	padding:0!important;
	list-style:none!important;
	color:#991b1b!important;
	font-size:13.5px!important;
	line-height:1.55!important
}
body.woocommerce-checkout .woocommerce-error li + li,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout ul li + li{
	margin-top:8px!important;
	padding-top:8px!important;
	border-top:1px dashed #fecaca!important
}
body.woocommerce-checkout .cen-checkout-notices .woocommerce-error a,
body.woocommerce-checkout .woocommerce-error a,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout ul a,
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error a{
	color:#b91c1c!important;
	font-weight:700!important;
	text-decoration:underline!important;
	text-underline-offset:3px!important;
	margin-left:4px!important;
	transition:color .15s ease!important
}
body.woocommerce-checkout .cen-checkout-notices .woocommerce-error a:hover,
body.woocommerce-checkout .woocommerce-error a:hover,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout ul a:hover,
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error a:hover{
	color:#7f1d1d!important;
	text-decoration:underline!important
}
body.woocommerce-checkout .cen-checkout-notices form.login{margin-top:12px;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper-warm)}

/* ---- "Returning customer?" OTP login (site-core's class-otp-auth.php) —
   checkout-scoped only, so My Account's copy of the same markup/classes
   (styled in theme.css) is untouched. The icon+heading, input height/focus
   ring, code-input letter-spacing, and auto-width (not full-width) buttons
   were the actual bug: the shared theme.css rules make every .site-core-otp-btn
   100% wide with no max-width on the card, which is correct for My Account's
   narrower column but stretched edge-to-edge across the wider checkout
   notices band. ---- */
body.woocommerce-checkout .site-core-otp-login{max-width:480px}
body.woocommerce-checkout .site-core-otp-title{display:flex;align-items:center;gap:10px;margin:0 0 6px}
body.woocommerce-checkout .site-core-otp-title .site-core-otp-icon{width:32px;height:32px;margin:0;flex-shrink:0;font-size:14px}
body.woocommerce-checkout .site-core-otp-input{min-height:48px;box-sizing:border-box}
body.woocommerce-checkout .site-core-otp-input:focus{box-shadow:0 0 0 3px var(--yellow-l)}
body.woocommerce-checkout .site-core-otp-code-input{letter-spacing:.5em;text-align:center;font-family:var(--font-display);font-size:18px}
body.woocommerce-checkout .site-core-otp-inline{display:flex;align-items:stretch;gap:10px}
body.woocommerce-checkout .site-core-otp-inline .site-core-otp-input{flex:1;min-width:0}
body.woocommerce-checkout .site-core-otp-btn{width:auto;min-width:160px;min-height:48px;padding:0 22px}
body.woocommerce-checkout .site-core-otp-msg{margin-top:10px}

@media(max-width:640px){
	body.woocommerce-checkout .site-core-otp-login{max-width:100%}
	body.woocommerce-checkout .site-core-otp-inline{flex-direction:column}
	body.woocommerce-checkout .site-core-otp-btn{width:100%;min-width:0}
}

/* ---- Mobile order-summary toggle (hidden ≥1024px; see media query) ---- */
body.woocommerce-checkout .cen-summary-toggle{display:none;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;margin-bottom:20px;min-height:48px}
body.woocommerce-checkout .cen-summary-toggle span{display:flex;align-items:center;gap:8px}
body.woocommerce-checkout .cen-summary-toggle__right{gap:10px}
body.woocommerce-checkout .cen-summary-toggle__right .cen-icon{transition:transform .2s ease}
body.woocommerce-checkout .cen-summary-toggle[aria-expanded="true"] .cen-summary-toggle__right .cen-icon{transform:rotate(180deg)}
body.woocommerce-checkout .cen-summary-mobile{margin:-10px 0 20px;border:1px solid var(--line);border-top:3px solid var(--yellow);border-radius:var(--r-lg);padding:16px;background:var(--paper-warm)}
body.woocommerce-checkout .cen-summary-mobile[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════════════
   Stepper — 3 equal columns, full width. Root cause of the collapsed/
   overlapping layout was .cen-stepper being reused by the cart's qty
   control (border + overflow:hidden leaking in); that class is gone from
   this nav (.cen-checkout-stepper now), so this is a plain, unconflicted
   flex row with no inherited border/overflow/sizing from anywhere else. ═ */
body.woocommerce-checkout .cen-checkout-stepper{margin-bottom:24px}
body.woocommerce-checkout .cen-checkout-stepper__list{list-style:none;display:flex;align-items:flex-start;width:100%;margin:0;padding:0}
body.woocommerce-checkout .cen-checkout-stepper__item{flex:1 1 0;min-width:0;display:flex}
body.woocommerce-checkout .cen-checkout-stepper__connector{flex:1 1 24px;height:1px;background:var(--line);margin:20px 4px 0;min-width:12px;transition:background .2s ease}
body.woocommerce-checkout .cen-checkout-stepper__connector.is-done{background:var(--yellow-d)}

/* Display-only — not a real <button> (see form-checkout.php), no hover/
   pointer affordance on any state including .is-done. */
body.woocommerce-checkout .cen-checkout-stepper__btn{display:flex;align-items:flex-start;gap:12px;width:100%;min-width:0;text-align:left;font-family:inherit}

body.woocommerce-checkout .cen-checkout-stepper__circle{position:relative;flex-shrink:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paper);border:1.5px solid var(--line);color:var(--text3);font-family:var(--font-display);font-weight:700;font-size:15px;transition:background .15s ease,border-color .15s ease,color .15s ease}
body.woocommerce-checkout .cen-checkout-stepper__check{display:none;color:var(--yellow)}

/* Active: yellow circle, black number. */
body.woocommerce-checkout .cen-checkout-stepper__item.is-active .cen-checkout-stepper__circle{background:var(--yellow);border-color:var(--yellow);color:var(--ink);box-shadow:0 0 0 3px var(--yellow-l)}

/* Done: black circle, yellow check (number hidden). */
body.woocommerce-checkout .cen-checkout-stepper__item.is-done .cen-checkout-stepper__circle{background:var(--ink);border-color:var(--ink)}
body.woocommerce-checkout .cen-checkout-stepper__item.is-done .cen-checkout-stepper__num{display:none}
body.woocommerce-checkout .cen-checkout-stepper__item.is-done .cen-checkout-stepper__check{display:block}

/* Text column — min-width:0 + wrap, so a long title/subtitle can never
   overlap its neighbour instead of wrapping within its own column. The
   short-title span is CSS-only (hidden ≥641px) — see the max-width:640px
   block for the swap to abbreviated labels on narrow screens. */
body.woocommerce-checkout .cen-checkout-stepper__text{display:flex;flex-direction:column;gap:3px;padding-top:8px;min-width:0;flex:1}
body.woocommerce-checkout .cen-checkout-stepper__text strong{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--text2);line-height:1.3;white-space:normal;display:inline-block}
/* Specificity note: these two must out-rank ".cen-checkout-stepper__text strong"
   above (1 class + 1 type) or its display:inline-block wins and both the full
   and short title render at once — that was the "title shows twice on desktop"
   bug. Nesting under .cen-checkout-stepper__text (2 classes) fixes it. */
body.woocommerce-checkout .cen-checkout-stepper__text .cen-checkout-stepper__short-title{display:none}
body.woocommerce-checkout .cen-checkout-stepper__text small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:11.5px;color:var(--text3);line-height:1.4;white-space:normal}
/* Active: only the circle turns yellow (see .cen-checkout-stepper__circle
   rule above) — the title stays dark ink, same as this rule always did.
   Upcoming/done titles use --text2 (a clean dark grey) from the base rule
   above, not --text3 (which reads olive/yellow-tinted at this weight). */
body.woocommerce-checkout .cen-checkout-stepper__item.is-active .cen-checkout-stepper__text strong{color:var(--ink)}
body.woocommerce-checkout .cen-checkout-stepper__item.is-active .cen-checkout-stepper__text small{color:var(--text2)}

/* ---- Grid: step card (left) + order summary (right) ---- */
body.woocommerce-checkout .cen-checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start}
body.woocommerce-checkout .cen-checkout-aside{position:sticky;top:100px;display:flex;flex-direction:column;gap:16px}

/* ---- Step card ---- */
body.woocommerce-checkout .cen-step-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
body.woocommerce-checkout .cen-step__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 28px;border-bottom:1px solid var(--line)}
body.woocommerce-checkout .cen-step__title{font-size:21px;color:var(--ink);margin:0 0 4px}
body.woocommerce-checkout .cen-step__subtitle{font-size:13px;color:var(--text3);margin:0}
body.woocommerce-checkout .cen-step__secure{flex-shrink:0;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--yellow-ink)}
body.woocommerce-checkout .cen-step__body{padding:28px}
body.woocommerce-checkout .cen-step__placeholder{font-size:13px;color:var(--text3);background:var(--paper-warm);border:1px dashed var(--line);border-radius:var(--r);padding:16px}

/* Steps 2/3 hidden behind JS only — see assets/js/checkout.js's boot(),
   which adds .is-js to [data-cen-steps] before switching any step. With no
   JS this selector never matches, so every step stays visible and stacked
   (progressive enhancement, per the approved spec). */
body.woocommerce-checkout .cen-step-card.is-js .cen-step:not(.is-active){display:none}
body.woocommerce-checkout .cen-step:not(:last-child){border-bottom:1px solid var(--line)}
body.woocommerce-checkout .cen-step-card.is-js .cen-step{border-bottom:none}

/* Footer: lock note + Back/Continue, vertically centred as one row ≥641px. */
body.woocommerce-checkout .cen-step__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 28px;background:var(--paper-warm);border-top:1px solid var(--line)}
body.woocommerce-checkout .cen-step__lock{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text3)}
body.woocommerce-checkout .cen-step__nav{display:flex;align-items:center;gap:12px;margin-left:auto}
body.woocommerce-checkout .cen-step__back,body.woocommerce-checkout .cen-step__next{min-height:46px;font-size:13.5px}
body.woocommerce-checkout .cen-step__back[hidden]{display:none}

/* ---- Footer "Continue to Next Step" / "Place Order" toggle (same button,
   see form-checkout.php + checkout.js) — one label/icon pair is shown at a
   time via .is-last-step, so the button never changes width when its text
   changes length. The "Placing order…" state keeps the button's normal
   content in place (visibility:hidden, not display:none) so its box size
   — and the button's width — never shifts, and overlays the processing
   text/spinner on top via ::after. ---- */
body.woocommerce-checkout .cen-step__next{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px}
body.woocommerce-checkout .cen-step__next-label--place,
body.woocommerce-checkout .cen-step__next-icon--place{display:none}
body.woocommerce-checkout .cen-step__next.is-last-step .cen-step__next-label--continue,
body.woocommerce-checkout .cen-step__next.is-last-step .cen-step__next-icon--continue{display:none}
body.woocommerce-checkout .cen-step__next.is-last-step .cen-step__next-label--place,
body.woocommerce-checkout .cen-step__next.is-last-step .cen-step__next-icon--place{display:inline-flex}
body.woocommerce-checkout .cen-step__next.is-processing{pointer-events:none}
body.woocommerce-checkout .cen-step__next.is-processing .cen-step__next-label,
body.woocommerce-checkout .cen-step__next.is-processing .cen-step__next-icon{visibility:hidden}
body.woocommerce-checkout .cen-step__next.is-processing::after{content:'Placing order…';position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

/* ═══════════════════════════════════════════════════════════════════
   Field sizing — every input/select/textarea in the step card gets the
   same box: 48px tall, 1px #e5e5e5 border, 6px radius, 15px font (16px
   on mobile — see the max-width:767px block, stops iOS zoom-on-focus).
   This REPLACES assets/css/theme.css's older, looser
   .woocommerce-checkout input.input-text/select/textarea rule (12px/14px
   padding, no fixed height) for anything inside the step card specifically,
   via the extra .cen-step-card ancestor making this the more specific of
   the two — that old sitewide rule still governs any checkout markup
   outside this new card (there is currently none), so nothing elsewhere
   is affected. ═══════════════════════════════════════════════════════ */
body.woocommerce-checkout .cen-step-card input.input-text,
body.woocommerce-checkout .cen-step-card select,
body.woocommerce-checkout .cen-step-card textarea,
body.woocommerce-checkout .cen-step-card .select2-container .select2-selection--single{
	width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;
	font-family:var(--font-body);font-size:15px;line-height:1.3;color:var(--ink);background:var(--paper);
	transition:border-color .15s ease,box-shadow .15s ease;box-sizing:border-box
}
body.woocommerce-checkout .cen-step-card textarea{min-height:90px;padding-top:12px}
body.woocommerce-checkout .cen-step-card input.input-text:focus,
body.woocommerce-checkout .cen-step-card select:focus,
body.woocommerce-checkout .cen-step-card textarea:focus{outline:none;border-color:var(--yellow-d);box-shadow:0 0 0 3px var(--yellow-l)}
body.woocommerce-checkout .cen-step-card .select2-container--focus .select2-selection--single,
body.woocommerce-checkout .cen-step-card .select2-container--open .select2-selection--single{border-color:var(--yellow-d);box-shadow:0 0 0 3px var(--yellow-l)}

/* ---- Labels: 12px bold uppercase, 8px below, 20px row rhythm ---- */
body.woocommerce-checkout .cen-step-card .form-row{margin-bottom:20px}
body.woocommerce-checkout .cen-step-card .form-row label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);margin-bottom:8px}

/* 2-column rows (First/Last name etc.) — same top edge, stack on mobile
   (mobile rule is in the max-width:640px block below). */
body.woocommerce-checkout .cen-step-card .form-row-first,
body.woocommerce-checkout .cen-step-card .form-row-last{width:calc(50% - 8px)}
body.woocommerce-checkout .cen-step-card .form-row-first{float:left;clear:left}
body.woocommerce-checkout .cen-step-card .form-row-last{float:right;clear:right}
body.woocommerce-checkout .cen-step-card .form-row-wide{clear:both}

/* Street address → Apartment/suite: 10px gap instead of the default 20px
   row rhythm between THIS one pair specifically. */
body.woocommerce-checkout .cen-step-card #billing_address_1_field{margin-bottom:10px}

/* ═══════════════════════════════════════════════════════════════════
   Field icons — absolutely positioned INSIDE the input, vertically
   centred with top:50%/translateY(-50%) so it stays correct no matter
   the field's actual rendered height (text input, select, or the
   select2-enhanced Country/State control all differ). Positioned
   relative to .woocommerce-input-wrapper specifically (input + icon
   only), never the whole .form-row — so a label above or an error
   message below can never shift it. ═══════════════════════════════════ */
body.woocommerce-checkout .cen-step-card .cen-field .woocommerce-input-wrapper,
body.woocommerce-checkout .cen-step-card .woocommerce-input-wrapper{position:relative;display:block}
body.woocommerce-checkout .cen-step-card .cen-field-icon,
body.woocommerce-checkout .cen-field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;color:#999;pointer-events:none;z-index:2}
body.woocommerce-checkout .cen-step-card .cen-field input,
body.woocommerce-checkout .cen-step-card .cen-field select,
body.woocommerce-checkout .cen-field-icon ~ input,
body.woocommerce-checkout .cen-field-icon ~ select,
body.woocommerce-checkout .woocommerce-input-wrapper:has(.cen-field-icon) input,
body.woocommerce-checkout .woocommerce-input-wrapper:has(.cen-field-icon) select{padding-left:44px!important}
body.woocommerce-checkout .cen-step-card .cen-field select{appearance:none;background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%236B6862%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:38px}

/* select2 (Country / State): the plugin hides the native <select> and
   inserts .select2-container as its sibling inside the same
   .woocommerce-input-wrapper — the icon positions against that same
   wrapper exactly as for a plain input, no separate top offset needed. */
body.woocommerce-checkout .cen-step-card .cen-field .select2-container{width:100%!important}
body.woocommerce-checkout .cen-step-card .cen-field .select2-container .select2-selection--single,
body.woocommerce-checkout .select2-container .select2-selection--single{padding-left:44px!important;display:flex;align-items:center}
body.woocommerce-checkout .cen-step-card .cen-field .select2-container .select2-selection__rendered{padding:0;line-height:1.3;font-size:15px;color:var(--ink)}
body.woocommerce-checkout .cen-step-card .cen-field .select2-container .select2-selection__arrow{height:100%;right:10px}

/* ═══════════════════════════════════════════════════════════════════
   Live validation (assets/js/checkout.js) — errors only ever appear from
   a real blur, a Continue click, or a server response; checkout.js clears
   any mark WooCommerce's own native validation may add before the visitor
   has touched a field (autofill-on-load), so nothing below can render on
   first paint. ═══════════════════════════════════════════════════════ */
body.woocommerce-checkout .cen-step-card .form-row.cen-has-error input.input-text,
body.woocommerce-checkout .cen-step-card .form-row.cen-has-error select,
body.woocommerce-checkout .cen-step-card .form-row.cen-has-error .select2-container .select2-selection--single{border-color:var(--error);box-shadow:none;background:#fff8f8}
body.woocommerce-checkout .cen-field-error{display:block;font-size:13px;color:var(--error);margin-top:6px;line-height:1.4}
body.woocommerce-checkout .cen-field-error:empty{display:none}

/* ---- site-core "How Can We Contact You?" — align padding/width with the
   other fields; pills get the same 48px-family height; textarea matches
   the shared input style above (both already share the .field/.cen-step-card
   textarea selectors). The pill selected-state (yellow border + light
   yellow fill) is already correct in theme.css's own
   .site-core-contact-pill:has(input:checked) rule — untouched here. ---- */
body.woocommerce-checkout .cen-step-card .site-core-contact-preferences{margin:20px 0 0;padding:20px;border-radius:var(--r-lg);transition:border-color .15s ease}
body.woocommerce-checkout .cen-step-card .site-core-contact-pill{min-height:44px}
body.woocommerce-checkout .cen-step-card .site-core-contact-preferences .form-row{margin-bottom:0}
body.woocommerce-checkout .cen-step-card .site-core-contact-preferences textarea{min-height:78px}
/* Error state — both a client-side "nothing selected yet" (Continue) and a
   repaint of site-core's own server-side notice after a redirect back to
   this step (see checkout.js's checkout_error handler). */
body.woocommerce-checkout .cen-step-card .site-core-contact-preferences.cen-has-error{border-color:var(--error)}
body.woocommerce-checkout .cen-step-card [data-cen-contact-methods-error]{display:block;margin:8px 0 0}

/* ═══════════════════════════════════════════════════════════════════
   Order summary aside — the native review-order table (core markup,
   unmodified) themed to remove its own outer border + the double
   top/bottom border per row, fix the clipped thead, bold/yellow total,
   and a clean coupon row (brackets stripped server-side — see
   inc/checkout/checkout-fields.php's woocommerce_cart_totals_coupon_html
   filter). ═══════════════════════════════════════════════════════════ */
body.woocommerce-checkout .cen-order-summary{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--yellow);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
body.woocommerce-checkout .cen-order-summary .cen-summary__title{font-size:18px;color:var(--ink);margin:0 0 16px}

body.woocommerce-checkout .cen-order-summary table.shop_table{width:100%;margin:0 0 4px;border:none;border-radius:0;border-collapse:collapse;border-spacing:0;font-size:13.5px}
body.woocommerce-checkout .cen-order-summary table.shop_table thead th{padding:0 0 12px;line-height:1.5;border:none;font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text3)}
body.woocommerce-checkout .cen-order-summary table.shop_table thead th.product-total{text-align:right}
body.woocommerce-checkout .cen-order-summary table.shop_table tbody td,
body.woocommerce-checkout .cen-order-summary table.shop_table tfoot th,
body.woocommerce-checkout .cen-order-summary table.shop_table tfoot td{padding:11px 0;line-height:1.5;border:none;border-top:1px solid var(--line)}
body.woocommerce-checkout .cen-order-summary table.shop_table tbody tr:first-child td{border-top:none}
body.woocommerce-checkout .cen-order-summary table.shop_table td:not(.product-name){text-align:right}
body.woocommerce-checkout .cen-order-summary table.shop_table tfoot tr.order-total th,
body.woocommerce-checkout .cen-order-summary table.shop_table tfoot tr.order-total td{padding-top:14px;font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--ink)}
body.woocommerce-checkout .cen-order-summary table.shop_table tfoot tr.order-total td .amount{color:var(--yellow-ink)}
body.woocommerce-checkout .cen-order-summary table.shop_table tr.cart-discount td{color:var(--yellow-ink);font-weight:600}
body.woocommerce-checkout .cen-order-summary table.shop_table .woocommerce-remove-coupon{display:inline-flex;align-items:center;margin-left:8px;padding:2px 9px;border-radius:99px;background:var(--yellow-l);color:var(--yellow-ink);font-size:11px;font-weight:700;text-decoration:none}
body.woocommerce-checkout .cen-order-summary table.shop_table .woocommerce-remove-coupon:hover{background:var(--yellow)}

/* ---- No empty row under Total: a genuinely empty <tr> (e.g. a $0 tax/fee
   row some gateways leave behind) just collapses instead of rendering as a
   blank bar. ---- */
body.woocommerce-checkout .cen-order-summary table.shop_table tr:empty{display:none}

/* ---- Coupon box: only the toggle paragraph gets the divider. The form
   itself (class="checkout_coupon woocommerce-form-coupon") ships with its
   own inline style="display:none" from WooCommerce core and is toggled by
   core's own checkout.js (a.showcoupon click -> slideToggle) — this CSS
   display:none is a non-!important safety net for the same default state,
   never fighting that toggle since jQuery's slideToggle sets its own
   inline style, which always wins over this. Previously this rule also
   matched a nonexistent ".coupon" class and added a border-top to BOTH the
   toggle AND the form, which is what read as an empty divider bar under
   the order total whenever the form became visible. ---- */
body.woocommerce-checkout .cen-order-summary .woocommerce-form-coupon-toggle{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
body.woocommerce-checkout .cen-order-summary .checkout_coupon{display:none;margin-top:12px}
body.woocommerce-checkout .cen-trust--card,
body.woocommerce-checkout .cen-trust--card.cen-trust{
	background:var(--paper);
	border:1px solid var(--line);
	border-radius:var(--r-lg);
	padding:18px 20px!important;
	list-style:none;
	margin:16px 0 0;
	display:flex;
	flex-direction:column;
	gap:12px;
	box-shadow:var(--shadow);
}
body.woocommerce-checkout .cen-trust--card ul{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:12px;
}
body.woocommerce-checkout .cen-trust--card .cen-trust__item{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text2)}
body.woocommerce-checkout .cen-trust--card .cen-trust__icon{display:flex;flex-shrink:0;color:var(--yellow-d)}

/* ═══════════════════════════════════════════════════════════════════
   STEP 3 — Payment. #payment/.payment_methods/.place-order are WooCommerce
   core markup (templates/checkout/payment.php + terms.php), themed here
   rather than template-overridden, since nothing about their structure
   needs to change — only their look, plus relocating the actual submit
   trigger into the shared step footer (see checkout.js).
   ═══════════════════════════════════════════════════════════════════ */
/* Payment box: replace WooCommerce core's default lavender-grey (#ececec)
   fill with the theme's own light card tone. */
body.woocommerce-checkout #payment,
body.woocommerce-checkout #payment ul.payment_methods{background:#F7F7F5;border-radius:var(--r-lg)}
body.woocommerce-checkout #payment{border:1px solid var(--line);padding:18px}
body.woocommerce-checkout #payment ul.payment_methods{border:none;padding:0;margin:0 0 4px}

/* Real #place_order — kept in the DOM (never removed) so WooCommerce's own
   submit/nonce/payment-gateway/terms validation keeps running exactly as
   before; only visually hidden. The footer's "Place Order" button (see
   .cen-step__next below and checkout.js) triggers a real click on this
   element instead of re-implementing any of that. Position:absolute + clip,
   not display:none, so a programmatic .click() still fires its default
   submit behaviour reliably in every browser. */
body.woocommerce-checkout #place_order{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ---- Payment method pills (site-core's manual-payment gateway,
   class-payment-gateway.php) — previously inline-styled with a flat #ccc
   border and no selected state at all. ---- */
body.woocommerce-checkout .site-core-payment-methods{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
body.woocommerce-checkout .site-core-payment-methods__pill{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:1.5px solid var(--line);border-radius:var(--r-lg);background:var(--paper);cursor:pointer;font-size:13.5px;color:var(--text2);transition:border-color .15s ease,background .15s ease,color .15s ease}
body.woocommerce-checkout .site-core-payment-methods__pill:hover{border-color:var(--yellow-d)}
body.woocommerce-checkout .site-core-payment-methods__pill:has(input:checked){border-color:var(--yellow-d);background:var(--yellow-l);color:var(--yellow-ink);font-weight:600}
body.woocommerce-checkout .site-core-payment-methods__pill input[type="radio"]{width:16px;height:16px;accent-color:var(--yellow-d);cursor:pointer}

body.woocommerce-checkout .woocommerce-privacy-policy-text{font-size:14px;color:var(--text3);line-height:1.6;margin:0 0 14px}
body.woocommerce-checkout .woocommerce-privacy-policy-text p{margin:0}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin-bottom:4px}
body.woocommerce-checkout .woocommerce-form__label-for-checkbox{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:400;color:var(--text1);cursor:pointer;line-height:1.5}
body.woocommerce-checkout .woocommerce-form__input-checkbox{flex-shrink:0;width:18px;height:18px;margin:2px 0 0;accent-color:var(--yellow-d);cursor:pointer}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row.woocommerce-invalid .woocommerce-form__label-for-checkbox{color:var(--error)}

@media(max-width:1180px){
	body.woocommerce-checkout .cen-checkout-grid{grid-template-columns:minmax(0,1fr) 340px;gap:24px}
	body.woocommerce-checkout .cen-step__body{padding:24px}
}

@media(max-width:1024px){
	body.woocommerce-checkout .cen-checkout-grid{grid-template-columns:1fr}
	body.woocommerce-checkout .cen-checkout-aside{position:static;order:-1;display:none}
	body.woocommerce-checkout .cen-summary-toggle{display:flex}
	/* Tablet: keep all 3 circles + titles visible (just drop the subtitle
	   line, which can still wrap to 2 lines down at mobile widths below). */
	body.woocommerce-checkout .cen-checkout-stepper__text small{display:none}
}

@media(max-width:767px){
	/* 16px font on every field — stops iOS Safari's zoom-on-focus. */
	body.woocommerce-checkout .cen-step-card input.input-text,
	body.woocommerce-checkout .cen-step-card select,
	body.woocommerce-checkout .cen-step-card textarea,
	body.woocommerce-checkout .cen-step-card .select2-container .select2-selection__rendered{font-size:16px}
}

@media(max-width:640px){
	/* Mobile: all 3 circles + connectors stay on one row (no overflow,
	   no clipped labels) — the title moves BELOW its circle instead of
	   beside it, and swaps to the short label ("Shipping"/"Medical"/
	   "Payment") so it fits a ~1/3-width column at 320px. Subtitle stays
	   hidden (inherited from the 1024px block above). */
	body.woocommerce-checkout .cen-checkout-stepper__circle{width:34px;height:34px;font-size:13px}
	body.woocommerce-checkout .cen-checkout-stepper__btn{flex-direction:column;align-items:center;gap:6px;text-align:center}
	body.woocommerce-checkout .cen-checkout-stepper__connector{margin-top:17px;flex:1 1 16px;min-width:8px}
	body.woocommerce-checkout .cen-checkout-stepper__text{padding-top:0;align-items:center;text-align:center}
	body.woocommerce-checkout .cen-checkout-stepper__text strong{font-size:11px;white-space:nowrap}
	body.woocommerce-checkout .cen-checkout-stepper__text .cen-checkout-stepper__full-title{display:none}
	body.woocommerce-checkout .cen-checkout-stepper__text .cen-checkout-stepper__short-title{display:inline-block}
	body.woocommerce-checkout .cen-step__head{flex-direction:column;gap:10px;padding:20px}
	body.woocommerce-checkout .cen-step__body{padding:20px}
	body.woocommerce-checkout .cen-step__foot{flex-direction:column;align-items:stretch;padding:18px 20px}
	body.woocommerce-checkout .cen-step__lock{justify-content:center}
	body.woocommerce-checkout .cen-step__nav{margin-left:0;justify-content:stretch}
	body.woocommerce-checkout .cen-step__back,body.woocommerce-checkout .cen-step__next{flex:1;justify-content:center}
	body.woocommerce-checkout .cen-step-card .form-row-first,
	body.woocommerce-checkout .cen-step-card .form-row-last{width:100%;float:none}
}

@media(max-width:480px){
	body.woocommerce-checkout .cen-checkout-banner .h1{font-size:22px}
}

/* ═══════════════════════════════════════════════════════════════════
   3. STEP 2 — Medical Information (inc/checkout/medical-fields.php)
   ═══════════════════════════════════════════════════════════════════ */
body.woocommerce-checkout .cen-medical-fields > *{margin-bottom:20px}
body.woocommerce-checkout .cen-medical-fields > *:last-child{margin-bottom:0}

/* Textarea fields (allergies/treatments): icon pinned near the top, not
   vertically centred — centring would drift as the box is multi-line and
   the user may grow it. :has() is already used elsewhere in this theme
   (theme.css's .site-core-contact-pill:has(input:checked)). */
body.woocommerce-checkout .cen-step-card .cen-field .woocommerce-input-wrapper:has(textarea) .cen-field-icon{top:16px;transform:none}
body.woocommerce-checkout .cen-step-card .cen-field textarea{padding-left:44px;resize:vertical}

/* ---- Other Conditions: pill cards, 3 equal columns ---- */
body.woocommerce-checkout .cen-conditions{border:none;margin:0;padding:0}
body.woocommerce-checkout .cen-conditions__legend{display:block;width:100%;padding:0;margin:0 0 12px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text2)}
body.woocommerce-checkout .cen-conditions__legend::before{content:none}
body.woocommerce-checkout .cen-conditions__sub{display:block;margin-top:4px;font-size:12.5px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text3)}
body.woocommerce-checkout .cen-conditions__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}

/* ═══════════════════════════════════════════════════════════════════
   4. Login-required notice highlight + dismissible success notice
   (assets/js/checkout.js: highlightLoginNotice(), initNoticeDismiss())
   ═══════════════════════════════════════════════════════════════════ */
/* Brief glow in the theme's own yellow accent (no new colour introduced) —
   draws the eye to the "Returning customer?" notice after a scroll-to,
   whether triggered by the Step 1 login gate or a server-side
   authentication_required error. */
@keyframes cenNoticePulse{
	0%,100%{box-shadow:0 0 0 0 rgba(176,134,0,0)}
	25%,75%{box-shadow:0 0 0 4px rgba(176,134,0,.35)}
}
body.woocommerce-checkout .cen-notice-pulse{animation:cenNoticePulse 1.6s ease-in-out}

body.woocommerce-checkout .cen-checkout-notices .woocommerce-message{
	position:relative;
	padding-right:40px;
}
body.woocommerce-checkout .cen-checkout-notices .woocommerce-message .cen-notice-dismiss{
	position:absolute;
	top:50%;
	right:14px;
	transform:translateY(-50%);
	width:22px;
	height:22px;
	line-height:20px;
	text-align:center;
	border-radius:50%;
	border:none;
	background:rgba(0,0,0,.06);
	color:inherit;
	font-size:15px;
	cursor:pointer;
	padding:0;
}
body.woocommerce-checkout .cen-checkout-notices .woocommerce-message .cen-notice-dismiss:hover{background:rgba(0,0,0,.12)}
body.woocommerce-checkout .cen-conditions__pill{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);cursor:pointer;background:var(--paper);transition:border-color .15s ease,background .15s ease}
body.woocommerce-checkout .cen-conditions__pill:hover{border-color:var(--yellow-d)}
body.woocommerce-checkout .cen-conditions__pill.is-checked{border-color:var(--yellow-d);background:var(--yellow-l)}
body.woocommerce-checkout .cen-conditions__pill input{position:absolute;opacity:0;width:1px;height:1px}
body.woocommerce-checkout .cen-conditions__icon{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paper-warm);color:var(--text3)}
body.woocommerce-checkout .cen-conditions__pill.is-checked .cen-conditions__icon{background:var(--yellow);color:var(--ink)}
body.woocommerce-checkout .cen-conditions__text{min-width:0}
body.woocommerce-checkout .cen-conditions__text strong{display:block;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink)}
body.woocommerce-checkout .cen-conditions__text small{display:block;font-size:11.5px;color:var(--text3);margin-top:1px}
body.woocommerce-checkout [data-cen-conditions-error]{margin-top:10px}

/* ---- Confirmation checkbox: highlighted box, matching the Rx-upload
   card's tone (yellow, not the plain field style) ---- */
body.woocommerce-checkout .cen-confirm-row{margin:0}
body.woocommerce-checkout .cen-confirm-label{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--yellow-d);background:var(--yellow-l);border-radius:var(--r-lg);cursor:pointer}
body.woocommerce-checkout .cen-confirm-label input{flex-shrink:0;width:18px;height:18px;margin:2px 0 0;accent-color:var(--yellow-d);cursor:pointer}
body.woocommerce-checkout .cen-confirm-icon{display:none}
body.woocommerce-checkout .cen-confirm-text{font-size:13px;color:var(--text1);line-height:1.5}
body.woocommerce-checkout .cen-confirm-row.cen-has-error .cen-confirm-label{border-color:var(--error);background:#fff8f8}

/* ---- site-core Rx upload — card shell (border, padding, radius) already
   themed in theme.css's own .site-core-rx-upload rule; the rules below
   style its inner title/description/status/email-option markup and its
   required/error states to match the rest of the step, since those were
   previously inline-styled with no connection to the theme's tokens. ---- */
body.woocommerce-checkout .site-core-rx-upload.cen-has-error{border-color:var(--error);background:#fff8f8}
body.woocommerce-checkout .cen-rx-title{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);margin:0 0 6px}
body.woocommerce-checkout .cen-rx-desc{font-size:12.5px;color:var(--text3);line-height:1.5;margin:0 0 14px}
body.woocommerce-checkout .cen-rx-field{margin:0}
body.woocommerce-checkout .site-core-rx-upload input[type="file"]{display:block;width:100%;font-family:var(--font-body);font-size:13.5px;color:var(--text2);padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);cursor:pointer;box-sizing:border-box}
body.woocommerce-checkout .site-core-rx-upload input[type="file"]::file-selector-button{margin-right:12px;padding:8px 14px;border:none;border-radius:var(--r);background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:700;cursor:pointer;transition:background .15s ease}
body.woocommerce-checkout .site-core-rx-upload input[type="file"]::file-selector-button:hover{background:var(--yellow-d);color:var(--ink)}
body.woocommerce-checkout .cen-rx-status{display:block;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--yellow-ink)}
body.woocommerce-checkout .cen-rx-status:empty{display:none}
body.woocommerce-checkout .cen-rx-email-row{margin:14px 0 0}
body.woocommerce-checkout .cen-rx-email-label{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;font-weight:400;color:var(--text2);line-height:1.5;cursor:pointer}
body.woocommerce-checkout .cen-rx-email-label input[type="checkbox"]{width:16px;height:16px;flex-shrink:0;margin:2px 0 0;accent-color:var(--yellow-d);cursor:pointer}

/* ═══════════════════════════════════════════════════════════════════
   select2 (Country / State) results dropdown — selectWoo/select2 appends
   this panel to <body> itself, NOT inside .cen-step-card, so every rule
   above scoped under .cen-step-card .cen-field can never reach it. This
   is the actual cause of the dropdown rendering with select2's own
   unthemed default styling (plain white rows, default blue highlight)
   instead of the site's look. Scoped to body.woocommerce-checkout only
   (still matches: .select2-dropdown lands as a body descendant), not to
   .cen-step-card. ═══════════════════════════════════════════════════ */
body.woocommerce-checkout .select2-dropdown{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-md);overflow:hidden;font-family:var(--font-body)}
body.woocommerce-checkout .select2-search--dropdown{padding:8px}
body.woocommerce-checkout .select2-search--dropdown .select2-search__field{min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:14px;outline:none}
body.woocommerce-checkout .select2-search--dropdown .select2-search__field:focus{border-color:var(--yellow-d)}
body.woocommerce-checkout .select2-results__option{padding:10px 14px;font-size:14px;color:var(--ink)}
/* The selector below already out-specifies select2.css's own
   .select2-container--default .select2-results__option--highlighted
   [aria-selected] rule (4 class/attribute selectors vs its 3) — confirmed
   by counting both selectors, not guessed — but the colour still wasn't
   winning in testing, which a specificity count alone can't explain
   without live devtools access. !important here is a deliberate, narrow
   exception for exactly this one vendor-widget rule (same category as the
   .select2-container width override above, which already needs it because
   select2 sets that width via inline style from its own JS) rather than a
   blanket hack. */
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:var(--yellow)!important;color:var(--ink)!important}
body.woocommerce-checkout .select2-results__option[aria-selected="true"]{background:var(--yellow-l);color:var(--ink)}
body.woocommerce-checkout .select2-container--open .select2-selection--single{border-color:var(--yellow-d);box-shadow:0 0 0 3px var(--yellow-l)}

@media(max-width:640px){
	body.woocommerce-checkout .cen-conditions__grid{grid-template-columns:1fr}
}