/* ============================================================
   HYDRO PRESS — Mobile Adaptation
   Covers: index, about, contacts, dostavka, servis, prices,
           product pages (product.css classes), katalog-preview
   Breakpoints: 900px (tablet), 600px (phone)
   ============================================================ */

/* ---------- Mobile-only nav injected items ---------- */
.hp-mob-only { display: none !important; }
.hp-mob-phone { font-weight: 800 !important; font-size: 16px !important; }
.hp-mob-nav-open.hp-head .hp-nav a.hp-mob-phone,
.hp-mob-nav-open.head .nav a.hp-mob-phone { color: #fd7e14 !important; }

/* ---------- Hamburger button (injected by mobile.js) ---------- */
.hp-mob-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px 5px;
  flex-shrink: 0;
  border-radius: 7px;
}
.hp-mob-btn:hover { background: #f1f5f9; }
.hp-mob-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: #16365c;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.15s ease;
  transform-origin: center;
}
.hp-mob-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hp-mob-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hp-mob-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile nav open ---------- */
.hp-mob-nav-open.hp-head .hp-wrap,
.hp-mob-nav-open.head .wrap {
  flex-wrap: wrap !important;
  height: auto !important;
  align-content: flex-start;
}

.hp-mob-nav-open.hp-head .hp-nav,
.hp-mob-nav-open.head .nav {
  display: flex !important;
  flex-direction: column !important;
  flex-basis: 100% !important;
  order: 99;
  background: #fff;
  border-top: 1px solid #eef2f7;
  padding: 4px 0 12px !important;
  gap: 0 !important;
  margin-left: 0 !important;
}

