/* Mobile-only campaign arrangement. Desktop continues to use the official KV. */
.hero-mobile-products { display:none; }
.hero h1 .hero-lettering-frame { display:contents; }

@media (max-width:700px) {
  .hero {
    background:
      radial-gradient(ellipse at 50% 30%,#b46b3938 0,transparent 63%),
      linear-gradient(#38140b26,#38140b26),
      #43170d url('assets/hero-backdrop-v2.webp') center/cover no-repeat;
  }
  .hero::after { height:22px; }
  .hero-grid { width:100%; padding:0; }
  .hero-copy {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:calc(100% - 32px);
    max-width:430px;
    padding:16px 0 30px;
    margin:0 auto;
  }
  .hero-brands {
    flex-direction:row;
    justify-content:center;
    align-items:center;
    width:100%;
    gap:18px;
    margin:0 0 5px;
  }
  .hero-brands .brand-kobber-image { width:clamp(86px,25vw,104px); height:auto; aspect-ratio:2.68; }
  .hero-brands img { width:clamp(136px,40vw,165px); height:auto; }
  .hero-mobile-products {
    display:block;
    position:relative;
    overflow:hidden;
    width:min(86vw,340px);
    width:min(86vw,47.1svh,340px);
    max-width:100%;
    aspect-ratio:1304/969;
    margin:0 auto 6px;
    filter:drop-shadow(0 10px 8px #210a0655);
  }
  /* Crop transparent canvas padding, without cutting the pouch edges. */
  .hero-mobile-products img {
    position:absolute;
    width:107.515337%;
    max-width:none;
    height:auto;
    left:-4.294479%;
    top:-9.081527%;
  }
  .hero-copy h1 { width:min(78vw,272px); margin:0; }
  .hero h1 .hero-kicker {
    font-size:clamp(18px,5.1vw,22px);
    line-height:1.16;
    letter-spacing:-.025em;
    white-space:nowrap;
  }
  .hero h1 .hero-lettering-frame {
    display:block;
    position:relative;
    overflow:hidden;
    width:100%;
    aspect-ratio:1392/862;
    margin:4px auto 0;
  }
  /* The visible lettering occupies (72,81)-(1464,943) of the original PNG. */
  .hero-lettering-frame .hero-lettering {
    position:absolute;
    width:110.344828%;
    max-width:none;
    height:auto;
    left:-5.172414%;
    top:-9.396752%;
    margin:0;
  }
  .hero-description {
    max-width:330px;
    font-size:clamp(18px,4.8vw,21px);
    line-height:1.2;
    letter-spacing:-.015em;
    margin:7px 0 0;
  }
  .hero-campaign-visual { display:none; }
}

@media (max-width:700px) and (max-height:600px) {
  .hero-copy { padding-top:12px; padding-bottom:25px; }
  .hero-brands { gap:15px; margin-bottom:3px; }
  .hero-copy h1 { width:min(76vw,248px); }
  .hero-mobile-products { margin-bottom:4px; }
  .hero-description { font-size:18px; margin-top:5px; }
}