/* QT-124: canonical frontend button language.
   Orange-outline actions have no outer glow and no color shift.
   The shell remains fixed; yf-ui-enhancements.js moves only the visible text label. */

html body .yf-sheet .yf-msg-btn,
html body .yf-sheet .yf-msg-send-btn,
html body .yf-sheet .yf-interest-download,
html body .yf-contact-copy,
html body .yf-product-msg-actions .yf-product-msg-send,
html body .yf-product-msg-alert-ok,
html body .yf-service-ui-box .yf-service-primary,
html body .yf-service-ui-box .yf-service-secondary,
html body .yf-service-ui-box .yf-customer-logout,
html body .yf-service-ui-box .yf-customer-order-actions button:not(.cancel),
html body .yf-factory-v2-box .yf-fc-primary,
html body .yf-factory-v2-box .yf-fc-outline,
html body .yf-factory-v2-box .yf-fc-pay,
html body .yf-factory-v2-box .yf-fc-price-btn,
html body .yf-factory-v2-box .yf-fc-preview-card button,
html body .yf-return-supplier-preview{
  border:1px solid rgba(244,125,53,.46)!important;
  background:#fff!important;
  color:var(--yf-brand-orange)!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
html body .yf-sheet .yf-msg-btn:active,
html body .yf-sheet .yf-msg-send-btn:active,
html body .yf-sheet .yf-interest-download:active,
html body .yf-contact-copy:active,
html body .yf-product-msg-actions .yf-product-msg-send:active,
html body .yf-product-msg-alert-ok:active,
html body .yf-service-ui-box .yf-service-primary:active,
html body .yf-service-ui-box .yf-service-secondary:active,
html body .yf-service-ui-box .yf-customer-order-actions button:not(.cancel):active,
html body .yf-factory-v2-box .yf-fc-primary:active,
html body .yf-factory-v2-box .yf-fc-outline:active,
html body .yf-factory-v2-box .yf-fc-pay:active,
html body .yf-factory-v2-box .yf-fc-price-btn:active,
html body .yf-factory-v2-box .yf-fc-preview-card button:active,
html body .yf-return-supplier-preview:active{
  opacity:1!important;
  filter:none!important;
  border:1px solid rgba(244,125,53,.46)!important;
  background:#fff!important;
  color:var(--yf-brand-orange)!important;
  box-shadow:none!important;
}

html body .yf-product-msg-actions .yf-product-msg-cancel,
html body .yf-service-ui-box .yf-customer-order-actions button.cancel,
html body .yf-service-ui-box [data-cancel-order],
html body .yf-sheet .yf-cancel,
html body .yf-sheet [data-cancel]{
  border:1px solid #cbd5e1!important;
  background:#f8fafc!important;
  color:#64748b!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
html body .yf-product-msg-actions .yf-product-msg-cancel:active,
html body .yf-service-ui-box .yf-customer-order-actions button.cancel:active,
html body .yf-service-ui-box [data-cancel-order]:active,
html body .yf-sheet .yf-cancel:active,
html body .yf-sheet [data-cancel]:active{
  opacity:1!important;
  filter:none!important;
  border-color:#cbd5e1!important;
  background:#f8fafc!important;
  color:#64748b!important;
  box-shadow:none!important;
}

html body .yf-sheet .yf-contact-wa,
html body .yf-sheet .yf-interest-send-merchant,
html body .yf-sheet .yf-interest-share-friend,
html body .yf-factory-v2-box .wa,
html body .yf-factory-v2-box a[href*="wa.me"],
html body .yf-factory-v2-box a[href*="whatsapp"]{
  border-color:var(--yf-wa-green)!important;
  background:var(--yf-wa-green)!important;
  color:#fff!important;
  box-shadow:none!important;
}
html body .yf-sheet .yf-contact-wa:active,
html body .yf-sheet .yf-interest-send-merchant:active,
html body .yf-sheet .yf-interest-share-friend:active,
html body .yf-factory-v2-box .wa:active,
html body .yf-factory-v2-box a[href*="wa.me"]:active,
html body .yf-factory-v2-box a[href*="whatsapp"]:active{
  opacity:1!important;
  filter:none!important;
  border-color:var(--yf-wa-green)!important;
  background:var(--yf-wa-green)!important;
  color:#fff!important;
  box-shadow:none!important;
}

html body .yf-global-press-target{
  -webkit-tap-highlight-color:transparent!important;
}
html body .yf-global-press-label{
  display:inline-block;
  transform:translateY(0);
  transition:transform .09s ease;
  pointer-events:none;
  will-change:transform;
}
html body .yf-global-press-target.yf-global-pressing .yf-global-press-label{
  transform:translateY(1.5px)!important;
}


/* QT-134: Contact copy controls keep exactly the same shell before, during
   and after the first click. The generic global press wrapper is intentionally
   bypassed; only the visible label moves by half a pixel. */
html body .yf-contact-copy,
html body .yf-contact-copy:hover,
html body .yf-contact-copy:focus,
html body .yf-contact-copy:focus-visible,
html body .yf-contact-copy:active{
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:44px!important;
  height:31px!important;
  min-height:31px!important;
  max-height:31px!important;
  padding:0 9px!important;
  font-size:12px!important;
  line-height:1!important;
  transform:none!important;
  scale:1!important;
  translate:none!important;
  opacity:1!important;
  filter:none!important;
  box-shadow:none!important;
  transition:none!important;
  flex:0 0 auto!important;
}
html body .yf-contact-copy .yf-contact-copy-label{
  display:inline-block!important;
  font-size:12px!important;
  line-height:1!important;
  transform:translateY(0)!important;
  transition:transform .06s ease!important;
  pointer-events:none!important;
  white-space:nowrap!important;
}


/* Legacy detail CTA labels remain fixed; the inner global text label is the only moving layer. */
html body .yf-detail-page #yfDetailInfo > .yf-detail-actions > button:active{
  opacity:1!important;
  filter:none!important;
  box-shadow:none!important;
}
html body .yf-detail-page #yfDetailInfo > .yf-detail-actions > button:active > .yf-action-label{
  opacity:1!important;
}

/* QT-132 group 3: canonical popup corners and compact round controls. */
:root{--yf-popup-close-size:31px;--yf-popup-shell-radius:6px;--yf-popup-card-radius:4px;}

html body .yf-sheet,
html body .yf-service-ui-box,
html body .yf-factory-v2-box,
html body .yf-product-msg-box,
html body .yf-interest-preview-box,
html body .yf-supplier-product-detail,
html body .yf-supplier-photo-stage,
html body .yf-about-dismiss-dialog,
html body .yf-verification-notice-box,
html body .yf-success-tip-box,
html body .yf-msg-success-box{
  border-radius:var(--yf-popup-shell-radius)!important;
  overflow:hidden!important;
}
html body .yf-sheet .yf-sheet-head,
html body .yf-product-msg-head,
html body .yf-service-ui-head,
html body .yf-factory-v2-mask .yf-fc-head,
html body .yf-supplier-product-detail-head,
html body .yf-about-dismiss-head{
  border-radius:var(--yf-popup-shell-radius) var(--yf-popup-shell-radius) 0 0!important;
}
html body .yf-sheet [class*="-card"],
html body .yf-service-ui-box [class*="-card"],
html body .yf-factory-v2-box [class*="-card"],
html body .yf-product-msg-box [class*="-card"],
html body .yf-interest-preview-box [class*="-card"],
html body .yf-supplier-product-detail [class*="-card"]{
  border-radius:var(--yf-popup-card-radius)!important;
}

html body .yf-sheet .yf-sheet-close,
html body .yf-product-msg-head .yf-product-msg-close,
html body .yf-service-ui-head [data-yf-service-close],
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close],
html body .yf-interest-preview-box .yf-interest-preview-close,
html body .yf-supplier-product-detail-close,
html body .yf-detail-video-close,
html body .yf-detail-video-error-close,
html body .yf-supplier-photo-stage .yf-supplier-photo-close,
html body #yfLightbox .yf-lightbox-close,
html body .yf-about-dismiss-head>button{
  width:var(--yf-popup-close-size)!important;
  height:var(--yf-popup-close-size)!important;
  min-width:var(--yf-popup-close-size)!important;
  min-height:var(--yf-popup-close-size)!important;
  max-width:var(--yf-popup-close-size)!important;
  max-height:var(--yf-popup-close-size)!important;
  flex:0 0 var(--yf-popup-close-size)!important;
  background:rgba(255,255,255,.96)!important;
  transform:scale(.9)!important;
}
html body .yf-sheet .yf-sheet-close::before,
html body .yf-sheet .yf-sheet-close::after,
html body .yf-product-msg-head .yf-product-msg-close::before,
html body .yf-product-msg-head .yf-product-msg-close::after,
html body .yf-service-ui-head [data-yf-service-close]::before,
html body .yf-service-ui-head [data-yf-service-close]::after,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]::before,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]::after,
html body .yf-interest-preview-box .yf-interest-preview-close::before,
html body .yf-interest-preview-box .yf-interest-preview-close::after,
html body .yf-supplier-product-detail-close::before,
html body .yf-supplier-product-detail-close::after,
html body .yf-detail-video-close::before,
html body .yf-detail-video-close::after,
html body .yf-detail-video-error-close::before,
html body .yf-detail-video-error-close::after,
html body .yf-supplier-photo-stage .yf-supplier-photo-close::before,
html body .yf-supplier-photo-stage .yf-supplier-photo-close::after,
html body .yf-about-dismiss-head>button::before,
html body .yf-about-dismiss-head>button::after{
  width:14px!important;
  height:1.8px!important;
}
html body .yf-sheet.sheet-contact .yf-contact-interest-list .yf-interest-del,
html body .yf-sheet.sheet-interest button.yf-interest-del{
  width:31px!important;
  height:31px!important;
  min-width:31px!important;
  min-height:31px!important;
  flex:0 0 31px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 1px 5px rgba(0,0,0,.10)!important;
  transform:scale(.9)!important;
}
html body .yf-sheet.sheet-contact .yf-contact-interest-list .yf-interest-del::before,
html body .yf-sheet.sheet-interest button.yf-interest-del::before{
  width:9px!important;
  height:1.8px!important;
}
html body .yf-sheet.sheet-contact .yf-contact-interest-list .yf-interest-del:active,
html body .yf-sheet.sheet-interest button.yf-interest-del:active{
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 1px 5px rgba(0,0,0,.10)!important;
}
html body .yf-toast-over-contact{
  z-index:2147483647!important;
  max-width:min(420px,calc(100vw - 28px))!important;
  border-radius:6px!important;
}

/* QT-132 group 5: detail divider, unified description band and compact image controls.
   The shared detail-content divider already supplies the top separator; do not add a second 2px border here. */
