/*
 * Products catalog v2 — enqueued only when pep_products_redesign_enabled
 * and the request is in catalog scope (inc/products-redesign.php). Every
 * rule is scoped under body.pep-products-v2 so the flag alone decides
 * whether any of this exists.
 */

/* --------------------------------------------------------------------------
 * Compact head. Replaces the .inr-bnr-sec ACF banner (min-height 420px,
 * padding 120px top) that pushed the first card ~1,590px down a phone.
 * The 120/96/80 top paddings are the fixed-header clearance the banner
 * used to provide.
 * ------------------------------------------------------------------------ */
body.pep-products-v2 .pep-products-head {
	padding: 118px 0 8px;
}
body.pep-products-v2 .pep-products-head h1 {
	font-size: clamp(1.7rem, 4vw, 2.3rem);
	line-height: 1.1;
	margin: 0;
}
@media (max-width: 991px) {
	body.pep-products-v2 .pep-products-head { padding-top: 96px; }
}
@media (max-width: 767px) {
	body.pep-products-v2 .pep-products-head { padding-top: 80px; }
}
/* The head replaces the banner, so the grid section needs less of its own
 * top gap than the section default. */
body.pep-products-v2 .products-crd-sec.cmn-gap {
	padding-top: 22px;
}
/* The theme pulls .products-crd-row up 50px (each card compensates with
 * margin-top: 50px) so the first card row tucks into the banner's bottom
 * padding. With the banner gone on the shop page, that pull shoved every
 * injected row child (search/toolbar/pills) over the H1. Zeroing it keeps
 * the cards' own 50px inter-row rhythm — and the catbar→first-card gap
 * lands at the same 68px the legacy layout had. */
body.pep-products-shop .products-crd-row {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
 * Row-context widths: search, toolbar, and catbar all render inside
 * .products-crd-row (a Bootstrap flex row), before the col-* cards.
 * ------------------------------------------------------------------------ */
body.pep-products-v2 .pep-grid-search,
body.pep-products-v2 .pep-toolbar {
	width: 100%;
}
body.pep-products-v2 .pep-grid-search {
	margin: 2px 0 12px;
}
body.pep-products-v2 .pep-grid-search .dgwt-wcas-search-wrapp {
	max-width: 560px;
	margin: 0;
}
/* The embedded search is a PHONE affordance: the mobile header only offers
 * a magnifier tap-target, so an in-flow input above the grid saves a tap.
 * From tablet up the header already shows the full FiboSearch bar, and the
 * plugin's desktop JS relocates a second embedded instance out of the grid
 * flow — it floated over the H1 (Josh's 31 Aug screenshot). Hide it there. */
@media (min-width: 768px) {
	body.pep-products-v2 .pep-grid-search {
		display: none;
	}
}

/* Toolbar: hidden until JS marks it ready — no JS, no dead controls. */
body.pep-products-v2 .pep-toolbar {
	display: none;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	flex-wrap: wrap;
}
body.pep-products-v2 .pep-toolbar.is-ready {
	display: flex;
}
body.pep-products-v2 .pep-toolbar-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid #d9d9de;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	color: #3c3c43;
	background: #fff;
	cursor: pointer;
	line-height: 1;
	margin: 0;
}
body.pep-products-v2 .pep-toolbar-toggle input {
	margin: 0;
	accent-color: #18181c;
}
body.pep-products-v2 .pep-toolbar-sort {
	margin: 0 0 0 auto;
}
body.pep-products-v2 .pep-toolbar-sort select {
	padding: 7px 30px 7px 14px;
	border: 1px solid #d9d9de;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	color: #3c3c43;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1.3 0 4.5 3.2 7.7 0 9 .6 4.5 5.1 0 .6z' fill='%233c3c43'/%3E%3C/svg%3E") no-repeat right 12px center;
	line-height: 1;
	-webkit-appearance: none;
	appearance: none;
}
body.pep-products-v2 .pep-toolbar-toggle:focus-within,
body.pep-products-v2 .pep-toolbar-sort select:focus {
	border-color: #111;
	outline: 2px solid #111;
	outline-offset: 1px;
}

/* Catbar: one horizontally scrollable row on mobile instead of wrapping to
 * two — every pixel above the grid is fold budget. */
