/* Eliza & Sarah Multi-Theme CSS Palette Settings */
:root, body.theme-royal_gold {
  --color-gold: #C9A227;
  --color-gold-light: #E5C158;
  --color-pink: #E91E63;
  --color-pink-hover: #D81B60;
  --color-dark: #141414;
  --color-dark-surface: #1A1A24;
}

body.theme-emerald_luxury {
  --color-gold: #10B981;
  --color-gold-light: #34D399;
  --color-pink: #059669;
  --color-pink-hover: #047857;
  --color-dark: #064E3B;
  --color-dark-surface: #065F46;
}

body.theme-midnight_sapphire {
  --color-gold: #38BDF8;
  --color-gold-light: #7DD3FC;
  --color-pink: #4F46E5;
  --color-pink-hover: #4338CA;
  --color-dark: #0F172A;
  --color-dark-surface: #1E293B;
}

body.theme-blush_rose {
  --color-gold: #F43F5E;
  --color-gold-light: #FB7185;
  --color-pink: #E11D48;
  --color-pink-hover: #BE123C;
  --color-dark: #27131A;
  --color-dark-surface: #3D1C28;
}

body.theme-classic_monochrome {
  --color-gold: #9CA3AF;
  --color-gold-light: #D1D5DB;
  --color-pink: #1F2937;
  --color-pink-hover: #111827;
  --color-dark: #111827;
  --color-dark-surface: #1F2937;
}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #212529;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-serif {
  font-family: 'Playfair Display', serif !important;
}

/* Theme Utility Classes & Overrides */
.text-gold {
  color: var(--color-gold) !important;
}

.bg-gold {
  background-color: var(--color-gold) !important;
}

.text-pink {
  color: var(--color-pink) !important;
}

.bg-pink {
  background-color: var(--color-pink) !important;
}

.bg-dark {
  background-color: var(--color-dark) !important;
}

.btn-dark {
  background-color: var(--color-dark) !important;
  border-color: var(--color-dark) !important;
  color: #ffffff !important;
  transition: all 0.3s ease;
}

.btn-dark:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.border-gold {
  border-color: var(--color-gold) !important;
}

.btn-pink {
  background-color: var(--color-pink) !important;
  color: #ffffff !important;
  border: none !important;
  transition: all 0.3s ease;
}

.btn-pink:hover, .btn-pink:active, .btn-pink:focus {
  background-color: var(--color-pink-hover) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(233, 30, 99, 0.3);
}

.btn-gold {
  background-color: var(--color-gold) !important;
  color: #000000 !important;
  border: none !important;
  transition: all 0.3s ease;
}

.btn-gold:hover, .btn-gold:active, .btn-gold:focus {
  background-color: var(--color-gold-light) !important;
  color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(201, 162, 39, 0.4);
}

/* Brand Logo Styling */
.brand-title {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.15em;
  color: var(--color-dark);
  line-height: 1;
}

/* Logo Ampersand Font Switching Rules */
body.font-amp-monsieur_la_doulaise .brand-amp {
  font-family: 'Monsieur La Doulaise', cursive, serif !important;
  font-size: 1.65em !important;
}

body.font-amp-great_vibes .brand-amp {
  font-family: 'Great Vibes', cursive, serif !important;
  font-size: 1.4em !important;
}

body.font-amp-cormorant .brand-amp {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 1.3em !important;
}

body.font-amp-cinzel .brand-amp {
  font-family: 'Cinzel Decorative', serif !important;
  font-size: 1.15em !important;
}

body.font-amp-playfair .brand-amp {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-size: 1.25em !important;
}

.brand-amp {
  font-family: 'Monsieur La Doulaise', cursive, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--color-gold) !important;
  font-size: 1.65em !important;
  margin: 0 0.15em !important;
  text-transform: lowercase !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

.brand-sub {
  font-size: 0.55rem;
  letter-spacing: 0.35em;
  font-weight: 700;
  color: var(--color-gold);
}

/* Hero Carousel Responsive Layout (Desktop & Mobile Adaptive) */
#heroCarousel .carousel-item {
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  position: relative;
}

