/* ============================================================
   KRAZY MARKET ? Premium Restyle (custom overrides)
   Loaded AFTER pro.css, so everything here wins safely.
   Nothing structural is touched ? only look, feel & motion.
   Palette: near-black + blue gaming (#38BDF8 -> #7DD3FC)
   ============================================================ */

:root {
  /* Accent — UHQ purple (sync with settings.json theme_color) */
  --km-accent: #38BDF8;
  --km-accent-rgb: 56, 189, 248;
  --km-accent-2: #7DD3FC;
  --km-accent-2-rgb: 125, 211, 252;

  /* Surfaces — UHQ dark */
  --km-bg: #07080b;
  --km-surface: rgba(255, 255, 255, 0.025);
  --km-surface-2: rgba(255, 255, 255, 0.04);
  --km-border: rgba(255, 255, 255, 0.07);
  --km-border-strong: rgba(255, 255, 255, 0.12);

  /* Fill the variables pro.css expects but master.njk never sets */
  --cl-card-bg: var(--km-surface);
  --cl-border-accent: rgba(var(--km-accent-rgb), 0.35);

  --km-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --km-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
}

/* ---------- Base polish ---------- */
html { scroll-behavior: smooth; }

body {
  background: var(--km-bg);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Refined ambient background wash (replaces hard blue radial) */
.bg-image {
  background:
    radial-gradient(circle at 50% -10%, rgba(var(--km-accent-rgb), 0.14), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(var(--km-accent-2-rgb), 0.06), transparent 40%),
    radial-gradient(circle at 0% 30%, rgba(var(--km-accent-rgb), 0.05), transparent 35%) !important;
}

/* Slimmer, more premium scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--km-accent-rgb), 0.35);
  border-radius: 20px;
  border: 3px solid var(--km-bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--km-accent-rgb), 0.55); }
* { scrollbar-color: rgba(var(--km-accent-rgb), 0.35) transparent; }

/* Text selection */
::selection { background: rgba(var(--km-accent-rgb), 0.3); color: #fff; }

/* ---------- Gradient accents (retune from blue) ---------- */
.hero-title-gradient {
  background: linear-gradient(100deg, var(--km-accent) 0%, var(--km-accent-2) 55%, #fff 120%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 200% auto;
  animation: kmShimmer 6s linear infinite;
}
@keyframes kmShimmer {
  to { background-position: 200% center; }
}

/* ---------- Navbar ---------- */
.navbar.component > .container {
  background: rgba(10, 10, 14, 0.62) !important;
  border: 1px solid var(--km-border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: border-color 0.3s var(--km-ease), background 0.3s var(--km-ease);
}
.navbar.component > .container:hover {
  border-color: rgba(var(--km-accent-rgb), 0.22) !important;
}
.navbar .nav-link {
  position: relative;
  transition: color 0.25s var(--km-ease) !important;
}
/* Sliding underline on nav links */
.navbar .nav-link::after {
  content: '';
  position: absolute;
  left: 1rem; right: 1rem;
  bottom: 0.25rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--km-accent), var(--km-accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--km-ease);
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after { transform: scaleX(1); }

/* ---------- Buttons ---------- */
.btn-login {
  background: linear-gradient(135deg, var(--km-accent), #0284C7) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px -8px rgba(var(--km-accent-rgb), 0.55) !important;
  transition: transform 0.25s var(--km-ease), box-shadow 0.3s var(--km-ease), filter 0.25s var(--km-ease) !important;
}
.btn-login:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.08);
  box-shadow: 0 14px 34px -8px rgba(var(--km-accent-rgb), 0.7) !important;
}
.btn-login:active { transform: translateY(0) scale(0.98) !important; }

.btn-login:focus-visible,
.nebula-btn-secondary:focus-visible,
.btn-outline-light:focus-visible {
  outline: 2px solid rgba(var(--km-accent-rgb), 0.45) !important;
  outline-offset: 3px;
}

/* Ghost / secondary buttons */
.nebula-btn-ghost,
.btn-outline-light {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--km-border) !important;
  transition: background 0.25s var(--km-ease), border-color 0.25s var(--km-ease), transform 0.25s var(--km-ease) !important;
}
.nebula-btn-ghost:hover,
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(var(--km-accent-rgb), 0.4) !important;
  transform: translateY(-2px);
}

/* ---------- Hero ---------- */
.nebula-hero-title {
  letter-spacing: -0.035em;
  animation: kmRise 0.8s var(--km-ease) both;
}
.nebula-hero-subtitle { animation: kmRise 0.8s 0.1s var(--km-ease) both; }
.nebula-hero-chips { animation: kmRise 0.8s 0.2s var(--km-ease) both; }
.hero .d-flex.justify-content-center { animation: kmRise 0.8s 0.3s var(--km-ease) both; }

.nebula-hero-badge {
  background: rgba(var(--km-accent-rgb), 0.1) !important;
  border: 1px solid rgba(var(--km-accent-rgb), 0.25) !important;
  color: var(--km-accent-2) !important;
  backdrop-filter: blur(8px);
  animation: kmRise 0.8s var(--km-ease) both, kmGlowPulse 3.5s ease-in-out infinite 1s;
}

.nebula-chip {
  border: 1px solid var(--km-border) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  transition: transform 0.25s var(--km-ease), border-color 0.25s var(--km-ease), background 0.25s var(--km-ease);
}
.nebula-chip:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--km-accent-rgb), 0.4) !important;
  background: rgba(var(--km-accent-rgb), 0.08) !important;
}

/* Tune the animated orbs to the violet palette */
.nebula-orb--a { background: radial-gradient(circle, rgba(var(--km-accent-rgb), 0.55), transparent 70%) !important; }
.nebula-orb--b { background: radial-gradient(circle, rgba(var(--km-accent-2-rgb), 0.4), transparent 70%) !important; }
.nebula-orb--c { background: radial-gradient(circle, rgba(108, 92, 231, 0.4), transparent 70%) !important; }
.nebula-orb--vs-1, .nebula-orb--d-1 { background: radial-gradient(circle, rgba(var(--km-accent-rgb), 0.5), transparent 70%) !important; }
.nebula-orb--vs-2, .nebula-orb--d-2 { background: radial-gradient(circle, rgba(var(--km-accent-2-rgb), 0.35), transparent 70%) !important; }

/* ---------- Cards (base look) ---------- */
.card {
  background: var(--km-surface) !important;
  border: 1px solid var(--km-border) !important;
  border-radius: 18px !important;
  transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out !important;
}
.card:hover {
  border-color: rgba(var(--km-accent-rgb), 0.4) !important;
  box-shadow: var(--km-shadow), 0 0 28px -6px rgba(var(--km-accent-rgb), 0.35) !important;
}

/* ============================================================
   PREMIUM PRODUCT CARDS ? 3D tilt + spotlight (scoped to products)
   GPU-only: transform / opacity / CSS vars. Driven by script.js.
   Layout, spacing, images, prices, typography: untouched.
   Accent color = theme accent (--km-accent). To use literal
   electric blue instead, set --km-accent-rgb below to 56, 189, 248.
   ============================================================ */
[data-product-name] { perspective: 1100px; }

[data-product-name] > .card {
  --rx: 0deg; --ry: 0deg; --lift: 0px;   /* set by JS spring loop */
  --mx: 50%; --my: 50%; --spot: 0;       /* spotlight follow + fade */
  transform: translate3d(0, var(--lift), 0) rotateX(var(--rx)) rotateY(var(--ry)) !important;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: none !important; /* release transform from pro.css entry keyframes */
  transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out !important;
}

/* Electric-accent animated border + soft glow ? fades in ~250ms ease-out.
   Border stays 1px (never thick); glow comes from box-shadow. */
[data-product-name] > .card:hover {
  border-color: rgba(var(--km-accent-rgb), 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(var(--km-accent-rgb), 0.30),
    0 22px 55px -18px rgba(0, 0, 0, 0.75),
    0 0 34px -10px rgba(var(--km-accent-rgb), 0.45) !important;
}

/* Mouse spotlight ? soft, large, feathered radial that follows the cursor.
   Pseudo-element = zero DOM changes. Clipped by the card's overflow. */
[data-product-name] > .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(650px circle at var(--mx) var(--my),
    rgba(var(--km-accent-rgb), 0.12),
    rgba(var(--km-accent-rgb), 0.05) 28%,
    transparent 60%);
  opacity: var(--spot, 0);
  transition: opacity 0.5s ease-out;
  mix-blend-mode: screen;
}

/* Subtle premium image zoom to 103% ? transforms only, no layout shift */
[data-product-name] > .card .card-img-top img {
  transition: transform 0.6s var(--km-ease);
  backface-visibility: hidden;
  transform: translateZ(0) scale(1);
}
[data-product-name] > .card:hover .card-img-top img {
  transform: translateZ(0) scale(1.03);
}

.price {
  color: var(--km-accent-2) !important;
  text-shadow: 0 0 18px rgba(var(--km-accent-rgb), 0.35);
}

/* The little chevron button inside cards */
.card .btn-login.rounded-circle {
  transition: transform 0.3s var(--km-ease) !important;
}
.card:hover .btn-login.rounded-circle { transform: translateX(3px); }

/* ---------- Search bar ---------- */
.fake-searchbar input {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--km-border) !important;
  border-radius: 14px !important;
  transition: border-color 0.25s var(--km-ease), box-shadow 0.25s var(--km-ease), background 0.25s var(--km-ease);
}
.fake-searchbar input:focus {
  border-color: rgba(var(--km-accent-rgb), 0.5) !important;
  box-shadow: 0 0 0 4px rgba(var(--km-accent-rgb), 0.12) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ---------- Nebula panels / sections ---------- */
.nebula-panel,
.nebula-compare-wrap,
.nebula-discord-wrap,
.nebula-discord-card,
.nebula-page-hero {
  border-radius: 22px !important;
}

/* Score kept as SOLID color ? gradient text-clip made it invisible */
.nebula-score {
  color: var(--km-accent-2) !important;
  -webkit-text-fill-color: var(--km-accent-2) !important;
  text-shadow: 0 0 22px rgba(var(--km-accent-rgb), 0.5) !important;
}
.nebula-score--muted {
  color: #cfcfcf !important;
  -webkit-text-fill-color: #cfcfcf !important;
  text-shadow: none !important;
}
.nebula-bar-fill:not(.nebula-bar-fill--muted) {
  background: linear-gradient(90deg, var(--km-accent), var(--km-accent-2)) !important;
}
.nebula-pill-dot {
  background: var(--km-accent) !important;
  box-shadow: 0 0 10px rgba(var(--km-accent-rgb), 0.7);
}
.nebula-vs-badge {
  background: linear-gradient(135deg, var(--km-accent), #0284C7) !important;
  box-shadow: 0 10px 30px -6px rgba(var(--km-accent-rgb), 0.6) !important;
}
.nebula-stat-value {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 0 18px rgba(var(--km-accent-rgb), 0.35);
}
.nebula-discord-pill,
.nebula-faq-number {
  background: rgba(var(--km-accent-rgb), 0.12) !important;
  color: var(--km-accent-2) !important;
  border: 1px solid rgba(var(--km-accent-rgb), 0.25) !important;
}

/* Accordion accent */
.nebula-accordion .accordion-button:not(.collapsed) {
  color: var(--km-accent-2) !important;
}
.nebula-accordion .accordion-item {
  transition: border-color 0.3s var(--km-ease);
}
.nebula-accordion .accordion-item:hover {
  border-color: rgba(var(--km-accent-rgb), 0.25) !important;
}

/* ---------- Footer ---------- */
.footer-link {
  transition: color 0.25s var(--km-ease), transform 0.25s var(--km-ease) !important;
}
.footer-link:hover {
  color: var(--km-accent-2) !important;
  transform: translateX(2px);
}

/* ---------- Scroll-reveal (pure CSS, no JS needed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .products-component,
  .nebula-compare-wrap,
  .nebula-discord-wrap,
  .nebula-accordion {
    animation: kmReveal 0.9s var(--km-ease) both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  /* Staggered product cards */
  .products-component .row > [data-product-name] {
    animation: kmReveal 0.7s var(--km-ease) both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
}

/* ---------- Keyframes ---------- */
@keyframes kmRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kmReveal {
  from { opacity: 0; transform: translateY(40px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kmGlowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--km-accent-rgb), 0.0); }
  50%      { box-shadow: 0 0 26px -2px rgba(var(--km-accent-rgb), 0.45); }
}

/* Respect reduced motion for the shimmer/pulse too */
@media (prefers-reduced-motion: reduce) {
  .hero-title-gradient,
  .nebula-hero-badge,
  .nebula-hero-title,
  .nebula-hero-subtitle,
  .nebula-hero-chips { animation: none !important; }
}

/* ============================================================
   PRODUCTS PAGE — ResellMe-style shop (KM blue)
   ============================================================ */
.km-shop [x-cloak] { display: none !important; }

.km-products-page.km-shop {
  padding: 2rem 0 3.5rem;
  position: relative;
}
.km-shop .km-page-deco { display: none !important; }

.km-shop-section {
  max-width: 1200px;
  margin: 0 auto;
}

.km-shop-head {
  text-align: left;
  margin-bottom: 1.35rem;
}
.km-shop-title {
  font-family: "Afacad", system-ui, sans-serif;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 0.55rem;
  line-height: 1.12;
}
.km-shop-sub {
  color: #9a9aa5;
  font-size: 0.98rem;
  max-width: 34rem;
  margin: 0;
  line-height: 1.5;
}

.km-shop-toprow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.km-shop-search {
  position: relative;
  flex: 1 1 260px;
  margin: 0;
}
.km-shop-search-ico {
  position: absolute;
  left: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6b6b76;
  pointer-events: none;
}
.km-shop-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  padding: 0.85rem 1.15rem 0.85rem 2.85rem !important;
  color: #fff !important;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.km-shop-search-input:focus {
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}
.km-shop-search-input::placeholder { color: #5b5b64; }

.km-shop-sort { position: relative; flex: 0 0 auto; }
.km-shop-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: #cfcfd6;
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
}
.km-shop-sort-btn strong { color: #fff; font-weight: 600; }
.km-shop-sort-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: 200px;
  padding: 0.4rem;
  border-radius: 12px;
  background: #0c1228;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.km-shop-sort-menu button {
  text-align: left;
  border: 0;
  background: transparent;
  color: #cfcfd6;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.88rem;
  cursor: pointer;
}
.km-shop-sort-menu button:hover,
.km-shop-sort-menu button.active {
  background: rgba(56, 189, 248, 0.15);
  color: #fff;
}

