/* Compact phone (< 768px) and tablet (768-1199px) layout. Desktop (>= 1200px) is not affected.
   Cards per slider row are set in js/chozhan-mobile.js (2.3 on phones, 3 on tablets). */

/* ---------- Phones + tablets ---------- */
@media (max-width: 1199.98px) {
    /* Product cards: small fixed image, tight padding */
    .product-cart-wrap {
        border-radius: 12px;
    }

    .product-cart-wrap .product-img-action-wrap {
        max-height: none;
        margin-bottom: 0;
        padding: 8px 8px 0;
    }

    .product-cart-wrap .product-img a,
    .product-cart-wrap.style-2 .product-img-action-wrap .product-img a {
        aspect-ratio: auto;
        height: 140px;
    }

    .product-cart-wrap .product-img a img {
        height: 140px;
        object-fit: contain;
    }

    .product-cart-wrap .product-content-wrap {
        padding: 6px 8px 8px;
    }

    .product-cart-wrap .product-content-wrap .product-category {
        margin-bottom: 2px;
        font-size: 11px;
        line-height: 1.3;
    }

    /* Name: 14px, 2 lines max */
    .product-cart-wrap .product-content-wrap h2,
    .product-cart-wrap .product-content-wrap h2.text-truncate,
    .product-cart-wrap.style-2 .product-content-wrap h2 {
        display: -webkit-box;
        min-height: calc(2 * 1.3em);
        margin-bottom: 4px;
        overflow: hidden;
        font-size: 14px;
        line-height: 1.3;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .product-cart-wrap .product-rate-cover {
        line-height: 1;
    }

    /* Price 15px, old price smaller */
    .product-cart-wrap .product-price span {
        font-size: 15px;
    }

    .product-cart-wrap .product-price span.old-price {
        margin-left: 4px;
        font-size: 12px;
    }

    /* Price and a small Add button on one line (not full width) */
    .product-cart-wrap .product-card-bottom,
    .product-cart-wrap .product-card-bottom.d-block {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
        margin-top: 4px;
    }

    .product-cart-wrap .product-card-bottom .add-cart .add {
        margin-top: 0 !important;
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 12px;
        line-height: 1.2;
    }

    .product-cart-wrap .product-card-bottom .add-cart .add i {
        margin-right: 3px !important;
    }

    /* Home product sliders (product-banner-section): own price block and a full-width "Add To Cart" button */
    .section-flash-sale-products .product-cart-wrap .product-rate[style*='hidden'] {
        display: none !important;
    }

    .section-flash-sale-products .product-cart-wrap .product-content-wrap .mt-10.mb-15 {
        margin: 2px 0 6px !important;
    }

    .section-flash-sale-products .product-cart-wrap .product-content-wrap .btn.w-100 {
        width: auto !important;
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .section-flash-sale-products .product-cart-wrap .product-content-wrap .btn.w-100 i {
        margin-right: 3px !important;
    }

    .product-cart-wrap .product-badges span {
        padding: 5px 10px 6px;
        font-size: 10px;
    }

    /* Slider arrows and the quick-view (eye) button are hidden: swipe instead */
    .carousel-4-columns-cover .slider-arrow,
    .carousel-6-columns-cover .slider-arrow,
    .carousel-8-columns-cover ~ .slider-arrow,
    .carousel-8-columns-arrow,
    .carousel-10-columns-arrow,
    .carousel-4-columns-arrow {
        display: none !important;
    }

    .product-cart-wrap .product-action-1 .js-quick-view-button {
        display: none !important;
    }

    .carousel-4-columns-cover .carousel-4-columns .product-cart-wrap {
        margin-left: 5px;
        margin-right: 5px;
    }

    /* Deals of the Day: same compact card, countdown and text below the image (no overlay) */
    .product-cart-wrap.style-2 .product-img-action-wrap img {
        border-radius: 8px;
    }

    .product-cart-wrap.style-2 .product-content-wrap {
        max-width: 100%;
        margin-top: 0;
        padding: 6px 8px 8px;
    }

    .product-cart-wrap.style-2 .product-content-wrap .deals-countdown-wrap {
        position: static;
        width: 100%;
    }

    .product-cart-wrap.style-2 .product-content-wrap .deals-content {
        padding: 0;
        box-shadow: none;
    }

    .deals-countdown .countdown-section {
        margin: 0 1px 6px;
        padding: 4px 1px 14px;
        border-radius: 4px;
        background-color: #f4f6fa;
    }

    .deals-countdown .countdown-section .countdown-amount {
        width: auto;
        min-width: 26px;
        height: 20px;
        font-size: 13px;
        line-height: 20px;
    }

    .deals-countdown .countdown-section .countdown-period {
        bottom: 3px;
        font-size: 9px;
    }

    /* Section titles and spacing about half */
    .section-title h2,
    .section-title h3 {
        margin-bottom: 10px;
        font-size: 20px;
    }

    .section-padding {
        padding: 12px 0;
    }

    .section-deals-of-the-day.pb-5 {
        padding-bottom: 12px !important;
    }

    /* Top Categories: small items */
    .card-2 {
        min-height: 0;
        margin-bottom: 8px;
        padding: 10px 0 8px;
    }

    .card-2 figure {
        margin-bottom: 6px;
    }

    .card-2 figure img {
        max-width: 48px;
    }

    .card-2 .heading-card {
        padding: 0 4px;
        font-size: 12px;
        line-height: 1.3;
    }

    .card-2 > span {
        font-size: 11px;
    }

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

    /* Products / category pages: short banner, small gap below */
    .page-header.mt-30 {
        margin-top: 12px !important;
    }

    .page-header.mb-75 {
        margin-bottom: 12px !important;
    }

    .page-header .archive-header {
        display: flex;
        align-items: center;
        max-height: 110px;
        min-height: 80px;
        padding: 14px 16px;
        background-position: center;
    }

    .page-header .archive-header .row {
        width: 100%;
        margin: 0;
    }

    .page-header .archive-header h1 {
        margin-bottom: 4px !important;
        font-size: 24px;
        line-height: 1.2;
    }

    .page-header .archive-header .breadcrumb {
        font-size: 13px;
    }

    /* Listing grid: small gaps */
    .bb-product-items-wrapper .row {
        margin-left: -4px;
        margin-right: -4px;
    }

    .bb-product-items-wrapper .row > [class*='col-'] {
        margin-bottom: 8px !important;
        padding-left: 4px;
        padding-right: 4px;
    }

    .bb-product-items-wrapper .product-cart-wrap {
        height: 100%;
        margin-bottom: 0;
    }

    .bb-product-items-wrapper .shop-product-filter {
        margin-bottom: 12px;
    }
}

/* ---------- Tablets: 3 per row ---------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .bb-product-items-wrapper .row > [class*='col-'],
    .section-deals-of-the-day .row > [class*='col-'] {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .section-deals-of-the-day .row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .section-deals-of-the-day .row > [class*='col-'] {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* ---------- Phones: 2 per row ---------- */
@media (max-width: 767.98px) {
    .bb-product-items-wrapper .row > [class*='col-'],
    .section-deals-of-the-day .row > [class*='col-'] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .section-deals-of-the-day .row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .section-deals-of-the-day .row > [class*='col-'] {
        margin-bottom: 10px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .section-deals-of-the-day .product-cart-wrap {
        height: 100%;
        margin-bottom: 0;
    }

    /* WhatsApp: smaller, above the bottom menu */
    .chozhan-whatsapp-float {
        right: 12px;
        bottom: 76px;
        width: 48px;
        height: 48px;
    }

    .chozhan-whatsapp-float svg {
        width: 24px;
        height: 24px;
    }
}

/* Bottom menu is shown up to 768px: keep the page end visible above it */
@media (max-width: 768px) {
    body {
        padding-bottom: 64px;
    }
}