/* ShopFlow Ecommerce - Main Styles */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}
.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}
.animate-scale-in {
  animation: scaleIn 0.4s ease-out forwards;
}
.animate-float {
  animation: float 4s ease-in-out infinite;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Product Cards - Enhanced */
.card-hover {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(14, 165, 233, 0.1);
}
.dark .card-hover:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(14, 165, 233, 0.2);
}

/* Product image zoom - smoother */
.card-hover img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover img {
  transform: scale(1.08);
}

/* Badge animation */
.product-badge {
  animation: badgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: left center;
}
@keyframes badgePop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Add to Cart button - enhanced */
.btn-add-cart {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-add-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}
.btn-add-cart:active {
  transform: translateY(0);
}

/* Quick actions fade in */
.quick-actions {
  transition: opacity 0.3s ease;
}

/* Staggered card entrance */
.reveal-card-1 { transition-delay: 0.05s; }
.reveal-card-2 { transition-delay: 0.1s; }
.reveal-card-3 { transition-delay: 0.15s; }
.reveal-card-4 { transition-delay: 0.2s; }
.reveal-card-5 { transition-delay: 0.25s; }
.reveal-card-6 { transition-delay: 0.3s; }
.reveal-card-7 { transition-delay: 0.35s; }
.reveal-card-8 { transition-delay: 0.4s; }

.btn-shine {
  position: relative;
  overflow: hidden;
}
.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}
.btn-shine:hover::after {
  left: 100%;
}

html { scroll-behavior: smooth; }

/* Hero Slider */
.hero-slider { overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  background-size: cover;
  background-position: center;
}
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-slider-dots { bottom: 2rem; }
.hero-slider-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: all 0.3s;
  cursor: pointer;
}
.hero-slider-dots span.active {
  background: white;
  width: 28px;
  border-radius: 14px;
}
.hero-slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  transition: all 0.3s;
}
.hero-slider-btn:hover {
  background: rgba(255,255,255,0.4);
  transform: translateY(-50%) scale(1.1);
}
.hero-slider-btn.prev { left: 1rem; }
.hero-slider-btn.next { right: 1rem; }

/* Search Modal */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-down {
  animation: fadeInDown 0.3s ease-out forwards;
}

/* Product detail - image gallery thumbnails */
.gallery-thumb {
  cursor: pointer;
  transition: all 0.2s ease;
}
.gallery-thumb:focus {
  outline: none;
}

/* Product detail - image zoom on hover */
.product-zoom-wrap {
  position: relative;
  user-select: none;
}
.product-zoom-lens {
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 10px 40px rgba(0,0,0,0.15);
  background-color: rgba(255,255,255,0.05);
}
.product-zoom-result {
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #f8fafc;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-radius: 1rem;
}
.dark .product-zoom-result {
  background-color: #1e293b;
}
@media (max-width: 1024px) {
  .product-zoom-result { display: none !important; }
  .product-zoom-lens { display: none !important; }
}

