/*!
 * OnePageCheckout for WooCommerce — base stylesheet (the "naked" look).
 * Fully driven by --opcw-* custom properties: a theme skins the checkout by
 * overriding variables (plus, rarely, a few component rules) in ONE file.
 * No site-specific values live in here.
 */

/*
 * WordPress' standard screen-reader-only class. The takeover page drops the
 * theme stylesheet (dequeue_theme_css), which is where this rule normally
 * lives — without it a theme's skip link and WooCommerce's own "Required"
 * labels become visible. Same values as wp-admin / core themes.
 */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: var(--opcw-surface, #fff);
	clip-path: none;
	color: var(--opcw-ink, #17181a);
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

:root {
	/* palette */
	--opcw-bg: #ffffff;
	--opcw-bg-summary: #f5f5f6;
	--opcw-surface: #ffffff;
	--opcw-ink: #17181a;
	--opcw-text: #3d4045;
	--opcw-muted: #74787e;
	--opcw-faint: #a3a7ad;
	--opcw-line: #dfe1e5;
	--opcw-line-strong: #17181a;
	--opcw-primary: #17181a;
	--opcw-primary-ink: #ffffff;
	--opcw-accent: #17181a;
	--opcw-success: #1f9d55;
	--opcw-error: #d64545;

	/* shape + type */
	--opcw-radius: 10px;
	--opcw-radius-sm: 8px;
	--opcw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--opcw-font-display: var(--opcw-font);
	--opcw-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
	--opcw-fw-display: 700;
	--opcw-tt-btn: none;
	--opcw-ls-btn: .01em;

	/* rhythm */
	--opcw-field-h: 54px;
	--opcw-gap: 8px;
	--opcw-section-gap: 34px;
	--opcw-shadow: 0 1px 2px rgba(20, 22, 26, .05);
	--opcw-focus: 0 0 0 1.5px var(--opcw-accent);
}

/* ---------- base ---------- */
body.opcw { margin: 0; padding: 0; box-sizing: border-box;
	font-family: var(--opcw-font); color: var(--opcw-text); background: var(--opcw-bg);
	line-height: 1.5; font-size: 14px; -webkit-font-smoothing: antialiased; min-height: 100vh; }
.opcw *, .opcw *::before, .opcw *::after { box-sizing: border-box; }
.opcw [hidden] { display: none !important; }
.opcw a { color: var(--opcw-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.opcw a:hover { text-decoration-thickness: 2px; }
.opcw button { font: inherit; cursor: pointer; }
.opcw img { max-width: 100%; height: auto; }
.opcw p { margin: 0; }
.opcw :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--opcw-accent); outline-offset: 1px; }

/* ---------- shell header ---------- */
.opcw-header { border-bottom: 1px solid var(--opcw-line); background: var(--opcw-bg); position: relative; z-index: 5; }
.opcw-header__in { max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 64px;
	display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.opcw-logo { font-family: var(--opcw-font-display); font-weight: var(--opcw-fw-display); font-size: 20px;
	letter-spacing: -.02em; color: var(--opcw-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.opcw-logo .opcw-logo__img { max-height: 40px; width: auto; }
.opcw-header__secure { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--opcw-muted); white-space: nowrap; }
.opcw-header__usps { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.opcw-header__usps li { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--opcw-muted); white-space: nowrap; }
@media (max-width: 899px) { .opcw-header__usps { display: none; } }
/* back-to-shop arrow (opt-in) — sits with the logo; content aligns to its left edge */
.opcw-header__lead { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.opcw-back { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 10px;
	border: 1px solid var(--opcw-line); border-radius: var(--opcw-radius-sm); background: var(--opcw-surface);
	color: var(--opcw-muted); text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; flex: none;
	transition: color .15s, border-color .15s; }
.opcw-back:hover { color: var(--opcw-ink); border-color: var(--opcw-line-strong); text-decoration: none; }
.opcw-back svg { flex: none; }
@media (max-width: 599px) { .opcw-back__label { display: none; } .opcw-back { width: 36px; padding: 0; justify-content: center; } .opcw-header__lead { gap: 10px; } }

/* ---------- split layout ---------- */
.opcw-shell { background: var(--opcw-bg); overflow-x: clip; }
.opcw-layout { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 460px; align-items: stretch; }
.opcw-layout--single { grid-template-columns: minmax(0, 1fr); }
.opcw-main { padding: 36px 40px 64px 24px; max-width: 700px; width: 100%; justify-self: start; }
/* left edge aligns with the header logo (container + 24px); the 40px right
   padding mirrors the summary's 40px left inset so the divider sits centered
   in an even trough. */
.opcw-layout--single .opcw-main { justify-self: center; }
.opcw-summary { position: relative; background: var(--opcw-bg-summary); border-left: 1px solid var(--opcw-line); padding: 36px 24px 64px 40px; }
.opcw-summary::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 50vw; background: var(--opcw-bg-summary); }
.opcw-summary__sticky { position: sticky; top: 24px; }

/* ---------- sections ---------- */
.opcw-section { margin-bottom: var(--opcw-section-gap); }
.opcw-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.opcw-kicker { display: block; font-family: var(--opcw-font-mono); font-size: 11px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--opcw-faint); margin-bottom: 4px; }
.opcw-h2 { font-family: var(--opcw-font-display); font-weight: var(--opcw-fw-display); font-size: 19px;
	letter-spacing: -.01em; color: var(--opcw-ink); line-height: 1.2; margin: 0; }
.opcw-section__aside { font-size: 13px; white-space: nowrap; }
.opcw-secure-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--opcw-muted); font-size: 12px; }
.opcw-muted { color: var(--opcw-muted); }

/* ---------- extension section slots (opcw_before_section / opcw_after_section) ---------- */
.opcw-slot { margin: 0 0 var(--opcw-section-gap); }
.opcw-slot--header-before, .opcw-slot--header-after { margin: 0; }
.opcw-summary__sticky > .opcw-slot--summary-before { margin-bottom: 18px; }
.opcw-summary__sticky > .opcw-slot--summary-after { margin: 18px 0 0; }

/* ---------- express slot ---------- */
.opcw-express { margin-bottom: 28px; }
.opcw-express__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--opcw-gap); }
.opcw-express__grid > * { height: 48px; }
.opcw-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; color: var(--opcw-faint);
	font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.opcw-divider::before, .opcw-divider::after { content: ""; flex: 1; height: 1px; background: var(--opcw-line); }

/* ---------- rows + floating-label fields ---------- */
.opcw-row { display: grid; gap: var(--opcw-gap); margin-bottom: var(--opcw-gap); }
.opcw-row--2 { grid-template-columns: 1fr 1fr; }
.opcw-row--plz { grid-template-columns: minmax(110px, .8fr) 1.6fr; }
@media (max-width: 480px) { .opcw-row--2 { grid-template-columns: 1fr; } }

