/* ============================================
   DESKTOP & GENERAL STYLES
   ============================================ */

/* Badges & General UI */
span.onsale,
span.out-of-stock-badge {
    border-radius: 999px;
}

div.quantity input[type="number"],
.quantity[data-type="type-2"] input[type="number"],
input#quantity_69de5c6f1840a,
.quantity[data-type=type-2] .ct-decrease,
.quantity[data-type=type-2] .ct-increase {
    border-radius: 999px !important;
}

/* Sale Badge + Out of Stock — top left */
.onsale[data-shape="type-2"],
.out-of-stock-badge[data-shape="type-2"],
[class*="ct-woo-badge-"][data-shape="type-2"] {
    left: 12px !important;
    right: auto !important;
}

/* Single Product Page */
h5.ct-module-title {
    display: none;
}

/* Lightbox Trigger */
.ct-product-gallery-container a.woocommerce-product-gallery__trigger {
    position: absolute !important;
    bottom: 12px !important;
    right: auto !important;
    left: 12px !important;
    top: auto !important;
    z-index: 20;
}

/* Sale Badge */
.ct-product-gallery-container span.onsale {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 20;
    margin: 0 !important;
}





/* Archive Card — Base & Layout */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative !important;
    border: 1.5px solid #EAF3EC !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    padding: 8px !important;
}

[data-products] {
    grid-column-gap: 24px !important;
    grid-row-gap: 32px !important;
}

/* Archive Card — Card Extra Container */
.ct-woo-card-extra {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 10 !important;
    padding: 0 !important;
    transform: none !important;
}

/* إعادة تفعيل الكليك على العناصر التفاعلية فقط */
.ct-woo-card-extra .button.add_to_cart_button {
    pointer-events: all !important;
}



