/* assets/sticker-sheet.css — the CAF For Sale By Owner window sticker, the
   EXACT event print sheet, published for /car-value's free sign.
   Port of scripts/stickers/sticker.css (816×1056px @96dpi = letter) into
   container units (1 unit = 1px on the 816px-wide sheet) so one markup
   serves the in-report preview at any width and the letter print sheet.
   Class names carry an ss- prefix so the page's own .card/.title/.box never
   collide. The logo is an <img> in a cropping frame (prints everywhere).
   What is NOT here vs the event sheet: the key-number box copy (event-only),
   the VIN row (not collected), and the buyer legal footer (the seller asked
   for the sticker minus that text). The QR keeps its top-left box. */

.ss-frame{ container-type:inline-size; width:100%;
  --navy:#04367b; --orange:#ff914d; --key-blue:#1a6cfe; --ink:#0b0f14; --line:#d9dce1; --muted:#8a9099; }
.ss-sheet{
  --u:0.122549cqw; /* 1/816 of the sheet width */
  width:100%; aspect-ratio:816/1056;
  background:#fff; display:flex;
  font-family:'Poppins',system-ui,sans-serif; color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
  box-sizing:border-box;
}
.ss-sheet *{ box-sizing:border-box; margin:0; }

/* ---- outer orange frame ---- */
.ss-outer{ flex:1; background:var(--orange); padding:calc(15*var(--u)); display:flex; min-width:0; }
.ss-card{
  flex:1; background:#fff; border-radius:calc(16*var(--u)); padding:calc(26*var(--u)) calc(26*var(--u)) calc(24*var(--u));
  display:flex; flex-direction:column; gap:calc(16*var(--u)); min-width:0;
}

/* ---- title ---- */
.ss-title{ border:calc(3*var(--u)) solid var(--navy); border-radius:calc(18*var(--u)); text-align:center; padding:calc(14*var(--u)) calc(10*var(--u)) calc(16*var(--u)); }
.ss-title h1{ font-weight:800; font-size:calc(54*var(--u)); letter-spacing:calc(-1*var(--u)); line-height:1; color:var(--ink); white-space:nowrap; }

.ss-box{ border:calc(1.5*var(--u)) solid var(--line); border-radius:calc(16*var(--u)); padding:calc(18*var(--u)) calc(20*var(--u)); min-width:0; }
.ss-label{ font-weight:500; font-size:calc(15*var(--u)); color:var(--ink); letter-spacing:calc(.2*var(--u)); }
.ss-label--caps{ text-transform:uppercase; font-size:calc(14*var(--u)); letter-spacing:calc(.4*var(--u)); }
.ss-label .ss-name{ text-transform:none; }
.ss-value{ font-weight:800; font-size:calc(34*var(--u)); line-height:1; margin-top:calc(8*var(--u)); letter-spacing:calc(-.5*var(--u)); overflow-wrap:anywhere; }
.ss-value.fit-sm{ font-size:calc(34*var(--u)*.8); }
.ss-value.fit-xs{ font-size:calc(34*var(--u)*.65); }
.ss-value.is-empty{ color:#c9cfdd; }

/* ---- top row: QR box (same spot as the event sheet) + the interested box ---- */
.ss-rowTop{ display:grid; grid-template-columns:1fr calc(320*var(--u)); gap:calc(16*var(--u)); align-items:stretch; }
.ss-rowTop.ss-single{ grid-template-columns:1fr; }
.ss-instr{ display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:calc(10*var(--u)) calc(8*var(--u)); }
.ss-instr b{ font-weight:700; font-size:calc(24*var(--u)); line-height:1.15; display:block; }
.ss-instr span{ font-weight:500; font-size:calc(21*var(--u)); line-height:1.2; color:#20262e; display:block; }
.ss-lot{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(8*var(--u)); padding:calc(12*var(--u)) calc(10*var(--u)); text-align:center; }
.ss-lot b{ font-weight:700; font-size:calc(19*var(--u)); display:block; line-height:1.25; }
.ss-lot span{ font-weight:500; font-size:calc(16*var(--u)); color:#20262e; line-height:1.25; display:block; }
.ss-lot .ss-num{ font-weight:800; font-size:calc(40*var(--u)); color:var(--key-blue); letter-spacing:calc(-1*var(--u)); line-height:1; white-space:nowrap; }
.ss-qrCell{ display:flex; flex-direction:column; align-items:center; gap:calc(4*var(--u)); flex:0 0 auto; }
.ss-qrCell svg{ display:block; width:calc(176*var(--u)); height:calc(176*var(--u)); }
.ss-qrCap{ font-weight:700; font-size:calc(12*var(--u)); line-height:1.3; color:var(--navy); text-align:center; letter-spacing:calc(.3*var(--u)); text-transform:uppercase; }

/* ---- price + contact row ---- */
.ss-row2{ display:grid; grid-template-columns:1fr 1fr; gap:calc(16*var(--u)); }

/* ---- body row (fills the remaining sheet height) ---- */
.ss-rowBody{ display:grid; grid-template-columns:1fr 1fr; gap:calc(16*var(--u)); align-items:stretch; flex:1; min-height:0; }
.ss-specs{ display:flex; flex-direction:column; gap:calc(14*var(--u)); justify-content:space-between; }
.ss-spec .ss-k{ font-weight:500; font-size:calc(16*var(--u)); color:#20262e; }
.ss-spec .ss-v{ font-weight:800; font-size:calc(34*var(--u)); line-height:1.05; margin-top:calc(3*var(--u)); letter-spacing:calc(-.3*var(--u)); overflow-wrap:anywhere; }
.ss-spec .ss-v.fit-sm{ font-size:calc(34*var(--u)*.8); }
.ss-spec .ss-v.fit-xs{ font-size:calc(34*var(--u)*.65); }
.ss-specGrid{ display:grid; grid-template-columns:1fr 1fr; gap:calc(14*var(--u)) calc(18*var(--u)); }
.ss-rightCol{ display:flex; flex-direction:column; gap:calc(16*var(--u)); min-height:0; }
.ss-rightCol .ss-box{ flex:1; overflow:hidden; }
.ss-h{ font-weight:800; font-size:calc(21*var(--u)); text-decoration:underline; text-underline-offset:calc(3*var(--u)); }
.ss-rightCol ul{ margin:calc(14*var(--u)) 0 0 calc(20*var(--u)); padding:0; }
.ss-rightCol li{ font-weight:500; font-size:calc(21*var(--u)); line-height:1.4; color:#20262e; margin-bottom:calc(10*var(--u)); overflow-wrap:anywhere; }

/* ---- footer: brand only (the event sheet's legal text is dropped here) ---- */
.ss-footer{ display:flex; gap:calc(20*var(--u)); align-items:flex-end; justify-content:flex-end; padding-top:calc(4*var(--u)); }
.ss-brand{ display:flex; flex-direction:column; align-items:flex-end; gap:calc(4*var(--u)); }
.ss-brand .ss-logo{ position:relative; width:calc(220*var(--u)); height:calc(74*var(--u)); overflow:hidden; display:block; }
.ss-brand .ss-logo img{ position:absolute; left:calc(-34*var(--u)); top:calc(-107*var(--u)); width:calc(286*var(--u)); height:calc(286*var(--u)); max-width:none; }
.ss-brand .ss-url{ font-weight:700; font-size:calc(14*var(--u)); color:var(--ink); }