/* Product detail - CodeCanyon style compact */
.product-img-glow {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dark .product-img-glow {
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===== Category Sidebar - Expandable with dependency ===== */
.category-sidebar {
  width: 280px;
  min-width: 280px;
  max-height: calc(100vh - 12rem);
  overflow-y: auto;
  transition: transform 0.3s ease;
}
.category-sidebar-inner .category-item + .category-item,
.category-sidebar-inner .category-item + details {
  border-top: 1px solid rgba(226, 232, 240, 0.5);
}
.dark .category-sidebar-inner .category-item + .category-item,
.dark .category-sidebar-inner .category-item + details {
  border-color: rgba(51, 65, 85, 0.5);
}
.subcategory-list details + a,
.subcategory-list a + details {
  margin-top: 0;
}
.child-list a {
  transition: color 0.2s;
}

/* Category sidebar - desktop vs mobile */
.main-with-sidebar {
  display: flex;
  flex-direction: row;
}
@media (min-width: 1024px) {
  .category-sidebar-desktop {
    position: sticky;
    top: 7rem;
    align-self: flex-start;
    flex-shrink: 0;
    width: 280px;
    min-width: 280px;
    border-right: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    margin-right: 1rem;
  }
  .dark .category-sidebar-desktop {
    border-color: rgb(51 65 85);
  }
}
@media (max-width: 1023px) {
  .category-sidebar-mobile {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    height: 100vh;
    width: 280px;
    max-width: 85vw;
    transform: translateX(-100%);
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
  }
  .category-sidebar-mobile:not(.-translate-x-full) {
    transform: translateX(0);
  }
  .category-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
  }
}

/* ===== Mega Menu Card - Category dropdown (image-style) ===== */
.mega-menu-cat-item {
  transition: background 0.15s ease, color 0.15s ease;
}
.mega-menu-cat-item:hover {
  background: rgb(241 245 249);
}
.mega-menu-cat-item.active {
  background: rgb(226 232 240);
  color: rgb(15 23 42);
}
.dark .mega-menu-cat-item:hover {
  background: rgb(51 65 85 / 0.6);
}
.dark .mega-menu-cat-item.active {
  background: rgb(51 65 85);
  color: rgb(248 250 252);
}
.mega-menu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  margin-top: 0.25rem;
  animation: megaMenuFade 0.2s ease;
}
.mega-menu-dropdown:not(.hidden) {
  display: block !important;
}
@media (max-width: 768px) {
  .mega-menu-card {
    min-width: auto !important;
    width: calc(100vw - 2rem);
    max-height: 70vh;
    overflow-y: auto;
  }
  .mega-menu-left { width: 140px; }
  .mega-menu-right .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@keyframes megaMenuFade {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Product Detail - Beautiful Animations ===== */

/* Main product image - smooth zoom on hover + gallery fade */
#mainProductImg {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
#zoomContainer:hover #mainProductImg {
  transform: scale(1.03);
}
#zoomContainer {
  transition: box-shadow 0.4s ease;
}
#zoomContainer:hover {
  box-shadow: 0 8px 30px rgba(14, 165, 233, 0.15), 0 0 0 1px rgba(14, 165, 233, 0.08);
}
.dark #zoomContainer:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(14, 165, 233, 0.15);
}

