/*
 * Front-page layout corrections.
 *
 * All of these are Elementor-authored structures. Fixing them here rather than
 * in wp-admin keeps the change deployable, since the database is never pushed.
 */

/*
 * The gold strip above the logo.
 *
 * whb-top-bar has a gold background and no content, so on wide screens it
 * renders as a bare coloured line. It is not a divider — it is an empty row.
 */
.whb-top-bar {
	display: none !important;
}

/*
 * The two stacked images below the products section sit in adjacent Elementor
 * columns whose gutters come from per-column padding, which collapses at some
 * widths and leaves the images touching. Replaced with a real flex gap so the
 * gutter is the same at every size, and the outer edges stay full-bleed.
 */
.home .elementor-element-429db92 > .elementor-container {
	gap: clamp(1rem, 2.2vw, 1.75rem);
}

.home .elementor-element-429db92 > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding-inline: 0 !important;
}

/*
 * The blog section renders no posts, so it was an empty band under a heading
 * promising content. Hidden rather than deleted — the posts exist, and
 * assigning them to this widget in wp-admin would bring the section back.
 */
.home .elementor-element-4550085 {
	display: none !important;
}

/* --- The four benefit blocks --------------------------------------------- */

/*
 * Free shipping / fast support / quality assurance / secure payment.
 *
 * Each is a nested Elementor section: one column holding an icon widget, one
 * holding two headings. Three separate defects, measured at widths from 360 to
 * 1024, all of which show up worst on a phone once GTranslate swaps the short
 * Persian strings for longer English ones:
 *
 *   1. No gap at all. The text column starts at exactly the icon's right edge
 *      — titleX and iconRight were the same number at every width tested — so
 *      the first letter sits flush against the artwork, and a descender or a
 *      wide glyph reads as overlapping it.
 *
 *   2. The icon size is authored in viewport units, so a single icon grows
 *      from 30px at 360px wide to 91px at 767px. Worse, the four were each
 *      given a different value: 51 / 39 / 43 / 36px measured side by side.
 *      That is the "not in the right order" — they are simply four sizes.
 *
 *   3. Nothing ties the icon to its title, so each one floats at its own
 *      vertical offset. Up to 26px of drift between blocks, which is the
 *      "slightly lower and higher than they should".
 *
 * Fixed by ID rather than by :has() so nothing else on the site is touched.
 */
.elementor-element-dabdc06 > .elementor-container,
.elementor-element-253db3f > .elementor-container,
.elementor-element-b55c495 > .elementor-container,
.elementor-element-826e839 > .elementor-container {
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: clamp(0.7rem, 2.6vw, 1.1rem);
}

/*
 * Intrinsic widths instead of the authored percentages. The icon column is
 * whatever the icon needs and never shrinks; the text takes the remainder. A
 * percentage split is what let the icon balloon with the viewport.
 */
.elementor-element-dabdc06 > .elementor-container > .elementor-column:first-child,
.elementor-element-253db3f > .elementor-container > .elementor-column:first-child,
.elementor-element-b55c495 > .elementor-container > .elementor-column:first-child,
.elementor-element-826e839 > .elementor-container > .elementor-column:first-child {
	flex: 0 0 auto;
	width: auto;
}

