/* Generic */
body {
  min-height: 100vh;
}

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

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar { 
  display: none;
}

.px-32 {
  padding-left: 8rem;
  padding-right: 8rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-5-nav {
  padding-top: calc(74px + 1.5rem);
  padding-bottom: 1.5rem;
}

.bg-gray {
  background: var(--bs-gray-bg);
}

.bg-image {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  pointer-events: none;
}

/* Override Bootstrap colors */
:root {
  --bs-primary: var(--cl-accent);
  --bs-primary-rgb: var(--cl-accent-rgb);
  --bs-link-color: var(--cl-accent);
  --bs-body-bg: var(--cl-background-primary);
  --bs-body-bg-rgb: var(--cl-background-primary-rgb);
  --bs-gray-bg: var(--cl-background-secondary);
  --bs-gray-bg-rgb: var(--cl-background-secondary-rgb);
  --bs-border-color: var(--cl-border);
  --bs-border-color-rgb: var(--cl-border-rgb);
  --bs-border-radius: 0.5rem;
}

.bg-primary-dark {
  background-color: var(--cl-accent);
}

.form-check-input {
  --bs-form-check-bg: var(--bs-gray-bg);
}

.form-check-input:checked,
form-check-input[type=checkbox]:indeterminate {
  background-color: var(--cl-accent);
  border-color: var(--cl-accent);
}

.form-range::-webkit-slider-thumb,
.form-range::-moz-range-thumb {
  background-color: var(--cl-accent);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-range:focus::-webkit-slider-thumb,
.form-range:focus::-moz-range-thumb,
.nav-link:focus-visible {
  border-color: var(--cl-accent);
  box-shadow: 0 0 0 0.25rem rgba(var(--cl-accent-rgb), .25);
}

.form-control:disabled,
.form-select:disabled {
  background-color: initial;
}

.form-control,
.form-select {
  background-color: var(--bs-gray-bg);
}

.btn-primary:hover {
  background-color: var(--cl-accent);
  border-color: var(--cl-accent);
}

.btn-primary {
  --bs-btn-bg: var(--cl-accent);
  --bs-btn-border-color: var(--cl-accent);
  --bs-btn-disabled-bg: var(--cl-accent);
  --bs-btn-disabled-border-color: var(--cl-accent);
  --bs-btn-hover-bg: var(--cl-accent);
  --bs-btn-hover-border-color: var(--cl-accent);
  --bs-btn-active-bg: var(--cl-accent);
  --bs-btn-active-border-color: var(--cl-accent);
}

.btn-outline-primary {
  --bs-btn-color: var(--cl-accent);
  --bs-btn-border-color: var(--cl-accent);
  --bs-btn-hover-bg: var(--cl-accent);
  --bs-btn-active-bg: var(--cl-accent);
  --bs-btn-active-border-color: var(--cl-accent);
  --bs-btn-disabled-color: var(--cl-accent);
  --bs-btn-disabled-border-color: var(--cl-accent);
}

.dropdown-menu,
.dropdown-menu-dark {
  --bs-dropdown-link-active-bg: var(--cl-accent);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--cl-accent);
}

.pagination {
  --bs-pagination-active-bg: var(--cl-accent);
  --bs-pagination-active-border-color: var(--cl-accent);
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--cl-accent);
}

.list-group {
  --bs-list-group-active-bg: var(--cl-accent);
  --bs-list-group-active-border-color: var(--cl-accent);
}

/* Navbar */
.navbar {
  background: var(--bs-body-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  /* border-bottom: 1px solid var(--bs-gray-bg); */
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1020;
  background: transparent;
}

.navbar-overlay {
  background: transparent;
  border-bottom-color: transparent;
}

.navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem 0 0;
  border-right: 0;
}

.navbar .navbar-brand img {
  max-height: 3rem;
}

.navbar .navbar-collapse {
  justify-content: flex-end;
}

.navbar .navbar-toggler,
.navbar .navbar-toggler:focus {
  border: 0;
  box-shadow: none;
}

.navbar .navbar-toggler .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.navbar .navbar-toggler:focus .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.navbar .nav-item a.nav-link.active {
  color: var(--cl-accent);
}

.navbar .user .btn,
.navbar .cart .btn {
  position: relative;
  --bs-btn-padding-x: 0.5625rem;
}

.navbar .user .btn:not(.btn-outline-primary) .icon,
.navbar .cart .btn:not(.btn-outline-primary) .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.navbar .user .btn.btn-outline-primary .icon,
.navbar .cart .btn.btn-outline-primary .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.navbar .cart .btn .count {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--cl-accent);
  color: #ffffff;
  font-size: 0.625rem;
  border-radius: 100%;
}

@media screen and (min-width: 992px) {
  .navbar .navbar-collapse .navbar-nav {
    gap: 1.5rem;
  }
}

:root,
html,
body {
  scroll-behavior: auto !important;
}

html.sr-wait #app > div:first-child > :not(header) {
  opacity: 0 !important;
}

/* Footer */
footer.footer {
  background: var(--bs-gray-bg);
}

.footer .logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.footer .logo img {
  max-height: 3rem;
}

.footer .logo p {
  margin-bottom: 0;
}

.footer h5 {
  text-transform: uppercase;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.footer .nav li a {
  padding: 0;
  color: var(--bs-secondary-color);
}

.footer .nav li a:hover {
  color: var(--cl-accent);
}

/* Remove number input arrows. */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield !important;
}

/* Push footer to bottom */
.flex-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Generic title. */
.section-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 2rem 0;
}

.section-title h1,
.section-title h2 {
  padding-bottom: 0.1em;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.section-title h1 {
  font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3rem) !important;
  line-height: 1.1;
}

.section-title h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.375rem) !important;
  line-height: 1.15;
}

.section-title h1,
.section-title h2,
.section-title p {
  margin-bottom: 0;
}

.section-title p {
  font-size: 0.875rem;
  color: var(--text-body);
}

@media (min-width: 768px) {
  .section-title p {
    padding-left: 1.5rem;
    border-left: 1px solid var(--bs-border-color);
  }
}

.section-subtitle {
  display: flex;
  align-items: center;
  margin: -1rem 0 2rem 0;
}

.section-subtitle p {
  max-width: 540px;
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-body);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .section-subtitle p {
    font-size: 1.0625rem;
  }
}

/* Announcement */
.announcement {
  padding: 0.5rem 0;
  text-align: center;
  background: var(--cl-accent);
  color: #ffffff;
  border-bottom: 1px solid var(--bs-border-color);
}

.announcement a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
}

.announcement a svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Homepage hero. */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero .hero-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  opacity: 0.2;
  pointer-events: none;
}

.hero .bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(var(--cl-background-primary-rgb, 12, 12, 14), 0) 0%, rgba(var(--cl-background-primary-rgb, 12, 12, 14), 0) 40%, rgb(var(--cl-background-primary-rgb, 12, 12, 14)) 100%);
  pointer-events: none;
}

.hero .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 7rem 2rem 4rem;
  z-index: 1;
}

.hero .content {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
  border-radius: var(--bs-border-radius);
}

.hero .content .rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  margin-bottom: 1.5rem;
  background: rgba(34, 197, 94, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 999px;
}

.hero .content .rating-badge .badge-icon {
  width: 0.8125rem;
  height: 0.8125rem;
  flex-shrink: 0;
  color: rgba(34, 197, 94, 1);
}

.hero .content .rating-badge .rating-value {
  color: rgba(34, 197, 94, 1);
  font-weight: 600;
  font-size: 0.75rem;
}

.hero .content .rating-badge .rating-text {
  color: rgba(34, 197, 94, 1);
  font-size: 0.75rem;
}

.hero .content h1 {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: clamp(2.75rem, 1.5rem + 4.2vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
  margin-bottom: 1.5rem;
}

.hero .content p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  color: var(--text-body);
  text-wrap: pretty;
}

.hero .content a {
  margin-bottom: 2.5rem;
}

.hero .content .stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 30rem;
  padding: 0.5rem;
  margin: 0 auto;
  background: var(--bs-gray-bg);
  border-radius: var(--bs-border-radius);
}

.hero .content .stats div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero .content .stats div .value {
  font-weight: 600;
  font-size: 1rem;
}

.hero .content .stats div .value svg {
  width: 1rem;
  height: 1rem;
  vertical-align: -0.125rem;
}

.hero .content .stats div .label {
  font-size: 0.7rem;
  color: var(--text-body);
}

.hero .search-modal {
  --bs-modal-width: 700px;
}

.hero .fake-searchbar {
  margin: 0 auto 2rem auto;
}

