/* =============================================================================
   Cart & checkout v5 — the "Sepulveda Cart Checkout v5" design.
   Tokens follow customer-portal.css; the colour values are overridable from
   API Sync → Settings → Fulfillment → "Cart & checkout colours" (they land as
   CSS variables on body.wcaps-skin, see wc_api_sync_cart_colors_css()).
   ============================================================================= */

body.wcaps-skin,
.wcaps-oview {
	--wcaps-primary: #0071dc;
	--wcaps-primary-light: #0071dc;
	--wcaps-primary-dark: #005ab0;
	--wcaps-primary-bg: #f3f7fc;
	--wcaps-primary-border: #d6e4f5;
	--wcaps-primary-text: #005ab0;
	--wcaps-text: #111827;
	--wcaps-text-muted: #6b7280;
	--wcaps-text-light: #9ca3af;
	--wcaps-border: #e5e7eb;
	--wcaps-border-light: #f3f4f6;
	--wcaps-border-input: #d1d5db;
	--wcaps-surface: #ffffff;
	--wcaps-ground: #f9fafb;
	--wcaps-success: #166534;
	--wcaps-success-bg: #dcfce7;
	--wcaps-warning: #92400e;
	--wcaps-warning-bg: #fef3c7;
	--wcaps-error: #b91c1c;
	--wcaps-error-bg: #fee2e2;
	--wcaps-radius: 12px;
	--wcaps-radius-sm: 8px;
	--wcaps-radius-xs: 6px;
	--wcaps-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wcaps-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---- ground ---------------------------------------------------------------- */
body.wcaps-skin .wcaps-cart,
body.wcaps-skin .wcaps-checkout,
body.wcaps-skin .wcaps-thanks {
	font-family: var(--wcaps-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--wcaps-text);
	max-width: 1440px;
	margin: 0 auto;
	box-sizing: border-box;
}
body.wcaps-skin .wcaps-cart *,
body.wcaps-skin .wcaps-checkout *,
body.wcaps-skin .wcaps-thanks * { box-sizing: border-box; }
body.wcaps-skin .wcaps-cart a,
body.wcaps-skin .wcaps-checkout a,
body.wcaps-skin .wcaps-thanks a { color: var(--wcaps-primary-dark); text-decoration: none; }
body.wcaps-skin .wcaps-cart a:hover,
body.wcaps-skin .wcaps-checkout a:hover { color: var(--wcaps-primary-text); text-decoration: underline; }
body.wcaps-skin .wcaps-cart h1, body.wcaps-skin .wcaps-cart h2, body.wcaps-skin .wcaps-cart h3, body.wcaps-skin .wcaps-cart h4,
body.wcaps-skin .wcaps-checkout h1, body.wcaps-skin .wcaps-checkout h2, body.wcaps-skin .wcaps-checkout h3, body.wcaps-skin .wcaps-checkout h4,
body.wcaps-skin .wcaps-thanks h2, body.wcaps-skin .wcaps-thanks h3 { font-family: var(--wcaps-font); color: var(--wcaps-text); margin: 0; letter-spacing: 0; text-transform: none; }
body.wcaps-skin .wcaps-cart input, body.wcaps-skin .wcaps-cart select, body.wcaps-skin .wcaps-cart button,
body.wcaps-skin .wcaps-checkout input, body.wcaps-skin .wcaps-checkout select, body.wcaps-skin .wcaps-checkout button, body.wcaps-skin .wcaps-checkout textarea { font: inherit; }
body.wcaps-skin .wcaps-cart ::placeholder, body.wcaps-skin .wcaps-checkout ::placeholder { color: var(--wcaps-text-light); opacity: 1; }
/* Working state: the totals dim (they are what is being recalculated) and a
   thin bar runs across the top. The rest of the cart stays legible and the
   choice the shopper just made stays visible. */
body.wcaps-skin .wcaps-cart.is-busy { pointer-events: none; }
body.wcaps-skin .wcaps-cart.is-busy .wcaps-summary,
body.wcaps-skin .wcaps-cart.is-busy .wcaps-group__fee { opacity: 0.45; transition: opacity 120ms ease; }
body.wcaps-skin .wcaps-cart.is-busy::before {
	content: "";
	position: absolute; inset: -2px 0 auto 0; height: 2px; z-index: 5;
	background: linear-gradient(90deg, transparent, var(--wcaps-primary), transparent);
	background-size: 40% 100%; background-repeat: no-repeat;
	animation: wcaps-working 900ms linear infinite;
}
@keyframes wcaps-working { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { body.wcaps-skin .wcaps-cart.is-busy::before { animation: none; background: var(--wcaps-primary); } }

/* ---- shared pieces ------------------------------------------------------------ */
.wcaps-card { background: var(--wcaps-surface); border: 1px solid var(--wcaps-border); border-radius: var(--wcaps-radius); }
.wcaps-btn,
body.wcaps-skin .wcaps-cart .wcaps-btn,
body.wcaps-skin .wcaps-checkout .wcaps-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border: 0; border-radius: var(--wcaps-radius-xs); padding: 9px 16px;
	font-weight: 600; font-size: 14px; line-height: 1.2; color: #fff !important; cursor: pointer; text-decoration: none !important;
	background: var(--wcaps-primary);
	background-image: linear-gradient(180deg, var(--wcaps-primary-light) 0%, var(--wcaps-primary) 100%);
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	transition: transform 80ms ease, box-shadow 150ms ease, background 150ms ease;
	text-transform: none; letter-spacing: 0.01em;
}
.wcaps-btn:hover { background-image: linear-gradient(180deg, var(--wcaps-primary) 0%, var(--wcaps-primary-dark) 100%); box-shadow: 0 4px 10px rgba(17, 24, 39, 0.16); }
.wcaps-btn:active { transform: translateY(1px); }
.wcaps-btn:focus-visible { outline: 2px solid var(--wcaps-primary-dark); outline-offset: 2px; }
.wcaps-btn[disabled], .wcaps-btn.is-disabled { background: var(--wcaps-border-input) !important; background-image: none !important; box-shadow: none; color: var(--wcaps-text-muted) !important; cursor: not-allowed; pointer-events: none; }
.wcaps-btn--line,
body.wcaps-skin .wcaps-cart .wcaps-btn--line,
body.wcaps-skin .wcaps-checkout .wcaps-btn--line { background: transparent !important; background-image: none !important; box-shadow: none; border: 1px solid var(--wcaps-border-input); color: var(--wcaps-text) !important; padding: 6px 12px; font-size: 13px; white-space: nowrap; }
.wcaps-btn--line:hover { border-color: var(--wcaps-primary); color: var(--wcaps-primary-dark) !important; }
.wcaps-btn--ghost,
body.wcaps-skin .wcaps-cart .wcaps-btn--ghost { background: transparent !important; background-image: none !important; box-shadow: none; border: 1px solid var(--wcaps-border-input); color: var(--wcaps-text) !important; }
.wcaps-btn--cta { width: 100%; padding: 13px 16px; font-size: 15px; font-weight: 700; }
.wcaps-link,
body.wcaps-skin .wcaps-cart .wcaps-link,
body.wcaps-skin .wcaps-checkout .wcaps-link { background: transparent; border: 0; padding: 0; color: var(--wcaps-primary-dark); font-weight: 600; text-decoration: underline; cursor: pointer; font-size: 14px; }
.wcaps-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: var(--wcaps-ground); color: var(--wcaps-text-muted); }
.wcaps-tag--good { background: var(--wcaps-success-bg); color: var(--wcaps-success); }
.wcaps-tag--warn { background: var(--wcaps-warning-bg); color: var(--wcaps-warning); }
.wcaps-tag--crit { background: var(--wcaps-error-bg); color: var(--wcaps-error); }
.wcaps-note { margin-top: 14px; padding: 12px 13px; background: var(--wcaps-primary-bg); border: 1px solid var(--wcaps-primary-border); border-radius: var(--wcaps-radius-sm); font-size: 13px; color: var(--wcaps-primary-text); }
.wcaps-note b { display: block; font-weight: 700; }
.wcaps-notices .woocommerce-error, .wcaps-notices .woocommerce-message, .wcaps-notices .woocommerce-info { margin: 0 0 14px; border-radius: var(--wcaps-radius-sm); }