/* Archive Card — Add to Cart */
.ct-woo-card-extra .button.add_to_cart_button {
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    width: calc(100% - 24px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(6px) !important;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: #EAF3EC !important;
    color: #2D8A42 !important;
    border-radius: 50px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: none !important;
    text-decoration: none !important;
}

/* Show on card hover */
li.product:hover .ct-woo-card-extra .button.add_to_cart_button {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Hover على الزر نفسه */
.ct-woo-card-extra .button.add_to_cart_button:hover {
    background-color: #2D8A42 !important;
    color: #ffffff !important;
}

.ct-woo-card-extra .button.add_to_cart_button:hover .ct-tooltip {
    color: #ffffff !important;
}

.ct-woo-card-extra .button.add_to_cart_button:hover::before {
    background-image: url('/wp-content/uploads/2026/04/basket-white.svg') !important;
}

/* إخفاء الـ SVG الافتراضي */
.ct-woo-card-extra .button.add_to_cart_button .ct-icon {
    display: none !important;
}

/* basket-green كـ pseudo-element */
.ct-woo-card-extra .button.add_to_cart_button::before {
    content: '' !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url('/wp-content/uploads/2026/04/basket-green.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    flex-shrink: 0 !important;
}

/* ct-tooltip */
.ct-woo-card-extra .button.add_to_cart_button .ct-tooltip {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    color: #2D8A42 !important;
    padding: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    transition: color 0.25s ease !important;
}

/* Mobile Component Clone — Hidden on Desktop */
.ph-mobile-atc {
    display: none !important;
}

/* Sold Out State (Archive) */
li.product.outofstock .ct-woo-card-extra .button,
li.product.outofstock .ct-woo-card-extra a.button,
li.product.outofstock .ct-woo-card-extra .added_to_cart {
    display: none !important;
}

li.product.outofstock .ct-woo-card-extra {
    pointer-events: none !important;
}

li.product.outofstock .woocommerce-placeholder,
li.product.outofstock .ct-woo-card-extra::before,
li.product.outofstock .ct-woo-card-extra::after {
    display: none !important;
}

/* ============================================
   RESPONSIVE — TABLET & MOBILE
   ============================================ */

/* Mobile (max 768px) */
@media (max-width: 768px) {

    /* Layout */
    [data-products] {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-column-gap: 12px !important;
        grid-row-gap: 16px !important;
    }

    /* إخفاء الزر الأصلي جوا الصورة */
    .ct-woo-card-extra .button.add_to_cart_button {
        display: none !important;
    }

    /* إظهار الكلون تحت السعر */
    .ph-mobile-atc {
        display: block !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    /* ريست كامل على الكلون */
    .ph-mobile-atc .add_to_cart_button {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: flex !important;
        width: 100% !important;
        pointer-events: all !important;
        background-color: #EAF3EC !important;
        color: #2D8A42 !important;
        border-radius: 50px !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        border: none !important;
        text-decoration: none !important;
    }

    /* إخفاء الـ icon الافتراضي */
    .ph-mobile-atc .add_to_cart_button .ct-icon {
        display: none !important;
    }

    /* basket-green icon */
    .ph-mobile-atc .add_to_cart_button::before {
        content: '' !important;
        display: inline-block !important;
        width: 20px !important;
        height: 20px !important;
        background-image: url('/wp-content/uploads/2026/04/basket-green.svg') !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        flex-shrink: 0 !important;
    }

    /* ct-tooltip */
    .ph-mobile-atc .add_to_cart_button .ct-tooltip {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: transparent !important;
        color: #2D8A42 !important;
        padding: 0 !important;
        box-shadow: none !important;
        pointer-events: none !important;
        white-space: nowrap !important;
    }

    /* Hover على الكلون */
    .ph-mobile-atc .add_to_cart_button:hover {
        background-color: #2D8A42 !important;
        color: #ffffff !important;
    }

    .ph-mobile-atc .add_to_cart_button:hover::before {
        background-image: url('/wp-content/uploads/2026/04/basket-white.svg') !important;
    }

    .ph-mobile-atc .add_to_cart_button:hover .ct-tooltip {
        color: #ffffff !important;
    }



    span.onsale,
    span.out-of-stock-badge {
        display: none;
    }

    /* صورة المنتج — 1:1 على الموبايل */
    .woocommerce ul.products li.product a.ct-media-container,
    .woocommerce-page ul.products li.product a.ct-media-container {
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
    }

    .woocommerce ul.products li.product a.ct-media-container img,
    .woocommerce-page ul.products li.product a.ct-media-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* Tablet & Smaller (max 689.98px) */
@media (max-width: 689.98px) {
    .woocommerce div.product div.woocommerce-tabs ul.tabs {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    /* Lightbox Trigger */
    .ct-product-gallery-container a.woocommerce-product-gallery__trigger {
        position: absolute !important;
        bottom: 130px !important;
        right: auto !important;
        left: 12px !important;
        top: auto !important;
        z-index: 20;
    }

    a.ct-toggle-filter-panel.ct-offcanvas-trigger.ct-hidden-md.ct-hidden-lg {
        width: 100%;
        color: #2D8A42 !important;
        border-color: #E0EDE3 !important;
    }

}

input.ct-checkbox {
    border-color: #8C8C8CB2 !important;
}

/* ============================================
   SECTION: WISHLIST BUTTON
   ============================================ */

/* ----------------------------------------------
   SHARED RULES (Archive & Single)
   ---------------------------------------------- */

/* 1. Hide Blocksy's native icon container and its children */
.ct-wishlist-button-archive .ct-icon-container,
.ct-wishlist-button-single .ct-icon-container {
    display: none !important;
}

/* 2. Hide Blocksy's tooltip and label */
.ct-wishlist-button-archive .ct-tooltip,
.ct-wishlist-button-archive .ct-label,
.ct-wishlist-button-single .ct-tooltip,
.ct-wishlist-button-single .ct-label {
    display: none !important;
}

/* 3. Reset button base — common properties */
.ct-wishlist-button-archive,
.ct-wishlist-button-single {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    cursor: pointer !important;
    pointer-events: all !important;
    transition: background-image 0.2s ease !important;
}

/* ----------------------------------------------
   1. ARCHIVE CARD — .ct-wishlist-button-archive
   ---------------------------------------------- */

/* Parent container reset */
.ct-woo-card-extra {
    pointer-events: none !important;
}

/* Archive Button — Desktop base */
.ct-woo-card-extra .ct-wishlist-button-archive {
    position: absolute !important;
    top: 16px !important;
    right: 10px !important;
    left: auto !important;
    z-index: 2 !important;
    width: 48px !important;
    height: 48px !important;
    background-image: url('/wp-content/uploads/2026/04/white-heart.svg') !important;
    background-size: 48px 48px !important;
}

/* Archive Button — Hover + Active states */
.ct-woo-card-extra .ct-wishlist-button-archive:hover,
.ct-woo-card-extra .ct-wishlist-button-archive[data-button-state="active"] {
    background-image: url('/wp-content/uploads/2026/04/green-heart.svg') !important;
}

/* Archive Button — Loading state */
.ct-woo-card-extra .ct-wishlist-button-archive[data-button-state="loading"] {
    opacity: 0.6 !important;
    pointer-events: none !important;
    cursor: wait !important;
}

/* Archive Button — Mobile overrides */
@media (max-width: 689.98px) {
    .ct-woo-card-extra .ct-wishlist-button-archive {
        top: 8px !important;
        right: 10px !important;
        width: 36px !important;
        height: 36px !important;
        background-size: 36px 36px !important;
    }
}

/* ----------------------------------------------
   2. SINGLE PRODUCT — .ct-wishlist-button-single
   FIX B — Position on main gallery image
   ---------------------------------------------- */

/* Positioning context — main image only */
.single-product .flexy-view {
    position: relative !important;
}

/* Wrapper position */
.single-product .flexy-view .ct-product-additional-actions {
    position: absolute !important;
    top: 16px !important;
    right: 10px !important;
    left: auto !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Button base — Desktop (same on mobile) */
.single-product .flexy-view .ct-wishlist-button-single {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-image: url('/wp-content/uploads/2026/04/white-heart.svg') !important;
    background-size: 40px 40px !important;
    width: 40px !important;
    height: 40px !important;
    cursor: pointer !important;
    pointer-events: all !important;
    transition: background-image 0.2s ease !important;
}

/* Hide Blocksy native elements */
.single-product .flexy-view .ct-wishlist-button-single .ct-icon-container,
.single-product .flexy-view .ct-wishlist-button-single .ct-tooltip,
.single-product .flexy-view .ct-wishlist-button-single .ct-label {
    display: none !important;
}

/* Hover + Active */
.single-product .flexy-view .ct-wishlist-button-single:hover,
.single-product .flexy-view .ct-wishlist-button-single[data-button-state="active"] {
    background-image: url('/wp-content/uploads/2026/04/green-heart.svg') !important;
}

/* Loading */
.single-product .flexy-view .ct-wishlist-button-single[data-button-state="loading"] {
    opacity: 0.6 !important;
    pointer-events: none !important;
    cursor: wait !important;
}

/* Mobile — same size as desktop */
@media (max-width: 689.98px) {
    .single-product .flexy-view .ct-product-additional-actions {
        top: 16px !important;
        right: 10px !important;
    }

    .single-product .flexy-view .ct-wishlist-button-single {
        width: 40px !important;
        height: 40px !important;
        background-size: 40px 40px !important;
    }
}



/* ============================================================
   SECTION: SWIPER PROGRESS BAR — FINAL UNIVERSAL FIX
   Targets Loop, Nested, Media, and Standard Carousels
   ============================================================ */

/* 1. Ensure absolute context and create space at the bottom */
.elementor-widget-loop-carousel .elementor-widget-container,
.elementor-widget-n-carousel .e-n-carousel.swiper,
.elementor-widget-media-carousel .elementor-widget-container,
.elementor-widget-carousel .elementor-widget-container {
    padding-bottom: 23px !important; /* 20px Gap + 3px Bar Height */
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Unified Progress Bar Positioning */
.elementor-widget-loop-carousel .swiper-pagination-progressbar,
.elementor-widget-n-carousel .swiper-pagination-progressbar,
.elementor-widget-media-carousel .swiper-pagination-progressbar,
.elementor-widget-carousel .swiper-pagination-progressbar {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    margin: 0 !important;
    z-index: 10 !important;
    background: rgba(45, 138, 66, 0.1) !important; /* Light track */
}

/* 3. Progressive Fill Styling */
.swiper-pagination-progressbar-fill {
    background: #2D8A42 !important; /* Theme Green */
    height: 100% !important;
    transform-origin: left center !important;
}