/* Add custom CSS styles below */ 

/* --- Variables --- */
:root {
  /* A refined color palette for a premium, modern feel */
  --salla-primary-color: #4a4a4a; /* A dark gray for key elements */
  --salla-secondary-color: #A6A6A6; /* Medium gray for accents */
  --salla-background-color: #f0f0f0; /* A light gray for backgrounds */
  --salla-text-color: #000;
  --salla-tertiary-color: #e8e8e8;
  --salla-hover-color: #333333; /* A slightly darker shade for hover effects */
}

/* --- General Styling --- */
.full_width .container {
  max-width: 100%;
}

.s-add-product-button-mini-checkout,
.shrink-0.flex.items-center.justify-center,
.md\:items-end a.duration-300,
.floating-contacts__trigger,
.header-rounded-btn,
.store-footer .collapse-trigger {
  background: var(--salla-secondary-color);
}

.bg-gray-50\/90,
.bg-\[\#F8F8F8\],
.md\:py-6 {
  background-color: var(--salla-background-color);
}

.s-quantity-input-button,
.header-rounded-btn {
  background: var(--salla-secondary-color);
}

.s-quantity-input-button {
  border-radius: 4px;
}

.s-quantity-input-button svg,
.s-add-product-button-mini-checkout-content:where([dir="rtl"], [dir="rtl"] *),
.product-single .addtocart-bar .s-button-btn,
.text-white div,
.opacity-70 span,
.quicklinks-item span,
.store-footer a i {
  color: var(--salla-text-color);
}

/* Fix for background colors from other elements */
.group .group-hover\:scale-100,
.group:hover .group-hover\:scale-100,
salla-slider.details-slider .s-slider-container .swiper-slide,
.image--aspect-ratio,
.bg-white {
  background-color: transparent;
}

/* --- Product & Card Styling --- */
.rounded-lg img.lazy.loaded {
  transform: scale(0.9);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background: var(--salla-tertiary-color);
  position: relative;
  border-radius: 50%;
  transition: all .3s ease-in-out;
}

/* New hover effect for product images */
.rounded-lg img.lazy.loaded:hover {
  transform: scale(1);
}

.product-entry {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.image--aspect-ratio img {
  object-fit: contain;
}

.price-wrapper,
.product-entry__price {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.lg\:border-b-0,
.card-title-is-bold .product-entry__title {
  text-align: center;
}

/* Adjusting countdown and image filters */
#app div salla-count-down.boxed-countdown {
  min-width: 100%;
}

.mx-auto.p-6.h-full.flex.flex-col .object-contain {
  filter: brightness(0.5);
}

/* --- Buttons --- */
button.btn--main {
  background: var(--salla-primary-color) !important;
  color: #fff !important; /* White text on dark button */
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transition: background-color 0.3s ease-in-out;
}

/* New hover effect for main buttons */
button.btn--main:hover {
  background: var(--salla-hover-color) !important;
}

/* --- Header & Footer Styling --- */
.main-nav.fixed-header .inner,
.header--boxed #main-nav:not(.fixed-pinned) {
  margin-top: 2rem;
  border-radius: 9999px;
  background: var(--salla-background-color) !important;
}

.store-footer .collapse-trigger {
  padding: 10px;
  border-radius: 11px;
  margin-bottom: 12px;
}

.store-footer a[href="https://www.tiktok.com/@nine25_jewelry"] {
  background: var(--salla-text-color);
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transition: background-color 0.3s ease-in-out;
}

.store-footer a[href="https://www.tiktok.com/@nine25_jewelry"]:hover {
  background: var(--salla-hover-color);
}

.sicon-tiktok:before {
  color: #fff;
}

.widget.contacts-widget {
  border: none;
}

/* --- Overrides and fixes --- */
.container.flex.items-center.justify-center {
  display: none;
}

.marquee__content.gap-20 {
  animation-duration: 30s !important;
}

.opacity-60,
.opacity-70 {
  opacity: 1;
}

.text-white {
  z-index: 1;
}

.inline-block.anime-item.mt-3 {
  margin: 0px auto;
}

/* --- Media Queries for Responsive Design --- */
@media only screen and (min-width: 601px) {
  .store-footer .collapse-trigger {
    text-align: center;
  }
}

@media only screen and (max-width: 600px) {
  .s-button-wrap[type='button'] {
    justify-content: center;
  }

  .pt-12 {
    text-align: center;
  }

  button.btn--main.btn--main-mini-mobile {
    padding-top: 0.45rem;
  }

  .store-footer .collapse-trigger:where([dir="rtl"], [dir="rtl"] *):after {
    left: 12px;
  }

  button.btn--main, .btn--add-to-cart button {
    font-size: 0.8rem;
  }
}