/*!
 * OnePageCheckout for WooCommerce — base stylesheet (the "naked" look).
 * Fully driven by --wopc-* 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.
 */

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

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

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

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

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

/* ---------- split layout ---------- */
.wopc-shell { background: var(--wopc-bg); overflow-x: clip; }
.wopc-layout { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 460px; align-items: stretch; }
.wopc-layout--single { grid-template-columns: minmax(0, 1fr); }
.wopc-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. */
.wopc-layout--single .wopc-main { justify-self: center; }
.wopc-summary { position: relative; background: var(--wopc-bg-summary); border-left: 1px solid var(--wopc-line); padding: 36px 24px 64px 40px; }
.wopc-summary::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 50vw; background: var(--wopc-bg-summary); }
.wopc-summary__sticky { position: sticky; top: 24px; }

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

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

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

.wopc p.form-row { margin: 0 0 var(--wopc-gap); }
.wopc .wopc-row > p.form-row { margin: 0; }
.wopc-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.
 */
.wopc-field .wopc-input,
.wopc-field input.input-text,
.wopc-field select {
	width: 100%; height: var(--wopc-field-h); padding: 24px 14px 5px;
	border: 1px solid var(--wopc-line); border-radius: var(--wopc-radius-sm);
	background: var(--wopc-surface); color: var(--wopc-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(--wopc-shadow); margin: 0;
}
.wopc-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;
}
.wopc-field .wopc-textarea { height: auto; min-height: 96px; padding-top: 26px; resize: vertical; line-height: 1.5; }
.wopc-field__lbl {
	position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
	font-size: 15px; color: var(--wopc-muted); pointer-events: none;
	transition: all .12s ease; max-width: calc(100% - 30px); white-space: nowrap; overflow: hidden; margin: 0;
}
/* floated state — :has() (modern) + .is-float / JS fallback classes; selects
   and static fields float permanently */
.wopc-field:has(.wopc-input:focus) .wopc-field__lbl,
.wopc-field:has(.wopc-input:not(:placeholder-shown)) .wopc-field__lbl,
.wopc-field:has(.wopc-input:-webkit-autofill) .wopc-field__lbl,
.wopc-field:has(input.input-text:focus) .wopc-field__lbl,
.wopc-field:has(input.input-text:not(:placeholder-shown)) .wopc-field__lbl,
.wopc-field:has(select) .wopc-field__lbl,
.wopc-field:has(.wopc-field__static) .wopc-field__lbl,
.wopc-field .wopc-field__lbl.is-float,
.wopc-field.has-value .wopc-field__lbl,
.wopc-field.is-focused .wopc-field__lbl {
	top: 8px; transform: none; font-size: 10.5px; letter-spacing: .01em;
}
.wopc-field .wopc-input:focus,
.wopc-field input.input-text:focus,
.wopc-field select:focus { border-color: var(--wopc-line-strong); box-shadow: var(--wopc-focus); }
.wopc-field .wopc-input::placeholder,
.wopc-field input.input-text::placeholder { color: transparent; }
.wopc-field__chev { display: none; } /* superseded by the select background chevron */
.wopc-field__static { display: flex; align-items: flex-end; height: var(--wopc-field-h); padding: 24px 14px 7px;
	border: 1px solid var(--wopc-line); border-radius: var(--wopc-radius-sm); background: var(--wopc-surface);
	color: var(--wopc-ink); font-size: 15px; box-shadow: var(--wopc-shadow); }

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

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

/* minimal select2 sanity (selectWoo is disabled on the takeover, but another
   plugin may force it in) */
