/* ==========================================================================
   MOBILE PLATFORM LAYER

   Loaded last, on every page, so it can correct the platform behaviour the
   other sheets never declare. It deliberately holds no new visual design —
   only the browser-level defaults that make a page feel like a web page
   instead of an app, plus the placement corrections the phone widths needed.

   Everything here is keyed off capability (`hover: none`, `pointer: coarse`)
   or width, never off a user-agent string.
   ========================================================================== */

/* ==========================================================================
   1. BASELINE — applies at every width
   ========================================================================== */

html {
	/* Stop iOS inflating body copy in landscape. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Kill the rubber-band overscroll that reveals the page background and
	   makes the document feel like it is floating on top of the browser. */
	overscroll-behavior-y: none;
	/* Several sections break the container with `margin-inline: calc(-50vw + 50%)`.
	   On a phone that is harmless, but any future 100vw child would open a
	   horizontal scroll the user can never scroll back from. `clip` does not
	   create a scroll container, so position: sticky keeps working. */
	overflow-x: clip;
}

body {
	overscroll-behavior-y: none;
}

/* The grey flash on tap. Not a focus ring — it fires on every touch, on top of
   whatever :active state the element already has, and it always looks broken. */
a,
button,
input,
select,
textarea,
label,
summary,
[role="button"],
[tabindex] {
	-webkit-tap-highlight-color: transparent;
}

/* `manipulation` drops the double-tap-to-zoom wait on controls. Pinch zoom on
   the page is untouched — never disable that. */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
.btn,
.lp-btn,
.nav-burger,
.nav-search-btn,
.lp-mood-btn,
.lp-viz-swatch,
.filter-pill,
.vis-shade-btn {
	touch-action: manipulation;
}

/* Controls only — never on body. Text has to stay selectable. */
button,
[role="button"],
.btn,
.lp-btn,
.nav-burger,
.nav-search-btn,
.lp-mood-btn,
.lp-viz-swatch,
.lp-hero-shadebar span,
.filter-pill,
.lp-ba-handle,
.vis-handle {
	-webkit-user-select: none;
	user-select: none;
}

/* Panels that scroll internally must not hand the gesture to the page when
   they hit their end. */
.main-nav,
.nav-search-panel,
.gallery-grid,
.lp-viz-swatches {
	overscroll-behavior: contain;
}

/* ==========================================================================
   2. FORM FIELDS — 16px floor

   Below 16px iOS Safari zooms the viewport in on focus and never zooms back
   out. The page-specific sheets set 0.88–0.95rem, several with !important, so
   this has to match that weight to win.
   ========================================================================== */
@media (max-width: 900px) {

	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="search"],
	input[type="password"],
	input[type="number"],
	input[type="date"],
	select,
	textarea,
	.form-input,
	.form-select,
	.form-textarea,
	.wc-block-components-text-input input,
	.wc-block-components-combobox input,
	.wc-blocks-components-select__select,
	.wc-block-components-quantity-selector__input,
	.wc-block-components-totals-coupon__input-wrapper input,
	.catalog-ordering-wrap select.orderby,
	.pdp-reviews-box .comment-form input[type="text"],
	.pdp-reviews-box .comment-form input[type="email"],
	.pdp-reviews-box .comment-form textarea {
		font-size: 16px !important;
	}

	/* The floating label in the Woo checkout is positioned against the input's
	   own metrics, so it has to move with it. */
	.wc-block-components-text-input label {
		font-size: 16px !important;
	}
}

/* ==========================================================================
   3. SAFE AREAS

   header.php ships `viewport-fit=cover`, so the page paints edge to edge and
   under the notch, the Dynamic Island and the home indicator. Everything
   pinned to an edge has to pay the inset back.
   ========================================================================== */

.site-header {
	top: 0;
	width: 100% !important;
	border-radius: 0 !important;
}

body.admin-bar .site-header {
	top: 32px;
}

/* The nav pill sets its own tighter gutter, so it takes the inset separately
   rather than inheriting the wider page one. */
.container:not(.nav-inner) {
	padding-left: max(clamp(1.25rem, 3.5vw, 4rem), env(safe-area-inset-left, 0px));
	padding-right: max(clamp(1.25rem, 3.5vw, 4rem), env(safe-area-inset-right, 0px));
}

.nav-inner {
	padding-left: max(clamp(16px, 3vw, 40px), env(safe-area-inset-left, 0px));
	padding-right: max(clamp(16px, 3vw, 40px), env(safe-area-inset-right, 0px));
}

