/* shop.css - the CSEN shop surface (docs/shop.md). Loaded AFTER csen.css +
   style.css via base.html's head block. Palette = csen.css tokens only; no
   color literals here. Shape: a pricing page - one block per tier (perks
   listed once, terms as selectable tiles, one action), a compact extras
   grid, a donation strip. Gifting = one Gift button per product that opens
   the shared form in a <dialog> (or the /shop/gift/<sku> page without JS);
   no inline fields (operator 2026-09-06). */

/* every page that loads shop.css uses the wide measure (storefront grids,
   admin tables) - csen.css main defaults to --w-page */
main { max-width: var(--w-wide); }
.shop { max-width: var(--w-wide); margin: 0 auto; }

/* hero */
.shop-hero { padding: var(--s5) 0 var(--s4); }
.shop-hero h1 { font-size: var(--text-2xl); color: var(--gold); margin: var(--s1) 0 var(--s2); }
.shop-hero .lede { max-width: var(--w-text); color: var(--bone); margin: 0 0 var(--s3); }
.shop-meta { color: var(--ash); font-size: var(--text-sm); margin: 0; }
.shop-meta a { margin-right: var(--s3); }
.shop-hero .flash, .shop-hero .flash-ok, .shop-hero .warn { max-width: var(--w-text); }

/* tier block: info | purchase */
.tier { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6);
        background: var(--box); border: 1px solid var(--line); border-radius: var(--r);
        padding: var(--s6); margin: var(--s5) 0; }
.tier h2 { margin: 0 0 var(--s2); font-size: var(--text-xl); color: var(--bone); }
.tier h2 .badge { vertical-align: middle; font-size: var(--text-xs);
                  text-transform: uppercase; letter-spacing: .08em;
                  border-color: var(--gold-dim); color: var(--gold); margin-left: var(--s2); }
.tier-blurb { color: var(--ash); margin: 0 0 var(--s4); }
.perks { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.perks li { position: relative; padding: var(--s2) 0 var(--s2) 1.8rem;
            border-top: 1px solid var(--ash-line); }
.perks li:first-child { border-top: 0; }
.perks li::before { content: "\2713"; position: absolute; left: .2rem; top: var(--s2);
                    color: var(--gold); font-weight: 700; }
.fine { color: var(--ash); font-size: var(--text-xs); margin: var(--s3) 0 0; }

/* term tiles (radio cards) */
.terms { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin: 0 0 var(--s4); }
.term { position: relative; display: block; cursor: pointer;
        background: var(--box-2); border: 1px solid var(--line); border-radius: var(--r-sm);
        padding: var(--s3) var(--s4); }
.term input { position: absolute; opacity: 0; width: 0; height: 0; }
.term:hover { border-color: var(--gold-dim); }
.term:has(input:checked) { border-color: var(--gold); background: var(--gold-wash); }
.term:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.term-name { display: block; color: var(--ash); font-size: var(--text-xs);
             text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.term-price { display: block; font-size: var(--text-lg); font-weight: 700;
              font-variant-numeric: tabular-nums; margin: var(--s1) 0 0; }
.term-price small { font-size: var(--text-sm); font-weight: 400; color: var(--ash); }
.term-sub { display: block; color: var(--ash); font-size: var(--text-xs); margin-top: var(--s1); }
.term-badge { position: absolute; top: -0.65em; right: var(--s3);
              background: var(--gold); color: var(--gold-ink); border-radius: var(--r-sm);
              padding: 0 var(--s2); font-size: var(--text-xs); font-weight: 700;
              text-transform: uppercase; letter-spacing: .06em; }
.term-hidden { position: absolute; top: -0.65em; left: var(--s3);
               background: var(--box); border: 1px solid var(--line); color: var(--ash);
               border-radius: var(--r-sm); padding: 0 var(--s2); font-size: var(--text-xs); }

/* action */
/* text-align: the primary Gift is an <a> (dialog opener, /shop/gift/<sku> for
   no-JS) - anchors keep their text left unless told, buttons centre it
   (operator 2026-09-06 on mobile: "Gift" off-centre on skins + VIP tier) */
.buy { display: block; width: 100%; padding: var(--s3) var(--s4); font-size: 1rem; text-align: center; box-sizing: border-box; }
.tier-buy .steam-btn { display: block; text-align: center; }
.donate .donor-email { min-width: 14em; }

/* gifting: the secondary "Gift this to someone" link under a Buy button, and
   the shared form (dialog on the storefront, card on /shop/gift/<sku>) */
.gift-link { display: inline-block; margin-top: var(--s2); color: var(--gold); font-size: var(--text-sm); }
.tier-buy .gift-link { display: block; text-align: center; margin-top: var(--s3); }
.skin-body .gift-link { margin-top: var(--s1); }
.gift-dlg { background: var(--box); color: var(--bone); border: 1px solid var(--line);
            border-radius: var(--r); padding: var(--s5) var(--s6);
            width: min(440px, calc(100vw - 2 * var(--s4))); }
.gift-dlg::backdrop { background: rgba(0, 0, 0, .65); }
.gift-page { max-width: 480px; }
.gift-form .eyebrow { margin: 0; }
.gift-title { margin: var(--s1) 0 var(--s2); font-size: var(--text-lg); color: var(--bone); }
.gift-title small { color: var(--ash); font-size: var(--text-sm); font-weight: 400; margin-left: var(--s2); }
.gift-form label { display: block; margin-top: var(--s3); color: var(--ash); font-size: var(--text-sm); }
.gift-form label small { color: var(--ash); font-weight: 400; }
.gift-form label > input { display: block; width: 100%; margin-top: var(--s1); color: var(--bone); }
.gift-actions { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s4); }
.gift-actions .btn-primary { flex: 1; }
.gift-cancel { background: transparent; border-color: var(--line); color: var(--ash); }
.gift-form .fine { margin-top: var(--s3); }
.gift-inline { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s3); }
.gift-inline summary { cursor: pointer; color: var(--gold); font-size: var(--text-sm); }
.gift-inline summary:hover { text-decoration: underline; }

