/* HẠO NAM AI V2.0.8 — PRODUCT ROW FOUNDATION
   ProductRow owns its complete geometry. It does not inherit negative margins,
   outer paint clipping, hover borders, or layout movement from the legacy .row component. */

#quoteList,#searchList{
  min-width:0;
  overflow:visible;
  contain:layout style;
}

.product-row{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  gap:13px;
  align-items:center;
  width:100%;
  max-width:100%;
  margin:0;
  padding:12px 8px;
  border:0;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  content-visibility:auto;
  contain:layout paint style;
  contain-intrinsic-size:80px;
  touch-action:manipulation;
  background:transparent;
  box-shadow:none;
}

.product-row::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.105),inset 0 1px 0 rgba(255,255,255,.05);
  transition:opacity 110ms ease;
}

.product-row::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  height:1px;
  pointer-events:none;
  background:var(--line);
  opacity:1;
  transition:opacity 100ms ease;
}

.product-row>*{
  position:relative;
  z-index:1;
  min-width:0;
}

.product-row .ico{
  width:56px;
  height:56px;
  contain:layout paint;
}

.product-row .price{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  background:rgba(31,34,42,.76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.10);
}

@media(hover:hover) and (pointer:fine){
  .product-row,.product-row *{cursor:pointer}
  .product-row:hover::before{opacity:1}
  .product-row:hover::after{opacity:0}
  .product-row:active::before{
    opacity:1;
    background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.032));
    box-shadow:inset 0 0 0 1px rgba(120,190,255,.16),inset 0 1px 0 rgba(255,255,255,.065);
  }
}

@media(hover:none),(pointer:coarse){
  .product-row:active::before{
    opacity:1;
    background:rgba(255,255,255,.045);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .product-row:active::after{opacity:0}
}

@media(max-width:767px){
  .product-row{contain-intrinsic-size:76px}
  .product-row .price{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
}

@media(prefers-reduced-motion:reduce){
  .product-row::before,.product-row::after{transition:none}
}