/* Kayem — mobile design pass for the ARCHIVE / TEMPLATE layer (2026-09-09).
 *
 * Covers: brand archive (238), industry archive (297), product-type archive (303)
 * and the product loop card (155). Product single (388) lives in the plugin's
 * kayem-product-page.css.
 *
 * Everything is inside a phone media query — desktop and tablet are untouched.
 * Spacing scale on phones: 56/48 section padding, 20px side gutters, 24/18/12
 * for inner rhythm. Type scale: h1 30-34, h2 28, card title 15, eyebrow 12-13.
 */

@media (max-width: 767px) {

	/* ── Product loop cards, two-up ──────────────────────────────────────
	 * The archive grids run two columns on phones (columns_mobile = 2 plus the
	 * .kayem-grid-2up class on the loop-grid widget). The card template is
	 * shared site-wide, so every rule here is scoped to that class: a grid that
	 * stays one column keeps the original card proportions. */

	.kayem-grid-2up .elementor-grid {
		--grid-column-gap: 12px;
		--grid-row-gap: 18px;
		grid-column-gap: 12px;
		grid-row-gap: 18px;
	}

	.kayem-grid-2up .kayem-loop-card {
		border-radius: 10px;
		height: 100%;
	}

	/* Packshots are photographed to the edges of the pack: contain (on the
	 * white ground the shots already carry) keeps every product whole where a
	 * cover crop would slice the top and bottom off at card width. */
	.kayem-grid-2up .kayem-loop-card .elementor-widget-image img {
		background: #fff;
		height: 158px !important;
		object-fit: contain !important;
	}

	/* Product title */
	.kayem-grid-2up .kayem-loop-card .elementor-element-a9707b2 {
		padding: 12px 12px 0 !important;
	}

	.kayem-grid-2up .kayem-loop-card .elementor-element-a9707b2 .elementor-heading-title {
		font-size: 15px !important;
		line-height: 1.22 !important;
	}

	/* "Made with" line */
	.kayem-grid-2up .kayem-loop-card .elementor-element-e86cc53 {
		padding: 5px 12px 14px !important;
	}

	.kayem-grid-2up .kayem-loop-card .elementor-element-e86cc53 .elementor-heading-title {
		font-size: 12px !important;
		line-height: 1.3 !important;
	}

	/* Item-number pennant */
	.kayem-grid-2up .kayem-loop-card .elementor-element-f58bc6d {
		font-size: 11px !important;
		min-width: 46px !important;
		padding: 9px 4px !important;
	}

	.kayem-grid-2up .kayem-loop-card .elementor-element-f58bc6d p {
		font-size: 11px !important;
	}

	/* ── Brand archive (238): hero copy on the page gutter ───────────────── */
	body.tax-brand .elementor-element.elementor-element-27b36c9 {
		padding: 32px 20px 44px;
	}

	/* ── Industry archive (297): testimonial band ────────────────────────── */
	body.tax-industry .elementor-element-d369337 .elementor-heading-title {
		line-height: 1.3 !important;
	}

	body.tax-industry .elementor-element-a80e137,
	body.tax-industry .elementor-element-a80e137 p {
		font-size: 12px !important;
		line-height: 1.4;
	}

	/* ── Product-type archive (303): hero photo ──────────────────────────
	 * The image widget is forced to a 1:1 box, which left ~90px of dead cream
	 * under a 4:3 photo. Same treatment the industry hero already gets. */
	body.tax-product-type .elementor-element.elementor-element-25eb08d,
	body.tax-product-type .elementor-element.elementor-element-25eb08d > .elementor-widget-container {
		aspect-ratio: auto !important;
		height: auto !important;
	}

	body.tax-product-type .elementor-element.elementor-element-25eb08d img {
		display: block;
		height: 280px;
		object-fit: cover;
		width: 100%;
	}

	/* ── Section headings across the three archives ──────────────────────── */
	body.tax-brand .elementor-widget-heading .elementor-heading-title,
	body.tax-industry .elementor-widget-heading .elementor-heading-title,
	body.tax-product-type .elementor-widget-heading .elementor-heading-title {
		overflow-wrap: break-word;
	}

}