.opcw p.form-row { margin: 0 0 var(--opcw-gap); }
.opcw .opcw-row > p.form-row { margin: 0; }
.opcw-field { position: relative; }

/*
 * Field geometry (54px box, floating label):
 *   floated label   top 8px / 10.5px  → occupies 8–21px
 *   input value     pad-top 24px, 15px/22.5px line → 24–46.5px (center ≈ 35)
 *   select value    pad-top 18px, browser centers in the content box (≈ 36)
 * Selectors are DEPTH-AGNOSTIC (no child combinator): wc-country-select swaps
 * the state control in place and third parties may wrap controls.
 */
.opcw-field .opcw-input,
.opcw-field input.input-text,
.opcw-field select {
	width: 100%; height: var(--opcw-field-h); padding: 24px 14px 5px;
	border: 1px solid var(--opcw-line); border-radius: var(--opcw-radius-sm);
	background: var(--opcw-surface); color: var(--opcw-ink);
	font: inherit; font-size: 15px; line-height: 1.5; outline: none; appearance: none; -webkit-appearance: none;
	transition: border-color .12s, box-shadow .12s; box-shadow: var(--opcw-shadow); margin: 0;
}
.opcw-field select {
	padding: 18px 36px 0 14px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2374787e" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>');
	background-repeat: no-repeat; background-position: right 14px center;
}
.opcw-field .opcw-textarea { height: auto; min-height: 96px; padding-top: 26px; resize: vertical; line-height: 1.5; }
.opcw-field__lbl {
	position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
	font-size: 15px; color: var(--opcw-muted); pointer-events: none;
	transition: all .12s ease; max-width: calc(100% - 30px); white-space: nowrap; overflow: hidden; margin: 0;
}
/* Inline field error (Block Mode: span.opcw-field__error under the input while the field is
   invalid). The field row grows, so an unfloated label stays centred on the INPUT, not the row
   (placed before the floated rules so those still win). */
.opcw-field:has(> .opcw-field__error) .opcw-field__lbl { top: calc(var(--opcw-field-h) / 2); }
.opcw .opcw-field__error { display: block; margin: 5px 2px 0; font-size: 12.5px; line-height: 1.4; color: var(--opcw-error); }
/* floated state — :has() (modern) + .is-float / JS fallback classes; selects
   and static fields float permanently */
.opcw-field:has(.opcw-input:focus) .opcw-field__lbl,
.opcw-field:has(.opcw-input:not(:placeholder-shown)) .opcw-field__lbl,
.opcw-field:has(.opcw-input:-webkit-autofill) .opcw-field__lbl,
.opcw-field:has(input.input-text:focus) .opcw-field__lbl,
.opcw-field:has(input.input-text:not(:placeholder-shown)) .opcw-field__lbl,
.opcw-field:has(select) .opcw-field__lbl,
.opcw-field:has(.opcw-field__static) .opcw-field__lbl,
.opcw-field .opcw-field__lbl.is-float,
.opcw-field.has-value .opcw-field__lbl,
.opcw-field.is-focused .opcw-field__lbl {
	top: 8px; transform: none; font-size: 10.5px; letter-spacing: .01em;
}
.opcw-field .opcw-input:focus,
.opcw-field input.input-text:focus,
.opcw-field select:focus { border-color: var(--opcw-line-strong); box-shadow: var(--opcw-focus); }
.opcw-field .opcw-input::placeholder,
.opcw-field input.input-text::placeholder { color: transparent; }
.opcw-field__chev { display: none; } /* superseded by the select background chevron */
.opcw-field__static { display: flex; align-items: flex-end; height: var(--opcw-field-h); padding: 24px 14px 7px;
	border: 1px solid var(--opcw-line); border-radius: var(--opcw-radius-sm); background: var(--opcw-surface);
	color: var(--opcw-ink); font-size: 15px; box-shadow: var(--opcw-shadow); }

/* wc-address-i18n rewrites labels client-side and injects required markers —
   the design doesn't use asterisks (required = everything not "(optional)"). */
.opcw abbr.required { display: none; }

/* validation states (WC toggles these) */
.opcw .form-row.woocommerce-invalid .opcw-input,
.opcw .form-row.woocommerce-invalid input.input-text,
.opcw .form-row.woocommerce-invalid select { border-color: var(--opcw-error); }
.opcw .form-row.woocommerce-validated .opcw-input { border-color: var(--opcw-line); }

/* minimal select2 sanity (selectWoo is disabled on the takeover, but another
   plugin may force it in) */
.opcw .select2-container .select2-selection--single { height: var(--opcw-field-h); border: 1px solid var(--opcw-line); border-radius: var(--opcw-radius-sm); }
.opcw .select2-container .select2-selection__rendered { line-height: var(--opcw-field-h); padding-left: 14px; }
.opcw .select2-container .select2-selection__arrow { height: var(--opcw-field-h); }

/* ---------- adopted native fields ----------
 * Custom / third-party checkout fields printed straight into the preserved
 * WooCommerce action hooks (woocommerce_before_order_notes, field-editor
 * plugins, bespoke snippets) render as bare `.form-row` + `input.input-text`
 * with NO `.opcw-field` wrapper, so the floating-label rules above can't reach
 * them and they read as foreign controls. Give those the OPC box + a clean top
 * label (native markup puts the <label> before the input, so a floating label
 * can't be forced — a top label is the honest match). Purely cosmetic: scoped
 * to the controls the WC field API emits and never touching the field model,
 * hooks, POST payload, or validation. `.input-text` is the safe signal — qty,
 * search and quantity inputs don't carry it, so they're left alone. */
.opcw .form-row:not(.opcw-field) input.input-text,
.opcw .form-row:not(.opcw-field) select,
.opcw .form-row:not(.opcw-field) textarea {
	width: 100%; height: var(--opcw-field-h); padding: 0 14px; margin: 0;
	border: 1px solid var(--opcw-line); border-radius: var(--opcw-radius-sm);
	background: var(--opcw-surface); color: var(--opcw-ink);
	font: inherit; font-size: 15px; line-height: 1.5; outline: none;
	appearance: none; -webkit-appearance: none;
	transition: border-color .12s, box-shadow .12s; box-shadow: var(--opcw-shadow);
}
.opcw .form-row:not(.opcw-field) select {
	padding: 0 36px 0 14px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2374787e" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>');
	background-repeat: no-repeat; background-position: right 14px center;
}
.opcw .form-row:not(.opcw-field) textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.opcw .form-row:not(.opcw-field) input.input-text:focus,
.opcw .form-row:not(.opcw-field) select:focus,
.opcw .form-row:not(.opcw-field) textarea:focus { border-color: var(--opcw-line-strong); box-shadow: var(--opcw-focus); }
.opcw .form-row:not(.opcw-field) .woocommerce-input-wrapper { display: block; }
/* top label — only on rows that actually carry a text control, so checkbox /
   radio rows (whose <label> wraps the control) keep their native layout. */
