/* ==========================================================================
   Gertrudes — service strip (.policy-block) small-phone tuning, 2026-08-23
   --------------------------------------------------------------------------
   The block is a PlazaThemes static block: its markup lives in the DATABASE
   (Admin → Extensions → Modules → Static Block), so there is no template to
   link a stylesheet from — this file is linked by common/footer.twig, which
   loads on every page after every other sheet. Nothing here is scoped to the
   footer; the block simply renders just above it.

   Stock CSS (stylesheet.css:110-118, 120-128) gives the strip four columns,
   drops to two at 991px, and only reaches one column at **359px** — so the
   375px class of phone (iPhone SE/12 mini/13 mini, Android "Mobile M") gets
   the tightest possible two-up: a 40px icon plus a 15px gutter inside a
   ~165px column, leaving ~110px for a 16px semibold title. "Free Shipping"
   and "100% Payment Secure" both wrapped, and because each .box is a
   centred inline-block the two columns' icons sat at different left edges.
   At 425px ("Mobile L") the same layout has enough room and looks right,
   which is why this only narrows the type below 420px rather than moving
   the single-column breakpoint — one column at 375px would turn a compact
   strip into four tall stacked rows.

   Sized in px, not rem: the two headers resolve rem differently (see
   docs/frontend-css-architecture.md).
   ========================================================================== */

@media (max-width: 420px) {
	.policy-block {
		padding: 10px 4px;
	}

	/* Top-align the pair so both icons and both titles start on the same
	   line even when one title wraps — stock centres each column against
	   its neighbour, which is what made the 2x2 read as crooked. */
	.policy-block > .inner {
		align-items: flex-start;
	}

	.policy-block .col {
		padding: 10px 4px;
	}

	/* Stock centres each box as an inline-block, so a short label and a long
	   one start at different left edges. Full width + left aligned puts every
	   icon on the same rail. */
	.policy-block .box {
		display: block;
		width: 100%;
		margin: 0;
		text-align: left;
	}

	.policy-block .box > .inner {
		align-items: center;
	}

	/* The PNGs are 40px wide with no width/height attribute of their own. */
	.policy-block .box img {
		flex: 0 0 auto;
		width: 30px;
		height: auto;
	}

	.policy-block .box .text {
		min-width: 0;
		margin-left: 9px;
	}

	.policy-block .box label {
		margin-bottom: 2px;
		font-size: 13px;
		line-height: 17px;
	}

	.policy-block .box p {
		font-size: 11.5px;
		line-height: 15px;
	}
}