.site-footer .footer-bottom {
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 900px) {
	.site-header {
		top: 0;
	}

	.nav-inner {
		padding-left: max(14px, env(safe-area-inset-left, 0px));
		padding-right: max(14px, env(safe-area-inset-right, 0px));
	}

	/* The WordPress admin bar is 46px below 782px, not 32px, and below 600px it
	   stops being fixed and scrolls away entirely — so no offset at all there. */
	body.admin-bar .site-header {
		top: 46px;
	}

	body.admin-bar .main-nav {
		top: calc(var(--nav-h, 74px) + 46px + env(safe-area-inset-top, 0px));
	}
}

@media (max-width: 600px) {
	body.admin-bar .site-header {
		top: 0;
	}

	body.admin-bar .main-nav {
		top: calc(var(--nav-h, 74px) + env(safe-area-inset-top, 0px));
	}
}

/* ==========================================================================
   4. THE NAV DRAWER & BACKDROP
   ========================================================================== */

/* Fullscreen dimmed backdrop behind mobile menu */
.nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(14, 30, 24, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
	z-index: 997;
}

body.nav-open .nav-backdrop {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Hide drawer footer on desktop */
@media (min-width: 861px) {
	.nav-drawer-footer {
		display: none !important;
	}

	.nav-backdrop {
		display: none !important;
	}
}

@media (max-width: 860px) {
	.main-nav {
		position: fixed;
		top: calc(var(--nav-h, 64px) + 16px + env(safe-area-inset-top, 0px));
		left: 12px;
		right: 12px;
		background: #FAF7F2;
		border: 1.5px solid var(--lp-ink, #07225B);
		border-radius: 20px;
		padding: 1.25rem 1.2rem 1.4rem;
		box-shadow: 0 24px 60px rgba(14, 30, 24, 0.28), 0 4px 16px rgba(14, 30, 24, 0.1);
		transform: translateY(-16px) scale(0.97);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease, visibility 0.28s;
		z-index: 999;
		max-height: calc(100dvh - var(--nav-h, 64px) - 36px - env(safe-area-inset-top, 0px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.main-nav.open,
	body.nav-open .main-nav {
		transform: translateY(0) scale(1);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.nav-list {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.35rem;
		width: 100%;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.nav-list li {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.nav-list a {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		min-height: 48px;
		padding: 10px 16px;
		border-radius: 12px;
		font-family: var(--lp-display, 'Montserrat', sans-serif);
		font-size: 1.25rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--lp-ink, #07225B);
		text-decoration: none;
		background: transparent;
		transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
		touch-action: manipulation;
		-webkit-user-select: none;
		user-select: none;
	}

	.nav-list a::after {
		display: none !important;
	}

	.nav-list a:active {
		background: rgba(7, 34, 91, 0.08);
		transform: scale(0.98);
	}

	.nav-list .current-menu-item a,
	.nav-list a[aria-current="page"] {
		background: var(--lp-ink, #07225B);
		color: var(--lp-paper, #FAF7F2) !important;
	}

	/* Drawer CTA & Advisory contact */
	.nav-drawer-footer {
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid rgba(7, 34, 91, 0.12);
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.nav-drawer-footer .btn-drawer {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		background: var(--lp-ink, #07225B);
		color: var(--lp-paper, #FAF7F2);
		border: 1.5px solid var(--lp-ink, #07225B);
		border-radius: 999px;
		font-family: var(--lp-display, 'Montserrat', sans-serif);
		font-size: 1.15rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-decoration: none;
		box-shadow: 0 4px 12px rgba(7, 34, 91, 0.15);
		transition: background-color 0.15s ease, transform 0.12s ease;
	}

	.nav-drawer-footer .btn-drawer:active {
		background: var(--lp-ochre, #FF7A00);
		color: var(--lp-ink, #07225B);
		transform: scale(0.98);
	}

	.nav-drawer-contact {
		text-align: center;
		font-size: 0.82rem;
		letter-spacing: 0.02em;
		color: var(--lp-muted, #5C6E66);
	}

	.nav-drawer-contact strong {
		color: var(--lp-ink, #07225B);
		font-weight: 700;
	}
}

/* ==========================================================================
   5. TAP TARGETS

   Scoped to coarse pointers so the desktop layout keeps its tighter chrome.
   ========================================================================== */
@media (pointer: coarse) {
	.nav-burger {
		min-width: 44px;
		min-height: 44px;
		align-items: center;
		justify-content: center;
	}

	.nav-search-btn {
		width: 44px;
		height: 44px;
	}

	.lp-mood-btn {
		min-height: 44px;
		padding-block: 0;
	}

	.filter-pill {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.vis-shade-btn {
		min-height: 48px;
	}

	/* 0.88rem links stacked 0.6em apart are ~23px rows sitting 9px from their
	   neighbour — the classic mis-tap in a footer. */
	.footer-col a,
	.footer-legal a {
		display: inline-block;
		padding-block: 9px;
	}

	.footer-col ul li {
		margin-bottom: 0;
	}

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

	/* 12 chips across a phone is a 31px-wide, 26px-tall target, and the
	   `:hover { flex: 2.8 }` expansion it relies on never fires on touch. */
	.lp-hero-shadebar {
		height: 44px;
	}
}

/* ==========================================================================
   6. HOVER IS NOT A STATE ON TOUCH

   A tap fires :hover and leaves it stuck until the next tap elsewhere, so
   every hover transform in the theme reads as a card that lifted and never
   came back down. Listed explicitly rather than swept with `*:hover` — several
   elements here (.vis-handle, .lp-ba-handle, .lp-cta-can) carry a transform
   for positioning, and a blanket reset would knock them out of place.
   ========================================================================== */
@media (hover: none) {

	.btn:hover .k2p-icon,
	.btn-primary:hover,
	.btn-ghost:hover,
	.nav-actions .btn:hover,
	.nav-search-btn:hover,
	.footer-social a:hover,
	.why-item:hover .why-icon,
	.vis-shade-btn:hover,
	.service-card:hover,
	.service-card:hover .service-media img,
	.service-link:hover .k2p-icon,
	.filter-pill:hover,
	.gallery-item:hover img,
	.shade-card:hover,
	.archive-card:hover,
	.dealer-card:hover,
	.section-link:hover,
	.lp .section-link:hover,
	.lp-section-head .section-link:hover,
	.lp-range-card:hover .lp-range-img img,
	.lp-range-card:hover .lp-range-link span,
	.lp-shade:hover .lp-shade-swatch,
	.lp-service:hover img,
	.lp-inspo-card:hover img,
	.lp-viz-swatch:hover,
	.lp-ba-slider:hover .lp-ba-thumb {
		transform: none;
	}

	/* The bar's whole interaction was hover-driven; without it the chips are
	   just a static spectrum, which is the honest result. */
	.lp-hero-shadebar span:hover {
		flex: 1;
	}

	/* ---- and press feedback in its place ----
	   Under 160ms with ease-out, so the button answers the finger instead of
	   catching up with it. The .btn transition is 250ms across three
	   properties; transform needs its own, faster channel here. */
	.btn,
	.lp-btn,
	.nav-actions .btn,
	.nav-search-btn,
	.nav-burger,
	.lp-mood-btn,
	.filter-pill,
	.vis-shade-btn,
	.lp-shade-swatch,
	.lp-viz-swatch {
		transition-property: background-color, color, border-color, box-shadow, transform;
		transition-duration: var(--dur-ui, 200ms);
	}

	.btn:active,
	.lp-btn:active,
	.nav-actions .btn:active,
	.lp-mood-btn:active,
	.filter-pill:active,
	.vis-shade-btn:active {
		transform: scale(0.97);
		transition-duration: var(--dur-press, 140ms);
	}

	.nav-search-btn:active,
	.nav-burger:active {
		transform: scale(0.92);
		transition-duration: var(--dur-press, 140ms);
	}

	/* Cards get a gentler press — a 3% squeeze on a full-width card reads as a
	   glitch, a 1% one reads as a surface giving way. */
	.lp-range-card:active,
	.lp-service:active,
	.lp-inspo-card:active,
	.lp-shade:active,
	.service-card:active,
	.gallery-item:active,
	.archive-card:active {
		transform: scale(0.99);
		transition: transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
	}
}

/* Where GSAP owns the transform it writes inline every frame; a press scale
   would be overwritten mid-tween and the transition would smear the motion. */
html.js.gsap-ready .lp-range-card:active,
html.js.gsap-ready .lp-service:active,
html.js.gsap-ready .lp-inspo-card:active {
	transform: none;
}

/* ==========================================================================
   7. PLACEMENT — phone widths

   The theme already had breakpoints everywhere; these are the specific spots
   where the column count or type size stopped fitting the hand.
   ========================================================================== */

@media (max-width: 782px) {
	.lp-stats-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.lp-stat,
	.lp-stat:nth-child(odd),
	.lp-stat:first-child {
		padding-left: 18px;
		border-left: 2.5px solid var(--lp-mint);
	}

	/* Signature Shade Gallery Touch Swiping & Snapping */
	.lp-shades-gallery-wrapper {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		touch-action: pan-x pan-y;
		padding-inline: 16px !important;
	}
	.lp-shades-gallery-wrapper::-webkit-scrollbar {
		display: none;
	}
	.lp-shades-gallery-strip {
		will-change: auto;
		padding-inline: 0 !important;
	}
	.lp-shade-card {
		scroll-snap-align: start;
		scroll-snap-stop: normal;
		width: clamp(210px, 66vw, 260px) !important;
	}

	/* Inspiration Bento Grid: 2 Columns on Tablet / Mobile */
	.lp-layout-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px !important;
	}
	.lp-grid-cell {
		height: 250px !important;
		min-height: 220px !important;
	}
	.lp-grid-cell.col-span-2 {
		grid-column: span 2 !important;
		height: 270px !important;
	}
	.lp-grid-cell.col-span-1 {
		grid-column: span 1 !important;
	}

	/* Expanded Inspiration Card Modal Mobile Viewport Fix */
	.lp-grid-cell.is-selected .lp-grid-card {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		width: min(94vw, 540px) !important;
		max-width: 94vw !important;
		height: min(88vh, 600px) !important;
		max-height: 88vh !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		border-radius: 18px !important;
		overflow: hidden !important;
		z-index: 90 !important;
	}

	.lp-grid-expanded-content {
		padding: 24px 18px 20px !important;
		box-sizing: border-box !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	.lp-grid-expanded-body {
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.lp-grid-expanded-title {
		font-size: clamp(1.4rem, 6vw, 1.85rem) !important;
		margin: 6px 0 8px !important;
		line-height: 1.15 !important;
	}

	.lp-grid-expanded-desc {
		font-size: 0.92rem !important;
		line-height: 1.5 !important;
		margin-bottom: 16px !important;
	}

	.lp-grid-expanded-actions {
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
	}

	.lp-grid-expanded-actions .lp-btn {
		width: 100% !important;
		min-width: 100% !important;
		box-sizing: border-box !important;
		padding: 12px 16px !important;
	}

	.lp-grid-close-btn {
		top: 12px !important;
		right: 12px !important;
		width: 44px !important;
		height: 44px !important;
		z-index: 35 !important;
	}
}

@media (max-width: 540px) {

	/* Hero headline: breathable line-height on small screens */
	.lp-hero-title {
		font-size: clamp(2.7rem, 11vw, 3.8rem);
		line-height: 1.06;
		margin-bottom: 24px;
	}

	.lp-hero-title span {
		margin-bottom: .22em;
	}

	.lp-hero-title em {
		line-height: 1.05;
		padding: .04em .22em .08em;
	}

	.lp-hero-cans {
		max-width: min(96vw, 440px);
		width: 100%;
	}

	.lp-section-head {
		padding-bottom: 20px;
		margin-bottom: 28px;
	}

	.lp-cta-btns,
	.lp-hero-cta {
		width: 100%;
	}

	.lp-cta-btns .lp-btn,
	.lp-hero-cta .lp-btn {
		flex: 1 1 100%;
	}
}

@media (max-width: 480px) {

	/* Inspiration Mosaic: 1 Column Full Width on Phone */
	.lp-layout-grid {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}
	.lp-grid-cell,
	.lp-grid-cell.col-span-2,
	.lp-grid-cell.col-span-1 {
		grid-column: span 1 !important;
		height: 240px !important;
	}

	/* 100% Full-width Architectural Product Cards */
	.lp-range-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.lp-range-card {
		padding: 18px 16px;
		border-radius: 16px;
	}

	.lp-range-img {
		height: clamp(190px, 50vw, 230px);
		margin: 6px 0 16px;
	}

	.lp-range-img img {
		max-height: clamp(175px, 45vw, 205px);
	}

	/* Four link columns two-up leaves ~150px per column; the brand and
	   newsletter blocks already span, so only the three menus need collapsing. */
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.footer-brand,
	.footer-nl {
		grid-column: auto;
	}
}

/* ==========================================================================
   8. REDUCED MOTION

   Gentler, not absent — the press feedback is the only thing confirming a tap
   landed, so it stays. Distance goes, the acknowledgement does not.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.btn:active,
	.lp-btn:active,
	.nav-actions .btn:active,
	.lp-mood-btn:active,
	.filter-pill:active,
	.vis-shade-btn:active {
		transform: scale(0.99);
	}

	.lp-range-card:active,
	.lp-service:active,
	.lp-inspo-card:active,
	.lp-shade:active,
	.service-card:active,
	.gallery-item:active,
	.archive-card:active {
		transform: none;
		opacity: 0.88;
	}
}

/* ==========================================================================
   9. CURRENT-BUILD PATCHES

   The Products mega menu is a hover popover wider than the phone, so inside
   the nav drawer (<=860px) it gets clipped by the ancestor overflow and
   pushes the document past the viewport. There it becomes an inline
   accordion instead; main.js already toggles .is-mega-open on tap, and the
   5-column card grid drops to 2.
   ========================================================================== */

@media (max-width: 860px) {
	/* The drawer lives INSIDE .site-header's stacking context (z 1000), so
	   the body-level backdrop (z 9990, dark + blurred) painted on top of
	   the open menu — the whole screen read as blurred. While the drawer
	   is open the header must out-paint the backdrop. */
	body.nav-open .site-header {
		z-index: 9995 !important;
	}

	/* The drawer and backdrop are fixed, opacity-animated surfaces. A
	   backdrop-filter on such a layer is a known cause of the element
	   toggling without ever painting on iOS Safari / Android WebView —
	   the burger "does nothing" while the JS runs fine. The backgrounds
	   are 98%/65% opaque, so a solid color costs nothing visually.
	   id selectors: navbar.css loads after this sheet with !important. */
	#main-nav {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		background: #051231 !important;
	}

	#nav-backdrop {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		background: rgba(2, 10, 32, 0.72) !important;
	}

	/* Enquiry button + burger together outstrip the nav row, pushing the
	   burger ~10px past the viewport edge. */
	.site-header .nav-inner {
		gap: 8px !important;
	}

	.site-header .nav-actions {
		flex-shrink: 1 !important;
		min-width: 0 !important;
	}

	/* Extra class: navbar.css loads after this sheet with !important, so the
	   patch only wins by higher specificity. */
	.site-header .nav-actions .btn-header-enquiry {
		padding: 9px 12px !important;
		font-size: 0.78rem !important;
		letter-spacing: 0.02em !important;
		gap: 5px !important;
	}

	.site-header .nav-list > li.menu-item-mega .products-mega-menu {
		position: static !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
		opacity: 0 !important;
		visibility: hidden !important;
		height: 0 !important;
		overflow: hidden !important;
		pointer-events: none !important;
	}

		/* Hide heavy desktop mega menu on mobile */
	.site-header .main-nav .nav-list > li.menu-item-mega .products-mega-menu,
	.site-header .main-nav .nav-list > li.menu-item-mega.is-mega-open .products-mega-menu,
	.site-header .main-nav .nav-list > li.menu-item-mega.is-submenu-open .products-mega-menu {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		max-height: 0 !important;
		opacity: 0 !important;
		overflow: hidden !important;
		pointer-events: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}

	.site-header .mega-menu-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px 10px !important;
	}

	.site-header .products-mega-menu .mega-item-title {
		line-height: 1.25;
		padding-block: 6px;
	}
}

@media (max-width: 540px) {
	/* Uppercase display headings stacked at ~0.96 line-height collide on a
	   phone; give the wrapping lines room. */
	#colors-define-style h2,
	#wall-textures h2,
	#lp-before-after h2,
	#studio-location h2,
	#lp-cta h2,
	#lp-range h2 {
		line-height: 1.08;
	}

	/* 0.72rem ≈ 10.6px at the mobile root size — unreadable outdoors. */
	.k2p-tex-price-tag,
	.k2p-tex-sub {
		font-size: 0.82rem;
	}
}

@media (pointer: coarse) {
	/* 16px-tall mailto/tel rows in the footer contacts list. */
	.contact-entry .c-text a {
		display: inline-block;
		padding-block: 11px;
	}

	.site-header .nav-actions .btn-header-enquiry {
		min-height: 44px;
	}

	/* id selector: the modal chrome in navbar.css otherwise ties and wins by
	   load order. Inset shifted 3px so the visual position is unchanged. */
	#k2p-modal-close-btn {
		width: 44px !important;
		height: 44px !important;
		top: 15px !important;
		right: 15px !important;
	}
}

/* ==========================================================================
   10. TOUCH STATES & FOCUS FOR THE CURRENT BUILD

   Section 6 enumerated the legacy cards only; the k2p-* rebuild components
   need the same treatment — no stuck hover transforms, a press answer in
   its place, and one low-specificity focus ring so controls without a
   bespoke :focus-visible style are never keyboard-invisible.
   ========================================================================== */
@media (hover: none) {
	.k2p-sol-card:hover .k2p-sol-card-media img,
	.k2p-style-card:hover img,
	.k2p-texture-card:hover .k2p-tex-canvas,
	.k2p-tex-room-card:hover .k2p-tex-room-canvas,
	.k2p-btn-orange:hover .k2p-btn-icon-circle,
	.mega-item-card:hover img {
		transform: none;
	}

	.k2p-sol-card:active,
	.k2p-style-card:active,
	.k2p-texture-card:active,
	.k2p-tex-room-card:active,
	.k2p-btn-orange:active,
	.k2p-btn-stage-wa:active,
	.k2p-btn-stage-call:active {
		transform: scale(0.98);
		transition: transform 140ms ease-out;
	}
}

main.lp :where(a, button, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid #FF7A00;
	outline-offset: 3px;
}
/* ==========================================================================
   11. GALLERY / INSPIRATION PAGE — mobile corrections
   ========================================================================== */

/* The blur panels cost paint on phones and iOS has a known blank-layer bug
   with backdrop-filter on fixed/animated surfaces. Solid is safer here. */
.inspiration-breadcrumb {
	backdrop-filter: none;
	background: rgba(255, 255, 255, 0.92);
}

.insp-tag-badge {
	backdrop-filter: none;
}

@media (max-width: 640px) {
	/* clamp() put line-height (33.6px) below font-size (35.3px) — the
	   uppercase descenders were clipping. */
	.k2p-inspiration-title {
		line-height: 1.05;
	}

	.k2p-inspiration-hero,
	.inspiration-consult-strip {
		padding: 1.4rem 1.25rem;
	}

	.inspiration-filters-rail {
		padding: 0.7rem 0.85rem;
		gap: 0.5rem;
	}

	.insp-media-box {
		height: 220px;
	}

	.consult-strip-btn {
		min-height: 48px;
	}
}

/* Filter pills are the page's primary control; 37px was under the floor. */
@media (pointer: coarse) and (max-width: 860px) {
	.insp-filter-btn {
		min-height: 44px;
		padding-inline: 1.15rem;
	}
}

/* Hover-driven card lift reads as "stuck" on touch; press feedback instead. */
@media (hover: none) {
	.insp-gallery-item:hover {
		transform: none;
	}

	.insp-gallery-item:hover .insp-media-box img {
		transform: none;
	}

	.insp-gallery-item:active {
		transform: scale(0.985);
		transition: transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
	}

	.insp-filter-btn:active,
	.consult-strip-btn:active,
	.insp-next-ghost:active {
		transform: scale(0.97);
	}
}

/* ==========================================================================
   12. FIX WAVE — drawer scroll lock
   ========================================================================== */

/* The drawer is a dialog: while it is open the page behind must not scroll,
   or tabbing escapes into content the user cannot see. */
@media (max-width: 860px) {
	body.nav-open {
		overflow: hidden;
	}
}

/* ==========================================================================
   13. MOBILE HEADER DE-CROWDING (logo / enquiry chain)
   ========================================================================== */

/* navbar.css loads after this sheet and pins the logo at 42px/190px with
   !important across a 0-3-0 selector chain — out-specify it (0-3-2) rather
   than fight load order. */
@media (max-width: 600px) {
	body .site-header .brand img.k2p-logo-img {
		height: 34px !important;
		max-height: 34px !important;
		max-width: 150px !important;
	}
}

@media (max-width: 430px) {
	body .site-header .brand img.k2p-logo-img {
		height: 30px !important;
		max-height: 30px !important;
		max-width: 132px !important;
	}

	/* Enquiry moves into the drawer (header.php .nav-drawer-footer already
	   carries a .k2p-open-enquiry-trigger), freeing the row for logo + burger. */
	body .site-header .nav-actions .btn-header-enquiry {
		display: none !important;
	}
}