/**
 * Deccan Trendz — product cards, catalogue grids, single product, search.
 * Loaded site-wide (cards appear on the homepage too).
 */

/* =============================================================
   Decorative swatch (stands in for photography until real
   product imagery is uploaded — one per category, on-brand).
   ========================================================== */
.dt-swatch {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--dt-graphite);
	color: rgba(246, 241, 231, 0.14);
}
.dt-swatch::before {
	content: "";
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(60% 60% at 30% 20%, rgba(201, 168, 106, 0.28), transparent 60%),
		radial-gradient(80% 80% at 80% 90%, rgba(201, 168, 106, 0.10), transparent 55%);
}
.dt-swatch::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(246, 241, 231, 0.05) 1px, transparent 1px);
	background-size: 5px 5px;
}
.dt-card__monogram {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(64px, 30%, 110px);
	aspect-ratio: 1;
	font-family: var(--dt-font-display);
	font-size: clamp(1.75rem, 5vw, 3rem);
	font-style: italic;
	color: rgba(246, 241, 231, 0.5);
	border: 1px solid rgba(201, 168, 106, 0.35);
	border-radius: 50%;
}
.dt-swatch--gents-watches { background: linear-gradient(155deg, #1a1a1d, #0b0b0c); }
.dt-swatch--ladies-watches { background: linear-gradient(155deg, #241c22, #100c0f); }
.dt-swatch--couple-watches { background: linear-gradient(155deg, #1f1d24, #0c0b0f); }
.dt-swatch--ladies-handbags { background: linear-gradient(155deg, #251e18, #100c09); }
.dt-swatch--gents-wallets { background: linear-gradient(155deg, #1e1a16, #0d0b09); }
.dt-swatch--perfumes { background: linear-gradient(155deg, #201d16, #0e0c09); }
.dt-swatch--caps { background: linear-gradient(155deg, #17191b, #0a0b0c); }
.dt-swatch--accessories { background: linear-gradient(155deg, #1c1a19, #0b0a0a); }

/* =============================================================
   Product card
   ========================================================== */
.dt-products-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 1.75rem);
}
.dt-products-row--3 { grid-template-columns: repeat(3, 1fr); }

.dt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	transform-style: preserve-3d;
	transition: transform var(--dt-dur-base) var(--dt-ease);
}
.dt-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--dt-radius-md);
	background: var(--dt-graphite);
}
.dt-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px var(--dt-line);
	background: linear-gradient(180deg, transparent 62%, rgba(5,5,5,0.5) 100%);
	pointer-events: none;
	z-index: 1;
}
.dt-card__media img,
.dt-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dt-dur-slow) var(--dt-ease), filter var(--dt-dur-slow) var(--dt-ease);
}
/* <picture> wrapper (theme showcase fallback) must fill the 4:5 media box so
   object-fit crops square/portrait sources instead of letterboxing. */
.dt-card__media .dt-picture { display: block; position: absolute; inset: 0; }
.dt-card__placeholder { position: absolute; inset: 0; }

.dt-card__badge {
	position: absolute;
	z-index: 2;
	top: var(--dt-space-xs);
	left: var(--dt-space-xs);
	padding: 0.4em 0.85em;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: var(--dt-tracking-button);
	text-transform: uppercase;
	color: var(--dt-black);
	background: var(--dt-champagne);
	border-radius: 999px;
}
.dt-card__badge--muted { background: rgba(246, 241, 231, 0.72); }

.dt-card__sheen {
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(246, 241, 231, 0.16) 48%, transparent 62%);
	transform: translateX(-120%);
	transition: transform var(--dt-dur-slow) var(--dt-ease);
	pointer-events: none;
}
.dt-card:hover .dt-card__sheen { transform: translateX(120%); }
.dt-card:hover .dt-card__media img { transform: scale(1.06); }

.dt-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding-top: var(--dt-space-md);
}
.dt-card__eyebrow {
	font-size: 0.64rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--dt-text-muted);
}
.dt-card__title {
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.005em;
}
.dt-card__title a::after { content: ""; position: absolute; inset: 0; }
.dt-card__price {
	font-family: var(--dt-font-body);
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	color: var(--dt-text);
	margin-top: 0.15rem;
}
.dt-card__price del { color: var(--dt-text-muted); margin-right: 0.4em; }
.dt-card__price ins { text-decoration: none; color: var(--dt-champagne-bright); }

.dt-card__cta {
	position: relative;
	z-index: 1;
	margin-top: var(--dt-space-2xs);
	align-self: flex-start;
}

/* =============================================================
   Catalogue / archive
   ========================================================== */
.dt-shop {
	padding-top: calc(var(--dt-header-h) + var(--dt-space-2xl));
	padding-bottom: var(--dt-space-3xl);
}
.dt-shop__header { margin-bottom: var(--dt-space-2xl); }
.dt-shop__title { font-size: var(--dt-fs-h1); line-height: 1; }
.dt-shop__count { color: var(--dt-text-muted); margin-top: var(--dt-space-sm); }
.dt-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dt-space-sm);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--dt-space-xl);
	padding-bottom: var(--dt-space-md);
	border-bottom: 1px solid var(--dt-line);
}
.dt-shop__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dt-chip {
	padding: 0.5em 1em;
	font-size: 0.75rem;
	letter-spacing: var(--dt-tracking-wide);
	text-transform: uppercase;
	color: var(--dt-text-muted);
	border: 1px solid var(--dt-line-strong);
	border-radius: 999px;
	transition: color var(--dt-dur-fast) var(--dt-ease), border-color var(--dt-dur-fast) var(--dt-ease), background var(--dt-dur-fast) var(--dt-ease);
}
.dt-chip:hover, .dt-chip[aria-current="true"] {
	color: var(--dt-black);
	background: var(--dt-champagne);
	border-color: var(--dt-champagne);
}
.dt-shop__ordering select {
	padding: 0.6em 2.2em 0.6em 1em;
	background: transparent;
	color: var(--dt-text);
	border: 1px solid var(--dt-line-strong);
	border-radius: var(--dt-radius-sm);
}

.dt-shop .dt-products-row,
ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.products li.product { margin: 0; }

.dt-pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--dt-space-2xl);
}
.dt-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.5em;
	border: 1px solid var(--dt-line-strong);
	border-radius: var(--dt-radius-sm);
	color: var(--dt-text-muted);
}
.dt-pagination .page-numbers.current { color: var(--dt-black); background: var(--dt-champagne); border-color: var(--dt-champagne); }

