/* ==========================================================
   MARBOCRAFT SINGLE PRODUCT PAGE - MASTER CSS
========================================================== */

/* ==========================================================
   SECTION 1: DESKTOP & BASE STYLES
========================================================== */

/* --- 1. SINGLE PRODUCT PAGE BASE --- */
.woocommerce div.product {
    padding: 0 2% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important; 
    margin-top: 40px;
}

.woocommerce-breadcrumb,
.marbo-single-category,
.marbocraft-single-category { display: none !important; }

/* The Top Row Structure */
.marbo-single-top-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    margin-bottom: 80px; 
}

.woocommerce div.product div.images { 
    width: calc(66% + 50vw - 50%) !important; 
    margin: 0 0 0 calc(-50vw + 50%) !important; 
    padding-left: 0 !important; 
    padding-right: 35px !important; /* <--- Shrunk this to close the center gap */
    box-sizing: border-box !important; 
    float: none !important; 
}

/* Leaves the summary text column exactly as it is */
.woocommerce div.product div.summary { 
    width: 34% !important; 
    margin: 0 !important; 
    box-sizing: border-box !important; 
    float: none !important; 
    position: -webkit-sticky; 
    position: sticky; 
    top: 120px; 
}

/* 2x2 Image Grid */
.woocommerce-product-gallery__wrapper { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px; margin: 0 !important; }
.woocommerce-product-gallery__image { width: 100% !important; float: none !important; margin: 0 !important; }
.woocommerce-product-gallery__image img { width: 100% !important; height: 100% !important; aspect-ratio: 4 / 5; border-radius: 0 !important; display: block; object-fit: cover; }

