/* =========================================================
   CATBIRD / ETCHY THEME
   custom-style.css
   WooCommerce + Related Products + Footer Fix
   ========================================================= */


/* =========================================================
   1. MOBILE / CUSTOM CARD STYLES
   ========================================================= */
   
@media (min-width: 1600px){
    .epcg-card{
        background: #ffffff !important;
    }
}
   
   
   
@media (max-width: 912px){
    .mob-grid3 .epcg-card{
        margin: 0 10px !important;
    }
}

.mob-grid3 a.epcg-card-image-wrapper {
    height: 250px !important;
}

@media (max-width: 767px) {
    .mob-grid3 a.epcg-card-image-wrapper {
        height: 200px !important;
    }
}

.catbird-btns,
.catbird-btns a, button[type=submit] {
    border-radius: 5px !important;
}

#catbird-hero .qodef-button {
    border-radius: 5px !important;
}


/* =========================================================
   2. FOOTER SOCIAL ICONS
   ========================================================= */

#footer-section .elementor-grid-item {
    padding: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 50% !important;
}

@media (max-width: 767px) {
    #footer-section .elementor-social-icons-wrapper.elementor-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}


/* =========================================================
   3. SHOP / CATEGORY CONTAINERS
   ========================================================= */

#qodef-woo-page .products {
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.custom-cat-grid-container,
.custom-subcat-grid-container {
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 56px !important;
    padding: 0 20px;
}


/* =========================================================
   4. WOOCOMMERCE PRODUCT GRID
   ========================================================= */

.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

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

.woocommerce ul.products li.product {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 15px !important;

    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;

    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;

    text-align: center !important;
    box-sizing: border-box !important;

    transition: all 0.3s ease !important;
}

.woocommerce ul.products li.product-category {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 15px !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
}


/* Product images */
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product-category img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}


/* Etchy image wrapper */
.woocommerce ul.products li.product .qodef-woo-product-image-inner {
    position: relative !important;
    overflow: hidden !important;
}


/* Responsive */
@media (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   5. RELATED PRODUCTS
   ========================================================= */

/*
 * IMPORTANT:
 * The Related Products section is generated by WooCommerce /
 * Etchy on the single-product page.
 *
 * We do NOT depend only on "a.button", because Etchy may use
 * a different class for its product-loop link.
 */

.single-product .related.products,
.single-product section.related.products {
    display: block !important;
    width: 100% !important;
    clear: both !important;

    margin-top: 70px !important;
    margin-bottom: 120px !important;
    padding-top: 10px !important;
    padding-bottom: 30px !important;

    position: relative !important;
    z-index: 5 !important;
}

.single-product .related.products > h2,
.single-product section.related.products > h2 {
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
}


/* Related product grid */
.single-product .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single-product .related.products ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}


/* =========================================================
   6. ETCHY PRODUCT BUTTON HOLDER
   ========================================================= */

/*
 * Etchy normally animates this holder on hover.
 * Force it into normal document flow so the button can be seen.
 */

.woocommerce ul.products li.product .qodef-woo-product-button-holder,
.related.products ul.products li.product .qodef-woo-product-button-holder,
.related.products .product .qodef-woo-product-button-holder {
    position: static !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;

    margin: auto 0 0 !important;
    padding: 15px 0 0 !important;

    background: transparent !important;

    transform: none !important;
    translate: none !important;

    clip-path: none !important;
    -webkit-clip-path: none !important;

    overflow: visible !important;

    pointer-events: auto !important;

    z-index: 20 !important;
}


/* =========================================================
   7. ACTUAL CLICKABLE PRODUCT LINK / BUTTON
   ========================================================= */

/*
 * Do NOT rely on .button only.
 * Target every direct anchor inside Etchy's button holder.
 */

.woocommerce ul.products li.product
.qodef-woo-product-button-holder > a,

.related.products ul.products li.product
.qodef-woo-product-button-holder > a,

.related.products .product
.qodef-woo-product-button-holder > a,

.qodef-woo-product-button-holder > a.button,

.qodef-woo-product-button-holder > a.add_to_cart_button,

.qodef-woo-product-button-holder > a.product_type_simple,

.qodef-woo-product-button-holder > a.product_type_variable,

.qodef-woo-product-button-holder > a.product_type_external {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 12px 15px !important;

    background: #000000 !important;
    color: #ffffff !important;

    border: 0 !important;
    border-radius: 6px !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    text-transform: uppercase !important;

    text-decoration: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    translate: none !important;

    clip-path: none !important;
    -webkit-clip-path: none !important;

    overflow: hidden !important;
    pointer-events: auto !important;

    box-sizing: border-box !important;

    z-index: 30 !important;

    transition:
        background-color 0.3s ease,
        color 0.3s ease !important;
}


