/* ==========================================================================
   Certified Bling — product card (Phase 2, extends the Phase 1 base)
   Image, optional category/collection eyebrow, name, optional descriptor,
   Build Yours (the one real CTA) + a quiet Try-On hook. No static price
   anywhere on this card — every Certified Bling product is configured, so a
   card price would be fiction. Editorial merchandising, not a WooCommerce
   default tile: image fills the frame edge-to-edge, no boxed shadow, no
   border around the photo itself — only the optional badge chip and the
   Build Yours button carry any "shape" at all, and both stay restrained
   (hairline border, not a filled card background). Reusable wherever a
   product needs to render: homepage, collection pages, shop, related
   products, search.
   ========================================================================== */

.cb-card {
	display: flex;
	flex-direction: column;
}

.cb-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--cb-paper);
	margin-bottom: var(--cb-space-s);
}

/* ---- Badge — optional, one per card, top-left over the media. Status/
   merchandising chip (e.g. "New", "Limited"), not a price or a discount
   callout — this card never sells on price. Quiet glass chip, not a loud
   filled sticker. */
.cb-card__badge {
	position: absolute;
	top: var(--cb-space-xs);
	left: var(--cb-space-xs);
	z-index: 1;
	padding: 0.3rem 0.65rem;
	background: var(--glass-bg-strong);
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-2xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cb-white);
}
@media (prefers-reduced-transparency: reduce) {
	.cb-card__badge { background: var(--cb-ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---- Quick Try-On hook — a reserved slot, not a built feature yet (the
   real Try-On experience lives on the product page per the platform brief,
   "not a major standalone section"). Quiet icon chip, top-right, same
   glass language as the badge but visually secondary to it. Rendered only
   when a template explicitly opts a card into it (.cb-card__quick-tryon),
   never implied by default — most surfaces (search results, related-
   products rails) won't use it. */
.cb-card__quick-tryon {
	position: absolute;
	top: var(--cb-space-xs);
	right: var(--cb-space-xs);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: var(--glass-bg);
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	border: 1px solid var(--glass-border);
	border-radius: 50%;
	color: var(--cb-white);
	transition: background var(--cb-transition);
}
.cb-card__quick-tryon:hover { background: var(--glass-bg-strong); }
@media (prefers-reduced-transparency: reduce) {
	.cb-card__quick-tryon { background: var(--cb-ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.cb-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: opacity var(--cb-transition-slow), transform var(--cb-transition-slow);
}
/* Alternate-angle crossfade on hover — CSS only, no JS, used only when a
   second image is actually supplied (data-has-alt). No-op otherwise. */
.cb-card__media img.cb-card__img--alt {
	position: absolute; inset: 0; opacity: 0;
}
.cb-card[data-has-alt] .cb-card__media:hover img.cb-card__img--base { opacity: 0; }
.cb-card[data-has-alt] .cb-card__media:hover img.cb-card__img--alt { opacity: 1; }
@media (hover: none) {
	/* Touch devices: no hover state to crossfade into — keep the base image. */
	.cb-card[data-has-alt] .cb-card__media:hover img.cb-card__img--base { opacity: 1; }
	.cb-card[data-has-alt] .cb-card__media:hover img.cb-card__img--alt { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.cb-card__media img { transition: none; }
}

.cb-card__body { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }

/* ---- Category/collection eyebrow — optional, shown only "if useful" per
   the brief (a tightly-filtered single-category grid doesn't need to repeat
   its own category on every card; a mixed grid, e.g. the homepage, does). */
.cb-card__meta {
	display: flex;
	gap: 0.6em;
	margin-bottom: 0.1rem;
}
.cb-card__meta .cb-label { color: var(--cb-mute); }
.cb-section--light .cb-card__meta .cb-label { color: var(--cb-ink-mute); }

.cb-card__name { /* .cb-product-name from base.css */ }
.cb-card__descriptor {
	font-family: var(--cb-font-body);
	font-size: var(--cb-text-sm);
	color: var(--cb-mute);
	line-height: 1.4;
}
.cb-section--light .cb-card__descriptor { color: var(--cb-ink-mute); }

/* ---- Actions — Build Yours is the one real CTA (a proper small button,
   not a text link, so it doesn't read as equal-weight with a price that
   isn't there); Try It On (when present at all — product-page feature,
   rarely needed again at the card level) stays a quiet text link beside
   it, never competing for the same visual weight. */
.cb-card__actions {
	display: flex;
	align-items: center;
	gap: var(--cb-space-m);
	margin-top: 0.7rem;
	flex-wrap: wrap;
}
.cb-card__actions .cb-btn--text { font-size: var(--cb-text-2xs); letter-spacing: 0.1em; }

/* ---- Grid wrapper — used by every collection showcase on the homepage
   and archive pages. 4-up desktop, 2-up tablet, 2-up mobile per the brief. */
.cb-grid--products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--cb-grid-gap);
}
@media (max-width: 1023px) {
	.cb-grid--products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 429px) {
	.cb-grid--products { gap: clamp(0.5rem, 2vw, 0.9rem); }
}