/* Typography Formatting (Sizes controlled in typography.css) */
.woocommerce div.product .product_title {  
    margin-top: 0 !important;
    margin-bottom: 0 !important; 
    margin-block-start: 0 !important; 
    margin-block-end: 0 !important;   
    clear: none !important; 
}
.woocommerce-product-details__short-description { margin-top: 25px; margin-bottom: 30px; border-top: 1px solid #eaeaea; padding-top: 25px; }

/* Badges & Elements */
.marbo-product-badges { display: flex; flex-direction: column; gap: 15px; margin: 25px 0; }
.badge-item { background-color: #E5DED1; padding: 16px 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 12px; border: none; width: 100%; box-sizing: border-box; }
.marbo-scarcity-text { color: #b00000; margin-bottom: 25px; display: flex; align-items: center; gap: 8px; }
.pulse-dot { width: 8px; height: 8px; background-color: #b00000; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(176, 0, 0, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(176, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(176, 0, 0, 0); } }

/* Accordion */
.marbo-product-accordion { margin-top: 40px; border-top: 1px solid #eaeaea; }
.marbo-product-accordion details { border-bottom: 1px solid #eaeaea; }
.marbo-product-accordion summary::-webkit-details-marker { display: none; }
.marbo-product-accordion summary { padding: 20px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; outline: none; }
.marbo-product-accordion .toggle-icon { font-size: 20px; font-weight: 300; transition: transform 0.3s ease; }
.marbo-product-accordion details[open] .toggle-icon { transform: rotate(45deg); }
.accordion-content { padding-bottom: 25px; padding-right: 20px; }

/* Bottom USP Tiles */
.marbo-usp-tiles-section { clear: both !important; width: 100% !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 80px; padding-top: 60px; border-top: 1px solid #eaeaea; }
.usp-tile { text-align: center; padding: 30px 20px; background: #faf8f5; border-radius: 12px; border: 1px solid #f0eee9; }
.usp-tile .usp-icon { font-size: 30px; display: block; margin-bottom: 15px; }

/* Layout Fixes */
.woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related.products, .woocommerce div.product .up-sells { flex: 0 0 100%; width: 100%; clear: both; margin-top: 80px; padding-top: 40px; border-top: 1px solid #eaeaea; }
body.woocommerce span.onsale, body.woocommerce div.product div.images .woocommerce-product-gallery__trigger, .woocommerce-message, .woocommerce-error, .woocommerce-info { display: none !important; }
body.woocommerce div.product div.images .woocommerce-product-gallery__image a { cursor: zoom-in !important;  display: block !important; }
body.woocommerce div.product div.images .woocommerce-product-gallery__image img { transition: transform 0.3s ease; }
body.woocommerce div.product div.images .woocommerce-product-gallery__image:hover img { opacity: 0.95; }

/* Add to Cart Layout */
.woocommerce div.product form.cart .quantity label, .woocommerce div.product form.cart .quantity .qty { display: none !important; }
.woocommerce div.product form.cart .quantity::before { content: "Quantity"; font-size: 16px; color: #111; font-weight: 400; display: block; margin-bottom: 8px; }
.marbo-qty-dropdown { width: 110px; height: 48px; border: 1px solid #111; border-radius: 25px; padding: 0 20px; font-size: 16px; color: #111; background-color: #fff; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23111" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'); background-repeat: no-repeat; background-position: right 15px center; appearance: none; cursor: pointer; outline: none; }
.marbo-qty-dropdown:focus { border-color: #C08B4B; }
.woocommerce div.product form.cart:not(.variations_form) { display: flex !important; flex-direction: row !important;  align-items: center !important; gap: 15px !important; width: 100% !important; flex-wrap: wrap !important; }
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 100% !important; width: 100% !important; height: 54px !important; background-color: #000 !important; color: #fff !important; border: 2px solid #000 !important; border-radius: 30px !important;  display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; transition: opacity 0.3s ease, background-color 0.3s ease !important; }
.woocommerce div.product form.cart .single_add_to_cart_button:hover { opacity: 0.8 !important; }
.woocommerce div.product p.price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }

/* Status, Badges & Utilities */
.marbo-stock-status { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.marbo-stock-status .stock-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 3px rgba(0,0,0,0.05); }
.marbo-stock-status.in-stock { color: #27ae60; }
.marbo-stock-status.in-stock .stock-dot { background-color: #27ae60; box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2); }
.marbo-stock-status.out-of-stock { color: #e74c3c; }
.marbo-stock-status.out-of-stock .stock-dot { background-color: #e74c3c; box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2); }

/* Tighter cart spacing */
.woocommerce div.product form.cart { margin-bottom: 8px !important; }
.marbo-safe-checkout-wrap { margin-top: 0px !important; margin-bottom: 20px; text-align: center; }.safe-checkout-divider { display: flex; align-items: center; text-align: center; margin-bottom: 15px; }
.safe-checkout-divider::before, .safe-checkout-divider::after { content: ''; flex: 1; border-bottom: 1px solid #eaeaea; }
.safe-checkout-divider span { padding: 0 15px; color: #888; }
.marbo-safe-checkout-wrap img { max-width: 100%; height: auto; display: inline-block; }

.marbo-delivery-estimate { display: flex; align-items: center; gap: 15px; background: #F9F9F9; padding: 16px 20px; border-radius: 8px; margin-bottom: 25px; border: none; }
.marbo-delivery-estimate .delivery-icon { width: 22px; height: 22px; color: #333; }

.marbo-trust-badges-container { display: flex; justify-content: space-between; align-items: stretch; border: 1px solid #eaeaea; border-radius: 8px; padding: 25px 15px; margin-bottom: 40px; background: #fff; }
.marbo-trust-badges-container .badge-box { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 5px; }
.marbo-trust-badges-container .badge-box:not(:last-child) { border-right: 1px solid #eaeaea; }
.marbo-trust-badges-container .badge-box img { width: 36px; height: 36px; object-fit: contain; margin-bottom: 12px; }

/* Extra Utilities */
.marbo-single-category { margin-bottom: 2px; display: block !important; }
.marbo-single-category a { color: #888888 !important; text-decoration: none !important; transition: color 0.3s ease !important; }
.marbo-single-category a:hover { color: #111111 !important; }
.marbo-tax-text { color: #888; margin-top: -10px; margin-bottom: 10px; }
.marbo-bulk-box { background: #f8f8f8; border-radius: 8px; padding: 25px; margin-top: 35px; }
.marbo-bulk-box .bulk-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dynamic-woo-content table { width: 100%; border-collapse: collapse; }
.dynamic-woo-content th { text-align: left; padding: 8px 0; color: #111; width: 30%; }
.dynamic-woo-content td { padding: 8px 0; color: #555; }
.related.products { margin-top: 80px; padding-top: 0; border-top: none; }
.related.products > h2 { text-transform: capitalize; position: relative; display: inline-block; padding-bottom: 15px; margin-bottom: 40px; }
.related.products > h2::before { content: ''; position: absolute; bottom: 0; left: 0; width: 250px; height: 3px; background: #eaeaea; }
.related.products > h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #111; }
.marbo-reviews-section { margin-top: 60px; width: 100%; clear: both; }


/* ==========================================================
   VARIABLE PRODUCT FIXES (Swatches & Layout)
========================================================== */

/* 1. Flexbox Overrides so elements don't stack weirdly */
.woocommerce div.product form.variations_form.cart { display: block !important; width: 100% !important; }
.woocommerce div.product table.variations, 
.woocommerce div.product table.variations tbody, 
.woocommerce div.product table.variations tr, 
.woocommerce div.product table.variations th, 
.woocommerce div.product table.variations td { 
    display: block !important; 
    width: 100% !important; 
    padding: 0 !important; 
    text-align: left !important; 
    border: none !important; 
    background: transparent !important; 
}
.woocommerce div.product table.variations th { margin-bottom: 10px !important; }
.woocommerce div.product table.variations td { margin-bottom: 15px !important; }
.woocommerce div.product table.variations .reset_variations { display: inline-block !important; margin-top: 10px !important; font-size: 12px !important; color: #888 !important; text-decoration: underline !important; }

/* 2. Hide the ugly default select dropdown */
.woocommerce div.product table.variations select { display: none !important; }

/* 3. Style the Swatches beautifully */
.marbo-swatches-container { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 5px !important; }
.marbo-swatch-btn { 
    background: #fff !important; 
    border: 1px solid #ddd !important; 
    border-radius: 6px !important; 
    padding: 12px 18px !important; 
    font-size: 13px !important; 
    font-weight: 600 !important; 
    color: #444 !important; 
    cursor: pointer !important; 
    transition: all 0.2s ease !important; 
    outline: none !important; 
    line-height: 1 !important; 
}
.marbo-swatch-btn:hover { border-color: #111 !important; color: #111 !important; }
.marbo-swatch-btn.selected { background: #111 !important; color: #fff !important; border-color: #111 !important; }

/* 4. Hide Bottom Variation Price (it was moved to the top) */
.woocommerce div.product .woocommerce-variation-price { display: none !important; }

/* 5. Variable Add to Cart Layout */
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart .quantity { display: none !important; }
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart { 
    display: flex !important; 
    flex-direction: row !important; 
    gap: 15px !important; 
    width: 100% !important; 
    align-items: center !important; 
    justify-content: space-between !important; 
    margin-top: 25px !important; 
    clear: both !important; 
}
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart button[type="submit"] { 
    flex: 1 1 100% !important; 
    width: 100% !important; 
    max-width: 100% !important; 
    height: 54px !important; 
    border-radius: 30px !important; 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    box-sizing: border-box !important; 
    white-space: nowrap !important; 
    transition: opacity 0.3s ease, background-color 0.3s ease !important; 
}
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button { background-color: #000 !important; color: #fff !important; border: 2px solid #000 !important; }
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart .marbo-buy-now { background-color: #fff !important; color: #000 !important; border: 1px solid #000 !important; }
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart .marbo-buy-now:hover { background-color: #f7f7f7 !important; }
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button:disabled { background-color: #f2f2f2 !important; border-color: #e0e0e0 !important; color: #a0a0a0 !important; cursor: not-allowed !important; opacity: 1 !important; }
.woocommerce div.product .woocommerce-variation.single_variation { margin-bottom: 0 !important; margin-top: 15px !important; }

/* ==========================================================
   SECTION 2: MOBILE & TABLET OVERRIDES & SWIPER
========================================================== */

/* Hide Mobile Swiper on Desktop */
.marbo-mobile-gallery-wrapper { display: none; }

/* --- 1. TABLET ONLY (1024px) --- */
@media screen and (max-width: 1024px) {
    
    /* Layout Reset & Stacking (Merged from responsive.css) */
    .marbo-single-top-row { flex-direction: column; margin-bottom: 40px; }
    .woocommerce div.product div.images, 
    .woocommerce div.product div.summary { width: 100% !important; padding-right: 0 !important; margin: 0 !important; }
    
    /* Swap Galleries */
    .woocommerce div.product div.images { display: none !important; } /* Hide Desktop Grid */
    .marbo-mobile-gallery-wrapper { display: block; width: 100%; margin-bottom: 12px; position: relative; margin-top: -15px !important; } /* Show Mobile Swiper */

    /* Global Padding Constraint */
    .woocommerce div.product,
    .marbo-single-product-layout { padding-left: 2% !important; padding-right: 2% !important; margin-top: 5px !important; margin-bottom: 0px !important; box-sizing: border-box !important; }
    

    /* --- MOBILE SWIPER STYLES --- */
    /* Main slider */
    .marbo-main-swiper { width: 100%; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.06); margin-bottom: 15px; background: #f9f9f9; aspect-ratio: 4 / 5; overflow: hidden; }
    .marbo-main-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
    
    /* Navigation Arrows */
    .marbo-main-swiper .marbo-nav-btn { background-color: #ffffff; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.15); color: #111; opacity: 0.9; transition: opacity 0.2s ease; }
    .marbo-main-swiper .marbo-nav-btn:hover { opacity: 1; }
    .marbo-main-swiper .marbo-nav-btn::after { font-size: 16px; font-weight: bold; }

    /* Thumb slider */
    .marbo-thumb-swiper { width: 100%; padding: 5px 0; }
    .marbo-thumb-swiper .swiper-slide { opacity: 0.5; cursor: pointer; transition: all 0.3s ease; border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; border: 2px solid transparent; }
    .marbo-thumb-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .marbo-thumb-swiper .swiper-slide-thumb-active { opacity: 1; border-color: #fff; }

    /* Immersive Edge-to-Edge Style */
    .marbo-mobile-gallery-wrapper.style-immersive { width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin-top: -20px !important; margin-bottom: 0px !important; }
    .marbo-mobile-gallery-wrapper.style-immersive .marbo-main-swiper { border-radius: 0 !important; box-shadow: none !important; aspect-ratio: 4 / 5 !important; margin-bottom: 0 !important; background-color: transparent !important; }
    .marbo-mobile-gallery-wrapper.style-immersive .marbo-main-swiper img { border-radius: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
    
    /* Immersive Glass Pagination */
    .marbo-immersive-pagination { position: absolute !important; bottom: 20px !important; left: 50% !important; transform: translateX(-50%) !important; background: rgba(30, 30, 30, 0.4) !important; backdrop-filter: blur(15px) saturate(150%) !important; -webkit-backdrop-filter: blur(15px) saturate(150%) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.1) !important; padding: 8px 14px !important; border-radius: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; z-index: 20 !important; width: auto !important; margin: 0 !important; transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s !important; }
    .marbo-mobile-gallery-wrapper.style-immersive.pagination-hidden .marbo-immersive-pagination { opacity: 0 !important; visibility: hidden !important; transform: translate(-50%, 10px) !important; }
    
/* Square Carousel Style - 4px Gap */
    .marbo-mobile-gallery-wrapper.style-carousel { 
        width: 100vw !important; 
        margin-left: calc(-50vw + 50%) !important; 
        margin-top: -20px !important; 
        overflow: hidden !important; 
        padding-bottom: 0 !important; 
    }
    
    .marbo-mobile-gallery-wrapper.style-carousel .marbo-main-swiper { 
        width: 90vw !important; 
        margin-left: 15px !important; 
        padding: 0 !important; 
        overflow: visible !important; 
        background: transparent !important; 
    }
    
    .marbo-mobile-gallery-wrapper.style-carousel .swiper-slide { 
        width: 100% !important; 
        margin: 0 !important; 
        
        /* CRITICAL: Gap reduced to exactly 4px */
        box-sizing: border-box !important;
        padding-right: 4px !important; 
        
        aspect-ratio: 4 / 5 !important; 
        height: auto !important; 
        opacity: 1 !important; 
    }
    
    .marbo-mobile-gallery-wrapper.style-carousel .marbo-main-swiper img { 
        border-radius: 0 !important; 
        width: 100% !important; 
        height: 100% !important; 
        object-fit: cover !important; 
    }
    
    .marbo-mobile-gallery-wrapper.style-carousel .marbo-immersive-pagination { bottom: 0 !important; background: #111111 !important; }
    .marbo-mobile-gallery-wrapper.style-carousel .swiper-pagination-bullet { width: 6px !important; height: 6px !important; background: rgba(255, 255, 255, 0.4) !important; border-radius: 50% !important; opacity: 1 !important; margin: 0 !important; transition: all 0.3s ease !important; }
    .marbo-mobile-gallery-wrapper.style-carousel .swiper-pagination-bullet-active { background: #ffffff !important; transform: scale(1.4) !important; }

    body.single-product .site-header { border-bottom: none !important; box-shadow: none !important; }

/* ==========================================================
   LIGHTBOX Z-INDEX OVERRIDE
========================================================== */
.pswp { 
    z-index: 2147483647 !important; 
}
body.pswp-open .site-header, 
body.pswp-open .marbo-announcement-bar { 
    opacity: 0 !important; 
    visibility: hidden !important; 
    z-index: 0 !important; 
}

/* --- 2. MOBILE & SMALL TABLET (768px) --- */
@media screen and (max-width: 768px) {
    /* Spacing Overrides */
    .woocommerce div.product .product_title { margin-top: 0 !important; margin-bottom: 8px !important; margin-block-start: 0 !important; margin-block-end: 0px !important; }
    .woocommerce div.product p.price { margin-bottom: 5px !important; }
    .woocommerce-product-details__short-description { margin-top: 20px !important; margin-bottom: 25px !important; padding-top: 20px !important; }

    /* Accordion Layout */
    .marbo-product-accordion { margin-top: 15px !important; }
    .marbo-product-accordion summary { padding: 15px 0 !important; }
    .accordion-content { padding-bottom: 20px !important; }

    /* USP Tiles */
    .marbo-usp-tiles-section { grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: 50px !important; padding-top: 40px !important; }
    .usp-tile { padding: 20px 15px !important; }
    .usp-tile .usp-icon { margin-bottom: 10px !important; }

    /* Utilities Layout */
    .marbo-stock-status { margin-bottom: 10px !important; margin-top: 10px; }
    .marbo-trust-badges-container { flex-wrap: wrap; padding: 20px 10px; gap: 20px 0; }
    .marbo-trust-badges-container .badge-box { flex: 0 0 50%; border-right: none; }
    .related.products { margin-top: 60px !important; }
    .related.products > h2 { margin-bottom: 30px !important; padding-bottom: 10px !important; }
    .related.products > h2::before { width: 150px; }
    .marbo-bulk-box { padding: 20px; }
}

@media (max-width: 600px) {
    .marbo-usp-tiles-section { grid-template-columns: 1fr !important; }
}