/* VitaGen V39 — compact editorial product hero on smartphones.
   Desktop and product content below the hero intentionally remain unchanged. */
.hero-persona .hero-value-image { display:none; margin:0; }

@media (max-width:720px) {
  /* Compact vertical rhythm and quieter typography. */
  html body .hero-persona,
  html body.novodailies-only .detail-hero.hero-persona {
    padding:92px 0 30px!important;
  }
  html body .hero-persona--detail,
  html body.novodailies-only .detail-hero.hero-persona--detail {
    padding-top:91px!important;
  }
  html body .hero-persona .container { width:calc(100% - 40px)!important; }
  html body .hero-persona .hero-persona-inner { gap:0!important; }
  html body .hero-persona .hero-persona-copy { max-width:100%!important; }
  html body .hero-persona .hero-persona-copy h1,
  html body.novodailies-only .detail-hero.hero-persona .detail-copy h1 {
    font-family:'Urbanist',sans-serif!important;
    font-size:clamp(34px,10.2vw,43px)!important;
    font-weight:300!important;
    line-height:1.035!important;
    letter-spacing:-.025em!important;
    max-width:100%!important;
    text-wrap:balance;
    margin:0!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
    color:#123e49!important;
  }
  html body .hero-persona .hero-persona-copy .hero-subline,
  html body.novodailies-only .detail-hero.hero-persona .detail-intro {
    margin:16px 0 0!important;
    max-width:none!important;
    font-size:14.5px!important;
    font-weight:400!important;
    line-height:1.55!important;
    letter-spacing:.001em!important;
    color:#466a70!important;
  }
  /* This same information stays in the normal document flow, but is much more scan-friendly. */
  html body .hero-persona .hero-value-card {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) clamp(94px,28vw,125px)!important;
    grid-template-rows:auto auto;
    grid-template-areas:'price photo' 'content photo';
    gap:6px 14px!important;
    align-items:center;
    margin:22px 0 0!important;
    padding:14px!important;
    border:1px solid rgba(162,124,79,.28)!important;
    border-radius:19px!important;
    background:rgba(255,255,255,.9)!important;
    box-shadow:0 14px 32px rgba(20,63,68,.075)!important;
    min-width:0;
  }
  html body .hero-persona .hero-value-price {
    grid-area:price;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap;
    gap:2px 10px!important;
    align-items:baseline;
    padding:0!important;
    margin:0!important;
    border:0!important;
    min-width:0;
  }
  html body .hero-persona .hero-value-price strong {
    font-size:38px!important;
    font-weight:400!important;
    line-height:1!important;
    letter-spacing:-.035em!important;
    color:#123e49!important;
  }
  html body .hero-persona .hero-value-price span {
    font-size:12px!important;
    color:#8d6e48!important;
    letter-spacing:0!important;
  }
  html body .hero-persona .hero-value-content {
    grid-area:content;
    min-width:0;
    padding:0!important;
  }
  html body .hero-persona .hero-value-content strong {
    font-size:13.2px!important;
    font-weight:600!important;
    line-height:1.35!important;
    color:#214a51!important;
  }
  html body .hero-persona .hero-value-content span {
    display:block;
    margin:5px 0 0!important;
    font-size:11.8px!important;
    font-weight:400!important;
    line-height:1.42!important;
    color:#678087!important;
  }
  html body .hero-persona .hero-value-image {
    display:block!important;
    grid-area:photo;
    width:100%;
    height:clamp(140px,37vw,171px);
    padding:0;
    margin:0;
    overflow:hidden;
    background:linear-gradient(135deg,#f9faf9,#e9efed);
    border:1px solid rgba(23,75,82,.07);
    border-radius:13px;
  }
  html body .hero-persona .hero-value-image img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:52% 43%;
    background:#fff;
  }
  html body .hero-persona .hero-service-points {
    margin:17px 0 0!important;
    display:grid!important;
    gap:9px!important;
  }
  html body .hero-persona .hero-service-points li {
    display:grid!important;
    grid-template-columns:17px minmax(0,1fr);
    gap:10px!important;
    align-items:start!important;
    font-size:12.8px!important;
    line-height:1.38!important;
    color:#46656c!important;
  }
  html body .hero-persona .hero-service-points strong {
    color:#1a4650!important;
    font-weight:600!important;
  }
  html body .hero-persona .hero-service-check {
    width:17px!important;
    height:17px!important;
    flex-basis:17px!important;
    margin-top:0!important;
    background:#f5eee4!important;
  }
  /* One strong CTA, one visually quiet text link. */
  html body .hero-persona .hero-persona-actions,
  html body.novodailies-only .detail-hero.hero-persona .detail-hero-actions {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    gap:0!important;
    margin:20px 0 0!important;
  }
  html body .hero-persona .hero-persona-actions .cta-v33,
  html body.novodailies-only .detail-hero.hero-persona .detail-hero-actions .cta-v33 {
    display:flex!important;
    justify-content:center!important;
    width:100%!important;
    max-width:none!important;
    min-height:52px!important;
    padding:12px 20px!important;
    border-radius:999px!important;
    font-size:13.5px!important;
    letter-spacing:.006em!important;
    font-weight:600!important;
    box-shadow:0 9px 23px rgba(156,113,64,.13)!important;
  }
  html body .hero-persona .hero-persona-actions .detail-hero-cta,
  html body.novodailies-only .detail-hero.hero-persona .detail-hero-actions .detail-hero-cta {
    width:max-content!important;
    max-width:100%!important;
    min-height:38px!important;
    padding:7px 0!important;
    margin:8px 0 0!important;
    display:inline-flex!important;
    justify-content:flex-start!important;
    gap:10px!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    color:#25525b!important;
    font-size:12.7px!important;
    font-weight:600!important;
    letter-spacing:.01em!important;
    text-decoration:none!important;
  }
  html body .hero-persona .hero-persona-actions .detail-hero-cta:hover,
  html body .hero-persona .hero-persona-actions .detail-hero-cta:focus-visible {
    color:#a77d4a!important;
  }
  html body .hero-persona .hero-persona-phone,
  html body.novodailies-only .detail-hero.hero-persona .detail-hero-phone {
    margin:7px 0 0!important;
    padding:0!important;
    color:#56747a!important;
    font-size:12.5px!important;
    font-weight:400!important;
    line-height:1.5!important;
    letter-spacing:0!important;
  }
  html body .hero-persona .hero-persona-phone a,
  html body.novodailies-only .detail-hero.hero-persona .detail-hero-phone a {
    color:#20515a!important;
    font-weight:600!important;
  }
  /* Product photography is now integrated in the offer card on mobile.
     Keep the original image's editorial caption as a refined closing note. */
  html body .hero-persona .hero-persona-visual {
    display:block!important;
    width:100%;
    margin:14px 0 0!important;
    min-height:0!important;
    height:auto!important;
    padding:0!important;
  }
  html body .hero-persona .hero-product-stage {
    display:block!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
  }
  html body .hero-persona .hero-product-glow,
  html body .hero-persona .hero-product-main-card,
  html body .hero-persona .hero-product-floating,
  html body .hero-persona .hero-product-caption { display:none!important; }
  html body .hero-persona .hero-product-badge {
    position:static!important;
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    margin:0!important;
    padding:7px 0 7px 12px!important;
    background:transparent!important;
    border:0!important;
    border-left:2px solid #b49163!important;
    border-radius:0!important;
    box-shadow:none!important;
    color:#355c65!important;
  }
  html body .hero-persona .hero-product-badge strong {
    margin:0 0 2px!important;
    color:#335c63!important;
    font-size:12.5px!important;
    font-weight:600!important;
    line-height:1.35!important;
  }
  html body .hero-persona .hero-product-badge span {
    color:#658087!important;
    font-size:11.8px!important;
    line-height:1.5!important;
  }
  html body .hero-persona::after {
    width:min(56vw,230px)!important;
    top:180px!important;
    left:-18px!important;
    opacity:.035!important;
  }
  html body .hero-persona .hero-scroll {
    margin:21px auto 0!important;
    width:32px!important;
    height:32px!important;
    background:transparent!important;
    border:1px solid rgba(31,75,83,.2)!important;
    box-shadow:none!important;
  }
  html body .hero-persona .hero-scroll svg {width:17px;height:17px;}
  html body.novodailies-only .detail-hero.hero-persona .breadcrumb {
    margin:0 0 16px!important;
    font-size:11.5px!important;
    line-height:1.4!important;
    flex-wrap:wrap;
  }
  html body.novodailies-only .detail-hero.hero-persona .hero-persona-kicker {
    display:none!important;
  }
}
@media (max-width:359px) {
  html body .hero-persona .container {width:calc(100% - 32px)!important;}
  html body .hero-persona .hero-persona-copy h1,
  html body.novodailies-only .detail-hero.hero-persona .detail-copy h1{font-size:32px!important;}
  html body .hero-persona .hero-value-card {grid-template-columns:minmax(0,1fr) 93px!important;gap:7px 11px!important;padding:12px!important;}
  html body .hero-persona .hero-value-price strong{font-size:34px!important;}
  html body .hero-persona .hero-value-content strong{font-size:12.5px!important;}
  html body .hero-persona .hero-value-content span{font-size:11.2px!important;}
  html body .hero-persona .hero-value-image {height:137px;}
}
@media (prefers-reduced-motion:reduce){
  html body .hero-persona .hero-value-image *,
  html body .hero-persona .hero-persona-actions *{animation:none!important;transition:none!important;}
}

