/*
 * Header, navigation and content/video split.
 * One owner for these responsive components. Keep business/page styles in store.css.
 * The tall decorative video is desktop-only; product content uses full width below 1101px.
 */
.shop-menu { visibility: hidden; }
.shop-menu.is-open { visibility: visible; }
@media (max-width: 1100px) {
  .site-header {
    min-height: 96px; padding: 8px 16px;
    grid-template-columns: 1fr auto; z-index: 50;
  }
  .site-header .wordmark, .site-header .header-brand-social { display: none; }
  .site-header .header-center {
    left: 50%; top: 6px; width: 70px; height: 82px;
    transform: translateX(-50%);
  }
  .site-header .mobile-menu-toggle {
    position: static; justify-self: start; display: block;
    min-width: 58px; min-height: 44px; padding: 10px;
  }
  .site-header .header-actions { grid-column: 2; gap: 0; }
  .site-header .icon-button { width: 44px; height: 44px; }
  .site-header .lang-toggle { min-height: 44px; padding: 4px; font-size: 12px; }
  .site-header .main-nav { display: none; }
  .site-header .main-nav.is-open {
    display: flex; position: absolute; inset: 100% 0 auto;
    width: 100%; max-height: calc(100dvh - 96px); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px 20px; background: #fffdf8;
    box-shadow: 0 12px 24px #173f2826; z-index: 60;
  }
  .main-nav a, .main-nav .nav-button { min-height: 44px; padding: 12px; }
  .main-nav .nav-button { width: 100%; text-align: start; }
  .main-nav .shop-menu {
    display: none; position: static; width: 100%; transform: none;
    opacity: 1; box-shadow: none; margin: 0 0 8px; padding: 4px 8px;
  }
  .main-nav .shop-menu.is-open { display: block; transform: none; }
  .pour-col { display: none !important; }
  body.home .products-stage, body:not(.home) .cp-inner-stage {
    width: 100%; max-width: 100%; min-height: 0;
  }
  .cp-inner-stage .cp-shop-content, .cp-inner-stage .cp-page-content {
    width: 100% !important; max-width: none !important;
  }
  .products-stage .copy { min-width: 0; }
}
@media (max-width: 720px) {
  .products-stage .copy {
    width: 100%; max-width: 100%; padding: 32px 22px 36px;
  }
  .products-stage .copy h1, .products-stage .copy h2 {
    font-size: clamp(36px, 10vw, 48px); line-height: 1.08;
    overflow-wrap: normal; margin: 24px 0 20px;
  }
  .products-stage .copy > p { max-width: 100%; line-height: 1.7; }
  .products-stage .eyebrow { font-size: 9px; white-space: normal; }
  .products-stage .features { margin-top: 28px; gap: 20px 14px; }
  .products-stage .cta { margin-top: 28px; min-height: 44px; }
  .products-stage .product-group { display: none; }
  .products-stage .hero { min-height: 740px; }
  .cp-inner-stage .cp-shop-content, .cp-inner-stage .cp-page-content {
    padding-left: 20px !important; padding-right: 20px !important;
  }
  .cp-inner-stage h1 { overflow-wrap: normal; }
}
@media (max-width: 380px) {
  .site-header .header-center {
    left: calc(50% - 26px); width: 56px; height: 70px; top: 12px;
  }
}