/* ------------------------------------------------------------------
 * EBIKESCHNELL — small-screen corrections for the compiled landing.
 *
 * The landing page is a Next.js static export: its Tailwind utilities
 * are baked into index.html and the generated CSS only contains the
 * classes that build used, so a new breakpoint cannot be expressed by
 * editing class names. These rules are therefore the source of truth
 * for the phone widths the export gets wrong. Loaded last, after the
 * export's own chunks.
 *
 * One problem is fixed here:
 *
 *   The sticky purchase bar escalates its own chrome at 360px
 *   (gap 12->16, left pad 14->16, thumbnail 52->64, CTA padding
 *   16->24 per side). That spends ~34px on chrome for the 40px of
 *   viewport gained over 320px, so the middle column — the product
 *   name — was squeezed to 98px for 131px of text. The name is set
 *   `white-space:nowrap` with the default `overflow:visible`, so it
 *   did not truncate: it ran out of its column and under the CTA.
 *   360px was the single worst width on the whole site.
 *
 * The fix is the breakpoint, not the symptom: the compact chrome is
 * held until 400px, where the roomy version actually fits, and a
 * narrower tier is added for the 320-359px phones. The ellipsis is the
 * guarantee that the name can never bleed under the button again at
 * any width, whatever the product is called.
 *
 * Everything sits in @layer utilities on purpose. Tailwind emits its
 * own `!important` utilities inside that layer, and an important
 * declaration in a layer always beats an important one outside every
 * layer, however specific the unlayered selector is. Joining the layer
 * puts these rules back under ordinary specificity rules, where the
 * selectors below win.
 * ------------------------------------------------------------------ */

@layer utilities {
	/* The bar itself: fixed, full-bleed, phone-only. */
	.fixed.inset-x-0.bottom-0.z-40[class*="md:hidden"] p[class*="whitespace-nowrap"] {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 360px–399px: hold the compact chrome the export uses below 360. */
	@media (max-width: 399.98px) {
		.fixed.inset-x-0.bottom-0.z-40[class*="md:hidden"] > div {
			gap: 0.75rem;
			padding-left: 0.875rem;
			padding-right: 0.75rem;
		}

		.fixed.inset-x-0.bottom-0.z-40[class*="md:hidden"] > div > span:first-child {
			width: 3.25rem;
		}

		.fixed.inset-x-0.bottom-0.z-40[class*="md:hidden"] a.ew-btn {
			padding-inline: 1rem !important;
		}
	}

	/* 320px–359px: one step tighter again, so the name still fits whole
	   on the narrowest phones the shop supports. */
	@media (max-width: 359.98px) {
		.fixed.inset-x-0.bottom-0.z-40[class*="md:hidden"] > div {
			gap: 0.5rem;
			padding-left: 0.75rem;
			padding-right: 0.5rem;
		}

		.fixed.inset-x-0.bottom-0.z-40[class*="md:hidden"] > div > span:first-child {
			width: 2.75rem;
		}

		.fixed.inset-x-0.bottom-0.z-40[class*="md:hidden"] a.ew-btn {
			padding-inline: 0.75rem !important;
		}
	}
}