/* =====================================================================
   Krazy Market extras: product cards, products page, motion
   Loaded after custom.css. Colours come from --cl-accent / --cl-accent-rgb.
   ===================================================================== */

/* ---------- Product card (showcase) --------------------------------- */
.km-pcard {
  position: relative;
  display: flex !important;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: inherit !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .045), transparent 42%),
    #080b10 !important;
  border-radius: 1rem !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.045) inset !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .35s ease !important;
}
/* spotlight that follows the cursor (see script.js pointermove) */
.km-pcard::before,
.km-bento-card::before,
.km-support-card::before,
.km-step::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--cl-accent-rgb), 0.13), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 0;
}
.km-pcard:hover::before,
.km-bento-card:hover::before,
.km-support-card:hover::before,
.km-step:hover::before { opacity: 1; }
.km-pcard > * { position: relative; z-index: 1; }
.km-pcard:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--cl-accent-rgb), .4) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 48px -26px rgba(0,0,0,.95), 0 12px 40px -20px rgba(var(--cl-accent-rgb), .5) !important;
}
.km-pcard.is-out .km-pcard-media img { filter: grayscale(.5) brightness(.8); }

/* image sits inside the card with its own rounded corners */
.km-pcard-frame { padding: .75rem .75rem 0; }
.az-card .km-pcard-media,
.km-pcard-media {
  position: relative;
  display: block;
  padding: 0 !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: .75rem;
  background: radial-gradient(circle at 50% 30%, rgba(var(--cl-accent-rgb), .16), rgba(255,255,255,.02) 70%);
}
.az-card .km-pcard-media img,
.km-pcard-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .4s ease;
}
.km-pcard:hover .km-pcard-media img { transform: scale(1.05); }
.km-pcard-empty {
  width: 100%; height: 100%;
  border-radius: 0 !important;
  display: grid; place-items: center;
  font-size: 2rem; color: rgba(var(--cl-accent-rgb), .55);
}
.km-pcard-cat { display: none !important; }
/* "Just bought" badge on the home marquee */
.km-pcard .km-recent-badge { top: .6rem; bottom: auto; left: .6rem; }

