/**
 * Layout alignment for prerendered pages.
 * Product detail uses the same Tailwind `container` shell as /products.
 */

:root {
  --navbar-height: 4.5rem;
}

/* Product detail video band: breakout margins match container padding (px-6 / md:px-12) */
.container.mx-auto .bg-white.py-16.-mx-6,
.container.mx-auto .bg-white.py-16[class*='-mx-6'] {
  margin-left: -1.5rem !important;
  margin-right: -1.5rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

@media (min-width: 768px) {
  .container.mx-auto .bg-white.py-16.-mx-6,
  .container.mx-auto .bg-white.py-16[class*='-mx-6'] {
    margin-left: -3rem !important;
    margin-right: -3rem !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

/* Legacy prerender: max-w-7xl shell on product pages → container width */
body[data-page='product-detail'] .mx-auto.max-w-7xl.px-6.py-8,
body[data-page='product-detail'] .mx-auto.w-full.max-w-7xl.px-6.py-8 {
  max-width: none;
  width: 100%;
}

/*
 * Nav bar: use the same content column as hero/sections (container 2xl = 1400px).
 * Prerender uses max-w-7xl (1280px) inside px-6/md:px-12, which shifts the logo right on wide screens.
 */
.sticky.top-0 nav > .w-full.px-6,
.sticky.top-0 nav > .w-full[class*='px-6'] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.sticky.top-0 nav > .w-full > .mx-auto.max-w-7xl {
  box-sizing: border-box;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 768px) {
  .sticky.top-0 nav > .w-full > .mx-auto.max-w-7xl {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.sticky.top-0 nav > .w-full > .mx-auto.max-w-7xl > a:first-child {
  margin-left: 0;
}

.sticky.top-0 nav > .w-full > .mx-auto.max-w-7xl > a:first-child img {
  display: block;
  margin-left: 0;
}

/* Products mega-menu panel (injected by nav.js) */
.sticky.top-0 [role='navigation'][aria-label='Products'] .if-mega-panel-inner {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}