/* ==========================================================
   responsive.css — tablet and mobile
   ========================================================== */
/* Enquiry-list icon only where the "Get a quote" button is hidden */
.show-md { display: none !important; }
@media (max-width: 1200px) { .show-md { display: grid !important; } }

@media (max-width: 1400px) {
  .header__inner { gap: 18px; }
  .nav__link { padding: 10px 10px; font-size: 14.5px; }
  .logo img { width: 156px; }
}

@media (max-width: 1200px) {
  .nav__link { padding: 10px 10px; font-size: 14px; }
  .hide-md { display: none; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); margin: 0; z-index: 70;
    background: #fff; padding: 90px 20px 30px; overflow: auto; box-shadow: var(--shadow);
    transform: translateX(100%); transition: transform .45s var(--ease);
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link, .header.is-scrolled .nav__link { color: var(--deep); width: 100%; justify-content: space-between; padding: 14px 12px; font-size: 16px; border-bottom: 1px solid var(--line); }
  .nav__link::after { display: none; }
  .nav__link.is-active { color: var(--primary); }
  .mega { position: static; transform: none; width: auto; display: none; opacity: 1; visibility: visible; box-shadow: none; padding: 8px 0; grid-template-columns: 1fr; }
  .nav__has-drop:hover .mega { transform: none; }
  .nav__has-drop.is-open .mega { display: grid; transform: none; }
  .mega__grid { grid-template-columns: 1fr; }
  .mega__promo { display: none; }
  .nav-toggle { position: relative; z-index: 75; }
  .header__actions { margin-left: auto; }
  .nav-toggle[aria-expanded="true"] { border-color: var(--line); }
  .nav-toggle[aria-expanded="true"] span { background: var(--deep); }

  .hero__slide { min-height: 0; }
  .hero__slider { min-height: 0; }
  .hero__slide .container { grid-template-columns: 1fr; padding-top: 150px; padding-bottom: 200px; gap: 30px; }
  .hero__visual { width: min(360px, 80%); order: -1; justify-self: start; }
  .hero__card--a { left: auto; right: -10%; top: 4%; }
  .hero__nav { bottom: 120px; }

  .about__grid, .voices__grid, .cta__grid { grid-template-columns: 1fr; gap: 60px; }
  .about__media { max-width: 560px; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .steps::before, .steps::after { display: none; }
  .blog__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .qv { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .container { padding: 0 18px; }
  .hide-sm { display: none !important; }
  .section { padding: 76px 0; }
  .header__inner { height: 72px; }
  .logo img { width: 140px; }
  .header__actions { gap: 6px; }
  .icon-btn { width: 40px; height: 40px; }

  .hero__slide .container { padding-top: 130px; padding-bottom: 190px; }
  .hero__visual { width: 250px; }
  .hero__card { padding: 10px 12px; }
  .hero__card strong { font-size: 19px; }
  .hero__card span { font-size: 12px; }
  .hero__text { font-size: 17px; }
  .hero__progress button { width: 44px; }
  .hero__arrows button { width: 44px; height: 44px; }

  .finder { margin-top: -90px; padding: 14px; border-radius: 20px; }
  .search { flex-wrap: wrap; }
  .search__field--cat, .search__field--q { flex: 1 1 100%; }
  .search__btn { flex: 1 1 100%; padding: 14px; }
  .search--overlay { flex-wrap: wrap; }
  .search--overlay .search__select { flex: 1 1 100%; padding: 12px; }

  .stats__grid { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .stat:nth-child(3)::before { display: none; }

  .about__media { padding-left: 80px; }
  .scale { width: 70px; }
  .scale b { font-size: 17px; }
  .scale li { font-size: 11px; padding-right: 20px; }
  .about__badge { width: 150px; padding: 18px; right: -6px; }
  .about__badge strong { font-size: 34px; }
  .checks { grid-template-columns: 1fr; }

  .why__grid, .cat-grid, .blog__grid, .steps { grid-template-columns: 1fr; }
  .cat { min-height: 200px; }
  .pill-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; border-radius: 999px; scrollbar-width: none; }
  .pill-tabs button { white-space: nowrap; }
  .hero__card--b { display: none; }
  .hero__card--a { right: -18%; }
  .catalogue { width: 240px; }
  .catalogue a { height: 340px; }
  .downloads { padding: 28px 22px; }
  .enquiry-form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .newsletter__row { flex-direction: column; border-radius: 16px; }
  .newsletter__row input { padding: 12px; }

  .theme-switch { top: auto; bottom: 90px; transform: none; }
  .theme-switch__panel { top: auto; bottom: 0; transform: none; }
  .modal__panel { padding: 26px 18px; }
  .float-wa { width: 50px; height: 50px; left: 16px; bottom: 16px; }
  .to-top { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .hero__copy > *, .hero__art, .hero__card, .hero__title { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* Phones/tablets: the blurred (frosted) header traps the slide-out menu inside the header's height.
   Use a solid header instead so the menu opens full-height on every page. */
@media (max-width: 1024px) {
  .header.is-scrolled, .page-inner .header, .page-inner .header.is-scrolled {
    backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff;
  }
  body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 49; background: color-mix(in srgb, var(--deep) 45%, transparent); animation: fadeIn .3s; }
  body.nav-open { overflow: hidden; }
}

/* Small phones: header logo + 5 round buttons must fit (menu button was pushed off-screen) */
@media (max-width: 480px) {
  .header .container { padding-left: 12px; padding-right: 12px; }
  .header__actions { gap: 5px; }
  .icon-btn, .nav-toggle { width: 38px; height: 38px; }
  .nav-toggle { padding: 12px 10px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .icon-btn__count { min-width: 17px; height: 17px; font-size: 10px; top: -4px; right: -4px; }
  .logo img { width: 118px; }
  .page-inner .header .header__inner { height: 66px; }
}
@media (max-width: 360px) {
  .logo img { width: 100px; }
  .icon-btn, .nav-toggle { width: 34px; height: 34px; }
  .header__actions { gap: 3px; }
}
/* Small phones: product cards */
@media (max-width: 480px) {
  .product-grid .product__add { justify-content: center; text-align: center; }
  .product-grid .product__add span[aria-hidden] { display: none; }
  .product-grid .product__price { font-size: 13px; margin-top: -4px; }
  .product-grid .product__price a { display: block; margin: 2px 0 0; }
  .product-grid .product__meta { font-size: 12px; }
  .page-hero h1 { font-size: 28px; }
  .crumbs { font-size: 13px; }
}