@media (min-width:768px){
  html body .yf-detail-page > .yf-detail-content{
    grid-template-columns:minmax(0,52fr) minmax(0,48fr)!important;
    gap:2px!important;
    align-items:stretch!important;
    background:#e1e4e8!important;
  }
  html body .yf-detail-page > .yf-detail-content > .yf-detail-gallery{
    border-right:0!important;
    box-sizing:border-box!important;
    background:var(--yf-detail-thumbnail-plane,#e1e4e8)!important;
  }
  html body .yf-detail-page > .yf-detail-content > #yfDetailInfo,
  html body .yf-detail-page > .yf-detail-content > .yf-detail-info{
    border-left:0!important;
    background:#fff!important;
  }
}

html body .yf-detail-page .yf-detail-description-section{
  margin-top:0!important;
  padding:0!important;
  background:#f7f7f7!important;
  border:0!important;
  border-top:0!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}
html body .yf-detail-page .yf-detail-description-section > .yf-detail-section-title.yf-detail-desc-title,
html body .yf-detail-page .yf-detail-description-section > .yf-detail-about:not(.yf-empty-section):not([hidden]),
html body .yf-detail-page .yf-detail-description-section > .yf-detail-images{
  background:#f7f7f7!important;
  border:0!important;
  border-top:0!important;
  box-shadow:none!important;
}
html body .yf-detail-page .yf-detail-description-section > .yf-detail-section-title.yf-detail-desc-title{
  margin:0!important;
  border-bottom:0!important;
}
html body .yf-detail-page .yf-detail-description-section > .yf-detail-about:not(.yf-empty-section):not([hidden]){
  margin:0!important;
}
html body .yf-detail-page .yf-detail-description-section > .yf-detail-about:not(.yf-empty-section):not([hidden]) *:not(img):not(video):not(iframe):not(svg){
  background-color:transparent!important;
  box-shadow:none!important;
}


/* Lightbox prev/next/close share one size, fill and border; close remains top-right. */
html body #yfLightbox .yf-lightbox-prev,
html body #yfLightbox .yf-lightbox-next,
html body #yfLightbox .yf-lightbox-close{
  position:absolute!important;
  z-index:3!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  max-width:34px!important;
  max-height:34px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.34)!important;
  border-radius:50%!important;
  background:rgba(45,45,45,.78)!important;
  color:#fff!important;
  box-shadow:0 2px 10px rgba(0,0,0,.28)!important;
  box-sizing:border-box!important;
}
html body #yfLightbox .yf-lightbox-prev{
  top:50%!important;
  transform:translateY(-50%)!important;
  transform-origin:center center!important;
}
html body #yfLightbox .yf-lightbox-next{
  top:50%!important;
  transform:translateY(-50%)!important;
  transform-origin:center center!important;
}
html body #yfLightbox .yf-lightbox-prev:active{
  background:rgba(45,45,45,.78)!important;
}
html body #yfLightbox .yf-lightbox-next:active{
  background:rgba(45,45,45,.78)!important;
}
html body #yfLightbox .yf-lightbox-close{
  top:14px!important;
  right:14px!important;
  left:auto!important;
  transform:none!important;
  transform-origin:center center!important;
  background:rgba(45,45,45,.78)!important;
}
html body #yfLightbox .yf-lightbox-close:active{
  background:rgba(45,45,45,.78)!important;
}
html body #yfLightbox .yf-lightbox-prev::before,
html body #yfLightbox .yf-lightbox-prev::after,
html body #yfLightbox .yf-lightbox-next::before,
html body #yfLightbox .yf-lightbox-next::after{
  width:8px!important;
  height:1.8px!important;
  background:#fff!important;
  border-radius:2px!important;
  transform-origin:center center!important;
}
html body #yfLightbox .yf-lightbox-prev::before{
  transform:translate(-4px,-3px) rotate(-53deg)!important;
}
html body #yfLightbox .yf-lightbox-prev::after{
  transform:translate(-4px,3px) rotate(53deg)!important;
}
html body #yfLightbox .yf-lightbox-next::before{
  transform:translate(-4px,-3px) rotate(53deg)!important;
}
html body #yfLightbox .yf-lightbox-next::after{
  transform:translate(-4px,3px) rotate(-53deg)!important;
}
html body #yfLightbox .yf-lightbox-close::before,
html body #yfLightbox .yf-lightbox-close::after{
  width:14px!important;
  height:1.8px!important;
  background:#fff!important;
}
@media (min-width:768px){
  html body #yfLightbox .yf-lightbox-prev{left:clamp(26px,3vw,44px)!important;right:auto!important;}
  html body #yfLightbox .yf-lightbox-next{top:50%!important;right:clamp(26px,3vw,44px)!important;left:auto!important;}
  html body #yfLightbox .yf-lightbox-close{top:14px!important;right:14px!important;left:auto!important;}
}
@media (max-width:767px){
  html body #yfLightbox .yf-lightbox-prev{left:10px!important;right:auto!important;}
  html body #yfLightbox .yf-lightbox-next{top:50%!important;right:10px!important;left:auto!important;}
  html body #yfLightbox .yf-lightbox-close{top:14px!important;right:14px!important;left:auto!important;}
}


/* Every popup back control uses one solid white triangle plus a short rectangular shaft.
   It has no circular shell and is drawn entirely with CSS. */
html body .yf-sheet .yf-sheet-head > .yf-sheet-back,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-back],
html body .yf-service-ui-head > .yf-service-back{
  position:relative!important;
  display:block!important;
  width:30px!important;
  height:34px!important;
  min-width:30px!important;
  min-height:34px!important;
  max-width:30px!important;
  max-height:34px!important;
  flex:0 0 30px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  overflow:visible!important;
  transform:none!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
html body .yf-sheet .yf-sheet-head > .yf-sheet-back::before,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-back]::before,
html body .yf-service-ui-head > .yf-service-back::before{
  content:""!important;
  position:absolute!important;
  left:4px!important;
  top:50%!important;
  width:0!important;
  height:0!important;
  margin:-6px 0 0!important;
  padding:0!important;
  border-top:6px solid transparent!important;
  border-bottom:6px solid transparent!important;
  border-right:8px solid #fff!important;
  border-left:0!important;
  background:transparent!important;
  transform:none!important;
  display:block!important;
}
html body .yf-sheet .yf-sheet-head > .yf-sheet-back::after,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-back]::after,
html body .yf-service-ui-head > .yf-service-back::after{
  content:""!important;
  position:absolute!important;
  left:11px!important;
  top:50%!important;
  width:12px!important;
  height:3px!important;
  margin:-1.5px 0 0!important;
  padding:0!important;
  border:0!important;
  border-radius:1px!important;
  background:#fff!important;
  transform:none!important;
  display:block!important;
}
html body .yf-sheet .yf-sheet-head > .yf-sheet-back .yf-sheet-back-arrow,
html body .yf-sheet .yf-sheet-head > .yf-sheet-back .yf-sheet-back-label{
  display:none!important;
}
html.yf-lang-ar body .yf-sheet .yf-sheet-head > .yf-sheet-back,
body.yf-lang-ar .yf-sheet .yf-sheet-head > .yf-sheet-back,
html.yf-lang-ar body .yf-factory-v2-mask .yf-fc-head [data-fc-back],
body.yf-lang-ar .yf-factory-v2-mask .yf-fc-head [data-fc-back]{
  transform:none!important;
}


/* QT-141: Contact Us copy controls are 25% smaller without click enlargement. */
html body .yf-sheet.sheet-contact .yf-contact-copy,
html body .yf-sheet.sheet-contact .yf-contact-copy:hover,
html body .yf-sheet.sheet-contact .yf-contact-copy:focus,
html body .yf-sheet.sheet-contact .yf-contact-copy:focus-visible,
html body .yf-sheet.sheet-contact .yf-contact-copy:active{
  min-width:34px!important;
  width:auto!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  padding:0 5px!important;
  border-radius:7px!important;
  font-size:10.5px!important;
  line-height:1!important;
  transform:none!important;
  scale:1!important;
  translate:none!important;
  box-shadow:none!important;
  transition:none!important;
}
html body .yf-sheet.sheet-contact .yf-contact-copy .yf-contact-copy-label,
html body .yf-sheet.sheet-contact .yf-contact-copy:active .yf-contact-copy-label{
  font-size:10.5px!important;
  line-height:1!important;
  transform:none!important;
  transition:none!important;
}

/* QT-159: price/view buttons keep their label horizontally centered while pressed. */
html body .yf-factory-v2-box .yf-fc-price-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:nowrap!important;
}
html body .yf-factory-v2-box .yf-fc-price-btn .yf-global-press-label{
  transform:translate(0,0)!important;
}
html body .yf-factory-v2-box .yf-fc-price-btn.yf-global-pressing .yf-global-press-label{
  transform:translate(0,1px)!important;
}

/* QT-183 canonical restrained press feedback.
   The JS primes labels before the first click and freezes the normal shell visuals during press.
   Text controls move only their visible label; icon-only and input controls move as one stable unit. */
html body .yf-global-press-target{-webkit-tap-highlight-color:transparent!important;}
html body .yf-global-press-label{
  display:inline-block;
  transform:translate3d(0,0,0);
  transition:transform .06s ease!important;
}
html body .yf-global-press-target.yf-global-pressing{
  scale:1!important;
  animation:none!important;
}
html body .yf-global-press-target.yf-global-pressing .yf-global-press-label{
  transform:translate3d(0,1px,0)!important;
}
html body .yf-global-press-target.yf-global-pressing.yf-global-icon-only,
html body input.yf-global-press-target.yf-global-pressing{
  translate:0 1px!important;
}
/* Copy controls already carry a stable inner label and deliberately bypass the generic wrapper. */
html body .yf-sheet.sheet-contact .yf-contact-copy:active .yf-contact-copy-label,
html body .yf-contact-copy:active .yf-contact-copy-label{
  transform:translate3d(0,1px,0)!important;
}


/* QT-212: one category row layout for home and detail.
   LTR: label then right arrow. RTL Arabic: left arrow then label. */
html body .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child{
  display:inline-grid!important;
  grid-template-columns:max-content max-content!important;
  grid-template-areas:"label arrow"!important;
  align-items:center!important;
  justify-content:start!important;
  column-gap:6px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  direction:ltr!important;
}

html body .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child>span{
  grid-area:label!important;
  display:inline-block!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  direction:ltr!important;
  text-align:left!important;
  white-space:nowrap!important;
}

