/**
 * Sitekori Shop Page Styles
 * Fulvanu Dairy Farm eCommerce
 */

:root {
    --sk-primary: #146b45;
    --sk-primary-hover: #0f5335;
    --sk-primary-light: #e8f5ee;
    --sk-dark: #111827;
    --sk-card-border: #ebd7c3;
    --sk-card-border-hover: #146b45;
    --sk-font-bn: 'Hind Siliguri', 'SolaimanLipi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   0. Layout & Container Cleanup (Desktop Left & Right Gaps)
   ========================================================================== */
.woocommerce-shop #primary,
.tax-product_cat #primary,
.tax-product_tag #primary {
    max-width: 1220px !important;
    margin: 0 auto !important;
    padding-top: 20px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}

@media (min-width: 1400px) {
    .woocommerce-shop #primary,
    .tax-product_cat #primary,
    .tax-product_tag #primary {
        max-width: 1260px !important;
        padding-left: 55px !important;
        padding-right: 55px !important;
    }
}

/* Hide default plain Astra Shop header */
.woocommerce-shop header.woocommerce-products-header,
.tax-product_cat header.woocommerce-products-header {
    display: none !important;
}

/* Hide/Remove Breadcrumbs on Shop & Category Archives */
.woocommerce-shop .woocommerce-breadcrumb,
.tax-product_cat .woocommerce-breadcrumb,
.tax-product_tag .woocommerce-breadcrumb,
.woocommerce-shop .ast-shop-breadcrumb,
.tax-product_cat .ast-shop-breadcrumb,
.woocommerce-shop .ast-breadcrumbs-wrapper,
.tax-product_cat .ast-breadcrumbs-wrapper,
.woocommerce-shop .ast-breadcrumbs,
.tax-product_cat .ast-breadcrumbs {
    display: none !important;
}

/* ==========================================================================
   1. Boutique Hero Banner (Minimal & Clean)
   ========================================================================== */
