/**
 * Local Tasker — Storefront pixel-perfect layer.
 *
 * Loaded AFTER the compiled Tailwind bundle (local-tasker-custom-style) so these
 * rules win on equal specificity. Values are taken directly from the Figma
 * reference (file dRROcHjknBU7E0QfH46Kiv):
 *   • Shop archive   — node 29:4120
 *   • Hero search    — node 29:20240
 *   • Single product — node 29:4524
 *
 * Tokens used: brand #0a65fc, text #131313, muted #4a5565, border #e5e5df,
 * surface #f8f8f7, page #f7f7f5, sale #ff1c1c, headings "PP Formula Semi Extended".
 */

:root {
	--lt-page: #f7f7f5;
	--lt-surface: #f8f8f7;
	--lt-line: #e5e5df;
	--lt-line-2: #e9eaec;
	--lt-brand: #0a65fc;
	--lt-brand-dark: #0850ce;
	--lt-ink: #131313;
	--lt-ink-2: #0a0d1a;
	--lt-muted: #4a5565;
	--lt-muted-2: #6b7280;
	--lt-sale: #ff1c1c;
	--lt-accent: #f26522;
}

/* =====================================================================
 *  SHOP ARCHIVE — node 29:4120
 * ================================================================== */

.lt-shop-archive {
	background: var(--lt-page);
}

/* Figma mobile (node 29:6930): the page sits on white, not the grey page tint. */
@media (max-width: 991px) {
	.lt-shop-archive {
		background: #fff;
	}
}

/* The Shop sort <select> ships its own SVG caret in the template. Guarantee no
   second caret is painted on top of it by any global WooCommerce select rule. */
.lt-shop-sort__select {
	background-image: none !important;
}

/* Sidebar: divider under the "FILTERS" title (Figma aside 29:4120). */
@media (min-width: 992px) {
	.lt-shop-filters .lt-filters-title {
		border-bottom: 1px solid var(--lt-line);
		padding-bottom: 10px;
	}
}

/* ---- Toolbar: sits on the page background, no white bar ---- */
.lt-shop-archive__bar {
	background: transparent !important;
	border-bottom: 0 !important;
	padding-top: 54px;
}

@media (max-width: 991px) {
	.lt-shop-archive__bar {
		padding-top: 40px;
	}

	.lt-shop-archive__bar .breadcrumb {
		margin-bottom: 48px;
	}
}

@media (max-width: 767px) {
	.lt-shop-archive__bar {
		padding-top: 32px;
	}

	.lt-shop-archive__bar .breadcrumb {
		margin-bottom: 32px;
	}
}

.lt-shop-archive__bar .breadcrumb .bread-lists {
	justify-content: flex-start;
}

.lt-shop-archive__bar .breadcrumb svg path {
	stroke: var(--lt-muted-2);
}

/* Figma: toolbar sits 80px below the section top (64px on mobile); the 57px
   gap down to the sidebar/grid is applied on the content container itself. */
.lt-shop-archive__bar .container>div {
	/* padding-top: 80px; */
	padding-bottom: 0;
}

/* @media (max-width: 991px) {
	.lt-shop-archive__bar .container>div {
		padding-top: 64px;
	}
} */

.lt-shop-archive__bar h1 {
	font-family: var(--font-semi-ext, "PP Formula Semi Extended", sans-serif);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: -0.48px;
	color: var(--lt-ink-2);
}

.lt-shop-archive__bar .text-caption-sm {
	color: var(--lt-muted-2);
}

/* Quick-filter pills */
.lt-filter-pill {
	height: 32px;
	display: inline-flex;
	align-items: center;
	padding: 0 16px;
	border-radius: 999px;
	font-family: var(--font-base, "Manrope", sans-serif);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	border: 1px solid var(--lt-line);
	background: #fff;
	color: var(--lt-muted-2);
	transition: all .15s ease;
	cursor: pointer;
	white-space: nowrap;
}

.lt-filter-pill:hover {
	border-color: var(--lt-brand);
	color: var(--lt-brand);
}

.lt-filter-pill.is-active,
.lt-filter-pill[aria-current="true"] {
	background: var(--lt-brand);
	border-color: var(--lt-brand);
	color: #fff;
}

/* Sort select */
.lt-shop-sort__select {
	height: 36px;
	border: 1px solid var(--lt-line);
	border-radius: 6px;
	font-family: var(--font-base, "Manrope", sans-serif);
	font-weight: 600;
	font-size: 13px;
	color: var(--lt-ink-2);
	padding: 0 34px 0 14px;
}

