` starts closed everywhere. Accent #C0BF91 lights
up while expanded so the active state reads cleanly. */
.csb .csb-preview__details {
margin-bottom: 6px;
}
.csb .csb-preview__details > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 4px;
margin: 0 -2px;
border-top: 1px solid var(--csb-border-soft);
border-bottom: 1px solid var(--csb-border-soft);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--csb-text);
cursor: pointer;
user-select: none;
list-style: none; /* hide default disclosure triangle */
min-height: 44px; /* touch target */
transition: color var(--sb-transition-fast) var(--sb-ease-premium),
border-color var(--sb-transition-fast) var(--sb-ease-premium);
}
.csb .csb-preview__details > summary::-webkit-details-marker { display: none; }
/* Accent the toggle when expanded so the active state is visible. */
.csb .csb-preview__details[open] > summary {
color: var(--csb-accent);
border-bottom-color: var(--csb-accent);
}
.csb .csb-preview__summary-chev {
color: var(--csb-text-mute);
font-size: 14px;
transition: transform var(--sb-transition-fast) var(--sb-ease-premium),
color var(--sb-transition-fast) var(--sb-ease-premium);
}
.csb .csb-preview__details[open] > summary .csb-preview__summary-chev {
transform: rotate(180deg);
color: var(--csb-accent);
}
.csb .csb-preview__details[open] > .csb-summary {
animation: csb-fade-in var(--sb-transition) var(--sb-ease-premium) both;
}
@media (max-width: 768px) {
/* Mobile keeps the same disclosure UI; the rules above already cover it. */
/* Smaller, viewport-relative canvas on mobile. min() ensures we never
exceed 220px on tall phones but allow shorter devices to scale down
proportionally. Wider 16:9 aspect keeps the canvas usable. */
.csb .csb-stage {
min-height: 0;
max-height: min(220px, 32vh);
aspect-ratio: 16 / 9;
}
/* Tighten the price block and CTAs to claw back another ~20px of
sticky-preview vertical space. */
.csb .csb-price { padding: 8px 0 10px; }
.csb .csb-price__value { font-size: 22px; }
.csb .csb-cta { padding: 13px 18px; }
.csb .csb-secure { font-size: 10px; margin-top: 6px; }
}
/* ---------------------------------------------------------------------
* Consent checkbox — defensive overrides for themes that hide native
* checkboxes or strip their appearance. Scoped tightly to the consent
* field so we don't fight other plugins' checkboxes on the same page.
* --------------------------------------------------------------------- */
.csb .csb-field--consent input[type="checkbox"] {
appearance: checkbox !important;
-webkit-appearance: checkbox !important;
-moz-appearance: checkbox !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: static !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
margin: 2px 0 0 !important;
padding: 0 !important;
border: 1px solid var(--csb-border) !important;
background: var(--csb-bg-2) !important;
box-shadow: none !important;
flex-shrink: 0;
cursor: pointer;
accent-color: var(--csb-accent);
}
.csb .csb-field--consent input[type="checkbox"]:checked {
accent-color: var(--csb-accent);
}
/* Make the entire consent label feel tappable on mobile. */
.csb .csb-field--consent {
cursor: pointer;
min-height: 44px;
padding: 8px 0;
}
.csb .csb-field--consent span {
cursor: pointer;
}
/* =====================================================================
* v2.2.5 — disclaimer + social share section
* ===================================================================== */
/* Subtle preview disclaimer above the layout. Muted text colour, small
font, dark theme compatible — meant to inform without raising alarm. */
.csb .csb-disclaimer {
margin: 0 0 16px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--csb-border-soft);
border-radius: 10px;
font-size: 12px;
line-height: 1.5;
color: var(--csb-text-mute);
text-align: center;
letter-spacing: 0.01em;
}
@media (max-width: 768px) {
.csb .csb-disclaimer {
font-size: 11px;
padding: 8px 10px;
margin-bottom: 12px;
line-height: 1.4;
border-radius: 8px;
}
}
/* Social share section — sits beneath the Request Callback button in
the sticky preview column. Compact 3-up grid of icon + label buttons. */
.csb .csb-share {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--csb-border-soft);
}
.csb .csb-share__label {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--csb-text-dim);
margin-bottom: 10px;
text-align: center;
}
.csb .csb-share__buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
@media (min-width: 769px) {
.csb .csb-share__buttons {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
}
}
.csb .csb-share__btn {
appearance: none;
-webkit-appearance: none;
background: var(--csb-bg-2);
border: 1px solid var(--csb-border);
color: var(--csb-text);
padding: 7px 10px;
border-radius: 8px;
font-size: 11px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
line-height: 1.2;
min-height: 34px;
transition: border-color var(--sb-transition-fast) var(--sb-ease-premium),
background var(--sb-transition-fast) var(--sb-ease-premium),
transform var(--sb-transition-fast) var(--sb-ease-premium);
}
.csb .csb-share__btn:hover {
border-color: var(--csb-text-dim);
background: rgba(255, 255, 255, 0.04);
}
.csb .csb-share__btn:active { transform: scale(0.97); }
.csb .csb-share__btn:disabled {
opacity: 0.5;
cursor: wait;
}
.csb .csb-share__btn svg {
display: block;
width: 14px;
height: 14px;
}
.csb .csb-share__btn span { color: var(--csb-text); font-size: 11px; }
/* Brand tints on hover so the buttons feel platform-flavoured without
shouting at the customer. */
.csb .csb-share__btn--facebook:hover { border-color: #4267B2; color: #4267B2; }
.csb .csb-share__btn--facebook:hover span { color: #4267B2; }
.csb .csb-share__btn--pinterest:hover { border-color: #E60023; color: #E60023; }
.csb .csb-share__btn--pinterest:hover span { color: #E60023; }
.csb .csb-share__btn--whatsapp:hover { border-color: #25D366; color: #25D366; }
.csb .csb-share__btn--whatsapp:hover span { color: #25D366; }
.csb .csb-share__btn--email:hover { border-color: var(--csb-text); color: var(--csb-text); }
.csb .csb-share__btn--email:hover span { color: var(--csb-text); }
@media (max-width: 768px) {
.csb .csb-share__btn {
padding: 7px 8px;
min-height: 34px;
font-size: 11px;
}
.csb .csb-share__btn span { font-size: 11px; }
}
/* =====================================================================
* v2.2.6 — fullscreen preview + CTA row defaults
* ===================================================================== */
/* CTA row is a single-column grid by default (stacked Add to Cart and
Request Callback). Mobile overrides this to 2-up — see the mobile
media query above. */
.csb .csb-cta-row {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
/* Fullscreen toggle button on the canvas — mobile-only floating icon. */
.csb .csb-stage__fullscreen { display: none; }
@media (max-width: 768px) {
.csb .csb-stage__fullscreen {
position: absolute;
top: 8px;
right: 8px;
z-index: 12;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(20, 20, 18, 0.85);
border: 1px solid var(--csb-border);
color: var(--csb-text);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--sb-transition-fast) var(--sb-ease-premium);
appearance: none;
-webkit-appearance: none;
padding: 0;
}
.csb .csb-stage__fullscreen:hover { background: rgba(40, 40, 36, 0.95); }
}
/* Fullscreen mode — applied to the root when the customer taps ⛶ on
mobile. The preview expands to fill the viewport; everything else
on the root is hidden until they tap × to exit. */
.csb .csb-fullscreen-close { display: none; }
.csb.is-fullscreen {
position: fixed;
inset: 0;
z-index: 100000;
background: var(--csb-bg);
padding: 0;
margin: 0;
border-radius: 0;
width: 100vw;
height: 100vh;
max-width: 100vw;
overflow: hidden;
}
/* In fullscreen, hide everything except the preview photo and the close button. */
.csb.is-fullscreen > *:not(.csb-fullscreen-close):not(.csb__layout) { display: none; }
.csb.is-fullscreen .csb__layout {
display: block;
height: 100vh;
}
.csb.is-fullscreen .csb__layout > *:not(.csb-preview) { display: none; }
.csb.is-fullscreen .csb-preview {
display: block;
height: 100vh;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: var(--csb-bg);
position: static;
}
.csb.is-fullscreen .csb-preview > *:not(.csb-preview__photo) { display: none; }
.csb.is-fullscreen .csb-preview__photo {
position: static;
width: 100vw;
height: 100vh;
margin: 0;
padding: 12px;
border: 0;
background: var(--csb-bg);
display: flex;
flex-direction: column;
}
.csb.is-fullscreen .csb-preview__toolbar { flex-shrink: 0; }
.csb.is-fullscreen .csb-stage {
flex: 1;
max-height: none;
aspect-ratio: auto;
min-height: 0;
}
.csb.is-fullscreen .csb-stage canvas { width: 100%; height: 100%; }
/* The fullscreen-OPEN button (⛶ on the canvas) must hide when already in
fullscreen — otherwise it sits at the same top-right corner as the close
button and intercepts taps with its lower z-index. */
.csb.is-fullscreen .csb-stage__fullscreen { display: none !important; }
/* Hide the preview toolbar (Upload room / Snap to Room / Reset / Download)
while in fullscreen. The Download button sits at the right end of the
toolbar and was overlapping the fullscreen close button at the same
top-right corner of the screen. Customer exits fullscreen to use any of
those tools — they're not needed at full-screen viewing time. */
.csb.is-fullscreen .csb-preview__toolbar { display: none !important; }
/* The close button. position: absolute relative to the fullscreened root
(NOT fixed) because nested position:fixed inside another position:fixed
parent has known bugs on iOS Safari. Inside an absolute-positioned root
that fills the viewport, "absolute" lands in the same place anyway. */
.csb.is-fullscreen .csb-fullscreen-close {
display: inline-flex !important;
position: absolute;
top: max(12px, env(safe-area-inset-top, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
z-index: 2147483647; /* paranoid top of stack */
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(20, 20, 18, 0.92);
border: 2px solid var(--csb-accent);
color: var(--csb-text);
cursor: pointer;
align-items: center;
justify-content: center;
appearance: none;
-webkit-appearance: none;
padding: 0;
pointer-events: auto !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
-webkit-tap-highlight-color: rgba(192, 191, 145, 0.3);
}
.csb.is-fullscreen .csb-fullscreen-close:hover,
.csb.is-fullscreen .csb-fullscreen-close:active {
background: var(--csb-accent);
color: var(--csb-accent-on);
}
.csb.is-fullscreen .csb-fullscreen-close svg { pointer-events: none; }
/* When inside the modal AND in fullscreen, push z above the modal. */
.csb-modal__body .csb.is-fullscreen { z-index: 999999; }
/* =====================================================================
* v2.3.0 — configurator branding (logo) + prefers-reduced-motion
* ===================================================================== */
/* Branded logo block above the disclaimer. Three alignments map to
justify-content so the logo can sit left, centre, or right within the
configurator's content area. The image's max-height is set inline by
the template based on the admin setting; aspect-ratio is preserved
because no width is forced. */
.csb .csb-brand {
display: flex;
align-items: center;
margin: 0 0 16px;
padding: 6px 0;
}
.csb .csb-brand--left { justify-content: flex-start; }
.csb .csb-brand--center { justify-content: center; }
.csb .csb-brand--right { justify-content: flex-end; }
.csb .csb-brand__logo {
width: auto;
max-width: 100%;
height: auto;
object-fit: contain;
display: block;
}
@media (max-width: 768px) {
.csb .csb-brand {
margin-bottom: 12px;
padding: 4px 0;
}
/* Scale the configured max-height down a touch on small screens so a
larger desktop logo doesn't dominate mobile chrome. */
.csb .csb-brand__logo {
max-height: min(48px, var(--csb-brand-logo-max, 48px));
}
}
/* ---------------------------------------------------------------------
* prefers-reduced-motion — global motion suppression
*
* Users with vestibular sensitivity, motion sickness or attention
* differences benefit from a static UI. We collapse animation durations
* to ~0 (not 0 — Safari has quirks with zero-duration transitions on
* certain properties) and clamp iteration counts to 1.
*
* This sits at the bottom of the file so it overrides any earlier
* animation/transition definitions without needing !important.
* --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.csb *,
.csb *::before,
.csb *::after,
.csb-modal,
.csb-modal *,
.csb-modal *::before,
.csb-modal *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
}
/* =====================================================================
* v2.3.3 — bulletproof config/callback view swap
*
* Earlier versions relied on the HTML `hidden` attribute to hide the
* config view while the callback form was active. Browser default for
* [hidden] is `display: none`, but a lot of WordPress themes — Elementor,
* Divi, several Astra child themes — set `display: block !important` on
* `` elements inside their column wrappers, which silently defeats
* the [hidden] attribute. The customer then sees both the config and
* the form visible at the same time.
*
* Three layers of defence so this can't happen:
*
* 1. Honour [hidden] with !important on these two specific elements.
* Tight selector so we don't change behaviour anywhere else.
*
* 2. Class-driven hide tied to .is-callback-open on the root, so even
* a theme that strips the [hidden] attribute entirely still gets
* the right element hidden.
*
* 3. The .sb-fade-out animation now keeps opacity:0 in its final
* keyframe (fill mode `both`), so even if the display:none somehow
* doesn't apply, the element is at least invisibly transparent.
* ===================================================================== */
.csb [data-csb-config-view][hidden],
.csb [data-csb-callback-view][hidden] {
display: none !important;
}
/* Belt and suspenders: when the root carries .is-callback-open, force
the config view hidden regardless of its `hidden` attribute. When it
doesn't, force the callback view hidden. JS still sets `hidden` for
accessibility (screen readers honour the attribute even when CSS
overrides display), but visibility is also guaranteed by the class. */
.csb.is-callback-open [data-csb-config-view] {
display: none !important;
}
.csb:not(.is-callback-open) [data-csb-callback-view] {
display: none !important;
}
/* RC1 follow-up §3 + §4: the fixed price/CTA bar on mobile (and the
regular in-flow actions block on desktop) is hidden while the
callback form is open. The customer is in a non-cart flow at that
moment, and keeping the bar visible would:
1. Cover the form's own submit button
2. Confuse the customer with both "Add to Cart" and "Submit
callback" CTAs visible simultaneously
JS toggles .is-callback-open on the root; we collapse the actions
block here and tell syncStickyBarHeight to re-measure (it sees
height: 0 and writes --sb-sticky-bar-height: 0px). */
.csb.is-callback-open .csb-preview__actions {
display: none !important;
}
/* Total Price row in the Your Configuration dropdown — distinct from
the regular summary rows. Bold accent value, top border so it
visually anchors the running total. */
.csb .csb-summary__total {
border-top: 1px solid var(--csb-border-soft);
margin-top: 4px;
padding-top: 10px !important;
}
.csb .csb-summary__total > span {
font-weight: 500;
color: var(--csb-text);
}
.csb .csb-summary__total > strong {
color: var(--csb-accent);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
}
/* =====================================================================
* v2.3.5 — "Click to view" hint under the Your Configuration dropdown
*
* A small, deliberately subtle line that sits below the collapsed
* dropdown. Disappears the moment the customer opens the dropdown so
* it doesn't feel like nagging. Adjacent-sibling selector + the
* native [open] attribute on keep the visibility logic
* pure CSS — no JS toggle needed.
* ===================================================================== */
.csb .csb-preview__details-hint {
display: block;
text-align: center;
margin: 4px 0 10px;
font-size: 11px;
font-style: italic;
color: var(--csb-text-mute);
letter-spacing: 0.04em;
/* Gentle, looping pulse so the hint reads as a friendly nudge
rather than dead text. ~3.5s cycle, opacity 0.6 → 0.9 → 0.6,
only ever visible when the dropdown is collapsed. */
animation: csb-hint-pulse 3.5s ease-in-out infinite;
user-select: none;
cursor: pointer; /* the whole label is clickable via the toggle handler below */
}
@keyframes csb-hint-pulse {
0% { opacity: 0.55; }
50% { opacity: 0.85; }
100% { opacity: 0.55; }
}
/* Hide the hint once the dropdown is open — the content is now visible
so the prompt has served its purpose. Adjacent-sibling selector
keys off the native open attribute. */
.csb .csb-preview__details[open] + .csb-preview__details-hint {
display: none;
}
/* prefers-reduced-motion already pauses animations globally via the
v2.3.0 reduce-motion block; the hint is still visible, just static. */