/**
 * Mobile layout only — max-width 767px
 *
 * Tablet: 768px–1180px → tablet-responsive.css
 * Desktop: 1181px+ → theme defaults
 *
 * Loaded after tablet-responsive.css so tablet rules never override mobile.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL — applied to every page on mobile
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

	/* Prevent horizontal overflow on any page */
	html, body {
		overflow-x: hidden;
		max-width: 100%;
	}

	/* Consistent wrapper safe-area padding */
	.wrapper,
	.container,
	body.gl-sp-reference .gl-sp-wrap.wrapper,
	body.gl-sp-reference.single-product .bread-bg .wrapper {
		padding-left:  max(16px, env(safe-area-inset-left,  0px)) !important;
		padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
		box-sizing: border-box;
		max-width: 100% !important;
	}

	/* Breadcrumbs: wrap for readability (long Norwegian paths) */
	.bread-bg #breadcrumbs,
	.woocommerce-breadcrumb,
	#breadcrumbs,
	body.gl-sp-reference.single-product #breadcrumbs {
		overflow-x: visible;
		white-space: normal;
		font-size: 1.3rem;
		line-height: 1.45;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* ── Single post / article ─────────────────────────────────── */
	.single .post-content-wrapper,
	article.post .post-content-wrapper,
	.entry-content {
		max-width: 100%;
		overflow-x: hidden;
	}

	.single .post-content-wrapper h1,
	.single .post-content-wrapper h2,
	.single .entry-title {
		font-size: clamp(1.4rem, 6vw, 1.75rem);
		line-height: 1.2;
	}

	.single .post-content-wrapper h2 { font-size: clamp(1.25rem, 5vw, 1.5rem); }
	.single .post-content-wrapper h3 { font-size: clamp(1.1rem, 4.5vw, 1.3rem); }

	.single .post-content-wrapper p,
	.single .entry-content p {
		font-size: 1rem;
		line-height: 1.7;
	}

	.single .post-content-wrapper img,
	.single .entry-content img {
		max-width: 100%;
		height: auto;
	}

	/* Post thumbnail */
	.single .post-thumbnail-wrapper {
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 8px;
		margin-bottom: 20px;
	}

	.single .post-thumbnail-wrapper img {
		width:  100%;
		height: 100%;
		object-fit: cover;
	}

	/* ── Search results ─────────────────────────────────────────── */
	.search-results .archive-container {
		padding-left:  max(14px, env(safe-area-inset-left,  0px));
		padding-right: max(14px, env(safe-area-inset-right, 0px));
	}

	.search-results .archive-header {
		text-align: left;
		padding: 0;
	}

	.search-results .searchform input[type="search"] {
		font-size: 1rem;
		min-height: 48px;
	}

	/* ── 404 page ────────────────────────────────────────────────── */
	.error404 .main-wrap {
		padding: clamp(40px, 10vw, 80px) max(14px, env(safe-area-inset-left, 0px));
		text-align: center;
	}

	.error404 h1.page-title {
		font-size: clamp(2.5rem, 15vw, 5rem);
		line-height: 1;
		margin-bottom: 12px;
	}

	.error404 .page-content h2 {
		font-size: clamp(1.25rem, 5.5vw, 1.5rem);
	}

	.error404 .page-content p {
		font-size: 1rem;
		line-height: 1.65;
	}

	.error404 .page-content .searchform {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
	}

	.error404 .page-content .searchform input[type="search"] {
		width: 100%;
		min-height: 48px;
		font-size: 1rem;
		box-sizing: border-box;
	}

	.error404 .page-content .searchform input[type="submit"],
	.error404 .page-content .searchform button {
		width: 100%;
		min-height: 48px;
	}

	.error404 .page-content .go-home-btn,
	.error404 a.button,
	.error404 .btn {
		display: inline-block;
		width: 100%;
		min-height: 48px;
		text-align: center;
		box-sizing: border-box;
	}

	/* ── Comments section ────────────────────────────────────────── */
	#comments {
		padding: 0 max(14px, env(safe-area-inset-left, 0px));
		box-sizing: border-box;
	}

	#respond .comment-form p {
		margin-bottom: 12px;
	}

	#respond input,
	#respond textarea {
		width: 100%;
		font-size: 1rem;
		min-height: 44px;
		box-sizing: border-box;
	}

	#respond .submit {
		width: 100%;
		min-height: 48px;
	}



}

/* ── Mobile rules for existing content elements ─────────────────────────── */
@media (max-width: 767px) {
	/* ─── Related products: single column, full-width cards ─────────────────── */
	body.gl-sp-reference.single-product .product > section.gl-sp-related.products ul.products,
	body.gl-sp-reference .gl-sp-related ul.products {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden;
	}

	body.gl-sp-reference .gl-sp-related {
		overflow-x: hidden;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	body.gl-sp-reference .gl-sp-related ul.products li.product {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	body.gl-sp-reference .gl-sp-related .gl-product-card,
	body.gl-sp-reference .gl-sp-related .product-list-item {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	body.gl-sp-reference .gl-sp-related .gl-product-card__cta a.button,
	body.gl-sp-reference .gl-sp-related .mozaic-price-btn a.button {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	body.gl-sp-reference .gl-sp-related__head {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	/* ─── Pre-footer red CTA strip — removed.
	   .ftr-cta-strip* is emitted by no PHP or JS; the banner was taken out of
	   footer.php. ─────────────────────────────────────────────────────────── */

	/* ─── Main footer: single-column stacked layout ───────────────────────── */
	.ftr-main {
		padding: 40px 0 0;
		overflow-x: hidden;
	}

	.ftr-main > .wrapper,
	.ftr-bottom > .wrapper {
		box-sizing: border-box;
		padding-left: max(16px, env(safe-area-inset-left, 0));
		padding-right: max(16px, env(safe-area-inset-right, 0));
	}

	.ftr-grid {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
		padding-bottom: 36px !important;
	}

	.ftr-col {
		width: 100%;
		min-width: 0;
	}

	.ftr-col__heading {
		font-size: 14px;
		margin-bottom: 14px;
	}

	.ftr-tagline {
		font-size: 14px;
		line-height: 1.65;
		margin-bottom: 18px;
	}

	.ftr-logo img {
		max-width: 160px;
		height: auto;
	}

	.ftr-social {
		gap: 12px;
	}

	.ftr-social a {
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
	}

	.ftr-links {
		gap: 12px;
	}

	.ftr-links a {
		font-size: 14px;
		line-height: 1.5;
		padding: 3px 0;
	}

	.ftr-contact {
		gap: 18px;
	}

	.ftr-contact li {
		gap: 12px;
		align-items: flex-start;
	}

	.ftr-contact span:first-child {
		font-size: 14px;
	}

	.ftr-contact span {
		font-size: 13px;
		line-height: 1.45;
	}

	.ftr-bottom {
		padding: 16px 0 max(16px, env(safe-area-inset-bottom, 0));
	}

	.ftr-bottom__inner {
		grid-template-columns: 1fr !important;
		justify-items: start !important;
		text-align: left !important;
		gap: 14px !important;
	}

	.ftr-bottom__copy,
	.ftr-bottom__links {
		justify-self: start !important;
		text-align: left !important;
		width: 100%;
		min-width: 0;
	}

	.ftr-bottom__copy {
		font-size: 12px;
		line-height: 1.5;
	}

	.ftr-bottom__links {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.ftr-bottom__links a {
		font-size: 13px;
	}
}