/* ==================================================================
   ecom.css: components for the e-commerce section of billgosling.ai.
   Loads AFTER heritage-shell.css. Keep every rule scoped to a class so
   the heritage cascade is untouched. Tokens come from heritage-shell.
   ================================================================== */

/* ---------- nav: dropdown groups in the heritage bar ---------- */
.nav nav{align-items:center;}
.nav nav .grp{position:relative;display:flex;align-items:center;height:64px;}
.nav nav .grp>a{display:inline-flex;align-items:center;gap:6px;}
.nav nav .grp>a::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.7;}
.nav nav .dd{display:none;position:absolute;top:64px;left:-16px;min-width:280px;z-index:60;
  background:var(--ink);border:1px solid var(--line-dark);border-top:2px solid var(--gold);border-radius:0 0 12px 12px;
  padding:8px 0;box-shadow:0 30px 50px -30px rgba(12,11,9,.6);}
.nav nav .grp:hover .dd,.nav nav .grp:focus-within .dd{display:block;}
.nav nav .dd a{display:block;padding:10px 18px;border:0;font-size:12px;letter-spacing:.03em;text-transform:none;color:var(--on-dark-dim);}
.nav nav .dd a:hover{color:var(--gold);background:var(--ink-2);border:0;}
.nav nav .dd a.cur{color:var(--gold);}
.nav nav>a.cur{border-color:var(--ink);}

/* ---------- nav density: seven items need a tighter bar and an earlier hamburger ---------- */
.nav nav{gap:20px;font-size:12px;}
.nav nav a,.brand b,.nav .btn{white-space:nowrap;}
.nav .in{gap:16px;}
@media(max-width:1120px){
  .nav nav{display:none;}
  .nav .btn{margin-left:auto;min-height:44px;}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:44px;height:44px;margin-left:12px;padding:0;background:none;color:var(--ink);
    border:1.5px solid var(--ink);border-radius:10px;cursor:pointer;}
  .menu-btn .bars{display:flex;flex-direction:column;gap:5px;width:18px;}
  .menu-btn .bars i{display:block;height:2px;background:var(--ink);border-radius:1px;transition:transform .18s ease,opacity .18s ease;}
  .nav.open .menu-btn .bars i:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav.open .menu-btn .bars i:nth-child(2){opacity:0;}
  .nav.open .menu-btn .bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .nav.open nav{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;
    background:var(--gold);border-bottom:1.5px solid var(--ink);box-shadow:0 30px 50px -30px rgba(12,11,9,.45);
    max-height:calc(100vh - 64px);overflow-y:auto;}
  .nav.open nav>a,.nav.open nav .grp>a{display:block;padding:15px clamp(20px,5vw,48px);font-size:13px;border-bottom:0;border-top:1px solid rgba(12,11,9,.18);}
  .nav.open nav>a:first-child{border-top:0;}
  .nav.open nav>a:hover,.nav.open nav .grp>a:hover{background:var(--lemon);}
  .nav.open nav .m-cta{display:block;font-weight:700;}
  .nav nav .grp{display:block;height:auto;}
  .nav nav .grp>a::after{display:none;}
  .nav.open nav .dd{display:block;position:static;min-width:0;background:none;border:0;border-radius:0;box-shadow:none;padding:0 0 6px 0;}
  .nav.open nav .dd a{padding:11px clamp(20px,5vw,48px) 11px calc(clamp(20px,5vw,48px) + 18px);font-size:12.5px;color:#3d3108;border-top:1px solid rgba(12,11,9,.1);}
  .nav.open nav .dd a:hover{background:var(--lemon);color:var(--ink);}
}

/* ---------- hero variants ---------- */
.hero-doc{background:var(--gold);color:var(--on-gold);padding:clamp(48px,7vw,90px) 0 clamp(48px,6vw,72px);position:relative;overflow:hidden;}
.hero-doc .eyebrow{color:var(--ink);} .hero-doc .eyebrow .sq{background:var(--orange);}
.hero-doc h1{font-family:'Special Elite',ui-monospace,monospace;font-weight:400;letter-spacing:0;line-height:1.1;
  font-size:clamp(34px,5.2vw,66px);margin:18px 0 20px;max-width:22ch;}
