/* =========================================================================
   Checkout L2 — a single page with numbered steps (mockup: canvas
   "Utrustningen — layoutvarianter", board L2-OnePage). The rest of the language follows spec L1
   (docs/superpowers/specs/2026-10-09-checkout-l1-design.md).
   Loaded only on the checkout-qcom template (inc/purchase.php), after style.css.
   Layout uses the plugin's native columns (main / sidebar, ≥1024px) in a centered
   1120px container; the theme sets widths, background and language. Plugin code is untouched.
   ========================================================================= */
.tp-checkout,
body:has(.tp-checkout) .tp-cheader {
	--co-ink: var(--wp--preset--color--ink);
	--co-line: #e4e7ed;
	--co-panel-line: #d5dce8;
	--co-input-line: #c3cad6;
	--co-mist: #f4f6f9;
	--co-panel: #f3f5f9;
	--co-stone: #646d7d;
	--co-mute: #a3abb8;
	--co-ok: #2f7d4f;
	--co-err: #b42318;
	--co-soft: #eef1f6;  /* lines between items, quantity stepper border */
	--co-kit: #f8f9fb;   /* kit contents background */
	--co-edge: max(40px, calc(50% - 520px)); /* content edge of the 1120px container (with 40px padding) */
}

/* --- Skeleton --- */
.tp-checkout { padding: 0; display: flex; flex-direction: column; background: #fff; }
.tp-checkout > .wp-block-quickcommerce-checkout,
.tp-checkout > div { flex: 1 0 auto; display: flex; flex-direction: column; }
.tp-checkout .checkout-page { min-height: 0; flex: 1 0 auto; display: flex; flex-direction: column; background: #fff; color: var(--co-ink); }
.tp-checkout .checkout-page__container { min-height: 0; flex: 1 0 auto; }

/* --- Checkout header: "Fortsätt handla" left · logo centered · "Säker betalning" right --- */
body:has(.tp-checkout) .tp-cheader { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
body:has(.tp-checkout) .tp-cheader .tp-brand { grid-column: 2; grid-row: 1; justify-self: center; }
body:has(.tp-checkout) .tp-cheader__secure { grid-column: 3; grid-row: 1; justify-self: end; }
body:has(.tp-checkout) .tp-cheader__back { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
/* "Fortsätt handla" — a link in the same typography as "Säker betalning" (mono 12px, stone) */
body:has(.tp-checkout) .tp-cheader__back { gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; font-family: var(--wp--preset--font-family--mono); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: uppercase; color: var(--co-stone); text-decoration: none; transition: color 0.15s ease; }
body:has(.tp-checkout) .tp-cheader__back:hover { color: var(--co-ink); text-decoration: underline; text-underline-offset: 3px; }
body:has(.tp-checkout) .tp-cheader__back:focus-visible { outline: 2px solid var(--co-ink); outline-offset: 2px; }
/* Phone: arrow only so the logo stays centered; the text remains for screen readers */
@media (max-width: 759px) {
	body:has(.tp-checkout) .tp-cheader__back { width: 44px; justify-content: flex-start; font-size: 0; white-space: nowrap; overflow: hidden; }
	body:has(.tp-checkout) .tp-cheader__back::before { content: "←"; font: 400 20px/1 var(--wp--preset--font-family--body); color: var(--co-ink); }
}

/* --- Desktop (≥1024px): centered 1120px container — steps on the left, white 440px card panel on the right ---
   Sticky panel: the sidebar column stretches to the row height (align-self: stretch), the card inside sticks. */
@media (min-width: 1024px) {
	.tp-checkout .checkout-page__container { align-items: flex-start; gap: 48px; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
	.tp-checkout .checkout-page__main { width: auto; flex: 1 1 auto; min-width: 0; align-items: stretch; background: none; }
	.tp-checkout .checkout-page__main-content { width: 100%; max-width: none; padding: 0 0 64px; box-sizing: border-box; }
	.tp-checkout .checkout-page__sidebar { display: block; align-self: stretch; width: 440px; flex: 0 0 440px; background: none; border: 0; }
	.tp-checkout .checkout-page__sidebar-wrapper { width: 100%; max-width: none; margin-bottom: 64px; padding: 24px; box-sizing: border-box; border: 1px solid var(--co-line); background: #fff; position: sticky; top: 24px; max-height: calc(100vh - 48px - var(--wp-admin--admin-bar--height, 0px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

	/* Theme header — within the same container */
	body:has(.tp-checkout) .tp-cheader { padding: 0 var(--co-edge); }
}

/* --- Plugin header: ≥1024 — "Kassan" heading above the columns, stepper removed (steps are numbered themselves);
   <1024 — heading for screen readers only, stepper = progress bar --- */
@media (min-width: 1024px) {
	.tp-checkout .checkout-page__header { display: block; min-height: 0; width: 100%; max-width: 1120px; margin: 0 auto; padding: 28px 40px 18px; box-sizing: border-box; border: 0; background: none; }
	.tp-checkout .checkout-page__header-left { display: block; width: auto; }
	.tp-checkout .checkout-page__header-title { width: auto; max-width: none; margin: 0; padding: 0; font: 400 30px/1.1 var(--wp--preset--font-family--heading); letter-spacing: 0; text-transform: uppercase; color: var(--co-ink); }
	.tp-checkout .checkout-page__header-right { display: none; }
}
@media (max-width: 1023px) {
	.tp-checkout .checkout-page__header-left { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* h1 "Kassan" remains for screen readers */
	.tp-checkout .checkout-page__header { position: relative; display: block; height: 3px; min-height: 0; padding: 0; border: 0; background: var(--co-line); }
	.tp-checkout .checkout-page__header-right { display: none; }
	.tp-checkout .checkout-page__header::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 33.333%; background: var(--co-ink); transition: width 0.3s ease; }
	.tp-checkout .checkout-page__header:has(.checkout-page__stepper > :nth-child(5).checkout-page__stepper-step--active)::after { width: 66.666%; }
	.tp-checkout .checkout-page__header:has(.checkout-page__stepper > :nth-child(7).checkout-page__stepper-step--active)::after { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .tp-checkout .checkout-page__header::after { transition: none; } }

/* --- Steps: no borders, hairline between them; number is a 30px square, 48px "rail" on the left --- */
.tp-checkout .checkout-step { margin: 0; border: 0; border-top: 1px solid var(--co-line); border-radius: 0; background: none; box-shadow: none; }
.tp-checkout .checkout-page__private > .checkout-step:first-child { border-top: 0; }
.tp-checkout .checkout-step__header { display: flex; align-items: center; gap: 18px; min-height: 68px; padding: 0; border: 0; background: none; }
.tp-checkout .checkout-step__number { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--co-input-line); border-radius: 0; background: #fff; color: var(--co-mute); font: 400 13px/1 var(--wp--preset--font-family--heading); }
.tp-checkout .checkout-step--active .checkout-step__number { background: var(--co-ink); border-color: var(--co-ink); color: #fff; }
.tp-checkout .checkout-step--completed .checkout-step__number { background: var(--co-ok); border-color: var(--co-ok); color: #fff; }
.tp-checkout .checkout-step__title { margin: 0; font: 400 18px/1.15 var(--wp--preset--font-family--heading); letter-spacing: 0; text-transform: uppercase; color: var(--co-ink); }
.tp-checkout .checkout-step--muted .checkout-step__title { color: var(--co-mute); }
.tp-checkout :is(.checkout-step__subtitle, .checkout-step__badge) { font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.1em; color: var(--co-stone); background: none; border: 0; padding: 0; }
.tp-checkout .checkout-step__edit { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; margin-left: auto; height: 30px; min-height: 0; padding: 0 12px; border: 1px solid var(--co-input-line); border-radius: 0; background: #fff; font: 600 12px/1 var(--wp--preset--font-family--body); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--co-stone); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.tp-checkout .checkout-step__edit svg { display: none; } /* "Ändra" — outline button without icon */
.tp-checkout .checkout-step__edit:hover { border-color: var(--co-ink); background: var(--co-mist); color: var(--co-ink); }
.tp-checkout .checkout-step__content { padding: 0 0 32px 48px; }
.tp-checkout .checkout-step__summary { padding: 0 0 18px 48px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--co-ink); } /* values semibold; labels mono 400 below */
.tp-checkout :is(.checkout-step__summary-columns, .checkout-step__summary-grid) { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 24px; }
.tp-checkout .checkout-step__summary-label { margin-bottom: 4px; font: 400 10px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--co-stone); }
.tp-checkout .checkout-step__summary-muted { font-weight: 400; color: var(--co-stone); }
.tp-checkout .checkout-step__summary-shipping { display: flex; align-items: center; gap: 10px; }
.tp-checkout .checkout-step__summary-shipping-img { width: auto; max-height: 20px; }
/* "Frakt" summary: the "Leveransmetod" label is for screen readers only; the shipping method name is larger */
.tp-checkout .checkout-step__summary-content:has(.checkout-step__summary-shipping) > .checkout-step__summary-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tp-checkout .checkout-step__summary-shipping { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--co-ink); }
.tp-checkout .checkout-step__summary-shipping .checkout-step__summary-shipping-img { max-height: 24px; }
/* Selected pickup point in the "Frakt" step summary (theme.js section 31) — a line under the shipping method:
   ⌖ NAME · address */
.tp-checkout .tp-co-pickup { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; min-width: 0; font-size: 13px; line-height: 1.45; }
.tp-checkout .tp-co-pickup__ico { flex: none; width: 13px; height: 13px; margin-top: 2px; color: var(--co-stone); }
.tp-checkout .tp-co-pickup__name { font-weight: 600; color: var(--co-ink); }
.tp-checkout .tp-co-pickup__addr { font-weight: 400; color: var(--co-stone); }
.tp-checkout .tp-co-pickup__addr::before { content: " · "; }
.tp-checkout .tp-co-pickup .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Step and place-order buttons */
.tp-checkout :is(.checkout-step__continue-btn, .checkout-page__submit-btn) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 0; border-radius: 0; background: var(--co-ink); color: #fff; font: 400 13px/1 var(--wp--preset--font-family--heading); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background-color 0.15s ease; }
.tp-checkout .checkout-step__continue-btn::after { content: "→"; transition: transform 0.2s ease; }
.tp-checkout :is(.checkout-step__continue-btn, .checkout-page__submit-btn):hover:not(:disabled) { background: var(--wp--preset--color--accent-deep); }
.tp-checkout .checkout-step__continue-btn:hover::after { transform: translateX(4px); }
.tp-checkout :is(.checkout-step__continue-btn, .checkout-page__submit-btn):disabled { opacity: 0.45; cursor: not-allowed; }
.tp-checkout .checkout-page__submit-btn { width: 100%; min-height: 56px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .tp-checkout .checkout-step__continue-btn::after { transition: none; } }
@media (max-width: 1023px) {
	.tp-checkout :is(.checkout-step__content, .checkout-step__summary) { padding-left: 0; }
	.tp-checkout .checkout-step__continue-btn { width: 100%; }
}

/* --- Login / guest: guest is the primary action first, login secondary (order via CSS) --- */
.tp-checkout .checkout-auth { display: flex; flex-direction: column; gap: 16px; }
.tp-checkout .checkout-auth__guest { order: -2; }
.tp-checkout .checkout-auth__divider { order: -1; display: flex; align-items: center; gap: 14px; margin: 4px 0; }
.tp-checkout .checkout-auth__divider-line { flex: 1; height: 1px; background: var(--co-line); }
.tp-checkout .checkout-auth__divider-text { font-size: 0; }
.tp-checkout .checkout-auth__divider-text::after { content: "Har du konto? Logga in"; font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--co-stone); }
.tp-checkout .checkout-auth__guest-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 24px; border: 1px solid var(--co-ink); border-radius: 0; background: #fff; color: var(--co-ink); font: 400 14px/1 var(--wp--preset--font-family--heading); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.tp-checkout .checkout-auth__guest-btn:hover { background: var(--co-ink); color: #fff; }
.tp-checkout .checkout-auth__tabs { display: flex; margin: 0; border: 0; border-bottom: 1px solid var(--co-line); }
.tp-checkout .checkout-auth__tab { flex: none; margin: 0 20px -1px 0; padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; font: 600 13px/1 var(--wp--preset--font-family--body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--co-stone); cursor: pointer; }
.tp-checkout .checkout-auth__tab--active { color: var(--co-ink); border-bottom-color: var(--co-ink); }
.tp-checkout .checkout-auth__form { display: grid; gap: 16px; }
.tp-checkout .checkout-auth__login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tp-checkout .checkout-auth__text-btn { padding: 0; border: 0; background: none; font: 400 14px/1 var(--wp--preset--font-family--body); color: var(--co-stone); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tp-checkout .checkout-auth__submit { min-height: 52px; border: 1px solid var(--co-ink); border-radius: 0; background: var(--co-ink); color: #fff; font: 400 13px/1 var(--wp--preset--font-family--heading); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background-color 0.15s ease; }
.tp-checkout .checkout-auth__submit:hover:not(:disabled) { background: var(--wp--preset--color--accent-deep); border-color: var(--wp--preset--color--accent-deep); }
.tp-checkout .checkout-auth__submit:disabled { opacity: 0.45; cursor: not-allowed; }
/* "Du handlar som gäst · Logga in" — a quiet bar in the theme language (instead of the plugin's blue info block) */
.tp-checkout .checkout-auth__guest-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding: 12px 16px; border: 0; border-radius: 0; background: var(--co-mist); }
.tp-checkout .checkout-auth__guest-banner-text { font: 400 14px/1.4 var(--wp--preset--font-family--body); color: #4a5263; }
.tp-checkout .checkout-auth__guest-banner-link { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 32px; padding: 0; border: 0; background: none; font: 600 13px/1 var(--wp--preset--font-family--body); color: var(--co-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tp-checkout .checkout-auth__guest-banner-link:hover { opacity: 1; text-decoration-thickness: 2px; }
.tp-checkout .checkout-auth__guest-banner-link svg { width: 14px; height: 14px; }

/* --- Fields: label above the field (mono), 48px mist field, focus — ink --- */
.tp-checkout :is(.checkout-auth__label, .guest-shipping-form__label, .qcom-label:not([class*="__option-label"], .qcom-checkout-consolidated__label, .qcom-checkout-terms__label), .qcom-checkout-order-ref__label, .qcom-checkout-delivery-date__label, .qcom-checkout-invoice-text__label) { display: block; margin: 0 0 7px; font: 400 10px/1.2 var(--wp--preset--font-family--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--co-stone); }
.tp-checkout :is(.qcom-input, .iti__tel-input, .qcom-select__trigger, .qcom-checkout-order-ref__input, .qcom-checkout-delivery-date__input) { height: 48px; box-sizing: border-box; border: 1px solid var(--co-line); border-radius: 0; background: var(--co-mist); color: var(--co-ink); font: 400 15px/1.2 var(--wp--preset--font-family--body); box-shadow: none; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
.tp-checkout :is(textarea, .qcom-textarea, .qcom-checkout-invoice-text__textarea) { min-height: 96px; padding: 12px 14px; box-sizing: border-box; border: 1px solid var(--co-line); border-radius: 0; background: var(--co-mist); font: 400 15px/1.4 var(--wp--preset--font-family--body); }
.tp-checkout :is(.qcom-input, .iti__tel-input, .qcom-select__trigger, textarea):hover { border-color: var(--co-input-line); }
.tp-checkout :is(.qcom-input, .iti__tel-input, .qcom-select__trigger, textarea, .qcom-checkout-order-ref__input, .qcom-checkout-delivery-date__input):focus { outline: none; border-color: var(--co-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--co-ink); }
.tp-checkout :is(.qcom-input, .iti__tel-input)[aria-invalid="true"] { border-color: var(--co-err); background: #fff; }
.tp-checkout :is(.qcom-field-error, .qcom-form-error, [class*="__error-text"], [class*="__field-error"]) { margin-top: 6px; font: 400 13px/1.35 var(--wp--preset--font-family--body); color: var(--co-err); }
.tp-checkout :is(.guest-shipping-form__form, .qcom-checkout-address-form) { display: grid; gap: 16px; }
.tp-checkout .guest-shipping-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tp-checkout .guest-shipping-form__separator { height: 1px; margin: 4px 0; border: 0; background: var(--co-line); }
.tp-checkout .guest-shipping-form__checkbox-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.tp-checkout input[type="checkbox"]:not(.qcom-switch input) { width: 18px; height: 18px; margin: 0; accent-color: var(--co-ink); }
.tp-checkout .guest-shipping-form__submit { min-height: 52px; padding: 0 28px; border: 0; border-radius: 0; background: var(--co-ink); color: #fff; font: 400 13px/1 var(--wp--preset--font-family--heading); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.tp-checkout .guest-shipping-form__submit:hover:not(:disabled) { background: var(--wp--preset--color--accent-deep); }
.tp-checkout .qcom-switch[data-state="checked"] { background: var(--co-ink); }
@media (max-width: 479px) { .tp-checkout .guest-shipping-form__row { grid-template-columns: 1fr; } }

/* --- Shipping / pickup / payment: option cards, selected one has a 1px ink border --- */
.tp-checkout :is(.qcom-checkout-shipping__options, .qcom-checkout-payment__options) { display: grid; gap: 8px; }
.tp-checkout :is(.qcom-checkout-shipping__title, .qcom-checkout-pickup__label) { margin: 0 0 10px; font: 400 10px/1.2 var(--wp--preset--font-family--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--co-stone); }
/* "Välj utlämningsställe": icon in line with the label (bottom margin on the row, not the label) */
.tp-checkout .qcom-checkout-pickup__header { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.tp-checkout .qcom-checkout-pickup__header .qcom-checkout-pickup__label { margin: 0; }
.tp-checkout .qcom-checkout-pickup__icon { flex: none; width: 14px; height: 14px; color: var(--co-stone); }
.tp-checkout :is(.qcom-checkout-shipping__option, .qcom-checkout-payment__option) { border: 1px solid var(--co-line); border-radius: 0; background: #fff; transition: border-color 0.15s ease; }
.tp-checkout :is(.qcom-checkout-shipping__option, .qcom-checkout-payment__option):hover { border-color: var(--co-input-line); }
.tp-checkout :is(.qcom-checkout-shipping__option, .qcom-checkout-payment__option):has([data-state="checked"], input:checked) { border: 1px solid var(--co-ink); }
.tp-checkout :is(.qcom-checkout-shipping__option-label, .qcom-checkout-payment__option-label) { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; box-sizing: border-box; margin: 0; padding: 16px 18px; border: 0; border-radius: 0; background: none; font: 400 15px/1.3 var(--wp--preset--font-family--body); letter-spacing: 0; text-transform: none; color: var(--co-ink); cursor: pointer; }
.tp-checkout :is(.qcom-checkout-shipping__option-label, .qcom-checkout-payment__option-label):is(:hover, :has(:checked)) { border: 0; background: none; }
.tp-checkout :is(.qcom-checkout-shipping__option-inner, .qcom-checkout-payment__option-inner) { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tp-checkout :is(.qcom-checkout-shipping__option-name, .qcom-checkout-payment__option-name) { font: 600 15px/1.3 var(--wp--preset--font-family--body); color: var(--co-ink); }
.tp-checkout :is(.qcom-checkout-shipping__option-description, .qcom-checkout-payment__option-description, .qcom-checkout-payment__option-description-text) { margin-top: 3px; font: 400 13px/1.4 var(--wp--preset--font-family--body); color: var(--co-stone); }
.tp-checkout .qcom-checkout-shipping__option-price-block { flex: none; font: 600 15px/1 var(--wp--preset--font-family--body); color: var(--co-ink); text-align: right; }
.tp-checkout .qcom-checkout-shipping__option-image { flex: none; width: auto; max-width: 72px; height: 36px; object-fit: contain; } /* carrier logo */
.tp-checkout :is(.qcom-checkout-shipping__option, .qcom-checkout-payment__option) [role="radio"] { flex: none; width: 18px; height: 18px; border: 1px solid var(--co-input-line); border-radius: 50%; background: #fff; }
.tp-checkout :is(.qcom-checkout-shipping__option, .qcom-checkout-payment__option) [role="radio"][data-state="checked"] { border: 5px solid var(--co-ink); }
.tp-checkout :is(.qcom-checkout-shipping__option, .qcom-checkout-payment__option) [role="radio"] > * { display: none; }
.tp-checkout .qcom-checkout-shipping__pickup-panel { margin: 0; padding: 12px 18px 16px; border: 0; border-top: 1px solid var(--co-line); background: var(--co-mist); }
.tp-checkout .qcom-checkout-shipping__pickup-panel .qcom-select__trigger { background: #fff; } /* on the panel's light background the field is white */
.tp-checkout .qcom-checkout-pickup__item-name { font: 600 14px/1.3 var(--wp--preset--font-family--body); }
.tp-checkout .qcom-checkout-pickup__item-address { font-size: 13px; color: var(--co-stone); }
/* Terms and privacy — small text above the button */
.tp-checkout .qcom-checkout-terms { margin: 16px 0; }
.tp-checkout :is(.qcom-checkout-terms__label, .qcom-checkout-terms__privacy-text) { margin: 0; font: 400 13px/1.45 var(--wp--preset--font-family--body); letter-spacing: 0; text-transform: none; color: #4a5263; }
/* Links in the consent text (terms / policy) — prominent: ink, bold, underlined; hover — thicker line */
.tp-checkout :is(.qcom-checkout-terms__link, .guest-shipping-form__link, .checkout-auth__link) { font-weight: 600; color: var(--co-ink); text-decoration: underline; text-decoration-color: var(--co-ink); text-decoration-thickness: 2px !important; text-underline-offset: 3px; white-space: nowrap; }
.tp-checkout :is(.qcom-checkout-terms__link, .guest-shipping-form__link, .checkout-auth__link):hover { background: var(--co-mist); }

/* --- B2B: customer bar, address selection, order details --- */
/* Kundinformation (logged-in customer): a "contact" card — name as the main line, e-post · telefon below;
   field labels are obvious from the values — screen readers only. B2B: company and org.nr on a separate line below a rule. */
.tp-checkout .qcom-checkout-customer-info { margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--co-line); border-radius: 0; background: #fff; }
.tp-checkout .qcom-checkout-customer-info__header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tp-checkout .qcom-checkout-customer-info__title { margin: 0; font: 400 10px/1.2 var(--wp--preset--font-family--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--co-stone); }
.tp-checkout .qcom-checkout-customer-info__edit-link { flex: none; font: 600 13px/1 var(--wp--preset--font-family--body); color: var(--co-ink); text-decoration: underline; text-underline-offset: 3px; }
.tp-checkout .qcom-checkout-customer-info__grid { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin: 0; }
.tp-checkout .qcom-checkout-customer-info__grid > div { display: flex; align-items: baseline; min-width: 0; }
.tp-checkout .qcom-checkout-customer-info__field-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.tp-checkout .qcom-checkout-customer-info__field-value { display: inline; overflow-wrap: anywhere; font: 400 15px/1.45 var(--wp--preset--font-family--body); color: #4a5263; }
/* Name — the main line */
.tp-checkout .qcom-checkout-customer-info > .qcom-checkout-customer-info__grid > div:first-child { flex: 0 0 100%; margin-bottom: 2px; }
.tp-checkout .qcom-checkout-customer-info > .qcom-checkout-customer-info__grid > div:first-child .qcom-checkout-customer-info__field-value { font: 600 17px/1.3 var(--wp--preset--font-family--body); color: var(--co-ink); }
/* "·" separator between e-post and telefon (and between company and org.nr) */
.tp-checkout .qcom-checkout-customer-info__grid > div + div:not(:nth-child(2))::before,
.tp-checkout .qcom-checkout-customer-info__divider .qcom-checkout-customer-info__grid > div + div::before { content: "·"; margin: 0 10px; color: var(--co-mute); }
/* B2B */
.tp-checkout .qcom-checkout-customer-info__divider { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--co-line); }
.tp-checkout .qcom-checkout-customer-info__divider .qcom-checkout-customer-info__grid > div:first-child .qcom-checkout-customer-info__field-value { font-weight: 600; color: var(--co-ink); }
.tp-checkout .qcom-checkout-customer-info__divider .qcom-checkout-customer-info__grid > div:nth-child(2) .qcom-checkout-customer-info__field-value::before { content: "Org.nr "; font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.06em; color: var(--co-stone); }
.tp-checkout [class^="qcom-checkout-address-selector__item"] { border-radius: 0; }
/* Leveransadress — in the same language as the "Kundinformation" card: mono label, white card with a thin border
   (not the main focus), full address without truncation; "Lägg till ny adress" — a quiet text link. */
.tp-checkout .qcom-checkout-address-selector { gap: 8px; margin: 0 0 4px; } /* + the step button's margin-top (20px) */
.tp-checkout .qcom-checkout-address-selector__title { margin: 0; font: 400 10px/1.2 var(--wp--preset--font-family--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--co-stone); }
.tp-checkout :is(.qcom-checkout-address-selector__selected, .qcom-checkout-address-selector__selected--highlight, .qcom-checkout-address-selector__trigger) { min-height: 0; margin: 0; padding: 14px 18px; border: 1px solid var(--co-line); border-radius: 0; background: #fff; box-shadow: none; }
.tp-checkout .qcom-checkout-address-selector__trigger { gap: 12px; color: var(--co-ink); text-align: left; cursor: pointer; transition: border-color 0.15s ease; }
.tp-checkout .qcom-checkout-address-selector__trigger:hover { border-color: var(--co-input-line); background: #fff; }
.tp-checkout :is(.qcom-checkout-address-selector__address-header, .qcom-checkout-address-selector__selected-content) { align-items: flex-start; gap: 10px; }
.tp-checkout :is(.qcom-checkout-address-selector__address-text, .qcom-checkout-address-selector__selected-text, .qcom-checkout-address-selector__placeholder) { overflow: visible; white-space: normal; text-overflow: clip; font: 400 15px/1.45 var(--wp--preset--font-family--body); color: var(--co-ink); }
.tp-checkout .qcom-checkout-address-selector__icon { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--co-stone); }
.tp-checkout .qcom-checkout-address-selector__chevron-icon { flex: none; width: 16px; height: 16px; color: var(--co-stone); }
/* "Lägg till ny adress": the __add-btn class is on the wp-block-button wrapper, the button itself is .qcom-wp-button__link (theme WP button styles) */
.tp-checkout .qcom-checkout-address-selector__add-btn { align-self: flex-start; width: auto; margin: 0; padding: 0; }
.tp-checkout .qcom-checkout-address-selector__add-btn .qcom-wp-button__link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; width: auto; min-height: 32px; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none; font: 600 13px/1 var(--wp--preset--font-family--body) !important; letter-spacing: 0; text-transform: none; color: var(--co-ink) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tp-checkout .qcom-checkout-address-selector__add-btn .qcom-wp-button__link:hover { text-decoration-thickness: 2px; }
.tp-checkout .qcom-checkout-address-selector__add-icon { width: 14px; height: 14px; }
/* Gateway payment (Kustom/Klarna/Nets in an iframe): iframe no wider than the column — otherwise the page
   scrolls sideways and the step heading is clipped on the left; "Avbryt betalning" — an ink outline button */
.tp-checkout .checkout-step__content :is(iframe, [id*="klarna"], [id*="kustom"], [class*="nets"]) { max-width: 100%; }
.tp-checkout .checkout-page__main-content { min-width: 0; overflow-x: clip; overflow-clip-margin: 6px; } /* room for the cards' focus outline */
/* The button sits in the step content — we place it in the heading row (right, like "Ändra") via positioning,
   without moving the React node. Step heading 68px, button 30px → top 19px. */
.tp-checkout .checkout-step:has(.checkout-page__b2b-processing-cancel) { position: relative; }
.tp-checkout .checkout-step:has(.checkout-page__b2b-processing-cancel) .checkout-step__title { padding-right: 180px; }
.tp-checkout .checkout-page__b2b-processing-cancel { position: absolute; top: 19px; right: 0; width: auto; margin: 0; padding: 0; }
/* "Avbryt betalning" — like "Ändra" on completed steps: a light 30px outline button */
.tp-checkout .checkout-page__b2b-processing-cancel .qcom-wp-button__link { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: auto; height: 30px; min-height: 0; margin: 0; padding: 0 12px !important; border: 1px solid var(--co-input-line) !important; border-radius: 0; background: #fff !important; box-shadow: none; font: 600 12px/1 var(--wp--preset--font-family--body) !important; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--co-stone) !important; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.tp-checkout .checkout-page__b2b-processing-cancel .qcom-wp-button__link:hover { border-color: var(--co-ink) !important; background: var(--co-mist) !important; color: var(--co-ink) !important; }
/* "Ny adress" form: actions are two outline buttons: "Avbryt" red (left), "Lägg till" ink (right) */
.tp-checkout .qcom-checkout-address-form__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; padding: 0; border: 0; background: none; }
.tp-checkout .qcom-checkout-address-form__actions .qcom-wp-button { width: auto; margin: 0; padding: 0; }
.tp-checkout .qcom-checkout-address-form__actions .qcom-wp-button__link { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 44px; margin: 0; padding: 0 22px !important; border: 1px solid var(--co-ink) !important; border-radius: 0; background: #fff !important; box-shadow: none; font: 400 12px/1 var(--wp--preset--font-family--heading) !important; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--co-ink) !important; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.tp-checkout .qcom-checkout-address-form__actions .qcom-wp-button__link:hover:not(:disabled) { background: var(--co-ink) !important; color: #fff !important; }
.tp-checkout .qcom-checkout-address-form__actions > .qcom-wp-button:first-child .qcom-wp-button__link { border-color: var(--co-err) !important; color: var(--co-err) !important; }
.tp-checkout .qcom-checkout-address-form__actions > .qcom-wp-button:first-child .qcom-wp-button__link:hover { background: var(--co-err) !important; color: #fff !important; }
.tp-checkout .qcom-checkout-address-form__actions .qcom-wp-button__link:disabled,
.tp-checkout .qcom-checkout-address-form__actions .qcom-wp-button__link--disabled { opacity: 0.45; cursor: not-allowed; }
.tp-checkout .qcom-checkout-address-selector__item--disabled { opacity: 0.45; }
.tp-checkout :is(.qcom-checkout-order-ref, .qcom-checkout-delivery-date, .qcom-checkout-invoice-text, .qcom-checkout-consolidated) { margin: 0 0 16px; }
.tp-checkout :is(.qcom-checkout-order-ref__optional, .qcom-checkout-delivery-date__optional) { margin-left: 6px; color: var(--co-mute); text-transform: none; letter-spacing: 0; }
.tp-checkout .qcom-checkout-order-ref__counter { font: 400 11px/1 var(--wp--preset--font-family--mono); color: var(--co-mute); }
.tp-checkout .qcom-checkout-consolidated { margin-top: 16px; } /* spacing from the shipping cards */
.tp-checkout .qcom-checkout-consolidated__row { display: flex; align-items: flex-start; gap: 10px; }
.tp-checkout .qcom-checkout-consolidated__row .qcom-checkbox { margin-top: 1px; }
.tp-checkout .qcom-checkout-consolidated__label { margin: 0; font: 400 14px/1.4 var(--wp--preset--font-family--body); letter-spacing: 0; text-transform: none; color: #4a5263; cursor: pointer; }
.tp-checkout .qcom-checkout-delivery-date__calendar-btn { border: 0; border-radius: 0; background: none; color: var(--co-ink); }

/* --- Summary panel (white card) --- */
.tp-checkout .checkout-page__order-summary-card { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.tp-checkout .checkout-page__order-summary-card .checkout-step__header { position: relative; justify-content: space-between; min-height: 0; margin-bottom: 4px; padding: 0; }
.tp-checkout .checkout-page__order-summary-card .checkout-step__title { font-size: 15px; }
.tp-checkout .checkout-page__order-summary-card .checkout-step__number { display: none; }
.tp-checkout .checkout-page__order-summary-card .checkout-step__subtitle { display: none; } /* item count — replaced by the compact view button */
.tp-checkout .checkout-page__order-summary-card .checkout-step__content { padding: 0; }
.tp-checkout :is(.checkout-page__desktop-cart, .checkout-page__desktop-summary, .qcom-checkout-cart-list, .qcom-cart-list) { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.tp-checkout .qcom-checkout-cart-list__heading { display: none; } /* duplicates the card heading */

/* Item is a grid on the list row; .qcom-checkout-cart-item itself "dissolves" (display: contents)
   so the kit contents (a sibling in the row) sit between the name and the price row:
   photo 56 · name (2 lines) / SKU → [kit contents] → frame "price / st · − 1 + · total · bin".
   Unit price and quantity are written by theme.js §29 into data-tp-unit / data-tp-qty (the plugin shows unit price only when qty > 1). */
.tp-checkout .qcom-cart-list__item-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 10px 12px; margin: 0; padding: 14px 0; border: 0; background: none; }
.tp-checkout .qcom-cart-list__item-row + .qcom-cart-list__item-row { border-top: 1px solid var(--co-soft); }
.tp-checkout .qcom-cart-list__item-row > .qcom-checkout-cart-item { display: contents; }
.tp-checkout .qcom-checkout-cart-item:not(.qcom-checkout-cart-item--child) > .qcom-checkout-cart-item__image { width: 56px; height: 56px; box-sizing: border-box; border: 1px solid var(--co-panel-line); border-radius: 0; background: #fff; }
.tp-checkout .qcom-checkout-cart-item__image img { width: 100%; height: 100%; object-fit: contain; }
.tp-checkout .qcom-checkout-cart-item__body { min-width: 0; }
.tp-checkout .qcom-checkout-cart-item:not(.qcom-checkout-cart-item--child) .qcom-checkout-cart-item__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 13px/18px var(--wp--preset--font-family--body); text-transform: none; letter-spacing: 0; color: var(--co-ink); }
.tp-checkout .qcom-checkout-cart-item__meta-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 4px; overflow: hidden; white-space: nowrap; }
.tp-checkout .qcom-checkout-cart-item__code { font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.04em; color: var(--co-stone); }
.tp-checkout .qcom-checkout-cart-item__meta-divider { width: 1px; height: 10px; background: var(--co-panel-line); }
.tp-checkout [class*="qcom-checkout-cart-item__stock"] { display: inline-flex; align-items: center; gap: 6px; font: 400 11px/1 var(--wp--preset--font-family--mono); color: var(--co-stone); }
.tp-checkout [class*="qcom-checkout-cart-item__stock"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tp-checkout .qcom-checkout-cart-item__stock--in-stock { color: var(--co-ok); }
.tp-checkout .qcom-checkout-cart-item__stock--out-of-stock { color: var(--co-err); }
.tp-checkout .qcom-checkout-cart-item__delivery { display: block; margin-top: 4px; font-size: 12px; color: var(--co-stone); }

/* Price row — full width, framed */
.tp-checkout .qcom-checkout-cart-item:not(.qcom-checkout-cart-item--child) > .qcom-checkout-cart-item__price { grid-column: 1 / -1; order: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; grid-template-areas: "badge . orig ." "unit qty total del"; column-gap: 10px; align-items: center; margin: 0; padding: 7px 6px 7px 12px; border: 1px solid var(--co-line); border-radius: 0; }
.tp-checkout .qcom-checkout-cart-item__price::before { content: attr(data-tp-unit); grid-area: unit; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 12px/1.2 var(--wp--preset--font-family--body); color: var(--co-stone); }
.tp-checkout .qcom-checkout-cart-item__price .qcom-checkout-cart-item__unit-price { display: none; }
.tp-checkout .qcom-checkout-cart-item__price .qcom-checkout-cart-item__original-price { grid-area: orig; justify-self: end; margin-bottom: 2px; font: 400 12px/1.2 var(--wp--preset--font-family--body); text-decoration: line-through; color: var(--co-stone); }
.tp-checkout .qcom-checkout-cart-item__price .qcom-checkout-cart-item__discount-badge { grid-area: badge; justify-self: start; margin-bottom: 2px; }
.tp-checkout .qcom-checkout-cart-item__price .qcom-checkout-cart-item__actions { display: contents; }
.tp-checkout .qcom-checkout-cart-item__price .qcom-checkout-cart-item__total-price { grid-area: total; justify-self: end; font: 700 14px/1.2 var(--wp--preset--font-family--body); white-space: nowrap; color: var(--co-ink); }
.tp-checkout .qcom-checkout-cart-item__price .qcom-checkout-cart-item__delete { grid-area: del; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; background: none; color: var(--co-mute); cursor: pointer; }
.tp-checkout .qcom-checkout-cart-item__price .qcom-checkout-cart-item__delete:hover { color: var(--co-err); }
.tp-checkout .qcom-checkout-cart-item__price .qcom-checkout-cart-item__delete svg { display: none; }
.tp-checkout .qcom-checkout-cart-item__price .qcom-checkout-cart-item__delete::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Quantity — a small horizontal "− 1 +" with a light border */
.tp-checkout .qcom-checkout-cart-item__price .qcom-checkout-cart-item__quantity { grid-area: qty; display: flex; flex-direction: row; align-items: stretch; width: auto; height: 20px; box-sizing: border-box; padding: 0; border: 1px solid var(--co-soft); border-radius: 0; background: #fff; }
/* The plugin sets field and button font/color/border with !important — we override the same way */
.tp-checkout .qcom-checkout-cart-qty__btn { width: 18px; height: 18px; min-height: 0; padding: 0; border: 0; background: none; color: var(--co-ink) !important; font-family: var(--wp--preset--font-family--body) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1; cursor: pointer; }
.tp-checkout .qcom-checkout-cart-qty__btn:hover:not(:disabled) { background: var(--co-mist); }
.tp-checkout .qcom-checkout-cart-qty__btn:disabled { color: var(--co-mute); cursor: not-allowed; }
.tp-checkout .qcom-checkout-cart-qty__value { width: 20px; height: 18px; padding: 0; border: 0 !important; border-left: 1px solid var(--co-mist) !important; border-right: 1px solid var(--co-mist) !important; border-radius: 0; background: none !important; box-shadow: none; text-align: center; font-family: var(--wp--preset--font-family--body) !important; font-size: 11px !important; font-weight: 700 !important; line-height: 18px; color: var(--co-ink) !important; -moz-appearance: textfield; }
.tp-checkout .qcom-checkout-cart-qty__value:focus { outline: none; background: var(--co-mist) !important; box-shadow: none; }
.tp-checkout .qcom-checkout-cart-qty__value::-webkit-inner-spin-button,
.tp-checkout .qcom-checkout-cart-qty__value::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Kit contents — collapsible (plugin button), a band on a light background between the name and the price row */
.tp-checkout .qcom-checkout-cart-item__children { grid-column: 1 / -1; order: 1; margin: 0; padding: 0; }
.tp-checkout .qcom-checkout-cart-item__children-card { margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--co-kit); box-shadow: none; }
.tp-checkout .qcom-checkout-cart-item__children-toggle { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 30px; padding: 7px 12px; border: 0; border-radius: 0; background: none; font: 400 10px/1.2 var(--wp--preset--font-family--mono); letter-spacing: 0.1em; text-transform: uppercase; text-align: left; color: #4a5263; cursor: pointer; }
.tp-checkout .qcom-checkout-cart-item__children-toggle:hover { background: #f1f3f7; color: var(--co-ink); }
.tp-checkout .qcom-checkout-cart-item__children-toggle svg { flex: none; width: 12px; height: 12px; }
.tp-checkout .qcom-checkout-cart-item__children-list { display: grid; gap: 5px; margin: 0; padding: 2px 12px 9px; border: 0; }
.tp-checkout .qcom-checkout-cart-item__children-list > * + * { border-top: 0; }
.tp-checkout .qcom-checkout-cart-item--child { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 8px; margin: 0; padding: 0; border: 0; background: none; font: 400 12px/16px var(--wp--preset--font-family--body); color: #4a5263; }
.tp-checkout .qcom-checkout-cart-item__image--sm,
.tp-checkout .qcom-checkout-cart-item__child-code { display: none; }
.tp-checkout .qcom-checkout-cart-item__child-body { min-width: 0; }
.tp-checkout .qcom-checkout-cart-item__title--child { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 12px/16px var(--wp--preset--font-family--body); text-transform: none; letter-spacing: 0; color: #4a5263; }
.tp-checkout .qcom-checkout-cart-item__child-right { display: contents; }
.tp-checkout .qcom-checkout-cart-item__child-qty { order: -1; min-width: 24px; }
.tp-checkout .qcom-checkout-cart-item__child-qty-value { font: 400 11px/16px var(--wp--preset--font-family--mono); color: var(--co-stone); }

/* Compact view (html.tp-cart-compact, button — theme.js section 17): no photo · name on one line · "2×" · total */
.tp-cart-compact .tp-checkout .qcom-cart-list__item-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 9px 0; }
.tp-cart-compact .tp-checkout .qcom-checkout-cart-item:not(.qcom-checkout-cart-item--child) > .qcom-checkout-cart-item__image { display: none; }
.tp-cart-compact .tp-checkout .qcom-checkout-cart-item:not(.qcom-checkout-cart-item--child) .qcom-checkout-cart-item__title { display: block; white-space: nowrap; text-overflow: ellipsis; }
.tp-cart-compact .tp-checkout :is(.qcom-checkout-cart-item__meta-row, .qcom-checkout-cart-item__delivery, .qcom-checkout-cart-item__children) { display: none; }
.tp-cart-compact .tp-checkout .qcom-checkout-cart-item:not(.qcom-checkout-cart-item--child) > .qcom-checkout-cart-item__price { grid-column: auto; order: 0; display: flex; flex-direction: row; align-items: baseline; gap: 10px; padding: 0; border: 0; white-space: nowrap; }
.tp-cart-compact .tp-checkout .qcom-checkout-cart-item__price::before { content: attr(data-tp-qty) "×"; font: 400 11px/1 var(--wp--preset--font-family--mono); color: var(--co-stone); }
.tp-cart-compact .tp-checkout .qcom-checkout-cart-item__price :is(.qcom-checkout-cart-item__quantity, .qcom-checkout-cart-item__delete, .qcom-checkout-cart-item__discount-badge, .qcom-checkout-cart-item__original-price) { display: none; }
.tp-checkout .tp-cart-compact-btn--checkout { position: static; flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-left: 12px; padding: 0; border: 1px solid var(--co-line); border-radius: 0; background: #fff; color: var(--co-ink); }
.tp-checkout .tp-cart-compact-btn--checkout:hover { background: var(--co-mist); }
.tp-checkout .tp-cart-compact-btn--checkout svg { width: 16px; height: 16px; }

/* Discount, rows, total */
.tp-checkout .qcom-checkout-discount { margin: 0; padding: 16px 0; border: 0; border-top: 1px solid var(--co-panel-line); }
.tp-checkout .qcom-checkout-discount__toggle { padding: 0; border: 0; background: none; font: 600 13px/1 var(--wp--preset--font-family--body); color: var(--co-ink); text-decoration: underline; text-underline-offset: 3px; text-transform: none; cursor: pointer; }
.tp-checkout .qcom-checkout-discount :is(form, div:has(> input)) { display: flex; gap: 8px; margin-top: 12px; }
.tp-checkout .qcom-checkout-discount input { flex: 1; min-width: 0; height: 44px; background: #fff; }
.tp-checkout .qcom-checkout-discount button:not(.qcom-checkout-discount__toggle) { flex: none; min-height: 44px; padding: 0 16px; border: 1px solid var(--co-ink); border-radius: 0; background: #fff; color: var(--co-ink); font: 600 12px/1 var(--wp--preset--font-family--body); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.tp-checkout .qcom-checkout-discount button:not(.qcom-checkout-discount__toggle):hover:not(:disabled) { background: var(--co-ink); color: #fff; }
.tp-checkout .qcom-checkout-order-summary { display: grid; gap: 6px; margin: 0; padding: 4px 0 0; border: 0; }
.tp-checkout :is([class*="separator"], [class*="__divider"]):is(.checkout-page__sidebar *) { display: none; }
.tp-checkout .qcom-checkout-order-summary__row { display: flex; justify-content: space-between; gap: 12px; padding: 0; }
.tp-checkout :is(.qcom-checkout-order-summary__label, .qcom-checkout-order-summary__value) { font: 400 14px/1.4 var(--wp--preset--font-family--body); letter-spacing: 0; text-transform: none; color: #4a5263; }
.tp-checkout .qcom-checkout-order-summary__total { align-items: baseline; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--co-ink); }
.tp-checkout .qcom-checkout-order-summary__total-label { font: 400 14px/1.2 var(--wp--preset--font-family--heading); text-transform: uppercase; color: var(--co-ink); }
.tp-checkout .qcom-checkout-order-summary__total-tax-label { margin-left: 6px; font: 400 11px/1 var(--wp--preset--font-family--mono); text-transform: none; color: var(--co-stone); }
.tp-checkout .qcom-checkout-order-summary__total-value { font: 400 28px/1 var(--wp--preset--font-family--heading); white-space: nowrap; color: var(--co-ink); }


/* --- States: skeletons → our loader mark; errors — red line on the left; empty cart --- */
.tp-checkout :is(.qcom-checkout-summary-skeleton, .qcom-checkout-payment__loading, .checkout-page__auth-loading) { position: relative; min-height: 200px; border: 0; background: none; }
.tp-checkout :is(.qcom-checkout-summary-skeleton, .qcom-checkout-payment__loading, .checkout-page__auth-loading) > * { visibility: hidden; }
.tp-checkout :is(.qcom-checkout-summary-skeleton, .qcom-checkout-payment__loading, .checkout-page__auth-loading)::before { content: ""; position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; background: var(--wp--preset--color--accent); -webkit-mask: var(--tp-mark-loader) center / contain no-repeat; mask: var(--tp-mark-loader) center / contain no-repeat; }
.tp-checkout .qcom-checkout-summary-skeleton ~ .qcom-checkout-summary-skeleton { display: none; }
.tp-checkout :is(.qcom-checkout-shipping__warning, .qcom-checkout-pre-payment__error) { display: flex; gap: 10px; margin: 12px 0; padding: 12px 14px; border: 0; border-left: 2px solid var(--co-err); border-radius: 0; background: #fdf4f3; font: 400 14px/1.45 var(--wp--preset--font-family--body); color: var(--co-ink); }
.tp-checkout :is(.qcom-checkout-shipping__warning-icon, .qcom-checkout-pre-payment__error-icon) { flex: none; color: var(--co-err); }
.tp-checkout .qcom-checkout-sold-out { color: var(--co-err); font: 400 12px/1.3 var(--wp--preset--font-family--mono); }
/* Initial load: while cart contents are unknown, the plugin puts a skeleton in the panel but already shows the steps —
   two columns flash briefly (even for an empty cart). Instead — a single centered loader, no columns. */
.tp-checkout .checkout-page__container:has(.qcom-checkout-summary-skeleton) .checkout-page__main { display: none; }
.tp-checkout .checkout-page__container:has(.qcom-checkout-summary-skeleton) .checkout-page__sidebar { display: block; flex: 1 1 100%; width: 100%; }
.tp-checkout .checkout-page__container:has(.qcom-checkout-summary-skeleton) .checkout-page__sidebar-wrapper { position: static; max-height: none; margin: 0; padding: 72px 0 96px; border: 0; background: none; }

/* Empty cart: hide the summary panel (it holds only the plugin's empty div), message centered on the page */
.tp-checkout .checkout-page__container:has(.checkout-page__empty-cart) .checkout-page__sidebar { display: none; }
.tp-checkout .checkout-page__container:has(.checkout-page__empty-cart) .checkout-page__main { flex: 1 1 100%; }
.tp-checkout .qcom-checkout-empty-cart { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; min-height: 0; max-width: 520px; margin: 0 auto; padding: 72px 0 96px; text-align: center; }
.tp-checkout .qcom-checkout-empty-cart__icon-wrapper { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 24px; border: 1px solid var(--co-line); border-radius: 0; background: var(--co-mist); }
.tp-checkout .qcom-checkout-empty-cart__icon { width: 26px; height: 26px; color: var(--co-ink); }
.tp-checkout .qcom-checkout-empty-cart__title { margin: 0 0 10px; font: 400 24px/1.15 var(--wp--preset--font-family--heading); letter-spacing: 0; text-transform: uppercase; color: var(--co-ink); }
.tp-checkout .qcom-checkout-empty-cart__text { margin: 0 0 28px; font: 400 15px/1.5 var(--wp--preset--font-family--body); color: var(--co-stone); }
.tp-checkout .qcom-checkout-empty-cart__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin: 0; padding: 0 28px; border: 1px solid var(--co-ink); border-radius: 0; background: #fff; color: var(--co-ink); font: 400 13px/1 var(--wp--preset--font-family--heading); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.tp-checkout .qcom-checkout-empty-cart__button::after { content: "→"; }
.tp-checkout .qcom-checkout-empty-cart__button:hover { background: var(--co-ink); color: #fff; }
.tp-checkout :is(.checkout-page__submit-spinner, .qcom-checkout-pre-payment__spinner) { border-color: rgb(255 255 255 / 0.35); border-top-color: #fff; }
.tp-checkout .qcom-checkout-pre-payment__loading-text { font: 400 12px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--co-stone); }

/* --- Phone / tablet (<1024px): single column, summary row, fixed bottom bar --- */
@media (max-width: 1023px) {
	.tp-checkout .checkout-page__main-content { padding: 0 16px 32px; }
	.tp-checkout .checkout-page__mobile-summary { margin: 0 -16px 8px; border: 0; border-bottom: 1px solid var(--co-line); border-radius: 0; background: var(--co-mist); }
	.tp-checkout .checkout-page__mobile-toggle { min-height: 52px; padding: 12px 16px; }
	.tp-checkout .checkout-page__mobile-toggle-icon { display: none; }
	.tp-checkout .checkout-page__mobile-toggle-text { font: 600 14px/1 var(--wp--preset--font-family--body); color: var(--co-ink); }
	.tp-checkout .checkout-page__mobile-toggle-chevron { color: var(--co-stone); }
	.tp-checkout .checkout-page__mobile-toggle .qcom-price-block__primary { font: 400 17px/1 var(--wp--preset--font-family--heading); color: var(--co-ink); }
	.tp-checkout .checkout-page__mobile-details { padding: 0 16px 16px; }
}
.tp-co-bar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #e4e7ed; background: #fff; box-shadow: 0 -10px 24px rgb(20 28 44 / 0.08); transform: translateY(110%); visibility: hidden; transition: transform 0.2s ease, visibility 0.2s; }
body.tp-co-bar-on .tp-co-bar { transform: none; visibility: visible; }
.tp-co-bar__total { display: grid; gap: 2px; flex: none; }
.tp-co-bar__total small { font: 400 10px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.1em; color: #646d7d; }
.tp-co-bar__total b { font: 400 17px/1 var(--wp--preset--font-family--heading); color: var(--wp--preset--color--ink); }
.tp-co-bar__btn { flex: 1; min-height: 48px; padding: 0 16px; border: 0; border-radius: 0; background: var(--wp--preset--color--ink); color: #fff; font: 400 13px/1.1 var(--wp--preset--font-family--heading); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.tp-co-bar__btn:disabled { opacity: 0.45; }
@media (min-width: 1024px) { .tp-co-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .tp-co-bar { transition: none; } }

/* --- Final review: accessibility, mobile touch targets, plugin widgets --- */
/* Visible keyboard focus (the global outline is ink, invisible on ink buttons) */
.tp-checkout :is(button, a, [role="radio"], [role="checkbox"]):focus-visible,
.tp-co-bar__btn:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 2px; }
/* Card outline — only when the radio itself is keyboard-focused (not the pickup point select inside);
   the radio then draws no outline of its own — one frame instead of two. */
.tp-checkout :is(.qcom-checkout-shipping__option, .qcom-checkout-payment__option):has([role="radio"]:focus-visible) { outline: 2px solid var(--co-ink); outline-offset: 2px; }
.tp-checkout :is(.qcom-checkout-shipping__option, .qcom-checkout-payment__option) [role="radio"]:focus-visible { outline: none; }
/* Select field (pickup point etc.): focus — ink border, no extra outer outline */
.tp-checkout .qcom-select__trigger:is(:focus, :focus-visible, [data-state="open"]) { outline: none; border-color: var(--co-ink); box-shadow: none; } /* 1px, like the card border */
/* Mobile bar: padding on body + a focused field doesn't hide under the bar */
body.tp-co-bar-on { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
html:has(body.tp-co-bar-on) { scroll-padding-bottom: 96px; }
/* Phone / tablet: touch targets ≥44px in the summary */
@media (max-width: 1023px) {
	.tp-checkout .qcom-checkout-cart-item__price .qcom-checkout-cart-item__quantity { height: 44px; }
	.tp-checkout .qcom-checkout-cart-qty__btn { width: 40px; height: 42px; font-size: 16px !important; }
	.tp-checkout .qcom-checkout-cart-qty__value { width: 32px; height: 42px; font-size: 14px !important; line-height: 42px; }
	.tp-checkout .qcom-checkout-cart-item__price .qcom-checkout-cart-item__delete { width: 44px; height: 44px; }
	.tp-checkout .qcom-checkout-cart-item__children-toggle { min-height: 44px; }
}
/* Plugin widgets (previously styled by an old block in style.css) — in the theme language.
   Some render via portals into body, hence no .tp-checkout prefix (the file is loaded only on checkout). */
.tp-checkout .qcom-checkbox { flex: none; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 0; background: none; color: #fff; }
.tp-checkout .qcom-checkbox::before { border-radius: 0; }
.tp-checkout .qcom-checkbox[data-state="unchecked"]::before { background: #fff; box-shadow: inset 0 0 0 1px var(--co-input-line); }
.tp-checkout .qcom-checkbox[data-state="checked"]::before { background: var(--co-ink); box-shadow: none; }
.tp-checkout .qcom-checkbox[data-state="checked"] { background: var(--co-ink); }
.tp-checkout .qcom-checkbox svg { width: 12px; height: 12px; }
.tp-checkout :is(.qcom-alert, .qcom-button, .qcom-checkout-address-selector__trigger, .qcom-wp-button .wp-block-button__link) { border-radius: 0; }
.tp-checkout .qcom-alert { font: 400 14px/1.45 var(--wp--preset--font-family--body); }
.tp-checkout .qcom-button { font-family: var(--wp--preset--font-family--body); font-weight: 600; }
.tp-checkout .qcom-password-input__toggle { border: 0; background: none; color: var(--co-stone); }
:is(.qcom-select__content, .iti__dropdown-content, .qcom-checkout-address-selector__popover, .qcom-checkout-delivery-date__popover) { border: 1px solid #c3cad6; border-radius: 0 !important; background: #fff; box-shadow: 0 12px 28px rgb(20 28 44 / 0.12); }
/* Dropdown (portal in body): width = field width, long names truncated with "…"; items without focus ring,
   highlighted one has a light background. Search field on top — theme.js section 30. */
.qcom-select__content--popper { width: var(--radix-select-trigger-width); max-width: calc(100vw - 32px); }
.qcom-select__viewport { padding: 4px 0; }
.qcom-select__item { min-height: 32px; padding: 7px 12px 7px 34px; border: 0; border-radius: 0; outline: none; overflow: hidden; font: 400 14px/1.35 var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); }
.qcom-select__item > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.qcom-select__item:is(:focus, :focus-visible, [data-highlighted]) { outline: none; box-shadow: none; background: #f4f6f9; color: var(--wp--preset--color--ink); }
.qcom-select__item[data-state="checked"] { font-weight: 600; }
.qcom-select__item.tp-hidden { display: none; }
.tp-select-search { padding: 8px; border-bottom: 1px solid #e4e7ed; background: #fff; }
.tp-select-search input { width: 100%; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #e4e7ed; border-radius: 0; background: #f4f6f9; font: 400 14px/1 var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); }
.tp-select-search input:focus { outline: none; border-color: var(--wp--preset--color--ink); background: #fff; }
.tp-select-search__empty { padding: 12px; font-size: 14px; color: #646d7d; }
/* Pickup point in the list: name (semibold), address below (smaller, grey); no truncation */
.qcom-select__item > span:last-child:has(.qcom-checkout-pickup__item-name) { white-space: normal; text-overflow: clip; }
.qcom-checkout-pickup__item-name { display: block; font-weight: 600; white-space: normal; color: var(--wp--preset--color--ink); }
.qcom-checkout-pickup__item-address { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.35; white-space: normal; color: #646d7d; }
/* In the field (selected point) — name only, on one line; address only in the list */
.tp-checkout .qcom-select__trigger .qcom-checkout-pickup__item-address { display: none; }
.tp-checkout .qcom-select__trigger .qcom-checkout-pickup__item-name { display: inline; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tp-checkout .qcom-select__trigger:has(.qcom-checkout-pickup__item-name) > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.iti__search-input { height: 40px; border: 0; border-bottom: 1px solid #e4e7ed; border-radius: 0; font: 400 14px/1 var(--wp--preset--font-family--body); }