/* =============================================================
   ChalkVerse 2026 Redesign — component layer
   -------------------------------------------------------------
   Ported from the Claude Design mockups in `new design/`.
   Relies on the design tokens already defined in style.css :root
   (--cv-gold, --cv-dark-1..3, --cv-border, radii, etc.), so this
   file MUST load after style.css.

   Namespace: `cvx-` (redesign) — kept separate from the legacy
   `cv-` classes so untouched pages keep working during rollout.

   Sections:
     0. Shared primitives (container, buttons, fields, secure header)
     A. Cart              (added in Phase A)
     B. Checkout          (added in Phase B)
     C. Landing/front page(added in Phase C)
   ============================================================= */

/* -------------------------------------------------------------
   0. SHARED PRIMITIVES
   ------------------------------------------------------------- */

/* Clip any horizontal overflow at the root (e.g. the off-canvas cart
   drawer). `clip` — not `hidden` — so it doesn't break position:sticky. */
html { overflow-x: clip; }

.cvx-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

/* Pill buttons ------------------------------------------------ */
.cvx-btn-gold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--cv-gold);
	color: #1a1a1a;
	border: none;
	border-radius: 50px;
	font: 700 15px/1 var(--cv-font);
	padding: 15px 30px;
	cursor: pointer;
	transition: transform var(--cv-transition), box-shadow var(--cv-transition), background var(--cv-transition);
	white-space: nowrap;
	text-decoration: none;
}
.cvx-btn-gold:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 36px var(--cv-gold-glow);
	color: #1a1a1a;
}

.cvx-btn-out {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: transparent;
	color: var(--cv-text-muted);
	border: 2px solid var(--cv-text-muted);
	border-radius: 50px;
	font: 700 15px/1 var(--cv-font);
	padding: 13px 28px;
	cursor: pointer;
	transition: all var(--cv-transition);
	text-decoration: none;
}
.cvx-btn-out:hover {
	background: #fff;
	color: #1a1a1a;
	border-color: #fff;
}

/* Stripe Link / express green button ------------------------- */
.cvx-btn-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	padding: 15px;
	border: none;
	border-radius: 50px;
	background: #00d66f;
	color: #0a0a0a;
	font: 800 15px/1 var(--cv-font);
	cursor: pointer;
}

/* Text input field (cart coupon, checkout fields) ------------ */
.cvx-field {
	width: 100%;
	box-sizing: border-box;
	background: var(--cv-dark-1);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px;
	color: #fff;
	padding: 13px 15px;
	font: 400 15px/1 var(--cv-font);
	outline: none;
	transition: border-color .2s, background .2s;
}
.cvx-field:focus {
	border-color: var(--cv-gold);
	background: rgba(240, 194, 85, .06);
}
.cvx-field::placeholder { color: #6b6b6b; }

/* Slim "secure checkout" header (cart + checkout) ------------ */
.cvx-secure-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 40px auto 32px;
	max-width: 1180px;
	padding: 0 24px;
	box-sizing: border-box;
}
/* !important + max-width to beat WooCommerce/Astra's `.woocommerce img { height:auto }`,
   which otherwise wins on specificity and renders the logo at full natural size. */