/* Image gallery - fade transition */
.product-img-wrap {
  position: relative;
  overflow: hidden;
}
.product-img-wrap img {
  transition: opacity 0.35s ease;
}
.product-img-wrap img.img-fade-out {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

/* Gallery thumbnails - smooth selection */
.gallery-thumb {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-thumb:hover {
  transform: scale(1.05);
}
.gallery-thumb.ring-2 {
  transform: scale(1.02);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.5);
}

/* Sale badge - subtle pulse on hover */
.product-badge:hover {
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Full Description accordion - smooth expand */
.description-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.description-accordion-content.expanded {
  max-height: 500px;
}

/* Add to Cart - success animation */
@keyframes addToCartSuccess {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.btn-add-cart-success {
  animation: addToCartSuccess 0.4s ease;
}
@keyframes cartCheck {
  0% { opacity: 0; transform: scale(0.5); }
  50% { transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}
.cart-check-icon {
  animation: cartCheck 0.4s ease forwards;
}

/* Product color swatches - force colors (override button reset) */
.variant-color.color-black { background-color: #1e293b !important; }
.variant-color.color-white { background-color: #ffffff !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12) !important; }
.variant-color.color-silver { background-color: #94a3b8 !important; }
.variant-color.color-navy { background-color: #1e3a8a !important; }
.variant-color.color-red { background-color: #dc2626 !important; }

/* Quantity selector - subtle feedback */
.qty-btn:active {
  transform: scale(0.95);
  transition: transform 0.5s ease;
}
.qty-btn {
  transition: all 0.2s ease;
}
.qty-btn:hover {
  background: rgba(14, 165, 233, 0.1);
}

/* Wishlist - heart animation */
@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.btn-wishlist:hover svg {
  transition: transform 0.3s ease;
}
.btn-wishlist:hover svg {
  transform: scale(1.1);
}
.btn-wishlist.added svg {
  animation: heartPop 0.4s ease;
}

/* Staggered product detail reveal */
.product-detail-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-detail-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.product-detail-reveal.reveal-1 { transition-delay: 0.05s; }
.product-detail-reveal.reveal-2 { transition-delay: 0.1s; }
.product-detail-reveal.reveal-3 { transition-delay: 0.15s; }
.product-detail-reveal.reveal-4 { transition-delay: 0.2s; }
.product-detail-reveal.reveal-5 { transition-delay: 0.25s; }
.product-detail-reveal.reveal-6 { transition-delay: 0.3s; }
.product-detail-reveal.reveal-7 { transition-delay: 0.35s; }
.product-detail-reveal.reveal-8 { transition-delay: 0.4s; }

/* Product card - subtle entrance */
.product-card-entrance {
  animation: productCardIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes productCardIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Price gradient - subtle shine */
.price-gradient {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dark .price-gradient {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
}

/* Discount badge - bounce */
.discount-badge {
  animation: discountBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}
@keyframes discountBounce {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== Brands Page - WOW Factor Animations ===== */

/* Animated gradient header background */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.brand-header-animated {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(236, 72, 153, 0.15) 25%, rgba(14, 165, 233, 0.25) 50%, rgba(236, 72, 153, 0.1) 75%, rgba(14, 165, 233, 0.2) 100%);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}
.dark .brand-header-animated {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(236, 72, 153, 0.1) 25%, rgba(14, 165, 233, 0.2) 50%, rgba(236, 72, 153, 0.08) 75%, rgba(14, 165, 233, 0.15) 100%);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

/* Shimmer effect on header title */
@keyframes textShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.brand-title-shimmer {
  background: linear-gradient(90deg, #0ea5e9 0%, #ec4899 25%, #0ea5e9 50%, #ec4899 75%, #0ea5e9 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 4s linear infinite;
}

/* Brand card - premium hover with glow & lift */
.brand-card-wow {
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.brand-card-wow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.2) 50%, transparent 75%);
  background-size: 200% 100%;
  background-position: 200% 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.brand-card-wow:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.15), 0 0 40px -10px rgba(14, 165, 233, 0.25);
}
.brand-card-wow:hover::before {
  opacity: 1;
  animation: cardShine 1s ease;
}
@keyframes cardShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Brand logo - subtle float on hover */
.brand-logo-float {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand-card-wow:hover .brand-logo-float {
  transform: scale(1.15) translateY(-4px);
  animation: logoPulse 2s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { transform: scale(1.15) translateY(-4px); }
  50% { transform: scale(1.18) translateY(-6px); }
}

/* Shop Now arrow - slide animation */
.brand-shop-arrow {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.brand-card-wow:hover .brand-shop-arrow {
  transform: translateX(6px);
}

/* Badge pop on hover */
.brand-badge-pop {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand-card-wow:hover .brand-badge-pop {
  transform: scale(1.08);
}

/* Staggered brand card entrance - faster, bouncier */
.brand-reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand-reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.brand-reveal-1 { transition-delay: 0.05s; }
.brand-reveal-2 { transition-delay: 0.1s; }
.brand-reveal-3 { transition-delay: 0.15s; }
.brand-reveal-4 { transition-delay: 0.2s; }
.brand-reveal-5 { transition-delay: 0.25s; }
.brand-reveal-6 { transition-delay: 0.3s; }
.brand-reveal-7 { transition-delay: 0.35s; }
.brand-reveal-8 { transition-delay: 0.4s; }
.brand-reveal-9 { transition-delay: 0.45s; }
.brand-reveal-10 { transition-delay: 0.5s; }
.brand-reveal-11 { transition-delay: 0.55s; }
.brand-reveal-12 { transition-delay: 0.6s; }

/* Section title - subtle entrance */
@keyframes sectionTitleIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
.brand-section-title {
  animation: sectionTitleIn 0.6s ease-out forwards;
}

/* Language & Currency switcher dropdowns - use .hidden toggle via JS */

/* Flash Sale / Lightning Deals */
.flash-deal-card .countdown-day,
.flash-deal-card .countdown-hr,
.flash-deal-card .countdown-min,
.flash-deal-card .countdown-sec {
  min-width: 1.5em;
  display: inline-block;
  text-align: center;
}

/* Subscribe CTA - matches reference: left dark, right image, pill corners */
.subscribe-cta {
  border-radius: 2.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}
@media (min-width: 1024px) {
  .subscribe-cta {
    border-radius: 3rem;
  }
}
.subscribe-cta:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.subscribe-btn {
  border-radius: 9999px;
}