/**
 * Theme overrides — small surgical fixes layered on top of the core
 * mockup CSS (tokens / components / layout). Each rule has a one-line
 * "why" so future maintainers don't undo a deliberate fix.
 *
 * Loaded last in functions.php so cascade wins.
 */

/* === WC price font + currency-symbol consistency.
       WC wraps prices in <span class="woocommerce-Price-amount"><bdi><span
       class="woocommerce-Price-currencySymbol">Rs</span> 0</bdi></span>.
       The currency symbol span gets a different font-weight cascade by default,
       making "Rs" look thinner than the digits. Force EVERY descendant to
       inherit so the entire price renders in one consistent face/weight. === */
.product-card__price,
.lpk-mega__feature-card-price {
	font-family: var(--font-heading);
}
.product-card__price *,
.lpk-mega__feature-card-price * {
	font-family:  inherit !important;
	font-size:    inherit !important;
	font-weight:  inherit !important;
	line-height:  inherit !important;
	color:        inherit !important;
	text-decoration: none;
	background:   transparent;
}
.product-card__price .woocommerce-Price-currencySymbol,
.lpk-mega__feature-card-price .woocommerce-Price-currencySymbol {
	margin-right: 4px;
}
.product-card__price del,
.lpk-mega__feature-card-price del {
	color: var(--color-text-tertiary) !important;
	text-decoration: line-through !important;
	font-weight: var(--fw-regular) !important;
	margin-right: var(--space-2);
}

/* === Sticky header context: WP wraps every template-part in a wrapper element
       (e.g. <header class="wp-block-template-part">). That wrapper becomes the
       sticky element's containing block. If it's only as tall as the header,
       sticky has no room to stick. display:contents removes the wrapper from
       the box tree (its children become direct children of the page) so the
       sticky positioning works against the page scroll context. === */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part {
	display: contents;
}
.wp-site-blocks,
.is-root-container {
	overflow: visible !important;
}

/* === Sticky-header offset for the WP admin bar (logged-in admins only).
       The admin bar is position:fixed; top:0; z-index:99999, so without this
       offset our sticky header slides *behind* it. === */
.admin-bar .lpk-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .lpk-header { top: 46px; }
}

/* === Safety net: guarantee NO spurious top margin for logged-out visitors.
       WP injects html{margin-top:32px !important} via inline CSS only when the
       admin bar renders, but cached HTML / stale CSS can leak that rule.
       :has() lets us target the html element based on the body class so we
       only zero the margin when admin bar is genuinely absent. === */
html:not(:has(body.admin-bar)) { margin-top: 0 !important; }
@media screen and (max-width: 782px) {
	html:not(:has(body.admin-bar)) { margin-top: 0 !important; }
}
body:not(.admin-bar) { padding-top: 0 !important; margin-top: 0 !important; }

/* === Eliminate the gap between announcement bar and header (mockup expects
       them flush). === */
.lpk-announcement + .lpk-header,
.lpk-header { margin-top: 0; }
.lpk-announcement { margin-bottom: 0; }

/* === No gap between header and the hero (the hero IS the visual top).
       The id="main" anchor was moved to header.html for skip-link coverage,
       so we now target by element + first child position. */
main { margin-top: 0 !important; padding-top: 0 !important; }
.wp-site-blocks > main:first-of-type,
.wp-site-blocks > main { margin-top: 0 !important; padding-top: 0 !important; }
main > .lpk-hero-slider:first-child,
main > .lpk-hero:first-child { margin-top: 0 !important; }
.lpk-hero-slider { margin-top: 0 !important; }

/* === Newsletter sits flush against the footer trust strip (no white gap). === */
.lpk-newsletter { margin-bottom: 0; }
.lpk-footer    { margin-top: 0; }
body.has-global-padding,
.wp-site-blocks { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }

/* === Product card image: responsive interior padding.
       Source images are uploaded edge-to-edge cropped (no whitespace around
       the product), so on a 1:1 image-wrap the product fills the entire
       square — looks crowded. We add interior padding so the product has
       breathing room. Tighter on mobile (smaller cards) than desktop. === */
.product-card__image-wrap { padding: 14px; }                  /* mobile baseline */
@media (min-width: 600px)  { .product-card__image-wrap { padding: 18px; } }
@media (min-width: 1024px) { .product-card__image-wrap { padding: 22px; } }
@media (min-width: 1440px) { .product-card__image-wrap { padding: 26px; } }

/* 4-up dense grid (cart upsell, related rails, account wishlist) — slightly
   tighter padding to compensate for the smaller card width, but never the
   8px stub from layout.css that left product images bursting out. */
@media (min-width: 1024px) {
	.lpk-grid--4 .product-card__image-wrap { padding: 16px !important; }
}
@media (min-width: 1440px) {
	.lpk-grid--4 .product-card__image-wrap { padding: 20px !important; }
}

/* === Stock indicator must stay on a single line in the top-right corner.
       width: max-content forces the box to size to its content's intrinsic
       width — defeats any parent constraint, max-width inheritance, or
       padding-box squeeze that would otherwise force a wrap.
       Canonical mockup design: colored dot + colored text, no pill bg. === */
.product-card__stock,
.stock-indicator {
	white-space: nowrap !important;
	width: max-content !important;
	max-width: none !important;
	min-width: 0 !important;
	flex-wrap: nowrap !important;
	word-break: keep-all;
	display: inline-flex !important;
}
.product-card__stock {
	font-size: 11px;       /* slightly tighter than canonical 12px so it always fits the corner */
	font-weight: var(--fw-semibold);
	background: transparent;
	padding: 0;
}

/* === Stop the stretched-link from swallowing inner clickable elements
       (swatches, notify-me text). === */
.product-card__stretched-link { pointer-events: none; }
.product-card__stretched-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: auto;
}
.product-card .product-card__swatches,
.product-card [data-lpk-no-stretch] {
	position: relative;
	z-index: 2;
	pointer-events: auto;
}

/* === Category card placeholder (when no thumbnail or fallback product image
       is available). Big initial letter on a soft surface tile — looks
       intentional, not broken. === */
.lpk-category-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: clamp(64px, 8vw, 96px);
	line-height: 1;
	color: var(--color-text-primary);
	background: linear-gradient(135deg, #F5F7FA 0%, #E5E7EB 100%);
	letter-spacing: -0.02em;
}

/* === Mega panel — full-width drop, no constraint inheritance from WP layout. === */
.lpk-nav__item.lpk-nav__item--has-mega { position: static; }
.lpk-mega { left: 0; right: 0; width: 100vw; }

/* === Blog card placeholder ("Coming soon" filler card so a single real
       post doesn't stretch full-width when fewer than 3 posts exist). === */
.lpk-blog-card--placeholder {
	pointer-events: none;
	background: var(--color-bg-page);
	border: 1px dashed var(--color-border-subtle);
}
.lpk-blog-card--placeholder .lpk-blog-card__title { color: var(--color-text-secondary); }
.lpk-blog-card--placeholder .lpk-blog-card__excerpt { color: var(--color-text-tertiary); }

/* === Hero slider — only the slide with .is-active is visible; others stack
       behind via absolute positioning. Mockup CSS already styles .lpk-hero
       and .lpk-hero-nav__dot.is-active; we add the slider container + the
       hide/show transition between slides. === */
.lpk-hero-slider {
	position: relative;
}
.lpk-hero-slider .lpk-hero {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease;
	pointer-events: none;
}
.lpk-hero-slider .lpk-hero.is-active {
	position: relative;       /* in-flow → defines slider height */
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.lpk-hero-nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 3;
}

/* Hero visual fallback when image is missing — themed gradient placeholder
   so the slider doesn't show a broken-image icon. */
