/* ══════════════════════════════════════════
   NAWIRI — SHARED DESIGN SYSTEM
   ══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
  --blush:      #F2A68A;
  --rose:       #E07B65;
  --forest:     #3A6B45;
  --sage:       #7A9E7E;
  --cream:      #FAF6F1;
  --parchment:  #F3EDE4;
  --charcoal:   #1C1C1C;
  --black:      #0D0D0D;
  --white:      #FFFFFF;
  --gold:       #C9A96E;
  --light-sage: #EEF4EF;
  --border:     rgba(58,107,69,0.12);
  --shadow-sm:  0 2px 12px rgba(0,0,0,0.05);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.14);
  --transition: 0.28s cubic-bezier(0.25,0.46,0.45,0.94);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:'DM Sans',sans-serif; background:var(--cream); color:var(--charcoal); overflow-x:hidden; }
img  { max-width:100%; display:block; }
a    { text-decoration:none; color:inherit; }

/* ── TYPOGRAPHY ── */
.font-serif   { font-family:'Cormorant Garamond',serif; }
h1,h2,h3,h4  { font-family:'Cormorant Garamond',serif; font-weight:300; }

/* ── UTILITY ── */
.container    { max-width:1240px; margin:0 auto; padding:0 2rem; }
.sr-only      { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:0.4rem; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; border-radius:2px; transition:var(--transition); }
.btn-sm  { font-size:0.72rem; padding:0.55rem 1.2rem; }
.btn-md  { font-size:0.78rem; padding:0.78rem 1.8rem; }
.btn-lg  { font-size:0.82rem; padding:0.95rem 2.4rem; }
.btn-primary { background:var(--forest); color:var(--white); box-shadow:0 4px 16px rgba(58,107,69,0.22); }
.btn-primary:hover { background:var(--rose); box-shadow:0 8px 24px rgba(224,123,101,0.3); transform:translateY(-2px); }
.btn-outline { border:1.5px solid currentColor; background:transparent; }
.btn-outline-dark { border:1.5px solid var(--charcoal); color:var(--charcoal); }
.btn-outline-dark:hover { border-color:var(--forest); color:var(--forest); transform:translateY(-2px); }
.btn-outline-light { border:1.5px solid rgba(255,255,255,0.4); color:var(--white); }
.btn-outline-light:hover { border-color:var(--blush); color:var(--blush); }
.btn-ghost { background:transparent; color:var(--forest); padding:0; letter-spacing:0.08em; font-size:0.8rem; }
.btn-ghost:hover { color:var(--rose); }
.btn-dark { background:var(--black); color:var(--white); }
.btn-dark:hover { background:var(--forest); transform:translateY(-2px); }

/* ── SECTION LABELS ── */
.label {
  display:inline-flex; align-items:center; gap:0.7rem;
  font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--sage); font-weight:500; margin-bottom:1rem;
}
.label::before { content:''; display:block; width:24px; height:1px; background:var(--sage); }

.section-title { font-size:clamp(2rem,4vw,3.2rem); line-height:1.15; margin-bottom:1rem; }
.section-title em { font-style:italic; color:var(--rose); }

/* ── NAV ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 3rem; height:64px;
  background:rgba(250,246,241,0.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:box-shadow 0.3s;
}
.nav.scrolled { box-shadow:var(--shadow-sm); }
.nav-logo { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:600; color:var(--forest); }
.nav-logo span { font-style:italic; color:var(--blush); }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { font-size:0.79rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--charcoal); font-weight:500; transition:color 0.2s; padding:0.2rem 0; border-bottom:2px solid transparent; }
.nav-links a:hover, .nav-links a.active { color:var(--forest); border-bottom-color:var(--blush); }
.nav-right { display:flex; align-items:center; gap:1rem; }
.nav-cart { position:relative; display:flex; align-items:center; gap:0.35rem; font-size:0.79rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--charcoal); font-weight:500; cursor:pointer; transition:color 0.2s; }
.nav-cart:hover { color:var(--forest); }
.cart-badge { position:absolute; top:-8px; right:-10px; width:18px; height:18px; border-radius:50%; background:var(--rose); color:var(--white); font-size:0.6rem; display:flex; align-items:center; justify-content:center; font-weight:600; }
.ham { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.ham span { width:22px; height:1.5px; background:var(--charcoal); display:block; transition:0.3s; }

/* ── MOBILE MENU ── */
.mobile-menu { display:none; position:fixed; inset:0; z-index:199; background:var(--cream); flex-direction:column; align-items:center; justify-content:center; gap:2rem; }
.mobile-menu.open { display:flex; }
.mobile-menu a { font-family:'Cormorant Garamond',serif; font-size:2.2rem; color:var(--charcoal); font-weight:300; }
.mobile-close { position:absolute; top:1.5rem; right:2rem; font-size:1.5rem; cursor:pointer; background:none; border:none; color:var(--charcoal); }

