/* Mobile layout (phones, < 768px). Loaded after style.css / media.css and
   overrides their fixed-width desktop-first rules. Tablet and desktop are untouched. */
@media (max-width: 767.98px) {

    /* ---------- base ---------- */
    body { overflow-x: hidden; }
    .container { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; }
    h2 { font-size: 26px !important; line-height: 1.15; margin: 8px 0 12px; }
    h1 { font-size: 26px !important; line-height: 1.15; }

    /* ---------- home: hero and category banners ---------- */
    .main__banner { height: 220px !important; }
    .categories__banner { padding: 16px 16px 0 !important; flex-direction: column !important; }
    .categories__left, .categories__right { width: 100% !important; margin: 0 !important; }
    .categories__top, .categories__bottom { height: 150px !important; margin: 0 0 12px 0 !important; border-radius: 6px; }
    .categories__right { height: 150px !important; margin: 0 0 12px 0 !important; border-radius: 6px; }
    .categories__caption { font-size: 22px !important; left: 16px !important; bottom: 12px !important; }

    .catalog__banner { flex-direction: column !important; align-items: stretch !important; padding: 0 16px; }
    .catalog__banner a { display: block; }
    .catalog__banner .catalog__left .catalog__top, .catalog__banner .catalog__left .catalog__bottom,
    .catalog__banner .catalog__right .catalog__top, .catalog__banner .catalog__right .catalog__bottom,
    .catalog__middle { width: 100% !important; height: 140px !important; margin: 0 0 12px 0 !important; border-radius: 6px; }
    .catalog__middle { height: 180px !important; }
    .catalog__caption { font-size: 20px !important; }

    /* ---------- home: sliders (2 per view, see script.js) ---------- */
    .gray__block { padding: 20px 0 !important; }
    .catalog__slider { width: 100% !important; margin: 0 !important; padding: 0 12px; box-sizing: border-box; }
    .catalog__slider .tab .slides__management { margin-bottom: 8px; }
    .catalog__slider .tabs { display: flex !important; justify-content: center; gap: 4px; flex-wrap: nowrap; padding: 0; }
    .catalog__slider .tabs li {
        display: block !important; flex: 1 1 0; text-align: center; margin: 0 !important;
        padding: 8px 4px !important; font-size: 14px !important; white-space: nowrap; min-width: 0;
    }
    .catalog__slider .slick-list { margin: 0 28px; }
    .catalog__slider .slick-slide { padding: 0 6px; box-sizing: border-box; }
    .catalog__slider .slick-slide img { width: 100% !important; height: 170px !important; object-fit: contain; border: 1px solid #eee; background: #fff; }
    .catalog__slider .slide__title { font-size: 13px !important; height: 34px !important; margin: 6px 0 0 !important; overflow: hidden; }
    .catalog__slider .slide__price { font-size: 15px !important; margin: 0 !important; }
    .slick-prev { left: -4px !important; z-index: 2; }
    .slick-next { right: -4px !important; z-index: 2; }
    .catalog__slider .more { margin: 12px 0 0; }

    /* ---------- home: brands and advantages ---------- */
    .brands { padding: 12px 16px !important; }
    .brands .row { justify-content: center; }
    .brand img { width: 72px !important; height: auto !important; }
    .brandon img { width: 100% !important; height: auto !important; }
    .advantages { width: auto !important; margin: 24px 16px 0 !important; }
    .advantages h3 { font-size: 22px; }
    .advantages ul { padding-left: 18px; }

    /* ---------- catalog ---------- */
    .catalog__main .row { margin: 0 !important; }
    .catalog__menu { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 0 12px !important; display: block !important; }
    .catalog__menu form { width: 100%; }
    .catalog__menu .ac-container { width: 100% !important; margin: 0 0 8px !important; }
    /* category list (first <section> in the filter form; the form's first child is the
       CSRF input) as a horizontal strip of chips instead of an open accordion */
    .catalog__menu form > section:first-of-type .ac-title { display: none; }
    .catalog__menu form > section:first-of-type article {
        display: flex !important; height: auto !important; max-height: none !important;
        overflow-x: auto; overflow-y: hidden; gap: 8px; padding: 4px 0 8px; -webkit-overflow-scrolling: touch;
        border: 0 !important; scrollbar-width: none; background: transparent;
    }
    .catalog__menu form > section:first-of-type article::-webkit-scrollbar { display: none; }
    .catalog__menu form > section:first-of-type .catalog__menu_section {
        width: auto !important; flex: 0 0 auto; padding: 0 !important; border: 0 !important; margin: 0 !important;
    }
    .catalog__menu form > section:first-of-type .list-group-item {
        border: 1px solid #ddd; border-radius: 18px; padding: 7px 14px !important; white-space: nowrap; background: #fff; margin: 0 !important;
    }
    .catalog__menu form > section:first-of-type .list-group-item label { margin: 0; font-size: 14px; cursor: pointer; }
    /* brand / price stay as accordions, full width, closed by default */
    .catalog__menu .ac-container .ac-title { width: 100% !important; box-sizing: border-box; }
    .catalog__menu .scrollable { max-height: 220px; overflow-y: auto; }
    .catalog__menu .catalog__menu_section { padding: 6px 10px !important; }

    .filter__menu { margin: 0 0 12px !important; padding: 8px 12px !important; border-radius: 6px; }
    .filter__menu .col-md-12 { padding: 0; }
    .product__sorting { float: none !important; display: flex; align-items: center; gap: 8px; font-size: 13px !important; }
    .product__sorting select { width: auto !important; flex: 1; }

    /* two product cards per row */
    .filter__data { margin: 0 -6px !important; }
    .catalog__item { flex: 0 0 50% !important; max-width: 50% !important; padding: 0 6px 12px !important; }
    .catalog__col { border: 1px solid #eee; border-radius: 6px; padding: 8px; background: #fff; height: 100% !important; }
    .catalog__col img { width: 100% !important; height: 160px !important; object-fit: contain; }
    .catalog__col .slide__title, .catalog__slider .slide__title {
        font-size: 13px !important; line-height: 1.25 !important; height: auto !important; min-height: 33px; margin: 6px 0 0 !important;
        overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .catalog__col .slide__price { font-size: 15px !important; margin: 2px 0 0 !important; }
    .pagination__block { overflow-x: auto; }
    .pagination { flex-wrap: wrap; justify-content: center; }

    /* ---------- product page ---------- */
    .product { margin: 8px 0 !important; min-width: 0 !important; }
    .product-img { height: 260px !important; border-radius: 6px; }
    .product-listing { padding: 16px !important; }
    .product-listing .name { font-size: 24px !important; line-height: 1.2 !important; margin: 0 0 8px; }
    .product-listing .price { font-size: 26px !important; margin: 8px 0 !important; }
    .product-listing .info { font-size: 14px !important; line-height: 1.45; }
    .product-listing .options { margin: 8px 0; }
    .range-picker div, .color-picker img { margin: 4px; }
    .btn-and-rating-box { margin: 8px 0 16px; }
    .breadcrumb { padding: 8px 0 !important; font-size: 12px; flex-wrap: wrap; }

    /* ---------- cart and checkout ---------- */
    .shopping__cart { width: auto !important; margin: 8px 12px !important; }
    .shopping__cart .title { height: auto !important; padding: 14px 16px !important; font-size: 16px !important; }
    .shopping__cart .item {
        position: relative; display: flex !important; flex-wrap: wrap; align-items: center;
        height: auto !important; padding: 12px 12px 12px 12px !important; gap: 4px 10px;
    }
    .shopping__cart .item .buttons { position: absolute; top: 6px; right: 6px; padding: 6px !important; order: 9; }
    .shopping__cart .image { flex: 0 0 76px; }
    .shopping__cart .image img { width: 76px !important; height: 76px !important; object-fit: contain; }
    /* row 1: image + name/color/size (fills the rest, so qty and price wrap to row 2) */
    .shopping__cart .description, .shopping__cart .description__checkout {
        flex: 1 0 calc(100% - 96px); min-width: 0; width: auto !important; text-align: left !important; padding: 0 28px 0 0 !important;
        box-sizing: border-box;
    }
    .shopping__cart .description span, .shopping__cart .description__checkout span {
        text-align: left !important; font-size: 13px !important; line-height: 1.3; margin: 0 !important;
    }
    .shopping__cart .description span:first-child, .shopping__cart .description__checkout span:first-child {
        font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .shopping__cart .item > form, .shopping__cart .quantity__item__checkout { flex: 0 0 auto; width: auto !important; padding: 0 !important; margin-left: 86px; }
    .shopping__cart .quantity__item { padding: 0 !important; }
    .shopping__cart .total-price { flex: 1 1 auto; width: auto !important; padding: 0 !important; text-align: right; font-weight: 600; font-size: 16px; }
    .shopping__cart .cart__header { font-size: 20px !important; padding-bottom: 12px !important; }
    .shopping__cart .btn__ordernow { margin: 20px auto !important; padding: 14px !important; }
    /* checkout form: desktop uses 450px / 215px inputs that overflow a phone */
    .payment__form { display: block !important; margin: 12px !important; }
    .payment__form .card, .payment__form .card__body, .payment__form form, .payment__form form > div { width: 100% !important; box-sizing: border-box; }
    .payment__form input[type="text"], .payment__form input[type="email"], .payment__form #address, .payment__form #phone,
    .payment__form select, .payment__form .custom-select {
        width: 100% !important; margin: 6px 0 !important; box-sizing: border-box; height: 44px !important; line-height: 42px !important;
        padding: 0 12px !important;
    }
    .payment__form select { display: block; }
    .shopping__cart { overflow: visible !important; }

    /* ---------- footer ---------- */
    footer .footer__wrapper { padding: 16px !important; width: auto !important; }
    footer .footer__categories { justify-content: center; gap: 6px 10px; }
    footer .footer__categories .footer__category { width: 30% !important; margin: 4px 0 !important; }
    footer .footer__categories .footer__category p { font-size: 11px !important; line-height: 1.2; }
    footer .footer__info p, footer .footer__help p { font-size: 13px; }
    footer .footer__subscribe input { width: 100% !important; box-sizing: border-box; }
    footer .footer__last .copyright { font-size: 11px; text-align: center; }
    /* room for the fixed bottom bar */
    footer { padding-bottom: 70px !important; }
}