/* ══════════════════════════════════════════════════════════════
   MJÚK — the two configurators
   1. Pompom chooser: a <dialog> opened when a plain hat goes in the bag.
   2. Made for you: her model → fabric → the blanket it is cut from → fur → trim → one price.
   Uses the shell's own tokens; adds nothing to the palette.
   ══════════════════════════════════════════════════════════════ */

/* ── shared field primitives ─────────────────────────────────── */
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;inset:0;opacity:0;pointer-events:none}
.seg span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);
  font-family:var(--ff-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  background:transparent;transition:border-color .24s var(--ease),background .24s var(--ease),color .24s var(--ease),transform .16s var(--ease)}
.seg label:active span{transform:scale(.98)}
.seg span small{font-size:10px;letter-spacing:.04em;text-transform:none;color:var(--dim)}
.seg input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.seg input:checked+span small{color:var(--faint)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
@media(hover:hover){.seg input:not(:checked)+span:hover{border-color:var(--ink)}}
/* her eight models: a grid of equal cells rather than a ragged wrap */
.seg--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.seg--grid span{width:100%}
/* an option her list does not have for the current choice: visible, so the shopper sees it exists, but off */
.seg label.is-off,.tile.is-off{cursor:not-allowed}
.seg label.is-off span{opacity:.35;border-style:dashed}
.tile.is-off .t{opacity:.35}
@media(hover:hover){.seg label.is-off input+span:hover{border-color:var(--line)}.tile.is-off input+.t:hover{border-color:var(--line)}}

.legend{font-family:var(--ff-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
fieldset{border:0;padding:0;margin:0;min-width:0}

/* ── 1 · pompom dialog ───────────────────────────────────────── */
.pom{border:0;padding:0;margin:auto;background:var(--bg);color:var(--ink);
  width:min(560px,calc(100vw - 32px));max-height:min(92vh,880px);overflow:auto;overscroll-behavior:contain;
  box-shadow:0 8px 24px rgba(23,18,26,.14)}
@media(min-width:720px){.pom{border-radius:2px}}
@media(max-width:719px){.pom{width:100vw;max-width:none;max-height:none;height:100dvh;margin:0;transform:translateY(24px) scale(1)}}
.pom{opacity:0;transform:translateY(12px) scale(.985);
  transition:opacity .2s var(--ease),transform .2s var(--ease),overlay .2s allow-discrete,display .2s allow-discrete}
.pom[open]{opacity:1;transform:none;transition-duration:.38s}
@starting-style{.pom[open]{opacity:0;transform:translateY(12px) scale(.985)}}
@media(max-width:719px){.pom[open]{transform:none}@starting-style{.pom[open]{transform:translateY(24px)}}}
.pom[open] .pom__hat,.pom[open] .pom__why,.pom[open] fieldset,.pom[open] #pomPick,.pom[open] .pom__foot{animation:pom-enter .32s var(--ease) both;animation-delay:calc(60ms + var(--step,0) * 40ms)}
.pom__hat{--step:0}.pom__why{--step:1}.pom__form>fieldset{--step:2}.pom__form>#pomPick{--step:3}.pom__foot{--step:4}
@keyframes pom-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pom::backdrop{background:rgba(23,18,26,0);transition:background .2s var(--ease),overlay .2s allow-discrete,display .2s allow-discrete}
.pom[open]::backdrop{background:rgba(23,18,26,.38);transition-duration:.38s}
@starting-style{.pom[open]::backdrop{background:rgba(23,18,26,0)}}
@media(prefers-reduced-motion:reduce){.pom,.pom[open]{transform:none;transition:none}.pom[open] .pom__hat,.pom[open] .pom__why,.pom[open] fieldset,.pom[open] #pomPick,.pom[open] .pom__foot{animation:none}.pom::backdrop{transition:none}}

.pom__form{display:grid;gap:22px;padding:22px clamp(18px,4vw,30px) 26px}
.pom__x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;background:transparent;color:var(--ink);
  font-size:22px;line-height:1;cursor:pointer;transition:transform .16s var(--ease),color .2s}
.pom__x:active{transform:scale(.92)}
@media(hover:hover){.pom__x:hover{color:var(--accent)}}
.pom__x:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.pom__hat{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;padding-right:36px}
.pom__hat img{width:96px;aspect-ratio:3/4;object-fit:cover;background:var(--panel)}
.pom__name{font-family:var(--ff-s);font-size:20px;line-height:1.15;text-wrap:balance}
.pom__why{font-size:13px;line-height:1.5;color:var(--ink);max-width:40ch;margin-top:8px}
.pom__why b{font-weight:400;color:var(--accent)}

/* the count, as one track like the product page's (Sindri, 24 Oct): the chosen one framed in ink */
.pom .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:380px;padding:3px;border:1px solid var(--line)}
.pom .seg span{width:100%;justify-content:center;height:44px;padding:0 10px;border-color:transparent;color:var(--dim);transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.pom .seg input:checked+span{background:var(--bg-2);color:var(--ink);border-color:var(--ink)}
@media(hover:hover) and (pointer:fine){.pom .seg input:not(:checked)+span:hover{border-color:transparent;color:var(--ink)}}
.pom__slots{display:flex;gap:8px;flex-wrap:wrap}
/* the display rule below beat the hidden attribute, so "One" still showed a second slot to pick (Anna's test, 23 Oct) */
.pom__slot[hidden]{display:none}
.pom__slot{display:inline-flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border:1px solid var(--line);cursor:pointer;
  font-family:var(--ff-m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);background:transparent;
  transition:border-color .24s var(--ease),color .24s var(--ease),transform .16s var(--ease)}
.pom__slot:active{transform:scale(.98)}
.pom__slot.is-active{border-color:var(--ink);color:var(--ink)}
.pom__slot .dot{width:22px;height:22px;border-radius:50%;background:var(--panel);flex:0 0 auto;transform:scale(.72);transition:transform .28s var(--ease)}
.pom__slot.is-set .dot{outline:1px solid var(--line);transform:scale(1)}
.pom__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px}
.sw{position:relative;border:0;padding:0;background:transparent;cursor:pointer;display:grid;gap:6px;justify-items:center;
  animation:swIn .32s var(--ease) both;animation-delay:calc(var(--i,0) * 14ms)}
@keyframes swIn{from{opacity:0;transform:translateY(6px)}}
.sw img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center;background:var(--panel);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
.sw:active img{transform:scale(.94)}
.sw span{font-family:var(--ff-m);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);text-align:center;line-height:1.25;max-width:64px}
.sw[aria-pressed="true"] img{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--ink)}
.sw[aria-pressed="true"] span{color:var(--ink)}
@media(hover:hover){.sw:hover img{transform:scale(1.06)}}
.sw:focus-visible{outline:0}.sw:focus-visible img{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--accent)}