/* ── PAGE HEADER ── */
.page-hero { padding:120px 3rem 64px; text-align:center; background:var(--cream); position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 50% 110%, var(--light-sage) 0%, transparent 70%); }
.page-hero > * { position:relative; }
.page-hero .label { justify-content:center; }
.page-hero h1 { font-size:clamp(2.8rem,6vw,5rem); margin-bottom:1rem; }
.page-hero p  { font-size:1rem; color:#666; max-width:520px; margin:0 auto; line-height:1.8; font-weight:300; }

/* ── BREADCRUMB ── */
.breadcrumb { display:flex; align-items:center; gap:0.5rem; font-size:0.75rem; color:#999; letter-spacing:0.06em; }
.breadcrumb a { color:#999; transition:color 0.2s; }
.breadcrumb a:hover { color:var(--forest); }
.breadcrumb .sep { opacity:0.4; }

/* ── FOOTER ── */
footer {
  background:var(--black); color:rgba(255,255,255,0.55);
  font-size:0.78rem;
}
.footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:3rem; padding:4rem 3rem; border-bottom:1px solid rgba(255,255,255,0.06); }
.footer-brand .nav-logo { margin-bottom:1rem; display:block; }
.footer-brand p { font-size:0.82rem; line-height:1.8; opacity:0.5; max-width:280px; }
.footer-col h5 { font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.3); margin-bottom:1.2rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:0.7rem; }
.footer-col a { color:rgba(255,255,255,0.5); transition:color 0.2s; font-size:0.82rem; }
.footer-col a:hover { color:var(--blush); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding:1.5rem 3rem; }
.footer-socials { display:flex; gap:0.7rem; }
.soc { width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; font-size:0.8rem; color:rgba(255,255,255,0.4); transition:all 0.2s; }
.soc:hover { border-color:var(--blush); color:var(--blush); }

/* ── CARDS ── */
.card { background:var(--white); border-radius:4px; overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow var(--transition), transform var(--transition); }
.card:hover { box-shadow:var(--shadow-md); transform:translateY(-5px); }

/* ── FORM ELEMENTS ── */
.form-group { display:flex; flex-direction:column; gap:0.4rem; }
.form-group label { font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:#888; }
.form-group input, .form-group select, .form-group textarea {
  border:1.5px solid #E0D9D0; border-radius:2px; padding:0.8rem 1rem;
  font-size:0.88rem; font-family:'DM Sans',sans-serif;
  background:var(--white); color:var(--charcoal); outline:none;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--forest); box-shadow:0 0 0 3px rgba(58,107,69,0.1);
}
.form-group textarea { resize:vertical; min-height:120px; }

/* ── BADGE ── */
.badge { display:inline-block; padding:0.2rem 0.65rem; border-radius:2px; font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; }
.badge-rose   { background:var(--rose);   color:var(--white); }
.badge-forest { background:var(--forest); color:var(--white); }
.badge-gold   { background:var(--gold);   color:var(--white); }
.badge-sage   { background:var(--light-sage); color:var(--forest); }

/* ── TOAST ── */
.toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(20px); background:var(--forest); color:var(--white); padding:0.8rem 2rem; border-radius:2px; font-size:0.82rem; letter-spacing:0.06em; opacity:0; pointer-events:none; transition:opacity 0.3s, transform 0.3s; white-space:nowrap; z-index:500; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── WA FLOAT ── */
.wa-float { position:fixed; bottom:2rem; right:2rem; z-index:300; width:52px; height:52px; border-radius:50%; background:#25D366; color:var(--white); display:flex; align-items:center; justify-content:center; font-size:1.4rem; box-shadow:0 4px 20px rgba(37,211,102,0.4); transition:transform 0.25s; animation:pulse 2.5s infinite; }
.wa-float:hover { transform:scale(1.1); }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.d1 { transition-delay:0.1s; } .d2 { transition-delay:0.2s; } .d3 { transition-delay:0.3s; } .d4 { transition-delay:0.4s; }

@keyframes pulse { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.4)} 50%{box-shadow:0 4px 32px rgba(37,211,102,0.6)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .nav { padding:0 1.5rem; }
  .nav-links,.nav-cta-wrap { display:none; }
  .ham { display:flex; }
  .footer-top { grid-template-columns:1fr 1fr; gap:2rem; padding:3rem 1.5rem; }
  .footer-bottom { flex-direction:column; gap:1rem; padding:1.5rem; text-align:center; }
}
@media(max-width:600px){
  .footer-top { grid-template-columns:1fr; }
  .page-hero { padding:100px 1.5rem 48px; }
}