/*
 * Single product page, Figma «Product Page» (250:11907). The page is WoodMart's own Elementor
 * single-product layout (post 1055, every widget native: breadcrumb, prev/next nav, gallery,
 * title, stock, add-to-cart, wishlist, social share, attributes table, reviews, related
 * carousel) — this file restyles it, it does not replace it. The structural move (specs table
 * up next to the gallery, reviews into the description column, a related-products carousel
 * added) is in the Elementor data itself; see Product.php's docblock and
 * wp-content/mu-plugins/araz-home/dev/product-page-migration.php for how that was done and how to repeat it live.
 *
 * Every number below is from get_design_context on the frame (1920 design, content box 1280):
 * toolbar 255:14282 (56 high), row 1 = gallery 660 + gap 16 + info card 604 (493 high),
 * row 2 = description/reviews 868 + gap 12 + sticky recap 400, related carousel 255:15150.
 *
 * Scoped to body.single-product. Sections: 0 page frame, 1 toolbar, 2 gallery, 3 info card
 * (title/stock/add-to-cart), 4 specs table, 5 share row, 6 sticky recap card, 7 description +
 * reviews, 8 related carousel.
 */

/* The design sets numerals and the data rows in IRANSansWeb(FaNum); the site's own IRANSansX is that FaNum build
   (ASCII digits drawn as Farsi digits, the text itself stays copyable Latin). */
body.single-product {
	--ah-font-num: 'IRANSansx', var(--ah-font);
}

/* ============================================================== 0. page frame: a 1280 content box, no card padding from the theme */
body.single-product main.wd-content-layout.container {
	max-width: none;
	padding: 0;
}

/* the white band holding toolbar + row 1 (Elementor stretched container 3e3eea0). Elementor gives it a -40px top
   margin and 15px side padding and lets the children run 1370 wide; the design's box is 1280 centred. */
body.single-product .elementor-element-3e3eea0 {
	margin: 0 !important;
	padding: 0 16px 24px !important;
}

body.single-product .elementor-element-3e3eea0 > .e-con-inner {
	width: 100%;
	max-width: 1280px !important;
	margin-inline: auto;
	padding: 0 !important;
	gap: 10px !important;
}

/* ============================================================== 1. toolbar (255:14282): arrows + «دیگر محصولات:» on the left, breadcrumb on the right */
body.single-product .elementor-element-2fe7f29 {
	flex-direction: row !important;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border-radius: 16px;
	padding: 8px 0 !important;
	min-height: 56px;
	margin: 0 !important;
	gap: 8px;
}

body.single-product .wd-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-inline-end: 16px;
	color: var(--ah-purple);
	font: 400 16px/normal var(--ah-font);
}

body.single-product .wd-breadcrumbs a,
body.single-product .wd-breadcrumbs .wd-delimiter {
	margin: 0;
	color: var(--ah-purple);
	font: 400 16px/normal var(--ah-font);
	text-decoration: none;
}

body.single-product .wd-breadcrumbs .wd-last {
	color: var(--ah-purple);
	font: 700 16px/normal var(--ah-font);
}

/* the design has no «خانه» crumb */
body.single-product .wd-breadcrumbs > a:first-child,
body.single-product .wd-breadcrumbs > a:first-child + .wd-delimiter {
	display: none;
}

/* visual order, left to right: ‹  ▦  ›  «دیگر محصولات:». In this RTL page the first flex item is the rightmost. */
body.single-product .wd-products-nav {
	display: flex;
	align-items: center;
	gap: 0;
	padding-inline-start: 0;
	margin: 0;
}

body.single-product .wd-products-nav::before {
	content: 'دیگر محصولات:';
	order: 0;
	margin-left: 8px; /* 8 px between the three buttons and the label (I255:14282;252:13497) */
	color: var(--ah-text2);
	font: 400 16px/normal var(--ah-font);
	white-space: nowrap;
}

body.single-product .wd-products-nav > .wd-event-hover:first-child { order: 1; }
body.single-product .wd-products-nav > .wd-btn-back { order: 2; }
body.single-product .wd-products-nav > .wd-event-hover:last-child { order: 3; }

/* 40 px hit area, 24 px glyph drawn as a mask so one file serves both arrows */
body.single-product .wd-product-nav-btn {
	display: block;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border-radius: 24px;
	background: var(--ah-purple); /* the design's glyphs are #5b4ecd */
	box-shadow: none;
	-webkit-mask: url('../icons/product/nav-chevron-left.svg') center / 24px no-repeat;
	mask: url('../icons/product/nav-chevron-left.svg') center / 24px no-repeat;
}

body.single-product .wd-product-nav-btn:hover {
	opacity: .7;
}

body.single-product .wd-product-nav-btn::before,
body.single-product .wd-product-nav-btn::after {
	content: none;
}

body.single-product .wd-btn-prev {
	transform: scaleX(-1);
}

body.single-product .wd-btn-back {
	-webkit-mask-image: url('../icons/product/nav-grid.svg');
	mask-image: url('../icons/product/nav-grid.svg');
}

body.single-product .wd-btn-back span {
	font-size: 0;
}

/* the hover preview cards stay as a bonus (richer than the design, not shown by default) */
body.single-product .wd-products-nav .wd-dropdown {
	z-index: 20;
}

/* ============================================================== row 1: gallery 660 + gap 16 + info card 604 */
body.single-product .elementor-element-c7c2108 {
	padding: 0 !important;
}

/* Elementor's boxed containers lay their children out in an inner box, which carries its own 20 px gap */
body.single-product .elementor-element-c7c2108 > .e-con-inner {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	justify-content: flex-start;
	gap: 16px !important;
	max-width: none !important;
	padding: 0 !important;
}

body.single-product .elementor-element-a4e70a8 {
	position: relative;
	flex: 0 0 660px !important;
	width: 660px !important;
	max-width: 660px;
	padding: 0 !important;
}

body.single-product .elementor-element-6ae2d25 {
	position: relative;
	flex: 0 0 604px !important;
	width: 604px !important;
	max-width: 604px;
	min-height: 493px;
	padding: 16px !important;
	gap: 0 !important;
	background: #fff;
	border-radius: 8px;
	align-items: stretch;
}

/* ============================================================== 2. gallery (252:13619): 493 square main + 159 thumbs, 8 gap */
body.single-product .woocommerce-product-gallery {
	display: flex;
	flex-direction: row; /* WoodMart flips this widget itself: `row` puts the thumbs on the physical right, as designed */
	align-items: flex-start;
	gap: 8px;
	width: 660px;
	max-width: 100%;
	overflow: visible;
}

body.single-product .woocommerce-product-gallery .wd-gallery-images {
	position: relative;
	flex: 0 0 493px;
	width: 493px;
	height: 493px;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
}

