/* V83 — Client mobile review fixes
   - Keep full brand name + readable tagline on Android/iOS.
   - Prevent Featured Story title glyph/line clipping on iOS.
   - Preserve the existing mobile layout and functionality.
*/
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

@media (max-width: 767px){
  /* Header brand: do not ellipsize "THE COSMIC STUDIO" and do not hide the tagline. */
  body.cosmic-v11 .site-header .header-shell,
  body.cosmic-v14 .site-header .header-shell,
  body.cosmic-v15 .site-header .header-shell{
    gap:8px!important;
    min-width:0!important;
  }

  body.cosmic-v11 .site-header .brand,
  body.cosmic-v14 .site-header .brand,
  body.cosmic-v15 .site-header .brand{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    max-width:calc(100% - 92px)!important;
    gap:8px!important;
    overflow:visible!important;
  }

  body.cosmic-v11 .site-header .brand-mark,
  body.cosmic-v14 .site-header .brand-mark,
  body.cosmic-v15 .site-header .brand-mark{
    width:44px!important;
    height:44px!important;
    flex:0 0 44px!important;
    overflow:visible!important;
  }

  body.cosmic-v11 .site-header .brand-copy,
  body.cosmic-v14 .site-header .brand-copy,
  body.cosmic-v15 .site-header .brand-copy{
    display:block!important;
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
  }

  body.cosmic-v11 .site-header .brand-copy b,
  body.cosmic-v14 .site-header .brand-copy b,
  body.cosmic-v15 .site-header .brand-copy b{
    display:block!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    font-size:15px!important;
    line-height:1.08!important;
    letter-spacing:.018em!important;
    padding-bottom:1px!important;
  }

  body.cosmic-v11 .site-header .brand-copy small,
  body.cosmic-v14 .site-header .brand-copy small,
  body.cosmic-v15 .site-header .brand-copy small{
    display:block!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    font-size:6.8px!important;
    line-height:1.28!important;
    letter-spacing:.12em!important;
    margin-top:3px!important;
  }

  body.cosmic-v11 .site-header .header-actions,
  body.cosmic-v14 .site-header .header-actions,
  body.cosmic-v15 .site-header .header-actions{
    flex:0 0 auto!important;
    margin-left:auto!important;
    gap:5px!important;
  }

  /* Home hero Featured Story: Safari/iOS was clipping the lower half of letters.
     Keep the current overlay, but give the title a safe line box and enough bottom room. */
  body.home-page .hero-panorama-card .hero-product-copy,
  body.home-page .hero-panorama-card .hero-product-copy.clean{
    left:14px!important;
    right:14px!important;
    bottom:15px!important;
    max-width:calc(100% - 28px)!important;
    padding:12px 13px 14px!important;
    overflow:visible!important;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
  }

  body.home-page .hero-panorama-card .hero-product-copy b,
  body.home-page .hero-panorama-card .hero-product-copy.clean b{
    font-size:22px!important;
    line-height:1.12!important;
    margin:3px 0 0!important;
    padding:0 0 3px!important;
    max-width:100%!important;
    white-space:normal!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
  }

  body.home-page .hero-panorama-card .hero-product-copy span,
  body.home-page .hero-panorama-card .hero-product-copy.clean span{
    font-size:10px!important;
    line-height:1.3!important;
    margin-bottom:1px!important;
  }

  /* Product page mobile readability seen in client review video; sizing only, no layout change. */
  body.product-page .purchase-panel > p{
    font-size:15px!important;
    line-height:1.62!important;
  }
  body.product-page .delivery-estimate-box,
  body.product-page .option-grid button,
  body.product-page .best-for-pills span,
  body.product-page .purchase-variants>b,
  body.product-page .purchase-variant-list>span,
  body.product-page .assurance-grid span{
    font-size:13px!important;
    line-height:1.35!important;
  }

  /* iOS safe area so the fixed mobile navigation does not sit too low. */
  body.cosmic-v11 .mobile-bottom-nav{
    bottom:max(12px, env(safe-area-inset-bottom))!important;
  }
}

@media (max-width: 390px){
  body.cosmic-v11 .site-header .brand,
  body.cosmic-v14 .site-header .brand,
  body.cosmic-v15 .site-header .brand{
    max-width:calc(100% - 86px)!important;
    gap:6px!important;
  }
  body.cosmic-v11 .site-header .brand-mark,
  body.cosmic-v14 .site-header .brand-mark,
  body.cosmic-v15 .site-header .brand-mark{
    width:40px!important;
    height:40px!important;
    flex-basis:40px!important;
  }
  body.cosmic-v11 .site-header .brand-copy b,
  body.cosmic-v14 .site-header .brand-copy b,
  body.cosmic-v15 .site-header .brand-copy b{
    font-size:13.5px!important;
  }
  body.cosmic-v11 .site-header .brand-copy small,
  body.cosmic-v14 .site-header .brand-copy small,
  body.cosmic-v15 .site-header .brand-copy small{
    font-size:5.9px!important;
    letter-spacing:.09em!important;
  }
  body.home-page .hero-panorama-card .hero-product-copy b,
  body.home-page .hero-panorama-card .hero-product-copy.clean b{
    font-size:20px!important;
  }
}