/* ===================================================================== * BioBling Composite Product Regulator — Combined styles * Source: Composite code 1 + Composite code 3 * ===================================================================== */ /* ============================================================ * [CSS-01] CONFIG VARIABLES (safe to edit) * ============================================================ */ .bb-configurator{ --bb-rpc-card-radius: 18px; --bb-rpc-card-border: 1px solid rgba(0,0,0,.06); --bb-rpc-card-shadow: 0 10px 30px rgba(0,0,0,.05); /* DEBUG COLORS: 1 = on, 0 = off */ --bb-rpc-debug-on: 0; /* Warm background (light) */ --bb-rpc-details-bg: #FAF7F2; --bb-rpc-details-radius: 14px; --bb-rpc-details-pad: 18px; /* Separators */ --bb-rpc-sep-color: rgba(0,0,0,.08); /* Two-column layout */ --bb-rpc-img-col: 305px; --bb-rpc-col-gap: 18px; /* Main product image size */ --bb-rpc-img-width: 300px; /* LABEL/VALUE geometry */ --bb-rpc-label-width: 270px; --bb-rpc-label-gap: 0px; /* Row spacing (vertical padding per row) */ --bb-rpc-row-pad-y: 10px; /* Price spacing */ --bb-rpc-price-top: 18px; /* Restore spacing */ --bb-rpc-reset-top: 10px; /* Image swatch base size (used as DEFAULT) */ --bb-rpc-image-swatch: 40px; /* Per-attribute image swatch computed size defaults */ --bb-rpc-image-swatch-w: var(--bb-rpc-image-swatch); --bb-rpc-image-swatch-h: var(--bb-rpc-image-swatch); /* Image swatch caption sizing */ --bb-rpc-swatch-caption-size: 12px; --bb-rpc-swatch-caption-maxw: 92px; --bb-rpc-swatch-tile-gap: 6px; /* Caption legibility spacing */ --bb-rpc-swatch-caption-pad-x: 4px; --bb-rpc-swatch-caption-pad-y: 2px; /* Label font sizing */ --bb-rpc-label-font: 15px; --bb-rpc-label-font-mobile: 14px; } /* BB_CPR_PREVIEW_LAYOUT_STABILITY_2026_04 * Canonical layout ownership is defined later in BB_CPR_LAYOUT_STABLE_LOAD_2026_04. * Keep early variables neutral to avoid breakpoint overlap races. */ .bb-configurator #cp-no-js-msg{ display:none !important; } /* ============================================================ * [CSS-02] DEBUG OVERLAYS (optional) * ============================================================ */ .bb-configurator .composite_component .composited_product_details_wrapper > *:nth-child(1){ background: rgba(255, 0, 0, calc(0.10 * var(--bb-rpc-debug-on))) !important; } .bb-configurator .composite_component .composited_product_details_wrapper > *:nth-child(2){ background: rgba(0, 0, 255, calc(0.10 * var(--bb-rpc-debug-on))) !important; } .bb-configurator .composite_component .composited_product_details_wrapper > *{ outline: calc(2px * var(--bb-rpc-debug-on)) dashed rgba(0,0,0,0.25) !important; outline-offset: -6px !important; } /* ============================================================ * [CSS-03] REMOVE UNWANTED MIDDLE CARD LAYERS * ============================================================ */ .bb-configurator form.cart.composite_form, .bb-configurator .composite_form{ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .bb-configurator .composite_form .component_inner{ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* ============================================================ * [CSS-04] CARD STYLING FOR COMPONENTS + BOTTOM WRAP * ============================================================ */ .bb-configurator .composite_form > .composite_component{ background: #fff !important; border: var(--bb-rpc-card-border) !important; border-radius: var(--bb-rpc-card-radius) !important; box-shadow: var(--bb-rpc-card-shadow) !important; padding: 44px 44px 34px !important; margin: 0 0 32px !important; overflow: hidden !important; } .bb-configurator .composite_form .composite_wrap{ background: #fff !important; border: var(--bb-rpc-card-border) !important; border-radius: var(--bb-rpc-card-radius) !important; box-shadow: var(--bb-rpc-card-shadow) !important; padding: 26px 28px !important; margin-top: 18px !important; } .bb-configurator .bb-cpr-tabs{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 !important; position: relative !important; z-index: 2 !important; } .bb-configurator .bb-cpr-tabs__tab{ appearance: none !important; border: 1px solid rgba(17, 24, 39, .13) !important; border-bottom-color: transparent !important; background: #fbfaf8 !important; color: #111827 !important; border-radius: 8px 8px 0 0 !important; min-height: 44px !important; padding: 8px 14px 9px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; cursor: pointer !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.15 !important; } .bb-configurator .bb-cpr-tabs__tab + .bb-cpr-tabs__tab{ margin-left: 8px !important; } .bb-configurator .bb-cpr-tabs__tab.is-active{ background: #f6f2ed !important; border-color: rgba(17, 24, 39, .12) !important; border-bottom-color: #f6f2ed !important; color: #111827 !important; } .bb-configurator .bb-cpr-tabs__tab.is-empty:not(.is-active){ background: #fff !important; color: #6b7280 !important; } .bb-configurator .bb-cpr-tabs__label{ font-weight: 800 !important; font-size: 15px !important; white-space: nowrap !important; } .bb-configurator .bb-cpr-tabs__status{ font-size: 11px !important; font-weight: 700 !important; opacity: .58 !important; white-space: nowrap !important; } .bb-configurator.bb-cpr-tabs-enabled .composite_form > .composite_component.bb-cpr-tab-panel--inactive{ display: none !important; } /* BB_CPR_SUMMARY_TWO_COL_FALLBACK_2026_04 * Runtime: .composited_product_details_wrapper is often absent under .composite_component; then * BB_CPR_LAYOUT_STABLE_LOAD grid does not apply and the card spans full width. When the AJAX * summary shell has image + details as direct children but no wrapper, apply the same 40/60 split. */ @media (min-width: 750px){ .bb-configurator.bb-cpr-tabs-enabled .composite_component.bb-cpr-tab-panel--active .component_summary .product.content.summary_content.populated:not(:has(.composited_product_details_wrapper)), .bb-configurator.bb-cpr-tabs-enabled .composite_component.bb-cpr-tab-panel--active .component_summary .summary_content.populated:not(:has(.composited_product_details_wrapper)){ display: grid !important; grid-template-columns: minmax(0, 40%) minmax(0, 1fr) !important; column-gap: var(--bb-rpc-col-gap) !important; align-items: start !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .bb-configurator.bb-cpr-tabs-enabled .composite_component.bb-cpr-tab-panel--active .component_summary .product.content.summary_content.populated:not(:has(.composited_product_details_wrapper)) > .composited_product_images, .bb-configurator.bb-cpr-tabs-enabled .composite_component.bb-cpr-tab-panel--active .component_summary .summary_content.populated:not(:has(.composited_product_details_wrapper)) > .composited_product_images{ grid-column: 1 !important; min-width: 0 !important; } .bb-configurator.bb-cpr-tabs-enabled .composite_component.bb-cpr-tab-panel--active .component_summary .product.content.summary_content.populated:not(:has(.composited_product_details_wrapper)) > .details.component_data, .bb-configurator.bb-cpr-tabs-enabled .composite_component.bb-cpr-tab-panel--active .component_summary .summary_content.populated:not(:has(.composited_product_details_wrapper)) > .details.component_data{ grid-column: 2 !important; min-width: 0 !important; max-width: 100% !important; } } /* BB_CPR_FORM_LEVEL_TWO_COL_2026_04 * Only when BOTH gallery and details are direct children of the form. Using :has(> .details) alone * matched themes that hoist only .details to the form while the gallery stays inside .composite_component, * which broke the grid (missing column-1 direct child) and hid or mangled the gallery. */ @media (min-width: 750px){ .bb-configurator.bb-cpr-tabs-enabled form.composite_form:has(> .composited_product_images):has(> .details.component_data){ display: grid !important; grid-template-columns: minmax(0, 40%) minmax(0, 1fr) !important; column-gap: var(--bb-rpc-col-gap) !important; align-items: start !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .bb-configurator.bb-cpr-tabs-enabled form.composite_form:has(> .composited_product_images):has(> .details.component_data) > .bb-cpr-tabs{ grid-column: 1 / -1 !important; } .bb-configurator.bb-cpr-tabs-enabled form.composite_form:has(> .composited_product_images):has(> .details.component_data) > .composite_wrap{ grid-column: 1 / -1 !important; } .bb-configurator.bb-cpr-tabs-enabled form.composite_form:has(> .composited_product_images):has(> .details.component_data) > .composite_component{ grid-column: 1 / -1 !important; } .bb-configurator.bb-cpr-tabs-enabled form.composite_form:has(> .composited_product_images):has(> .details.component_data) > .composited_product_images{ grid-column: 1 !important; min-width: 0 !important; max-width: 100% !important; } .bb-configurator.bb-cpr-tabs-enabled form.composite_form:has(> .composited_product_images):has(> .details.component_data) > .details.component_data{ grid-column: 2 !important; min-width: 0 !important; max-width: 100% !important; } } .bb-configurator .bb-cpr-tabs + .bb-card-group[data-bb-card-group="1"]{ border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } @media (max-width: 767px){ .bb-configurator .bb-cpr-tabs__tab{ min-height: 42px !important; padding-left: 10px !important; padding-right: 10px !important; } .bb-configurator .bb-cpr-tabs__tab + .bb-cpr-tabs__tab{ margin-left: 6px !important; } .bb-configurator .bb-cpr-tabs__label{ font-size: 14px !important; } .bb-configurator .bb-cpr-tabs__status{ font-size: 10px !important; } } /* ============================================================ * [CSS-05] TITLES * ============================================================ */ .bb-configurator .composite_component .component_title_wrapper{ position: relative; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; margin: 0 0 14px !important; /* Keep the title visually centered even when the toggle/fav UI exists on the right */ padding-left: 24px; padding-right: 24px; } @media (max-width: 980px){ .bb-configurator .composite_component table.variations tr.bb-compact-attr-row:not(.bb-dummy-at-home-cap-tr){ display:flex !important; flex-wrap:wrap !important; align-items:flex-start !important; row-gap:6px !important; } .bb-configurator .composite_component table.variations tr.bb-compact-attr-row:not(.bb-dummy-at-home-cap-tr) td.label{ width:auto !important; flex:0 0 auto !important; margin-bottom:0 !important; padding-right:10px !important; } .bb-configurator .composite_component table.variations tr.bb-compact-attr-row:not(.bb-dummy-at-home-cap-tr) td.value{ width:auto !important; flex:1 1 auto !important; min-width:0 !important; } .bb-configurator .composite_component table.variations tr.bb-compact-attr-row:not(.bb-dummy-at-home-cap-tr) td.value .cfvsw-swatches-container{ display:flex !important; flex-wrap:wrap !important; justify-content:flex-start !important; width:auto !important; max-width:100% !important; gap:8px !important; } .bb-configurator .bb-engrave-block table.variations tr.attribute_options{ display:flex !important; flex-wrap:wrap !important; align-items:flex-start !important; row-gap:6px !important; } .bb-configurator .bb-engrave-block table.variations tr.attribute_options td.label{ width:auto !important; flex:0 0 auto !important; margin-bottom:0 !important; padding-right:10px !important; } .bb-configurator .bb-engrave-block table.variations tr.attribute_options td.value{ width:auto !important; flex:1 1 auto !important; min-width:0 !important; } } .bb-configurator .composite_component .component_title_wrapper .component_title, .bb-configurator .composite_component .component_title_wrapper h2{ margin: 0 !important; padding: 0 !important; border: 0 !important; line-height: 1.08 !important; text-align: center !important; font-size: clamp(28px, 2.4vw, 44px) !important; font-weight: 700 !important; flex: 0 1 auto !important; } .bb-configurator .composite_component .component_summary, .bb-configurator .composite_component .component_description_wrapper{ text-align: center !important; } .bb-configurator .composite_component .bb-comp-toggle{ position: absolute; right: 24px; top: 50%; transform: translateY(-50%); margin: 0; display: inline-flex; align-items: center; gap: 12px; } .bb-configurator .composite_component .component_title_wrapper > .bb-comp-toggle__fav{ display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin: 0 0 0 30px; } @media (max-width: 767px){ .bb-configurator form.cart.composite_form.small_width, .bb-configurator .composite_form.small_width{ width: calc(100% + 20px) !important; max-width: none !important; margin-left: -10px !important; margin-right: -10px !important; } .bb-configurator .composite_form > .composite_component{ padding-left: 6px !important; padding-right: 6px !important; padding-top: 18px !important; padding-bottom: 20px !important; } .bb-configurator .composite_component.component.single{ width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } .bb-configurator .composite_component .component_title_wrapper{ text-align: left !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; padding-left: 6px !important; padding-right: 6px !important; margin-bottom: 8px !important; } .bb-configurator .composite_component .component_title_wrapper .component_title, .bb-configurator .composite_component .component_title_wrapper h2{ text-align: left !important; flex: 0 1 auto !important; min-width: 0 !important; margin: 0 !important; } .bb-configurator .composite_component .component_title_wrapper > .bb-comp-toggle__fav{ display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: auto !important; margin: 0 0 0 8px !important; } .bb-configurator .composite_component .component_title_wrapper > .bb-comp-toggle__fav .bb-fav-btn--composite{ margin: 0 !important; } .bb-configurator .composite_component .bb-comp-toggle{ position: static !important; top: auto !important; right: auto !important; transform: none !important; width: auto !important; flex: 0 0 auto !important; justify-content: flex-end !important; margin: 0 0 0 auto !important; } .bb-configurator .composite_component [data-bb-comp-toggle="1"]{ display: inline-flex !important; align-items: center !important; flex-wrap: nowrap !important; justify-content: flex-end !important; margin-left: auto !important; } .bb-configurator .composite_component .component_title_wrapper .bb-comp-toggle .bb-comp-toggle__fav{ display: none !important; } .bb-configurator .composite_component .bb-fav-mobile-row{ display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } } @media (max-width: 767px){ .bb-configurator .composite_component table.variations tr.bb-compact-attr-row:not(.bb-dummy-at-home-cap-tr) td.value .cfvsw-swatches-container{ gap: 4px !important; } .bb-configurator .composite_component table.variations tr.bb-compact-attr-row:not(.bb-dummy-at-home-cap-tr) td.value .cfvsw-swatches-option{ display: inline-flex !important; align-items: center !important; justify-content: center !important; -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; flex: 0 0 auto !important; min-width: 0 !important; min-height: 0 !important; padding: 5px 8px !important; border-radius: 3px !important; font-size: 12px !important; line-height: 1.1 !important; white-space: nowrap !important; } .bb-configurator .composite_component table.variations tr.bb-compact-attr-row:not(.bb-dummy-at-home-cap-tr) td.value .cfvsw-swatches-option .cfvsw-swatch-inner{ display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; line-height: 1.1 !important; box-sizing: border-box !important; } } /* Final mobile header/layout override for ring component cards: * - Move favorite into the live title row created by JS * - Remove the now-unused mobile favorite row spacing * - Tighten outer card inset and top spacing on mobile */ @media (max-width: 767px){ .bb-configurator .composite_form > .composite_component{ padding-left: 6px !important; padding-right: 6px !important; padding-top: 18px !important; padding-bottom: 20px !important; } .bb-configurator .composite_component.component.single{ width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } .bb-configurator .composite_component .component_title_wrapper{ text-align: left !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; padding-left: 6px !important; padding-right: 6px !important; margin-bottom: 8px !important; } .bb-configurator .composite_component .component_title_wrapper .component_title, .bb-configurator .composite_component .component_title_wrapper h2{ text-align: left !important; flex: 0 1 auto !important; min-width: 0 !important; margin: 0 !important; } .bb-configurator .composite_component .component_title_wrapper > .bb-comp-toggle__fav{ display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; } .bb-configurator .composite_component .component_title_wrapper > .bb-comp-toggle__fav .bb-fav-btn--composite{ margin: 0 !important; } .bb-configurator .composite_component .bb-comp-toggle{ position: static !important; top: auto !important; right: auto !important; transform: none !important; width: auto !important; flex: 0 0 auto !important; justify-content: flex-end !important; margin: 0 0 0 auto !important; } .bb-configurator .composite_component [data-bb-comp-toggle="1"]{ display: inline-flex !important; align-items: center !important; flex-wrap: nowrap !important; justify-content: flex-end !important; margin-left: auto !important; } .bb-configurator .composite_component .component_title_wrapper .bb-comp-toggle .bb-comp-toggle__fav{ display: none !important; } .bb-configurator .composite_component .bb-fav-mobile-row{ display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Keep the reset code path in JS/PHP, but hide the visible control again. */ .bb-configurator .composite_component .bb-rpc-reset-row, .bb-configurator .composite_component .bb-rpc-reset-row a.reset_variations{ display:none !important; visibility:hidden !important; opacity:0 !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } } /* Final override: keep the reset path intact, but hide the visible control globally. */ .bb-configurator .composite_component .bb-rpc-reset-row, .bb-configurator .composite_component .bb-rpc-reset-row a.reset_variations{ display:none !important; visibility:hidden !important; opacity:0 !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } @media (max-width: 767px){ .bb-configurator .bb-card--top tr.attribute_options td.label > label, .bb-configurator .bb-size-block tr.attribute_options td.label > label, .bb-configurator .bb-engrave-block tr.attribute_options td.label > label{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; line-height:1.08 !important; white-space:normal !important; } .bb-configurator .bb-card--top tr.attribute_options td.label > label:before, .bb-configurator .bb-size-block tr.attribute_options td.label > label:before, .bb-configurator .bb-engrave-block tr.attribute_options td.label > label:before{ display:block !important; margin:0 0 2px 0 !important; width:auto !important; } .bb-configurator .bb-farbvariante-row td.label .cfvsw-selected-label{ display:block !important; } .bb-configurator .bb-size-block table.variations tr.attribute_options{ display:grid !important; grid-template-columns:minmax(0, var(--bb-cpr-compact-label-w)) minmax(0, 1fr) !important; column-gap:12px !important; align-items:flex-start !important; } .bb-configurator .bb-size-block table.variations tr.attribute_options td.label{ width:auto !important; padding-right:0 !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:2px !important; } .bb-configurator .bb-size-block table.variations tr.attribute_options td.value{ min-width:0 !important; width:auto !important; } .bb-configurator .bb-size-ui .bb-size-toggle{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:flex-start !important; justify-content:flex-start !important; gap:8px !important; width:max-content !important; max-width:100% !important; } .bb-configurator .bb-size-ui .bb-size-toggle > .bb-size-opt{ flex:0 0 164px !important; width:164px !important; min-width:164px !important; max-width:164px !important; box-sizing:border-box !important; } .bb-configurator .bb-size-ui .bb-size-opt, .bb-configurator .bb-size-ui .bb-size-opt span, .bb-configurator .composite_component table.variations tr.bb-compact-attr-row:not(.bb-dummy-at-home-cap-tr) td.value .cfvsw-swatches-option, .bb-configurator .bb-engrave-swatches .cfvsw-swatches-option, .bb-configurator .bb-engrave-swatches .cfvsw-swatches-option .cfvsw-swatch-inner{ font-size:13px !important; line-height:1.15 !important; } .bb-configurator .bb-rpc-reset-row, .bb-configurator .bb-rpc-reset-row a.reset_variations{ display:none !important; visibility:hidden !important; opacity:0 !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; pointer-events:none !important; } } @media (max-width: 767px){ .bb-configurator .bb-card--top tr.attribute_options td.label > label, .bb-configurator .bb-size-block tr.attribute_options td.label > label, .bb-configurator .bb-engrave-block tr.attribute_options td.label > label{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; line-height:1.08 !important; white-space:normal !important; } .bb-configurator .bb-card--top tr.attribute_options td.label > label:before, .bb-configurator .bb-size-block tr.attribute_options td.label > label:before, .bb-configurator .bb-engrave-block tr.attribute_options td.label > label:before{ display:block !important; margin:0 0 2px 0 !important; width:auto !important; } .bb-configurator .bb-farbvariante-row td.label .cfvsw-selected-label{ display:block !important; } .bb-configurator .bb-size-block table.variations tr.attribute_options{ display:grid !important; grid-template-columns:minmax(0, var(--bb-cpr-compact-label-w)) minmax(0, 1fr) !important; column-gap:12px !important; align-items:flex-start !important; } .bb-configurator .bb-size-block table.variations tr.attribute_options td.label{ width:auto !important; padding-right:0 !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:2px !important; } .bb-configurator .bb-size-block table.variations tr.attribute_options td.value{ min-width:0 !important; width:auto !important; } .bb-configurator .bb-size-ui .bb-size-toggle{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:flex-start !important; justify-content:flex-start !important; gap:8px !important; width:max-content !important; max-width:100% !important; } .bb-configurator .bb-size-ui .bb-size-toggle > .bb-size-opt{ flex:0 0 164px !important; width:164px !important; min-width:164px !important; max-width:164px !important; box-sizing:border-box !important; } .bb-configurator .bb-size-ui .bb-size-opt, .bb-configurator .bb-size-ui .bb-size-opt span, .bb-configurator .composite_component table.variations tr.bb-compact-attr-row:not(.bb-dummy-at-home-cap-tr) td.value .cfvsw-swatches-option, .bb-configurator .bb-engrave-swatches .cfvsw-swatches-option, .bb-configurator .bb-engrave-swatches .cfvsw-swatches-option .cfvsw-swatch-inner{ font-size:13px !important; line-height:1.15 !important; } .bb-configurator .bb-rpc-reset-row, .bb-configurator .bb-rpc-reset-row a.reset_variations{ display:none !important; visibility:hidden !important; opacity:0 !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; pointer-events:none !important; } } @media (max-width: 767px){ .bb-configurator .composite_component .bb-rpc-reset-row, .bb-configurator .composite_component .bb-rpc-reset-row a.reset_variations{ display:none !important; visibility:hidden !important; opacity:0 !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } .bb-configurator .bb-card--top tr.attribute_options td.label > label, .bb-configurator .bb-size-block tr.attribute_options td.label > label, .bb-configurator .bb-engrave-block tr.attribute_options td.label > label, .bb-configurator .bb-cellstone-place-block tr.attribute_options td.label > label{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; line-height:1.08 !important; white-space:normal !important; } .bb-configurator .bb-card--top tr.attribute_options td.label > label:before, .bb-configurator .bb-size-block tr.attribute_options td.label > label:before, .bb-configurator .bb-engrave-block tr.attribute_options td.label > label:before, .bb-configurator .bb-cellstone-place-block tr.attribute_options td.label > label:before{ display:block !important; margin:0 0 2px 0 !important; width:auto !important; } .bb-configurator .bb-size-block tr.attribute_options[data-attribute_label="Ringgröße"] td.label > label.bb-ring-label-split{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; } .bb-configurator .bb-size-block tr.attribute_options[data-attribute_label="Ringgröße"] td.label > label.bb-ring-label-split .bb-ring-label-line{ display:block !important; } .bb-configurator .bb-cellstone-place-block tr.attribute_options[data-attribute_label="Cellstones"] td.label > label.bb-cellstones-label-split{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; } .bb-configurator .bb-cellstone-place-block tr.attribute_options[data-attribute_label="Cellstones"] td.label > label.bb-cellstones-label-split .bb-cell-label-line{ display:block !important; } .bb-configurator .composite_component table.variations tr.bb-compact-attr-row:not(.bb-dummy-at-home-cap-tr) td.value .cfvsw-swatches-option, .bb-configurator .bb-engrave-swatches .cfvsw-swatches-option, .bb-configurator .bb-size-ui .bb-size-opt, .bb-configurator .bb-size-ui .bb-size-opt span, .bb-configurator .bb-engrave-swatches .cfvsw-swatches-option .cfvsw-swatch-inner{ font-size:13px !important; line-height:1.15 !important; } .bb-configurator .bb-size-ui .bb-size-toggle{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:6px !important; justify-content:flex-start !important; width:auto !important; max-width:100% !important; } .bb-configurator .details.component_data table.variations tr.attribute_options[data-attribute_label="Ringgröße"] .bb-size-toggle > .bb-size-opt, .bb-configurator .bb-size-ui .bb-size-toggle > .bb-size-opt{ flex:0 0 164px !important; width:164px !important; min-width:164px !important; max-width:164px !important; box-sizing:border-box !important; padding:6px 10px !important; } .bb-configurator .bb-size-ui .bb-size-opt{ white-space:normal !important; } } /* Keep the reset code path available, but hide the visible control globally. */ .bb-configurator .composite_component .bb-rpc-reset-row, .bb-configurator .composite_component .bb-rpc-reset-row a.reset_variations{ display:none !important; visibility:hidden !important; opacity:0 !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } /* Final mobile configurator shell override: * - keep the component header/title spacing * - let only the inner configurator card bleed to the full mobile card width * - remove the remaining inner top gap above "1. Farbe" */ @media (max-width: 767px){ .bb-configurator .composite_component > .component_inner{ width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .bb-configurator .composite_component > .component_inner > .component_selections{ width: calc(100% + 12px) !important; max-width: none !important; margin-left: -6px !important; margin-right: -6px !important; padding: 0 !important; box-sizing: border-box !important; } .bb-configurator .composite_component > .component_inner > .component_selections > .details.component_data, .bb-configurator .composite_component > .component_inner > .component_selections > .details.component_data > .bb-card-group[data-bb-card-group="1"]{ width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .bb-configurator .bb-card-group[data-bb-card-group="1"]{ overflow: hidden !important; } .bb-configurator .bb-card-group .bb-card--top{ padding-top: 0 !important; margin-top: 0 !important; } .bb-configurator .bb-card--top .bb-sec-title--config{ display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .bb-configurator .bb-card--top table.variations, .bb-configurator .bb-card--top .bb-sec-title + table.variations{ margin-top: 0 !important; } .bb-configurator .bb-card--top table.variations tbody tr:first-child th, .bb-configurator .bb-card--top table.variations tbody tr:first-child td, .bb-configurator .bb-card--top tr.attribute_options:first-child td.label, .bb-configurator .bb-card--top tr.attribute_options:first-child td.value{ padding-top: 0 !important; margin-top: 0 !important; } .bb-configurator .bb-card--top table.variations tr.attribute_options:first-child{ padding-top: 0 !important; } } @media (max-width: 767px){ .bb-configurator .composite_form > .composite_component{ padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; } .bb-configurator .composite_component .component_selections, .bb-configurator .composite_component .component_selections .details, .bb-configurator .composite_component .component_selections .details.component_data{ width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; } .bb-configurator .bb-card-group[data-bb-card-group="1"]{ width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } .bb-configurator .bb-card-group .bb-card--top{ padding-top: 0 !important; margin-top: 0 !important; } .bb-configurator .bb-card--top .bb-sec-title--config{ display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .bb-configurator .bb-card--top table.variations, .bb-configurator .bb-card--top .bb-sec-title + table.variations{ margin-top: 0 !important; } .bb-configurator .bb-card--top table.variations tbody tr:first-child th, .bb-configurator .bb-card--top table.variations tbody tr:first-child td{ padding-top: 0 !important; } } @media (max-width: 767px){ .bb-configurator .composite_form > .composite_component{ padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; } .bb-configurator .composite_component .component_selections, .bb-configurator .composite_component .component_selections .details, .bb-configurator .composite_component .component_selections .details.component_data, .bb-configurator .bb-card-group[data-bb-card-group="1"]{ width: calc(100% + 20px) !important; max-width: none !important; margin-left: -10px !important; margin-right: -10px !important; box-sizing: border-box !important; } .bb-configurator .bb-card-group[data-bb-card-group="1"]{ overflow: hidden !important; } .bb-configurator .bb-card-group .bb-card--top{ padding-top: 0 !important; margin-top: 0 !important; } .bb-configurator .bb-card--top .bb-sec-title--config{ display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .bb-configurator .bb-card--top table.variations, .bb-configurator .bb-card--top .bb-sec-title + table.variations{ margin-top: 0 !important; } .bb-configurator .bb-card--top table.variations tbody tr:first-child th, .bb-configurator .bb-card--top table.variations tbody tr:first-child td{ padding-top: 0 !important; } } /* ========================================================= * MOBILE HEADER LAYOUT (Ring für sie/ihn + Aktiv on one row) * - Title left (with +30px offset) * - Aktiv right * - Heart on its own centered row below * ========================================================= */ @media (max-width: 767px){ .bb-configurator .composite_component .component_title_wrapper{ /* override desktop centering/padding */ text-align: left !important; padding-left: 16px !important; padding-right: 16px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; flex-wrap: nowrap !important; } .bb-configurator .composite_component .component_title_wrapper .component_title, .bb-configurator .composite_component .component_title_wrapper h2{ text-align: left !important; margin: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; /* Keep on one line; reduce size instead of truncating for "Ring für sie/ihn" */ overflow: visible !important; text-overflow: clip !important; font-size: clamp(20px, 6vw, 28px) !important; } .bb-configurator .composite_component .bb-comp-toggle{ position: static !important; top: auto !important; right: auto !important; transform: none !important; margin: 0 !important; width: auto !important; justify-content: flex-end !important; flex-wrap: nowrap !important; } .bb-configurator .composite_component .bb-fav-mobile-row{ width: 100% !important; display: flex !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .bb-configurator .composite_component .bb-fav-mobile-row .bb-comp-toggle__fav{ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; margin: 0 !important; } .bb-configurator .composite_component .bb-fav-mobile-row .bb-fav-feedback{ display: none !important; } .bb-configurator .composite_component .composited_product_images{ margin-top: 0 !important; padding-top: 0 !important; } } /* Desktop/Tablet: hide mobile heart row */ @media (min-width: 600px){ .bb-configurator .composite_component .bb-fav-mobile-row{display:none!important;} .bb-configurator .composite_component .component_title_wrapper .bb-comp-toggle .bb-comp-toggle__fav{display:inline-flex!important;} } .bb-comp-toggle{ gap: 12px; } .bb-configurator .composite_component .bb-fav-btn--composite{ width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; margin: 0; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: static !important; top: auto !important; right: auto !important; } .bb-configurator .composite_component .bb-fav-btn--composite svg{ width: 24px; height: 24px; } .bb-configurator .composite_component .bb-comp-toggle__action{ display: none !important; align-items: center; font-size: 14px; line-height: 1; font-weight: 500; padding: 0; margin: 0; border: 0; background: transparent; color: #1f2937; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none; text-transform: none !important; letter-spacing: 0 !important; } .bb-configurator .composite_component .bb-comp-toggle__action:hover, .bb-configurator .composite_component .bb-comp-toggle__action:focus, .bb-configurator .composite_component .bb-comp-toggle__action:active, .bb-configurator .composite_component .bb-comp-toggle__action:focus-visible{ color: #1f2937; text-decoration: underline; outline: none; box-shadow: none; } .bb-configurator .composite_component .component_title_wrapper .component_title{ display: inline-block; margin: 0 auto; } .bb-configurator .composite_component .component_summary .component_option_label, .bb-configurator .composite_component .component_summary .component_option_title, .bb-configurator .composite_component .component_option_selection, .bb-configurator .composite_component .component_option_summary, .bb-configurator .composite_component .component_option_selection_title, .bb-configurator .composite_component .component_option_reset, .bb-configurator .composite_component .component_option_reset_wrapper, .bb-configurator .composite_component a.component_option_reset, .bb-configurator .composite_component .component_option_reset_link{ display: none !important; } /* Hide 'Deine Auswahl:' label */ .bb-configurator .composite_component .composited_product_title_wrapper > p.component_section_title:first-child{ display: none !important; } /* Hide 'Auswahl aufheben' row */ .bb-configurator .composite_component .composited_product_title_wrapper .clear_component_options_wrapper{ display: none !important; } /* Optional: remove extra spacing created by hidden rows */ .bb-configurator .composite_component .composited_product_title_wrapper{ margin-top: 0 !important; } .bb-configurator .composite_component .composited_product_title_wrapper .composited_product_title{ display: none !important; margin: 0 !important; } .bb-configurator .composite_component .component_summary h3, .bb-configurator .composite_component .component_summary .product_title, .bb-configurator .composite_component .component_description_wrapper h3{ margin: 10px 0 26px !important; line-height: 1.2 !important; font-size: clamp(18px, 1.6vw, 26px) !important; font-weight: 600 !important; } /* ============================================================ * [CSS-06] TWO-COLUMN LAYOUT * ============================================================ */ .bb-configurator .composite_component .composited_product_details_wrapper{ display: grid !important; grid-template-columns: 1fr !important; column-gap: var(--bb-rpc-col-gap) !important; align-items: start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } .bb-configurator .composite_component .composited_product_images{ align-self: start !important; margin-top: 6px !important; display: flex !important; justify-content: flex-start !important; align-items: flex-start !important; width: 100% !important; min-width: 0 !important; } .bb-configurator .composite_component .composited_product_images img, .bb-configurator .composite_component .composited_product_images .wp-post-image, .bb-configurator .composite_component .composited_product_images img.attachment-woocommerce_thumbnail, .bb-configurator .composite_component .composited_product_images img.attachment-woocommerce_single{ width: var(--bb-rpc-img-width) !important; max-width: var(--bb-rpc-img-width) !important; height: auto !important; display: block !important; margin: 0 !important; } /* --- RESTORE width guards so beige details box does NOT shrink --- */ .bb-configurator .composite_component .component_selections{ align-self: start !important; width: 100% !important; max-width: none !important; min-width: 0 !important; text-align: left !important; overflow: visible !important; justify-self: stretch !important; } .bb-configurator .composite_component .component_selections .details.component_data, .bb-configurator .composite_component .component_selections .details{ width: 100% !important; max-width: none !important; min-width: 0 !important; display: block !important; box-sizing: border-box !important; } /* Warm background container */ .bb-configurator .composite_component .component_selections .details.component_data{ background: transparent !important; border-radius: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ============================================================ * [CSS-07] VARIATIONS ROW LAYOUT * ============================================================ */ .bb-configurator .composite_component table.variations{ width: 100% !important; max-width: 100% !important; margin: 0 !important; border: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; table-layout: auto !important; } .bb-configurator .composite_component table.variations tbody{ display: block !important; width: 100% !important; } .bb-configurator .composite_component table.variations tr.attribute_options{ display: flex !important; width: 100% !important; align-items: center !important; padding: var(--bb-rpc-row-pad-y) 0 !important; box-sizing: border-box !important; } /* Cap row must touch separator and card edges without row-level gutters. */ .bb-configurator .composite_component table.variations tr.attribute_options.bb-dummy-at-home-cap-tr{ padding: 0 !important; align-items: stretch !important; } .bb-configurator .composite_component table.variations tr.attribute_options:not(:last-child){ border-bottom: 1px solid var(--bb-rpc-sep-color) !important; } .bb-configurator .composite_component table.variations tr.attribute_options:not(.bb-dummy-at-home-cap-tr) > td{ display: block !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; min-width: 0 !important; } .bb-configurator .composite_component table.variations td.label{ flex: 0 0 var(--bb-rpc-label-width) !important; width: var(--bb-rpc-label-width) !important; padding-right: var(--bb-rpc-label-gap) !important; text-align: left !important; white-space: normal !important; } /* PDP: Farbvariante ("1. Goldfarben") label should be tighter than other rows (tablet/desktop only). */ @media (min-width: 768px){ .bb-configurator .composite_component table.variations tr.bb-farbvariante-row > td.label{ flex: 0 0 120px !important; width: 120px !important; } } /* Tablet+desktop: rows 2–5 (Gold..Gravur) label width should match Goldfarben. */ @media (min-width: 768px){ .bb-configurator .bb-addon-block table.variations tr.bb-compact-attr-row > td.label, .bb-configurator .bb-size-block table.variations tr.attribute_options > td.label, .bb-configurator .bb-engrave-block table.variations tr.attribute_options > td.label, .bb-configurator .bb-cellstone-place-block table.variations tr.attribute_options > td.label{ flex: 0 0 125px !important; width: 125px !important; } } .bb-configurator .composite_component table.variations td.label label{ display: block !important; margin: 0 !important; line-height: 1.25 !important; font-weight: 600 !important; font-size: var(--bb-rpc-label-font) !important; } .bb-configurator .composite_component table.variations td.label .cfvsw-selected-label{ display: none !important; } .bb-configurator .composite_component table.variations td.value, .bb-configurator .composite_component table.variations td.value.disable-to-select{ flex: 1 1 auto !important; width: auto !important; max-width: none !important; text-align: left !important; overflow: visible !important; } /* ============================================================ * [CSS-08] SWATCH CONTAINER LAYOUT * ============================================================ */ .bb-configurator .composite_component table.variations td.value .cfvsw-swatches-container{ width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-start !important; align-items: center !important; align-content: flex-start !important; gap: 10px 12px !important; } @media (min-width: 768px){ .bb-configurator .composite_component table.variations td.value .cfvsw-swatches-container{ gap: 6px 10px !important; } } .bb-configurator .composite_component table.variations td.value .cfvsw-swatches-option{ flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; float: none !important; vertical-align: middle !important; } .bb-configurator .composite_component table.variations td.value .cfvsw-swatches-option .cfvsw-swatch-inner{ display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } /* ============================================================ * [CSS-09a] BORDER THICKNESS FIX — make image swatches inherit plugin border width * CFVSW sets 1px for .cfvsw-image-option; label swatches use the variable. * ============================================================ */ .bb-configurator .cfvsw-swatches-option.cfvsw-image-option{ border-width: var(--cfvsw-swatches-border-width, 1px) !important; } /* ============================================================ * [CSS-09b] GREY-OUT FALLBACK — ensure ALL disabled/out-of-stock image swatches grey * If plugin blur classes are present, do nothing (plugin already overlays via ::before). * Otherwise, add same overlay as plugin blur uses. * ============================================================ */ .bb-configurator .cfvsw-swatches-option.bb-is-image-swatch.cfvsw-swatches-disabled :not(.cfvsw-swatches-blur):not(.cfvsw-swatches-blur-disable) :not(.cfvsw-swatches-blur-cross):not(.cfvsw-swatches-blur-cross-disable) :not(.cfvsw-swatches-hide-disable)::before, .bb-configurator .cfvsw-swatches-option.bb-is-image-swatch.cfvsw-swatches-out-of-stock :not(.cfvsw-swatches-blur):not(.cfvsw-swatches-blur-disable) :not(.cfvsw-swatches-blur-cross):not(.cfvsw-swatches-blur-cross-disable) :not(.cfvsw-swatches-hide-disable)::before{ content: "" !important; width: 100% !important; height: 100% !important; position: absolute !important; top: 0 !important; left: 0 !important; background-color: #fff !important; opacity: 0.4 !important; pointer-events: none !important; } /* ============================================================ * [CSS-09] IMAGE SWATCH TILES ONLY (layout; keeps plugin border system intact) * ============================================================ */ .bb-configurator .cfvsw-swatches-option.bb-is-image-swatch{ display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: var(--bb-rpc-swatch-tile-gap) !important; /* reduce perceived “pulsing” */ transition: none !important; transform: none !important; } .bb-configurator .cfvsw-swatches-option.bb-is-image-swatch .cfvsw-swatch-inner{ transition: none !important; transform: none !important; } /* Remove checkmark safely: only suppress ::after, never ::before (plugin uses ::before for blur) */ .bb-configurator .cfvsw-swatches-option.bb-is-image-swatch::after{ content: none !important; display: none !important; } /* ============================================================ * [CSS-10] DEFAULT IMAGE SWATCH SIZING (ONLY image swatches) * ============================================================ */ .bb-configurator .cfvsw-swatches-option.bb-is-image-swatch .cfvsw-swatch-inner{ width: var(--bb-rpc-image-swatch-w) !important; height: var(--bb-rpc-image-swatch-h) !important; padding: 0 !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; /* prevent inner “double border” */ border: 0 !important; outline: 0 !important; box-shadow: none !important; } .bb-configurator .cfvsw-swatches-option.bb-is-image-swatch .cfvsw-swatch-inner img{ width: var(--bb-rpc-image-swatch-w) !important; height: var(--bb-rpc-image-swatch-h) !important; max-width: var(--bb-rpc-image-swatch-w) !important; max-height: var(--bb-rpc-image-swatch-h) !important; display: block !important; object-fit: cover !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* ============================================================ * [CSS-10b] PER-ATTRIBUTE OVERRIDES (safe to edit) * Requirement: first 2 attribute rows should be 50% smaller vertically. * ============================================================ */ .bb-configurator .cfvsw-swatches-container[swatches-attr="attribute_pa_ring-grundmaterial"]{ --bb-rpc-image-swatch-w: var(--bb-rpc-image-swatch); --bb-rpc-image-swatch-h: calc(var(--bb-rpc-image-swatch) * 0.5); } .bb-configurator .cfvsw-swatches-container[swatches-attr="attribute_pa_ring-zweitmaterial-einsatz"]{ --bb-rpc-image-swatch-w: var(--bb-rpc-image-swatch); --bb-rpc-image-swatch-h: calc(var(--bb-rpc-image-swatch) * 0.5); } /* ============================================================ * [CSS-11] IMAGE SWATCH CAPTION (ONLY for image swatches) * Keep it neutral so plugin overlays/disabled classes can affect it. * ============================================================ */ .bb-configurator .cfvsw-swatches-option .bb-swatch-caption{ display: none !important; } .bb-configurator .cfvsw-swatches-option.bb-is-image-swatch .bb-swatch-caption{ display: inline-block !important; font-size: var(--bb-rpc-swatch-caption-size) !important; line-height: 1.25 !important; font-weight: 400 !important; max-width: var(--bb-rpc-swatch-caption-maxw) !important; text-align: center !important; white-space: normal !important; word-break: break-word !important; margin-top: 2px !important; padding: var(--bb-rpc-swatch-caption-pad-y) var(--bb-rpc-swatch-caption-pad-x) !important; /* Do NOT override plugin text color. */ color: inherit !important; background: transparent !important; /* avoid hover tooltips / selection conflicts */ pointer-events: none !important; } /* ============================================================ * [CSS-12] TOOLTIP REMNANTS — HARD DISABLE * ============================================================ */ .bb-configurator .cfvsw-tooltip, .bb-configurator .cfvsw-tooltip-text, .bb-configurator .cfvsw-swatch-tooltip, .bb-configurator .cfvsw_tooltip, .bb-configurator .cfvsw_tooltip_text{ display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .bb-configurator .cfvsw-swatches-option[data-tooltip]::before, .bb-configurator .cfvsw-swatches-option[data-tooltip]::after, .bb-configurator .cfvsw-swatches-option[title]::before, .bb-configurator .cfvsw-swatches-option[title]::after, .bb-configurator .cfvsw-swatch-inner[data-tooltip]::before, .bb-configurator .cfvsw-swatch-inner[data-tooltip]::after, .bb-configurator .cfvsw-swatch-inner[title]::before, .bb-configurator .cfvsw-swatch-inner[title]::after{ content: none !important; display: none !important; } /* ============================================================ * [CSS-13] RESET LINK ROW (Wiederherstellen) * ============================================================ */ .bb-configurator .composite_component .bb-rpc-reset-row{ display: block !important; width: 100% !important; box-sizing: border-box !important; margin-top: var(--bb-rpc-reset-top) !important; text-align: right !important; padding: 0 !important; } .bb-configurator .composite_component .bb-rpc-reset-row a.reset_variations{ display: inline-block !important; margin: 0 !important; text-align: right !important; font-size: var(--bb-rpc-label-font) !important; font-weight: 400 !important; } /* ============================================================ * [CSS-14] PRICE ROW (centered) * ============================================================ */ .bb-configurator .composite_component .single_variation_wrap .woocommerce-variation-price{ display: none !important; } .bb-configurator .composite_component .woocommerce-variation ul, .bb-configurator .composite_component .woocommerce-variation ol{ display: none !important; } .bb-configurator .composite_component .bb-rpc-price-row{ width: 100% !important; margin-top: var(--bb-rpc-price-top) !important; display: flex !important; justify-content: center !important; align-items: center !important; clear: both !important; } .bb-configurator .composite_component .bb-rpc-price-row .bb-rpc-price-target, .bb-configurator .composite_component .bb-rpc-price-row .bb-rpc-price-target .price{ margin: 0 !important; text-align: center !important; display: inline-block !important; } .bb-configurator .bb-rpc-mobile-top-price{ display: none; text-align: center; font-weight: 700; margin: 6px 0 8px; padding: 0; } .bb-configurator .bb-rpc-mobile-top-price .price{ margin: 0 !important; } @media (max-width: 767px){ .bb-configurator .bb-rpc-mobile-top-price{ display: block; margin: 0 !important; padding: 0 !important; } .bb-configurator .bb-rpc-mobile-top-price .bb-rpc-mobile-price-side{ display:inline !important; font-size:0.86em !important; font-weight:400 !important; font-family:inherit !important; color:#4b5563 !important; text-transform:none !important; letter-spacing:0 !important; margin-left:2px !important; vertical-align:baseline !important; } .bb-configurator .bb-rpc-price-row{ display: none !important; } .bb-configurator .bb-sec-title{ font-size: 16px !important; line-height: 1.25; } .bb-configurator{ --bb-rpc-label-font: var(--bb-rpc-label-font-mobile); } } /* ============================================================ * [CSS-15] RESPONSIVE * ============================================================ */ @media (max-width: 980px){ .bb-configurator{ --bb-rpc-col-gap: 18px; --bb-rpc-img-width: 280px; --bb-rpc-label-width: 100%; --bb-rpc-label-gap: 0px; --bb-rpc-row-pad-y: 10px; --bb-rpc-reset-top: 6px; /* ✅ RESTORE inner beige padding (we changed the wrong thing before) */ --bb-rpc-details-pad: 14px; --bb-rpc-swatch-caption-maxw: 110px; } /* ✅ Reduce OUTSIDE white-space so beige card can be wider */ .bb-configurator .composite_form > .composite_component{ /* was 44px sides → huge on mobile; tighten hard */ padding-left: 34px !important; padding-right: 10px !important; /* keep top/bottom comfortable */ padding-top: 26px !important; padding-bottom: 22px !important; } /* kill any sneaky side padding from intermediate wrappers */ .bb-configurator .composite_component .component_selections, .bb-configurator .composite_component .component_selections .details, .bb-configurator .composite_component .component_selections .details.component_data{ margin-left: 0 !important; margin-right: 0 !important; } /* ensure the beige box spans full available width */ .bb-configurator .composite_component .component_selections .details.component_data{ width: 100% !important; max-width: 100% !important; } /* thumbnails: remove extra outer whitespace above/below */ .bb-configurator .composite_component .composited_product_images{ justify-content: center !important; margin-top: 0 !important; padding: 0 !important; } .bb-configurator .composite_component table.variations tr.attribute_options{ display: block !important; padding: var(--bb-rpc-row-pad-y) 0 !important; } .bb-configurator .composite_component table.variations td.label{ width: 100% !important; flex: none !important; margin-bottom: 6px !important; } .bb-configurator .composite_component table.variations td.value{ width: 100% !important; } .bb-configurator .composite_component .bb-rpc-reset-row{ padding-left: 0 !important; text-align: right !important; } } /* ========================================================================= * BB_CPR_LAYOUT_BREAKPOINT_GUARD_2026_04 * - Viewport >=750px: two columns (see BB_CPR_LAYOUT_STABLE_LOAD — canonical). * - Viewport <=749px: single column. * ======================================================================= */ @media (min-width: 750px){ .bb-configurator .composite_component .composited_product_details_wrapper{ display: grid !important; /* BB_CPR_DESKTOP_GRID_HARD_SPLIT_2026_04 * Hard-code desktop split to avoid fallback to legacy 305px var path. */ grid-template-columns: minmax(0, 40%) minmax(0, 1fr) !important; column-gap: var(--bb-rpc-col-gap) !important; row-gap: 0 !important; } } @media (max-width: 749px){ .bb-configurator .composite_component .composited_product_details_wrapper{ grid-template-columns: 1fr !important; row-gap: 0 !important; } } /* ===================================================================== * UI blocks / ring-size / availability / tech-data styles (scoped) * ===================================================================== */ /* ===================================================================== * Tablet (600–1024px) – Fix large "white gap" under the gallery * * Cause: * - BB CPR forces a fixed image width via --bb-rpc-img-width (e.g. 280px at <=980px). * - BB CP Variation Gallery reserves a stable figure height via aspect-ratio. * - When the is forced smaller than its
, the reserved space * becomes a visible empty block between gallery and configurator. * * Fix: * - Only when the BB variation gallery is active (.bb-vg-has-gallery), let the * main image fill its figure and prefer the gallery's own alignment rules. * ===================================================================== */ @media (min-width: 600px) and (max-width: 1024px){ /* Let the variation gallery control its own sizing on tablet. */ .bb-configurator .composite_component .composited_product_images.bb-vg-has-gallery img, .bb-configurator .composite_component .composited_product_images.bb-vg-has-gallery .wp-post-image, .bb-configurator .composite_component .composited_product_images.bb-vg-has-gallery img.attachment-woocommerce_thumbnail, .bb-configurator .composite_component .composited_product_images.bb-vg-has-gallery img.attachment-woocommerce_single{ width: 100% !important; max-width: 100% !important; height: auto !important; } /* Prevent BB CPR's generic alignments from overriding the gallery layout. With flex-direction:column (variation gallery), justify-content:center vertically centers the gallery inside the grid row when the configurator column is taller — main image drops to align with mid-card content. Keep everything pinned to the top. */ .bb-configurator .composite_component .composited_product_images.bb-vg-has-gallery{ justify-content: flex-start !important; align-items: flex-start !important; } } /* BB_CPR_DESKTOP_TABLET_ROW_CENTERING_PARSE_SAFE_2026_04: Final simple-selector fallback so the browser cannot drop the whole non-mobile centering pass because of a complex state selector. */ @media (min-width: 768px){ body.single-product .bb-configurator .bb-addon-block .bb-cpr-addon-row[data-bb-addon-row="stone"], body.single-product .bb-configurator .bb-size-block tr.attribute_options, body.single-product .bb-configurator .bb-engrave-block tr.attribute_options, body.single-product .bb-configurator .bb-cellstone-place-block tr.attribute_options:not(.bb-dummy-at-home-cap-tr){ min-height: 62px !important; height: 62px !important; align-items: center !important; overflow: visible !important; } body.single-product .bb-configurator .bb-addon-block .bb-cpr-addon-row[data-bb-addon-row="stone"] > td.label, body.single-product .bb-configurator .bb-addon-block .bb-cpr-addon-row[data-bb-addon-row="stone"] > td.value, body.single-product .bb-configurator .bb-size-block tr.attribute_options > td.label, body.single-product .bb-configurator .bb-size-block tr.attribute_options > td.value, body.single-product .bb-configurator .bb-engrave-block tr.attribute_options > td.label, body.single-product .bb-configurator .bb-engrave-block tr.attribute_options > td.value, body.single-product .bb-configurator .bb-cellstone-place-block tr.attribute_options:not(.bb-dummy-at-home-cap-tr) > td.label, body.single-product .bb-configurator .bb-cellstone-place-block tr.attribute_options:not(.bb-dummy-at-home-cap-tr) > td.value{ display: flex !important; align-items: center !important; align-self: center !important; height: 100% !important; margin-top: 0 !important; margin-bottom: 0 !important; vertical-align: middle !important; transform: none !important; } body.single-product .bb-configurator .bb-addon-block .bb-cpr-addon-row[data-bb-addon-row="stone"] > td.value > *, body.single-product .bb-configurator .bb-size-block tr.attribute_options > td.value > *, body.single-product .bb-configurator .bb-engrave-block tr.attribute_options > td.value > *, body.single-product .bb-configurator .bb-cellstone-place-block tr.attribute_options:not(.bb-dummy-at-home-cap-tr) > td.value > *{ margin-top: 0 !important; margin-bottom: 0 !important; } body.single-product .bb-configurator .bb-addon-block .bb-cpr-addon-row[data-bb-addon-row="stone"] .bb-compact-info-toggle, body.single-product .bb-configurator .bb-cellstone-place-block tr.attribute_options:not(.bb-dummy-at-home-cap-tr) .bb-compact-info-toggle{ transform: translateY(7px) !important; } } @media (min-width: 768px){ body.single-product .bb-configurator .bb-addon-block .bb-cpr-addon-row.is-help-open, body.single-product .bb-configurator .bb-size-block tr.attribute_options:has(.bb-size-select-wrap:not(.bb-size-hidden)), body.single-product .bb-configurator .bb-size-block tr.attribute_options:has(.bb-size-help[data-bb-size-help-visible="1"]), body.single-product .bb-configurator .bb-size-block tr.attribute_options.is-help-open, body.single-product .bb-configurator .bb-engrave-block tr.attribute_options.is-help-open, body.single-product .bb-configurator .bb-cellstone-place-block tr.attribute_options.is-help-open, body.single-product .bb-configurator .bb-cellstone-place-block tr.attribute_options:has(.bb-cellstone-place[data-bb-cellstone-tier1-state="with"]){ height: auto !important; min-height: 0 !important; } body.single-product .bb-configurator .bb-addon-block .bb-cpr-addon-row.is-help-open .bb-compact-info-toggle, body.single-product .bb-configurator .bb-cellstone-place-block tr.attribute_options.is-help-open .bb-compact-info-toggle{ transform: none !important; } } /* BB_CPR_DESKTOP_TABLET_VISUAL_ROW_BANDS_2026_04: Collapse the spacer margins between the separate option blocks so the visible Steine-to-Cellstones bands match Gold's row rhythm. */ @media (min-width: 768px){ body.single-product .bb-configurator .bb-before-size-sep{ margin-top: 0 !important; margin-bottom: 0 !important; } body.single-product .bb-configurator .bb-size-block, body.single-product .bb-configurator .bb-engrave-block{ margin-top: 0 !important; margin-bottom: 0 !important; } body.single-product .bb-configurator .bb-cellstone-place-block{ margin-top: -10px !important; margin-bottom: 0 !important; } body.single-product .bb-configurator .bb-addon-block .bb-cpr-addon-row[data-bb-addon-row="stone"] .bb-compact-info-toggle{ transform: translateY(6px) !important; } body.single-product .bb-configurator .bb-cellstone-place-block tr.attribute_options:not(.bb-dummy-at-home-cap-tr) .bb-compact-info-toggle{ transform: translateY(7px) !important; } } /* ---------- Section titles (German) ---------- */ .bb-configurator .details.component_data .bb-sec-title{ font-weight: 900; font-size: 18px !important; margin: 6px 0 8px 0; line-height: 1.25; } .bb-configurator .bb-sec-title{ font-size: 18px !important; line-height: 1.25; } .bb-configurator .details.component_data .bb-sec-title--config{ margin-top: 0; } .bb-configurator .details.component_data .bb-sec-title--avail{ margin-top: 0 !important; margin-bottom: 12px !important; } .bb-configurator .details.component_data .bb-sec-title--tech{ margin: 6px 0 8px 0; } /* Keep your existing attribute layout intact */ .bb-configurator .details.component_data table.variations{ margin-top: 0 !important; } /* separator above “Ringgröße” */ .bb-configurator .details.component_data .bb-before-size-sep{ height: 1px !important; width: 100% !important; background: rgba(0,0,0,.08) !important; margin: 14px 0 10px 0 !important; } /* ---------- Ring size block (above Wiederherstellen) ---------- */ .bb-configurator .details.component_data .bb-size-block{ margin: 6px 0 0 0 !important; padding: 0 !important; } .bb-configurator .details.component_data .bb-engrave-block{ margin: 10px 0 0 0 !important; padding: 0 !important; } .bb-configurator .details.component_data .bb-cellstone-place-block{ margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--bb-rpc-sep-color) !important; } @media (max-width: 767px){ body.single-product .bb-configurator .bb-cpr-info-panel--cellstones .bb-cpr-info-close-wrap{ display: block !important; padding-top: 18px !important; } body.single-product .bb-configurator .bb-cpr-info-panel--cellstones .bb-cpr-info-close{ margin-top: 0 !important; } } /* Desktop/tablet compact block rhythm: keep the separate option modules visually aligned with the Gold/Steine table row height. */ @media (min-width: 768px){ body.single-product .bb-configurator .details.component_data .bb-before-size-sep, body.single-product .bb-configurator .bb-before-size-sep{ margin-top: 0 !important; margin-bottom: 0 !important; } body.single-product .bb-configurator .details.component_data .bb-size-block, body.single-product .bb-configurator .details.component_data .bb-engrave-block, body.single-product .bb-configurator .bb-size-block, body.single-product .bb-configurator .bb-engrave-block{ margin-top: 0 !important; margin-bottom: 0 !important; } body.single-product .bb-configurator .details.component_data .bb-cellstone-place-block, body.single-product .bb-configurator .bb-cellstone-place-block{ margin-top: -10px !important; margin-bottom: 0 !important; } body.single-product .bb-configurator .bb-addon-block .bb-cpr-addon-row[data-bb-addon-row="stone"] .bb-compact-info-toggle{ transform: translateY(6px) !important; } body.single-product .bb-configurator .bb-cellstone-place-block tr.attribute_options:not(.bb-dummy-at-home-cap-tr) .bb-compact-info-toggle{ transform: translateY(7px) !important; } body.single-product .bb-configurator .bb-addon-block .bb-cpr-addon-row.is-help-open .bb-compact-info-toggle, body.single-product .bb-configurator .bb-cellstone-place-block tr.attribute_options.is-help-open .bb-compact-info-toggle{ transform: none !important; } body.single-product .bb-configurator .bb-addon-block .bb-cpr-addon-row.is-help-open > td.value, body.single-product .bb-configurator .bb-cellstone-place-block tr.attribute_options.is-help-open > td.value{ display: block !important; height: auto !important; align-self: start !important; } } .bb-configurator .details.component_data table.variations tr.attribute_options[data-attribute_label="Ringgröße"] td.value{ text-align: left !important; vertical-align: top !important; padding-top: 0 !important; padding-bottom: 0 !important; } .bb-configurator .details.component_data table.variations tr.attribute_options[data-attribute_label="Ringgröße"] td.label{ vertical-align: top !important; padding-top: 0 !important; } .bb-configurator .details.component_data table.variations tr.attribute_options[data-attribute_label="Ringgröße"] td.value .bb-size-ui{ --bb-size-pill-w: 280px; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; } .bb-configurator .details.component_data table.variations tr.attribute_options[data-attribute_label="Ringgröße"] td.value .bb-size-toggle{ margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 6px !important; width: auto !important; max-width: 420px !important; } .bb-configurator .details.component_data table.variations tr.attribute_options[data-attribute_label="Ringgröße"] .bb-size-opt{ width: auto !important; max-width: 420px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; padding: 6px 10px !important; border: 1px solid rgba(0,0,0,.12) !important; border-radius: 3px !important; background: #fff !important; cursor: pointer !important; font-size: 13px !important; line-height: 1.15 !important; margin: 0 !important; } .bb-configurator .details.component_data table.variations tr.attribute_options[data-attribute_label="Ringgröße"] .bb-size-help{ display:block !important; font-size:13px !important; opacity:0.85 !important; margin:0 !important; line-height:1.3 !important; width:auto !important; max-width:100% !important; } .bb-configurator .details.component_data table.variations tr.attribute_options[data-attribute_label="Ringgröße"] .bb-size-select-wrap{ margin-top: 0 !important; width: 240px !important; max-width: 100% !important; } .bb-configurator .details.component_data table.variations tr.attribute_options[data-attribute_label="Ringgröße"] .bb-size-select-wrap:not(.bb-size-hidden){ margin-top: 8px !important; } .bb-size-hidden{ display:none !important; } /* Row 4 + row 6: shared native