.lpk-hero__visual--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.85);
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-body-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	min-height: 320px;
}
.lpk-hero__visual--placeholder[data-theme="work"]   { background: linear-gradient(135deg, #00ECC2 0%, #00B89E 100%); }
.lpk-hero__visual--placeholder[data-theme="play"]   { background: linear-gradient(135deg, #1F2937 0%, #0B0B0B 100%); }
.lpk-hero__visual--placeholder[data-theme="create"] { background: linear-gradient(135deg, #6366F1 0%, #C084FC 100%); }
.lpk-hero__visual--placeholder[data-theme="work"]::after   { content: "BANNER · WORK"; }
.lpk-hero__visual--placeholder[data-theme="play"]::after   { content: "BANNER · PLAY"; }
.lpk-hero__visual--placeholder[data-theme="create"]::after { content: "BANNER · CREATE"; }

/* === Feature tiles — canonical mockup design + transparent product images that
       bleed BEHIND the text (image on bottom-right, text on left with a subtle
       left-to-right gradient scrim that fades the tile bg over the image area
       so text stays readable while the product silhouette extends behind). === */

/* Per-tile 3-stop gradients — neutral text area in the upper-left, accent colour
   blooming toward the bottom-right where the product image bleeds. Replaces the
   canonical near-flat 2-stop gradients which read as solid colours.
   - Work: white → soft mint → visible mint (Logitech accent #00ECC2 family)
   - Play: black → dark blue → Logitech G blue (#00B8FC family)
   - Create: deep purple → mid purple → vibrant violet (canonical purple family) */
.lpk-feature-tile--mx {
	background: linear-gradient(135deg, #FFFFFF 0%, #E8FAF2 40%, #C8F0DF 100%) !important;
	border: none !important;
}
/* Gaming tile — keeps the canonical black gradient (looked better than
   the experimental blue version per Tahir's feedback). */

/* Visual sizing — desktop kept at proven 280px (canonical mockup size); mobile
   gets the bumped sizes since cards on mobile are smaller AND the rembg cutouts
   have transparent margins so the product silhouette only fills ~60-70% of the
   box, needing more pixels to feel proportional. */
.lpk-feature-tile__visual {
	width: 280px !important;
	height: 280px !important;
	right: -40px !important;
	bottom: -40px !important;
	z-index: 1;
}
.lpk-feature-tile__visual img {
	background: transparent !important;
	object-fit: contain;
	object-position: bottom right;
	transition: transform var(--motion-slow);
}
.lpk-feature-tile:hover .lpk-feature-tile__visual img { transform: scale(1.04); }

@media (max-width: 1024px) {
	.lpk-feature-tile__visual { width: 260px !important; height: 260px !important; right: -35px !important; bottom: -35px !important; }
}
@media (max-width: 768px) {
	.lpk-feature-tile__visual { width: 260px !important; height: 260px !important; right: -30px !important; bottom: -30px !important; }
}
@media (max-width: 600px) {
	.lpk-feature-tile__visual { width: 220px !important; height: 220px !important; right: -25px !important; bottom: -25px !important; }
}

/* Text-readability scrim — diagonal gradient from the tile's bg colour (left/top)
   fading to transparent (bottom-right) so text on the left has clean coverage
   while the product image silhouette stays visible on the right. Per-tile
   bg colour drives the scrim colour for clean blending. */
.lpk-feature-tile__copy {
	position: relative;
	z-index: 2;
}
.lpk-feature-tile--mx::after,
.lpk-feature-tile--gaming::after,
.lpk-feature-tile--create::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
.lpk-feature-tile--mx::after {
	background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 35%, rgba(232,255,249,0) 65%);
}
.lpk-feature-tile--gaming::after {
	background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0) 70%);
}
.lpk-feature-tile--create::after {
	background: linear-gradient(135deg, rgba(74,20,140,0.85) 0%, rgba(26,0,51,0.55) 40%, rgba(26,0,51,0) 70%);
}

.lpk-feature-tile a[href] { text-decoration: none; }

/* === Feature tiles mobile carousel (Work / Play / Create cards under hero).
       On <600px: horizontal-scroll carousel — 1 full card + ~25% peek of the
       next, scroll-snap so swipes park crisply. Same pattern as category grid.
       Tablet+: standard 3-up grid (canonical mockup). === */
@media (max-width: 600px) {
	.lpk-feature-tiles {
		display: grid !important;
		grid-template-columns: none !important;
		grid-template-rows: 1fr !important;
		grid-auto-flow: column !important;
		grid-auto-columns: 78vw !important;            /* ~1 full card + ~25% peek */
		gap: var(--space-3) !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		scroll-padding-left: var(--gutter);
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: var(--space-3);
		margin-left: calc(-1 * var(--gutter));
		margin-right: calc(-1 * var(--gutter));
		padding-left: var(--gutter);
		padding-right: var(--gutter);
		-webkit-overflow-scrolling: touch;
	}
	.lpk-feature-tiles::-webkit-scrollbar { display: none; }
	.lpk-feature-tile { scroll-snap-align: start; min-height: 360px; }
}

/* === Hero eyebrow row — pairs the canonical .badge--brand "New Arrival" pill
       (per DESIGN_SYSTEM §6.3 + §20.22) with the product-context eyebrow text.
       Used on launch slides like MX Master 4 to give the editorial "NEW" callout
       proper visual weight without inventing new badge variants. === */
.lpk-hero__eyebrow-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-bottom: var(--space-1);
}
.lpk-hero__eyebrow-row .badge {
	font-size: 11px;          /* slight bump from --fs-caption (10px) for hero scale */
	padding: 5px 10px;
}
.lpk-hero__eyebrow-row .lpk-hero__eyebrow { margin: 0; }

/* === Hero buttons on dark slides — per-slide accent matching the design system.
       Play/Gaming (--lpk-hero--play): Logitech G blue (#00B8FC) primary — exclusive
         to Gaming sections per DESIGN_SYSTEM §2.2.
       Create/Streaming (--lpk-hero--create): mint primary (general brand accent).
       Both: outlined-white ghost for the secondary CTA on dark backgrounds. === */
.lpk-hero--play .btn--primary {
	background: var(--color-accent-g-blue) !important;
	color: var(--color-text-primary) !important;
	border-color: var(--color-accent-g-blue) !important;
}
.lpk-hero--play .btn--primary:hover {
	background: #009BD6 !important;             /* darker shade of g-blue */
	border-color: #009BD6 !important;
	color: var(--color-text-primary) !important;
}
.lpk-hero--create .btn--primary {
	background: var(--color-accent-mint) !important;
	color: var(--color-text-primary) !important;
	border-color: var(--color-accent-mint) !important;
}
.lpk-hero--create .btn--primary:hover {
	background: var(--color-accent-mint-dark) !important;
	border-color: var(--color-accent-mint-dark) !important;
	color: var(--color-text-primary) !important;
}
.lpk-hero--play  .btn--ghost,
.lpk-hero--create .btn--ghost {
	background: transparent !important;
	color: #fff !important;
	border: 1.5px solid rgba(255,255,255,0.6) !important;
}
.lpk-hero--play  .btn--ghost:hover,
.lpk-hero--create .btn--ghost:hover {
	background: #fff !important;
	color: var(--color-text-primary) !important;
	border-color: #fff !important;
}

/* === Reviews CTA row — matches the mockup spec exactly:
       <div style="text-align: center; margin-top: var(--space-8);">
       (mockups/homepage.html line 715). 48px gap below the testimonial grid. === */
.lpk-reviews__cta-row {
	display: flex !important;
	justify-content: center !important;
	margin-top: var(--space-8) !important;   /* 48px per mockup */
	padding-top: var(--space-2);              /* small visual buffer */
}

/* === Hero — enterprise-grade sizing + locked-height slider.
       Mockup defaults (480px min-height + 80px padding + 560px square visual)
       compounded into a ~700px tall row. New targets benchmarked against
       Logitech.com / Apple / Best Buy.

       SLIDER HEIGHT LOCK: the 3 slides have different copy lengths, so when
       the active slide cycles, the container would jump heights. We force
       ALL slides absolute-positioned (out of flow) and give the slider
       container a fixed min-height ≥ tallest slide content. This eliminates
       the "jumping height" effect on cycle. === */

.lpk-hero-slider {
	position: relative;
	min-height: 540px;
	padding-bottom: var(--space-6);   /* room below content for dot navigation */
}
.lpk-hero-slider .lpk-hero {
	position: absolute !important;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease;
	pointer-events: none;
	min-height: 0;
}
.lpk-hero-slider .lpk-hero.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.lpk-hero__inner {
	min-height: 540px !important;
	padding-top:    var(--space-7) !important;
	padding-bottom: var(--space-8) !important;       /* extra bottom padding so dots have room below the visual */
	gap: var(--space-7) !important;
}
/* 16:9 unified — image AND video use the same slot, so they're visually
   interchangeable across slides. Wider/shorter than the old 1:1 square. */
.lpk-hero__visual {
	max-width: 720px !important;                     /* larger on desktop — was 600 */
	max-height: none !important;
	aspect-ratio: 16 / 9 !important;
	width: 100% !important;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-surface);
}
.lpk-hero__visual img,
.lpk-hero__visual video,
.lpk-hero__video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;   /* fill 16:9 — centered subjects from 1:1 source images crop cleanly */
	display: block;
	border-radius: var(--radius-md);
}
.lpk-hero__video {
	pointer-events: none;            /* prevent native video controls from intercepting clicks */
	user-select: none;
}

@media (max-width: 1024px) {
	.lpk-hero-slider  { min-height: 460px; }
	.lpk-hero__inner  { min-height: 460px !important; padding-top: var(--space-6) !important; padding-bottom: var(--space-7) !important; }
	.lpk-hero__visual { max-width: 540px !important; max-height: none !important; }
}

/* === .btn--ghost on the LIGHT Work slide — needs a visible border so it
       reads as a button. (Play/Create slides are dark and already have a
       white-outlined ghost rule above.) === */
.lpk-hero:not(.lpk-hero--play):not(.lpk-hero--create) .btn--ghost {
	background: transparent !important;
	color: var(--color-text-primary) !important;
	border: 1.5px solid var(--color-text-primary) !important;
}
.lpk-hero:not(.lpk-hero--play):not(.lpk-hero--create) .btn--ghost:hover {
	background: var(--color-text-primary) !important;
	color: #fff !important;
}
@media (max-width: 768px) {
	/* Mobile hero — image-first FULL WIDTH (edge to edge), text + CTAs below.
	   Apple / Logitech.com mobile pattern.

	   HEIGHT MODEL: switch the slider container to CSS grid with all slides
	   stacked in the SAME grid cell (`grid-row: 1; grid-column: 1`). This
	   makes the container auto-size to the TALLEST slide's natural content
	   height — no fixed min-height (which left empty space) and no height
	   jump as slides cycle (because all slides reserve the same cell). */
	.lpk-hero-slider {
		display: grid !important;
		grid-template-rows: auto;
		position: relative !important;
		min-height: 0 !important;
	}
	.lpk-hero-slider .lpk-hero {
		grid-row: 1;
		grid-column: 1;
		position: static !important;
		inset: auto !important;
	}
	.lpk-hero__inner {
		display: flex !important;
		flex-direction: column !important;
		grid-template-columns: none !important;
		grid-template-rows: auto auto !important;
		min-height: 0 !important;
		padding: 0 !important;
		gap: 0 !important;
		max-width: 100% !important;
	}

	/* IMAGE / VIDEO: full viewport width edge-to-edge, 16:9 unified aspect,
	   object-fit:cover. NO border-radius on mobile — it's a full-bleed banner,
	   rounded corners would create awkward white slivers against the page bg. */
	.lpk-hero__visual {
		display: block !important;
		order: 1 !important;
		width: 100% !important;
		max-width: 100% !important;
		max-height: none !important;
		aspect-ratio: 16 / 9 !important;
		margin: 0 !important;
		border-radius: 0 !important;
	}
	.lpk-hero__visual img,
	.lpk-hero__visual video {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block;
		border-radius: 0 !important;
	}

	/* COPY: text block below the image with its own padding. */
	.lpk-hero__copy {
		order: 2 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: var(--space-3) !important;
		padding: var(--space-6) var(--space-5) !important;
		max-width: 100%;
		text-align: left;
	}
	.lpk-hero__eyebrow { font-size: 11px !important; }
	.lpk-hero__headline { font-size: 30px !important; line-height: 1.1 !important; max-width: 18ch; margin: 0 !important; }
	.lpk-hero__sub { font-size: 15px !important; line-height: 1.5; max-width: 36ch; margin: 0 !important; }

	/* CTAs: side-by-side at full width on phones (50/50). Better thumb-tap UX
	   than vertical stack and keeps hero compact. */
	.lpk-hero__cta-row {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: var(--space-3) !important;
		margin-top: var(--space-3);
		max-width: 100% !important;
	}
	.lpk-hero__cta-row .btn {
		width: 100% !important;
		justify-content: center !important;
		padding-left: var(--space-3);
		padding-right: var(--space-3);
		font-size: 14px;
	}

	/* Hero dot navigation centred over the bottom of the image (not the copy block).
	   16:9 image height on mobile = viewport_w * (9/16) = viewport_w * 0.5625. */
	.lpk-hero-nav {
		position: absolute !important;
		bottom: auto !important;
		top: calc(56.25vw - 24px) !important;
		left: 0; right: 0;
		justify-content: center;
		display: flex;
		gap: var(--space-2);
		z-index: 4;
	}
	.lpk-hero-nav__dot {
		background: rgba(255,255,255,0.6) !important;
	}
	.lpk-hero-nav__dot.is-active { background: #fff !important; }
}

/* Very small phones (≤380px) — drop CTAs to single column to avoid cramping.
   Slider already auto-sizes to content height (CSS grid stacking above). */
@media (max-width: 380px) {
	.lpk-hero__cta-row { grid-template-columns: 1fr !important; }
	.lpk-hero__headline { font-size: 26px !important; }
}
@media (max-width: 380px) {
	.lpk-hero__headline { font-size: 26px !important; }
	.lpk-hero__cta-row { max-width: 100%; }
}

/* === Category rail wrapper — container for the dual-row carousel + side
       arrow buttons (desktop only). Mobile: arrows hidden, native swipe used. */
.lpk-category-rail { position: relative; }
.lpk-category-rail__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px; height: 44px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--color-border-subtle);
	box-shadow: var(--shadow-md);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	z-index: 5;
	color: var(--color-text-primary);
	transition: opacity var(--motion-base), background var(--motion-base);
}
.lpk-category-rail__nav:hover { background: var(--color-text-primary); color: #fff; }
.lpk-category-rail__nav:disabled { opacity: 0; pointer-events: none; }
.lpk-category-rail__nav--prev { left: -22px; }
.lpk-category-rail__nav--next { right: -22px; }

/* Hide arrow nav on mobile — touch swipe is the natural UX. */
@media (max-width: 600px) {
	.lpk-category-rail__nav { display: none; }
}

/* === Shop-by-category section — slightly darker neutral bg so the white
       category cards visibly lift off the page. Uses #EEF1F4 — within the
       design-system neutral grey family (between --color-bg-surface #F9FAFB
       and --color-border-subtle #E5E7EB). Plus a subtle --shadow-sm on the
       compact cards for added definition without breaking the canonical look. */
.lpk-section--surface:has(.lpk-category-grid--v2) {
	background: #F3F5F7 !important;   /* lighter than #EEF1F4 — clearly off-white but still soft */
}
.lpk-category-card--compact {
	box-shadow: var(--shadow-sm) !important;
	border-color: rgba(0,0,0,0.04) !important;     /* hairline replaced by subtle shadow + lighter border */
}
.lpk-category-card--compact:hover {
	box-shadow: var(--shadow-md) !important;
}

/* === Shop-by-category grid — V2 (DEFAULT, locked Phase 4-B revision).
       Same visual language as V1 (white card, hairline border, grey image
       sub-tile, centered title) but tighter measurements so 5 fit per row
       at ≥1200px. V1 rules in mockups/layout.css are preserved untouched —
       switching back is a class swap on the rendered grid + cards.
       See DESIGN_SYSTEM §15.1.1 for the comparison matrix. === */
.lpk-category-grid--v2 {
	display: grid;
	gap: var(--space-3);
	/* === Mobile (<600px): horizontal-scroll 2-row carousel ===
	   2 rows tall, columns flow horizontally, each column = 2 stacked cards.
	   Card width ~45vw → ~2 full cols + peek of next visible (scroll affordance).
	   Snap to column for crisp swipe UX. Scrollbar hidden visually. */
	grid-template-columns: none;
	grid-template-rows: repeat(2, 1fr);
	grid-auto-flow: column;
	grid-auto-columns: minmax(40vw, 40vw);   /* 2 full cards + ~25% peek of 3rd — clear scroll affordance */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--gutter);
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: var(--space-3);
	/* Bleed grid to viewport edges so the first card aligns with the screen edge
	   and the last card has trailing padding for clean snap on iOS Safari. */
	margin-left: calc(-1 * var(--gutter));
	margin-right: calc(-1 * var(--gutter));
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	-webkit-overflow-scrolling: touch;
}
.lpk-category-grid--v2::-webkit-scrollbar { display: none; }
.lpk-category-grid--v2 > .lpk-category-card--compact { scroll-snap-align: start; }
/* Mouse click-and-drag affordance — paired with the pointer handler in
 * category-rail.js. user-select:none prevents text-selection while dragging.
 * is-dragging is added by JS during an active drag → swap to grabbing cursor
 * and disable smooth-scroll so the track follows the pointer 1:1. */
