/* Shapewiz product page (src/shapewiz.html). Shapewiz's own colours (charcoal #17161a, ivory #f7f3ed, copper #dc8e58; copper text on light
   #9c5426) live on its visuals only (the rail, the store window's badge, the hang tag, markers); buttons, links and bands stay IT Brain blue.
   The store window runs the real released widget (js/sw/*.js) on made-up products: the store's own form, fonts and button colour are what the
   widget dresses itself in, so the .sw-st rules below are "the theme". Prefix sw-. */
body{--sw-c:#dc8e58;--sw-t:#dc8e58;--sw-char:#17161a;--sw-ivory:#f7f3ed;--sw-ink:#1d1c20;--sw-mut:#5f5c63;--sw-line:#e7e1d9}
:root[data-theme="light"] body{--sw-t:#9c5426}
.hero h1 em{font-style:normal;color:var(--accent)}
.sw-kick{font:600 .75rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--sw-t);display:flex;align-items:center;gap:.5rem}
.sw-kick img{width:1.5rem;height:1.5rem;border-radius:.375rem}
.k-mb{display:none}
@media (max-width:760px){.k-dk{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.k-mb{display:inline;white-space:nowrap}}

/* ---------- HERO: a clothes rail of garments over one store window ---------- */
.sw-hero .wrap{align-items:stretch}
@media (min-width:981px){.sw-hero > .wrap:not(.hero-foot){grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,4vw,4rem)}}
.sw-hero > .wrap:not(.hero-foot)>div:first-child{display:flex;flex-direction:column;justify-content:center}
.sw-live{position:relative;height:var(--hero-vis);min-height:31rem;display:grid;grid-template-rows:auto minmax(0,1fr);gap:.25rem}

/* the rail: a copper rod with a hanger per garment (role=tab). Picked = hung forward in ivory with a copper outline */
.sw-rail{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:0 1rem;z-index:1}
.sw-rail::before{content:"";position:absolute;left:0;right:0;top:.6875rem;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--sw-c) 6%,var(--sw-c) 94%,transparent);opacity:.85}
.sw-rail [role="tab"]{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;justify-items:center;gap:.25rem;padding:0 .25rem .375rem;min-height:44px;-webkit-tap-highlight-color:transparent}
.sw-rail svg{display:block;width:auto;height:clamp(3.75rem,9vh,5rem);overflow:visible;transform-origin:50% 8%;transition:transform var(--med),opacity var(--fast)}
.sw-rail .hk{fill:none;stroke:var(--sw-c);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.sw-rail .gm{fill:transparent;stroke:var(--muted);stroke-width:5;stroke-linejoin:round;transition:fill var(--fast),stroke var(--fast)}
.sw-rail .dt{fill:none;stroke:var(--muted);stroke-width:4}
.sw-rail b{font:500 .875rem/1.2 var(--display);color:var(--muted);white-space:nowrap;transition:color var(--fast)}
.sw-rail [role="tab"]:hover svg{transform:rotate(-4deg)}
.sw-rail [role="tab"]:hover b{color:var(--text)}
.sw-rail [aria-selected="true"] .gm{fill:var(--sw-ivory);stroke:var(--sw-c)}
.sw-rail [aria-selected="true"] .dt{stroke:var(--sw-c)}
.sw-rail [aria-selected="true"] b{color:var(--text)}
.sw-rail [aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:0;width:.5rem;height:.5rem;translate:-50% 50%;border-radius:50%;background:var(--sw-c)}
.sw-rail [role="tab"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
:root[data-theme="light"] .sw-rail [aria-selected="true"] .gm{fill:#fff}

/* the window: a real store page (solid in both themes, like any screenshot) */
.sw-win{position:relative;min-height:0;display:grid;border-radius:var(--r-lg);background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
:root[data-theme="light"] .sw-win{box-shadow:0 0 0 1px var(--line)}
.sw-try{position:absolute;z-index:4;top:-.6875rem;right:1.25rem;background:var(--sw-c);color:var(--sw-char);font:600 .71875rem/1 var(--body);padding:.3125rem .6875rem;border-radius:var(--r-xs);letter-spacing:.01em;pointer-events:none}
.sw-panes{display:grid;min-height:0;border-radius:var(--r-lg);overflow:hidden}
.sw-pane{grid-area:1/1;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0}
.sw-pane:not(.on),.sw-pane:not(.on) *{visibility:hidden;pointer-events:none}
.sw-cap{margin:0;padding:.6875rem 1.125rem;border-top:1px solid var(--sw-line);background:#faf8f5;color:var(--sw-mut);font:400 .8125rem/1.4 var(--body)}

/* one framed card (user review 2026-11-08): the rail sits inside the frame above the store page; no store header bar */
.sw-live{padding:.75rem .75rem .75rem;border-radius:var(--r-lg);background:var(--gw,var(--plane));box-shadow:var(--gw-edge,0 0 0 1px var(--line))}
:root[data-theme="light"] .sw-live{background:#fff;box-shadow:0 0 0 1px var(--line)}
.sw-live .sw-rail{padding:.25rem .5rem 0}
.sw-live .sw-rail::before{left:.5rem;right:.5rem;background:var(--sw-c);opacity:.7}
.sw-live .sw-win{border-radius:var(--r);box-shadow:0 0 0 1px var(--line)}
.sw-live .sw-panes{border-radius:var(--r)}
.sw-st-top{display:none!important}
/* no rod or hooks (user 2026-11-08: the rod sat on the frame edge and read as a border): the garments are plain picker tabs */
.sw-live .sw-rail [role="tab"]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r)}
.sw-live .sw-rail::before,.sw-live .sw-rail .hk,.sw-live .sw-rail [role="tab"]::after{display:none}
.sw-live .sw-rail svg{margin-top:-.75rem}
.sw-live .sw-rail{padding-top:.5rem}
.sw-live .sw-st{grid-template-rows:minmax(0,1fr)}

/* the made-up stores ("the theme" the widget reads) */
.sw-st{--st-font:"Helvetica Neue",Helvetica,Arial,sans-serif;--st-head:Georgia,"Times New Roman",serif;--st-btn:#17161a;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;background:#fff;color:#1d1c20;font-family:var(--st-font)}
.st-layan{--st-btn:#3b2d26}
.st-kapra{--st-btn:#22385a;--st-head:var(--st-font)}
.st-north{--st-btn:#1f2a44;--st-head:var(--st-font)}
.sw-st-top{display:flex;align-items:center;gap:1.25rem;padding:.75rem 1.125rem;border-bottom:1px solid var(--sw-line);font-size:.75rem;color:#5f5c63;white-space:nowrap;overflow:hidden}
.sw-st-top b{margin-inline-end:auto;font:700 .8125rem/1 var(--st-head);letter-spacing:.14em;color:#1d1c20}
.st-kapra .sw-st-top b{letter-spacing:.02em;font-size:.9375rem}
.sw-st-body{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);min-height:0}
.sw-st-pic{position:relative;min-height:0;background:#efeeec;overflow:hidden}
.sw-st-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.sw-st-pic.draw{display:grid;place-items:center;background:#f3efe9}
.sw-st-pic.draw svg{width:62%;height:auto;max-height:90%}
.sw-st-info{display:flex;flex-direction:column;gap:.5rem;padding:clamp(1rem,1.8vw,1.5rem) clamp(1rem,1.8vw,1.5rem) 1rem;min-width:0;overflow:auto;scrollbar-width:none}
.sw-st-brand{font:600 .6875rem/1 var(--st-font);letter-spacing:.14em;text-transform:uppercase;color:#7a7680}
.sw-st-t{margin:0;font:400 clamp(1.25rem,1.9vw,1.625rem)/1.15 var(--st-head);letter-spacing:0;color:#1d1c20}
.st-kapra .sw-st-t,.st-north .sw-st-t{font-weight:600;letter-spacing:-.01em}
.sw-st-p{margin:0 0 .25rem;font-size:.9375rem;color:#1d1c20}
.sw-st variant-radios{display:grid;gap:.75rem}
.sw-st fieldset{border:0;margin:0;padding:0;min-width:0}
.sw-st legend{padding:0;margin-bottom:.4375rem;font-size:.8125rem;color:#5f5c63}
.sw-sz{display:flex;flex-wrap:wrap;gap:.375rem}
.sw-sz input{position:absolute;opacity:0;width:1px;height:1px}
.sw-sz label{display:grid;place-items:center;min-width:2.75rem;min-height:2.5rem;padding:0 .625rem;box-sizing:border-box;border:1px solid #d8d3cc;border-radius:var(--r-sm);font-size:.8125rem;color:#1d1c20;cursor:pointer;transition:border-color var(--fast),background var(--fast),color var(--fast)}
.sw-sz label:hover{border-color:#1d1c20}
.sw-sz input:checked+label{background:var(--st-btn);border-color:var(--st-btn);color:#fff}
.sw-sz input:focus-visible+label{outline:2px solid var(--st-btn);outline-offset:2px}
.sw-cart{all:unset;box-sizing:border-box;margin-top:.375rem;display:grid;place-items:center;min-height:2.75rem;padding:0 1rem;border-radius:var(--r-sm);background:var(--st-btn);color:#fff;font:600 .875rem/1 var(--st-font);cursor:pointer}
.sw-cart:focus-visible{outline:2px solid var(--st-btn);outline-offset:2px}
.sw-note{margin:0;min-height:1.1em;font-size:.75rem;line-height:1.35;color:#5f5c63}
.sw-note:empty{display:none}
@media (prefers-reduced-motion:reduce){.sw-rail svg{transition:none}}

/* ---------- THE GUESS: two carts (plays Without, ends on With) ---------- */
.sw-guess{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.sw-refs{margin-top:clamp(1.25rem,3vh,2rem)}
.sw-refs strong{color:var(--muted)}
.sw-refs span{font-size:.875rem;color:var(--muted);line-height:1.4}
.sw-src{margin:.75rem 0 0;font-size:.75rem;color:var(--muted)}
.sw-cart-o{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);gap:clamp(1rem,2vw,1.75rem);align-items:center;min-height:19rem}
.sw-bag{display:grid;gap:.5rem;padding:1rem;border-radius:var(--r);background:#fff;color:var(--sw-ink);font-family:var(--body);box-shadow:var(--sh-obj)}
.sw-bag-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:.375rem;border-bottom:1px solid var(--sw-line)}
.sw-bag-h b{font:500 1rem var(--display)}
.sw-bag-h em{font-style:normal;font-size:.75rem;color:var(--sw-mut)}
.sw-li{display:grid;grid-template-columns:2.75rem minmax(0,1fr) auto;gap:.75rem;align-items:center}
.sw-li img{width:2.75rem;height:3.5rem;object-fit:cover;object-position:50% 20%;border-radius:var(--r-xs);background:#efeeec}
.sw-li b{display:block;font-size:.875rem;font-weight:500}
.sw-li small{font-size:.8125rem;color:var(--sw-mut)}
.sw-li > span{font:400 .8125rem var(--mono)}
.sw-prop{display:flex;justify-content:space-between;margin-left:3.5rem;padding:.375rem .625rem;border-radius:var(--r-xs);background:#fbeee4;color:#7a3f17;font-size:.75rem}
.sw-prop b{font-weight:600}
.sw-bag-t{display:flex;justify-content:space-between;padding-top:.5rem;border-top:1px solid var(--sw-line);font-size:.875rem}
.sw-bag-t b{font:500 .875rem var(--mono)}
/* return label = paper (real object) */
.sw-label{position:relative;display:grid;gap:.625rem;padding:.875rem 1rem 1rem;border-radius:var(--r-sm);background:#fff;color:#111;font-family:var(--body);box-shadow:var(--sh-obj);rotate:2.5deg}
.sw-label-h{display:flex;justify-content:space-between;align-items:center;padding-bottom:.5rem;border-bottom:2px solid #111}
.sw-label-h b{font:700 1.125rem/1 var(--body);letter-spacing:.12em}
.sw-label-h span{font-size:.6875rem;color:#555}
.sw-label dl{margin:0;display:grid;gap:.375rem}
.sw-label dl div{display:flex;justify-content:space-between;gap:.5rem;font-size:.8125rem}
.sw-label dt{color:#555}
.sw-label dd{margin:0;font-weight:600;text-align:right}
.sw-bars{height:2.25rem;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 8px,#111 8px 11px,transparent 11px 12px)}
/* the size Shapewiz suggested = a small hang tag */
.sw-tag-s{position:relative;justify-self:center;display:grid;justify-items:center;gap:.25rem;width:11rem;padding:1.75rem 1rem 1.125rem;border-radius:var(--r) var(--r) var(--r-lg) var(--r-lg);background:var(--sw-ivory);color:var(--sw-ink);box-shadow:var(--sh-obj);rotate:-3deg;font-family:var(--body)}
.sw-tag-s small{font-size:.75rem;color:var(--sw-mut)}
.sw-tag-s > b{font:500 3.25rem/1 var(--display);color:var(--sw-char)}
.sw-tag-s em{font-style:normal;font-size:.8125rem;font-weight:600;color:#7a3f17}
.sw-tag-l{margin-top:.375rem;padding-top:.5rem;border-top:1px dashed #d8cfc4;font-size:.6875rem;color:var(--sw-mut);text-align:center}
.sw-eye{position:absolute;left:50%;top:.625rem;translate:-50% 0;width:.625rem;height:.625rem;border-radius:50%;background:var(--page,#0f1112);box-shadow:0 0 0 2px var(--sw-c)}
.sw-dots{display:inline-flex;gap:.25rem}
.sw-dots i{width:.4375rem;height:.4375rem;border-radius:50%;background:var(--sw-c)}
.sw-dots i.off{background:#ddd5cb}
.sw-wnote{margin:0;padding:.625rem var(--wt-pad,1.25rem) .875rem;font-size:.75rem;color:var(--muted)}
.sw-cartwin .wtabs-body{padding-bottom:.25rem}
.sw-cartwin [role="tabpanel"].on .sw-label,.sw-cartwin [role="tabpanel"].on .sw-tag-s{animation:sw-drop .5s cubic-bezier(.2,.8,.2,1)}
@keyframes sw-drop{from{opacity:0;translate:0 -.75rem}}
@media (prefers-reduced-motion:reduce){.sw-cartwin [role="tabpanel"].on .sw-label,.sw-cartwin [role="tabpanel"].on .sw-tag-s{animation:none}}

/* ---------- HOW IT FITS: the hang tag ---------- */
.sw-fit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:center}
.sw-tagwrap{position:relative;display:grid;justify-items:center;gap:1.25rem;padding:clamp(1.25rem,3vw,2.25rem) clamp(1rem,2vw,1.5rem) .25rem;border-radius:var(--r-lg);background:var(--gw,var(--plane));box-shadow:var(--gw-edge,none)}
:root[data-theme="light"] .sw-tagwrap{background:#fff;box-shadow:0 0 0 1px var(--line)}
.sw-fitsw{display:inline-grid;grid-template-columns:repeat(3,auto);padding:.25rem;border-radius:var(--r);background:var(--plane-2);gap:.25rem}
.sw-fitsw button,.sw-tune button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;min-height:44px;padding:0 1.125rem;border-radius:var(--r-sm);font:500 .875rem var(--body);color:var(--muted);transition:background var(--fast),color var(--fast)}
.sw-fitsw button:hover,.sw-tune button:hover{color:var(--text)}
.sw-fitsw [aria-checked="true"]{background:var(--sw-char);color:var(--sw-ivory)}
:root:not([data-theme="light"]) .sw-fitsw [aria-checked="true"]{background:var(--sw-ivory);color:var(--sw-char)}
.sw-fitsw button:focus-visible,.sw-tune button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sw-tag{position:relative;width:min(100%,21rem);display:grid;gap:1rem;padding:2.5rem 1.5rem 1.25rem;border-radius:var(--r) var(--r) var(--r-lg) var(--r-lg);background:var(--sw-ivory);color:var(--sw-ink);font-family:var(--body);box-shadow:var(--sh-obj);rotate:-1.5deg}
.sw-tag .sw-eye{top:.875rem}
.sw-string{position:absolute;left:50%;top:-2.25rem;width:1px;height:3.25rem;background:linear-gradient(var(--sw-c),#b07a4f);rotate:8deg;transform-origin:50% 100%}
.sw-tag-top{display:grid;justify-items:center;gap:.25rem;text-align:center}
.sw-tag-top small{font-size:.8125rem;color:var(--sw-mut)}
.sw-tag-top > b{font:500 4rem/1 var(--display);color:var(--sw-char);transition:opacity .2s}
.sw-match{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;color:#7a3f17}
.sw-match em{font-style:normal}
.sw-lines{list-style:none;margin:0;padding:.875rem 0 0;border-top:1px dashed #d8cfc4;display:grid;gap:.625rem}
.sw-lines li{display:grid;grid-template-columns:3.5rem minmax(0,1fr) 6.5rem;gap:.625rem;align-items:center;font-size:.8125rem}
.sw-lines li > span:first-child{color:var(--sw-mut)}
.sw-lines li > b{font-weight:600;text-align:right;white-space:nowrap}
.sw-bar{position:relative;height:.375rem;border-radius:3px;background:linear-gradient(90deg,#efe2d2 0 33.3%,#e3d4c2 33.3% 66.6%,#efe2d2 66.6%)}
.sw-bar i{position:absolute;top:50%;left:var(--x,50%);width:.875rem;height:.875rem;translate:-50% -50%;border-radius:50%;background:var(--sw-char);box-shadow:0 0 0 2px var(--sw-ivory);transition:left .45s cubic-bezier(.2,.8,.2,1)}
.sw-why{margin:0;font-size:.8125rem;color:var(--sw-ink)}
.sw-tag-f{padding-top:.75rem;border-top:1px dashed #d8cfc4;font-size:.75rem;color:var(--sw-mut);text-align:center}
.sw-tagwrap .sw-wnote{padding-inline:0}
.sw-feats{list-style:none;margin:clamp(1.25rem,3vh,2rem) 0 0;padding:0;display:grid;gap:1rem}
.sw-feats li{display:grid;grid-template-columns:.5rem minmax(0,1fr);gap:.875rem;align-items:baseline}
.sw-feats i{width:.5rem;height:.5rem;border-radius:1px;background:var(--sw-c);translate:0 -.0625rem}
.sw-feats span{color:var(--muted);font-size:.9375rem;line-height:1.5}
.sw-feats b{display:block;color:var(--text);font:500 1.0625rem/1.3 var(--display);margin-bottom:.125rem}
@media (prefers-reduced-motion:reduce){.sw-bar i{transition:none}}

.sw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- GARMENTS: real result screens + the chart behind each one ---------- */
.sw-gp{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,20rem);gap:clamp(1.5rem,3.5vw,3.5rem);align-items:center}
.sw-gc{display:grid;gap:0;border-radius:var(--r);background:var(--plane-2);overflow:hidden;align-self:center}
:root[data-theme="light"] .sw-gc{background:var(--plane)}
.sw-gc-h{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.sw-gc-h b{font:500 .9375rem var(--display);color:var(--text)}
.sw-gc-h em{font-style:normal;font-size:.75rem;color:var(--muted)}
.sw-gc table{width:100%;border-collapse:collapse;font-size:.8125rem}
.sw-gc th,.sw-gc td{padding:.4375rem .375rem;border-bottom:1px solid var(--line);text-align:center;font-weight:400}
.sw-gc thead th{color:var(--muted);font-weight:500}
.sw-gc tbody th{text-align:left;padding-left:1rem;color:var(--muted)}
.sw-gc td{font-family:var(--mono);color:var(--text)}
.sw-gc tr > :last-child{padding-right:1rem}
.sw-gc p{margin:0;padding:.75rem 1rem .875rem;font-size:.8125rem;line-height:1.45;color:var(--muted)}
.sw-ph{--mk-ph-h:clamp(24rem,52vh,29rem);aspect-ratio:390/844;justify-self:start}
.sw-ph .mk-phone-screen img{height:100%;object-fit:cover;object-position:top}
.sw-gt h3{margin:0 0 .75rem;font:500 var(--fs-h3,1.375rem)/1.25 var(--display);color:var(--text)}
.sw-gt p{margin:0;max-width:52ch;color:var(--muted);line-height:1.6}
.sw-ticks{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.5rem}
.sw-ticks li{display:flex;gap:.625rem;align-items:baseline;font-size:.9375rem;color:var(--text)}
.sw-ticks li::before{content:"";flex:none;width:.4375rem;height:.4375rem;border-radius:1px;background:var(--sw-c);translate:0 -.0625rem}
.sw-langs{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.375rem}
.sw-langs li{padding:.375rem .625rem;border-radius:var(--r-xs);background:color-mix(in srgb,var(--sw-c) 14%,transparent);color:var(--text);font-size:.8125rem}

/* ---------- SETUP: a photo of a paper chart becomes a chart, tested on sample shoppers ---------- */
.sw-setup{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.sw-setup > :last-child{padding-top:.75rem}
.sw-rd{display:grid;gap:0;border-radius:var(--r-lg);background:var(--gw,var(--plane));box-shadow:var(--gw-edge,none);overflow:hidden}
:root[data-theme="light"] .sw-rd{background:#fff;box-shadow:0 0 0 1px var(--line)}
.sw-rd-h,.sw-test-h{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem 1.125rem;border-bottom:1px solid var(--line)}
.sw-rd-h b,.sw-test-h b{font:500 .9375rem var(--display);color:var(--text)}
.sw-rd-h em{font-style:normal;font-size:.75rem;color:var(--muted)}
.sw-rd-b{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1rem,2vw,1.5rem);padding:clamp(1rem,2vw,1.5rem);align-items:center}
/* the paper chart: a photo of a printed size guide, slightly skewed, real object */
.sw-paper{position:relative;padding:1rem .875rem;border-radius:var(--r-xs);background:#fbfaf7;color:#2a2622;font-family:Georgia,serif;box-shadow:var(--sh-obj);rotate:-2.5deg;overflow:hidden}
.sw-paper > b{display:block;font:700 .875rem/1 Georgia,serif;letter-spacing:.16em}
.sw-paper > small{display:block;margin:.25rem 0 .625rem;font-size:.6875rem;color:#6e665c;font-style:italic}
.sw-paper table{width:100%;border-collapse:collapse;font-size:.75rem}
.sw-paper th,.sw-paper td{padding:.3125rem .25rem;border-bottom:1px solid #d9d2c6;text-align:center;font-weight:400}
.sw-paper th:first-child{text-align:left;font-style:italic}
.sw-paper tr:first-child th{font-weight:700}
.sw-paper .smudge{filter:blur(1.1px);color:#7d7468}
.sw-scan{position:absolute;left:0;right:0;top:0;height:2.5rem;background:linear-gradient(transparent,rgba(220,142,88,.35),transparent);opacity:0;pointer-events:none}
.sw-rd.reading .sw-scan{animation:sw-scan 1.2s ease-in-out 2}
@keyframes sw-scan{0%{opacity:1;translate:0 -2.5rem}100%{opacity:1;translate:0 12rem}}
.sw-grid table{width:100%;border-collapse:collapse;font-size:.875rem;color:var(--text)}
.sw-grid th,.sw-grid td{padding:.4375rem .375rem;border-bottom:1px solid var(--line);text-align:center;font-weight:400}
.sw-grid thead th{font:500 .8125rem var(--body);color:var(--muted)}
.sw-grid tbody th{text-align:left;color:var(--muted);font-size:.8125rem}
.sw-grid td{font-family:var(--mono);font-size:.8125rem;transition:opacity .25s,background .25s}
.sw-grid .chk{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:inline-grid;place-items:center;min-width:2.5rem;padding:.125rem .375rem;border-radius:var(--r-xs);background:color-mix(in srgb,var(--c-pos) 22%,transparent);box-shadow:inset 0 0 0 1px var(--c-pos);font:inherit;color:var(--text)}
.sw-grid .chk::after{content:"";position:absolute;inset:-.75rem -.25rem}
.sw-grid .chk.ok{background:transparent;box-shadow:none;cursor:default}
.sw-grid .chk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sw-rd.empty .sw-grid td{opacity:0}
.sw-grid-n{margin:.75rem 0 0;font-size:.8125rem;color:var(--muted);min-height:2.6em}
.sw-test{border-top:1px solid var(--line)}
.sw-tune{display:inline-grid;grid-template-columns:repeat(3,auto);gap:.125rem;padding:.1875rem;border-radius:var(--r);background:var(--plane-2)}
.sw-tune button{min-height:36px;padding:0 .75rem;font-size:.8125rem}
.sw-tune button::after{content:"";position:absolute}
.sw-tune [aria-checked="true"]{background:var(--sw-char);color:var(--sw-ivory)}
:root:not([data-theme="light"]) .sw-tune [aria-checked="true"]{background:var(--sw-ivory);color:var(--sw-char)}
.sw-samp{list-style:none;margin:0;padding:.875rem 1.125rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.625rem}
.sw-samp li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.625rem .75rem;border-radius:var(--r);background:var(--plane-2);font-size:.8125rem;color:var(--muted)}
.sw-samp b{display:grid;place-items:center;min-width:2.25rem;height:2.25rem;border-radius:var(--r-sm);background:var(--sw-char);color:var(--sw-ivory);font:500 1rem var(--display);transition:background var(--fast)}
:root:not([data-theme="light"]) .sw-samp b{background:var(--sw-ivory);color:var(--sw-char)}
.sw-samp b.moved{animation:sw-pop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes sw-pop{40%{scale:1.18}}
.sw-rd-f{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.625rem 1.125rem .75rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)}
.sw-rd-f button{all:unset;cursor:pointer;position:relative;color:var(--accent);font:500 .875rem var(--body);white-space:nowrap}
.sw-rd-f button::after{content:"";position:absolute;inset:-12px -6px}
.sw-rd-f button:hover{text-decoration:underline;text-underline-offset:3px}
.sw-rd-f button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sw-steps{list-style:none;margin:0;padding:0;display:grid;gap:1.125rem;counter-reset:sws}
.sw-steps li{display:grid;grid-template-columns:2rem minmax(0,1fr);column-gap:.875rem;counter-increment:sws}
.sw-steps li::before{content:counter(sws);grid-row:span 2;display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--r-sm);background:color-mix(in srgb,var(--sw-c) 16%,transparent);color:var(--sw-t);font:500 .875rem var(--display)}
.sw-steps b{font:500 1.0625rem/1.3 var(--display);color:var(--text)}
.sw-steps span{font-size:.9375rem;line-height:1.5;color:var(--muted)}
.sw-adm{margin:1.25rem 0 0;font-size:.9375rem}
@media (prefers-reduced-motion:reduce){.sw-rd.reading .sw-scan{animation:none}.sw-samp b.moved{animation:none}}

/* ---------- MODEL: what the size rests on, by market ---------- */

/* ---------- WHY: kinds of size tools ---------- */
.sw-cmp{border-radius:var(--r-lg);background:var(--gw,var(--plane));box-shadow:var(--gw-edge,none);overflow:hidden}
:root[data-theme="light"] .sw-cmp{background:#fff;box-shadow:0 0 0 1px var(--line)}
.sw-cmp table{width:100%;border-collapse:collapse;font-size:.9375rem}
.sw-cmp th,.sw-cmp td{padding:.9375rem 1.125rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.45}
.sw-cmp thead th{font:500 .9375rem var(--display);color:var(--muted);white-space:nowrap}
.sw-cmp thead th.us{color:var(--text);white-space:nowrap}
.sw-cmp thead th.us img{display:inline-block;width:1.25rem;height:1.25rem;border-radius:.3125rem;vertical-align:-.25rem;margin-right:.5rem}
.sw-cmp tbody th{font:500 .9375rem var(--body);color:var(--text);width:16%}
.sw-cmp td{color:var(--muted);width:21%}
.sw-cmp td.us{color:var(--text);background:color-mix(in srgb,var(--sw-c) 9%,transparent);box-shadow:inset 2px 0 var(--sw-c)}
.sw-cmp td.na{color:color-mix(in srgb,var(--muted) 75%,transparent)}
.sw-cmp-n{margin:0;padding:.875rem 1.125rem;font-size:.75rem;color:var(--muted)}

/* ---------- TABLET ---------- */
@media (min-width:761px) and (max-width:1100px){.sw-steps{grid-template-columns:1fr 1fr;column-gap:2rem}}
@media (max-width:1100px){.sw-setup{grid-template-columns:1fr}.sw-gp{grid-template-columns:auto minmax(0,1fr)}.sw-gp .sw-gc{grid-column:2}.sw-gp .sw-ph{grid-row:span 2}}
@media (max-width:980px){
 .sw-live{height:auto;min-height:0;gap:.875rem}
 .sw-st-body{height:clamp(24rem,60vw,30rem)}
 .sw-guess,.sw-fit{grid-template-columns:1fr}
 .sw-fit > .sw-tagwrap{order:2}
}

/* ---------- PHONE ---------- */
@media (max-width:760px){
 .sw-rail{padding:0;grid-template-columns:repeat(5,minmax(0,1fr))}
 .sw-rail svg{height:3.25rem}
 .sw-rail b{font-size:.75rem}
 .sw-st-top{padding:.625rem .875rem;gap:.875rem}
 .sw-st-top span:nth-of-type(n+2){display:none}
 /* phones: a compact product page. Photo beside the name and price, then the options and the cart button full width
    (the form keeps its element, only its box is dropped, so the widget still finds the form and its submit button) */
 .sw-st-body{grid-template-columns:6.25rem minmax(0,1fr);grid-auto-rows:auto;align-content:start;column-gap:.875rem;row-gap:.375rem;height:auto;padding:.875rem}
 .sw-st-info{display:contents}
 .sw-st-pic{grid-row:1/4;aspect-ratio:3/4;border-radius:var(--r-sm)}
 .sw-st-brand{grid-column:2;align-self:end;margin-top:.25rem}
 .sw-st-t,.sw-st-p{grid-column:2}
 .sw-st-t{font-size:1.1875rem}
 .sw-st variant-radios,.sw-cart,.sw-note,.sw-st [type=hidden]{grid-column:1/-1}
 .sw-st variant-radios{margin-top:.625rem}
 .sw-sz{gap:.3125rem}
 .sw-sz label{min-width:2.75rem;min-height:2.75rem;padding:0 .375rem}
 .sw-cap{padding:.625rem .875rem}
 .sw-try{right:.75rem}
 .sw-cart-o{grid-template-columns:1fr;min-height:0;justify-items:stretch}
 .sw-cart-o .sw-label,.sw-cart-o .sw-tag-s{justify-self:center}
 .sw-label{width:min(100%,15rem)}
 .sw-tag{padding-inline:1.125rem}
 .sw-lines li{grid-template-columns:3rem minmax(0,1fr) 5.75rem;gap:.5rem}
 .sw-fitsw button{padding:0 .875rem}
 .sw-gp{grid-template-columns:1fr;justify-items:center;gap:1.25rem}
 .sw-gp .sw-gc{grid-column:auto;justify-self:stretch}.sw-gp .sw-ph{grid-row:auto}
 .sw-ph{--mk-ph-h:26rem;justify-self:center}
 .sw-rd-b{grid-template-columns:1fr}
 .sw-paper{max-width:17rem;justify-self:center}
 .sw-test-h{flex-wrap:wrap}
 .sw-samp{grid-template-columns:1fr;padding:.75rem}
 .sw-rd-f{flex-direction:column;align-items:flex-start}
 .sw-rd-f button{min-height:44px;display:inline-flex;align-items:center}
 .sw-cmp table,.sw-cmp thead,.sw-cmp tbody,.sw-cmp tr,.sw-cmp th,.sw-cmp td{display:block;width:auto}
 .sw-cmp thead{display:none}
 .sw-cmp tbody tr{padding:.875rem 1rem;border-bottom:1px solid var(--line)}
 .sw-cmp tbody th{width:auto;padding:0 0 .5rem;border:0;font-size:1rem}
 .sw-cmp td{width:auto;display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.5rem;padding:.4375rem .5rem;border:0;font-size:.875rem}
 .sw-cmp td::before{content:attr(data-l);color:var(--muted);font-size:.8125rem}
 .sw-cmp td.us{border-radius:var(--r-xs)}
 .sw-cmp td.us::before{color:var(--text)}
}
@media (max-width:380px){.sw-rail b{font-size:.6875rem}.sw-st-body{grid-template-columns:5.5rem minmax(0,1fr)}}