/* =============================================================
   Single product
   ========================================================== */
.dt-product {
	padding-top: calc(var(--dt-header-h) + var(--dt-space-2xl));
	padding-bottom: var(--dt-space-3xl);
}
.dt-product__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.dt-product__crumbs { margin-bottom: var(--dt-space-md); font-size: 0.78rem; color: var(--dt-text-muted); }
.dt-product__crumbs a:hover { color: var(--dt-text); }

.dt-product .dt-gallery { position: sticky; top: calc(var(--dt-header-h) + var(--dt-space-md)); }
.dt-gallery__main {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--dt-radius-md);
	background: var(--dt-graphite);
	box-shadow: inset 0 0 0 1px var(--dt-line);
}
.dt-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.dt-gallery__thumbs { display: flex; gap: 0.6rem; margin-top: 0.6rem; }
.dt-gallery__thumb {
	width: 72px;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--dt-radius-sm);
	border: 1px solid var(--dt-line);
	opacity: 0.6;
	transition: opacity var(--dt-dur-fast) var(--dt-ease), border-color var(--dt-dur-fast) var(--dt-ease);
}
.dt-gallery__thumb.is-active, .dt-gallery__thumb:hover { opacity: 1; border-color: var(--dt-champagne); }
.dt-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.dt-product__eyebrow { color: var(--dt-champagne); font-size: 0.72rem; letter-spacing: var(--dt-tracking-eyebrow); text-transform: uppercase; }
.dt-product__title { font-size: var(--dt-fs-h2); font-weight: 400; line-height: 1.06; letter-spacing: -0.012em; margin: var(--dt-space-sm) 0 var(--dt-space-sm); text-wrap: balance; }
.dt-product__price { font-family: var(--dt-font-display); font-size: 1.9rem; color: var(--dt-champagne-bright); margin-bottom: var(--dt-space-md); }
.dt-product__price del { color: var(--dt-text-muted); font-size: 1.2rem; margin-right: 0.5em; }
.dt-product__price ins { text-decoration: none; }
.dt-product__excerpt { color: var(--dt-text-muted); margin-bottom: var(--dt-space-lg); max-width: 46ch; }