body.pep-products-v2 .pep-catbar {
	flex-wrap: nowrap;
	overflow-x: auto;
	width: 100%;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 2px;
}
body.pep-products-v2 .pep-catbar::-webkit-scrollbar {
	display: none;
}
body.pep-products-v2 .pep-catbar .pep-catpill {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Cards: one destination, half the height. The product <a> already wraps
 * image + title + badges; the ::after stretches it over the whole card so
 * the entire surface is the tap target. The foot is decoration, not a
 * second control.
 * ------------------------------------------------------------------------ */
body.pep-products-v2 .cmn-product-crd {
	padding: 18px 16px 0;
}
/* Card-internal rules below use :is(body.pep-products-v2, .pep-v2-cards):
 * the body class scopes the catalog, and .pep-v2-cards scopes any other
 * container that adopts the v2 card language (the homepage Top sellers
 * rail, Josh 31 Aug). :is() takes the strongest argument's specificity,
 * so the catalog cascade is byte-identical to the body-scoped original. */
:is(body.pep-products-v2, .pep-v2-cards) .cmn-product-crd > a.woocommerce-LoopProduct-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
body.pep-products-v2 .custom-product-title {
	font-size: .98rem;
	line-height: 1.3;
	margin: 10px 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body.pep-products-v2 .pcm-badge-row-loop {
	margin: 2px 0 0;
}

/* Foot: price left, quiet affordance right. Supplies the card's bottom
 * padding the legacy .cmn-action-area used to. */
:is(body.pep-products-v2, .pep-v2-cards) .pep-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding: 10px 0 16px;
}
:is(body.pep-products-v2, .pep-v2-cards) .pep-card-price {
	font-weight: 700;
	font-size: 1rem;
}
:is(body.pep-products-v2, .pep-v2-cards) .pep-card-price .woocommerce-Price-amount {
	font-weight: 700;
}
:is(body.pep-products-v2, .pep-v2-cards) .pep-from {
	font-weight: 500;
	font-size: .8em;
	color: #6b6b70;
}
:is(body.pep-products-v2, .pep-v2-cards) .pep-card-view {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
	font-weight: 600;
	color: #3c3c43;
	white-space: nowrap;
}
:is(body.pep-products-v2, .pep-v2-cards) .pep-card-view svg {
	display: block;
}
/* Shelf context: the rail card is edge-to-edge (padding 0), so the foot
 * carries its own side inset there. Three classes on purpose — the :is()
 * base rule above scores (0,2,1) (it inherits its STRONGEST argument's
 * specificity, body.pep-products-v2, even when .pep-v2-cards is what
 * matched), so a two-class override silently loses. */
.home-sellers .pep-v2-cards .pep-card-foot {
	padding: 10px 16px 16px;
}

/* Status chips (PDP vocabulary) sit on the image, opposite the Sale flash. */
:is(body.pep-products-v2, .pep-v2-cards) .cmn-img-ratio {
	position: relative;
}
:is(body.pep-products-v2, .pep-v2-cards) .pep-chip {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	color: #fff;
	background: #6b7280;
	pointer-events: none;
}
:is(body.pep-products-v2, .pep-v2-cards) .pep-chip.is-testing { background: #0e7490; }
:is(body.pep-products-v2, .pep-v2-cards) .pep-chip.is-onorder { background: #9a6700; }

/* Unbuyable cards read as unbuyable without spending a button on it. */
:is(body.pep-products-v2, .pep-v2-cards) .product.outofstock .cmn-img-ratio img {
	opacity: .55;
	filter: grayscale(.35);
}

/* The in-stock toggle. */
body.pep-products-v2 .products-crd-row.pep-hide-oos .product.outofstock {
	display: none;
}

/* Tighter grid rhythm on phones — 2-up stays, cards just stop being 800px. */
@media (max-width: 767px) {
	body.pep-products-v2 .cmn-product-crd {
		padding: 12px 12px 0;
		border-radius: 14px;
	}
	body.pep-products-v2 .custom-product-title {
		font-size: .88rem;
		margin-top: 8px;
	}
	body.pep-products-v2 .pep-card-foot {
		padding: 8px 0 12px;
		flex-wrap: wrap;
	}
	body.pep-products-v2 .pep-card-price {
		font-size: .92rem;
	}
	body.pep-products-v2 .pep-card-view {
		font-size: .76rem;
	}
	body.pep-products-v2 .pep-grid-search {
		margin-bottom: 10px;
	}
}