.opcw .form-row:not(.opcw-field):has(input.input-text, select, textarea) > label {
	display: block; margin: 0 0 6px; padding: 0;
	font-size: 12px; font-weight: 500; letter-spacing: .01em; line-height: 1.4; color: var(--opcw-muted);
}
.opcw .form-row:not(.opcw-field) > label .optional { color: var(--opcw-faint); font-weight: 400; }
.opcw .form-row:not(.opcw-field).woocommerce-invalid input.input-text,
.opcw .form-row:not(.opcw-field).woocommerce-invalid select,
.opcw .form-row:not(.opcw-field).woocommerce-invalid textarea { border-color: var(--opcw-error); }

.opcw-field:has(.opcw-ac:not([hidden])) { z-index: 5; } /* raise the field so its dropdown sits above siblings */

/* address autocomplete dropdown — one combobox UI for hosted (OnePageCheckout Geo) and own-key Google */
.opcw-ac { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
	background: var(--opcw-surface); border: 1px solid var(--opcw-line-strong); border-radius: var(--opcw-radius-sm);
	box-shadow: 0 12px 32px rgba(20, 22, 26, .14); overflow: hidden; margin: 0; padding: 0; list-style: none; text-align: left; }
.opcw-ac[hidden] { display: none; }
.opcw-ac__list { margin: 0; padding: 0; }
.opcw-ac__item { display: block; width: 100%; text-align: left; padding: 10px 14px; margin: 0; background: none;
	border: 0; border-bottom: 1px solid var(--opcw-line); font: inherit; font-size: 13.5px; line-height: 1.4; cursor: pointer;
	-webkit-tap-highlight-color: transparent; user-select: none; }
.opcw-ac__item:last-child { border-bottom: 0; }
.opcw-ac__item b { display: block; font-weight: 600; color: var(--opcw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opcw-ac__item span { display: block; font-size: 12px; color: var(--opcw-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opcw-ac__item:hover, .opcw-ac__item.is-active { background: color-mix(in srgb, var(--opcw-accent) 4%, var(--opcw-surface)); }
/* OSM credit: by default in the bottom-right corner of the LAST suggestion row, on
   its secondary line (no extra height). When that row's text would reach it, JS
   adds .opcw-ac--attr-line and the credit takes its own small line instead. */
.opcw-ac__attr { position: absolute; right: 14px; bottom: 12px; z-index: 1; padding: 0; border: 0; font-size: 10px; line-height: 1.2;
	color: var(--opcw-muted); opacity: .75; text-align: right; letter-spacing: .01em; white-space: nowrap; user-select: none; }
.opcw-ac--attr-line .opcw-ac__attr { position: static; padding: 0 10px 3px; }
.opcw .opcw-ac__attr a { color: inherit; text-decoration: none; }
.opcw .opcw-ac__attr a:hover { text-decoration: underline; }
.opcw-ac__attr[hidden], .opcw-ac__attr:empty { display: none; }
@media (max-width: 640px) {
	.opcw-ac__item { padding: 12px 14px; font-size: 14.5px; }
	.opcw-ac__item span { font-size: 13px; }
	.opcw-ac__attr { bottom: 14px; }
}


/* quiet toggles + checks */
.opcw-quiet { background: none; border: 0; padding: 0; margin: 2px 2px 12px; font-size: 13px; color: var(--opcw-muted);
	text-decoration: underline; text-underline-offset: 2px; }
.opcw-quiet:hover { color: var(--opcw-ink); }
.opcw-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--opcw-text); cursor: pointer; margin: 12px 0 0; }
.opcw-check input { width: 18px; height: 18px; margin: 2px 0 0 !important; padding: 0; accent-color: var(--opcw-accent); flex: none;
	position: static !important; top: auto !important; /* WC/theme css nudges .input-checkbox via relative top */ }
.opcw-check span { margin-top: 0.5px; }

/* login collapse */
.opcw-login { border: 1px solid var(--opcw-line); border-radius: var(--opcw-radius); background: var(--opcw-surface);
	padding: 18px; margin-bottom: 14px; box-shadow: var(--opcw-shadow); }
.opcw-login form.login { border: 0; padding: 0; margin: 0; }
.opcw-login .form-row { margin: 0 0 var(--opcw-gap); position: relative; }
.opcw-login label:not(.woocommerce-form__label-for-checkbox) { display: block; font-size: 12px; color: var(--opcw-muted); margin: 0 0 4px; }
.opcw-login input.input-text { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--opcw-line);
	border-radius: var(--opcw-radius-sm); font: inherit; font-size: 15px; }
.opcw-login .woocommerce-form-login__submit { height: 46px; padding: 0 22px; border: 0; border-radius: var(--opcw-radius-sm);
	background: var(--opcw-primary); color: var(--opcw-primary-ink); font-weight: 600; }
.opcw-login .lost_password { font-size: 12.5px; margin-top: 8px; }

/* account creation */
.opcw .create-account { margin-top: var(--opcw-gap); }

/* ---------- option cards (shipping + payment) ---------- */
.opcw-options { border: 1px solid var(--opcw-line); border-radius: var(--opcw-radius); overflow: hidden;
	background: var(--opcw-surface); box-shadow: var(--opcw-shadow); }
.opcw-option { display: block; border-bottom: 1px solid var(--opcw-line); position: relative; margin: 0; }
.opcw-option:last-child { border-bottom: 0; }
.opcw-option__row { display: flex; align-items: center; gap: 12px; padding: 15px 16px; cursor: pointer; }
.opcw-option input[type="radio"] { width: 18px; height: 18px; accent-color: var(--opcw-accent); flex: none; margin: 0; }
.opcw-option__label { flex: 1; min-width: 0; font-size: 14.5px; color: var(--opcw-ink); font-weight: 500; }
.opcw-option__sub { display: block; font-size: 12.5px; color: var(--opcw-muted); font-weight: 400; margin-top: 1px; }
.opcw-option__price { font-weight: 600; color: var(--opcw-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opcw-option__free { color: var(--opcw-success); font-weight: 600; }
.opcw-option.is-selected { background: color-mix(in srgb, var(--opcw-accent) 3%, var(--opcw-surface)); }
.opcw-option.is-selected .opcw-option__row { box-shadow: inset 3px 0 0 var(--opcw-accent); }
.opcw-ship-empty { border: 1px dashed var(--opcw-line); border-radius: var(--opcw-radius); padding: 16px; font-size: 13.5px; color: var(--opcw-muted); }
.opcw-ship-pkg { font-family: var(--opcw-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--opcw-faint); margin: 0 0 8px; }

/* ---------- native payment block, restyled ---------- */
.opcw #payment { background: transparent; border-radius: 0; }
.opcw #payment ul.wc_payment_methods { list-style: none; margin: 0; padding: 0;
	border: 1px solid var(--opcw-line); border-radius: var(--opcw-radius); overflow: hidden;
	background: var(--opcw-surface); box-shadow: var(--opcw-shadow); }
.opcw #payment ul.wc_payment_methods li { border-bottom: 1px solid var(--opcw-line); margin: 0; padding: 0; position: relative; }
.opcw #payment ul.wc_payment_methods li:last-child { border-bottom: 0; }
.opcw #payment ul.wc_payment_methods li > label { display: flex; align-items: center; gap: 12px; padding: 15px 44px 15px 46px;
	cursor: pointer; font-size: 14.5px; font-weight: 500; color: var(--opcw-ink); margin: 0; }
.opcw #payment ul.wc_payment_methods li > input[type="radio"] { position: absolute; left: 16px; top: 17px;
	width: 18px; height: 18px; accent-color: var(--opcw-accent); margin: 0; }