html body .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child::after{
  grid-area:arrow!important;
  content:""!important;
  display:block!important;
  position:static!important;
  align-self:center!important;
  justify-self:start!important;
  width:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  border-top:5px solid transparent!important;
  border-bottom:5px solid transparent!important;
  border-left:7px solid var(--yf-brand-orange,#ff6a00)!important;
  border-right:0!important;
  transform:translateY(-1px)!important;
}

html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child{
  grid-template-areas:"arrow label"!important;
  justify-content:end!important;
  direction:ltr!important;
}

html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child>span,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child>span{
  direction:rtl!important;
  text-align:right!important;
}

html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child::after,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child::after{
  border-left:0!important;
  border-right:7px solid var(--yf-brand-orange,#ff6a00)!important;
}

/* QT-213: Contact message header controls stay at the physical edges.
   ZH/EN: back left, close right. AR: close left, back right. */
html body .yf-sheet.sheet-contact.yf-msg-form-open .yf-sheet-head{
  position:relative!important;
  display:block!important;
  direction:ltr!important;
  width:100%!important;
  min-height:44px!important;
  height:44px!important;
  padding:0 58px!important;
  box-sizing:border-box!important;
}

html body .yf-sheet.sheet-contact.yf-msg-form-open .yf-sheet-head>span{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:50%!important;
  width:calc(100% - 116px)!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  transform:translate(-50%,-50%)!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  z-index:1!important;
}

html body .yf-sheet.sheet-contact.yf-msg-form-open .yf-sheet-head>.yf-sheet-back{
  position:absolute!important;
  left:10px!important;
  right:auto!important;
  top:50%!important;
  margin:0!important;
  transform:translateY(-50%)!important;
  z-index:3!important;
}

html body .yf-sheet.sheet-contact.yf-msg-form-open .yf-sheet-head>.yf-sheet-close{
  position:absolute!important;
  right:8px!important;
  left:auto!important;
  top:50%!important;
  margin:0!important;
  transform:translateY(-50%)!important;
  z-index:3!important;
}

html.yf-lang-ar body .yf-sheet.sheet-contact.yf-msg-form-open .yf-sheet-head>.yf-sheet-close,
body.yf-lang-ar .yf-sheet.sheet-contact.yf-msg-form-open .yf-sheet-head>.yf-sheet-close,
html body .yf-sheet.sheet-contact.yf-msg-form-open[data-yf-sheet-lang="AR"] .yf-sheet-head>.yf-sheet-close{
  left:8px!important;
  right:auto!important;
}

html.yf-lang-ar body .yf-sheet.sheet-contact.yf-msg-form-open .yf-sheet-head>.yf-sheet-back,
body.yf-lang-ar .yf-sheet.sheet-contact.yf-msg-form-open .yf-sheet-head>.yf-sheet-back,
html body .yf-sheet.sheet-contact.yf-msg-form-open[data-yf-sheet-lang="AR"] .yf-sheet-head>.yf-sheet-back{
  right:10px!important;
  left:auto!important;
}

/* Arabic back arrow points right/outward. */
html.yf-lang-ar body .yf-sheet.sheet-contact.yf-msg-form-open .yf-sheet-head>.yf-sheet-back::before,
body.yf-lang-ar .yf-sheet.sheet-contact.yf-msg-form-open .yf-sheet-head>.yf-sheet-back::before,
html body .yf-sheet.sheet-contact.yf-msg-form-open[data-yf-sheet-lang="AR"] .yf-sheet-head>.yf-sheet-back::before{
  right:4px!important;
  left:auto!important;
  border-left:8px solid #fff!important;
  border-right:0!important;
}

html.yf-lang-ar body .yf-sheet.sheet-contact.yf-msg-form-open .yf-sheet-head>.yf-sheet-back::after,
body.yf-lang-ar .yf-sheet.sheet-contact.yf-msg-form-open .yf-sheet-head>.yf-sheet-back::after,
html body .yf-sheet.sheet-contact.yf-msg-form-open[data-yf-sheet-lang="AR"] .yf-sheet-head>.yf-sheet-back::after{
  right:11px!important;
  left:auto!important;
}


/* QT-214: category triangles share one final geometry on home and detail.
   - The JS-measured label width locks all triangles in a column to one X line.
   - The triangle is optically raised to align with the visible text center. */
html body .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child{
  display:inline-grid!important;
  grid-template-columns:var(--yf-cat-label-width,max-content) 7px!important;
  grid-template-areas:"label arrow"!important;
  align-items:center!important;
  justify-content:start!important;
  column-gap:7px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  direction:ltr!important;
}

html body .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child>span{
  grid-area:label!important;
  display:inline-block!important;
  width:var(--yf-cat-label-width,auto)!important;
  min-width:var(--yf-cat-label-width,0)!important;
  max-width:var(--yf-cat-label-width,100%)!important;
  margin:0!important;
  padding:0!important;
  direction:ltr!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

html body .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child::after{
  grid-area:arrow!important;
  content:""!important;
  display:block!important;
  position:static!important;
  align-self:center!important;
  justify-self:center!important;
  width:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  border-top:5px solid transparent!important;
  border-bottom:5px solid transparent!important;
  border-left:7px solid var(--yf-brand-orange,#ff6a00)!important;
  border-right:0!important;
  font-size:0!important;
  line-height:0!important;
  /* The old glyph sat visibly below the label. This optical correction is
     shared by both pages and all languages. */
  transform:translateY(-4px)!important;
}

/* Arabic is the exact mirror: arrow on the left, Arabic label on the right. */
html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child{
  grid-template-columns:7px var(--yf-cat-label-width,max-content)!important;
  grid-template-areas:"arrow label"!important;
  justify-content:end!important;
  direction:ltr!important;
}

html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child>span,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child>span{
  direction:rtl!important;
  text-align:right!important;
}

html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child::after,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child::after{
  border-left:0!important;
  border-right:7px solid var(--yf-brand-orange,#ff6a00)!important;
}


/* QT-215: one exact close-button geometry for every QT frontend popup.
   Reference: the round minus/remove control in the Contact Us interest list.
   Circle diameter = 28px rendered size.
   Each X stroke = 12px, about 25% longer than the 9px minus stroke. */
:root{
  --yf-global-popup-close-diameter:28px;
  --yf-global-popup-close-stroke-length:12px;
  --yf-global-popup-close-stroke-thickness:1.8px;
}

/* All popup close controls on both home and detail pages. */
html body .yf-sheet .yf-sheet-close,
html body .yf-product-msg-head .yf-product-msg-close,
html body .yf-service-ui-head [data-yf-service-close],
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close],
html body .yf-interest-preview-box .yf-interest-preview-close,
html body .yf-supplier-product-detail-close,
html body .yf-detail-video-close,
html body .yf-detail-video-error-close,
html body .yf-supplier-photo-stage .yf-supplier-photo-close,
html body #yfLightbox .yf-lightbox-close,
html body .yf-about-dismiss-head>button,
html body .yf-home-about .yf-about-close,
html body .yf-container-calc-close,
html body .yf-verification-notice-close{
  width:var(--yf-global-popup-close-diameter)!important;
  height:var(--yf-global-popup-close-diameter)!important;
  min-width:var(--yf-global-popup-close-diameter)!important;
  min-height:var(--yf-global-popup-close-diameter)!important;
  max-width:var(--yf-global-popup-close-diameter)!important;
  max-height:var(--yf-global-popup-close-diameter)!important;
  flex:0 0 var(--yf-global-popup-close-diameter)!important;
  padding:0!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
  font-size:0!important;
  line-height:0!important;
  text-indent:-9999px!important;
  overflow:hidden!important;
}

/* Remove historical scale() from controls whose positioning does not require translation. */
html body .yf-product-msg-head .yf-product-msg-close,
html body .yf-service-ui-head [data-yf-service-close],
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close],
html body .yf-interest-preview-box .yf-interest-preview-close,
html body .yf-supplier-product-detail-close,
html body .yf-detail-video-close,
html body .yf-detail-video-error-close,
html body .yf-supplier-photo-stage .yf-supplier-photo-close,
html body #yfLightbox .yf-lightbox-close,
html body .yf-home-about .yf-about-close,
html body .yf-container-calc-close,
html body .yf-verification-notice-close{
  transform:none!important;
}

/* Ordinary sheet close controls sit naturally in their header. */
html body .yf-sheet .yf-sheet-close{
  transform:none!important;
}

/* Contact-message close remains vertically centered at the outer edge. */
html body .yf-sheet.sheet-contact.yf-msg-form-open .yf-sheet-head>.yf-sheet-close{
  transform:translateY(-50%)!important;
}

/* The permanent-close confirmation also uses top:50%; preserve that centering. */
html body .yf-about-dismiss-head>button{
  transform:translateY(-50%)!important;
}

/* Rebuild every X from two equal centered strokes. */
html body .yf-sheet .yf-sheet-close::before,
html body .yf-sheet .yf-sheet-close::after,
html body .yf-product-msg-head .yf-product-msg-close::before,
html body .yf-product-msg-head .yf-product-msg-close::after,
html body .yf-service-ui-head [data-yf-service-close]::before,
html body .yf-service-ui-head [data-yf-service-close]::after,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]::before,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]::after,
html body .yf-interest-preview-box .yf-interest-preview-close::before,
html body .yf-interest-preview-box .yf-interest-preview-close::after,
html body .yf-supplier-product-detail-close::before,
html body .yf-supplier-product-detail-close::after,
html body .yf-detail-video-close::before,
html body .yf-detail-video-close::after,
html body .yf-detail-video-error-close::before,
html body .yf-detail-video-error-close::after,
html body .yf-supplier-photo-stage .yf-supplier-photo-close::before,
html body .yf-supplier-photo-stage .yf-supplier-photo-close::after,
html body #yfLightbox .yf-lightbox-close::before,
html body #yfLightbox .yf-lightbox-close::after,
html body .yf-about-dismiss-head>button::before,
html body .yf-about-dismiss-head>button::after,
html body .yf-home-about .yf-about-close::before,
html body .yf-home-about .yf-about-close::after,
html body .yf-container-calc-close::before,
html body .yf-container-calc-close::after,
html body .yf-verification-notice-close::before,
html body .yf-verification-notice-close::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:var(--yf-global-popup-close-stroke-length)!important;
  height:var(--yf-global-popup-close-stroke-thickness)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:#111827!important;
  transform-origin:center center!important;
  pointer-events:none!important;
}

/* Dark lightbox keeps its existing white X. */
html body #yfLightbox .yf-lightbox-close::before,
html body #yfLightbox .yf-lightbox-close::after{
  background:#fff!important;
}

html body .yf-sheet .yf-sheet-close::before,
html body .yf-product-msg-head .yf-product-msg-close::before,
html body .yf-service-ui-head [data-yf-service-close]::before,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]::before,
html body .yf-interest-preview-box .yf-interest-preview-close::before,
html body .yf-supplier-product-detail-close::before,
html body .yf-detail-video-close::before,
html body .yf-detail-video-error-close::before,
html body .yf-supplier-photo-stage .yf-supplier-photo-close::before,
html body #yfLightbox .yf-lightbox-close::before,
html body .yf-about-dismiss-head>button::before,
html body .yf-home-about .yf-about-close::before,
html body .yf-container-calc-close::before,
html body .yf-verification-notice-close::before{
  transform:translate(-50%,-50%) rotate(45deg)!important;
}

html body .yf-sheet .yf-sheet-close::after,
html body .yf-product-msg-head .yf-product-msg-close::after,
html body .yf-service-ui-head [data-yf-service-close]::after,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]::after,
html body .yf-interest-preview-box .yf-interest-preview-close::after,
html body .yf-supplier-product-detail-close::after,
html body .yf-detail-video-close::after,
html body .yf-detail-video-error-close::after,
html body .yf-supplier-photo-stage .yf-supplier-photo-close::after,
html body #yfLightbox .yf-lightbox-close::after,
html body .yf-about-dismiss-head>button::after,
html body .yf-home-about .yf-about-close::after,
html body .yf-container-calc-close::after,
html body .yf-verification-notice-close::after{
  transform:translate(-50%,-50%) rotate(-45deg)!important;
}


/* QT-216: detail-page Product Message and View Supplier dialogs.
   Their four outer corners now match the rounded Contact Us / Message dialog.
   The Product Message close control is vertically centered in the orange header. */
:root{
  --yf-detail-reference-dialog-radius:18px;
}

/* 商品留言 + 查看供应商：四个外角统一放大。 */
html body .yf-product-msg-box,
html body .yf-factory-v2-mask .yf-factory-v2-box{
  border-radius:var(--yf-detail-reference-dialog-radius)!important;
  overflow:hidden!important;
}

/* 橘色标题栏的上方两个角与外壳完全一致。 */
html body .yf-product-msg-head,
html body .yf-factory-v2-mask .yf-fc-head{
  border-radius:var(--yf-detail-reference-dialog-radius)
                var(--yf-detail-reference-dialog-radius) 0 0!important;
}

/* 商品留言标题栏：标题保持正中，关闭按钮严格垂直居中。 */
html body .yf-product-msg-head{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:44px!important;
  height:44px!important;
  padding:0 48px!important;
  box-sizing:border-box!important;
}

html body .yf-product-msg-head>span{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  line-height:1.2!important;
}

html body .yf-product-msg-head .yf-product-msg-close{
  position:absolute!important;
  right:8px!important;
  left:auto!important;
  top:50%!important;
  margin:0!important;
  transform:translateY(-50%)!important;
}

/* 阿拉伯文保持物理镜像：关闭按钮在左边，仍严格垂直居中。 */
html.yf-lang-ar body .yf-product-msg-head .yf-product-msg-close,
body.yf-lang-ar .yf-product-msg-head .yf-product-msg-close{
  left:8px!important;
  right:auto!important;
}

/* 小屏同样保持完整的 18px 四角，不再退回较小的下角。 */
@media (max-width:767px){
  html body .yf-product-msg-box,
  html body .yf-factory-v2-mask .yf-factory-v2-box{
    border-radius:var(--yf-detail-reference-dialog-radius)!important;
  }
}


/* QT-217: Arabic global close-position audit.
   When the site language is Arabic, every QT frontend popup close control is
   physically placed on the left. Chinese/English positions are unchanged. */

/* Header shells must provide one stable positioning context. */
html.yf-lang-ar body .yf-sheet .yf-sheet-head,
body.yf-lang-ar .yf-sheet .yf-sheet-head,
html.yf-lang-ar body .yf-product-msg-head,
body.yf-lang-ar .yf-product-msg-head,
html.yf-lang-ar body .yf-service-ui-head,
body.yf-lang-ar .yf-service-ui-head,
html.yf-lang-ar body .yf-factory-v2-mask .yf-fc-head,
body.yf-lang-ar .yf-factory-v2-mask .yf-fc-head,
html.yf-lang-ar body .yf-supplier-product-detail-head,
body.yf-lang-ar .yf-supplier-product-detail-head,
html.yf-lang-ar body .yf-about-dismiss-head,
body.yf-lang-ar .yf-about-dismiss-head,
html.yf-lang-ar body .yf-container-calc-head,
body.yf-lang-ar .yf-container-calc-head{
  position:relative!important;
}

/* All header-mounted close controls: left edge + vertical center. */
html.yf-lang-ar body .yf-sheet .yf-sheet-head>.yf-sheet-close,
body.yf-lang-ar .yf-sheet .yf-sheet-head>.yf-sheet-close,
html body .yf-sheet[data-yf-sheet-lang="AR"] .yf-sheet-head>.yf-sheet-close,
html.yf-lang-ar body .yf-product-msg-head>.yf-product-msg-close,
body.yf-lang-ar .yf-product-msg-head>.yf-product-msg-close,
html.yf-lang-ar body .yf-service-ui-head>[data-yf-service-close],
body.yf-lang-ar .yf-service-ui-head>[data-yf-service-close],
html.yf-lang-ar body .yf-factory-v2-mask .yf-fc-head>[data-fc-close],
body.yf-lang-ar .yf-factory-v2-mask .yf-fc-head>[data-fc-close],
html.yf-lang-ar body .yf-supplier-product-detail-head>.yf-supplier-product-detail-close,
body.yf-lang-ar .yf-supplier-product-detail-head>.yf-supplier-product-detail-close,
html.yf-lang-ar body .yf-about-dismiss-head>button,
body.yf-lang-ar .yf-about-dismiss-head>button,
html body .yf-about-dismiss-dialog[dir="rtl"] .yf-about-dismiss-head>button,
html.yf-lang-ar body .yf-container-calc-head>.yf-container-calc-close,
body.yf-lang-ar .yf-container-calc-head>.yf-container-calc-close{
  position:absolute!important;
  left:8px!important;
  right:auto!important;
  top:50%!important;
  margin:0!important;
  transform:translateY(-50%)!important;
  z-index:5!important;
}

/* Standalone overlay close controls: preserve their vertical placement,
   but mirror the physical side to the left. */
html.yf-lang-ar body .yf-interest-preview-box>.yf-interest-preview-close,
body.yf-lang-ar .yf-interest-preview-box>.yf-interest-preview-close{
  left:8px!important;
  right:auto!important;
}

html.yf-lang-ar body .yf-home-about .yf-about-close,
body.yf-lang-ar .yf-home-about .yf-about-close{
  left:9px!important;
  right:auto!important;
}

html.yf-lang-ar body .yf-verification-notice-box>.yf-verification-notice-close,
body.yf-lang-ar .yf-verification-notice-box>.yf-verification-notice-close{
  left:10px!important;
  right:auto!important;
}

html.yf-lang-ar body .yf-supplier-photo-stage>.yf-supplier-photo-close,
body.yf-lang-ar .yf-supplier-photo-stage>.yf-supplier-photo-close{
  left:10px!important;
  right:auto!important;
}

html.yf-lang-ar body .yf-detail-video-close,
body.yf-lang-ar .yf-detail-video-close,
html.yf-lang-ar body .yf-detail-video-error-close,
body.yf-lang-ar .yf-detail-video-error-close{
  left:12px!important;
  right:auto!important;
}

