/* 10-trending — Home: trending products grid.
   Loaded on every page in file-name order (see inc/core/assets.php). */

/* =========================================================
   TRENDING PRODUCTS
   ========================================================= */

.trending-section{
  padding-top:70px;
  padding-bottom:70px;
}

.trending-section .section-head{
  margin-bottom:28px;
}

.trending-section .section-head h2{
  font-size:34px;
  margin-top:4px;
}

.trending-section .section-head p{
  margin-top:8px;
  color:var(--text-mut);
  font-size:14px;
}

/* 6 cards desktop */

.trending-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:22px;
}

.trending-card{
  display:block;
  text-decoration:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:
    transform .28s var(--ease),
    box-shadow .28s var(--ease),
    border-color .28s var(--ease);
}

.trending-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:var(--line-2);
}

.trending-img{
  width:100%;
  aspect-ratio:1 / 1;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.trending-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  padding:18px;
  transition:transform .35s var(--ease);
}

.trending-card:hover .trending-img img{
  transform:scale(1.06);
}

.trending-name{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px 8px 13px;
  background:var(--surface);
  color:var(--text);
  font-size:14px;
  line-height:1.25;
  font-weight:700;
}

/* Tablet */

@media(max-width:1100px){

  .trending-grid{
    grid-template-columns:repeat(4,1fr);
    gap:18px;
  }

}

/* Mobile */

@media(max-width:700px){

  .trending-section{
    padding-top:48px;
    padding-bottom:48px;
  }

  .trending-section .section-head h2{
    font-size:25px;
  }

  .trending-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

  .trending-card{
    border-radius:14px;
  }

  .trending-img{
    aspect-ratio:1 / 1;
  }

  .trending-img img{
    padding:12px;
  }

  .trending-name{
    min-height:52px;
    font-size:13px;
    padding:8px 6px 11px;
  }

}

/* Very small phones */

@media(max-width:400px){

  .trending-grid{
    gap:10px;
  }

  .trending-name{
    font-size:12.5px;
  }

}