/* Generated from the deployed index.html <style> block.
   Cart.dc.html's own style block is only the dc-runtime placeholder CSS and
   carries no @font-face, which is why the commerce pages rendered in browser
   default fonts. Font URLs are rewritten to the theme's site/assets/fonts/. */

@font-face { font-family: "Switzer"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../../site/assets/fonts/switzer.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-style: normal; font-display: swap; src: url("../../site/assets/fonts/space-grotesk.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 500; font-style: normal; font-display: swap; src: url("../../site/assets/fonts/jetbrains-mono.woff2") format("woff2"); }
html { scroll-behavior: smooth; background: #050505; }
body { margin: 0; background: #050505; font-family: "Switzer", -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; color: #efefec; }
::selection { background: rgba(168,85,247,0.32); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
input, textarea { caret-color: #a855f7; }
a { -webkit-tap-highlight-color: transparent; }
@keyframes ely-drift { from { background-position: 0% 0%, 100% 0%, 50% 0%, 0 0; } to { background-position: 30% 20%, 70% 15%, 40% 25%, 0 0; } }
@keyframes ely-cue { 0%, 100% { opacity: 0.45; transform: translateY(0); } 50% { opacity: 1; transform: translateY(4px); } }
@keyframes ely-float { from { transform: translateY(0px); } to { transform: translateY(-10px); } }
@keyframes ely-wall-panel { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes ely-wall-item { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ely-marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.ely-track::-webkit-scrollbar { display: none; }
/* hero vial: barely-there vertical float (on the img — GSAP owns the wrapper) */
@keyframes ely-vial-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.ely-hero-vial img { animation: ely-vial-float 7.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ely-hero-vial img { animation: none; } }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  [data-screen-label="Header"] > div { flex-wrap: wrap !important; row-gap: 10px !important; padding: 12px 1rem !important; }
  [data-screen-label="Header"] > div > a > img { width: 128px !important; }
  [data-screen-label="Header"] nav { order: 3 !important; width: 100% !important; justify-content: space-between !important; gap: 0.5rem !important; font-size: 0.625rem !important; letter-spacing: 0.08em !important; }
  [data-screen-label="Footer"] { padding: 2.5rem 1rem 1.6rem !important; }
  body { overflow-x: clip !important; }
  h1 + span { display: none !important; }
  .ely-footer-cols { grid-template-columns: 1fr !important; gap: 2.2rem 0 !important; text-align: center !important; }
  .ely-footer-cols img { margin-left: auto !important; margin-right: auto !important; }
  .ely-footer-cols div { align-items: center !important; }
  img[src="assets/hex-network.svg"] { width: 82vw !important; opacity: 0.5 !important; }
  .ely-grid3 { grid-template-columns: repeat(2, 1fr) !important; }
  .ely-grid3 > div { padding: 18px 14px 22px !important; }
  .ely-grid3 img { margin: 10px 0 14px !important; }
  .ely-pairs { grid-template-columns: 1fr !important; }
  .ely-card-name { display: block !important; min-height: 2.6em !important; line-height: 1.25 !important; font-size: 0.75rem !important; }
  .ely-card-add { display: none !important; }
  .ely-card-view { display: block !important; }
  /* section titles centered, meta labels removed for space */
  .ely-reveal-group > div:first-child { justify-content: center !important; }
  .ely-reveal-group > div:first-child > span { display: none !important; }
  .elysium-section-title { text-align: center !important; }
  .ely-grid4 { grid-template-columns: repeat(2, 1fr) !important; }
  .ely-cart-grid, .ely-checkout-grid, .ely-contact-grid, .ely-product-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

/* ---------- half-tab (snapped window / small tablet-landscape) ----------
   Olympex-style: desktop structure kept — vial included — but sized to fit.
   Reference: olympexsolutions.com at ~800px (headline 38px, hero ~2/3 vh,
   3-up standard cards). The plexus zoom at this aspect lives in vapor.js
   (K keys off max(W, 1.2H) so a tall narrow hero zooms instead of densifying). */
@media (min-width: 761px) and (max-width: 1099px) {
  [data-screen-label="Hero"], [data-screen-label="Hero"] > div { height: 76vh !important; min-height: 560px !important; }
  .ely-hero-vial { width: 46vw !important; max-width: 520px !important; left: 75% !important; }
  .ely-hero-content h1 { max-width: 10ch !important; }
  .ely-hero-content > p { max-width: min(54vw, 44ch) !important; }
  .ely-hero-buttons { max-width: 54vw !important; flex-wrap: wrap !important; }
}

@media (max-width: 760px) {
  .ely-hero-vial, .ely-hero-dust { display: none !important; }
  /* still-shot cover replaces the animated plexus on phones */
  .ely-vapor { display: none !important; }
  .ely-hero-mobile-cover { display: block !important; }
  .ely-hero-content { text-align: center !important; align-items: center !important; }
  .ely-hero-content h1 { max-width: 100% !important; }
  .ely-hero-buttons { justify-content: center !important; flex-wrap: wrap !important; }

  /* header: Home + Shop + Account + Cart evenly centered, search below */
  .ely-head-faq { display: none !important; }
  [data-screen-label="Header"] > div { justify-content: space-evenly !important; }
  [data-screen-label="Header"] > div > a:first-child { width: 100%; justify-content: center !important; }
  [data-screen-label="Header"] nav { display: contents !important; } .ely-head-right { display: none !important; }
  [data-screen-label="Header"] nav a, .ely-head-right a { font-size: 0.6875rem !important; letter-spacing: 0.1em !important; }
  .ely-head-search { display: flex !important; width: 100% !important; }

  /* hero: condensed — trim the empty black field */
  [data-screen-label="Hero"] { height: auto !important; }
  [data-screen-label="Hero"] > div { height: auto !important; min-height: 0 !important; }
  .ely-hero-content { height: auto !important; padding: 3rem 1rem 3.25rem !important; }
  .ely-scroll-cue { display: none !important; }

  /* verification wall: condensed, no scrolling */
  .ely-wall-panel { padding: 22px 18px !important; }
  .ely-wall-panel > img { max-width: 140px !important; margin-bottom: 12px !important; }
  .ely-wall-panel h2 { font-size: 0.65rem !important; margin-bottom: 10px !important; }
  .ely-wall-panel > p { font-size: 0.8125rem !important; margin-bottom: 10px !important; }
  .ely-wall-panel div[style*="line-height"] { font-size: 0.75rem !important; line-height: 1.45 !important; margin-bottom: 12px !important; gap: 5px; }
  .ely-wall-panel fieldset { padding: 6px 10px !important; margin-bottom: 14px !important; }
  .ely-wall-panel label { padding: 6px 8px !important; font-size: 0.8125rem !important; }
  .ely-wall-panel button { padding: 0.8em 1em !important; }

  /* featured rail: native touch scroll + snap, two compounds per view, no arrows.
     JS drag is mouse-only; the doubled loop content is hidden so the rail has a real end. */
  .ely-track { border-left: none !important; touch-action: pan-x pan-y !important; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .ely-track .ely-product-card { flex: 0 0 50% !important; box-sizing: border-box !important; padding: 16px 12px 20px !important; scroll-snap-align: start; }
  .ely-track .ely-product-card:nth-child(n+6) { display: none !important; }
  .ely-track .ely-product-card img { margin: 0 0 12px !important; }
  [data-screen-label="Featured compounds"] button[aria-label="Previous"],
  [data-screen-label="Featured compounds"] button[aria-label="Next"] { display: none !important; }
}