/* The size guide (build.py size_guide): frostlinenorge.no/storrelser, one garment at a time,
   and the same panel in a sheet over each garment page. The garment floats on the dark card
   like everywhere else on the site; its measuring lines are drawn over the photo in white with
   a dark edge, so they read on grey fabric, on white and on the card alike, and their letters
   are the varsity face in white dots, the same dots that head the table's columns. */

/* ---------------------------------------------------------------- the page */
.sg-top{padding:calc(var(--bar) + clamp(30px,5vw,60px)) 0 0;text-align:center}
.sg-title{display:flex;justify-content:center;margin:0;padding:0 16px;line-height:0;color:#fff}
.sg-title .vname{--nh:clamp(38px,7.6vw,92px)}

/* the garments to pick from: each a small dark card with the garment on it, its name under */
.sg-pick{display:flex;gap:10px;max-width:var(--wrap);margin:clamp(26px,4vw,44px) auto 0;padding:6px 16px 4px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent)}
.sg-pick::-webkit-scrollbar{display:none}
.sg-pk{flex:none;display:flex;flex-direction:column;align-items:center;gap:9px;width:84px;text-decoration:none;color:var(--muted);transition:color .2s}
.sg-pk-im{display:block;width:84px;aspect-ratio:1/1;border-radius:16px;background:radial-gradient(60% 55% at 50% 50%,rgba(255,255,255,.13),rgba(255,255,255,0) 75%),#141418;box-shadow:inset 0 0 0 1px #26262d;transition:box-shadow .2s}
.sg-pk-im img{width:100%;height:100%;object-fit:contain;padding:12%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.sg-pk-n{font-family:var(--varsity);font-size:11px;line-height:1.15;letter-spacing:.05em;text-transform:uppercase;text-align:center}
.sg-pk-c{display:block;margin-top:4px;font-size:9.5px;letter-spacing:.08em;color:var(--muted)}
.sg-pk[aria-current="true"] .sg-pk-c{color:var(--soft)}
.sg-pk[aria-current="true"]{color:#fff}
.sg-pk[aria-current="true"] .sg-pk-im{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #fff}
@media(hover:hover){
  .sg-pk:hover{color:#fff}
  .sg-pk:hover .sg-pk-im{box-shadow:inset 0 0 0 1px #4a4a55}
  .sg-pk[aria-current="true"]:hover .sg-pk-im{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #fff}
  .sg-pk:hover img{transform:translateY(-3px) scale(1.04)}
}
@media(min-width:720px){
  .sg-pick{gap:14px;padding:6px 32px 4px}
  .sg-pk{width:96px}
  .sg-pk-im{width:96px;border-radius:18px}
}
@media(min-width:900px){.sg-pick{justify-content:center;-webkit-mask-image:none;mask-image:none}}

.sg-g{padding:clamp(30px,4.5vw,56px) 0 clamp(72px,10vw,128px)}
.sg-g[hidden]{display:none}

/* ---------------------------------------------------------------- a garment's guide */
/* a garment with two cuts (bukse, shorts) shows both at once: one picture, one table */
.sg-grid{display:grid;gap:26px;align-items:center}
@media(min-width:900px){.sg-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(40px,5.4vw,84px)}}
.sg-figs{min-width:0}
/* two cuts make a long table: the picture starts level with the name and stays in view */
@media(min-width:900px){
  .sg.duo .sg-grid{align-items:start}
  .sg.duo .sg-figs{position:sticky;top:calc(var(--bar) + 28px)}
  .sg-dlg .sg.duo .sg-figs{top:0}
}

/* the photo on the card, the lines over it in the photo's own pixels */
.sg-fig{position:relative;margin:0;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:radial-gradient(56% 52% at 50% 50%,rgba(255,255,255,.14),rgba(255,255,255,0) 72%),linear-gradient(180deg,#18181d,#101013);box-shadow:inset 0 0 0 1px #24242b}
.sg-pic{position:absolute;inset:5%}
.sg-pic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 30px rgba(0,0,0,.55))}
.sg-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* bukse and shorts: both cuts in one picture (build.py pair_images), each half labelled */
.sg-fig.duo .sg-pic::before{content:"";position:absolute;left:50%;top:4%;bottom:10%;width:1px;background:linear-gradient(transparent,rgba(255,255,255,.14),transparent)}
.sg-cap{position:absolute;bottom:.4%;z-index:1;transform:translateX(-50%);padding:6px 12px 5px;border-radius:999px;background:rgba(9,9,11,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font:400 12px/1 var(--varsity);letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap;pointer-events:none}
.sg-m{transition:opacity .25s ease}
.sg-edge,.sg-ln{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sg-edge{stroke:rgba(9,9,11,.5);stroke-width:5px}
.sg-ln{stroke:#fff;stroke-width:2px}
.sg-hd{fill:#fff;stroke:rgba(9,9,11,.5);stroke-width:2.5px;stroke-linejoin:round;paint-order:stroke;vector-effect:non-scaling-stroke}
.sg-dot{fill:#fff;stroke:rgba(9,9,11,.6);stroke-width:2.5px;vector-effect:non-scaling-stroke}
.sg-tx{fill:#09090b;font-family:var(--varsity);font-size:44px;text-anchor:middle;pointer-events:none}
/* pointing at a column or at a letter lights that one up and dims the rest */
.sg-svg.hl .sg-m{opacity:.2}
.sg-svg.hl .sg-m.on{opacity:1}
.sg-m{cursor:default}

/* the name, the cut and the table */
.sg-side{display:flex;flex-direction:column;gap:22px;min-width:0}
.sg-name{margin:0;line-height:0;color:#fff}
.sg-name .vname{--nh:clamp(34px,4.4vw,54px)}

.sg-t{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.sg-t th,.sg-t td{padding:13px 4px;text-align:center;border-bottom:1px solid var(--line)}
.sg-t thead th{padding:0 4px 13px;vertical-align:bottom;font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.sg-key{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 9px;border-radius:50%;background:#fff;color:#09090b;font:400 14px/1 var(--varsity);letter-spacing:0;transition:box-shadow .2s}
.sg-t tbody th{width:18%;padding-left:14px;text-align:left;font:400 16px/1 var(--varsity);letter-spacing:.05em;color:#fff}
.sg-t td{font-size:17px;font-weight:700;color:var(--soft);transition:color .2s}
.sg-t tbody tr{cursor:pointer}
.sg-t tbody tr > *{transition:background .2s,color .2s}
@media(hover:hover){.sg-t tbody tr:hover > *{background:rgba(255,255,255,.035)}}
/* a size tapped stays lit, so its row reads across on a phone */
.sg-t tbody tr.sel > *{background:rgba(255,255,255,.09);color:#fff;border-bottom-color:transparent}
.sg-t tbody tr.sel > :first-child{border-radius:12px 0 0 12px}
.sg-t tbody tr.sel > :last-child{border-radius:0 12px 12px 0}
.sg-t .on{color:#fff}
.sg-t thead th.on .sg-key{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #fff}
.sg-t .sg-gh th{padding:22px 0 11px;text-align:left;cursor:default}
.sg-t thead + tbody .sg-gh th{padding-top:16px}
.sg-t .sg-gh:hover > *{background:none}
.sg-cut{display:inline-block;padding:6px 12px 5px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font:400 12px/1 var(--varsity);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.sg-t td.sg-na{color:#55555f}
.sg-note{margin:-6px 0 0;font-size:13.5px;color:var(--muted)}
.sg-go{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:11px 16px 10px 20px;border-radius:999px;box-shadow:inset 0 0 0 1px #34343d;font-weight:700;font-size:15px;text-decoration:none;color:#fff;transition:box-shadow .2s,background .2s}
.sg-go svg{width:16px;height:16px}
@media(hover:hover){.sg-go:hover{box-shadow:inset 0 0 0 1px #5a5a66;background:rgba(255,255,255,.04)}}
@media(max-width:380px){
  .sg-t thead th{font-size:10px;letter-spacing:.05em}
  .sg-t td{font-size:16px}
  .sg-t tbody th{padding-left:10px}
}

/* ---------------------------------------------------------------- on a garment's page */
.pp-size{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;margin:-4px 0;padding:6px 0;font-size:15px;font-weight:700;color:var(--soft);text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);text-underline-offset:5px;transition:color .2s,text-decoration-color .2s}
.pp-size svg{width:19px;height:19px}
.pp-size:hover{color:#fff;text-decoration-color:#fff}

/* the sheet: a panel in the middle of a wide screen, from the bottom edge on a phone */
.sg-dlg{box-sizing:border-box;width:min(1080px,calc(100vw - 48px));max-width:none;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);margin:auto;padding:0;border:0;border-radius:26px;background:#0e0e11;color:#fff;box-shadow:inset 0 0 0 1px #26262d,0 40px 100px rgba(0,0,0,.7);overflow:hidden}
.sg-dlg[open]{display:flex;flex-direction:column;animation:sg-in .34s cubic-bezier(.2,.7,.2,1)}
.sg-dlg::backdrop{background:rgba(5,5,7,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sg-dlg-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 14px 0 24px}
.sg-dlg-h{margin:0;font:400 13px/1 var(--varsity);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sg-x{display:grid;place-items:center;width:42px;height:42px;padding-bottom:3px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:28px;line-height:1;transition:background .2s}
.sg-x:hover{background:rgba(255,255,255,.18)}
.sg-dlg-body{overflow:auto;overscroll-behavior:contain;padding:10px clamp(16px,3vw,36px) clamp(24px,3vw,36px)}
body.sg-open{overflow:hidden}
@keyframes sg-in{from{opacity:0;transform:translateY(20px) scale(.985)}}
@keyframes sg-up{from{transform:translateY(100%)}}
@media(max-width:699px){
  .sg-dlg{width:100%;max-height:92vh;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0;animation-name:sg-up}
  .sg-dlg[open]{animation-name:sg-up}
  .sg-dlg-bar{padding:12px 12px 0 18px}
  .sg-dlg-body{padding:6px 16px calc(24px + env(safe-area-inset-bottom))}
  /* a smaller photo, so the table is on screen too */
  .sg-dlg .sg:not(.duo) .sg-figs{width:min(100%,56vw);margin:0 auto}
  .sg-dlg .sg-grid{gap:18px}
}

@media(prefers-reduced-motion:reduce){.sg-dlg[open]{animation:none}}