/* Tablet portrait: don't let the old stacked image collage dominate the page. */
@media (min-width:721px) and (max-width:980px) {
  html body .hero-persona {padding-top:118px!important;padding-bottom:42px!important;}
  html body .hero-persona--detail{padding-top:110px!important;}
  html body .hero-persona .hero-persona-inner{display:block!important;max-width:720px;margin-left:auto;margin-right:auto;}
  html body .hero-persona .hero-persona-copy{max-width:690px!important;}
  html body .hero-persona .hero-persona-copy h1,
  html body.novodailies-only .detail-hero.hero-persona .detail-copy h1{font-size:clamp(44px,6.6vw,57px)!important;line-height:1.06!important;}
  html body .hero-persona .hero-persona-copy .hero-subline,
  html body.novodailies-only .detail-hero.hero-persona .detail-intro{font-size:17px!important;line-height:1.62!important;margin-top:18px!important;}
  html body .hero-persona .hero-value-card{
    position:relative;
    max-width:690px;
    min-height:169px;
    padding:20px 180px 20px 24px!important;
    margin-top:24px!important;
    align-items:center;
  }
  html body .hero-persona .hero-value-price{min-height:80px;}
  html body .hero-persona .hero-value-image{
    display:block!important;
    position:absolute;
    top:12px;
    right:12px;
    bottom:12px;
    width:145px;
    margin:0;
    overflow:hidden;
    border-radius:17px;
    background:#f1f5f3;
  }
  html body .hero-persona .hero-value-image img{width:100%;height:100%;object-fit:cover;object-position:52% 43%;}
  html body .hero-persona .hero-service-points{gap:7px!important;margin-top:16px!important;}
  html body .hero-persona .hero-persona-actions{margin-top:22px!important;}
  html body .hero-persona .hero-persona-visual{height:auto!important;min-height:0!important;max-width:690px;margin:16px 0 0!important;}
  html body .hero-persona .hero-product-stage{height:auto!important;min-height:0!important;width:100%!important;}
  html body .hero-persona .hero-product-main-card,
  html body .hero-persona .hero-product-floating,
  html body .hero-persona .hero-product-glow {display:none!important;}
  html body .hero-persona .hero-product-badge{
    position:static!important;
    width:auto!important;
    max-width:100%!important;
    margin:0!important;
    padding:8px 0 8px 14px!important;
    color:#355c65!important;
    background:transparent!important;
    border:0!important;
    border-left:2px solid #b49163!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  html body .hero-persona .hero-product-badge strong{color:#234851!important;font-size:13px!important;margin:0 0 2px!important;}
  html body .hero-persona .hero-product-badge span{color:#608087!important;font-size:12px!important;}
  html body .hero-persona .hero-scroll{margin:24px auto 0!important;position:static!important;transform:none!important;}
}