.lpk-category-grid--v2 {
	cursor: grab;
	user-select: none;
}
.lpk-category-grid--v2.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
}
/* Mobile-only: scroll-snap-stop forces the browser to stop at every snap
 * point even on a fast swipe — paginated/Instagram-style stepping. Desktop
 * keeps the original behavior (free flick, snap on release) which feels
 * better with a mouse/trackpad and the prev/next buttons. */
@media (max-width: 599px) {
	.lpk-category-grid--v2 > .lpk-category-card--compact {
		scroll-snap-stop: always;
	}
}

/* Tablet & desktop: keep the 2-row dual-row carousel pattern from mobile, but
   with breakpoint-tuned card widths so the visible card count steps up cleanly:
   3 visible @ ≥600, 4 visible @ ≥900, 5 visible @ ≥1200. With 14 categories
   in the grid, users can swipe/drag/scroll horizontally to reveal the
   additional 4-9 hidden cards depending on viewport. Reveals more without
   making the section taller. */
@media (min-width: 600px) {
	.lpk-category-grid--v2 {
		grid-auto-columns: calc((100% - 2 * var(--space-3)) / 3);   /* 3 visible */
	}
}
@media (min-width: 900px) {
	.lpk-category-grid--v2 {
		gap: var(--space-4);
		grid-auto-columns: calc((100% - 3 * var(--space-4)) / 4);   /* 4 visible */
	}
}
@media (min-width: 1200px) {
	.lpk-category-grid--v2 {
		grid-auto-columns: calc((100% - 4 * var(--space-4)) / 5);   /* 5 visible */
	}
}

/* Drop the mobile-only edge bleed at tablet+ — section bg is uniform at all
   widths so cards should sit within the container instead of bleeding out. */
@media (min-width: 600px) {
	.lpk-category-grid--v2 {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		padding-bottom: var(--space-4);   /* room for scrollbar / shadow */
	}
}

.lpk-category-card--compact {
	padding: var(--space-3) var(--space-3) var(--space-4);
}
/* Drop the grey image sub-tile — image now floats directly on the white card. */
.lpk-category-card--compact .lpk-category-card__visual {
	margin-bottom: var(--space-2);
	background: transparent;
}
.lpk-category-card--compact .lpk-category-card__visual img { width: 78%; height: 78%; }
.lpk-category-card--compact .lpk-category-card__title {
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Compact variant intentionally hides the product count — pure image + label.
   The shortcode still emits the span so we can revert to V1 with one class swap. */
.lpk-category-card--compact .lpk-category-card__count { display: none; }

/* ============================================================================
   MOBILE FIXES (Phase 4-B post-mobile-audit)
   ============================================================================ */

/* === 1) Kill horizontal page scroll.
       Caused by the category carousel's negative-margin bleed leaking past
       the body. `overflow-x: clip` prevents the bleed without creating a
       scrolling container — critical for `position: sticky` to work on PDP
       gallery (overflow:hidden on the viewport-level element breaks sticky in
       WebKit and older Blink). `clip` is the modern, sticky-safe equivalent. */
html, body { overflow-x: clip; max-width: 100%; }
@supports not (overflow-x: clip) {
	/* Older browsers fall back to hidden — sticky may not work but no horizontal scroll. */
	html, body { overflow-x: hidden; }
}

/* === 2) Mobile header: prevent right-side icons row from being clipped.
       Hide the wishlist heart on small mobile (it lives in the drawer
       quicklinks anyway) and tighten icon spacing so cart stays visible. === */
@media (max-width: 600px) {
	.lpk-header__icon-btn--wishlist { display: none !important; }
	.lpk-header__icons { gap: 4px; }
	.lpk-header__main { padding-left: 12px; padding-right: 12px; gap: 8px; }
	.lpk-header__logo img { max-height: 22px; }
	.lpk-header__country { font-size: 10px; letter-spacing: 0.08em; }
}

/* === 3) Hero mobile rules now live in the locked-height hero slider block above. === */

/* === 4) Mobile drawer: use dynamic viewport height so quicklinks aren't
       hidden behind the phone's URL/nav chrome. Add safe-area inset
       padding for notched devices. Make the list scrollable so on short
       screens (320px tall) all 11 categories + 4 quicklinks remain reachable. === */
.lpk-drawer {
	height: 100vh;
	height: 100dvh;                            /* dynamic viewport — accounts for browser chrome */
	max-height: 100vh;
	max-height: 100dvh;
	padding-bottom: env(safe-area-inset-bottom, 0);
	overflow: hidden;                          /* container — children handle their own scroll */
}
.lpk-drawer__list {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	flex: 1 1 auto;                            /* takes remaining height between header + quicklinks */
	min-height: 0;
}
.lpk-drawer__quicklinks {
	flex: 0 0 auto;
	padding-bottom: max(env(safe-area-inset-bottom, 0), 8px);
}

/* === 5) Announcement bar — marquee on mobile so all 3 messages are readable.
       Two duplicate <span class="lpk-announcement__group"> tracks side-by-side
       animate from translateX(0) → translateX(-50%) for a seamless loop.
       On tablet+ where everything fits, the marquee animation is disabled
       and the second group is hidden. === */
.lpk-announcement__inner {
	overflow: hidden;
	width: 100%;
}
.lpk-announcement__track {
	display: flex;
	gap: 0;
	white-space: nowrap;
}
.lpk-announcement__group {
	display: inline-flex;
	gap: var(--space-4);
	align-items: center;
	flex: 0 0 auto;
	padding-right: var(--space-6);
}
.lpk-announcement__group .lpk-announcement__sep { opacity: 0.6; }

@media (max-width: 1024px) {
	.lpk-announcement__track {
		animation: lpk-marquee 22s linear infinite;
		width: max-content;
	}
}
@media (min-width: 1025px) {
	/* Desktop: everything fits; no animation, hide duplicate group, center the line. */
	.lpk-announcement__inner { justify-content: center; }
	.lpk-announcement__track { width: auto; }
	.lpk-announcement__group[aria-hidden="true"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.lpk-announcement__track { animation: none !important; }
}
@keyframes lpk-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Pause marquee on hover/focus so users can read at their pace. */
.lpk-announcement__inner:hover  .lpk-announcement__track,
.lpk-announcement__inner:focus-within .lpk-announcement__track { animation-play-state: paused; }

/* === PDP rich product story (Logitech.com-style feature sections inside the
       WC description tab). Used by the MX Master 4 PDP and any future product
       whose description is built with the .lpk-story container. === */
.lpk-story {
	max-width: 1180px;
	margin: 0 auto;
	font-family: var(--font-body);
	color: var(--color-text-primary);
}
.lpk-story h2, .lpk-story h3 {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	letter-spacing: -0.01em;
	line-height: 1.15;
}
.lpk-story-intro {
	padding: var(--space-8) 0;
	text-align: center;
	border-bottom: 1px solid var(--color-border-subtle);
}
.lpk-story-intro h2 {
	font-size: var(--fs-h1);
	margin: 0 0 var(--space-4);
	max-width: 22ch;
	margin-left: auto;
	margin-right: auto;
}
.lpk-story-intro p {
	font-size: var(--fs-body-lg);
	color: var(--color-text-secondary);
	max-width: 64ch;
	margin: 0 auto;
	line-height: 1.55;
}

.lpk-story-section {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
	padding: var(--space-10) 0;
	align-items: center;
	border-bottom: 1px solid var(--color-border-subtle);
}
@media (min-width: 900px) {
	.lpk-story-section { grid-template-columns: 1.1fr 1fr; gap: var(--space-10); }
	.lpk-story-section--alt .lpk-story-section__media { order: 2; }
	.lpk-story-section--alt .lpk-story-section__copy  { order: 1; }
}
.lpk-story-section__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg-surface);
	aspect-ratio: 4 / 3;
}
.lpk-story-section__media img,
.lpk-story-section__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--motion-slow);
}
.lpk-story-section:hover .lpk-story-section__media img { transform: scale(1.02); }
.lpk-story-section__media--video { background: var(--color-bg-inverse); }
.lpk-story-section__video {
	pointer-events: none;        /* prevent video controls overlay from blocking page interaction */
	user-select: none;
}

