/* -------------------------------------------------------------------------
   UPGRADED FRAMING LAYOUT: 3-Layer Sandwich Sizing Rules & Swatches Styling
   ------------------------------------------------------------------------- */

/* Helper visibility class to fully override flex display specificity */
.kpc-hidden {
    display: none !important;
}

/* Scoped parents viewport overflow override to protect non-poster slider systems */
/* Apply overflow visible directly to the slide items to prevent left and right molding clips */
.kraess-framer-active .woocommerce-product-gallery .flex-viewport,
.kraess-framer-active .woocommerce-product-gallery--with-images .flex-viewport,
.kraess-framer-active .woocommerce-product-gallery,
.kraess-framer-active .woocommerce-product-gallery__wrapper,
.kraess-framer-active .woocommerce-product-gallery .slides,
.kraess-framer-active .woocommerce-product-gallery__image {
    overflow: visible !important;
}

/* Force background parameters on product gallery container to prevent clipping */
.kraess-framer-active .woocommerce-product-gallery__image {
    position: relative !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    transition: background-image 0.2s ease-in-out;
}

/* Middle Layer (Background & Passepartout wrapper) */
/* Removed width: 100% to allow exact-ratio calculation without clipping right molding */
.kraess-bg-layer {
    position: relative;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, padding 0.2s ease, margin 0.2s ease;
    overflow: hidden;
    z-index: 1;
    /* Subtle ambient inner framing shadow to simulate frame depth (controlled dynamically in JS too) */
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.18) !important;
}

/* Enforce 90-degree corners on active background/passepartout/frame customization components */
.customization-active .woocommerce-product-gallery__image,
.customization-active .woocommerce-product-gallery__image a,
.customization-active .woocommerce-product-gallery__image img,
.kraess-bg-layer,
.kraess-poster-wrap,
.kraess-poster-wrap img {
    border-radius: 0px !important;
}

/* Nested exact-ratio poster wrapper alignment */
.kraess-poster-wrap {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease;
}

/* Default poster shadows inside background/montages */
.kraess-poster-wrap img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Sizing of poster image inside the background card */
.bg-type-montage .kraess-poster-wrap {
    box-shadow: none !important;
}
.bg-type-montage img,
.bg-type-montage .kraess-poster-wrap img,
.bg-type-montage.kraess-poster-wrap img,
.kraess-bg-layer.bg-type-montage img,
.poster[type="box"] .bg-type-montage img {
    box-shadow: 0px 0px 3px 0px rgba(108, 108, 108, 0.3) !important;
}

/* Cutout window bevel inner shadow is placed directly on the exact-ratio wrap */
.bg-type-passepartout .kraess-poster-wrap {
    box-shadow: inset 0 0 10px rgba(0,0,0,0.03);
}

/* Subtler Passepartout cutout bevel transition */
.bg-type-passepartout .kraess-poster-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.04), inset -1px -1px 1.5px rgba(255,255,255,0.2);
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
    z-index: 2;
}

/* CLIP FRAME (Almost invisible molding outline styling) */
.active-clip-frame {
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 2px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.08), 0px 1px 3px rgba(0,0,0,0.05) !important;
}

/* Diagonal glass shine reflections */
.active-clip-frame::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.04) 42%, transparent 42.1%);
    z-index: 10;
}

