/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ==========================================================================
   Persian typography — Vazirmatn, self-hosted
   --------------------------------------------------------------------------
   Why: every WoodMart typography setting was "Manrope", a Latin-only font
   with no Persian glyphs, so all Persian text fell back to the browser
   default (usually Tahoma) and was never styled by the theme at all.

   Vazirmatn v33.003 — SIL Open Font License 1.1.
   https://github.com/rastikerdar/vazirmatn
   Self-hosted deliberately: Google Fonts is unreliable from inside Iran.
   ========================================================================== */

@font-face {
	font-family: "Vazirmatn";
	src: url("fonts/Vazirmatn-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Vazirmatn";
	src: url("fonts/Vazirmatn-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Vazirmatn";
	src: url("fonts/Vazirmatn-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Vazirmatn";
	src: url("fonts/Vazirmatn-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Vazirmatn";
	src: url("fonts/Vazirmatn-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* WoodMart drives all typography through these six custom properties.
   !important is required because the theme prints its own :root block from
   Theme Settings AFTER this stylesheet loads. */
:root {
	--wd-text-font: "Vazirmatn", Tahoma, Arial, sans-serif !important;
	--wd-title-font: "Vazirmatn", Tahoma, Arial, sans-serif !important;
	--wd-entities-title-font: "Vazirmatn", Tahoma, Arial, sans-serif !important;
	--wd-widget-title-font: "Vazirmatn", Tahoma, Arial, sans-serif !important;
	--wd-header-el-font: "Vazirmatn", Tahoma, Arial, sans-serif !important;
	--wd-alternative-font: "Vazirmatn", Tahoma, Arial, sans-serif !important;
}

/* Form controls do not inherit font-family from body by default. */
body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--wd-text-font);
}

/* Elementor and WooCommerce both ship their own font stacks. */
.elementor-widget-container,
.elementor-heading-title,
.woocommerce,
.woocommerce-page,
.wd-nav,
.widget,
h1, h2, h3, h4, h5, h6 {
	font-family: var(--wd-text-font);
}

/* Persian text renders with slightly tighter default line-height than Latin;
   nudge it back for readability. */
body {
	line-height: 1.8;
}

/* ==========================================================================
   Category description — collapsed by default
   --------------------------------------------------------------------------
   The description sits below the products (Theme Settings -> cat_desc_position
   = after) and exists for SEO, not for reading. Clamp it to a few lines with a
   toggle so it never pushes the page length out.
   ========================================================================== */

.term-description {
	position: relative;
	max-height: 7.5em;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.term-description.wd-desc-expanded {
	max-height: 400em;
}

/* Fade the cut-off edge. Hidden once expanded. */
.term-description:not(.wd-desc-expanded)::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3em;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--wd-main-bgcolor, #fff) 90%);
	pointer-events: none;
}

.wd-desc-toggle {
	display: inline-block;
	margin-top: 12px;
	padding: 6px 18px;
	border: 1px solid var(--wd-primary-color, #8cbc67);
	border-radius: 4px;
	background: transparent;
	color: var(--wd-primary-color, #8cbc67);
	font-family: var(--wd-text-font);
	font-size: 14px;
	line-height: 1.6;
	cursor: pointer;
}

.wd-desc-toggle:hover {
	background: var(--wd-primary-color, #8cbc67);
	color: #fff;
}

/* Footer (HTML block 579): the brand logo is green/red on transparent, so
   render it white on the green footer background. */
.wd-footer .elementor-579 .elementor-element-9945378 img {
	filter: brightness(0) invert(1);
}

/* ==========================================================================
   Hero slides (posts 400 / 426 / 434)
   --------------------------------------------------------------------------
   WoodMart's slider template gates its Elementor branch on
   woodmart_is_elementor_installed(), which is false while WPBakery is active
   (HANDOFF §18), so slides render from post_content. The slides are therefore
   written as plain HTML and styled here rather than through Elementor.
   Delete this block only if the slides are ever rebuilt in the Elementor editor.
   ========================================================================== */

.pg-slide {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	text-align: right;
}

.pg-slide-text {
	flex: 1 1 280px;
	min-width: 250px;
}

.pg-slide-title {
	margin: 0 0 12px;
	font-size: clamp(24px, 2.4vw, 36px);
	font-weight: 700;
	line-height: 1.45;
	color: #242424;
	text-wrap: balance;
}

.pg-slide-line {
	margin: 0 0 22px;
	max-width: 400px;
	font-size: 15px;
	line-height: 1.95;
	color: #5f6b55;
}

.pg-slide-media {
	flex: 0 0 190px;
	max-width: 190px;
}

.pg-slide-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* the slide sits in a ~700px column; below this the photo would squeeze the
   headline into two or three words per line, so it goes */
@media (max-width: 900px) {
	.pg-slide-media { display: none; }
	.pg-slide-line { max-width: none; }
}

@media (max-width: 768px) {
	.pg-slide-title { margin-bottom: 10px; }
	.pg-slide-line { font-size: 14px; line-height: 1.9; margin-bottom: 18px; }
}

/* ==========================================================================
   Price list table — [parsigharch_price_list]
   Rows are variations grouped under a product heading; every row is orderable,
   so the page works as an order form rather than a reference dead end.
   ========================================================================== */

.pg-pricelist-scroll {
	overflow-x: auto;
	border: 1px solid #e7ebe2;
	border-radius: 10px;
	-webkit-overflow-scrolling: touch;
}

.pg-pricelist-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	color: #555;
	background: #fff;
}

.pg-pricelist-table th {
	padding: 13px 16px;
	background: #f6f8f3;
	border-bottom: 1px solid #e7ebe2;
	font-size: 13px;
	font-weight: 600;
	color: #8a8a8a;
	text-align: right;
	white-space: nowrap;
}

.pg-pricelist-table td {
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
}

.pg-pricelist-table .pg-col-product { width: 260px; }
.pg-pricelist-table .pg-col-action  { text-align: left; white-space: nowrap; }

.pg-group td { background: #fcfdfb; padding-block: 14px; }

.pg-group-link {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
}

.pg-group-link img {
	width: 44px;
	height: 44px;
	border-radius: 7px;
	object-fit: cover;
	flex-shrink: 0;
}

.pg-group-text { display: flex; flex-direction: column; gap: 3px; }
.pg-group-name { font-size: 15px; font-weight: 600; color: #242424; }
.pg-group-cat  { font-size: 12px; color: #a4a4a4; }

.pg-pricelist-table .pg-price { font-size: 16px; font-weight: 700; color: #242424; white-space: nowrap; }
.pg-pricelist-table .pg-price del { font-size: 13px; font-weight: 400; color: #bdbdbd; }
.pg-pricelist-table .pg-perkg { font-size: 13px; color: #8a8a8a; white-space: nowrap; }
.pg-dash { color: #c4c4c4; }

.pg-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
	white-space: nowrap;
}

.pg-pill.pg-in  { background: #eaf3e2; color: #4a7c2f; }
.pg-pill.pg-out { background: #f2f2f2; color: #999; }

.pg-buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 18px;
	border-radius: 5px;
	background: #8cbc67;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.pg-buy:hover { background: #6f9b50; color: #fff; }

.pg-buy-ghost {
	background: #fff;
	color: #777;
	border: 1px solid #e0e0e0;
}

.pg-buy-ghost:hover { background: #f7f7f7; color: #555; }

/* Phones: the table becomes stacked cards — a 8-column table cannot be read
   at 390px, and horizontal scrolling hides the price, which is the point. */
@media (max-width: 768px) {
	.pg-pricelist-scroll { border: 0; border-radius: 0; overflow-x: visible; }
	.pg-pricelist-table, .pg-pricelist-table tbody, .pg-pricelist-table tr, .pg-pricelist-table td { display: block; width: 100%; }
	.pg-pricelist-table thead { display: none; }

	.pg-pricelist-table .pg-col-product { display: none; }

	.pg-group td {
		border: 1px solid #e7ebe2;
		border-radius: 10px 10px 0 0;
		border-bottom: 0;
		margin-top: 16px;
	}

	.pg-pricelist-table tr:not(.pg-group) {
		border: 1px solid #e7ebe2;
		border-top: 0;
		padding: 4px 0;
		background: #fff;
	}

	.pg-pricelist-table tr:not(.pg-group) td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		border-bottom: 1px solid #f5f5f5;
		padding: 9px 14px;
	}

	.pg-pricelist-table tr:not(.pg-group) td:last-child { border-bottom: 0; }

	.pg-pricelist-table td[data-label]::before {
		content: attr(data-label);
		font-size: 12px;
		color: #a4a4a4;
		flex-shrink: 0;
	}

	.pg-col-action { text-align: center; }
	.pg-buy { width: 100%; min-height: 44px; }
}

/* ==========================================================================
   Equal-height product cards
   --------------------------------------------------------------------------
   WoodMart lays the product loop out as a CSS grid with align-items:flex-start,
   so each card is only as tall as its own content: a long Persian title or a
   missing price leaves a short card and the row reads as ragged.
   Stretching the grid items is the fix — height:100% on the card alone does
   nothing while the grid is flex-start.
   Applies to the homepage grid and all three carousels.
   ========================================================================== */

.wd-products-element .products.wd-products,
.wd-products-element .wd-products.wd-grid-g {
	align-items: stretch;
}

.wd-products-element .wd-product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* the block under the image takes the slack so prices line up across the row */
.wd-products-element .wd-product .product-wrapper {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.wd-products-element .wd-product .product-element-top {
	flex-shrink: 0;
}

.wd-products-element .wd-product .price {
	margin-top: auto;
	padding-top: 6px;
}

/* Carousels: the track is flex but items keep their own height, so a short
   card leaves a gap. Stretch the item and let the card fill it. */
.wd-products-element .wd-carousel-wrap {
	align-items: stretch;
}

.wd-products-element .wd-carousel-item {
	display: flex;
	height: auto;
}

.wd-products-element .wd-carousel-item > .wd-product {
	width: 100%;
	height: auto;
}

/* Info box carousel: keep the icon modest and beside the copy, not a
   full-width block above it (the demo used large decorative PNGs). */
.elementor-widget-wd_infobox .info-svg-wrapper {
	width: 38px !important;
	height: 38px !important;
	flex-shrink: 0;
}

.elementor-widget-wd_infobox .info-svg-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Product photos vary between 3:4 portrait and ~3:2 landscape, so even with
   equal-height cards the titles landed on different lines. Pin a square image
   box and letterbox inside it — contain, not cover, so nothing is cropped. */
.wd-products-element .wd-product .product-image-link,
.wd-products-element .wd-product .product-element-top > a {
	display: block;
	aspect-ratio: 1 / 1;
	background: #fff;
	overflow: hidden;
}

.wd-products-element .wd-product .product-image-link img,
.wd-products-element .wd-product .product-element-top > a img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ==========================================================================
   Homepage section headings + info boxes
   --------------------------------------------------------------------------
   WoodMart renders the subtitle BEFORE the title in the DOM for both wd_title
   and wd_infobox, so every heading read "small grey line, then the heading".
   Reorder visually and give the headings the weight the design calls for.
   ========================================================================== */

.elementor-widget-wd_title .title-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.elementor-widget-wd_title .title-wrapper .title {
	order: 1;
	font-size: 24px;
	line-height: 1.5;
}

.elementor-widget-wd_title .title-wrapper .title-subtitle {
	order: 2;
	margin-top: 2px;
	margin-bottom: 0;
	font-size: 13px;
	color: #9a9a9a;
}

/* info boxes in the USP bar: title first, then the supporting line */
.elementor-widget-wd_infobox .info-box-content {
	display: flex;
	flex-direction: column;
}

.elementor-widget-wd_infobox .info-box-title {
	order: 1;
	margin-bottom: 2px;
	font-size: 15px;
	line-height: 1.6;
}

.elementor-widget-wd_infobox .info-box-subtitle {
	order: 2;
	margin-bottom: 0;
	font-size: 12.5px;
	line-height: 1.7;
	color: #9a9a9a;
}

.elementor-widget-wd_infobox .box-icon-wrapper {
	gap: 12px;
}

@media (max-width: 1024px) {
	.elementor-widget-wd_title .title-wrapper .title { font-size: 20px; }
}

@media (max-width: 768px) {
	.elementor-widget-wd_title .title-wrapper .title { font-size: 18px; }
}

/* Product cards: the loop sits on an off-white page with white cards, so
   without a hairline the grid read as floating text. */
/* Applied on the homepage widgets AND the shop/category archives, so a product
   card looks the same wherever it appears. #e0e2dd is a touch stronger than the
   near-invisible #ececec first used — the user asked for an edge they can
   actually see — and carries a slight green bias to sit with the brand neutrals
   rather than reading as flat grey. */
.wd-products-element .wd-product .product-wrapper,
.products .wd-product .product-wrapper {
	border: 1px solid #e5e7e2;
	border-radius: 10px;
	/* NO overflow:hidden here — it clipped the second half of variable-product
	   price ranges when they wrapped to a second line. Round the image box
	   instead, which is the only child that needs clipping. */
}

.wd-products-element .wd-product .product-element-top,
.products .wd-product .product-element-top {
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}

/* 1px is the thinnest CSS can draw at 1x, so on retina screens and phones
   (2x and up) drop to a true single device pixel — a genuinely finer line
   rather than just a paler one. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.wd-products-element .wd-product .product-wrapper,
	.products .wd-product .product-wrapper {
		border-width: 0.5px;
	}
}

/* a wrapped price range must not be cut off */
.wd-products-element .wd-product .price {
	overflow: visible;
	white-space: normal;
	line-height: 1.8;
}

/* WoodMart clamps .product-rating-price to one line (height ~21px,
   overflow:hidden) because it cross-fades rating and price on hover. A Persian
   variable-product range ("۱٬۹۴۷٬۴۲۰ تومان – ۱٬۱۰۴٬۸۴۰ تومان") wraps to two
   lines and the second half was being cut off, leaving a dangling dash.
   Let it grow; the cross-fade still works, it just has room. */
.wd-products-element .wd-product.wd-hover-base.has-stars:is(.purchasable, .product-type-external) .product-rating-price,
.wd-products-element .product-rating-price {
	height: auto;
	min-height: calc(var(--wd-text-font-size) * 1.4);
	overflow: visible;
}

/* That element normally cross-fades star-rating <-> price on hover, which is why
   WoodMart clamps it to one line. Unclamping it (above) made BOTH show at once,
   stacked, on the single product that has a rating — 1 card out of 52. The
   cross-fade is decorative and fights two-line Persian price ranges, so the
   rating is hidden in these homepage widgets. Drop this rule if real reviews
   start coming in and the ratings should be shown. */
.wd-products-element .wrapp-product-price .star-rating {
	display: none;
}

/* ==========================================================================
   Homepage SEO text — clamp + "مشاهده بیشتر" toggle
   --------------------------------------------------------------------------
   WoodMart's own collapsible container floats its button over the faded text
   and the copy kept running past it. Same clamp pattern as the category
   description instead (functions.php adds the button when it overflows).
   ========================================================================== */

.pg-seo-text {
	position: relative;
	/* Generous: at full container width the current 3-paragraph copy is ~200px,
	   so no clamp and no button. The toggle only appears if the copy grows —
	   functions.php adds it solely when the text actually overflows. */
	max-height: 340px;
	overflow: hidden;
	transition: max-height .35s ease;
}

.pg-seo-text::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 76px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%);
	pointer-events: none;
}

.pg-seo-text.pg-expanded {
	max-height: 3000px;
}

.pg-seo-text.pg-expanded::after {
	opacity: 0;
}

.pg-seo-toggle {
	display: block;
	margin: 16px auto 0;
	padding: 0 22px;
	height: 40px;
	border: 1px solid #e0e0e0;
	border-radius: 35px;
	background: #fff;
	color: #333;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.pg-seo-toggle:hover {
	border-color: #8cbc67;
	color: #4a7c2f;
}

/* ==========================================================================
   Mobile fixes (found by viewing the site at 390px, not by reading CSS)
   ========================================================================== */

/* Product titles were clamped to ONE line (max-height ~18.9px, overflow hidden),
   which cut the pack size off every Persian title — "قارچ دکمه ای بسته بندی
   ۱۰۰۰ گرمی" rendered as "قارچ دکمه ای بسته" on all four cards in a row, making
   them indistinguishable. Two lines restores the distinguishing part. */
@media (max-width: 768px) {
	.wd-product .wd-entities-title {
		max-height: none !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* The hero slide photo was hidden below 900px, but the approved mobile design
   keeps it. Show it again on phones as a short full-width band; it stays hidden
   only in the awkward 769-900px range where the column is too narrow to share. */
@media (max-width: 900px) and (min-width: 769px) {
	.pg-slide-media { display: none; }
}

@media (max-width: 768px) {
	.pg-slide {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.pg-slide-media {
		display: block;
		flex: 0 0 auto;
		max-width: none;
		order: 2;
	}

	.pg-slide-media img {
		height: 140px;
		object-fit: cover;
	}

	/* flex-basis becomes a HEIGHT once the slide stacks into a column, so the
	   row-layout `flex: 1 1 280px` was padding 280px of dead space under the
	   headline. Let the text be its natural height on phones. */
	.pg-slide-text {
		order: 1;
		flex: 0 0 auto;
		min-width: 0;
	}
}

/* ==========================================================================
   Mobile product page — buy controls above the description
   --------------------------------------------------------------------------
   WooCommerce puts the short description (priority 20) before the cart form
   (priority 30), so on a phone a wholesale buyer scrolled ~400px of prose
   before reaching the وزن selector and افزودن به سبد خرید.
   Reordered with flex `order` rather than re-hooking in PHP: the markup is
   identical for both, and LiteSpeed serves ONE cached copy to desktop and
   mobile (cache-mobile is off), so a server-side change would move it on
   desktop too. Desktop keeps WooCommerce's order.
   ========================================================================== */

@media (max-width: 768px) {
	.summary-inner {
		display: flex;
		flex-direction: column;
	}

	/* anything not named below keeps its relative position at the end */
	.summary-inner > * { order: 8; }

	.summary-inner > .single-breadcrumbs-wrapper { order: 1; }
	.summary-inner > .product_title { order: 2; }
	.summary-inner > .woocommerce-product-rating { order: 3; }
	.summary-inner > .price { order: 4; }
	.summary-inner > form.cart { order: 5; }
	.summary-inner > .wd-compare-btn { order: 6; }
	.summary-inner > .wd-wishlist-btn { order: 7; }

	/* the description now follows the buy controls */
	.summary-inner > .woocommerce-product-details__short-description {
		order: 9;
		margin-top: 22px;
		padding-top: 18px;
		border-top: 1px solid #ececec;
	}

	.summary-inner > .product_meta { order: 10; }
	.summary-inner > .social-share { order: 11; }
}

/* USP boxes on phones: at 2-up each box is ~162px, and an icon sitting beside
   the text leaves ~100px for it — "ارسال به سراسر کشور" wrapped to three lines.
   Stack the icon above the copy and centre it so the text gets the full width. */
@media (max-width: 768px) {
	/* .box-icon-wrapper is only the icon holder (display:block); the row layout
	   lives on .wd-info-box.box-icon-align-right, and WoodMart also caps the
	   icon side at max-width:50%. Both have to be undone to stack. */
	.elementor-widget-wd_infobox .wd-info-box.box-icon-align-right,
	.elementor-widget-wd_infobox .wd-info-box.box-icon-align-left {
		flex-direction: column;
		align-items: center;
		gap: 8px;
		text-align: center;
	}

	.elementor-widget-wd_infobox :is(.box-icon-align-left, .box-icon-align-right) .box-icon-wrapper {
		max-width: none;
	}

	.elementor-widget-wd_infobox .info-box-content {
		text-align: center;
		align-items: center;
		width: 100%;
	}

	.elementor-widget-wd_infobox .info-box-title {
		font-size: 13.5px;
		line-height: 1.55;
	}

	.elementor-widget-wd_infobox .info-box-subtitle {
		font-size: 11.5px;
		line-height: 1.6;
	}
}

/* ==========================================================================
   FAQ accordion (page 1105) + converted WPBakery elements
   --------------------------------------------------------------------------
   The FAQ was a [vc_tta_accordion]. It is now native <details>/<summary>, so
   it needs no JavaScript and survives any future builder change. Styled to
   match what WPBakery rendered.
   ========================================================================== */

.pg-faq {
	border: 1px solid #ececec;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.pg-faq-item + .pg-faq-item {
	border-top: 1px solid #ececec;
}

.pg-faq-q {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
	font-size: 15px;
	font-weight: 600;
	color: #333;
	background: #fafafa;
	transition: background .2s ease;
}

.pg-faq-q::-webkit-details-marker { display: none; }

.pg-faq-q::before {
	content: "+";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #8cbc67;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.pg-faq-item[open] > .pg-faq-q { background: #fff; }
.pg-faq-item[open] > .pg-faq-q::before { content: "\2013"; }

.pg-faq-q:hover { background: #f4f7f0; }

.pg-faq-a {
	padding: 4px 20px 20px;
	line-height: 2;
	color: #666;
}

.pg-faq-a :last-child { margin-bottom: 0; }

/* converted WPBakery pieces */
.pg-img { margin: 0 0 18px; }
.pg-img img { max-width: 100%; height: auto; }
.pg-btn-wrap { margin: 18px 0; }
.pg-sep { border: 0; border-top: 1px solid #ececec; margin: 26px 0; }

.pg-callout {
	padding: 14px 18px;
	margin: 18px 0;
	border-inline-start: 3px solid #8cbc67;
	background: #f6f8f3;
	border-radius: 6px;
}

/* ==========================================================================
   Homepage banner legibility
   --------------------------------------------------------------------------
   With WPBakery gone WoodMart switched from wpb-el-banner.css to el-banner.css,
   which sizes the image to cover the card. On the ظروف banner that put dark
   text straight onto a saturated blue photograph.
   A soft light scrim sits behind the text block only: near-invisible on the
   flat-colour placeholders, and it keeps the copy readable over ANY photo that
   replaces them later.
   ========================================================================== */

/* NOTE: .wrapper-content-banner carries WoodMart's .wd-fill (position:absolute)
   so it overlays the image. Do NOT set position:relative on it — that drops it
   out of the overlay and stacks the text UNDER the photo (banner grew 320->479px).
   It is already a positioned ancestor, so ::before anchors to it as-is. */
.elementor-element-53513fa .promo-banner .wrapper-content-banner::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 62%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .72) 55%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
	z-index: 0;
}

.elementor-element-53513fa .promo-banner .content-banner {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Converted WPBakery buttons
   --------------------------------------------------------------------------
   [vc_btn] became <a class="btn btn-color-primary …> in post content. WoodMart
   only enqueues its button CSS part when a button WIDGET is on the page, so a
   button inside post_content falls back to a grey, square, unstyled control
   (measured: #f3f3f3 background, 0 radius). These rules give the 93 converted
   buttons the brand appearance without depending on that conditional load.
   ========================================================================== */

/* ⚠️ Must NOT match WoodMart's own non-filled button styles. `btn-style-link`
   (and `btn-style-bordered`) are transparent by design; WoodMart's background
   wins over the `background` below while the `color: #fff` here still applies,
   which renders white text on the white page — the section carousels' "مشاهده
   همه" buttons were invisible this way. Keep these :not() guards. */
.entry-content a.btn.btn-color-primary:not(.btn-style-link):not(.btn-style-bordered),
.pg-btn-wrap a.btn.btn-color-primary:not(.btn-style-link):not(.btn-style-bordered),
.woocommerce-Tabs-panel a.btn.btn-color-primary:not(.btn-style-link):not(.btn-style-bordered),
.pg-faq-a a.btn.btn-color-primary:not(.btn-style-link):not(.btn-style-bordered) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 24px;
	border-radius: 35px;
	background: #8cbc67;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background .2s ease;
}

.entry-content a.btn.btn-color-primary:not(.btn-style-link):not(.btn-style-bordered):hover,
.pg-btn-wrap a.btn.btn-color-primary:not(.btn-style-link):not(.btn-style-bordered):hover,
.woocommerce-Tabs-panel a.btn.btn-color-primary:not(.btn-style-link):not(.btn-style-bordered):hover,
.pg-faq-a a.btn.btn-color-primary:not(.btn-style-link):not(.btn-style-bordered):hover {
	background: #6f9b50;
	color: #fff;
}

/* Link-style buttons (the "مشاهده همه" beside each homepage section heading).
   Transparent by design, so they take the brand colour as TEXT, not as a fill. */
a.btn.btn-style-link,
a.btn.btn-style-link.btn-color-primary {
	background: transparent;
	color: #557f39;
	font-weight: 600;
	/* A link button carries no fill, so the inherited 24px side padding only
	   squeezed the label — "مشاهده همه" wrapped onto two lines in a 95px box. */
	padding: 0;
	white-space: nowrap;
}

a.btn.btn-style-link:hover,
a.btn.btn-style-link:focus-visible,
a.btn.btn-style-link.btn-color-primary:hover,
a.btn.btn-style-link.btn-color-primary:focus-visible {
	background: transparent;
	color: #46692e;
}

/* several buttons in a row (e.g. the social links on تماس با ما) */
.pg-btn-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ==========================================================================
   «قیمت امروز» strip — [parsigharch_today_prices]
   --------------------------------------------------------------------------
   Built to the approved mockup. A stock product grid leads with a big photo;
   this leads with the NUMBER, which is what a wholesale buyer is scanning for.
   Values here are the mockup's: #f6f8f3 band, #e7ebe2 card border, 74px thumb,
   20px grid gap.
   ========================================================================== */

.pg-today {
	background: #f6f8f3;
	padding: 38px 0;
	margin-block: 38px 0;
}

.pg-today-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.pg-today-headings {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.pg-today-title {
	font-size: 24px;
	font-weight: 700;
	color: #242424;
	line-height: 1.5;
}

.pg-today-sub {
	font-size: 13px;
	color: #9a9a9a;
}

.pg-today-more {
	font-size: 14px;
	font-weight: 500;
	color: #333;
	border-bottom: 1px solid #8cbc67;
	padding-bottom: 2px;
	white-space: nowrap;
}

.pg-today-more:hover {
	color: #6f9b50;
	border-bottom-color: #6f9b50;
}

.pg-today-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.pg-today-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	background: #fff;
	border: 1px solid #e7ebe2;
	border-radius: 10px;
}

.pg-today-media { flex-shrink: 0; line-height: 0; }

.pg-today-thumb {
	width: 74px;
	height: 74px;
	border-radius: 8px;
	object-fit: cover;
	display: block;
}

.pg-today-thumb-empty { background: #f2f4ef; }

.pg-today-body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex-grow: 1;
	min-width: 0;
}

.pg-today-name {
	font-size: 14px;
	font-weight: 600;
	color: #333;
	line-height: 1.6;
}

.pg-today-name:hover { color: #6f9b50; }

.pg-today-perkg {
	font-size: 12px;
	color: #a4a4a4;
}

.pg-today-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 2px;
}

.pg-today-price {
	font-size: 16px;
	font-weight: 700;
	color: #8cbc67;
	line-height: 1.5;
}

/* WooCommerce wraps the amount in its own markup; keep it on one line */
.pg-today-price .woocommerce-Price-amount { white-space: nowrap; }
.pg-today-callus { font-size: 14px; font-weight: 600; color: #8a8a8a; }

.pg-today-btn {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 5px;
	background: #8cbc67;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease;
}

.pg-today-btn:hover { background: #6f9b50; }

@media (max-width: 1024px) {
	.pg-today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.pg-today { padding: 26px 0; }
	.pg-today-grid { grid-template-columns: 1fr; gap: 12px; }
	.pg-today-title { font-size: 20px; }
	.pg-today-card { padding: 12px; gap: 12px; }
	.pg-today-thumb { width: 62px; height: 62px; }
}

/* ==========================================================================
   Section heading rows — title + «مشاهده همه»
   --------------------------------------------------------------------------
   WoodMart tags every wd_title widget `wd-width-100`, and its own stylesheet
   carries `:where(.e-con) .wd-width-100 { width: 100% }`. Inside these flex
   rows that made the title claim the ENTIRE row (1450px of 1450px) and left the
   sibling button widget at width:0. The button then overflowed its own zero
   box — rendering below the heading instead of beside it, and sliding fully
   off-screen on narrower viewports, which is why it appeared to vanish.

   Fix: the title takes the remaining space, the button sizes to its content.
   `:where()` contributes zero specificity, so a plain class selector wins.
   Scoped to DIRECT children of a flex row, which on this build is only the
   three section headings.
   ========================================================================== */

.e-con-inner > .elementor-widget-wd_title.wd-width-100 {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}

.e-con-inner > .elementor-widget-wd_button {
	width: auto;
	flex: 0 0 auto;
	/* The row is align-items:flex-end, which left the button level with the
	   SUBTITLE rather than the heading. The mockup centres it against the
	   title block; align-self does that without touching the row's own
	   alignment, which other containers rely on. */
	align-self: center;
}

/* ==========================================================================
   Touch hit areas
   --------------------------------------------------------------------------
   Two inline controls render ~18px tall, under the 24px minimum for touch:
   «مشاهده همه» beside each section heading, and «نمایش فیلترها» on shop
   archives. Both are text links with no padding, so the hit area is just the
   line box. Padding is added on the BLOCK axis only, and both sit in centred
   flex rows, so the text does not move — only the tappable area grows.
   Keyed on viewport width rather than `pointer: coarse` so the rule is
   verifiable in a resized frame; a roomier hit area on a narrow desktop window
   costs nothing anyway.
   ========================================================================== */

@media (max-width: 768px) {
	.e-con-inner > .elementor-widget-wd_button a.btn.btn-style-link {
		padding-block: 9px;
	}

	.wd-shop-tools .wd-show-sidebar-btn > a {
		padding-block: 9px;
	}
}

/* ==========================================================================
   Carousel arrows beside «مشاهده همه»  (built by parsigharch_carousel_nav)
   --------------------------------------------------------------------------
   Mockup values: 40px squares, 10px radius, 8px between them, 14px from the
   link. One outlined, one filled — the filled one is "next", the commoner
   action. WoodMart's own arrows stay in place and keep driving the carousel;
   these forward the click to them.
   ========================================================================== */

.elementor-widget-wd_button .wd-button-wrapper {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pg-cnav-group {
	display: flex;
	gap: 8px;
}

.pg-cnav {
	width: 40px;
	height: 40px;
	/* box-sizing for the 1px border, and min-height to beat WoodMart's base
	   `button` rule, which imposes its own 42px minimum */
	box-sizing: border-box;
	min-height: 0;
	flex-shrink: 0;
	padding: 0;
	border-radius: 10px;
	border: 1px solid #e3e3e3;
	background: transparent;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}

.pg-cnav-next {
	border-color: #8cbc67;
	background: #8cbc67;
	color: #fff;
}

.pg-cnav-prev:hover:not(.pg-cnav-off) { border-color: #8cbc67; color: #6f9b50; }
.pg-cnav-next:hover:not(.pg-cnav-off) { background: #6f9b50; border-color: #6f9b50; }

.pg-cnav:focus-visible {
	outline: 2px solid #6f9b50;
	outline-offset: 2px;
}

/* Mirrors WoodMart's own wd-disabled state — kept visible but clearly inert,
   so the control does not appear and vanish as you page through. */
.pg-cnav-off {
	opacity: .4;
	cursor: default;
	pointer-events: none;
}

/* On phones the carousels are swiped, and WoodMart parks its own arrows
   off-screen there for the same reason. Two 40px buttons in the heading would
   only crowd the row. */
@media (max-width: 768px) {
	.pg-cnav-group { display: none; }
}

/* ==========================================================================
   تماس با ما — contact page (791)
   --------------------------------------------------------------------------
   The page was a column of centred <h3>s left over from the WPBakery removal.
   Rebuilt as scannable cards: each channel is its own target, the phone and
   email cards are the whole tap area, and the address gets the room it needs.
   ========================================================================== */

.pg-contact { max-width: 1000px; }

.pg-contact-lead {
	font-size: 16px;
	line-height: 2;
	color: #555;
	margin: 0 0 26px;
	max-width: 70ch;
}

.pg-contact-grid {
	display: grid;
	/* three short cards on one row, the long address spanning beneath them —
	   a 2-col grid left an empty cell next to the opening hours */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 38px;
}

@media (max-width: 1024px) {
	.pg-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pg-contact-card {
	display: block;
	padding: 22px;
	background: #fff;
	border: 1px solid #e7ebe2;
	border-radius: 12px;
	color: inherit;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* the address needs a full row — it is a long single line */
.pg-contact-card-wide { grid-column: 1 / -1; }

a.pg-contact-card:hover {
	border-color: #8cbc67;
	box-shadow: 0 6px 20px -12px rgba(60, 90, 40, .45);
	transform: translateY(-1px);
	color: inherit;
}

.pg-contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
	border-radius: 10px;
	background: #f1f6ec;
	color: #6f9b50;
}

.pg-contact-icon svg { width: 21px; height: 21px; }

.pg-contact-label {
	display: block;
	font-size: 13px;
	color: #9a9a9a;
	margin-bottom: 5px;
}

.pg-contact-value {
	display: block;
	font-size: 17px;
	font-weight: 600;
	color: #242424;
	line-height: 1.85;
}

.pg-contact-note {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: #a4a4a4;
}

/* phone + email read left-to-right even inside the RTL page */
.pg-ltr { direction: ltr; unicode-bidi: isolate; text-align: right; }

.pg-contact-h {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 700;
	color: #242424;
}

/* ---- social ---- */
.pg-social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 38px;
}

.pg-social-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 10px;
	border: 1px solid #e7ebe2;
	background: #fff;
	font-size: 14.5px;
	font-weight: 600;
	color: #333;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.pg-social-icon { display: flex; }
.pg-social-icon svg { width: 19px; height: 19px; }

/* each network keeps its own colour so it is recognisable at a glance;
   the fill only arrives on hover so the row stays calm at rest */
.pg-social-wa .pg-social-icon { color: #1da851; }
.pg-social-tg .pg-social-icon { color: #1c8fc4; }
.pg-social-ig .pg-social-icon { color: #c13584; }

.pg-social-wa:hover { background: #1da851; border-color: #1da851; color: #fff; }
.pg-social-tg:hover { background: #1c8fc4; border-color: #1c8fc4; color: #fff; }
.pg-social-ig:hover { background: #c13584; border-color: #c13584; color: #fff; }
.pg-social-btn:hover .pg-social-icon { color: #fff; }

/* ---- map ---- */
.pg-map {
	position: relative;
	aspect-ratio: 16 / 7;
	max-width: 100%;
	margin-bottom: 38px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #e7ebe2;
}

.pg-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.pg-contact-about {
	font-size: 15px;
	line-height: 2.1;
	color: #555;
	text-align: justify;
	max-width: 80ch;
}

@media (max-width: 768px) {
	.pg-contact-grid { grid-template-columns: 1fr; gap: 12px; }
	.pg-contact-card { padding: 18px; }
	.pg-contact-value { font-size: 16px; }
	.pg-map { aspect-ratio: 4 / 3; }
	.pg-social-btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   Reading measure on the text-only policy pages
   --------------------------------------------------------------------------
   Dropping the blog sidebar let these pages run the full 1450px content width,
   which measured ~193 characters per line — about three times a comfortable
   measure. Full width is right for the layout (the sidebar was irrelevant blog
   categories); the PROSE still needs a column.

   `ch` keeps it font-relative. The block sits at the inline start, which in RTL
   is the right edge — the natural place for the eye to begin.

   Pages: 1657 درباره ما · 1697 شرایط و ضوابط · 1709 روش های پرداخت ·
          1791 حریم خصوصی · 1105 سوالات متداول
   Not 791 (its .pg-contact sets its own width) and not 1793 (Elementor).
   ========================================================================== */

body.page-id-1657 .entry-content,
body.page-id-1697 .entry-content,
body.page-id-1709 .entry-content,
body.page-id-1791 .entry-content,
body.page-id-1105 .entry-content {
	max-width: 80ch;
}

/* headings may run a little wider than the body copy without hurting */
body.page-id-1657 .entry-content h2,
body.page-id-1697 .entry-content h2,
body.page-id-1709 .entry-content h2,
body.page-id-1791 .entry-content h2,
body.page-id-1105 .entry-content h2 {
	max-width: none;
}