/* === BEAUXR v35 stable fix === */

/* small circle cursor, hide old cursor */

.bxr-circle-cursor{
  position:fixed;left:0;top:0;width:9px;height:9px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.92);background:rgba(255,255,255,.08);
  box-shadow:0 0 10px rgba(255,255,255,.65),0 0 18px rgba(105,225,255,.35);
  pointer-events:none;z-index:999999;transform:translate(-50%,-50%);mix-blend-mode:difference
}
.bxr-circle-cursor.click{transform:translate(-50%,-50%) scale(.72);box-shadow:0 0 16px rgba(105,225,255,.9)}

/* force loader to hide even if old JS fails */
.loader.hide,.loader.bxr-force-hide{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* logo clean no box */
.brand-head,.logo,.brand-head .logo,.logo img{background:transparent!important;border:0!important;box-shadow:none!important}
.brand-head .logo:before,.brand-head .logo:after,.logo:before,.logo:after{display:none!important;content:none!important}
.brand-head{padding:24px 5vw 10px!important;background:linear-gradient(#000 72%,rgba(0,0,0,.72),transparent)!important}
.brand-head .logo img{
  width:min(620px,72vw)!important;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.8)) drop-shadow(0 0 24px rgba(105,225,255,.32))!important;
  animation:none!important
}

/* header links: same design, no cardboard/nav strip */
.nav-strip{
  position:relative!important;display:flex!important;justify-content:center!important;align-items:center!important;
  gap:12px!important;width:min(1120px,94vw)!important;margin:0 auto 20px!important;height:auto!important;
  transform:none!important;left:auto!important;top:auto!important;padding:0!important;z-index:90!important
}
.nav-strip img{display:none!important}
.nav-strip a{
  position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;
  font-size:14px!important;color:#f8fdff!important;text-decoration:none!important;padding:11px 20px!important;
  min-height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:13px!important;border:1.5px solid rgba(105,225,255,.84)!important;
  background:linear-gradient(135deg,rgba(22,50,62,.94),rgba(7,11,17,.96))!important;
  box-shadow:0 0 18px rgba(105,225,255,.24), inset 0 0 18px rgba(255,255,255,.045), 0 12px 24px rgba(0,0,0,.32)!important;
  text-shadow:0 0 8px rgba(255,255,255,.72),0 0 16px rgba(105,225,255,.28)!important;
  font-family:'White On Black','Darkmode demo','Gemstone',Impact,monospace!important;
  letter-spacing:.12em!important;text-transform:uppercase!important
}
.nav-strip a:hover{transform:translateY(-2px)!important;border-color:#eaffff!important;box-shadow:0 0 28px rgba(105,225,255,.42), inset 0 0 22px rgba(255,255,255,.07), 0 18px 34px rgba(0,0,0,.42)!important}
.nav-strip.is-fixed{position:fixed!important;top:10px!important;left:50%!important;transform:translateX(-50%)!important}
.nav-spacer,.nav-spacer.active{height:0!important}

/* bigger reference outfit builder */
.builder-page{width:min(1500px,96vw)!important;margin:0 auto!important;padding:8px 0 40px!important}
.builder-page .page-hero{text-align:center!important;padding:10px 0 22px!important}
.builder-page .page-hero .drop-kicker{font-size:15px!important;letter-spacing:.18em!important;color:#bff7ff!important}
.builder-page .page-hero h1{
  font-size:clamp(34px,5vw,70px)!important;letter-spacing:.04em!important;margin:8px 0!important;
  text-shadow:0 0 18px rgba(255,255,255,.42),0 0 26px rgba(105,225,255,.24)!important
}
.builder-page .page-hero p{display:none!important}

.fit-stage-wrap{
  width:100%!important;display:grid!important;grid-template-columns:minmax(760px,1.35fr) minmax(320px,.65fr)!important;
  gap:28px!important;align-items:start!important;justify-content:center!important
}
.fit-stage{
  width:100%!important;min-height:900px!important;height:calc(100vh - 150px)!important;max-height:1040px!important;margin:0!important;
  border-radius:24px!important;overflow:hidden!important;position:relative!important;border:1px solid rgba(185,240,255,.34)!important;
  background:radial-gradient(circle at 50% 7%, rgba(105,225,255,.11), transparent 30%),radial-gradient(circle at 50% 46%, rgba(255,255,255,.05), transparent 38%),linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.24))!important;
  box-shadow:inset 0 0 42px rgba(255,255,255,.045),0 0 40px rgba(105,225,255,.12),0 28px 72px rgba(0,0,0,.42)!important
}
.fit-side{width:100%!important;display:flex!important;flex-direction:column!important;gap:16px!important}
.builder-note,.fit-static{display:none!important}

.fit-layer{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;object-fit:contain!important;pointer-events:none!important}
.top-layer{top:72px!important;width:min(440px,48%)!important;max-height:360px!important;z-index:100!important}
.pants-layer{top:418px!important;width:min(420px,46%)!important;max-height:395px!important;z-index:20!important}
.pants-layer.is-jorts,.pants-layer.is-shorts{top:412px!important;width:min(300px,34%)!important;max-height:230px!important}

.fit-controls,.random-panel,.save-panel{
  border:1.5px solid rgba(105,225,255,.42)!important;border-radius:18px!important;
  background:linear-gradient(145deg,rgba(12,22,30,.82),rgba(3,6,10,.76))!important;
  box-shadow:0 0 24px rgba(105,225,255,.10), inset 0 0 24px rgba(255,255,255,.035), 0 18px 44px rgba(0,0,0,.35)!important;
  padding:18px!important
}
.fit-row{border:1px solid rgba(105,225,255,.25)!important;border-radius:16px!important;padding:14px!important;margin:0 0 12px!important;background:rgba(4,8,12,.58)!important}
.fit-row h3,.random-panel h3,.save-panel h3{
  margin:0 0 10px!important;color:#f8fdff!important;text-shadow:0 0 10px rgba(105,225,255,.35)!important;
  font-size:16px!important;letter-spacing:.12em!important;text-transform:uppercase!important
}
.fit-row .current{color:#cfefff!important;font-size:13px!important;margin-bottom:10px!important;min-height:20px!important}
.arrow-pair{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}

button,.action-btn,.paper-btn,.fit-row button,.random-panel button,.save-panel button,.nav-strip a,input[type=button],input[type=submit],a.paper-btn{
  appearance:none!important;-webkit-appearance:none!important;border-radius:13px!important;border:1.5px solid rgba(105,225,255,.86)!important;
  background:linear-gradient(135deg,rgba(22,50,62,.94),rgba(7,11,17,.96))!important;background-image:linear-gradient(135deg,rgba(22,50,62,.94),rgba(7,11,17,.96))!important;
  color:#f8fdff!important;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 18px rgba(105,225,255,.25),inset 0 0 20px rgba(255,255,255,.045),0 14px 28px rgba(0,0,0,.34)!important;
  text-shadow:0 0 8px rgba(255,255,255,.72),0 0 16px rgba(105,225,255,.28)!important;
  font-family:'White On Black','Darkmode demo','Gemstone',Impact,monospace!important;font-weight:900!important;letter-spacing:.12em!important;text-transform:uppercase!important;text-decoration:none!important;
  min-height:48px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:10px 18px!important;transform:none!important;filter:none!important;position:relative!important;overflow:hidden!important
}
.save-panel button,.random-panel button{width:100%!important;margin:8px 0!important}

.preview-orbit{position:absolute;inset:0;pointer-events:none;z-index:9}
.preview-orbit img,.bxr-preview{
  position:absolute!important;width:min(140px,17%)!important;height:170px!important;object-fit:contain!important;opacity:.32!important;
  filter:blur(8px) saturate(.86) brightness(1.12)!important;right:8%!important;z-index:8!important
}
.preview-orbit img[data-kind="top"],.bxr-preview.top{top:120px!important}
.preview-orbit img[data-kind="pants"],.bxr-preview.pants{top:445px!important}

input,textarea{
  width:100%!important;border-radius:13px!important;border:1.5px solid rgba(105,225,255,.44)!important;background:rgba(3,7,12,.78)!important;color:#fff!important;padding:13px 14px!important;
  box-shadow:inset 0 0 18px rgba(255,255,255,.04),0 0 14px rgba(105,225,255,.08)!important
}

@media(max-width:1050px){
  .fit-stage-wrap{display:block!important}
  .fit-stage{height:820px!important;min-height:820px!important;margin-bottom:18px!important}
  .nav-strip{flex-wrap:wrap!important}
}


/* === BEAUXR v36 sizing + header redesign === */

/* Outfit builder requested proportions */
.top-layer{
  top:92px !important;              /* bring shirts/hoodies down */
  width:min(506px,55%) !important;  /* +15% from v35 */
  max-height:414px !important;
  z-index:100 !important;
}
.pants-layer{
  top:418px !important;
  width:min(504px,55%) !important;  /* +20% */
  max-height:474px !important;
  z-index:20 !important;
}
.pants-layer.is-jorts,
.pants-layer.is-shorts{
  top:412px !important;
  width:min(342px,39%) !important;  /* +14% */
  max-height:262px !important;
  z-index:20 !important;
}

/* Completely new header links: black softened rectangles with blue glow */
.nav-strip{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  gap:14px !important;
  flex-wrap:wrap !important;
}
.nav-strip img{
  display:none !important;
}
.nav-strip a{
  position:relative !important;
  inset:auto !important;
  width:auto !important;
  height:auto !important;
  min-width:104px !important;
  min-height:44px !important;
  padding:10px 20px !important;
  border-radius:16px !important;
  border:1.6px solid rgba(75,205,255,.95) !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(135deg, #05070b 0%, #0a1018 45%, #020305 100%) !important;
  color:#f7fcff !important;
  font-size:14px !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:'White On Black','Darkmode demo','Gemstone',Impact,monospace !important;
  font-weight:900 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  text-shadow:0 0 8px rgba(255,255,255,.72),0 0 14px rgba(75,205,255,.45) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 18px rgba(75,205,255,.34),
    0 0 34px rgba(75,205,255,.16),
    inset 0 0 18px rgba(255,255,255,.045),
    0 12px 24px rgba(0,0,0,.38) !important;
  overflow:hidden !important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}
.nav-strip a::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(105deg, transparent 0%, rgba(95,220,255,.26) 46%, transparent 62%) !important;
  transform:translateX(-145%) !important;
  transition:transform .45s ease !important;
  pointer-events:none !important;
}
.nav-strip a:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(190,245,255,1) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 26px rgba(75,205,255,.55),
    0 0 52px rgba(75,205,255,.24),
    inset 0 0 22px rgba(255,255,255,.065),
    0 18px 34px rgba(0,0,0,.46) !important;
}
.nav-strip a:hover::before{
  transform:translateX(145%) !important;
}

/* About page */
.about-page{
  width:min(1100px,92vw);
  margin:40px auto 120px;
}
.about-page .page-hero{
  border:1.5px solid rgba(75,205,255,.42);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(12,22,30,.82),rgba(3,6,10,.76));
  padding:56px;
  box-shadow:0 0 34px rgba(75,205,255,.16), inset 0 0 28px rgba(255,255,255,.04);
}
.about-page h1{
  font-size:clamp(54px,10vw,120px);
  margin:0 0 20px;
}
.about-page p{
  font-size:clamp(18px,2vw,25px);
  line-height:1.55;
}


/* v37 force ALL nav links identical to HOME button */
.nav-strip a,
.nav-strip a[href*="shop"],
.nav-strip a[href*="vote"],
.nav-strip a[href*="builder"],
.nav-strip a[href*="contact"],
.nav-strip a[href*="about"],
.nav-strip a:first-child{
    all: unset !important;
    position: relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:104px !important;
    min-height:44px !important;
    padding:10px 20px !important;
    border-radius:16px !important;
    border:1.6px solid rgba(75,205,255,.95) !important;
    background:
      radial-gradient(circle at 22% 0%, rgba(255,255,255,.12), transparent 28%),
      linear-gradient(135deg,#05070b 0%,#0a1018 45%,#020305 100%) !important;
    color:#f7fcff !important;
    text-decoration:none !important;
    font-family:'White On Black','Darkmode demo','Gemstone',Impact,monospace !important;
    font-weight:900 !important;
    font-size:14px !important;
    letter-spacing:.13em !important;
    text-transform:uppercase !important;
    cursor:pointer !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06),
      0 0 18px rgba(75,205,255,.34),
      0 0 34px rgba(75,205,255,.16),
      inset 0 0 18px rgba(255,255,255,.045),
      0 12px 24px rgba(0,0,0,.38) !important;
}

.nav-strip a::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    border-radius:16px !important;
    background:linear-gradient(105deg,transparent 0%,rgba(95,220,255,.26) 46%,transparent 62%) !important;
    transform:translateX(-145%) !important;
    transition:transform .45s ease !important;
}

.nav-strip a:hover::before{
    transform:translateX(145%) !important;
}


/* v38 pants sizing + overlap protection */

/* pants 10% bigger */
.pants-layer{
  width:min(554px,60%) !important;
  max-height:520px !important;
}

/* shorts/jorts keep proportion but slightly larger */
.pants-layer.is-jorts,
.pants-layer.is-shorts{
  width:min(376px,43%) !important;
  max-height:288px !important;
}

/* always keep tops visually above bottoms */
.top-layer,
img[id*="topLayer"],
img[src*="hoodie"],
img[src*="shirt"]{
  z-index:1000 !important;
  position:absolute !important;
}

/* bottoms always tucked slightly underneath tops */
.pants-layer,
.pants-layer.is-jorts,
.pants-layer.is-shorts,
.pants-layer.is-pants,
.pants-layer.is-jeans{
  z-index:50 !important;
}

/* bring bottoms slightly upward so waistband sits under tops */
.pants-layer{
  top:400px !important;
}
.pants-layer.is-jorts,
.pants-layer.is-shorts{
  top:394px !important;
}


/* v39 lowkey header, glow-dark logo, better bottoms */

/* remove lookbook if any JS/html leftovers survive */
.nav-strip a[href*="lookbook"],
.nav-strip a:nth-child(5):has(+ a[href*="contact"]){
  display:none !important;
}

/* lower-key header buttons */
.nav-strip a,
.nav-strip a[href*="shop"],
.nav-strip a[href*="vote"],
.nav-strip a[href*="builder"],
.nav-strip a[href*="contact"],
.nav-strip a[href*="about"],
.nav-strip a:first-child{
  min-width:96px !important;
  min-height:40px !important;
  padding:8px 17px !important;
  border-radius:13px !important;
  border:1px solid rgba(74,170,205,.55) !important;
  background:
    linear-gradient(135deg, rgba(6,9,13,.92), rgba(8,18,24,.86)) !important;
  color:rgba(238,249,255,.88) !important;
  font-size:13px !important;
  letter-spacing:.11em !important;
  text-shadow:0 0 6px rgba(185,235,255,.35) !important;
  box-shadow:
    0 0 10px rgba(75,205,255,.13),
    inset 0 0 12px rgba(255,255,255,.025),
    0 8px 18px rgba(0,0,0,.30) !important;
}
.nav-strip a::before{
  background:linear-gradient(105deg, transparent 0%, rgba(100,210,255,.13) 46%, transparent 62%) !important;
}
.nav-strip a:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(120,210,235,.75) !important;
  box-shadow:
    0 0 14px rgba(75,205,255,.22),
    inset 0 0 14px rgba(255,255,255,.035),
    0 10px 22px rgba(0,0,0,.35) !important;
}

/* logo: more visible but less bright, glow-in-the-dark feel */
.brand-head .logo img,
.logo img{
  opacity:.96 !important;
  filter:
    brightness(.82)
    contrast(1.18)
    drop-shadow(0 0 5px rgba(210,255,220,.58))
    drop-shadow(0 0 15px rgba(120,255,170,.28))
    drop-shadow(0 0 32px rgba(70,255,145,.12)) !important;
  animation:none !important;
}
.brand-head{
  background:linear-gradient(#000 68%, rgba(0,0,0,.62), transparent) !important;
}

/* Bring pants closer under tops */
.pants-layer,
.pants-layer.is-pants,
.pants-layer.is-jeans,
.pants-layer.is-long{
  top:372px !important;
  width:min(554px,60%) !important;
  max-height:520px !important;
  z-index:50 !important;
}

/* denim jorts/shorts: higher, shorter, wider like shorts not jeans */
.pants-layer.is-jorts,
.pants-layer.is-shorts{
  top:350px !important;
  width:min(350px,40%) !important;
  height:auto !important;
  max-height:205px !important;
  object-fit:contain !important;
  object-position:center top !important;
  z-index:50 !important;
}

/* if filename says jorts/short, force short proportions */
img[src*="jorts"],
img[src*="short"]{
  top:350px !important;
  width:min(350px,40%) !important;
  max-height:205px !important;
  object-fit:contain !important;
  object-position:center top !important;
  z-index:50 !important;
}

/* keep tops above bottoms */
.top-layer,
img[id*="topLayer"],
img[src*="hoodie"],
img[src*="shirt"],
img[src*="tee"],
img[src*="polo"]{
  z-index:1000 !important;
}


/* v40 force tops over bottoms on every outfit */

/* tops always rendered above */
.top-layer,
#topLayer,
img[id*="topLayer"],
img[src*="hoodie"],
img[src*="shirt"],
img[src*="tee"],
img[src*="polo"]{
    position:absolute !important;
    z-index:9999 !important;
}

/* bottoms always below tops */
.pants-layer,
.pants-layer.is-pants,
.pants-layer.is-jeans,
.pants-layer.is-long,
.pants-layer.is-jorts,
.pants-layer.is-shorts,
#pantsLayer,
img[src*="pants"],
img[src*="jeans"],
img[src*="jorts"],
img[src*="short"]{
    position:absolute !important;
    z-index:100 !important;
}

/* create visible overlap so tops hang over waistband */
.top-layer,
#topLayer{
    top:108px !important;
}

.pants-layer,
.pants-layer.is-pants,
.pants-layer.is-jeans,
.pants-layer.is-long{
    top:348px !important;
}

.pants-layer.is-jorts,
.pants-layer.is-shorts,
img[src*="jorts"],
img[src*="short"]{
    top:330px !important;
}

/* safeguard: outfit stage stacking context */
.fit-stage,
.outfit-stage,
.builder-box{
    isolation:isolate !important;
}


/* ===========================
   V41 LOGO + BUILDER PANEL REDESIGN
   =========================== */

/* LOGO: brighter white, sharper, less faded */
.brand-head .logo img,
.logo img{
  opacity:1 !important;
  filter:
    brightness(1.18)
    contrast(1.22)
    saturate(.92)
    drop-shadow(0 0 8px rgba(255,255,255,.95))
    drop-shadow(0 0 20px rgba(255,255,255,.65))
    drop-shadow(0 0 34px rgba(120,220,255,.24)) !important;
}

/* pants 20% smaller */
.pants-layer,
.pants-layer.is-pants,
.pants-layer.is-jeans,
.pants-layer.is-long{
  width:min(445px,48%) !important;
  max-height:420px !important;
}