/* Text-only sections (no banner/video media) — full-width centered copy. */
.lpk-story-section--text {
	grid-template-columns: 1fr !important;
	padding: var(--space-8) 0;
	text-align: center;
}
.lpk-story-section--text .lpk-story-section__copy { max-width: 64ch; margin: 0 auto; align-items: center; }
.lpk-story-section--text .lpk-story-section__headline { max-width: none; }

/* Footnote — small grey copy under feature blocks (asterisk references). */
.lpk-story-section__footnote {
	font-size: var(--fs-caption);
	line-height: 1.5;
	color: var(--color-text-tertiary);
	margin: var(--space-3) 0 0;
}

/* Specs group titles — sub-sections inside the specs block. */
.lpk-specs-group-title {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-h4);
	margin: var(--space-7) 0 var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--color-text-primary);
	max-width: max-content;
}
.lpk-specs-group-title:first-of-type { margin-top: 0; }

/* Sustainability section — 4-up grid of small cards. */
.lpk-story-sustainability {
	padding: var(--space-10) 0;
	border-bottom: 1px solid var(--color-border-subtle);
}
.lpk-story-sustainability h2 {
	font-size: var(--fs-h2);
	margin: 0 0 var(--space-7);
	text-align: center;
}
.lpk-story-sustainability {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 768px) {
	.lpk-story-sustainability { grid-template-columns: repeat(2, 1fr); }
	.lpk-story-sustainability h2 { grid-column: 1 / -1; }
}
.lpk-sus-card {
	background: var(--color-bg-surface);
	border-radius: var(--radius-md);
	padding: var(--space-6);
}
.lpk-sus-card h3 {
	font-size: var(--fs-h4);
	margin: 0 0 var(--space-3);
	color: var(--color-accent-mint-dark);
}
.lpk-sus-card p {
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-3);
}
.lpk-sus-card p:last-child { margin-bottom: 0; }
.lpk-sus-card ul {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-3);
	display: grid;
	gap: var(--space-1);
}
.lpk-sus-card li {
	padding-left: 18px;
	position: relative;
	color: var(--color-text-secondary);
	font-size: var(--fs-body);
}
.lpk-sus-card li::before {
	content: '';
	position: absolute;
	left: 0; top: 9px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--color-accent-mint);
}

.lpk-story-section__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.lpk-story-section__copy--full { grid-column: 1 / -1; max-width: 64ch; margin: 0 auto; text-align: center; }

.lpk-story-section__eyebrow {
	font-size: var(--fs-overline);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-overline);
	text-transform: uppercase;
	color: var(--color-accent-mint-dark);
	margin: 0;
}
.lpk-story-section__headline {
	font-size: var(--fs-h2);
	margin: 0;
	max-width: 18ch;
}
.lpk-story-section__copy p {
	font-size: var(--fs-body-lg);
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: 0;
}
.lpk-story-section__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
	text-decoration: none;
	border-bottom: 2px solid var(--color-accent-mint);
	padding-bottom: 2px;
	width: max-content;
	transition: color var(--motion-base), border-color var(--motion-base);
}
.lpk-story-section__link:hover { color: var(--color-accent-mint-dark); border-bottom-color: var(--color-accent-mint-dark); }

/* Specs table */
.lpk-story-specs { padding: var(--space-10) 0; border-bottom: 1px solid var(--color-border-subtle); }
.lpk-story-specs h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-6); text-align: center; }
.lpk-specs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-body);
}
.lpk-specs-table tr { border-bottom: 1px solid var(--color-border-subtle); }
.lpk-specs-table tr:last-child { border-bottom: none; }
.lpk-specs-table th, .lpk-specs-table td {
	padding: var(--space-4) var(--space-5);
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
}
.lpk-specs-table th {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
	width: 28%;
	min-width: 180px;
}
.lpk-specs-table td { color: var(--color-text-secondary); }
.lpk-specs-table a { color: var(--color-text-primary); text-decoration: underline; }

/* Box / SKU note / trust closer */
.lpk-story-box, .lpk-story-sku-note, .lpk-story-trust {
	padding: var(--space-8) 0;
	border-bottom: 1px solid var(--color-border-subtle);
}
.lpk-story-trust { border-bottom: none; }
.lpk-story-box h2 { font-size: var(--fs-h3); margin: 0 0 var(--space-4); text-align: center; }
.lpk-story-box ul {
	max-width: 56ch;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-2);
}
.lpk-story-box li {
	padding-left: 28px;
	position: relative;
	color: var(--color-text-secondary);
}
.lpk-story-box li::before {
	content: '';
	position: absolute;
	left: 0; top: 8px;
	width: 16px; height: 8px;
	border-left: 2px solid var(--color-accent-mint-dark);
	border-bottom: 2px solid var(--color-accent-mint-dark);
	transform: rotate(-45deg);
}
.lpk-story-sku-note {
	background: var(--color-bg-surface);
	margin: var(--space-6) calc(-1 * var(--space-5));
	padding: var(--space-6) var(--space-5);
	border-radius: var(--radius-md);
	border: none;
}
.lpk-story-sku-note h3 { font-size: var(--fs-h4); margin: 0 0 var(--space-3); }
.lpk-story-sku-note p  { font-size: var(--fs-body); line-height: 1.6; color: var(--color-text-secondary); margin: 0; max-width: 70ch; }
.lpk-story-trust h3 { font-size: var(--fs-h4); margin: 0 0 var(--space-3); }
.lpk-story-trust p  { font-size: var(--fs-body); line-height: 1.6; color: var(--color-text-secondary); margin: 0; max-width: 70ch; }

/* ============================================================================
   PDP — single-product page (Phase 4-C.2)
   The PDP renders via a custom block-template + [lpk_product_pdp] shortcode that
   emits the canonical mockup `.lpk-pdp__*` HTML structure (mockups/product.html).
   Cart submission is AJAX (no WC form rendered visibly). The CSS below brings
   the rendered DOM into 1:1 mockup parity (audit 2026-05-08).
   ============================================================================ */

/* Container layout: PDP lives inside <main><div class="container"> from the
   single-product block template. The container element gets the standard
   site gutter so the PDP isn't edge-to-edge. */
body.single-product .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--space-4) var(--gutter, var(--space-5)) var(--space-10);
}

/* === Breadcrumb spacing above PDP — small visual buffer below header. === */
body.single-product .breadcrumb { padding: var(--space-3) 0 var(--space-4); }

/* === Gallery thumb strip — cap to viewport-relative height with internal
       scroll so a 12-image variable product (3 colours × 4 angles) doesn't
       create a 900px-tall thumb column that pushes the page down. */
@media (min-width: 768px) {
	body.single-product .lpk-pdp__thumbs {
		max-height: 520px;                              /* matches main image height */
		overflow-y: auto;
		overflow-x: hidden;
		padding-right: 4px;
		scrollbar-width: thin;
		scrollbar-color: var(--color-border-strong) transparent;
	}
	body.single-product .lpk-pdp__thumbs::-webkit-scrollbar { width: 4px; }
	body.single-product .lpk-pdp__thumbs::-webkit-scrollbar-thumb {
		background: var(--color-border-strong);
		border-radius: 2px;
	}
}

/* === Sticky gallery on desktop. Requires `overflow-x: clip` on html/body
       (handled above) so the viewport remains the scroll container. === */
@media (min-width: 1024px) {
	body.single-product .lpk-pdp__gallery {
		position: sticky;
		top: 96px;
		align-self: start;
		max-height: calc(100vh - 120px);
	}
}

/* === Info-blocks: enforce equal sizing across the 3 trust cards. The
       warranty card has an extra info-link icon, and content lengths differ,
       which made them render at different heights. Fix: equal min-height,
       align-items: stretch on the row, copy expands to fill. === */
