/* Jolfa motion runtime: loaded LAST to isolate critical storefront animations from legacy cascade. */

@keyframes jolfaPriceBannerIconSpinForever {
  from { rotate: 0turn; }
  to { rotate: 1turn; }
}

@keyframes jolfaPriceBannerSheenRuntime {
  0%, 8% { translate: -170% 0; opacity: 0; }
  16% { opacity: .14; }
  34% { translate: 680% 0; opacity: .62; }
  43%, 100% { translate: 680% 0; opacity: 0; }
}

@keyframes jolfaPriceBannerBreathRuntime {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.08) saturate(1.08); }
}

body.has-price-update-banner .jolfa-price-update-banner {
  animation: jolfaPriceBannerBreathRuntime 4.6s ease-in-out infinite !important;
  animation-play-state: running !important;
}

body.has-price-update-banner .jolfa-price-update-banner::before {
  animation: jolfaPriceBannerSheenRuntime 5.8s ease-in-out infinite !important;
  animation-play-state: running !important;
  will-change: translate, opacity !important;
}

body.has-price-update-banner .jolfa-price-update-banner__inner > .fa-arrows-rotate,
body.has-price-update-banner .jolfa-price-update-banner__inner > svg.fa-arrows-rotate,
body.has-price-update-banner .jolfa-price-update-banner__inner > svg.svg-inline--fa.fa-arrows-rotate {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  transform-origin: 50% 50% !important;
  animation: jolfaPriceBannerIconSpinForever 1.9s linear infinite !important;
  animation-play-state: running !important;
  will-change: rotate !important;
}

@keyframes jolfaLastStockBellRuntime {
  0%, 22%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  2.5% { translate: -2px 0; rotate: -15deg; scale: 1.08; }
  5.0% { translate: 2px 0; rotate: 14deg; scale: 1.09; }
  7.5% { translate: -2px 0; rotate: -11deg; scale: 1.07; }
  10.0% { translate: 1.5px 0; rotate: 9deg; scale: 1.06; }
  12.5% { translate: -1px 0; rotate: -6deg; scale: 1.04; }
  15.0% { translate: .6px 0; rotate: 4deg; scale: 1.025; }
  18.0% { translate: 0 0; rotate: 0deg; scale: 1; }
}

body.product-detail-page .commerce-low-stock-note.is-last-one [data-low-stock-count],
body.product-detail-page .commerce-mobile-low-stock [data-mobile-low-stock-count],
body.product-detail-page .commerce-mobile-pdp-buybar__stock-note [data-mobile-low-stock-count] {
  display: inline-block !important;
  position: relative !important;
  transform-origin: 50% 100% !important;
  animation: jolfaLastStockBellRuntime 5.2s cubic-bezier(.36,.07,.19,.97) infinite !important;
  animation-play-state: running !important;
  will-change: translate, rotate, scale !important;
}

@keyframes jolfaAmazingRuntimeBreath {
  0%, 100% { filter: brightness(1) saturate(1); box-shadow: 0 18px 45px rgba(42, 18, 70, .24); }
  50% { filter: brightness(1.10) saturate(1.10); box-shadow: 0 24px 58px rgba(42, 18, 70, .38); }
}

@keyframes jolfaAmazingPercentRuntime {
  0%, 42%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  7% { translate: 0 -2px; rotate: -7deg; scale: 1.08; }
  14% { translate: 0 -4px; rotate: 7deg; scale: 1.14; }
  22% { translate: 0 -1px; rotate: -4deg; scale: 1.08; }
  31% { translate: 0 0; rotate: 2deg; scale: 1.03; }
}

@keyframes jolfaAmazingSweepRuntime {
  0%, 7% { translate: -190% 0; opacity: 0; }
  16% { opacity: .16; }
  31% { translate: 760% 0; opacity: .72; }
  40%, 100% { translate: 760% 0; opacity: 0; }
}

body.home-page .market-amazing {
  animation: jolfaAmazingRuntimeBreath 4.8s ease-in-out infinite !important;
  animation-play-state: running !important;
}

body.home-page .market-amazing::before {
  animation: jolfaAmazingSweepRuntime 6.2s ease-in-out infinite !important;
  animation-play-state: running !important;
  will-change: translate, opacity !important;
}

