/* ================================================
   RED POINT — PRODUCT INFO / BUY BOX  (Figma 109:1390)
   ================================================
   column  500 · right-aligned · 32px gaps
   ================================================ */

.rp-buybox {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL cross-start = RIGHT */
	gap: 32px;
	width: 100%;
	max-width: 500px;
	text-align: right;
	box-sizing: border-box;
}

/* Button reset. Hello Elementor's `.elementor button` (0,1,1) boxes every <button>; scoped
   under .rp-buybox so it loses, and the specific buttons re-apply their look below at (0,2,0). */
.rp-buybox 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;
}

/* ------------------------------------------------
   HEAD
   ------------------------------------------------ */
.rp-buybox__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
}

.rp-buybox__titles {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

.rp-buybox__name {
	margin: 0;
	font-family: 'Futurism', sans-serif;
	font-size: 60px;
	line-height: 1;
	color: #FFFFFF;
}

.rp-buybox__tagline {
	margin: 0;
	font-family: 'Google Sans', sans-serif;
	font-size: 20px;
	line-height: 1;
	color: #FFFFFF;
}

.rp-buybox__vendor {
	font-family: 'Google Sans', sans-serif;
	font-size: 14px;
	line-height: 1;
	color: #A8A8B0;
}

.rp-buybox__reviews {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rp-buybox__stars {
	display: flex;
	align-items: center;
	gap: 4px;
}

.rp-buybox__star {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.15);
}

.rp-buybox__star.is-on {
	color: #FFD13B;
}

.rp-buybox__review-count {
	font-family: 'Google Sans', sans-serif;
	font-size: 12px;
	line-height: 1;
	color: #A8A8B0;
}

/* Prices — new first (RIGHT under RTL), struck old to its left. */
.rp-buybox__prices {
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 1;
}

.rp-buybox__price {
	font-family: 'Google Sans', sans-serif;
	font-size: 28px;
	line-height: 1;
	color: #FFFFFF;
	white-space: nowrap;
}

.rp-buybox__price--old {
	font-size: 20px;
	color: #FF3B3B;
	text-decoration: line-through;
}

.rp-buybox__blurb {
	margin: 0;
	width: 100%;
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #818181;
}

.rp-buybox__blurb span {
	display: block;
}

/* ------------------------------------------------
   ACTIONS
   ------------------------------------------------ */
.rp-buybox__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.rp-buybox__chips {
	display: flex;
	align-items: center;
	gap: 16px;
}

.rp-buybox .rp-buybox__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 6px;
	border-radius: 100px;
	background-color: rgba(37, 37, 37, 0.2);
	color: #FFFFFF;
	transition: background-color 0.15s ease;
}

.rp-buybox .rp-buybox__chip:hover {
	background-color: rgba(37, 37, 37, 0.5);
}

.rp-buybox__chip svg {
	width: 20px;
	height: 20px;
}

/* Buy row — add button + stepper. */
.rp-buybox__buy {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
}

.rp-buybox .rp-buybox__add {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 135px;
	height: 40px;
	padding: 0 32px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 100px;
	font-family: 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	color: #FFFFFF;
	white-space: nowrap;
	/* Explicitly transparent. The reference button is an OUTLINE control — border-white/40 with
	   white text and no fill (components/BuyBox.js:23) — and this rule never said so, so the
	   theme's own button fill showed through and the add-to-cart rendered as a solid pink pill
	   on every product. Declaring it here means no stylesheet load order can repaint it. */
	background-color: transparent;
	transition: border-color 0.15s ease;
}

.rp-buybox .rp-buybox__add:hover {
	border-color: #FFFFFF;
}

/* Sold out — the button stays visible (the page is still worth reading) but must not look
   live. :hover is neutralised too, or the border still brightens and it reads as clickable. */
.rp-buybox .rp-buybox__add--oos,
.rp-buybox .rp-buybox__add--oos:hover {
	border-color: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.45);
	cursor: not-allowed;
}

/* ------------------------------------------------
   VARIABLE PRODUCTS  (client adjustment #2)
   ------------------------------------------------
   139 of the catalogue's products have options and the buy box showed none of them. The form
   now carries WooCommerce's variation markup, which means it holds STACKED children (the
   selects, then the buy row) where the simple form is a single flex row — so it has to switch
   to a column, or the selects sit next to the button. */
.rp-buybox__buy--variable {
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
}

.rp-buybox__variations {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rp-buybox__variation {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rp-buybox__variation-label {
	font-family: 'Google Sans', sans-serif;
	font-size: 13px;
	line-height: 1;
	color: #A8A8B0;
}

/* The select is WooCommerce's own markup, so it arrives with the theme's form styling. Restated
   under .rp-buybox (0,2,0) to beat Hello Elementor's `.elementor select`, the same trap the add
   button hit — it otherwise renders as a white system dropdown on the dark panel. */
.rp-buybox .rp-buybox__variations select {
	width: 100%;
	max-width: 320px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.06);
	font-family: 'Google Sans', sans-serif;
	font-size: 14px;
	line-height: 1;
	color: #FFFFFF;
	box-shadow: none;
}

/* The options themselves are painted by the OS, which defaults to a white list — unreadable
   with white text. */
.rp-buybox .rp-buybox__variations select option {
	background-color: #1A1A1A;
	color: #FFFFFF;
}

.rp-buybox__reset {
	align-self: flex-start;
	font-family: 'Google Sans', sans-serif;
	font-size: 13px;
	color: #A8A8B0;
	text-decoration: underline;
}

/* The buy row inside the variation wrapper — the flex row the simple form gets for free. */
.rp-buybox__buyrow {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* Woo writes the chosen variation's price and stock line in here. */
.rp-buybox .woocommerce-variation {
	font-family: 'Google Sans', sans-serif;
	font-size: 20px;
	line-height: 1.3;
	color: #FFFFFF;
}

.rp-buybox .woocommerce-variation .price {
	font-size: 28px;
	color: #FFFFFF;
}

/* Until every option is chosen, Woo flags the wrapper and puts `.disabled` on the button.
   pointer-events:none is the point of this rule: without it the button is still clickable, and
   WooCommerce answers the click with a browser alert ("choose the product options first"). The
   button simply should not be pressable yet — no alert to dismiss, nothing to explain. */
.rp-buybox .woocommerce-variation-add-to-cart-disabled .rp-buybox__add,
.rp-buybox .rp-buybox__add.disabled {
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.45);
}

.rp-buybox__stepper {
	display: flex;
	align-items: center;
	gap: 5px;
}

.rp-buybox .rp-buybox__step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 4px;
	border-radius: 100px;
	color: #0C0C0C;
	transition: opacity 0.15s ease;
}

