/* UTOPIA pharaonic hoodie hero: a dark tomb wall with the ankh carved into it; a torch light reveals the carving.
   Full-bleed (breaks out of the narrow EasyOrders container). Fonts "UH Orbitron" come from the hoodie hero CSS already in the head. */
.uph{--uph-hdr:var(--utopia-header-height,104px);--uph-gold:#D9A441;--uph-ivory:#EDE3CF;--uph-gut:3.8cqw;
  position:relative;width:var(--uph-vw,100vw);margin-inline:calc(50% - var(--uph-vw,100vw) / 2);height:120svh;min-height:650px;
  margin-top:calc(-1 * var(--uph-pull,0px));background:#0b0907;isolation:isolate;overflow:clip}
@media (max-width:767px){.uph{--uph-hdr:var(--utopia-header-height,64px)}}
.uph *{box-sizing:border-box;margin:0}
/* one screen pinned while the visitor scrolls the extra 20svh */
.uph__stage{position:sticky;top:0;height:100svh;min-height:540px;overflow:hidden}
.uph__bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.uph__in{position:absolute;left:0;right:0;top:var(--uph-res,var(--uph-hdr));bottom:0;z-index:2;container-type:size}
/* the wall sinks into darkness at the bottom, where the colours section rises out of the same dark */
.uph__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,9,7,0),rgba(11,9,7,.7) 55%,#0b0907)}
/* hidden until hero.js is ready (the store paints before head scripts run); shown anyway after 8s */
.uph:not(.uph--on) .uph__in,.uph:not(.uph--on) .uph__bg{opacity:0;animation:uph-fb .2s 8s forwards}
@keyframes uph-fb{to{opacity:1}}

/* the carved ankh: drawn by WebGL; this box only gives its place (and shows the gold in lite mode) */
.uph__ankh{position:absolute;left:50%;top:-2cqh;height:100cqh;aspect-ratio:760/1064;translate:-50% 0;pointer-events:none;z-index:0}
.uph__ankh img{display:none;width:100%;height:100%}

/* model, back view: the loop of the ankh rings his head */
.uph__model{--uph-f0:94%;--uph-f1:100%;position:absolute;left:50%;top:6cqh;height:86cqh;aspect-ratio:941/1372;translate:-50% 0;z-index:2}
.uph__model img{display:block;width:100%;height:100%;object-fit:contain;
  -webkit-mask-image:linear-gradient(180deg,#000 var(--uph-f0),rgba(0,0,0,.62) calc((var(--uph-f0) + var(--uph-f1)) / 2),transparent var(--uph-f1));
  mask-image:linear-gradient(180deg,#000 var(--uph-f0),rgba(0,0,0,.62) calc((var(--uph-f0) + var(--uph-f1)) / 2),transparent var(--uph-f1))}

/* small UI */
.uph__label{position:absolute;font:500 clamp(9px,.75cqw,11px)/1 "UH Orbitron",sans-serif;letter-spacing:.32em;text-transform:uppercase;direction:ltr;color:rgba(237,227,207,.62);z-index:5}
.uph__label--tl{left:var(--uph-gut);top:6cqh}.uph__label--tr{right:var(--uph-gut);top:6cqh}
.uph__label--br{right:var(--uph-gut);bottom:4.6cqh}
.uph__side{position:absolute;right:var(--uph-gut);top:62cqh;translate:0 -50%;width:clamp(200px,18cqw,270px);z-index:5;text-align:right}
.uph__side-k{font:500 10px/1 "UH Orbitron",sans-serif;letter-spacing:.3em;color:var(--uph-gold);direction:ltr;text-align:right;margin-bottom:14px}
.uph__side-t{font:400 clamp(12px,1cqw,14px)/1.8 Alexandria,sans-serif;color:rgba(237,227,207,.8);padding-bottom:18px;border-bottom:1px solid rgba(217,164,65,.28)}
.uph__side-n{margin-top:18px;font:500 10px/1 "UH Orbitron",sans-serif;letter-spacing:.32em;color:rgba(237,227,207,.62);direction:ltr;text-align:right}
.uph__price{position:absolute;left:var(--uph-gut);bottom:11cqh;z-index:5;direction:ltr}
.uph__price b{display:block;font:600 clamp(40px,10cqh,86px)/1 "UH Orbitron",sans-serif;letter-spacing:.04em;color:var(--uph-gold);text-shadow:0 0 28px rgba(217,164,65,.22)}
.uph__price small{font:700 .5em/1 Alexandria,sans-serif;letter-spacing:0;margin-left:.06em}
.uph__hint{position:absolute;left:var(--uph-gut);bottom:4.6cqh;z-index:5;font:500 clamp(12px,1.7cqh,14px)/1 Alexandria,sans-serif;color:rgba(237,227,207,.72)}
.uph__hint span{display:inline-block;margin-right:.3em;animation:uph-nudge 1.8s ease-in-out infinite}
@keyframes uph-nudge{50%{transform:translateY(3px)}}
.uph__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the store forces its own font on span/p/button: lock ours */
.uph .uph__label,.uph .uph__side-k,.uph .uph__side-n,.uph .uph__price b{font-family:"UH Orbitron",sans-serif!important}
.uph .uph__side-t,.uph .uph__price small,.uph .uph__hint,.uph .uph__hint span{font-family:Alexandria,sans-serif!important}
.uph .uph__side-t{line-height:1.8!important}

/* portrait screens: one column; price and hint sit above the floating buy buttons */
@container (max-aspect-ratio:4/5){
  .uph__ankh{top:2cqh;height:auto;width:96cqw;aspect-ratio:760/1064}
  .uph__model{top:6cqh;height:77cqh}
  .uph__label--tl,.uph__label--tr{top:3cqh}
  .uph__label--tr{font-size:9px;letter-spacing:.24em}
  .uph__label--br{display:none}
  .uph__side{display:none}
  .uph__price{--uph-dock:62px;left:50%;translate:-50% 0;bottom:calc(var(--uph-dock) + 34px);text-align:center}
  .uph__price b{font-size:clamp(40px,7cqh,64px)}
  .uph__hint{--uph-dock:62px;left:50%;translate:-50% 0;bottom:calc(var(--uph-dock) + 8px);white-space:nowrap}
}
@container (max-aspect-ratio:4/5) and (max-width:600px){.uph__label--tr{display:none}}
@media (min-width:1024px){@container (max-aspect-ratio:4/5){.uph__price,.uph__hint{--uph-dock:80px}}}
.uph__model,.uph__label,.uph__side,.uph__price,.uph__hint{will-change:transform,opacity}

/* lite mode (weak phones, or no WebGL): the carving is shown as a still gold relief under a painted torch glow */
.uph--lite .uph__bg{display:none}
.uph--lite .uph__stage{background:radial-gradient(38% 46% at 56% 30%,rgba(255,196,120,.16),rgba(0,0,0,0) 70%),var(--uph-stone,none) 0 0/512px,#0b0907}
.uph--lite .uph__ankh img{display:block;opacity:.75;filter:drop-shadow(0 2px 2px #000)}
@media (prefers-reduced-motion:reduce){.uph__hint span{animation:none}}

/* EasyOrders adds inline 10px block padding. Remove only the direct
   HTML-block wrapper of this section so the existing dark fades meet. */
div:has(> section[data-utopia-pharaoh-hero]){padding-block:0!important}