/* DYNAMIC ZOOM/LIGHTBOX HIDING FOR ACTIVE CUSTOMIZATIONS */
.customization-active .zoomImg {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.customization-active .woocommerce-product-gallery__image a,
.customization-active .woocommerce-product-gallery__trigger {
    pointer-events: none !important;
    cursor: default !important;
}

/* -------------------------------------------------------------------------
   CART AND CHECKOUT VISUALIZATION ROW
   ------------------------------------------------------------------------- */
/* Default styling for div-based summaries (like checkout page sidebar summary) */
.kspf-visualization-row {
    background-color: transparent !important;
    border: none !important;
    clear: both;
}

/* Ensure desktop td cells do not stretch columns by using proper table-cell display properties */
@media (min-width: 769px) {
    tr.kspf-visualization-row {
        display: table-row !important;
        width: auto !important;
    }
    tr.kspf-visualization-row td.kspf-vis-cell {
        display: table-cell !important;
        width: auto !important; 
        padding: 15px 0 30px 0 !important;
        border-bottom: 1px solid #e5e5e5 !important;
        box-sizing: border-box !important;
    }
}

.kspf-vis-container {
    display: flex;
    align-items: center;
    gap: 40px;
    background: #fff;
    padding: 30px;
    border-radius: 4px;
    border: 1px solid #e2e2e2;
    box-shadow: none; /* Removed shadow per mockup */
    width: 100%;
    box-sizing: border-box;
    margin: 15px 0;
}

.kspf-vis-image-col {
    flex: 0 0 160px;
    max-width: 160px;
    display: block;
}

.kspf-vis-image-wrap {
    display: flex; 
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    box-sizing: border-box !important;
    position: relative; 
    aspect-ratio: 1 / 1.414 !important; /* Default standard A-size aspect ratio */
    width: 100%;
}

.kspf-vis-image-wrap .kraess-bg-layer {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.kspf-vis-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 5px;
}

.kspf-vis-text h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.4em;
    font-weight: 600;
    color: #000;
    line-height: 1.2;
}

.kspf-vis-text ul {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.kspf-vis-text ul li {
    margin-bottom: 10px;
    color: #000;
    font-size: 1.05em;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.4;
}

.kspf-vis-text-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background-color: #2ecc71;
    color: white;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kspf-vis-text-icon svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}

.kspf-vis-text p {
    font-size: 0.85em;
    color: #444;
    margin: 0;
    line-height: 1.5;
}

/* -------------------------------------------------------------------------
   EDIT FRAMING CART LINK (NEW)
   ------------------------------------------------------------------------- */
.kspf-edit-cart-link {
    color: #777 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 0.75em !important;
    display: inline-block !important;
    margin-top: 10px !important;
    transition: color 0.2s ease !important;
}

.kspf-edit-cart-link:hover {
    color: #000 !important;
    text-decoration: none !important;
}

/*
 * Checkout Order Summary & compact container overrides
 * Checked against WooCommerce Blocks (WC 11.1.2), where
 * .wc-block-components-order-summary__content uses display: table wrapping
 * display: flex .wc-block-components-order-summary-item rows.
 */
.wc-block-components-order-summary .wc-block-components-order-summary__content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
    flex: 1 1 0%;
    min-width: 0;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
    flex-shrink: 0;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price .wc-block-components-product-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price .wc-block-formatted-money-amount {
    white-space: nowrap;
}

.wc-block-components-order-summary .kspf-visualization-row,
.wc-block-components-sidebar .kspf-visualization-row,
div.kspf-visualization-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    container-type: inline-size;
}

@media (max-width: 768px) {
    .kspf-visualization-row,
    tr.kspf-visualization-row,
    tr.kspf-visualization-row td.kspf-vis-cell {
        display: block !important;
        width: 100% !important;
        container-type: inline-size;
    }
}

@container (max-width: 480px) {
    .kspf-vis-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
        gap: 20px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .kspf-vis-image-col {
        flex: 0 0 auto !important;
        width: 140px !important;
        max-width: 140px !important;
        margin: 0 auto;
    }
    .kspf-vis-text {
        padding-top: 0;
        width: 100%;
        min-width: 0;
    }
    .kspf-vis-text h3 {
        font-size: 1.25em;
        margin-bottom: 15px;
        text-align: center;
        width: 100%;
    }
    .kspf-vis-text ul {
        width: 100%;
    }
    .kspf-vis-text ul li {
        font-size: 0.95em;
        align-items: flex-start;
        text-align: left;
        justify-content: center;
    }
    .kspf-vis-text-icon {
        margin-top: 2px;
    }
    .kspf-vis-text p {
        font-size: 0.8em;
        text-align: center;
    }
}

