/* bl-shop.css - the Shop listing pages and home (includes/market/house_cat.php, house_home.php; docs/shop/SHOP_IA.md).
   On top of brainlag.css tokens and bl-market.css (cards, grid, search box). Filters: a sidebar from 960px, a bottom
   sheet below it (opened by #shop-filters:target without script, by bl-shop.js with it). Light and dark come from the
   tokens; nothing here sets a colour of its own. */

.shop-page .lead{max-width:62ch}
.shop-head{padding:6px 0 4px}
.shop-head h1{margin:0 0 6px}
.shop-search{position:relative}

/* category bar: the plain text tabs of .mk-subnav, one scrolling line on a phone */
.shop-cats{margin:14px 0 4px}

/* a category's own landing pages: a row of plain links under the bar */
.shop-lands{display:flex;flex-wrap:wrap;gap:6px 20px;margin:10px 0 0;font-size:15px}
.shop-lands a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;box-sizing:border-box;color:var(--ink-2);font-weight:600;padding:6px 0;border-bottom:2px solid transparent}
.shop-lands a:hover{color:var(--ink)}
.shop-lands a[aria-current="page"]{background:var(--study-tint);color:var(--study-ink);border-radius:10px;padding-inline:10px}   /* a fill, not a one-sided edge (owner, 12 Oct) */

/* layout */
.shop-layout{display:block;margin-top:22px}
@media (min-width:960px){.shop-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start}}

/* the filter form */
.shop-filters{min-width:0}
.shop-sheet-head{display:none}
.shop-sheet-head h2{margin:0;font-size:19px}
.shop-facet{border:0;margin:0 0 26px;padding:0;min-width:0}
.shop-facet legend{font:700 15px/1.3 var(--f-body);color:var(--ink);padding:0;margin:0 0 8px}
.shop-facet label{display:flex;align-items:center;gap:10px;min-height:36px;font-size:15px;color:var(--ink-2);cursor:pointer}
.shop-facet input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--study)}
.shop-facet .t{flex:1;min-width:0}
.shop-facet .n{font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.shop-facet input:checked ~ .t{color:var(--ink);font-weight:600}
.shop-sheet-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.shop-sheet-foot .b{min-height:44px}
html.shop-js .shop-sheet-foot .b{display:none}
.shop-scrim{display:none}
@media (min-width:960px){
  .shop-filters{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;padding-inline-end:4px;scrollbar-width:thin}
  .shop-filter-btn{display:none}
}

/* the bottom sheet on a phone or tablet */
@media (max-width:959.98px){
  .shop-filters{position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:60;max-height:86vh;display:flex;flex-direction:column;
    background:var(--surface);color:var(--ink);border-radius:18px 18px 0 0;box-shadow:var(--shadow);
    transform:translateY(105%);visibility:hidden;transition:transform .24s cubic-bezier(.22,1,.36,1),visibility 0s linear .24s}
  .shop-filters:target,.shop-filters.is-open{transform:none;visibility:visible;transition:transform .24s cubic-bezier(.22,1,.36,1)}
  .shop-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px}
  .shop-sheet-close{font-weight:700;color:var(--blue-ink);min-height:44px;display:inline-flex;align-items:center}
  .shop-form{overflow:auto;padding:14px 16px 0;overscroll-behavior:contain;flex:1}
  .shop-sheet-foot{position:sticky;bottom:0;background:var(--surface);padding:12px 0 calc(14px + env(safe-area-inset-bottom))}
  html.shop-js .shop-sheet-foot .b{display:inline-flex;flex:1}
  .shop-scrim{position:fixed;inset:0;z-index:59;background:rgba(var(--ink-rgb),.38);opacity:0;pointer-events:none;transition:opacity .2s cubic-bezier(.22,1,.36,1)}
  .shop-layout:has(.shop-filters:target) .shop-scrim,.shop-layout.is-open .shop-scrim{display:block;opacity:1;pointer-events:auto}
  html.shop-sheet-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.shop-filters,.shop-scrim{transition:none !important}}

/* results bar: count, Filters button (phone), sort */
.shop-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:0 0 22px}
.shop-count{margin:0;font-weight:700;color:var(--ink);margin-inline-end:auto}
.shop-filter-btn{min-height:44px;padding:0 18px}
.shop-sort{display:flex;align-items:center;gap:8px}
.shop-sort label{font-size:14.5px;color:var(--ink-3);font-weight:600}
.shop-sort select.mk-in{width:auto;min-height:44px;padding:0 34px 0 12px;font-size:15px}
html.shop-js .shop-sort-go{display:none}
@media (max-width:420px){.shop-sort label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.shop-sort select.mk-in{max-width:46vw}}

/* chosen filters, each a plain link that removes it */
.shop-chosen{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0 0 16px;font-size:14.5px}
.shop-chosen > span{color:var(--ink-3)}
.shop-chosen a{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:4px;min-height:32px}
.shop-chosen a:hover{text-decoration-color:currentColor}
.shop-chosen svg{color:var(--ink-3)}

.shop-group-h{font-size:clamp(19px,2vw,22px);margin:28px 0 14px}
.shop-results > .shop-group-h:first-of-type{margin-top:8px}
.shop-results .mk-muted.mk-small{margin:0 0 16px}
.shop-empty{margin-top:4px}

/* pages */
.shop-pages{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:36px 0 8px}
.shop-pages a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:10px;font-weight:700;color:var(--ink-2);border:1px solid transparent}
.shop-pages a:hover{border-color:var(--rule-2);color:var(--ink)}
.shop-pages a[aria-current="page"]{color:var(--ink);border-color:var(--ink)}

/* home: the categories as a ruled list of links, each with its line */
.shop-hero{padding-bottom:0}
.shop-catlist{margin:26px 0 0}
.shop-catlist ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:4px 28px}
.shop-catlist li{min-width:0}
.shop-catlist a{display:flex;flex-direction:column;gap:2px;padding:14px 0;color:var(--ink)}
.shop-catlist .t{font:600 17px/1.3 var(--f-display)}
.shop-catlist .l{font-size:14.5px;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop-catlist a:hover .t{text-decoration:underline;text-underline-offset:4px}
.shop-catlist .is-hidden .t{color:var(--ink-3)}

/* search suggestions (bl-shop.js) */
.shop-sugg{position:absolute;inset-inline-start:0;inset-inline-end:0;top:calc(100% + 6px);z-index:40;margin:0;padding:6px 0;list-style:none;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);max-height:min(60vh,420px);overflow:auto}
.shop-sugg[hidden]{display:none}
.shop-sugg li a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 16px;color:var(--ink);font-size:15.5px}
.shop-sugg li a .k{font-size:13px;color:var(--ink-3);white-space:nowrap}
.shop-sugg li[aria-selected="true"] a,.shop-sugg li a:hover{background:var(--sunk)}
.shop-sugg .sep{height:8px}
.shop-sugg .all a{font-weight:700;color:var(--blue-ink)}

/* ======================================================================== 7 Oct 2026: product pages, cards, Sparks
   No hairline dividers anywhere in the Shop: bl-market.css's ruled section headers, fact lists and card frames are
   turned off here and spacing separates things instead. */
.shop-page .mk-section > header,.shop-item .mk-section > header,.shop-paper-after .mk-section > header{border-bottom:0;padding-bottom:0;margin-bottom:14px}
.shop-item .mk-buy ul,.shop-item .mk-facts,.shop-item .mk-facts div{border:0}
.shop-card .cv,.shop-item .mk-buy{border:0}
.shop-item .mk-buy ul{padding-top:6px}

/* ---- cards */
.shop-card{gap:0}
.shop-card .cv{background:var(--sunk)}
.shop-card h3{font-size:16px;-webkit-line-clamp:3}
.shop-card .price{margin-top:4px;font-size:16px}
.shop-card .price .inc{display:block;margin:2px 0 0;font-size:13.5px}
.shop-tag{margin:4px 0 0;font-size:13.5px;font-weight:700;color:var(--gold-ink)}
.shop-why{margin:6px 0 0;font-size:13.5px;color:var(--ink-3)}
.shop-rate{margin:4px 0 0}
.shop-rate a{color:inherit;text-decoration:none}
/* Quick look sits on the picture (owner, 11 Oct 2026). With a mouse: a button in the middle of the picture on hover or
   when the card has focus. On touch: a small eye button in the picture's bottom corner (the page count is top right). */