.pom__foot{position:sticky;bottom:0;background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 4px;margin-bottom:-4px;border-top:1px solid var(--line)}
.pom__total{font-family:var(--ff-s);font-size:24px;line-height:1}
.pom__total small{display:block;font-family:var(--ff-m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.pom__add{border:0;background:var(--ink);color:var(--bg);padding:14px 22px;font-family:var(--ff-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:background .2s var(--ease),opacity .2s var(--ease),transform .16s var(--ease)}
.pom__add:not(:disabled):active{transform:scale(.97)}
.pom__add:disabled{opacity:.35;cursor:not-allowed}
@media(hover:hover){.pom__add:not(:disabled):hover{background:var(--accent)}}
.pom__add:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* the card button that asks, so a plain hat is never added silently */
.sz.pom-ask:not(.sz--solo)::after{content:" +";color:var(--accent)}

/* ── 2 · made for you ────────────────────────────────────────── */
.made{padding:clamp(56px,9vw,120px) var(--pad)}
.made__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:900px){.made__grid{grid-template-columns:1fr}}
.made__lead{font-family:var(--ff-s);font-size:clamp(22px,2.6vw,34px);line-height:1.2;text-wrap:balance;max-width:24ch}
.made__copy p{max-width:52ch;margin-top:18px;font-size:14px;line-height:1.6}
.made__aside{margin-top:26px;max-width:46ch;font-size:13px;line-height:1.6;color:var(--dim)}
.made__im{margin-top:28px;aspect-ratio:4/5;background:var(--panel);overflow:hidden}
.made__im img{width:100%;height:100%;object-fit:cover;display:block}

.cfg{display:grid;gap:30px;border-top:1px solid var(--line);padding-top:26px}
.cfg fieldset{display:grid;gap:12px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.tile{position:relative;cursor:pointer}
.tile input{position:absolute;inset:0;opacity:0;pointer-events:none}
.tile .t{display:block;border:1px solid var(--line);transition:border-color .24s var(--ease),transform .16s var(--ease)}
.tile:active .t{transform:scale(.985)}
.tile .t__im{display:block;aspect-ratio:1;overflow:hidden;background:var(--panel)}
.tile img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.55);transform-origin:50% 45%;transition:transform .5s var(--ease)}
.tile input:checked+.t img{transform:scale(1.64)}
.tile .t__m{display:flex;justify-content:space-between;gap:8px;padding:9px 10px;font-family:var(--ff-m);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.tile .t__m small{color:var(--dim);letter-spacing:.02em;text-transform:none}
.tile input:checked+.t{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tile input:focus-visible+.t{outline:2px solid var(--accent);outline-offset:2px}
@media(hover:hover){.tile input:not(:checked)+.t:hover{border-color:var(--ink)}}

.cfg__sum{display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:end;padding-top:22px;border-top:1px solid var(--line)}
.cfg__summary{grid-column:1/-1;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.cfg__trim-price{grid-column:1;font-family:var(--ff-m);font-size:10px;letter-spacing:.04em;color:var(--dim);line-height:1.5}
.cfg__price{font-family:var(--ff-s);font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.01em}
/* before Anna's prices exist the slot says so, in the same serif, a size down so it holds one line */
.cfg__price.is-ask{font-size:clamp(22px,2.4vw,30px);line-height:1.1}
.cfg__done a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.cfg__note{grid-column:1;font-family:var(--ff-m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.cfg__go{grid-column:2;grid-row:1/3;align-self:center;border:0;background:var(--ink);color:var(--bg);padding:16px 24px;
  font-family:var(--ff-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s var(--ease),transform .16s var(--ease)}
.cfg__go:active{transform:scale(.97)}
@media(hover:hover){.cfg__go:hover{background:var(--accent)}}
.cfg__go:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cfg__len{font-size:13px;line-height:1.55;color:var(--ink);max-width:48ch}
.cfg__len[hidden]{display:none}
/* colour: her blanket photos, as cards that read like the shop */
.cfg__sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.cfg__sw[hidden]{display:none}
.csw{position:relative;cursor:pointer;display:grid;gap:7px;align-content:start;min-width:0}
.csw__pick{position:relative;display:grid;gap:7px;cursor:pointer;min-width:0}
.csw input{position:absolute;inset:0;opacity:0;pointer-events:none}
.csw__im{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:box-shadow .2s var(--ease),transform .16s var(--ease)}
.csw__im img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)}
.csw__pick:active .csw__im{transform:scale(.98)}
/* her colour names can be a sentence long: two lines here, the whole name on hover and in the request */
.csw__n{font-family:var(--ff-m);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);line-height:1.35;overflow-wrap:anywhere}
.csw input:checked~.csw__im{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--accent)}
.csw input:checked~.csw__n{color:var(--ink)}
.csw input:focus-visible~.csw__im{outline:2px solid var(--accent);outline-offset:2px}
.csw__shop{display:inline-flex;align-items:center;min-height:40px;justify-self:start;font-size:10px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){.cfg__sw{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:2px 12px 12px 2px;margin-right:-12px;overscroll-behavior-x:contain}.csw{flex:0 0 min(72vw,230px);scroll-snap-align:start}.cfg__sum{grid-template-columns:1fr}.cfg__go{grid-column:1;grid-row:auto;min-height:48px}.cfg__trim-price{grid-column:1}}
.cfg__done{border:1px solid var(--ink);padding:22px;display:grid;gap:10px;transition:opacity .3s var(--ease),transform .3s var(--ease)}
@starting-style{.cfg__done{opacity:0;transform:translateY(10px)}}
.cfg__done[hidden]{display:none}
.cfg__done h3{font-family:var(--ff-s);font-size:22px;font-weight:500;line-height:1.15}
.cfg__done p{font-size:13px;line-height:1.55;max-width:52ch}
.cfg__done dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:12px}
.cfg__done dt{font-family:var(--ff-m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding-top:2px}

/* the bag line for a configured hat */
.bag__x2{font-family:var(--ff-m);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-top:3px;overflow-wrap:anywhere;white-space:pre-line;line-height:1.6}

/* language switch */
.nav__lang{font-family:var(--ff-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:transparent;border:0;color:var(--ink);cursor:pointer;padding:6px 8px}
.nav__lang b{font-weight:400;color:var(--dim)}

.seg span em,.t__m em{font-style:normal}
#pomPick{display:grid;gap:14px}
#pomPick[hidden]{display:none}
.pom__slot .dot{display:inline-block;background-size:cover;background-position:center}

/* ── reveals, on the shell's own .rv grammar (22px rise, 1s, --ease), staggered per element ── */
.made .rv,.mfy .rv{transition-delay:var(--d,0ms)}
.made__lead .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.made__lead .w>span{display:inline-block;transform:translateY(110%);transition:transform .8s var(--ease);transition-delay:calc(var(--i,0) * 14ms)}
.made__lead.in .w>span{transform:none}
.made__lead.rv{transform:none}   /* the words carry this reveal, not the block */
@media(prefers-reduced-motion:reduce){.made__lead .w>span{transform:none}.sw{animation:none}}

/* ══ MADE FOR YOU, its own page (made.html, Sindri 2026-10-17) ══
   intro + three steps, the models as photo cards (the model radio), then the form beside a picture of
   the chosen model or the blanket it is cut from, then her finished capes in the shop. */
.mfy__intro,.mfy .cfg,.mfy__aside{margin-left:var(--pad);margin-right:var(--pad)}
.mfy__intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(44px,6vw,84px)}
.mfy__steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mfy__steps li{display:grid;grid-template-columns:34px 1fr;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
.mfy__steps b{grid-row:span 2;font-weight:400;font-size:12px;color:var(--accent);padding-top:4px}
.mfy__steps span{font-family:var(--ff-s);font-weight:500;font-size:clamp(17px,1.5vw,21px);line-height:1.25}
.mfy__steps small{font-size:13px;line-height:1.55;color:var(--dim);text-wrap:pretty}
.mfy .cfg{border-top:0;padding-top:0;gap:clamp(40px,5vw,64px)}
.mfy__models{border-top:1px solid var(--line);padding-top:22px}
/* seven models: one row of seven on a wide screen, four and three below that, two to a row on a phone */
.mfy__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
@media(min-width:1200px){.mfy__grid{grid-template-columns:repeat(7,minmax(0,1fr))}}
.mfy__m{display:grid;gap:8px;align-content:start;min-width:0}
.mfy__m label{position:relative;display:grid;cursor:pointer}
.mfy__m input{position:absolute;inset:0;opacity:0;pointer-events:none}
.mfy__im{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:border-color .24s var(--ease),transform .16s var(--ease)}
.mfy__im img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
@media(hover:hover){.mfy__m label:hover .mfy__im img{transform:scale(1.035)}}
.mfy__none{height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:14px;background:var(--bg-2)}
.mfy__none em{font-family:var(--ff-s);font-style:normal;font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.1;color:var(--ink)}
.mfy__none small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.mfy__meta{display:grid;gap:4px;padding:10px 0 0;border-top:2px solid transparent;margin-top:6px;transition:border-color .24s var(--ease)}
.mfy__meta em{font-style:normal;font-family:var(--ff-m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.mfy__opts{font-size:12px;line-height:1.45;color:var(--dim)}
.mfy__m input:checked~.mfy__im{border-color:var(--ink)}
.mfy__m input:checked~.mfy__meta{border-top-color:var(--ink)}
.mfy__m input:checked~.mfy__meta em::before{content:"\2713\00a0";color:var(--accent)}
.mfy__m input:focus-visible~.mfy__im{outline:2px solid var(--accent);outline-offset:2px}
.mfy__m label:active .mfy__im{transform:scale(.985)}
.mfy__shop{font-size:11px;letter-spacing:.04em;color:var(--accent);text-decoration:underline;text-underline-offset:3px;justify-self:start}
.mfy__shop[hidden]{display:none}
.mfy__prev{position:sticky;top:90px;margin:0;display:grid;gap:10px}
.mfy__prev .made__im{margin-top:0}
.mfy__prev figcaption{font-size:11px;letter-spacing:.04em;color:var(--dim)}
.mfy__rest{display:grid;gap:30px}
.mfy__aside{margin-top:clamp(36px,5vw,60px)}
/* on a phone the model card already shows the piece and the swatches show the blanket: no third copy */
@media(max-width:900px){.mfy__intro{grid-template-columns:1fr;align-items:start}.mfy__prev{display:none}}
@media(max-width:560px){.mfy__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mfy__none em{font-size:20px}}
@media(prefers-reduced-motion:reduce){.mfy__im img,.csw__im,.csw__im img{transition:none}}

/* ══ one decision per control (Sindri 2026-10-17) ══
   the label carries the chosen value ("Fur  No"), the control carries one word per segment: a single
   track split into equal parts, the chosen part filled, like a shop's size row. */
.cfg .legend{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cfg__val{font-family:var(--ff-s);font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink)}
.seg--even{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;max-width:420px;border:1px solid var(--line)}
.seg--even label+label span{border-left:1px solid var(--line)}
.seg--even span{width:100%;justify-content:center;min-height:46px;padding:10px 8px;border:0}
.seg--even input:checked+span{border-color:var(--ink)}
.seg--even label.is-off span{border-style:solid;opacity:.35}
.seg--even label.is-off span em{text-decoration:line-through;text-decoration-thickness:1px}
#cfgPockets[hidden]{display:none}
.tile .t__m{justify-content:flex-start}

/* the chosen colour, big, and full size on a tap (Anna, 23 Oct) */
.cfg__big{margin:16px 0 0}
.cfg__big[hidden]{display:none}
.cfg__bigbtn{display:block;width:100%;padding:0;border:1px solid var(--line);background:var(--bg-2);cursor:zoom-in;aspect-ratio:4/3;overflow:hidden}
.cfg__bigbtn img{width:100%;height:100%;object-fit:cover;display:block}
.cfg__bigcap{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:13px}
.cfg__bigcap .mono{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
/* every photo of the chosen blanket, full size: the same light viewer as the product page's (Sindri, 24 Oct) */
.zoom{padding:0;border:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;background:var(--bg);color:var(--ink);
  opacity:0;transition:opacity .18s var(--ease),overlay .18s allow-discrete,display .18s allow-discrete}
.zoom[open]{opacity:1;transition-duration:.3s}
@starting-style{.zoom[open]{opacity:0}}
.zoom::backdrop{background:transparent}
.zoom:focus{outline:none}
.zoom__in{height:100%;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(60px,9vh,84px) var(--pad,16px) 40px;box-sizing:border-box;cursor:zoom-out}
.zoom__in img{display:block;width:auto;max-width:100%;height:calc(100dvh - 140px);object-fit:contain;background:var(--bg-2);cursor:default;animation:zoomRise .45s var(--ease) both}
.zoom__in img:nth-child(2){animation-delay:.06s}
@keyframes zoomRise{from{opacity:0;transform:translateY(16px)}}
.zoom__x{position:fixed;top:14px;right:var(--pad,16px);padding:12px 0 12px 14px;font-family:var(--ff-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--bg);border:0;cursor:pointer;transition:color .3s var(--ease)}
@media(hover:hover) and (pointer:fine){.zoom__x:hover{color:var(--accent)}}
.zoom__x:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.zoom__in img{animation:none}.zoom{transition:none}}
/* on a wide screen the side photo already shows the blanket big: the second copy goes, the side photo opens the viewer */
@media(min-width:901px){.cfg__big{display:none}}
.mfy__prev .made__im.is-zoom{cursor:zoom-in}
.mfy__prev .made__im.is-zoom:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
/* the close button stays above the animated hat panel (on a phone the panel slid over it and a tap on × did nothing; swarm 2 Nov) */
.pom__x{z-index:3}

.pom__material{display:block;margin-top:4px;font-size:10px;line-height:1.4;font-weight:normal}