.km-pcard-body {
  display: flex; flex-direction: column;
  flex: 1;
  padding: 1rem 1.1rem 1.1rem !important;
}
.km-pcard-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; }
.km-pcard-title {
  margin: 0;
  font-size: 1rem; font-weight: 700; line-height: 1.25; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s ease;
}
.km-pcard:hover .km-pcard-title { color: var(--cl-accent); }
.km-pcard-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.km-pcard-price small { font-size: .68rem; font-weight: 500; color: rgba(255,255,255,.45); }
.km-pcard-price strong { font-size: 1.05rem; font-weight: 700; color: #fff; }

.km-pcard-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.km-pcard-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .5rem;
  border-radius: .4rem;
  border: 1px solid rgba(var(--cl-accent-rgb), .25);
  background: rgba(var(--cl-accent-rgb), .1);
  color: var(--cl-accent);
  font-size: .68rem; font-weight: 600;
}
.km-pcard-badge i { font-size: .6rem; }
.km-pcard-stockline { margin: 0 0 .9rem; font-size: .85rem; }
.km-pcard-stockline .is-ok { color: #4ade80; }
.km-pcard-stockline .is-low { color: #fbbf24; }
.km-pcard-stockline .is-out { color: rgba(255,255,255,.45); }
.km-pcard-stockline .is-muted { color: rgba(255,255,255,.5); }

.km-pcard-cta {
  position: relative; overflow: hidden;
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%;
  padding: .65rem 1rem;
  border-radius: .75rem;
  font-size: .9rem; font-weight: 700;
  color: #04121a !important;
  background: linear-gradient(180deg, #7dd3fc, var(--cl-accent));
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 26px -12px rgba(var(--cl-accent-rgb), 1);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.km-pcard-cta i { font-size: .8rem; }
.km-pcard:hover .km-pcard-cta { filter: brightness(1.06); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 14px 32px -12px rgba(var(--cl-accent-rgb), 1); }
.km-pcard:active .km-pcard-cta { transform: scale(.98); }
.km-pcard.is-out .km-pcard-cta { background: rgba(255,255,255,.08); color: #fff !important; box-shadow: none; }

/* ---------- Products page ----------------------------------------- */
.km-products-page .az-products-head { text-align: center; }
.km-products-page .az-products-head h1 { color: #fff; font-weight: 800; letter-spacing: -.03em; }

.km-cats {
  display: flex; gap: .65rem;
  overflow-x: auto;
  padding: .35rem .1rem .8rem;
  margin-bottom: .75rem;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.km-cat {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .9rem .45rem .45rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10, 12, 16, .85);
  color: rgba(255,255,255,.8);
  font-weight: 600; font-size: .9rem;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, color .2s ease;
}
.km-cat:hover { transform: translateY(-2px); border-color: rgba(var(--cl-accent-rgb), .45); color: #fff; }
.km-cat.is-active {
  color: #fff;
  border-color: rgba(var(--cl-accent-rgb), .8);
  background: linear-gradient(135deg, rgba(var(--cl-accent-rgb), .28), rgba(var(--cl-accent-rgb), .08));
  box-shadow: 0 8px 26px -12px rgba(var(--cl-accent-rgb), .9);
}
.km-cat-img {
  width: 2.1rem; height: 2.1rem; flex: none;
  border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: rgba(var(--cl-accent-rgb), .12);
  color: var(--cl-accent);
}
.km-cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.km-cat:hover .km-cat-img img { transform: scale(1.12) rotate(-4deg); }
.km-cat-count {
  min-width: 1.6rem; padding: .1rem .45rem;
  border-radius: 999px; text-align: center;
  font-size: .72rem; font-weight: 700;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.7);
}
.km-cat.is-active .km-cat-count { background: var(--cl-accent); color: #04121a; }

.km-toolbar {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: .65rem !important;
}
.km-search { position: relative; flex: 1 1 280px; min-width: 0; }
.km-search input { padding-right: 2.2rem !important; }
.km-search-clear {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #fff; font-size: .75rem;
  display: grid; place-items: center; cursor: pointer;
}
.km-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.km-select {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  padding: 0 .85rem; height: 2.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(10,12,16,.85);
  color: rgba(255,255,255,.8);
  margin: 0;
}
.km-select i { color: var(--cl-accent); font-size: .85rem; }
.km-select select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; color: #fff;
  font-weight: 600; font-size: .88rem; padding-right: .2rem; cursor: pointer; outline: none;
}
.km-select select option { background: #0b0d12; color: #fff; }
.km-price-presets { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 .2rem; }
.km-price-presets button {
  padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid rgba(var(--cl-accent-rgb), .3); background: rgba(var(--cl-accent-rgb), .08);
  color: #fff; font-size: .75rem; font-weight: 600; cursor: pointer;
}
.km-price-presets button:hover { background: rgba(var(--cl-accent-rgb), .22); }
.km-view {
  display: inline-flex; padding: .2rem; gap: .15rem;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(10,12,16,.85);
}
.km-view button {
  width: 2.2rem; height: 2.2rem; border: 0; border-radius: 999px;
  background: transparent; color: rgba(255,255,255,.6); cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.km-view button.is-active { background: rgba(var(--cl-accent-rgb), .2); color: var(--cl-accent); }

.km-meta {
  display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
  margin: 1rem 0 1.1rem !important;
}
.km-active { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.km-active-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid rgba(var(--cl-accent-rgb), .4);
  background: rgba(var(--cl-accent-rgb), .12);
  color: #fff; font-size: .8rem; font-weight: 600; cursor: pointer;
  animation: km-pop .25s cubic-bezier(.2,.8,.2,1);
}
.km-active-chip i { font-size: .7rem; opacity: .7; }
.km-active-chip:hover i { opacity: 1; }
.km-active-reset {
  border: 0; background: none; color: rgba(255,255,255,.55);
  font-size: .8rem; font-weight: 600; text-decoration: underline; cursor: pointer;
}
.km-count { margin: 0 0 0 auto; color: rgba(255,255,255,.5); font-size: .9rem; }
.km-count strong { color: #fff; }

.km-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 1rem !important;
}
.km-grid > [data-product-name] { animation: km-card-in .45s cubic-bezier(.2,.8,.2,1) both; }
.km-cat-heading {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: .7rem;
  margin: 1.2rem 0 .1rem;
  font-size: 1.15rem; font-weight: 800; color: #fff;
  animation: km-card-in .45s cubic-bezier(.2,.8,.2,1) both;
}
.km-cat-heading:first-child { margin-top: 0; }
.km-cat-heading::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(var(--cl-accent-rgb), .5), transparent);
}
.km-cat-heading em {
  order: 1;
  font-style: normal; font-size: .72rem; font-weight: 700;
  padding: .1rem .5rem; border-radius: 999px;
  background: rgba(var(--cl-accent-rgb), .15); color: var(--cl-accent);
}
.km-cat-heading::after { order: 2; }

.km-empty {
  text-align: center; padding: 3rem 1rem;
  border-radius: 1.1rem; border: 1px dashed rgba(255,255,255,.12);
  animation: km-pop .35s ease;
}
.km-empty-ico {
  width: 3.2rem; height: 3.2rem; margin: 0 auto .8rem;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(var(--cl-accent-rgb), .12); color: var(--cl-accent); font-size: 1.2rem;
}
.km-empty h3 { margin: 0 0 .3rem; font-size: 1.2rem; font-weight: 700; }
.km-empty p { color: rgba(255,255,255,.5); margin: 0 0 1rem; }

/* ---------- Motion: hero, buttons, sections ------------------------ */
.az-hero-title .az-accent,
.az-section-head h2 .az-accent,
.km-accent-text {
  background: linear-gradient(90deg, var(--cl-accent), #a5f3fc, var(--cl-accent));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: km-gradient-x 5s linear infinite;
}
.az-hero-inner > * { animation: km-rise .8s cubic-bezier(.2,.8,.2,1) both; }
.az-hero-inner > *:nth-child(2) { animation-delay: .08s; }
.az-hero-inner > *:nth-child(3) { animation-delay: .16s; }
.az-hero-inner > *:nth-child(4) { animation-delay: .24s; }
.az-hero-inner > *:nth-child(5) { animation-delay: .32s; }
.az-hero-glow { animation: km-breathe 7s ease-in-out infinite; }

.az-btn-primary, .km-pcard-cta { position: relative; overflow: hidden; }
.az-btn-primary::after, .km-pcard-cta::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  animation: km-sweep 4.5s ease-in-out infinite;
  pointer-events: none;
}
.az-btn { transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease !important; }
.az-btn:hover { transform: translateY(-2px); }
.az-btn-primary:hover { box-shadow: 0 12px 30px -10px rgba(var(--cl-accent-rgb), .9); }

.az-label { position: relative; display: inline-block; }
.uhq-reveal-in .az-label, .az-section-head.uhq-reveal-in .az-label { animation: km-pop .5s cubic-bezier(.2,.8,.2,1) both; }

.az-why-card { position: relative; transition: transform .3s ease, border-color .3s ease, background .3s ease; }
.az-why-card:hover { transform: translateY(-3px); border-color: rgba(var(--cl-accent-rgb), .45); background: rgba(var(--cl-accent-rgb), .08); }
.az-why-ico, .km-step-ico, .km-support-ico { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.az-why-card:hover .az-why-ico,
.km-step:hover .km-step-ico,
.km-support-card:hover .km-support-ico { transform: scale(1.12) rotate(-6deg); }

/* bento visuals come alive */
.km-bento-bars span { transform-origin: bottom; animation: km-bar 2.4s ease-in-out infinite; }
.km-bento-bars span:nth-child(3n) { animation-delay: -.6s; }
.km-bento-bars span:nth-child(3n+1) { animation-delay: -1.2s; }
.km-bento-bars span:nth-child(4n) { animation-delay: -1.8s; }
.km-bento-dot, .km-dot { animation: km-ping 2s ease-in-out infinite; }
.km-bento-toast { animation: km-float 5s ease-in-out infinite; }
.km-bento-toast.is-accent { animation-delay: -2.5s; }
.km-bento-pay span { transition: transform .3s ease; }
.km-bento-card:hover .km-bento-pay span { transform: translateY(-4px); }
.km-bento-card:hover .km-bento-pay span:nth-child(2) { transition-delay: .05s; }
.km-bento-card:hover .km-bento-pay span:nth-child(3) { transition-delay: .1s; }
.km-bento-card:hover .km-bento-pay span:nth-child(4) { transition-delay: .15s; }
.km-bento-row { transition: transform .3s ease, border-color .3s ease; }
.km-bento-card:hover .km-bento-row { transform: translateX(4px); border-color: rgba(var(--cl-accent-rgb), .25); }
.km-bento-card:hover .km-bento-row:nth-child(2) { transition-delay: .05s; }
.km-bento-card:hover .km-bento-row:nth-child(3) { transition-delay: .1s; }

/* steps: connector line draws in, icons pulse one after another */
@media (min-width: 768px) {
  .km-steps-list::before { transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2,.8,.2,1) .3s; }
  .km-steps-list:has(.uhq-reveal-in)::before { transform: scaleX(1); }
}
.km-step-ico { animation: km-glow 3s ease-in-out infinite; }
.km-step:nth-child(2) .km-step-ico { animation-delay: 1s; }
.km-step:nth-child(3) .km-step-ico { animation-delay: 2s; }

.km-marquee-track .km-pcard:hover { transform: translateY(-4px) scale(1.01); }
.km-recent-badge { animation: km-badge 2.2s ease-in-out infinite; }

/* ---------- Hero search ------------------------------------------- */
.km-hero-search {
  position: relative;
  display: flex; align-items: center; gap: .5rem;
  width: 100%; max-width: 560px;
  margin: 0 auto 1.4rem;
  padding: .4rem .4rem .4rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--cl-accent-rgb), .3);
  background: rgba(7, 8, 11, .75);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px -24px rgba(var(--cl-accent-rgb), .8);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.km-hero-search:focus-within {
  border-color: rgba(var(--cl-accent-rgb), .8);
  box-shadow: 0 0 0 4px rgba(var(--cl-accent-rgb), .15), 0 16px 40px -20px rgba(var(--cl-accent-rgb), .9);
}
.km-hero-search > i { color: var(--cl-accent); }
.km-hero-search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  color: #fff; font-size: 1rem; padding: .55rem 0;
}
.km-hero-search input::placeholder { color: rgba(255,255,255,.45); }
.km-hero-search input::-webkit-search-cancel-button { display: none; }
.km-hero-search button {
  flex: none;
  padding: .65rem 1.3rem;
  border: 0; border-radius: 999px;
  background: var(--cl-accent); color: #04121a;
  font-weight: 700; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.km-hero-search button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(var(--cl-accent-rgb), 1); }

/* ---------- Home categories ---------------------------------------- */
.km-home-cats { padding: .5rem 0 3rem; }
.km-home-cats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
@media (min-width: 768px) { .km-home-cats-grid { grid-template-columns: repeat(4, 1fr); } }
.km-home-cat {
  position: relative;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem .7rem .7rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(10, 12, 16, .9);
  color: #fff !important; text-decoration: none !important;
  font-weight: 700;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.km-home-cat:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--cl-accent-rgb), .5);
  background: linear-gradient(135deg, rgba(var(--cl-accent-rgb), .16), rgba(10,12,16,.9) 70%);
}
.km-home-cat-img {
  width: 2.8rem; height: 2.8rem; flex: none;
  border-radius: .75rem; overflow: hidden;
  background: rgba(var(--cl-accent-rgb), .12);
}
.km-home-cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.km-home-cat:hover .km-home-cat-img img { transform: scale(1.12) rotate(-4deg); }
.km-home-cat-name { flex: 1; min-width: 0; font-size: .95rem; line-height: 1.2; }
.km-home-cat-arrow { color: var(--cl-accent); font-size: .8rem; opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease; }
.km-home-cat:hover .km-home-cat-arrow { opacity: 1; transform: none; }

/* ---------- Reviews stats strip ------------------------------------ */
.km-rstats {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  max-width: 900px;
  margin: 0 auto 2rem;
}
@media (min-width: 640px) { .km-rstats { grid-template-columns: 1.3fr 1fr 1fr; } }
.km-rstat {
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(10, 12, 16, .9);
  text-align: center;
}
.km-rstat--rating {
  border-color: rgba(var(--cl-accent-rgb), .3);
  background: linear-gradient(160deg, rgba(var(--cl-accent-rgb), .12), rgba(10,12,16,.9) 70%);
}
.km-rstat-num {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.1;
}
.km-rstat-plus { color: var(--cl-accent); }
.km-rstat-stars { display: inline-flex; gap: 2px; font-size: .85rem; color: #fbbf24; }
.km-rstat p { margin: .3rem 0 0; color: rgba(255,255,255,.55); font-size: .88rem; }
.km-rstat p strong { color: #fff; }

/* ---------- Product page ------------------------------------------ */
.km-pp { padding: 1.5rem 0 4rem; }
.km-pp-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: 1.25rem;
  font-size: .85rem; color: rgba(255,255,255,.45);
}
.km-pp-crumbs a { color: rgba(255,255,255,.6); text-decoration: none; }
.km-pp-crumbs a:hover { color: var(--cl-accent); }
.km-pp-crumbs i { font-size: .6rem; opacity: .6; }

.km-pp-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "gallery" "buy" "info";
  gap: 1.25rem;
}
@media (min-width: 992px) {
  .km-pp-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "gallery buy" "info buy";
    align-items: start;
    gap: 1.5rem 2rem;
  }
  .km-pp-buy { position: sticky; top: 96px; }
}
.km-pp-gallery { grid-area: gallery; }
.km-pp-buy { grid-area: buy; }
.km-pp-info { grid-area: info; }

.km-pp-main {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  background: radial-gradient(circle at 50% 35%, rgba(var(--cl-accent-rgb), .18), rgba(10,12,16,.95) 70%);
}
.km-pp-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.km-pp-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
  color: rgba(255,255,255,.7); font-weight: 700; font-size: 1.1rem; text-align: center; padding: 1rem;
}
.km-pp-fallback i { font-size: 2.6rem; color: var(--cl-accent); }
.km-pp-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(7,8,11,.7); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .2s ease, background .2s ease;
  cursor: pointer;
}
.km-pp-main:hover .km-pp-nav { opacity: 1; }
.km-pp-nav:hover { background: var(--cl-accent); color: #04121a; }
.km-pp-nav.is-prev { left: .75rem; }
.km-pp-nav.is-next { right: .75rem; }
.km-pp-thumbs { display: flex; gap: .5rem; margin-top: .65rem; overflow-x: auto; }
.km-pp-thumbs button {
  flex: 0 0 auto; width: 4.5rem; height: 3.4rem; padding: 0;
  border-radius: .7rem; overflow: hidden;
  border: 2px solid transparent; background: none; opacity: .55; cursor: pointer;
  transition: opacity .2s ease, border-color .2s ease;
}
.km-pp-thumbs button.is-active, .km-pp-thumbs button:hover { opacity: 1; border-color: var(--cl-accent); }
.km-pp-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.km-pp-card {
  padding: 1.4rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(var(--cl-accent-rgb), .18);
  background: linear-gradient(180deg, rgba(var(--cl-accent-rgb), .06), rgba(10,12,16,.94) 40%);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.9);
}
.km-pp-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.km-pp-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .65rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.km-pp-tag.is-accent { border-color: rgba(var(--cl-accent-rgb), .45); color: var(--cl-accent); background: rgba(var(--cl-accent-rgb), .1); }
.km-pp-title { margin: 0 0 .5rem; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.km-pp-rating {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .85rem; color: rgba(255,255,255,.55); text-decoration: none !important;
}
.km-pp-rating strong { color: #fff; }
.km-pp-stars { display: inline-flex; gap: 1px; color: #fbbf24; font-size: .75rem; }
.km-pp-rating:hover span:last-child { color: var(--cl-accent); }
.km-pp-price-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 1.1rem 0 1.2rem; padding: .9rem 0;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.km-pp-price { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1; }
.km-pp-stock {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .75rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  color: #86efac; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3);
}
.km-pp-stock.is-low { color: #fcd34d; background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.35); }
.km-pp-stock.is-low .km-dot { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.km-pp-stock.is-out { color: #fca5a5; background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.35); }
.km-pp-stock.is-out .km-dot { background: #ef4444; box-shadow: 0 0 8px #ef4444; }

/* form inside the buy box */
.km-pp .km-form-label {
  display: block; margin-bottom: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.km-pp .km-variant-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.km-pp .km-variant-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  width: 100%; padding: .7rem .8rem; text-align: left;
  border-radius: .85rem;
  border: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.02) !important;
  color: #fff;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.km-pp .km-variant-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(var(--cl-accent-rgb), .5) !important; }
.km-pp .km-variant-btn.active {
  border-color: var(--cl-accent) !important;
  background: rgba(var(--cl-accent-rgb), .12) !important;
  box-shadow: 0 0 0 1px var(--cl-accent) inset, 0 10px 28px -16px rgba(var(--cl-accent-rgb), .9);
}
.km-pp .km-variant-btn:disabled { opacity: .45; cursor: not-allowed; }
.km-pp .km-variant-meta { display: flex; flex-direction: column; gap: .1rem; }
.km-pp .km-variant-name { font-weight: 700; font-size: .9rem; line-height: 1.25; }
.km-pp .km-variant-stock { font-size: .72rem; color: rgba(255,255,255,.5); }
.km-pp .km-variant-stock.is-out { color: #fca5a5; }
.km-pp .km-variant-price { font-weight: 800; color: var(--cl-accent); }

.km-pp .nebula-qty {
  display: flex; align-items: center;
  padding: .3rem; border-radius: .9rem;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02);
}
.km-pp .nebula-qty-btn {
  width: 2.4rem; height: 2.4rem; border-radius: .65rem;
  border: 0; background: rgba(255,255,255,.06); color: #fff;
  display: grid; place-items: center; transition: background .2s ease;
}
.km-pp .nebula-qty-btn:hover:not(:disabled) { background: rgba(var(--cl-accent-rgb), .25); }
.km-pp .nebula-qty-input { flex: 1; text-align: center; border: 0; background: transparent; color: #fff; font-weight: 800; font-size: 1.05rem; }
.km-pp .nebula-buy-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.km-pp .nebula-buy-row .btn {
  border-radius: .9rem !important;
  font-weight: 800 !important;
  padding: .85rem 1rem !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.km-pp .nebula-buy-row .btn-login {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.km-pp .nebula-buy-row .btn-login::before,
.km-pp .nebula-buy-row .btn-login::after { display: none !important; }
.km-pp .nebula-buy-row .btn-login:hover:not(:disabled) { background: rgba(255,255,255,.1) !important; transform: translateY(-1px); }
.km-pp .nebula-buy-row .nebula-btn-secondary {
  position: relative; overflow: hidden;
  background: var(--cl-accent) !important;
  border: 0 !important;
  color: #04121a !important;
  box-shadow: 0 12px 30px -12px rgba(var(--cl-accent-rgb), .95) !important;
}
.km-pp .nebula-buy-row .nebula-btn-secondary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 36px -12px rgba(var(--cl-accent-rgb), 1) !important; }
.km-pp .nebula-buy-row .nebula-btn-secondary::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg); animation: km-sweep 4.5s ease-in-out infinite; pointer-events: none;
}

.km-pp-trust {
  list-style: none; margin: 1.2rem 0 0; padding: 1rem 0 0;
  border-top: 1px solid rgba(255,255,255,.07);
  display: grid; gap: .75rem;
}
.km-pp-trust li { display: flex; gap: .75rem; align-items: flex-start; }
.km-pp-trust i {
  width: 2rem; height: 2rem; flex: none;
  display: grid; place-items: center; border-radius: .6rem;
  background: rgba(var(--cl-accent-rgb), .12); color: var(--cl-accent); font-size: .85rem;
}
.km-pp-trust strong { display: block; font-size: .88rem; color: #fff; }
.km-pp-trust span { font-size: .8rem; color: rgba(255,255,255,.5); }
.km-pp-trust a { color: var(--cl-accent); }

.km-pp-info {
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(10,12,16,.9);
  overflow: hidden;
}
.km-pp-tabs {
  display: flex; gap: .25rem; padding: .4rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  overflow-x: auto;
}
.km-pp-tabs button {
  flex: none; padding: .55rem 1rem; border: 0; border-radius: .7rem;
  background: transparent; color: rgba(255,255,255,.55); font-weight: 700; font-size: .88rem;
  transition: background .2s ease, color .2s ease;
}
.km-pp-tabs button.is-active { background: rgba(var(--cl-accent-rgb), .15); color: var(--cl-accent); }
.km-pp-panel { padding: 1.2rem 1.4rem 1.4rem; color: rgba(255,255,255,.72); line-height: 1.65; }
.km-pp-panel ul { padding-left: 1.1rem; }
.km-pp-panel a { color: var(--cl-accent); }

/* related products */
.km-pp-related { margin-top: 3rem; }
.km-pp-related-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem;
  margin-bottom: 1rem;
}
.km-pp-related-head h2 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.km-pp-related-head a { color: var(--cl-accent); font-weight: 600; font-size: .9rem; text-decoration: none; }
.km-pp-related-head a i { font-size: .75rem; margin-left: .25rem; transition: transform .2s ease; }
.km-pp-related-head a:hover i { transform: translateX(3px); }
@media (min-width: 992px) { .km-pp-related-grid { grid-template-columns: repeat(4, 1fr) !important; } }

/* sticky buy bar: phones and tablets only */
.km-buybar { display: none; }
@media (max-width: 991.98px) {
  .km-buybar {
    position: fixed; left: .6rem; right: .6rem; bottom: .6rem; z-index: 1030;
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .6rem .6rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(var(--cl-accent-rgb), .35);
    background: rgba(7, 8, 11, .92);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px -12px rgba(0,0,0,.9), 0 0 30px -12px rgba(var(--cl-accent-rgb), .6);
    transform: translateY(140%);
    opacity: 0;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
    pointer-events: none;
  }
  .km-buybar.is-visible { transform: none; opacity: 1; pointer-events: auto; }
  .km-buybar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .km-buybar-info strong { font-size: .88rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .km-buybar-info span { font-size: .8rem; color: var(--cl-accent); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .km-buybar-btn {
    flex: none; padding: .7rem 1.2rem; border: 0; border-radius: .8rem;
    background: var(--cl-accent); color: #04121a; font-weight: 800;
    box-shadow: 0 8px 22px -8px rgba(var(--cl-accent-rgb), 1);
  }
  .km-buybar-btn:disabled { opacity: .5; box-shadow: none; }
  /* room so the bar never hides the end of the page */
  .km-pp { padding-bottom: 6rem; }
  /* keep the purchase toast above the bar */
  body:has(.km-buybar.is-visible) .km-live-toast-wrap { bottom: 5.5rem !important; }
}

/* ---------- Home: growth best sellers ------------------------------ */
.km-growth { padding: 1rem 0 3rem; }
.km-growth-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem;
  margin-bottom: 1.25rem;
}
.km-growth-head h2 { margin: 0 0 .35rem; font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; }
.km-growth-head p { margin: 0; color: rgba(255,255,255,.55); max-width: 34rem; }
.km-growth-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.km-growth-tags span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .75rem; border-radius: 999px;
  border: 1px solid rgba(var(--cl-accent-rgb), .3);
  background: rgba(var(--cl-accent-rgb), .08);
  font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.85);
}
.km-growth-tags i { color: var(--cl-accent); }
@media (min-width: 992px) { .km-growth-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
@media (min-width: 576px) and (max-width: 991.98px) { .km-growth-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.km-growth-more { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.5rem; }

/* ---------- Search popup: never wider than the screen ------------- */
.az-search-panel { width: min(576px, 100%) !important; max-width: 100% !important; }

/* ---------- Mobile menu (navbar ☰): dropdown under the bar ------------ */
.az-mobile-panel.km-menu {
  position: absolute !important;
  top: calc(100% + .5rem) !important; left: 0 !important; right: 0 !important;
  z-index: 40 !important;
  padding: .75rem !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background:
    linear-gradient(135deg, rgba(var(--cl-accent-rgb), .07), transparent 45%),
    #0b0e14 !important;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4) !important;
  /* the old theme hid the panel with opacity/visibility; x-show handles it now */
  opacity: 1 !important; visibility: visible !important; transform: none;
}
.km-menu-enter { transition: opacity .2s ease-out, transform .2s ease-out; }
.km-menu-leave { transition: opacity .15s ease-in, transform .15s ease-in; }
/* same specificity as the base rule above, so the transition states win */
.az-mobile-panel.km-menu.km-menu-from { opacity: 0 !important; transform: translateY(-8px) !important; }
.az-mobile-panel.km-menu.km-menu-to { opacity: 1 !important; transform: translateY(0) !important; }
.az-mobile-panel.km-menu.km-menu-out { opacity: 0 !important; transform: translateY(-4px) !important; }

.km-menu-links { display: flex; flex-direction: column; }
.km-menu-links a {
  padding: .6rem .75rem;
  border-radius: .6rem;
  color: rgba(255,255,255,.6) !important; text-decoration: none !important;
  font-size: .92rem; font-weight: 500;
  transition: color .2s ease, background .2s ease;
}
.km-menu-links a:hover { color: #fff !important; }
.km-menu-links a.is-active { color: #fff !important; background: rgba(255,255,255,.06); }
.km-menu-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: .6rem; padding: .75rem .25rem 0 .75rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.km-menu-account { border: 0; background: none; padding: 0; color: #fff !important; font-weight: 600; font-size: .92rem; text-decoration: none !important; }
.km-menu-account i { color: var(--cl-accent); margin-right: .35rem; }
.km-menu-cart {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .75rem; border-radius: .6rem;
  border: 1px solid rgba(255,255,255,.1);
  color: #fff !important; font-size: .85rem; font-weight: 600; text-decoration: none !important;
}
.km-menu-cart em {
  min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--cl-accent); color: #04121a; font-style: normal; font-size: .7rem; font-weight: 800;
}

/* ---------- Reviews: ghost title + marquee cards ----------------------- */
/* the ghost text is wider than a phone screen: clip it inside its section */
.km-fbs, .km-products-page { overflow-x: hidden; overflow-x: clip; }
.km-ghost-wrap { position: relative; display: inline-block; }
.km-ghost-wrap h2 { position: relative; z-index: 1; }
.km-ghost {
  position: absolute; left: 50%; top: 58%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: clamp(3rem, 9vw, 6.5rem); font-weight: 900; letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.07);
  pointer-events: none; user-select: none;
  z-index: 0;
}

.km-fb-marquee {
  overflow: hidden;
  padding: .5rem 0 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.km-fb-track {
  display: flex; gap: 1rem; width: max-content;
  animation: km-marquee var(--km-fb-duration, 60s) linear infinite;
}
.km-fb-track:hover { animation-play-state: paused; }
.km-fb-copy { display: contents; }
.km-fb-track .km-fb { width: 20rem; flex: none; }
@media (prefers-reduced-motion: reduce) {
  .km-fb-marquee { overflow-x: auto; }
  .km-fb-track { animation: none; }
  .km-fb-copy { display: none; }
}

.km-fb {
  display: flex; flex-direction: column;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 42%),
    #080b10;
  box-shadow: 0 1px 0 rgba(255,255,255,.045) inset;
  transition: border-color .25s ease, transform .25s ease;
}
.km-fb:hover { border-color: rgba(var(--cl-accent-rgb), .35); transform: translateY(-2px); }
.km-fb-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1rem 0; }
.km-fb-product { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.km-fb-product img, .km-fb-noimg {
  width: 1.75rem; height: 1.75rem; flex: none;
  border-radius: .45rem; border: 1px solid rgba(255,255,255,.1);
  object-fit: cover;
}
.km-fb-noimg { display: grid; place-items: center; font-size: .7rem; color: var(--cl-accent); background: rgba(var(--cl-accent-rgb), .1); }
.km-fb-product p { margin: 0; min-width: 0; font-size: .78rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-fb-product p span { color: rgba(255,255,255,.45); font-weight: 400; }
.km-fb-head time { flex: none; font-size: .75rem; color: rgba(255,255,255,.45); }
.km-fb-body { flex: 1; padding: .75rem 1rem 0; }
.km-fb-msg {
  margin: 0;
  font-size: .9rem; line-height: 1.6; color: rgba(255,255,255,.88);
  word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.km-fb-msg.is-open { display: block; -webkit-line-clamp: unset; }
.km-fb-more { margin-top: .4rem; padding: 0; border: 0; background: none; color: var(--cl-accent); font-size: .75rem; font-weight: 600; }
.km-fb-more:hover { text-decoration: underline; text-underline-offset: 2px; }
.km-fb-reply {
  margin-top: .6rem; padding: .5rem .65rem; border-radius: .55rem;
  border-left: 2px solid var(--cl-accent); background: rgba(var(--cl-accent-rgb), .06);
  font-size: .78rem; color: rgba(255,255,255,.7);
  display: flex; flex-direction: column; gap: .1rem;
}
.km-fb-reply strong { font-size: .7rem; color: var(--cl-accent); }
.km-fb-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: .75rem; padding: .75rem 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.km-fb-stars { display: inline-flex; gap: 2px; font-size: .8rem; color: rgba(255,255,255,.15); }
.km-fb-stars .is-on { color: var(--cl-accent); }
.km-fb-verified {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .5rem; border-radius: .4rem;
  border: 1px solid rgba(34,197,94,.3); background: rgba(34,197,94,.1);
  color: #4ade80; font-size: .7rem; font-weight: 600;
}
/* reviews page keeps a grid of the same cards */
.az-reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }

/* ---------- Products page: ambient background -------------------------- */
.km-products-page { position: relative; }
.km-page-fx {
  position: absolute; left: 0; right: 0; top: -6rem; height: 60rem;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.km-products-page > .container { position: relative; z-index: 1; }
.km-page-fx::before,
.km-page-fx::after {
  content: '';
  position: absolute; border-radius: 50%;
  filter: blur(110px);
}
.km-page-fx::before {
  width: 36rem; height: 30rem; left: 50%; top: -8rem; margin-left: -18rem;
  background: radial-gradient(circle, rgba(var(--cl-accent-rgb), .35), transparent 68%);
  animation: km-glow-drift 22s ease-in-out infinite;
}
.km-page-fx::after {
  width: 26rem; height: 22rem; right: -6rem; top: 6rem;
  background: radial-gradient(circle, rgba(2, 132, 199, .28), transparent 68%);
  animation: km-glow-drift 26s ease-in-out infinite reverse;
}
@keyframes km-glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(6%, 4%) scale(1.08); }
  66% { transform: translate(-5%, 2%) scale(.95); }
}
.km-page-fx-noise {
  position: absolute; inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.72' numOctaves='2' stitchTiles='stitch' type='fractalNoise'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
}
.km-page-fx-dots span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(var(--cl-accent-rgb), .6);
  box-shadow: 0 0 8px rgba(var(--cl-accent-rgb), .8);
  opacity: .5;
  animation: km-float-dot 14s ease-in-out infinite;
}
.km-page-fx-dots span:nth-child(1) { left: 12%; top: 22%; animation-duration: 13s; }
.km-page-fx-dots span:nth-child(2) { left: 28%; top: 48%; animation-duration: 17s; animation-delay: -4s; }
.km-page-fx-dots span:nth-child(3) { left: 46%; top: 12%; animation-duration: 15s; animation-delay: -8s; }
.km-page-fx-dots span:nth-child(4) { left: 63%; top: 36%; animation-duration: 19s; animation-delay: -2s; }
.km-page-fx-dots span:nth-child(5) { left: 78%; top: 18%; animation-duration: 12s; animation-delay: -6s; }
.km-page-fx-dots span:nth-child(6) { left: 88%; top: 52%; animation-duration: 16s; animation-delay: -10s; }
.km-page-fx-dots span:nth-child(7) { left: 36%; top: 70%; animation-duration: 18s; animation-delay: -3s; }
.km-page-fx-dots span:nth-child(8) { left: 70%; top: 66%; animation-duration: 14s; animation-delay: -12s; }
@keyframes km-float-dot {
  0%, 100% { transform: translate(0, 0); opacity: .15; }
  50% { transform: translate(14px, -26px); opacity: .7; }
}

/* ---------- Announcement / promo strip ----------------------------- */
.km-promo {
  position: relative;
  display: flex !important; align-items: center; justify-content: center;
  min-height: 2.75rem;
  padding: .45rem 3rem !important;
  overflow: hidden;
  background: linear-gradient(100deg, #0284c7 0%, var(--cl-accent) 35%, #7dd3fc 50%, var(--cl-accent) 65%, #0284c7 100%) !important;
  background-size: 220% 100% !important;
  animation: km-promo-flow 9s ease-in-out infinite;
  color: #04121a !important;
  font-size: .9rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 24px -10px rgba(var(--cl-accent-rgb), .8);
}
@keyframes km-promo-flow { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
/* soft shine that crosses the strip */
.km-promo::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -40%; width: 25%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  animation: km-promo-shine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes km-promo-shine { 0%, 55% { left: -40%; } 100% { left: 130%; } }

.km-promo-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  min-width: 0;
}
.km-promo-ico {
  width: 1.7rem; height: 1.7rem; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: #04121a; color: var(--cl-accent); font-size: .75rem;
  animation: km-promo-wiggle 4s ease-in-out infinite;
}
@keyframes km-promo-wiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-12deg); } 94% { transform: rotate(10deg); } 97% { transform: rotate(-6deg); } }
.km-promo-text {
  margin: 0; min-width: 0;
  font-weight: 600; letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.km-promo-text strong { font-weight: 900; margin-right: .2rem; }
.km-promo-short { display: none; }

.km-promo-code {
  flex: none;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .75rem;
  border: 0; border-radius: .55rem;
  background: #04121a; color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800; font-size: .82rem; letter-spacing: .1em;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.6);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.km-promo-code i { font-size: .72rem; color: var(--cl-accent); }
.km-promo-code:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(0,0,0,.7); }
.km-promo-code.is-copied { background: #14532d; }
.km-promo-code.is-copied i { color: #86efac; }

.km-promo-link {
  flex: none;
  display: inline-flex; align-items: center; gap: .35rem;
  color: #04121a !important; font-weight: 800; text-decoration: none !important;
  border-bottom: 2px solid rgba(4,18,26,.35);
  line-height: 1.2;
  transition: border-color .2s ease;
}
.km-promo-link i { font-size: .7rem; transition: transform .2s ease; }
.km-promo-link:hover { border-color: #04121a; }
.km-promo-link:hover i { transform: translateX(3px); }

.km-promo-close {
  position: absolute; z-index: 1; right: .6rem; top: 50%; transform: translateY(-50%);
  width: 1.8rem; height: 1.8rem; border: 0; border-radius: 50%;
  background: rgba(4,18,26,.12); color: #04121a; font-size: .8rem;
  transition: background .2s ease;
}
.km-promo-close:hover { background: rgba(4,18,26,.25); }

@media (max-width: 575.98px) {
  .km-promo { padding: .45rem 2.6rem .45rem .7rem !important; justify-content: flex-start; font-size: .82rem; min-height: 2.6rem; }
  .km-promo-inner { flex: 1; justify-content: flex-start; gap: .55rem; }
  .km-promo-ico { display: none; }
  .km-promo-long { display: none; }
  .km-promo-short { display: inline; }
  .km-promo-text { flex: 1 1 auto; }
  .km-promo-link { display: none; }
  .km-promo-code { padding: .28rem .6rem; font-size: .76rem; }
}

/* ---------- Purchase notifications on phones ------------------------ */
@media (max-width: 575.98px) {
  .km-live-toast-wrap {
    top: auto !important;
    bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)) !important;
    left: .75rem !important; right: auto !important;
    max-width: calc(100vw - 1.5rem) !important;
  }
  .km-live-toast {
    padding: .45rem .75rem .45rem .45rem !important;
    border-radius: 999px !important;
    gap: .55rem !important;
  }
  .km-live-toast-ico { width: 1.9rem !important; height: 1.9rem !important; border-radius: 50% !important; flex: none; overflow: hidden; }
  .km-live-toast-ico img { width: 100%; height: 100%; object-fit: cover; }
  .km-live-toast-title { font-size: .76rem !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
  .km-live-toast-meta { font-size: .66rem !important; }
}

/* ---------- Cart --------------------------------------------------- */
.kc { padding-top: 2rem; padding-bottom: 4rem; }
.kc-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.5rem;
}
.kc-head h1 { margin: 0 0 .25rem; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; }
.kc-head p { margin: 0; color: rgba(255,255,255,.5); }
.kc-continue { color: rgba(255,255,255,.65); font-weight: 600; text-decoration: none; font-size: .9rem; }
.kc-continue:hover { color: var(--cl-accent); }
.kc-continue i { font-size: .75rem; margin-right: .3rem; transition: transform .2s ease; }
.kc-continue:hover i { transform: translateX(-3px); }

.kc-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
@media (min-width: 992px) {
  .kc-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; }
  .kc-summary-wrap { position: sticky; top: 96px; }
}

.kc-alert, .kc-error {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .9rem 1rem; margin-bottom: 1rem; border-radius: .9rem;
  font-size: .9rem;
}
.kc-alert { border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.08); color: #fde68a; }
.kc-alert p { margin: 0; }
.kc-error { margin: 1rem 0 0; border: 1px solid rgba(239,68,68,.35); background: rgba(239,68,68,.08); color: #fecaca; }

.kc-loading { display: grid; gap: .75rem; }
.kc-skeleton {
  height: 104px; border-radius: 1.1rem;
  background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03));
  background-size: 200% 100%;
  animation: km-gradient-x 1.4s linear infinite;
}

.kc-empty {
  text-align: center; padding: 3.5rem 1.5rem;
  border-radius: 1.25rem; border: 1px dashed rgba(255,255,255,.12);
  background: rgba(10,12,16,.6);
  animation: km-pop .35s ease;
}
.kc-empty-ico {
  width: 4rem; height: 4rem; margin: 0 auto 1rem;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(var(--cl-accent-rgb), .12); color: var(--cl-accent); font-size: 1.5rem;
  animation: km-float 4s ease-in-out infinite;
}
.kc-empty h2 { font-size: 1.35rem; font-weight: 800; margin: 0 0 .35rem; }
.kc-empty p { color: rgba(255,255,255,.5); margin: 0 0 1.25rem; }

.kc-list { display: grid; gap: .75rem; }
.kc-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-areas: "thumb info" "actions actions";
  gap: .9rem 1rem;
  align-items: center;
  padding: .9rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(10,12,16,.92);
  animation: km-card-in .35s cubic-bezier(.2,.8,.2,1) both;
  transition: border-color .2s ease;
}
.kc-item:hover { border-color: rgba(var(--cl-accent-rgb), .3); }
@media (min-width: 640px) {
  .kc-item { grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "thumb info actions"; }
}
.kc-thumb {
  grid-area: thumb;
  width: 100%; aspect-ratio: 1; border-radius: .8rem; overflow: hidden;
  display: grid; place-items: center;
  background: rgba(var(--cl-accent-rgb), .1); color: var(--cl-accent); font-size: 1.4rem;
}
.kc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kc-info { grid-area: info; min-width: 0; }
.kc-name { display: block; color: #fff; font-weight: 700; text-decoration: none; line-height: 1.3; }
.kc-name:hover { color: var(--cl-accent); }
.kc-variant { margin: .15rem 0 0; font-size: .82rem; color: rgba(255,255,255,.55); }
.kc-unit { margin: .3rem 0 0; font-size: .8rem; color: rgba(255,255,255,.45); }
.kc-saved { margin-left: .35rem; color: #86efac; font-weight: 700; }
.kc-discount {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: .45rem 0 0; padding: .2rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700;
  background: rgba(var(--cl-accent-rgb), .12); color: var(--cl-accent);
}
.kc-actions {
  grid-area: actions;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
@media (min-width: 640px) { .kc-actions { justify-content: flex-end; } }
.kc-qty {
  display: flex; align-items: center;
  padding: .2rem; border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02);
}
.kc-qty button {
  width: 2rem; height: 2rem; border: 0; border-radius: .55rem;
  background: rgba(255,255,255,.06); color: #fff; font-size: .7rem;
  transition: background .2s ease;
}
.kc-qty button:hover:not(:disabled) { background: rgba(var(--cl-accent-rgb), .25); }
.kc-qty button:disabled { opacity: .35; }
.kc-qty input {
  width: 2.8rem; border: 0; background: transparent; color: #fff; text-align: center; font-weight: 800;
  -moz-appearance: textfield;
}
.kc-qty input::-webkit-inner-spin-button, .kc-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.kc-price { min-width: 5.5rem; text-align: right; font-size: 1.1rem; font-weight: 800; color: #fff; }
.kc-remove {
  width: 2.2rem; height: 2.2rem; border-radius: .6rem;
  border: 1px solid rgba(255,255,255,.08); background: transparent; color: rgba(255,255,255,.45);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.kc-remove:hover { color: #fca5a5; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }

.kc-summary {
  padding: 1.35rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(var(--cl-accent-rgb), .2);
  background: linear-gradient(180deg, rgba(var(--cl-accent-rgb), .07), rgba(10,12,16,.94) 45%);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.9);
}
.kc-summary h2 { font-size: 1.1rem; font-weight: 800; margin: 0 0 1rem; }
.kc-row { display: flex; justify-content: space-between; align-items: center; padding: .45rem 0; color: rgba(255,255,255,.6); font-size: .92rem; }
.kc-total { margin-top: .4rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.08); color: #fff; font-weight: 700; }
.kc-total strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.kc-altcha { margin-top: 1rem; }
.kc-checkout {
  position: relative; overflow: hidden;
  width: 100%; margin-top: 1.1rem;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1rem; border: 0; border-radius: .95rem;
  background: var(--cl-accent); color: #04121a;
  font-weight: 800; font-size: 1rem;
  box-shadow: 0 14px 34px -14px rgba(var(--cl-accent-rgb), 1);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.kc-checkout::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg); animation: km-sweep 4.5s ease-in-out infinite; pointer-events: none;
}
.kc-checkout:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(var(--cl-accent-rgb), 1); }
.kc-checkout:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.kc-checkout:disabled::after { display: none; }
.kc-trust { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .45rem; font-size: .82rem; color: rgba(255,255,255,.55); }
.kc-trust i { color: var(--cl-accent); width: 1.1rem; }
.kc-pay { display: flex; gap: .4rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.07); }
.kc-pay span {
  width: 2.3rem; height: 1.7rem; display: grid; place-items: center; border-radius: .45rem;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.7); font-size: .85rem; font-weight: 800;
}

/* ---------- Customer area ------------------------------------------ */
.nebula-page-hero {
  padding: 1.25rem 1.4rem !important;
  margin-bottom: 1.5rem !important;
  border-radius: 1.25rem !important;
  border: 1px solid rgba(var(--cl-accent-rgb), .2) !important;
  background: linear-gradient(135deg, rgba(var(--cl-accent-rgb), .12), rgba(10,12,16,.92) 60%) !important;
  box-shadow: none !important;
  animation: km-rise .6s cubic-bezier(.2,.8,.2,1) both;
}
.nebula-page-hero h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important; font-weight: 800 !important; letter-spacing: -.02em; }
.nebula-page-hero-icon {
  background: rgba(var(--cl-accent-rgb), .15) !important;
  color: var(--cl-accent) !important;
  border: 1px solid rgba(var(--cl-accent-rgb), .3) !important;
}
.nebula-panel {
  border-radius: 1.15rem !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(10,12,16,.92) !important;
  box-shadow: none !important;
  transition: border-color .2s ease;
}
.nebula-panel:hover { border-color: rgba(var(--cl-accent-rgb), .22) !important; }

.km-cside { padding: 1rem !important; }
.km-cside-user { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; min-width: 0; }
.km-cside-avatar {
  width: 2.6rem; height: 2.6rem; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, var(--cl-accent), rgba(var(--cl-accent-rgb), .45));
  color: #04121a; font-weight: 800; font-size: 1.1rem;
}
.km-cside-who { min-width: 0; display: flex; flex-direction: column; }
.km-cside-who strong { font-size: .95rem; }
.km-cside-who span { font-size: .8rem; color: rgba(255,255,255,.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-cnav { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; margin: 0 -.2rem; padding: 0 .2rem; }
.km-cnav::-webkit-scrollbar { display: none; }
.km-cnav a, .km-cnav button {
  flex: none;
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .85rem; border-radius: .75rem;
  border: 1px solid transparent; background: transparent;
  color: rgba(255,255,255,.65); font-weight: 600; font-size: .9rem; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.km-cnav i { width: 1rem; text-align: center; font-size: .85rem; }
.km-cnav a:hover, .km-cnav button:hover { background: rgba(255,255,255,.05); color: #fff; }
.km-cnav a.is-active {
  background: rgba(var(--cl-accent-rgb), .14); color: #fff; border-color: rgba(var(--cl-accent-rgb), .35);
}
.km-cnav a.is-active i { color: var(--cl-accent); }
.km-cnav-logout:hover { color: #fca5a5 !important; background: rgba(239,68,68,.08) !important; }
@media (min-width: 992px) {
  .km-cnav { flex-direction: column; overflow: visible; }
  .km-cnav-logout { margin-top: .4rem; border-top: 1px solid rgba(255,255,255,.06) !important; border-radius: 0 0 .75rem .75rem !important; }
}

/* tables in dashboard pages */
.nebula-panel .table, .km-body .container .table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(var(--cl-accent-rgb), .06);
  color: rgba(255,255,255,.8);
  margin-bottom: 0;
}
.nebula-panel .table thead th, .km-body .container .table thead th {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.45) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background: transparent !important;
}
.nebula-panel .table td, .km-body .container .table td {
  border-color: rgba(255,255,255,.05) !important;
  background: transparent !important;
  vertical-align: middle;
}
.nebula-panel .table tbody tr { transition: background .15s ease; }
.nebula-panel .table tbody tr:hover { background: rgba(var(--cl-accent-rgb), .05); }
.nebula-panel .table a { color: var(--cl-accent); }
.nebula-panel .badge { border-radius: 999px; padding: .35em .7em; font-weight: 700; }
.nebula-panel .btn {
  border-radius: .7rem;
}

/* ---------- Phone tweaks ------------------------------------------ */
/* wide tables scroll inside their panel instead of pushing the page sideways */
.nebula-panel:has(table) { overflow-x: auto; }
.nebula-panel table { min-width: 520px; }

@media (max-width: 575.98px) {
  /* two product cards per row */
  .km-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; }
  .km-grid .km-pcard-frame { padding: .5rem .5rem 0; }
  .km-grid .km-pcard-body { padding: .7rem .7rem .75rem !important; }
  .km-grid .km-pcard-row { flex-direction: column; gap: .2rem; margin-bottom: .45rem; }
  .km-grid .km-pcard-price { align-items: flex-start; }
  .km-grid .km-pcard-title { font-size: .86rem; }
  .km-grid .km-pcard-price strong { font-size: .95rem; }
  .km-grid .km-pcard-badges { display: none; }
  .km-grid .km-pcard-stockline { font-size: .75rem; margin-bottom: .6rem; }
  .km-grid .km-pcard-cta { padding: .5rem .6rem; font-size: .8rem; }
  .km-grid .km-pcard-cta i { display: none; }

  /* product page: two variants per row */
  .km-pp .km-variant-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .km-pp-card { padding: 1.1rem; }
  .km-pp-price { font-size: 1.9rem; }

  .km-toolbar-row { width: 100%; }
}

/* ---------- Final CTA (Shop + Discord) ------------------------------ */
.km-final {
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0 7rem;
  text-align: center;
  isolation: isolate;
}
.km-final-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(var(--cl-accent-rgb), .14), transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.06) 0deg .35deg, transparent .35deg 7.5deg);
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 20%, transparent 95%);
  mask-image: radial-gradient(closest-side at 50% 50%, #000 20%, transparent 95%);
  animation: km-final-spin 90s linear infinite;
}
@keyframes km-final-spin { to { transform: rotate(360deg); } }
.km-final-title {
  margin: 0 0 2.5rem;
  display: flex; flex-direction: column; align-items: center;
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.055em;
  text-transform: uppercase;
  color: #fff;
}
.km-final-title-2 {
  background: linear-gradient(180deg, #ffffff 0%, #b8c2cc 55%, #6b7785 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.km-final-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 4.5rem;
  margin-bottom: 2.6rem;
}
.km-final-stat { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.km-final-stat strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; letter-spacing: .02em; line-height: 1;
  color: #fff;
}
.km-final-stat strong em { font-style: normal; color: #4ade80; margin-left: .1em; }
.km-final-stat > span {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(148, 184, 214, .85);
}
.km-final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.km-final-btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  font-weight: 800; font-size: .98rem;
  color: #fff !important; text-decoration: none !important;
}
.km-final-btn.is-shop {
  text-transform: uppercase; letter-spacing: .02em;
  background: linear-gradient(180deg, #4ea8ff, #2f7cf6);
  box-shadow: 0 12px 36px -10px rgba(47, 124, 246, .9);
}
.km-final-btn.is-discord {
  background: linear-gradient(180deg, #6d78ff, #5865f2);
  box-shadow: 0 12px 36px -10px rgba(88, 101, 242, .9);
}
@media (max-width: 575.98px) {
  .km-final { padding: 4.5rem 0 5rem; }
  .km-final-stats { gap: 1.4rem 2rem; }
  .km-final-btn { width: 100%; justify-content: center; }
}

/* ---------- Welcome popup ------------------------------------------ */
.km-pop-overlay {
  position: fixed; inset: 0; z-index: 1060;
  background: rgba(2, 4, 8, .7);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.km-pop-wrap {
  position: fixed; inset: 0; z-index: 1061;
  display: grid; place-items: center;
  padding: 1rem;
  pointer-events: none;
}
.km-pop-card {
  pointer-events: auto;
  position: relative;
  width: min(100%, 25rem);
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgba(var(--cl-accent-rgb), .25);
  background: #07090e;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.95), 0 0 60px -20px rgba(var(--cl-accent-rgb), .5);
}
.km-pop-enter { transition: opacity .3s ease, transform .35s cubic-bezier(.2,.9,.25,1.1); }
.km-pop-leave { transition: opacity .2s ease, transform .2s ease; }
.km-pop-from { opacity: 0; transform: scale(.9) translateY(12px); }
.km-pop-to { opacity: 1; transform: none; }
.km-pop-close {
  position: absolute; top: .7rem; right: .7rem; z-index: 3;
  width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.35); color: #fff; font-size: 1rem;
}
.km-pop-hero {
  position: relative;
  height: 11.5rem;
  display: grid; place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(var(--cl-accent-rgb), .95), rgba(2, 132, 199, .55) 35%, transparent 70%),
    radial-gradient(circle at 80% 15%, rgba(255,255,255,.08), transparent 30%),
    #05070c;
  border-bottom: 1px solid rgba(var(--cl-accent-rgb), .4);
}
.km-pop-hero::before {
  /* star dust */
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 68% 18%, #fff, transparent),
    radial-gradient(1px 1px at 86% 60%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 50% 40%, rgba(255,255,255,.6), transparent);
  animation: km-twinkle 3s ease-in-out infinite;
}
@keyframes km-twinkle { 50% { opacity: .5; } }
.km-pop-orb {
  position: absolute; width: 16rem; height: 16rem; right: -5rem; top: -7rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(circle at 30% 70%, rgba(255,255,255,.05), transparent 60%);
}
.km-pop-hero-text {
  position: relative; z-index: 2;
  font-size: 3rem; font-weight: 800; letter-spacing: -.05em; line-height: 1;
  background: linear-gradient(180deg, #fff 30%, #cbd5e1 70%, #94a3b8);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.6));
}
.km-pop-token {
  position: absolute; z-index: 3;
  width: 2.7rem; height: 2.7rem;
  display: grid; place-items: center;
  border-radius: 30%;
  color: #fff; font-size: 1.05rem;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 10px 22px -6px rgba(0,0,0,.7);
  animation: km-token-float 5s ease-in-out infinite;
}
.km-pop-token.t1 { left: 9%; top: 16%; background: linear-gradient(145deg, #34d399, #047857); }
.km-pop-token.t2 { right: 13%; top: 14%; background: linear-gradient(145deg, #7dd3fc, #0369a1); animation-delay: -1.2s; }
.km-pop-token.t3 { left: 20%; bottom: 12%; background: linear-gradient(145deg, #cbd5e1, #475569); animation-delay: -2.4s; }
.km-pop-token.t4 { right: 22%; bottom: 10%; background: linear-gradient(145deg, #fcd34d, #b45309); animation-delay: -3.6s; }
@keyframes km-token-float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-8px) rotate(6deg); }
}
.km-pop-body { padding: 1.4rem 1.5rem 1.3rem; text-align: center; }
.km-pop-eyebrow { margin: 0 0 .35rem; font-size: .85rem; font-weight: 700; color: var(--cl-accent); }
.km-pop-body h3 { margin: 0 0 .6rem; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.km-pop-text { margin: 0 auto 1rem; max-width: 20rem; font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.62); }
.km-pop-code {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-bottom: 1rem; padding: .45rem .95rem;
  border-radius: .6rem;
  border: 1.5px dashed rgba(var(--cl-accent-rgb), .7);
  background: rgba(var(--cl-accent-rgb), .08);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; letter-spacing: .12em;
}
.km-pop-code i { color: var(--cl-accent); font-size: .8rem; }
.km-pop-code.is-copied { border-color: #22c55e; background: rgba(34,197,94,.12); }
.km-pop-code.is-copied i { color: #4ade80; }
.km-pop-cta {
  display: block; width: 100%;
  padding: .9rem 1rem;
  border: 0; border-radius: .9rem;
  background: linear-gradient(180deg, #7dd3fc, var(--cl-accent));
  color: #04121a; font-weight: 800; font-size: 1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 14px 34px -12px rgba(var(--cl-accent-rgb), 1);
}
.km-pop-links { display: flex; align-items: center; justify-content: center; gap: .15rem; margin-top: .6rem; color: rgba(255,255,255,.25); }
.km-pop-later { padding: .3rem .6rem; border: 0; background: none; color: rgba(255,255,255,.55); font-size: .88rem; }
.km-pop-later:hover { color: #fff; }
.km-pop-never { font-size: .8rem; color: rgba(255,255,255,.38); text-decoration: underline; text-underline-offset: 3px; }

/* no purchase toasts on top of the welcome popup */
body:has(.km-pop-wrap:not([style*="display: none"])) .km-live-toast-wrap { display: none !important; }

/* review without written text */
.km-fb-msg.is-empty { color: rgba(255,255,255,.45); font-style: italic; }

/* ---------- Buttons: zoom on hover, press on click (no lift) -------- */
.az-btn, .km-pcard-cta, .kc-checkout, .km-hero-search button, .km-buybar-btn,
.km-pp .nebula-buy-row .btn, .km-menu-cart, .km-final-btn, .km-pop-cta, .km-pop-code,
.km-announce-code, .km-promo-code, .kc-remove, .km-drawer-close, .km-pp-nav, .az-filter-chip, .km-cat, .km-view button,
.km-support-card, .km-growth-more .az-btn {
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease, color .2s ease !important;
}
.az-btn:hover, .km-pcard-cta:hover, .kc-checkout:hover:not(:disabled), .km-hero-search button:hover, .km-buybar-btn:hover:not(:disabled),
.km-pp .nebula-buy-row .btn:hover:not(:disabled), .km-menu-cart:hover, .km-final-btn:hover, .km-pop-cta:hover, .km-pop-code:hover,
.km-promo-code:hover, .az-filter-chip:hover, .km-cat:hover, .km-view button:hover {
  transform: scale(1.045) !important;
  filter: brightness(1.07);
}
.km-pcard:hover .km-pcard-cta { transform: scale(1.02) !important; }
.az-btn:active, .km-pcard-cta:active, .km-pcard:active .km-pcard-cta, .kc-checkout:active:not(:disabled), .km-hero-search button:active,
.km-buybar-btn:active:not(:disabled), .km-pp .nebula-buy-row .btn:active:not(:disabled), .km-menu-cart:active, .km-final-btn:active,
.km-pop-cta:active, .km-pop-code:active, .km-promo-code:active, .az-filter-chip:active, .km-cat:active, .km-view button:active,
.kc-remove:active, .km-pp-nav:active {
  transform: scale(.95) !important;
  filter: brightness(.95);
  transition-duration: .08s !important;
}

/* ---------- Ambient page background (whole site) -------------------- */
body.km-body { position: relative; background: #04060a !important; }
body.km-body::before, body.km-body::after { display: none !important; }
.km-body > #app { position: relative; z-index: 1; }
.km-bgfx {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.km-bgfx-glows { position: absolute; left: 0; right: 0; top: 0; height: 70rem; }
.km-bgfx-glows::before,
.km-bgfx-glows::after {
  content: '';
  position: absolute; border-radius: 50%;
  filter: blur(110px);
}
.km-bgfx-glows::before {
  width: 36rem; height: 54rem; left: 50%; top: -16rem;
  background: radial-gradient(circle, rgba(var(--cl-accent-rgb), .16), transparent 68%);
  animation: km-hero-glow-drift 22s ease-in-out infinite;
}
.km-bgfx-glows::after {
  width: 30rem; height: 30rem; left: 8%; top: 4rem;
  background: radial-gradient(circle, rgba(2, 132, 199, .12), transparent 68%);
  animation: km-hero-glow-drift 28s ease-in-out infinite reverse;
}
@keyframes km-hero-glow-drift {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  33% { transform: translate(-40%, 3rem) scale(1.08); }
  66% { transform: translate(-58%, 1.5rem) scale(.94); }
}
.km-bgfx-dots span {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: rgba(var(--cl-accent-rgb), .45);
  box-shadow: 0 0 calc(var(--s) * 3) rgba(var(--cl-accent-rgb), .6);
  opacity: .45;
  animation: km-pfx-float var(--d) ease-in-out infinite;
  animation-delay: var(--delay);
}
.km-bgfx-dots span.is-orb {
  width: 9rem; height: 9rem;
  background: radial-gradient(circle, rgba(var(--cl-accent-rgb), .18), transparent 70%);
  box-shadow: none;
  filter: blur(18px);
  opacity: .6;
}
@keyframes km-pfx-float {
  0%, 100% { transform: translate(0, 0); opacity: .15; }
  25% { opacity: .55; }
  50% { transform: translate(var(--sway), -60px); opacity: .45; }
  75% { opacity: .25; }
}
.km-bgfx-noise {
  position: absolute; inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.72' numOctaves='2' stitchTiles='stitch' type='fractalNoise'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
}

/* ---------- Navbar: sliding pill -------------------------------------- */
.km-pills { position: absolute; }
.km-pill-ind {
  position: absolute; left: 0; top: 50%;
  height: 2.15rem; margin-top: -1.075rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  opacity: 0;
  transition: transform .32s cubic-bezier(.3,.9,.3,1), width .32s cubic-bezier(.3,.9,.3,1), opacity .2s ease;
  pointer-events: none;
  z-index: 0;
}
.km-pills .az-nav-link { position: relative; z-index: 1; background: transparent !important; }
.km-pills .az-nav-link.is-active { color: #fff !important; }
.km-pills .az-nav-link:hover { color: #fff !important; }

/* ---------- Reviews page ------------------------------------------- */
.km-reviews-page { padding: 1.5rem 0 4rem; overflow-x: hidden; overflow-x: clip; }
.km-crumbs { display: flex; align-items: center; gap: .6rem; margin-bottom: 3rem; font-size: .92rem; }
.km-crumbs a { color: rgba(255,255,255,.6); text-decoration: none; }
.km-crumbs a:hover { color: #fff; }
.km-crumbs i { font-size: .6rem; color: rgba(255,255,255,.35); }
.km-crumbs .is-current {
  padding: .15rem .55rem; border-radius: .45rem;
  border: 1px solid rgba(var(--cl-accent-rgb), .35);
  background: rgba(var(--cl-accent-rgb), .1);
  color: var(--cl-accent); font-weight: 600; font-size: .85rem;
}
.km-page-head { text-align: center; margin-bottom: 2.5rem; }
.km-page-eyebrow { margin: 0 0 .6rem; font-size: .95rem; font-weight: 600; color: var(--cl-accent); }
.km-page-head h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; color: #fff; }
.km-page-head > p { margin: .8rem 0 0; color: rgba(255,255,255,.55); font-size: 1.05rem; }
.km-reviews-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .km-reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .km-reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.km-reviews-grid .km-fb { height: 100%; animation: km-card-in .45s cubic-bezier(.2,.8,.2,1) both; }
.km-reviews-empty { text-align: center; color: rgba(255,255,255,.5); }

/* ---------- Darker site background ---------------------------------- */
body.km-body, .km-body, .uhq-body { background: #020306 !important; }
.km-bgfx-glows::before { background: radial-gradient(circle, rgba(var(--cl-accent-rgb), .09), transparent 68%); }
.km-bgfx-glows::after { background: radial-gradient(circle, rgba(2, 132, 199, .06), transparent 68%); }
.km-bgfx-dots span { opacity: .3; }
.az-hero-glow { opacity: .45 !important; }
.az-hero-bg { opacity: .7; }

/* ---------- Side cart ----------------------------------------------- */
.km-cd-overlay {
  position: fixed; inset: 0; z-index: 1070;
  background: rgba(1, 2, 5, .72);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.km-cd-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1071;
  width: min(100vw, 26.5rem);
  display: flex; flex-direction: column;
  background: #05070b;
  border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: -40px 0 80px -30px rgba(0,0,0,.9);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s linear .38s;
}
.km-cd-panel.is-open { transform: none; visibility: visible; transition: transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s; }
body:has(.km-cd-panel.is-open) .km-live-toast-wrap { display: none !important; }
.km-cd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.35rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.km-cd-head h2 { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.km-cd-head h2 span { color: rgba(255,255,255,.4); font-weight: 600; font-size: 1rem; margin-left: .25rem; }
.km-cd-close { width: 2.3rem; height: 2.3rem; border: 0; border-radius: .7rem; background: transparent; color: rgba(255,255,255,.7); font-size: 1.15rem; }
.km-cd-close:hover { background: rgba(255,255,255,.07); color: #fff; }
.km-cd-body { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; }
.km-cd-loading { display: grid; gap: .7rem; }
.km-cd-empty { text-align: center; padding: 3.5rem 1rem; }
.km-cd-empty-ico {
  width: 3.8rem; height: 3.8rem; margin: 0 auto 1.1rem;
  display: grid; place-items: center; border-radius: 1rem;
  border: 1px solid rgba(var(--cl-accent-rgb), .35);
  background: rgba(var(--cl-accent-rgb), .1); color: var(--cl-accent); font-size: 1.3rem;
}
.km-cd-empty h3 { margin: 0 0 .35rem; font-size: 1.15rem; font-weight: 700; color: #fff; }
.km-cd-empty p { margin: 0 0 1.3rem; color: rgba(255,255,255,.55); }
.km-cd-browse {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.2rem; border-radius: .8rem;
  border: 1px solid rgba(255,255,255,.12); color: #fff !important; text-decoration: none !important; font-weight: 600;
}
.km-cd-list { display: grid; gap: .7rem; }
.km-cd-item {
  position: relative;
  display: grid; grid-template-columns: 4rem minmax(0,1fr) auto; gap: .8rem; align-items: start;
  padding: .75rem; border-radius: .95rem;
  border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02);
  animation: km-card-in .3s ease both;
}
.km-cd-thumb {
  width: 4rem; height: 4rem; border-radius: .7rem; overflow: hidden;
  display: grid; place-items: center; background: rgba(var(--cl-accent-rgb), .1); color: var(--cl-accent);
}
.km-cd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.km-cd-name { display: block; font-weight: 700; font-size: .92rem; color: #fff !important; text-decoration: none !important; line-height: 1.3; }
.km-cd-variant { margin: .1rem 0 0; font-size: .78rem; color: rgba(255,255,255,.5); }
.km-cd-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .55rem; }
.km-cd-qty {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .15rem; border-radius: .6rem; border: 1px solid rgba(255,255,255,.1);
}
.km-cd-qty button { width: 1.7rem; height: 1.7rem; border: 0; border-radius: .45rem; background: rgba(255,255,255,.06); color: #fff; font-size: .6rem; }
.km-cd-qty button:disabled { opacity: .35; }
.km-cd-qty span { min-width: 1.6rem; text-align: center; font-weight: 800; font-size: .88rem; }
.km-cd-price { font-size: .98rem; font-weight: 800; color: #fff; }
.km-cd-remove { width: 1.9rem; height: 1.9rem; border: 0; border-radius: .5rem; background: transparent; color: rgba(255,255,255,.4); }
.km-cd-remove:hover { color: #fca5a5; background: rgba(239,68,68,.1); }
.km-cd-foot { padding: 1.1rem 1.3rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,.07); }
.km-cd-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .9rem; color: rgba(255,255,255,.65); }
.km-cd-total strong { font-size: 1.45rem; font-weight: 800; color: #fff; }
.km-cd-checkout {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem; border-radius: .9rem;
  background: linear-gradient(180deg, #7dd3fc, var(--cl-accent));
  color: #04121a !important; font-weight: 800; text-decoration: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 14px 34px -14px rgba(var(--cl-accent-rgb), 1);
  transition: transform .18s ease, filter .2s ease;
}
.km-cd-checkout:hover { transform: scale(1.02); filter: brightness(1.06); }
.km-cd-checkout:active { transform: scale(.97); }
.km-cd-full { display: block; margin-top: .7rem; text-align: center; font-size: .85rem; color: rgba(255,255,255,.55) !important; }

/* ---------- Custom sort dropdown ------------------------------------- */
.km-dd { position: relative; }
.km-dd-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  height: 2.6rem; padding: 0 .95rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(10,12,16,.85);
  color: #fff; font-weight: 600; font-size: .88rem;
}
.km-dd-btn > i:first-child { color: var(--cl-accent); }
.km-dd-chev { font-size: .65rem; opacity: .6; transition: transform .2s ease; }
.km-dd-btn.is-open { border-color: rgba(var(--cl-accent-rgb), .5); }
.km-dd-btn.is-open .km-dd-chev { transform: rotate(180deg); }
.km-dd-menu {
  position: absolute; top: calc(100% + .45rem); left: 0; z-index: 30;
  min-width: 13.5rem; padding: .35rem;
  border-radius: .9rem;
  border: 1px solid rgba(255,255,255,.1);
  background: #0a0d13;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.95);
}
.km-dd-from { opacity: 0; transform: translateY(-6px) scale(.98); }
.km-dd-to { opacity: 1; transform: none; }
.km-dd-opt {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; padding: .55rem .7rem;
  border: 0; border-radius: .6rem; background: transparent;
  color: rgba(255,255,255,.75); font-size: .88rem; text-align: left;
  transition: background .15s ease, color .15s ease;
}
.km-dd-opt:hover { background: rgba(255,255,255,.06); color: #fff; }
.km-dd-opt.is-active { background: rgba(var(--cl-accent-rgb), .12); color: var(--cl-accent); font-weight: 600; }
.km-dd-opt i { font-size: .75rem; }

/* ---------- Navbar: currency + login, same size ---------------------- */
.az-currency-btn,
.az-nav-actions .az-login-btn {
  height: 2.4rem !important;
  padding: 0 .95rem !important;
  align-items: center; gap: .45rem;
  border-radius: .8rem !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: .88rem !important; font-weight: 600 !important;
  line-height: 1 !important;
  transition: background .2s ease, border-color .2s ease, transform .18s ease !important;
}
.az-currency-btn:hover,
.az-nav-actions .az-login-btn:hover { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.18) !important; }
.az-currency-btn { display: inline-flex !important; }
/* Login/Account stays hidden on phones (it lives in the ☰ menu there) */
@media (min-width: 640px) { .az-nav-actions .az-login-btn { display: inline-flex !important; } }
@media (max-width: 639.98px) { .az-nav-actions .az-login-btn { display: none !important; } }
.az-currency-btn svg { opacity: .6; }
.az-nav-actions { gap: .45rem !important; align-items: center; }

/* ---------- Hero: tighter, better search + buttons ------------------ */
.az-hero-lead { margin-bottom: 1.1rem !important; }
.km-hero-search {
  max-width: 540px !important;
  margin: 0 auto 1.1rem !important;
  padding: .35rem .35rem .35rem 1.15rem !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(8,10,15,.85) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -30px rgba(0,0,0,.9) !important;
}
.km-hero-search:focus-within { border-color: rgba(var(--cl-accent-rgb), .6) !important; box-shadow: 0 0 0 4px rgba(var(--cl-accent-rgb), .12) !important; }
.km-hero-search input { font-size: .98rem !important; }
.km-hero-search button {
  padding: .7rem 1.25rem !important; border-radius: .75rem !important;
  background: linear-gradient(180deg, #7dd3fc, var(--cl-accent)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset !important;
}
.az-hero-ctas { gap: .7rem !important; margin-top: 0 !important; }
.az-hero-ctas .az-btn {
  padding: .8rem 1.35rem !important;
  border-radius: .85rem !important;
  font-size: .95rem !important; font-weight: 700 !important;
}
.az-hero-ctas .az-btn-primary {
  background: linear-gradient(180deg, #7dd3fc, var(--cl-accent)) !important;
  color: #04121a !important; border: 0 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 14px 34px -14px rgba(var(--cl-accent-rgb), 1) !important;
}
.az-hero-ctas .az-btn-ghost {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.az-trust { margin-top: 1rem !important; }

/* ---------- Product cards: no lift, gentle zoom --------------------- */
.km-pcard:hover { transform: scale(1.02) !important; }
.km-pcard:active { transform: scale(.99) !important; }
.km-marquee-track .km-pcard:hover { transform: scale(1.02) !important; }
.km-pcard-title { font-size: 1.08rem !important; font-weight: 800 !important; }
.km-pcard-price strong { font-size: 1.15rem; font-weight: 800; }
.km-pcard-badge { padding: .2rem .55rem; font-size: .72rem; border-radius: .45rem; }
.km-pcard-stockline { font-size: .9rem; }
.km-pcard-cta { padding: .75rem 1rem !important; border-radius: .8rem !important; font-size: .95rem !important; }

/* ---------- Keyframes --------------------------------------------- */
@keyframes km-shine-text { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes km-gradient-x { to { background-position: -200% 0; } }
@keyframes km-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes km-breathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes km-sweep { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@keyframes km-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes km-card-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes km-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
@keyframes km-ping { 0%, 100% { box-shadow: 0 0 0 0 currentColor, 0 0 8px currentColor; opacity: 1; } 50% { opacity: .55; } }
@keyframes km-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes km-glow { 0%, 100% { box-shadow: 0 0 24px -6px rgba(var(--cl-accent-rgb), .6); } 50% { box-shadow: 0 0 34px -2px rgba(var(--cl-accent-rgb), .95); } }
@keyframes km-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}