/* =========================================================
   responsive.css — adaptive layer (loaded LAST, overrides
   both styles.css and page-local inline <style> blocks)
   Breakpoints: 1280 / 1024 (tablet) / 640 (phone)
   ========================================================= */

/* tighten container gutters on smaller desktops */
@media (max-width: 1280px){
  .container{ padding: 0 24px; }
  .nav__catalog{ margin-left: -24px; }
}

/* ======================= TABLET ≤1024 ======================= */
@media (max-width: 1024px){

  /* ---------- header / nav ---------- */
  .header__inner{ grid-template-columns: auto 1fr; gap: 20px; height: auto; padding: 14px 0; }
  .header__contact{ display: none; }
  .nav__links{ gap: 18px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .nav__links::-webkit-scrollbar{ display: none; }
  .nav__right{ display: none; }
  .utilbar__left span:nth-child(3){ display: none; }

  /* ---------- hero ---------- */
  .hero__grid{ grid-template-columns: 1fr; gap: 36px; padding: 48px 0 56px; }
  .hero h1{ font-size: 46px; }
  .hero__media{ max-width: 460px; }
  .hero__bgnum{ display: none; }

  /* ---------- shared grids ---------- */
  .products-grid{ grid-template-columns: repeat(2, 1fr); }
  .section{ padding: 44px 0; }
  .section-head h2{ font-size: 28px; }

  /* ---------- footer ---------- */
  .footer__grid{ grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  .footer__brand{ grid-column: 1 / -1; }

  /* ---------- index page-local ---------- */
  .cats, .cats--widths{ grid-template-columns: repeat(3, 1fr) !important; }
  .benefits, .delivery-strip{ grid-template-columns: repeat(2, 1fr) !important; }
  .applications{ grid-template-columns: 1fr !important; }
  .calc__inner, .why{ grid-template-columns: 1fr !important; gap: 32px !important; }
  .why{ padding: 32px !important; }
  .brands{ grid-template-columns: repeat(3, 1fr) !important; }
  /* new home blocks */
  .reviews{ grid-template-columns: 1fr !important; }
  .faq-home{ grid-template-columns: 1fr !important; gap: 32px !important; }
  .home-form__inner{ grid-template-columns: 1fr !important; gap: 40px !important; }

  /* ---------- catalog ---------- */
  .catalog__grid{ grid-template-columns: 1fr !important; gap: 24px !important; }
  .filters{ position: static !important; max-height: none !important; overflow: visible !important; }
  .listing, .cat-listing{ grid-template-columns: repeat(2, 1fr) !important; }
  .faq-block, .form-block__inner{ grid-template-columns: 1fr !important; gap: 40px !important; }
  .listing-text{ grid-template-columns: 1fr !important; gap: 28px !important; padding: 32px !important; }
  .catalog__head h1{ font-size: 32px; }

  /* ---------- product (master + generated) ---------- */
  .pp-grid, .product-head{ grid-template-columns: 1fr !important; gap: 32px !important; }
  .similar{ grid-template-columns: repeat(2, 1fr) !important; }
  .twocol, .calc-row, .desc, .desc-grid, .reviews-top, .rev-top,
  .review-list, .calc-block, .spec-cols, .certs{ grid-template-columns: 1fr !important; }
  .certs{ grid-template-columns: repeat(2, 1fr) !important; }
  .tabs__nav, .tabs__inner{ overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .tabs__nav::-webkit-scrollbar, .tabs__inner::-webkit-scrollbar{ display: none; }
  .specs th, .specs-table th, .infotable th{ width: 38% !important; }

  /* ---------- info / landing pages ---------- */
  .layout{ grid-template-columns: 1fr !important; gap: 36px !important; }
  .aside{ position: static !important; flex-direction: row !important; flex-wrap: wrap; }
  .aside__card{ flex: 1 1 240px; }
  .stat-row{ grid-template-columns: repeat(2, 1fr) !important; }
  .feat, .rec, .contact-grid{ grid-template-columns: 1fr !important; }
  .page-head h1{ font-size: 34px; }
}

/* ======================= PHONE ≤640 ======================= */
@media (max-width: 640px){

  .container{ padding: 0 16px; }
  .nav__catalog{ margin-left: -16px; margin-right: 16px; padding: 0 16px; }

  /* ---------- utility bar / header ---------- */
  .utilbar{ font-size: 11px; }
  .utilbar__right{ display: none; }
  .utilbar__inner{ justify-content: center; }
  .header__inner{ grid-template-columns: 1fr; gap: 12px; padding: 12px 0; }
  .logo__text span{ display: none; }
  .search{ height: 42px; }
  .nav__links{ gap: 16px; font-size: 12px; }

  /* ---------- hero ---------- */
  .hero h1{ font-size: 32px; }
  .hero__lead{ font-size: 15px; }
  .hero__cta{ flex-direction: column; align-items: stretch; }
  .hero__cta .btn{ width: 100%; }
  .hero__meta{ grid-template-columns: 1fr 1fr; gap: 20px; }

  /* ---------- shared grids → single column ---------- */
  .products-grid, .listing, .cat-listing, .similar{ grid-template-columns: 1fr !important; }
  .cats, .cats--widths, .brands{ grid-template-columns: repeat(2, 1fr) !important; }
  .benefits, .delivery-strip, .stat-row, .certs{ grid-template-columns: 1fr !important; }
  /* new home blocks — phone */
  .reviews__list{ grid-template-columns: 1fr !important; }
  .home-form__inner{ gap: 28px !important; }
  .section{ padding: 36px 0; }
  .section-head{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .section-head h2{ font-size: 24px; }

  /* ---------- footer ---------- */
  .footer{ padding-top: 40px; margin-top: 48px; }
  .footer__grid{ grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer__bottom{ flex-direction: column; gap: 12px; text-align: center; }

  /* ---------- headings ---------- */
  .catalog__head h1, .page-head h1{ font-size: 26px; }
  .page-head p, .catalog__head .lead{ font-size: 14px; }

  /* ---------- catalog toolbar / filters ---------- */
  .toolbar{ flex-direction: column; align-items: stretch; gap: 12px; }
  .toolbar__right{ justify-content: space-between; }
  .subcats{ gap: 6px; }

  /* ---------- forms ---------- */
  .form{ padding: 24px !important; }
  .form__grid, .calc__panel .row, .panel-row, .calc-block .row{ grid-template-columns: 1fr !important; }
  .form-block, .calc{ padding: 40px 0 !important; }

  /* ---------- product buybox ---------- */
  .pricebox__rows{ grid-template-columns: 1fr !important; }
  .pricebox__buttons{ grid-template-columns: 1fr !important; }
  .pricebox__qty{ grid-template-columns: 1fr !important; gap: 14px !important; }
  .total{ text-align: left !important; }
  .info__perks{ grid-template-columns: 1fr !important; }
  .buy-row{ grid-template-columns: 1fr !important; }

  /* ---------- product gallery ---------- */
  .gallery, .gal{ grid-template-columns: 64px 1fr !important; gap: 10px !important; }
  .gallery__thumbs button, .gal__th button{ width: 64px; height: 64px; }

  /* ---------- aside cards stack ---------- */
  .aside{ flex-direction: column !important; }

  /* ---------- tables: avoid overflow ---------- */
  .specs th, .specs-table th, .infotable th, .spec-table th{ width: 44% !important; padding-left: 14px !important; padding-right: 14px !important; }
  .specs td, .specs-table td, .infotable td, .spec-table td{ padding-left: 14px !important; padding-right: 14px !important; }

  /* ---------- map placeholder ---------- */
  .map-ph{ aspect-ratio: 4 / 3; }
}