/* Category navigation follows the desktop relationship: a visible root rail
   and the active department beside it, not an unlabelled horizontal carousel. */
@media (max-width:760px){
  body.headerless-categories-page .mobile-category-page{
    width:100%!important; max-width:100%!important; min-width:0!important;
    padding:12px 10px 92px!important; margin:0 auto!important; box-sizing:border-box!important;
  }
  body.headerless-categories-page .jolfa-category-page__hero{
    padding:14px 15px!important; margin:0 0 14px!important;
    border-radius:16px!important; min-width:0!important;
  }
  body.headerless-categories-page .jolfa-category-page__hero h1{
    font-size:clamp(1.02rem,3.8vw,1.3rem)!important;line-height:1.45!important;
  }
  body.headerless-categories-page .jolfa-category-page__hero p{font-size:.7rem!important;line-height:1.7!important}
  body.headerless-categories-page .mobile-category-browser{
    display:grid!important; grid-template-columns:100px minmax(0,1fr)!important;
    gap:10px!important; align-items:start!important; direction:rtl!important;
    width:100%!important; min-width:0!important;
  }
  body.headerless-categories-page .mobile-category-browser__rail{
    position:sticky!important; top:12px!important; align-self:start!important;
    display:flex!important; flex-direction:column!important; flex-wrap:nowrap!important;
    gap:5px!important; width:100%!important; min-width:0!important;
    margin:0!important; padding:5px!important;
    overflow:visible!important; border:0!important; border-radius:15px!important;
    background:color-mix(in srgb,var(--surface-soft) 82%,var(--surface))!important;
    box-shadow:none!important; box-sizing:border-box!important;
  }
  body.headerless-categories-page .mobile-category-root,
  body.headerless-categories-page .mobile-category-root.is-active{
    display:flex!important; flex:0 0 auto!important; flex-direction:column!important;
    justify-content:center!important; align-items:center!important;
    width:100%!important; min-height:76px!important;
    gap:6px!important; padding:8px 3px!important; margin:0!important;
    border:1px solid transparent!important; border-radius:12px!important;
    text-align:center!important; white-space:normal!important; box-shadow:none!important;
    transform:none!important; scroll-snap-align:none!important;
  }
  body.headerless-categories-page .mobile-category-root.is-active{
    background:color-mix(in srgb,var(--primary) 10%,var(--surface))!important;
    border-color:color-mix(in srgb,var(--primary) 20%,var(--surface))!important;
    color:var(--primary)!important;
  }
  body.headerless-categories-page .mobile-category-root__icon{
    width:35px!important;height:35px!important; flex:0 0 35px!important;
    font-size:.87rem!important; border-radius:10px!important;
  }
  body.headerless-categories-page .mobile-category-root__copy,
  body.headerless-categories-page .mobile-category-root__copy strong{
    display:block!important; width:100%!important; min-width:0!important;
    font-size:.68rem!important; line-height:1.5!important;
    white-space:normal!important; overflow-wrap:anywhere!important;
  }
  body.headerless-categories-page .mobile-category-browser__content{
    width:100%!important; min-width:0!important; overflow:visible!important;
  }
  body.headerless-categories-page .mobile-category-pane{
    min-width:0!important;width:100%!important;padding:0!important;
    border:0!important;border-radius:0!important;background:transparent!important;
    box-shadow:none!important;box-sizing:border-box!important;
  }
  body.headerless-categories-page .mobile-category-all{
    min-width:0!important;min-height:46px!important;
    margin:0 0 9px!important;padding:8px 11px!important;
    border-radius:12px!important;font-size:.7rem!important;
    overflow-wrap:anywhere!important;
  }
  body.headerless-categories-page .mobile-category-group{
    min-width:0!important; margin:0 0 9px!important;
    border-radius:13px!important;overflow:hidden!important;
    background:var(--surface)!important;
  }
  body.headerless-categories-page .mobile-category-group>summary{
    min-height:50px!important;gap:7px!important;padding:9px 10px!important;
    font-size:.75rem!important;line-height:1.5!important;
  }
  body.headerless-categories-page .mobile-category-group>summary>span{
    min-width:0!important;gap:7px!important;overflow-wrap:anywhere!important;
  }
  body.headerless-categories-page .mobile-category-group__body{
    min-width:0!important;padding:9px!important;box-sizing:border-box!important;
  }
  body.headerless-categories-page .mobile-category-branch-link{
    min-height:39px!important;margin:0 0 9px!important;padding:7px 9px!important;
    line-height:1.6!important;overflow-wrap:anywhere!important;font-size:.68rem!important;
  }
  body.headerless-categories-page .mobile-category-leaf-grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important; min-width:0!important;
  }
  body.headerless-categories-page .mobile-category-leaf-card{
    min-width:0!important;padding:9px!important;border-radius:11px!important;
    box-sizing:border-box!important;
  }
  body.headerless-categories-page .mobile-category-leaf-card__main{
    display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;
  }
  body.headerless-categories-page .mobile-category-leaf-card__icon{
    width:32px!important;height:32px!important;flex:0 0 32px!important;border-radius:9px!important;
  }
  body.headerless-categories-page .mobile-category-leaf-card__main strong{
    min-width:0!important;font-size:.72rem!important;line-height:1.6!important;
    overflow-wrap:anywhere!important;
  }
  body.headerless-categories-page .mobile-category-leaf-card__children{
    gap:5px!important;margin-top:7px!important;padding-top:7px!important;
  }
  body.headerless-categories-page .mobile-category-leaf-card__children a{
    font-size:.64rem!important;line-height:1.5!important;overflow-wrap:anywhere!important;
  }
}
@media (max-width:359px){
  body.headerless-categories-page .mobile-category-page{padding-inline:7px!important}
  body.headerless-categories-page .mobile-category-browser{
    grid-template-columns:79px minmax(0,1fr)!important;gap:7px!important;
  }
  body.headerless-categories-page .mobile-category-root{min-height:71px!important}
  body.headerless-categories-page .mobile-category-root__copy strong{font-size:.62rem!important}
  body.headerless-categories-page .mobile-category-group__body{padding:6px!important}
}