body.home-page .market-amazing__percent {
  display: inline-grid !important;
  transform-origin: 50% 80% !important;
  animation: jolfaAmazingPercentRuntime 4.4s cubic-bezier(.36,.07,.19,.97) infinite !important;
  animation-play-state: running !important;
  will-change: translate, rotate, scale !important;
}

/* Intentional exception: these three business-critical cues remain animated even when
   the OS reports reduced motion. Motion is slow and bounded except for the refresh icon. */
@media (prefers-reduced-motion: reduce) {
  body.has-price-update-banner .jolfa-price-update-banner__inner > .fa-arrows-rotate,
  body.has-price-update-banner .jolfa-price-update-banner__inner > svg.fa-arrows-rotate,
  body.has-price-update-banner .jolfa-price-update-banner__inner > svg.svg-inline--fa.fa-arrows-rotate {
    animation: jolfaPriceBannerIconSpinForever 2.8s linear infinite !important;
    animation-play-state: running !important;
  }

  body.product-detail-page .commerce-low-stock-note.is-last-one [data-low-stock-count],
  body.product-detail-page .commerce-mobile-low-stock [data-mobile-low-stock-count],
  body.product-detail-page .commerce-mobile-pdp-buybar__stock-note [data-mobile-low-stock-count] {
    animation: jolfaLastStockBellRuntime 7.2s cubic-bezier(.36,.07,.19,.97) infinite !important;
    animation-play-state: running !important;
  }

  body.home-page .market-amazing__percent {
    animation: jolfaAmazingPercentRuntime 6.8s cubic-bezier(.36,.07,.19,.97) infinite !important;
    animation-play-state: running !important;
  }
}

/* Mobile scroll performance: keep the public header on one stable compositor layer.
   Avoid scroll-driven layout changes, large filter animations and backdrop blur. */
