/* impara.app/shop: the workbooks, a cover grid. A grown-up page, so it scrolls (the app's no-scroll rule is for the kids' screens). */
html,body{height:auto;overflow:visible}
body{padding:max(96px,calc(env(safe-area-inset-top) + 84px)) 16px 40px}
.top{max-width:1180px;margin:0 auto 28px}
.back{position:absolute;top:max(16px,env(safe-area-inset-top));left:16px;font-size:18px;min-height:0;height:52px;padding:0 18px 0 12px;gap:8px;flex:none;text-decoration:none}
.back svg{width:24px;height:24px}
.head h1{font:500 clamp(40px,6vw,64px)/1 var(--font);margin:0 0 10px}
.head p{font:400 19px/1.5 var(--font);color:var(--ink-2)}
.books{list-style:none;padding:0;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:40px 28px}
.book{display:flex;flex-direction:column;align-items:flex-start;gap:8px;height:100%}
.cover{width:100%;height:auto;border-radius:6px;box-shadow:0 2px 3px rgba(0,0,0,.14),0 14px 28px -10px rgba(0,0,0,.35);margin-bottom:8px;background:#eee}
.book h2{font:500 20px/1.25 var(--font);margin:0}
.book .sub{font:400 15px/1.4 var(--font);color:var(--ink-2);margin:0}
.buy{font-size:18px;min-height:0;height:50px;padding:0 18px;margin-top:auto;--lip:5px}
.book .sub{margin-bottom:8px}
.buy[disabled]{opacity:.7;cursor:progress}
.paper{font:500 16px/1.4 var(--font);color:var(--blu)}
.err{font:400 15px/1.4 var(--font);color:var(--rosso);margin:0}
.note{max-width:1180px;margin:48px auto 0;font:400 15px/1.5 var(--font);color:var(--ink-2)}
.note a{color:var(--blu)}
@media (max-width:600px){.books{grid-template-columns:repeat(2,1fr);gap:28px 14px}.book h2{font-size:17px}.buy{font-size:15px;height:auto;min-height:46px;padding:8px 12px;white-space:normal;line-height:1.15}}