body.single-product .woocommerce-product-gallery .wd-gallery-images .wd-carousel-inner,
body.single-product .woocommerce-product-gallery .wd-gallery-images .wd-carousel,
body.single-product .woocommerce-product-gallery .wd-gallery-images .wd-carousel-wrap,
body.single-product .woocommerce-product-gallery .wd-gallery-images .wd-carousel-item,
body.single-product .woocommerce-product-gallery .wd-gallery-images figure,
body.single-product .woocommerce-product-gallery .wd-gallery-images figure a {
	height: 100%;
}

body.single-product .woocommerce-product-gallery .wd-gallery-images figure a {
	display: flex;
	align-items: center;
	justify-content: center;
}

body.single-product .woocommerce-product-gallery .wd-gallery-images img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* the theme rounds every picture by --wd-brd-radius (10 px on live and staging): inside the 8 px boxes that left a
   second, wider curve at each corner (#83). The boxes clip: main picture 252:13735 (radius 8 = the box), thumbnails
   252:13737 (8, with the 1 px stroke inside the box). */
body.single-product .woocommerce-product-gallery .wd-gallery-images figure,
body.single-product .woocommerce-product-gallery .wd-gallery-images figure a,
body.single-product .woocommerce-product-gallery .wd-gallery-images img,
body.single-product .woocommerce-product-gallery .wd-gallery-thumb img {
	border-radius: 0;
}

/* a product with one picture has no thumbnail column: the picture takes the whole 660 so the overlays stay on it */
body.single-product .woocommerce-product-gallery:not(.wd-has-thumb) .wd-gallery-images {
	flex: 1 1 100%;
	width: 100%;
}

/* thumbnails: three 159 squares, 8 gap (3 x 159 + 2 x 8 = 493) */
body.single-product .woocommerce-product-gallery .wd-gallery-thumb {
	flex: 0 0 159px;
	width: 159px;
	height: 493px;
	margin: 0;
	/* three fit exactly; a product with more pictures scrolls this column instead of WoodMart's own slide transform */
	overflow: hidden auto;
	scrollbar-width: none;
}

body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-inner,
body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel {
	height: 100%;
}

body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	transform: none !important;
}

body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item {
	flex: 0 0 159px;
	width: 159px !important;
	height: 159px;
	padding: 0;
	border: 1px solid var(--ah-border);
	border-radius: 8px;
	overflow: hidden;
	box-sizing: border-box;
	background: #fff;
}

body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item {
	opacity: 1 !important; /* the design shows every thumbnail at full strength; the current one gets the lavender border */
}

body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item.wd-active,
body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item.wd-thumb-active {
	border-color: var(--ah-lav-line);
}

body.single-product .woocommerce-product-gallery .wd-gallery-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-nav-arrows,
body.single-product .woocommerce-product-gallery .wd-gallery-images .wd-nav-arrows {
	display: none;
}

/* the three 34 px overlays on the main picture: zoom bottom-right, bookmark top-left, «ویژه» top-right (all 16 px in) */
body.single-product .wd-show-product-gallery-wrap {
	position: absolute;
	bottom: 16px;
	right: 16px;
	left: auto;
	z-index: 5;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
}

body.single-product .wd-show-product-gallery-wrap .woodmart-show-product-gallery {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	min-width: 0;
	height: 34px;
	padding: 4px;
	gap: 0;
	background: #fff;
	border: 1px solid var(--ah-lav-line);
	border-radius: 12px;
	box-sizing: border-box;
}

body.single-product .wd-show-product-gallery-wrap .wd-action-icon {
	width: 24px;
	height: 24px;
	background: url('../icons/product/zoom.svg') center / 24px no-repeat;
}

body.single-product .wd-show-product-gallery-wrap .wd-action-icon::before {
	content: none;
}

body.single-product .wd-show-product-gallery-wrap .wd-action-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* «ویژه» badge (252:13819; Product.php puts it inside .wd-gallery-images when the product is featured, so the 16 px are
   measured from the main picture's top right corner, not from the widget that also holds the thumbnail column) */
body.single-product .ah-featured-badge {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 5;
	padding: 4px 8px;
	border-radius: 16px;
	background: #ff5454;
	color: #fff;
	font: 500 12px/normal var(--ah-font);
}

/* WoodMart's own «ویژه» label (its hot label for a featured product, .product-labels .featured) sits on the main picture's
   top-left corner, over the wishlist button (252:13813); the frame has one badge, ours above (252:13819). Seen on staging and
   on a local stack, 2026-10-18. */
body.single-product .woocommerce-product-gallery .product-labels .featured {
	display: none;
}

/* the wishlist button: overlaid on the main picture's top-left corner (Figma 252:13813), moved there out of the info column */
body.single-product .elementor-element-a4e70a8 .elementor-element-fbbd4f6 {
	position: absolute;
	top: 16px;
	left: 16px;
	right: auto;
	z-index: 6;
	width: auto;
	margin: 0;
	padding: 0;
}

body.single-product .wd-single-wishlist-btn .wd-wishlist-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 4px;
	background: #fff;
	border: 1px solid var(--ah-lav-line);
	border-radius: 12px;
	box-sizing: border-box;
}

body.single-product .wd-single-wishlist-btn .wd-action-icon {
	width: 24px;
	height: 24px;
	background: url('../icons/product/bookmark.svg') center / 24px no-repeat;
}

body.single-product .wd-single-wishlist-btn .wd-action-icon::before {
	content: none;
}

body.single-product .wd-single-wishlist-btn.wd-active .wd-action-icon,
body.single-product .wd-single-wishlist-btn .wd-wishlist-btn.wd-active .wd-action-icon {
	background-image: url('../icons/bookmark-fill.svg');
}

