/* Aww Comics & Collectibles storefront design system, from Art's locked comps
   (2026-07-30): home/front-door c707d88a, card system v2 64caec6f,
   item detail+checkout 31d3b208, buyer order history d205118f, owner
   fulfillment workbench a6685805. Shared tokens across all five; two
   registers (bold = public storefront, calm = owner's Store & Listings
   workbench) share the same tokens, toned differently. */
:root {
  --room: #1c140f; --room-2: #251a13; --paper: #ecdfc0; --paper-dim: #d9c69a;
  --ink: #201a14; --brass: #b48a4a; --brass-bright: #e0bd82; --oxblood: #5c2028;
  --comic-red: #c9342a;
  /* SiteHealth flagged 2026-08-26: cream-text on --comic-red buttons (Join,
     Shop Comics, Filter) measured 4.21:1, under WCAG AA's 4.5:1. Same real
     problem exists in two directions --comic-red is used in but the scan
     didn't catch (different pages): as background behind cream-text
     (buttons) it needs to go DARKER; as plain text color on a dark page
     background (price tags, order totals) it needs to go LIGHTER -- a
     single value can't satisfy both, same lesson as the --patina/.scarcity
     split above. --comic-red itself is left alone (its original use on
     --room/--room-2 as decorative/border color, e.g. dead .sold-stamp CSS,
     is unaffected); these two are for the specific failing roles only. */
  --comic-red-btn: #b42e25;  /* buttons w/ cream-text, and text on light --paper: verified >=4.5:1 both directions */
  --comic-red-text: #ec6b61; /* text on dark --room/--room-2/--ink/.aww-cert: verified >=5.5:1 */
  /* Lightened 2026-08-24 (SiteHealth a11y scan) -- the original #6c8a76 measured
     4.48:1 on --room-2, under WCAG AA's 4.5:1 for normal text; this used as text
     color on the DARK .aww-room background in a dozen+ places (trust row,
     pay-secure note, buyer labels, hero subtitle, etc). Verified >=6.3:1 against
     both --room and --room-2. NOT used for .scarcity below -- that renders on
     the light paper card background, a completely different contrast problem,
     given its own dedicated color instead of this token. */
  --patina: #84a68e; --cream-text: #f1e6c8;
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-label: "Courier New", Consolas, monospace;
}

.aww-room { background: var(--room); color: var(--cream-text); font-family: var(--font-body); padding: 32px 0 80px; }
.aww-room .aww-page { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.aww-room .aww-page.narrow { max-width: 720px; }
.aww-room a { color: inherit; }
.aww-room h1.aww-title { font-family: var(--font-display); font-weight: 700; font-size: 1.7em; color: var(--brass-bright); margin: 0 0 8px; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
.aww-room h2.aww-section-title { font-family: var(--font-display); font-weight: 700; font-size: 1.2em; color: var(--brass-bright); margin: 0 0 14px; }
.aww-room .aww-lede { color: var(--paper-dim); max-width: 74ch; line-height: 1.6; margin: 0 0 20px; }

/* ---------- filter bar ---------- */
.aww-filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; background: var(--room-2); border: 1px solid rgba(180,138,74,0.25); border-radius: 6px; padding: 12px 16px; margin-bottom: 26px; }
.aww-filter-bar select, .aww-filter-bar input { font-family: var(--font-body); font-size: 0.85em; background: var(--room); border: 1px solid rgba(180,138,74,0.35); color: var(--cream-text); padding: 7px 10px; border-radius: 4px; }
.aww-filter-bar input::placeholder { color: var(--paper-dim); opacity: 0.6; }
.aww-filter-bar input[type=text] { flex: 1; min-width: 160px; }
.aww-filter-bar label { display: flex; align-items: center; gap: 6px; font-size: 0.82em; color: var(--paper-dim); font-family: var(--font-body); }
.aww-filter-bar .aww-btn { margin-left: auto; }

/* ---------- New Arrivals strip ---------- */
.aww-new-strip { background: linear-gradient(90deg, rgba(180,138,74,0.14), transparent); border-left: 3px solid var(--brass); padding: 14px 18px; margin-bottom: 18px; }
.aww-new-strip .label { font-family: var(--font-label); font-size: 0.75em; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brass-bright); }
.aww-new-strip .sub { font-size: 0.85em; color: var(--paper-dim); margin-top: 2px; }

