/* ============================================
       MICADONI-STYLE PRODUCT PAGE LAYOUT
       ============================================
       DOM structure (from content-single-product.php):
       .add-to-cart-row
         ├── .add-to-cart-container
         │     └── form.variations_form.cart
         │           ├── table.variations (label + swatches + reset link)
         │           └── .single_variation_wrap
         │                 ├── .single_variation (price display)
         │                 └── .woocommerce-variation-add-to-cart
         │                       ├── .quantity (input)
         │                       └── button (Dodaj do koszyka)
         └── .wishlist-btn (heart - moved by JS into .woocommerce-variation-add-to-cart)
       ============================================ */

    /* === 1. MAIN LAYOUT CONTAINERS === */

    /* add-to-cart-row: vertical stack, NOT side-by-side */
    .add-to-cart-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    /* add-to-cart-container takes full width */
    .add-to-cart-row .add-to-cart-container {
        width: 100% !important;
        flex: none !important;
    }

    /* === 2. HIDE DEFAULT VARIATIONS TABLE & SWATCHES === */
    .variations_form table.variations,
    .variations_form .reset_variations,
    .variations_form .reset_variations_alert,
    .variations_form .woocommerce-variation.single_variation,
    .variations_form .woocommerce-variation-description,
    .variations_form .woocommerce-variation-price,
    .woo-variation-swatches .variable-items-wrapper,
    .woo-variation-swatches .wvs-tooltip,
    .micadoni-show-more {
        display: none !important;
    }

    /* === 3. SINGLE_VARIATION_WRAP & ADD-TO-CART ROW === */

    /* The wrappers must act as flex containers that take up remaining space */
    .single_variation_wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Make variation add-to-cart a flex row matching simple product layout exactly */
    .woocommerce-variation-add-to-cart {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        gap: 10px !important; /* Theme uses 10px gap between qty and button */
        margin: 0 !important;
        padding: 0 !important;
    }

    .woocommerce-variation-add-to-cart .quantity {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    /* Enterprise fix: Prevent FOUC of the "ILOŚĆ" label next to the counter */
    .woocommerce-variation-add-to-cart .quantity label,
    .qodef-quantity-buttons .qodef-quantity-label,
    .quantity label {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        content-visibility: hidden !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .woocommerce-variation-add-to-cart .single_add_to_cart_button {
        flex: 1 1 auto !important;
        width: 100% !important; /* Force to take available space */
        margin: 0 !important;
    }

    .woocommerce-variation-add-to-cart .single_add_to_cart_button.disabled,
    .woocommerce-variation-add-to-cart .single_add_to_cart_button:disabled {
        opacity: 0.5 !important;
    }

    /* Hide hidden inputs and blockUI from flex layout */
    .woocommerce-variation-add-to-cart input[type="hidden"],
    .variations_form .blockUI,
    .woocommerce div.product form.cart .blockUI {
        display: none !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* === 7. WISHLIST HEART (moved by JS into .woocommerce-variation-add-to-cart) === */

    .wishlist-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        border: 1px solid #ddd !important;
        background: #fff !important;
        cursor: pointer !important;
        border-radius: 2px !important;
        transition: border-color 0.2s !important;
        padding: 0 !important;
        margin: 0 0 0 10px !important;
        box-sizing: border-box !important;
        vertical-align: top !important;
    }
    .wishlist-btn:hover {
        border-color: #999 !important;
    }

    /* === 4. CUSTOM FABRIC SELECTOR === */
    .arven-fabric-selector {
        margin-bottom: clamp(15px, 2vw, 25px) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: clamp(8px, 1vw, 12px) !important;
    }

    .arven-fabric-selector .fabric-selector-header {
        font-size: clamp(13px, 0.9vw, 15px) !important;
        color: #1a1a1a !important;
        line-height: 1.4 !important;
        display: flex !important;
        align-items: baseline !important;
    }

    .arven-fabric-selector .fabric-label {
        font-weight: 400 !important;
        color: #666 !important;
    }

    .arven-fabric-selector .fabric-value {
        font-weight: 500 !important;
        margin-left: clamp(3px, 0.5vw, 6px) !important;
    }

    .arven-fabric-selector .fabric-swatches-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: clamp(4px, 0.7vw, 8px) !important;
        align-items: center !important;
    }

    .arven-fabric-selector .fabric-swatch-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        border: 1px solid #e5e5e5 !important;
        border-radius: 0px !important; 
        overflow: hidden !important;
        cursor: pointer !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    .arven-fabric-selector .fabric-swatch-item:hover,
    .arven-fabric-selector .fabric-swatch-item.is-selected {
        border-color: #000 !important;
        box-shadow: inset 0 0 0 1px #000 !important;
    }

    .arven-fabric-selector .fabric-swatch-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        pointer-events: none !important;
    }
    
    .arven-fabric-selector .fabric-name-only {
        font-size: clamp(9px, 0.8vw, 11px) !important;
        text-transform: uppercase !important;
        color: #999 !important;
    }

    .arven-fabric-selector .fabric-swatch-more {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        border: 1px solid #e5e5e5 !important;
        font-size: clamp(11px, 1vw, 13px) !important;
        color: #333 !important;
        cursor: pointer !important;
        transition: border-color 0.2s ease, background 0.2s ease !important;
        font-weight: 500 !important;
        background: #fdfdfd !important;
        border-radius: 0px !important;
        box-sizing: border-box !important;
    }

    .arven-fabric-selector .fabric-swatch-more:hover {
        border-color: #000 !important;
        background: #f5f5f5 !important;
    }

    /* === MOBILE BREAKPOINT LOCK (1023px and below) === */
    @media (max-width: 1023px) {
        .arven-fabric-selector {
            margin-bottom: 20px !important;
            gap: 10px !important;
        }

        .arven-fabric-selector .fabric-selector-header {
            font-size: 13px !important;
        }

        .arven-fabric-selector .fabric-value {
            margin-left: 5px !important;
        }

        .arven-fabric-selector .fabric-swatches-grid {
            gap: 7px !important;
        }

        .arven-fabric-selector .fabric-name-only {
            font-size: 9px !important;
        }

        .arven-fabric-selector .fabric-swatch-more {
            font-size: 11px !important;
        }

        /* Hide 6th swatch on mobile - show only 5 */
        .arven-fabric-selector .fabric-swatches-grid .fabric-swatch-item:nth-child(6) {
            display: none !important;
        }
    }

    html.fabric-panel-is-open,
    body.fabric-panel-is-open {
        overflow: hidden !important;
        height: 100% !important;
        height: -webkit-fill-available !important;
        overscroll-behavior: none !important;
    }

    /* === 5. FABRIC PANEL DRAWER (Micadoni-style) === */
    .arven-fabric-panel-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0,0,0,0.45) !important;
        z-index: 2147483646 !important; /* Max value minus 1 */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.4s ease, visibility 0.4s ease !important;
        touch-action: none !important;
    }
    #fabricPanelOverlay.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .arven-fabric-panel {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 660px !important; /* Made wider as requested */
        max-width: 90vw !important;
        height: 100% !important;
        height: -webkit-fill-available !important;
        background: #fff !important;
        z-index: 2147483647 !important;
        transform: translateX(100%) !important;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s ease !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: -10px 0 50px rgba(0,0,0,0.15) !important;
        visibility: hidden !important; /* Start hidden */
        will-change: transform;
        pointer-events: none !important; /* Start non-interactive */
        overflow: hidden !important; /* Keep panel itself locked, body scrolls */
    }
    .arven-fabric-panel.is-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Mobile Improvements: Premium "Bottom Sheet" Look */
    @media (max-width: 767px) {
        .arven-fabric-panel {
            width: 100% !important;
            max-width: 100% !important;
            top: auto !important;
            bottom: 0 !important;
            height: 92% !important; /* Leave a small gap at the top to look like a bottom sheet */
            height: 92dvh !important;
            border-radius: 24px 24px 0 0 !important;
            transform: translateY(100%) !important; /* Slide up from bottom on mobile */
            left: 0 !important;
            right: 0 !important;
        }
        .arven-fabric-panel.is-open {
            transform: translateY(0) !important;
        }
        .fabric-panel-handle {
            display: block !important;
        }
        .fabric-panel-header {
            padding: 12px 24px 16px !important; /* Adjusted for handle */
            border-bottom: none !important;
        }
        .fabric-panel-title {
            font-size: 20px !important;
            font-weight: 500 !important;
            letter-spacing: -0.02em !important;
        }
        .fabric-panel-group-title {
            font-size: 11px !important;
            text-transform: uppercase !important;
            letter-spacing: 0.1em !important;
            color: #888 !important;
            margin-bottom: 20px !important;
            padding-top: 40px !important;
        }
        .fabric-panel-group-title:first-child {
            padding-top: 10px !important;
        }
        .fabric-group-upcharge {
            font-weight: 600 !important;
            color: #111 !important;
            background: #f5f5f5 !important;
            padding: 2px 8px !important;
            border-radius: 4px !important;
            font-size: 10px !important;
            letter-spacing: 0 !important;
        }
        .fabric-panel-body {
            padding: 0 24px 80px !important;
        }
        .fabric-panel-grid {
            gap: 14px !important;
            grid-template-columns: repeat(3, 1fr) !important;
        }
        .fabric-panel-swatch {
            border-radius: 12px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
            border: 1px solid #f0f0f0 !important;
        }
        .fabric-panel-swatch.is-selected {
            outline-width: 2px !important;
            outline-offset: 3px !important;
        }
        .fabric-panel-footer {
            padding: 20px 24px calc(24px + env(safe-area-inset-bottom)) !important;
            background: linear-gradient(to top, #fff 80%, rgba(255,255,255,0)) !important;
        }
        .fabric-panel-select-btn {
            padding: 18px 20px !important;
            font-size: 14px !important;
            border-radius: 12px !important;
            font-weight: 500 !important;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
        }
    }

    .fabric-panel-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 24px 28px 20px 28px !important;
        border-bottom: 1px solid #eee !important;
        flex-shrink: 0 !important;
    }

    .fabric-panel-title {
        font-size: 20px !important;
        font-weight: 500 !important;
        color: #1a1a1a !important;
        margin: 0 !important;
        letter-spacing: -0.01em !important;
    }

    .fabric-panel-close {
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 8px !important;
        margin-right: -8px !important;
        color: #666 !important;
        transition: color 0.2s ease, transform 0.2s ease !important;
        line-height: 0 !important;
    }
    .fabric-panel-close:hover {
        color: #000 !important;
        transform: scale(1.05) !important;
    }

    .fabric-panel-body {
        padding: 20px 28px 40px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        flex: 1 !important;
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }

    /* HANDLE FOR MOBILE */
    .fabric-panel-handle {
        display: none;
        width: 40px;
        height: 4px;
        background: #e0e0e0;
        border-radius: 2px;
        margin: 12px auto 0;
        flex-shrink: 0;
    }

    .fabric-panel-group-title {
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #000 !important;
        margin: 0 0 16px 0 !important;
        padding-top: 32px !important;
        display: flex !important;
        align-items: baseline !important;
        letter-spacing: 0 !important;
    }
    .fabric-panel-group-title:first-child {
        padding-top: 8px !important;
    }
    .fabric-group-upcharge {
        font-weight: 700 !important;
        color: #000 !important;
        margin-left: 6px !important;
    }
    .fabric-group-selected-val {
        display: none !important; /* Remove cluttered selection text from header */
    }

    .fabric-panel-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
        margin-bottom: 24px !important;
    }

    .fabric-panel-swatch {
        cursor: pointer !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        padding: 0 !important;
        overflow: hidden !important;
        transition: border-color 0.2s ease !important;
        display: flex !important;
        flex-direction: column !important;
        background: #fff !important;
        position: relative !important;
    }

    .fabric-panel-swatch:hover {
        border-color: #999 !important;
    }

    .fabric-panel-swatch.is-selected {
        border-color: transparent !important;
        outline: 2px solid #111 !important;
        outline-offset: 2px !important;
    }

    .fabric-panel-swatch img {
        width: 100% !important;
        aspect-ratio: 1/1 !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 5px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
        transition: opacity 0.2s ease !important;
    }
    .fabric-panel-swatch:hover img {
        opacity: 0.85 !important;
    }


    .fabric-panel-footer {
        padding: 20px 28px 28px !important;
        border-top: none !important;
        flex-shrink: 0 !important;
        background: #fff !important;
    }

    .fabric-panel-select-btn {
        width: 100% !important;
        padding: 18px 20px !important;
        background: #2a2a2a !important;
        color: #fff !important;
        border: none !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        cursor: pointer !important;
        transition: background 0.2s ease !important;
        border-radius: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .fabric-panel-select-btn:hover {
        background: #000 !important;
    }

    </style>