/* Original Minal campaign artwork; the desktop campaign retains its existing layout. */
.mobile-campaign,.hero-slide-counter,.hero-playback { display:none; }

@media(max-width:900px) {
  .home-page.hero-in-view .whatsapp-float { visibility:hidden; pointer-events:none; }
  .home-page .hero.home-hero {
    height:clamp(420px,min(150vw,calc(100svh - 184px - var(--mobile-topbar-height))),660px);
    aspect-ratio:auto;
    background:#f5eee3;
    isolation:isolate;
    touch-action:pan-y;
  }
  .home-page .hero-slide>.campaign-art { display:none; }
  .mobile-campaign {
    --campaign-accent:#762c43;
    position:relative;
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#f5eee3 url('assets/campaign/minal-botanical-art.webp') center / cover no-repeat;
    color:var(--campaign-accent);
  }
  .mobile-campaign-blue { --campaign-accent:#354f65; }
  .mobile-campaign-copy { position:absolute; z-index:2; inset:24px 16px auto; text-align:center; }
  .mobile-campaign-eyebrow { display:block; margin-bottom:10px; font-size:10px; font-weight:700; line-height:16px; letter-spacing:2.2px; }
  .home-page .hero .mobile-campaign-copy h1,
  .home-page .hero .mobile-campaign-copy h2 { margin:0; font-size:clamp(36px,10.5vw,46px); font-weight:700; line-height:.98; letter-spacing:-1.2px; }
  .mobile-campaign-copy em { font-style:normal; font-weight:400; }
  .mobile-campaign-blue .mobile-campaign-copy h2 { font-size:clamp(31px,9.5vw,42px); }
  .mobile-campaign-portrait {
    position:absolute;
    inset:150px 0 87px;
    width:70%;
    max-width:320px;
    margin-inline:auto;
    padding:6px;
    border:1px solid #ac867eaa;
    border-radius:48% 48% 3px 3px;
    background:#fffcf4;
    box-shadow:7px 10px 0 #ad8e8030;
  }
  .mobile-campaign-portrait img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 15%;
    border-radius:48% 48% 0 0;
  }
  .mobile-campaign-rose .mobile-campaign-portrait img { object-position:50% 25%; }
  .mobile-campaign-note {
    position:absolute;
    left:calc(50% + min(37vw,172px));
    top:51%;
    transform:translateY(-50%);
    writing-mode:vertical-rl;
    white-space:nowrap;
    font-size:9px;
    line-height:14px;
    font-weight:400;
    letter-spacing:1.5px;
  }
  .mobile-campaign-cta {
    position:absolute;
    bottom:23px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-width:205px;
    min-height:46px;
    padding:12px 19px;
    border-radius:2px;
    background:var(--campaign-accent);
    color:#fff;
    font-size:13px;
    font-weight:700;
    line-height:20px;
    white-space:nowrap;
  }
  .mobile-campaign-cta svg { width:20px; height:20px; }
  .mobile-campaign:focus-visible { outline-offset:-5px; }
  .home-page .hero-controls {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    bottom:-48px;
    height:48px;
    padding:0 19px;
    background:#fffdfb;
    border-bottom:1px solid #efe6de;
    color:#79665f;
  }
  .hero-slide-counter { display:block; font-size:11px; letter-spacing:1.2px; font-variant-numeric:tabular-nums; }
  .home-page .hero-dots { gap:1px; }
  .home-page .hero-dots button { width:30px; min-width:30px; flex-basis:30px; }
  .home-page .hero-dots button:before { width:6px; height:6px; background:#d8c8c2; transition:width .2s ease; }
  .home-page .hero-dots button.is-active:before { width:22px; border-radius:5px; background:var(--berry); }
  .hero-playback { display:flex; align-items:center; justify-content:flex-end; justify-self:end; gap:7px; min-height:44px; padding:0 0 0 10px; color:var(--berry); font-size:11px; }
  .hero-playback-symbol { width:8px; height:11px; border-left:2px solid currentColor; border-right:2px solid currentColor; }
  .hero-playback[aria-pressed="true"] .hero-playback-symbol { width:0; height:0; border:5px solid transparent; border-left:8px solid currentColor; border-right:0; }
  .home-page .top-picks>.home-section-heading { margin-top:80px; }
  .home-page .hero-slide.is-active .mobile-campaign { animation:minal-campaign-reveal .38s ease-out both; }
  @keyframes minal-campaign-reveal { from { opacity:.35; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
}
@media(max-width:900px) and (min-height:501px) and (max-height:700px) {
  .mobile-campaign-copy { top:20px; }
  .home-page .hero .mobile-campaign-copy h1,
  .home-page .hero .mobile-campaign-copy h2 { font-size:32px; }
  .mobile-campaign-portrait { top:128px; bottom:78px; width:64%; }
  .mobile-campaign-cta { bottom:17px; }
  .mobile-campaign-note { left:calc(50% + 35vw); font-size:8px; letter-spacing:1px; }
}
@media(max-width:900px) and (max-height:500px) {
  .home-page .hero.home-hero { height:420px; }
  .mobile-campaign-copy { top:40px; left:5%; right:52%; }
  .mobile-campaign-portrait { inset:22px 7% 22px auto; width:36%; }
  .mobile-campaign-note { display:none; }
  .mobile-campaign-cta { left:27%; bottom:100px; }
}
@media(prefers-reduced-motion:reduce) {
  .home-page .hero-slide.is-active .mobile-campaign { animation:none; }
  .home-page .hero-dots button:before { transition:none; }
}
