/* UTOPIA pharaonic video: the product video plays inside a niche carved in the tomb wall; three gold carvings
   light up while the video shows each print. Full-bleed. "UH Orbitron" comes from the hoodie hero CSS in the head. */
.upv{--upv-hdr:var(--utopia-header-height,104px);--upv-gold:#D9A441;--upv-ivory:#EDE3CF;--upv-gut:3.8cqw;
  position:relative;width:var(--upv-vw,100vw);margin-inline:calc(50% - var(--upv-vw,100vw) / 2);height:120svh;min-height:650px;background:#0b0907;isolation:isolate;overflow:clip}
@media (max-width:767px){.upv{--upv-hdr:var(--utopia-header-height,64px)}}
.upv *{box-sizing:border-box;margin:0}
.upv__stage{position:sticky;top:0;height:100svh;min-height:540px;overflow:hidden}
.upv__bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
/* the top melts out of the dark the colours section sinks into */
.upv__stage::before{content:"";position:absolute;left:0;right:0;top:0;height:22%;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0b0907,rgba(11,9,7,.6) 45%,rgba(11,9,7,0))}
/* the bottom sinks into the dark the questions rise out of */
.upv__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,9,7,0),rgba(11,9,7,.7) 55%,#0b0907)}
.upv__in{position:absolute;left:0;right:0;bottom:0;top:var(--upv-hdr);z-index:2;container-type:size}
.upv:not(.upv--on) .upv__in{opacity:0;animation:upv-fb .2s 8s forwards}
@keyframes upv-fb{to{opacity:1}}

/* the niche: WebGL carves the bevel around this box; the video sits in its floor, with nothing laid over it */
.upv__niche{--upv-bw:3.4cqh;position:absolute;left:47%;top:6cqh;height:min(80cqh,calc(100cqh - 6cqh - 80px));aspect-ratio:9/16;translate:-50% 0;border-radius:1.4cqh}
.upv__video{position:absolute;inset:var(--upv-bw);width:calc(100% - 2 * var(--upv-bw));height:calc(100% - 2 * var(--upv-bw));object-fit:cover;display:block;border-radius:.6cqh;background:#050403}

.upv__label{position:absolute;font:500 clamp(9px,.75cqw,11px)/1 "UH Orbitron",sans-serif;letter-spacing:.32em;direction:ltr;color:rgba(237,227,207,.62)}
.upv__label--tl{left:var(--upv-gut);top:6cqh}

/* the carvings: cut dark into the stone, they turn gold when the torch reaches them */
.upv__chs{position:absolute;right:var(--upv-gut);top:50%;translate:0 -50%;width:clamp(220px,22cqw,320px);display:grid;gap:3.4cqh}
.upv__ch{all:unset;box-sizing:border-box;position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:6px;align-items:baseline;cursor:pointer;padding:6px 0 14px;text-align:right;-webkit-tap-highlight-color:transparent}
.upv__n{grid-row:span 2;font:600 clamp(22px,3.4cqh,34px)/1 "UH Orbitron",sans-serif;letter-spacing:.06em}
.upv__t{font:700 clamp(18px,3cqh,28px)/1.4 Alexandria,sans-serif}
.upv__s{font:500 10px/1 "UH Orbitron",sans-serif;letter-spacing:.3em;direction:ltr;text-align:right;color:rgba(237,227,207,.42);transition:color .5s}
/* carved look: dark fill, a light lip under the cut and a shade above it */
.upv__n,.upv__t{color:#130e09;text-shadow:0 1px 0 rgba(237,227,207,.16),0 -1px 0 rgba(0,0,0,.85);transition:color .5s,text-shadow .5s}
.upv__ch.is-on .upv__n,.upv__ch.is-on .upv__t{color:var(--upv-gold);text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 22px rgba(217,164,65,.38)}
.upv__ch.is-on .upv__s{color:rgba(237,227,207,.75)}
.upv__ch:hover .upv__t{color:#3a2c1c}.upv__ch.is-on:hover .upv__t{color:var(--upv-gold)}
.upv__ch:focus-visible{outline:2px solid var(--upv-gold);outline-offset:6px;border-radius:4px}
/* a carved groove under each one; the active one fills with gold as its part of the video plays */
.upv__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(0,0,0,.7);box-shadow:0 1px 0 rgba(237,227,207,.1);overflow:hidden}
.upv__bar i{position:absolute;inset:0;background:var(--upv-gold);transform-origin:100% 50%;transform:scaleX(0)}
.upv__hint{position:absolute;right:var(--upv-gut);top:calc(50% + 24cqh);width:clamp(220px,22cqw,320px);font:500 12px/1.6 Alexandria,sans-serif;color:rgba(237,227,207,.55)}
.upv__trust{position:absolute;left:var(--upv-gut);bottom:9cqh;font:700 clamp(16px,2.4cqh,22px)/1.5 Alexandria,sans-serif;color:var(--upv-ivory);text-align:left;padding-left:14px;border-left:2px solid var(--upv-gold)}
.upv__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 */
.upv .upv__label,.upv .upv__n,.upv .upv__s{font-family:"UH Orbitron",sans-serif!important}
.upv .upv__t,.upv .upv__hint,.upv .upv__trust{font-family:Alexandria,sans-serif!important}
.upv .upv__t,.upv .upv__trust{line-height:1.45!important}

/* portrait: niche on top, the three carvings in a row under it, room left for the floating buy buttons */
@container (max-aspect-ratio:4/5){
  .upv__niche{--upv-bw:1.8cqh;top:7cqh;height:min(64cqh,calc(84cqw * 16 / 9))}
  .upv__label--tl{top:3cqh;font-size:9px;letter-spacing:.22em}
  .upv__trust{display:none}
  .upv__chs{right:var(--upv-gut);left:var(--upv-gut);width:auto;top:auto;bottom:calc(62px + 52px);translate:none;grid-template-columns:repeat(3,1fr);gap:10px}
  .upv__ch{grid-template-columns:1fr;row-gap:4px;text-align:center;padding:4px 0 10px}
  .upv__n{grid-row:auto;font-size:15px}
  .upv__t{font-size:clamp(11px,3.2cqw,13px);white-space:nowrap}
  .upv__s{display:none}
  .upv__ch:not(.is-on) .upv__n,.upv__ch:not(.is-on) .upv__t{color:rgba(237,227,207,.42);text-shadow:0 -1px 0 rgba(0,0,0,.9)}
  .upv__hint{right:0;left:0;width:auto;top:auto;bottom:calc(62px + 18px);text-align:center;font-size:11px}
}
@media (min-width:1024px){@container (max-aspect-ratio:4/5){.upv__chs{bottom:calc(80px + 52px)}.upv__hint{bottom:calc(80px + 18px)}}}

/* lite mode (weak phones or no WebGL): painted stone and a CSS-cut niche */
.upv--lite .upv__bg{display:none}
.upv--lite .upv__stage{background:radial-gradient(40% 50% at 70% 35%,rgba(255,196,120,.14),rgba(0,0,0,0) 70%),var(--upv-stone,none) 0 0/512px,#0b0907}
.upv--lite .upv__niche{background:#0d0a07;box-shadow:inset 0 10px 18px rgba(0,0,0,.9),inset 0 -2px 0 rgba(237,227,207,.12),0 1px 0 rgba(237,227,207,.1)}
@media (prefers-reduced-motion:reduce){.upv__n,.upv__t,.upv__s{transition: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-video]){padding-block:0!important}