/* JBA v16.20.68 — listing card desktop/mobile polish + modern services panel */

/* --------------------------------------------------
   1) Listing cards: make the responsive owner load safely on direct category pages
   and keep price inside the card on desktop.
-------------------------------------------------- */
html body #content-page.jba-v1670-shop-listing .whole-jewels.jba-v16202-home-card-grid{
  display:grid!important;
  grid-auto-rows:auto!important;
  align-items:stretch!important;
  gap:16px!important;
}

html body #content-page.jba-v1670-shop-listing .whole-jewels.jba-v16202-home-card-grid > article.jba-one-product-card,
html body #content-page.jba-v1670-shop-listing .whole-jewels.jba-v16202-home-card-grid > article.jba-one-product-card.jba-v1670-product-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto 46px 34px auto!important;
  grid-template-areas:
    "image"
    "title"
    "code"
    "price"!important;
  align-content:start!important;
  row-gap:10px!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:370px!important;
  max-height:none!important;
  padding:12px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

html body #content-page.jba-v1670-shop-listing .jba-v16202-home-card-grid .jba-one-product-card .jba-tpd-luxe__thumb{
  grid-area:image!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  aspect-ratio:1/1!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:12px!important;
  background:#fff!important;
}

html body #content-page.jba-v1670-shop-listing .jba-v16202-home-card-grid .jba-one-product-card .jba-tpd-luxe__thumb picture,
html body #content-page.jba-v1670-shop-listing .jba-v16202-home-card-grid .jba-one-product-card .jba-tpd-luxe__thumb .jba-optimized-picture{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
}

html body #content-page.jba-v1670-shop-listing .jba-v16202-home-card-grid .jba-one-product-card .jba-tpd-luxe__thumb img:not(.deluxe-javaherat):not(.haraj-javaherat){
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}

html body #content-page.jba-v1670-shop-listing .jba-v16202-home-card-grid .jba-one-product-card .jba-tpd-luxe__name{
  grid-area:title!important;
  display:-webkit-box!important;
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  margin:0!important;
  padding:6px 3px 0!important;
  overflow:hidden!important;
  color:#0f2740!important;
  font-size:12px!important;
  line-height:20px!important;
  text-overflow:ellipsis!important;
  overflow-wrap:anywhere!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  text-align:center!important;
}

html body #content-page.jba-v1670-shop-listing .jba-v16202-home-card-grid .jba-one-product-card .jba-tpd-luxe__code{
  grid-area:code!important;
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important;
  margin:0!important;
  padding:7px 50px 7px 8px!important;
}

html body #content-page.jba-v1670-shop-listing .jba-v16202-home-card-grid .jba-one-product-card .jba-tpd-luxe__prices{
  grid-area:price!important;
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:"old old" "current badge"!important;
  grid-template-rows:minmax(14px,auto) minmax(28px,auto)!important;
  align-items:end!important;
  justify-items:stretch!important;
  width:100%!important;
  min-width:0!important;
  min-height:50px!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

html body #content-page.jba-v1670-shop-listing .jba-v16202-home-card-grid .jba-one-product-card .jba-tpd-luxe__prices > b{
  font-size:18px!important;
  line-height:1.35!important;
  white-space:nowrap!important;
}

html body #content-page.jba-v1670-shop-listing .jba-v16202-home-card-grid .jba-one-product-card .jba-tpd-luxe__prices del{
  white-space:nowrap!important;
}

@media (min-width:1200px){
  html body #content-page.jba-v1670-shop-listing .whole-jewels.jba-v16202-home-card-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}
@media (min-width:900px) and (max-width:1199px){
  html body #content-page.jba-v1670-shop-listing .whole-jewels.jba-v16202-home-card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media (min-width:640px) and (max-width:899px){
  html body #content-page.jba-v1670-shop-listing .whole-jewels.jba-v16202-home-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width:639px){
  html body #content-page.jba-v1670-shop-listing .whole-jewels.jba-v16202-home-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  html body #content-page.jba-v1670-shop-listing .whole-jewels.jba-v16202-home-card-grid > article.jba-one-product-card,
  html body #content-page.jba-v1670-shop-listing .whole-jewels.jba-v16202-home-card-grid > article.jba-one-product-card.jba-v1670-product-card{
    grid-template-rows:auto 44px 32px auto!important;
    row-gap:7px!important;
    min-height:0!important;
    padding:8px!important;
  }
  html body #content-page.jba-v1670-shop-listing .jba-v16202-home-card-grid .jba-one-product-card .jba-tpd-luxe__thumb{
    border-radius:10px!important;
  }
  html body #content-page.jba-v1670-shop-listing .jba-v16202-home-card-grid .jba-one-product-card .jba-tpd-luxe__name{
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    padding:8px 2px 0!important;
    line-height:18px!important;
    font-size:11px!important;
  }
  html body #content-page.jba-v1670-shop-listing .jba-v16202-home-card-grid .jba-one-product-card .jba-tpd-luxe__code{
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    padding:6px 44px 6px 7px!important;
  }
  html body #content-page.jba-v1670-shop-listing .jba-v16202-home-card-grid .jba-one-product-card .jba-tpd-luxe__prices{
    min-height:44px!important;
    margin-top:-2px!important;
  }
  html body #content-page.jba-v1670-shop-listing .jba-v16202-home-card-grid .jba-one-product-card .jba-tpd-luxe__prices > b{
    font-size:15px!important;
  }
}