.hero-doc h1 em{font-style:italic;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:.1em;text-underline-offset:.08em;}
.hero-doc .sub{font-family:var(--sans);font-size:clamp(15px,1.3vw,17.5px);line-height:1.65;max-width:62ch;color:#151515;}
.hero-doc .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}
.hero-doc .meta{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6b5310;margin-top:18px;}
.hero2 .hstack .scifi img{height:auto;}
.hero2 h1{font-size:clamp(34px,4.5vw,60px);}
@media(min-width:901px){.hero2 .grid2{grid-template-columns:.95fr 1.05fr;}}
/* long emphasised phrases must wrap: swap the absolute bar for a per-line underline at every width */
.hero2 h1 em{white-space:normal;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:.1em;text-underline-offset:.08em;}
.hero2 h1 em::after{display:none;}
.hero2 .hvis{min-width:0;}
.hero2 .hstack{min-width:0;}

/* ---------- checklists ---------- */
.checks{list-style:none;display:flex;flex-direction:column;gap:14px;margin:26px 0 30px;padding:0;}
.checks li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;}
.checks li::before{content:"\2713";grid-row:1 / span 2;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;
  background:var(--gold);color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:700;margin-top:1px;}
.checks li b{grid-column:2;display:block;font-family:'Special Elite',ui-monospace,monospace;font-weight:400;font-size:18px;line-height:1.25;color:var(--ink);}
.checks li span{grid-column:2;display:block;font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--on-paper-dim);margin-top:3px;}
.sec-dark .checks li b{color:var(--on-dark);}
.sec-dark .checks li span{color:var(--on-dark-dim);}
.sec-dark .checks li::before{box-shadow:0 0 0 3px rgba(255,218,57,.14);}
.sec-gold .checks li::before{background:var(--ink);color:var(--gold);}
.sec-gold .checks li span{color:#2c2306;}
.secbody .cta{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- two-column section split with a painting plate ---------- */
.secfig .platewrap{min-width:0;}
.secfig .platewrap .platecap{margin-top:14px;}
.sec-dark .platecap{color:var(--on-dark-dim);}
.sec-gold .platecap{color:#6b551a;}
@media(max-width:860px){.secsplit .secfig .platewrap{max-width:460px;margin:0 auto;}}

/* ---------- approach trio and other .pcard uses on dark / gold ---------- */
.prob.four{grid-template-columns:repeat(4,1fr);}
.prob.two{grid-template-columns:repeat(2,1fr);}
.sec-dark .pcard{border-top-color:rgba(255,255,255,.18);}
.sec-dark .pcard .n{color:var(--gold);}
.sec-dark .pcard h3{color:var(--on-dark);}
.sec-dark .pcard p{color:var(--on-dark-dim);}
.sec-gold .pcard{border-top-color:rgba(12,11,9,.45);}
.sec-gold .pcard .n{color:#7a5f12;}
.sec-gold .pcard p{color:#2c2306;}
.pcard h3{font-family:'Special Elite',ui-monospace,monospace;font-weight:400;letter-spacing:0;}
@media(max-width:1000px){.prob.four{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.prob.four,.prob.two{grid-template-columns:1fr;}}

/* ---------- numbered service list (hub pages) ---------- */
.svcs{margin-top:48px;border-top:1px solid var(--ink);}
.svc{display:grid;grid-template-columns:96px 1fr;gap:20px 28px;padding:34px 0;border-bottom:1px solid var(--line-paper);}
.svc .num{font-family:'Special Elite',ui-monospace,monospace;font-size:clamp(30px,3.6vw,44px);line-height:1;color:var(--amber);}
.svc h3{font-family:'Special Elite',ui-monospace,monospace;font-weight:400;letter-spacing:0;font-size:clamp(22px,2.4vw,28px);line-height:1.15;margin:0 0 6px;}
.svc h3 a{border-bottom:1.5px solid transparent;} .svc h3 a:hover{border-color:var(--ink);}
.svc .tag{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:12px;}
.svc p{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--on-paper-dim);max-width:66ch;}
.svc .more{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);border-bottom:1.5px solid var(--ink);}
.svc .more:hover{color:var(--amber);border-color:var(--amber);}
.sec-dark .svcs{border-top-color:rgba(255,255,255,.3);}
.sec-dark .svc{border-bottom-color:var(--line-dark);}
.sec-dark .svc .num,.sec-dark .svc .tag{color:var(--gold);}
.sec-dark .svc h3{color:var(--on-dark);} .sec-dark .svc h3 a:hover{border-color:var(--gold);}
.sec-dark .svc p{color:var(--on-dark-dim);}
.sec-dark .svc .more{color:var(--gold);border-color:var(--gold);}
@media(max-width:600px){.svc{grid-template-columns:1fr;gap:8px;} .svc .num{font-size:28px;}}

/* ---------- feature grid (2 or 3 columns of short items) ---------- */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 40px;margin-top:52px;}
.fgrid.two{grid-template-columns:repeat(2,1fr);}
.fgrid.four{grid-template-columns:repeat(4,1fr);}
.fitem{border-top:1px solid var(--ink);padding-top:20px;}
.fitem .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);}
.fitem h3{font-family:'Special Elite',ui-monospace,monospace;font-weight:400;letter-spacing:0;font-size:20px;line-height:1.2;margin:12px 0 10px;}
.fitem p{font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--on-paper-dim);}
.sec-dark .fitem{border-top-color:rgba(255,255,255,.18);}
.sec-dark .fitem .k{color:var(--gold);}
.sec-dark .fitem h3{color:var(--on-dark);}
.sec-dark .fitem p{color:var(--on-dark-dim);}
.sec-gold .fitem{border-top-color:rgba(12,11,9,.45);}
.sec-gold .fitem .k{color:#7a5f12;}
.sec-gold .fitem p{color:#2c2306;}
@media(max-width:1000px){.fgrid,.fgrid.four{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.fgrid,.fgrid.two,.fgrid.four{grid-template-columns:1fr;gap:26px;}}

/* ---------- promise trio (reuses heritage .comp .cc) ---------- */
.comp.three{grid-template-columns:repeat(3,1fr);}
.sec-paper .cc{border-top-color:var(--ink);}
.sec-paper .cc .h{color:var(--ink);}
.sec-paper .cc .h .tick{color:var(--amber);}
.sec-paper .cc p{color:var(--on-paper-dim);}
.sec-gold .cc{border-top-color:rgba(12,11,9,.45);}
.sec-gold .cc .h{color:var(--ink);} .sec-gold .cc .h .tick{color:var(--ink);}
.sec-gold .cc p{color:#2c2306;}
@media(max-width:820px){.comp.three{grid-template-columns:1fr;}}

/* ---------- stats row ---------- */
.qc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 34px;margin-top:56px;}
.qc-stats.three{grid-template-columns:repeat(3,1fr);}
.qc-stats .stat{background:none;border:0;box-shadow:none;border-radius:0;padding:22px 0 0;border-top:1px solid var(--ink);}
.qc-stats .stat b{font-family:'Special Elite',ui-monospace,monospace;font-weight:400;letter-spacing:0;}
.sec-dark .qc-stats .stat{border-top-color:rgba(255,255,255,.3);}
.sec-dark .qc-stats .stat b{color:var(--on-dark);}
.sec-dark .qc-stats .stat span{color:var(--on-dark-dim);}
@media(max-width:820px){.qc-stats,.qc-stats.three{grid-template-columns:1fr 1fr;}}
@media(max-width:430px){.qc-stats,.qc-stats.three{grid-template-columns:1fr;gap:20px;}}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:1fr 1fr;gap:40px 46px;margin-top:52px;}
.member{border-top:1px solid var(--ink);padding-top:24px;display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;}
.member .mono{width:64px;height:64px;border-radius:14px 14px 14px 26px;background:var(--ink);color:var(--gold);display:grid;place-items:center;
  font-family:'Special Elite',ui-monospace,monospace;font-size:22px;}
.member h3{font-family:'Special Elite',ui-monospace,monospace;font-weight:400;letter-spacing:0;font-size:24px;line-height:1.15;margin:0 0 4px;}
.member .role{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:12px;}
.member p{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--on-paper-dim);}
.member .facts{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:12px;font-family:var(--mono);font-size:11.5px;color:#6b551a;}
@media(max-width:820px){.team{grid-template-columns:1fr;}}
@media(max-width:430px){.member{grid-template-columns:1fr;}}

/* ---------- article / long-form document ---------- */
.article{max-width:74ch;margin:0 auto;}
.article .lede{font-family:var(--sans);font-size:clamp(16px,1.4vw,18.5px);line-height:1.65;color:var(--on-paper);margin-bottom:30px;}
.article h2{font-family:'Special Elite',ui-monospace,monospace;font-weight:400;letter-spacing:0;font-size:clamp(24px,2.6vw,32px);line-height:1.2;margin:48px 0 16px;}
.article h3{font-family:'Special Elite',ui-monospace,monospace;font-weight:400;letter-spacing:0;font-size:clamp(19px,2vw,23px);line-height:1.25;margin:32px 0 12px;}
.article p{font-family:var(--sans);font-size:15.5px;line-height:1.7;color:var(--on-paper-dim);margin-bottom:16px;}
.article p b,.article li b{color:var(--ink);}
.article ul,.article ol{margin:0 0 18px 22px;font-family:var(--sans);font-size:15px;line-height:1.65;color:var(--on-paper-dim);}
.article li{margin-bottom:6px;}
.article ul li::marker{color:var(--orange);}
.article blockquote{border-left:3px solid var(--orange);padding:6px 0 6px 20px;margin:26px 0;font-family:'Special Elite',ui-monospace,monospace;font-size:19px;line-height:1.4;color:var(--ink);}
.article .rule{height:1px;background:var(--ink);margin:40px 0;}
.article .backlink{display:inline-block;margin-top:34px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1.5px solid var(--ink);}
.article .fine{font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--on-paper-dim);}
.doc h2{font-size:clamp(21px,2.2vw,26px);margin-top:40px;}
.doc h3{font-size:18px;}
.doc h2 .no,.doc h3 .no{color:var(--amber);margin-right:10px;}

/* ---------- blog index ---------- */
.posts{margin-top:44px;border-top:1px solid var(--ink);}
.post{display:grid;grid-template-columns:180px 1fr;gap:20px 34px;padding:34px 0;border-bottom:1px solid var(--line-paper);}
.post .date{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);padding-top:8px;}
.post h3{font-family:'Special Elite',ui-monospace,monospace;font-weight:400;letter-spacing:0;font-size:clamp(22px,2.4vw,28px);line-height:1.2;margin:0 0 10px;}
.post h3 a{border-bottom:1.5px solid transparent;} .post h3 a:hover{border-color:var(--ink);}
.post p{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--on-paper-dim);max-width:70ch;}
.post .more{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1.5px solid var(--ink);}
@media(max-width:600px){.post{grid-template-columns:1fr;gap:6px;}}