body.single-product .wd-single-wishlist-btn .wd-action-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* ============================================================== 3. info card (252:13667): title / stock / add-to-cart */
body.single-product .product_title.entry-title {
	margin: 0;
	padding: 0 0 0 8px; /* the design's 8 px is on the physical left */
	font: 700 32px/50px var(--ah-font) !important; /* the widget's own typography setting (28 px) is more specific; Figma "normal" for Vazirmatn 32 = a 50 px line box (252:13823) */
	color: var(--ah-text);
	text-align: start;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* SKU meta row, price and the native star-rating row duplicate what the specs table and reviews already show */
body.single-product .elementor-element-fec49a5,
body.single-product .elementor-element-ce05bd9,
body.single-product .elementor-element-308ab41 {
	display: none !important;
}

/* stock status (Product.php injects it after the title; the native stock-status widget renders nothing
   when the add-to-cart widget's own "enable_stock_status" option is off, which it is here).
   The design puts the check icon on the RIGHT of the text. */
body.single-product .ah-stock {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
	margin: 4px 0 8px;
	padding: 0 0 0 8px;
	font: 500 12px/normal var(--ah-font);
}

body.single-product .ah-stock.is-in {
	color: var(--ah-teal2);
}

body.single-product .ah-stock.is-out {
	color: #ff9897;
}

body.single-product .ah-stock .ah-ico {
	width: 24px;
	height: 24px;
}

/* add-to-cart row (252:13837): the button + stepper group (393:12974: button 40 high, 12 gap, stepper) and, for a viewer who
   is shown prices, the list price (393:12970) at the other end of the row, space-between. Product.php prints the price
   before the form, so it is the first (= rightmost) item; everybody else gets the group alone, where it was. */
body.single-product .elementor-element-74ce333 {
	margin: 0 0 20px !important;
}

body.single-product .elementor-element-74ce333 > .elementor-widget-container {
	display: flex;
	flex-wrap: wrap; /* INTERIM below the 604 px card (no phone frame): the price takes a line of its own when the row is short */
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

body.single-product .wd-single-add-cart {
	margin: 0;
}

body.single-product .wd-single-add-cart form.cart {
	display: flex;
	flex-wrap: nowrap;
	align-items: center; /* 393:12974 */
	justify-content: flex-start;
	gap: 12px; /* 393:12974 */
	margin: 0;
}

/* the price (393:12970): bold 32 on a 36 px line, text/primary, right-aligned; the amount's size is price.css's rule for
   WoodMart's price widget, which this markup shares (.wd-single-price .price) */
body.single-product .ah-atc-price {
	flex: 0 1 auto;
	margin: 0;
	padding: 0;
}

body.single-product .ah-atc-price .price {
	display: block;
	margin: 0;
	padding: 0;
	font: 700 32px/36px var(--ah-font);
	color: var(--ah-text);
	text-align: right;
	white-space: nowrap;
}

body.single-product .ah-atc-price .araz-price {
	align-items: flex-start;
	line-height: 36px;
}

body.single-product .wd-single-add-cart .single_add_to_cart_button {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: auto;
	min-width: 0;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 8px 16px;
	background: var(--ah-purple) !important;
	color: #fff !important;
	border: 0;
	border-radius: 12px;
	font: 500 16px/24px var(--ah-font);
	text-transform: none !important;
	box-shadow: none !important;
	white-space: nowrap;
}

body.single-product .wd-single-add-cart .single_add_to_cart_button::before {
	content: '';
	position: static;
	flex: 0 0 24px;
	opacity: 1;
	transform: none;
	width: 24px;
	height: 24px;
	background: url('../icons/bag.svg') center / 24px no-repeat;
	filter: brightness(0) invert(1);
}

body.single-product .wd-single-add-cart .single_add_to_cart_button::after {
	content: none;
}

/* stepper (252:13838): ⊕  [12]  ⊖, 4 gap; the value box is a 42 high outlined chip */
body.single-product .wd-single-add-cart .quantity {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	width: auto;
	height: 42px;
	border: 0;
	background: none;
}

body.single-product .wd-single-add-cart .quantity .qty {
	width: 39px; /* 252:13840 with «12» (12 + 13 + 12 and the stroke); browsers with field-sizing size it from the number instead (below) */
	min-width: 24px; /* 252:13840 */
	height: 42px;
	margin: 0;
	padding: 8px 12px; /* 252:13840 */
	border: 1px solid var(--ah-lav-line);
	border-radius: 8px;
	background: #fff;
	text-align: center;
	color: var(--ah-text);
	font: 400 16px/24px var(--ah-font-num);
	box-shadow: none;
	-moz-appearance: textfield;
}

@supports (field-sizing: content) {
	body.single-product .wd-single-add-cart .quantity .qty {
		width: auto;
		field-sizing: content;
	}
}

body.single-product .wd-single-add-cart .quantity .plus,
body.single-product .wd-single-add-cart .quantity .minus {
	width: 24px;
	height: 24px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px;
	box-shadow: none;
	font-size: 0;
	order: 0;
}

body.single-product .wd-single-add-cart .quantity .plus::before,
body.single-product .wd-single-add-cart .quantity .minus::before,
body.single-product .wd-single-add-cart .quantity .plus::after,
body.single-product .wd-single-add-cart .quantity .minus::after {
	content: none;
}

body.single-product .wd-single-add-cart .quantity .plus {
	background-image: url('../icons/basket/plus-active.svg');
}

body.single-product .wd-single-add-cart .quantity .minus {
	background-image: url('../icons/basket/minus-active.svg');
}

/* ============================================================== 4. specs table «مشخصات فنی» (252:13673): label 200 + value, 42 high rows */
body.single-product .elementor-element-79fc427 {
	margin: 0 0 8px !important;
	text-align: start;
}

body.single-product .elementor-element-79fc427 .title-wrapper,
body.single-product .elementor-element-2bae888 .title-wrapper {
	margin: 0;
	text-align: right;
}

body.single-product .elementor-element-79fc427 .woodmart-title-container,
body.single-product .elementor-element-79fc427 .title {
	margin: 0;
	color: var(--ah-purple);
	font: 700 16px/32px var(--ah-font);
	text-align: start;
}

body.single-product .elementor-element-19275bc {
	margin: 0 0 20px !important;
}

body.single-product .elementor-element-19275bc,
body.single-product .elementor-element-19275bc > .elementor-widget-container {
	padding: 0 !important;
	border: 0 !important;
}

body.single-product .woocommerce-product-attributes.shop_attributes {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	background: none;
	overflow: visible;
}

body.single-product .woocommerce-product-attributes.shop_attributes tbody {
	display: contents;
}

body.single-product .woocommerce-product-attributes.shop_attributes tr {
	display: flex;
	flex-direction: row; /* RTL: the label is the first (rightmost) cell */
	width: 100%;
	min-height: 42px;
	margin: 0;
	padding: 0;
	gap: 0;
	border: 0;
	background: none;
}

/* rows stack with one shared hairline: every cell keeps its own box, later rows pull up by the border width */
body.single-product .woocommerce-product-attributes.shop_attributes tr + tr {
	margin-top: -1px;
}

body.single-product .woocommerce-product-attributes.shop_attributes th,
body.single-product .woocommerce-product-attributes.shop_attributes td {
	display: flex;
	align-items: center;
	min-height: 42px;
	margin: 0;
	padding: 4px 12px;
	border: 1px solid var(--ah-tag, #eee);
	border-radius: 0;
	background: none;
	box-sizing: border-box;
	text-align: start;
	vertical-align: baseline;
}

/* label: 200 wide (the value fills the rest, 372 in the 572 box), 14 regular, icon 24 on the right */
body.single-product .woocommerce-product-attributes.shop_attributes th {
	flex: 0 0 200px;
	width: 200px;
	max-width: 200px;
	font: 400 14px/24px var(--ah-font-num);
	color: var(--ah-text);
}

body.single-product .woocommerce-product-attributes.shop_attributes th .wd-attr-label,
body.single-product .woocommerce-product-attributes.shop_attributes th .wd-attr-name {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0;
}

body.single-product .woocommerce-product-attributes.shop_attributes .araz-spec-label {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	width: 100%;
	font: 400 14px/24px var(--ah-font-num);
}

/* the design's own glyphs for the two rows it draws (brand 252:13910, code 252:13940) */
body.single-product .woocommerce-product-attributes-item--araz_brand .araz-spec-icon,
body.single-product .woocommerce-product-attributes-item--araz_sku .araz-spec-icon {
	background: url('../icons/product/spec-tag.svg') center / 24px no-repeat;
}

body.single-product .woocommerce-product-attributes-item--araz_sku .araz-spec-icon {
	background-image: url('../icons/product/spec-qr.svg');
}

body.single-product .woocommerce-product-attributes-item--araz_brand .araz-spec-icon > *,
body.single-product .woocommerce-product-attributes-item--araz_sku .araz-spec-icon > * {
	display: none;
}

body.single-product .woocommerce-product-attributes.shop_attributes .araz-spec-icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	color: rgba(0, 0, 0, .45);
}

body.single-product .woocommerce-product-attributes.shop_attributes td {
	flex: 1 1 0;
	min-width: 0;
	gap: 8px;
	border-right: 0; /* the label cell already draws this edge */
	font: 700 16px/24px var(--ah-font-num) !important; /* over the widget's own term typography (600, #242424) */
	color: rgba(91, 78, 205, .87) !important;
}

body.single-product .woocommerce-product-attributes.shop_attributes td p,
body.single-product .woocommerce-product-attributes.shop_attributes td a,
body.single-product .woocommerce-product-attributes.shop_attributes td a .wd-term-name {
	margin: 0;
	border: 0;
	color: rgba(91, 78, 205, .87) !important;
	font: inherit !important;
	text-decoration: none;
}

/* part codes: plain 16 regular text, not the monospace grey chip the site-wide spec styles draw */
body.single-product .woocommerce-product-attributes.shop_attributes .araz-code {
	padding: 0;
	background: none;
	border: 0;
	flex: 1 1 0;
	color: var(--ah-text);
	font: 400 16px/24px var(--ah-font-num);
	letter-spacing: 0;
	text-align: right;
}

/* «کد قدیم» is part of the «کد کالا» row in the design (252:13972), 14 px secondary beside the code */
body.single-product .woocommerce-product-attributes.shop_attributes .ah-oldcode {
	display: flex;
	flex: 1 1 0;
	flex-direction: row;
	justify-content: flex-start;
	gap: 8px;
	min-width: 0;
	color: var(--ah-text2);
	font: 400 14px/24px var(--ah-font-num);
}

body.single-product .woocommerce-product-attributes.shop_attributes .ah-oldcode .araz-code {
	flex: 0 1 auto;
	color: var(--ah-text2);
	font: 400 14px/24px var(--ah-font-num);
}

/* ============================================================== 5. share row (255:14248): label + 7 round icons */
body.single-product .elementor-element-3321d5d {
	position: static !important;
	margin: 0;
	padding: 0;
}

body.single-product .elementor-element-69f0ef0 > .elementor-widget-container {
	margin: 0 !important;
}

body.single-product .elementor-element-90d976e,
body.single-product .elementor-element-69f0ef0 {
	margin: 0 !important;
	width: 100% !important;
	max-width: none;
}

body.single-product .wd-social-icons.social-share {
	display: flex;
	flex-direction: row; /* label first = rightmost */
	flex-wrap: nowrap;
	align-items: flex-start; /* 392:9943 */
	justify-content: flex-start;
	gap: 3.404px; /* 392:9943 */
	width: 100%;
	margin: 0 !important;
	text-align: start;
}

body.single-product .wd-social-icons.social-share .wd-label {
	padding-inline-end: 8px;
	margin: 0;
	color: var(--ah-text);
	font: 400 14px/24px var(--ah-font-num);
	white-space: nowrap;
}

/* each network is one variant of the designer's share component (385:9668; assets/icons/product/share-*.svg are its
   exported glyphs), not the theme's icon font. The glyph is drawn by ::before as a mask so the two states are the two
   variants' colours: Default = the lavender disc (#b5a3ff, 385:9667 and friends), Hover = the same glyph in the
   network's own colour (385:9669 LinkedIn #0a66c2, 390:9748 TikTok #000, 390:9743 X #000, 390:9735 Telegram #2aabee,
   390:9756 YouTube #f00, 390:9752 Facebook #0866ff, 390:9739 Instagram #8134af). The tooltip of the app-only networks
   stays on ::after, outside the mask.
   Visual order (392:9943, physical left to right: TikTok, Telegram, LinkedIn, X, YouTube, Facebook, Instagram, then the
   label): from the label leftwards Instagram, Facebook, YouTube, X, LinkedIn, Telegram, TikTok. */
body.single-product .wd-social-icons.social-share .wd-social-icon {
	position: relative;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
}

body.single-product .wd-social-icons.social-share .wd-social-icon::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #b5a3ff;
	-webkit-mask: center / 24px no-repeat;
	mask: center / 24px no-repeat;
}

body.single-product .wd-social-icons.social-share .wd-social-icon .wd-icon {
	display: none;
}

body.single-product .wd-social-icons.social-share .wd-label { order: 0; }
body.single-product .wd-social-icons.social-share .social-instagram { order: 1; }
body.single-product .wd-social-icons.social-share .social-facebook { order: 2; }
body.single-product .wd-social-icons.social-share .social-youtube { order: 3; }
body.single-product .wd-social-icons.social-share .social-twitter { order: 4; }
body.single-product .wd-social-icons.social-share .social-linkedin { order: 5; }
body.single-product .wd-social-icons.social-share .social-tg { order: 6; }
body.single-product .wd-social-icons.social-share .social-tiktok { order: 7; }

body.single-product .wd-social-icons.social-share .social-instagram::before { -webkit-mask-image: url('../icons/product/share-instagram.svg'); mask-image: url('../icons/product/share-instagram.svg'); }
body.single-product .wd-social-icons.social-share .social-facebook::before { -webkit-mask-image: url('../icons/product/share-facebook.svg'); mask-image: url('../icons/product/share-facebook.svg'); }
body.single-product .wd-social-icons.social-share .social-youtube::before { -webkit-mask-image: url('../icons/product/share-youtube.svg'); mask-image: url('../icons/product/share-youtube.svg'); }
body.single-product .wd-social-icons.social-share .social-twitter::before { -webkit-mask-image: url('../icons/product/share-x.svg'); mask-image: url('../icons/product/share-x.svg'); }
body.single-product .wd-social-icons.social-share .social-linkedin::before { -webkit-mask-image: url('../icons/product/share-linkedin.svg'); mask-image: url('../icons/product/share-linkedin.svg'); }
body.single-product .wd-social-icons.social-share .social-tg::before { -webkit-mask-image: url('../icons/product/share-telegram.svg'); mask-image: url('../icons/product/share-telegram.svg'); }
body.single-product .wd-social-icons.social-share .social-tiktok::before { -webkit-mask-image: url('../icons/product/share-tiktok.svg'); mask-image: url('../icons/product/share-tiktok.svg'); }

body.single-product .wd-social-icons.social-share .social-instagram:hover::before,
body.single-product .wd-social-icons.social-share .social-instagram:focus-visible::before { background: #8134af; }
body.single-product .wd-social-icons.social-share .social-facebook:hover::before,
body.single-product .wd-social-icons.social-share .social-facebook:focus-visible::before { background: #0866ff; }
body.single-product .wd-social-icons.social-share .social-youtube:hover::before,
body.single-product .wd-social-icons.social-share .social-youtube:focus-visible::before { background: #ff0000; }
body.single-product .wd-social-icons.social-share .social-twitter:hover::before,
body.single-product .wd-social-icons.social-share .social-twitter:focus-visible::before { background: #000; }
body.single-product .wd-social-icons.social-share .social-linkedin:hover::before,
body.single-product .wd-social-icons.social-share .social-linkedin:focus-visible::before { background: #0a66c2; }
body.single-product .wd-social-icons.social-share .social-tg:hover::before,
body.single-product .wd-social-icons.social-share .social-tg:focus-visible::before { background: #2aabee; }
body.single-product .wd-social-icons.social-share .social-tiktok:hover::before,
body.single-product .wd-social-icons.social-share .social-tiktok:focus-visible::before { background: #000; }

body.single-product .wd-social-icons.social-share .social-pinterest {
	display: none; /* not in the design's 7-network row */
}

/* the three app-only networks copy the link where there is no share sheet (product.js) */
body.single-product .wd-social-icons.social-share .ah-app-share {
	position: relative;
}

body.single-product .wd-social-icons.social-share .ah-app-share.is-copied::after {
	content: 'پیوند کپی شد';
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	padding: 2px 8px;
	border-radius: 8px;
	background: var(--ah-dark);
	color: #fff;
	font: 400 12px/20px var(--ah-font);
	white-space: nowrap;
}

/* ============================================================== row 2 band: description/reviews 868 + gap 12 + sticky recap 400 */
body.single-product .elementor-element-39afe97,
body.single-product .elementor-element-ee5b9bd {
	max-width: 1280px;
	margin-inline: auto;
}

body.single-product .elementor-element-ee5b9bd {
	margin-bottom: 0 !important;
	padding: 32px 0 !important;
}

body.single-product .elementor-element-ee5b9bd > .e-con-inner {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px !important;
	max-width: none !important;
	padding: 0 !important;
}

body.single-product .elementor-element-1ee1ec8 {
	flex: 0 0 868px !important;
	width: 868px !important;
	max-width: 868px;
	padding: 0 !important;
	gap: 10px !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* ============================================================== 6. sticky recap card (255:14947, [araz_product_sticky]) */
body.single-product .elementor-element-ec2f083 {
	position: sticky;
	top: 72px;
	align-self: flex-start;
	flex: 0 0 400px !important;
	width: 400px !important;
	max-width: 400px;
	padding: 0 !important;
	margin: 0 !important;
}

body.single-product .elementor-element-3b05dd4,
body.single-product .elementor-element-ec2f083 .e-con-inner {
	padding: 0 !important;
	background: none !important;
}

body.single-product .elementor-element-ahprodsticky {
	margin: 0 !important;
	width: 100%;
}

.ah-prodsticky {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding: 36px 24px;
	background: #fff;
	border-radius: 8px;
}

.ah-prodsticky__title {
	margin: 0;
	padding: 0 0 0 8px;
	font: 700 24px/38px var(--ah-font); /* 255:14950 is a 38 px line box */
	color: var(--ah-text);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.single-product .ah-prodsticky .ah-stock {
	margin: -4px 0 0; /* 4 px under the title, inside the card's 8 px rhythm */
}

.ah-prodsticky__row {
	display: flex;
	flex-direction: row; /* stepper first = rightmost, button fills the rest */
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

body.single-product .ah-prodsticky .ah-prodsticky__btn {
	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 0;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 8px 16px;
	background: var(--ah-purple);
	color: #fff;
	border: 0;
	border-radius: 12px;
	box-shadow: none;
	font: 500 16px/24px var(--ah-font);
	text-transform: none;
	cursor: pointer;
	white-space: nowrap;
}

body.single-product .ah-prodsticky .ah-prodsticky__btn .ah-ico {
	filter: brightness(0) invert(1);
	order: -1; /* icon rightmost, as in the design */
}

body.single-product .ah-prodsticky .ah-prodsticky__btn.is-disabled {
	background: #eee;
	color: rgba(0, 0, 0, .4);
}

.ah-prodsticky__qty {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 4px;
	height: 42px;
}

body.single-product .ah-prodsticky .ah-prodsticky__qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
}

body.single-product .ah-prodsticky .ah-prodsticky__qty-btn img {
	width: 24px;
	height: 24px;
}

.ah-prodsticky__qty-val {
	box-sizing: border-box;
	min-width: 39px;
	height: 42px;
	padding: 8px 4px;
	border: 1px solid var(--ah-lav-line);
	border-radius: 8px;
	background: #fff;
	text-align: center;
	font: 400 16px/24px var(--ah-font-num);
	color: var(--ah-text);
}

/* ============================================================== 7. description + reviews (255:14946): separate white cards, 10 apart */
body.single-product .elementor-element-2bae888,
body.single-product .elementor-element-bd6835a #reviews > #comments,
body.single-product .elementor-element-bd6835a #reviews > #review_form_wrapper {
	background: #fff;
	border-radius: 8px;
	padding: 16px;
	margin: 0;
	box-sizing: border-box;
}

body.single-product .elementor-element-2bae888 .woodmart-title-container,
body.single-product .elementor-element-2bae888 .title {
	margin: 0;
	color: var(--ah-purple);
	font: 700 16px/32px var(--ah-font);
}

/* a product with a description: the text sits in the same card, 8 under the heading (255:14138) */
body.single-product .elementor-element-2bae888:has(+ .elementor-element-7955ff3) {
	border-radius: 8px 8px 0 0;
	padding-bottom: 0;
}

body.single-product .elementor-element-7955ff3 {
	margin: -10px 0 0 !important; /* cancels the column's 10 px card gap: one card, not two */
	padding: 8px 16px 16px;
	background: #fff;
	border-radius: 0 0 8px 8px;
	box-sizing: border-box;
	color: var(--ah-text);
	font: 400 14px/24px var(--ah-font);
}

body.single-product .elementor-element-7955ff3 p {
	margin: 0 0 8px;
	color: var(--ah-text);
	font: 400 14px/24px var(--ah-font);
}

body.single-product .elementor-element-7955ff3 p:last-child {
	margin-bottom: 0;
}

body.single-product .elementor-element-bd6835a #reviews {
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* WoodMart sizes these two for its side-by-side layout (flex: 1 1 100%), which in this column stretched the list card */
body.single-product .elementor-element-bd6835a #reviews > #comments,
body.single-product .elementor-element-bd6835a #reviews > #review_form_wrapper {
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
}

body.single-product .wd-reviews-heading .woocommerce-Reviews-title {
	margin: 0;
}

/* nothing to list yet: the form card alone carries the «دیدگاه‌ها» heading and the two sentences (state 1) */
body.single-product #reviews > #comments:has(.woocommerce-noreviews) {
	display: none;
}

/* heading with the message icon on the right (255:14344); the list card has its own (count + sort beside it) */
body.single-product #review_form_wrapper::before,
body.single-product .woocommerce-Reviews-title {
	display: block;
	margin: 0 0 4px;
	padding-inline-start: 32px;
	background: url('../icons/product/message.svg') right 4px / 24px no-repeat;
	color: var(--ah-purple);
	font: 700 16px/32px var(--ah-font);
	text-align: start;
}

body.single-product #review_form_wrapper::before {
	content: 'دیدگاه‌ها';
}

body.single-product .woocommerce-Reviews-title .ah-rev-count {
	margin-inline-start: 8px;
	color: var(--ah-text);
	font: 400 14px/24px var(--ah-font-num);
}

body.single-product .wd-reviews-heading {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 16px;
}

body.single-product .wd-reviews-heading .wd-reviews-tools {
	margin: 0;
}

body.single-product .wd-reviews-sorting-select {
	box-sizing: border-box;
	width: 146px;
	height: 32px;
	padding: 4px 8px;
	border: 1px solid var(--ah-lav-line);
	border-radius: 12px;
	background-color: #fff;
	font: 400 12px/22px var(--ah-font);
	color: var(--ah-text2);
	text-align: center;
	text-align-last: center;
	-webkit-appearance: none;
	appearance: none;
	background: #fff url('../icons/product/select-down.svg') left 8px center / 24px no-repeat;
	padding: 4px 16px 4px 32px;
	box-shadow: none;
}

/* the two lines of state 1 */
body.single-product .woocommerce-noreviews,
body.single-product .must-log-in,
body.single-product #reply-title {
	margin: 0;
	font: 400 12px/16px var(--ah-font);
	color: var(--ah-text2);
}

body.single-product #reply-title {
	display: block;
	margin-bottom: 4px;
}

body.single-product #reply-title b {
	color: var(--ah-purple);
	font-weight: 700;
}

body.single-product #respond .must-log-in a {
	color: var(--ah-purple);
	font-weight: 700;
	text-decoration: underline;
}

/* ---- state 2, the write form (255:14704): the field (392:9976, 8 px above and below it, 112 high) and then «ارسال» +
   «کیفیت» + «قیمت» in one row (255:14771, 24 apart); 4 px between the blocks (255:14705) */
body.single-product #reply-title:empty,
body.single-product #reply-title:not(:has(b)) {
	display: none; /* only the empty-state invitation line (it carries the bold product name) is shown */
}

body.single-product #commentform {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 4px 24px;
	margin: 0;
}