.km-shop-cats {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  margin-bottom: 1.5rem;
  scrollbar-width: thin;
}
.km-shop-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #b8b8c2;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.km-shop-pill:hover {
  color: #fff;
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
}
.km-shop-pill.active {
  color: #fff;
  background: #38BDF8;
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(56, 189, 248, 0.7);
}

/* Body: Price + Availability LEFT, products RIGHT (ResellMe layout) */
.km-shop-body {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.35rem;
  align-items: start;
}
@media (max-width: 991px) {
  .km-shop-body {
    grid-template-columns: 1fr;
  }
  .km-shop-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    position: static;
  }
}
@media (max-width: 560px) {
  .km-shop-side { grid-template-columns: 1fr; }
}

.km-shop-side {
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.km-shop-side-card {
  padding: 1rem;
  border-radius: 16px;
  background: rgba(16, 16, 25, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.km-shop-side-title {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #f6f7fb;
  margin: 0 0 0.5rem;
}
.km-shop-side-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.km-shop-price-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.4rem;
  align-items: end;
}
.km-shop-price-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.km-shop-price-field > span {
  font-size: 0.72rem;
  font-weight: 600;
  color: #9b9cb4;
  letter-spacing: 0.02em;
}
.km-shop-price-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.45rem 0.55rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.km-shop-price-input-wrap:focus-within {
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(56, 189, 248, 0.08);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}
.km-shop-price-currency {
  color: #9b9cb4;
  font-size: 0.8rem;
  font-weight: 600;
}
.km-shop-price-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent !important;
  color: #f6f7fb !important;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0 !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
}
.km-shop-price-input::-webkit-outer-spin-button,
.km-shop-price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.km-shop-price-input::placeholder {
  color: #5b5b6a;
  font-weight: 500;
}
.km-shop-price-sep {
  color: #6b6b76;
  font-size: 0.95rem;
  padding-bottom: 0.55rem;
  line-height: 1;
}
.km-shop-price-clear {
  margin-top: 0.55rem;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 0.4rem 0.55rem;
  background: rgba(255, 255, 255, 0.05);
  color: #c7c8d6;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.km-shop-price-clear:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.km-shop-side-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: #c7c8d6;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.km-shop-side-opt:hover {
  color: #f6f7fb;
  background: rgba(255, 255, 255, 0.05);
}
.km-shop-side-opt.active {
  color: #9fd0ff;
  background: rgba(56, 189, 248, 0.15);
  font-weight: 600;
}
.km-shop-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #c7c8d6;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  padding: 0.5rem 0.5rem;
  border-radius: 12px;
  transition: color 0.2s;
  position: relative;
}
.km-shop-check:hover,
.km-shop-check.active { color: #f6f7fb; }
.km-shop-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.km-shop-check-box {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  display: grid;
  place-items: center;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.km-shop-check-box.checked {
  background: #38BDF8;
  border-color: #38BDF8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}
.km-shop-check-box.checked::after {
  content: "";
  width: 0.35rem;
  height: 0.6rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.km-shop-count {
  margin: 0 0 1.25rem;
  color: #9b9cb4;
  font-size: 0.875rem;
}
.km-shop-count span {
  color: #f6f7fb;
  font-weight: 600;
}
.km-shop-empty {
  text-align: center;
  color: #9b9cb4;
  padding: 2.5rem 1rem;
}

/* 4-column product grid */
.km-shop-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}
@media (min-width: 700px) {
  .km-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .km-shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
}

.km-shop-card-wrap {
  min-width: 0;
}
.km-shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.75rem;
  background: rgba(16, 16, 25, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  overflow: hidden;
  text-align: left;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.04),
    0 20px 50px -20px rgba(0, 0, 0, 0.8);
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}
.km-shop-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(180px circle at 50% 42%, rgba(255, 255, 255, 0.14), transparent 55%);
}
.km-shop-card:hover {
  transform: scale(1.03);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    0 24px 55px -18px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(56, 189, 248, 0.12);
  z-index: 2;
}
.km-shop-card:hover::after { opacity: 1; }
.km-shop-card .card-click-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.km-shop-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #101019;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.km-shop-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.km-shop-card-img--empty {
  display: grid;
  place-items: center;
  color: #6b6b76;
}
.km-shop-card-badges {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  right: 0.55rem;
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
  pointer-events: none;
  z-index: 2;
}
.km-shop-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #f6f7fb;
  background: rgba(10, 12, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}
.km-shop-badge--rate {
  color: #fbbf24;
}
.km-shop-readme {
  position: absolute;
  left: 0.55rem;
  bottom: 0.55rem;
  z-index: 2;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #1a1205;
  background: linear-gradient(135deg, #f5d78e, #e2b84a);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.km-shop-card-body {
  padding: 0.85rem 0.35rem 0.25rem;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.km-shop-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #f6f7fb;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s;
}
.km-shop-card:hover .km-shop-card-title {
  color: #fff;
}
.km-shop-card-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.2rem;
}
.km-shop-card-price {
  color: #f6f7fb;
  font-size: 1.05rem;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.km-shop-from {
  color: #9b9cb4;
  font-weight: 500;
  font-size: 0.75rem;
}
.km-shop-card-price strong {
  font-weight: 700;
  color: #f6f7fb;
}
.km-shop-choose {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.15);
  color: #9fd0ff !important;
  font-size: 0.75rem;
  font-weight: 600;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.km-shop-card:hover .km-shop-choose {
  background: #38BDF8;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(56, 189, 248, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .km-shop-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  }
  .km-shop-card:hover {
    transform: none;
  }
}

/* Legacy browse leftovers (unused on new shop page) */
.products-browse { padding-top: 2.5rem; }
.products-browse-head { margin-bottom: 2rem; }
.products-browse-eyebrow {
  color: var(--km-accent-2);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.products-browse-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
}
.products-browse-subtitle { color: #9a9aa5; }
.products-browse-panel {
  background: transparent;
  border: 0;
  padding: 0;
}
.products-browse-cats { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.km-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #cfcfd6;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--km-border);
  text-decoration: none;
}
.km-cat-pill.active {
  color: #fff;
  background: #38BDF8;
}

/* ============================================================
   KRAZY MARKET storefront mirror (matches React site layout)
   ============================================================ */
.km-body,
.km-body body,
body.km-body {
  font-family: "Afacad", system-ui, sans-serif !important;
  background: #050814 !important;
  color: #e8eefc;
}

.bg-image {
  background:
    radial-gradient(ellipse 55% 70% at 75% 40%, rgba(0, 150, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 50% at 20% 60%, rgba(40, 100, 255, 0.1), transparent 65%),
    #050814 !important;
}

.km-brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.35));
}

.km-brand-name {
  font-family: "Orbitron", "Afacad", sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 1.05rem;
  color: #fff;
  text-transform: uppercase;
}

