/* ==========================================================
   CART + COMMERCE CHROME for the postoffice.css pages
   -----------------------------------------------------------
   The redesigned "system" pages (home, how-it-works, postcards,
   cards, love-letters, occasions) load only /postoffice.css, so
   they lack the cart/consent/back-to-top styling that lives in
   styles.css. This self-contained sheet brings just those pieces,
   in the postal palette, so /script.js (which injects the cart
   drawer, cookie bar and back-to-top button) renders correctly.
   Additive only — every selector here is a commerce class that
   doesn't exist elsewhere on these pages.
   ========================================================== */
:root {
  /* legacy tokens the copied cart CSS references, mapped to the postal palette */
  --color-bg: #e9dcbf;
  --color-bg-alt: #e3d5b4;
  --color-text: #33291a;
  --color-text-muted: #7a6a48;
  --color-line: #c3b28c;
  --color-black: #2e2416;
  --radius: 6px;
  --transition: 200ms ease;
}

/* ---------- cart button + count (postal, matches the commerce pages) ---------- */
.nav .cart-button {
  position: relative; display: inline-flex; align-items: center;
  background: none; 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;
  opacity: 0; transform: scale(0.8);
  transition: opacity var(--transition), transform var(--transition);
}
.nav .cart-count.visible { opacity: 1; transform: scale(1); }

/* ---------- back-to-top ---------- */
.back-to-top {
  position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px;
  background: var(--color-black); color: #fff; border: none; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 280ms ease, transform 280ms ease, background 200ms;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); z-index: 50; padding: 0;
}
.back-to-top.visible { opacity: 0.9; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { opacity: 1; background: #000; transform: translateY(-3px); }
@media (max-width: 720px) { .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; } }

/* ---------- cookie consent bar ---------- */
.consent-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 28px; padding: 14px 24px;
  background: var(--color-text); color: var(--color-bg);
  box-shadow: 0 -8px 30px -16px rgba(0, 0, 0, 0.4);
  transform: translateY(100%); transition: transform 0.3s ease;
}
.consent-bar.show { transform: translateY(0); }
.consent-text { margin: 0; font-size: 13px; line-height: 1.5; }
.consent-text a { color: var(--color-bg); text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.consent-btn {
  border: 1px solid rgba(255, 255, 255, 0.4); background: transparent; color: var(--color-bg);
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em; padding: 9px 20px;
  border-radius: 100px; cursor: pointer; transition: opacity 0.2s ease;
}
.consent-accept { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); }
.consent-btn:hover { opacity: 0.82; }
@media (max-width: 600px) {
  .consent-bar { justify-content: space-between; gap: 12px 16px; padding: 12px 18px; }
  .consent-text { flex: 1 1 180px; font-size: 12px; }
}

/* ---------- cart drawer ---------- */
.cart-drawer { position: fixed; inset: 0; z-index: 1000; }
.cart-drawer[hidden] { display: none; }
.cart-drawer-scrim { position: absolute; inset: 0; background: rgba(30, 22, 12, 0.42); opacity: 0; transition: opacity 0.28s ease; }
.cart-drawer.open .cart-drawer-scrim { opacity: 1; }
.cart-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--card); display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(60, 45, 20, 0.28);
  transform: translateX(100%); transition: transform 0.28s ease;
}
.cart-drawer.open .cart-drawer-panel { transform: translateX(0); }
.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px; border-bottom: 1px solid var(--color-line);
}
.cart-drawer-title { font-size: 13px; letter-spacing: 0.24em; font-weight: 600; font-family: var(--mono); color: var(--ink); }
.cart-drawer-close { font-size: 26px; line-height: 1; color: var(--color-text-muted); padding: 4px 8px; background: none; border: none; cursor: pointer; }
.cart-drawer-close:hover { color: var(--color-text); }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 8px 28px; }
.cart-drawer-empty { color: var(--color-text-muted); text-align: center; padding: 56px 0; font-size: 14px; line-height: 2.2; }
.cart-drawer-empty a { text-decoration: underline; text-underline-offset: 3px; color: var(--red); }
.cart-drawer-items { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.cart-item { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-line); }
.cart-item-thumb { flex: 0 0 48px; width: 48px; height: 60px; border-radius: 4px; background: var(--color-bg-alt) center / cover no-repeat; }
.cart-item-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-item-title { font-size: 12px; letter-spacing: 0.16em; font-weight: 500; text-transform: uppercase; color: var(--ink); }
.cart-item-loc { font-size: 12px; color: var(--color-text-muted); }
.cart-item-remove { font-size: 20px; line-height: 1; color: var(--color-text-muted); padding: 4px 8px; background: none; border: none; cursor: pointer; }
.cart-item-remove:hover { color: var(--color-text); }
.cart-drawer-foot { border-top: 1px solid var(--color-line); padding: 20px 28px 24px; }
.cart-drawer-summary { margin-bottom: 16px; }
.cart-sum-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-text-muted); padding: 3px 0; }
.cart-sum-total { color: var(--color-text); font-weight: 600; font-size: 15px; border-top: 1px solid var(--color-line); margin-top: 8px; padding-top: 10px; }
.cart-sum-saved { margin-top: 8px; font-size: 12px; color: #2e7d32; letter-spacing: 0.02em; }
.cart-drawer-note { margin-top: 12px; font-size: 11px; color: var(--color-text-muted); text-align: center; line-height: 1.5; }

/* checkout button — the drawer markup uses `.btn btn-primary`, which is a
   legacy class absent on these pages, so style the checkout class directly. */
.cart-drawer-checkout {
  width: 100%; display: block; text-align: center;
  background: var(--red); color: var(--cream);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 15px 20px; border-radius: 5px; border: none; cursor: pointer;
  box-shadow: 0 6px 16px rgba(178, 58, 46, 0.35);
  transition: transform 150ms ease, background 150ms ease;
}
.cart-drawer-checkout:hover { background: var(--red-deep); transform: translateY(-1px); }
.cart-drawer-checkout:disabled { opacity: 0.5; cursor: default; transform: none; }