body.single-product #commentform .comment-form-comment {
	order: 1;
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	padding: 8px 0; /* 392:9976 */
}

/* the label is the field's placeholder in the design; it stays for screen readers */
body.single-product #commentform .comment-form-comment label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* the box itself (I392:9976;359:10698): 112 high, 1 px #e0e0e0, radius 4, padding 4 12; the text 16/24 (I392:9976;359:10700),
   the placeholder in the frame's «disable» colour; the resize grip at the bottom left corner (I392:9976;359:10712) is
   the browser's own, which an RTL page draws there */
body.single-product #commentform .comment-form-comment textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 112px;
	min-height: 112px;
	margin: 0;
	padding: 4px 12px;
	border: 1px solid var(--ah-border);
	border-radius: 4px;
	background: #fff;
	box-shadow: none;
	color: var(--ah-text);
	font: 400 16px/24px var(--ah-font-num);
	text-align: right;
	resize: vertical;
}

body.single-product #commentform .comment-form-comment textarea::placeholder {
	color: rgba(0, 0, 0, .12);
	opacity: 1;
}

body.single-product #commentform .form-submit {
	order: 2;
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	padding: 0;
}

body.single-product #respond #commentform .form-submit input[type="submit"] {
	height: 32px;
	min-height: 0;
	margin: 0;
	padding: 4px 16px;
	background: var(--ah-purple);
	color: #fff;
	border: 0;
	border-radius: 12px;
	box-shadow: none;
	font: 500 16px/24px var(--ah-font);
	text-transform: none;
}