.wopc .select2-container .select2-selection--single { height: var(--wopc-field-h); border: 1px solid var(--wopc-line); border-radius: var(--wopc-radius-sm); }
.wopc .select2-container .select2-selection__rendered { line-height: var(--wopc-field-h); padding-left: 14px; }
.wopc .select2-container .select2-selection__arrow { height: var(--wopc-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 `.wopc-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. */
.wopc .form-row:not(.wopc-field) input.input-text,
.wopc .form-row:not(.wopc-field) select,
.wopc .form-row:not(.wopc-field) textarea {
	width: 100%; height: var(--wopc-field-h); padding: 0 14px; margin: 0;
	border: 1px solid var(--wopc-line); border-radius: var(--wopc-radius-sm);
	background: var(--wopc-surface); color: var(--wopc-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(--wopc-shadow);
}
.wopc .form-row:not(.wopc-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;
}
.wopc .form-row:not(.wopc-field) textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.wopc .form-row:not(.wopc-field) input.input-text:focus,
.wopc .form-row:not(.wopc-field) select:focus,
.wopc .form-row:not(.wopc-field) textarea:focus { border-color: var(--wopc-line-strong); box-shadow: var(--wopc-focus); }
.wopc .form-row:not(.wopc-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. */
.wopc .form-row:not(.wopc-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(--wopc-muted);
}
.wopc .form-row:not(.wopc-field) > label .optional { color: var(--wopc-faint); font-weight: 400; }
.wopc .form-row:not(.wopc-field).woocommerce-invalid input.input-text,
.wopc .form-row:not(.wopc-field).woocommerce-invalid select,
.wopc .form-row:not(.wopc-field).woocommerce-invalid textarea { border-color: var(--wopc-error); }

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

/* address autocomplete dropdown (Places API New, custom listbox) */
.wopc-ac { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
	background: var(--wopc-surface); border: 1px solid var(--wopc-line-strong); border-radius: var(--wopc-radius-sm);
	box-shadow: 0 12px 32px rgba(20, 22, 26, .14); overflow: hidden; margin: 0; padding: 0; list-style: none; }
.wopc-ac[hidden] { display: none; }
.wopc-ac__item { display: block; width: 100%; text-align: left; padding: 10px 14px; margin: 0; background: none;
	border: 0; border-bottom: 1px solid var(--wopc-line); font: inherit; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.wopc-ac__item:last-child { border-bottom: 0; }
.wopc-ac__item b { display: block; font-weight: 600; color: var(--wopc-ink); }
.wopc-ac__item span { display: block; font-size: 12px; color: var(--wopc-muted); margin-top: 1px; }
.wopc-ac__item:hover, .wopc-ac__item.is-active { background: color-mix(in srgb, var(--wopc-accent) 4%, var(--wopc-surface)); }


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

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

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

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

/* ---------- native payment block, restyled ---------- */
.wopc #payment { background: transparent; border-radius: 0; }
.wopc #payment ul.wc_payment_methods { list-style: none; margin: 0; padding: 0;
	border: 1px solid var(--wopc-line); border-radius: var(--wopc-radius); overflow: hidden;
	background: var(--wopc-surface); box-shadow: var(--wopc-shadow); }
.wopc #payment ul.wc_payment_methods li { border-bottom: 1px solid var(--wopc-line); margin: 0; padding: 0; position: relative; }
.wopc #payment ul.wc_payment_methods li:last-child { border-bottom: 0; }
.wopc #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(--wopc-ink); margin: 0; }
.wopc #payment ul.wc_payment_methods li > input[type="radio"] { position: absolute; left: 16px; top: 17px;
	width: 18px; height: 18px; accent-color: var(--wopc-accent); margin: 0; }
.wopc #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 */
.wopc #payment ul.wc_payment_methods li:only-child > label { padding-left: 16px; }
.wopc #payment ul.wc_payment_methods li:only-child div.payment_box { padding-left: 16px; }
.wopc #payment ul.wc_payment_methods li.wopc-pm-selected { background: color-mix(in srgb, var(--wopc-accent) 3%, var(--wopc-surface)); }
.wopc #payment ul.wc_payment_methods li.wopc-pm-selected::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--wopc-accent); }
.wopc #payment div.payment_box { margin: 0; padding: 4px 16px 16px 46px; background: transparent; color: var(--wopc-muted); font-size: 13px; line-height: 1.55; }
.wopc #payment div.payment_box::before { display: none; }
.wopc #payment div.payment_box p { margin: 0 0 6px; }
.wopc #payment .form-row.place-order { padding: 0; margin: 0; }
.wopc .wopc-billing { margin-top: 16px; }
.wopc .wopc-billing__fields { margin-top: 12px; }

/* terms + privacy */
.wopc .woocommerce-terms-and-conditions-wrapper { margin: 18px 0 0; font-size: 13px; color: var(--wopc-muted); }
.wopc .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p { margin: 0 0 10px; line-height: 1.6; }
.wopc .woocommerce-terms-and-conditions-checkbox-text { font-size: 13.5px; }
.wopc .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.wopc .woocommerce-form__label-for-checkbox input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--wopc-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. */
.wopc .wopc-btn-primary {
	width: 100%; height: 58px; margin-top: 22px;
	background: var(--wopc-primary) !important; color: var(--wopc-primary-ink) !important;
	border: 0 !important; border-radius: var(--wopc-radius) !important;
	font-size: 15.5px; font-weight: 700; letter-spacing: var(--wopc-ls-btn); text-transform: var(--wopc-tt-btn);
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
	transition: filter .12s, transform .05s;
}
.wopc .wopc-btn-primary:not(#place_order)::before { display: none; }
.wopc .wopc-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;
}
.wopc .wopc-btn-primary:hover { filter: brightness(1.12); }
.wopc .wopc-btn-primary:active { transform: translateY(1px); }
.wopc .wopc-btn-primary:disabled { opacity: .6; cursor: wait; }
.wopc-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px;
	font-family: var(--wopc-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--wopc-faint); }
.wopc-trust span { display: inline-flex; align-items: center; gap: 6px; }

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

/* ---------- notices ---------- */
.wopc-notices { margin-bottom: 18px; }
.wopc .woocommerce-error, .wopc .woocommerce-message, .wopc .woocommerce-info {
	list-style: none; margin: 0 0 12px; padding: 14px 16px;
	border: 1px solid var(--wopc-line); border-left: 3px solid var(--wopc-error); border-radius: var(--wopc-radius-sm);
	background: var(--wopc-surface); color: var(--wopc-ink); font-size: 13.5px; box-shadow: var(--wopc-shadow);
}
.wopc .woocommerce-error li { margin: 0 0 6px; }
.wopc .woocommerce-error li:last-child { margin: 0; }
.wopc .woocommerce-message { border-left-color: var(--wopc-success); }
.wopc .woocommerce-info { border-left-color: var(--wopc-accent); }
.wopc .woocommerce-NoticeGroup { margin-bottom: 18px; display: block; }

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

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

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

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

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

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

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

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

.wopc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 30px; }
.wopc-step { border: 1px solid var(--wopc-line); border-radius: var(--wopc-radius-sm); background: var(--wopc-surface);
	padding: 12px 14px; box-shadow: var(--wopc-shadow); }
.wopc-step__bar { display: block; height: 3px; border-radius: 2px; background: var(--wopc-line); margin-bottom: 10px; }
.wopc-step.is-done .wopc-step__bar, .wopc-step.is-now .wopc-step__bar { background: var(--wopc-success); }
.wopc-step__k { display: block; font-family: var(--wopc-font-mono); font-size: 10px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--wopc-faint); min-height: 1.2em; }
.wopc-step__t { display: block; font-size: 13px; font-weight: 600; color: var(--wopc-ink); margin-top: 2px; }
.wopc-step.is-later { opacity: .55; }
@media (max-width: 560px) { .wopc-steps { grid-template-columns: 1fr; } }

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

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

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

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

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

/* order bump */
.wopc-bump { display: flex; gap: 12px; align-items: flex-start; padding: 15px 16px; margin: 0 0 16px;
	border: 1.5px dashed var(--wopc-accent); border-radius: var(--wopc-radius); background: color-mix(in srgb, var(--wopc-accent) 4%, var(--wopc-surface)); cursor: pointer; transition: background .15s; }
.wopc-bump:hover { background: color-mix(in srgb, var(--wopc-accent) 7%, var(--wopc-surface)); }
.wopc-bump.is-added { border-style: solid; }
.wopc-bump input { width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--wopc-accent); flex: none; }
.wopc-bump__title { display: block; font-weight: 700; color: var(--wopc-ink); font-size: 14px; }
.wopc-bump__name { display: block; color: var(--wopc-text); font-size: 13px; margin-top: 2px; }

/* skins (body class set by the pro layer) */
body.wopc-skin-minimal .wopc-section__head .wopc-kicker { display: none; }
body.wopc-skin-minimal .wopc-options, body.wopc-skin-minimal #payment ul.wc_payment_methods { box-shadow: none; }
body.wopc-skin-bold .wopc-h2 { font-size: 22px; letter-spacing: -.02em; }
body.wopc-skin-bold .wopc-btn-primary { height: 62px; font-size: 17px; }
body.wopc-skin-classic { --wopc-bg: #fff; }
body.wopc-skin-classic .wopc-summary { background: #fafafa; }

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

/* Hidden mirror fields (e.g. the deduped shipping_phone) must not leave a gap. */
.wopc p.wopc-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. */
.wopc .wopc-field input.input-text,
.wopc .wopc-field .wopc-input,
.wopc .wopc-field select,
.wopc .wopc-field textarea {
	box-sizing: border-box; width: 100%; min-width: 0; max-width: none; float: none;
	background-color: var(--wopc-surface); color: var(--wopc-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. */
.wopc .wopc-field select { height: var(--wopc-field-h); padding: 18px 36px 0 14px; }
.wopc .wopc-field .wopc-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.wopc { 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 .wopc-check / #wopc_bill_same boxes already render. Radios only
   need appearance restored — the plugin positions payment radios itself, so we
   leave their box offset alone. */
.wopc input[type="checkbox"],
.wopc input[type="radio"] { appearance: auto !important; -webkit-appearance: auto !important; }
.wopc input[type="checkbox"] { position: static !important; top: auto !important; }

/* Name / postcode rows: explicit grid columns, no content-width collapse. */
.wopc .wopc-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wopc .wopc-row--plz { grid-template-columns: minmax(110px, .8fr) minmax(0, 1.6fr); }
.wopc .wopc-row > .form-row { min-width: 0; width: auto; max-width: none; float: none; }
@media (max-width: 480px) { .wopc .wopc-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). */
.wopc .wopc-field__lbl::before,
.wopc .wopc-field__lbl::after,
.wopc .form-row .required::before,
.wopc .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). */
.wopc button svg { display: inline-block; vertical-align: middle; }
.wopc #place_order.wopc-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). */
.wopc #payment .form-row.place-order { display: block; width: 100%; float: none; }
.wopc #place_order { width: 100%; float: none; }
.wopc .wopc-pay-meta { display: block; width: 100%; clear: both; }
.wopc .wopc-trust { display: flex; width: 100%; }

/* Coupon: themes (GeneratePress) box coupon forms/fieldsets with borders. */
.wopc form.wopc-coupon { border: 0; background: none; padding: 0; box-shadow: none; }
.wopc .wopc-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. */
.wopc .woocommerce-message::before,
.wopc .woocommerce-error::before,
.wopc .woocommerce-info::before { content: none; display: none; }
.wopc .woocommerce-message,
.wopc .woocommerce-error,
.wopc .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. */
.wopc span.required { display: none; }

/* Long labels in narrow columns (postcode at 390px) clip mid-letter — ellipsize. */
.wopc-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. */
.wopc .wopc-field select {
	height: var(--wopc-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;
}
.wopc .wopc-field:has(select) .wopc-field__lbl,
.wopc .wopc-field select ~ .wopc-field__lbl,
.wopc .wopc-field.has-value .wopc-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). */
.wopc .woocommerce-message .button,
.wopc .woocommerce-info .button,
.wopc a.wc-forward {
	background: var(--wopc-ink) !important;
	color: var(--wopc-surface) !important;
	border: 0 !important;
	border-radius: var(--wopc-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. */
.wopc--blocks #payment ul.wc_payment_methods li:only-child .input-radio,
.wopc--blocks #payment ul.wc_payment_methods li:only-child input[type="radio"] { display: none; }