.hero .fake-searchbar,
.hero .search-modal .searchbar {
  width: 100%;
  position: relative;
}

.hero .fake-searchbar input,
.hero .search-modal .searchbar input {
  background: var(--bs-gray-bg);
  padding: 1rem 2rem 1rem 4rem;
}

.hero .fake-searchbar svg,
.hero .search-modal .searchbar svg {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 1rem;
  fill: var(--text-body);
}

.hero .search-modal .products {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero .search-modal .product {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: initial;
  color: initial;
}

.hero .search-modal .product .left {
  flex: 1;
  display: flex;
  gap: 1rem;
}

.hero .search-modal .product .image {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  max-height: 96px;
  background: var(--bs-gray-bg);
  border-radius: var(--bs-border-radius);
}

.hero .search-modal .product .image img {
  border-radius: var(--bs-border-radius);
}

.hero .search-modal .product .image .product-img-placeholder svg {
  width: 48px;
  height: 48px;
}

.hero .search-modal .product .image .badges {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hero .search-modal .product .image .badges div {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--cl-accent);
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 500;
  padding: 0.125rem 0.25rem;
  border-radius: 0.125rem;
}

.hero .search-modal .product .text {
  flex: 1;
  color: #ffffff;
}

.hero .search-modal .product h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.hero .search-modal .product p {
  font-size: 0.875rem;
  margin-bottom: 0;
}

.hero .search-modal .product .right {
  display: none;
}

@media (min-width: 468px) {
  .hero .content .stats {
    display: inline-flex;
    gap: 1.5rem;
    padding: 1rem;
  }

  .hero.alignment-left .content .stats {
    justify-content: flex-start;
  }
  
  .hero.alignment-right .content .stats {
    justify-content: flex-end;
  }

  .hero .content .stats div .value {
    font-size: 1.25rem;
  }

  .hero .content .stats div .value svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .hero .content .stats div .label {
    font-size: 0.75rem;
  }

  .hero .search-modal .product .left .stock {
    display: none;
  }

  .hero .search-modal .product .right {
    display: block;
  }
}

@media (min-width: 768px) {
  .hero {
    min-height: 100vh;
  }

  .hero.height-short {
    min-height: 50vh;
  }

  .hero.height-medium {
    min-height: 85vh;
  }

  .hero .container {
    padding: 8rem 2rem 6rem;
  }

  .hero .content {
    min-width: 60%;
  }

  .hero .fake-searchbar {
    max-width: 600px;
  }

  .hero.alignment-left .container,
  .hero.alignment-right .container {
    flex-direction: row;
    justify-content: space-between;
  }

  .hero.alignment-left .content,
  .hero.alignment-right .content {
    margin: 0;
    padding: 0;
  }

  .hero.alignment-left .content {
    text-align: left;
  }

  .hero.alignment-right .content {
    text-align: right;
    order: 1;
  }

  .hero.alignment-left .fake-searchbar {
    margin-left: 0;
    margin-right: 0;
  }

  .hero.alignment-right .fake-searchbar {
    margin-left: auto;
    margin-right: 0;
  }
}

/* Homepage socials. */
.socials {
  background: var(--bs-gray-bg);
  padding: 5rem 0;
}

.socials .list .social {
  display: flex;
  justify-content: space-between;
  background: var(--bs-body-bg);
  padding: 1rem;
  margin-bottom: var(--bs-gutter-x);
  border-radius: var(--bs-border-radius);
  text-decoration: none;
  color: #ffffff;
}

.socials .list .social .left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.socials .list .social .left svg {
  display: inline-flex;
  padding: 0.5rem;
  aspect-ratio: 1;
  border-radius: 100%;
  background-color: var(--cl-accent);
  color: #ffffff;
}

.socials .list .social .right svg {
  width: 1.5rem;
  height: 1.5rem;
}

.socials .list .social:hover {
  color: var(--cl-accent);
}

@media (min-width: 992px) {
  .socials .list .social {
    margin-bottom: 0;
  }
}

/* Homepage CTA, text + image. */
.cta-text-image {
  display: flex;
  flex-direction: column;
  background: var(--bs-gray-bg);
}

.cta-text-image .content {
  padding: 5rem 2rem;
}

.cta-text-image .content .subtitle {
  color: var(--cl-accent);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.cta-text-image .content .title {
  font-size: 3rem;
  margin-bottom: 2rem;
}

.cta-text-image .content .description {
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

.cta-text-image .image {
  background-repeat: no-repeat, no-repeat;
  background-position: top;
  background-size: cover;
  width: 100%;
  height: 100%;
  min-height: 300px;
}

@media (min-width: 768px) {
  .cta-text-image {
    flex-direction: row;
  }

  .cta-text-image .content {
    padding: 5rem 8rem;
  }
}

/* Homepage CTA, text only. */
.cta-text-center {
  background: #0c0c0c;
  text-align: center;
}

.cta-text-center .content {
  padding: 5rem 2rem;
}

.cta-text-center .content .subtitle {
  color: var(--cl-accent);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.cta-text-center .content .title {
  font-size: 2rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .cta-text-center .content {
    padding: 6rem 0;
  }
}

/* Homepage products */
.chips {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.chips .btn {
  border-radius: var(--bs-border-radius-xxl);
}

.products .card {
  position: relative;
  background: none;
  border: none;
  transition: all .3s ease;
  background: var(--bs-body-bg);
}

.products .card:hover {
  transform: translateY(-4px);
}

.products .card .card-img-top {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: var(--bs-gray-bg);
}

.products .card .card-img-top img,
.products .card .card-img-top svg {
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}

.products .card .card-img-top .overlay {
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  padding: 1rem;
  text-align: center;
  opacity: 0;
  transition: all .3s ease;
}

.products .card .card-img-top .overlay .btn:hover {
  background-color: var(--cl-accent);
  border-color: var(--bs-btn-border-color);
}

.products .card .card-img-top .overlay .btn {
  width: 100%;
}

.products .card:hover .card-img-top .overlay {
  opacity: 1;
  bottom: 0;
}

.products .card .card-img-top .badges {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.products .card .card-img-top .badges div {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--cl-accent);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.product-img-placeholder svg {
  width: 96px;
  height: 96px;
}

.product-img-placeholder svg.large {
  width: 256px;
  height: 256px;
}

.products .card .info {
  display: flex;
  justify-content: space-between;
  color: var(--text-soft);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.products .card .info p {
  margin-bottom: 0;
}

.products .card .info .price {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.products .card .card-title {
  font-size: 1.125rem;
  margin-bottom: 0rem;
}

.stock-indicator {
  pointer-events: none;
}

.stock-unlimited {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.stock-unlimited svg {
  width: 1rem;
  height: 1rem;
}

/* Product card: name + price on top, buy button below. */
.products .card.m6pc3 {
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px;
  background: var(--surface);
  transition: border-color 0.3s ease;
}

.products .card.m6pc3:hover {
  transform: none;
  border-color: rgba(var(--cl-accent-rgb), 0.22) !important;
}

.m6pc3 .card-img-top {
  background: var(--surface-raised);
}

.m6pc3 .card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.125rem 1.125rem;
}

.p6tk1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.m6pc3 .p6tk1 .card-title {
  display: -webkit-box;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--text-strong);
}

.m6pc3 .p6tk1 .price {
  flex: 0 0 auto;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-strong);
}

.m6pc3 .p6tk1 .price s {
  margin-right: 0.375rem;
  font-weight: 400;
  color: var(--text-muted);
}

.b2qn7 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-top: auto;
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-strong);
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.m6pc3:hover .b2qn7 {
  background: var(--cl-accent);
  box-shadow: none;
  color: var(--on-accent);
}

.b2qn7.is-out,
.m6pc3:hover .b2qn7.is-out {
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

/* Homepage features. */
.features .list .feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  margin-bottom: var(--bs-gutter-x);
  border-radius: var(--bs-border-radius);
  background: var(--bs-gray-bg);
}

.features .list .feature i {
  font-size: 4rem;
  margin-bottom: 2rem;
  color: var(--cl-accent);
}

.features .list .feature svg {
  width: 64px;
  height: 64px;
  margin-bottom: 2rem;
  color: var(--cl-accent);
}

.features .list .feature .title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.features .list .feature .description {
  padding: 0 2rem;
  font-size: 0.875rem;
  color: var(--text-body);
}

/* Single product. */
.product-wrapper {
  min-height: calc(100vh - 257px); /* 257px is footer */
}

.product-wrapper .carousel img {
  border-radius: var(--bs-border-radius);
}

.product-wrapper .thumbnails {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.product-wrapper .thumbnails button {
  border: 0;
  padding: 0;
  background: none;
  border-radius: var(--bs-border-radius);
  transition: all .3s ease;
}

.product-wrapper .thumbnails button:not(.active) {
  opacity: 0.5;
}

.product-wrapper .thumbnails button img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.product-wrapper .badges {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.product-wrapper .badges div,
.product-wrapper .badges a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--cl-accent);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 0.125rem;
  text-decoration: none;
}

.product-tabs .editor p {
  margin-bottom: 0;
}

.product-wrapper .buy-buttons .btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.input-group-btn svg {
  width: 24px;
  height: 24px;
}

.variants {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.variants .variant {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  position: relative;
  padding: 0.375rem 0.775rem 0.375rem 0.375rem;
  background: var(--bs-gray-bg);
  border-radius: var(--bs-border-radius);
  border: var(--bs-border-width) solid var(--bs-border-color);
}

.variants .variant.active {
  color: var(--bs-body-color);
  background-color: var(--bs-gray-bg);
  border-color: var(--bs-btn-border-color);
  outline: 0;
}

.variants .variant {
  padding: 0.5rem 0.75rem;
}

.variants .variant .name-stock {
  text-align: left;
  flex-grow: 1;
}

.variants .variant .variant-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.variants .variant .name,
.variants .variant .stock {
  margin-bottom: 0;
}

.variants .variant .description {
  font-size: 0.875rem;
  color: var(--text-body);
  white-space: pre-line;
}

.variants .variant .stock {
  font-size: 0.75rem;
}

.variants .variant .price {
  padding: 0.25rem 0.5rem;
  border-radius: var(--bs-border-radius);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-body);
  font-weight: 500;
}

.variants .variant .active-indicator {
  position: absolute;
  top: -12px;
  right: -4px;
  z-index: 1;
  background: var(--bs-gray-bg);
  border-radius: 50%;
}

.variants .variant .active-indicator svg {
  width: 24px;
  height: 24px;
}

.addon-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.addon-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.addon-image {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-addon-add {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  border-color: rgba(var(--bs-primary-rgb), 0.2);
  color: var(--bs-primary);
  min-width: 112px;
}

.btn-addon-add:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.2);
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

.btn-addon-remove {
  background-color: rgba(var(--bs-danger-rgb), 0.1);
  border-color: rgba(var(--bs-danger-rgb), 0.2);
  color: var(--bs-danger);
  min-width: 112px;
}

.btn-addon-remove:hover {
  background-color: rgba(var(--bs-danger-rgb), 0.2);
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}

.live-stats svg {
  width: 1.25rem;
  height: 1.25rem;
}

.live-stats p {
  margin-bottom: 0;
  flex: 1;
}

/* Testimonials */
.testimonials .col-12 {
  margin-bottom: var(--bs-gutter-x);
}

.testimonial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  border-radius: var(--bs-border-radius);
  background: var(--bs-gray-bg);
  margin-bottom: var(--bs-gutter-x);
}

.testimonial .header {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.5rem 0 1.5rem;
  margin-bottom: 0.5rem;
}

.testimonial .header svg {
  width: 2.5rem;
  height: 2.5rem;
  color: rgba(255, 255, 255, 0.1);
}

.testimonial .header p {
  font-size: 0.875rem;
  margin-bottom: 0;
}

.testimonial .stars svg {
  width: 1rem;
  height: 1rem;
}

.testimonial .content {
  padding: 0 1.5rem;
}

.testimonial .content .message {
  font-size: 0.9rem;
  word-break: break-word;
}

.testimonial .content .image {
  margin-bottom: 1rem;
}

.testimonial .content .image img {
  width: 100%;
  max-height: 16rem;
  object-fit: cover;
  border-radius: var(--bs-border-radius);
  display: block;
}

.testimonial .content .reply {
  margin-bottom: 1rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--bs-border-radius);
}

.testimonial .content .reply .text {
  margin: 0;
  font-size: 0.875rem;
  padding-left: 0.5rem;
  border-left: 0.125rem solid var(--cl-accent);
  word-break: break-word;
}

.testimonial .content .reply .author {
  font-size: 0.8rem;
  margin: 1rem 0 0 0;
  text-align: right;
  color: var(--text-body);
}

.testimonial .content .reply .author span {
  color: var(--cl-accent);
}

.testimonial .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1.5rem;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
  color: var(--text-body);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.testimonial .footer .items {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.testimonial .footer .date {
  font-weight: 600;
}

.pagination .page-item:not(.active) .page-link {
  color: var(--bs-secondary-color);
  background-color: var(--bs-gray-bg);
}

/* BLOCKS */
.bg-block-primary {
  background-color: var(--bs-body-bg);
}

.bg-block-secondary {
  background-color: var(--bs-gray-bg);
}

.text-block.alignment-center,
.text-image-block.alignment-center,
.text-video-block.alignment-center {
  text-align: center;
}

.text-block.alignment-center .section-title,
.text-block.alignment-center .section-subtitle,
.text-image-block.alignment-center .section-title,
.text-image-block.alignment-center .section-subtitle,
.text-video-block.alignment-center .section-title,
.text-video-block.alignment-center .section-subtitle {
  justify-content: center;
}

.text-block.alignment-right,
.text-image-block.alignment-right,
.text-video-block.alignment-right {
  text-align: right;
}

.text-block.alignment-right .section-title,
.text-block.alignment-right .section-subtitle,
.text-image-block.alignment-right .section-title,
.text-image-block.alignment-right .section-subtitle,
.text-video-block.alignment-right .section-title,
.text-video-block.alignment-right .section-subtitle {
  justify-content: flex-end;
}

.text-image-block.alignment-right .row,
.text-video-block.alignment-right .row {
  flex-direction: row-reverse;
}

.text-image-block .section-subtitle,
.text-video-block .section-subtitle {
  margin: -1rem 0 1rem 0;
}

.text-image-block .row,
.text-video-block .row {
  --bs-gutter-y: 2rem;
}

.text-image-block img,
.text-video-block iframe {
  width: 100%;
  border-radius: var(--bs-border-radius);
}

.text-image-block .aspect-16\/9 img,
.text-image-block .aspect-4\/3 img,
.text-image-block .aspect-1\/1 img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  border-radius: var(--bs-border-radius);
}

.text-image-block .aspect-16\/9 img {
  aspect-ratio: 16/9;
}

.text-image-block .aspect-4\/3 img {
  aspect-ratio: 4/3;
}

.text-image-block .aspect-1\/1 img {
  aspect-ratio: 1/1;
}

.text-video-block .video-wrapper {
  display: flex;
  justify-content: center;
}

.text-video-block iframe {
  aspect-ratio: 16/9;
}

.image-gallery .row {
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 2rem;
}

.image-gallery .aspect-16\/9 img,
.image-gallery .aspect-4\/3 img,
.image-gallery .aspect-1\/1 img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  border-radius: var(--bs-border-radius);
}

.image-gallery .aspect-16\/9 img {
  aspect-ratio: 16/9;
}

.image-gallery .aspect-4\/3 img {
  aspect-ratio: 4/3;
}

.image-gallery .aspect-1\/1 img {
  aspect-ratio: 1/1;
}

.faq .accordion {
  --bs-accordion-btn-bg: var(--bs-gray-bg);
  --bs-accordion-active-bg: var(--bs-gray-bg);
  --bs-accordion-border-color: transparent;
  --bs-accordion-inner-border-radius: var(--bs-border-radius);
  --bs-accordion-active-color: var(--cl-accent);
  --bs-accordion-btn-focus-border-color: var(--cl-accent);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--cl-accent-rgb), .25);
}

