/**
 * Product card — Discount Pet Food
 *
 * Everything that styles an Elementor Loop Grid card, split out of
 * category.css so it can load wherever loop grids appear.
 *
 * They are not only on category archives: the homepage runs two of them
 * ("Featured products" and "Most popular products") off the same loop item
 * template (940392), so the markup is byte-identical and only the stylesheet
 * was missing. category.css keeps what is genuinely archive-only — the Load
 * More control, the bulk-pricing banner and the badge.
 *
 * Enqueued globally rather than detected per page: a Loop Grid can be dropped
 * into any template, and enqueueing from inside the widget's own render would
 * put this in the footer — exactly the layout shift the Load More work went to
 * some trouble to remove.
 *
 * Tokens come from header.css, which is enqueued globally.
 */

/* ------------------------------------------------------- product cards */

/*
 * The loop card was four widgets floating on the page background: no surface,
 * no border, nothing tying a photo to its own title and price. Worse, Elementor
 * sets --justify-content:flex-end on the card's container, which pushes all
 * four to the bottom and opens a tall empty band above every product — the same
 * "is anything even here?" effect the pagination fix was about.
 *
 * Overrides here go through Elementor's container variables rather than the
 * layout properties, because it writes those at
 *   .elementor-940392 .elementor-element.elementor-element-a6fbded
 * which is (0,3,0). The selectors below reach (0,4,0) by doubling .e-con
 * instead of naming that generated element id, so they survive the loop
 * template being rebuilt or duplicated.
 */

/* Gaps were sized for cards with no edges. With a surface they can close up. */
.elementor-widget-loop-grid .elementor-loop-container {
	--grid-row-gap: 28px;
	--grid-column-gap: 24px;
}

/* The card surface. Relative so the stretched link below can cover it. */
.elementor-loop-container > .e-loop-item {
	position: relative;
	display: flex;
	background: #fff;
	border: 1px solid var(--dpf-line);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color var(--dpf-speed) ease, box-shadow var(--dpf-speed) ease, transform var(--dpf-speed) ease;
}

.elementor-loop-container > .e-loop-item:hover {
	border-color: var(--dpf-green-mid);
	box-shadow: 0 10px 24px -14px rgba(0, 40, 24, 0.45);
	transform: translateY(-2px);
}

/* Content starts at the top; the button is pushed down separately below, so
   the card reads image -> name -> price -> action with no floating band. */
.elementor-loop-container > .e-loop-item > .e-con.e-con {
	--justify-content: flex-start;
	--padding-top: 14px;
	--padding-bottom: 16px;
	--padding-left: 14px;
	--padding-right: 14px;
	/* Elementor resolves the gap as `var(--row-gap) var(--column-gap)`;
	   setting --gap alone does nothing. */
	--row-gap: 10px;
	--column-gap: 10px;
	width: 100%;
}

/*
 * Photo box.
 *
 * Fixed square regardless of the file's own proportions: the catalogue mixes
 * 300x341 and 300x300 originals, and left to themselves those give every card
 * a different image height, so titles and prices stop lining up across a row.
 * `contain` rather than `cover` because these are products on white — cropping
 * to fill would slice the edges off bags and tins.
 *
 * The box is sized explicitly so a missing image cannot collapse the row.
 */
.elementor-loop-container > .e-loop-item .elementor-widget-theme-post-featured-image {
	width: 100%;
}

/*
 * The square is held by the CONTAINER, not the <img>.
 *
 * Sizing the image itself looked right until a product whose file was missing:
 * a broken <img> has no intrinsic size, `width:100%` does not resolve against
 * it, and the card collapsed to a 22px icon with a tall empty gap beneath.
 * Three of the first four products on this archive did exactly that. Putting
 * aspect-ratio on the wrapper means the box exists whether or not the file
 * loads, so one bad image can no longer wreck the row.
 *
 * It sits inside the card padding rather than bleeding to the edge, because
 * Elementor's base CSS gives `.e-con-inner` `padding-inline: 0` and a
 * full-bleed image would mean negative margins fighting a rule that is not
 * ours.
 */
.elementor-loop-container > .e-loop-item .elementor-widget-theme-post-featured-image .elementor-widget-container {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--dpf-line);
	border-radius: 10px;
	background: #f7faf8;
}

.elementor-loop-container > .e-loop-item .elementor-widget-theme-post-featured-image .elementor-widget-container > a {
	display: block;
	width: 100%;
	height: 100%;
}