.elementor-element-dabdc06 > .elementor-container > .elementor-column:last-child,
.elementor-element-253db3f > .elementor-container > .elementor-column:last-child,
.elementor-element-b55c495 > .elementor-container > .elementor-column:last-child,
.elementor-element-826e839 > .elementor-container > .elementor-column:last-child {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

/*
 * One box for all four. Each svg carries a hard width="50pt" attribute and a
 * square 0 0 50 50 viewBox, and Elementor emits a per-widget rule
 * (.elementor-NN .elementor-element.elementor-element-XXX .elementor-icon svg)
 * that outranks anything scoped to the section — 0,4,1 against 0,2,1 — so this
 * needs !important rather than a longer selector, matching how the rest of this
 * theme deals with Elementor's generated CSS.
 */
.elementor-element-dabdc06 .elementor-icon svg,
.elementor-element-253db3f .elementor-icon svg,
.elementor-element-b55c495 .elementor-icon svg,
.elementor-element-826e839 .elementor-icon svg {
	width: 38px !important;
	height: 38px !important;
}

@media (min-width: 768px) {
	.elementor-element-dabdc06 .elementor-icon svg,
	.elementor-element-253db3f .elementor-icon svg,
	.elementor-element-b55c495 .elementor-icon svg,
	.elementor-element-826e839 .elementor-icon svg {
		width: 42px !important;
		height: 42px !important;
	}
}

/* Drops the icon onto the title's optical line rather than its box top. */
.elementor-element-dabdc06 .elementor-widget-icon,
.elementor-element-253db3f .elementor-widget-icon,
.elementor-element-b55c495 .elementor-widget-icon,
.elementor-element-826e839 .elementor-widget-icon {
	margin-block-start: 2px;
}

/* --- Front-page introduction copy ---------------------------------------- */

/*
 * Set as body text, not as a marketing block: it exists to be read by people
 * who scrolled the whole page and by crawlers that read everything. Measure is
 * capped in rem rather than ch — the Persian webfont's zero glyph is narrow
 * enough that a ch-based measure collapses the column.
 */
.rb-intro {
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);
	background: transparent;
}

.rb-intro__inner {
	max-width: min(52rem, 100%);
	margin-inline: auto;
	text-align: start;
}

.rb-intro__title {
	margin: 0 0 clamp(0.75rem, 2vw, 1.15rem);
	font-size: clamp(1.35rem, 3vw, 1.9rem);
	line-height: 1.4;
	color: #2a1c0f;
}

.rb-intro p {
	margin: 0 0 1rem;
	font-size: clamp(0.95rem, 1.2vw, 1.05rem);
	line-height: 2;
	color: rgba(42, 28, 15, 0.82);
}

.rb-intro__links {
	margin-block-start: 1.25rem;
}

.rb-intro__links a {
	color: #a9803a;
	font-weight: 700;
	text-decoration: none;
	border-block-end: 1px solid rgba(169, 128, 58, 0.4);
}

.rb-intro__links a:hover,
.rb-intro__links a:focus-visible {
	color: #7d5c25;
	border-block-end-color: currentColor;
}

.rb-intro__links span {
	margin-inline: 0.5rem;
	color: rgba(42, 28, 15, 0.4);
}

/* Category guide and FAQ inside the intro block. */
.rb-intro__subtitle {
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 clamp(0.5rem, 1.5vw, 0.85rem);
	font-size: clamp(1.15rem, 2.4vw, 1.45rem);
	line-height: 1.5;
	color: #2a1c0f;
}

.rb-intro__cats {
	margin: 0 0 1rem;
	padding-inline-start: 1.15rem;
	list-style: disc;
}

.rb-intro__cats li {
	margin-block-end: 0.6rem;
	font-size: clamp(0.92rem, 1.15vw, 1rem);
	line-height: 1.95;
	color: rgba(42, 28, 15, 0.82);
}

.rb-intro__cats a {
	color: #a9803a;
	font-weight: 700;
	text-decoration: none;
}

.rb-intro__cats a:hover,
.rb-intro__cats a:focus-visible {
	color: #7d5c25;
	text-decoration: underline;
}

.rb-intro__count {
	color: rgba(42, 28, 15, 0.5);
	font-size: 0.9em;
}

/*
 * Questions carry the visual weight of a label rather than a heading: they are
 * h4 for the document outline, but styling them like headings would make the
 * block read as six sections instead of one FAQ.
 */
.rb-intro__faq h4 {
	margin: 1.15rem 0 0.35rem;
	font-size: clamp(0.98rem, 1.25vw, 1.08rem);
	font-weight: 700;
	line-height: 1.6;
	color: #2a1c0f;
}

.rb-intro__faq p {
	margin: 0;
}

/* --- "تخفیفات ویژه امروز" section ---------------------------------------- */