html.yf-lang-ar body #yfLightbox .yf-lightbox-close,
body.yf-lang-ar #yfLightbox .yf-lightbox-close{
  left:clamp(26px,3vw,44px)!important;
  right:auto!important;
}

/* Mobile supplier-photo offset mirrors the original 8px right offset. */
@media(max-width:640px){
  html.yf-lang-ar body .yf-supplier-photo-stage>.yf-supplier-photo-close,
  body.yf-lang-ar .yf-supplier-photo-stage>.yf-supplier-photo-close{
    left:8px!important;
    right:auto!important;
  }
}


/* QT-218: complete first-level + nested-popup close audit.
   All QT frontend popup close controls use one 28px circle and one 12px X.
   Arabic always places the close control on the physical left. */
:root{
  --yf-global-popup-close-diameter:28px;
  --yf-global-popup-close-stroke-length:12px;
  --yf-global-popup-close-stroke-thickness:1.8px;
}

/* Exact inventory:
   - shared sheets (Contact, Message, About, Interests, login/account flows)
   - account/service secondary dialogs
   - supplier/factory first and nested dialogs
   - product message
   - permanent-close confirmation
   - verification prompts
   - container calculator
   - supplier product preview / photo preview
   - video dialogs
   - image lightbox */
html body .yf-sheet .yf-sheet-close,
html body .yf-service-ui-head [data-yf-service-close],
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close],
html body .yf-product-msg-head .yf-product-msg-close,
html body .yf-interest-preview-box .yf-interest-preview-close,
html body .yf-verification-notice-box .yf-verification-notice-close,
html body .yf-home-about .yf-about-close,
html body .yf-about-dismiss-head>button,
html body .yf-container-calc-head .yf-container-calc-close,
html body .yf-supplier-product-detail-head .yf-supplier-product-detail-close,
html body .yf-supplier-photo-stage .yf-supplier-photo-close,
html body .yf-detail-video-close,
html body .yf-detail-video-error-close,
html body #yfLightbox .yf-lightbox-close{
  position:relative;
  width:var(--yf-global-popup-close-diameter)!important;
  height:var(--yf-global-popup-close-diameter)!important;
  min-width:var(--yf-global-popup-close-diameter)!important;
  min-height:var(--yf-global-popup-close-diameter)!important;
  max-width:var(--yf-global-popup-close-diameter)!important;
  max-height:var(--yf-global-popup-close-diameter)!important;
  flex:0 0 var(--yf-global-popup-close-diameter)!important;
  padding:0!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
  font-size:0!important;
  line-height:0!important;
  text-indent:-9999px!important;
  overflow:hidden!important;
}

/* Build the same X on every first- and second-level popup. */
html body .yf-sheet .yf-sheet-close::before,
html body .yf-sheet .yf-sheet-close::after,
html body .yf-service-ui-head [data-yf-service-close]::before,
html body .yf-service-ui-head [data-yf-service-close]::after,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]::before,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]::after,
html body .yf-product-msg-head .yf-product-msg-close::before,
html body .yf-product-msg-head .yf-product-msg-close::after,
html body .yf-interest-preview-box .yf-interest-preview-close::before,
html body .yf-interest-preview-box .yf-interest-preview-close::after,
html body .yf-verification-notice-box .yf-verification-notice-close::before,
html body .yf-verification-notice-box .yf-verification-notice-close::after,
html body .yf-home-about .yf-about-close::before,
html body .yf-home-about .yf-about-close::after,
html body .yf-about-dismiss-head>button::before,
html body .yf-about-dismiss-head>button::after,
html body .yf-container-calc-head .yf-container-calc-close::before,
html body .yf-container-calc-head .yf-container-calc-close::after,
html body .yf-supplier-product-detail-head .yf-supplier-product-detail-close::before,
html body .yf-supplier-product-detail-head .yf-supplier-product-detail-close::after,
html body .yf-supplier-photo-stage .yf-supplier-photo-close::before,
html body .yf-supplier-photo-stage .yf-supplier-photo-close::after,
html body .yf-detail-video-close::before,
html body .yf-detail-video-close::after,
html body .yf-detail-video-error-close::before,
html body .yf-detail-video-error-close::after,
html body #yfLightbox .yf-lightbox-close::before,
html body #yfLightbox .yf-lightbox-close::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:var(--yf-global-popup-close-stroke-length)!important;
  height:var(--yf-global-popup-close-stroke-thickness)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:#111827!important;
  transform-origin:center center!important;
  pointer-events:none!important;
}

/* Dark viewer keeps a white X. */
html body #yfLightbox .yf-lightbox-close::before,
html body #yfLightbox .yf-lightbox-close::after{
  background:#fff!important;
}

html body .yf-sheet .yf-sheet-close::before,
html body .yf-service-ui-head [data-yf-service-close]::before,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]::before,
html body .yf-product-msg-head .yf-product-msg-close::before,
html body .yf-interest-preview-box .yf-interest-preview-close::before,
html body .yf-verification-notice-box .yf-verification-notice-close::before,
html body .yf-home-about .yf-about-close::before,
html body .yf-about-dismiss-head>button::before,
html body .yf-container-calc-head .yf-container-calc-close::before,
html body .yf-supplier-product-detail-head .yf-supplier-product-detail-close::before,
html body .yf-supplier-photo-stage .yf-supplier-photo-close::before,
html body .yf-detail-video-close::before,
html body .yf-detail-video-error-close::before,
html body #yfLightbox .yf-lightbox-close::before{
  transform:translate(-50%,-50%) rotate(45deg)!important;
}

html body .yf-sheet .yf-sheet-close::after,
html body .yf-service-ui-head [data-yf-service-close]::after,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]::after,
html body .yf-product-msg-head .yf-product-msg-close::after,
html body .yf-interest-preview-box .yf-interest-preview-close::after,
html body .yf-verification-notice-box .yf-verification-notice-close::after,
html body .yf-home-about .yf-about-close::after,
html body .yf-about-dismiss-head>button::after,
html body .yf-container-calc-head .yf-container-calc-close::after,
html body .yf-supplier-product-detail-head .yf-supplier-product-detail-close::after,
html body .yf-supplier-photo-stage .yf-supplier-photo-close::after,
html body .yf-detail-video-close::after,
html body .yf-detail-video-error-close::after,
html body #yfLightbox .yf-lightbox-close::after{
  transform:translate(-50%,-50%) rotate(-45deg)!important;
}

/* Header-mounted close controls need one stable positioning context. */
html body .yf-sheet .yf-sheet-head,
html body .yf-service-ui-head,
html body .yf-factory-v2-mask .yf-fc-head,
html body .yf-product-msg-head,
html body .yf-about-dismiss-head,
html body .yf-container-calc-head,
html body .yf-supplier-product-detail-head{
  position:relative!important;
}

/* Arabic: every header close control, including nested login/account/supplier
   dialogs, is physically left and vertically centered. */
html.yf-lang-ar body .yf-sheet .yf-sheet-head>.yf-sheet-close,
body.yf-lang-ar .yf-sheet .yf-sheet-head>.yf-sheet-close,
html body .yf-sheet[data-yf-sheet-lang="AR"] .yf-sheet-head>.yf-sheet-close,
html body .yf-sheet[dir="rtl"] .yf-sheet-head>.yf-sheet-close,
html.yf-lang-ar body .yf-service-ui-head>[data-yf-service-close],
body.yf-lang-ar .yf-service-ui-head>[data-yf-service-close],
html body [dir="rtl"] .yf-service-ui-head>[data-yf-service-close],
html.yf-lang-ar body .yf-factory-v2-mask .yf-fc-head>[data-fc-close],
body.yf-lang-ar .yf-factory-v2-mask .yf-fc-head>[data-fc-close],
html body .yf-factory-v2-mask[dir="rtl"] .yf-fc-head>[data-fc-close],
html.yf-lang-ar body .yf-product-msg-head>.yf-product-msg-close,
body.yf-lang-ar .yf-product-msg-head>.yf-product-msg-close,
html body .yf-product-msg-box[dir="rtl"] .yf-product-msg-head>.yf-product-msg-close,
html.yf-lang-ar body .yf-about-dismiss-head>button,
body.yf-lang-ar .yf-about-dismiss-head>button,
html body .yf-about-dismiss-dialog[dir="rtl"] .yf-about-dismiss-head>button,
html.yf-lang-ar body .yf-container-calc-head>.yf-container-calc-close,
body.yf-lang-ar .yf-container-calc-head>.yf-container-calc-close,
html body .yf-container-calc-panel[dir="rtl"] .yf-container-calc-head>.yf-container-calc-close,
html.yf-lang-ar body .yf-supplier-product-detail-head>.yf-supplier-product-detail-close,
body.yf-lang-ar .yf-supplier-product-detail-head>.yf-supplier-product-detail-close,
html body .yf-supplier-product-detail[dir="rtl"] .yf-supplier-product-detail-head>.yf-supplier-product-detail-close{
  position:absolute!important;
  left:8px!important;
  right:auto!important;
  top:50%!important;
  margin:0!important;
  transform:translateY(-50%)!important;
  z-index:10!important;
}

/* Arabic standalone overlays: mirror only the side; keep their established Y. */
html.yf-lang-ar body .yf-interest-preview-box>.yf-interest-preview-close,
body.yf-lang-ar .yf-interest-preview-box>.yf-interest-preview-close,
html body .yf-interest-preview-box[dir="rtl"]>.yf-interest-preview-close{
  left:8px!important;
  right:auto!important;
}

html.yf-lang-ar body .yf-verification-notice-box>.yf-verification-notice-close,
body.yf-lang-ar .yf-verification-notice-box>.yf-verification-notice-close,
html body .yf-verification-notice-box[dir="rtl"]>.yf-verification-notice-close{
  left:10px!important;
  right:auto!important;
}

html.yf-lang-ar body .yf-home-about .yf-about-close,
body.yf-lang-ar .yf-home-about .yf-about-close,
html body .yf-home-about[dir="rtl"] .yf-about-close{
  left:9px!important;
  right:auto!important;
}

html.yf-lang-ar body .yf-supplier-photo-stage>.yf-supplier-photo-close,
body.yf-lang-ar .yf-supplier-photo-stage>.yf-supplier-photo-close,
html body .yf-supplier-photo-stage[dir="rtl"]>.yf-supplier-photo-close{
  left:10px!important;
  right:auto!important;
}

html.yf-lang-ar body .yf-detail-video-close,
body.yf-lang-ar .yf-detail-video-close,
html.yf-lang-ar body .yf-detail-video-error-close,
body.yf-lang-ar .yf-detail-video-error-close{
  left:12px!important;
  right:auto!important;
}

html.yf-lang-ar body #yfLightbox .yf-lightbox-close,
body.yf-lang-ar #yfLightbox .yf-lightbox-close,
html body #yfLightbox[dir="rtl"] .yf-lightbox-close{
  left:clamp(26px,3vw,44px)!important;
  right:auto!important;
}


/* QT-219: compact only the "View Supplier" login/request gate.
   Other supplier preview, payment and account dialogs keep their existing sizes. */
html body .yf-factory-v2-mask.gate .yf-factory-v2-box{
  width:min(340px,calc(100vw - 24px))!important;
  max-width:340px!important;
  min-width:0!important;
}

/* Reduce the unused horizontal space inside this gate. */
html body .yf-factory-v2-mask.gate .yf-fc-body{
  padding:14px 16px 16px!important;
}

html body .yf-factory-v2-mask.gate .yf-fc-gate-msg{
  max-width:280px!important;
  margin:0 auto!important;
  padding:18px 4px 14px!important;
  text-align:center!important;
}

/* The two bottom buttons no longer stretch across the whole dialog. */
html body .yf-factory-v2-mask.gate .yf-fc-gate-actions{
  width:min(250px,100%)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:10px!important;
}

html body .yf-factory-v2-mask.gate .yf-fc-gate-actions .yf-fc-primary,
html body .yf-factory-v2-mask.gate .yf-fc-gate-actions .yf-fc-outline{
  width:100%!important;
  min-width:0!important;
  height:40px!important;
  margin:0!important;
  padding:0 10px!important;
  box-sizing:border-box!important;
  border-radius:9px!important;
}

/* Arabic keeps the same compact dimensions and centered button group. */
html.yf-lang-ar body .yf-factory-v2-mask.gate .yf-fc-gate-msg,
body.yf-lang-ar .yf-factory-v2-mask.gate .yf-fc-gate-msg{
  direction:rtl!important;
  text-align:center!important;
}

@media(max-width:380px){
  html body .yf-factory-v2-mask.gate .yf-factory-v2-box{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
  }
}


/* QT-221: homepage About logo uses the real HOME coordinates and a 1.2x size.
   The backend preview uses the exact same 26.4% relative width. */
html body .yf-home-about>.yf-about-brand-logo{
  width:26.4%!important;
  max-width:26.4%!important;
  max-height:28%!important;
  height:auto!important;
  object-fit:contain!important;
}

/* Special Arabic exception requested for this homepage panel only:
   the logo occupies the left area, so its close button always remains top-right. */