body.single-product #commentform .wd-review-criteria-wrap {
	order: 3;
	flex: 0 1 auto;
	width: auto;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 0 24px;
	margin: 0;
	padding: 0;
	border: 0;
}

body.single-product #commentform .wd-review-criteria {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	padding: 0;
}

body.single-product #commentform .wd-review-criteria label {
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	padding: 0;
	margin: 0;
	color: var(--ah-text);
	font: 400 14px/32px var(--ah-font);
}

body.single-product #commentform .wd-review-criteria label::after {
	content: none;
}

body.single-product #commentform .wd-review-criteria select {
	display: none;
}

/* five 24 px stars (the design's own two glyphs), the first one next to the label */
body.single-product #commentform .wd-review-criteria .stars {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	line-height: 0;
}

body.single-product #commentform .wd-review-criteria .stars span {
	display: flex;
	flex-direction: row;
	gap: 0;
}

body.single-product #commentform .wd-review-criteria .stars a {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0;
	overflow: hidden;
	background: url('../icons/product/star-off.svg') center / 24px no-repeat;
	color: transparent;
	font-size: 0;
	text-indent: -999em;
}

body.single-product #commentform .wd-review-criteria .stars a::before,
body.single-product #commentform .wd-review-criteria .stars a::after {
	content: none !important;
}