/* shorts/jorts 15% smaller */
.pants-layer.is-jorts,
.pants-layer.is-shorts,
img[src*="jorts"],
img[src*="short"]{
  width:min(298px,34%) !important;
  max-height:175px !important;
}

/* ===== COMPLETE SAVE PANEL REDESIGN ===== */

.save-panel,
.pin-panel,
.fit-save,
.save-your-fit,
.save-your-pin{
  border:1px solid rgba(120,220,255,.22) !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at top, rgba(100,220,255,.08), transparent 35%),
    linear-gradient(180deg, rgba(7,12,18,.96), rgba(2,4,8,.98)) !important;
  box-shadow:
    0 0 28px rgba(80,220,255,.14),
    inset 0 0 35px rgba(255,255,255,.03),
    0 25px 60px rgba(0,0,0,.42) !important;
  padding:22px !important;
}

/* new heading */
.save-panel h3,
.pin-panel h3,
.save-your-fit h3{
  font-size:18px !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:#fff !important;
  margin-bottom:18px !important;
  text-shadow:
    0 0 10px rgba(255,255,255,.55),
    0 0 20px rgba(120,220,255,.22) !important;
}

/* text inputs */
.save-panel input,
.save-panel textarea,
.pin-panel input,
.pin-panel textarea{
  border-radius:16px !important;
  border:1px solid rgba(120,220,255,.18) !important;
  background:
    linear-gradient(180deg,
      rgba(10,18,24,.96),
      rgba(4,8,12,.96)) !important;
  color:white !important;
  padding:14px 16px !important;
  box-shadow:
    inset 0 0 16px rgba(255,255,255,.03),
    0 0 12px rgba(120,220,255,.06) !important;
}

/* ALL action buttons rebuilt */
.save-panel button,
.save-panel a,
.pin-panel button,
.pin-panel a,
button[class*="save"],
button[class*="download"],
button[class*="share"],
button[class*="export"],
button[class*="random"]{

  border-radius:18px !important;
  border:1px solid rgba(120,220,255,.28) !important;

  background:
    radial-gradient(circle at top,
      rgba(255,255,255,.08),
      transparent 30%),
    linear-gradient(
      180deg,
      rgba(18,28,38,.98),
      rgba(4,8,12,.98)
    ) !important;

  min-height:58px !important;

  color:white !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;

  box-shadow:
    0 0 18px rgba(120,220,255,.12),
    inset 0 0 18px rgba(255,255,255,.04),
    0 10px 30px rgba(0,0,0,.35) !important;

  transition:all .2s ease !important;
}

/* hover */
.save-panel button:hover,
.save-panel a:hover,
.pin-panel button:hover,
.pin-panel a:hover,
button[class*="save"]:hover,
button[class*="download"]:hover,
button[class*="share"]:hover,
button[class*="export"]:hover,
button[class*="random"]:hover{
  transform:translateY(-2px) !important;

  border-color:rgba(180,245,255,.65) !important;

  box-shadow:
    0 0 22px rgba(120,220,255,.24),
    0 0 42px rgba(120,220,255,.14),
    inset 0 0 20px rgba(255,255,255,.06),
    0 18px 36px rgba(0,0,0,.42) !important;
}

/* remove old icons/images inside panel */
.save-panel img,
.pin-panel img,
.save-panel svg,
.pin-panel svg{
  display:none !important;
}

/* create cleaner layout stack */
.save-panel > *,
.pin-panel > *{
  margin-bottom:12px !important;
}

/* cleaner labels */
.save-panel label,
.pin-panel label{
  color:rgba(230,245,255,.82) !important;
  letter-spacing:.08em !important;
  font-size:12px !important;
  text-transform:uppercase !important;
}


/* v42 add more separation between tops and bottoms */

/* move tops slightly higher */
.top-layer,
#topLayer{
    top:92px !important;
}

/* move long pants slightly lower */
.pants-layer,
.pants-layer.is-pants,
.pants-layer.is-jeans,
.pants-layer.is-long{
    top:382px !important;
}

/* move shorts/jorts slightly lower */
.pants-layer.is-jorts,
.pants-layer.is-shorts,
img[src*="jorts"],
img[src*="short"]{
    top:365px !important;
}


/* v43 force save/download/pin buttons into new design */
#pinFit,
#saveDevice,
#downloadFit,
#shareFit,
.save-panel #pinFit,
.save-panel #saveDevice,
.save-panel #downloadFit,
.save-panel #shareFit,
button#pinFit.action-btn,
button#saveDevice.action-btn,
button#downloadFit.action-btn,
button#shareFit.action-btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  min-height:58px !important;
  margin:9px 0 !important;
  padding:13px 18px !important;
  border-radius:18px !important;
  border:1.5px solid rgba(120,220,255,.48) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.11), transparent 30%),
    linear-gradient(180deg, rgba(18,28,38,.98), rgba(4,8,12,.98)) !important;
  background-image:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.11), transparent 30%),
    linear-gradient(180deg, rgba(18,28,38,.98), rgba(4,8,12,.98)) !important;
  color:#ffffff !important;
  font-family:'White On Black','Darkmode demo','Gemstone',Impact,monospace !important;
  font-weight:900 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  text-shadow:0 0 8px rgba(255,255,255,.68),0 0 16px rgba(120,220,255,.24) !important;
  box-shadow:
    0 0 18px rgba(120,220,255,.16),
    inset 0 0 18px rgba(255,255,255,.045),
    0 10px 30px rgba(0,0,0,.35) !important;
  transform:none !important;
  filter:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

#pinFit::before,
#saveDevice::before,
#downloadFit::before,
#shareFit::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(105deg, transparent 0%, rgba(120,220,255,.22) 46%, transparent 62%) !important;
  transform:translateX(-145%) !important;
  transition:transform .45s ease !important;
  pointer-events:none !important;
}

#pinFit:hover,
#saveDevice:hover,
#downloadFit:hover,
#shareFit:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(190,245,255,.78) !important;
  box-shadow:
    0 0 24px rgba(120,220,255,.28),
    0 0 44px rgba(120,220,255,.16),
    inset 0 0 20px rgba(255,255,255,.06),
    0 18px 36px rgba(0,0,0,.42) !important;
}

#pinFit:hover::before,
#saveDevice:hover::before,
#downloadFit:hover::before,
#shareFit:hover::before{
  transform:translateX(145%) !important;
}

/* cleaner save panel copy */
.share-prompt{
  border:1px solid rgba(120,220,255,.20) !important;
  border-radius:14px !important;
  padding:12px !important;
  background:rgba(3,7,12,.62) !important;
  color:rgba(235,248,255,.82) !important;
  line-height:1.45 !important;
}

/* bottom-right popup close button */
.cart-drawer{
  position:fixed !important;
  right:18px !important;
  bottom:18px !important;
  padding-top:44px !important;
}
.cart-drawer-close{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  width:28px !important;
  height:28px !important;
  min-height:28px !important;
  padding:0 !important;
  border-radius:9px !important;
  border:1px solid rgba(120,220,255,.45) !important;
  background:rgba(5,8,12,.88) !important;
  color:#fff !important;
  display:grid !important;
  place-items:center !important;
  font-size:16px !important;
  line-height:1 !important;
  box-shadow:0 0 14px rgba(120,220,255,.16) !important;
}
.cart-drawer.is-hidden{
  display:none !important;
}


/* v44 move hoodies/shirts slightly higher */

.top-layer,
#topLayer,
img[src*="hoodie"],
img[src*="shirt"],
img[src*="tee"],
img[src*="polo"]{
    top:78px !important;
}


/* v45 increase shorts/jorts size */

.pants-layer.is-jorts,
.pants-layer.is-shorts,
img[src*="jorts"],
img[src*="short"]{
    width:min(345px,39%) !important;
    max-height:215px !important;
}


/* v46 new clothing asset support */
#topLayer,
.top-layer{
  z-index:1000 !important;
  object-fit:contain !important;
}

/* jacket/hoodie/shirt tops keep the same centered layer */
img#topLayer[src*="track-jacket"],
img#topLayer[src*="zip-hoodie"]{
  width:min(480px,52%) !important;
  max-height:390px !important;
  top:70px !important;
}

/* jorts from new assets: wider short shape, not long jeans */
img#pantsLayer[src*="jorts"],
img#pantsLayer[src*="short"]{
  width:min(360px,41%) !important;
  max-height:230px !important;
  top:365px !important;
  object-fit:contain !important;
  object-position:center top !important;
}

/* long star jeans */
img#pantsLayer[src*="star-jeans"]{
  width:min(465px,50%) !important;
  max-height:445px !important;
  top:382px !important;
}


/* === v47 final corrections === */

/* small circle cursor only */
html,body,*{cursor:none !important;}
.glow-cursor,.custom-cursor,.cursor-dot,.cursor-glow,.hit-marker,.beauxr-ring-cursor{display:none!important;opacity:0!important;visibility:hidden!important;}
.bxr-circle-cursor{
  position:fixed;left:0;top:0;width:9px;height:9px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.92);background:rgba(255,255,255,.08);
  box-shadow:0 0 10px rgba(255,255,255,.65),0 0 18px rgba(105,225,255,.35);
  pointer-events:none;z-index:999999;transform:translate(-50%,-50%);mix-blend-mode:difference;
}
.bxr-circle-cursor.click{transform:translate(-50%,-50%) scale(.72);box-shadow:0 0 16px rgba(105,225,255,.9);}

/* loader clean/fast */
.loader.hide,.loader.bxr-force-hide{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
.loader-bar i{animation:loadFillClean 1.3s linear forwards!important;}
@keyframes loadFillClean{to{width:100%;}}

/* logo brighter, sharp, subtle */
.brand-head .logo img,.logo img{
  opacity:1!important;
  filter:brightness(1.16) contrast(1.24) saturate(.95)
    drop-shadow(0 0 7px rgba(255,255,255,.9))
    drop-shadow(0 0 18px rgba(255,255,255,.46))
    drop-shadow(0 0 30px rgba(120,220,255,.18))!important;
}

/* unified header, no images/cardboard */
.nav-strip{display:flex!important;justify-content:center!important;align-items:center!important;gap:14px!important;flex-wrap:wrap!important;background:transparent!important;border:0!important;box-shadow:none!important;width:min(1120px,94vw)!important;margin:0 auto 20px!important;height:auto!important;position:relative!important;left:auto!important;top:auto!important;transform:none!important;}
.nav-strip img{display:none!important;}
.nav-strip a,.bxr-nav-link{
  all:unset!important;box-sizing:border-box!important;position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-width:96px!important;min-height:40px!important;padding:8px 17px!important;border-radius:13px!important;
  border:1px solid rgba(74,170,205,.55)!important;background:linear-gradient(135deg,rgba(6,9,13,.92),rgba(8,18,24,.86))!important;
  color:rgba(238,249,255,.88)!important;font:900 13px 'White On Black','Darkmode demo','Gemstone',Impact,monospace!important;
  letter-spacing:.11em!important;text-transform:uppercase!important;text-decoration:none!important;text-shadow:0 0 6px rgba(185,235,255,.35)!important;
  box-shadow:0 0 10px rgba(75,205,255,.13),inset 0 0 12px rgba(255,255,255,.025),0 8px 18px rgba(0,0,0,.30)!important;
  cursor:none!important;overflow:hidden!important;
}

/* builder proportions */
.fit-stage{isolation:isolate!important;}
.top-layer,#topLayer{
  position:absolute!important;top:92px!important;width:min(506px,55%)!important;max-height:414px!important;z-index:9999!important;
  left:50%!important;transform:translateX(-50%)!important;object-fit:contain!important;pointer-events:none!important;
}
.pants-layer,#pantsLayer{
  position:absolute!important;top:382px!important;width:min(489px,53%)!important;max-height:462px!important;z-index:100!important;
  left:50%!important;transform:translateX(-50%)!important;object-fit:contain!important;pointer-events:none!important;
}
.pants-layer.is-jorts,.pants-layer.is-shorts,#pantsLayer.is-jorts,#pantsLayer.is-shorts,img#pantsLayer[src*="jorts"],img#pantsLayer[src*="short"]{
  top:365px!important;width:min(345px,39%)!important;max-height:215px!important;object-position:center top!important;
}
img#pantsLayer[src*="star-jeans"]{top:382px!important;width:min(489px,53%)!important;max-height:462px!important;}
img#topLayer[src*="track-jacket"],img#topLayer[src*="zip-hoodie"]{top:78px!important;width:min(520px,56%)!important;max-height:430px!important;}

/* save/share panel rebuilt */
.save-panel,#pinFit,#saveDevice,#downloadFit,#shareFit{font-family:'White On Black','Darkmode demo','Gemstone',Impact,monospace!important;}
.save-panel{border:1px solid rgba(120,220,255,.22)!important;border-radius:24px!important;background:radial-gradient(circle at top,rgba(100,220,255,.08),transparent 35%),linear-gradient(180deg,rgba(7,12,18,.96),rgba(2,4,8,.98))!important;box-shadow:0 0 28px rgba(80,220,255,.14),inset 0 0 35px rgba(255,255,255,.03),0 25px 60px rgba(0,0,0,.42)!important;padding:22px!important;}
#pinFit,#saveDevice,#downloadFit,#shareFit,.bxr-new-action{
  width:100%!important;min-height:58px!important;margin:9px 0!important;padding:13px 18px!important;border-radius:18px!important;
  border:1.5px solid rgba(120,220,255,.48)!important;background:radial-gradient(circle at 18% 0%,rgba(255,255,255,.11),transparent 30%),linear-gradient(180deg,rgba(18,28,38,.98),rgba(4,8,12,.98))!important;
  color:#fff!important;font-weight:900!important;letter-spacing:.13em!important;text-transform:uppercase!important;text-shadow:0 0 8px rgba(255,255,255,.68),0 0 16px rgba(120,220,255,.24)!important;
  box-shadow:0 0 18px rgba(120,220,255,.16),inset 0 0 18px rgba(255,255,255,.045),0 10px 30px rgba(0,0,0,.35)!important;display:flex!important;align-items:center!important;justify-content:center!important;
}

/* popup close */
.cart-drawer{padding-top:44px!important;}
.cart-drawer-close{position:absolute!important;top:10px!important;right:10px!important;width:28px!important;height:28px!important;min-height:28px!important;padding:0!important;border-radius:9px!important;border:1px solid rgba(120,220,255,.45)!important;background:rgba(5,8,12,.88)!important;color:#fff!important;display:grid!important;place-items:center!important;font-size:16px!important;line-height:1!important;box-shadow:0 0 14px rgba(120,220,255,.16)!important;}
.cart-drawer.is-hidden{display:none!important;}


/* v48 closer outfit + larger shorts/jorts */

/* keep the top where it is, always above */
#topLayer,
.top-layer{
  top:92px !important;
  z-index:9999 !important;
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
}

/* bring long pants closer to shirts/hoodies */
#pantsLayer,
.pants-layer,
.pants-layer.is-pants,
.pants-layer.is-jeans,
.pants-layer.is-long{
  top:365px !important;
  width:min(489px,53%) !important;
  max-height:462px !important;
  z-index:100 !important;
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  object-fit:contain !important;
}

/* make shorts/jorts bigger and closer */
#pantsLayer.is-jorts,
#pantsLayer.is-shorts,
.pants-layer.is-jorts,
.pants-layer.is-shorts,
img#pantsLayer[src*="jorts"],
img#pantsLayer[src*="short"]{
  top:342px !important;
  width:min(410px,46%) !important;
  max-height:265px !important;
  z-index:100 !important;
  object-fit:contain !important;
  object-position:center top !important;
}

/* if some jort image has odd proportions, force it to read shorter/wider */
img#pantsLayer[src*="jorts"],
img#pantsLayer[src*="short"]{
  aspect-ratio:auto !important;
}

/* make sure tops visually hang over waistband */
.fit-stage{
  isolation:isolate !important;
}


/* v49 longer builder, shorts larger, spacing corrected */

/* make outfit builder box longer/taller */
.fit-stage,
.outfit-stage,
.builder-box{
  min-height:980px !important;
  height:calc(100vh - 90px) !important;
  max-height:1160px !important;
}

/* keep tops above, but move them slightly higher to restore gap */
#topLayer,
.top-layer{
  top:82px !important;
  z-index:9999 !important;
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
}

/* move long pants slightly lower so clothes are not too close */
#pantsLayer,
.pants-layer,
.pants-layer.is-pants,
.pants-layer.is-jeans,
.pants-layer.is-long{
  top:388px !important;
  width:min(489px,53%) !important;
  max-height:462px !important;
  z-index:100 !important;
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  object-fit:contain !important;
}

/* shorts/jorts much bigger, but moved slightly lower for breathing room */
#pantsLayer.is-jorts,
#pantsLayer.is-shorts,
.pants-layer.is-jorts,
.pants-layer.is-shorts,
img#pantsLayer[src*="jorts"],
img#pantsLayer[src*="short"]{
  top:365px !important;
  width:min(475px,53%) !important;
  max-height:320px !important;
  z-index:100 !important;
  object-fit:contain !important;
  object-position:center top !important;
}

/* keep top visually above waistband */
.fit-stage{
  isolation:isolate !important;
}


/* v50 sizing adjustments */

/* shirts/tees 5% smaller */
#topLayer,
.top-layer,
img[src*="shirt"],
img[src*="tee"],
img[src*="polo"]{
  width:min(481px,52%) !important; /* ~5% down from 506 */
  max-height:393px !important;
}

/* hoodies/jackets 20% larger */
img#topLayer[src*="hoodie"],
img#topLayer[src*="zip-hoodie"],
img#topLayer[src*="track-jacket"]{
  width:min(624px,67%) !important;
  max-height:516px !important;
}

/* move pants further down */
#pantsLayer,
.pants-layer,
.pants-layer.is-pants,
.pants-layer.is-jeans,
.pants-layer.is-long{
  top:412px !important;
}

/* move shorts/jorts further down */
#pantsLayer.is-jorts,
#pantsLayer.is-shorts,
.pants-layer.is-jorts,
.pants-layer.is-shorts,
img#pantsLayer[src*="jorts"],
img#pantsLayer[src*="short"]{
  top:388px !important;
}


/* v51 requested placement/header/login/cursor */

/* Move shorts down 20%, pants down 15% relative to current screen positioning */
#pantsLayer,
.pants-layer,
.pants-layer.is-pants,
.pants-layer.is-jeans,
.pants-layer.is-long{
  top:474px !important;
}

#pantsLayer.is-jorts,
#pantsLayer.is-shorts,
.pants-layer.is-jorts,
.pants-layer.is-shorts,
img#pantsLayer[src*="jorts"],
img#pantsLayer[src*="short"]{
  top:466px !important;
}