/* ---------- contact form and FAQ ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,80px);align-items:start;margin-top:24px;}
.form{display:grid;gap:22px;}
.form label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-paper-dim);margin-bottom:8px;}
.form input,.form textarea,.form select{width:100%;border:0;border-bottom:1.5px solid var(--ink);background:transparent;padding:10px 0;
  font-family:var(--sans);font-size:16px;color:var(--ink);border-radius:0;outline:none;}
.form input:focus,.form textarea:focus,.form select:focus{border-bottom-color:var(--orange);}
.form textarea{min-height:120px;resize:vertical;}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.form .note{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--on-paper-dim);}
.form .ok{display:none;font-family:var(--mono);font-size:13px;color:var(--amber);}
.form.sent .ok{display:block;}
.side h3{font-family:'Special Elite',ui-monospace,monospace;font-weight:400;letter-spacing:0;font-size:22px;margin:0 0 12px;}
.side p{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--on-paper-dim);margin-bottom:14px;}
.side .mail{font-family:var(--mono);font-size:14px;} .side .mail a{border-bottom:1.5px solid var(--ink);}
.faq{margin-top:44px;border-top:1px solid var(--ink);}
.faq details{border-bottom:1px solid var(--line-paper);}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;
  font-family:'Special Elite',ui-monospace,monospace;font-size:20px;line-height:1.25;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--mono);font-size:22px;color:var(--amber);flex:0 0 auto;transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{font-family:var(--sans);font-size:15px;line-height:1.65;color:var(--on-paper-dim);padding:0 40px 24px 0;max-width:70ch;}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;} .form .row{grid-template-columns:1fr;}}

/* ---------- misc ---------- */
.nextlink{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--ink);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;}
.nextlink a{border-bottom:1.5px solid var(--ink);}
.sec-dark .nextlink{border-top-color:rgba(255,255,255,.3);} .sec-dark .nextlink a{border-color:var(--gold);color:var(--gold);}
.crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#6b5310;margin-bottom:6px;}
.crumbs a{border-bottom:1px solid rgba(12,11,9,.35);}
.cta-sec .artplate-wide{max-width:520px;margin:0 auto 34px;}
.cta-sec .artplate-wide .apframe{aspect-ratio:860/614;}
.cta-sec .artplate-wide .apframe img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;}
.cta-sec .artplate-tall{max-width:330px;margin:0 auto 34px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:start;margin-top:48px;}
.two-col .txt p{font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--on-paper-dim);margin-bottom:18px;}
.two-col .txt p b{color:var(--ink);}
.sec-dark .two-col .txt p{color:var(--on-dark-dim);} .sec-dark .two-col .txt p b{color:var(--on-dark);}
@media(max-width:820px){.two-col{grid-template-columns:1fr;}}
.foot .cols{gap:44px;}