/* ---- cart layout ---------------------------------------------------------------- */
.wcaps-cart { display: grid; gap: 24px; align-items: start; grid-template-columns: minmax(0, 1fr) 380px; position: relative; }
.wcaps-cart__main { min-width: 0; }
.wcaps-cart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
body.wcaps-skin .wcaps-cart__title { font-size: 22px; font-weight: 700; }
.wcaps-cart__count { color: var(--wcaps-text-muted); font-variant-numeric: tabular-nums; }
body.wcaps-skin .wcaps-cart .woocommerce-cart-form { margin: 0; }

.wcaps-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--wcaps-surface); border: 1px solid var(--wcaps-border); border-radius: var(--wcaps-radius); padding: 12px 14px; margin-bottom: 16px; }
.wcaps-bulk__label { font-weight: 600; color: var(--wcaps-text-muted); white-space: nowrap; }
.wcaps-bulk__opts { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 auto; min-width: 0; }
body.wcaps-skin .wcaps-bulk__btn { background: transparent; border: 1px solid var(--wcaps-border-input); border-radius: var(--wcaps-radius-xs); padding: 8px 6px; font-weight: 600; font-size: 13px; white-space: nowrap; text-align: center; overflow: hidden; text-overflow: ellipsis; color: var(--wcaps-text); cursor: pointer; }
body.wcaps-skin .wcaps-bulk__btn:hover { border-color: var(--wcaps-primary); color: var(--wcaps-primary-dark); background: var(--wcaps-primary-bg); }
body.wcaps-skin .wcaps-bulk__btn.is-off, body.wcaps-skin .wcaps-bulk__btn[disabled] { color: var(--wcaps-text-light); text-decoration: line-through; cursor: not-allowed; background: transparent; border-color: var(--wcaps-border); }
.wcaps-bulk__hint { margin-left: auto; font-size: 13px; color: var(--wcaps-text-light); flex: 0 1 auto; }

/* group cards */
/* No overflow:hidden here. It makes the section the nearest scrollport, so a
   sticky action bar inside an editor can never activate (the design's §4 note).
   The radius goes on the first and last rows instead. */
.wcaps-group { background: var(--wcaps-surface); border: 1px solid var(--wcaps-border); border-radius: var(--wcaps-radius); margin-bottom: 16px; }
.wcaps-group__head { border-radius: 11px 11px 0 0; }
.wcaps-group > *:last-child { border-radius: 0 0 11px 11px; }
.wcaps-group .wcaps-item:last-child { border-radius: 0 0 11px 11px; }
.wcaps-group__head { display: grid; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--wcaps-border); background: var(--wcaps-ground); grid-template-columns: 42px minmax(0, 1fr) auto; }
.wcaps-group__icon { width: 42px; height: 42px; border-radius: var(--wcaps-radius-sm); display: grid; place-items: center; background: var(--wcaps-primary-bg); color: var(--wcaps-primary-text); border: 1px solid var(--wcaps-primary-border); }
.wcaps-group__text { min-width: 0; }
body.wcaps-skin .wcaps-group__title { font-size: 17px; font-weight: 700; }
.wcaps-group__where { font-size: 13px; color: var(--wcaps-text-muted); margin-top: 2px; }
.wcaps-group__when { font-size: 13px; color: var(--wcaps-text); font-weight: 600; margin-top: 2px; }
.wcaps-group__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; min-width: 0; }
.wcaps-group__fee { white-space: nowrap; }
.wcaps-group__amt { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.wcaps-group__amt .amount { font-weight: 700; }
.wcaps-group__feenote { font-size: 12px; color: var(--wcaps-text-muted); }

.wcaps-status { padding: 10px 16px; font-size: 13px; border-bottom: 1px solid var(--wcaps-border); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--wcaps-surface); color: var(--wcaps-text); }
.wcaps-status--good { background: var(--wcaps-success-bg); color: var(--wcaps-success); }
.wcaps-status--warn { background: var(--wcaps-warning-bg); color: var(--wcaps-warning); }
.wcaps-status--crit { background: var(--wcaps-error-bg); color: var(--wcaps-error); }
.wcaps-status--info { background: var(--wcaps-primary-bg); color: var(--wcaps-primary-text); }
body.wcaps-skin .wcaps-remedy { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px; padding: 4px 11px; font-weight: 600; font-size: 12px; white-space: nowrap; cursor: pointer; text-decoration: none; }
body.wcaps-skin .wcaps-remedy:hover { background: rgba(255, 255, 255, 0.5); text-decoration: none; }
body.wcaps-skin .wcaps-remedy[disabled] { opacity: 0.5; cursor: not-allowed; }

/* inline editors */
.wcaps-editor { padding: 16px; border-bottom: 1px solid var(--wcaps-border); background: var(--wcaps-surface); display: grid; gap: 16px; }
.wcaps-editor__h { font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.08em; color: var(--wcaps-text-muted) !important; margin: 0 0 8px !important; font-weight: 700; }
.wcaps-editor__hint { font-size: 12px; color: var(--wcaps-text-muted); margin: 8px 0 0; }
/* The action bar sits at the bottom of the panel: current selection on the left,
   the action that names its outcome on the right. */
