/* ================================================
   RED POINT — PRODUCT DESCRIPTION  (Figma 109:1442)
   ================================================
   heading  Futurism 24 · "תיאור" white + "המוצר" red · right
   body     Google Sans 16/1.6 #818181 · right · 32px under the gallery, 50px clear of the spec
   ================================================ */

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

.rp-pdesc__title {
	margin: 0;
	font-family: 'Futurism', sans-serif;
	font-size: 24px;
	line-height: 0.9;
	text-align: right;
}

.rp-pdesc__lead {
	font-weight: 300;
	color: #FFFFFF;
}

/* space before the accent word so "תיאור המוצר" isn't run together. */
.rp-pdesc__accent {
	margin-inline-start: 0.35em;
	color: #FF3B3B;
}

.rp-pdesc__body {
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #818181;
	text-align: right;
}

.rp-pdesc__body p {
	margin: 0 0 1em;
}

.rp-pdesc__body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.rp-pdesc {
		padding: 24px 24px 32px;
	}
}

/* ================================================
   AUDIENCE BLOCK  (shared)
   ================================================
   The description with its לגברים / רגיל / לנשים tabs. Rendered by the BUY BOX at the client's
   request, and by the standalone section anywhere the buy box is absent — one stylesheet for
   both, so the two cannot drift.
   ================================================ */

.rp-audience {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

/* A segmented control, so it reads as one choice with one answer rather than three buttons. */
.rp-audience__switch {
	display: inline-flex;
	align-self: flex-start;
	padding: 4px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.06);
}

/* Restated under .rp-audience (0,2,0) so it beats Hello Elementor's `.elementor button`,
   which otherwise gives each tab a fill, a border and its own padding box — the same trap
   that once painted the add-to-cart button solid pink. */
.rp-audience .rp-audience__mode {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 7px 16px;
	border: 0;
	border-radius: 100px;
	background-color: transparent;
	box-shadow: none;
	font-family: 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: 13px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.6);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rp-audience .rp-audience__mode:hover {
	color: #FFFFFF;
}

.rp-audience .rp-audience__mode.is-on {
	background-color: #FF3B3B;
	color: #FFFFFF;
}

/* The group is a single tab stop and arrows move within it, so the selected control has to be
   visibly focused or the selection moves invisibly. */
.rp-audience .rp-audience__mode:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

.rp-audience__body {
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #818181;
	text-align: right;
}

.rp-audience__body p {
	margin: 0 0 1em;
}

.rp-audience__body p:last-child {
	margin-bottom: 0;
}

/* `hidden` is display:none, but stated explicitly: a display value on .rp-audience__body would
   otherwise beat the attribute and show every version at once. */
.rp-audience__body[hidden] {
	display: none;
}

/* In the buy box the block sits in a narrow column beside the price, so it runs a size down. */
.rp-audience--buybox {
	gap: 10px;
}

.rp-audience--buybox .rp-audience__mode {
	padding: 6px 14px;
	font-size: 12px;
}

.rp-audience--buybox .rp-audience__body {
	font-size: 16px;
	line-height: 1.4;
}

/* The middle mode is a WHITE DOT, not the word "רגיל" — the client's request. Same pill
   geometry as the labelled tabs so the row keeps its rhythm; only the content differs. */
.rp-audience .rp-audience__mode--dot {
	padding-inline: 12px;
}

.rp-audience__dot {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #FFFFFF;
}

/* Selected, the pill turns red — a white dot on red still reads. */
.rp-audience .rp-audience__mode--dot.is-on .rp-audience__dot {
	background-color: #FFFFFF;
}

/* Text pasted from an editor with an inline black colour vanished on the dark site (client report, Oct 2026).
   Only black is overridden; the two deliberate red highlights keep their colour. */
.rp-audience__body [style*="color: #000000"],
.rp-audience__body [style*="color:#000000"],
.rp-audience__body [style*="color: #000;"],
.rp-audience__body [style*="color: black"],
.rp-audience__body [style*="color: rgb(0, 0, 0)"] {
	color: inherit !important;
}