/* NoirMusk — phone layout rules that apply across pages (767px and below). Loaded after every page stylesheet. */

@media (max-width: 767px) {

	/* ---------- sub-page headers ----------
	   The tall banner (was 150px 20px) is a compact 60px 20px header on phones; its title and short intro are centred,
	   the same as on desktop. */
	html body .page-header.page-header--default,
	html body .noirmusk-shop-hero,
	html body .noirmusk-contact-hero,
	html body .noirmusk-about-hero,
	html body .elementor-top-section:has(.lakit-breadcrumbs-page-title-yes) {
		min-height: 0 !important;
		padding: 60px 20px 60px !important;
		text-align: center !important;
	}
	html body .page-header.page-header--default .page-header-inner,
	html body .noirmusk-shop-hero__inner,
	html body .noirmusk-contact-hero__inner,
	html body .noirmusk-about-hero__inner {
		max-width: none;
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}
	html body .page-header.page-header--default .entry-title,
	html body .noirmusk-shop-hero__title,
	html body .noirmusk-contact-hero__title,
	html body .noirmusk-about-hero h1,
	html body .elementor-top-section:has(.lakit-breadcrumbs-page-title-yes) .lakit-breadcrumbs__title {
		margin: 0;
		text-align: center !important;
	}
	html body .noirmusk-shop-hero p,
	html body .noirmusk-contact-hero p,
	html body .noirmusk-about-hero p {
		margin: 8px auto 0;
		font-size: 14px;
		line-height: 1.55;
		text-align: center;
	}

	/* ---------- product grids in the page content (shop, categories, related products) ----------
	   The theme gives the product list -15px side margins to line up columns, which pushed the cards
	   edge to edge on a phone. Give them the same 20px gutter as the rest of the page. */
	html body #site-content-wrap.container:has(ul.products) {
		padding-left: 20px;
		padding-right: 20px;
	}
	html body #site-content-wrap ul.products {
		margin-left: 0;
		margin-right: 0;
	}

	/* ---------- single product page on phones ---------- */
	html body .noirmusk-product-breadcrumb-wrap {
		padding: 60px 0 20px;
	}
	html body .noirmusk-accordion {
		margin-top: 30px;
	}

	/* Long Lasting / Premium Quality / Doorstep Delivery: three squeezed cards become three tidy rows
	   (icon on the left, text on the right) instead of narrow columns with one-word lines */
	html body .noirmusk-trust-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		margin-top: 24px;
	}
	html body .noirmusk-trust-row li {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 14px 16px;
		text-align: left;
	}
	html body .noirmusk-trust-row .noirmusk-trust-icon {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
	}
	html body .noirmusk-trust-row .noirmusk-trust-text {
		min-width: 0;
		gap: 2px;
	}
	html body .noirmusk-trust-row .noirmusk-trust-text strong {
		font-size: 15px;
	}
	html body .noirmusk-trust-row .noirmusk-trust-text span {
		font-size: 13px;
	}
}