/* Hover */
.woocommerce ul.products li.product
.qodef-woo-product-button-holder > a:hover,

.related.products ul.products li.product
.qodef-woo-product-button-holder > a:hover,

.related.products .product
.qodef-woo-product-button-holder > a:hover {
    background: #ffe600 !important;
    color: #000000 !important;
}


/* =========================================================
   8. ETCHY MASK ELEMENTS
   ========================================================= */

/*
 * IMPORTANT:
 * Do NOT hide the whole qodef-btn-masked element because
 * Etchy can place the actual clickable anchor around/inside
 * its button structure.
 *
 * Only hide decorative cloned/masked CHILD elements.
 */


/* Decorative span */
.woocommerce ul.products li.product
.qodef-woo-product-button-holder > span.qodef-btn-masked,

.related.products .product
.qodef-woo-product-button-holder > span.qodef-btn-masked {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* Cloned text */
.woocommerce ul.products li.product
.qodef-woo-product-button-holder .qodef-m-text.qodef--cloned,

.related.products .product
.qodef-woo-product-button-holder .qodef-m-text.qodef--cloned {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* Holder pseudo elements */
.woocommerce ul.products li.product
.qodef-woo-product-button-holder::before,

.woocommerce ul.products li.product
.qodef-woo-product-button-holder::after,

.related.products .product
.qodef-woo-product-button-holder::before,

.related.products .product
.qodef-woo-product-button-holder::after {
    display: none !important;
    content: none !important;
}


/* Button pseudo elements */
.woocommerce ul.products li.product
.qodef-woo-product-button-holder > a::before,

.woocommerce ul.products li.product
.qodef-woo-product-button-holder > a::after,

.related.products .product
.qodef-woo-product-button-holder > a::before,

.related.products .product
.qodef-woo-product-button-holder > a::after {
    display: none !important;
    content: none !important;
}


/* Real button text */
.qodef-woo-product-button-holder > a .qodef-m-text {
    display: inline-block !important;

    position: relative !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    translate: none !important;

    clip-path: none !important;
    -webkit-clip-path: none !important;

    transition: none !important;

    z-index: 40 !important;
}


/* Hide only cloned text */
.qodef-woo-product-button-holder > a
.qodef-m-text.qodef--cloned {
    display: none !important;
}


/* =========================================================
   9. WOOCOMMERCE DEFAULT ADD-TO-CART BUTTON
   ========================================================= */

.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.product_type_simple,
.woocommerce ul.products li.product a.product_type_variable {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 44px !important;

    margin-top: 15px !important;
    padding: 12px 15px !important;

    background: #000000 !important;
    color: #ffffff !important;

    border: 0 !important;
    border-radius: 6px !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-transform: uppercase !important;
    text-decoration: none !important;

    clip-path: none !important;
    -webkit-clip-path: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    box-sizing: border-box !important;

    z-index: 20 !important;
}

.woocommerce ul.products li.product > a.button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.product_type_simple:hover,
.woocommerce ul.products li.product a.product_type_variable:hover {
    background: #ffe600 !important;
    color: #000000 !important;
}


/* =========================================================
   10. RELATED PRODUCT CARD CONTENT
   ========================================================= */

.related.products ul.products li.product > a.woocommerce-LoopProduct-link,
.related.products ul.products li.product > a.woocommerce-loop-product__link {
    display: block !important;
    width: 100% !important;
}

.related.products ul.products li.product .woocommerce-loop-product__title {
    margin-top: 15px !important;
}


/* =========================================================
   11. SINGLE PRODUCT PAGE
   ========================================================= */

.single-product .site-main,
.single-product #qodef-page-inner,
.single-product div.product {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 20px !important;
    padding-right: 20px !important;

    box-sizing: border-box !important;
}

.single-product div.product {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 40px !important;
}

.single-product div.product div.images {
    width: 100% !important;
    max-width: 480px !important;

    margin: 0 !important;
    float: none !important;
}

.single-product div.product div.images img {
    width: 100% !important;
    height: auto !important;
    max-height: 500px !important;

    object-fit: contain !important;

    border-radius: 8px !important;
}

.single-product div.product div.summary {
    width: 100% !important;
    max-width: 600px !important;

    float: none !important;

    padding-top: 10px !important;
}


/* Single product buttons */
.single-product .summary form.cart .single_add_to_cart_button,
.single-product .summary .button {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 44px !important;
    width: auto !important;

    margin-left: 10px !important;
    padding: 14px 28px !important;

    background: #000000 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 6px !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: normal !important;

    clip-path: none !important;
    -webkit-clip-path: none !important;

    overflow: hidden !important;

    transition:
        background-color 0.3s ease,
        color 0.3s ease !important;
}

.single-product .summary form.cart .single_add_to_cart_button:hover,
.single-product .summary .button:hover {
    background: #ffe600 !important;
    color: #000000 !important;
}


/* Single-product cloned text */
.single-product .summary .button .qodef-m-text.qodef--cloned,
.single-product .summary .single_add_to_cart_button .qodef-m-text.qodef--cloned {
    display: none !important;
}

.single-product .summary .button .qodef-m-text,
.single-product .summary .single_add_to_cart_button .qodef-m-text {
    color: inherit !important;
    transform: none !important;
    transition: none !important;
}


/* =========================================================
   12. PRODUCT GALLERY
   ========================================================= */

.woocommerce-product-gallery__image img {
    transform: none !important;
    transition: none !important;
}

.zoomImg {
    display: none !important;
    pointer-events: none !important;
}

.woocommerce-product-gallery__image {
    pointer-events: none !important;
}


/* =========================================================
   13. FOOTER / RELATED PRODUCTS SEPARATION
   ========================================================= */

.single-product section.related.products {
    margin-bottom: 120px !important;
    padding-bottom: 30px !important;
}

.single-product #qodef-page-footer {
    margin-top: 20px !important;
}


/* Do not globally hide footer buttons.
   Only hide the specific footer mask decoration if it exists. */

#footer-section .qodef-btn-masked {
    /* intentionally not display:none */
    display: none;
}


