/*
Theme Name: Woostify Child
Theme URI: https://woostify.com
Template: woostify
Author: Woostify
Author URI: https://woostify.com/about
Description: Woostify is fast, lightweight, responsive and super flexible WooCommerce theme built with SEO, speed, and usability in mind. The theme works great with any of your favorite page builder likes Elementor, Beaver Builder, SiteOrigin, Thrive Architect, Divi, etc. Therefore, you can build any type of websites like shop, business agencies, corporate, portfolio, education, university portal, consulting, church, restaurant, medical and so on. Woostify is compatible with all well-coded plugins, including major ones like WooCommerce, OrbitFox, Yoast, BuddyPress, bbPress, etc. Learn more about the theme and ready to import demo sites at https://woostify.com
Tags: e-commerce,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-header,custom-menu,featured-images,full-width-template,threaded-comments,rtl-language-support,footer-widgets,sticky-post,theme-options
Version: 2.4.2.1753793801
Updated: 2025-07-29 14:56:41
*/

/* -------------------------------------
   General Container
-------------------------------------- */
.woostify-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ========================================
   Categories Grid - Fixed Full-Width Layout
   ======================================== */
.subcategories-scroll-wrap {
    margin-bottom: 2rem;
    width: 100%;
    overflow: hidden;
}

.subcategories-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 5px;
    background-color: #AB181B;
    padding: 5px;
    border-radius: 5px;
    width: 100%;
}

.subcategories-carousel ul.product-categories {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
}

.subcategories-carousel li.product-category {
    background-color: #f5f5f5;
    border: 1px solid #000;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    min-width: 160px;
}

/* Reduced font size for category titles */
.subcategories-carousel .woocommerce-loop-category__title {
    font-size: 0.9rem;
    margin: 0.3rem 0;
}

/* Removed yellow highlight from product count */
.subcategories-carousel .woocommerce-loop-category__title mark.count {
    background: transparent !important;
    color: inherit !important;
    font-size: 0.8rem;
    padding: 0;
    margin-left: 4px;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
    .subcategories-carousel .woocommerce-loop-category__title {
        font-size: 0.85rem;
    }
}

/* ======================
   BREADCRUMBS
   ====================== */
.custom-breadcrumbs {
    padding: 12px 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid #e0e0e0;
}

.custom-breadcrumbs a,
.custom-breadcrumbs .woocommerce-breadcrumb {
    color: #ab181b !important;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
}

.custom-breadcrumbs a:hover {
    text-decoration: underline;
    color: #8a1416 !important;
}

/* Separator styling */
.custom-breadcrumbs .woocommerce-breadcrumb > span:not(:last-child)::after {
    content: "›";
    margin: 0 8px;
    color: #ab181b;
    font-weight: bold;
}

/* ==============================
   Style Elementor category widget
   ============================== */
.elementor-element-312adb3 .woocommerce.columns-6 ul.products .woocommerce-loop-category__title {
    font-size: 0.9rem;
    margin: 0.3rem 0;
}

.elementor-element-312adb3 .woocommerce.columns-6 ul.products .woocommerce-loop-category__title mark.count {
    background: transparent !important;
    color: inherit !important;
    font-size: 0.8rem;
    padding: 0;
    margin-left: 4px;
}

/* Responsive adjustment for mobile */
@media (max-width: 576px) {
    .elementor-element-312adb3 .woocommerce.columns-6 ul.products .woocommerce-loop-category__title {
        font-size: 0.85rem;
    }
}

/* -------------------------------------
   Product Grid Container
-------------------------------------- */
.woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
    background-color: #AB181B;
    padding: 5px 5px 0 5px;
    border-radius: 5px;
    margin: 5px 0;
    list-style: none;
    gap: 5px;
}

/* -------------------------------------
   Individual Products (6-column layout)
-------------------------------------- */
.woocommerce ul.products li.product {
    background-color: #f5f5f5;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    overflow: hidden;
    margin: 0 !important;
    flex: 0 0 calc(16.6666% - 4.1666px); /* 6-column layout */
    box-sizing: border-box;
}

/* Responsive adjustments for general product grid */
@media (max-width: 1200px) {
    .woocommerce ul.products li.product {
        flex: 0 0 calc(20% - 4px); /* 5 columns */
    }
}

