/* suite-shop.css — in-suite shop + referral card (2026-11-03)
   Styles for the shop rendered inside the member Suite by
   suite-shop.js. Scoped under .ssh- and built on the suite's own
   design variables, same discipline as suite-capture.css, so the
   shop reads as native suite furniture. */

.ssh-head h2, .ssh-head h3 {
  font-family: var(--display);
  color: var(--ink);
  margin: 0 0 6px;
}
.ssh-head h2 { font-size: clamp(22px, 3.4vw, 30px); }
.ssh-head h3 { font-size: clamp(19px, 2.8vw, 25px); }
.ssh-dim { color: var(--muted); }
.ssh-status { min-height: 1.2em; color: var(--gold-pale); font-size: 14px; }
.ssh-closed {
  border: 1px solid var(--gold-deep); border-radius: 12px;
  background: rgba(212, 165, 72, .08); padding: 12px 14px; color: var(--ink);
}
.ssh-tag { color: var(--gold-pale); font-size: 13px; letter-spacing: .04em; }

/* bookings (Home) */
.ssh-bookings { display: grid; gap: 10px; margin: 14px 0 18px; }
.ssh-booking {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--surface2);
}
.ssh-booking-main { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.ssh-booking-main .ssh-dim { font-size: 14px; }
.ssh-booking-nums { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.ssh-past { opacity: .82; }

/* referral card */
.ssh-referral {
  border: 1px solid var(--gold-deep); border-radius: 14px;
  padding: 16px; margin: 18px 0;
  background: linear-gradient(180deg, rgba(212,165,72,.10), rgba(212,165,72,.03));
}
.ssh-referral h3 {
  font-family: var(--display); color: var(--ink); margin: 2px 0 6px;
  font-size: clamp(19px, 2.8vw, 24px);
}
.ssh-ref-link { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.ssh-ref-link code {
  flex: 1 1 240px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface2); color: var(--gold-pale);
  overflow-wrap: anywhere; font-size: 14px;
}
.ssh-ref-code { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.ssh-ref-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.ssh-ref-stats b { color: var(--ink); }

/* rebook form */
.ssh-rebook { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.ssh-rebook h3 { font-family: var(--display); color: var(--ink); margin: 2px 0 6px; font-size: clamp(19px, 2.8vw, 24px); }
.ssh-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px; margin: 12px 0;
}
.ssh-form label, .ssh-paymethod {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.ssh-form input, .ssh-form select, .ssh-paymethod select {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface2); color: var(--ink); font-size: 15px;
  letter-spacing: normal; text-transform: none;
}
.ssh-rb-addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; margin: 10px 0; }
.ssh-check { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; cursor: pointer; }
.ssh-rb-quote { margin: 10px 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.ssh-rb-quote b { color: var(--ink); }
.ssh-loyalty { color: var(--gold-pale); }

/* shop (Plan) */
.ssh-shop { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.ssh-shop:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.ssh-ladder, .ssh-addons {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin: 14px 0;
}
.ssh-tier, .ssh-addon {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  background: var(--surface2); display: flex; flex-direction: column; gap: 6px;
}
.ssh-tier.ssh-current, .ssh-addon.ssh-owned { border-color: var(--gold-deep); }
.ssh-tier-name, .ssh-addon-name { font-family: var(--display); color: var(--ink); font-size: 17px; }
/* Price figures carry the site figure standard (PRICE-FIX-2026-11-03,
   routed to this file by that crew): DM Sans 800, tabular + lining
   numerals, one soft separation shadow, sized up so the price is the
   loudest number on its card. The old 15px rendering was glyph-safe
   (DM Sans' closed 4) but well under the standard's size. The color is
   the standard's night hex set LITERALLY (like pe-prices.css pins it):
   the app's seasonal themes redefine --gold-pale (Halloween's is
   #ffd9a0), and a price figure does not change voice with the season. */
.ssh-tier-price, .ssh-addon-price {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  color: #f6db9c;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.ssh-tier-price { font-size: 1.4rem; }
.ssh-addon-price { font-size: 1.25rem; }
.ssh-tier .btn, .ssh-addon .btn { margin-top: auto; }
/* Button amounts are figures too — same numerals (their size/weight
   stay the suite button's own design). */
.ssh-tier .btn, .ssh-addon .btn, .ssh-upgrade, .ssh-add {
  font-variant-numeric: tabular-nums lining-nums;
}
.ssh-credit-toggle { margin: 8px 0; }
.ssh-paymethod { max-width: 240px; margin: 8px 0; }