.wcaps-editor__foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: space-between; position: sticky; bottom: 0; margin: 4px -16px -16px; padding: 12px 16px; background: var(--wcaps-surface); border-top: 1px solid var(--wcaps-border); border-radius: 0 0 11px 11px; }
.wcaps-editor__foot .wcaps-btn { order: 2; }
.wcaps-editor__summary { order: 1; }
.wcaps-bill__add { order: 1; }
.wcaps-editor__summary { font-size: 13px; color: var(--wcaps-text-muted); }
.wcaps-opts { display: grid; gap: 8px; }
body.wcaps-skin .wcaps-opt { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 13px; border: 1px solid var(--wcaps-border-input); border-radius: var(--wcaps-radius-sm); background: var(--wcaps-surface); text-align: left; cursor: pointer; width: 100%; color: var(--wcaps-text); }
body.wcaps-skin .wcaps-opt:hover { border-color: var(--wcaps-primary); }
body.wcaps-skin .wcaps-opt.is-selected { border-color: var(--wcaps-primary); background: var(--wcaps-primary-bg); box-shadow: inset 0 0 0 1px var(--wcaps-primary); }
body.wcaps-skin .wcaps-opt.is-disabled { cursor: not-allowed; color: var(--wcaps-text-light); }
.wcaps-opt__dot { width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--wcaps-border-input); display: grid; place-items: center; }
.wcaps-opt.is-selected .wcaps-opt__dot { border-color: var(--wcaps-primary); }
.wcaps-opt.is-selected .wcaps-opt__dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--wcaps-primary); }
.wcaps-opt__body { min-width: 0; }
.wcaps-opt__name { display: block; font-weight: 700; }
.wcaps-opt.is-selected .wcaps-opt__name { color: var(--wcaps-primary-text); }
.wcaps-opt__sub { display: block; font-size: 13px; color: var(--wcaps-text-muted); }
.wcaps-opt__side { display: grid; gap: 4px; justify-items: end; }
.wcaps-opt__extra { font-size: 12px; color: var(--wcaps-text-muted); }
.wcaps-chips { display: flex; gap: 8px; flex-wrap: wrap; }
body.wcaps-skin .wcaps-chip { border: 1px solid var(--wcaps-border-input); background: transparent; color: var(--wcaps-text); border-radius: var(--wcaps-radius-xs); padding: 7px 13px; font-weight: 600; font-size: 13px; white-space: nowrap; cursor: pointer; }
body.wcaps-skin .wcaps-chip:hover { border-color: var(--wcaps-primary); }
body.wcaps-skin .wcaps-chip.is-selected { background: var(--wcaps-primary); border-color: var(--wcaps-primary); color: #fff; }
.wcaps-addform { display: grid; gap: 10px; padding: 14px; border: 1px dashed var(--wcaps-border-input); border-radius: var(--wcaps-radius-sm); margin: 0; }
.wcaps-addform__grid { display: grid; gap: 10px; }
.wcaps-addform__grid--2 { grid-template-columns: 1fr 1fr; }
.wcaps-addform__grid--3 { grid-template-columns: 2fr 1fr 1fr; }
.wcaps-addform__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wcaps-addform__error { color: var(--wcaps-error); font-size: 13px; margin: 0; }
.wcaps-field { display: grid; gap: 5px; }
.wcaps-field span { font-size: 12px; font-weight: 600; color: var(--wcaps-text-muted); }
body.wcaps-skin .wcaps-field input { padding: 9px 11px; border: 1px solid var(--wcaps-border-input); border-radius: var(--wcaps-radius-xs); background: var(--wcaps-surface); color: var(--wcaps-text); width: 100%; height: auto; box-shadow: none; }
body.wcaps-skin .wcaps-field input:focus { border-color: var(--wcaps-primary); box-shadow: 0 0 0 3px rgba(68, 133, 202, 0.15); outline: none; }

/* items */
.wcaps-item { display: grid; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--wcaps-border-light); grid-template-columns: 60px minmax(0, 1fr) auto; }
.wcaps-item__meta { min-height: 0; }
.wcaps-item:last-child { border-bottom: 0; }
.wcaps-item__thumb { width: 60px; height: 60px; border-radius: var(--wcaps-radius-sm); background: var(--wcaps-ground); border: 1px solid var(--wcaps-border); display: grid; place-items: center; overflow: hidden; }
.wcaps-item__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wcaps-item__body { min-width: 0; }
.wcaps-item__name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.wcaps-item__name a { color: var(--wcaps-text); }
.wcaps-item__meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--wcaps-text-muted); margin-top: 4px; }
.wcaps-item__sku { font-family: var(--wcaps-font-mono); }
.wcaps-item__stock { font-weight: 600; }
.wcaps-item__stock--good { color: var(--wcaps-success); }
.wcaps-item__stock--warn { color: var(--wcaps-warning); }
.wcaps-item__stock--crit { color: var(--wcaps-error); }
.wcaps-item__each .amount { color: var(--wcaps-text-muted); font-weight: 400; }
.wcaps-item__alts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; align-items: center; }
.wcaps-item__or { font-size: 11px; color: var(--wcaps-text-light); text-transform: uppercase; letter-spacing: 0.06em; }
body.wcaps-skin .wcaps-alt { border: 1px solid var(--wcaps-border-input); background: transparent; border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--wcaps-text); cursor: pointer; }
body.wcaps-skin .wcaps-alt:hover { border-color: var(--wcaps-primary); color: var(--wcaps-primary-dark); background: var(--wcaps-primary-bg); }
body.wcaps-skin .wcaps-alt.is-off, body.wcaps-skin .wcaps-alt[disabled] { color: var(--wcaps-text-light); text-decoration: line-through; cursor: not-allowed; border-color: var(--wcaps-border); background: transparent; }
.wcaps-item__ctrl { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
/* Stepper: 32 / 42 / 32 with no inner rules, exactly as designed. The theme
   hangs its own plus/minus on WooCommerce's quantity hooks — we render the
   input ourselves so those never fire, and anything else injected in here is
   hidden rather than stacked on top of ours. */
.wcaps-qty { display: inline-grid; grid-template-columns: 32px 42px 32px; align-items: stretch; border: 1px solid var(--wcaps-border-input); border-radius: var(--wcaps-radius-xs); overflow: hidden; background: var(--wcaps-surface); }
body.wcaps-skin .wcaps-qty > *:not(button):not(input) { display: none !important; }
body.wcaps-skin .wcaps-qty .quantity,
body.wcaps-skin .wcaps-qty .plus,
body.wcaps-skin .wcaps-qty .minus,
body.wcaps-skin .wcaps-qty .quantity-button,
body.wcaps-skin .wcaps-qty .porto-quantity,
body.wcaps-skin .wcaps-qty .screen-reader-text,
body.wcaps-skin .wcaps-qty label { display: none !important; }
body.wcaps-skin .wcaps-qty__btn { border: 0; background: transparent; padding: 6px 0; font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; color: var(--wcaps-text); }
body.wcaps-skin .wcaps-qty__btn:hover { background: var(--wcaps-primary-bg); }
body.wcaps-skin .wcaps-qty__btn[disabled] { color: var(--wcaps-text-light); cursor: not-allowed; background: transparent; }
body.wcaps-skin input.wcaps-qty__input,
body.wcaps-skin .wcaps-qty input.qty {
	width: 100% !important;
	min-width: 0;
	height: auto;
	margin: 0 !important;
	padding: 6px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--wcaps-text);
	-moz-appearance: textfield;
	appearance: textfield;
}
body.wcaps-skin input.wcaps-qty__input::-webkit-outer-spin-button,
body.wcaps-skin input.wcaps-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.wcaps-skin input.wcaps-qty__input:focus { box-shadow: none !important; }
.wcaps-item__money { text-align: right; min-width: 74px; }
.wcaps-item__total { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; line-height: 1.25; }
.wcaps-item__total .amount { font-weight: 700; }
.wcaps-item__each { font-size: 11px; color: var(--wcaps-text-muted); font-variant-numeric: tabular-nums; }
.wcaps-item__each .amount { color: var(--wcaps-text-muted); font-weight: 400; }
body.wcaps-skin .wcaps-cart .product-remove { display: inline-flex; }
body.wcaps-skin .wcaps-cart .product-remove a.remove { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--wcaps-border); background: transparent; color: var(--wcaps-text-muted) !important; display: grid; place-items: center; font-size: 18px; line-height: 1; text-decoration: none; font-weight: 400; flex: 0 0 32px; }
body.wcaps-skin .wcaps-cart .product-remove a.remove:hover { border-color: var(--wcaps-error); color: var(--wcaps-error) !important; background: transparent; }