/* -------------------------------------------------------------------------
   TOGGLE BUTTON STYLING (NEW)
   ------------------------------------------------------------------------- */
#kspf_toggle_bg_btn,
#kspf_toggle_settings_btn,
.kspf-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: #f7f9ff;
    border: 1px solid #0031ea;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    color: #0031ea;
    margin-top: 15px;
    font-size: 14px;
    transition: all 0.2s ease;
    position: relative;
}

.kspf-secondary-btn {
    width: 60px; /* Make them same width */
}

#kspf_toggle_bg_btn:hover,
#kspf_toggle_settings_btn:hover,
.kspf-secondary-btn:hover {
    background: #0031ea;
    color: #fff !important;
}

#kspf-advice-toggle-btn {
    background: #0031ea;
    border: 1px solid #0031ea;
    color: #fff;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
    position: relative;
}

#kspf-advice-toggle-btn:hover {
    background: #0018d1;
    border-color: #0018d1;
}

.popup-size-guide, .popup-frame-guide {
    position: relative;
}

/* Settings carousel thumbnail hover effects */
.view-poster-in-setting-button:hover img {
    opacity: 1 !important;
}


/* SWATCHES SELECTION ROWS (Stacked frames & backgrounds) */
/* MODIFICATION: Wrapped master flex list inside .kspf-scroll-wrapper container */
.kspf-scroll-wrapper {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
}

#frameforpostermasterdiv,
#bgforpostermasterdiv,
#kspf-settings-scroll-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important; /* Prevent vertical layout shifting */
    gap: 12px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Explicitly prevent massive flex gaps */
    cursor: grab;
    scrollbar-width: inherit !important;
}
#frameforpostermasterdiv,
#bgforpostermasterdiv {
    padding-left: 3px !important;
}

/* -------------------------------------------------------------------------
   ROOM SETTINGS THUMBNAILS (NEW)
   ------------------------------------------------------------------------- */
.view-poster-in-setting-button-remove {
    padding-left: 1px !important;
}

.kspf-setting-btn {
    flex: 0 0 auto !important;
    height: 62px !important;
    width: max-content !important;
    display: block !important;
    background: transparent !important;
    cursor: pointer !important;
}

.kspf-setting-img,
.kspf-setting-img-remove {
    height: 62px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
    transition: opacity 0.2s, outline 0.2s !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
}

.kspf-setting-img-remove,
.kspf-setting-img {
    outline: 1px solid #ccc;
    opacity: 0.6;
}

.active-setting .kspf-setting-img,
.active-setting .kspf-setting-img-remove {
    outline: 2px solid #000 !important;
    opacity: 1 !important;
}

.kspf-setting-btn:hover .kspf-setting-img,
.kspf-setting-btn:hover .kspf-setting-img-remove {
    opacity: 1 !important;
}

/* MODIFICATION: Remove margin-left completely from master frame div on customization-active pages */
.kraess-framer-active #frameforpostermasterdiv {
    margin-left: 0px !important;
}

#frameforpostermasterdiv.dragging,
#bgforpostermasterdiv.dragging,
#kspf-settings-scroll-wrapper.dragging {
    cursor: grabbing;
}

/* Prevent image ghost dragging on desktop click scroll */
#frameforpostermasterdiv img,
#bgforpostermasterdiv img,
#kspf-settings-scroll-wrapper img {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* Sleek, Modern, and Ultra Minimalist Scrollbar Design */
#frameforpostermasterdiv::-webkit-scrollbar,
#bgforpostermasterdiv::-webkit-scrollbar,
#kspf-settings-scroll-wrapper::-webkit-scrollbar {
    height: 5px !important; /* Sleek minimal thickness */
}
#frameforpostermasterdiv::-webkit-scrollbar-track,
#bgforpostermasterdiv::-webkit-scrollbar-track,
#kspf-settings-scroll-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03) !important; /* Subtle, soft track background */
    border-radius: 10px !important;
}
#frameforpostermasterdiv::-webkit-scrollbar-thumb,
#bgforpostermasterdiv::-webkit-scrollbar-thumb,
#kspf-settings-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 49, 234, 0.3) !important; /* Translucent blue thumb */
    border-radius: 10px !important;
    border: none !important;
    transition: background-color 0.25s ease-in-out !important;
}
#frameforpostermasterdiv::-webkit-scrollbar-thumb:hover,
#bgforpostermasterdiv::-webkit-scrollbar-thumb:hover,
#kspf-settings-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 49, 234, 0.8) !important; /* Solidifies on hover */
}

