/* ============================================================
   Juliana Care & Beauty — Theme 1: Modern Luxury
   Design Token System (CSS Custom Properties)
   ============================================================ */

:root {

  /* ──────────────────────────────────────────────────
     PRIMARY PALETTE — Store Theme Color
     Driven by the store theme_color setting.
  ────────────────────────────────────────────────── */
  --primary-1: var(--theme-color);
  --primary-2: var(--theme-color);
  --primary-3: var(--theme-color);
  --primary-4: var(--theme-color);
  --primary-5: rgba(var(--theme-color-rgb), 0.12);
  --primary-6: rgba(var(--theme-color-rgb), 0.08);

  /* ──────────────────────────────────────────────────
     SECONDARY PALETTE — Store Button Color
     Driven by the store button_color setting.
  ────────────────────────────────────────────────── */
  --secondary-1: var(--button-color, #0a8a71);
  --secondary-2: var(--button-color, #0a8a71);
  --secondary-3: var(--button-color, #0a8a71);
  --secondary-4: var(--button-color, #0a8a71);
  --secondary-5: var(--button-color, #0a8a71);
  --secondary-6: rgba(var(--button-color-rgb, 10, 138, 113), 0.12);

  /* ──────────────────────────────────────────────────
     NEUTRAL PALETTE — Slate / Gray
     Tailwind reference: slate-*
  ────────────────────────────────────────────────── */
  --neutral-1: #0f172a;
  /* slate-900 — main text */
  --neutral-2: #1e293b;
  /* slate-800 — dark text */
  --neutral-3: #475569;
  /* slate-600 — medium text */
  --neutral-4: #64748b;
  /* slate-500 — muted text */
  --neutral-5: #94a3b8;
  /* slate-400 — placeholder, light text */
  --neutral-6: #e2e8f0;
  /* slate-200 — borders */
  --neutral-7: #f1f5f9;
  /* slate-100 — light bg */
  --neutral-8: #f8fafc;
  /* slate-50  — very light bg */

  /* ──────────────────────────────────────────────────
     SURFACE & BACKGROUND
  ────────────────────────────────────────────────── */
  --bg-page: #faf9f6;
  /* off-white page background */
  --bg-surface: #ffffff;
  /* card, drawer, modal backgrounds */
  --bg-header: rgba(250, 249, 246, 0.95);
  /* glassmorphism header */

  /* ──────────────────────────────────────────────────
     LEGACY ALIASES (backward compatibility)
  ────────────────────────────────────────────────── */
  --color-bg: var(--bg-page);
  --color-surface: var(--bg-surface);
  --color-surface-hover: #f4f2ec;
  --color-primary: var(--primary-2);
  --color-primary-hover: var(--primary-1);
  --color-primary-light: var(--primary-6);
  --color-accent: var(--secondary-3);
  --color-accent-hover: var(--secondary-2);
  --color-text-main: var(--neutral-1);
  --color-text-muted: var(--neutral-4);
  --color-border: var(--neutral-6);
  --header-bg: var(--bg-header);

  /* ──────────────────────────────────────────────────
     TYPOGRAPHY
  ────────────────────────────────────────────────── */

  /* ──────────────────────────────────────────────────
     LAYOUT TOKENS
  ────────────────────────────────────────────────── */
  --radius-card: 1.25rem;
  --radius-btn: 9999px;
  --radius-sm: 0.75rem;

  --shadow-card: 0 10px 30px -10px rgba(var(--theme-color-rgb), 0.08);
  --shadow-hover: 0 20px 40px -15px rgba(var(--theme-color-rgb), 0.18);
  --shadow-glow: 0 0 20px rgba(var(--button-color-rgb, 10, 138, 113), 0.25);
}

/* ============================================================
   TAILWIND CUSTOM COLORS BRIDGE
   Inject custom colors into Tailwind CDN via inline config
   (see <script> block in each HTML file)
   ============================================================ */

/* ============================================================
   BASE STYLES
   ============================================================ */
body {
  background-color: var(--bg-page);
  color: var(--neutral-1);
  font-family: var(--font-body);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

.font-number {
  font-family: var(--font-number);
}

/* ============================================================
   GLASS HEADER
   ============================================================ */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================
   NAVIGATION DROPDOWN
   ============================================================ */
.nav-dropdown-container {
  position: relative;
  display: inline-block;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 15px 35px rgba(var(--theme-color-rgb), 0.12);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 50;
}

.nav-dropdown-container:hover .nav-dropdown-menu,
.nav-dropdown-container:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ============================================================
   HORIZONTAL SLIDER — NO SCROLLBAR
   ============================================================ */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.product-card {
  border: 1px solid rgba(var(--theme-color-rgb), 0.08);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(var(--button-color-rgb, 10, 138, 113), 0.35);
}

/* ============================================================
   MOBILE SIDEBAR DRAWER
   ============================================================ */
.mobile-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-sidebar-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 85%;
  max-width: 340px;
  background: var(--bg-surface);
  z-index: 51;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.mobile-sidebar-drawer.active {
  transform: translateX(0);
}

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cart-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer-content {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  max-width: 420px;
  background: var(--bg-surface);
  z-index: 51;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.cart-drawer-content.active {
  transform: translateX(0);
}

/* ============================================================
   TOAST NOTIFICATION
   ============================================================ */
.toast-notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  background: var(--primary-2);
  color: #ffffff;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-btn);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transform: translateY(200%);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast-notification.show {
  transform: translateY(0);
}

/* ============================================================
   MOBILE RESPONSIVENESS — Theme 1
   ============================================================ */

@media (max-width: 767px) {

  /* Sticky header: compact padding on mobile */
  .sticky-header {
    padding-top: 0;
    padding-bottom: 0;
  }

  .sticky-header .max-w-7xl {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Cart drawer: full-width on mobile */
  .cart-drawer-content {
    max-width: 100%;
    width: 100%;
  }

  /* Mobile sidebar: 88% width */
  .mobile-sidebar-drawer {
    width: 88%;
    max-width: 320px;
  }

  /* Toast: stretched bottom bar */
  .toast-notification {
    bottom: 0.75rem;
    right: 0.75rem;
    left: 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    justify-content: center;
  }

  /* Product card: no lift on mobile (touch) */
  .product-card:hover {
    transform: none;
  }
}

/* Tablet (768-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .cart-drawer-content {
    max-width: 380px;
  }
}

/* ============================================================
   SHOP FILTER SIDEBAR MOBILE TOGGLE
   ============================================================ */
.shop-filter-sidebar-mobile {
  display: none;
}

@media (max-width: 1023px) {
  .shop-filter-sidebar-mobile {
    display: block;
  }

  .shop-filter-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
  }

  .shop-filter-panel.open {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .shop-filter-inner {
    width: 85%;
    max-width: 340px;
    height: 100%;
    background: white;
    overflow-y: auto;
    padding: 1.5rem;
  }
}