/**
 * Love Pharm · Listing pages — layout + look.
 *
 * One stylesheet for every listing kind (category, collection, brand, tag, search, shop).
 * Tokens at the top read the card system (--plp-*) and the site tokens, so a change there
 * is a change here. The filters sidebar / toolbar / sheet / chips are the filters module's
 * (inc/filters/filters.css); the cards are assets/css/plp.css; the FAQ is inc/product-faq/.
 * Direction: luxury retail — quiet type, hairlines, 0 radius, no boxes, air between blocks.
 */

:root {
	--lp-listing-ink: var(--plp-ink, #1A1A1A);
	--lp-listing-muted: var(--plp-muted, #6B6560);
	--lp-listing-tile: var(--plp-tile, #F4F1EC);
	--lp-listing-line: var(--border, #E2E2E2);
	--lp-listing-link: var(--plp-ink, #1A1A1A);         /* links are ink, underlined (owner, 2026-10-10: no pink links) */
	--lp-listing-focus: var(--brand, #C4878A);
	--lp-listing-side-w: 280px;                           /* the filters column (= the old template's) */
	--lp-listing-col-gap: var(--lp-filters-col-gap, 40px); /* sidebar ↔ grid */
	--lp-listing-sticky-gap: var(--lp-filters-sticky-gap, 24px);
	--lp-listing-block-gap: 40px;                         /* between the page's blocks (desktop) */
	--lp-listing-title-size: 30px;
	--lp-listing-title-weight: 400;
	--lp-listing-count-size: 14px;
	--lp-listing-intro-size: 15px;
	--lp-listing-intro-lines: 3;                          /* the clamp (JS shows "עוד" only when it bites) */
	--lp-listing-measure: 760px;                          /* intro + long text line length (≈ 95 Hebrew characters) */
	--lp-listing-bg: var(--lp-filters-bg, #fff);          /* the pinned tile row's plate (phone) */
	--lp-listing-subnav-gap: 20px;                        /* the title block ↔ the tile row */
	--lp-listing-subnav-pad: 0px;                         /* the tile row's air above / below its chips: pinned on the phone */
	--lp-listing-subnav-pad-end: 0px;
	--lp-listing-subnav-z: 9;                             /* the phone's pinned row over its pinned filter bar (8) */
	--lp-listing-chip-h: 30px;                            /* a sub-category chip: hairline, 0 radius, compact (the owner, 2026-10-12) */
	--lp-listing-chip-pad: 11px;
	--lp-listing-chip-gap: 6px;                           /* a term photo ↔ name */
	--lp-listing-tile-gap: 6px;                           /* chip ↔ chip */
	--lp-listing-tile-label: 13px;
	--lp-listing-tile-thumb: 22px;                        /* a term photo inside the chip, on the bone tile */
	--lp-listing-content-h2: 20px;
	--lp-listing-content-size: 15px;
	--lp-listing-related-size: 14px;
	--lp-listing-fade: 48px;                              /* the white fade at the tile row's edges (phone) */
	--lp-listing-motion: 220ms;
	/* the phone's pinned tile row's height: its filter bar pins under it. One line of chips; listing.js sets the
	   measured height on .lp-listing__browse */
	--lp-listing-subnav-h: calc(var(--lp-listing-chip-h) + var(--lp-listing-subnav-pad) + var(--lp-listing-subnav-pad-end));
}
@media (max-width: 992px) {
	:root {
		--lp-listing-block-gap: 28px;
		--lp-listing-title-size: 24px;
		--lp-listing-count-size: 13px;
		--lp-listing-intro-size: 14px;
		--lp-listing-intro-lines: 2;
		--lp-listing-chip-h: 28px;
		--lp-listing-chip-pad: 8px;                       /* the six vibrator types fit a 375px screen in one line */
		--lp-listing-subnav-pad: 8px;                     /* under the masthead */
		--lp-listing-subnav-pad-end: 8px;                 /* above the filter bar: the row is 44px, a chip's tap area */
		--lp-listing-tile-label: 12px;
		--lp-listing-tile-thumb: 20px;
		--lp-listing-content-h2: 18px;
		--lp-listing-content-size: 14px;
	}
}

/* ---------- the page */
/* the theme sizes #primary for its own sidebar layouts; our page is the full content width */
.lp-listing-page #primary.content-area,
.lp-listing-page #primary.content-area #main.site-main {
	width: 100%;
	max-width: none;
	float: none;
	margin-inline: 0;
	padding-inline: 0;
}
.lp-listing-page #secondary,
.lp-listing-page .secondary-wrapper {
	display: none;
}
.lp-listing {
	box-sizing: border-box;
	max-width: var(--lp-content-width, 1200px); /* the site's content width (inc/content-width/) */
	margin-inline: auto;
	color: var(--lp-listing-ink);
	padding-bottom: var(--lp-listing-block-gap);
}
.lp-listing-page .shoptimizer-archive .archive-header .col-full {
	padding-bottom: 0; /* the breadcrumb sits right above our title */
}
.lp-listing > * + * {
	margin-top: var(--lp-listing-block-gap);
}

/* ---------- title block */
.lp-listing__head {
	margin-top: 8px;
}
.lp-listing__title-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 14px;
}
.lp-listing .lp-listing__title { /* two classes: the theme's `.site h1` sets its own size ≤768px */
	margin: 0;
	font-size: var(--lp-listing-title-size);
	font-weight: var(--lp-listing-title-weight);
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--lp-listing-ink);
}
.lp-listing__count {
	font-size: var(--lp-listing-count-size);
	color: var(--lp-listing-muted);
	font-variant-numeric: tabular-nums;
}
.lp-listing__intro {
	margin-top: 12px;
	max-width: var(--lp-listing-measure);
}
.lp-listing__intro-text {
	font-size: var(--lp-listing-intro-size);
	line-height: 1.6;
	color: var(--lp-listing-ink);
}
.lp-listing__intro-text p {
	margin: 0 0 0.6em;
}
.lp-listing__intro-text p:last-child {
	margin-bottom: 0;
}
.lp-listing__intro.is-clamped .lp-listing__intro-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--lp-listing-intro-lines);
	line-clamp: var(--lp-listing-intro-lines);
	overflow: hidden;
}
.lp-listing__intro-more {
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--lp-listing-intro-size);
	color: var(--lp-listing-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	cursor: pointer;
}
.lp-listing__intro-more[hidden] {
	display: none;
}
.lp-listing__intro-more:focus-visible {
	outline: 2px solid var(--lp-listing-focus);
	outline-offset: 2px;
}

/* while a selected tile's page text is on its way (filters.js swaps the head, the long text, the related row) */
.lp-listing__head,
.lp-listing__content,
.lp-listing__related {
	transition: opacity 150ms ease-out;
}
.lp-listing.is-swapping .lp-listing__head,
.lp-listing.is-swapping .lp-listing__content,
.lp-listing.is-swapping .lp-listing__related {
	opacity: 0.5;
}

/* ---------- sub-navigation: the category filter as a row of hairline chips (a tap toggles; selected = the ink border)
   Luxury listing pages navigate sub-categories typographically (Net-a-Porter, Mytheresa, Nordstrom's quick links,
   SSENSE): a quiet row of names, nothing boxed and big — text only, no emoji (the owner, 2026-10-12). */
.lp-listing__subnav {
	margin-top: var(--lp-listing-subnav-gap);
}
/* the tiles and the products share one box (woocommerce/archive-product.php): the row's own margin is the gap above
   it (it collapses through the box), the products keep the block gap under the row */
.lp-listing > .lp-listing__browse {
	margin-top: 0;
}
.lp-listing__browse > * + * {
	margin-top: var(--lp-listing-block-gap);
}
.lp-listing__tiles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lp-listing-tile-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.lp-listing__tile {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.lp-listing__tile-link {
	display: inline-flex;
	align-items: center;
	gap: var(--lp-listing-chip-gap);
	height: var(--lp-listing-chip-h);
	padding: 0 var(--lp-listing-chip-pad);
	border: 1px solid var(--lp-listing-line);
	border-radius: 0;
	background: transparent;
	color: var(--lp-listing-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--lp-listing-motion) ease-out, background-color var(--lp-listing-motion) ease-out, color var(--lp-listing-motion) ease-out;
}
.lp-listing__tile-media {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.lp-listing__tile-media--photo {
	width: var(--lp-listing-tile-thumb);
	height: var(--lp-listing-tile-thumb);
	background: var(--lp-listing-tile);
	overflow: hidden;
}
.lp-listing__tile-media--photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.lp-listing__tile-label {
	font-size: var(--lp-listing-tile-label);
	font-weight: 500;
	line-height: 1;
}
/* hover = the system's cue, a thin underline under the name — never the ink border: that is the selected mark, and a
   border that lit up on hover stayed lit after a deselecting click (the pointer still over it; on touch the hover
   sticks until the next tap), reading as "still selected" (the owner, 2026-10-10). Only on devices that hover. */
@media (hover: hover) {
	.lp-listing__tile-link:hover .lp-listing__tile-label {
		text-decoration: underline;
		text-underline-offset: 3px;
		text-decoration-thickness: 1px;
	}
}
/* selected: the hairline turns ink, nothing else (an ink fill and a bone fill were both rejected — the owner's
   verdicts, 2026-10-10) */
.lp-listing__tile.is-current .lp-listing__tile-link {
	border-color: var(--lp-listing-ink);
}
.lp-listing__tile-link:focus-visible {
	outline: 2px solid var(--lp-listing-focus);
	outline-offset: 2px;
}
/* the row's edges (phone): a white fade where the row continues — the cut-off chip beneath it
   is the cue, the fade only softens the edge; no fade once the row is at its end */
.lp-listing__tiles-wrap {
	position: relative;
}
.lp-listing__tiles-wrap::before,
.lp-listing__tiles-wrap::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--lp-listing-fade);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--lp-listing-motion) ease-out;
	z-index: 1;
}
/* RTL: the row continues to the LEFT, so the end fade is white at the left screen edge */
.lp-listing__tiles-wrap::after {
	inset-inline-end: 0;
	background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.lp-listing__tiles-wrap::before {
	inset-inline-start: 0;
	background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
}
[dir="ltr"] .lp-listing__tiles-wrap::after {
	background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
}
[dir="ltr"] .lp-listing__tiles-wrap::before {
	background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

/* ---------- the toolbar: the count is ours ("27 מוצרים"), always visible */
.lp-listing__toolbar .woocommerce-result-count {
	visibility: visible;
}

/* ---------- sidebar + main */
.lp-listing__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}
.lp-listing__main {
	min-width: 0;
}
.lp-listing__empty {
	margin: 0;
	padding: 32px 0;
	border-top: 1px solid var(--lp-listing-line);
	border-bottom: 1px solid var(--lp-listing-line);
	color: var(--lp-listing-muted);
	font-size: var(--lp-listing-intro-size);
}

/* ---------- the long text */
.lp-listing__content {
	max-width: var(--lp-listing-measure);
	font-size: var(--lp-listing-content-size);
	line-height: 1.7;
	border-top: 1px solid var(--lp-listing-line);
	padding-top: var(--lp-listing-block-gap);
}
.lp-listing__content h2 {
	font-size: var(--lp-listing-content-h2);
	font-weight: 600;
	line-height: 1.3;
	margin: 1.6em 0 0.6em;
}
.lp-listing__content > h2:first-child {
	margin-top: 0;
}
.lp-listing__content h3 {
	font-size: calc(var(--lp-listing-content-h2) - 3px);
	font-weight: 600;
	margin: 1.4em 0 0.5em;
}
.lp-listing__content p,
.lp-listing__content ul,
.lp-listing__content ol {
	margin: 0 0 1em;
}
.lp-listing__content ul,
.lp-listing__content ol {
	padding-inline-start: 1.2em;
}
.lp-listing__content li {
	margin-bottom: 0.4em;
}
.lp-listing__content a,
.lp-listing__intro-text a {
	color: var(--lp-listing-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.lp-listing__content a:hover,
.lp-listing__intro-text a:hover {
	text-decoration-thickness: 2px;
}
.lp-listing__content .sk-pdp-block--faq {
	margin-top: var(--lp-listing-block-gap);
	/* The FAQ is the shop-kit block with the product page's look (the signed demo's; tokens in assets/css/pdp.css) —
	   one design language on every page (owner, 2026-10-13); its heading keeps this text's own h2 register. */
}

/* ---------- "המשיכו לגלות" */
.lp-listing__related-title {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--lp-listing-muted);
}
.lp-listing__related-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lp-listing__related-list li {
	margin: 0;
}
.lp-listing__related-link {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--lp-listing-line);
	color: var(--lp-listing-ink);
	font-size: var(--lp-listing-related-size);
	text-decoration: none;
	transition: border-color var(--lp-listing-motion) ease-out;
}
.lp-listing__related-link:hover {
	border-color: var(--lp-listing-ink);
}

/* ====================================================================== desktop */
@media (min-width: 993px) {
	.lp-listing__body {
		grid-template-columns: var(--lp-listing-side-w) minmax(0, 1fr);
		column-gap: var(--lp-listing-col-gap);
	}
	.lp-listing--no-side .lp-listing__body {
		grid-template-columns: minmax(0, 1fr);
	}
	/* the filters column: pinned below the sticky header stack, its own scrolling, no scrollbar */
	.lp-listing__side {
		position: sticky;
		top: calc(var(--lp-sticky-header-h, 0px) + var(--lp-sticky-menu-h, 0px) + var(--lp-listing-sticky-gap));
		align-self: start;
		max-height: calc(100vh - var(--lp-sticky-header-h, 0px) - var(--lp-sticky-menu-h, 0px) - var(--lp-listing-sticky-gap));
		overflow-y: auto;
		scrollbar-width: none;
	}
	.lp-listing__side::-webkit-scrollbar {
		display: none;
	}
	.admin-bar .lp-listing__side {
		top: calc(var(--lp-sticky-header-h, 0px) + var(--lp-sticky-menu-h, 0px) + var(--lp-listing-sticky-gap) + 32px);
	}
	/* Desktop: the category chips live in the filters column, always — its first section, under the panel's head
	 * ("לפי סוג", whole names; the owner, 2026-10-12: "שזה תמיד יהיה בסינון"), printed into the panel by the filters
	 * module's lp_filters_panel_lead (listing.php). The row above the grid is then the phone's; it stays on desktop
	 * only where the page has no filters column. Nothing pins under the menu (the owner's verdict, 2026-10-11).
	 * Pinned by tests/suites/filters_sticky_live.py and tests/styles/listing.json. */
	.lp-listing--side-tiles .lp-listing__subnav {
		display: none;
	}
	.lp-listing__side-tiles-title {
		display: flex;
		align-items: center;
		min-height: 48px;
		font-size: var(--lp-filters-title-size, 14px);
		font-weight: 600;
		color: var(--lp-listing-ink);
	}
	.lp-listing__side-tiles .lp-listing__tiles {
		padding-bottom: 16px;
	}
	.lp-listing__side .lp-filters {
		padding-inline-end: 0; /* the grid gap is the column gap */
	}
	.lp-listing__intro-text {
		max-width: var(--lp-listing-measure);
	}
}

/* ====================================================================== mobile */
@media (max-width: 992px) {
	/* the chips: one row, scrolls sideways, bleeds to the screen edges; the fades ride on the wrapper */
	.lp-listing__subnav {
		margin-inline: calc(-1 * var(--lp-gutter-narrow, 15px));
	}
	/* The tile row pins under the masthead while the products scroll, the filter bar pinned right under it (the owner,
	 * 2026-10-11: "sticky מעל המיון/פילטור"). It pins inside the tiles + products box, so it lets go where the products
	 * end and never rides over the long text; flush under the masthead (the viewport's top when the theme's sticky
	 * mobile header is off; no admin-bar offset — the masthead pins at 0 logged in too). The row bleeds, so its white
	 * plate runs edge to edge and nothing from the grid shows beside it; no line under it (the toolbar's verdict). Its
	 * air is padding taken out of the margins around it, so the page at rest is unchanged. Pinned by
	 * tests/suites/filters_sticky_live.py (hit-tests both rows while scrolling, logged in, without the theme's sticky
	 * header) and tests/styles/listing.json. */
	.lp-listing__browse > .lp-listing__subnav {
		position: sticky;
		top: 0;
		z-index: var(--lp-listing-subnav-z);
		margin-top: calc(var(--lp-listing-subnav-gap) - var(--lp-listing-subnav-pad));
		background: var(--lp-listing-bg);
	}
	/* the row's air is the scroller's own padding, so a chip's tap area can fill it: the chip is drawn 28px, the
	   finger needs 44 (Apple 44pt, Google 48dp) — the row's full height under each chip, half the gap to each side
	   (the owner, 2026-10-12: the compact chip). The focus ring fits inside the air too. */
	.lp-listing__browse > .lp-listing__subnav .lp-listing__tiles {
		padding-block: var(--lp-listing-subnav-pad) var(--lp-listing-subnav-pad-end);
	}
	.lp-listing__browse > .lp-listing__subnav .lp-listing__tile-link {
		position: relative;
	}
	.lp-listing__browse > .lp-listing__subnav .lp-listing__tile-link::before {
		content: "";
		position: absolute;
		inset-inline: calc(-1px - var(--lp-listing-tile-gap) / 2);
		top: calc(-1px - var(--lp-listing-subnav-pad));
		bottom: calc(-1px - var(--lp-listing-subnav-pad-end));
	}
	.lp-listing__browse > .lp-listing__subnav + * {
		margin-top: calc(var(--lp-listing-block-gap) - var(--lp-listing-subnav-pad-end));
	}
	/* the phone's panel is the sheet: the row is pinned, the column's chips are desktop's */
	.lp-listing__side-tiles {
		display: none;
	}
	/* the phone's names: the family's word goes, the H1 already says it ("ויברטור ארנב" → "ארנב" under "ויברטורים";
	   the owner, 2026-10-12) — one text, the same link, laid out for the width (lp_listing_label_split) */
	.lp-listing__tile-family {
		display: none;
	}
	.sticky-m .lp-listing__browse > .lp-listing__subnav {
		top: var(--lp-header-h, 0px);
	}
	.lp-filters-page .lp-listing__browse .shoptimizer-sorting {
		top: var(--lp-listing-subnav-h);
	}
	.sticky-m.lp-filters-page .lp-listing__browse .shoptimizer-sorting {
		top: calc(var(--lp-header-h, 0px) + var(--lp-listing-subnav-h));
	}
	.lp-listing__tiles {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-inline: var(--lp-gutter-narrow, 15px);
	}
	.lp-listing__tiles-wrap::after {
		opacity: 1;
	}
	.lp-listing__tiles-wrap.is-end::after {
		opacity: 0;
	}
	.lp-listing__tiles-wrap.is-before::before {
		opacity: 1;
	}
	.lp-listing__tiles::-webkit-scrollbar {
		display: none;
	}
	/* the snap port must keep the gutter, or the first chip snaps flush to the screen edge */
	.lp-listing__tiles {
		scroll-padding-inline: var(--lp-gutter-narrow, 15px);
	}
	/* the page gutter is the grid's gutter: no second inset inside it (plp.css adds 12px for the Elementor column) */
	.lp-listing-page .lp-listing ul.products {
		padding-inline: 0 !important;
	}
	.lp-listing__tile {
		scroll-snap-align: start;
	}
	/* the filters column is a sheet now (the module moves the panel to <body>); without JS it stays in flow */
	html.lp-filters-js .lp-listing__side {
		display: none;
	}
	.lp-listing__related-link {
		height: 34px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-listing__tile-link,
	.lp-listing__tiles-wrap::before,
	.lp-listing__tiles-wrap::after,
	.lp-listing__related-link,
	.lp-listing__head,
	.lp-listing__content,
	.lp-listing__related {
		transition: none;
	}
}