.cvx-secure-header__logo {
	height: 34px !important;
	width: auto !important;
	max-width: 34px;
	flex-shrink: 0;
}
.cvx-secure-header__word { font: 800 18px/1 var(--cv-font); color: #fff; }
.cvx-secure-header__word span { color: var(--cv-gold); }
.cvx-secure-header__lock {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 600 13px/1 var(--cv-font);
	color: #888;
}
.cvx-secure-header__lock i { color: var(--cv-gold); }

/* -------------------------------------------------------------
   A. CART
   ------------------------------------------------------------- */

/* Card shell — shared by cart and checkout ("Load the Bar").
   Top padding clears the fixed site navbar (.cv-nav, ~72px tall) now that
   cart/checkout use the standard homepage header instead of a slim bar. */
.cvx-cart-page { min-height: 100vh; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center; padding: 108px 20px 80px; }
.cvx-co-card {
	width: 920px; max-width: 100%;
	background: #161616;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.cvx-co-head { display: flex; align-items: center; gap: 13px; padding: 22px 34px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cvx-co-head__logo { height: 28px !important; width: auto !important; max-width: none; }
/* Card header shows a security shield instead of the brand logo — the site
   navbar already carries the logo, so this avoids two logos at once. */
.cvx-co-head__shield { display: inline-flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; color: var(--cv-success); }
.cvx-co-head__shield i { color: var(--cv-success); }
.cvx-co-head__brand { font: 800 17px/1 var(--cv-font); color: #fff; }
.cvx-co-head__brand span { color: var(--cv-gold); }
.cvx-co-head__tag { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 800 12px/1 var(--cv-font); letter-spacing: 1px; text-transform: uppercase; color: var(--cv-gold); }

/* Barbell. The design's generic class names (.plate / .collarcap / .barbar) are
   scoped to the card so they cannot collide with anything else on the site. */
.cvx-bar { padding: 34px 48px 26px; background: linear-gradient(180deg, #1b1b1b, #161616); }
.cvx-bar__rack { display: flex; align-items: center; justify-content: center; gap: 3px; height: 86px; margin-bottom: 12px; }
.cvx-co-card .collarcap { width: 24px; height: 12px; border-radius: 3px; background: #4a4a4a; flex: 0 0 auto; }
.cvx-co-card .barbar { flex: 1; height: 10px; min-width: 40px; background: linear-gradient(180deg, #8a8a8a, #3a3a3a); border-radius: 2px; }
.cvx-co-card .plate { border-radius: 5px; flex: 0 0 auto; transition: background .45s cubic-bezier(.25,1,.5,1), box-shadow .45s ease, border-color .45s ease, transform .45s cubic-bezier(.25,1,.5,1); }
.cvx-co-card .plate.on { background: linear-gradient(90deg, #f0c255, #c9992f); box-shadow: 0 0 20px rgba(240, 194, 85, .5); border: 1px solid transparent; }
.cvx-co-card .plate.off { background: #211d15; border: 1.5px dashed rgba(240, 194, 85, .3); box-shadow: none; transform: scaleY(.88); }
.cvx-plate--s { width: 16px; height: 44px; }
.cvx-plate--m { width: 18px; height: 58px; }
.cvx-plate--l { width: 21px; height: 74px; }
.cvx-bar__copy { text-align: center; }
.cvx-bar__title { font: 900 26px/1.05 var(--cv-font); letter-spacing: -1px; color: #fff; }
.cvx-bar__sub { font: 500 14px/1.4 var(--cv-font); color: #8f8f8f; margin-top: 4px; }

.cvx-co-pad { padding: 14px 56px 44px; box-sizing: border-box; }
.cvx-cart__inner { max-width: 600px; margin: 0 auto; }

/* Line item */
.cvx-cart__item {
	display: flex; align-items: center; gap: 16px;
	background: radial-gradient(120% 90% at 85% 0%, #26200f, #141414 72%);
	border: 1px solid rgba(240, 194, 85, .2);
	border-radius: 16px; padding: 18px 20px;
}
.cvx-cart__thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--cv-border); }
.cvx-cart__thumb img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; }
.cvx-cart__info { flex: 1; min-width: 0; }
.cvx-cart__name { font: 800 17px/1.2 var(--cv-font); color: #fff; }
.cvx-cart__sub { font: 500 13px/1.3 var(--cv-font); color: var(--cv-text-muted); margin-top: 3px; }
.cvx-cart__right { text-align: right; white-space: nowrap; }
.cvx-cart__price { font: 900 20px/1 var(--cv-font); letter-spacing: -.5px; color: #fff; }
.cvx-cart__price span { font: 600 13px var(--cv-font); color: var(--cv-text-secondary); }
.cvx-cart__remove { margin-top: 8px; background: none; border: none; color: #7a7a7a; font: 600 12px/1 var(--cv-font); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.cvx-cart__remove:hover { color: var(--cv-error); }

/* Plan toggle */
.cvx-load { margin-top: 18px; }
.cvx-load__label { font: 700 11px/1 var(--cv-font); letter-spacing: 1.5px; text-transform: uppercase; color: #9a9a9a; margin-bottom: 10px; }
.cvx-seg { display: flex; gap: 6px; background: #101010; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50px; padding: 6px; }
.cvx-co-card .seg { cursor: pointer; flex: 1; text-align: center; padding: 13px 10px; border-radius: 50px; font: 800 14px/1 var(--cv-font); color: #9a9a9a; background: transparent; border: none; transition: all .25s ease; display: flex; align-items: center; justify-content: center; gap: 8px; }
.cvx-co-card .seg.on { color: #141414; background: var(--cv-gold); box-shadow: 0 0 22px rgba(240, 194, 85, .35); }
.cvx-seg__save { font: 800 10px var(--cv-font); letter-spacing: .5px; padding: 3px 8px; border-radius: 50px; background: rgba(46, 160, 102, .16); color: var(--cv-success); }
.cvx-co-card .seg.on .cvx-seg__save { background: rgba(20, 20, 20, .25); color: #141414; }
.cvx-load.is-loading { opacity: .55; pointer-events: none; }

/* Coupon */
.cvx-cart__coupon { margin-top: 18px; }
.cvx-cart__coupon-row { display: flex; gap: 10px; }
.cvx-co-card .cc-field { width: 100%; box-sizing: border-box; background: #141414; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; color: #fff; padding: 13px 15px; font: 400 15px/1.2 var(--cv-font); outline: none; transition: border-color .2s, background .2s; }
.cvx-co-card .cc-field:focus { border-color: var(--cv-gold); background: rgba(240, 194, 85, .06); }
.cvx-co-card .cc-field::placeholder { color: #6b6b6b; }
.cvx-co-card .apply-btn { cursor: pointer; flex-shrink: 0; padding: 0 20px; border-radius: 10px; border: 1px solid rgba(240, 194, 85, .5); background: transparent; color: var(--cv-gold); font: 700 13px/1 var(--cv-font); transition: background .2s, color .2s; }
.cvx-co-card .apply-btn:hover { background: var(--cv-gold); color: #141414; }

/* Summary */
.cvx-sum { margin-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.cvx-sum__row { display: flex; justify-content: space-between; font: 500 14px/1 var(--cv-font); color: #9a9a9a; }
.cvx-sum__val { color: #e6e6e6; }
.cvx-sum__row--discount { font: 600 14px/1 var(--cv-font); color: var(--cv-success); }
.cvx-sum__row--muted { font: 500 13px/1 var(--cv-font); color: #777; }
.cvx-sum__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 14px; margin-top: 2px; font: 800 15px/1 var(--cv-font); color: #fff; }
.cvx-sum__amt { font: 900 28px/1 var(--cv-font); letter-spacing: -1px; color: var(--cv-gold); }
.cvx-sum__permo { text-align: right; margin-top: 6px; font: 600 13px/1 var(--cv-font); color: var(--cv-success); }
.cvx-sum .woocommerce-Price-amount { color: inherit; }

/* Primary CTA */
.cvx-co-card .co-primary {
	cursor: pointer; width: 100%; box-sizing: border-box; padding: 17px 22px;
	border: none; border-radius: 50px; background: var(--cv-gold); color: #141414;
	font: 800 16px/1 var(--cv-font); box-shadow: 0 0 34px rgba(240, 194, 85, .36);
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	transition: transform .2s ease, box-shadow .2s ease; text-decoration: none;
}
.cvx-co-card .co-primary:hover { transform: translateY(-2px); box-shadow: 0 0 44px rgba(240, 194, 85, .5); color: #141414; }
/* Solid-gold buttons: force label AND icons black. The legacy `.woocommerce *`
   white rule paints the <i> icons white otherwise (it hits them directly, so
   inheriting #141414 from the button isn't enough). (0,3,0) beats its (0,1,0). */
.cvx-co-card .co-primary,
.cvx-co-card .co-primary i,
.cvx-co-card .co-primary span { color: #141414; }
.cvx-cart__checkout { margin-top: 24px; }

/* Trust chips */
.cvx-trust { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; font: 500 12px/1 var(--cv-font); color: #777; }
.cvx-trust i { color: var(--cv-gold); margin-right: 4px; }

/* Empty state */
.cvx-cart-empty { max-width: 460px; margin: 14px auto 0; text-align: center; }
.cvx-cart-empty__icon { width: 78px; height: 78px; margin: 0 auto 20px; border-radius: 50%; background: #1a1a1a; border: 1.5px dashed rgba(240, 194, 85, .4); display: flex; align-items: center; justify-content: center; }
.cvx-cart-empty__icon i { color: #6b6b6b; font-size: 34px; }
.cvx-cart-empty__title { font: 900 26px/1.1 var(--cv-font); letter-spacing: -.5px; color: #fff; margin: 0 0 8px; }
.cvx-cart-empty__text { font: 400 15px/1.6 var(--cv-font); color: #8f8f8f; margin: 0 0 24px; }
.cvx-cart-empty__cta { max-width: 280px; margin: 0 auto; }

.cvx-co-card .fadein { animation: coFade .4s cubic-bezier(.25,1,.5,1) both; }
@keyframes coFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Strip any Astra boxed-content surface on cart/checkout (our templates are
   self-contained full-width cards). */
body.woocommerce-cart .ast-separate-container .ast-article-single,
body.woocommerce-checkout .ast-separate-container .ast-article-single,
body.woocommerce-cart .ast-separate-container .site-content > .ast-container,
body.woocommerce-checkout .ast-separate-container .site-content > .ast-container {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ---- Cart mobile ---- */
@media (max-width: 680px) {
	.cvx-cart-page { padding: 24px 14px 60px; }
	.cvx-co-head { padding: 18px 20px; }
	.cvx-co-pad { padding: 22px 20px 30px; }
	.cvx-bar { padding: 26px 20px 22px; }
	.cvx-co-card .barbar { min-width: 24px; }
	.cvx-co-card .collarcap { width: 18px; }
	.cvx-bar__title { font-size: 22px; }
	.cvx-cart__item { gap: 12px; padding: 16px; }
	.cvx-cart__name { font-size: 15px; }
	.cvx-cart__price { font-size: 18px; }
}

/* -------------------------------------------------------------
   B. CHECKOUT
   ------------------------------------------------------------- */

/* The checkout reuses the .cvx-co-card shell from section A. */
.cvx-checkout { margin: 0; }

.cvx-co-head__secure { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--cv-font); color: #888; }
.cvx-co-head__secure i { color: var(--cv-gold); }

/* Step rail under the barbell */
.cvx-steps { display: flex; justify-content: space-between; max-width: 600px; margin: 0 auto; }
.cvx-co-card .coStep { font: 800 12px/1 var(--cv-font); letter-spacing: 1.5px; text-transform: uppercase; color: #5d5d5d; transition: color .3s ease; display: flex; align-items: center; gap: 6px; }
.cvx-co-card .coStep i { font-size: 9px; transition: transform .3s ease, color .3s ease; }
/* Cleared: muted grey, a touch lighter than "to come" — deliberately NOT gold,
   so only the live step reads gold and orientation is unambiguous. */
.cvx-co-card .coStep.done { color: #7a7a7a; }
.cvx-co-card .coStep.done i { color: rgba(240, 194, 85, .5); }
/* You are here: full gold, bolder, with a scaled-up dot — unmistakable. */
.cvx-co-card .coStep.act { color: var(--cv-gold); }
.cvx-co-card .coStep.act i { transform: scale(1.5); color: var(--cv-gold); }

/* Intro block */
.cvx-co__intro { text-align: center; margin-bottom: 30px; }
.cvx-co__eyebrow { font: 700 11px/1 var(--cv-font); letter-spacing: 3px; text-transform: uppercase; color: #777; margin-bottom: 10px; }
/* Eyebrow relocated above the barbell (its own panel, not the centered intro). */
.cvx-co__eyebrow--bar { text-align: center; margin-bottom: 14px; }
.cvx-co__title { font: 900 32px/1.06 var(--cv-font); letter-spacing: -1px; color: #fff; margin: 0 0 6px; }
.cvx-co__sub { font: 400 15px/1.5 var(--cv-font); color: #8f8f8f; margin: 0; }

/* Stages */
/* Stage entrance is JS-driven (store.js) for a direction-aware slide + body
   height morph. Reduced-motion / no-WAAPI browsers just get an instant swap. */
.cvx-stage { max-width: 560px; margin: 0 auto; text-align: left; }
.cvx-stage[hidden] { display: none !important; }

/* Restyle WooCommerce's own billing fields to the mockup's .cc-field look. */
.cvx-co__fields .form-row { margin: 0 0 16px; padding: 0; display: block; }
.cvx-co__fields .form-row label,
.cvx-co__shipping label {
	display: block; font: 600 12px/1 var(--cv-font); letter-spacing: .3px;
	color: #9a9a9a; margin-bottom: 8px;
}
.cvx-co__fields label .required { color: var(--cv-gold); border: 0; text-decoration: none; }
.cvx-co__fields .form-row input.input-text,
.cvx-co__fields .form-row textarea,
.cvx-co__fields .form-row select,
.cvx-co__shipping input.input-text,
.cvx-co__shipping select {
	width: 100%; box-sizing: border-box; background: #141414;
	border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; color: #fff;
	padding: 14px 15px; font: 400 15px/1.2 var(--cv-font); outline: none;
	transition: border-color .2s, background .2s;
}
.cvx-co__fields .form-row input.input-text:focus,
.cvx-co__fields .form-row textarea:focus,
.cvx-co__fields .form-row select:focus {
	border-color: var(--cv-gold); background: rgba(240, 194, 85, .06);
}
.cvx-co__fields .form-row input.input-text::placeholder { color: #6b6b6b; }
.cvx-co__fields .form-row-first, .cvx-co__fields .form-row-last { width: 48.5%; float: left; }
.cvx-co__fields .form-row-last { float: right; }
.cvx-co__fields::after { content: ''; display: table; clear: both; }
.cvx-co__fields .woocommerce-invalid input.input-text,
.cvx-co__fields .woocommerce-invalid select { border-color: var(--cv-error); }

/* select2 (country/state) restyled to match */
.cvx-co__fields .select2-container--default .select2-selection--single {
	background: #141414; border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 10px; height: 49px;
}
.cvx-co__fields .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #fff; line-height: 49px; padding-left: 15px; font: 400 15px/49px var(--cv-font);
}
.cvx-co__fields .select2-container--default .select2-selection--single .select2-selection__arrow { height: 47px; }

/* Payment methods (real gateways) */
.cvx-payment .payment_methods { list-style: none; margin: 0; padding: 0; }
.cvx-payment .payment_methods > li {
	background: #141414; border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px; padding: 15px 16px; margin-bottom: 10px;
	transition: border-color .2s, background .2s;
}
.cvx-payment .payment_methods > li:hover { border-color: rgba(240, 194, 85, .45); }
.cvx-payment .payment_methods > li label {
	display: inline-flex; align-items: center; gap: 10px;
	font: 700 14px/1 var(--cv-font); color: #e6e6e6; cursor: pointer; margin: 0;
}
.cvx-payment .payment_methods > li input[type="radio"] { accent-color: var(--cv-gold); }
.cvx-payment .payment_box {
	margin: 14px 0 2px; padding: 14px; background: #0f0f0f;
	border: 1px solid rgba(255, 255, 255, .07); border-radius: 10px;
	font: 400 13px/1.5 var(--cv-font); color: #9a9a9a;
}
.cvx-payment .payment_box p:last-child { margin-bottom: 0; }
/* Single gateway: strip our list chrome so Stripe's own framed element is the
   only box on screen. The radio and .payment_box still render — Woo reads the
   radio to pick the gateway, and Stripe mounts inside .payment_box — they're
   just not drawn. Add a second gateway and the list chrome comes back.

   SPECIFICITY: WooCommerce core ships light defaults at (1,2,1) —
   `.woocommerce-checkout #payment div.payment_box{background-color:#dcd7e2;color:#515151}`
   and a padded, bottom-bordered ul.payment_methods. Matching (1,2,1) is not
   enough (core's stylesheet loads after ours, so an equal-specificity tie goes
   to core and the panel renders lavender-white). Prefixing `.woocommerce-checkout`
   takes these to (1,3,1) so they win on merit, without !important.

   Applies at every width: the old skin only flattened these under a mobile media
   query, which is why desktop showed nested boxes and mobile didn't. */
.woocommerce-checkout #payment.cvx-payment--single ul.payment_methods {
	border: 0; padding: 0; margin: 0; background: none;
}
.woocommerce-checkout #payment.cvx-payment--single ul.payment_methods > li {
	background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
}
.woocommerce-checkout #payment.cvx-payment--single ul.payment_methods > li:hover { border: 0; background: none; }
.woocommerce-checkout #payment.cvx-payment--single ul.payment_methods > li > input[type="radio"],
.woocommerce-checkout #payment.cvx-payment--single ul.payment_methods > li > label[for^="payment_method_"] { display: none; }
.woocommerce-checkout #payment.cvx-payment--single div.payment_box {
	background: none; background-color: transparent; border: 0; border-radius: 0;
	padding: 0; margin: 0; width: auto; color: var(--cv-text-secondary); font-size: inherit;
}
.woocommerce-checkout #payment.cvx-payment--single div.payment_box::before { display: none; }
/* Gateway description (in test mode, the 4242 card notice) — a note, not a panel. */
.woocommerce-checkout #payment.cvx-payment--single div.payment_box > p:first-child {
	font: 400 12px/1.5 var(--cv-font); color: #777; margin: 0 0 14px;
}
.woocommerce-checkout #payment.cvx-payment--single div.payment_box a { color: var(--cv-gold); }
/* Stripe injects bare <fieldset>s (the UPE form, and the "save payment info"
   checkbox), and a fieldset carries a browser-default border. The element inside
   is already framed, so strip every fieldset in the payment area rather than
   chase them by id — the save-payment one has no class to target. */
.cvx-payment fieldset {
	padding: 0; border: 0; background: transparent; margin: 0; min-width: 0;
}
/* The save-payment checkbox lives in its own bare fieldset after the method
   list; give it room so it isn't crammed against "More". :not() spares the UPE
   form fieldset, which mounts flush inside the card frame. */
.cvx-payment fieldset:not(#wc-stripe-upe-form) { margin-top: 18px; }
.cvx-payment #wc-stripe-upe-form,
.cvx-payment .wc-stripe-upe-element {
	padding: 0; border: 0; background: transparent; margin: 0;
}

/* Stripe's "save card for next time" row — no box, just the line. */
.cvx-payment .woocommerce-SavedPaymentMethods,
.cvx-payment ul.woocommerce-SavedPaymentMethods {
	list-style: none; margin: 14px 0 0; padding: 0;
	background: none; border: 0; box-shadow: none;
}
.cvx-payment .woocommerce-SavedPaymentMethods > li,
.cvx-payment ul.woocommerce-SavedPaymentMethods > li {
	background: none; border: 0; border-radius: 0; padding: 0; margin: 0; list-style: none;
}
.cvx-payment .woocommerce-SavedPaymentMethods label {
	font: 500 13px/1.4 var(--cv-font); color: #9a9a9a; display: inline; margin: 0;
}
.cvx-payment .woocommerce-SavedPaymentMethods input[type="checkbox"],
.cvx-payment .woocommerce-SavedPaymentMethods input[type="radio"] { accent-color: var(--cv-gold); }
/* The "save payment information" checkbox row Stripe appends after the element. */
.cvx-payment .wc-stripe-new-payment-method-checkbox,
.cvx-payment p.form-row.woocommerce-SavedPaymentMethods-saveNew,
.cvx-payment .woocommerce-SavedPaymentMethods-saveNew {
	background: none; border: 0; padding: 0; margin: 14px 0 0;
}

.cvx-co__stripe-note {
	display: flex; align-items: center; gap: 8px; justify-content: center;
	margin-top: 22px; font: 500 12px/1.4 var(--cv-font); color: #777;
}
.cvx-co__stripe-note i { color: var(--cv-gold); }

/* Confirm: order review (product + totals) */
.cvx-review table.shop_table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.cvx-review table.shop_table thead { display: none; }
.cvx-review .cart_item td {
	background: radial-gradient(120% 90% at 80% 0%, #26200f, #141414 72%);
	border: 1px solid rgba(240, 194, 85, .2); border-top-width: 1px;
	padding: 18px 20px; vertical-align: middle;
}
.cvx-review .cart_item td:first-child { border-right: 0; border-radius: 16px 0 0 16px; }
.cvx-review .cart_item td:last-child { border-left: 0; border-radius: 0 16px 16px 0; text-align: right; }
.cvx-review .product-name { font: 800 16px/1.2 var(--cv-font); color: #fff; }
.cvx-review .product-total { font: 900 20px/1 var(--cv-font); letter-spacing: -.5px; color: #fff; white-space: nowrap; }
.cvx-review tfoot th { text-align: left; font: 700 14px/1 var(--cv-font); color: #9a9a9a; padding: 10px 4px; border: 0; }
.cvx-review tfoot td { text-align: right; font: 600 14px/1 var(--cv-font); color: #e6e6e6; padding: 10px 4px; border: 0; }
.cvx-review tfoot .order-total th { font: 700 14px/1 var(--cv-font); color: #9a9a9a; padding-top: 16px; }
.cvx-review tfoot .order-total td { padding-top: 16px; }
.cvx-review tfoot .order-total .woocommerce-Price-amount {
	font: 900 26px/1 var(--cv-font); letter-spacing: -1px; color: var(--cv-gold);
}

/* Confirm: relocated coupon — toggle stripped, field shown directly
   (woocommerce/checkout/form-coupon.php override). */
.cvx-co__coupon { margin: 0 0 18px; }
.cvx-coupon { margin: 0; }
.cvx-coupon__row { display: flex; gap: 10px; margin: 0; }
.cvx-coupon .input-text {
	flex: 1; width: 100%; box-sizing: border-box; background: #141414;
	border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; color: #fff;
	padding: 13px 15px; font: 400 15px/1.2 var(--cv-font); outline: none;
	transition: border-color .2s, background .2s;
}
.cvx-coupon .input-text:focus { border-color: var(--cv-gold); background: rgba(240, 194, 85, .06); }
.cvx-coupon .input-text::placeholder { color: #6b6b6b; }
.cvx-coupon__apply {
	flex-shrink: 0; padding: 0 20px; border-radius: 10px; border: 1px solid rgba(240, 194, 85, .5);
	background: transparent; color: var(--cv-gold); font: 700 13px/1 var(--cv-font); cursor: pointer;
	transition: background .2s, color .2s;
}
.cvx-coupon__apply:hover { background: var(--cv-gold); color: #141414; }

/* Confirm: recap rows */
.cvx-recap {
	display: flex; flex-direction: column; gap: 2px; background: #141414;
	border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 6px 18px;
}
.cvx-recap__row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cvx-recap__row:last-child { border-bottom: 0; }
.cvx-recap__row--top { align-items: flex-start; }
.cvx-recap__row > i { color: var(--cv-gold); font-size: 18px; flex-shrink: 0; }
.cvx-recap__row--top > i { margin-top: 2px; }
.cvx-recap__body { flex: 1; min-width: 0; }
.cvx-recap__label { font: 600 11px/1 var(--cv-font); letter-spacing: .5px; text-transform: uppercase; color: #777; margin-bottom: 4px; }
.cvx-recap__val { font: 500 14px/1.5 var(--cv-font); color: #e6e6e6; white-space: pre-line; overflow-wrap: anywhere; }
.cvx-recap__val.is-empty { color: #5d5d5d; }
.cvx-recap__edit { background: none; border: none; color: var(--cv-gold); font: 700 12px/1 var(--cv-font); cursor: pointer; flex-shrink: 0; }

/* Nav */
.cvx-co__nav { max-width: 560px; margin: 34px auto 0; }
.cvx-co__navrow { display: flex; align-items: center; gap: 14px; }
/* The nav buttons carry an explicit display (inline-flex), which overrides the
   [hidden] attribute's UA display:none — so without this the "Continue" button
   stays visible on the Confirm stage and collides with Place Order. */
.cvx-co__nav [hidden] { display: none !important; }
.cvx-co-card .co-back {
	cursor: pointer; padding: 16px 24px; border-radius: 50px; background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .16); color: #cfcfcf; font: 700 15px/1 var(--cv-font);
	display: inline-flex; align-items: center; gap: 8px;
	transition: border-color .2s, color .2s; flex-shrink: 0;
}
.cvx-co-card .co-back:hover { border-color: rgba(255, 255, 255, .4); color: #fff; }
.cvx-co__nav .co-primary { flex: 1; width: auto; }
/* Stage 2: Place Order fills the row next to Back, with the privacy/terms text
   stacked small BELOW it (column-reverse — the button is last in the DOM). */
.cvx-co__place { flex: 1; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 10px; }
.cvx-co__place .co-primary { width: 100%; }
.cvx-co__place .woocommerce-privacy-policy-text,
.cvx-co__place .woocommerce-privacy-policy-text p { margin: 0; font: 400 11px/1.5 var(--cv-font); color: #777; text-align: center; }
.cvx-co__place .woocommerce-privacy-policy-text a { color: var(--cv-gold); }
.cvx-co__totalline { text-align: center; font: 800 13px/1 var(--cv-font); color: #666; margin-top: 18px; }
.cvx-co__nav[hidden], .cvx-co__place[hidden], .cvx-co__intro[hidden] { display: none !important; }

/* Terms checkbox, if enabled */
.cvx-co__place .woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; font: 400 13px/1.5 var(--cv-font); color: #9a9a9a; }

/* Processing — spinning 20 KG plate */
.cvx-co__processing { max-width: 520px; margin: 20px auto 0; text-align: center; animation: coFade .45s cubic-bezier(.25,1,.5,1) both; }
.cvx-co__processing[hidden] { display: none !important; }
.cv-plate-glow {
	width: 150px; height: 150px; border-radius: 50%;
	background: radial-gradient(circle, rgba(240, 194, 85, .28), transparent 68%);
	display: flex; align-items: center; justify-content: center; margin: 0 auto;
	animation: cvPlatePulse 1.15s ease-in-out infinite;
}
.cv-plate-spin { animation: cvPlateSpin 1.15s cubic-bezier(.45,.05,.55,.95) infinite; transform-origin: 50% 50%; }
@keyframes cvPlateSpin { to { transform: rotate(360deg); } }
@keyframes cvPlatePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.cvx-co__proc-title { font: 900 26px/1.1 var(--cv-font); letter-spacing: -.8px; color: #fff; margin: 26px 0 8px; }
.cvx-co__proc-sub { font: 400 15px/1.6 var(--cv-font); color: #8f8f8f; margin: 0; }

/* Woo blocks the form with its own overlay during submit; we show the plate instead. */
.cvx-checkout .blockUI.blockOverlay { display: none !important; }

/* Woo prepends validation notices to <form>, i.e. above the card. Centre them. */
.cvx-checkout .woocommerce-NoticeGroup { max-width: 920px; margin: 0 auto 16px; padding: 0 20px; }

/* Order received ("Bar's loaded. You're in.") */
.cvx-done { max-width: 520px; margin: 10px auto 0; text-align: center; animation: coFade .45s cubic-bezier(.25,1,.5,1) both; }
.cvx-done__icon {
	width: 82px; height: 82px; margin: 0 auto 22px; border-radius: 50%;
	background: var(--cv-gold-wash); border: 2px solid var(--cv-gold);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 40px rgba(240, 194, 85, .4);
}
.cvx-done__icon i { color: var(--cv-gold); font-size: 38px; }
.cvx-done__icon--fail { background: rgba(255, 107, 107, .12); border-color: var(--cv-error); box-shadow: 0 0 40px rgba(255, 107, 107, .3); }
.cvx-done__icon--fail i { color: var(--cv-error); }
.cvx-done__title { font: 900 30px/1.05 var(--cv-font); letter-spacing: -1px; color: #fff; margin: 0 0 10px; }
.cvx-done__text { font: 400 15px/1.6 var(--cv-font); color: #8f8f8f; margin: 0 0 26px; }
.cvx-done__meta {
	display: flex; flex-direction: column; gap: 2px; background: #141414;
	border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px;
	padding: 4px 18px; margin-bottom: 26px; text-align: left;
}
.cvx-done__meta-row { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cvx-done__meta-row:last-child { border-bottom: 0; }
.cvx-done__meta-row span { font: 600 11px/1 var(--cv-font); letter-spacing: .5px; text-transform: uppercase; color: #777; }
.cvx-done__meta-row strong { font: 800 15px/1 var(--cv-font); color: #e6e6e6; }
.cvx-done__meta-row .woocommerce-Price-amount { color: var(--cv-gold); }
.cvx-done__actions { max-width: 280px; margin: 0 auto; }
.cvx-done .woocommerce-order-overview,
.cvx-done .woocommerce-thankyou-order-details { display: none; }

/* ---- Checkout mobile ---- */
@media (max-width: 680px) {
	.cvx-co__title { font-size: 26px; }
	.cvx-co__navrow { flex-wrap: wrap; }
	.cvx-co-card .co-back { width: 100%; justify-content: center; }
	.cvx-co__nav .co-primary, .cvx-co__place { flex: 1 0 100%; }
	.cvx-steps { max-width: 100%; }
	.cvx-co-card .coStep { font-size: 10px; letter-spacing: .8px; gap: 4px; }
	.cvx-co__fields .form-row-first, .cvx-co__fields .form-row-last { width: 100%; float: none; }
	.cvx-review .cart_item td { padding: 14px 16px; }
	.cvx-recap { padding: 6px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.cv-plate-spin, .cv-plate-glow { animation: none; }
}

/* -------------------------------------------------------------
   C. LANDING / FRONT PAGE (one-page store)
   Ported from the Premium mockup; scoped under .cvx-home.
   ------------------------------------------------------------- */

@keyframes cvmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cvfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes cvpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes fldraw { to { stroke-dashoffset: 0; } }
@keyframes flbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes cvlogin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The hatch below is a centred 100vw band. 100vw counts the scrollbar gutter, so it
   overhangs the viewport by ~17px; clip that rather than let it scroll sideways.
   `clip` (not `hidden`) keeps overflow-y visible and creates no scroll container,
   so position:fixed children (buy bar, cart drawer) are unaffected. */
.cvx-home { overflow-x: clip; }

.cvx-home .wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* Diagonal gym-vibe hatch, full-bleed behind the flow ribbon, faded top and bottom. */
.cvx-home .cvx-flow-hatch {
	position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
	width: 100vw; z-index: 0; pointer-events: none;
	background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 9px);
	-webkit-mask: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
	mask: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.cvx-home .goldbtn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--cv-gold); color: #1a1a1a; border: none; border-radius: 50px;
	font: 700 15px var(--cv-font); padding: 15px 30px; cursor: pointer;
	transition: transform .3s ease, box-shadow .3s ease; white-space: nowrap; text-decoration: none;
}
.cvx-home .goldbtn:hover { transform: translateY(-2px); box-shadow: 0 0 36px var(--cv-gold-glow); color: #1a1a1a; }

/* Scroll reveal (hidden only when JS is live — progressive enhancement) */
.cv-js .cvx-home [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .7s var(--cv-ease-out, cubic-bezier(.25,1,.5,1)), transform .7s var(--cv-ease-out, cubic-bezier(.25,1,.5,1)); }
.cvx-home [data-reveal].rv-in { opacity: 1; transform: none; }

/* Marquee */
.cvx-home .mq:hover .mqrow { animation-play-state: paused; }

/* Immersive flow (hidden only when JS is live) */
.cv-js .cvx-home [data-flowrev] { opacity: 0; transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }
.cvx-home [data-flowrev="l"] { transform: translateX(-52px); }
.cvx-home [data-flowrev="r"] { transform: translateX(52px); }
.cvx-home [data-flowrev].flin { opacity: 1; transform: none; }
.cvx-home [data-flowrev][data-d="1"] { transition-delay: .12s; }
.cvx-home [data-flowrev][data-d="2"] { transition-delay: .24s; }
.cvx-home .fl-float { animation: flbob 7s ease-in-out infinite; }
.cvx-home .fl-chart .cline { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.cvx-home .fl-station.flin .fl-chart .cline { animation: fldraw 1.9s cubic-bezier(.25,1,.5,1) .3s forwards; }
.cvx-home .cov-fill { transition: width .12s linear; }

/* Product pass card */
.cvx-home .pass { transition: box-shadow .5s cubic-bezier(.25,1,.5,1), border-color .5s ease; }
.cvx-home .pass-seg__btn { color: var(--cv-text-secondary); transition: color .3s ease; }
.cvx-home .pass-seg__btn.is-active { color: #1a1a1a; }
.cvx-home .pass-seg__thumb { transform: translateX(0); }
.cvx-home .pass.is-month .pass-seg__thumb { transform: translateX(100%); }
.cvx-home .pass:not(.is-month) .pass-seg__save { display: none; }

/* Get started timeline */
.cvx-home .gs-tl { position: relative; max-width: 760px; margin: 0 auto; }
.cvx-home .gs-line { position: absolute; left: 50%; top: 12px; bottom: 12px; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, rgba(240,194,85,.5) 12%, rgba(240,194,85,.5) 88%, transparent); }
.cvx-home .gs-row { position: relative; display: grid; grid-template-columns: 1fr 100px 1fr; align-items: center; margin-bottom: 80px; }
.cvx-home .gs-row:last-child { margin-bottom: 0; }
.cvx-home .gs-node { display: flex; justify-content: center; }
.cvx-home .gs-node .n { width: 64px; height: 64px; border-radius: 50%; background: var(--cv-gold); display: flex; align-items: center; justify-content: center; font: 800 26px var(--cv-font); color: #1a1a1a; box-shadow: 0 0 0 4px var(--cv-dark-1), 0 0 28px rgba(240,194,85,.38); }
.cvx-home .gs-a { text-align: right; padding-right: 10px; }
.cvx-home .gs-b { text-align: left; padding-left: 10px; }
.cvx-home .gs-a p { margin-left: auto; }
.cvx-home .gs-c h3 { font: 700 23px var(--cv-font); letter-spacing: -.4px; color: #fff; margin: 0 0 9px; }
.cvx-home .gs-c p { max-width: 320px; font: 400 15px/1.65 var(--cv-font); color: var(--cv-text-secondary); margin: 0; }

/* Logbook — two-page book spread.
   .mpage is the column; .logpage is the leaf (flex stack + page-turn animation).
   Desktop: page 0 left, page 1 right, page 2 left on the second spread. */
.cvx-home .mbook { display: grid; grid-template-columns: 1fr 46px 1fr; align-items: stretch; }
.cvx-home .mpage { min-width: 0; display: flex; flex-direction: column; }
.cvx-home .mpage-l { padding-right: 22px; }
.cvx-home .mpage-r { padding-left: 22px; }
.cvx-home .mrings { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 34px 0; }
.cvx-home .mhole { width: 15px; height: 15px; border-radius: 50%; background: #0d0a05; border: 1px solid rgba(240,194,85,.28); box-shadow: inset 0 2px 3px rgba(0,0,0,.9), 0 1px 0 rgba(240,194,85,.12); }
.cvx-home .logpage { animation: cvlogin .45s cubic-bezier(.25,1,.5,1) both; display: flex; flex-direction: column; gap: 14px; padding-top: 24px; }
.cvx-home .logpage[hidden] { display: none !important; }
.cvx-home .mlog-card { background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .06); border-radius: 16px; padding: 20px 22px; }
.cvx-home .mlog-arrow { width: 30px; height: 30px; border-radius: 4px; border: 1px dashed rgba(240,194,85,.3); background: transparent; color: var(--cv-gold); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; }
.cvx-home .mlog-arrow[disabled] { opacity: .35; pointer-events: none; }
.cvx-home .mlog-dot { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; letter-spacing: .5px; cursor: pointer; padding: 6px 12px 5px; border: none; background: transparent; color: var(--cv-text-muted); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.cvx-home .mlog-dot.is-active { color: var(--cv-gold); border-bottom-color: var(--cv-gold); }

/* FAQ accordion */
.cvx-home .cvx-faq__card { border: 1px solid var(--cv-border); background: var(--cv-dark-1); border-radius: 14px; transition: border-color .3s ease, box-shadow .3s ease; }
.cvx-home .cvx-faq__card.is-open { border-color: rgba(240,194,85,.45); box-shadow: 0 0 26px rgba(240,194,85,.10); }
.cvx-home .cvx-faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: none; border: none; padding: 20px 22px; cursor: pointer; text-align: left; }
.cvx-home .cvx-faq__chip { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cv-gold-wash); transition: background .3s ease; }
.cvx-home .cvx-faq__chip i { color: var(--cv-gold); font-size: 15px; transition: transform .3s ease; }
.cvx-home .cvx-faq__card.is-open .cvx-faq__chip { background: var(--cv-gold); }
.cvx-home .cvx-faq__card.is-open .cvx-faq__chip i { color: #1a1a1a; transform: rotate(45deg); }
.cvx-home .cvx-faq__a { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .42s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
.cvx-home .cvx-faq__card.is-open .cvx-faq__a { max-height: 320px; opacity: 1; }

/* Sticky buy bar */
.cvx-home .cvx-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(18,18,18,.94); backdrop-filter: blur(14px); border-top: 1px solid var(--cv-border); transform: translateY(110%); transition: transform .4s cubic-bezier(.25,1,.5,1); }
.cvx-home .cvx-buybar.is-visible { transform: translateY(0); }
.cvx-home .cvx-buybar img { height: 26px !important; width: auto !important; max-width: 26px; }
.cvx-home .bar-btn { padding: 11px 22px; font-size: 14px; }

/* Cart drawer — hosted in a fixed, overflow-clipped layer so the off-canvas
   panel can never add horizontal scroll to the page. */
.cvx-home .cvx-drawer-host { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 120; }
.cvx-home .cvx-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 1; }
.cvx-home .cvx-scrim.is-open { opacity: 1; pointer-events: auto; }
.cvx-home .cvx-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw; background: var(--cv-dark-2); border-left: 1px solid var(--cv-border); box-shadow: -30px 0 70px rgba(0,0,0,.55); transform: translateX(103%); transition: transform .4s cubic-bezier(.25,1,.5,1); z-index: 2; display: flex; flex-direction: column; pointer-events: auto; }
.cvx-home .cvx-drawer.is-open { transform: translateX(0); }
.cvx-home .cvx-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 24px 26px; border-bottom: 1px solid var(--cv-border); }
.cvx-home .cvx-drawer__x { background: none; border: none; color: var(--cv-text-secondary); font-size: 24px; cursor: pointer; line-height: 1; }
.cvx-home .cvx-drawer__body { flex: 1; overflow-y: auto; }
.cvx-home .cvx-drawer__foot { padding: 22px 26px; border-top: 1px solid var(--cv-border); }
.cvx-home .cvx-drawer__item { display: flex; gap: 14px; padding: 22px 26px; border-bottom: 1px solid var(--cv-border); }
.cvx-home .cvx-drawer__item img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex-shrink: 0; border: 1px solid var(--cv-border); }

/* prefers-reduced-motion: drop the flourish, keep content visible */
@media (prefers-reduced-motion: reduce) {
	.cvx-home [data-reveal], .cvx-home [data-flowrev] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.cvx-home .fl-float, .cvx-home .hero-phone { animation: none !important; }
}

/* ---- Landing mobile ---- */
@media (max-width: 760px) {
	.cvx-home .hide-sm { display: none !important; }
	.cvx-home .wrap { padding: 0 18px; }
	.cvx-home .hero { min-height: auto !important; align-items: flex-start !important; }
	.cvx-home .hero .wrap { padding-top: 106px !important; padding-bottom: 54px !important; text-align: center; }
	.cvx-home .rgrid, .cvx-home .hero-grid { grid-template-columns: 1fr !important; grid-template-areas: 'top' 'phone' 'bottom' !important; grid-template-rows: auto auto auto !important; }
	.cvx-home .hero-copy p { margin-left: auto !important; margin-right: auto !important; }
	.cvx-home .hero-cta { justify-content: center !important; }
	.cvx-home .hero-phone { width: 250px !important; }
	/* Ribbon stays visible on mobile — re-pathed down the left gutter in store.js build().
	   Indent the stations so the spine has room to run without crossing the card. */
	.cvx-home .fl-station { min-height: auto !important; padding: 52px 0 52px 30px !important; justify-content: flex-start !important; }
	.cvx-home .fl-card, .cvx-home .fl-card.fl-card-wide { width: 100% !important; }
	/* Reveal upward on mobile instead of sideways, so the ±52px slide can't cause horizontal scroll. */
	.cvx-home [data-flowrev="l"], .cvx-home [data-flowrev="r"] { transform: translateY(28px) !important; }
	.cvx-home [data-flowrev].flin { transform: none !important; }
	/* Logbook: one page at a time on phones — no spread, no spine. */
	.cvx-home .mbook { grid-template-columns: 1fr; }
	.cvx-home .mpage, .cvx-home .mpage-l, .cvx-home .mpage-r { padding-left: 0; padding-right: 0; }
	.cvx-home .mrings { display: none; }
	/* Issue 1: keep bodymap + coverage on one row; shrink the map so both fit a phone width. */
	.cvx-home .fl-s2row { gap: 16px !important; }
	.cvx-home .fl-s2row .fl-float img { width: 120px !important; }
	.cvx-home .pass { flex-direction: column !important; }
	.cvx-home .pass-perf, .cvx-home .pass-notch { display: none !important; }
	.cvx-home .pass-mnotch { display: block !important; }
	/* The stub needs a floor: the rotated PREMIUM watermark is ~158px tall, so
	   without min-height it collapses and slices the watermark top and bottom.
	   Design says 210px; +30px gives the watermark more breathing room. */
	.cvx-home .pass-cardwrap { padding: 36px 26px !important; min-height: 240px; }
	.cvx-home .pass-body { padding: 22px 26px 32px !important; border-top: 2px dashed rgba(255,255,255,.18); }
	.cvx-home .gs-line { display: none !important; }
	.cvx-home .gs-row { grid-template-columns: 1fr !important; justify-items: center !important; row-gap: 14px !important; margin-bottom: 52px !important; }
	.cvx-home .gs-node { grid-column: 1 !important; grid-row: 1 !important; }
	.cvx-home .gs-c { grid-column: 1 !important; grid-row: 2 !important; text-align: center !important; padding: 0 !important; }
	.cvx-home .gs-c p { margin-left: auto !important; margin-right: auto !important; }
	.cvx-home .gs-img { grid-column: 1 !important; grid-row: 3 !important; justify-content: center !important; padding: 0 !important; }
	.cvx-home .faqgrid { grid-template-columns: 1fr !important; gap: 32px !important; }
	.cvx-home .faqhead { position: static !important; }

	/* Logbook: wrap / shrink content so it stays inside the card */
	.cvx-home .mlog { padding: 26px 20px !important; }
	.cvx-home .mlog-live, .cvx-home .mlog-prog { flex-wrap: wrap !important; }
	.cvx-home .mlog-prog img { width: 52px !important; height: 52px !important; }
	.cvx-home .mlog-rank { flex-wrap: wrap; }
	.cvx-home .mlog-rank img { width: 50px !important; height: 50px !important; }
	.cvx-home .mlog-share { margin-left: 0 !important; }

	/* Get Started: scale the overlapping program-card stacks to fit */
	.cvx-home .gs-grp { transform: scale(.72); transform-origin: top center; margin: 0 auto -56px !important; }
	.cvx-home .gs-img { width: 100%; }
	/* Clip only the stacks (steps 2-3). Step 1's wrapper holds the store badges,
	   and the gold Google Play badge has a 25px glow that hidden would cut off. */
	.cvx-home .gs-img:has(.gs-grp) { overflow: hidden; }

	/* Sticky bar: drop the name block, let price + Subscribe fill the width */
	.cvx-home .cvx-buybar .bar-inner { padding: 12px 16px !important; gap: 10px !important; }
	.cvx-home .cvx-buybar .bar-inner > div:first-child { display: none !important; }
	.cvx-home .cvx-buybar .bar-inner > div:last-child { flex: 1; justify-content: space-between; }
	.cvx-home .cvx-buybar .bar-btn { padding: 10px 16px !important; font-size: 13px !important; }
}

/* -------------------------------------------------------------
   D. DASHBOARD  (page-dashboard.php)
   -------------------------------------------------------------
   Ported from new design v2/project/ChalkVerse Dashboard.dc.html.
   Sidebar + main app shell; values populated by auth-ui.js from the
   Firestore users/{uid} doc. Sits under the fixed site navbar, so the
   shell carries top padding to clear it.
   ------------------------------------------------------------- */

/* Small pill-button size modifier (works with .cvx-btn-gold / .cvx-btn-out) */
.cvx-btn-sm { padding: 10px 20px; font-size: 13px; }

.cvx-dash-shell {
	display: flex;
	min-height: 100vh;
	background: var(--cv-dark-1);
	font-family: var(--cv-font);
}

/* The [hidden] attribute is our JS show/hide switch. Several dashboard elements
   carry a class that sets `display` (.cvx-chip, .cvx-dash-lockrow), which as an
   author rule would otherwise beat the UA `[hidden]{display:none}`. Re-assert it. */
.cvx-dash-shell [hidden] { display: none !important; }

/* ---------- Sidebar ---------- */
.cvx-dash-side {
	width: 264px;
	flex-shrink: 0;
	background: var(--cv-dark-2);
	border-right: 1px solid var(--cv-border);
	display: flex;
	flex-direction: column;
	/* Sidebar fills full height (top:0); the top padding drops its content below
	   the fixed site navbar so the user chip isn't hidden behind it. */
	padding: 88px 20px 26px;
}
.cvx-dash-userchip {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 16px;
	background: var(--cv-dark-3);
	border: 1px solid var(--cv-border);
	border-radius: 14px;
	margin-bottom: 24px;
}
.cvx-dash-av {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--cv-dark-1);
	border: 2px solid var(--cv-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cv-gold);
	font: 800 18px var(--cv-font);
	flex-shrink: 0;
	text-transform: uppercase;
}
.cvx-dash-userchip__meta { min-width: 0; }
.cvx-dash-username { font: 700 .95rem var(--cv-font); color: #fff; }
.cvx-dash-handle { font: 500 .78rem var(--cv-font); color: var(--cv-text-muted); }

.cvx-dash-nav { display: flex; flex-direction: column; gap: 4px; }
.cvx-dash-navlink {
	padding: 11px 14px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--cv-text-secondary);
	font: 600 .92rem var(--cv-font);
	cursor: pointer;
	transition: .2s;
	background: none;
	border: none;
	width: 100%;
	text-align: left;
}
.cvx-dash-navlink i { font-size: 18px; }
.cvx-dash-navlink:hover { background: rgba(255,255,255,.04); color: #fff; }
.cvx-dash-navlink.is-on { background: var(--cv-gold-wash); color: var(--cv-gold); }
.cvx-dash-navlink.is-disabled { opacity: .45; cursor: default; }
.cvx-dash-navlink.is-disabled:hover { background: none; color: var(--cv-text-secondary); }
.cvx-dash-inapp { margin-left: auto; font: 700 .6rem var(--cv-font); letter-spacing: .5px; color: var(--cv-gold); }
.cvx-dash-divider { height: 1px; background: var(--cv-border); margin: 12px 8px; }
.cvx-dash-signout { margin-top: auto; padding-top: 20px; }
.cvx-dash-signout .cvx-dash-navlink { color: var(--cv-text-muted); }

/* ---------- Main ---------- */
.cvx-dash-main { flex: 1; padding: 88px 44px 40px; min-width: 0; max-width: 1000px; }
.cvx-dash-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 30px;
	flex-wrap: wrap;
	gap: 14px;
}
.cvx-dash-head--stack { display: block; }
.cvx-dash-eyebrow {
	font: 700 .72rem var(--cv-font);
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cv-gold);
	margin-bottom: 8px;
}
.cvx-dash-title { font: 800 2.1rem/1 var(--cv-font); color: #fff; margin: 0; letter-spacing: -.8px; }

/* Chips */
.cvx-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border-radius: 50px;
	font: 700 .7rem var(--cv-font);
	letter-spacing: .8px;
	text-transform: uppercase;
}
.cvx-chip--on { background: rgba(74,222,128,.13); color: #5fe08a; }
.cvx-chip--soft { background: var(--cv-gold-wash); color: var(--cv-gold); }

/* Rank strip */
.cvx-dash-rankstrip {
	background: linear-gradient(120deg, var(--cv-dark-2), var(--cv-dark-3));
	border: 1px solid var(--cv-border);
	border-radius: 14px;
	padding: 24px 26px;
	margin-bottom: 22px;
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}
.cvx-dash-rankmedal {
	width: 72px;
	height: 72px;
	border-radius: 14px;
	background: var(--cv-dark-1);
	border: 1px solid var(--cv-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 8px;
	box-shadow: 0 0 40px var(--cv-gold-glow);
}
.cvx-dash-rankmedal img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cvx-dash-rankbody { flex: 1; min-width: 240px; }
.cvx-dash-rankline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cvx-dash-rank { font: 800 1.15rem var(--cv-font); color: #fff; }
.cvx-dash-levelxp { font: 600 .85rem var(--cv-font); color: var(--cv-text-muted); }
.cvx-dash-xptrack {
	height: 9px;
	border-radius: 6px;
	background: var(--cv-dark-1);
	margin: 12px 0 8px;
	overflow: hidden;
}
.cvx-dash-xpfill {
	height: 100%;
	background: linear-gradient(90deg, #c9992f, var(--cv-gold));
	border-radius: 6px;
	transition: width .4s ease;
}
.cvx-dash-rankhint { font: 500 .82rem var(--cv-font); color: var(--cv-text-secondary); }

/* Stat tiles */
.cvx-dash-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 22px;
}
.cvx-dash-tile {
	background: var(--cv-dark-2);
	border: 1px solid var(--cv-border);
	border-radius: 12px;
	padding: 20px 22px;
	transition: .25s;
}
.cvx-dash-tile:hover { border-color: rgba(240,194,85,.3); box-shadow: 0 0 26px rgba(240,194,85,.08); }
.cvx-dash-tile__val { font: 800 1.7rem/1 var(--cv-font); color: #fff; letter-spacing: -.5px; }
.cvx-dash-tile__val--sm { font-size: 1.25rem; padding: 6px 0; }
.cvx-dash-tile__unit { font-size: .9rem; color: var(--cv-text-muted); font-weight: 700; margin-left: 4px; }
.cvx-dash-tile__lab {
	font: 700 .68rem var(--cv-font);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--cv-text-muted);
	margin-top: 9px;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Cards */
.cvx-dash-card {
	background: var(--cv-dark-2);
	border: 1px solid var(--cv-border);
	border-radius: 14px;
	padding: 28px 30px;
	margin-bottom: 18px;
}
.cvx-dash-card--danger { border-color: rgba(239,68,68,.25); }
.cvx-dash-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 10px;
}
.cvx-dash-card__title { display: flex; align-items: center; gap: 11px; }
.cvx-dash-card__title--mb { margin-bottom: 16px; }
.cvx-dash-card__title i { font-size: 22px; color: var(--cv-gold); }
.cvx-dash-card__title h3 { font: 700 1.15rem var(--cv-font); color: #fff; margin: 0; }
.cvx-dash-danger-ico { color: #ef6a6a !important; }

/* Subscription rows */
.cvx-dash-billgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.cvx-dash-lockrow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 0;
	border-bottom: 1px solid var(--cv-border);
}
.cvx-dash-lockrow__k { color: var(--cv-text-secondary); font-size: .9rem; }
.cvx-dash-lockrow__v { color: #fff; font-weight: 600; font-size: .92rem; }
.cvx-dash-lockrow__v--gold { color: var(--cv-gold); }
.cvx-dash-managerow { margin-top: 22px; }
.cvx-dash-note { font: 500 .85rem/1.5 var(--cv-font); color: var(--cv-text-secondary); margin: 0; }
#cvx-dash-cancel-web .cvx-dash-note { margin-bottom: 14px; max-width: 520px; }
.cvx-dash-freecopy { font: 500 .92rem/1.6 var(--cv-font); color: var(--cv-text-secondary); margin: 0 0 20px; max-width: 560px; }

.cvx-dash-applock {
	font: 500 .78rem var(--cv-font);
	color: var(--cv-text-muted);
	margin: 18px 2px 0;
	display: flex;
	align-items: center;
	gap: 7px;
}

/* Settings rows */
.cvx-dash-setrow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--cv-border);
}
.cvx-dash-setrow:last-child { border-bottom: none; padding-bottom: 0; }
.cvx-dash-setrow__k { color: var(--cv-text-secondary); font-size: .9rem; }
.cvx-dash-setrow__k--strong { color: #fff; font-weight: 600; font-size: .92rem; }
.cvx-dash-setrow__v { color: #fff; font-weight: 600; font-size: .92rem; }
.cvx-dash-setrow__sub { color: var(--cv-text-muted); font-size: .8rem; margin-top: 3px; }
.cvx-dash-setrow__sub.is-error { color: #ef6a6a; }
.cvx-dash-setrow__sub.is-ok { color: var(--cv-success); }

/* Danger zone */
.cvx-dash-dangerrow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.cvx-dash-dangercopy { font: 500 .88rem/1.55 var(--cv-font); color: var(--cv-text-secondary); margin: 0; max-width: 520px; }
.cvx-dash-dangerbtn {
	background: transparent;
	border: 1px solid rgba(239,68,68,.5);
	color: #ef6a6a;
	font: 700 .85rem var(--cv-font);
	padding: 10px 20px;
	border-radius: 50px;
	cursor: pointer;
	white-space: nowrap;
	transition: .2s;
	text-decoration: none;
	display: inline-block;
}
.cvx-dash-dangerbtn:hover { background: rgba(239,68,68,.12); border-color: #ef6a6a; color: #ef6a6a; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
	.cvx-dash-shell { flex-direction: column; }
	.cvx-dash-side {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--cv-border);
		padding: 76px 16px 10px;   /* top clears the fixed navbar */
	}
	.cvx-dash-userchip { display: none; }   /* profile card is desktop-only; mobile shows just the nav */
	.cvx-dash-nav { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
	.cvx-dash-nav .cvx-dash-navlink { width: auto; flex-shrink: 0; white-space: nowrap; }
	.cvx-dash-divider { display: none; }
	.cvx-dash-signout { display: none; }   /* site navbar already offers Sign Out on mobile */
	.cvx-dash-main { padding: 24px 18px 40px; }
	.cvx-dash-title { font-size: 1.6rem; }
	.cvx-dash-tiles { grid-template-columns: repeat(2, 1fr); }
	.cvx-dash-billgrid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 480px) {
	.cvx-dash-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
	.cvx-dash-main { padding: 20px 14px 36px; }
}