/* Viewport-aware hero. CSS supplies a fluid fallback; viewport-layout.js
   refines these values from the current available width AND height. */
@media (min-width:761px) {
  .hero {
    --ue-hero-height:max(520px,calc(100vh - 31px));
    --ue-hero-height:max(520px,calc(100dvh - 31px));
  }
  .hero .hero-grid {
    height:var(--ue-hero-height);
    max-width:none;
    margin:0;
    grid-template-columns:var(--ue-image-width,54%) minmax(0,1fr);
  }
  .hero .hero-image {height:100%;min-height:0;}
  .hero .hero-image>img {
    width:100%;height:100%;min-height:0;
    object-fit:cover;object-position:center bottom;
  }
  .hero .shop-header-inner {
    width:100%;max-width:none;min-height:104px;
    margin:0;padding:20px clamp(28px,3.3vw,56px);gap:24px;
  }
  .hero .shop-header .shop-brand {width:auto;flex:0 0 auto;}
  .hero .shop-header .shop-brand img {
    display:block;width:clamp(220px,18.75vw,260px)!important;
    max-width:none;height:auto;margin:0;transform:none!important;
  }
  .hero .shop-header .story-nav {font-size:14px;line-height:1.3;}
  .hero .shop-header::before {inset:0 0 auto;height:160px;}
  .hero .hero-copy {
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    min-width:0;min-height:0;
    padding:var(--ue-copy-padding-top,104px) var(--ue-copy-padding-x,clamp(24px,3.2vw,72px)) var(--ue-copy-padding-bottom,52px);
    gap:var(--ue-copy-gap,28px);
  }
  .hero .hero-copy h1 {
    width:100%;max-width:680px;margin:0;
    font-size:var(--ue-copy-font,clamp(32px,4.2vw,68px));
    line-height:1.04;letter-spacing:-.045em;
  }
  .hero .hero-copy .hero-lead {
    width:100%;max-width:680px;margin:0;
    font-size:var(--ue-lead-font,clamp(16px,1.4vw,21px));line-height:1.55;
  }
  .hero .hero-copy .proof-two {width:100%;max-width:680px;gap:18px;margin:0;}
  .hero .hero-copy .proof-two>strong {font-size:var(--ue-proof-font,30px);line-height:1;}
  .hero .hero-copy .proof-two>div {padding-left:18px;gap:5px;}
  .hero .hero-copy .proof-two .starline {font-size:14px;}
  .hero .hero-copy .proof-two small {font-size:10px;}
  .hero .hero-copy .hero-action {
    width:100%;max-width:680px;min-height:var(--ue-cta-height,56px);
    margin:0;padding:14px 22px;font-size:var(--ue-cta-font,18px);line-height:1.3;gap:14px;
  }
  .hero .hero-copy .hero-action>span {font-size:inherit;line-height:inherit;}
  /* A tall, narrow desktop stacks instead of clipping the product lineup. */
  .hero[data-layout-mode="desktop-stacked"] .hero-grid {
    display:flex;flex-direction:column;height:auto;min-height:var(--ue-hero-height);
  }
  .hero[data-layout-mode="desktop-stacked"] .hero-image {width:100%;height:auto;}
  .hero[data-layout-mode="desktop-stacked"] .hero-image>img {height:auto;object-fit:contain;}
  .hero[data-layout-mode="desktop-stacked"] .hero-copy {
    width:100%;padding:40px var(--ue-copy-padding-x) 48px;gap:24px;
  }
}
/* The narrow transition uses the existing stacked composition, avoiding a
   cramped two-column strip between phone and desktop widths. */
@media (min-width:651px) and (max-width:760px) {
  .hero .hero-grid {display:flex;flex-direction:column;}
  .hero .hero-image {width:100%;}
  .hero .hero-copy {width:100%;padding:28px 32px;}
  .hero .hero-copy h1 {font-size:clamp(36px,7vw,48px);}
  .hero .hero-copy .hero-lead,.hero .hero-copy .hero-action {max-width:none;}
}