/* Wild Mariposa Co — shared site styles (home, shop, FAQ, 404) */
:root{
  --plum:#2a1040; --purple:#5a2d82; --violet:#6b4488; --mid:#8b5ca8; --rose:#b05080; --rose-ink:#a03060;
  --lav:#c9a8e0; --pale:#e0cef0; --ghost:#f5f0ff; --near:#faf6ff; --blush:#fff0f7; --white:#ffffff;
  --wooded-bg:#e8efe3; --wooded:#3f5a3a;
  --garden-bg:#fbe6ee; --garden:#8e3560;
  --warm-bg:#f8ead9;   --warm:#8a5220;
  --calm-bg:#e4edf5;   --calm:#3d5670;
  --grad:linear-gradient(135deg,#5a2d82,#b05080);
  /* side padding: 120px, growing on very wide screens so content tops out at ~1320px */
  --gutter:max(120px, calc((100vw - 1336px) / 2)); --radius:20px;
  --display:"Alata",sans-serif;
  --body:"Plus Jakarta Sans","Segoe UI",sans-serif;
}
@media (max-width:1200px){:root{--gutter:56px}}
@media (max-width:760px){:root{--gutter:20px;--radius:18px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--body);color:var(--plum);background:linear-gradient(180deg,var(--near) 0%,var(--blush) 100%);background-color:var(--near);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--purple)}
a:hover{color:var(--rose-ink)}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--mid);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--white);padding:10px 16px;border-radius:8px;z-index:999}
.skip:focus{left:8px}

/* ---------- type ---------- */
.eyebrow{font-family:var(--display);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);margin:0}
.eyebrow.rose{color:var(--rose-ink)}
.h1,.h2,.h3{font-family:var(--display);font-weight:400;text-transform:uppercase;margin:0}
.h1{font-size:68px;line-height:1.04;letter-spacing:.03em}
.h2{font-size:40px;line-height:1.15;letter-spacing:.06em}
.h3{font-size:20px;letter-spacing:.12em}
.lead{font-size:18px;line-height:1.7;margin:0}
p{margin:0}
@media (max-width:760px){.btn{padding:14px 22px;font-size:13px;letter-spacing:.12em}.h1{font-size:40px}.h2{font-size:26px;letter-spacing:.05em}.lead{font-size:16px}}

/* ---------- buttons ---------- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font-family:var(--display);font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:15px 32px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn-primary{color:#fff;background:var(--grad)}
.btn-primary:hover{color:#fff;box-shadow:0 6px 18px rgba(90,45,130,.3);transform:translateY(-1px)}
.btn-outline{color:var(--purple);border-color:var(--purple);background:transparent}
.btn-outline:hover{background:var(--ghost);color:var(--purple)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:200;background:var(--plum);height:80px}
.site-header .inner{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);gap:24px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.brand:hover{color:#fff}
.brand .mark{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:var(--ghost);display:flex;align-items:center;justify-content:center}
.brand .mark img{width:34px;height:auto}
.brand .word{font-family:var(--display);font-size:20px;letter-spacing:.28em;text-transform:uppercase;white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:40px}
.site-nav a{font-size:15px;font-weight:500;color:var(--pale);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.site-nav a:hover{color:#fff}
.site-nav a[aria-current="page"]{color:#fff;font-weight:600;border-bottom-color:#f0b0c8}
.site-nav .btn{padding:12px 24px;min-height:44px;font-size:13px;border-bottom:none;color:#fff}
.menu-btn{display:none;width:44px;height:44px;border:none;background:transparent;color:var(--pale);align-items:center;justify-content:center;padding:0;cursor:pointer}
@media (max-width:860px){
  .site-header{height:64px}
  .brand{gap:10px}
  .brand .mark{width:36px;height:36px}.brand .mark img{width:27px}
  .brand .word{font-size:14px;letter-spacing:.22em}
  .menu-btn{display:flex}
  .site-nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--plum);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 20px;box-shadow:0 12px 24px rgba(42,16,64,.25)}
  .site-nav.open{display:flex}
  .site-nav a{padding:14px 0;font-size:16px;border-bottom:1px solid rgba(224,206,240,.15)}
  .site-nav a[aria-current="page"]{border-bottom-color:rgba(224,206,240,.15);color:#f0b0c8}
  .site-nav .btn{margin-top:14px}
}

/* ---------- footer ---------- */
.site-footer{background:var(--ghost);border-top:1px solid var(--pale);padding:64px var(--gutter);display:flex;justify-content:space-between;gap:64px;flex-wrap:wrap}
.site-footer .f-brand{display:flex;flex-direction:column;gap:16px;max-width:380px}
.site-footer .f-logo{display:flex;align-items:center;gap:14px}
.site-footer .f-logo img{width:84px;height:auto}
.site-footer .f-logo span{font-family:var(--display);font-size:18px;letter-spacing:.28em;text-transform:uppercase;white-space:nowrap}
.site-footer .slogan{font-family:var(--display);font-size:26px;letter-spacing:.04em;color:var(--mid)}
.site-footer .small{font-size:13px;color:var(--violet);line-height:1.6}
.nw{white-space:nowrap}
.site-footer .f-cols{display:flex;gap:80px;flex-wrap:wrap}
.site-footer .f-col{display:flex;flex-direction:column;gap:12px}
.site-footer .f-col a{font-size:15px;text-decoration:none}
.site-footer .f-col a:hover{text-decoration:underline}
@media (max-width:760px){.site-footer{padding:40px var(--gutter);gap:32px}.site-footer .f-logo img{width:64px}.site-footer .f-logo span{font-size:15px;letter-spacing:.2em}.site-footer .slogan{font-size:22px}.site-footer .f-cols{gap:40px}}

/* ---------- pieces shared by pages ---------- */
.card{background:var(--white);border:1px solid var(--pale);border-radius:var(--radius)}
.chip{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;white-space:nowrap}
.chip-ready{background:var(--wooded-bg);color:var(--wooded)}
.chip-soon{background:var(--warm-bg);color:var(--warm)}
.chip-order{background:var(--ghost);color:var(--purple);border:1px solid var(--pale)}
.chip-out{background:#efedf2;color:#6d6475}
.t-wooded{--tint:var(--wooded-bg);--ink:var(--wooded)}
.t-garden{--tint:var(--garden-bg);--ink:var(--garden)}
.t-warm{--tint:var(--warm-bg);--ink:var(--warm)}
.t-calm{--tint:var(--calm-bg);--ink:var(--calm)}
.t-excl{--tint:var(--near);--ink:var(--purple)}
.stars{display:inline-flex;gap:3px;color:var(--rose)}
.notice{padding:16px 24px;border-radius:14px;background:var(--ghost);border:1px solid var(--pale);display:flex;align-items:center;gap:14px;font-size:15px;line-height:1.55}
.notice svg{flex-shrink:0}