.wcaps-coupon { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 16px; background: var(--wcaps-surface); border: 1px solid var(--wcaps-border); border-radius: var(--wcaps-radius); }
body.wcaps-skin .wcaps-coupon input.input-text { flex: 0 1 240px; padding: 9px 12px; border: 1px solid var(--wcaps-border-input); border-radius: var(--wcaps-radius-xs); background: var(--wcaps-surface); color: var(--wcaps-text); height: auto; box-shadow: none; }
body.wcaps-skin .wcaps-coupon .wcaps-btn--line { padding: 9px 15px; font-size: 14px; }
.wcaps-update.screen-reader-text { position: absolute !important; }

/* summary */
.wcaps-cart__aside { position: sticky; top: 24px; }
.wcaps-summary { background: var(--wcaps-surface); border: 1px solid var(--wcaps-border); border-radius: var(--wcaps-radius); padding: 18px 20px; }
body.wcaps-skin .wcaps-summary__h { font-size: 13px !important; letter-spacing: 0.1em; text-transform: uppercase !important; font-weight: 700; margin: 0 0 12px !important; }
.wcaps-summary__row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; }
.wcaps-summary__k { color: var(--wcaps-text-muted); }
.wcaps-summary__note { display: block; font-size: 12px; color: var(--wcaps-text-light); }
/* Sales tax row with a "View details" dialog (mixed-rate carts, v2.52.2). */
.wcaps-taxrow__more { display: block; margin: 2px 0 0; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--wcaps-primary); text-decoration: underline; cursor: pointer; text-align: left; }
.wcaps-taxrow__more:hover { color: var(--wcaps-primary-dark); }
.wcaps-taxrow__more:focus-visible { outline: 2px solid var(--wcaps-primary); outline-offset: 2px; }
.wcaps-taxdlg { width: min(92vw, 420px); max-width: 420px; padding: 0; border: 1px solid var(--wcaps-primary-border); border-radius: 12px; box-shadow: 0 18px 48px rgba(20, 24, 28, 0.22); color: inherit; }
.wcaps-taxdlg::backdrop { background: rgba(20, 24, 28, 0.45); }
.wcaps-taxdlg__box { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; }
.wcaps-taxdlg__h { margin: 0; font-size: 17px; font-weight: 600; }
.wcaps-taxdlg__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wcaps-taxdlg__table td { padding: 8px 0; border-bottom: 1px solid #e3e7eb; vertical-align: top; }
.wcaps-taxdlg__table tfoot td { border-bottom: 0; font-weight: 600; padding-top: 10px; }
.wcaps-taxdlg__rate { color: var(--wcaps-text-muted); white-space: nowrap; padding: 8px 10px !important; text-align: right; }
.wcaps-taxdlg__amt { text-align: right; white-space: nowrap; }
.wcaps-taxdlg__note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--wcaps-text-muted); }
.wcaps-taxdlg__close { align-self: flex-end; }
.wcaps-summary__v { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--wcaps-text); }
.wcaps-summary__v .amount { color: inherit; font-weight: 500; }
.wcaps-summary__v--good { color: var(--wcaps-success); }
.wcaps-summary__v--crit { color: var(--wcaps-error); font-weight: 600; }
.wcaps-summary__v--muted { color: var(--wcaps-text-light); }
body.wcaps-skin .wcaps-summary__remove-coupon { margin-left: 6px; color: var(--wcaps-text-light); text-decoration: none; }
.wcaps-summary__total { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--wcaps-border); margin-top: 8px; padding-top: 12px; font-size: 19px; font-weight: 700; }
.wcaps-summary__total .amount { font-weight: 700; font-size: 19px; }
.wcaps-summary__tax { font-size: 12px; color: var(--wcaps-text-light); margin: 4px 0 14px; }
.wcaps-summary__express { display: grid; gap: 8px; margin-top: 10px; }
.wcaps-summary__express:empty { display: none; }
body.wcaps-skin .wcaps-summary__express .wc-proceed-to-checkout, body.wcaps-skin .wcaps-summary__express .wc-proceed-to-checkout > * { margin: 0 !important; padding: 0 !important; }

/* sticky bar (mobile only) */
.wcaps-sticky { display: none; }

/* ---- checkout ------------------------------------------------------------------ */
/* The theme sets its own display on .woocommerce-checkout, which dropped the
   summary underneath the form; these need the same weight to hold the layout. */
body.wcaps-skin form.checkout.woocommerce-checkout.wcaps-checkout {
	display: grid !important;
	gap: 24px;
	align-items: start !important;
	grid-template-columns: minmax(0, 1fr) 380px !important;
	float: none !important;
	width: auto !important;
}
body.wcaps-skin form.wcaps-checkout > .wcaps-checkout__main { grid-column: 1; }
body.wcaps-skin form.wcaps-checkout > .wcaps-checkout__aside {
	grid-column: 2;
	position: sticky !important;
	top: 24px;
	align-self: start !important;
	width: auto !important;
	float: none !important;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}
