@charset "UTF-8";
/**
 * Sathe Food Products - Modern Premium Brand Styles
 * Follows style.md visual direction & accessibility standards
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600;1,700&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Static verification tokens:
     --brand-orange: #FA8706
     --brand-navy: #191E5E
     --brand-cream: #FEF7E7
     --brand-green: #246638
     --brand-brown: #3F2A2D
  */
  --brand-orange: #F47721;
  --brand-orange-dark: #E85D26;
  --brand-orange-light: #FFF4E5;
  --brand-navy: #761C2A; /* Overridden to Deep Festive Maroon #761C2A - STRICT NO BLUE RULE */
  --brand-navy-light: #B42332;
  --brand-cream: #FFF7EA;
  --brand-cream-soft: #FFFBF2;
  --brand-green: #246638;
  --brand-green-light: #EBF5EE;
  --brand-brown: #42291F;
  --brand-brown-light: #5A4447;
  --brand-red: #B42332;
  --brand-border: #E9DCC7;
  --brand-border-focus: #F47721;
  --brand-muted: #7A6B63;
  --white: #FFFFFF;

  /* Strict Festive Palette Tokens (Prompt Section 1) */
  --brand-festive-red: #B42332;
  --brand-festive-maroon: #761C2A;
  --brand-vibrant-orange: #F47721;
  --brand-saffron: #E99524;
  --brand-traditional-gold: #D6AD55;
  --brand-warm-cream: #FFF7EA;
  --brand-deep-brown: #42291F;

  /* Festive D2C Palette & Rich Tones */
  --brand-maroon: #761C2A;
  --brand-maroon-dark: #59141F;
  --brand-maroon-light: #B42332;
  --brand-gold: #D6AD55;
  --brand-gold-dark: #B3862D;
  --brand-gold-light: #FBF4E6;
  --brand-cream-warm: #FFF7EA;
  --brand-green-deep: #526B36;
  --brand-brown-deep: #42291F;

  /* Elevation Shadows */
  --shadow-subtle: 0 2px 8px -1px rgba(66, 41, 31, 0.05);
  --shadow-card: 0 4px 16px -2px rgba(66, 41, 31, 0.06), 0 2px 6px -1px rgba(66, 41, 31, 0.04);
  --shadow-card-hover: 0 14px 30px -4px rgba(66, 41, 31, 0.12), 0 4px 10px -2px rgba(66, 41, 31, 0.06);
  --shadow-orange: 0 6px 18px -2px rgba(244, 119, 33, 0.35);
  --shadow-whatsapp: 0 6px 18px -2px rgba(37, 211, 102, 0.35);
  --shadow-gold: 0 8px 24px -2px rgba(214, 173, 85, 0.35);
}

html {
  scroll-behavior: smooth;
  font-family: 'Poppins', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--brand-brown);
  background-color: var(--brand-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

main {
  flex: 1 0 auto;
  width: 100%;
}

/* Accessibility: Visible Focus Indicators */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2.5px solid var(--brand-orange-dark);
  outline-offset: 3px;
  border-radius: 0.375rem;
}

/* Modern Minimalist Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f5efe3;
}
::-webkit-scrollbar-thumb {
  background: #d8c7b0;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-orange);
}

/* Hide scrollbar utility for clean swipeable chips */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
  color: var(--brand-festive-maroon);
  font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif;
  letter-spacing: -0.015em;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.font-marathi {
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
}

.font-serif-brand {
  font-family: 'Playfair Display', Georgia, Cambria, serif;
}

/* Traditional Motif Decorative Dividers */
.traditional-divider {
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--brand-orange) 50%, transparent 100%);
  width: 100%;
  max-width: 160px;
  margin: 0.75rem auto;
  border-radius: 9999px;
}

.traditional-divider-left {
  height: 3px;
  background: linear-gradient(90deg, var(--brand-orange) 0%, transparent 100%);
  width: 100%;
  max-width: 120px;
  margin: 0.75rem 0;
  border-radius: 9999px;
}