body.single-product .lpk-pdp__info-blocks {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
body.single-product .lpk-pdp__info-block {
	min-height: 72px;
	padding: var(--space-3) var(--space-4);
	align-items: center;
}
body.single-product .lpk-pdp__info-block__copy {
	gap: 4px;
}
body.single-product .lpk-pdp__info-block__copy strong {
	font-size: var(--fs-body-sm);
	line-height: 1.35;
}
body.single-product .lpk-pdp__info-block__copy span {
	font-size: var(--fs-caption);
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* === Wishlist active state — filled heart on toggle. === */
.lpk-pdp__wishlist-btn.is-active {
	color: var(--color-error, #DC2626);
	border-color: var(--color-error, #DC2626);
}
.lpk-pdp__wishlist-btn.is-active svg {
	fill: var(--color-error, #DC2626);
	stroke: var(--color-error, #DC2626);
}

/* === Toast (used by Add-to-cart / wishlist feedback). === */
.lpk-pdp-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%) translateY(20px);
	background: var(--color-text-primary);
	color: var(--color-text-inverse);
	padding: 12px 22px;
	border-radius: var(--radius-md);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
	z-index: 9000;
	max-width: 90vw;
}
.lpk-pdp-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.lpk-pdp-toast[data-type="error"] { background: var(--color-error, #DC2626); }
@media (max-width: 600px) {
	/* Lift toast above sticky bottom bar so it doesn't overlap. */
	.lpk-pdp-toast { bottom: 80px; }
}

/* === Cart page (Phase 4-C) — supplements to layout.css `.lpk-cart__*` rules.
       Coupon row, applied-coupon chips, busy-state dimming, transitions. === */
body.woocommerce-cart .container,
body.page-cart .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--space-3) var(--gutter, var(--space-5)) var(--space-10);
}
.lpk-coupon {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	align-items: center;
}
.lpk-coupon input[type="text"] {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body-sm);
	font-family: inherit;
	background: #fff;
	min-height: 40px;
}
.lpk-coupon input[type="text"]:focus { outline: none; border-color: var(--color-text-primary); }
.lpk-coupon .btn {
	padding: 10px 16px;
	min-height: 40px;
	font-size: var(--fs-body-sm);
}
.lpk-coupon__applied {
	background: var(--color-bg-page) !important;
}
.lpk-cart__item.is-busy {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity .15s ease;
}
.lpk-cart__item .qty-stepper input::-webkit-outer-spin-button,
.lpk-cart__item .qty-stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.lpk-cart__item .qty-stepper input { -moz-appearance: textfield; }

/* Empty-cart center column. */
.lpk-cart__empty {
	background: var(--color-bg-surface);
	border: 1px dashed var(--color-border-subtle);
	border-radius: var(--radius-md);
}

/* === Checkout page — supplements to layout.css `.lpk-checkout__*` rules.
       Form-field styling, container max-width, busy-state on place-order. === */
body.woocommerce-checkout .container,
body.page-checkout .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--space-3) var(--gutter, var(--space-5)) var(--space-10);
}
.lpk-checkout .form-field { display: flex; flex-direction: column; gap: 6px; }
.lpk-checkout .form-field__label {
	font-weight: var(--fw-semibold);
	font-size: var(--fs-body-sm);
	color: var(--color-text-primary);
}
.lpk-checkout .form-field__input {
	padding: 10px 14px;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--fs-body-sm);
	color: var(--color-text-primary);
	background: #fff;
	min-height: 42px;
	transition: border-color var(--motion-fast);
}
.lpk-checkout .form-field__input:focus {
	outline: none;
	border-color: var(--color-text-primary);
}
.lpk-checkout .form-field__input[readonly] {
	background: var(--color-bg-surface);
	color: var(--color-text-secondary);
}
.lpk-checkout .form-field__hint {
	font-size: var(--fs-caption);
	color: var(--color-text-tertiary);
	line-height: 1.4;
}
.lpk-checkout #lpkPlaceOrder[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* === Category archive (Phase 4-C) — supplements to layout.css `.lpk-cat-*`,
       `.lpk-filters`, `.lpk-toolbar`, `.lpk-grid`, `.lpk-chips` rules. */
body.tax-product_cat .container,
body.post-type-archive-product .container,
body.archive .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--space-3) var(--gutter, var(--space-5)) var(--space-10);
}
.lpk-cat-layout {
	display: grid;
	gap: var(--space-6);
}
@media (min-width: 1024px) {
	.lpk-cat-layout { grid-template-columns: 240px 1fr; gap: var(--space-7); align-items: start; }
}
.lpk-cat-hero { padding: var(--space-5) 0 var(--space-4); }
.lpk-cat-hero__title {
	font-family: var(--font-heading);
	font-size: var(--fs-h1);
	font-weight: var(--fw-bold);
	margin: 0 0 var(--space-2);
	letter-spacing: -0.01em;
	line-height: 1.1;
}
.lpk-cat-hero__sub {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: var(--fs-body-lg);
	max-width: 70ch;
	line-height: 1.5;
}
.lpk-filters {
	background: #fff;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}
.lpk-filters__group { padding: var(--space-3) 0; border-top: 1px solid var(--color-border-subtle); }
.lpk-filters__group:first-child { border-top: 0; padding-top: 0; }
.lpk-filters__group-title {
	font-family: var(--font-heading);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 var(--space-3);
}
.lpk-filters__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lpk-filters__list label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-body-sm);
	color: var(--color-text-primary);
	cursor: pointer;
}
.lpk-filters__list .count {
	margin-left: auto;
	color: var(--color-text-tertiary);
	font-size: var(--fs-caption);
}
.lpk-filters__price-row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.lpk-filters__price-row input {
	flex: 1;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body-sm);
	font-family: inherit;
}
.lpk-filters__close {
	display: none;
	position: absolute;
	top: 12px; right: 12px;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--color-bg-page);
	border: 0;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
}
.lpk-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border-subtle);
	margin-bottom: var(--space-4);
}
.lpk-toolbar__count { color: var(--color-text-secondary); font-size: var(--fs-body-sm); }
.lpk-toolbar__right { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
/* Mobile has a fixed 2-up product grid (layout.css), so the 3-up / 4-up
   toggle is desktop-only. The base rule in layout.css already does
   display:none → inline-flex at ≥1024px; this override must respect the
   same media query, otherwise it un-hides the toggle on mobile. */
@media (min-width: 1024px) {
	.lpk-toolbar__view {
		display: flex;
		border: 1px solid var(--color-border-subtle);
		border-radius: var(--radius-sm);
		overflow: hidden;
	}
	.lpk-toolbar__view button {
		width: 32px; height: 32px;
		background: #fff;
		border: 0;
		cursor: pointer;
		color: var(--color-text-secondary);
		display: flex; align-items: center; justify-content: center;
	}
	.lpk-toolbar__view button.is-active { background: var(--color-text-primary); color: #fff; }
}
.lpk-toolbar__sort { display: flex; align-items: center; gap: var(--space-2); }
.lpk-toolbar__sort select {
	padding: 6px 10px;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body-sm);
	font-family: inherit;
	background: #fff;
}

/* Active filter chips */
.lpk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
	align-items: center;
}
.lpk-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-pill);
	padding: 4px 10px;
	font-size: var(--fs-caption);
}
.lpk-chip__remove {
	display: inline-flex;
	align-items: center;
	color: var(--color-text-tertiary);
	text-decoration: none;
}
.lpk-chip__remove:hover { color: var(--color-error, #DC2626); }
.lpk-chip--clear {
	font-size: var(--fs-caption);
	color: var(--color-text-secondary);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}
.lpk-chip--clear:hover { color: var(--color-text-primary); }

/* Product grid */
.lpk-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px)  { .lpk-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .lpk-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .lpk-grid--4 { grid-template-columns: repeat(4, 1fr) !important; } }

/* Pagination */
.pagination {
	display: flex;
	gap: var(--space-2);
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.pagination__item {
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-sm);
	color: var(--color-text-primary);
	text-decoration: none;
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	background: #fff;
}
.pagination__item:hover { background: var(--color-bg-surface); }
.pagination__item--current {
	background: var(--color-text-primary);
	color: #fff;
	border-color: var(--color-text-primary);
	pointer-events: none;
}
.pagination__item[aria-disabled="true"] {
	opacity: 0.4;
	pointer-events: none;
}

/* ============================================================
   Mobile filter FAB + drawer
   ============================================================
   Pattern: fixed-position floating "Filters" pill at bottom-right
   on viewports <1024px. Tapping it opens .lpk-filters as a left-
   anchored drawer with a dimmed backdrop. Closes via × button,
   backdrop click, ESC, or resize-to-desktop (JS in
   category-page.js owns the open/close state).
   ============================================================ */

.lpk-mobile-filter-btn {
	display: none;
	position: fixed;
	right: 16px;
	bottom: 16px;
	/* Reset the pre-existing centering pattern from layout.css:1664 — without
	 * these, the inherited `left: 50%; transform: translateX(-50%)` keeps the
	 * button stuck in the horizontal middle of the viewport and `right: 16px`
	 * is ignored (left wins when both are set on a fixed element). */
	left: auto;
	transform: none;
	z-index: 95;
	padding: 12px 18px;
	background: var(--color-text-primary);
	color: #fff;
	border: 0;
	border-radius: var(--radius-pill);
	box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.08);
	cursor: pointer;
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	font-family: inherit;
	gap: 8px;
	align-items: center;
	line-height: 1;
	transition: transform 150ms ease, box-shadow 150ms ease;
}
.lpk-mobile-filter-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.10); }
.lpk-mobile-filter-btn:active { transform: translateY(0); }
.lpk-mobile-filter-btn[aria-expanded="true"] { background: var(--color-text-primary); }

/* Active-filter count badge */
.lpk-mobile-filter-btn__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--color-accent-mint, #00ECC2);
	color: var(--color-text-primary);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* Drawer backdrop — appended to <body> by JS once.
   Lives at z-index just below the drawer; fades in/out with the .is-open class. */