.faq.bg-block-secondary .accordion {
  --bs-accordion-btn-bg: var(--bs-body-bg);
  --bs-accordion-active-bg: var(--bs-body-bg);
}

.faq .accordion-item {
  margin-bottom: 1.5rem;
}

.faq .accordion-item,
.faq .accordion-item .accordion-button,
.faq .accordion-item .accordion-collapse {
  border-radius: var(--bs-border-radius);
}

/* STATUS */
.status-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.status-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--bs-gray-bg);
  border-radius: var(--bs-border-radius);
  text-decoration: none;
}

.status-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
}

.status-group {
  margin-bottom: 1rem;
}

.status-group h2 {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: #ffffff;
}

.status {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.status .indicator {
  position: relative;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
}

.status .label {
  font-weight: 600;
}

.pulsating {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  opacity: 0;
  pointer-events: none;
  animation: pulsating 1.25s linear infinite;
}

@keyframes pulsating {
  0% {
    opacity: 0.4;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.aspect-product-card-image {
  aspect-ratio: var(--product-card-image-aspect-ratio);
}

.aspect-product-page-image {
  aspect-ratio: var(--product-page-image-aspect-ratio);
}

.aspect-group-card-image {
  aspect-ratio: var(--group-card-image-aspect-ratio);
}

.aspect-blog-card-image {
  aspect-ratio: var(--blog-card-image-aspect-ratio);
}

.object-product-image {
  object-fit: var(--product-image-fit);
}

.object-group-image {
  object-fit: var(--group-image-fit);
}

#snow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 9999;
}

#snow .snowflake {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-top: -10px;
  border-radius: 100%;
  background: rgba(var(--cl-snow, 255, 255, 255, 1));
}

.cart .btn-outline-primary svg {
  width: 1.25rem;
  height: 1.25rem;
}
 
.cart .product {
  background: var(--bs-gray-bg);
}

.cart .form {
  background: var(--bs-gray-bg);
}

.cart-item-bg {
  background: rgba(255,255,255,0.01);
  border-color: rgba(255,255,255,0.05) !important;
}

.cart-image-container {
  width: 5rem;
  flex-shrink: 0;
}

@media (min-width: 576px) {
  .cart-image-container {
    width: 8rem;
    max-width: 9rem;
  }
}

.cart-item-details {
  min-width: 0;
}

.cart-placeholder-icon {
  color: var(--text-muted);
}

.cart-placeholder-svg {
  width: 2.5rem;
  height: 2.5rem;
}

@media (min-width: 576px) {
  .cart-placeholder-svg {
    width: 4rem;
    height: 4rem;
  }
}

.cart-product-link:hover {
  text-decoration: underline !important;
}

.cart-variant-text {
  color: rgba(255,255,255,0.75);
}

.cart-discount-text {
  color: rgba(255,255,255,0.5);
}

.cart-addon-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 0.375rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
}