/* ---------- card system v2 ---------- */
.aww-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .aww-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .aww-grid { grid-template-columns: 1fr; } }

.ccard, .icard { background: linear-gradient(160deg, #2a1e15, var(--room-2) 60%); border: 1px solid rgba(180,138,74,0.32); border-radius: 3px; padding: 10px; position: relative; transition: transform 0.15s ease; text-decoration: none; display: block; }
.ccard:hover, .icard:hover { transform: translateY(-3px); }
.cglass, .iglass { position: relative; background: linear-gradient(150deg, var(--paper), var(--paper-dim) 80%); border-radius: 2px; overflow: hidden; }
.cglass::before, .iglass::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,0.5) 50%, transparent 58%); pointer-events: none; z-index: 3; }
.cover, .icover { height: 130px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); font-family: var(--font-label); font-size: 0.68em; text-align: center; padding: 8px; background-size: cover; background-position: center; }
.cover { background-color: #4a2c22; background-image: linear-gradient(160deg, #7a4a3a, #4a2c22); }
.icover { background-color: #7a5a2e; background-image: radial-gradient(circle at 40% 35%, #d9b26e, #7a5a2e 70%); color: rgba(0,0,0,0.4); }
.cbody, .ibody { padding: 9px 8px 10px; }
.ctitle { font-family: var(--font-display); font-weight: 700; font-size: 0.92em; color: var(--ink); margin: 0 0 2px; text-wrap: balance; }
.cmeta { font-size: 0.74em; color: #4a3f30; margin: 0 0 7px; }

.aww-hero-row { display: flex; align-items: stretch; gap: 6px; margin-bottom: 8px; }
.slab-mini { flex: 1; display: flex; align-items: center; gap: 6px; background: #f4f0e4; border: 1px solid #b8b09a; border-radius: 2px; padding: 5px 7px; }
.slab-mini .co { font-family: var(--font-label); font-weight: bold; font-size: 0.58em; color: #2a2a2a; line-height: 1.25; }
.slab-mini .co small { display: block; font-weight: normal; font-size: 0.9em; color: #6a6a6a; }
.slab-mini .grade { font-family: var(--font-display); font-weight: 700; font-size: 1.15em; color: var(--ink); margin-left: auto; }
.raw-mini { flex: 1; display: flex; align-items: center; background: rgba(32,26,20,0.05); border: 1px dashed #8a7f66; border-radius: 2px; padding: 5px 7px; font-family: var(--font-label); font-size: 0.68em; color: #4a3f30; }
.price-mini { display: flex; align-items: center; justify-content: center; background: var(--ink); border-radius: 2px; padding: 5px 10px; font-family: var(--font-label); font-weight: bold; color: var(--comic-red-text); font-size: 1.05em; white-space: nowrap; }

.key-ribbon { position: absolute; top: 8px; left: -4px; z-index: 4; background: var(--comic-red); color: var(--cream-text); font-family: var(--font-label); font-size: 0.6em; letter-spacing: 1px; padding: 3px 10px 3px 12px; border-radius: 0 2px 2px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.new-badge { position: absolute; top: 6px; right: 6px; z-index: 4; background: var(--brass); color: var(--room); font-family: var(--font-label); font-weight: bold; font-size: 0.58em; letter-spacing: 0.5px; padding: 3px 7px; border-radius: 2px; }
.itype-tag { display: inline-block; font-family: var(--font-label); font-size: 0.62em; letter-spacing: 1px; text-transform: uppercase; background: var(--brass); color: var(--ink); padding: 2px 7px; border-radius: 2px; margin-bottom: 8px; }

/* .status-strip/.scarcity render inside .cglass/.iglass, which has a LIGHT
   paper-gradient background (line ~49), not the dark .aww-room background --
   easy to miss since most of this page is dark. Original colors (#7a6f5a,
   --patina #6c8a76) measured under 3:1 here, real contrast failures for
   normal text. Given their own dark, dedicated colors (not tied to --patina,
   which is correctly light-toned for its actual dark-background uses
   elsewhere) -- verified >=5.9:1 against both ends of the paper gradient. */
.status-strip { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-family: var(--font-label); font-size: 0.66em; color: #4a3f30; }
.scarcity { color: #33473a; }
.status-strip.reserved { background: var(--brass); color: var(--room); padding: 4px 8px; border-radius: 2px; font-weight: bold; justify-content: center; margin-top: 8px; }
.ccard.sold .cglass, .icard.sold .iglass { filter: grayscale(0.6) brightness(0.75); }
.sold-stamp { position: absolute; z-index: 5; top: 38%; left: 50%; transform: translate(-50%,-50%) rotate(-12deg); border: 3px solid var(--comic-red); color: var(--comic-red); font-family: var(--font-display); font-weight: 700; font-size: 1.15em; letter-spacing: 3px; padding: 3px 14px; opacity: 0.9; text-transform: uppercase; background: rgba(236,223,192,0.15); }

/* ---------- buttons ---------- */
.aww-btn { font-family: var(--font-display); font-weight: 700; font-size: 0.9em; padding: 10px 20px; border-radius: 3px; text-decoration: none; display: inline-block; border: none; cursor: pointer; }
.aww-btn.red { background: var(--comic-red-btn); color: var(--cream-text); box-shadow: 0 4px 0 #8c221a; }
.aww-btn.ghost { border: 1px solid var(--brass); color: var(--brass-bright); background: transparent; }
.aww-btn.big { padding: 15px 30px; font-size: 1.1em; box-shadow: 0 4px 0 #8c221a, 0 8px 16px rgba(0,0,0,0.35); }
.aww-btn.block { display: block; width: 100%; text-align: center; }

/* ---------- item detail ---------- */
.aww-detail { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; background: linear-gradient(160deg, #2a1e15, var(--room-2) 60%); border: 1px solid rgba(180,138,74,0.3); border-radius: 6px; padding: 26px; margin-bottom: 20px; }
@media (max-width: 620px) { .aww-detail { grid-template-columns: 1fr; } }
.aww-detail .thumb { background: linear-gradient(150deg, var(--paper), var(--paper-dim) 80%); border-radius: 3px; min-height: 240px; display: flex; align-items: center; justify-content: center; color: rgba(0,0,0,0.35); font-family: var(--font-label); font-size: 0.72em; text-align: center; overflow: hidden; }
.aww-detail .thumb img { width: 100%; height: 100%; object-fit: cover; }
.aww-detail .d-title { font-family: var(--font-display); font-weight: 700; font-size: 1.5em; margin: 0 0 4px; color: var(--cream-text); }
.aww-detail .d-sub { color: var(--paper-dim); font-size: 0.95em; margin: 0 0 16px; }
.aww-detail .d-hero { display: flex; gap: 10px; margin-bottom: 18px; }
.slab { flex: none; display: flex; align-items: center; gap: 8px; background: #f4f0e4; border: 1px solid #b8b09a; border-radius: 2px; padding: 6px 10px; }
.slab .co { font-family: var(--font-label); font-weight: bold; font-size: 0.6em; color: #2a2a2a; line-height: 1.3; }
.slab .co small { display: block; font-weight: normal; font-size: 0.9em; color: #6a6a6a; }
.slab .grade { font-family: var(--font-display); font-weight: 700; font-size: 1.3em; color: var(--ink); }
.aww-trust-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-family: var(--font-label); font-size: 0.72em; color: var(--patina); }
.aww-trust-row span { display: flex; align-items: center; gap: 5px; }
.aww-collector-note { margin-top: 18px; padding: 14px 16px; background: rgba(224,189,130,0.08); border-left: 3px solid var(--brass); border-radius: 2px; }
.aww-collector-note .lbl { font-family: var(--font-label); font-size: 0.7em; letter-spacing: 1px; text-transform: uppercase; color: var(--brass-bright); margin-bottom: 4px; }
.aww-collector-note .val { font-family: var(--font-display); font-style: italic; color: var(--cream-text); }

/* ---------- sales ticket / order recap ---------- */
.aww-ticket { max-width: 460px; background: var(--paper); color: var(--ink); border-radius: 3px; padding: 24px 26px; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
.aww-ticket::before, .aww-ticket::after { content: ""; position: absolute; width: 22px; height: 22px; background: var(--room); border-radius: 50%; top: 50%; transform: translateY(-50%); }
.aww-ticket::before { left: -11px; } .aww-ticket::after { right: -11px; }
.aww-ticket-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px dashed #8a7f66; padding-bottom: 12px; margin-bottom: 14px; }
.aww-ticket-head .brand { font-family: var(--font-display); font-weight: 700; font-size: 1.05em; }
.aww-ticket-head .no { font-family: var(--font-label); font-size: 0.7em; color: #6a6a6a; }
.aww-ticket-row { display: flex; justify-content: space-between; padding: 6px 0; font-family: var(--font-label); font-size: 0.85em; }
.aww-ticket-row.total { border-top: 2px dashed #8a7f66; margin-top: 8px; padding-top: 10px; font-weight: bold; font-size: 1.05em; color: var(--comic-red-btn); }
.aww-hold-timer { display: flex; align-items: center; gap: 8px; background: rgba(224,189,130,0.12); border: 1px solid var(--brass); border-radius: 3px; padding: 8px 12px; margin: 14px 0; font-family: var(--font-label); font-size: 0.78em; color: var(--brass); }
.aww-hold-timer b { font-size: 1.1em; }

/* ---------- payment panel ---------- */
.aww-pay-panel { max-width: 460px; background: var(--room-2); border: 1px solid rgba(180,138,74,0.3); border-radius: 8px; padding: 24px 26px; }
.aww-pay-recap { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px dashed rgba(180,138,74,0.3); }
.aww-pay-recap .thumb { width: 46px; height: 46px; flex: none; background: linear-gradient(150deg, var(--paper), var(--paper-dim) 80%); border-radius: 3px; overflow: hidden; }
.aww-pay-recap .thumb img { width: 100%; height: 100%; object-fit: cover; }
.aww-pay-recap .t { font-family: var(--font-display); font-weight: 700; font-size: 0.95em; }
.aww-pay-recap .g { font-family: var(--font-label); font-size: 0.75em; color: var(--brass-bright); }
.aww-pay-recap .amt { margin-left: auto; font-family: var(--font-label); font-weight: bold; color: var(--comic-red-text); }
.aww-pay-secure { display: flex; align-items: center; gap: 6px; font-family: var(--font-label); font-size: 0.72em; color: var(--patina); margin-bottom: 14px; }
.aww-pay-submit { display: block; width: 100%; text-align: center; background: var(--comic-red-btn); color: var(--cream-text); font-family: var(--font-display); font-weight: 700; font-size: 1.02em; padding: 13px; border: none; border-radius: 4px; margin-top: 14px; box-shadow: 0 4px 0 #8c221a; }
.aww-pay-note { font-family: var(--font-label); font-size: 0.68em; color: var(--patina); text-align: center; margin-top: 12px; }
.aww-pay-message { font-family: var(--font-label); font-size: 0.75em; color: var(--comic-red-text); text-align: center; margin-top: 10px; }

/* ---------- certificate / order status ---------- */
.aww-cert { max-width: 520px; border: 2px solid var(--brass); border-radius: 6px; padding: 28px 30px; background: linear-gradient(160deg, #2a1e15, var(--room-2) 60%); }
.aww-cert.centered { text-align: center; }
.aww-cert .seal { font-family: var(--font-label); font-size: 0.7em; letter-spacing: 2px; color: var(--patina); text-transform: uppercase; margin-bottom: 10px; text-align: center; }
.aww-cert h3 { font-family: var(--font-display); font-size: 1.4em; color: var(--brass-bright); margin: 0 0 6px; text-wrap: balance; text-align: center; }
.aww-cert .no { font-family: var(--font-label); font-size: 0.72em; color: var(--paper-dim); opacity: 0.7; margin-top: 4px; text-align: center; }
.aww-cert .item { font-family: var(--font-display); font-style: italic; color: var(--cream-text); margin: 14px 0; font-size: 1.05em; text-align: center; }
.aww-cert .next { margin-top: 18px; padding-top: 16px; border-top: 1px dotted rgba(180,138,74,0.3); font-size: 0.85em; color: var(--paper-dim); line-height: 1.6; text-align: center; }

.aww-tracker { display: flex; justify-content: space-between; margin: 24px 0 26px; position: relative; }
.aww-tracker::before { content: ""; position: absolute; top: 9px; left: 20px; right: 20px; height: 2px; background: rgba(180,138,74,0.25); }
.aww-tracker .step { flex: 1; text-align: center; position: relative; z-index: 1; }
.aww-tracker .step .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--room-2); border: 2px solid var(--brass); margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 0.7em; }
.aww-tracker .step.done .dot { background: var(--brass); color: var(--room); }
.aww-tracker .step .lbl { font-family: var(--font-label); font-size: 0.66em; text-transform: uppercase; letter-spacing: 0.5px; color: var(--paper-dim); }
.aww-tracker .step.done .lbl { color: var(--brass-bright); }

.aww-od-items { border-top: 1px dotted rgba(180,138,74,0.3); border-bottom: 1px dotted rgba(180,138,74,0.3); padding: 16px 0; margin-bottom: 16px; }
.aww-od-item-row { display: flex; justify-content: space-between; font-family: var(--font-label); font-size: 0.85em; padding: 5px 0; }
.aww-od-total { display: flex; justify-content: space-between; font-family: var(--font-label); font-weight: bold; color: var(--comic-red-text); margin-bottom: 20px; }
.aww-od-block { margin-bottom: 16px; }
.aww-od-block .lbl { font-family: var(--font-label); font-size: 0.66em; letter-spacing: 1px; text-transform: uppercase; color: var(--patina); margin-bottom: 4px; }
.aww-od-block .val { font-size: 0.9em; color: var(--paper-dim); line-height: 1.5; }

/* ---------- empty / status states ---------- */
.aww-empty { text-align: center; padding: 40px 20px; color: var(--paper-dim); }

/* ==================================================================
   CALM REGISTER -- owner's Store & Listings workbench (fulfillment
   queue, sold archive). Same tokens, flatter surfaces, no glass/glow.
   ================================================================== */
.aww-calm { background: #15100c; color: var(--cream-text); font-family: var(--font-body); padding: 24px 0 80px; }
.aww-calm .aww-page { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.aww-calm .register-note { font-family: var(--font-label); font-size: 0.72em; letter-spacing: 1px; color: var(--patina); text-transform: uppercase; margin: 0 0 4px; }
.aww-calm h1 { font-family: var(--font-body); font-weight: 700; font-size: 1.35em; color: var(--cream-text); margin: 0 0 6px; }
.aww-calm .aww-lede { color: var(--paper-dim); opacity: 0.85; max-width: 76ch; line-height: 1.55; font-size: 0.92em; margin: 0 0 26px; }
.aww-calm h2.aww-section-title { font-family: var(--font-body); font-weight: 700; font-size: 1em; color: var(--brass-bright); margin: 30px 0 4px; }

.ship-row { display: grid; grid-template-columns: 90px 1.4fr 1fr auto auto; gap: 14px; align-items: center; background: #1e1611; border: 1px solid #3a2c1e; border-radius: 4px; padding: 12px 14px; margin-bottom: 8px; }
@media (max-width: 760px) { .ship-row { grid-template-columns: 1fr; } }
.ship-row .oid { font-family: var(--font-label); font-size: 0.78em; color: var(--paper-dim); opacity: 0.75; }
.ship-row .oid .date { display: block; opacity: 0.7; margin-top: 2px; }
.pull-list { display: flex; flex-direction: column; gap: 6px; }
.pull-item { display: flex; align-items: center; gap: 8px; }
.pull-item .thumb { width: 30px; height: 30px; flex: none; background: var(--paper-dim); border-radius: 2px; overflow: hidden; }
.pull-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.pull-item .t { font-size: 0.86em; }
.pull-item .g { font-family: var(--font-label); font-size: 0.72em; color: var(--brass-bright); margin-left: 6px; }
.aww-buyer { font-size: 0.86em; color: var(--paper-dim); }
.aww-buyer .lbl { display: block; font-family: var(--font-label); font-size: 0.68em; text-transform: uppercase; color: var(--patina); margin-bottom: 2px; }
.aww-amt { font-family: var(--font-label); font-weight: bold; color: var(--brass-bright); }
.ship-btn { font-family: var(--font-body); font-weight: 600; font-size: 0.85em; background: var(--comic-red-btn); color: var(--cream-text); border: none; padding: 9px 14px; border-radius: 4px; white-space: nowrap; cursor: pointer; }
.aww-tracking-input { flex: 1; min-width: 140px; background: var(--room); border: 1px solid #3a2c1e; color: var(--cream-text); padding: 9px 10px; border-radius: 4px; font-family: var(--font-body); font-size: 0.88em; }
.aww-mark-shipped { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

.archive-row { display: grid; grid-template-columns: 90px 1.4fr 1fr auto; gap: 14px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #2a2018; font-size: 0.88em; }
.archive-row .date { font-family: var(--font-label); font-size: 0.78em; color: var(--paper-dim); opacity: 0.7; }
.archive-row .buyer2 { color: var(--paper-dim); }
.archive-row .amt2 { font-family: var(--font-label); color: var(--patina); text-align: right; }