/* -------------------------------------------------------------------------
   MODIFICATION 2: RESPONSIVE OVERLAY SCROLL NAVIGATION ARROWS
   ------------------------------------------------------------------------- */
.kspf-scroll-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 26px !important;
    height: 26px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #ccc !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 100 !important;
    font-weight: bold !important;
    font-size: 16px !important;
    color: #0031ea !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
    user-select: none !important;
}

.kspf-scroll-arrow.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.kspf-scroll-arrow:hover {
    background-color: #0031ea !important;
    color: #fff !important;
    border-color: #0031ea !important;
}

.kspf-arrow-left {
    left: -6px !important;
}

.kspf-arrow-right {
    right: -6px !important;
}

/* Hide all size options by default, except the 'Ohne' placeholder options */
.frameforproductpage,
.bgforproductpage {
    display: none !important;
    flex: 0 0 auto !important;
    width: 62px !important;
    height: 62px !important;
    background-color: #fff !important;
    border-radius: 50% !important;
    position: relative !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    overflow: visible !important;
    /* MODIFICATION: Thin borders on default swatches with elegant subtle shadow, no thick borders */
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}

.frameforproductpage.kpc-visible,
.bgforproductpage.kpc-visible {
    display: flex !important; /* Show matched variations */
}

/* Always show placeholder options */
.frameforproductpage[framesize="noframe"],
.bgforproductpage[bgsize="nobg"] {
    display: flex !important;
}

/* -------------------------------------------------------------------------
   FORCE NEUTRALIZE LEGACY THEME HOVERS ON INACTIVE ITEMS
   This fixes the "sticky hover" bug on mobile that broke flex layouts
   ------------------------------------------------------------------------- */
.frameforproductpage:not(.active-frame):hover,
.bgforproductpage:not(.active-bg):hover {
    border-color: #ddd !important;
    transform: scale(1) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}
.frameforproductpage:not(.active-frame):hover .frameforposterdivtext,
.bgforproductpage:not(.active-bg):hover .bgforposterdivtext {
    display: none !important;
}
.bgforproductpage:not(.active-bg):hover .bgcolorswatch,
.bgforproductpage:not(.active-bg):hover .bgforposterdivimage,
.frameforproductpage:not(.active-frame):hover .frameforposterdivimage {
    transform: scale(1) !important;
}

/* -------------------------------------------------------------------------
   RESTRICT HOVER STATES TO NON-TOUCH DEVICES
   ------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .frameforproductpage:not(.active-frame):hover,
    .bgforproductpage:not(.active-bg):hover {
        transform: scale(1.05) !important;
        border-color: #0031ea !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    }

    /* Do not scale active options on hover to prevent text/image shifting */
    .frameforproductpage.active-frame:hover,
    .bgforproductpage.active-bg:hover {
        transform: none !important;
    }
}

/* Narrower white circle margin: Increase inner image width/height from 54px to 56px */
.frameforproductpage .frameforposterdivimage,
.bgcolorswatch {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    transition: transform 0.15s ease !important;
    object-fit: cover !important;
}

/* Completely hide active and inactive checkmarks */
.frameselectedindicator,
.bgselectedindicator {
    display: none !important;
}

/* -------------------------------------------------------------------------
   ALWAYS CIRCULAR SWATCHES WITH OVERLAID ACTIVE TEXT
   ------------------------------------------------------------------------- */
/* MODIFICATION: Thin borders on active items with elegant shadow surrounding the circle */
.bgforproductpage.active-bg,
.frameforproductpage.active-frame {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    background-color: #fff !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px solid #0031ea !important; /* Pristine simple border, not thick */
    box-shadow: none !important;
}