.opcw #payment ul.wc_payment_methods li > label img { max-height: 24px; width: auto; margin-left: auto; }
/* single gateway: WC renders no radio — don't reserve space for one */
.opcw #payment ul.wc_payment_methods li:only-child > label { padding-left: 16px; }
.opcw #payment ul.wc_payment_methods li:only-child div.payment_box { padding-left: 16px; }
.opcw #payment ul.wc_payment_methods li.opcw-pm-selected { background: color-mix(in srgb, var(--opcw-accent) 3%, var(--opcw-surface)); }
.opcw #payment ul.wc_payment_methods li.opcw-pm-selected::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--opcw-accent); }
.opcw #payment div.payment_box { margin: 0; padding: 4px 16px 16px 46px; background: transparent; color: var(--opcw-muted); font-size: 13px; line-height: 1.55; }
.opcw #payment div.payment_box::before { display: none; }
.opcw #payment div.payment_box p { margin: 0 0 6px; }
/* Keep our payment-box inset when gateway CSS zeroes it with !important
   (e.g. `#payment .payment_methods li .payment_box { padding: 0 !important }`
   on phones): same values as above, more specific, both engines. */
.opcw #payment ul.wc_payment_methods > li > div.payment_box { padding: 4px 16px 16px 46px !important; }
.opcw #payment ul.wc_payment_methods > li:only-child > div.payment_box { padding-left: 16px !important; }
/* Phones: an inline payment form (card fields in a fieldset) gets the full width, not the 46px text inset. */
@media (max-width: 480px) {
	.opcw #payment ul.wc_payment_methods > li > div.payment_box:has(fieldset) { padding-left: 16px !important; }
}
.opcw #payment .form-row.place-order { padding: 0; margin: 0; }
/* Billing address subsection: two option cards (same as delivery / different);
   the "different" card expands the billing fields inside the card group.
   Its own section (kicker + h2) inside #payment, in Shopify order: payment
   methods → billing → terms + pay button (classic: OPCW_Checkout::
   print_payment(); Block Mode: PaymentSection afterMethods). Classic fallback
   (unsplittable payment markup): above #payment. */
.opcw .opcw-billing { min-width: 0; }
.opcw #payment > .opcw-billing { margin: var(--opcw-section-gap) 0 24px; }
.opcw .opcw-billing .opcw-section__head { margin-bottom: 14px; }
/* Split payment block: WooCommerce blocks the whole #payment on refresh; hide
   that overlay and dim only the refreshed live parts (billing stays usable). */
.opcw #payment:has(> .opcw-pm-live) > .blockUI { display: none !important; }
.opcw-pm-live, .opcw-po-live { transition: opacity .15s ease; }
#opcw-payment.is-updating .opcw-pm-live, #opcw-payment.is-updating .opcw-po-live { opacity: .55; pointer-events: none; }
/* overflow stays visible so the address-autocomplete dropdown is never clipped;
   corners are rounded per edge instead. */
.opcw .opcw-billing__options { overflow: visible; }
.opcw-billing__options > .opcw-option:first-child,
.opcw-billing__options > .opcw-option:first-child .opcw-option__row { border-radius: calc(var(--opcw-radius) - 1px) calc(var(--opcw-radius) - 1px) 0 0; }
.opcw-billing__options > .opcw-option:nth-child(2) { border-bottom: 0; }
.opcw-billing:not(.is-different) .opcw-billing__options > .opcw-option:nth-child(2),
.opcw-billing:not(.is-different) .opcw-billing__options > .opcw-option:nth-child(2) .opcw-option__row { border-radius: 0 0 calc(var(--opcw-radius) - 1px) calc(var(--opcw-radius) - 1px); }
.opcw-billing__panel { display: grid; grid-template-rows: 0fr; visibility: hidden;
	transition: grid-template-rows .28s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .28s; }
.opcw-billing__panel-in { min-height: 0; overflow: hidden; }
.opcw-billing.is-different .opcw-billing__panel { grid-template-rows: 1fr; visibility: visible;
	border-top: 1px solid var(--opcw-line);
	transition: grid-template-rows .28s cubic-bezier(.2, .7, .2, 1), visibility 0s linear 0s; }
.opcw-billing.is-settled .opcw-billing__panel-in { overflow: visible; }
/* Without JavaScript (or before it has run) the checked radio alone drives
   the panel and the selected card. Separate rules on purpose: a browser
   without :has() must drop only these, not the JS-driven rules above.
   .opcw-billing--js marks the enhanced state (animated, JS-unclipped). */
.opcw-billing:has(#opcw_bill_diff:checked) .opcw-billing__panel { grid-template-rows: 1fr; visibility: visible;
	border-top: 1px solid var(--opcw-line);
	transition: grid-template-rows .28s cubic-bezier(.2, .7, .2, 1), visibility 0s linear 0s; }
