/* ===========================
DBTech Shop – Category grid view
Scoped to shop pages only
=========================== */
body[data-template="dbtech_shop_category_view"],
body[data-template="dbtech_shop_overview"],
body[data-template="dbtech_shop"]
{
/* Grid container: spacing between cards */
.itemList-grid
{
display: flex;
flex-flow: row wrap;
gap: 16px; /* spacing between cards */
margin: 12px 0 20px;
justify-content: flex-start;
}
/* Card base */
.itemList-item-grid.node
{
position: relative;
display: flex;
flex-direction: column;
box-sizing: border-box;
/* KEY CHANGE:
- 4 cards still fit (basis 240px)
- but cards can grow to use extra space
*/
flex: 1 1 240px;
max-width: 262px; /* soft upper limit, can tweak or remove */
padding: 10px 10px 12px;
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, 0.9);
background:
radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.35), transparent 55%),
radial-gradient(circle at 100% 100%, rgba(250, 204, 21, 0.25), transparent 55%),
linear-gradient(135deg, #020617, #020617);
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.95),
0 14px 30px rgba(15, 23, 42, 0.95);
transition:
transform 0.18s ease-out,
box-shadow 0.18s ease-out,
border-color 0.18s ease-out,
background-position 0.18s ease-out;
overflow: hidden;
}
.itemList-item-grid.node:hover
{
transform: translateY(-4px);
border-color: rgba(34, 197, 94, 0.8);
box-shadow:
0 0 0 1px rgba(34, 197, 94, 0.6),
0 20px 40px rgba(15, 23, 42, 0.95);
}
/* Top overlay for inline mod checkbox */
.itemList-item-gridOverlayTop
{
top: 10px;
right: 10px;
}
/* Icon / thumbnail area */
.itemList-item-grid--icon
{
margin-bottom: 10px;
border-radius: 10px;
overflow: hidden;
background: radial-gradient(circle at 50% 0%, rgba(148, 163, 184, 0.35), transparent 60%);
}
.itemList-item-grid--icon img,
.itemList-item-grid--icon .avatar
{
width: 100%;
height: 160px;
object-fit: cover;
border-radius: inherit;
}
/* Title & tagline */
.itemList-item-grid .node-main
{
margin-bottom: 8px;
}
.itemList-item-grid .node-title a[data-shortcut="node-description"]
{
font-size: @xf-fontSizeLarger;
font-weight: 800;
color: @xf-textColorEmphasized;
}
.itemList-item-grid .node-description
{
margin-top: 3px;
font-size: @xf-fontSizeSmall;
color: @xf-textColorMuted;
}
/* Meta row under title (owner, filters) */
.itemList-item-grid .contentRow-minor--smaller
{
margin-top: 6px;
font-size: @xf-fontSizeSmallest;
color: @xf-textColorMuted;
}
/* Rating + price row */
.itemList-item-grid--priceRatingInfo
{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
margin-bottom: 8px;
}
.itemList-item-grid--priceRatingInfo .rating
{
font-size: @xf-fontSizeSmall;
opacity: .9;
}
.itemList-item-grid--priceRatingInfo .price .label
{
border-radius: 999px;
padding: 3px 9px;
font-size: @xf-fontSizeSmallest;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
background: linear-gradient(135deg, #22c55e, #a3e635, #facc15);
color: #022c22;
border: 1px solid rgba(248, 250, 252, 0.85);
box-shadow:
0 0 4px rgba(34, 197, 94, 0.75),
0 0 10px rgba(250, 204, 21, 0.65);
}
/* Buy button row */
.itemList-item-grid--buyButton
{
margin-bottom: 6px;
}
.itemList-item-grid--buyButton .button--cta
{
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.itemList-item-grid--buyButton .button--cta:not([disabled]):hover
{
box-shadow:
0 0 8px rgba(34, 197, 94, 0.8),
0 0 16px rgba(56, 189, 248, 0.6);
}
/* Stock & update info at the bottom */
.itemList-item-grid--updateInfo
{
margin-top: auto; /* push to bottom */
padding-top: 6px;
border-top: 1px solid rgba(15, 23, 42, 0.7);
font-size: @xf-fontSizeSmallest;
color: @xf-textColorMuted;
}
.itemList-item-grid--updateInfo .pairs > dt
{
color: @xf-textColorMuted;
}
/* Highlight very low stock */
.itemList-item-grid--updateInfo .pairs dd a
{
font-weight: 600;
}
.itemList-item-grid--updateInfo .pairs dd a[data-stock-low="1"]
{
color: #f97316;
}
}
