.site-menu-toggle { display: none; }

@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .shell { width: min(100% - 30px, 1160px); }
  body.menu-open { overflow: hidden; }
  header { position: absolute; }
  .nav { height: 70px; gap: 10px; }
  .logo { min-width: 0; gap: 8px; font-size: 14px; line-height: 1.15; }
  .logo span { display: block; max-width: 205px; }
  .logo img { width: 42px; height: 42px; flex: 0 0 auto; }
  .nav > .btn { display: none; }
  .site-menu-toggle {
    display: grid; place-items: center; flex: 0 0 auto; width: 43px; height: 43px;
    padding: 0; border: 1px solid #ffffff40; border-radius: 12px;
    background: #07131dc7; color: white; font-size: 25px; cursor: pointer; z-index: 12;
  }
  .nav nav {
    display: flex; position: fixed; inset: 70px 0 auto 0; flex-direction: column; gap: 0;
    padding: 10px 15px 20px; background: color-mix(in srgb, var(--dark) 96%, transparent);
    backdrop-filter: blur(16px); border-top: 1px solid #ffffff20;
    opacity: 0; visibility: hidden; transform: translateY(-12px); transition: .22s; z-index: 10;
    box-shadow: 0 20px 35px #0005;
  }
  .nav nav.open { opacity: 1; visibility: visible; transform: none; }
  .nav nav a { padding: 17px 8px; border-bottom: 1px solid #ffffff17; font-size: 16px; font-weight: 700; }
  .hero { min-height: 640px; padding-top: 70px; display: flex; align-items: center; }
  .hero-in { padding-top: 45px; padding-bottom: 55px; }
  .hero h1 { font-size: clamp(40px, 12vw, 56px); line-height: 1.02; margin: 13px 0 20px; overflow-wrap: anywhere; }
  .hero .rich { font-size: 17px; line-height: 1.55; margin-bottom: 26px; }
  .hero .btn, .split .btn { width: 100%; text-align: center; padding: 16px; }
  .tag { font-size: 10px; line-height: 1.5; }
  .section { padding: 62px 0; }
  .section h2 { font-size: clamp(32px, 9vw, 42px); line-height: 1.08; margin: 10px 0 30px; overflow-wrap: anywhere; }
  .product-heading { display: block; }
  .product-heading h2 { margin-bottom: 26px; }
  .product-carousel { margin-right: -15px; padding-right: 15px; }
  .product-track { gap: 14px; padding-bottom: 13px; }
  .product-track .product-card { flex-basis: 88%; }
  .product-card img, .product-placeholder { height: 220px; }
  .product-card > div { padding: 21px; }
  .product-summary { max-height: 7.1em; overflow: hidden; }
  .carousel-dots { margin-top: 5px; }
  .split { gap: 30px; }
  .split > img { height: min(105vw, 430px); }
  .custom .split { display: flex; flex-direction: column; align-items: stretch; }
  .custom .split > div:last-child { width: 100%; }
  .site-video { width: 100%; aspect-ratio: 16 / 9; border-radius: min(var(--radius), 18px); }
  .seller-grid { gap: 18px; }
  .seller-card { padding: 14px 14px 20px; }
  .seller-card .photo { height: min(105vw, 390px); }
  .seller-card .email { overflow-wrap: anywhere; }
  .contact-grid { gap: 25px; }
  .contact-card { padding: 24px 19px; border-left-width: 4px; }
  .contact-card a, .contact-card p { margin: 12px 0; overflow-wrap: anywhere; line-height: 1.55; }
  .map { height: 310px; }
  footer { padding: 48px 0 95px; }
  .footer-grid { gap: 25px; }
  .footer-grid > div { padding-bottom: 20px; border-bottom: 1px solid #ffffff16; }
  .footer-grid > div:last-child { border-bottom: 0; }
  .footer-grid p { line-height: 1.55; overflow-wrap: anywhere; }
  .social-float { bottom: 14px; gap: 7px; }
  .social-float.right { right: 12px; }
  .social-float.left { left: 12px; }
  .social { width: 44px; height: 44px; border-radius: 13px; }
  .social svg { width: 22px; height: 22px; }
  .product-modal { padding: 10px; align-items: end; }
  .product-modal-box { max-height: 94vh; border-radius: 19px 19px 10px 10px; }
  .modal-image { min-height: 220px; height: 34vh; }
  .modal-content { padding: 25px 20px 28px; }
  .modal-content h3 { font-size: 27px; padding-right: 30px; }
  .modal-content a { width: 100%; text-align: center; }
  .modal-close { width: 38px; height: 38px; top: 10px; right: 10px; }
}

@media (max-width: 390px) {
  .shell { width: min(100% - 24px, 1160px); }
  .logo span { max-width: 180px; font-size: 13px; }
  .hero { min-height: 600px; }
  .hero h1 { font-size: 38px; }
  .section h2 { font-size: 31px; }
  .product-track .product-card { flex-basis: 92%; }
}