.navbar.component > .container {
  background: rgba(13, 18, 48, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
}

.btn-login,
.km-btn-primary {
  background: linear-gradient(135deg, #38BDF8, #0284C7) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(56, 189, 248, 0.35) !important;
  font-weight: 600 !important;
}

.km-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.15rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}
.km-btn-ghost:hover {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* ?? Hero (2-col like React) ?? */
.km-hero {
  position: relative;
  padding: 2.5rem 0 1rem;
  overflow: hidden;
}
.km-hero-grid {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 960px) {
  .km-hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2rem;
    min-height: calc(100vh - 220px);
  }
}
.km-hero-title {
  font-size: clamp(2.4rem, 5.2vw, 4rem) !important;
  line-height: 1.05 !important;
  margin: 0 0 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: #fff;
}
.km-typed {
  color: #7DD3FC !important;
  min-height: 1.1em;
  display: inline-block;
}
.km-hero-lead {
  color: #8b95b5;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  margin: 0 0 1.5rem;
}
.km-hero-lead strong { color: #7DD3FC; font-weight: 600; }
.km-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.km-hero-art {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.km-hero-art img {
  width: min(100%, 560px);
  filter: drop-shadow(0 30px 60px rgba(56, 189, 248, 0.25));
  animation: kmFloaty 6s ease-in-out infinite;
}
@keyframes kmFloaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.km-feature-row {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 900px) {
  .km-feature-row { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.km-feature-card {
  background: rgba(13, 18, 48, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.35rem 1.25rem;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.km-feature-card:hover {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.18);
  transform: translateY(-3px);
}
.km-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(56, 189, 248, 0.18);
  color: #7DD3FC;
  margin-bottom: 0.85rem;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.25);
}
.km-feature-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}
.km-feature-card p {
  margin: 0;
  color: #8b95b5;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* sections */
.km-section { padding: 3.5rem 0; }
.km-section-head { text-align: center; margin-bottom: 2rem; }
.km-eyebrow {
  color: #7DD3FC;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.km-section-head h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}
.km-section-head p { color: #8b95b5; margin: 0 auto; max-width: 36rem; }
.km-cat-cta { text-align: center; }

.km-stats-row {
  display: grid;
  gap: 1.25rem;
  text-align: center;
}
@media (min-width: 768px) {
  .km-stats-row { grid-template-columns: repeat(3, 1fr); }
}
.km-stat strong {
  display: block;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-family: "Orbitron", sans-serif;
  color: #7DD3FC;
  letter-spacing: 0.02em;
}
.km-stat span { color: #8b95b5; font-size: 0.95rem; }

.km-reviews-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .km-reviews-grid { grid-template-columns: repeat(3, 1fr); }
}
.km-review-card {
  background: rgba(13, 18, 48, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 14px;
  padding: 1.15rem 1.2rem;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.08);
}
.km-stars { color: #7DD3FC; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.km-review-card p { color: #e8eefc; margin: 0 0 0.85rem; }
.km-review-meta {
  display: flex;
  justify-content: space-between;
  color: #8b95b5;
  font-size: 0.85rem;
}

.km-faq-layout {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 960px) {
  .km-faq-layout { grid-template-columns: 0.9fr 1.1fr; gap: 2.5rem; }
}
.km-faq-sub { color: #8b95b5; margin-bottom: 1rem; }
.km-faq-art {
  width: min(100%, 280px);
  margin: 0.5rem 0 1rem;
  filter: drop-shadow(0 20px 40px rgba(56, 189, 248, 0.25));
}
.km-faq-support-title { font-weight: 700; color: #fff; margin: 0 0 0.25rem; }
.km-faq-support-meta { color: #8b95b5; margin: 0 0 1rem; }
.km-faq-support-meta strong { color: #7DD3FC; }
.km-faq-panel {
  background: rgba(13, 18, 48, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(56, 189, 248, 0.1);
}
.km-faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.km-faq-item:last-child { border-bottom: 0; }
.km-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  font-weight: 600;
  color: #fff;
}
.km-faq-item summary::-webkit-details-marker { display: none; }
.km-faq-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.km-faq-answer {
  padding: 0 1.15rem 1.1rem 4rem;
  color: #8b95b5;
  line-height: 1.55;
}

/* Product cards closer to KM */
[data-product-name] > .card {
  background: rgba(13, 18, 48, 0.85) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 14px !important;
}
[data-product-name] > .card:hover {
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.25), 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}
.price, .card .price {
  color: #7DD3FC !important;
}

/* Hide old nebula-centered hero leftovers if any */
.nebula-scroll, .nebula-motion-layer { display: none !important; }

/* ?? Atmosphere background (like React body::before/after) ?? */
body.km-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 50% -5%, rgba(0, 120, 255, 0.28), transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 20%, rgba(30, 80, 200, 0.18), transparent 50%),
    radial-gradient(ellipse 45% 35% at 100% 15%, rgba(0, 180, 255, 0.12), transparent 50%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(20, 40, 120, 0.35), transparent 55%),
    linear-gradient(180deg, #06102a 0%, #050814 38%, #040610 72%, #03040c 100%);
}
body.km-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    radial-gradient(rgba(120, 180, 255, 0.14) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
}
.bg-image {
  background: transparent !important;
}

/* Category banner grid (homepage) ? wide cards like marketplace screenshots */
.km-cat-grid,
.km-cat-grid--banners {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 560px) {
  .km-cat-grid,
  .km-cat-grid--banners {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .km-cat-grid,
  .km-cat-grid--banners {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
  }
}
.km-cat-banner {
  --glow: 56, 189, 248;
  position: relative;
  display: block;
  aspect-ratio: 2.15 / 1;
  min-height: 118px;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none !important;
  color: #fff !important;
  background:
    radial-gradient(ellipse 70% 80% at 50% 110%, rgba(var(--glow), 0.28), transparent 62%),
    linear-gradient(160deg, #141414 0%, #0a0a0a 55%, #050505 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
  animation: kmCatIn 0.55s ease both;
}
.km-cat-grid--banners .km-cat-banner:nth-child(1) { animation-delay: 0.02s; }
.km-cat-grid--banners .km-cat-banner:nth-child(2) { animation-delay: 0.07s; }
.km-cat-grid--banners .km-cat-banner:nth-child(3) { animation-delay: 0.12s; }
.km-cat-grid--banners .km-cat-banner:nth-child(4) { animation-delay: 0.17s; }
.km-cat-grid--banners .km-cat-banner:nth-child(5) { animation-delay: 0.22s; }
.km-cat-grid--banners .km-cat-banner:nth-child(6) { animation-delay: 0.27s; }
.km-cat-grid--banners .km-cat-banner:nth-child(7) { animation-delay: 0.32s; }
.km-cat-grid--banners .km-cat-banner:nth-child(8) { animation-delay: 0.37s; }
.km-cat-grid--banners .km-cat-banner:nth-child(9) { animation-delay: 0.42s; }
@keyframes kmCatIn {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}
.km-cat-banner:hover {
  border-color: rgba(var(--glow), 0.5);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(var(--glow), 0.28);
}
.km-cat-banner:hover .km-cat-banner-img {
  transform: scale(1.045);
}
.km-cat-banner:hover .km-cat-banner-glow {
  opacity: 1;
  animation: kmCatGlow 1.8s ease-in-out infinite alternate;
}
.km-cat-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
  pointer-events: none;
  transform: scale(1);
  transition: transform 0.55s ease;
  will-change: transform;
}
.km-cat-banner-glow {
  position: absolute;
  inset: auto -10% -35% -10%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(var(--glow), 0.55), transparent 68%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.85;
  transition: opacity 0.35s ease;
}
@keyframes kmCatGlow {
  from { opacity: 0.75; transform: scale(1); }
  to { opacity: 1; transform: scale(1.08); }
}
.km-cat-banner-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.45) 32%,
    transparent 58%
  );
}
.km-cat-banner-name {
  position: absolute;
  left: 0.95rem;
  bottom: 0.75rem;
  z-index: 2;
  margin: 0;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  line-height: 1.15;
  transition: letter-spacing 0.35s ease, text-shadow 0.35s ease;
}
.km-cat-banner:hover .km-cat-banner-name {
  letter-spacing: 0.03em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 0 18px rgba(var(--glow), 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .km-cat-banner,
  .km-cat-banner-img,
  .km-cat-banner-glow,
  .km-cat-banner-name {
    animation: none !important;
    transition: none !important;
  }
  .km-cat-banner:hover .km-cat-banner-img {
    transform: none;
  }
}
.km-cat-loading {
  grid-column: 1 / -1;
  padding: 2rem 1rem;
}
/* Legacy icon cards (products filters etc.) */
.km-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 1.15rem 0.85rem;
  border-radius: 14px;
  background: #121a36;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none !important;
  color: #fff !important;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}
.km-cat-card:hover {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.2);
  transform: translateY(-3px);
}
.km-cat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(56, 189, 248, 0.15);
  color: #7DD3FC;
}
.km-cat-icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.km-cat-card h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
}

/* Side character deco on products + product pages */
.km-products-page,
.km-product-page {
  position: relative;
  overflow: hidden;
}
.km-products-inner,
.km-product-inner {
  position: relative;
  z-index: 1;
}
.km-page-deco {
  position: absolute;
  top: 8%;
  width: min(38vw, 420px);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 20px 50px rgba(56, 189, 248, 0.25));
  user-select: none;
}
.km-page-deco-left {
  left: -8%;
  transform: scaleX(-1);
}
.km-page-deco-right {
  right: -8%;
  top: 28%;
}
@media (max-width: 900px) {
  .km-page-deco { display: none; }
}

/* ============================================================
   PRODUCT PAGE — Nebula Market clone (accent = KM / theme color)
   Uses pro.css nebula-product-* + these overrides
   ============================================================ */
.nebula-product-page {
  --nebula-accent: var(--km-product-accent, #38BDF8);
}
.nebula-product-page .km-back-link {
  color: #9b9cb4;
  text-decoration: none;
  font-size: 0.92rem;
}
.nebula-product-page .km-back-link:hover { color: #9fd0ff; }

.nebula-product-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in srgb, var(--nebula-accent) 22%, transparent), transparent 70%),
    #0a0a12;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.55),
    0 0 40px color-mix(in srgb, var(--nebula-accent) 16%, transparent);
}
.nebula-product-hero-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  display: block;
  padding: 0.5rem;
  background: transparent;
}
.km-product-shell {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.km-product-sticky {
  position: sticky;
}
.nebula-product-hero-fallback {
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 2rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
}

.nebula-product-page .nebula-product-buycard {
  background: rgba(16, 16, 25, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.nebula-product-page .nebula-product-title {
  font-size: clamp(1.15rem, 2.2vw, 1.35rem) !important;
  color: #fff;
}
.nebula-product-page .nebula-product-price {
  font-size: clamp(1.85rem, 3vw, 2.25rem) !important;
  margin-top: 0.55rem !important;
  color: #fff !important;
}
.nebula-product-page .nebula-featured-badge {
  background: color-mix(in srgb, var(--nebula-accent) 16%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--nebula-accent) 40%, transparent) !important;
  color: #fff !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--nebula-accent) 25%, transparent);
}
.km-featured-once ~ .km-featured-once { display: none !important; }

.nebula-product-page .nebula-stock-bar {
  margin-top: 1rem !important;
  height: 7px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.nebula-product-page .nebula-stock-bar-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--nebula-accent) 35%, #0ea5e9), #22d3ee) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--nebula-accent) 40%, transparent);
  transition: width 0.45s ease;
  width: 70%;
}
.nebula-product-page .nebula-stock-pill {
  color: #4ade80 !important;
  background: rgba(34, 197, 94, 0.12) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}
.nebula-product-page .nebula-stock-pill.is-oos {
  color: #fca5a5 !important;
  background: rgba(248, 113, 113, 0.12) !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
}

.nebula-product-page .nebula-feature-pill {
  color: #e8e8f0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.nebula-product-page .nebula-qty {
  width: 100%;
  min-height: 3.2rem;
  padding: 0.35rem 0.5rem !important;
}
.nebula-product-page .nebula-buy-row {
  grid-template-columns: 1.45fr 0.75fr !important;
}
.nebula-product-page .btn-login {
  background: var(--nebula-accent) !important;
  border-color: var(--nebula-accent) !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--nebula-accent) 35%, transparent) !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
}
.nebula-product-page .nebula-btn-secondary {
  border-radius: 14px !important;
  font-weight: 800 !important;
}

.nebula-volume-box {
  margin-top: 0.85rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.nebula-volume-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}
.nebula-volume-check {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 900;
  color: #fff;
  background: var(--nebula-accent, #38BDF8);
  box-shadow: 0 0 12px color-mix(in srgb, var(--nebula-accent, #38BDF8) 40%, transparent);
}
.nebula-volume-text {
  color: #cfd3e2;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
}
.nebula-volume-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.nebula-volume-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--nebula-accent, #38BDF8), #5eb6ff);
  box-shadow: 0 0 10px color-mix(in srgb, var(--nebula-accent, #38BDF8) 40%, transparent);
  transition: width 0.4s ease;
}

.nebula-product-page .nebula-accordion-product .accordion-item {
  background: rgba(16, 16, 25, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  margin-bottom: 0.65rem;
  overflow: hidden;
}
.nebula-product-page .nebula-accordion-product .accordion-button {
  background: transparent !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.nebula-product-page .nebula-accordion-product .accordion-button:not(.collapsed) {
  color: #fff !important;
}
.nebula-product-page .nebula-accordion-product .accordion-body {
  color: #9b9cb4 !important;
}
.nebula-product-page .nebula-accordion-product .accordion-body ul {
  list-style: none;
  padding-left: 0;
}
.nebula-product-page .nebula-accordion-product .accordion-body li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.45rem;
}
.nebula-product-page .nebula-accordion-product .accordion-body li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #4ade80;
  font-weight: 900;
}

.nebula-mini-note { font-size: 0.85rem; color: #9b9cb4; }
.nebula-mini-note a { color: #9fd0ff; }

/* Product detail — Nebula layout, KM accent + SellAuth badges (legacy km-* kept) */
.km-product-page {
  --km-product-accent: #38BDF8;
  position: relative;
  padding: 1.5rem 0 3.5rem;
  overflow: hidden;
}
.km-product-page .km-page-deco { display: none !important; }
.km-product-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
}
.km-back-link--top {
  display: inline-flex;
  margin-bottom: 1.15rem;
}
.km-product-layout {
  display: grid;
  gap: 1.35rem;
  align-items: start;
}
@media (min-width: 980px) {
  .km-product-layout {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1.5rem;
  }
}
.km-product-hero-card {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.04),
    0 20px 50px -20px rgba(0, 0, 0, 0.8),
    0 0 42px color-mix(in srgb, var(--km-product-accent) 18%, transparent);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, color-mix(in srgb, var(--km-product-accent) 22%, transparent), transparent 70%),
    rgba(16, 16, 25, 0.9);
  margin-bottom: 0.85rem;
}
.km-product-hero-img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  display: block;
}
.km-product-hero-fallback {
  min-height: 240px;
  display: grid;
  place-content: center;
  padding: 2rem;
}
.km-product-hero-name {
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
  color: #fff;
  text-align: center;
}

.km-prod-acc {
  border-radius: 16px;
  background: rgba(16, 16, 25, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.65rem;
  overflow: hidden;
}
.km-prod-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1.1rem;
  color: #f6f7fb;
  font-weight: 600;
  font-size: 0.95rem;
  user-select: none;
}
.km-prod-acc summary::-webkit-details-marker { display: none; }
.km-prod-acc-chev {
  color: #8a8a95;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.km-prod-acc[open] .km-prod-acc-chev { transform: rotate(180deg); }
.km-prod-acc-body {
  padding: 0 1.1rem 1.1rem;
  color: #9b9cb4 !important;
  line-height: 1.7;
  font-size: 0.92rem;
}
.km-prod-acc-body ul { padding-left: 1.1rem; }
.km-prod-acc-body li { margin-bottom: 0.35rem; }

.km-buy-card,
.km-action-card {
  border-radius: 18px;
  background: rgba(16, 16, 25, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.15rem;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.04),
    0 18px 42px -22px rgba(0, 0, 0, 0.85);
}
.km-buy-card { margin-bottom: 0.85rem; }
.km-product-right { position: sticky; top: 5.5rem; }
.km-buy-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.km-buy-title {
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
  flex: 1;
  min-width: 0;
}
.km-featured-badge {
  --badge: var(--km-product-accent);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--badge);
  border: 1px solid color-mix(in srgb, var(--badge) 45%, transparent);
  background: color-mix(in srgb, var(--badge) 14%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--badge) 22%, transparent);
  white-space: nowrap;
}
.km-featured-once ~ .km-featured-once { display: none; }
.km-buy-price {
  margin-bottom: 0.95rem;
}
.km-buy-price strong {
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
}
.km-stock-wrap { margin-bottom: 0.95rem; }
.km-stock-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 0.55rem;
}
.km-stock-bar-fill {
  display: block;
  height: 100%;
  width: 70%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.45);
  transition: width 0.45s ease;
}
.km-stock-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #9b9cb4;
  font-size: 0.82rem;
}
.km-stock-pill {
  display: inline-flex;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
}
.km-stock-pill.oos {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.28);
}
.km-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.km-feature-pill {
  --badge: var(--km-product-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #d7e9ff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.km-feature-pill i { color: var(--badge); font-size: 0.75rem; }

.km-purchase-label {
  margin: 0 0 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6b76;
}
.km-product-form { margin: 0; }
.km-variant-block { margin-bottom: 0.95rem; }
.km-variant-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.km-variant-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.8rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: #f6f7fb;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.km-variant-item:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
.km-variant-item.active {
  border-color: color-mix(in srgb, var(--km-product-accent) 55%, transparent);
  background: color-mix(in srgb, var(--km-product-accent) 14%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--km-product-accent) 18%, transparent);
}
.km-variant-item:disabled { opacity: 0.45; cursor: not-allowed; }
.km-variant-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.km-variant-name { font-weight: 700; font-size: 0.9rem; }
.km-variant-stock { font-size: 0.75rem; color: #9b9cb4; }
.km-variant-stock.oos { color: #fca5a5; }
.km-variant-price { font-weight: 800; color: #9fd0ff; white-space: nowrap; }

.km-qty-block { margin-bottom: 0.85rem; }
.km-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.25rem;
  padding: 0.25rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
.km-qty-btn {
  width: 2.45rem;
  height: 2.45rem;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #c7c8d6;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.km-qty-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.km-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.km-qty-input {
  width: 3.5rem;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: none !important;
  -moz-appearance: textfield;
}
.km-qty-input::-webkit-outer-spin-button,
.km-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.km-buy-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}
@media (max-width: 420px) {
  .km-buy-row { grid-template-columns: 1fr; }
}
.km-btn-cart,
.km-btn-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.km-btn-cart {
  background: var(--km-product-accent);
  color: #fff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--km-product-accent) 35%, transparent);
}
.km-btn-cart:hover:not(:disabled) {
  filter: brightness(1.08);
}
.km-btn-buy {
  background: rgba(255, 255, 255, 0.04);
  color: #f6f7fb;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.km-btn-buy:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}
.km-btn-cart:disabled,
.km-btn-buy:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.km-volume-box {
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.km-volume-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}
.km-volume-ico {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  background: var(--km-product-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--km-product-accent) 35%, transparent);
}
.km-volume-text {
  margin: 0;
  color: #c7c8d6;
  font-size: 0.8rem;
  line-height: 1.4;
}
.km-volume-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.km-volume-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--km-product-accent), #5eb6ff);
  box-shadow: 0 0 10px color-mix(in srgb, var(--km-product-accent) 40%, transparent);
  transition: width 0.4s ease;
}

.km-buy-error {
  margin-top: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.2);
  color: #ff5555;
  font-size: 0.82rem;
  text-align: center;
}
.km-mini-note {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: #9b9cb4;
}
.km-mini-note a { color: #9fd0ff; }
.km-back-link {
  color: #9b9cb4;
  text-decoration: none;
  font-size: 0.92rem;
}
.km-back-link:hover { color: #9fd0ff; }

/* Product cards: badge from SellAuth, keep stars + Read me */
.km-shop-badge .km-card-badge-once ~ .km-card-badge-once { display: none; }
.km-shop-badge:has(.km-card-badge-once) .km-card-badge-fallback { display: none; }

/* Group modal on products page */
.km-shop .modal-content {
  background: rgba(16, 16, 25, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: #f6f7fb;
}
.km-shop .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.km-shop .modal-title { font-weight: 700; }
.km-shop .btn-close { filter: invert(1); opacity: 0.7; }

/* Products browse leftovers */
.products-browse-title {
  font-family: "Afacad", system-ui, sans-serif !important;
  color: #fff !important;
}
.products-browse-eyebrow {
  color: #7DD3FC !important;
}
.products-browse-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.km-cat-pill.active {
  background: #38BDF8 !important;
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.35) !important;
}

.km-cat-count {
  font-size: 0.75rem;
  color: #8b95b5;
}

/* ?? Cart item fix ?? */
.km-cart-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-radius: 16px;
  background: rgba(12, 18, 40, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.22);
}
.km-cart-item-main {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  flex: 1 1 240px;
}
.km-cart-thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.km-cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.km-cart-thumb-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #8b95b5;
}
.km-cart-info { min-width: 0; flex: 1; }
.km-cart-name {
  display: block;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}
