/**
 * CWS-Suite loop card — Jasmin Maziva, design 3a.
 *
 * Everything card-internal is scoped under .shopc, a class loop-card.php adds
 * alongside WooCommerce's own .product. The grid rules have to sit on the hosts
 * WooCommerce and the plugin actually emit (ul.products, .cws-product-grid),
 * because nothing in the template can add a class to those.
 *
 * Radius is 0 throughout — the squared brand look is the point of the design,
 * not an oversight. Same as the filters panel this ships next to.
 *
 * Manrope is what the design uses. Loading a web font is the theme's call, so
 * the @import is commented out and the card inherits the theme's font until you
 * turn it on. Enqueuing the font properly in functions.php beats an @import.
 *
 * This stylesheet fully replaces the plugin's cws-suite-loop-card.css — that one
 * is a beige, 18px-radius, object-fit:cover skin, and it also owns the .products
 * grid. Dequeue it (see README) rather than fighting it rule by rule.
 */

/* @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); */

/*
 * The palette is shared with the single-product price block, which renders
 * outside any .shopc card — see the price section below.
 */
.shopc,
.shopc-price--single {
	--shopc-ink:          #16333f;
	--shopc-ink-2:        #33525d;
	--shopc-ink-3:        #7c8d95;
	--shopc-muted:        #9bacb4;
	--shopc-muted-2:      #b6c3c9;
	--shopc-muted-3:      #8a9aa1;
	--shopc-body:         #5c727b;

	--shopc-accent:       #0b7da9;

	--shopc-green:        #7cb342;
	--shopc-green-lbl:    #6f9e34;

	--shopc-line:         #e2e9ec;

	--shopc-surface:      #ffffff;
	--shopc-media-bg:     #f6f8f9;
	--shopc-fav-bg:       #f4f7f8;
	--shopc-fav-hover:    #fdeceb;
	--shopc-muted-btn:    #f2f5f7;

	--shopc-lift:         0 24px 46px -26px rgba(18, 48, 60, .42);
}

/* ---------------------------------------------------------------- grid ---- */
/*
 * WooCommerce emits <ul class="products columns-N">; the CWS product widgets
 * emit .cws-product-grid. Both get the design's four-up grid.
 *
 * The selector list is long on purpose. Shoptimizer sizes the loop with
 * ".woocommerce ul.products li.product { float: left; width: 22.05% }" at
 * specificity (0,3,2) — a plain "ul.products" (0,1,1) loses to that and the grid
 * silently collapses back to floats. Every rule that a float-era theme also
 * writes is therefore matched at (0,3,2) or better, and the three properties
 * that decide the layout outright are forced. The plugin's own widget
 * stylesheets do exactly the same, for exactly this reason.
 *
 * Which is why the two carousels have to be subtracted by hand. The wooproducts
 * and woorelatedproducts widgets own their <ul>: the column control
 * (--cws-columns) and the mobile flex + scroll-snap row are theirs, written as
 * ".cws-wooproducts-wrap ul.products" / ".cws-related-products-wrap ul.products"
 * — (0,2,1), an exact tie with ".woocommerce ul.products" that the !important
 * here then wins outright. Left alone, a four-up grid paints where a carousel
 * belongs. So every grid rule below excludes anything inside those wrappers;
 * only the card internals are shared with them.
 *
 * The exclusion is what raises these selectors by one class — :not() carries the
 * specificity of its argument. That only ever helps here. It does need Selectors
 * 4 :not() (Chrome/Edge 88, Firefox 84, Safari 9); an engine older than that
 * drops the whole rule, grid included.
 */
ul.products:not(.cws-related-products-wrap *, .cws-wooproducts-wrap *),
.woocommerce ul.products:not(.cws-related-products-wrap *, .cws-wooproducts-wrap *),
.woocommerce-page ul.products:not(.cws-related-products-wrap *, .cws-wooproducts-wrap *),
.cws-product-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 16px;
	align-items: stretch;
}

/* Woo's float-era clearfix would add two phantom grid items. */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}

