/* ==========================================================
   POST OFFICE BRIDGE — compatibility skin for legacy pages.
   Loaded AFTER styles.css on pages that still run the old
   layout (composers, collection, wallpaper detail, bundles,
   legal). Retunes palette + type and carries the shared
   header/footer chrome (.air / .nav / .foot), whose markup is
   injected into these pages. Full redesigns replace this
   page-by-page.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Space+Mono:wght@400;700&family=Caveat:wght@500&display=swap');

:root {
  --color-bg: #e9dcbf;
  --color-bg-alt: #e3d5b4;
  --color-text: #33291a;
  --color-text-muted: #7a6a48;
  --color-line: #c3b28c;
  --color-black: #2e2416;
  /* post-office tokens for the shared chrome */
  --paper: #e9dcbf;
  --card: #faf5e8;
  --cream: #f3ead2;
  --ink: #2e2416;
  --ink-soft: #7a6a48;
  --ink-faint: #a2926a;
  --line: #c3b28c;
  --red: #b23a2e;
  --red-deep: #9a2f24;
  --blue: #35506e;
  --serif: 'Fraunces', Georgia, serif;
  --mono: 'Space Mono', 'Courier New', monospace;
}

body { font-family: var(--serif); }

/* ---------- shared header chrome ---------- */
.air {
  height: 11px;
  background: repeating-linear-gradient(-45deg,
    var(--red) 0 11px, var(--paper) 11px 22px,
    var(--blue) 22px 33px, var(--paper) 33px 44px);
}
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(18px, 4vw, 44px);
  border-bottom: 0.5px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.nav .logo {
  font-family: var(--serif) !important; font-size: clamp(17px, 2vw, 20px) !important;
  font-weight: 500 !important; font-style: italic; letter-spacing: 0.02em !important;
  text-transform: none !important; color: var(--ink); white-space: nowrap;
}
.nav .logo b { color: var(--red); font-weight: 600; }
.menu {
  display: flex; gap: clamp(14px, 2.4vw, 26px);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.menu a { color: inherit; text-decoration: none; transition: color 150ms ease; }
.menu a:hover, .menu a.active { color: var(--red); }
.send {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--red); color: var(--cream) !important; padding: 9px 16px; border-radius: 5px;
  text-decoration: none; white-space: nowrap; transition: transform 150ms ease, background 150ms ease;
}
.send:hover { background: var(--red-deep); transform: translateY(-1px); }
@media (max-width: 760px) { .menu { display: none; } }

/* ---------- shared footer chrome ---------- */
.foot {
  text-align: center; font-family: var(--mono); font-size: clamp(9px, 1vw, 11px);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint);
  padding: clamp(26px, 4vh, 40px) 20px 14px; margin: 0;
}
.foot-links {
  display: flex; gap: 18px 26px; justify-content: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); padding: 0 20px clamp(24px, 4vh, 36px);
}
.foot-links a { color: inherit; text-decoration: none; }
.foot-links a:hover { color: var(--red); }
body > footer { border-top: 0.5px solid var(--line); margin-top: clamp(30px, 5vh, 56px); }

/* ---------- legacy component retuning ---------- */
.btn-primary, .btn.btn-primary {
  background: #b23a2e !important; color: #f3ead2 !important;
  border-color: #b23a2e !important; border-radius: 5px !important;
  font-family: 'Space Mono', 'Courier New', monospace !important;
  letter-spacing: 0.15em !important;
}
.btn-primary:hover, .btn.btn-primary:hover { background: #9a2f24 !important; border-color: #9a2f24 !important; }
a.text-link, .price { color: #2e2416; }

/* ---------- footer social icons ---------- */
.foot-social {
  display: flex; justify-content: center; gap: 22px;
  padding: clamp(26px, 4vh, 40px) 20px 0;
}
.foot-social + .foot { padding-top: 14px; }
.foot-ico { display: inline-flex; align-items: center; color: var(--ink-soft); }
.foot-ico svg { display: block; }
.foot-ico:hover { color: var(--red); }

/* ---------- cart in the shared nav (wallpaper/bundle flows) ---------- */
.nav-right { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 20px); }
.nav .cart-button {
  position: relative; display: inline-flex; align-items: center;
  background: none !important; border: none; padding: 4px; cursor: pointer;
  color: var(--ink); transition: color 150ms ease;
}
.nav .cart-button:hover { color: var(--red); }
.nav .cart-count {
  position: absolute; top: -5px; right: -7px;
  background: var(--red); color: var(--cream);
  font-family: var(--mono); font-size: 9px; line-height: 1.5;
  border-radius: 100px; padding: 0 5px; min-width: 9px; text-align: center;
}

/* ---------- mobile menu ---------- */
.nav-right { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 20px); }
.burger { display: none; }
@media (max-width: 760px) {
  .burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 34px; height: 34px; padding: 7px;
    background: none; border: 0.5px solid var(--line); border-radius: 5px; cursor: pointer;
  }
  .burger span { display: block; height: 1.5px; background: var(--ink); border-radius: 2px; }
}
.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--paper);
  display: flex; flex-direction: column;
}
.mobile-menu[hidden] { display: none; }
.menu-open, .menu-open body { overflow: hidden; }
.mobile-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 0.5px solid var(--line);
}
.mobile-menu-close {
  background: none; border: none; cursor: pointer;
  font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--ink-soft); padding: 4px 8px;
}
.mobile-menu-links { display: flex; flex-direction: column; padding: 10px 18px; overflow-y: auto; }
.mobile-menu-links a {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); padding: 17px 2px; border-bottom: 0.5px dashed var(--line);
  text-decoration: none;
}
.mobile-menu-links a:active { color: var(--red); }
.mobile-menu-send { margin: auto 18px 26px; text-align: center; padding: 15px 20px !important; }

/* ---------- mobile: sticky mini-preview in the composers ---------- */
@media (max-width: 760px) {
  .po-docked {
    position: fixed; top: 64px; left: 50%;
    width: 92vw;
    transform: translateX(-50%) scale(0.62);
    transform-origin: top center;
    z-index: 39;
    filter: drop-shadow(0 14px 22px rgba(60, 45, 20, 0.45));
    pointer-events: auto;
  }
  .po-docked .detail-preview-caption { display: none; }
}