/*
 * COURT WARRIOR COMMERCE DESIGN SYSTEM
 *
 * One language for cart, checkout, account and order. Everything below is a
 * primitive; nothing here is page-specific. If a screen needs a look, it uses
 * a primitive or a primitive gets extended -- it does not get its own patch.
 *
 * The WooCommerce overrides at the end are deliberately grouped and commented
 * rather than scattered, so the day Woo changes a class name there is one place
 * to look. Specificity is kept low and !important is used only where Woo ships
 * an inline style, which is the one case a stylesheet cannot otherwise win.
 */

:root {
	/* Brand. Black, white, and one yellow that means "act". */
	--cwx-ink:        #101113;
	--cwx-ink-2:      #3c4148;
	--cwx-ink-3:      #6b7280;
	--cwx-line:       #e3e6ea;
	--cwx-line-2:     #f1f3f5;
	--cwx-bg:         #ffffff;
	--cwx-bg-2:       #f7f8f9;
	--cwx-gold:       #ffd100;
	--cwx-gold-ink:   #101113;
	--cwx-good:       #12805c;
	--cwx-good-bg:    #e8f5f0;
	--cwx-warn:       #8a5a00;
	--cwx-warn-bg:    #fff6e0;
	--cwx-stop:       #a4262c;
	--cwx-stop-bg:    #fdeced;

	/* Spacing rhythm: a 4px base, used in steps rather than arbitrary values. */
	--cwx-1: 4px;  --cwx-2: 8px;  --cwx-3: 12px; --cwx-4: 16px;
	--cwx-5: 24px; --cwx-6: 32px; --cwx-7: 48px; --cwx-8: 64px;

	--cwx-r:      12px;   /* cards */
	--cwx-r-sm:   8px;    /* fields, small controls */
	--cwx-r-pill: 999px;

	--cwx-shadow:    0 1px 2px rgba(16,17,19,.04), 0 8px 24px rgba(16,17,19,.06);
	--cwx-shadow-sm: 0 1px 2px rgba(16,17,19,.06);

	--cwx-focus: 0 0 0 3px rgba(255,209,0,.45);

	--cwx-font: inherit;
	--cwx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------- TYPE ---- */

.cwx-display {
	font-size: clamp(34px, 6vw, 56px);
	line-height: .96;
	letter-spacing: -.02em;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--cwx-ink);
	margin: 0;
}
.cwx-h1 { font-size: clamp(26px,3.4vw,34px); line-height:1.12; font-weight:800; letter-spacing:-.01em; margin:0; color:var(--cwx-ink); }
.cwx-h2 { font-size: 20px; line-height:1.25; font-weight:700; margin:0; color:var(--cwx-ink); }
.cwx-h3 { font-size: 15px; line-height:1.3; font-weight:700; margin:0; color:var(--cwx-ink); }
.cwx-body { font-size: 15px; line-height:1.55; color:var(--cwx-ink-2); }
.cwx-support { font-size: 13.5px; line-height:1.5; color:var(--cwx-ink-3); }
.cwx-micro {
	font-size: 11px; line-height:1.4; font-weight:700;
	letter-spacing:.10em; text-transform:uppercase; color:var(--cwx-ink-3);
}
.cwx-rule { width:56px; height:4px; background:var(--cwx-gold); border-radius:2px; margin:var(--cwx-3) 0 var(--cwx-4); }
.cwx-mono { font-family: var(--cwx-mono); font-size:12.5px; letter-spacing:.02em; }

/* ------------------------------------------------------------- BUTTONS ---- */

.cwx-btn {
	--_bg: var(--cwx-ink);
	--_fg: #fff;
	--_bd: var(--cwx-ink);
	display:inline-flex; align-items:center; justify-content:center; gap:var(--cwx-2);
	min-height:48px; padding:0 var(--cwx-5);
	background:var(--_bg); color:var(--_fg); border:1.5px solid var(--_bd);
	border-radius:var(--cwx-r-pill);
	font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
	text-decoration:none; cursor:pointer; position:relative;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
	-webkit-appearance:none; appearance:none;
}
.cwx-btn:hover { transform: translateY(-1px); box-shadow: var(--cwx-shadow-sm); color:var(--_fg); }
.cwx-btn:active { transform: translateY(0); }
.cwx-btn:focus-visible { outline:none; box-shadow: var(--cwx-focus); }

.cwx-btn--gold      { --_bg: var(--cwx-gold); --_fg: var(--cwx-gold-ink); --_bd: var(--cwx-gold); }
.cwx-btn--secondary { --_bg: transparent; --_fg: var(--cwx-ink); --_bd: var(--cwx-ink); }
.cwx-btn--quiet     { --_bg: transparent; --_fg: var(--cwx-ink-2); --_bd: var(--cwx-line);  }
.cwx-btn--danger    { --_bg: transparent; --_fg: var(--cwx-stop); --_bd: var(--cwx-stop); }
.cwx-btn--block     { display:flex; width:100%; }
.cwx-btn--sm        { min-height:38px; padding:0 var(--cwx-4); font-size:12px; }

.cwx-btn[disabled], .cwx-btn.is-disabled {
	opacity:.42; cursor:not-allowed; transform:none; box-shadow:none;
}

/* Loading: the label stays put so the button does not resize and shift the
 * page under the cursor at the exact moment somebody is clicking it. */
.cwx-btn.is-loading { color:transparent !important; pointer-events:none; }
.cwx-btn.is-loading::after {
	content:''; position:absolute; width:18px; height:18px; border-radius:50%;
	border:2px solid currentColor; border-top-color:transparent;
	color:#fff; animation: cwx-spin .6s linear infinite;
}
.cwx-btn--gold.is-loading::after, .cwx-btn--secondary.is-loading::after, .cwx-btn--quiet.is-loading::after { color: var(--cwx-ink); }
@keyframes cwx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.cwx-btn, .cwx-btn:hover { transition:none; transform:none; }
	.cwx-btn.is-loading::after { animation-duration: 1.6s; }
}

.cwx-link {
	color:var(--cwx-ink); text-decoration:underline; text-underline-offset:3px;
	text-decoration-thickness:1.5px; font-weight:600;
}
.cwx-link:hover { color:var(--cwx-ink); text-decoration-color:var(--cwx-gold); }

/* --------------------------------------------------------------- CARDS ---- */

.cwx-card {
	background:var(--cwx-bg); border:1px solid var(--cwx-line);
	border-radius:var(--cwx-r); padding:var(--cwx-5);
}
.cwx-card--flush { padding:0; overflow:hidden; }
.cwx-card--quiet { background:var(--cwx-bg-2); border-color:transparent; }
.cwx-card--lift  { box-shadow:var(--cwx-shadow); border-color:transparent; }
.cwx-card__head  { display:flex; align-items:baseline; justify-content:space-between; gap:var(--cwx-3); margin-bottom:var(--cwx-4); }

/* -------------------------------------------------------------- FIELDS ---- */

.cwx-field { margin-bottom:var(--cwx-4); }
.cwx-field > label,
.cwx-label {
	display:block; margin-bottom:var(--cwx-2);
	font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--cwx-ink-2);
}
/* Required is marked once, in words, on the field that needs it -- not with a
 * red asterisk the customer has to decode against a legend somewhere else. */
.cwx-req { color:var(--cwx-ink-3); font-weight:600; letter-spacing:.04em; text-transform:none; }

.cwx-input,
.cwx-field input[type=text], .cwx-field input[type=email], .cwx-field input[type=tel],
.cwx-field input[type=password], .cwx-field input[type=number], .cwx-field select, .cwx-field textarea {
	width:100%; min-height:50px; padding:0 var(--cwx-4);
	background:var(--cwx-bg); color:var(--cwx-ink);
	border:1.5px solid var(--cwx-line); border-radius:var(--cwx-r-sm);
	font-size:16px; /* 16px stops iOS zooming the page on focus. */
	line-height:1.4; transition:border-color .12s ease, box-shadow .12s ease;
	-webkit-appearance:none; appearance:none;
}
.cwx-field textarea { min-height:110px; padding:var(--cwx-3) var(--cwx-4); }
.cwx-input:hover, .cwx-field input:hover, .cwx-field select:hover { border-color:#cfd4da; }
.cwx-input:focus, .cwx-field input:focus, .cwx-field select:focus, .cwx-field textarea:focus {
	outline:none; border-color:var(--cwx-ink); box-shadow:var(--cwx-focus);
}
.cwx-field.is-filled > label { color:var(--cwx-ink); }
.cwx-field.is-error input, .cwx-field.is-error select, .cwx-input.is-error { border-color:var(--cwx-stop); }
.cwx-field.is-ok input, .cwx-field.is-ok select { border-color:var(--cwx-good); }
.cwx-field [disabled] { background:var(--cwx-bg-2); color:var(--cwx-ink-3); cursor:not-allowed; }
.cwx-help  { margin-top:var(--cwx-2); font-size:12.5px; color:var(--cwx-ink-3); }
.cwx-error { margin-top:var(--cwx-2); font-size:12.5px; font-weight:600; color:var(--cwx-stop); }

.cwx-checkline { display:flex; align-items:flex-start; gap:var(--cwx-3); font-size:14px; color:var(--cwx-ink-2); }
.cwx-checkline input[type=checkbox] {
	width:20px; height:20px; margin:1px 0 0; flex:0 0 20px; accent-color:var(--cwx-ink); cursor:pointer;
}

.cwx-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--cwx-4); }
@media (max-width:640px) { .cwx-row { grid-template-columns:1fr; gap:0; } }

/* -------------------------------------------------------------- ALERTS ---- */