.bgforproductpage.active-bg .bgcolorswatch,
.bgforproductpage.active-bg .bgforposterdivimage,
.frameforproductpage.active-frame .frameforposterdivimage {
    transform: scale(0.9) !important;
}

@media (hover: hover) and (pointer: fine) {
    .bgforproductpage:not(.active-bg):hover .bgcolorswatch,
    .bgforproductpage:not(.active-bg):hover .bgforposterdivimage,
    .frameforproductpage:not(.active-frame):hover .frameforposterdivimage {
        transform: scale(0.9) !important;
    }
}

/* Center overlay text vertically and horizontally, clearing legacy child-theme styles completely */
.bgforproductpage .bgforposterdivtext,
.frameforproductpage .frameforposterdivtext {
    box-sizing: border-box !important;
    display: none !important;
}

.bgforproductpage.active-bg .bgforposterdivtext,
.frameforproductpage.active-frame .frameforposterdivtext {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* MODIFICATION 1: Less opaque overlay back-layer (rgba 0.50 opacity instead of 0.85/0.65) */
    background: rgba(0, 0, 0, 0.5) !important; 
    color: #fff !important;
    font-size: 9px !important; /* Constrains the font-size stable, won't enlarge on hover */
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    border-radius: 50% !important;
    padding: 4px !important;
    max-width: 100% !important;
    white-space: normal !important;
    pointer-events: none !important;
    z-index: 99 !important;
    transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .bgforproductpage:not(.active-bg):hover .bgforposterdivtext,
    .frameforproductpage:not(.active-frame):hover .frameforposterdivtext {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important; 
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        border-radius: 50% !important;
        padding: 4px !important;
        max-width: 100% !important;
        white-space: normal !important;
        pointer-events: none !important;
        z-index: 99 !important;
        transform: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
}

/* Insulate child elements inside the circular labels from breaking layouts */
.bgforposterdivtext * {
    font-size: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
    display: inline !important;
}

/* Ohne Frame and Ohne Background placeholder text swatches styling */
.frameforposterdivimage-text-placeholder,
.bgforposterdivimage-text-placeholder {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    background-color: #fdfdfd !important;
    color: #444 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    transition: transform 0.15s ease !important;
    word-break: break-word !important;
    text-transform: uppercase !important;
}

/* Hide hover/active overlay text indicators completely for text swatches to avoid redundancy */
.frameforproductpage[framesize="noframe"] .frameforposterdivtext,
.frameforproductpage[framesize="noframe"]:hover .frameforposterdivtext,
.frameforproductpage[framesize="noframe"].active-frame .frameforposterdivtext,
.bgforproductpage[bgsize="nobg"] .bgforposterdivtext,
.bgforproductpage[bgsize="nobg"]:hover .bgforposterdivtext,
.bgforproductpage[bgsize="nobg"].active-bg .bgforposterdivtext {
    display: none !important;
}

#bg_text_title {
    color: #777;
    font-size: 15px;
    margin-top: 15px;
    margin-bottom: 5px;
}

/* Remove / hide the framing row title text elements completely */
.frame_text_product_page,
.bg_text_product_page {
    display: none !important;
}

/* Mobile Swatch optimization styling */
@media (max-width: 768px) {
    #frameforpostermasterdiv,
    #bgforpostermasterdiv,
    #kspf-settings-scroll-wrapper {
        padding-left: 10px !important;
    }
}

/* -------------------------------------------------------------------------
   PASSEPARTOUT LABELS AND HEADER DIVIDERS (NEW)
   ------------------------------------------------------------------------- */
/* Divider text for Passepartouts inside background row */
.kspf-swatch-divider-text {
    display: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #777 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    margin: 0 4px !important;
    align-self: center !important;
}
.kspf-swatch-divider-text.kpc-visible {
    display: inline-block !important;
}