.hp-mob-nav-open.hp-head .hp-nav a,
.hp-mob-nav-open.head .nav a {
  display: block !important;
  padding: 12px 4px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #16365c !important;
}
.hp-mob-nav-open.hp-head .hp-nav a:last-child,
.hp-mob-nav-open.head .nav a:last-child { border-bottom: none !important; }
.hp-mob-nav-open.hp-head .hp-nav a:hover,
.hp-mob-nav-open.head .nav a:hover { color: #fd7e14 !important; }
.hp-mob-nav-open .hp-mob-only { display: block !important; }

/* ============================================================
   TABLET — max-width: 900px
   ============================================================ */
@media (max-width: 900px) {

  /* ---- Show hamburger, hide desktop nav ---- */
  .hp-mob-btn { display: flex; }
  .hp-nav, .nav { display: none; }

  /* ---- Header ---- */
  .hp-head .hp-wrap,
  .head .wrap {
    height: 60px !important;
    gap: 8px !important;
  }
  /* Hide Catalog button in header — accessible via hamburger nav */
  .hp-head .hp-head__r .hp-btn,
  .head .head__r .btn { display: none !important; }

  /* ---- Top info bar ---- */
  .hp-top, .top { display: none !important; }

  /* ---- Hero section (index.html) — classes added via IDs ---- */
  #hp-hero-section { min-height: 55vh !important; }
  #hp-hero-bg { display: none !important; }
  #hp-hero-row {
    min-height: 55vh !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #hp-hero-spacer { display: none !important; }
  #hp-hero-text-col {
    flex: 1 !important;
    padding: 46px 24px 46px !important;
    align-items: center !important;
  }
  #hp-hero-text-col > div { max-width: none !important; }
  .hp-hero__h { font-size: 32px !important; line-height: 1.18 !important; }
  .hp-hero__p { font-size: 16px !important; }
  .hp-hero__cta { flex-wrap: wrap !important; }

  /* ---- CTA / "Поможем с выбором" ---- */
  #konstruktor > div:last-child { padding: 60px 20px !important; }
  #konstruktor h2 { font-size: 30px !important; }
  #konstruktor p { font-size: 17px !important; margin-bottom: 32px !important; }

  /* ---- Stats strip ---- */
  .hp-stats .hp-wrap { grid-template-columns: 1fr 1fr !important; }

  /* ---- Popular models / Features ---- */
  .hp-feat { grid-template-columns: 1fr 1fr !important; }

  /* ---- Why section ---- */
  .hp-why { grid-template-columns: 1fr 1fr !important; }

  /* ---- About section ---- */
  .hp-about .hp-wrap { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* ---- Catalog layout ---- */
  .hpc__layout { grid-template-columns: 1fr !important; }

  /* ---- Prices page info grid ---- */
  .hp-info-grid { grid-template-columns: 1fr 1fr !important; }
  .hp-pdf-wrap iframe { height: 500px !important; }
  .hp-pdf-bar { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }

  /* ---- Footer (main pages) ---- */
  .hp-foot__top { grid-template-columns: 1fr 1fr !important; padding: 36px 20px !important; gap: 24px !important; }

  /* ---- Footer (press pages product.css) ---- */
  .foot__top { grid-template-columns: 1fr 1fr !important; padding: 36px 20px !important; }

  /* ---- Product page: stack gallery + buy panel ---- */
  .ptop { flex-direction: column !important; }
  .gal { min-width: 0 !important; flex: none !important; width: 100% !important; }
  .buy { min-width: 0 !important; flex: none !important; width: 100% !important; }
  .gal__main { height: 280px !important; }
  .ptitle h1 { font-size: 22px !important; }
  .tabc { padding: 20px 18px !important; }
  .spec { max-width: 100% !important; }
  .docrow { max-width: 100% !important; }

  /* ---- Section heading sizes ---- */
  .hp-h2 { font-size: 26px !important; }

  /* ---- Inner page banner ---- */
  .hp-banner { padding: 32px 0 !important; }
  .hp-banner h1 { font-size: 26px !important; }

  /* ---- Cart panel full width ---- */
  #hpcart-panel { width: 100% !important; max-width: 100% !important; }

  /* ---- Wrap padding ---- */
  .hp-wrap, .wrap { padding-left: 16px !important; padding-right: 16px !important; }

  /* ---- Catalog preview (katalog-preview.html) ---- */
  .hpc__layout { gap: 16px !important; }
}

/* ============================================================
   PHONE — max-width: 600px
   ============================================================ */
@media (max-width: 600px) {

  /* ---- Phone number in header — hide on very small screens ---- */
  .hp-phone, .phone { display: none !important; }

  /* ---- Фильтр серий и переключатель серий — крупнее тап-зоны ---- */
  .hpc-ser { padding: 11px 16px !important; font-size: 14px !important; }
  .hpc-series__btns { gap: 9px !important; }
  .pswitch__b { padding: 11px 18px !important; }
  .pswitch { gap: 8px 10px !important; }

  /* ---- Hero ---- */
  #hp-hero-section { min-height: auto !important; }
  .hp-hero__h { font-size: 26px !important; }
  .hp-hero__p { font-size: 15px !important; }
  #hp-hero-text-col { padding: 36px 18px 40px !important; }
  .hp-vals { gap: 7px !important; }
  .hp-val { padding: 7px 11px !important; font-size: 13px !important; }

  /* ---- CTA block ---- */
  #konstruktor h2 { font-size: 24px !important; }
  #konstruktor p { font-size: 15px !important; }
  #konstruktor input { min-width: 0 !important; width: 100% !important; }
  #konstruktor > div:last-child > div:last-child { flex-direction: column !important; }

  /* ---- Features: single column ---- */
  .hp-feat { grid-template-columns: 1fr !important; }

  /* ---- Why: single column ---- */
  .hp-why { grid-template-columns: 1fr !important; }

  /* ---- Stats: single column ---- */
  .hp-stats .hp-wrap { grid-template-columns: 1fr 1fr !important; }

  /* ---- Footer: single column ---- */
  .hp-foot__top { grid-template-columns: 1fr !important; }
  .foot__top { grid-template-columns: 1fr !important; }

  /* ---- Prices ---- */
  .hp-info-grid { grid-template-columns: 1fr !important; }
  .hp-pdf-wrap iframe { height: 380px !important; }
  .hp-cta-row { flex-direction: column !important; }
  .hp-cta-row .hp-btn { width: 100% !important; text-align: center !important; }

  /* ---- Catalog ---- */
  .hpc-grid { grid-template-columns: 1fr 1fr !important; }
  .hpc__title { font-size: 22px !important; }
  .hpc__top { flex-wrap: wrap !important; gap: 10px !important; }
  .hpc__tabs { order: 3; width: 100%; }
  .hpc-tab { flex: 1; }

  /* ---- Product page ---- */
  .gal__main { height: 240px !important; }
  .gal__thumbs div { height: 60px !important; }
  .total { font-size: 26px !important; }

  /* ---- Section padding ---- */
  .hp-sec { padding: 32px 0 !important; }

  /* ---- Wrap padding ---- */
  .hp-wrap, .wrap { padding-left: 14px !important; padding-right: 14px !important; }

  /* ---- hp-wrap catalog ---- */
  .hpc__wrap { padding: 24px 14px 40px !important; }

  /* ---- Banner / page headings ---- */
  .hp-h2 { font-size: 22px !important; }
  .hp-banner h1 { font-size: 22px !important; }
  .hp-banner { padding: 24px 0 !important; }

  /* ---- Strip (filter tabs on index) ---- */
  .hp-strip .hp-wrap { gap: 7px !important; padding: 14px 16px !important; }
  .hp-tn { padding: 6px 10px !important; font-size: 13px !important; }

  /* ---- Contacts page ---- */
  .hp-ci-grid { grid-template-columns: 1fr !important; }

  /* ---- Delivery map ---- */
  .hp-deliv__map { height: 220px !important; }

  /* ---- katalog-preview card grid ---- */
  .hpc-grid { grid-template-columns: 1fr 1fr !important; min-width: 0; }
  .hpc-card { min-width: 0; }
  .hpc-img { height: 150px !important; }
  .hpc-card__n { min-height: auto !important; }
}

/* ============================================================
   VERY SMALL — max-width: 380px
   ============================================================ */
@media (max-width: 380px) {
  .hpc-grid { grid-template-columns: 1fr !important; }
  .hp-feat { grid-template-columns: 1fr !important; }
  .hp-hero__h { font-size: 22px !important; }
  #konstruktor h2 { font-size: 20px !important; }
}