.km-cart-variant {
  margin: 0.25rem 0 0;
  color: #8b95b5;
  font-size: 0.85rem;
}
.km-cart-discount {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #7DD3FC;
}
.km-cart-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}
.km-cart-actions .km-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(56, 189, 248, 0.08);
  height: auto;
  padding: 0;
  justify-content: flex-start;
}
.km-cart-actions .km-qty-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.km-cart-actions .km-qty-btn:hover:not(:disabled) { background: rgba(56, 189, 248, 0.2); color: #7DD3FC; }
.km-cart-actions .km-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.km-cart-actions .km-qty-input {
  width: 42px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: center;
  font-weight: 600;
  outline: none;
  -moz-appearance: textfield;
}
.km-cart-actions .km-qty-input::-webkit-outer-spin-button,
.km-cart-actions .km-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.km-cart-price {
  min-width: 4.5rem;
  text-align: right;
  font-weight: 700;
  color: #7DD3FC;
  font-size: 1.05rem;
}
.km-cart-remove {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #c4cad6;
  cursor: pointer;
}
.km-cart-remove:hover {
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.1);
}

/* Hide broken old cart controls if any leftover */
.cart-quantity-controls,
.cart-qty-btn,
.cart-qty-input { /* legacy */ }

/* ?? Live sale / review toasts ?? */
.km-live-toast-wrap {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 2rem));
}
.km-live-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: rgba(12, 18, 40, 0.96);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(56, 189, 248, 0.12);
  color: #e8eefc;
  animation: kmToastIn 0.35s ease;
}
.km-live-toast.is-out { animation: kmToastOut 0.3s ease forwards; }
.km-live-toast-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(56, 189, 248, 0.18);
  color: #7DD3FC;
}
.km-live-toast.review .km-live-toast-ico {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}
.km-live-toast-body { min-width: 0; }
.km-live-toast-title {
  font-weight: 700;
  font-size: 0.88rem;
  margin: 0 0 0.15rem;
}
.km-live-toast-msg {
  margin: 0;
  font-size: 0.82rem;
  color: #8b95b5;
  line-height: 1.4;
}
@keyframes kmToastIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes kmToastOut {
  to { opacity: 0; transform: translateY(10px); }
}
@media (max-width: 576px) {
  .km-live-toast-wrap { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; max-width: none; }
  .km-cart-actions { width: 100%; justify-content: space-between; }
}

.km-cat-grid--banners {
  min-height: 120px;
}

/* ============================================================
   KM CYBER PRODUCT PAGE — cyan/red like Krazy Market pouch art
   ============================================================ */
.km-product-cyber {
  --nebula-accent: #7DD3FC !important;
  --km-product-accent: #7DD3FC !important;
  --km-product-accent-2: #ff2d55;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(55rem 36rem at 12% -8%, rgba(125, 211, 252, 0.14), transparent 60%),
    radial-gradient(42rem 30rem at 100% 18%, rgba(255, 45, 85, 0.12), transparent 58%) !important;
}
.km-product-cyber-inner { position: relative; z-index: 1; }
.km-cyber-hero {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background:
    radial-gradient(circle at 20% 30%, rgba(125, 211, 252, 0.18), transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(255, 45, 85, 0.16), transparent 48%),
    linear-gradient(160deg, #050508 0%, #0a0a12 55%, #050505 100%) !important;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(125, 211, 252, 0.12),
    0 0 48px rgba(125, 211, 252, 0.12),
    0 0 48px rgba(255, 45, 85, 0.1) !important;
}
.km-cyber-glow {
  position: absolute;
  width: 55%;
  height: 55%;
  pointer-events: none;
  z-index: 0;
  filter: blur(48px);
  opacity: 0.55;
}
.km-cyber-glow--cyan { left: -12%; top: -18%; background: rgba(125, 211, 252, 0.45); }
.km-cyber-glow--red { right: -14%; bottom: -20%; background: rgba(255, 45, 85, 0.4); }
.km-product-cyber .nebula-product-hero-img {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 10 !important;
  object-fit: contain !important;
  padding: 0.35rem;
}
.km-cyber-fallback-title {
  font-weight: 900;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #7DD3FC 0%, #fff 45%, #ff2d55 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
}
.km-cyber-buycard {
  background: rgba(10, 10, 16, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(125, 211, 252, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.km-cyber-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
  font-size: 0.82rem;
}
.km-cyber-rating span {
  color: #f5c84c;
  letter-spacing: 0.06em;
  text-shadow: 0 0 12px rgba(245, 200, 76, 0.35);
}
.km-cyber-rating em {
  font-style: normal;
  font-weight: 800;
  color: #cfd3e2;
}
.km-product-cyber .nebula-featured-badge {
  background: rgba(255, 45, 85, 0.16) !important;
  border: 1px solid rgba(255, 45, 85, 0.45) !important;
  box-shadow: 0 0 18px rgba(255, 45, 85, 0.28) !important;
}
.km-product-cyber .nebula-stock-bar-fill {
  background: linear-gradient(90deg, #7DD3FC, #4ade80 70%, #ff2d55) !important;
  box-shadow: 0 0 14px rgba(125, 211, 252, 0.45) !important;
}
.km-product-cyber .nebula-feature-pill {
  border-color: rgba(125, 211, 252, 0.18) !important;
}
.km-product-cyber .nebula-qty {
  border: 1px solid rgba(125, 211, 252, 0.18) !important;
  background: rgba(0, 0, 0, 0.4) !important;
}
.km-product-cyber .btn-login {
  background: linear-gradient(135deg, #7DD3FC 0%, #38BDF8 55%, #ff2d55 160%) !important;
  border: 0 !important;
  color: #041018 !important;
  box-shadow: 0 10px 28px rgba(125, 211, 252, 0.35), 0 0 24px rgba(255, 45, 85, 0.15) !important;
  font-weight: 900 !important;
}
.km-product-cyber .nebula-btn-secondary {
  border: 1px solid rgba(255, 45, 85, 0.35) !important;
  background: rgba(255, 45, 85, 0.08) !important;
  color: #fff !important;
}
.km-product-cyber .nebula-btn-secondary:hover {
  background: rgba(255, 45, 85, 0.16) !important;
}
.km-product-cyber .nebula-volume-box {
  border-color: rgba(125, 211, 252, 0.16) !important;
  background: rgba(0, 0, 0, 0.4) !important;
}
.km-product-cyber .nebula-volume-check {
  background: #7DD3FC !important;
  color: #041018 !important;
  box-shadow: 0 0 14px rgba(125, 211, 252, 0.5) !important;
}
.km-product-cyber .nebula-volume-bar-fill {
  background: linear-gradient(90deg, #7DD3FC, #ff2d55) !important;
}
.km-product-cyber .nebula-accordion-product .accordion-button:not(.collapsed) {
  color: #7DD3FC !important;
}
.km-product-cyber .nebula-accordion-product .accordion-body li::before {
  color: #7DD3FC !important;
}
.km-product-cyber .nebula-mini-note a,
.km-product-cyber .km-back-link:hover {
  color: #7DD3FC !important;
}

/* ---------- Reviews page: centered "The Reviews" header ---------- */
.nebula-reviews-header {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.nebula-reviews-title {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.nebula-reviews-accent {
  background: linear-gradient(100deg, var(--km-accent) 0%, var(--km-accent-2) 60%, #fff 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.nebula-reviews-subtitle {
  font-size: 1.05rem;
}
.nebula-reviews-dot {
  color: var(--km-accent);
  margin: 0 0.35rem;
}

/* ---------- Reviews page: left accent bar on cards ---------- */
.nebula-review-card {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.nebula-review-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--km-accent), var(--km-accent-2));
  box-shadow: 0 0 14px rgba(var(--km-accent-rgb), 0.55);
  z-index: 2;
}/* ============================================================
   UHQ STOCK–inspired theme layer
   Matches uhqstock.com: Rubik, #07080b, #38BDF8, pill CTAs,
   glass stats, soft product cards, blur navbar.
   ============================================================ */

.uhq-body,
.km-body {
  background-color: #07080b !important;
  color: #fff;
  font-family: "Rubik", sans-serif !important;
}

.uhq-accent { color: #38BDF8 !important; }
.uhq-muted { color: rgba(255, 255, 255, 0.5) !important; }

.uhq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 0.65rem 2rem;
  border-radius: 9999px;
  border: 2px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none !important;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  line-height: 1.25;
}
.uhq-btn-sm { padding: 0.45rem 1.35rem; font-size: 0.95rem; }
.uhq-btn-primary {
  background: #38BDF8;
  border-color: #38BDF8;
  color: #fff !important;
}
.uhq-btn-primary:hover {
  background: rgba(56, 189, 248, 0.5);
  color: #fff !important;
}
.uhq-btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: #38BDF8;
  color: #fff !important;
}
.uhq-btn-ghost:hover {
  background: rgba(56, 189, 248, 0.1);
  color: #fff !important;
}

/* ---------- Navbar ---------- */
.uhq-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.uhq-navbar-shell {
  background: rgba(22, 23, 28, 0.5);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  box-shadow: none !important;
  position: relative;
}
.uhq-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem;
  max-width: 1536px;
  margin: 0 auto;
  position: relative;
  z-index: 30;
}
.uhq-brand {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none !important;
  flex: 1 1 0;
  min-width: 0;
}
.uhq-brand-logo {
  max-height: 2.5rem;
  width: auto;
  border-radius: 0.5rem;
  object-fit: contain;
}
.uhq-brand-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.uhq-nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
.uhq-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  border: 2px solid transparent;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0.5;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none !important;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.uhq-nav-link:hover,
.uhq-nav-link.is-active {
  opacity: 1;
  color: #fff;
}
.uhq-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex: 1 1 0;
}
.uhq-customer-btn { display: none; white-space: nowrap; }
.uhq-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  text-decoration: none !important;
  transition: background 0.25s ease;
}
.uhq-icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.uhq-cart-badge {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background: #38BDF8;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.uhq-mobile-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.uhq-mobile-toggle span {
  display: block;
  height: 2px;
  width: 1.25rem;
  margin: 0 auto;
  border-radius: 2px;
  background: #d1d5db;
  transition: transform 0.3s ease;
}
.uhq-mobile-toggle span:first-child.is-open { transform: translateY(5px) rotate(45deg); }
.uhq-mobile-toggle span:last-child.is-open { transform: translateY(-5px) rotate(-45deg); }
.uhq-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(22, 23, 28, 0.95);
  backdrop-filter: blur(24px);
}
.uhq-mobile-panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 1rem;
  right: 1rem;
  z-index: 25;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transition: all 0.3s ease;
}
.uhq-mobile-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.uhq-mobile-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.uhq-mobile-panel a,
.uhq-mobile-panel button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: #d1d5db;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  padding: 0;
  cursor: pointer;
}
.uhq-mobile-panel a:hover,
.uhq-mobile-panel button:hover { color: #fff; }

@media (min-width: 992px) {
  .uhq-nav-links { display: flex; }
  .uhq-customer-btn { display: inline-flex; }
  .uhq-mobile-toggle { display: none; }
  .uhq-mobile-panel,
  .uhq-mobile-backdrop { display: none !important; }
}

/* ---------- Hero ---------- */
.uhq-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 0 4rem;
  overflow: hidden;
}
.uhq-hero-glow {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 65%;
  max-width: 56rem;
  aspect-ratio: 1;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.5);
  filter: blur(200px);
  transform: translateY(-66%);
  pointer-events: none;
  z-index: 0;
}
.uhq-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.uhq-hero-title {
  font-size: clamp(2.4rem, 5vw, 3.15rem);
  font-weight: 700;
  line-height: 1.125;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: #fff;
}
.uhq-hero-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1rem;
  max-width: 40rem;
}
.uhq-hero-lead strong { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.uhq-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* Search */
.uhq-search { width: 100%; max-width: 36rem; margin: 0 auto 0.5rem; }
.uhq-search-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 0;
  background: rgba(255, 255, 255, 0.05);
  color: #BAE6FD;
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.2s ease;
}
.uhq-search-trigger:hover,
.uhq-search-trigger:focus {
  outline: none;
  box-shadow: 0 0 0 2px #38BDF8;
}
.uhq-search-trigger span { color: rgba(196, 181, 253, 0.85); }
.uhq-search-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 0.75rem;
  overflow-y: auto;
}
.uhq-search-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}
.uhq-search-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 48rem;
  margin: 2rem auto;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.05);
  background: #07080b;
  color: #fff;
}
.uhq-search-panel-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.uhq-search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  color: #BAE6FD;
}
.uhq-search-input-wrap input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: #fff;
  font-size: 1rem;
}
.uhq-search-close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
}
.uhq-search-results {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: min(60vh, 28rem);
  overflow-y: auto;
}
.uhq-search-item {
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.01);
  text-decoration: none !important;
  color: #fff;
  transition: background 0.25s ease;
}
.uhq-search-item:hover { background: rgba(255, 255, 255, 0.05); }
.uhq-search-item.hidden { display: none !important; }
.uhq-search-item-img {
  width: 7.5rem;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.uhq-search-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.uhq-search-item-body { flex: 1; min-width: 0; text-align: left; padding: 0.35rem 0.5rem 0.35rem 0; }
.uhq-search-item-body h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uhq-search-item-price { margin-top: 0.35rem; font-weight: 600; }

/* ---------- Stats ---------- */
.uhq-stats { padding: 0 0 4rem; }
.uhq-stats .container { max-width: 1536px; }
.uhq-stats-panel {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  border-radius: 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(40px);
}
.uhq-stats-glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 25%;
  aspect-ratio: 1;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.4);
  filter: blur(48px);
  transform: translateY(95%);
  pointer-events: none;
  z-index: 0;
}
.uhq-stats-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.uhq-stat { text-align: center; }
.uhq-stat-value {
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.5rem;
  line-height: 1.1;
}
.uhq-stat h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 768px) {
  .uhq-stats-panel { padding: 4rem; }
  .uhq-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .uhq-stats { padding-bottom: 6rem; }
}

