/* ═══════════════════════════════════════════════════════════
   DIOURA ELEGANCE — Global Stylesheet
   Visible Soft Blush-Pink Identity & Polished Motion System
   "Your style, Your choice."
═══════════════════════════════════════════════════════════ */

/* ── Modern Notification System ────────────────────────── */
@import url('notifications.css');

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  /* Coordinated Pastel-Pink Boutique Palette (Matching Design Reference) */
  --bg:             #FAF1F3;   /* Main page background: soft pastel blush pink */
  --bg-warm:        #FAF1F3;   /* Soft warm blush */
  --bg-blush:       #FAF1F3;   /* Signature blush pink for page sections */
  --bg-soft:        #FDF7F8;   /* Very soft warm off-white / light blush */
  --bg-alt:         #F5E6EA;   /* Slightly deeper blush for contrasting bands */
  --surface:        #FFFFFF;   /* Crisp white card and panel surfaces */
  --surface-tint:   #F7E8EC;   /* Soft blush tint for chips, badges, steppers */
  --white:          #FFFFFF;

  /* Crisp Dark Charcoal Readable Typography (High Contrast) */
  --dark:           #281B20;   /* Deep charcoal with warm rose undertone */
  --dark-hover:     #3B242D;
  --medium:         #6E555E;   /* High-readability warm rose-charcoal body copy */
  --light:          #917781;   /* Secondary metadata, subtitles, and captions */

  /* Coordinated Rose & Berry System */
  --border:         #EED2DA;   /* Delicate soft rose border */
  --border-light:   #F5E4E9;
  --blush:          #F0B8C4;   /* Signature blush pink */
  --blush-soft:     #FDF2F5;   /* Very soft blush tint */
  --rose-btn:       #B04A62;   /* Deep rich berry rose for primary CTA buttons & active tabs */
  --rose-btn-hover: #983B51;   /* Refined deeper berry on hover */
  --rose-accent:    #D47087;   /* Soft dusty rose */
  --badge-peach:    #FCE4DC;   /* Soft peach/blush for "New" / "Best Seller" badges */
  --badge-peach-text:#96432D;

  /* Product Card Pill Buttons */
  --card-pill-bg:   #FFFFFF;   /* White pill fill */
  --card-pill-hover:#B04A62;   /* Deep berry rose on hover */

  /* WhatsApp Official */
  --whatsapp:       #25D366;
  --whatsapp-hover: #1EBC59;

  /* Boutique Blush Footer */
  --footer-bg:      #FAF1F3;   /* Signature soft blush background matching page */
  --footer-text:    #281B20;   /* High-contrast dark charcoal */

  /* Typography */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-script:'Caveat', 'Alex Brush', cursive;

  /* Layout */
  --nav-h:      76px;
  --max-w:      1360px;
  --section-pad: 76px;

  /* Border Radii */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-hero: 22px;
  --r-pill: 9999px;

  /* Soft Boutique Shadows */
  --shadow-xs: 0 2px 6px rgba(176, 74, 98, 0.04);
  --shadow-sm: 0 4px 14px rgba(176, 74, 98, 0.07);
  --shadow-md: 0 10px 28px rgba(176, 74, 98, 0.09);
  --shadow-lg: 0 18px 42px rgba(176, 74, 98, 0.12);

  /* Polished Motion Easing & Timing (Smooth YouTube-grade transitions) */
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --ease-hover:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:     cubic-bezier(0.25, 1, 0.5, 1);
  --t-hover:       0.28s;
  --t-motion:      0.65s;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html   { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body   {
  background: var(--bg);
  color: var(--dark);
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Tabular Numerals for prices, quantities, and totals */
.price,
.cart-total,
.card-price,
.prod-price,
.stat-num,
.order-num,
.currency-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
img    { max-width: 100%; display: block; }
a      { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: var(--font-sans); cursor: pointer; }
input, select, textarea { font-family: var(--font-sans); }

/* ── Mobile Tap Highlight & Accessible Focus Behavior ──────── */
html,
body,
a,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
summary,
.btn,
.nav-icon-btn,
.hamburger,
.product-card,
.card-pill-btn,
.carousel-arrow,
.carousel-dot,
.filter-chip,
.filter-pill,
.variant-pill,
.size-chip,
.size-btn,
.qty-btn,
.color-filter-btn,
.mobile-filter-btn,
.grid-arrow-btn,
.quick-cta-pill,
.touch-target {
  -webkit-tap-highlight-color: transparent;
}

/* Remove unwanted blue/gray focus outlines and shadows after mouse/touch interaction */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.nav-icon-btn:focus:not(:focus-visible),
.hamburger:focus:not(:focus-visible),
.product-card:focus:not(:focus-visible),
.card-pill-btn:focus:not(:focus-visible),
.carousel-arrow:focus:not(:focus-visible),
.carousel-dot:focus:not(:focus-visible),
.filter-chip:focus:not(:focus-visible),
.filter-pill:focus:not(:focus-visible),
.variant-pill:focus:not(:focus-visible),
.size-chip:focus:not(:focus-visible),
.size-btn:focus:not(:focus-visible),
.qty-btn:focus:not(:focus-visible),
.color-filter-btn:focus:not(:focus-visible),
.mobile-filter-btn:focus:not(:focus-visible),
.grid-arrow-btn:focus:not(:focus-visible),
.quick-cta-pill:focus:not(:focus-visible) {
  outline: none;
}

/* Preserve distinct, accessible focus rings for keyboard navigation */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.nav-icon-btn:focus-visible,
.hamburger:focus-visible,
.carousel-arrow:focus-visible,
.grid-arrow-btn:focus-visible,
.filter-pill:focus-visible,
.size-chip:focus-visible,
.size-btn:focus-visible,
.qty-btn:focus-visible,
.color-filter-btn:focus-visible,
.mobile-filter-btn:focus-visible {
  outline: 2px solid var(--rose-btn, #B04A62);
  outline-offset: 2px;
}

/* ── Typography ────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.25;
  color: var(--dark);
}
h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.35;
  color: var(--dark);
}
h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); letter-spacing: -0.015em; font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); letter-spacing: -0.01em; font-weight: 600; }
h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }
p  { color: var(--medium); line-height: 1.75; font-family: var(--font-sans); }

/* ── Layout Helpers ────────────────────────────────────── */
.section    { padding: var(--section-pad) 0; }
.section-alt { padding: var(--section-pad) 0; background: var(--bg-alt); }
.container  { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }

/* ── Section Header ────────────────────────────────────── */
.section-header { text-align: center; margin-bottom: 3rem; }

.section-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-btn);
  background: var(--surface);
  padding: 0.4rem 1.1rem;
  border-radius: var(--r-pill);
  margin-bottom: 0.85rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.divider {
  width: 38px;
  height: 2px;
  background: var(--rose-btn);
  margin: 0.75rem auto 1rem;
  border-radius: 2px;
}

.section-header p {
  max-width: 580px;
  margin: 0 auto;
  font-size: 0.98rem;
  color: var(--medium);
}

/* ── Buttons (Muted Rose / Blush Pink Primary) ─────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.88rem 2.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.28s var(--ease),
              color 0.28s var(--ease),
              border-color 0.28s var(--ease),
              transform 0.28s var(--ease),
              box-shadow 0.28s var(--ease);
  white-space: nowrap;
  font-family: var(--font-sans);
}

/* Primary Muted Rose Button */
.btn-primary,
.btn-pill-rose,
.btn-pill-dark,
.btn-berry-pill {
  background: var(--rose-btn);
  color: var(--white);
  border-color: var(--rose-btn);
  box-shadow: 0 4px 14px rgba(176, 74, 98, 0.28);
}
.btn-primary:hover,
.btn-pill-rose:hover,
.btn-pill-dark:hover,
.btn-berry-pill:hover {
  background: var(--rose-btn-hover);
  border-color: var(--rose-btn-hover);
  color: var(--white);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(176, 74, 98, 0.32);
}
.btn-primary:active,
.btn-pill-rose:active,
.btn-pill-dark:active,
.btn-berry-pill:active {
  transform: scale(0.975);
  box-shadow: 0 2px 8px rgba(176, 74, 98, 0.22);
  transition-duration: 0.1s;
}

/* White Pill Button with Soft Rose Border */
.btn-white-pill {
  background: var(--surface);
  color: var(--dark);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-white-pill:hover {
  background: #FFF5F7;
  border-color: var(--rose-btn);
  color: var(--rose-btn);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(176, 74, 98, 0.1);
}
.btn-white-pill:active {
  transform: scale(0.975);
  transition-duration: 0.1s;
}

/* Outline Muted Rose Button */
.btn-outline,
.btn-pill-outline {
  background: var(--surface);
  color: var(--rose-btn);
  border-color: var(--rose-btn);
}
.btn-outline:hover,
.btn-pill-outline:hover {
  background: var(--rose-btn);
  color: var(--white);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(176, 74, 98, 0.18);
}
.btn-outline:active,
.btn-pill-outline:active {
  transform: scale(0.975);
  transition-duration: 0.1s;
}

/* Product Card Pill ("Add to Cart") */
.btn-card-add {
  width: 100%;
  background: var(--card-pill-bg);
  color: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.72rem 1rem;
  font-size: 0.84rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background var(--t-hover) var(--ease-hover),
              color var(--t-hover) var(--ease-hover),
              border-color var(--t-hover) var(--ease-hover),
              transform var(--t-hover) var(--ease-hover);
}
.btn-card-add:hover {
  background: var(--rose-btn);
  color: var(--white);
  border-color: var(--rose-btn);
  transform: translateY(-1px);
}

/* WhatsApp Official Pill */
.btn-whatsapp,
.btn-pill-wa {
  background: var(--whatsapp);
  color: var(--white);
  border-color: var(--whatsapp);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.22);
}
.btn-whatsapp:hover,
.btn-pill-wa:hover {
  background: var(--whatsapp-hover);
  border-color: var(--whatsapp-hover);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.32);
}
.btn-whatsapp .wa-icon,
.btn-pill-wa .wa-icon {
  font-size: 1.15rem;
  line-height: 1;
  display: inline-block;
}

.btn-ghost {
  background: var(--surface);
  color: var(--dark);
  border-color: var(--border);
}
.btn-ghost:hover {
  border-color: var(--rose-btn);
  color: var(--rose-btn);
}

.btn-sm   { padding: 0.55rem 1.4rem; font-size: 0.76rem; }
.btn-lg   { padding: 0.95rem 2.5rem; font-size: 0.88rem; }
.btn-full { width: 100%; }

/* ── Badges ────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  line-height: 1;
}
/* ── Overlay ───────────────────────────────────────────── */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 18, 21, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-hover) var(--ease-hover);
}
#overlay.active { opacity: 1; pointer-events: all; }