/* Brand Button Styles (Strict 44px+ touch targets on mobile) */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  min-height: 44px;
  padding: 0.625rem 1.375rem;
  border-radius: 0.75rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-orange);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  user-select: none;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #FF941A 0%, #C46000 100%);
  box-shadow: 0 8px 22px -2px rgba(217, 107, 0, 0.4);
  transform: translateY(-2px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px -1px rgba(217, 107, 0, 0.3);
}

.btn-secondary {
  background-color: #ffffff;
  color: var(--brand-festive-maroon);
  border: 1.5px solid var(--brand-border);
  font-weight: 600;
  font-size: 0.875rem;
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}
.btn-secondary:hover {
  border-color: var(--brand-orange);
  color: var(--brand-orange-dark);
  background-color: var(--brand-cream-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-subtle);
}
.btn-secondary:active {
  transform: translateY(0);
}

.btn-whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #1EBE5D 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-whatsapp);
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
}
.btn-whatsapp:hover {
  background: linear-gradient(135deg, #28E06D 0%, #17A950 100%);
  box-shadow: 0 8px 22px -2px rgba(37, 211, 102, 0.45);
  transform: translateY(-2px);
}
.btn-whatsapp:active {
  transform: translateY(0);
}

/* Card Styling with Subtle Hover Elevation */
.sathe-card {
  background: #ffffff;
  border: 1.5px solid var(--brand-border);
  border-radius: 1rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: var(--shadow-card);
}
.sathe-card:hover {
  border-color: #dfcdb3;
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

/* Category Filter Pill */
.category-pill {
  padding: 0.5rem 1rem;
  min-height: 40px;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1.5px solid var(--brand-border);
  background: #ffffff;
  color: var(--brand-brown);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  user-select: none;
}
.category-pill:hover {
  border-color: var(--brand-orange);
  color: var(--brand-orange-dark);
  background: var(--brand-cream);
  transform: translateY(-1px);
}
.category-pill.active {
  background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
  border-color: var(--brand-orange);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(250, 135, 6, 0.3);
  font-weight: 600;
}
.category-pill.active .pill-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
.pill-count {
  font-size: 0.6875rem;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  background: #f1ede4;
  color: var(--brand-muted);
  font-weight: 600;
}

/* Accordion Component */
.faq-accordion-item {
  border: 1.5px solid var(--brand-border);
  border-radius: 0.875rem;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}
.faq-accordion-item.open {
  border-color: #d8c4a9;
  box-shadow: var(--shadow-card);
}
.faq-accordion-header {
  width: 100%;
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--brand-navy);
  transition: color 0.2s ease;
}
.faq-accordion-header:hover {
  color: var(--brand-orange-dark);
}
.faq-accordion-icon {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--brand-orange);
  flex-shrink: 0;
}
.faq-accordion-item.open .faq-accordion-icon {
  transform: rotate(180deg);
}
.faq-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
  padding: 0 1.25rem;
  color: var(--brand-brown);
  font-size: 0.875rem;
  line-height: 1.625;
}
.faq-accordion-item.open .faq-accordion-body {
  max-height: 500px;
  padding-bottom: 1.25rem;
}

