/**
* STM Smart Checkout — checkout surface styles.
*
* Everything is scoped to body.stmc-checkout (set by the focus module) and
* reads only --stmc-* tokens. No !important anywhere: shop owners override
* from their child theme, theme conflicts get adapter stylesheets instead
* of inline force (the documented failure mode of the predecessor system).
*/
/* ---------- 1. Ground ---------- */
body.stmc-checkout,
body.stmc-checkout #page {
background: var(--stmc-bg);
}
/* Theme content-area spacing creates a dead band under the progress steps
(measured: The7's .wf-wrap carried 60px padding-top; remaining margins sat
on the container chain). The band + steps bring their own rhythm. */
body.stmc-checkout #main,
body.stmc-checkout #content,
body.stmc-checkout .wf-wrap,
body.stmc-checkout #main .wf-wrap, /* The7 sets this via an id-selector; match its specificity. */
body.stmc-checkout .wf-container-main {
padding-top: 0;
margin-top: 0;
}
body.stmc-checkout #content .woocommerce {
margin-top: 0;
padding-top: 0;
}
/* Distraction-free CSS fallback for themes without a server-side adapter:
the big page-title banner ("CHECKOUT" hero on Basel/Woodmart-style themes)
and the breadcrumb repeat what our band and progress already say. Scoped
to the focus module's body class; the screen-reader H1 keeps the page
named. Deliberately narrow — headers/menus of unknown themes are adapter
work, not blind CSS. */
body.stmc-focus.stmc-checkout .page-title,
body.stmc-focus.stmc-checkout .woocommerce-breadcrumb {
display: none;
}
/* Fullpage template (themes without a server-side adapter): its own quiet
stage and the legal line that keeps imprint & privacy reachable. */
body.stmc-fullpage {
background: var(--stmc-bg);
}
.stmc-fullpage__main {
max-width: 1180px;
margin: 0 auto;
padding: 8px 20px 40px;
}
.stmc-fullpage__footer {
margin-top: 40px;
padding: 22px 20px 30px;
background: var(--stmc-card);
border-top: 1px solid var(--stmc-line);
}
.stmc-legal-line {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 22px;
}
.stmc-legal-line a {
color: var(--stmc-muted);
font-size: var(--stmc-fs-s);
text-decoration: none;
}
.stmc-legal-line a:hover {
color: var(--stmc-ink);
text-decoration: underline;
}
/* ---------- 2. Header band ---------- */
body.stmc-checkout .stmc-band {
background: var(--stmc-card);
border-bottom: 1px solid var(--stmc-line);
}
/* One line, not three. The band is a header: logo left, the trust signals in
the space between, the login pill right. Stacked it cost 116px of a checkout
before the customer reached the first field — attention spent on chrome. The
trust row grows into whatever space is left and centers itself in it, so the
band still looks composed when a shop has a wide logo, no logo at all, or
the login button switched off. It wraps rather than squeezing: below the
phone breakpoint the stack comes back deliberately (section 14). */
body.stmc-checkout .stmc-band__in {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 24px;
max-width: 1180px;
margin: 0 auto;
padding: 12px 24px;
text-align: left;
}
body.stmc-checkout .stmc-band__logo {
display: block;
flex: 0 0 auto;
width: auto;
height: 34px;
margin: 0;
}
body.stmc-checkout .stmc-band__sitename {
display: block;
font-size: 22px;
font-weight: 700;
color: var(--stmc-ink);
}
body.stmc-checkout .stmc-band__trust {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px 24px;
margin: 0;
font-size: var(--stmc-fs-s);
line-height: 1.4;
color: var(--stmc-muted);
}
body.stmc-checkout .stmc-band__trust span {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
body.stmc-checkout .stmc-band__trust svg {
flex: 0 0 auto;
width: 15px;
height: 15px;
color: var(--stmc-accent);
opacity: 0.9;
}
/* Login pill: a member of the row now, not something floating over it. */
body.stmc-checkout .stmc-login-toggle {
flex: 0 0 auto;
margin: 0;
padding: 8px 14px;
background: var(--stmc-card);
border: 1px solid var(--stmc-line);
border-radius: 999px;
color: var(--stmc-muted);
font-size: var(--stmc-fs-s);
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
body.stmc-checkout .stmc-login-toggle strong {
font-weight: 700;
color: var(--stmc-accent);
}
body.stmc-checkout .stmc-login-toggle:hover,
body.stmc-checkout .stmc-login-toggle:focus-visible {
border-color: var(--stmc-accent);
color: var(--stmc-accent);
background: var(--stmc-card);
}
body.stmc-checkout .stmc-login-toggle:focus-visible {
outline: none;
box-shadow: var(--stmc-focus-ring);
}
/* ---------- 3. Progress steps ---------- */
body.stmc-checkout .stmc-steps {
max-width: 1180px;
margin: 20px auto 18px;
padding: 0 24px;
}
body.stmc-checkout .stmc-steps ol {
display: flex;
align-items: flex-start;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
}
body.stmc-checkout .stmc-steps li {
position: relative;
flex: 0 1 210px;
margin: 0;
padding: 0;
text-align: center;
font-size: var(--stmc-fs-s);
font-weight: 600;
line-height: 1.3;
color: var(--stmc-muted);
list-style: none;
}
body.stmc-checkout .stmc-steps li::before {
content: "";
position: absolute;
top: 13px;
left: -50%;
width: 100%;
height: 2px;
background: var(--stmc-line);
}
body.stmc-checkout .stmc-steps li:first-child::before {
display: none;
}
body.stmc-checkout .stmc-steps li.is-done::before,
body.stmc-checkout .stmc-steps li.is-current::before {
background: var(--stmc-ink);
}
body.stmc-checkout .stmc-steps__n {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin: 0 auto 7px;
background: var(--stmc-card);
border: 2px solid var(--stmc-line);
border-radius: 50%;
font-size: 13px;
font-weight: 700;
color: var(--stmc-muted);
}
body.stmc-checkout .stmc-steps li.is-done .stmc-steps__n {
background: var(--stmc-ink);
border-color: var(--stmc-ink);
color: #fff;
}
body.stmc-checkout .stmc-steps li.is-current .stmc-steps__n {
background: var(--stmc-accent);
border-color: var(--stmc-accent);
color: #fff;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--stmc-accent) 16%, transparent);
}
body.stmc-checkout .stmc-steps li.is-done {
color: var(--stmc-ink);
}
body.stmc-checkout .stmc-steps li.is-current {
color: var(--stmc-ink);
}
/* ---------- 4. Cards ---------- */
body.stmc-checkout .woocommerce {
color: var(--stmc-text);
}
body.stmc-checkout .woocommerce-billing-fields,
body.stmc-checkout .woocommerce-shipping-fields,
body.stmc-checkout .woocommerce-additional-fields,
body.stmc-checkout form.checkout #order_review,
body.stmc-checkout form.checkout .wc-order-review,
body.stmc-checkout form.woocommerce-form-login,
body.stmc-checkout .woocommerce-cart-form,
body.stmc-checkout .cart_totals {
margin: 0 0 24px;
padding: 22px 24px;
background: var(--stmc-card);
border: 1px solid var(--stmc-line);
border-radius: var(--stmc-radius);
box-shadow: var(--stmc-shadow);
}
/* The7 wraps #order_review in .wc-order-review — avoid a card in a card. */
body.stmc-checkout form.checkout .wc-order-review #order_review {
margin: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* ---------- 5. Numbered section headings (plugin-rendered) ---------- */
/* Native theme headings step aside — our own .stmc-section-title keeps the
numbering consistent across themes (The7 ships none, vanilla Woo plain h3s).
The :not() matters: our own titles render as direct children of the same
wrappers, so a bare "> h3" would hide them too (it did — 28.08.2026).
#order_review_heading is handled in the payment section: Germanized's JS
moves it and re-shows it inline, which a plain rule cannot counter.
The shipping block is DELIBERATELY not in this list. Its h3 is not a
heading: WooCommerce puts the "ship to a different address?" checkbox
INSIDE it (checkout/form-shipping.php). Hiding it removed the only control
that opens the shipping address and left an empty card — reported from a
live shop, 31.08.2026. We render no title of our own for that section
either, so there was nothing to take its place. It is styled as the control
row it is, further down. */
body.stmc-checkout form.checkout .woocommerce-billing-fields > h3:not(.stmc-section-title),
body.stmc-checkout form.checkout .woocommerce-additional-fields > h3:not(.stmc-section-title) {
display: none;
}
/* "Lieferung an eine andere Adresse?" — a switch wearing an h3, so the
heading typography has to come off before it reads as one. 44px of tap
target because it is the one control on this card. */
body.stmc-checkout form.checkout .woocommerce-shipping-fields > h3#ship-to-different-address {
margin: 0;
padding: 0;
font-family: inherit;
font-size: var(--stmc-fs-s);
font-weight: 600;
line-height: 1.5;
letter-spacing: 0;
color: var(--stmc-text);
text-transform: none;
}
/* The label carries the text, so the theme's label rules land here, not on
the h3: Basel sets 22px and uppercase on .woocommerce-form__label, which
made this one line shout at 66px while the rest of the checkout spoke
normally (measured on the live shop, 31.08.2026). Inheriting from the h3 is
what "the theme keeps its typography, we keep the checkout coherent" means
in practice — stated on the label AND the span, because the span inherits
from whichever of the two a theme happened to target. */
body.stmc-checkout form.checkout #ship-to-different-address label,
body.stmc-checkout form.checkout #ship-to-different-address label span {
font-size: inherit;
font-weight: inherit;
text-transform: none;
letter-spacing: inherit;
color: inherit;
}
body.stmc-checkout form.checkout #ship-to-different-address label {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
margin: 0;
cursor: pointer;
}
body.stmc-checkout form.checkout #ship-to-different-address input[type="checkbox"] {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 0;
cursor: pointer;
}
/* Once ticked, the address block below needs the same breathing room the
billing fields have — without it the two run into each other. */
body.stmc-checkout form.checkout .woocommerce-shipping-fields .shipping_address {
margin-top: 14px;
}
body.stmc-checkout form.checkout {
counter-reset: stmc-step;
}
/*
* Section titles run in the body font, not the theme's display face. A
* checkout is one dense functional surface — mixing a headline family into
* it makes three columns read as three unrelated widgets. Themes size bare
* h3 elements freely (some with !important), which is why family, size and
* line-height are all stated here rather than left to inherit.
*/
body.stmc-checkout .stmc-section-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 20px;
padding: 0 0 14px;
border-bottom: 2px solid var(--stmc-accent);
font-family: inherit;
font-size: var(--stmc-fs-xl);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--stmc-title);
}
body.stmc-checkout .stmc-section-title::before,
body.stmc-checkout form.checkout .wc-order-review .stmc-section-title::before,
body.stmc-checkout form.checkout #order_review .stmc-section-title::before {
counter-increment: stmc-step;
content: counter(stmc-step);
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--stmc-title);
color: #fff;
font-size: 12px;
font-weight: 700;
}
/* Three-column layout: FIXED numbers per FORM step, matching the live shop.
The numbers follow the order the customer acts in — 1 billing details,
2 additional information, 3 payment — while "Your order" stays unnumbered
(it is the constant companion, not a step). The CSS counter cannot express
this: it follows DOM order, and WooCommerce renders the order column's
markup before the payment column. (The #order_review selector mirrors the
specificity of the shared rule above.) */
body.stmc-checkout.stmc-layout-three-column .woocommerce-billing-fields .stmc-section-title::before {
content: "1";
counter-increment: none;
}
body.stmc-checkout.stmc-layout-three-column .woocommerce-additional-fields .stmc-section-title::before {
content: "2";
counter-increment: none;
}
body.stmc-checkout.stmc-layout-three-column form.checkout #order_review .stmc-payment-col .stmc-section-title::before {
content: "3";
counter-increment: none;
}
/* The disclosure carries no number, so the payment column closes the gap and
becomes step 2 — same renumbering the shipping-free case does below, for
the same reason: a visible "1 … 3" makes customers hunt for a step that
does not exist. */
body.stmc-checkout.stmc-layout-three-column form.checkout:has(.stmc-notes-toggle) #order_review .stmc-payment-col .stmc-section-title::before {
content: "2";
}
/* The payment column's head runs one size below the step heads — the live
shop renders it at 1rem against the 1.15rem billing head. */
body.stmc-checkout.stmc-layout-three-column .stmc-payment-col .stmc-section-title {
font-size: var(--stmc-fs-m);
}
/* When the order-notes section moves into the payment column (shipping-free
carts, see the layout module), the story renumbers itself: payment becomes
step 2 and the notes read as a quiet sub-block of that column — no number,
no card chrome (the wide card already carries the surface), just a soft
separator against the methods above. */
body.stmc-checkout.stmc-layout-three-column form.checkout #order_review .stmc-payment-col:has(.woocommerce-additional-fields) .stmc-section-title::before {
content: "2";
}
body.stmc-checkout.stmc-layout-three-column .stmc-payment-col .woocommerce-additional-fields {
margin: 18px 0 0;
padding: 14px 0 0;
background: transparent;
border: 0;
border-top: 1px solid var(--stmc-line-soft);
border-radius: 0;
box-shadow: none;
}
/* With order notes switched off the shell arrives empty — no separator then. */
body.stmc-checkout.stmc-layout-three-column .stmc-payment-col .woocommerce-additional-fields:not(:has(.form-row, .stmc-section-title)) {
margin: 0;
padding: 0;
border-top: 0;
}
body.stmc-checkout.stmc-layout-three-column .stmc-payment-col .woocommerce-additional-fields .stmc-section-title {
margin: 0 0 12px;
padding: 0 0 8px;
border-bottom: 0;
font-size: var(--stmc-fs-m);
}
/* The ID mirrors the numbering rules above — without it the ":has step 2"
rule (which carries #order_review) would win and number this head too. */
body.stmc-checkout.stmc-layout-three-column form.checkout #order_review .stmc-payment-col .woocommerce-additional-fields .stmc-section-title::before {
content: none;
counter-increment: none;
}
/* ---------- 5b. Field pairs & descriptions ---------- */
/* Two-lane field raster: everything full width by default, name pair and
postcode/city side by side. Neutralizes theme percentage widths on rows. */
body.stmc-checkout .woocommerce-billing-fields__field-wrapper,
body.stmc-checkout .woocommerce-shipping-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 14px;
}
body.stmc-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.stmc-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
grid-column: 1 / -1;
width: auto;
max-width: none;
float: none;
/* Woo/theme float-era offsets (.form-row-last carries margin-top: 6px,
measured live) tilt a grid pair — first/last name sat 6px apart. One
uniform rhythm for every row. */
margin-top: 0;
margin-bottom: 10px;
}
body.stmc-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
body.stmc-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
body.stmc-checkout .woocommerce-billing-fields__field-wrapper > #billing_postcode_field,
body.stmc-checkout .woocommerce-shipping-fields__field-wrapper > #shipping_postcode_field {
grid-column: 1;
}
body.stmc-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
body.stmc-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last,
body.stmc-checkout .woocommerce-billing-fields__field-wrapper > #billing_city_field,
body.stmc-checkout .woocommerce-shipping-fields__field-wrapper > #shipping_city_field {
grid-column: 2;
}
/* ---------- 5c. Account block & the info tooltip ---------- */
/* Quiet shell around "Create an account?" — and the positioning context the
info button and its tooltip anchor to. */
body.stmc-checkout .woocommerce-account-fields {
position: relative;
margin: 4px 0 16px;
padding: 15px 44px 15px 18px;
background: var(--stmc-card);
border: 1px solid var(--stmc-line-soft);
border-radius: var(--stmc-radius);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
body.stmc-checkout .woocommerce-account-fields .create-account p:last-child {
margin-bottom: 0;
}
/* "Create an account?" is an option the customer acts on, not fine print —
it sits at content size like the field and method labels, unlike the
consent boxes further down (those are legal text and stay quiet).
The row is a flex line so the switch sits beside the words, not inline
with them. */
body.stmc-checkout .woocommerce-account-fields label,
body.stmc-checkout .woocommerce-account-fields label span {
font-size: var(--stmc-fs-base);
font-weight: 600;
color: var(--stmc-ink);
}
body.stmc-checkout .woocommerce-account-fields .form-row label {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
cursor: pointer;
}
/* Info button: reusable component (account hint today, Pro modules later). */
body.stmc-checkout .stmc-info {
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
background: var(--stmc-card);
border: 1.5px solid var(--stmc-line);
border-radius: 50%;
color: var(--stmc-muted);
font-family: inherit;
font-size: var(--stmc-fs-s);
font-weight: 700;
line-height: 1;
cursor: help;
}
body.stmc-checkout .stmc-info:hover,
body.stmc-checkout .stmc-info:focus {
border-color: var(--stmc-ink);
color: var(--stmc-ink);
outline: none;
}
body.stmc-checkout .stmc-info.is-open {
background: var(--stmc-ink);
border-color: var(--stmc-ink);
color: #fff;
}
/* The bubble spans the whole shell above the button, so no card edge can
clip it — the trap the predecessor ran into with an anchored tooltip. */
body.stmc-checkout .stmc-info__pop {
position: absolute;
left: 10px;
right: 10px;
bottom: calc(100% + 9px);
z-index: 40;
padding: 12px 15px;
background: var(--stmc-ink);
border-radius: var(--stmc-radius-s);
box-shadow: 0 14px 30px -12px rgba(10, 18, 45, 0.55);
color: #fff;
font-size: var(--stmc-fs-xs);
font-weight: 400;
line-height: 1.55;
text-align: left;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease;
pointer-events: none;
}
body.stmc-checkout .stmc-info__pop strong {
color: var(--stmc-accent);
font-weight: 700;
}
body.stmc-checkout .stmc-info__pop::after {
content: "";
position: absolute;
top: 100%;
right: 14px;
border: 7px solid transparent;
border-top-color: var(--stmc-ink);
}
body.stmc-checkout .stmc-info:hover + .stmc-info__pop,
body.stmc-checkout .stmc-info:focus + .stmc-info__pop,
body.stmc-checkout .stmc-info.is-open + .stmc-info__pop {
opacity: 1;
visibility: visible;
}
/* Field descriptions (e.g. the VAT reverse-charge note) stay quiet — and
visible: themes hide span.description until JS decides otherwise. */
body.stmc-checkout .woocommerce form .form-row .description,
body.stmc-checkout .woocommerce form .form-row span.description,
body.stmc-checkout .woocommerce form .form-row + p,
body.stmc-checkout .woocommerce form .form-row small {
display: block;
margin: 6px 2px 0;
font-size: var(--stmc-fs-xs);
font-weight: 400;
line-height: 1.5;
color: var(--stmc-muted);
letter-spacing: 0;
}
/* Empty section shells (e.g. shipping fields on digital-only carts) get no
card chrome — an empty white box reads as a bug. */
body.stmc-checkout .woocommerce-shipping-fields:not(:has(.form-row, h3, .shipping_address)),
body.stmc-checkout .woocommerce-additional-fields:not(:has(.form-row, h3)) {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
margin: 0;
}
/* ---------- 6. Form fields ---------- */
body.stmc-checkout .woocommerce form .form-row input.input-text,
body.stmc-checkout .woocommerce form .form-row textarea,
body.stmc-checkout .woocommerce form .form-row select,
body.stmc-checkout .select2-container .select2-selection--single {
height: 46px;
padding: 0 14px;
border: 1px solid var(--stmc-line);
border-radius: calc(var(--stmc-radius) - 2px);
background: var(--stmc-card);
font-size: var(--stmc-fs-base);
color: var(--stmc-text);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Select2 renders the chosen value in its own inner span, which does not
inherit the container's size — the country field read a size larger than
every other field next to it. The long selector is deliberate: themes
style this span with the `font` SHORTHAND (The7 uses a --the7-form-md-font
variable), which carries a size and therefore beats a short selector — and
which a search for `font-size` declarations will not turn up. */
body.stmc-checkout .woocommerce form .form-row .select2-container .select2-selection__rendered,
body.stmc-checkout .select2-container .select2-selection__rendered {
font-size: var(--stmc-fs-base);
color: var(--stmc-text);
line-height: 44px;
}
/*
* iOS Safari zooms the whole page in whenever a focused field's text is
* below 16px — on a checkout that means the layout jumps on every single tap
* and the customer has to pinch back out. 16px is the documented threshold,
* so field text (and only field text) steps up on touch-sized screens.
*/
@media (max-width: 767px) {
body.stmc-checkout .woocommerce form .form-row input.input-text,
body.stmc-checkout .woocommerce form .form-row textarea,
body.stmc-checkout .woocommerce form .form-row select,
body.stmc-checkout .select2-container .select2-selection--single {
/* max(): the ultra-compact layout scales fs-m below 16px — the iOS
zoom threshold must hold in every layout. */
font-size: max(1rem, var(--stmc-fs-m));
}
}
body.stmc-checkout .woocommerce form .form-row textarea {
height: auto;
padding: 12px 14px;
line-height: 1.6;
}
body.stmc-checkout .woocommerce form .form-row input.input-text:focus,
body.stmc-checkout .woocommerce form .form-row textarea:focus,
body.stmc-checkout .woocommerce form .form-row select:focus {
border-color: var(--stmc-ink);
box-shadow: var(--stmc-focus-ring);
outline: none;
}
/* Field labels speak in the label blue at content size — measured on the
live shop (14.7px/600 #00178F); the muted 13px draft read as fine print
next to it. The required star inherits so the line stays quiet. */
body.stmc-checkout .woocommerce form .form-row label {
margin-bottom: 7px;
font-size: var(--stmc-fs-base);
font-weight: 600;
line-height: 1.35;
color: var(--stmc-label);
letter-spacing: 0;
}
body.stmc-checkout .woocommerce form .form-row label .required,
body.stmc-checkout .woocommerce form .form-row label abbr.required {
color: inherit;
border: 0;
text-decoration: none;
}
body.stmc-checkout .woocommerce form .form-row label .optional {
color: var(--stmc-muted);
font-weight: 400;
}
body.stmc-checkout .woocommerce-input-wrapper,
body.stmc-checkout .select2-container,
body.stmc-checkout .woocommerce form .form-row input.input-text,
body.stmc-checkout .woocommerce form .form-row textarea,
body.stmc-checkout .woocommerce form .form-row select {
max-width: 100%;
}
/* ---------- 7. Two-column checkout grid ---------- */
/* Between 993px and 1199px the three-column layout falls back to this
two-column behavior — hence the paired selectors throughout the block. */
/*
* Theme checkout templates wrap the two layout anchors in their own grid
* markup — Basel puts #customer_details into a Bootstrap .col-sm-6 (50%
* width) and #order_review into a .checkout-order-review sidebar; other
* themes wrap similarly. Our form grid would then place and size the FOREIGN
* wrappers instead of the anchors (measured on hairdoshop.de: 187px billing
* fields inside a 374px track). Every wrapper in the chain around an anchor
* becomes layout-transparent; the anchor selectors throughout this section
* are descendant selectors for the same reason. The :not guards keep our own
* wrappers and identified containers untouched.
*/
body.stmc-checkout form.checkout div:not([class*="stmc-"]):not([id]):not(.wc-order-review):has(#customer_details),
body.stmc-checkout form.checkout div:not([class*="stmc-"]):not([id]):not(.wc-order-review):has(#order_review) {
display: contents;
}
/* Woo core / theme float-era column pairs inside the anchors. */
body.stmc-checkout form.checkout .col2-set .col-1,
body.stmc-checkout form.checkout .col2-set .col-2 {
float: none;
width: 100%;
max-width: 100%;
}
/* width:100% alone does not stack them: themes ship #customer_details as a
FLEX row, and a flex item shrinks below its stated width (measured on
hairdoshop: 261px billing beside a 167px notes column, inside one narrow
address track). The anchor is a plain block here — billing, shipping and
notes read down the column, which is the only sane shape at this width. */
body.stmc-checkout form.checkout #customer_details {
display: block;
}
/* Bootstrap-style .row classes on the anchors carry negative margins. */
body.stmc-checkout form.checkout #customer_details,
body.stmc-checkout form.checkout #order_review {
margin-left: 0;
margin-right: 0;
}
@media (min-width: 993px) {
body.stmc-checkout.stmc-layout-three-column form.checkout,
body.stmc-checkout.stmc-layout-two-column form.checkout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
gap: 0 28px;
align-items: start;
}
body.stmc-checkout.stmc-layout-three-column form.checkout #customer_details,
body.stmc-checkout.stmc-layout-two-column form.checkout #customer_details {
grid-column: 1;
}
body.stmc-checkout.stmc-layout-three-column form.checkout #order_review_heading,
body.stmc-checkout.stmc-layout-three-column form.checkout .stmc-section-title--order,
body.stmc-checkout.stmc-layout-three-column form.checkout #order_review,
body.stmc-checkout.stmc-layout-three-column form.checkout .wc-order-review,
body.stmc-checkout.stmc-layout-two-column form.checkout #order_review_heading,
body.stmc-checkout.stmc-layout-two-column form.checkout .stmc-section-title--order,
body.stmc-checkout.stmc-layout-two-column form.checkout #order_review,
body.stmc-checkout.stmc-layout-two-column form.checkout .wc-order-review {
grid-column: 2;
}
/* Everything else the form may print (notices, express areas, seals)
spans the full width above the columns. */
body.stmc-checkout.stmc-layout-three-column form.checkout > .woocommerce-NoticeGroup,
body.stmc-checkout.stmc-layout-three-column form.checkout > .woocommerce-error,
body.stmc-checkout.stmc-layout-three-column form.checkout > .woocommerce-message,
body.stmc-checkout.stmc-layout-three-column form.checkout > .woocommerce-info,
body.stmc-checkout.stmc-layout-two-column form.checkout > .woocommerce-NoticeGroup,
body.stmc-checkout.stmc-layout-two-column form.checkout > .woocommerce-error,
body.stmc-checkout.stmc-layout-two-column form.checkout > .woocommerce-message,
body.stmc-checkout.stmc-layout-two-column form.checkout > .woocommerce-info {
grid-column: 1 / -1;
}
body.stmc-checkout.stmc-layout-two-column form.checkout .wc-order-review,
body.stmc-checkout.stmc-layout-two-column form.checkout #order_review {
position: sticky;
top: 20px;
}
/*
* Theme trap (documented on The7): the theme assigns PERCENTAGE widths to
* these containers for its own float layout — inside our grid those
* percentages resolve against the track and shrink the columns (measured:
* order review at 126px of a 420px track). Neutralize them.
*/
body.stmc-checkout.stmc-layout-three-column form.checkout #customer_details,
body.stmc-checkout.stmc-layout-three-column form.checkout .wc-order-review,
body.stmc-checkout.stmc-layout-three-column form.checkout #order_review,
body.stmc-checkout.stmc-layout-two-column form.checkout #customer_details,
body.stmc-checkout.stmc-layout-two-column form.checkout .wc-order-review,
body.stmc-checkout.stmc-layout-two-column form.checkout #order_review {
width: auto;
max-width: none;
min-width: 0;
float: none;
}
}
/* One column: a single centered flow. Without these rules the THEME decides —
The7 turns form.checkout into its own two-column flexbox, so "one column"
silently rendered like "two columns" (found in Jan's layout review). A flex
COLUMN (not block) on purpose: the express areas keep their order:-3/-2/-1
sequence and the "OR" divider (::before, order 0) its slot. */
@media (min-width: 993px) {
body.stmc-checkout.stmc-layout-one-column form.checkout {
display: flex;
flex-direction: column;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
body.stmc-checkout.stmc-layout-one-column form.checkout #customer_details,
body.stmc-checkout.stmc-layout-one-column form.checkout .wc-order-review,
body.stmc-checkout.stmc-layout-one-column form.checkout #order_review {
width: auto;
max-width: none;
min-width: 0;
float: none;
}
}
/* ---------- 7b. Three-column layout (≥1160px): billing | payment | order ----------
The predecessor's signature layout, and its exact card architecture: the
billing column is one card, and payment + order share ONE wide card split
by a soft center line (42px of air on both sides of it). The review wrapper
keeps the section-4 card chrome and spans the wide track; the inner columns
are transparent. Track ratio 361:751 reproduces the measured live grid
(three equal 305px content columns). */
@media (min-width: 1160px) {
body.stmc-checkout.stmc-layout-three-column form.checkout {
grid-template-columns: minmax(0, 361fr) minmax(0, 751fr);
}
body.stmc-checkout.stmc-layout-three-column form.checkout #order_review,
body.stmc-checkout.stmc-layout-three-column form.checkout .wc-order-review {
grid-column: 2;
position: static;
}
/*
* Rows must be named, not left implicit. The payment column spans both of
* them, so whenever it is the tallest thing in the grid — four gateways,
* DHL tiles and the notes field make that the normal case — the browser
* splits its surplus height evenly over two auto rows. Half of it then
* lands INSIDE row 1, under the totals table, and pushes the buy button
* that far down (measured on hairdoshop: 456px of empty grid between the
* grand total and the button). "auto 1fr" sizes row 1 to the summary and
* hands every surplus pixel to row 2, where it falls harmlessly below the
* button — the order part keeps starting exactly where the summary ends.
*/
body.stmc-checkout.stmc-layout-three-column form.checkout #order_review {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto 1fr;
column-gap: 0;
row-gap: 0;
align-items: start;
}
/* Vanilla themes have no .wc-order-review wrapper — #order_review itself
carries the section-4 card there. With the wrapper, the inner grid
stays transparent (section 4 already handles that case). */
body.stmc-checkout.stmc-layout-three-column .stmc-payment-col {
grid-column: 1;
grid-row: 1 / span 2;
padding: 0 42px 0 0;
border-right: 1px solid var(--stmc-line-soft);
}
body.stmc-checkout.stmc-layout-three-column .stmc-order-part--top {
grid-column: 2;
grid-row: 1;
padding: 0 0 0 42px;
}
body.stmc-checkout.stmc-layout-three-column .stmc-order-part--bottom {
grid-column: 2;
grid-row: 2;
padding: 0 0 0 42px;
}
}
/* Column title without a step number (the order part is the constant) —
16px/700 in body ink, exactly the predecessor's .stm-ck-spaltentitel. */
body.stmc-checkout .stmc-col-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 16px;
padding: 0 0 12px;
border-bottom: 2px solid var(--stmc-accent);
font-family: inherit;
font-size: var(--stmc-fs-m);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--stmc-ink);
}
/* Cart: two columns as well. */
@media (min-width: 993px) {
body.stmc-checkout .woocommerce-cart-wrap,
body.stmc-checkout .woocommerce .cart-and-collaterals {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 28px;
}
body.stmc-checkout .woocommerce-cart-form {
flex: 1 1 560px;
min-width: 0;
}
body.stmc-checkout .cart-collaterals {
flex: 0 1 372px;
min-width: 0;
margin: 0;
padding: 0;
background: transparent;
}
}
/* ---------- 8. Totals ---------- */
body.stmc-checkout .cart_totals table th,
body.stmc-checkout #order_review table th {
padding: 12px 0;
font-size: var(--stmc-fs-base);
font-weight: 500;
color: var(--stmc-muted);
white-space: normal;
}
/* An amount reads as the answer to its label, so it carries the same size
and color — only the weight sets it apart. */
body.stmc-checkout .cart_totals table td,
body.stmc-checkout #order_review table td {
padding: 12px 0;
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-size: var(--stmc-fs-base);
font-weight: 600;
color: var(--stmc-ink);
}
/*
* ONE rule puts the cell back in charge of every price. WooCommerce wraps
* amounts in .woocommerce-Price-amount > bdi, and The7 styles those wrappers
* directly — its own base font size, its heading color, and on the grand
* total even a different family (Cambay instead of Inter). That silently beat
* the cell rules above, which is why a 13px tax label sat next to an 18px
* blue amount and three different blues appeared in one column.
*/
body.stmc-checkout .cart_totals .woocommerce-Price-amount,
body.stmc-checkout .cart_totals .woocommerce-Price-amount bdi,
body.stmc-checkout .cart_totals .woocommerce-Price-currencySymbol,
body.stmc-checkout #order_review .woocommerce-Price-amount,
body.stmc-checkout #order_review .woocommerce-Price-amount bdi,
body.stmc-checkout #order_review .woocommerce-Price-currencySymbol,
body.stmc-checkout #order_review table.shop_table td strong {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
}
body.stmc-checkout .cart_totals .order-total th,
body.stmc-checkout .cart_totals .order-total td,
body.stmc-checkout #order_review .order-total th,
body.stmc-checkout #order_review .order-total td {
padding-top: 16px;
font-size: var(--stmc-fs-l);
font-weight: 700;
color: var(--stmc-ink);
}
/* ---------- 8b. Express payment areas — Lite tidy-up ----------
Gateways render three separate containers as direct form children (PPCP,
WooPayments wallets, generic pay buttons). Until the Pro express zone
groups them properly, stack them full-width above the columns in a fixed
order and hide the providers' own "OR" separators (the WooPayments one is
English-only); a neutral divider line closes the express area instead. */
body.stmc-checkout form.checkout > .wc-ppcp-express-checkout,
body.stmc-checkout form.checkout > .wcpay-express-checkout-wrapper,
body.stmc-checkout form.checkout > .woocommerce-pay-buttons {
grid-column: 1 / -1;
justify-self: center;
width: 100%;
max-width: 720px;
margin: 0 auto 10px;
float: none;
}
body.stmc-checkout form.checkout > .wc-ppcp-express-checkout { order: -3; }
body.stmc-checkout form.checkout > .wcpay-express-checkout-wrapper { order: -2; }
body.stmc-checkout form.checkout > .woocommerce-pay-buttons { order: -1; }
body.stmc-checkout form.checkout .wc-ppcp-express-checkout .express-divider,
body.stmc-checkout form.checkout .wc-ppcp-express-checkout [class*="separator"],
body.stmc-checkout form.checkout .wcpay-express-checkout-wrapper [class*="separator"],
body.stmc-checkout form.checkout .wcpay-express-checkout-wrapper [class*="divider"],
/* WooPayments' "— OR —" is a with an EMPTY class attribute, and its JS
re-shows it with inline display:block (measured). Same documented
!important exception as the Germanized heading: a functional hide against
third-party inline JS, not design styling. */
body.stmc-checkout form.checkout .wcpay-express-checkout-wrapper > :not([class]),
body.stmc-checkout form.checkout .wcpay-express-checkout-wrapper > p {
display: none !important;
}
body.stmc-checkout .wc-ppcp-express-checkout legend,
body.stmc-checkout .wc-ppcp-express-checkout .express-title {
display: block;
width: 100%;
margin: 0 0 14px;
border: 0;
text-align: center;
font-size: var(--stmc-fs-xl);
font-weight: 700;
color: var(--stmc-title);
}
/* "OR" divider between the express area and the form — the word arrives
translated via the --stmc-divider-label token (empty fallback keeps the
flanking lines as a neutral divider).
Keyed on a class the script sets after MEASURING the express containers,
not on their presence: gateways print the container whether or not they
show a button in it (measured on hairdoshop — Klarna's
.woocommerce-pay-buttons sat there at 0x0 with an empty #kec-pay-button,
and a presence-based :has() drew "ODER" above a form that had no express
payment at all). No script, no divider — which is right, because the
express buttons it separates need script to exist in the first place. */
body.stmc-checkout form.checkout.stmc-has-express::before {
content: var(--stmc-divider-label, "");
grid-column: 1 / -1;
order: 0;
display: block;
margin: 10px 0 18px;
color: var(--stmc-muted);
font-size: var(--stmc-fs-s);
font-weight: 500;
letter-spacing: 0.12em;
text-align: center;
background:
linear-gradient(var(--stmc-line), var(--stmc-line)) left center / calc(50% - 40px) 1px no-repeat,
linear-gradient(var(--stmc-line), var(--stmc-line)) right center / calc(50% - 40px) 1px no-repeat;
}
/* ---------- 9. Payment methods ---------- */
body.stmc-checkout #payment {
background: transparent;
width: auto;
max-width: none;
float: none;
}
/* Duplicate theme/plugin headings — our numbered column titles already label
these areas. DOCUMENTED EXCEPTION to the no-!important rule: Germanized's
checkout JS moves #order_review_heading next to the methods and re-shows
both headings with an inline display:block on every update; !important on
a functional hide is the only CSS-level counter (this is not design
styling owners would override). */
body.stmc-checkout #order_payment_heading,
body.stmc-checkout form.checkout #order_review_heading {
display: none !important;
}
body.stmc-checkout #payment ul.payment_methods {
margin: 0 0 14px;
padding: 0;
list-style: none;
border: 0;
}
/*
* The row is a flex container, NOT the browser's inline flow. Reason: the
* label is an inline-flex box, which is atomic — it can never break across
* lines, so as soon as its content (title + gateway brand icons) no longer
* fits beside the radio, the whole label drops to the next line and the
* radio is left stranded above it. That is exactly what happened to the
* credit-card row, whose icon strip left just 8px of slack. As flex items
* the radio and the label stay side by side and the label wraps internally.
*/
body.stmc-checkout #payment ul.payment_methods li {
display: flex;
flex-wrap: wrap;
/* Top-aligned, not centered: when a label wraps to two lines (wide icon
strips) a centered radio floats beside the gap instead of the name.
The 4px offset below centers it against the first line. */
align-items: flex-start;
column-gap: 10px;
margin: 0 0 10px;
padding: 12px 14px;
background: var(--stmc-card);
border: 1px solid var(--stmc-line);
border-radius: calc(var(--stmc-radius) - 2px);
transition: border-color 0.18s ease;
list-style: none;
width: auto;
max-width: none;
overflow: hidden;
}
body.stmc-checkout #payment ul.payment_methods li > input[type="radio"] {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 4px 0 0;
vertical-align: middle;
accent-color: var(--stmc-accent);
}
/* Method row: radio + title left, brand icons right, description below.
"flex: 1 1 0" is load-bearing, not cosmetic: a wrapping flex container
assigns items to lines by their HYPOTHETICAL size (flex-basis: auto =
max-content) BEFORE any shrinking happens, so an auto-basis label still
jumped to line 2. A zero basis always fits beside the radio and then
grows into the remaining width, wrapping its icons internally instead.
inline-flex, not flex, and that one word is the whole fix for two rows:
WooCommerce PayPal Payments sets display:block INLINE on its credit-card
and Google Pay rows (measured on hairdoshop — style="display: block;" on
exactly those two, nothing in any stylesheet). A block row makes a
block-level label start on its own line, stranding the radio above it.
Forcing the row back to flex would take !important and would break the
gateway's own display:none hiding. inline-flex costs nothing where the row
IS flex — flex items are blockified, so it computes back to flex — and it
keeps the label beside the radio where the row is block. */
body.stmc-checkout #payment ul.payment_methods li > label {
display: inline-flex;
flex: 1 1 0;
min-width: 0;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
max-width: 100%;
}
/* The description belongs on its own full-width row below the title. */
body.stmc-checkout #payment ul.payment_methods li > div.payment_box {
flex: 1 0 100%;
}
/* Brand icons follow the type down — at 24px they dominated a 15px name. */
body.stmc-checkout #payment ul.payment_methods li img {
max-height: 20px;
width: auto;
vertical-align: middle;
}
/* Gateways that summarize extra icons in a "+3" badge size it themselves;
pull it onto the scale so it reads as part of the row. */
body.stmc-checkout #payment ul.payment_methods li [class*="logos-count"] {
font-size: var(--stmc-fs-xs);
color: var(--stmc-muted);
}
body.stmc-checkout #payment ul.payment_methods li:has(input:checked) {
border-color: var(--stmc-ink);
box-shadow: 0 0 0 1px var(--stmc-ink);
}
/* Method names sit at content size, not at the body's reading size — they
are one row in a list of choices, and inheriting a theme's 18px article
size made this column shout next to the address and order columns. They
share the field labels' blue voice (measured parity with the live shop). */
body.stmc-checkout #payment ul.payment_methods label {
font-size: var(--stmc-fs-base);
font-weight: 600;
line-height: 1.4;
color: var(--stmc-label);
cursor: pointer;
}
body.stmc-checkout #payment div.payment_box {
background: var(--stmc-bg);
border-radius: calc(var(--stmc-radius) - 4px);
color: var(--stmc-muted);
font-size: var(--stmc-fs-s);
/* Gateway boxes bring intrinsically sized badges/iframes (Klarna) that
pushed past the card edge in narrow columns. */
max-width: 100%;
min-width: 0;
overflow: hidden;
}
body.stmc-checkout #payment div.payment_box iframe,
body.stmc-checkout #payment div.payment_box img {
max-width: 100%;
}
body.stmc-checkout #payment div.payment_box p {
margin: 0 0 6px;
font-size: var(--stmc-fs-s);
line-height: 1.5;
}
body.stmc-checkout #payment div.payment_box p:last-child {
margin-bottom: 0;
}
/* ---------- 10. Place order button ---------- */
body.stmc-checkout #place_order,
body.stmc-checkout .wc-proceed-to-checkout .checkout-button {
width: 100%;
min-height: 54px;
border: 0;
border-radius: var(--stmc-radius-s);
background: var(--stmc-accent);
color: #fff;
font-size: var(--stmc-fs-m);
font-weight: 700;
letter-spacing: 0.01em;
box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--stmc-accent) 80%, transparent);
transition: background-color 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
body.stmc-checkout #place_order:hover,
body.stmc-checkout .wc-proceed-to-checkout .checkout-button:hover {
background: var(--stmc-accent-hover);
color: #fff;
}
body.stmc-checkout #place_order:focus-visible,
body.stmc-checkout .wc-proceed-to-checkout .checkout-button:focus-visible {
outline: none;
box-shadow: var(--stmc-focus-ring);
}
/* ---------- 11. Trust row under the button ---------- */
body.stmc-checkout .stmc-trust-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 7px 14px;
margin-top: 14px;
padding-top: 16px;
border-top: 1px solid var(--stmc-line-soft);
}
body.stmc-checkout .stmc-trust-row__item {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--stmc-fs-xs);
line-height: 1.3;
color: var(--stmc-muted);
white-space: nowrap;
}
body.stmc-checkout .stmc-trust-row__item svg {
width: 13px;
height: 13px;
color: var(--stmc-muted);
opacity: 0.9;
}
/* ---------- 12. Continue shopping ---------- */
body.stmc-checkout .stmc-continue {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 10px;
font-size: var(--stmc-fs-s);
font-weight: 600;
color: var(--stmc-muted);
text-decoration: none;
transition: color 0.2s ease;
}
body.stmc-checkout .stmc-continue:hover {
color: var(--stmc-ink);
}
/* One invitation to log in, not two. WooCommerce prints its own "already a
customer?" notice above the form, and the band already carries that
invitation as a button — measured on hairdoshop: two prompts for the same
action, 160px apart. The button reveals that very same login form (verified
by clicking it), so the notice adds nothing but doubt about which one to
use. Keyed on our toggle actually being present, so switching the band
login off brings WooCommerce's own prompt straight back. */
body.stmc-checkout:has(.stmc-login-toggle) .woocommerce-form-login-toggle {
display: none;
}
/* ---------- 13. Login form (revealed by the band toggle) ---------- */
body.stmc-checkout form.woocommerce-form-login .form-row {
margin-bottom: 14px;
}
/* ---------- 13a. Order column: reading order ----------
In the markup Germanized prints its consent boxes BEFORE the totals table
(they arrive at woocommerce_review_order_after_payment, the table after).
The customer reads the other way around: what am I buying, then what am I
agreeing to, then the button. Flex order restates the column without
touching the DOM — AJAX replaces the table in place and never notices. */
body.stmc-checkout .stmc-order-part--bottom {
display: flex;
flex-direction: column;
}
/* Anything unaccounted for keeps the consent group's slot. */
body.stmc-checkout .stmc-order-part--bottom > * { order: 2; }
body.stmc-checkout .stmc-order-part--bottom > table.shop_table {
order: 1;
margin: 0 0 16px;
}
/* Reading order in the buy zone: consents, then the note that comments on
them, then the button. The note sits with the consent it exists to soften —
the classic case is the digital-goods consent, which sounds like signing
away every right, and the guarantee line right underneath says what still
holds. Above the button, not below it: after the decision nobody reads it.
(Shop owner's call, 30.08.2026 — it briefly lived below the button.) */
body.stmc-checkout .stmc-order-part--bottom > .stmc-guarantee { order: 3; }
body.stmc-checkout .stmc-order-part--bottom > .wc-gzd-order-submit,
body.stmc-checkout .stmc-order-part--bottom > .form-row.place-order { order: 4; }
/* A gateway's own buttons are an ALTERNATIVE to the buy button, never a step
before it: PayPal Payments parks its container next to the place-order row
and, while a different gateway is selected, leaves a 45px empty box there
(measured on hairdoshop, inner container display:none). Below the button it
costs nothing — and when PayPal IS chosen it hides #place_order anyway, so
its button then takes the freed slot directly under the total. */
body.stmc-checkout .stmc-order-part--bottom > .ppc-button-wrapper,
body.stmc-checkout .stmc-order-part--bottom > [class*="ppcp-button"] { order: 5; }
/* ---------- 13a2. Order notes as a disclosure ----------
The trigger carries the state in aria-expanded, so :has() can hide the
fields straight from it — no class to keep in sync, and a screen reader
reads the same truth the CSS acts on. */
body.stmc-checkout .stmc-notes-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 4px;
padding: 0;
background: none;
border: 0;
font-family: inherit;
font-size: var(--stmc-fs-s);
font-weight: 600;
line-height: 1.4;
color: var(--stmc-title);
text-align: left;
cursor: pointer;
}
body.stmc-checkout .stmc-notes-toggle::before {
content: "+";
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 1px solid var(--stmc-line);
border-radius: 50%;
font-size: 13px;
line-height: 1;
color: var(--stmc-muted);
}
body.stmc-checkout .stmc-notes-toggle[aria-expanded="true"]::before {
content: "2";
}
body.stmc-checkout .stmc-notes-toggle:hover,
body.stmc-checkout .stmc-notes-toggle:focus-visible {
color: var(--stmc-accent);
}
body.stmc-checkout .woocommerce-additional-fields:has(> .stmc-notes-toggle[aria-expanded="false"]) .woocommerce-additional-fields__field-wrapper {
display: none;
}
/* Closed, the section is a line — not a card holding a line. */
body.stmc-checkout .woocommerce-additional-fields:has(> .stmc-notes-toggle[aria-expanded="false"]) {
margin: 14px 0 0;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
/* Delivery time under the product name — a legal duty, so it is readable,
and quiet, so it never competes with the product it describes.
UNDER, and that takes three declarations rather than one. Legal plugins wrap
the item name in a container of their own, and on STM that wrapper turns out
to be a nowrap flex row (from a stylesheet no scan can read — the
adoptedStyleSheets trap). A block-level span in a nowrap flex row is not a
block, it is a squeezed column: measured 18px wide and 122px tall, one
letter per line. So the line claims a full row of its own (flex-basis 100%),
the wrapper is allowed to wrap in the first place, and order:99 sends it
behind the quantity stepper instead of pushing that onto a third line. All
three are inert wherever the cell is a plain block, which is the common
case. */
body.stmc-checkout .stmc-delivery-time {
display: block;
flex: 1 0 100%;
order: 99;
margin: 2px 0 0;
font-size: var(--stmc-fs-xs);
line-height: 1.45;
color: var(--stmc-muted);
}
body.stmc-checkout #order_review td.product-name *:has(> .stmc-delivery-time),
body.stmc-checkout .shop_table.cart td.product-name *:has(> .stmc-delivery-time) {
flex-wrap: wrap;
}
/* ---------- 13b. Legal checkboxes (Germanized + Woo terms) ---------- */
/* Only shells that actually hold a checkbox/text get card chrome — Germanized
prints empty placeholders for unused checkbox types. Each consent is its
own white card with a modern switch, exactly the live shop's pattern. */
body.stmc-checkout .wc-gzd-checkbox-placeholder:has(input, .wc-gzd-legal-checkbox-text),
body.stmc-checkout .woocommerce-terms-and-conditions-wrapper .form-row:has(input) {
position: relative;
margin: 0 0 12px;
padding: 15px 16px;
background: var(--stmc-card);
border: 1px solid var(--stmc-line-soft);
border-radius: var(--stmc-radius);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
font-size: var(--stmc-fs-s);
line-height: 1.55;
color: var(--stmc-muted);
}
body.stmc-checkout .wc-gzd-checkbox-placeholder:not(:has(input, .wc-gzd-legal-checkbox-text)) {
margin: 0;
padding: 0;
}
/* A rejected order marks the row invalid — the card shows it, quietly. */
body.stmc-checkout .wc-gzd-checkbox-placeholder:has(.woocommerce-invalid),
body.stmc-checkout .woocommerce-terms-and-conditions-wrapper .form-row:has(.woocommerce-invalid) {
border-color: var(--stmc-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--stmc-danger) 8%, transparent);
}
/* Germanized wraps the label in an extra p.form-row — no chrome of its own. */
body.stmc-checkout .wc-gzd-checkbox-placeholder p.form-row {
margin: 0;
padding: 0;
}
/*
* Consent row: switch left, text beside it. The html prefix and the
* #order_review variant are pure specificity: WooCommerce core ships
* ".woocommerce form .form-row label.checkbox { display: inline }" plus
* "label { line-height: 2 }", and The7 adds "#order_review
* .wc-gzd-checkbox-placeholder p.form-row label { display: inline }" — an
* inline label cannot hold a flex line together.
*/
html body.stmc-checkout #order_review .wc-gzd-checkbox-placeholder p.form-row label,
html body.stmc-checkout .wc-gzd-checkbox-placeholder label,
html body.stmc-checkout .wc-gzd-checkbox-placeholder label.checkbox,
html body.stmc-checkout .woocommerce-terms-and-conditions-wrapper label,
html body.stmc-checkout .woocommerce-terms-and-conditions-wrapper label.checkbox {
display: flex;
align-items: flex-start;
gap: 12px;
position: relative;
margin: 0;
padding: 0 12px 0 0;
font-size: var(--stmc-fs-s);
font-weight: 400;
line-height: 1.55;
color: var(--stmc-muted);
cursor: pointer;
}
body.stmc-checkout .wc-gzd-checkbox-placeholder .woocommerce-gzd-legal-checkbox-text,
body.stmc-checkout .wc-gzd-checkbox-placeholder label > span,
body.stmc-checkout .woocommerce-terms-and-conditions-wrapper label > span {
flex: 1 1 auto;
min-width: 0;
}
/*
* The checkbox itself becomes a switch — appearance:none plus a sliding
* ::before knob, no extra markup, WooCommerce/Germanized logic untouched
* (the proven pattern from the live shop). Shared by the consent boxes and
* "Create an account?".
*/
html body.stmc-checkout .wc-gzd-checkbox-placeholder input[type="checkbox"],
html body.stmc-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
html body.stmc-checkout .woocommerce-account-fields input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: relative;
flex: 0 0 auto;
width: 46px;
height: 26px;
min-width: 46px;
margin: 1px 0 0;
padding: 0;
background: var(--stmc-switch-off);
border: 0;
border-radius: 999px;
cursor: pointer;
transition: background-color 0.2s ease;
}
html body.stmc-checkout .wc-gzd-checkbox-placeholder input[type="checkbox"]::before,
html body.stmc-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]::before,
html body.stmc-checkout .woocommerce-account-fields input[type="checkbox"]::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(16, 24, 40, 0.35);
transition: left 0.2s ease;
}
html body.stmc-checkout .wc-gzd-checkbox-placeholder input[type="checkbox"]:checked,
html body.stmc-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked,
html body.stmc-checkout .woocommerce-account-fields input[type="checkbox"]:checked {
background: var(--stmc-title);
}
html body.stmc-checkout .wc-gzd-checkbox-placeholder input[type="checkbox"]:checked::before,
html body.stmc-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked::before,
html body.stmc-checkout .woocommerce-account-fields input[type="checkbox"]:checked::before {
left: 23px;
}
html body.stmc-checkout .wc-gzd-checkbox-placeholder input[type="checkbox"]:focus-visible,
html body.stmc-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:focus-visible,
html body.stmc-checkout .woocommerce-account-fields input[type="checkbox"]:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--stmc-title) 25%, transparent);
}
/* The required marker sits quietly in the card corner (title keeps meaning). */
body.stmc-checkout .wc-gzd-checkbox-placeholder abbr.required,
body.stmc-checkout .woocommerce-terms-and-conditions-wrapper abbr.required {
position: absolute;
top: 9px;
right: 12px;
margin: 0;
color: color-mix(in srgb, var(--stmc-muted) 55%, var(--stmc-card));
font-size: var(--stmc-fs-s);
line-height: 1;
text-decoration: none;
border-bottom: 0;
cursor: help;
}
body.stmc-checkout .wc-gzd-checkbox-placeholder a,
body.stmc-checkout .woocommerce-terms-and-conditions-wrapper a {
color: var(--stmc-title);
font-weight: 600;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--stmc-title) 35%, transparent);
text-underline-offset: 2px;
transition: text-decoration-color 0.15s ease;
}
body.stmc-checkout .wc-gzd-checkbox-placeholder a:hover,
body.stmc-checkout .woocommerce-terms-and-conditions-wrapper a:hover {
text-decoration-color: var(--stmc-title);
}
/* Place-order zone: button, PayPal's replacement container, trust row. */
body.stmc-checkout .form-row.place-order {
margin: 16px 0 0;
padding: 0;
}
body.stmc-checkout .form-row.place-order .wc-ppcp-checkout-container {
margin-top: 10px;
}
/* Essential information immediately above the buy button — quiet by design.
It is a legal duty, not a sales message: it must be readable and close to
the button, and it must not compete with it for attention. */
body.stmc-checkout .stmc-button-notice {
margin: 0 0 10px;
font-size: var(--stmc-fs-xs);
line-height: 1.5;
color: var(--stmc-muted);
}
body.stmc-checkout .stmc-button-notice p {
margin: 0 0 4px;
}
body.stmc-checkout .stmc-button-notice p:last-child {
margin: 0;
}
/* Reassurance note under the consent boxes (shop-configured, opt-in).
Deliberately a different, friendlier shell than the grey consent cards —
it must never read as one more condition to agree to. */
body.stmc-checkout .stmc-guarantee {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 12px;
padding: 12px 14px;
background: var(--stmc-bg);
background: color-mix(in srgb, var(--stmc-good) 7%, var(--stmc-card));
border: 1px solid var(--stmc-line);
border-color: color-mix(in srgb, var(--stmc-good) 30%, var(--stmc-line));
border-radius: calc(var(--stmc-radius) - 2px);
}
body.stmc-checkout .stmc-guarantee svg {
flex: 0 0 auto;
width: 19px;
height: 19px;
margin-top: 1px;
color: var(--stmc-good);
}
body.stmc-checkout .stmc-guarantee p {
margin: 0;
font-size: var(--stmc-fs-xs);
line-height: 1.55;
color: color-mix(in srgb, var(--stmc-good) 70%, var(--stmc-ink));
}
body.stmc-checkout .stmc-guarantee p strong {
color: var(--stmc-good);
font-weight: 700;
}
/* ---------- 13c. Order table & totals ---------- */
body.stmc-checkout #order_review table.shop_table {
width: 100%;
border: 0;
}
/* The default Woo template ships a "Product / Subtotal" table head; our
column title already labels the area, and as a re-flowed flex line the two
header cells just overlapped (measured on Basel). */
body.stmc-checkout #order_review table.shop_table thead {
display: none;
}
/*
* The7 stacks the review table's cells as full-width blocks (label above,
* amount below — unreadable in the narrow order column, and the label/value
* pairs fall apart). Rebuild every row as ONE flex line: label left, amount
* right. Scoped to the checkout review table only — the cart page keeps its
* fixed-table layout.
*/
body.stmc-checkout #order_review table.shop_table,
body.stmc-checkout #order_review table.shop_table tbody,
body.stmc-checkout #order_review table.shop_table tfoot {
/* A flex column so the money lines can be re-ordered: WooCommerce and
Germanized print the grand total before the tax breakdown, but the
story reads subtotal → tax → net → (promos) → grand total. The grand
total closes the column, exactly like the live shop. */
display: flex;
flex-direction: column;
width: 100%;
}
/* The money block is a closed story: known lines get explicit slots, and
ANY unknown row a third-party plugin prints into the totals lands AFTER
the grand total by default — extras never interrupt the money. */
body.stmc-checkout #order_review table.shop_table tfoot tr { order: 6; }
body.stmc-checkout #order_review table.shop_table tfoot tr.cart-subtotal { order: 1; }
body.stmc-checkout #order_review table.shop_table tfoot tr.woocommerce-shipping-totals,
body.stmc-checkout #order_review table.shop_table tfoot tr.shipping,
body.stmc-checkout #order_review table.shop_table tfoot tr.fee,
body.stmc-checkout #order_review table.shop_table tfoot tr.tax-total,
body.stmc-checkout #order_review table.shop_table tfoot tr.order-tax,
body.stmc-checkout #order_review table.shop_table tfoot tr.stmc-vat-note { order: 2; }
body.stmc-checkout #order_review table.shop_table tfoot tr.stm-net-row { order: 3; }
body.stmc-checkout #order_review table.shop_table tfoot tr[class*="paylater"] { order: 4; }
body.stmc-checkout #order_review table.shop_table tfoot tr.order-total { order: 5; }
/* Zebra on the quiet money lines, matching the live shop's rhythm. */
body.stmc-checkout #order_review table.shop_table tfoot tr.cart-subtotal,
body.stmc-checkout #order_review table.shop_table tfoot tr.stm-net-row {
background: color-mix(in srgb, var(--stmc-bg) 55%, var(--stmc-card));
border-radius: 8px;
}
/* The7 paints the review table itself grey (.woocommerce-checkout
.shop_table) — our card already provides the white surface, and the grey
band ran edge to edge with the text sitting right on its border. */
body.stmc-checkout #order_review table.shop_table {
background: transparent;
}
body.stmc-checkout #order_review table.shop_table tr {
display: flex;
/* The7's own responsive-table CSS turns rows into wrapping columns below
768px (flex-direction: column) — that stacked the amount under its
label again. One label + one amount is ONE horizontal line, always. */
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
gap: 12px;
/* Horizontal breathing room: The7 ships "padding: 10px 0" here, so labels
and amounts touched the card edges. Matches the consent cards' inset. */
padding: 10px 14px;
}
body.stmc-checkout #order_review table.shop_table th,
body.stmc-checkout #order_review table.shop_table td {
display: block;
flex: 0 0 auto;
width: auto;
}
body.stmc-checkout #order_review table.shop_table th {
flex: 1 1 auto;
text-align: left;
}
body.stmc-checkout #order_review table.shop_table th:last-child,
body.stmc-checkout #order_review table.shop_table td:last-child {
margin-left: auto;
text-align: right;
}
/* Product line: image + wrapping name left, price top-right. */
body.stmc-checkout #order_review table.shop_table tr.cart_item {
align-items: flex-start;
}
body.stmc-checkout #order_review table.shop_table td.product-name {
flex: 1 1 auto;
white-space: normal;
overflow: visible;
overflow-wrap: anywhere;
text-align: left;
}
body.stmc-checkout #order_review table.shop_table td.product-name img {
float: left;
width: 44px;
height: 44px;
object-fit: cover;
border-radius: 8px;
margin: 2px 10px 4px 0;
}
/* Quantity stepper in the product line: compact, token-voiced, disabled
states quiet. While a change is in flight the whole group dims. */
body.stmc-checkout .stmc-qty {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: 6px;
vertical-align: middle;
}
body.stmc-checkout .stmc-qty__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
background: var(--stmc-card);
border: 1px solid var(--stmc-line);
border-radius: 50%;
color: var(--stmc-ink);
font-size: var(--stmc-fs-base);
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
body.stmc-checkout .stmc-qty__btn:hover:not(:disabled) {
border-color: var(--stmc-ink);
}
body.stmc-checkout .stmc-qty__btn:focus-visible {
outline: none;
box-shadow: var(--stmc-focus-ring);
}
body.stmc-checkout .stmc-qty__btn:disabled {
color: var(--stmc-line);
cursor: default;
}
body.stmc-checkout .stmc-qty__n {
min-width: 16px;
text-align: center;
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--stmc-ink);
}
body.stmc-checkout .stmc-qty.is-busy {
opacity: 0.45;
pointer-events: none;
}
/* Gateway promo rows (e.g. PayPal pay-later) span the whole line. The
min-width/overflow pair matters: PayPal's banner carries a 300px intrinsic
width and would otherwise push past the card edge in the narrow column. */
body.stmc-checkout #order_review table.shop_table tr[class*="paylater"] td {
flex: 1 1 100%;
min-width: 0;
overflow: hidden;
margin-left: 0;
white-space: normal;
text-align: left;
}
body.stmc-checkout #order_review table.shop_table tr[class*="paylater"] td > * {
max-width: 100%;
}
/* Name and price of the product line share one type — 13px/700 navy like
the live shop's compact product rows. The link variant is explicit: The7
paints product links in its heading blue. */
body.stmc-checkout #order_review table.shop_table .cart_item .product-name,
body.stmc-checkout #order_review table.shop_table .cart_item .product-name a,
body.stmc-checkout #order_review table.shop_table .cart_item .product-total {
font-size: var(--stmc-fs-s);
color: var(--stmc-ink);
font-weight: 700;
}
body.stmc-checkout #order_review table.shop_table .cart_item .product-name a {
text-decoration: none;
}
body.stmc-checkout #order_review table.shop_table .cart_item .product-quantity {
color: var(--stmc-muted);
font-weight: 400;
}
/* Separator on the ROW, not on the cells: as flex items the cells are split
by the 12px gap, so cell borders drew two disconnected line segments. */
body.stmc-checkout #order_review table.shop_table tfoot th,
body.stmc-checkout #order_review table.shop_table tfoot td,
body.stmc-checkout #order_review table.shop_table tr.cart-subtotal th,
body.stmc-checkout #order_review table.shop_table tr.cart-subtotal td {
border-top: 0;
}
/* With the zebra carrying the rhythm, lines only frame the block: one above
the totals (after the products) and one above the closing grand total. */
body.stmc-checkout #order_review table.shop_table tr.cart-subtotal,
body.stmc-checkout #order_review table.shop_table tfoot tr.order-total {
border-top: 1px solid var(--stmc-line-soft);
}
/*
* The row carries the tone as well, not just its cells. Some sites force a
* color onto every td/th site-wide with !important (The7's custom-CSS field
* is a common home for such leftovers); a cell that has to give up its own
* color then still inherits the right tone from its row instead of falling
* back to the theme's. Label and amount of one line share it either way.
*/
body.stmc-checkout #order_review table.shop_table tr {
color: var(--stmc-ink);
}
/* Secondary money lines (tax breakdown, net amount) stay quiet. */
body.stmc-checkout #order_review table.shop_table tr.order-tax,
body.stmc-checkout #order_review table.shop_table tr.stm-net-row,
body.stmc-checkout #order_review tr.order-tax th,
body.stmc-checkout #order_review tr.order-tax td,
body.stmc-checkout #order_review tr.stm-net-row th,
body.stmc-checkout #order_review tr.stm-net-row td {
padding-top: 4px;
padding-bottom: 4px;
font-size: var(--stmc-fs-s);
font-weight: 400;
color: var(--stmc-muted);
}
/* Germanized's small print inside the grand total. */
body.stmc-checkout #order_review .order-total .includes_tax,
body.stmc-checkout #order_review .wc-gzd-total-tax-hint {
display: block;
font-size: var(--stmc-fs-xs);
font-weight: 400;
color: var(--stmc-muted);
}
/* Gateway promo messaging (e.g. PayPal pay-later) stays contained. */
body.stmc-checkout #order_review .wc-ppcp-paylater-msg__container th,
body.stmc-checkout #order_review .wc-ppcp-paylater-msg__container td {
border-top: 0;
padding-top: 8px;
}
/* ---------- 13d. Cart page ---------- */
/* The7 prints the remove column's header as visible text; silence it. */
body.stmc-checkout .shop_table.cart thead th {
padding: 0 0 14px;
font-size: var(--stmc-fs-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--stmc-muted);
border: 0;
}
body.stmc-checkout .shop_table.cart thead th.product-remove {
font-size: 0;
}
body.stmc-checkout .shop_table.cart {
table-layout: fixed;
width: 100%;
border: 0;
}
body.stmc-checkout .shop_table.cart th.product-remove { width: 44px; }
body.stmc-checkout .shop_table.cart th.product-thumbnail { width: 84px; }
body.stmc-checkout .shop_table.cart th.product-price { width: 110px; }
body.stmc-checkout .shop_table.cart th.product-quantity { width: 92px; }
body.stmc-checkout .shop_table.cart th.product-subtotal { width: 110px; }
body.stmc-checkout .shop_table.cart .cart_item td {
padding: 18px 8px 18px 0;
vertical-align: middle;
border-top: 1px solid var(--stmc-line);
}
body.stmc-checkout .shop_table.cart td.product-thumbnail img {
width: 64px;
height: auto;
border-radius: calc(var(--stmc-radius) - 4px);
border: 1px solid var(--stmc-line);
}
body.stmc-checkout .shop_table.cart td.product-name a {
font-weight: 600;
color: var(--stmc-ink);
text-decoration: none;
}
body.stmc-checkout .shop_table.cart td.product-price,
body.stmc-checkout .shop_table.cart td.product-subtotal {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
body.stmc-checkout .shop_table.cart .product-remove a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid var(--stmc-line);
border-radius: 50%;
color: var(--stmc-muted);
font-size: 16px;
line-height: 1;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease;
}
body.stmc-checkout .shop_table.cart .product-remove a:hover {
color: var(--stmc-danger);
border-color: var(--stmc-danger);
}
body.stmc-checkout .shop_table.cart .quantity .qty {
width: 72px;
height: 40px;
padding: 0 8px;
text-align: center;
border: 1px solid var(--stmc-line);
border-radius: calc(var(--stmc-radius) - 4px);
}
/* Checkout button first, wallets after — one flex container, plain order. */
body.stmc-checkout .cart-collaterals .wc-proceed-to-checkout {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 0 0;
}
body.stmc-checkout .cart-collaterals .wc-proceed-to-checkout > * {
margin: 0;
width: 100%;
max-width: none;
float: none;
}
body.stmc-checkout .cart-collaterals .wc-proceed-to-checkout .checkout-button {
order: -1;
}
body.stmc-checkout .wc-ppcp-cart-or,
body.stmc-checkout .wc-ppcp-cart-payment-method.or {
font-size: var(--stmc-fs-s);
color: var(--stmc-muted);
text-align: center;
}
/* Cart footer: continue-shopping link left, update button right. */
body.stmc-checkout .woocommerce-cart-form .cart-footer,
body.stmc-checkout .woocommerce-cart-form td.actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 14px;
padding: 12px 0 0;
border: 0;
}
body.stmc-checkout .update-cart-button input[type="submit"],
body.stmc-checkout button[name="update_cart"] {
height: 40px;
padding: 0 18px;
background: var(--stmc-card);
border: 1px solid var(--stmc-line);
border-radius: 999px;
color: var(--stmc-muted);
font-size: var(--stmc-fs-s);
font-weight: 600;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease;
}
body.stmc-checkout .update-cart-button input[type="submit"]:hover,
body.stmc-checkout button[name="update_cart"]:hover {
border-color: var(--stmc-ink);
color: var(--stmc-ink);
}
/* ---------- 15. Legal text overlay ---------- */
html.stmc-modal-open {
overflow: hidden;
}
body.stmc-checkout .stmc-modal {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
body.stmc-checkout .stmc-modal[hidden] {
display: none;
}
body.stmc-checkout .stmc-modal__scrim {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--stmc-ink) 55%, transparent);
}
body.stmc-checkout .stmc-modal__card {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 760px;
max-height: 84vh;
background: var(--stmc-card);
border-radius: var(--stmc-radius);
box-shadow: 0 24px 64px -16px rgba(10, 18, 45, 0.45);
overflow: hidden;
}
body.stmc-checkout .stmc-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--stmc-line);
}
body.stmc-checkout .stmc-modal__title {
margin: 0;
font-size: var(--stmc-fs-l);
font-weight: 700;
color: var(--stmc-ink);
}
body.stmc-checkout .stmc-modal__x {
flex: 0 0 auto;
width: 34px;
height: 34px;
border: 1px solid var(--stmc-line);
border-radius: 50%;
background: var(--stmc-card);
color: var(--stmc-muted);
font-size: 20px;
line-height: 1;
cursor: pointer;
}
body.stmc-checkout .stmc-modal__x:hover {
color: var(--stmc-ink);
border-color: var(--stmc-ink);
}
body.stmc-checkout .stmc-modal__body {
flex: 1 1 auto;
overflow-y: auto;
padding: 18px 22px;
font-size: var(--stmc-fs-base);
line-height: 1.65;
color: var(--stmc-text);
}
body.stmc-checkout .stmc-modal__body h2,
body.stmc-checkout .stmc-modal__body h3 {
margin: 1.2em 0 0.4em;
font-size: var(--stmc-fs-m);
color: var(--stmc-ink);
}
body.stmc-checkout .stmc-modal__body a {
color: var(--stmc-ink);
}
body.stmc-checkout .stmc-modal__foot {
padding: 12px 20px;
border-top: 1px solid var(--stmc-line);
text-align: right;
}
/* ---------- 13e. Postcode autofill highlight ---------- */
@keyframes stmc-autofill-flash {
0% { background-color: color-mix(in srgb, var(--stmc-accent) 18%, var(--stmc-card)); }
100% { background-color: var(--stmc-card); }
}
body.stmc-checkout input.stmc-autofilled {
animation: stmc-autofill-flash 0.9s ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
body.stmc-checkout input.stmc-autofilled {
animation: none;
}
}
/* ---------- 14. Small screens ---------- */
@media (max-width: 782px) {
/* On a phone the row has no room to be a row — back to the centered
stack, which is what the width actually affords. */
body.stmc-checkout .stmc-band__in {
display: block;
padding: 16px 16px 14px;
text-align: center;
}
body.stmc-checkout .stmc-band__logo {
margin: 0 auto;
}
body.stmc-checkout .stmc-band__trust {
gap: 4px 14px;
margin: 11px 0 0;
font-size: var(--stmc-fs-xs);
}
body.stmc-checkout .stmc-band__trust span {
white-space: normal;
}
body.stmc-checkout .stmc-login-toggle {
display: inline-block;
margin-top: 12px;
}
body.stmc-checkout .stmc-steps {
margin: 18px auto 16px;
padding: 0 12px;
}
body.stmc-checkout .stmc-steps li {
flex: 1 1 0;
font-size: var(--stmc-fs-xs);
}
body.stmc-checkout .woocommerce-billing-fields,
body.stmc-checkout .woocommerce-shipping-fields,
body.stmc-checkout .woocommerce-additional-fields,
body.stmc-checkout form.checkout #order_review,
body.stmc-checkout form.checkout .wc-order-review,
body.stmc-checkout .woocommerce-cart-form,
body.stmc-checkout .cart_totals {
padding: 16px;
}
body.stmc-checkout .stmc-trust-row {
justify-content: center;
}
}
/* ---------- 15b. Integrations: Shiptastic + DHL ----------
Third-party UI re-voiced in the checkout's design language — markup and
behavior stay the plugin's own (adapter, never a fork). */
/* Pickup-location offer: a quiet closing card at the end of the address
block (the integration moves the field there via priority). */
body.stmc-checkout .woocommerce form .form-row.pickup_location_notice {
margin: 10px 0 4px;
padding: 12px 14px;
background: var(--stmc-bg);
border: 1px solid var(--stmc-line);
border-radius: calc(var(--stmc-radius) - 2px);
}
body.stmc-checkout .pickup_location_notice p {
margin: 0;
font-size: var(--stmc-fs-s);
line-height: 1.5;
color: var(--stmc-muted);
}
body.stmc-checkout .pickup_location_notice .pickup-location-notice-title {
display: block;
margin-bottom: 2px;
font-weight: 600;
color: var(--stmc-ink);
}
body.stmc-checkout .pickup_location_notice a {
color: var(--stmc-title, var(--stmc-ink));
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
/* DHL preferred services live in the payment column now (the integration
re-prioritizes their hook); the
markup gets flattened outside a table,
so the section separates itself with a soft line above its header — same
voice as the order-notes sub-block. */
body.stmc-checkout .stmc-payment-col .dhl-preferred-service-header {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--stmc-line-soft);
}
/* Fallback for setups where the row still renders inside the review table:
it closes the order column, after the grand total — delivery fine-tuning
is the coda, not a money line. */
body.stmc-checkout #order_review table.shop_table tfoot tr.dhl-preferred-service {
order: 6;
display: block;
margin-top: 14px;
padding: 14px;
background: var(--stmc-bg);
border: 0;
border-radius: calc(var(--stmc-radius) - 2px);
}
body.stmc-checkout tr.dhl-preferred-service td.dhl-preferred-service-content {
display: block;
flex: 1 1 100%;
margin-left: 0;
padding: 0;
text-align: left;
white-space: normal;
}
body.stmc-checkout .dhl-preferred-service-item {
margin: 0 0 14px;
}
body.stmc-checkout .dhl-preferred-service-item:last-child {
margin-bottom: 0;
}
body.stmc-checkout .dhl-co-logo {
max-height: 18px;
width: auto;
}
body.stmc-checkout .dhl-preferred-service-title {
margin: 0 0 7px;
font-size: var(--stmc-fs-s);
font-weight: 600;
color: var(--stmc-ink);
}
body.stmc-checkout .dhl-preferred-service-cost {
margin: -4px 0 8px;
font-size: var(--stmc-fs-xs);
line-height: 1.5;
color: var(--stmc-muted);
}
/* Delivery-day tiles: choice cards, exactly the checkout's radio language. */
body.stmc-checkout ul.dhl-preferred-service-times {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
body.stmc-checkout ul.dhl-preferred-service-times li {
position: relative;
margin: 0;
}
body.stmc-checkout ul.dhl-preferred-service-times input[type="radio"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
body.stmc-checkout ul.dhl-preferred-service-times label {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 52px;
padding: 8px 10px;
background: var(--stmc-card);
border: 1px solid var(--stmc-line);
border-radius: calc(var(--stmc-radius) - 4px);
text-align: center;
cursor: pointer;
transition: border-color 0.15s ease;
}
body.stmc-checkout ul.dhl-preferred-service-times li:has(input:checked) label {
border-color: var(--stmc-ink);
box-shadow: 0 0 0 1px var(--stmc-ink);
}
body.stmc-checkout ul.dhl-preferred-service-times li:has(input:focus-visible) label {
box-shadow: var(--stmc-focus-ring);
}
body.stmc-checkout .dhl-preferred-time-title {
font-size: var(--stmc-fs-s);
font-weight: 600;
color: var(--stmc-ink);
}
body.stmc-checkout .dhl-preferred-time-value {
font-size: var(--stmc-fs-xs);
color: var(--stmc-muted);
}
/* Drop-off location / neighbor: one tidy radio line, fields on our scale. */
body.stmc-checkout ul.dhl-preferred-location-types {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
margin: 0;
padding: 0;
list-style: none;
}
body.stmc-checkout ul.dhl-preferred-location-types li {
margin: 0;
}
body.stmc-checkout ul.dhl-preferred-location-types label {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: var(--stmc-fs-s);
color: var(--stmc-text);
cursor: pointer;
}
body.stmc-checkout ul.dhl-preferred-location-types input[type="radio"] {
width: 17px;
height: 17px;
margin: 0;
accent-color: var(--stmc-accent);
}
body.stmc-checkout .dhl-preferred-service-item input[type="text"] {
width: 100%;
max-width: 100%;
box-sizing: border-box;
height: 40px;
padding: 0 12px;
margin-top: 8px;
background: var(--stmc-card);
border: 1px solid var(--stmc-line);
border-radius: calc(var(--stmc-radius) - 4px);
font-size: var(--stmc-fs-s);
color: var(--stmc-text);
}
body.stmc-checkout .dhl-hidden {
display: none;
}