/* Bigger logo, still sharp/white */
.brand-head .logo img,
.logo img{
  width:min(760px,82vw) !important;
  opacity:1 !important;
  filter:
    brightness(1.22)
    contrast(1.26)
    drop-shadow(0 0 8px rgba(255,255,255,.95))
    drop-shadow(0 0 20px rgba(255,255,255,.58))
    drop-shadow(0 0 34px rgba(120,220,255,.22)) !important;
}

/* Bigger header links */
.nav-strip{
  gap:16px !important;
}
.nav-strip a,
.bxr-nav-link{
  min-width:112px !important;
  min-height:48px !important;
  padding:11px 22px !important;
  font-size:15px !important;
  border-radius:15px !important;
}

/* Active selected page highlight */
.nav-strip a.active,
.nav-strip a[aria-current="page"]{
  border-color:rgba(235,255,255,.95) !important;
  color:#ffffff !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 32%),
    linear-gradient(135deg, rgba(12,28,38,.96), rgba(5,10,16,.98)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    0 0 28px rgba(75,205,255,.52),
    0 0 56px rgba(75,205,255,.22),
    inset 0 0 22px rgba(255,255,255,.07),
    0 16px 32px rgba(0,0,0,.42) !important;
}

/* Cursor a bit bigger, not huge */
.bxr-circle-cursor{
  width:13px !important;
  height:13px !important;
  border-width:1.5px !important;
  box-shadow:
    0 0 10px rgba(255,255,255,.70),
    0 0 20px rgba(105,225,255,.42) !important;
}

/* Login modal */
.login-modal{
  position:fixed;
  inset:0;
  z-index:999998;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
}
.login-modal.open{
  display:grid;
}
.login-box{
  width:min(440px,92vw);
  border:1.5px solid rgba(75,205,255,.54);
  border-radius:24px;
  background:
    radial-gradient(circle at top, rgba(100,220,255,.10), transparent 35%),
    linear-gradient(180deg, rgba(7,12,18,.98), rgba(2,4,8,.98));
  box-shadow:
    0 0 34px rgba(75,205,255,.22),
    inset 0 0 32px rgba(255,255,255,.035),
    0 24px 60px rgba(0,0,0,.52);
  padding:30px;
  position:relative;
  color:#fff;
}
.login-box h2{
  margin:0 0 10px;
  font-size:44px;
  letter-spacing:.12em;
}
.login-box p{
  color:rgba(235,248,255,.78);
  line-height:1.45;
}
.login-close{
  position:absolute !important;
  right:14px;
  top:14px;
  width:34px !important;
  min-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  border-radius:10px !important;
}
.login-status{
  margin-top:12px;
  color:#bff7ff;
  min-height:20px;
}


/* v52 hoodie/shorts sizing + definitive layer order */

/* shirts / tees / polos 7% smaller */
#topLayer,
.top-layer,
img#topLayer[src*="shirt"],
img#topLayer[src*="tee"],
img#topLayer[src*="polo"]{
  width:min(447px,48%) !important;
  max-height:365px !important;
  z-index:9999 !important;
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
}

/* hoodies / jackets bigger */
img#topLayer[src*="hoodie"],
img#topLayer[src*="zip-hoodie"],
img#topLayer[src*="track-jacket"],
img#topLayer[src*="jacket"]{
  width:min(700px,74%) !important;
  max-height:580px !important;
  top:68px !important;
  z-index:9999 !important;
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
}

/* shorts / jorts bigger */
#pantsLayer.is-jorts,
#pantsLayer.is-shorts,
.pants-layer.is-jorts,
.pants-layer.is-shorts,
img#pantsLayer[src*="jorts"],
img#pantsLayer[src*="short"]{
  width:min(550px,60%) !important;
  max-height:360px !important;
  top:456px !important;
  z-index:100 !important;
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  object-fit:contain !important;
  object-position:center top !important;
}

/* pants stay under top layers */
#pantsLayer,
.pants-layer,
.pants-layer.is-pants,
.pants-layer.is-jeans,
.pants-layer.is-long{
  z-index:100 !important;
  position:absolute !important;
}

/* force every top/hoodie/shirt layer above every bottom */
#topLayer,
.top-layer,
img[id*="topLayer"],
img[src*="hoodie"],
img[src*="shirt"],
img[src*="tee"],
img[src*="polo"],
img[src*="jacket"]{
  z-index:9999 !important;
}

#pantsLayer,
.pants-layer,
img[id*="pantsLayer"],
img[src*="pants"],
img[src*="jeans"],
img[src*="jorts"],
img[src*="short"]{
  z-index:100 !important;
}

/* stacking protection */
.fit-stage,
.outfit-stage,
.builder-box{
  isolation:isolate !important;
}


/* v53 preview fix + closer tops + bigger hoodies */

/* bring shirts/tops closer to pants/shorts */
#topLayer,
.top-layer,
img#topLayer[src*="shirt"],
img#topLayer[src*="tee"],
img#topLayer[src*="polo"]{
  top:112px !important;
  width:min(447px,48%) !important;
  max-height:365px !important;
  z-index:9999 !important;
}

/* hoodies another 10% bigger */
img#topLayer[src*="hoodie"],
img#topLayer[src*="zip-hoodie"],
img#topLayer[src*="track-jacket"],
img#topLayer[src*="jacket"]{
  top:86px !important;
  width:min(770px,81%) !important;
  max-height:638px !important;
  z-index:9999 !important;
}

/* keep bottoms close, but under tops */
#pantsLayer,
.pants-layer,
.pants-layer.is-pants,
.pants-layer.is-jeans,
.pants-layer.is-long{
  top:474px !important;
  z-index:100 !important;
}

#pantsLayer.is-jorts,
#pantsLayer.is-shorts,
.pants-layer.is-jorts,
.pants-layer.is-shorts,
img#pantsLayer[src*="jorts"],
img#pantsLayer[src*="short"]{
  top:440px !important;
  z-index:100 !important;
}

/* repaired next option preview styling */
.preview-orbit{
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:500 !important;
}
.preview-orbit img,
.bxr-preview{
  position:absolute !important;
  object-fit:contain !important;
  opacity:.34 !important;
  filter:blur(8px) saturate(.9) brightness(1.15) !important;
  pointer-events:none !important;
  z-index:500 !important;
}
.preview-orbit img[data-kind="top"],
.bxr-preview[data-kind="top"],
.bxr-preview.top{
  top:128px !important;
  right:7% !important;
  width:min(170px,18%) !important;
  height:220px !important;
}
.preview-orbit img[data-kind="pants"],
.bxr-preview[data-kind="pants"],
.bxr-preview.pants{
  top:478px !important;
  right:7% !important;
  width:min(165px,18%) !important;
  height:210px !important;
}

/* layer protection */
#topLayer,
.top-layer{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:9999 !important;
}
#pantsLayer,
.pants-layer{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:100 !important;
}
.fit-stage{
  isolation:isolate !important;
}


/* v54 requested top adjustments */

/* shirts slightly lower */
#topLayer,
.top-layer,
img#topLayer[src*="shirt"],
img#topLayer[src*="tee"],
img#topLayer[src*="polo"]{
    top:135px !important;
}

/* hoodies higher up */
img#topLayer[src*="hoodie"],
img#topLayer[src*="zip-hoodie"],
img#topLayer[src*="track-jacket"],
img#topLayer[src*="jacket"]{
    top:58px !important;
}

/* large black shirt 10% smaller */
img#topLayer[src*="black"],
img#topLayer[src*="skull-shirt"],
img#topLayer[src*="cross-skull"]{
    width:min(402px,43%) !important;
    max-height:328px !important;
}


/* v55 black polo larger + shirts lower */

/* black polo 15% bigger */
img#topLayer[src*="chicago-polo"],
img#topLayer[src*="black-chicago-polo"],
img#topLayer[src*="black"]{
    width:min(462px,50%) !important;
    max-height:377px !important;
}

/* all shirts slightly lower again */
#topLayer,
.top-layer,
img#topLayer[src*="shirt"],
img#topLayer[src*="tee"],
img#topLayer[src*="polo"]{
    top:155px !important;
}


/* v56 replaced Eternal shirt + background/overlay fixes */

/* new replaced black Eternal tee: 10% smaller */
img#topLayer[src*="top-eternal-black.webp"],
img#topLayer[src*="eternal"],
img#topLayer[src*="Eternal"],
img#topLayer[alt*="Eternal"]{
  width:min(402px,43%) !important;
  max-height:329px !important;
  top:155px !important;
  z-index:9999 !important;
}

/* stop fast flashing/flickering background animations */
body,
main,
.grain,
.bg,
.background,
.site-bg,
.noise,
.scanlines,
.fingerprint-bg,
body::before,
body::after,
.grain::before,
.grain::after{
  animation-duration:60s !important;
  animation-iteration-count:infinite !important;
  animation-timing-function:linear !important;
}

.grain,
.noise,
.scanlines,
.fingerprint-bg{
  opacity:.16 !important;
  mix-blend-mode:screen !important;
  pointer-events:none !important;
}

/* kill aggressive flashing/pulse animations specifically */
@keyframes flash{ from{opacity:.14;} to{opacity:.14;} }
@keyframes flicker{ from{opacity:.14;} to{opacity:.14;} }
@keyframes glitch{ from{transform:none;opacity:.14;} to{transform:none;opacity:.14;} }
@keyframes strobe{ from{opacity:.14;} to{opacity:.14;} }

/* keep overlays behind all item/clothing/product images */
.fit-stage::before,
.fit-stage::after,
.outfit-stage::before,
.outfit-stage::after,
.builder-box::before,
.builder-box::after,
.product-card::before,
.product-card::after,
.card::before,
.card::after{
  z-index:0 !important;
  pointer-events:none !important;
}

#topLayer,
#pantsLayer,
.top-layer,
.pants-layer,
.fit-layer,
.product-card img,
.shop-card img,
.item-card img,
.card img,
.preview-orbit,
.preview-orbit img{
  position:relative;
  z-index:50 !important;
}

#topLayer,
.top-layer{
  position:absolute !important;
  z-index:9999 !important;
}

#pantsLayer,
.pants-layer{
  position:absolute !important;
  z-index:100 !important;
}

/* overlays should never wash over clothing */
.fit-stage .grain,
.fit-stage .noise,
.fit-stage .scanlines,
.fit-stage .overlay,
.outfit-stage .grain,
.outfit-stage .noise,
.outfit-stage .scanlines,
.outfit-stage .overlay{
  z-index:0 !important;
  opacity:.08 !important;
  pointer-events:none !important;
}


/* v57 hoodie higher, bottoms lower, all hoodies consistent */

/* all hoodies larger and same scale */
img#topLayer[src*="hoodie"],
img#topLayer[src*="jacket"],
.top-layer.hoodie{
    width:min(500px,54%) !important;
    max-height:440px !important;
    top:105px !important;
    z-index:9999 !important;
}

/* pants lower */
img#pantsLayer[src*="jean"],
img#pantsLayer[src*="pant"],
.pants-layer{
    top:415px !important;
}

/* shorts further down */
img#pantsLayer[src*="short"],
img#pantsLayer[src*="jort"]{
    top:430px !important;
}

/* keep tops above bottoms */
#topLayer,.top-layer{z-index:9999 !important;}
#pantsLayer,.pants-layer{z-index:100 !important;}


/* v58 hoodie larger + hoodies higher + tshirts higher */

/* all hoodies larger */
img#topLayer[src*="hoodie"],
img#topLayer[src*="jacket"],
.top-layer.hoodie{
    width:min(560px,60%) !important;
    max-height:500px !important;
    top:75px !important;
}

/* all tshirts higher */
img#topLayer[src*="shirt"],
img#topLayer[src*="tee"],
img#topLayer[src*="polo"]{
    top:130px !important;
}

/* keep tops above bottoms */
#topLayer,.top-layer{
    z-index:9999 !important;
}


/* v59 normalize tops */

/* move ALL tops higher by ~10% */
#topLayer,
.top-layer{
    top:90px !important;
}

/* ALL tshirts/polos same size as largest shirt */
img#topLayer[src*="shirt"],
img#topLayer[src*="tee"],
img#topLayer[src*="polo"]{
    width:min(500px,54%) !important;
    max-height:420px !important;
    top:115px !important;
}

/* ALL hoodies same size as largest hoodie */
img#topLayer[src*="hoodie"],
img#topLayer[src*="jacket"],
.top-layer.hoodie{
    width:min(600px,64%) !important;
    max-height:540px !important;
    top:55px !important;
}

/* keep layering correct */
#topLayer,.top-layer{z-index:9999 !important;}
#pantsLayer,.pants-layer{z-index:100 !important;}


/* v60 move all tops higher again (~10%) */

img#topLayer[src*="shirt"],
img#topLayer[src*="tee"],
img#topLayer[src*="polo"]{
    top:90px !important;
}

img#topLayer[src*="hoodie"],
img#topLayer[src*="jacket"],
.top-layer.hoodie{
    top:30px !important;
}

#topLayer,
.top-layer{
    z-index:9999 !important;
}


/* v61 preview cleanup */

/* remove blur from next-item preview */
.preview-orbit img,
.bxr-preview,
.preview-orbit img[data-kind="top"],
.preview-orbit img[data-kind="pants"]{
    filter:none !important;
    opacity:0.65 !important;
}

/* make preview sizing proportional */
.preview-orbit img[data-kind="top"],
.bxr-preview.top{
    width:140px !important;
    height:auto !important;
    max-height:180px !important;
}

.preview-orbit img[data-kind="pants"],
.bxr-preview.pants{
    width:130px !important;
    height:auto !important;
    max-height:170px !important;
}

/* keep previews neatly positioned */
.preview-orbit img[data-kind="top"]{
    top:120px !important;
    right:6% !important;
}

.preview-orbit img[data-kind="pants"]{
    top:500px !important;
    right:6% !important;
}


/* v62 bank transfer + login page */

.bank-payment-card{
  margin:28px auto 0;
  width:min(560px,100%);
  border:1.5px solid rgba(75,205,255,.48);
  border-radius:22px;
  background:
    radial-gradient(circle at top, rgba(100,220,255,.10), transparent 35%),
    linear-gradient(180deg, rgba(7,12,18,.96), rgba(2,4,8,.98));
  box-shadow:
    0 0 28px rgba(75,205,255,.16),
    inset 0 0 28px rgba(255,255,255,.035),
    0 20px 48px rgba(0,0,0,.36);
  padding:24px;
  color:#fff;
}
.bank-payment-card h3{
  margin:0 0 14px;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-shadow:0 0 12px rgba(255,255,255,.55),0 0 20px rgba(75,205,255,.25);
}
.bank-payment-card p{
  margin:9px 0;
  color:rgba(240,250,255,.9);
  font-size:16px;
}
.bank-payment-card .bank-note{
  margin-top:16px;
  color:#bff7ff;
  font-size:14px;
}

.login-page{
  width:min(920px,92vw);
  margin:34px auto 120px;
}
.login-page-card{
  border:1.5px solid rgba(75,205,255,.50);
  border-radius:26px;
  background:
    radial-gradient(circle at top, rgba(100,220,255,.11), transparent 36%),
    linear-gradient(180deg, rgba(7,12,18,.97), rgba(2,4,8,.98));
  box-shadow:
    0 0 34px rgba(75,205,255,.20),
    inset 0 0 34px rgba(255,255,255,.035),
    0 28px 70px rgba(0,0,0,.48);
  padding:clamp(28px,5vw,58px);
  color:#fff;
}
.login-page-card h1{
  font-size:clamp(60px,11vw,130px);
  margin:0 0 18px;
  line-height:.85;
  text-shadow:0 0 14px rgba(255,255,255,.72),0 0 30px rgba(75,205,255,.24);
}
.login-page-card p{
  color:rgba(235,248,255,.82);
  max-width:620px;
  line-height:1.55;
}
#loginPageForm{
  margin-top:24px;
  display:grid;
  gap:14px;
}
#loginPageForm label{
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#bff7ff;
}
#loginPageForm input{
  border-radius:16px !important;
  border:1.5px solid rgba(75,205,255,.45) !important;
  background:rgba(3,7,12,.78) !important;
  color:#fff !important;
  padding:16px !important;
}
#loginPageForm button{
  width:100%;
  min-height:58px;
}
.login-status{
  margin-top:16px;
  color:#bff7ff;
  min-height:22px;
}


/* v63 */

/* Cardboard / tape 20% smaller */
.cardboard,
.cardboard-note,
.duct-tape,
.tape,
img[src*="cardboard"],
img[src*="tape"]{
  transform:scale(0.8) !important;
  transform-origin:center center !important;
}

/* Logo 15% larger */
.logo img,
.brand-head .logo img{
  width:min(1000px,96vw) !important;
}


/* v64 blue Ralph Lauren/USA polo 15% smaller */
img#topLayer[src*="blue-usa-polo"],
img#topLayer[src*="blue-polo"],
img#topLayer[src*="ralph"],
img#topLayer[alt*="Ralph"],
img#topLayer[alt*="USA Polo"],
img#topLayer[alt*="Blue USA Polo"]{
  width:min(425px,46%) !important;
  max-height:357px !important;
}

/* v64 vault loading screen */
.loader,
#loader,
.loading-screen{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  display:grid !important;
  place-items:center !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(120,180,190,.10), transparent 28%),
    linear-gradient(135deg, #050607, #101316 45%, #030405) !important;
  overflow:hidden !important;
  opacity:1;
  visibility:visible;
  transition:opacity .55s ease, visibility .55s ease !important;
}
.loader.hide,
.loader.bxr-force-hide,
#loader.hide,
#loader.bxr-force-hide{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.loader::before,
#loader::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(0,0,0,.65) 55%, #000 100%) !important;
  opacity:.9 !important;
  z-index:0 !important;
}
.loader::after,
#loader::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent) !important;
  transform:translateX(-100%) !important;
  animation:vaultScan 2.1s linear infinite !important;
  z-index:6 !important;
  pointer-events:none !important;
}

/* two metal doors */
.note-loader{
  position:relative !important;
  width:min(760px,86vw) !important;
  height:min(520px,66vh) !important;
  display:grid !important;
  place-items:center !important;
  z-index:5 !important;
  overflow:visible !important;
}
.note-loader::before,
.note-loader::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  width:50% !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 16%, rgba(0,0,0,.35) 52%, rgba(255,255,255,.05)),
    repeating-linear-gradient(0deg, #161a1e 0 18px, #0b0e11 18px 24px) !important;
  border:1px solid rgba(170,220,230,.22) !important;
  box-shadow:
    inset 0 0 35px rgba(255,255,255,.045),
    inset 0 0 70px rgba(0,0,0,.60),
    0 0 35px rgba(0,0,0,.65) !important;
  z-index:4 !important;
  animation:vaultDoorOpen 2.45s cubic-bezier(.18,.82,.16,1) forwards !important;
}
.note-loader::before{
  left:0 !important;
  transform-origin:left center !important;
}
.note-loader::after{
  right:0 !important;
  transform-origin:right center !important;
  animation-name:vaultDoorOpenRight !important;
}

