/*
 * Mobile-only layout safety layer.
 * Desktop and tablet art direction intentionally remain in the page styles.
 */
@media (max-width: 760px) {
	html { scroll-padding-top: 118px; }
	body { min-width: 0; overflow-x: hidden; overflow-x: clip; }
	.ec-shell,
	.ec-shell > *,
	.ec-header,
	.ec-header__inner,
	main,
	.ec-footer { min-width: 0; max-width: 100%; }

	/* Content never widens the phone viewport. Individual components retain
	 * their intended proportions, but media and form controls may shrink. */
	:where(main, .ec-footer) :is(img, picture, video, canvas, iframe) { max-inline-size: 100%; }
	:where(main, .ec-footer) picture { display: block; }
	:where(input, select, textarea, button) { max-inline-size: 100%; }
	:where(.ec-pdp, .ec-linen-product, .ec-contact, .ec-checkout, .ec-orders-page) :is(h1, h2, h3, p, a, dd, strong, em) { overflow-wrap: anywhere; }

	.ec-header__inner { column-gap: 12px; row-gap: 8px; }
	.ec-actions { min-width: 0; flex-wrap: nowrap; }
	.ec-nav.is-expanded { max-height: calc(100svh - 104px); overflow-y: auto; overscroll-behavior: contain; }

	/* Keep the two purchase actions on one usable row, even with long labels. */
	.ec-pdp__form,
	.ec-linen-product__form { gap: 14px 10px; }
	.ec-pdp__add,
	.ec-pdp__buy-now,
	.ec-linen-product__add,
	.ec-linen-product__buy-now { min-width: 0; padding-inline: 8px; letter-spacing: .11em; white-space: nowrap; }
	.ec-pdp__choicehead,
	.ec-linen-product__field-head { align-items: center; gap: 12px; }

	.ec-checkout__mast,
	.ec-checkout__layout { padding-inline: 18px; }
	.ec-order__button { max-width: 100%; white-space: normal; }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Very narrow handsets need a single-column checkout field row rather than
 * squeezing four inputs below their usable width. */
@media (max-width: 420px) {
	.ec-checkout__fieldgrid--four { grid-template-columns: 1fr; }
	.ec-pdp__add,
	.ec-pdp__buy-now,
	.ec-linen-product__add,
	.ec-linen-product__buy-now { font-size: 9px; letter-spacing: .09em; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}