.cart-quantity-controls {
  max-width: 8rem;
}

.cart-qty-btn {
  background: rgba(255,255,255,0.1);
  width: 2rem;
  height: 2rem;
  transition: background-color 0.3s ease;
}

.cart-qty-btn:hover:not(:disabled) {
  background: var(--bs-primary);
}

.cart-qty-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.cart-qty-input {
  background: rgba(255,255,255,0.05);
  color: white;
  width: calc(100% - 4rem);
  font-size: 0.85rem;
}

.cart-qty-input:focus {
  background: rgba(255,255,255,0.05);
  color: white;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.5);
}

.cart-qty-icon {
  width: 1rem;
  height: 1rem;
}

.cart-price-text {
  min-width: 5rem;
}

@media (min-width: 576px) {
  .cart-price-text {
    font-size: 1.125rem;
  }
}

.cart-remove-mobile:hover,
.cart-remove-desktop:hover {
  color: var(--bs-danger) !important;
}

.cart-remove-icon-sm {
  width: 1rem;
  height: 1rem;
}

@media (min-width: 576px) {
  .cart-remove-icon-sm {
    width: 1.25rem;
    height: 1.25rem;
  }
}

.cart-remove-icon {
  width: 1rem;
  height: 1rem;
}

@media (min-width: 576px) {
  .cart-remove-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

@media (max-width: 575px) {
  .cart-controls {
    border-top-color: rgba(255,255,255,0.05) !important;
  }
}

.ticket .ticket-messages-container {
  position: relative;
  height: calc(100vh - 400px);
  min-height: 500px;
}

.ticket .ticket-messages-scroll {
  height: calc(100% - 80px);
  overflow-y: auto;
  overflow-x: hidden;
}

.ticket .ticket-messages-scroll::-webkit-scrollbar {
  width: 6px;
}

.ticket .ticket-messages-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.ticket .ticket-messages-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.ticket .ticket-messages-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

.ticket .ticket-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.ticket .ticket-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: scale-down;
  background: rgba(var(--bs-primary-rgb), 0.1);
  padding: 4px;
}

.ticket .ticket-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
}

.ticket .ticket-avatar-icon {
  width: 24px;
  height: 24px;
}

.ticket .ticket-sender-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bs-body-color);
}

.ticket .ticket-time-ago {
  font-size: 0.65rem;
  color: var(--bs-body-color);
  opacity: 0.6;
}

