/* Workbook Shop — design language taken from tabellab.com (cream background, pastel accents, green gradient header, Inter). */
:root{
  --bg:#fbfaf7; --surface:#fff; --ink:#24303a; --muted:#6b7780; --line:#e7e3dc; --soft:#f4f1ea; --line-2:#d9d3c8;
  --mint:#cdeee0; --mint-ink:#1f7a57; --sky:#d6e9fb; --sky-ink:#2563a6; --lav:#e6e0fa; --lav-ink:#5b4bb4; --peach:#fde3d3; --peach-ink:#b5532a; --butter:#fff4c7; --butter-ink:#7a5d00; --rose:#fbdde3; --rose-ink:#a8344f;
  --amber:#f5a524; --radius:14px; --shadow:0 1px 2px rgba(36,48,58,.06),0 6px 24px rgba(36,48,58,.06);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --wrap:1120px; --gutter:16px; --focus:0 0 0 3px rgba(37,99,166,.35);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--sky-ink);text-underline-offset:2px} a:hover{color:#1b4f86}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
h1,h2,h3{margin:0 0 .5em;line-height:1.2;letter-spacing:-.015em}
h1{font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:780} h2,.h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:740} h3{font-size:1.08rem;font-weight:700}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:760px}
.section{padding:56px 0}.section--tight{padding:32px 0}.section--soft{background:var(--soft)}
.center{text-align:center}.muted{color:var(--muted)}.small{font-size:.9rem}
.skip{position:absolute;left:-9999px;top:8px;background:#fff;padding:8px 14px;border-radius:8px;z-index:100}.skip:focus{left:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink);font-weight:650;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}
.btn:hover{background:var(--soft);color:var(--ink)}
.btn--primary{background:var(--mint-ink);border-color:var(--mint-ink);color:#fff;box-shadow:0 1px 2px rgba(31,122,87,.25)}
.btn--primary:hover{background:#196849;color:#fff}
.btn--amber{background:var(--amber);border-color:var(--amber);color:#2a1d00}.btn--amber:hover{background:#e29412;color:#2a1d00}
.btn--ghost{background:transparent}.btn--sm{min-height:36px;padding:6px 14px;font-size:.92rem}.btn--lg{min-height:52px;padding:12px 28px;font-size:1.05rem}.btn--block{width:100%}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* header */
.site-head{position:sticky;top:0;z-index:40;background:linear-gradient(120deg,#155c45 0%,#1f7a5a 55%,#2a9d74 100%);color:#fff}
.site-head__in{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:780;font-size:1.15rem;letter-spacing:-.01em}.brand:hover{color:#fff}
.brand svg{width:34px;height:34px;flex:none}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav>a{color:rgba(255,255,255,.92);text-decoration:none;padding:8px 13px;border-radius:10px;font-weight:600;font-size:.97rem}
.nav>a:hover{background:rgba(255,255,255,.14);color:#fff}.nav>a[aria-current="page"]{background:rgba(255,255,255,.22);color:#fff}
.nav .cart{position:relative;display:inline-flex;align-items:center;gap:6px;background:#fff;color:#155c45;font-weight:750;margin-left:6px}
.nav .cart:hover{background:#eafaf3;color:#155c45}
.cart__n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#155c45;color:#fff;font-size:.8rem}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;padding:8px 12px;border-radius:10px;font-weight:650;background:rgba(255,255,255,.16)}.menu summary::-webkit-details-marker{display:none}
.menu__panel{position:absolute;right:var(--gutter);top:60px;min-width:220px;background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:8px;display:grid;gap:2px}
.menu__panel a{color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:9px;font-weight:600}.menu__panel a:hover{background:var(--soft)}
@media (max-width:760px){.nav{display:none}.menu{display:block}.site-head__in .cart-m{margin-left:auto}}
.cart-m{display:none}
@media (max-width:760px){.cart-m{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#155c45;font-weight:750;padding:7px 12px;border-radius:10px;text-decoration:none;margin-left:auto}.menu{margin-left:8px}}
.flash{margin:16px 0 0;padding:12px 16px;border-radius:12px;font-weight:550}.flash--ok{background:var(--mint);color:#14573d}.flash--err{background:var(--rose);color:#7d2036}.flash--info{background:var(--sky);color:#1a4a80}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(900px 420px at 85% 10%,#fff4c7 0,transparent 60%),radial-gradient(700px 380px at 5% 90%,#d6e9fb 0,transparent 60%),var(--bg);border-bottom:1px solid var(--line)}
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding:56px var(--gutter) 64px}
.eyebrow{display:inline-block;background:var(--butter);color:var(--butter-ink);padding:4px 12px;border-radius:99px;font-weight:700;font-size:.82rem;letter-spacing:.02em;margin-bottom:14px}
.hero p.lead{font-size:1.15rem;color:var(--ink-2,#3b4954);max-width:34em}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 18px}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--muted);font-weight:550;font-size:.95rem}.ticks li::before{content:"✓";color:var(--mint-ink);font-weight:800;margin-right:7px}
.fan{position:relative;height:420px}
.fan img{position:absolute;width:56%;border-radius:8px;box-shadow:0 2px 4px rgba(36,48,58,.12),0 16px 40px rgba(36,48,58,.22);background:#fff}
.fan img:nth-child(1){left:2%;top:30px;transform:rotate(-9deg)}.fan img:nth-child(2){left:22%;top:0;transform:rotate(-1deg);z-index:2}.fan img:nth-child(3){left:42%;top:40px;transform:rotate(8deg);z-index:1}
@media (max-width:860px){.hero__in{grid-template-columns:1fr;padding-top:36px}.fan{height:320px;order:-1}}

/* cards / grids */
.grid{display:grid;gap:20px}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid--4{grid-template-columns:repeat(3,1fr)}}@media (max-width:760px){.grid--3{grid-template-columns:1fr}.grid--4{grid-template-columns:repeat(2,1fr)}}@media (max-width:440px){.grid--4{grid-template-columns:1fr 1fr;gap:12px}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.card--narrow{max-width:560px;margin:0 auto}
.series{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}.series:hover{transform:translateY(-4px);color:var(--ink);box-shadow:0 14px 40px rgba(36,48,58,.14)}
.series__tag{align-self:flex-start;padding:3px 12px;border-radius:99px;font-weight:700;font-size:.8rem}
.series--tabellab .series__tag{background:var(--mint);color:var(--mint-ink)}.series--code24lab .series__tag{background:var(--lav);color:var(--lav-ink)}.series--msl .series__tag{background:var(--peach);color:var(--peach-ink)}
.series h3{font-size:1.25rem;margin:0}.series__n{font-weight:750;color:var(--muted);font-size:.92rem}

.book{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.book:hover{transform:translateY(-6px);color:var(--ink);box-shadow:0 2px 4px rgba(36,48,58,.08),0 14px 28px rgba(36,48,58,.13),0 32px 60px rgba(36,48,58,.12)}
.book__img{background:linear-gradient(180deg,#f0ece3,#e6e0d3);padding:18px 18px 8px}
.book__img img{width:100%;border-radius:4px;box-shadow:0 2px 4px rgba(36,48,58,.15),0 10px 22px rgba(36,48,58,.2);aspect-ratio:556/720;object-fit:cover;background:#fff}
.book__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.book__brand{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.book__title{font-weight:740;line-height:1.25;font-size:1.02rem}
.book__meta{color:var(--muted);font-size:.88rem}
.book__price{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-weight:780;font-size:1.1rem;padding-top:8px}
.book__price span{font-weight:600;font-size:.82rem;color:var(--mint-ink);background:var(--mint);padding:2px 9px;border-radius:99px}

/* shop toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 22px}
.search{flex:1 1 260px;position:relative}.search input{width:100%;padding:12px 16px 12px 42px;border-radius:12px;border:1px solid var(--line-2);background:#fff}
.search::before{content:"⌕";position:absolute;left:15px;top:8px;font-size:1.3rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:7px 14px;border-radius:99px;border:1px solid var(--line-2);background:#fff;font-weight:650;font-size:.92rem;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--mint-ink);border-color:var(--mint-ink);color:#fff}
select.sort{padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);background:#fff}
.count{color:var(--muted);font-weight:600;margin:0 0 14px}

/* product page */
.pdp{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:44px;align-items:start}
@media (max-width:820px){.pdp{grid-template-columns:1fr;gap:24px}.pdp__img{max-width:340px;margin:0 auto}}
.pdp__img{background:linear-gradient(180deg,#f0ece3,#e6e0d3);border-radius:20px;padding:30px;position:sticky;top:84px}
.pdp__img img{width:100%;border-radius:4px;box-shadow:0 2px 4px rgba(36,48,58,.2),0 18px 40px rgba(36,48,58,.28),-6px 0 0 -2px rgba(0,0,0,.08)}
.badge{display:inline-block;padding:3px 12px;border-radius:99px;font-weight:700;font-size:.8rem}.badge--tabellab{background:var(--mint);color:var(--mint-ink)}.badge--code24lab{background:var(--lav);color:var(--lav-ink)}.badge--msl{background:var(--peach);color:var(--peach-ink)}
.pdp h1{margin:10px 0 8px}.pdp .sub{font-size:1.1rem;color:#3b4954;margin-bottom:18px}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;padding:0;list-style:none}
.facts li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-size:.92rem}.facts b{display:block;font-size:1.15rem;line-height:1.2}
.buybox{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px;margin:0 0 26px}
.price{font-size:2.1rem;font-weight:800;letter-spacing:-.02em}.price small{font-size:.9rem;font-weight:600;color:var(--muted);margin-left:8px}
.buybox__btns{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 12px}
.buybox ul{list-style:none;margin:0;padding:0;color:var(--muted);font-size:.93rem;display:grid;gap:4px}.buybox li::before{content:"✓";color:var(--mint-ink);font-weight:800;margin-right:8px}
.owned{background:var(--mint);color:#14573d;padding:10px 14px;border-radius:12px;font-weight:650;margin-bottom:12px}
.prose h2{margin-top:1.6em}.prose ul{padding-left:1.2em}.prose li{margin:.25em 0}
.courses{columns:2;column-gap:28px;padding-left:1.2em}@media(max-width:620px){.courses{columns:1}}
table.spec{border-collapse:collapse;width:100%;max-width:520px}.spec th,.spec td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);font-size:.95rem}.spec th{color:var(--muted);font-weight:600;width:40%}

/* cart */
.cart-line{display:grid;grid-template-columns:72px 1fr auto auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-line img{border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.cart-line .t{font-weight:700;line-height:1.3}@media(max-width:560px){.cart-line{grid-template-columns:56px 1fr auto}.cart-line form{grid-column:2/4}}
.total{display:flex;justify-content:space-between;font-size:1.3rem;font-weight:800;padding:18px 0}
.check{display:flex;gap:10px;align-items:flex-start;margin:10px 0 18px;font-size:.93rem;color:#3b4954}.check input{margin-top:4px;width:18px;height:18px;accent-color:var(--mint-ink)}
.field{display:grid;gap:6px;margin:0 0 14px}.field input{padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:#fff}

/* steps / faq */
.steps{counter-reset:s}.step{position:relative;padding-left:56px}.step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:12px;background:var(--mint);color:var(--mint-ink);font-weight:800;display:grid;place-items:center}
details.faq{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0;margin:0 0 10px}details.faq summary{cursor:pointer;padding:14px 18px;font-weight:700;list-style:none}details.faq summary::-webkit-details-marker{display:none}details.faq summary::after{content:"+";float:right;font-weight:800;color:var(--muted)}details.faq[open] summary::after{content:"–"}details.faq div{padding:0 18px 14px;color:#3b4954}
.dl{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
.gbtn{display:flex;justify-content:center;margin:12px 0}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);margin:16px 0}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

/* footer */
.site-foot{background:#1b2a24;color:#cfe0d8;margin-top:0}.site-foot a{color:#cfe0d8;text-decoration:none}.site-foot a:hover{color:#fff;text-decoration:underline}
.site-foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:44px var(--gutter) 28px}
@media(max-width:820px){.site-foot__grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.site-foot__grid{grid-template-columns:1fr}}
.site-foot h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.07em;color:#8fb3a3;margin:0 0 10px}.site-foot nav a{display:block;padding:3px 0}
.site-foot .brand{margin-bottom:10px}.site-foot p{color:#a9c4b8;font-size:.93rem}
.site-foot__bottom{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding:16px var(--gutter) 26px;border-top:1px solid rgba(255,255,255,.1);font-size:.88rem;color:#8fb3a3}
.legal h2{margin-top:1.6em;font-size:1.25rem}.legal ul{padding-left:1.2em}