html.yf-lang-ar body .yf-home-about .yf-about-close,
body.yf-lang-ar .yf-home-about .yf-about-close,
html body .yf-home-about[dir="rtl"] .yf-about-close{
  left:auto!important;
  right:9px!important;
}


/* QT-223: final category popup unification.
   Home and detail use the same public component geometry and left alignment. */
html body .yf-sheet.yf-cat-top-panel{
  right:auto!important;
  bottom:auto!important;
}

/* The orange category triangles are moved down exactly 3px from QT-214. */
html body .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child::after{
  transform:translateY(-4px)!important;
}


/* QT-224: every frontend drawer / category slide panel is square.
   Applies equally on homepage and detail page, including nested language /
   currency drawers opened from the multifunction menu. */
html body #yfDrawer.yf-drawer,
html body #yfDrawer.yf-main-nav-drawer,
html body #yfDrawer.yf-mobile-choice-drawer,
html body .yf-sheet.yf-cat-top-panel{
  border-radius:0!important;
}


/* QT-225: final homepage sourcing-panel corrections. */

/* Special exception: this one close button is ALWAYS top-right,
   including Arabic, because the website logo occupies the left side. */
html body .yf-home > #yfHomeAbout.yf-home-about .yf-about-close,
html.yf-lang-ar body .yf-home > #yfHomeAbout.yf-home-about .yf-about-close,
body.yf-lang-ar .yf-home > #yfHomeAbout.yf-home-about .yf-about-close,
html body .yf-home > #yfHomeAbout.yf-home-about[dir="rtl"] .yf-about-close{
  position:absolute!important;
  left:auto!important;
  right:9px!important;
  top:9px!important;
  transform:none!important;
}

/* One fixed logo size in both collapsed and expanded states.
   Original desktop cap was 58px; 70px is the requested 1.2x size. */
html body .yf-home > #yfHomeAbout.yf-home-about > .yf-about-brand-logo,
html body .yf-home > #yfHomeAbout.yf-home-about.is-collapsed > .yf-about-brand-logo,
html body .yf-home > #yfHomeAbout.yf-home-about.is-expanded > .yf-about-brand-logo{
  width:auto!important;
  height:auto!important;
  max-width:var(--yf-about-logo-max-width-desktop,26.4%)!important;
  max-height:var(--yf-about-logo-max-height-desktop,70px)!important;
  object-fit:contain!important;
}

/* Move the sourcing-team heading upward by 30px and let following content
   move with it, instead of leaving an empty gap. */
html body .yf-home > #yfHomeAbout.yf-home-about .yf-about-summary{
  margin-top:-30px!important;
  margin-bottom:0!important;
}

@media(max-width:767px){
  html body .yf-home > #yfHomeAbout.yf-home-about > .yf-about-brand-logo,
  html body .yf-home > #yfHomeAbout.yf-home-about.is-collapsed > .yf-about-brand-logo,
  html body .yf-home > #yfHomeAbout.yf-home-about.is-expanded > .yf-about-brand-logo{
    /* Use an actual width, not only a maximum cap. The logo therefore renders at the
       final mobile size on its first visible frame. Absolute left/top remain unchanged,
       so the first visible letter is the anchor and growth is right/down only. */
    width:var(--yf-about-logo-max-width-mobile,52.728%)!important;
    max-width:var(--yf-about-logo-max-width-mobile,52.728%)!important;
    max-height:var(--yf-about-logo-max-height-mobile,84.5px)!important;
  }
  html body .yf-home > #yfHomeAbout.yf-home-about .yf-about-summary{
    margin-top:-15px!important;
  }
}

/* QT-226: global popup-shell radius and corrected About spacing. */
:root{--yf-popup-shell-radius:8px!important;}

/* Undo the previous -30px shift. Everything except the absolute Logo and close
   control moves down 30px, restoring the collapsed title and lead. */
html body .yf-home > #yfHomeAbout.yf-home-about .yf-about-summary{
  margin-top:0!important;
  margin-bottom:0!important;
}
@media(max-width:767px){
  html body .yf-home > #yfHomeAbout.yf-home-about .yf-about-summary{
    margin-top:0!important;
  }
}

/* Every first-level and nested frontend popup shell follows the About Us 6px
   corner standard on both home and detail pages. */
html body #yfDrawer.yf-drawer,
html body #yfDrawer.yf-main-nav-drawer,
html body #yfDrawer.yf-mobile-choice-drawer,
html body .yf-sheet,
html body .yf-service-ui-box,
html body .yf-factory-v2-box,
html body .yf-product-msg-box,
html body .yf-interest-preview-box,
html body .yf-supplier-product-detail,
html body .yf-supplier-photo-stage,
html body .yf-about-dismiss-dialog,
html body .yf-verification-notice-box,
html body .yf-success-tip-box,
html body .yf-msg-success-box,
html body .yf-product-msg-alert-card{
  border-radius:8px!important;
  overflow:hidden!important;
}
html body .yf-sheet .yf-sheet-head,
html body .yf-product-msg-head,
html body .yf-service-ui-head,
html body .yf-factory-v2-mask .yf-fc-head,
html body .yf-supplier-product-detail-head,
html body .yf-about-dismiss-head{
  border-radius:8px 8px 0 0!important;
}


/* RELEASE-005: canonical close-button geometry for every first- and
   second-level frontend popup on both home and detail pages.

   Geometry:
   - standard desktop orange header: 42px; circle: 28px; edge gap: 7px
   - standard mobile orange header: 40px; circle: 28px; edge gap: 6px
   - 44px Product Message header: edge gap: 8px

   The circle centre is always exactly on the header's vertical centreline.
   The physical side gap equals the top/bottom gap. Arabic mirrors to the left.
*/
:root{
  --yf-popup-close-size:28px;
  --yf-popup-close-gap-desktop:7px;
  --yf-popup-close-gap-mobile:6px;
  --yf-popup-close-gap-44:8px;
}

/* Every orange popup header becomes one stable positioning plane. */
html body .yf-sheet .yf-sheet-head,
html body .yf-service-ui-head,
html body .yf-factory-v2-mask .yf-fc-head,
html body .yf-product-msg-head,
html body .yf-about-dismiss-head,
html body .yf-container-calc-head,
html body .yf-supplier-product-detail-head{
  position:relative!important;
}

/* Standard 42px orange headers: exact vertical centre + 7px right gap. */
html body .yf-sheet .yf-sheet-head>.yf-sheet-close,
html body .yf-service-ui-head>[data-yf-service-close],
html body .yf-factory-v2-mask .yf-fc-head>[data-fc-close],
html body .yf-about-dismiss-head>button,
html body .yf-container-calc-head>.yf-container-calc-close,
html body .yf-supplier-product-detail-head>.yf-supplier-product-detail-close{
  position:absolute!important;
  width:var(--yf-popup-close-size)!important;
  height:var(--yf-popup-close-size)!important;
  min-width:var(--yf-popup-close-size)!important;
  min-height:var(--yf-popup-close-size)!important;
  max-width:var(--yf-popup-close-size)!important;
  max-height:var(--yf-popup-close-size)!important;
  right:var(--yf-popup-close-gap-desktop)!important;
  left:auto!important;
  top:50%!important;
  bottom:auto!important;
  margin:0!important;
  transform:translateY(-50%)!important;
  align-self:auto!important;
  justify-self:auto!important;
  z-index:20!important;
}

/* Product Message owns a fixed 44px header, therefore its equal gap is 8px. */
html body .yf-product-msg-head>.yf-product-msg-close{
  position:absolute!important;
  width:var(--yf-popup-close-size)!important;
  height:var(--yf-popup-close-size)!important;
  min-width:var(--yf-popup-close-size)!important;
  min-height:var(--yf-popup-close-size)!important;
  max-width:var(--yf-popup-close-size)!important;
  max-height:var(--yf-popup-close-size)!important;
  right:var(--yf-popup-close-gap-44)!important;
  left:auto!important;
  top:50%!important;
  bottom:auto!important;
  margin:0!important;
  transform:translateY(-50%)!important;
  align-self:auto!important;
  justify-self:auto!important;
  z-index:20!important;
}

/* Arabic: the same measured gap is mirrored to the physical left. */
html.yf-lang-ar body .yf-sheet .yf-sheet-head>.yf-sheet-close,
body.yf-lang-ar .yf-sheet .yf-sheet-head>.yf-sheet-close,
html body .yf-sheet[data-yf-sheet-lang="AR"] .yf-sheet-head>.yf-sheet-close,
html body .yf-sheet[dir="rtl"] .yf-sheet-head>.yf-sheet-close,
html.yf-lang-ar body .yf-service-ui-head>[data-yf-service-close],
body.yf-lang-ar .yf-service-ui-head>[data-yf-service-close],
html body [dir="rtl"] .yf-service-ui-head>[data-yf-service-close],
html.yf-lang-ar body .yf-factory-v2-mask .yf-fc-head>[data-fc-close],
body.yf-lang-ar .yf-factory-v2-mask .yf-fc-head>[data-fc-close],
html body .yf-factory-v2-mask[dir="rtl"] .yf-fc-head>[data-fc-close],
html.yf-lang-ar body .yf-about-dismiss-head>button,
body.yf-lang-ar .yf-about-dismiss-head>button,
html body .yf-about-dismiss-dialog[dir="rtl"] .yf-about-dismiss-head>button,
html.yf-lang-ar body .yf-container-calc-head>.yf-container-calc-close,
body.yf-lang-ar .yf-container-calc-head>.yf-container-calc-close,
html body .yf-container-calc-panel[dir="rtl"] .yf-container-calc-head>.yf-container-calc-close,
html.yf-lang-ar body .yf-supplier-product-detail-head>.yf-supplier-product-detail-close,
body.yf-lang-ar .yf-supplier-product-detail-head>.yf-supplier-product-detail-close,
html body .yf-supplier-product-detail[dir="rtl"] .yf-supplier-product-detail-head>.yf-supplier-product-detail-close{
  left:var(--yf-popup-close-gap-desktop)!important;
  right:auto!important;
  top:50%!important;
  transform:translateY(-50%)!important;
}

html.yf-lang-ar body .yf-product-msg-head>.yf-product-msg-close,
body.yf-lang-ar .yf-product-msg-head>.yf-product-msg-close,
html body .yf-product-msg-box[dir="rtl"] .yf-product-msg-head>.yf-product-msg-close{
  left:var(--yf-popup-close-gap-44)!important;
  right:auto!important;
  top:50%!important;
  transform:translateY(-50%)!important;
}

/* The homepage sourcing panel is the deliberate exception requested earlier:
   its logo occupies the left side, so the close remains top-right in every
   language. It uses an 8px equal outer gap around the 28px circle. */
html body .yf-home>#yfHomeAbout.yf-home-about .yf-about-close,
html.yf-lang-ar body .yf-home>#yfHomeAbout.yf-home-about .yf-about-close,
body.yf-lang-ar .yf-home>#yfHomeAbout.yf-home-about .yf-about-close,
html body .yf-home>#yfHomeAbout.yf-home-about[dir="rtl"] .yf-about-close{
  position:absolute!important;
  width:var(--yf-popup-close-size)!important;
  height:var(--yf-popup-close-size)!important;
  min-width:var(--yf-popup-close-size)!important;
  min-height:var(--yf-popup-close-size)!important;
  max-width:var(--yf-popup-close-size)!important;
  max-height:var(--yf-popup-close-size)!important;
  left:auto!important;
  right:8px!important;
  top:8px!important;
  bottom:auto!important;
  margin:0!important;
  transform:none!important;
  z-index:20!important;
}

/* Standalone preview/notice shells use the same 8px physical edge standard. */
html body .yf-interest-preview-box>.yf-interest-preview-close,
html body .yf-verification-notice-box>.yf-verification-notice-close{
  position:absolute!important;
  right:8px!important;
  left:auto!important;
  top:8px!important;
  margin:0!important;
  transform:none!important;
}
html.yf-lang-ar body .yf-interest-preview-box>.yf-interest-preview-close,
body.yf-lang-ar .yf-interest-preview-box>.yf-interest-preview-close,
html body .yf-interest-preview-box[dir="rtl"]>.yf-interest-preview-close,
html.yf-lang-ar body .yf-verification-notice-box>.yf-verification-notice-close,
body.yf-lang-ar .yf-verification-notice-box>.yf-verification-notice-close,
html body .yf-verification-notice-box[dir="rtl"]>.yf-verification-notice-close{
  left:8px!important;
  right:auto!important;
}