@media (max-width: 992px) {
    .woocommerce ul.products li.product {
        flex: 0 0 calc(25% - 3.75px); /* 4 columns */
    }
}

@media (max-width: 576px) {
    .woocommerce ul.products li.product {
        flex: 0 0 calc(50% - 2.5px); /* 2 columns */
    }
}

/* UNIVERSAL PRODUCT TITLE STYLES - APPLIES TO ALL SECTIONS */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
#subcategory-products-container .products li.product .woocommerce-loop-product__title {
    font-size: 10px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 3em !important;
    margin: 0.5em 0 !important;
    line-height: 1.4 !important;
    word-break: break-word;
    hyphens: auto;
    font-family: inherit !important;
    color: inherit !important;
    padding: 0 !important;
}

/* Specific styles for All Products section */
#subcategory-products-container > .products {
    display: flex;
    flex-wrap: wrap;
    background-color: #AB181B;
    padding: 5px 5px 0 5px;
    border-radius: 5px;
    margin: 5px 0;
    list-style: none;
    gap: 5px;
}

/* 5-column layout for All Products */
@media (min-width: 1201px) {
    #subcategory-products-container .products.columns-5 li.product,
    #subcategory-products-container .products li.product {
        flex: 0 0 calc(20% - 4px); /* 5-column layout */
        box-sizing: border-box;
        background-color: #f5f5f5;
        padding: 8px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        text-align: center;
        overflow: hidden;
        margin: 0 !important;
    }
}

/* Responsive adjustments for All Products section */
@media (max-width: 1200px) {
    #subcategory-products-container .products.columns-5 li.product,
    #subcategory-products-container .products li.product {
        flex: 0 0 calc(20% - 4px); /* 5 columns */
    }
}

@media (max-width: 992px) {
    #subcategory-products-container .products.columns-5 li.product,
    #subcategory-products-container .products li.product {
        flex: 0 0 calc(25% - 3.75px); /* 4 columns */
    }
}

@media (max-width: 576px) {
    #subcategory-products-container .products.columns-5 li.product,
    #subcategory-products-container .products li.product {
        flex: 0 0 calc(50% - 2.5px); /* 2 columns */
    }
}

/* Keep 6-column layout for other sections */
.featured-products-section .products,
.new-arrivals-section .products,
.best-sellers-section .products {
    grid-template-columns: repeat(6, 1fr); /* 6 columns */
}

/* Responsive adjustments for 6-column sections */
@media (max-width: 1200px) {
    .featured-products-section .products,
    .new-arrivals-section .products,
    .best-sellers-section .products {
        grid-template-columns: repeat(5, 1fr); /* 5 columns */
    }
}

@media (max-width: 992px) {
    .featured-products-section .products,
    .new-arrivals-section .products,
    .best-sellers-section .products {
        grid-template-columns: repeat(4, 1fr); /* 4 columns */
    }
}

@media (max-width: 576px) {
    .featured-products-section .products,
    .new-arrivals-section .products,
    .best-sellers-section .products {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
}

/* ======================
   Infinite Scroll
   ====================== */
#infinite-scroll-trigger {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px;
    margin: 20px 0;
}

#infinite-scroll-trigger button {
    background: #333;
    color: white;
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    border-radius: 3px;
    margin-left: 10px;
}

#infinite-scroll-trigger button:hover {
    background: #555;
}

/* ====================== 
   Filter checkbox styles 
   ====================== */
.filter-checkbox-group {
    list-style: none;
    margin: 0;
    padding: 0;
}

.filter-checkbox-group li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding: 5px 0;
    min-width: 0;
}

.filter-checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    flex-shrink: 0;
}

.filter-checkbox-group label {
    cursor: pointer;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    padding-right: 10px;
}

/* Loading state */
.loading-products {
    text-align: center;
    padding: 40px;
    font-style: italic;
    color: #666;
}

.no-products {
    text-align: center;
    padding: 40px;
    color: #666;
}

/* Filter toggle button and sidebar */
.filter-toggle-button {
    display: none;
    margin-bottom: 1rem;
    padding: 8px 15px;
    background: #ab181b;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    text-align: left;
}

.filter-toggle-button .dashicons {
    margin-right: 5px;
}