body.single-product #commentform .wd-review-criteria .stars.selected a,
body.single-product #commentform .wd-review-criteria .stars:hover a {
	background-image: url('../icons/product/star-on.svg');
}

body.single-product #commentform .wd-review-criteria .stars.selected a.active ~ a,
body.single-product #commentform .wd-review-criteria .stars:hover a:hover ~ a {
	background-image: url('../icons/product/star-off.svg');
}

/* WoodMart's rating summary (big average, bars per criterion) is not part of the design's reviews block */
body.single-product #reviews .wd-rating-summary-wrap {
	display: none;
}

/* ---- state 3, the list (255:14856): one bordered box per review, 16 under the heading row */
body.single-product #comments .wd-reviews-content,
body.single-product #comments .commentlist {
	margin: 0 !important;
}

/* a review that carries the two ratings: «کیفیت ★★★☆☆  قیمت ★★☆☆☆» on one line, under the name */
body.single-product #comments .araz-review-stars {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 0 24px;
	margin: 0;
}

body.single-product #comments .araz-review-criterion {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	margin: 0;
}

body.single-product #comments .araz-review-criterion::after {
	content: none; /* WoodMart's summary-tooltip caret; there is no tooltip here */
}

body.single-product #comments .araz-criterion-label {
	margin: 0;
	color: var(--ah-text);
	font: 400 14px/24px var(--ah-font);
}

