/* ============================================================
   КАОЛИНА ПЛИТКА — Responsive Styles
   Breakpoints:
     Desktop  ≥ 1200px  (base)
     Tablet   768–1199px
     Mobile   ≤ 767px
   ============================================================ */

/* -----------------------------------------------------------
   Tablet  768px – 1199px
   ----------------------------------------------------------- */
@media (max-width: 1199px) {

  :root {
    --container-pad: 16px;
    --sidebar-width: 230px;
    --header-height: 72px;
  }

  /* Topbar */
  .topbar__left .topbar__item:last-child { display: none; }

  /* Header */
  .header__search { max-width: 220px; }
  .header__logo-title { font-size: 14px; }

  /* Nav */
  .nav__link { padding: 8px 8px; font-size: 13px; }
  .mega-menu {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    height: min(560px, calc(100vh - var(--header-height) - var(--topbar-height) - 28px));
  }
  .mega-menu__categories--level-1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mega-menu__panel--brands {
    border-left: 0;
    border-top: 1px solid var(--color-border-light);
    padding-left: 0;
    padding-top: var(--space-lg);
  }
  .mega-menu__brands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Hero */
  .hero__slide-inner { display: flex; }
  .hero__title { font-size: 30px; }
  .hero__features { grid-template-columns: repeat(2, 1fr); }
  .hero__content { padding-right: var(--space-xl); }

  /* Catalog grid */
  .catalog-grid { display: flex; }
  .cat-card { flex-basis: calc((100% - (2 * var(--space-lg))) / 3); }

  /* Collections */
  .collections-track { grid-template-columns: repeat(4, 1fr); }
  .collection-card { flex-basis: calc((100% - (3 * var(--space-lg))) / 4); }
  .catalog-collections-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }

  /* Products */
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .products-grid--6 { grid-template-columns: repeat(4, 1fr); }
  #products .product-card { flex-basis: calc((100% - (3 * var(--space-lg))) / 4); }
  .brand-card { flex-basis: calc((100% - (3 * var(--space-lg))) / 4); }

  /* Advantages */
  .advantages__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }

  /* Why us */
  .why-us__grid { grid-template-columns: repeat(3, 1fr); }

  /* About/contacts */
  .about-contacts { grid-template-columns: 1fr 1fr; }
  .about-contacts > :last-child { grid-column: 1 / -1; }

  /* News grid */
  .news-grid { grid-template-columns: repeat(2, 1fr); }

  /* Blog */
  .blog-layout { grid-template-columns: 1fr 240px; }
  .blog-card { grid-template-columns: 180px 1fr; }

  /* Product detail */
  .product-detail { gap: var(--space-xl); }
  .product-info__title { font-size: var(--font-size-2xl); }
  .product-info__price { font-size: 28px; }

  /* Specs layout */
  .specs-layout { grid-template-columns: 1fr 280px; gap: var(--space-xl); }

  /* Selection block */
  .selection-block__inner { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .selection-block__steps { grid-template-columns: repeat(2, 1fr); }

  /* Cart */
  .cart-layout { grid-template-columns: 1fr 300px; }

  /* Checkout */
  .checkout-layout { grid-template-columns: 1fr 320px; }

  /* Footer */
  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }

  /* Category layout */
  .category-layout { gap: var(--space-lg); }
  .cat-content__toolbar { flex-wrap: wrap; }
}

/* -----------------------------------------------------------
   Mobile  ≤ 767px
   ----------------------------------------------------------- */
