/* ================================================
   RED POINT — PRODUCT BROWSER  (Figma 109:843)
   ================================================
   toolbar  full-width row (109:844)
   split    filter rail 280 (RIGHT) + grid 1024 (LEFT), 16px gap
   filter   #252525 · padding 24/16 · "סינון" + red rule · groups 16 apart
   grid     compact cards 244x438, 4 across, 16px gap
   ================================================ */

.rp-browser {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 50px 60px;
	box-sizing: border-box;
}

/* Button reset. Hello Elementor's `.elementor button` (0,1,1) gives every <button> a
   border, padding and background — which turned the collapsed filter groups, the sort
   button and the clear link into boxed rectangles. Scoped under .rp-browser (0,2,0) so it
   wins; the specific buttons (load-more, sort) re-apply their own look at equal-or-higher
   specificity below. The load-more keeps its pill because .rp-browser__more is restated at
   (0,2,0) too. Same theme-reset trap as the carousel dots and the newsletter field. */
.rp-browser button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	color: inherit;
	line-height: normal;
	cursor: pointer;
}

/* ------------------------------------------------
   TOOLBAR  (109:844)
   ------------------------------------------------
   count/clear on the right (first DOM child under RTL), sort on the left. The design leaves
   the right of this row empty; the count + clear are a working-filter affordance, off the
   Figma but useful. */
.rp-browser__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 24px;
}

.rp-browser__meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rp-browser__count {
	font-family: 'Google Sans', sans-serif;
	font-size: 12px;
	color: #818181;
}

.rp-browser .rp-browser__clear {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	font-family: 'Google Sans', sans-serif;
	font-size: 12px;
	color: #FF3B3B;
	cursor: pointer;
}

.rp-browser .rp-browser__clear:hover {
	text-decoration: underline;
}

/* Sort dropdown. */
.rp-browser__sort {
	position: relative;
}

.rp-browser .rp-browser__sort-btn {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 0;
	background: none;
	font-family: 'Google Sans', sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	cursor: pointer;
}

.rp-browser__sort-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 20;
	min-width: 200px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background-color: #252525;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.rp-browser .rp-browser__sort-opt {
	appearance: none;
	display: block;
	width: 100%;
	padding: 8px 16px;
	border: 0;
	background: none;
	font-family: 'Google Sans', sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	text-align: right;
	cursor: pointer;
}

.rp-browser .rp-browser__sort-opt:hover,
.rp-browser .rp-browser__sort-opt.is-active {
	background-color: rgba(255, 255, 255, 0.08);
	color: #FF3B3B;
}

/* ------------------------------------------------
   SPLIT
   ------------------------------------------------
   Filter rail first (right under RTL), grid main second (left). align-items:flex-start so
   both columns start level at the top. */
