/* Approved v7/v4 artwork is decorative. This sheet only loads on six pages.
   No shared site.css/commerce.css rewrite, no functional JS changes. */
main[data-commerce-view]{--cm-gold:#d5bf88;--cm-line:rgba(211,184,116,.40);--cm-ink:#f0ecdf;position:relative;isolation:isolate;min-height:65vh;padding-top:.1px;}
main[data-commerce-view="hub"]{--cm-veil-base:.60;--cm-veil-alpha:calc(var(--cm-veil-base)*1.15);--cm-veil-color:7,27,18;}
main[data-commerce-view="hub"]::before{content:"";position:absolute;z-index:-2;inset:0;background:#08180f url('/assets/approved-visuals/market-town.webp') center 40%/cover no-repeat;pointer-events:none;}
main[data-commerce-view="hub"]::after{content:"";position:absolute;z-index:-1;inset:0;background:rgba(var(--cm-veil-color),var(--cm-veil-alpha));pointer-events:none;}
main[data-commerce-view="merchants"]{background:radial-gradient(ellipse at 35% 28%,#1a30221f,transparent 70%);}
main[data-commerce-view] .commerceCrumb{max-width:1280px;margin:1.5rem auto 0;font-size:.9rem;}
main[data-commerce-view] .commercePage{max-width:1280px;margin:1.5rem auto 0;padding-bottom:4rem;}
main[data-commerce-view] .cmLabel{display:block;font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.2em;line-height:1.8;color:var(--cm-gold);}
main[data-commerce-view] .commerceCard{position:relative;isolation:isolate;padding:0;gap:0;overflow:hidden;border:1px solid var(--cm-line);border-radius:5px;color:var(--cm-ink);transition:border-color .2s,box-shadow .2s;}
main[data-commerce-view] .commerceCard:hover{border-color:#e5d0a0;box-shadow:0 10px 40px #0003;}
main[data-commerce-view] a:focus-visible{outline:2px solid #eed6a3;outline-offset:5px;}
main[data-commerce-view] svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.1;flex-shrink:0;}
main[data-commerce-view] .cmHubHeader h1{font-size:clamp(3rem,6.5vw,6.25rem);line-height:1.14;font-weight:400;letter-spacing:.05em;margin:0 0 1.4rem;}
main[data-commerce-view] .cmHeaderRule{display:flex;align-items:center;margin-bottom:1.8rem;height:10px;}
main[data-commerce-view] .cmHeaderRule::before{content:"";width:72px;height:1px;background:var(--cm-gold);}
main[data-commerce-view] .cmHeaderRule i{width:8px;height:8px;background:var(--cm-gold);transform:rotate(45deg);margin-left:16px;}
main[data-commerce-view] .cmPortals{gap:1.25rem;margin:0;}
main[data-commerce-view] .cmPortal{min-height:470px;background:rgba(6,22,15,.35);}
main[data-commerce-view] .cmPortalIndex{position:absolute;left:2rem;top:1.4rem;font-family:"Bodoni Moda",Georgia,serif;font-size:1.8rem;font-style:italic;color:#ddcea2;z-index:2;}
main[data-commerce-view] .cmPortalArt{position:absolute;right:0;top:-.6rem;width:82%;height:90%;object-fit:contain;pointer-events:none;}
main[data-commerce-view] .cmPortal--players .cmPortalArt{width:76%;right:0;top:1.3rem;}
main[data-commerce-view] .cmPortalCaption{position:relative;z-index:2;display:block;margin-top:auto;padding:17rem 2rem 1.6rem;background:linear-gradient(0deg,rgba(5,19,13,.65),transparent 85%);}
main[data-commerce-view] .cmPortalCaption h2{font-size:clamp(1.8rem,3.2vw,3rem);line-height:1.3;font-weight:400;margin:.55rem 0 1.6rem;}
main[data-commerce-view] .cmPortalCta{width:100%;min-height:54px;padding:1rem 0 0;display:flex;justify-content:space-between;gap:1rem;font-size:1rem;border:0;border-top:1px solid var(--cm-line);border-radius:0;background:none;}
main[data-commerce-view] .commerceCard .cmPortalCta{align-self:stretch;}
main[data-commerce-view] .cmPortal:hover .cmPortalCta{background:none;}
main[data-commerce-view] .cmDirectoryHeader{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--cm-line);padding:1rem 0 1.3rem;margin-bottom:1.5rem;}
main[data-commerce-view] .cmDirectoryHeader h1{font-size:clamp(2.5rem,5vw,4.6rem);line-height:1.22;letter-spacing:.04em;margin:.65rem 0 0;}
main[data-commerce-view] .cmDirectoryMark{width:100px;height:100px;border:1px solid var(--cm-line);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
main[data-commerce-view] .cmMarkImage{width:80%;height:80%;object-fit:contain;}
main[data-commerce-view] .cmStoreList{grid-template-columns:1fr;gap:1.3rem;margin:0;}
main[data-commerce-view] .cmStoreCard{display:grid;grid-template-columns:34% 1fr;min-height:260px;background:linear-gradient(110deg,rgba(16,37,27,.87),rgba(8,24,18,.87));}
main[data-commerce-view] .cmStoreArt{display:flex;align-items:center;justify-content:center;min-height:260px;background:radial-gradient(ellipse at center,rgba(104,133,95,.12),transparent 70%);border-right:1px solid var(--cm-line);}
main[data-commerce-view] .cmStoreImage{display:block;width:100%;height:250px;object-fit:contain;pointer-events:none;}
main[data-commerce-view] .cmStoreBody{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;padding:1.7rem 2.8rem;}
main[data-commerce-view] .cmStoreBody h2{font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.35;font-weight:400;margin:.7rem 0 1.2rem;}
main[data-commerce-view] .cmStoreBody .cmLabel{font-size:.65rem;}
main[data-commerce-view] .cmStoreCta{min-height:50px;gap:1.5rem;padding:.6rem 1.2rem;border-radius:3px;color:#e0cca0;background:#c9b27a03;font-size:1rem;}
main[data-commerce-view] .cmDirectoryActions{border-top:1px solid var(--cm-line);padding-top:1.2rem;margin:1.5rem 0 0;justify-content:flex-end;gap:2rem;}
main[data-commerce-view] .cmDirectoryActions a{border:0;padding:.4rem 0;gap:1.1rem;background:none;font-size:.9rem;color:#d8c28d;}
main[data-commerce-view] #standards{border-top:1px solid #d3b87426;padding-top:2rem;scroll-margin-top:100px;}
/* Approved fortune backdrop / card density only; original text, JS and controls remain. */
body[data-visual-page="fortune"] .fx{position:relative;isolation:isolate;background:#04090a;}
body[data-visual-page="fortune"] .fx::before{content:"";position:absolute;inset:0 0 auto;height:70rem;max-height:100%;z-index:0;background:url('/assets/approved-visuals/fortune-mine.webp') center top/100% auto no-repeat;mask-image:linear-gradient(#000 55%,transparent);pointer-events:none;}
body[data-visual-page="fortune"] .fx .way{background:rgba(5,17,14,.76);border-color:rgba(197,161,78,.32);}
@media(max-width:740px){
  main[data-commerce-view] .commerceCrumb{margin-top:1rem;font-size:.82rem;}
  main[data-commerce-view] .commercePage{margin-top:1.25rem;padding-bottom:2.5rem;}
  main[data-commerce-view] .cmPortals{grid-template-columns:1fr;gap:1rem;}
  main[data-commerce-view] .cmPortal{min-height:390px;}
  main[data-commerce-view] .cmPortalIndex{left:1.3rem;top:1.2rem;}
  main[data-commerce-view] .cmPortalArt{width:70%;height:70%;right:0;top:.8rem;}
  main[data-commerce-view] .cmPortal--players .cmPortalArt{width:76%;height:70%;right:0;top:1rem;}
  main[data-commerce-view] .cmPortalCaption{padding:14rem 1.3rem 1.3rem;}
  main[data-commerce-view] .cmPortalCaption h2{font-size:2rem;margin-bottom:1.2rem;}
  main[data-commerce-view] .cmHubHeader h1{font-size:clamp(2.4rem,9vw,3.7rem);overflow-wrap:anywhere;}
  main[data-commerce-view] .cmDirectoryHeader h1{font-size:2.3rem;overflow-wrap:anywhere;}
  main[data-commerce-view] .cmDirectoryMark{width:66px;height:66px;}
  main[data-commerce-view] .cmStoreCard{grid-template-columns:1fr;}
  main[data-commerce-view] .cmStoreArt{min-height:190px;border-right:0;border-bottom:1px solid var(--cm-line);}
  main[data-commerce-view] .cmStoreImage{height:180px;}
  main[data-commerce-view] .cmStoreBody{padding:1.4rem;}
  main[data-commerce-view] .cmStoreBody h2{font-size:1.9rem;}
  main[data-commerce-view] .cmStoreBody .cmStoreCta{width:100%;justify-content:space-between;}
  main[data-commerce-view] .cmDirectoryActions{justify-content:space-between;gap:1rem;}
  main[data-commerce-view] .cmLabel{overflow-wrap:anywhere;}
  body[data-visual-page="fortune"] .fx::before{height:65rem;background-size:auto 100%;background-position:65% top;}
}
@media(max-width:360px){main[data-commerce-view] .cmDirectoryMark{display:none;}main[data-commerce-view] .cmPortalCta{font-size:.9rem;}}
@media(prefers-reduced-motion:reduce){main[data-commerce-view] .commerceCard{transition:none;}}