@media (max-width: 767px) {

  .catalog-collections-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-lg) var(--space-md); }
  .catalog-view-tabs { display:flex; width:100%; }
  .catalog-view-tab { flex:1; min-width:0; padding-inline:12px; }

  :root {
    --container-pad: 14px;
    --header-height: 62px;
    --topbar-height: 0px;
    --space-4xl: 40px;
    --space-3xl: 32px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
  }

  /* Topbar — hide on mobile */
  .topbar { display: none; }

  /* Header */
  .header { position: sticky; top: 0; z-index: 100; }
  .header__inner { gap: var(--space-md); }
  .header__nav,
  .header__search,
  .header__phone-block { display: none; }
  .header__burger { display: flex; }
  .header__logo-sub { display: none; }
  .header__logo-title { font-size: 13px; }
  .header__logo-img { height: 36px; }
  .header__action-btn { width: 34px; height: 34px; }
  .header__action-btn svg { width: 18px; height: 18px; }

  /* Mobile nav */
  .mobile-nav { display: block; top: var(--header-height); }

  /* Breadcrumbs */
  .breadcrumbs { font-size: 11px; }

  /* Section */
  .section { padding: var(--space-2xl) 0; }
  .section-title { font-size: var(--font-size-xl); }
  .section-header { margin-bottom: var(--space-lg); }
  .section-header .section-link { display: none; }

  /* Hero */
  .hero__slide { flex-direction: column; min-height: auto; }
  .hero__slide-inner { flex-direction: column; }
  .hero__media::after {
    background: linear-gradient(
      180deg,
      rgba(237, 243, 252, 0) 0,
      rgba(237, 243, 252, .15) 150px,
      #edf3fc 220px,
      #edf3fc 100%
    );
  }
  .hero__content { flex: none; order: 2; padding: var(--space-lg) 0; }
  .hero__media { position: relative; inset: auto; flex: none; order: 1; width: 100%; height: 220px; }
  .hero__image { position: static; width: 100%; height: 100%; }
  .hero__title { font-size: 24px; }
  .hero__text { font-size: var(--font-size-sm); margin-bottom: var(--space-lg); }
  .hero__buttons { gap: var(--space-sm); }
  .hero__buttons .btn { padding: 10px 16px; font-size: 13px; }
  .hero__features { grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
  .hero__feature-icon { width: 30px; height: 30px; }
  .hero__feature-text strong { font-size: 12px; }

  /* Catalog grid */
  .catalog-grid { display: flex; gap: var(--space-md); }
  .cat-card { flex: 0 0 calc((100% - var(--space-md)) / 2); }
  #catalog .cat-card__img { aspect-ratio: 4 / 3; }
  .catalog-slider__arrow { display: none; }

  /* Collections */
  .collections-track { grid-template-columns: repeat(2, 1fr); overflow-x: auto; }
  .collection-card { flex: 0 0 calc((100% - var(--space-md)) / 2); }

  /* Products */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .products-grid--6 { grid-template-columns: repeat(2, 1fr); }
  #products .product-card__img { aspect-ratio: 1; }
  #products .product-card { flex: 0 0 calc((100% - var(--space-md)) / 2); }
  .products-slider__arrow { display: none; }
  .brands-track { gap: var(--space-md); }
  .brand-card { flex: 0 0 calc((100% - var(--space-md)) / 2); min-height: 124px; padding: var(--space-md); }
  .brands-slider__arrow { display: none; }
  .products-grid--3 { grid-template-columns: 1fr; }
  .product-card__footer { flex-wrap: wrap; gap: var(--space-sm); }

  /* Tabs (section tabs) */
  .section-tabs { gap: var(--space-md); overflow-x: auto; padding-bottom: 4px; }
  .tabs { overflow-x: auto; }
  .tab-btn { padding: var(--space-sm) var(--space-md); font-size: 13px; }

  /* Advantages */
  .advantages__grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .advantage-item { flex-direction: column; gap: var(--space-sm); }
  .advantage-item__icon { width: 40px; height: 40px; }

  /* Why us */
  .why-us__grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }

  /* Selection block */
  .selection-block { padding: var(--space-xl); border-radius: var(--radius-xl); }
  .selection-block__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .selection-block__steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .selection-step__icon { width: 48px; height: 48px; }

  /* About/contacts */
  .about-contacts { grid-template-columns: 1fr; gap: var(--space-2xl); }

  /* News */
  .news-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }

  /* Footer */
  .footer__top { padding: var(--space-2xl) 0 var(--space-lg); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  .footer__bottom-inner { flex-direction: column; text-align: center; }
  .footer__reqs { order: 3; }

  /* Breadcrumbs */
  .breadcrumbs__list { flex-wrap: nowrap; overflow-x: auto; }

  /* Category page */
  .category-layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 120;
    border-radius: 0;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    padding-top: 60px;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar__close-btn {
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    z-index: 130;
    display: flex;
  }
  .filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 14px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
  }
  .filter-toggle-btn svg { width: 16px; height: 16px; }
  .cat-content__toolbar { flex-direction: column; align-items: flex-start; }
  .cat-content__right { width: 100%; justify-content: space-between; }
  .quick-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .quick-cat { min-width: 72px; flex-shrink: 0; }

  /* Product page */
  .product-detail { grid-template-columns: 1fr; gap: var(--space-xl); }
  .product-gallery__thumbs { grid-template-columns: repeat(5, 1fr); }
  .product-info__title { font-size: var(--font-size-xl); }
  .product-info__price { font-size: 28px; }
  .product-info__purchase { flex-direction: column; }
  .quantity-counter { width: 100%; justify-content: center; }
  .product-delivery { grid-template-columns: 1fr; }
  .specs-layout { grid-template-columns: 1fr; }

  /* Cart & Checkout */
  .cart-layout { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 70px 1fr; }
  .cart-item__price { grid-column: 2; }
  .checkout-layout { grid-template-columns: 1fr; }
  .delivery-options { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  /* Blog */
  .blog-layout { grid-template-columns: 1fr; }
  .blog-card { grid-template-columns: 1fr; }
  .blog-card__img { height: 200px; }
  .blog-card__body { padding: var(--space-lg); }

  /* Article */
  .article__title { font-size: var(--font-size-2xl); }

  /* Consultation panel */
  .consultation-panel { flex-direction: column; }
  .consultation-panel__icons { margin-left: 0; width: 100%; justify-content: space-around; }

  /* Pagination */
  .pagination { gap: 4px; }
  .page-btn { min-width: 32px; height: 32px; font-size: 13px; }

  /* Minicart dropdown */
  .minicart-dropdown { width: 300px; right: -10px; }

  /* Contacts */
  .contacts-layout { grid-template-columns: 1fr; }

  /* 404 */
  .page-404__code { font-size: 80px; }
  .page-404__title { font-size: var(--font-size-2xl); }

  /* Modal */
  .modal__box { padding: var(--space-xl); }
  .modal__title { font-size: var(--font-size-xl); }

  /* News grid */
  .news-grid { grid-template-columns: 1fr; }
  .news-card { max-width: 100%; }
}