/* Mobile standard headers are 40px high: (40 - 28) / 2 = 6px. */
@media(max-width:767px){
  html body .yf-sheet .yf-sheet-head>.yf-sheet-close,
  html body .yf-service-ui-head>[data-yf-service-close],
  html body .yf-factory-v2-mask .yf-fc-head>[data-fc-close],
  html body .yf-about-dismiss-head>button,
  html body .yf-container-calc-head>.yf-container-calc-close,
  html body .yf-supplier-product-detail-head>.yf-supplier-product-detail-close{
    right:var(--yf-popup-close-gap-mobile)!important;
  }

  html.yf-lang-ar body .yf-sheet .yf-sheet-head>.yf-sheet-close,
  body.yf-lang-ar .yf-sheet .yf-sheet-head>.yf-sheet-close,
  html body .yf-sheet[data-yf-sheet-lang="AR"] .yf-sheet-head>.yf-sheet-close,
  html body .yf-sheet[dir="rtl"] .yf-sheet-head>.yf-sheet-close,
  html.yf-lang-ar body .yf-service-ui-head>[data-yf-service-close],
  body.yf-lang-ar .yf-service-ui-head>[data-yf-service-close],
  html body [dir="rtl"] .yf-service-ui-head>[data-yf-service-close],
  html.yf-lang-ar body .yf-factory-v2-mask .yf-fc-head>[data-fc-close],
  body.yf-lang-ar .yf-factory-v2-mask .yf-fc-head>[data-fc-close],
  html body .yf-factory-v2-mask[dir="rtl"] .yf-fc-head>[data-fc-close],
  html.yf-lang-ar body .yf-about-dismiss-head>button,
  body.yf-lang-ar .yf-about-dismiss-head>button,
  html body .yf-about-dismiss-dialog[dir="rtl"] .yf-about-dismiss-head>button,
  html.yf-lang-ar body .yf-container-calc-head>.yf-container-calc-close,
  body.yf-lang-ar .yf-container-calc-head>.yf-container-calc-close,
  html body .yf-container-calc-panel[dir="rtl"] .yf-container-calc-head>.yf-container-calc-close,
  html.yf-lang-ar body .yf-supplier-product-detail-head>.yf-supplier-product-detail-close,
  body.yf-lang-ar .yf-supplier-product-detail-head>.yf-supplier-product-detail-close,
  html body .yf-supplier-product-detail[dir="rtl"] .yf-supplier-product-detail-head>.yf-supplier-product-detail-close{
    left:var(--yf-popup-close-gap-mobile)!important;
    right:auto!important;
  }

  /* Product Message remains 44px on mobile, so its 8px gap remains unchanged. */
  html body .yf-product-msg-head>.yf-product-msg-close{
    right:var(--yf-popup-close-gap-44)!important;
  }
  html.yf-lang-ar body .yf-product-msg-head>.yf-product-msg-close,
  body.yf-lang-ar .yf-product-msg-head>.yf-product-msg-close,
  html body .yf-product-msg-box[dir="rtl"] .yf-product-msg-head>.yf-product-msg-close{
    left:var(--yf-popup-close-gap-44)!important;
    right:auto!important;
  }
}


/* QT-010 / RELEASE-031: keep the uploaded Logo invisible until its trimmed image,
   backend percentage scale and final edge-position have all been applied. */
html body .yf-about-brand-logo[data-yf-logo-preparing="1"]{
  visibility:hidden!important;
}

/* RELEASE-030: frontend scrollbar visibility policy
   Desktop keeps only the browser/page scrollbar.
   Nested frontend containers remain scrollable but show no extra scrollbar.
   Mobile also hides the page scrollbar while preserving touch scrolling. */
html body *{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  scrollbar-color:transparent transparent!important;
  scrollbar-gutter:auto!important;
}
html body *::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
  background:transparent!important;
}
html body *::-webkit-scrollbar-track,
html body *::-webkit-scrollbar-thumb,
html body *::-webkit-scrollbar-corner{
  background:transparent!important;
  border:0!important;
}
@media (max-width:767px){
  html,
  body,
  .wp-site-blocks,
  .entry-content,
  .wp-block-post-content,
  main,
  .yf-home,
  .yf-detail-page{
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    scrollbar-color:transparent transparent!important;
    scrollbar-gutter:auto!important;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  .wp-site-blocks::-webkit-scrollbar,
  .entry-content::-webkit-scrollbar,
  .wp-block-post-content::-webkit-scrollbar,
  main::-webkit-scrollbar,
  .yf-home::-webkit-scrollbar,
  .yf-detail-page::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
    background:transparent!important;
  }
}


/* RELEASE-032: unify every frontend popup outer shell to a 14px corner radius.
   This is a final cascade lock for both home and detail pages. Only popup shells
   and their orange header top corners are changed; inner cards, inputs, buttons,
   circular close controls and page layout geometry remain untouched. */
:root{
  --yf-popup-shell-radius:14px!important;
  --yf-detail-reference-dialog-radius:14px!important;
}

html body .yf-sheet,
html body .yf-service-ui-box,
html body .yf-service-ui-box.wide,
html body .yf-factory-v2-box,
html body .yf-product-msg-box,
html body .yf-interest-preview-box,
html body .yf-supplier-product-detail,
html body .yf-supplier-photo-stage,
html body .yf-container-calc-panel,
html body .yf-about-dismiss-dialog,
html body .yf-verification-notice-box,
html body .yf-success-tip-box,
html body .yf-msg-success-box,
html body .yf-product-msg-alert-card{
  border-radius:14px!important;
}

html body .yf-sheet .yf-sheet-head,
html body .yf-product-msg-head,
html body .yf-service-ui-head,
html body .yf-factory-v2-mask .yf-fc-head,
html body .yf-supplier-product-detail-head,
html body .yf-container-calc-head,
html body .yf-about-dismiss-head{
  border-radius:14px 14px 0 0!important;
}

/* RELEASE-033: remove white wedges from every 14px popup top corner.
   The outer popup shell is the only element that owns the 14px curve. It clips
   its children to that curve, while the orange header remains square and fills
   the clipped top edge. This avoids a second rounded header exposing the white
   shell background at the two top corners, especially in mobile Safari. */
html body .yf-sheet,
html body .yf-service-ui-box,
html body .yf-service-ui-box.wide,
html body .yf-factory-v2-box,
html body .yf-product-msg-box,
html body .yf-interest-preview-box,
html body .yf-supplier-product-detail,
html body .yf-supplier-photo-stage,
html body .yf-container-calc-panel,
html body .yf-about-dismiss-dialog,
html body .yf-verification-notice-box,
html body .yf-success-tip-box,
html body .yf-msg-success-box,
html body .yf-product-msg-alert-card{
  border-radius:14px!important;
  overflow:hidden!important;
  background-clip:padding-box!important;
}

html body .yf-sheet .yf-sheet-head,
html body .yf-product-msg-head,
html body .yf-service-ui-head,
html body .yf-factory-v2-mask .yf-fc-head,
html body .yf-supplier-product-detail-head,
html body .yf-container-calc-head,
html body .yf-about-dismiss-head{
  border-radius:0!important;
  margin-top:0!important;
  background-clip:border-box!important;
}



/* RELEASE-053: About Us popup logo and contact action cleanup.
   The logo sizing is owned by yf-common-about.js; this rule keeps its prepared
   element unclipped. The action wrapper is transparent on desktop and mobile,
   so only the bordered Contact Us button remains visible. */
html body .yf-sheet.sheet-about .yf-about-sheet-scroll{
  overflow-x:hidden!important;
}
html body .yf-sheet.sheet-about .yf-about-brand-logo{
  transform-origin:top left!important;
}
html body .yf-sheet.sheet-about .yf-about-sheet-actions{
  background:transparent!important;
  border-top:0!important;
  box-shadow:none!important;
}


/* RELEASE-056: exact 14px shell lock for the three reported dialogs.
   Applies identically on desktop and mobile and overrides legacy asymmetric
   mobile corner values. The shell alone owns the curve; headers stay square
   and are clipped by the shell, preventing white corner wedges. */
html body .yf-product-msg-box,
html body .yf-supplier-product-detail,
html body .yf-container-calc-panel{
  border-radius:14px!important;
  -webkit-border-radius:14px!important;
  overflow:hidden!important;
  background-clip:padding-box!important;
}
html body .yf-product-msg-box>.yf-product-msg-head,
html body .yf-supplier-product-detail>.yf-supplier-product-detail-head,
html body .yf-container-calc-panel>.yf-container-calc-head{
  border-radius:0!important;
  -webkit-border-radius:0!important;
}


/* RELEASE-060: one canonical action-button height in every frontend popup.
   Reference: the customer logout confirmation actions (42px).
   Copy controls, close/back controls, image thumbnails and compact editor controls
   are deliberately excluded. Widths and existing visual treatments are unchanged. */
html body{
  --yf-popup-action-height:42px;
}

