/* My Ozark's Glacier material, adapted to the existing storefront.
   Scoped here so the portal and payment surfaces keep their own styling. */
#ozark-storefront {
  --sf-glass: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(246, 252, 255, .78) 58%, rgba(226, 245, 252, .66));
  --sf-glass-solid: linear-gradient(135deg, #fff, #f5fbfe 58%, #e9f6fc);
  --sf-edge: rgba(83, 155, 181, .23);
  --sf-depth: inset 0 1px 0 #fff, inset 1px 0 0 rgba(255, 255, 255, .82), inset 0 -1px 0 rgba(8, 94, 128, .07), 0 3px 6px rgba(7, 64, 87, .025), 0 18px 46px rgba(7, 85, 115, .09);
  --sf-raised: inset 0 1px 0 #fff, inset 1px 0 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(8, 94, 128, .09), 0 5px 12px rgba(7, 64, 87, .035), 0 25px 54px rgba(7, 85, 115, .14);
  --sf-ease: cubic-bezier(.22, 1, .36, 1);
}

/* One luminous navigation surface instead of several nested rectangular panes. */
#ozark-storefront .site-header {
  border-color: transparent !important;
  background: rgba(247, 253, 255, .7) !important;
  box-shadow: 0 8px 28px rgba(7, 85, 115, .055) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
}

#ozark-storefront .site-header::after {
  background: linear-gradient(90deg, transparent, rgba(81, 166, 194, .24), #fff, transparent) !important;
}

#ozark-storefront .site-header .wrap::before {
  inset: 4px -8px;
  border: 1px solid var(--sf-edge);
  border-top-color: #fff;
  border-radius: 24px;
  background: var(--sf-glass);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(8, 94, 128, .055), 0 4px 14px rgba(8, 94, 128, .035);
}

#ozark-storefront .site-header .logo {
  border-right-color: transparent !important;
}

#ozark-storefront .site-header .logo img {
  border-radius: 12px !important;
  border-color: rgba(8, 124, 167, .16) !important;
  background: linear-gradient(145deg, #fff, #eaf8fd) !important;
  box-shadow: inset 0 1px 0 #fff, 0 5px 14px rgba(8, 124, 167, .08) !important;
}

#ozark-storefront .site-header .nav {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

#ozark-storefront .site-header .nav a {
  min-height: 40px;
  border: 1px solid transparent !important;
  border-radius: 15px !important;
}

#ozark-storefront .site-header .nav a:not(.nav-cart):is(:hover, :focus-visible, [aria-current="page"]) {
  border-color: var(--sf-edge) !important;
  color: #075e80 !important;
  background: linear-gradient(140deg, #fff, #e5f5fc) !important;
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(8, 94, 128, .09) !important;
}

#ozark-storefront .site-header .nav .nav-account {
  border-color: rgba(8, 124, 167, .13) !important;
  color: #075e80 !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(213, 241, 251, .7)) !important;
}

#ozark-storefront .site-header .nav .nav-cart {
  border-color: var(--purple-dark) !important;
  color: #fff !important;
  background: linear-gradient(145deg, var(--purple), var(--purple-dark)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 5px 14px rgba(var(--oz-gloss-rgb), .16) !important;
}

#ozark-storefront .site-header :is(.logo img, .nav, .nav a) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#ozark-storefront :is(.oz-discovery-trigger, .menu-toggle) {
  border: 1px solid var(--sf-edge) !important;
  border-radius: 15px !important;
  background: var(--sf-glass) !important;
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(8, 94, 128, .06) !important;
}

/* Frosted edges carry product color; text and artwork retain their original colors. */
#ozark-storefront :is(.home-products .pc, .home-bundle-card, .purchase-command, .product-details-panel) {
  border-radius: 28px !important;
  border-color: var(--sf-edge) !important;
  background: var(--sf-glass) !important;
  box-shadow: var(--sf-depth) !important;
}

#ozark-storefront .home-products .pc {
  overflow: hidden;
  isolation: isolate;
}

#ozark-storefront .home-products .pc::before {
  right: 24px;
  left: 24px;
  width: auto;
  height: 2px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(var(--shine-rgb), .65), rgba(255, 255, 255, .95), transparent) !important;
  box-shadow: none !important;
}

#ozark-storefront .home-products .pc-media {
  border-radius: 27px 27px 0 0 !important;
  border-bottom-color: rgba(var(--shine-rgb), .12) !important;
  background-image: radial-gradient(ellipse at 50% 60%, rgba(var(--shine-rgb), .12), transparent 68%), linear-gradient(135deg, #fff, var(--shine-soft)) !important;
  background-size: auto !important;
}

#ozark-storefront .home-products .pc-media::after {
  border-radius: 21px !important;
  background: linear-gradient(130deg, rgba(255, 255, 255, .5), transparent 34% 72%, rgba(var(--shine-rgb), .045)) !important;
}

#ozark-storefront .home-products :is(.pc-body, .pc-price-block) {
  background: transparent !important;
}

#ozark-storefront .home-products .pc-product-overview {
  border-color: rgba(var(--shine-rgb), .12) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 #fff, 0 3px 10px rgba(8, 94, 128, .025) !important;
}

#ozark-storefront .game-picker .gp-chip {
  border-radius: 20px !important;
  border-color: rgba(var(--oz-gloss-rgb), .18) !important;
  background: var(--sf-glass) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(var(--oz-gloss-rgb), .06), 0 8px 22px rgba(8, 94, 128, .07) !important;
}

#ozark-storefront :is(.hero-media, .dt-card, .mod-showcase, .pnp-hero, .product-review-scoreboard, .product-review-report, .gpc-manifest, .gpc-final-cta) {
  border-radius: 28px !important;
  border-color: var(--sf-edge) !important;
  box-shadow: var(--sf-depth) !important;
}