/* -----------------------------------------------------------
   Extra small  ≤ 400px
   ----------------------------------------------------------- */
@media (max-width: 400px) {
  .hero__features { grid-template-columns: 1fr; }
  .catalog-grid { display: flex; }
  .footer__grid { grid-template-columns: 1fr; }
  .advantages__grid { grid-template-columns: 1fr; }
  .why-us__grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .brand-card { flex-basis: 78%; }
  .hero__buttons { flex-direction: column; }
  .hero__buttons .btn { width: 100%; }
}

/* -----------------------------------------------------------
   Print
   ----------------------------------------------------------- */
@media print {
  .topbar, .header, .footer, .sidebar, .breadcrumbs { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Blog responsive overrides live last to supersede legacy selectors. */
@media (max-width: 1100px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-post-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr); gap: 36px; }
  .blog-post-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 40px; }
}

@media (max-width: 900px) {
  .blog-post-hero__layout, .blog-post-layout { grid-template-columns: 1fr; }
  .blog-post-hero__image { max-width: 680px; transform: none; }
  .blog-post-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-post-aside__about { grid-row: span 2; }
}

@media (max-width: 767px) {
  .blog-hero__inner, .blog-hero__inner--image { min-height: 290px; }
  .blog-hero__inner--image::after { background: linear-gradient(90deg, rgba(238,244,252,.97), rgba(238,244,252,.7)); }
  .blog-hero__content { padding-top: 64px; padding-bottom: 36px; }
  .blog-breadcrumbs { top: 20px; }
  .blog-hero h1 { font-size: 36px; }
  .blog-hero p { margin-top: 14px; font-size: 14px; line-height: 1.6; }
  .blog-list-section { padding: 40px 0 54px; }
  .blog-toolbar { align-items: flex-start; }
  .blog-toolbar h2 { font-size: 24px; }
  .blog-card { display: flex; grid-template-columns: none; }
  .blog-card__body { padding: 18px; }
  .blog-post-hero { padding-bottom: 38px; }
  .blog-post-hero__layout { padding-top: 8px; }
  .blog-post-hero h1 { font-size: 34px; }
  .blog-post-lead { font-size: 15px; }
  .blog-post-section { padding: 42px 0 58px; }
  .blog-post-content { font-size: 15px; line-height: 1.75; }
  .blog-post-content h2 { margin-top: 34px; font-size: 25px; }
  .blog-post-content h3 { font-size: 21px; }
  .blog-post-content table { display: block; overflow-x: auto; }
}

@media (max-width: 620px) {
  .blog-toolbar { display: grid; gap: 16px; }
  .blog-sort { flex-wrap: wrap; }
  .blog-grid { grid-template-columns: 1fr; gap: 18px; }
  .blog-card__image { aspect-ratio: 1.62; }
  .blog-post-breadcrumbs { overflow-x: hidden; }
  .blog-post-hero__image { border-width: 3px; border-radius: var(--radius-lg); }
  .blog-post-meta { gap: 7px; }
  .blog-post-meta span, .blog-post-meta time { padding: 6px 8px; }
  .blog-post-nav, .blog-post-aside { grid-template-columns: 1fr; }
  .blog-post-nav__item--next { text-align: left; }
  .blog-post-aside__about { grid-row: auto; }
  .blog-post-comments { margin-top: 38px; padding-top: 30px; }
}

@media (max-width: 400px) {
  .blog-card__footer { align-items: flex-start; flex-direction: column; }
  .blog-post-hero h1 { font-size: 30px; }
}