/* 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); */
}

.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;
  }
}

/* Footer */
footer.footer {
  background: var(--bs-gray-bg);
  border-top: 1px solid var(--bs-border-color);
}

.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 {
  font-size: 1.75rem;
}

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

.section-title p {
  font-size: 0.875rem;
  color: #a3a3a3;
}

@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;
}

/* 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;
  background-size: cover;
}

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

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

.hero .content h1 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.hero .content p {
  margin-bottom: 2rem;
}

.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: #a3a3a3;
}

.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: #a3a3a3;
}

.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: unset;
  }

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

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

  .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: #d1d1d1;
  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;
}

/* 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: #a3a3a3;
}

/* 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;
}

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

.variants .variant .description {
  font-size: 0.875rem;
  color: #a3a3a3;
  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: #a3a3a3;
  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 .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: #a3a3a3;
}

.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: #a3a3a3;
  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-x: 4rem;
  --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;
}

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

.cart-placeholder-icon {
  color: #6c757d;
}

.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;
}

.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 {
  border-top: 1px solid var(--cl-accent);
  margin: 0.5rem 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-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);
}

/* 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-5 {
  width: 1.25rem;
  height: 1.25rem;
}

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

: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;
}
/* ===== NAVBAR LINKS – THEME 2 MATCH ===== */

.navbar a,
.navbar .nav-link {
    color: #ffffff !important;   /* reines Weiß */
    font-weight: 900;
    font-size: 19px;
    letter-spacing: 1px;         /* Luft im Text wie Theme 2 */
    padding: 0 70px;             /* 👈 großer horizontaler Abstand */
    opacity: 1;
    transition: color 0.2s ease;
}

/* Abstand zwischen den Menüpunkten */
.navbar ul,
.navbar .nav {
    gap: 140px;                   /* 👈 exakt der Look aus Theme 2 */
}

/* Hover bleibt clean (kein Grau) */
.navbar a:hover,
.navbar .nav-link:hover {
    color: #ffffff;
}

/* Aktiver Menüpunkt */
.navbar a.active,
.navbar .nav-link.active {
    color: #ffffff;
}
/* ===== HERO CENTER FIX (forces proper center) ===== */
.hero-center{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Pill center */
.pill-center{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

/* Yellow pill */
.premium-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.16);
  color: #fde047;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4px;
  box-shadow: 0 0 0 1px rgba(250,204,21,0.4), 0 0 25px rgba(250,204,21,0.45);
  backdrop-filter: blur(6px);
}

/* Title */
.hero-title{
  font-size: clamp(38px, 5.5vw, 72px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.12;
  margin-bottom: 14px;
}

/* Highlight word */
.hero-title span{
  color: #fde047;
  text-shadow: 0 0 28px rgba(250,204,21,0.45);
}

/* Subtitle */
.hero-subtitle{
  max-width: 720px;
  margin: 0 auto;
  font-size: 16px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
}
<div class="cta-wrapper">
  <a href="/products" class="cta-btn">Browse Products</a>
  <a href="https://discord.gg/DEIN-DISCORD" class="cta-btn">Join Discord</a>
</div>

<style>
.cta-wrapper {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

/* Button Grundstyle */
.cta-btn {
  padding: 14px 28px;
  border-radius: 12px;
  border: 2px solid #FFD84D;
  color: #FFD84D;
  text-decoration: none;
  font-weight: 600;
  background: transparent;
  transition: all 0.25s ease;
}

/* Hover / Click = GELB */
.cta-btn:hover,
.cta-btn:active {
  background: #FFD84D;
  color: #000;
  box-shadow: 0 0 25px rgba(255, 216, 77, 0.6);
}
/* ===============================
   HERO BUTTONS – GELB BEI HOVER
   =============================== */

.hero-buttons {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 24px;
}

.hero-button {
  position: relative;
  padding: 14px 34px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04); /* normal dunkel */
  border: 2px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.25s ease;
  cursor: pointer;
}

/* 👉 HOVER / KLICK = GELB */
.hero-button:hover,
.hero-button:active,
.hero-button:focus {
  background: rgba(255, 200, 0, 0.12);
  border-color: #ffd84d;
  color: #ffd84d;
  box-shadow: 0 0 18px rgba(255, 200, 0, 0.45);
  transform: translateY(-2px);
}

/* Klick-Effekt */
.hero-button:active {
  transform: scale(0.96);
}
/* ===============================
   HERO STATS – GELB
   =============================== */

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 44px;
  margin-top: 36px;
  flex-wrap: wrap;
  text-align: center;
}

.hero-stat {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.hero-stat:hover {
  transform: translateY(-4px);
}

/* ZAHL */
.hero-stat-number {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: #ffffff; /* NORMAL: weiß */
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* TEXT */
.hero-stat-label {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.25s ease;
}

/* HOVER + KLICK = GELB */
.hero-stat:hover .hero-stat-number,
.hero-stat:active .hero-stat-number {
  color: #ffd84d;
  text-shadow: 0 0 18px rgba(255, 216, 77, 0.6);
}

.hero-stat:hover .hero-stat-label,
.hero-stat:active .hero-stat-label {
  color: #ffd84d;
}
/* ===============================
   HERO STATS – ABSTÄNDE WIE IM BILD
   =============================== */

.hero-stats {
  display: flex;
  justify-content: center;
  align-items: center;

  /* DAS sind die Abstände */
  gap: 80px;              /* Abstand zwischen den Boxen */
  margin-top: 60px;       /* Abstand nach oben (von Buttons/Text) */
  margin-bottom: 80px;    /* Abstand nach unten */

  flex-wrap: wrap;
  text-align: center;
}

/* Einzelne Stat Box */
.hero-stat {
  min-width: 120px;       /* damit alles gleich breit ist */
}
/* ===== HERO CORNER LINES ===== */
.hero-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-corners::before,
.hero-corners::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid #ffd84d;
  box-shadow: 0 0 12px rgba(255, 216, 77, 0.6);
}

/* TOP LEFT */
.hero-corners::before {
  top: -10px;
  left: -10px;
  border-right: none;
  border-bottom: none;
}

/* BOTTOM RIGHT */
.hero-corners::after {
  bottom: -10px;
  right: -10px;
  border-left: none;
  border-top: none;
}

/* Hero container MUST be relative */
.hero,
.hero-section,
.hero-wrapper {
  position: relative;
}
.payment-section {
  margin-top: 80px;
  padding: 40px;
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 18px;
  background: rgba(255, 215, 0, 0.02);
  text-align: center;
}

.payment-section h2 {
  color: #ffd700;
  font-size: 28px;
}

.payment-section p {
  color: #bdbdbd;
  margin-bottom: 30px;
}

.payment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.payment-card {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 14px;
  padding: 20px;
  transition: 0.25s ease;
}

.payment-card img {
  width: 42px;
  margin-bottom: 10px;
}

.payment-card span {
  color: #ffd700;
  font-weight: 500;
}

.payment-card:hover {
  border-color: #ffd700;
  box-shadow: 0 0 20px rgba(255,215,0,0.35);
  transform: translateY(-3px);
}
.hero::before,
.hero::after {
  display: none !important;
}
section::before,
section::after {
  display: none !important;
}
.payment-section::before,
.payment-section::after {
  display: none !important;
}
.hero::before,
.hero::after {
  display: none !important;
}
/* KILL decorative corner lines */
::before,
::after {
  box-shadow: none !important;
}

/* falls es Border-Ecken sind */
.hero::before,
.hero::after,
.section::before,
.section::after {
  content: none !important;
  display: none !important;
}
/* kill decorative corner */
.hero::before,
.hero::after,
.section::before,
.section::after {
  content: none !important;
  display: none !important;
}
[class*="corner"],
[class*="decor"],
[class*="line"] {
  display: none !important;
}
.shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}

.shop-card{
  background:rgba(20,20,25,0.75);
  border:1px solid rgba(255,215,0,0.25);
  border-radius:18px;
  padding:18px;
  position:relative;
  transition:0.25s;
}

.shop-card:hover{
  border-color:rgba(255,215,0,0.7);
  box-shadow:0 0 25px rgba(255,215,0,0.15);
}

.shop-badge{
  position:absolute;
  top:12px;
  right:12px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:#000;
  color:#fff;
  display:flex;
  gap:6px;
  align-items:center;
}

.shop-badge .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ffd700;
  box-shadow:0 0 10px #ffd700;
}

.shop-icon{
  height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  color:#ffd700;
}

.shop-title{
  color:#fff;
  font-size:18px;
  font-weight:700;
}

.shop-price{
  color:#ffd700;
  font-size:18px;
  font-weight:800;
  margin-bottom:12px;
}

.shop-btn{
  display:block;
  text-align:center;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,215,0,0.3);
  color:#ffd700;
  text-decoration:none;
  font-weight:700;
}

.shop-btn:hover{
  background:#ffd700;
  color:#000;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

/* PRODUCT CARD */
.product-card {
  height: 360px;
  padding: 20px;
  border: 1px solid #ffd400;
  border-radius: 14px;
  background: rgba(255, 212, 0, 0.03);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ICON */
.product-icon {
  font-size: 40px;
  color: #ffd400;
  margin: 20px 0;
}

/* TITLE */
.product-card h3 {
  color: #fff;
  font-size: 18px;
}

/* PRICE */
.price {
  color: #ffd400;
  font-weight: bold;
  font-size: 18px;
}

/* STATUS */
.status {
  align-self: flex-start;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 212, 0, 0.15);
  color: #ffd400;
}

/* UNAVAILABLE */
.product-card.unavailable {
  opacity: 0.5;
}

/* BUTTON */
.btn {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ffd400;
  color: #ffd400;
  text-decoration: none;
  transition: 0.2s;
}

.btn:hover {
  background: #ffd400;
  color: #000;
}

.btn.disabled {
  pointer-events: none;
  opacity: 0.4;
}
<div class="product-card">
  <div class="product-status available">Available</div>
  <div class="product-name">Test Product</div>
  <div class="product-price">$1.00</div>
  <a class="product-button">View Details</a>
</div>
/* Produkt Karte */
.product-card {
  background: rgba(255, 215, 0, 0.05);
  border: 2px solid #ffd700;
  border-radius: 16px;
  padding: 20px;
  transition: 0.3s ease;
}

.product-card:hover {
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
}

/* Status Badge */
.product-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
}

.product-status.available {
  background: rgba(0, 255, 100, 0.15);
  color: #00ff64;
}

.product-status.unavailable {
  background: rgba(255, 80, 80, 0.15);
  color: #ff5050;
}

/* Preis */
.product-price {
  color: #ffd700;
  font-weight: 700;
  font-size: 18px;
}

/* View Details Button */
.product-button {
  border: 2px solid #ffd700;
  color: #ffd700;
  background: transparent;
  padding: 10px 16px;
  border-radius: 10px;
  display: inline-block;
  margin-top: 12px;
  transition: 0.2s;
}