/* ── Page Banner (inner pages) ─────────────────────────── */
.page-banner {
  background: var(--bg-alt);
  padding: calc(var(--nav-h) + 2.5rem) 0 2.5rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.page-banner h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 0.4rem;
  font-weight: 600;
}
.breadcrumb {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--light);
  margin-top: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.breadcrumb a:hover { color: var(--rose-btn); }
.breadcrumb span   { color: var(--light); }

/* ══════════════════ MOTION & ENTRANCE SYSTEM ════════════ */
/* Initial Page Entrance (Subtle 16-18px translations with smooth cubic-bezier easing) */
@keyframes entranceFadeLeft {
  0% {
    opacity: 0;
    transform: translateX(-18px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes entranceFadeRight {
  0% {
    opacity: 0;
    transform: translateX(18px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes heroFadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-18px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes heroFadeInRight {
  0% {
    opacity: 0;
    transform: translateX(18px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes heroFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-fade-left {
  opacity: 0;
  animation: heroFadeInLeft 0.65s var(--ease) both;
}
.anim-fade-right {
  opacity: 0;
  animation: heroFadeInRight 0.65s var(--ease) both;
}

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.15s; }
.stagger-3 { animation-delay: 0.25s; }
.stagger-4 { animation-delay: 0.35s; }

/* Scroll Reveal (Noticeable, Soft, and Smooth ~650ms) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-motion) var(--ease),
              transform var(--t-motion) var(--ease);
  will-change: opacity, transform;
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger for grid children */
.reveal-stagger > *:not(.featured-track):not(.hero-slides-track) {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease),
              transform 0.55s var(--ease);
}
.reveal-stagger.revealed > *:not(.featured-track):not(.hero-slides-track) {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.revealed > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-stagger.revealed > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.revealed > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger.revealed > *:nth-child(4) { transition-delay: 0.20s; }
.reveal-stagger.revealed > *:nth-child(5) { transition-delay: 0.26s; }
.reveal-stagger.revealed > *:nth-child(6) { transition-delay: 0.32s; }
.reveal-stagger.revealed > *:nth-child(7) { transition-delay: 0.38s; }
.reveal-stagger.revealed > *:nth-child(8) { transition-delay: 0.44s; }

/* Functional slider tracks must retain translateX transform */
.featured-track,
.hero-slides-track {
  will-change: transform;
}

/* Accessibility: Respect Reduced Motion without Breaking Functional Carousel or Cross-Fades */
@media (prefers-reduced-motion: reduce) {
  .pulse-attention,
  .cart-badge.pop,
  .mobile-nav-links li,
  .product-card,
  .hero-eyebrow,
  .hero-left h1,
  .hero-desc,
  .hero-buttons,
  .hero-floral-left-edge,
  .hero-right-full,
  .anim-fade-left,
  .anim-fade-right,
  .reveal-on-scroll,
  .reveal-stagger > *:not(.featured-track):not(.hero-slides-track),
  .story-split.reveal-on-scroll .story-image-card,
  .story-split.reveal-on-scroll .story-right {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Responsive Spacing & Wide Display / Zoom Scaling ──── */
@media (min-width: 1440px) {
  :root {
    --max-w: 1400px;
  }
}
@media (min-width: 1800px) {
  :root {
    --max-w: 1480px;
  }
}

@media (max-width: 1024px) {
  :root { --section-pad: 70px; }
}
@media (max-width: 768px) {
  :root { --section-pad: 54px; }
  .container { padding: 0 1.25rem; }
  .section-header { margin-bottom: 2.25rem; }
}
@media (max-width: 480px) {
  :root { --section-pad: 44px; }
  .container { padding: 0 1rem; }
}
@media (max-width: 360px) {
  .container { padding: 0 0.75rem; }
}