/* ---------- Products ---------- */
.uhq-products { padding: 0 0 4rem; }
.uhq-section-head {
  max-width: 28rem;
  margin: 0 auto 2rem;
  text-align: center;
}
.uhq-section-head h2 {
  font-size: clamp(2.4rem, 5vw, 3.15rem);
  font-weight: 700;
  line-height: 1.125;
  margin: 0 0 0.75rem;
  color: #fff;
}
.uhq-section-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
}
.uhq-products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}
@media (min-width: 576px) { .uhq-products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .uhq-products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .uhq-products-grid { grid-template-columns: repeat(4, 1fr); } }

.uhq-product-card {
  display: block;
  border: 2px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.01);
  color: #fff;
  text-decoration: none !important;
  overflow: hidden;
  transition: background 0.3s ease;
}
.uhq-product-card:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.uhq-product-media {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}
.uhq-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  display: block;
}
.uhq-product-media-empty {
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.35);
}
.uhq-product-badge {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  background: #38BDF8;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
.uhq-product-body {
  text-align: left;
  padding: 0 1rem 1rem;
}
.uhq-product-body h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uhq-product-stock {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
}
.uhq-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.uhq-product-price {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.uhq-product-price .uhq-muted { font-size: 0.875rem; }
.uhq-product-price .uhq-accent {
  font-size: 1.125rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uhq-product-arrow { color: #38BDF8; flex-shrink: 0; }

.uhq-modal {
  background: #07080b !important;
  border: 2px solid rgba(255, 255, 255, 0.08) !important;
  color: #fff;
}
.uhq-group-list { display: flex; flex-direction: column; gap: 0.65rem; }
.uhq-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none !important;
  color: #fff;
}
.uhq-group-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.uhq-group-item-main { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.uhq-group-item-main img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: 0.5rem;
}
.uhq-badge-stock,
.uhq-badge-oos {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
.uhq-badge-oos { color: #f87171; }

/* ---------- Footer ---------- */
.uhq-footer {
  margin-top: 2rem;
  padding: 3rem 0 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
}
.uhq-footer-desc {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  max-width: 28rem;
}
.uhq-footer-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1rem;
}
.uhq-footer-links li { margin-bottom: 0.55rem; }
.uhq-footer-links a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s ease;
}
.uhq-footer-links a:hover { color: #38BDF8; }
.uhq-social-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-decoration: none !important;
  font-size: 0.875rem;
  font-weight: 500;
}
.uhq-social-chip:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #fff;
}
.uhq-footer-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin: 2rem 0 1.25rem;
}
.uhq-footer-copy,
.uhq-footer-legal {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.875rem;
  text-decoration: none;
}
.uhq-footer-legal:hover { color: #38BDF8; }

/* ---------- Reviews / FAQ polish to match UHQ ---------- */
.feedbacks-wrapper .display-4,
.faq-title h2,
.socials .section-header h2 {
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
.feedback-card.nebula-review-card {
  border: 2px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 0.75rem !important;
  background: rgba(255, 255, 255, 0.01) !important;
}
.feedback-card.nebula-review-card:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Soften leftover blue KM accents toward UHQ purple on shared surfaces */
.btn-login {
  background: #38BDF8 !important;
  box-shadow: 0 8px 24px -8px rgba(56, 189, 248, 0.55) !important;
}
.navbar.component > .container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

[x-cloak] { display: none !important; }

/* ---------- UHQ Feedbacks ---------- */
.uhq-feedbacks {
  position: relative;
  padding: 0 0 4rem;
  overflow: hidden;
}
.uhq-feedbacks-inner { position: relative; }
.uhq-feedbacks-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.4);
  filter: blur(48px);
  transform: translateY(-33%);
  pointer-events: none;
  z-index: 0;
}
.uhq-feedbacks-head {
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;
}
.uhq-feedbacks-title-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.uhq-feedbacks-title-row h2 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 3.15rem);
  font-weight: 700;
  line-height: 1.125;
  color: #fff;
}
.uhq-feedbacks-stars {
  display: flex;
  color: #38BDF8;
}
.uhq-feedbacks-sub-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: center;
}
.uhq-feedbacks-sub-row p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
}
.uhq-feedbacks-avg { display: none; }
.uhq-feedbacks-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.uhq-feedback-card {
  border: 2px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.01);
  padding: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.uhq-feedback-card:hover { background: rgba(255, 255, 255, 0.05); }
.uhq-feedback-msg {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  line-height: 1.5;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.uhq-feedback-msg.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.uhq-feedback-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}
.uhq-feedback-stars {
  display: flex;
  color: #38BDF8;
}
.uhq-feedback-date {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .uhq-feedbacks-title-row,
  .uhq-feedbacks-sub-row {
    flex-direction: row;
    text-align: left;
  }
  .uhq-feedbacks-avg { display: block; }
  .uhq-feedbacks { padding-bottom: 6rem; }
}
@media (min-width: 576px) {
  .uhq-feedbacks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1400px) {
  .uhq-feedbacks-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- UHQ Socials strip ---------- */
.socials.component {
  padding: 2rem 1rem 4rem !important;
}
.socials .section-header h2,
.socials-container h2 {
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 700 !important;
}
.social-icon-btn {
  border: 2px solid rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.01) !important;
  border-radius: 0.75rem !important;
  transition: background 0.25s ease !important;
}
.social-icon-btn:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #38BDF8 !important;
}

/* FAQ / accordion: pull toward UHQ purple */
.faq .faq-badge,
.socials-badge {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: #BAE6FD !important;
}
.faq .accordion-button:not(.collapsed),
.faq .accordion-button:focus {
  color: #38BDF8 !important;
  box-shadow: none !important;
}
.faq-card-btn,
.faq .faq-card-btn {
  background: #38BDF8 !important;
  border-color: #38BDF8 !important;
  border-radius: 9999px !important;
}
.faq-card {
  border: 2px solid rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.01) !important;
  border-radius: 0.75rem !important;
}

/* ---------- UHQ FAQ ---------- */
.uhq-faq { padding: 0 0 4rem; }
.uhq-faq-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.uhq-faq-badge {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.05);
  color: #ede9fe;
  font-size: 0.875rem;
  font-weight: 600;
}
.uhq-faq-head h2 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 3.15rem);
  font-weight: 700;
  line-height: 1.125;
  color: #fff;
}
.uhq-faq-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
}
.uhq-faq-list {
  display: grid;
  gap: 1.25rem;
  max-width: 56rem;
  margin: 0 auto;
}
.uhq-faq-item {
  border: 2px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 1.25rem 1.5rem;
}
.uhq-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.uhq-faq-trigger h4 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}
.uhq-faq-trigger svg {
  flex-shrink: 0;
  color: #38BDF8;
  transition: transform 0.3s ease;
}
.uhq-faq-trigger svg.is-open { transform: rotate(180deg); }
.uhq-faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.uhq-faq-body p {
  margin: 0.75rem 0 0;
  color: #e5e7eb;
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-line;
}
.uhq-faq-help {
  margin: 2rem auto 0;
  max-width: 56rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}
.uhq-faq-help h3 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  color: #fff;
}
.uhq-faq-help p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.95rem;
}
@media (min-width: 992px) {
  .uhq-faq { padding-bottom: 6rem; }
}

/* ---------- UHQ Footer (match archive) ---------- */
.uhq-footer {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: 3rem 0;
  border-top: 0;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(40px);
}
.uhq-footer-glow {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 65%;
  max-width: 56rem;
  aspect-ratio: 1;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.5);
  filter: blur(200px);
  transform: translateY(70%);
  pointer-events: none;
  z-index: 0;
}
.uhq-footer-inner { position: relative; z-index: 1; }
.uhq-footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
.uhq-footer-shopname {
  margin: 0.5rem 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}
.uhq-footer-brand .uhq-brand-logo {
  max-height: 2.5rem;
  margin-bottom: 0.5rem;
}
.uhq-footer-brand .uhq-footer-desc { margin-bottom: 0.85rem; }
.uhq-footer-brand .uhq-footer-copy {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
}
.uhq-footer-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 1rem !important;
}
.uhq-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.uhq-footer-links li { margin-bottom: 0.5rem; }
.uhq-footer-links a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}
.uhq-footer-links a:hover { color: #fff; }
@media (min-width: 992px) {
  .uhq-footer { padding: 6rem 0; }
  .uhq-footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 4rem;
  }
}

/* ---------- Products page → UHQ skin ---------- */
.km-products-page,
.km-shop {
  --km-accent: #38BDF8 !important;
  --km-accent-rgb: 56, 189, 248 !important;
  --km-accent-2: #7DD3FC !important;
}
.km-shop-title {
  font-size: clamp(2.2rem, 4vw, 3rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
}
.km-shop-sub { color: rgba(255, 255, 255, 0.5) !important; }
.km-shop-search,
.km-shop-sort-btn,
.km-shop-side-card,
.km-shop-pill {
  border: 2px solid rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 0.75rem !important;
  color: #fff !important;
}
.km-shop-pill.active,
.km-shop-pill:hover {
  background: rgba(56, 189, 248, 0.2) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  color: #fff !important;
}
.km-shop-search-input {
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
}
.km-shop-search-input::placeholder { color: rgba(196, 181, 253, 0.7) !important; }
.km-shop-search-ico { color: #BAE6FD !important; }
.km-shop-sort-menu {
  border: 2px solid rgba(255, 255, 255, 0.08) !important;
  background: #07080b !important;
  border-radius: 0.75rem !important;
}
.km-shop-sort-menu button.active,
.km-shop-sort-menu button:hover {
  color: #38BDF8 !important;
  background: rgba(56, 189, 248, 0.1) !important;
}
.km-shop-side-title { color: #fff !important; }
.km-shop-price-input-wrap {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 0.5rem !important;
}
.km-shop-price-currency { color: #38BDF8 !important; }
.km-shop-check.active .km-shop-check-box,
.km-shop-check-box.checked {
  background: #38BDF8 !important;
  border-color: #38BDF8 !important;
}
.km-shop-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}
@media (min-width: 576px) {
  .km-shop-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 992px) {
  .km-shop-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
.uhq-shop-card-wrap { min-width: 0; }
.uhq-shop-card-wrap .uhq-product-card {
  height: 100%;
}
.km-shop-card-wrap .card-click-overlay { display: none !important; }
.modal-content {
  background: #07080b !important;
  border: 2px solid rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
.modal-header { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
.btn-close { filter: invert(1); }

/* ---------- Product + cart → UHQ purple ---------- */
.uhq-product-page,
.km-product-page,
.nebula-product-page {
  --km-product-accent: #38BDF8 !important;
  --nebula-accent: #38BDF8 !important;
  --km-accent: #38BDF8 !important;
  --km-accent-rgb: 56, 189, 248 !important;
}
.nebula-product-hero,
.nebula-product-buycard,
.nebula-panel,
.km-cart-item {
  border: 2px solid rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 0.75rem !important;
}
.nebula-product-title { color: #fff !important; font-weight: 700 !important; }
.nebula-product-price,
.km-cart-price,
.km-back-link:hover,
.nebula-mini-note a {
  color: #38BDF8 !important;
}
.nebula-featured-badge,
.nebula-stock-pill {
  border-radius: 0.5rem !important;
}
.nebula-stock-bar-fill {
  background: linear-gradient(90deg, #38BDF8, #7DD3FC) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45) !important;
}
.km-product-page .btn-login,
.uhq-product-page .btn-login {
  background: #38BDF8 !important;
  color: #fff !important;
  border-radius: 9999px !important;
  box-shadow: 0 8px 24px -8px rgba(56, 189, 248, 0.55) !important;
}
.km-cart-item {
  background: rgba(22, 23, 28, 0.92) !important;
  border-color: rgba(56, 189, 248, 0.22) !important;
}
.km-cart-actions .km-qty {
  border-color: rgba(56, 189, 248, 0.35) !important;
  background: rgba(56, 189, 248, 0.08) !important;
}
.km-cart-actions .km-qty-btn:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.2) !important;
  color: #7DD3FC !important;
}
.km-live-toast {
  border-color: rgba(56, 189, 248, 0.35) !important;
  background: rgba(22, 23, 28, 0.96) !important;
}
.km-live-toast-ico {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #7DD3FC !important;
}
/* Kill leftover cyan/red cyber product theme */
.km-product-cyber {
  --nebula-accent: #38BDF8 !important;
  --km-product-accent: #38BDF8 !important;
  --km-product-accent-2: #7DD3FC !important;
  background:
    radial-gradient(55rem 36rem at 12% -8%, rgba(56, 189, 248, 0.14), transparent 60%),
    radial-gradient(42rem 30rem at 100% 18%, rgba(125, 211, 252, 0.1), transparent 58%) !important;
}

/* ---------- Status page UHQ ---------- */
.uhq-status { padding-bottom: 3rem; }
.uhq-status-list {
  max-width: 56rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.uhq-status-group,
.uhq-status-single .status-card,
.status-card {
  border: 2px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 0.75rem !important;
  background: rgba(255, 255, 255, 0.02) !important;
  padding: 1.25rem !important;
}
.uhq-status-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.uhq-status-group-head h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}
.uhq-status-count {
  display: inline-flex;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 600;
}
.uhq-status-group-body { display: flex; flex-direction: column; gap: 0.65rem; }

/* UHQ scroll reveal */
.uhq-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(0.5, 0, 0, 1), transform 0.55s cubic-bezier(0.5, 0, 0, 1);
}
.uhq-reveal-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .uhq-reveal { opacity: 1; transform: none; transition: none; }
}

/* Status cards */
.uhq-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none !important;
  color: #fff !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.uhq-status-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(56, 189, 248, 0.3);
  color: #fff !important;
}
.uhq-status-card-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.uhq-status-card-ico {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
  color: #38BDF8;
  flex-shrink: 0;
}
.uhq-status-card h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uhq-status-card p {
  margin: 0.15rem 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}
.uhq-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.uhq-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
}
.uhq-status-card.is-online .uhq-status-pill {
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.2);
  color: #34d399;
}
.uhq-status-card.is-online .uhq-status-dot {
  background: #00ff88;
  box-shadow: 0 0 10px #00ff88;
}
.uhq-status-card.is-out .uhq-status-pill {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.25);
  color: #f87171;
}
.uhq-status-card.is-out .uhq-status-dot {
  background: #f87171;
  box-shadow: 0 0 10px #f87171;
}

