/* Add custom CSS styles below */ 
#mainnav{
  /* The blur amount */
  backdrop-filter: blur(10px);
  
  /* Safari support (still necessary for some versions) */
  -webkit-backdrop-filter: blur(10px);

  /* A semi-transparent background is REQUIRED to see the effect */
  background-color: rgba(255, 255, 255, 0.3);
}

.s-product-card-image-cover{
  object-fit: cover
}

/* ========================================================
   Jewlz Premium UI Modernization CSS
   ======================================================== */

:root {
  /* Premium Shadow & Animation Variables */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-premium: 0 12px 32px -4px rgba(19, 35, 66, 0.12); /* Tied to your primary color */
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --radius-modern: 12px;
}

/* 1. Global Optimization & Typography */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  text-rendering: optimizeLegibility;
}

/* 2. Sleek Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--color-primary-light, #394968);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-primary);
}

/* 3. Glassmorphism for Navigation */
.art-sticky {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition-smooth);
}

/* 4. Product Cards - Premium Hover Lift (GPU Accelerated) */
salla-product-card {
  transition: var(--transition-smooth) !important;
  border-radius: var(--radius-modern);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.03);
  background: #ffffff;
  will-change: transform, box-shadow;
}
salla-product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-premium);
  border-color: rgba(0, 0, 0, 0.06);
}

/* 5. Buttons & Interactive Elements */
salla-button, .btn, .header-btn {
  transition: var(--transition-smooth);
  will-change: transform;
}
salla-button:hover, .btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
salla-button:active, .btn:active {
  transform: translateY(0);
}

/* 6. Accessibility: Modern Focus States */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 4px;
  transition: outline-offset 0.2s ease;
}

/* 7. Image & Category Polish */
.art-categories-grid img,
.art-categories img {
  border-radius: var(--radius-modern);
  /* Smoother, slightly slower scale for an elegant feel */
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); 
}
.art-categories a:hover img {
  transform: scale(1.04); /* Subtler scale is more high-end than 1.10 */
}

/* 8. FAQ Accordion UX */
.art-accordion {
  transition: var(--transition-smooth);
  border-color: rgba(0,0,0,0.04) !important;
}
.art-accordion:hover {
  background-color: rgba(0,0,0,0.015);
  padding-inline: 12px;
  border-radius: 8px;
  border-color: transparent !important;
}
.art-faq-label h5 {
  transition: color 0.3s ease;
}
.art-accordion:hover .art-faq-label h5 {
  color: var(--color-primary);
}

/* 9. Cinematic Video & Banner Overlays */
.art-video-banner::after, 
.art-banner::after {
  /* Richer gradient for better text contrast without making the image entirely dark */
  background: linear-gradient(to bottom, rgba(19, 35, 66, 0.1), rgba(19, 35, 66, 0.7)) !important;
}
.art-title {
  text-shadow: 0 4px 16px rgba(0,0,0,0.4);
  letter-spacing: 0.5px !important;
}

/* 10. Footer Modernization */
.art-store-footer {
  border-top: 1px solid rgba(0,0,0,0.03);
  background: linear-gradient(to bottom, #ffffff, #f8fafc);
}