/* ==================================================================
   PRODUCT LISTING PLATES: e-commerce visuals inside the heritage frame.
   The chrome stays gold, black and typewriter; the product photos sit in
   full colour on white marketplace cards. Overlays reuse the shell's
   .pmeta, .cnr, .scanner and .bbox components.
   ================================================================== */
.shop{position:relative;border-radius:16px 16px 16px 44px;overflow:hidden;isolation:isolate;width:100%;
  background:#0f0d0a;border:1px solid rgba(255,218,57,.5);box-shadow:0 34px 80px -44px rgba(0,0,0,.65);
  padding:40px 14px 14px;--cnr-size:22px;--cnr-inset:8px;--scanner-z:6;}
.shop .pmeta{top:12px;left:16px;right:16px;z-index:3;}
.shop .scanner{opacity:.55;}
.listing{position:relative;background:#fff;border-radius:10px 10px 10px 28px;padding:14px;color:var(--ink);z-index:2;}
.listing .lh{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-paper-dim);padding-bottom:10px;border-bottom:1px solid var(--line-paper);margin-bottom:12px;}
.listing .lh b{color:var(--ink);font-weight:700;}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.lgrid.two{grid-template-columns:repeat(2,1fr);}
.lgrid.one{grid-template-columns:1fr;}
.lgrid.four{grid-template-columns:repeat(4,1fr);}
.lcard{position:relative;border:1px solid var(--line-paper);border-radius:8px;padding:8px;background:#fff;display:flex;flex-direction:column;gap:6px;min-width:0;}
.lcard.flag{border-color:var(--orange);box-shadow:0 0 0 2px rgba(255,153,2,.18);}
.lcard.pick{border-color:var(--ink);box-shadow:0 0 0 2px rgba(255,218,57,.7);}
.ph{aspect-ratio:1/1;background:#f4f4f4;border-radius:6px;overflow:hidden;display:grid;place-items:center;position:relative;}
.ph img{width:100%;height:100%;object-fit:cover;display:block;}
.ph.contain img{object-fit:contain;padding:6%;background:#fff;}
.lcard b{font-family:var(--sans);font-size:11px;line-height:1.3;color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lcard .pr{font-family:var(--mono);font-size:10.5px;color:var(--on-paper-dim);display:flex;justify-content:space-between;gap:6px;}
.lcard .pr s{opacity:.6;}
.st{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--mono);font-size:8.5px;font-weight:700;padding:3px 7px;border-radius:100px;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}
.st.ok{background:var(--gold);color:var(--ink);}
.st.hold{background:var(--orange);color:#fff;}
.st.fix{background:var(--ink);color:var(--gold);}
.stamp{position:absolute;right:-4px;bottom:-4px;z-index:7;width:86px;height:86px;border-radius:50%;background:var(--gold);border:2px solid var(--ink);
  display:grid;place-items:center;text-align:center;font-family:var(--mono);font-size:8.5px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);padding:10px;transform:rotate(-8deg);box-shadow:0 12px 26px -12px rgba(0,0,0,.55);}
.stamp .tick{display:block;font-size:16px;line-height:1;margin-bottom:3px;}
.ltable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:10.5px;color:var(--ink);}
.ltable th{text-align:left;font-weight:400;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-paper-dim);padding:0 8px 8px;}
.ltable td{padding:7px 8px;border-top:1px solid var(--line-paper);vertical-align:middle;white-space:nowrap;}
.ltable td.t{white-space:normal;font-family:var(--sans);font-weight:700;font-size:11px;}
.ltable .thumb{width:34px;height:34px;border-radius:5px;object-fit:cover;display:block;background:#f4f4f4;}
.ltable .miss{color:var(--amber);font-weight:700;}
.ltable .okc{color:#1f7a3a;font-weight:700;}
.ltable tr.hl td{background:#fff8dc;}
.lfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font-family:var(--mono);font-size:10px;color:var(--on-paper-dim);}
.lfoot .btnmini{background:var(--ink);color:var(--gold);padding:6px 11px;border-radius:100px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:9.5px;}
.lfoot .btnmini.line{background:none;color:var(--ink);border:1.5px solid var(--ink);}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ba .ph{aspect-ratio:4/5;}
.ba .tagba{position:absolute;top:8px;left:8px;z-index:2;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:100px;background:rgba(12,11,9,.8);color:#fff;}
.ba .after .tagba{background:var(--gold);color:var(--ink);}
.ba .before img{filter:grayscale(.85) contrast(.9) brightness(.92);}
.ba .after .ph{box-shadow:inset 0 0 0 2px var(--gold);}
.shopcap{font-family:var(--mono);font-size:11px;letter-spacing:.03em;margin-top:12px;color:var(--on-paper-dim);}
.sec-dark .shopcap{color:var(--on-dark-dim);} .sec-gold .shopcap,.hero2 .shopcap{color:#6b551a;}
/* hero variant: a .scifi frame whose content is a listing instead of a painting */
.scifi.shopframe{padding:40px 16px 46px;background:#0f0d0a;}
.scifi.shopframe .holo,.scifi.shopframe .scanlines,.scifi.shopframe .retic{display:none;}
.scifi.shopframe .listing{border-radius:10px 10px 10px 28px;}
.scifi.shopframe .bbox{z-index:7;}
.scifi.shopframe .ticker{z-index:8;}
/* product strip for the closing CTA and hubs */
.prodstrip{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 auto 34px;max-width:760px;}
.prodstrip .tile{width:118px;background:#fff;border:1.5px solid var(--ink);border-radius:10px 10px 10px 24px;padding:8px;position:relative;box-shadow:0 14px 30px -22px rgba(0,0,0,.45);}
.prodstrip .tile .ph{border-radius:6px;}
.prodstrip .tile span{font-family:var(--mono);font-size:9.5px;display:block;margin-top:7px;color:var(--ink);text-align:center;letter-spacing:.03em;}
.prodstrip .tile .st{top:12px;left:12px;}
.cta-sec .prodstrip .tile{border-color:var(--ink);}
@media(max-width:600px){
  .lgrid,.lgrid.four{grid-template-columns:repeat(2,1fr);}
  .ltable td:nth-child(n+5),.ltable th:nth-child(n+5){display:none;}
  .prodstrip .tile{width:calc(33.33% - 8px);}
  .stamp{width:72px;height:72px;font-size:7.5px;}
}
/* hero listing: shorter cards so the hero does not tower over the copy */
.scifi.shopframe .lgrid .ph{aspect-ratio:5/4;}
.scifi.shopframe .lcard b{font-size:10.5px;}
/* product photos are never duotoned: undo the shell's painting filter inside listing frames */
.scifi.shopframe img,.shop img,.prodstrip img{filter:none !important;}
/* before/after: the "before" side keeps its grey filter despite the product-photo filter reset above */
.ba .before img{filter:grayscale(.85) contrast(.9) brightness(.92) !important;}
/* wide listing tables scroll inside their plate instead of widening the section grid */
.secsplit>.secbody,.secsplit>.secfig,.secsplit>.secfig>.shop{min-width:0;}
.listing{overflow-x:auto;}
.ltable{min-width:0;}
@media(max-width:600px){.ltable td,.ltable th{white-space:normal;}}