/* V22 responsive hero compromise: full-width art, ticker over hero, CTA row below */
.v22-hero-shell{
  background:#080808;
  color:#fff;
  border-bottom:1px solid #6b4b1a;
  margin:0;
}
.v22-hero-media{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#050505;
  isolation:isolate;
}
.v22-hero-media::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:28%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.75) 100%);
  pointer-events:none;
}
.v22-hero-media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center top;
}
.v22-overlay-marquee{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.12);
  background:linear-gradient(90deg, rgba(89,59,17,.92), rgba(21,14,6,.96), rgba(89,59,17,.92));
  box-shadow:0 -6px 18px rgba(0,0,0,.25);
}
.v22-overlay-marquee .marquee-track{
  width:max-content;
  display:flex;
  align-items:center;
  gap:0;
  padding:.6rem 0;
  white-space:nowrap;
  animation:seamlessTicker 33s linear infinite;
  will-change:transform;
}
.v22-overlay-marquee .marquee-set{
  display:flex;
  gap:1.4rem;
  flex:0 0 auto;
  align-items:center;
  padding:0 1.4rem 0 0;
}
.v22-overlay-marquee .marquee-set > span,
.v22-overlay-marquee .marquee-set > b{flex:none;}
.v22-overlay-marquee span,
.v22-overlay-marquee b{
  font-family:"Barlow Condensed", sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.86rem;
  color:#f5f0ed;
}
.v22-overlay-marquee b{color:#ff425f;}
@keyframes seamlessTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.v22-hero-controls{
  padding:1rem 0 .95rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.v22-hero-controls p:not(.kicker){
  font-family:"Barlow Condensed", sans-serif;
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.07em;
  color:#f5f0ed;
  text-transform:uppercase;
}
.v22-hero-controls .kicker{margin:0;}
.v22-hero-controls .v10-hero-actions{margin-left:auto;}
.v22-hero-controls .v10-hero-actions .action{white-space:nowrap;}

/* ensure no duplicate spacing from legacy hero rules */
.v22-hero-shell .layout{max-width:1320px;}
.home-page .v22-hero-shell + .marquee,
.drop-page .v22-hero-shell + .marquee{display:none !important;}

/* optional clickable hotspot aligned over in-image button area */
.v22-hero-hotspot{
  position:absolute;
  left:2.8%;
  bottom:16%;
  width:18.8%;
  height:10%;
  z-index:3;
  display:block;
}
.v22-hero-hotspot.drop{width:19.8%;}
.v22-hero-hotspot:focus-visible{outline:2px solid #fff; outline-offset:2px;}

@media (max-width: 1200px){
  .v22-hero-controls{justify-content:flex-start;}
  .v22-hero-controls .v10-hero-actions{margin-left:0;}
}
@media (max-width: 900px){
  .v22-overlay-marquee .marquee-track{padding:.5rem 0;}
  .v22-overlay-marquee span,
  .v22-overlay-marquee b{font-size:.72rem;}
  .v22-hero-controls{padding:.85rem 0 .8rem; gap:.8rem;}
  .v22-hero-controls p:not(.kicker){font-size:.82rem;}
}
@media (max-width: 700px){
  .v22-hero-media::after{height:34%;}
  .v22-hero-hotspot{display:block;}
  .v22-hero-controls{
    flex-direction:column;
    align-items:flex-start;
  }
  .v22-hero-controls .v10-hero-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
  }
  .v22-hero-controls .v10-hero-actions .action{
    justify-content:center;
    text-align:center;
  }
  .v22-overlay-marquee .marquee-set{gap:1rem; padding-right:1rem;}
  .v22-overlay-marquee span,
  .v22-overlay-marquee b{font-size:.68rem; letter-spacing:.05em;}
}
@media (max-width: 480px){
  .v22-hero-media img{width:100%;}
  .v22-overlay-marquee .marquee-track{padding:.42rem 0;}
  .v22-overlay-marquee span,
  .v22-overlay-marquee b{font-size:.62rem;}
  .v22-hero-controls{padding:.75rem 0 .7rem;}
}

html[data-theme="light"] .v22-hero-shell{
  background:#fffaf5;
  color:#241913;
  border-bottom-color:#c79a55;
}
html[data-theme="light"] .v22-hero-controls p:not(.kicker),
html[data-theme="light"] .v22-overlay-marquee span{color:#fffaf5;}
html[data-theme="cosmic"] .v22-hero-shell{
  background:linear-gradient(180deg,#f5efff 0%,#efe6ff 100%);
  color:#321b54;
  border-bottom-color:#8d5ee6;
}
html[data-theme="cosmic"] .v22-overlay-marquee{
  background:linear-gradient(90deg, rgba(79,36,132,.9), rgba(39,20,70,.96), rgba(79,36,132,.9));
}

@media(prefers-reduced-motion:reduce){.v22-overlay-marquee .marquee-track{animation:none;}}