/* central vault wheel */
.note-loader .loader-logo,
.note-loader img.loader-logo{
  width:min(250px,42vw) !important;
  max-width:250px !important;
  height:auto !important;
  border-radius:50% !important;
  padding:34px !important;
  background:
    radial-gradient(circle, #20262b 0 34%, #090b0e 35% 48%, #2d3439 49% 55%, #08090b 56%) !important;
  border:2px solid rgba(190,245,255,.35) !important;
  box-shadow:
    0 0 28px rgba(120,220,255,.32),
    inset 0 0 30px rgba(255,255,255,.06),
    inset 0 0 60px rgba(0,0,0,.72) !important;
  object-fit:contain !important;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.55)) !important;
  animation:vaultDial 1.55s cubic-bezier(.22,.9,.24,1) forwards !important;
  z-index:7 !important;
}
.landing-smoke{
  display:block !important;
  position:absolute !important;
  width:72% !important;
  height:26px !important;
  bottom:72px !important;
  background:radial-gradient(ellipse, rgba(120,220,255,.28), transparent 70%) !important;
  filter:blur(10px) !important;
  opacity:.55 !important;
  animation:vaultSmoke 2.2s ease forwards !important;
  z-index:3 !important;
}
.loader p,
#loader p{
  position:absolute !important;
  bottom:10vh !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:8 !important;
  color:#dffbff !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  text-shadow:0 0 10px rgba(120,220,255,.65) !important;
}
.loader p::before{
  content:"VAULT UNLOCKING // " !important;
}
.loader-bar{
  position:absolute !important;
  bottom:54px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(420px,68vw) !important;
  height:7px !important;
  border-radius:999px !important;
  border:1px solid rgba(120,220,255,.38) !important;
  background:rgba(0,0,0,.55) !important;
  overflow:hidden !important;
  z-index:8 !important;
  box-shadow:0 0 18px rgba(120,220,255,.26) !important;
}
.loader-bar i{
  display:block !important;
  width:0% !important;
  height:100% !important;
  background:linear-gradient(90deg, rgba(120,220,255,.92), #fff) !important;
  box-shadow:0 0 16px rgba(120,220,255,.62) !important;
  animation:vaultLoad 2.25s linear forwards !important;
}

@keyframes vaultDial{
  0%{transform:rotate(-120deg) scale(.86); opacity:.35;}
  45%{transform:rotate(35deg) scale(1); opacity:1;}
  68%{transform:rotate(-10deg) scale(1.04);}
  100%{transform:rotate(0deg) scale(1);}
}
@keyframes vaultDoorOpen{
  0%,58%{transform:translateX(0);}
  100%{transform:translateX(-112%);}
}
@keyframes vaultDoorOpenRight{
  0%,58%{transform:translateX(0);}
  100%{transform:translateX(112%);}
}
@keyframes vaultLoad{
  0%{width:0%;}
  55%{width:62%;}
  100%{width:100%;}
}
@keyframes vaultScan{
  to{transform:translateX(100%);}
}
@keyframes vaultSmoke{
  0%{opacity:0; transform:scaleX(.5);}
  55%{opacity:.6;}
  100%{opacity:.15; transform:scaleX(1.2);}
}


/* ==========================================================
   v66 cinematic vault / serpent loading screen rebuild
   ========================================================== */

.loader.vault-loader,
#loader.vault-loader{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  background:
    radial-gradient(circle at 50% 43%, rgba(134,255,217,.08), transparent 24%),
    radial-gradient(circle at 50% 55%, rgba(255,255,255,.05), transparent 34%),
    linear-gradient(135deg, #020304, #0b0e11 42%, #030405 100%) !important;
  transition:opacity .8s ease, visibility .8s ease !important;
}

.loader.vault-loader.hide,
.loader.vault-loader.bxr-force-hide,
#loader.vault-loader.hide,
#loader.vault-loader.bxr-force-hide{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.vault-scene{
  position:relative;
  width:min(1120px, 94vw);
  height:min(720px, 78vh);
  min-height:520px;
  perspective:1200px;
  overflow:hidden;
  border:1px solid rgba(190,245,255,.16);
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 50%, rgba(120,255,210,.10), transparent 28%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 3px, transparent 3px 9px),
    linear-gradient(135deg, #151a1e, #080a0c 48%, #1b2024);
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.78),
    inset 0 0 22px rgba(255,255,255,.035),
    0 0 60px rgba(0,0,0,.72),
    0 0 42px rgba(120,220,255,.10);
}

.vault-scene::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    linear-gradient(105deg, transparent 0 42%, rgba(255,255,255,.075) 48%, transparent 55%),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.04), transparent 18%),
    radial-gradient(circle at 80% 62%, rgba(120,255,210,.055), transparent 22%);
  animation:vaultAtmosphere 6s linear infinite;
  z-index:1;
  pointer-events:none;
}

.vault-door{
  position:absolute;
  top:0;
  bottom:0;
  width:50.4%;
  z-index:12;
  background:
    linear-gradient(90deg, rgba(255,255,255,.07), transparent 13%, rgba(0,0,0,.45) 58%, rgba(255,255,255,.04)),
    repeating-linear-gradient(0deg, #1b2025 0 20px, #0b0e11 20px 27px),
    linear-gradient(135deg, #11161b, #242a30 50%, #090b0e);
  border:1px solid rgba(210,245,255,.12);
  box-shadow:
    inset 0 0 45px rgba(255,255,255,.035),
    inset 0 0 110px rgba(0,0,0,.78),
    0 0 50px rgba(0,0,0,.85);
  animation-duration:4.85s;
  animation-timing-function:cubic-bezier(.16,.86,.18,1);
  animation-fill-mode:forwards;
  will-change:transform;
}

.vault-left{
  left:0;
  border-right:2px solid rgba(255,255,255,.08);
  animation-name:vaultLeftSlide;
}

.vault-right{
  right:0;
  border-left:2px solid rgba(255,255,255,.08);
  animation-name:vaultRightSlide;
}

.vault-door::before{
  content:"";
  position:absolute;
  inset:28px;
  border:1px solid rgba(190,245,255,.12);
  border-radius:18px;
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.72),
    0 0 18px rgba(255,255,255,.025);
}

.vault-door::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(115deg, transparent 0 12px, rgba(255,255,255,.035) 12px 13px),
    radial-gradient(circle at center, transparent 0 38%, rgba(0,0,0,.42) 100%);
  mix-blend-mode:screen;
  opacity:.45;
}

.vault-mechanism{
  position:absolute;
  left:50%;
  top:50%;
  width:min(620px, 70vw);
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  z-index:20;
  animation:vaultMechanismExit 4.85s cubic-bezier(.16,.86,.18,1) forwards;
}

.vault-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(220,255,255,.22);
  background:
    radial-gradient(circle, transparent 0 34%, rgba(255,255,255,.045) 35% 36%, rgba(0,0,0,.55) 37% 54%, rgba(255,255,255,.08) 55% 56%, transparent 57%),
    conic-gradient(from 20deg, #0b0d10, #333b42, #0a0d10, #232a30, #0b0d10);
  box-shadow:
    0 0 38px rgba(120,220,255,.18),
    inset 0 0 60px rgba(0,0,0,.86),
    inset 0 0 18px rgba(255,255,255,.06);
}

.ring-outer{
  animation:vaultWheelTurn 3.1s cubic-bezier(.16,.78,.18,1) forwards;
}

.ring-inner{
  inset:23%;
  border-color:rgba(160,255,190,.26);
  background:
    radial-gradient(circle, #07090a 0 34%, #273038 35% 43%, #0a0d0f 44% 100%);
  animation:vaultWheelTurnReverse 3.1s cubic-bezier(.16,.78,.18,1) forwards;
}

.vault-pin{
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:96px;
  margin-left:-11px;
  margin-top:-48px;
  border-radius:999px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.30), rgba(110,130,138,.80), rgba(0,0,0,.54));
  box-shadow:
    0 0 18px rgba(120,255,190,.20),
    inset 0 0 12px rgba(255,255,255,.08);
  transform-origin:center 210px;
  animation:vaultPinClick 3.1s cubic-bezier(.2,.85,.25,1) forwards;
}

.pin-1{transform:rotate(0deg) translateY(-210px); animation-delay:.62s;}
.pin-2{transform:rotate(55deg) translateY(-210px); animation-delay:.86s;}
.pin-3{transform:rotate(116deg) translateY(-210px); animation-delay:1.08s;}
.pin-4{transform:rotate(178deg) translateY(-210px); animation-delay:1.33s;}
.pin-5{transform:rotate(238deg) translateY(-210px); animation-delay:1.58s;}
.pin-6{transform:rotate(304deg) translateY(-210px); animation-delay:1.82s;}

.vault-bolt{
  position:absolute;
  background:linear-gradient(180deg, #dfefff, #5f717c 42%, #11161a);
  box-shadow:0 0 22px rgba(180,245,255,.20), inset 0 0 10px rgba(0,0,0,.5);
  z-index:8;
  animation:vaultBoltRetract 3.65s cubic-bezier(.18,.82,.18,1) forwards;
}

.bolt-top,
.bolt-bottom{
  left:50%;
  width:28px;
  height:150px;
  margin-left:-14px;
  border-radius:999px;
}

.bolt-top{top:-44px; animation-delay:2.32s;}
.bolt-bottom{bottom:-44px; animation-delay:2.48s;}

.bolt-left,
.bolt-right{
  top:50%;
  width:150px;
  height:28px;
  margin-top:-14px;
  border-radius:999px;
}

.bolt-left{left:-44px; animation-delay:2.62s;}
.bolt-right{right:-44px; animation-delay:2.76s;}

.vault-snake{
  position:absolute;
  inset:-7%;
  z-index:30;
  overflow:visible;
  filter:url(#snakeGlow);
  animation:snakeFadeOut 4.2s ease forwards;
}

.snake-trail,
.snake-body{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.snake-trail{
  stroke:rgba(130,255,180,.18);
  stroke-width:24;
  stroke-dasharray:1030;
  stroke-dashoffset:1030;
  animation:snakeTrail 2.55s cubic-bezier(.22,.8,.18,1) forwards;
}

.snake-body{
  stroke:url(#snakeGrad);
  stroke-width:15;
  stroke-dasharray:90 940;
  stroke-dashoffset:1030;
  animation:snakeSlither 2.65s cubic-bezier(.19,.79,.18,1) forwards;
}

.snake-head{
  fill:#dfffe7;
  stroke:#06110b;
  stroke-width:2;
  offset-path:path("M40 310 C130 180, 215 420, 300 250 S420 80, 500 245 S590 420, 660 180");
  offset-distance:0%;
  animation:snakeHeadMove 2.65s cubic-bezier(.19,.79,.18,1) forwards;
  filter:drop-shadow(0 0 10px rgba(145,255,180,.72));
}

.vault-light{
  position:absolute;
  inset:0;
  z-index:10;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.92) 0 3%, rgba(170,255,220,.45) 4% 12%, transparent 28%);
  opacity:0;
  animation:vaultLightBurst 4.85s ease forwards;
  pointer-events:none;
}

.vault-logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.94);
  z-index:9;
  color:#fff;
  font-family:Impact, 'Arial Black', sans-serif;
  font-size:clamp(58px, 12vw, 165px);
  letter-spacing:.11em;
  text-shadow:
    0 0 12px rgba(255,255,255,.95),
    0 0 32px rgba(120,255,210,.38),
    0 0 72px rgba(120,220,255,.20);
  opacity:0;
  animation:vaultLogoReveal 4.85s ease forwards;
}

.vault-status{
  position:absolute;
  left:50%;
  bottom:72px;
  transform:translateX(-50%);
  z-index:35;
  color:#dffbff;
  font:900 13px monospace;
  letter-spacing:.26em;
  text-transform:uppercase;
  text-shadow:0 0 12px rgba(120,220,255,.65);
  animation:vaultStatusText 4.85s steps(1,end) forwards;
  white-space:nowrap;
}

.vault-progress{
  position:absolute;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);
  width:min(520px, 72vw);
  height:7px;
  z-index:35;
  border-radius:999px;
  border:1px solid rgba(140,230,255,.28);
  background:rgba(0,0,0,.58);
  overflow:hidden;
  box-shadow:0 0 18px rgba(120,220,255,.18);
}

.vault-progress i{
  display:block;
  height:100%;
  width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(120,220,255,.95), rgba(160,255,190,.95), #fff);
  box-shadow:0 0 18px rgba(120,255,210,.62);
  animation:vaultProgress 4.25s linear forwards;
}

@keyframes vaultAtmosphere{
  from{transform:translateX(-8%) rotate(0deg);}
  to{transform:translateX(8%) rotate(1deg);}
}

@keyframes snakeTrail{
  0%{stroke-dashoffset:1030; opacity:0;}
  12%{opacity:1;}
  100%{stroke-dashoffset:0; opacity:.7;}
}

@keyframes snakeSlither{
  0%{stroke-dashoffset:1030; opacity:0;}
  10%{opacity:1;}
  100%{stroke-dashoffset:0; opacity:1;}
}

@keyframes snakeHeadMove{
  0%{offset-distance:0%; opacity:0;}
  8%{opacity:1;}
  100%{offset-distance:100%; opacity:1;}
}

@keyframes snakeFadeOut{
  0%,62%{opacity:1;}
  86%,100%{opacity:0;}
}

@keyframes vaultPinClick{
  0%,35%{filter:brightness(1);}
  45%{filter:brightness(2.1) drop-shadow(0 0 10px rgba(155,255,185,.85));}
  56%,100%{filter:brightness(1); transform:rotate(var(--r, 0deg)) translateY(-194px);}
}

@keyframes vaultWheelTurn{
  0%{transform:rotate(0deg);}
  72%{transform:rotate(405deg);}
  100%{transform:rotate(426deg);}
}

@keyframes vaultWheelTurnReverse{
  0%{transform:rotate(0deg);}
  72%{transform:rotate(-210deg);}
  100%{transform:rotate(-230deg);}
}

@keyframes vaultBoltRetract{
  0%,55%{opacity:1; transform:translate(0,0);}
  100%{opacity:.35; transform:scale(.3);}
}

@keyframes vaultLightBurst{
  0%,64%{opacity:0; transform:scale(.25);}
  74%{opacity:.9; transform:scale(1);}
  100%{opacity:.12; transform:scale(1.5);}
}

@keyframes vaultMechanismExit{
  0%,66%{opacity:1; transform:translate(-50%,-50%) scale(1);}
  84%{opacity:.4; transform:translate(-50%,-50%) scale(.94);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(.8);}
}

@keyframes vaultLeftSlide{
  0%,70%{transform:translateX(0);}
  100%{transform:translateX(-112%);}
}

@keyframes vaultRightSlide{
  0%,70%{transform:translateX(0);}
  100%{transform:translateX(112%);}
}

@keyframes vaultLogoReveal{
  0%,72%{opacity:0; transform:translate(-50%,-50%) scale(.86);}
  86%{opacity:1; transform:translate(-50%,-50%) scale(1.02);}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1);}
}

@keyframes vaultStatusText{
  0%{content:"SERPENT KEY ENGAGED";}
  34%{content:"PINS ALIGNING";}
  62%{content:"BOLTS RETRACTING";}
  82%{content:"VAULT OPEN";}
}

@keyframes vaultProgress{
  0%{width:0%;}
  28%{width:30%;}
  62%{width:72%;}
  100%{width:100%;}
}

/* Mobile-safe vault loader */
@media (max-width: 820px){
  .vault-scene{
    width:100vw;
    height:100dvh;
    min-height:100dvh;
    border-radius:0;
    border:0;
  }
  .vault-mechanism{
    width:88vw;
  }
  .vault-pin{
    width:16px;
    height:74px;
    margin-left:-8px;
    margin-top:-37px;
    transform-origin:center 150px;
  }
  .vault-status{
    bottom:84px;
    font-size:10px;
    letter-spacing:.18em;
  }
  .vault-progress{
    bottom:54px;
    width:76vw;
  }
  .vault-logo{
    font-size:clamp(48px, 17vw, 94px);
  }
  .snake-body{stroke-width:13;}
  .snake-trail{stroke-width:20;}
}

@media (prefers-reduced-motion: reduce){
  .vault-door,
  .vault-mechanism,
  .vault-ring,
  .vault-snake,
  .vault-light,
  .vault-logo,
  .vault-progress i{
    animation-duration:1ms !important;
    animation-delay:0s !important;
  }
}


/* v67 GIF vault loader — replaces serpent loader */
.loader.gif-loader,
#loader.gif-loader{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  display:grid !important;
  place-items:center !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.06), transparent 34%),
    linear-gradient(135deg, #020304, #090b0e 45%, #000) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transition:opacity .45s ease, visibility .45s ease !important;
  overflow:hidden !important;
}

.loader.gif-loader.hide,
.loader.gif-loader.bxr-force-hide,
#loader.gif-loader.hide,
#loader.gif-loader.bxr-force-hide{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.gif-loader-frame{
  position:relative !important;
  width:min(520px,82vw) !important;
  display:grid !important;
  place-items:center !important;
  gap:18px !important;
}

.gif-loader-frame img{
  width:min(430px,78vw) !important;
  height:auto !important;
  image-rendering:auto !important;
  border-radius:22px !important;
  box-shadow:
    0 0 55px rgba(0,0,0,.8),
    0 0 34px rgba(210,170,80,.16),
    inset 0 0 22px rgba(255,255,255,.06) !important;
}

.gif-loader-text{
  color:#f5f1e6 !important;
  font-family:'White On Black','Darkmode demo','Gemstone',Impact,monospace !important;
  font-size:15px !important;
  font-weight:900 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  text-shadow:
    0 0 9px rgba(255,245,210,.62),
    0 0 22px rgba(210,160,65,.30) !important;
}

.gif-loader-bar{
  width:min(360px,66vw) !important;
  height:6px !important;
  border-radius:999px !important;
  border:1px solid rgba(230,190,95,.34) !important;
  background:rgba(0,0,0,.64) !important;
  overflow:hidden !important;
  box-shadow:0 0 18px rgba(230,190,95,.18) !important;
}

.gif-loader-bar i{
  display:block !important;
  width:0% !important;
  height:100% !important;
  border-radius:inherit !important;
  background:linear-gradient(90deg, rgba(160,110,35,.95), rgba(255,230,160,.95), #fff) !important;
  box-shadow:0 0 16px rgba(255,220,150,.55) !important;
  animation:gifVaultLoad 1.45s linear forwards !important;
}

.loader.gif-loader.is-clicking .gif-loader-bar i{
  animation:gifVaultLoadClick 1.15s linear forwards !important;
}

@keyframes gifVaultLoad{
  from{width:0%;}
  to{width:100%;}
}

@keyframes gifVaultLoadClick{
  from{width:0%;}
  to{width:100%;}
}

/* Neutralize old custom vault/snake loader elements if any old markup survives */
.vault-scene,
.vault-door,
.vault-mechanism,
.vault-snake,
.vault-logo,
.vault-status,
.vault-progress{
  display:none !important;
}

@media(max-width:820px){
  .gif-loader-frame{
    width:92vw !important;
  }
  .gif-loader-frame img{
    width:min(360px,84vw) !important;
    border-radius:18px !important;
  }
  .gif-loader-text{
    font-size:12px !important;
    letter-spacing:.18em !important;
  }
}


/* v68 longer, smoother, seamless GIF vault loader */

.loader.gif-loader,
#loader.gif-loader{
  background:
    radial-gradient(circle at 50% 46%, rgba(210,170,85,.10), transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.10), transparent 42%),
    linear-gradient(135deg, #020304 0%, #080a0d 44%, #000 100%) !important;
  transition:opacity 1.05s ease, visibility 1.05s ease !important;
}