@media (max-width: 767.98px) {
  #heroCarousel .carousel-item {
    min-height: 260px !important;
    height: 290px !important;
    background-position: center top !important;
    background-size: cover !important;
  }
  #heroCarousel .container {
    min-height: 260px !important;
    height: 290px !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  #heroCarousel .hero-content-box {
    background: rgba(15, 15, 18, 0.58) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 0.85rem 1rem !important;
    border-radius: 0.85rem !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    max-width: 320px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  }
  #heroCarousel .hero-badge {
    font-size: 0.62rem !important;
    padding: 0.2rem 0.6rem !important;
    letter-spacing: 0.75px !important;
    margin-bottom: 0.25rem !important;
    display: inline-block !important;
  }
  #heroCarousel h1.display-3 {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.2rem !important;
  }
  #heroCarousel p.fs-5 {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.55rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }
  #heroCarousel .btn-hero {
    padding: 0.32rem 0.9rem !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.5px !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #heroCarousel .carousel-item {
    min-height: 380px !important;
    height: 400px !important;
    background-position: center 20% !important;
  }
  #heroCarousel .container {
    min-height: 380px !important;
    height: 400px !important;
  }
  #heroCarousel .hero-content-box {
    background: rgba(15, 15, 18, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 1.5rem !important;
    border-radius: 1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    max-width: 420px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  }
  #heroCarousel h1.display-3 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  #heroCarousel p.fs-5 {
    font-size: 0.95rem !important;
    margin-bottom: 1rem !important;
  }
  #heroCarousel .btn-hero {
    padding: 0.5rem 1.4rem !important;
    font-size: 0.75rem !important;
  }
}

@media (min-width: 992px) {
  #heroCarousel .carousel-item {
    min-height: 480px !important;
    height: 490px !important;
    background-position: center 20% !important;
  }
  #heroCarousel .container {
    min-height: 480px !important;
    height: 490px !important;
  }
  #heroCarousel .hero-content-box {
    background: rgba(15, 15, 18, 0.48) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 2rem 2.25rem !important;
    border-radius: 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    max-width: 480px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
  }
  #heroCarousel h1.display-3 {
    font-size: 2.5rem !important;
    line-height: 1.15 !important;
    margin-bottom: 0.5rem !important;
  }
  #heroCarousel p.fs-5 {
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1.25rem !important;
    color: rgba(255, 255, 255, 0.92) !important;
  }
  #heroCarousel .btn-hero {
    padding: 0.65rem 1.75rem !important;
    font-size: 0.8rem !important;
  }
}

/* Category Cards Responsive Layout */
.category-card-img,
.card.border-0.shadow-sm.rounded-4.overflow-hidden img.card-img,
.card-img.hover-scale {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  min-height: 280px !important;
  max-height: 420px !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  display: block !important;
}

.card.border-0.shadow-sm.rounded-4.overflow-hidden:hover img.card-img,
.card-img.hover-scale:hover,
.category-card-img:hover {
  transform: scale(1.05);
}

@media (max-width: 767.98px) {
  .category-card-img,
  .card.border-0.shadow-sm.rounded-4.overflow-hidden img.card-img,
  .card-img.hover-scale {
    aspect-ratio: 1 / 1 !important;
    min-height: 200px !important;
    max-height: 280px !important;
  }
}

/* Product Cards Responsive Grid (Desktop & Mobile Adaptive) */
.product-card {
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s ease;
  border-radius: 1.25rem;
  overflow: hidden;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.09) !important;
}

.product-card img,
.product-card .card-img-top,
.product-card-img {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  max-height: 480px !important;
  object-fit: cover !important;
  object-position: center top !important;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  background-color: #FAF8F5;
  display: block !important;
}

.product-card:hover img,
.product-card:hover .card-img-top,
.product-card:hover .product-card-img {
  transform: scale(1.05);
}

@media (max-width: 576px) {
  .product-card .card-body {
    padding: 0.65rem !important;
  }
  .product-card .card-body h5 {
    font-size: 0.85rem !important;
    margin-bottom: 0.25rem !important;
  }
  .product-card .card-body .fs-6 {
    font-size: 0.95rem !important;
  }
  .product-card .card-body .badge {
    font-size: 9px !important;
    padding: 0.2rem 0.4rem !important;
  }
}