body.wcaps-skin form.wcaps-checkout > .wcaps-co-head { grid-column: 1 / -1; }
body.wcaps-skin form.wcaps-checkout .col2-set,
body.wcaps-skin form.wcaps-checkout #customer_details { display: block !important; width: auto !important; float: none !important; margin: 0 !important; }
body.wcaps-skin form.wcaps-checkout .col2-set > .col-1,
body.wcaps-skin form.wcaps-checkout .col2-set > .col-2 { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; }
.wcaps-checkout__main { min-width: 0; display: grid; gap: 14px; }
.wcaps-checkout__aside { position: sticky; top: 24px; }
.wcaps-co-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; flex-wrap: wrap; grid-column: 1 / -1; }
body.wcaps-skin .wcaps-co-head h2 { font-size: 22px; font-weight: 700; }
.wcaps-section { background: var(--wcaps-surface); border: 1px solid var(--wcaps-border); border-radius: var(--wcaps-radius); padding: 18px 20px; }
.wcaps-co-payment { padding-bottom: 20px; }
body.wcaps-skin .wcaps-checkout .woocommerce-privacy-policy-text { font-size: 12px; color: var(--wcaps-text-light); margin: 10px 0 0; }
body.wcaps-skin .wcaps-checkout .woocommerce-privacy-policy-text p { margin: 0; }
.wcaps-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
body.wcaps-skin .wcaps-section__head h3, body.wcaps-skin .wcaps-section > h3 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
body.wcaps-skin .wcaps-section__head h3 { margin: 0; }
.wcaps-co-rows { display: grid; gap: 10px; }
.wcaps-co-row { display: grid; gap: 12px; align-items: center; padding: 12px 13px; border: 1px solid var(--wcaps-border); border-radius: var(--wcaps-radius-sm); grid-template-columns: 38px minmax(0, 1fr) auto; }
.wcaps-co-row__icon { width: 38px; height: 38px; border-radius: var(--wcaps-radius-sm); display: grid; place-items: center; background: var(--wcaps-primary-bg); color: var(--wcaps-primary-text); border: 1px solid var(--wcaps-primary-border); }
.wcaps-co-row__icon svg { width: 20px; height: 20px; }
.wcaps-co-row__head { font-weight: 700; }
.wcaps-co-row__detail { font-size: 13px; color: var(--wcaps-text-muted); }
.wcaps-co-row__list { font-size: 12px; color: var(--wcaps-text-light); margin-top: 4px; }
.wcaps-co-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.wcaps-co-row__fee { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wcaps-co-row__fee .amount { font-weight: 700; }

/* WooCommerce fields inside "Your details" */
body.wcaps-skin .wcaps-checkout .form-row { margin: 0 0 12px; padding: 0; float: none; width: 100%; }
body.wcaps-skin .wcaps-checkout .form-row label { display: block; font-size: 12px; font-weight: 600; color: var(--wcaps-text-muted); margin-bottom: 5px; }
body.wcaps-skin .wcaps-checkout .form-row .required { color: var(--wcaps-error); text-decoration: none; }
body.wcaps-skin .wcaps-checkout .form-row .input-text,
body.wcaps-skin .wcaps-checkout .form-row select,
body.wcaps-skin .wcaps-checkout .form-row textarea,
body.wcaps-skin .wcaps-checkout .select2-container--default .select2-selection--single { width: 100%; padding: 10px 12px; border: 1px solid var(--wcaps-border-input); border-radius: var(--wcaps-radius-xs); background: var(--wcaps-surface); color: var(--wcaps-text); height: auto; min-height: 42px; box-shadow: none; font-size: 14px; }
body.wcaps-skin .wcaps-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 20px; padding: 0; color: var(--wcaps-text); }
body.wcaps-skin .wcaps-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
body.wcaps-skin .wcaps-checkout .form-row .input-text:focus, body.wcaps-skin .wcaps-checkout .form-row select:focus, body.wcaps-skin .wcaps-checkout .form-row textarea:focus { border-color: var(--wcaps-primary); box-shadow: 0 0 0 3px rgba(68, 133, 202, 0.15); outline: none; }
body.wcaps-skin .wcaps-checkout .woocommerce-invalid .input-text, body.wcaps-skin .wcaps-checkout .woocommerce-invalid select { border-color: var(--wcaps-error); }
.wcaps-fields--2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.wcaps-fields--2 > .form-row { margin-bottom: 0; }
.wcaps-fields { display: grid; gap: 12px; }
.wcaps-fields > .form-row { margin-bottom: 0; }
/* "Your details": one Name field, Mobile, Email, then billing as a line from
   the account with a picker behind Change (design v5, §Checkout). */
.wcaps-details .wcaps-field { display: grid; gap: 5px; }
.wcaps-details .wcaps-field > span { font-size: 12px; font-weight: 600; color: var(--wcaps-text-muted); }
body.wcaps-skin .wcaps-details .wcaps-field input { padding: 10px 12px; border: 1px solid var(--wcaps-border-input); border-radius: var(--wcaps-radius-xs); background: var(--wcaps-surface); color: var(--wcaps-text); width: 100%; height: auto; box-shadow: none; font-size: 14px; }
body.wcaps-skin .wcaps-details .wcaps-field input:focus { border-color: var(--wcaps-primary); box-shadow: 0 0 0 3px rgba(68, 133, 202, 0.15); outline: none; }
body.wcaps-skin .wcaps-details .wcaps-field-row { margin-top: 12px !important; }
body.wcaps-skin .wcaps-details .wcaps-fields--2 > .form-row { margin-bottom: 0; }
/* WooCommerce's own address fields stay in the form (they validate and build the
   order) but out of sight: the Name field and the billing picker above drive
   them. Targeted BY ID because the theme re-sorts billing fields by priority
   after render and moves them out of any wrapper we put them in. */
.wcaps-wc-hidden,
body.wcaps-skin .wcaps-checkout #billing_first_name_field,
body.wcaps-skin .wcaps-checkout #billing_last_name_field,
body.wcaps-skin .wcaps-checkout #billing_company_field,
body.wcaps-skin .wcaps-checkout #billing_country_field,
body.wcaps-skin .wcaps-checkout #billing_address_1_field,
body.wcaps-skin .wcaps-checkout #billing_address_2_field,
body.wcaps-skin .wcaps-checkout #billing_city_field,
body.wcaps-skin .wcaps-checkout #billing_state_field,
body.wcaps-skin .wcaps-checkout #billing_postcode_field {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}
/* The ship-to block is opened by WooCommerce's own script (inline display:block),
   so hiding it needs the same weight. The address itself is chosen in the cart
   and confirmed by the line above. */
body.wcaps-skin .wcaps-checkout #ship-to-different-address,
body.wcaps-skin .wcaps-checkout .shipping_address.wcaps-shipping-hidden {
	display: none !important;
}
/* Porto adds its own heading and rule inside the payment box; we already have a
   section heading. */
body.wcaps-skin .wcaps-co-payment > .woocommerce-checkout-payment > h4,
body.wcaps-skin .wcaps-co-payment > .woocommerce-checkout-payment > .porto-separator { display: none !important; }
body.wcaps-skin .wcaps-checkout #payment ul.wc_payment_methods.px-2,
body.wcaps-skin .wcaps-checkout #payment h4.px-2 { padding-left: 0 !important; padding-right: 0 !important; }
/* The theme draws its own radio; the label just needs to sit on one line beside
   it. (A grid here put the card icon on its own track and broke the title onto
   four lines.) */
body.wcaps-skin .wcaps-checkout #payment .porto-radio { display: flex; align-items: center; gap: 10px; padding: 12px 13px 12px 44px; }
/* The theme's circle is drawn at the row's left edge and relied on the theme's
   own left padding; with ours it sat on the first letter ("Credit / Debit
   Card"). Circle at 13px, text from 44px, in line with the payment box. */
body.wcaps-skin .wcaps-checkout #payment .porto-radio .porto-control-label::before { left: 13px; }
body.wcaps-skin .wcaps-checkout #payment .porto-radio .porto-control-label::after { left: 17px; }
/* The chosen dot takes the theme's primary colour, which comes from a generated
   stylesheet; set it here so a checked option always shows as checked. */