.loader.gif-loader::before,
#loader.gif-loader::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(circle at 50% 46%, transparent 0 22%, rgba(0,0,0,.42) 52%, rgba(0,0,0,.92) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 2px, transparent 2px 8px) !important;
  pointer-events:none !important;
  z-index:0 !important;
}

.loader.gif-loader::after,
#loader.gif-loader::after{
  content:"" !important;
  position:absolute !important;
  inset:-20% !important;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(210,170,80,.10), transparent 26%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.035), transparent) !important;
  filter:blur(18px) !important;
  opacity:.75 !important;
  animation:gifLoaderMist 5s ease-in-out infinite alternate !important;
  pointer-events:none !important;
  z-index:1 !important;
}

.gif-loader-frame{
  z-index:2 !important;
  width:min(620px,88vw) !important;
  gap:20px !important;
}

.gif-loader-frame::before{
  content:"" !important;
  position:absolute !important;
  inset:-58px !important;
  border-radius:42px !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(210,170,80,.18), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.10), rgba(0,0,0,.68) 72%, rgba(0,0,0,.96) 100%) !important;
  filter:blur(12px) !important;
  z-index:-1 !important;
  pointer-events:none !important;
}

.gif-loader-frame img{
  width:min(500px,84vw) !important;
  border-radius:26px !important;
  opacity:.92 !important;
  mix-blend-mode:screen !important;
  filter:
    brightness(.82)
    contrast(1.16)
    saturate(.82)
    drop-shadow(0 0 26px rgba(0,0,0,.85))
    drop-shadow(0 0 22px rgba(210,160,70,.18)) !important;
  box-shadow:
    0 0 85px rgba(0,0,0,.90),
    0 0 46px rgba(210,160,70,.12),
    inset 0 0 42px rgba(0,0,0,.58) !important;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 0 56%, rgba(0,0,0,.92) 66%, rgba(0,0,0,.42) 82%, transparent 100%) !important;
  mask-image:radial-gradient(ellipse at center, #000 0 56%, rgba(0,0,0,.92) 66%, rgba(0,0,0,.42) 82%, transparent 100%) !important;
}

.gif-loader-text{
  margin-top:-6px !important;
  color:rgba(245,241,230,.92) !important;
  opacity:.9 !important;
}

.gif-loader-bar{
  width:min(420px,72vw) !important;
}

.gif-loader-bar i{
  animation:gifVaultLoadLong 3.45s linear forwards !important;
}

.loader.gif-loader.is-clicking .gif-loader-bar i{
  animation:gifVaultLoadClickLong 2.65s linear forwards !important;
}

@keyframes gifVaultLoadLong{
  0%{width:0%;}
  22%{width:18%;}
  58%{width:64%;}
  100%{width:100%;}
}

@keyframes gifVaultLoadClickLong{
  0%{width:0%;}
  35%{width:38%;}
  100%{width:100%;}
}

@keyframes gifLoaderMist{
  from{transform:translateX(-2%) scale(1); opacity:.55;}
  to{transform:translateX(2%) scale(1.05); opacity:.85;}
}

@media(max-width:820px){
  .gif-loader-frame img{
    width:min(430px,90vw) !important;
    border-radius:20px !important;
  }
  .gif-loader-frame::before{
    inset:-34px !important;
  }
}


/* ==========================================================
   v69 custom realistic vault opening loader
   dial twists -> bolts unlock -> metal doors slide open
   ========================================================== */

.loader.custom-vault-loader,
#loader.custom-vault-loader{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(216,190,112,.08), transparent 26%),
    radial-gradient(circle at 50% 52%, rgba(110,160,170,.07), transparent 42%),
    linear-gradient(135deg, #010203 0%, #080a0d 48%, #000 100%) !important;
  transition:opacity .9s ease, visibility .9s ease !important;
}

.loader.custom-vault-loader.hide,
.loader.custom-vault-loader.bxr-force-hide,
#loader.custom-vault-loader.hide,
#loader.custom-vault-loader.bxr-force-hide{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.vault-room{
  position:relative;
  width:min(980px, 94vw);
  height:min(720px, 84vh);
  min-height:540px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.055), transparent 28%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 2px, transparent 2px 9px),
    linear-gradient(135deg, #12161a, #050607 50%, #15191d);
  border:1px solid rgba(210,245,255,.12);
  box-shadow:
    inset 0 0 120px rgba(0,0,0,.82),
    inset 0 0 26px rgba(255,255,255,.035),
    0 0 70px rgba(0,0,0,.85);
}

.vault-room::before{
  content:"";
  position:absolute;
  inset:-26%;
  background:
    linear-gradient(110deg, transparent 0 40%, rgba(255,255,255,.06) 48%, transparent 58%),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.05), transparent 16%),
    radial-gradient(circle at 78% 64%, rgba(210,160,70,.08), transparent 24%);
  opacity:.75;
  animation:v69Atmosphere 7s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:1;
}

.vault-backlight{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,245,205,.82) 0 4%, rgba(206,169,83,.34) 5% 16%, rgba(97,180,190,.12) 17% 30%, transparent 45%);
  opacity:0;
  animation:v69Backlight 4.9s ease forwards;
  z-index:2;
  pointer-events:none;
}

.vault-shell{
  position:relative;
  width:min(620px, 78vw);
  aspect-ratio:1/1;
  z-index:5;
  display:grid;
  place-items:center;
  perspective:1200px;
}

.vault-face{
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:12;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%, #101418 0 26%, #2b3339 27% 28%, #090b0e 29% 43%, #2b3137 44% 45%, #0b0e11 46% 100%),
    conic-gradient(from 8deg, #0a0d10, #343c43, #101418, #262d33, #090b0e, #3b444a, #0b0e11);
  border:2px solid rgba(230,245,255,.20);
  box-shadow:
    inset 0 0 85px rgba(0,0,0,.86),
    inset 0 0 28px rgba(255,255,255,.06),
    0 0 55px rgba(0,0,0,.82),
    0 0 38px rgba(210,170,80,.10);
  animation:v69FaceExit 4.9s cubic-bezier(.16,.86,.18,1) forwards;
}

.vault-steel-texture{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(118deg, transparent 0 14px, rgba(255,255,255,.035) 14px 15px),
    radial-gradient(circle at 52% 48%, transparent 0 36%, rgba(0,0,0,.48) 68%, rgba(0,0,0,.76) 100%);
  opacity:.74;
  mix-blend-mode:screen;
}

.vault-ring-xl,
.vault-ring-lg,
.vault-ring-mid{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(230,245,255,.16);
  box-shadow:inset 0 0 24px rgba(0,0,0,.5), 0 0 18px rgba(255,255,255,.025);
}

.vault-ring-xl{inset:7%;}
.vault-ring-lg{inset:20%; border-color:rgba(230,200,120,.16);}
.vault-ring-mid{inset:34%; border-color:rgba(210,245,255,.18);}

.vault-dial{
  position:absolute;
  left:50%;
  top:50%;
  width:40%;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%) rotate(0deg);
  border-radius:50%;
  z-index:16;
  background:
    radial-gradient(circle, #0a0d10 0 24%, #3b434a 25% 31%, #0b0e11 32% 100%);
  border:2px solid rgba(230,245,255,.22);
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.75),
    inset 0 0 10px rgba(255,255,255,.05),
    0 0 26px rgba(210,170,80,.16);
  animation:v69DialTwist 2.55s cubic-bezier(.2,.84,.16,1) forwards;
  will-change:transform;
}

.vault-dial-inner{
  position:absolute;
  inset:34%;
  border-radius:50%;
  background:radial-gradient(circle, #d8c07a 0 8%, #2c2414 9% 38%, #0a0d10 39% 100%);
  border:1px solid rgba(255,239,181,.38);
  box-shadow:0 0 18px rgba(218,175,79,.22), inset 0 0 12px rgba(0,0,0,.8);
  z-index:20;
}

.vault-dial-spoke{
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:48%;
  margin-left:-6px;
  margin-top:-48%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.18), #515b63, #11161a);
  transform-origin:center bottom;
  box-shadow:0 0 10px rgba(255,255,255,.05), inset 0 0 8px rgba(0,0,0,.5);
}

.vault-dial-spoke.s1{transform:rotate(0deg);}
.vault-dial-spoke.s2{transform:rotate(90deg);}
.vault-dial-spoke.s3{transform:rotate(180deg);}
.vault-dial-spoke.s4{transform:rotate(270deg);}

.vault-dial-centre{
  position:absolute;
  inset:44%;
  border-radius:50%;
  z-index:24;
  background:#dcc47c;
  box-shadow:0 0 14px rgba(220,190,110,.42);
}

.vault-bolt{
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:136px;
  margin-left:-9px;
  margin-top:-68px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.24), #6f7c84, #11161a);
  box-shadow:0 0 18px rgba(210,245,255,.08), inset 0 0 10px rgba(0,0,0,.54);
  transform-origin:center 235px;
  z-index:14;
  animation:v69BoltUnlock 3.45s cubic-bezier(.2,.84,.18,1) forwards;
}

.vault-bolt-1{transform:rotate(0deg) translateY(-235px);}
.vault-bolt-2{transform:rotate(90deg) translateY(-235px);}
.vault-bolt-3{transform:rotate(180deg) translateY(-235px);}
.vault-bolt-4{transform:rotate(270deg) translateY(-235px);}

.vault-door-piece{
  position:absolute;
  top:0;
  bottom:0;
  width:50.3%;
  z-index:10;
  background:
    linear-gradient(90deg, rgba(255,255,255,.07), transparent 18%, rgba(0,0,0,.45) 60%, rgba(255,255,255,.04)),
    repeating-linear-gradient(0deg, #191f24 0 22px, #0a0d10 22px 29px),
    linear-gradient(135deg, #161b20, #30373d 48%, #080a0d);
  border:1px solid rgba(230,245,255,.10);
  box-shadow:
    inset 0 0 52px rgba(255,255,255,.035),
    inset 0 0 120px rgba(0,0,0,.76),
    0 0 55px rgba(0,0,0,.75);
  animation-duration:4.9s;
  animation-timing-function:cubic-bezier(.14,.82,.16,1);
  animation-fill-mode:forwards;
  will-change:transform;
}

.vault-door-piece::before{
  content:"";
  position:absolute;
  inset:28px;
  border:1px solid rgba(230,245,255,.08);
  border-radius:18px;
  box-shadow:inset 0 0 28px rgba(0,0,0,.64);
}

.vault-door-left{
  left:0;
  border-radius:50% 0 0 50%;
  animation-name:v69LeftDoorSlide;
}

.vault-door-right{
  right:0;
  border-radius:0 50% 50% 0;
  animation-name:v69RightDoorSlide;
}

.vault-gap-light{
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:9;
  background:
    linear-gradient(90deg, transparent 42%, rgba(255,245,210,.88) 49%, rgba(255,245,210,.88) 51%, transparent 58%),
    radial-gradient(circle, rgba(255,255,255,.45), rgba(210,170,80,.18) 28%, transparent 58%);
  opacity:0;
  filter:blur(6px);
  animation:v69GapLight 4.9s ease forwards;
  pointer-events:none;
}

.vault-reveal-logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.92);
  z-index:6;
  color:#fff;
  font-family:Impact, "Arial Black", sans-serif;
  font-size:clamp(54px, 11vw, 150px);
  letter-spacing:.10em;
  text-shadow:
    0 0 12px rgba(255,255,255,.95),
    0 0 32px rgba(210,170,80,.34),
    0 0 70px rgba(120,220,255,.16);
  opacity:0;
  animation:v69LogoReveal 4.9s ease forwards;
}

.vault-dust{
  position:absolute;
  left:50%;
  top:70%;
  width:65%;
  height:46px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(220,185,95,.24), transparent 70%);
  filter:blur(13px);
  z-index:11;
  opacity:0;
  animation:v69Dust 4.9s ease forwards;
}

.dust-two{
  top:34%;
  width:50%;
  height:38px;
  animation-delay:.15s;
}

.vault-copy{
  position:absolute;
  left:50%;
  bottom:76px;
  transform:translateX(-50%);
  z-index:30;
  color:#f5f1e6;
  font-family:'White On Black','Darkmode demo','Gemstone',Impact,monospace;
  font-weight:900;
  font-size:13px;
  letter-spacing:.24em;
  text-transform:uppercase;
  text-shadow:0 0 12px rgba(218,175,79,.55);
  white-space:nowrap;
}

.vault-copy::after{
  content:"";
  animation:v69StatusWords 4.9s steps(1,end) forwards;
}

.vault-progress{
  position:absolute;
  left:50%;
  bottom:44px;
  transform:translateX(-50%);
  width:min(460px, 70vw);
  height:7px;
  z-index:30;
  border-radius:999px;
  border:1px solid rgba(230,190,95,.32);
  background:rgba(0,0,0,.62);
  overflow:hidden;
  box-shadow:0 0 18px rgba(230,190,95,.16);
}

.vault-progress i{
  display:block;
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(132,91,28,.95), rgba(255,230,160,.95), #fff);
  box-shadow:0 0 16px rgba(255,220,150,.48);
  animation:v69Progress 4.55s linear forwards;
}

@keyframes v69Atmosphere{
  from{transform:translateX(-3%) translateY(-1%);}
  to{transform:translateX(3%) translateY(1%);}
}

@keyframes v69DialTwist{
  0%{transform:translate(-50%,-50%) rotate(0deg) scale(.98);}
  22%{transform:translate(-50%,-50%) rotate(168deg) scale(1);}
  48%{transform:translate(-50%,-50%) rotate(-78deg) scale(1.02);}
  70%{transform:translate(-50%,-50%) rotate(382deg) scale(1);}
  100%{transform:translate(-50%,-50%) rotate(416deg) scale(.98);}
}

@keyframes v69BoltUnlock{
  0%,58%{opacity:1; filter:brightness(1);}
  70%{opacity:1; filter:brightness(2.2) drop-shadow(0 0 10px rgba(255,230,160,.8));}
  100%{opacity:.25; transform:scale(.25);}
}

@keyframes v69FaceExit{
  0%,64%{opacity:1; transform:scale(1);}
  78%{opacity:.75; transform:scale(.98);}
  100%{opacity:0; transform:scale(.82);}
}

@keyframes v69LeftDoorSlide{
  0%,70%{transform:translateX(0);}
  100%{transform:translateX(-112%);}
}

@keyframes v69RightDoorSlide{
  0%,70%{transform:translateX(0);}
  100%{transform:translateX(112%);}
}

@keyframes v69GapLight{
  0%,63%{opacity:0; transform:scale(.4);}
  75%{opacity:.72; transform:scale(1);}
  100%{opacity:.18; transform:scale(1.35);}
}

@keyframes v69Backlight{
  0%,66%{opacity:0; transform:scale(.7);}
  78%{opacity:.75; transform:scale(1);}
  100%{opacity:.24; transform:scale(1.3);}
}

@keyframes v69LogoReveal{
  0%,72%{opacity:0; transform:translate(-50%,-50%) scale(.84);}
  86%{opacity:1; transform:translate(-50%,-50%) scale(1.04);}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1);}
}

@keyframes v69Dust{
  0%,65%{opacity:0; transform:translateX(-50%) scaleX(.35);}
  78%{opacity:.72; transform:translateX(-50%) scaleX(1);}
  100%{opacity:.18; transform:translateX(-50%) scaleX(1.35);}
}

@keyframes v69Progress{
  0%{width:0%;}
  25%{width:28%;}
  60%{width:68%;}
  100%{width:100%;}
}

@keyframes v69StatusWords{
  0%{content:"";}
  1%{content:" LOCK ENGAGED";}
  35%{content:" DIAL TWISTING";}
  62%{content:" BOLTS RETRACTING";}
  82%{content:" VAULT OPENING";}
}

@media(max-width:820px){
  .vault-room{
    width:100vw;
    height:100dvh;
    min-height:100dvh;
    border-radius:0;
    border:0;
  }

  .vault-shell{
    width:86vw;
  }

  .vault-copy{
    bottom:86px;
    font-size:10px;
    letter-spacing:.18em;
  }

  .vault-progress{
    bottom:56px;
    width:76vw;
  }

  .vault-bolt{
    height:94px;
    margin-top:-47px;
    transform-origin:center 164px;
  }

  .vault-reveal-logo{
    font-size:clamp(46px, 17vw, 92px);
  }
}

@media(prefers-reduced-motion: reduce){
  .vault-dial,
  .vault-bolt,
  .vault-face,
  .vault-door-piece,
  .vault-gap-light,
  .vault-backlight,
  .vault-reveal-logo,
  .vault-progress i{
    animation-duration:.01ms !important;
    animation-delay:0s !important;
  }
}


/* ==========================================================
   v70 click-to-open realistic vault loader
   - no movement until user clicks the vault
   - no weird scan/grid lines
   - cleaner realistic metal safe look
   ========================================================== */

/* stop v69 animations until click */
.loader.custom-vault-loader:not(.vault-opening) .vault-dial,
.loader.custom-vault-loader:not(.vault-opening) .vault-bolt,
.loader.custom-vault-loader:not(.vault-opening) .vault-face,
.loader.custom-vault-loader:not(.vault-opening) .vault-door-piece,
.loader.custom-vault-loader:not(.vault-opening) .vault-gap-light,
.loader.custom-vault-loader:not(.vault-opening) .vault-backlight,
.loader.custom-vault-loader:not(.vault-opening) .vault-reveal-logo,
.loader.custom-vault-loader:not(.vault-opening) .vault-dust,
.loader.custom-vault-loader:not(.vault-opening) .vault-progress i,
.loader.custom-vault-loader:not(.vault-opening) .vault-room::before{
  animation-play-state:paused !important;
}

/* don't show progress until click */
.loader.custom-vault-loader:not(.vault-opening) .vault-progress i{
  width:0% !important;
}

/* no scanline/grid texture */
.vault-room{
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.055), transparent 28%),
    radial-gradient(circle at 48% 56%, rgba(210,170,90,.045), transparent 36%),
    linear-gradient(145deg, #15191c 0%, #06080a 52%, #111417 100%) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 0 130px rgba(0,0,0,.88),
    inset 0 0 24px rgba(255,255,255,.04),
    0 0 70px rgba(0,0,0,.86) !important;
}

.vault-room::before{
  background:
    radial-gradient(circle at 26% 26%, rgba(255,255,255,.04), transparent 18%),
    radial-gradient(circle at 80% 68%, rgba(210,170,90,.06), transparent 24%) !important;
  opacity:.65 !important;
}

