/* ================================================
   RED POINT — CATEGORY HERO  (Figma 109:797)
   ================================================
   section  1440x800 · the category's featured image, object-cover
   fade     109:798 · bottom 280px · transparent -> #0C0C0C · 3px backdrop blur
   copy     bottom-right · Futurism 100/80 name + italic 20 description (447px)
   chips    every category · inactive grey border / 60% white · active in its own colour
   ================================================ */

.rp-cathero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	min-height: 800px;
	width: 100%;
	overflow: hidden;
	background-color: #0C0C0C;
}

/* Ancestor in the selector (0,2,0) so it beats Elementor's `.elementor img{height:auto}`
   (0,1,1) — otherwise the fill collapses to its natural aspect. See redpoint.css. */
.rp-cathero .rp-cathero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* 109:798 — the hero fades into the page background over its last 280px, with a soft blur on
   what shows through, so the chip strip has something to sit against on a busy photo. */
.rp-cathero__fade {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 280px;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(180deg, rgba(12, 12, 12, 0) 5%, #0C0C0C 88%);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

/* NOT in the design — a deliberate addition. Category images vary; over a light one the
   header disappears. Invisible over a dark image, rescues a light one. Toggled in the widget. */
.rp-cathero__scrim-top {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 180px;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(180deg, rgba(12, 12, 12, 0.55) 0%, rgba(12, 12, 12, 0) 100%);
}

/* ------------------------------------------------
   CONTENT
   ------------------------------------------------
   100px of top padding is the header's height — the Header widget overlaps the top of the
   hero (via the template's negative margin), so the copy has to clear it. flex:1 + the copy
   block's own flex:1 centre the name vertically, exactly as the home hero does. */
.rp-cathero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 100px 60px 0;
	box-sizing: border-box;
}

/* ------------------------------------------------
   COPY  (109:821) — bottom-right
   ------------------------------------------------ */
.rp-cathero__copy {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	/* flex-START, not flex-end: this is a column, so align-items is the horizontal (cross)
	   axis, and under the RTL container flex-start resolves to the RIGHT — where the design
	   sets the name and strapline (109:821 items-end in an RTL frame). flex-end would push
	   them to the left. */
	align-items: flex-start;
	gap: 24px;
	padding: 24px 0;
	text-align: right;
}

.rp-cathero__title {
	margin: 0;
	font-family: 'Futurism', sans-serif;
	font-size: 100px;
	line-height: 0.8;
	color: #FFFFFF;
}

/* 447px in the design (109:823) — the width the strapline wraps at. */
.rp-cathero__desc {
	margin: 0;
	max-width: 447px;
	font-family: 'Google Sans', sans-serif;
	font-style: italic;
	font-size: 20px;
	line-height: 1.3;
	color: #E6E6E6;
}

/* ------------------------------------------------
   CHIPS  (109:824)
   ------------------------------------------------
   No direction override: listed לנשים first, and under RTL the first child paints on the
   RIGHT (the 60px gutter), filling leftward — the design's arrangement. */
.rp-cathero__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	width: 100%;
	padding: 40px 0;
}

/* Every chip carries its category's colour as the border (--rp-chip, set inline by the widget
   from rp_colour), over a rgba(37,37,37,0.6) surface, white label. This matches the Next.js
   reference's CategoryStrip — the pixel-verified source of truth — NOT the Figma archive frame
   (109:826), which drew inactive chips grey-bordered and dimmed. The two disagreed; Next.js
   wins. Same treatment as the home hero pills. */
.rp-cathero__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 130px;
	padding: 12px 16px;
	border: 1px solid var(--rp-chip, #FF3B3B);
	border-radius: 100px;
	/* --rp-chip-bg comes from the "Inactive Background" control (default below); the active
	   chip and :hover set background-color directly and override it. */
	background-color: var(--rp-chip-bg, rgba(37, 37, 37, 0.6));
	font-family: 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	color: #FFFFFF;
	white-space: nowrap;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* hover:bg-surface — solid #252525, inactive chips only. The inactive-bg control now sets a
   variable (not background-color), so this plain (0,3,0) rule wins the property outright.
   :not(--active) keeps the current category's filled chip from going grey on hover. */
.rp-cathero__chip:not(.rp-cathero__chip--active):hover {
	background-color: #252525;
}

/* Active — the category being viewed: filled SOLID in its own colour (Next.js FILL =
   bg-cat-X border-cat-X), white label. */
.rp-cathero__chip--active {
	border-color: var(--rp-chip, #FF3B3B);
	background-color: var(--rp-chip, #FF3B3B);
	color: #FFFFFF;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   No mobile frame in the Figma — a sensible fallback, not a specified layout. */
@media (max-width: 1024px) {
	/* 132px, not 100px — below 1024px the desktop header is hidden and the 132px MOBILE bar
	   takes over, pulled up over this section by a matching -132px margin. Clearing only 100px
	   left the top 32px of the content under the bar, which put the first category chip behind
	   the logo. Same arithmetic as the home hero and the product page's strip; all three are
	   tied to .rp-mheader's height. */
	.rp-cathero__inner {
		padding: 132px 24px 0;
	}
	.rp-cathero__title {
		font-size: 56px;
	}
}

/* רצועת קטגוריות משנה בעמוד ארכיון הקטגוריה.
   מופיעה רק כשלקטגוריה הנוכחית יש ילדים, ולכן אינה משפיעה על עמודי עלה. */
.rp-cathero__subcats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
	max-width: 100%;
}

.rp-cathero__subcat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 999px;
	background: rgba(0, 0, 0, .34);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	backdrop-filter: blur(3px);
	transition: background .18s ease, border-color .18s ease;
}

.rp-cathero__subcat:hover,
.rp-cathero__subcat:focus-visible {
	background: rgba(255, 255, 255, .92);
	border-color: transparent;
	color: #111;
}

/* מספר המוצרים, משני לשם */
.rp-cathero__subcat-n {
	font-size: 12px;
	opacity: .72;
}

@media (max-width: 767px) {
	.rp-cathero__subcats {
		gap: 8px;
		margin-top: 14px;
		/* גלילה אופקית במקום עטיפה לשלוש שורות על מסך צר */
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.rp-cathero__subcats::-webkit-scrollbar {
		display: none;
	}

	.rp-cathero__subcat {
		padding: 7px 13px;
		font-size: 13px;
	}
}