html body .yf-sheet .yf-msg-btn,
html body .yf-sheet .yf-msg-send-btn,
html body .yf-sheet .yf-interest-send-merchant,
html body .yf-sheet .yf-interest-share-friend,
html body .yf-sheet .yf-interest-download,
html body .yf-sheet.sheet-about .yf-about-sheet-actions button,
html body .yf-about-dismiss-dialog .yf-about-dismiss-actions > button,
html body .yf-product-msg-box .yf-product-msg-actions > button,
html body .yf-product-msg-alert-card .yf-product-msg-alert-ok,
html body .yf-service-ui-box .yf-service-primary:not(.yf-copy-all-contacts),
html body .yf-service-ui-box .yf-service-secondary,
html body .yf-service-ui-box .yf-customer-logout,
html body .yf-service-ui-box .yf-customer-order-actions button,
html body .yf-factory-v2-box .yf-fc-primary,
html body .yf-factory-v2-box .yf-fc-outline,
html body .yf-factory-v2-box .yf-fc-pay,
html body .yf-factory-v2-box .yf-fc-price-btn,
html body .yf-factory-v2-box .yf-fc-preview-card button,
html body .yf-factory-v2-box .yf-return-supplier-preview{
  box-sizing:border-box!important;
  height:var(--yf-popup-action-height)!important;
  min-height:var(--yf-popup-action-height)!important;
  max-height:var(--yf-popup-action-height)!important;
  padding-top:0!important;
  padding-bottom:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Explicit copy-control exception: keep their compact, purpose-built geometry. */
html body .yf-contact-copy,
html body .yf-supplier-contact-row button[data-copy-contact],
html body .yf-service-ui-box .yf-copy-all-contacts{
  max-height:none;
}


/* RELEASE-061: mobile Contact Us sheet sits 20px higher than the previous baseline.
   Keep the sheet clear of the browser bottom edge and align its visual baseline
   with the About Us dialog. Desktop geometry is untouched. */
@media (max-width:767px){
  html body .yf-sheet.sheet-contact:not(.yf-msg-form-open){
    bottom:calc(68px + env(safe-area-inset-bottom))!important;
    top:auto!important;
  }
}

/* RELEASE-061: mobile container calculator must open fully inside the visible viewport.
   Anchor the sheet from the top with a safe inset so the orange title bar and close
   button are always visible; the long calculator body remains independently scrollable. */
@media (max-width:767px){
  html body .yf-container-calc-mask{
    align-items:flex-start!important;
    justify-content:center!important;
    padding-top:max(12px,env(safe-area-inset-top))!important;
    padding-right:8px!important;
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
    padding-left:8px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  html body .yf-container-calc-panel{
    width:100%!important;
    max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
    margin:0!important;
  }
  html body .yf-container-calc-head{
    flex:0 0 46px!important;
    min-height:46px!important;
    position:relative!important;
    z-index:2!important;
  }
  html body .yf-container-calc-body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }
}


/* RELEASE-024: supplier price buttons match the global 42px modal action height. */
html body .yf-factory-v2-box .yf-fc-price-btn{
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  line-height:40px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  box-sizing:border-box!important;
}
html body .yf-factory-v2-box .yf-fc-price-btn.is-cost-visible{
  white-space:nowrap!important;
  cursor:default!important;
}


/* RELEASE-061: product-inquiry validation acknowledgement.
   Keep the acknowledgement at the canonical popup action height and center it
   horizontally inside the nested alert card. Width remains compact. */
html body .yf-product-msg-alert-card .yf-product-msg-alert-ok{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:140px!important;
  min-width:140px!important;
  max-width:140px!important;
  height:var(--yf-popup-action-height,42px)!important;
  min-height:var(--yf-popup-action-height,42px)!important;
  max-height:var(--yf-popup-action-height,42px)!important;
  margin:0 auto!important;
  padding:0 16px!important;
  line-height:normal!important;
  box-sizing:border-box!important;
}

/* RELEASE-066: comprehensive 001 audit lock.
   Reassert the two global invariants after every legacy stylesheet:
   (1) ordinary popup shells use a 14px outer radius owned by the shell;
   (2) ordinary popup action buttons use the 42px logout-dialog reference height.
   Copy, close, back, thumbnail and delete controls remain excluded. */
html body .yf-sheet,
html body .yf-service-ui-box,
html body .yf-factory-v2-box,
html body .yf-product-msg-box,
html body .yf-product-msg-alert-card,
html body .yf-container-calc-panel,
html body .yf-payment-methods-box{
  border-radius:14px!important;
  overflow:hidden!important;
}
html body .yf-payment-methods-head{border-radius:0!important;}
html body .yf-payment-provider-button,
html body .yf-order-payment-actions>button{
  box-sizing:border-box!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1.2!important;
}


/* RELEASE-068: payment header geometry and supplier bottom-price placement.
   The payment-method popup uses the same 44px title bar and 32px close control as
   the other standard dialogs. The unlocked bottom price is displayed beside the
   View Bottom Price button, never inside the button and never on the detail page. */
html body .yf-payment-methods-head{
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  grid-template-columns:38px minmax(0,1fr) 38px!important;
  padding:0 8px!important;
}
html body .yf-payment-methods-head>button{
  width:32px!important;
  min-width:32px!important;
  max-width:32px!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
}
html body .yf-fc-plan-cost .yf-fc-cost-actions{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  min-width:0!important;
}
html body .yf-fc-plan-cost .yf-fc-cost-progress{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  height:42px!important;
  padding:0 2px!important;
  color:#667085!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
html body .yf-fc-plan-cost .yf-fc-cost-progress[hidden]{display:none!important;}
html body .yf-fc-plan-cost .yf-fc-bottom-price{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  height:42px!important;
  padding:0 4px!important;
  color:#d95500!important;
  font-size:14px!important;
  font-weight:900!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
html body .yf-fc-plan-cost .yf-fc-bottom-price[hidden]{display:none!important;}
html body .yf-fc-plan-cost .yf-fc-price-btn{
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
}


/* RELEASE-071: final product-inquiry validation dialog geometry.
   The nested acknowledgement card owns a visible 14px curve on all four corners,
   and its confirmation action uses the shared 42px popup-button height. */
html body .yf-product-msg-alert .yf-product-msg-alert-card{
  border-radius:14px!important;
  overflow:hidden!important;
  background:#fff!important;
  background-clip:padding-box!important;
}
html body .yf-product-msg-alert .yf-product-msg-alert-card .yf-product-msg-alert-ok{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  width:140px!important;
  min-width:140px!important;
  max-width:140px!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  margin:0 auto!important;
  padding:0 16px!important;
  line-height:42px!important;
  border-radius:8px!important;
}

/* RELEASE-072: compact acknowledgement button in the nested product-inquiry validation prompt. */
html body .yf-product-msg-alert .yf-product-msg-alert-card .yf-product-msg-alert-ok{
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  line-height:36px!important;
  padding-top:0!important;
  padding-bottom:0!important;
}


/* 001: supplier access gate buttons use the normal compact popup-button height.
   Request account stays left and compact; Login receives the remaining width. */
html body .yf-factory-v2-mask.gate .yf-fc-gate-actions{
  width:min(320px,100%)!important;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important;
  gap:10px!important;
}
html body .yf-factory-v2-mask.gate .yf-fc-gate-actions .yf-fc-primary,
html body .yf-factory-v2-mask.gate .yf-fc-gate-actions .yf-fc-outline{
  height:38px!important;
  min-height:38px!important;
  padding:0 10px!important;
  line-height:1.2!important;
}


/* 001 final: account-choice buttons are equal, centered and use normal popup height. */
html body .yf-factory-v2-mask.gate .yf-fc-gate-actions{
  width:min(320px,100%)!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  justify-content:center!important;
  align-items:center!important;
  gap:10px!important;
}
html body .yf-factory-v2-mask.gate .yf-fc-gate-actions .yf-fc-primary,
html body .yf-factory-v2-mask.gate .yf-fc-gate-actions .yf-fc-outline{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  height:38px!important;
  min-height:38px!important;
  padding:0 10px!important;
}


/* 001 FINAL: supplier-limit wording, order back-arrow placement, and payment-method dialog geometry. */
/* Keep factory/order headers as a strict three-column grid so the back control can never drift under the title. */
html body .yf-factory-v2-mask .yf-fc-head{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) 34px!important;
  align-items:center!important;
  direction:ltr!important;
}
html body .yf-factory-v2-mask .yf-fc-head [data-fc-back]{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  position:relative!important;
  inset:auto!important;
  margin:0!important;
}
html body .yf-factory-v2-mask .yf-fc-head>b{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:stretch!important;
  align-self:center!important;
  text-align:center!important;
  padding:0!important;
  margin:0!important;
}
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:center!important;
  margin:0!important;
}
/* Arabic: back is on the right and points right; close stays on the left. */
html.yf-lang-ar body .yf-factory-v2-mask .yf-fc-head,
body.yf-lang-ar .yf-factory-v2-mask .yf-fc-head{
  direction:ltr!important;
}
html.yf-lang-ar body .yf-factory-v2-mask .yf-fc-head [data-fc-back],
body.yf-lang-ar .yf-factory-v2-mask .yf-fc-head [data-fc-back]{
  grid-column:3!important;
  justify-self:end!important;
  transform:scaleX(-1)!important;
}
html.yf-lang-ar body .yf-factory-v2-mask .yf-fc-head [data-fc-close],
body.yf-lang-ar .yf-factory-v2-mask .yf-fc-head [data-fc-close]{
  grid-column:1!important;
  justify-self:start!important;
}
html.yf-lang-ar body .yf-factory-v2-mask .yf-fc-head>b,
body.yf-lang-ar .yf-factory-v2-mask .yf-fc-head>b{
  grid-column:2!important;
  text-align:center!important;
}

/* Payment Methods uses exactly the same compact title-bar rhythm as My Order. */
html body .yf-payment-methods-head{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) 34px!important;
  align-items:center!important;
  padding:0 8px!important;
  background:var(--yf-brand-orange)!important;
  color:#fff!important;
  box-sizing:border-box!important;
}
html body .yf-payment-methods-head>b{
  grid-column:2!important;
  text-align:center!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.25!important;
}
html body .yf-payment-methods-head>button{
  grid-column:3!important;
  justify-self:end!important;
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important;
  margin:0!important;
  padding:0!important;
  transform:scale(.9)!important;
  transform-origin:center!important;
}
html body .yf-payment-method-empty{
  padding:20px 12px!important;
  text-align:center!important;
  color:#6b7280!important;
  font-size:14px!important;
  line-height:1.5!important;
  font-weight:400!important;
}
@media(max-width:767px){
  html body .yf-payment-methods-head{
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
  }
}
@media(min-width:768px){
  html body .yf-payment-methods-head{
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
  }
}

/* RELEASE-072: final compact-height correction requested for supplier pricing and My Account orders.
   - Supplier price actions match the 40px action buttons directly below them.
   - My Account order actions stay compact at 30px instead of inheriting the global 42px popup height. */
html body .yf-factory-v2-box .yf-fc-price-btn,
html body .yf-factory-v2-box .yf-fc-preview-card button{
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1.2!important;
}

html body .yf-customer-account-mask .yf-customer-order-actions button,
html body .yf-customer-account-mask .yf-customer-order-actions .yf-customer-order-link{
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1.2!important;
}

/* RELEASE-073: compact account order actions, aligned delete/payment dialogs,
   and language-aware My Order back control. */

/* 1) Delete-order confirmation close control: same visible diameter as the shared My Account close control. */
html body .yf-site-confirm-head .yf-site-confirm-close{
  width:31px!important;
  min-width:31px!important;
  max-width:31px!important;
  height:31px!important;
  min-height:31px!important;
  max-height:31px!important;
  transform:none!important;
  justify-self:end!important;
  align-self:center!important;
}

/* 2) My Account Pay/Delete controls: keep the orange outline language,
      use a lighter/smaller label and reduce the complete control footprint by about 20%. */
html body .yf-customer-account-mask .yf-customer-order-actions{
  min-width:74px!important;
  gap:4px!important;
}
html body .yf-customer-account-mask .yf-customer-order-actions button,
html body .yf-customer-account-mask .yf-customer-order-actions .yf-customer-order-link{
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  padding:0 8px!important;
  border-color:#f0a16d!important;
  background:#fff!important;
  color:#ed6a12!important;
  font-size:10px!important;
  font-weight:600!important;
  line-height:22px!important;
  border-radius:6px!important;
}
html body .yf-customer-account-mask .yf-customer-order-actions button.delete,
html body .yf-customer-account-mask .yf-customer-order-actions button.refresh-status,
html body .yf-customer-account-mask .yf-customer-order-actions button.view-contacts{
  border-color:#f0a16d!important;
  background:#fff!important;
  color:#ed6a12!important;
}
@media(max-width:767px){
  html body .yf-customer-account-mask .yf-customer-order-actions{
    grid-template-columns:repeat(auto-fit,minmax(72px,1fr))!important;
  }
}

/* 3) Payment Methods dialog: same width and close-button geometry as My Order. */
html body .yf-payment-methods-box{
  width:min(440px,calc(100vw - 32px))!important;
  max-width:440px!important;
}
html body .yf-payment-methods-head>button{
  width:31px!important;
  min-width:31px!important;
  max-width:31px!important;
  height:31px!important;
  min-height:31px!important;
  max-height:31px!important;
  transform:none!important;
  justify-self:end!important;
  align-self:center!important;
}
@media(max-width:600px){
  html body .yf-payment-methods-box{
    width:min(440px,calc(100vw - 28px))!important;
    max-width:440px!important;
  }
}

/* 4) My Order header: back control stays on the outside edge.
      LTR -> left-pointing arrow on the left; Arabic -> right-pointing arrow on the right. */
html body .yf-service-payment-mask .yf-service-ui-head{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) 34px!important;
  align-items:center!important;
  direction:ltr!important;
  padding:4px 8px!important;
}
html body .yf-service-payment-mask .yf-service-ui-head>.yf-service-back{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  inset:auto!important;
  margin:0!important;
  transform:none!important;
}
html body .yf-service-payment-mask .yf-service-ui-head>b{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:stretch!important;
  align-self:center!important;
  text-align:center!important;
  margin:0!important;
  padding:0!important;
}
html body .yf-service-payment-mask .yf-service-ui-head>[data-yf-service-close]{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:center!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  inset:auto!important;
  margin:0!important;
  transform:scale(.9)!important;
}
html.yf-lang-ar body .yf-service-payment-mask .yf-service-ui-head,
body.yf-lang-ar .yf-service-payment-mask .yf-service-ui-head{
  direction:ltr!important;
}
html.yf-lang-ar body .yf-service-payment-mask .yf-service-ui-head>.yf-service-back,
body.yf-lang-ar .yf-service-payment-mask .yf-service-ui-head>.yf-service-back{
  grid-column:3!important;
  justify-self:end!important;
  transform:scaleX(-1)!important;
}
html.yf-lang-ar body .yf-service-payment-mask .yf-service-ui-head>[data-yf-service-close],
body.yf-lang-ar .yf-service-payment-mask .yf-service-ui-head>[data-yf-service-close]{
  grid-column:1!important;
  justify-self:start!important;
}
html.yf-lang-ar body .yf-service-payment-mask .yf-service-ui-head>b,
body.yf-lang-ar .yf-service-payment-mask .yf-service-ui-head>b{
  grid-column:2!important;
  text-align:center!important;
}

/* Login + shared transient prompt final normalization: equal action split, one prompt shell, auto height. */
html body .yf-customer-login-mask .yf-login-actions.has-request{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:10px!important;
}
html body .yf-customer-login-mask .yf-login-actions.has-request>button{
  width:100%!important;
  min-width:0!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 10px!important;
  white-space:normal!important;
  line-height:1.15!important;
}
html body .yf-verification-notice-mask{
  padding:16px!important;
}
html body .yf-verification-notice-box,
html body .yf-verification-notice-mask.is-toast .yf-verification-notice-box{
  width:min(410px,calc(100vw - 32px))!important;
  min-width:0!important;
  max-width:410px!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 32px)!important;
  overflow:auto!important;
  padding:28px 24px 24px!important;
  border:0!important;
  border-radius:16px!important;
  background:#fff!important;
  box-sizing:border-box!important;
  box-shadow:0 24px 70px rgba(15,23,42,.28)!important;
  text-align:center!important;
}
html body .yf-verification-notice-icon,
html body .yf-verification-notice-mask.is-toast .yf-verification-notice-icon{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:54px!important;
  height:54px!important;
  margin:0 auto 14px!important;
  border-radius:50%!important;
  background:#16a34a!important;
  color:#fff!important;
  font-size:34px!important;
  font-weight:800!important;
  line-height:1!important;
}
html body .yf-verification-notice-mask.is-warning .yf-verification-notice-icon{
  background:#f59e0b!important;
}
html body .yf-verification-notice-box>b,
html body .yf-verification-notice-mask.is-toast .yf-verification-notice-box>b{
  display:block!important;
  margin:0!important;
  color:#243244!important;
  font-size:17px!important;
  line-height:1.35!important;
  font-weight:700!important;
}
html body .yf-verification-notice-box>p,
html body .yf-verification-notice-mask.is-toast .yf-verification-notice-box>p{
  margin:10px 0 0!important;
  color:#5f6b7b!important;
  font-size:14px!important;
  line-height:1.7!important;
  white-space:pre-line!important;
}
html body .yf-verification-notice-box>.yf-verification-notice-close{
  display:block!important;
  position:absolute!important;
  top:10px!important;
  right:10px!important;
  left:auto!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#f1f5f9!important;
}
html.yf-lang-ar body .yf-verification-notice-box>.yf-verification-notice-close,
body.yf-lang-ar .yf-verification-notice-box>.yf-verification-notice-close,
html body .yf-verification-notice-box[dir="rtl"]>.yf-verification-notice-close{
  right:auto!important;
  left:10px!important;
}