/* more realistic solid safe metal */
.vault-face{
  background:
    radial-gradient(circle at 45% 36%, rgba(255,255,255,.12), transparent 12%),
    radial-gradient(circle at 58% 62%, rgba(0,0,0,.34), transparent 18%),
    radial-gradient(circle, #14191d 0 24%, #2b3135 25% 26%, #101418 27% 42%, #343a3f 43% 44%, #080a0c 45% 100%),
    conic-gradient(from 20deg, #050607, #343a40, #151a1e, #080a0c, #2a3035, #0b0d0f) !important;
  border:2px solid rgba(235,238,232,.18) !important;
  box-shadow:
    inset 0 0 100px rgba(0,0,0,.90),
    inset 12px 12px 30px rgba(255,255,255,.045),
    inset -18px -18px 42px rgba(0,0,0,.72),
    0 0 60px rgba(0,0,0,.85),
    0 0 28px rgba(210,170,80,.10) !important;
}

/* replace weird texture with subtle scratches and grime only */
.vault-steel-texture{
  background:
    linear-gradient(24deg, transparent 0 34%, rgba(255,255,255,.045) 34.5%, transparent 35.5%),
    linear-gradient(117deg, transparent 0 58%, rgba(255,255,255,.035) 58.5%, transparent 59.5%),
    linear-gradient(160deg, transparent 0 46%, rgba(0,0,0,.20) 46.5%, transparent 47.2%),
    radial-gradient(circle at 50% 50%, transparent 0 44%, rgba(0,0,0,.56) 78%, rgba(0,0,0,.82) 100%) !important;
  opacity:.52 !important;
  mix-blend-mode:normal !important;
}

/* realistic door slabs, no stripes/lines */
.vault-door-piece{
  background:
    radial-gradient(circle at 36% 26%, rgba(255,255,255,.075), transparent 16%),
    radial-gradient(circle at 72% 70%, rgba(0,0,0,.36), transparent 22%),
    linear-gradient(112deg, rgba(255,255,255,.08), transparent 18%, rgba(0,0,0,.50) 61%, rgba(255,255,255,.04)),
    linear-gradient(145deg, #1c2227 0%, #2d343a 36%, #11161a 72%, #07090b 100%) !important;
  border-color:rgba(235,238,232,.12) !important;
  box-shadow:
    inset 0 0 60px rgba(255,255,255,.035),
    inset 0 0 135px rgba(0,0,0,.78),
    0 0 58px rgba(0,0,0,.76) !important;
}

.vault-door-piece::before{
  border-color:rgba(255,255,255,.075) !important;
  box-shadow:
    inset 0 0 38px rgba(0,0,0,.70),
    inset 8px 8px 16px rgba(255,255,255,.025) !important;
}

/* make dial/bolts more 3D */
.vault-dial{
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.20), transparent 14%),
    radial-gradient(circle, #07090b 0 24%, #58636b 25% 31%, #0a0d10 32% 100%) !important;
  box-shadow:
    inset 0 0 38px rgba(0,0,0,.78),
    inset 8px 8px 16px rgba(255,255,255,.055),
    inset -12px -12px 20px rgba(0,0,0,.66),
    0 0 30px rgba(210,170,80,.15) !important;
}

.vault-dial-spoke,
.vault-bolt{
  background:
    linear-gradient(90deg, rgba(255,255,255,.32), #747f86 34%, #20272d 70%, #050607) !important;
}

/* click prompt */
.vault-copy{
  font-size:14px !important;
  letter-spacing:.20em !important;
}

.loader.custom-vault-loader:not(.vault-opening) .vault-copy{
  color:#f8efe0 !important;
}

.loader.custom-vault-loader:not(.vault-opening) .vault-copy::after{
  content:" CLICK VAULT TO UNLOCK" !important;
  animation:none !important;
}

.loader.custom-vault-loader.vault-opening .vault-copy::after{
  animation:v69StatusWords 4.9s steps(1,end) forwards !important;
}

/* make the vault clickable */
.vault-shell{
  cursor:pointer !important;
}
.vault-shell:hover .vault-dial{
  filter:brightness(1.12) drop-shadow(0 0 14px rgba(210,170,80,.22));
}

/* prevent hidden reveal/logo before click */
.loader.custom-vault-loader:not(.vault-opening) .vault-reveal-logo,
.loader.custom-vault-loader:not(.vault-opening) .vault-backlight,
.loader.custom-vault-loader:not(.vault-opening) .vault-gap-light,
.loader.custom-vault-loader:not(.vault-opening) .vault-dust{
  opacity:0 !important;
}

/* iPhone: keep click target obvious */
@media(max-width:820px){
  .vault-copy{
    bottom:96px !important;
    font-size:11px !important;
  }
}


/* ==========================================================
   v71 price typography + iPhone compatibility
   Desktop/laptop stays the same; mobile rules are iPhone-only.
   ========================================================== */

/* Item cost / price typography */
.price,
.product-price,
.item-price,
.cost,
[data-price],
.product-card .price,
.product-card [class*="price"],
.shop-card .price,
.shop-card [class*="price"],
.vote-card .price,
.vote-card [class*="price"]{
  font-family:'White On Black','Darkmode demo','Gemstone',Impact,monospace !important;
  font-size:clamp(1.15rem, 1.5vw, 1.65rem) !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
  font-weight:900 !important;
  color:#f8fdff !important;
  text-shadow:
    0 0 7px rgba(255,255,255,.72),
    0 0 14px rgba(75,205,255,.28) !important;
  background:
    linear-gradient(135deg, rgba(10,18,24,.78), rgba(4,7,12,.92)) !important;
  border:1px solid rgba(75,205,255,.34) !important;
  border-radius:12px !important;
  padding:.42rem .72rem !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:38px !important;
  box-shadow:
    0 0 14px rgba(75,205,255,.12),
    inset 0 0 12px rgba(255,255,255,.035) !important;
}

/* iPhone / small mobile optimisation only */
@media only screen and (max-width: 820px){
  html, body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    -webkit-text-size-adjust:100% !important;
  }

  body{
    padding-left:env(safe-area-inset-left) !important;
    padding-right:env(safe-area-inset-right) !important;
  }

  .brand-head{
    padding:16px 12px 6px !important;
  }

  .brand-head .logo,
  .logo{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
  }

  .brand-head .logo img,
  .logo img{
    width:min(500px,92vw) !important;
    max-width:92vw !important;
    height:auto !important;
  }

  .nav-strip{
    width:94vw !important;
    max-width:94vw !important;
    margin:8px auto 16px !important;
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:9px !important;
    position:relative !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    padding:0 !important;
  }

  .nav-strip.is-fixed{
    position:sticky !important;
    top:8px !important;
    left:auto !important;
    transform:none !important;
  }

  .nav-strip a,
  .bxr-nav-link{
    width:100% !important;
    min-width:0 !important;
    min-height:46px !important;
    padding:9px 6px !important;
    border-radius:12px !important;
    font-size:11px !important;
    letter-spacing:.075em !important;
    white-space:nowrap !important;
  }

  h1,
  .hero h1,
  .page-hero h1,
  .section-title,
  .hero-title{
    font-size:clamp(2.6rem, 15vw, 5.6rem) !important;
    line-height:.9 !important;
    letter-spacing:.035em !important;
    max-width:94vw !important;
    overflow-wrap:normal !important;
  }

  h2,
  .product-section h2,
  .vote-section h2{
    font-size:clamp(2rem, 10vw, 4rem) !important;
    line-height:.95 !important;
  }

  p,
  .hero p,
  .page-hero p,
  .product-card p{
    font-size:clamp(.95rem, 3.6vw, 1.08rem) !important;
    line-height:1.45 !important;
  }

  .hero,
  .collage-section,
  .page-hero{
    width:100% !important;
    max-width:100vw !important;
    overflow:hidden !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .hero-copy{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:92vw !important;
    z-index:20 !important;
  }

  .product-grid,
  .vote-grid,
  .shop-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    width:94vw !important;
    max-width:94vw !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .product-card,
  .vote-card,
  .shop-card,
  .item-card{
    width:100% !important;
    max-width:100% !important;
    min-height:auto !important;
    padding:16px !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }

  .product-card img,
  .shop-card img,
  .item-card img,
  .vote-card img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:330px !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  .price,
  .product-price,
  .item-price,
  .cost,
  [data-price],
  .product-card .price,
  .product-card [class*="price"]{
    font-size:clamp(1rem, 5vw, 1.35rem) !important;
    min-height:40px !important;
    padding:.45rem .7rem !important;
    border-radius:12px !important;
  }

  button,
  a,
  input,
  textarea,
  select,
  .action-btn,
  .paper-btn{
    min-height:44px !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:rgba(75,205,255,.18) !important;
  }

  input,
  textarea,
  select{
    font-size:16px !important;
  }

  .builder-page{
    width:96vw !important;
    max-width:96vw !important;
    margin:0 auto !important;
    padding:8px 0 34px !important;
  }

  .fit-stage-wrap{
    display:block !important;
    width:100% !important;
  }

  .fit-stage{
    width:100% !important;
    height:72svh !important;
    min-height:650px !important;
    max-height:760px !important;
    border-radius:18px !important;
    margin-bottom:16px !important;
    overflow:hidden !important;
  }

  .fit-side{
    width:100% !important;
    display:grid !important;
    gap:14px !important;
  }

  .fit-controls,
  .random-panel,
  .save-panel{
    padding:14px !important;
    border-radius:16px !important;
  }

  .fit-row{
    padding:12px !important;
    margin-bottom:10px !important;
  }

  .arrow-pair{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .arrow-pair button,
  .fit-row button,
  #randomizeFit,
  #pinFit,
  #saveDevice,
  #downloadFit,
  #shareFit{
    width:100% !important;
    min-height:52px !important;
    font-size:12px !important;
    letter-spacing:.075em !important;
    padding:10px 8px !important;
  }

  #topLayer,
  .top-layer{
    width:min(390px,72%) !important;
    max-height:315px !important;
    top:64px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
  }

  img#topLayer[src*="shirt"],
  img#topLayer[src*="tee"],
  img#topLayer[src*="polo"]{
    width:min(360px,68%) !important;
    max-height:285px !important;
    top:82px !important;
  }

  img#topLayer[src*="hoodie"],
  img#topLayer[src*="jacket"]{
    width:min(470px,86%) !important;
    max-height:380px !important;
    top:22px !important;
  }

  #pantsLayer,
  .pants-layer{
    width:min(390px,70%) !important;
    max-height:360px !important;
    top:350px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
  }

  #pantsLayer.is-jorts,
  #pantsLayer.is-shorts,
  img#pantsLayer[src*="jorts"],
  img#pantsLayer[src*="short"]{
    width:min(390px,70%) !important;
    max-height:260px !important;
    top:340px !important;
  }

  .preview-orbit img[data-kind="top"],
  .bxr-preview.top{
    width:86px !important;
    max-height:118px !important;
    top:82px !important;
    right:4% !important;
  }

  .preview-orbit img[data-kind="pants"],
  .bxr-preview.pants{
    width:90px !important;
    max-height:125px !important;
    top:380px !important;
    right:4% !important;
  }

  .vault-room{
    width:100vw !important;
    height:100svh !important;
    min-height:100svh !important;
    border-radius:0 !important;
  }

  .vault-shell{
    width:84vw !important;
  }

  .vault-copy{
    bottom:96px !important;
    font-size:10px !important;
    letter-spacing:.16em !important;
  }

  .vault-progress{
    bottom:58px !important;
    width:76vw !important;
  }

  .login-page,
  .about-page{
    width:92vw !important;
    margin:22px auto 80px !important;
  }

  .login-page-card,
  .about-page .page-hero,
  .bank-payment-card{
    padding:22px !important;
    border-radius:18px !important;
  }

  .bank-payment-card p{
    font-size:14px !important;
    word-break:break-word !important;
  }

  .cart-drawer{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    width:auto !important;
    max-width:none !important;
  }
}

@media only screen and (max-width: 390px){
  .nav-strip{
    gap:7px !important;
  }

  .nav-strip a,
  .bxr-nav-link{
    font-size:10px !important;
    padding:8px 4px !important;
    letter-spacing:.06em !important;
  }

  h1,
  .hero h1,
  .page-hero h1{
    font-size:clamp(2.3rem, 14vw, 4.7rem) !important;
  }

  .fit-stage{
    min-height:610px !important;
  }

  #topLayer,
  .top-layer{
    top:56px !important;
  }

  #pantsLayer,
  .pants-layer{
    top:320px !important;
  }

  #pantsLayer.is-jorts,
  #pantsLayer.is-shorts{
    top:312px !important;
  }
}

@media only screen and (max-width: 920px) and (max-height: 520px){
  .brand-head{
    padding:8px 12px 4px !important;
  }

  .brand-head .logo img,
  .logo img{
    width:min(360px,62vw) !important;
  }

  .nav-strip{
    grid-template-columns:repeat(6, minmax(0,1fr)) !important;
  }

  .nav-strip a{
    min-height:38px !important;
    font-size:9px !important;
  }

  .fit-stage{
    height:84svh !important;
    min-height:440px !important;
  }
}


/* ==========================================================
   v72 simple safe open loader + wild landing page animation
   ========================================================== */

/* Kill old vault/snake/gif loader visuals if old pieces remain */
.vault-room,
.vault-shell,
.vault-face,
.vault-door-piece,
.vault-dial,
.vault-bolt,
.gif-loader-frame,
.vault-scene,
.vault-mechanism{
  display:none !important;
}

/* Simple realistic safe loader, once per site open */
.loader.simple-safe-loader,
#loader.simple-safe-loader{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,230,150,.10), transparent 25%),
    linear-gradient(135deg, #030405, #0a0d10 48%, #000) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transition:opacity .7s ease, visibility .7s ease !important;
}

.loader.simple-safe-loader.hide,
.loader.simple-safe-loader.bxr-force-hide,
#loader.simple-safe-loader.hide,
#loader.simple-safe-loader.bxr-force-hide{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.safe-load-scene{
  position:relative;
  width:min(520px,82vw);
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 0 55px rgba(0,0,0,.9));
}

.safe-door{
  position:absolute;
  inset:4%;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.12), transparent 14%),
    radial-gradient(circle at 50% 50%, #171d22 0 32%, #333b42 33% 35%, #0b0e11 36% 100%),
    conic-gradient(from 30deg, #080a0c, #353d43, #12161a, #07090b, #2d343a, #090b0e);
  border:2px solid rgba(240,245,245,.18);
  box-shadow:
    inset 0 0 95px rgba(0,0,0,.88),
    inset 16px 16px 30px rgba(255,255,255,.05),
    inset -22px -22px 48px rgba(0,0,0,.7),
    0 0 42px rgba(220,180,80,.10);
  animation:safeDoorOpenV72 2.15s cubic-bezier(.15,.82,.18,1) forwards;
}

.safe-metal{
  position:absolute;
  inset:0;
  background:
    linear-gradient(27deg, transparent 0 34%, rgba(255,255,255,.045) 34.5%, transparent 35.4%),
    linear-gradient(141deg, transparent 0 55%, rgba(255,255,255,.035) 55.4%, transparent 56%),
    radial-gradient(circle at center, transparent 0 48%, rgba(0,0,0,.58) 82%, rgba(0,0,0,.84) 100%);
  opacity:.55;
}

.safe-dial{
  position:absolute;
  left:50%;
  top:50%;
  width:36%;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.20), transparent 13%),
    radial-gradient(circle, #07090b 0 24%, #59636b 25% 31%, #0b0e11 32% 100%);
  border:2px solid rgba(230,245,255,.20);
  box-shadow:
    inset 0 0 35px rgba(0,0,0,.78),
    inset 8px 8px 16px rgba(255,255,255,.055),
    0 0 25px rgba(220,180,80,.18);
  animation:safeDialTurnV72 1.25s cubic-bezier(.2,.84,.16,1) forwards;
  z-index:4;
}

.safe-dial i{
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:48%;
  margin-left:-5px;
  margin-top:-48%;
  border-radius:999px;
  transform-origin:center bottom;
  background:linear-gradient(90deg, rgba(255,255,255,.30), #727b82 35%, #151b20 75%);
  box-shadow:inset 0 0 8px rgba(0,0,0,.55);
}
.safe-dial i:nth-child(1){transform:rotate(0deg);}
.safe-dial i:nth-child(2){transform:rotate(90deg);}
.safe-dial i:nth-child(3){transform:rotate(180deg);}
.safe-dial i:nth-child(4){transform:rotate(270deg);}

.safe-dial b{
  position:absolute;
  inset:43%;
  border-radius:50%;
  background:#ddc47c;
  box-shadow:0 0 12px rgba(220,190,110,.45);
}

.safe-bolts span{
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:118px;
  margin-left:-8px;
  margin-top:-59px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.32), #747f86 34%, #20272d 70%, #050607);
  transform-origin:center 202px;
  animation:safeBoltRetractV72 1.55s cubic-bezier(.2,.84,.18,1) forwards;
  z-index:3;
}
.safe-bolts span:nth-child(1){transform:rotate(0deg) translateY(-202px);}
.safe-bolts span:nth-child(2){transform:rotate(90deg) translateY(-202px);}
.safe-bolts span:nth-child(3){transform:rotate(180deg) translateY(-202px);}
.safe-bolts span:nth-child(4){transform:rotate(270deg) translateY(-202px);}

.safe-reveal{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.9);
  color:#fff;
  font-family:Impact, "Arial Black", sans-serif;
  font-size:clamp(48px, 12vw, 120px);
  letter-spacing:.1em;
  text-shadow:
    0 0 12px rgba(255,255,255,.92),
    0 0 34px rgba(220,180,80,.34);
  opacity:0;
  animation:safeLogoRevealV72 2.15s ease forwards;
}

.safe-load-text{
  position:absolute;
  bottom:-46px;
  left:50%;
  transform:translateX(-50%);
  color:#f5f1e6;
  font:900 13px monospace;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-shadow:0 0 12px rgba(220,180,80,.55);
}

@keyframes safeDialTurnV72{
  0%{transform:translate(-50%,-50%) rotate(0deg);}
  48%{transform:translate(-50%,-50%) rotate(210deg);}
  100%{transform:translate(-50%,-50%) rotate(385deg);}
}

@keyframes safeBoltRetractV72{
  0%,55%{opacity:1;}
  100%{opacity:.2; transform:scale(.25);}
}

@keyframes safeDoorOpenV72{
  0%,58%{transform:translateX(0) rotateY(0deg); opacity:1;}
  100%{transform:translateX(-95%) rotateY(-18deg); opacity:.18;}
}

@keyframes safeLogoRevealV72{
  0%,60%{opacity:0; transform:translate(-50%,-50%) scale(.84);}
  82%{opacity:1; transform:translate(-50%,-50%) scale(1.04);}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1);}
}

/* Landing page new animation layer */
.bxr-landing-fx{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
  opacity:.85;
}

