/* Final bounded mobile commerce presentation pass.
 * Shared retail-card density stays centralized here; route-specific layout
 * selectors govern Shop/Skincare catalog composition and the bounded mobile
 * single-product quantity segmentation that shares the canonical action rail. */

@media (max-width: 520px) {
	/* Mobile retail catalogs stay dense enough for discovery without changing
	 * tablet/desktop geometry or commerce behavior. */
	[data-gloskin-section="shop-products"] .gloskin-ui1-product-grid,
	[data-gloskin-section="shop-products"] .gloskin-ui1-shop-skeleton__grid,
	.gloskin-skincare-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
		align-items: stretch;
	}

	[data-gloskin-section="shop-products"] .gloskin-ui1-card--product,
	.gloskin-skincare-product-card .gloskin-ui1-card--product {
		min-width: 0;
		height: 100%;
		overflow: hidden;
	}

	[data-gloskin-section="shop-products"] .gloskin-ui1-card--product .gloskin-ui1-card__media-wrap,
	.gloskin-skincare-product-card .gloskin-ui1-card__media-wrap {
		height: auto;
		aspect-ratio: 1 / 1;
		padding: 0;
		border: 0;
		border-radius: 0;
	}

	[data-gloskin-section="shop-products"] .gloskin-ui1-card--product .gloskin-ui1-card__body,
	.gloskin-skincare-product-card .gloskin-ui1-card__body {
		padding: 13px 11px 12px;
	}

	[data-gloskin-section="shop-products"] .gloskin-ui1-card--product .gloskin-ui1-card__title,
	.gloskin-skincare-product-card .gloskin-ui1-card__title {
		margin-bottom: 7px;
		font-size: clamp(.875rem, 3.75vw, .95rem);
		line-height: 1.32;
		overflow-wrap: anywhere;
	}

	[data-gloskin-section="shop-products"] .gloskin-ui1-card--product .gloskin-ui1-card__copy {
		margin-top: 7px;
		font-size: .75rem;
		line-height: 1.4;
	}

	[data-gloskin-section="shop-products"] .gloskin-ui1-card--product .gloskin-ui1-product-price,
	.gloskin-skincare-product-card .gloskin-ui1-product-price {
		font-size: clamp(.8125rem, 3.5vw, .9rem);
		line-height: 1.35;
		overflow-wrap: anywhere;
	}

	[data-gloskin-section="shop-products"] .gloskin-ui1-card--product .gloskin-ui1-product-availability,
	.gloskin-skincare-product-card .gloskin-ui1-product-availability {
		font-size: .75rem;
		line-height: 1.35;
		overflow-wrap: anywhere;
	}

	[data-gloskin-section="shop-products"] .gloskin-ui1-card--product .gloskin-ui1-card__actions,
	.gloskin-skincare-product-card .gloskin-ui1-card__actions {
		margin-top: auto;
		padding-top: 12px;
	}

	[data-gloskin-section="shop-products"] .gloskin-ui1-card--product .gloskin-ui1-card__actions > .gloskin-ui1-button,
	[data-gloskin-section="shop-products"] .gloskin-ui1-card--product .gloskin-ui1-card__actions > .button,
	[data-gloskin-section="shop-products"] .gloskin-ui1-card--product .gloskin-ui1-card__actions > a.add_to_cart_button,
	.gloskin-skincare-product-card .gloskin-ui1-card__actions > .gloskin-ui1-button,
	.gloskin-skincare-product-card .gloskin-ui1-card__actions > .button,
	.gloskin-skincare-product-card .gloskin-ui1-card__actions > a.add_to_cart_button {
		min-height: 44px;
		padding: 8px 9px;
		font-size: .75rem;
		line-height: 1.2;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.gloskin-skincare-product-card .gloskin-ui1-card__actions > a.add_to_cart_button::before,
	.gloskin-skincare-product-card .gloskin-ui1-card__actions > .gloskin-ui1-button:not(.gloskin-ui1-card__navigation-action)::before,
	.gloskin-skincare-product-card .gloskin-ui1-card__actions > .button::before {
		width: 15px;
		height: 15px;
		flex-basis: 15px;
	}

	/* Shop categories are fully visible: wrapping is intentional, not a swipe
	 * rail. Query ownership and anchor URLs remain unchanged. */
	.gloskin-ui1-shop-categories {
		overflow: visible !important;
	}
	.gloskin-ui1-shop-categories ul {
		display: flex !important;
		flex-wrap: wrap !important;
		width: 100%;
		min-width: 0;
		gap: 8px;
		overflow-x: visible !important;
		overscroll-behavior-inline: auto;
		padding: 2px 0 4px;
		scroll-snap-type: none !important;
	}
	.gloskin-ui1-shop-categories li {
		flex: 0 1 auto;
		max-width: 100%;
	}
	.gloskin-ui1-shop-categories a {
		width: auto;
		max-width: 100%;
		min-height: 44px;
		padding: 8px 12px;
		font-size: .8125rem;
		white-space: normal;
		scroll-snap-align: none;
	}

	/* Skincare category controls already compose with search; preserve that
	 * behavior while preventing the shared <=760px swipe-rail fallback. */
	.gloskin-skincare-page .gloskin-ui1-chip-filter {
		display: flex;
		flex-wrap: wrap !important;
		overflow-x: visible !important;
		padding-bottom: 0;
		scroll-snap-type: none !important;
	}
	.gloskin-skincare-page .gloskin-ui1-chip {
		max-width: 100%;
		min-height: 44px;
		padding: 8px 12px;
		font-size: .8125rem;
		white-space: normal;
	}


}

@media (min-width: 521px) and (max-width: 900px) {
	/* Shop filters wrap on tablet as well; catalog columns remain owned by the
	 * canonical responsive product-grid contract. */
	.gloskin-ui1-shop-categories { overflow: visible !important; }
	.gloskin-ui1-shop-categories ul {
		display: flex !important;
		flex-wrap: wrap !important;
		overflow-x: visible !important;
		scroll-snap-type: none !important;
		padding-inline: 0;
	}
	.gloskin-ui1-shop-categories li { flex: 0 1 auto; }
	.gloskin-ui1-shop-categories a { width: auto; white-space: normal; scroll-snap-align: none; }
}