/* Shop (shop.mjs): the logo shop sits on a white panel. Buttons are rounded rectangles (10px, like the nav bar items),
   no arrows inside buttons. Yellow is kept for the one main action (Buy). */
.shop-page{--ink:#0b0b0b;--sub:#5f5f5f;--mute:#8a8a8a;--line:#ececea;--tint:#f4f4f2;--tint2:#ebebe8;background:#fff;color:var(--ink)}
.shop-page a{color:inherit}
.shop-page h1,.shop-page h2{text-wrap:balance}
/* section tabs on white */
.shop-page .filters{background:none}
.shop-page .sec-tabs{border-color:rgba(0,0,0,.1)}
.shop-page .sec-tab{color:#a3a3a3}
.shop-page a.sec-tab:hover{color:#3a3a3a}
.shop-page .sec-tab.is-on{color:#000}
/* the yellow "new" next to Visuals is for dark pages; on the white shop panel it is black (Vadim, Oct 29) */
.shop-page .sec-tab .new{color:#0b0b0b!important}
.has-dock .shop-page .filters .sec-tab{color:#8f8f8f}
.has-dock .shop-page .filters a.sec-tab:hover{color:var(--ink);background:var(--tint)}
.has-dock .shop-page .filters .sec-tab.is-on{color:var(--ink);background:var(--tint)}
.has-dock .shop-page .filters .sec-tab.is-on sup,.shop-page .filters .sec-tab sup{color:#9a9a9a}
.shop-page .result-count{color:var(--mute)}

/* head */
.shop-head{max-width:820px;margin:46px auto 44px;text-align:center;padding:0 12px}
.shop-head h1{margin:0;font-size:clamp(42px,6.4vw,80px);line-height:.98;letter-spacing:-.05em;font-weight:700}
.shop-lede{margin:18px auto 0;max-width:56ch;font-size:18px;line-height:1.55;color:#4a4a4a;text-wrap:pretty}
.shop-facts{list-style:none;margin:30px auto 0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.shop-facts li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:12px 18px 12px 14px;border-radius:12px;background:var(--tint)}
.shop-facts svg{grid-row:span 2;width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.shop-facts b{font-size:14.5px;letter-spacing:-.01em}
.shop-facts span{font-size:13px;color:var(--sub)}
.shop-soon{display:inline-block;margin:22px 0 0;padding:10px 16px;border-radius:10px;background:var(--tint);color:#3a3a3a;font-size:14px;font-weight:600}

/* tools */
.shop-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:0 0 22px}
.shop-chips{display:flex;gap:8px;flex-wrap:wrap}
.shop-chip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 15px;border-radius:10px;background:var(--tint);color:var(--ink);font-size:14px;font-weight:600;transition:background .15s}
.shop-chip span{color:var(--mute);font-weight:500;font-variant-numeric:tabular-nums}
.shop-chip:hover{background:var(--tint2)}
.shop-chip[aria-pressed=true]{background:var(--ink);color:#fff}
.shop-chip[aria-pressed=true] span{color:rgba(255,255,255,.55)}
.shop-chip:focus-visible,.shop-find:focus-within,.shop-btn:focus-visible,.shop-card:focus-visible,.shop-page summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shop-find{display:flex;align-items:center;gap:8px;box-sizing:border-box;width:320px;max-width:100%;height:42px;padding:0 14px;border-radius:10px;background:var(--tint)}
.shop-find svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--mute);stroke-width:2;stroke-linecap:round}
.shop-find input{all:unset;flex:1;min-width:0;font-size:14px;color:var(--ink)}
.shop-find input::placeholder{color:var(--mute)}

/* grid */
.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px}
.shop-card{display:flex;flex-direction:column;gap:12px;text-decoration:none;min-width:0}
.shop-card[hidden]{display:none}
.shop-media{position:relative;display:block;aspect-ratio:1/1;max-width:100%;border-radius:14px;overflow:hidden;background:var(--bg,#f2f2f2);isolation:isolate}
.shop-media:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);pointer-events:none}
.shop-media img,.shop-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .25s ease}
.shop-media video{opacity:0}
.shop-card.is-playing .shop-media video{opacity:1}
.shop-card:hover .shop-media img,.shop-card:hover .shop-media video{transform:scale(1.035)}
.shop-tag,.shop-sold{position:absolute;left:12px;top:12px;z-index:2;height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:8px;background:rgba(255,255,255,.94);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:-.01em}
.shop-sold{display:none;background:var(--ink);color:#fff}
.is-sold .shop-sold{display:inline-flex}
.is-sold .shop-tag{display:none}
.shop-card.is-sold .shop-media img{opacity:.4;filter:grayscale(.7)}
.shop-cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0;padding:0 2px}
.shop-cap strong{flex:1 1 auto;font-size:16px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.shop-kind{flex:none;font-size:13px;color:var(--mute)}
.shop-price{flex:none;font-size:15px;color:var(--sub);font-variant-numeric:tabular-nums}
.shop-card.is-sold .shop-price{text-decoration:line-through;color:#aaa}
.shop-empty{text-align:center;color:var(--mute);padding:48px 0 8px;font-size:15px}

/* sections */
.shop-sec{margin:120px 0 0}
.shop-sec-head{display:flex;flex-direction:column;gap:8px;margin:0 0 26px}
.shop-sec-head.is-row{flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px}
.shop-sec-head h2{margin:0;font-size:clamp(28px,3.4vw,40px);line-height:1.05;letter-spacing:-.035em;font-weight:700}
.shop-sec-head p{margin:0;font-size:16px;line-height:1.5;color:var(--sub);max-width:60ch}
.shop-sec-head a{color:var(--ink);text-underline-offset:3px}
.shop-link{font-size:15px;font-weight:600;color:var(--ink);text-underline-offset:3px}

/* how it works */
.shop-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:s}
.shop-steps li{counter-increment:s;background:var(--tint);border-radius:16px;padding:22px 22px 26px;display:flex;flex-direction:column;gap:8px;min-width:0}
.shop-steps li:before{content:counter(s);width:32px;height:32px;border-radius:10px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;margin-bottom:10px}
.shop-steps li:last-child:before{background:var(--yellow,#F5E900);color:#000}
.shop-steps b{font-size:17px;letter-spacing:-.015em}
.shop-steps span{font-size:14.5px;line-height:1.5;color:var(--sub)}

/* paying in parts */
.shop-parts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:p}
.shop-parts li{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 20px 22px;border-radius:16px;background:var(--tint);min-width:0}
.shop-parts li:after{content:"";position:absolute;top:31px;left:calc(100% - 6px);width:24px;height:2px;background:#d9d9d4;z-index:1}
.shop-parts li:last-child:after{display:none}
.shop-parts-when{display:inline-flex;align-self:flex-start;align-items:center;height:26px;padding:0 10px;border-radius:8px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:700}
.shop-parts li.is-last .shop-parts-when{background:var(--yellow,#F5E900);color:#000}
.shop-parts b{margin-top:8px;font-size:24px;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.shop-parts p{margin:0;font-size:14px;line-height:1.5;color:var(--sub)}
.shop-parts-notes{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.shop-parts-notes li{font-size:14.5px;line-height:1.55;color:var(--sub);padding-left:16px;position:relative}
.shop-parts-notes li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:#c4c4bf}
.shop-parts-notes b{color:var(--ink);font-weight:600}
.shop-plan small a{color:var(--ink);font-weight:600;text-underline-offset:2px;white-space:nowrap}
.shop-right .shop-parts-sec{margin-top:72px}

/* what's in the pack */
.shop-pack-box{display:grid;grid-template-columns:minmax(0,1fr);gap:0;background:#0d0d0d;color:#fff;border-radius:20px;padding:10px;overflow:hidden}
.shop-zip{display:flex;align-items:center;gap:14px;padding:16px 16px 18px}
.shop-zip-ic{width:46px;height:46px;border-radius:12px;background:var(--yellow,#F5E900);display:inline-flex;align-items:center;justify-content:center;flex:none}
.shop-zip-ic svg{width:26px;height:26px;margin-left:-1px;fill:none;stroke:#000;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the icon box is a span too: keep it a centred flex box, not the block style of the file count line below */
.shop-zip .shop-zip-ic{display:inline-flex;margin-top:0}
.shop-zip b{display:block;font-size:17px;letter-spacing:-.01em;word-break:break-all}
.shop-zip span{display:block;margin-top:3px;font-size:13.5px;color:#9a9a9a}
.shop-files{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.shop-files li{display:flex;align-items:center;gap:14px;padding:16px;border-radius:12px;background:#181818;min-width:0}
.shop-files i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:52px;height:40px;border-radius:9px;background:#262626;color:#fff;font-style:normal;font-size:13px;font-weight:700;letter-spacing:.02em}
.shop-files i.is-mp4{background:var(--yellow,#F5E900);color:#000}
.shop-files b{display:block;font-size:15px;letter-spacing:-.01em}
.shop-files span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:#9a9a9a}
.shop-vers{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 16px 12px}
.shop-vers span{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 9px;border-radius:9px;background:#181818;font-size:13.5px;font-weight:600}
.shop-vers i{width:16px;height:16px;border-radius:5px;display:block}
.shop-vers .v0 i{background:conic-gradient(from 200deg,#ff5a36,#f5e900,#2fd27a,#3b82f6,#a855f7,#ff5a36)}
.shop-vers .v1 i{background:#000;box-shadow:inset 0 0 0 1px #3a3a3a}
.shop-vers .v2 i{background:#fff}
.shop-vers em{font-style:normal;font-size:13.5px;color:#9a9a9a;margin-left:6px}

/* questions */
.shop-faq-list{display:grid;gap:8px;max-width:860px}
.shop-faq-list details{background:var(--tint);border-radius:14px;padding:0 22px}
.shop-faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 0;font-size:17px;font-weight:600;letter-spacing:-.015em}
.shop-faq-list summary::-webkit-details-marker{display:none}
.shop-faq-list summary:after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 12px no-repeat;transition:transform .2s ease}
.shop-faq-list details[open] summary:after{transform:rotate(45deg)}
.shop-faq-list p{margin:-4px 0 20px;max-width:66ch;font-size:15.5px;line-height:1.6;color:#4a4a4a}
.shop-faq-list p a{color:var(--ink);text-underline-offset:3px}

/* one logo */
.shop-crumbs{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--mute);margin:20px 0 22px;min-width:0}
.shop-crumbs > a{color:var(--ink);text-decoration:none;font-weight:600}
.shop-crumbs > a:hover{text-decoration:underline;text-underline-offset:3px}
.shop-crumbs > span:not(.shop-pn){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.shop-crumbs > span:not(.shop-pn):before{content:"/";margin-right:10px;color:#c4c4c4}
.shop-pn{margin-left:auto;display:flex;gap:6px;flex:none}
.shop-pn a{display:inline-flex;align-items:center;height:34px;padding:0 13px;border-radius:10px;background:var(--tint);color:var(--ink);text-decoration:none;font-weight:600;font-size:13.5px;transition:background .15s}
.shop-pn a:hover{background:var(--tint2)}
/* one logo: the logo stays in view on the left (sticky, sized to fit the screen), everything else scrolls on the right */
.shop-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:start}
.shop-left{position:sticky;top:84px;min-width:0}
.shop-left .shop-stage{width:100%;max-width:calc(100vh - 200px);min-width:min(100%,420px)}
.shop-right{min-width:0}
.shop-right .shop-sec{margin-top:88px}
.shop-right .shop-sec-head{margin-bottom:20px}
.shop-right .shop-sec-head h2{font-size:clamp(26px,2.4vw,32px)}
.shop-right .shop-files{grid-template-columns:repeat(2,minmax(0,1fr))}
.shop-right .shop-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.shop-right .shop-faq-list{max-width:none}
.shop-stage{position:relative;border-radius:20px;overflow:hidden;background:var(--bg,#f2f2f2);aspect-ratio:1/1;max-width:100%}
.shop-stage:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);pointer-events:none}
.shop-big{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.shop-item.is-sold .shop-stage{filter:grayscale(.75);opacity:.6}
.shop-sizes{display:flex;align-items:flex-end;flex-wrap:wrap;gap:22px;padding:20px 22px;border-radius:16px;background:var(--tint)}
.shop-sizes figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:9px}
.shop-sizes figure span{display:block;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .23);overflow:hidden;background:var(--bg);box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 1px rgba(0,0,0,.05)}
.shop-sizes figure img{display:block;width:100%;height:100%;object-fit:cover}
.shop-sizes figcaption{font-size:12.5px;color:var(--sub);white-space:nowrap}
.shop-sizes p{flex:1 1 180px;margin:0 0 2px;font-size:13px;line-height:1.45;color:var(--mute);align-self:center}
.shop-buy{display:flex;flex-direction:column;padding:4px 0 0;min-width:0}
.shop-kicker{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600;color:var(--sub)}
.shop-kicker span{color:var(--mute);font-weight:500}
.shop-kicker span:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:#c4c4c4;margin:0 8px 2px 0;vertical-align:middle}
.shop-buy h1{margin:12px 0 0;font-size:clamp(40px,4.6vw,64px);line-height:.98;letter-spacing:-.05em;font-weight:700}
.shop-line{margin:16px 0 0;font-size:18px;line-height:1.5;color:#3d3d3d;text-wrap:pretty}
.shop-good{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:18px 0 0}
.shop-good span{font-size:13px;color:var(--mute);margin-right:4px}
.shop-good b{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:8px;background:var(--tint);font-size:13px;font-weight:600}
.shop-tagrow{margin-top:10px}
.shop-tagrow a{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:500;color:var(--sub);text-decoration:none;transition:color .15s,box-shadow .15s}
.shop-tagrow a:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--sub)}
/* colour ideas on the logo page (shop.mjs ideasBlock): small swatches that swap the big image */
.shop-ideas{display:grid;gap:10px;margin:22px 0 0}
.shop-ideas > span{font-size:13px;color:var(--mute)}
.shop-ideas-row{display:flex;flex-wrap:wrap;gap:8px}
.shop-idea{appearance:none;padding:0;border:0;width:56px;height:56px;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--tint);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .15s ease,box-shadow .15s ease}
.shop-idea img{display:block;width:100%;height:100%;object-fit:cover}
.shop-idea:hover{transform:translateY(-2px)}
.shop-idea.is-on{box-shadow:0 0 0 2px var(--ink)}
.shop-idea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shop-ideas small{font-size:12.5px;line-height:1.45;color:var(--mute);max-width:46ch}
@media (max-width:760px){.shop-idea{width:48px;height:48px;border-radius:10px}}
@media (prefers-reduced-motion:reduce){.shop-idea{transition:none}.shop-idea:hover{transform:none}}
.shop-cta{margin:28px 0 0;padding:28px 0 0;border-top:1px solid var(--line)}
/* pay at once or in parts */
.shop-plans{border:0;margin:0 0 14px;padding:0;min-width:0;display:grid;gap:8px}
.shop-plans legend{float:left;width:100%;margin:0 0 10px;padding:0;font-size:13px;font-weight:600;color:var(--sub)}
.shop-plan{position:relative;display:grid;gap:5px;padding:16px 18px 16px 50px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;transition:box-shadow .15s,background .15s}
.shop-plan:hover{box-shadow:inset 0 0 0 1.5px #cfcfca}
.shop-plan input{appearance:none;-webkit-appearance:none;position:absolute;left:18px;top:19px;width:18px;height:18px;margin:0;border-radius:50%;box-shadow:inset 0 0 0 2px #c4c4bf;background:#fff;cursor:pointer;transition:box-shadow .15s}
.shop-plan input:checked{box-shadow:inset 0 0 0 5.5px var(--ink)}
.shop-plan input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shop-plan:has(input:checked){box-shadow:inset 0 0 0 2px var(--ink);background:#fbfbf9}
.shop-plan-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-width:0}
.shop-plan b{font-size:16px;letter-spacing:-.01em}
.shop-plan em{flex:none;font-style:normal;font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.shop-plan em i{font-style:normal;font-size:13px;font-weight:600;letter-spacing:0;color:var(--sub);margin-left:2px}
.shop-plan small{font-size:13px;line-height:1.45;color:var(--sub)}
.shop-cap .shop-price{font-size:14px;font-weight:600;color:var(--ink)}
.shop-amount{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;font-size:40px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.shop-amount span{font-size:14px;font-weight:600;letter-spacing:0;color:var(--sub)}
.shop-btn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:58px;border-radius:10px;background:var(--yellow,#F5E900);color:#000;font-size:17px;font-weight:700;letter-spacing:-.01em;text-decoration:none;transition:filter .15s,transform .15s}
.shop-btn:hover{filter:brightness(.95)}
.shop-btn:active{transform:translateY(1px)}
.shop-btn[disabled],.shop-btn.is-off{cursor:default;background:#efefec;color:var(--mute);filter:none;transform:none}
.shop-btn.is-soon{color:var(--ink)}
.shop-btn.is-soon span{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;background:var(--ink);color:#fff;font-size:12px;font-weight:700}
.shop-btn.is-dark{background:var(--ink);color:#fff}
.shop-fine{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--mute);text-align:center}
.shop-gets{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:16px}
.shop-gets li{display:flex;gap:14px;align-items:flex-start}
.shop-gets svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.shop-gets b{display:block;font-size:15.5px;letter-spacing:-.01em}
.shop-gets span{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--sub)}
.shop-ask{margin:30px 0 0;font-size:14.5px;color:var(--sub)}
.shop-ask a{color:var(--ink);text-underline-offset:3px;font-weight:600}
.shop-by{margin:8px 0 0;font-size:14.5px;color:var(--sub)}
.shop-by a{color:var(--ink);text-underline-offset:3px}
.shop-more{margin-top:100px;max-width:none}

/* one yellow button per screen: while the yellow Buy button is on screen, the nav bar button turns white */
.sec-dock.shop-quiet .sd-ext{background:#f2f2f2!important;color:#0d0d0d!important}

/* checkout preview (draft only: Stripe isn't connected yet) */
.shop-dlg{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,10,10,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .2s ease}
.shop-dlg.on{opacity:1}
.shop-dlg-box{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;background:#fff;color:#0b0b0b;border-radius:20px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.35);transform:translateY(10px) scale(.98);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.shop-dlg.on .shop-dlg-box{transform:none}
.shop-dlg-flag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;background:#0b0b0b;color:#fff;font-size:12px;font-weight:700}
.shop-dlg h2{margin:14px 0 0;font-size:26px;letter-spacing:-.03em;line-height:1.1}
.shop-dlg-item{display:flex;align-items:center;gap:14px;margin:18px 0 0;padding:12px;border-radius:14px;background:#f4f4f2}
.shop-dlg-item span{width:64px;height:64px;border-radius:12px;overflow:hidden;flex:none;background:var(--bg)}
.shop-dlg-item img{width:100%;height:100%;object-fit:cover;display:block}
.shop-dlg-item b{display:block;font-size:17px;letter-spacing:-.01em}
.shop-dlg-item em{display:block;font-style:normal;font-size:13.5px;color:#5f5f5f;margin-top:2px}
.shop-dlg ol{margin:18px 0 0;padding:0 0 0 20px;display:grid;gap:8px;font-size:14.5px;line-height:1.5;color:#3d3d3d}
.shop-dlg-note{margin:16px 0 0;font-size:13.5px;line-height:1.5;color:#6b6b6b}
.shop-dlg-acts{display:grid;gap:8px;margin:20px 0 0}
.shop-dlg-acts .shop-btn{height:52px;font-size:16px}
.shop-dlg-acts .is-ghost{background:#f1f1ee;color:#0b0b0b}
.shop-toast{position:fixed;left:50%;bottom:110px;z-index:210;transform:translate(-50%,10px);opacity:0;pointer-events:none;background:#0b0b0b;color:#fff;font-size:14px;font-weight:600;padding:12px 16px;border-radius:10px;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px);text-align:center}
.shop-toast.on{opacity:1;transform:translate(-50%,0)}

/* thanks */
.shop-done{max-width:640px;margin:56px auto 40px;text-align:center;display:flex;flex-direction:column;align-items:center}
.shop-done .shop-kicker{justify-content:center;margin-bottom:12px}
.shop-done h1{margin:0;font-size:clamp(36px,5vw,58px);letter-spacing:-.045em;line-height:1;font-weight:700}
.shop-done .shop-lede{font-size:17px}
.shop-done-media{width:100%;max-width:300px;margin:0 0 28px}
.shop-done-media span{display:block;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--bg,#f2f2f2);box-shadow:0 20px 50px rgba(0,0,0,.12)}
.shop-done-media img{width:100%;height:100%;object-fit:cover;display:block}
.shop-dl{display:grid;gap:10px;width:100%;max-width:400px;margin:28px 0 0}
.shop-dl small{display:block;font-size:12.5px;color:var(--mute)}
.shop-dl .shop-btn.is-ghost{background:#f1f1ee;color:#0b0b0b}
.shop-dl .shop-btn.is-ghost:hover{background:#e8e8e4}
.shop-done .shop-fine{margin-top:12px}
.shop-next{width:100%;margin:40px 0 0;padding:24px;border-radius:18px;background:var(--tint);text-align:left}
.shop-next h2{margin:0 0 14px;font-size:20px;letter-spacing:-.02em}
.shop-next ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.shop-next li{display:flex;justify-content:space-between;gap:16px;font-size:14.5px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.shop-next li:last-child{border-bottom:0;padding-bottom:0}
.shop-next li[hidden]{display:none}
.shop-next li span{color:var(--sub);text-align:right}
.shop-next p{margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--sub)}
.shop-done .shop-ask{margin-top:28px}
.shop-done .shop-link{margin-top:14px}

@media (max-width:1180px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-files{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1100px){.shop-item{column-gap:32px}.shop-buy h1{font-size:44px}.shop-right .shop-files,.shop-right .shop-steps,.shop-right .shop-parts{grid-template-columns:minmax(0,1fr)}.shop-right .shop-parts li:after{display:none}}
@media (max-width:760px){.shop-parts{grid-template-columns:minmax(0,1fr)}.shop-parts li:after{display:none}}
@media (max-width:980px){.shop-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-sizes{gap:16px;padding:16px}}
@media (max-width:760px){
  .shop-item{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .shop-left{position:static}
  .shop-left .shop-stage{max-width:none;min-width:0}
  .shop-right .shop-sec{margin-top:64px}
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .shop-head{margin:28px auto 30px}
  .shop-head h1{font-size:44px}
  .shop-lede{font-size:16px}
  .shop-facts{gap:8px}
  .shop-facts li{flex:1 1 100%;padding:11px 14px}
  .shop-tools{gap:10px}
  .shop-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:2px;width:100%}
  .shop-chips::-webkit-scrollbar{display:none}
  .shop-chip{flex:none;height:40px}
  .shop-find{width:100%}
  .shop-cap{flex-direction:column;align-items:flex-start;gap:2px}
  .shop-cap strong{font-size:14.5px;width:100%}
  .shop-kind{font-size:12.5px}
  .shop-media{border-radius:12px}
  .shop-tag,.shop-sold{left:8px;top:8px;height:22px;padding:0 8px;font-size:11px}
  .shop-sec{margin-top:80px}
  .shop-steps{grid-template-columns:1fr}
  .shop-steps li{padding:18px 18px 20px}
  .shop-files{grid-template-columns:1fr}
  .shop-pack-box{border-radius:16px;padding:8px}
  .shop-faq-list details{padding:0 16px}
  .shop-faq-list summary{font-size:16px;padding:16px 0}
  .shop-crumbs{margin:14px 0 16px}
  .shop-pn a{height:32px;padding:0 11px}
  .shop-stage{border-radius:16px}
  .shop-sizes{gap:16px;padding:16px}
  .shop-sizes p{flex-basis:100%}
  .shop-buy h1{font-size:44px}
  .shop-line{font-size:16.5px}
  .shop-cta{margin-top:22px;padding-top:22px}
  .shop-more{margin-top:70px}
  .shop-done{margin-top:30px}
  .shop-next{padding:18px}
}
@media (prefers-reduced-motion:reduce){.shop-media img,.shop-media video,.shop-dlg,.shop-dlg-box,.shop-toast{transition:none}.shop-card:hover .shop-media img,.shop-card:hover .shop-media video{transform:none}}

/* One logo, v3: like the sponsor page, the logo and its details sit in a dark grey box (max 1216px) that rises over the
   bottom of the BRRRANDING wordmark. The logo stays sticky on the left inside the box; its column is as wide as the
   screen height allows, and the right column takes the rest, so there is never a dead gap between the two. */
main.shop-item-page.page{background:transparent;border-radius:0;padding-top:0}
.shop-box{position:relative;z-index:2;box-sizing:border-box;max-width:1216px;margin:calc(8px - 19.7vw) auto 0;padding:26px 48px 64px;border-radius:32px;background:#1c1c1c;color:#fff;box-shadow:0 -10px 40px rgba(0,0,0,.25);
  --ink:#fff;--sub:#b4b4b4;--mute:#8c8c8c;--line:#2e2e2e;--tint:#262626;--tint2:#323232}
@keyframes shopBoxIn{from{opacity:0;transform:translateY(80px) scale(.95)}to{opacity:1;transform:none}}
.js .shop-box{animation:shopBoxIn .9s cubic-bezier(.22,.61,.36,1) .25s both;transform-origin:50% 0}
.shop-box .shop-crumbs{margin:0 0 26px}
.shop-box .shop-crumbs > span:not(.shop-pn):before{color:#4a4a4a}
.shop-box .shop-item{grid-template-columns:min(calc(50% - 24px),calc(100vh - 170px)) minmax(0,1fr);column-gap:48px}
.shop-box .shop-left{top:76px}
.shop-box .shop-left .shop-stage{max-width:none;min-width:0}
.shop-box .shop-stage{border-radius:22px}
.shop-box .shop-stage:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.shop-box .shop-buy{padding-top:10px}
.shop-box .shop-line{color:#d2d2d2}
.shop-box .shop-plan{background:#222}
.shop-box .shop-plan:hover{box-shadow:inset 0 0 0 1.5px #464646}
.shop-box .shop-plan:has(input:checked){background:#262626;box-shadow:inset 0 0 0 2px #fff}
.shop-box .shop-plan input{background:#1c1c1c;box-shadow:inset 0 0 0 2px #5a5a5a}
.shop-box .shop-plan input:checked{box-shadow:inset 0 0 0 5.5px #fff}
.shop-box a.shop-btn,.shop-box .shop-btn{color:#000}
.shop-box .shop-btn[disabled],.shop-box .shop-btn.is-off{background:#2a2a2a;color:#8c8c8c}
.shop-box .shop-btn.is-dark{background:#fff;color:#000}
.shop-box .shop-btn.is-soon{color:#000}
.shop-box .shop-btn.is-soon span{background:#000;color:#fff}
.shop-box .shop-steps li:before{color:#000}
.shop-box .shop-steps li:last-child:before{background:var(--yellow,#F5E900)}
.shop-box .shop-parts-when{color:#000}
.shop-box .shop-parts li:after{background:#3a3a3a}
.shop-box .shop-parts-notes li:before{background:#5a5a5a}
.shop-box .shop-pack-box{background:#121212}
.shop-box .shop-faq-list p{color:#bdbdbd}
.shop-box .shop-sizes figure span{box-shadow:0 1px 2px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.06)}
/* more logos: back on the white shop panel under the box */
.shop-item-page .shop-more{margin:24px 0 0;padding:56px calc(var(--pad) - var(--gutter)) 24px;background:#fff;border-radius:var(--surface-radius)}
.shop-item-page .shop-more > *{max-width:1216px;margin-left:auto;margin-right:auto}
@media (max-width:1100px){.shop-box{padding:24px 32px 52px;border-radius:28px}.shop-box .shop-item{column-gap:32px}}
@media (max-width:760px){
  .shop-box{padding:16px 16px 40px;border-radius:22px;margin-top:calc(8px - 13.6vw)}
  .shop-box .shop-item{grid-template-columns:minmax(0,1fr)}
  .shop-box .shop-crumbs{margin:0 0 16px}
  .shop-item-page .shop-more{padding:40px 16px 16px}
}
@media (prefers-reduced-motion:reduce){.js .shop-box{animation:none}}

/* Second Buy button under the sticky logo (shop.mjs stickBlock, shown by shop.js once the main Buy button has scrolled
   away). Its space is always kept so the logo never moves; on short screens the logo column gets smaller so the logo and
   the button both fit above the floating nav bar (about 150px from the bottom). Phones get the button in the nav bar. */
.shop-stick{display:none}
@media (min-width:761px){
  .shop-box .shop-item.has-stick{grid-template-columns:min(calc(50% - 24px),calc(100vh - 332px)) minmax(0,1fr)}
  .shop-box .shop-stick{display:grid;gap:8px;margin-top:14px;visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
  .shop-box .shop-stick.is-on{visibility:visible;opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease,visibility 0s}
  .shop-box .shop-stick .shop-btn{height:54px}
  .shop-box .shop-stick small{font-size:13px;line-height:18px;color:var(--mute);text-align:center}
}
.sec-dock .sd-buy{display:none!important}
.sec-dock.shop-buying .sd-ext:not(.sd-buy){display:none!important}
.sec-dock.shop-buying .sd-buy{display:inline-flex!important;animation:shopDockBuy .25s ease both}
@keyframes shopDockBuy{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.shop-box .shop-stick,.shop-box .shop-stick.is-on{transition:none}.sec-dock.shop-buying .sd-buy{animation:none}}