body.wcaps-skin .wcaps-checkout .porto-radio .porto-control-label::after { background-color: var(--wcaps-primary); border-color: var(--wcaps-primary); }
body.wcaps-skin .wcaps-checkout .porto-radio .porto-control-input:checked ~ .porto-control-label::before { border-color: var(--wcaps-primary); }
body.wcaps-skin .wcaps-checkout #payment .porto-control-label { display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 !important; padding: 0 !important; font-weight: 700; font-size: 14px; line-height: 1.3; white-space: normal; cursor: pointer; }
body.wcaps-skin .wcaps-checkout #payment .porto-control-label img { max-height: 22px; width: auto; margin: 0; }
.wcaps-bill { margin-top: 14px; }
.wcaps-bill__head { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-bottom: 6px; }
.wcaps-bill__label { font-size: 12px; font-weight: 600; color: var(--wcaps-text-muted); }
.wcaps-bill__note { font-size: 12px; color: var(--wcaps-text-light); }
.wcaps-bill__current { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 11px 13px; border: 1px solid var(--wcaps-border-input); border-radius: var(--wcaps-radius-xs); background: var(--wcaps-ground); }
.wcaps-bill__text { min-width: 0; }
.wcaps-bill__name { display: block; font-weight: 700; }
.wcaps-bill__line { display: block; font-size: 13px; color: var(--wcaps-text-muted); }
.wcaps-bill__picker { display: grid; gap: 8px; margin-top: 10px; }
.wcaps-bill__add { justify-self: start; padding: 2px 0; }
.wcaps-bill__fine { margin: 0; font-size: 12px; line-height: 1.4; color: var(--wcaps-text-muted); }
.wcaps-billing-select { margin-top: 12px; }
.wcaps-billing-address { margin-top: 12px; display: grid; gap: 12px; }
body.wcaps-skin .wcaps-checkout #ship-to-different-address, body.wcaps-skin .wcaps-checkout .wcaps-shipping-hidden { display: none; }
.wcaps-shipping-note { font-size: 13px; color: var(--wcaps-text-muted); padding: 10px 12px; background: var(--wcaps-ground); border-radius: var(--wcaps-radius-sm); }
.wcaps-notes { margin-top: 12px; }
/* A real button, not a small underlined link: instructions for the driver or the
   yard are easy to miss otherwise. */
.wcaps-notes-row { margin: 16px 0 0; }
body.wcaps-skin .wcaps-checkout .wcaps-notes-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; border: 1px dashed var(--wcaps-primary-border); border-radius: var(--wcaps-radius-sm); background: var(--wcaps-primary-bg); color: var(--wcaps-primary-text); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none; }
body.wcaps-skin .wcaps-checkout .wcaps-notes-toggle:hover,
body.wcaps-skin .wcaps-checkout .wcaps-notes-toggle:focus-visible { border-style: solid; border-color: var(--wcaps-primary); }
body.wcaps-skin .wcaps-checkout .wcaps-notes-toggle span { font-size: 18px; font-weight: 700; line-height: 1; }
body.wcaps-skin .wcaps-checkout .wcaps-notes-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
body.wcaps-skin .wcaps-checkout .woocommerce-account-fields { margin-top: 12px; }
body.wcaps-skin .wcaps-checkout .woocommerce-billing-fields > h3, body.wcaps-skin .wcaps-checkout .woocommerce-shipping-fields > h3, body.wcaps-skin .wcaps-checkout .woocommerce-additional-fields > h3 { display: none; }

/* payment: WooCommerce's list as radio cards */
body.wcaps-skin .wcaps-checkout #payment { background: transparent; border-radius: 0; }
body.wcaps-skin .wcaps-checkout #payment ul.wc_payment_methods { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 10px; border: 0; }
body.wcaps-skin .wcaps-checkout #payment ul.wc_payment_methods li.wc_payment_method { margin: 0; padding: 0; border: 1px solid var(--wcaps-border-input); border-radius: var(--wcaps-radius-sm); background: var(--wcaps-surface); list-style: none; }
body.wcaps-skin .wcaps-checkout #payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) { border-color: var(--wcaps-primary); background: var(--wcaps-primary-bg); box-shadow: inset 0 0 0 1px var(--wcaps-primary); }
body.wcaps-skin .wcaps-checkout #payment li.wc_payment_method > label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 13px; margin: 0; font-weight: 700; color: var(--wcaps-text); cursor: pointer; font-size: 14px; text-transform: none; }
body.wcaps-skin .wcaps-checkout #payment li.wc_payment_method > label img { max-height: 24px; margin-left: 8px; vertical-align: middle; }
body.wcaps-skin .wcaps-checkout #payment li.wc_payment_method input.input-radio { margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--wcaps-primary); }
body.wcaps-skin .wcaps-checkout #payment li.wc_payment_method:has(input:checked) > label { color: var(--wcaps-primary-text); }
body.wcaps-skin .wcaps-checkout #payment div.payment_box { background: transparent; margin: 0; padding: 0 13px 13px 45px; font-size: 13px; color: var(--wcaps-text-muted); }
body.wcaps-skin .wcaps-checkout #payment div.payment_box::before { display: none; }
body.wcaps-skin .wcaps-checkout #payment .place-order { padding: 0; margin: 18px 0 0; }
body.wcaps-skin .wcaps-checkout #payment .place-order .woocommerce-terms-and-conditions-wrapper { margin-bottom: 12px; font-size: 13px; color: var(--wcaps-text-muted); }
body.wcaps-skin .wcaps-checkout #place_order,
body.wcaps-skin .wcaps-checkout #payment .place-order .button { display: block; width: 100%; padding: 15px 16px; border: 0; border-radius: var(--wcaps-radius-xs); font-weight: 700; font-size: 16px; color: #fff !important; cursor: pointer; background: var(--wcaps-primary) !important; background-image: linear-gradient(180deg, var(--wcaps-primary-light) 0%, var(--wcaps-primary) 100%) !important; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15); text-transform: none; letter-spacing: 0.01em; float: none; }
body.wcaps-skin .wcaps-checkout #place_order:hover { background-image: linear-gradient(180deg, var(--wcaps-primary) 0%, var(--wcaps-primary-dark) 100%) !important; }
body.wcaps-skin .wcaps-checkout #place_order[disabled],
body.wcaps-skin .wcaps-checkout #place_order.wcaps-blocked,
body.wcaps-skin .wcaps-checkout .place-order:has(.wc-api-sync-delivery-disclaimer input[type="checkbox"]:not(:checked)) #place_order {
	background: var(--wcaps-border-input) !important;
	background-image: none !important;
	color: var(--wcaps-text-muted) !important;
	box-shadow: none !important;
	opacity: 1 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}
.wcaps-place-fine { font-size: 12px; color: var(--wcaps-text-light); margin: 10px 0 0; text-align: center; }

