/* ==========================================================================
   AURA LUXURY ATELIER - SKINCARE & HERITAGE SAREES
   Custom Aesthetics matching the exact minimalist luxury editorial design
   ========================================================================== */

:root {
  --aura-bg: #FBF9F5;
  --aura-card-bg: #F5F1E9;
  --aura-card-surface: #FFFFFF;
  --aura-border: #E8E2D5;
  --aura-border-light: #F0EBE1;
  --aura-text-main: #1A1A1A;
  --aura-text-muted: #73706A;
  --aura-accent-gold: #C5A880;
  --aura-accent-sand: #EAE3D6;
  --aura-font-serif: 'Cormorant Garamond', Georgia, serif;
  --aura-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

body {
  background-color: var(--aura-bg);
  color: var(--aura-text-main);
  font-family: var(--aura-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-serif {
  font-family: var(--aura-font-serif);
}

.font-sans {
  font-family: var(--aura-font-sans);
}

/* Luxury Letter Spacing */
.tracking-ultra {
  letter-spacing: 0.25em;
}

.tracking-luxury {
  letter-spacing: 0.18em;
}

/* Glassmorphism Subtle */
.aura-glass {
  background: rgba(251, 249, 245, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Product Card Aesthetic matching screenshot */
.aura-product-card {
  background-color: #FFFFFF;
  border-radius: 1rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  overflow: hidden;
  position: relative;
}

.aura-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(30, 26, 20, 0.08);
}

.aura-product-image-wrap {
  background-color: #F6F3EC;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

.aura-product-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.aura-product-card:hover .aura-product-image-wrap img {
  transform: scale(1.05);
}

/* Black Circular Plus Button from screenshot */
.aura-add-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #1A1A1A;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.aura-add-btn:hover {
  background-color: #000000;
  transform: scale(1.12);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

/* Category Pill Card */
.aura-cat-card {
  transition: all 0.25s ease;
  border: 1px solid var(--aura-border-light);
}

.aura-cat-card:hover {
  border-color: #1A1A1A;
  transform: translateY(-2px);
  background-color: #FFFFFF;
}

/* Smooth Slide Drawers */
.drawer-backdrop {
  transition: opacity 0.3s ease-in-out;
}

.drawer-panel {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* WhatsApp Brand Pulse */
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.whatsapp-pulse {
  animation: wa-pulse 2s infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #F4EFE6;
}
::-webkit-scrollbar-thumb {
  background: #D2C8B8;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #A99E8E;
}

/* ==========================================================================
   Flipkart-Style Product Variant Selectors (Color Swatches, Size Boxes, Modal)
   ========================================================================== */

/* Color Swatch Card */
.flipkart-color-swatch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border-radius: 9999px;
  border: 1.5px solid #E5E0D8;
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  position: relative;
}

.flipkart-color-swatch:hover {
  border-color: #8C8275;
  background-color: #FDFCF9;
  transform: translateY(-1px);
}

.flipkart-color-swatch.active {
  border-color: #1A1A1A;
  background-color: #1A1A1A;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(26, 26, 26, 0.15);
}

.flipkart-color-swatch .swatch-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.flipkart-color-swatch.active .swatch-dot {
  box-shadow: 0 0 0 1.5px #FFFFFF;
  transform: scale(1.1);
}

.flipkart-color-swatch .swatch-name {
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}

.flipkart-color-swatch.active .swatch-name {
  font-weight: 600;
}

.flipkart-color-swatch .swatch-check {
  display: none;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  color: #FFFFFF;
}

.flipkart-color-swatch.active .swatch-check {
  display: inline-block;
}

/* Size Selection Box (Flipkart Style) */
.flipkart-size-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.65rem 0.95rem;
  border-radius: 0.85rem;
  border: 1.5px solid #E5E0D8;
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  user-select: none;
  position: relative;
}

.flipkart-size-box:hover {
  border-color: #78716C;
  background-color: #FAF8F5;
  transform: translateY(-1px);
}

.flipkart-size-box.active {
  border-color: #1C1917;
  background-color: #FAF7F2;
  box-shadow: 0 0 0 1px #1C1917;
}

.flipkart-size-box.active .size-title {
  color: #1C1917;
  font-weight: 700;
}

.flipkart-size-box .size-badge {
  position: absolute;
  top: -8px;
  right: 8px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
  background: #1C1917;
  color: #FFFFFF;
}

/* Customization Pill */
.flipkart-custom-pill {
  border: 1.5px solid #E7E2D8;
  background: #FFFFFF;
  border-radius: 0.85rem;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.flipkart-custom-pill:hover {
  border-color: #78716C;
}

.flipkart-custom-pill.active {
  border-color: #1C1917;
  background: #FAF7F2;
  box-shadow: 0 0 0 1px #1C1917;
}

/* Size Chart Modal animations */
.size-chart-modal-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.size-chart-content {
  animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPop {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}