.rp-buybox .rp-buybox__step:hover {
	opacity: 0.8;
}

.rp-buybox .rp-buybox__step--minus {
	background-color: #F4ECEC;
}

.rp-buybox .rp-buybox__step--plus {
	background-color: #EAFAE1;
}

.rp-buybox__step svg {
	width: 14px;
	height: 14px;
}

.rp-buybox__qty {
	width: 32px;
	text-align: center;
	font-family: 'Google Sans', sans-serif;
	font-size: 11px;
	line-height: 1;
	color: #FFFFFF;
}

/* ------------------------------------------------
   PILLS  (109:1428) — #B20143 hairline, gradient text
   ------------------------------------------------ */
.rp-buybox__pills {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rp-buybox__pill {
	display: inline-flex;
	padding: 5px 13px;
	border: 1px solid transparent;
	border-radius: 100px;
	/* רקע אחיד ולא גרדיאנט: מול הקצה הכהה הניגודיות של טקסט שחור ירדה ל-2.98
	   ולא עמדה בתקן. בוורוד הבהיר לבדו היא 6.45 לכל אורך הגלולה. */
	background-color: #ED579D;
}

.rp-buybox__pill span {
	font-family: 'Google Sans', sans-serif;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.55px;
	text-transform: uppercase;
	color: #000;
}

/* ------------------------------------------------
   HELP CARD  (109:1430) — #252525
   ------------------------------------------------ */
.rp-buybox__help {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	width: 100%;
	padding: 16px;
	border-radius: 16px;
	background-color: #252525;
	box-sizing: border-box;
}

.rp-buybox__help-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 226px;
	max-width: 100%;
}

.rp-buybox__help-title {
	margin: 0;
	font-family: 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	color: #FFFFFF;
}

.rp-buybox__help-sub {
	margin: 0;
	font-family: 'Google Sans', sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #DADADA;
}

.rp-buybox__help-form {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 24px;
	width: 100%;
	flex-wrap: wrap;
}

.rp-buybox__help-fields {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Scoped under .rp-buybox (0,2,0) so the field radius beats Hello's input reset. */
.rp-buybox .rp-buybox__help-field {
	height: 32px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 100px;
	background: none;
	font-family: 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: 12px;
	color: #DADADA;
	text-align: right;
	box-sizing: border-box;
}

.rp-buybox .rp-buybox__help-field {
	width: 110px;
}

.rp-buybox .rp-buybox__help-field--phone {
	width: 180px;
}

.rp-buybox .rp-buybox__help-field::placeholder {
	color: #DADADA;
}

.rp-buybox .rp-buybox__help-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 146px;
	height: 32px;
	border-radius: 100px;
	background-color: #FFFFFF;
	font-family: 'Google Sans', sans-serif;
	font-weight: 600;
	font-size: 12px;
	color: #0C0C0C;
	transition: background-color 0.15s ease;
}

.rp-buybox .rp-buybox__help-submit:hover {
	background-color: #E6E6E6;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 1024px) {
	.rp-buybox {
		max-width: 100%;
	}
	.rp-buybox__name {
		font-size: 44px;
	}
}

/* Callback request feedback. The control gave no reply of any kind before — a customer could
   send and not know whether anything happened. Errors take the accent so a failure cannot be
   mistaken for a success. */
.rp-buybox .rp-buybox__help-status {
	margin: 8px 0 0;
	min-height: 16px;
	font-family: 'Google Sans', sans-serif;
	font-size: 12px;
	line-height: 1.4;
	color: var(--rp-body, #E6E6E6);
}

.rp-buybox .rp-buybox__help-status.is-error {
	color: var(--rp-accent, #FF3B3B);
}

.rp-buybox .rp-buybox__help-submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* שורת המק"ט, מתחת לתגי המלאי והמשלוח.
   משנית בהיררכיה: הלקוח מסתכל עליה רק כשהוא צריך לצטט מספר. */
.rp-buybox__sku {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.4;
}

.rp-buybox__sku-label {
	opacity: .62;
}

.rp-buybox__sku-value {
	font-weight: 600;
	/* מק"ט הוא מזהה, ולכן נשאר בכיוון LTR גם בעמוד RTL */
	direction: ltr;
	unicode-bidi: isolate;
	letter-spacing: .02em;
}

@media (max-width: 767px) {
	.rp-buybox__sku {
		margin-top: 10px;
		font-size: 13px;
	}
}

/* the variation picker shows under the price; the form's own copy stays for WooCommerce, hidden */
.rp-buybox .rp-buybox__variations--moved { display: none; }
.rp-buybox .rp-buybox__variations--proxy { margin-block: 4px 8px; }