/* curbside terms (the delivery disclaimer) right above Place order */
body.wcaps-skin .wcaps-checkout .wc-api-sync-delivery-disclaimer { margin: 4px 0 16px; padding: 16px 18px; background: var(--wcaps-warning-bg); border: 1px solid #fde68a; border-radius: var(--wcaps-radius-sm); font-size: 13px; line-height: 1.55; color: var(--wcaps-text-muted); }
body.wcaps-skin .wcaps-checkout .wc-api-sync-delivery-disclaimer > *:first-child { margin-top: 0; }
body.wcaps-skin .wcaps-checkout .wc-api-sync-delivery-disclaimer:has(input:checked) { background: var(--wcaps-success-bg); border-color: #bbf7d0; }
body.wcaps-skin .wcaps-checkout .wc-api-sync-delivery-disclaimer .disclaimer-content { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(146, 64, 14, 0.18); }
body.wcaps-skin .wcaps-checkout .wc-api-sync-delivery-disclaimer .disclaimer-content p { margin: 0 0 6px; }
body.wcaps-skin .wcaps-checkout .wc-api-sync-delivery-disclaimer .disclaimer-checkbox-label { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; color: var(--wcaps-text); cursor: pointer; margin: 0; padding: 2px 0; line-height: 1.45; }
body.wcaps-skin .wcaps-checkout .wc-api-sync-delivery-disclaimer input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 17px; }
body.wcaps-skin .wcaps-checkout .wc-api-sync-delivery-disclaimer input[type="checkbox"] { margin-top: 3px; accent-color: var(--wcaps-primary); }

/* review (order summary) */
.wcaps-review { }
.wcaps-review__lines { display: grid; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--wcaps-border); }
.wcaps-review__group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wcaps-text-muted); margin-top: 4px; }
/* Each package's options sit under the products they are for. */
.wcaps-review__shipping--group { width: 100%; margin: 2px 0 6px; }
.wcaps-review__line { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.wcaps-review__thumb { width: 36px; height: 36px; border-radius: var(--wcaps-radius-xs); background: var(--wcaps-ground); border: 1px solid var(--wcaps-border); overflow: hidden; display: grid; place-items: center; }
.wcaps-review__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wcaps-review__name { font-weight: 600; line-height: 1.25; }
.wcaps-review__qty { color: var(--wcaps-text-muted); font-size: 12px; }
.wcaps-review__total { font-variant-numeric: tabular-nums; white-space: nowrap; }
body.wcaps-skin .wcaps-checkout .woocommerce-checkout-review-order-table { border: 0; margin: 0; }
body.wcaps-skin .wcaps-checkout .wcaps-review .wcaps-summary__row { padding: 6px 0; }
body.wcaps-skin .wcaps-checkout .wcaps-review .wcaps-summary__total { margin-top: 8px; }
body.wcaps-skin .wcaps-checkout .wcaps-review .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; font-size: 13px; }
body.wcaps-skin .wcaps-checkout .wcaps-review .woocommerce-shipping-methods li { margin: 0 0 6px; }

