html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

.marquee,
.hero-visual,
.calculator {
  max-width: 100%;
}

@media (max-width: 1050px) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select { font-size: 16px !important; }
}

@media (max-width: 760px) {
  .header {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .shell {
    width: min(600px, calc(100% - 28px));
  }

  .nav-menu-button,
  .cart-button,
  .tabs button,
  .add,
  .counter button {
    min-width: 44px;
    min-height: 44px;
  }

  .nav-menu-button {
    padding-inline: 8px;
  }

  .calc-options {
    flex-wrap: wrap;
  }

  .calc-options button {
    min-width: 44px;
    min-height: 44px;
  }

  .cart-close {
    width: 44px;
    height: 44px;
  }

  .continue-shopping {
    min-height: 44px;
    padding-block: 10px;
  }

  .cart-panel {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  .how .steps article {
    text-align: center;
  }

  .how .steps p {
    margin-right: auto;
    margin-left: auto;
  }

  .cta-inner > div:first-child > .button {
    display: flex;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
  }

  .footer-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:26px 18px;
    text-align:center;
  }

  .footer-grid > .logo,
  .footer-grid > p {
    grid-column:1 / -1;
    justify-self:center;
    text-align:center;
  }

  .footer-grid > div {
    align-items:center;
  }

  .footer-bottom {
    justify-content:center;
    gap:12px;
    text-align:center;
  }
}

@media (max-width: 340px) {
  .logo { font-size: 21px; }
  .header { gap: 5px; }
  .nav-menu-button { font-size: 11px; }
  .hero h1 { font-size: 33px; }
  .hero-actions .button { width: 100%; justify-content: center; }
  .hero-actions .text-link { align-self: center; }
}

@media (hover: none) {
  .button:hover,
  .product:hover,
  .calc-options button:hover,
  .counter button:hover {
    transform: none;
  }
}