@charset "UTF-8";
/* THE STORE — the home page (/) and the pages under /shop/. Linked after site.css, by those
   pages only (a game never loads it), and built on the hub's chrome: <body class="hub store">
   takes the sticky bar, the footer and the chips from site.css. Every colour, font, corner and
   shadow here is a THEME token from site.css; nothing names a colour of its own.
   Mobile first: one column on a phone, two from 760px. */

.store .wrap{max-width:1040px;}
.store main{display:block; padding-bottom:8px;}
.store h2{font-family:var(--font-title); font-weight:400; font-size:clamp(24px,5vw,32px); line-height:1.15;
  letter-spacing:.3px; color:var(--hero-ink); margin:0 0 12px;}
.store h3{font-family:var(--font-ui); font-weight:800; font-size:18px; line-height:1.3; margin:0 0 6px;}
.store p{margin:0 0 12px; line-height:1.6;}
.store a{color:var(--grape-dark); font-weight:700;}
.store .hub-foot a{color:var(--foot-ink);}   /* the footer's links keep the hub's own look */
.s-section{margin-top:48px;}
.s-lead{font-size:clamp(16px,2.4vw,18.5px); max-width:38em;}
.s-quiet{font-size:14.5px; color:var(--ink-soft);}

/* the bar's link back to the games: the hub's own "go" pill, as a link */
.store a.surprise{text-decoration:none; color:var(--cta-ink);}

/* ---- buttons ---- */
.s-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:8px 26px;
  font-family:var(--font-ui); font-weight:800; font-size:17px; line-height:1.2; text-align:center; text-decoration:none;
  border:0; border-radius:var(--r-pill); background:var(--cta); color:var(--cta-ink); box-shadow:var(--lift-lo); cursor:pointer;}
.store a.s-btn{color:var(--cta-ink);}
.s-btn:hover{transform:translateY(-1px);}
.s-btn:focus-visible{outline:3px solid var(--focus); outline-offset:3px;}
.store a.s-btn.quiet{background:var(--card); color:var(--ink); box-shadow:none; border:3px solid var(--key-line);}
.store a.s-btn.quiet:hover{border-color:var(--grape);}
/* the order button: the one green thing on the page, so it is found at a glance */
.store a.s-btn.wa{background:var(--leaf-dark); color:var(--on-color);}
.s-btns{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}

/* ---- the home page's hero: words, then three real covers fanned out ---- */
.s-hero{display:grid; gap:28px; align-items:center; padding-top:28px;}
.s-hero h1{font-family:var(--font-title); font-weight:400; font-size:clamp(34px,7.4vw,58px); line-height:1.06;
  letter-spacing:.5px; color:var(--hero-ink); text-shadow:var(--hero-fx); margin:0 0 14px;}
.s-hero h1 em{font-style:normal; color:var(--hero-em);}
.s-facts{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:18px 0 0;}
.s-facts li{font-family:var(--font-ui); font-weight:700; font-size:14px; padding:4px 14px; border-radius:var(--r-pill);
  background:var(--fact-bg); border:2px solid var(--fact-edge);}
.s-fan{display:flex; justify-content:center; padding:10px 0 18px;}
.s-fan img{width:34%; max-width:210px; height:auto; aspect-ratio:148/210; border-radius:10px; box-shadow:var(--lift-hi); background:var(--card);}
.s-fan img:nth-child(1){transform:rotate(-7deg) translate(14%,6%);}
.s-fan img:nth-child(2){position:relative; z-index:1; transform:scale(1.08);}
.s-fan img:nth-child(3){transform:rotate(7deg) translate(-14%,6%);}

/* ---- white cards ---- */
.s-card{background:var(--card); border-radius:var(--r-card); box-shadow:var(--lift); padding:clamp(18px,3.4vw,30px);}
.s-grid{display:grid; gap:20px;}
/* a product on the home page: its picture beside its words */
.s-product{display:grid; grid-template-columns:minmax(96px,34%) 1fr; gap:18px; align-items:start;}
.s-product img{width:100%; height:auto; aspect-ratio:148/210; border-radius:10px; box-shadow:var(--lift-sm);}
.s-product ul,.s-list{margin:0 0 14px; padding-left:20px; line-height:1.6;}
.s-product li,.s-list li{margin-bottom:3px;}
.s-price{font-family:var(--font-title); font-size:30px; line-height:1; color:var(--ink); margin:0 0 6px;}