@media (max-width: 980px) {
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header,
  html[data-theme="light"] body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header,
  html[data-theme="dark"] body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: linear-gradient(135deg,#1b1224,#35164c 56%,#421b4d) !important;
    box-shadow: 0 4px 14px rgba(16,7,24,.18) !important;
    transition: none !important;
    will-change: auto !important;
  }

  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-common,
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-common {
    height: 120px !important;
    min-height: 120px !important;
    padding: 8px 0 !important;
    transition: none !important;
  }

  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-brand,
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-brand {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0,0,0) !important;
    transition: none !important;
    will-change: auto !important;
  }

  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-search,
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-search,
  body.public-nail-header.store-search-context:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-search.site-header__search {
    width: 100% !important;
    transform: translate3d(0,55px,0) !important;
    transition: none !important;
    will-change: auto !important;
  }

  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-global-search__field,
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-global-search__field {
    height: 48px !important;
    min-height: 48px !important;
    transition: none !important;
  }

  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-actions,
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-actions {
    transform: translate3d(6px,0,0) !important;
    transition: none !important;
    will-change: auto !important;
  }

  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .mobile-menu-button.jolfa-nail-menu,
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .mobile-menu-button.jolfa-nail-menu {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .site-brand img {
    filter: none !important;
  }

  /* Filter animations on fixed/large elements trigger expensive repaints while
     scrolling on mobile GPUs. Keep the visual styling, drop only the motion. */
  body.has-price-update-banner .jolfa-price-update-banner,
  html[data-theme="light"] body.has-price-update-banner .jolfa-price-update-banner,
  html[data-theme="dark"] body.has-price-update-banner .jolfa-price-update-banner,
  body.home-page .market-amazing,
  html[data-theme="light"] body.home-page .market-amazing,
  html[data-theme="dark"] body.home-page .market-amazing {
    animation: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  body.has-price-update-banner .jolfa-price-update-banner::before,
  body.has-price-update-banner .jolfa-price-update-banner::after,
  body.home-page .market-amazing::before,
  body.home-page .market-amazing::after,
  body.home-page .market-amazing__percent,
  body.home-page .market-amazing__countdown > span,
  body.has-price-update-banner .jolfa-price-update-banner__inner > .fa-arrows-rotate,
  body.has-price-update-banner .jolfa-price-update-banner__inner > svg.fa-arrows-rotate,
  body.has-price-update-banner .jolfa-price-update-banner__inner > svg.svg-inline--fa.fa-arrows-rotate {
    animation: none !important;
    will-change: auto !important;
  }
}

/* === 2026-09 deep theme-transition optimization ===
   One compositor-level transition replaces hundreds of component transitions. */
html.jolfa-theme-switching *,
html.jolfa-theme-switching *::before,
html.jolfa-theme-switching *::after{
  transition:none!important;
}
html.jolfa-theme-switching{
  view-transition-name:root;
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.34s;
  animation-timing-function:cubic-bezier(.2,.78,.2,1);
  mix-blend-mode:normal;
}
::view-transition-old(root){
  z-index:1;
  animation:none;
}
::view-transition-new(root){
  z-index:2;
  animation-name:jolfaThemeReveal;
}
@keyframes jolfaThemeReveal{
  from{clip-path:circle(0 at var(--jolfa-theme-x,50vw) var(--jolfa-theme-y,60px));opacity:.92}
  to{clip-path:circle(150vmax at var(--jolfa-theme-x,50vw) var(--jolfa-theme-y,60px));opacity:1}
}
.jolfa-theme-transition-overlay{
  position:fixed;
  z-index:2147483646;
  inset:0;
  pointer-events:none;
  background:var(--jolfa-theme-overlay,#0f0a18);
  clip-path:circle(0 at var(--jolfa-theme-x,50vw) var(--jolfa-theme-y,60px));
  will-change:clip-path,opacity;
  contain:strict;
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){animation-duration:.01ms!important}
}

/* === 2026-09 optimized compact-on-scroll mobile header ===
   The class only changes when crossing a hysteresis threshold in main.js.
   Expensive blur/filter work stays disabled while the search bar still moves
   into the logo row after scrolling, matching the original interaction. */
@media (max-width:980px){
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:linear-gradient(135deg,#1b1224,#35164c 56%,#421b4d)!important;
    box-shadow:0 4px 14px rgba(16,7,24,.18)!important;
    transition:none!important;
    will-change:auto!important;
    transform:translateZ(0);
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-common{
    height:120px!important;
    min-height:120px!important;
    padding:8px 0!important;
    transition:none!important;
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-common{
    height:64px!important;
    min-height:64px!important;
    padding:8px 0!important;
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-brand{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0) scale(1)!important;
    transition:opacity .16s ease,transform .18s cubic-bezier(.22,.75,.25,1)!important;
    will-change:opacity,transform!important;
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-brand{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(-10px,-7px,0) scale(.97)!important;
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-search,
  body.public-nail-header.store-search-context:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-search.site-header__search{
    width:100%!important;
    max-width:none!important;
    transform:translate3d(0,55px,0)!important;
    transition:transform .18s cubic-bezier(.22,.75,.25,1)!important;
    will-change:transform!important;
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-search,
  body.public-nail-header.store-search-context:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-search.site-header__search{
    width:calc(100% - 54px)!important;
    transform:translate3d(0,0,0)!important;
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-global-search__field{
    height:48px!important;
    min-height:48px!important;
    transition:none!important;
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-global-search__field{
    height:46px!important;
    min-height:46px!important;
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-actions,
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-actions{
    transform:translate3d(0,0,0)!important;
    transition:none!important;
    will-change:auto!important;
  }
}

/* === Lightweight storefront image loading indicator ===
   Images remain paintable underneath the overlay so this does not postpone LCP. */
.jolfa-image-shell{
  position:relative;
  isolation:isolate;
}
.jolfa-image-shell::before,
.jolfa-image-shell::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:1;
  transition:opacity .18s ease;
}
.jolfa-image-shell::before{
  z-index:20;
  inset:0;
  background:linear-gradient(110deg,
    color-mix(in srgb,var(--surface) 88%,transparent) 8%,
    color-mix(in srgb,var(--surface-soft) 96%,transparent) 28%,
    color-mix(in srgb,var(--surface) 88%,transparent) 48%);
}
.jolfa-image-shell::after{
  z-index:21;
  top:50%;
  left:50%;
  width:26px;
  height:26px;
  margin:-13px 0 0 -13px;
  border:3px solid color-mix(in srgb,var(--primary) 20%,transparent);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:jolfaImageSpinner .72s linear infinite;
}
.jolfa-image-shell.is-image-loaded::before,
.jolfa-image-shell.is-image-loaded::after{
  opacity:0;
  visibility:hidden;
}
@keyframes jolfaImageSpinner{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .jolfa-image-shell::after{animation:none}
}

/* Mobile/low-power theme fallback is an opacity-only compositor veil. */
.jolfa-theme-transition-overlay{
  clip-path:none!important;
  opacity:0;
  transform:translateZ(0);
  will-change:opacity!important;
}

/* === 2026-09 mobile header reliability hotfix ===
   Keep cart + menu visible in compact header, render exactly one search icon,
   and keep the opened drawer above the fixed market-price banner. */
@media (max-width:980px){
  /* Two explicit action slots: cart + hamburger. */
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-actions,
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-actions{
    position:absolute!important;
    top:8px!important;
    right:0!important;
    left:auto!important;
    width:auto!important;
    min-width:100px!important;
    height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    transform:none!important;
    z-index:60!important;
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-actions > *{
    display:none!important;
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-actions > .jolfa-nail-cart,
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-actions > .jolfa-nail-menu{
    display:grid!important;
    flex:0 0 46px!important;
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .header-cart-button.jolfa-nail-cart{
    place-items:center!important;
    margin:0!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.10)!important;
    color:#fff!important;
    box-shadow:none!important;
    z-index:2!important;
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .header-cart-button.jolfa-nail-cart > i{
    display:block!important;
    color:#fff!important;
    font-size:16px!important;
    opacity:1!important;
  }
  /* Reserve enough room for both controls when the search moves into row one. */
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-brand{
    max-width:calc(100% - 112px)!important;
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-search,
  body.public-nail-header.store-search-context:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-search.site-header__search,
  body.store-compact-mobile-header.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-search.site-header__search,
  body.store-compact-mobile-header.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-search.site-header__search{
    width:calc(100% - 112px)!important;
    max-width:calc(100% - 112px)!important;
    left:0!important;
    right:auto!important;
    transform:translate3d(0,0,0)!important;
  }

  /* Prevent a Font Awesome/native icon double-render: hide the glyph node and
     draw one compositor-cheap SVG magnifier on the field itself. */
  body.public-nail-header .site-header.jolfa-nail-header .jolfa-global-search__icon{
    display:none!important;
  }
  body.public-nail-header .site-header.jolfa-nail-header .jolfa-global-search__field::after{
    content:""!important;
    position:absolute!important;
    top:50%!important;
    left:15px!important;
    right:auto!important;
    width:19px!important;
    height:19px!important;
    transform:translateY(-50%)!important;
    background:center/19px 19px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f2877' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.2 4.2'/%3E%3C/svg%3E")!important;
    pointer-events:none!important;
    z-index:3!important;
  }
  html[dir="rtl"] body.public-nail-header .site-header.jolfa-nail-header .jolfa-global-search__field::after{
    right:15px!important;
    left:auto!important;
  }

  /* Drawer/overlay must sit above the fixed price-update banner (z-index 5000). */
  body.public-nail-header .mobile-menu-overlay{
    z-index:9000!important;
  }
  body.public-nail-header .mobile-drawer,
  html[dir="rtl"] body.public-nail-header .mobile-drawer,
  html[dir="ltr"] body.public-nail-header .mobile-drawer{
    z-index:9010!important;
  }
  body.public-nail-header .mobile-drawer__head,
  body.public-nail-header .mobile-menu-close{
    position:relative!important;
    z-index:9020!important;
  }
  body.public-nail-header.menu-open .jolfa-price-update-banner{
    z-index:4900!important;
  }
}

@media (max-width:380px){
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-actions,
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-actions{
    min-width:92px!important;
    gap:6px!important;
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-actions > .jolfa-nail-cart,
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header .jolfa-nail-actions > .jolfa-nail-menu{
    flex-basis:43px!important;
    width:43px!important;
    min-width:43px!important;
  }
  body.public-nail-header:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-search,
  body.public-nail-header.store-search-context:not(.panel-nail-context) .site-header.jolfa-nail-header.is-scrolled .jolfa-nail-search.site-header__search{
    width:calc(100% - 102px)!important;
    max-width:calc(100% - 102px)!important;
  }
}


/* Product detail fulfillment cues: small, bounded motion that does not shift layout. */
body.product-detail-page .commerce-brand--logo-only {
  gap: 0 !important;
  min-width: 31px;
  justify-content: center;
}

body.product-detail-page .commerce-brand--logo-only img {
  width: 31px !important;
  height: 31px !important;
  flex-basis: 31px !important;
  padding: 3px !important;
}

body.product-detail-page .commerce-delivery-line__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 13px;
  background: var(--surface-tint);
  color: var(--primary);
}

body.product-detail-page .commerce-delivery-line__icon > i {
  display: inline-block;
  transform-origin: 50% 75%;
}

@keyframes jolfaDeliveryTruckWrap {
  from { transform: translate(-50%, -50%) translateX(0); }
  to { transform: translate(-50%, -50%) translateX(42px); }
}

@keyframes jolfaDeliveryDayPop {
  0%, 68%, 100% { translate: 0 0; scale: 1; }
  74% { translate: 0 -3px; scale: 1.12; }
  81% { translate: 0 1px; scale: .98; }
  88% { translate: 0 -1px; scale: 1.05; }
  94% { translate: 0 0; scale: 1; }
}

body.product-detail-page .commerce-delivery-truck-loop {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

body.product-detail-page .commerce-delivery-truck {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, -50%);
  animation: jolfaDeliveryTruckWrap 1.65s linear infinite !important;
  will-change: transform;
}

body.product-detail-page .commerce-delivery-truck--b {
  margin-left: -42px;
}

body.product-detail-page .commerce-delivery-truck > i,
body.product-detail-page .commerce-delivery-truck > svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body.product-detail-page .commerce-delivery-days {
  display: inline-block;
  min-width: 1ch;
  color: var(--primary);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  transform-origin: 50% 100%;
  animation: jolfaDeliveryDayPop 3.4s ease-in-out infinite !important;
  will-change: translate, scale;
}

/* Every visible low-stock number gets a subtle pulse; the last unit keeps the stronger bell motion above. */
@keyframes jolfaLowStockCountPulseRuntime {
  0%, 72%, 100% { translate: 0 0; scale: 1; }
  80% { translate: 0 -2px; scale: 1.11; }
  90% { translate: 0 0; scale: 1.03; }
}

body.product-detail-page .commerce-low-stock-note:not(.is-last-one) [data-low-stock-count] {
  display: inline-block !important;
  animation: jolfaLowStockCountPulseRuntime 4.2s ease-in-out infinite !important;
  will-change: translate, scale !important;
}

@media (prefers-reduced-motion: reduce) {
  body.product-detail-page .commerce-delivery-truck {
    animation-duration: 3.2s !important;
  }
  body.product-detail-page .commerce-delivery-days,
  body.product-detail-page .commerce-low-stock-note:not(.is-last-one) [data-low-stock-count] {
    animation-duration: 6.2s !important;
  }
}


/* v13.12: mixed technical key-spec values keep Persian wording RTL/Vazirmatn while Latin tokens stay LTR. */
body.product-detail-page .commerce-key-specs > span{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}
body.product-detail-page .commerce-key-specs .commerce-key-specs__value {
  direction: rtl !important;
  unicode-bidi: isolate !important;
  display: block !important;
  text-align: right !important;
  line-height: 1.85 !important;
  font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif !important;
  font-variant-numeric: normal !important;
  letter-spacing: 0 !important;
}
body.product-detail-page .commerce-key-specs .commerce-key-specs__value > .commerce-key-specs__latin,
body.product-detail-page .commerce-key-specs .commerce-key-specs__value > .commerce-key-specs__fa {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
}
body.product-detail-page .commerce-key-specs .commerce-key-specs__latin {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important;
  letter-spacing: .005em !important;
}
body.product-detail-page .commerce-key-specs .commerce-key-specs__fa {
  direction: rtl !important;
  unicode-bidi: isolate !important;
  font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif !important;
  font-variant-numeric: normal !important;
  letter-spacing: 0 !important;
}
