/**
 * HangNgoaiShop 3.9.55.71.8.3 — Mobile Product Controls Safe Micro Final.
 * Baseline: 3.9.55.71.8.2 safe recovery.
 * Scope: mobile header control wrappers + single-product notice/breadcrumb/floating utilities.
 * Safety: never changes Flatsome icon-font family/codepoints, nav display, DOM order or header structure.
 */

@media (max-width:849px){
  /* ---------------------------------------------------------
     1) Mobile header controls — wrapper/background only.
     The native <i class="icon-menu"> and <i class="icon-shopping-bag">
     remain fully owned by Flatsome. No glyph/font pseudo-content overrides.
     --------------------------------------------------------- */
  body.yhn-mobile-product-controls-safe-39557183 #masthead .show-for-medium.flex-left .mobile-nav > li.nav-icon .header-button > a[data-open="#main-menu"],
  body.yhn-mobile-product-controls-safe-39557183 #masthead .show-for-medium.flex-right .mobile-nav > li.cart-item .header-button > a.header-cart-link{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid #eadfe4!important;
    border-radius:50%!important;
    background:#fff!important;
    background-image:none!important;
    color:#c9176b!important;
    -webkit-text-fill-color:#c9176b!important;
    box-shadow:none!important;
    overflow:visible!important;
    transform:none!important;
  }
  body.yhn-mobile-product-controls-safe-39557183 #masthead .show-for-medium.flex-left .mobile-nav > li.nav-icon .header-button > a[data-open="#main-menu"]:focus-visible,
  body.yhn-mobile-product-controls-safe-39557183 #masthead .show-for-medium.flex-right .mobile-nav > li.cart-item .header-button > a.header-cart-link:focus-visible{
    outline:2px solid rgba(201,23,107,.2)!important;
    outline-offset:2px!important;
    border-color:#d9a7bd!important;
  }

  /* ---------------------------------------------------------
     2) Product add-to-cart success notice — status copy, not H1.
     Covers both Flatsome's message-container and native Woo notice.
     --------------------------------------------------------- */
  body.single-product.yhn-mobile-product-controls-safe-39557183 .message-container.success-color,
  body.single-product.yhn-mobile-product-controls-safe-39557183 .woocommerce-message{
    font-size:15.5px!important;
    line-height:1.45!important;
    font-weight:500!important;
  }
  body.single-product.yhn-mobile-product-controls-safe-39557183 .message-container.success-color .message-wrapper{
    padding-top:10px!important;
    padding-bottom:10px!important;
  }
  body.single-product.yhn-mobile-product-controls-safe-39557183 .woocommerce-message{
    margin-top:10px!important;
    margin-bottom:10px!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
  }

  /* ---------------------------------------------------------
     3) Product breadcrumb — preserve Rank Math content/schema,
     reduce only visual card height/radius on phones/tablets.
     --------------------------------------------------------- */
  body.single-product.yhn-mobile-product-controls-safe-39557183 .yhn-rankmath-breadcrumb-wrap{
    margin-top:6px!important;
    margin-bottom:8px!important;
  }
  body.single-product.yhn-mobile-product-controls-safe-39557183 .yhn-rankmath-breadcrumb-wrap nav,
  body.single-product.yhn-mobile-product-controls-safe-39557183 .yhn-rankmath-breadcrumb-wrap .rank-math-breadcrumb{
    padding:7px 10px!important;
    border-radius:10px!important;
    font-size:12.5px!important;
    line-height:1.5!important;
    box-shadow:0 3px 10px rgba(30,20,30,.025)!important;
  }

  /* ---------------------------------------------------------
     4) Product-page floating utilities — smaller and closer to
     viewport edges so they compete less with gallery arrows.
     --------------------------------------------------------- */
  body.single-product.yhn-mobile-product-controls-safe-39557183 .ft-chatbox{
    left:6px!important;
    right:auto!important;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px))!important;
    transform:scale(.45)!important;
    transform-origin:left bottom!important;
    box-shadow:none!important;
  }
  body.single-product.yhn-mobile-product-controls-safe-39557183 .back-to-top,
  body.single-product.yhn-mobile-product-controls-safe-39557183 .back-to-top.active,
  body.single-product.yhn-mobile-product-controls-safe-39557183 .button.icon.circle.back-to-top{
    right:7px!important;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px))!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    border-radius:50%!important;
    box-shadow:none!important;
  }

  /* Keep the 71.8.2 Side Cart safe-zone authoritative even though this
     stylesheet loads later. */
  body.single-product.yhn-mobile-product-controls-safe-39557183.cfw-side-cart-open .ft-chatbox,
  body.single-product.yhn-mobile-product-controls-safe-39557183.cfw-side-cart-open .hotline-phone-ring-wrap,
  body.single-product.yhn-mobile-product-controls-safe-39557183.cfw-side-cart-open .back-to-top,
  body.single-product.yhn-mobile-product-controls-safe-39557183.cfw-side-cart-open .back-to-top.active,
  body.single-product.yhn-mobile-product-controls-safe-39557183.cfw-side-cart-open .button.icon.circle.back-to-top{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}

@media (max-width:549px){
  body.single-product.yhn-mobile-product-controls-safe-39557183 .message-container.success-color,
  body.single-product.yhn-mobile-product-controls-safe-39557183 .woocommerce-message{
    font-size:15px!important;
    line-height:1.42!important;
  }
  body.single-product.yhn-mobile-product-controls-safe-39557183 .yhn-rankmath-breadcrumb-wrap nav,
  body.single-product.yhn-mobile-product-controls-safe-39557183 .yhn-rankmath-breadcrumb-wrap .rank-math-breadcrumb{
    padding:6px 9px!important;
    border-radius:9px!important;
    font-size:12.3px!important;
  }
}