@media (max-width: 1100px) {
	ul.products:not(.cws-related-products-wrap *, .cws-wooproducts-wrap *),
	.woocommerce ul.products:not(.cws-related-products-wrap *, .cws-wooproducts-wrap *),
	.woocommerce-page ul.products:not(.cws-related-products-wrap *, .cws-wooproducts-wrap *),
	.cws-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 860px) {
	ul.products:not(.cws-related-products-wrap *, .cws-wooproducts-wrap *),
	.woocommerce ul.products:not(.cws-related-products-wrap *, .cws-wooproducts-wrap *),
	.woocommerce-page ul.products:not(.cws-related-products-wrap *, .cws-wooproducts-wrap *),
	.cws-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px; }
}

@media (max-width: 600px) {
	ul.products:not(.cws-related-products-wrap *, .cws-wooproducts-wrap *),
	.woocommerce ul.products:not(.cws-related-products-wrap *, .cws-wooproducts-wrap *),
	.woocommerce-page ul.products:not(.cws-related-products-wrap *, .cws-wooproducts-wrap *),
	.cws-product-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
}

/* ---------------------------------------------------------------- card ---- */
/*
 * The grid track is the width now. These three are forced rather than merely
 * out-specified, because a theme only has to win one of them to break the row.
 */
li.product.shopc,
ul.products li.product.shopc,
.woocommerce ul.products li.product.shopc,
.cws-product-grid li.product.shopc {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none;
}

.shopc,
li.product.shopc,
ul.products li.product.shopc,
.woocommerce ul.products li.product.shopc,
.cws-product-grid li.product.shopc {
	background: var(--shopc-surface);
	border: 1px solid var(--shopc-line);
	border-radius: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	text-align: left;
	/* A grid item defaults to min-width:auto, so a long product name would push
	   the card wider than its track and off the screen. */
	min-width: 0;
	transition: box-shadow .18s, transform .18s, border-color .18s;
}

.shopc:hover,
li.product.shopc:hover,
.woocommerce ul.products li.product.shopc:hover {
	box-shadow: var(--shopc-lift);
	transform: translateY(-3px);
	border-color: var(--shopc-accent);
}

/* ---------------------------------------------------- media + overlays ---- */
.shopc.shopc .shopc-head {
	position: relative;
}

/*
 * width:100% is load-bearing, not decoration. The anchor is a block inside a
 * grid track, and a theme that sets `a { display: inline-block }` or gives
 * .product__media a width would otherwise shrink it to the image's intrinsic
 * size and float the badges away from the card edge. The .product__media
 * selectors are matched too, because that is the class the plugin's own
 * stylesheet and any third-party CSS key off.
 */
.shopc.shopc .shopc-media,
.products .shopc.shopc .product__media,
.cws-product-grid .shopc.shopc .product__media {
	display: block;
	width: 100%;
	height: 190px;
	background: var(--shopc-media-bg);
	overflow: hidden;
	border-radius: 0;
}

.shopc.shopc .shopc-media img,
.products .shopc.shopc .product__media img,
.cws-product-grid .shopc.shopc .product__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	margin: 0;
	background: #fff;
	border-radius: 0;
	transition: none;
}

.shopc.shopc .shopc-badges {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	pointer-events: none;
}

.shopc.shopc .shopc-badge {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .3px;
	line-height: 1.2;
	color: #fff;
	padding: 8px 12px;
	border-radius: 0;
}

.shopc.shopc .shopc-badge--rabat { background: var(--shopc-green); }
.shopc.shopc .shopc-badge--stock { background: var(--shopc-muted-3); }

/*
 * The wishlist heart is rendered by the plugin, so it carries .product__fav and
 * not a shopc- class. Restyle it into the design's 32px square.
 */
.shopc.shopc .product__fav {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: var(--shopc-fav-bg);
	color: var(--shopc-muted-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s;
}

.shopc.shopc .product__fav:hover {
	background: var(--shopc-fav-hover);
	transform: none;
}

.shopc.shopc .product__fav svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
}