.sitekori-shop-hero-banner {
    position: relative;
    background: linear-gradient(135deg, #fbfdfc 0%, #f4f9f6 50%, #edf6f1 100%);
    border: 1.5px solid #d8ecdf;
    border-radius: 18px;
    padding: 18px 24px;
    margin-bottom: 18px;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(20, 107, 69, 0.03);
    text-align: center;
}

.sitekori-shop-hero-title {
    font-family: var(--sk-font-bn) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.25 !important;
}

.sitekori-shop-hero-subtitle {
    font-family: var(--sk-font-bn) !important;
    font-size: 14px !important;
    color: #4b5563 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    max-width: 550px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   2. Category Filter Pills Bar (Smooth Sliding & No Page Overflow)
   ========================================================================== */
.sitekori-category-filter-bar {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.sitekori-category-pills {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 8px;
    padding: 4px 2px 8px 2px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
}

.sitekori-category-pills.is-dragging {
    cursor: grabbing;
}

.sitekori-category-pills::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

@media (min-width: 768px) {
    .sitekori-category-pills {
        justify-content: safe center;
    }
}

.sitekori-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: #374151;
    border: 1.5px solid var(--sk-card-border);
    padding: 7px 16px;
    border-radius: 50px;
    font-family: var(--sk-font-bn);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    flex: 0 0 auto;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.sitekori-cat-pill .cat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ca3af;
    transition: background 0.2s ease;
}

.sitekori-cat-pill .cat-count {
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    padding: 2px 7px;
    border-radius: 50px;
    font-weight: 600;
    line-height: 1.2;
    transition: all 0.2s ease;
}

.sitekori-cat-pill:hover {
    background: #fbf8f4;
    border-color: #d8c3ad;
    color: var(--sk-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
}

.sitekori-cat-pill:hover .cat-dot {
    background: var(--sk-primary);
}

.sitekori-cat-pill.active {
    background: var(--sk-primary);
    color: #ffffff;
    border-color: var(--sk-primary);
    box-shadow: 0 4px 14px rgba(20, 107, 69, 0.28);
}

.sitekori-cat-pill.active .cat-dot {
    background: #86efac;
}

.sitekori-cat-pill.active .cat-count {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

/* ==========================================================================
   3. Result Count & Ordering Bar
   ========================================================================== */
.woocommerce-shop .woocommerce-result-count,
.tax-product_cat .woocommerce-result-count {
    float: left !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    font-family: var(--sk-font-bn) !important;
    font-size: 14.5px !important;
    color: #4b5563 !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.sitekori-result-icon {
    display: inline-flex;
    color: var(--sk-primary);
}

.woocommerce-result-count .highlight-count {
    color: var(--sk-primary) !important;
    font-weight: 700 !important;
}

.woocommerce-shop .woocommerce-ordering,
.tax-product_cat .woocommerce-ordering {
    float: right !important;
    margin: 0 0 20px 0 !important;
}

.woocommerce-shop .woocommerce-ordering select.orderby,
.tax-product_cat .woocommerce-ordering select.orderby {
    height: 42px !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 0 36px 0 14px !important;
    font-family: var(--sk-font-bn) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 15px 15px !important;
}

.woocommerce-shop .woocommerce-ordering select.orderby:focus,
.tax-product_cat .woocommerce-ordering select.orderby:focus {
    border-color: var(--sk-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(20, 107, 69, 0.12) !important;
}

/* Clearfix */
.woocommerce-shop .woocommerce-before-shop-loop::after,
.tax-product_cat .woocommerce-before-shop-loop::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   4. Products Grid (5 Columns per Row)
   ========================================================================== */
.woocommerce ul.products[class*="columns-"],
.woocommerce-page ul.products[class*="columns-"] {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 40px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    clear: both !important;
}

.woocommerce ul.products[class*="columns-"]::before,
.woocommerce ul.products[class*="columns-"]::after {
    display: none !important;
}

/* ==========================================================================
   5. Boutique Product Card
   ========================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: #ffffff !important;
    border: 1.5px solid var(--sk-card-border) !important;
    border-radius: 16px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.02) !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    float: none !important;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 28px rgba(20, 107, 69, 0.09) !important;
    border-color: var(--sk-card-border-hover) !important;
}

/* Thumbnail Box (1:1 Square Frame) */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    padding: 0 !important;
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap a.woocommerce-loop-product__link {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin: 0 !important;
    display: block !important;
}

.woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap img {
    transform: scale(1.06) !important;
}

/* Hide duplicate Astra buttons and on-card sale tags */
.woocommerce ul.products li.product .ast-on-card-button,
.woocommerce ul.products li.product .sitekori-single-badge.onsale {
    display: none !important;
}

/* Custom Loop Discount Badge */
.woocommerce ul.products li.product .sitekori-loop-badge {
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    z-index: 3 !important;
    background: #eef7f2 !important;
    color: var(--sk-primary) !important;
    border: 1px solid #b9e2cb !important;
    padding: 2px 7px !important;
    border-radius: 50px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: var(--sk-font-bn) !important;
    line-height: 1.3 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    pointer-events: none !important;
}

/* Summary Details Area */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
    padding: 0 2px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    justify-content: space-between !important;
}

/* Category */
.woocommerce ul.products li.product .ast-woo-product-category {
    font-family: var(--sk-font-bn) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #8c827a !important;
    margin-bottom: 2px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--sk-font-bn) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
    transition: color 0.2s ease !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 38px !important;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--sk-primary) !important;
}

/* Price */
.woocommerce ul.products li.product .price {
    font-family: var(--sk-font-bn) !important;
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2 !important;
}

.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price > .woocommerce-Price-amount {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--sk-primary) !important;
    text-decoration: none !important;
}

.woocommerce ul.products li.product .price del {
    font-size: 12px !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
}

.woocommerce ul.products li.product .sitekori-loop-savings-pill {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--sk-primary) !important;
    background: var(--sk-primary-light) !important;
    border: 1px solid #c7e6d4 !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    line-height: 1.3 !important;
}

/* Order / Add to Cart Button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .button.add_to_cart_button {
    width: 100% !important;
    height: 36px !important;
    background: var(--sk-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: var(--sk-font-bn) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(20, 107, 69, 0.2) !important;
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

.woocommerce ul.products li.product .button::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'%3E%3C/path%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--sk-primary-hover) !important;
    box-shadow: 0 4px 12px rgba(20, 107, 69, 0.3) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

/* Loading & Added States */
.woocommerce ul.products li.product .button.loading {
    opacity: 0.75 !important;
}

.woocommerce ul.products li.product .button.added::after {
    margin-left: 6px !important;
}

/* ==========================================================================
   6. Modern Pagination
   ========================================================================== */
.woocommerce-pagination {
    margin: 30px 0 20px 0 !important;
    text-align: center !important;
}

.woocommerce-pagination ul.page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.woocommerce-pagination ul.page-numbers li {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-family: var(--sk-font-bn) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
    transition: all 0.2s ease !important;
}