body.single-product #comments .commentlist {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-product #comments .commentlist > li {
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--ah-border);
	border-radius: 8px;
	background: #fff;
}

body.single-product #comments .commentlist .comment_container,
body.single-product #comments .commentlist .comment-text {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

body.single-product #comments .commentlist .comment-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body.single-product #comments .commentlist .meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
}

body.single-product #comments .commentlist .woocommerce-review__author {
	color: var(--ah-text);
	font: 700 16px/24px var(--ah-font-num);
}

body.single-product #comments .commentlist .woocommerce-review__dash {
	display: none;
}

body.single-product #comments .commentlist .woocommerce-review__published-date {
	color: var(--ah-text2);
	font: 400 14px/24px var(--ah-font-num);
}

body.single-product #comments .commentlist .description,
body.single-product #comments .commentlist .description p {
	margin: 0;
	color: var(--ah-text);
	font: 400 14px/24px var(--ah-font-num);
}

/* the real «helpful» vote widget (WoodMart's own Likes class): 👍 n  👎 n, 24 px glyphs, 8 apart */
body.single-product .wd-review-likes {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
}

body.single-product .wd-review-likes .wd-action-btn,
body.single-product .wd-review-likes .wd-action-btn a {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	color: var(--ah-text2);
	font: 400 14px/24px var(--ah-font-num);
}

body.single-product .wd-review-likes .wd-action-icon {
	display: block;
	width: 24px;
	height: 24px;
	background: url('../icons/product/thumb.svg') center / 24px no-repeat;
}

body.single-product .wd-review-likes .wd-action-btn a::before,
body.single-product .wd-review-likes .wd-action-icon::before {
	content: none !important;
}

body.single-product .wd-review-likes .wd-dislike .wd-action-icon {
	transform: scaleY(-1);
}

body.single-product .wd-review-likes .wd-action-text {
	color: var(--ah-text2);
	font: 400 14px/24px var(--ah-font-num);
}

/* ============================================================== 8. related carousel (255:15150): 32 + 4 + 88, arrows 32 round, cards 228.8 x 88, 12 gap */
body.single-product .elementor-element-db4ede3 {
	max-width: 1280px;
	margin: 0 auto !important;
	padding: 0 0 48px !important;
}

body.single-product .elementor-element-ahprodrelated,
body.single-product .elementor-element-ahprodrelated > .elementor-widget-container {
	margin: 0 !important;
}

body.single-product .elementor-element-ahprodrelated .wd-products {
	position: relative;
}

body.single-product .elementor-element-ahprodrelated .wd-carousel {
	--wd-gap-lg: 12px !important;
	--wd-gap: 12px !important;
	margin-block: 0 !important;
	padding-block: 0 !important;
}

body.single-product .elementor-element-ahprodrelated .wd-el-title {
	margin: 0 0 4px;
	text-align: start;
}

body.single-product .elementor-element-ahprodrelated .wd-el-title span {
	color: var(--ah-purple);
	font: 700 16px/32px var(--ah-font);
}

body.single-product .elementor-element-ahprodrelated .wd-carousel-inner {
	padding-inline: 44px;
	margin: 0;
}

body.single-product .elementor-element-ahprodrelated .wd-nav-arrows .wd-btn-arrow {
	position: absolute;
	top: 28px; /* centred on the 88 px card row */
	width: 32px;
	height: 32px;
	margin: 0;
	border-radius: 24px;
	background: #d9dfeb;
	box-shadow: none;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	pointer-events: auto !important;
}

body.single-product .elementor-element-ahprodrelated .wd-nav-arrows .wd-prev {
	right: 0;
	left: auto;
}

body.single-product .elementor-element-ahprodrelated .wd-nav-arrows .wd-next {
	left: 0;
	right: auto;
}

body.single-product .elementor-element-ahprodrelated .wd-nav-arrows .wd-btn-arrow.wd-disabled {
	opacity: .5 !important;
}

body.single-product .elementor-element-ahprodrelated .wd-btn-arrow .wd-arrow-inner {
	width: 24px;
	height: 24px;
	margin: 4px;
	background: var(--ah-purple); /* 255:15156: a #5b4ecd chevron on the #d9dfeb button */
	-webkit-mask: url('../icons/product/nav-chevron-left.svg') center / 24px no-repeat;
	mask: url('../icons/product/nav-chevron-left.svg') center / 24px no-repeat;
}

body.single-product .elementor-element-ahprodrelated .wd-btn-arrow .wd-arrow-inner::before,
body.single-product .elementor-element-ahprodrelated .wd-btn-arrow .wd-arrow-inner::after {
	content: none;
}

body.single-product .elementor-element-ahprodrelated .wd-prev .wd-arrow-inner {
	transform: scaleX(-1);
}

body.single-product .elementor-element-ahprodrelated .wd-product {
	height: 88px;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: none;
}

body.single-product .elementor-element-ahprodrelated .wd-product:hover {
	background: var(--ah-lav);
}

/* text block on the physical left (right-aligned), the 88 square picture on the right */
body.single-product .elementor-element-ahprodrelated .wd-product-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 88px;
	margin: 0;
	padding: 0;
	gap: 0;
}

body.single-product .elementor-element-ahprodrelated .wd-product-thumb {
	flex: 0 0 88px;
	width: 88px;
	height: 88px;
	padding: 7px 8px;
	box-sizing: border-box;
	margin: 0;
}

body.single-product .elementor-element-ahprodrelated .wd-product-thumb a {
	display: block;
	height: 100%;
}

body.single-product .elementor-element-ahprodrelated .wd-product-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 1px solid var(--ah-border);
	border-radius: 7px;
	box-sizing: border-box;
}

body.single-product .elementor-element-ahprodrelated .wd-product:hover .wd-product-thumb img {
	border-color: var(--ah-lav-line);
}

body.single-product .elementor-element-ahprodrelated .product-element-bottom {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-self: flex-start;
	gap: 4px;
	min-width: 0;
	padding: 12px 0 12px 12px;
	margin: 0;
	text-align: right;
}

body.single-product .elementor-element-ahprodrelated .wd-entities-title {
	margin: 0;
	padding-left: 12px; /* 255:15162 */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font: 700 14px/22px var(--ah-font);
}

body.single-product .elementor-element-ahprodrelated .wd-entities-title a {
	color: var(--ah-text);
}

/* the design shows the SKU, not a star rating (every related product here has an empty rating) */
body.single-product .elementor-element-ahprodrelated .star-rating {
	display: none;
}

body.single-product .elementor-element-ahprodrelated .ah-related-sku {
	display: block;
	margin: 0;
	font: 500 12px/19px var(--ah-font);
	color: var(--ah-text);
}

