/* MOON RC31 — runtime screenshot fixes, responsive containment and PWA UI. */

html,body{max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}

/* The first collection heading must clear the sticky site header, including anchor entry. */
.moon-home-v6 #moon-shop-categories{padding-top:clamp(112px,10vw,154px)!important}
.moon-home-v6 #moon-shop-categories .moon-v6-section-head{margin-top:0!important}

/* WooCommerce must never paint the selected tab white while keeping white text. */
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex!important;gap:clamp(16px,4vw,34px)!important;overflow-x:auto!important;
  padding:0!important;background:transparent!important;scrollbar-width:none;
}
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none}
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li,
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  flex:0 0 auto!important;margin:0!important;padding:0!important;border:0!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block!important;padding:13px 0!important;color:#8fa8bd!important;
  background:transparent!important;font-weight:900!important;white-space:nowrap!important;
}
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:#fff!important;border-bottom:2px solid #55adff!important;
}

/* Related and recently viewed are full-width rows, never accidental grid columns. */
.single-product .woocommerce div.product>.related.products,
.single-product .woocommerce div.product>.upsells.products,
.single-product .woocommerce div.product>.moon-recently-viewed{
  grid-column:1/-1!important;clear:both!important;width:100%!important;max-width:100%!important;min-width:0!important;
}
.single-product .related.products ul.products,
.single-product .upsells.products ul.products{width:100%!important;max-width:100%!important}
.single-product .related.products .moon-loop-buybar,
.single-product .upsells.products .moon-loop-buybar{grid-template-columns:1fr!important}
.single-product .related.products .moon-loop-buybar .button,
.single-product .upsells.products .moon-loop-buybar .button{
  width:100%!important;min-width:0!important;min-height:42px!important;padding-inline:8px!important;
  border-radius:11px!important;overflow:visible!important;text-overflow:clip!important;font-size:.66rem!important;
}
.single-product .moon-mini-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* The lunar identity illustration is a compact square, not a tall empty panel. */
.moon-v6-story-moon{
  width:min(100%,430px)!important;min-height:0!important;aspect-ratio:1!important;
  justify-self:center!important;overflow:hidden!important;
}
.moon-v6-story-moon img,.moon-v6-story-moon>span{
  width:min(82%,360px)!important;height:auto!important;max-width:100%!important;aspect-ratio:1!important;
  object-fit:cover!important;object-position:center!important;
}
.moon-v6-story-moon i{width:92%!important;height:34%!important}
.moon-v6-story-moon b{width:74%!important;height:25%!important}

/* Tablet and compact desktop: use the reliable drawer header and one-column product flow. */
@media(max-width:1100px){
  .single-product .moon-shop-main>.moon-container{width:calc(100% - 32px)!important;max-width:100%!important}
  .single-product .woocommerce div.product{display:block!important;width:100%!important;max-width:100%!important}
  .single-product .woocommerce div.product::after{content:"";display:table;clear:both}
  .single-product .woocommerce div.product div.images,
  .single-product .woocommerce div.product div.summary{
    float:none!important;clear:both!important;width:100%!important;max-width:100%!important;
    min-width:0!important;margin:0 0 22px!important;inset:auto!important;transform:none!important;
  }
  .single-product .woocommerce div.product .summary{position:relative!important;top:auto!important}
  .single-product .woocommerce div.product>.woocommerce-tabs,
  .single-product .woocommerce div.product>.related.products,
  .single-product .woocommerce div.product>.upsells.products,
  .single-product .woocommerce div.product>.moon-recently-viewed{display:block!important;width:100%!important;max-width:100%!important}
}

