/**
 * Commerce7 collection page — /collection/all-wine and siblings.
 *
 * Ported from the source site's own Commerce7 overrides (the single stylesheet at
 * /combinedfiles/css/374/27739db….css, where all 38 of its C7 rules live). Three adjustments were
 * required; each is marked inline where it applies:
 *
 *   1. rem → px. The source sets `html { font-size: 62.5% }`, so its 1rem is 10px; ours is 16px.
 *      Every rem below is written as its resolved pixel value, exactly as c7-header.css does.
 *      Importing the 62.5% hack instead would resize the entire rebuild.
 *
 *   2. `.product-collection-wrapper` → `.c7-product-collection`. The source scopes its collection
 *      rules to a wrapper its own theme prints around the Commerce7 mount. We have no such
 *      element. `.c7-product-collection` is Commerce7's own collection root — verified to contain
 *      both `.c7-filters` and `.c7-product-collection__product-list` on each site — so it selects
 *      the same subtree while staying specific to collection pages, which a broader anchor like
 *      `.c7-content` would not (that class is on every C7 page, including cart and detail).
 *
 *   3. Vendor prefixes dropped. The source carries -webkit-/-moz- flexbox for browsers this
 *      rebuild does not target; c7-header.css already set that precedent.
 *
 * The card markup itself needed no porting at all. Commerce7 renders `.product-panel` from the
 * tenant's own product-collection template, so the source and the rebuild receive byte-identical
 * cards from the same account — the classes below are Commerce7's, not the old theme's.
 */

/* ---- collection layout ---- */

/**
 * The heading Commerce7 prints above a collection.
 *
 * Shown only where the collection IS the page. C7 renders its own routes inside
 * `<section class="c7-content">`, so that wrapper is what distinguishes the real
 * /collection/{slug} page from a collection embedded in a page built out of Elementor widgets.
 * An embed already sits under whatever heading the page gives it, and Commerce7 fills this one
 * with the raw collection slug — the homepage's reads "next-release" — so it is hidden there.
 *
 * To show it on a particular embed, re-declare `display: block` for that container.
 */
.c7-product-collection .collection-title { display: none; }