.cwx-alert {
	display:flex; gap:var(--cwx-3); align-items:flex-start;
	padding:var(--cwx-4); border-radius:var(--cwx-r-sm);
	border:1px solid var(--cwx-line); background:var(--cwx-bg-2);
	font-size:14px; line-height:1.5; color:var(--cwx-ink-2);
}
.cwx-alert__icon { flex:0 0 auto; font-size:16px; line-height:1.4; }
.cwx-alert__body { flex:1 1 auto; }
.cwx-alert strong { color:var(--cwx-ink); }
.cwx-alert--good  { background:var(--cwx-good-bg); border-color:rgba(18,128,92,.25); color:#0d5e44; }
.cwx-alert--warn  { background:var(--cwx-warn-bg); border-color:rgba(138,90,0,.25);  color:var(--cwx-warn); }
.cwx-alert--stop  { background:var(--cwx-stop-bg); border-color:rgba(164,38,44,.25); color:var(--cwx-stop); }
.cwx-alert__action { margin-top:var(--cwx-3); display:flex; gap:var(--cwx-2); flex-wrap:wrap; }

/* --------------------------------------------------------------- PILLS ---- */

.cwx-pill {
	display:inline-flex; align-items:center; gap:6px;
	padding:5px 11px; border-radius:var(--cwx-r-pill);
	font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
	background:var(--cwx-bg-2); color:var(--cwx-ink-2); border:1px solid var(--cwx-line);
	white-space:nowrap;
}
.cwx-pill--good { background:var(--cwx-good-bg); color:var(--cwx-good); border-color:rgba(18,128,92,.2); }
.cwx-pill--warn { background:var(--cwx-warn-bg); color:var(--cwx-warn); border-color:rgba(138,90,0,.2); }
.cwx-pill--stop { background:var(--cwx-stop-bg); color:var(--cwx-stop); border-color:rgba(164,38,44,.2); }
.cwx-pill--ink  { background:var(--cwx-ink);  color:#fff; border-color:var(--cwx-ink); }
.cwx-pill--gold { background:var(--cwx-gold); color:var(--cwx-gold-ink); border-color:var(--cwx-gold); }
.cwx-pill__dot  { width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ------------------------------------------------------------- LAYOUTS ---- */

.cwx-wrap { max-width:1140px; margin:0 auto; padding:0 var(--cwx-4); }
.cwx-hero { padding:var(--cwx-7) 0 var(--cwx-5); }
.cwx-hero p { max-width:52ch; margin:0; }

.cwx-split { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.95fr); gap:var(--cwx-6); align-items:start; }
@media (max-width:900px) { .cwx-split { grid-template-columns:1fr; gap:var(--cwx-5); } }

.cwx-stack > * + * { margin-top:var(--cwx-4); }
.cwx-stack--tight > * + * { margin-top:var(--cwx-2); }
.cwx-stack--loose > * + * { margin-top:var(--cwx-5); }

.cwx-sticky { position:sticky; top:var(--cwx-5); }
@media (max-width:900px) { .cwx-sticky { position:static; } }

/* ---------------------------------------------------------- LINE ITEMS ---- */

.cwx-line {
	display:grid; grid-template-columns:88px minmax(0,1fr) auto;
	gap:var(--cwx-4); align-items:start;
	padding:var(--cwx-4) 0; border-bottom:1px solid var(--cwx-line-2);
}
.cwx-line:last-child { border-bottom:0; }
.cwx-line__media {
	width:88px; aspect-ratio:1; border-radius:var(--cwx-r-sm); overflow:hidden;
	background:var(--cwx-bg-2); display:flex; align-items:center; justify-content:center;
	border:1px solid var(--cwx-line-2);
}
.cwx-line__media img { width:100%; height:100%; object-fit:contain; display:block; }
.cwx-line__name { font-size:15px; font-weight:700; color:var(--cwx-ink); line-height:1.3; }
.cwx-line__meta { margin-top:var(--cwx-2); display:flex; flex-wrap:wrap; gap:6px 14px; }
.cwx-line__spec { font-size:13px; color:var(--cwx-ink-3); }
.cwx-line__spec b { color:var(--cwx-ink-2); font-weight:600; }
.cwx-line__price { text-align:right; font-weight:700; white-space:nowrap; }
.cwx-line__actions { margin-top:var(--cwx-3); display:flex; align-items:center; gap:var(--cwx-4); flex-wrap:wrap; }

@media (max-width:640px) {
	.cwx-line { grid-template-columns:64px minmax(0,1fr); gap:var(--cwx-3); }
	.cwx-line__media { width:64px; }
	.cwx-line__price { grid-column:2; text-align:left; margin-top:var(--cwx-2); }
}

/* Quantity stepper: real tap targets, and the number is an input so somebody
 * ordering twelve does not have to press + eleven times. */
.cwx-qty { display:inline-flex; align-items:center; border:1.5px solid var(--cwx-line); border-radius:var(--cwx-r-pill); overflow:hidden; }
.cwx-qty button {
	width:40px; height:40px; border:0; background:transparent; cursor:pointer;
	font-size:18px; line-height:1; color:var(--cwx-ink); font-weight:700;
}
.cwx-qty button:hover { background:var(--cwx-bg-2); }
.cwx-qty button:disabled { opacity:.3; cursor:not-allowed; }
.cwx-qty input {
	width:44px; height:40px; border:0; text-align:center; font-size:15px; font-weight:700;
	background:transparent; color:var(--cwx-ink); -moz-appearance:textfield;
}
.cwx-qty input::-webkit-outer-spin-button, .cwx-qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.cwx-qty input:focus { outline:none; box-shadow:var(--cwx-focus); border-radius:var(--cwx-r-sm); }

/* --------------------------------------------------------- TOTALS BOX ---- */

.cwx-totals { }
.cwx-totals__row { display:flex; justify-content:space-between; gap:var(--cwx-4); padding:var(--cwx-3) 0; font-size:14px; color:var(--cwx-ink-2); }
.cwx-totals__row + .cwx-totals__row { border-top:1px solid var(--cwx-line-2); }
.cwx-totals__row--grand { border-top:1.5px solid var(--cwx-ink); margin-top:var(--cwx-2); padding-top:var(--cwx-4); font-size:19px; font-weight:800; color:var(--cwx-ink); }
.cwx-totals__row--free b { color:var(--cwx-good); }

/* Shipping choices as real, tappable rows rather than 12px radio dots. */
.cwx-ship { display:grid; gap:var(--cwx-2); margin:var(--cwx-2) 0; }
.cwx-ship__opt {
	display:flex; align-items:center; gap:var(--cwx-3);
	padding:var(--cwx-3) var(--cwx-4); border:1.5px solid var(--cwx-line);
	border-radius:var(--cwx-r-sm); cursor:pointer; font-size:14px; min-height:52px;
	transition:border-color .12s ease, background .12s ease;
}
.cwx-ship__opt:hover { border-color:#cfd4da; background:var(--cwx-bg-2); }
.cwx-ship__opt.is-on { border-color:var(--cwx-ink); background:var(--cwx-bg-2); }
.cwx-ship__opt input { accent-color:var(--cwx-ink); width:18px; height:18px; flex:0 0 18px; }
.cwx-ship__name { flex:1 1 auto; font-weight:600; color:var(--cwx-ink); }
.cwx-ship__cost { font-weight:700; white-space:nowrap; }

/* Progress toward free shipping: a real reason to add one more thing. */
.cwx-progress { margin-top:var(--cwx-3); }
.cwx-progress__track { height:6px; border-radius:3px; background:var(--cwx-line-2); overflow:hidden; }
.cwx-progress__fill  { height:100%; background:var(--cwx-gold); border-radius:3px; transition:width .3s ease; }

/* -------------------------------------------------------- EMPTY STATES ---- */

.cwx-empty { text-align:center; padding:var(--cwx-8) var(--cwx-4); max-width:520px; margin:0 auto; }
.cwx-empty__mark { font-size:40px; line-height:1; margin-bottom:var(--cwx-4); }
.cwx-empty__actions { margin-top:var(--cwx-5); display:flex; gap:var(--cwx-3); justify-content:center; flex-wrap:wrap; }

/* ------------------------------------------------------------ SKELETON ---- */

.cwx-skel { background:linear-gradient(90deg,var(--cwx-line-2) 25%,#e9ecef 37%,var(--cwx-line-2) 63%); background-size:400% 100%; animation:cwx-shim 1.3s ease infinite; border-radius:var(--cwx-r-sm); }
@keyframes cwx-shim { 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.cwx-busy { position:relative; }
.cwx-busy::after {
	content:''; position:absolute; inset:0; background:rgba(255,255,255,.6);
	backdrop-filter:saturate(.4); border-radius:inherit; pointer-events:none;
}

/* -------------------------------------------------------------- STEPS ---- */

.cwx-steps { display:flex; gap:var(--cwx-2); list-style:none; margin:0 0 var(--cwx-5); padding:0; flex-wrap:wrap; }
.cwx-steps li { display:flex; align-items:center; gap:var(--cwx-2); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cwx-ink-3); }
.cwx-steps li + li::before { content:''; width:18px; height:1.5px; background:var(--cwx-line); display:block; }
.cwx-steps li.is-on  { color:var(--cwx-ink); }
.cwx-steps li.is-done { color:var(--cwx-good); }

/* ------------------------------------------------------------- MODALS ---- */

.cwx-modal[hidden] { display:none !important; }
.cwx-modal {
	position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
	padding:var(--cwx-4); background:rgba(16,17,19,.55);
}
.cwx-modal__panel {
	background:#fff; border-radius:var(--cwx-r); max-width:640px; width:100%;
	max-height:85vh; display:flex; flex-direction:column; box-shadow:var(--cwx-shadow);
}
.cwx-modal__head { display:flex; align-items:center; justify-content:space-between; gap:var(--cwx-3); padding:var(--cwx-5); border-bottom:1px solid var(--cwx-line); }
.cwx-modal__body { padding:var(--cwx-5); overflow:auto; font-size:14px; line-height:1.6; color:var(--cwx-ink-2); }
.cwx-modal__body h2, .cwx-modal__body h3, .cwx-modal__body h4 { color:var(--cwx-ink); margin:var(--cwx-5) 0 var(--cwx-2); font-size:15px; }
.cwx-modal__body h2:first-child, .cwx-modal__body h3:first-child { margin-top:0; }
.cwx-modal__x { border:0; background:transparent; font-size:24px; line-height:1; cursor:pointer; color:var(--cwx-ink-3); padding:var(--cwx-1) var(--cwx-2); border-radius:var(--cwx-r-sm); }
.cwx-modal__x:hover { color:var(--cwx-ink); background:var(--cwx-bg-2); }
.cwx-modal__x:focus-visible { outline:none; box-shadow:var(--cwx-focus); }
@media (max-width:640px) {
	.cwx-modal { padding:0; align-items:flex-end; }
	.cwx-modal__panel { max-height:92vh; border-radius:var(--cwx-r) var(--cwx-r) 0 0; }
}

/* --------------------------------------------------------- DISCLOSURE ---- */

.cwx-disclose { border:1px solid var(--cwx-line); border-radius:var(--cwx-r-sm); overflow:hidden; }
.cwx-disclose > summary {
	list-style:none; cursor:pointer; padding:var(--cwx-4);
	font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--cwx-ink);
	display:flex; align-items:center; justify-content:space-between; gap:var(--cwx-3);
}
.cwx-disclose > summary::-webkit-details-marker { display:none; }
.cwx-disclose > summary::after { content:'+'; font-size:18px; color:var(--cwx-ink-3); }
.cwx-disclose[open] > summary::after { content:'\2212'; }
.cwx-disclose > summary:hover { background:var(--cwx-bg-2); }
.cwx-disclose__body { padding:0 var(--cwx-4) var(--cwx-4); }

/* -------------------------------------------------------------- TABLE ---- */

.cwx-table { width:100%; border-collapse:collapse; font-size:14px; }
.cwx-table th {
	text-align:left; padding:var(--cwx-3) var(--cwx-3) var(--cwx-3) 0;
	font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
	color:var(--cwx-ink-3); border-bottom:1px solid var(--cwx-line);
}
.cwx-table td { padding:var(--cwx-4) var(--cwx-3) var(--cwx-4) 0; border-bottom:1px solid var(--cwx-line-2); vertical-align:top; color:var(--cwx-ink-2); }
.cwx-table tr:last-child td { border-bottom:0; }
.cwx-table .num { text-align:right; }

/* Tables become cards on a phone. A horizontally scrolling order table is a
 * table nobody reads. */
@media (max-width:640px) {
	.cwx-table--cards, .cwx-table--cards tbody, .cwx-table--cards tr, .cwx-table--cards td { display:block; width:100%; }
	.cwx-table--cards thead { display:none; }
	.cwx-table--cards tr { border:1px solid var(--cwx-line); border-radius:var(--cwx-r-sm); padding:var(--cwx-4); margin-bottom:var(--cwx-3); }
	.cwx-table--cards td { border:0; padding:var(--cwx-1) 0; }
	.cwx-table--cards td::before { content:attr(data-label); display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cwx-ink-3); }
	.cwx-table--cards .num { text-align:left; }
}

/* ------------------------------------------------------------ A11Y ------- */

.cwx-sr {
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.cwx-skip:focus { position:fixed; top:8px; left:8px; z-index:100000; width:auto; height:auto; clip:auto; padding:12px 16px; background:#fff; }

/* ==========================================================================
 * WOOCOMMERCE OVERRIDES
 *
 * Everything below exists to make WooCommerce stop looking like WooCommerce.
 * It is grouped here on purpose: when Woo renames a class in a future release,
 * this is the only block to check. Selectors stay shallow, and !important
 * appears only against Woo's own inline styles, which a stylesheet cannot
 * otherwise beat.
 * ========================================================================== */

/* --- Notices. Woo's are grey boxes with a coloured left bar and an emoji-ish
 *     icon font. Ours are the alert primitive. ------------------------------ */
.woocommerce-notices-wrapper:empty { display:none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	list-style:none;
	display:flex; gap:var(--cwx-3); align-items:flex-start; flex-wrap:wrap;
	padding:var(--cwx-4) !important; margin:0 0 var(--cwx-4) !important;
	border:1px solid var(--cwx-line) !important; border-top-width:1px !important;
	border-radius:var(--cwx-r-sm) !important;
	background:var(--cwx-bg-2) !important; color:var(--cwx-ink-2) !important;
	font-size:14px; line-height:1.5;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display:none !important; }
.woocommerce-message { background:var(--cwx-good-bg) !important; border-color:rgba(18,128,92,.25) !important; color:#0d5e44 !important; }
.woocommerce-error   { background:var(--cwx-stop-bg) !important; border-color:rgba(164,38,44,.25) !important; color:var(--cwx-stop) !important; }
.woocommerce-error li { list-style:none; }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { margin-left:auto; }

/* --- Buttons. Every Woo button becomes the primitive. -------------------- */
.woocommerce .button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button, .woocommerce #respond input#submit,
.woocommerce button.button.alt, .woocommerce a.button.alt,
.wc-block-components-button {
	display:inline-flex; align-items:center; justify-content:center;
	min-height:48px; padding:0 var(--cwx-5);
	background:var(--cwx-ink); color:#fff; border:1.5px solid var(--cwx-ink);
	border-radius:var(--cwx-r-pill);
	font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
	line-height:1; text-decoration:none; cursor:pointer;
	transition:transform .12s ease, box-shadow .12s ease;
}
.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover {
	background:var(--cwx-ink); color:#fff; transform:translateY(-1px); box-shadow:var(--cwx-shadow-sm);
}
.woocommerce .button:focus-visible { outline:none; box-shadow:var(--cwx-focus); }
.woocommerce .button:disabled, .woocommerce .button.disabled { opacity:.42; cursor:not-allowed; transform:none; }

/* --- Form fields. --------------------------------------------------------- */
.woocommerce form .form-row { margin:0 0 var(--cwx-4); padding:0; }
.woocommerce form .form-row label {
	display:block; margin-bottom:var(--cwx-2);
	font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--cwx-ink-2);
}
.woocommerce form .form-row .required { color:var(--cwx-ink-3); text-decoration:none; border:0; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width:100%; min-height:50px; height:auto; padding:0 var(--cwx-4);
	background:#fff; color:var(--cwx-ink);
	border:1.5px solid var(--cwx-line); border-radius:var(--cwx-r-sm);
	font-size:16px; line-height:1.4; box-shadow:none;
}
.woocommerce form .form-row textarea { padding:var(--cwx-3) var(--cwx-4); min-height:110px; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus, .woocommerce form .form-row textarea:focus {
	outline:none; border-color:var(--cwx-ink); box-shadow:var(--cwx-focus);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color:var(--cwx-stop); }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color:var(--cwx-good); }
/* Woo hangs a ✓ / ✕ glyph off validated fields. It reads as decoration. */
.woocommerce form .form-row::after, .woocommerce form .form-row::before { content:none !important; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:47px; padding-left:0; color:var(--cwx-ink); }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height:48px; }
.select2-dropdown { border-color:var(--cwx-line); border-radius:var(--cwx-r-sm); }

/* --- Breadcrumb. --------------------------------------------------------- */
.woocommerce-breadcrumb { font-size:12.5px; color:var(--cwx-ink-3); margin-bottom:var(--cwx-4); }
.woocommerce-breadcrumb a { color:var(--cwx-ink-3); }

/* --- Account navigation becomes a real nav, not a bullet list. ----------- */
.woocommerce-MyAccount-navigation ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--cwx-1); }
.woocommerce-MyAccount-navigation li a {
	display:flex; align-items:center; gap:var(--cwx-3);
	padding:var(--cwx-3) var(--cwx-4); border-radius:var(--cwx-r-sm);
	font-size:14px; font-weight:600; color:var(--cwx-ink-2); text-decoration:none;
	border:1px solid transparent;
}
.woocommerce-MyAccount-navigation li a:hover { background:var(--cwx-bg-2); color:var(--cwx-ink); }
.woocommerce-MyAccount-navigation li.is-active a { background:var(--cwx-ink); color:#fff; }
.woocommerce-MyAccount-content { min-width:0; }

/* --- Order tables. ------------------------------------------------------- */
.woocommerce table.shop_table {
	border:0; border-collapse:collapse; border-radius:0; width:100%; font-size:14px;
}
.woocommerce table.shop_table th {
	padding:var(--cwx-3) var(--cwx-3) var(--cwx-3) 0; border:0;
	border-bottom:1px solid var(--cwx-line);
	font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--cwx-ink-3);
}
.woocommerce table.shop_table td { padding:var(--cwx-4) var(--cwx-3) var(--cwx-4) 0; border:0; border-bottom:1px solid var(--cwx-line-2); }
.woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td { border-bottom:0; padding-top:var(--cwx-3); padding-bottom:var(--cwx-3); }

/* --- Quantity inputs. ---------------------------------------------------- */
.woocommerce .quantity .qty {
	min-height:44px; width:70px; padding:0 var(--cwx-2); text-align:center;
	border:1.5px solid var(--cwx-line); border-radius:var(--cwx-r-sm); font-size:15px; font-weight:700;
}

/* --- Coupon: a quiet disclosure, not a competing form. ------------------- */
.woocommerce-form-coupon-toggle { margin-bottom:var(--cwx-4); }
.woocommerce form.checkout_coupon {
	border:1px solid var(--cwx-line) !important; border-radius:var(--cwx-r-sm);
	padding:var(--cwx-4) !important; margin:0 0 var(--cwx-4) !important; background:var(--cwx-bg-2);
}

/* --- Express payment buttons: one visual family, not a stack of vendors. -- */
.wc-stripe-payment-request-wrapper, .wc-stripe-express-checkout-element,
.wcpay-payment-request-wrapper, .woocommerce-checkout .wc-block-components-express-payment {
	margin-top:var(--cwx-3);
}
.cwx-express-note {
	display:flex; align-items:center; gap:var(--cwx-3); margin:var(--cwx-4) 0 var(--cwx-3);
	font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--cwx-ink-3);
}
.cwx-express-note::before, .cwx-express-note::after { content:''; flex:1 1 auto; height:1px; background:var(--cwx-line); }

/* --- Things a customer should simply never see. -------------------------- */
.woocommerce-privacy-policy-text p:empty,
.woocommerce .woocommerce-customer-details h2,
.woocommerce-order-details .wc-item-meta-label + p:empty { display:none; }
/* Woo prints every order-item meta key, including underscore-prefixed
 * production fields when a plugin registers them visibly. Presentation is
 * filtered in PHP; this is the belt to that pair of braces. */
.woocommerce .wc-item-meta li.cwx-hide, .woocommerce dl.variation .cwx-hide { display:none !important; }


/* ==========================================================================
 * SURFACE CLEANUP
 *
 * Things that belong to the theme or a third party, corrected only on the
 * four commerce surfaces this plugin owns. Scoped under .cwx so nothing here
 * can reach the homepage, the Studio, or anything C1 is responsible for.
 * ========================================================================== */

/* A "Shop by Sport" category list was taking a third of the sign-in page.
 * Browsing categories is not the job on cart, checkout, account or order --
 * the job is finishing, and a sidebar full of alternatives is an invitation
 * to abandon. */
.cwx #secondary,
.cwx .widget-area,
.cwx aside.sidebar-main { display:none !important; }
.cwx #primary,
.cwx .content-area { width:100% !important; max-width:none !important; float:none !important; margin:0 auto !important; }
.cwx .site-content .ast-container { max-width:1140px; }

/* The floating chat widget was sitting on top of form text and the pay
 * button. Lift the page's own content clear of it on small screens. */
@media (max-width:900px) {
	.cwx .woocommerce, .cwx .cwx-wrap { padding-bottom:88px; }
}

/* Woo marks required fields with a red asterisk and explains it nowhere.
 * Say the word instead, on the few fields that are optional. */
.cwx .required { border:0; text-decoration:none; }
.cwx label .required { display:none; }
.cwx .optional { color:var(--cwx-ink-3); font-weight:600; text-transform:none; letter-spacing:0; }

/* Login and register, side by side, both shouting. Give the page one voice. */
.cwx .u-column1 > h2, .cwx .u-column2 > h2,
.cwx .woocommerce-form-login__heading, .cwx .woocommerce-form-register__heading {
	font-size:20px; line-height:1.25; font-weight:700; letter-spacing:0; text-transform:none;
	margin:0 0 var(--cwx-4);
}
.cwx #customer_login { display:grid; grid-template-columns:1fr 1fr; gap:var(--cwx-6); align-items:start; }
.cwx #customer_login > div { min-width:0; }
@media (max-width:820px) { .cwx #customer_login { grid-template-columns:1fr; gap:var(--cwx-5); } }
.cwx .woocommerce-form-login, .cwx .woocommerce-form-register {
	border:1px solid var(--cwx-line); border-radius:var(--cwx-r); padding:var(--cwx-5); margin:0;
}

/* Account layout: navigation beside content, not a bulleted list above it. */
.cwx.woocommerce-account .woocommerce-MyAccount-navigation {
	float:none; width:auto;
}
@media (min-width:900px) {
	.cwx.woocommerce-account .woocommerce { display:grid; grid-template-columns:230px minmax(0,1fr); gap:var(--cwx-6); align-items:start; }
	.cwx.woocommerce-account .woocommerce-MyAccount-content { float:none; width:auto; }
}

/* Order-received: Woo's bare list of order number / date / email / total. */
.cwx .woocommerce-order-overview {
	list-style:none; margin:0 0 var(--cwx-5); padding:var(--cwx-5);
	border:1px solid var(--cwx-line); border-radius:var(--cwx-r);
	display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--cwx-4);
}
.cwx .woocommerce-order-overview li {
	border:0 !important; padding:0 !important; margin:0 !important; float:none !important;
	font-size:15px; font-weight:700; color:var(--cwx-ink); text-transform:none;
}
.cwx .woocommerce-order-overview li strong { display:block; margin-top:2px; }
.cwx .woocommerce-order-overview li::first-line { }

/* --------------------------------------------------------------------------
 * THE CART TABLE
 *
 * This markup is rendered outside this plugin, so it is styled rather than
 * replaced. That is the right trade: CSS against stable Woo class names
 * survives, whereas rebuilding somebody else's DOM in JavaScript does not --
 * proved during this pass, when doing so gave the cart two quantity steppers
 * and a product column one word wide.
 * -------------------------------------------------------------------------- */

.cwx table.shop_table.woocommerce-cart-form__contents { table-layout:auto; }

.cwx .woocommerce-cart-form__cart-item > td { padding:var(--cwx-5) var(--cwx-3) var(--cwx-5) 0; vertical-align:middle; }

/* Give the product its room back. */
.cwx .woocommerce-cart-form__cart-item .product-name { width:auto; min-width:220px; }
.cwx .woocommerce-cart-form__cart-item .product-name a {
	font-size:15px; font-weight:700; color:var(--cwx-ink); text-decoration:none; line-height:1.3;
}
.cwx .woocommerce-cart-form__cart-item .product-name a:hover { text-decoration:underline; text-underline-offset:3px; }

.cwx .woocommerce-cart-form__cart-item .product-thumbnail { width:92px; }
.cwx .woocommerce-cart-form__cart-item .product-thumbnail img {
	width:84px; height:84px; object-fit:contain; border-radius:var(--cwx-r-sm);
	background:var(--cwx-bg-2); border:1px solid var(--cwx-line-2); display:block;
}

/* Woo's remove control: a red circle x that sits in its own column looking
 * like an error. Make it quiet -- removing something is not a failure. */
.cwx .woocommerce-cart-form__cart-item .product-remove { width:36px; }
.cwx td.product-remove a.remove {
	width:28px; height:28px; line-height:26px; font-size:18px; font-weight:400;
	color:var(--cwx-ink-3); background:transparent; border:1px solid var(--cwx-line); border-radius:50%;
}
.cwx td.product-remove a.remove:hover { color:var(--cwx-stop); background:var(--cwx-stop-bg); border-color:rgba(164,38,44,.25); }

/* Attribute rows, once the enhancer has collapsed them. */
.cwx .woocommerce-cart-form__cart-item .cwx-line__meta { margin-top:6px; }

/* The theme's own quantity stepper, brought into the system. It already
 * exists and works -- it just looks like 2013. */
.cwx .quantity.buttons_added { display:inline-flex; align-items:center; border:1.5px solid var(--cwx-line); border-radius:var(--cwx-r-pill); overflow:hidden; background:#fff; }
.cwx .quantity.buttons_added input.qty {
	border:0 !important; width:48px; min-height:40px; height:40px; text-align:center;
	font-size:15px; font-weight:700; background:transparent; border-radius:0;
}
.cwx .quantity.buttons_added .plus,
.cwx .quantity.buttons_added .minus {
	width:38px; height:40px; min-height:40px; padding:0; margin:0;
	border:0 !important; border-radius:0; background:transparent !important;
	color:var(--cwx-ink) !important; font-size:17px; font-weight:700; line-height:1;
	text-transform:none; letter-spacing:0; box-shadow:none; cursor:pointer;
}
.cwx .quantity.buttons_added .plus:hover,
.cwx .quantity.buttons_added .minus:hover { background:var(--cwx-bg-2) !important; transform:none; }

.cwx .woocommerce-cart-form__cart-item .product-price,
.cwx .woocommerce-cart-form__cart-item .product-subtotal { font-weight:700; color:var(--cwx-ink); white-space:nowrap; }

/* The cart actions row: coupon and the update button, which compete. */
.cwx td.actions { padding-top:var(--cwx-5) !important; }
.cwx td.actions .coupon { display:flex; gap:var(--cwx-2); align-items:center; flex-wrap:wrap; float:none; }
.cwx td.actions .coupon input#coupon_code { width:auto; min-width:180px; flex:1 1 180px; }
.cwx td.actions .coupon .button { min-height:44px; padding:0 var(--cwx-4); font-size:12px; background:transparent; color:var(--cwx-ink); }
.cwx td.actions > button[name="update_cart"] {
	background:transparent; color:var(--cwx-ink-3); border-color:var(--cwx-line);
	min-height:44px; font-size:12px;
}

/* Phone: the cart table becomes readable rows rather than a squeeze. */
@media (max-width:720px) {
	.cwx table.shop_table.woocommerce-cart-form__contents thead { display:none; }
	.cwx .woocommerce-cart-form__cart-item {
		display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:0 var(--cwx-3);
		border:1px solid var(--cwx-line); border-radius:var(--cwx-r); padding:var(--cwx-4);
		margin-bottom:var(--cwx-3); position:relative;
	}
	.cwx .woocommerce-cart-form__cart-item > td { border:0; padding:0; }
	.cwx .woocommerce-cart-form__cart-item .product-thumbnail { grid-row:1 / span 2; width:76px; }
	.cwx .woocommerce-cart-form__cart-item .product-thumbnail img { width:76px; height:76px; }
	.cwx .woocommerce-cart-form__cart-item .product-name { grid-column:2 / span 2; }
	.cwx .woocommerce-cart-form__cart-item .product-price { display:none; }
	.cwx .woocommerce-cart-form__cart-item .product-quantity { grid-column:2; align-self:end; margin-top:var(--cwx-3); }
	.cwx .woocommerce-cart-form__cart-item .product-subtotal { grid-column:3; align-self:end; margin-top:var(--cwx-3); text-align:right; }
	.cwx .woocommerce-cart-form__cart-item .product-remove { position:absolute; top:10px; right:10px; width:auto; }
	.cwx td.actions .coupon { width:100%; }
	.cwx td.actions .coupon input#coupon_code { flex:1 1 100%; }
}


/* --------------------------------------------------------------------------
 * CHECKOUT DETAIL
 * -------------------------------------------------------------------------- */

/* The promo-code toggle was floating above the first form label, which made
 * the first thing on checkout a discount hunt rather than the order. Woo
 * renders it as an info notice; treat it as the quiet aside it should be. */
.cwx .woocommerce-form-coupon-toggle .woocommerce-info {
	background:transparent !important; border:0 !important; padding:0 !important;
	margin:0 0 var(--cwx-5) !important; font-size:13px; color:var(--cwx-ink-3) !important;
}
.cwx .woocommerce-form-coupon-toggle .woocommerce-info a { color:var(--cwx-ink); font-weight:700; }

/* Column labels above each side of checkout. */
.cwx .woocommerce-checkout h3#order_review_heading,
.cwx .woocommerce-billing-fields > h3 {
	font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
	color:var(--cwx-ink-3); margin:0 0 var(--cwx-3);
}

/* Terms: Woo's read-more box is a 200px scroll window inside a form. The full
 * document opens in a dialog instead, so the inline box stays collapsed. */
.cwx .woocommerce-terms-and-conditions { display:none !important; }
.cwx .woocommerce-terms-and-conditions-link { display:none; }
.cwx .woocommerce-terms-and-conditions-wrapper .form-row { margin-bottom:0; }
.cwx .validate-required label.woocommerce-form__label-for-checkbox { font-size:14px; text-transform:none; letter-spacing:0; color:var(--cwx-ink-2); font-weight:400; }

/* Place-order area: one primary action, express wallets clearly secondary. */
.cwx #payment .place-order { padding-top:var(--cwx-4); }
.cwx #payment #place_order { width:100%; min-height:54px; font-size:15px; }
.cwx #payment ul.payment_methods { border-bottom:1px solid var(--cwx-line); padding:0 0 var(--cwx-4); margin:0 0 var(--cwx-4); }
.cwx #payment ul.payment_methods li { list-style:none; margin:0; }
.cwx #payment div.payment_box { background:var(--cwx-bg-2); border-radius:var(--cwx-r-sm); font-size:13.5px; }
.cwx #payment div.payment_box::before { display:none !important; }

/* Order received. */
.cwx .woocommerce-order { max-width:820px; margin:0 auto; }
.cwx .woocommerce-order table.shop_table { margin-top:var(--cwx-4); }
.cwx .woocommerce-column--billing-address, .cwx .woocommerce-column--shipping-address {
	background:var(--cwx-bg-2); border-radius:var(--cwx-r-sm); padding:var(--cwx-4);
}
.cwx .woocommerce-columns--addresses { display:grid; grid-template-columns:1fr 1fr; gap:var(--cwx-4); }
@media (max-width:640px) { .cwx .woocommerce-columns--addresses { grid-template-columns:1fr; } }

/* ==========================================================================
 * SPRINT — "THIS IS NOT WOOCOMMERCE"
 *
 * Everything above is the primitive layer. This section is what happened when
 * the primitives were finally seen at full size on a real screen: the cards
 * were right, the scale was not. Three structural problems were doing most of
 * the damage, and they are fixed first because no amount of polish survives
 * them.
 * ========================================================================== */

/* --- 1. Structure ---------------------------------------------------------
 *
 * (a) The commerce pages inherited the theme's left-sidebar layout, so a
 *     two-column design was living in a third of the screen. That is handled
 *     properly in PHP via astra_page_layout; these rules are the belt to that
 *     braces, for any layout the filter does not reach.
 *
 * (b) A pre-existing storefront snippet makes .woocommerce a two-column grid.
 *     That was written for WooCommerce's default cart markup, where the form
 *     and the totals are siblings. This plugin now owns those templates and
 *     emits its own .cwx-split, so the outer grid was capturing our layout in
 *     a single cell -- which is why the cart looked cramped no matter what we
 *     did to it. Neutralised on commerce surfaces only; Shop is untouched.
 */
.cwx .woocommerce { display:block !important; }
/*
 * And form.checkout, for the same reason and from the same source.
 *
 * The storefront snippet styles BOTH .woocommerce and form.checkout as
 * two-column grids, because that is the shape of WooCommerce's default markup
 * -- #customer_details beside #order_review. This plugin now emits its own
 * .cwx-split inside that form, so neutralising only .woocommerce left the
 * checkout layout captured one level deeper: the whole of checkout was
 * rendering inside a 599px cell of a 1180px form, with panel notes wrapping one
 * word per line. Found live, after the cart fix, because it is the same fault
 * wearing a different selector.
 */
.cwx form.checkout,
.cwx .cwx-checkout { display:block !important; }
.cwx #secondary, .cwx .widget-area { display:none !important; }
.cwx #primary, .cwx .content-area {
	width:100% !important; max-width:none !important; float:none !important; margin:0 !important;
}
.cwx .site-content .ast-container { max-width:1240px; padding-bottom:var(--cwx-8); }

/* --- 2. A canvas -----------------------------------------------------------
 * White cards on a white page have no edges. Giving the page a ground is the
 * cheapest thing that makes the same components read as finished objects. */
.cwx .site-content { background:#f4f5f7; }
.cwx .cwx-card {
	border-radius:16px; padding:var(--cwx-5); background:#fff;
	border:1px solid #e8ebef;
	box-shadow:0 1px 2px rgba(16,17,19,.04), 0 10px 30px rgba(16,17,19,.05);
}
.cwx .cwx-card--flush { padding:0; }
.cwx .cwx-card--quiet { background:#fff; box-shadow:none; border-color:var(--cwx-line); }
.cwx .cwx-card__pad { padding:var(--cwx-2) var(--cwx-5); }

/* --- 3. Scale --------------------------------------------------------------
 * The design was drawn at a size that only looked right in a narrow column. */
.cwx-hero { padding:var(--cwx-8) 0 var(--cwx-6); }
.cwx-hero .cwx-display { font-size:clamp(40px,6.4vw,68px); }
.cwx-hero p { font-size:17px; color:var(--cwx-ink-2); margin-top:var(--cwx-4); max-width:56ch; }

/* min() so the summary column can never demand more width than the screen
 * has. As minmax(360px,.9fr) it did exactly that at 390px: the first column
 * collapsed to 0, the second held its 360px floor, and the cart scrolled
 * sideways on a phone. */
.cwx-split { gap:var(--cwx-6); grid-template-columns:minmax(0,1.6fr) minmax(min(360px,100%),.9fr); }
.cwx-line { grid-template-columns:128px minmax(0,1fr) auto; gap:var(--cwx-5); padding:var(--cwx-5) 0; }
.cwx-line__media {
	width:128px; border-radius:12px; background:#fff;
	border:1px solid var(--cwx-line); padding:8px;
}
.cwx-line__name { font-size:17px; }
.cwx-line__spec { font-size:13.5px; }

.cwx-totals__row { font-size:15px; padding:var(--cwx-3) 0; }
.cwx-totals__row--grand { font-size:26px; padding-top:var(--cwx-5); }

.cwx-qty button { width:44px; height:44px; font-size:20px; }
.cwx-qty input  { height:44px; width:48px; font-size:16px; }
.cwx-ship__opt  { min-height:58px; border-radius:12px; font-size:14.5px; }

/* --- 4. The primary action -------------------------------------------------
 * Checkout was a small pill sitting above a full-width Apple Pay button, so
 * the express wallet visually outranked the thing most people came to press. */
.cwx .cwx-btn--block { width:100%; }
.cwx .cwx-btn--primary {
	min-height:58px; font-size:15px; font-weight:800; letter-spacing:.06em;
	text-transform:uppercase; border-radius:12px;
	background:var(--cwx-ink); color:#fff;
}
.cwx .cwx-btn--primary:hover { background:#000; }
.cwx .cwx-or {
	display:flex; align-items:center; gap:var(--cwx-3); margin:var(--cwx-4) 0 var(--cwx-3);
	font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--cwx-ink-3);
}
.cwx .cwx-or:before, .cwx .cwx-or:after { content:''; flex:1 1 auto; height:1px; background:var(--cwx-line); }

/* --- 5. Payment options ----------------------------------------------------
 * Stripe renders saved cards as bare browser radios -- the blue dot is the
 * single most off-brand pixel in the whole flow. Same row treatment as
 * shipping, so a choice looks like a choice everywhere. */
.cwx .wc_payment_methods, .cwx ul.payment_methods { list-style:none; margin:0; padding:0; display:grid; gap:var(--cwx-2); }
.cwx ul.payment_methods > li.wc_payment_method, .cwx ul.payment_methods > li {
	border:1.5px solid var(--cwx-line); border-radius:12px; padding:0; background:#fff;
	transition:border-color .12s ease, box-shadow .12s ease;
}
.cwx ul.payment_methods > li > label {
	display:flex; align-items:center; gap:var(--cwx-3);
	padding:var(--cwx-4); margin:0; cursor:pointer; min-height:58px;
	font-weight:600; color:var(--cwx-ink); font-size:14.5px;
}
.cwx ul.payment_methods > li input[type=radio] { accent-color:var(--cwx-ink); width:18px; height:18px; flex:0 0 18px; margin:0; }
.cwx ul.payment_methods > li:has(input:checked) { border-color:var(--cwx-ink); box-shadow:inset 0 0 0 1px var(--cwx-ink); }
.cwx .payment_box { padding:0 var(--cwx-4) var(--cwx-4); background:transparent; border:0; margin:0; font-size:14px; color:var(--cwx-ink-2); }
.cwx .payment_box:before { display:none !important; }

/* Any remaining stock radio/checkbox in the flow, so nothing renders default. */
.cwx .cwx-panel input[type=radio], .cwx .cwx-panel input[type=checkbox] { accent-color:var(--cwx-ink); width:18px; height:18px; }

/* --- 6. Checkout: numbered sections ---------------------------------------
 * The owner's word for checkout was "sketchy", and the specific failure was
 * hierarchy: eight equal-weight blocks with no sense of order or progress.
 * Numbering them states the path out loud -- order, you, delivery, payment. */
.cwx-panel {
	background:#fff; border:1px solid #e8ebef; border-radius:16px;
	padding:var(--cwx-5) var(--cwx-5) var(--cwx-5);
	box-shadow:0 1px 2px rgba(16,17,19,.04), 0 10px 30px rgba(16,17,19,.05);
}
.cwx-panel + .cwx-panel { margin-top:var(--cwx-4); }
.cwx-panel__head { display:flex; align-items:center; gap:var(--cwx-3); margin:0 0 var(--cwx-5); }
.cwx-panel__num {
	flex:0 0 30px; width:30px; height:30px; border-radius:50%;
	background:var(--cwx-ink); color:#fff; font-size:13px; font-weight:800;
	display:flex; align-items:center; justify-content:center;
}
.cwx-panel__title { font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--cwx-ink); margin:0; }
.cwx-panel__note { margin-left:auto; font-size:13px; color:var(--cwx-ink-3); }

/* --- 7. Order received -----------------------------------------------------
 * The customer has just handed over money. This is the one screen that is
 * allowed to be loud. */
.cwx-cheer {
	background:var(--cwx-ink); color:#fff; border-radius:20px;
	padding:var(--cwx-8) var(--cwx-6); text-align:center; position:relative; overflow:hidden;
}
.cwx-cheer:after {
	content:''; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--cwx-gold);
}
.cwx-cheer__mark {
	width:64px; height:64px; border-radius:50%; background:var(--cwx-gold);
	color:var(--cwx-ink); display:flex; align-items:center; justify-content:center;
	font-size:32px; font-weight:800; margin:0 auto var(--cwx-5);
}
.cwx-cheer h1 { color:#fff; font-size:clamp(32px,5vw,52px); line-height:1; margin:0; text-transform:uppercase; font-weight:800; letter-spacing:-.02em; }
.cwx-cheer p { color:rgba(255,255,255,.78); font-size:17px; margin:var(--cwx-4) auto 0; max-width:46ch; }
.cwx-cheer__num { display:inline-block; margin-top:var(--cwx-5); padding:var(--cwx-2) var(--cwx-4); border:1px solid rgba(255,255,255,.25); border-radius:var(--cwx-r-pill); font-size:14px; letter-spacing:.04em; }
.cwx-cheer__num b { color:var(--cwx-gold); }

/* What happens next, as a track rather than a paragraph. */
.cwx-track { display:grid; gap:var(--cwx-4); margin:0; padding:0; list-style:none; }
@media (min-width:760px) { .cwx-track { grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--cwx-5); } }
.cwx-track li { position:relative; padding-top:var(--cwx-5); }
.cwx-track li:before {
	content:''; position:absolute; top:0; left:0; right:0; height:4px;
	border-radius:2px; background:var(--cwx-line);
}
.cwx-track li.is-done:before, .cwx-track li.is-now:before { background:var(--cwx-gold); }
.cwx-track__t { font-size:15px; font-weight:800; color:var(--cwx-ink); }
.cwx-track__d { font-size:13.5px; color:var(--cwx-ink-3); margin-top:4px; line-height:1.45; }

/* --- 8. Account ------------------------------------------------------------ */
.cwx .woocommerce-MyAccount-navigation ul { gap:6px; }
.cwx .woocommerce-MyAccount-navigation a {
	display:block; padding:14px var(--cwx-4); border-radius:12px;
	background:#fff; border:1px solid #e8ebef; font-weight:700; font-size:14.5px;
	color:var(--cwx-ink-2); text-decoration:none; transition:.12s ease;
}
.cwx .woocommerce-MyAccount-navigation a:hover { border-color:#cfd4da; color:var(--cwx-ink); }
.cwx .woocommerce-MyAccount-navigation .is-active a {
	background:var(--cwx-ink); border-color:var(--cwx-ink); color:#fff;
}
@media (min-width:900px) {
	/*
	 * Compound, not descendant. Both .cwx and .woocommerce-account live on the
	 * <body> element, so ".cwx .woocommerce-account" asks for one inside the
	 * other and matches nothing. This rule and its twin further up the file had
	 * therefore never applied -- the account page has been laid out by
	 * WooCommerce's default floats the whole time, which is why it looked
	 * roughly right and measured wrong.
	 */
	.cwx.woocommerce-account .woocommerce { display:grid !important; grid-template-columns:250px minmax(0,1fr); gap:var(--cwx-6); align-items:start; }
}

/* --- 9. States -------------------------------------------------------------
 * One vocabulary for every message the flow can produce. */
.cwx-note { display:flex; gap:var(--cwx-3); align-items:flex-start; padding:var(--cwx-4); border-radius:12px; font-size:14.5px; line-height:1.5; border:1px solid; }
.cwx-note__i { flex:0 0 20px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; margin-top:1px; }
.cwx-note--good { background:var(--cwx-good-bg); border-color:rgba(18,128,92,.22); color:#14503d; }
.cwx-note--good .cwx-note__i { background:var(--cwx-good); }
.cwx-note--warn { background:var(--cwx-warn-bg); border-color:rgba(138,90,0,.22); color:#6b4600; }
.cwx-note--warn .cwx-note__i { background:var(--cwx-warn); }
.cwx-note--stop { background:var(--cwx-stop-bg); border-color:rgba(164,38,44,.22); color:#7d1d22; }
.cwx-note--stop .cwx-note__i { background:var(--cwx-stop); }
.cwx-note--info { background:#eef2f7; border-color:#d7dfea; color:#28323f; }
.cwx-note--info .cwx-note__i { background:var(--cwx-ink-2); }

.cwx .cwx-btn[disabled], .cwx .cwx-btn.is-busy { opacity:.55; pointer-events:none; }
.cwx .cwx-field.is-bad input, .cwx .cwx-field.is-bad select, .cwx input.is-bad, .cwx select.is-bad {
	border-color:var(--cwx-stop) !important; box-shadow:0 0 0 3px rgba(164,38,44,.12);
}
.cwx-field__err { display:block; margin-top:6px; font-size:13px; font-weight:600; color:var(--cwx-stop); }

/* --- 10. Mobile ------------------------------------------------------------
 * A phone is not a narrow desktop. The total and the action follow you down
 * the page instead of living at the bottom of a long scroll. */
@media (max-width:900px) {
	.cwx-hero { padding:var(--cwx-6) 0 var(--cwx-4); }
	.cwx .site-content .ast-container { padding-bottom:120px; }
	.cwx-line { grid-template-columns:88px minmax(0,1fr); gap:var(--cwx-4); }
	.cwx-line__media { width:88px; }
	.cwx .cwx-card { padding:var(--cwx-4); border-radius:14px; }
	.cwx-panel { padding:var(--cwx-4); border-radius:14px; }

	.cwx-dock {
		position:fixed; left:0; right:0; bottom:0; z-index:60;
		background:rgba(255,255,255,.97); backdrop-filter:blur(8px);
		border-top:1px solid var(--cwx-line); padding:var(--cwx-3) var(--cwx-4) calc(var(--cwx-3) + env(safe-area-inset-bottom));
		display:flex; align-items:center; gap:var(--cwx-4);
		box-shadow:0 -8px 24px rgba(16,17,19,.08);
	}
	.cwx-dock__sum { flex:0 0 auto; }
	.cwx-dock__lab { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--cwx-ink-3); }
	.cwx-dock__amt { font-size:20px; font-weight:800; color:var(--cwx-ink); line-height:1.1; }
	.cwx-dock .cwx-btn { flex:1 1 auto; min-height:52px; }
}
@media (min-width:901px) { .cwx-dock { display:none; } }

/* Fields on a phone: 16px minimum so iOS does not zoom the page on focus. */
@media (max-width:640px) {
	.cwx input[type=text], .cwx input[type=email], .cwx input[type=tel],
	.cwx input[type=password], .cwx input[type=number], .cwx select, .cwx textarea {
		font-size:16px; min-height:50px;
	}
	.cwx .cwx-row, .cwx .form-row-first, .cwx .form-row-last { width:100%; float:none; }
}

/* --- 11. Totals detail -----------------------------------------------------
 * The tax breakdown is available, not absent -- it just no longer occupies
 * three lines of a receipt with a jurisdiction key in each one. */
.cwx-taxes > summary {
	list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
	color:var(--cwx-ink-2);
}
.cwx-taxes > summary::-webkit-details-marker { display:none; }
.cwx-taxes > summary:after {
	content:''; width:6px; height:6px; border-right:1.5px solid var(--cwx-ink-3);
	border-bottom:1.5px solid var(--cwx-ink-3); transform:rotate(45deg) translateY(-2px);
	transition:transform .15s ease;
}
.cwx-taxes[open] > summary:after { transform:rotate(-135deg) translateY(-2px); }
.cwx-taxes__body {
	display:grid; grid-template-columns:1fr auto; gap:4px 16px;
	margin-top:var(--cwx-2); font-size:13px; color:var(--cwx-ink-3);
}
.cwx-taxes__body span:nth-child(even) { text-align:right; }

/* Order of operations at the bottom of the totals card: the store's own
 * checkout first, wallets after, separated so neither looks like the other. */
.cwx-checkout-actions { margin-top:var(--cwx-5); }
.cwx-checkout-actions .checkout-button,
.cwx-checkout-actions a.checkout-button.button {
	display:flex !important; width:100%; min-height:58px; align-items:center; justify-content:center;
	background:var(--cwx-ink) !important; color:#fff !important; border:0 !important;
	border-radius:12px !important; font-size:15px; font-weight:800;
	letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
}
.cwx-checkout-actions .checkout-button:hover { background:#000 !important; }
/* Express wallets are a shortcut, not the main road. */
.cwx-checkout-actions .wc-stripe-express-checkout-element,
.cwx-checkout-actions #wc-stripe-express-checkout-element { margin-top:var(--cwx-3); }
.cwx-reassure {
	margin:var(--cwx-4) 0 0; text-align:center; font-size:12.5px; color:var(--cwx-ink-3);
	line-height:1.7;
}
.cwx-reassure span { color:var(--cwx-gold); font-size:9px; vertical-align:middle; }

/* --- 12. The storefront hero ----------------------------------------------
 * The heading on cart and checkout is rendered by a pre-existing storefront
 * snippet (.cwcc-hero), not by this plugin. Rather than render a second one
 * and hide theirs -- which would break the day they change the copy -- the
 * existing hero is adopted into the design system. One hero, whoever prints
 * it. */
.cwx .cwcc-hero { padding:var(--cwx-8) 0 var(--cwx-5); }
.cwx .cwcc-hero h1 {
	font-size:clamp(40px,6.4vw,68px); line-height:.95; letter-spacing:-.02em;
	font-weight:800; text-transform:uppercase; color:var(--cwx-ink); margin:0;
}
.cwx .cwcc-hero h1:after {
	content:''; display:block; width:64px; height:5px; border-radius:3px;
	background:var(--cwx-gold); margin-top:var(--cwx-4);
}
.cwx .cwcc-hero p {
	font-size:17px; color:var(--cwx-ink-2); margin:var(--cwx-4) 0 0; max-width:56ch;
}
@media (max-width:900px) { .cwx .cwcc-hero { padding:var(--cwx-6) 0 var(--cwx-4); } }

/* --- 13. Checkout layout ---------------------------------------------------
 * Two columns: the things you fill in, and the thing you are buying. The
 * summary is sticky because the number you are about to pay should never be
 * something you have to scroll back up to check. */
.cwx-split--checkout { grid-template-columns:minmax(0,1.35fr) minmax(min(380px,100%),.85fr); align-items:start; }
.cwx-checkout__main { min-width:0; }
.cwx-checkout__rail { min-width:0; }

/* Woo's two-column customer block becomes a single stack of panels; the
 * columns were only ever there to sit billing beside shipping. */
.cwx .cwx-checkout #customer_details.col2-set { display:block; }
.cwx .cwx-checkout #customer_details .col-1,
.cwx .cwx-checkout #customer_details .col-2 { width:auto; float:none; margin:0; }
.cwx .cwx-checkout #customer_details .col-2:empty { display:none; }

/* Woo's own headings inside the panels are replaced by the panel heads. */
.cwx .cwx-checkout .woocommerce-billing-fields > h3,
.cwx .cwx-checkout .woocommerce-shipping-fields > h3,
.cwx .cwx-checkout .woocommerce-additional-fields > h3 { display:none; }

.cwx-panel__head--payment { margin-top:var(--cwx-6); }
.cwx .woocommerce-checkout-payment { background:transparent; border-radius:0; }
.cwx #payment .place-order { padding:0; margin-top:var(--cwx-5); }
.cwx #payment #place_order {
	width:100%; min-height:62px; border-radius:12px; border:0;
	background:var(--cwx-ink); color:#fff; font-size:16px; font-weight:800;
	letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
}
.cwx #payment #place_order:hover { background:#000; }
.cwx #payment #place_order:focus-visible { outline:none; box-shadow:var(--cwx-focus); }

/* Screen-reader-only, for headings the layout no longer needs to show. */
.cwx-sr {
	position:absolute !important; width:1px; height:1px; overflow:hidden;
	clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

@media (max-width:900px) {
	.cwx-split--checkout { grid-template-columns:1fr; }
	/* On a phone the summary belongs above the form: people want to see what
	 * they are buying before they start typing, not after. */
	.cwx-checkout__rail { order:-1; }
	.cwx .cwx-sticky { position:static; }
	.cwx #payment #place_order { min-height:56px; }
}

/* --- 14. Details found by looking at it -----------------------------------
 * Everything in this block came from a screenshot, not from reading code.
 */

/* Woo prints its own "Estimate shipping" trigger inside the calculator form,
 * so the cart had two ways to open the same panel: our styled "Change" link
 * and a bare underline-less anchor sitting on its own line underneath, which
 * read as a broken label. Keep ours, retire theirs. */
.cwx form.woocommerce-shipping-calculator > a.shipping-calculator-button { display:none; }

.cwx .woocommerce-shipping-destination {
	font-size:13px; color:var(--cwx-ink-3); line-height:1.5; margin:var(--cwx-3) 0 0;
}

/* The thing the customer designed is the point of the page. Give it the
 * largest single element in the card. */
.cwx.woocommerce-cart .cwx-line { grid-template-columns:144px minmax(0,1fr) auto; }
.cwx.woocommerce-cart .cwx-line__media { width:144px; }
@media (max-width:900px) {
	.cwx.woocommerce-cart .cwx-line { grid-template-columns:96px minmax(0,1fr); }
	.cwx.woocommerce-cart .cwx-line__media { width:96px; }
}

/* A "Your design" line deserves to look like a badge, not a footnote. */
.cwx-line .cwx-pill--gold { font-size:10.5px; letter-spacing:.08em; }

/* --- 15. Phone, measured -------------------------------------------------
 * Found by rendering the cart in a real 390px viewport rather than assuming a
 * narrow desktop behaves like a phone.
 *
 * The quantity stepper was overflowing the item card: 44px targets plus a 48px
 * input plus a "Remove" link did not fit beside a 96px image on a 390 screen,
 * so the "+" was clipped off the right edge and the row below it was a lonely
 * price. Targets stay big enough to hit; the row is allowed to wrap; and the
 * price comes back up onto the same line as the actions instead of starting a
 * third row of its own.
 */
@media (max-width:640px) {
	.cwx .cwx-line { grid-template-columns:88px minmax(0,1fr); gap:var(--cwx-3); padding:var(--cwx-4) 0; }
	.cwx .cwx-line__media { width:88px; }

	.cwx .cwx-line__actions {
		margin-top:var(--cwx-3); gap:var(--cwx-3);
		justify-content:space-between; width:100%;
	}
	.cwx .cwx-qty button { width:38px; height:42px; font-size:19px; }
	.cwx .cwx-qty input  { width:38px; height:42px; font-size:15px; }

	/* Price rejoins the action row instead of stranding itself underneath. */
	.cwx .cwx-line__price {
		grid-column:2; grid-row:auto; text-align:right; margin-top:var(--cwx-2);
		font-size:16px;
	}

	.cwx .cwx-line__name { font-size:15.5px; }
	.cwx .cwx-card { padding:var(--cwx-4); }
	.cwx .cwx-card--flush > div { padding:var(--cwx-1) var(--cwx-4) !important; }
}

/* The promo row and the "keep shopping" link are secondary on a phone; they
 * should not be the same visual weight as the thing being bought. */
@media (max-width:640px) {
	.cwx .cwx-disclose { font-size:14px; }
	.cwx-hero + * { margin-top:var(--cwx-2); }
}

/* The stepper, measured rather than assumed.
 *
 * At 390px the "+" was being clipped off the pill entirely. The cause was not
 * the phone: the theme gives buttons a width of its own, so the 40px targets
 * this file asked for were rendering at 120px each, three of them inside a
 * pill with overflow:hidden. Pin the track explicitly and stop hiding the
 * overflow, so a miscalculation shows up as a visible mess next time instead
 * of silently eating a control the customer needs. */
.cwx .cwx-qty { overflow:visible; flex:0 0 auto; }
.cwx .cwx-qty button { flex:0 0 42px; width:42px; min-width:0; padding:0; height:44px; }
.cwx .cwx-qty input  { flex:0 0 46px; width:46px; min-width:0; height:44px; }
.cwx .cwx-line__actions { width:100%; gap:var(--cwx-4); }

/* --- 16. Checkout, cleaned ------------------------------------------------
 * The order-review column was carrying a 2px black left border, a grey
 * background and 36px of side padding from the same pre-existing storefront
 * snippet that made .woocommerce a grid. On screen that read as a stray line
 * down the middle of checkout and a card inside a card. The review column is
 * now a plain container and the card inside it does the styling, once. */
.cwx .woocommerce-checkout-review-order,
.cwx #order_review {
	border:0 !important; background:transparent !important; padding:0 !important;
}

/* Woo prints a heading above billing, above shipping and above the order
 * review. The numbered panel heads say the same thing better, and three
 * headings for two sections is how a page starts to look untended. */
.cwx .cwx-checkout .woocommerce-billing-fields > h3,
.cwx .cwx-checkout .woocommerce-shipping-fields > h3,
.cwx .cwx-checkout .woocommerce-additional-fields > h3,
.cwx .cwx-checkout #order_review_heading { display:none; }

/* Woo's "ship to a different address" toggle is a heading with a checkbox
 * inside it. Make it read as the control it is. */
.cwx #ship-to-different-address {
	display:flex; align-items:center; gap:var(--cwx-3); margin:0 0 var(--cwx-4);
	font-size:15px; font-weight:700; color:var(--cwx-ink);
}
.cwx #ship-to-different-address label { display:flex; align-items:center; gap:var(--cwx-3); margin:0; cursor:pointer; }
.cwx #ship-to-different-address input[type=checkbox] { accent-color:var(--cwx-ink); width:18px; height:18px; }

/* --- 17. Payment, aimed at the real markup -------------------------------
 * The first attempt styled ul.payment_methods > li, which is the *gateway*
 * row. With one gateway installed that row is just a wrapper, and the radios a
 * customer actually clicks live two levels further in, inside Stripe's saved
 * payment methods list. So the page still rendered stock browser radio dots --
 * the single most off-brand pixel in the whole flow -- while the CSS above it
 * looked correct. Aim at what is on screen. */
.cwx .woocommerce-SavedPaymentMethods { list-style:none; margin:0; padding:0; display:grid; gap:var(--cwx-2); }
/* The row itself is the flex container, not the label.
 *
 * Stripe renders the radio and the label as SIBLINGS inside the li, so making
 * the label a flex row put the dot on one line and the card on the next --
 * which is exactly what shipped in 1.2.1 and what the live check caught. */
.cwx .woocommerce-SavedPaymentMethods li {
	display:flex; align-items:center; gap:var(--cwx-3);
	border:1.5px solid var(--cwx-line); border-radius:12px; margin:0;
	padding:var(--cwx-3) var(--cwx-4); min-height:58px; background:#fff;
	transition:border-color .12s ease, box-shadow .12s ease;
	list-style:none;
}
.cwx .woocommerce-SavedPaymentMethods li label {
	padding:0; margin:0; flex:1 1 auto; min-height:0; cursor:pointer;
	font-size:14.5px; font-weight:600; color:var(--cwx-ink);
}
.cwx .woocommerce-SavedPaymentMethods input[type=radio] {
	accent-color:var(--cwx-ink); width:18px; height:18px; flex:0 0 18px; margin:0;
}
.cwx .woocommerce-SavedPaymentMethods li:has(input:checked) {
	border-color:var(--cwx-ink); box-shadow:inset 0 0 0 1px var(--cwx-ink);
}
.cwx .woocommerce-SavedPaymentMethods li:hover { border-color:#cfd4da; }

/* The gateway row itself: with a single gateway its label is a heading that
 * says "Payment options" directly beneath our own "3 Payment" heading. Two
 * headings, one idea. Hidden only when it is the only gateway -- add a second
 * and both come back. */
.cwx ul.payment_methods { list-style:none; margin:0; padding:0; }
.cwx ul.payment_methods > li.wc_payment_method {
	border:0 !important; padding:0; margin:0; background:transparent;
}
.cwx ul.payment_methods > li:only-child > label,
.cwx ul.payment_methods > li:only-child > input.input-radio { display:none; }
.cwx .payment_box { background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; }
.cwx .payment_box:before { display:none !important; }

/* Stripe's card element, given the same field treatment as everything else. */
.cwx .wc-stripe-upe-element, .cwx .StripeElement {
	border:1.5px solid var(--cwx-line); border-radius:var(--cwx-r-sm);
	padding:var(--cwx-3) var(--cwx-4); background:#fff; margin-top:var(--cwx-2);
}

/* Terms: a real checkbox with a real target, not a 12px square. */
.cwx .woocommerce-terms-and-conditions-wrapper { margin:var(--cwx-4) 0 0; }
.cwx .validate-required.woocommerce-validated label, .cwx .form-row.terms label {
	display:flex; align-items:flex-start; gap:var(--cwx-3); font-size:14px; color:var(--cwx-ink-2);
}
.cwx .form-row.terms input[type=checkbox] { accent-color:var(--cwx-ink); width:18px; height:18px; margin-top:1px; }

/* The final commitment is gold. Black moves you forward through the flow
 * -- "Check out" -- and gold is the one that spends money. Two different
 * actions should not look identical. */
.cwx #payment #place_order {
	background:var(--cwx-gold); color:var(--cwx-gold-ink);
}
.cwx #payment #place_order:hover { background:#e6c200; }

/* Woo's own "(optional)" marker, styled rather than duplicated. */
.cwx label .optional { font-weight:600; letter-spacing:.02em; text-transform:none; color:var(--cwx-ink-3); }

/* --- 18. Steps and the promo row -----------------------------------------
 * The step indicator was 12px grey text that vanished on the page, and the
 * coupon toggle was floating between the sign-in banner and the first panel
 * with nothing holding it. Both are now part of one header band that sits
 * under the hero and states where you are before the form starts. */
.cwx .cwx-steps {
	display:flex; align-items:center; gap:var(--cwx-3); flex-wrap:wrap;
	margin:0; padding:0; list-style:none;
}
.cwx .cwx-steps li {
	display:flex; align-items:center; gap:var(--cwx-2);
	font-size:12px; font-weight:800; letter-spacing:.10em; text-transform:uppercase;
	color:var(--cwx-ink-3);
}
.cwx .cwx-steps li:before {
	content:''; width:9px; height:9px; border-radius:50%;
	background:var(--cwx-line); flex:0 0 9px;
}
.cwx .cwx-steps li + li { margin-left:var(--cwx-2); }
.cwx .cwx-steps li.is-done { color:var(--cwx-ink-2); }
.cwx .cwx-steps li.is-done:before { background:var(--cwx-ink-2); }
.cwx .cwx-steps li.is-on { color:var(--cwx-ink); }
.cwx .cwx-steps li.is-on:before { background:var(--cwx-gold); box-shadow:0 0 0 4px rgba(255,209,0,.25); }

.cwx-bar {
	display:flex; align-items:center; justify-content:space-between; gap:var(--cwx-4);
	flex-wrap:wrap; padding:var(--cwx-4) 0 var(--cwx-5);
	border-bottom:1px solid var(--cwx-line); margin-bottom:var(--cwx-5);
}

/* Woo's coupon toggle is an "info notice" by class, which is why it looked
 * like a system message rather than an offer. */
.cwx .woocommerce-form-coupon-toggle { margin:0; }
.cwx .woocommerce-form-coupon-toggle .woocommerce-info {
	background:transparent; border:0; padding:0; margin:0;
	font-size:13.5px; color:var(--cwx-ink-3);
}
.cwx .woocommerce-form-coupon { margin-top:var(--cwx-4); }

/* --- 19. Notices ---------------------------------------------------------
 * These matter more than they look like they should. Until the cache guard
 * above went in they were never reaching the customer at all, so they had
 * never actually been seen on this site. Now that they appear, they use the
 * same vocabulary as everything else rather than Woo's grey bar with a tick
 * glyph in a pseudo-element. */
.cwx .woocommerce-notices-wrapper:empty { display:none; }
.cwx .woocommerce-error,
.cwx .woocommerce-message,
.cwx .woocommerce-info {
	display:flex; gap:var(--cwx-3); align-items:flex-start;
	padding:var(--cwx-4) var(--cwx-5); border-radius:12px; margin:0 0 var(--cwx-4);
	border:1px solid; font-size:14.5px; line-height:1.5; list-style:none;
	background:#eef2f7; border-color:#d7dfea; color:#28323f;
}
.cwx .woocommerce-error   { background:var(--cwx-stop-bg); border-color:rgba(164,38,44,.22); color:#7d1d22; }
.cwx .woocommerce-message { background:var(--cwx-good-bg); border-color:rgba(18,128,92,.22); color:#14503d; }
.cwx .woocommerce-error::before,
.cwx .woocommerce-message::before,
.cwx .woocommerce-info::before { display:none !important; }
.cwx .woocommerce-error li, .cwx .woocommerce-message li, .cwx .woocommerce-info li { margin:0; }
.cwx .woocommerce-error .button,
.cwx .woocommerce-message .button,
.cwx .woocommerce-info .button {
	margin-left:auto; align-self:center; background:transparent; border:1.5px solid currentColor;
	color:inherit; border-radius:var(--cwx-r-pill); padding:6px 16px; font-size:12px;
	font-weight:800; letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
}

/* Field-level validation, so an error points at the thing that is wrong
 * rather than only shouting from the top of the page. */
.cwx .woocommerce-invalid input.input-text,
.cwx .woocommerce-invalid select,
.cwx .woocommerce-invalid .select2-selection {
	border-color:var(--cwx-stop) !important;
	box-shadow:0 0 0 3px rgba(164,38,44,.12);
}
.cwx .woocommerce-invalid > label { color:var(--cwx-stop); }
.cwx .woocommerce-validated input.input-text { border-color:var(--cwx-good) !important; }

/* Notices inherit the theme's centred text on this site, which put the error
 * message in the middle of a wide band with nothing beside it. */
.cwx .woocommerce-error,
.cwx .woocommerce-message,
.cwx .woocommerce-info { text-align:left; justify-content:flex-start; }
.cwx .woocommerce-error li,
.cwx .woocommerce-message li,
.cwx .woocommerce-info li { text-align:left; }


/* ==========================================================================
 * RESPONSIVE, LAST
 *
 * These live at the end of the file on purpose. The sprint added unconditional
 * .cwx-split rules further up, which -- being later in the source than the
 * original max-width:900px block -- silently won at every width and put both
 * the cart and checkout into two columns on a phone. Breakpoint rules that can
 * be overridden by a later desktop rule are not breakpoint rules, so the ones
 * that matter are stated once, here, after everything.
 * ========================================================================== */

@media (max-width:900px) {
	.cwx .cwx-split,
	.cwx .cwx-split--checkout { grid-template-columns:1fr !important; gap:var(--cwx-5); }

	/* The summary above the form: people want to see what they are buying
	 * before they start typing, not after. */
	.cwx .cwx-checkout__rail { order:-1; }
	.cwx .cwx-checkout__main { order:0; }
	.cwx .cwx-sticky { position:static; }
	.cwx #payment #place_order { min-height:56px; }
}

/* Nothing on these pages may scroll the document sideways. */
@media (max-width:900px) {
	/* Only the page container clips. Deliberately not .woocommerce, which
	 * contains position:fixed descendants a clip context can trap. */
	.cwx .site-content,
	.cwx .ast-container { max-width:100%; overflow-x:clip; }
	.cwx img, .cwx table { max-width:100%; }
}

/* --- 15. Paying for an order we prepared (order-pay) --------------------
 * Woo's form-pay template prints a four-column table above the payment
 * form. The page above the form is now ours: the approved design as the
 * hero, the facts a customer would check, the amount due, one button. The
 * form itself -- #order_review, #payment, Stripe's fields, #place_order --
 * is untouched; only Woo's table is hidden, because everything in it is
 * presented better a few hundred pixels above. */
.cwx-pay #order_review > table.shop_table,
.cwx-pay #order_review > .woocommerce-order-pay-table { display:none !important; }
.cwx-pay #order_review_heading { display:none; }
.cwx-payx { max-width:1140px; margin:0 auto; }
.cwx-payx__hero { padding-bottom:var(--cwx-5); }
.cwx-payx__facts { display:flex; flex-wrap:wrap; gap:var(--cwx-4) var(--cwx-6); margin-top:var(--cwx-5); padding-top:var(--cwx-4); border-top:1px solid var(--cwx-line); }
.cwx-payx__facts > div { display:flex; flex-direction:column; gap:4px; }
.cwx-payx__facts b { font-size:16px; font-weight:800; color:var(--cwx-ink); }
.cwx-payx__due { margin-left:auto; text-align:right; }
.cwx-payx__due b { font-size:28px; letter-spacing:-.01em; line-height:1; }
.cwx-payx__due .cwx-micro { color:var(--cwx-ink); }
.cwx-payx__split { align-items:start; }
.cwx-payx__item { display:grid; grid-template-columns:minmax(0,1fr); gap:0; padding:0; overflow:hidden; }
.cwx-payx__item.is-hero { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; }
.cwx-payx__media { position:relative; background:var(--cwx-bg-2); display:flex; align-items:center; justify-content:center; aspect-ratio:1; align-self:start; }
.cwx-payx__media img { display:block; width:100%; height:auto; max-height:560px; object-fit:contain; }
.cwx-payx__item:not(.is-hero) .cwx-payx__media { min-height:0; max-width:220px; margin:var(--cwx-4) 0 0 var(--cwx-4); border-radius:var(--cwx-r-sm); border:1px solid var(--cwx-line-2); }
.cwx-payx__badge { position:absolute; left:var(--cwx-4); top:var(--cwx-4); box-shadow:var(--cwx-shadow-sm); }
.cwx-payx__body { padding:var(--cwx-5); }
.cwx-payx__title { display:flex; justify-content:space-between; gap:var(--cwx-4); align-items:baseline; }
.cwx-payx__price { font-weight:800; font-size:18px; white-space:nowrap; }
.cwx-payx__specs { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--cwx-3) var(--cwx-4); margin:var(--cwx-4) 0 0; padding-top:var(--cwx-4); border-top:1px solid var(--cwx-line-2); }
.cwx-payx__specs > div { display:flex; flex-direction:column; gap:3px; }
.cwx-payx__specs dt { font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--cwx-ink-3); }
.cwx-payx__specs dd { margin:0; font-size:15px; font-weight:600; color:var(--cwx-ink); }
.cwx-payx__rail .cwx-card { padding:var(--cwx-5); }
.cwx-payx__jump { margin-top:var(--cwx-4); min-height:56px; border-radius:12px; box-sizing:border-box; --_bg:var(--cwx-gold); --_fg:var(--cwx-ink); --_bd:var(--cwx-gold); }
.cwx-payx__help { margin:var(--cwx-4) 0 0; padding-top:var(--cwx-3); border-top:1px solid var(--cwx-line-2); }
.cwx-payx__help a { color:var(--cwx-ink); font-weight:700; text-decoration:underline; text-decoration-color:var(--cwx-gold); text-underline-offset:3px; }
.cwx-payx__paywrap { max-width:720px; margin:var(--cwx-7) auto 0; padding-top:var(--cwx-5); border-top:1px solid var(--cwx-line); }
.cwx-pay #order_review { max-width:720px; margin:var(--cwx-4) auto 0; }
.cwx-pay #payment { background:var(--cwx-bg); border:1px solid var(--cwx-line); border-radius:var(--cwx-r); padding:var(--cwx-5); box-shadow:var(--cwx-shadow); }
.cwx-pay #payment #place_order { background:var(--cwx-gold); color:var(--cwx-ink); }
.cwx-pay #payment #place_order:hover { background:#e6c000; }
.cwx-pay .cwx-reassure { margin-top:var(--cwx-4); }
@media (max-width:900px) {
	.cwx-payx__item.is-hero { grid-template-columns:1fr; }
	.cwx-payx__due { margin-left:0; text-align:left; flex-basis:100%; }
	.cwx-payx__split { display:flex; flex-direction:column; }
	.cwx-payx__rail { order:2; }
	.cwx-payx__media img { max-height:420px; }
	.cwx-payx__specs { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
	.cwx-payx__body { padding:var(--cwx-4); }
	.cwx-payx__facts { gap:var(--cwx-3) var(--cwx-5); }
	.cwx-pay #payment { padding:var(--cwx-4); }
}

/* --- 16. Express wallets after the Stripe 10.9 update ----------------------
 * The gateway now renders one container per wallet (applePay / googlePay /
 * link), each tagged .StripeElement, stacked under the store's own button.
 * Section 5's card-field treatment (border, padding, white box) was wrapping
 * every wallet in an input-looking frame, so three tall boxes outranked the
 * gold Check out button again -- the exact regression the sprint fixed.
 * The wallets keep Stripe's own markup and sizing; they just sit beneath the
 * primary action under one quiet divider, as intended. */
.cwx .StripeElement[id^="wc-stripe-express-checkout-element"],
.cwx #wc-stripe-express-checkout-element > div {
	border:0 !important; padding:0 !important; background:transparent !important;
	margin:0 !important; border-radius:0 !important;
}
.cwx #wc-stripe-express-checkout-element {
	display:flex !important; flex-wrap:wrap; gap:8px 10px !important;
	margin:18px 0 0 !important; padding-top:18px !important;
	border-top:1px solid var(--cwx-line) !important; position:relative;
}
.cwx #wc-stripe-express-checkout-element::before {
	content:'or pay express'; flex:0 0 100%; height:14px; line-height:14px;
	margin:-26px 0 2px !important; text-align:center;
	font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cwx-ink-3);
	background:linear-gradient(90deg, transparent calc(50% - 66px), #fff calc(50% - 66px), #fff calc(50% + 66px), transparent calc(50% + 66px));
}
.cwx #wc-stripe-express-checkout-element > div:empty { display:none !important; }