/* Layout polish closer to UHQ flex shell */
.uhq-body .flex-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.uhq-body .bg-image {
  background:
    radial-gradient(circle at 50% -10%, rgba(56, 189, 248, 0.14), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(125, 211, 252, 0.06), transparent 40%),
    radial-gradient(circle at 0% 30%, rgba(56, 189, 248, 0.05), transparent 35%) !important;
}

/* ---------- UHQ Socials ---------- */
.uhq-socials { padding: 0 0 4rem; }
.uhq-socials-panel {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  border-radius: 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(40px);
}
.uhq-socials-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 10%;
  aspect-ratio: 1;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.4);
  filter: blur(48px);
  transform: translate(-33%, -33%);
  pointer-events: none;
}
.uhq-socials-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.uhq-social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-decoration: none !important;
  color: #fff !important;
  transition: color 0.25s ease;
}
.uhq-social-item:hover { color: #38BDF8 !important; }
.uhq-social-ico {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid #38BDF8;
  color: #38BDF8;
  font-size: 1.25rem;
}
.uhq-social-item h4 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}
.uhq-feedbacks-more {
  margin-top: 2rem;
  text-align: center;
}
.uhq-feedbacks-more a {
  color: #38BDF8;
  text-decoration: none;
  font-weight: 500;
}
.uhq-feedbacks-more a:hover { text-decoration: underline; }
@media (min-width: 576px) {
  .uhq-socials-grid {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
}
@media (min-width: 992px) {
  .uhq-socials { padding-bottom: 6rem; }
  .uhq-socials-panel { padding: 4rem; }
}

/* Customer login modal → UHQ */
.customer-login-modal-content {
  background: #07080b !important;
  border: 2px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.75rem !important;
  color: #fff !important;
}
.customer-login-btn,
.customer-login-modal-content .btn-primary {
  background: #38BDF8 !important;
  border-color: #38BDF8 !important;
  border-radius: 9999px !important;
  color: #fff !important;
}
.customer-login-input:focus {
  border-color: #38BDF8 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35) !important;
}
.customer-login-title { color: #fff !important; font-weight: 700 !important; }

/* ============================================================
   AZZURRO redesign — clean home + dedicated products
   Accent: #38BDF8
   ============================================================ */
:root {
  --km-accent: #38BDF8 !important;
  --km-accent-rgb: 56, 189, 248 !important;
  --km-accent-2: #7DD3FC !important;
  --km-accent-2-rgb: 125, 211, 252 !important;
  --km-bg: #07080b !important;
  --az: #38BDF8;
  --az-2: #7DD3FC;
  --az-rgb: 56, 189, 248;
}

.uhq-accent, .az-accent { color: var(--az) !important; }
.uhq-body, .km-body, body {
  background: #07080b !important;
  color: #fff;
}

.az-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 1rem;
  border-radius: 9999px;
  background: #38BDF8;
  border: 0;
  color: #041018;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 8px 22px -10px rgba(56, 189, 248, 0.75);
}
.az-pill i { font-size: 0.72rem; }
.az-pill::before { content: none; }
.az-pill-live {
  position: relative;
  display: inline-flex;
  width: 0.375rem;
  height: 0.375rem;
  flex-shrink: 0;
}
.az-pill-live::before,
.az-pill-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #041018;
}
.az-pill-live::before {
  opacity: 0.7;
  animation: az-pill-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes az-pill-ping {
  75%, 100% { transform: scale(2.2); opacity: 0; }
}
.az-label {
  display: block;
  color: #7DD3FC;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
  opacity: 0.9;
}
.az-section-head { text-align: center; margin-bottom: 2rem; }
.az-section-head h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.az-section-head p { margin: 0; color: rgba(255,255,255,0.5); }

.az-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.75rem 1.4rem;
  border-radius: 9999px;
  border: 2px solid transparent;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  cursor: pointer;
}
.az-btn-sm { padding: 0.45rem 1rem; font-size: 0.9rem; }
.az-btn-primary {
  background: var(--az);
  border-color: var(--az);
  color: #041018 !important;
}
.az-btn-primary:hover { filter: brightness(1.08); color: #041018 !important; }
.az-btn-ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.35);
  color: #fff !important;
}
.az-btn-ghost:hover { border-color: var(--az); color: var(--az) !important; }
.az-text-link {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-weight: 500;
}
.az-text-link:hover { color: var(--az); }

/* Navbar — uhqstock-style floating bar, Krazy Market branding */
.az-navbar, .uhq-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate;
  overflow: visible;
  padding: 0.85rem 1rem 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.az-navbar::before,
.az-navbar::after,
.uhq-navbar::before,
.uhq-navbar::after,
.az-navbar-shell::before,
.az-navbar-shell::after,
.uhq-navbar-shell::before,
.uhq-navbar-shell::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: none !important;
}
.az-navbar-shell, .uhq-navbar-shell {
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(12, 14, 18, 0.82) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9999px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35) !important;
  filter: none !important;
  position: relative;
  z-index: 2;
  overflow: visible;
}
.az-navbar-inner, .uhq-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 3.5rem;
  padding: 0 1.15rem;
  position: relative;
}
.az-brand, .uhq-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none !important;
  min-width: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}
.az-brand-logo, .uhq-brand-logo { height: 2rem; width: auto; border-radius: 0.45rem; }
.az-brand-name, .uhq-brand-name {
  font-weight: 700;
  color: #fff;
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
}
.az-nav-pills {
  display: none;
  align-items: center;
  gap: 0.15rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.az-nav-link, .uhq-nav-link {
  display: inline-flex;
  padding: 0.5rem 0.9rem;
  border-radius: 9999px;
  color: rgba(255,255,255,0.55);
  text-decoration: none !important;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color .2s ease, background .2s ease;
}
.az-nav-link.is-active, .az-nav-link:hover,
.uhq-nav-link.is-active, .uhq-nav-link:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.az-nav-actions, .uhq-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}
.az-icon-btn, .uhq-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.65rem;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.6);
  text-decoration: none !important;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.az-icon-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
.az-login-btn {
  display: none;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: transparent !important;
  color: #fff !important;
  border-radius: 0.65rem !important;
  padding: 0.4rem 1rem !important;
  font-size: 0.875rem !important;
}
.az-login-btn:hover { background: rgba(255,255,255,0.05) !important; }
.az-currency-wrap { position: relative; display: none; }
.az-currency-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.az-currency-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  z-index: 40;
  min-width: 11rem;
  max-height: 16rem;
  overflow: auto;
  padding: 0.35rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: #12141a;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.az-currency-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #fff;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}
.az-currency-option:hover,
.az-currency-option.is-active { background: rgba(56,189,248,0.12); color: var(--az, #38BDF8); }
.az-currency-sym {
  min-width: 2rem;
  padding: 0.1rem 0.35rem;
  border-radius: 0.35rem;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  font-size: 0.75rem;
  text-align: center;
}
.az-cart-badge, .uhq-cart-badge {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.2rem;
  border-radius: 9999px;
  background: var(--az);
  color: #041018;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
}
.az-mobile-toggle, .uhq-mobile-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  width: 2.35rem;
  height: 2.35rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.az-mobile-toggle span, .uhq-mobile-toggle span {
  display: block;
  height: 2px;
  width: 1.15rem;
  margin: 0 auto;
  background: #d1d5db;
  border-radius: 2px;
  transition: transform .25s ease;
}
.az-mobile-toggle span:first-child.is-open { transform: translateY(5px) rotate(45deg); }
.az-mobile-toggle span:last-child.is-open { transform: translateY(-5px) rotate(-45deg); }
.az-mobile-backdrop, .uhq-mobile-backdrop {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(7,8,11,0.92);
}
.az-mobile-panel, .uhq-mobile-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0; right: 0;
  z-index: 25;
  padding: 1.1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: #101218;
  opacity: 0; visibility: hidden; transform: scale(0.96);
  transition: .2s ease;
}
.az-mobile-panel.is-open, .uhq-mobile-panel.is-open {
  opacity: 1; visibility: visible; transform: none;
}
.az-mobile-panel ul, .uhq-mobile-panel ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem;
}
.az-mobile-panel a, .uhq-mobile-panel a { color: #fff; text-decoration: none; font-weight: 500; }
@media (min-width: 640px) {
  .az-login-btn { display: inline-flex; }
}
@media (min-width: 992px) {
  .az-nav-pills { display: flex; }
  .az-currency-wrap { display: block; }
  .az-mobile-toggle, .uhq-mobile-toggle { display: none; }
  .az-mobile-panel, .az-mobile-backdrop,
  .uhq-mobile-panel, .uhq-mobile-backdrop { display: none !important; }
  .az-brand-name, .uhq-brand-name { max-width: 14rem; }
}

/* Kill leftover ghost/bootstrap navbar chrome */
.az-navbar .navbar-toggler,
.az-navbar .collapse,
header .announcement:empty { display: none !important; }
.sticky-top { z-index: 40; }

/* hide old nav-links list if present */
.az-nav-links, .uhq-nav-links { display: none !important; }

/* Hero */
.az-hero, .uhq-hero {
  position: relative;
  padding: 4.5rem 1rem 0;
  text-align: center;
  overflow: visible;
}
.az-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.az-hero-pillars {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0 max(4%, calc((100% - 72rem) / 2));
  opacity: 1;
  pointer-events: none;
}
.az-hero-pillar {
  position: relative;
  height: 100%;
}
.az-hero-pillar span {
  position: absolute;
  left: 50%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 18%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.12) 82%,
    transparent 100%
  );
  transform: translateX(-50%);
}
.az-hero-pillar span:first-child { top: 0; bottom: 0; }
.az-hero-pillar span:last-child { display: none; }
.az-hero-pillar--mid span {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 22%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.06) 78%,
    transparent 100%
  );
}
@media (max-width: 768px) {
  .az-hero-pillar--mid { display: none; }
  .az-hero-pillars { padding: 0 8%; }
}
.az-hero-glow, .uhq-hero-glow {
  position: absolute;
  left: 50%; top: 8%;
  transform: translateX(-50%);
  width: min(70vw, 42rem);
  height: 28rem;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.28);
  filter: blur(90px);
  pointer-events: none;
}
.az-hero-inner { position: relative; z-index: 1; max-width: 42rem; margin: 0 auto; }
.az-hero-title, .uhq-hero-title {
  margin: 1.15rem 0 0.9rem;
  font-size: clamp(2.35rem, 6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #fff;
  text-wrap: balance;
}
.az-accent {
  color: #38BDF8 !important;
  background: none !important;
  -webkit-text-fill-color: #38BDF8 !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}
.az-hero-lead, .uhq-hero-lead {
  margin: 0 auto 1.6rem;
  max-width: 36rem;
  color: rgba(255,255,255,0.58);
  font-size: 1.05rem;
  line-height: 1.55;
}
.az-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.az-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
}
.az-trust i { color: var(--az); margin-right: 0.35rem; }

/* Brands */
.az-brands { padding: 1rem 0 3rem; }
.az-brands-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2.5rem;
  opacity: 0.4;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: #fff;
}