.c7-content .c7-product-collection .collection-title {
	display: block;
	text-align: center;

	/**
	 * Typography copied from the Elementor kit's own heading style — the widget the rebuild
	 * already uses for section headings (`.elementor-element-2e8887b .elementor-heading-title`).
	 * That style is itself the source's collection title: the source reaches Italianno 50px
	 * #740a14 through its global `.uk-section h2`, which we have no equivalent of, so the values
	 * are stated here instead.
	 *
	 * The colour goes through Elementor's own global so it tracks the kit rather than freezing a
	 * second copy of the brand red; the literal is only a fallback for when the kit's CSS has not
	 * loaded. Weight 400 is deliberate and must stay: domino-fonts loads Italianno at 400 only, so
	 * any heavier value would be a browser-synthesised bold with different glyph widths.
	 *
	 * Only the type is taken. The Elementor widget's margins are widget spacing, not part of the
	 * heading, and Commerce7 handles the spacing around this one.
	 */
	font-family: Italianno, sans-serif;
	font-size: 50px;
	font-weight: 400;
	line-height: 50px;
	color: var( --e-global-color-primary, #740a14 );
}

.c7-product-collection .c7-filters {
	justify-content: flex-start;
	margin-top: 24px;
	margin-bottom: -24px;
}

/**
 * The responsive grid. Commerce7 supplies `display: grid` and the gap; the source only ever
 * restates the column count, so that is all that is restated here.
 */
@media (min-width: 769px) {
	.c7-product-collection .c7-product-collection__product-list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
	.c7-product-collection .c7-product-collection__product-list { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 1200px) {
	.c7-product-collection .c7-product-collection__product-list { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* ---- the card ---- */

/* Column layout so `margin-top: auto` on the add-to-cart block can push it to the card's floor,
   keeping the buttons on a common baseline across a row of uneven titles. */
.c7-product-collection .c7-product-collection__product-list .product-panel {
	display: flex;
	flex-direction: column;
}

.c7-product-collection .c7-product-collection__product-list .product-panel h2 {
	text-align: center;
	font-size: 22px;          /* source: 2.2rem @ 62.5% */
	font-family: inherit;
}

/**
 * The source has no rest-state rule for this, because it never needed one: its theme loads UIkit,
 * whose base sets `a { text-decoration: none }` site-wide, so the card titles simply never
 * underline. WordPress and Elementor leave the underline on, so what the source got for free has
 * to be stated here. Its own hover rule below is then a no-op, and is kept only for fidelity.
 */
.c7-product-collection .c7-product-collection__product-list .product-panel h2 a {
	text-decoration: none;
}

.c7-product-collection .c7-product-collection__product-list .product-panel h2 a:hover {
	text-decoration: none;
}

/* The tenant's card template emits a teaser; the source hides it on the collection grid and shows
   it only on the product detail page. */
.c7-product-collection .c7-product-collection__product-list .product-panel .product-teaser {
	display: none;
}

.c7-product-collection .c7-product-collection__product-list .product-panel .c7-product__add-to-cart {
	margin-top: auto;
	flex-direction: column;
	flex-wrap: nowrap;
}

.c7-product-collection .c7-product-collection__product-list .product-panel .c7-product__add-to-cart .c7-product__add-to-cart__price {
	margin: 10px 0;
}

.c7-product-collection .c7-product-collection__product-list .product-panel .c7-product__add-to-cart .c7-product__add-to-cart__form {
	display: block;
	text-align: center;
}

.c7-product-collection .c7-product-collection__product-list .product-panel .c7-product__add-to-cart .c7-product__add-to-cart__form .c7-product__add-to-cart__form__quantity {
	margin-right: 0;
	margin-bottom: 20px;
}

/* ---- price / quantity / add-to-cart, shared with the product detail page ---- */

/**
 * The source writes each of these against `.product-items` and `.product-panel` together — the
 * detail page and the card respectively. The pair is one rule in the source, so it is kept as one
 * rule here.
 *
 * The card half is deliberately NOT prefixed with `.c7-content`, where the source has it. That
 * prefix holds on the source because every Commerce7 render there sits inside C7's own
 * `<section class="c7-content">`. In this rebuild a collection can also be dropped into a page
 * through an Elementor HTML widget — the homepage does exactly that — which mounts
 * `.c7-product-collection` on its own, with no `.c7-content` wrapper. Prefixed, the cards in those
 * embeds fell back to Commerce7's plain black button instead of the green one.
 *
 * Dropping the prefix is safe: `.product-panel` is emitted only by the tenant's Commerce7
 * collection template, so there is nothing else on the site for it to reach. It costs one class of
 * specificity (0-4-0 rather than 0-5-0), which still clears the theme's button rules comfortably —
 * and the background carries the source's own `!important` regardless.
 */
.c7-content .product-items .c7-product__add-to-cart,
.product-panel .c7-product__add-to-cart {
	margin: 0;
	max-width: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.c7-content .product-items .c7-product__add-to-cart .c7-product__add-to-cart__price,
.product-panel .c7-product__add-to-cart .c7-product__add-to-cart__price {
	margin-right: 20px;
	font-size: 16px;          /* source: 1.6rem @ 62.5% */
}

.c7-content .product-items .c7-product__add-to-cart .c7-product__add-to-cart__price > span:first-child,
.product-panel .c7-product__add-to-cart .c7-product__add-to-cart__price > span:first-child {
	font-weight: bold;
}

.c7-content .product-items .c7-product__add-to-cart .c7-product__add-to-cart__price > span.c7-product__add-to-cart__price__variant,
.product-panel .c7-product__add-to-cart .c7-product__add-to-cart__price > span.c7-product__add-to-cart__price__variant {
	vertical-align: unset;
}

.c7-content .product-items .c7-product__add-to-cart .c7-product__add-to-cart__price > span.c7-product__add-to-cart__price__variant .c7-product__variant__price__title,
.product-panel .c7-product__add-to-cart .c7-product__add-to-cart__price > span.c7-product__add-to-cart__price__variant .c7-product__variant__price__title {
	font-size: 13px;          /* source: 1.3rem @ 62.5% */
}

.c7-content .product-items .c7-product__add-to-cart .c7-product__add-to-cart__form,
.product-panel .c7-product__add-to-cart .c7-product__add-to-cart__form {
	display: flex;
	align-items: center;
}

.c7-content .product-items .c7-product__add-to-cart .c7-product__add-to-cart__form .c7-product__add-to-cart__form__quantity,
.product-panel .c7-product__add-to-cart .c7-product__add-to-cart__form .c7-product__add-to-cart__form__quantity {
	max-width: none;
}

.c7-content .product-items .c7-product__add-to-cart .c7-product__add-to-cart__form .c7-product__add-to-cart__form__quantity .c7-form__field,
.product-panel .c7-product__add-to-cart .c7-product__add-to-cart__form .c7-product__add-to-cart__form__quantity .c7-form__field {
	display: flex;
	align-items: center;
}

.c7-content .product-items .c7-product__add-to-cart .c7-product__add-to-cart__form .c7-product__add-to-cart__form__quantity .c7-form__field label,
.product-panel .c7-product__add-to-cart .c7-product__add-to-cart__form .c7-product__add-to-cart__form__quantity .c7-form__field label {
	color: #740a14;
	text-transform: uppercase;
	font-size: 16px;          /* source: 1.6rem @ 62.5% */
	margin-right: 20px;
}

/* Commerce7 ships the quantity label visually hidden; the source reveals it. */
.c7-content .product-items .c7-product__add-to-cart .c7-product__add-to-cart__form .c7-product__add-to-cart__form__quantity .c7-form__field label.c7-sr-only,
.product-panel .c7-product__add-to-cart .c7-product__add-to-cart__form .c7-product__add-to-cart__form__quantity .c7-form__field label.c7-sr-only {
	clip-path: none;
	height: auto;
	width: auto;
	position: relative;
}

.c7-content .product-items .c7-product__add-to-cart .c7-product__add-to-cart__form .c7-product__add-to-cart__form__quantity .c7-form__field label:after,
.product-panel .c7-product__add-to-cart .c7-product__add-to-cart__form .c7-product__add-to-cart__form__quantity .c7-form__field label:after {
	color: #740a14;
	display: none;
}

.c7-content .product-items .c7-product__add-to-cart .c7-product__add-to-cart__form .c7-product__add-to-cart__form__quantity .c7-form__field input,
.product-panel .c7-product__add-to-cart .c7-product__add-to-cart__form .c7-product__add-to-cart__form__quantity .c7-form__field input {
	width: 60px;
	border: 1px solid #363535;
	font-size: 16px;          /* source: 1.6rem @ 62.5% */
	padding: 10px;
	margin-right: 20px;
}

/* `!important` is the source's own — Commerce7's button background is itself declared important. */
.c7-content .product-items .c7-product__add-to-cart .c7-product__add-to-cart__form .c7-btn--primary,
.product-panel .c7-product__add-to-cart .c7-product__add-to-cart__form .c7-btn--primary {
	background: #dbe4c4 !important;
	color: #363535;
	font-family: Alegreya, sans-serif;
	font-size: 22px;          /* source: 2.2rem @ 62.5% */
	border-radius: 3px;
	padding: 0 10px;
	border: 0;
	line-height: 38px;
	text-transform: uppercase;
}

/* ---- global Commerce7, not collection-specific ---- */

/**
 * These two are unscoped in the source and apply on every C7 page. They live here because the
 * collection is the first C7 page rebuilt; move them to a shared file once the detail page and
 * cart follow, rather than duplicating them there.
 */
.c7-btn--primary:hover { color: #fff; }
#c7-no-content { display: none; }