@font-face {
  font-family: "Akony";
  src: url("./fonts/AKONY.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DrukWideCyr";
  src: url("./fonts/drukwidecyr-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mirra";
  src: url("./fonts/Mirra.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Product cards keep original grotesk (not Druk) */
a[data-product="true"],
a[data-product="true"] .mt-3.flex,
a[data-product="true"] .mt-3.flex > p,
a[data-product="true"] .mt-3.flex > p span {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* ——— Product hover: wipe only (no red bg; snap on mouse-out) ——— */
a[data-product="true"] .relative.overflow-hidden {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  transition: none !important;
  overflow: hidden !important;
  position: relative !important;
}

a[data-product="true"]:hover .relative.overflow-hidden,
a[data-product="true"].is-hover .relative.overflow-hidden,
a[data-product="true"].group:hover .relative.overflow-hidden {
  background: #ffffff !important;
}

/* Kill Tailwind / stream red-bg hover leftovers */
a[data-product="true"] .relative.overflow-hidden.bg-red,
a[data-product="true"]:hover .relative.overflow-hidden,
a[data-product="true"].group:hover .relative.overflow-hidden {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Skeleton / placeholder that covers the wipe — kill it */
a[data-product="true"] .relative.overflow-hidden > div.absolute.inset-0 {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

a[data-product="true"] img[data-image="front"] {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: auto !important;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

a[data-product="true"] img[data-image="back"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 3 !important;
  pointer-events: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: scale(1.06) !important;
  filter: brightness(180%) contrast(120%) !important;
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%) !important;
  /* Snap closed on mouse-out */
  transition: none !important;
  transition-delay: 0s !important;
}

a[data-product="true"]:hover img[data-image="back"],
a[data-product="true"].is-hover img[data-image="back"],
a[data-product="true"].group:hover img[data-image="back"] {
  transform: scale(1) !important;
  filter: brightness(100%) contrast(100%) !important;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
  transition:
    clip-path 0.52s cubic-bezier(0.22, 0.03, 0.26, 1),
    filter 0.52s cubic-bezier(0.22, 0.03, 0.26, 1),
    transform 0.52s cubic-bezier(0.22, 0.03, 0.26, 1) !important;
  transition-delay: 0s !important;
}

a[data-product="true"].custom-product-empty .relative.overflow-hidden {
  background: #ffffff !important;
}

a[data-product="true"].custom-product-empty img[data-image] {
  display: none !important;
}

.custom-photo-num {
  display: none !important;
}

/* ——— Hero / header brand ——— */
.hero-spb-wrap {
  display: block !important;
  width: 100% !important;
  margin: 0 0 1.5rem !important;
  overflow: visible !important;
  position: relative !important;
}

.hero-spb-mark {
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.08em 0.04em 0.12em 0 !important;
  line-height: 0.82 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  color: inherit !important;
  text-transform: uppercase !important;
  font-size: clamp(2rem, 12vw, 9rem);
}

.hero-spb-mark .hero-spb-base {
  font-family: "DrukWideCyr", Impact, sans-serif !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

.hero-spb-mark .hero-spb-akony,
#hero-title .hero-spb-akony {
  font-family: "Akony", Impact, sans-serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-left: 0.02em;
}

/* Hide leftover SVG stretch version if present */
.hero-spb-svg {
  display: none !important;
}

#hero-title {
  font-family: "DrukWideCyr", Impact, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0;
}

/* Hero meta under the line */
.spb-hero-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(1.25rem, 4vw, 3rem);
  row-gap: clamp(0.65rem, 2vw, 1rem);
  align-items: start;
  width: 100%;
  max-width: 100%;
}

.spb-hero-meta__top {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.spb-hero-meta__note {
  grid-column: 1;
  grid-row: 2;
}

.spb-hero-meta__copy {
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
  max-width: 42ch;
  padding-top: clamp(0.35rem, 1.5vw, 0.75rem);
}

.spb-hero-meta__kicker {
  margin: 0;
}

.spb-hero-meta__year {
  margin: 0;
  white-space: nowrap;
}

.spb-hero-meta__mobile-note {
  display: none !important;
}

@media (min-width: 768px) {
  .spb-hero-meta {
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 12rem);
    grid-template-rows: auto auto auto;
  }

  .spb-hero-meta__top {
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    width: auto;
  }

  .spb-hero-meta__note {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    text-align: right;
  }

  .spb-hero-meta__copy {
    grid-column: 1;
    grid-row: 1 / 4;
    max-width: min(42ch, 72%);
    padding-top: 0;
  }
}

/* Hero info block — Druk everywhere except digit 4 */
#hero-content,
#hero-content a,
#hero-content p,
#hero-content h1,
#hero-content h2,
#hero-subtitle,
#hero-paragraph,
#hero-link,
#hero-shipping-returns-link,
#hero-shipping-returns-link-mobile,
#hero-copyright {
  font-family: "DrukWideCyr", Impact, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

#hero-paragraph {
  font-size: clamp(0.85rem, 1.35vw, 1.05rem) !important;
  line-height: 1.35 !important;
  max-width: 42ch;
}

#hero-content .hero-spb-akony {
  font-family: "Akony", Impact, sans-serif !important;
  font-weight: 400 !important;
}

/* ——— Header ——— */
.spb-header,
#header.spb-header {
  pointer-events: none;
}

.spb-header-bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 1.75rem 1rem 1rem;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .spb-header-bar {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.spb-header-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.spb-header-link {
  font-family: "DrukWideCyr", Impact, sans-serif !important;
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: inherit;
  line-height: 1;
}

.spb-header-link:hover {
  opacity: 0.7;
}

.spb-cart-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.spb-header-logo {
  display: none !important;
}

.spb-header-logo .header-akony-4,
#header .header-akony-4 {
  display: none !important;
}

/* Closing band — 04 + copy, left side */
.spb-closing-band {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: clamp(1.25rem, 4vw, 3.5rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: clamp(2.5rem, 6vh, 4.5rem) 1rem clamp(1.75rem, 4vh, 3rem) !important;
  color: inherit !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  min-width: 0 !important;
}

@media (min-width: 1024px) {
  .spb-closing-band {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

.spb-closing-num {
  margin: 0 !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  line-height: 0.85 !important;
}

.spb-closing-num-akony {
  font-family: "Akony", Impact, sans-serif !important;
  font-size: clamp(3.25rem, 12vw, 8rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.85 !important;
  display: block !important;
}

.spb-closing-copy {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  width: max-content !important;
  max-width: min(100%, 28rem) !important;
  text-align: left !important;
  overflow: visible !important;
  padding: 0 !important;
}

.spb-closing-line {
  margin: 0 !important;
  font-family: "DrukWideCyr", Impact, sans-serif !important;
  font-size: clamp(1.35rem, 3.2vw, 2.65rem) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: inherit !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-transform: none !important;
}

.spb-closing-line--muted {
  font-size: clamp(1.15rem, 2.6vw, 2.15rem) !important;
  font-weight: 700 !important;
  color: #5a5a5a !important;
}

html[data-theme="red"] .spb-closing-line--muted,
:root[data-theme="red"] .spb-closing-line--muted {
  color: inherit !important;
  opacity: 0.45;
}

@media (max-width: 640px) {
  .spb-closing-band {
    flex-direction: column !important;
    gap: 1rem !important;
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
  }

  .spb-closing-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  .spb-closing-line {
    font-size: clamp(1.2rem, 5.5vw, 1.85rem) !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .spb-closing-line--muted {
    font-size: clamp(1.05rem, 4.8vw, 1.55rem) !important;
  }
}

/* Price: keep ₽ on same line even in narrow cards */
a[data-product="true"] .mt-3.flex {
  gap: 0.75rem !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
}

a[data-product="true"] .mt-3.flex > p:last-child,
a[data-product="true"] .spb-card-price,
a[data-product="true"] .mt-3.flex > p:last-child span,
a[data-product="true"] .spb-card-price span,
a[data-product="true"] .spb-card-price-val {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  max-width: none !important;
  word-break: keep-all !important;
}

a[data-product="true"] .mt-3.flex > p:first-child {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  padding-right: 0.5rem !important;
  overflow-wrap: anywhere;
}

/* Hide broken original Bag / menu chrome if stream re-injects it */
#header number-flow-react,
#header .md\:hidden button {
  display: none !important;
}

#theme-switcher,
#theme-switcher.spb-theme-under-maket,
.spb-theme-under-maket {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: 0 !important;
  display: block !important;
  width: max-content !important;
  margin: 0.85rem 0 0 !important;
  z-index: 6 !important;
  pointer-events: auto !important;
  /* Sit under the word «МАКЕТ» (start of the mark) */
  transform: none !important;
}

.spb-theme-dots {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
}

.spb-theme-dot {
  width: 1.85rem !important;
  height: 1.85rem !important;
  border-radius: 999px !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: inset 0 0 0 0.08em rgba(0, 0, 0, 0.85) !important;
}

.spb-theme-dot--dark {
  background: #000 !important;
}

.spb-theme-dot--light {
  background: #f5f0e8 !important;
}

.spb-theme-dot--red {
  background: #ff0001 !important;
  box-shadow: inset 0 0 0 0.08em #ff0001 !important;
}

.spb-theme-dot.is-active {
  box-shadow:
    inset 0 0 0 0.08em rgba(0, 0, 0, 0.85),
    0 0 0 0.18rem currentColor !important;
}

.spb-theme-dot--red.is-active {
  box-shadow:
    inset 0 0 0 0.08em #ff0001,
    0 0 0 0.18rem currentColor !important;
}

@media (min-width: 768px) {
  .spb-theme-dot {
    width: 2.15rem !important;
    height: 2.15rem !important;
  }
}

/* Hide leftover fixed theme chrome if stream re-injects a second one */
body > #theme-switcher.fixed,
#theme-switcher.fixed.top-\[2\.56rem\],
div.fixed#theme-switcher {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Orphan cream/red circles leftover from broken dump next to header */
#header + .rounded-full,
#header ~ .rounded-full.bg-cream,
#header ~ .rounded-full.bg-red,
.spb-header + .rounded-full,
body > .rounded-full.bg-cream,
body > .rounded-full.bg-red,
div.inline-block.rounded-full.bg-cream.h-\[1\.125rem\],
div.inline-block.rounded-full.bg-red.h-\[1\.125rem\] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* Kill ALL horizontal scroll */
html,
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative;
}

html {
  overflow-x: hidden !important;
}

#page,
main:not(.pdp),
footer.spb4-footer,
.spb4-footer__inner {
  max-width: 100% !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body[data-page="product"] #theme-switcher {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.spb-closing-band {
  max-width: 100% !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

.spb4-footer__corner-wrap,
.spb4-footer__brand-row,
.spb4-footer__brand-area {
  max-width: 100% !important;
  overflow: visible !important;
}

.spb4-footer__corner-wordmark-text {
  max-width: 100% !important;
  overflow: visible !important;
  line-height: 0.95 !important;
  padding-top: 0.08em !important;
}

@media (max-width: 900px) {
  .spb4-footer__corner-wordmark {
    display: inline-block !important;
  }

  .spb4-footer__brand-area,
  .spb4-footer__brand-row .spb4-footer__model,
  .spb4-footer__model-viewer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* ——— Footer follows page theme ——— */
/* dark (default): black / white — base styles in spb4-footer.css */

html[data-theme="light"] footer.spb4-footer,
html.light footer.spb4-footer {
  background: #ede4dd !important;
  color: #0a0a0a !important;
  border-top-color: rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="red"] footer.spb4-footer,
html.red footer.spb4-footer {
  background: #ffffff !important;
  color: #ff0001 !important;
  border-top-color: rgba(255, 0, 1, 0.22) !important;
}

/* Red theme: white page ground (override cream) */
html[data-theme="red"],
html.red {
  background: #ffffff !important;
}

html[data-theme="red"] body,
html.red body,
html[data-theme="red"] body.bg-cream,
html.red body.bg-cream {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

html[data-theme="dark"] footer.spb4-footer,
html.dark footer.spb4-footer {
  background: #000000 !important;
  color: #ffffff !important;
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}

/* Light theme — dark ink */
html[data-theme="light"] .spb4-footer__lead,
html[data-theme="light"] .spb4-footer__contact-line,
html[data-theme="light"] .spb4-footer__editorial-lead,
html[data-theme="light"] .spb4-footer__stack-link,
html[data-theme="light"] .spb4-footer__corner-wordmark-text,
html[data-theme="light"] .spb4-footer__mobile-wordmark-text,
html[data-theme="light"] .spb4-footer__corner-preview-title,
html[data-theme="light"] .spb4-footer__uptime-line .spb4-footer__uptime-value,
html[data-theme="light"] .spb4-footer .hud-header__time-main,
html[data-theme="light"] .spb4-footer .hud-header__time-code,
html.light .spb4-footer__lead,
html.light .spb4-footer__contact-line,
html.light .spb4-footer__editorial-lead,
html.light .spb4-footer__stack-link,
html.light .spb4-footer__corner-wordmark-text,
html.light .spb4-footer__mobile-wordmark-text,
html.light .spb4-footer__corner-preview-title,
html.light .spb4-footer__uptime-line .spb4-footer__uptime-value,
html.light .spb4-footer .hud-header__time-main,
html.light .spb4-footer .hud-header__time-code {
  color: #0a0a0a !important;
}

html[data-theme="light"] .spb4-footer__contact-line,
html.light .spb4-footer__contact-line {
  border-bottom-color: rgba(10, 10, 10, 0.75) !important;
}

html[data-theme="light"] .spb4-footer__corner-kicker,
html[data-theme="light"] .spb4-footer__corner-preview-sub,
html[data-theme="light"] .spb4-footer__copyright-line,
html[data-theme="light"] .spb4-footer__uptime-suffix,
html[data-theme="light"] .spb4-footer__editorial-coords,
html[data-theme="light"] .spb4-footer .hud-header__time-caption,
html[data-theme="light"] .spb4-footer__uptime-line,
html.light .spb4-footer__corner-kicker,
html.light .spb4-footer__corner-preview-sub,
html.light .spb4-footer__copyright-line,
html.light .spb4-footer__uptime-suffix,
html.light .spb4-footer__editorial-coords,
html.light .spb4-footer .hud-header__time-caption,
html.light .spb4-footer__uptime-line {
  color: rgba(10, 10, 10, 0.55) !important;
}

html[data-theme="light"] .spb4-footer__mid-col--stack,
html.light .spb4-footer__mid-col--stack {
  border-left-color: rgba(10, 10, 10, 0.12) !important;
  border-top-color: rgba(10, 10, 10, 0.12) !important;
}

html[data-theme="light"] .spb4-footer__corner-preview-img,
html.light .spb4-footer__corner-preview-img {
  border-color: rgba(10, 10, 10, 0.14) !important;
}

/* Red theme — cream ground, red ink */
html[data-theme="red"] .spb4-footer__lead,
html[data-theme="red"] .spb4-footer__contact-line,
html[data-theme="red"] .spb4-footer__editorial-lead,
html[data-theme="red"] .spb4-footer__stack-link,
html[data-theme="red"] .spb4-footer__corner-wordmark-text,
html[data-theme="red"] .spb4-footer__mobile-wordmark-text,
html[data-theme="red"] .spb4-footer__corner-preview-title,
html[data-theme="red"] .spb4-footer__uptime-line .spb4-footer__uptime-value,
html[data-theme="red"] .spb4-footer .hud-header__time-main,
html[data-theme="red"] .spb4-footer .hud-header__time-code,
html.red .spb4-footer__lead,
html.red .spb4-footer__contact-line,
html.red .spb4-footer__editorial-lead,
html.red .spb4-footer__stack-link,
html.red .spb4-footer__corner-wordmark-text,
html.red .spb4-footer__mobile-wordmark-text,
html.red .spb4-footer__corner-preview-title,
html.red .spb4-footer__uptime-line .spb4-footer__uptime-value,
html.red .spb4-footer .hud-header__time-main,
html.red .spb4-footer .hud-header__time-code {
  color: #ff0001 !important;
}

html[data-theme="red"] .spb4-footer__contact-line,
html.red .spb4-footer__contact-line {
  border-bottom-color: rgba(255, 0, 1, 0.75) !important;
}

html[data-theme="red"] .spb4-footer__corner-kicker,
html[data-theme="red"] .spb4-footer__corner-preview-sub,
html[data-theme="red"] .spb4-footer__copyright-line,
html[data-theme="red"] .spb4-footer__uptime-suffix,
html[data-theme="red"] .spb4-footer__editorial-coords,
html[data-theme="red"] .spb4-footer .hud-header__time-caption,
html[data-theme="red"] .spb4-footer__uptime-line,
html.red .spb4-footer__corner-kicker,
html.red .spb4-footer__corner-preview-sub,
html.red .spb4-footer__copyright-line,
html.red .spb4-footer__uptime-suffix,
html.red .spb4-footer__editorial-coords,
html.red .spb4-footer .hud-header__time-caption,
html.red .spb4-footer__uptime-line {
  color: rgba(255, 0, 1, 0.55) !important;
}

html[data-theme="red"] .spb4-footer__mid-col--stack,
html.red .spb4-footer__mid-col--stack {
  border-left-color: rgba(255, 0, 1, 0.18) !important;
  border-top-color: rgba(255, 0, 1, 0.18) !important;
}

html[data-theme="red"] .spb4-footer__corner-preview-img,
html.red .spb4-footer__corner-preview-img {
  border-color: rgba(255, 0, 1, 0.22) !important;
}

/* Closing band inherits page color; muted stays muted except red theme */
html[data-theme="red"] .spb-closing-line--muted,
html.red .spb-closing-line--muted {
  color: inherit !important;
  opacity: 0.45;
}

html[data-theme="light"] .spb-closing-line--muted,
html.light .spb-closing-line--muted {
  color: #5a5a5a !important;
  opacity: 1;
}

/* Menu drawer brand (not main page footer) */
.menu-footer .spb-footer-brand {
  font-family: "DrukWideCyr", Impact, sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  color: inherit;
}

.menu-footer .header-akony-4 {
  font-family: "Akony", Impact, sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.15em !important;
  line-height: 1 !important;
  display: inline !important;
}

/* Main footer is B4Flow .spb4-footer — keep Inter/Mirra/mono */
footer.spb4-footer {
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
}

#layer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ——— Scrollbar (brand red by default) ——— */
html {
  scrollbar-width: thin;
  scrollbar-color: #ff0001 rgba(0, 0, 0, 0.07);
}

html::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

html::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

html::-webkit-scrollbar-thumb {
  background-color: #ff0001;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover {
  background-color: #d90001;
}

html[data-theme="red"],
html.red {
  scrollbar-color: #ff0001 rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"],
html.dark {
  scrollbar-color: #ffffff rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"]::-webkit-scrollbar-track,
html.dark::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"]::-webkit-scrollbar-thumb,
html.dark::-webkit-scrollbar-thumb {
  background-color: #ffffff;
}

html[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
html.dark::-webkit-scrollbar-thumb:hover {
  background-color: #e8e8e8;
}

html[data-theme="light"],
html.light {
  scrollbar-color: #171717 rgba(0, 0, 0, 0.08);
}

html[data-theme="light"]::-webkit-scrollbar-thumb,
html.light::-webkit-scrollbar-thumb {
  background-color: #171717;
}

html[data-theme="light"]::-webkit-scrollbar-thumb:hover,
html.light::-webkit-scrollbar-thumb:hover {
  background-color: #000000;
}