/**
 * Shop product-card restyle — Vinted/Depop look.
 *
 * Loaded by Compat\ShopCardLayout on shop / product-taxonomy / search only.
 * Depends on the `pb-design-system` handle.
 *
 * Goal: each grid card reads image -> title -> size -> price, with NO white
 * card background and a BOLD price, and no "in <Category>" eyebrow.
 *
 * All rules are scoped under `ul.products` (the WooCommerce loop wrapper) so
 * nothing leaks onto the single-product summary, cart, dashboard, etc.
 *
 * Motta active layout = product_card_layout "3". Verified live DOM order inside
 * `.product-summary`:
 *   .short-description (only when catalog_product_description is on)
 *   .meta-wrapper > .meta-cat  ("in <Cat>")   <- hidden here
 *   h2.woocommerce-loop-product__title
 *   .product-price-group > span.price
 * We do not trust that source order for layout; we force it with flex-order
 * (mirrors the PDP `.entry-summary` reorder).
 */

/* ----------------------------------------------------------------------
 * 1. Kill the white card background + any boxed chrome.
 * ------------------------------------------------------------------- */
ul.products li.product .product-inner {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* Motta layout-3 sometimes pads/insets the inner card; keep the image flush
 * to the column edge for the Vinted/Depop edge-to-edge look. */
ul.products li.product .product-summary {
	background: transparent !important;
}

/* ----------------------------------------------------------------------
 * 2. Order the summary: title -> size -> price.
 *    `.product-summary` becomes a flex column; every visible child gets an
 *    explicit order. An UNORDERED child defaults to order:0 and would clump
 *    to the top — so each one we care about is ordered.
 * ------------------------------------------------------------------- */
ul.products li.product .product-summary {
	display: flex;
	flex-direction: column;
}

ul.products li.product .product-summary > .woocommerce-loop-product__title {
	order: 10;
}
ul.products li.product .product-summary > .pb-loop-size {
	order: 20;
}
ul.products li.product .product-summary > .product-price-group,
ul.products li.product .product-summary > .price {
	order: 30;
}
/* Motta's catalog short-description (when enabled) reads above the title in
 * source order; push it below the price so the card still leads image->title. */
ul.products li.product .product-summary > .short-description {
	order: 40;
	margin-top: 6px;
}

/* ----------------------------------------------------------------------
 * 3. Hide the "in <Category>" eyebrow.
 * ------------------------------------------------------------------- */
ul.products li.product .product-summary .meta-wrapper {
	display: none !important;
}

/* ----------------------------------------------------------------------
 * 4. Title — tidy spacing above the size line.
 * ------------------------------------------------------------------- */
ul.products li.product .product-summary > .woocommerce-loop-product__title {
	margin-bottom: 2px;
}

/* ----------------------------------------------------------------------
 * 5. Size line — small, muted, under the title.
 * ------------------------------------------------------------------- */
ul.products li.product .pb-loop-size {
	font-size: 13px;
	line-height: 1.3;
	color: #64748b;
	margin: 0 0 2px;
}

/* ----------------------------------------------------------------------
 * 6. Bold price. Keep del/ins (sale strikethrough) rendering inline.
 * ------------------------------------------------------------------- */
ul.products li.product .price,
ul.products li.product .price .woocommerce-Price-amount,
ul.products li.product .product-price-group .price,
ul.products li.product .product-price-group .price .woocommerce-Price-amount {
	font-weight: 700 !important;
}
/* The struck-through original price stays lighter/regular so the live price
 * reads as the bold one (Depop pattern). */
ul.products li.product .price del,
ul.products li.product .price del .woocommerce-Price-amount {
	font-weight: 400 !important;
}
ul.products li.product .price ins,
ul.products li.product .price ins .woocommerce-Price-amount {
	font-weight: 700 !important;
	text-decoration: none;
}