/* Sept 2026 client feedback round — catalog.
 *
 * Product-type archive (303), brand archive (238), Brands page (1234),
 * Products page (118) and the shared stamp band. Loaded after
 * kayem-site.css and kayem-mobile-templates.css.
 */

/* ── Stamp band on phones (rows 19/24/30/35/40/45 + 50/56/61/67) ──────────
 * The band is a wrapping flex row, so each stamp is only as wide as its own
 * caption: a one-word caption sits in a 70px column, a four-word caption in a
 * 150px one, and the marks end up on no shared centre line — the "stamps are
 * misaligned" the client is seeing. On phones the band becomes a grid of equal
 * 106px columns instead: three across, or a 2 × 2 block when a term carries
 * four stamps (Al Fresco, Sausages). Desktop and tablet are untouched. */
@media (max-width: 767px) {

	body.tax-brand .kp-stamps-layout-below .kp-stamps,
	body.tax-product-type .kp-stamps-layout-below .kp-stamps {
		align-items: start;
		column-gap: 6px;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		justify-content: center;
		justify-items: center;
		margin-left: auto;
		margin-right: auto;
		max-width: 340px;
		row-gap: 24px;
	}

	/* Two stamps — keep them as a pair rather than a left-hugging 3-track row. */
	body.tax-brand .kp-stamps-layout-below .kp-stamps:has(> :nth-child(2)):not(:has(> :nth-child(3))),
	body.tax-product-type .kp-stamps-layout-below .kp-stamps:has(> :nth-child(2)):not(:has(> :nth-child(3))),
	/* Exactly four stamps — 2 × 2 instead of 3 + 1. */
	body.tax-brand .kp-stamps-layout-below .kp-stamps:has(> :nth-child(4)):not(:has(> :nth-child(5))),
	body.tax-product-type .kp-stamps-layout-below .kp-stamps:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 236px;
	}

	/* One stamp — a single centred column. */
	body.tax-brand .kp-stamps-layout-below .kp-stamps:not(:has(> :nth-child(2))),
	body.tax-product-type .kp-stamps-layout-below .kp-stamps:not(:has(> :nth-child(2))) {
		grid-template-columns: minmax(0, 1fr);
		max-width: 130px;
	}

	body.tax-brand .kp-stamps-layout-below .kp-stamps .kp-stamp,
	body.tax-product-type .kp-stamps-layout-below .kp-stamps .kp-stamp {
		gap: 10px;
		width: 100%;
	}

	/* The caption wraps inside its column, so the marks stay on one centre line. */
	body.tax-brand .kp-stamps-layout-below .kp-stamps .kp-badge-label,
	body.tax-product-type .kp-stamps-layout-below .kp-stamps .kp-badge-label {
		font-size: 13px;
		line-height: 1.25;
		max-width: 100%;
	}

	/* The wide "diamond" mark is 1.56 × the stamp size — keep it inside its column. */
	body.tax-brand .kp-stamps-layout-below .kp-stamps .kp-badge-svg,
	body.tax-product-type .kp-stamps-layout-below .kp-stamps .kp-badge-svg {
		max-width: 100%;
	}

	/* ── Brand archive hero on phones (rows 49/55/60/66) ──────────────────
	 * The brand logo, headline, copy and button are centred as one block on
	 * phones; the two-column desktop hero is untouched. */
	body.tax-brand .elementor-element.elementor-element-27b36c9 {
		align-items: center;
		text-align: center;
	}

	body.tax-brand .elementor-element.elementor-element-6840f2a {
		align-self: center;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	body.tax-brand .elementor-element.elementor-element-6840f2a img {
		margin-left: auto;
		margin-right: auto;
	}

	body.tax-brand .elementor-element.elementor-element-00fe659 .elementor-heading-title,
	body.tax-brand .elementor-element.elementor-element-4dbc408,
	body.tax-brand .elementor-element.elementor-element-4dbc408 p {
		text-align: center;
	}

	/* ── Brands page (1234): the "Ready to Serve / Get Inspired" band ─────
	 * The band is the same one the brand archives use, so it carries the same
	 * absolutely-positioned plate photo. kayem-site.css sizes that photo under
	 * body.tax-brand only; the Brands page needs the same treatment or the
	 * 480px image pushes the page sideways. */
	body.page-id-1234 .elementor-element.elementor-element-62ab458 {
		left: 0;
		max-width: 100%;
		right: auto;
		width: 100%;
	}

	body.page-id-1234 .elementor-element.elementor-element-62ab458 img {
		height: auto;
		max-width: 100%;
		width: 100%;
	}
}

/* Products page: the hero photo "peeks" ~57px into the filter bar; keep the new search row clear of it on desktop. */
@media (min-width: 1025px) {
  body.page-id-118 #product-search .kf-top { margin-top: 44px; }
}