/**
 * Frontend Styles for Weblut Woo Builder
 * 100% DESIGN FREEDOM VERSION
 */

/* ==========================================================================
   1. GLOBAL GRID SYSTEM
   ========================================================================== */
html body .woocommerce ul.products,
html body ul.products {
    display: grid !important;
    grid-template-columns: repeat(var(--wlc-cols-desktop, 4), 1fr) !important;
    gap: var(--wlc-grid-gap, 20px) !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .woocommerce ul.products::before,
html body .woocommerce ul.products::after,
html body ul.products::before,
html body ul.products::after {
    display: none !important;
}

@media (max-width: 1024px) {
    html body .woocommerce ul.products, html body ul.products {
        grid-template-columns: repeat(var(--wlc-cols-tablet, 3), 1fr) !important;
    }
}

@media (max-width: 768px) {
    html body .woocommerce ul.products, html body ul.products {
        grid-template-columns: repeat(var(--wlc-cols-mobile, 2), 1fr) !important;
    }
}

/* ==========================================================================
   2. LIST LAYOUT (Horizontal)
   ========================================================================== */
html body.wlc-layout-list .woocommerce ul.products,
html body.wlc-layout-list ul.products {
    grid-template-columns: 1fr !important;
}

html body.wlc-layout-list .wlc-product-card {
    flex-direction: row !important;
}

html body.wlc-layout-list .wlc-product-card .wlc-image-wrapper {
    width: 30% !important;
    max-width: 300px !important;
}

@media (max-width: 768px) {
    html body.wlc-layout-list .wlc-product-card {
        flex-direction: column !important;
    }
    html body.wlc-layout-list .wlc-product-card .wlc-image-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   3. PRODUCT CARD CONTAINER
   ========================================================================== */
html body .wlc-product-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    background-color: var(--wlc-card-bg, #ffffff) !important;
    color: var(--wlc-text-color, #333333) !important;
    border-radius: var(--wlc-border-radius, 8px) !important;
    border: var(--wlc-border-width, 0px) solid var(--wlc-border-color, transparent) !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    overflow: visible !important; 
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease !important;
    position: relative !important;
    font-family: var(--wlc-font-family, inherit) !important;
    list-style: none !important;
}

html body .wlc-product-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--wlc-border-hover-color, transparent) !important;
    transform: var(--wlc-hover-animation, translateY(-5px)) !important; /* ТУТ АНІМАЦІЯ КАРТКИ */
    z-index: 20 !important;
}

/* ==========================================================================
   4. IMAGE & SLOTS (ABSOLUTE FREEDOM)
   ========================================================================== */
html body .wlc-product-card .wlc-image-wrapper {
    position: relative !important;
    overflow: visible !important; 
    flex-shrink: 0 !important;
    width: 100% !important;
}

html body .wlc-product-card .wlc-product-image-link {
    display: block !important;
    width: 100% !important;
}

html body .wlc-product-card .wlc-product-image-link img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
    margin: 0 !important;
    border-top-left-radius: var(--wlc-border-radius, 8px) !important;
    border-top-right-radius: var(--wlc-border-radius, 8px) !important;
}

html body .wlc-product-card:hover .wlc-product-image-link img {
    transform: scale(1.03) !important;
}

html body .wlc-product-card .wlc-slot-image-top-left,
html body .wlc-product-card .wlc-slot-image-top-right { 
    position: absolute !important; 
    z-index: 10 !important; 
    overflow: visible !important;
    pointer-events: auto !important;
}

html body .wlc-product-card .wlc-slot-image-top-left { top: 0 !important; left: 0 !important; }
html body .wlc-product-card .wlc-slot-image-top-right { top: 0 !important; right: 0 !important; }

html body .wlc-product-card .wlc-slot-hover-overlay {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    border-top-left-radius: var(--wlc-border-radius, 8px) !important;
    border-top-right-radius: var(--wlc-border-radius, 8px) !important;
}

html body .wlc-product-card:hover .wlc-slot-hover-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   5. CONTENT WRAPPER
   ========================================================================== */
