/* ================================================================
   FIZZY SHOP — neon glass skin
   Violet glow, glass panels, gradient accents. Colours, radii and
   fonts come from the builder settings; this file adds the identity.
   ================================================================ */

:root {
  --fz-ease: cubic-bezier(.2,.7,.2,1);
  --fz-grad: linear-gradient(120deg, #6d28d9 0%, rgb(var(--cl-accent)) 45%, #d946ef 100%);
  --fz-glass: linear-gradient(170deg, rgba(var(--cl-accent),.08), rgba(255,255,255,.012) 45%);
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(var(--cl-accent),.55); color: #fff; }

/* ---------- Titles : big, tight, gradient highlight ---------- */
.sa-section-title, .sa-hero-title { letter-spacing: -0.04em; text-wrap: balance; font-weight: 800; }
.sa-section-title { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.05; }
.hl-accent .mk { background: var(--fz-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(var(--cl-accent),.35)); }
.sa-section-subtitle { font-size: clamp(1rem, 1.3vw, 1.12rem); color: rgb(var(--cl-t-muted)); text-wrap: pretty; }
.sa-section-header { margin-bottom: clamp(32px, 4.5vw, 52px); }

/* Kicker: ─── BEST SELLERS ─── */
.sa-section-eyebrow, .sa-hero-eyebrow {
  display: inline-flex !important; align-items: center; gap: .85rem;
  font-size: .74rem !important; font-weight: 800 !important; letter-spacing: .22em; text-transform: uppercase;
  color: rgb(var(--cl-accent)) !important; margin-bottom: .9rem !important;
}
.sa-section-eyebrow::before, .sa-section-eyebrow::after, .sa-hero-eyebrow::before, .sa-hero-eyebrow::after {
  content: ""; width: 2.4rem; height: 2px; border-radius: 9999px; background: var(--fz-grad); box-shadow: 0 0 12px rgba(var(--cl-accent),.8);
}
.text-left > .sa-section-eyebrow::before { display: none; }

/* ---------- Hero ---------- */
.sa-hero { isolation: isolate; }
.sa-hero::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -12%; width: min(980px, 120vw); height: 620px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--cl-accent),.30), rgba(217,70,239,.10) 55%, transparent 78%); pointer-events: none; filter: blur(8px);
}
.sa-hero-title { font-size: clamp(2.8rem, 7.4vw, 5.9rem); line-height: .98; }
.sa-hero-subtitle { font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important; max-width: 42rem; margin-inline: auto; line-height: 1.65; color: rgb(var(--cl-t-muted)); }
.sa-hero-actions { gap: .8rem; }
.sa-hero-actions .sa-btn { min-height: 3.35rem; padding-inline: 1.75rem; font-weight: 700; font-size: 1rem; }
.sa-hero-chips { gap: .6rem !important; margin-top: 2rem !important; }
.sa-hero-chip {
  padding: .55rem 1rem !important; font-size: .82rem !important; font-weight: 600; color: rgb(var(--cl-t-primary)) !important;
  background: rgba(255,255,255,.035) !important; border-color: rgba(var(--cl-accent),.22) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sa-hero-chip i { color: rgb(var(--cl-accent)); filter: drop-shadow(0 0 6px rgba(var(--cl-accent),.8)); }
.sa-hero-chip:last-child i { color: #fbbf24; filter: drop-shadow(0 0 6px rgba(251,191,36,.6)); }

/* ---------- Buttons ---------- */
.sa-btn { transition: transform 200ms var(--fz-ease), box-shadow 200ms, background-color 200ms, border-color 200ms, filter 200ms; font-weight: 700; }
.sa-btn:hover { transform: translateY(-2px); }
.sa-btn:active { transform: translateY(0); }
.sa-btn--primary.sa-btn--solid { background: var(--fz-grad) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 14px 34px -14px rgba(var(--cl-accent),.9), inset 0 1px 0 rgba(255,255,255,.18); }
.sa-btn--primary.sa-btn--solid:hover { filter: brightness(1.08); box-shadow: 0 18px 40px -12px rgba(var(--cl-accent),1), inset 0 1px 0 rgba(255,255,255,.22); }
.sa-btn--outline { background: rgba(255,255,255,.03) !important; border-color: rgba(var(--cl-accent),.35) !important; backdrop-filter: blur(8px); }
.sa-btn--outline:hover { border-color: rgb(var(--cl-accent)) !important; background: rgba(var(--cl-accent),.1) !important; }

/* ---------- Navbar ---------- */
.sa-navbar-link { font-weight: 600; letter-spacing: .01em; transition: color 200ms, background-color 200ms; }
.sa-navbar-logo img { border-radius: 10px; }
.sa-navbar-cart { box-shadow: 0 0 22px -6px rgba(var(--cl-accent),.9); }

/* ---------- Product cards : glass + glow ---------- */
.sa-product-card {
  background: var(--fz-glass), rgb(var(--cl-surface)) !important;
  border-color: rgba(var(--cl-accent),.16) !important;
  transition: transform 320ms var(--fz-ease), border-color 320ms, box-shadow 320ms;
}
.sa-product-card:hover { transform: translateY(-5px); border-color: rgba(var(--cl-accent),.6) !important; box-shadow: 0 26px 60px -30px rgba(var(--cl-accent),.95), 0 0 0 1px rgba(var(--cl-accent),.25); }
.sa-product-card img { transition: transform 700ms var(--fz-ease); }
.sa-product-card:hover img { transform: scale(1.05); }
.sa-product-card-title { font-weight: 700; letter-spacing: -0.015em; }
.sa-product-card-price { font-weight: 800; color: rgb(var(--cl-accent)) !important; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sa-product-card-price-slash { color: rgb(var(--cl-t-muted)); }

/* ---------- Stats : one glowing glass panel feel ---------- */
.sa-stats-item {
  position: relative; overflow: hidden; background: var(--fz-glass), rgb(var(--cl-surface)) !important;
  border-color: rgba(var(--cl-accent),.2) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.sa-stats-item::after { content: ""; position: absolute; left: 20%; right: 20%; top: 0; height: 1px; background: var(--fz-grad); opacity: .8; }
.sa-stats-item :is(strong, [class*="text-4xl"], [class*="text-5xl"], [class*="text-h1"], [class*="text-display"]) {
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; font-weight: 800;
  background: linear-gradient(180deg, #fff 30%, rgba(var(--cl-accent),.85)); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Features & steps ---------- */
.sa-features-item, .sa-steps-item {
  background: var(--fz-glass), rgb(var(--cl-surface)) !important; border-color: rgba(var(--cl-accent),.14) !important;
  transition: border-color 280ms, transform 280ms var(--fz-ease), box-shadow 280ms;
}
.sa-features-item:hover, .sa-steps-item:hover { border-color: rgba(var(--cl-accent),.5) !important; transform: translateY(-3px); box-shadow: 0 20px 44px -28px rgba(var(--cl-accent),.9); }
.sa-features-item i, .sa-steps-icon i { filter: drop-shadow(0 0 8px rgba(var(--cl-accent),.7)); }
.sa-steps-icon { background: rgba(var(--cl-accent),.14) !important; color: rgb(var(--cl-accent)) !important; box-shadow: 0 0 0 1px rgba(var(--cl-accent),.3), 0 0 26px -6px rgba(var(--cl-accent),.8); }

/* ---------- Reviews ---------- */
.sa-feedbacks [class*="rounded-card"] { border-color: rgba(var(--cl-accent),.14); transition: border-color 280ms; }
.sa-feedbacks [class*="rounded-card"]:hover { border-color: rgba(var(--cl-accent),.45); }

/* ---------- Footer ---------- */
.sa-footer-link { transition: color 200ms; }
.sa-footer-link:hover { color: rgb(var(--cl-accent)); }

/* ---------- Status page ---------- */
.fz-status-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.fz-status-search { flex: 1 1 260px; display: flex; align-items: center; gap: .6rem; height: 3rem; padding: 0 1rem; border: 1px solid var(--cl-border); border-radius: var(--radius-input, 10px); background: rgb(var(--cl-surface)); }
.fz-status-search input { flex: 1; background: transparent; border: 0; outline: 0; color: rgb(var(--cl-t-primary)); }
.fz-status-filters { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--cl-border); border-radius: 9999px; background: rgb(var(--cl-surface)); }
.fz-status-filters button { padding: .45rem .95rem; border-radius: 9999px; font-size: .85rem; font-weight: 600; color: rgb(var(--cl-t-muted)); transition: all 200ms; }
.fz-status-filters button[aria-pressed="true"], .fz-status-filters button.is-active { background: rgb(var(--cl-accent)); color: rgb(var(--cl-on-accent)); }
.fz-status-live { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: rgb(var(--cl-t-muted)); }
.fz-status-live span { width: .5rem; height: .5rem; border-radius: 9999px; background: rgb(var(--cl-success)); box-shadow: 0 0 0 4px rgba(var(--cl-success),.18); }
.fz-status-live small { opacity: .7; }
.fz-status-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.fz-status-summary > div { padding: 1rem 1.25rem; border: 1px solid var(--cl-border); border-radius: var(--radius-card, 14px); background: rgb(var(--cl-surface)); }
.fz-status-summary strong { display: block; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--cl-t-primary)); }
.fz-status-summary span { font-size: .8rem; color: rgb(var(--cl-t-muted)); }
.fz-status-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.fz-status-product { display: flex; align-items: center; gap: .9rem; padding: .75rem; border: 1px solid var(--cl-border); border-radius: var(--radius-card, 14px); background: rgb(var(--cl-surface)); transition: border-color 220ms, transform 220ms var(--fz-ease); }
.fz-status-product:hover { border-color: rgba(var(--cl-accent),.4); transform: translateY(-2px); }
.fz-status-media { width: 4.5rem; aspect-ratio: 16/10; flex-shrink: 0; overflow: hidden; border-radius: calc(var(--radius-card, 14px) - 6px); background: rgba(var(--cl-accent),.1); display: grid; place-items: center; font-weight: 700; color: rgb(var(--cl-accent)); }
.fz-status-media img { width: 100%; height: 100%; object-fit: cover; }
.fz-status-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fz-status-copy strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(var(--cl-t-primary)); }
.fz-status-copy small { font-size: .78rem; color: rgb(var(--cl-t-muted)); }
.fz-stock-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 9999px; font-size: .72rem; font-weight: 600; }
.fz-stock-pill i { width: .4rem; height: .4rem; border-radius: 9999px; background: currentColor; }
.fz-stock-pill.is-in { color: rgb(var(--cl-success)); background: rgba(var(--cl-success),.12); }
.fz-stock-pill.is-out { color: rgb(var(--cl-error)); background: rgba(var(--cl-error),.12); }
.fz-status-empty { margin-top: 2rem; text-align: center; color: rgb(var(--cl-t-muted)); }
@media (max-width: 640px) { .fz-status-summary strong { font-size: 1.35rem; } .fz-status-grid { grid-template-columns: 1fr; } }

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ================================================================
   AURORA BACKGROUND + MELTING EDGES
   ================================================================ */
html { background: #040308 !important; }
body { background: transparent !important; }
.component { position: relative; }
body::before {
  content: ""; position: fixed; inset: -10vh -10vw; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vw 32vw at 12% 8%, rgba(124,58,237,.30), transparent 70%),
    radial-gradient(34vw 30vw at 92% 22%, rgba(217,70,239,.18), transparent 70%),
    radial-gradient(46vw 36vw at 70% 92%, rgba(99,102,241,.16), transparent 72%),
    radial-gradient(30vw 26vw at 18% 78%, rgba(168,85,247,.12), transparent 70%);
  filter: blur(20px);
  animation: fz-aurora 26s ease-in-out infinite alternate;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 20%, transparent 75%);
}
@keyframes fz-aurora { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2vw,-2vh,0) scale(1.06); } 100% { transform: translate3d(-2vw,2vh,0) scale(1.02); } }
#app, .component, .sa-hero, footer, header { background-color: transparent !important; }