.shop-media{position:relative}
.shop-pr{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;margin-top:6px}
.shop-card .shop-pr .price{margin-top:0}
.shop-ql{position:absolute;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;color:#fff;background:rgba(11,22,38,.82);font:700 14px/1 var(--f-body);border-radius:12px}
.shop-ql:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--study)}
@media (hover:hover) and (pointer:fine){
  .shop-ql{left:50%;top:50%;min-height:44px;padding:0 16px;transform:translate(-50%,-50%) translateY(4px);opacity:0;transition:opacity .15s cubic-bezier(.22,1,.36,1),transform .15s cubic-bezier(.22,1,.36,1)}
  .shop-card:hover .shop-ql,.shop-card:focus-within .shop-ql{opacity:1;transform:translate(-50%,-50%)}
  .shop-ql:hover{background:rgba(11,22,38,.92)}
}
@media not ((hover:hover) and (pointer:fine)){
  .shop-ql{inset-inline-end:8px;bottom:8px;width:44px;height:44px;padding:0}
  .shop-ql span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
html:not(.shop-js) .shop-ql{display:none}
/* the swatch row: little pictures of the styles, or colour dots */
.shop-sw{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;position:relative;z-index:2}
.shop-sw a{display:flex;align-items:center;justify-content:center;min-width:34px;height:42px;border-radius:8px;background:var(--sunk);color:var(--ink-2);font-size:13px;font-weight:700;text-decoration:none}
.shop-sw img{display:block;width:26px;height:34px;object-fit:contain;background:#fff;border-radius:2px}
.shop-sw.dots a{min-width:32px;height:32px;border-radius:50%}
.shop-sw a:hover{background:var(--study-tint)}
.shop-sw a:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
.shop-sw i,.shop-var i{display:block;width:20px;height:20px;border-radius:50%}
.d-indigo{background:#3f47b8}.d-gold{background:#b4620c}.d-navy{background:#15365a}.d-violet{background:#5b3fa8}.d-teal{background:#0d9aa7}.d-blue{background:#3a78bf}.d-berry{background:#b83d76}.d-mono{background:#4d4d4d}
.d-light{background:#fff;box-shadow:inset 0 0 0 2px #3a9be8}.d-pastel{background:#edeaff;box-shadow:inset 0 0 0 2px #a48cf0}.d-dark{background:#15365a;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}.d-line{background:#fff;box-shadow:inset 0 0 0 2px #15365a}
.shop-grid.shop-mini{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:18px 16px}
.shop-mini .mk-card h3{font-size:14.5px}
.shop-shelf-line{margin:-6px 0 16px;font-size:15px}

/* ---- stars: a row of five, filled to the average; the figures beside it */
.shop-stars{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-2);font-weight:600}
.shop-stars .sv{position:relative;display:inline-block;width:96px;height:18px;background:no-repeat 0 0 / 19.2px 18px repeat-x;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E") 0 0 / 19.2px 18px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E") 0 0 / 19.2px 18px repeat-x;background-color:var(--rule-2)}
.shop-stars .sf{position:absolute;inset:0 auto 0 0;background:var(--gold)}
.shop-stars.sm{font-size:13.5px;gap:6px}.shop-stars.sm .sv{width:72px;height:14px;-webkit-mask-size:14.4px 14px;mask-size:14.4px 14px}

/* ---- product page: gallery | details, then the buy box on the right (Amazon's order) */
.shop-prod{grid-template-columns:minmax(0,1fr) 320px;gap:40px}
.shop-prod-top{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:900px){.shop-prod-top{grid-template-columns:minmax(260px,5fr) minmax(0,6fr);gap:36px;align-items:start}.shop-prod-top.is-tall{grid-template-columns:minmax(220px,4fr) minmax(0,6fr)}}
.shop-prod-info h1{font-size:clamp(24px,2.6vw,32px);line-height:1.15;margin:0 0 8px}
.shop-prod-info .sub{font-size:17px;margin:0 0 8px}
.shop-facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 20px;margin:22px 0 14px}
.shop-facts div{padding:0}
@media (max-width:899.98px){.shop-prod{grid-template-columns:minmax(0,1fr);gap:28px}.shop-item .mk-buy{position:static}}
/* the gallery: the main picture is a button that opens the lightbox; thumbnails choose the main picture */
.shop-gal{min-width:0}
.shop-gal-main{display:flex;align-items:center;justify-content:center;width:100%;padding:18px;border:0;border-radius:var(--r2);background:var(--sunk);cursor:zoom-in}
.shop-gal-main img{display:block;max-width:100%;max-height:min(70vh,640px);width:auto;height:auto;border-radius:3px;box-shadow:0 1px 2px rgba(16,34,60,.12),0 8px 22px rgba(16,34,60,.14);background:#fff}
.shop-gal-main:focus-visible{outline:2px solid var(--study-ink);outline-offset:3px}
.shop-gal-strip{list-style:none;display:flex;gap:8px;margin:12px 0 0;padding:2px;overflow-x:auto;scrollbar-width:thin}
.shop-gal-strip button{display:block;padding:4px;border:2px solid transparent;border-radius:10px;background:var(--sunk);cursor:pointer}
.shop-gal-strip button[aria-current="true"]{border-color:var(--study)}
.shop-gal-strip button:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
.shop-gal-strip img{display:block;width:56px;height:auto;max-height:80px;object-fit:contain;background:#fff;border-radius:2px}
/* the variant picker: a radio group of styles, each with its picture */
.shop-var{margin:14px 0 16px}
.shop-var-l{margin:0 0 8px;font-size:15px;color:var(--ink-2)}
.shop-var-l b{color:var(--ink)}
.shop-var ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.shop-var a{display:flex;align-items:center;gap:8px;min-height:44px;padding:5px 12px 5px 6px;border-radius:12px;background:var(--sunk);color:var(--ink);font-weight:600;font-size:14.5px;text-decoration:none;box-shadow:inset 0 0 0 2px transparent}
.shop-var a:not(:has(img,i)){padding-inline-start:12px}
.shop-var a img{width:30px;height:40px;object-fit:contain;background:#fff;border-radius:2px}
.shop-var a img[src*="/assets/img/wallpapers/"]{object-fit:cover;object-position:50% 0;background:none}   /* a wallpaper's own design fills its tile, the lock-screen top in view */
.shop-var a i{margin-inline-start:4px}
.shop-var a[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--study);background:var(--study-tint)}
.shop-var a:hover{background:var(--study-tint)}
.shop-var a:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
.shop-save{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.shop-save[aria-pressed="true"] svg path{fill:currentColor}
/* the paper generator in the Shop: a strip under the title */
.shop-paper-top{margin:16px 0 0}
.shop-paper-price{margin:0 0 6px;font-size:15px;color:var(--ink-3)}
.shop-paper-price b{font:700 22px/1 var(--f-display);color:var(--free);margin-inline-end:8px}
.shop-paper-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.shop-paper-row p{margin:0}
.shop-paper-after{margin:36px 0 0}

/* ---- reviews */
.shop-reviews h2{margin:0 0 10px}
.shop-rev-sum{margin:0 0 18px}
.shop-rev{margin:0 0 18px;max-width:65ch}
.shop-rev-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 4px;font-size:14.5px}
.shop-rev-h span{color:var(--ink-3)}
.shop-rev p:last-child{margin:0;color:var(--ink-2);line-height:1.55}
.shop-rev-form{max-width:520px;margin-top:20px}
.shop-rate-in{border:0;margin:0 0 12px;padding:0;display:inline-flex;flex-direction:row-reverse;gap:2px}
.shop-rate-in legend{font-weight:700;font-size:15px;margin:0 0 6px;padding:0;float:inline-start;width:100%}
.shop-rate-in input{position:absolute;opacity:0;width:1px;height:1px}
.shop-rate-in label{cursor:pointer;color:var(--rule-2);padding:4px;border-radius:8px;display:flex}
.shop-rate-in label svg{fill:currentColor}
.shop-rate-in input:checked ~ label,.shop-rate-in label:hover,.shop-rate-in label:hover ~ label{color:var(--gold)}
.shop-rate-in input:focus-visible + label{outline:2px solid var(--study-ink);outline-offset:1px}
.mk-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- the lightbox (bl-shop.js): Amazon-style large picture, thumbnails, arrows, counter, zoom */
html.shop-lb-on,html.shop-lb-on body{overflow:hidden}
.shop-lb{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:16px}
.shop-lb[hidden]{display:none}
.shop-lb-back{position:absolute;inset:0;background:rgba(8,17,32,.72)}
.shop-lb-box{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;width:min(1180px,100%);height:min(92vh,100%);padding:14px;border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.shop-lb-bar{display:flex;align-items:center;gap:12px}
.shop-lb-title{flex:1;min-width:0;margin:0;font:700 16px/1.3 var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-lb-count{font-size:14.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.shop-lb-x,.shop-lb-nav,.shop-lb-zoom{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;border:0;border-radius:12px;background:var(--sunk);color:var(--ink);cursor:pointer;font:700 15px/1 var(--f-body)}
.shop-lb-x:hover,.shop-lb-nav:hover,.shop-lb-zoom:hover{background:var(--study-tint)}
.shop-lb-x:focus-visible,.shop-lb-nav:focus-visible,.shop-lb-zoom:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
.shop-lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;border-radius:12px;background:var(--sunk);touch-action:pan-y pinch-zoom}
.shop-lb-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#fff;user-select:none;-webkit-user-drag:none;transition:transform .2s cubic-bezier(.22,1,.36,1)}
.shop-lb-stage.is-zoom{cursor:zoom-out;overflow:auto;align-items:flex-start;justify-content:flex-start}
.shop-lb-stage.is-zoom img{max-width:none;max-height:none;width:auto;height:auto}
@media (hover:hover) and (pointer:fine){.shop-lb-stage:not(.is-zoom) img{cursor:zoom-in}}
.shop-lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:56px;box-shadow:var(--shadow)}
.shop-lb-nav.prev{inset-inline-start:10px}.shop-lb-nav.next{inset-inline-end:10px}
.shop-lb-strip{list-style:none;display:flex;justify-content:center;gap:8px;margin:0;padding:2px;overflow-x:auto}
.shop-lb-strip button{padding:3px;border:2px solid transparent;border-radius:9px;background:var(--sunk);cursor:pointer}
.shop-lb-strip button[aria-current="true"]{border-color:var(--study)}
.shop-lb-strip button:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
.shop-lb-strip img{display:block;height:54px;width:auto;max-width:72px;object-fit:contain;background:#fff;border-radius:2px}
.shop-lb-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.shop-lb-more p{margin:0;color:var(--ink-2);font-size:15px;max-width:70ch}
.shop-lb-more .b{min-height:44px}
@media (max-width:640px){.shop-lb{padding:0}.shop-lb-box{height:100%;border-radius:0;padding:10px}.shop-lb-nav{width:42px;height:48px}.shop-lb-zoom{display:none}}
@media (prefers-reduced-motion:reduce){.shop-lb-stage img,.shop-ql{transition:none!important}.mk-card.mk-house.has-panel:hover .cv img.panel{transform:none}}
@media (prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine){.shop-ql{transform:translate(-50%,-50%)!important}}

/* ---- Sparks (house_sparks.php, house_sparkparent.php) */
.sk-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px}
.sk-head h1{margin:6px 0}
.sk-bal{min-width:220px}
.sk-bal-n{display:flex;align-items:center;gap:10px;margin:0;font-size:16px;color:var(--ink-2)}
.sk-bal-n b{font:700 40px/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.sk-bal p.mk-small{margin:6px 0 0}
.sk-n{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-variant-numeric:tabular-nums}
.sk-n img{display:block}
.sk-note{margin:20px 0 0;padding:14px 18px;border-radius:14px;background:var(--sunk)}
.sk-age{margin:24px 0 0;padding:20px;border-radius:16px;background:var(--sunk)}
.sk-age h2{margin:0 0 6px;font-size:20px}
.sk-age-b{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.sk-free{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin:28px 0 0}
.sk-gift,.sk-plusbox{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.sk-plusbox{flex-direction:column;gap:6px}
.sk-gift h2,.sk-plusbox h2{margin:0 0 4px;font-size:19px}
.sk-gift p,.sk-plusbox p{margin:0 0 10px}
.sk-done{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:700;color:var(--study-ink)}
.sk-first{margin:0 0 16px;font-weight:700;color:var(--ink)}
/* bundles: one chunky object per tier, the art about 60% of the tile, then the amount, the bonus, the tag, the price */
.sk-bundles{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:18px}
@media (max-width:560px){.sk-bundles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sk-amt{font-size:24px}.sk-bundle{padding:10px 10px 12px}}
.sk-bundle{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 14px 16px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.sk-bundle.is-best{box-shadow:inset 0 0 0 3px var(--gold),var(--shadow)}
.sk-art{width:100%;aspect-ratio:6/5;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--sunk);overflow:hidden}
.sk-art > img{display:block;width:100%;height:100%;object-fit:contain}
.sk-art-ph{display:grid;place-items:center;width:100%;height:100%;opacity:.55}
.sk-art-ph img{width:30%;height:auto;max-width:72px}
.sk-bundle h3{margin:10px 0 0;font:700 15px/1.2 var(--f-body);color:var(--ink-3);text-transform:none}
.sk-amt{margin:2px 0 0;font:700 30px/1.1 var(--f-display);color:var(--ink)}
.sk-amt img{width:26px;height:26px}
.sk-bonus{margin:2px 0 0;font-size:14.5px;color:var(--study-ink);font-weight:700;min-height:1.4em}
.sk-tag{margin:4px 0 0;font-size:13.5px;font-weight:800;color:var(--gold-ink);min-height:1.3em}
.sk-price{margin:6px 0 10px;font:700 18px/1.2 var(--f-display)}
.sk-price span{display:block;font:600 13px/1.3 var(--f-body);color:var(--ink-3)}
.sk-bundle .b{width:100%;margin-top:auto;min-height:46px;font-size:17px}
.sk-reveal-art{max-width:260px;margin:0 auto}
.sk-reveal-art img{display:block;width:100%;height:auto}
.sk-reveal.is-in .sk-reveal-art{animation:sk-open .5s cubic-bezier(.2,.9,.3,1.2) 1;transform-origin:50% 70%}
@keyframes sk-open{from{transform:scale(.88) translateY(10px);opacity:.3}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sk-reveal.is-in .sk-reveal-art{animation:none!important}}
/* cosmetics: a profile-picture preview with the ring, or the disc colour */
.sk-sub{margin:26px 0 12px;font-size:18px}
.sk-cos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:16px}
.sk-cos{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.sk-cos h4{margin:10px 0 0;font-size:16px}
.sk-tier{margin:0;font-size:13px;color:var(--ink-3);font-weight:700}
.sk-cost{margin:4px 0 10px;display:flex;flex-direction:column;gap:2px}
/* the card's button is the card's width and wraps its words (owner, 11 Oct 2026: "Get for 150 Sparks" ran past the card) */
.sk-cos{min-width:0}
.sk-cos .b{margin-top:auto;min-height:42px;width:100%;height:auto;padding:8px 12px;white-space:normal;text-align:center;line-height:1.25}
.sk-cos .b[aria-pressed="true"]{background:var(--study-tint);color:var(--study-ink)}
.sk-av{--r1:transparent;--r2:transparent;--bg:#3a78bf;--fg:#fff;position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;color:var(--fg);font:700 26px/1 var(--f-display);
  /* a frame's background: a soft tint of its own colour (a disc is its colour, that is the product) */
  background:radial-gradient(circle at 34% 26%,color-mix(in srgb,var(--r1) 14%,var(--surface)) 0 30%,color-mix(in srgb,var(--r1) 34%,var(--sunk)) 100%);
  box-shadow:0 0 0 4px var(--r1),0 0 0 7px var(--r2)}
.sk-av.is-disc{background:var(--bg)}
.sk-av .sk-face{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
.sk-av .sk-face img,.sk-av .sk-face svg{display:block;width:100%;height:100%;object-fit:cover}
.sk-av.dash-dots,.sk-av.dash-long{box-shadow:0 0 0 7px var(--r2)}
.sk-av.dash-dots::after,.sk-av.dash-long::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:4px dotted var(--r1)}
.sk-av.dash-long::after{border-style:dashed}
.sk-av.is-anim::after{animation:sk-turn 6s linear infinite}
.sk-av.is-anim.dash-dots::after{animation-direction:reverse}
@keyframes sk-turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sk-av.is-anim::after{animation:none}}
.sk-set-prev{display:flex;gap:16px;padding:6px}
.sk-set-prev .sk-av{width:44px;height:44px;font-size:18px}
.sk-table{width:100%;max-width:640px;border-collapse:collapse;font-size:15px}
.sk-table th{text-align:start;color:var(--ink-3);font-size:13.5px;padding:0 12px 8px 0}
.sk-table td{padding:8px 12px 8px 0}
.sk-table tbody tr:nth-child(odd){background:var(--sunk)}
.sk-table td:first-child{padding-inline-start:10px}.sk-table th:first-child{padding-inline-start:10px}
.sk-capform{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sk-capform .mk-in{width:auto;min-height:44px}
.sk-reqs{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:12px}
.sk-reqs li{padding:12px 14px;border-radius:12px;background:var(--sunk)}
.sk-req-act{display:inline-flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sk-check{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:15px;line-height:1.45}
.sk-check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--study)}
.sk-code{font:700 18px/1.4 var(--f-display);letter-spacing:.06em}
/* (moved to bl-spark-reward.css: the Sparks stages) */
.sk-reveal h2{margin:8px 0 4px}
.sk-reveal-art img{display:inline-block}
.sk-dlg{border:0;border-radius:18px;padding:0;max-width:min(520px,calc(100vw - 32px));background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.sk-dlg::backdrop{background:rgba(8,17,32,.6)}
.sk-dlg-in{padding:22px}
.sk-dlg-in h2{margin:0 0 10px;font-size:21px}
.sk-sum{font-weight:700;font-size:17px}
.sk-field{display:grid;gap:6px;font-weight:700;margin:12px 0}
.sk-dlg-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.sk-dlg-act .b{min-height:44px}
/* the parent's standalone page (bl-account/sparks-parent.php) */
.sp-parent{background:var(--paper);color:var(--ink);font-family:var(--f-body)}
.sp-wrap{max-width:620px;margin:0 auto;padding:28px 16px 60px}
.sp-brand{font:700 20px/1 var(--f-display);margin:0 0 24px}
.sp-pack{display:grid;gap:10px;margin:18px 0;padding:16px;border-radius:14px;background:var(--sunk)}
.sp-pack dt{font-size:13.5px;color:var(--ink-3);font-weight:700}
.sp-pack dd{margin:2px 0 0;font-weight:700}
.sp-form{display:grid;gap:10px;margin:16px 0}
.sp-form .b{min-height:46px}
.sp-cap select{min-height:44px;border-radius:12px;padding:0 12px;font:inherit}
.sp-msg{padding:10px 14px;border-radius:12px;background:var(--study-tint)}
.sp-err{padding:10px 14px;border-radius:12px;background:var(--kraft);color:var(--kraft-ink)}
.sp-small{font-size:14px;color:var(--ink-3)}
.shop-lb-foot{display:grid;gap:10px}
/* (moved to bl-spark-reward.css: the Sparks stages) */
.shop-sparks-strip h2{margin:0 0 2px;font-size:20px}
.shop-sparks-strip p{margin:0;color:var(--ink-2);max-width:60ch}
.shop-sparks-strip div{flex:1 1 280px}
[data-saved-key]:not([hidden]){display:contents}
/* 320 px: the search box shrinks (an input's intrinsic width pushed the button off screen), and the pack tool's
   single column may not grow past the page */
.shop-search input{min-width:0}
@media (max-width:760px){.shop-item .mk-pk-tool{grid-template-columns:minmax(0,1fr)}}
.shop-prod-main,.shop-prod-info{min-width:0}
.shop-item .mk-pk-form .b{white-space:normal;max-width:100%;text-align:center}
.shop-bw{margin:0 0 10px;font-size:15px;color:var(--ink-2);max-width:60ch}

/* modals (the lightbox and the Sparks dialog) per docs/brand/ART_QA_CHECKLIST.md, UI: a scrim with a 3 px blur, a raised
   surface (one step lighter than the page in dark), a 1 px light edge and a soft deep shadow; buttons right-aligned on
   a desktop, stacked full width on a phone */
.shop-lb-back{background:rgba(15,30,50,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sk-dlg::backdrop{background:rgba(15,30,50,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.shop-lb-box,.sk-dlg{background:#fff;border:1px solid rgba(255,255,255,.6);box-shadow:0 24px 64px -12px rgba(5,12,24,.45),0 2px 6px rgba(5,12,24,.12)}
:root[data-theme="dark"] .shop-lb-back,:root[data-theme="dark"] .sk-dlg::backdrop{background:rgba(5,12,24,.62)}
:root[data-theme="dark"] .shop-lb-box,:root[data-theme="dark"] .sk-dlg{background:#1b2f4b;border-color:rgba(255,255,255,.1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .shop-lb-back,:root:not([data-theme="light"]) .sk-dlg::backdrop{background:rgba(5,12,24,.62)}
  :root:not([data-theme="light"]) .shop-lb-box,:root:not([data-theme="light"]) .sk-dlg{background:#1b2f4b;border-color:rgba(255,255,255,.1)}}
.sk-dlg-act{justify-content:flex-end}
@media (max-width:560px){.sk-dlg-act{flex-direction:column-reverse}.sk-dlg-act .b{width:100%}}
@media (max-width:640px){.shop-lb-nav{top:auto;bottom:10px;transform:none}}   /* on a phone the arrows sit at the foot of the picture, clear of the page text */

/* Headings never break a word with a hyphen ("in- / tervals", owner 7 Oct 2026); long words wrap whole */
.shop-item h1,.shop-item h2,.shop-card h3{hyphens:manual;-webkit-hyphens:manual}

/* Kraft (owner, 8 Oct 2026: the Shop tile is the basket on sand paper, palette 2.0). The surfaces that were the gold
   tint (muddy in dark mode) are a sheet of paper in both themes: sand on the light page and on the navy desk. */
:root{--kraft:linear-gradient(180deg,#f7f3ea,#efece7);--kraft-edge:#e1dcd1;--kraft-ink:#15365a;--kraft-ink-2:#334963}
.sp-err,.mk-disclosure{box-shadow:inset 0 0 0 1.5px var(--kraft-edge)}
.mk-disclosure{color:var(--kraft-ink-2)}
.mk-disclosure a{color:var(--kraft-ink)}
:is(.sp-err,.mk-disclosure) :is(b,strong,h2,h3,a:not(.b)){color:var(--kraft-ink)}   /* dark mode sets these light: on paper they stay ink */
.sp-err{color:var(--kraft-ink)}
.shop-h1{display:flex;align-items:center;gap:12px}
.shop-mark{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:var(--r2,14px);background:var(--kraft);box-shadow:inset 0 0 0 1.5px var(--kraft-edge);color:var(--kraft-ink);flex:none}
/* a quiet button on paper: white with ink, in both themes (the dark theme's quiet button is a light-on-navy fill) */
:is(.sp-err,.mk-disclosure) .b-quiet{background:#fff;color:var(--kraft-ink);box-shadow:inset 0 0 0 2px var(--kraft-edge)}
:is(.sp-err,.mk-disclosure) .b-quiet:hover{box-shadow:inset 0 0 0 2px var(--kraft-ink-2)}
:is(.sp-err,.mk-disclosure) a:not(.b){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* the Plus mark beside a card's price (its words for screen readers; the Shop intro says it once in words) */
.shop-card .price .inc-mark,.mk-card .price .inc-mark{display:inline-flex;vertical-align:-3px;margin:0 0 0 8px}
.shop-card .price .inc-mark .bl-plus-mark{width:18px;height:18px}

/* ======================================================================== 10 Oct 2026: the Shop redesign
   (handoff-2026-10-06/site/shop/SHOP_PLAN.md). The product is the picture; a price is the plain total; rounded
   rectangles only (chips at 0.12 x their height); one character per section at most; tokens only for colour. */

/* ---- cards: a portrait tile, the product drawn large on it */
.shop-card .cv{aspect-ratio:4/5;border-radius:12px}
.shop-card .cv .art{display:block;width:auto;height:auto;object-fit:contain}
.shop-card .cv .art.pg{max-height:86%;max-width:80%}
.shop-card .cv .art.fan{width:94%;height:94%;max-width:none;box-shadow:none;border-radius:0;background:none}
.shop-card .cv .art.wp{max-height:90%;max-width:70%;border-radius:10px}
.shop-card.mk-deck .mk-deckface{width:84%}
.mk-grid-tall .shop-card .cv{aspect-ratio:4/5}
/* a study pack's card shows its cover's art panel edge to edge (186 x 118.8 mm), so the cover's word or formula reads */
.shop-card.has-panel .cv{aspect-ratio:186/118.8;background:none}
.shop-card .cv .art.panel{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:0;box-shadow:none}
/* the picture is clipped to the card's own radius on every corner (owner, 10 Oct: a square bottom corner): the panel
   grows a touch on hover instead of lifting, which had left a strip along the bottom edge */
.shop-card .cv{clip-path:inset(0 round 12px)}
.mk-card.mk-house.has-panel:hover .cv img.panel{transform:scale(1.02)}
.shop-gal img[src*="/card"]{box-shadow:none;border-radius:var(--r1,12px)}
/* the title reads as the card's title (the site's h3: display face, 600, 18 px; 16 px two to a row on a phone); its
   link is stretched over the whole card (bl-market.css .mk-card h3 a::after), so the card is the tap target */
.shop-card h3{margin-top:10px;font-size:18px;line-height:1.25}
@media (max-width:560px){.shop-card h3{font-size:16px}}
.shop-card h3 a{color:var(--ink);text-decoration:none}
.shop-card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
/* the count ("45 cards"): quiet text beside the price, never on the picture */
.shop-count{font:600 13.5px/1.3 var(--f-body);color:var(--ink-3)}
.shop-card .shop-pr{align-items:baseline}
.shop-line{margin:2px 0 0;font-size:14px;line-height:1.4;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop-card .price{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:6px}
.shop-card .price .vat{font:600 13px/1.2 var(--f-body);color:var(--ink-3)}
.shop-card .price .inc-mark{margin:0 0 0 2px}
.shop-mini .shop-line{display:none}

/* ---- shelves that scroll sideways: one row, snap points, the next card peeking in; never a half-empty row */
.shop-row{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 3 * 22px) / 4);gap:22px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 2px;padding:2px 2px 14px;scrollbar-width:thin}
.shop-row > .shop-card{scroll-snap-align:start}
.shop-row:focus-visible{outline:2px solid var(--study-ink);outline-offset:4px;border-radius:12px}
@media (min-width:1600px){.shop-row{grid-auto-columns:calc((100% - 4 * 22px) / 5)}}
@media (max-width:899.98px){.shop-row{grid-auto-columns:calc((100% - 2 * 16px) / 3.3);gap:16px}}
@media (max-width:640px){.shop-row{grid-auto-columns:calc((100% - 12px) / 2.25);gap:12px;margin:0 -16px;padding:2px 16px 14px;scroll-padding:0 16px}}
@media (min-width:768px){.shop-row.shop-row-narrow{display:grid;grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;padding:0}}
@media (min-width:1100px){.shop-row.shop-row-narrow{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.shop-row{scroll-behavior:auto}}
/* the arrows bl-shop.js adds beside a row's heading on a pointer screen */
.shop-shelf > header{flex-wrap:wrap}
.shop-arrows{display:none;gap:6px;margin-inline-start:auto}
@media (hover:hover) and (pointer:fine){.shop-arrows{display:inline-flex}}
.shop-arrows button{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:var(--sunk);color:var(--ink);cursor:pointer}
.shop-arrows button:hover{background:var(--study-tint)}
.shop-arrows button:disabled{opacity:.4;cursor:default}
.shop-arrows button:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}

/* ---- the Shop home's head: h1, one line, search, one row of category chips */
.shop-home-v2 .shop-top{padding:22px 0 0}
.shop-home-v2 .shop-h1{font-size:clamp(30px,4vw,42px);margin:0 0 6px}
.shop-home-v2 .shop-mark{width:42px;height:42px}
.shop-home-v2 .lead{margin:0 0 16px;font-size:clamp(16.5px,1.6vw,19px)}
.shop-home-v2 .shop-search{max-width:640px}
.shop-chips{margin:16px 0 0;overflow-x:auto;scrollbar-width:none}
.shop-chips::-webkit-scrollbar{display:none}
.shop-chips ul{list-style:none;display:flex;gap:8px;margin:0;padding:2px 0 4px;width:max-content}
.shop-chips a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:5px;background:var(--sunk);color:var(--ink);font:600 15px/1 var(--f-body);white-space:nowrap;text-decoration:none}
.shop-chips a:hover{background:var(--study-tint)}
.shop-chips a:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
.shop-chips .is-hidden a{color:var(--ink-3)}
@media (max-width:640px){.shop-chips{margin-inline-start:-16px;margin-inline-end:-16px;padding:0 16px}}
@media (min-width:900px){.shop-chips ul{flex-wrap:wrap;width:auto}}

/* ---- Featured: one product, large. Art | words on a wide screen, stacked on a phone. */
.shop-feat{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 40px;align-items:center;margin:26px 0 0;padding:18px;border-radius:var(--r2);background:var(--sunk)}
.shop-feat-art{display:block;border-radius:12px}
.shop-feat-art img{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;aspect-ratio:1}
.shop-feat-txt h2{margin:0 0 6px;font-size:clamp(24px,3vw,34px);line-height:1.15}
.shop-feat-txt h2 a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.shop-feat-txt h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.shop-feat-line{margin:0 0 12px;color:var(--ink-2);font-size:16.5px;line-height:1.5;max-width:52ch}
.shop-feat-parts{list-style:none;display:grid;gap:6px;margin:0 0 16px;padding:0}
.shop-feat-parts li{display:flex;align-items:center;gap:10px;font-size:15.5px}
.shop-feat-parts li > svg{flex:none;color:var(--study-ink)}
.shop-feat-parts a{color:var(--ink);font-weight:600}
.shop-feat-parts .n{color:var(--ink-3);font-size:14px;margin-inline-start:4px;white-space:nowrap}
.shop-feat-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0}
.shop-feat-price b{font:700 clamp(30px,3.4vw,38px)/1 var(--f-display);color:var(--ink);letter-spacing:-.01em}
.shop-feat-price span{font-weight:600;color:var(--ink-3)}
.shop-feat-save{margin:6px 0 0;font-weight:700;color:var(--study-ink)}
.shop-feat-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:18px}
.shop-feat-cta p{margin:0;max-width:34ch}
/* a phone: the covers small beside the name, so the price and "See what is inside" sit in the first screen (owner
   review, 10 Oct); the words become grid items of the card (display:contents) to sit beside and under the picture */
@media (max-width:640px){
  .shop-feat{grid-template-columns:92px minmax(0,1fr);gap:10px 14px;align-items:center;margin:16px -4px 0;padding:12px 14px 16px}
  .shop-feat-txt{display:contents}
  .shop-feat-art{grid-column:1;grid-row:1}
  .shop-feat-art img{width:92px;max-width:none}
  .shop-feat-txt h2{grid-column:2;grid-row:1;font-size:22px;margin:0}
  .shop-feat-line{display:none}
  .shop-feat-parts,.shop-feat-price,.shop-feat-save,.shop-feat-cta{grid-column:1 / -1}
  .shop-feat-parts{margin:0;gap:4px}.shop-feat-parts li{font-size:15px}
  .shop-feat-save{margin:0}
  .shop-feat-cta{margin-top:4px}.shop-feat-cta .b{width:100%}
  .shop-home-v2 .shop-top{padding-top:12px}
  .shop-home-v2 .shop-h1{font-size:28px}.shop-home-v2 .shop-mark{width:36px;height:36px}
  .shop-home-v2 .lead{margin-bottom:12px;font-size:16px}
  .shop-chips{margin-top:10px}
  .shop-feat{padding:10px 14px 14px;margin-top:14px}
}
@media (min-width:900px){.shop-feat{grid-template-columns:minmax(0,5fr) minmax(0,6fr);padding:28px 40px 28px 28px}}

/* ---- Study packs: the level tabs (a segmented row; bl-shop.js shows it) */
.shop-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.shop-tabs[hidden]{display:none}
.shop-tabs button{min-height:40px;padding:0 16px;border:0;border-radius:5px;background:var(--sunk);color:var(--ink);font:600 15px/1 var(--f-body);cursor:pointer}
.shop-tabs button:hover{background:var(--study-tint)}
.shop-tabs button[aria-pressed="true"]{background:var(--study-tint);color:var(--study-ink)}
.shop-tabs button:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
.shop-card[data-level].is-off{display:none}

/* ---- How it works: three plain steps */
.shop-how{margin:48px 0 0}
.shop-how h2{margin:0 0 16px;font-size:clamp(21px,2.2vw,25px)}
.shop-how ol{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;margin:0;padding:0}
.shop-how li{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
.shop-how .n{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--study-tint);color:var(--study-ink);font:700 18px/1 var(--f-display)}
.shop-how h3{margin:4px 0 4px;font-size:17px}
.shop-how p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.45}

/* ---- Plus and Sparks: side by side on a wide screen, quiet surfaces, facts only */
.shop-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px;margin:52px 0 0}
.shop-plus,.shop-sparks{display:flex;gap:18px;align-items:flex-start;padding:22px;border-radius:var(--r2);background:var(--surface);box-shadow:var(--shadow)}
.shop-plus h2,.shop-sparks h2{margin:0 0 6px;font-size:20px}
.shop-plus p,.shop-sparks p{margin:0 0 14px;color:var(--ink-2);line-height:1.5}
.shop-plus-char{flex:none;width:92px;height:auto}
.shop-sparks > img{flex:none;width:40px;height:40px;margin-top:2px}
.shop-sparks .shop-sparks-bal{color:var(--ink);font-weight:600}
@media (max-width:420px){.shop-plus-char{width:72px}}

/* ---- Good to know */
.shop-know{margin:44px 0 0}
.shop-know h2{margin:0 0 12px;font-size:clamp(21px,2.2vw,25px)}
.shop-know ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:10px 28px;margin:0;padding:0}
.shop-know li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--ink-2);line-height:1.45}
.shop-know li > svg{flex:none;margin-top:2px;color:var(--study-ink)}

/* ---- product pages: the price block under the title on a phone, the buy box on a wide screen */
.shop-buyline{display:none;margin:14px 0 16px}
.shop-buyline .p{margin:0;font:700 32px/1 var(--f-display);color:var(--ink);letter-spacing:-.01em}
.shop-buyline .p span,.mk-buy .p-vat{display:block;margin:6px 0 0;font:600 14px/1.3 var(--f-body);color:var(--ink-3);letter-spacing:0}
.shop-buyline .b{width:100%;margin-top:10px}
.shop-buyline .mk-small{margin:8px 0 0}
.shop-buy-note{margin:8px 0 0}
@media (max-width:899.98px){.shop-buyline{display:block}.shop-item .mk-buy .shop-buy-cta{display:none}}
/* a disabled "Coming soon": quiet, not a dead primary */
.shop-item .b[disabled]{background:var(--sunk);color:var(--ink-3);box-shadow:none;cursor:not-allowed;border-color:transparent}

/* ---- the sticky bar on a phone's product page: the price and the free page, clear of the content and the home bar */
.shop-stick{position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:50;display:flex;align-items:center;gap:12px;
  padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:var(--surface);box-shadow:0 -6px 20px rgba(16,34,60,.12);transform:translateY(110%);transition:transform .2s cubic-bezier(.22,1,.36,1)}
.shop-stick[hidden]{display:none}
.shop-stick.is-on{transform:none}
.shop-stick .p{margin:0;flex:1;min-width:0;font:700 20px/1.1 var(--f-display);color:var(--ink)}
.shop-stick .p span{display:block;font:600 12.5px/1.2 var(--f-body);color:var(--ink-3)}
.shop-stick .b{min-height:46px;flex:none;max-width:62%}
html.shop-stick-on body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
@media (min-width:900px){.shop-stick{display:none!important}html.shop-stick-on body{padding-bottom:0}}
@media (prefers-reduced-motion:reduce){.shop-stick{transition:none}}
/* a bundle's own cover is a transparent picture of paper on the desk: no white page or page shadow behind it */
.shop-gal img[src*="/packs/bundles/"],.shop-lb-stage img[src*="/packs/bundles/"],.shop-lb-strip img[src*="/packs/bundles/"]{background:none;box-shadow:none}
.shop-save-line{font-weight:700;color:var(--study-ink)}
/* a phone's product page: a shorter main picture, so the price and the free page sit near the first screen */
@media (max-width:640px){.shop-item .shop-gal-main{padding:12px}.shop-item .shop-gal-main img{max-height:40vh;min-height:0}.shop-item .shop-gal-strip{margin-top:8px}.shop-prod-info h1{font-size:23px}}
/* a narrow phone: long compounds kept whole by the no-split rule (bl-nobreak.js, "GCSE-Naturwissenschaften-Lernpaket")
   fit the title's line */
@media (max-width:420px){.shop-prod-info h1{font-size:min(20px,5.1vw)}}
/* a phone's product page (owner review, 10 Oct): the short name as the title (the full name stays in <title>, the meta
   and the structured data), then the price and the free page straight under it, then the rest; a compact strip */
@media (max-width:640px){
  .shop-prod-info{display:flex;flex-direction:column}
  .shop-prod-info > h1{order:-2;margin-bottom:0}
  .shop-prod-info > .shop-buyline{order:-1;margin:8px 0 14px}
  .shop-prod-info h1 .h1-rest{display:none}
  .shop-item .shop-prod-top{gap:14px}
  .shop-item .shop-gal-strip{gap:6px;margin-top:6px}
  .shop-item .shop-gal-strip button{padding:2px;border-radius:8px}
  .shop-item .shop-gal-strip img{width:36px;max-height:50px}
  .shop-buyline .p{font-size:28px}
  .shop-buyline .b{margin-top:8px}
  /* the price (and a bundle's saving), then the main button at once, then the smaller lines */
  .shop-buyline{display:flex;flex-direction:column}
  .shop-buyline > *{order:2}
  .shop-buyline > .p,.shop-buyline > .shop-save-line{order:0}
  .shop-buyline > .b-study{order:1}
  .shop-buyline > .shop-save-line{margin:4px 0 0}
  /* the main picture takes what the screen can spare: 40 % of a tall phone, less on a short one */
  .shop-item .shop-gal-main img{max-height:min(40vh,calc(100vh - 500px))}
}

/* a row of one or two (the wallpapers): two wide cards side by side from 641 px, the picture beside the words, so a
   row is never half empty (owner review, 10 Oct) */
@media (min-width:641px){
  .shop-row.shop-row-few{grid-auto-columns:calc((100% - 22px) / 2);overflow:visible}
  .shop-row-few > .shop-card{display:grid;grid-template-columns:minmax(140px,40%) minmax(0,1fr);column-gap:20px;align-content:start}
  .shop-row-few > .shop-card > .cv{grid-column:1;grid-row:1 / span 8}
  .shop-row-few > .shop-card > :not(.cv){grid-column:2}
  .shop-row-few > .shop-card > h3{margin-top:4px}
}
/* a long colourway name ("Druckerfreundlich (schwarz-weiß)") does not fit half of a 320 px form: one per line there */
@media (max-width:400px){.shop-item .mk-pk-sw{grid-template-columns:minmax(0,1fr)}}
/* the Shop's search on a narrow phone: the button is its magnifier (the word stays for screen readers), so the
   placeholder fits whole at 320 px in every language */
.shop-search-go svg{display:none}
@media (max-width:420px){
  .shop-search-go{width:50px;min-width:50px;padding:0;flex:none}
  .shop-search-go svg{display:block}
  .shop-search-go .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .shop-search input{font-size:15px;padding-inline-start:14px;padding-inline-end:10px}
}

/* ======================================================================== 11 Oct 2026 (owner): the item page
   a) the breadcrumb has room before what follows, on every Shop page */
main > .crumbs{margin-bottom:20px}
@media (max-width:640px){main > .crumbs{margin-bottom:16px}}
/* b) the gallery is a native carousel (owner, 11 Oct 2026, "more natural"): the slides scroll sideways with snap
   points, so the picture follows the finger with momentum; on a phone the next one peeks in at the edge. Small round
   translucent arrows sit inside the frame on a pointer screen, shown on hover or focus; touch swipes instead. */
.shop-gal-stage{position:relative}
.shop-gal-track{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r2)}
.shop-gal-track::-webkit-scrollbar{display:none}
.shop-gal-track > .shop-gal-main{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;aspect-ratio:4/3;height:auto;max-height:min(62vh, 520px);min-width:0;overflow:hidden;padding:14px}
/* one frame for every picture (a wide cover panel and a tall page alike), each fitted inside it */
.shop-gal-track > .shop-gal-main img,.shop-item .shop-gal-track > .shop-gal-main img{max-width:100%;max-height:100%;min-height:0;object-fit:contain}
.shop-gal-nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;transition:opacity .2s ease-out}
.shop-gal-nav::before{content:"";position:absolute;inset:2px;border-radius:50%;background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:0 1px 2px rgba(16,34,60,.14),0 4px 12px rgba(16,34,60,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.shop-gal-nav svg{position:relative}
.shop-gal-nav.prev{inset-inline-start:6px}.shop-gal-nav.next{inset-inline-end:6px}
.shop-gal-nav:hover::before{background:var(--surface)}
.shop-gal-nav:focus-visible{outline:none;opacity:1}
.shop-gal-nav:focus-visible::before{box-shadow:0 0 0 2px var(--study-ink)}
.shop-gal-nav{opacity:0}
.shop-gal-stage:hover .shop-gal-nav,.shop-gal-stage:focus-within .shop-gal-nav{opacity:1}
@media (hover:none){.shop-gal-nav{display:none}}
/* "1 / 6" under the picture on a phone (the thumbnails say it on a wider screen) */
.shop-gal-count{display:none;margin:8px 0 0;text-align:center;font:600 13px/1 var(--f-body);color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .shop-gal-count{display:block}
  .shop-gal-track{gap:8px;border-radius:0;margin:0 -16px;padding:0 16px;scroll-padding:0 16px}
  .shop-gal-track > .shop-gal-main{flex-basis:86%;aspect-ratio:4/3;max-height:min(46vh, 100vh - 440px);min-height:200px}
}
/* d) every thumbnail is the same portrait box (a page's shape); a wide cover panel sits inside it on its own colour */
.shop-gal-strip{scroll-snap-type:x proximity;scroll-padding:0 8px;overscroll-behavior-x:contain;scrollbar-width:none}
.shop-gal-strip::-webkit-scrollbar{display:none}
/* the strip fades at a side with more thumbnails to scroll to (bl-shop.js sets fade-l / fade-r) */
.shop-gal-strip-wrap{--fl:0px;--fr:0px}
.shop-gal-strip-wrap.fade-l{--fl:28px}.shop-gal-strip-wrap.fade-r{--fr:28px}
.shop-gal-strip-wrap .shop-gal-strip{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
.shop-gal-strip li{flex:none;scroll-snap-align:start}
.shop-gal-strip,.shop-item .shop-gal-strip{gap:6px}
.shop-gal-strip button,.shop-item .shop-gal-strip button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:50px;height:70px;padding:3px;overflow:hidden}
.shop-gal-strip img,.shop-item .shop-gal-strip img{width:100%;height:100%;max-height:none;object-fit:contain;background:none;border-radius:2px}
.shop-gal-strip button.is-panel{--panel:#11606a;background:var(--panel)}
.shop-gal-strip button.is-panel[data-variant="blue"]{--panel:#1d4a7e}
.shop-gal-strip button.is-panel[data-variant="berry"]{--panel:#7d1d4c}
.shop-gal-strip button.is-panel[data-variant="mono"]{--panel:#f3f3f3}
.shop-gal-strip button.is-panel[data-variant="indigo"]{--panel:#2b3290}.shop-gal-strip button.is-panel[data-variant="gold"]{--panel:#9c5200}
.shop-gal-strip button.is-panel[data-variant="navy"]{--panel:#15365a}.shop-gal-strip button.is-panel[data-variant="violet"]{--panel:#45307f}
.shop-gal-strip button.is-panel img{border-radius:0}
/* a partial preview (the top of a page) sits on a paper tile, so in dark mode it reads as a page, not a dark box */
.shop-gal-strip button.is-partial,.shop-lb-strip button.is-partial{background:#fff}
@media (max-width:640px){
  .shop-item .shop-gal-strip button{width:46px;height:64px;padding:3px}
  .shop-gal-nav.prev{inset-inline-start:6px}.shop-gal-nav.next{inset-inline-end:6px}
}
/* d) a shelf's cards ("Pairs well with", the Shop home's rows) share one picture frame, the study pack's landscape
   panel; a page (paper, a friends printable) stands inside it. The words line up: a two-line description slot, the
   price at the foot. */
.shop-shelf .shop-card,.shop-shelf .shop-card.has-panel{display:flex;flex-direction:column}
.shop-shelf .shop-card .cv{aspect-ratio:186/118.8}
.shop-shelf .shop-card .cv .art.pg{max-height:88%;max-width:60%}
.shop-shelf .shop-card .cv .art.wp{max-height:92%;max-width:40%}
.shop-shelf .shop-card .shop-line{min-height:2.8em}
.shop-shelf .shop-card .shop-pr{margin-top:auto}
.shop-shelf .shop-row-few > .shop-card{display:grid}
/* a row of one or two (the wallpapers) keeps its tall picture beside the words */
@media (min-width:641px){.shop-row-few > .shop-card > .shop-media{grid-column:1;grid-row:1 / span 8}}   /* the picture's wrapper (Quick look), not .cv, is the card's child */
.shop-shelf .shop-row-few > .shop-card .cv{aspect-ratio:4/5}
.shop-shelf .shop-row-few > .shop-card .cv .art.wp{max-height:90%;max-width:70%}
@media (prefers-reduced-motion:reduce){.shop-gal-nav{transition:none}.shop-lb-stage img.is-fade{transition:none}}
/* the lightbox crossfades between pictures */
.shop-lb-stage img.is-fade{opacity:0;transition:none}
.shop-lb-stage img{transition:opacity .24s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1)}
/* paper on a coloured frame (coordinator, 11 Oct 2026): a paper product (lined, graph, music paper) and a friends
   printable stand as a white sheet, a touch tilted with a soft shadow, on the study packs' teal panel in the same
   landscape frame, so a row of packs and paper reads as one family, on every Shop page, in both themes */
.shop-card.mk-printable .cv,.shop-card.mk-pack:not(.has-panel) .cv{aspect-ratio:186/118.8;background:#11606a}
.shop-card.mk-printable .cv .art.pg,.shop-card.mk-pack:not(.has-panel) .cv .art.pg{max-height:76%;max-width:52%;background:#fff;border-radius:2px;
  transform:rotate(-3deg);box-shadow:0 2px 4px rgba(4,30,34,.25),0 10px 24px rgba(4,30,34,.35)}
.mk-card.shop-card.mk-printable:hover .cv img.pg,.mk-card.shop-card.mk-pack:not(.has-panel):hover .cv img.pg{transform:rotate(-3deg) scale(1.025)}
@media (prefers-reduced-motion:reduce){.mk-card.shop-card.mk-printable:hover .cv img.pg,.mk-card.shop-card.mk-pack:not(.has-panel):hover .cv img.pg{transform:rotate(-3deg)}}
/* every card grid lines up the same way as a shelf: a two-line description slot and the price at the foot */
.shop-grid:not(.shop-row-few) > .shop-card{display:flex;flex-direction:column}
.shop-grid:not(.shop-row-few) > .shop-card .shop-line{min-height:2.8em}
.shop-grid:not(.shop-row-few) > .shop-card .shop-pr{margin-top:auto}
/* buying Brainlag's own items (bl-market/shop-buy.php): two ticks, then the button with the price on it */
.shop-buy-form{display:grid;gap:10px;margin:12px 0 8px}
.shop-tick{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:14.5px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.shop-tick input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--study)}
.shop-tick.is-need{border-radius:10px;background:var(--gold-tint);box-shadow:0 0 0 2px var(--gold);padding:8px 10px;margin:0 -10px}
.shop-tick.is-need input{outline:2px solid var(--gold-ink);outline-offset:2px}
.shop-buy-msg{margin:0;font-size:14.5px;font-weight:700;color:var(--gold-ink)}
.shop-buy-msg:empty{display:none}
.shop-buy-form .b{width:100%}
/* the Shop's breadcrumb: the whole trail on a wide screen, "‹ Parent" on a phone (bl-market/catalogue.php) */
.crumbs .crumbs-trail{display:contents}
.crumbs .crumbs-up{display:none}
@media (max-width:640px){
  .crumbs .crumbs-trail{display:none}
  .crumbs .crumbs-up{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-weight:600;color:var(--ink-2)}
  main > .crumbs{margin-top:8px;margin-bottom:8px}
}
/* the quiet Plus card beside Buy (includes/components/plus-nudge.php, brainlag.css): on a phone its "See plans" link
   took width:100% plus its 34 px indent, so the page scrolled sideways at 320 and 390 px (shop2-check) */
.bl-pn.bl-pn-q .bl-pn-go{width:auto;max-width:calc(100% - 34px);min-width:0;white-space:normal}

/* ======================================================================== 11 Oct 2026 (owner): calmer product pages
   the buy box keeps the price and the buttons, with room between groups; the rest sits in collapsible sections */
.shop-item .mk-buy{padding:24px}
.shop-item :is(.mk-buy,.shop-buyline) .p{margin-bottom:2px}
.shop-item :is(.mk-buy,.shop-buyline) .p-vat{margin-top:8px;line-height:1.4}
.shop-item :is(.mk-buy,.shop-buyline) .bl-pn{margin:18px 0}
.shop-item :is(.mk-buy,.shop-buyline) .b + .b{margin-top:12px}
.shop-item :is(.mk-buy,.shop-buyline) .mk-small{line-height:1.5;margin:14px 0 0}
.shop-item :is(.mk-buy,.shop-buyline) .shop-buy-form{gap:14px;margin:18px 0 0}
.shop-item .shop-prod-info > * + *{margin-top:12px}
.shop-item .shop-prod-info .sub{line-height:1.5}
/* Details, How to use, Licence, Questions: rounded rows with a chevron, spacing between them (no hairlines) */
.shop-accs{margin:36px 0 8px;display:grid;gap:10px}
.shop-acc{background:var(--surface);border-radius:var(--r2,14px);padding:0 20px}
.shop-acc > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:6px 0;cursor:pointer;list-style:none}
.shop-acc > summary::-webkit-details-marker{display:none}
.shop-acc > summary h2{margin:0;font:600 19px/1.3 var(--f-display);color:var(--ink)}
.shop-acc > summary .chev{flex:none;color:var(--ink-3);transition:transform .2s cubic-bezier(.22,1,.36,1)}
.shop-acc[open] > summary .chev{transform:rotate(180deg)}
.shop-acc > summary:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px;border-radius:6px}
.shop-acc-body{padding:2px 0 22px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.shop-acc-body > * + *{margin-top:14px}
.shop-acc-body p{margin:0;max-width:68ch}
.shop-acc-body h3{margin:22px 0 0;font:600 16px/1.3 var(--f-body);color:var(--ink)}
.shop-acc-body .mk-pk-toc{margin-top:10px}
.shop-acc-body .mk-facts{margin-top:20px;gap:16px 24px}
.shop-acc-body .mk-facts dd{line-height:1.45}
@media (prefers-reduced-motion:reduce){.shop-acc > summary .chev{transition:none}}
/* a deck's cards: the first eight, then "Show all n cards" */
.mk-deck-more{margin-top:16px}
.mk-deck-more > summary{display:inline-flex;list-style:none;cursor:pointer}
.mk-deck-more > summary::-webkit-details-marker{display:none}
.mk-deck-more[open] > summary{display:none}
/* under 900 px the buttons sit under the title, so a buy box holding nothing else is not drawn as an empty card */
@media (max-width:899.98px){.shop-item .mk-buy:not(:has(> :not(.shop-buy-cta))){display:none}}
/* a deck's cards: closed under "See the cards (n)"; inside, a compact list, term and meaning on one row where they
   fit (the meaning muted), two short lines on a phone */
.mk-deck-all{margin-top:28px}
.mk-deck-all > .shop-acc{margin:0}
.mk-deck-compact{margin:0}
.mk-deck-compact > div{grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:2px 18px;padding:8px 0;border-bottom:0}
.mk-deck-compact dt{font:650 15px/1.4 var(--f-body);color:var(--ink)}
.mk-deck-compact dd{margin:0;font-size:15px;line-height:1.45;color:var(--ink-3)}
@media (max-width:640px){.mk-deck-compact > div{grid-template-columns:minmax(0,1fr);padding:7px 0}}
.mk-deck-more{margin-top:12px}
/* "Pairs well with": three to a row on a wide screen, two on a phone; with three cards a phone shows two (full rows) */
.shop-shelf[data-shelf="pairs"] > .mk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){
  .shop-shelf[data-shelf="pairs"] > .mk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop-shelf[data-shelf="pairs"] > .mk-grid > :nth-child(3):last-child{display:none}
}

/* ======================================================================== 12 Oct 2026 (owner): the paper item page
   (includes/printables.php in its Shop mode, main.shop-paper). The title, price and styles sit in the tool's head
   beside the sheet, so the sheet starts at the top of the page and stays in view while the settings scroll; the
   notes are the study pack's rounded sections; More printable paper uses the shelf's teal frame; every control is a
   44 px target. */
main.shop-paper{padding-top:24px;padding-bottom:24px}
/* a landscape sheet leaves the head and the controls at least 440 px */
.shop-paper .pr-tool{--pr-sheet-max:calc(min(100vw, var(--wrap)) - 48px - 440px - clamp(20px,3vw,48px));margin:0}
.shop-paper .pr-stick{top:84px;padding-top:0}
.shop-paper .pr-titlerow h1{font-size:clamp(26px,2.6vw,32px);line-height:1.15;hyphens:manual;-webkit-hyphens:manual}
/* the controls: 44 px rows */
.shop-paper .pr-seg span{min-height:44px}
.shop-paper select,.shop-paper .pr-panel input[type=text],.shop-paper .pr-panel input[type=date]{min-height:44px}
.shop-paper input[type=range]{height:44px}
.shop-paper .pr-rl label,.shop-paper .pr-rl output{margin-bottom:0}
.shop-paper .pr-sw{min-height:44px}
.shop-paper .pr-sw input{height:44px;width:100%;inset:0}
.shop-paper .pr-sw-row{gap:4px}
.shop-paper .pr-lock{margin:0 0 4px 50px;font-size:13.5px}
.shop-paper .pr-days span{min-height:44px}
.shop-paper .pr-x{height:44px;width:44px}
.shop-paper .pr-pages .pr-btn{min-height:44px}
.shop-paper .pr-sw-colours{gap:6px}
.shop-paper .pr-tip{margin:-8px 0 0}
/* Download keeps the site's button colours in the dark theme: white on the deep teal (dark ink on it was 4:1) */
:root[data-theme="dark"] .shop-paper .pr-btn.primary{color:var(--on-study-btn)}
/* the notes, then the shelves */
.shop-paper .shop-accs{margin:48px 0 0}
.shop-paper .shop-acc-body ul{margin:0;padding-inline-start:20px}
.shop-paper .shop-acc-body li + li{margin-top:6px}
.shop-paper .shop-acc-body dl{margin:0}
.shop-paper .shop-acc-body dt{font-weight:700;color:var(--ink)}
.shop-paper .shop-acc-body dd{margin:4px 0 0;max-width:68ch}
.shop-paper .shop-acc-body dd + dt{margin-top:16px}
.shop-paper .shop-paper-after{margin:40px 0 0}
.shop-paper .pr-more{margin:40px 0 0}
.shop-paper .pr-more h2{font-size:21px;margin:0 0 14px}
.shop-paper .pr-grid{margin:0;gap:22px 18px}
.shop-paper .pr-tile{gap:4px}
.shop-paper .pr-thumb,.shop-paper .pr-thumb.land{aspect-ratio:186/118.8;margin:0 0 8px;background:#11606a;overflow:hidden}
.shop-paper .pr-tile:hover .pr-thumb{background:#146b76}
.shop-paper .pr-thumb img,.shop-paper .pr-thumb canvas{height:76%;width:auto;max-width:56%;max-height:none;object-fit:contain;background:#fff;transform:rotate(-3deg);box-shadow:0 2px 4px rgba(4,30,34,.25),0 10px 24px rgba(4,30,34,.35)}
.shop-paper .pr-thumb.land img,.shop-paper .pr-thumb.land canvas{width:62%;height:auto;max-height:76%;max-width:none}
.shop-paper .pr-tile:hover .pr-thumb img,.shop-paper .pr-tile:hover .pr-thumb canvas{transform:rotate(-3deg) translateY(-3px)}
.shop-paper .pr-tn{font-size:15.5px}
.shop-paper .pr-tl{font-size:14px}
.shop-paper .pr-all{margin:14px 0 0}
.shop-paper .pr-all a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:899px){
  .shop-paper .pr-tool{grid-template-areas:"title" "stage" "main";grid-template-rows:none;row-gap:14px}
  .shop-paper .pr-stage{align-self:start}
}
@media (max-width:640px){
  main.shop-paper{padding-top:0}
  .shop-paper .pr-titlerow h1{font-size:min(26px,7vw)}
  .shop-paper .pr-lead{font-size:16px}
  .shop-paper .shop-accs{margin-top:36px}
  .shop-paper .pr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
}
/* a phone: the style pictures stand above their names, three to a row, so a group of three is one even row */
@media (max-width:640px){
  .shop-var ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
  .shop-var a{flex-direction:column;justify-content:center;gap:6px;padding:8px 6px;text-align:center;line-height:1.2;height:100%;box-sizing:border-box}
  .shop-var a:not(:has(img,i)){padding-inline-start:6px}
}
@media (prefers-reduced-motion:reduce){.shop-paper .pr-thumb img,.shop-paper .pr-thumb canvas{transition:none}}
/* official courses and bundles (shop_courses; docs/plans/OFFICIAL_COURSES_IN_SHOP_2026-10.md): who made it under the
   title, plain text with the mark and a verified tick (never a pill); a bundle's covers side by side; "Opening soon" */
.shop-by{display:flex;align-items:center;gap:6px;margin:2px 0 0;color:var(--ink-2);font-size:13.5px;font-weight:600;line-height:1.3}
.shop-by img{width:18px;height:18px;border-radius:5px;flex:none}
.shop-by-ok{flex:none;color:var(--study-ink)}
.shop-card .cv .art.mont{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;width:100%;height:100%;background:var(--sunk)}
.shop-card .cv .art.mont > span{min-width:0;overflow:hidden}
.shop-card .cv .art.mont img{width:100%;height:100%;object-fit:cover;max-width:none;max-height:none;border-radius:0;box-shadow:none}
.shop-soon{margin:4px 0 0;color:var(--ink-3);font-size:13.5px;font-weight:600}   /* plain words, nothing to tap (the button comes with payments) */
.shop-card.mk-course,.shop-card.mk-cbundle{display:flex;flex-direction:column}
/* the price sits at the foot as on every Shop card (.shop-grid .shop-pr margin-top:auto), "Opening soon" right under it */
/* a category with nothing to filter: no filter column, the results full width */
@media (min-width:960px){.shop-layout.no-facets{display:block}}
/* Official courses: Bundles 3 across (one wide column on a phone), Courses 5 across from 1000 px and 2 below,
   so 3 and 10 cards always fill their rows */
.shop-sub-h{font-size:clamp(17px,1.6vw,19px);margin:18px 0 12px}
.shop-results > .shop-group-h + .shop-sub-h{margin-top:4px}
.mk-grid.shop-off.is-cb{grid-template-columns:repeat(3,minmax(0,1fr))}
.mk-grid.shop-off.is-cc{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){.mk-grid.shop-off.is-cc{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 16px}}
@media (max-width:640px){
  .mk-grid.shop-off.is-cb{grid-template-columns:1fr;gap:14px}
  /* a wide card: the covers at the left, the words beside them */
  .shop-off.is-cb > .shop-card{display:grid;grid-template-columns:118px minmax(0,1fr);column-gap:14px;align-content:start}
  .shop-off.is-cb > .shop-card > *{grid-column:2}
  .shop-off.is-cb > .shop-card > .shop-media{grid-column:1;grid-row:1 / span 6;align-self:start}
  .shop-off.is-cb > .shop-card .cv{aspect-ratio:1/1}
  .shop-off.is-cb > .shop-card .shop-pr{margin-top:6px}
}
/* an official course's item page (house_course.php) */
.shop-course .shop-prod-info .shop-by{margin:6px 0 10px;font-size:14.5px}
.shop-in-plan{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--study-ink);font-weight:700;font-size:16px}
.shop-in-adv{margin:10px 0 0;color:var(--ink-2);font-size:14.5px}
.shop-soon-lg{margin:6px 0 0;font-size:15px}
.shop-see{margin:14px 0 0}
.shop-mods{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.shop-mods > li{border-bottom:1px solid var(--rule)}
.shop-mods summary,.shop-mod-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 2px;cursor:default}
.shop-mods summary{cursor:pointer;list-style:none}
.shop-mods summary::-webkit-details-marker{display:none}
.shop-mods summary b,.shop-mod-row b{font-weight:700;color:var(--ink)}
.shop-mods summary .n,.shop-mod-row .n{flex:none;color:var(--ink-3);font-size:14px}
.shop-mods summary:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px;border-radius:6px}
.shop-les{margin:0 0 12px;padding-inline-start:22px;color:var(--ink-2);font-size:15px;line-height:1.6}
.shop-course .shop-gal-main{padding:0;background:none}
.shop-course .shop-gal-main img{width:100%;max-height:none;border-radius:var(--r2);box-shadow:none}
.shop-card .price.is-own{display:flex;align-items:center;gap:6px;color:var(--study-ink);font-size:15px;font-weight:700}
/* a course's item page reads in one order at every width: title, who made it, its line, the buy box, the facts */
@media (max-width:640px){
  .shop-course .shop-prod-info > *{order:0}
  .shop-course .shop-prod-info > .shop-buyline{margin:4px 0 6px}
  .shop-course .shop-buyline > .shop-in-plan{order:0}
}

/* ---- colour lines (Shop appeal plan 2.2; owner, 14 Oct 2026: "all the shop items have the same green turquoise colour").
   Each item carries data-line (bl-market/lines.php): one dominant hue per line, the tint (--ln-t) behind its picture and
   the ink (--ln-i) for its marks. Ink on tint, measured: maths 5.96 / 7.83 (light / dark), science 5.16 / 10.57, music
   4.83 / 7.61, code 7.38 / 8.75, planning 4.53 / 6.85, study method 6.46 / 7.13, teachers 11.9 / 7.9, the friends 4.97 to
   6.87 / 8.11 to 9.93. Teal stays for the primary action alone, so it always means "act". */
[data-line]{--ln-t:var(--sunk);--ln-i:var(--ink-2)}
[data-line="maths"]{--ln-t:#e2e4fb;--ln-i:#3f47b8}
[data-line="sci"]{--ln-t:var(--gold-tint);--ln-i:var(--gold-ink)}
[data-line="mus"]{--ln-t:var(--music-tint);--ln-i:var(--music-ink)}
[data-line="code"]{--ln-t:#15365a;--ln-i:#7ad7de}
[data-line="plan"]{--ln-t:var(--blue-tint);--ln-i:var(--blue-ink)}
[data-line="meth"]{--ln-t:#eee8fb;--ln-i:#5b3fa8}
[data-line="teach"]{--ln-t:#e6eef7;--ln-i:#15365a}
[data-line="tal"]{--ln-t:#fff2e6;--ln-i:#a8401a}
[data-line="mar"]{--ln-t:#efeafd;--ln-i:#5b3fa8}
[data-line="bru"]{--ln-t:#eef0f4;--ln-i:#4a5263}
[data-line="jou"]{--ln-t:#ddf8f2;--ln-i:#0b6e5e}
[data-line="pim"]{--ln-t:#fff0e0;--ln-i:#9a4a00}
[data-line="pet"]{--ln-t:#ffe8ec;--ln-i:#b23a52}
:root[data-theme="dark"] [data-line="maths"]{--ln-t:#221c54;--ln-i:#a9b4ff}
:root[data-theme="dark"] [data-line="sci"]{--ln-t:#1b3170;--ln-i:#ffd877}   /* cobalt (14 Oct: a dark yellow read brown); ink 8.9:1 */
:root[data-theme="dark"] [data-line="mus"]{--ln-t:#5f164c;--ln-i:#f59cc8}   /* a rich magenta (18 Oct: #3a1a33 read muddy); ink 6.1:1 */
:root[data-theme="dark"] [data-line="code"]{--ln-t:#0e2a47;--ln-i:#7ad7de}
:root[data-theme="dark"] [data-line="plan"]{--ln-t:#13304f;--ln-i:#7cc0f5}
:root[data-theme="dark"] [data-line="meth"]{--ln-t:#241d45;--ln-i:#b6a1ff}
:root[data-theme="dark"] [data-line="teach"]{--ln-t:#182b45;--ln-i:#b9cde3}
:root[data-theme="dark"] [data-line="tal"]{--ln-t:#751528;--ln-i:#ffa77a}   /* crimson (18 Oct: #5a1a16 read brown); ink 5.8:1 */
:root[data-theme="dark"] [data-line="mar"]{--ln-t:#241d45;--ln-i:#c4b5fd}
:root[data-theme="dark"] [data-line="bru"]{--ln-t:#1f2430;--ln-i:#c9cfdb}
:root[data-theme="dark"] [data-line="jou"]{--ln-t:#0f332d;--ln-i:#3fe0c5}
:root[data-theme="dark"] [data-line="pim"]{--ln-t:#0b3943;--ln-i:#ffb766}   /* petrol, so the orange ink pops; 7.3:1 */
:root[data-theme="dark"] [data-line="pet"]{--ln-t:#6e123a;--ln-i:#ff9fb0}   /* raspberry (18 Oct: #3a1720 read maroon); ink 6.0:1 */
/* a card's picture sits on its line's tint (a page stands on it as a white sheet) */
.shop-card[data-line] .cv,.shop-card.mk-printable[data-line] .cv,.shop-card.mk-pack[data-line]:not(.has-panel) .cv{background:var(--ln-t);border-color:transparent}
.shop-card[data-line] .mk-deckface{box-shadow:0 2px 4px rgba(4,30,34,.12),0 10px 24px rgba(4,30,34,.16)}
/* nothing covers words (coordinator, 14 Oct 2026): the count is beside the price (.shop-count), so a card face or a page
   sits centred in its picture with nothing over it */
.shop-card[data-line].mk-deck .cv{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:12px 0}
.shop-card[data-line].mk-deck .mk-deckface{max-height:100%;overflow:hidden}
/* the item page in its line (Shop appeal plan 2.1): the pictures on the line's tint, the line's friend under them and
   clear of every word, what is inside as counts in the line's ink */
.shop-item[data-line] .shop-gal-main{background:var(--ln-t)}
.shop-item[data-line] .shop-gal-strip button[aria-current="true"]{border-color:var(--ln-i)}
.shop-prod-media{min-width:0}
.shop-friend-row{display:flex;justify-content:flex-end;margin-top:6px;pointer-events:none}
.shop-friend-row img{display:block;width:auto;height:132px}
@media (max-width:640px){.shop-friend-row{margin-top:-4px}.shop-friend-row img{height:84px}}
.shop-counts{list-style:none;margin:22px 0 4px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.shop-counts li{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:var(--r2,18px);background:var(--ln-t,var(--sunk));color:var(--ln-i,var(--ink))}
.shop-counts b{font:700 clamp(30px,3.4vw,40px)/1 var(--f-display);letter-spacing:-.01em}
.shop-counts span{font-weight:700;font-size:15px;line-height:1.3}
@media (max-width:640px){.shop-counts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.shop-counts li{padding:12px 14px}}
.shop-buy-cta .shop-try,.shop-buyline .shop-try{width:100%}
/* after buying (Phase 6): the pack slides out of a sleeve in its own colour; one ease-out tween, nothing with reduced
   motion; quieter than any study moment, so no confetti and no sound */
.shop-unbox{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;margin:8px 0 24px;padding:22px 24px;border-radius:var(--r3,26px);background:var(--ln-t,var(--sunk));color:var(--ln-i,var(--ink))}
.shop-unbox:not(.is-in){grid-template-columns:minmax(0,1fr)}
.shop-unbox h2{margin:0 0 6px;font-size:clamp(22px,2.4vw,28px);color:inherit}
.shop-unbox p{margin:0 0 10px;color:inherit}
.shop-unbox-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.shop-unbox-art{position:relative;width:150px;height:170px}
.shop-unbox-art .sleeve{position:absolute;left:0;right:0;bottom:0;height:62%;border-radius:14px;background:var(--ln-i,var(--ink));z-index:2}
.shop-unbox-art .cover{position:absolute;left:50%;bottom:14%;width:104px;height:auto;margin-left:-52px;border-radius:4px;background:#fff;
  box-shadow:0 10px 24px rgba(4,30,34,.25);z-index:1;animation:shop-unbox 620ms cubic-bezier(.22,1,.36,1) 240ms both}
@keyframes shop-unbox{from{transform:translateY(46%) rotate(0deg)}to{transform:translateY(-6%) rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.shop-unbox-art .cover{animation:none;transform:translateY(-6%) rotate(-4deg)}}
html[data-motion="off"] .shop-unbox-art .cover{animation:none;transform:translateY(-6%) rotate(-4deg)}
@media (max-width:640px){.shop-unbox{grid-template-columns:minmax(0,1fr);padding:18px 16px}.shop-unbox-art{margin:0 auto}}
/* Your shelf: what you have, each standing on its own line's tint */
.shop-mine-row{list-style:none;margin:14px 0 0;padding:0 0 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;border-bottom:8px solid var(--sunk)}
.shop-mine-row a{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink)}
.shop-mine-row .pic{display:grid;place-items:center;aspect-ratio:3/4;border-radius:var(--r1,14px);background:var(--ln-t,var(--sunk));overflow:hidden;padding:14px}
.shop-mine-row .pic img{max-width:100%;max-height:100%;object-fit:contain;border-radius:3px;box-shadow:0 6px 16px rgba(4,30,34,.18)}
.shop-mine-row .pic img.panel{box-shadow:none;border-radius:10px}
.shop-mine-row .nm{font:700 15px/1.25 var(--f-display)}
.shop-mine-row .how{font-size:13.5px;color:var(--ink-3)}
.shop-mine-row a:focus-visible{outline:2px solid var(--study-ink);outline-offset:3px;border-radius:12px}
@media (max-width:640px){.shop-mine-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
/* Try five cards (a deck's page): the card turns over in 3D, on the deck's line tint; without script, both sides show */
.shop-try5{margin:26px 0 6px;padding:22px;border-radius:var(--r3,26px);background:var(--ln-t,var(--sunk))}
.shop-try5 h2{margin:0 0 14px;font-size:22px;color:var(--ln-i,var(--ink))}
.t5-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.t5-card{display:grid;width:100%;max-width:560px;margin:0 auto;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer;perspective:1200px}
.t5-face{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:180px;padding:22px 24px;border-radius:var(--r2,18px);background:var(--surface);box-shadow:var(--shadow)}
.t5-face b{font:700 clamp(22px,2.6vw,28px)/1.2 var(--f-display)}
.t5-face span:not(.t5-k){font-size:17px;line-height:1.5}
.t5-k{font:700 13px/1 var(--f-body);color:var(--ln-i,var(--ink-3))}
.shop-try5:not(.is-js) .t5-a{margin-top:8px}
.shop-try5.is-js .t5-card{grid-template-areas:"c"}
.shop-try5.is-js .t5-face{grid-area:c;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform 420ms cubic-bezier(.45,0,.55,1)}
.shop-try5.is-js .t5-a{transform:rotateY(180deg)}
.shop-try5.is-js .t5-card.is-over .t5-q{transform:rotateY(-180deg)}
.shop-try5.is-js .t5-card.is-over .t5-a{transform:rotateY(0deg)}
.shop-try5.is-js .t5-card.no-motion .t5-face{transition:none}
.t5-card:focus-visible{outline:3px solid var(--ln-i,var(--study-ink));outline-offset:4px;border-radius:var(--r2,18px)}
.t5-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px;color:var(--ln-i,var(--ink))}
.t5-nav .b{min-width:48px;font-size:22px}
.t5-pos{font-weight:700;min-width:3.5em;text-align:center}
.t5-hint{text-align:center;margin:8px 0 0;color:var(--ln-i,var(--ink-3))}
@media (prefers-reduced-motion:reduce){.shop-try5.is-js .t5-face{transition:none}}
.shop-buy-cta .b,.shop-buyline .b{white-space:normal;text-align:center;line-height:1.25;padding-block:10px;height:auto}
/* ---- one card spec (owner, 18 Oct 2026: "items need to have the same height too for thumbs"). Every Shop card in every
   grid, shelf and row, whatever it sells: the picture in one wide box (the study pack covers' own shape, 186:118.8), the
   product centred in it; the title clamped to two lines, the description right under it, clamped to
   two (coordinator, 18 Oct: no reserved second title line, it read as a gap); the price and count pinned to the foot; the cards of a row one height (the grid stretches them). These
   rules come last and win over the older per-kind shapes above (4/5 decks and wallpapers, square course bundles). */
.shop-grid > .shop-card,.shop-row > .shop-card{display:flex;flex-direction:column;min-width:0;height:100%}
.mk-card.shop-card .shop-media{flex:none}
.mk-card.shop-card .shop-media > .cv{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:auto;aspect-ratio:186/118.8;padding:0;overflow:hidden}
.mk-card.shop-card .shop-media > .cv > .art.pg{width:auto;height:auto;max-height:80%;max-width:56%}
.mk-card.shop-card .shop-media > .cv > .art.wp{width:auto;height:88%;max-height:88%;max-width:90%;object-fit:contain;border-radius:8px}
.mk-card.shop-card .shop-media > .cv > .art.fan{width:auto;height:94%;max-height:94%;max-width:94%}
.mk-card.shop-card .shop-media > .cv > .art.panel,.mk-card.shop-card .shop-media > .cv > .art.mont{width:100%;height:100%}
.mk-card.shop-card .shop-media > .cv > .ph{padding:0 16px;text-align:center;font:700 17px/1.25 var(--f-display);color:var(--ln-i,var(--ink-2))}
.mk-card.shop-card h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:12px 0 0;font-size:18px;line-height:1.25}
@media (max-width:560px){.mk-card.shop-card h3{font-size:16px}}
.mk-card.shop-card .shop-line{margin:4px 0 0;font-size:14px;line-height:1.4;-webkit-line-clamp:2;min-height:2.8em}
.mk-card.shop-card .shop-pr{margin-top:auto;padding-top:10px}
.mk-card.shop-card .shop-pr .price{margin-top:0}
/* the Shop's category bar without the rule under it (no hairlines: spacing separates the bar from the subjects) */
.mk-subnav.shop-cats{border-bottom:0}
/* the horizontal two-up cards (a shelf of one or two, the course bundles on a phone) keep the same picture shape */
.shop-shelf .shop-row-few > .shop-card,.shop-off.is-cb > .shop-card{height:auto}
@media (max-width:640px){.shop-shelf .shop-row-few > .shop-card{display:flex;flex-direction:column;grid-template-columns:minmax(0,1fr)}.shop-shelf .shop-row-few > .shop-card.shop-card > .shop-pr{margin-top:auto}}
.shop-shelf .shop-row-few > .shop-card > .shop-pr,.shop-off.is-cb > .shop-card > .shop-pr{margin-top:8px}
/* a two-up shelf (18 Oct 2026: the price sat one line lower beside a card whose title wrapped): the words take the rows
   they need, the price the last one, at the foot, so two prices side by side line up */
@media (min-width:641px){.shop-shelf .shop-row-few > .shop-card{grid-template-rows:repeat(5,auto) 1fr}.shop-shelf .shop-row-few > .shop-card > .shop-media{grid-row:1 / -1}.shop-shelf .shop-row-few > .shop-card > .shop-pr{grid-row:-2 / -1;align-self:end}}
/* a deck: a little stack of its real cards in the line's colours, the front card's words whole, never cut off */
.mk-deckstack{position:relative;display:block;width:62%;max-width:300px;aspect-ratio:5/3}
.mk-deckstack::before,.mk-deckstack::after{content:"";position:absolute;inset:0;border-radius:6px;background:var(--surface,#fff)}
.mk-deckstack::before{transform:rotate(-7deg) translate(-4%,3%);background:var(--ln-back,var(--ln-i,#15365a));opacity:.55}
/* the science line's ink is a gold that reads khaki or olive as a card behind (coordinator, 18 Oct 2026): its back card is a light cobalt */
[data-line="sci"]{--ln-back:#8fa9e0}
.mk-deckstack::after{transform:rotate(4deg) translate(3%,-2%);background:#f4f6fa;box-shadow:0 2px 6px rgba(4,30,34,.14)}
.mk-card.shop-card .mk-deckstack .mk-deckface{position:relative;z-index:1;box-sizing:border-box;width:100%;height:100%;max-height:none;aspect-ratio:auto;padding:8% 9%;gap:6px;border-radius:6px;overflow:visible;
  background:#fff;color:#15365a;box-shadow:0 2px 4px rgba(4,30,34,.12),0 10px 24px rgba(4,30,34,.18)}
.mk-card.shop-card.mk-deck .shop-media > .cv{container-type:inline-size}
.mk-deckstack .mk-deckface .q{font:700 max(12px,5.4cqi)/1.2 var(--f-display);color:#15365a}
.mk-deckstack .mk-deckface .a{display:block;-webkit-line-clamp:none;overflow:visible;font-size:max(10px,4.2cqi);line-height:1.35;color:#3d5573}
/* a narrow card (two to a row on a phone): the front shows the term alone, large, rather than words too small to read */
@container (max-width:239px){.mk-deckstack{width:62%}.mk-deckstack .mk-deckface{justify-content:center}.mk-deckstack .mk-deckface .q{font-size:max(13px,8cqi);text-align:center}.mk-deckstack .mk-deckface .a{display:none}}
.mk-card.shop-card.mk-deck:hover .mk-deckstack .mk-deckface{transform:translateY(-2px)}
/* a gold-line pack's card (GCSE Science, A-level Physics): the amber panel in light mode, the same panel in its blue
   colourway in dark mode, where amber reads brown (coordinator, 18 Oct 2026; bl-market/shop-ui.php mk_card_art) */
.shop-card .cv .art.is-dk{display:none}
:root[data-theme="dark"] .shop-card .cv .art.is-lt{display:none}
:root[data-theme="dark"] .shop-card .cv .art.is-dk{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .shop-card .cv .art.is-lt{display:none}:root:not([data-theme="light"]) .shop-card .cv .art.is-dk{display:block}}
/* ---- 44 px targets (19 Oct 2026, the shell agent's mobile sweep: listing links of 23 to 38 px). A card's title link is
   stretched over the card, so the card is the target; these are the links and buttons that stand alone. */
.shop-shelf > header > a{display:inline-flex;align-items:center;min-height:44px}
.shop-cats > a{min-width:44px;justify-content:center}
main[class*="shop"] .crumbs-trail a,main[class*="shop"] .bl-crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;box-sizing:border-box}
.shop-know a.tl{display:inline-flex;align-items:center;min-height:44px}
.shop-freepack a.tl{display:inline-block;padding:13px 0;margin:-13px 0}
.shop-buyline .bl-pn .bl-pn-go,.shop-buyline .bl-pn.bl-pn-q .bl-pn-go,.shop-buy-cta .bl-pn.bl-pn-q .bl-pn-go{display:inline-flex;align-items:center;min-height:44px}
.shop-tabs button{min-height:44px}
/* a long style name wraps inside its chip at large text sizes (200% text: "Printer-friendly (black and white)" made the
   page 437 px wide on a 390 screen); a disabled button stays readable (it was 2.14:1) */
.shop-var a{max-width:100%;box-sizing:border-box}
.shop-var a span{min-width:0;overflow-wrap:anywhere}
.shop-var a .nw{white-space:normal}
.shop-item .b[disabled],.shop-item .b[aria-disabled="true"]{opacity:1;color:var(--ink-2)}
/* on the smallest phones (320 to 360 px) the title and price come up into the first screen: the pictures still swipe
   (and show "1 / 6"); the thumbnail strip and the friend beside it step aside */
@media (max-width:360px){.shop-prod-media .shop-gal-strip-wrap,.shop-prod-media .shop-friend-row{display:none}}
/* a preview that shows the top of a page only (packs/build.cjs 'partial'): it fades into its frame, with the one line
   that says why (owner, 18 Oct 2026) */
.shop-gal-main{position:relative}
.shop-gal-main.is-partial img{-webkit-mask-image:linear-gradient(#000 58%,transparent);mask-image:linear-gradient(#000 58%,transparent)}
.shop-gal-part{position:absolute;inset-inline:0;bottom:18%;text-align:center;font:600 15px/1.3 var(--f-body);color:var(--ink-2)}

/* ---- the lightbox, redesigned (owner, 18 Oct 2026: "close and zoom in as icons; improve the design of this modal as a
   whole"): one full-viewport dark scrim, no panel and no border inside it; a slim bar; the page as large as the screen
   allows with a soft shadow; round arrows just outside the page; a quiet strip of thumbnails. These rules come last
   and replace the older box, bar and stage above. The scrim is dark in both themes (a picture viewer). */
.shop-lb{position:fixed;inset:0;z-index:400;display:grid;grid-template-rows:56px minmax(0,1fr) auto;padding:0;background:rgba(6,12,22,.94);color:#f3f6fa;
  opacity:0;transition:opacity 150ms ease-out}
.shop-lb.is-in{opacity:1}
.shop-lb[hidden]{display:none}
.shop-lb-bar{display:flex;align-items:center;gap:12px;padding:6px 8px 6px 20px;min-width:0}
.shop-lb-title{flex:0 1 auto;min-width:0;margin:0;font:700 18px/1.3 var(--f-display);color:#f3f6fa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-lb-count{flex:1 0 auto;font-size:14.5px;color:rgba(243,246,250,.62);font-variant-numeric:tabular-nums;white-space:nowrap}
.shop-lb-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:#f3f6fa;cursor:pointer}
.shop-lb-ic:hover{background:rgba(255,255,255,.1)}
.shop-lb-ic:focus-visible,.shop-lb-nav:focus-visible,.shop-lb-strip button:focus-visible{outline:2px solid #5fd3dc;outline-offset:2px}
.shop-lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:8px 80px 12px;overflow:hidden;
  border-radius:0;background:none;touch-action:none}
.shop-lb-page{position:relative;display:flex;flex-direction:column;align-items:center;max-width:100%;max-height:100%;min-height:0}
.shop-lb-page img{display:block;max-width:100%;max-height:calc(100vh - 56px - 108px);width:auto;height:auto;object-fit:contain;background:#fff;
  box-shadow:0 18px 48px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);border-radius:2px;user-select:none;-webkit-user-drag:none;
  transform-origin:center center;transition:transform 150ms ease-out;cursor:zoom-in}
.shop-lb.is-zoom .shop-lb-page img{cursor:grab;transition:none}
.shop-lb.is-one .shop-lb-page img{max-height:calc(100vh - 56px - 28px)}
/* a preview that shows the top of a page only: it fades into the scrim, with the one line that says why */
.shop-lb-page.is-partial img{-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.shop-lb-part{margin:-28px 0 0;position:relative;font:600 15px/1.3 var(--f-body);color:rgba(243,246,250,.86);text-align:center}
.shop-lb-nav{position:absolute;top:50%;width:48px;height:48px;padding:0;margin-top:-24px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#f3f6fa;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;transform:none}
.shop-lb-nav:hover:not(:disabled){background:rgba(255,255,255,.22)}
.shop-lb-nav:disabled{opacity:.3;cursor:default}
.shop-lb-nav.prev{inset-inline-start:16px}.shop-lb-nav.next{inset-inline-end:16px}
.shop-lb.is-one .shop-lb-nav{visibility:hidden}
.shop-lb-foot{display:block;padding:0 16px 14px}
.shop-lb-strip{list-style:none;display:flex;justify-content:center;gap:10px;margin:0;padding:4px 2px;overflow-x:auto;scrollbar-width:none}
.shop-lb-strip::-webkit-scrollbar{display:none}
.shop-lb-strip button{padding:0;border:0;border-radius:4px;background:none;cursor:pointer;opacity:.6;outline:2px solid transparent;outline-offset:2px}
.shop-lb-strip button:hover{opacity:.9}
.shop-lb-strip button[aria-current="true"]{opacity:1;outline-color:#46a9b3}
.shop-lb-strip img{display:block;height:56px;width:auto;max-width:80px;object-fit:contain;background:#fff;border-radius:3px}
@media (max-width:640px){
  .shop-lb{grid-template-rows:52px minmax(0,1fr) auto}
  .shop-lb-bar{padding:4px 4px 4px 14px;gap:6px}
  .shop-lb-title{font-size:16px;flex:1 1 auto}
  .shop-lb-count{flex:0 0 auto}
  .shop-lb-stage{padding:4px 0 8px}
  .shop-lb-page img{max-height:calc(100vh - 52px - 96px)}
  .shop-lb-nav{display:none}
  .shop-lb-strip{justify-content:flex-start}
  .shop-lb-foot{padding:0 12px 12px}
}
@media (prefers-reduced-motion:reduce){.shop-lb,.shop-lb-page img{transition:none!important}}
html[data-motion="off"] .shop-lb,html[data-motion="off"] .shop-lb-page img{transition:none!important}

/* tab and chip rows that scroll sideways on a phone (item 15, 19 Oct 2026): one line, and a soft fade at the edge where
   more waits (bl-shop.js sets is-start / is-end / fits). A mask, not an overlay: no colour, nothing over a tab, no shift */
@media (max-width:640px){
  .shop-lands,.shop-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .shop-lands::-webkit-scrollbar,.shop-tabs::-webkit-scrollbar,.mk-subnav.shop-cats::-webkit-scrollbar{display:none}
  .shop-lands a,.shop-tabs button{flex:none;white-space:nowrap}
}
@media (max-width:959.98px){.mk-subnav.shop-cats{margin-inline:-24px;padding-inline:24px}}
@media (max-width:640px){.mk-subnav.shop-cats{margin-inline:-16px;padding-inline:16px}}
[data-shop-fade]{--fl:24px;--fr:24px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
[data-shop-fade].is-start{--fl:0px}
[data-shop-fade].is-end{--fr:0px}
[data-shop-fade].fits{-webkit-mask-image:none;mask-image:none}

/* item 16 (coordinator, 20 Oct 2026): a study pack's card is for choosing what to buy. The cover in front, the real
   free sample page behind it (never a worked answer); the level in plain words; two or three facts from the pack's own
   build; the price, "Included in Plus" in words, and "Try a page free". No pills, no prose cut off mid-sentence. */
.shop-card.has-panel .cv:has(.shop-pgback){position:relative;overflow:hidden;background:var(--ln-t,var(--sunk))}
.mk-card.shop-card .shop-media > .cv > .shop-pgback{position:absolute;top:7%;right:5%;width:38%;height:auto;aspect-ratio:900/1273;object-fit:cover;object-position:50% 0;border-radius:3px;background:#fff;box-shadow:0 6px 18px rgba(10,24,40,.22);transform:rotate(4deg)}
.mk-card.shop-card .shop-media > .cv:has(.shop-pgback) > .art.panel{position:absolute;left:5%;bottom:8%;width:68%;height:auto;aspect-ratio:186/118.8;border-radius:6px;box-shadow:0 8px 22px rgba(10,24,40,.28)}
.mk-card.mk-house.has-panel:hover .cv:has(.shop-pgback) img.panel{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.mk-card.mk-house.has-panel:hover .cv:has(.shop-pgback) img.panel{transform:none}}
.shop-lvl{margin:2px 0 0;font:600 13.5px/1.35 var(--f-body);color:var(--ln-i,var(--ink-2))}
.shop-facts-l{list-style:none;margin:6px 0 0;padding:0;display:grid;align-content:start;gap:2px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.shop-grid:not(.shop-row-few) > .shop-card .shop-facts-l{min-height:4.2em}
.shop-inplus{font:600 13.5px/1.3 var(--f-body);color:var(--ink-3)}
.shop-card .shop-pr{row-gap:2px}
.shop-try{display:inline-flex;align-items:center;min-height:44px;margin-inline-start:auto;font-weight:700;font-size:14.5px;color:var(--study-ink);text-decoration:underline;text-underline-offset:3px}
.shop-try:hover{text-decoration-thickness:2px}
/* a kit at the head of the shelf, as a wide card: the fanned covers beside what is in it */
.shop-kits{display:grid;gap:16px;margin:0 0 20px}
.shop-card.shop-kit{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:10px 12px 14px;border-radius:var(--r3,26px);background:var(--ln-t,var(--sunk))}
.shop-card.shop-kit .cv{aspect-ratio:16/9;background:none}
.shop-card.shop-kit .cv .art.fan{width:100%;height:100%;object-fit:contain}
.shop-kit-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.shop-kit-body h3{margin:0}
.shop-kit-parts{margin:0;font-size:15px;line-height:1.4;color:var(--ink-2)}
.shop-kit-go{align-self:flex-start;min-height:44px;margin-top:8px}
/* the kit's wide card on a wide screen: one strip, covers | what is in it | price | link (coordinator, item 16) */
@media (min-width:960px){
  .shop-kits{margin-bottom:14px}
  .shop-card.shop-kit{grid-template-columns:150px minmax(0,1fr);align-items:center;gap:16px;padding:6px 16px 6px 8px}
  .shop-card.shop-kit .cv{aspect-ratio:auto;height:120px}
  /* the fan fills the 150 x 120 strip (item 17: it sat at about 60 px, contained in a square with its margins) */
  .mk-card.shop-card.shop-kit .shop-media > .cv > .art.fan{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
  .shop-kit-body{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:18px;row-gap:0;align-items:center}
  .shop-kit-body > h3,.shop-kit-body > .shop-by,.shop-kit-body > .shop-kit-parts,.shop-kit-body > .shop-lvl{grid-column:1;margin:0}
  .shop-kit-body > h3{font-size:17px}
  .shop-kit-body > .shop-kit-parts{font-size:14px;line-height:1.35}
  .shop-kit-body > .shop-pr{grid-column:2;grid-row:1 / span 4;margin:0}
  .shop-kit-body > .shop-kit-go{grid-column:3;grid-row:1 / span 4;margin:0}
  .shop-kit-body > .shop-save-line{grid-column:1 / span 3;margin:2px 0 0}
  .shop-kit-body > .shop-pr,.shop-kit-body > .shop-kit-go{align-self:center}
}

/* item 16: every card's price row is one line: the amount with "Included in Plus" under it, the link at the right
   ("Try a page free" on a pack, "See what is inside" on a kit), so the price rows line up across the grid */
.shop-card .shop-pr:has(.shop-try){flex-wrap:nowrap;align-items:center}
.shop-card .shop-pr:has(.shop-try) .price{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1.25}
.shop-card .shop-pr:has(.shop-try) .shop-try{white-space:nowrap}
/* item 16: on a phone the count above, then Filters and Sort on one row */
@media (max-width:640px){
  .shop-bar{gap:8px 10px}
  .shop-bar > .shop-count{flex-basis:100%;margin:0}
  .shop-bar > .shop-sort{margin-inline-start:auto}
}
/* a narrow card (a phone's two columns, a shelf on an item page): the link takes its own line rather than pushing the
   page sideways (shop2-check no sideways scroll at 320 and 390) */
@media (max-width:560px){.shop-card .shop-pr:has(.shop-try){flex-wrap:wrap}.shop-card .shop-pr:has(.shop-try) .shop-try{white-space:normal;margin-inline-start:0}}
.shop-card{min-width:0}
/* the Shop home's short rows (item 17): four across from 1100 px; three from 768 px, so no row ends with one card alone */
@media (min-width:768px) and (max-width:1099.98px){.shop-home-v3 .shop-row-narrow > .shop-card:nth-child(n+4){display:none}}
.shop-home-v3 .shop-head{padding-top:22px}
/* the one card's price (item 17): the price, then "Included in Plus" under it, as on a study pack's card */
.shop-card .shop-pr.is-stack .price{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1.25}