.shopc.shopc .product__fav.is-active { color: #c0392b; }
.shopc.shopc .product__fav.is-active svg { fill: currentColor; }

/* ----------------------------------------------------------- text body ---- */
/*
 * The 16px gap under the image lives on the body, not on the group — a product
 * with no `grupe` term has no .shopc-group to carry it and its title would
 * otherwise sit flush against the image.
 */
/*
 * The .product__* selectors are matched alongside every shopc- one from here
 * down. The plugin's Soft Card stylesheet styles the same elements at (0,2,0) —
 * ".products .product__body { padding: 14px 16px 10px; min-height: 150px }",
 * ".products .product__cta-wrap { padding: 0 16px 16px }" — which ties with a
 * plain ".shopc.shopc .shopc-body" and wins on source order whenever it is enqueued
 * after this file. The README says to dequeue it, but a card that only looks
 * right when someone remembered to is not a card that looks right. Matching at
 * (0,3,0) settles it either way.
 */
.shopc.shopc .shopc-body,
.products .shopc.shopc .product__body,
.cws-product-grid .shopc.shopc .product__body {
	display: flex;
	flex-direction: column;
	margin-top: 16px;
	padding: 16px;
	min-height: 0;
	gap: 0;
}

.shopc.shopc .shopc-group {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--shopc-green);
	margin: 0 0 6px;
}

.shopc.shopc .shopc-title {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--shopc-ink);
	min-height: 58px;
	margin: 0;
	padding: 0;
	text-wrap: pretty;
	/* Product names here are part spec sheet — "TOTAL QUARTZ INEO RCP 5W30 208L".
	   In a narrow column an unbroken token like that would otherwise run past the
	   card edge. */
	overflow-wrap: break-word;
}

.shopc.shopc .shopc-title a {
	color: inherit;
	text-decoration: none;
}

.shopc.shopc .shopc-title a:hover { color: var(--shopc-accent); }

/* --------------------------------------------------------- price block ---- */
/*
 * Two hosts, one set of rules.
 *
 *   .shopc.shopc .shopc-price          the loop card (loop-card.php)
 *   .shopc-price--single         the product page, related products, widgets —
 *                                anything rendered through
 *                                JMA_Partner_Pricing::price_html()
 *
 * Both are fed by the same presenter (JMA_Partner_Pricing::price_parts()) and
 * carry the same class names, so the card and the product page cannot drift
 * apart again the way .partner-price-display-v2 did. Sizes for the single view
 * are bumped at the end of this section; everything else is shared verbatim.
 *
 * The single view is built from <span>s, not <div>s — WooCommerce wraps
 * get_price_html() in <p class="price"> and a block element there ends the
 * paragraph early. display:flex below is what makes them lay out as rows.
 */
.shopc.shopc .shopc-price,
.shopc-price--single {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 3px;
	margin: 12px 0 14px;
}

/*
 * Card only: locked to one height so every card in a row bottom-aligns its
 * price on the same line, whether or not it has a VPC row or a per-unit figure.
 * The product page has one price and nothing to align it with.
 */
.shopc.shopc .shopc-price { min-height: 92px; }

.shopc.shopc .shopc-vpc,
.shopc-price--single .shopc-vpc {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.shopc.shopc .shopc-vpc-label,
.shopc-price--single .shopc-vpc-label {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--shopc-muted);
}

.shopc.shopc .shopc-vpc-amount,
.shopc-price--single .shopc-vpc-amount {
	font-size: 14px;
	font-weight: 700;
	color: var(--shopc-muted);
	text-decoration: line-through;
}

.shopc.shopc .shopc-vpc-unit,
.shopc-price--single .shopc-vpc-unit {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--shopc-muted-2);
	text-decoration: line-through;
}

.shopc.shopc .shopc-now,
.shopc-price--single .shopc-now {
	display: flex;
	align-items: baseline;
	gap: 7px;
	flex-wrap: wrap;
}

.shopc.shopc .shopc-now-amount,
.shopc-price--single .shopc-now-amount {
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -.5px;
	line-height: 1.15;
	color: var(--shopc-ink);
}

.shopc.shopc .shopc-now.is-discounted .shopc-now-amount,
.shopc-price--single .shopc-now.is-discounted .shopc-now-amount { color: var(--shopc-green-lbl); }

/* "Cijena na upit" occupies the price slot but is a label, not a figure — at the
   price's 25px it shouts louder than every real price on the row. */
.shopc.shopc .shopc-now-amount--request {
	font-size: 17px;
	letter-spacing: 0;
	color: var(--shopc-ink-3);
}

.shopc.shopc .shopc-now-unit,
.shopc-price--single .shopc-now-unit {
	font-size: 12px;
	font-weight: 700;
	color: var(--shopc-ink-3);
}