.shop-filter-sidebar {
    transition: transform 0.3s ease-in-out;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
}

.shop-filter-sidebar .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    background: #ab181b;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    display: none;
}

.shop-filter-sidebar .filter-button {
    display: block;
    margin-top: 15px;
    padding: 8px 15px;
    background: #ab181b;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
}

.product-sort-dropdown {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 1rem;
    width: 100%;
    max-width: 200px;
}

/* Ensure sort section is always aligned to the right */
.filter-sort-section {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
}

.sort-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
}

/* Ensure consistency across all screen sizes */
@media (max-width: 1024px) {
    .filter-sort-section {
        justify-content: flex-end;
        width: 100%;
    }
    .sort-container {
        margin-left: auto;
    }
}

@media (max-width: 768px) {
    .filter-sort-section {
        justify-content: flex-end;
        width: 100%;
    }
    .sort-container {
        margin-left: auto;
    }
}

/* Desktop ≥ 1025px — Docked with fixed max-width */
@media (min-width: 1025px) {
    .shop-filter-sidebar {
        width: 250px !important;
        max-width: 250px !important;
        position: relative;
        min-height: 100%;
    }
    .shop-products-main {
        width: calc(100% - 250px) !important;
    }
    .shop-filter-sidebar .close-button {
        display: none;
    }
    .shop-filter-sidebar .filter-button {
        display: block; /* Ensure filter button is visible */
    }
}

/* Tablet — 769px to 1024px */
@media (max-width: 1024px) and (min-width: 769px) {
    .shop-filter-sidebar {
        width: 250px !important;
        max-width: 250px !important;
        position: relative;
    }
    .shop-products-main {
        width: calc(100% - 250px) !important;
    }
    .shop-filter-sidebar .close-button {
        display: none;
    }
    .shop-filter-sidebar .filter-button {
        display: block; /* Keep filter button visible in tablet range */
    }
}

/* Mobile < 769px — Overlay mode, 85% of screen */
@media (max-width: 768px) {
    .filter-toggle-button {
        display: block; /* Show hamburger menu */
    }
    .shop-filter-sidebar {
        display: none;
        position: fixed !important;
        top: 0;
        left: 0;
        width: 85% !important;
        max-width: 250px !important;
        height: 100vh !important;
        background: #fff;
        z-index: 1000;
        transform: translateX(-100%);
        overflow-y: auto;
        padding: 20px;
        box-sizing: border-box;
    }
    .shop-filter-sidebar.active {
        display: block;
        transform: translateX(0) !important;
    }
    .shop-filter-sidebar .close-button,
    .shop-filter-sidebar .filter-button {
        display: block;
    }
    .shop-products-main {
        width: 100% !important;
    }
}

/* Hide the submit button in the price slider wrapper */
.widget_price_filter .price_slider_wrapper .button {
    display: none !important;
}

/* =======================
   Footer container styles
   ======================= */
/* Footer widget container */
.site-footer-widget {
    padding: 10px 0 20px 0; /* Override default 55px 0 70px 0 */
}

/* Hide empty widget block columns */
#block-27 .wp-block-column:empty {
    display: none; /* Hide empty columns to prevent extra spacing */
}

/* Footer container styles */
.site-footer {
    background-color: #f8f8f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: #333;
    line-height: 1.6;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Footer columns */
.footer-column {
    flex: 1;
    min-width: 200px;
    padding: 0;
}

.footer-heading {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #222;
}

/* Links styling */
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: #ab181b;
}

/* Newsletter form styling */
.newsletter-form {
    margin-top: 20px;
}

.newsletter-form h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.newsletter-form label.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.newsletter-form input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.newsletter-form button {
    background-color: #ab181b;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.newsletter-form button:hover {
    background-color: #8a1416;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        padding: 0;
    }

    .footer-column {
        flex: 100%;
        min-width: 100%;
    }

    .footer-column:not(:last-child) {
        margin-bottom: 20px;
    }
}

/*  ===================
    Pagination Styles
    =================== */
.pagination {
    text-align: center;
    margin: 20px 0;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}

.pagination .current {
    background: #ab181b;
    color: white;
    border-color: #ab181b;
}

.pagination a:hover {
    background: #ab181b;
    color: white;
    border-color: #ab181b;
}