.bxr-landing-fx span{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  box-shadow:
    0 0 8px rgba(255,255,255,.65),
    0 0 18px rgba(80,210,255,.30);
  animation:bxrSparkFloat var(--dur,4s) linear infinite;
  animation-delay:var(--delay,0s);
}

.bxr-landing-wipe{
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
  background:
    linear-gradient(105deg, transparent 0 30%, rgba(255,255,255,.10) 43%, rgba(80,210,255,.20) 49%, rgba(255,255,255,.08) 55%, transparent 70%),
    linear-gradient(135deg, rgba(0,0,0,.92), rgba(5,9,12,.58), transparent);
  transform:translateX(-120%) skewX(-12deg);
  animation:bxrMetalPageWipe 1.35s cubic-bezier(.15,.86,.19,1) .08s forwards;
}

body.bxr-page-enter .brand-head,
body.bxr-page-enter .hero-copy,
body.bxr-page-enter main > section,
body.bxr-page-enter .product-card,
body.bxr-page-enter .vote-card,
body.bxr-page-enter .fit-stage,
body.bxr-page-enter .fit-side{
  animation:bxrPageRise .9s cubic-bezier(.15,.86,.19,1) both;
}

body.bxr-page-enter .brand-head{animation-delay:.08s;}
body.bxr-page-enter .hero-copy{animation-delay:.16s;}
body.bxr-page-enter main > section{animation-delay:.22s;}
body.bxr-page-enter .product-card:nth-child(1),
body.bxr-page-enter .vote-card:nth-child(1){animation-delay:.28s;}
body.bxr-page-enter .product-card:nth-child(2),
body.bxr-page-enter .vote-card:nth-child(2){animation-delay:.36s;}
body.bxr-page-enter .product-card:nth-child(3),
body.bxr-page-enter .vote-card:nth-child(3){animation-delay:.44s;}
body.bxr-page-enter .product-card:nth-child(4),
body.bxr-page-enter .vote-card:nth-child(4){animation-delay:.52s;}

body.bxr-page-enter h1,
body.bxr-page-enter .section-title,
body.bxr-page-enter .hero-title{
  animation:bxrTitleGlitch 1.1s steps(2,end) .25s both;
}

@keyframes bxrMetalPageWipe{
  0%{transform:translateX(-120%) skewX(-12deg); opacity:1;}
  72%{opacity:1;}
  100%{transform:translateX(120%) skewX(-12deg); opacity:0;}
}

@keyframes bxrPageRise{
  0%{opacity:0; transform:translateY(32px) scale(.985); filter:blur(8px);}
  100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0);}
}

@keyframes bxrTitleGlitch{
  0%{text-shadow:3px 0 rgba(0,220,255,.75), -3px 0 rgba(255,255,255,.35); transform:translateX(-2px);}
  12%{text-shadow:-4px 0 rgba(255,255,255,.55), 4px 0 rgba(0,220,255,.55); transform:translateX(2px);}
  24%{text-shadow:2px 0 rgba(0,220,255,.60), -2px 0 rgba(255,255,255,.35); transform:translateX(-1px);}
  40%,100%{text-shadow:inherit; transform:none;}
}

@keyframes bxrSparkFloat{
  0%{transform:translate3d(0, 8vh, 0) scale(.55); opacity:0;}
  12%{opacity:1;}
  100%{transform:translate3d(var(--dx, 20px), -110vh, 0) scale(1.2); opacity:0;}
}

@media(max-width:820px){
  .safe-load-scene{width:min(390px,82vw);}
  .safe-load-text{font-size:11px; bottom:-40px;}
  .bxr-landing-fx span:nth-child(n+26){display:none;}
}


/* ==========================================================
   v73 uploaded vault image loader + global 10% larger text
   ========================================================== */

/* whole website text 10% bigger */
html{
  font-size:110% !important;
}
button,
input,
textarea,
select{
  font-size:1.1em !important;
}

/* remove/neutralize previous safe/vault loader visuals */
.simple-safe-loader .safe-load-scene,
.custom-vault-loader .vault-room,
.gif-loader .gif-loader-frame,
.vault-room,
.vault-shell,
.vault-face,
.vault-door-piece,
.vault-dial,
.vault-bolt,
.safe-load-scene,
.safe-door,
.safe-dial,
.safe-bolts{
  display:none !important;
}

/* New uploaded vault image loader */
.loader.image-vault-loader,
#loader.image-vault-loader{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(210,170,90,.14), transparent 32%),
    linear-gradient(135deg, #030304, #090b0d 50%, #000) !important;
  transition:opacity .75s ease, visibility .75s ease !important;
}

.loader.image-vault-loader.hide,
.loader.image-vault-loader.bxr-force-hide,
#loader.image-vault-loader.hide,
#loader.image-vault-loader.bxr-force-hide{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.image-vault-scene{
  position:relative !important;
  width:min(760px,90vw) !important;
  aspect-ratio:1/1 !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
  filter:drop-shadow(0 0 60px rgba(0,0,0,.9)) !important;
}

.vault-bg-glow{
  position:absolute !important;
  inset:8% !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle, rgba(255,240,190,.48), rgba(210,160,75,.15) 34%, transparent 65%) !important;
  filter:blur(26px) !important;
  opacity:0 !important;
  animation:v73VaultGlow 3.25s ease forwards !important;
  z-index:1 !important;
}

.vault-img-wrap{
  position:relative !important;
  width:100% !important;
  aspect-ratio:1/1 !important;
  border-radius:50% !important;
  overflow:hidden !important;
  z-index:4 !important;
}

.vault-img-full{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  opacity:1 !important;
  filter:
    brightness(.88)
    contrast(1.15)
    saturate(.92)
    drop-shadow(0 0 22px rgba(0,0,0,.85)) !important;
  animation:v73VaultFaceFade 3.25s ease forwards !important;
  z-index:2 !important;
}

/* split the uploaded vault image into left and right sliding doors */
.vault-img-half{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  width:50% !important;
  background-image:url("assets/real-vault-loader.png") !important;
  background-size:200% 100% !important;
  background-repeat:no-repeat !important;
  filter:
    brightness(.94)
    contrast(1.18)
    saturate(.92)
    drop-shadow(0 0 18px rgba(0,0,0,.75)) !important;
  z-index:6 !important;
  will-change:transform !important;
}

.vault-img-left{
  left:0 !important;
  background-position:left center !important;
  transform-origin:left center !important;
  animation:v73VaultLeftOpen 3.25s cubic-bezier(.15,.82,.17,1) forwards !important;
}

.vault-img-right{
  right:0 !important;
  background-position:right center !important;
  transform-origin:right center !important;
  animation:v73VaultRightOpen 3.25s cubic-bezier(.15,.82,.17,1) forwards !important;
}

.vault-img-dial{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:24% !important;
  aspect-ratio:1/1 !important;
  transform:translate(-50%,-50%) rotate(0deg) !important;
  border-radius:50% !important;
  background-image:url("assets/real-vault-loader.png") !important;
  background-size:416% 416% !important;
  background-position:center center !important;
  box-shadow:
    0 0 22px rgba(0,0,0,.65),
    0 0 18px rgba(235,190,95,.18) !important;
  filter:brightness(.95) contrast(1.2) !important;
  z-index:10 !important;
  animation:v73VaultDialTurn 1.45s cubic-bezier(.2,.85,.18,1) forwards !important;
}

.vault-open-light{
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(90deg, transparent 42%, rgba(255,245,200,.85) 49%, rgba(255,245,200,.85) 51%, transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.62), rgba(235,185,90,.28) 26%, transparent 58%) !important;
  filter:blur(7px) !important;
  opacity:0 !important;
  z-index:5 !important;
  animation:v73VaultLight 3.25s ease forwards !important;
}

.vault-loader-logo{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) scale(.92) !important;
  color:#fff !important;
  font-family:Impact,'Arial Black',sans-serif !important;
  font-size:clamp(54px,11vw,140px) !important;
  letter-spacing:.1em !important;
  text-shadow:
    0 0 12px rgba(255,255,255,.95),
    0 0 38px rgba(235,185,90,.40),
    0 0 72px rgba(0,0,0,.35) !important;
  opacity:0 !important;
  z-index:3 !important;
  animation:v73VaultLogoReveal 3.25s ease forwards !important;
}

.vault-loader-text{
  position:absolute !important;
  bottom:-38px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  color:#f5f1e6 !important;
  font:900 15px monospace !important;
  letter-spacing:.24em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  text-shadow:0 0 14px rgba(235,185,90,.55) !important;
  z-index:10 !important;
}

/* Price placement under hoodie/shop items */
.product-card,
.shop-card,
.item-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}

.product-card img,
.shop-card img,
.item-card img{
  order:1 !important;
}

.product-card h3,
.shop-card h3,
.item-card h3{
  order:2 !important;
}

.price,
.product-price,
.item-price,
.cost,
[data-price],
.product-card .price,
.product-card [class*="price"],
.shop-card .price,
.shop-card [class*="price"],
.item-card .price,
.item-card [class*="price"]{
  order:3 !important;
  margin:.6rem auto .8rem !important;
  align-self:center !important;
}

.product-card p,
.shop-card p,
.item-card p{
  order:4 !important;
}

.product-card button,
.shop-card button,
.item-card button,
.product-card a.button,
.shop-card a.button,
.item-card a.button{
  order:5 !important;
}

/* If prices are plain text/spans near headings, force common money spans below */
.product-card span,
.shop-card span,
.item-card span{
  max-width:100%;
}

@keyframes v73VaultDialTurn{
  0%{transform:translate(-50%,-50%) rotate(0deg) scale(1);}
  45%{transform:translate(-50%,-50%) rotate(220deg) scale(1.03);}
  100%{transform:translate(-50%,-50%) rotate(400deg) scale(.98);}
}

@keyframes v73VaultLeftOpen{
  0%,48%{transform:translateX(0) rotateY(0deg); opacity:1;}
  100%{transform:translateX(-108%) rotateY(-10deg); opacity:.9;}
}

@keyframes v73VaultRightOpen{
  0%,48%{transform:translateX(0) rotateY(0deg); opacity:1;}
  100%{transform:translateX(108%) rotateY(10deg); opacity:.9;}
}

@keyframes v73VaultFaceFade{
  0%,54%{opacity:1; transform:scale(1);}
  100%{opacity:.08; transform:scale(.96);}
}

@keyframes v73VaultLight{
  0%,46%{opacity:0; transform:scale(.7);}
  70%{opacity:.9; transform:scale(1.05);}
  100%{opacity:.20; transform:scale(1.35);}
}

@keyframes v73VaultGlow{
  0%,45%{opacity:0;}
  72%{opacity:.8;}
  100%{opacity:.25;}
}

@keyframes v73VaultLogoReveal{
  0%,56%{opacity:0; transform:translate(-50%,-50%) scale(.82);}
  80%{opacity:1; transform:translate(-50%,-50%) scale(1.04);}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1);}
}

@media(max-width:820px){
  html{font-size:108% !important;}
  .image-vault-scene{
    width:min(430px,88vw) !important;
  }
  .vault-loader-text{
    bottom:-34px !important;
    font-size:11px !important;
    letter-spacing:.17em !important;
  }
}


/* ==========================================================
   v74: vault only once on site load
   vault spins fast then slows, no opening
   page switching has brand-new crack/tear transition
   ========================================================== */

/* kill old vault open/split elements */
.image-vault-loader .image-vault-scene,
.vault-img-half,
.vault-img-dial,
.vault-open-light,
.vault-img-full,
.vault-loader-logo,
.vault-loader-text,
.simple-safe-loader .safe-load-scene,
.custom-vault-loader .vault-room,
.gif-loader .gif-loader-frame{
  display:none !important;
}

/* one-time spin vault loader */
.loader.spin-vault-loader,
#loader.spin-vault-loader{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(215,180,95,.16), transparent 30%),
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.04), transparent 45%),
    linear-gradient(135deg, #020303, #080a0d 48%, #000 100%) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transition:opacity .8s ease, visibility .8s ease !important;
}

.loader.spin-vault-loader.hide,
.loader.spin-vault-loader.bxr-force-hide,
#loader.spin-vault-loader.hide,
#loader.spin-vault-loader.bxr-force-hide{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.spin-vault-scene{
  position:relative !important;
  width:min(650px,88vw) !important;
  aspect-ratio:1/1 !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
}

.spin-vault-glow{
  position:absolute !important;
  inset:13% !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle, rgba(255,235,170,.55), rgba(215,170,75,.18) 38%, transparent 70%) !important;
  filter:blur(28px) !important;
  opacity:.45 !important;
  animation:v74GlowPulse 2.9s ease-in-out forwards !important;
  z-index:1 !important;
}

.spin-vault-img{
  position:relative !important;
  z-index:4 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  transform-origin:center center !important;
  filter:
    brightness(.9)
    contrast(1.18)
    saturate(.92)
    drop-shadow(0 0 42px rgba(0,0,0,.95))
    drop-shadow(0 0 26px rgba(215,170,75,.16)) !important;
  animation:v74VaultSpinSlowdown 2.9s cubic-bezier(.04,.72,.12,1) forwards !important;
  will-change:transform, filter !important;
}

.spin-vault-core{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:13% !important;
  aspect-ratio:1/1 !important;
  border-radius:50% !important;
  transform:translate(-50%,-50%) !important;
  background:
    radial-gradient(circle, rgba(255,245,210,.9), rgba(220,170,70,.34) 38%, rgba(0,0,0,.42) 70%) !important;
  box-shadow:
    0 0 18px rgba(255,235,170,.75),
    0 0 42px rgba(220,170,80,.35) !important;
  z-index:6 !important;
  opacity:.75 !important;
  animation:v74CoreFlash 2.9s ease forwards !important;
}

.spin-vault-logo{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) scale(.92) !important;
  z-index:3 !important;
  color:#fff !important;
  font-family:Impact,'Arial Black',sans-serif !important;
  font-size:clamp(50px,10vw,125px) !important;
  letter-spacing:.1em !important;
  text-shadow:
    0 0 12px rgba(255,255,255,.95),
    0 0 36px rgba(220,175,80,.42) !important;
  opacity:0 !important;
  animation:v74LogoAppear 2.9s ease forwards !important;
}

.spin-vault-text{
  position:absolute !important;
  bottom:-38px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:8 !important;
  color:#f8efd9 !important;
  font:900 14px monospace !important;
  letter-spacing:.24em !important;
  text-transform:uppercase !important;
  text-shadow:0 0 14px rgba(220,175,80,.58) !important;
  white-space:nowrap !important;
}

@keyframes v74VaultSpinSlowdown{
  0%{transform:rotate(0deg) scale(.94); filter:brightness(.65) contrast(1.25) blur(.3px);}
  18%{transform:rotate(430deg) scale(1.02); filter:brightness(1.08) contrast(1.25) blur(0);}
  38%{transform:rotate(1010deg) scale(1.035);}
  58%{transform:rotate(1420deg) scale(1);}
  77%{transform:rotate(1585deg) scale(.992);}
  90%{transform:rotate(1628deg) scale(1);}
  100%{transform:rotate(1640deg) scale(1);}
}

@keyframes v74GlowPulse{
  0%{opacity:.1; transform:scale(.72);}
  32%{opacity:.78; transform:scale(1.05);}
  72%{opacity:.38; transform:scale(.94);}
  100%{opacity:.22; transform:scale(1);}
}

@keyframes v74CoreFlash{
  0%,45%{opacity:.35; transform:translate(-50%,-50%) scale(.75);}
  60%{opacity:1; transform:translate(-50%,-50%) scale(1.25);}
  100%{opacity:.58; transform:translate(-50%,-50%) scale(.92);}
}

@keyframes v74LogoAppear{
  0%,62%{opacity:0; transform:translate(-50%,-50%) scale(.82);}
  84%{opacity:1; transform:translate(-50%,-50%) scale(1.04);}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1);}
}

/* brand-new page switch idea: ripped electric slash, not the vault */
.bxr-route-slice{
  position:fixed;
  inset:0;
  z-index:999990;
  pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 26%),
    rgba(0,0,0,.26);
  opacity:0;
}

.bxr-route-slice.is-active{
  opacity:1;
}

.bxr-route-slice::before{
  content:"";
  position:absolute;
  left:-30%;
  top:-20%;
  width:40%;
  height:140%;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.88) 45%, rgba(120,225,255,.65) 52%, transparent),
    linear-gradient(135deg, rgba(0,0,0,.96), rgba(15,25,30,.88), transparent);
  transform:skewX(-18deg) translateX(-30%);
  filter:drop-shadow(0 0 24px rgba(120,225,255,.65));
  animation:v74RouteSlash .72s cubic-bezier(.14,.82,.18,1) forwards;
}

.bxr-route-slice::after{
  content:"BEAUXR";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.9);
  color:#fff;
  font-family:Impact,'Arial Black',sans-serif;
  font-size:clamp(58px,13vw,160px);
  letter-spacing:.12em;
  text-shadow:
    3px 0 rgba(0,220,255,.65),
    -3px 0 rgba(255,255,255,.35),
    0 0 32px rgba(255,255,255,.45);
  opacity:0;
  animation:v74RouteLogo .72s steps(2,end) forwards;
}

@keyframes v74RouteSlash{
  0%{transform:skewX(-18deg) translateX(-30%); opacity:0;}
  16%{opacity:1;}
  100%{transform:skewX(-18deg) translateX(360%); opacity:0;}
}

@keyframes v74RouteLogo{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.88);}
  22%{opacity:1; transform:translate(-51%,-50%) scale(1);}
  44%{opacity:.72; transform:translate(-49%,-50%) scale(1.03);}
  72%,100%{opacity:0; transform:translate(-50%,-50%) scale(1.08);}
}

/* cleaner landing page enter after each page opens */
body.bxr-page-enter .brand-head,
body.bxr-page-enter .hero-copy,
body.bxr-page-enter main > section,
body.bxr-page-enter .product-card,
body.bxr-page-enter .vote-card,
body.bxr-page-enter .fit-stage,
body.bxr-page-enter .fit-side{
  animation:v74PageDropIn .82s cubic-bezier(.15,.86,.19,1) both;
}

body.bxr-page-enter .hero-copy{animation-delay:.06s;}
body.bxr-page-enter main > section{animation-delay:.12s;}
body.bxr-page-enter .product-card:nth-child(1),
body.bxr-page-enter .vote-card:nth-child(1){animation-delay:.18s;}
body.bxr-page-enter .product-card:nth-child(2),
body.bxr-page-enter .vote-card:nth-child(2){animation-delay:.25s;}
body.bxr-page-enter .product-card:nth-child(3),
body.bxr-page-enter .vote-card:nth-child(3){animation-delay:.32s;}
body.bxr-page-enter .product-card:nth-child(4),
body.bxr-page-enter .vote-card:nth-child(4){animation-delay:.39s;}

@keyframes v74PageDropIn{
  0%{opacity:0; transform:translateY(28px) scale(.985); filter:blur(8px) contrast(1.2);}
  100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0) contrast(1);}
}