.opcw-billing:has(#opcw_bill_diff:checked) .opcw-billing__options > .opcw-option:nth-child(2),
.opcw-billing:has(#opcw_bill_diff:checked) .opcw-billing__options > .opcw-option:nth-child(2) .opcw-option__row { border-radius: 0; }
.opcw-billing:not(.opcw-billing--js):has(#opcw_bill_diff:checked) .opcw-billing__panel-in { overflow: visible; }
.opcw-billing:not(.opcw-billing--js) .opcw-billing__options > .opcw-option { background: transparent; }
.opcw-billing:not(.opcw-billing--js) .opcw-billing__options > .opcw-option .opcw-option__row { box-shadow: none; }
.opcw-billing:not(.opcw-billing--js) .opcw-billing__options > .opcw-option:has(input:checked) { background: color-mix(in srgb, var(--opcw-accent) 3%, var(--opcw-surface)); }
.opcw-billing:not(.opcw-billing--js) .opcw-billing__options > .opcw-option:has(input:checked) .opcw-option__row { box-shadow: inset 3px 0 0 var(--opcw-accent); }
/* The closing-animation copy (Block Mode) never shows validation state. */
.opcw-billing__ghost .woocommerce-invalid .opcw-input,
.opcw-billing__ghost .woocommerce-invalid select { border-color: var(--opcw-line) !important; box-shadow: none !important; }
.opcw .opcw-billing__fields { padding: 16px 16px 8px; border-radius: 0 0 calc(var(--opcw-radius) - 1px) calc(var(--opcw-radius) - 1px);
	background: color-mix(in srgb, var(--opcw-ink) 2.5%, var(--opcw-surface)); }
@media (max-width: 480px) { .opcw .opcw-billing__fields { padding: 14px 12px 6px; } }
@media (prefers-reduced-motion: reduce) { .opcw-billing__panel, .opcw-billing.is-different .opcw-billing__panel { transition: none; } }

/* terms + privacy */
.opcw .woocommerce-terms-and-conditions-wrapper { margin: 18px 0 0; font-size: 13px; color: var(--opcw-muted); }
.opcw .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p { margin: 0 0 10px; line-height: 1.6; }
.opcw .woocommerce-terms-and-conditions-checkbox-text { font-size: 13.5px; }
.opcw .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.opcw .woocommerce-form__label-for-checkbox input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--opcw-accent); flex: none; }

/* ---------- pay button + trust ---------- */
/* The pay CTA defends its colors with !important — themes and gateways love
   to restyle .button.alt/#place_order, and a broken pay button is the one
   thing a checkout plugin can never allow. */
.opcw .opcw-btn-primary {
	width: 100%; height: 58px; margin-top: 22px;
	background: var(--opcw-primary) !important; color: var(--opcw-primary-ink) !important;
	border: 0 !important; border-radius: var(--opcw-radius) !important;
	font-size: 15.5px; font-weight: 700; letter-spacing: var(--opcw-ls-btn); text-transform: var(--opcw-tt-btn);
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
	transition: filter .12s, transform .05s;
}
.opcw .opcw-btn-primary:not(#place_order)::before { display: none; }
.opcw .opcw-btn-primary::before {
	content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>') center / contain no-repeat;
}
.opcw .opcw-btn-primary:hover { filter: brightness(1.12); }
.opcw .opcw-btn-primary:active { transform: translateY(1px); }
.opcw .opcw-btn-primary:disabled { opacity: .6; cursor: wait; }
.opcw-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px;
	font-family: var(--opcw-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--opcw-faint); }
.opcw-trust span { display: inline-flex; align-items: center; gap: 6px; }

.opcw-footnav { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--opcw-line);
	display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; }
.opcw-footnav a { color: var(--opcw-muted); text-decoration: none; }
.opcw-footnav a:hover { color: var(--opcw-ink); text-decoration: underline; }

/* ---------- notices ---------- */
.opcw-notices { margin-bottom: 18px; }
.opcw .woocommerce-error, .opcw .woocommerce-message, .opcw .woocommerce-info {
	list-style: none; margin: 0 0 12px; padding: 14px 16px;
	border: 1px solid var(--opcw-line); border-left: 3px solid var(--opcw-error); border-radius: var(--opcw-radius-sm);
	background: var(--opcw-surface); color: var(--opcw-ink); font-size: 13.5px; box-shadow: var(--opcw-shadow);
}
.opcw .woocommerce-error li { margin: 0 0 6px; }
.opcw .woocommerce-error li:last-child { margin: 0; }
.opcw .woocommerce-message { border-left-color: var(--opcw-success); }
.opcw .woocommerce-info { border-left-color: var(--opcw-accent); }
/* Block Mode: dismissible notices (text + close button per notice) */
.opcw-notices:focus { outline: none; }
/* Block Mode: a failed Pay focuses the payment notice (or the payment section) for screen
   readers — programmatic focus of a non-interactive container, no focus ring */
.opcw #payment .woocommerce-error:focus, .opcw #payment .wc-block-components-notice-banner:focus,
.opcw #opcw-payment:focus { outline: none; }
.opcw .opcw-notice { display: flex; align-items: flex-start; gap: 10px; }
.opcw .opcw-notice__text { flex: 1 1 auto; min-width: 0; }
.opcw .opcw-notice__close { flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; min-height: 0; margin: -1px -6px -1px 0; padding: 0; border: 0; border-radius: var(--opcw-radius-sm);
	background: none; box-shadow: none; color: var(--opcw-muted); line-height: 1; cursor: pointer; transition: color .15s; }
.opcw .opcw-notice__close:hover { background: none; color: var(--opcw-ink); }
.opcw .opcw-notice__close svg { width: 14px; height: 14px; }
.opcw .woocommerce-NoticeGroup { margin-bottom: 18px; display: block; }

/* blockUI overlay (WC uses it during AJAX) */
.opcw .blockUI.blockOverlay { background: rgba(255, 255, 255, .6) !important; }

/* ---------- order summary ---------- */
.opcw-sum__title { font-family: var(--opcw-font-display); font-weight: var(--opcw-fw-display); font-size: 16px;
	color: var(--opcw-ink); margin: 0 0 18px; }
.opcw-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; }
.opcw-item__thumb { position: relative; width: 64px; height: 64px; border: 1px solid var(--opcw-line);
	border-radius: var(--opcw-radius-sm); background: #fff; }
.opcw-item__thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; }
.opcw-item__qty { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 6px;
	border-radius: 10px; background: var(--opcw-muted); color: #fff; font-size: 11.5px; font-weight: 600;
	display: inline-flex; align-items: center; justify-content: center; }