.shopc.shopc .shopc-tax,
.shopc-price--single .shopc-tax {
	font-size: 11px;
	font-weight: 600;
	color: var(--shopc-muted);
}

/*
 * wc_price() nests <bdi> and a currency <span>; both must inherit the size and
 * weight set above rather than whatever the theme gives .amount.
 */
.shopc.shopc .shopc-price .woocommerce-Price-amount,
.shopc.shopc .shopc-price .woocommerce-Price-currencySymbol,
.shopc.shopc .shopc-price bdi,
.shopc-price--single .woocommerce-Price-amount,
.shopc-price--single .woocommerce-Price-currencySymbol,
.shopc-price--single bdi {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	background: none;
	text-decoration: inherit;
}

/* The fallback branch prints WooCommerce's own price HTML; keep it legible. */
.shopc.shopc .shopc-price del,
.shopc-price--single del { color: var(--shopc-muted); font-size: 14px; }
.shopc.shopc .shopc-price ins,
.shopc-price--single ins { text-decoration: none; background: none; }

/*
 * The Rabat badge keeps the styling it has always had (child theme's
 * .partner-dicount): green pill, white text. It only loses the float — it now
 * sits on the price baseline instead of being pushed to the right edge.
 */
.shopc-price--single .partner-dicount {
	float: none;
	align-self: center;
}

/* ------------------------------------------- price block · single view ---- */
/*
 * Same design, one step up in scale — but only where the price really is the
 * headline of the page.
 *
 * price_html() emits .shopc-price--single for every context WooCommerce runs
 * the filter in: the product page, but also the search dropdown, upsell
 * carousels and any Elementor price widget. Unscoped, the 32px price turned
 * every search result row into a billboard. The bump therefore hangs off WP's
 * .single-product body class, and the search flow resets it below — same
 * specificity, later in the file, so the reset wins even when the dropdown is
 * open on top of a product page.
 */
.single-product .shopc-price--single {
	gap: 5px;
	margin: 14px 0 18px;
}

.single-product .shopc-price--single .shopc-vpc-label  { font-size: 12.5px; }
.single-product .shopc-price--single .shopc-vpc-amount { font-size: 17px; }
.single-product .shopc-price--single .shopc-vpc-unit   { font-size: 13px; }
.single-product .shopc-price--single .shopc-now        { gap: 10px; }
.single-product .shopc-price--single .shopc-now-amount { font-size: 32px; }
.single-product .shopc-price--single .shopc-now-unit   { font-size: 14px; }
.single-product .shopc-price--single .shopc-tax        { font-size: 12px; }

/* ---------------------------------------- price block · search results ---- */
/*
 * The CWS search flow renders a whole product row inside a link, one after
 * another in a dropdown. The price is a supporting detail there, not the
 * headline: one step *down* from the card, no block margins (they were padding
 * every row out), and a Rabat badge scaled to the row rather than to the
 * product page.
 */
.cws-searchflow__price .shopc-price--single {
	gap: 2px;
	margin: 0;
}

/*
 * Three class names deep, to match the .single-product bump above rather than
 * lose to it while the dropdown is open on a product page.
 */
.cws-searchflow__price .shopc-price--single .shopc-vpc        { gap: 5px; }
.cws-searchflow__price .shopc-price--single .shopc-vpc-label  { font-size: 10px; }
.cws-searchflow__price .shopc-price--single .shopc-vpc-amount { font-size: 12.5px; }
.cws-searchflow__price .shopc-price--single .shopc-vpc-unit   { font-size: 10.5px; }
.cws-searchflow__price .shopc-price--single .shopc-now        { gap: 6px; }
.cws-searchflow__price .shopc-price--single .shopc-now-amount { font-size: 19px; }
.cws-searchflow__price .shopc-price--single .shopc-now-unit   { font-size: 11px; }
.cws-searchflow__price .shopc-price--single .shopc-tax        { font-size: 10px; }

.cws-searchflow__price .shopc-price--single .partner-dicount {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	margin-left: 4px;
}

/* ----------------------------------------------------------------- cta ---- */
.shopc.shopc .shopc-cta-wrap,
.products .shopc.shopc .product__cta-wrap,
.cws-product-grid .shopc.shopc .product__cta-wrap {
	margin-top: auto;
	padding: 0;
}