/* extras grid */
.extras { display: grid; gap: var(--s3);
          grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: var(--s3) 0 var(--s5); }
.extra { background: var(--box); border: 1px solid var(--line); border-radius: var(--r);
         padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.extra h3 { margin: 0; font-size: 1rem; }
.extra .price { font-weight: 700; font-variant-numeric: tabular-nums; }
.extra .price small { color: var(--ash); font-weight: 400; }
.extra p { margin: 0; color: var(--ash); font-size: var(--text-sm); flex: 1; }
.extra .perks { margin: 0; font-size: var(--text-sm); }
.extra .perks li { padding: var(--s1) 0 var(--s1) 1.5rem; }
.extra .perks li::before { top: var(--s1); }
.extra form { margin-top: var(--s2); }

/* donation strip */
.donate { display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: center;
          background: var(--box); border: 1px solid var(--line); border-radius: var(--r);
          padding: var(--s5) var(--s6); margin: var(--s5) 0; }
.donate h2 { margin: 0 0 var(--s1); font-size: var(--text-lg); }
.donate p { margin: 0; color: var(--ash); font-size: var(--text-sm); }
.donate form { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: flex-end; }
.chip { position: relative; cursor: pointer; background: var(--box-2); border: 1px solid var(--line);
        border-radius: var(--r-sm); padding: .35rem .8rem; font-variant-numeric: tabular-nums; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:hover { border-color: var(--gold-dim); }
.chip:has(input:checked) { border-color: var(--gold); background: var(--gold-wash); }
.donate input[type=text] { width: 6em; }

.shop .sortbar { margin: var(--s3) 0 0; align-items: center; font-size: var(--text-sm); }
.shop .sortbar .lbl { color: var(--ash); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; margin-right: var(--s1); }
.shop h2.section-title { margin: var(--s6) 0 0; font-size: var(--text-lg); color: var(--ash);
                         text-transform: uppercase; letter-spacing: .08em; font-size: var(--text-xs); }

@media (max-width: 760px) {
  .tier { grid-template-columns: 1fr; gap: var(--s5); padding: var(--s5); }
  .donate { grid-template-columns: 1fr; }
  .donate form { justify-content: flex-start; }
}

/* section headers ------------------------------------------------------------- */
.section-blurb { color: var(--ash); font-size: var(--text-sm); margin: var(--s1) 0 var(--s3); }

/* gallery (skins) - portrait art, name, price, one action -------------------------- */
.gallery { display: grid; gap: var(--s3);
           grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin: var(--s3) 0 var(--s5); }
.skin { background: var(--box); border: 1px solid var(--line); border-radius: var(--r);
        overflow: hidden; display: flex; flex-direction: column; }
.skin-art { position: relative; aspect-ratio: 3 / 4; background: var(--bg-deep);
            display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* absolutely positioned so an oversized upload can never stretch the tile
   (an in-flow img grows the aspect-ratio box; out of flow it just gets cropped) */
.skin-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery { align-items: start; }
/* phones: two tiles per row (one 358px-wide 3:4 tile per row made the KFEra store 16k px tall) */
@media (max-width: 480px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.noart { color: var(--ash); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; }
.owned { position: absolute; top: var(--s2); left: var(--s2); background: var(--box);
         border: 1px solid var(--line); color: var(--ash); border-radius: var(--r-sm);
         padding: 0 var(--s2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; }
.is-owned .skin-art img { filter: grayscale(1) brightness(.6); }
.skin-body { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.skin-body h3 { margin: 0; font-size: 1rem; }
.skin-body p { margin: 0; color: var(--ash); font-size: var(--text-sm); flex: 1; }
.skin-body .price { font-weight: 700; font-variant-numeric: tabular-nums; }
.skin-body .price small { color: var(--ash); font-weight: 400; }
.skin-body form { margin-top: auto; }
.skin-body .btn-primary { width: 100%; }

/* bundle picker: gallery tiles as checkboxes */
.pick { cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick .tick { position: absolute; right: var(--s2); top: var(--s2); width: 1.6rem; height: 1.6rem;
              border-radius: 50%; background: var(--gold); color: var(--gold-ink); font-weight: 700;
              display: none; align-items: center; justify-content: center; }
.pick:has(input:checked) { border-color: var(--gold); background: var(--gold-wash); }
.pick:has(input:checked) .tick { display: flex; }
.pick:has(input:disabled) { cursor: not-allowed; }
.pick:has(input:disabled):not(.is-owned) { opacity: .5; }
.picker .term-price { margin-top: var(--s4); font-size: var(--text-xl); }

/* bundles ------------------------------------------------------------------------ */
.bundles { display: grid; gap: var(--s3);
           grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin: var(--s3) 0 var(--s5); }
.bundle { background: var(--box); border: 1px solid var(--gold-dim); border-radius: var(--r);
          overflow: hidden; display: flex; flex-direction: column; }
.bundle-art { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; max-height: 220px; }
.bundle-body { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.bundle-body h3 { margin: 0; font-size: var(--text-lg); }
.bundle-body .price { font-weight: 700; font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.bundle-body .includes { color: var(--bone); margin: 0; }
.bundle-body p { margin: 0; color: var(--ash); font-size: var(--text-sm); }
.bundle-body .buy { margin-top: auto; text-align: center; }

/* admin product form --------------------------------------------------------------- */
.pform label { display: block; margin: var(--s3) 0; }
.pform label > input:not([type=checkbox]), .pform label > select, .pform label > textarea { display: block; width: 100%; margin-top: var(--s1); }
.pform small { display: block; color: var(--ash); font-size: var(--text-xs); margin-top: var(--s1); }
.pform .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.pform .pair { display: flex; gap: var(--s2); margin-top: var(--s1); }
.pform .check { display: flex; align-items: center; gap: var(--s2); }
@media (max-width: 760px) { .pform .row { grid-template-columns: 1fr; } }

/* admin cropper (product form): fixed-ratio frame, drag to pan, slider to zoom */
.crop { margin: var(--s3) 0; }
.crop-frame { position: relative; width: 100%; max-width: 360px; background: var(--bg-deep);
              border: 1px solid var(--gold); border-radius: var(--r-sm); overflow: hidden;
              touch-action: none; cursor: grab; user-select: none; }
.crop-frame img { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform;
                  pointer-events: none; max-width: none; }
.crop-controls { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s2); }
.crop-controls input[type=range] { width: 200px; }
.crop-status { color: var(--ash); font-size: var(--text-xs); }

/* category bar: sticky pills under the hero, smooth anchor scrolling ------------ */
html { scroll-behavior: smooth; }
.shop-cats { padding: var(--s2) 0; border-bottom: 1px solid var(--line); margin-bottom: var(--s3); }
.shop .section-title, .shop .tier, .shop .donate { scroll-margin-top: 4.5rem; }
/* admin page: section headings land below the sticky jump strip */
.card h2[id] { scroll-margin-top: 4.5rem; }
.to-top { position: fixed; right: var(--s4); bottom: var(--s4); background: var(--box); border: 1px solid var(--line);
          border-radius: var(--r-sm); padding: .3rem .7rem; font-size: var(--text-sm); color: var(--bone); }
.to-top:hover { border-color: var(--gold); text-decoration: none; }

/* admin catalog: toolbar rows + dense table ---------------------------------------- */
.catalog .toolbar { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center;
                    padding: var(--s3) 0; border-top: 1px solid var(--line); }
.catalog .toolbar .group { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.catalog .toolbar .lbl { color: var(--ash); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; }
.catalog .selbar { background: var(--box-2); border: 1px solid var(--line); border-radius: var(--r-sm);
                   padding: var(--s2) var(--s3); }
.catalog table { font-size: var(--text-sm); margin-top: var(--s2); }
.catalog th, .catalog td { padding: .25rem .45rem; }
.catalog td.sub { line-height: 1.2; }
.catalog td.sub small { display: block; color: var(--ash); font-size: var(--text-xs); }
.catalog input.compact { padding: .1rem .35rem; }
.catalog th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.catalog th.sortable:hover { color: var(--gold); }
.catalog th.sortable::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: .3em; vertical-align: middle;
                              border-left: .3em solid transparent; border-right: .3em solid transparent; opacity: .35;
                              border-bottom: .35em solid currentColor; }
.catalog th.sortable.asc::after { opacity: 1; }
.catalog th.sortable.desc::after { opacity: 1; border-bottom: 0; border-top: .35em solid currentColor; }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--line); vertical-align: middle; }
.dot.on { background: var(--ok); }
.catalog .allrows summary { color: var(--ash); font-size: var(--text-xs); cursor: pointer; }