.lpk-filters-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 89;
	opacity: 0;
	pointer-events: none;
	transition: opacity 280ms ease;
}
.lpk-filters-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 1023px) {
	.lpk-mobile-filter-btn { display: inline-flex; }
	.lpk-filters-backdrop { display: block; }

	.lpk-filters {
		/* Override layout.css:1622 `.lpk-filters { display: none }` which is the
		 * desktop-only baseline. On mobile we want the sidebar to render (as a
		 * drawer that slides in from the left). Without this, JS adding
		 * `.is-open` does nothing visible — the element stays display:none. */
		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: auto;
		width: min(360px, 88vw);
		z-index: 90;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #fff;
		transform: translateX(-100%);
		/* iOS-feel easing — fast acceleration, smooth deceleration. */
		transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
		border-radius: 0;
		padding: var(--space-5);
		box-shadow: 4px 0 24px rgba(0,0,0,0.12);
	}
	.lpk-filters.is-open { transform: translateX(0); }
	.lpk-filters__close {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	body.lpk-filters-open { overflow: hidden; }
}

/* Respect user preference for reduced motion — disable slide + fade transitions.
   The state changes (class toggling) still apply; only the animation is suppressed. */
@media (prefers-reduced-motion: reduce) {
	.lpk-filters,
	.lpk-filters-backdrop,
	.lpk-mobile-filter-btn {
		transition: none;
	}
}

/* === My-account page (Phase 4-D) — supplements to layout.css `.lpk-account__*`.
       Container max-width, address card, modal, status pills. */
body.woocommerce-account .container,
body.page-template-page-my-account .container,
body.page-my-account .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--space-3) var(--gutter, var(--space-5)) var(--space-10);
}
.lpk-address-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-3);
}
.lpk-address-card {
	padding: var(--space-4);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	background: #fff;
}
.lpk-address-card.is-default { border-color: var(--color-text-primary); }
.lpk-address-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-2);
}
.lpk-address-card__label {
	font-weight: var(--fw-semibold);
	font-family: var(--font-heading);
}
.lpk-address-card__default {
	font-size: 10px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.06em;
	background: var(--color-text-primary);
	color: #fff;
	padding: 2px 8px;
	border-radius: var(--radius-sm);
}
.lpk-address-card__body {
	font-size: var(--fs-body-sm);
	color: var(--color-text-secondary);
	line-height: 1.5;
	flex: 1;
}
.lpk-address-card__actions {
	display: flex;
	gap: var(--space-3);
	font-size: var(--fs-body-sm);
	flex-wrap: wrap;
}
.lpk-address-card__actions a {
	color: var(--color-text-primary);
	font-weight: var(--fw-medium);
}

/* Order status pills */
.lpk-status {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.lpk-status--pending,
.lpk-status--on-hold     { background: rgba(245, 158, 11, 0.14); color: #B45309; }
.lpk-status--processing  { background: rgba(59, 130, 246, 0.14); color: #1D4ED8; }
.lpk-status--shipped     { background: rgba(0, 184, 158, 0.14); color: #0F7C33; }
.lpk-status--completed,
.lpk-status--delivered   { background: rgba(0, 184, 158, 0.18); color: #065F46; }
.lpk-status--cancelled,
.lpk-status--failed,
.lpk-status--refunded    { background: rgba(220, 38, 38, 0.10); color: #B91C1C; }

/* Modal (used by the address editor, future drawers, etc.) */
.lpk-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	z-index: 9000;
}
.lpk-modal__panel {
	background: #fff;
	border-radius: var(--radius-md);
	padding: var(--space-6);
	width: 100%;
	max-width: 540px;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
}
.lpk-modal__close {
	position: absolute;
	top: 12px; right: 12px;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--color-bg-page);
	border: 0;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
}
body.lpk-modal-open { overflow: hidden; }

/* My-account form-field reuse (same styling as checkout) */
.lpk-account .form-field { display: flex; flex-direction: column; gap: 6px; }
.lpk-account .form-field__label { font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); }
.lpk-account .form-field__input {
	padding: 10px 14px;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--fs-body-sm);
	color: var(--color-text-primary);
	background: #fff;
	min-height: 42px;
	transition: border-color var(--motion-fast);
}
.lpk-account .form-field__input:focus { outline: none; border-color: var(--color-text-primary); }
.lpk-modal .form-field { display: flex; flex-direction: column; gap: 6px; }
.lpk-modal .form-field__label { font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); }
.lpk-modal .form-field__input {
	padding: 10px 14px;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--fs-body-sm);
	background: #fff;
	min-height: 42px;
}

/* === AJAX search dropdown (Phase 4-D) === */
.lpk-search-drop {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 6px;
	max-height: 70vh;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	z-index: 90;
	font-size: var(--fs-body-sm);
}
.lpk-search-drop[hidden] { display: none; }
.lpk-search-drop__group { padding: var(--space-2); border-bottom: 1px solid var(--color-border-subtle); }
.lpk-search-drop__group:last-child { border-bottom: 0; }
.lpk-search-drop__title {
	margin: 6px 8px;
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}
.lpk-search-drop__item {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-2);
	border-radius: var(--radius-sm);
	color: var(--color-text-primary);
	text-decoration: none;
}
.lpk-search-drop__item:hover,
.lpk-search-drop__item.is-focused {
	background: var(--color-bg-surface);
}
.lpk-search-drop__item img {
	width: 36px; height: 36px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-sm);
	padding: 2px;
}
.lpk-search-drop__name {
	font-weight: var(--fw-medium);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lpk-search-drop__price {
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
}
.lpk-search-drop__item--article {
	grid-template-columns: 1fr;
}
.lpk-search-drop__cat {
	font-size: 10px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent-mint-dark, #00B89E);
	display: block;
	margin-bottom: 2px;
}
.lpk-search-drop__all {
	display: block;
	padding: var(--space-3) var(--space-4);
	background: var(--color-text-primary);
	color: #fff;
	text-decoration: none;
	font-weight: var(--fw-semibold);
	border-bottom-left-radius: var(--radius-md);
	border-bottom-right-radius: var(--radius-md);
}
.lpk-search-drop__all:hover { background: #1F2937; }
.lpk-search-drop__empty {
	padding: var(--space-4);
	color: var(--color-text-secondary);
	text-align: center;
}
.lpk-search-drop__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-4);
	color: var(--color-text-secondary);
	font-size: var(--fs-body-sm);
}
.lpk-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid var(--color-border-subtle);
	border-top-color: var(--color-text-primary);
	border-radius: 50%;
	animation: lpk-spin 0.7s linear infinite;
}
@keyframes lpk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.lpk-spinner { animation-duration: 1.4s; }
}

/* === 404 page (Phase 4-D) === */
.lpk-404 {
	padding: var(--space-10) 0 var(--space-6);
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}
.lpk-404__code {
	font-family: var(--font-heading);
	font-size: clamp(96px, 18vw, 180px);
	font-weight: var(--fw-bold);
	line-height: 1;
	color: var(--color-text-tertiary);
	letter-spacing: -0.04em;
	margin-bottom: var(--space-3);
}
.lpk-404__title {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	margin: 0 0 var(--space-3);
	line-height: 1.15;
}
.lpk-404__sub {
	color: var(--color-text-secondary);
	font-size: var(--fs-body-lg);
	margin: 0 auto var(--space-5);
	max-width: 50ch;
	line-height: 1.5;
}
.lpk-404__search {
	position: relative;
	max-width: 480px;
	margin: 0 auto var(--space-5);
}
.lpk-404__search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text-tertiary);
	display: inline-flex;
}
.lpk-404__search input {
	width: 100%;
	padding: 14px 16px 14px 44px;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: var(--fs-body);
	background: #fff;
}
.lpk-404__search input:focus {
	outline: none;
	border-color: var(--color-text-primary);
}
.lpk-404__cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
}
.lpk-404__cats a {
	padding: 6px 14px;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-pill);
	font-size: var(--fs-body-sm);
	color: var(--color-text-primary);
	text-decoration: none;
	background: #fff;
}
.lpk-404__cats a:hover {
	background: var(--color-text-primary);
	color: #fff;
}

/* === Static / content pages (Phase 4-D batch 3): About, Contact, Policy,
       Help, Buying guide. Page hero, USPs, contact cards, article typography. */
body.page .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--space-3) var(--gutter, var(--space-5)) var(--space-10);
}
.lpk-page-hero {
	padding: var(--space-7) 0 var(--space-5);
	max-width: 760px;
}
.lpk-page-hero__eyebrow {
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-mint-dark, #00B89E);
	margin: 0 0 var(--space-2);
}
.lpk-page-hero__title {
	font-family: var(--font-heading);
	font-size: clamp(32px, 4.4vw, 52px);
	font-weight: var(--fw-bold);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-4);
}
.lpk-page-hero__sub {
	color: var(--color-text-secondary);
	font-size: var(--fs-body-lg);
	line-height: 1.55;
	margin: 0;
	max-width: 60ch;
}

/* USP grid (about) */
.lpk-usps {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin: var(--space-7) 0;
}
.lpk-usp {
	padding: var(--space-5);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	background: #fff;
}
.lpk-usp__icon {
	display: inline-flex;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	background: var(--color-bg-surface);
	border-radius: var(--radius-sm);
	color: var(--color-accent-mint-dark, #00B89E);
	margin-bottom: var(--space-3);
}
.lpk-usp__title {
	font-family: var(--font-heading);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	margin: 0 0 6px;
}
.lpk-usp__body {
	color: var(--color-text-secondary);
	font-size: var(--fs-body-sm);
	line-height: 1.5;
	margin: 0;
}

/* Contact cards */
.lpk-contact-grid {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-top: var(--space-3);
}
.lpk-contact-card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-5);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color var(--motion-fast), transform var(--motion-fast);
}
.lpk-contact-card:hover {
	border-color: var(--color-text-primary);
	transform: translateY(-1px);
}
.lpk-contact-card__icon {
	display: inline-flex;
	width: 40px; height: 40px;
	align-items: center; justify-content: center;
	background: var(--color-bg-surface);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-2);
}
.lpk-contact-card__title {
	font-family: var(--font-heading);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	margin: 0;
}
.lpk-contact-card__sub {
	color: var(--color-text-secondary);
	font-size: var(--fs-body-sm);
	margin: 2px 0;
}
.lpk-contact-card__hours {
	font-size: var(--fs-caption);
	color: var(--color-text-tertiary);
	margin-top: 2px;
}
.lpk-contact-card__detail {
	margin-top: var(--space-2);
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
	font-size: var(--fs-body-sm);
	word-break: break-all;
}