.dt-product__form { display: flex; flex-direction: column; gap: var(--dt-space-md); }
.dt-product__variations { display: flex; flex-direction: column; gap: var(--dt-space-sm); }
.dt-field { display: flex; flex-direction: column; gap: 0.4rem; }
.dt-field__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--dt-tracking-wide); color: var(--dt-text-muted); }
.dt-field select {
	padding: 0.9em 2.4em 0.9em 1em;
	background: var(--dt-bg-alt);
	color: var(--dt-text);
	border: 1px solid var(--dt-line-strong);
	border-radius: var(--dt-radius-sm);
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--dt-champagne) 50%), linear-gradient(135deg, var(--dt-champagne) 50%, transparent 50%);
	background-position: calc(100% - 1.1em) center, calc(100% - 0.75em) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.dt-product__buy { display: flex; gap: var(--dt-space-sm); align-items: stretch; flex-wrap: wrap; }
.dt-product__stock { color: var(--dt-champagne-bright); font-size: 0.85rem; min-height: 1em; }
.dt-product__meta { margin-top: var(--dt-space-lg); padding-top: var(--dt-space-md); border-top: 1px solid var(--dt-line); font-size: 0.82rem; color: var(--dt-text-muted); display: flex; flex-direction: column; gap: 0.3rem; }
.dt-product__desc { margin-top: var(--dt-space-3xl); max-width: 70ch; }
.dt-product__desc h2 { font-size: var(--dt-fs-h3); margin-bottom: var(--dt-space-md); }
.dt-product__desc :is(p, ul, ol) { color: var(--dt-text-muted); margin-bottom: 1em; }

.dt-related { margin-top: var(--dt-space-3xl); }
.dt-related__title { font-size: var(--dt-fs-h3); margin-bottom: var(--dt-space-lg); }

/* =============================================================
   Search results
   ========================================================== */
.dt-search-results { padding-top: calc(var(--dt-header-h) + var(--dt-space-2xl)); padding-bottom: var(--dt-space-3xl); }
.dt-search-results__list { display: flex; flex-direction: column; gap: var(--dt-space-md); margin-top: var(--dt-space-xl); }
.dt-result { padding-bottom: var(--dt-space-md); border-bottom: 1px solid var(--dt-line); }
.dt-result__title { font-size: var(--dt-fs-h3); }
.dt-result__title a:hover { color: var(--dt-champagne); }
.dt-result__excerpt { color: var(--dt-text-muted); margin-top: 0.4rem; }

/* =============================================================
   Responsive
   ========================================================== */
@media (max-width: 1080px) {
	.dt-products-row, .dt-products-row--4 { grid-template-columns: repeat(3, 1fr); }
	.dt-shop .dt-products-row, ul.products { grid-template-columns: repeat(2, 1fr); }
	.dt-product__grid { grid-template-columns: 1fr; }
	.dt-product .dt-gallery { position: static; }
}
@media (max-width: 720px) {
	.dt-products-row, .dt-products-row--4, .dt-products-row--3 { grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 3vw, 1.1rem) clamp(0.75rem, 3vw, 1rem); }
	.dt-card__body { padding-top: var(--dt-space-sm); }
	.dt-card__title { font-size: 1.15rem; }
	.dt-card__cta { width: 100%; justify-content: center; }
	.dt-shop__title { font-size: clamp(2.5rem, 12vw, 3.5rem); }
}
@media (max-width: 360px) {
	.dt-products-row, .dt-products-row--4, .dt-products-row--3, .dt-shop .dt-products-row, ul.products { grid-template-columns: 1fr; }
}