/* Inactive Passepartout swatches show their text as a clean, subtle dark overlay so visitors can read the type */
.bgforproductpage[bgtype="passepartout"]:not(.active-bg):not(:hover) .bgforposterdivtext {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.75) !important; /* Soft white mask so the circle color is visible under the dark text */
    color: #111 !important;
    font-size: 7.5px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    border-radius: 50% !important;
    padding: 4px !important;
    max-width: 100% !important;
    white-space: normal !important;
    pointer-events: none !important;
    z-index: 98 !important;
    text-transform: uppercase !important;
}

/* Fix layout jump for + sign on hover */
.frameforproductpage.active-frame:hover .frameforposterdivtext {
    display: flex !important;
    flex-direction: column !important;
}
.frameforposterdivtext span {
    display: inline-block !important;
}

/* ====================================================
   BUTTON CONSOLIDATION & STYLING 
==================================================== */

.kspf-loop-buttons-container > div {
    flex: 1; /* Both buttons split the space 50/50 on mobile */
}

.addtoposterwallbuttonloopheader,
.addtoposterwallbuttonloopheadersimple {
    margin: 0;
    padding: 4px 2px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: clamp(9px, 2.5vw, 13px);
    white-space: nowrap;
    border: 1px solid #d1d1d1;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 1px;
    position: relative; /* For tooltip alignment */
}

.addtoposterwallbuttonloopheader:hover,
.addtoposterwallbuttonloopheadersimple:hover {
    border-color: #454545;
}

/* Ensure product page buttons are responsive and relative for tooltip alignment */
.addtoposterwallbuttonproductpageheader,
.addtoposterwallbuttonproductpageheadersimple {
    position: relative;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Make product page button wrappers flex to keep icon and text inline */
.addtoposterwallbuttonproductpage,
.addtoposterwallbuttonproductpagesimple {
    display: flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: clamp(9px, 2.5vw, 12px) !important;
    padding-left: 0 !important; /* Reset padding to balance center */
}

/* Customize Button Tooltip Alignment */
.customize_button_product_page {
    position: relative;
}

/* Tooltip perfectly centered above the button */
/* Tooltip perfectly centered above the button */
.addtoposterwallbuttonloopheader .tooltiptext,
.addtoposterwallbuttonloopheadersimple .tooltiptext,
.addtoposterwallbuttonproductpageheader .tooltiptext,
.addtoposterwallbuttonproductpageheadersimple .tooltiptext,
.customize_button_product_page .tooltiptext,
#kspf_toggle_bg_btn .tooltiptext,
#kspf_toggle_settings_btn .tooltiptext,
.kspf-secondary-btn .tooltiptext,
#kspf-advice-toggle-btn .tooltiptext,
.kspf-popular-suggestion .tooltiptext,
#kspf-feel-lucky .tooltiptext,
#kspf-ai-advisor .tooltiptext,
.popup-size-guide .tooltiptext,
.popup-frame-guide .tooltiptext {
    font-size: 12px;
    font-weight: 400;
    white-space: normal; /* Override parent nowrap */
    visibility: hidden;
    opacity: 0;
    width: 160px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;
    position: absolute;
    z-index: 999;
    bottom: 120%; /* Position above */
    left: 50%;
    margin-left: -80px; /* Center horizontally (half of 160px) */
    transition: opacity 0.2s ease;
    pointer-events: none; /* Prevent flickering */
    text-transform: none !important; /* No capital letters */
}

/* Tooltip caret (arrow) pointing down */
.addtoposterwallbuttonloopheader .tooltiptext::after,
.addtoposterwallbuttonloopheadersimple .tooltiptext::after,
.addtoposterwallbuttonproductpageheader .tooltiptext::after,
.addtoposterwallbuttonproductpageheadersimple .tooltiptext::after,
.customize_button_product_page .tooltiptext::after,
#kspf_toggle_bg_btn .tooltiptext::after,
#kspf_toggle_settings_btn .tooltiptext::after,
.kspf-secondary-btn .tooltiptext::after,
#kspf-advice-toggle-btn .tooltiptext::after,
.kspf-popular-suggestion .tooltiptext::after,
#kspf-feel-lucky .tooltiptext::after,
#kspf-ai-advisor .tooltiptext::after,
.popup-size-guide .tooltiptext::after,
.popup-frame-guide .tooltiptext::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

@media (min-width: 768px) {
    .addtoposterwallbuttonloop:hover .tooltiptext,
    .addtoposterwallbuttonloopsimple:hover .tooltiptext,
    .addtoposterwallbuttonproductpage:hover .tooltiptext,
    .addtoposterwallbuttonproductpagesimple:hover .tooltiptext,
    .customize_button_product_page:hover .tooltiptext,
    #kspf_toggle_bg_btn:hover .tooltiptext,
    #kspf_toggle_settings_btn:hover .tooltiptext,
    .kspf-secondary-btn:hover .tooltiptext,
    #kspf-advice-toggle-btn:hover .tooltiptext,
    .kspf-popular-suggestion:hover .tooltiptext,
    #kspf-feel-lucky:hover .tooltiptext,
    #kspf-ai-advisor:hover .tooltiptext,
    .popup-size-guide:hover .tooltiptext,
    .popup-frame-guide:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    /* Hide Quick View buttons on desktop */
    .addtoposterwallbuttonloopsimple,
    .addtoposterwallbuttonproductpagesimple {
        display: none !important;
    }

    /* Expand Art Wall product page button to match Montage Background button width on desktop */
    .addtoposterwallbuttonproductpage {
        width: 99% !important;
        margin: 0 auto !important;
    }

    /* Prevent Art Wall loop button from expanding to 100% when alone */
    .kspf-loop-buttons-container > div {
        flex: 0 1 auto;
        min-width: 60%;
    }
}

@media (min-width: 1272px) {
    .addtoposterwallbuttonproductpage {
        width: 49% !important;
        display: inline-flex !important;
        margin: 0 !important;
    }
}


/* -------------------------------------------------------------------------
   POSTER SIZE SWATCH BOX ALIGNMENT (.variable-item)
   Overrides legacy #wp-custom-css negative margins/-webkit-inline-box and
   gives compact sizes (especially A5) clean optical breathing room.
   ------------------------------------------------------------------------- */
body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 2px !important;
    box-sizing: border-box !important;
}