/* FINAL: Payment Methods close control matches the compact standard dialog close button. */
html body .yf-payment-methods-box .yf-payment-methods-head > button[data-payment-methods-close]{
  width:28px!important;
  min-width:28px!important;
  max-width:28px!important;
  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  transform:none!important;
  justify-self:end!important;
  align-self:center!important;
  box-sizing:border-box!important;
}
html body .yf-payment-methods-box .yf-payment-methods-head > button[data-payment-methods-close]::before,
html body .yf-payment-methods-box .yf-payment-methods-head > button[data-payment-methods-close]::after{
  width:13px!important;
  height:1.8px!important;
  left:50%!important;
  top:50%!important;
}


/* QT-20260716: keep Contact Us copy-button geometry unchanged; only reduce label size/weight. */
html body .yf-sheet.sheet-contact .yf-contact-copy .yf-contact-copy-label,
html body .yf-sheet.sheet-contact .yf-contact-copy:hover .yf-contact-copy-label,
html body .yf-sheet.sheet-contact .yf-contact-copy:focus .yf-contact-copy-label,
html body .yf-sheet.sheet-contact .yf-contact-copy:active .yf-contact-copy-label{
  font-size:8.5px!important;
  font-weight:500!important;
  line-height:1!important;
}

/* QT-20260716: collection-only mode uses the normal full-width single primary button. */
html body .yf-sheet.sheet-contact .yf-contact-actions.yf-collection-actions{
  display:block!important;
  width:100%!important;
}
html body .yf-sheet.sheet-contact .yf-contact-actions.yf-collection-actions .yf-interest-download{
  display:flex!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  justify-content:center!important;
  align-items:center!important;
}

/* 2026-07-16: desktop My Saved Items sheet sits 80px higher.
   Contact Us mode and all mobile layouts remain unchanged. */
@media (min-width:768px){
  html body .yf-sheet.sheet-contact:has(.yf-contact-body.yf-collection-only){
    bottom:130px!important;
    top:auto!important;
  }
}

/* 2026-07-16 — unify all frontend popup title typography to the approved
   customer logout title reference. Typography only; no geometry changes. */
html body .yf-sheet .yf-sheet-head > span,
html body .yf-product-msg-head > span,
html body .yf-service-ui-head > b,
html body .yf-factory-v2-mask .yf-fc-head > b,
html body .yf-supplier-product-detail-head > b,
html body .yf-about-dismiss-head > b,
html body .yf-site-confirm-head > b,
html body .yf-payment-methods-head > b,
html body .yf-container-calc-head > h3{
  font-size:17px!important;
  font-weight:800!important;
  line-height:1.25!important;
}

/* Customer access/login/logout explanatory copy uses the approved smaller
   logout-confirmation text scale. */
html body .yf-customer-access-choice-mask .yf-customer-access-choice > p,
html body .yf-customer-login-mask .yf-customer-login-form > p,
html body .yf-customer-login-mask .yf-service-form-status,
html body .yf-customer-logout-mask .yf-logout-confirm > p,
html body .yf-customer-logout-mask .yf-service-form-status{
  font-size:15px!important;
  font-weight:400!important;
  line-height:1.6!important;
}

/* RELEASE-20260716-ALL-SCREENSHOT-POPUP-BUTTONS
   Eight supplied popup screenshots reviewed one by one.
   Every action button shown by those popup flows is 10px shorter than its
   previous shell. Copy controls and compact header/navigation controls stay unchanged. */

/* Customer Login choice: 40px -> 30px. */
html body .yf-customer-access-choice-mask .yf-customer-access-actions > .yf-service-primary,
html body .yf-customer-access-choice-mask .yf-customer-access-actions > .yf-service-secondary{
  height:30px!important;min-height:30px!important;max-height:30px!important;
  padding-top:0!important;padding-bottom:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  line-height:1.15!important;box-sizing:border-box!important;margin-top:0!important;
}

/* Customer Logout: 40px -> 30px. */
html body .yf-customer-logout-mask .yf-logout-actions > .yf-service-primary,
html body .yf-customer-logout-mask .yf-logout-actions > .yf-service-secondary{
  height:30px!important;min-height:30px!important;max-height:30px!important;
  padding-top:0!important;padding-bottom:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  line-height:1.15!important;box-sizing:border-box!important;margin-top:0!important;
}

/* My Orders: existing compact 24px controls -> 14px. */
html body .yf-customer-account-mask .yf-customer-order-actions button,
html body .yf-customer-account-mask .yf-customer-order-actions .yf-customer-order-link{
  height:14px!important;min-height:14px!important;max-height:14px!important;
  padding-top:0!important;padding-bottom:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  line-height:1!important;box-sizing:border-box!important;
}

/* Contact Us: four main action buttons only. Copy buttons are deliberately excluded. */
html body .yf-sheet.sheet-contact .yf-contact-actions > a:not(.yf-contact-copy),
html body .yf-sheet.sheet-contact .yf-contact-actions > button:not(.yf-contact-copy),
html body .yf-sheet.sheet-contact .yf-interest-send-merchant,
html body .yf-sheet.sheet-contact .yf-interest-share-friend,
html body .yf-sheet.sheet-contact .yf-msg-btn,
html body .yf-sheet.sheet-contact .yf-interest-download{
  height:32px!important;min-height:32px!important;max-height:32px!important;
  padding-top:0!important;padding-bottom:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  line-height:1.15!important;box-sizing:border-box!important;
}
html body .yf-sheet.sheet-contact .yf-contact-copy{
  height:25px!important;min-height:25px!important;max-height:25px!important;
}
html body .yf-sheet.sheet-contact .yf-interest-message{
  white-space:nowrap!important;
}

/* Contact-message form send button: 38px -> 28px. */
html body .yf-sheet .yf-msg-form-actions .yf-msg-send-btn{
  height:28px!important;min-height:28px!important;max-height:28px!important;
  padding-top:0!important;padding-bottom:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  line-height:1.15!important;box-sizing:border-box!important;
}

/* View Supplier login gate buttons: 40px -> 30px. */
html body .yf-factory-v2-mask .yf-fc-actions > .yf-fc-primary,
html body .yf-factory-v2-mask .yf-fc-actions > .yf-fc-outline,
html body .yf-factory-v2-mask .yf-fc-login-actions > .yf-fc-primary,
html body .yf-factory-v2-mask .yf-fc-login-actions > .yf-fc-outline,
html body .yf-factory-v2-mask .yf-service-primary,
html body .yf-factory-v2-mask .yf-service-secondary{
  height:30px!important;min-height:30px!important;max-height:30px!important;
  padding-top:0!important;padding-bottom:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  line-height:1.15!important;box-sizing:border-box!important;margin-top:0!important;
}

/* Product Inquiry cancel/send buttons: 36px -> 26px. */
html body .yf-product-msg-box .yf-product-msg-actions > button{
  height:26px!important;min-height:26px!important;max-height:26px!important;
  padding-top:0!important;padding-bottom:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  line-height:1.15!important;box-sizing:border-box!important;
}

/* QT-20260716-COPY-TEXT: keep both Contact Us copy buttons unchanged in size;
   reduce only their label by two steps and use a lighter weight. */
html body .yf-sheet.sheet-contact .yf-contact-copy .yf-contact-copy-label,
html body .yf-sheet.sheet-contact .yf-contact-copy:hover .yf-contact-copy-label,
html body .yf-sheet.sheet-contact .yf-contact-copy:focus .yf-contact-copy-label,
html body .yf-sheet.sheet-contact .yf-contact-copy:focus-visible .yf-contact-copy-label,
html body .yf-sheet.sheet-contact .yf-contact-copy:active .yf-contact-copy-label{
  font-size:8px!important;
  font-weight:400!important;
  line-height:1!important;
}

/* 2026-07-16: keep the Customer Login close control exactly the same size as the standard popup close control. */
html body .yf-customer-login-mask .yf-service-ui-head > [data-yf-service-close]{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  max-width:34px!important;
  max-height:34px!important;
  flex:0 0 34px!important;
}
html body .yf-customer-login-mask .yf-service-ui-head > [data-yf-service-close]::before,
html body .yf-customer-login-mask .yf-service-ui-head > [data-yf-service-close]::after{
  width:14px!important;
  height:2px!important;
}

/* 2026-07-16: unify all reviewed popup main-action labels to the approved
   Contact Us "留言 / 下载图片" visual text scale. Compact copy controls stay unchanged. */
html body .yf-customer-access-choice-mask .yf-customer-access-actions > .yf-service-primary,
html body .yf-customer-access-choice-mask .yf-customer-access-actions > .yf-service-secondary,
html body .yf-customer-logout-mask .yf-logout-actions > .yf-service-primary,
html body .yf-customer-logout-mask .yf-logout-actions > .yf-service-secondary,
html body .yf-customer-account-mask .yf-customer-order-actions button,
html body .yf-customer-account-mask .yf-customer-order-actions .yf-customer-order-link,
html body .yf-sheet.sheet-contact .yf-contact-actions > a:not(.yf-contact-copy),
html body .yf-sheet.sheet-contact .yf-contact-actions > button:not(.yf-contact-copy),
html body .yf-sheet.sheet-contact .yf-interest-send-merchant,
html body .yf-sheet.sheet-contact .yf-interest-share-friend,
html body .yf-sheet.sheet-contact .yf-msg-btn,
html body .yf-sheet.sheet-contact .yf-interest-download,
html body .yf-sheet .yf-msg-form-actions .yf-msg-send-btn,
html body .yf-factory-v2-mask .yf-fc-actions > .yf-fc-primary,
html body .yf-factory-v2-mask .yf-fc-actions > .yf-fc-outline,
html body .yf-factory-v2-mask .yf-fc-login-actions > .yf-fc-primary,
html body .yf-factory-v2-mask .yf-fc-login-actions > .yf-fc-outline,
html body .yf-factory-v2-mask .yf-service-primary,
html body .yf-factory-v2-mask .yf-service-secondary,
html body .yf-product-msg-box .yf-product-msg-actions > button{
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.15!important;
}
html body .yf-customer-access-choice-mask .yf-customer-access-actions > .yf-service-primary *,
html body .yf-customer-access-choice-mask .yf-customer-access-actions > .yf-service-secondary *,
html body .yf-customer-logout-mask .yf-logout-actions > .yf-service-primary *,
html body .yf-customer-logout-mask .yf-logout-actions > .yf-service-secondary *,
html body .yf-customer-account-mask .yf-customer-order-actions button *,
html body .yf-customer-account-mask .yf-customer-order-actions .yf-customer-order-link *,
html body .yf-sheet.sheet-contact .yf-contact-actions > a:not(.yf-contact-copy) *,
html body .yf-sheet.sheet-contact .yf-contact-actions > button:not(.yf-contact-copy) *,
html body .yf-sheet.sheet-contact .yf-interest-send-merchant *,
html body .yf-sheet.sheet-contact .yf-interest-share-friend *,
html body .yf-sheet.sheet-contact .yf-msg-btn *,
html body .yf-sheet.sheet-contact .yf-interest-download *,
html body .yf-sheet .yf-msg-form-actions .yf-msg-send-btn *,
html body .yf-factory-v2-mask .yf-fc-actions > .yf-fc-primary *,
html body .yf-factory-v2-mask .yf-fc-actions > .yf-fc-outline *,
html body .yf-factory-v2-mask .yf-fc-login-actions > .yf-fc-primary *,
html body .yf-factory-v2-mask .yf-fc-login-actions > .yf-fc-outline *,
html body .yf-factory-v2-mask .yf-service-primary *,
html body .yf-factory-v2-mask .yf-service-secondary *,
html body .yf-product-msg-box .yf-product-msg-actions > button *{
  font-size:inherit!important;
  font-weight:inherit!important;
  line-height:inherit!important;
}

/* 2026-07-16 final height correction:
   Product Inquiry (2 buttons), Contact message form (1 button), and Customer Login (2 buttons)
   must visually match the approved Contact Us main-action height. */
html body .yf-product-msg-box .yf-product-msg-actions > button,
html body .yf-sheet .yf-msg-form-actions .yf-msg-send-btn,
html body .yf-customer-login-mask .yf-login-actions.has-request > button{
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  line-height:1.15!important;
}

/* 2026-07-16 — Logout confirmation: match Contact Us main-button height and remove excess bottom whitespace. */
html body .yf-customer-logout-mask .yf-logout-actions > .yf-service-primary,
html body .yf-customer-logout-mask .yf-logout-actions > .yf-service-secondary{
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  margin-top:0!important;
}
html body .yf-customer-logout-mask .yf-service-form-status:empty{
  display:none!important;
  min-height:0!important;
  margin:0!important;
}
html body .yf-customer-logout-mask .yf-logout-confirm{
  padding:17px!important;
}
@media(max-width:640px){
  html body .yf-customer-logout-mask .yf-logout-confirm{
    padding:14px!important;
  }
}