/* ---- confirmation --------------------------------------------------------------- */
.wcaps-thanks { display: grid; gap: 20px; }
.wcaps-thanks__card { background: var(--wcaps-surface); border: 1px solid var(--wcaps-border); border-radius: var(--wcaps-radius); padding: 26px; max-width: 760px; width: 100%; margin: 0 auto; }
.wcaps-thanks__mark { width: 52px; height: 52px; border-radius: 50%; background: var(--wcaps-success-bg); color: var(--wcaps-success); display: grid; place-items: center; margin: 0 auto 14px; }
body.wcaps-skin .wcaps-thanks__card h2 { font-size: 24px; font-weight: 700; text-align: center; }
.wcaps-thanks__para { color: var(--wcaps-text-muted); margin: 8px auto 0; max-width: 60ch; text-align: center; }
.wcaps-thanks__rows { display: grid; gap: 10px; margin-top: 20px; }
.wcaps-thanks__row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 13px; border: 1px solid var(--wcaps-border); border-radius: var(--wcaps-radius-sm); }
.wcaps-thanks__row .wcaps-co-row__icon { width: 38px; height: 38px; }
.wcaps-thanks__details { max-width: 760px; margin: 0 auto; width: 100%; }
.wcaps-thanks__actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---- responsive ------------------------------------------------------------------ */
@media (max-width: 1079px) {
	.wcaps-cart { grid-template-columns: 1fr; }
	.wcaps-cart__aside { position: static; }
	/* The desktop checkout rules carry !important to beat the theme, so these
	   must too - without it a phone got a 0px main column with the 380px
	   summary stuck on top of it (measured at 390px, 18 Sep 2026). */
	body.wcaps-skin form.checkout.woocommerce-checkout.wcaps-checkout { grid-template-columns: 1fr !important; gap: 14px; }
	body.wcaps-skin form.wcaps-checkout > .wcaps-checkout__main,
	body.wcaps-skin form.wcaps-checkout > .wcaps-checkout__aside { grid-column: 1 !important; position: static !important; width: auto !important; max-width: none !important; }
	/* The quote bubble sits at bottom:18px; on cart and checkout the sticky
	   total bar owns that space, so lift the bubble above it. */
	body.wcaps-skin .wcaps-qfab__fab { bottom: 96px; }
	.wcaps-bulk__hint { display: none; }
	.wcaps-group__head { grid-template-columns: 42px minmax(0, 1fr); }
	.wcaps-group__side { grid-column: 1 / -1; flex-direction: row; align-items: center; }
	.wcaps-co-row { grid-template-columns: 38px minmax(0, 1fr); }
	.wcaps-co-row__side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
	.wcaps-item { grid-template-columns: 52px minmax(0, 1fr); }
	.wcaps-item__thumb { width: 52px; height: 52px; }
	.wcaps-item__ctrl { grid-column: 2; justify-content: space-between; }
	.wcaps-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 12px 16px; background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--wcaps-border); backdrop-filter: blur(8px); align-items: center; gap: 12px; }
	.wcaps-sticky__text { min-width: 0; }
	.wcaps-sticky__label { display: block; font-size: 11px; color: var(--wcaps-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
	.wcaps-sticky__total { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
	.wcaps-sticky .wcaps-btn { flex: 1; padding: 13px 14px; font-size: 15px; font-weight: 700; }
	body.wcaps-skin { padding-bottom: 84px; }
}
@media (max-width: 619px) {
	body.wcaps-skin .wcaps-bulk__btn { font-size: 12px; padding: 8px 4px; }
	.wcaps-addform__grid--2, .wcaps-addform__grid--3, .wcaps-fields--2 { grid-template-columns: 1fr; }
	.wcaps-group__head, .wcaps-item, .wcaps-status, .wcaps-editor { padding-left: 12px; padding-right: 12px; }
	.wcaps-summary, .wcaps-section { padding: 16px; }
	.wcaps-item__or { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.wcaps-btn, .wcaps-cart { transition: none; }
}

/* [hidden] must win. `.wcaps-bill__picker { display:grid }` and
   `.wcaps-addform { display:grid }` are more specific than the browser's
   `[hidden]{display:none}`, which is why the address picker and the add form
   were open on load instead of waiting for Change / "Add a billing address". */
body.wcaps-skin [hidden],
body.wcaps-skin .wcaps-bill__picker[hidden],
body.wcaps-skin .wcaps-addform[hidden],
body.wcaps-skin .wcaps-notes[hidden],
body.wcaps-skin .wcaps-group__editor[hidden] { display: none !important; }

/* Ghost buttons inside the checkout inherited the primary button's white text
   from a more specific rule, so Cancel rendered as an empty white box. */
body.wcaps-skin .wcaps-checkout .wcaps-btn--ghost,
body.wcaps-skin .wcaps-cart .wcaps-btn--ghost {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 1px solid var(--wcaps-border-input) !important;
	color: var(--wcaps-text) !important;
}
body.wcaps-skin .wcaps-checkout .wcaps-btn--ghost:hover,
body.wcaps-skin .wcaps-cart .wcaps-btn--ghost:hover { border-color: var(--wcaps-primary) !important; color: var(--wcaps-primary-dark) !important; }
body.wcaps-skin .wcaps-checkout .wcaps-btn--line,
body.wcaps-skin .wcaps-cart .wcaps-btn--line { color: var(--wcaps-text) !important; }

/* Breathing room above the site footer (v2.57.1): the checkout's last card sat
   tight against "Need materials for a job?". The cart page already has the
   theme's 40px of page padding, so only checkout and the confirmation get it.
   Selectors match the skin's "ground" rule (which sets margin: 0 auto) and
   come later, so they win. With the site footer's own gap this is ~80px on
   desktop, the same as the cart. */
body.wcaps-skin .wcaps-checkout, body.wcaps-skin .wcaps-thanks, .woocommerce form.wcaps-checkout { margin-bottom: 40px; }
@media (max-width: 782px) { body.wcaps-skin .wcaps-checkout, body.wcaps-skin .wcaps-thanks, .woocommerce form.wcaps-checkout { margin-bottom: 28px; } }

/* Short-stock fixes (v2.58.0): "Remove X" reads as a quieter text action
   next to the "Local Delivery: X" buttons. */
.wcaps-remedy--quiet { background: transparent; border-color: transparent; text-decoration: underline; color: var(--wcaps-text-muted); }
.wcaps-remedy--quiet:hover { color: var(--wcaps-danger, #b42318); }

/* Store Pickup header (v2.58.1): yard and ready time lead on the right; the
   free fee sits small under the title. */
.wcaps-group__lead { text-align: right; }
.wcaps-group__where--lead { font-size: 16px; font-weight: 700; color: var(--wcaps-text); margin-top: 0; }
.wcaps-group__when--lead { font-size: 14px; font-weight: 600; color: var(--wcaps-primary-text, #1d4ed8); margin-top: 2px; }
.wcaps-group__fee--under { margin-top: 2px; }
.wcaps-group__fee--under .wcaps-group__amt { font-size: 14px; }
@media (max-width: 782px) {
	.wcaps-group__lead { text-align: left; }
	.wcaps-group__side:has(.wcaps-group__lead) { justify-content: space-between; }
}

/* Checkout "Your details" (v2.61.0): an error line under one field made its
   row taller and the field beside it stretched down to match. Fields now
   start at the top of the row whatever sits under the neighbour. */
.wcaps-details .wcaps-fields--2 { align-items: start; }
.wcaps-details .wcaps-field { align-content: start; }

/* Order-complete page (v2.61.0): a quiet confirmation line, not the theme's
   green-bordered notice. */
body.wcaps-skin .wcaps-thanks .wcaps-thanks__para { font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--wcaps-text-muted); border: 0; background: none; padding: 0; box-shadow: none; }
.wcaps-thanks__card--summary { padding: 0; }

/* Order summary card: order-complete page and the portal's order view. */
.wcaps-osum { padding: 26px; font-size: 14px; color: var(--wcaps-text, #111827); }
.wcaps-osum__title { font-size: 16px !important; font-weight: 700; margin: 0 0 8px !important; text-align: left !important; }
.wcaps-osum__items { list-style: none; margin: 0; padding: 0; }
.wcaps-osum__item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--wcaps-border-light, #f3f4f6); margin: 0; }
.wcaps-osum__name { font-weight: 600; min-width: 0; }
.wcaps-osum__name a { color: var(--wcaps-text, #111827) !important; text-decoration: none !important; }
.wcaps-osum__name a:hover { color: var(--wcaps-primary-dark, #005ab0) !important; }
.wcaps-osum__qty { font-weight: 400; color: var(--wcaps-text-muted, #6b7280); margin-left: 4px; white-space: nowrap; }
.wcaps-osum__sku { display: block; font-size: 12px; font-weight: 400; color: var(--wcaps-text-light, #9ca3af); margin-top: 2px; }
.wcaps-osum__amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wcaps-osum__totals { margin: 12px 0 0; }
.wcaps-osum__row { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; margin: 0; }
.wcaps-osum__row dt { color: var(--wcaps-text-muted, #6b7280); font-weight: 400; margin: 0; }
.wcaps-osum__row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.wcaps-osum__row--order_total { border-top: 1px solid var(--wcaps-border, #e5e7eb); margin-top: 8px; padding-top: 12px; align-items: baseline; }
.wcaps-osum__row--order_total dt { color: var(--wcaps-text, #111827); font-weight: 700; }
.wcaps-osum__row--order_total dd { font-size: 20px; font-weight: 700; }
.wcaps-osum__row--order_total dd small { display: none; }
.wcaps-osum__paid { margin: 6px 0 0; font-size: 13px; color: var(--wcaps-text-muted, #6b7280); text-align: right; }
.wcaps-osum__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--wcaps-text-muted, #6b7280); margin-bottom: 6px; }
.wcaps-osum__note { margin-top: 18px; padding: 12px 14px; background: var(--wcaps-ground, #f9fafb); border-radius: var(--wcaps-radius-sm, 8px); }
.wcaps-osum__note p { margin: 0; }
.wcaps-osum__addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--wcaps-border, #e5e7eb); }
.wcaps-osum__addr address { font-style: normal; line-height: 1.55; margin: 0; }
.wcaps-osum__ref { margin: 16px 0 0; font-size: 13px; color: var(--wcaps-text-muted, #6b7280); }
.wcaps-osum__ref code { font-family: var(--wcaps-font-mono, monospace); background: var(--wcaps-ground, #f9fafb); border: 1px solid var(--wcaps-border, #e5e7eb); border-radius: 4px; padding: 1px 6px; color: var(--wcaps-text, #111827); }
@media (max-width: 600px) { .wcaps-osum { padding: 18px; } }

/* Portal order view ([wc_api_sync_orders] ?wcaps_order=ID). */
.wcaps-oview { font-family: var(--wcaps-font); font-size: 14px; color: var(--wcaps-text); }
.wcaps-oview * { box-sizing: border-box; }
.wcaps-oview__back { display: inline-block; font-size: 13px; color: var(--wcaps-primary-dark) !important; margin-bottom: 14px; text-decoration: none; }
.wcaps-oview__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wcaps-oview__title { font-size: 22px !important; font-weight: 700; margin: 0 !important; }
.wcaps-oview__date { margin: 4px 0 0; color: var(--wcaps-text-muted); }
.wcaps-oview__missing { color: var(--wcaps-text-muted); }
.wcaps-oview .wcaps-thanks__rows { margin-top: 18px; }
.wcaps-oview .wcaps-osum { padding: 20px 0 0; margin-top: 20px; border-top: 1px solid var(--wcaps-border); }