/* Custom scrollbar for a more premium feel */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
  background: #b68f40;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a07d34;
}

/* Scroll Animation Classes */
.animated-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animated-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* A simple fade-in for the hero text, applied via JS in a real app but here for simplicity */
@keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}

/* Custom SwiperJS Styles */

/* Hero Slider */
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
    color: white;
    transition: transform 0.2s ease;
}
.hero-swiper .swiper-button-next:hover,
.hero-swiper .swiper-button-prev:hover {
    transform: scale(1.2);
}

.hero-swiper .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.7);
    width: 10px;
    height: 10px;
    opacity: 0.8;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.hero-swiper .swiper-pagination-bullet-active {
    background-color: #b68f40; /* Amber color */
    transform: scale(1.2);
}

/* Bestsellers Carousel */
.bestsellers-swiper .swiper-pagination-bestsellers .swiper-pagination-bullet {
    background-color: #6b7280; /* Gray */
}

.bestsellers-swiper .swiper-pagination-bestsellers .swiper-pagination-bullet-active {
    background-color: #b68f40; /* Amber color */
}

/* Add these new styles to your existing app.css file */

/* Active thumbnail border */
.product-swiper-thumbs .swiper-slide-thumb-active {
    border-color: #b68f40; /* Amber color */
}

/* Prose styles for description */
.prose {
    line-height: 1.75;
}
.prose-invert {
    color: #d1d5db; /* gray-300 */
}

/* Icon placeholder - for demonstration */
/* You can replace these with actual SVG icons later */
.icon-placeholder::before {
    display: inline-block;
    content: '★'; /* Example star icon */
    font-size: 1.5rem;
    line-height: 1;
}
.prose-styles h2 {
    font-size: 1.875rem; /* 30px */
    font-family: 'Cormorant Garamond', serif;
    color: #f3f4f6; /* gray-100 */
    margin-top: 2.5em;
    margin-bottom: 1em;
    border-bottom: 1px solid #4b5563; /* gray-600 */
    padding-bottom: 0.5rem;
}

.prose-styles p {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75;
    color: #d1d5db; /* gray-300 */
    margin-bottom: 1.25em;
}

.prose-styles ul {
    list-style-type: disc;
    padding-left: 1.5em;
    font-size: 1.125rem; /* 18px */
    line-height: 1.75;
    color: #d1d5db; /* gray-300 */
    margin-bottom: 1.25em;
}

.prose-styles ul li {
    margin-bottom: 0.5em;
}