/* Isolated presentation layer: original tokens and business code are unchanged. */
body .snack-hero {
  gap: clamp(24px, 5vw, 64px);
  padding-block: 56px;
}
body .snack-hero > div:first-child::before {
  content: "";
  display: block;
  width: 104px;
  height: 24px;
  margin-bottom: 20px;
  background: url("/quiet-contour.svg") center / contain no-repeat;
  pointer-events: none;
}
body .snack-hero h1 { max-width: 14ch; }
body .snack-hero p { line-height: 1.65; }
body .button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  font-weight: 500;
}
body .section-heading { flex-wrap: wrap; row-gap: 8px; }
body .section-heading > span { max-width: 24ch; }
body .hero-index a { padding-inline: 0; }
body .hero-index a:hover { padding-inline: 0; }
body .category-grid h3 { font-weight: 500; line-height: 1.35; }
body .category-grid p { line-height: 1.65; }
body .product-card h3 { font-weight: 500; line-height: 1.4; }
body .purchase h1 { font-weight: 500; }
body .product-information details > summary,
body .faq details > summary { padding-block: 16px; }
body .header-tools a,
body .desktop-nav > a,
body .desktop-nav summary { min-height: 44px; }
@media (min-width: 701px) and (max-width: 850px) {
  body .desktop-nav { flex-wrap: nowrap; gap: 12px; }
  body .desktop-nav > a,
  body .desktop-nav summary { white-space: nowrap; }
  body .snack-hero { gap: 28px; }
  body .hero-index { padding: 20px; }
}
@media (max-width: 700px) {
  body .snack-hero { padding-block: 32px; gap: 24px; }
  body .snack-hero > div:first-child::before {
    width: 88px;
    height: 20px;
    margin-bottom: 16px;
  }
  body .snack-hero h1 { font-size: clamp(30px, 8vw, 36px); }
  body .snack-hero p { font-size: 16px; }
  body .hero-index { padding: 20px; }
  body .hero-index h2 { font-size: 20px; }
  body .section-heading h2 { font-size: clamp(22px, 6vw, 26px); }
  body .section-heading > span { font-size: 13px; }
  body .category-grid { column-gap: 20px; }
  body .category-grid h3 { font-size: 16px; }
  body .category-grid > a { padding-block: 20px; }
  body .site-footer nav a { min-height: 44px; display: flex; align-items: center; }
  body .bottom-nav a { font-weight: 500; }
}
@media (max-width: 390px) {
  body .mobile-menu summary span { display: none; }
  body .mobile-menu summary { min-width: 44px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body .text-link svg,
  body .hero-index a svg { transition: transform 140ms ease-out; }
  body .text-link:hover svg,
  body .hero-index a:hover svg { transform: translateX(2px); }
}