.badge-gold {
  background-color: var(--color-gold) !important;
  color: #000000 !important;
  font-weight: 700;
}

.badge-pink {
  background-color: var(--color-pink) !important;
  color: #ffffff !important;
  font-weight: 700;
}

/* Product Detail Page Gallery */
.product-gallery-main {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  max-height: 620px !important;
  object-fit: cover !important;
  object-position: center top !important;
  background-color: #FAF8F5;
  border-radius: 1rem;
  transition: object-fit 0.2s ease, opacity 0.25s ease;
  cursor: zoom-in;
}

.product-gallery-main.contain-mode {
  object-fit: contain !important;
  background-color: #FAF8F5 !important;
  padding: 0.75rem;
}

.product-gallery-thumb {
  width: 75px !important;
  height: 75px !important;
  min-width: 75px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 0.65rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FAF8F5;
}

@media (min-width: 992px) {
  .product-gallery-thumb {
    width: 85px !important;
    height: 85px !important;
    min-width: 85px !important;
  }
}

.product-gallery-thumb:hover {
  opacity: 0.85;
  transform: scale(1.04);
}

.product-gallery-thumb.active-thumb {
  border-color: var(--color-pink) !important;
  box-shadow: 0 0 0 2px var(--color-pink) !important;
}

/* Cart, Checkout & Admin Item Images */
.cart-item-img,
.checkout-item-img,
.admin-thumb-img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 0.5rem !important;
  background-color: #FAF8F5;
}

.img-contain-fit {
  object-fit: contain !important;
  background-color: #FAF8F5 !important;
}

/* Navbar Responsiveness */
@media (max-width: 991.98px) {
  .navbar-brand .brand-title {
    font-size: 1.35rem !important;
  }
  .navbar-brand .brand-sub {
    font-size: 0.48rem !important;
    letter-spacing: 0.25em !important;
  }
  .navbar-collapse {
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1.25rem;
    margin-top: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
  }
  .navbar-nav .nav-link {
    padding: 0.6rem 0.5rem !important;
    border-bottom: 1px solid #f7f7f7;
  }
}

@media (min-width: 992px) {
  .navbar-nav .nav-link {
    position: relative;
    transition: color 0.25s ease;
  }
  .navbar-nav .nav-link:hover {
    color: var(--color-gold) !important;
  }
}

/* Floating WhatsApp Support Button */
a[href*="wa.me"][class*="position-fixed"] {
  width: 52px !important;
  height: 52px !important;
  bottom: 22px !important;
  right: 22px !important;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45) !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
}

a[href*="wa.me"][class*="position-fixed"]:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.6) !important;
}

/* Global Image and Input Scaling */
img {
  max-width: 100%;
}

input, select, textarea {
  font-size: 15px !important;
}

@media (max-width: 576px) {
  input, select, textarea {
    font-size: 16px !important; /* Prevents auto-zoom on mobile iOS Safari */
  }
}

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

/* ============================================================
   ELIZA & SARAH LUXURY ANIMATION & MICRO-INTERACTIONS SUITE
   ============================================================ */

