/* ==========================================================================
   Product grid + cards (subtle border + shadow, rounded, whole card clickable)
   ========================================================================== */

.dc-grid {
	display: grid; gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0; padding: 0;
}
@media (min-width: 768px) { .dc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .dc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }

/* Grid used as a carousel track */
.dc-grid.dc-grid--rail {
	grid-template-columns: none; grid-auto-flow: column;
	grid-auto-columns: calc((100% - 12px) / 2.15);
}
@media (min-width: 768px) { .dc-grid.dc-grid--rail { grid-auto-columns: calc((100% - 2 * 18px) / 3.2); } }
@media (min-width: 1100px) { .dc-grid.dc-grid--rail { grid-auto-columns: calc((100% - 3 * 22px) / 4); } }

.dc-card {
	position: relative; display: flex; flex-direction: column;
	background: var(--white); border: var(--card-border); border-radius: var(--r-lg);
	box-shadow: var(--card-shadow); overflow: hidden;
	transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s;
}
.dc-card:hover { box-shadow: var(--card-shadow-hover); border-color: var(--g300); transform: translateY(-2px); }
.dc-card__link { display: flex; flex-direction: column; flex: 1; color: var(--ink); text-decoration: none; }
.dc-card__link:hover { text-decoration: none; color: var(--ink); }

.dc-card__media { position: relative; display: block; aspect-ratio: 1; background: var(--g50); overflow: hidden; }
.dc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s var(--ease), transform .6s var(--ease); }
.dc-card__img--hover { opacity: 0; }
@media (hover: hover) {
	.dc-card:hover .dc-card__img--hover { opacity: 1; }
	.dc-card:hover .dc-card__img:not(.dc-card__img--hover) { transform: scale(1.03); }
}
.dc-card__noimg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--g100), var(--g200)); }

.dc-card__body { display: grid; gap: 4px; padding: 12px 12px 14px; }
@media (min-width: 768px) { .dc-card__body { padding: 14px 16px 16px; } }
.dc-card__type { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g600); }
.dc-card__title {
	font-size: 14px; font-weight: 600; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 768px) { .dc-card__title { font-size: 15px; } }
.dc-card__model { font-size: 12px; color: var(--g600); }
.dc-card .dc-price { font-size: 15px; margin-top: 2px; }
.dc-card .dc-stars .dc-icon { width: 13px; height: 13px; }

.dc-card__atc { margin: 0 12px 14px; }
@media (min-width: 768px) { .dc-card__atc { margin: 0 16px 16px; } }

/* Card bottom: black with white text */
.dc-card { background: var(--black); border-color: #1d1d1d; }
.dc-card:hover { border-color: #3a3a3a; }
.dc-card__link, .dc-card__link:hover { color: var(--white); }
.dc-card__body { background: var(--black); color: var(--white); }
.dc-card__type { color: #bdbdbd; }
.dc-card__model { color: #cfcfcf; }
.dc-card .dc-price { color: var(--white); }
.dc-card .dc-price del { color: #9a9a9a; }
.dc-card .dc-price del + ins, .dc-card .dc-price del ~ ins { color: #ff6b6b; }
.dc-card .dc-price__from { color: #cfcfcf; }
.dc-card .dc-stars__bg { color: #4a4a4a; }
.dc-card .dc-stars__count { color: #bdbdbd; }
.dc-card .dc-btn--ghost { background: transparent; color: var(--white); border-color: var(--white); }

/* Images always square, whatever the screen size */
.dc-card__media, .dc-gallery__slide, .dc-gallery__thumb, .dc-tile__img, .dc-line__img, .dc-addon__img, .dc-upsell__img { aspect-ratio: 1 / 1; }
.dc-card__media img, .dc-gallery__slide img, .dc-gallery__thumb img, .dc-line__img img, .dc-addon__img img, .dc-upsell__img img { width: 100%; height: 100%; object-fit: cover; }