@media(max-width:820px){
  .spin-vault-scene{
    width:min(410px,88vw) !important;
  }
  .spin-vault-text{
    bottom:-32px !important;
    font-size:11px !important;
    letter-spacing:.17em !important;
  }
}


/* ==========================================================
   v75 shop cleanup: Statue Liberty price/text fix, bigger header,
   cleaner lighter grey shop, iPhone still optimised
   ========================================================== */

/* Desktop header links slightly bigger + cleaner */
@media (min-width: 821px){
  .nav-strip{
    gap:18px !important;
    padding:8px 22px !important;
  }

  .nav-strip a,
  .bxr-nav-link{
    font-size:1.08rem !important;
    letter-spacing:.12em !important;
    min-height:58px !important;
    padding:0 38px !important;
    border-radius:16px !important;
  }
}

/* Overall cleaner grey tone, less harsh black */
body{
  background:
    radial-gradient(circle at 50% 16%, rgba(155,170,175,.16), transparent 28%),
    radial-gradient(circle at 50% 55%, rgba(80,95,100,.16), transparent 34%),
    linear-gradient(135deg, #171a1d 0%, #0d1013 48%, #1b1e20 100%) !important;
}

/* lighten the shop/product sections only */
.product-section,
.shop-section,
main:has(.product-card){
  background:
    radial-gradient(circle at 50% 30%, rgba(200,210,210,.08), transparent 30%),
    linear-gradient(135deg, rgba(36,40,43,.52), rgba(18,21,24,.78)) !important;
}

/* Make shop grid cleaner and readable */
.product-grid,
.shop-grid{
  align-items:stretch !important;
}

.product-card,
.shop-card,
.item-card{
  position:relative !important;
  display:grid !important;
  grid-template-rows:auto auto auto 1fr auto !important;
  align-items:start !important;
  justify-items:center !important;
  gap:12px !important;
  padding:28px 22px 24px !important;
  background:
    linear-gradient(145deg, rgba(52,58,62,.72), rgba(20,24,27,.86)) !important;
  border:1px solid rgba(220,230,230,.18) !important;
  border-radius:20px !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.36),
    inset 0 0 24px rgba(255,255,255,.035) !important;
  overflow:hidden !important;
  min-height:620px !important;
}

/* remove visual confusion from heavy overlays on cards */
.product-card::before,
.product-card::after,
.shop-card::before,
.shop-card::after,
.item-card::before,
.item-card::after{
  opacity:.18 !important;
  pointer-events:none !important;
}

/* Force all hoodie item text to sit under the image, never over it */
.product-card img,
.shop-card img,
.item-card img{
  grid-row:1 !important;
  order:1 !important;
  width:100% !important;
  max-width:340px !important;
  height:340px !important;
  max-height:340px !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 auto 8px !important;
  position:relative !important;
  z-index:1 !important;
  transform:none !important;
}

.product-card h3,
.shop-card h3,
.item-card h3,
.product-card .product-title,
.shop-card .product-title,
.item-card .product-title{
  grid-row:2 !important;
  order:2 !important;
  position:relative !important;
  z-index:3 !important;
  width:100% !important;
  margin:0 auto !important;
  padding:0 8px !important;
  text-align:center !important;
  color:#f4f7f7 !important;
  font-size:1.42rem !important;
  line-height:1.16 !important;
  letter-spacing:.055em !important;
  text-shadow:0 2px 12px rgba(0,0,0,.62) !important;
  transform:none !important;
  top:auto !important;
  left:auto !important;
}

/* Price always under product name */
.price,
.product-price,
.item-price,
.cost,
[data-price],
.product-card .price,
.product-card [class*="price"],
.shop-card .price,
.shop-card [class*="price"],
.item-card .price,
.item-card [class*="price"]{
  grid-row:3 !important;
  order:3 !important;
  position:relative !important;
  z-index:3 !important;
  margin:4px auto 10px !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
  text-align:center !important;
  font-size:1.18rem !important;
  letter-spacing:.10em !important;
  color:#f7fbff !important;
  background:rgba(16,20,23,.78) !important;
  border:1px solid rgba(150,210,230,.34) !important;
}

/* Descriptions/button sit underneath */
.product-card p,
.shop-card p,
.item-card p{
  grid-row:4 !important;
  order:4 !important;
  position:relative !important;
  z-index:2 !important;
  margin:0 auto !important;
  text-align:center !important;
  color:rgba(235,240,240,.86) !important;
}

.product-card button,
.shop-card button,
.item-card button,
.product-card a,
.shop-card a,
.item-card a{
  order:5 !important;
}

/* Specific Statue Liberty card repair from screenshot */
.product-card:has(img[src*="statue"]),
.shop-card:has(img[src*="statue"]),
.item-card:has(img[src*="statue"]),
.product-card:has(img[alt*="Statue"]),
.shop-card:has(img[alt*="Statue"]),
.item-card:has(img[alt*="Statue"]){
  display:grid !important;
  grid-template-rows:340px auto auto 1fr auto !important;
}

.product-card:has(img[src*="statue"]) img,
.shop-card:has(img[src*="statue"]) img,
.item-card:has(img[src*="statue"]) img,
.product-card:has(img[alt*="Statue"]) img,
.shop-card:has(img[alt*="Statue"]) img,
.item-card:has(img[alt*="Statue"]) img{
  grid-row:1 !important;
  height:340px !important;
  max-height:340px !important;
  margin-bottom:12px !important;
}

.product-card:has(img[src*="statue"]) h3,
.shop-card:has(img[src*="statue"]) h3,
.item-card:has(img[src*="statue"]) h3,
.product-card:has(img[alt*="Statue"]) h3,
.shop-card:has(img[alt*="Statue"]) h3,
.item-card:has(img[alt*="Statue"]) h3{
  grid-row:2 !important;
  margin-top:0 !important;
}

.product-card:has(img[src*="statue"]) .price,
.product-card:has(img[src*="statue"]) [class*="price"],
.shop-card:has(img[src*="statue"]) .price,
.shop-card:has(img[src*="statue"]) [class*="price"],
.item-card:has(img[src*="statue"]) .price,
.item-card:has(img[src*="statue"]) [class*="price"],
.product-card:has(img[alt*="Statue"]) .price,
.product-card:has(img[alt*="Statue"]) [class*="price"],
.shop-card:has(img[alt*="Statue"]) .price,
.shop-card:has(img[alt*="Statue"]) [class*="price"],
.item-card:has(img[alt*="Statue"]) .price,
.item-card:has(img[alt*="Statue"]) [class*="price"]{
  grid-row:3 !important;
  margin-top:8px !important;
}

/* Better iPhone shop optimisation */
@media only screen and (max-width:820px){
  body{
    background:
      radial-gradient(circle at 50% 18%, rgba(170,185,190,.14), transparent 28%),
      linear-gradient(135deg, #171a1d, #0f1214 52%, #1c1f22) !important;
  }

  .nav-strip{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .nav-strip a,
  .bxr-nav-link{
    font-size:11px !important;
    min-height:48px !important;
    padding:9px 6px !important;
    letter-spacing:.075em !important;
  }

  .product-card,
  .shop-card,
  .item-card{
    min-height:auto !important;
    padding:20px 16px 22px !important;
    gap:10px !important;
    border-radius:18px !important;
  }

  .product-card img,
  .shop-card img,
  .item-card img{
    height:auto !important;
    max-height:300px !important;
    max-width:100% !important;
    margin-bottom:10px !important;
  }

  .product-card h3,
  .shop-card h3,
  .item-card h3{
    font-size:1.22rem !important;
    line-height:1.18 !important;
    padding:0 4px !important;
  }

  .price,
  .product-price,
  .item-price,
  .cost,
  [data-price],
  .product-card .price,
  .product-card [class*="price"]{
    font-size:1.05rem !important;
    padding:.44rem .68rem !important;
    margin:4px auto 8px !important;
  }

  .product-card:has(img[src*="statue"]),
  .shop-card:has(img[src*="statue"]),
  .item-card:has(img[src*="statue"]),
  .product-card:has(img[alt*="Statue"]),
  .shop-card:has(img[alt*="Statue"]),
  .item-card:has(img[alt*="Statue"]){
    grid-template-rows:auto auto auto 1fr auto !important;
  }

  .product-card:has(img[src*="statue"]) img,
  .shop-card:has(img[src*="statue"]) img,
  .item-card:has(img[src*="statue"]) img,
  .product-card:has(img[alt*="Statue"]) img,
  .shop-card:has(img[alt*="Statue"]) img,
  .item-card:has(img[alt*="Statue"]) img{
    height:auto !important;
    max-height:300px !important;
  }
}

/* fallback for Safari versions without :has support — still fixes all cards cleanly */
@supports not selector(:has(*)){
  .product-card,
  .shop-card,
  .item-card{
    display:flex !important;
    flex-direction:column !important;
  }

  .product-card img,
  .shop-card img,
  .item-card img{
    flex:0 0 auto !important;
  }

  .product-card h3,
  .shop-card h3,
  .item-card h3,
  .price,
  .product-price,
  .item-price,
  .cost{
    position:static !important;
    transform:none !important;
  }
}


/* ==========================================================
   v76 equal header/nav boxes fix
   Makes all top header buttons the same size like the screenshot needs.
   ========================================================== */

.brand-head{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Desktop/web: identical nav button widths */
@media (min-width:821px){
  .nav-strip{
    width:min(1180px, 78vw) !important;
    max-width:1180px !important;
    margin:26px auto 34px !important;
    padding:8px 14px !important;
    display:grid !important;
    grid-template-columns:repeat(6, 1fr) !important;
    gap:18px !important;
    align-items:center !important;
    justify-items:stretch !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    border-radius:28px !important;
  }

  .nav-strip a,
  .nav-strip .bxr-nav-link,
  .bxr-nav-link{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:64px !important;
    min-height:64px !important;
    padding:0 10px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
    border-radius:16px !important;
    font-size:1.08rem !important;
    letter-spacing:.12em !important;
  }
}

/* Medium laptop widths: still equal, just slightly tighter */
@media (min-width:821px) and (max-width:1280px){
  .nav-strip{
    width:min(1040px, 86vw) !important;
    gap:14px !important;
  }

  .nav-strip a,
  .nav-strip .bxr-nav-link,
  .bxr-nav-link{
    height:60px !important;
    min-height:60px !important;
    font-size:1rem !important;
    letter-spacing:.10em !important;
  }
}

/* iPhone/mobile: equal boxes in 3 x 2 grid */
@media only screen and (max-width:820px){
  .nav-strip{
    width:94vw !important;
    max-width:94vw !important;
    margin:10px auto 18px !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:8px !important;
    align-items:stretch !important;
    justify-items:stretch !important;
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
  }

  .nav-strip a,
  .nav-strip .bxr-nav-link,
  .bxr-nav-link{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 4px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    text-align:center !important;
    white-space:nowrap !important;
    border-radius:12px !important;
    font-size:11px !important;
    letter-spacing:.07em !important;
  }
}

/* tiny iPhones */
@media only screen and (max-width:390px){
  .nav-strip{
    gap:7px !important;
  }

  .nav-strip a,
  .nav-strip .bxr-nav-link,
  .bxr-nav-link{
    height:46px !important;
    min-height:46px !important;
    font-size:10px !important;
    letter-spacing:.055em !important;
  }
}


/* ==========================================================
   v77 serious shop/header cleanup
   fixes duplicate prices, bad Statue card layout, nav sizing,
   cut-off title, and bottom/cart clutter
   ========================================================== */

/* stop the top nav crushing into page content */
.brand-head{
  position:relative !important;
  z-index:50 !important;
  padding-top:34px !important;
  padding-bottom:24px !important;
  min-height:auto !important;
}

.brand-head .logo,
.logo{
  margin:0 auto 22px !important;
  max-width:100% !important;
}

.brand-head .logo img,
.logo img{
  display:block !important;
  margin:0 auto !important;
  max-width:min(720px,72vw) !important;
  height:auto !important;
}

/* equal but usable nav boxes on desktop */
@media (min-width:821px){
  .nav-strip{
    width:min(1120px,82vw) !important;
    max-width:1120px !important;
    margin:0 auto 28px !important;
    padding:8px 12px !important;
    display:grid !important;
    grid-template-columns:repeat(6, minmax(0,1fr)) !important;
    gap:14px !important;
    align-items:stretch !important;
    justify-items:stretch !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    border-radius:28px !important;
  }

  .nav-strip a,
  .nav-strip .bxr-nav-link,
  .bxr-nav-link{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:58px !important;
    min-height:58px !important;
    padding:0 8px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    border-radius:15px !important;
    font-size:.98rem !important;
    letter-spacing:.095em !important;
  }
}

/* make shop title visible and below header */
.product-section,
.shop-section,
main:has(.product-card){
  padding-top:28px !important;
  margin-top:0 !important;
  overflow:visible !important;
}

.product-section h1,
.shop-section h1,
main:has(.product-card) h1,
.section-title,
.hero-title{
  position:relative !important;
  z-index:10 !important;
  margin-top:0 !important;
  margin-bottom:28px !important;
  padding-left:0 !important;
  max-width:100% !important;
  text-align:center !important;
  line-height:.9 !important;
}

/* cleaner lighter grey shop background */
body{
  background:
    radial-gradient(circle at 50% 18%, rgba(180,190,194,.16), transparent 30%),
    linear-gradient(135deg, #1b1e21 0%, #101316 50%, #202326 100%) !important;
}

.product-section,
.shop-section,
main:has(.product-card){
  background:transparent !important;
}

/* shop grid: consistent card height and clean alignment */
.product-grid,
.shop-grid{
  width:min(1560px,92vw) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(5, minmax(220px,1fr)) !important;
  gap:26px !important;
  align-items:stretch !important;
}

.product-card,
.shop-card,
.item-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  min-height:580px !important;
  padding:24px 18px 26px !important;
  background:
    linear-gradient(145deg, rgba(55,60,63,.64), rgba(22,25,28,.84)) !important;
  border:1px solid rgba(235,245,245,.16) !important;
  border-radius:20px !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.30),
    inset 0 0 22px rgba(255,255,255,.035) !important;
  overflow:hidden !important;
}

/* remove ghost quick-view labels / confusing overlay text */
.product-card::before,
.product-card::after,
.shop-card::before,
.shop-card::after,
.item-card::before,
.item-card::after{
  opacity:0 !important;
  content:none !important;
  display:none !important;
}

/* image sits first, same space on every card */
.product-card img,
.shop-card img,
.item-card img{
  order:1 !important;
  width:100% !important;
  max-width:300px !important;
  height:300px !important;
  max-height:300px !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 auto 14px !important;
  position:relative !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
  z-index:1 !important;
}

/* title below image */
.product-card h3,
.shop-card h3,
.item-card h3,
.product-card .product-title,
.shop-card .product-title,
.item-card .product-title{
  order:2 !important;
  width:100% !important;
  min-height:62px !important;
  margin:0 auto !important;
  padding:0 4px !important;
  text-align:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#f7fbfb !important;
  font-size:1.34rem !important;
  line-height:1.12 !important;
  letter-spacing:.055em !important;
  text-shadow:0 2px 12px rgba(0,0,0,.65) !important;
  position:relative !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
  z-index:2 !important;
}

/* one clean price only under title */
.price,
.product-price,
.item-price,
.cost,
[data-price],
.product-card .price,
.product-card [class*="price"],
.shop-card .price,
.shop-card [class*="price"],
.item-card .price,
.item-card [class*="price"]{
  order:3 !important;
  width:auto !important;
  min-width:0 !important;
  min-height:auto !important;
  margin:2px auto 0 !important;
  padding:.25rem .2rem !important;
  text-align:center !important;
  display:block !important;
  color:#eef6f8 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  font-family:'White On Black','Darkmode demo','Gemstone',monospace !important;
  font-size:1.04rem !important;
  line-height:1.1 !important;
  letter-spacing:.08em !important;
  text-shadow:0 0 8px rgba(255,255,255,.30) !important;
  position:relative !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
  z-index:3 !important;
}

.product-card p,
.shop-card p,
.item-card p{
  order:4 !important;
  margin:8px auto 0 !important;
  text-align:center !important;
  color:rgba(236,241,241,.82) !important;
  position:relative !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
}

/* hide accidental duplicate price badges created in earlier versions */
.product-card .price ~ .price,
.product-card .product-price ~ .product-price,
.shop-card .price ~ .price,
.shop-card .product-price ~ .product-price,
.item-card .price ~ .price,
.item-card .product-price ~ .product-price{
  display:none !important;
}

/* make cart less obnoxious, not covering product grid */
.cart-drawer,
.cart-panel,
.cart{
  max-width:320px !important;
  background:rgba(18,21,23,.84) !important;
  backdrop-filter:blur(10px) !important;
  border-color:rgba(175,220,235,.24) !important;
}

.cart-drawer{
  right:22px !important;
  bottom:22px !important;
}

/* remove weird bottom stray link/text clutter */
body > a:not(.bxr-nav-link):not(.paper-btn):not(.action-btn),
body > p > a,
main + a,
main + p{
  max-width:100% !important;
  overflow:hidden !important;
}

/* iPhone/tablet shop */
@media only screen and (max-width:1100px){
  .product-grid,
  .shop-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    width:94vw !important;
    gap:18px !important;
  }
}

@media only screen and (max-width:820px){
  .brand-head{
    padding-top:18px !important;
    padding-bottom:16px !important;
  }

  .brand-head .logo img,
  .logo img{
    max-width:min(480px,90vw) !important;
  }

  .nav-strip{
    width:94vw !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:8px !important;
    margin:8px auto 18px !important;
  }

  .nav-strip a,
  .nav-strip .bxr-nav-link,
  .bxr-nav-link{
    height:48px !important;
    min-height:48px !important;
    font-size:10.5px !important;
    letter-spacing:.065em !important;
    padding:0 4px !important;
  }

  .product-section h1,
  .shop-section h1,
  main:has(.product-card) h1,
  .section-title{
    font-size:clamp(2.7rem,14vw,5.4rem) !important;
    margin-bottom:18px !important;
  }

  .product-grid,
  .shop-grid{
    grid-template-columns:1fr !important;
    width:92vw !important;
    gap:18px !important;
  }

  .product-card,
  .shop-card,
  .item-card{
    min-height:auto !important;
    padding:20px 16px 22px !important;
    border-radius:18px !important;
  }

  .product-card img,
  .shop-card img,
  .item-card img{
    max-width:100% !important;
    height:auto !important;
    max-height:310px !important;
    margin-bottom:12px !important;
  }

  .product-card h3,
  .shop-card h3,
  .item-card h3{
    min-height:auto !important;
    font-size:1.25rem !important;
    line-height:1.16 !important;
  }

  .price,
  .product-price,
  .item-price,
  .cost,
  [data-price]{
    font-size:1rem !important;
    margin-top:4px !important;
  }

  .cart-drawer{
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
    width:auto !important;
    max-width:none !important;
  }
}