/* =============================================================================
 * zphcstore-v1 — SHARED PRODUCT CARD + CAROUSEL
 * ONE component. Used by the homepage carousels, the shop/category grids,
 * search results and related products. Later phases must reuse these classes
 * rather than forking them.
 *
 * Measured against the source (home-sections.txt + merged.css):
 *   row max-width 1112.5px · col padding 0 9.8px 19.6px
 *   image 259x259 @ 4-up, radius 7px
 *   .box-text min-height 150px, flex column, space-between, centered
 *   title Montserrat 14.4px / 23.04px · price 14.4px
 *   add-to-cart: 11.52px/700 uppercase, 2px solid #0072bc, radius 5px,
 *                padding 0 13.824px, margin-top 11.52px, line-height 25.23px
 * ========================================================================== */

/* --- Grid / carousel shell ------------------------------------------------ */
.zphc-products {
	max-width: var(--zphc-row-small);
	width: 100%;
	margin: 0 auto;
	position: relative;
}

.zphc-products__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 25%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.zphc-products__track::-webkit-scrollbar { display: none; }

.zphc-products__track > .zphc-card-product { scroll-snap-align: start; }

/* Static grid variant for archives / search (no carousel) */
.zphc-grid {
	display: grid;
	grid-template-columns: repeat(var(--zphc-cols, 4), minmax(0, 1fr));
	max-width: var(--zphc-row-small);
	width: 100%;
	margin: 0 auto;
}

@media (max-width: 849px) {
	.zphc-products__track { grid-auto-columns: 33.3333%; }
	.zphc-grid { grid-template-columns: repeat(var(--zphc-cols-md, 3), minmax(0, 1fr)); }
}

@media (max-width: 549px) {
	.zphc-products__track { grid-auto-columns: 50%; }
	.zphc-grid { grid-template-columns: repeat(var(--zphc-cols-sm, 2), minmax(0, 1fr)); }
}

/* --- Carousel arrows (source: flickity prev/next, revealed on hover) ------ */
.zphc-products__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 56px;
	border: 0;
	border-radius: 5px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
	color: var(--zphc-ink-strong);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .2s var(--zphc-ease);
	z-index: 3;
}

.zphc-products:hover .zphc-products__nav,
.zphc-products__nav:focus-visible { opacity: 1; }

.zphc-products__nav[disabled] { opacity: 0 !important; pointer-events: none; }
.zphc-products__nav svg { width: 14px; height: 14px; fill: currentColor; }
.zphc-products__nav--prev { left: -4px; }
.zphc-products__nav--next { right: -4px; }

@media (max-width: 849px) {
	.zphc-products__nav { opacity: .85; }
}

/* --- The card ------------------------------------------------------------- */
.zphc-card-product {
	position: relative;
	padding: 0 var(--zphc-gutter) var(--zphc-gutter-b);
	min-width: 0;
}

.zphc-card-product__inner {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Image */
.zphc-card-product__media {
	position: relative;
	display: block;
	min-height: 188px;
	border-radius: var(--zphc-r-img);
	overflow: hidden;
	background: #fff;
}

.zphc-card-product__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--zphc-r-img);
	margin: 0 auto;
}

.zphc-card-product__media .zphc-card-product__back {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .35s var(--zphc-ease);
}

@media (min-width: 550px) {
	.zphc-card-product__inner:hover .zphc-card-product__back { opacity: 1; }
}

@media (max-width: 549px) {
	.zphc-card-product__back { display: none; }
}

/* Text block */
.zphc-card-product__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 150px;
	padding-top: .7em;
	text-align: center;
}

.zphc-card-product__cat {
	font-size: 11.52px;
	line-height: 1.4;
	text-transform: uppercase;
	opacity: .7;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.zphc-card-product__title {
	font-family: var(--zphc-font-head);
	font-size: var(--zphc-fs-sm);
	font-weight: 400;
	line-height: 23.04px;
	margin: 1.44px 0;
}

/*
 * Title colour. The source carries NO colour declaration on `.product-title` at all
 * (verified in source-cdp/merged.css: the only `.product-title` rules are
 * `{font-size:.9em}` and the Montserrat family override). The card title is a plain
 * link, so it takes the base link colour:
 *     a       { color: var(--fs-experimental-link-color) }        #0072bc
 *     a:hover { color: var(--fs-experimental-link-color-hover) }  #111
 * Our `--zphc-link` / `--zphc-link-hover` in zphc-tokens.css ARE those two source
 * tokens, and style.css already applies them to `a` / `a:hover`. So this pair is a
 * restatement of the inherited value, not a second opinion about it — it exists only
 * so a later `.zphc-grid a` / `.zphc-loop-item a` rule on another surface can't
 * silently out-specify the global and drift the card.
 *
 * ⛔ Do NOT reach for --zphc-ink (#383838) or --zphc-ink-strong (#1c1c1c) here. The
 * first shipped as the default and the second is a near-miss for the source's #111;
 * both read "about right" by eye, which is how the inverted pair (ink default, blue
 * hover) survived a whole phase. measure_card_title_color.py asserts the exact rgb
 * on both surfaces and rejects #1c1c1c explicitly.
 */
.zphc-card-product__title a { color: var(--zphc-link); }
.zphc-card-product__title a:hover { color: var(--zphc-link-hover); }

.zphc-card-product__price {
	font-size: var(--zphc-fs-sm);
	line-height: 1;
	color: var(--zphc-ink);
	margin: 0;
}

.zphc-card-product__price del { opacity: .55; margin-right: 4px; text-decoration: line-through; }
.zphc-card-product__price ins { text-decoration: none; font-weight: 700; color: var(--zphc-ink); }
.zphc-card-product__price .woocommerce-Price-amount { white-space: nowrap; }

.zphc-card-product__actions { margin-top: 11.52px; }

.zphc-card-product__actions .zphc-btn {
	min-width: 110px;
	line-height: 25.2288px;
}

.zphc-card-product__actions .zphc-btn.is-loading { opacity: .6; pointer-events: none; }
.zphc-card-product__actions .zphc-btn.is-added { background: var(--zphc-primary); color: #fff; }

/* Out of stock / unpurchasable (the 17 $0.00 apparel SKUs render "Read more") */
.zphc-card-product__note {
	font-size: 11.52px;
	text-transform: uppercase;
	letter-spacing: var(--zphc-ls-btn);
	color: #999;
}

/* Empty carousel placeholder — visible until the catalog import lands. */
.zphc-products__empty {
	padding: 48px 0;
	text-align: center;
	color: #9aa4ad;
	font-size: 14px;
}