.rp-browser__split {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.rp-browser__main {
	flex: 1;
	min-width: 0; /* a flex child defaults to min-width:auto and will not shrink */
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.rp-browser__grid {
	display: grid;
	grid-template-columns: repeat(var(--rp-cols, 4), 1fr);
	gap: 16px;
}

.rp-browser__item[hidden] {
	display: none;
}

/* ------------------------------------------------
   FILTER RAIL  (109:1165) — 280, #252525
   ------------------------------------------------ */
.rp-filter {
	flex-shrink: 0;
	width: 280px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 16px;
	background-color: #252525;
	border-radius: 4px;
	box-sizing: border-box;
}

.rp-filter__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* The "סינון" row. A button at every width (see render_filters()), but only a CONTROL on a
   phone — here it is stripped back to plain text so the desktop rail is unchanged.

   `.rp-filter` in the selector takes this to (0,2,0), over Hello Elementor's `.elementor button`
   (0,1,1), which otherwise puts a border, a fill and a padding box around it. Same trap the
   category menu's button hit. */
.rp-filter .rp-filter__toggle {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-align: right;

	/* Desktop: not a control. The rail is always open, so the caret is hidden and clicks pass
	   straight through — no cursor change, nothing to press by accident. */
	cursor: default;
	pointer-events: none;
}

.rp-filter .rp-filter__toggle > .rp-filter__caret {
	display: none;
}

.rp-filter__heading {
	font-family: 'Google Sans', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	color: #FFFFFF;
	text-align: right;
}

/* The red rule under "סינון" (Line 143). */
.rp-filter__rule {
	height: 1px;
	background-color: #FF3B3B;
}

.rp-filter__groups {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rp-filter__group {
	display: flex;
	flex-direction: column;
}

/* Header — label on the RIGHT, caret on the LEFT. justify-between splits them. */
.rp-filter .rp-filter__group-head {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.rp-filter__caret {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: #FFFFFF;
}

/* The design keeps the caret pointing up in every state (109:1202) — no rotation on open. */

.rp-filter__group-label {
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	color: #FFFFFF;
	text-align: right;
}

/* Options — right-aligned rows, hidden until the group opens. Each row is its natural
   width (the design's option frames vary 64–115px); auto width + nowrap labels keep them on
   one line instead of wrapping inside a fixed 115px box. */
.rp-filter__options {
	display: none;
	flex-direction: column;
	/* flex-START, not end: this is a column, so align-items is the horizontal cross axis, and
	   under the RTL rail flex-start resolves to the RIGHT — where the design hugs the option
	   rows (109:1174 sits at the right of the rail). flex-end pushed them to the left. */
	align-items: flex-start;
	gap: 12px;
	padding-top: 12px;
}

.rp-filter__option-label {
	white-space: nowrap;
}

.rp-filter__group.is-open > .rp-filter__options {
	display: flex;
}

.rp-filter__option {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.rp-filter__option-label {
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: #FFFFFF;
}

/* Checkbox — the native box is hidden and redrawn as a hairline square that fills the
   design's green (#82C47B) with a white tick. */
.rp-filter__box {
	position: relative;
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.rp-filter__box input {
	position: absolute;
	inset: 0;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rp-filter__box input:checked {
	border-color: #82C47B;
	background-color: #82C47B;
}

.rp-filter__box svg {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 10px;
	height: 10px;
	color: #FFFFFF;
	opacity: 0;
	pointer-events: none;
}

.rp-filter__box input:checked + svg {
	opacity: 1;
}

/* Hairline divider under each group (Line 145). */
.rp-filter__divider {
	height: 1px;
	margin-top: 16px;
	background-color: rgba(255, 255, 255, 0.1);
}

/* ------------------------------------------------
   LOAD MORE  (109:1163)
   ------------------------------------------------ */
.rp-browser__more-row {
	display: flex;
	justify-content: center;
}

/* HIDING IT HAS TO BE RESTATED TOO.
   The rule below sets `display: flex` at (0,2,0), which outranks the browser's built-in
   `[hidden] { display: none }` at (0,1,0) — so the script set `hidden`, the button stayed on
   screen, and pressing it did nothing because every product was already visible. That is the
   "it doesn't hide, it just stops working" the client reported. */
.rp-browser .rp-browser__more[hidden] {
	display: none;
}

/* Restated under .rp-browser (0,2,0) so it beats the button reset above. */
.rp-browser .rp-browser__more {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 217px;
	height: 40px;
	padding: 0 32px;
	border-radius: 100px;
	background-color: #FFFFFF;
	font-family: 'Google Sans', sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	color: #0C0C0C;
	transition: background-color 0.15s ease;
}

.rp-browser .rp-browser__more:hover {
	background-color: #E6E6E6;
}

/* HOLD THE PILL WHILE IT IS FOCUSED.
   Clicking leaves the button focused, and the theme's own `button:focus` / `:active` paint
   wins over the rule above — the white fill and dark label vanished and it read as bare text
   until the pointer moved back over it. Restated at (0,3,0), above the theme's rule.

   Placed BEFORE the disabled block on purpose: those match at the same specificity, so the
   later one has to be the disabled state or a spent button would light up when focused. */
.rp-browser .rp-browser__more:focus,
.rp-browser .rp-browser__more:focus-visible,
.rp-browser .rp-browser__more:active {
	background-color: #FFFFFF;
	color: #0C0C0C;
}

/* Keyboard focus still needs to be visible — the fill alone is the resting state. */
.rp-browser .rp-browser__more:focus-visible {
	outline: 2px solid #FF3B3B;
	outline-offset: 2px;
}

/* Spent (client adjustment #6): the click allowance is used up but there are still products
   beyond the last row. The button stays on the page and stops working, rather than vanishing —
   vanishing reads as "that was everything", which would be a lie. When everything IS shown the
   JS hides it instead.

   :hover is neutralised too; without that the white->grey still fires and it looks live. */
.rp-browser .rp-browser__more:disabled,
.rp-browser .rp-browser__more:disabled:hover {
	background-color: rgba(255, 255, 255, 0.25);
	color: rgba(12, 12, 12, 0.55);
	cursor: default;
}

.rp-browser__empty {
	padding: 64px 0;
	text-align: center;
	color: #FFFFFF;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 1024px) {
	.rp-browser {
		padding: 32px 24px;
	}
	.rp-browser__split {
		flex-direction: column;
	}
	.rp-filter {
		width: 100%;
	}
	.rp-browser__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.rp-browser__grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------
   PHONES — THE WHOLE FILTER RAIL IS ONE ACCORDION
   ------------------------------------------------
   Client: "On mobile please shrink this filter option to an accordion. Mobile only."

   Below 1024px the rail stops being a 280px column beside the grid and becomes a full-width
   band above it, so its ten group headers pushed the first product most of a screen down.
   Collapsed by default, the rail is a single "סינון" row and the products are the first thing
   on the page.

   Only the GROUPS collapse — the "סינון" heading and its red rule stay, or there would be
   nothing left to press.

   The groups keep their own independent open/closed state inside (.rp-filter__group.is-open),
   untouched: opening the rail shows them exactly as the customer last left them. */
@media (max-width: 767px) {

	.rp-filter .rp-filter__toggle {
		cursor: pointer;
		pointer-events: auto;
	}

	.rp-filter .rp-filter__toggle > .rp-filter__caret {
		display: block;
		transition: transform 0.2s ease;
		/* Closed points DOWN. The group carets deliberately never rotate (the design keeps them
		   up in every state) but this one is the rail's only open/closed cue, so it turns. */
		transform: rotate(180deg);
	}

	.rp-filter.is-open .rp-filter__toggle > .rp-filter__caret {
		transform: rotate(0deg);
	}

	/* `display: none` rather than a height transition: the panel's height depends on which
	   groups are open inside it, so there is no honest number to animate to. */
	.rp-filter .rp-filter__groups {
		display: none;
	}

	.rp-filter.is-open .rp-filter__groups {
		display: flex;
	}

	/* The rail's own 16px column gap is dead space under a collapsed header. */
	.rp-filter:not(.is-open) {
		gap: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rp-filter .rp-filter__toggle > .rp-filter__caret {
		transition: none;
	}
}