/* --------------------------------------------------
   2) Product page process tab: keep cards right-aligned and visually tidy.
-------------------------------------------------- */
.jba-v162067-info-tabs>.tabcontent,
.jba-v162067-process-grid,
.jba-v162067-process-card,
.jba-v162067-process-card > div,
.jba-v162067-process-card h3,
.jba-v162067-process-card p,
.jba-v162067-process-note{
  direction:rtl!important;
  text-align:right!important;
}

.jba-v162067-process-grid{gap:16px!important}

.jba-v162067-process-card{
  grid-template-columns:minmax(0,1fr) 46px!important;
  align-items:start!important;
}

.jba-v162067-process-number{
  grid-column:2!important;
}

.jba-v162067-process-card > div{
  grid-column:1!important;
}

.jba-v162067-process-note{
  justify-content:space-between!important;
}

@media (max-width:680px){
  .jba-v162067-process-card{
    grid-template-columns:minmax(0,1fr) 40px!important;
  }
}

/* --------------------------------------------------
   3) Services panel: redesign legacy table into a modern card grid.
-------------------------------------------------- */
.jba-v162068-services-panel .panel-heading .title,
.jba-v162068-services-panel .panel-heading .title-back{
  overflow:visible!important;
}

.jba-v162068-services-body{
  padding:18px 0 4px!important;
}

.jba-v162068-services-grid{
  list-style:none!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  margin:0!important;
  padding:0!important;
}

.jba-v162068-services-grid > .jba-v162068-service-item{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  min-height:128px!important;
  margin:0!important;
  padding:18px 18px 18px 74px!important;
  border:1px solid #e4eaf0!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#ffffff,#f8fbfe)!important;
  box-shadow:0 10px 28px rgba(8,47,73,.06)!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
  box-sizing:border-box!important;
}

.jba-v162068-services-grid > .jba-v162068-service-item:hover{
  transform:translateY(-2px)!important;
  border-color:#d7e0ea!important;
  box-shadow:0 14px 34px rgba(8,47,73,.09)!important;
}

.jba-v162068-services-grid > .jba-v162068-service-item > p{
  margin:0!important;
}

.jba-v162068-services-grid > .jba-v162068-service-item > p:first-child{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#102f4a!important;
  font-size:15px!important;
  font-weight:900!important;
  line-height:1.8!important;
}

.jba-v162068-services-grid > .jba-v162068-service-item > p:first-child i{
  position:absolute!important;
  top:18px!important;
  right:18px!important;
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  border:1px solid rgba(198,150,58,.28)!important;
  border-radius:14px!important;
  background:#fff7e6!important;
  color:#b57a10!important;
  font-size:20px!important;
}

.jba-v162068-services-grid > .jba-v162068-service-item > p:last-child,
.jba-v162068-services-grid > .jba-v162068-service-item > p:last-child a{
  color:#5f7184!important;
  font-size:12px!important;
  line-height:2.05!important;
  text-decoration:none!important;
}

.jba-v162068-services-grid > .jba-v162068-service-item > p:last-child a:hover{
  color:#0b6ea8!important;
}

@media (max-width:820px){
  .jba-v162068-services-grid{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:680px){
  .jba-v162068-services-body{padding:12px 0 0!important}
  .jba-v162068-services-grid{gap:10px!important}
  .jba-v162068-services-grid > .jba-v162068-service-item{
    min-height:0!important;
    padding:14px 14px 14px 62px!important;
    border-radius:15px!important;
  }
  .jba-v162068-services-grid > .jba-v162068-service-item > p:first-child{
    font-size:13px!important;
  }
  .jba-v162068-services-grid > .jba-v162068-service-item > p:first-child i{
    top:14px!important;
    right:14px!important;
    width:36px!important;
    height:36px!important;
    border-radius:12px!important;
    font-size:17px!important;
  }
  .jba-v162068-services-grid > .jba-v162068-service-item > p:last-child,
  .jba-v162068-services-grid > .jba-v162068-service-item > p:last-child a{
    font-size:11px!important;
    line-height:1.95!important;
  }
}