html body .wlc-product-card .wlc-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 15px !important;
    background: transparent !important;
}

html body .wlc-product-card .wlc-product-title-link {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

html body .wlc-product-card h2.wlc-product-title,
html body .wlc-product-card .wlc-product-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    color: var(--wlc-text-color, #333333) !important;
    transition: color 0.2s ease !important;
    font-family: var(--wlc-font-family, inherit) !important;
}

html body .wlc-product-card .wlc-product-title-link:hover .wlc-product-title {
    color: var(--wlc-accent-color, #e0a240) !important;
}

html body .wlc-product-card .wlc-product-price {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--wlc-accent-color, #e0a240) !important;
    margin-bottom: 15px !important;
}

/* ==========================================================================
   6. ACTION WRAPPER & CART BUTTON
   ========================================================================== */
html body .wlc-product-card .wlc-action-wrapper {
    margin-top: auto !important;
    padding: 0 15px 15px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

html body .wlc-product-card .wlc-action-wrapper a.wlc-btn-cart,
html body .wlc-product-card .wlc-action-wrapper a.button.add_to_cart_button,
html body .wlc-product-card .wlc-action-wrapper a.woocommerce-button,
html body .wlc-product-card .wlc-action-wrapper button.add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    background-color: var(--wlc-gbtn-bg, #000000) !important;
    color: var(--wlc-gbtn-text, #ffffff) !important;
    border-radius: var(--wlc-gbtn-radius, 8px) !important;
    border: var(--wlc-gbtn-border, none) !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    font-family: var(--wlc-font-family, inherit) !important;
    box-sizing: border-box !important;
    line-height: normal !important;
}

html body .wlc-product-card .wlc-action-wrapper a.wlc-btn-cart:hover,
html body .wlc-product-card .wlc-action-wrapper a.button.add_to_cart_button:hover {
    background-color: var(--wlc-gbtn-hbg, #333333) !important;
    color: var(--wlc-gbtn-htext, #ffffff) !important;
    border-color: var(--wlc-gbtn-hbc, transparent) !important;
    transform: var(--wlc-gbtn-anim, translateY(-2px)) !important; /* ТУТ АНІМАЦІЯ КНОПКИ */
    opacity: 1 !important;
}

@media (max-width: 768px) {
    html body .wlc-product-card .wlc-action-wrapper a.wlc-btn-cart,
    html body .wlc-product-card .wlc-action-wrapper a.button.add_to_cart_button {
        padding: 10px 15px !important;
    }
}

/* ==========================================================================
   7. LOAD MORE BUTTON (AJAX)
   ========================================================================== */
.wlc-load-more-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 40px 0 !important;
    grid-column: 1 / -1 !important; 
}

.wlc-load-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--wlc-gbtn-bg, #000000) !important;
    color: var(--wlc-gbtn-text, #ffffff) !important;
    border: var(--wlc-gbtn-border, none) !important;
    border-radius: var(--wlc-gbtn-radius, 8px) !important;
    padding: 15px 40px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: var(--wlc-font-family, inherit) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

.wlc-load-more-btn:hover {
    background-color: var(--wlc-gbtn-hbg, #333333) !important;
    color: var(--wlc-gbtn-htext, #ffffff) !important;
    border-color: var(--wlc-gbtn-hbc, transparent) !important;
    transform: var(--wlc-gbtn-anim, translateY(-2px)) !important; /* ТУТ АНІМАЦІЯ LOAD MORE */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

/* ==========================================================================
   8. SINGLE PRODUCT BUILDER & GALLERY CSS
   ========================================================================== */
html body .wlc-single-product-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    font-family: var(--wlc-font-family, inherit) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    margin: 0 auto !important;
}

html body .wlc-single-top-block {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; 
    gap: 40px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important; 
}

html body .wlc-single-summary {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body .wlc-builder-block { 
    position: relative !important; 
    width: 100% !important; 
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important; 
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

html body .wlc-builder-block > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* -----------------------------------------
   GALLERY MAGIC 
----------------------------------------- */
html body.single-product #content .woocommerce div.product div.images,
html body.single-product #main .woocommerce div.product div.images,
html body.single-product .woocommerce div.product div.images,
html body.single-product .woocommerce-page div.product div.images,
html body.single-product .woocommerce #content div.product div.images,
html body.single-product .woocommerce-page #content div.product div.images {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.single-product .wlc-single-gallery .woocommerce-product-gallery {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--wlc-gal-gap, 10px) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

html body.single-product .wlc-single-gallery .woocommerce-product-gallery > div.flex-viewport,
html body.single-product .wlc-single-gallery .woocommerce-product-gallery > figure.woocommerce-product-gallery__wrapper {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--wlc-gal-radius, 8px) !important;
    box-shadow: var(--wlc-gal-shadow, 0 4px 15px rgba(0,0,0,0.05)) !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html body.single-product .wlc-single-gallery .woocommerce-product-gallery__image img {
    width: 100% !important;
    max-width: 100% !important; 
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

html body.single-product .wlc-single-gallery .woocommerce-product-gallery > ol.flex-control-nav.flex-control-thumbs {
    flex: 0 0 var(--wlc-gal-thumb-size, 80px) !important;
    width: var(--wlc-gal-thumb-size, 80px) !important;
    max-width: var(--wlc-gal-thumb-size, 80px) !important;
    display: flex !important;
    gap: var(--wlc-gal-gap, 10px) !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
}

html body.single-product .wlc-single-gallery ol.flex-control-nav.flex-control-thumbs li {
    width: var(--wlc-gal-thumb-size, 80px) !important;
    height: var(--wlc-gal-thumb-size, 80px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    float: none !important;
    clear: none !important;
    flex-shrink: 0 !important;
}

html body.single-product .wlc-single-gallery ol.flex-control-nav.flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: var(--wlc-gal-thumb-radius, 4px) !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    margin: 0 !important;
    opacity: 0.5 !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

html body.single-product .wlc-single-gallery ol.flex-control-nav.flex-control-thumbs li img:hover,
html body.single-product .wlc-single-gallery ol.flex-control-nav.flex-control-thumbs li img.flex-active {
    opacity: 1 !important;
    border-color: var(--wlc-accent-color, #e0a240) !important;
}

/* Галерея: ЗНИЗУ (BOTTOM) */
html body.single-product.wlc-gal-pos-bottom .wlc-single-gallery .woocommerce-product-gallery {
    flex-direction: column !important;
    align-items: stretch !important; 
}
html body.single-product.wlc-gal-pos-bottom .wlc-single-gallery > div.flex-viewport,
html body.single-product.wlc-gal-pos-bottom .wlc-single-gallery > figure.woocommerce-product-gallery__wrapper {
    width: 100% !important;
}
html body.single-product.wlc-gal-pos-bottom .wlc-single-gallery ol.flex-control-nav.flex-control-thumbs {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important; 
    width: 100% !important;
    max-width: 100% !important;
    /* 👇 ОСЬ ВІН, ФІКС ВІДЗІРВАНИХ КАРТИНОК 👇 */
    flex: none !important; 
    height: auto !important; 
    overflow: visible !important;
}

/* ==========================================================================
   ГАЛЕРЕЯ: ЗЛІВА ТА СПРАВА (ВЕРТИКАЛЬНИЙ СКРОЛЛ-СЛАЙДЕР)
   ========================================================================== */

/* 1. Розширюємо контейнер галереї, щоб головне фото не зменшувалось через мініатюри */
html body.single-product.wlc-gal-pos-left .wlc-single-top-block,
html body.single-product.wlc-gal-pos-right .wlc-single-top-block {
    grid-template-columns: 1.3fr 1fr !important; /* Галерея отримує більше місця */
}

/* Галерея: ЗЛІВА (LEFT) */
html body.single-product.wlc-gal-pos-left .wlc-single-gallery .woocommerce-product-gallery {
    display: block !important; 
    position: relative !important;
    /* Робимо відступ зліва рівно на ширину мініатюри + відступ */
    padding-left: calc(var(--wlc-gal-thumb-size, 80px) + var(--wlc-gal-gap, 10px)) !important;
}
html body.single-product.wlc-gal-pos-left .wlc-single-gallery > div.flex-viewport,
html body.single-product.wlc-gal-pos-left .wlc-single-gallery > figure.woocommerce-product-gallery__wrapper {
    width: 100% !important;
    max-width: 100% !important;
}
html body.single-product.wlc-gal-pos-left .wlc-single-gallery ol.flex-control-nav.flex-control-thumbs {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100% !important; /* Жорстко висота головного фото */
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-y: auto !important; /* Вмикаємо скролл */
    overflow-x: hidden !important;
    scrollbar-width: none !important; /* Ховаємо скролбар (Firefox) */
    -ms-overflow-style: none !important; /* IE 10+ */
}

/* Галерея: СПРАВА (RIGHT) */
html body.single-product.wlc-gal-pos-right .wlc-single-gallery .woocommerce-product-gallery {
    display: block !important; 
    position: relative !important;
    /* Робимо відступ справа рівно на ширину мініатюри + відступ */
    padding-right: calc(var(--wlc-gal-thumb-size, 80px) + var(--wlc-gal-gap, 10px)) !important;
}
html body.single-product.wlc-gal-pos-right .wlc-single-gallery > div.flex-viewport,
html body.single-product.wlc-gal-pos-right .wlc-single-gallery > figure.woocommerce-product-gallery__wrapper {
    width: 100% !important;
    max-width: 100% !important;
}
html body.single-product.wlc-gal-pos-right .wlc-single-gallery ol.flex-control-nav.flex-control-thumbs {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important; /* Притискаємо вправо */
    left: auto !important;
    bottom: 0 !important;
    height: 100% !important; /* Жорстко висота головного фото */
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-y: auto !important; /* Вмикаємо скролл */
    overflow-x: hidden !important;
    scrollbar-width: none !important; /* Ховаємо скролбар (Firefox) */
    -ms-overflow-style: none !important;
}

/* Ховаємо потворний скролбар для Chrome/Safari/Edge, але залишаємо можливість скролити мишкою/пальцем */
html body.single-product .wlc-single-gallery ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
    display: none !important; 
}
/* ==========================================================================
   9. GLOBAL BUTTONS & INPUTS
   ========================================================================== */

html body .woocommerce a.button, 
html body .woocommerce button.button, 
html body .woocommerce input.button,
html body .woocommerce #respond input#submit {
    background-color: var(--wlc-gbtn-bg, #000000) !important;
    color: var(--wlc-gbtn-text, #ffffff) !important;
    border: var(--wlc-gbtn-border, none) !important;
    border-radius: var(--wlc-gbtn-radius, 8px) !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    font-family: var(--wlc-font-family, inherit) !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-align: center !important;
}

html body .woocommerce a.button:hover, 
html body .woocommerce button.button:hover, 
html body .woocommerce input.button:hover,
html body .woocommerce #respond input#submit:hover {
    background-color: var(--wlc-gbtn-hbg, #333333) !important;
    color: var(--wlc-gbtn-htext, #ffffff) !important;
    border-color: var(--wlc-gbtn-hbc, transparent) !important;
    transform: var(--wlc-gbtn-anim, translateY(-2px)) !important; /* ТУТ АНІМАЦІЯ ГЛОБАЛЬНОЇ КНОПКИ */
}

html body .woocommerce input[type="text"], 
html body .woocommerce input[type="email"], 
html body .woocommerce input[type="tel"], 
html body .woocommerce input[type="password"], 
html body .woocommerce textarea, 
html body .woocommerce select {
    background-color: var(--wlc-inp-bg, #ffffff) !important;
    color: var(--wlc-inp-text, #333333) !important;
    border: var(--wlc-inp-border, 1px solid #ddd) !important;
    border-radius: var(--wlc-inp-radius, 4px) !important;
    padding: 12px 15px !important;
    transition: all 0.3s ease !important;
    font-family: var(--wlc-font-family, inherit) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

html body .woocommerce input[type="text"]:focus, 
html body .woocommerce input[type="email"]:focus, 
html body .woocommerce textarea:focus,
html body .woocommerce select:focus {
    outline: none !important;
    box-shadow: var(--wlc-inp-focus, 0 0 5px rgba(34,113,177,0.5)) !important;
    border-color: transparent !important;
}

/* ==========================================================================
   10. CART & CHECKOUT BUILDER GRIDS
   ========================================================================== */
.wlc-cart-builder-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    font-family: var(--wlc-font-family, inherit) !important;
}

.wlc-checkout-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    align-items: flex-start !important;
    font-family: var(--wlc-font-family, inherit) !important;
}

.wlc-checkout-left, .wlc-checkout-right {
    flex: 1 1 45% !important;
    min-width: 0 !important; 
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}

html body .wlc-checkout-wrapper .col2-set,
html body .wlc-checkout-wrapper .col-1,
html body .wlc-checkout-wrapper .col-2,
html body .wlc-checkout-wrapper #order_review_heading,
html body .wlc-checkout-wrapper #order_review {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   11. CART BUILDER GRID
   ========================================================================== */
.wlc-cart-builder-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    font-family: var(--wlc-font-family, inherit) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.wlc-cart-top-block {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.wlc-cart-left {
    flex: 1 1 60% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}

.wlc-cart-right {
    flex: 1 1 30% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}

.wlc-cart-bottom {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}

html body .woocommerce .wlc-cart-builder-wrapper .cart-collaterals,
html body .woocommerce-page .wlc-cart-builder-wrapper .cart-collaterals,
html body .wlc-cart-builder-wrapper .cart-collaterals .cart_totals {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   12. МОБІЛЬНА АДАПТАЦІЯ
   ========================================================================== */
@media (max-width: 1024px) {
    #page html body .woocommerce .wlc-single-product-wrapper .wlc-single-top-block,
    html body .wlc-single-product-wrapper .wlc-single-top-block { 
        display: grid !important; 
        grid-template-columns: minmax(0, 1fr) !important; 
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 30px !important;
        margin: 0 auto !important; 
    }
    
    html body .woocommerce .wlc-single-product-wrapper .wlc-single-gallery,
    html body .wlc-single-product-wrapper .wlc-single-gallery {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 auto !important; 
        box-sizing: border-box !important;
    }

    html body .woocommerce .wlc-single-product-wrapper .wlc-single-summary,
    html body .wlc-single-product-wrapper .wlc-single-summary {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 auto !important; 
        box-sizing: border-box !important;
    }
    
    html body.single-product.wlc-gal-pos-left .wlc-single-gallery .woocommerce-product-gallery,
    html body.single-product.wlc-gal-pos-right .wlc-single-gallery .woocommerce-product-gallery { 
        flex-direction: column !important; 
        align-items: stretch !important;
        width: 100% !important;
    }
    
    html body.single-product.wlc-gal-pos-left .wlc-single-gallery > div.flex-viewport,
    html body.single-product.wlc-gal-pos-left .wlc-single-gallery > figure.woocommerce-product-gallery__wrapper,
    html body.single-product.wlc-gal-pos-right .wlc-single-gallery > div.flex-viewport,
    html body.single-product.wlc-gal-pos-right .wlc-single-gallery > figure.woocommerce-product-gallery__wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    html body.single-product.wlc-gal-pos-left .wlc-single-gallery ol.flex-control-nav.flex-control-thumbs,
    html body.single-product.wlc-gal-pos-right .wlc-single-gallery ol.flex-control-nav.flex-control-thumbs { 
        flex-direction: row !important; 
        flex-wrap: wrap !important; 
        width: 100% !important; 
        max-width: 100% !important;
        justify-content: flex-start !important; 
    }

    .wlc-cart-top-block,
    .wlc-checkout-wrapper {
        flex-direction: column !important;
    }
    .wlc-cart-left, .wlc-cart-right,
    .wlc-checkout-left, .wlc-checkout-right {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}
/* ==========================================================================
   13. FLOATING ICONS (ПЛАВАЮЧІ КНОПКИ)
   ========================================================================== */
.wlc-floating-container {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    width: 100%;
    height: 0; /* Виправлено: контейнер не перекриватиме кліки по сайту */
    left: 0;
    top: 0;
}

.wlc-float-pos-top .wlc-floating-zone { top: var(--wlc-float-margin, 20px); }
.wlc-float-pos-bottom .wlc-floating-zone { bottom: var(--wlc-float-margin, 20px); }
.wlc-float-pos-center .wlc-floating-zone {
    top: 50vh;
    transform: translateY(-50%);
}

.wlc-floating-zone {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 15px;
    pointer-events: auto; /* Тільки іконки ловлять кліки */
}

.wlc-floating-left { left: var(--wlc-float-margin, 20px); }
.wlc-floating-right { right: var(--wlc-float-margin, 20px); }

.wlc-float-item {
    width: var(--wlc-float-size, 50px) !important;
    height: var(--wlc-float-size, 50px) !important;
    background-color: var(--wlc-float-bg, #ffffff) !important;
    color: var(--wlc-float-color, #333333) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease !important;
    overflow: visible !important; /* Виправлено для лічильника */
    cursor: pointer !important;
    font-size: calc(var(--wlc-float-size, 50px) * 0.4) !important;
    border: none !important;
    padding: 0 !important;
    position: relative !important;
}

/* ЗАХИСТ І ВІДОБРАЖЕННЯ SVG ІКОНОК */
.wlc-float-item svg {
    width: calc(var(--wlc-float-size, 50px) * 0.45) !important;
    height: calc(var(--wlc-float-size, 50px) * 0.45) !important;
    stroke: var(--wlc-float-color, #333333) !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
    display: block !important;
    margin: 0 auto !important;
}

.wlc-float-item:hover {
    transform: scale(1.1) !important;
}

/* Лічильник товарів на іконці кошика */
.wlc-float-item .wlc-cart-count {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background-color: var(--wlc-accent-color, #e0a240) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    line-height: 1 !important;
    z-index: 10 !important;
}
/* ==========================================================================
   14. BUILDER UTILITIES (КЛАС-ВБИВЦЯ ВІДСТУПІВ)
   ========================================================================== */

/* 1. Знищуємо зовнішні відступи самого блоку */
.wlc-no-margin {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

/* 2. Знищуємо відступи ВСІХ елементів всередині цього блоку (заголовки, ціни, шорткоди) */
.wlc-no-margin > h1,
.wlc-no-margin > h2,
.wlc-no-margin > h3,
.wlc-no-margin > p,
.wlc-no-margin > div,
.wlc-no-margin > form,
.wlc-no-margin .price,
.wlc-no-margin .woocommerce-product-details__short-description {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

/* 3. Якщо ти додаєш підряд кілька Custom блоків (custom_1, custom_2) - прибираємо дірки між ними */
.wlc-builder-block[class*="custom_"] {
    margin-bottom: 5px; /* Стандартний маленький відступ для кастомних блоків */
}

/* ===================================================
   ПРОПОРЦІЇ ЕКРАНУ: ЗБІЛЬШУЄМО ОСНОВНЕ ФОТО
   =================================================== */

/* Якщо галерея ЗНИЗУ (стандартно було 50/50, робимо 60/40) */
html body .wlc-single-top-block {
    /* Перше число (1.5fr) - це картинка, друге (1fr) - це текст */
    grid-template-columns: 1.5fr 1fr !important; 
}

/* Якщо галерея ЗЛІВА або СПРАВА (компенсуємо місце під мініатюри, робимо фото ще більшим) */
html body.single-product.wlc-gal-pos-left .wlc-single-top-block,
html body.single-product.wlc-gal-pos-right .wlc-single-top-block {
    grid-template-columns: 1.8fr 1fr !important; 
}

/* На мобільних залишаємо 1 колонку (100%), щоб нічого не ламалось */
@media (max-width: 1024px) {
    html body .wlc-single-top-block,
    html body.single-product.wlc-gal-pos-left .wlc-single-top-block,
    html body.single-product.wlc-gal-pos-right .wlc-single-top-block {
        grid-template-columns: 1fr !important;
    }
}