/* Long-form article typography (about / policy / help / buying-guide) */
.lpk-article {
	color: var(--color-text-primary);
	line-height: 1.65;
	font-size: var(--fs-body);
}
.lpk-article > * + * { margin-top: var(--space-3); }
.lpk-article h2 {
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	margin: var(--space-7) 0 var(--space-3);
	letter-spacing: -0.01em;
}
.lpk-article h2:first-child { margin-top: 0; }
.lpk-article h3 {
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	margin: var(--space-6) 0 var(--space-2);
}
.lpk-article p { margin: 0 0 var(--space-3); }
.lpk-article ul, .lpk-article ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.lpk-article li + li { margin-top: 6px; }
.lpk-article strong { font-weight: var(--fw-semibold); }
.lpk-article a {
	color: var(--color-text-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.lpk-article a:hover { color: var(--color-accent-mint-dark, #00B89E); }
.lpk-article blockquote {
	margin: var(--space-5) 0;
	padding: var(--space-4) var(--space-5);
	border-left: 4px solid var(--color-accent-mint, #00ECC2);
	background: var(--color-bg-surface);
	color: var(--color-text-secondary);
	border-radius: var(--radius-sm);
}

/* === Mobile responsive safety nets (Phase 4-D polish) =====================
   Defensive rules that prevent the most common horizontal-scroll and
   uneven-layout regressions across every template. Audit-driven. */

/* 1. Media never overflows its container. Theme-wide. */
img, video, iframe, object, embed { max-width: 100%; height: auto; }

/* 2. Grid / flex items get min-width: 0 so long unbreakable content
      (product names, SKUs, URLs) can't push the row wider than the parent. */
.lpk-grid > *,
.lpk-cat-layout > *,
.lpk-cart__layout > *,
.lpk-account__layout > *,
.lpk-checkout__layout > *,
.lpk-pdp__layout > *,
.lpk-blog-grid > *,
.lpk-section__head > *,
.lpk-summary > *,
.lpk-toolbar > *,
.lpk-checkout__form-row > * { min-width: 0; }

/* 3. Long product titles in cards wrap rather than overflow. */
.product-card__title,
.lpk-cart__item-title,
.lpk-blog-card__title,
.lpk-search-drop__name { word-wrap: break-word; overflow-wrap: anywhere; }

/* 4. Tables (specs, comparisons) become horizontally scrollable on small
      screens instead of pushing the whole page sideways. */
@media (max-width: 768px) {
	.lpk-article table,
	.lpk-specs-table {
		display: block;
		overflow-x: auto;
		max-width: 100%;
		-webkit-overflow-scrolling: touch;
	}
}

/* 5. Two-column layouts (cart, checkout, account, category) always collapse
      to single column under their breakpoint. The layout.css rules already
      guard with `@media (min-width: 1024px) { ... 2-col ... }`, so this is
      a belt-and-braces guard against any rule that forgot. */
@media (max-width: 1023px) {
	.lpk-cart__layout,
	.lpk-checkout__layout,
	.lpk-account__layout,
	.lpk-cat-layout {
		grid-template-columns: 1fr !important;
	}
}

/* 6. Cart layout on tablet (768-1023): summary moves below items full-width. */
@media (max-width: 1023px) {
	.lpk-summary { width: 100%; max-width: none; }
}

/* 7. Long REST API URLs / SKUs in tables and meta lines get word-break. */
.lpk-article a,
.lpk-cart__item-meta,
.lpk-pdp__sku { word-break: break-word; }

/* 8. Header search input shrinks gracefully on narrow screens — prevents
      the icons from getting pushed off the right edge. */
@media (max-width: 900px) {
	.lpk-header__search { min-width: 0; flex: 1 1 auto; }
}

/* 9. Hide horizontal scrollbars on EVERY visual carousel (category grid,
      feature tiles, product rails, mobile-grid mode of cart upsell + 404
      popular-products, etc.). The plan + mockups never showed a scrollbar;
      use scroll-snap for crisp paging instead. */
.lpk-feature-tiles,
.lpk-category-grid--v2,
.lpk-rail .lpk-carousel,
.lpk-cart__upsell .lpk-grid--mobile-carousel,
.lpk-404__rail .lpk-grid--mobile-carousel {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.lpk-feature-tiles::-webkit-scrollbar,
.lpk-category-grid--v2::-webkit-scrollbar,
.lpk-rail .lpk-carousel::-webkit-scrollbar,
.lpk-cart__upsell .lpk-grid--mobile-carousel::-webkit-scrollbar,
.lpk-404__rail .lpk-grid--mobile-carousel::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* 10. Form fields never push wider than parent on mobile. */
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="number"], textarea, select {
	max-width: 100%;
	box-sizing: border-box;
}

/* === Mobile horizontal-scroll carousels for cart "you might also like" and
       404 "most-bought" rails. Same pattern as the category-grid carousel:
       2 full cards + ~25% peek of the next, scroll-snap, scrollbar hidden. */
@media (max-width: 600px) {
	.lpk-cart__upsell .lpk-grid--mobile-carousel,
	.lpk-404__rail .lpk-grid--mobile-carousel {
		display: grid !important;
		grid-template-columns: none !important;
		grid-auto-flow: column !important;
		grid-auto-columns: 65vw !important;     /* ~1.5 full cards visible at <600 */
		gap: var(--space-3) !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory;
		padding-bottom: var(--space-3);
		margin-left:  calc(-1 * var(--gutter, var(--space-5)));
		margin-right: calc(-1 * var(--gutter, var(--space-5)));
		padding-left:  var(--gutter, var(--space-5));
		padding-right: var(--gutter, var(--space-5));
		-webkit-overflow-scrolling: touch;
	}
	.lpk-cart__upsell .lpk-grid--mobile-carousel > .product-card,
	.lpk-404__rail .lpk-grid--mobile-carousel > .product-card { scroll-snap-align: start; }
}

/* === Out-of-stock label on product cards.
       Per user spec: keep the existing top-right corner pill; only center
       the TEXT inside it (was previously left-aligned within the pill).
       Do NOT add a second centered label over the image — the corner pill
       is the canonical status indicator. */
.product-card__stock.stock-indicator--out {
	text-align: center;
	justify-content: center;     /* inline-flex: center the dot + text together */
}

/* === Header cart pill — hide when count is 0 (don't render an empty badge).
       The shortcode emits `hidden` server-side; the JS hydration toggles it
       on count change. Both paths converge on this rule. === */
.lpk-header__cart-count[hidden] { display: none !important; }

/* === Customer reviews section — dedicated section between PDP details and
       related rail. The Reviews tab button scrolls here (data-scroll-to). === */
.lpk-pdp-reviews {
	padding: var(--space-10) 0 var(--space-8);
	margin-top: var(--space-6);
	border-top: 1px solid var(--color-border-subtle);
}
.lpk-pdp-reviews__heading {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	margin: 0 0 var(--space-6);
	letter-spacing: -0.01em;
}

/* Summary block: avg + bars side-by-side on desktop, stacked on mobile. */
.lpk-pdp-reviews__summary {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-7);
	align-items: center;
	padding: var(--space-6);
	background: var(--color-bg-surface);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-7);
	max-width: 720px;
}
@media (max-width: 720px) {
	.lpk-pdp-reviews__summary {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}
}
.lpk-pdp-reviews__avg-num {
	font-family: var(--font-heading);
	font-size: 56px;
	font-weight: var(--fw-bold);
	line-height: 1;
	color: var(--color-text-primary);
}
.lpk-pdp-reviews__avg-stars {
	color: #F59E0B;
	font-size: 22px;
	letter-spacing: 2px;
	margin-top: var(--space-2);
}
.lpk-pdp-reviews__avg-count {
	color: var(--color-text-secondary);
	font-size: var(--fs-body-sm);
	margin-top: var(--space-2);
}

.lpk-pdp-reviews__bars {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.lpk-pdp-reviews__bar-row {
	display: grid;
	grid-template-columns: 32px 1fr 36px;
	gap: var(--space-2);
	align-items: center;
	font-size: var(--fs-body-sm);
}
.lpk-pdp-reviews__bar-label {
	color: var(--color-text-secondary);
}
.lpk-pdp-reviews__bar {
	height: 8px;
	background: var(--color-bg-page);
	border-radius: 4px;
	overflow: hidden;
}
.lpk-pdp-reviews__bar-fill {
	height: 100%;
	background: #F59E0B;
	border-radius: 4px;
	transition: width var(--motion-base);
}
.lpk-pdp-reviews__bar-count {
	color: var(--color-text-secondary);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* List wrapper. */
.lpk-pdp-reviews__list { max-width: 880px; }
.lpk-pdp-reviews__empty {
	color: var(--color-text-secondary);
	padding: var(--space-5) 0;
}
.lpk-pdp-reviews__cards {
	display: grid;
	gap: var(--space-4);
}

/* Review card — mockup spec exactly. */
.lpk-review-card {
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	background: #fff;
}
.lpk-review-card__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}
.lpk-review-card__stars {
	color: #F59E0B;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 1;
}
.lpk-review-card__title {
	display: block;
	margin-top: 4px;
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
	font-size: var(--fs-body);
	line-height: 1.3;
}
.lpk-review-card__verified {
	font-size: 10px !important;
	flex-shrink: 0;
}
.lpk-review-card__body {
	margin: 0 0 var(--space-3);
	color: var(--color-text-secondary);
	line-height: 1.55;
	font-size: var(--fs-body);
}
.lpk-review-card__footer {
	font-size: var(--fs-caption);
	/* WCAG AA: #999999 (text-tertiary) on white = 2.84:1, fails.
	   #5A5A5A (text-secondary) on white = 7.43:1, passes AAA. */
	color: var(--color-text-secondary);
	margin-top: var(--space-3);
}

/* Photo / video grid inside a review card. */
.lpk-review-card__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: var(--space-2);
	margin: var(--space-3) 0;
}
.lpk-review-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-sm);
	background: var(--color-bg-surface);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--motion-fast), transform var(--motion-fast);
}
.lpk-review-card__media:hover {
	border-color: var(--color-border-strong);
	transform: scale(1.02);
}
.lpk-review-card__media img,
.lpk-review-card__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.lpk-review-card__media--video::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	pointer-events: none;
}
.lpk-review-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 28px;
	pointer-events: none;
	z-index: 2;
}
.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Lightbox overlay (created on demand by pdp-page.js). */
.lpk-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 9500;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
}
.lpk-lightbox.is-open { display: flex; }
.lpk-lightbox__close {
	position: absolute;
	top: 16px; right: 16px;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
	color: #fff;
	border: 0;
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	display: flex; align-items: center; justify-content: center;
}
.lpk-lightbox__close:hover { background: rgba(255,255,255,0.22); }
.lpk-lightbox__nav {
	position: absolute;
	top: 50%; transform: translateY(-50%);
	width: 48px; height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
	color: #fff;
	border: 0;
	cursor: pointer;
	font-size: 28px;
	display: flex; align-items: center; justify-content: center;
}
.lpk-lightbox__nav:hover { background: rgba(255,255,255,0.22); }
.lpk-lightbox__nav--prev { left: 16px; }
.lpk-lightbox__nav--next { right: 16px; }
.lpk-lightbox__media {
	max-width: 96vw;
	max-height: 90vh;
}
.lpk-lightbox__media img,
.lpk-lightbox__media video {
	max-width: 96vw;
	max-height: 90vh;
	object-fit: contain;
	display: block;
}

/* Slider mode — all images mounted as scroll-snap cells. Swipe natively
   navigates; nav buttons scroll to siblings. Used by the PDP zoom; the
   review-media lightbox uses single-mode (no class) and is unaffected. */
