/*
 * EOTLS 070-r2 — responsive/layout stabilization
 *
 * Fixes:
 * - actual rendered shop cards (.product) obey 3/2/1 contract;
 * - shop category controls expose Preorders predictably on compact screens;
 * - purple publisher callouts remain contained on mobile;
 * - site header + property bars share one scroll-hide/reveal behavior;
 * - compact menu closes on second hamburger press and outside interaction.
 */

:root {
  --e070r2-chrome-speed: 180ms;
  --e070r2-header-height: 0px;
}

/* ============================================================
   SMART SITE CHROME — HIDE DOWN / REVEAL UP
   ============================================================ */
body.eotls-070-r2 .e062-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1400 !important;
  transform: translateY(0);
  transition: transform var(--e070r2-chrome-speed) ease;
  will-change: transform;
}

body.eotls-070-r2 .e062-property-nav.e063-property-sticky {
  top: var(--e070r2-header-height) !important;
  transform: translateY(0);
  transition:
    top var(--e070r2-chrome-speed) ease,
    transform var(--e070r2-chrome-speed) ease;
  will-change: transform, top;
}

body.eotls-070-r2.e070r2-scroll-down:not(.e070r2-menu-open) .e062-header {
  transform: translateY(-100%);
}

body.eotls-070-r2.e070r2-scroll-down:not(.e070r2-menu-open) .e062-property-nav.e063-property-sticky {
  top: 0 !important;
  transform: translateY(-100%);
}

body.eotls-070-r2.e070r2-scroll-up .e062-header,
body.eotls-070-r2.e070r2-at-top .e062-header,
body.eotls-070-r2.e070r2-menu-open .e062-header,
body.eotls-070-r2.e070r2-scroll-up .e062-property-nav.e063-property-sticky,
body.eotls-070-r2.e070r2-at-top .e062-property-nav.e063-property-sticky,
body.eotls-070-r2.e070r2-menu-open .e062-property-nav.e063-property-sticky {
  transform: translateY(0);
}

body.eotls-070-r2.e070r2-scroll-down:not(.e070r2-menu-open) {
  --e070r2-header-height: 0px;
}

/* Keep anchor jumps clear of visible chrome. */
body.eotls-070-r2.e062-property [id] {
  scroll-margin-top: calc(var(--e070r2-header-height) + 72px);
}

/* ============================================================
   SHOP GRID — ACTUAL RENDERED CARD CONTRACT
   ============================================================ */
body.eotls-070-r2 .e062-shop-grid-section .product-grid,
body.eotls-070-r2 .e062-shop-grid-section .e062-product-grid,
body.eotls-070-r2 [data-merch-grid].product-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: clamp(1rem, 1.8vw, 1.5rem) !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
}

/* The renderer creates <article class="product card">, not .product-card. */
body.eotls-070-r2 .e062-shop-grid-section .product-grid > .product,
body.eotls-070-r2 [data-merch-grid].product-grid > .product,
body.eotls-070-r2 [data-merch-grid] > .product {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
}

body.eotls-070-r2 .e062-shop-grid-section .product__meta,
body.eotls-070-r2 [data-merch-grid] .product__meta {
  min-width: 0;
}

@media (min-width: 681px) and (max-width: 1180px) {
  body.eotls-070-r2 .e062-shop-grid-section .product-grid,
  body.eotls-070-r2 .e062-shop-grid-section .e062-product-grid,
  body.eotls-070-r2 [data-merch-grid].product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body.eotls-070-r2 .e062-shop-grid-section .product-grid,
  body.eotls-070-r2 .e062-shop-grid-section .e062-product-grid,
  body.eotls-070-r2 [data-merch-grid].product-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.25rem !important;
  }

  /* Category choices stay visible instead of hiding offscreen in a rail. */
  body.eotls-070-r2 .e062-shop-grid-section .merch-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .65rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 0 .75rem !important;
  }

  body.eotls-070-r2 .e062-shop-grid-section .merch-filter {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: .7rem .8rem !important;
  }
}

@media (max-width: 390px) {
  body.eotls-070-r2 .e062-shop-grid-section .merch-filters {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ============================================================
   MOBILE PURPLE CALLOUT CONTAINMENT
   ============================================================ */
@media (max-width: 680px) {
  body.eotls-070-r2 :is(.e062-brand-pull, .e062-join) {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 2.5rem 1rem !important;
    overflow: hidden !important;
  }

  body.eotls-070-r2 :is(.e062-brand-pull, .e062-join) > * {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.eotls-070-r2 :is(.e062-brand-pull, .e062-join) > img {
    justify-self: start !important;
    width: min(130px, 38vw) !important;
    height: auto !important;
  }

  body.eotls-070-r2 :is(.e062-brand-pull, .e062-join) :is(h1, h2, h3, p) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  body.eotls-070-r2 :is(.e062-brand-pull, .e062-join) h2 {
    font-size: clamp(2.35rem, 11vw, 3.7rem) !important;
    line-height: .98 !important;
  }

  body.eotls-070-r2 .e062-join .e062-btn {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   COMPACT MENU — EXPLICIT INTERACTION VISIBILITY
   ============================================================ */
@media (max-width: 1180px) {
  body.eotls-070-r2 .e070-mobile-nav[open] .e070-mobile-nav-panel {
    display: block !important;
  }

  body.eotls-070-r2 .e070-mobile-nav > summary {
    touch-action: manipulation;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.eotls-070-r2 .e062-header,
  body.eotls-070-r2 .e062-property-nav.e063-property-sticky {
    transition: none !important;
  }
}