.elementor-loop-container > .e-loop-item .elementor-widget-theme-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 10px;
	object-fit: contain;
}

/* Two lines for every title, so the price sits on the same baseline across a
   row whether the name is short or long. */
.elementor-loop-container > .e-loop-item .elementor-widget-woocommerce-product-title {
	width: 100%;
}

.elementor-loop-container > .e-loop-item .elementor-widget-woocommerce-product-title h2,
.elementor-loop-container > .e-loop-item .elementor-widget-woocommerce-product-title h3,
.elementor-loop-container > .e-loop-item .elementor-widget-woocommerce-product-title .elementor-heading-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
}

/* The action sits on the card floor whatever the title did above it. */
.elementor-loop-container > .e-loop-item .elementor-widget-button {
	width: 100%;
	margin-top: auto;
}

.elementor-loop-container > .e-loop-item .elementor-widget-button .elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	border-radius: 999px;
	font-family: "Montserrat", Sans-serif;
	font-size: 14px;
	font-weight: 700;
}

/*
 * MAKE THE WHOLE CARD CLICKABLE
 *
 * The card lifts and greens its border on hover, but measured, only 52% of it
 * actually did anything: the image (3-53% down) and the button (87-96%) are
 * links, while the title, price and bulk badge between them were dead. The
 * title is not a link at all. So the hover was promising a target that was not
 * there through the middle third of every card.
 *
 * Rather than drop the hover, the image's own link is stretched over the card.
 * Both existing links already point at the same product URL, so nothing new is
 * introduced; the image link is the one chosen because its accessible name
 * comes from the img alt, which is the product name — stretching the button
 * instead would announce every card as "View Product".
 */
/*
 * The card must be the overlay's containing block. Elementor gives both its
 * containers and its widgets position:relative, so without this the overlay
 * anchors to the image widget and covers only the photo — measured at 47%
 * coverage, barely different from the 52% it was meant to fix.
 */
.elementor-loop-container > .e-loop-item > .e-con,
.elementor-loop-container > .e-loop-item > .e-con > .e-con-inner,
.elementor-loop-container > .e-loop-item .elementor-widget-theme-post-featured-image,
.elementor-loop-container > .e-loop-item .elementor-widget-theme-post-featured-image .elementor-widget-container {
	position: static;
}

.elementor-loop-container > .e-loop-item .elementor-widget-theme-post-featured-image a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/*
 * The button is lifted above that overlay so it keeps its own hover, its own
 * focus ring and its own click. Without this the overlay would swallow the
 * pointer and the button would go inert-looking even though the card still
 * navigated.
 */
.elementor-loop-container > .e-loop-item .elementor-widget-button {
	position: relative;
	z-index: 2;
}

/* Keyboard focus lands on the stretched link, so draw the ring on the overlay
   — that outlines the whole card rather than just the photo. */
.elementor-loop-container > .e-loop-item .elementor-widget-theme-post-featured-image a:focus-visible {
	outline: 0;
}

.elementor-loop-container > .e-loop-item .elementor-widget-theme-post-featured-image a:focus-visible::after {
	outline: 3px solid var(--dpf-green-mid);
	outline-offset: -3px;
	border-radius: 14px;
}

/* The whole card is a link target in practice, so give the button a ring that
   is visible against the new surface. */
.elementor-loop-container > .e-loop-item .elementor-button:focus,
.elementor-loop-container > .e-loop-item .elementor-button:focus-visible,
.elementor-loop-container > .e-loop-item a:focus-visible {
	outline: 3px solid var(--dpf-green-mid);
	outline-offset: 2px;
}

.elementor-loop-container > .e-loop-item .elementor-button:focus:not(:focus-visible),
.elementor-loop-container > .e-loop-item a:focus:not(:focus-visible) {
	outline: 0;
}

@media (max-width: 480px) {
	.elementor-widget-loop-grid .elementor-loop-container {
		--grid-row-gap: 18px;
		--grid-column-gap: 14px;
	}

	.elementor-loop-container > .e-loop-item > .e-con.e-con {
		--padding-top: 10px;
		--padding-left: 10px;
		--padding-right: 10px;
		--padding-bottom: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-loop-container > .e-loop-item,
	.elementor-loop-container > .e-loop-item:hover {
		transition: none;
		transform: none;
	}
}