@media(max-width:1024px){
  .moon-header,.moon-header-inner{height:72px!important;min-height:72px!important}
  .moon-header-inner{
    display:grid!important;grid-template-columns:minmax(96px,1fr) 42px auto!important;
    grid-template-areas:"brand toggle actions"!important;gap:8px!important;align-items:center!important;
    padding-top:0!important;padding-bottom:0!important;
  }
  .moon-brand{grid-area:brand!important;min-width:0!important}
  .moon-menu-toggle{grid-area:toggle!important;display:block!important;position:relative!important;z-index:1003!important}
  .moon-header-actions{grid-area:actions!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:5px!important;min-width:0!important}
  .moon-nav{
    position:fixed!important;z-index:1002!important;top:72px!important;right:12px!important;left:12px!important;
    display:none!important;width:auto!important;max-width:none!important;height:auto!important;max-height:calc(100dvh - 88px)!important;
    padding:12px!important;overflow:auto!important;border:1px solid rgba(105,184,255,.24)!important;border-radius:16px!important;
    background:rgba(3,11,20,.985)!important;box-shadow:0 28px 80px rgba(0,0,0,.58)!important;backdrop-filter:blur(16px)!important;
  }
  .moon-nav.is-open{display:block!important;visibility:visible!important;opacity:1!important;transform:none!important}
  .moon-nav .moon-menu{display:grid!important;min-width:0!important;width:100%!important;gap:2px!important;margin:0!important;padding:0!important}
  .moon-nav .moon-menu a,.moon-nav .moon-mega-trigger{
    display:flex!important;width:100%!important;min-height:44px!important;padding:0 12px!important;
    justify-content:space-between!important;border-bottom:1px solid rgba(105,184,255,.08)!important;
    font-size:.78rem!important;font-weight:900!important;white-space:normal!important;
  }
  .moon-mega-trigger{display:flex!important}
  .moon-header-actions .moon-track-order-header span{display:none!important}
  .moon-header-actions .moon-icon-link,.moon-header-actions .moon-cart-link,.moon-track-order-header{
    display:inline-flex!important;width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;justify-content:center!important;
  }
  .moon-home-v6 #moon-shop-categories{padding-top:112px!important}
  .moon-v6-story-grid{grid-template-columns:1fr!important;min-height:0!important;gap:24px!important}
  .moon-v6-story-moon{max-width:360px!important}

  .woocommerce-account.moon-account-experience .moon-main>.moon-container,
  .woocommerce-account.moon-account-experience .site-main>.moon-container{width:calc(100% - 28px)!important;max-width:100%!important}
  .logged-in.woocommerce-account.moon-account-experience .woocommerce,
  .woocommerce-account.moon-account-experience .woocommerce{
    display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
  }
  .woocommerce-account.moon-account-experience .woocommerce-MyAccount-navigation{
    position:relative!important;top:auto!important;float:none!important;width:100%!important;max-width:100%!important;
    min-width:0!important;margin:0 0 14px!important;padding:8px!important;overflow-x:auto!important;overflow-y:hidden!important;
  }
  .woocommerce-account.moon-account-experience .woocommerce-MyAccount-navigation ul{
    display:flex!important;width:max-content!important;min-width:100%!important;gap:6px!important;margin:0!important;padding:0!important;
  }
  .woocommerce-account.moon-account-experience .woocommerce-MyAccount-navigation li{flex:0 0 auto!important;margin:0!important}
  .woocommerce-account.moon-account-experience .woocommerce-MyAccount-navigation li a{
    display:flex!important;min-height:40px!important;padding:0 12px!important;white-space:nowrap!important;
    word-break:normal!important;writing-mode:horizontal-tb!important;
  }
  .woocommerce-account.moon-account-experience .woocommerce-MyAccount-content{
    float:none!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:18px!important;overflow:hidden!important;
  }
  .moon-account-dashboard,.moon-account-welcome,.moon-account-stat-grid,.moon-account-profile-grid,.moon-account-quick-actions,
  .moon-account-dashboard *{min-width:0;writing-mode:horizontal-tb;word-break:normal}
  .moon-account-welcome{width:100%!important;flex-direction:column!important;align-items:flex-start!important}
  .moon-account-stat-grid,.moon-account-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .moon-account-profile-grid{grid-template-columns:1fr!important}
}

@media(max-width:767px){
  .moon-header-actions .moon-track-order-header,.moon-header-actions .moon-wishlist-link{display:none!important}
  .moon-home-v6 #moon-shop-categories{padding-top:96px!important}
  .single-product .moon-shop-main>.moon-container{width:calc(100% - 24px)!important}
  .single-product .related.products ul.products,.single-product .upsells.products ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px 9px!important}
  .single-product .moon-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .woocommerce-account.moon-account-experience .moon-main>.moon-container,
  .woocommerce-account.moon-account-experience .site-main>.moon-container{width:calc(100% - 20px)!important}
  .woocommerce-account.moon-account-experience .woocommerce-MyAccount-content{padding:14px!important}
  .moon-account-stat-grid,.moon-account-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .moon-v6-story-moon{width:min(100%,300px)!important}
}

@media(max-width:380px){
  .single-product .related.products ul.products,.single-product .upsells.products ul.products,
  .single-product .moon-mini-grid{grid-template-columns:1fr!important}
  .moon-account-stat-grid,.moon-account-quick-actions{grid-template-columns:1fr!important}
}

/* Install prompt: only appears when the browser confirms installation is available. */
.moon-pwa-install{
  position:fixed;z-index:8700;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));display:none;
  align-items:center;justify-content:center;min-height:42px;padding:0 15px;border:1px solid rgba(125,204,255,.45);
  border-radius:999px;background:#0b76da;color:#fff;font:900 .7rem/1 var(--moon-font-sans,Arial,sans-serif);
  box-shadow:0 16px 44px rgba(0,0,0,.42);cursor:pointer;
}
.moon-pwa-install.is-available{display:inline-flex}
@media(display-mode:standalone){.moon-pwa-install{display:none!important}}
@media(max-width:767px){.moon-pwa-install{bottom:calc(var(--moon-mobile-nav-h,64px) + 16px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.moon-pwa-install{transition:none!important}}