.product-button:hover {
  background: #ffd700;
  color: #000;
}
.product, .product-card, .products, .products-grid {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* === DEBUG: PRODUCTS IMMER SICHTBAR (Test) === */
.products,
.products-grid,
.product-grid,
.product-list,
.product-card,
.card,
.shop,
.shop-grid,
.store,
.store-grid {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* falls es ein einzelnes Element ist */
.product,
.product-item,
.product-box {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* falls irgendwas drüber liegt */
.overlay,
.modal,
.backdrop,
.popup {
  pointer-events: none !important;
}

/* falls body/section versteckt wurde */
section,
main,
#app,
#root {
  visibility: visible !important;
  opacity: 1 !important;
}
/* ===== PRODUCTS: neutral default, yellow only on hover/click ===== */
:root{
  --y: #ffd400;
  --ySoft: rgba(255, 212, 0, .14);
  --yLine: rgba(255, 212, 0, .55);

  --nLine: rgba(255,255,255,.12);   /* neutral border */
  --nBg: rgba(255,255,255,.03);     /* neutral bg */
  --nText: rgba(255,255,255,.85);
}

/* ===== CARD (DEFAULT) ===== */
[class*="product"] [class*="card"],
[class*="product"] .card,
[class*="product"] .product{
  border: 1px solid var(--nLine) !important;
  background: var(--nBg) !important;
  box-shadow: none !important;
  transition: .18s ease !important;
}

/* Text default */
[class*="product"] [class*="card"] *{
  color: var(--nText);
}

/* PRICE default (nicht gelb) */
[class*="product"] [class*="price"],
[class*="product"] [class*="amount"]{
  color: rgba(255,255,255,.9) !important;
  font-weight: 800 !important;
}

/* OUT OF STOCK default (nicht blau) */
[class*="product"] [class*="stock"],
[class*="product"] [class*="status"]{
  color: rgba(255,255,255,.65) !important;
}

/* ===== HOVER / CLICK (gelb + glow) ===== */
[class*="product"] [class*="card"]:hover,
[class*="product"] [class*="card"]:active,
[class*="product"] [class*="card"]:focus-within,
[class*="product"] .card:hover,
[class*="product"] .card:active,
[class*="product"] .card:focus-within{
  border-color: var(--yLine) !important;
  box-shadow: 0 0 22px var(--ySoft) !important;
}

/* Price wird gelb bei hover/click */
[class*="product"] [class*="card"]:hover [class*="price"],
[class*="product"] [class*="card"]:active [class*="price"],
[class*="product"] [class*="card"]:focus-within [class*="price"],
[class*="product"] [class*="card"]:hover [class*="amount"],
[class*="product"] [class*="card"]:active [class*="amount"],
[class*="product"] [class*="card"]:focus-within [class*="amount"]{
  color: var(--y) !important;
  text-shadow: 0 0 14px rgba(255,212,0,.20) !important;
}

/* Out of Stock wird gelb bei hover/click */
[class*="product"] [class*="card"]:hover [class*="stock"],
[class*="product"] [class*="card"]:active [class*="stock"],
[class*="product"] [class*="card"]:focus-within [class*="stock"],
[class*="product"] [class*="card"]:hover [class*="status"],
[class*="product"] [class*="card"]:active [class*="status"],
[class*="product"] [class*="card"]:focus-within [class*="status"]{
  color: var(--y) !important;
  text-shadow: 0 0 12px rgba(255,212,0,.18) !important;
}

/* ===== BUTTON: normal neutral, hover/click gelb ===== */
[class*="product"] [class*="card"] a,
[class*="product"] [class*="card"] button{
  background: transparent !important;
  border: 1px solid var(--nLine) !important;
  color: rgba(255,255,255,.85) !important;
  box-shadow: none !important;
  transition: .18s ease !important;
}

[class*="product"] [class*="card"] a:hover,
[class*="product"] [class*="card"] a:active,
[class*="product"] [class*="card"] button:hover,
[class*="product"] [class*="card"] button:active{
  border-color: var(--yLine) !important;
  background: rgba(255,212,0,.10) !important;
  color: var(--y) !important;
  box-shadow: 0 0 18px rgba(255,212,0,.14) !important;
}

/* ===== REMOVE THE WEIRD BOX UNDER NAME (Tey6) ===== */
/* Das ist meist ein "input-like" container oder field wrapper */
[class*="product"] [class*="card"] input,
[class*="product"] [class*="card"] textarea,
[class*="product"] [class*="card"] select{
  display: none !important;
}

/* Falls es kein input ist, sondern ein leeres Rahmen-DIV */
[class*="product"] [class*="card"] [class*="field"],
[class*="product"] [class*="card"] [class*="box"],
[class*="product"] [class*="card"] [class*="outline"],
[class*="product"] [class*="card"] [class*="input"]{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* ===== FIX 1: Out of Stock default neutral, yellow only on hover/click ===== */
.product-card .stock,
.product-card .out-of-stock,
.product-card [class*="stock"],
.product-card [class*="out"],
.product-card [class*="status"]{
  color: rgba(255,255,255,.65) !important;  /* neutral */
  text-shadow: none !important;
}

/* hover/click -> gelb */
.product-card:hover .stock,
.product-card:active .stock,
.product-card:focus-within .stock,
.product-card:hover .out-of-stock,
.product-card:active .out-of-stock,
.product-card:focus-within .out-of-stock,
.product-card:hover [class*="stock"],
.product-card:active [class*="stock"],
.product-card:focus-within [class*="stock"],
.product-card:hover [class*="status"],
.product-card:active [class*="status"],
.product-card:focus-within [class*="status"]{
  color: #ffd400 !important;
  text-shadow: 0 0 12px rgba(255,212,0,.18) !important;
}


/* ===== FIX 2: Entfernt den "Tasten/Box" unter dem Produktnamen (Tey6) ===== */
/* meistens ist das ein input oder field wrapper */
.product-card input,
.product-card textarea,
.product-card select{
  display: none !important;
}

/* falls es ein leerer Rahmen-div ist */
.product-card [class*="input"],
.product-card [class*="field"],
.product-card [class*="box"],
.product-card [class*="outline"]{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* =========================
   A) "Out of Stock" neutral
   ========================= */

/* Standard: neutral (egal welche Klasse) */
*:is(.stock,.status,.availability,.badge,.pill,.tag,[class*="stock"],[class*="Stock"],[class*="status"],[class*="Status"],[class*="avail"],[class*="Avail"])
{
  color: rgba(255,255,255,.65) !important;
  text-shadow: none !important;
}

/* Hover/Klick (ganze Karte / Produkt / link / button) -> gelb */
*:is(.product,.product-card,.product-item,.shop-item,.store-item,.card,[class*="product"],[class*="Product"],[class*="shop"],[class*="Shop"],[class*="card"],[class*="Card"])
:hover
*:is(.stock,.status,.availability,.badge,.pill,.tag,[class*="stock"],[class*="Stock"],[class*="status"],[class*="Status"],[class*="avail"],[class*="Avail"])
{
  color: #ffd400 !important;
  text-shadow: 0 0 12px rgba(255,212,0,.20) !important;
}

/* =========================
   B) Die Box unter "Tey6" weg
   ========================= */

/* Alle Inputs/Fields innerhalb Produktkarten verstecken */
*:is(.product,.product-card,.product-item,.shop-item,.store-item,.card,[class*="product"],[class*="Product"],[class*="shop"],[class*="Shop"],[class*="card"],[class*="Card"])
input,
*:is(.product,.product-card,.product-item,.shop-item,.store-item,.card,[class*="product"],[class*="Product"],[class*="shop"],[class*="Shop"],[class*="card"],[class*="Card"])
textarea,
*:is(.product,.product-card,.product-item,.shop-item,.store-item,.card,[class*="product"],[class*="Product"],[class*="shop"],[class*="Shop"],[class*="card"],[class*="Card"])
select
{
  display: none !important;
}

/* Falls es kein input ist, sondern ein leerer "Rahmen"-Div */
*:is(.product,.product-card,.product-item,.shop-item,.store-item,.card,[class*="product"],[class*="Product"],[class*="shop"],[class*="Shop"],[class*="card"],[class*="Card"])
*:is([class*="field"],[class*="Field"],[class*="input"],[class*="Input"],[class*="outline"],[class*="Outline"],[class*="box"],[class*="Box"])
{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* ================================
   PRODUKT-KARTE – BASIS (neutral)
   ================================ */

.product,
.product-card,
.shop-item,
.card {
  border: 1px solid rgba(255,255,255,0.15) !important;
  box-shadow: none !important;
}

/* Titel / Preis / Status neutral */
.product *,
.product-card *,
.shop-item *,
.card * {
  color: rgba(255,255,255,0.85) !important;
  text-shadow: none !important;
}

/* ================================
   HOVER / CLICK → GELB + GLOW
   ================================ */

.product:hover,
.product-card:hover,
.shop-item:hover,
.card:hover {
  border-color: #ffd400 !important;
  box-shadow: 0 0 25px rgba(255,212,0,.35) !important;
}

/* Text bei Hover */
.product:hover *,
.product-card:hover *,
.shop-item:hover *,
.card:hover * {
  color: #ffd400 !important;
}

/* ================================
   OUT OF STOCK – neutral → gelb bei hover
   ================================ */

.out-of-stock,
.stock,
.status {
  color: rgba(255,255,255,.6) !important;
}

.product:hover .out-of-stock,
.product:hover .stock,
.product:hover .status {
  color: #ffd400 !important;
}

/* ================================
   BOX / INPUT unter "Tey6" ENTFERNEN
   ================================ */

.product input,
.product textarea,
.product select,
.product [class*="input"],
.product [class*="field"],
.product [class*="box"] {
  display: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ================================
   VIEW DETAILS BUTTON
   ================================ */

.product .view-details,
.product button {
  border: 1px solid rgba(255,255,255,.25) !important;
  background: transparent !important;
  color: rgba(255,255,255,.85) !important;
}

.product:hover .view-details,
.product:hover button {
  border-color: #ffd400 !important;
  color: #ffd400 !important;
  box-shadow: 0 0 15px rgba(255,212,0,.35) !important;
}
/* ===== PRODUCT CARD ===== */
.product-card {
  position: relative;
  background: #0f1116;
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 14px;
  padding: 18px;
  transition: all 0.3s ease;
}

/* 🔥 EIN Glow für ALLES */
.product-card:hover {
  border-color: #ffd700;
  box-shadow:
    0 0 12px rgba(255, 215, 0, 0.35),
    0 0 28px rgba(255, 215, 0, 0.2);
}

/* ❌ WICHTIG: Entfernt geteilte Hover-Effekte */
.product-card * {
  pointer-events: none;
}

.product-card {
  pointer-events: auto;
}

/* ===== PRICE ===== */
.product-price {
  color: #ffd700;
  font-weight: 700;
}

/* ===== STATUS ===== */
.product-status {
  color: #9aa0a6;
  transition: color 0.3s ease;
}

.product-card:hover .product-status {
  color: #ffd700;
}

/* ===== NAME (kein Button Look!) ===== */
.product-name {
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  color: #fff;
}

/* ===== VIEW DETAILS BUTTON ===== */
.view-details {
  pointer-events: auto;
  margin-top: 12px;
  border: 1px solid rgba(255, 215, 0, 0.35);
  background: transparent;
  color: #ffd700;
  border-radius: 10px;
  padding: 10px;
  transition: all 0.3s ease;
}

.product-card:hover .view-details {
  background: #ffd700;
  color: #000;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.6);
}
.product-card {
  border: 1px solid rgba(255,215,0,.3);
  border-radius: 14px;
  transition: .3s;
}

.product-card:hover {
  border-color: #ffd700;
  box-shadow: 0 0 30px rgba(255,215,0,.35);
}

.product-card:hover .product-status {
  color: #ffd700;
}
.product-card{
  position: relative;
  border: 1px solid rgba(255, 200, 0, 0.25);
  border-radius: 14px;
  overflow: hidden;           /* wichtig: verbindet optisch */
  background: rgba(255,255,255,0.02);
  transition: .2s ease;
}

.product-card:hover{
  border-color: rgba(255, 200, 0, 0.9);
  box-shadow: 0 0 25px rgba(255, 200, 0, 0.25);
}

/* WICHTIG: oben/unten dürfen NICHT nochmal eigene borders haben */
.product-top,
.product-bottom{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* falls bei dir so ein Trennstrich in der Mitte ist */
.product-top{
  border-bottom: 1px solid rgba(255, 200, 0, 0.18);
}
.product-card:hover .product-top{
  border-bottom-color: rgba(255, 200, 0, 0.65);
}
/* View Details neutral */
.product-card .view-details,
.product-card .btn,
.product-card button {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: #cfcfcf;
  box-shadow: none;
  transition: 
all .2s ease;
}
/* Wenn man die GANZE Card hovert */
.product-card:hover .view-details,
.product-card:hover .btn,
.product-card:hover button {
  border-color: rgba(255,200,0,.9);
  color: rgb(255,200,0);
  box-shadow: 0 0 18px rgba(255,200,0,.35);
}

/* Optional: extra Glow wenn man DIREKT auf den Button geht */
.product-card .view-details:hover,
.product-card .btn:hover,
.product-card button:hover {
  background: rgba(255,200,0,.08);
}
.product-card .view-details{
  color: #cfcfcf !important;
  border-color: rgba(255,255,255,.15) !important;
}
/* =========================
   FORCE: View Details NEUTRAL
   (nur gelb bei hover)
   ========================= */

/* Neutral: ALLE Buttons/Links in der Product-Card */
.product-card :is(a, button, .btn, .view-details) {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.78) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: all .2s ease !important;
}

/* Nur bei Hover auf DIE CARD: gelb */
.product-card:hover :is(a, button, .btn, .view-details) {
  border-color: rgba(255,200,0,0.95) !important;
  color: rgb(255,200,0) !important;
  box-shadow: 0 0 18px rgba(255,200,0,0.35) !important;
}

/* Nur bei Hover direkt auf dem Button: bisschen gelber Hintergrund */
.product-card :is(a, button, .btn, .view-details):hover {
  background: rgba(255,200,0,0.10) !important;
}
/* FALLBACK: jeder Button/Link mit "View Details" style neutral */
a, button {
  box-shadow: none;
}

a:where(:not(nav a)),
button {
  /* nichts */
}
/* Grundstyle (neutral) */
.pay-card{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  padding: 18px 22px;
  transition: .2s ease;
}

/* BITCOIN = ROT */
.pay-bitcoin{
  border-color: rgba(255,80,80,0.85);
  box-shadow: 0 0 18px rgba(255,80,80,0.20);
}
.pay-bitcoin *{
  color: rgb(255,80,80) !important;
  fill: rgb(255,80,80) !important;
}

/* LITECOIN / STRIPE / PAYPAL = GRÜN */
.pay-litecoin,
.pay-stripe,
.pay-paypal{
  border-color: rgba(0,255,140,0.85);
  box-shadow: 0 0 18px rgba(0,255,140,0.20);
}
.pay-litecoin *,
.pay-stripe *,
.pay-paypal *{
  color: rgb(0,255,140) !important;
  fill: rgb(0,255,140) !important;
}
/* Notlösung: sucht nach Text im Kasten */
.pay-card:has(*:not(script):not(style):not(meta):not(link):not(title)):has(:is(h3,span,p,div):contains("Bitcoin")){
  border-color: rgba(255,80,80,0.85);
}
/* RESET für alle Payment-Boxen */
.payment-method,
.pay-card,
.payment-option {
  border-color: rgba(255, 80, 80, 0.9) !important;
  box-shadow: 0 0 18px rgba(255, 80, 80, 0.25) !important;
}

.payment-method *,
.pay-card *,
.payment-option * {
  color: rgb(255, 80, 80) !important;
  fill: rgb(255, 80, 80) !important;
}
/* NUR LITECOIN GRÜN */
.payment-method.litecoin,
.pay-card.litecoin,
.payment-option.litecoin {
  border-color: rgba(0, 255, 140, 0.95) !important;
  box-shadow: 0 0 22px rgba(0, 255, 140, 0.35) !important;
}

.payment-method.litecoin *,
.pay-card.litecoin *,
.payment-option.litecoin * {
  color: rgb(0, 255, 140) !important;
  fill: rgb(0, 255, 140) !important;
}
/* ALLES ROT */
.payment-method,
.pay-card,
.payment-option {
  border-color: rgba(255, 80, 80, 0.9) !important;
  box-shadow: 0 0 18px rgba(255, 80, 80, 0.25) !important;
}

.payment-method *, .pay-card *, .payment-option * {
  color: rgb(255, 80, 80) !important;
  fill: rgb(255, 80, 80) !important;
}

/* NUR DIE 2. BOX (Litecoin) GRÜN */
.payment-method:nth-child(2),
.pay-card:nth-child(2),
.payment-option:nth-child(2) {
  border-color: rgba(0, 255, 140, 0.95) !important;
  box-shadow: 0 0 22px rgba(0, 255, 140, 0.35) !important;
}

.payment-method:nth-child(2) *, 
.pay-card:nth-child(2) *,
.payment-option:nth-child(2) * {
  color: rgb(0, 255, 140) !important;
  fill: rgb(0, 255, 140) !important;
}
/* ===== ICONS WIEDER AKTIVIEREN ===== */
.product-card svg,
.product-card i,
.payment-method svg,
.payment-method i {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

/* ===== BUTTONS WIEDER NORMAL ===== */
.product-card button,
.product-card .btn,
.product-card a.button {
  background: transparent;
  border-radius: 12px;
  transition: all .25s ease;
}

/* Hover = Glow wie früher */
.product-card button:hover,
.product-card .btn:hover,
.product-card a.button:hover {
  box-shadow: 0 0 18px currentColor;
  transform: translateY(-1px);
}

/* Click */
.product-card button:active,
.product-card .btn:active,
.product-card a.button:active {
  transform: scale(0.97);
}
/* =========================
   FORCE: ICONS + BUTTONS BACK
   (nur im Shop/Products Bereich)
   ========================= */

/* 1) Icons wieder anzeigen (SVG, IMG, Font-Icons) */
#shop svg, #shop img, #shop i,
.shop svg, .shop img, .shop i,
.products svg, .products img, .products i,
[class*="shop"] svg, [class*="shop"] img, [class*="shop"] i,
[class*="product"] svg, [class*="product"] img, [class*="product"] i {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* Falls irgendwas "aus dem Layout" gedrückt wurde */
#shop svg, .shop svg, .products svg,
[class*="product"] svg {
  width: auto !important;
  height: auto !important;
}

/* 2) Button Styles wieder aktiv (a, button, input) */
#shop a, #shop button, #shop input[type="button"], #shop input[type="submit"],
.shop a, .shop button, .shop input[type="button"], .shop input[type="submit"],
.products a, .products button, .products input[type="button"], .products input[type="submit"],
[class*="product"] a, [class*="product"] button, [class*="product"] input[type="button"], [class*="product"] input[type="submit"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all .25s ease !important;
}

/* Hover: Glow mit currentColor (nimmt automatisch rot/grün/gelb) */
#shop a:hover, #shop button:hover, #shop input[type="button"]:hover, #shop input[type="submit"]:hover,
.shop a:hover, .shop button:hover, .shop input[type="button"]:hover, .shop input[type="submit"]:hover,
.products a:hover, .products button:hover, .products input[type="button"]:hover, .products input[type="submit"]:hover,
[class*="product"] a:hover, [class*="product"] button:hover, [class*="product"] input[type="button"]:hover, [class*="product"] input[type="submit"]:hover {
  border-color: currentColor !important;
  box-shadow: 0 0 18px rgba(255,255,255,0.12), 0 0 26px currentColor !important;
  transform: translateY(-1px) !important;
}

/* Click */
#shop a:active, #shop button:active, #shop input[type="button"]:active, #shop input[type="submit"]:active,
.shop a:active, .shop button:active, .products a:active, .products button:active,
[class*="product"] a:active, [class*="product"] button:active {
  transform: scale(0.97) !important;
}

/* 3) WICHTIG: falls du vorher Buttons/Icons komplett deaktiviert hast */
#shop * , .shop * , .products * , [class*="product"] * {
  pointer-events: auto !important;
}
body { outline: 5px solid red !important; }
/* =========================
   PAYMENT METHODS – FARBE OHNE LAYOUT ÄNDERUNG
   ========================= */

/* Basis: alles neutral */
.payment-method,
.payment-method * {
  color: #e5e7eb !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
  transition: all .25s ease;
}

/* ---------- BITCOIN (ROT) ---------- */
.payment-method.bitcoin:hover {
  border-color: #ff3b3b !important;
  box-shadow: 0 0 18px rgba(255,59,59,.6) !important;
}
.payment-method.bitcoin:hover *,
.payment-method.bitcoin.active * {
  color: #ff3b3b !important;
}

/* ---------- LITECOIN (GRÜN) ---------- */
.payment-method.litecoin:hover {
  border-color: #22c55e !important;
  box-shadow: 0 0 18px rgba(34,197,94,.6) !important;
}
.payment-method.litecoin:hover *,
.payment-method.litecoin.active * {
  color: #22c55e !important;
}

/* ---------- STRIPE (GRÜN) ---------- */
.payment-method.stripe:hover {
  border-color: #22c55e !important;
  box-shadow: 0 0 18px rgba(34,197,94,.6) !important;
}
.payment-method.stripe:hover *,
.payment-method.stripe.active * {
  color: #22c55e !important;
}

/* ---------- PAYPAL (GRÜN) ---------- */
.payment-method.paypal:hover {
  border-color: #22c55e !important;
  box-shadow: 0 0 18px rgba(34,197,94,.6) !important;
}
.payment-method.paypal:hover *,
.payment-method.paypal.active * {
  color: #22c55e !important;
}
/* =========================
   FIX: PAYMENT wieder als KARTEN (nicht Balken)
   ========================= */

/* Falls es eine UL/LI Liste ist -> keine List-Styles */
.payment-methods,
.payment-methods ul,
.payment-methods li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Container: Karten nebeneinander */
.payment-methods{
  display: flex !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

/* Jede Payment-Card (wichtig: nicht mehr „Balken“) */
.payment-method{
  width: 220px !important;
  min-height: 120px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 16px !important;

  overflow: visible !important;
  white-space: normal !important;
  text-overflow: unset !important;

  transition: all .25s ease !important;
}

/* Text/Icons wieder sichtbar */
.payment-method .icon,
.payment-method i,
.payment-method svg,
.payment-method img{
  display: block !important;
  margin-bottom: 10px !important;
  font-size: 32px !important;
}

.payment-method .name,
.payment-method span,
.payment-method p{
  color: #e5e7eb !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

/* =========================
   FARBEN: BTC ROT, Rest GRÜN (nur Hover/Active Glow)
   ========================= */

.payment-method.bitcoin:hover,
.payment-method.bitcoin.active{
  border-color: #ff3b3b !important;
  box-shadow: 0 0 18px rgba(255,59,59,.55) !important;
}
.payment-method.bitcoin:hover .name,
.payment-method.bitcoin.active .name,
.payment-method.bitcoin:hover i,
.payment-method.bitcoin.active i,
.payment-method.bitcoin:hover svg,
.payment-method.bitcoin.active svg{
  color: #ff3b3b !important;
  fill: #ff3b3b !important;
}

/* Litecoin/Stripe/PayPal GRÜN */
.payment-method.litecoin:hover,
.payment-method.litecoin.active,
.payment-method.stripe:hover,
.payment-method.stripe.active,
.payment-method.paypal:hover,
.payment-method.paypal.active{
  border-color: #22c55e !important;
  box-shadow: 0 0 18px rgba(34,197,94,.55) !important;
}

.payment-method.litecoin:hover .name,
.payment-method.litecoin.active .name,
.payment-method.stripe:hover .name,
.payment-method.stripe.active .name,
.payment-method.paypal:hover .name,
.payment-method.paypal.active .name,
.payment-method.litecoin:hover i,
.payment-method.litecoin.active i,
.payment-method.stripe:hover i,
.payment-method.stripe.active i,
.payment-method.paypal:hover i,
.payment-method.paypal.active i,
.payment-method.litecoin:hover svg,
.payment-method.litecoin.active svg,
.payment-method.stripe:hover svg,
.payment-method.stripe.active svg,
.payment-method.paypal:hover svg,
.payment-method.paypal.active svg{
  color: #22c55e !important;
  fill: #22c55e !important;
}
/* =========================
   RESET: Secure Payment Methods (ORIGINAL)
   ========================= */

/* Container */
.secure-payment-methods,
.payment-methods {
  display: flex !important;
  gap: 20px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-top: 30px !important;
}

/* Card */
.payment-method {
  width: 220px !important;
  height: 120px !important;

  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 16px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: none !important;
  transition: border-color .2s ease, background .2s ease !important;
}

/* Hover (neutral, kein Glow) */
.payment-method:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.25) !important;
}

/* Icons */
.payment-method i,
.payment-method svg,
.payment-method img {
  font-size: 32px !important;
  width: 32px !important;
  height: 32px !important;
  margin-bottom: 10px !important;
  color: #e5e7eb !important;
  fill: #e5e7eb !important;
}

/* Text */
.payment-method span,
.payment-method p,
.payment-method .name {
  color: #e5e7eb !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* WICHTIG: alles was Balken/… macht AUS */
.payment-method,
.payment-method * {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  box-shadow: none !important;
}

/* Listen-Reset falls UL/LI */
.payment-methods ul,
.payment-methods li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.payment-section {
  margin-top: 80px;
  padding: 40px;
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 18px;
  background: rgba(255, 215, 0, 0.02);
  text-align: center;
}

.payment-section h2 {
  color: #ffd700;
  font-size: 28px;
}

.payment-section p {
  color: #bdbdbd;
  margin-bottom: 30px;
}

.payment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.payment-card {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 14px;
  padding: 20px;
  transition: 0.25s ease;
}

.payment-card img {
  width: 42px;
  margin-bottom: 10px;
}

.payment-card span {
  color: #ffd700;
  font-weight: 500;
}

.payment-card:hover {
  border-color: #ffd700;
  box-shadow: 0 0 20px rgba(255,215,0,0.35);
  transform: translateY(-3px);
}
.support-section {
  margin: 80px auto;
  max-width: 900px;
  padding: 40px;
  text-align: center;

  background: linear-gradient(
    180deg,
    rgba(255,215,0,0.08),
    rgba(255,215,0,0.02)
  );

  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 20px;

  box-shadow: 0 0 35px rgba(255,215,0,0.15);
}

.support-section h2 {
  color: #FFD700;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 14px;
}

.support-section p {
  color: #d1d5db;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.support-btn {
  display: inline-block;
  padding: 14px 34px;

  background: #FFD700;
  color: #111;

  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;

  text-decoration: none;
  transition: 0.2s ease;
}

.support-btn:hover {
  background: #ffea80;
  box-shadow: 0 0 25px rgba(255,215,0,0.6);
  transform: translateY(-2px);
}
.faq-section{
  max-width: 1100px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
}

.faq-section h2{
  font-size: 46px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.faq-subtitle{
  margin-top: 10px;
  color: #bfc6d1;
  font-size: 15px;
}

.faq-list{
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* accordion box */
.faq-item{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,215,0,0.45);
  background: rgba(255,215,0,0.04);
  overflow: hidden;
  transition: 0.2s ease;
  text-align: left;
}

/* remove default arrow */
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #FFD700;
  font-weight: 650;
  user-select: none;
}

.faq-item summary::-webkit-details-marker{
  display: none;
}

/* left icon */
.faq-icon{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,215,0,0.12);
  border: 1px solid rgba(255,215,0,0.35);
  color: #FFD700;
  font-weight: 800;
}

/* question text */
.faq-q{
  color: #FFD700;
  font-size: 16px;
}

/* answer */
.faq-a{
  padding: 0 18px 18px 58px; /* aligns under text after icon */
  color: #d6dde7;
  font-size: 14px;
  line-height: 1.6;
}

/* glow when open */
.faq-item[open]{
  box-shadow: 0 0 25px rgba(255,215,0,0.22);
  background: rgba(255,215,0,0.06);
}

/* hover effect */
.faq-item:hover{
  border-color: rgba(255,215,0,0.75);
}
/* === PRODUCT CARD BASE === */
.product-card,
.product,
.products-card {
  border: 1px solid rgba(255, 215, 0, 0.6);
  background: rgba(255, 215, 0, 0.04);
  border-radius: 16px;
  transition: all 0.25s ease;
}

/* Hover Glow */
.product-card:hover,
.product:hover {
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.45);
  transform: translateY(-3px);
}

/* === PRODUCT TITLE === */
.product-title,
.product h3 {
  color: #ffd700;
}

/* === PRICE === */
.product-price,
.product .price {
  color: #ffd700;
  font-weight: 600;
}

/* === VIEW DETAILS BUTTON === */
.product a,
.product-card a {
  background: transparent;
  border: 1px solid rgba(255, 215, 0, 0.6);
  color: #ffd700;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.product a:hover,
.product-card a:hover {
  background: #ffd700;
  color: #000;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

/* === STATUS BADGES === */
.badge.available {
  background: rgba(0, 255, 120, 0.15);
  color: #00ff78;
}

.badge.unavailable,
.out-of-stock {
  color: #ffd700;
  opacity: 0.85;
}

/* === REMOVE INPUT-LOOK UNDER PRODUCT NAME === */
.product input,
.product-card input {
  border: none;
  background: transparent;
  pointer-events: none;
}
/* 1) Die komplette Karte (nur HIER der gelbe Rahmen!) */
.product-card {
  border: 2px solid #ffd200;
  border-radius: 16px;
  overflow: hidden;              /* WICHTIG: verbindet alles clean */
  background: rgba(0,0,0,0.25);
}

/* 2) Oberer Teil (Bild/Preview) */
.product-card .product-top {
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* optional: wenn du eine Trennlinie willst */
.product-card .product-top {
  border-bottom: 1px solid rgba(255,210,0,0.35);
}

/* 3) Unterer Teil (Preis / Name / Stock) */
.product-card .product-bottom {
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 14px 16px;
}

/* 4) Falls bei dir irgendwo extra box/border um "Tey6" kommt */
.product-card input,
.product-card .name-box,
.product-card .product-name {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 5) Out of Stock Farbe neutral (nicht immer gelb) */
.product-card .stock {
  color: #b9b9b9; /* neutral */
}

/* Nur beim Hover/Click gelb leuchten lassen */
.product-card:hover {
  box-shadow: 0 0 25px rgba(255, 210, 0, 0.35);
}
.product-card:hover .stock {
  color: #ffd200;
}
.product-card{
  border: 2px solid #ffd200;
  border-radius: 16px;
  overflow: hidden; /* DAS verbindet oben+unten */
  background: rgba(0,0,0,0.25);
  width: 320px;
}

.product-top{
  padding: 22px;
  text-align: center;
  border-bottom: 1px solid rgba(255,210,0,0.25);
}

.product-bottom{
  padding: 18px;
}

.product-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price{
  color: #ffd200;
  font-weight: 700;
  font-size: 22px;
}

.stock{
  color: #ffd200;
  font-weight: 600;
}

.name{
  margin-top: 10px;
  color: #ffd200;
  font-size: 20px;
  font-weight: 700;
}

/* Button neutral -> nur beim Hover gelb */
.product-btn{
  display: inline-block;
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,210,0,0.35);
  color: #ddd;
  text-decoration: none;
  background: rgba(255,255,255,0.03);
  transition: .2s;
}
.product-btn:hover{
  color: #ffd200;
  border-color: #ffd200;
  box-shadow: 0 0 18px rgba(255,210,0,0.35);
}

.product-icon{
  font-size: 48px;
  color: #ffd200;
}
/* entfernt “getrenntes” aussehen */
.product-card *{
  box-shadow: none !important;
}

/* damit border nur außen ist */
.product-card{
  border: 2px solid #ffd200 !important;
}
.product-card .product-top,
.product-card .product-bottom{
  border: none !important;
}
/* ===== FIX: nur 1 Rahmen + alles verbunden ===== */

/* 1) Haupt-Card = EIN Rahmen */
.product-card,
.product,
.product-item,
.card {
  border: 2px solid rgba(255, 210, 0, 0.8) !important;
  border-radius: 18px !important;
  overflow: hidden !important;          /* verbindet oben+unten */
  box-shadow: none !important;
  outline: none !important;
}

/* 2) Entfernt den 2. Rahmen (innerer wrapper / sections) */
.product-card * ,
.product * ,
.product-item * ,
.card * {
  outline: none !important;
}

/* killt innere borders (der zweite Render) */
.product-card .inner,
.product-card .wrapper,
.product-card .content,
.product-card .body,
.product-card .footer,
.product-card .header,
.product-card .image,
.product-card .media,
.product-card .thumb,
.product-card .top,
.product-card .bottom,
.product .inner,
.product .wrapper,
.product-item .inner,
.product-item .wrapper,
.card .inner,
.card .wrapper {
  border: none !important;
  box-shadow: none !important;
}

/* 3) Falls der 2. Rahmen von ::before / ::after kommt */
.product-card::before,
.product-card::after,
.product::before,
.product::after,
.product-item::before,
.product-item::after,
.card::before,
.card::after {
  content: none !important;
  display: none !important;
}

/* 4) Der Trennstrich zwischen oben/unten weg */
.product-card hr,
.product hr,
.product-item hr,
.card hr {
  display: none !important;
}
/* ===== FIX: Produktbild sichtbar machen ===== */

/* falls irgendein CSS Bilder ausblendet */
.product-card img,
.product img,
.product-item img,
.card img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Bildbereich bekommt echte Höhe */
.product-card .media,
.product-card .image,
.product-card .thumb,
.product-card .thumbnail,
.product-card .product-image,
.product-card .product-thumb,
.product-card .product-media {
  height: 220px !important;      /* kannst du anpassen */
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

/* Bild füllt den Bereich schön aus */
.product-card .media img,
.product-card .image img,
.product-card .thumb img,
.product-card .thumbnail img,
.product-card .product-image img,
.product-card .product-thumb img,
.product-card .product-media img,
.product-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* falls ein Overlay drüber liegt */
.product-card::before,
.product-card::after {
  pointer-events: none !important;
}
/* ===== FIX: doppelten Render entfernen ===== */

/* Nur EIN Rahmen auf der Card */
.product-card {
  border: 2px solid #FFD700 !important;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.45) !important;
}

/* Pseudo-Elemente komplett ausschalten */
.product-card::before,
.product-card::after {
  content: none !important;
  display: none !important;
}
/* Inneren Card-Wrapper neutralisieren */
.product-card * {
  border: none !important;
  box-shadow: none !important;
}
/* ===== NUR 1 RENDER (Rahmen) erzwingen ===== */

/* 1) Auf ALLES was nach "product" aussieht: Rahmen/Glow entfernen */
.product-card,
.product-card * ,
[class*="product"] ,
[class*="product"] * {
  outline: none !important;
}

/* 2) Pseudo-Elemente (oft der 2. Rahmen) aus */
.product-card::before,
.product-card::after,
[class*="product"]::before,
[class*="product"]::after {
  content: none !important;
  display: none !important;
}

/* 3) Jetzt geben wir NUR der echten Card EINEN Rahmen zurück */
.product-card {
  border: none !important;
  position: relative !important;
  border-radius: 16px !important;
}

/* 4) Der eine Rahmen kommt als einziges ::after zurück */
.product-card::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border: 2px solid #FFD700 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  box-shadow: 0 0 18px rgba(255,215,0,.45) !important;
}
/* ===== WRAPPER KOMPLETT TÖTEN ===== */
.product-wrapper,
.product-container,
.product-item {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.product-card {
  position: relative !important;
  border-radius: 16px;
  border: 2px solid #FFD700;
  box-shadow: 0 0 18px rgba(255,215,0,.45);
}
/* === FIX: DOPPELTEN RAND KILLEN (ALLES NEUTRAL) === */
.product-card,
.product-card * {
  box-shadow: none !important;
}

.product-card::before,
.product-card::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* manche Themes geben dem Bild-Container oder inneren wrapper border/glow */
.product-card .image,
.product-card .image-wrap,
.product-card .thumb,
.product-card .thumbnail,
.product-card .preview,
.product-card .cover,
.product-card .top,
.product-card .header {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* === NUR 1 RAND (DER ECHTE) === */
.product-card {
  border: 2px solid #FFD700 !important;
  border-radius: 16px !important;
  box-shadow: 0 0 18px rgba(255,215,0,.45) !important;
  overflow: hidden !important;
}
/* === ULTIMATE: ALLE DOPPEL-RÄNDER KILLEN === */

/* 1) Alles neutralisieren (auch outline + filter!) */
.product-card,
.product-card * ,
.product-card::before,
.product-card::after,
.product-card *::before,
.product-card *::after {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 2) Falls die Card in einem <a> Wrapper steckt (sehr häufig) */
.product-card a,
a.product-card,
.product-card-link,
a.product-card-link {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  text-decoration: none !important;
}

/* 3) Falls der zweite Rand vom Focus kommt */
.product-card:focus,
.product-card:focus-visible,
.product-card:active,
.product-card:hover {
  outline: none !important;
  box-shadow: none !important;
}

/* 4) JETZT NUR 1 RAND ZURÜCKGEBEN */
.product-card {
  border: 2px solid #FFD700 !important;
  border-radius: 16px !important;
  overflow: hidden !important;

  /* optional glow */
  box-shadow: 0 0 18px rgba(255,215,0,.45) !important;
}
/* FALLS EIN WRAPPER DEN 2. RAND MACHT (häufig) */
.product,
.product-item,
.product-box,
.card,
.card-wrap,
.product-wrapper,
.product-container {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}
body { outline: 6px solid red !important; }
.discord-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px;
  background: #FFD84D; /* gelb */
  color: #111;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(255,216,77,0.6);
  transition: all 0.2s ease;
}

.discord-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(255,216,77,0.9);
}
/* =========================
   FIX: Product card = nur 1 Rahmen (gelb)
   ========================= */

/* 1) Hauptkarte: 1 gelber Rahmen */
.product-card,
.product,
.product-item,
.store-product {
  border: 1px solid rgba(150, 86, 206, 0.65) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  overflow: hidden !important;
  box-shadow: 0 0 18px rgba(150, 86, 0, 0.18) !important;
}

/* 2) Killt den zweiten Rahmen, falls er von Pseudo-Elementen kommt */
.product-card::before,
.product-card::after,
.product::before,
.product::after,
.product-item::before,
.product-item::after,
.store-product::before,
.store-product::after {
  content: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 3) Killt den zweiten Rahmen, falls ein innerer Wrapper ihn macht */
.product-card * ,
.product * ,
.product-item * ,
.store-product * {
  outline: none !important;
}

.product-card .inner,
.product-card .wrapper,
.product-card .content,
.product-card .body,
.product .inner,
.product .wrapper,
.product .content,
.product .body,
.product-item .inner,
.product-item .wrapper,
.product-item .content,
.product-item .body {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
/* =========================
   NUCLEAR FRAME RESET
   KILL ALL BORDERS / GLOWS
   ========================= */

/* Alle bekannten Product-Container */
.product,
.product-card,
.product-item,
.store-product,
.shop-product,
.shop-card,
.card,
.item {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Killt ALLE inneren Wrapper */
.product *,
.product-card *,
.product-item *,
.store-product *,
.shop-product *,
.shop-card *,
.card *,
.item * {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Killt Pseudo-Elemente (::before / ::after) */
.product::before,
.product::after,
.product-card::before,
.product-card::after,
.product-item::before,
.product-item::after,
.store-product::before,
.store-product::after,
.shop-product::before,
.shop-product::after,
.shop-card::before,
.shop-card::after,
.card::before,
.card::after,
.item::before,
.item::after {
  content: none !important;
  display: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Killt Hover-Effekte */
.product:hover,
.product-card:hover,
.product-item:hover,
.store-product:hover,
.shop-product:hover,
.shop-card:hover,
.card:hover,
.item:hover {
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
/* === GLOBAL COLOR OVERRIDE: YELLOW → PURPLE === */

:root {
  --yellow: #a855f7;
  --yellow-glow: rgba(168, 85, 247, 0.6);
}

/* Text */
*[style*="yellow"],
*[style*="#facc15"],
*[style*="#fde047"],
*[style*="rgb(250"] {
  color: #a855f7 !important;
}

/* Borders */
* {
  border-color: rgba(168, 85, 247, 0.55) !important;
}

/* Buttons & Highlights */
button,
a,
.nav-link,
.btn,
.product-card,
.card {
  box-shadow:
    0 0 18px rgba(168, 85, 247, 0.35) !important;
}

/* Active navbar item (Products etc.) */
.nav-link.active,
.nav-link:hover {
  color: #c084fc !important;
  border-color: #a855f7 !important;
}

/* Background accents */
*[style*="background"] {
  background-color: rgba(168, 85, 247, 0.12) !important;
}
/* ===============================
   GLOBAL PURPLE THEME – SELLAUTH
   =============================== */

:root {
  --primary: #a855f7;
  --primary-light: #c084fc;
  --primary-dark: #7c3aed;
  --primary-glow: rgba(168, 85, 247, 0.55);
  --bg-glow: rgba(168, 85, 247, 0.12);
}

/* TEXT */
h1, h2, h3, h4, h5,
.highlight,
.title span,
.text-primary {
  color: var(--primary) !important;
}

/* NAVBAR */
.nav-link {
  color: #e5e7eb !important;
}

.nav-link.active,
.nav-link:hover {
  color: var(--primary-light) !important;
  border-bottom: 2px solid var(--primary) !important;
  box-shadow: 0 4px 12px var(--primary-glow);
}

/* BUTTONS */
button,
.btn,
a.btn {
  background: transparent !important;
  border: 1.5px solid var(--primary) !important;
  color: var(--primary-light) !important;
  box-shadow: 0 0 16px var(--primary-glow);
  transition: all 0.25s ease;
}

button:hover,
.btn:hover {
  background: var(--bg-glow) !important;
  box-shadow: 0 0 26px var(--primary-glow);
  transform: translateY(-1px);
}

/* PRIMARY BUTTON (z.B. Browse Products) */
.btn-primary {
  background: linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark)
  ) !important;
  color: #fff !important;
  border: none !important;
}

/* CARDS / PRODUCTS */
.card,
.product-card {
  border: 1.5px solid var(--primary) !important;
  box-shadow: 0 0 22px var(--primary-glow);
  background: rgba(20, 10, 30, 0.6) !important;
}

/* BADGES (Premium / 2Way Hub) */
.badge,
.pill,
.tag {
  background: var(--bg-glow) !important;
  color: var(--primary-light) !important;
  border: 1px solid var(--primary);
  box-shadow: 0 0 14px var(--primary-glow);
}

/* REMOVE ALL YELLOW (KILL SWITCH) */
*[style*="yellow"],
*[style*="#facc15"],
*[style*="#fde047"],
*[style*="rgb(250"] {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 18px var(--primary-glow) !important;
}

/* ICONS */
svg path {
  stroke: var(--primary) !important;
  fill: var(--primary) !important;
}
/* =========================
   NAVBAR LINKS NORMAL RESET
   ========================= */

/* Normal: kein lila Kasten / kein Glow / kein Border */
.nav-link,
.navbar a,
header nav a {
  color: #e5e7eb !important;        /* normal hell */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Hover: nur Text lila (optional, kannst du lassen) */
.nav-link:hover,
.navbar a:hover,
header nav a:hover {
  color: #c084fc !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
}

/* Active: nur Text lila (kein Kasten) */
.nav-link.active,
.navbar a.active,
header nav a.active,
.navbar .active > a {
  color: #a855f7 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Falls SellAuth so "Buttons" draus macht */
.nav-link.active::before,
.nav-link.active::after,
.nav-link::before,
.nav-link::after {
  display: none !important;
  content: none !important;
}
/* =========================
   GELB -> LILA (GLOBAL FIX)
   ========================= */

/* Deine lila Farben */
:root{
  --accent: #a855f7;        /* main purple */
  --accent2: #c084fc;       /* lighter purple */
  --accentGlow: rgba(168,85,247,.55);
}

/* Ambitous Hub / Pill / Badge: alles lila */
.badge,
.pill,
.tag,
.chip,
.hero-badge,
.hero-pill,
button.badge,
a.badge{
  border-color: var(--accent) !important;
  color: var(--accent2) !important;
  box-shadow: 0 0 18px var(--accentGlow) !important;
}

/* Falls es ein spezieller Container ist */
.hero .badge,
.hero .pill,
.hero .tag,
.hero .chip{
  background: rgba(168,85,247,.08) !important;
}

/* Kill hardcoded yellow/gold auf Border/Shadow/Text */
*{
  /* wenn irgendwo gold hart drin ist, überschreiben wir es über spezifische Regeln unten */
}

/* Häufige gelb/gold Werte direkt überschreiben (Button/Outline) */
button, a, .btn{
  /* nur wenn gelb benutzt wird, wird es durch lila “neutralisiert” */
  outline-color: var(--accent) !important;
}

/* Wenn dein Theme mit Variablen arbeitet */
:root{
  --yellow: var(--accent) !important;
  --gold: var(--accent) !important;
  --primary: var(--accent) !important;
}.amb-badge{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 18px;
  border-radius:999px;
  border:2px solid #a855f7;
  color:#c084fc;
  background:rgba(168,85,247,.08);
  box-shadow:0 0 18px rgba(168,85,247,.55);
}
/* Ambitous Hub Pill → PURPLE */

.premium-pill {
  color: #A855F7 !important;              /* Text lila */
  border: 1px solid #A855F7 !important;   /* Rahmen lila */
  background: rgba(168, 85, 247, 0.12) !important;
  box-shadow: 
    0 0 12px rgba(168, 85, 247, 0.6),
    inset 0 0 8px rgba(168, 85, 247, 0.3);
}
/* Hero Highlight Text (2Way) → PURPLE */

.hero-title span {
  color: #A855F7 !important;
  text-shadow: 0 0 18px rgba(168, 85, 247, 0.8);
}
/* ===== HERO BUTTONS → ALWAYS PURPLE ===== */

.hero-button {
  background: rgba(168, 85, 247, 0.15) !important;
  border: 2px solid #A855F7 !important;
  color: #A855F7 !important;

  box-shadow: 
    0 0 12px rgba(168, 85, 247, 0.6),
    inset 0 0 12px rgba(168, 85, 247, 0.4);

  transition: all 0.25s ease;
}

/* HOVER */
.hero-button:hover {
  background: rgba(168, 85, 247, 0.25) !important;
  color: #E9D5FF !important;

  box-shadow:
    0 0 22px rgba(168, 85, 247, 0.95),
    0 0 45px rgba(168, 85, 247, 0.6),
    inset 0 0 16px rgba(168, 85, 247, 0.6);

  transform: translateY(-2px);
}

/* CLICK / ACTIVE */
.hero-button:active {
  background: rgba(168, 85, 247, 0.35) !important;
  box-shadow:
    0 0 30px rgba(168, 85, 247, 1),
    inset 0 0 22px rgba(168, 85, 247, 0.8);

  transform: scale(0.97);
}
/* ===== HERO STATS – YELLOW TO PURPLE GLOW ===== */

.hero-stat {
  cursor: pointer;
  transition: all 0.25s ease;
}

/* DEFAULT (GELB) */
.hero-stat-number {
  color: #FACC15 !important; /* yellow */
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.6);
}

.hero-stat-label {
  color: #E5E7EB;
}

/* HOVER */
.hero-stat:hover .hero-stat-number,
.hero-stat:active .hero-stat-number {
  color: #A855F7 !important; /* purple */

  text-shadow:
    0 0 15px rgba(168, 85, 247, 0.9),
    0 0 30px rgba(168, 85, 247, 0.7),
    0 0 50px rgba(168, 85, 247, 0.6);
}

/* OPTIONAL: slight lift */
.hero-stat:hover {
  transform: translateY(-3px);
}
/* ===== HERO STATS – YELLOW TO PURPLE GLOW ===== */

.hero-stat {
  cursor: pointer;
  transition: all 0.25s ease;
}

/* DEFAULT (GELB) */
.hero-stat-number {
  color: #ffffff !important; /* yellow */
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.6);
}

.hero-stat-label {
  color: #E5E7EB;
}

/* HOVER */
.hero-stat:hover .hero-stat-number,
.hero-stat:active .hero-stat-number {
  color: #A855F7 !important; /* purple */

  text-shadow:
    0 0 15px rgba(168, 85, 247, 0.9),
    0 0 30px rgba(168, 85, 247, 0.7),
    0 0 50px rgba(168, 85, 247, 0.6);
}

/* OPTIONAL: slight lift */
.hero-stat:hover {
  transform: translateY(-3px);
}
/* === STATS STANDARD === */
.hero-stat {
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-stat-number {
  color: #ffffff; /* WEISS */
  font-size: 2rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.hero-stat-label {
  color: #bdbdbd;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

/* === HOVER / CLICK === */
.hero-stat:hover .hero-stat-number,
.hero-stat:active .hero-stat-number {
  color: #a855f7; /* LILA */
  text-shadow:
    0 0 10px rgba(168, 85, 247, 0.8),
    0 0 25px rgba(168, 85, 247, 0.6);
}

.hero-stat:hover .hero-stat-label,
.hero-stat:active .hero-stat-label {
  color: #a855f7;
}
.hero-stat-number {
  color: #ffffff !important;
}
.hero-stat-number {
  color: #ffffff !important;
}
/* =========================
   CONTACT / JOIN DISCORD BUTTON
   ========================= */

.payment-section a,
.contact-section a,
a.join-discord,
.hero-button {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
  border: 1px solid #a855f7;
  border-radius: 999px;
  padding: 14px 32px;
  font-weight: 600;
  transition: all 0.25s ease;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
}

/* Hover (halten) */
.payment-section a:hover,
.contact-section a:hover,
a.join-discord:hover,
.hero-button:hover {
  background: rgba(168, 85, 247, 0.35);
  color: #fff;
  box-shadow: 0 0 35px rgba(168, 85, 247, 0.8);
  transform: translateY(-2px);
}

/* Click (drücken) */
.payment-section a:active,
.contact-section a:active,
a.join-discord:active,
.hero-button:active {
  background: rgba(192, 132, 252, 0.55);
  box-shadow: 0 0 50px rgba(192, 132, 252, 1);
  transform: scalbutton,
a {
  --yellow: unset !important;
  background-color: unset;
}e(0.96);
}
/* FORCE: Join Discord Button -> LILA (egal welche Klasse/Style) */
a[href*="discord.gg"],
a[href*="discord.com/invite"],
button:has(span:contains("Join Discord")) {
  background: rgba(168, 85, 247, 0.22) !important;
  color: #c084fc !important;
  border: 1px solid #a855f7 !important;
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.55) !important;
  border-radius: 999px !important;
}

/* Hover / Active */
a[href*="discord.gg"]:hover,
a[href*="discord.com/invite"]:hover {
  background: rgba(168, 85, 247, 0.42) !important;
  color: #fff !important;
  box-shadow: 0 0 38px rgba(168, 85, 247, 0.95) !important;
  transform: translateY(-2px);
}

a[href*="discord.gg"]:active,
a[href*="discord.com/invite"]:active {
  background: rgba(192, 132, 252, 0.60) !important;
  box-shadow: 0 0 55px rgba(192, 132, 252, 1) !important;
  transform: scale(0.97);
}
/* Falls der Join-Discord ein <button> ist */
button.join-discord,
button[data-action="discord"],
.contact-section button {
  background: rgba(168, 85, 247, 0.22) !important;
  color: #c084fc !important;
  border: 1px solid #a855f7 !important;
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.55) !important;
  border-radius: 999px !important;
}
/* === Contact Button: STANDARD LILA (nicht gelb) === */

/* 1) Ziel: Join-Discord Link (über den Invite-Link) */
a[href*="discord.gg/ambitioushub"],
a[href*="discord.gg"],
a[href*="discord.com/invite"]{
  background: rgba(168, 85, 247, 0.20) !important;   /* lila */
  color: #c084fc !important;
  border: 1px solid #a855f7 !important;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.45) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  transition: 0.2s ease !important;
}

/* 2) Hover = stärker lila + Glow */
a[href*="discord.gg/ambitioushub"]:hover,
a[href*="discord.gg"]:hover,
a[href*="discord.com/invite"]:hover{
  background: rgba(168, 85, 247, 0.40) !important;
  color: #ffffff !important;
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.95) !important;
  transform: translateY(-2px) !important;
}

/* 3) Active = noch stärker */
a[href*="discord.gg/ambitioushub"]:active,
a[href*="discord.gg"]:active,
a[href*="discord.com/invite"]:active{
  background: rgba(192, 132, 252, 0.60) !important;
  box-shadow: 0 0 60px rgba(192, 132, 252, 1) !important;
  transform: scale(0.97) !important;
}
/* =========================
   FAQ – DEFAULT NICHT GELB
   ========================= */

/* FAQ Container / Button */
.faq-item,
.faq-question,
.faq-button,
.faq-row {
  background: rgba(168, 85, 247, 0.08) !important;
  border: 1px solid rgba(168, 85, 247, 0.5) !important;
  color: #e9d5ff !important;
  box-shadow: none !important;
}

/* Frage-Text */
.faq-item span,
.faq-question span,
.faq-title {
  color: #e9d5ff !important;
}

/* ? Icon */
.faq-item .icon,
.faq-question .icon {
  background: rgba(168, 85, 247, 0.25) !important;
  color: #c084fc !important;
}

/* =========================
   HOVER / ACTIVE = LILA GLOW
   ========================= */

.faq-item:hover,
.faq-question:hover,
.faq-item.active,
.faq-question.active {
  background: rgba(168, 85, 247, 0.25) !important;
  border-color: #a855f7 !important;
  box-shadow: 0 0 35px rgba(168, 85, 247, 0.9) !important;
}

/* Text beim Hover */
.faq-item:hover span,
.faq-question:hover span {
  color: #ffffff !important;
}

/* =========================
   GELB KOMPLETT KILLEN
   ========================= */

.faq-item *,
.faq-question * {
  color: inherit !important;
}

.faq-item,
.faq-question {
  filter: none !important;
  background-image: none !important;
}
/* FORCE SHOW USER + CART */
.header-actions,
.nav-actions,
.user-actions {
  display: flex !important;
  align-items: center;
  gap: 14px;
}

/* Make sure icons are visible */
.header-actions svg,
.nav-actions svg {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* FIX: Buy/Add-to-cart sichtbar */
.product-actions button,
.product-actions a,
button[type="submit"],
input[type="submit"]{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 50 !important;
}

.product-actions,
.product-details,
.product-page{
  overflow: visible !important;
}
.payment-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}
.payment-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 250px));
    justify-content: center;
    gap: 30px;
}
.payment-section{
  max-width: 1000px;   /* <- kleiner machen wenn du willst: 900px / 800px */
  margin: 0 auto;      /* zentriert den Rahmen */
}
.payment-section{
  display: inline-block;
  margin: 0 auto;
}
.payment-section-wrapper{
  text-align: center;  /* Parent muss zentrieren */
}
<div class="payment-section-wrapper">
  <div class="payment-section">
    ...
  </div>
</div>
.payment-grid{
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
/* FIX: Payment-Box zentrieren + Breite begrenzen */
.payment-section{
  max-width: 900px;        /* stell z.B. 800/900/1000 ein */
  width: 100%;
  margin: 60px auto 0;     /* auto = zentriert */
  box-sizing: border-box;
}

/* FIX: Cards mittig im Rahmen */
.payment-grid{
  display: flex;
  justify-content: center; /* <- das ist wichtig */
  gap: 28px;
  flex-wrap: wrap;
}
/* Frost Text Glow */
.frost-text,
.hero-title span,
.secure-title,
.premium-pill {
    color: #7de3ff !important;
    text-shadow:
        0 0 8px #7de3ff,
        0 0 16px rgba(125, 227, 255, 0.6);
}

/* Frost Button */
.hero-button,
button {
    border: 2px solid #7de3ff !important;
    color: #7de3ff !important;
    background: transparent !important;
    transition: 0.3s ease;
}

.hero-button:hover,
button:hover {
    background: #7de3ff !important;
    color: black !important;
    box-shadow:
        0 0 15px #7de3ff,
        0 0 40px rgba(125, 227, 255, 0.7);
}
.hero-box,
.payment-section,
.faq-box {
    border: 2px solid #7de3ff !important;
    box-shadow: 0 0 20px rgba(125, 227, 255, 0.3);
}
hr,
.nav-line {
    background: #7de3ff !important;
    box-shadow: 0 0 10px #7de3ff;
}
hr,
.nav-line {
    background: #7de3ff !important;
    box-shadow: 0 0 10px #7de3ff;
}
/* Snow overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 2px);
  background-size: 180px 180px, 260px 260px, 340px 340px;
  background-position: 0 0, 60px 80px, 120px 140px;
  animation: snowMove 12s linear infinite;
  opacity: .6;
}

@keyframes snowMove {
  from { transform: translateY(-200px); }
  to   { transform: translateY(200px); }
}

/* damit dein Content über dem Snow bleibt */
body > * {
  position: relative;
  z-index: 1;
}
:root{
  --frost: #7de3ff;
  --frost-strong: #38cfff;
  --frost-glow: rgba(125, 227, 255, 0.6);
}

/* Buttons & Cards Hover */
.hero-button, .payment-card, .faq-item, .product-card {
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Shine streak */
.hero-button::after, .payment-card::after, .faq-item::after, .product-card::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:40%;
  height:180%;
  background: linear-gradient(90deg, transparent, rgba(125,227,255,.45), transparent);
  transform: rotate(20deg);
  opacity:0;
  transition: opacity .25s ease;
}

.hero-button:hover, .payment-card:hover, .faq-item:hover, .product-card:hover{
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 0 18px var(--frost-glow), 0 0 45px rgba(56,207,255,.35);
  border-color: var(--frost) !important;
}

.hero-button:hover::after,
.payment-card:hover::after,
.faq-item:hover::after,
.product-card:hover::after{
  opacity:1;
  animation: iceShine 1s ease;
}

@keyframes iceShine{
  0%{ left:-60%; }
  100%{ left:140%; }
}
.frost-gradient,
.hero-title span,
h1 span,
.big-title span {
  background: linear-gradient(90deg, #e9fbff, #7de3ff, #38cfff, #e9fbff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 0 18px rgba(125,227,255,.25);
}
.ice-border {
  position: relative;
  border-radius: 18px;
  border: 2px solid rgba(125,227,255,.55);
  box-shadow: 0 0 20px rgba(125,227,255,.18);
  overflow: hidden;
}

.ice-border::before {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 18px;
  padding:2px;
  background: conic-gradient(from 180deg,
    rgba(125,227,255,.0),
    rgba(125,227,255,.65),
    rgba(56,207,255,.0),
    rgba(125,227,255,.65),
    rgba(125,227,255,.0)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: iceSpin 3.5s linear infinite;
  opacity: .9;
  pointer-events: none;
}

@keyframes iceSpin {
  to { transform: rotate(360deg); }
}
/* Frost Badge – komplett Eis Style */
.premium-pill,
.hero-pill,
.frost-badge {
  background: rgba(20, 35, 45, 0.6);
  border: 2px solid #7de3ff;
  color: #bff6ff !important;
  backdrop-filter: blur(12px);
  
  box-shadow:
    0 0 10px rgba(125, 227, 255, 0.5),
    0 0 25px rgba(56, 207, 255, 0.4),
    0 0 45px rgba(0, 180, 255, 0.3);
}

/* Hover stärkeres Frost-Glow */
.premium-pill:hover,
.hero-pill:hover,
.frost-badge:hover {
  box-shadow:
    0 0 15px rgba(125, 227, 255, 0.8),
    0 0 35px rgba(56, 207, 255, 0.7),
    0 0 70px rgba(0, 200, 255, 0.5);
}
.premium-pill,
.hero-pill,
.frost-badge {
  border-color: #7de3ff !important;
  box-shadow:
    0 0 15px rgba(125, 227, 255, 0.7) !important,
    0 0 40px rgba(56, 207, 255, 0.6) !important,
    0 0 80px rgba(0, 200, 255, 0.4) !important;
}
/* Stats Default */
.hero-stat-number,
.hero-stat-label {
  transition: 0.3s ease;
}

/* Hover / Active → ICE */
.hero-stat:hover .hero-stat-number,
.hero-stat:active .hero-stat-number {
  color: #7de3ff !important;
  text-shadow:
    0 0 10px rgba(125,227,255,0.8),
    0 0 25px rgba(56,207,255,0.6),
    0 0 50px rgba(0,200,255,0.5);
}

.hero-stat:hover .hero-stat-label,
.hero-stat:active .hero-stat-label {
  color: #bff6ff !important;
}

/* Entfernt Lila Glow komplett */
.hero-stat:hover,
.hero-stat:active {
  box-shadow:
    0 0 15px rgba(125,227,255,0.4) !important;
}
/* =========================
   FROST / ICE THEME OVERRIDE
   (paste at VERY BOTTOM)
========================= */

/* Ice colors */
:root{
  --ice-1:#7de3ff;   /* main ice */
  --ice-2:#bff6ff;   /* soft ice text */
  --ice-3:#38cfff;   /* stronger glow */
  --ice-bg: rgba(20, 40, 55, 0.35);
}

/* Kill purple everywhere (borders/shadows that come from theme) */
*{
  --tw-ring-color: transparent !important;
}

/* ---------- NAVBAR LINKS ---------- */
nav a, .navbar a, .nav a {
  transition: .25s ease;
}

nav a:hover, nav a:active,
.navbar a:hover, .navbar a:active,
.nav a:hover, .nav a:active {
  color: var(--ice-1) !important;
  text-shadow: 0 0 12px rgba(125,227,255,.55);
}

/* If your menu has underline/border */
nav a:hover::after,
.navbar a:hover::after {
  background: var(--ice-1) !important;
}

/* ---------- HERO PILL (Frost Hub) ---------- */
.premium-pill, .hero-pill, .pill-center span {
  border-color: var(--ice-1) !important;
  color: var(--ice-1) !important;
  box-shadow: 0 0 18px rgba(125,227,255,.35) !important;
}

/* ---------- HERO TITLE HIGHLIGHT (Frost word) ---------- */
.hero-title span, .hero-title .highlight, .title-accent {
  color: var(--ice-1) !important;
  text-shadow:
    0 0 12px rgba(125,227,255,.55),
    0 0 28px rgba(56,207,255,.35);
}

/* ---------- BUTTONS (Browse/Join/etc.) ---------- */
.hero-button, .btn, button, a.button {
  border: 2px solid var(--ice-1) !important;
  color: var(--ice-2) !important;
  background: rgba(0,0,0,.20) !important;
  transition: .25s ease;
}

/* Hover/Active glow */
.hero-button:hover, .hero-button:active,
.btn:hover, .btn:active,
button:hover, button:active,
a.button:hover, a.button:active {
  color: #08141b !important;
  background: var(--ice-1) !important;
  box-shadow:
    0 0 14px rgba(125,227,255,.70),
    0 0 40px rgba(56,207,255,.45) !important;
}

/* ---------- STATS (Loyal Customers etc.) ---------- */
.hero-stat-number, .hero-stat-label {
  transition: .25s ease;
}

/* Default text should stay white/neutral */
.hero-stat-number { color: #ffffff !important; }
.hero-stat-label  { color: rgba(255,255,255,.70) !important; }

/* Hover/Active -> ICE */
.hero-stat:hover .hero-stat-number,
.hero-stat:active .hero-stat-number {
  color: var(--ice-1) !important;
  text-shadow:
    0 0 10px rgba(125,227,255,.8),
    0 0 25px rgba(56,207,255,.55),
    0 0 55px rgba(0,200,255,.35);
}

.hero-stat:hover .hero-stat-label,
.hero-stat:active .hero-stat-label {
  color: var(--ice-2) !important;
}

/* ---------- FAQ ACCORDION ---------- */
.faq-item, .faq-question, .accordion-item, .accordion-button {
  border-color: rgba(125,227,255,.45) !important;
}

.faq-question:hover, .faq-question:active,
.accordion-button:hover, .accordion-button:active {
  color: var(--ice-1) !important;
  box-shadow: 0 0 18px rgba(125,227,255,.30) !important;
}

.faq-answer, .accordion-body {
  color: rgba(255,255,255,.80) !important;
}

/* ---------- PAYMENT SECTION / CARDS ---------- */
.payment-section, .payment-box {
  border-color: rgba(125,227,255,.35) !important;
}

.payment-card {
  border-color: rgba(125,227,255,.55) !important;
  transition: .25s ease;
}

.payment-card:hover {
  border-color: var(--ice-1) !important;
  box-shadow: 0 0 22px rgba(125,227,255,.35) !important;
}

/* ---------- FORCE REMOVE ANY PURPLE GLOW/BORDER ---------- */
[style*="purple"], [style*="#a855f7"], [style*="#7c3aed"] {
  filter: none !important;
}
/* REMOVE CLICK / HOLD BOX EFFECT ON STATS */

.hero-stat,
.hero-stat * {
  outline: none !important;
}

.hero-stat:focus,
.hero-stat:active,
.hero-stat:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.hero-stat::before,
.hero-stat::after {
  display: none !important;
}

/* Falls es über Zahlen kommt */
.hero-stat-number:focus,
.hero-stat-number:active {
  box-shadow: none !important;
  background: transparent !important;
}
/* Force remove tap highlight (Mobile iOS fix) */
* {
  -webkit-tap-highlight-color: transparent !important;
}
/* === HARD KILL: BLUE PRESS BOX ON HERO STATS === */

/* iOS / Mobile tap highlight */
.hero-stats, .hero-stats * {
  -webkit-tap-highlight-color: transparent !important;
}

/* Remove any focus/active/pressed visuals on the stat and everything inside */
.hero-stat,
.hero-stat:hover,
.hero-stat:active,
.hero-stat:focus,
.hero-stat:focus-within,
.hero-stat:focus-visible,
.hero-stat *:hover,
.hero-stat *:active,
.hero-stat *:focus,
.hero-stat *:focus-within,
.hero-stat *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Kill pseudo elements that often draw a block */
.hero-stat::before,
.hero-stat::after,
.hero-stat *::before,
.hero-stat *::after {
  content: none !important;
  display: none !important;
}

/* If stats are links/buttons inside */
.hero-stat a,
.hero-stat button {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}
.hero-stat a:active,
.hero-stat a:focus,
.hero-stat a:focus-visible,
.hero-stat button:active,
.hero-stat button:focus,
.hero-stat button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}
/* ===== FORCE JOIN DISCORD TO ICE BLUE ===== */

.join-discord,
.join-discord:hover,
.join-discord:active,
.join-discord:focus,
.join-discord:focus-visible,
button.join-discord,
a.join-discord {
  background: rgba(0, 255, 255, 0.05) !important;
  border: 2px solid #7fefff !important;
  color: #bffcff !important;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.4) !important;
}

/* Remove yellow hover from theme */
.join-discord:hover,
.join-discord:active {
  background: rgba(0, 255, 255, 0.15) !important;
  border-color: #9ffcff !important;
  color: #ffffff !important;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.7) !important;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background: rgba(0, 255, 255, 0.05) !important;
  border: 2px solid #7fefff !important;
  color: #bffcff !important;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.4) !important;
}
/* ===== FORCE DISCORD BUTTON (FROST HUB) TO ICE ===== */
a[href*="discord.gg/frost-hub"],
a[href*="discord.gg/frost-hub"]:visited,
a[href*="discord.gg/frost-hub"]:hover,
a[href*="discord.gg/frost-hub"]:active,
a[href*="discord.gg/frost-hub"]:focus,
a[href*="discord.gg/frost-hub"]:focus-visible {
  background: rgba(0, 210, 255, 0.08) !important;
  color: #c9f7ff !important;
  border: 2px solid #6feaff !important;
  box-shadow: 0 0 18px rgba(0, 210, 255, 0.45) !important;
  text-decoration: none !important;
  outline: none !important;
  background-image: none !important;
  filter: none !important;
}

/* Hover / Press Effect */
a[href*="discord.gg/frost-hub"]:hover,
a[href*="discord.gg/frost-hub"]:active {
  background: rgba(0, 210, 255, 0.16) !important;
  border-color: #b6fbff !important;
  color: #ffffff !important;
  box-shadow: 0 0 34px rgba(0, 210, 255, 0.85) !important;
}
/* Secure Payment Methods - Ice Style */
.payment-section h2,
.secure-title,
h2:contains("Secure Payment Methods") {
    background: linear-gradient(90deg, #bdf6ff, #5edfff, #9fefff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 
        0 0 8px rgba(0, 217, 255, 0.7),
        0 0 20px rgba(0, 217, 255, 0.5),
        0 0 40px rgba(0, 217, 255, 0.3);
}
.payment-section h2 {
    color: #7feaff !important;
    text-shadow:
        0 0 10px #00eaff,
        0 0 20px #00eaff,
        0 0 40px #00eaff !important;
}
/* SHOP Title Ice Style */
h2,
.shop-title,
.section-title {
    background: linear-gradient(90deg, #c8f9ff, #6fe8ff, #aef3ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 10px rgba(0, 217, 255, 0.8),
        0 0 25px rgba(0, 217, 255, 0.6),
        0 0 45px rgba(0, 217, 255, 0.4);
}
/* ===== FROST ICE OVERRIDE ===== */

:root {
  --frost: #00eaff;
  --frost-light: #7ffaff;
}

/* Alle lila Border ersetzen */
* {
  border-color: var(--frost) !important;
}

/* Alle Buttons */
button,
.btn,
.join-discord,
a.button {
  border: 1px solid var(--frost) !important;
  color: var(--frost) !important;
  box-shadow: 0 0 15px rgba(0, 234, 255, 0.6) !important;
}

/* Hover Effekt */
button:hover,
.btn:hover,
.join-discord:hover,
a.button:hover {
  background: var(--frost) !important;
  color: black !important;
  box-shadow: 0 0 35px rgba(0, 234, 255, 0.9) !important;
}

/* Contact Box / große Boxen */
.contact-section,
.support-box,
.section-box,
.card {
  border: 1px solid var(--frost) !important;
  box-shadow: 0 0 25px rgba(0, 234, 255, 0.6) !important;
}
/* Überschriften */
h1, h2, h3 {
  color: var(--frost-light) !important;
  text-shadow: 0 0 15px rgba(0, 234, 255, 0.8) !important;
}
/* ===== FORCE JOIN DISCORD TO ICE ===== */

/* Trifft ALLE Discord-Links (Join Discord) */
a[href*="discord.gg"],
a[href*="discord.com/invite"]{
  background: transparent !important;
  border: 2px solid #00eaff !important;
  color: #7ffaff !important;
  box-shadow: 0 0 18px rgba(0,234,255,.65) !important;
  border-radius: 999px !important;
}

/* Hover / Active / Focus */
a[href*="discord.gg"]:hover,
a[href*="discord.com/invite"]:hover,
a[href*="discord.gg"]:active,
a[href*="discord.com/invite"]:active,
a[href*="discord.gg"]:focus,
a[href*="discord.com/invite"]:focus{
  background: #00eaff !important;
  color: #000 !important;
  box-shadow: 0 0 40px rgba(0,234,255,.95) !important;
  outline: none !important;
}

/* Falls der Button als "visited" anders gefärbt wird */
a[href*="discord.gg"]:visited,
a[href*="discord.com/invite"]:visited{
  color: #7ffaff !important;
}
/* ===== FORCE ICE THEME (REMOVE ALL YELLOW) ===== */

/* ICE Color */
:root {
  --ice: #7eefff;
  --ice-strong: #00d9ff;
}

/* Remove all yellow colors */
* {
  --yellow: var(--ice) !important;
}

/* Shop Title */
h2, .shop-title {
  color: var(--ice) !important;
  text-shadow: 0 0 15px var(--ice);
}

/* Product Card Border */
.product-card,
.card,
.shop-item {
  border: 1px solid var(--ice) !important;
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.4) !important;
}

/* Price Text */
.price,
.product-price {
  color: var(--ice) !important;
  text-shadow: 0 0 10px var(--ice);
}

/* Stock Text */
.stock,
.in-stock {
  color: var(--ice) !important;
}

/* View Details Button */
.view-details,
.product-button,
button {
  background: transparent !important;
  border: 2px solid var(--ice) !important;
  color: var(--ice) !important;
  box-shadow: 0 0 15px rgba(0, 217, 255, 0.5);
  transition: 0.3s ease;
}

/* Button Hover */
.view-details:hover,
.product-button:hover,
button:hover {
  background: rgba(0, 217, 255, 0.15) !important;
  box-shadow: 0 0 25px var(--ice);
  transform: scale(1.05);
}

/* Remove yellow glow everywhere */
[style*="yellow"],
[style*="#ff"],
[style*="#FFD"],
[style*="gold"] {
  color: var(--ice) !important;
  border-color: var(--ice) !important;
}
/* ===== ICE OVERRIDE (KILL YELLOW/GOLD) ===== */
:root{
  --ice: #7eefff;
  --ice2: #00d9ff;

  /* typische Theme-Variablen, die bei SellAuth / Themes vorkommen */
  --primary: var(--ice2) !important;
  --primary-color: var(--ice2) !important;
  --accent: var(--ice2) !important;
  --accent-color: var(--ice2) !important;
  --highlight: var(--ice2) !important;
  --highlight-color: var(--ice2) !important;
  --brand: var(--ice2) !important;
  --brand-color: var(--ice2) !important;

  /* gold/yellow variablen auf ice umbiegen */
  --gold: var(--ice2) !important;
  --yellow: var(--ice2) !important;
  --warning: var(--ice2) !important;
  --warning-color: var(--ice2) !important;
}

/* 1) Alles was “gelb” ist: Texte/Icons */
.price, .product-price, .amount, .money,
.in-stock, .stock, .status,
.badge, .pill, .tag,
h1 span, h2 span, .accent, .highlight,
svg, i, .icon {
  color: var(--ice2) !important;
  fill: var(--ice2) !important;
  text-shadow: 0 0 12px rgba(0,217,255,.45) !important;
}

/* 2) Gelbe Rahmen/Glows überall -> ICE */
.product-card, .card, .shop-item, .product, .tile,
.payment-card, .faq-item, .box, .panel {
  border-color: var(--ice2) !important;
  box-shadow: 0 0 22px rgba(0,217,255,.28) !important;
}

/* 3) Buttons (auch “View Details”, “Join Discord” in Shop/Support/FAQ) */
a.button, a.btn, .btn, button,
a[href*="discord"], a[href*="/products"],
.view-details, .product-button, .hero-button {
  background: rgba(0,217,255,.08) !important;
  border: 2px solid var(--ice2) !important;
  color: var(--ice2) !important;
  box-shadow: 0 0 18px rgba(0,217,255,.35) !important;
  transition: .25s ease !important;
}

/* Hover/Active */
a.button:hover, a.btn:hover, .btn:hover, button:hover,
a[href*="discord"]:hover, a[href*="/products"]:hover,
.view-details:hover, .product-button:hover, .hero-button:hover {
  background: rgba(0,217,255,.18) !important;
  box-shadow: 0 0 30px rgba(0,217,255,.60) !important;
  transform: translateY(-1px) !important;
}

/* 4) Fokus/Click Box entfernen (falls du diese “Box” meintest) */
*:focus,
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* 5) Shop “gelber Rahmen”/Overlay killen (kommt oft von outline/shadow) */
.product-card * {
  outline-color: var(--ice2) !important;
  border-color: var(--ice2) !important;
}
/* ===== KILL YELLOW ON HOVER / PRESS / HOLD ===== */
:root{
  --ice:#7eefff;
  --ice2:#00d9ff;
}

/* Buttons + Karten: Hover/Active/Fokus -> ICE */
a:hover, a:active,
button:hover, button:active,
.btn:hover, .btn:active,
.hero-button:hover, .hero-button:active,
.view-details:hover, .view-details:active,
.product-button:hover, .product-button:active,
.product-card:hover, .product-card:active,
.payment-card:hover, .payment-card:active{
  border-color: var(--ice2) !important;
  background: rgba(0,217,255,.15) !important;
  color: var(--ice2) !important;
  box-shadow: 0 0 28px rgba(0,217,255,.65) !important;
}

/* Falls gelb über "filter" oder "brightness" reinkommt */
a:hover *, a:active *,
button:hover *, button:active *{
  color: var(--ice2) !important;
  fill: var(--ice2) !important;
  filter: none !important;
}

/* iOS "tap highlight" (dieses gelbe/komische Highlight beim halten) ausschalten */
*{
  -webkit-tap-highlight-color: transparent !important;
}

/* Fokus-Rahmen/Box weg (wenn beim drücken so ein Kasten kommt) */
*:focus, *:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
/* ===== TOP NAV ACTIVE RESET ===== */

header a,
header a:visited,
header a:hover,
header a:active {
  color: white !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Entfernt aktiven Seiten Effekt */
header a.active,
header a.current,
header a[aria-current="page"],
header .active,
header .current {
  color: white !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.nav-link,
.nav-link.active,
.nav-link[aria-current="page"] {
  color: white !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* ===== REMOVE NAV FOCUS BOX ===== */

header a:focus,
header a:focus-visible,
header a:active,
header a.active,
header a[aria-current="page"] {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Falls SellAuth nav-link nutzt */
.nav-link:focus,
.nav-link:focus-visible,
.nav-link:active,
.nav-link.active,
.nav-link[aria-current="page"] {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* ===== REMOVE NAV FOCUS BOX ===== */

header a:focus,
header a:focus-visible,
header a:active,
header a.active,
header a[aria-current="page"] {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Falls SellAuth nav-link nutzt */
.nav-link:focus,
.nav-link:focus-visible,
.nav-link:active,
.nav-link.active,
.nav-link[aria-current="page"] {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* ===== KILL NAVBAR FOCUS / ACTIVE BOX (iPad/Safari) ===== */

/* iOS Tap Highlight weg */
nav a, nav button,
.navbar a, .navbar button,
header a, header button {
  -webkit-tap-highlight-color: transparent !important;
}

/* Focus/Active Outline/Shadow/BG/Border komplett weg */
nav a:focus, nav a:focus-visible, nav a:active,
nav button:focus, nav button:focus-visible, nav button:active,
.navbar a:focus, .navbar a:focus-visible, .navbar a:active,
header a:focus, header a:focus-visible, header a:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* Falls SellAuth "active/current" Styling setzt */
nav a.active,
nav a[aria-current="page"],
.navbar a.active,
.navbar a[aria-current="page"],
header a.active,
header a[aria-current="page"] {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}
/* ==== NAVBAR: Active/Focus Box KOMPLETT entfernen ==== */
header nav a,
header nav a:link,
header nav a:visited,
header nav a:hover,
header nav a:active,
header nav a:focus,
header nav a:focus-visible,
header nav a.active,
header nav a[aria-current="page"],
nav a.active,
nav a[aria-current="page"]{
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
}

/* iOS Safari Tap Highlight (falls noch irgendwas blinkt) */
header nav a { -webkit-tap-highlight-color: transparent !important; }
/* ===== ICE THEME COLORS (override) ===== */
:root{
  --ice: #66e6ff;
  --ice2:#b6f6ff;
  --iceGlow: rgba(102,230,255,.55);
}

/* --- Gelbe Preise / Stock Text killen -> ICE --- */
.product-card .price,
.product-card .product-price,
.product-card .range,
.product-card .stock,
.product-card .in-stock,
.product-card [class*="stock"],
.product-card [class*="price"],
.product-card small,
.product-card .badge,
.product-card .status,
.product-card .availability,
.product-card .inventory,
.product-card span,
.product-card p{
  /* nur Textfarbe, damit layout nicht kaputt geht */
  color: var(--ice) !important;
}

/* Wenn das Gelb über "accent" / "primary" läuft */
:root{
  --accent: var(--ice) !important;
  --primary: var(--ice) !important;
  --theme-color: var(--ice) !important;
}

/* --- Card Rahmen/Glow (falls gelb leuchtet) -> ICE --- */
.product-card,
.product-card *{
  outline-color: var(--ice) !important;
}

.product-card{
  border-color: rgba(102,230,255,.55) !important;
  box-shadow: 0 0 0 1px rgba(102,230,255,.35), 0 0 28px var(--iceGlow) !important;
}

/* --- "View Details" Hover/Active gelb -> ICE --- */
.product-card a:hover,
.product-card a:active,
.product-card a:focus,
.product-card button:hover,
.product-card button:active,
.product-card button:focus{
  color: var(--ice2) !important;
  border-color: rgba(102,230,255,.75) !important;
  box-shadow: 0 0 24px var(--iceGlow) !important;
}
/* Nuke alles Gelbe im Produktbereich */
.products-page *{
  color: var(--ice) !important;
  border-color: rgba(102,230,255,.55) !important;
}
/* =========================
   ICE OVERRIDE (NUKE YELLOW)
   -> Ganz unten in CSS!
   ========================= */

:root{
  --ice: #66e6ff;
  --ice2: #b6f6ff;

  /* typische Theme-Variablen die oft GELB sind */
  --warning: var(--ice);
  --gold: var(--ice);
  --yellow: var(--ice);
  --accent: var(--ice);
  --primary: var(--ice);
  --theme: var(--ice);

  /* Bootstrap falls benutzt */
  --bs-warning: var(--ice);
  --bs-yellow: var(--ice);
  --bs-primary: var(--ice);
}

/* Shop/Product Bereich: alles was gelb ist -> ice */
.shop, .products, .products-page, .product, .product-card, .sa-product, .sa-product-card,
[class*="product"], [class*="shop"], [id*="product"], [id*="shop"]{
  --warning: var(--ice) !important;
  --gold: var(--ice) !important;
  --yellow: var(--ice) !important;
  --accent: var(--ice) !important;
  --primary: var(--ice) !important;
}

/* Text (Preis / Stock / Labels etc.) */
.shop *, .products *, .products-page *, .product *, .product-card *, .sa-product *, .sa-product-card *{
  color: var(--ice) !important;
}

/* Hover/Active/Focus (das ist oft der Moment wo es GELB wird) */
.shop *:hover, .shop *:active, .shop *:focus,
.products *:hover, .products *:active, .products *:focus,
.products-page *:hover, .products-page *:active, .products-page *:focus,
.product *:hover, .product *:active, .product *:focus,
.product-card *:hover, .product-card *:active, .product-card *:focus{
  color: var(--ice2) !important;
  outline-color: var(--ice) !important;
  border-color: rgba(102,230,255,.75) !important;
  box-shadow: 0 0 22px rgba(102,230,255,.55) !important;
}

/* Falls das Gelb als Border/Glow kommt */
.product-card, .sa-product-card{
  border-color: rgba(102,230,255,.55) !important;
  box-shadow: 0 0 0 1px rgba(102,230,255,.35), 0 0 26px rgba(102,230,255,.45) !important;
}
/* =========================
   SELLAuth Product Card -> ICE (kill yellow)
   Ganz unten einfügen!
   ========================= */

:root{
  --ice: #66e6ff;
  --ice2:#b6f6ff;
}

/* Produktkarte (Shop) - gelbe Bereiche überschreiben */
.product-card,
.sa-product-card,
[class*="product-card"],
[class*="product"]{
  /* falls irgendwo gelbe Variablen genutzt werden */
  --warning: var(--ice) !important;
  --gold: var(--ice) !important;
  --yellow: var(--ice) !important;
  --accent: var(--ice) !important;
}

/* Preis + Name + Stock (die gelben Texte) */
.product-card .price,
.product-card .product-price,
.product-card .amount,
.product-card .product-name,
.product-card .title,
.product-card .stock,
.product-card .in-stock,
.product-card .badge,
.sa-product-card .price,
.sa-product-card .product-price,
.sa-product-card .amount,
.sa-product-card .product-name,
.sa-product-card .title,
.sa-product-card .stock,
.sa-product-card .in-stock,
.sa-product-card .badge{
  color: var(--ice) !important;
  text-shadow: 0 0 14px rgba(102,230,255,.45) !important;
}

/* der gelbe Rahmen/Strich unten im Preisbereich */
.product-card .price,
.product-card .product-price,
.product-card .product-name,
.product-card .stock,
.sa-product-card .price,
.sa-product-card .product-price,
.sa-product-card .product-name,
.sa-product-card .stock{
  border-color: rgba(102,230,255,.65) !important;
  outline-color: rgba(102,230,255,.65) !important;
}

/* falls SellAuth "warning/yellow" Klassen nutzt */
.text-warning, .text-yellow, .text-gold,
.badge-warning, .badge-yellow,
[class*="warning"], [class*="yellow"], [class*="gold"]{
  color: var(--ice) !important;
  border-color: rgba(102,230,255,.65) !important;
}

/* falls es INLINE STYLE ist (sehr oft!) -> trotzdem überschreiben */
.product-card [style*="color: #ff"],
.product-card [style*="color:#ff"],
.product-card [style*="rgb(255"],
.sa-product-card [style*="color: #ff"],
.sa-product-card [style*="color:#ff"],
.sa-product-card [style*="rgb(255"]{
  color: var(--ice) !important;
}
/* Entfernt gelbe Highlight-Farbe beim Klicken / Halten */
* {
  -webkit-tap-highlight-color: transparent !important;
}

/* Entfernt Focus / Active Glow */
*:focus,
*:active {
  outline: none !important;
  box-shadow: none !important;
}
/* Entfernt GELBE Hover / Active Effekte bei Produkten */
.product-card:hover,
.product-card:active,
.product-card:focus,
.card:hover,
.card:active,
.card:focus {
  border-color: #00eaff !important;
  box-shadow: none !important;
  background: inherit !important;
}

/* Entfernt gelbe Preisfarbe beim Hover */
.product-card:hover .price,
.product-card:active .price,
.product-card:hover .product-title,
.product-card:active .product-title {
  color: inherit !important;
}

/* Falls Theme eigene gelbe Variablen nutzt */
:root {
  --primary-color: #00eaff !important;
  --accent-color: #00eaff !important;
  --warning-color: #00eaff !important;
}
/* ✅ iOS Gelb beim Tippen/Halten komplett AUS */
* {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
}

/* ✅ Fokus/Active Outline & Shadow AUS (macht oft gelbe Boxen) */
a, button, input, textarea, select, [role="button"], .product-card, .card, .sa-card, .sa-button {
  outline: none !important;
  box-shadow: none !important;
}

a:focus, a:focus-visible, a:active,
button:focus, button:focus-visible, button:active,
.product-card:focus, .product-card:focus-visible, .product-card:active,
.card:focus, .card:focus-visible, .card:active,
.sa-card:focus, .sa-card:focus-visible, .sa-card:active,
.sa-button:focus, .sa-button:focus-visible, .sa-button:active {
  outline: none !important;
  box-shadow: none !important;
}

/* ✅ Falls das Gelb über Hover/Active Farben kommt: wieder "inherit" */
.product-card:active *, .product-card:focus *, .product-card:focus-visible *,
.card:active *, .card:focus *, .card:focus-visible * {
  color: inherit !important;
  border-color: inherit !important;
}
/* ===== KILL GELB BEIM DRÜCKEN/HALTEN (SellAuth) ===== */

/* iOS Tap highlight & Hold-Menü aus */
*{
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
}

/* Text-Selection (gelbe/markierte Flächen beim Halten) aus – nur für Cards/Buttons */
a, button, [role="button"], .product-card, .card, .sa-card, .sa-button, .product, .product-item, .product-tile {
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Active/Focus darf NICHT gelb werden: alles auf "wie normal" zurücksetzen */
a:active, a:focus, a:focus-visible,
button:active, button:focus, button:focus-visible,
[role="button"]:active, [role="button"]:focus, [role="button"]:focus-visible,
.product-card:active, .product-card:focus, .product-card:focus-visible,
.card:active, .card:focus, .card:focus-visible,
.sa-card:active, .sa-card:focus, .sa-card:focus-visible,
.sa-button:active, .sa-button:focus, .sa-button:focus-visible,
.product:active, .product:focus, .product:focus-visible,
.product-item:active, .product-item:focus, .product-item:focus-visible,
.product-tile:active, .product-tile:focus, .product-tile:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: inherit !important;
  color: inherit !important;
  border-color: inherit !important;
}

/* Falls gelb über Child-Elemente kommt (Price/Stock/Text) */
.product-card:active *, .product-card:focus *, .product-card:focus-visible *,
.card:active *, .card:focus *, .card:focus-visible *,
.product:active *, .product:focus *, .product:focus-visible *,
.product-item:active *, .product-item:focus *, .product-item:focus-visible *,
.product-tile:active *, .product-tile:focus *, .product-tile:focus-visible * {
  color: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
  background: transparent !important;
  filter: none !important;
}
/* ===== SELLAUTH: GELB BEIM DRÜCKEN/HALTEN KOMPLETT ENTFERNEN (NUCLEAR) ===== */

/* iOS Tap/Selection Highlights killen */
*{
  -webkit-tap-highlight-color: transparent !important;
}
::selection{ background: transparent !important; color: inherit !important; }
::-moz-selection{ background: transparent !important; color: inherit !important; }

/* Farben die du willst (einmal einstellen) */
:root{
  --ice: #67e8f9;                  /* Eis-Akzent */
  --text: #e5e7eb;                 /* Standard Text */
  --cardBorder: rgba(103,232,249,.55);
}

/* Ziel: ALLES was beim press/hold gelb wird -> sofort überschreiben */
a:active, a:focus, a:focus-visible,
button:active, button:focus, button:focus-visible,
[role="button"]:active, [role="button"]:focus, [role="button"]:focus-visible,
*:active, *:focus, *:focus-visible,
*:focus-within {
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Produktkarten / Tiles / Items – pressed/hold darf NICHT gelb werden */
.product-card,
.product-tile,
.product-item,
.product,
.card,
.sa-card{
  border-color: var(--cardBorder) !important;
}

/* wenn gedrückt/halten: kein gelb, kein gelber rand, kein gelber glow */
.product-card:active,
.product-tile:active,
.product-item:active,
.product:active,
.card:active,
.sa-card:active,
.product-card:focus-within,
.product-tile:focus-within,
.product-item:focus-within,
.product:focus-within,
.card:focus-within,
.sa-card:focus-within{
  background: transparent !important;
  border-color: var(--cardBorder) !important;
  box-shadow: none !important;
}

/* WICHTIG: auch ALLE Texte/Preise/Stock IN der Card beim Press überschreiben */
.product-card:active *,
.product-tile:active *,
.product-item:active *,
.product:active *,
.card:active *,
.sa-card:active *,
.product-card:focus-within *,
.product-tile:focus-within *,
.product-item:focus-within *,
.product:focus-within *,
.card:focus-within *,
.sa-card:focus-within *{
  color: var(--text) !important;
  border-color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Falls SellAuth Preis/Stock per Klasse gelb färbt */
.price, .money, .amount, .stock, .in-stock, .badge, .tag, .label{
  color: var(--text) !important;
}

/* Optional: Eis-Akzent NUR für Überschriften/Highlights (wenn du willst) */
h1 span, .accent, .ice, .title span{
  color: var(--ice) !important;
}
/* ===== KILL ALL YELLOW ON PRESS/HOLD (SellAuth / Safari iOS) ===== */
:root{
  --ice: #67e8f9;
}

/* iOS Tap highlight komplett aus */
*{ -webkit-tap-highlight-color: transparent !important; }

/* Falls SellAuth "Yellow" über Variablen macht */
:root{
  --primary: var(--ice) !important;
  --accent: var(--ice) !important;
  --brand: var(--ice) !important;
  --highlight: var(--ice) !important;
  --warning: var(--ice) !important;
  --yellow: var(--ice) !important;
}

/* Fokus/Active Glow & gelbe Effekte entfernen (auch Safari text-fill) */
a:active, a:focus, a:focus-visible,
button:active, button:focus, button:focus-visible,
[role="button"]:active, [role="button"]:focus, [role="button"]:focus-visible,
input:focus, select:focus, textarea:focus{
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* NUR in Shop/Products/Scripts Bereich: beim Drücken/Halten NIEMALS gelb */
[class*="shop"] a:active,
[class*="shop"] button:active,
[class*="product"] a:active,
[class*="product"] button:active,
[class*="script"] a:active,
[class*="script"] button:active,
[class*="shop"] *:active,
[class*="product"] *:active,
[class*="script"] *:active,
[class*="shop"] *:focus-within,
[class*="product"] *:focus-within,
[class*="script"] *:focus-within{
  background: transparent !important;
  border-color: var(--ice) !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important; /* <- das ist oft der “Gelb bleibt” Grund */
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Preis/Stock/Badges (werden extrem oft gelb gefärbt) */
.price, .amount, .money, .stock, .in-stock, .badge, .tag, .label{
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
/* Letzter Hammer: kill pseudo-element overlays im Shop/Products */
[class*="shop"] *::before,
[class*="shop"] *::after,
[class*="product"] *::before,
[class*="product"] *::after,
[class*="script"] *::before,
[class*="script"] *::after{
  box-shadow: none !important;
  filter: none !important;
}
/* DEBUG: zeigt welches Element beim Drücken aktiv ist */
*:active {
  outline: 3px solid red !important;
}

/* DEBUG: wenn gelb von ::before/::after kommt, wird es damit sichtbar */
*:active::before,
*:active::after {
  outline: 3px solid lime !important;
}
.product-card,
.product-card * {
  pointer-events: none !important;
}
/* ✅ Center "Secure Payment Methods" section on ALL devices */
.payment-section {
  width: 100%;
  max-width: 1100px;      /* kannst du größer/kleiner machen */
  margin: 0 auto !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ✅ Center the payment cards row (even if you don't have a wrapper div) */
.payment-section .payment-card {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 14px;
}

/* ✅ If the cards are inside a container, force it to center as well */
.payment-section > div {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}
/* ========================= */
/* REMOVE ALL CLICK / FOCUS / SELECTION BOXES */
/* ========================= */

/* Entfernt Tap Highlight (Mobile) */
* {
  -webkit-tap-highlight-color: transparent !important;
}

/* Entfernt alle Focus & Active Rahmen */
*:focus,
*:active,
*:focus-visible,
*:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* Entfernt Browser Auswahl Rahmen */
*::selection {
  background: transparent !important;
  color: inherit !important;
}

*::-moz-selection {
  background: transparent !important;
  color: inherit !important;
}

/* Verhindert Text markieren */
html, body, div, section, span, a, button {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Entfernt iOS long press Menü */
body {
  -webkit-touch-callout: none !important;
}

/* Entfernt Drag Auswahl */
img, a {
  -webkit-user-drag: none !important;
  user-drag: none !important;
}