.opcw-item__body { min-width: 0; }
.opcw-item__name { display: block; font-size: 13.5px; font-weight: 500; color: var(--opcw-ink); line-height: 1.35; }
.opcw-item__meta { display: block; font-size: 12px; color: var(--opcw-muted); margin-top: 2px; }
.opcw-item__meta p, .opcw-item__meta dl, .opcw-item__meta dt, .opcw-item__meta dd { display: inline; margin: 0; }
.opcw-item__price { font-size: 13.5px; font-weight: 600; color: var(--opcw-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* editable cart (opt-in): qty stepper + remove per line */
.opcw-item--editable { align-items: start; }
.opcw-item--editable .opcw-item__price { padding-top: 1px; }
.opcw-item.is-busy { opacity: .5; pointer-events: none; }
.opcw-item__edit { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.opcw-qty { display: inline-flex; align-items: center; height: 32px; border: 1px solid var(--opcw-line);
	border-radius: var(--opcw-radius-sm); background: var(--opcw-surface); overflow: hidden; }
.opcw-qty__btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
	border: 0; background: none; color: var(--opcw-ink); padding: 0; transition: background .12s, color .12s; }
.opcw-qty__btn:hover:not([aria-disabled="true"]) { background: var(--opcw-bg-summary); }
.opcw-qty__btn[aria-disabled="true"] { color: var(--opcw-faint); cursor: default; }
/* keep the focus ring inside the overflow:hidden group so it isn't clipped */
.opcw-qty__btn:focus-visible { outline-offset: -2px; }
.opcw-qty__btn svg { width: 14px; height: 14px; }
.opcw-qty__n { min-width: 32px; padding: 0 2px; text-align: center; font-size: 13px; font-weight: 600;
	color: var(--opcw-ink); font-variant-numeric: tabular-nums; }
.opcw-item__qtystatic { font-size: 12.5px; color: var(--opcw-muted); }
.opcw-item__remove { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none;
	padding: 4px 2px; font-size: 12.5px; color: var(--opcw-muted); transition: color .15s; }
.opcw-item__remove:hover { color: var(--opcw-error); }
.opcw-item__remove svg { width: 14px; height: 14px; flex: none; }

/* summary progress (opcw_summary_progress, e.g. a free-shipping bar): between the items and the
   totals, same HTML in both engines and both summaries. Flush (no box): a message line + a 4px
   track; accent = progress, success = done. The check icon is in the markup, shown when done. */
.opcw-progress { padding: 8px 0 6px; }
.opcw-progress__msg { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; line-height: 1.4; color: var(--opcw-text); }
.opcw-progress__msg svg { display: none; flex: none; width: 15px; height: 15px; }
.opcw-progress__bar { position: relative; height: 4px; margin-top: 8px; border-radius: 999px; overflow: hidden;
	background: var(--opcw-line); background: color-mix(in srgb, var(--opcw-ink) 10%, transparent); }
.opcw-progress__fill { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--opcw-accent);
	transition: width .45s cubic-bezier(.2, .7, .2, 1), background-color .25s ease; }
/* 13px text: the darker mix keeps >= 4.5:1 on --opcw-bg-summary */
.opcw-progress.is-done .opcw-progress__msg { font-weight: 500; color: var(--opcw-success); color: color-mix(in srgb, var(--opcw-success) 75%, var(--opcw-ink)); }
.opcw-progress.is-done .opcw-progress__msg svg { display: block; color: var(--opcw-success); }
.opcw-progress.is-done .opcw-progress__fill { background: var(--opcw-success); }
@media (prefers-reduced-motion: reduce) { .opcw-progress__fill { transition: none; } }

.opcw-coupon { display: flex !important; gap: var(--opcw-gap); margin: 16px 0; } /* !important: wc-checkout.js hide()s form.checkout_coupon on init */
.opcw-coupon .form-row { flex: 1; margin: 0; }
.opcw-coupon .opcw-input { height: 46px; padding: 18px 14px 3px; box-shadow: none; }
.opcw-coupon .coupon-error-notice { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--opcw-error); }
.opcw .opcw-coupon .opcw-input.has-error { border-color: var(--opcw-error); }
.opcw-coupon__btn { height: 46px; padding: 0 18px; border: 1px solid var(--opcw-line); border-radius: var(--opcw-radius-sm);
	background: var(--opcw-surface); font-weight: 600; font-size: 13px; color: var(--opcw-muted); }
.opcw-coupon__btn:hover { border-color: var(--opcw-line-strong); color: var(--opcw-ink); }

.opcw-totals { border-top: 1px solid var(--opcw-line); padding-top: 14px; display: grid; gap: 8px; margin: 14px 0 0; }
.opcw-totals__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.opcw-totals__row dt { color: var(--opcw-muted); font-weight: 400; }
.opcw-totals__row dd { color: var(--opcw-ink); font-weight: 500; font-variant-numeric: tabular-nums; margin: 0; text-align: right; }
.opcw-totals__row--grand { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--opcw-line); align-items: baseline; }
.opcw-totals__row--grand dt { font-size: 15px; color: var(--opcw-ink); font-weight: 600; }
.opcw-totals__row--grand dd { font-family: var(--opcw-font-display); font-weight: var(--opcw-fw-display); font-size: 22px; }
.opcw-totals__row--grand dd .includes_tax { display: block; font-family: var(--opcw-font); font-size: 11.5px; color: var(--opcw-faint); font-weight: 400; margin-top: 2px; }
.opcw-totals__row--coupon dd .woocommerce-remove-coupon { font-size: 11.5px; margin-left: 6px; color: var(--opcw-muted); }

.opcw-sum__perks { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--opcw-line); display: grid; gap: 9px; }
.opcw-sum__perk { display: flex; gap: 9px; align-items: center; font-size: 12.5px; color: var(--opcw-muted); }
.opcw-sum__perk svg { color: var(--opcw-success); flex: none; }

/* Panel style (summary_perks_style = panel): a tinted trust box — heading +
   icon / title / description rows. Skinnable via --opcw-perks-panel-bg,
   --opcw-perks-panel-border and --opcw-perks-panel-radius (unset = derived
   from the accent / surface / line / radius tokens where the panel renders). */
.opcw-sum__perks--panel { display: block; margin-top: 22px; padding: 18px 18px 20px;
	border: 1px solid var(--opcw-perks-panel-border, color-mix(in srgb, var(--opcw-accent) 16%, var(--opcw-line)));
	border-radius: var(--opcw-perks-panel-radius, var(--opcw-radius));
	background: var(--opcw-perks-panel-bg, color-mix(in srgb, var(--opcw-accent) 5%, var(--opcw-surface))); }
.opcw .opcw-sum__perks-title { margin: 0 0 16px; font-family: var(--opcw-font-display); font-weight: var(--opcw-fw-display);
	font-size: 15px; line-height: 1.3; letter-spacing: -.01em; color: var(--opcw-ink); text-wrap: balance; }
.opcw-sum__perks-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.opcw-sum__perks--panel .opcw-sum__perk { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0;
	font-size: 13px; line-height: 1.45; color: var(--opcw-text); }
.opcw-sum__perks--panel .opcw-sum__perk svg { color: var(--opcw-accent); flex: none; width: 22px; height: 22px; }
.opcw-sum__perk-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.opcw-sum__perk-title { font-weight: 600; font-size: 13.5px; line-height: 1.35; color: var(--opcw-ink); }
.opcw-sum__perk-desc { font-size: 12.5px; line-height: 1.45; color: var(--opcw-muted); }
/* Mobile copy (main column): only while the summary aside is hidden. */
.opcw-sum__perks--m { display: none; }
@media (max-width: 999px) { .opcw-sum__perks--panel.opcw-sum__perks--m { display: block; margin: 24px 0 28px; } }