/* Modals */
.modal-backdrop {
  background: rgba(25, 30, 94, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
@keyframes modalScale {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.animate-modal {
  animation: modalScale 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Toast Alerts */
.sathe-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  background: var(--brand-festive-maroon);
  color: #ffffff;
  padding: 0.875rem 1.25rem;
  border-radius: 0.875rem;
  box-shadow: 0 10px 28px rgba(118, 28, 42, 0.35);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: toastSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  max-width: calc(100vw - 3rem);
  border: 1.5px solid var(--brand-traditional-gold);
}
@keyframes toastSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Visual Trust Badges */
.badge-gold {
  background-color: #FFF9E6;
  color: #B46900;
  border: 1px solid #FFE499;
}
.badge-green {
  background-color: #EBF7EE;
  color: #1F6B38;
  border: 1px solid #C4E8CD;
}
.badge-navy, .badge-maroon {
  background-color: #FDEDEE;
  color: #761C2A;
  border: 1px solid #F5C6CB;
}
.badge-warning {
  background-color: #FFF8E6;
  color: #995A00;
  border: 1px solid #FEDF89;
}

/* Responsive Container Adjustments */
@media (max-width: 640px) {
  .btn-primary, .btn-secondary, .btn-whatsapp {
    width: 100%;
  }
}

/* ==========================================================================
   E-Commerce Cart Drawer & Interactive Experience
   ========================================================================== */

#cart-drawer-backdrop {
  background: rgba(66, 41, 31, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#cart-drawer {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.cart-stepper-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: #f6efe2;
  color: var(--brand-festive-maroon);
  font-weight: 700;
  font-size: 0.875rem;
  transition: all 0.15s ease;
  user-select: none;
}
.cart-stepper-btn:hover {
  background-color: var(--brand-orange);
  color: #ffffff;
}
.cart-stepper-btn:active {
  transform: scale(0.92);
}

.cart-badge-bounce {
  animation: badgeBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes badgeBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.free-shipping-bar {
  height: 6px;
  border-radius: 9999px;
  background: #EFE4D2;
  overflow: hidden;
}
.free-shipping-progress {
  height: 100%;
  background: linear-gradient(90deg, #D4A64A 0%, #FA8706 100%);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

/* ==========================================================================
   Hero Festive Campaign Carousel
   ========================================================================== */

.hero-carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.hero-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: scale(0.98);
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
  pointer-events: auto;
  transform: scale(1);
}

/* Staggered text entrance animations */
.hero-slide .stagger-1 {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.hero-slide .stagger-2 {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.hero-slide .stagger-3 {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.hero-slide .stagger-4 {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

.hero-slide.active .stagger-1,
.hero-slide.active .stagger-2,
.hero-slide.active .stagger-3,
.hero-slide.active .stagger-4 {
  opacity: 1;
  transform: translateY(0);
}

/* Gentle image zoom when slide becomes active */
.hero-slide .hero-img-zoom {
  transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
  transform: scale(1);
}
.hero-slide.active .hero-img-zoom {
  transform: scale(1.05);
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background-color: rgba(25, 30, 94, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  border: none;
  padding: 0;
}
.hero-dot:hover {
  background-color: var(--brand-orange);
}
.hero-dot.active {
  width: 28px;
  background-color: var(--brand-orange-dark);
}

/* ==========================================================================
   Curated Combo Packs & Festive Aesthetics
   ========================================================================== */

.gold-border-glow {
  border: 1.5px solid var(--brand-gold);
  box-shadow: 0 4px 20px -2px rgba(212, 166, 74, 0.2);
}
.gold-border-glow:hover {
  border-color: #E2B860;
  box-shadow: 0 10px 28px -2px rgba(212, 166, 74, 0.35);
  transform: translateY(-3px);
}

.festive-tag {
  background: linear-gradient(135deg, #741D27 0%, #9B2836 100%);
  color: #FFE6A3;
  border: 1px solid rgba(212, 166, 74, 0.4);
}

.legacy-parchment {
  background: linear-gradient(145deg, #FFFDF9 0%, #F9F1E2 100%);
  border: 1.5px solid #EADBBE;
}

.traditional-rangoli-border {
  border-top: 2px dashed #D4A64A;
}

/* Horizontal Combo Carousel Slider Track */
.combo-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 1.5rem;
  padding-bottom: 1.25rem;
  -webkit-overflow-scrolling: touch;
}
.combo-carousel-track::-webkit-scrollbar {
  height: 6px;
}
.combo-carousel-track::-webkit-scrollbar-track {
  background: #f5efe3;
  border-radius: 3px;
}
.combo-carousel-track::-webkit-scrollbar-thumb {
  background: var(--brand-gold);
  border-radius: 3px;
}

.combo-carousel-card {
  scroll-snap-align: start;
  flex: 0 0 calc(100% - 1rem);
  min-width: 280px;
}
@media (min-width: 640px) {
  .combo-carousel-card {
    flex: 0 0 calc(50% - 0.75rem);
  }
}
@media (min-width: 1024px) {
  .combo-carousel-card {
    flex: 0 0 calc(25% - 1.125rem);
  }
}

/* Bilingual Language Toggle Header Button */
.lang-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.85rem;
  min-height: 40px;
  min-width: 40px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1.5px solid var(--brand-border);
  background-color: var(--brand-cream);
  color: var(--brand-festive-maroon);
  cursor: pointer;
  transition: all 0.2s ease;
}
header button, #mobile-menu-btn {
  min-width: 40px;
  min-height: 40px;
}
.lang-toggle-btn:hover {
  border-color: var(--brand-orange);
  background-color: #ffffff;
  color: var(--brand-orange-dark);
}
.lang-toggle-btn .lang-active {
  color: var(--brand-orange-dark);
  font-weight: 800;
  border-bottom: 2px solid var(--brand-orange-dark);
}
.lang-toggle-btn .lang-separator {
  color: #c4b5a0;
  font-weight: 400;
}

/* Slim Animated Festive Announcement Bar */
.festive-announcement-bar {
  background: linear-gradient(90deg, #B42332 0%, #761C2A 35%, #F47721 70%, #E99524 100%);
  background-size: 200% auto;
  animation: shimmerGradient 12s ease infinite;
}
@keyframes shimmerGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.announcement-ticker-item {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Floating Sticky Cart Button (Mobile & Quick Access) */
.floating-cart-btn {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 45;
  background: linear-gradient(135deg, #761C2A 0%, #B42332 100%);
  color: #ffffff;
  padding: 0.75rem 1.125rem;
  border-radius: 9999px;
  box-shadow: 0 10px 25px -3px rgba(118, 28, 42, 0.45);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 0.875rem;
  border: 1.5px solid rgba(214, 173, 85, 0.7);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.floating-cart-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -3px rgba(118, 28, 42, 0.6);
}

/* ==========================================================================
   Traditional Maharashtrian Diwali Kandil (लटकणारा आकाशकंदील)
   ========================================================================== */

/* Hanging Container */
.kandil-hanging {
  position: absolute;
  pointer-events: none;
  z-index: 25;
  transform-origin: 50% 0%;
  will-change: transform;
}

/* Hero Left Kandil (slightly slower pendulum swing) */
.kandil-left {
  animation: kandilSwayLeft 5.5s ease-in-out infinite alternate, kandilDropIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Hero Right Kandil (organic asymmetry with different duration and delay) */
.kandil-right {
  animation: kandilSwayRight 6.8s ease-in-out infinite alternate -2s, kandilDropIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Faral Combos Section Decorative Kandils */
.kandil-combo {
  animation: kandilSwayLeft 4.8s ease-in-out infinite alternate;
}

/* Gentle swinging keyframes (subtle angles, 2.5deg - 3.5deg max) */
@keyframes kandilSwayLeft {
  0% {
    transform: rotate(-3.5deg);
  }
  50% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(3deg);
  }
}

@keyframes kandilSwayRight {
  0% {
    transform: rotate(3.2deg);
  }
  50% {
    transform: rotate(-1.2deg);
  }
  100% {
    transform: rotate(-3deg);
  }
}

/* Smooth initial entrance on page load */
@keyframes kandilDropIn {
  0% {
    transform: translateY(-36px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Warm internal glow pulsing animation */
.kandil-glow-pulse {
  animation: kandilGlowPulse 3.8s ease-in-out infinite alternate;
}

@keyframes kandilGlowPulse {
  0% {
    opacity: 0.75;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 0.8;
    transform: scale(0.96);
  }
}

/* Hanging Tassels Secondary Gentle Flutter */
.kandil-tassel-streamer {
  transform-origin: 50% 0%;
  animation: kandilTasselsSway 3s ease-in-out infinite alternate;
}

@keyframes kandilTasselsSway {
  0% {
    transform: skewX(-2.5deg) scaleX(0.98);
  }
  100% {
    transform: skewX(2.5deg) scaleX(1.02);
  }
}

/* Accessible Reduced-Motion Mode */
@media (prefers-reduced-motion: reduce) {
  .kandil-hanging,
  .kandil-left,
  .kandil-right,
  .kandil-combo,
  .kandil-glow-pulse,
  .kandil-tassel-streamer {
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Product Carousel System (Exceptional Festive Carousels)
   ========================================================================== */
.product-carousel-container {
  position: relative;
  width: 100%;
}

.product-carousel-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding: 0.5rem 0.25rem 1rem 0.25rem;
}

.product-carousel-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.product-carousel-card {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.5rem;
}

@media (min-width: 640px) {
  .product-carousel-card {
    width: 50%;
  }
}

@media (min-width: 768px) {
  .product-carousel-card {
    width: 33.333%;
  }
}

@media (min-width: 1024px) {
  .product-carousel-card {
    width: 25%;
  }
}

.carousel-nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  background-color: #FFFFFF;
  border: 1.5px solid var(--brand-border);
  color: var(--brand-festive-maroon);
  box-shadow: 0 4px 12px rgba(66, 41, 31, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  flex-shrink: 0;
}

.carousel-nav-btn:hover:not(:disabled) {
  background-color: var(--brand-warm-cream);
  border-color: var(--brand-traditional-gold);
  color: var(--brand-vibrant-orange);
  transform: scale(1.08);
}

.carousel-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.carousel-indicator-dot {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background-color: #E9DCC7;
  border: 1px solid #D6AD55;
  transition: all 0.3s ease;
  cursor: pointer;
  padding: 0;
}

.carousel-indicator-dot.active {
  width: 24px;
  background-color: var(--brand-vibrant-orange);
  border-color: var(--brand-vibrant-orange);
}

/* ==========================================================================
   Checkout & Cart Enhancements
   ========================================================================== */
.checkout-step-badge {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8125rem;
  background-color: var(--brand-festive-maroon);
  color: var(--brand-warm-cream);
}

.checkout-step-badge.inactive {
  background-color: #E9DCC7;
  color: var(--brand-deep-brown);
}

.checkout-input-group label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--brand-festive-maroon);
  margin-bottom: 0.35rem;
  display: block;
}

.checkout-input-group input,
.checkout-input-group select,
.checkout-input-group textarea {
  width: 100%;
  padding: 0.65rem 0.875rem;
  font-size: 0.875rem;
  border-radius: 0.875rem;
  border: 1.5px solid var(--brand-border);
  background-color: #FFFFFF;
  color: var(--brand-deep-brown);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.checkout-input-group input:focus,
.checkout-input-group select:focus,
.checkout-input-group textarea:focus {
  border-color: var(--brand-vibrant-orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 119, 33, 0.15);
}

/* Festive badge accents */
.badge-festive {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  background-color: #FFF7EA;
  border: 1px solid #D6AD55;
  color: #761C2A;
}

/* Account & Tabs styling */
.account-tab-btn {
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 0.875rem;
  color: var(--brand-deep-brown);
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.account-tab-btn.active {
  background-color: var(--brand-festive-maroon);
  color: #FFF7EA;
  border-color: var(--brand-traditional-gold);
  box-shadow: 0 4px 12px rgba(118, 28, 42, 0.2);
}