/* =====================================================================
   SattvikBazaar.com - Neo-Tangible Design System (2027 Baseline)
   Color Palette: Warm Saffron, Temple Marigold, Royal Antique Gold, 
                  Deep Sacred Slate, Pure Milk White
   ===================================================================== */

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

:root {
  --sb-saffron: #E65100;
  --sb-saffron-dark: #BF360C;
  --sb-saffron-light: #FFF3E0;
  --sb-marigold: #F57C00;
  --sb-gold: #D4AF37;
  --sb-gold-light: #FEF9C3;
  --sb-gold-dark: #854D0E;
  --sb-slate: #1E293B;
  --sb-slate-dark: #0F172A;
  --sb-milk: #FAFAF9;
  --spring-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--sb-milk);
  color: var(--sb-slate);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, .font-serif-sacred {
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

p, li, .text-pretty {
  text-wrap: pretty;
}

.tabular-nums, .price-display, .countdown-digit {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Neo-Tangible Card Surface with Subtle Top Rim Highlight */
.tangible-card {
  background: #FFFFFF;
  border-radius: 1rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
    0 1px 3px 0 rgba(15, 23, 42, 0.04),
    0 8px 24px -4px rgba(15, 23, 42, 0.06);
  transition: transform 160ms var(--spring-easing), box-shadow 160ms ease, border-color 160ms ease;
}

.tangible-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 1),
    0 4px 6px -1px rgba(15, 23, 42, 0.05),
    0 16px 32px -6px rgba(230, 81, 0, 0.12);
}

/* Tactile Spring Buttons */
.btn-sacred-primary {
  background: linear-gradient(135deg, #FF7A00 0%, #E65100 100%);
  color: #FFFFFF;
  font-weight: 700;
  border-radius: 0.75rem;
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
    0 2px 4px 0 rgba(230, 81, 0, 0.2),
    0 8px 20px -2px rgba(230, 81, 0, 0.3);
  transition: transform 120ms var(--spring-easing), filter 120ms ease;
  cursor: pointer;
}

.btn-sacred-primary:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.btn-sacred-primary:active {
  transform: scale(0.97);
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.btn-sacred-gold {
  background: linear-gradient(135deg, #FDE047 0%, #D4AF37 50%, #B45309 100%);
  color: #1E293B;
  font-weight: 700;
  border-radius: 0.75rem;
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.6),
    0 4px 12px 0 rgba(212, 175, 55, 0.3);
  transition: transform 120ms var(--spring-easing);
  cursor: pointer;
}

.btn-sacred-gold:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.btn-sacred-gold:active {
  transform: scale(0.97);
}

/* Divine Subtle Glow Accent */
.gold-rim-glow {
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 0 15px -2px rgba(212, 175, 55, 0.2);
}

/* Subtle Sacred Pattern Background */
.bg-mandala-texture {
  background-color: #FAFAF9;
  background-image: radial-gradient(rgba(230, 81, 0, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Zero CLS Pre-allocated Aspect Boxes */
.img-container-box {
  aspect-ratio: 6 / 5;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FEF9C3;
  overflow: hidden;
  border-radius: 0.75rem 0.75rem 0 0;
}

.img-container-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.tangible-card:hover .img-container-box img {
  transform: scale(1.04);
}

/* Countdown Clock Box */
.timer-pill {
  background: rgba(30, 41, 59, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 0.5rem;
  padding: 0.35rem 0.6rem;
  min-width: 44px;
  text-align: center;
}

/* Custom Cart Drawer Styling */
#cartDrawer {
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

#cartDrawerBackdrop {
  transition: opacity 280ms ease;
}

/* Toast Notification */
#toastNotification {
  transition: transform 240ms var(--spring-easing), opacity 200ms ease;
}

/* Comparison Table Highlights */
.sattvik-highlight-col {
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.4) 0%, rgba(255, 237, 213, 0.2) 100%);
  border-left: 2px solid #E65100;
  border-right: 2px solid #E65100;
}

/* Focus Visible Accessible Accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: none;
  ring: 2px solid #E65100;
  outline-offset: 2px;
}