/* wardrobe-rail.css — MONOWEAR wardrobe rail; theme follows the existing site variables. */
.wr{
  --wr-bg:var(--bg,#f0efe9);
  --wr-fg:var(--ink,#141414);
  --wr-mut:var(--muted,#797970);
  --wr-line:var(--line,#d4d2c9);
  --wr-accent:var(--accent,#c6ff4b);
  position:relative;overflow:hidden;width:100%;height:min(86svh,720px);min-height:520px;
  background:var(--wr-bg);color:var(--wr-fg);font-family:inherit;-webkit-tap-highlight-color:transparent;
  transition:background .3s,color .3s;
}
.wr *{box-sizing:border-box}
.wr-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;pointer-events:none}
.wr-bg::after{content:"";position:absolute;inset:0;background:var(--wr-bg);opacity:.55}
.wr-rail{position:absolute;inset:0;z-index:1;overflow-x:auto;overflow-y:hidden;display:flex;align-items:flex-start;padding:84px 12vw 0;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch;transition:opacity .45s,transform .45s}
.wr-rail::-webkit-scrollbar{display:none}
.wr-track{position:relative;display:flex;gap:34px;padding-top:26px;min-width:max-content}
.wr-track:before{content:"";position:absolute;left:-12vw;right:-12vw;top:26px;border-top:2px solid var(--wr-line)}
.wr-it{position:relative;width:150px;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:wr-sway 5s ease-in-out infinite;cursor:pointer;background:none;border:0;padding:0;color:inherit;font:inherit}
.wr-it:nth-child(2n){animation-delay:-1.7s}.wr-it:nth-child(3n){animation-delay:-3.1s}.wr-it:hover{animation-duration:2s}
@keyframes wr-sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.wr-it svg{width:46px;height:30px;margin-top:-4px;margin-bottom:-12px;position:relative;z-index:2;color:var(--wr-mut)}
.wr-it img{width:150px;height:200px;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(0,0,0,.18));position:relative}
.wr-it.cap img{height:110px;margin-top:30px}.wr-it.jean img{height:240px}
.wr-it small{margin-top:12px;font-size:9px;letter-spacing:.14em;color:var(--wr-mut);text-transform:uppercase}
.wr-tag{display:inline-block;margin-top:6px;font-size:8px;letter-spacing:.14em;background:var(--wr-accent);color:#111;padding:3px 6px;text-transform:uppercase;font-weight:700}
.wr-empty{position:absolute;z-index:1;top:40%;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.14em;color:var(--wr-mut);text-transform:uppercase}
.wr.wr-focus .wr-rail{opacity:0;transform:scale(.96);pointer-events:none}
.wr-stage{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .45s;padding:56px 14px 24px}
.wr.wr-focus .wr-stage{opacity:1;pointer-events:auto}
.wr-wire{position:absolute;left:0;right:0;top:calc(50% - 215px);border-top:2px solid var(--wr-line)}
.wr-row{display:flex;align-items:flex-start;justify-content:center;gap:14px;position:relative;z-index:1}
.wr-main{display:flex;flex-direction:column;align-items:center;width:min(62vw,300px)}
.wr-main svg{width:70px;height:46px;color:var(--wr-mut);margin-bottom:-18px;position:relative;z-index:2}
.wr-main img{width:100%;height:min(40svh,340px);object-fit:contain;filter:drop-shadow(0 18px 14px rgba(0,0,0,.2));transition:transform .4s,opacity .3s}
.wr-main img.out{transform:translateX(-30px);opacity:0}
.wr-side{display:flex;flex-wrap:wrap;gap:8px;width:92px;margin-top:-6px}
.wr-side button{background:none;border:0;padding:0;width:42px;display:flex;flex-direction:column;align-items:center;cursor:pointer;animation:wr-sway 4s ease-in-out infinite;transform-origin:50% 0;color:var(--wr-mut)}
.wr-side svg{width:22px;height:14px;margin-bottom:-5px}.wr-side img{width:42px;height:56px;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.2))}
.wr-meta{text-align:center;margin-top:18px}.wr-nm{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.wr-cl{font-size:10px;color:var(--wr-mut);letter-spacing:.14em;margin:6px 0 10px;text-transform:uppercase}
.wr-cd{margin:10px 0 0;font:700 15px monospace;letter-spacing:.06em}.wr-cd small{display:block;font:9px monospace;letter-spacing:.16em;color:var(--wr-mut);margin-bottom:3px}
.wr-add{margin-top:14px;font:700 10px inherit;letter-spacing:.16em;background:var(--wr-fg);color:var(--wr-bg);border:0;padding:11px 24px;cursor:pointer;border-radius:2px}
.wr-back{position:absolute;z-index:2;top:14px;left:16px;font-size:10px;letter-spacing:.14em;background:none;border:0;color:var(--wr-fg);opacity:0;pointer-events:none;transition:opacity .3s;cursor:pointer}
.wr.wr-focus .wr-back{opacity:1;pointer-events:auto}
.wr-hint{position:absolute;z-index:2;bottom:16px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:.2em;color:var(--wr-mut);transition:opacity .3s;pointer-events:none}
.wr.wr-focus .wr-hint{opacity:0}
@media(max-width:600px){.wr{min-height:500px;height:min(78svh,640px)}.wr-rail{padding:72px 9vw 0}.wr-track{gap:22px}.wr-it,.wr-it img{width:126px}.wr-it img{height:178px}.wr-it.jean img{height:210px}.wr-it.cap img{height:100px}.wr-main{width:min(58vw,250px)}.wr-main img{height:min(36svh,290px)}.wr-side{width:76px;gap:6px}.wr-side button{width:34px}.wr-side img{width:34px;height:48px}.wr-wire{top:calc(50% - 185px)}}
@media(prefers-reduced-motion:reduce){.wr-it,.wr-side button{animation:none}}

/* Slightly more readable storefront and wardrobe rail typography. */
.wr-it small{font-size:11px}
.wr-tag{font-size:9px;padding:4px 7px}
.wr-empty{font-size:12px}
.wr-nm{font-size:14px}
.wr-cl{font-size:11px}
.wr-cd{font-size:16px}
.wr-cd small{font-size:10px}
.wr-add{font-size:11px}
.wr-back{font-size:11px}
.wr-hint{font-size:10px}
@media(max-width:600px){.wr-nm{font-size:14px}.wr-cl{font-size:11px}.wr-it small{font-size:10px}}

/* Live countdown sits in the open pedestal area beneath the hanging products. */
.wr-rail-countdown{position:absolute;z-index:2;left:12px;right:12px;bottom:42px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.24)}
.wr-rail-countdown[hidden]{display:none}
.wr-rail-countdown small{font:10px monospace;letter-spacing:.16em;color:var(--wr-mut);text-transform:uppercase}
.wr-rail-countdown strong{font:700 clamp(14px,2.8vw,20px) monospace;letter-spacing:.08em;color:var(--wr-accent)}
@media(max-width:600px){.wr-rail-countdown{bottom:42px}.wr-rail-countdown small{font-size:9px}.wr-rail-countdown strong{font-size:14px}}


/* Prevent hanging garments from colliding in the wardrobe rail. */
.wr-rail{padding-left:10vw;padding-right:10vw}
.wr-track{gap:58px}
.wr-it{width:132px;flex:0 0 132px;min-width:0}
.wr-it img{display:block;width:132px;max-width:100%;height:190px;object-fit:contain;object-position:center}
.wr-it.jean img{height:218px}
.wr-it.cap img{height:100px;width:132px;margin-top:26px}
.wr-it small,.wr-it .wr-tag{max-width:100%;overflow-wrap:anywhere;text-align:center}
@media(max-width:600px){
  .wr-rail{padding-left:8vw;padding-right:8vw}
  .wr-track{gap:38px}
  .wr-it{width:108px;flex-basis:108px}
  .wr-it img{width:108px;max-width:100%;height:158px}
  .wr-it.jean img{height:184px}
  .wr-it.cap img{height:86px;width:108px;margin-top:24px}
}


/* Color-tag wardrobe: use the Studio-uploaded product variants, not hanging garment thumbnails. */
.wr-track{align-items:center;gap:clamp(24px,5vw,64px);padding-top:0}
.wr-track:before{display:none}
.wr-color-item{position:relative;flex:0 0 auto;min-width:150px;max-width:230px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 14px;text-align:center}
.wr-color-name{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;max-width:220px;overflow-wrap:anywhere}
.wr-color-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:230px}
.wr-color-tag{appearance:none;border:1px solid var(--wr-line);background:transparent;color:var(--wr-fg);padding:8px 11px;border-radius:999px;font:600 9px inherit;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.wr-color-tag:hover,.wr-color-tag:focus-visible{background:var(--wr-accent);border-color:var(--wr-accent);color:#111;transform:translateY(-2px);outline:none}
.wr-color-item .wr-tag{margin-top:0}
.wr.wr-focus .wr-rail-countdown{opacity:0;visibility:hidden}
@media(max-width:600px){
  .wr-track{gap:20px}
  .wr-color-item{min-width:132px;max-width:190px;padding:14px 8px}
  .wr-color-name{font-size:10px}
  .wr-color-tags{gap:6px;max-width:190px}
  .wr-color-tag{padding:8px 9px;font-size:9px}
}


/* Restore the original hanging-garment rail; reveal colour choices only after a product is opened. */
.wr-track{align-items:flex-start;gap:58px;padding-top:26px}
.wr-track:before{display:block}
.wr-it{position:relative;display:flex;width:132px;flex:0 0 132px;min-width:0;flex-direction:column;align-items:center;transform-origin:50% 0;animation:wr-sway 5s ease-in-out infinite;cursor:pointer;background:none;border:0;padding:0;color:inherit;font:inherit}
.wr-it:nth-child(2n){animation-delay:-1.7s}
.wr-it:nth-child(3n){animation-delay:-3.1s}
.wr-it:hover{animation-duration:2s}
.wr-it svg{width:46px;height:30px;margin-top:-4px;margin-bottom:-12px;position:relative;z-index:2;color:var(--wr-mut)}
.wr-it img{display:block;width:132px;max-width:100%;height:190px;object-fit:contain;object-position:center;opacity:1;filter:brightness(1.12) contrast(1.06) drop-shadow(0 10px 8px rgba(0,0,0,.18));position:relative}
.wr-it.cap img{height:100px;width:132px;margin-top:26px}
.wr-it.jean img{height:218px}
.wr-it small{margin-top:12px;font-size:11px;letter-spacing:.12em;color:var(--wr-fg);text-transform:uppercase;text-align:center;max-width:100%;overflow-wrap:anywhere}
.wr-it .wr-tag{margin-top:6px;max-width:100%;overflow-wrap:anywhere;text-align:center}
.wr-side.wr-color-tags{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;gap:8px;width:min(36vw,220px);max-width:220px;margin:0;padding-top:8px}
.wr-side .wr-color-tag{min-height:32px;padding:8px 10px;font:600 9px/1.2 inherit;letter-spacing:.1em;white-space:normal}
.wr-side .wr-color-tag.is-selected{background:var(--wr-accent);border-color:var(--wr-accent);color:#111}
.wr-side .wr-color-tag:hover,.wr-side .wr-color-tag:focus-visible{background:var(--wr-accent);border-color:var(--wr-accent);color:#111}
.wr-main img{opacity:1;filter:brightness(1.08) contrast(1.05) drop-shadow(0 18px 14px rgba(0,0,0,.2))}
.wr-side .wr-color-tag{animation:none;transform:none}
.wr.wr-focus .wr-rail-countdown{opacity:0;visibility:hidden}
@media(max-width:600px){
  .wr-track{gap:38px;padding-top:26px}
  .wr-it{width:108px;flex-basis:108px}
  .wr-it img{width:108px;height:158px}
  .wr-it.jean img{height:184px}
  .wr-it.cap img{height:86px;width:108px;margin-top:24px}
  .wr-side.wr-color-tags{width:min(34vw,120px);gap:6px}
  .wr-side .wr-color-tag{padding:7px 8px;font-size:9px}
}


/* Colour-tag UI removed completely; keep variant image thumbnails in the product detail view. */
.wr-side.wr-color-tags{display:flex;flex-wrap:wrap;gap:8px;width:92px;margin-top:-6px;padding-top:0}
.wr-side .wr-color-tag{display:none}