/* 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{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"]{color:var(--ink);border-bottom-color:var(--study)}

/* 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-right: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;left:0;right: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 ease,visibility 0s linear .24s}
  .shop-filters:target,.shop-filters.is-open{transform:none;visibility:visible;transition:transform .24s ease}
  .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 ease}
  .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-right:auto}
.shop-filter-btn{min-height:42px;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:42px;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;left:0;right: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: under the picture, shown on hover or keyboard focus with a mouse; always there on touch screens */
.shop-ql{position:relative;z-index:2;align-self:flex-start;margin:8px 0 0;min-height:36px;padding:0 12px;border:0;border-radius:10px;background:var(--sunk);color:var(--ink);font:700 13.5px/1 var(--f-body);cursor:pointer}
.shop-ql:hover{background:var(--study-tint)}
.shop-ql:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.shop-ql{position:absolute;top:12px;right:12px;margin:0;opacity:0;transition:opacity .15s}.shop-card:hover .shop-ql,.shop-ql:focus-visible{opacity:1}}
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-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-left:12px}
.shop-var a img{width:30px;height:40px;object-fit:contain;background:#fff;border-radius:2px}
.shop-var a i{margin-left: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(--ink);margin-right: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:left;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 ease}
.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{left:10px}.shop-lb-nav.next{right: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}}

/* ---- 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%,180px),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}
.sk-cos .b{margin-top:auto;min-height:42px}
.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%;background:var(--bg);color:var(--fg);font:700 26px/1 var(--f-display);
  box-shadow:0 0 0 4px var(--r1),0 0 0 7px var(--r2)}
.sk-av b{font-weight:700}
.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:left;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-left:10px}.sk-table th:first-child{padding-left: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}
.sk-reveal{margin:24px 0 0;padding:22px;border-radius:18px;background:var(--gold-tint);text-align:center}
.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(--gold-tint)}
.sp-small{font-size:14px;color:var(--ink-3)}
.shop-lb-foot{display:grid;gap:10px}
.shop-sparks-strip{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:44px 0 0;padding:20px 22px;border-radius:18px;background:var(--gold-tint)}
.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 */