/* Popular products (home only shows first 3) */
.az-popular, .uhq-products { padding: 1rem 0 3.5rem; }
.az-products-grid, .uhq-products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.az-products-grid--home > *:nth-child(n+4) { display: none !important; }
.az-popular-more { text-align: center; margin-top: 1.75rem; }
@media (min-width: 768px) {
  .az-products-grid, .uhq-products-grid { grid-template-columns: repeat(3, 1fr); }
}

.uhq-product-card, .az-product-card {
  border: 1px solid rgba(56, 189, 248, 0.18) !important;
  background: rgba(255,255,255,0.02) !important;
  border-radius: 1rem !important;
  box-shadow: 0 0 0 1px rgba(56,189,248,0.04), 0 12px 40px rgba(0,0,0,0.35);
}
.uhq-product-card:hover { border-color: rgba(56,189,248,0.4) !important; background: rgba(56,189,248,0.05) !important; }
.uhq-product-badge { background: var(--az) !important; color: #041018 !important; }
.uhq-btn-primary, .btn-login { background: var(--az) !important; color: #041018 !important; }

/* Why / stats */
.az-why { padding: 1rem 0 3.5rem; }
.az-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.az-why-card {
  padding: 1.15rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(56,189,248,0.2);
  background: rgba(56,189,248,0.04);
}
.az-why-ico {
  display: inline-flex;
  width: 2.2rem; height: 2.2rem;
  align-items: center; justify-content: center;
  border-radius: 0.55rem;
  background: rgba(56,189,248,0.15);
  color: var(--az);
  margin-bottom: 0.7rem;
}
.az-why-card h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.az-why-card p { margin: 0; color: rgba(255,255,255,0.55); font-size: 0.92rem; line-height: 1.45; }
.az-stats-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: stretch;
}
.az-stat-big, .az-stat-list {
  border-radius: 0.95rem;
  position: relative;
  overflow: hidden;
}
.az-stat-big {
  border: 1px solid rgba(56,189,248,0.22);
  background: rgba(255,255,255,0.02);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 12rem;
}
.az-stat-ghost {
  position: absolute;
  right: 0.75rem;
  bottom: -0.85rem;
  font-size: clamp(4.5rem, 14vw, 9rem);
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,0.04);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  tabular-nums: true;
  font-variant-numeric: tabular-nums;
}
.az-stat-big-inner { position: relative; z-index: 1; }
.az-stat-list {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}
.az-stat-ico {
  display: inline-flex;
  width: 2rem; height: 2rem;
  align-items: center; justify-content: center;
  border-radius: 0.5rem;
  background: rgba(56,189,248,0.15);
  color: var(--az);
  margin-bottom: 0.75rem;
}
.az-stat-num {
  margin: 0;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 800;
  color: var(--az);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  font-variant-numeric: tabular-nums;
}
.az-stat-plus { opacity: 0.6; }
.az-stat-label {
  margin: 1rem 0 0;
  max-width: 10rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
}
.az-stat-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.35rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  flex: 1;
}
.az-stat-line:last-child { border-bottom: 0; }
.az-stat-line strong {
  color: var(--az);
  font-size: 1.35rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.05rem;
  font-variant-numeric: tabular-nums;
}
.az-stat-line i { color: rgba(56,189,248,0.75); margin-right: 0.45rem; }
@media (min-width: 768px) {
  .az-why-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 992px) {
  .az-stats-items { grid-template-columns: 3fr 2fr; }
}

/* Discord CTA banner — uhqstock sa-cta-banner */
.az-discord-cta {
  padding: 1.5rem 0 4rem !important;
}
.az-cta-banner {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 2.5rem 1.5rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(34, 168, 201, 0.2);
  background: rgba(12, 16, 22, 0.92);
  box-shadow: 0 18px 48px -28px rgba(0, 0, 0, 0.85);
}
@media (min-width: 640px) {
  .az-cta-banner {
    padding: 3rem 3rem;
  }
}
.az-cta-banner-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.az-cta-banner-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(14, 116, 144, 0.09),
    rgba(14, 116, 144, 0.035),
    transparent
  );
}
.az-cta-banner-glow {
  position: absolute;
  top: -6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 42rem;
  height: 20rem;
  border-radius: 9999px;
  opacity: 0.6;
  background: radial-gradient(circle, rgba(14, 116, 144, 0.22), transparent 65%);
  filter: blur(90px);
}
.az-cta-banner-inner {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  margin: 0 auto;
}
.az-cta-banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(34, 168, 201, 0.2);
  background: rgba(14, 116, 144, 0.12);
  color: #5bc4de;
  font-size: 0.75rem;
  font-weight: 700;
}
.az-cta-banner-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: #22a8c9;
  flex-shrink: 0;
}
.az-cta-banner-title {
  margin: 0;
  font-size: clamp(1.85rem, 4.2vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #e8eef4;
}
.az-cta-banner-subtitle {
  margin: 0.75rem auto 0;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.52);
  font-size: 1.02rem;
  line-height: 1.55;
}
.az-cta-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* Feedbacks clean */
.uhq-feedbacks-title-row h2 .az-accent,
.uhq-feedbacks .az-accent { color: var(--az) !important; }
.uhq-feedbacks-stars, .uhq-feedback-stars { color: var(--az) !important; }
.uhq-feedback-card { border-color: rgba(255,255,255,0.08) !important; }

/* Products page */
.km-shop-title { color: var(--az) !important; }
.km-shop-pill.active {
  background: rgba(56,189,248,0.2) !important;
  border-color: rgba(56,189,248,0.45) !important;
}
.km-products-page .km-shop-sub { color: rgba(255,255,255,0.5) !important; }

/* FAQ / buttons */
.uhq-btn-primary, .uhq-faq-badge, .faq-card-btn { border-color: var(--az) !important; }
.uhq-faq-badge { color: #BAE6FD !important; background: rgba(56,189,248,0.12) !important; }
.az-rating-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  color: rgba(255,255,255,0.7);
}
.az-stars { color: #f5c84c; letter-spacing: 0.05em; }
.az-rating-line strong { color: #fff; }


.az-rating-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  color: rgba(255,255,255,0.7);
}
.az-stars { color: #f5c84c; letter-spacing: 0.05em; }
.az-rating-line strong { color: #fff; }

/* ============================================================
   Products page — horizontal filter bar (NO left sidebar)
   ============================================================ */
.az-products-page .km-shop-side,
.az-products-page .km-shop-cats,
.az-products-page .km-shop-toprow,
.az-products-page .km-shop-body {
  display: contents;
}
.az-products-page .km-shop-side { display: none !important; }
.az-products-page .km-shop-body {
  display: block !important;
  grid-template-columns: 1fr !important;
}
.az-products-inner { padding: 1.25rem 1rem 3.5rem; max-width: 1200px; }

.az-crumbs {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: var(--az, #38BDF8);
  margin-bottom: 1.5rem;
}
.az-crumbs a { color: var(--az, #38BDF8); text-decoration: none; }
.az-crumbs a:hover { text-decoration: underline; }
.az-crumbs span:last-child { color: rgba(255,255,255,0.55); }

.az-products-head {
  text-align: center;
  margin: 0.5rem auto 1.75rem;
}
.az-products-head h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
}
.az-products-head p {
  margin: 0;
  color: rgba(255,255,255,0.5);
  font-size: 1.05rem;
}

.az-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  margin-bottom: 1rem;
}
.az-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.az-filter-chip i { color: var(--az, #38BDF8); font-size: 0.85rem; }
.az-filter-chip.active,
.az-filter-chip:hover {
  border-color: rgba(56,189,248,0.45);
  background: rgba(56,189,248,0.12);
  color: #fff;
}
.az-filter-price { position: relative; }
.az-price-pop {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 20;
  min-width: 240px;
  padding: 0.9rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: #101218;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.az-price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.az-price-row label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
}
.az-price-row input {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
  padding: 0.5rem 0.6rem;
  outline: none;
}
.az-price-row input:focus { border-color: var(--az, #38BDF8); }
.az-price-clear {
  margin-top: 0.65rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--az, #38BDF8);
  font-weight: 600;
  cursor: pointer;
}
.az-filter-search {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.35rem 0.35rem 0.35rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.25);
}
.az-filter-search > i { color: var(--az, #38BDF8); }
.az-filter-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  outline: none;
  font-size: 0.95rem;
  padding: 0.45rem 0;
}
.az-filter-search input::placeholder { color: rgba(255,255,255,0.4); }
.az-filter-go {
  width: 2.35rem;
  height: 2.35rem;
  border: 0;
  border-radius: 0.6rem;
  background: var(--az, #38BDF8);
  color: #041018;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.az-products-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.35rem 0 1rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.92rem;
}

.az-catalog-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}
@media (min-width: 640px) {
  .az-catalog-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 992px) {
  .az-catalog-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1200px) {
  .az-catalog-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1.15rem !important; }
}

/* Product cards — uhqstock glow + hover lift */
.az-card-wrap {
  min-width: 0;
  height: 100%;
}
.az-card-wrap.is-filtered-out,
.km-shop-card-wrap.is-filtered-out {
  display: none !important;
}
.az-card {
  --az-card-glow: rgba(56, 189, 248, 0.45);
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 1.05rem;
  border: 1px solid rgba(56, 189, 248, 0.38);
  background:
    linear-gradient(180deg, rgba(18, 22, 30, 0.96), rgba(10, 12, 16, 0.98));
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.08),
    0 0 22px -8px rgba(56, 189, 248, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transform: translateY(0) scale(1);
  transition:
    transform .28s cubic-bezier(.22, 1, .36, 1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
  will-change: transform, box-shadow;
}
.az-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(125, 211, 252, 0.85);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.25),
    0 18px 40px -18px rgba(0, 0, 0, 0.65),
    0 0 36px -4px rgba(56, 189, 248, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(22, 28, 38, 0.98), rgba(10, 12, 16, 1));
}
.az-card-media {
  aspect-ratio: 16 / 11;
  padding: 0.85rem 0.85rem 0.35rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(56, 189, 248, 0.14), transparent 62%);
  transition: background .28s ease;
}
.az-card:hover .az-card-media {
  background:
    radial-gradient(circle at 50% 35%, rgba(56, 189, 248, 0.22), transparent 65%);
}
.az-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.75rem;
  display: block;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.az-card:hover .az-card-media img {
  transform: scale(1.04);
}
.az-card-media-empty {
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.35);
  font-size: 2rem;
  font-weight: 800;
}
.az-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.55rem 1rem 1rem;
  flex: 1;
}
.az-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.az-card-top h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.az-card-price {
  text-align: right;
  flex-shrink: 0;
}
.az-card-price-label {
  display: block;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.1rem;
}
.az-card-price strong {
  color: #fff;
  font-size: 0.98rem;
  white-space: nowrap;
  font-weight: 700;
}
.az-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.az-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(56, 189, 248, 0.28);
  background: rgba(56, 189, 248, 0.14);
  color: #7DD3FC;
  font-size: 0.72rem;
  font-weight: 700;
}
.az-card-badge i { font-size: 0.65rem; }
.az-card-stock { font-size: 0.82rem; color: rgba(255,255,255,0.5); }
.az-card-stock.is-ok { color: #34d399; font-weight: 600; }
.az-card-stock.is-out { color: #f87171; }
.az-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.8rem;
  background: linear-gradient(135deg, #38BDF8, #0EA5E9);
  color: #041018 !important;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none;
  transition: filter .2s ease, transform .2s ease, background .2s ease;
}
.az-card:hover .az-card-cta {
  filter: brightness(1.06);
}
.az-card-cta:hover {
  filter: brightness(1.1);
  color: #041018 !important;
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .az-card,
  .az-card-media img,
  .az-card-cta {
    transition: none !important;
  }
  .az-card:hover {
    transform: none;
  }
  .az-card:hover .az-card-media img {
    transform: none;
  }
}

/* Logo cloud marquee — mirrors uhqstock sa-logo-cloud */
.az-logo-cloud {
  position: relative;
  z-index: 1;
  padding: 0.5rem 0 2.5rem;
}
.az-logo-cloud-items {
  display: flex;
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin-inline: auto;
}
.az-logo-cloud-items.marquee-fade {
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.az-logo-cloud-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding-right: 3rem;
  width: max-content;
  flex-shrink: 0;
}
.az-logo-cloud-track.animate-marquee {
  animation: az-marquee var(--announcement-duration, 32s) linear infinite;
}
.az-logo-cloud-items:hover .az-logo-cloud-track.animate-marquee {
  animation-play-state: paused;
}
.az-logo-cloud-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.az-logo-cloud-img {
  display: block;
  height: 1.75rem;
  width: 8.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: grayscale(1);
  opacity: 0.55;
  mix-blend-mode: screen;
  transition: filter .25s ease, opacity .25s ease;
}
.az-logo-cloud-img--netflix {
  height: 0.875rem;
  width: 4.25rem;
  background-position: center center;
  background-size: contain;
  margin-inline: auto;
}
.az-logo-cloud-item:hover .az-logo-cloud-img {
  filter: grayscale(0);
  opacity: 1;
}
@keyframes az-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (min-width: 640px) {
  .az-logo-cloud-track { gap: 4rem; padding-right: 4rem; }
  .az-logo-cloud-img { height: 2rem; width: 9.5rem; }
  .az-logo-cloud-img--netflix { height: 1rem; width: 4.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .az-logo-cloud-track.animate-marquee { animation: none; }
  .az-logo-cloud-items { flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
  .az-logo-cloud-track[aria-hidden="true"] { display: none; }
  .az-logo-cloud-track { padding-right: 0; gap: 1.5rem; width: auto; flex-wrap: wrap; justify-content: center; }
}

/* Secure checkout + payment chips under logo cloud */
.az-trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem 1.25rem;
  margin: 1.75rem auto 0;
  padding: 0 1rem;
  max-width: 980px;
  font-size: 0.9rem;
}
.az-trust-secure {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #fff;
  font-weight: 600;
}
.az-trust-secure svg {
  width: 18px;
  height: 18px;
  color: #34d399;
  flex-shrink: 0;
}
.az-trust-sep {
  display: none;
  width: 1px;
  height: 1.25rem;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.15), transparent);
}
.az-payment-chips {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.az-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  min-width: 3rem;
  padding: 0 0.55rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.55);
  font-size: 1.05rem;
  animation: az-chip-pulse 4.8s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes az-chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); }
  40% { box-shadow: 0 0 0 4px rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.35); color: var(--az, #38BDF8); }
}
.az-trust-pay {
  margin: 0;
  color: rgba(255,255,255,0.45);
  font-size: 0.78rem;
}
@media (min-width: 640px) {
  .az-trust-sep { display: block; }
}

/* Trust badges — uhqstock inline (under logo cloud), not fixed */
.az-secure-bar,
.az-secure-bar--inline {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 1;
  width: 100% !important;
  max-width: none !important;
  pointer-events: auto;
  padding: 1.25rem 0 2rem;
}
.az-secure-bar-inner {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.15rem;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  white-space: normal;
}
.az-secure-bar-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}
.az-secure-bar-lock i { color: #34d399; font-size: 0.9rem; }
.az-secure-bar-sep {
  display: none;
  width: 1px;
  height: 1.25rem;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.15), transparent);
  flex-shrink: 0;
}
.az-secure-bar-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.az-secure-ico {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 3rem;
  display: grid;
  place-items: center;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.05rem;
  background: rgba(255, 255, 255, 0.03);
  animation: az-chip-pulse 4.8s ease-in-out infinite;
}
.az-secure-ico:nth-child(2) { animation-delay: 1.2s; }
.az-secure-ico:nth-child(3) { animation-delay: 2.4s; }
.az-secure-ico:nth-child(4) { animation-delay: 3.6s; }
.az-secure-bar-pay {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.78rem;
  font-weight: 500;
}
@media (min-width: 640px) {
  .az-secure-bar-sep { display: block; }
}

