/* ============================================================================
   Retrove shared skin — chrome + common components for EVERY page.
   Pairs with retrove-fonts.css (@font-face) + retrove-tokens.css (variables).
   Link order in <head>:  fonts → tokens → skin → (page's own <style>).
   Styles the existing class vocabulary used across the site so pages only need
   to: link these three sheets, drop their old :root + chrome CSS, and repoint
   page-specific fonts/colours to the tokens.
   ============================================================================ */

/* ---- base ---- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--cream);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;}
a{color:inherit;text-decoration:none;}
.serif{font-family:var(--font-display);}            /* legacy alias → chunky display face */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}

/* ---- wordmark (the <a class="brand">Retrove<small>…</small></a> lockup) ---- */
.brand{display:inline-block;line-height:1;font-family:var(--font-logo);font-size:30px;font-weight:400;color:var(--forest);letter-spacing:0;text-transform:none;}
.brand small{display:block;font-family:var(--font-body);font-size:9px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:6px;}

/* ---- storefront top bar (cream, sticky, translucent) ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(246,241,230,.86);backdrop-filter:saturate(140%) blur(8px);z-index:50;}
/* shop-tools / app variant — solid paper bar, not sticky. position:relative so the
   mobile nav dropdown (position:absolute) anchors to the bar, not the page. */
.topbar.tools{background:var(--paper);position:relative;backdrop-filter:none;}

.nav{display:flex;align-items:center;gap:30px;}
.nav a,.nav .signout{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color var(--dur-fast) var(--ease-soft);background:none;border:none;font-family:var(--font-body);}
.nav a:hover,.nav .signout:hover{color:var(--ink);}
.navdiv{display:none;}
.navmob{display:none;}                                /* surfaces only inside the mobile menu */

/* action cluster — search / saved / account / bag share class="bag" across pages */
.acts{display:flex;align-items:center;gap:18px;}
.bag{display:inline-flex;align-items:center;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap;cursor:pointer;background:none;border:none;padding:0;transition:color var(--dur-fast) var(--ease-soft);}
.bag:hover{color:var(--forest);}
.bag.on{color:var(--rust);}                           /* saved/active state */

/* sign-out / back links used by app + account + legal headers */
.signout{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color var(--dur-fast) var(--ease-soft);}
.signout:hover{color:var(--ink);}
.back{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color var(--dur-fast) var(--ease-soft);}
.back:hover{color:var(--ink);}

/* hamburger — hidden on desktop, shown when nav collapses */
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:.25s;border-radius:2px;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:820px){
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;align-items:stretch;
    background:var(--cream);border-bottom:1px solid var(--line);padding:4px 0;display:none;box-shadow:var(--shadow-card);}
  .nav.open{display:flex;}
  .nav a,.nav .signout{padding:15px 28px;text-align:left;}
  .navmob{display:block;}
  .hamburger{display:block;}
  .acts{gap:14px;}
  .topbar{padding:14px 18px;}
  .brand{font-size:27px;}
}
@media(max-width:480px){
  .brand small{font-size:8px;letter-spacing:.1em;}     /* keep the tagline on mobile, just tighter */
}

/* ---- eyebrow (wide-tracked uppercase micro-label) ---- */
.eyebrow{font-family:var(--font-body);font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
.eyebrow.on-dark{color:rgba(255,255,255,.9);}

/* ---- section head (serif/display title + tracked meta over a hairline) ---- */
.section-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:16px;margin:58px 0 34px;gap:18px;}
.section-head h2{font-family:var(--font-display);font-size:clamp(28px,3.4vw,38px);font-weight:700;letter-spacing:-.015em;}
.section-head span{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);text-align:right;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:600;letter-spacing:.005em;line-height:1.1;cursor:pointer;
  background:var(--forest);color:#fff;border:2px solid var(--forest);padding:13px 24px;font-size:14.5px;border-radius:var(--radius-md);box-shadow:var(--shadow-pop);
  transition:background var(--dur-fast) var(--ease-soft),color var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-pop);}
.btn:hover{background:var(--forest-ink);transform:translateY(-2px);}
.btn.ghost{background:transparent;color:var(--forest);box-shadow:none;}
.btn.ghost:hover{background:var(--forest);color:#fff;}
.btn[disabled],.btn:disabled{opacity:.5;cursor:default;transform:none;}

/* ---- forms (paper field, hairline border, forest focus) ---- */
input,select,textarea{font-family:var(--font-body);font-size:14.5px;color:var(--ink);}
.field,input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],input[type=password],select,textarea{
  width:100%;padding:13px 14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);outline:none;
  transition:border-color var(--dur-fast) var(--ease-soft);}
.field:focus,input:focus,select:focus,textarea:focus{border-color:var(--forest);}
label{font-family:var(--font-body);}

/* ---- generic surfaces (opt-in helpers) ---- */
.panel,.card-surface{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);}
.pill{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:var(--radius-pill);}
.pill.available{background:var(--green-tint);color:var(--green);}
.pill.sold{background:var(--rust-tint);color:var(--rust-ink);}
.tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;padding:6px 11px;border-radius:var(--radius-pill);background:var(--paper);color:var(--forest);box-shadow:var(--shadow-sm);}
/* Multi-photo indicator on a piece card — shown only when a piece has more than one photo. */
.card .ph .photos{position:absolute;right:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#fff;background:rgba(34,31,26,.6);padding:4px 8px;border-radius:var(--radius-pill);pointer-events:none;}
.card .ph .photos svg{width:12px;height:12px;}

/* ---- footer ---- */
footer{padding:48px 0 60px;text-align:center;color:var(--muted);font-size:12px;letter-spacing:.06em;margin-top:auto;}
.social{display:flex;justify-content:center;gap:12px;margin-bottom:16px;}
.social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;color:var(--muted);transition:color var(--dur-fast,.2s) ease,border-color var(--dur-fast,.2s) ease;}
.social a:hover{color:var(--forest);border-color:var(--forest);}
.social svg{width:18px;height:18px;}
footer .fb{font-family:var(--font-logo);font-size:30px;color:var(--forest);margin-bottom:8px;}
footer .fl{margin-top:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
footer .fl a{color:var(--muted);margin:0 9px;cursor:pointer;}
footer .fl a:hover{color:var(--ink);}
footer .copy{margin-top:16px;font-size:11px;letter-spacing:.06em;color:var(--muted);}
