/* ─────────────────────────────────────────────
   Alovasia — shared design system
   Tokens, nav, footer, and common components
   used across all five pages (Home/Profile/News/Contact/Sale).
   ───────────────────────────────────────────── */

:root{
  --cream: #FAFAFA;   /* soft white page background — Alex requested moving off the tan/beige cream */
  --cream-2: #FFFFFF; /* pure white, one step lighter than --cream — panels/cards sitting on top */
  --forest: #1A2620;
  --forest-2: #1F3329;
  --gold: #A9813D;
  --gold-light: #C9A86A;
  --terracotta: #B9754A;
  --moss: #3B5C40;       /* warmer, lighter leaf-green — sampled from real @alovasia plant photos */
  --moss-light: #6E8F5E; /* sage highlight, pairs with --moss for photo-placeholder gradients */
  --moss-dark: #2A4430;  /* deeper moss — still green, not black, for bars needing more contrast (e.g. .cat-bar) */
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Inter', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--forest-2);
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.divider{
  width: 60px;
  height: 2px;
  background: var(--gold);
}

.cta{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  background: var(--gold);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 17px 30px;
  border-radius: 999px;
  text-decoration:none;
  border:none;
  cursor:pointer;
}
.cta svg{ width:16px; height:16px; }
.cta.secondary{
  background: transparent;
  color: var(--forest-2);
  border: 1.3px solid var(--forest-2);
}
.cta:disabled{ opacity:0.45; cursor:not-allowed; }

/* ── Nav (shared) ── */
.nav{
  position: relative;
  z-index: 3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 20px 56px 20px;
  max-width: 1680px;
  margin: 0 auto;
}
.logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  text-decoration:none;
}
.logo-icon{ width:32px; height:55px; object-fit:contain; flex-shrink:0; }
.logo-text{ display:flex; flex-direction:column; gap:2px; }
.logo .wordmark{
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--forest-2);
}
.nav-links{
  display:flex;
  align-items:center;
  gap: 40px;
}
.nav-links a{
  text-decoration:none;
  color: var(--forest-2);
  font-size: 14.5px;
  font-weight: 500;
  display:flex;
  align-items:center;
  gap:4px;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
}
.nav-links a.active{
  color: var(--gold);
  font-weight: 700;
  border-bottom-color: var(--gold);
}
.nav-icons{
  display:flex;
  align-items:center;
  gap: 22px;
}
.nav-icons svg{ width:20px; height:20px; color: var(--forest-2); cursor:pointer; flex-shrink:0; }
.nav-icons a{ display:flex; }
/* Sale page's search trigger is a <label>, not an <a> — kept separate from .nav-icons so it never
   picks up the outer container's own flex/order rules (that collision used to shove it out of place). */
.search-toggle{ display:flex; }
.search-toggle svg{ width:20px; height:20px; color: var(--forest-2); cursor:pointer; flex-shrink:0; }

/* Hamburger toggle — hidden on desktop, only shown/used under the 900px breakpoint below */
.nav-toggle{
  display:none;
  background:none;
  border:none;
  padding:4px;
  margin:0;
  cursor:pointer;
  color: var(--forest-2);
  flex-shrink:0;
}
.nav-toggle svg{ width:24px; height:24px; display:block; }
.lang-toggle{
  display:flex;
  border: 1.3px solid var(--moss);
  border-radius: 999px;
  overflow: hidden;
  margin-right: 4px;
}
.lang-opt{
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  background: none;
  border: none;
  color: var(--forest-2);
  cursor: pointer;
}
.lang-opt.active{
  background: var(--moss);
  color: var(--cream);
}
.cart-wrap{ position:relative; }
.cart-badge{
  position:absolute;
  top:-8px; right:-9px;
  background: var(--gold);
  color: var(--cream);
  font-size:10px;
  font-weight:700;
  width:17px; height:17px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* ── Compact page header (Profile/News/Contact/Sale) ── */
.page-header{
  max-width: 1680px;
  margin: 0 auto;
  padding: 56px 56px 40px;
  text-align:center;
}
.page-header .eyebrow{
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--gold);
  text-transform: uppercase;
}
.page-header h1{
  font-family: var(--font-serif);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.12;
  color: var(--forest-2);
  margin-top: 12px;
}
.page-header .divider{ margin: 22px auto 0; }
.page-header p.lede{
  max-width: 560px;
  margin: 22px auto 0;
  font-size: 16px;
  line-height: 1.7;
  opacity: 0.75;
}

/* ── Placeholder / pending marker (shared visual language) ── */
.pending-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  background: rgba(185,117,74,0.1);
  border: 1px solid rgba(185,117,74,0.3);
  border-radius: 999px;
  padding: 5px 12px;
}
.pending-tag svg{ width:11px; height:11px; }

/* decorative leaf mark, reused across section headers */
.leaf-mark{ width:22px; height:28px; opacity:0.5; flex-shrink:0; }
.leaf-mark path{ fill:none; stroke: var(--gold); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

/* ── Photo placeholder (shared) ──
   Used for every "photo pending" card across Home/Sale/News/Profile.
   Add this class alongside the page-specific card class (which sets
   aspect-ratio/layout) — this class owns only the moss gradient + texture,
   so the look stays identical everywhere and only needs updating in one place. */
.photo-placeholder{
  position: relative;
  background: linear-gradient(150deg, var(--moss-light) 0%, var(--moss) 100%);
}
.photo-placeholder::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(250,250,250,0.14) 1px, transparent 1.3px);
  background-size: 5px 5px;
  mix-blend-mode: overlay;
  opacity: 0.55;
  pointer-events: none;
}

/* ── Footer (shared) ── */
.site-footer{
  background: var(--forest);
  color: var(--cream);
  padding: 64px 56px 28px;
}
.footer-inner{
  max-width: 1680px;
  margin: 0 auto;
  display:flex;
  justify-content:space-between;
  gap: 48px;
  flex-wrap:wrap;
}
.footer-brand .wordmark{
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.footer-brand p{
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.7;
  opacity: 0.65;
  max-width: 320px;
}
.footer-col h4{
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 16px;
}
.footer-col a{
  display:block;
  text-decoration:none;
  color: var(--cream);
  opacity: 0.75;
  font-size: 14px;
  margin-bottom: 10px;
}
.footer-col a:hover{ opacity: 1; }
.footer-bottom{
  max-width: 1680px;
  margin: 40px auto 0;
  border-top: 1px solid rgba(250,250,250,0.15);
  padding-top: 20px;
  font-size: 12px;
  opacity: 0.55;
  text-align:center;
}

@media (max-width: 900px){
  .nav{
    flex-wrap: wrap;
    row-gap: 14px;
    padding: 18px 24px;
  }
  .logo{ order:1; }
  .nav-icons{ order:2; margin-left:auto; gap:16px; }
  .nav-toggle{ order:3; display:flex; position:relative; z-index:2; margin-left:16px; }
  .nav-links{
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--cream-2);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .nav-links.open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-links a{
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    justify-content:center;
    padding:14px 0;
    border-bottom:none;
  }
  .nav-links a.active{ color: var(--gold); }
  .page-header{ padding: 40px 24px 32px; }
  .footer-inner{ flex-direction:column; gap:32px; }
  .site-footer{ padding: 48px 24px 24px; }
}