/* =========================================================
   UNIVERSAL RESPONSIVE SYSTEM
   Designed for small phones through tablets and desktops.
   ========================================================= */

/* Prevent horizontal overflow on every viewport */
html, body { max-width:100%; overflow-x:hidden; }
img, svg, video, iframe { max-width:100%; height:auto; }
button, input, select, textarea { max-width:100%; }

/* Large tablets / small laptops */
@media (max-width: 1100px) {
  .container { width:min(94%, 980px); }
  .main-nav { gap:15px; }
  .hero-grid { gap:35px; }
  .hero h1 { font-size:clamp(38px,5vw,56px); }
  .product-grid { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
}

/* Tablets */
@media (max-width: 900px) {
  .container { width:92%; }

  .nav-wrap { min-height:68px; }
  .menu-toggle {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:10px;
    background:#eef6ff;
  }

  .main-nav {
    display:none;
    position:absolute;
    left:4%;
    right:4%;
    top:68px;
    padding:12px;
    gap:5px;
    background:rgba(255,255,255,.98);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 20px 45px rgba(20,50,90,.15);
    flex-direction:column;
    align-items:stretch;
  }
  .main-nav.open { display:flex; }
  .main-nav a {
    padding:12px 13px;
    border-radius:9px;
  }
  .main-nav a:hover { background:#f2f7fd; }
  .main-nav .nav-cta { text-align:center; margin-top:4px; }

  .hero { padding:60px 0; }
  .hero-grid {
    grid-template-columns:1fr;
    text-align:center;
  }
  .hero p { margin-left:auto; margin-right:auto; }
  .actions { justify-content:center; }
  .hero-art { min-height:300px; max-width:650px; width:100%; margin:auto; }

  .cards, .service-grid { grid-template-columns:repeat(2,1fr); }
  .type-grid { grid-template-columns:repeat(3,1fr); }
  .product-grid { grid-template-columns:repeat(2,1fr); }
  .stats { grid-template-columns:repeat(2,1fr); }

  .filters-layout { grid-template-columns:1fr; }
  .filters { position:static; }
  .filters h3 { margin-top:0; }
  .filter-group { display:inline-block; vertical-align:top; width:32%; padding:10px 15px 10px 0; border-bottom:0; }

  .detail, .contact-grid { grid-template-columns:1fr; gap:30px; }
  .gallery-main { max-width:700px; margin:auto; }

  .offer {
    flex-direction:column;
    text-align:center;
  }

  .footer-grid { grid-template-columns:repeat(2,1fr); }
}

/* Phones */
@media (max-width: 600px) {
  .container { width:calc(100% - 28px); }

  body {
    font-size:14px;
    line-height:1.55;
  }

  .site-header { position:sticky; top:0; }
  .brand { min-width:0; }
  .brand-mark {
    width:38px;
    height:38px;
    border-radius:10px;
    flex:0 0 38px;
  }
  .brand strong {
    font-size:12px;
    white-space:nowrap;
  }
  .brand small { font-size:8px; }
  .nav-wrap { gap:8px; }

  .hero {
    padding:42px 0 48px;
  }
  .hero h1 {
    font-size:clamp(31px,9vw,42px);
    line-height:1.08;
  }
  .hero p { font-size:15px; }
  .eyebrow { font-size:11px; letter-spacing:1px; }

  .actions {
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    max-width:360px;
    margin-left:auto;
    margin-right:auto;
  }
  .btn {
    min-height:45px;
    width:100%;
    padding:11px 14px;
  }

  .hero-art {
    min-height:230px;
    border-radius:20px;
  }
  .ac-illustration {
    width:76%;
    height:105px;
  }
  .ac-illustration:before {
    left:15px;
    top:16px;
    font-size:9px;
  }
  .vents {
    left:15px;
    right:15px;
    bottom:16px;
    height:25px;
    padding-top:7px;
  }
  .floating-tag {
    padding:8px 10px;
    font-size:9px;
  }
  .tag1 { top:18px; left:12px; }
  .tag2 { right:12px; bottom:18px; }

  .section { padding:45px 0; }
  .section-head { margin-bottom:25px; }
  .section-head h2 {
    font-size:27px;
    line-height:1.2;
  }

  .cards,
  .service-grid,
  .product-grid,
  .type-grid,
  .stats,
  .guide-grid {
    grid-template-columns:1fr;
  }

  /* Four-item trust strip also becomes one column */
  .cards[style*="repeat(4"] {
    grid-template-columns:1fr !important;
  }

  .type-card {
    padding:17px;
    display:flex;
    align-items:center;
    text-align:left;
    gap:14px;
  }
  .type-card .icon {
    margin:0;
    flex:0 0 45px;
    width:45px;
    height:45px;
  }
  .type-card p { margin:2px 0 0; }

  .product-img { height:175px; }
  .product-info { padding:14px; }
  .product-info h3 { font-size:13px; }
  .product-actions { flex-direction:column; }
  .product-actions .btn { width:100%; }

  .page-hero {
    padding:38px 0;
  }
  .page-hero h1 {
    font-size:31px;
    line-height:1.12;
  }

  .toolbar {
    display:grid;
    grid-template-columns:1fr;
  }
  .search, .select { width:100%; }

  .filter-group {
    display:block;
    width:100%;
    padding:13px 0;
    border-bottom:1px solid var(--border);
  }

  .gallery-main {
    height:270px;
  }
  .detail h1 { font-size:28px; }
  .specs { grid-template-columns:1fr; }

  .tabs {
    overflow-x:auto;
    white-space:nowrap;
    scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar { display:none; }
  .tab { flex:0 0 auto; }

  .form-grid {
    grid-template-columns:1fr;
  }
  .field.full { grid-column:auto; }

  .offer {
    padding:28px 20px;
    border-radius:19px;
  }
  .offer h2 { font-size:25px; }

  .footer-grid {
    grid-template-columns:1fr;
    gap:22px;
  }
  .footer-bottom {
    padding:14px 10px;
    line-height:1.5;
  }

  .whatsapp {
    width:50px;
    height:50px;
    right:14px;
    bottom:14px;
    font-size:23px;
  }
  .scroll-top {
    right:14px;
    bottom:75px;
  }

  .cart-row {
    grid-template-columns:1fr;
    gap:9px;
    padding:18px 0;
  }
  .summary {
    max-width:none;
  }
}

/* Small phones: 320px / 360px / 375px */
@media (max-width: 380px) {
  .container { width:calc(100% - 20px); }

  .brand strong { font-size:11px; }
  .brand small { font-size:7px; }

  .hero h1 { font-size:30px; }
  .hero p { font-size:14px; }

  .section-head h2 { font-size:24px; }
  .page-hero h1 { font-size:28px; }

  .product-img { height:155px; }
  .mini-ac { width:78%; }

  .price { font-size:17px; }
  .old { font-size:10px; }

  .card { padding:18px; }
  .service-price { font-size:21px; }

  .gallery-main { height:235px; }
  .thumb { width:68px; height:52px; }

  .floating-tag { font-size:8px; }
}

/* Very narrow screens */
@media (max-width: 330px) {
  .brand small { display:none; }
  .brand strong { font-size:10px; }
  .menu-toggle { width:40px;height:40px; }

  .hero h1 { font-size:27px; }
  .hero-art { min-height:200px; }

  .product-img { height:140px; }
  .product-info { padding:10px; }
}