.lpk-lightbox__media--slider {
	display: flex;
	width: 96vw;
	height: 90vh;
	max-width: none;
	max-height: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.lpk-lightbox__media--slider::-webkit-scrollbar { display: none; }
.lpk-lightbox__slide {
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lpk-lightbox__slide img {
	max-width: 96vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Review submission form. */
.lpk-pdp-reviews__form-wrap {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border-subtle);
	max-width: 760px;
}
.lpk-review-form__title {
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	margin: 0 0 var(--space-4);
}
.lpk-review-form .lpk-review-form__row,
.lpk-review-form p {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--space-4);
}
.lpk-review-form label {
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
	font-size: var(--fs-body-sm);
}
.lpk-review-form .optional {
	font-weight: var(--fw-regular);
	color: var(--color-text-tertiary);
	font-size: var(--fs-caption);
}
.lpk-review-form .required {
	color: var(--color-error, #DC2626);
}
.lpk-review-form input[type="text"],
.lpk-review-form input[type="email"],
.lpk-review-form input[type="url"],
.lpk-review-form textarea,
.lpk-review-form select {
	padding: 10px 14px;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--fs-body-sm);
	color: var(--color-text-primary);
	background: #fff;
	transition: border-color var(--motion-fast);
}
.lpk-review-form input:focus,
.lpk-review-form textarea:focus,
.lpk-review-form select:focus {
	outline: none;
	border-color: var(--color-text-primary);
}
.lpk-review-form textarea { min-height: 120px; resize: vertical; }
/* Custom-styled file inputs — visually hide the native input, expose a
   button-styled <label> + a sibling status text showing chosen file count.
   Native browser styling for <input type="file"> looks generic; this matches
   the brand's button system and works identically across browsers. */
.lpk-review-form__row-label {
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
	font-size: var(--fs-body-sm);
}
.lpk-review-form__file {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.lpk-review-form__file-native {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
.lpk-review-form__file-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	font-family: inherit;
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
	background: #fff;
	border: 1.5px solid var(--color-border-default, var(--color-border-subtle));
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: border-color var(--motion-fast), background-color var(--motion-fast);
}
.lpk-review-form__file-btn:hover {
	border-color: var(--color-text-primary);
	background: var(--color-bg-surface);
}
.lpk-review-form__file-native:focus-visible + .lpk-review-form__file-btn {
	outline: 2px solid var(--color-accent-mint, #00ECC2);
	outline-offset: 2px;
}
.lpk-review-form__file-btn svg { flex-shrink: 0; }
.lpk-review-form__file-status {
	font-size: var(--fs-caption);
	color: var(--color-text-secondary);
	min-width: 0;
	word-break: break-word;
}
.lpk-review-form__file-status.is-populated {
	color: var(--color-text-primary);
	font-weight: var(--fw-medium);
}
.lpk-review-form input[type="file"]:not(.lpk-review-form__file-native) {
	padding: 8px 0;
	font-size: var(--fs-body-sm);
	background: transparent;
}
.lpk-review-form__previews {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 8px;
	margin-top: 8px;
}
.lpk-review-form__previews img,
.lpk-review-form__video-preview video {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border-subtle);
}
.lpk-review-form__video-preview video {
	aspect-ratio: 16 / 9;
}
.lpk-review-form .submit { margin-top: var(--space-4); }
.lpk-review-form .submit input[type="submit"],
.lpk-review-form button[type="submit"] {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	padding: 12px 24px;
	background: var(--color-text-primary);
	color: #fff;
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: var(--fs-body-sm);
	letter-spacing: 0.02em;
	transition: opacity var(--motion-fast);
}
.lpk-review-form .submit input[type="submit"]:hover { opacity: 0.85; }
.lpk-review-form .comment-form-rating { margin-bottom: var(--space-4); }
.lpk-review-form .comment-form-rating label { display: block; margin-bottom: 6px; }

/* === Related products section — uses our standard product rail; just
       layout/spacing harmonization on the PDP. === */
.lpk-pdp__related {
	padding: var(--space-10) 0 var(--space-6);
	margin-top: var(--space-8);
	border-top: 1px solid var(--color-border-subtle);
}
.lpk-pdp__related .lpk-section__head {
	margin-bottom: var(--space-5);
}

/* === Reviews tab — keep WC's comment list constrained to mockup width. === */
body.single-product #reviews .commentlist,
body.single-product #reviews #respond { max-width: 720px; }

/* === Story sections rendered inside the Overview tab (description content):
       drop the negative-margin full-bleed from `.lpk-story-sku-note` and let
       text fill the bg block edge-to-edge. The original negative-margin was
       designed for `.lpk-story` parent context — inside a tab panel, the
       full-bleed creates the "wide bg, narrow text" mismatch. === */
body.single-product .pdp-tabs__panel .lpk-story-sku-note {
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: var(--space-6);
	margin-bottom: var(--space-6);
}
body.single-product .pdp-tabs__panel .lpk-story-sku-note h3,
body.single-product .pdp-tabs__panel .lpk-story-sku-note p {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0;
	margin-right: 0;
}

/* === Mobile: collapse 2-col layout to single column, drop sticky, hide
       sticky bottom bar visibility logic ships through canonical layout.css. === */
@media (max-width: 1023px) {
	body.single-product .lpk-pdp__gallery {
		position: static;
		max-height: none;
	}
	/* Add bottom padding so sticky-cart bar doesn't cover the info blocks. */
	body.single-product .container { padding-bottom: 96px; }
}

/* === A11y baseline fixes (axe-core 2026-05-08 audit) === */

/* Stock indicator text contrast — canonical --color-success #16A34A on white = 3.29
   (fails WCAG AA 4.5). Use a darker hue for AA-compliant text contrast. */
.stock-indicator--in  { color: #0F7C33 !important; }   /* darker green, ~5.6:1 contrast */
.stock-indicator--out { color: #B91C1C !important; }   /* darker red, ~6.4:1 contrast */

/* Story footnote text — too-light grey by inheritance. Use canonical
   --color-text-secondary (#5F6368, ~4.6:1 on white = AA). */
.lpk-story-section__footnote { color: var(--color-text-secondary) !important; }
.lpk-story-section__footnote a {
	color: var(--color-text-primary) !important;
	text-decoration: underline;
}

/* Sustainability card heading — mint #00B89E on bg-surface fails contrast.
   Use text-primary (black) for better hierarchy + AA compliance. */
.lpk-sus-card h3 { color: var(--color-text-primary) !important; }

/* Reviews verified-purchase badge — green text on mint-tinted bg fails contrast.
   Use the darker green token for AA compliance. */
.lpk-reviews__verified-badge { color: #0F7C33 !important; }

/* Footer text on black background — canonical 0.5 alpha white was too dim.
   0.75 gives 4.5+ contrast. */
.lpk-footer,
.lpk-footer .text-body-sm,
.lpk-footer__about { color: rgba(255,255,255,0.78) !important; }
.lpk-footer__list a { color: rgba(255,255,255,0.85) !important; }
.lpk-footer__list a:hover { color: #fff !important; }

/* Blog placeholder card excerpt — was using --color-text-tertiary (#8B8E93)
   which is 3.0:1 on white. Bump to --color-text-secondary (#5F6368, 4.6:1). */
.lpk-blog-card--placeholder .lpk-blog-card__excerpt {
	color: var(--color-text-secondary) !important;
}

/* Auth-seal sub-text on dark bg — text-secondary's #5a5a5a fails contrast
   when nested inside the black auth-seal block. Force white-with-alpha. */
.auth-seal .text-secondary,
.auth-seal--block .text-secondary { color: rgba(255,255,255,0.78) !important; }

/* Skip-link (a11y). */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	padding: 8px 16px;
	background: var(--color-text-primary);
	color: var(--color-text-inverse);
	text-decoration: none;
	font-weight: var(--fw-semibold);
}
.skip-link:focus { left: 16px; top: 16px; }

/* ============================================================
 * .lpk-intro-band — entity-introduction section under the hero
 *
 * Holds the canonical <h1> for the homepage ("Logitech Pakistan ...")
 * and a short entity-introduction paragraph with links to key category
 * targets. Sits between the dark hero slider and the lighter feature/
 * category surfaces that follow — a deliberate calm pause that gives
 * first-time visitors instant "this is what this site is" context.
 *
 * Visual intent: white background, narrow centered column (max 920px),
 * a small mint accent on the eyebrow, comfortable but compact padding.
 * Never competes with the hero — H1 is 30px max vs hero's 44px.
 *
 * Responsive: 36/40 padding desktop → 22/26 mobile; H1 30 → 20px.
 * The lede paragraph stays full length on all viewports; we considered
 * shortening it on mobile but mobile users still need the same entity-
 * description content for SEO, so the trade-off is +60px scroll on mobile.
 * ============================================================ */
.lpk-intro-band {
	background: var(--color-bg-page);
	padding: 36px var(--gutter, 32px) 40px;
	border-bottom: 1px solid var(--color-border-subtle);
}
.lpk-intro-band__inner {
	max-width: 920px;
	margin: 0 auto;
}
.lpk-intro-band__eyebrow {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	/* WCAG AA: #999999 (text-tertiary) at 11px fails contrast (2.84:1).
	   #5A5A5A (text-secondary) passes AAA (7.43:1). */
	color: var(--color-text-secondary);
	margin: 0 0 8px;
	font-weight: var(--fw-semibold, 600);
	display: flex;
	align-items: center;
	gap: 8px;
}
.lpk-intro-band__eyebrow::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 1.5px;
	background: var(--color-accent-mint-dark);
}
.lpk-intro-band__h1 {
	font-size: 30px;
	font-weight: var(--fw-bold, 700);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	color: var(--color-text-primary);
}
.lpk-intro-band__lede {
	color: var(--color-text-secondary);
	font-size: 14px;
	line-height: 1.65;
	margin: 0;
	max-width: 760px;
}
.lpk-intro-band__lede a {
	color: var(--color-text-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--color-text-tertiary);
	transition: text-decoration-color 0.15s ease;
}
.lpk-intro-band__lede a:hover {
	text-decoration-color: var(--color-text-primary);
}

@media (max-width: 1023px) {
	.lpk-intro-band { padding: 28px var(--gutter, 24px) 32px; }
	.lpk-intro-band__h1 { font-size: 24px; }
	.lpk-intro-band__lede { font-size: 13px; }
}
@media (max-width: 599px) {
	.lpk-intro-band { padding: 22px var(--gutter, 16px) 26px; }
	.lpk-intro-band__h1 { font-size: 20px; }
}