/* A viewer who is shown prices (#121): the card gets the price row of the other cards (#85, «Products Card» 194:2217,
   action bar 315:5387: price at the start, bag button at the end, 8 apart, 12 from the card's edges), printed by
   Product::related_buy() as Cards::price() + Cards::button(), so price.css and the shared .ah-btn style it. The row is
   too wide for the 140 px text column, so it takes the card's full width under the 88 px picture row: the text block
   steps aside (display: contents) and the card becomes a grid whose first 88 px repeat the guest card exactly (title
   12-34, «کد کالا» 38-57). A guest's card has no row, so none of this applies and it stays 88 px. */
body.single-product .elementor-element-ahprodrelated .wd-carousel:has(.ah-related-buy) .wd-product {
	height: 100%; /* the slides of one row are as tall as the tallest, e.g. an out-of-stock card (no price) beside priced ones */
	min-height: 88px;
}

body.single-product .elementor-element-ahprodrelated .wd-product-wrapper:has(.ah-related-buy) {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	grid-template-rows: 34px 23px 31px auto;
	grid-template-areas:
		"thumb title"
		"thumb sku"
		"thumb ."
		"buy buy";
	align-items: end;
	height: auto;
	padding: 0 0 12px;
}

body.single-product .elementor-element-ahprodrelated .wd-product-wrapper:has(.ah-related-buy) > .wd-product-thumb {
	grid-area: thumb;
	align-self: start;
	max-width: none; /* WoodMart's small card caps it at 50 %, which in a grid cell is 44 px */
}

body.single-product .elementor-element-ahprodrelated .wd-product-wrapper:has(.ah-related-buy) > .product-element-bottom {
	display: contents;
}

body.single-product .elementor-element-ahprodrelated .wd-product-wrapper:has(.ah-related-buy) .wd-entities-title {
	grid-area: title;
	padding-left: 24px; /* the text block's 12 + the title's own 12 (255:15162) */
}

body.single-product .elementor-element-ahprodrelated .wd-product-wrapper:has(.ah-related-buy) .ah-related-sku {
	grid-area: sku;
	padding-left: 12px;
}

body.single-product .elementor-element-ahprodrelated .ah-related-buy {
	grid-area: buy;
	display: flex;
	flex-wrap: wrap; /* a card too narrow for both puts the button on its own line, at the end */
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 0 12px;
}

body.single-product .elementor-element-ahprodrelated .ah-related-buy > .ah-btn {
	margin-inline-start: auto;
}

body.single-product .elementor-element-ahprodrelated .ah-related-buy > .added_to_cart {
	display: none;
}

/* ============================================================== narrower than the 1280 design box
   The frame is drawn at 1920 only. Below 1312 the same two-column rows keep their proportions and shrink;
   below 1025 they stack (picture, info card, recap card, description/reviews). INTERIM: there is no tablet/phone
   frame for this page yet. */
@media (max-width: 1311px) {
	body.single-product .elementor-element-a4e70a8 {
		flex: 660 1 0 !important;
		width: auto !important;
		max-width: none;
		min-width: 0;
	}

	body.single-product .elementor-element-6ae2d25 {
		flex: 604 1 0 !important;
		width: auto !important;
		max-width: none;
		min-width: 0;
		min-height: 0;
	}

	body.single-product .woocommerce-product-gallery {
		width: 100%;
	}

	body.single-product .woocommerce-product-gallery .wd-gallery-images {
		flex: 493 1 0;
		width: auto;
		height: auto;
		aspect-ratio: 1;
		min-width: 0;
	}

	body.single-product .woocommerce-product-gallery:not(.wd-has-thumb) .wd-gallery-images {
		flex: 1 1 100%;
		aspect-ratio: 660 / 493;
	}

	body.single-product .woocommerce-product-gallery .wd-gallery-thumb {
		flex: 159 1 0;
		width: auto;
		height: auto;
		min-width: 0;
	}

	body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-inner,
	body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel,
	body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-wrap {
		position: static;
		height: auto !important;
	}

	body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item {
		flex: 0 0 auto;
		width: 100% !important;
		height: auto !important;
	}

	body.single-product .woocommerce-product-gallery .wd-gallery-thumb img {
		height: auto;
		aspect-ratio: 1;
	}

	body.single-product .elementor-element-ee5b9bd,
	body.single-product .elementor-element-db4ede3 {
		padding-inline: 16px !important;
	}

	body.single-product .elementor-element-1ee1ec8 {
		flex: 868 1 0 !important;
		width: auto !important;
		max-width: none;
		min-width: 0;
	}

	body.single-product .elementor-element-ec2f083 {
		flex: 400 1 0 !important;
		width: auto !important;
		max-width: none;
		min-width: 0;
	}

	body.single-product .woocommerce-product-attributes.shop_attributes th {
		flex: 0 1 200px;
		width: auto;
		min-width: 120px;
	}
}

@media (max-width: 1024px) {
	body.single-product .elementor-element-2fe7f29 {
		padding: 8px 12px !important;
	}

	body.single-product .wd-products-nav::before {
		content: none;
	}

	body.single-product .elementor-element-c7c2108 > .e-con-inner,
	body.single-product .elementor-element-ee5b9bd > .e-con-inner {
		flex-direction: column !important;
		align-items: stretch;
	}

	body.single-product .elementor-element-a4e70a8,
	body.single-product .elementor-element-6ae2d25,
	body.single-product .elementor-element-1ee1ec8,
	body.single-product .elementor-element-ec2f083 {
		flex: 0 0 auto !important;
		width: 100% !important;
	}

	/* the recap card only exists to stay in view beside a long reviews column; stacked, it would just repeat the info card */
	body.single-product .elementor-element-ec2f083 {
		display: none !important;
	}

	body.single-product .woocommerce-product-gallery {
		flex-wrap: wrap;
	}

	body.single-product .woocommerce-product-gallery .wd-gallery-images,
	body.single-product .woocommerce-product-gallery:not(.wd-has-thumb) .wd-gallery-images {
		flex: 0 0 100%;
	}

	body.single-product .woocommerce-product-gallery .wd-gallery-thumb {
		flex: 0 0 100%;
	}

	body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-wrap {
		flex-direction: row;
	}

	body.single-product .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item {
		flex: 0 0 72px;
		width: 72px !important;
	}

	body.single-product .wd-single-add-cart form.cart {
		flex-wrap: wrap;
	}
}

@media (max-width: 600px) {
	body.single-product .product_title.entry-title {
		font: 700 24px/38px var(--ah-font) !important;
	}

	body.single-product .woocommerce-product-attributes.shop_attributes th {
		flex: 0 1 132px;
		min-width: 0;
	}

	body.single-product .woocommerce-product-attributes.shop_attributes td:has(.ah-oldcode) {
		flex-wrap: wrap;
		height: auto;
	}

	body.single-product .wd-social-icons.social-share {
		flex-wrap: wrap;
	}

	body.single-product .elementor-element-ahprodrelated .wd-carousel-inner {
		padding-inline: 0;
	}

	body.single-product .elementor-element-ahprodrelated .wd-nav-arrows {
		display: none;
	}
}