/* Melting cards: translucent glass, soft radius, gradient border fading into the page */
.sa-product-card,
.sa-features-item,
.sa-steps-item,
.sa-stats-item,
.sa-feedbacks [class*="rounded-card"],
.fz-status-product, .fz-status-summary > div {
  border: 1px solid transparent !important;
  border-radius: 22px !important;
  background:
    linear-gradient(165deg, rgba(20,16,32,.72), rgba(10,8,18,.55)) padding-box,
    linear-gradient(170deg, rgba(167,139,250,.42), rgba(167,139,250,.08) 38%, rgba(255,255,255,.03) 70%, transparent) border-box !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.9) !important;
}
.sa-product-card:hover,
.sa-features-item:hover,
.sa-steps-item:hover,
.sa-stats-item:hover,
.fz-status-product:hover {
  background:
    linear-gradient(165deg, rgba(28,20,46,.8), rgba(12,9,22,.6)) padding-box,
    linear-gradient(170deg, rgba(192,132,252,.85), rgba(139,92,246,.25) 45%, transparent) border-box !important;
  box-shadow: 0 30px 70px -34px rgba(139,92,246,.75) !important;
}
.sa-product-card { overflow: hidden; }
.sa-steps-item { padding: 1.6rem 1.6rem 1.8rem; }
.sa-features-item { padding: 1.6rem !important; }
.sa-stats-item::after { display: none; }

/* soft fade-out at the bottom of every card image so photos melt into the card */
.sa-product-card :is(img) { -webkit-mask-image: linear-gradient(180deg, #000 70%, rgba(0,0,0,.35)); mask-image: linear-gradient(180deg, #000 70%, rgba(0,0,0,.35)); }

/* Section separators: faint glowing hairline instead of hard edges */
.component + .component::before {
  content: ""; position: absolute; left: 50%; top: 0; width: min(760px, 80%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(167,139,250,.28), transparent); pointer-events: none;
}
.sa-hero + .component::before, .sa-trust-badges + .component::before, .component + .sa-trust-badges::before { display: none; }

/* Icons in tinted squares get a soft glow */
.sa-features-item span[class*="bg-accent-500"], .sa-steps-icon { border-radius: 14px !important; background: rgba(139,92,246,.14) !important; box-shadow: inset 0 0 0 1px rgba(167,139,250,.28), 0 0 24px -8px rgba(139,92,246,.9); }

/* Navbar glass */
header nav, .sa-navbar, [class*="floating"] > nav { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }