/* WA What to wear — /what-to-wear/ */
.wa-wtw{--ink:#141D28;--red:#9B1C29;--sand:#ECE8E1;--line:#E6E4E0;--grey:#CACACA;--white:#FFFFFF;
  --head:'din-2014',Arial,'Helvetica Neue',Helvetica,sans-serif;--body:Roboto,Arial,'Helvetica Neue',Helvetica,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  max-width:640px;margin:0 auto;padding:4px 0 56px;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;position:relative}
.wa-wtw *{box-sizing:border-box}
.wa-wtw p{margin:0 0 14px}
.wa-wtw .wa-intro{margin:0 0 26px;font-size:16px}
.wa-wtw .wa-bar{height:3px;width:46px;background:var(--red);margin:0 0 14px}
.wa-wtw h2{font-family:var(--head);font-weight:700;font-size:18px;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 18px;line-height:1.2}
.wa-wtw h3{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;margin:24px 0 10px}
.wa-wtw .wa-steps{display:flex;gap:18px;margin:0 0 22px;font-family:var(--head);font-size:12px;letter-spacing:1.4px;text-transform:uppercase}
.wa-wtw .wa-steps span{color:var(--grey);padding-bottom:6px;border-bottom:2px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.wa-wtw .wa-steps span.is-on{color:var(--ink);border-color:var(--ink)}
.wa-wtw .wa-steps span.is-done{color:var(--ink)}
.wa-wtw .wa-steps b{font-weight:700}.wa-wtw .wa-steps i{font-style:normal}
@media (max-width:599px){.wa-wtw .wa-steps span:not(.is-on) i{display:none}.wa-wtw .wa-row.wa-row-seg{grid-template-columns:1fr}}

/* panels */
.wa-wtw .wa-stage{position:relative;overflow:hidden}
.wa-wtw .wa-panel{display:none}
.wa-wtw .wa-panel.is-on{display:block;animation:wa-in .24s var(--ease)}
.wa-wtw .wa-panel.is-back{animation:wa-in-back .24s var(--ease)}
@keyframes wa-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes wa-in-back{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wa-wtw .wa-panel.is-on,.wa-wtw .wa-panel.is-back{animation:none}.wa-wtw *{transition:none!important}}

/* fields */
.wa-wtw .wa-f{display:block;margin:0 0 18px}
.wa-wtw .wa-lab{display:block;font-family:var(--head);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;margin:0 0 7px}
.wa-wtw input[type=text],.wa-wtw input[type=email],.wa-wtw input[type=date],.wa-wtw input[type=time],.wa-wtw select{
  width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--grey);border-radius:0;background:var(--white);color:var(--ink);font:inherit;font-size:16px;line-height:1.3;-webkit-appearance:none;appearance:none;box-shadow:none}
.wa-wtw select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.wa-wtw input:focus,.wa-wtw select:focus,.wa-wtw button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wa-wtw h2:focus{outline:none}
.wa-wtw .wa-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wa-wtw .wa-seg{display:flex;border:1px solid var(--grey)}
.wa-wtw .wa-seg button{flex:1;min-height:48px;text-transform:none;letter-spacing:0;border-radius:0;background:var(--white);border:0;border-left:1px solid var(--grey);color:var(--ink);font:inherit;font-size:15px;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.wa-wtw .wa-seg button:first-child{border-left:0}
.wa-wtw .wa-seg button[aria-pressed=true]{background:var(--ink);color:var(--white)}
.wa-wtw .wa-place{position:relative}
.wa-wtw .wa-sugg{position:absolute;left:0;right:0;top:100%;z-index:5;background:var(--white);border:1px solid var(--grey);border-top:0;margin:0;padding:0;list-style:none;max-height:240px;overflow:auto}
.wa-wtw .wa-sugg li{padding:12px;min-height:44px;cursor:pointer;border-top:1px solid var(--line);font-size:15px}
.wa-wtw .wa-sugg li:first-child{border-top:0}
.wa-wtw .wa-sugg li:hover,.wa-wtw .wa-sugg li[aria-selected=true]{background:var(--sand)}
.wa-wtw .wa-hint{font-size:13px;color:var(--ink);opacity:.72;margin:6px 0 0}

/* buttons */
.wa-wtw .wa-btn{display:block;width:100%;min-height:52px;padding:14px 18px;border:0;background:var(--ink);color:var(--white);font-family:var(--head);font-size:13px;letter-spacing:1.6px;text-transform:uppercase;cursor:pointer;transition:background .15s var(--ease),transform .12s var(--ease)}
.wa-wtw .wa-btn:active{transform:scale(.99)}
.wa-wtw .wa-btn.is-red{background:var(--red)}
.wa-wtw .wa-btn[disabled]{background:var(--grey);cursor:default}
.wa-wtw .wa-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px 0 0;margin:0 0 10px;background:none;border:0;color:var(--ink);font-family:var(--head);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;cursor:pointer}
.wa-wtw .wa-back::before{content:"";width:8px;height:8px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);display:inline-block}
.wa-wtw .wa-err{border-left:3px solid var(--red);padding:10px 14px;margin:0 0 18px;background:var(--white);font-size:15px}

/* weather */
.wa-wtw .wa-wx{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 18px}
.wa-wtw .wa-wx div{background:var(--white);padding:16px 14px}
.wa-wtw .wa-wx .wa-k{display:block;font-family:var(--head);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;margin:0 0 6px}
.wa-wtw .wa-wx .wa-v{display:block;font-family:var(--head);font-size:30px;line-height:1;font-weight:700}
.wa-wtw .wa-wx .wa-v small{font-size:14px;font-weight:400;letter-spacing:.5px;margin-left:4px}
.wa-wtw .wa-wx .wa-feels{grid-column:1 / -1;background:var(--sand)}
.wa-wtw .wa-src{font-size:12px;opacity:.7;margin:0 0 20px}
.wa-wtw .wa-note{background:var(--sand);padding:14px 16px;margin:0 0 18px;font-size:15px}
.wa-wtw .wa-sk{background:linear-gradient(90deg,var(--line) 25%,#F4F2EE 50%,var(--line) 75%);background-size:200% 100%;animation:wa-sk 1.2s linear infinite;color:transparent!important;border-radius:2px}
@keyframes wa-sk{from{background-position:200% 0}to{background-position:-200% 0}}

/* layers */
.wa-wtw .wa-layers{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.wa-wtw .wa-layer{border-bottom:1px solid var(--line);padding:14px 0}
.wa-wtw .wa-layer .wa-type{font-family:var(--head);font-size:13px;letter-spacing:1.4px;text-transform:uppercase;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.wa-wtw .wa-layer .wa-type .wa-opt{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:12px;opacity:.7}
.wa-wtw .wa-layer .wa-lnote{font-size:14px;margin:4px 0 0;opacity:.85}
.wa-wtw .wa-prod{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;margin:10px 0 0}
.wa-wtw .wa-prod img{width:64px;height:64px;object-fit:cover;background:var(--white);border:1px solid var(--line);display:block}
.wa-wtw .wa-prod .wa-pn{font-size:15px;line-height:1.35}
.wa-wtw .wa-prod .wa-pn a{color:inherit;text-decoration:none}
.wa-wtw .wa-prod .wa-pn a:hover{text-decoration:underline}
.wa-wtw .wa-prod .wa-pp{font-size:14px;margin:2px 0 0}
.wa-wtw .wa-have{min-width:44px;min-height:44px;text-transform:none;letter-spacing:0;border-radius:0;padding:0 12px;border:1px solid var(--grey);background:var(--white);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.wa-wtw .wa-have[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.wa-wtw .wa-layer.is-have .wa-prod img,.wa-wtw .wa-layer.is-have .wa-pn,.wa-wtw .wa-layer.is-have .wa-pp,.wa-wtw .wa-layer.is-have .wa-size{opacity:.45}
.wa-wtw .wa-tools{display:flex;gap:10px;align-items:center;margin:10px 0 0;flex-wrap:wrap}
.wa-wtw .wa-size{min-height:44px;width:auto;min-width:110px;padding:8px 36px 8px 12px;font-size:14px}
.wa-wtw .wa-more{min-height:44px;text-transform:none;letter-spacing:0;padding:0 4px;background:none;border:0;color:var(--ink);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}
.wa-wtw .wa-alts{list-style:none;margin:8px 0 0;padding:0;border-left:2px solid var(--line)}
.wa-wtw .wa-alts li{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:8px 0 8px 12px;font-size:14px}
.wa-wtw .wa-alts img{width:44px;height:44px;object-fit:cover;border:1px solid var(--line)}
.wa-wtw .wa-alts button{min-height:44px;text-transform:none;letter-spacing:0;border-radius:0;padding:0 10px;background:none;border:1px solid var(--grey);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.wa-wtw .wa-noprod{font-size:14px;margin:6px 0 0;opacity:.85}

/* bottom block */
.wa-wtw .wa-sum{margin:26px 0 0;border:1px solid var(--line);padding:18px 16px;background:var(--white)}
.wa-wtw .wa-sum h3{margin:0 0 12px}
.wa-wtw .wa-sum ul{list-style:none;margin:0 0 14px;padding:0;font-size:15px}
.wa-wtw .wa-sum li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.wa-wtw .wa-sum .wa-total{display:flex;justify-content:space-between;font-family:var(--head);font-size:16px;letter-spacing:1px;text-transform:uppercase;margin:0 0 16px;font-weight:700}
.wa-wtw .wa-covered{font-family:var(--head);font-size:22px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;margin:0}
.wa-wtw .wa-sum .wa-cart-note{font-size:13px;opacity:.75;margin:10px 0 0}

/* forecast signup */
.wa-wtw .wa-fc{margin:36px 0 0;padding:24px 0 0;border-top:1px solid var(--line)}
.wa-wtw .wa-fc p{font-size:15px}
.wa-wtw .wa-check{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:14px;line-height:1.5;margin:14px 0 18px;cursor:pointer}
.wa-wtw .wa-check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--ink)}
.wa-wtw .wa-ok{border-left:3px solid var(--ink);padding:12px 14px;background:var(--sand);font-size:15px}
.wa-wtw .wa-stopped{border-left:3px solid var(--ink);padding:12px 14px;background:var(--sand);font-size:15px;margin:0 0 24px}
.wa-wtw .wa-stopped a{color:var(--ink)}
.wa-wtw .wa-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (min-width:600px){
  .wa-wtw{font-size:16px}
  .wa-wtw h2{font-size:20px}
  .wa-wtw .wa-wx{grid-template-columns:repeat(4,1fr)}
  .wa-wtw .wa-wx .wa-feels{grid-column:1 / -1}
  .wa-wtw .wa-row.wa-row-3{grid-template-columns:1fr 1fr 1fr}
  .wa-wtw .wa-btn{width:auto;min-width:260px}
}

/* v2: one-screen answer */
.wa-wtw .wa-adv{border:1px solid var(--line);margin:0 0 18px}
.wa-wtw .wa-adv summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:0 14px;cursor:pointer;font-family:var(--head);font-size:12px;letter-spacing:1.4px;text-transform:uppercase}
.wa-wtw .wa-adv summary::-webkit-details-marker{display:none}
.wa-wtw .wa-adv summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:-4px 4px 0 8px;transition:transform .2s var(--ease)}
.wa-wtw .wa-adv[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.wa-wtw .wa-adv .wa-adv-hint{flex:1;text-align:right;font-family:var(--body);text-transform:none;letter-spacing:0;font-size:13px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-wtw .wa-adv-body{padding:16px 14px 2px;border-top:1px solid var(--line)}
.wa-wtw .wa-hero{position:relative;padding:16px 12px;margin:0 0 18px;background-color:var(--sand);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;overflow:hidden}
.wa-wtw .wa-hero.is-loading{min-height:380px}
/* flat lay board: percent positions on a 4:5 canvas, so it scales with the column */
.wa-wtw .wa-lay{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:4/5}
.wa-wtw .wa-lay img{position:absolute;object-fit:contain;mix-blend-mode:multiply;animation:wa-drop .5s var(--ease) both}
.wa-wtw .wa-lay img.is-have{opacity:.35}
.wa-wtw .wa-lay-outer{left:0;top:6%;width:42%;height:42%}
.wa-wtw .wa-lay-mid{left:31%;top:0;width:38%;height:38%}
.wa-wtw .wa-lay.has-outer .wa-lay-mid{left:36%;top:2%;width:34%;height:34%}
.wa-wtw .wa-lay-base{right:0;top:4%;width:26%;height:26%}
.wa-wtw .wa-lay.has-outer .wa-lay-base{top:4%;width:22%;height:22%}
.wa-wtw .wa-lay-arms{left:3%;top:50%;width:22%;height:22%}
.wa-wtw .wa-lay-legs{left:30%;top:36%;width:40%;height:40%}
.wa-wtw .wa-lay-hands{right:3%;top:58%;width:22%;height:22%}
.wa-wtw .wa-lay-head{right:2%;top:30%;width:20%;height:20%}
.wa-wtw .wa-lay.has-outer .wa-lay-head{right:2%;top:32%;width:20%;height:20%}
.wa-wtw .wa-lay-neck{left:8%;top:30%;width:18%;height:18%}
.wa-wtw .wa-lay-legsx{left:4%;top:74%;width:22%;height:22%}
.wa-wtw .wa-lay-socks,.wa-wtw .wa-lay-feet{left:38%;top:76%;width:24%;height:24%}
.wa-wtw .wa-lay-feet{left:60%;top:80%;width:20%;height:20%}
/* white products would vanish under multiply, so they sit on a white plate */
.wa-wtw .wa-lay-socks,.wa-wtw .wa-lay-base{mix-blend-mode:normal;background:#fff;border-radius:50%;object-fit:cover;box-shadow:0 1px 0 rgba(20,29,40,.06)}
.wa-wtw .wa-hero.is-loading,.wa-wtw .wa-hero.is-empty{background-image:none}
.wa-wtw .wa-hero.is-empty{min-height:0;padding:0;margin:0}
.wa-wtw .wa-hero img.is-have{opacity:.4}
@keyframes wa-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wa-wtw .wa-hero img{animation:none}}
@media (min-width:600px){.wa-wtw .wa-hero{padding:24px 20px}}
/* the weather sits on top of the kit, dark on light, so it reads first */
.wa-wtw .wa-wxtop{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:center;background:var(--ink);color:var(--white);padding:16px 16px 14px}
.wa-wtw .wa-wxtop[hidden]{display:none}
.wa-wtw .wa-wxfeels{display:flex;flex-direction:column;align-items:flex-start}
.wa-wtw .wa-wxtemp{font-family:var(--head);font-weight:700;font-size:44px;line-height:1;letter-spacing:-1px;min-width:72px}
.wa-wtw .wa-wxtemp.wa-sk{height:44px}
.wa-wtw .wa-wxk{font-family:var(--head);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;margin:6px 0 0;opacity:.8}
.wa-wtw .wa-wxline{font-size:15px;line-height:1.5;margin:0;opacity:.95}
.wa-wtw .wa-wxline.wa-sk{display:inline-block;opacity:.4}
.wa-wtw .wa-hero{margin-top:0}
.wa-wtw .wa-feels-h{margin:0 0 16px}
@media (min-width:600px){.wa-wtw .wa-wxtop{padding:20px 20px 18px}.wa-wtw .wa-wxtemp{font-size:52px}.wa-wtw .wa-wxline{font-size:16px}}