:root{
  color-scheme: only light;

  /* ==========================================================================
     DIVINE POURED — DESIGN SYSTEM FOUNDATION (PHASE 2)
     Direction: Luxury Digital Art Gallery + Premium Ecommerce
     ========================================================================== */

  /* --- 1. COLOR PALETTE --- */
  /* Backgrounds & Canvas */
  --dp-color-bg: #fbfaf6;
  --dp-color-bg-soft: #f5efe3;
  --dp-color-bg-warm: #f2ece0;
  --dp-color-bg-overlay: rgba(26, 20, 14, 0.65);

  /* Surfaces & Elevation */
  --dp-color-surface: #ffffff;
  --dp-color-surface-warm: #faf6ee;
  --dp-color-surface-elevated: #ffffff;

  /* Typography & Ink */
  --dp-color-ink: #241b13;
  --dp-color-text: #342819;
  --dp-color-muted: #74634f;
  --dp-color-subtle: #9b8a73;
  --dp-color-inverse: #ffffff;

  /* Brand Accents (Art Gallery Liquid Gold & Warm Terrakotta) */
  --dp-color-accent: #b98b22;
  --dp-color-accent-strong: #d7a83a;
  --dp-color-accent-soft: rgba(185, 139, 34, 0.10);
  --dp-color-accent-subtle: rgba(185, 139, 34, 0.05);
  --dp-color-accent-rgb: 185, 139, 34;
  --dp-color-clay: #7b1f16;
  --dp-color-clay-soft: #a2382c;

  /* Borders & Dividers */
  --dp-color-border: rgba(185, 139, 34, 0.20);
  --dp-color-border-subtle: rgba(36, 27, 19, 0.08);
  --dp-color-border-strong: rgba(185, 139, 34, 0.40);

  /* --- 2. TYPOGRAPHY SYSTEM --- */
  --dp-font-heading: "Cinzel", serif;
  --dp-font-body: "Plus Jakarta Sans", sans-serif;

  /* Fluid Typography Scale */
  --dp-type-display: clamp(2.35rem, 5vw, 4.2rem);
  --dp-type-h1: clamp(1.85rem, 3.8vw, 2.85rem);
  --dp-type-section: clamp(1.55rem, 2.8vw, 2.35rem);
  --dp-type-subsection: clamp(1.18rem, 1.8vw, 1.5rem);
  --dp-type-subtitle: clamp(1.02rem, 1.3vw, 1.25rem);
  --dp-type-body: clamp(0.92rem, 0.4vw + 0.82rem, 1.02rem);
  --dp-type-body-sm: 0.875rem;
  --dp-type-small: 0.8125rem;
  --dp-type-label: 0.75rem;
  --dp-type-price: clamp(1.05rem, 0.6vw + 0.9rem, 1.25rem);
  --dp-type-button: 0.92rem;

  /* Line Heights */
  --dp-leading-tight: 1.15;
  --dp-leading-snug: 1.28;
  --dp-leading-normal: 1.55;
  --dp-leading-relaxed: 1.68;

  /* Letter Spacing */
  --dp-tracking-tight: -0.015em;
  --dp-tracking-normal: 0;
  --dp-tracking-wide: 0.04em;
  --dp-tracking-wider: 0.08em;

  /* --- 3. SPACING SCALE --- */
  --dp-space-2xs: 4px;
  --dp-space-xs: 8px;
  --dp-space-sm: 12px;
  --dp-space-md: 16px;
  --dp-space-lg: 24px;
  --dp-space-xl: 32px;
  --dp-space-2xl: 48px;
  --dp-space-3xl: 64px;

  /* Section Vertical Rhythm (Compact, Breathable, Intentional) */
  --dp-section-y: clamp(32px, 4.8vw, 64px);
  --dp-section-y-compact: clamp(18px, 2.8vw, 36px);

  /* --- 4. CONTAINER SYSTEM & PAGE GUTTERS --- */
  --dp-container-readable: 720px;
  --dp-container-compact: 960px;
  --dp-container-content: 1200px;
  --dp-container-wide: 1440px;
  --dp-page-gutter: clamp(16px, 3vw, 40px);

  /* --- 5. BORDER RADII --- */
  --dp-radius-xs: 4px;
  --dp-radius-sm: 8px;
  --dp-radius-md: 12px;
  --dp-radius-lg: 18px;
  --dp-radius-xl: 24px;
  --dp-radius-pill: 9999px;

  /* --- 6. SHADOWS (Warm Luxury Gallery Shadows) --- */
  --dp-shadow-xs: 0 1px 3px rgba(36, 27, 19, 0.04);
  --dp-shadow-sm: 0 4px 14px rgba(90, 70, 43, 0.07);
  --dp-shadow-md: 0 10px 28px rgba(90, 70, 43, 0.10);
  --dp-shadow-lg: 0 18px 44px rgba(90, 70, 43, 0.14);
  --dp-shadow-glow: 0 0 20px rgba(185, 139, 34, 0.22);
  --dp-shadow-focus: 0 0 0 3px rgba(var(--dp-color-accent-rgb), 0.22);

  /* --- 7. TRANSITIONS --- */
  --dp-transition-fast: 160ms cubic-bezier(0.2, 0, 0.2, 1);
  --dp-transition: 240ms cubic-bezier(0.2, 0, 0.2, 1);
  --dp-transition-slow: 360ms cubic-bezier(0.2, 0, 0.2, 1);

  /* --- 8. BACKWARD-COMPATIBLE LEGACY ALIASES --- */
  --bg-primary: var(--dp-color-bg);
  --bg-secondary: var(--dp-color-bg-soft);
  --bg-tertiary: #eee4cf;
  --accent-gold: var(--dp-color-accent);
  --accent-gold-hover: var(--dp-color-accent-strong);
  --accent-gold-rgb: var(--dp-color-accent-rgb);
  --accent-teal: var(--dp-color-clay);
  --accent-teal-light: var(--dp-color-clay-soft);
  --text-primary: var(--dp-color-text);
  --text-secondary: var(--dp-color-muted);
  --text-muted: var(--dp-color-subtle);
  --glass-bg: rgba(250, 246, 238, 0.78);
  --glass-bg-hover: rgba(255, 255, 255, 0.92);
  --glass-border: var(--dp-color-border);
  --glass-border-focus: var(--dp-color-border-strong);
  --glass-shadow: var(--dp-shadow-sm);

  --font-heading: var(--dp-font-heading);
  --font-body: var(--dp-font-body);

  --transition-smooth: all var(--dp-transition);
  --transition-fast: all var(--dp-transition-fast);

  --border-radius-sm: var(--dp-radius-sm);
  --border-radius-md: var(--dp-radius-md);
  --border-radius-lg: var(--dp-radius-lg);
}