body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item .variable-item-contents {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 3px;
    text-align: center !important;
}

body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item .variable-item-span {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}

body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item .variation-price-text {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12.5px;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
}

/* Proportional A-series staircase: A5 (36x51) -> A4 (43x61) -> A3 (50x71) */
body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item.button-variable-item-a5 {
    width: 36px !important;
    min-width: 36px !important;
    height: 51px !important;
    padding: 2px 1px !important;
}

body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item.button-variable-item-a5 .variable-item-contents {
    gap: 2px;
}

body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item.button-variable-item-a5 .variable-item-span {
    font-size: 13px;
}

body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item.button-variable-item-a5 .variation-price-text {
    font-size: 10.5px;
}

body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item.button-variable-item-a4 {
    width: 43px !important;
    min-width: 43px !important;
    height: 61px !important;
    padding: 2px !important;
}

body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item.button-variable-item-a4 .variable-item-contents {
    gap: 2px;
}

body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item.button-variable-item-a4 .variable-item-span {
    font-size: 14.5px;
}

body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item.button-variable-item-a4 .variation-price-text {
    font-size: 11.5px;
}

body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item.button-variable-item-a3 .variable-item-span {
    font-size: 15px;
}

body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item.button-variable-item-a3 .variation-price-text {
    font-size: 12px;
}

body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item.button-variable-item-30x30 .variable-item-span,
body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item.button-variable-item-30x40 .variable-item-span {
    font-size: 13.5px;
}

body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item.button-variable-item-30x30 .variation-price-text,
body.single-product.woo-variation-swatches div.product.product_cat-alle-plakater form.variations_form .variable-items-wrapper .variable-item:not(.radio-variable-item):not(.disabled):not(.variation-disabled).button-variable-item.button-variable-item-30x40 .variation-price-text {
    font-size: 11.5px;
}