/* Command palette search modal */
.az-search-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 2rem;
}
.az-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
}
.az-search-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 36rem);
  max-height: min(78vh, 40rem);
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: #0c0e14;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  overflow: hidden;
}
.az-search-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
}
.az-search-head input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 0.98rem;
}
.az-search-head input::placeholder { color: rgba(255,255,255,0.35); }
.az-search-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.45rem;
  padding: 0 0.4rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.45);
  font-size: 0.7rem;
  font-family: inherit;
}
.az-search-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0.55rem 0.85rem;
}
.az-search-section { margin-bottom: 0.85rem; }
.az-search-label {
  margin: 0 0.55rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.az-search-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.62rem 0.65rem;
  border-radius: 0.65rem;
  color: #fff;
  text-decoration: none !important;
  transition: background .15s ease;
}
.az-search-row:hover,
.az-search-row.is-active {
  background: rgba(56,189,248,0.12);
}
.az-search-ico {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
  font-size: 0.85rem;
}
.az-search-thumb {
  width: 2rem;
  height: 2rem;
  border-radius: 0.45rem;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.az-search-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.az-search-name {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.az-search-price {
  color: rgba(255,255,255,0.55);
  font-size: 0.88rem;
  font-weight: 600;
  flex-shrink: 0;
}
.az-search-empty {
  margin: 0.5rem 0.65rem;
  color: rgba(255,255,255,0.45);
  font-size: 0.9rem;
}
.az-search-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.1rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
}
.az-search-foot kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.2rem;
  padding: 0 0.28rem;
  border-radius: 0.28rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  font-size: 0.68rem;
  font-family: inherit;
}

/* Reviews — uhqstock layout (azzurro) */
.az-feedbacks, .az-reviews-page { padding: 1rem 0 3.5rem; }
.az-feedbacks-head { margin-bottom: 1.5rem; }
.az-rating-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  max-width: 28rem;
  margin: 0 auto 2rem;
  padding: 1.6rem 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(56,189,248,0.22);
  background: rgba(56,189,248,0.06);
  text-align: center;
}
.az-rating-summary--page { margin-bottom: 1.5rem; }
.az-rating-big {
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.az-rating-stars {
  display: inline-flex;
  gap: 0.2rem;
  color: #fbbf24;
  font-size: 1.05rem;
}
.az-rating-based {
  margin: 0.15rem 0 0;
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
}
.az-review-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}
.az-review-filter {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.65);
  border-radius: 9999px;
  padding: 0.45rem 0.95rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.az-review-filter:hover { color: #fff; border-color: rgba(56,189,248,0.35); }
.az-review-filter.is-active {
  background: rgba(56,189,248,0.9);
  border-color: transparent;
  color: #041018;
}
.az-reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
.az-review-item { min-width: 0; }
.az-review-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.05rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(56,189,248,0.18);
  background: rgba(255,255,255,0.025);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.az-review-card:hover {
  border-color: rgba(56,189,248,0.4);
  background: rgba(56,189,248,0.05);
  transform: translateY(-2px);
}
.az-review-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.az-review-product {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.az-review-product strong {
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.25;
}
.az-review-thumb {
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
}
.az-review-thumb--empty {
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.35);
  font-size: 0.75rem;
}
.az-review-date {
  color: rgba(255,255,255,0.4);
  font-size: 0.78rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.az-review-msg {
  margin: 0;
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  line-height: 1.45;
  flex: 1;
}
.az-review-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
}
.az-review-stars {
  display: inline-flex;
  gap: 0.15rem;
  font-size: 0.85rem;
}
.az-review-stars .is-on { color: #fbbf24; }
.az-review-stars .is-off { color: rgba(255,255,255,0.15); }
.az-review-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #34d399;
  font-size: 0.82rem;
  font-weight: 600;
}
.az-feedbacks-more { text-align: center; margin-top: 1.75rem; }
.az-reviews-page-inner { padding: 1.25rem 1rem 3rem; max-width: 1100px; margin: 0 auto; }
.az-reviews-page-head { text-align: center; margin: 0.5rem auto 1.5rem; }
.az-reviews-page-head h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
}
.az-reviews-page-head p { margin: 0; color: rgba(255,255,255,0.5); font-size: 1.05rem; }
@media (min-width: 768px) {
  .az-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .az-reviews-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   UHQ clone — single accent (azzurro), first viewport match
   ============================================================ */
:root {
  --az: #38BDF8 !important;
  --az-2: #7DD3FC;
  --az-soft: rgba(56, 189, 248, 0.14);
  --az-line: rgba(56, 189, 248, 0.35);
  --line: rgba(255, 255, 255, 0.1);
  --muted: rgba(255, 255, 255, 0.55);
  --cl-accent: #38BDF8 !important;
  --km-accent: #38BDF8 !important;
  --km-accent-rgb: 56, 189, 248 !important;
  --nebula-accent: #38BDF8 !important;
}

body.uhq-body,
body.km-body,
.uhq-body,
.km-body {
  background: #07080b !important;
  color: #fff;
  padding-bottom: 0;
}

.bg-image {
  opacity: 0.28 !important;
  filter: saturate(0.55) brightness(0.5) !important;
}

/* Kill leftover purple / multi-hue accents */
[style*="#a855f7"],
[style*="#8b5cf6"],
[style*="#7c3aed"],
[style*="purple"] {
  color: #38BDF8 !important;
}

/* Navbar — uhqstock floating capsule */
.az-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent !important;
  box-shadow: none !important;
}
.az-navbar {
  padding: 1rem 1rem 0 !important;
  position: relative !important;
  top: auto !important;
}
.az-navbar-shell {
  max-width: 1100px !important;
  background: rgba(12, 14, 18, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 9999px !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
}
.az-navbar-inner {
  height: 3.35rem !important;
  padding: 0 1.25rem !important;
}
.az-nav-link.is-active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
.az-icon-btn {
  border-radius: 9999px !important;
  color: rgba(255, 255, 255, 0.65) !important;
}
.az-icon-btn:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.07) !important;
}
.az-login-btn {
  border-radius: 9999px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 0.35rem 0.65rem !important;
}

.az-hero {
  position: relative !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: block !important;
  text-align: center !important;
  overflow: hidden !important;
}
.az-hero-wrap {
  position: relative;
  z-index: 1;
  padding: 4rem 1rem 3.5rem !important;
}
@media (min-width: 1024px) {
  .az-hero-wrap {
    padding: 6rem 1rem 5rem !important;
  }
}
.az-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 42rem !important;
  margin: 0 auto !important;
  padding: 0 !important;
  flex: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.az-hero-glow {
  background: rgba(14, 116, 144, 0.22) !important;
  filter: blur(100px) !important;
  top: 12% !important;
  width: min(64vw, 38rem) !important;
  height: 20rem !important;
}
.az-hero-title {
  margin: 0 0 1rem !important;
  font-size: clamp(2.35rem, 5.2vw, 3.55rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.06 !important;
  color: #e8eef4 !important;
}
.az-hero-lead {
  color: rgba(255, 255, 255, 0.52) !important;
  font-size: 1.125rem !important;
  line-height: 1.55 !important;
  max-width: 34rem !important;
  margin: 0 auto !important;
}
.az-hero-ctas {
  margin-top: 1.75rem !important;
  margin-bottom: 0 !important;
  gap: 0.75rem !important;
  justify-content: center !important;
}

.az-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 auto 1.5rem !important;
  padding: 0.38rem 1rem !important;
  background: linear-gradient(#0e7490, #155e75) !important;
  border: 0 !important;
  color: #e0f2fe !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 4px 14px rgba(8, 47, 73, 0.35) !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
.az-pill-live {
  display: inline-flex !important;
}

.az-btn {
  border-radius: 9999px !important;
  padding: 0.78rem 1.35rem !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}
.az-btn-primary {
  background: #0e7490 !important;
  border: 2px solid #0e7490 !important;
  color: #e0f2fe !important;
  box-shadow: 0 10px 24px -14px rgba(8, 47, 73, 0.75) !important;
}
.az-btn-ghost {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
.az-btn-ghost:hover {
  border-color: #155e75 !important;
  color: #7dd3fc !important;
}
.az-trust {
  margin-top: 1.5rem !important;
  gap: 0.75rem 1.25rem !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.8rem !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
}
.az-trust i { color: #22a8c9 !important; }

/* Logo cloud — own section like uhqstock */
.az-logo-cloud {
  position: relative;
  z-index: 1;
  padding: 2.5rem 0 !important;
  width: 100%;
  display: block;
  box-sizing: border-box;
}
.az-logo-cloud .container {
  max-width: 72rem !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.az-logo-cloud-items {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
}
.az-logo-cloud-img {
  opacity: 0.55 !important;
  filter: grayscale(1) brightness(1.05) !important;
  height: 1.75rem !important;
  width: 8rem !important;
}
.az-logo-cloud-img--netflix {
  height: 0.9rem !important;
  width: 4.25rem !important;
}
.az-logo-cloud-track {
  gap: 3.5rem !important;
  padding-right: 3.5rem !important;
}
.az-logo-cloud-item:hover .az-logo-cloud-img {
  opacity: 1 !important;
  filter: none !important;
}

/* Trust badges — own section like uhqstock */
.az-secure-bar,
.az-secure-bar--inline {
  position: relative;
  z-index: 1;
  display: block !important;
  padding: 1.5rem 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.az-secure-bar--inline .container {
  max-width: 72rem !important;
}

.az-accent {
  color: #22a8c9 !important;
  background: none !important;
  -webkit-text-fill-color: #22a8c9 !important;
}

.az-popular,
.az-why,
.az-feedbacks,
.az-discord-cta {
  padding-top: 1.5rem !important;
  padding-bottom: 3.5rem !important;
}

.az-card {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(10, 12, 16, 0.92) !important;
  border-radius: 1.15rem !important;
  box-shadow: none !important;
}
.az-card:hover {
  border-color: rgba(34, 168, 201, 0.35) !important;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(34, 168, 201, 0.08) !important;
}
.az-card-cta {
  border-radius: 9999px !important;
  background: #0e7490 !important;
  color: #e0f2fe !important;
  box-shadow: none !important;
}
.az-card-badge,
.az-why-ico,
.az-stat-ico,
.az-fast-badge {
  border-color: rgba(34, 168, 201, 0.22) !important;
  background: rgba(14, 116, 144, 0.14) !important;
  color: #5bc4de !important;
}
.az-why-card,
.az-review-card,
.az-rating-summary,
.az-stat-big,
.az-stat-list,
.az-filterbar {
  border-color: rgba(255, 255, 255, 0.06) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}
.az-why-card:hover,
.az-review-card:hover {
  border-color: rgba(34, 168, 201, 0.28) !important;
}

.km-live-toast-wrap {
  bottom: 1.25rem !important;
  left: 1.25rem !important;
}
.km-live-toast {
  background: rgba(8, 10, 14, 0.96) !important;
  border: 1px solid rgba(34, 168, 201, 0.28) !important;
  border-radius: 0.9rem !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
}
.km-live-toast-ico {
  background: rgba(14, 116, 144, 0.18) !important;
  color: #5bc4de !important;
  border-radius: 0.65rem !important;
  overflow: hidden;
}
.km-live-toast-ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.km-live-toast-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
}
.km-live-toast-meta i { color: #34d399; }

@media (max-width: 640px) {
  .az-hero-wrap {
    padding: 3rem 1rem 2.5rem !important;
  }
  .az-navbar { padding-top: 0.65rem !important; }
  .az-navbar-shell { border-radius: 1.15rem !important; }
  .az-logo-cloud { padding: 1.75rem 0 !important; }
  .az-logo-cloud-img {
    height: 1.35rem !important;
    width: 6rem !important;
  }
  .km-live-toast-wrap { bottom: 1rem !important; left: 0.75rem !important; }
}