/* ---- Sidebar as a white card (desktop) — matches Figma aside ---- */
@media (min-width: 992px) {
	.lt-shop-filters {
		width: 240px;
		background: #fff;
		border: 1px solid var(--lt-line);
		border-radius: 14px;
		/* Figma: 240px card with 190px inner content = 25px padding. */
		padding: 22px 26px 20px 23px;
		/* position: sticky;
		top: 24px; */
		align-self: flex-start;
	}

	.lt-shop-filters>form>div {
		padding: 0 !important;
	}
}

@media (max-width: 375px) {
	.lt-shop-sort__select {
		padding-right: 23px;
	}
}

/* Sidebar headings + facet titles → PP Formula Semi Extended */
.lt-shop-filters .lt-filter-group__toggle span:first-child,
.lt-shop-filters p {
	font-family: var(--font-semi-ext, "PP Formula Semi Extended", sans-serif);
}

.lt-shop-filters .lt-filter-group__toggle span:first-child {
	font-size: 13px;
	color: var(--lt-ink-2);
	letter-spacing: 0;
}

.lt-shop-filters .h-px {
	background: var(--lt-line) !important;
}

/* Facet checkbox — checked = brand fill */
.lt-filter-checkbox__ui {
	border-radius: 3px;
	border-color: #767676;
}

.lt-filter-checkbox:checked+.lt-filter-checkbox__ui,
.peer:checked~.lt-filter-checkbox__ui {
	background: var(--lt-brand);
	border-color: var(--lt-brand);
}

/* Facet counts — Figma: 11px, muted. */
.lt-shop-filters .text-caption-xs {
	font-size: 11px;
	color: var(--lt-muted-2);
}

/* Count chips on colour/thickness (subtle pill) */
.lt-shop-filters [data-filter-group="colour"] .text-caption-xs,
.lt-shop-filters [data-filter-group="thickness"] .text-caption-xs {
	background: #f7f7f4;
	border-radius: 999px;
	padding: 2px 8px;
	color: var(--lt-muted-2);
}

/* Price inputs */
.lt-shop-filters input[type="number"] {
	border-color: var(--lt-line);
	border-radius: 6px;
	height: 34px;
}

/* Clear all filters — accent orange */
.lt-shop-filters .text-lt-accent {
	color: var(--lt-accent) !important;
	font-family: var(--font-semi-ext, "PP Formula Semi Extended", sans-serif);
	font-size: 12.5px;
}


/* ---- Load More ---- */
.lt-shop-loadmore-wrap {
	text-align: center;
	margin-top: 44px;
}

.lt-shop-loadmore-wrap.is-hidden {
	display: none;
}

.lt-load-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 200px;
	justify-content: center;
	/* Figma: 201x45.5 white pill, 14px Manrope Regular. */
	height: 46px;
	padding: 0 28px;
	border-radius: 999px;
	border: 1px solid var(--lt-line);
	background: #fff;
	font-family: var(--font-base, "Manrope", sans-serif);
	font-weight: 400;
	font-size: 14px;
	color: #1e2939;
	cursor: pointer;
	transition: all .18s ease;
}

.lt-load-more:hover {
	border-color: var(--lt-brand);
	color: var(--lt-brand);
}

.lt-load-more[disabled] {
	opacity: .6;
	cursor: default;
}

/* AJAX filtering overlay — soft veil + spinner over the product grid while a
   filter/sort/pill/load-more request is in flight. Pseudo-elements survive the
   grid's innerHTML swap since only its <li> children are replaced. */
.lt-products-grid {
	position: relative;
	min-height: 120px;
}

.lt-products-grid::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: rgba(248, 248, 247, .7);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, visibility .2s ease;
}

.lt-products-grid::before {
	content: "";
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 3px solid rgba(10, 101, 252, .25);
	border-top-color: var(--lt-brand);
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}

.lt-products-grid.is-loading::after,
.lt-products-grid.is-loading::before {
	opacity: 1;
	visibility: visible;
}

.lt-products-grid.is-loading::after {
	pointer-events: auto;
}

.lt-products-grid.is-loading::before {
	animation: lt-spin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.lt-products-grid.is-loading::before {
		animation: none;
	}
}

.lt-load-more__spinner {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(10, 101, 252, .25);
	border-top-color: var(--lt-brand);
	animation: lt-spin .7s linear infinite;
	display: none;
}

.lt-load-more.is-loading .lt-load-more__spinner {
	display: inline-block;
}

@keyframes lt-spin {
	to {
		transform: rotate(360deg);
	}
}

/* =====================================================================
 *  HERO SEARCH — node 29:20240
 * ================================================================== */

.hero-search {
	width: 100%;
	max-width: 912px;
	margin-left: auto;
	margin-right: auto;
}