#ozark-storefront :is(.content-page, .guide-hero, .guide-link-grid > a, .welcome-step, .faq-item) {
  border-radius: 22px !important;
  border-color: var(--sf-edge) !important;
  box-shadow: var(--sf-depth) !important;
}

/* Controls keep the existing blue and product-specific action colors. */
#ozark-storefront :is(.pc-btn, .btn-primary, .btn-secondary, .home-bundle-button, .home-bundle-details, .product-details-buy, .product-update-link, .nav-cart) {
  border-radius: 16px !important;
}

#ozark-storefront :is(.pc-btn, .btn-primary, .home-bundle-button, .product-details-buy) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#ozark-storefront :is(.pc-btn, .btn-primary, .home-bundle-button, .product-details-buy)::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 55%;
  height: auto;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .23), transparent) !important;
  opacity: 1;
  transform: translateX(-160%) !important;
  animation: none !important;
  transition: transform 650ms var(--sf-ease) !important;
  pointer-events: none;
  content: "";
}

#ozark-storefront :is(a, button, summary):focus-visible {
  outline: 2px solid #087ca7 !important;
  outline-offset: 4px;
}

/* No full-page blur. Only the stationary header and small purchase surface use it. */
@media (min-width: 901px) and (prefers-reduced-transparency: no-preference) {
  #ozark-storefront .purchase-command {
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #ozark-storefront[data-motion="full"] :is(.home-products .pc, .gp-chip, .guide-link-grid > a) {
    transition: opacity 500ms ease, translate 500ms var(--sf-ease), scale 240ms var(--sf-ease), box-shadow 350ms var(--sf-ease), border-color 250ms ease !important;
  }

  #ozark-storefront[data-motion="full"] :is(.home-products .pc, .gp-chip, .guide-link-grid > a):not(.oz-motion-pending):hover {
    translate: 0 -4px !important;
    box-shadow: var(--sf-raised) !important;
    transition-delay: 0ms !important;
  }

  #ozark-storefront :is(.pc-btn, .btn-primary, .home-bundle-button, .product-details-buy):hover::before {
    transform: translateX(240%) !important;
  }

  #ozark-storefront[data-motion="full"] :is(.site-header .nav a, .home-bundle-button, .home-bundle-details, .product-update-link) {
    transition: transform 220ms var(--sf-ease), box-shadow 220ms ease, background-color 220ms ease !important;
  }

  #ozark-storefront[data-motion="full"] :is(.home-bundle-button, .home-bundle-details, .product-update-link):active {
    transform: scale(.975) !important;
  }
}

/* Reuse the existing entrance observer; no extra listeners or animation loops. */
#ozark-storefront[data-motion="full"] .oz-motion-item:not(.oz-motion-title) {
  transition-timing-function: var(--sf-ease) !important;
}

#ozark-storefront[data-motion="full"] .oz-motion-item.oz-motion-pending:not(.oz-motion-title) {
  translate: 0 14px !important;
  scale: 1 !important;
}

@media (max-width: 900px) {
  #ozark-storefront .site-header .wrap::before {
    inset-inline: -4px;
    border-radius: 22px;
  }

  #ozark-storefront .site-header .nav {
    border: 1px solid var(--sf-edge) !important;
    border-radius: 22px !important;
    background: var(--sf-glass-solid) !important;
    box-shadow: var(--sf-depth) !important;
  }

  #ozark-storefront .site-header .nav a {
    min-height: 44px;
  }

  #ozark-storefront .purchase-command {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  #ozark-storefront .product-switcher {
    position: relative;
    isolation: isolate;
    border-radius: 20px !important;
    background: var(--sf-glass-solid) !important;
    box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(8, 94, 128, .06) !important;
  }

  #ozark-storefront .product-switcher button {
    border-radius: 16px;
  }

  @supports selector(:has(*)) {
    #ozark-storefront .product-switcher::before {
      position: absolute;
      z-index: -1;
      top: 4px;
      bottom: 4px;
      left: 4px;
      width: calc((100% - 16px) / 3);
      border: 1px solid rgba(8, 124, 167, .2);
      border-radius: 16px;
      background: linear-gradient(140deg, #fff, #e5f5fc);
      box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(8, 94, 128, .1);
      transform: translateX(0);
      transition: transform 400ms var(--sf-ease);
      pointer-events: none;
      content: "";
    }

    #ozark-storefront .product-switcher:has([data-product-switch="shooters"][aria-selected="true"])::before {
      transform: translateX(calc(100% + 4px));
    }

    #ozark-storefront .product-switcher:has([data-product-switch="aim"][aria-selected="true"])::before {
      transform: translateX(calc(200% + 8px));
    }

    #ozark-storefront .product-switcher button[aria-selected="true"] {
      border-color: transparent;
      background: transparent;
      box-shadow: none;
    }
  }
}

/* Opaque glass still has reflection and depth when transparency is reduced. */
@media (prefers-reduced-transparency: reduce) {
  #ozark-storefront { --sf-glass: var(--sf-glass-solid); }

  #ozark-storefront .site-header {
    background: #f5fbfe !important;
  }

  #ozark-storefront :is(.site-header, .purchase-command, .home-products .pc, .product-details-panel) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce), (update: slow) {
  #ozark-storefront .product-switcher::before {
    transition: none !important;
  }

  #ozark-storefront :is(.pc-btn, .btn-primary, .home-bundle-button, .product-details-buy)::before {
    display: none;
    transition: none !important;
  }
}

@media print {
  #ozark-storefront :is(.site-header, .purchase-command, .home-products .pc, .content-page) {
    background: #fff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
