/* 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. */
@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:#fff!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:2px!important;
  padding:0!important;
  background:#f7f7f7!important;
  border:0!important;
  box-shadow:none!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;
}

/* Main-image back control is independent from popup close controls.
   One canonical CSS renderer draws the compact, heavier shafted arrow on the frosted shell. */
html body .yf-detail-page .yf-detail-hero > button.yf-detail-source-back{
  position:absolute!important;
  left:10px!important;
  top:10px!important;
  z-index:9999!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  align-items:center!important;
  justify-content:center!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;
  margin:0!important;
  border-radius:50%!important;
  border:1px solid rgba(25,25,25,.11)!important;
  background:rgba(255,255,255,.28)!important;
  -webkit-backdrop-filter:blur(9px) saturate(125%)!important;
  backdrop-filter:blur(9px) saturate(125%)!important;
  box-shadow:0 2px 7px rgba(0,0,0,.08)!important;
  transform:none!important;
  transform-origin:center center!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  overflow:hidden!important;
  cursor:pointer!important;
}
html body .yf-detail-page .yf-detail-hero > button.yf-detail-source-back:active{
  background:rgba(255,255,255,.42)!important;
}
html body .yf-detail-page .yf-detail-hero > button.yf-detail-source-back::before{
  content:""!important;
  position:absolute!important;
  left:11px!important;
  top:50%!important;
  display:block!important;
  width:13px!important;
  height:2.2px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:2px!important;
  background:rgba(30,30,30,.78)!important;
  transform:translateY(-50%)!important;
  transform-origin:center!important;
  pointer-events:none!important;
}
html body .yf-detail-page .yf-detail-hero > button.yf-detail-source-back::after{
  content:""!important;
  position:absolute!important;
  left:8px!important;
  top:50%!important;
  display:block!important;
  width:7.5px!important;
  height:7.5px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-right:2.2px solid rgba(30,30,30,.78)!important;
  border-bottom:2.2px solid rgba(30,30,30,.78)!important;
  background:transparent!important;
  box-sizing:border-box!important;
  transform:translateY(-50%) rotate(135deg)!important;
  transform-origin:center!important;
  pointer-events:none!important;
}
@media (max-width:767px){
  html body .yf-detail-page .yf-detail-hero > button.yf-detail-source-back{
    left:10px!important;
    top:10px!important;
  }
  html body.yf-detail-video-playing .yf-detail-page .yf-detail-hero > button.yf-detail-source-back,
  html body .yf-detail-page .yf-detail-hero.video-playing > button.yf-detail-source-back{
    top:40px!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]{
  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{
  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{
  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-18.5 — final layout-only corrections.
   These rules are shared by home and detail pages. No product or route logic.
   ========================================================================== */

/* 1. Category: one identical component on home and detail. */
html body .yf-sheet.yf-cat-top-panel{
  width:max-content!important;
  min-width:0!important;
  max-height:calc(100vh - 64px)!important;
  overflow:hidden!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-sheet-body{
  padding:6px 10px!important;
  overflow:visible!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-cat-wrap{
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-start!important;
  gap:0!important;
  width:max-content!important;
  overflow:visible!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-cat-col{
  display:flex!important;
  flex:0 0 auto!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:7px!important;
  overflow:visible!important;
}
@media (min-width:768px){
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col-l1,
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col-l2,
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col-l3{
    width:180px!important;
    min-width:180px!important;
    max-width:180px!important;
  }
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col-l1{
    padding:0 12px 4px 0!important;
    border-right:1px solid #eeeeee!important;
  }
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col-l2{
    padding:0 12px 4px!important;
    border-right:1px solid #eeeeee!important;
  }
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col-l3{
    padding:0 0 4px 12px!important;
    border-right:0!important;
  }
}
html body .yf-sheet.yf-cat-top-panel .yf-cat-item-l1,
html body .yf-sheet.yf-cat-top-panel .yf-cat-item-l2,
html body .yf-sheet.yf-cat-top-panel .yf-cat-item-l3,
html body .yf-sheet.yf-cat-top-panel .yf-cat-all-btn{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:100%!important;
  min-width:0!important;
  min-height:32px!important;
  height:auto!important;
  margin:0!important;
  padding:6px 8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#222!important;
  font-size:14px!important;
  font-weight:650!important;
  line-height:20px!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:visible!important;
  transform:none!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child{
  display: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;
}
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;
  line-height:20px!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;
  width:0!important;
  height:0!important;
  margin:0!important;
  border-top:5px solid transparent!important;
  border-bottom:5px solid transparent!important;
  border-left:7px solid #ff6a00!important;
  border-right:0!important;
  font-size:0!important;
  line-height:0!important;
  transform:translateY(-1px)!important;
}
html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-wrap,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-wrap{
  direction:rtl!important;
}
html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-col,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-col{
  direction:rtl!important;
  text-align:right!important;
}
html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-item-l1,
html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-item-l2,
html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-item-l3,
html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-all-btn,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-item-l1,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-item-l2,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-item-l3,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-all-btn{
  direction:rtl!important;
  text-align:right!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 #ff6a00!important;
}
@media (max-width:767px){
  html body .yf-sheet.yf-cat-top-panel{
    max-width:calc(100vw - 8px)!important;
  }
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col-l1{
    width:108px!important;min-width:108px!important;max-width:108px!important;
  }
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col-l2{
    width:122px!important;min-width:122px!important;max-width:122px!important;
  }
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col-l3{
    width:132px!important;min-width:132px!important;max-width:132px!important;
  }
  html body .yf-sheet.yf-cat-top-panel .yf-cat-item-l1,
  html body .yf-sheet.yf-cat-top-panel .yf-cat-item-l2,
  html body .yf-sheet.yf-cat-top-panel .yf-cat-item-l3,
  html body .yf-sheet.yf-cat-top-panel .yf-cat-all-btn{
    min-height:29px!important;
    padding:5px 6px!important;
    font-size:13px!important;
    line-height:19px!important;
  }
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col button.has-child{
    column-gap:5px!important;
  }
}

/* 2. Contact message: title/copy/fields centered; Arabic arrow points outward. */
html body .yf-sheet.sheet-contact.yf-msg-form-open .yf-sheet-head{
  position:relative!important;
  direction:ltr!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding-left:58px!important;
  padding-right:58px!important;
}
html body .yf-sheet.sheet-contact.yf-msg-form-open .yf-sheet-head>span{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:calc(100% - 128px)!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  text-align:center!important;
}
html body .yf-sheet.sheet-contact.yf-msg-form-open .yf-msg-form-scroll,
html body .yf-sheet.sheet-contact.yf-msg-form-open .yf-msg-form-scroll>p,
html body .yf-sheet.sheet-contact.yf-msg-form-open .yf-msg-field input,
html body .yf-sheet.sheet-contact.yf-msg-form-open .yf-msg-field textarea,
html body .yf-sheet.sheet-contact.yf-msg-form-open .yf-msg-field input::placeholder,
html body .yf-sheet.sheet-contact.yf-msg-form-open .yf-msg-field textarea::placeholder,
html body .yf-sheet.sheet-contact.yf-msg-form-open .yf-msg-send-btn{
  text-align:center!important;
}
html body .yf-sheet.sheet-contact.yf-msg-form-open.yf-sheet-lang-rtl .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;
  margin-left:0!important;
}
html body .yf-sheet.sheet-contact.yf-msg-form-open.yf-sheet-lang-rtl .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{
  position:absolute!important;
  right:10px!important;
  left:auto!important;
  top:50%!important;
  transform:translateY(-50%)!important;
}
html body .yf-sheet.sheet-contact.yf-msg-form-open.yf-sheet-lang-rtl .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{
  left:18px!important;
  border-left:8px solid #fff!important;
  border-right:0!important;
}
html body .yf-sheet.sheet-contact.yf-msg-form-open.yf-sheet-lang-rtl .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{
  left:6px!important;
}
html body .yf-sheet.sheet-contact.yf-msg-form-open.yf-sheet-lang-rtl .yf-msg-form-body,
html body .yf-sheet.sheet-contact.yf-msg-form-open[data-yf-sheet-lang="AR"] .yf-msg-form-body,
html body .yf-sheet.sheet-contact.yf-msg-form-open.yf-sheet-lang-rtl .yf-msg-field input,
html body .yf-sheet.sheet-contact.yf-msg-form-open.yf-sheet-lang-rtl .yf-msg-field textarea,
html body .yf-sheet.sheet-contact.yf-msg-form-open[data-yf-sheet-lang="AR"] .yf-msg-field input,
html body .yf-sheet.sheet-contact.yf-msg-form-open[data-yf-sheet-lang="AR"] .yf-msg-field textarea{
  direction:rtl!important;
}

/* 3. Permanent-close confirmation matches the standard popup chrome. */
html body .yf-about-dismiss-dialog{
  width:min(390px,calc(100vw - 32px))!important;
  overflow:hidden!important;
  border:1px solid #e8edf3!important;
  border-radius:var(--yf-popup-shell-radius)!important;
  background:#fff!important;
  box-shadow:0 18px 48px rgba(15,23,42,.24)!important;
}
html body .yf-about-dismiss-head{
  position:relative!important;
  width:100%!important;
  height:52px!important;
  min-height:52px!important;
  padding:0 58px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  background:#ff6a00!important;
  color:#fff!important;
}
html body .yf-about-dismiss-head>b{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:calc(100% - 120px)!important;
  margin:0!important;
  text-align:center!important;
}
html body .yf-about-dismiss-head>button{
  position:absolute!important;
  right:8px!important;
  left:auto!important;
  top:50%!important;
  margin:0!important;
  transform:translateY(-50%) scale(.9)!important;
}
html body .yf-about-dismiss-dialog>p{
  margin:0!important;
  padding:22px 20px 16px!important;
  color:#6b7280!important;
  font-size:14px!important;
  line-height:1.65!important;
}
html body .yf-about-dismiss-actions{
  display:flex!important;
  justify-content:flex-end!important;
  gap:10px!important;
  padding:12px 20px 18px!important;
}
html body .yf-about-dismiss-actions>button{
  min-width:92px!important;
  height:40px!important;
  padding:0 18px!important;
  border-radius:8px!important;
  font-size:14px!important;
  font-weight:850!important;
}
html body .yf-about-dismiss-actions .is-confirm{
  border:2px solid #ff6a00!important;
  background:#fff!important;
  color:#ff6a00!important;
}
html body .yf-about-dismiss-actions .is-confirm:hover,
html body .yf-about-dismiss-actions .is-confirm:focus-visible{
  background:#ff6a00!important;
  color:#fff!important;
}

/* 4. Container calculator close control uses the same size as customer login. */
html body .yf-container-calc-close{
  position:absolute!important;
  right:8px!important;
  left:auto!important;
  top:50%!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;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 1px 5px rgba(0,0,0,.10)!important;
  transform:translateY(-50%) scale(.9)!important;
}
html body .yf-container-calc-close::before,
html body .yf-container-calc-close::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:14px!important;
  height:1.8px!important;
  margin:0!important;
  border-radius:999px!important;
  background:#111827!important;
  transform-origin:center center!important;
}
html body .yf-container-calc-close::before{transform:translate(-50%,-50%) rotate(45deg)!important;}
html body .yf-container-calc-close::after{transform:translate(-50%,-50%) rotate(-45deg)!important;}

/* 5. Home/About logo use the same 2:1 coordinate plane as the admin editor.
      Home logo is 1.2 times the About logo. */
html body .yf-home-about,
html body .yf-home > #yfHomeAbout,
html body .yf-sheet.sheet-about .yf-about-sheet-scroll{
  position:relative!important;
}
html body .yf-about-brand-logo-plane{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  aspect-ratio:2 / 1!important;
  pointer-events:none!important;
  z-index:4!important;
  overflow:visible!important;
}
html body .yf-about-brand-logo-plane .yf-about-brand-logo{
  position:absolute!important;
  left:var(--yf-about-logo-x,14%)!important;
  top:var(--yf-about-logo-y,18%)!important;
  transform:translate(-50%,-50%)!important;
  display:block!important;
  width:auto!important;
  object-fit:contain!important;
  pointer-events:none!important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.16))!important;
}
html body .yf-about-brand-logo-plane.is-popup .yf-about-brand-logo{
  width:20%!important;
  max-width:none!important;
  max-height:64px!important;
}
html body .yf-about-brand-logo-plane.is-home .yf-about-brand-logo{
  width:24%!important;
  max-width:none!important;
  max-height:77px!important;
}