.ticket .ticket-message-content {
  font-size: 0.75rem;
  color: var(--bs-body-color);
  opacity: 0.85;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.ticket .ticket-input-area {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
}

.ticket .ticket-textarea {
  resize: none;
  max-height: 100px;
  min-height: 38px;
  field-sizing: content;
}

.ticket .ticket-send-btn {
  white-space: nowrap;
  padding: 0.5rem 1rem;
}

.ticket .bg-accent-500 {
  background-color: var(--bs-primary) !important;
  color: white !important;
}

.ticket .text-accent-500 {
  color: var(--bs-primary) !important;
}

@media (max-width: 575.98px) {
  .ticket .ticket-messages-container {
    height: calc(100vh - 300px);
    min-height: 400px;
  }
  
  .ticket .ticket-send-btn span {
    display: none !important;
  }
}

table td .btn.btn-link {
  font-size: .875em;
  color: var(--bs-primary);
}

/* Container for the notification */
.notification-container {
  position: relative;
}

.notification-popup {
  position: fixed;
  z-index: 1050;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
}

@media (min-width: 640px) {
  .notification-popup {
    right: auto;
  }
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background-color: var(--bs-gray-bg);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.notification-image-container {
  position: relative;
}

.notification-image {
  width: 3.75rem;
  height: 3.75rem;
  object-fit: cover;
  border-radius: var(--bs-border-radius);
}

@media (min-width: 640px) {
  .notification-image {
    width: 4.5rem;
    height: 4.5rem;
  }
}

.notification-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0.5rem;
}

.notification-text-primary {
  margin-bottom: 0;
  font-size: 0.75rem;
  font-weight: 300;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .notification-text-primary {
    font-size: 0.875rem;
  }
}

.notification-text-secondary {
  margin-bottom: 0;
  font-size: 0.875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .notification-text-secondary {
    font-size: 1rem;
  }
}

.notification-text-tertiary {
  margin-bottom: 0;
  font-size: 0.75rem;
  opacity: 0.75;
  font-weight: 300;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .notification-text-tertiary {
    font-size: 0.875rem;
  }
}

.flag-icon {
  width: 0.625rem;
  height: 0.625rem;
}

@media (min-width: 640px) {
  .flag-icon {
    width: 0.75rem;
    height: 0.75rem;
  }
}

.currency-selector {
  max-width: 153px;
}

.currency-selector select {
  width: 80px;
  height: 40px;
  background-color: transparent;
  border: 1px solid var(--cl-accent);
  border-radius: var(--bs-border-radius);
  outline: none;
  color: transparent;
}

.currency-selector .symbol {
  display: inline-block;
  width: 2.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0.25rem;
  color: var(--cl-accent) !important;
  text-align: center;
  padding: 0.125rem 0.25rem;
  margin-right: 0.25rem;
}

.currency-selector .default {
  font-size: 0.75rem;
  opacity: 0.75;
}

.currency-selector .choices__inner {
  min-width: 5rem !important;
  height: 40px !important;
  border-radius: var(--bs-border-radius);
  background-color: transparent !important;
  border: 1px solid var(--cl-accent) !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.currency-selector .choices.is-open .choices__inner {
  border-color: var(--cl-accent) !important;
}

.currency-selector .choices__inner .symbol {
  background-color: transparent;
  color: var(--cl-accent);
  min-width: 0;
}

.currency-selector .choices__inner .code,
.currency-selector .choices__inner .default {
  display: none;
}

.currency-selector .choices__inner .choices__item {
  max-width: 50px;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.currency-selector .choices__list.choices__list--dropdown {
  min-width: 11rem !important;
  margin-top: 0.5rem;
  border-radius: var(--bs-border-radius);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.currency-selector .choices__list::-webkit-scrollbar {
  display: none;
}

.currency-selector .choices__list--dropdown .choices__item--selectable {
  padding-right: 0.625rem !important;
}

.currency-selector .choices__list--dropdown .choices__item--selectable.is-highlighted::after {
  display: none;
}

.language-selector {
  max-width: 153px;
}

.language-selector select {
  width: 96px;
  height: 40px;
  background-color: transparent;
  border: 1px solid var(--cl-accent);
  border-radius: var(--bs-border-radius);
  outline: none;
  color: transparent;
}

.language-selector .flag {
  width: 1.25rem;
  height: 0.9375rem;
  flex-shrink: 0;
}

.language-selector .code {
  color: var(--cl-accent);
  font-weight: 600;
}

.language-selector .choices__inner {
  min-width: 6rem !important;
  height: 40px !important;
  border-radius: var(--bs-border-radius);
  background-color: transparent !important;
  border: 1px solid var(--cl-accent) !important;
  padding-top: 5px !important;
}

.language-selector .choices.is-open .choices__inner {
  border-color: var(--cl-accent) !important;
}

.language-selector .choices__inner .name,
.language-selector .choices__list--dropdown .code {
  display: none;
}

.language-selector .choices__inner .choices__item {
  overflow: hidden;
  white-space: nowrap;
}

.language-selector .choices__list.choices__list--dropdown {
  min-width: 12rem !important;
  width: max-content;
  inset-inline-end: 0;
  margin-top: 0.5rem;
  border-radius: var(--bs-border-radius);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.language-selector .choices__list::-webkit-scrollbar {
  display: none;
}

.language-selector .choices__list--dropdown .choices__item--selectable {
  padding-right: 0.625rem !important;
  white-space: nowrap;
}

.language-selector .choices__list--dropdown .choices__item--selectable.is-highlighted::after {
  display: none;
}

.choices {
  border-radius: 0.5rem;
  margin-bottom: 0 !important;
}

.choices.is-open {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.choices .choices__inner {
  min-height: 2.5rem;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.025);
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  width: 100%;
  border: 0;
}

.choices[data-type*="select-one"] .choices__inner {
  padding: 0.5rem 1rem;
}

.choices .choices__list.choices__list--single {
  padding: 0;
}

.choices.is-open .choices__inner {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.choices .choices__list.choices__list--dropdown {
  background-color: var(--bs-gray-bg);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.choices.is-open .choices__list--dropdown,
.choices.is-open .choices__list[aria-expanded] {
  border-color: rgba(255, 255, 255, 0.1);
}

.choices[data-type*="select-one"] .choices__list .choices__input {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.choices[data-type*="select-one"] .choices__list.choices__list--dropdown .choices__input {
  background-color: rgba(255, 255, 255, 0.025);
  color: #fff;
}

.choices .choices__list--dropdown .choices__item,
.choices .choices__list[aria-expanded] .choices__item {
  background-color: rgba(255, 255, 255, 0.025);
  color: #fff;
}

.choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--accent-500);
  color: white;
}

.choices .choices[data-type*="select-one"] .choices__input {
  background-color: var(--accent-500);
  color: white;
}

/* New editor */
.editor .rtl {
  direction: rtl;
}

.editor .e-paragraph {
  position: relative;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  word-wrap: break-word;
}

.editor .e-quote {
  font-size: 1rem;
  padding-left: 1rem;
  border-left-color: var(--cl-accent);
  border-left-width: 0.25rem;
  border-left-style: solid;
}

.editor .e-hr, .editor hr {
  height: 2px;
  border: 0;
  border-radius: 9999px;
  background: var(--cl-border);
  margin: 2rem 0;
}

.editor .e-heading-h1 {
  font-size: 2.25rem;
  line-height: 2.5rem;
  margin-bottom: 0;
}

.editor .e-heading-h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  margin-bottom: 0;
}

.editor .e-heading-h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 0;
}

.editor .e-nested-listitem {
  list-style-type: none;
}

.editor .e-list-ol {
  padding: 0;
  margin: 0;
  margin-left: 1rem;
  list-style-type: decimal;
}

.editor .e-list-ul {
  padding: 0;
  margin: 0;
  margin-left: 1rem;
  list-style-type: disc;
}

.editor .e-list-ul .e-list-ul {
  list-style-type: circle;
}

.editor .e-list-ul .e-list-ul .e-list-ul {
  list-style-type: square;
}

.editor .e-list-ol .e-list-ol {
  list-style-type: lower-alpha;
}

.editor .e-list-ol .e-list-ol .e-list-ol {
  list-style-type: lower-roman;
}

.editor .e-listitem {
  margin: 0.5rem 1rem 0.5rem 1rem;
}

.editor .e-image img {
  max-width: 100%;
  height: auto;
}

.editor .e-youtube iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

.editor .e-link {
  color: var(--cl-accent);
  text-decoration: underline;
}

.editor .e-text-bold {
  font-weight: bold;
}

.editor .e-text-code {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.0625rem 0.25rem;
  font-family: monospace;
  font-size: 95%;
}

.editor .e-text-italic {
  font-style: italic;
}

.editor .e-text-strikethrough {
  text-decoration: line-through;
}

.editor .e-text-underline {
  text-decoration: underline;
}

.editor .e-text-underlineStrikethrough {
  text-decoration: underline line-through;
}

.editor .e-code {
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.5rem;
  font-family: monospace;
  border-radius: var(--bs-border-radius);
}

.editor .e-collapsible {
  margin: 0.25rem 0 0.25rem 0;
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.editor .e-collapsible-title {
  display: block; 
  position: relative; 
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  font-weight: 600;
}

.editor .e-collapsible-title::marker,
.editor .e-collapsible-title::-webkit-details-marker {
  display: none;
}

.editor .e-collapsible-title:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0.625rem;
  transform: translateY(-50%);
  border: 1px solid transparent;
  border-left-color: var(--cl-accent);
  border-width: 4px 6px 4px 6px;
}

.editor .e-collapsible[open] > .editor .e-collapsible-title:before {
  border-left-color: transparent;
  border-top-color: var(--cl-accent);
  border-width: 6px 4px 0 4px;
}

.editor .e-collapsible-content {
  padding: 0.5rem;
  border-top: 1px solid var(--bs-border-color);
}

.editor .e-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0.5rem 0;
}

.editor .e-table-cell {
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent) !important;
}

.editor .e-table-cell-header {
  font-weight: 600;
  background-color: color-mix(in srgb, currentColor 6%, transparent);
}

.editor .e-table-striped tr:nth-child(even) > .e-table-cell {
  background-color: color-mix(in srgb, currentColor 4%, transparent);
}

.editor .e-table-center {
  margin-left: auto;
  margin-right: auto;
}

.editor .e-table-right {
  margin-left: auto;
  margin-right: 0;
}

/* BUILDER */
.builder .component {
  position: relative;
}

.builder .component .builder-toolbar {
  display: none;
}

.builder .component:hover .builder-toolbar {
  display: block;
}

.builder .builder-toolbar {
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  z-index: 1;
  text-align: center;
}

.builder .builder-toolbar .actions {
  background: #070d19;
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: var(--bs-border-radius);
}

.builder .builder-toolbar .actions button {
  padding: 0.5rem;
  border-radius: var(--bs-border-radius);
  background: #0c1427;
  border: 0;
}

.builder .builder-toolbar .actions button:hover {
  background: #0a0f1f;
}

.builder .builder-toolbar .actions button svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #ffffff;
}

.builder .announcement .builder-toolbar .actions button:not(.edit),
.builder .navbar .builder-toolbar .actions button:not(.edit),
.builder .footer .builder-toolbar .actions button:not(.edit) {
  display: none;
}

.grecaptcha-badge { 
  visibility: hidden;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}

.size-4 {
  width: 1rem;
  height: 1rem;
}

.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}

.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}

.size-3,
.size-3\.5,
.size-4,
.size-5,
.size-6 {
  flex-shrink: 0;
}

.min-w-0 {
  min-width: 0;
}

.text-accent-500 {
  color: var(--bs-primary) !important;
}

.bg-accent-500 {
  background-color: var(--bs-primary) !important;
  color: white !important;
}

:root {
  --altcha-border-width: 1px;
  --altcha-border-radius: var(--bs-border-radius);
  --altcha-color-base: rgba(255, 255, 255, 0.025);
  --altcha-color-border: rgba(255, 255, 255, 0.05);
  --altcha-color-text: #fff;
  --altcha-color-border-focus: currentColor;
  --altcha-color-error-text: #ef4444;
  --altcha-color-footer-bg: #f4f4f4;
  --altcha-max-width: 600px;
}

.ticket-attachment {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
}

.ticket-attachment-remove {
  width: 1.25rem;
  height: 1.25rem;
}

.ticket .ticket-attach-btn {
  padding: 0.5rem 0.75rem;
}

#ticket-create-modal .ticket-attachment {
  width: 4rem;
  height: 4rem;
}

/* ===== Theme overrides ===== */

/* Colour palette. Every component pulls its greys and surfaces from here. */
:root {
  --text-strong: #f2f2f4;
  --text-soft: #d4d4d8;
  --text-body: #adadb6;
  --text-muted: #8b8b94;
  --surface: #141417;
  --surface-raised: #1c1c21;
  --surface-hover: #26262c;
  --on-accent: #0e0e10;
  --accent-hover: #e4e4e8;
}

