/* FB CLONE V36 | Canonical product-row stylesheet. Only one file owns the catalog design. */
body.hm-body .hm-product-list{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:10px!important;
}
body.hm-body .hm-product-list > .hm-product-row{
  display:grid!important;
  grid-column:1/-1!important;
  grid-template-columns:minmax(0,1fr) clamp(300px,30%,385px)!important;
  align-items:stretch!important;
  gap:0!important;
  width:100%!important;
  min-height:102px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid #e1eaf7!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:0 5px 20px rgba(21,67,128,.065)!important;
  transition:border-color .18s,box-shadow .18s!important;
}
body.hm-body .hm-product-list > .hm-product-row:hover{
  background:#fff!important;
  border-color:#a6cbf9!important;
  box-shadow:0 8px 24px rgba(21,67,128,.11)!important;
}
body.hm-body .hm-product-row .hm-product-row-info{
  display:grid!important;
  grid-template-columns:70px minmax(150px,1fr) minmax(85px,96px) minmax(85px,96px)!important;
  align-items:center!important;
  justify-items:stretch!important;
  gap:11px!important;
  min-width:0!important;
  padding:11px 14px!important;
  position:static!important;
  background:#fff!important;
}
/* Remove legacy pseudo-icon so it cannot overlap the real icon cell. */
body.hm-body .hm-product-row .hm-product-row-info::before,
body.hm-body .hm-product-row .hm-product-row-info::after{content:none!important;display:none!important}
body.hm-body .hm-product-row .hm-v36-product-icon{
  width:70px!important;height:70px!important;min-width:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border-radius:14px!important;
  background:linear-gradient(150deg,#3caeff,#1078ec)!important;
  color:#fff!important;
  font-family:var(--hm-facebook-font)!important;
  font-size:61px!important;font-weight:900!important;line-height:1!important;
  text-shadow:none!important;overflow:hidden!important;
  box-shadow:0 5px 15px rgba(24,118,240,.16)!important;
}
body.hm-body .hm-product-row .hm-v36-primary{
  display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;
  gap:4px!important;min-width:0!important;margin:0!important;
}
body.hm-body .hm-product-row .hm-v36-primary h3,
body.hm-body .hm-product-row .hm-v36-primary h2,
body.hm-body .hm-product-row .hm-v36-primary h3 a,
body.hm-body .hm-product-row .hm-v36-primary h2 a{
  display:block!important;margin:0!important;padding:0!important;
  color:#143966!important;
  font-size:16px!important;font-weight:800!important;line-height:1.22!important;
  overflow-wrap:anywhere!important;letter-spacing:-.012em!important;
}
body.hm-body .hm-product-row .hm-v36-description{
  display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:normal!important;
  max-height:none!important;min-height:0!important;margin:0!important;padding:0!important;
  color:#65809f!important;font-size:11.5px!important;font-weight:400!important;line-height:1.35!important;
}
body.hm-body .hm-product-row .hm-v36-tags{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;
  gap:5px 9px!important;min-width:0!important;margin-top:2px!important;
}
body.hm-body .hm-product-row .hm-v36-tags > .hm-row-tag,
body.hm-body .hm-product-row .hm-v36-tags > .hm-row-category{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:23px!important;min-width:0!important;
  padding:4px 10px!important;margin:0!important;
  border:0!important;border-radius:999px!important;
  background:#1185f5!important;color:#fff!important;box-shadow:none!important;
  white-space:nowrap!important;font-size:11px!important;font-weight:700!important;line-height:1.15!important;
}
body.hm-body .hm-product-row .hm-v36-tags > .hm-v36-status,
body.hm-body .hm-product-row .hm-v36-tags > .hm-v36-status:hover{
  display:inline!important;flex:0 0 auto!important;
  padding:0!important;margin:0!important;min-height:0!important;
  border:0!important;border-radius:0!important;outline:0!important;
  box-shadow:none!important;background:transparent!important;background-image:none!important;
  color:#0b77ea!important;white-space:nowrap!important;
  font-size:12px!important;font-weight:800!important;line-height:1.2!important;
}
body.hm-body .hm-product-row .hm-v36-status::before,
body.hm-body .hm-product-row .hm-v36-status::after{content:none!important}
body.hm-body .hm-product-row .hm-v36-metric{
  display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;
  gap:5px!important;min-width:0!important;min-height:0!important;
  margin:0!important;padding:4px 0 4px 11px!important;
  border:0!important;border-left:1px solid #e8eff8!important;
  border-radius:0!important;box-shadow:none!important;background:#fff!important;
  color:#6c86a4!important;
}
body.hm-body .hm-product-row .hm-v36-metric-label{
  color:#6c86a4!important;font-size:11px!important;font-weight:650!important;line-height:1.15!important;
  white-space:nowrap!important;
}
body.hm-body .hm-product-row .hm-v36-metric-value{
  display:flex!important;align-items:center!important;gap:5px!important;min-height:19px!important;
  color:#1d436f!important;font-size:15px!important;font-weight:800!important;
}
body.hm-body .hm-product-row .hm-v36-metric-icon{
  display:flex!important;flex:0 0 19px!important;align-items:center!important;justify-content:center!important;
  width:19px!important;height:19px!important;color:#2365b3!important;
}
body.hm-body .hm-product-row .hm-v36-metric-icon svg{
  display:block!important;width:19px!important;height:19px!important;stroke:currentColor!important;
}
body.hm-body .hm-product-row .hm-v36-metric-value strong{
  display:inline!important;margin:0!important;font-size:15px!important;font-weight:800!important;color:#1d436f!important;
  line-height:1!important;white-space:nowrap!important;
}
body.hm-body .hm-product-row .hm-product-row-actions{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:center!important;
  gap:9px!important;min-width:0!important;margin:0!important;padding:12px 14px!important;
  background:#fff!important;border:0!important;border-left:1px solid #e8eff8!important;border-radius:0!important;
  box-shadow:none!important;
}
body.hm-body .hm-product-row .hm-product-row-actions .hm-row-price{
  display:block!important;min-height:0!important;width:100%!important;
  padding:0!important;margin:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;color:#096ee3!important;
  text-align:left!important;white-space:nowrap!important;
  font-size:19px!important;font-weight:850!important;line-height:1.05!important;
}
body.hm-body .hm-product-row .hm-v36-buttons{
  display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)!important;
  align-items:stretch!important;gap:6px!important;width:100%!important;min-width:0!important;
}
body.hm-body .hm-product-row .hm-v36-buttons > *{
  min-width:0!important;max-width:100%!important;width:100%!important;
  margin:0!important;padding:0!important;box-sizing:border-box!important;
}
body.hm-body .hm-product-row .hm-v36-buttons > a,
body.hm-body .hm-product-row .hm-v36-buttons > button,
body.hm-body .hm-product-row .hm-v36-buttons > form,
body.hm-body .hm-product-row .hm-v36-buttons > form > button,
body.hm-body .hm-product-row .hm-v36-buttons > form > a{
  display:flex!important;align-items:center!important;justify-content:center!important;
  min-height:36px!important;width:100%!important;min-width:0!important;
  padding:6px 7px!important;margin:0!important;
  border:1px solid #1085f4!important;border-radius:8px!important;
  background:#0b80ef!important;color:#fff!important;box-shadow:none!important;
  font-size:12px!important;font-weight:750!important;line-height:1.2!important;
  text-align:center!important;text-decoration:none!important;white-space:normal!important;
  cursor:pointer!important;
}
body.hm-body .hm-product-row .hm-v36-buttons > form{
  background:transparent!important;border:0!important;min-height:0!important;
}
body.hm-body .hm-product-row .hm-v36-buttons > :is(a,button):hover,
body.hm-body .hm-product-row .hm-v36-buttons > form > :is(a,button):hover{
  background:#076ed0!important;color:#fff!important;
}
body.hm-body .hm-product-row .hm-v36-buttons .hm-v36-unavailable,
body.hm-body .hm-product-row .hm-v36-buttons .hm-v36-unavailable:hover{
  background:#eaf3ff!important;border-color:#cfe3ff!important;color:#6590c6!important;
  cursor:not-allowed!important;box-shadow:none!important;
}
@media(max-width:1450px){
  body.hm-body .hm-product-row .hm-product-row-info{
    grid-template-columns:64px minmax(140px,1fr) minmax(76px,90px) minmax(76px,90px)!important;
    gap:9px!important;padding:10px 11px!important;
  }
  body.hm-body .hm-product-row .hm-v36-product-icon{width:64px!important;height:64px!important;font-size:55px!important;border-radius:13px!important}
  body.hm-body .hm-product-row .hm-v36-metric{padding-left:9px!important}
  body.hm-body .hm-product-list>.hm-product-row{grid-template-columns:minmax(0,1fr) 320px!important}
  body.hm-body .hm-product-row .hm-product-row-actions{padding:10px 12px!important}
  body.hm-body .hm-product-row .hm-v36-buttons{gap:5px!important}
  body.hm-body .hm-product-row .hm-v36-buttons > :is(a,button),
  body.hm-body .hm-product-row .hm-v36-buttons > form > :is(a,button){font-size:11px!important;padding:8px 7px!important}
}
@media(max-width:1200px){
  body.hm-body .hm-product-list>.hm-product-row{grid-template-columns:minmax(0,1fr)!important}
  body.hm-body .hm-product-row .hm-product-row-actions{
    flex-direction:row!important;align-items:center!important;justify-content:space-between!important;
    border-left:0!important;border-top:1px solid #e8eff8!important;
    gap:14px!important;padding:8px 12px!important;
  }
  body.hm-body .hm-product-row .hm-product-row-actions .hm-row-price{width:auto!important;flex:0 0 auto!important}
  body.hm-body .hm-product-row .hm-v36-buttons{width:auto!important;flex:1 1 auto!important;max-width:440px!important}
  body.hm-body .hm-product-row .hm-product-row-info{
    grid-template-columns:64px minmax(150px,1fr) minmax(80px,96px) minmax(80px,96px)!important;
  }
}
@media(max-width:800px){
  body.hm-body .hm-product-row .hm-product-row-info{
    grid-template-columns:58px minmax(0,1fr) minmax(68px,84px) minmax(68px,84px)!important;
    grid-template-areas:none!important;
    gap:8px!important;padding:9px 10px!important;
  }
  body.hm-body .hm-product-row .hm-v36-product-icon{grid-area:auto!important;width:58px!important;height:58px!important;font-size:50px!important;border-radius:12px!important}
  body.hm-body .hm-product-row .hm-v36-primary{grid-area:auto!important}
  body.hm-body .hm-product-row .hm-v36-stock,
  body.hm-body .hm-product-row .hm-v36-sold{grid-area:auto!important}
  body.hm-body .hm-product-row .hm-v36-metric{
    min-height:0!important;padding:3px 0 3px 8px!important;gap:4px!important;
    border-left:1px solid #e8eff8!important;border-top:0!important;
  }
  body.hm-body .hm-product-row .hm-v36-metric-value{gap:4px!important}
  body.hm-body .hm-product-row .hm-v36-metric-value strong{font-size:13px!important}
  body.hm-body .hm-product-row .hm-v36-metric-icon,
  body.hm-body .hm-product-row .hm-v36-metric-icon svg{width:16px!important;height:16px!important}
}
@media(max-width:600px){
  body.hm-body .hm-product-row .hm-product-row-info{
    grid-template-columns:54px minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-areas:'icon primary primary' 'stock stock sold'!important;
    row-gap:8px!important;
  }
  body.hm-body .hm-product-row .hm-v36-product-icon{grid-area:icon!important;width:54px!important;height:54px!important;font-size:47px!important}
  body.hm-body .hm-product-row .hm-v36-primary{grid-area:primary!important}
  body.hm-body .hm-product-row .hm-v36-stock{grid-area:stock!important}
  body.hm-body .hm-product-row .hm-v36-sold{grid-area:sold!important}
  body.hm-body .hm-product-row .hm-v36-metric{
    border-left:0!important;border-top:1px solid #e8eff8!important;
    flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;
    padding:6px 0 0!important;gap:6px!important;
  }
  body.hm-body .hm-product-row .hm-v36-metric-label{white-space:nowrap!important}
  body.hm-body .hm-product-row .hm-product-row-actions{
    flex-direction:column!important;align-items:stretch!important;gap:7px!important;
  }
  body.hm-body .hm-product-row .hm-product-row-actions .hm-row-price{width:100%!important}
  body.hm-body .hm-product-row .hm-v36-buttons{width:100%!important;max-width:none!important}
}
@media(max-width:410px){
  body.hm-body .hm-product-row .hm-product-row-info{
    grid-template-columns:48px minmax(0,1fr)!important;
    grid-template-areas:'icon primary' 'stock sold'!important;
    gap:8px!important;
  }
  body.hm-body .hm-product-row .hm-v36-product-icon{width:48px!important;height:48px!important;font-size:42px!important}
  body.hm-body .hm-product-row .hm-v36-primary h3{font-size:15px!important}
  body.hm-body .hm-product-row .hm-v36-buttons{gap:5px!important}
  body.hm-body .hm-product-row .hm-v36-buttons > :is(a,button),
  body.hm-body .hm-product-row .hm-v36-buttons > form > :is(a,button){font-size:10px!important;padding:6px 4px!important;min-height:36px!important}
}