/* =========================================================
   14. PAGINATION
   ========================================================= */

.woocommerce-pagination {
    margin-top: 20px !important;
}

.woocommerce-pagination .page-numbers {
    color: #6f6f6f !important;
}

.woocommerce-pagination .page-numbers.current {
    color: #000000 !important;
    display: inline-block !important;
    transform: scale(1.1) !important;
}


/* =========================================================
   15. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .single-product div.product {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .single-product div.product div.images,
    .single-product div.product div.summary {
        width: 100% !important;
        max-width: 100% !important;
    }

    .single-product .summary form.cart .single_add_to_cart_button,
    .single-product .summary .button {
        margin-left: 0 !important;
    }

    .single-product .related.products,
    .single-product section.related.products {
        margin-top: 45px !important;
        margin-bottom: 70px !important;
        padding-bottom: 20px !important;
    }

    .single-product .related.products ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 15px !important;
    }
}

@media (max-width: 600px) {
    .single-product .related.products ul.products {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   16. ELEMENTOR GRID SAFETY
   ========================================================= */

/*
 * IMPORTANT:
 * No global ".elementor-grid" column override is used.
 * This prevents the footer/social widgets from breaking.
 */


/* =========================================================
   END
   ========================================================= */


/* =========================================================
   17. CATBIRD PHP-GENERATED RELATED PRODUCT BUTTON
   ========================================================= */

/*
 * This is the fallback/guaranteed button generated from functions.php.
 * It is intentionally independent of Etchy's masked button markup.
 */

.single-product .related.products ul.products li.product
.catbird-related-button-holder {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;

    margin-top: auto !important;
    padding: 15px 0 0 !important;

    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;

    overflow: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;

    box-sizing: border-box !important;
    z-index: 999 !important;
}

.single-product .related.products ul.products li.product
.catbird-related-add-to-cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 12px 15px !important;

    background: #000000 !important;
    color: #ffffff !important;

    border: 0 !important;
    border-radius: 6px !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    box-sizing: border-box !important;

    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    transform: none !important;
    translate: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;

    overflow: hidden !important;
    z-index: 1000 !important;

    transition:
        background-color 0.25s ease,
        color 0.25s ease !important;
}

.single-product .related.products ul.products li.product
.catbird-related-add-to-cart:hover {
    background: #ffe600 !important;
    color: #000000 !important;
}

.single-product .related.products ul.products li.product
.catbird-related-button-text {
    display: block !important;
    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;

    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;

    z-index: 1001 !important;
}

.single-product .related.products ul.products li.product
.catbird-related-add-to-cart::before,
.single-product .related.products ul.products li.product
.catbird-related-add-to-cart::after {
    display: none !important;
    content: none !important;
}

@media (max-width: 768px) {
    .single-product .related.products ul.products li.product
    .catbird-related-button-holder {
        padding-top: 12px !important;
    }
}