/* ---------- mobile summary accordion ---------- */
.opcw-msummary { display: none; }
@media (max-width: 999px) {
	.opcw-layout, .opcw-shell .opcw-layout { grid-template-columns: 1fr; }
	.opcw-main { padding: 24px 20px 56px; max-width: 640px; margin: 0 auto; justify-self: stretch; }
	.opcw-summary { display: none; }
	.opcw-msummary { display: block; border-bottom: 1px solid var(--opcw-line); background: var(--opcw-bg-summary); }
	.opcw-msummary__bar { max-width: 640px; margin: 0 auto; width: 100%; display: flex; align-items: center;
		justify-content: space-between; padding: 14px 20px; background: none; border: 0; font-size: 14px; color: var(--opcw-ink); }
	.opcw-msummary__bar b { font-size: 16px; }
	.opcw-msummary__bar .lbl { display: inline-flex; align-items: center; gap: 8px; color: var(--opcw-muted); }
	.opcw-msummary__bar svg { transition: transform .15s; }
	.opcw-msummary.is-open .opcw-msummary__bar svg { transform: rotate(180deg); }
	.opcw-msummary__body { max-width: 640px; margin: 0 auto; padding: 4px 20px 20px; }
}

/* ============================================================
   THANK-YOU
   ============================================================ */
.opcw-ty__hero { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 30px; }
.opcw-ty__check { width: 52px; height: 52px; border-radius: 50%; flex: none;
	background: color-mix(in srgb, var(--opcw-success) 12%, #fff); color: var(--opcw-success);
	display: grid; place-items: center; }
.opcw-ty__check.is-fail { background: color-mix(in srgb, var(--opcw-error) 10%, #fff); color: var(--opcw-error); }
.opcw-ty__order { font-family: var(--opcw-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--opcw-muted); margin-bottom: 4px; }
.opcw-ty__h1 { font-family: var(--opcw-font-display); font-weight: var(--opcw-fw-display); font-size: 26px;
	letter-spacing: -.015em; color: var(--opcw-ink); line-height: 1.15; margin: 0; }
.opcw-ty__sub { margin-top: 8px; font-size: 14px; color: var(--opcw-muted); }
.opcw-ty__sub b { color: var(--opcw-ink); font-weight: 600; }

.opcw-details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--opcw-gap); }
@media (max-width: 560px) { .opcw-details { grid-template-columns: 1fr; } }
.opcw-detail { border: 1px solid var(--opcw-line); border-radius: var(--opcw-radius-sm); background: var(--opcw-surface);
	padding: 16px; box-shadow: var(--opcw-shadow); }
.opcw-detail__k { font-family: var(--opcw-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--opcw-faint); margin-bottom: 8px; }
.opcw-detail__v { font-size: 13.5px; color: var(--opcw-text); line-height: 1.6; }
.opcw-detail__v b { color: var(--opcw-ink); font-weight: 600; }
.opcw-detail__v address { font-style: normal; }

/* extension region (gateway instructions, customizations) */
.opcw-ty__ext { margin: 30px 0 0; }
.opcw-ty__ext:empty { display: none; }
.opcw-ty__ext > * { margin-bottom: 18px; }
.opcw-ty__ext h2 { font-family: var(--opcw-font-display); font-weight: var(--opcw-fw-display); font-size: 17px; color: var(--opcw-ink); margin: 0 0 10px; }
.opcw-ty__ext table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.opcw-ty__ext table th, .opcw-ty__ext table td { text-align: left; padding: 8px 10px; border: 1px solid var(--opcw-line); }
.opcw-ty__ext .woocommerce-bacs-bank-details { border: 1px solid var(--opcw-line); border-radius: var(--opcw-radius-sm);
	background: var(--opcw-surface); padding: 16px; box-shadow: var(--opcw-shadow); }
.opcw-ty__ext .woocommerce-bacs-bank-details h2, .opcw-ty__ext .woocommerce-bacs-bank-details h3 { font-size: 14px; margin: 0 0 8px; }
.opcw-ty__ext ul.order_details,
.opcw-ty__ext .woocommerce-order-details,
.opcw-ty__ext .woocommerce-customer-details { display: none; } /* WC core re-prints order/customer tables on woocommerce_thankyou — our layout already shows them */

.opcw-ty__help { border: 1px solid var(--opcw-line); border-radius: var(--opcw-radius); background: var(--opcw-bg-summary);
	padding: 18px 20px; font-size: 13.5px; color: var(--opcw-text); margin: 30px 0 0; }
.opcw-ty__help b { color: var(--opcw-ink); }
.opcw-ty__actions { display: flex; flex-wrap: wrap; gap: var(--opcw-gap); margin-top: 30px; }
.opcw-ty__actions .opcw-btn-primary { width: auto; padding: 0 30px; height: 52px; margin-top: 0; }
.opcw-btn-secondary { height: 52px; padding: 0 26px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--opcw-line-strong); border-radius: var(--opcw-radius); background: var(--opcw-surface);
	color: var(--opcw-ink); font-weight: 600; font-size: 14px; text-decoration: none;
	letter-spacing: var(--opcw-ls-btn); text-transform: var(--opcw-tt-btn); }
.opcw-btn-secondary:hover { background: var(--opcw-bg-summary); }

/* empty cart */
.opcw-empty { padding: 40px 0; }
.opcw-empty p { margin: 10px 0 22px; color: var(--opcw-muted); }

/* ============================================================
   v2 — configurable design (button shape, offer card)
   ============================================================ */
.opcw .opcw-btn-primary { border-radius: var(--opcw-btn-radius, var(--opcw-radius)) !important; }
.opcw-coupon .opcw-input, .opcw-field .opcw-input, .opcw-field select { border-radius: var(--opcw-radius-sm); }

/* offer card (opcw_order_bump) — the checked state (not only is-added) draws the solid border,
   so the look follows a click at once; classic then swaps in the card rendered from the cart */
.opcw-bump { display: flex; gap: 12px; align-items: flex-start; padding: 15px 16px; margin: 0 0 16px;
	border: 1.5px dashed var(--opcw-accent); border-radius: var(--opcw-radius); background: color-mix(in srgb, var(--opcw-accent) 4%, var(--opcw-surface)); cursor: pointer; transition: background .15s; }
.opcw-bump:hover { background: color-mix(in srgb, var(--opcw-accent) 7%, var(--opcw-surface)); }
.opcw-bump.is-added { border-style: solid; }
.opcw-bump.is-busy { opacity: .6; cursor: progress; }
.opcw-bump:has(input:checked) { border-style: solid; }
.opcw-bump input { width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--opcw-accent); flex: none; }
.opcw-bump__title { display: block; font-weight: 700; color: var(--opcw-ink); font-size: 14px; }
.opcw-bump__name { display: block; color: var(--opcw-text); font-size: 13px; margin-top: 2px; }

/* ============================================================
   THEME-BLEED HARDENING
   Scoped, moderate-specificity resets for theme patterns observed on
   live installs (Neve, GeneratePress, Hello Elementor, dark themes).
   Everything stays inside .opcw / body.opcw — nothing leaks outside
   the takeover page.
   ============================================================ */

