/* Layout polish: keeps decorative effects from causing clipped text, hard image corners or mobile overflow. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

html {
  scroll-behavior: auto !important;
}

body.nl-lite-motion::before,
.nl-stage {
  display: none !important;
}

body.nl-lite-motion {
  background:
    radial-gradient(circle at 15% 14%, rgba(200,169,126,.10), transparent 24rem),
    radial-gradient(circle at 85% 18%, rgba(196,30,36,.06), transparent 22rem),
    linear-gradient(180deg,#0b1120 0%,#060913 58%,#04070f 100%);
}

body.nl-lite-motion :where(.product-card,[data-slot="card"],.card,article,.panel,.stat-card,.login-card) {
  backdrop-filter: none !important;
  will-change: auto !important;
  transform-style: flat !important;
  opacity: 1 !important;
  transform: none !important;
}

body.nl-lite-motion :where(img[src*="hero"], img[src*="product"], .hero-vial-img, .nl-logo-drip img, img.nl-logo-drip) {
  animation: none !important;
  will-change: auto !important;
}

body.nl-lite-motion .nl-hero-3d {
  transform: none !important;
  transition: none !important;
}

body.nl-lite-motion .nl-hero-3d::before {
  display: none !important;
}

body.nl-lite-motion [data-nl-reveal] {
  transition-duration: .22s !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body.nl-lite-motion .nl-spotlight,
body.nl-lite-motion .nl-ripple {
  display: none !important;
}

.ph-light-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999998;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid rgba(200,169,126,.28);
  border-radius: 999px;
  background: rgba(6,9,19,.86);
  color: #f3d8a8;
  font: 700 12px/1 Inter, system-ui, sans-serif;
  box-shadow: 0 10px 28px rgba(0,0,0,.34);
  backdrop-filter: blur(8px);
}

.ph-light-toggle:hover {
  border-color: rgba(200,169,126,.5);
  background: rgba(15,22,36,.94);
}

.ph-light-toggle-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(200,169,126,.45);
  border-radius: 50%;
  color: #070b14;
  background: transparent;
  font-size: 11px;
}

.ph-light-toggle[aria-pressed="true"] .ph-light-toggle-dot {
  background: #c8a97e;
}

body.ph-light-version {
  background: #070b14 !important;
}

body.ph-light-version::before,
body.ph-light-version .nl-scrollbar,
body.ph-light-version .nl-stage,
body.ph-light-version .nl-spotlight,
body.ph-light-version .nl-ripple {
  display: none !important;
}

body.ph-light-version *,
body.ph-light-version *::before,
body.ph-light-version *::after {
  animation: none !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

body.ph-light-version :where(.product-card,[data-slot="card"],.card,article,.panel,.stat-card,.login-card,.ph-page-card,.ph-modal-shell,.ph-modal-image-shell,.ph-info-card,.box) {
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 24px rgba(0,0,0,.18) !important;
  backdrop-filter: none !important;
  filter: none !important;
}

body.ph-light-version :where(.product-card,[data-slot="card"],.card,article,.panel,.stat-card,.login-card)::before,
body.ph-light-version :where(.product-card,[data-slot="card"],.card,article,.panel,.stat-card,.login-card)::after,
body.ph-light-version .ph-page-card::before,
body.ph-light-version .ph-page-card::after,
body.ph-light-version .ph-modal-shell::before,
body.ph-light-version .ph-modal-shell::after,
body.ph-light-version .ph-modal-image-shell::after {
  display: none !important;
}

body.ph-light-version :where(img[src*="hero"], img[src*="product"], .hero-vial-img) {
  filter: none !important;
  transform: none !important;
}

body.ph-light-version #ph-product-modal {
  backdrop-filter: none !important;
  background: rgba(3,7,18,.9) !important;
}

body.nl-ready :where(h1, h2, h3, p, a, button, label, span, small)[data-nl-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.hero-headline,
.hero-headline > span {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

[data-nl-depth] {
  transform: none;
}

.product-card,
[data-slot="card"],
.card,
article,
.panel,
.stat-card,
.login-card,
.ph-page-card {
  isolation: isolate;
  border-radius: 16px;
}

.product-card::before,
[data-slot="card"]::before,
.card::before,
article::before,
.panel::before,
.stat-card::before,
.login-card::before,
.ph-page-card::before,
.ph-page-card::after,
.ph-modal-shell::before,
.ph-modal-shell::after,
.ph-modal-image-shell::after {
  z-index: 0;
}

.product-card > *,
[data-slot="card"] > *,
.card > *,
article > *,
.panel > *,
.stat-card > *,
.login-card > *,
.ph-page-card > *,
.ph-modal-shell > *,
.ph-modal-image-shell > * {
  position: relative;
  z-index: 1;
}

.product-card img,
[data-slot="card"] img,
.card img,
article img,
img[src*="product-"] {
  border-radius: 14px !important;
  clip-path: inset(0 round 14px) !important;
}

.product-card picture,
[data-slot="card"] picture,
.card picture,
article picture {
  border-radius: 14px !important;
}

.nl-spotlight,
.nl-ripple {
  z-index: 0;
}

.nl-ripple + * {
  position: relative;
  z-index: 1;
}

.ph-modal-image-shell {
  border-radius: 24px !important;
}

.ph-modal-media img {
  object-fit: contain !important;
  border-radius: 24px !important;
  clip-path: inset(0 round 24px) !important;
}

@media (min-width: 2200px) {
  .max-w-content {
    max-width: 1536px !important;
  }

  .product-card {
    min-width: 0;
  }

  .grid:has(> .product-card) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 3400px) {
  .max-w-content {
    max-width: 1760px !important;
  }

  .grid:has(> .product-card) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

header {
  max-width: 100vw;
}

nav.fixed {
  max-width: 100vw;
}

header > div,
header [class*="max-w-content"],
nav.fixed > div,
nav.fixed [class*="max-w-content"] {
  min-width: 0;
}

.admin-top::before,
.panel-head::before,
.top::before {
  z-index: 0;
}

.admin-top > *,
.panel-head > *,
.top > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .product-card,
  [data-slot="card"],
  .card,
  article,
  .panel,
  .stat-card,
  .login-card {
    transform: none !important;
    transform-style: flat;
  }

  header > div,
  header [class*="max-w-content"],
  nav.fixed > div,
  nav.fixed [class*="max-w-content"] {
    width: 100%;
    max-width: 100%;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 12px;
  }

  header nav,
  nav.fixed nav {
    display: none !important;
  }

  header a:first-child,
  nav.fixed a:first-child {
    flex: 0 0 auto;
  }

  header button,
  header a[href*="cart"],
  nav.fixed button,
  nav.fixed a[href*="cart"] {
    flex: 0 0 auto;
  }

  body > div,
  #root {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  [class*="tracking-"] {
    overflow-wrap: anywhere;
  }

  header + div,
  header ~ div {
    max-width: 100vw;
  }

  header + div {
    width: 100vw;
    overflow: hidden;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  header + div * {
    max-width: calc(100vw - 24px);
    white-space: normal !important;
    text-align: center;
    letter-spacing: .08em !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere;
  }

  header :where(button, a[href*="cart"]) {
    margin-right: 0 !important;
    transform: none !important;
  }

  nav.fixed :where(button, a[href*="cart"]) {
    margin-right: 0 !important;
    transform: none !important;
  }

  main h1 {
    max-width: 100%;
    font-size: clamp(1.9rem, 8.4vw, 2.35rem) !important;
    line-height: 1.14 !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body :where(.bg-red\/10, [class*="bg-red"]) {
    white-space: normal !important;
    text-align: center;
  }

  #ph-product-modal {
    padding: 10px !important;
  }

  .ph-modal-shell {
    width: 100% !important;
    border-radius: 18px !important;
  }

  .ph-modal-media {
    min-height: 260px !important;
    padding: 30px 18px 24px !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .ph-modal-image-shell {
    width: min(100%, 300px) !important;
    border-radius: 18px !important;
  }

  .ph-modal-media img {
    height: min(280px, 38vh) !important;
    object-fit: contain !important;
    border-radius: 18px !important;
    clip-path: inset(0 round 18px) !important;
  }

  .ph-modal-content {
    padding: 28px 18px 24px !important;
  }

  .ph-modal-title {
    font-size: clamp(2rem, 14vw, 3.1rem) !important;
    line-height: 1 !important;
    overflow-wrap: anywhere;
  }

  .ph-modal-actions {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .ph-primary-btn,
  .ph-secondary-btn {
    width: 100%;
  }

  .ph-light-toggle {
    right: 12px;
    bottom: 12px;
    min-height: 40px;
    padding: 9px 12px;
  }
}