.woocommerce-pagination ul.page-numbers li a:hover {
    background: #f9fafb !important;
    border-color: var(--sk-primary) !important;
    color: var(--sk-primary) !important;
}

.woocommerce-pagination ul.page-numbers li span.current {
    background: var(--sk-primary) !important;
    border-color: var(--sk-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(20, 107, 69, 0.25) !important;
}

/* ==========================================================================
   7. Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1150px) {
    .woocommerce ul.products[class*="columns-"],
    .woocommerce-page ul.products[class*="columns-"] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 13px !important;
    }

    .woocommerce-shop #primary,
    .tax-product_cat #primary,
    .tax-product_tag #primary {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 921px) {
    .woocommerce-shop #primary,
    .tax-product_cat #primary,
    .tax-product_tag #primary {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    .woocommerce ul.products[class*="columns-"],
    .woocommerce-page ul.products[class*="columns-"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .sitekori-shop-hero-banner {
        padding: 18px 16px;
    }

    .sitekori-shop-hero-title {
        font-size: 22px !important;
    }
}

@media (max-width: 767px) {
    /* Prevent page horizontal overflow and add left/right gap */
    .woocommerce-shop,
    .tax-product_cat,
    .tax-product_tag,
    .woocommerce-shop .site-content,
    .tax-product_cat .site-content {
        overflow-x: hidden !important;
    }

    .woocommerce-shop #primary,
    .tax-product_cat #primary,
    .tax-product_tag #primary {
        padding-top: 12px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Minimal Hero Banner on Mobile */
    .sitekori-shop-hero-banner {
        padding: 14px 16px !important;
        border-radius: 14px !important;
        margin-bottom: 14px !important;
    }

    .sitekori-shop-hero-title {
        font-size: 19px !important;
        margin-bottom: 2px !important;
    }

    .sitekori-shop-hero-subtitle {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    /* Smooth Sliding Category Pills on Mobile */
    .sitekori-category-filter-bar {
        margin-bottom: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .sitekori-category-pills {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 2px 2px 8px 2px !important;
        scrollbar-width: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .sitekori-category-pills::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .sitekori-cat-pill {
        flex: 0 0 auto !important;
        padding: 6px 14px !important;
        font-size: 13px !important;
    }

    /* Toolbar Stack on mobile */
    .woocommerce-shop .woocommerce-result-count,
    .tax-product_cat .woocommerce-result-count {
        float: none !important;
        width: 100% !important;
        padding: 0 0 8px 0 !important;
        font-size: 13.5px !important;
    }

    .woocommerce-shop .woocommerce-ordering,
    .tax-product_cat .woocommerce-ordering {
        float: none !important;
        width: 100% !important;
        margin: 0 0 16px 0 !important;
    }

    .woocommerce-shop .woocommerce-ordering select.orderby,
    .tax-product_cat .woocommerce-ordering select.orderby {
        width: 100% !important;
        height: 38px !important;
        font-size: 13.5px !important;
    }

    /* 2 Columns on Mobile */
    .woocommerce ul.products[class*="columns-"],
    .woocommerce-page ul.products[class*="columns-"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-bottom: 30px !important;
    }

    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        padding: 10px !important;
        border-radius: 14px !important;
    }

    .woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
        border-radius: 10px !important;
        margin-bottom: 8px !important;
    }

    .woocommerce ul.products li.product .sitekori-loop-badge {
        top: 6px !important;
        left: 6px !important;
        font-size: 10.5px !important;
        padding: 2px 7px !important;
    }

    .woocommerce ul.products li.product .ast-woo-product-category {
        font-size: 11px !important;
        margin-bottom: 2px !important;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13.5px !important;
        min-height: 38px !important;
        margin-bottom: 4px !important;
    }

    .woocommerce ul.products li.product .price {
        gap: 4px !important;
        margin-bottom: 8px !important;
    }

    .woocommerce ul.products li.product .price ins,
    .woocommerce ul.products li.product .price > .woocommerce-Price-amount {
        font-size: 15.5px !important;
    }

    .woocommerce ul.products li.product .price del {
        font-size: 12px !important;
    }

    .woocommerce ul.products li.product .sitekori-loop-savings-pill {
        font-size: 10px !important;
        padding: 1px 5px !important;
    }

    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .button.add_to_cart_button {
        height: 36px !important;
        font-size: 13px !important;
        padding: 0 8px !important;
    }
}