.shopc.shopc .shopc-cta {
	width: 100%;
	height: 46px;
	border: 0;
	border-radius: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .3px;
	line-height: 1;
	text-decoration: none;
	background: var(--shopc-green);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	transition: filter .16s;
}

.shopc.shopc .shopc-cta:hover,
.shopc.shopc .shopc-cta:focus {
	filter: brightness(.94);
	background: var(--shopc-green);
	color: #fff;
}

.shopc.shopc .shopc-cta.is-muted {
	background: var(--shopc-muted-btn);
	color: var(--shopc-body);
}

.shopc.shopc .shopc-cta.is-muted:hover,
.shopc.shopc .shopc-cta.is-muted:focus {
	background: var(--shopc-muted-btn);
	color: var(--shopc-body);
}

.shopc.shopc .shopc-cta-icon { flex: 0 0 auto; }

/* -------------------------------------------------------- mobile · 3b ---- */
/*
 * Design 3b: the same markup restacked into a horizontal row — 90px image on the
 * left with the Rabat badge under it, text and price on the right.
 *
 * One deviation from the mock: 3b drops the CTA entirely. Nothing else in the
 * row is a tap target for the whole product, so the button stays and wraps to a
 * full-width third line instead.
 */
@media (max-width: 600px) {
	/* Must match the base card rule's specificity or that one keeps winning. */
	.shopc,
	li.product.shopc,
	ul.products li.product.shopc,
	.woocommerce ul.products li.product.shopc,
	.cws-product-grid li.product.shopc {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 14px;
		padding: 12px;
	}

	.shopc.shopc .shopc-head {
		flex: 0 0 auto;
		width: 90px;
		display: flex;
		flex-direction: column;
	}

	.shopc.shopc .shopc-media,
	.products .shopc.shopc .product__media,
	.cws-product-grid .shopc.shopc .product__media {
		order: 1;
		width: 90px;
		height: 96px;
		background: var(--shopc-fav-bg);
	}

	.shopc.shopc .shopc-badges {
		order: 2;
		position: static;
		align-items: stretch;
		margin-top: 6px;
		gap: 4px;
	}

	.shopc.shopc .shopc-badge {
		text-align: center;
		font-size: 10.5px;
		line-height: 1.25;
		padding: 4px 6px;
	}

	.shopc.shopc .product__fav {
		top: 0;
		right: 0;
		width: 26px;
		height: 26px;
	}

	.shopc.shopc .product__fav svg { width: 14px; height: 14px; }

	/* Must match the base body rule's (0,4,0) or its margin-top:16px keeps winning. */
	.shopc.shopc .shopc-body,
	.products .shopc.shopc .product__body,
	.cws-product-grid .shopc.shopc .product__body {
		flex: 1;
		min-width: 0;
		margin-top: 0;
		padding: 8px;
	}

	.shopc.shopc .shopc-group {
		font-size: 10px;
		letter-spacing: .6px;
		margin: 0;
	}

	.shopc.shopc .shopc-title {
		font-size: 13.5px;
		line-height: 1.3;
		min-height: 0;
		margin: 3px 0 8px;
	}

	.shopc.shopc .shopc-price {
		min-height: 0;
		margin: 0;
		gap: 2px;
	}

	/* 3b keeps the VPC row but not its per-unit figure — the line is too long
	   for a 90px-narrower column. */
	.shopc.shopc .shopc-vpc-unit { display: none; }

	.shopc.shopc .shopc-vpc-label { font-size: 10.5px; }
	.shopc.shopc .shopc-vpc-amount { font-size: 13px; }

	.shopc.shopc .shopc-now-amount { font-size: 18px; letter-spacing: -.3px; }
	.shopc.shopc .shopc-now-unit { font-size: 11.5px; }
	.shopc.shopc .shopc-tax { font-size: 10.5px; margin-top: 2px; }

	.shopc.shopc .shopc-cta-wrap,
	.products .shopc.shopc .product__cta-wrap,
	.cws-product-grid .shopc.shopc .product__cta-wrap {
		flex: 0 0 100%;
		margin-top: 2px;
		padding: 0;
	}

	.shopc.shopc .shopc-cta {
		height: 40px;
		font-size: 12.5px;
	}
}