/* ---- a product page: pictures on one side, the order box on the other ---- */
.s-page{display:grid; gap:24px; padding-top:24px;}
.s-page h1{font-family:var(--font-title); font-weight:400; font-size:clamp(30px,6.4vw,46px); line-height:1.08;
  letter-spacing:.4px; color:var(--wm); margin:0 0 8px;}
.s-cover{display:block; width:min(100%,360px); height:auto; aspect-ratio:148/210; margin:0 auto; border-radius:12px; box-shadow:var(--lift-hi); background:var(--card);}
.s-pick{margin:18px 0;}
.s-pick-label{font-family:var(--font-ui); font-weight:800; margin:0 0 8px;}
.city-picker{display:flex; flex-wrap:wrap; gap:8px;}
.s-order{margin-top:18px; padding:18px; border-radius:var(--r-sm); background:var(--tint); border:2px solid var(--key-line);}
.s-order .s-btn{width:100%;}
.s-order p:last-child{margin-bottom:0;}

/* ---- a strip of pictures that scrolls sideways: sample pages, the kit's pieces ---- */
.s-strip{display:flex; gap:16px; overflow-x:auto; padding:6px 4px 18px; margin:0 -4px; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;}
.s-strip figure{flex:0 0 auto; width:min(64vw,230px); margin:0; scroll-snap-align:start;}
.s-strip img{display:block; width:100%; height:auto; border-radius:10px; box-shadow:var(--lift-sm); background:var(--card);}
.s-strip figcaption{margin-top:10px; font-size:14.5px; line-height:1.45;}
.s-strip figcaption b{display:block; font-family:var(--font-ui); font-weight:800; font-size:15.5px;}
.s-strip .wide{width:min(78vw,320px);}

/* ---- numbered steps ---- */
.s-steps{list-style:none; counter-reset:step; display:grid; gap:14px; padding:0; margin:0;}
.s-steps li{counter-increment:step; position:relative; padding:16px 18px 16px 62px; background:var(--card);
  border-radius:var(--r-sm); box-shadow:var(--lift-sm); line-height:1.5;}
.s-steps li::before{content:counter(step); position:absolute; left:16px; top:14px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--font-title); font-size:18px; background:var(--sun); color:var(--ink);}
.s-steps b{display:block; font-family:var(--font-ui); font-weight:800;}

/* ---- the free games, as chips ---- */
.s-games{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px;}
.store .s-games a{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:4px 16px; text-decoration:none;
  font-family:var(--font-ui); font-weight:800; color:var(--ink); background:var(--card); border:3px solid var(--key-line); border-radius:var(--r-pill);}
.store .s-games a:hover{border-color:var(--grape);}

/* ---- a real review (the section is only ever built from products.js) ---- */
.s-review{margin:0 0 14px; padding:18px; background:var(--card); border-radius:var(--r-sm); box-shadow:var(--lift-sm);}
.s-review blockquote{margin:0 0 8px; line-height:1.55;}
.s-review figcaption{font-family:var(--font-ui); font-weight:800; font-size:14.5px; color:var(--ink-soft);}

/* ---- the help page's plain text, and the seller's details ---- */
.s-text{max-width:760px; margin:24px auto 0;}
.s-text h1{font-family:var(--font-title); font-weight:400; font-size:clamp(28px,6vw,40px); line-height:1.1; color:var(--wm); margin:0 0 8px;}
.store .s-text h2{font-family:var(--font-ui); font-weight:800; font-size:20px; margin:28px 0 8px;}
.s-seller{display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin:0 0 12px;}
.s-seller dt{font-family:var(--font-ui); font-weight:800;}
.s-seller dd{margin:0;}

/* ---- on a phone, the order button stays in reach at the foot of a product page ---- */
.s-buybar{position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:center; gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--card); box-shadow:var(--lift-hi);}
.s-buybar span{flex:1 1 auto; min-width:0; font-family:var(--font-ui); font-weight:800; font-size:14.5px; line-height:1.25;}
.s-buybar .s-btn{flex:0 0 auto; min-height:48px; padding:6px 20px; font-size:16px;}
.store.has-buybar .hub-foot{padding-bottom:110px;}

@media (min-width:760px){
  .s-hero{grid-template-columns:1.1fr .9fr; padding-top:44px;}
  .s-grid.two{grid-template-columns:1fr 1fr;}
  .s-steps{grid-template-columns:repeat(3,1fr);}
  .s-page{grid-template-columns:minmax(0,360px) 1fr; gap:40px; align-items:start; padding-top:36px;}
  .s-strip figure{width:230px;} .s-strip .wide{width:320px;}
  .s-buybar{display:none;}
  .store.has-buybar .hub-foot{padding-bottom:40px;}
}