/**
 * ValueSubs — breakpoints + accessibility (reduced motion)
 */

@media (max-width: 1080px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .nav-shell {
    display: none;
  }
  .site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(10px, 2.5vw, 18px);
  }
  .site-header .header-end {
    justify-self: end;
  }
  .site-header .brand {
    margin-left: 0;
    justify-self: start;
  }
  .hamburger {
    display: flex;
  }
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    order: -1;
    max-width: min(420px, 100%);
  }
  .contact-card {
    grid-template-columns: 1fr;
  }
  .request-product {
    grid-template-columns: 1fr;
  }
  .product-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  :root {
    --nav-h: 96px;
    --container: min(1200px, calc(100% - 28px));
  }
  .header-actions .btn--ig {
    display: none;
  }
  .header-actions .btn--ig-icon {
    display: inline-flex;
  }
  .header-actions .btn--primary {
    padding: 12px 20px;
    font-size: 0.88rem;
  }
  .product-grid {
    grid-template-columns: 1fr;
  }
  .category-grid {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .trust-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .select,
  .input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .site-header__inner {
    gap: 10px;
  }
  .site-header .brand img {
    width: auto;
    height: clamp(50px, calc(var(--nav-h) - 18px), 66px);
    max-height: calc(var(--nav-h) - 12px);
    max-width: min(420px, 86vw);
  }

  .hero__title,
  .hero__lead {
    overflow-wrap: break-word;
  }

  #preloader.vs-preloader {
    contain: layout style;
  }

  .vs-preloader__stage {
    --vs-orbit-r: 5.45rem;
    width: min(15.5rem, 88vw);
    height: min(14rem, 76vw);
    perspective: 1180px;
  }
  .vs-preloader__stage::after {
    opacity: 0.5;
    filter: blur(12px);
  }
  .vs-preloader__chip {
    width: 1.85rem;
    height: 1.85rem;
    margin: -0.925rem;
    font-size: 0.55rem;
    transform: rotate(calc(var(--i) * 60deg)) translateY(calc(-1 * var(--vs-orbit-r))) rotate(calc(var(--i) * -60deg));
    animation: none;
  }
  .vs-preloader__card3d {
    width: 7.35rem;
    height: 4.55rem;
  }
  .vs-preloader__card3d-inner {
    --cw: 7.35rem;
    --ch: 4.55rem;
    --cd: 0.72rem;
  }
  .vs-preloader__card3d::before {
    filter: blur(26px);
    opacity: 0.58;
  }
  .vs-preloader__blob--1,
  .vs-preloader__blob--2,
  .vs-preloader__blob--3 {
    filter: blur(52px);
  }
  .vs-preloader__particles span {
    will-change: auto;
  }
  .vs-preloader__progress-fill::after {
    animation: none;
    opacity: 0.35;
    transform: translateX(0);
  }
  .vs-preloader__percent {
    animation: none;
  }
  .vs-preloader__logo-mark::after {
    animation: none;
    opacity: 0.2;
  }
}

/* Show mobile CTAs inside drawer */
.mobile-drawer .btn {
  justify-content: center;
}

@media (min-width: 901px) {
  .mobile-drawer {
    display: none !important;
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #preloader {
    display: none !important;
  }
  body.preloader-active {
    overflow: auto !important;
    touch-action: auto !important;
  }
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .page-intro {
    display: none !important;
  }
  .hero-visual__shine {
    animation: none !important;
  }
}

body.reduce-motion .hero-visual__shine,
body.reduce-motion .ambient__blob {
  animation: none !important;
}
body.reduce-motion .reveal,
body.reduce-motion .stagger-children > * {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}