/* 1. Keyframe Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-35px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(35px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomInSoft {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes shimmerSweep {
  0% {
    transform: translateX(-150%) rotate(25deg);
  }
  100% {
    transform: translateX(250%) rotate(25deg);
  }
}

@keyframes waPulseAura {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7), 0 4px 18px rgba(37, 211, 102, 0.4);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0), 0 6px 24px rgba(37, 211, 102, 0.6);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 4px 18px rgba(37, 211, 102, 0.4);
  }
}

@keyframes badgePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes heartPop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.4);
  }
  70% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes cartBadgeBounce {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  35% {
    transform: translate(-50%, -50%) scale(1.45);
  }
  70% {
    transform: translate(-50%, -50%) scale(0.85);
  }
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes checkmarkPop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  70% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 2. Scroll Reveal Engine */
.reveal-on-scroll,
.reveal-fade-up,
.reveal-fade-left,
.reveal-fade-right,
.reveal-zoom,
.reveal-fade {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade-up {
  transform: translateY(35px);
}

.reveal-fade-left {
  transform: translateX(-40px);
}

.reveal-fade-right {
  transform: translateX(40px);
}

.reveal-zoom {
  transform: scale(0.92);
}

.reveal-fade {
  transform: none;
}

/* When revealed into viewport */
.reveal-on-scroll.is-revealed,
.reveal-fade-up.is-revealed,
.reveal-fade-left.is-revealed,
.reveal-fade-right.is-revealed,
.reveal-zoom.is-revealed,
.reveal-fade.is-revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Stagger Delay Utilities */
.delay-100 { transition-delay: 0.1s !important; }
.delay-200 { transition-delay: 0.2s !important; }
.delay-300 { transition-delay: 0.3s !important; }
.delay-400 { transition-delay: 0.4s !important; }
.delay-500 { transition-delay: 0.5s !important; }
.delay-600 { transition-delay: 0.6s !important; }

/* 3. Hero Carousel Entrance Animations */
#heroCarousel .carousel-item.active .hero-content-box {
  animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#heroCarousel .carousel-item.active .hero-badge {
  animation: fadeInDown 0.8s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#heroCarousel .carousel-item.active h1.display-3 {
  animation: fadeInUp 0.9s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#heroCarousel .carousel-item.active p.fs-5 {
  animation: fadeInUp 0.9s 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#heroCarousel .carousel-item.active .btn-hero {
  animation: fadeInUp 0.9s 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 4. Luxury Card Shimmer & Hover Lift */
.shimmer-card {
  position: relative;
  overflow: hidden;
}

.shimmer-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 40%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 60%
  );
  transform: translateX(-150%) rotate(25deg);
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.product-card:hover .shimmer-card::after,
.shimmer-card:hover::after {
  opacity: 1;
  animation: shimmerSweep 1.2s ease-in-out forwards;
}

.product-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.product-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.11) !important;
}

.product-card .card-img-top {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.product-card:hover .card-img-top {
  transform: scale(1.07) !important;
}

.badge-pulse {
  animation: badgePulse 2.4s infinite ease-in-out;
}

.heart-pop {
  animation: heartPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cart-bounce {
  animation: cartBadgeBounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 5. Sticky Navbar Frosted Glass & Link Underlines */
nav.sticky-top {
  transition: background-color 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease;
}

nav.sticky-top.scrolled-nav {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07) !important;
}

.navbar-nav .nav-link {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  position: relative;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-gold, #C9A227);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 2px;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 70%;
  left: 15%;
}

/* 6. Button Tactile Feedback & Glow */
.btn {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:active {
  transform: scale(0.97) !important;
}

/* Floating WhatsApp Pulsing Aura */
.wa-floating-btn,
a[href*="wa.me"][class*="position-fixed"] {
  animation: waPulseAura 2.6s infinite cubic-bezier(0.25, 0, 0.2, 1) !important;
}

/* WhatsApp Tooltip Speech Bubble */
.wa-tooltip-bubble {
  position: fixed;
  bottom: 84px;
  right: 22px;
  z-index: 9998;
  background: #ffffff;
  color: #1f2937;
  padding: 10px 16px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(37, 211, 102, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.wa-tooltip-bubble.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.wa-tooltip-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 20px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  transform: rotate(45deg);
  border-right: 1px solid rgba(37, 211, 102, 0.3);
  border-bottom: 1px solid rgba(37, 211, 102, 0.3);
}

/* 7. Toast Animation */
.toast-container .alert {
  animation: toastSlideIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 8. Success Checkmark Pop */
.animated-check-circle {
  animation: checkmarkPop 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 9. Product Card Badge Group & Utilities */
.text-10 {
  font-size: 10px !important;
  line-height: 1.2 !important;
}

.product-badge-group {
  pointer-events: none;
  z-index: 2;
}

.product-badge-group .badge {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  padding: 3px 8px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}