/* Base resets */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Accessibility Skip Link & Screen Reader Helpers */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link:focus{
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 999999 !important;
  width: auto !important;
  height: auto !important;
  padding: 10px 18px !important;
  background: #181715 !important;
  color: #ffd54f !important;
  border: 2px solid #ffd54f !important;
  border-radius: 6px !important;
  clip: auto !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html{
  scroll-behavior: smooth;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  background-color: var(--dp-color-bg);
  background-image: 
    radial-gradient(at 0% 0%, rgba(197, 155, 39, 0.12) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(26, 77, 92, 0.10) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(197, 155, 39, 0.10) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(123, 31, 22, 0.08) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(247, 244, 235, 0.85) 0%, rgba(243, 236, 216, 0.4) 100%);
  background-attachment: scroll;
  color: var(--dp-color-text);
  font-family: var(--font-body);
  font-size: var(--dp-type-body);
  line-height: 1.55;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  position: relative;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- TYPOGRAPHY FOUNDATION --- */
h1, h2, h3, h4, h5, h6{
  color: var(--dp-color-ink);
  font-family: var(--dp-font-heading);
  line-height: var(--dp-leading-tight);
  letter-spacing: var(--dp-tracking-tight);
  font-weight: 700;
  text-rendering: optimizeLegibility;
}

h1{
  font-size: var(--dp-type-display);
}

h2{
  font-size: var(--dp-type-section);
}

h3{
  font-size: var(--dp-type-subsection);
}

h4{
  font-size: var(--dp-type-subtitle);
}

h5{
  font-size: var(--dp-type-body);
  font-weight: 600;
}

h6{
  font-size: var(--dp-type-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--dp-tracking-wide);
}

p{
  color: inherit;
  line-height: var(--dp-leading-normal);
}

small{
  font-size: var(--dp-type-small);
  color: var(--dp-color-muted);
}

:focus-visible{
  outline: none;
  box-shadow: var(--dp-shadow-focus);
}

@media (min-width: 1025px) {
  body{
    background-attachment: fixed;
  }
}

/* Fluid Animated Ambient Background Resin Mesh Orbs */
body::before{
  content: "";
  position: fixed;
  top: -15%;
  right: -10%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, rgba(197, 155, 39, 0.16) 0%, rgba(26, 77, 92, 0.09) 45%, rgba(255, 255, 255, 0) 75%);
  filter: blur(50px);
  z-index: -2;
  pointer-events: none;
  animation: resinOrbFloat 20s ease-in-out infinite alternate;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

body::after{
  content: "";
  position: fixed;
  bottom: -15%;
  left: -10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(123, 31, 22, 0.11) 0%, rgba(197, 155, 39, 0.12) 45%, rgba(255, 255, 255, 0) 75%);
  filter: blur(55px);
  z-index: -2;
  pointer-events: none;
  animation: resinOrbFloatReverse 24s ease-in-out infinite alternate;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Disable expensive continuous fixed animations on mobile to prevent DuckDuckGo / mobile browser jitter */
@media (max-width: 992px) {
  body::before, body::after{
    position: absolute !important;
    animation: none !important;
    filter: blur(25px) !important;
    transform: none !important;
    will-change: auto !important;
  }
}

@keyframes resinOrbFloat {
  0%{ transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%{ transform: translate3d(-50px, 40px, 0) scale(1.1) rotate(45deg); }
  100%{ transform: translate3d(30px, 70px, 0) scale(0.92) rotate(90deg); }
}

@keyframes resinOrbFloatReverse {
  0%{ transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%{ transform: translate3d(60px, -50px, 0) scale(1.08) rotate(-45deg); }
  100%{ transform: translate3d(-40px, -30px, 0) scale(0.9) rotate(-90deg); }
}

a{
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea{
  font-family: inherit;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Scrollbar styling */
::-webkit-scrollbar{
  width: 8px;
}
::-webkit-scrollbar-track{
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb{
  background: var(--accent-teal);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover{
  background: var(--accent-gold);
}

/* --- CONTAINER SYSTEM FOUNDATION --- */
.container{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--dp-page-gutter);
  padding-right: var(--dp-page-gutter);
  box-sizing: border-box;
}

.container{
  max-width: var(--dp-container-content);
}







/* --- CARD FOUNDATION (BASE) --- */




/* --- RESPONSIVE BREAKPOINT STRATEGY (TOKEN SCALING) --- */
/* Breakpoint 1: Large Desktop (1440px+) */
@media (min-width: 1440px) {
  :root{
    --dp-page-gutter: clamp(32px, 3.5vw, 64px);
  }
}

/* Breakpoint 2: Tablet (1024px and below) */
@media (max-width: 1024px) {
  :root{
    --dp-section-y: clamp(28px, 4.5vw, 50px);
    --dp-section-y-compact: clamp(16px, 2.5vw, 28px);
    --dp-page-gutter: clamp(18px, 3vw, 28px);
  }
}

/* Breakpoint 3: Mobile Standard (768px and below) */
@media (max-width: 768px) {
  :root{
    --dp-type-display: clamp(1.95rem, 8vw, 2.5rem);
    --dp-type-section: clamp(1.4rem, 5.5vw, 1.85rem);
    --dp-type-subsection: clamp(1.1rem, 4vw, 1.3rem);
    --dp-type-subtitle: 0.98rem;
    --dp-type-body: 0.92rem;
    --dp-section-y: clamp(24px, 4vw, 36px);
    --dp-section-y-compact: 18px;
    --dp-page-gutter: 16px;
  }
}

/* Breakpoint 4: Small Mobile (375px and below, e.g. iPhone SE / 320-360px) */
@media (max-width: 375px) {
  :root{
    --dp-type-display: 1.8rem;
    --dp-type-section: 1.3rem;
    --dp-type-subsection: 1.05rem;
    --dp-page-gutter: 14px;
    --dp-section-y: 22px;
    --dp-section-y-compact: 14px;
  }
}

/* Navigation */
.header-nav{
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(253, 252, 249, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--glass-border);
  z-index: 100;
  transition: var(--transition-smooth);
}

.header-nav .container{
  max-width: 1440px;
  width: 100%;
  padding: 0 clamp(12px, 2vw, 28px);
  box-sizing: border-box;
}

.header-nav.scrolled{
  padding: 10px 0;
  background: rgba(253, 252, 249, 0.95);
  box-shadow: 0 4px 20px rgba(110, 93, 71, 0.05);
}

.nav-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  gap: clamp(8px, 1.2vw, 20px);
  transition: var(--transition-smooth);
}

.header-nav.scrolled .nav-container{
  height: 60px;
}

.logo{
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1.6vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-dot{
  width: 8px;
  height: 8px;
  background-color: var(--accent-gold);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px var(--accent-gold);
}

.nav-links{
  display: flex;
  gap: clamp(8px, 1.4vw, 24px);
  list-style: none;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}

.nav-links a{
  font-size: clamp(0.76rem, 0.85vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: var(--transition-fast);
  position: relative;
  padding: 6px 2px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none !important;
}

.nav-links a:hover, .nav-links a.active{
  color: var(--accent-gold);
}

.nav-links a::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2.5px;
  border-radius: 2px;
  background-color: var(--accent-gold);
  transition: var(--transition-smooth);
}

.nav-links a:hover::after, .nav-links a.active::after{
  width: 100%;
}

.nav-actions{
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  flex-shrink: 0 !important;
  margin-left: auto;
}

/* User & Admin Status Nav Chips */
.user-nav-status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.admin-nav-chip{
  display: inline-flex;
  align-items: center;
  background: rgba(197, 155, 39, 0.08);
  border: 1px solid rgba(197, 155, 39, 0.4);
  border-radius: 20px;
  padding: 2px 3px 2px 10px;
  gap: 6px;
  transition: var(--transition-fast);
  box-shadow: 0 2px 8px rgba(197, 155, 39, 0.08);
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-nav-chip:hover{
  background: rgba(197, 155, 39, 0.15);
  border-color: var(--accent-gold);
  box-shadow: 0 4px 14px rgba(197, 155, 39, 0.2);
}

.admin-chip-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--accent-gold);
  text-decoration: none !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.admin-chip-badge i{
  font-size: 0.82rem;
}

.admin-chip-logout{
  background: #ffffff;
  color: #6e5d47;
  border: 1px solid rgba(197, 155, 39, 0.35);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-fast);
}

.admin-chip-logout:hover{
  background: #b71c1c;
  color: #ffffff;
  border-color: #b71c1c;
  box-shadow: 0 2px 8px rgba(183, 28, 28, 0.3);
}

.user-nav-chip{
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 3px 4px 3px 12px;
  gap: 8px;
  transition: var(--transition-fast);
}

.user-nav-chip:hover{
  border-color: var(--accent-gold);
}

.user-chip-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none !important;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip-logout{
  background: transparent;
  color: var(--text-muted);
  border: none;
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.user-chip-logout:hover{
  color: #b71c1c;
  background: rgba(183, 28, 28, 0.08);
}

.nav-signin-btn{
  background: rgba(197, 155, 39, 0.08);
  color: var(--text-primary);
  border: 1px solid rgba(197, 155, 39, 0.35);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.nav-signin-btn:hover{
  background: var(--accent-gold);
  color: #ffffff;
  border-color: var(--accent-gold);
  box-shadow: 0 3px 10px rgba(197, 155, 39, 0.25);
}

.search-bar-container{
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 6px 12px;
  gap: 6px;
  flex: 0 1 210px;
  max-width: 210px;
  min-width: 100px;
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color var(--dp-transition-fast), background var(--dp-transition-fast), box-shadow var(--dp-transition-fast), max-width var(--dp-transition-fast);
}

.search-bar-container:focus-within{
  border-color: var(--accent-gold);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 12px rgba(197, 155, 39, 0.18);
  flex: 0 1 240px;
  max-width: 240px;
}

.search-bar-container input{
  background: none;
  border: none;
  outline: none;
  font-size: 0.82rem;
  color: var(--text-primary);
  flex: 1 1 0%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: var(--font-body);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.search-bar-container:focus-within input{
  width: 100%;
}

.search-bar-container i{
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
}

.search-bar-container i:hover{
  color: var(--accent-gold);
}

.icon-btn{
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.25rem;
  cursor: pointer;
  position: relative;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border-radius: 50%;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.icon-btn:hover{
  background: var(--dp-color-accent-soft);
  color: var(--accent-gold);
}

.icon-btn:focus-visible{
  outline: none;
  box-shadow: var(--dp-shadow-focus);
}

.cart-badge{
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: var(--accent-gold);
  color: var(--bg-primary);
  font-size: 0.75rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

/* Sections management - Optimized against mobile flickering */
.page-section{
  display: none;
  padding-top: 120px;
  min-height: 100vh;
  min-height: 100dvh;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-section.active{
  display: block;
  opacity: 1;
  transform: translateY(0);
}

#home-view.active{
  transform: none !important;
  opacity: 1 !important;
  padding-top: 0 !important;
  min-height: auto !important;
}

/* ==========================================================================
   MOBILE NAVIGATION DRAWER & BOTTOM BAR
   ========================================================================== */
.mobile-menu-toggle-btn{
  display: none;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.mobile-nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 5, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-overlay.open{
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.mobile-nav-drawer{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 86%;
  max-width: 340px;
  background: #ffffff;
  z-index: 1201;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, visibility 0.35s ease;
  box-shadow: none;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px 20px;
  box-sizing: border-box;
}

.mobile-nav-drawer.open{
  transform: translateX(0) !important;
  box-shadow: 10px 0 35px rgba(0, 0, 0, 0.25);
  visibility: visible !important;
  pointer-events: auto !important;
}

.mobile-nav-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(197, 155, 39, 0.2);
}

.mobile-drawer-logo{
  font-size: 1.35rem !important;
}

.mobile-nav-close-btn{
  background: rgba(197, 155, 39, 0.1);
  border: 1px solid rgba(197, 155, 39, 0.3);
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: var(--transition-fast);
}

.mobile-nav-close-btn:hover{
  background: var(--accent-gold);
  color: #fff;
}

.mobile-drawer-user-card{
  background: rgba(247, 244, 235, 0.85);
  border: 1px solid rgba(197, 155, 39, 0.25);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 20px;
}

.mobile-drawer-links{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.mobile-nav-link{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--text-primary) !important;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: var(--transition-fast);
}

.mobile-nav-link:hover, .mobile-nav-link.active{
  background: rgba(197, 155, 39, 0.12);
  color: #8c6716 !important;
  border-left: 3px solid var(--accent-gold);
}

.mobile-nav-icon{
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}

.mobile-badge-pill{
  margin-left: auto;
  font-size: 0.7rem;
  background: linear-gradient(135deg, #c59b27, #e5b83e);
  color: #121820;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
}

.mobile-drawer-footer{
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(197, 155, 39, 0.15);
}

.mobile-whatsapp-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25d366;
  color: #fff !important;
  padding: 12px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
}

/* Mobile Sticky Bottom Nav */
.mobile-bottom-nav{
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(253, 252, 249, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(197, 155, 39, 0.25);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  z-index: 999;
  height: 60px;
  justify-content: space-around;
  align-items: center;
  padding: 0 8px;
}

.mobile-bottom-nav-item{
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: var(--transition-fast);
  flex: 1;
}

.mobile-bottom-nav-item i{
  font-size: 1.15rem;
}

.mobile-bottom-nav-item.active, .mobile-bottom-nav-item:hover{
  color: #8c6716;
}



/* Hero Section */
.hero-section{
  display: flex;
  align-items: center;
  min-height: auto;
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 2.5vw, 34px) 0;
  background: 
    radial-gradient(ellipse 60% 50% at 75% 50%, rgba(197, 155, 39, 0.09) 0%, transparent 70%),
    linear-gradient(to right, rgba(253, 252, 249, 0.97) 25%, rgba(253, 252, 249, 0.82) 65%, rgba(249, 246, 238, 0.55) 100%),
    image-set(url("assets/studio_poster.avif") type("image/avif"),url("assets/studio_poster.webp") type("image/webp"),url("assets/studio_poster.jpg")) no-repeat center center;
  background-size: cover;
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  width: 100%;
  max-width: var(--dp-container-wide);
  margin: 0 auto;
}

.hero-content{
  z-index: 2;
  max-width: 580px;
}

.hero-tag{
  font-size: clamp(0.72rem, 0.95vw, 0.80rem);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #8c6716;
  background: rgba(197, 155, 39, 0.10);
  border: 1px solid rgba(197, 155, 39, 0.28);
  padding: 5px 16px;
  border-radius: var(--dp-radius-pill);
  margin-bottom: var(--dp-space-md);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-title{
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 3.8vw, 3.4rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin-bottom: var(--dp-space-md);
  color: #1a120b;
}

.hero-title span, .glow-text{
  display: inline-block;
  background: linear-gradient(135deg, #a0781a 0%, #c59b27 45%, #e5c365 70%, #8c6716 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(140, 103, 22, 0.20));
}

.hero-desc{
  font-size: clamp(0.95rem, 1.08vw, 1.06rem);
  color: #4a3e35;
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  max-width: 520px;
}

/* --- BUTTON FOUNDATION --- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dp-space-xs);
  padding: 12px 22px;
  min-height: 44px;
  font-family: var(--dp-font-body);
  font-size: var(--dp-type-button);
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  border-radius: var(--dp-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dp-transition-fast), box-shadow var(--dp-transition-fast), background var(--dp-transition-fast), border-color var(--dp-transition-fast), color var(--dp-transition-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.btn:active{
  transform: translateY(0) !important;
}

.btn:focus-visible{
  outline: none;
  box-shadow: var(--dp-shadow-focus);
}

.btn-group{
  display: flex;
  gap: var(--dp-space-md);
  flex-wrap: wrap;
  align-items: center;
}

.btn-primary{
  background: var(--dp-color-accent);
  color: #ffffff;
  border: 1px solid var(--dp-color-accent);
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--dp-radius-sm);
  font-size: var(--dp-type-button);
  letter-spacing: var(--dp-tracking-normal);
  cursor: pointer;
  box-shadow: var(--dp-shadow-sm);
  transition: transform var(--dp-transition-fast), box-shadow var(--dp-transition-fast), background var(--dp-transition-fast), border-color var(--dp-transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dp-space-xs);
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: var(--dp-shadow-md);
  background: var(--dp-color-accent-strong);
  border-color: var(--dp-color-accent-strong);
  color: #ffffff;
}

.btn-secondary{
  background: rgba(255, 255, 255, 0.72);
  color: var(--dp-color-ink);
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--dp-radius-sm);
  border: 1px solid var(--dp-color-border-strong);
  font-size: var(--dp-type-button);
  letter-spacing: var(--dp-tracking-normal);
  cursor: pointer;
  transition: transform var(--dp-transition-fast), box-shadow var(--dp-transition-fast), background var(--dp-transition-fast), border-color var(--dp-transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dp-space-xs);
  min-height: 44px;
  box-shadow: var(--dp-shadow-xs);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.btn-secondary:hover{
  background: var(--dp-color-surface-warm);
  border-color: var(--dp-color-accent);
  color: var(--dp-color-ink);
  transform: translateY(-2px);
  box-shadow: var(--dp-shadow-sm);
}





.hero-visual{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.hero-image-wrapper{
  width: 100%;
  max-width: clamp(320px, 27vw, 400px);
  aspect-ratio: 1;
  border-radius: 20px;
  padding: 8px;
  background: linear-gradient(145deg, #ffffff 0%, #faf5ea 100%);
  border: 1.5px solid rgba(197, 155, 39, 0.35);
  box-shadow: 0 16px 42px rgba(90, 70, 45, 0.11), 0 4px 14px rgba(197, 155, 39, 0.12);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.hero-image-wrapper::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(197, 155, 39, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hero-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  filter: brightness(0.96) contrast(1.06);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  display: block;
}

.hero-image-wrapper:hover .hero-image{
  transform: scale(1.03);
}

.floating-card{
  position: absolute;
  bottom: 24px;
  left: -14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(197, 155, 39, 0.42);
  border-radius: 14px;
  padding: 10px 18px;
  box-shadow: 0 10px 28px rgba(70, 52, 30, 0.14);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: float 4s ease-in-out infinite;
  z-index: 3;
}

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

.floating-icon{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(197, 155, 39, 0.18), rgba(197, 155, 39, 0.08));
  border: 1px solid rgba(197, 155, 39, 0.35);
  color: #8c6716;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.floating-text h4{
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a120b;
  margin: 0 0 2px 0;
  line-height: 1.2;
}

.floating-text p{
  font-size: 0.74rem;
  color: #7a6348;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.02em;
}

/* Category Grid & Showcase Home */
.home-section{
  padding-block: var(--dp-section-y-compact);
}

.section-header{
  text-align: center;
  margin-bottom: var(--dp-space-md);
}

.section-tag{
  font-size: var(--dp-type-label);
  color: #8c6716;
  background: rgba(197, 155, 39, 0.12);
  border: 1px solid rgba(197, 155, 39, 0.3);
  padding: 5px 12px;
  border-radius: var(--dp-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: var(--dp-space-xs);
  display: inline-block;
}

.section-title{
  font-family: var(--font-heading);
  font-size: var(--dp-type-section);
  font-weight: 700;
  color: #1a120b;
  line-height: 1.16;
}

.section-description{
  max-width: var(--dp-container-readable);
  margin-left: auto;
  margin-right: auto;
  color: var(--dp-color-muted);
  font-size: var(--dp-type-body);
  line-height: 1.6;
}

.showcase-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--dp-space-lg);
  margin-bottom: var(--dp-space-xl);
}

/* Category / Showcase Card */
.category-card{
  background: #1a140e;
  border: 1px solid rgba(197, 155, 39, 0.35);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  position: relative;
  transition: var(--transition-smooth);
  cursor: pointer;
  height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  box-shadow: var(--dp-shadow-sm);
}

.category-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 5, 0.95) 0%, rgba(10, 8, 5, 0.65) 50%, rgba(10, 8, 5, 0.2) 100%);
  z-index: 1;
}

.category-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
  z-index: 0;
}

.category-card:hover .category-bg{
  transform: scale(1.08);
}

.category-card:hover{
  border-color: var(--accent-gold);
  box-shadow: var(--dp-shadow-md);
}

.category-info{
  position: relative;
  z-index: 2;
}

.category-name{
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff !important;
  margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

.category-desc{
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 0.9rem;
  margin-bottom: 16px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
  font-weight: 500;
}

.category-link{
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #f7d57f;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-fast);
}

.category-card:hover .category-link{
  color: #ffffff;
  transform: translateX(4px);
}

/* Creative Process Timeline & Atelier Craftsmanship */
.process-showcase{
  background: var(--glass-bg);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--glass-border);
  padding: var(--dp-space-xl);
  margin-top: var(--dp-section-y-compact);
  margin-bottom: var(--dp-section-y-compact);
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: 100%;
  max-width: var(--dp-container-wide);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.process-showcase::before{
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(circle, rgba(197, 155, 39, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.process-showcase .section-tag{
  color: var(--accent-gold) !important;
  font-weight: 700;
  letter-spacing: 2px;
}

.process-showcase .section-title{
  color: var(--text-primary) !important;
  font-family: var(--font-heading);
  font-size: 2.3rem;
  font-weight: 700;
  margin-top: 6px;
  margin-bottom: 12px;
}

.process-showcase .section-description{
  color: var(--text-secondary) !important;
  font-size: 0.96rem;
  line-height: 1.6;
}

.process-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
}

.process-step-card{
  background: #ffffff;
  border: 1px solid rgba(197, 155, 39, 0.22);
  border-radius: var(--dp-radius-md);
  padding: clamp(14px, 1.3vw, 18px);
  text-align: left;
  transition: transform var(--dp-transition-fast), border-color var(--dp-transition-fast), box-shadow var(--dp-transition-fast);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px rgba(110, 93, 71, 0.05);
  box-sizing: border-box;
  min-height: 0;
  height: 100%;
}

.process-step-card:hover{
  transform: translateY(-3px);
  border-color: rgba(197, 155, 39, 0.45);
  box-shadow: 0 8px 22px rgba(110, 93, 71, 0.10);
}

.process-step-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.process-step-badge{
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: 0.5px;
  line-height: 1;
}

.process-step-icon{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(197, 155, 39, 0.10);
  border: 1px solid rgba(197, 155, 39, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-gold);
  font-size: 0.95rem;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.process-step-card:hover .process-step-icon{
  transform: scale(1.08);
  background: var(--accent-gold);
  color: #ffffff;
}

.process-step-card .step-title{
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  color: #1a120b !important;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
  line-height: 1.25;
}

.process-step-card .step-desc{
  color: #5c4e3e !important;
  font-size: 0.83rem;
  line-height: 1.48;
  margin: 0;
}

/* Shop Controls & Full-Width Catalog Layout */
.shop-layout{
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(18px, 2.5vw, 32px);
  width: 100%;
  max-width: var(--dp-container-wide);
  margin: var(--dp-space-xs) auto var(--dp-space-lg) auto;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  padding: clamp(16px, 2.2vw, 26px);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  box-sizing: border-box;
}

/* Sidebar Filter */
.filter-sidebar{
  background: #ffffff;
  border: 1px solid rgba(197, 155, 39, 0.22);
  border-radius: var(--border-radius-md);
  padding: var(--dp-space-lg);
  height: fit-content;
  position: sticky;
  top: 100px;
  box-shadow: var(--dp-shadow-xs);
}

.filter-title{
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-heading);
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(197, 155, 39, 0.15);
  padding-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-group{
  margin-bottom: 24px;
}

.filter-group-title{
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-primary);
  margin-bottom: 12px;
  font-weight: 700;
}

.search-input-wrapper{
  position: relative;
}

.search-input{
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(197, 155, 39, 0.28);
  border-radius: var(--border-radius-sm);
  padding: 10px 14px;
  padding-right: 36px;
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.search-input:focus{
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.15);
}

.search-icon{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.category-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.category-item label{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.category-item label:hover{
  color: var(--accent-gold);
}

.category-item input[type="checkbox"]{
  accent-color: var(--accent-gold);
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.category-select-all-item{
  background: rgba(197, 155, 39, 0.06);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px dashed rgba(197, 155, 39, 0.35);
  margin-bottom: 8px;
  transition: var(--transition-fast);
}

.category-select-all-item:hover{
  background: rgba(197, 155, 39, 0.12);
  border-color: var(--accent-gold);
}

.category-select-all-item label{
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.category-select-all-badge{
  font-size: 0.72rem;
  background: rgba(197, 155, 39, 0.18);
  color: #8c6716;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid rgba(197, 155, 39, 0.3);
}

.price-slider-wrapper{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-range-input{
  width: 100%;
  accent-color: var(--accent-gold);
  cursor: pointer;
}

.price-values{
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.clear-btn{
  background: none;
  border: none;
  color: var(--accent-gold);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: underline;
}

.clear-btn:hover{
  color: var(--accent-gold-hover);
}

/* Mobile Filter Collapsible Trigger Baseline */
.filter-mobile-toggle{
  display: none;
}
.filter-mobile-close-wrap{
  display: none;
}
.filter-sidebar-content{
  display: block;
}

/* Shop Products Grid */
.products-wrapper{
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-lg);
}

.shop-toolbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(197, 155, 39, 0.22);
  border-radius: var(--border-radius-sm);
  padding: var(--dp-space-sm) var(--dp-space-md);
  box-shadow: var(--dp-shadow-xs);
}

.results-count{
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 600;
}

.sort-select{
  background: #ffffff;
  border: 1px solid rgba(197, 155, 39, 0.28);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: var(--border-radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.sort-select:focus{
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.15);
}

.products-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

/* Product Card (Gallery Atelier Presentation) */
.product-card{
  background: #ffffff;
  border: 1px solid rgba(197, 155, 39, 0.22);
  border-radius: var(--dp-radius-md);
  overflow: hidden;
  transition: transform var(--dp-transition-fast), border-color var(--dp-transition-fast), box-shadow var(--dp-transition-fast);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 16px rgba(110, 93, 71, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  height: 100%;
}

.product-card:hover{
  transform: translateY(-3px);
  border-color: rgba(197, 155, 39, 0.45);
  box-shadow: 0 12px 28px rgba(110, 93, 71, 0.12), 0 2px 8px rgba(197, 155, 39, 0.15);
}

.product-image-container{
  aspect-ratio: 1 / 1;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fbf9f5 0%, #f4eee1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image-container > a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.product-image{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  padding: 0;
  box-sizing: border-box;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.product-card:hover .product-image{
  transform: scale(1.04);
}

.product-badge-group{
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 4;
  pointer-events: none;
  max-width: calc(100% - 50px);
}



.product-seasonal-badge{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #cda735 0%, #a1781b 100%);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(197, 155, 39, 0.35);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sale-badge{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #b8332a 0%, #8e231c 100%);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(184, 51, 42, 0.35);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-badge{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.60rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-badge.sold{
  background: rgba(30, 24, 18, 0.88);
  color: #d1c7bd;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stock-badge.preorder{
  background: rgba(142, 35, 28, 0.92);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 6px rgba(142, 35, 28, 0.35);
}

.stock-badge.low, .stock-badge.low-fomo{
  background: rgba(194, 94, 26, 0.92);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 6px rgba(194, 94, 26, 0.35);
}

.product-details-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 14, 10, 0.65) 0%, rgba(18, 14, 10, 0.15) 50%, transparent 100%);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12px;
  gap: 8px;
  z-index: 4;
}

.product-card:hover .product-details-overlay{
  opacity: 1;
  pointer-events: auto;
}

.view-details-btn{
  background: rgba(255, 255, 255, 0.95);
  color: #1a120b;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 16px;
  border-radius: var(--dp-radius-pill);
  border: 1px solid rgba(197, 155, 39, 0.35);
  cursor: pointer;
  transform: translateY(6px);
  transition: transform var(--transition-smooth), background var(--transition-fast), color var(--transition-fast);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.product-card:hover .view-details-btn{
  transform: translateY(0);
}

.view-details-btn:hover{
  background: var(--accent-gold);
  color: #ffffff;
  border-color: var(--accent-gold);
}

.card-room-preview-btn{
  background: rgba(255, 255, 255, 0.95);
  color: #8c6716;
  border: 1px solid rgba(197, 155, 39, 0.4);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transform: translateY(6px);
  transition: transform var(--transition-smooth), background var(--transition-fast), color var(--transition-fast);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.product-card:hover .card-room-preview-btn{
  transform: translateY(0);
}

.card-room-preview-btn:hover{
  background: var(--accent-gold);
  color: #ffffff;
  border-color: var(--accent-gold);
}

.product-info-panel{
  padding: clamp(10px, 1.2vw, 14px);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-category{
  font-size: 0.70rem;
  color: #8c6716;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
  line-height: 1.2;
}

.product-title{
  font-family: var(--font-heading);
  font-size: clamp(0.88rem, 1.05vw, 0.98rem);
  font-weight: 600;
  color: #1a120b;
  line-height: 1.28;
  margin: 0 0 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.5em;
}

.product-footer-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(197, 155, 39, 0.14);
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.product-price-block{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 auto;
}

.product-price{
  font-family: var(--font-body);
  font-size: clamp(0.96rem, 1.15vw, 1.12rem);
  font-weight: 700;
  color: #1a120b;
  line-height: 1.15;
}

.product-price-sub{
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 0.72rem;
  flex-wrap: wrap;
}

.original-price-slashed{
  text-decoration: line-through;
  color: #4b443c;
  font-size: 0.72rem;
  font-weight: 600;
}

.discount-badge{
  color: #0d4621;
  font-size: 0.66rem;
  font-weight: 700;
  background: #e6f4ea;
  border: 1px solid #a3d9b8;
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

.product-card-cart-action{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.add-cart-mini{
  background: linear-gradient(135deg, #d4af37 0%, #a87d18 100%) !important;
  color: #ffffff !important;
  border: none !important;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(197, 155, 39, 0.28) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  flex-shrink: 0;
}

.add-cart-mini:hover{
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(197, 155, 39, 0.40) !important;
}

.mini-qty-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  background: #1a120b;
  color: #ffffff;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1.5px solid #ffffff;
}

/* Interactive Card Quantity Stepper (Minus - Count - Plus) */
.card-qty-stepper{
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid var(--accent-gold);
  border-radius: 18px;
  padding: 2px 4px;
  box-shadow: 0 2px 8px rgba(197, 155, 39, 0.2);
  gap: 3px;
  height: 32px;
  box-sizing: border-box;
  flex-shrink: 0;
  animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  from{ transform: scale(0.85); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}

.card-qty-btn{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(197, 155, 39, 0.12);
  border: none;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  cursor: pointer;
  transition: var(--transition-fast);
  font-weight: 700;
  flex-shrink: 0;
  padding: 0;
}

.card-qty-btn:hover{
  background: var(--accent-gold);
  color: #ffffff;
  transform: scale(1.1);
}

.card-qty-btn.card-qty-minus:hover{
  background: #d32f2f;
  color: #ffffff;
}

.card-qty-val{
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 16px;
  text-align: center;
  padding: 0 2px;
}

/* Product Detail Modal Quantity Stepper */
.modal-qty-stepper-box{
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid var(--accent-gold);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.modal-qty-step-btn{
  width: 40px;
  height: 40px;
  background: rgba(197, 155, 39, 0.12);
  border: none;
  color: var(--text-primary);
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  font-weight: 700;
}

.modal-qty-step-btn:hover{
  background: var(--accent-gold);
  color: #ffffff;
}

.modal-qty-number-input{
  width: 60px;
  height: 40px;
  text-align: center;
  border: none;
  border-left: 1px solid rgba(197, 155, 39, 0.25);
  border-right: 1px solid rgba(197, 155, 39, 0.25);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  outline: none;
  background: #ffffff;
  -moz-appearance: textfield;
}

.modal-qty-number-input::-webkit-outer-spin-button, .modal-qty-number-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Cart Slide Drawer */
.cart-drawer{
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 440px;
  height: 100vh;
  height: 100dvh;
  background: #fbfaf7 !important;
  border-left: 1px solid rgba(24, 23, 21, 0.12) !important;
  box-shadow: none;
  visibility: hidden;
  pointer-events: none;
  z-index: 2000;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, visibility 0.35s ease;
  display: flex;
  flex-direction: column;
}

.cart-drawer.open{
  right: 0;
  transform: translate3d(0, 0, 0);
  box-shadow: -12px 0 45px rgba(24, 23, 21, 0.18) !important;
  visibility: visible;
  pointer-events: auto;
}

.cart-header{
  padding: 20px 24px !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(24, 23, 21, 0.09) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 10;
}

.cart-title, h3.cart-title{
  font-family: var(--font-heading, "Cinzel", Georgia, serif) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #181715 !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-title i{
  color: #b98b22 !important;
  font-size: 1.1rem;
}

.close-drawer-btn{
  background: #f7f5f0 !important;
  border: 1px solid rgba(24, 23, 21, 0.10) !important;
  color: #292724 !important;
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
  line-height: 1;
  padding: 0;
}

.close-drawer-btn:hover{
  background: #181715 !important;
  color: #ffffff !important;
  border-color: #181715 !important;
  transform: scale(1.06);
}

.cart-items-container{
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #f7f5f0 !important;
}

.cart-items-container::-webkit-scrollbar{
  width: 6px;
}
.cart-items-container::-webkit-scrollbar-track{
  background: #f7f5f0;
}
.cart-items-container::-webkit-scrollbar-thumb{
  background: rgba(24, 23, 21, 0.18);
  border-radius: 3px;
}
.cart-items-container::-webkit-scrollbar-thumb:hover{
  background: rgba(24, 23, 21, 0.32);
}

.cart-empty-state{
  text-align: center;
  color: #77736c !important;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
}

.cart-empty-icon{
  font-size: 3rem !important;
  color: #b98b22 !important;
  opacity: 0.85;
  filter: none !important;
  margin-bottom: 4px;
}

.cart-empty-state h4{
  color: #181715 !important;
  font-size: 1.18rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  font-family: var(--font-heading, "Cinzel", Georgia, serif) !important;
}

.cart-empty-state p{
  color: #77736c !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  max-width: 280px !important;
  margin: 0 !important;
}

.cart-empty-state .btn-secondary, .cart-empty-state .browse-shop-btn{
  background: #181715 !important;
  color: #ffffff !important;
  border: 1px solid #181715 !important;
  padding: 10px 24px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(24, 23, 21, 0.12) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.cart-empty-state .btn-secondary:hover, .cart-empty-state .browse-shop-btn:hover{
  background: #1f4b52 !important;
  border-color: #1f4b52 !important;
  transform: translateY(-2px) !important;
}

.cart-item{
  display: flex;
  gap: 14px;
  align-items: center;
  background: #ffffff !important;
  border: 1px solid rgba(24, 23, 21, 0.10) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  position: relative;
  box-shadow: 0 2px 10px rgba(24, 23, 21, 0.04) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cart-item:hover{
  border-color: rgba(185, 139, 34, 0.35) !important;
  box-shadow: 0 6px 18px rgba(24, 23, 21, 0.07) !important;
}

.cart-item-img{
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px !important;
  background: #eeeae0;
  border: 1px solid rgba(24, 23, 21, 0.08) !important;
  flex-shrink: 0;
}

.cart-item-details{
  flex-grow: 1;
  min-width: 0;
  padding-right: 24px;
}

.cart-item-title, h4.cart-item-title{
  font-family: var(--font-heading, "Cinzel", Georgia, serif) !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  margin: 0 0 3px 0 !important;
  color: #181715 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  letter-spacing: 0.02em;
  line-height: 1.35 !important;
}

.cart-item-option, .cart-item-details p{
  font-size: 0.78rem !important;
  color: #77736c !important;
  margin: 0 0 4px 0 !important;
  font-weight: 500;
}

.cart-item-pers-note{
  font-size: 0.73rem !important;
  color: #1f4b52 !important;
  background: rgba(31, 75, 82, 0.07);
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.cart-item-price{
  font-size: 0.98rem !important;
  color: #181715 !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  font-family: var(--font-body, "Plus Jakarta Sans", sans-serif);
}

.cart-item-badge{
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin: 0 0 8px 0 !important;
  padding: 2px 7px;
  border-radius: 4px;
}
.cart-badge-preorder{
  color: #8a4c3d !important;
  background: rgba(138, 76, 61, 0.09) !important;
}
.cart-badge-lowstock{
  color: #b9770e !important;
  background: rgba(185, 119, 14, 0.09) !important;
}
.cart-badge-outofstock{
  color: #c0392b !important;
  background: rgba(192, 57, 43, 0.09) !important;
}

.quantity-controls{
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid rgba(24, 23, 21, 0.16) !important;
  border-radius: 7px !important;
  width: fit-content !important;
  background: #f7f5f0 !important;
  overflow: hidden !important;
}

.qty-btn{
  background: #f7f5f0 !important;
  border: none !important;
  color: #292724 !important;
  width: 26px !important;
  height: 26px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.78rem !important;
  transition: all 0.15s ease !important;
  padding: 0;
}

.qty-btn:hover{
  background: #181715 !important;
  color: #ffffff !important;
}

.qty-btn.qty-minus-btn:hover i.fa-trash-can{
  color: #ff4d4f !important;
}

.qty-val{
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  padding: 0 8px !important;
  color: #181715 !important;
  min-width: 24px !important;
  text-align: center !important;
  user-select: none;
}

.remove-item-btn{
  background: transparent !important;
  border: none !important;
  color: #9e978d !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease !important;
  padding: 6px !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  line-height: 1;
}

.remove-item-btn:hover{
  color: #dc3545 !important;
  background: rgba(220, 53, 69, 0.08) !important;
  transform: scale(1.08);
}

.cart-footer{
  padding: 18px 22px 22px 22px !important;
  border-top: 1px solid rgba(24, 23, 21, 0.09) !important;
  background: #ffffff !important;
  box-shadow: 0 -4px 18px rgba(24, 23, 21, 0.04) !important;
}

.cart-coupon-box {
  background: #fbfaf7 !important;
  border: 1px dashed rgba(24, 23, 21, 0.22) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
  box-sizing: border-box !important;
}

.cart-coupon-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #635f58 !important;
  margin-bottom: 8px !important;
}

.cart-coupon-label i {
  color: #bfa15f !important;
  margin-right: 4px !important;
}

.cart-coupon-badge {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #1f4b52 !important;
  background: rgba(31, 75, 82, 0.08) !important;
  border: 1px solid rgba(31, 75, 82, 0.2) !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.15s ease !important;
}

.cart-coupon-badge:hover {
  background: #1f4b52 !important;
  color: #ffffff !important;
  border-color: #1f4b52 !important;
}

.cart-coupon-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.cart-coupon-box input.form-control,
.cart-coupon-box .cart-coupon-input,
.cart-coupon-input,
#cart-coupon-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 12px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(24, 23, 21, 0.22) !important;
  border-radius: 6px !important;
  color: #181715 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.cart-coupon-box input.form-control:focus,
.cart-coupon-box .cart-coupon-input:focus,
.cart-coupon-input:focus,
#cart-coupon-input:focus {
  border-color: #1f4b52 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(31, 75, 82, 0.15) !important;
  background: #ffffff !important;
}

.cart-coupon-box input.form-control::placeholder,
.cart-coupon-box .cart-coupon-input::placeholder,
.cart-coupon-input::placeholder,
#cart-coupon-input::placeholder {
  color: #a39e95 !important;
  font-weight: 400 !important;
  font-size: 0.82rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.cart-coupon-box .cart-coupon-apply-btn,
.cart-coupon-apply-btn,
#apply-coupon-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 82px !important;
  max-width: 95px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #181715 !important;
  color: #ffffff !important;
  border: 1px solid #181715 !important;
  border-radius: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.cart-coupon-box .cart-coupon-apply-btn:hover,
.cart-coupon-apply-btn:hover,
#apply-coupon-btn:hover {
  background: #1f4b52 !important;
  border-color: #1f4b52 !important;
  color: #ffffff !important;
}

.cart-coupon-box .cart-coupon-apply-btn:active,
.cart-coupon-apply-btn:active,
#apply-coupon-btn:active {
  transform: scale(0.98);
}

.cart-coupon-msg,
#cart-coupon-msg {
  font-size: 0.78rem !important;
  margin-top: 6px !important;
  font-weight: 600 !important;
  display: none;
}

@media (max-width: 991px) {
  .cart-coupon-box .cart-coupon-apply-btn,
  .cart-coupon-box #apply-coupon-btn,
  .cart-coupon-apply-btn,
  #apply-coupon-btn {
    width: auto !important;
    min-width: 82px !important;
    max-width: 95px !important;
    min-height: 42px !important;
  }
}

.cart-summary-row{
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  font-size: 0.88rem !important;
  color: #77736c !important;
  font-weight: 500 !important;
}

.cart-summary-row span:last-child{
  font-weight: 600 !important;
  color: #292724 !important;
}

.cart-summary-row.total{
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  color: #181715 !important;
  border-top: 1px solid rgba(24, 23, 21, 0.09) !important;
  padding-top: 12px !important;
  margin-top: 8px !important;
  margin-bottom: 16px !important;
}

.cart-summary-row.total .total-amount{
  color: #181715 !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
}

.checkout-btn, #checkout-start-btn{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: #181715 !important;
  color: #ffffff !important;
  border: 1px solid #181715 !important;
  border-radius: 8px !important;
  padding: 13px 20px !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 4px 16px rgba(24, 23, 21, 0.12) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.checkout-btn:hover, #checkout-start-btn:hover{
  background: #1f4b52 !important;
  border-color: #1f4b52 !important;
  box-shadow: 0 6px 20px rgba(31, 75, 82, 0.22) !important;
  transform: translateY(-1px);
}

.checkout-btn:disabled, #checkout-start-btn:disabled{
  background: #d4cfc7 !important;
  border-color: #d4cfc7 !important;
  color: #8c857b !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.cart-drawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(24, 23, 21, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1999;
  display: none;
  transition: opacity 0.3s ease;
}

.cart-drawer-overlay.open{
  display: block;
}

/* Custom Alert Notification Toast */
.toast-container{
  position: fixed;
  top: 120px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 99999999 !important;
  pointer-events: none;
}

.toast{
  background: rgba(46, 37, 24, 0.98); /* Warm dark charcoal-bronze matching theme accents */
  color: #fdfcf9 !important; /* Force high contrast warm white text */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-left: 4px solid var(--accent-gold);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-sm);
  padding: 13px 18px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 420px;
  transform: translateX(120%);
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s ease;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
}

.toast:hover{
  opacity: 0.96;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

.toast.show{
  transform: translateX(0);
}

.toast.success{
  border-left-color: #4caf50;
}

.toast.error{
  border-left-color: #f44336;
}

.toast.info{
  border-left-color: var(--accent-teal);
}

.toast-icon{
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-text{
  color: #fdfcf9 !important; /* Ensure the text stays readable */
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
  flex: 1;
}

.toast-close{
  background: transparent;
  border: none;
  color: rgba(253, 252, 249, 0.65);
  cursor: pointer;
  padding: 4px 6px;
  margin-left: 6px;
  font-size: 0.95rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.toast-close:hover{
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.12);
}

/* Mobile Toast Notification Placement */
@media (max-width: 768px) {
  .toast-container {
    top: 92px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    align-items: center !important;
    pointer-events: none !important;
    z-index: 99999999 !important;
  }
  .toast {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 420px !important;
    padding: 12px 16px !important;
    font-size: 0.84rem !important;
    transform: translateY(-120%) !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }
  .toast.show {
    transform: translateY(0) !important;
  }
}

/* Autonomous SEO Engine Ping Buttons (Mobile Touch Target & Reliability) */
.admin-seo-ping-btn {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: pointer !important;
  min-height: 38px !important;
}

@media (max-width: 768px) {
  .admin-seo-ping-btn {
    width: auto !important;
    max-width: 100% !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 0.82rem !important;
  }
  #btn-ping-indexnow.admin-seo-ping-btn {
    width: 100% !important;
    min-height: 46px !important;
  }
}

/* Modals General */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(4, 9, 11, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 20px;
}

.modal-overlay.open{
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.modal-card{
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--glass-shadow);
  width: 100%;
  max-width: 800px;
  position: relative;
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.modal-overlay.open .modal-card{
  transform: scale(1);
}

.close-modal-btn{
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  z-index: 10;
}

.close-modal-btn:hover{
  background: var(--accent-gold);
  color: var(--bg-primary);
  border-color: var(--accent-gold);
}

/* Product Detail Modal specific */
.detail-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.detail-image-wrapper{
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.detail-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
}

.detail-info{
  padding: 40px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.detail-category{
  color: var(--accent-gold);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-weight: 600;
}

.detail-title{
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.2;
}

.detail-price{
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 24px;
}

.detail-desc{
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 24px;
}

.security-badge{
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(212, 175, 55, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--border-radius-sm);
  padding: 10px 16px;
  font-size: 0.8rem;
  color: var(--accent-gold);
  margin-top: 20px;
}

.security-badge-icon{
  font-size: 1rem;
}

/* Admin Gate screen */
.admin-gate-wrapper{
  max-width: 400px;
  margin: 80px auto;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  padding: 40px;
  box-shadow: var(--glass-shadow);
  text-align: center;
}

.admin-gate-icon{
  font-size: 3rem;
  color: var(--accent-gold);
  margin-bottom: 20px;
}

.admin-gate-title{
  font-family: var(--font-heading);
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.admin-gate-desc{
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 30px;
}

/* Forms General */
.form-group{
  margin-bottom: 20px;
  text-align: left;
}

.form-label{
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.form-control{
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

select.form-control {
  min-height: 42px;
  padding: 6px 14px;
  line-height: 1.5;
  box-sizing: border-box;
  vertical-align: middle;
}

select.form-control option{
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.form-control:focus{
  outline: none;
  border-color: var(--accent-gold);
  background: rgba(255, 255, 255, 0.04);
}

.form-control::placeholder{
  color: var(--text-muted);
}

/* Admin Standalone Topbar (Sticky Header) */
.admin-standalone-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 24px !important;
  background: rgba(253, 252, 249, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(197, 155, 39, 0.22) !important;
  box-shadow: 0 4px 18px rgba(110, 93, 71, 0.07) !important;
  transition: all 0.25s ease !important;
}

.admin-standalone-brand {
  font-family: var(--font-heading, Cinzel, serif) !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  color: #1a120b !important;
}

.admin-standalone-back {
  color: #6e5d47 !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: color 0.2s ease !important;
}

.admin-standalone-back:hover {
  color: var(--accent-gold) !important;
}

.admin-standalone-signout-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(220, 38, 38, 0.45) !important;
  color: #dc2626 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.08) !important;
  transition: all 0.2s ease !important;
}

.admin-standalone-signout-btn:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* Admin Dashboard View */
.admin-dashboard{
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 80px;
}

.admin-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-title-group h2{
  font-family: var(--font-heading);
  font-size: 2.2rem;
}

.admin-title-group p{
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* Admin Stats Cards */
.admin-stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.stat-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-icon{
  font-size: 1.2rem;
  color: var(--accent-gold);
}

.stat-val{
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-trend{
  font-size: 0.8rem;
  color: #4caf50;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-trend.down{
  color: #f44336;
}

/* Product Catalog Admin Control */
.admin-controls-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.search-admin{
  max-width: 300px;
}

/* Admin Products Table */
.table-wrapper{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  overflow-x: auto;
  box-shadow: var(--glass-shadow);
}

.admin-table{
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.admin-table th, .admin-table td{
  padding: 10px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  color: var(--text-primary);
}

.admin-table th{
  background: var(--bg-tertiary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-primary);
  font-weight: 700;
  border-bottom: 2px solid rgba(197, 155, 39, 0.25);
  white-space: nowrap;
}

.admin-table tbody tr:hover{
  background: rgba(212, 175, 55, 0.04);
}

/* Specific Inventory Table Optimization (Prevents Horizontal Overflow & Clipped Columns) */
.admin-inventory-table {
  table-layout: auto;
}

.admin-inventory-table th,
.admin-inventory-table td {
  padding: 8px 6px !important;
}

.admin-inventory-table th:first-child,
.admin-inventory-table td.admin-td-select {
  width: 38px !important;
  min-width: 36px !important;
  max-width: 40px !important;
  padding: 8px 2px !important;
  text-align: center !important;
}

.admin-inventory-table th:nth-child(2),
.admin-inventory-table td.admin-td-image {
  width: 58px !important;
  min-width: 54px !important;
  max-width: 62px !important;
  padding: 8px 4px !important;
  text-align: center !important;
}

.admin-inventory-table .admin-table-img {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
}

.admin-inventory-table td.admin-td-info {
  min-width: 120px;
}

.admin-inventory-table .admin-table-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.admin-inventory-table .admin-table-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-inventory-table td.admin-td-cat {
  white-space: nowrap;
  font-size: 0.8rem;
}

.admin-inventory-table td.admin-td-price {
  white-space: nowrap;
}

.admin-inventory-table td.admin-td-stock {
  min-width: 200px;
}

.admin-inventory-table .stock-inline-control {
  padding: 2px 6px !important;
  gap: 3px !important;
}

.admin-inventory-table .stock-qty-step-btn {
  width: 24px !important;
  height: 24px !important;
  font-size: 0.85rem !important;
}

.admin-inventory-table .stock-qty-num-input {
  width: 58px !important;
  min-width: 58px !important;
  height: 26px !important;
  font-size: 0.90rem !important;
  font-weight: 800 !important;
  padding: 0 4px !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  box-sizing: border-box !important;
}

.admin-inventory-table .admin-save-single-stock-btn {
  padding: 4px 8px !important;
  font-size: 0.72rem !important;
}

.admin-inventory-table .btn-restock-pill {
  padding: 2px 6px !important;
  font-size: 0.72rem !important;
}

@media (min-width: 769px) {
  .admin-inventory-table th:last-child,
  .admin-inventory-table td.admin-td-actions {
    width: 78px !important;
    min-width: 74px !important;
    max-width: 86px !important;
    text-align: center !important;
    padding: 8px 4px !important;
  }

  .admin-inventory-table .desktop-action-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .admin-inventory-table .desktop-action-btns .btn-icon-sm {
    width: 30px;
    height: 30px;
  }
}





.action-btns{
  display: flex;
  gap: 12px;
}

.btn-icon-sm{
  background: none;
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-icon-sm:hover{
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

.btn-icon-sm.delete:hover{
  border-color: #ff5252;
  color: #ff5252;
}

/* Inventory Table Desktop Helpers & Mobile Switchers */
.mobile-auth-topbar{
  display: none;
}

.admin-mobile-field-label{
  display: none;
}

.admin-mobile-card-actions{
  display: none;
}

.desktop-action-btns{
  display: flex;
  gap: 12px;
}

.admin-save-stock-label{
  display: none;
}

.admin-price-wrapper{
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-price-current{
  font-weight: 600;
  color: var(--accent-gold);
}

.admin-price-slashed{
  text-decoration: line-through;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.admin-cat-pill{
  color: var(--text-secondary);
}

/* Image select preview box in product forms */
.image-selector-box{
  border: 2px dashed var(--glass-border);
  border-radius: var(--border-radius-sm);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.01);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.image-selector-box:hover{
  border-color: var(--accent-gold);
  background: rgba(255,255,255,0.02);
}

.image-selector-preview{
  width: 100%;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 8px;
  margin: 0 auto;
}

.image-selector-preview.show{
  display: block;
}

/* File input hidden style */
.hidden-file-input{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Checkout Modal Steps */
.checkout-modal-card{
  max-width: 600px;
}

.checkout-steps-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #1c140d 0%, #2e2114 100%);
  padding: 18px 30px;
  border-bottom: 2px solid var(--accent-gold);
}

.checkout-step-indicator{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  position: relative;
  transition: var(--transition-fast);
}

.checkout-step-indicator.active{
  color: #f7d57f;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(247, 213, 127, 0.4);
}

.checkout-step-indicator.completed{
  color: #4caf50;
}

.step-circle{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  transition: var(--transition-fast);
}

.checkout-step-indicator.active .step-circle{
  border-color: #f7d57f;
  background: linear-gradient(135deg, #c59b27 0%, #e5b83e 100%);
  color: #1a120b;
  box-shadow: 0 0 12px rgba(229, 184, 62, 0.6);
}

.checkout-step-indicator.completed .step-circle{
  border-color: #4caf50;
  background: #4caf50;
  color: #fff;
}

.checkout-body{
  padding: 30px;
  max-height: 60vh;
  overflow-y: auto;
}

.checkout-step-content{
  display: none;
}

.checkout-step-content.active{
  display: block;
}

.checkout-footer{
  padding: 20px 30px;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  justify-content: space-between;
  background: rgba(4, 9, 11, 0.2);
}

.flex-row-gap{
  display: flex;
  gap: 20px;
}

.flex-row-gap .form-group{
  flex: 1;
}

/* Payment integration helper styles */




.card-brand-icon{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1.2rem;
}

/* Order Success Screen */
.success-screen{
  text-align: center;
  padding: 40px 20px;
}

.success-icon-wrapper{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(76, 175, 80, 0.1);
  border: 2px solid #4caf50;
  color: #4caf50;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  margin: 0 auto 24px;
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.2);
  animation: scaleUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scaleUp {
  0%{ transform: scale(0.5); opacity: 0; }
  100%{ transform: scale(1); opacity: 1; }
}

.success-title{
  font-family: var(--font-heading);
  font-size: 2rem;
  margin-bottom: 12px;
}

.success-desc{
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 24px;
}

.order-receipt{
  background: var(--bg-primary);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  padding: 20px;
  max-width: 380px;
  margin: 0 auto 30px;
  text-align: left;
}

.receipt-row{
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 10px;
  color: var(--text-secondary);
}

.receipt-row.total{
  font-size: 1.1rem;
  font-weight: 700;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 10px;
  margin-top: 10px;
  color: var(--accent-gold);
}

/* ==========================================================================
   LUXURY ART GALLERY FOOTER & HIGH-CONTRAST NEWSLETTER
   Direction: Deep obsidian surface (#131210), warm gold hairline trim,
   crisp high-contrast VIP collector circle form that NEVER blends.
   ========================================================================== */
.footer{
  background: #131210 !important;
  border-top: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  padding: clamp(40px, 5.5vw, 68px) 0 clamp(24px, 3.5vw, 40px) !important;
  margin-top: auto;
  color: #ede8df;
  position: relative;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.9fr 1.35fr;
  gap: clamp(24px, 3vw, 42px);
  margin-bottom: clamp(28px, 4vw, 48px);
}

.footer-col h3{
  font-family: var(--font-heading, "Cinzel", Georgia, serif) !important;
  font-size: 1.35rem !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 12px !important;
}

.footer-col h4{
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #e5be58 !important;
  margin-bottom: 16px !important;
  font-weight: 700 !important;
}

.footer-col p{
  color: #b8b2a7 !important;
  font-size: 0.88rem !important;
  line-height: 1.62 !important;
  margin-bottom: 18px !important;
}

.footer-links{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.footer-links a{
  color: #c9c3b8 !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
  display: inline-block !important;
}

.footer-links a:hover{
  color: #ffd54f !important;
  transform: translateX(3px) !important;
}

/* Social icons in footer */
.footer-socials{
  display: flex;
  gap: 12px;
}

.footer-socials .icon-btn{
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.footer-socials .icon-btn:hover{
  background: #1f4b52 !important;
  border-color: #ffd54f !important;
  color: #ffd54f !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   COLLECTOR CIRCLE / NEWSLETTER SUBSCRIBE FORM (HIGH CONTRAST)
   ========================================================================== */
.footer-col-newsletter{
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(197, 155, 39, 0.28);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.newsletter-headline-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
  flex-wrap: wrap;
}

.newsletter-headline-wrap h4{
  margin-bottom: 0 !important;
}

.newsletter-incentive-pill{
  background: rgba(197, 155, 39, 0.18) !important;
  border: 1px solid rgba(197, 155, 39, 0.45) !important;
  color: #ffd54f !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  padding: 2px 9px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.newsletter-desc{
  color: #c4beb3 !important;
  font-size: 0.84rem !important;
  line-height: 1.55 !important;
  margin-bottom: 14px !important;
}

.newsletter-form{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

.newsletter-input-wrap{
  position: relative !important;
  width: 100% !important;
}

.newsletter-field-icon{
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #8c867b !important;
  font-size: 0.88rem !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.newsletter-input{
  width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(197, 155, 39, 0.5) !important;
  border-radius: 6px !important;
  padding: 11px 14px 11px 36px !important;
  color: #181715 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.newsletter-input::placeholder{
  color: #7a746b !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

.newsletter-input:focus{
  outline: none !important;
  border-color: #ffd54f !important;
  box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.35) !important;
  background: #ffffff !important;
  color: #181715 !important;
}

.newsletter-submit-btn{
  width: 100% !important;
  background: linear-gradient(135deg, #e5be58 0%, #b8860b 100%) !important;
  color: #120e07 !important;
  border: 1px solid #e5be58 !important;
  border-radius: 6px !important;
  padding: 11px 20px !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: 0 3px 12px rgba(197, 155, 39, 0.38) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.newsletter-submit-btn:hover{
  background: linear-gradient(135deg, #ffd978 0%, #c99312 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(197, 155, 39, 0.5) !important;
  color: #120e07 !important;
}

.newsletter-submit-btn:active{
  transform: translateY(0) !important;
}

.footer-bottom{
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 24px !important;
  font-size: 0.82rem !important;
  color: #8c867b !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.footer-bottom span,
.footer-bottom a{
  color: #a8a296 !important;
}

.footer-bottom a:hover{
  color: #ffd54f !important;
}

@media (max-width: 992px) {
  .footer-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 600px) {
  .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .newsletter-form{
    flex-direction: column !important;
  }
  .newsletter-submit-btn{
    width: 100% !important;
  }
  .footer-bottom{
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
}

/* Confetti styling for orders success */
.confetti-canvas{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* Responsiveness overrides */
@media (max-width: 1220px) {
  .gift-nav-link, #link-track-order{
    display: none !important;
  }
  .nav-links{
    gap: 12px;
  }
}

@media (max-width: 1024px) {
  .footer-grid{
    grid-template-columns: 1fr 1fr;
  }
  .header-nav > .container > nav{
    display: none !important;
  }
  .mobile-menu-toggle-btn{
    display: flex !important;
  }
  .search-bar-container{
    max-width: 180px;
  }

  /* Tablet Intermediate Homepage Composition (768px-1024px) */
  .hero-section{
    min-height: auto !important;
    padding: clamp(28px, 4vw, 42px) 0 !important;
    background: 
      radial-gradient(ellipse 70% 50% at 75% 50%, rgba(197, 155, 39, 0.08) 0%, transparent 65%),
      linear-gradient(to right, rgba(253, 252, 249, 0.98) 35%, rgba(253, 252, 249, 0.88) 70%, rgba(249, 246, 238, 0.65) 100%),
      /* Pure CSS radiant gradient - zero network bytes */
    background-size: cover !important;
  }
  .hero-grid{
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: clamp(20px, 3vw, 32px) !important;
    text-align: left !important;
  }
  .hero-content{
    max-width: 100% !important;
  }
  .hero-title{
    font-size: clamp(2.0rem, 3.2vw, 2.5rem) !important;
    line-height: 1.16 !important;
  }
  .hero-desc{
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    margin-bottom: var(--dp-space-md) !important;
    max-width: 440px !important;
  }
  .hero-visual{
    justify-content: center !important;
  }
  .hero-image-wrapper{
    max-width: 320px !important;
    border-radius: 20px !important;
  }
  .floating-card{
    bottom: 14px !important;
    left: -10px !important;
    padding: 8px 14px !important;
  }
  #home-view .featured-showcase-grid{
    gap: 14px !important;
  }
  #home-view .showcase-card{
    height: 220px !important;
  }
  #home-view .showcase-grid.category-showcase-grid{
    gap: 16px !important;
  }
  #home-view .category-card{
    height: 240px !important;
  }
  .atelier-pillars-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  #home-view .process-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .shop-layout{
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 18px !important;
  }
  #home-view .products-grid, #home-view .seasonal-products-grid, .products-grid, .seasonal-products-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1.6vw, 18px) !important;
  }
}

@media (max-width: 768px) {
  .nav-container{
    display: grid !important;
    grid-template-areas: 
      "logo actions"
      "search search" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    height: auto !important;
    padding: 10px 14px !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .header-nav.scrolled .nav-container{
    height: auto !important;
    padding: 8px 14px !important;
  }
  
  .logo{
    grid-area: logo;
    font-size: 1.3rem !important;
    padding: 0;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .hero-grid{
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 18px !important;
  }
  .hero-title{
    font-size: clamp(1.85rem, 6.8vw, 2.25rem) !important;
    line-height: 1.18 !important;
  }
  .hero-desc{
    font-size: 0.90rem !important;
    line-height: 1.55 !important;
    margin: 0 auto 16px !important;
    max-width: 100% !important;
  }
  .btn-group{
    justify-content: center !important;
    gap: 10px !important;
  }
  .hero-visual{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 4px auto 0 !important;
  }
  .hero-image-wrapper{
    max-width: 230px !important;
    margin: 0 auto !important;
    border-radius: 18px !important;
    padding: 6px !important;
  }
  .floating-card{
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    margin: 10px auto 0 !important;
    max-width: 230px !important;
    width: fit-content !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    animation: none !important;
  }
  
  .shop-layout{
    grid-template-columns: 1fr;
  }
  
  .filter-sidebar{
    position: static;
  }
  
  .detail-grid{
    grid-template-columns: 1fr;
  }
  
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .section-title{
    font-size: 1.8rem !important;
  }
  
  .custom-orders-banner{
    padding: 40px 20px !important;
  }
}

/* ==========================================================================
   ANNOUNCEMENT BAR & LUXURY REDESIGN ACCENTS
   ========================================================================== */
.announcement-bar{
  background: var(--accent-teal);
  color: #fff;
  padding: 10px 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  position: relative;
  z-index: 1001;
}

.announcement-ticker{
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 30px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .announcement-ticker{
    justify-content: flex-start;
    animation: ticker-slide 20s linear infinite;
    width: max-content;
    padding-left: 20px;
  }
}

@keyframes ticker-slide {
  0%{ transform: translate3d(0, 0, 0); }
  100%{ transform: translate3d(-50%, 0, 0); }
}

.announcement-ticker span{
  display: flex;
  align-items: center;
  gap: 8px;
}

.announcement-ticker i{
  color: var(--accent-gold);
  font-size: 0.9rem;
}

/* Trust Badges Grid */
.trust-badges-section{
  background: var(--bg-secondary);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  padding: clamp(14px, 2vw, 22px) 0;
  margin-bottom: var(--dp-space-xs);
}

.trust-badges-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.8vw, 20px);
}

@media (max-width: 992px) {
  .trust-badges-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .trust-badges-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

.badge-item{
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 14px);
  padding: clamp(10px, 1.2vw, 14px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  transition: var(--transition-smooth);
}

.badge-item:hover{
  transform: translateY(-4px);
  border-color: var(--accent-gold);
  box-shadow: 0 8px 24px rgba(197, 155, 39, 0.05);
}

.badge-icon-box{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(197, 155, 39, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--accent-gold);
  flex-shrink: 0;
}

.badge-content h4,
.badge-content .badge-title{
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-content p{
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Gold Stars Row */
.product-rating-row{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 10px 0;
  font-size: 0.85rem;
}



/* Promo Popup Modal */
.promo-modal-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 8, 5, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

.promo-modal-overlay.open{
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.promo-modal-card{
  background: var(--bg-primary);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  width: 90%;
  max-width: 800px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  position: relative;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  max-height: 90vh;
}

.promo-modal-overlay.open .promo-modal-card{
  transform: scale(1);
}

.promo-content{
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.promo-tag{
  color: var(--accent-gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.promo-title{
  font-family: var(--font-heading);
  font-size: 1.7rem;
  color: var(--accent-teal);
  line-height: 1.25;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.promo-desc{
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 24px;
}

.promo-image-wrapper{
  position: relative;
  min-height: 300px;
  background: var(--bg-secondary);
}

.promo-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.close-promo-btn{
  position: absolute;
  top: 15px;
  right: 15px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  font-size: 1.2rem;
  font-weight: 700;
  transition: var(--transition-fast);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.close-promo-btn:hover{
  background: var(--accent-teal);
  color: #fff;
  border-color: var(--accent-teal);
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .promo-modal-overlay{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 8, 5, 0.8) !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  .promo-modal-card{
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 380px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .promo-image-wrapper{
    min-height: 180px !important;
    max-height: 200px !important;
    grid-row: 1 !important;
  }

  .promo-content{
    padding: 20px 18px !important;
  }

  .promo-title{
    font-size: 1.35rem !important;
    margin-bottom: 10px !important;
  }

  .promo-desc{
    font-size: 0.84rem !important;
    margin-bottom: 16px !important;
    line-height: 1.45 !important;
  }

  .close-promo-btn{
    top: 10px !important;
    right: 10px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 1.4rem !important;
    background: #ffffff !important;
    color: #1a120b !important;
    border: 2px solid var(--accent-gold) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    z-index: 20 !important;
  }
}

/* Serif Logo styling */
.serif-title-brand{
  font-family: var(--font-heading) !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-teal) !important;
}

/* Redesign active states for selectors */
.nav-link.active{
  color: var(--accent-gold) !important;
  border-bottom: none !important;
}

.modal-card .btn-secondary{
  color: var(--text-primary) !important;
  background: #ffffff !important;
  border: 1px solid rgba(197, 155, 39, 0.4) !important;
  font-weight: 600 !important;
}

.modal-card .btn-secondary:hover{
  background: var(--accent-gold) !important;
  color: #ffffff !important;
  border-color: var(--accent-gold) !important;
}
.btn-primary{
  background: linear-gradient(135deg, var(--accent-gold) 0%, #c5a028 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(197, 155, 39, 0.3) !important;
}
.btn-primary:hover{
  background: linear-gradient(135deg, var(--accent-gold-hover) 0%, var(--accent-gold) 100%) !important;
  border: none !important;
  box-shadow: 0 8px 25px rgba(197, 155, 39, 0.5) !important;
  transform: translateY(-2px) !important;
}
.logo-dot{
  background-color: var(--accent-gold) !important;
}

/* ==========================================================================
   FEATURED GRID & WISHLIST STYLES
   ========================================================================== */
.featured-showcase-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .featured-showcase-grid{
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

.showcase-card{
  position: relative;
  aspect-ratio: 16 / 9 !important;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  display: block;
  transition: var(--transition-smooth);
}

.showcase-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(110, 93, 71, 0.12);
}

.showcase-img{
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.showcase-card:hover .showcase-img{
  transform: scale(1.05);
}

.showcase-overlay{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(46, 37, 24, 0.85) 0%, rgba(46, 37, 24, 0.3) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.showcase-tag{
  color: var(--accent-gold);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.showcase-title{
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Floating Wishlist Heart Btn */
.wishlist-heart-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(253, 252, 249, 0.92);
  border: 1px solid rgba(197, 155, 39, 0.22);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: #544a3e;
  box-shadow: 0 2px 8px rgba(110, 93, 71, 0.08);
  transition: transform var(--dp-transition-fast), color var(--dp-transition-fast), background var(--dp-transition-fast), border-color var(--dp-transition-fast);
}

.wishlist-heart-btn:hover{
  transform: scale(1.08);
  color: var(--accent-gold);
  border-color: rgba(197, 155, 39, 0.45);
  background: #ffffff;
}

.wishlist-heart-btn.active{
  color: #b8332a !important;
  border-color: rgba(184, 51, 42, 0.35) !important;
  background: #ffffff !important;
}

.wishlist-heart-btn.active i{
  font-weight: 900; /* Solid heart */
}

/* ==========================================================================
   SCROLLING MARQUEE & CUSTOM ORDERS WHATSAPP BANNER
   ========================================================================== */
.marquee-wrapper{
  width: 100%;
  overflow: hidden;
  background: var(--bg-primary);
  border-top: 1px solid var(--accent-gold-light);
  border-bottom: 1px solid var(--accent-gold-light);
  padding: 8px 0;
  margin-top: var(--dp-space-xs);
  margin-bottom: var(--dp-space-xs);
  display: flex;
  white-space: nowrap;
}

.marquee-content{
  display: inline-flex;
  animation: marquee-scroll 32s linear infinite;
  gap: 20px;
  will-change: transform;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.marquee-content span{
  font-family: var(--font-heading);
  font-size: 0.82rem;
  letter-spacing: 0.15em;
  color: var(--accent-gold);
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

@keyframes marquee-scroll {
  0%{ transform: translate3d(0, 0, 0); }
  100%{ transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   BESPOKE ATELIER CUSTOMIZATION SHOWCASE (EXQUISITE CUSTOM MASTERPIECES)
   ========================================================================== */
.bespoke-atelier-wrapper{
  padding-top: 28px !important;
  padding-bottom: 48px !important;
}

.custom-orders-banner.bespoke-atelier-banner,
.custom-orders-banner{
  position: relative;
  background: linear-gradient(135deg, #151412 0%, #1c1a17 55%, #24201a 100%) !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(24, 23, 21, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  padding: clamp(26px, 3.5vw, 44px) clamp(22px, 3.5vw, 44px) !important;
  overflow: hidden;
  box-sizing: border-box;
  color: #ffffff;
}

.bespoke-banner-mesh{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 12% 18%, rgba(197, 155, 39, 0.14) 0%, transparent 60%),
              radial-gradient(circle at 88% 82%, rgba(31, 75, 82, 0.16) 0%, transparent 55%);
  z-index: 1;
}

.bespoke-grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.22fr 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}

.bespoke-info-col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.bespoke-tag-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(197, 155, 39, 0.14);
  border: 1px solid rgba(197, 155, 39, 0.38);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 12px;
}

.bespoke-tag-badge .sparkle-icon{
  color: #e5be58;
  font-size: 0.72rem;
}

.bespoke-tag-badge .custom-banner-tag{
  color: #ffd978 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  margin: 0 !important;
}

.bespoke-info-col .custom-banner-title{
  font-family: var(--font-heading, "Cinzel", Georgia, serif) !important;
  font-size: clamp(1.6rem, 2.5vw, 2.35rem) !important;
  font-weight: 600 !important;
  color: #fbfaf7 !important;
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.01em !important;
}

.bespoke-info-col .custom-banner-desc{
  color: #ded8cb !important;
  font-size: 0.94rem !important;
  line-height: 1.62 !important;
  margin-bottom: 20px !important;
  max-width: 580px !important;
}

.bespoke-pillars-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  width: 100%;
}

.bespoke-pillar-item{
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 9px 14px;
  transition: background 0.2s, border-color 0.2s;
}

.bespoke-pillar-item:hover{
  background: rgba(197, 155, 39, 0.08);
  border-color: rgba(197, 155, 39, 0.3);
}

.bespoke-pillar-icon{
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(197, 155, 39, 0.18);
  color: #ffd54f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  flex-shrink: 0;
}

.bespoke-pillar-text strong{
  display: block;
  font-size: 0.86rem;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.3;
}

.bespoke-pillar-text span{
  display: block;
  font-size: 0.76rem;
  color: #aea89c;
  line-height: 1.35;
}

.bespoke-action-group{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.custom-whatsapp-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.94rem !important;
  letter-spacing: 0.04em !important;
  padding: 13px 28px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35) !important;
  text-decoration: none !important;
  width: fit-content !important;
  cursor: pointer !important;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important;
}

.custom-whatsapp-btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.5) !important;
  background: linear-gradient(135deg, #2ae26f 0%, #0e7266 100%) !important;
  color: #ffffff !important;
}

.custom-whatsapp-btn .fa-whatsapp{
  font-size: 1.25rem !important;
  color: #ffffff !important;
}

.bespoke-cta-arrow{
  font-size: 0.78rem !important;
  opacity: 0.85 !important;
  transition: transform 0.2s !important;
}

.custom-whatsapp-btn:hover .bespoke-cta-arrow{
  transform: translate(2px, -2px) !important;
}

.bespoke-trust-note{
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c4beb3;
  font-size: 0.78rem;
  font-weight: 500;
}

.bespoke-trust-note i{
  color: #ffd54f;
  font-size: 0.82rem;
}

/* Right visual showcase */
.bespoke-visual-col{
  display: flex;
  flex-direction: column;
}

.bespoke-visual-grid{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 12px;
}

.bespoke-visual-card{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid rgba(197, 155, 39, 0.25);
  background: #1c1a17;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.bespoke-visual-card.card-featured{
  height: 275px;
}

.bespoke-visual-subgrid{
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  height: 275px;
}

.bespoke-card-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.bespoke-visual-card:hover .bespoke-card-img{
  transform: scale(1.05);
}

.bespoke-card-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 15, 13, 0.88) 0%, rgba(16, 15, 13, 0.15) 55%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 10px;
  pointer-events: none;
}

.bespoke-card-chip{
  background: rgba(22, 20, 17, 0.88);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(197, 155, 39, 0.35);
  color: #fbfaf7;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bespoke-card-chip i{
  color: #ffd54f;
  font-size: 0.72rem;
}

.bespoke-seal-badge{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(197, 155, 39, 0.35);
  border-radius: 8px;
  padding: 8px 14px;
}

.bespoke-seal-badge i{
  color: #ffd54f;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.bespoke-seal-text .seal-title{
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
}

.bespoke-seal-text .seal-sub{
  display: block;
  font-size: 0.72rem;
  color: #b3ada2;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .bespoke-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .bespoke-visual-grid{
    grid-template-columns: 1.1fr 1fr;
  }
  .bespoke-visual-card.card-featured,
  .bespoke-visual-subgrid{
    height: 220px;
  }
  .custom-whatsapp-btn{
    width: 100% !important;
  }
}

@media (max-width: 520px) {
  .bespoke-visual-grid{
    grid-template-columns: 1fr;
  }
  .bespoke-visual-subgrid{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    height: 130px;
  }
  .bespoke-visual-card.card-featured{
    height: 170px;
  }
}

/* Homepage bottom-of-page transition: clean luxury rhythm */
#home-view .container.home-section:has(.custom-orders-banner){
  padding-top: 16px !important;
  padding-bottom: 36px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#home-view ~ .footer{
  padding-top: clamp(36px, 4.5vw, 56px) !important;
}

/* ==========================================================================
   ADMIN PANEL TABS AND SIDEBAR NAVIGATION
   ========================================================================== */
.admin-dashboard-container{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
  align-items: start;
}

.admin-sidebar{
  position: sticky;
  top: 85px;
  max-height: calc(100vh - 105px);
  overflow-y: auto;
  z-index: 50;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  padding: 24px 16px;
  height: fit-content;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: var(--glass-shadow);
}

.admin-sidebar-header{
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}

.admin-sidebar-header h3{
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--accent-gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
}

.admin-sidebar-menu{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-sidebar-menu li{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--border-radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.admin-sidebar-menu li i{
  font-size: 1.05rem;
  width: 20px;
  text-align: center;
}

.admin-sidebar-menu li:hover{
  background: rgba(197, 155, 39, 0.08);
  color: var(--text-primary);
}

.admin-sidebar-menu li.active{
  background: var(--accent-teal);
  color: #fdfcf9 !important;
}

.admin-content-area{
  min-width: 0; /* Prevent flex blowout */
}

.admin-tab-content{
  display: none;
}

.admin-tab-content.active{
  display: block;
  animation: tabFadeIn 0.3s ease-out;
}

@keyframes tabFadeIn {
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Settings image upload boxes hover effect */
.setting-img-upload-box{
  transition: var(--transition-fast);
}
.setting-img-upload-box:hover{
  border-color: var(--accent-gold) !important;
  background: rgba(212, 175, 55, 0.05) !important;
}

/* Admin Control Center Header & Badge */
.admin-tab-count-badge{
  font-size: 0.74rem;
  color: #8c6716;
  font-weight: 800;
  background: rgba(197, 155, 39, 0.15);
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid rgba(197, 155, 39, 0.4);
}

.admin-mobile-tab-dropdown-wrap{
  display: none;
}

.mobile-review-btn-text{
  display: none;
}

.admin-order-status-badge-inline{
  display: none;
}

@media (max-width: 992px) {
  .admin-dashboard-container{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .admin-sidebar{
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 14px 12px;
    margin-bottom: 16px;
    background: #ffffff !important;
    border: 1px solid rgba(197, 155, 39, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(110, 93, 71, 0.08) !important;
  }
  .admin-sidebar-header{
    margin-bottom: 12px;
    padding-bottom: 8px;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(197, 155, 39, 0.25) !important;
  }
  .admin-mobile-tab-dropdown-wrap{
    display: block !important;
    position: relative !important;
    top: auto !important;
    z-index: 10 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(197, 155, 39, 0.4) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(110, 93, 71, 0.12) !important;
    margin-bottom: 14px !important;
  }
  .admin-mobile-tab-select{
    width: 100% !important;
    background: #faf7f0 !important;
    border: 1.5px solid var(--accent-gold) !important;
    color: #1a120b !important;
    font-weight: 700 !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(197, 155, 39, 0.12) !important;
  }

  /* Display ALL 10 Control Center sections in a clean, visible 2-column grid on mobile */
  .admin-sidebar-menu{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .admin-sidebar-menu li{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 10px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #1a120b !important;
    background: #faf7f0 !important;
    border: 1px solid rgba(197, 155, 39, 0.35) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 5px rgba(110, 93, 71, 0.05) !important;
  }

  .admin-sidebar-menu li i{
    font-size: 0.95rem !important;
    width: 18px !important;
    text-align: center !important;
    color: var(--accent-gold) !important;
    flex-shrink: 0 !important;
  }

  .admin-sidebar-menu li:hover{
    background: rgba(197, 155, 39, 0.12) !important;
    border-color: var(--accent-gold) !important;
  }

  .admin-sidebar-menu li.active{
    background: var(--accent-teal) !important;
    color: #ffffff !important;
    border-color: var(--accent-teal) !important;
    box-shadow: 0 4px 12px rgba(123, 31, 22, 0.25) !important;
  }

  .admin-sidebar-menu li.active i{
    color: #ffd700 !important;
  }
}

@media (max-width: 380px) {
  .admin-sidebar-menu{
    grid-template-columns: 1fr !important;
  }
}

/* Comprehensive Video Playing & Video Section Hiding Rules */
.home-videos-section, #home-videos-section, #link-videos, #mob-link-videos, #mob-bottom-videos, [data-tab="videos"], #admin-tab-videos, #admin-home-videos-list{
  display: none !important;
}

#admin-view .container{
  max-width: 1400px;
}

/* Admin Settings Cards - bounded sub-sections with their own save action */
.admin-settings-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 24px;
}

.admin-settings-card-title{
  color: var(--accent-gold);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-border);
}

.admin-settings-card-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.admin-settings-card-footer{
  grid-column: span 2;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-border);
}

.featured-showcase-card-1{
  border-right: 1px solid var(--glass-border);
  padding-right: 15px;
}

.featured-showcase-card-2{
  padding-left: 15px;
}

.featured-showcase-card-3{
  grid-column: span 2;
  border-top: 1px solid var(--glass-border);
  padding-top: 20px;
  margin-top: 10px;
  margin-bottom: 0;
}

.featured-sub-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 12px;
}

/* Banner Layout Map - clickable jump boxes */
.banner-map-box:hover{
  filter: brightness(1.25);
  transform: translateY(-1px);
}

.settings-jump-highlight{
  animation: settings-jump-pulse 1.6s ease-out;
  border-radius: 8px;
}

@keyframes settings-jump-pulse {
  0%{ box-shadow: 0 0 0 0 rgba(197, 155, 39, 0.6); }
  70%{ box-shadow: 0 0 0 14px rgba(197, 155, 39, 0); }
  100%{ box-shadow: 0 0 0 0 rgba(197, 155, 39, 0); }
}



/* ==========================================================================
   HOMEPAGE FULL-WIDTH CINEMATIC VIDEO THEATRE
   ========================================================================== */
.home-videos-section{
  padding: 40px 0 30px;
  position: relative;
}

.home-video-theatre-container{
  width: 100%;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 20, 25, 0.95) 0%, rgba(12, 12, 16, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 35px rgba(212, 175, 55, 0.12);
  transition: all 0.3s ease;
}

.home-video-theatre-player-wrapper{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 680px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.home-video-main-player{
  width: 100%;
  height: 100%;
  max-height: 680px;
  object-fit: contain;
  background: #000;
  display: block;
}

.home-video-iframe-player{
  border: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}



/* Theatre Big Splash Play Button Overlay */
.home-video-splash-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  z-index: 8;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  backdrop-filter: blur(2px);
}

.home-video-splash-overlay.playing{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.home-video-splash-btn{
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c59b27 0%, #ecd872 100%);
  border: 2px solid #ffffff;
  color: #121820;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px;
  box-shadow: 0 0 35px rgba(197, 155, 39, 0.7), 0 8px 25px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: splashPulse 2.2s infinite;
}

@keyframes splashPulse {
  0%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(197, 155, 39, 0.7); }
  70%{ transform: scale(1.06); box-shadow: 0 0 0 20px rgba(197, 155, 39, 0); }
  100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(197, 155, 39, 0); }
}

.home-video-splash-overlay:hover .home-video-splash-btn{
  transform: scale(1.15);
  background: #ffffff;
  color: #121820;
  box-shadow: 0 0 45px rgba(255, 255, 255, 0.8);
}

.home-video-splash-text{
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(197, 155, 39, 0.4);
}

/* Floating Theatre Prev / Next Navigation Arrows */
.video-theatre-nav-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(18, 18, 22, 0.8);
  border: 1px solid rgba(197, 155, 39, 0.4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: var(--transition-fast);
}

.video-theatre-nav-btn.prev-btn{
  left: 18px;
}

.video-theatre-nav-btn.next-btn{
  right: 18px;
}

.video-theatre-nav-btn:hover{
  background: var(--accent-gold);
  color: #121820;
  border-color: #ffffff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 0 20px rgba(197, 155, 39, 0.5);
}

.video-sound-toggle-btn{
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: rgba(15, 15, 20, 0.85);
  border: 1px solid var(--accent-gold);
  color: #fff;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: var(--transition-fast);
  z-index: 10;
}

.video-sound-toggle-btn:hover{
  background: var(--accent-gold);
  color: #000;
  transform: translateY(-2px);
}

.video-fullscreen-toggle-btn{
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: rgba(15, 15, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: var(--transition-fast);
  z-index: 10;
}

.video-fullscreen-toggle-btn:hover{
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  transform: translateY(-2px);
}

.home-video-theatre-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: rgba(18, 18, 22, 0.98);
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  gap: 18px;
  flex-wrap: wrap;
}

.video-meta-left{
  flex: 1;
  min-width: 260px;
}

.video-studio-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-gold);
  font-weight: 600;
  margin-bottom: 6px;
}

.video-playlist-tracker-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(197, 155, 39, 0.15);
  border: 1px solid rgba(197, 155, 39, 0.35);
  color: var(--accent-gold);
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.home-video-theatre-title{
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: #fff;
  margin-bottom: 4px;
}

.home-video-theatre-caption{
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.45;
}

/* Prominent Playback Action Buttons */
.video-theatre-action-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(197, 155, 39, 0.4);
  color: #f5f0e6;
  padding: 9px 16px;
  border-radius: 30px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  backdrop-filter: blur(8px);
}

.video-theatre-action-btn:hover{
  background: rgba(197, 155, 39, 0.22);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  transform: translateY(-2px);
}

.video-theatre-action-btn.next-action-btn{
  background: linear-gradient(135deg, #c59b27, #e6ca65);
  border: 1px solid #ffffff;
  color: #121820;
  box-shadow: 0 4px 15px rgba(197, 155, 39, 0.35);
}

.video-theatre-action-btn.next-action-btn:hover{
  background: linear-gradient(135deg, #d4af37, #f3de8a);
  color: #000;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 20px rgba(197, 155, 39, 0.5);
}

/* Video Gallery Showcase Tiles Grid DIRECTLY UNDER Player */
.home-video-playlist-tray{
  padding: 24px 28px 30px 28px;
  background: rgba(10, 12, 16, 0.98);
  border-top: 1px solid rgba(197, 155, 39, 0.25);
}

.video-playlist-tray-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.playlist-tray-title{
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.playlist-tray-instruction{
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.home-video-playlist-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* Luxury Video Tile Card */
.home-video-gallery-tile{
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(197, 155, 39, 0.25);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
}

.home-video-gallery-tile:hover{
  border-color: var(--accent-gold);
  background: rgba(197, 155, 39, 0.08);
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(197, 155, 39, 0.2);
}

.home-video-gallery-tile.active{
  border: 2px solid var(--accent-gold);
  background: rgba(197, 155, 39, 0.16);
  box-shadow: 0 0 25px rgba(197, 155, 39, 0.35);
}





.home-video-gallery-tile:hover .video-tile-thumb{
  transform: scale(1.06);
}





.home-video-gallery-tile:hover .video-tile-play-overlay i{
  transform: scale(1.15);
  background: #ffffff;
  color: #121820;
}



.home-video-gallery-tile.active .video-tile-playing-banner{
  display: inline-flex;
}



















.home-video-gallery-tile:hover .video-tile-select-btn{
  background: var(--accent-gold);
  color: #121820;
  border-color: #ffffff;
}

.home-video-gallery-tile.active .video-tile-select-btn{
  background: var(--accent-gold);
  color: #121820;
  border-color: #ffffff;
}

/* Admin Video Management Grid */
.admin-home-videos-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}





























.btn-danger{
  border: 1px solid rgba(244, 67, 54, 0.4) !important;
  background: rgba(244, 67, 54, 0.15) !important;
  color: #ff7675 !important;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  transition: var(--transition-fast);
}

.btn-danger:hover{
  background: #e74c3c !important;
  color: #ffffff !important;
  border-color: #c0392b !important;
}

/* Resin Calculator Responsive Layout */
.calculator-grid-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

.calc-inputs-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

.calc-result-total-val{
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--accent-gold);
  font-family: var(--font-heading);
  margin-top: 5px;
  word-break: break-word;
}

@media (max-width: 768px) {
  .calculator-grid-container{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .calc-result-total-val{
    font-size: 2.2rem !important;
  }
}

@media (max-width: 480px) {
  .calc-inputs-row{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  .calc-result-total-val{
    font-size: 1.85rem !important;
  }
}

/* ==========================================================================
   CUSTOMER RESIN MIX CALCULATOR MODAL & STYLING
   ========================================================================== */
.customer-calculator-card {
  max-width: 780px !important;
  width: 95% !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  background: linear-gradient(145deg, #ffffff 0%, #faf8f5 100%) !important;
  border: 1.5px solid rgba(197, 155, 39, 0.4) !important;
  border-radius: 18px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3) !important;
  color: #1a120b !important;
  padding: 28px 30px !important;
  position: relative !important;
  -webkit-overflow-scrolling: touch;
}

.calc-modal-header {
  margin-bottom: 18px;
  text-align: left;
}

.calc-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(197, 155, 39, 0.12);
  color: #8c6716;
  border: 1px solid rgba(197, 155, 39, 0.3);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.calc-modal-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  color: #1a120b;
  margin: 0 0 6px 0;
  letter-spacing: 0.3px;
}

.calc-modal-subtitle {
  font-size: 0.85rem;
  color: #6e5d47;
  margin: 0;
  line-height: 1.45;
}

.unit-highlight {
  font-weight: 700;
  color: #8c6716;
}

/* Presets bar */
.calc-presets-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: #f4eee2;
  border: 1px solid rgba(197, 155, 39, 0.25);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 18px;
}

.calc-preset-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #5c4516;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.calc-presets-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.calc-preset-btn {
  background: #ffffff;
  border: 1px solid rgba(197, 155, 39, 0.35);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #3b2a1a;
  cursor: pointer;
  transition: all 0.2s ease;
}

.calc-preset-btn:hover,
.calc-preset-btn.active {
  background: #c59b27;
  color: #ffffff;
  border-color: #c59b27;
}

/* Grid Layout */
.customer-calc-body {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 22px;
  align-items: start;
}

.calc-controls-pane {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.calc-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.calc-field-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #3b2a1a;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Shape Tabs */
.calc-shape-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.calc-shape-tab {
  background: #ffffff;
  border: 1.5px solid rgba(197, 155, 39, 0.3);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #5c4516;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.calc-shape-tab.active {
  background: #1f4b52;
  color: #ffffff;
  border-color: #1f4b52;
}

.calc-input,
.calc-select {
  background: #ffffff !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  color: #1a120b !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  min-height: 42px !important;
  transition: border-color 0.2s ease !important;
}

.calc-input:focus,
.calc-select:focus {
  border-color: #c59b27 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.18) !important;
}

.calc-dual-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Results Pane */
.calc-summary-card {
  background: #1a1714;
  border: 1.5px solid rgba(197, 155, 39, 0.5);
  border-radius: 14px;
  padding: 20px 18px;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.calc-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #c59b27;
  letter-spacing: 0.05em;
}

.calc-main-result {
  text-align: center;
  padding: 10px 0 14px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

.calc-total-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #a89f91;
  display: block;
  margin-bottom: 4px;
}

.calc-total-digits {
  font-size: 2.6rem;
  font-weight: 800;
  color: #e5b83e;
  font-family: var(--font-heading);
  line-height: 1.1;
}

.calc-unit-sub {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
}

.calc-volume-sub {
  font-size: 0.85rem;
  color: #d1c7b7;
  margin-top: 6px;
  font-weight: 500;
}

.calc-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.calc-part-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
}

.calc-part-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #ffffff;
  margin-bottom: 4px;
}

.part-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot-gold { background: #e5b83e; }
.dot-teal { background: #26a69a; }

.calc-part-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-heading);
}

.part-a-card .calc-part-val { color: #e5b83e; }
.part-b-card .calc-part-val { color: #80cbc4; }

.calc-part-sub {
  font-size: 0.75rem;
  color: #a89f91;
  margin-top: 2px;
}

.calc-artisan-tip {
  background: rgba(197, 155, 39, 0.1);
  border-left: 3px solid #c59b27;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.77rem;
  color: #e5dac9;
  line-height: 1.45;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.calc-artisan-tip i {
  color: #e5b83e;
  font-size: 0.95rem;
  margin-top: 2px;
}

.calc-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.calc-copy-btn,
.calc-wa-btn {
  flex: 1;
  justify-content: center;
  font-size: 0.82rem !important;
  padding: 9px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-radius: 8px !important;
}

@media (max-width: 768px) {
  .customer-calculator-card {
    padding: 22px 18px !important;
    max-height: 94vh !important;
    width: 94% !important;
  }
  .customer-calc-body {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .calc-total-digits {
    font-size: 2.2rem !important;
  }
  .calc-modal-title {
    font-size: 1.25rem !important;
  }
}

@media (max-width: 480px) {
  .customer-calculator-card {
    padding: 18px 14px !important;
    border-radius: 14px !important;
  }
  .calc-dual-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .calc-shape-tabs {
    grid-template-columns: 1fr !important;
  }
  .calc-actions-row {
    flex-direction: column !important;
  }
}

@media (max-width: 768px) {
  
  
  .video-theatre-nav-btn{
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
  }
  .video-theatre-nav-btn.prev-btn{
    left: 8px;
  }
  .video-theatre-nav-btn.next-btn{
    right: 8px;
  }
}


@media (max-width: 1100px) {
  
}

@media (max-width: 768px) {
  .home-videos-section{
    padding-top: 20px;
  }

  

  

  

  
}


/* Modern resin-store commerce enhancements */
.compare-card-btn{
  position: absolute;
  right: 10px;
  top: 48px;
  z-index: 9;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(197, 155, 39, 0.22);
  background: rgba(253, 252, 249, 0.92);
  color: #544a3e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(110, 93, 71, 0.08);
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity var(--dp-transition-fast), transform var(--dp-transition-fast), color var(--dp-transition-fast), background var(--dp-transition-fast), border-color var(--dp-transition-fast);
}

.product-card:hover .compare-card-btn{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.compare-card-btn:hover{
  transform: scale(1.08);
  color: var(--accent-gold);
  border-color: rgba(197, 155, 39, 0.45);
  background: #ffffff;
}

.sale-badge{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #b8332a 0%, #8e231c 100%);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2.5px 7px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(184, 51, 42, 0.3);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-badge{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2.5px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  background: #4a3e35;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.stock-badge.sold{
  background: #a62828;
}

.stock-badge.low{
  background: #c25e1a;
}

.mini-products-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}













.compare-bar{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  background: rgba(15, 25, 28, 0.98);
  border: 1.5px solid var(--accent-gold);
  border-radius: 14px;
  padding: 12px 18px;
  display: flex;
  gap: 16px;
  align-items: center;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
  color: #ffffff;
}

.compare-bar span{
  font-weight: 700;
  color: #f5eedc;
  font-size: 0.88rem;
  white-space: nowrap;
}

.compare-bar .btn-secondary, .compare-bar button{
  color: #ffffff !important;
  border: 1px solid var(--accent-gold) !important;
  background: rgba(197, 155, 39, 0.2) !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

.compare-bar button:hover, .compare-bar .btn-secondary:hover{
  background: var(--accent-gold) !important;
  color: #1a120b !important;
  transform: translateY(-1px);
}

.compare-bar .compare-bar-btn-primary{
  background: linear-gradient(135deg, #c59b27 0%, #8c6716 100%) !important;
  color: #ffffff !important;
  border: 1px solid #c59b27 !important;
  box-shadow: 0 2px 10px rgba(197, 155, 39, 0.35) !important;
}

.compare-bar .compare-bar-btn-clear{
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #e0d5c1 !important;
}

.compare-bar .compare-bar-btn-clear:hover{
  background: rgba(255, 82, 82, 0.2) !important;
  border-color: #ff5252 !important;
  color: #ff8a80 !important;
}

.compare-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.compare-column{
  border: 1px solid var(--glass-border);
  padding: 14px;
  border-radius: 10px;
}

.compare-column img{
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

.compare-column h3{
  font-size: 1rem;
}



@media(max-width:600px){
  .mini-products-grid{grid-template-columns:repeat(2,1fr)}
  .compare-grid{grid-template-columns:1fr}
  
  .compare-bar{
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100% - 24px) !important;
    max-width: 390px !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  .compare-bar button, .compare-bar .btn-secondary{
    padding: 7px 12px !important;
    font-size: 0.78rem !important;
  }
}

/* ========================================================
   FULL-PAGE ORDER CONFIRMATION & SUCCESS VIEW
   ======================================================== */
.order-success-hero-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  padding: 40px 30px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  text-align: center;
  margin-bottom: 40px;
}

.order-success-check-pulse{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
  color: #fff;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
  box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6);
  animation: pulseGreenCheck 2s infinite;
}

@keyframes pulseGreenCheck {
  0%{ transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
  70%{ transform: scale(1); box-shadow: 0 0 0 16px rgba(76, 175, 80, 0); }
  100%{ transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

.order-success-title{
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.order-success-subtitle{
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 30px;
}

/* WhatsApp Prominent Action Callout Banner */
.order-success-wa-banner{
  background: linear-gradient(135deg, #0b2e1b 0%, #124d2e 100%);
  border: 2px solid #25d366;
  border-radius: var(--border-radius-md);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: left;
  margin: 30px 0;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.2);
}

.wa-banner-icon-col i{
  font-size: 3.8rem;
  color: #25d366;
  filter: drop-shadow(0 0 12px rgba(37, 211, 102, 0.5));
}

.wa-banner-title{
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: #ffffff;
  margin-bottom: 6px;
}

.wa-banner-desc{
  font-size: 0.9rem;
  color: #e0f2e9;
  line-height: 1.5;
  margin-bottom: 16px;
}

.wa-banner-actions{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.wa-primary-btn{
  background: linear-gradient(135deg, #25d366 0%, #1ebe5d 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 12px 24px !important;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
  border: none !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wa-primary-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

.wa-auto-redirect-tip{
  font-size: 0.8rem;
  color: #a7f3d0;
  font-weight: 500;
}

/* 3-Step Visual Progress */
.order-success-steps-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 30px 0;
  text-align: left;
}

.success-step-card{
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  padding: 18px;
  transition: var(--transition-fast);
}

.success-step-card .step-badge{
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.success-step-card.step-done .step-badge{ color: #4caf50; }
.success-step-card.step-current{ border-color: #25d366; background: rgba(37, 211, 102, 0.05); }
.success-step-card.step-current .step-badge{ color: #25d366; }
.success-step-card.step-next .step-badge{ color: var(--text-muted); }

.success-step-card h4{
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.success-step-card p{
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Detailed Order Receipt Grid */
.order-receipt-full-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  text-align: left;
  margin-top: 30px;
}

.order-receipt-card{
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  padding: 24px;
}

.receipt-section-heading{
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--text-primary);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fullpage-receipt-item-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.fullpage-receipt-item-row img{
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
}

.receipt-details-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.receipt-detail-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.order-success-footer-actions{
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* ========================================================
   ADMIN QUICK STOCK CONTROLLER & FILTER PILLS
   ======================================================== */
.stock-filter-pill{
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700 !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(24, 23, 21, 0.18) !important;
  background: #ffffff !important;
  color: #241b13 !important;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.stock-filter-pill:hover{
  background: #f4efe6 !important;
  color: #181715 !important;
  border-color: rgba(24, 23, 21, 0.35) !important;
}

.stock-filter-pill.active{
  background: #1f4b52 !important;
  color: #ffffff !important;
  border-color: #1f4b52 !important;
  box-shadow: 0 3px 10px rgba(31, 75, 82, 0.32) !important;
}

.stock-filter-pill.active,
.stock-filter-pill.active span,
.stock-filter-pill.active *{
  color: #ffffff !important;
  font-weight: 700 !important;
}

.stock-filter-pill.active i{
  color: #ffd54f !important;
}

.stock-inline-control{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff !important;
  padding: 4px 8px;
  border-radius: 8px !important;
  border: 1.5px solid rgba(24, 23, 21, 0.18) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  width: fit-content;
  max-width: 100%;
}

.stock-qty-step-btn{
  width: 26px;
  height: 26px;
  border-radius: 5px !important;
  background: #f2eee5 !important;
  border: 1px solid rgba(24, 23, 21, 0.18) !important;
  color: #181715 !important;
  font-weight: 800 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  transition: var(--transition-fast);
}

.stock-qty-step-btn:hover{
  background: #1f4b52 !important;
  color: #ffffff !important;
  border-color: #1f4b52 !important;
}

.stock-qty-num-input{
  width: 58px !important;
  min-width: 58px !important;
  text-align: center;
  background: transparent !important;
  border: none !important;
  color: #181715 !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  outline: none;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  box-sizing: border-box !important;
}

.stock-qty-num-input::-webkit-outer-spin-button,
.stock-qty-num-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.admin-save-single-stock-btn{
  padding: 5px 9px;
  font-size: 0.76rem;
  font-weight: 700;
  background: #1f4b52 !important;
  border: 1px solid #1f4b52 !important;
  color: #ffffff !important;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-fast);
}

.admin-save-single-stock-btn:hover{
  background: #15383d !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(31, 75, 82, 0.35);
}

.admin-save-single-stock-btn i{
  color: #ffffff !important;
  font-size: 0.8rem;
}

.admin-reset-filter-btn{
  background: #1f4b52 !important;
  border: 1px solid #1f4b52 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  cursor: pointer;
}

.admin-reset-filter-btn:hover{
  background: #15383d !important;
  color: #ffffff !important;
}

/* Newsletter Welcome Coupon Reward Card */
.newsletter-reward-card{
  background: linear-gradient(135deg, #1c140d 0%, #2e2114 100%);
  border: 1px solid var(--accent-gold);
  border-radius: var(--border-radius-md);
  padding: 16px 20px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  animation: fadeInModal 0.4s ease-out;
}

.coupon-copy-badge{
  background: var(--accent-gold);
  color: #1a120b;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  transition: var(--transition-fast);
}

.coupon-copy-badge:hover{
  background: #f7d57f;
  transform: scale(1.04);
}

@media (max-width: 768px) {
  .order-receipt-full-grid{ grid-template-columns: 1fr; }
  .order-success-steps-grid{ grid-template-columns: 1fr; }
  .order-success-wa-banner{ flex-direction: column; text-align: center; }
  .wa-banner-actions{ justify-content: center; }
}

/* ==========================================================================
   SEASONAL & FESTIVE STORE STYLES (RAKHI, DIWALI & OCCASIONS)
   ========================================================================== */
.seasonal-nav-link{
  position: relative;
  font-weight: 600 !important;
  color: var(--accent-gold) !important;
}



.seasonal-nav-link:hover .seasonal-nav-badge{
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.6);
}

.seasonal-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #d4af37, #c44536);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 18px;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3);
  margin-bottom: 12px;
}

.seasonal-btn{
  background: linear-gradient(135deg, #d4af37 0%, #b8332a 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(184, 51, 42, 0.35);
  font-weight: 600;
}

.seasonal-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.45);
}

/* Curated Luxury Showcase Sections (Enclosed Glassmorphism Card Containers) */
#seasonal-showcase-section, #budget-gifts-section, #best-sellers-section, #recently-viewed-section, .curated-showcase-container{
  background: linear-gradient(180deg, rgba(248, 244, 236, 0.72) 0%, rgba(242, 236, 224, 0.85) 100%) !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 36px rgba(110, 93, 71, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: clamp(16px, 2vw, 24px) clamp(14px, 1.8vw, 22px) !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

#seasonal-showcase-section .section-header, #budget-gifts-section .section-header, #best-sellers-section .section-header, #recently-viewed-section .section-header, .curated-showcase-container .section-header{
  border-bottom: 1px solid rgba(197, 155, 39, 0.2);
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}

/* ==========================================================================
   FULL HORIZONTAL COVERAGE FOR HOMEPAGE SECTIONS ON WEB (DESKTOP)
   ========================================================================== */
#home-view .container.home-section, #home-view .shop-catalog-outer-container{
  width: 100% !important;
  max-width: var(--dp-container-wide) !important;
  padding-left: clamp(16px, 3vw, 44px) !important;
  padding-right: clamp(16px, 3vw, 44px) !important;
  padding-top: var(--dp-space-xs) !important;
  padding-bottom: var(--dp-space-xs) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   PREMIUM LUXURY DESIGNER DIVIDER (BETWEEN SECTIONS)
   ========================================================================== */
.luxury-designer-divider{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: min(100%, var(--dp-container-wide)) !important;
  padding: 2px 0 4px 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  position: relative !important;
  opacity: 0.85;
}

#home-view .container.home-section:has(> .luxury-designer-divider){
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.luxury-divider-line{
  flex: 1 !important;
  height: 1.5px !important;
  border: none !important;
}

.luxury-divider-line.left-line{
  background: linear-gradient(90deg, transparent 0%, rgba(197, 155, 39, 0.15) 20%, rgba(197, 155, 39, 0.6) 75%, rgba(197, 155, 39, 0.95) 100%) !important;
}

.luxury-divider-line.right-line{
  background: linear-gradient(90deg, rgba(197, 155, 39, 0.95) 0%, rgba(197, 155, 39, 0.6) 25%, rgba(197, 155, 39, 0.15) 80%, transparent 100%) !important;
}

.luxury-divider-crest{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.luxury-divider-crest .crest-dot{
  color: var(--accent-gold) !important;
  font-size: 0.72rem !important;
  opacity: 0.85;
}

.luxury-divider-crest .crest-medallion{
  width: 28px !important;
  height: 28px !important;
  background: linear-gradient(135deg, #ffffff 0%, #faf6ec 100%) !important;
  border: 1.5px solid rgba(197, 155, 39, 0.45) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 10px rgba(197, 155, 39, 0.22), 0 0 12px rgba(197, 155, 39, 0.15) !important;
  color: #c59b27 !important;
  font-size: 0.75rem !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.luxury-divider-crest .crest-medallion i{
  color: #c59b27 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.luxury-designer-divider:hover .crest-medallion{
  transform: rotate(45deg) scale(1.12) !important;
  box-shadow: 0 4px 16px rgba(197, 155, 39, 0.35), 0 0 18px rgba(197, 155, 39, 0.28) !important;
}

/* ==========================================================================
   LUXURY ATELIER HERITAGE DESIGNER STRIP (INTER-SECTION DESIGN ELEMENT)
   ========================================================================== */
.atelier-designer-strip{
  background: linear-gradient(135deg, rgba(248, 244, 235, 0.85) 0%, rgba(243, 237, 225, 0.92) 100%) !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 30px rgba(110, 93, 71, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2.5vw, 28px) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 auto !important;
}

.atelier-designer-strip::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(197, 155, 39, 0.7), transparent);
}

.atelier-strip-header{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-bottom: 12px !important;
}

.atelier-strip-line{
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(197, 155, 39, 0.4), transparent) !important;
}

.atelier-strip-crest{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: #8c6716 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.crest-sparkle{
  color: var(--accent-gold) !important;
  font-size: 0.85rem !important;
  animation: pulseGold 2.5s infinite ease-in-out;
}

@keyframes pulseGold {
  0%, 100%{ opacity: 0.6; transform: scale(0.95); }
  50%{ opacity: 1; transform: scale(1.15); }
}

.atelier-pillars-grid{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(12px, 1.5vw, 18px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.atelier-pillar-card{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: clamp(8px, 1.2vw, 12px) clamp(10px, 1.4vw, 14px) !important;
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(197, 155, 39, 0.22) !important;
  border-radius: 12px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  box-sizing: border-box !important;
}

.atelier-pillar-card:hover{
  transform: translateY(-3px) !important;
  background: #ffffff !important;
  border-color: rgba(197, 155, 39, 0.5) !important;
  box-shadow: 0 6px 20px rgba(197, 155, 39, 0.18) !important;
}

.pillar-icon-badge{
  width: 42px !important;
  height: 42px !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, rgba(197, 155, 39, 0.18) 0%, rgba(197, 155, 39, 0.06) 100%) !important;
  border: 1px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8c6716 !important;
  font-size: 1.05rem !important;
  box-shadow: 0 2px 8px rgba(197, 155, 39, 0.15) !important;
}

.pillar-content{
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.pillar-title{
  font-family: var(--font-heading) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #1a120b !important;
  margin: 0 0 3px 0 !important;
  line-height: 1.25 !important;
}

.pillar-desc{
  font-size: 0.76rem !important;
  color: #6e5d47 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

#home-view .featured-showcase-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(16px, 2vw, 24px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#home-view .showcase-card{
  height: clamp(200px, 18vw, 260px) !important;
  aspect-ratio: auto !important;
}

#home-view .showcase-grid.category-showcase-grid{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: clamp(18px, 2.2vw, 28px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#home-view .category-card{
  height: clamp(190px, 16vw, 240px) !important;
}

#home-view .process-showcase{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 24px) !important;
  border-radius: 16px !important;
}

#home-view .process-showcase .section-header{
  margin-bottom: clamp(16px, 2vw, 22px) !important;
}

#home-view .process-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.3vw, 16px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 1025px) {
  #home-view .products-grid, #home-view .seasonal-products-grid, .products-grid:not(.shop-layout .products-grid), .seasonal-products-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(16px, 1.8vw, 24px) !important;
    width: 100% !important;
  }
}

.mini-products-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}













/* Product Card Seasonal Badge */
.product-seasonal-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #d4af37 0%, #9a7318 100%);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 215, 0, 0.45);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-seasonal-badge i{
  color: #ffd700;
  font-size: 0.70rem;
}

/* Admin Catalog Table Seasonal Badge */
.badge-seasonal{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(212, 175, 55, 0.18);
  color: var(--accent-gold);
  border: 1px solid var(--accent-gold);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
}

/* Interactive Star Rating Selector */
.star-rating-selector i{
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.15s ease;
  user-select: none;
}
.star-rating-selector i:hover{
  transform: scale(1.25);
  color: var(--accent-gold) !important;
}

/* Secondary Button Active State for Navigation & Filters */
.btn-secondary.active{
  background: var(--accent-gold) !important;
  color: #fff !important;
  border-color: var(--accent-gold) !important;
  box-shadow: 0 4px 14px rgba(197, 155, 39, 0.3);
}

/* High-Contrast "Show All Pending" & Reset Filter Buttons */
.admin-reset-filter-btn{
  background: #c59b27 !important;
  color: #ffffff !important;
  border: 1px solid #e5b83e !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(197, 155, 39, 0.35);
  transition: var(--transition-fast);
}

.admin-reset-filter-btn:hover{
  background: #e5b83e !important;
  color: #121820 !important;
  transform: translateY(-2px);
}

.admin-reset-filter-btn i{
  color: #ffffff !important;
}

.admin-reset-filter-btn:hover i{
  color: #121820 !important;
}

/* User Account & Security Panels */




/* Mobile Responsiveness & Zero Horizontal Overflow Rules */
/* ==========================================================================
   COMPREHENSIVE MOBILE RESPONSIVENESS & HIGH-CONTRAST TYPOGRAPHY RULES
   ========================================================================== */
@media (max-width: 768px) {
  html, body{
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100% !important;
  }

  body{
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-bottom-nav{
    display: flex !important;
  }

  .container, .shop-layout, .process-showcase{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  /* Hero Section on Mobile */
  .hero-section{
    background: linear-gradient(180deg, rgba(253, 252, 249, 0.98) 0%, rgba(247, 244, 235, 0.95) 100%), /* Pure CSS radiant gradient - zero network bytes */
    background-size: cover !important;
    padding: 16px 0 24px !important;
    min-height: auto !important;
  }

  .hero-title{
    font-size: clamp(1.85rem, 6.8vw, 2.25rem) !important;
    line-height: 1.18 !important;
    color: #1a120b !important;
    text-align: center;
    margin-bottom: 8px !important;
  }

  .hero-title span, .glow-text{
    background: linear-gradient(135deg, #a0781a 0%, #c59b27 50%, #7b580f 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(197, 155, 39, 0.25)) !important;
  }

  .hero-desc{
    color: #4a3e35 !important;
    font-size: 0.90rem !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    text-align: center;
    margin: 0 auto 16px !important;
    max-width: 100% !important;
  }

  .hero-tag{
    color: #8c6716 !important;
    background: rgba(197, 155, 39, 0.10) !important;
    border: 1px solid rgba(197, 155, 39, 0.28) !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    margin: 0 auto 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .floating-card{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 10px auto 0 !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(197, 155, 39, 0.38) !important;
    box-shadow: 0 6px 20px rgba(110, 93, 71, 0.10) !important;
    width: fit-content !important;
    max-width: 270px !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    animation: none !important;
  }

  .floating-icon{
    width: 30px !important;
    height: 30px !important;
    font-size: 0.85rem !important;
  }

  .floating-text h4{
    color: #1f1810 !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
  }

  .floating-text p{
    color: #5c4a37 !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
  }

  /* Section Headings & Badges */
  .section-tag{
    font-size: 0.8rem !important;
    color: #8c6716 !important;
    background: rgba(197, 155, 39, 0.12) !important;
    border: 1px solid rgba(197, 155, 39, 0.3) !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
  }

  .section-title{
    font-size: 1.85rem !important;
    color: #1a120b !important;
    line-height: 1.25 !important;
  }

  .section-description{
    font-size: 0.92rem !important;
    color: #4a3b2a !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
  }

  /* Categories Showcase on Mobile */
  .showcase-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 40px !important;
  }

  .category-card{
    height: 320px !important;
    padding: 24px 20px !important;
  }

  .category-card::before{
    background: linear-gradient(to top, rgba(10, 8, 5, 0.95) 0%, rgba(10, 8, 5, 0.65) 50%, rgba(10, 8, 5, 0.2) 100%) !important;
  }

  .category-name{
    font-size: 1.4rem !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95) !important;
  }

  .category-desc{
    font-size: 0.86rem !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85) !important;
  }

  .category-link{
    color: #f7d57f !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
  }

  /* Video Theatre Section on Mobile */
  .home-video-theatre-container{
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  }

  .home-video-theatre-meta{
    padding: 16px 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: rgba(16, 16, 22, 0.98) !important;
  }

  .home-video-theatre-title{
    font-size: 1.15rem !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
  }

  .home-video-theatre-caption{
    font-size: 0.84rem !important;
    color: rgba(255, 255, 255, 0.88) !important;
    line-height: 1.4 !important;
  }

  .home-video-playlist-tray{
    padding: 16px 12px 20px 12px !important;
    background: rgba(10, 12, 16, 0.98) !important;
  }

  .playlist-tray-title{
    font-size: 0.98rem !important;
    color: #ffffff !important;
  }

  .playlist-tray-instruction{
    font-size: 0.76rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }

  .home-video-playlist-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  

  

  

  

  /* Catalog Layout & Filters */
  .shop-layout{
    grid-template-columns: 1fr !important;
    padding: 20px 14px !important;
    margin: 20px 0 50px 0 !important;
    gap: 20px !important;
  }

  .filter-sidebar{
    position: static !important;
    padding: 18px 14px !important;
    margin-bottom: 8px !important;
    background: #ffffff !important;
    border: 1px solid rgba(197, 155, 39, 0.25) !important;
  }

  .products-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .product-card{
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid rgba(197, 155, 39, 0.22) !important;
    box-shadow: 0 4px 14px rgba(110, 93, 71, 0.06) !important;
  }

  .product-image-container{
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: unset !important;
  }

  .product-info-panel{
    padding: 12px 10px !important;
  }

  .product-title{
    font-size: 0.95rem !important;
    color: #1f170e !important;
    font-weight: 700 !important;
  }

  .product-category{
    color: #8c6716 !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
  }

  .product-footer-row{
    padding-top: 8px !important;
    gap: 4px !important;
  }

  .product-price{
    font-size: 0.98rem !important;
    color: var(--accent-gold) !important;
    font-weight: 700 !important;
  }

  .card-qty-stepper{
    height: 28px !important;
    padding: 1px 3px !important;
    border-radius: 14px !important;
    gap: 2px !important;
  }

  .card-qty-btn{
    width: 20px !important;
    height: 20px !important;
    font-size: 0.62rem !important;
  }

  .card-qty-val{
    font-size: 0.78rem !important;
    min-width: 14px !important;
    padding: 0 1px !important;
  }

  .product-card .btn-primary{
    padding: 8px 12px !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.5px !important;
  }

  .shop-toolbar{
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    padding: 12px 14px !important;
  }

  .sort-select{
    width: 100% !important;
  }

  /* Process Cards on Mobile */
  .process-showcase{
    padding: 30px 16px !important;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }

  #home-view .process-grid, .process-grid{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding-bottom: 8px !important;
    padding-top: 4px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    width: calc(100% + 24px) !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }

  #home-view .process-grid::-webkit-scrollbar, .process-grid::-webkit-scrollbar{
    display: none !important;
  }

  #home-view .process-step-card, .process-step-card{
    flex: 0 0 76vw !important;
    max-width: 280px !important;
    min-width: 240px !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
    padding: 14px 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(197, 155, 39, 0.28) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(110, 93, 71, 0.08) !important;
  }

  .process-step-card .step-title{
    color: #1a120b !important;
    font-weight: 700 !important;
  }

  .process-step-card .step-desc{
    color: #4a3b2a !important;
    font-weight: 500 !important;
  }

  /* Custom WhatsApp Orders Banner on Mobile */
  .custom-orders-banner{
    padding: 16px 14px !important;
    margin-top: 10px !important;
    border-radius: 14px !important;
  }

  .custom-banner-overlay{
    background: rgba(36, 28, 18, 0.88) !important;
  }

  .custom-banner-tag{
    color: #f7d57f !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
  }

  .custom-banner-title{
    font-size: 1.25rem !important;
    color: #ffffff !important;
    margin-bottom: 4px !important;
    line-height: 1.25 !important;
  }

  .custom-banner-desc{
    font-size: 0.82rem !important;
    color: rgba(255, 255, 255, 0.95) !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }

  .custom-whatsapp-btn{
    padding: 9px 20px !important;
    font-size: 0.82rem !important;
  }

  /* Footer on Mobile */
  .footer{
    padding: 40px 0 20px !important;
  }

  .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

@media (max-width: 480px) {
  .products-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .product-image-container{
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: unset !important;
  }

  

  .hero-title{
    font-size: 2.1rem !important;
  }

  .btn-group{
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .btn-group a{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* Order Return & Stock Badges */
.status-badge.status-returned{
  background: rgba(230, 126, 34, 0.15) !important;
  color: #f39c12 !important;
  border: 1px solid rgba(230, 126, 34, 0.35) !important;
}

.status-badge.status-dispatched{
  background: rgba(33, 150, 243, 0.15) !important;
  color: #2196f3 !important;
  border: 1px solid rgba(33, 150, 243, 0.35) !important;
}











/* User Account & Purchases Styles - Luxury Ivory Theme */
.user-order-card{
  background: #ffffff !important;
  border: 1px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  margin-bottom: 26px !important;
  box-shadow: 0 8px 30px rgba(110, 93, 71, 0.08) !important;
  color: #1a120b !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.user-order-card:hover{
  border-color: var(--accent-gold) !important;
  box-shadow: 0 12px 36px rgba(197, 155, 39, 0.16) !important;
}

.order-address-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  margin: 18px 0;
  background: #faf7f0 !important;
  border: 1px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  color: #1a120b !important;
}

.order-timeline-box{
  background: #faf7f0 !important;
  border: 1px solid rgba(197, 155, 39, 0.3) !important;
  border-radius: 12px !important;
  padding: 20px 16px !important;
  margin: 18px 0 !important;
}

.order-item-row{
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(197, 155, 39, 0.15) !important;
}

.order-item-img-wrap{
  width: 68px;
  height: 68px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid rgba(197, 155, 39, 0.35);
  flex-shrink: 0;
  background: #f0ebe1;
}

.order-item-img-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .user-order-card{
    padding: 18px 14px !important;
  }
  .order-address-grid{
    grid-template-columns: 1fr !important;
    padding: 14px !important;
  }
  .order-address-grid > div:last-child{
    border-left: none !important;
    border-top: 1px solid rgba(197, 155, 39, 0.2) !important;
    padding-left: 0 !important;
    padding-top: 14px !important;
    margin-top: 8px !important;
  }
}

/* AI Marketing & Growth Ivory Theme */
.mkt-subtab-btn{
  background: #ffffff !important;
  color: #1a120b !important;
  border: 1.5px solid rgba(197, 155, 39, 0.4) !important;
  font-weight: 700 !important;
  transition: all 0.2s ease;
}

.mkt-subtab-btn:hover{
  background: #faf7f0 !important;
  border-color: var(--accent-gold) !important;
  color: #8c6716 !important;
}

.mkt-subtab-btn.active{
  background: linear-gradient(135deg, #c59b27, #dfb746) !important;
  color: #ffffff !important;
  border-color: #c59b27 !important;
  box-shadow: 0 4px 14px rgba(197, 155, 39, 0.35) !important;
}

#admin-tab-marketing input.form-control, #admin-tab-marketing select.form-control, #admin-tab-marketing textarea.form-control{
  background: #faf7f0 !important;
  border: 1.5px solid rgba(197, 155, 39, 0.45) !important;
  color: #1a120b !important;
  font-weight: 600 !important;
}

#admin-tab-marketing select.form-control {
  height: 42px !important;
  min-height: 42px !important;
  padding: 4px 14px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  font-size: 0.86rem !important;
}

#admin-tab-marketing input.form-control:focus, #admin-tab-marketing select.form-control:focus, #admin-tab-marketing textarea.form-control:focus{
  border-color: #c59b27 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.15) !important;
}

/* Published SEO Articles Table */
.mkt-articles-ledger-table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

.mkt-articles-ledger-table th{
  background: #faf7f0 !important;
  color: #8c6716 !important;
  font-weight: 800 !important;
  border-bottom: 2px solid rgba(197, 155, 39, 0.35) !important;
}

.mkt-article-row:hover td{
  background: #faf8f5 !important;
}

.mkt-article-row td{
  vertical-align: middle !important;
}






/* ==========================================================================
   DIVINE POURED — UNIFIED BULLETPROOF MOBILE ENGINE
   Fully compatible with Chrome, Safari iOS, Samsung Internet, and DuckDuckGo.
   ========================================================================== */

/* Universal width & overflow constraints */
html, body, .touch-mobile, .touch-mobile body{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

body{
  position: relative !important;
  overscroll-behavior-x: none !important;
}

@media (max-width: 768px) {
  html, body{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body{
    padding-bottom: 68px !important;
    position: relative !important;
    transform: none !important;
  }

  /* Disable expensive decorative animated fixed background layers on mobile */
  body::before, body::after{
    display: none !important;
    animation: none !important;
  }

  /* Ensure all sections fit cleanly within viewport without clipping or freezing native scrolling */
  .page-section, .page-section.active, #home-view, #orders-view, #admin-view, #track-order-view, #order-success-view, #info-view, .hero-section, .home-section, .home-videos-section, .trust-badges-section, .marquee-wrapper, .footer, footer{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .container{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* ----------------------------------------------------
     Mobile Sticky Header & Two-Row Clean Grid Navigation
     Row 1: Logo (Left) + Actions (Right)
     Row 2: Search Bar (Full Width)
     ---------------------------------------------------- */
  .header-nav{
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: rgba(253, 252, 249, 0.98) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    z-index: 1000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav-container{
    display: grid !important;
    grid-template-areas:
      "logo actions"
      "search search" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    height: auto !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-nav.scrolled .nav-container{
    height: auto !important;
    padding: 8px 12px !important;
  }

  .logo{
    grid-area: logo !important;
    font-size: clamp(0.96rem, 3.8vw, 1.25rem) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.2px !important;
    flex-shrink: 0 !important;
  }

  .header-nav > .container > nav{
    display: none !important;
  }

  .desktop-only-user-status:not(.is-admin-active), .user-nav-status:not(.is-admin-active){
    display: none !important;
  }

  .user-nav-status.is-admin-active{
    display: inline-flex !important;
  }

  .user-nav-status.is-admin-active .admin-chip-logout{
    display: none !important;
  }

  .nav-actions{
    grid-area: actions !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }

  .nav-actions .currency-switcher-wrap{
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .nav-actions .currency-select{
    padding: 3px 20px 3px 8px !important;
    font-size: 0.74rem !important;
    height: 30px !important;
    border-radius: 15px !important;
    background-position: right 5px center !important;
    background-size: 11px !important;
    border: 1.5px solid rgba(197, 155, 39, 0.45) !important;
    font-weight: 700 !important;
  }

  .nav-actions .icon-btn{
    min-width: 34px !important;
    min-height: 34px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 1.05rem !important;
    padding: 4px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .mobile-menu-toggle-btn{
    display: flex !important;
  }

  .search-bar-container{
    grid-area: search !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: flex !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
  }

  .search-bar-container input{
    width: 100% !important;
    min-width: 0 !important;
    font-size: 0.85rem !important;
  }

  /* ----------------------------------------------------
     Hero Visual & Centered Relative Floating Badge
     ---------------------------------------------------- */
  .hero-grid{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-content{
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-title{
    font-size: clamp(1.85rem, 6.8vw, 2.25rem) !important;
    line-height: 1.18 !important;
    margin-bottom: 8px !important;
  }

  .hero-desc{
    margin: 0 auto 16px !important;
    font-size: 0.90rem !important;
    line-height: 1.55 !important;
    color: #4a3e35 !important;
    max-width: 100% !important;
  }

  .btn-group{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .btn-group .btn, .btn-group .btn-primary, .btn-group .btn-secondary{
    padding: 10px 18px !important;
    font-size: 0.84rem !important;
    min-height: 42px !important;
    white-space: nowrap !important;
  }

  .hero-visual{
    width: 100% !important;
    max-width: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 4px auto 0 !important;
    position: relative !important;
  }

  .hero-image-wrapper{
    width: 100% !important;
    max-width: 230px !important;
    aspect-ratio: 1 !important;
    margin: 0 auto !important;
    border-radius: 18px !important;
    padding: 6px !important;
  }

  .floating-card{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    margin: 10px auto 0 !important;
    width: fit-content !important;
    max-width: 230px !important;
    box-sizing: border-box !important;
    animation: none !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(197, 155, 39, 0.38) !important;
    box-shadow: 0 6px 20px rgba(110, 93, 71, 0.10) !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
  }

  /* ----------------------------------------------------
     Showcase, Category Cards & Product Grids (Mobile Responsive)
     ---------------------------------------------------- */
  #home-view .container.home-section, #home-view .shop-catalog-outer-container{
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 6px !important;
    padding-bottom: 8px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .luxury-designer-divider{
    padding: 4px 0 8px 0 !important;
    gap: 8px !important;
  }
  
  .luxury-divider-crest .crest-medallion{
    width: 22px !important;
    height: 22px !important;
    font-size: 0.65rem !important;
  }

  .luxury-divider-crest .crest-dot{
    font-size: 0.62rem !important;
  }

  .atelier-designer-strip{
    padding: 16px 12px !important;
    border-radius: 14px !important;
    margin: 0 auto !important;
  }

  .atelier-strip-crest{
    font-size: 0.72rem !important;
    letter-spacing: 1px !important;
  }

  .atelier-pillars-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .atelier-pillar-card{
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  .pillar-icon-badge{
    width: 34px !important;
    height: 34px !important;
    font-size: 0.88rem !important;
  }

  .pillar-title{
    font-size: 0.82rem !important;
  }

  .pillar-desc{
    font-size: 0.68rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Product Card (Mobile): Unobstructed, pristine art showcase */
  .product-image-container{
    position: relative !important;
    overflow: hidden !important;
  }

  .product-badge-group{
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    display: flex !important;
    align-items: center !important;
    max-width: calc(100% - 48px) !important;
    gap: 4px !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }

  .product-seasonal-badge, .sale-badge, .stock-badge{
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 0.60rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  .wishlist-heart-btn{
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 0.78rem !important;
    z-index: 6 !important;
    background: rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(197, 155, 39, 0.25) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hide Compare, Quick View & Room overlay on mobile so the resin art is 100% visible */
  .compare-card-btn{
    display: none !important;
  }

  .product-details-overlay{
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .view-details-btn, .card-room-preview-btn{
    display: none !important;
  }

  .showcase-grid, .featured-showcase-grid, .footer-grid, .trust-badges-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .category-showcase-grid, #home-view .showcase-grid.category-showcase-grid{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #home-view .featured-showcase-grid{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #home-view .showcase-card{
    height: 155px !important;
    aspect-ratio: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  #home-view .showcase-overlay{
    padding: 10px 8px !important;
    background: linear-gradient(to top, rgba(20, 16, 12, 0.95) 0%, rgba(20, 16, 12, 0.55) 60%, transparent 100%) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #home-view .showcase-title{
    font-size: clamp(0.70rem, 2.6vw, 0.92rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.1px !important;
    margin: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  }

  #home-view .showcase-tag{
    font-size: clamp(0.50rem, 1.8vw, 0.60rem) !important;
    letter-spacing: 0.4px !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    color: var(--accent-gold) !important;
    font-weight: 700 !important;
    display: block !important;
    text-transform: uppercase !important;
  }

  .category-card, #home-view .category-card{
    height: auto !important;
    min-height: 230px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 16px 12px !important;
    background: linear-gradient(135deg, #1c1610 0%, #2e2318 100%) !important;
    border: 1.5px solid rgba(197, 155, 39, 0.45) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
  }

  .category-card::before{
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(12, 10, 8, 0.96) 0%, rgba(12, 10, 8, 0.8) 50%, rgba(12, 10, 8, 0.45) 80%, rgba(12, 10, 8, 0.25) 100%) !important;
    z-index: 1 !important;
  }

  .category-info{
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
  }

  .category-name{
    display: block !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  }

  .category-desc{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #f0ebe1 !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95) !important;
  }

  .category-link{
    color: #fce39f !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
  }

  #seasonal-showcase-section, #budget-gifts-section, #best-sellers-section, #recently-viewed-section, .curated-showcase-container{
    padding: 14px 10px !important;
    border-radius: 12px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #seasonal-showcase-section .section-header, #budget-gifts-section .section-header, #best-sellers-section .section-header, #recently-viewed-section .section-header, .curated-showcase-container .section-header{
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }

  .products-grid, .seasonal-products-grid, .mini-products-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(8px, 2.4vw, 12px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .product-image-container{
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: unset !important;
  }

  .product-info-panel{
    padding: 8px 6px 10px 6px !important;
  }

  .product-title{
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
  }

  .process-showcase{
    padding: 16px 12px !important;
    border-radius: 12px !important;
    margin: 14px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .process-showcase .section-title{
    font-size: 1.6rem !important;
  }

  .process-step-card{
    padding: 18px 16px !important;
    border-radius: 12px !important;
  }

  .shop-layout{
    grid-template-columns: 1fr !important;
    padding: 14px 10px !important;
    gap: 14px !important;
    border-radius: 14px !important;
    margin: 10px auto !important;
  }

  /* ----------------------------------------------------
     Mobile Bottom Nav & Drawer
     ---------------------------------------------------- */
  .mobile-bottom-nav{
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    box-sizing: border-box !important;
    background: #fdfcf9 !important;
    border-top: 1px solid rgba(197, 155, 39, 0.25) !important;
    z-index: 1100 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mobile-nav-overlay{
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(10, 8, 5, 0.72) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mobile-nav-drawer{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(86%, 340px) !important;
    max-width: 340px !important;
    height: 100% !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translate3d(-101%, 0, 0) !important;
    transition: transform 0.25s ease !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mobile-nav-drawer.open{
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-drawer-links, .mobile-drawer-links li, .mobile-nav-link{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #mob-link-marketing, #mob-bottom-marketing{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .page-section{
    padding-top: 10px !important;
    padding-bottom: var(--dp-space-md) !important;
    min-height: auto !important;
  }

  #home-view{
    padding-top: 0 !important;
  }

  #home-view .hero-section, .hero-section{
    padding-top: 14px !important;
    padding-bottom: 20px !important;
    min-height: auto !important;
  }

  .hero-tag{
    margin-top: 2px !important;
    margin-bottom: 8px !important;
    display: inline-flex !important;
  }

  .home-section{
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
  }

  .footer{
    padding-top: 32px !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-bottom-nav-item{
    color: #4a3e35 !important;
    min-width: 0 !important;
    flex: 1 1 0% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 2px !important;
  }

  .mobile-bottom-nav-item.active{
    color: #8c6716 !important;
    font-weight: 600 !important;
  }

  .mobile-bottom-nav-item i{
    font-size: 1.15rem !important;
    margin-bottom: 2px !important;
  }
}

/* Extra safety for smaller screens (iPhone SE, smaller Androids) */
@media (max-width: 480px) {
  .container, .shop-layout, .process-showcase, .nav-container{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .nav-container{
    padding: 8px 10px !important;
    gap: 4px !important;
  }

  .logo{
    font-size: clamp(0.92rem, 3.4vw, 1.15rem) !important;
  }

  .nav-actions{
    gap: 3px !important;
  }

  .nav-actions .icon-btn{
    min-width: 32px !important;
    min-height: 32px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 0.96rem !important;
    padding: 3px !important;
  }

  .nav-actions .currency-select{
    padding: 2px 18px 2px 6px !important;
    font-size: 0.70rem !important;
    height: 28px !important;
    background-position: right 4px center !important;
    background-size: 10px !important;
  }
}

/* ==========================================================================
   MOBILE SCROLL STABILITY FIX (Aug 2026)
   Confirmed reproducing in: Instagram in-app browser + DuckDuckGo browser.
   Both run on stripped-down/sandboxed WebView engines that either mishandle
   backdrop-filter compositing outright or throttle GPU layers hard for
   privacy/sandboxing reasons. Combined with a permanent will-change layer
   on the marquee, this blows their compositing budget mid-scroll, so the
   renderer drops/flattens layers and paints blank until it recomposites -
   that's the flicker / "content goes missing while scrolling" behavior.
   The header/mobile-nav/ambient-orbs were already fixed for this earlier
   (see "prevent DuckDuckGo / mobile browser jitter" above); this block
   extends the same fix to every remaining storefront element that still
   carries backdrop-filter. Given the confirmed browsers, backdrop-filter
   itself is treated as the culprit here (not just "reduce it") - it is
   fully removed on mobile, with background opacity bumped on the couple
   of elements that were leaning on the blur for legibility.
   ========================================================================== */
@media (max-width: 900px) {
  .floating-card, .process-showcase, .shop-layout, .cart-drawer, .cart-drawer-overlay, .toast, .modal-overlay, .home-video-splash-overlay, .video-theatre-nav-btn, .video-sound-toggle-btn, .video-fullscreen-toggle-btn, .video-theatre-action-btn, .order-success-hero-card{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* These three lean on --glass-bg (only 0.75 alpha) plus blur for a
     frosted-glass look. Without the blur, bump the background itself to
     stay solid/legible instead of looking see-through. */
  .floating-card, .process-showcase, .shop-layout{
    background: rgba(247, 244, 235, 0.96) !important;
  }

  /* Marquee runs a continuous transform animation for the entire time the
     page is open. Declaring will-change permanently (rather than only
     while animating) keeps a compositor layer resident for the whole
     session, competing with every other layer for GPU memory on scroll. */
  .marquee-content{
    will-change: auto !important;
  }

  /* Let the browser skip layout/paint work for off-screen cards instead of
     keeping every product/category/showcase card fully painted at all
     times. This is the single biggest lever for reducing paint work done
     per scroll frame, which is what's timing out on weaker mobile
     compositors and producing the blank frames. */
  .showcase-card, .category-card, .product-card, .floating-card{
    content-visibility: visible !important;
    contain: none !important;
  }

  /* Trim blur radius on remaining decorative shadows so any browser that
     does still composite them has less to render per frame. */
  .showcase-card, .category-card{
    box-shadow: 0 4px 14px rgba(110, 93, 71, 0.10) !important;
  }
}

/* ==========================================================================
   MOBILE RESPONSIVENESS & HORIZONTAL OVERFLOW PREVENTION (STACK VERTICALLY)
   ========================================================================== */

/* Strict viewport constraints to stop horizontal scroll blowout */
html, body{
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

#admin-view, .admin-dashboard, .admin-content-area, .page-section{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Text and Monospace link wrapping */
.mkt-card-link, .admin-title-group p, .admin-table td, .form-control, code, pre{
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Shared classes for responsive stacking */
.policies-layout-grid{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}

.seo-generator-grid{
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 24px;
}



.admin-grid-form-3{
  display: grid;
  grid-template-columns: 1.5fr 2fr auto;
  gap: 16px;
  align-items: flex-end;
}

.admin-grid-form-4{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: flex-end;
}

.orders-filter-bar{
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

/* Catalog Actions Layout & Button Classes */
.catalog-actions-wrap{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.catalog-action-buttons-grid{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.catalog-btn-add{
  padding: 8px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #1a120b !important;
  background: linear-gradient(135deg, #f3cf65 0%, #c59b27 100%) !important;
  border: 1px solid #a67c14 !important;
  box-shadow: 0 2px 8px rgba(197, 155, 39, 0.25) !important;
}

.catalog-btn-festival{
  padding: 8px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #c59b27 0%, #d32f2f 100%) !important;
  border: 1px solid #b71c1c !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(211, 47, 47, 0.25) !important;
}

.catalog-btn-optimize{
  padding: 8px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%) !important;
  border: 1px solid #43a047 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25) !important;
}

.catalog-btn-categories{
  padding: 8px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  background: #ffffff !important;
  border: 1.5px solid var(--accent-gold) !important;
  color: #8c6716 !important;
  box-shadow: 0 2px 6px rgba(110, 93, 71, 0.06) !important;
}

.catalog-btn-save-stock{
  padding: 8px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  background: #ffffff !important;
  border: 1.5px solid #1a120b !important;
  color: #1a120b !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.mkt-mobile-subtab-dropdown-wrap{
  display: none;
}

/* Tablet & Mobile Breakpoints */
@media (max-width: 900px) {
  .policies-layout-grid, .seo-generator-grid{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

@media (max-width: 768px) {
  /* Admin Header Stacking */
  .admin-dashboard{
    gap: 24px !important;
    padding-bottom: 60px !important;
    overflow-x: hidden !important;
  }

  .admin-header{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .admin-title-group{
    width: 100% !important;
  }

  .admin-title-group h2{
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }

  .admin-title-group p{
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }

  .admin-header .btn-group{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .admin-header .btn-group button, .admin-header .btn-group .btn-primary, .admin-header .btn-group .btn-secondary{
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 18px !important;
    font-size: 0.88rem !important;
  }

  /* Admin Controls Bar (Catalog, Marketing, Orders) */
  .admin-controls-bar{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .admin-controls-bar > div:first-child{
    width: 100% !important;
  }

  /* Catalog Actions Wrap & 2-Column Button Grid on Mobile */
  .catalog-actions-wrap{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .catalog-action-buttons-grid{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .catalog-action-buttons-grid button, .catalog-action-buttons-grid .btn-primary, .catalog-action-buttons-grid .btn-secondary{
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 8px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    min-height: 42px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .catalog-action-buttons-grid .catalog-btn-save-stock{
    grid-column: 1 / -1 !important;
  }

  .search-admin, .search-input-wrapper.search-admin{
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Marketing Subtabs Navigation - Mobile Dropdown & 2-Column Grid */
  .mkt-mobile-subtab-dropdown-wrap{
    display: block !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  .mkt-mobile-subtab-select{
    width: 100% !important;
    background: #faf7f0 !important;
    border: 1.5px solid var(--accent-gold) !important;
    color: #1a120b !important;
    font-weight: 700 !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
  }

  .marketing-subtabs-nav{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
    margin-bottom: 16px !important;
  }

  .marketing-subtabs-nav::-webkit-scrollbar{
    display: none !important;
  }

  .mkt-subtab-btn{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 8px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 42px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .mkt-btn-span-full{
    grid-column: 1 / -1 !important;
  }

  /* Marketing Approval Queue Cards */
  .mkt-queue-card{
    padding: 16px !important;
    overflow: hidden !important;
  }

  .mkt-card-footer{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .mkt-card-link{
    width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    font-size: 0.78rem !important;
  }

  .mkt-action-btn-group{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .mkt-action-btn-group button, .mkt-action-btn-group .btn-primary, .mkt-action-btn-group .btn-secondary{
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 18px !important;
    font-size: 0.88rem !important;
    min-height: 44px !important;
  }

  /* Form Grids collapse into vertical stack */
  .admin-grid-form-3, .admin-grid-form-4{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .admin-grid-form-3 button, .admin-grid-form-4 button{
    width: 100% !important;
    justify-content: center !important;
    height: 42px !important;
  }

  /* Orders Date Filter Bar */
  .orders-filter-bar{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .orders-filter-bar > div{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  .orders-filter-bar input[type="date"]{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .orders-filter-bar button{
    width: 100% !important;
    justify-content: center !important;
  }

  /* Table Container */
  .table-wrapper{
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
  }

  .admin-table th, .admin-table td{
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
  }

  /* Admin stats cards */
  .admin-stats-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Universal Single-Column Collapse for Admin Grids, Cards, and Side-by-Side Inputs */
  .admin-settings-card-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .admin-settings-card-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 / -1 !important;
    box-sizing: border-box !important;
  }

  .admin-settings-card-footer {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  /* Featured 3-Column Showcase card specific clean mobile stacking & visual separators */
  #settings-block-featured-1,
  .featured-showcase-card-1 {
    border-right: none !important;
    padding-right: 0 !important;
    border-bottom: 1px solid var(--glass-border) !important;
    padding-bottom: 22px !important;
    margin-bottom: 8px !important;
  }

  #settings-block-featured-2,
  .featured-showcase-card-2 {
    padding-left: 0 !important;
    border-bottom: 1px solid var(--glass-border) !important;
    padding-bottom: 22px !important;
    margin-bottom: 8px !important;
  }

  #settings-block-featured-3,
  .featured-showcase-card-3 {
    grid-column: 1 / -1 !important;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Collapse ALL multi-column inline grids across tabs, cards, modals, and workspaces */
  .featured-sub-grid,
  .admin-tab-content [style*="grid-template-columns"],
  .modal-content [style*="grid-template-columns"],
  .modal-card [style*="grid-template-columns"],
  .modal-overlay [style*="grid-template-columns"],
  .admin-settings-card [style*="grid-template-columns"],
  .admin-dashboard [style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    grid-template-columns: 1fr !important;
  }

  .featured-sub-grid > *,
  .admin-tab-content [style*="grid-template-columns"] > *,
  .modal-content [style*="grid-template-columns"] > *,
  .modal-card [style*="grid-template-columns"] > *,
  .modal-overlay [style*="grid-template-columns"] > *,
  .admin-settings-card [style*="grid-template-columns"] > *,
  .admin-dashboard [style*="grid-template-columns"] > * {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Full-width inputs with comfortable padding & zero character clipping */
  .admin-settings-card input.form-control,
  .admin-settings-card select.form-control,
  .admin-settings-card textarea.form-control,
  .admin-tab-content input.form-control,
  .admin-tab-content select.form-control,
  .admin-tab-content textarea.form-control,
  .modal-card input.form-control,
  .modal-card select.form-control,
  .modal-card textarea.form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    padding: 10px 14px !important;
  }

  .admin-settings-card {
    padding: 18px 14px !important;
    margin-bottom: 18px !important;
  }

  /* Responsive Modals */
  

  /* ==========================================================================
     MOBILE DEDICATED AUTH SCREEN (Full-Screen Experience)
     ========================================================================== */
  #auth-modal{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: none !important;
  }

  #auth-modal.open{
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #auth-modal .modal-card, #auth-modal .checkout-modal-card{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    margin: 0 !important;
    transform: none !important;
    overflow-y: visible !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 0 80px 0 !important;
  }

  #close-auth-modal{
    display: none !important;
  }

  .mobile-auth-topbar{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    background: #ffffff !important;
    border-bottom: 1.5px solid rgba(197, 155, 39, 0.3) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mobile-auth-back-btn{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: none !important;
    border: none !important;
    color: #1a120b !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    padding: 6px 8px !important;
  }

  .mobile-auth-brand{
    font-family: var(--font-heading) !important;
    font-size: 1.05rem !important;
    color: var(--accent-gold) !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
  }

  .mobile-auth-close-icon{
    background: none !important;
    border: none !important;
    font-size: 1.7rem !important;
    line-height: 1 !important;
    color: #1a120b !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
  }

  #auth-modal .checkout-body{
    padding: 12px 18px 40px 18px !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #auth-modal .form-control{
    font-size: 15px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  #auth-modal .btn-primary, #auth-modal .btn-secondary{
    min-height: 48px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
  }

  /* ==========================================================================
     MOBILE CATALOGUE INVENTORY CARD VIEW (Zero Horizontal Scroll)
     ========================================================================== */
  #admin-tab-catalog .table-wrapper{
    overflow-x: visible !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .admin-inventory-table{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  .admin-inventory-table thead{
    display: none !important;
  }

  .admin-inventory-table tbody{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .admin-inventory-row{
    display: grid !important;
    grid-template-columns: 85px 1fr !important;
    gap: 12px 14px !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    box-shadow: 0 4px 16px rgba(110, 93, 71, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .admin-inventory-row td{
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .admin-td-image{
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .admin-td-image img, .admin-inventory-row .admin-table-img{
    width: 85px !important;
    height: 85px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    border: 1px solid rgba(197, 155, 39, 0.3) !important;
  }

  .admin-td-info{
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  .admin-td-info .admin-table-title{
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  .admin-td-cat{
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .admin-cat-pill{
    background: #faf7f0 !important;
    border: 1px solid rgba(197, 155, 39, 0.3) !important;
    color: #1a120b !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
  }

  .admin-mobile-field-label{
    display: inline-block !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
  }

  .admin-td-price{
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 10px !important;
    border-top: 1px dashed rgba(197, 155, 39, 0.25) !important;
  }

  .admin-price-wrapper{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .admin-price-current{
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--accent-gold) !important;
  }

  .admin-price-slashed{
    text-decoration: line-through !important;
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
  }

  .admin-td-stock{
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: #faf7f0 !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(197, 155, 39, 0.2) !important;
  }

  .stock-inline-control{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: fit-content !important;
    max-width: 100% !important;
  }

  .stock-inline-control .stock-qty-num-input{
    width: 58px !important;
    min-width: 58px !important;
    text-align: center !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    padding: 4px !important;
    flex: none !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    box-sizing: border-box !important;
  }

  .admin-save-stock-label{
    display: inline !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    margin-left: 4px !important;
  }

  .admin-save-single-stock-btn{
    width: auto !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #2e7d32 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
  }

  .desktop-action-btns{
    display: none !important;
  }

  /* Force action cell to span full width of mobile card and override desktop table constraints */
  .admin-inventory-table td.admin-td-actions,
  .admin-inventory-row td.admin-td-actions,
  .admin-td-actions{
    grid-column: 1 / -1 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
  }

  .admin-mobile-card-actions{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .admin-card-edit-btn{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #1f4b52 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    border: 1px solid #1f4b52 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(31, 75, 82, 0.28) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
  }

  .admin-card-edit-btn:hover,
  .admin-card-edit-btn:active{
    background: #15383d !important;
    border-color: #15383d !important;
    color: #ffffff !important;
  }

  .admin-card-edit-btn i{
    font-size: 0.92rem !important;
    color: #ffffff !important;
  }

  .admin-card-edit-btn span{
    color: #ffffff !important;
    white-space: nowrap !important;
  }

  .admin-card-delete-btn{
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff1f0 !important;
    color: #dc2626 !important;
    border: 1.5px solid rgba(220, 38, 38, 0.25) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 1.05rem !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
  }

  .admin-card-delete-btn:hover,
  .admin-card-delete-btn:active{
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
  }

  /* Remove thick colored webkit scrollbars on mobile so thick red bar is gone */
  ::-webkit-scrollbar{
    width: 0px !important;
    height: 0px !important;
    display: none !important;
  }
  *{
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  /* ==========================================================================
     MOBILE DEDICATED CATALOGUE EDIT PAGE (No Floating Inner-Scroll Popup)
     ========================================================================== */
  .flex-row-gap{
    flex-direction: column !important;
    gap: 12px !important;
  }

  #product-form-modal{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #faf7f0 !important;
    z-index: 99999 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: none !important;
  }

  #product-form-modal.open{
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #product-form-modal .modal-card, #product-form-modal .checkout-modal-card{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    margin: 0 !important;
    transform: none !important;
    display: block !important;
    padding: 0 0 110px 0 !important;
    overflow-y: visible !important;
  }

  #close-product-form-modal, #product-form-modal .checkout-steps-nav{
    display: none !important;
  }

  /* ==========================================================================
     MOBILE ORDERS LEDGER CARD VIEW (Zero Horizontal Scroll & Clean Hierarchy)
     ========================================================================== */
  #admin-tab-orders .table-wrapper{
    overflow-x: visible !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
  }

  #admin-tab-orders table.admin-table{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  #admin-tab-orders table.admin-table thead{
    display: none !important;
  }

  #admin-pending-orders-list, #admin-completed-orders-list{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .admin-order-row{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 4px 16px rgba(110, 93, 71, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .admin-order-row td{
    display: block !important;
    padding: 2px 0 !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .admin-order-row td::before{
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8c7355;
    margin-bottom: 3px;
    display: block;
  }

  .admin-order-row td.admin-order-td-ref::before{
    display: none !important;
  }

  .admin-order-mobile-header{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding-bottom: 8px !important;
    border-bottom: 1px dashed rgba(197, 155, 39, 0.25) !important;
    margin-bottom: 4px !important;
  }

  .admin-order-ref-pill{
    font-family: monospace !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    color: #1a120b !important;
    background: #faf7f0 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(197, 155, 39, 0.35) !important;
  }

  .admin-order-status-badge-inline{
    display: inline-block !important;
  }

  .admin-order-status-desktop-badge{
    display: none !important;
  }

  .admin-order-collector-name{
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    color: #1a120b !important;
  }

  .admin-order-collector-email{
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
  }

  .admin-order-collector-phone{
    font-size: 0.85rem !important;
    margin-top: 2px !important;
  }

  .admin-order-td-actions::before{
    display: none !important;
  }

  .admin-order-actions-wrap{
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 6px !important;
    padding-top: 12px !important;
    border-top: 1px dashed rgba(197, 155, 39, 0.25) !important;
  }

  .admin-order-actions-wrap button{
    flex: 1 !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
  }

  .admin-order-status-date-wrap{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 6px !important;
    padding-top: 10px !important;
    border-top: 1px dashed rgba(197, 155, 39, 0.25) !important;
  }

  /* ==========================================================================
     MOBILE CUSTOMER REVIEWS CARD VIEW (Zero Horizontal Scroll & Clean Hierarchy)
     ========================================================================== */
  #admin-tab-reviews .table-wrapper{
    overflow-x: visible !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #admin-tab-reviews table.admin-table{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  #admin-tab-reviews table.admin-table thead{
    display: none !important;
  }

  #admin-reviews-list{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .admin-review-row{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 4px 16px rgba(110, 93, 71, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .admin-review-row td{
    display: block !important;
    padding: 2px 0 !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .admin-review-row td::before{
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8c7355;
    margin-bottom: 3px;
    display: block;
  }

  .admin-review-td-product::before{
    display: none !important;
  }

  .admin-review-td-actions::before{
    display: none !important;
  }

  .admin-review-td-actions .action-btns{
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 4px !important;
    padding-top: 10px !important;
    border-top: 1px dashed rgba(197, 155, 39, 0.25) !important;
  }

  .admin-review-td-actions .btn-icon-sm{
    flex: 1 !important;
    min-height: 42px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
  }

  .mobile-review-btn-text{
    display: inline !important;
  }

  /* ==========================================================================
     MOBILE ACTIVITY LOG MULTI-COLUMN TABLE VIEW (Clean, Responsive & Multi-Column)
     ========================================================================== */
  #admin-tab-traffic .table-wrapper,
  .admin-traffic-table-card{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(110, 93, 71, 0.05) !important;
  }

  #admin-tab-traffic table.admin-table,
  .admin-traffic-table-card table.admin-table{
    display: table !important;
    width: 100% !important;
    min-width: 480px !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
  }

  #admin-tab-traffic table.admin-table thead,
  .admin-traffic-table-card table.admin-table thead{
    display: table-header-group !important;
    background: rgba(26, 77, 92, 0.06) !important;
  }

  #admin-tab-traffic table.admin-table thead th,
  .admin-traffic-table-card table.admin-table thead th{
    display: table-cell !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #6e5d47 !important;
    padding: 10px 14px !important;
    white-space: nowrap !important;
    border-bottom: 1.5px solid rgba(197, 155, 39, 0.28) !important;
    letter-spacing: 0.4px !important;
  }

  #admin-traffic-list{
    display: table-row-group !important;
    width: auto !important;
  }

  .admin-traffic-row{
    display: table-row !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(197, 155, 39, 0.12) !important;
    transition: background 0.15s ease !important;
  }

  .admin-traffic-row:nth-child(even){
    background: #faf8f5 !important;
  }

  .admin-traffic-row td{
    display: table-cell !important;
    padding: 10px 14px !important;
    vertical-align: middle !important;
    font-size: 0.82rem !important;
    border-bottom: 1px solid rgba(197, 155, 39, 0.12) !important;
    white-space: nowrap !important;
  }

  .admin-traffic-row td::before{
    display: none !important;
    content: none !important;
  }

  .traffic-toolbar{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .traffic-toolbar > div{
    width: 100% !important;
    justify-content: space-between !important;
  }
}

/* ==========================================================================
   LUXURY SUITE: 6 HIGH-VALUE VALUE ADDITIONS
   1. Multi-Currency Engine
   2. Low-Stock Urgency FOMO Badges
   3. 1-Tap WhatsApp Direct Buy & Reviews
   4. Floating & Modal 3-Click Gift Finder Wizard
   5. Live Room Visualizer ("See It In a Room")
   6. Restock & Admin Inventory Enhancements
   ========================================================================== */

/* Multi-Currency Dropdown */
.currency-switcher-wrap{
  display: inline-flex;
  align-items: center;
  position: relative;
}

.currency-select{
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(197, 155, 39, 0.4);
  border-radius: 20px;
  padding: 5px 28px 5px 12px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a120b;
  cursor: pointer;
  outline: none;
  transition: all 0.25s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c59b27'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.currency-select:hover, .currency-select:focus{
  border-color: #c59b27;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(197, 155, 39, 0.22);
}



/* Low-Stock Urgency FOMO Badge */
.stock-badge.low-fomo{
  background: linear-gradient(135deg, #e65100, #d84315) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 8px rgba(230, 81, 0, 0.45) !important;
  animation: urgentPulse 1.8s infinite ease-in-out;
}

@keyframes urgentPulse {
  0%, 100%{
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(230, 81, 0, 0.45);
  }
  50%{
    transform: scale(1.04);
    box-shadow: 0 4px 14px rgba(230, 81, 0, 0.75);
  }
}

/* 1-Tap WhatsApp Direct Buy Button */
.btn-whatsapp-direct{
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #ffffff !important;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
  text-decoration: none;
}

.btn-whatsapp-direct:hover{
  background: linear-gradient(135deg, #22bf5b, #0f7a6e);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
  color: #ffffff !important;
}

/* Room Visualizer Trigger Button */
.btn-room-visualizer{
  background: linear-gradient(135deg, rgba(26, 77, 92, 0.08), rgba(197, 155, 39, 0.12));
  border: 1px solid rgba(197, 155, 39, 0.45);
  color: #1a4d5c;
  border-radius: 8px;
  font-weight: 700;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-room-visualizer:hover{
  background: rgba(197, 155, 39, 0.2);
  transform: translateY(-2px);
  border-color: #c59b27;
  color: #0d2b34;
}

/* Quick Restock Pill in Admin */
.btn-restock-pill{
  background: #fbf5e6 !important;
  border: 1.5px solid #d4af37 !important;
  color: #8c6716 !important;
  border-radius: 5px !important;
  padding: 4px 9px !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.btn-restock-pill:hover{
  background: #c59b27 !important;
  color: #ffffff !important;
  border-color: #c59b27 !important;
  box-shadow: 0 2px 6px rgba(197, 155, 39, 0.3);
}

.btn-whatsapp-review{
  transition: all 0.2s ease;
}

.btn-whatsapp-review:hover{
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Floating Gift Finder Launcher */
.floating-gift-finder-btn{
  position: fixed;
  bottom: 92px;
  right: 22px;
  z-index: 995;
  background: linear-gradient(135deg, #1a4d5c, #0e2e38);
  color: #f7ede2;
  border: 1.5px solid #dfb75c;
  border-radius: 30px;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  box-shadow: 0 8px 24px rgba(26, 77, 92, 0.35);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.floating-gift-finder-btn:hover{
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 28px rgba(197, 155, 39, 0.4);
  color: #ffffff;
}

.floating-gift-finder-btn i{
  color: #f0c05a;
  animation: sparkleTwinkle 2.2s infinite ease-in-out;
}

@keyframes sparkleTwinkle {
  0%, 100%{ transform: scale(1) rotate(0deg); opacity: 1; }
  50%{ transform: scale(1.25) rotate(18deg); opacity: 0.85; }
}

/* Gift Finder Wizard Option Cards */
.gift-choice-card{
  background: #faf7f0;
  border: 1.5px solid rgba(197, 155, 39, 0.25);
  border-radius: 12px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.22s ease;
  font-family: var(--font-body);
  outline: none;
}

.gift-choice-card:hover{
  transform: translateY(-3px);
  border-color: #c59b27;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(197, 155, 39, 0.18);
}

.gift-choice-icon{
  font-size: 1.7rem;
  color: #c59b27;
  margin-bottom: 2px;
}

.gift-choice-card strong{
  font-size: 0.88rem;
  color: #1a120b;
}

.gift-choice-card span{
  font-size: 0.72rem;
  color: #6e5d47;
}

/* Room Visualizer Tabs & Backdrops */
.room-scene-btn{
  background: #faf7f0;
  border: 1px solid rgba(197, 155, 39, 0.35);
  border-radius: 20px;
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: #5c4a37;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.room-scene-btn.active, .room-scene-btn:hover{
  background: #1a4d5c;
  color: #ffffff;
  border-color: #1a4d5c;
}

.room-scene-btn.active i{
  color: #dfb75c;
}

.scale-btn{
  transition: all 0.2s ease;
}

.scale-btn:hover{
  background: #c59b27 !important;
  color: #ffffff !important;
}

/* Room Canvas Backdrops */
.room-backdrop.living-backdrop{
  background: radial-gradient(circle at 50% 25%, rgba(255, 248, 225, 0.6) 0%, rgba(240, 235, 224, 0.95) 75%),
              linear-gradient(180deg, #ede6dc 0%, #ded5c6 72%, #3a2a1d 72%, #261b12 75%, #18110b 100%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.08);
}

.room-backdrop.mandir-backdrop{
  background: radial-gradient(circle at 50% 30%, rgba(255, 215, 0, 0.28) 0%, rgba(45, 25, 10, 0.92) 80%),
              linear-gradient(180deg, #2b1708 0%, #1a0e05 70%, #52341b 70%, #3d230e 74%, #1f1106 100%);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.4);
}

.room-backdrop.door-backdrop{
  background: radial-gradient(circle at 50% 20%, rgba(255, 236, 179, 0.4) 0%, rgba(40, 48, 54, 0.95) 85%),
              linear-gradient(180deg, #2c3539 0%, #1e2428 75%, #14181a 100%);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.35);
}

.room-backdrop.dining-backdrop{
  background: radial-gradient(circle at 50% 22%, rgba(255, 245, 220, 0.45) 0%, rgba(58, 43, 33, 0.94) 80%),
              linear-gradient(180deg, #423225 0%, #2f2319 70%, #1e150f 70%, #110b07 100%);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.35);
}

.room-backdrop.bedroom-backdrop{
  background: radial-gradient(circle at 50% 25%, rgba(255, 250, 240, 0.5) 0%, rgba(220, 225, 222, 0.92) 75%),
              linear-gradient(180deg, #e4e8e5 0%, #cfd5d0 70%, #4a4038 70%, #2f2823 75%, #1f1a16 100%);
  box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.1);
}

.room-surface-overlay{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.02) 25%, transparent 100%);
}

.floating-art-element{
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55));
}

@media (max-width: 768px) {
  .floating-gift-finder-btn{
    bottom: 84px;
    right: 14px;
    padding: 8px 14px;
    font-size: 0.76rem;
  }
  
  .gift-options-grid{
    grid-template-columns: 1fr !important;
  }

  #gift-finder-results-grid{
    grid-template-columns: 1fr !important;
  }

  .room-canvas-stage{
    height: 280px !important;
  }
}

/* Modal Layering & Stacking Context Fixes */
#room-visualizer-modal{
  z-index: 2500 !important;
}

#room-visualizer-modal.open{
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
}

#room-visualizer-modal .room-visualizer-card{
  z-index: 2501 !important;
  max-width: 820px !important;
  width: 95% !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
}

#gift-finder-modal{
  z-index: 2400 !important;
}

#gift-finder-modal.open{
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
}

#gift-finder-modal .gift-finder-card{
  z-index: 2401 !important;
  max-width: 680px !important;
  width: 95% !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
}

/* Direct Room Preview on Product Cards */
.card-room-preview-btn{
  background: rgba(255, 255, 255, 0.95);
  color: #1a4d5c;
  border: 1px solid rgba(197, 155, 39, 0.45);
  border-radius: 6px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.22s ease;
  margin-left: 6px;
  font-size: 0.95rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.card-room-preview-btn:hover{
  background: #1a4d5c;
  color: #ffffff;
  border-color: #1a4d5c;
  transform: scale(1.1);
  box-shadow: 0 6px 14px rgba(26, 77, 92, 0.3);
}


/* ==========================================================================
   DIVINE POURED — MOBILE RENDER HOTFIX
   Scope: header geometry, admin quick-selector collision, product-card badges.
   CSS ONLY. Do not remove or hide functional product/card controls.
   ========================================================================== */

@media (max-width: 768px) {

  /* ------------------------------------------------------------------------
     1. ADMIN: do not place a native <select> over the section-button grid.
     The native option list is browser-owned and will visually float over the
     grid. The existing .admin-sidebar-menu remains the functional selector.
     ------------------------------------------------------------------------ */
  .admin-mobile-tab-dropdown-wrap{
    display: none !important;
  }

  .admin-sidebar{
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .admin-sidebar-menu{
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* ------------------------------------------------------------------------
     2. MOBILE HEADER: reserve a real minimum logo column instead of allowing
     the logo to collapse behind the fixed-width action group.
     ------------------------------------------------------------------------ */
  .nav-container{
    grid-template-columns: minmax(105px, 1fr) auto !important;
    column-gap: 6px !important;
    overflow: visible !important;
  }

  .nav-container .logo{
    min-width: 105px !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: clamp(0.92rem, 3.6vw, 1.18rem) !important;
    letter-spacing: 0 !important;
  }

  .nav-actions{
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
  }

  .nav-actions .currency-switcher-wrap{
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
  }

  .nav-actions .currency-select{
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 30px !important;
    padding: 2px 16px 2px 6px !important;
    font-size: 0.70rem !important;
    background-position: right 4px center !important;
    background-size: 9px !important;
  }

  .nav-actions .icon-btn{
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 2px !important;
    font-size: 0.94rem !important;
  }

  /* Keep the four action controls inside the action column. */
  .nav-actions > *{
    flex-shrink: 0 !important;
  }

  /* ------------------------------------------------------------------------
     3. PRODUCT CARD: physically separate badge stack from bottom action.
     Badges occupy only the top-left zone; View Canvas owns the bottom zone.
     ------------------------------------------------------------------------ */
  .product-image-container{
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  .product-badge-group{
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    max-width: calc(100% - 48px) !important;
    pointer-events: none !important;
  }

  .product-seasonal-badge, .sale-badge, .stock-badge{
    position: relative !important;
    z-index: 11 !important;
    font-size: 0.60rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .wishlist-heart-btn{
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    z-index: 15 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(197, 155, 39, 0.25) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }

}

/* Very small phones: preserve logo readability while keeping all actions. */
@media (max-width: 375px) {
  .nav-container{
    grid-template-columns: minmax(102px, 1fr) auto !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    column-gap: 4px !important;
  }

  .nav-container .logo{
    min-width: 102px !important;
    font-size: 0.92rem !important;
  }

  .nav-actions .currency-switcher-wrap, .nav-actions .currency-select{
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }

  .nav-actions .icon-btn{
    flex-basis: 29px !important;
    width: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    font-size: 0.90rem !important;
  }
}



/* ==========================================================================
   DIVINE POURED — MOBILE PRODUCT PRESENTATION + BOTTOM NAV FINAL FIX
   Applied after the existing mobile rules so these values are authoritative.
   ========================================================================== */

@media (max-width: 768px) {

  /* Keep the complete bottom navigation on the white surface, including
     the device safe-area on phones with a home indicator. */
  .mobile-bottom-nav{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 8px env(safe-area-inset-bottom, 0px) !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-top: 1px solid rgba(197, 155, 39, 0.25) !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.07) !important;
    z-index: 1100 !important;
  }

  .mobile-bottom-nav-item{
    height: 56px !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
  }

  /* Product cards: give the artwork more visual priority without removing
     the category, title, price, discount or cart control. */
  .products-grid, .seasonal-products-grid, .mini-products-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .product-card{
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .product-image-container{
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .product-image-container > a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  .product-image{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .product-info-panel{
    min-width: 0 !important;
    padding: 9px 8px 10px !important;
  }

  .product-category{
    display: block !important;
    min-width: 0 !important;
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .product-title{
    min-width: 0 !important;
    min-height: 0 !important;
    margin-bottom: 3px !important;
    font-size: 0.82rem !important;
    line-height: 1.22 !important;
    -webkit-line-clamp: 2 !important;
  }

  .product-footer-row{
    min-width: 0 !important;
    width: 100% !important;
    gap: 5px !important;
    align-items: flex-end !important;
    padding-top: 7px !important;
  }

  .product-price-block{
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .product-price{
    white-space: nowrap !important;
    font-size: 0.94rem !important;
    line-height: 1.15 !important;
  }

  .product-price-sub{
    min-width: 0 !important;
    gap: 2px 6px !important;
    font-size: 0.68rem !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  .original-price-slashed{
    font-size: 0.68rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .discount-badge{
    flex: 0 0 auto !important;
    font-size: 0.60rem !important;
    padding: 1px 4px !important;
    white-space: nowrap !important;
  }

  .product-card-cart-action{
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 30px !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .add-cart-mini{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
}

@media (max-width: 375px) {

  /* Preserve the larger artwork even on very small phones while keeping
     the information column usable. */
  .product-image-container{
    aspect-ratio: 4 / 5 !important;
  }

  .product-info-panel{
    padding: 8px 7px 9px !important;
  }

  .product-title{
    font-size: 0.78rem !important;
  }

  .product-price{
    font-size: 0.90rem !important;
  }

  .add-cart-mini{
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
  }
  .product-card-cart-action{
    width: auto !important;
    min-width: 29px !important;
    max-width: none !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   DIVINE POURED — MOBILE STABILITY PATCH v4
   Purpose: prevent regression of mobile header, admin selector, product-card,
   currency control, and bottom-navigation overlap.
   This block is intentionally LAST so it is the authoritative mobile layer.
   ========================================================================== */

@media (max-width: 768px) {

  /* ---------- GLOBAL MOBILE GEOMETRY ---------- */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  body {
    margin: 0 !important;
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
  }

  img, video, iframe, canvas {
    max-width: 100% !important;
  }

  /* ---------- MOBILE HEADER: NEVER LET LOGO HIDE BEHIND INR/ACTIONS ---------- */
  .header-nav,
  .nav-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .nav-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "logo actions"
      "search search" !important;
    column-gap: 5px !important;
    row-gap: 6px !important;
    padding: 8px 10px !important;
    overflow: visible !important;
  }

  .nav-container .logo,
  .logo {
    grid-area: logo !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(0.82rem, 4vw, 1.08rem) !important;
    letter-spacing: 0 !important;
  }

  .nav-actions {
    grid-area: actions !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }

  .nav-actions > * {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  .nav-actions .currency-switcher-wrap,
  .nav-actions .currency-select {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }

  .nav-actions .currency-select {
    height: 30px !important;
    padding: 2px 14px 2px 5px !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    background-position: right 3px center !important;
    background-size: 8px !important;
  }

  .nav-actions .icon-btn {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 2px !important;
    flex: 0 0 30px !important;
  }

  .search-bar-container {
    grid-area: search !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* ---------- VERY SMALL PHONES ---------- */

  /* ---------- ADMIN MOBILE SELECTOR: ONE CONTROL SYSTEM ONLY ---------- */
  .admin-mobile-tab-dropdown-wrap,
  .admin-mobile-tab-dropdown,
  #admin-mobile-tab-dropdown {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .admin-sidebar {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .admin-sidebar-menu {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .admin-sidebar-menu > * {
    position: relative !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .admin-sidebar-menu button,
  .admin-sidebar-menu a {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Prevent native/select menus from creating a second visual layer over
     Overview, Stats, or the following admin options. */
  #admin-view select,
  .admin-dashboard select.admin-mobile-tab-dropdown,
  .admin-mobile-tab-dropdown-wrap select {
    max-width: 100% !important;
  }

  /* ---------- PRODUCT GRID ---------- */
  .products-grid,
  .seasonal-products-grid,
  .mini-products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .product-card,
  .product-card * {
    min-width: 0 !important;
  }

  .product-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .product-image-container {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  .product-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .product-details-overlay,
  .product-card .product-details-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .product-info-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 8px 7px 9px !important;
    overflow: hidden !important;
  }

  .product-category,
  .product-title,
  .product-price-block,
  .product-footer-row {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .product-category {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
  }

  .product-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    font-size: 0.80rem !important;
    line-height: 1.22 !important;
    margin-bottom: 3px !important;
  }

  .product-footer-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 4px !important;
    padding-top: 6px !important;
    overflow: visible !important;
  }

  .product-price-block {
    flex: 1 1 auto !important;
    overflow: visible !important;
    min-width: 0 !important;
  }

  .product-price,
  .original-price-slashed {
    white-space: nowrap !important;
  }

  .product-price {
    font-size: 0.90rem !important;
    line-height: 1.15 !important;
  }

  .original-price-slashed {
    font-size: 0.68rem !important;
    color: #4b443c !important;
    text-decoration: line-through !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
  }

  .product-price-sub {
    display: flex !important;
    align-items: center !important;
    gap: 2px 5px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  .discount-badge {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    color: #0d4621 !important;
    background: #e6f4ea !important;
    border: 1px solid #a3d9b8 !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
  }

  .product-card-cart-action {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 29px !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .add-cart-mini {
    flex: 0 0 29px !important;
    width: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;
  }

  /* ---------- PRODUCT IMAGE BADGES: NEVER COVER THE ARTWORK'S LOWER ZONE ---------- */
  .product-badge-group {
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 10 !important;
    width: auto !important;
    max-width: calc(100% - 44px) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    pointer-events: none !important;
  }

  .product-seasonal-badge,
  .sale-badge,
  .stock-badge {
    position: relative !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 0.62rem !important;
    line-height: 1.15 !important;
    padding: 3px 6px !important;
  }

  .wishlist-heart-btn {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    z-index: 15 !important;
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
  }

  /* ---------- BOTTOM NAV: FULL WHITE SURFACE + SAFE AREA ---------- */
  .mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 6px env(safe-area-inset-bottom, 0px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(197, 155, 39, 0.25) !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.07) !important;
    z-index: 1100 !important;
    transform: none !important;
  }

  .mobile-bottom-nav-item {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 4px 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .mobile-bottom-nav-item span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* ---------- SMALL PHONE PRODUCT GRID ---------- */
}

@media (max-width: 375px) {
  .nav-container {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    column-gap: 3px !important;
  }

  .nav-container .logo,
  .logo {
    font-size: 0.80rem !important;
  }

  .nav-actions {
    gap: 1px !important;
  }

  .nav-actions .currency-switcher-wrap,
  .nav-actions .currency-select {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }

  .nav-actions .icon-btn {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    flex-basis: 28px !important;
  }

  .products-grid,
  .seasonal-products-grid,
  .mini-products-grid {
    gap: 8px !important;
  }

  .product-info-panel {
    padding: 7px 6px 8px !important;
  }

  .product-title {
    font-size: 0.76rem !important;
  }

  .product-price {
    font-size: 0.86rem !important;
  }

  .product-card-cart-action {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 27px !important;
    max-width: none !important;
    height: auto !important;
    min-height: 27px !important;
    max-height: none !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .add-cart-mini {
    flex-basis: 27px !important;
    width: 27px !important;
    min-width: 27px !important;
    max-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
  }
}



/* ==========================================================================
   DIVINE POURED — MINIMAL PREMIUM REVAMP
   Visual layer only. Existing HTML IDs, JS hooks and application behavior
   are intentionally preserved.
   ========================================================================== */

:root{
  --dp-color-bg:#f7f5f0;
  --dp-color-bg-soft:#eeece6;
  --dp-color-bg-warm:#e7e3da;
  --dp-color-surface:#fbfaf7;
  --dp-color-surface-warm:#f2f0eb;
  --dp-color-ink:#181715;
  --dp-color-text:#292724;
  --dp-color-muted:#77736c;
  --dp-color-subtle:#a19d95;
  --dp-color-inverse:#fff;
  --dp-color-accent:#1f4b52;
  --dp-color-accent-strong:#15383d;
  --dp-color-accent-soft:rgba(31,75,82,.08);
  --dp-color-accent-subtle:rgba(31,75,82,.04);
  --dp-color-accent-rgb:31,75,82;
  --dp-color-clay:#8a4c3d;
  --dp-color-clay-soft:#a66a5a;
  --dp-color-border:rgba(24,23,21,.12);
  --dp-color-border-subtle:rgba(24,23,21,.07);
  --dp-color-border-strong:rgba(24,23,21,.20);
  --dp-font-heading:"Cinzel", Georgia, serif;
  --dp-font-body:"Plus Jakarta Sans", Arial, sans-serif;
  --dp-radius-xs:0;
  --dp-radius-sm:2px;
  --dp-radius-md:2px;
  --dp-radius-lg:2px;
  --dp-radius-xl:2px;
  --dp-radius-pill:999px;
  --dp-shadow-xs:none;
  --dp-shadow-sm:0 8px 24px rgba(24,23,21,.05);
  --dp-shadow-md:0 16px 40px rgba(24,23,21,.08);
  --dp-shadow-lg:0 24px 60px rgba(24,23,21,.10);
  --dp-shadow-glow:none;
  --dp-page-gutter:clamp(20px,4vw,64px);
  --bg-primary:#f7f5f0;
  --bg-secondary:#eeece6;
  --bg-tertiary:#e7e3da;
  --accent-gold:#1f4b52;
  --accent-gold-hover:#15383d;
  --accent-gold-rgb:31,75,82;
  --accent-teal:#8a4c3d;
  --accent-teal-light:#a66a5a;
  --text-primary:#292724;
  --text-secondary:#77736c;
  --text-muted:#a19d95;
  --glass-bg:rgba(251,250,247,.94);
  --glass-bg-hover:#fff;
  --glass-border:rgba(24,23,21,.12);
  --glass-border-focus:rgba(31,75,82,.35);
  --glass-shadow:0 8px 24px rgba(24,23,21,.05);
  --font-heading:"Cinzel", Georgia, serif;
  --font-body:"Plus Jakarta Sans", Arial, sans-serif;
}

/* Quiet canvas: remove the decorative "resin mesh" background */
html{background:#f7f5f0 !important;}
body{
  background:#f7f5f0 !important;
  background-image:none !important;
  color:#292724 !important;
  font-family:"Plus Jakarta Sans",Arial,sans-serif;
}
body::before,body::after{display:none !important;}
h1,h2,h3,h4,h5,h6{color:#181715 !important;font-family:"Cinzel",Georgia,serif;}
a{color:inherit;}
::selection{background:#1f4b52;color:#fff;}

/* Header — quiet, architectural */
.announcement-bar{
  background:#181715 !important;
  color:#f7f5f0 !important;
  border:0 !important;
  padding:8px 0 !important;
  font-size:10px !important;
  letter-spacing:.16em !important;
}
.announcement-ticker{justify-content:center !important;gap:42px !important;}
.announcement-ticker span{opacity:.8;}
.announcement-ticker i{display:none !important;}

.header-nav{
  background:rgba(247,245,240,.96) !important;
  border-bottom:1px solid rgba(24,23,21,.10) !important;
  box-shadow:none !important;
  backdrop-filter:blur(12px) !important;
}
.header-nav .container{max-width:1500px !important;padding-left:var(--dp-page-gutter) !important;padding-right:var(--dp-page-gutter) !important;}
.nav-container{height:78px !important;gap:30px !important;}
.header-nav.scrolled .nav-container{height:66px !important;}
.logo{
  background:none !important;
  -webkit-text-fill-color:#181715 !important;
  color:#181715 !important;
  font-family:"Cinzel",Georgia,serif !important;
  font-size:20px !important;
  letter-spacing:.10em !important;
  text-transform:uppercase;
}
.logo-dot{width:4px !important;height:4px !important;background:#1f4b52 !important;box-shadow:none !important;}
.nav-links{gap:28px !important;}
.nav-links a{
  color:#5e5a54 !important;
  font-size:10px !important;
  font-weight:600 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  padding:7px 0 !important;
}
.nav-links a:hover,.nav-links a.active{color:#181715 !important;}
.nav-links a::after{height:1px !important;background:#1f4b52 !important;border-radius:0 !important;}
.search-bar-container{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid rgba(24,23,21,.20) !important;
  border-radius:0 !important;
  padding:4px 0 !important;
  max-width:175px !important;
}
.search-bar-container:focus-within{background:transparent !important;box-shadow:none !important;border-color:#1f4b52 !important;}
.search-bar-container input{font-size:11px !important;color:#292724 !important;}
.search-bar-container i{color:#77736c !important;}
.icon-btn{
  border-radius:0 !important;
  color:#292724 !important;
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
}
.icon-btn:hover{background:transparent !important;color:#1f4b52 !important;}
.nav-signin-btn{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid #181715 !important;
  border-radius:0 !important;
  color:#181715 !important;
  padding:5px 0 !important;
  font-size:10px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase;
}
.nav-signin-btn:hover{background:transparent !important;color:#1f4b52 !important;border-color:#1f4b52 !important;box-shadow:none !important;}
.currency-select{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#292724 !important;
  font-size:10px !important;
}

/* Home / hero — Luxury radiant studio aesthetic */
#home-view{
  background: 
    radial-gradient(circle at 85% 15%, rgba(212, 175, 55, 0.16) 0%, transparent 55%),
    radial-gradient(circle at 10% 75%, rgba(184, 134, 11, 0.10) 0%, transparent 50%),
    linear-gradient(180deg, #fdfbf7 0%, #f7f1e5 100%) !important;
}
.hero-section{
  background: 
    radial-gradient(ellipse 65% 55% at 75% 45%, rgba(228, 185, 78, 0.22) 0%, transparent 68%),
    radial-gradient(circle at 15% 30%, rgba(200, 160, 60, 0.14) 0%, transparent 60%),
    linear-gradient(135deg, rgba(254, 252, 248, 0.95) 0%, rgba(248, 242, 231, 0.90) 50%, rgba(243, 235, 220, 0.85) 100%),
    /* Pure CSS radiant gradient - zero network bytes */
  background-size: cover !important;
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(28px, 3.2vw, 44px) 0 clamp(32px, 3.8vw, 50px) !important;
  border-bottom: 1px solid rgba(197, 155, 39, 0.28) !important;
  position: relative !important;
  box-shadow: inset 0 -12px 28px -12px rgba(160, 120, 30, 0.14) !important;
}
.hero-grid{
  max-width:1220px !important;
  grid-template-columns:minmax(0, 1.15fr) minmax(320px, 0.85fr) !important;
  gap:clamp(28px, 3.5vw, 52px) !important;
  align-items:center !important;
}
.hero-content{
  max-width:580px !important;
  padding-right:clamp(12px, 2vw, 28px) !important;
}
.hero-tag{
  color:#1f4b52 !important;
  font-size:10px !important;
  letter-spacing:.20em !important;
  text-transform:uppercase !important;
  font-weight:700 !important;
}
.hero-title{
  font-size:clamp(2.2rem, 3.5vw, 3.4rem) !important;
  line-height:1.12 !important;
  letter-spacing:-.025em !important;
  font-weight:600 !important;
  margin:14px 0 18px !important;
}
.glow-text{
  color:#1f4b52 !important;
  text-shadow:none !important;
}
.hero-desc{
  max-width:500px !important;
  color:#77736c !important;
  font-size:15px !important;
  line-height:1.7 !important;
  margin-bottom:24px !important;
}
.btn-group{gap:20px !important;justify-content:flex-start !important;}
.btn-primary,.btn-secondary{
  border-radius:0 !important;
  box-shadow:none !important;
  text-transform:uppercase !important;
  letter-spacing:.13em !important;
  font-size:10px !important;
  font-weight:700 !important;
  min-height:44px !important;
  padding:13px 22px !important;
}
.btn-primary{
  background:#181715 !important;
  color:#fff !important;
  border:1px solid #181715 !important;
}
.btn-primary:hover{background:#1f4b52 !important;border-color:#1f4b52 !important;}
.btn-secondary{
  background:transparent !important;
  color:#181715 !important;
  border:1px solid rgba(24,23,21,.25) !important;
}
.btn-secondary:hover{background:transparent !important;color:#1f4b52 !important;border-color:#1f4b52 !important;}
.hero-visual{position:relative !important; display:flex !important; justify-content:center !important;}
.hero-image-wrapper{
  max-width:460px !important;
  width:100% !important;
  aspect-ratio:1.02/1 !important;
  border-radius:16px !important;
  padding:0 !important;
  border:0 !important;
  background:#e7e3da !important;
  box-shadow:0 12px 36px rgba(0,0,0,0.06) !important;
  overflow:hidden !important;
}
.hero-image{width:100% !important;height:100% !important;object-fit:cover !important;}
.floating-card{
  border-radius:6px !important;
  background:#fbfaf7 !important;
  border:1px solid rgba(24,23,21,.12) !important;
  box-shadow:0 12px 30px rgba(24,23,21,.08) !important;
  padding:14px 18px !important;
  bottom:-18px !important;
  left:-16px !important;
}
.floating-icon{background:#181715 !important;color:#fff !important;border-radius:0 !important;box-shadow:none !important;}

/* Customizable Luxury Designer Dividers between sections */
.luxury-designer-divider{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: min(100%, 1400px) !important;
  padding: 18px 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  position: relative !important;
  opacity: 1 !important;
}
.luxury-designer-divider.divider-hidden{
  display: none !important;
}
.luxury-designer-divider .crest-medallion,
.luxury-designer-divider .crest-dot{
  display: inline-flex !important;
}
.luxury-designer-divider.divider-style-gold_shimmer .luxury-divider-line{
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #c59b27, #fdf4d1, #c59b27, transparent) !important;
  box-shadow: 0 0 10px rgba(197, 155, 39, 0.4) !important;
}
.luxury-designer-divider .divider-text-badge{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 18px !important;
  background: linear-gradient(135deg, #181715, #22201d) !important;
  border: 1.5px solid rgba(197, 155, 39, 0.6) !important;
  border-radius: 24px !important;
  color: #edd182 !important;
  font-family: var(--font-heading, Cinzel, serif) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25), 0 0 10px rgba(197, 155, 39, 0.15) !important;
  white-space: nowrap !important;
}
.luxury-designer-divider.divider-style-minimal_line .crest-medallion{
  width: 14px !important;
  height: 14px !important;
  font-size: 0.55rem !important;
}
.luxury-designer-divider.divider-style-minimal_line .luxury-divider-line{
  height: 1px !important;
  opacity: 0.4 !important;
}
.marquee-separator{
  color: var(--accent-gold, #c59b27) !important;
  padding: 0 14px !important;
  font-size: 0.85em !important;
  display: inline-block !important;
  vertical-align: middle !important;
  filter: drop-shadow(0 0 4px rgba(197, 155, 39, 0.4));
}

/* Trust row — editorial metadata */
.trust-badges-section{
  background:#181715 !important;
  border:0 !important;
  padding:28px 0 !important;
}
.trust-badges-grid{max-width:1500px !important;}
.badge-item{border:0 !important;background:transparent !important;padding:8px 20px !important;}
.badge-icon-box{background:transparent !important;border:0 !important;color:#ecc358 !important;box-shadow:none !important;}
.badge-content h4, .badge-content .badge-title{color:#ffffff !important;font-size:12.5px !important;font-weight:700 !important;letter-spacing:.05em !important;margin-bottom:3px !important;}
.badge-content p{color:#e8e4dc !important;font-size:11px !important;font-weight:500 !important;line-height:1.4 !important;}

/* Generic sections */
.home-section,.section-header{background:transparent !important;}
.section-header{margin-bottom:42px !important;}
.section-tag,.section-label{
  color:#1f4b52 !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}
.section-title{
  font-size:clamp(2rem,4vw,3.6rem) !important;
  font-weight:500 !important;
  letter-spacing:-.03em !important;
  margin-top:10px !important;
}
.section-description{max-width:620px !important;color:#77736c !important;line-height:1.8 !important;}

/* Shop — catalogue */
.shop-catalog-outer-container{
  padding:clamp(55px,8vw,110px) var(--dp-page-gutter) !important;
  background:#f7f5f0 !important;
}
.shop-layout{
  max-width:1500px !important;
  margin:0 auto !important;
  grid-template-columns:210px minmax(0,1fr) !important;
  gap:clamp(35px,5vw,75px) !important;
}
.filter-sidebar{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid rgba(24,23,21,.18) !important;
  border-radius:0 !important;
  padding:20px 0 !important;
  box-shadow:none !important;
}
.filter-title{
  font-family:"Cinzel",Georgia,serif !important;
  font-size:18px !important;
  border:0 !important;
  padding:0 0 20px !important;
}
.clear-btn{background:transparent !important;border:0 !important;color:#77736c !important;border-radius:0 !important;font-size:9px !important;letter-spacing:.1em !important;text-transform:uppercase;}
.filter-group{border-top:1px solid rgba(24,23,21,.09) !important;padding:22px 0 !important;}
.filter-group-title{font-size:10px !important;letter-spacing:.15em !important;text-transform:uppercase !important;color:#292724 !important;}
.search-input-wrapper{border:0 !important;border-bottom:1px solid rgba(24,23,21,.20) !important;border-radius:0 !important;background:transparent !important;}
.search-input{background:transparent !important;border:0 !important;border-radius:0 !important;padding:11px 0 !important;font-size:12px !important;}
.category-item{border:0 !important;padding:7px 0 !important;}
.category-item label{font-size:11px !important;color:#77736c !important;}
.category-item input{accent-color:#1f4b52 !important;}
.category-select-all-item{border-bottom:1px solid rgba(24,23,21,.09) !important;}
.category-select-all-badge{background:transparent !important;color:#1f4b52 !important;padding:0 !important;border-radius:0 !important;font-size:9px !important;}
.price-range-input{accent-color:#1f4b52 !important;}
.gold-text{color:#1f4b52 !important;}
.products-wrapper{min-width:0 !important;}
.shop-toolbar{
  border-bottom:1px solid rgba(24,23,21,.14) !important;
  padding:0 0 16px !important;
  margin-bottom:26px !important;
}
.results-count{font-size:10px !important;letter-spacing:.11em !important;text-transform:uppercase !important;color:#77736c !important;}
.sort-select{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid rgba(24,23,21,.20) !important;
  border-radius:0 !important;
  font-size:10px !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  padding:7px 20px 7px 0 !important;
}

/* Product catalog grid - Responsive 3-col on desktop, 2-col on mobile */
.products-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(20px, 2.5vw, 32px) !important;
}

@media (max-width: 992px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 10px !important;
  }
}
/* ==========================================================================
   ATELIER LUXURY PRODUCT CARD DESIGN SYSTEM (Unified Across All Grids)
   ========================================================================== */
.product-card {
  background: #ffffff !important;
  border: 1px solid rgba(197, 155, 39, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(110, 93, 71, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.product-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(197, 155, 39, 0.45) !important;
  box-shadow: 0 14px 32px rgba(110, 93, 71, 0.12), 0 3px 10px rgba(197, 155, 39, 0.12) !important;
}

.product-image-container {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  background: #fbf9f5 !important;
  border-radius: 13px 13px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-image-container > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.product-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
}

.product-card:hover .product-image {
  transform: scale(1.05) !important;
}

/* Wishlist Heart Button (Top-Right on Image) */
.wishlist-heart-btn,
.product-image-container .wishlist-heart-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 10 !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(197, 155, 39, 0.25) !important;
  color: #524e48 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.90rem !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.wishlist-heart-btn:hover {
  transform: scale(1.1) !important;
  color: #d32f2f !important;
  background: #ffffff !important;
  border-color: rgba(211, 47, 47, 0.3) !important;
}

.wishlist-heart-btn.active {
  color: #d32f2f !important;
  background: #ffffff !important;
  border-color: rgba(211, 47, 47, 0.35) !important;
}

/* Badges (Top-Left on Image, with safe width so it never touches the heart button) */
.product-badge-group,
.product-image-container .product-badge-group {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 8 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  max-width: calc(100% - 54px) !important;
  pointer-events: none !important;
}

.stock-badge,
.sale-badge,
.product-seasonal-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 4px 9px !important;
  border-radius: 20px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border: none !important;
}

.stock-badge.low-fomo {
  background: linear-gradient(135deg, #e65100 0%, #c62828 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(198, 40, 40, 0.3) !important;
}

.stock-badge.preorder {
  background: #1a4d5c !important;
  color: #ffffff !important;
}

.stock-badge.sold {
  background: rgba(30, 24, 18, 0.88) !important;
  color: #d1c7bd !important;
}

.sale-badge {
  background: linear-gradient(135deg, #a47a1c 0%, #8c6716 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(140, 103, 22, 0.25) !important;
}

/* Details Overlay on Hover */
.product-details-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(20, 16, 12, 0.65) 0%, rgba(20, 16, 12, 0.15) 50%, transparent 100%) !important;
  backdrop-filter: blur(2px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 14px !important;
  gap: 8px !important;
  z-index: 5 !important;
}

.product-card:hover .product-details-overlay {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.view-details-btn {
  background: #ffffff !important;
  color: #1a120b !important;
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  padding: 7px 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(197, 155, 39, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.view-details-btn:hover {
  background: #8c6716 !important;
  color: #ffffff !important;
  border-color: #8c6716 !important;
}

/* Product Info Panel */
.product-info-panel {
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}

.product-category {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #8c6716 !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
}

.product-title {
  font-family: var(--dp-font-body, "Plus Jakarta Sans", sans-serif) !important;
  font-size: clamp(0.92rem, 1.05vw, 1.02rem) !important;
  font-weight: 600 !important;
  color: #1a120b !important;
  line-height: 1.35 !important;
  margin: 0 0 6px 0 !important;
  min-height: 2.7em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.product-footer-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(197, 155, 39, 0.15) !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.product-price-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: visible !important;
}

.product-price {
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  color: #1a120b !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.product-price-sub {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 2px !important;
  flex-wrap: wrap !important;
}

.original-price-slashed {
  text-decoration: line-through !important;
  color: #4b443c !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.discount-badge {
  color: #0d4621 !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  background: #e6f4ea !important;
  border: 1px solid #a3d9b8 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}

/* Product Card Actions & Stepper (Never Cut Off) */
.product-card-cart-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

.add-cart-mini {
  background: linear-gradient(135deg, #a47a1c 0%, #8c6716 100%) !important;
  color: #ffffff !important;
  border: none !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(140, 103, 22, 0.28) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.add-cart-mini:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(140, 103, 22, 0.4) !important;
}

.card-qty-stepper {
  display: inline-flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(140, 103, 22, 0.45) !important;
  border-radius: 20px !important;
  padding: 2px 4px !important;
  box-shadow: 0 2px 8px rgba(140, 103, 22, 0.15) !important;
  gap: 3px !important;
  height: 34px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.card-qty-btn {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

.card-qty-btn.card-qty-minus {
  background: #fff5f5 !important;
  color: #c62828 !important;
  border: 1px solid rgba(198, 40, 40, 0.2) !important;
}

.card-qty-btn.card-qty-minus:hover {
  background: #c62828 !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

.card-qty-val {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #1a120b !important;
  min-width: 16px !important;
  text-align: center !important;
  line-height: 1 !important;
  padding: 0 2px !important;
}

.card-qty-btn.card-qty-plus {
  background: rgba(140, 103, 22, 0.12) !important;
  color: #8c6716 !important;
  border: 1px solid rgba(140, 103, 22, 0.25) !important;
}

.card-qty-btn.card-qty-plus:hover {
  background: #8c6716 !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

/* Featured/recent areas */
.curated-showcase-container{
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Modals — restrained */
.modal-overlay{background:rgba(24,23,21,.72) !important;backdrop-filter:blur(6px) !important;}
.modal-card{
  border-radius:0 !important;
  border:0 !important;
  box-shadow:0 30px 80px rgba(0,0,0,.22) !important;
}
.close-modal-btn{border-radius:0 !important;background:#f7f5f0 !important;border:0 !important;box-shadow:none !important;}
.close-modal-btn:hover{background:#181715 !important;color:#fff !important;}

/* Mobile — deliberate catalogue */
@media (max-width:1024px){
  .nav-links,.desktop-only-user-status{display:none !important;}
  .nav-container{height:68px !important;}
  .search-bar-container{max-width:150px !important;}
  .hero-grid{grid-template-columns:1fr !important;gap:38px !important;}
  .hero-content{max-width:700px !important;padding-right:0 !important;}
  .hero-title{font-size:clamp(2.2rem,5.5vw,3.2rem) !important;line-height:1.1 !important;}
  .hero-visual{max-width:760px !important;width:100% !important;margin:0 auto !important;}
  .shop-layout{grid-template-columns:1fr !important;gap:20px !important;}
  
  .filter-sidebar{
    position:static !important;
    background:transparent !important;
    border:none !important;
    padding:0 !important;
    box-shadow:none !important;
    margin-bottom:12px !important;
  }
  
  .filter-mobile-toggle{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:13px 18px;
    background:#ffffff;
    border:1px solid rgba(24,23,21,.15);
    border-radius:4px;
    font-family:var(--font-heading,"Cinzel",serif);
    font-size:0.84rem;
    font-weight:700;
    letter-spacing:.05em;
    color:#181715;
    cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,.03);
    transition:background .2s, border-color .2s;
    box-sizing:border-box;
  }
  .filter-mobile-toggle:hover,.filter-mobile-toggle:focus-visible{
    background:#faf8f5;
    border-color:rgba(197,155,39,.5);
    outline:none;
  }
  .filter-mobile-toggle .toggle-left{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .filter-mobile-toggle .toggle-left i{
    color:#c59b27;
    font-size:0.92rem;
  }
  .filter-mobile-toggle .toggle-right{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:0.75rem;
    color:#77736c;
    font-family:var(--font-body,"Inter",sans-serif);
  }
  .filter-mobile-toggle .filter-active-indicator{
    font-weight:600;
    color:#8c6716;
    background:rgba(197,155,39,.14);
    padding:2px 8px;
    border-radius:10px;
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  .filter-mobile-toggle .toggle-chevron{
    transition:transform .25s ease;
    font-size:0.72rem;
    color:#181715;
  }
  
  /* Collapsed by default on mobile/tablet */
  .filter-sidebar-content{
    display:none !important;
    background:#ffffff;
    border:1px solid rgba(24,23,21,.12);
    border-top:none;
    border-radius:0 0 4px 4px;
    padding:20px 18px 18px;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    box-sizing:border-box;
  }
  
  /* When open */
  .filter-sidebar.is-open .filter-mobile-toggle{
    border-bottom:1px dashed rgba(197,155,39,.35) !important;
    border-radius:4px 4px 0 0 !important;
    background:#faf8f3 !important;
  }
  .filter-sidebar.is-open .filter-mobile-toggle .toggle-chevron{
    transform:rotate(180deg) !important;
  }
  .filter-sidebar.is-open .filter-sidebar-content{
    display:block !important;
    animation:filterDrawerOpen .22s ease-out;
  }
  
  .filter-mobile-close-wrap{
    display:block !important;
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid rgba(24,23,21,.08);
  }
  .btn-close-filter-mobile{
    width:100%;
    padding:12px;
    background:#181715;
    color:#f7f5f0;
    border:none;
    border-radius:3px;
    font-family:var(--font-heading,"Cinzel",serif);
    font-size:0.8rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .2s;
  }
  .btn-close-filter-mobile:hover{
    background:#2b2723;
  }
  
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:42px 18px !important;}
}

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

@media (max-width:768px){
  :root{--dp-page-gutter:18px;}
  .announcement-bar{font-size:8px !important;letter-spacing:.12em !important;padding:7px 0 !important;}
  .announcement-ticker{gap:0 !important;}
  .announcement-ticker span:not(:first-child){display:none !important;}
  .header-nav{position:sticky !important;}
  .nav-container{height:64px !important;gap:8px !important;}
  .logo{font-size:16px !important;letter-spacing:.07em !important;}
  .search-bar-container{order:3;flex:1 1 100% !important;max-width:none !important;display:none !important;}
  .nav-actions{gap:0 !important;}
  .icon-btn{width:40px !important;min-width:40px !important;}
  .hero-section{
    min-height:auto !important;
    padding:46px 0 65px !important;
  }
  .hero-grid{gap:38px !important;}
  .hero-content{padding:0 !important;}
  .hero-tag{font-size:9px !important;}
  .hero-title{
    font-size:clamp(2rem,7.5vw,2.75rem) !important;
    line-height:1.08 !important;
    margin:14px 0 20px !important;
  }
  .hero-desc{font-size:13px !important;line-height:1.75 !important;margin-bottom:24px !important;}
  .btn-group{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:9px !important;}
  .btn-primary,.btn-secondary{width:100% !important;justify-content:center !important;}
  .hero-image-wrapper{aspect-ratio:4/5 !important;}
  .floating-card{left:12px !important;bottom:-18px !important;padding:12px 14px !important;}
  .floating-card h4{font-size:12px !important;}
  .trust-badges-section{padding:14px 0 !important; background: #161513 !important;}
  .trust-badges-grid{display:grid !important;grid-template-columns:1fr 1fr !important; gap: 8px !important;}
  .badge-item{padding:12px 10px !important;border:1px solid rgba(255,255,255,.08) !important; border-radius: 8px !important; background: rgba(255,255,255,0.03) !important;}
  .badge-icon-box{display:none !important;}
  .badge-content h4, .badge-content .badge-title{font-size:10.5px !important; color: #ffffff !important; font-weight: 700 !important; letter-spacing: 0.03em !important; margin-bottom: 2px !important;}
  .badge-content p{font-size:9.5px !important;line-height:1.35 !important; color: #ded9d0 !important; font-weight: 500 !important;}
  .shop-catalog-outer-container{padding:30px var(--dp-page-gutter) 60px !important;}
  .shop-layout{gap:16px !important;}
  .filter-sidebar{margin-bottom:16px !important;}
  .filter-group{padding:14px 0 !important;}
  .products-grid{grid-template-columns:1fr !important;gap:54px !important;}
  .product-image-container{aspect-ratio:1/1.08 !important;}
  .product-info-panel{padding-top:14px !important;}
  .product-title{font-size:17px !important;}
  .product-price{font-size:14px !important;}
  .product-card-cart-action{display:inline-flex !important; align-items:center !important; justify-content:flex-end !important; width:auto !important; overflow:visible !important;}
  .add-cart-mini{width:38px !important;height:38px !important;}
  .section-title{font-size:2.15rem !important;}
  .section-header{margin-bottom:28px !important;}
  .mobile-bottom-nav{
    background:rgba(247,245,240,.97) !important;
    border-top:1px solid rgba(24,23,21,.12) !important;
    box-shadow:none !important;
    backdrop-filter:blur(12px) !important;
  }
  .mobile-bottom-nav-item{color:#77736c !important;}
  .mobile-bottom-nav-item.active{color:#181715 !important;}
  .mobile-bottom-nav-item i{color:inherit !important;}
  .mobile-nav-drawer{border-radius:0 !important;background:#f7f5f0 !important;}
}
@media (max-width:375px){
  :root{--dp-page-gutter:15px;}
  .hero-title{font-size:2.65rem !important;}
  .hero-desc{font-size:12px !important;}
  .products-grid{gap:46px !important;}
}

/* Remove accidental rounded "template" treatment globally from common UI */
button,input,select,textarea,.card,.panel,.badge,.pill{border-radius:2px;}

/* ==========================================================================
   ADMIN CONTROLLER & PRODUCT MODAL — HIGH CONTRAST & LEGIBILITY ENHANCEMENTS
   Fixes: Illegible text in modals, washed out stock controls, dark text on dark pills
   ========================================================================== */

/* Stock Controller: Authoritative styles unified in Quick Stock Controller section */
.stock-qty-num-input{
  color: #181715 !important;
  font-weight: 800 !important;
  background: transparent !important;
  border: none !important;
}

.admin-save-single-stock-btn{
  background: #1f4b52 !important;
  border: 1px solid #1f4b52 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 5px !important;
}

.admin-save-single-stock-btn:hover{
  background: #15383d !important;
  color: #ffffff !important;
}

.admin-save-single-stock-btn i{
  color: #ffffff !important;
}

.btn-restock-pill{
  background: #fbf5e6 !important;
  border: 1.5px solid #d4af37 !important;
  color: #8c6716 !important;
  border-radius: 5px !important;
  font-weight: 800 !important;
}

.btn-restock-pill:hover{
  background: #c59b27 !important;
  color: #ffffff !important;
}

/* Admin Add/Edit Product Modal High Contrast Styles */
#product-form-modal .modal-card{
  background: #fbfaf7 !important;
  border: 1px solid rgba(24, 23, 21, 0.16) !important;
  color: #181715 !important;
}

#product-form-modal .checkout-steps-nav{
  background: #181715 !important;
  border-bottom: 2px solid #1f4b52 !important;
}

#product-form-modal .checkout-steps-nav #product-form-modal-title{
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

#product-form-modal .form-label{
  color: #181715 !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

#product-form-modal .form-control{
  background: #ffffff !important;
  border: 1.5px solid rgba(24, 23, 21, 0.20) !important;
  color: #181715 !important;
  font-size: 0.92rem !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

#product-form-modal .form-control:focus{
  border-color: #1f4b52 !important;
  box-shadow: 0 0 0 3px rgba(31, 75, 82, 0.18) !important;
  outline: none !important;
}

#product-form-modal .form-control::placeholder{
  color: #8c877e !important;
}

/* Modal Checkboxes & Callout Blocks */
#product-form-modal label[for="form-product-preorder"],
#product-form-modal label[for="form-product-personalization"],
#product-form-modal label[for="form-product-seasonal"],
#product-form-modal label[for="form-product-bestseller"],
#product-form-modal label[for="form-product-show-reviews"]{
  color: #181715 !important;
  font-weight: 700 !important;
}

#product-form-modal label[for="form-product-preorder"] i,
#product-form-modal label[for="form-product-personalization"] i{
  color: #b8860b !important;
}

#form-img-upload-prompt div{
  color: #181715 !important;
}

#form-img-upload-prompt div:last-child{
  color: #635d55 !important;
}

/* SEO Sub-section Labels inside Details */
#product-form-modal details label.form-label{
  color: #181715 !important;
  font-weight: 700 !important;
}

/* Image Quality & Mobile Speed Option Bar */
.admin-compression-controls{
  background: #ffffff !important;
  border: 1.5px solid rgba(197, 155, 39, 0.4) !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  display: block !important;
  margin-top: 14px !important;
}

.admin-compression-controls strong,
.admin-compression-controls span{
  color: #181715 !important;
}

#admin-product-form{
  padding-bottom: 30px !important;
}

/* -------------------------------------------------------------
   HIGH-CONTRAST READABLE ADMIN INPUTS & SELECTS (ALL ADMIN TABS)
   Eliminates translucent dark gray boxes with muddy unreadable text
   ------------------------------------------------------------- */
.admin-tab-content input.form-control,
.admin-tab-content select.form-control,
.admin-tab-content textarea.form-control,
.admin-settings-card input.form-control,
.admin-settings-card select.form-control,
.admin-settings-card textarea.form-control,
#admin-create-form .form-control,
#admin-change-password-form .form-control,
#admin-newsletter-broadcast-form .form-control,
#admin-block-user-form .form-control {
  background: #ffffff !important;
  border: 1.5px solid rgba(24, 23, 21, 0.22) !important;
  color: #181715 !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.admin-tab-content input.form-control:focus,
.admin-tab-content select.form-control:focus,
.admin-tab-content textarea.form-control:focus,
.admin-settings-card input.form-control:focus,
.admin-settings-card select.form-control:focus,
.admin-settings-card textarea.form-control:focus,
#admin-create-form .form-control:focus,
#admin-change-password-form .form-control:focus,
#admin-newsletter-broadcast-form .form-control:focus {
  border-color: #1f4b52 !important;
  box-shadow: 0 0 0 3px rgba(31, 75, 82, 0.16) !important;
  outline: none !important;
  background: #ffffff !important;
  color: #181715 !important;
}

.admin-tab-content input.form-control::placeholder,
.admin-tab-content textarea.form-control::placeholder,
.admin-settings-card input.form-control::placeholder,
.admin-settings-card textarea.form-control::placeholder,
#admin-create-form .form-control::placeholder,
#admin-change-password-form .form-control::placeholder,
#admin-newsletter-broadcast-form .form-control::placeholder {
  color: #716c64 !important;
  opacity: 1 !important;
}

.admin-tab-content select.form-control option,
.admin-settings-card select.form-control option {
  background: #ffffff !important;
  color: #181715 !important;
}

/* ==========================================================================
   DEDICATED PRODUCT MANAGEMENT FULL-PAGE SCREEN (DESKTOP & MOBILE)
   ========================================================================== */
#product-form-modal.product-page-workspace,
#product-form-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #f8f6f0 !important;
  z-index: 99999 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#product-form-modal.open {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: stretch !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#product-form-modal .product-page-card,
#product-form-modal .modal-card {
  width: 100% !important;
  max-width: 1240px !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  border: none !important;
  border-left: 1px solid rgba(24, 23, 21, 0.08) !important;
  border-right: 1px solid rgba(24, 23, 21, 0.08) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  position: relative !important;
}

.product-page-topbar {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 32px !important;
  background: #ffffff !important;
  border-bottom: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  position: relative !important;
  top: auto !important;
  z-index: 10 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.product-page-topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

.product-page-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #f7f4ed !important;
  border: 1px solid rgba(24, 23, 21, 0.15) !important;
  color: #181715 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.product-page-back-btn:hover {
  background: #1f4b52 !important;
  color: #ffffff !important;
  border-color: #1f4b52 !important;
}

.product-page-title-wrap {
  display: flex !important;
  flex-direction: column !important;
}

.product-page-title {
  margin: 0 !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #181715 !important;
  letter-spacing: -0.01em !important;
}

.product-page-subtext {
  font-size: 0.76rem !important;
  color: #8c6716 !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
}

#admin-product-form.product-page-form {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 28px 36px 40px 36px !important;
  max-height: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.product-page-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 32px !important;
  align-items: start !important;
}

.product-page-bottom-bar {
  flex: 0 0 auto !important;
  display: flex !important;
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border-top: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  padding: 14px 36px !important;
  z-index: 10 !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 14px !important;
}

.product-page-bottom-bar .btn-secondary,
.product-page-bottom-bar .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  letter-spacing: 0.03em !important;
  transition: all 0.2s ease !important;
}

.product-page-bottom-bar .btn-secondary {
  background: #ffffff !important;
  border: 1.5px solid rgba(197, 155, 39, 0.45) !important;
  color: #5e5850 !important;
}

.product-page-bottom-bar .btn-secondary:hover {
  background: #fdfaf0 !important;
  color: #181715 !important;
  border-color: #c59b27 !important;
}

.product-page-bottom-bar .btn-primary {
  background: #181715 !important;
  border: 1.5px solid #181715 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.product-page-bottom-bar .btn-primary:hover {
  background: #2a2825 !important;
  border-color: #2a2825 !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 900px) {
  #product-form-modal .product-page-card,
  #product-form-modal .modal-card {
    max-width: 100% !important;
    border-left: none !important;
    border-right: none !important;
  }
  .product-page-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
    .product-page-topbar {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 14px !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .product-page-topbar-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  .product-page-back-btn {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
  }
  .product-page-back-btn span {
    display: none !important;
  }
  .product-page-title-wrap {
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
  }
  .product-page-title {
    font-size: 0.98rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }
  .product-page-subtext {
    display: none !important;
  }
  .product-page-topbar-right {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: stretch !important;
  }
  .product-page-topbar-right .btn-secondary,
  .product-page-topbar-right #product-page-top-save-btn {
    flex: 1 1 50% !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  #admin-product-form.product-page-form {
    padding: 16px 16px 30px 16px !important;
  }
  .product-page-bottom-bar {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    border-top: 1.5px solid rgba(197, 155, 39, 0.45) !important;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.12) !important;
    padding: 12px 16px !important;
    gap: 10px !important;
  }
  .product-page-bottom-bar .btn-secondary,
  .product-page-bottom-bar .btn-primary {
    flex: 1 !important;
    min-height: 44px !important;
    justify-content: center !important;
    padding: 12px 14px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
}

/* Responsive Add Category Modal Form */
.admin-add-cat-form {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 600px) {
  .admin-add-cat-form {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .admin-add-cat-form .admin-cat-input-responsive {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  .admin-add-cat-form .admin-cat-btn-responsive {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 0.95rem !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  #admin-category-modal .modal-card {
    padding: 18px 14px !important;
    width: 96% !important;
  }
}


/* ==========================================================================
   PERFORMANCE PATCH — MOBILE LIGHTHOUSE / CORE WEB VITALS
   Keeps the visual design but removes continuous non-composited animations
   from the mobile critical path.
   ========================================================================== */

/* Lighthouse flags box-shadow animation on the generated low-stock badges.
   The badge remains visually identical at rest; only the continuous pulse is removed. */
.stock-badge.low-fomo{
  animation: none !important;
  will-change: auto !important;
}

/* Continuous marquee/ticker motion is decorative and competes with mobile
   scrolling/rendering. Keep the static content available. */
@media (max-width: 768px){
  .announcement-ticker,
  .marquee-content,
  .floating-card,
  .floating-gift-finder-btn i{
    animation: none !important;
    will-change: auto !important;
  }
}

/* Respect users who explicitly request reduced motion. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Accessible CAPTCHA answer controls: large enough for touch and long codes. */
.captcha-answer-row,
.signup-captcha-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.captcha-answer-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 50px;
  padding: 12px 16px;
  font-family: monospace, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.captcha-answer-row button,
.signup-captcha-row button {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.signup-captcha-input {
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .signup-captcha-row {
    flex-wrap: wrap;
  }

  .signup-captcha-row #signup-captcha-img-container {
    flex: 0 0 100%;
    width: 100%;
  }

  .signup-captcha-row .captcha-answer-input {
    flex-basis: 100%;
    width: 100%;
  }

  .captcha-answer-row .captcha-answer-input {
    min-height: 50px;
    font-size: 1.1rem;
  }
}


/* === REFERENCE HEADER: desktop only === */
@media (min-width:1025px){
  .header-nav{background:rgba(255,255,255,.97)!important;border-bottom:1px solid rgba(36,27,19,.08)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:0!important;position:sticky!important;top:0!important;z-index:1500!important;overflow:visible!important}
  .header-nav .container.nav-container{max-width:100%!important;height:82px!important;padding:0 clamp(16px,2vw,36px)!important;gap:clamp(8px,1.2vw,18px)!important;justify-content:space-between!important;overflow:visible!important}
  .header-nav.scrolled .container.nav-container{height:70px!important}
  .header-nav .logo{width:96px!important;min-width:96px!important;height:68px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:0!important;letter-spacing:0!important;flex-shrink:0!important;background:linear-gradient(180deg,#f5f0e6,#fff)!important;border:1px solid rgba(185,139,34,.08)!important;color:transparent!important;position:relative!important;overflow:hidden!important}
  .header-nav .logo::before{content:"DP";font-family:"Cinzel",Georgia,serif;font-size:25px;font-weight:700;color:#b98b22;letter-spacing:-3px}
  .header-nav .logo::after{content:"DIVINE POURED";position:absolute;top:47px;left:0;right:0;text-align:center;font-family:"Cinzel",Georgia,serif;font-size:7px;font-weight:700;letter-spacing:.08em;color:#3d3933;white-space:nowrap}
  .header-nav .logo-dot{display:none!important}
    /* Modern Luxury Primary Navigation Bar (Clean spacing, gold underline, no pipe dividers) */
  .desktop-primary-nav {
    display: flex !important;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible !important;
  }
  .desktop-primary-nav .nav-links {
    gap: clamp(4px, 1vw, 12px) !important;
    width: auto !important;
    margin: 0 auto !important;
    justify-content: center;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    height: 82px !important;
    align-items: center !important;
  }
  .desktop-primary-nav .nav-links > li {
    position: relative;
    height: 82px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  /* Remove old pipe separators */
  .desktop-primary-nav .nav-links > li::after,
  .desktop-primary-nav .nav-links > li:not(:last-child)::after {
    display: none !important;
    content: none !important;
  }
  .desktop-primary-nav .nav-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2b2621 !important;
    font-family: "Plus Jakarta Sans", -apple-system, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    white-space: nowrap;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    height: auto !important;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease !important;
  }
  .desktop-primary-nav .nav-links a::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    bottom: -4px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: #b98b22;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .desktop-primary-nav .nav-links a:hover {
    color: #8c6716 !important;
    background: rgba(185, 139, 34, 0.06) !important;
  }
  .desktop-primary-nav .nav-links a:hover::after,
  .desktop-primary-nav .nav-links a.active::after {
    transform: scaleX(1) !important;
  }
  .desktop-primary-nav .nav-links a.active {
    color: #8c6716 !important;
    font-weight: 600 !important;
  }
  .nav-dropdown-trigger i {
    font-size: 10px !important;
    color: #9b8a73 !important;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease;
    pointer-events: none;
    margin-left: 2px;
  }
  .desktop-primary-nav .nav-links a:hover .nav-dropdown-trigger i,
  .desktop-primary-nav .nav-links a.active i {
    color: #8c6716 !important;
  }
  .nav-dropdown.is-open:not(.is-closed) .nav-dropdown-trigger i {
    transform: rotate(180deg);
    color: #8c6716 !important;
  }

  /* Modern Floating Glass Dropdown Architecture */
  .nav-dropdown-menu {
    position: absolute !important;
    top: calc(100% - 10px) !important;
    left: 50% !important;
    transform: translate(-50%, 8px) !important;
    min-width: 320px !important;
    max-width: 560px !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(197, 155, 39, 0.24) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 48px -8px rgba(36, 27, 19, 0.16), 0 4px 16px rgba(185, 139, 34, 0.08) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease !important;
    z-index: 99999 !important;
  }
  #nav-shop-menu {
    min-width: 490px !important;
  }
  #nav-shop-menu .nav-dynamic-category-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 8px !important;
  }
  .nav-dynamic-category-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }
  .nav-dropdown.is-open:not(.is-closed) > .nav-dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) !important;
  }
  .nav-dropdown.is-closed > .nav-dropdown-menu,
  .nav-dropdown-menu.force-closed {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .nav-dropdown-menu::after {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
    background: transparent;
    pointer-events: auto;
  }
  .nav-dropdown-menu::before {
    display: none !important;
    content: none !important;
  }

  /* Refined Category Links with Elegant Icons & Rounded Pill Hover */
  .nav-dropdown-item, .nav-menu-category {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    color: #2b2621 !important;
    font-size: 13.5px !important;
    font-weight: 550 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-bottom: 2px !important;
  }
  .nav-dropdown-item:hover, .nav-menu-category:hover {
    background: rgba(185, 139, 34, 0.10) !important;
    color: #8c6716 !important;
    transform: translateX(3px) !important;
  }
  .nav-dropdown-item:hover .nav-cat-icon-box,
  .nav-menu-category:hover .nav-cat-icon-box {
    background: #b98b22 !important;
    color: #ffffff !important;
    transform: scale(1.06) !important;
    box-shadow: 0 3px 8px rgba(185, 139, 34, 0.28) !important;
  }
  .nav-dropdown-item::after, .nav-menu-category::after {
    display: none !important;
  }
  .nav-cat-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .nav-cat-icon-box {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
    background: rgba(197, 155, 39, 0.12) !important;
    color: #8c6716 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
  }
  .nav-cat-text {
    font-size: 13px !important;
    font-weight: 550 !important;
    color: inherit !important;
    letter-spacing: 0.01em !important;
  }
  /* Remove clunky dots and arrows completely */
  .nav-cat-dot,
  .nav-cat-arrow,
  .nav-menu-category i.nav-cat-arrow {
    display: none !important;
  }
  .nav-all-category {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 700 !important;
    color: #1a120b !important;
    background: linear-gradient(135deg, rgba(197, 155, 39, 0.14) 0%, rgba(197, 155, 39, 0.05) 100%) !important;
    border: 1px solid rgba(197, 155, 39, 0.28) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    padding: 10px 14px !important;
    grid-column: 1 / -1 !important;
    transition: all 0.2s ease !important;
  }
  .nav-all-category:hover {
    background: linear-gradient(135deg, rgba(197, 155, 39, 0.24) 0%, rgba(197, 155, 39, 0.10) 100%) !important;
    border-color: rgba(197, 155, 39, 0.5) !important;
    color: #8c6716 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(185, 139, 34, 0.12) !important;
  }
  .nav-all-category .nav-cat-icon-box {
    background: var(--accent-gold) !important;
    color: #ffffff !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
  }
  .nav-all-text {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.25 !important;
  }
  .nav-all-text strong {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1a120b !important;
    letter-spacing: 0.02em !important;
  }
  .nav-all-text small {
    font-size: 10.5px !important;
    color: #7d7265 !important;
    font-weight: 500 !important;
  }
  .nav-all-badge {
    margin-left: auto !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #8c6716 !important;
    letter-spacing: 0.03em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .nav-menu-divider {
    height: 1px !important;
    background: rgba(36, 27, 19, 0.08) !important;
    margin: 8px 4px !important;
    grid-column: 1 / -1 !important;
  }
  .nav-menu-loading, .nav-menu-empty {
    display: block;
    padding: 10px 12px;
    color: #9b8a73;
    font-size: 12px;
    font-weight: 500;
  }
  .header-nav .search-bar-container{flex:0 0 38px!important;width:38px!important;max-width:38px!important;min-width:38px!important;height:38px;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:50%;overflow:visible!important;position:relative;flex-shrink:0!important}
  .header-nav .search-bar-container input{position:absolute;right:0;width:0!important;opacity:0;pointer-events:none;transition:width .2s ease,opacity .2s ease}
  .header-nav .search-bar-container i{display:flex;align-items:center;justify-content:center;width:38px;height:38px;color:#111!important;font-size:18px!important;cursor:pointer}
  .header-nav .search-bar-container.search-open{flex-basis:220px!important;width:220px!important;max-width:220px!important;background:#fff!important;border:1px solid rgba(185,139,34,.35)!important;border-radius:22px;padding:6px 12px!important}
  .header-nav .search-bar-container.search-open input{position:static;width:100%!important;opacity:1;pointer-events:auto}
  .header-nav .search-bar-container.search-open i{width:22px;height:22px;font-size:14px!important}
  .header-nav .currency-switcher-wrap{display:none!important}
  .header-nav .nav-actions{gap:6px!important;flex-shrink:0!important;display:flex!important;align-items:center!important}
  .header-nav .user-nav-status{display:flex!important}
  .header-nav .nav-signin-btn{min-height:32px;padding:5px 12px!important;border-radius:20px!important;background:#fffdf7!important;border:1px solid rgba(185,139,34,.45)!important;color:#24424a!important;font-size:11px!important}
  .header-nav .icon-btn{width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;padding:6px!important;font-size:18px!important;color:#111!important}
  .header-nav .cart-badge{top:-1px!important;right:-1px!important;width:15px!important;height:15px!important;font-size:8px!important}
  .header-nav .mobile-menu-toggle-btn,
  .mobile-menu-toggle-btn{display:none!important}
}
@media (max-width:1024px){.desktop-primary-nav{display:none!important}}


/* --------------------------------------------------------------------------
   Divine Poured header logo integration + showcase text readability
   Uses the extracted horizontal logo supplied for the new premium header.
   -------------------------------------------------------------------------- */
@media (min-width:1025px){
  .header-nav .logo#nav-logo{
    width: clamp(150px, 12vw, 195px) !important;
    min-width: clamp(150px, 12vw, 195px) !important;
    max-width: 200px !important;
    height: 70px !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  .header-nav .logo#nav-logo::before,
  .header-nav .logo#nav-logo::after,
  .header-nav .logo#nav-logo .logo-dot{display:none !important;content:none !important;}
  .header-nav .brand-logo-image{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:left center !important;
    max-width:none !important;
  }
  .header-nav .container.nav-container{
    gap: clamp(8px, 1.2vw, 16px) !important;
  }
}

.mobile-drawer-logo{
  width: 245px !important;
  min-width: 0 !important;
  height: 82px !important;
  font-size: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}
.mobile-drawer-logo::before,
.mobile-drawer-logo::after,
.mobile-drawer-logo .logo-dot{display:none !important;content:none !important;}
.mobile-drawer-logo .brand-logo-image{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:left center !important;
}

/* Make featured home-page cards readable even over bright product photography. */
.showcase-overlay{
  padding: 24px !important;
  background: linear-gradient(
    to top,
    rgba(20, 16, 12, 0.96) 0%,
    rgba(20, 16, 12, 0.78) 42%,
    rgba(20, 16, 12, 0.24) 78%,
    rgba(20, 16, 12, 0) 100%
  ) !important;
}
.showcase-tag{
  color: #f7d57f !important;
  text-shadow: 0 1px 5px rgba(0,0,0,.9) !important;
}
.showcase-title{
  color: #fffdf8 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.95) !important;
  letter-spacing: .01em;
}

@media (max-width:1024px){
  .mobile-drawer-logo{
    width: 205px !important;
    height: 70px !important;
  }
  .showcase-overlay{
    padding: 12px 10px !important;
    background: linear-gradient(
      to top,
      rgba(20,16,12,.98) 0%,
      rgba(20,16,12,.82) 55%,
      rgba(20,16,12,.18) 100%
    ) !important;
  }
  .showcase-tag,.showcase-title{
    text-shadow: 0 2px 7px rgba(0,0,0,.95) !important;
  }
}

/* ==========================================================================
   INFO / POLICY VIEW — HIGH CONTRAST TABS
   Keep the selected tab readable on the warm cream background.
   ========================================================================== */
.info-tab-btn{
  color: #5f5952 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

.info-tab-btn:hover{
  color: #1d1813 !important;
  background: rgba(212, 175, 55, 0.10) !important;
  border-color: rgba(212, 175, 55, 0.28) !important;
}

.info-tab-btn.active{
  color: #201910 !important;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.24), rgba(212, 175, 55, 0.10)) !important;
  border-color: rgba(180, 138, 35, 0.42) !important;
  box-shadow: inset 3px 0 0 #b88b24, 0 2px 8px rgba(72, 56, 26, 0.08) !important;
}

.info-tab-btn.active i{
  color: #8f6816 !important;
}

.info-policy-link{
  width: 100%;
  box-sizing: border-box;
  text-decoration: none !important;
  padding: 12px 16px;
  border: 1px solid transparent;
  background: transparent;
  color: #5f5952 !important;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.3s;
}

.info-policy-link i{
  color: #8f6816 !important;
}

.info-policy-link:hover{
  color: #1d1813 !important;
  background: rgba(212, 175, 55, 0.10);
  border-color: rgba(212, 175, 55, 0.28);
  transform: translateX(2px);
}

#info-view .info-content-panel h3{
  color: #231c16 !important;
  border-bottom-color: rgba(74, 62, 45, 0.16) !important;
}

#info-view .info-content-panel strong{
  color: #28211a !important;
}

#info-view .info-content-panel p,
#info-view .info-content-panel li{
  color: #716a61 !important;
}

/* Mobile paint-stability patch: the fixed blurred animated orb pseudo-elements
   trigger blank/glitchy scrolling on some Android browsers. Disable on mobile. */
@media (max-width: 1024px){
  body::before,
  body::after{
    display: none !important;
  }
}

/* ==========================================================================
   LIGHTHOUSE 100% SEO & ACCESSIBILITY AUDIT ENFORCEMENT
   1. Minimum 48px tap targets for touch devices (Mobile SEO)
   2. Legible font sizes (minimum 12px for all text elements)
   3. WCAG AA compliant color contrast (minimum 4.5:1 ratio for normal text)
   ========================================================================== */

/* 1. Global Color Contrast Compliance */
:root {
  --dp-color-muted: #524e48 !important;
  --dp-color-subtle: #6e6860 !important;
  --text-secondary: #524e48 !important;
  --text-muted: #5e5a53 !important;
}

.gold-text,
.glow-text,
.atelier-crest-text {
  color: #8c6716 !important;
}

/* 2. Legible Font Sizes - Enforce 12px minimum for Google Lighthouse SEO */
.announcement-bar,
.hero-tag,
.badge-content h4,
.badge-content .badge-title,
.badge-content p,
.product-category,
.filter-group-title,
.results-count,
.sort-select,
.view-details-btn,
.cart-badge,
.category-select-all-badge,
.nav-dropdown-item,
.nav-menu-loading,
.nav-menu-empty,
.nav-brand-sub,
.floating-text p,
.mobile-badge-pill,
.showcase-tag,
.bespoke-card-chip,
.badge-seasonal,
.card-qty-btn,
.newsletter-incentive-pill {
  font-size: 12px !important;
}

.category-item label {
  font-size: 13px !important;
  color: #292724 !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

/* 3. Mobile Tap Target Enforcement (minimum 48px x 48px or 44px spaced) */
.icon-btn,
.nav-actions .icon-btn,
.header-nav .icon-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 1024px) {
  .mobile-menu-toggle-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }
}

@media (min-width: 1025px) {
  .header-nav .mobile-menu-toggle-btn,
  .mobile-menu-toggle-btn {
    display: none !important;
  }
}

.mobile-bottom-nav-item {
  min-height: 48px !important;
  min-width: 48px !important;
  height: 56px !important;
  font-size: 12px !important;
  color: #524e48 !important;
}

.mobile-bottom-nav-item.active {
  color: #8c6716 !important;
}

.add-cart-mini {
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.footer-social-link,
.footer-socials .icon-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.footer-links a {
  display: inline-block !important;
  padding: 10px 0 !important;
  min-height: 44px !important;
  font-size: 13px !important;
}

.clear-btn,
.btn-close-filter-mobile {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#floating-gift-finder-btn {
  min-height: 48px !important;
}

/* ==========================================================================
   DIVINE POURED — REFRESH STABILITY V6
   Clean final layer based on the latest uploaded source files.
   ========================================================================== */

/* --- A. No visual route transition during refresh/initialization --- */
.page-section,
.page-section.active {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

#home-view,
#home-view.active {
  opacity: 1 !important;
  transform: none !important;
  padding-top: 0 !important;
}

/* --- B. Desktop header: immutable geometry --- */
.header-nav,
.header-nav.scrolled {
  box-sizing: border-box !important;
  transition: none !important;
}

@media (min-width: 1025px) {
  .header-nav,
  .header-nav.scrolled {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .header-nav .container.nav-container,
  .header-nav.scrolled .container.nav-container {
    height: 82px !important;
    min-height: 82px !important;
    transition: none !important;
  }

  .header-nav .logo#nav-logo {
    height: 78px !important;
    min-height: 78px !important;
  }

  .header-nav .brand-logo-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
}

/* --- C. Mobile header: fixed two-row geometry, scrolled state identical --- */
@media (max-width: 1024px) {
  .header-nav,
  .header-nav.scrolled {
    padding: 0 !important;
    transition: none !important;
  }

  .header-nav .container.nav-container,
  .header-nav.scrolled .container.nav-container {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 12px !important;
    transition: none !important;
  }
}

/* --- D. Mobile hero: prevent headline from touching viewport edges --- */
@media (max-width: 768px) {
  #home-view .hero-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    overflow: hidden !important;
  }

  #home-view .hero-grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 22px !important;
  }

  #home-view .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #home-view .hero-title {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: clamp(2.15rem, 10.8vw, 3.05rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.028em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #home-view .hero-tag {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 375px) {
  #home-view .hero-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #home-view .hero-title {
    font-size: clamp(2.05rem, 10.5vw, 2.55rem) !important;
    letter-spacing: -0.02em !important;
  }
}

/* --- E. Prevent first-paint animated decoration from moving the page --- */
html:not(.dp-app-ready) body::before,
html:not(.dp-app-ready) body::after {
  animation: none !important;
  transform: none !important;
}

html:not(.dp-app-ready) body,
html:not(.dp-app-ready) .header-nav,
html:not(.dp-app-ready) .hero-section,
html:not(.dp-app-ready) .page-section {
  transition: none !important;
}

/* --- F. Reserve logo geometry before decoding --- */
.header-nav .brand-logo-image {
  aspect-ratio: 250 / 78 !important;
}

/* --- G. Header containment: style only so submenus overflow to the front --- */
.header-nav {
  contain: style !important;
  overflow: visible !important;
}

/* ==========================================================================
   DIVINE POURED — HERO OVERLAP FIX (v6.2)
   Root cause: grid items default to min-width:auto, so an unbroken word in
   .hero-title (e.g. "Handcrafted") can force the text column wider than its
   assigned track, pushing it over the image column. This happened between
   the 768px and 1025px breakpoints, which the earlier "Section D" mobile
   fix did not cover. min-width:0 lets the column shrink to its track width
   so the heading wraps inside its own space instead of overlapping the
   image, at every viewport size — this rule intentionally has no
   @media guard.
   ========================================================================== */
#home-view .hero-content,
.hero-content {
  min-width: 0 !important;
}
#home-view .hero-title,
.hero-title {
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* ==========================================================================
   MOBILE PRODUCT CARD PRICE & BADGE OVERLAP FIX (v6.4)
   Fixes horizontal collision/overlap between slashed original price (e.g. Rs. 1,499)
   and discount badge (e.g. 33% OFF) across all mobile product grids.
   Ensures clean flex wrapping, proper font balance, and non-overlapping layouts.
   ========================================================================== */
@media (max-width: 768px) {
  .product-footer-row,
  .products-grid .product-footer-row,
  .seasonal-products-grid .product-footer-row,
  .mini-products-grid .product-footer-row {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding-top: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .product-price-block,
  .products-grid .product-price-block,
  .seasonal-products-grid .product-price-block,
  .mini-products-grid .product-price-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
  }

  .product-price,
  .products-grid .product-price,
  .seasonal-products-grid .product-price,
  .mini-products-grid .product-price {
    font-size: clamp(0.88rem, 2.8vw, 1.05rem) !important;
    font-weight: 700 !important;
    color: #1a120b !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
    margin-bottom: 2px !important;
  }

  .product-price-sub,
  .products-grid .product-price-sub,
  .seasonal-products-grid .product-price-sub,
  .mini-products-grid .product-price-sub {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 2px !important;
    column-gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    position: static !important;
    line-height: 1.2 !important;
  }

  .original-price-slashed,
  .products-grid .original-price-slashed,
  .seasonal-products-grid .original-price-slashed,
  .mini-products-grid .original-price-slashed {
    display: inline-block !important;
    text-decoration: line-through !important;
    color: #4b443c !important;
    font-size: 0.70rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .discount-badge,
  .products-grid .discount-badge,
  .seasonal-products-grid .discount-badge,
  .mini-products-grid .discount-badge {
    display: inline-flex !important;
    align-items: center !important;
    color: #0d4621 !important;
    background: #e6f4ea !important;
    border: 1px solid #a3d9b8 !important;
    font-size: 0.60rem !important;
    font-weight: 700 !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
  }

  .product-card-cart-action,
  .products-grid .product-card-cart-action,
  .seasonal-products-grid .product-card-cart-action,
  .mini-products-grid .product-card-cart-action {
    flex: 0 0 auto !important;
    align-self: flex-end !important;
  }

  .add-cart-mini,
  .products-grid .add-cart-mini,
  .seasonal-products-grid .add-cart-mini,
  .mini-products-grid .add-cart-mini {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   AUTHENTICATION MODAL — COMPLETE VIEWPORT & RESPONSIVE DISPLAY (v6.5)
   Fixes: Bottom clipping of "Sign In Securely" button, inner scrollbar,
   awkward cut-offs. Displays the complete card beautifully on desktop/laptop,
   with fluid scrollability if window height is very small, and seamless
   full-screen experience on mobile.
   ========================================================================== */
#auth-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 99999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(24, 23, 21, 0.76) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 20px 16px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

#auth-modal.open {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#auth-modal .modal-card,
#auth-modal .checkout-modal-card {
  width: 100% !important;
  max-width: 480px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.25) !important;
  margin: auto !important;
  position: relative !important;
  transform: none !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

#auth-modal #close-auth-modal {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #faf6ee !important;
  border: 1px solid rgba(197, 155, 39, 0.3) !important;
  color: #1a120b !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

#auth-modal #close-auth-modal:hover {
  background: var(--accent-gold) !important;
  color: #ffffff !important;
}

#auth-modal .checkout-body {
  max-height: none !important;
  overflow: visible !important;
  padding: 24px 28px 22px 28px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#auth-modal .checkout-body h3 {
  font-family: var(--font-heading) !important;
  font-size: 1.25rem !important;
  color: var(--text-primary) !important;
  text-align: center !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: 0.5px !important;
}

#auth-modal .form-group {
  margin-bottom: 11px !important;
}

#auth-modal .form-label {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 4px !important;
  display: block !important;
}

#auth-modal .form-control {
  font-size: 0.92rem !important;
  min-height: 42px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  border: 1.5px solid rgba(197, 155, 39, 0.3) !important;
  background: #fafaf8 !important;
  color: #1a120b !important;
}

#auth-modal .form-control:focus {
  background: #ffffff !important;
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.2) !important;
  outline: none !important;
}

#auth-modal .form-control.otp-input-control,
.otp-input-control {
  font-family: 'SF Pro Display', 'Courier New', Courier, monospace !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 10px !important;
  text-indent: 10px !important;
  text-align: center !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  border: 2px solid rgba(197, 155, 39, 0.45) !important;
  background: #ffffff !important;
  color: #1a120b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.25s ease !important;
}

#auth-modal .form-control.otp-input-control:focus,
.otp-input-control:focus {
  background: #ffffff !important;
  border-color: var(--accent-gold, #c59b27) !important;
  box-shadow: 0 0 0 4px rgba(197, 155, 39, 0.25), 0 4px 12px rgba(197, 155, 39, 0.15) !important;
  outline: none !important;
}


#auth-modal .captcha-answer-row {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

#auth-modal .captcha-answer-row .form-control,
#auth-modal .captcha-answer-row .captcha-answer-input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 50px !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  font-family: monospace, monospace !important;
  letter-spacing: 1px !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

#auth-modal .captcha-answer-row button,
#auth-modal #refresh-login-captcha,
#auth-modal .captcha-refresh-btn {
  flex: 0 0 50px !important;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
}

#auth-modal .btn-primary,
#auth-modal .btn-secondary:not(#refresh-login-captcha):not(.captcha-refresh-btn):not(#send-login-otp-btn) {
  min-height: 46px !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#auth-modal #send-login-otp-btn,
#send-login-otp-btn,
#page-send-login-otp-btn {
  display: none !important;
  min-height: 44px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Explicitly hide all OTP elements when in Password mode */
#auth-modal:not(.otp-mode) #login-otp-group,
#auth-modal:not(.otp-mode) #send-login-otp-btn,
#user-login-form:not(.otp-mode) #login-otp-group,
#user-login-form:not(.otp-mode) #send-login-otp-btn,
#standalone-login-form:not(.otp-mode) #page-otp-wrap,
#standalone-login-form:not(.otp-mode) #page-send-login-otp-btn {
  display: none !important;
}

/* OTP Mode: Display the Send OTP button and OTP inputs, and hide password */
#auth-modal.otp-mode #send-login-otp-btn,
#auth-modal #send-login-otp-btn.is-active,
#send-login-otp-btn.is-active,
#page-send-login-otp-btn.is-active,
#standalone-login-form.otp-mode #page-send-login-otp-btn {
  display: flex !important;
}

#auth-modal.otp-mode #login-password-group,
#auth-modal.otp-mode #login-forgot-row,
#auth-modal.otp-mode #login-captcha-wrap,
#standalone-login-form.otp-mode #page-password-wrap,
#standalone-login-form.otp-mode #page-captcha-wrap {
  display: none !important;
}

#auth-modal .auth-msg-box {
  display: none;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 14px;
  box-sizing: border-box;
}

#auth-modal .auth-msg-box.error {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  background: #fdf2f2 !important;
  color: #b91c1c !important;
  border: 1px solid rgba(185, 28, 28, 0.32) !important;
}

#auth-modal .auth-msg-box.success {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  background: #f0fdf4 !important;
  color: #15803d !important;
  border: 1px solid rgba(21, 128, 61, 0.32) !important;
}

#auth-modal .auth-msg-box.info {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  background: rgba(197, 155, 39, 0.08) !important;
  color: #8c6716 !important;
  border: 1px solid rgba(197, 155, 39, 0.32) !important;
}

#auth-modal p {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  font-size: 0.84rem !important;
}

/* Mobile full-screen view (Screen <= 768px) */
@media (max-width: 768px) {
  #auth-modal {
    padding: 0 !important;
    background: #ffffff !important;
    display: none !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  #auth-modal.open {
    display: block !important;
  }

  #auth-modal .modal-card,
  #auth-modal .checkout-modal-card {
    max-width: 100% !important;
    min-height: 100% !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 0 80px 0 !important;
  }

  #auth-modal #close-auth-modal {
    display: none !important;
  }

  .mobile-auth-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    background: #ffffff !important;
    border-bottom: 1.5px solid rgba(197, 155, 39, 0.3) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #auth-modal .checkout-body {
    padding: 18px 20px 60px 20px !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }
}

/* Auth Method Selector (Password vs Email OTP) */
.auth-method-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: #f7f4ed;
  padding: 4px;
  border-radius: 8px;
  margin: 4px 0 16px 0;
  border: 1px solid rgba(185, 139, 34, 0.22);
}
.auth-method-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 0.86rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #5c5245;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.auth-method-tab:hover {
  color: #1a120b;
  background: rgba(255, 255, 255, 0.6);
}
.auth-method-tab.active {
  background: #ffffff !important;
  color: #8c6716 !important;
  font-weight: 700 !important;
  border-color: rgba(185, 139, 34, 0.3) !important;
  box-shadow: 0 2px 8px rgba(36, 27, 19, 0.08) !important;
}

/* ==========================================================================
   ADMIN STANDALONE CONSOLE ZERO-FLASH & SPACING OPTIMIZATION
   ========================================================================== */
#admin-view,
.page-section#admin-view {
  padding-top: clamp(20px, 3vw, 28px) !important;
}

html.admin-is-authed #admin-login-gate {
  display: none !important;
}
html.admin-is-authed #admin-panel {
  display: flex !important;
}
html.admin-is-authed #admin-signout-btn {
  display: inline-flex !important;
}
html.admin-needs-auth #admin-login-gate {
  display: block !important;
}
html.admin-needs-auth #admin-panel {
  display: none !important;
}

/* ==========================================================================
   ATELIER MASTER LUXURY PRODUCT CARD & UNCLIPPED STEPPER DISPLAY
   Comprehensive resolution for Screenshot 2 & user feedback:
   1. Unclipped Quantity Stepper with fully visible Trash/Minus button
   2. Badge & Wishlist Heart non-overlapping safe layout
   3. Elegant Category & Title display without awkward truncation
   4. High-contrast luxury pricing with emerald discount pill
   ========================================================================== */

.product-card {
  background: #ffffff !important;
  border: 1px solid rgba(197, 155, 39, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(110, 93, 71, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.product-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(197, 155, 39, 0.45) !important;
  box-shadow: 0 14px 32px rgba(110, 93, 71, 0.12), 0 3px 10px rgba(197, 155, 39, 0.12) !important;
}

/* Wishlist Heart Button - High z-index, frosted glass circle */
.wishlist-heart-btn,
.product-image-container .wishlist-heart-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 15 !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(197, 155, 39, 0.28) !important;
  color: #524e48 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.92rem !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.wishlist-heart-btn:hover {
  transform: scale(1.1) !important;
  color: #d32f2f !important;
  background: #ffffff !important;
  border-color: rgba(211, 47, 47, 0.35) !important;
}

.wishlist-heart-btn.active {
  color: #d32f2f !important;
  background: #ffffff !important;
  border-color: rgba(211, 47, 47, 0.4) !important;
}

/* Product Badges - Left corner with safe width boundary away from heart button */
.product-badge-group,
.product-image-container .product-badge-group {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 10 !important;
  max-width: calc(100% - 52px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  pointer-events: none !important;
}

.stock-badge,
.sale-badge,
.product-seasonal-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 4px 9px !important;
  border-radius: 20px !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.stock-badge.low-fomo {
  background: linear-gradient(135deg, #e65100 0%, #c62828 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(198, 40, 40, 0.32) !important;
  text-transform: none !important;
}

.stock-badge.low-fomo i {
  font-size: 0.72rem !important;
  color: #ffeb3b !important;
}

.stock-badge.preorder {
  background: #1a4d5c !important;
  color: #ffffff !important;
}

.stock-badge.sold {
  background: rgba(30, 24, 18, 0.88) !important;
  color: #d1c7bd !important;
}

.sale-badge {
  background: linear-gradient(135deg, #a47a1c 0%, #8c6716 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(140, 103, 22, 0.25) !important;
}

/* Category & Title Typography */
.product-info-panel {
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}

.product-category {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #8c6716 !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
}

.product-title {
  font-family: var(--dp-font-body, "Plus Jakarta Sans", sans-serif) !important;
  font-size: clamp(0.92rem, 1.05vw, 1.02rem) !important;
  font-weight: 600 !important;
  color: #1a120b !important;
  line-height: 1.35 !important;
  margin: 0 0 6px 0 !important;
  min-height: 2.7em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-transform: none !important;
}

/* Footer Row & Pricing */
.product-footer-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(197, 155, 39, 0.15) !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.product-price-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: visible !important;
}

.product-price {
  font-size: 1.06rem !important;
  font-weight: 700 !important;
  color: #1a120b !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.product-price-sub {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 2px !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
}

.original-price-slashed {
  text-decoration: line-through !important;
  color: #4b443c !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.discount-badge {
  color: #0d4621 !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  background: #e6f4ea !important;
  border: 1px solid #a3d9b8 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}

/* Cart Action Container & Stepper - Fluid, never sliced or clipped */
.product-card-cart-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
  width: auto !important;
  min-width: 34px !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
}

.add-cart-mini {
  background: linear-gradient(135deg, #a47a1c 0%, #8c6716 100%) !important;
  color: #ffffff !important;
  border: none !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(140, 103, 22, 0.28) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  font-size: 0.85rem !important;
}

.add-cart-mini:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(140, 103, 22, 0.4) !important;
}

.card-qty-stepper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(140, 103, 22, 0.45) !important;
  border-radius: 20px !important;
  padding: 2px 4px !important;
  box-shadow: 0 2px 8px rgba(140, 103, 22, 0.15) !important;
  gap: 3px !important;
  height: 32px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.card-qty-btn {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

.card-qty-btn.card-qty-minus {
  background: #fff5f5 !important;
  color: #c62828 !important;
  border: 1px solid rgba(198, 40, 40, 0.22) !important;
}

.card-qty-btn.card-qty-minus:hover {
  background: #c62828 !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

.card-qty-val {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #1a120b !important;
  min-width: 16px !important;
  text-align: center !important;
  line-height: 1 !important;
  padding: 0 2px !important;
}

.card-qty-btn.card-qty-plus {
  background: rgba(140, 103, 22, 0.12) !important;
  color: #8c6716 !important;
  border: 1px solid rgba(140, 103, 22, 0.25) !important;
}

.card-qty-btn.card-qty-plus:hover {
  background: #8c6716 !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

/* Mobile fine-tuning */
@media (max-width: 480px) {
  .product-info-panel {
    padding: 10px 9px 11px !important;
  }
  .product-title {
    font-size: 0.84rem !important;
    min-height: 2.5em !important;
    margin-bottom: 4px !important;
  }
  .product-price {
    font-size: 0.95rem !important;
  }
  .product-footer-row {
    padding-top: 6px !important;
    gap: 4px !important;
  }
  .card-qty-stepper {
    height: 28px !important;
    padding: 1px 3px !important;
    gap: 2px !important;
  }
  .card-qty-btn {
    width: 21px !important;
    height: 21px !important;
    font-size: 0.65rem !important;
  }
  .card-qty-val {
    font-size: 0.80rem !important;
    min-width: 14px !important;
  }
  .add-cart-mini {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
  }
  .wishlist-heart-btn,
  .product-image-container .wishlist-heart-btn {
    top: 7px !important;
    right: 7px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 0.82rem !important;
  }
  .product-badge-group,
  .product-image-container .product-badge-group {
    top: 7px !important;
    left: 7px !important;
    max-width: calc(100% - 44px) !important;
  }
  .stock-badge,
  .sale-badge,
  .product-seasonal-badge {
    font-size: 0.62rem !important;
    padding: 3px 6px !important;
  }
}

@media (max-width: 768px) {
  #home-view .products-grid,
  #home-view .seasonal-products-grid,
  .products-grid,
  .seasonal-products-grid,
  #budget-gifts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 10px !important;
  }
}

/* ==========================================================================
   ADMIN PDF CATALOGUE GENERATOR & INVENTORY SELECTION STYLES
   ========================================================================== */
.admin-inventory-row.selected-catalog-row {
  background-color: rgba(197, 155, 39, 0.09) !important;
  border-left: 3px solid var(--accent-gold, #c59b27) !important;
}

.admin-td-select {
  text-align: center;
  width: 46px;
  vertical-align: middle;
}

.catalog-item-checkbox,
#catalog-select-all {
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: #c59b27;
}

.catalog-btn-pdf {
  background: linear-gradient(135deg, #1f4b52 0%, #153439 100%) !important;
  border: 1.5px solid #c59b27 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(31,75,82,0.3) !important;
  transition: all 0.2s ease !important;
}

.catalog-btn-pdf:hover {
  background: linear-gradient(135deg, #285f67 0%, #1a4248 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(197, 155, 39, 0.35) !important;
}

/* Catalogue Modal & Preview */
#admin-catalog-pdf-modal {
  z-index: 100005 !important;
  display: none;
}
#admin-catalog-pdf-modal.open {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#admin-catalog-pdf-modal .modal-card {
  max-width: 980px;
  width: 95%;
  max-height: 92vh;
  background: #ffffff !important;
  border: 1.5px solid var(--accent-gold, #c59b27) !important;
  border-radius: 18px !important;
  color: #1a120b !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.28) !important;
  padding: 26px 30px !important;
  position: relative;
  overflow-y: auto;
}

.catalog-selected-thumb-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #faf7f0;
  border: 1px solid rgba(197, 155, 39, 0.35);
  border-radius: 20px;
  padding: 3px 10px 3px 4px;
  font-size: 0.78rem;
  color: #342819;
  font-weight: 600;
  flex-shrink: 0;
}

.catalog-selected-thumb-chip img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(197, 155, 39, 0.4);
}

.catalog-selected-thumb-chip .remove-chip-btn {
  background: none;
  border: none;
  color: #991b1b;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 2px;
  line-height: 1;
}

.catalog-selected-thumb-chip .remove-chip-btn:hover {
  color: #dc2626;
}

@media (max-width: 768px) {
  .admin-inventory-row .admin-td-select {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: auto !important;
    z-index: 5 !important;
  }
}

/* ==========================================================================
   RATE & REVIEW MODAL (High-Contrast Luxury Gallery Light Theme)
   ========================================================================== */
#review-modal.modal-overlay {
  background: rgba(24, 23, 21, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 100000 !important;
}

#review-modal .modal-card {
  max-width: 520px !important;
  width: 94% !important;
  background: #ffffff !important;
  border: 1px solid rgba(24, 23, 21, 0.14) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 70px rgba(24, 23, 21, 0.22) !important;
  color: #181715 !important;
  max-height: 92vh !important;
  margin: auto !important;
}

#review-modal .review-modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 18px 24px !important;
  border-bottom: 1px solid rgba(24, 23, 21, 0.09) !important;
  background: #fbfaf7 !important;
}

#review-modal .review-modal-header h3,
#review-modal h3 {
  margin: 0 !important;
  font-family: var(--font-heading, "Cinzel", Georgia, serif) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #181715 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: 0.02em !important;
}

#review-modal .review-modal-header h3 i,
#review-modal h3 i {
  color: #e6a817 !important;
}

#review-modal .close-modal-btn {
  position: static !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #f7f5f0 !important;
  border: 1px solid rgba(24, 23, 21, 0.10) !important;
  color: #292724 !important;
  font-size: 1.3rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  transition: all 0.2s ease !important;
}

#review-modal .close-modal-btn:hover {
  background: #181715 !important;
  color: #ffffff !important;
  border-color: #181715 !important;
  transform: scale(1.06);
}

#review-modal form,
#review-modal #customer-review-form {
  padding: 22px 24px !important;
  background: #ffffff !important;
}

#review-modal .review-product-banner {
  margin-bottom: 18px !important;
  padding: 12px 14px !important;
  background: #f7f5f0 !important;
  border: 1px solid rgba(24, 23, 21, 0.09) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

#review-modal #review-form-product-img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  border: 1px solid rgba(24, 23, 21, 0.08) !important;
  background: #eeeae0 !important;
  flex-shrink: 0 !important;
}

#review-modal #review-form-product-title {
  font-weight: 700 !important;
  color: #181715 !important;
  font-size: 0.95rem !important;
  font-family: var(--font-heading, "Cinzel", Georgia, serif) !important;
  margin-bottom: 3px !important;
  line-height: 1.3 !important;
}

#review-modal #review-form-order-badge {
  font-size: 0.74rem !important;
  color: #1f4b52 !important;
  font-weight: 600 !important;
  background: rgba(31, 75, 82, 0.08) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#review-modal .star-rating-selector {
  font-size: 2.2rem !important;
  color: #e6a817 !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 6px 0 !important;
}

#review-modal .star-rating-selector i {
  transition: transform 0.15s ease, color 0.15s ease !important;
  color: #e6a817;
}

#review-modal .star-rating-selector i:hover {
  transform: scale(1.15) !important;
}

#review-modal #star-rating-label {
  font-size: 0.84rem !important;
  color: #181715 !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
}

#review-modal .form-group {
  margin-bottom: 16px !important;
  text-align: left !important;
}

#review-modal .form-label {
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #181715 !important;
  margin-bottom: 6px !important;
}

#review-modal .form-control {
  width: 100% !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(24, 23, 21, 0.16) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  color: #181715 !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

#review-modal textarea.form-control {
  min-height: 80px;
  resize: vertical;
}

#review-modal .form-control:focus {
  border-color: #1f4b52 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(31, 75, 82, 0.15) !important;
  background: #ffffff !important;
  color: #181715 !important;
}

#review-modal .form-control::placeholder {
  color: #8c877e !important;
  opacity: 1 !important;
}

#review-modal #review-form-submit-btn,
#review-modal button[type="submit"] {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: #181715 !important;
  color: #ffffff !important;
  border: 1px solid #181715 !important;
  border-radius: 8px !important;
  padding: 13px 20px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 4px 16px rgba(24, 23, 21, 0.12) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-top: 18px !important;
}

#review-modal #review-form-submit-btn:hover,
#review-modal button[type="submit"]:hover {
  background: #1f4b52 !important;
  border-color: #1f4b52 !important;
  box-shadow: 0 6px 22px rgba(31, 75, 82, 0.22) !important;
  transform: translateY(-1px) !important;
}

/* --- LIGHTHOUSE ACCESSIBILITY & PERFORMANCE ENHANCEMENTS --- */
.nav-link.active {
  color: #6d4f10 !important;
  font-weight: 700 !important;
}
.hero-desc {
  color: #38332c !important;
}
.product-title a {
  display: inline-block !important;
  min-height: 40px !important;
  padding: 4px 0 !important;
}
.floating-card-title,
.floating-text h4 {
  font-family: var(--dp-font-heading) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #1a120b !important;
  margin: 0 0 2px 0 !important;
}
@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2') format('woff2');
}

#product-form-modal #form-product-gallery-files {
  display: none !important;
}
#product-form-modal .admin-gallery-manager {
  margin-top: 16px;
  padding: 14px;
  border: 1.5px solid rgba(31, 75, 82, 0.2);
  border-radius: 10px;
  background: #faf9f6;
}
#product-form-modal .admin-gallery-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
#product-form-modal .admin-gallery-manager-header > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
#product-form-modal .admin-gallery-manager-header strong {
  color: #181715;
  font-size: 0.9rem;
}
#product-form-modal .admin-gallery-manager-header span {
  color: #716c64;
  font-size: 0.72rem;
}
#product-form-modal .admin-gallery-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 7px;
  background: #1f4b52;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
#product-form-modal .admin-gallery-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#product-form-modal .admin-gallery-empty {
  padding: 18px 12px;
  border: 1.5px dashed rgba(24, 23, 21, 0.18);
  border-radius: 8px;
  color: #716c64;
  text-align: center;
  font-size: 0.78rem;
  background: #fff;
}
#product-form-modal .admin-gallery-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 11px;
  padding: 9px;
  border: 1.5px solid rgba(24, 23, 21, 0.12);
  border-radius: 9px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
#product-form-modal .admin-gallery-item.primary {
  border-color: #c59b27;
  box-shadow: 0 0 0 2px rgba(197, 155, 39, 0.1);
}
#product-form-modal .admin-gallery-item.dragging {
  opacity: 0.45;
}
#product-form-modal .admin-gallery-item.drag-over {
  border-color: #1f4b52;
  box-shadow: 0 0 0 2px rgba(31, 75, 82, 0.12);
}
#product-form-modal .admin-gallery-item > img {
  width: 76px;
  height: 76px;
  border-radius: 7px;
  object-fit: cover;
  background: #f2efe8;
}
#product-form-modal .admin-gallery-item-content {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
#product-form-modal .admin-gallery-item-heading {
  display: flex;
  align-items: center;
  gap: 7px;
}
#product-form-modal .admin-gallery-item-heading strong {
  color: #181715;
  font-size: 0.78rem;
}
#product-form-modal .admin-gallery-primary-badge,
#product-form-modal .admin-gallery-pending-badge {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#product-form-modal .admin-gallery-primary-badge {
  background: #fff4c7;
  color: #7a5700;
}
#product-form-modal .admin-gallery-pending-badge {
  background: #e5f3f5;
  color: #1f4b52;
}
#product-form-modal .admin-gallery-item .form-control {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(24, 23, 21, 0.15);
  border-radius: 6px;
  background: #fff;
  color: #181715;
  font-size: 0.74rem;
}
#product-form-modal .admin-gallery-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
#product-form-modal .admin-gallery-item-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(24, 23, 21, 0.15);
  border-radius: 6px;
  background: #f8f6f0;
  color: #4f4941;
  cursor: pointer;
}
#product-form-modal .admin-gallery-item-actions button:hover:not(:disabled) {
  border-color: #1f4b52;
  color: #1f4b52;
}
#product-form-modal .admin-gallery-item-actions button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
#product-form-modal .admin-gallery-item-actions button[aria-label="Set as primary image"]:not(:disabled) {
  border-color: #c59b27;
  color: #8c6716;
}
#product-form-modal .admin-gallery-item-actions button[aria-label="Delete image"]:not(:disabled) {
  border-color: rgba(190, 45, 45, 0.3);
  color: #b3261e;
}
#product-form-modal .admin-gallery-item-actions button[aria-label="Enhance with AI Studio"]:not(:disabled) {
  border-color: #c59b27;
  color: #c59b27;
  background: linear-gradient(135deg, #fdfbf7, #fef9ea);
}
#product-form-modal .admin-gallery-item-actions button[aria-label="Enhance with AI Studio"]:hover:not(:disabled) {
  background: #fdf2d0;
  border-color: #8c6716;
  color: #8c6716;
  box-shadow: 0 2px 8px rgba(197, 155, 39, 0.25);
}
#product-form-modal .admin-gallery-status {
  min-height: 16px;
  margin-top: 8px;
  color: #716c64;
  font-size: 0.72rem;
  font-weight: 600;
}
#product-form-modal .admin-gallery-status.success {
  color: #2e7d32;
}
#product-form-modal .admin-gallery-status.error {
  color: #b3261e;
}
#product-form-modal .admin-gallery-status.loading {
  color: #1f4b52;
}
@media (max-width: 600px) {
  #product-form-modal .admin-gallery-manager-header {
    align-items: stretch;
    flex-direction: column;
  }
  #product-form-modal .admin-gallery-add-btn {
    min-height: 42px;
  }
  #product-form-modal .admin-gallery-item {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  #product-form-modal .admin-gallery-item > img {
    width: 64px;
    height: 64px;
  }
  #product-form-modal .admin-gallery-item-actions {
    flex-wrap: wrap;
  }
}

.product-gallery {
  width: 100%;
  outline: none;
  user-select: none;
}
.product-gallery:focus-visible {
  box-shadow: 0 0 0 3px rgba(31, 75, 82, 0.22);
  border-radius: 16px;
}
.product-gallery-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 16px;
  background: #f1ede5;
  border: 1px solid rgba(185, 139, 34, 0.26);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  touch-action: pan-y;
}
.product-gallery-main-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.18s ease;
}
.product-gallery-main-image.is-changing {
  opacity: 0.35;
}
.product-gallery-control,
.product-gallery-zoom {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(24, 23, 21, 0.72);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.product-gallery-control:hover,
.product-gallery-zoom:hover {
  background: #1f4b52;
  transform: scale(1.05);
}
.product-gallery-control:focus-visible,
.product-gallery-zoom:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}
.product-gallery-prev {
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
}
.product-gallery-next {
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}
.product-gallery-prev:hover {
  transform: translateY(-50%) scale(1.05);
}
.product-gallery-next:hover {
  transform: translateY(-50%) scale(1.05);
}
.product-gallery-zoom {
  right: 14px;
  top: 14px;
  width: 36px;
  height: 36px;
  font-size: 0.82rem;
}
.product-gallery-counter {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 20px;
  background: rgba(24, 23, 21, 0.72);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(5px);
}
.product-gallery-thumbnails {
  display: flex;
  gap: 9px;
  margin-top: 12px;
  padding: 2px 2px 5px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(31, 75, 82, 0.35) transparent;
}
.product-gallery-thumbnail {
  flex: 0 0 66px;
  width: 66px;
  height: 66px;
  padding: 3px;
  overflow: hidden;
  border: 2px solid rgba(24, 23, 21, 0.13);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  opacity: 0.68;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.product-gallery-thumbnail:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.product-gallery-thumbnail.active {
  border-color: #c59b27;
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(197, 155, 39, 0.16);
}
.product-gallery-thumbnail:focus-visible {
  outline: 3px solid rgba(31, 75, 82, 0.25);
  outline-offset: 2px;
}
.product-gallery-thumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 5px;
}
.product-gallery.single-image .product-gallery-stage {
  border-radius: 14px;
}
.detail-image-wrapper .product-gallery {
  width: 100%;
}
.detail-image-wrapper .product-gallery-stage {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  box-shadow: none;
}
.detail-image-wrapper .product-gallery-thumbnails {
  padding: 8px 12px 12px;
  background: #fff;
}
.product-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 34px 76px;
  background: rgba(12, 10, 8, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.product-gallery-lightbox.open {
  display: flex;
}
.product-gallery-lightbox figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: min(90vw, 1200px);
  max-height: 92vh;
  margin: 0;
}
.product-gallery-lightbox figure img {
  display: block;
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.product-gallery-lightbox figcaption {
  max-width: 80vw;
  margin-top: 12px;
  color: #f7f3ea;
  font-size: 0.8rem;
  line-height: 1.4;
  text-align: center;
}
.product-gallery-lightbox-close,
.product-gallery-lightbox-prev,
.product-gallery-lightbox-next {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.product-gallery-lightbox-close:hover,
.product-gallery-lightbox-prev:hover,
.product-gallery-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}
.product-gallery-lightbox-close:focus-visible,
.product-gallery-lightbox-prev:focus-visible,
.product-gallery-lightbox-next:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.product-gallery-lightbox-close {
  right: 22px;
  top: 22px;
}
.product-gallery-lightbox-prev {
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}
.product-gallery-lightbox-next {
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}
.product-gallery-lightbox-prev:hover,
.product-gallery-lightbox-next:hover {
  transform: translateY(-50%) scale(1.05);
}
body.product-gallery-lightbox-open {
  overflow: hidden;
}
@media (max-width: 700px) {
  .product-gallery-stage {
    border-radius: 12px;
  }
  .product-gallery-control {
    width: 34px;
    height: 34px;
  }
  .product-gallery-prev {
    left: 10px;
  }
  .product-gallery-next {
    right: 10px;
  }
  .product-gallery-zoom {
    right: 10px;
    top: 10px;
  }
  .product-gallery-counter {
    left: 10px;
    bottom: 10px;
  }
  .product-gallery-thumbnail {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
  }
  .product-gallery-lightbox {
    padding: 56px 14px 28px;
  }
  .product-gallery-lightbox figure img {
    max-width: calc(100vw - 28px);
    max-height: 76vh;
  }
  .product-gallery-lightbox-prev,
  .product-gallery-lightbox-next {
    top: auto;
    bottom: 18px;
    transform: none;
  }
  .product-gallery-lightbox-prev {
    left: 18px;
  }
  .product-gallery-lightbox-next {
    right: 18px;
  }
  .product-gallery-lightbox-prev:hover,
  .product-gallery-lightbox-next:hover {
    transform: scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-gallery-main-image,
  .product-gallery-control,
  .product-gallery-zoom,
  .product-gallery-thumbnail,
  .product-gallery-lightbox button {
    transition: none !important;
  }
}


/* ==========================================================================
   FESTIVE SPECIAL & MOBILE BANNER / BADGE REFINEMENT PATCH
   Ensures Festive Special banner and badges are balanced, elegant, and never
   larger or more dominant than the actual product art photos on mobile screens.
   ========================================================================== */
.seasonal-section-header {
  text-align: center;
  margin-bottom: 24px;
}
.seasonal-btn-wrap {
  margin-top: 16px;
}
#seasonal-products-grid {
  margin-top: 24px;
}

.product-image-container .badge-tag,
.product-image-container .seasonal-badge,
.product-image-container .product-seasonal-badge {
  position: absolute !important;
  top: 7px !important;
  left: 7px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 10 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.product-image-container {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  position: relative !important;
  overflow: hidden !important;
}

.product-image-container > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product-image-container .product-image,
.product-image-container > a > .product-image,
.product-card .product-image,
.product-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

@media (max-width: 768px) {
  /* Festive Showcase Container & Header on Tablet / Mobile */
  #seasonal-showcase-section {
    padding: 12px 10px 14px 10px !important;
    border-radius: 14px !important;
  }
  #seasonal-showcase-section .section-header,
  #seasonal-showcase-section .seasonal-section-header {
    margin-bottom: 8px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid rgba(197, 155, 39, 0.15) !important;
  }
  #seasonal-showcase-section .seasonal-badge {
    font-size: 0.60rem !important;
    padding: 2px 8px !important;
    margin-bottom: 3px !important;
    letter-spacing: 0.4px !important;
    line-height: 1.2 !important;
  }
  #seasonal-showcase-section .section-title {
    font-size: clamp(0.98rem, 3.6vw, 1.15rem) !important;
    margin: 2px 0 3px 0 !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }
  #seasonal-showcase-section .section-description {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    margin: 0 auto 5px auto !important;
    color: #6d6255 !important;
    max-width: 92% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  #seasonal-showcase-section .seasonal-btn-wrap,
  #seasonal-showcase-section .section-header > div {
    margin-top: 4px !important;
  }
  #seasonal-showcase-section .seasonal-btn {
    padding: 4px 12px !important;
    font-size: 0.70rem !important;
    border-radius: 16px !important;
    box-shadow: 0 3px 10px rgba(184, 51, 42, 0.25) !important;
  }
  #seasonal-showcase-section .seasonal-products-grid,
  #seasonal-products-grid {
    margin-top: 8px !important;
    gap: 10px 8px !important;
  }

  /* Product Card Badges on Tablet / Mobile */
  .product-badge-group,
  .product-image-container .product-badge-group {
    top: 8px !important;
    left: 8px !important;
    max-width: calc(100% - 50px) !important;
    z-index: 10 !important;
  }
  .stock-badge,
  .sale-badge,
  .product-seasonal-badge {
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 14px !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  }
  .product-seasonal-badge i {
    font-size: 0.66rem !important;
    margin-right: 3px !important;
  }
}

@media (max-width: 480px) {
  /* Ultra-Compact Showcase Banner Header for Small Mobile Screens */
  #seasonal-showcase-section {
    padding: 10px 8px 12px 8px !important;
  }
  #seasonal-showcase-section .section-header,
  #seasonal-showcase-section .seasonal-section-header {
    margin-bottom: 6px !important;
    padding-bottom: 2px !important;
  }
  #seasonal-showcase-section .seasonal-badge {
    font-size: 0.62rem !important;
    padding: 2px 7px !important;
    margin-bottom: 2px !important;
  }
  #seasonal-showcase-section .section-title {
    font-size: 0.92rem !important;
    margin: 1px 0 2px 0 !important;
    line-height: 1.2 !important;
  }
  /* Hide verbose paragraph on small screens to keep actual item photos visually prominent */
  #seasonal-showcase-section .section-description {
    display: none !important;
  }
  #seasonal-showcase-section .seasonal-btn-wrap,
  #seasonal-showcase-section .section-header > div {
    margin-top: 3px !important;
  }
  #seasonal-showcase-section .seasonal-btn {
    padding: 3px 10px !important;
    font-size: 0.66rem !important;
    border-radius: 14px !important;
  }
  #seasonal-showcase-section .seasonal-products-grid,
  #seasonal-products-grid {
    margin-top: 6px !important;
    gap: 8px 6px !important;
  }

  .product-badge-group,
  .product-image-container .product-badge-group {
    top: 7px !important;
    left: 7px !important;
    max-width: calc(100% - 46px) !important;
  }
  .stock-badge,
  .sale-badge,
  .product-seasonal-badge {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    padding: 3px 7px !important;
    border-radius: 12px !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  }
  .product-seasonal-badge i {
    font-size: 0.64rem !important;
    margin-right: 2px !important;
  }
}

/* ==========================================================================
   EXPERIMENTAL TRIAL: ALL TEXT & ACTIONS OVERLAY ON IMAGE
   All product details (category, title, price, cart) floating directly on image
   Easily reversible by restoring style.css.bak_before_overlay
   ========================================================================== */
.product-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  border: 1px solid rgba(197, 155, 39, 0.28) !important;
  background: #141210 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12) !important;
  display: block !important;
  aspect-ratio: 1 / 1.25 !important;
  width: 100% !important;
  max-width: 100% !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22) !important;
}

.product-image-container,
.product-card .product-image-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
  overflow: hidden !important;
  background: #181512 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.product-image-container > a,
.product-card .product-image-container > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product-image-container .product-image,
.product-image-container > a > .product-image,
.product-card .product-image,
.product-card img.product-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.product-card:hover .product-image {
  transform: scale(1.06) !important;
}

/* Floating Badges & Action Buttons */
.product-card .product-badge-group,
.product-badge-group {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 8 !important;
}

.product-card .wishlist-heart-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 8 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.product-card .wishlist-heart-btn.active,
.product-card .wishlist-heart-btn:hover {
  background: rgba(220, 53, 69, 0.9) !important;
  border-color: rgba(220, 53, 69, 0.9) !important;
  color: #ffffff !important;
}

.product-card .compare-card-btn {
  position: absolute !important;
  top: 10px !important;
  right: 48px !important;
  z-index: 8 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* Floating Info Panel directly over artwork */
.product-info-panel,
.product-card .product-info-panel {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 6 !important;
  padding: 44px 14px 12px 14px !important;
  background: linear-gradient(to top, rgba(12, 10, 8, 0.96) 0%, rgba(12, 10, 8, 0.82) 48%, rgba(12, 10, 8, 0.38) 78%, transparent 100%) !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  box-sizing: border-box !important;
  border: none !important;
}

.product-category,
.product-card .product-category {
  color: #f3ca6c !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin: 0 0 2px 0 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.product-title,
.product-card .product-title {
  font-size: 0.90rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin: 0 0 4px 0 !important;
  min-height: unset !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.product-title a,
.product-card .product-title a {
  color: #ffffff !important;
  text-decoration: none !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95) !important;
  min-height: unset !important;
  padding: 0 !important;
  display: inline !important;
}

.product-footer-row,
.product-card .product-footer-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 2px !important;
  padding-top: 4px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-sizing: border-box !important;
}

.product-price-block,
.product-card .product-price-block {
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.product-price-block .price-current,
.product-card .product-price-block .price-current,
.product-card .product-price {
  color: #ffffff !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
  line-height: 1.2 !important;
}

.product-price-block .price-compare,
.product-price-block .original-price-slashed,
.product-card .product-price-block .price-compare {
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 0.72rem !important;
  text-decoration: line-through !important;
  margin-left: 2px !important;
}

.product-card-cart-action,
.product-card .product-card-cart-action {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.product-card .add-cart-mini,
.add-cart-mini {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  background: linear-gradient(135deg, #dfb239, #a47a1c) !important;
  color: #16120b !important;
  border: none !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.80rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.product-card .add-cart-mini:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(223, 178, 57, 0.45) !important;
}

.product-card .product-details-overlay {
  align-items: center !important;
  justify-content: center !important;
  padding-bottom: 50px !important;
  z-index: 5 !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .product-card {
    border-radius: 12px !important;
    aspect-ratio: 1 / 1.25 !important;
  }
  .product-info-panel,
  .product-card .product-info-panel {
    padding: 30px 9px 8px 9px !important;
  }
  .product-category,
  .product-card .product-category {
    font-size: 0.58rem !important;
  }
  .product-title,
  .product-card .product-title {
    font-size: 0.78rem !important;
  }
  .product-price-block .price-current,
  .product-card .product-price-block .price-current,
  .product-card .product-price {
    font-size: 0.86rem !important;
  }
  .product-card .add-cart-mini,
  .add-cart-mini {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 0.76rem !important;
  }
  .product-card .wishlist-heart-btn,
  .product-card .compare-card-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
  }
  .product-card .compare-card-btn {
    right: 42px !important;
  }

  /* Un-shrinked Pre-Order & Quantity Badges on Mobile */
  .stock-badge,
  .sale-badge,
  .product-seasonal-badge,
  .product-card .stock-badge,
  .product-card .sale-badge,
  .product-card .product-seasonal-badge {
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  }

  .stock-badge.preorder,
  .product-card .stock-badge.preorder {
    background: linear-gradient(135deg, #184b5c 0%, #0d3440 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    letter-spacing: 0.02em !important;
  }

  .stock-badge.low-fomo,
  .product-card .stock-badge.low-fomo {
    background: linear-gradient(135deg, #e65100 0%, #c62828 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }
  .stock-badge.low-fomo i,
  .product-card .stock-badge.low-fomo i {
    font-size: 0.70rem !important;
    color: #ffeb3b !important;
  }

  /* Un-shrinked Quantity Stepper on Card in Mobile */
  .card-qty-stepper,
  .product-card .card-qty-stepper {
    height: 30px !important;
    padding: 2px 6px !important;
    gap: 4px !important;
    background: rgba(18, 15, 12, 0.94) !important;
    border: 1.5px solid rgba(223, 178, 57, 0.65) !important;
    border-radius: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
    box-sizing: border-box !important;
  }
  .card-qty-btn,
  .product-card .card-qty-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 0.72rem !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .card-qty-btn.card-qty-minus {
    background: rgba(198, 40, 40, 0.28) !important;
    color: #ff8a80 !important;
    border: 1px solid rgba(255, 138, 128, 0.35) !important;
  }
  .card-qty-btn.card-qty-plus {
    background: rgba(223, 178, 57, 0.32) !important;
    color: #ffeb3b !important;
    border: 1px solid rgba(255, 235, 59, 0.4) !important;
  }
  .card-qty-val,
  .product-card .card-qty-val {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    min-width: 18px !important;
    text-align: center !important;
    line-height: 1 !important;
  }

  /* Pre-Order & Quantity in Cart & Modal on Mobile */
  .cart-badge-preorder,
  .modal-stock-status,
  .pdp-stock-status,
  #modal-qty-stock-hint {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }
}

/* ==========================================================================
   TEST: DARKER SILK GALLERY & PRODUCT CARD BACKGROUND (#e2dcce)
   Testing visual aesthetics for client review.
   Easily revertible: change #e2dcce back to #ffffff or remove this block.
   ========================================================================== */
.product-card,
#gallery-catalog .product-card,
.products-grid .product-card,
.curated-showcase-grid .product-card,
.pdp-related-card {
  background: #e2dcce !important;
}

.product-image-container,
.product-card .product-image-container,
.pdp-related-img-wrap {
  background: #e2dcce !important;
}

.product-gallery-stage,
.detail-image-wrapper,
.detail-image-wrapper .product-gallery-stage,
.detail-image-wrapper .product-gallery-thumbnails,
.product-gallery-thumbnail,
.pdp-main-image-stage,
.pdp-thumb-item,
.pdp-trust-strip {
  background: #e2dcce !important;
}

.pdp-main-image-stage {
  background: radial-gradient(circle at center, #eee9df 0%, #e2dcce 100%) !important;
}

/* Logo enlargement override */
@media (min-width: 769px) {
  .header-nav .logo#nav-logo { width: clamp(230px, 18vw, 310px) !important; min-width: 220px !important; height: 84px !important; }
  .header-nav .brand-logo-image { transform: scale(1.18) !important; transform-origin: left center !important; }
}
@media (max-width: 768px) {
  .header-nav .logo#nav-logo { width: clamp(135px, 36vw, 170px) !important; min-width: 125px !important; max-width: 170px !important; height: 56px !important; }
  .header-nav .brand-logo-image { transform: none !important; width: 100% !important; height: 100% !important; object-fit: contain !important; }
}

.checkout-modal-card{
  max-width: 600px;
  position: relative;
  overflow: hidden;
}

.checkout-steps-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #1c140d 0%, #2e2114 100%);
  padding: 18px 75px 18px 24px !important; /* 75px right padding ensures 'Completed' text never collides with X button */
  border-bottom: 2px solid var(--accent-gold);
}

#close-checkout-modal{
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 25 !important;
  transition: all 0.2s ease !important;
}

#close-checkout-modal:hover{
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

@media (max-width: 768px) {
  .checkout-steps-nav{
    padding: 14px 54px 14px 12px !important;
  }
  .checkout-step-indicator{
    font-size: 0.74rem !important;
    gap: 4px !important;
  }
  .checkout-step-indicator .step-circle{
    width: 20px !important;
    height: 20px !important;
    font-size: 0.72rem !important;
  }
}

/* Mobile Performance Optimizations (Zero-Network Hero Background & CLS Guard) */
@media (max-width: 768px) {
  .hero-section {
    background: 
      radial-gradient(ellipse 65% 55% at 75% 45%, rgba(228, 185, 78, 0.22) 0%, transparent 68%),
      radial-gradient(circle at 15% 30%, rgba(200, 160, 60, 0.14) 0%, transparent 60%),
      linear-gradient(135deg, rgba(254, 252, 248, 0.98) 0%, rgba(248, 242, 231, 0.94) 50%, rgba(243, 235, 220, 0.90) 100%) !important;
  }
}
.hero-desc {
  min-height: 4.6em; /* CLS stability guard: reserves exact block space during font swap */
}


/* Instant Zero-Delay Vector Navigation Icons (Header & Mobile Bottom Bar) */
.nav-svg-icon {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  pointer-events: none;
  transition: transform 0.2s ease, fill 0.2s ease;
}

.icon-btn .nav-svg-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.mobile-bottom-nav-item .nav-svg-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-bottom: 2px;
}

.search-bar-container .nav-svg-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0.95rem;
  height: 0.95rem;
  color: var(--text-muted);
}


/* ==========================================================================
   UNIFIED LUXURY GALLERY CANVAS (ELIMINATE CLASHING 3-BACKGROUND QUILT)
   Ensures one single, harmonious, continuous warm ivory background throughout
   ========================================================================== */
#home-view,
.home-section,
.shop-catalog-outer-container,
#shop-catalog-section,
.curated-showcase-container,
#best-sellers-section,
#seasonal-showcase-section,
#budget-gifts-section,
#recently-viewed-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.shop-layout {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

.filter-sidebar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 20px 0 0 !important;
  border-right: 1px solid rgba(197, 155, 39, 0.18) !important;
}

@media (max-width: 900px) {
  .filter-sidebar {
    border-right: none !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
  }
}

.shop-toolbar {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(197, 155, 39, 0.22) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 14px 0 !important;
  margin-bottom: 22px !important;
}

.category-select-all-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(197, 155, 39, 0.16) !important;
  border-radius: 0 !important;
  padding: 6px 0 10px 0 !important;
  margin-bottom: 10px !important;
}

.category-select-all-badge {
  background: rgba(197, 155, 39, 0.12) !important;
  color: #8c6716 !important;
  border: 1px solid rgba(197, 155, 39, 0.28) !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

.filter-title {
  border-bottom: 1px solid rgba(197, 155, 39, 0.18) !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
}

.filter-group {
  border-bottom: 1px solid rgba(197, 155, 39, 0.10) !important;
  padding-bottom: 18px !important;
  margin-bottom: 18px !important;
}

.filter-group:last-child {
  border-bottom: none !important;
}

.search-input {
  background: #ffffff !important;
  border: 1px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 6px !important;
  padding: 9px 34px 9px 12px !important;
}

.sort-select {
  background: #ffffff !important;
  border: 1px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}


/* ==========================================================================
   CATALOGUE IMAGE MANAGEMENT & MOBILE UPLOAD / REPLACEMENT STYLES
   ========================================================================== */

/* Catalogue Inventory Table & Card Image Wrapper */
.admin-table-img-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 8px;
  overflow: visible;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-table-img-wrap:hover {
  transform: scale(1.05);
}

.admin-table-img-wrap:hover .admin-table-img {
  border-color: #c59b27 !important;
  box-shadow: 0 4px 12px rgba(197, 155, 39, 0.25) !important;
}

.admin-table-img-edit-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1f4b52;
  color: #ecc358;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  border: 1.5px solid #ffffff;
  pointer-events: none;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  z-index: 2;
}

.admin-table-img-wrap:hover .admin-table-img-edit-badge {
  transform: scale(1.2);
  background: #c59b27;
  color: #ffffff;
}

@media (max-width: 900px) {
  .admin-td-image {
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  .admin-td-image .admin-table-img-wrap {
    width: 85px !important;
    height: 85px !important;
  }
  .admin-td-image .admin-table-img-edit-badge {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.75rem !important;
    bottom: 2px !important;
    right: 2px !important;
  }
}

/* Primary Image Box Interactive States */
.image-selector-box {
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
  touch-action: manipulation !important;
  user-select: none !important;
}

.image-selector-box:hover {
  border-color: #c59b27 !important;
  background-color: #fdfcf9 !important;
  box-shadow: 0 4px 14px rgba(197, 155, 39, 0.12) !important;
}

.image-selector-box:active {
  background-color: #faf5e6 !important;
  transform: scale(0.995);
}

.form-img-preview-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
  cursor: pointer;
}

.form-img-preview-wrapper:hover .form-img-overlay-badge {
  background: rgba(31, 75, 82, 0.95) !important;
  color: #ecc358 !important;
  transform: translateX(-50%) scale(1.05) !important;
}

/* Multiple Gallery Thumbnail Replace Wrapper */
.admin-gallery-item-img-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border-radius: 7px;
  overflow: visible;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.admin-gallery-item-img-wrap:hover {
  transform: scale(1.04);
}

.admin-gallery-item-img-wrap > img {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  object-fit: cover;
  display: block;
}

.admin-gallery-item-replace-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1f4b52;
  color: #ecc358;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 1.5px solid #ffffff;
  pointer-events: none;
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 2;
}

.admin-gallery-item-img-wrap:hover .admin-gallery-item-replace-badge {
  transform: scale(1.2);
  background: #c59b27;
  color: #ffffff;
}

@media (max-width: 600px) {
  .admin-gallery-item-img-wrap {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
  }
}

/* Quick Image Modal Overlay & Mobile Viewport */
#admin-quick-image-modal.open {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#admin-quick-image-modal .modal-card {
  animation: adminModalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes adminModalPop {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* AI Image Modal Responsive Stacking on Mobile */
@media (max-width: 768px) {
  #ai-image-modal > div {
    padding: 16px !important;
    width: 95% !important;
  }
  #ai-image-modal div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Responsive AI Image Studio Modal for Mobile */
@media (max-width: 768px) {
  #ai-image-modal {
    padding: 10px !important;
  }
  #ai-image-modal > div {
    padding: 16px !important;
    max-height: 94vh !important;
  }
  #ai-image-modal [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

@keyframes productSaveShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

#ai-image-modal {
  z-index: 2000000 !important;
}
#ai-image-modal.open {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  z-index: 2000000 !important;
}