/* Final visual corrections after rendered QA.
   Shared storefront previews close around content in English and Spanish,
   the desktop hero never collides with the product demo, and headline accents
   get restrained material depth without becoming generic AI neon. */

/* Shared request examples: the outer preview may stay tall for the narrative copy,
   but the miniature browser should size to its own content and sit vertically centered. */
body[data-editorial-family="home"] .editorial-store-preview .preview-media{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:14px!important;
}
body[data-editorial-family="home"] .editorial-store-preview .storefront-mini{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  align-self:center!important;
}
body[data-editorial-family="home"] .editorial-store-preview .storefront-page{
  min-height:0!important;
}
body[data-editorial-family="home"] .editorial-store-preview .storefront-pdp{
  min-height:0!important;
}
body[data-editorial-family="home"] .editorial-store-preview .storefront-photo{
  min-height:286px!important;
}
body[data-editorial-family="home"] .editorial-store-preview .storefront-collection{
  min-height:0!important;
  padding-block:20px!important;
}
body[data-editorial-family="home"] .editorial-store-preview .storefront-landing{
  min-height:286px!important;
}
body[data-editorial-family="home"] .editorial-store-preview .landing-copy{
  padding-block:24px!important;
}
body[data-editorial-family="home"] .editorial-store-preview .landing-products{
  padding-bottom:14px!important;
}

/* Hero slider: the progress/status footer must always follow the active preview in normal flow.
   Earlier layers use fixed scene heights plus absolutely-positioned scenes; code and SEO content
   can exceed those values and paint underneath the progress bar. Only the active scene now takes
   part in layout, so every scenario owns exactly the vertical space it needs. */
body[data-editorial-family="home"] .editorial-hero-demo .demo-workspace{
  display:grid!important;
  grid-template-rows:auto auto auto auto!important;
  overflow:hidden!important;
}
body[data-editorial-family="home"] .editorial-hero-demo .demo-scenes{
  position:relative!important;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
  transition:none!important;
}
body[data-editorial-family="home"] .editorial-hero-demo .demo-scene{
  position:relative!important;
  inset:auto!important;
  display:none!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding:14px 18px!important;
  opacity:0!important;
  transform:none!important;
  pointer-events:none!important;
}
body[data-editorial-family="home"] .editorial-hero-demo .demo-scene.is-active{
  display:grid!important;
  opacity:1!important;
  transform:none!important;
  animation:hero-demo-scene-in .24s ease both;
}
body[data-editorial-family="home"] .editorial-hero-demo .demo-scene .mock-store,
body[data-editorial-family="home"] .editorial-hero-demo .demo-scene .mock-code,
body[data-editorial-family="home"] .editorial-hero-demo .demo-scene .mock-collection{
  align-self:stretch!important;
  min-height:0!important;
}
body[data-editorial-family="home"] .editorial-hero-demo .demo-progress,
body[data-editorial-family="home"] .editorial-hero-demo .demo-result{
  position:relative!important;
  z-index:2!important;
}
@keyframes hero-demo-scene-in{
  from{opacity:.72;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

/* The hero copy and demo both shrink inside their grid tracks. Never allow display type to
   paint under the demo at laptop widths. */
body[data-editorial-family="home"] .editorial-hero-copy,
body[data-editorial-family="home"] .editorial-hero-demo{min-width:0!important}
body[data-editorial-family="home"] .editorial-hero h1{max-width:100%!important}

@media(min-width:981px) and (max-width:1279px){
  body[data-editorial-family="home"] .editorial-hero>.shell{max-width:1220px!important}
  body[data-editorial-family="home"] .editorial-hero-grid{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
    gap:clamp(28px,3.2vw,44px)!important;
  }
  body[data-editorial-family="home"] .editorial-hero-copy{max-width:590px!important}
  body[data-editorial-family="home"] .editorial-hero h1{
    font-size:clamp(48px,5vw,66px)!important;
    line-height:.96!important;
  }
  body[data-editorial-family="home"] .editorial-hero h1 .headline-accent{display:block!important}
}

@media(min-width:1280px){
  body[data-editorial-family="home"] .editorial-hero>.shell{max-width:1320px!important}
  body[data-editorial-family="home"] .editorial-hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.03fr)!important;
    gap:clamp(34px,4vw,58px)!important;
  }
  body[data-editorial-family="home"] .editorial-hero-copy{max-width:690px!important}
  body[data-editorial-family="home"] .editorial-hero h1{
    font-size:clamp(56px,5.25vw,76px)!important;
    line-height:.95!important;
  }
  body[data-editorial-family="home"] .editorial-hero h1 .headline-accent{display:inline!important}
}

/* Hero blue gets a restrained tonal gradient. It stays blue-led in Light and shifts toward
   Ice in Dark, using existing semantic tokens rather than adding another palette. */
body[data-editorial-family="home"] .editorial-hero h1 .headline-accent{
  color:var(--brand);
  background:linear-gradient(92deg,var(--brand) 0%,color-mix(in srgb,var(--brand) 72%,var(--line2)) 54%,color-mix(in srgb,var(--brand) 72%,var(--brand-hover)) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
html:not([data-theme="light"]) body[data-editorial-family="home"] .editorial-hero h1 .headline-accent{
  background:linear-gradient(92deg,var(--brand) 0%,color-mix(in srgb,var(--brand) 58%,var(--brand-hover)) 58%,var(--brand-hover) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Reuse the editorial serif in a few deliberate moments so it reads as a brand device,
   not a one-off accident. */
body[data-editorial-family="home"] .editorial-human .accent-serif,
body[data-editorial-family="home"] .merchant-final .accent-serif{
  color:var(--brand-hover);
}
body[data-editorial-family="home"] .merchant-final .accent-serif{white-space:normal}

@media(max-width:680px){
  body[data-editorial-family="home"] .editorial-store-preview .preview-media{padding:10px!important}
  body[data-editorial-family="home"] .editorial-store-preview .storefront-photo{min-height:220px!important}
  body[data-editorial-family="home"] .editorial-store-preview .storefront-landing{min-height:250px!important}
  body[data-editorial-family="home"] .editorial-hero-demo .demo-scene{padding:12px!important}
}

@media(prefers-reduced-motion:reduce){
  body[data-editorial-family="home"] .editorial-hero-demo .demo-scene.is-active{animation:none!important}
}

@media(prefers-contrast:more){
  body[data-editorial-family="home"] .editorial-hero h1 .headline-accent{
    background:none!important;
    color:var(--brand)!important;
    -webkit-text-fill-color:currentColor!important;
  }
}