/* Hidden mirror fields (e.g. the deduped shipping_phone) must not leave a gap. */
.opcw p.opcw-field--hidden { display: none; margin: 0; }

/* Form controls: full-width, overflow-safe, visually ours. Neve sizes inputs
   to content width inside grid columns; dark themes invert input background
   and text color. */
.opcw .opcw-field input.input-text,
.opcw .opcw-field .opcw-input,
.opcw .opcw-field select,
.opcw .opcw-field textarea {
	box-sizing: border-box; width: 100%; min-width: 0; max-width: none; float: none;
	background-color: var(--opcw-surface); color: var(--opcw-ink);
	appearance: none; -webkit-appearance: none;
}
/* Selects in the float pattern: re-assert the reserved label space (Neve's
   floating labels collide with the select value, e.g. "Country/Region" over
   "Switzerland") and keep the label raised. */
.opcw .opcw-field select { height: var(--opcw-field-h); padding: 18px 36px 0 14px; }
.opcw .opcw-field .opcw-field__lbl.is-float { top: 8px; transform: none; font-size: 10.5px; }
/* Native widgets (select dropdown, checkbox glyphs) stay light even when a
   dark theme sets color-scheme: dark on :root. */
body.opcw { color-scheme: light; }
/* Checkbox/radio: opinionated themes (e.g. a Blocksy child skin) strip the UA
   appearance (appearance:none + a themed/transparent fill) and shove the box
   down via position:relative;top — leaving WC's terms / remember-me / create-
   account checkboxes hollow, muted and a few px too low. Reassert the native
   control so color-scheme:light + accent-color paint a crisp, aligned box, the
   way our own .opcw-check / #opcw_bill_same boxes already render. Radios only
   need appearance restored — the plugin positions payment radios itself, so we
   leave their box offset alone. */
.opcw input[type="checkbox"],
.opcw input[type="radio"] { appearance: auto !important; -webkit-appearance: auto !important; }
.opcw input[type="checkbox"] { position: static !important; top: auto !important; }
/* Radios: some themes (Blocksy: `.wc_payment_method > input[type=radio]:checked::before`)
   paint their own marker through pseudo-elements — on our native radios that
   shows as a square inside the dot. Our radios never use pseudo-elements, so
   drop them for every radio we render (payment, shipping, billing cards, both
   engines). body.opcw + .opcw-shell outranks those (0,3,2) selectors without
   !important. */
body.opcw .opcw-shell input[type="radio"]::before,
body.opcw .opcw-shell input[type="radio"]::after { content: none; display: none; background: none; box-shadow: none; border: 0; }

/* Name / postcode rows: explicit grid columns, no content-width collapse. */
.opcw .opcw-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcw .opcw-row--plz { grid-template-columns: minmax(110px, .8fr) minmax(0, 1.6fr); }
.opcw .opcw-row > .form-row { min-width: 0; width: auto; max-width: none; float: none; }
@media (max-width: 480px) { .opcw .opcw-row--2 { grid-template-columns: 1fr; } }

/* Theme-injected required asterisks / label pseudo-icons — the design marks
   optional fields instead (abbr.required is already hidden above). */
.opcw .opcw-field__lbl::before,
.opcw .opcw-field__lbl::after,
.opcw .form-row .required::before,
.opcw .form-row .required::after { content: none; }

/* Buttons: themes hide svgs inside buttons and reset button ::before — which
   would erase the Pay-now lock (a CSS mask on #place_order::before). */
.opcw button svg { display: inline-block; vertical-align: middle; }
.opcw #place_order.opcw-btn-primary::before { content: ""; display: inline-block; }

/* Pay row: column flow — full-width button, trust badges centered BELOW it
   (theme flex/float form rules can pull the badges beside the button). */
.opcw #payment .form-row.place-order { display: block; width: 100%; float: none; }
.opcw #place_order { width: 100%; float: none; }
.opcw .opcw-pay-meta { display: block; width: 100%; clear: both; }
.opcw .opcw-trust { display: flex; width: 100%; }

/* Coupon: themes (GeneratePress) box coupon forms/fieldsets with borders. */
.opcw form.opcw-coupon { border: 0; background: none; padding: 0; box-shadow: none; }
.opcw .opcw-coupon fieldset { border: 0; margin: 0; padding: 0; background: none; }

/* Notices: themes prepend absolutely-positioned icons that overlap the text —
   the design signals the notice type via the left border color instead. */
.opcw .woocommerce-message::before,
.opcw .woocommerce-error::before,
.opcw .woocommerce-info::before { content: none; display: none; }
.opcw .woocommerce-message,
.opcw .woocommerce-error,
.opcw .woocommerce-info { position: static; padding: 14px 16px; }

/* wc-address-i18n.js injects <span class="required">*</span> when it rewrites
   locale labels client-side — same design rule as abbr.required above. */
.opcw span.required { display: none; }

/* Long labels in narrow columns (postcode at 390px) clip mid-letter — ellipsize. */
.opcw-field__lbl { text-overflow: ellipsis; }

/* Select float pattern, armored. Neve (and themes that print raw critical CSS
   with !important form rules AFTER our stylesheet) recenter the select value
   and keep its label un-floated. Selects always float their label by design,
   so pinning these with !important cannot fight legitimate customization. */
.opcw .opcw-field select {
	height: var(--opcw-field-h) !important;
	padding: 18px 36px 0 14px !important;
	line-height: 1.4 !important;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2374787e" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>') !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
}
.opcw .opcw-field:has(select) .opcw-field__lbl,
.opcw .opcw-field select ~ .opcw-field__lbl,
.opcw .opcw-field.has-value .opcw-field__lbl {
	top: 8px !important;
	transform: none !important;
	font-size: 10.5px !important;
	letter-spacing: .01em !important;
}

/* WooCommerce notice buttons (View cart / wc-forward): themes style them via
   .wp-element-button global styles, which the takeover dequeues — pin ours so
   the button can never render invisible (black-on-black seen on a child theme). */
.opcw .woocommerce-message .button,
.opcw .woocommerce-info .button,
.opcw a.wc-forward {
	background: var(--opcw-ink) !important;
	color: var(--opcw-surface) !important;
	border: 0 !important;
	border-radius: var(--opcw-radius-sm);
	padding: 8px 14px;
	text-decoration: none;
	font-size: 13px;
	line-height: 1.4;
	display: inline-block;
}

/* Block Mode parity: classic WC renders NO radio for a single gateway (the
   only-child rule above removes the reserved indent for exactly that reason).
   The React payment host always renders one — hide it in the same situation. */
.opcw--blocks #payment ul.wc_payment_methods li:only-child .input-radio,
.opcw--blocks #payment ul.wc_payment_methods li:only-child input[type="radio"] { display: none; }