/* Buttons: one main style, one secondary style, one small size. */
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 48px;
  padding: 0 1.375rem;
  border: 0;
  border-radius: 12px;
  background: var(--cl-accent);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--on-accent) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.ui-button svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.ui-button .button-arrow {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ui-button:hover:not(:disabled) {
  background: var(--accent-hover);
  color: var(--on-accent) !important;
}

.ui-button:hover:not(:disabled) .button-arrow {
  transform: translateX(3px);
}

.ui-button.is-secondary {
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--text-strong) !important;
}

.ui-button.is-secondary:hover:not(:disabled) {
  background: var(--surface-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #ffffff !important;
}

.ui-button.is-small {
  position: relative;
  gap: 0.25rem;
  height: 36px;
  padding: 0 0.875rem;
  border-radius: 8px;
  font-size: 0.8125rem;
}

.ui-button.is-small::before {
  content: '';
  position: absolute;
  inset: -4px;
}

.ui-button.is-small svg {
  width: 14px;
  height: 14px;
}

.ui-button.is-block {
  width: 100%;
}

.ui-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ui-button:focus-visible {
  outline: 2px solid rgba(var(--cl-accent-rgb), 0.8);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ui-button,
  .ui-button .button-arrow {
    transition: none !important;
  }
}

/* Stop anything wider than the screen from causing sideways scrolling. */
html,
body {
  overflow-x: hidden !important;
  overflow-x: clip !important;
}

/* White text selection highlight. */
::selection {
  background: #ffffff;
  color: var(--on-accent);
}

::-moz-selection {
  background: #ffffff;
  color: var(--on-accent);
}

/* Shared page header (products, reviews, cart). */
.hd3q8 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0 0 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hd3q8 .section-title {
  margin: 0 0 0.6rem;
}

.hd3q8 .section-subtitle {
  margin: 0;
}

@media (min-width: 768px) {
  .hd3q8 {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.section-title h1,
.section-title h2 {
  color: var(--text-strong) !important;
}

/* Review card — same solid look as the Why Us cards. */
.r5vq2 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  padding: 1.25rem;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.3s ease;
}

.r5vq2:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--cl-accent-rgb), 0.22);
}

.g8ht4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.k4vb7 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--text-soft);
}

.k4vb7 svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.d3pa9 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  margin-top: auto;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.x7gs1 {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.x7gs1 svg {
  width: 13px;
  height: 13px;
  color: rgba(255, 255, 255, 0.18);
}

.x7gs1 svg.is-on {
  color: #ffffff;
}

.b9ne5 {
  min-width: 0;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: #ffffff;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.o6yk0 {
  flex: 0 0 auto;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
}

.l2fu8 p,
.q3ci6 {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  word-break: break-word;
}

.v8cj3 {
  color: #ffffff !important;
  font-size: 0.8125rem;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 255, 255, 0.25) !important;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: text-decoration-color 0.2s ease;
}

.v8cj3:hover {
  text-decoration-color: #ffffff !important;
}

.h0mb3 img {
  display: block;
  width: 100%;
  max-height: 16rem;
  border-radius: 10px;
  object-fit: cover;
}

.w6rd1 {
  padding-left: 0.875rem;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.z9lo4 {
  margin: 0 0 0.375rem;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.6);
}

.z9lo4 span {
  color: #ffffff;
}

/* Hide SellAuth's injected "Powered by SellAuth" link. */
a[href*="utm_medium=powered_by"],
body > :not(#app):has(a[href*="utm_medium=powered_by"]),
#app > footer ~ :has(a[href*="utm_medium=powered_by"]) {
  display: none !important;
}

/* Remove the navbar's bottom border everywhere, not just on the overlay/home header. */
.navbar {
  border-bottom-color: transparent !important;
}

/* Center the primary nav links in the navbar (desktop only). */
@media screen and (min-width: 992px) {
  .navbar .container {
    position: relative;
  }

  .navbar .navbar-collapse > .navbar-nav:first-child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Navbar utility chips (cart / account) — softer fill to match the currency selector. */
.nav-chip {
  background: var(--surface-raised) !important;
  border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: var(--text-soft) !important;
  font-weight: 500 !important;
  transition: background-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease !important;
}

.nav-chip:hover,
.nav-chip:focus-visible {
  background: var(--surface-hover) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.nav-chip-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;
}

.nav-chip-icon .icon {
  width: 1.2rem !important;
  height: 1.2rem !important;
}

.nav-chip-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  height: 44px !important;
  padding: 0 1.25rem 0 1rem !important;
  border-radius: 999px !important;
  font-size: 0.875rem !important;
}
.nav-chip-pill .icon {
  width: 1.05rem !important;
  height: 1.05rem !important;
}

/* Currency selector. */
.currency-picker {
  position: relative !important;
}

.currency-picker-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--surface-raised) !important;
  cursor: pointer !important;
  transition: background-color 0.25s ease !important;
}

.currency-picker-button:hover,
.currency-picker-button[aria-expanded="true"] {
  background: var(--surface-hover) !important;
}

.currency-flag {
  display: block !important;
  flex: 0 0 auto !important;
  width: 26px !important;
  height: 19px !important;
  border-radius: 3px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

.currency-picker-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  z-index: 3200 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: 210px !important;
  padding: 8px !important;
  border-radius: 8px !important;
  background: var(--surface-raised) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

.currency-picker-option {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--text-soft) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}

.currency-picker-option:hover {
  background: var(--cl-background-primary) !important;
  color: #ffffff !important;
}

.currency-picker-option.is-active {
  background: rgba(var(--cl-accent-rgb), 0.14) !important;
  color: #ffffff !important;
}

.currency-picker-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.currency-picker-option i {
  flex: 0 0 auto !important;
  color: var(--cl-accent) !important;
  font-size: 13px !important;
}

