/**
* WooCommerce Product Configurator — shared styles for popup + inline.
*
* The configurator UI is built into a neutral `.wpc-config` root, so the same
* image pane, sidebar, option selectors, price/stock and add-to-cart styles are
* shared between the fullscreen overlay (popup) and the inline (full-page) mount.
* Host-specific layout lives under `.wpc-overlay .wpc-config` / `.wpc-inline .wpc-config`.
*
* All selectors are namespaced under `.wpc-` to avoid collisions with the theme
* or Elementor.
*/
/* ------------------------------------------------------------------ *
* Scroll lock (added to and while the overlay is open).
* ------------------------------------------------------------------ */
.wpc-locked {
overflow: hidden !important;
}
/* ------------------------------------------------------------------ *
* Overlay mount point.
* ------------------------------------------------------------------ */
#wpc-root[hidden] {
display: none;
}
/* ------------------------------------------------------------------ *
* Overlay + backdrop. Sits above Elementor sticky headers.
* ------------------------------------------------------------------ */
.wpc-overlay {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
font-family: inherit;
box-sizing: border-box;
}
.wpc-overlay.is-open {
opacity: 1;
visibility: visible;
}
.wpc-overlay *,
.wpc-overlay *::before,
.wpc-overlay *::after {
box-sizing: border-box;
}
.wpc-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(17, 17, 17, 0.72);
cursor: pointer;
}
/* Dialog: a positioned, fixed-size frame the `.wpc-config` grid fills. */
.wpc-overlay__dialog {
position: relative;
margin: auto;
width: 100%;
height: 100%;
max-width: 1600px;
max-height: 100vh;
background: #ffffff;
overflow: hidden;
transform: translateY(12px);
transition: transform 0.2s ease;
}
.wpc-overlay.is-open .wpc-overlay__dialog {
transform: translateY(0);
}
/* Close button. */
.wpc-overlay__close {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
line-height: 1;
color: #222;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
cursor: pointer;
transition: background 0.15s ease;
}
.wpc-overlay__close:hover {
background: #f0f0f0;
}
/* ------------------------------------------------------------------ *
* Inline host wrapper (full-page configurator placed in the page flow).
* ------------------------------------------------------------------ */
.wpc-inline {
font-family: inherit;
box-sizing: border-box;
}
.wpc-inline *,
.wpc-inline *::before,
.wpc-inline *::after {
box-sizing: border-box;
}
/* ------------------------------------------------------------------ *
* Shared configurator root + per-host grid layout.
* ------------------------------------------------------------------ */
.wpc-config {
--wpc-sidebar-w: 380px; /* shared by the grid track and the info slidebar width */
/* Horizontal sidebar padding. Shared with the tab bar, which cancels it with a
* negative margin to span the sidebar edge to edge — keeping both on one variable
* means the breakout can't drift out of sync with the padding it undoes. */
--wpc-sidebar-pad-x: 32px;
/* Tab bar look. Overridable from the Elementor inline widget (Style → Tabs). */
--wpc-tab-bg: transparent;
--wpc-tab-color: #888;
--wpc-tab-color-active: #111;
/* Breathing room between the active tab's underline and the bar's bottom edge; it is
* the bar's bottom padding, so the two lines never touch. */
--wpc-tab-underline-gap: 6px;
/* Accent: one colour for every "this is the chosen / hovered thing" cue — the active
* tab's underline, an option's border (hover and selected, colour swatches included), an
* accessory row that is in the cart, and the ⓘ hover. Elementor: Style → Accent. */
--wpc-accent: #222;
/* ⓘ triggers (Style → Info icons). Their hover colour is --wpc-accent. */
--wpc-info-color: #888;
/* Sidebar header (Style → Header): the product title and the price under it. The price
* is deliberately smaller than the title — see .wpc-title / .wpc-price below. */
--wpc-title-color: #222;
--wpc-price-color: #111;
/* Attribute labels above an option row (Style → Labels), and the chosen term shown on
* the same line, right of the label. */
--wpc-label-color: #555;
--wpc-value-color: #222;
/* Separators (Style → Separators): the hairlines between the sidebar's blocks, plus the
* tab bar's bottom edge and the action footer's top edge. Thickness 0 removes them all.
* The inset is measured from the sidebar edge: 0 = edge to edge, --wpc-sidebar-pad-x
* lines the rule up with the content. */
--wpc-sep-color: #ececec;
--wpc-sep-thickness: 1px;
--wpc-sep-inset: 0px;
/* Option buttons (Style → Options). The "-active" pair is the selected state; the
* radius is shared with the personalization input that sits under an option row, and
* the border width with that input and the colour swatches. */
--wpc-option-bg: #fff;
--wpc-option-border: #cfcfcf;
--wpc-option-color: #222;
--wpc-option-bg-active: #fff;
--wpc-option-color-active: #222;
--wpc-option-radius: 6px;
--wpc-option-border-w: 1px;
/* Colour swatches (Style → Options → Colour swatches). A swatch is an option button with
* a coloured disc on it: the disc's diameter plus the padding around it is the button, so
* the defaults land on the 44px height of a text option. */
--wpc-swatch-size: 32px;
--wpc-swatch-pad: 6px;
/* Footer summary (Style → Total & delivery). The delivery text keeps the amber tone it
* had as a boxed notice, now as plain text next to the amount. */
--wpc-total-color: #111;
--wpc-delivery-color: #8a5a00;
/* Action buttons (Style → Action buttons): primary = Continue / Checkout, secondary =
* Continue shopping. Disabled states are painted explicitly instead of dimmed with
* opacity, so a configured colour is never washed out by a layer on top of it. */
--wpc-add-bg: #222;
--wpc-add-color: #fff;
--wpc-add-border: transparent;
--wpc-add-bg-disabled: #9c9c9c; /* ≈ #222 at 45% over white, i.e. the old opacity look */
--wpc-add-color-disabled: #fff;
--wpc-add-border-disabled: transparent;
--wpc-add-radius: 8px; /* shared by both action buttons */
--wpc-add-border-w: 1px; /* the primary border is transparent until a colour is set */
--wpc-btn2-bg: #fff;
--wpc-btn2-color: #222;
--wpc-btn2-border: #cfcfcf;
--wpc-btn2-bg-disabled: #fff;
--wpc-btn2-color-disabled: #9c9c9c;
--wpc-btn2-border-disabled: #e7e7e7;
--wpc-btn2-border-w: 1px;
/* Accessory rows (Style → Accessories). Borderless: the separator lines and the white
* space carry the structure, and "in cart" reads from the tint plus the filled check. */
--wpc-acc-bg: #fff;
--wpc-acc-bg-selected: #fafafa;
--wpc-acc-radius: 8px;
--wpc-acc-img-size: 64px;
--wpc-acc-label-color: #888; /* the group title above a set of rows */
--wpc-acc-name-color: #222;
--wpc-acc-price-color: #111;
display: grid;
min-width: 0;
position: relative; /* anchor the absolutely-positioned info slidebar */
}
.wpc-overlay .wpc-config {
width: 100%;
height: 100%;
grid-template-columns: 1fr var(--wpc-sidebar-w);
grid-template-areas: "image sidebar";
}
.wpc-inline .wpc-config {
grid-template-columns: 1fr var(--wpc-sidebar-w);
grid-template-areas: "image sidebar";
gap: 2rem;
align-items: start;
}
.wpc-inline--image-right .wpc-config {
grid-template-columns: var(--wpc-sidebar-w) 1fr;
grid-template-areas: "sidebar image";
}
/* Inline full-screen modifier: break out of a boxed Elementor parent to fill the
* viewport. Inline-only — never applied to .wpc-overlay. */
.wpc-inline--fullscreen {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
/* Fit below whatever sits above the configurator (site header, admin bar, etc.).
* --wpc-header-h is measured + set in JS (syncViewportOffset); 0px before it runs. */
min-height: calc( 100vh - var( --wpc-header-h, 0px ) );
}
.wpc-inline--fullscreen .wpc-config {
min-height: calc( 100vh - var( --wpc-header-h, 0px ) );
align-items: stretch; /* override the inline `align-items: start` so panes fill height */
gap: 0;
}
/* The image scales to its (now full-height) pane instead of the 72vh cap below. */
.wpc-inline--fullscreen .wpc-image {
max-height: 100%;
}
/* A tall sidebar is bounded to the viewport; the scroll lives in the panel body
* (below) so the tabs and the action footer stay pinned. */
.wpc-inline--fullscreen .wpc-config__sidebar {
max-height: calc( 100vh - var( --wpc-header-h, 0px ) );
overflow: hidden;
}
/* ------------------------------------------------------------------ *
* Image pane.
* ------------------------------------------------------------------ */
.wpc-config__image {
grid-area: image;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
background: #f7f7f7;
min-width: 0;
min-height: 0;
overflow: hidden;
}
/* Inline mode shows the page background through the image pane (the popup keeps its
* grey studio backdrop, which sits inside a white dialog). */
.wpc-inline .wpc-config__image {
background: transparent;
}
.wpc-image {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
/* In the page flow the pane has no fixed height, so cap the image to the viewport. */
.wpc-inline .wpc-image {
max-height: 72vh;
}
/* ------------------------------------------------------------------ *
* Sidebar.
* ------------------------------------------------------------------ */
/* Vertical padding only: the horizontal inset lives on the children (tab bar, panel body,
* action footer). That is what lets a separator inside the scrolling body bleed out to the
* sidebar edge — a negative margin reaching into the body's *own* padding stays inside its
* padding box, while escaping a padding set here would push scrollable overflow sideways and
* hand the body a horizontal scrollbar (overflow-y: auto makes overflow-x: auto too). */
.wpc-config__sidebar {
grid-area: sidebar;
position: relative;
z-index: 3; /* on top of the info slidebar (z 2) + image scrim (z 1) */
display: flex;
flex-direction: column;
min-height: 0; /* allow the panel body to shrink and own the scroll */
padding: 32px 0;
background: #fff; /* opaque so it occludes the slidebar tucked behind it */
color: #222;
}
/* Overlay sidebar is bounded by the fixed dialog and clears the close button;
* its scroll lives in the panel body so the tabs + action footer stay pinned. */
.wpc-overlay .wpc-config__sidebar {
padding-top: 64px;
overflow: hidden;
border-left: 1px solid #ececec;
}
/* Hairlines between the sidebar's blocks (Style → Separators), drawn on the block that
* starts below each one. As pseudo-elements they disappear together with a hidden block,
* which real siblings would not.
*
* Full-bleed by default: the negative margin reaches into the panel's own horizontal padding
* (see .wpc-tabpanel__body) and --wpc-sep-inset pulls the rule back in from both sidebar
* edges. No rule above .wpc-price — the title and its price read as one header block, so the
* first line is the one that splits that header off from the attribute list. `:not(:empty)`
* on .wpc-stock matters: that block keeps its height when it has no message, so without the
* guard it would show a line permanently. */
.wpc-tabpanel__body > .wpc-selectors::before,
.wpc-tabpanel__body > .wpc-stock:not(:empty)::before,
.wpc-tabpanel__body > .wpc-accessory-group + .wpc-accessory-group::before,
.wpc-selectors > .wpc-attr + .wpc-attr::before {
content: '';
display: block;
flex: 0 0 auto; /* two of these parents are flex columns — never stretch or shrink it */
height: var( --wpc-sep-thickness );
margin-right: calc( var( --wpc-sep-inset ) - var( --wpc-sidebar-pad-x ) );
margin-left: calc( var( --wpc-sep-inset ) - var( --wpc-sidebar-pad-x ) );
background: var( --wpc-sep-color );
}
/* Where the parent is a plain block the line needs its own space below it; inside the flex
* columns (.wpc-selectors, .wpc-attr) their `gap` already provides it. */
.wpc-tabpanel__body > .wpc-stock:not(:empty)::before,
.wpc-tabpanel__body > .wpc-accessory-group + .wpc-accessory-group::before {
margin-bottom: 16px;
}
/* Title + price are one header block (Style → Header): no separator runs between them, and
* the price is a step down from the title so it reads as the title's subline. */
.wpc-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
font-size: 1.5rem;
line-height: 1.25;
font-weight: 600;
color: var( --wpc-title-color );
}
.wpc-price {
margin: 0 0 24px;
font-size: 1.25rem;
color: var( --wpc-price-color );
}
.wpc-price del {
opacity: 0.5;
font-weight: 400;
margin-right: 6px;
}
.wpc-price ins {
text-decoration: none;
font-weight: 600;
}
/* A matched variation's price arrives wrapped in `` (WooCommerce builds
* it that way in WC_Product_Variable::get_available_variations()), and WooCommerce's own
* stylesheet paints `div.product span.price` olive at 1.25em — specificity (0,3,2), which
* outranks the colour set on .wpc-price above. Since a default variation matches on load, that
* rule would win from the first paint and the configured colour would never show. Hence the
* doubled class: (0,4,0) beats it without reaching for !important. `font: inherit` clears the
* 1.25em from that same rule and still carries the del/ins weights above, because those sit on
* the ancestor these nodes inherit from. */
.wpc-config .wpc-price .price.price,
.wpc-config .wpc-price .amount,
.wpc-config .wpc-price bdi {
font: inherit;
color: inherit;
}
/* ------------------------------------------------------------------ *
* Attribute selectors.
* ------------------------------------------------------------------ */
.wpc-selectors {
display: flex;
flex-direction: column;
gap: 20px;
margin: 0 0 24px;
}
.wpc-attr {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Label row: the property name left, the chosen term right, sharing one baseline. It wraps
rather than overflowing when a long value meets a narrow sidebar, and the value's auto
margin keeps it right-aligned on the second line too. */
.wpc-attr__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 12px;
}
.wpc-attr__label {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var( --wpc-label-color );
}
/* The chosen term's name (Style → Labels → Chosen value). It sits beside the label instead
of inside it: nested, it would inherit the label's uppercasing, letter-spacing and colour
and could no longer be styled on its own. */
.wpc-attr__value {
margin-left: auto;
min-width: 0;
font-size: 0.8125rem;
color: var( --wpc-value-color );
text-align: right;
}
.wpc-attr__options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* Text options share the row width: `flex: 1 1 auto` lets each button size to its own
label and then grow to absorb the leftover space, so a row always reaches both sidebar
gutters. With `1 1 0` every option would instead get an equal share and eight of them
would shrink to unreadable slivers. A row that overflows wraps, and each wrapped row
fills the width in turn.
The `.wpc-config` prefix (0,2,0) is what clears Elementor's kit button chrome
(`.elementor-kit-N button`, 0,1,1) — see the tab bar below for the same problem. */
.wpc-config .wpc-option {
flex: 1 1 auto;
min-height: 44px;
padding: 8px 16px;
font-size: 0.9375rem;
color: var( --wpc-option-color );
background: var( --wpc-option-bg );
border: var( --wpc-option-border-w ) solid var( --wpc-option-border );
border-radius: var( --wpc-option-radius );
box-shadow: none;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
/* Restate the configured fill for the hover and focus states. Themes routinely repaint
every