/**
 * CodeBrillo custom styles
 * @copyright CodeBrillo 2026
 *
 * Loaded after main theme CSS. No build required; edit and refresh.
 *
 * CodeBrillo block section classes (use these to target or override):
 *   .codebrillo-product-category-products   Product category products (tabs by sub-category)
 *   .codebrillo-product-collections          Product Collections (tabs by collection)
 *   .codebrillo-featured-products            Featured products
 *   .codebrillo-featured-product-categories  Featured Product Categories
 *   .codebrillo-theme-ads                    Theme ads
 *
 * Shared spacing:
 *   .section-padding-10                      Section vertical padding 10px (used by the blocks above)
 */

/* Product grid: columns from Theme Options — loaded once per page */
.product-grid-custom { margin-bottom: 16px !important; margin-left: -6px !important; margin-right: -6px !important; }
.product-grid-custom > .product-grid-col {
    flex: 0 0 auto !important;
    padding-left: 6px !important; padding-right: 6px !important;
    margin-bottom: 6px !important;
}
@media (min-width: 1200px) {
    .product-grid-custom > .product-grid-col { width: calc(100% / var(--per-row-desktop, 4)) !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .product-grid-custom > .product-grid-col { width: calc(100% / var(--per-row-tablet, 4)) !important; }
}
@media (max-width: 767px) {
    .product-grid-custom { margin-left: -5px !important; margin-right: -5px !important; }
    .product-grid-custom > .product-grid-col { width: calc(100% / var(--per-row-mobile, 2)) !important; padding-left: 5px !important; padding-right: 5px !important; margin-bottom: 6px !important; }
}
/* Product card: tight padding/margin, smaller elements (all breakpoints) */
.product-grid-custom .product-cart-wrap {
    padding: 8px 8px 10px !important;
    /*margin-bottom: 0 !important;*/
}
.product-grid-custom .product-cart-wrap .product-img-action-wrap {
    max-height: 220px !important;
    padding: 10px 10px 0 !important;
}
.product-grid-custom .product-cart-wrap .product-content-wrap { padding: 0 2px !important; }
/* Desktop/tablet: category 1 line, name 3 lines + fixed heights so cards align */
.product-grid-custom .product-cart-wrap .product-content-wrap .product-category,
.product-grid-custom .product-cart-wrap .product-content-wrap .product-category a {
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important;
}
.product-grid-custom .product-cart-wrap .product-content-wrap .product-category { margin-bottom: 2px !important; }
.product-grid-custom .product-cart-wrap .product-content-wrap h2,
.product-grid-custom .product-cart-wrap h2 {
    font-size: 0.8125rem !important; line-height: 1.3 !important;
    display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important;
    overflow: hidden !important; text-overflow: unset !important; white-space: normal !important;
    margin-bottom: 4px !important;
    min-height: calc(0.8125rem * 1.3 * 3) !important;
}
.product-grid-custom .product-cart-wrap .product-rating-slot { min-height: 1.25rem !important; }
.product-grid-custom .product-cart-wrap .product-content-wrap .product-category a,
.product-grid-custom .product-cart-wrap .font-small { font-size: 0.7rem !important; }
.product-grid-custom .product-cart-wrap .product-rate-cover .font-small { font-size: 0.65rem !important; }
.product-grid-custom .product-cart-wrap .product-card-bottom .price span,
.product-grid-custom .product-cart-wrap .product-price { font-size: 0.875rem !important; }
.product-grid-custom .product-cart-wrap .product-card-bottom {
    margin-top: 6px !important; gap: 6px !important;
    min-height: 2.5rem !important;
}
.product-grid-custom .product-cart-wrap .product-card-bottom .price,
.product-grid-custom .product-cart-wrap .product-card-bottom .product-price { min-height: 2rem !important; }
/* Badges: desktop/tablet */
.product-grid-custom .product-cart-wrap .product-badges span,
.product-grid-custom .product-cart-wrap .product-badges .hot { font-size: 12px !important; padding: 6px 11px !important; }
/* Add button: slightly smaller on desktop/tablet */
.product-grid-custom .add-cart .action-btn.add { padding: 6px 10px !important; font-size: 0.8rem !important; }
.product-grid-custom .add-cart .action-btn.add i { margin-right: 4px !important; }
/* Mobile: even tighter, circle add button, price + cart in one row */
@media (max-width: 767px) {
    .product-grid-custom .product-cart-wrap { padding: 6px 6px 8px !important; }
    .product-grid-custom .product-cart-wrap .product-img-action-wrap { max-height: 160px !important; padding: 0 !important; }
    .product-grid-custom .product-cart-wrap .product-content-wrap .product-category,
    .product-grid-custom .product-cart-wrap .product-content-wrap .product-category a {
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important;
    }
    .product-grid-custom .product-cart-wrap .product-content-wrap h2,
    .product-grid-custom .product-cart-wrap h2 {
        font-size: 0.75rem !important; line-height: 1.3 !important;
        -webkit-line-clamp: 3 !important;
        min-height: calc(0.75rem * 1.3 * 3) !important;
    }
    .product-grid-custom .product-cart-wrap .product-rating-slot { min-height: 1.25rem !important; }
    .product-grid-custom .product-cart-wrap .product-card-bottom {
        display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important;
        min-height: 2.5rem !important;
    }
    .product-grid-custom .product-cart-wrap .product-card-bottom .price,
    .product-grid-custom .product-cart-wrap .product-card-bottom .product-price { margin-bottom: 0 !important; min-height: 2rem !important; }
    .product-grid-custom .product-cart-wrap .product-card-bottom .price span,
    .product-grid-custom .product-cart-wrap .product-price { font-size: 0.8125rem !important; }
    .product-grid-custom .product-cart-wrap .product-badges span,
    .product-grid-custom .product-cart-wrap .product-badges .hot { font-size: 12px !important; padding: 5px 10px !important; }
    .product-grid-custom .add-cart { margin-top: 0 !important; flex-shrink: 0 !important; }
    .product-grid-custom .add-cart .action-btn.add {
        width: 36px !important; height: 36px !important; min-width: 36px !important; padding: 0 !important; border-radius: 100% !important;
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
    }
    .product-grid-custom .add-cart .action-btn.add span { display: none !important; }
    .product-grid-custom .add-cart .action-btn.add i { margin: 0 !important; }
}
/* Single row (product-category-products): CSS-only horizontal scroll, no Slick - works after AJAX */
.codebrillo-product-category-row-inner {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 6px !important; margin: 0 -6px !important; padding: 0 6px !important;
    scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important;
}
.codebrillo-product-category-row-inner > .product-grid-col { flex: 0 0 auto !important; margin-bottom: 0 !important; }
@media (min-width: 1200px) {
    .codebrillo-product-category-row-inner > .product-grid-col {
        width: calc(100% / var(--per-row-desktop, 4)) !important; min-width: calc(100% / var(--per-row-desktop, 4)) !important;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .codebrillo-product-category-row-inner > .product-grid-col {
        width: calc(100% / var(--per-row-tablet, 4)) !important; min-width: calc(100% / var(--per-row-tablet, 4)) !important;
    }
}
@media (max-width: 767px) {
    .codebrillo-product-category-row-inner > .product-grid-col {
        width: calc(100% / var(--per-row-mobile, 2)) !important; min-width: calc(100% / var(--per-row-mobile, 2)) !important;
    }
}



/**
 * Hero Slider Styles
 * Copyright (c) 2026 CodeBrillo. All rights reserved.
 */

 .single-hero-slider {
    background-repeat: no-repeat !important;
    background-position: center !important;
    aspect-ratio: 1000 / 340;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    margin: 0 auto;
    border-radius: inherit;
}

/* Mobile styles */
@media (max-width: 767px) {
    .single-hero-slider {
        max-width: 100%;
        /*aspect-ratio: 16 / 9;*/
    }
}


/**
 * Featured Product Categories Styles
 * Copyright (c) 2026 CodeBrillo. All rights reserved.
 */

.carousel-10-columns-cover .carousel-10-columns .card-2 {
    margin-left: 6px !important;
    margin-right: 6px !important;
} 


/* Your custom overrides below */