/* =============================================================================
 * RahkarTheme — the two full-width bands under the product buybox.
 *
 *   .rh-pdetails  «همهٔ جزئیات» — the detail accordion. Native <details>, so it
 *                 opens with no JS, is keyboard- and screen-reader-correct, and
 *                 keeps working if a script fails. `name="rh-details"` makes the
 *                 group single-open natively; the browsers that do not support
 *                 that attribute yet simply allow several open at once, which is
 *                 a graceful degradation rather than a break.
 *
 *   .rh-ba        BEFORE / AFTER — a drag-to-compare pair. The handle is a real
 *                 <input type="range">, restyled: drag, tap, arrow keys and
 *                 assistive tech all come for free, and product-split.js only
 *                 has to mirror its value into --rh-ba-pos.
 *
 * Both are DESIGNED but not yet wired to a content source — see the template.
 * The accordion prints only rows that actually have text, and the whole
 * before/after band renders only when a pair exists, so neither can ship an
 * empty box to a customer while the wiring is still to come.
 * ========================================================================== */

/* =============================================================================
 *  «همهٔ جزئیات»
 * ========================================================================== */
.rh-pdetails {
	margin-block: clamp(36px, 6vw, 80px);
}
.rh-pdetails__title {
	margin: 0 0 clamp(18px, 2.6vw, 32px);
	font-size: clamp(1.3rem, 2.2vw, 1.9rem);
	font-weight: var(--rh-fw-strong);
	line-height: 1.35;
	text-align: center;
	color: var(--wp--preset--color--foreground, #1a1d23);
}
/* One shared box with hairlines BETWEEN the rows — the reference reads as a
   single bordered block, not as five separate cards. */
.rh-pdetails__list {
	max-width: 900px;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
}
.rh-pdetails__row + .rh-pdetails__row {
	border-block-start: 1px solid var(--wp--preset--color--border, #e2e4e9);
}

.rh-pdetails__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: clamp(16px, 2vw, 22px) clamp(16px, 2.4vw, 28px);
	cursor: pointer;
	list-style: none;               /* Firefox */
	user-select: none;
}
.rh-pdetails__summary::-webkit-details-marker { display: none; }
.rh-pdetails__summary:hover { background: var(--wp--preset--color--surface, #fafafa); }
.rh-pdetails__label {
	font-size: clamp(0.95rem, 1.15vw, 1.05rem);
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--foreground, #1a1d23);
}

/* The +/− is drawn from the row's OWN open state — two bars, one of which is
   rotated away when the row opens. No icon swap, no JS, and it is structurally
   impossible for the sign to disagree with the row. */
.rh-pdetails__sign {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
}
.rh-pdetails__sign::before,
.rh-pdetails__sign::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transform: translateY(-50%);
	transition: transform 200ms ease, opacity 200ms ease;
}
.rh-pdetails__sign::after { transform: translateY(-50%) rotate(90deg); }
[open] > .rh-pdetails__summary .rh-pdetails__sign::after {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

.rh-pdetails__body {
	padding: 0 clamp(16px, 2.4vw, 28px) clamp(18px, 2.4vw, 26px);
	font-size: clamp(0.88rem, 1.05vw, 0.97rem);
	line-height: 2;
	color: var(--wp--preset--color--text, #4a4f57);
}
.rh-pdetails__body p:first-child { margin-block-start: 0; }
.rh-pdetails__body p:last-child { margin-block-end: 0; }

/* =============================================================================
 *  BEFORE / AFTER
 * ========================================================================== */
.rh-ba {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(24px, 4vw, 72px);
	margin-block: clamp(36px, 6vw, 80px);
}

.rh-ba__stage {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
	background: var(--wp--preset--color--surface, #f4f5f7);
	/* Set by product-split.js from the range value; 50% is the resting split and
	   also the value the page renders with before any script runs. */
	--rh-ba-pos: 50%;
}
.rh-ba__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* The BEFORE image is CLIPPED rather than resized, so the two shots stay
   pixel-aligned at every handle position and at every stage width. In this RTL
   band "before" is the inline-start (right) half. */
.rh-ba__img--before {
	clip-path: inset(0 0 0 calc(100% - var(--rh-ba-pos)));
}
.rh-ba__divider {
	position: absolute;
	inset-block: 0;
	inset-inline-start: var(--rh-ba-pos);
	width: 2px;
	margin-inline-start: -1px;
	background: #fff;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
	pointer-events: none;
}

/* The range input IS the handle. Invisible track, a real round thumb — so the
   control keeps every native behaviour (drag, tap-to-jump, arrow keys, focus
   ring, assistive tech) and only looks custom. */
.rh-ba__range {
	position: absolute;
	inset-block: 0;
	inset-inline: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	cursor: ew-resize;
}
.rh-ba__range:focus-visible { outline: 2px solid var(--wp--preset--color--foreground, #1a1d23); outline-offset: -2px; }
.rh-ba__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231a1d23' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 3 12 9 18'/%3E%3Cpolyline points='15 6 21 12 15 18'/%3E%3C/svg%3E") center/18px no-repeat;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	cursor: ew-resize;
}
.rh-ba__range::-moz-range-thumb {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231a1d23' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 3 12 9 18'/%3E%3Cpolyline points='15 6 21 12 15 18'/%3E%3C/svg%3E") center/18px no-repeat;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	cursor: ew-resize;
}

.rh-ba__tag {
	position: absolute;
	inset-block-end: 12px;
	padding: 4px 12px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--foreground, #1a1d23);
	font-size: 0.75rem;
	font-weight: var(--rh-fw-strong);
	pointer-events: none;
}
.rh-ba__tag--before { inset-inline-start: 12px; }
.rh-ba__tag--after { inset-inline-end: 12px; }

.rh-ba__side { min-width: 0; }
.rh-ba__title {
	margin: 0;
	font-size: clamp(1.15rem, 1.9vw, 1.6rem);
	font-weight: var(--rh-fw-strong);
	line-height: 1.5;
	color: var(--wp--preset--color--foreground, #1a1d23);
}
.rh-ba__note {
	margin: 10px 0 0;
	font-size: clamp(0.88rem, 1.05vw, 0.97rem);
	line-height: 2;
	color: var(--wp--preset--color--text, #4a4f57);
}
.rh-ba__swap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: clamp(18px, 2.4vw, 28px) 0 10px;
	font-size: 0.85rem;
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--foreground, #1a1d23);
}
.rh-ba__picks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rh-ba__pick {
	width: 84px;
	aspect-ratio: var(--rh-product-ratio, 0.8);
	padding: 0;
	border: 2px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	background: var(--wp--preset--color--surface, #f4f5f7);
	overflow: hidden;
	cursor: pointer;
	transition: border-color 140ms ease;
}
.rh-ba__pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rh-ba__pick.is-active,
.rh-ba__pick:hover { border-color: var(--wp--preset--color--foreground, #1a1d23); }

@media (max-width: 900px) {
	.rh-ba {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	/* Full-bleed here (no max-width), so a rounded corner would sit right at the
	   screen edge with nothing around it to read as intentional — square it off. */
	.rh-pdetails__list { max-width: none; border-radius: 0; border-inline: 0; }
}

/* =============================================================================
 *  Under the buybox: three guarantees, then the shop's own add-ons.
 *
 *  These replaced a stack of full-width tappable rows (shipping sheet, loyalty
 *  points) that pushed the description most of a screen further down. Three
 *  short guarantees carry the same reassurance in one line.
 * ========================================================================== */
.rh-assure {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(8px, 1.6vw, 18px);
	margin-block: clamp(18px, 2.4vw, 26px);
	padding-block: clamp(14px, 2vw, 20px);
}
.rh-assure__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.rh-assure__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--rh-pd-fg, #1a1d23);
}
.rh-assure__icon svg { width: 32px; height: 32px; display: block; }
.rh-assure__label {
	font-size: clamp(0.72rem, 1vw, 0.82rem);
	font-weight: var(--rh-fw-strong);
	line-height: 1.6;
	color: var(--rh-pd-fg, #1a1d23);
}

/* ---- «مکمل این محصول» --------------------------------------------------- */
.rh-addons { margin-block: clamp(20px, 3vw, 32px); }
.rh-addons__title {
	margin: 0 0 12px;
	font-size: clamp(0.95rem, 1.2vw, 1.05rem);
	font-weight: var(--rh-fw-strong);
	text-align: center;
	color: var(--rh-pd-fg, #1a1d23);
}
/* One bordered block with hairlines between rows — the same treatment as the
   details accordion above, so the two read as a family. */
.rh-addons__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--rh-pd-border, #e2e4e9);
}
.rh-addons__row {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 12px;
}
.rh-addons__row + .rh-addons__row { border-block-start: 1px solid var(--rh-pd-border, #e2e4e9); }
.rh-addons__thumb {
	display: block;
	width: 74px;
	aspect-ratio: var(--rh-product-ratio, 0.8);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	background: var(--rh-pd-surface, #f7f7f8);
}
.rh-addons__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rh-addons__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Price over button, both hugging the row's inline end. */
.rh-addons__action {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}
.rh-addons__rating:empty { display: none; }
/* The stars come from the shared rating hook, which is sized for a product
   card; in a 74px-tall row they need to sit down a size. */
.rh-addons__rating .rh-rating-inline { font-size: 0.72rem; }
.rh-addons__name {
	font-size: 0.85rem;
	font-weight: var(--rh-fw-strong);
	line-height: 1.7;
	color: var(--rh-pd-fg, #1a1d23);
	text-decoration: none;
	/* Two lines, then ellipsis: the rows must stay the same height or the block
	   turns into a ragged list. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rh-addons__name:hover { color: var(--rh-pd-primary, #0a66c2); }
.rh-addons__price {
	font-size: 0.85rem;
	font-weight: var(--rh-fw-strong);
	white-space: nowrap;
}
.rh-addons__old {
	margin-inline-end: 6px;
	font-weight: var(--rh-fw-base);
	color: var(--rh-pd-muted, #6b7078);
}
/* OUTLINE, not solid. This is a secondary action sitting a few centimetres
   under the page's real call to action; a filled block the same weight as
   «افزودن به سبد خرید» pulled the eye away from it. The outline still reads as
   a button, and fills in only on hover — at which point the visitor has
   already chosen it.

   Colored in the brand primary, not neutral ink: matches the product page's
   own «ثبت دیدگاه» (.rh-reviews__summary-cta) and every other outline-then-
   fill button in the theme, so "secondary action, not the main one" is read
   from WEIGHT (outline vs. solid) rather than from a second, duller color. */
.rh-addons__add {
	flex: none;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--primary, #cb6686);
	border-radius: var(--wp--custom--button--radius, 10px);
	background: transparent;
	color: var(--wp--preset--color--primary, #cb6686);
	font-size: 0.8rem;
	font-weight: var(--rh-fw-strong);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.rh-addons__add:hover,
.rh-addons__add:focus-visible {
	border-color: var(--wp--preset--color--primary, #cb6686);
	background: var(--wp--preset--color--primary, #cb6686);
	color: #fff;
}
.rh-addons__add--off {
	background: transparent;
	border-color: var(--rh-pd-border, #e2e4e9);
	color: var(--rh-pd-muted, #6b7078);
	cursor: default;
}
.rh-addons__add--off:hover { background: transparent; color: var(--rh-pd-muted, #6b7078); }

@media (max-width: 480px) {
	.rh-addons__row { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 10px; }
	.rh-addons__thumb { width: 60px; }
	.rh-addons__add { padding: 8px 12px; }
}

/* ---- Short description, under the product name -------------------------
 * Moved out of its own titled section further down the column. It is the
 * "what is this?" line, so it belongs between the name and the price, and it
 * carries no «بیشتر» toggle: the field is always a sentence or two, and a fade
 * plus a control to undo the fade was furniture around nothing. The long
 * description keeps its toggle in its own section below, where the text can
 * actually run long enough to need one. */
.rh-psplit__lead {
	margin-block: 10px 4px;
	font-size: clamp(0.88rem, 1.05vw, 0.97rem);
	font-weight: var(--rh-fw-base);
	line-height: 2;
	color: var(--rh-pd-muted, #5b6271);
}
.rh-psplit__lead p:first-child { margin-block-start: 0; }
.rh-psplit__lead p:last-child { margin-block-end: 0; }

/* ---- The name starts a little below the photo's top edge ----------------
 * Both columns began at exactly the same y, which put the <h1> hard against
 * the top of the picture and made the text column look like it had slipped
 * upward. A small lead-in gives the name somewhere to sit and reads as
 * deliberate alignment rather than a collision.
 *
 * Desktop only: stacked on mobile, the info column follows the gallery and
 * there is nothing to align to. */
@media (min-width: 901px) {
	.rh-psplit__info { padding-block-start: clamp(18px, 2.4vw, 40px); }
}

/* =============================================================================
 *  Accordion body: the three shapes a section can take.
 *
 *  The operator types plain lines in the product's «جزئیات محصول» tab; the
 *  template turns them into real <ul>/<ol>, so the semantics (and the SEO) come
 *  from the markup, and everything below is only about how they read.
 * ========================================================================== */
.rh-pdetails__ul,
.rh-pdetails__ol {
	margin: 0;
	padding-inline-start: 1.35em;
}
.rh-pdetails__ul { list-style: disc; }
.rh-pdetails__ul > li::marker { color: var(--wp--preset--color--border, #b9bec7); }

/* Numbered steps get the number as a drawn counter rather than a list marker:
   a marker is typeset by the browser at whatever weight the font gives it, and
   these need to read as step 1, 2, 3 — the point of the section. */
.rh-pdetails__ol {
	list-style: none;
	padding-inline-start: 0;
	counter-reset: rh-step;
}
.rh-pdetails__ol > li {
	position: relative;
	padding-inline-start: 2.4em;
	counter-increment: rh-step;
}
.rh-pdetails__ol > li + li { margin-block-start: 6px; }
.rh-pdetails__ol > li::before {
	content: counter(rh-step, persian);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.35em;
	display: grid;
	place-items: center;
	width: 1.7em;
	height: 1.7em;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: 50%;
	font-size: 0.82em;
	font-weight: var(--rh-fw-strong);
	line-height: 1;
	color: var(--wp--preset--color--foreground, #1a1d23);
}

/* Expiry: the Jalali reading is the one the customer checks, the Gregorian is
   what is printed on the packaging — both, so the two can be matched up. */
.rh-pdetails__date { margin: 0; }
.rh-pdetails__date time { font-weight: var(--rh-fw-strong); }
.rh-pdetails__date-alt {
	margin-inline-start: 8px;
	font-size: 0.86em;
	color: var(--wp--preset--color--text, #4a4f57);
	opacity: 0.75;
}

/* «سایر مشخصات» reuses PrestaShop's own product-details partial, whose root
   carries `tab-pane fade` from the core tab layout. Outside those tabs nothing
   ever adds `.show`, so without this the whole row would render invisible. */
.rh-pdetails__body--specs .tab-pane {
	display: block;
	opacity: 1;
}
/* The partial prints its own «مشخصات فنی» heading; the accordion row is
   already labelled, so a second heading inside it is noise. */
.rh-pdetails__body--specs .product-features > .h6 { display: none; }
.rh-pdetails__body--specs .data-sheet {
	display: grid;
	grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
	gap: 0;
	margin: 0;
}
.rh-pdetails__body--specs .data-sheet > dt,
.rh-pdetails__body--specs .data-sheet > dd {
	margin: 0;
	padding: 10px 0;
	border-block-end: 1px solid var(--wp--preset--color--border, #eef0f3);
}
.rh-pdetails__body--specs .data-sheet > dt {
	padding-inline-end: 20px;
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--foreground, #1a1d23);
}
.rh-pdetails__body--specs .data-sheet > dt:last-of-type,
.rh-pdetails__body--specs .data-sheet > dd:last-of-type { border-block-end: 0; }
.rh-pdetails__body--specs .product-manufacturer,
.rh-pdetails__body--specs .product-reference,
.rh-pdetails__body--specs .product-condition { margin-block-end: 8px; }
.rh-pdetails__body--specs .label {
	margin-inline-end: 8px;
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--foreground, #1a1d23);
}
.rh-pdetails__body--specs .product-out-of-stock:empty { display: none; }

/* A pack carries one expiry per item in the box, so the row becomes a term/
   definition list. Two columns while there is room; stacked on narrow screens,
   where a 120px term column would leave the dates nowhere to go. */
.rh-pdetails__dates {
	display: grid;
	grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
	gap: 0;
	margin: 0;
}
.rh-pdetails__dates-term,
.rh-pdetails__dates-def {
	margin: 0;
	padding: 8px 0;
}
.rh-pdetails__dates-term {
	padding-inline-end: 20px;
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--foreground, #1a1d23);
}
.rh-pdetails__dates-term + .rh-pdetails__dates-def time { font-weight: var(--rh-fw-strong); }
.rh-pdetails__dates > .rh-pdetails__dates-term:not(:first-of-type),
.rh-pdetails__dates > .rh-pdetails__dates-def:not(:first-of-type) {
	border-block-start: 1px solid var(--wp--preset--color--border, #eef0f3);
}
@media (max-width: 560px) {
	.rh-pdetails__dates { grid-template-columns: 1fr; }
	.rh-pdetails__dates-term { padding-block-end: 0; }
	.rh-pdetails__dates-def { padding-block-start: 2px; }
	/* Stacked, the hairline belongs above the TERM only — between pairs, not
	   between an item and its own date. */
	.rh-pdetails__dates > .rh-pdetails__dates-def:not(:first-of-type) { border-block-start: 0; }
}

/* The thumbnail rail carries a caption when the shop named a pair («بعد از ۴
   هفته»). Captioned or not, the tiles keep the same width so the rail stays a
   grid rather than a ragged row. */
.rh-ba__picks > li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 84px;
}
.rh-ba__picks .rh-ba__pick { width: 100%; }
.rh-ba__pick-label {
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text, #4a4f57);
}
.rh-ba__swap svg { flex: none; }
.rh-ba__note--caption { margin-block-start: 14px; font-weight: var(--rh-fw-strong); }