s) sits left. Force left so the whole panel aligns. */
text-align: left;
}
.delta-pdp .pdp-woo-form table.variations tr + tr {
margin-top: var(--sp-4);
}
.delta-pdp .pdp-woo-form table.variations label,
.delta-pdp .pdp-license-plate-size label {
display: block;
margin-bottom: var(--sp-2);
font-size: var(--fs-11);
font-weight: var(--fw-semi);
color: var(--c-text-inv-muted);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
}
/* ── SELECTS ── */
.delta-pdp .pdp-woo-form select,
.delta-pdp .pdp-license-plate-size select {
width: 100%;
appearance: none;
border: 1px solid var(--c-border-dark);
border-radius: var(--radius-sm);
color: var(--c-text-inv);
font-family: var(--f-body);
font-size: var(--fs-13);
cursor: pointer;
transition: border-color var(--t-fast);
/*
Bricks sets `line-height: var(--bricks-woo-input-height)` (40px) on Woo form
controls. Left alone it stacks on top of our padding and produces a ~66px
box. Reset the line box and let padding define the height, as in the
prototype's `.pdp-select`.
*/
line-height: normal;
padding: var(--sp-3) var(--sp-8) var(--sp-3) var(--sp-4);
/* Caret. The prototype draws it with `.pdp-select-wrap::after`, but Woo owns
the markup around its variation selects, so it rides on the select itself. */
background-color: var(--c-bg-dark);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--sp-4) center;
background-size: 12px 12px;
}
/*
The dropdown list itself. Without this the options fall back to the UA's
light system menu colors inside a dark panel. Prototype: product.css
`.pdp-select option, .pdp-select optgroup`.
*/
.delta-pdp .pdp-woo-form select option,
.delta-pdp .pdp-woo-form select optgroup,
.delta-pdp .pdp-license-plate-size select option {
background: var(--c-bg-dark-2);
color: var(--c-text-inv);
line-height: normal;
}
.delta-pdp .pdp-woo-form select:focus,
.delta-pdp .pdp-license-plate-size select:focus {
outline: none;
border-color: var(--c-accent);
}
/* ── VARIATION STATE ── */
/* ── STICKY CTA ──
`.single_variation_wrap` is the sticky element — NOT
`.woocommerce-variation-add-to-cart`. A sticky box cannot escape its
containing block: the add-to-cart div's containing block is this wrap
(~80px), so it would barely travel, whereas this wrap's containing block is
the form — which, because the form is the LAST block in `.pdp-config`,
reaches the bottom of the scroll content. That is why the options zone and
Trust are injected INSIDE the form (on `woocommerce_after_variations_table`)
above this wrap: they must share the box the bar sticks within, without
shortening it. Zubehör is NOT injected here — accessories are a page-body
section, so the form stays lean: Modell → options zone → Trust → CTA.
Bonus: this wrap already holds `.single_variation`, Woo's live per-variation
price and stock, so pinning it puts the updating price in the bar for free.
`.single_variation` is empty until a Modell is chosen, so the bar starts as
qty + button and grows a price line on selection — the price arriving is
feedback, not a jump to design around.
`position: sticky` (not fixed/absolute) is load-bearing for simple products:
a short sidebar makes sticky a no-op and the CTA stays in flow — no media
query, no floating bar over dead space.
The negative inline/block-end margins bleed the bar to the sidebar edges,
eating `.pdp-config`'s padding so `bottom: 0` reaches the true edge and
scrolled content passes fully behind it. Values mirror `.pdp-config`'s
padding at each breakpoint (`sp-6` desktop, `sp-5` from 1024 down).
Depends on Bricks emitting `.single_variation_wrap` as a direct child of the
form (WooCommerce's native `variable.php` template does). If a Bricks version
restructures it, this rule simply does not bind and the CTA falls back to
flow — verify on the live PDP. */
.delta-pdp .pdp-woo-form .single_variation_wrap {
display: flex;
flex-direction: column;
gap: var(--sp-4);
position: sticky;
bottom: 0;
z-index: 2;
margin-inline: calc(var(--sp-6) * -1);
margin-block-end: calc(var(--sp-6) * -1);
padding: var(--sp-4) var(--sp-6);
background: var(--c-bg-dark-2);
border-top: 1px solid var(--c-border-dark);
}
@media (max-width: 1024px) {
.delta-pdp .pdp-woo-form .single_variation_wrap {
margin-inline: calc(var(--sp-5) * -1);
margin-block-end: calc(var(--sp-5) * -1);
padding: var(--sp-4) var(--sp-5);
}
}
/* ── STICKY RANGE ──
The parent price range, injected by StickyRange.php via
`woocommerce_before_single_variation` as the first child of the sticky wrap.
It is the ONLY price on landing (the top `.pdp-config__price-row` is hidden for
premium products below), and because it rides inside the sticky box it stays on
screen at every scroll position — the whole point of moving the price here.
Swap, not stack: once a full variation is selected, WooCommerce fills
`.single_variation` with the exact price and flags
`.woocommerce-variation-add-to-cart` enabled. The `:has()` rule then hides this
range, so the exact price takes its place and the bar never carries two price
lines. `:has()` is baseline-supported; if a target browser lacked it the range
would simply stay visible above the exact price (degraded, not broken).
Matches the exact price's type (`--fs-28`, head, bold) so the swap is seamless. */
.delta-pdp .pdp-woo-form .pdp-sticky-range {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.delta-pdp .pdp-woo-form .pdp-sticky-range__amount,
.delta-pdp .pdp-woo-form .pdp-sticky-range .price,
.delta-pdp .pdp-woo-form .pdp-sticky-range .amount {
color: var(--c-text-inv);
font-family: var(--f-head);
font-size: var(--fs-28);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
}
.delta-pdp .pdp-woo-form .pdp-sticky-range__note {
font-size: var(--fs-11);
color: var(--c-text-inv-muted);
}
.delta-pdp .pdp-woo-form .single_variation_wrap:has(.woocommerce-variation-add-to-cart-enabled) .pdp-sticky-range {
display: none;
}
.delta-pdp .pdp-woo-form .woocommerce-variation-add-to-cart {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
}
/* Woo/Bricks margin defenses. `.single_variation` and
`.woocommerce-variation-add-to-cart` are Woo's own markup (native
`variable.php`, not ours), and both — plus the price block — ship default
margins. Left alone they stack ON TOP of the wrap's `--sp-4` flex gap and
open an oversized hole between the stock line and the quantity+CTA row.
Zero them so spacing comes only from our flex gaps. */
.delta-pdp .pdp-woo-form .single_variation,
.delta-pdp .pdp-woo-form .woocommerce-variation-add-to-cart,
.delta-pdp .pdp-woo-form .woocommerce-variation-price,
.delta-pdp .pdp-woo-form .woocommerce-variation-availability {
margin: 0;
}
/* Price and availability share ONE row: baseline-aligned, so the small stock
line sits beside the big price instead of adding a third row to the bar.
`flex-wrap` lets a long stock string ("Nur noch 1 auf Lager") drop to its own
line on a narrow bar rather than overflow. Woo's per-variation description,
when present, is a full sentence — force it to a full-width row so it never
shares the price's line; the empty description div is dropped below so it adds
neither a row nor a phantom gap. */
.delta-pdp .pdp-woo-form .single_variation {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: var(--sp-3);
row-gap: var(--sp-2);
}
.delta-pdp .pdp-woo-form .woocommerce-variation-description {
flex-basis: 100%;
}
.delta-pdp .pdp-woo-form .woocommerce-variation-description:empty {
display: none;
}
.delta-pdp .pdp-woo-form .woocommerce-variation-price,
.delta-pdp .pdp-woo-form .woocommerce-variation-availability {
color: var(--c-text-inv);
}
.delta-pdp .pdp-woo-form .woocommerce-variation-price .price,
.delta-pdp .pdp-woo-form .woocommerce-variation-price .amount {
color: var(--c-text-inv);
font-family: var(--f-head);
font-size: var(--fs-28);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
}
.delta-pdp .pdp-woo-form .stock {
margin: 0;
color: rgba(255, 255, 255, 0.72);
font-size: var(--fs-13);
}
.delta-pdp .pdp-woo-form .stock.out-of-stock {
color: #ff8c82;
}
.delta-pdp .pdp-woo-form .reset_variations {
display: inline-flex;
margin-top: var(--sp-2);
color: var(--c-text-inv-muted);
font-size: var(--fs-12);
}
/* ── QUANTITY + CTA ── */
/*
Bricks wraps the Woo quantity input in a stepper:
.quantity > .action.minus + input.qty + .action.plus
The prototype has no quantity control at all, so there is no parity target
here — this is a design decision. It is sized for B2B bulk buyers: the input
is wide enough to type "48" into and stays a real number input, rather than
a click-only stepper that would need 47 taps. The steppers are a convenience
on top, not the primary path.
*/
.delta-pdp .pdp-woo-form .quantity {
flex: 0 0 auto;
/* Woo/theme ships `form.cart .quantity { width: 200px }` (0,2,1). Left alone
the box balloons to 200px, and 200px + the button's 12rem min + gap
overflows the sidebar, so `flex-wrap` drops the button to its own row.
Our scope (0,3,0) outranks it: shrink to content so the stepper and CTA
share one row, stepper sized by its own inner widths. */
width: auto;
display: inline-flex;
align-items: stretch;
border: 1px solid var(--c-border-dark);
border-radius: var(--radius-sm);
background: var(--c-bg-dark);
overflow: hidden;
}
.delta-pdp .pdp-woo-form .quantity:focus-within {
border-color: var(--c-accent);
}
.delta-pdp .pdp-woo-form .quantity .action {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
min-height: 3.5rem;
flex-shrink: 0;
border: 0;
background: none;
color: var(--c-text-inv-muted);
font-family: var(--f-body);
font-size: var(--fs-16);
line-height: 1;
cursor: pointer;
user-select: none;
transition: color var(--t-fast), background var(--t-fast);
}
.delta-pdp .pdp-woo-form .quantity .action:hover {
color: var(--c-text-inv);
background: rgba(255, 255, 255, 0.06);
}
/*
Draw the glyphs ourselves. Bricks renders these via its own icon font, which
the child theme may not load — they came through as empty boxes. `:empty`
means we only fill in when Bricks left nothing, so if the icon font is
present its glyph still wins and we do not double up.
*/
.delta-pdp .pdp-woo-form .quantity .action.minus:empty::before {
content: "\2212"; /* − U+2212 MINUS SIGN, not a hyphen */
}
.delta-pdp .pdp-woo-form .quantity .action.plus:empty::before {
content: "+";
}
.delta-pdp .pdp-woo-form .quantity .qty {
width: 2.3rem; /* fits 3 digits — bulk orders type, they do not click. Kept
tight: a wider input pushes the stepper past the width the
380px sidebar can share with the CTA, forcing a wrap. */
min-height: 3.5rem;
flex: 0 0 auto;
padding: var(--sp-3) var(--sp-2);
border: 0;
border-inline: 1px solid var(--c-border-dark);
border-radius: 0;
background: transparent;
color: var(--c-text-inv);
font-family: var(--f-body);
font-size: var(--fs-14);
line-height: normal; /* same Bricks input-height reset as the selects */
text-align: center;
appearance: textfield;
-moz-appearance: textfield;
}
.delta-pdp .pdp-woo-form .quantity .qty:focus {
outline: none;
}
/* Native spinners duplicate the stepper buttons. */
.delta-pdp .pdp-woo-form .quantity .qty::-webkit-outer-spin-button,
.delta-pdp .pdp-woo-form .quantity .qty::-webkit-inner-spin-button {
appearance: none;
margin: 0;
}
.delta-pdp .pdp-woo-form .single_add_to_cart_button {
/* Basis sets the wrap threshold, NOT the rendered width — `flex-grow: 1`
fills the row whatever the basis. It must stay low enough that
stepper (~117px: two 2.5rem actions + a 2.3rem input) + gap + basis fits
the narrowest one-row column. The 380px sidebar (viewport 1024–1200)
leaves ~332px here. Both the `10rem` basis (down from 12rem) and the
trimmed input width were needed: 12rem + a 3.25rem input overshot by
enough to wrap the button to its own line. Now 380px and 400px keep the
stepper and CTA on one row; the 320px sidebar (≤1024) still wraps to a
full-width CTA, which is right there. */
flex: 1 1 10rem;
min-height: 3.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--sp-4);
border: 2px solid var(--c-accent);
border-radius: var(--radius-sm);
background: var(--c-accent);
color: var(--c-text-inv);
font-family: var(--f-head);
font-size: var(--fs-18);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: 0.04em;
text-transform: uppercase;
transition: background var(--t-fast), border-color var(--t-fast);
}
.delta-pdp .pdp-woo-form .single_add_to_cart_button:hover {
background: var(--c-accent-h);
border-color: var(--c-accent-h);
}
.delta-pdp .pdp-woo-form .single_add_to_cart_button.disabled,
.delta-pdp .pdp-woo-form .single_add_to_cart_button:disabled {
cursor: not-allowed;
border-color: var(--c-border-dark);
background: var(--c-bg-dark-3);
color: var(--c-text-inv-muted);
opacity: 1;
}
/* ── DEFERRED OPTIONS ZONE ──
The in-form home for priced, non-SKU options — "product add-ons" that change
this line item's price or order meta but are NOT their own product. It is a
single stacking container so additional add-ons (e.g. a Klebeschicht paid
flag) slot in as sibling fields, and it is where the WooCommerce Product
Add-ons plugin could render later. No current showcase hook emits this zone.
Distinct from Zubehör (accessories) — those are separate PRODUCTS shown as a
page-body card grid (delta-pdp-scoped.css), never here. */
.delta-pdp .pdp-options-zone {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
/* ── LICENSE PLATE SIZE — one field inside the options zone ── */
.delta-pdp .pdp-license-plate-size {
flex: 1 0 100%;
}
.delta-pdp .pdp-license-plate-size abbr,
.delta-pdp .pdp-license-plate-size abbr.required {
border: 0;
color: var(--c-accent);
text-decoration: none;
}
/* ── NOTICES ── */
.delta-pdp .woocommerce-error,
.delta-pdp .woocommerce-message,
.delta-pdp .woocommerce-info {
margin: 0 0 var(--sp-4);
padding: var(--sp-4);
border: 1px solid var(--c-border-dark);
border-left: 3px solid var(--c-accent);
border-radius: var(--radius-sm);
background: var(--c-bg-dark-2);
color: var(--c-text-inv);
list-style: none;
}
.delta-pdp .woocommerce-error {
border-left-color: #d63c32;
}
.delta-pdp .woocommerce-message a,
.delta-pdp .woocommerce-info a {
color: var(--c-accent);
}
/* ==================================================================
SECTION C — Family-switcher skin + Tattoo (new + was showcase-pdp.css)
================================================================== */
/*
── FAMILY-SWITCHER SKIN ──
The data-driven [delta_family_switcher] outputs semantic, component-scoped
markup (see DeltaParts\FamilySwitcher::render_axis):
nav.delta-family-switcher
div.delta-family-switcher__axis.delta-family-switcher__axis--{series|form|finish}
span.delta-family-switcher__label
ul.delta-family-switcher__choices
li > a.delta-family-switcher__choice[aria-current="page"]
span.delta-family-switcher__choice-name
span.delta-family-switcher__choice-desc (series axis only)
This block maps that output onto the PDP's existing configurator design:
the SERIES axis renders as the two-column card grid (mirrors .pdp-series-picker
/ .pdp-series-btn in Section A), and the FORM + FINISH axes render as toggle
rows (mirror .pdp-toggles / .pdp-toggle). Values are mirrored rather than
shared because the switcher's
/- structure differs from the static
picker's flat markup; the source of truth for these values is the
.pdp-series-btn / .pdp-toggle rules above. Scoped to .delta-pdp: the rich
dark-sidebar treatment only applies inside the Bricks template, which is the
only place the switcher is meant to render.
*/
.delta-pdp .delta-family-switcher {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.delta-pdp .delta-family-switcher__axis {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
/* Per-axis label; mirrors .pdp-group__label. */
.delta-pdp .delta-family-switcher__label {
font-size: var(--fs-11);
font-weight: var(--fw-semi);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--c-text-inv-muted);
}
/* Strip
defaults on every choice list. */
.delta-pdp .delta-family-switcher__choices {
list-style: none;
margin: 0;
padding: 0;
}
/* ── SERIES axis → card grid (mirrors .pdp-series-picker + .pdp-series-btn) ── */
.delta-pdp .delta-family-switcher__axis--series .delta-family-switcher__choices {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-2);
}
.delta-pdp .delta-family-switcher__axis--series .delta-family-switcher__choice {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
background: var(--c-bg-dark);
border: 1px solid var(--c-border-dark);
border-radius: var(--radius-sm);
padding: var(--sp-2) var(--sp-3);
text-decoration: none;
transition: border-color var(--t-fast);
}
.delta-pdp .delta-family-switcher__axis--series .delta-family-switcher__choice:hover {
border-color: rgba(255, 255, 255, 0.2);
}
.delta-pdp .delta-family-switcher__axis--series .delta-family-switcher__choice[aria-current="page"] {
border-color: var(--c-accent);
background: rgba(236, 102, 8, 0.07);
}
.delta-pdp .delta-family-switcher__choice-name {
font-family: var(--f-head);
font-size: var(--fs-16);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
text-transform: uppercase;
color: var(--c-text-inv-muted);
transition: color var(--t-fast);
}
.delta-pdp .delta-family-switcher__axis--series .delta-family-switcher__choice:hover .delta-family-switcher__choice-name {
color: var(--c-text-inv);
}
.delta-pdp .delta-family-switcher__axis--series .delta-family-switcher__choice[aria-current="page"] .delta-family-switcher__choice-name {
color: var(--c-accent);
}
.delta-pdp .delta-family-switcher__choice-desc {
font-size: var(--fs-11);
font-weight: var(--fw-semi);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-text-inv-muted);
opacity: 0.5;
transition: opacity var(--t-fast);
}
.delta-pdp .delta-family-switcher__axis--series .delta-family-switcher__choice[aria-current="page"] .delta-family-switcher__choice-desc {
opacity: 0.7;
}
/* ── FORM + FINISH axes → toggle rows (mirror .pdp-toggles + .pdp-toggle) ── */
.delta-pdp .delta-family-switcher__axis--form .delta-family-switcher__choices,
.delta-pdp .delta-family-switcher__axis--finish .delta-family-switcher__choices {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
}
.delta-pdp .delta-family-switcher__axis--form .delta-family-switcher__choice,
.delta-pdp .delta-family-switcher__axis--finish .delta-family-switcher__choice {
background: var(--c-bg-dark);
border: 1px solid var(--c-border-dark);
border-radius: var(--radius-sm);
color: var(--c-text-inv-muted);
font-family: var(--f-body);
font-size: var(--fs-12);
padding: var(--sp-2) var(--sp-4);
text-decoration: none;
white-space: nowrap;
transition: border-color var(--t-fast), color var(--t-fast);
}
.delta-pdp .delta-family-switcher__axis--form .delta-family-switcher__choice:hover,
.delta-pdp .delta-family-switcher__axis--finish .delta-family-switcher__choice:hover {
border-color: rgba(255, 255, 255, 0.25);
color: var(--c-text-inv);
}
.delta-pdp .delta-family-switcher__axis--form .delta-family-switcher__choice[aria-current="page"],
.delta-pdp .delta-family-switcher__axis--finish .delta-family-switcher__choice[aria-current="page"] {
border-color: var(--c-accent);
color: var(--c-text-inv);
}
/*
── TATTOO PREVIEW ──
Moved verbatim from showcase-pdp.css. Deliberately UNSCOPED: the notice is
rendered by DeltaParts\TattooGuard on woocommerce_before_add_to_cart_form and
the disable rule keys off the .delta-product-tattoo body class, so neither can
assume a .delta-pdp ancestor. Kept on original hardcoded colors (not tokens)
to preserve the component's exact look.
*/
.delta-tattoo-preview {
border-left: 4px solid #f2b705;
margin: 0 0 1.25rem;
padding: 0.85rem 1rem;
background: #fff8d9;
color: #161616;
}
.delta-tattoo-preview p {
margin: 0.35rem 0 0;
}
.delta-product-tattoo .single_add_to_cart_button {
display: none !important;
}