.hero-search__bar {
	background: var(--lt-surface);
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	padding: 6px 6px 6px 8px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .14);
	min-height: 74px;
}

.hero-search__field {
	display: flex;
	align-items: center;
	padding: 0 22px;
	min-width: 0;
}

.hero-search__select {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	width: 100%;
	font-family: var(--font-base, "Manrope", sans-serif);
	font-weight: 400;
	font-size: 18px;
	color: var(--lt-text-secondary, #2e2e2e);
	cursor: pointer;
	outline: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%232e2e2e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 26px;
}

.hero-search__divider {
	width: 1px;
	align-self: stretch;
	margin: 14px 0;
	background: #e0e0e0;
}

.hero-search__btn {
	border-radius: 999px !important;
	min-width: 200px;
	height: auto;
	align-self: stretch;
	font-family: var(--font-base, "Manrope", sans-serif);
	font-weight: 600 !important;
	font-size: 20px !important;
	padding: 20px 40px !important;
}

@media (max-width: 767px) {
	.hero-search__bar {
		border-radius: 20px;
		padding: 8px;
		min-height: 0;
	}

	.hero-search__field {
		padding: 12px 16px;
	}

	.hero-search__divider {
		width: auto;
		height: 1px;
		margin: 0 16px;
	}

	.hero-search__btn {
		width: 100%;
		font-size: 17px !important;
		padding: 14px !important;
	}
}

/* Hero CTA pills */
.hero-ctas .btn {
	border-radius: 999px;
	padding: 16px 40px;
	font-size: 16px;
	min-width: 240px;
	justify-content: center;
}

.hero-ctas .btn--white {
	border-width: 1.5px !important;
	border-color: #e5e7eb !important;
}

@media (max-width: 767px) {
	.hero-ctas {
		width: 100%;
	}

	.hero-ctas .btn {
		flex: 1;
		min-width: 0;
		padding: 14px 20px;
	}
}

/* =====================================================================
 *  SINGLE PRODUCT — node 29:4524
 * ================================================================== */

/* Title */
.lt-product-summary__title {
	font-family: var(--font-semi-ext, "PP Formula Semi Extended", sans-serif);
	font-weight: 700;
	line-height: 1.22;
	color: var(--lt-ink);
}

/* Tag pills */
.lt-product-summary__tags a {
	border-color: var(--lt-line);
	color: var(--lt-brand);
	background: rgba(10, 101, 252, .06);
	border-radius: 999px;
	font-weight: 600;
}

/* Pricing */
.lt-product-summary__pricing .text-h4 {
	color: var(--lt-ink);
	font-weight: 700;
}

.lt-product-summary__pricing .line-through {
	color: var(--lt-muted);
}

/* Box price pill — accent highlight (Figma 29:4618: bg rgba(246,146,34,.08), text #f69222).
   Scoped to the snow-drift variant only so the accent pill keeps its own colours. */
.lt-product-summary__pricing .bg-lt-snow-drift {
	background: var(--lt-surface);
	border-color: var(--lt-line);
}

/* Calculator card wrapper — Figma 29:4633: bg #f0ede8, border #e2ddd7, r10, pad 21 */
.lt-calculator {
	background: #f0ede8;
	border: 1px solid #e2ddd7;
	border-radius: 10px;
	padding: 21px;
	margin-top: 4px;
}




/* Stepper — Figma 29:4637: 132x40.5 white, 1px #e2ddd7, r6; buttons 37px; the
   input keeps left/right divider rules and sits flush (no padding/gap on the shell). */
.lt-stepper {
	background: #fff;
	border: 1px solid #e2ddd7;
	border-radius: 6px;
	padding: 0;
	gap: 0;
	overflow: hidden;
}

.lt-stepper__btn {
	width: 37px;
	background: transparent;
	border-radius: 0;
	font-size: 16px;
	color: var(--lt-muted-2);
}

.lt-stepper__btn:hover {
	background: var(--lt-surface);
}

.lt-stepper__input {
	font-family: var(--font-base, "Manrope", sans-serif);
	font-weight: 500;
	font-size: 14px;
	border-left: 1px solid #e2ddd7;
	border-right: 1px solid #e2ddd7;
	color: var(--lt-ink);
}

/* Result cards — Figma 29:4675: three WHITE boxes, 1px #e2ddd7, r6.
   The total's emphasis is its brand-coloured VALUE, not a filled blue card.
   (The old `:nth-child(3) { background: brand }` rule forced a blue fill and
   is deliberately gone — it fought the markup and hid the brand-coloured value.) */
.lt-calc-result {
	background: #fff;
	border: 1px solid #e2ddd7;
	border-radius: 6px;
}

/* Installation quote opt-in — one bordered card, so the row stays square-cornered
   and relies on the card's own divider (no pill radius / 1.5px ring). Replaces
   the former .lt-choose-option__row rule from the Purchase Only / Purchase &
   Install table. */
.lt-install-quote__row {
	border-radius: 0;
	border-width: 0;
}

/* Area calculator */
.lt-area-calc {
	border-color: var(--lt-line);
	border-radius: 16px;
}

.lt-area-calc .bg-lt-snow-drift {
	background: var(--lt-surface);
}

/* Details / spec table generic polish */
.lt-product-details table,
.lt-spec-table {
	border-color: var(--lt-line);
}

/* Focus ring consistency */
.lt-shop-filters :focus-visible,
.lt-calculator :focus-visible,
.hero-search :focus-visible {
	outline: 2px solid var(--lt-brand);
	outline-offset: 2px;
}


/* .lt-shop-archive__layout {
	gap: 45px;
}

@media (max-width: 991px) {
	.lt-shop-archive__layout {
		gap: 28px;
	}
} */
/* ── Filter option: unavailable under the current selection ──────────────────
   lt_shop_facet_counts() reports 0 products down this path, so the option is
   dimmed and taken out of reach. The input also carries the real `disabled`
   attribute, so this is a visual echo of a state the keyboard already respects —
   never the only thing stopping a click. The option the user has already picked
   is never given this class, so a filter can always be undone. */
.lt-shop-filters [data-lt-filter-option].is-disabled {
	pointer-events: none;
	opacity: 0.4;
	cursor: default;
}

/* ── Category sub-category branches ──────────────────────────────────────────
   Collapsible children under each parent category. max-height animates the
   slide; visibility is switched only once the slide has finished closing, which
   both keeps the transition visible and takes the collapsed links out of the
   tab order and the accessibility tree. */
.lt-cat-children {
	overflow: hidden;
	max-height: 0;
	visibility: hidden;
	transition: max-height 0.25s ease, visibility 0s linear 0.25s;
}

.lt-cat-children[data-open="true"] {
	max-height: 40rem;
	visibility: visible;
	transition: max-height 0.25s ease, visibility 0s;
}

/* Arrow points down when closed, flips up once the branch is open. */
.lt-cat-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {

	.lt-cat-children,
	.lt-cat-toggle svg {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Product card — add-to-cart feedback

   Exactly one control is ever visible in a card.

   In the default view_cart mode the swap is done here rather than in JS:
   WooCommerce adds .added to the button it just used, so hiding that and
   styling its injected .added_to_cart link as the button is entirely
   declarative, and cannot be broken by the order jQuery happens to run its
   added_to_cart handlers in. In revert mode the body class is absent, the
   button stays visible, and JS shows a brief .is-added confirmation instead.
   -------------------------------------------------------------------------- */

/*
 * Secondary button. The compiled Tailwind bundle ships btn--brand / --accent /
 * --white but no outline variant, so it is defined here in plain CSS rather
 * than requiring a rebuild of the theme bundle.
 */
.btn.btn--outline {
	background-color: transparent;
	color: var(--lt-brand);
	border: 1px solid var(--lt-brand);
}

.btn.btn--outline:hover {
	background-color: var(--lt-brand);
	color: #fff;
}

/*
 * Transient confirmation. Kept to a background/colour swap only — no change to
 * padding, border-width or font-size — so the button cannot change size and
 * nudge the grid while the state is showing.
 */
.lt-product-card .btn.is-added,
.lt-product-card .btn.is-added:hover {
	background-color: #047857;
	border-color: #047857;
	color: #fff;
	cursor: default;
}


/*
 * WooCommerce's injected link, restyled to be the card's button. Geometry is
 * copied from the .btn utility exactly — same padding, radius, weight and
 * full width — so swapping one control for the other cannot change the card's
 * height or reflow the grid row.
 */
.lt-product-card .added_to_cart {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 7px;
	padding: 18px 40px 20px;
	border: 1px solid var(--lt-brand);
	border-radius: 40px;
	background-color: transparent;
	color: var(--lt-brand);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: color .36s, background-color .36s;
}

.lt-product-card .added_to_cart:hover {
	background-color: var(--lt-brand);
	color: #fff;
}

/*
 * Hide the button that was just used. .added is set by WooCommerce itself, so
 * this needs no JavaScript and holds however the handlers are ordered.
 */
.lt-cards-view-cart .lt-product-card .btn.added {
	display: none;
}

@media (prefers-reduced-motion: reduce) {

	.lt-product-card .btn,
	.lt-product-card .added_to_cart {
		transition: none;
	}
}