/*
 * Both columns carry the class elementor-col-50, but Elementor's generated CSS
 * gives them 25% and 75%. Measured at desktop the copy had 196px to work with
 * against 588px of photograph — so a 28px heading could not fit
 * "تخفیفات ویژه امروز" on one line, and the paragraph was justified inside a
 * column barely wider than a phone's.
 *
 * Rebalanced to 42/58. The photograph stays dominant, which is the design
 * intent, but the text gets enough measure to set properly.
 *
 * Desktop only: below 768px Elementor stacks these to 100% via its own media
 * query, and an unscoped !important here would fight that and keep the copy in
 * a 42% sliver on phones.
 */
@media (min-width: 768px) {
	.elementor-element-4b34d79 {
		width: 42% !important;
	}

	.elementor-element-b3fe4a5 {
		width: 58% !important;
	}
}

/*
 * 56px of leading on a 28px heading — a ratio of 2.0. Generous line spacing
 * suits a paragraph of Persian; on a wrapped two-word heading it just opens a
 * hole between the lines.
 */
.elementor-element-e05c674 .elementor-heading-title {
	line-height: 1.4 !important;
}

/*
 * Justified text needs a measure wide enough to absorb the extra space between
 * words. In a narrow column Persian justification stretches the gaps until the
 * words look unrelated — which is exactly what happened here. Aligned to the
 * start edge instead, so it follows the text direction in both languages.
 */
.elementor-element-1ef15dc,
.elementor-element-1ef15dc p {
	text-align: start !important;
}

/*
 * The discounts row on wide screens.
 *
 * The photograph is only 300x375 pixels — that is the file, not a thumbnail —
 * so it cannot be stretched to fill its column without a 2.2x upscale and
 * visible softening. Instead of widening the image, the two halves are pulled
 * together.
 *
 * Before: the image sat at the far edge of a 679px column at its natural
 * 300px, the copy sat at the opposite edge of a 491px column, and ~378px of
 * bare background opened up between them. The wider the display, the worse it
 * got, because both columns are percentages.
 *
 * Now the columns size to their content and the pair is centred with a fixed
 * gap, so the composition holds at any width instead of drifting apart.
 */
@media (min-width: 768px) {
	.elementor-element-57905ef > .elementor-container {
		justify-content: center;
		align-items: center;
		gap: clamp(1.5rem, 4vw, 3.5rem);
	}

	/* Shrinks to the photograph's own width; never upscales it. */
	.elementor-element-57905ef > .elementor-container > .elementor-element-b3fe4a5 {
		width: auto !important;
		flex: 0 0 auto;
	}

	/* A comfortable measure for the copy, and no more. */
	.elementor-element-57905ef > .elementor-container > .elementor-element-4b34d79 {
		width: auto !important;
		flex: 0 1 30rem;
	}
}

/* --- About page ----------------------------------------------------------
 * (this stylesheet is enqueued site-wide, not only on the front page)
 */

/*
 * Decorative English watermarks.
 *
 * Seven absolutely-positioned heading widgets holding a single Latin word each,
 * laid directly over the Persian headline beside them so neither is readable:
 *
 *   About   — CEO, ABOUT US, ?WHY, CUSTOMERS, BLOG
 *   Front   — SWEET
 *   Contact — CONTACT
 *
 * None of these can be fixed by the translator, which is the obvious first
 * assumption. GTranslate translates *from* Persian *to* a target language, so
 * on the Persian pages no translation pass runs at all; and in every other
 * language the text is already English and passes through untouched. They are
 * decoration, not translatable content.
 *
 * Hidden rather than repositioned. Each says nothing the Persian heading next
 * to it does not already say, and a stray English heading on a Persian page is
 * noise in the outline for search and answer engines. Restoring any of them is
 * a one-line revert; done properly they would be repositioned in Elementor so
 * they sit behind the heading instead of on top of it.
 */
.elementor-element-2bcda5d,
.elementor-element-38f4a5d,
.elementor-element-70788bd,
.elementor-element-b682231,
.elementor-element-b288e19,
.elementor-element-245881c,
.elementor-element-7452b30 {
	display: none !important;
}