/* Mobile cart: content/media/controls must fit the *available* column width.
   Historic rules had a fixed price white-space and several incompatible grids. */
@media(max-width:900px){
  body.headerless-cart-page .commerce-cart-page--reference-redesign{
    width:calc(100% - 20px)!important;max-width:100%!important;min-width:0!important;
    margin-inline:auto!important;box-sizing:border-box!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-layout,
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-main,
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-items,
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-summary{
    width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-items{
    padding:10px!important;gap:9px!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item{
    direction:ltr!important;grid-template-columns:minmax(0,1fr) 106px!important;
    grid-template-areas:"content media" "side side"!important;
    gap:10px!important;padding:11px!important;min-width:0!important;
    width:100%!important;min-height:0!important;box-sizing:border-box!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__media{
    width:106px!important;height:106px!important;max-width:100%!important;
    padding:6px!important;align-self:start!important;justify-self:end!important;
    box-sizing:border-box!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__content,
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__content > *,
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__pricing,
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__meta{
    min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__content{
    direction:rtl!important;align-self:start!important;overflow-wrap:anywhere!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__content h2,
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__content h2 a,
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__meta > span,
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__title-en{
    white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__title-en{
    margin:4px 0 7px!important;unicode-bidi:plaintext!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__pricing{
    justify-items:start!important;text-align:start!important;
    gap:4px!important;direction:rtl!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__pricing>strong,
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__pricing del,
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__saving{
    display:block!important;max-width:100%!important;white-space:normal!important;
    overflow-wrap:anywhere!important;line-height:1.6!important;
    font-size:clamp(.72rem,2.9vw,.92rem)!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__side{
    width:100%!important;min-width:0!important;height:auto!important;align-self:stretch!important;
    justify-self:stretch!important;flex-direction:row!important;
    justify-content:flex-start!important;align-items:center!important;
    gap:10px!important;padding:2px 0 0!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-summary__breakdown > div{
    min-width:0!important;gap:10px!important;box-sizing:border-box!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-summary__breakdown dt,
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-summary__breakdown dd{
    min-width:0!important;max-width:100%!important;white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-summary__breakdown dd{
    text-align:end!important;line-height:1.7!important;flex:0 1 auto!important;
  }
}
@media(max-width:420px){
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item{
    grid-template-columns:minmax(0,1fr) 84px!important;gap:8px!important;padding:9px!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__media{
    width:84px!important;height:84px!important;padding:4px!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-items{padding:7px!important}
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__content h2{
    font-size:.76rem!important;line-height:1.6!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__meta>span{
    font-size:.62rem!important;line-height:1.5!important;
  }
}

/* Cart suggestions: no square wrapper and no edge gap; keep the title/link
   comfortably inset from the right, with the cards spanning the rail width. */
body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-recommendations{
  width:100%!important;min-width:0!important;max-width:100%!important;
  padding:0!important;margin:26px 0 14px!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;background:transparent!important;
  box-sizing:border-box!important;
}
body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-recommendations__head{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;
  gap:10px!important;margin:0 0 12px!important;padding-inline:clamp(10px,2vw,22px)!important;
  box-sizing:border-box!important;
}
body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-recommendations__head h2{
  margin:0!important;min-width:0!important;font-size:clamp(.9rem,2.6vw,1.2rem)!important;
}
body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-recommendations__head a{
  margin-inline-start:auto!important;min-width:0!important;font-size:.76rem!important;
  text-decoration:none!important;
}
body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-recommendations__rail{
  min-width:0!important;padding-inline:0!important;
}

/* Thumbnail rail: never overlap the main stage. Modest breathable separation
   on phone AND desktop, with a stable touch target and preserved carousel. */
body.product-detail-page .commerce-product-page--reference-redesign .commerce-product-gallery__navigation{
  position:relative!important;z-index:3!important;
  margin-top:12px!important;padding:6px 0 3px!important;
  background:#fff!important;box-sizing:border-box!important;clear:both!important;
}
body.product-detail-page .commerce-product-page--reference-redesign .commerce-product-thumbs{
  width:100%!important;max-width:100%!important;min-width:0!important;
  box-sizing:border-box!important;align-items:center!important;
  padding:10px 8px!important;gap:9px!important;
  overflow-x:auto!important;overflow-y:hidden!important;
  scrollbar-width:none!important;scroll-padding-inline:10px!important;
  background:#fff!important;
}
body.product-detail-page .commerce-product-page--reference-redesign .commerce-product-thumbs > button{
  margin-block:2px!important;box-sizing:border-box!important;
}
@media(max-width:980px){
  body.product-detail-page .commerce-product-page--reference-redesign .commerce-product-gallery__navigation{
    margin-top:14px!important;padding:4px 0 3px!important;
  }
  body.product-detail-page .commerce-product-page--reference-redesign .commerce-product-thumbs{
    padding:12px 10px!important;gap:9px!important;
  }
}

/* Tech specs: each tile owns its width; RTL icon/text layout never pushes
   the muted background over the viewport edge. */
body.product-detail-page .commerce-product-page--reference-redesign .commerce-product-info,
body.product-detail-page .commerce-product-page--reference-redesign .commerce-key-specs,
body.product-detail-page .commerce-product-page--reference-redesign .commerce-key-specs > span{
  box-sizing:border-box!important;min-width:0!important;max-width:100%!important;
}
body.product-detail-page .commerce-product-page--reference-redesign .commerce-key-specs{
  width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;grid-auto-flow:row!important;
}
body.product-detail-page .commerce-product-page--reference-redesign .commerce-key-specs > span{
  width:100%!important;min-width:0!important;max-width:100%!important;
  overflow:hidden!important;direction:rtl!important;
}
body.product-detail-page .commerce-product-page--reference-redesign .commerce-key-specs__copy,
body.product-detail-page .commerce-product-page--reference-redesign .commerce-key-specs__value,
body.product-detail-page .commerce-product-page--reference-redesign .commerce-key-specs strong,
body.product-detail-page .commerce-product-page--reference-redesign .commerce-key-specs small{
  min-width:0!important;max-width:100%!important;
  overflow-wrap:anywhere!important;word-break:normal!important;
  white-space:normal!important;
}
@media(max-width:820px){
  body.product-detail-page .commerce-product-page--reference-redesign .commerce-key-specs{
    grid-template-columns:minmax(0,1fr)!important;gap:9px!important;
  }
  body.product-detail-page .commerce-product-page--reference-redesign .commerce-key-specs > span{
    display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;
    grid-auto-flow:row!important;align-items:center!important;gap:10px!important;
    padding:10px 11px!important;min-height:67px!important;
  }
  body.product-detail-page .commerce-product-page--reference-redesign .commerce-key-specs__icon{
    width:42px!important;height:42px!important;min-width:0!important;
  }
}

/* Product recommendations: reserve top padding for hover translateY(-4px)
   so top border/shadow is not cut by the horizontal scroll container. */
body.product-detail-page .commerce-related-products__rail{
  padding-top:16px!important;padding-bottom:12px!important;
  padding-inline:4px!important;scroll-padding-inline:4px!important;
  box-sizing:border-box!important;
}
body.product-detail-page .commerce-related-card{
  margin:0!important;min-width:0!important;transform-origin:center center!important;
}
@media(hover:hover) and (pointer:fine){
  body.product-detail-page .commerce-related-card:hover{transform:translateY(-4px)!important}
}
@media(hover:none){
  body.product-detail-page .commerce-related-card:hover{transform:none!important}
}

/* Laptop-width cart regression: a legacy 3-column rule survives as an
   implicit zero-width third track between 901 and 1280px. Constrain it to
   exactly two declared tracks so the item title gets the available width. */
@media(min-width:901px) and (max-width:1280px){
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item{
    direction:ltr!important;display:grid!important;
    grid-template-columns:minmax(0,1fr) 142px!important;
    grid-template-areas:"content media" "side side"!important;
    gap:15px!important;min-width:0!important;box-sizing:border-box!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__media{
    width:140px!important;height:140px!important;justify-self:end!important;
    max-width:100%!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__content{
    direction:rtl!important;min-width:0!important;width:100%!important;
    max-width:100%!important;overflow-wrap:anywhere!important;box-sizing:border-box!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__pricing{
    min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
  }
  body.headerless-cart-page .commerce-cart-page--reference-redesign .jolfa-cart-item__pricing>strong{
    max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;
  }
}