.flag-usd { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAqCAMAAAATdiw4AAAAS1BMVEWzGUL///8KMWHsxtDZjKHGU3IMNGMgQ28nSXQ1VX1xXYBgeZiJnLP//v7CzNhGZIgRN2bl6e9RbY+xvc1wh6Prxc+Zqr709vhyX4F3rzwPAAABHklEQVRIx+2UwW7CMBQEzQD77MYkjgmh//+lvUAhFkplK4dWdA5W5rJStKvn+AFXCzYFUNcJwmSUXh+ofgBiBIZelF4fiBKBlAgkyWzp7Ou4OIBu9ODHDnQ+69lhV8fJgWGelOQNw/ulNwRaP4BiFAy9UfqhEgcxILoOEaJQ4Q2lQJgNbA6gadKz0xb4ai4351iJgw7AB7h9Lr2hlOtjLlej9IbZrA+7IRDyaGBjBs2znr2pFMMPKGkwjBCW3hDo+3wfcu49pTdcm2LYhTcdhxANLD6G/e20lbI27IbATJJ8kBKZlMgkcfeG4/DyDj68oRTvgdsjSq8O/PxYp/qXT7tNOW0feNlvysW9Ib+/5c0DjxvzB1o+bMz/cXgHvgD4OyGtUE286gAAAABJRU5ErkJggg==") !important; }
.flag-eur { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA1CAMAAADh9px2AAAAQlBMVEUAM5kENpZkb1wMOpEdRIcuTnx4e1D/ywBVZmX4yAI6VnWTi0DHqiCckDqKhkXovgwFNpSomDO4oSnOrhzYtBZKX2uk3AMzAAABPUlEQVQYGe3B2Y6jMBBA0eu1ygaz5/9/dSBqtdSRIJjkbTiH2+1XznxXKXyFyWy0F+mVTR74hB15yiKZp1G5Ls9JFsuqs7ZjZRdJc+YqE0QiGweOTRQJXGfnsfBHKbNyXYDAHwEClwwcGqjVcKihitFHsurZ4dWmhxoq2CTSsasTSUqVNvUc6FNLlaExMbArRNMM3A553vJU8CNvjZ6zQmlTEzkUmzSVwElWpHUccq2I5SyfUsMbJSXHWaqu4Y3GqXKW4b/kOeSpNQ0cMBNVTDPKVDw7fJlk7AwVfC8psysn6T1V5rZnn+nbmSpGyZ5dIaMDtQyrgRcDH/GRF9Hzidjyoo1cF2aRRdl4z0YXkTZwmU+iPHUdTyrJcV2Mj8JKl5QWZTU+ush1DhwbFVE2Dhxf0E1T5JsCBG63H/8AhrUJO3XKJvQAAAAASUVORK5CYII=") !important; }
.flag-gbp { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAoCAMAAABevo0zAAAAM1BMVEX///+6w9fzytGrtc3WTWM3UInxxMvIEC4BIWnAyNqqtc22wNT0ztTs7vT109n88fPO1OI8OV3ZAAABE0lEQVRIx+3XtxaDMAwF0AfBlFD//2tDDbasYnIYMvAGBpd7WJAEihJbWlezeQHVHuDNn3EZumI5MWvrQyNt0Oe2wyppgSEHlIVB6qBrkYdCRhcoqYEcV7smWnRpoItepnE1lg2VlECWq1dQJ3lQ4A5QIzlQ5E5QJmNQ4XxQIimociHIkyFocBTkyN4He4ObwYZm6jEO5Zxh3C95IMKdfoquIyUeeE8ugdXNecAH/AX8/y+FKw5b9hLBgN/iwRWHuHzB79c5LV9kNy5fKtdxBVYnYXBsC9BIGJzQpGQSBie2UYmEwSmNnidhcOoowpEwOGNYiklE3MVxjpCtxSUMnIQ0uKSR2CctLnFoP0mLS/6tOMgPj+pDAxFVOjwAAAAASUVORK5CYII=") !important; }
.flag-pln { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAyAQMAAADx486/AAAABlBMVEXcFDz////vuDXSAAAAE0lEQVQoz2P4DwcMo0wIcxSgAwBb0PkHxoHwIwAAAABJRU5ErkJggg==") !important; }
.flag-cad { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAoCAMAAABevo0zAAAAQlBMVEX/AAD/R0f/Y2P/29v/6Oj/Cgr/VFT/////Gxv/cnL/h4f/lZX/7+//srL/oKD/XFz/zs7/ycn/NTX/eXn/+Pj/u7s/V1YHAAABDUlEQVRIx+WWy3LDIAxFL0/xsgHb+f9f7aLO0KR2xgEt0qlWwNWcAWkkBBwYXTRctT8JVIoZmDMvUAGKFZiBzAXUmkgBgPpeDwOT8ckCQE4eiePJrgmOJYa2CZYFGJoQWIBTE27DwBqIdBMSUai9QB8LkUX8kRVHFGGJSvQdQAmYBcBM4n4uaAawGEB2AG/33dyA8TGYb8bQnDuYrqTIcwf5CUDlXnk49f4Np1cxnHqeXE7v6EpfpejlWF50b+lt9ki120Ath99iGOs2z6nZ0zHQvvyj5If74VOq3Siwwgk/121dtzp74VAGgXr/52Lc/0DNNIqEwDzbrCsz0HtmoJTMQGuZgUL8uxn7MvAL2t0iyxNQ808AAAAASUVORK5CYII=") !important; }
.flag-aud { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAoCAMAAABevo0zAAAAXVBMVEXkACvv8fZ+jrMIKG4OLHFBWY9Va5sBIWn////rQGD4v8ntvMkqRYGAkLR2h64zTYdKYZX3+Pujr8keO3rX2+e7w9fwcIiPnb0CImrr5exgdKGWo8H6z9erts7yzddHEiheAAABrklEQVRIx+2VyZKEIBBEQVASGwH3trf//8w5uAu2xAzHqYMRlvCiCrJSInOAJlzMkYEQQpAtCZ7cJJG5CAwiicwBqrkfyPVtXBEMTKYNc5U7IF+/BgMFL3bIDXDFFdy39373AsUeuQCvcEKk6Qlwh3yMwMcljlVtWzEXmI5hq08nuxdQjsBheqvstMBt+An0btMEThBCPFlnp9KAVi4wNNye66SoRUwgE4JFBZ7oMDrw15eyFST3yaYEXp3shhE4vX3OZbO6R//uC0fYFMglkbdV2HPmKGx34CrgcRi9BbcbPR+ScZvy/eXaFuVbbc1hgzuYgwfZDkN7qNDoTYYU5bRJ++xLz0g9H1gFHCe4FpuaybY6n8HOVc4DZ8syVd9ks8d5fwEUyOVSjrX1d4P9WxgTF6goVXErfD4jtxx0hkpFBhZJRGCaMdE0gmVpJCBr6BuoaMNitZyO9meinSFvAKDhkYAsoWOFVF/3zNgl8K503wJA2+urppnKrGIBsjEoS4Qo8UlpH6LDDNZuzOZ8jBugMQFAnQmR6WsgM8NgQlqul8f3uNfG1PH98B8oxA8n5FdQBY0ijQAAAABJRU5ErkJggg==") !important; }
.flag-jpy { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA1CAMAAADh9px2AAAAOVBMVEW8AC3ILFHUW3jbdY3DG0PghpvmoLH////kl6n55ur22uC/Czb+/Pzxy9TKNlntu8fPSWnrsb7MP2AZmjhmAAAA40lEQVRYw+3Wyw6EIAwF0PK0vETn/z92Nm6M0rGFZBZy1+SEQCgXlsGBCU7wtWDcvXN+j2PA4BQcUS50g1HDKTr2gR4uwR7QwU2cHNRwGyMFPTSCMrBAM0UCZtsGbRaAHoh4AbhS4MoHI5AJbNDRILLBjQY1G1xp8MMGLQ1aLpjhR/K/d7goGlSjb3ljg4YGHRssNBj5b1mJjpAAUfTyqHlIbHHNoomdWl4qg/8UL/31zOBfr3Ex2NMc6uUcU+3rNsGcyGR+1aUH7Qv1MXmsxv72daAVsYZHS5822DxL+wRfDX4B50xfz1QVWiYAAAAASUVORK5CYII=") !important; }
.flag-cny { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA1CAMAAADh9px2AAAANlBMVEXuHCX//wDwLyHyVBvuIiP5qw3xPx71dRX+5wP3jRL4mRD/9gHzXxnySxz7wQn6tgv7ygj80QdOKUmjAAAAwElEQVQYGe3BSXLDMAwEwBkQBFct+f9nbSVOpORIwYdUsRv/msKTmBS42lvEbYZTZKuKe2TFDytrwl2JgpME3LUy4TcxKIYpueKPHAsGaDgUsoXDghepjQtG9MbTh+FFLcaqGCE7v1VcFMUYReGnHHClGLfxkOBFGw8RXjqZK9kUV0EwKnJTWGbHSUKsQTBEc8KTxoiLQhaMMcOXjgvL2eBpEQlws8CTpFThKnLvcCSZ2wJHoj3BmWCapmmapumtHrOgA8RDdxj4AAAAAElFTkSuQmCC") !important; }
.flag-brl { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA4CAMAAABdaI+oAAAAw1BMVEUAlED/ywAwJoEHlj4SmDs3LHv7yAKnuBZYpypCoi5trCXtyATixQYgmjf9ygG8lSk2LYT0xwQyKIE+NIdNPW5MRJGKsh25uxHHvg4vnjPWwgpmX6JFN3OsiDNgTWJeV5y74syKbUjYrBh8da5VRGmdu7vX7OGopsql2rzJnyGMhre0tdDI59aZtRp6riKVkL2V0rBWUJj4/PpaUpq018h5fKppwI7Q3d7Mx8CNpa58iqulycCjkISAdpbVrS9uaKTPuH6BIXwtAAACKElEQVRYw+1XaXOiQBDNtGJAUUaORMUDRQHFRI3mzm72//+qpYZhist1RKitVPm+WGrXq+7pN697bm6uuCJCrVYunyTLUol09VsU4LZeFp/YQgQtsRS69j1iuG9fztfsohi6zQvp+j2UQq9/iVbuOiiDzl1hBUkDwtBYTse6IOjj6bJBfhgUU1D9IaQbDYFhOAopHwooSJRJfYoOCegKOQVZLCRlhBQBUhCU8J/zZN6kUlYgB5Sxxa+gdqSVmZBHKMxou3t8Mq89NihfYw65mLOARw4F9QdMcSM4ghELGfTPkHL3fbE4bA+fi/fNs4njhMMur8wlOXYl/ljW1vLWznb99PLkLD522M2mGChIOqkVii/b3BsYG3vT/nBf15538E1KOE0EHlNQZHsRxuDGyjRdxwvynJAv42RkrlHGbS/EMN0L03deLEKpp2OzRpm0PYKMCCeq4QeHGuQtZIIzRvkPwlWcdOdvnU+Dg/BUyapKP8FeW9av0yXnNgUwaFG5E8ZtvHpvHE3JyKYzBdhQPtWIV47dNy7ZpIW9NOygwlV4RzRGt9Iw/OYTdurqdeYxpugMg+K1/fycCRMzB+KGz0BStG1W8CZyRB5zSNhXmCL4lEkzQd1puw2wBLns67jBYgzfGGvMYFGvfeEI0FYwMYuMgLwhRZtiGMWGFBujaJYeo2G9svj/B335q0gFy1L561wFC2cFK3H5S3sFz4ryHz4VPM2u+NH4C4s2LLeHO8TWAAAAAElFTkSuQmCC") !important; }
.flag-inr { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA1CAMAAADh9px2AAAAP1BMVEX///8Eajj/aCBDj2r/jljo6PUOCpDa2u60s92IhslfXLbQz+rEw+RubL2mpdf39/w7OaZ/fcQkIZpST7CVk8+BV7XQAAAA3klEQVRYw+3UyW0EMQxE0bbHxZ3a84/Vh05gAOmoH8ADoYXP7+GeC17wghe84Av+He75JpQ+Zy94DhWDmlmjEWc8pc5ABXfSE15pUhGMAKSVfQ+kzEUkQhxK++fYJ1iKZq4Sjtm3wRYVmlN1pqLG3PUqMcvKJMpcwkz7TwYuSyeR6RLH8O0JnWVljpG5hJ3q7ohDKnSaqpmiyti+FGtwKWqmJZybbYNOnb2ESIijkx/4KcMrgjkAp3Li7xl1BgDuZGe2A7d32zQ+tb8eXmbrS+5zuOfncBe84AUveMG3f5ZgHCG26UDJAAAAAElFTkSuQmCC") !important; }
.flag-rub { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA1BAMAAAAkBnF3AAAAD1BMVEXVKx4AOab///+OMEuqveHhfiP9AAAAKUlEQVRIx2NUYiAOMDGMKhxVOHgUshCbcBkFR8NxVOFwTuGjYBQMSQAASsMAwmh8IyAAAAAASUVORK5CYII=") !important; }
.flag-mxn { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAuCAMAAACI524uAAAAvVBMVEX////OESYAaEfeYG5Wm4VoPyX8+vL29PFySSzp59vV171SMR2SYjvMzbHi3byxs4nJxaCafFv9/fykqXmFUi6ciG/F39+jbkfAqpKQlVvn7ez779rRsY1zUDg7iIe9v5urekzp1JKnlYx6WT7avGm6qnvMoGEff4LEubT15si/l225h1Bdm53PycPQsVmJtrSyz8t0ra3g0cfPrqp4zON8a2Gux7xCvdQ7d3z3taH0mYzcj56bsLXqj49sj38YYbFcAAABMElEQVRIx+3VRXbFIBQGYCo4JCHuLs9d6vtfVlfwJiWDDvgX8J1z4Qp4fphX8DAvTw8DDGhAAxrw7yBy6zqKTjOBLkV5HAuf+2oekFl5VEdKcAjbOUCXOn2/XnWCQw5Ps7whHpwxKiDhBAp90G1o5axqwaFPfJ8sZihZDiBfCyJURyCMNUGMEGZD3xREkGDbqm4BkBZos+U7k7vdyi84jHF7pdLTAy38ebODZq0Ih0WQtriqtMClBTbT4TvDeNtdSRFIwDItENkyPZZvm7ej2vXbw0dWJVjvlysPZeF+P01lWW6mL+TZmm2DGgeEl0uelz/hcQ+YhbQb2/PS8D6OaryHwE5S/UmhtrUM4yAYDtKqrDlmGTEvcW5nmSQ0m2fBupiy84JKao6UAQ1owP8D/gJ9tyjbzL3r/gAAAABJRU5ErkJggg==") !important; }
.flag-chf { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQAgMAAADzfxo+AAAADFBMVEX/AAD/////gID/wMCov4oYAAAANklEQVQ4y2NgGAWUgqmhoWGjgrQTZFoFBFdDQ8NBdANUkDEUCTiMCmIXxBp0owmMXoKjgFQAAH/3gHGvQgbmAAAAAElFTkSuQmCC") !important; }
.flag-sek { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAyAQMAAADx486/AAAABlBMVEX+ywAAUpP1seVEAAAAGUlEQVQoz2P4//9/g/x/EGAYdkz6gmEckgAAyVeo4S7DWgAAAABJRU5ErkJggg==") !important; }
.flag-nok { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA6BAMAAADVUMOiAAAAIVBMVEUAIFu6DC/////MSWNBWYV/j6x0haXTZHrGN1T//v7ei5sR6cc6AAAAWklEQVRIx2MQhAMJJTUGBgYnpUJBbIBhVOGowlGFpCk0hgNzqMLFxtgAgxISgCjECjRpoDAUCYQAFbKGYgcMIxO4IAEHIJ/FBTsYyCgkOpmNZtdRhaMKaaMQAO8ZzJXM+UJqAAAAAElFTkSuQmCC") !important; }
.flag-dkk { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA9BAMAAADIVfMaAAAAFVBMVEXIEC7////xxMvLHTnpnqr//v766Opz5UdkAAAAOklEQVRIx2NgQALMgkDgwEAYjCocVTiqcIQpVEIGIIVJSlgBgyBxQHSEKiQ6HEfT46jCUYWjCgkqBACPZDi5z2Vb2gAAAABJRU5ErkJggg==") !important; }

@media (max-width: 767px) {
  .currency-picker-menu {
    width: 180px !important;
  }
}

/* Mobile navbar: toggler chip + dropdown panel. */
@media (max-width: 991.98px) {
  .navbar .navbar-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: var(--surface-raised) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
  }

  .navbar .navbar-toggler:hover,
  .navbar .navbar-toggler[aria-expanded="true"] {
    background: var(--surface-hover) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  }

  .navbar .navbar-toggler .navbar-toggler-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  .navbar .navbar-collapse {
    margin-top: 12px !important;
    border-radius: 16px !important;
    background: var(--surface) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  }

  .navbar .navbar-collapse > .navbar-nav:first-child {
    gap: 2px !important;
    margin: 0 !important;
    padding: 8px !important;
  }

  .navbar .navbar-collapse > .navbar-nav:first-child .nav-link {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    color: var(--text-soft) !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    transition: background-color 0.18s ease, color 0.18s ease !important;
  }

  .navbar .navbar-collapse > .navbar-nav:first-child .nav-link:hover {
    background: var(--surface-raised) !important;
    color: #ffffff !important;
  }

  .navbar .navbar-collapse > .navbar-nav:first-child .nav-link.active {
    color: var(--cl-accent) !important;
  }

  .navbar .navbar-collapse > .navbar-nav:last-child {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .navbar .navbar-collapse > .navbar-nav:last-child > .nav-item:not(.user):not(.cart) {
    flex: 1 1 100% !important;
  }

  .navbar .navbar-collapse .user {
    flex: 1 1 auto !important;
  }

  .navbar .navbar-collapse .user .nav-chip-pill {
    justify-content: center !important;
    width: 100% !important;
  }

  .navbar .navbar-collapse .currency-picker-menu {
    right: auto !important;
    left: 0 !important;
    transform-origin: top left !important;
  }
}

.currency-picker-menu {
  transform-origin: top right !important;
}

/* Accent is white, so anything that sits ON the accent needs dark text. */
.btn-primary {
  --bs-btn-color: #0e0e10 !important;
  --bs-btn-hover-color: #0e0e10 !important;
  --bs-btn-active-color: #0e0e10 !important;
  --bs-btn-disabled-color: #0e0e10 !important;
  color: var(--on-accent) !important;
}

.btn-primary:hover {
  background-color: var(--accent-hover) !important;
  border-color: var(--text-soft) !important;
}

.btn-outline-primary {
  --bs-btn-hover-color: #0e0e10 !important;
  --bs-btn-active-color: #0e0e10 !important;
}

.products .card .card-img-top .overlay .btn:hover {
  color: var(--on-accent) !important;
}

.dropdown-menu-dark {
  --bs-dropdown-link-active-color: #0e0e10;
}

.nav-pills {
  --bs-nav-pills-link-active-color: #0e0e10;
}

.pagination {
  --bs-pagination-active-color: #0e0e10;
}

.list-group {
  --bs-list-group-active-color: #0e0e10;
}

.navbar .cart .btn .count,
.announcement,
.announcement a,
.hero .search-modal .product .image .badges div,
.socials .list .social .left svg,
.products .card .card-img-top .badges div,
.product-wrapper .badges a {
  color: var(--on-accent) !important;
}

.form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230e0e10' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230e0e10'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230e0e10'/%3e%3c/svg%3e") !important;
}