/* ============================================================
   Tidy Steps — Shared Brand Stylesheet
   Used by index.html, shop.html, policies.html.

   Contains: design tokens (colors/spacing), fonts, the topbar
   (nav), footer, and scroll-reveal animation — the pieces that
   are supposed to be IDENTICAL across all three pages. This is
   the single source of truth for those; editing this file
   updates the nav/footer everywhere at once instead of needing
   the same fix applied three times by hand.

   Page-specific layout (hero, product grid, policy sections,
   cards, etc.) stays in each page's own <style> block — this
   file deliberately does not touch those.
   ============================================================ */

:root{
  --sky:#7FD0C8;--sky-light:#E3F5F2;--orange:#D35E36;--orange-dark:#B84A28;
  --dark:#2C2C2A;--dark2:#3E3E3B;--dark3:#555552;
  --white:#fff;--off:#FEFBF2;--border:#DDE8EC;
  --green:#2A7A4B;--green-light:#E3F5EC;
  --red:#A32D2D;--red-light:#FCEBEB;
  --amber:#BA7517;--amber-light:#FAEEDA;
  --text:#2C2C2A;--muted:#6B7280;
  --edge:24px;
  --footer-h:0px;
  --topbar-h:0px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Fira Sans',Arial,sans-serif;background:var(--off);color:var(--text)}
.heading-font{font-family:'Libre Baskerville',serif}

/* ── Topbar (nav) ──────────────────────────────────────────── */
.topbar{
  position:fixed;top:16px;left:var(--edge);right:var(--edge);z-index:150;
  max-width:1152px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px 12px 16px;border-radius:16px;
  background:rgba(44,44,42,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 32px rgba(0,0,0,.15);
}
.topbar-logo-link{display:flex;align-items:center;gap:10px;text-decoration:none;padding:4px}
.topbar-logo-img{height:34px;width:auto;display:block;border-radius:6px}
.topbar-logo-text{font-family:'Libre Baskerville',serif;color:var(--sky);font-weight:700;font-size:26px}
.topbar-nav{display:flex;align-items:center;gap:22px}
.topbar-nav a:not(.shop-btn){color:#ddd;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:-0.01em}
.topbar-nav a:not(.shop-btn):hover{color:#fff}
.shop-btn{background:var(--orange);color:var(--off);border:none;border-radius:12px;padding:10px 22px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;transition:transform .2s ease;letter-spacing:-0.01em}
.shop-btn:hover{transform:scale(1.06)}
#cart-btn{background:var(--orange);color:var(--off);border:none;border-radius:12px;padding:10px 22px;font-size:13px;font-weight:700;letter-spacing:-0.01em;cursor:pointer;display:flex;align-items:center;gap:8px;transition:transform .2s ease}
#cart-btn:hover{transform:scale(1.05)}
#cart-count{background:rgba(0,0,0,0.25);border-radius:12px;padding:2px 8px;font-size:12px}

@media(max-width:640px){
  .topbar{padding:12px 16px 12px 14px; top:12px;}
  .topbar-nav a:not(.shop-btn){display:none}
}

/* ── Footer ────────────────────────────────────────────────── */
footer{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  background:var(--dark);color:#ccc;
  text-align:center;padding:14px var(--edge);font-size:12px;
  font-weight:400;
}
footer a{color:#fff;text-decoration:none;font-weight:600;padding:6px;display:inline-block}
footer a:hover{text-decoration:underline}
body{padding-bottom:var(--footer-h,0px)}
@media(max-width:640px){ footer{padding:10px 16px;font-size:11px} }

/* ── Scroll reveal ─────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px) scale(.97);transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.revealed{opacity:1;transform:translateY(0) scale(1)}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} }