/* PASSION'S PETALS — pink/cream palette inspired by Petal & Co. reference */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Crimson+Pro:ital,wght@0,300;0,400;0,500;1,400&family=Manrope:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600&display=swap");

:root {
  /* Cream paper */
  --pp-cream:        #FAF3E8;
  --pp-paper:        #FBF6EE;
  --pp-paper-soft:   #F4E9DC;
  --pp-paper-edge:   #ECDDC9;

  /* Pink — soft to deep */
  --pp-blush-tint:   #FBEDE9;
  --pp-blush:        #F6D9D4;
  --pp-blush-bar:    #F2C9C2;   /* the pink utility bar */
  --pp-pink-soft:    #ECB0B0;
  --pp-pink:         #E07A8B;   /* hot accent from hero */
  --pp-pink-deep:    #C2546A;
  --pp-rose-card:    #F8E6E0;

  /* Logo accents */
  --pp-terracotta:        #C97B47;
  --pp-terracotta-deep:   #A55A2C;
  --pp-terracotta-tint:   #F4DCC4;
  --pp-burgundy:     #7E2230;
  --pp-lavender:     #B6A4C9;
  --pp-sage:         #8B9A7A;
  --pp-sage-deep:    #5C6A4D;

  /* Ink — black-brown, never pure black */
  --pp-ink:          #3A2818;
  --pp-ink-soft:     #6B5341;
  --pp-ink-mute:     #9B856F;
  --pp-ink-faint:    #C2AE99;

  /* Roles */
  --bg:              var(--pp-paper);
  --bg-card:         #FFFDF8;
  --fg:              var(--pp-ink);
  --fg-soft:         var(--pp-ink-soft);
  --fg-mute:         var(--pp-ink-mute);
  --fg-faint:        var(--pp-ink-faint);
  --accent:          var(--pp-pink);
  --accent-hover:    var(--pp-pink-deep);
  --hairline:        #ECDDC9;
  --rule:            #D9CDB6;

  /* Type */
  --font-display:    "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-serif:      "Crimson Pro", Georgia, serif;
  --font-sans:       "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-cn-display: "Noto Serif SC", "Songti SC", serif;
  --font-cn-sans:    "Noto Sans SC", "PingFang SC", sans-serif;

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --space-9:56px; --space-10:72px; --space-11:96px; --space-12:128px;

  --radius-xs:2px; --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-xl:22px; --radius-pill:999px;

  --shadow-1: 0 1px 1px rgba(74,50,30,0.04);
  --shadow-2: 0 2px 8px rgba(74,50,30,0.06), 0 1px 2px rgba(74,50,30,0.05);
  --shadow-3: 0 14px 30px -12px rgba(74,50,30,0.18), 0 4px 10px rgba(74,50,30,0.06);
  --shadow-4: 0 28px 60px -20px rgba(74,50,30,0.28), 0 10px 20px -8px rgba(74,50,30,0.10);

  --ease-out: cubic-bezier(0.22,0.61,0.36,1);
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms;
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::-webkit-scrollbar { width:0; height:0; }

/* Animations ─────────────────────────────────────── */
@keyframes pp-fade-up   { from { opacity:0; transform: translateY(24px); } to { opacity:1; transform:none; } }
@keyframes pp-fade-in   { from { opacity:0; } to { opacity:1; } }
@keyframes pp-zoom-in   { from { opacity:0; transform: scale(1.06); } to { opacity:1; transform:none; } }
@keyframes pp-slide-r   { from { opacity:0; transform: translateX(-30px); } to { opacity:1; transform:none; } }
@keyframes pp-marquee   { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pp-float     { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }

.pp-reveal { opacity:0; }
.pp-reveal.in { animation: pp-fade-up 720ms cubic-bezier(0.22,0.61,0.36,1) forwards; }
.pp-reveal-stagger.in > * { animation: pp-fade-up 720ms cubic-bezier(0.22,0.61,0.36,1) both; }
.pp-reveal-stagger.in > *:nth-child(1) { animation-delay: 60ms; }
.pp-reveal-stagger.in > *:nth-child(2) { animation-delay: 140ms; }
.pp-reveal-stagger.in > *:nth-child(3) { animation-delay: 220ms; }
.pp-reveal-stagger.in > *:nth-child(4) { animation-delay: 300ms; }
.pp-reveal-stagger.in > *:nth-child(5) { animation-delay: 380ms; }
.pp-reveal-stagger.in > *:nth-child(6) { animation-delay: 460ms; }
.pp-reveal-stagger.in > *:nth-child(7) { animation-delay: 540ms; }
.pp-reveal-stagger.in > *:nth-child(8) { animation-delay: 620ms; }
.pp-reveal-stagger > * { opacity:0; }

/* Headline italic word — pink hand-drawn underline */
.pp-italic-accent { font-style: italic; color: var(--pp-pink-deep); position: relative; }
.pp-italic-accent::after {
  content:""; position:absolute; left:2%; right:2%; bottom:-2px; height:8px;
  background: radial-gradient(ellipse at center, var(--pp-blush) 0%, transparent 70%);
  z-index:-1;
}

/* Hero CTA — gentle pulse */
.pp-pulse { animation: pp-float 3.6s ease-in-out infinite; }

/* Product card hover — already has scale; add tilt-shadow */
.pp-card-img-wrap { overflow:hidden; }
.pp-card-img-wrap > div { transition: transform 600ms cubic-bezier(0.22,0.61,0.36,1); }
.pp-card:hover .pp-card-img-wrap > div { transform: scale(1.06); }
.pp-card { transition: box-shadow 240ms ease, transform 240ms ease; }
.pp-card:hover { transform: translateY(-3px); }

/* Cart drawer entry — already animated via inline style */