/*
 * Farin product page. Rows: head (breadcrumb), top (up to three columns),
 * bottom (tabs and a side column). Two looks: «سه ستونه» and «ویترین».
 * Below 1024px everything stacks; a buy bar sits at the bottom on phones.
 */

.fp {
	--fp-gap: 32px;
	box-sizing: border-box;
	max-inline-size: var(--fp-max);
	margin-inline: auto;
	padding: 16px 24px 48px;
	color: #1d1730;
	font-size: 14px;
	line-height: 1.8;
}

.fp *,
.fp *::before,
.fp *::after {
	box-sizing: border-box;
}

.fp a {
	color: inherit;
	text-decoration: none;
}

.fp :focus-visible {
	outline: 2px solid var(--fp-accent);
	outline-offset: 2px;
	border-radius: 8px;
}

.fp button {
	font: inherit;
	color: inherit;
}

.fp ul,
.fp ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp p {
	margin: 0;
}

.fp-widget {
	max-inline-size: none;
	padding: 0;
}

/* ---------- Rows and zones ---------- */

.fp__row + .fp__row {
	margin-block-start: var(--fp-gap);
}

.fp__row--head + .fp__row {
	margin-block-start: 16px;
}

.fp__row--foot {
	margin-block-start: var(--fp-gap);
}

.fp__row--top,
.fp__row--bottom {
	display: grid;
	grid-template-columns: var(--cols);
	gap: var(--fp-gap);
	align-items: start;
}

.fp__zone {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-inline-size: 0;
}

.fp__zone.is-card {
	padding: 24px;
	border: 1px solid var(--fp-line);
	border-radius: var(--fp-radius);
	background: var(--fp-card);
	box-shadow: 0 10px 30px rgb(20 16 40 / 0.05);
}

.fp__zone.is-soft {
	padding: 20px;
	border-radius: var(--fp-radius);
	background: color-mix(in srgb, var(--fp-accent) 7%, #fff);
}

.fp__zone.is-sticky {
	position: sticky;
	inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + 24px);
}

/* ---------- Breadcrumb ---------- */

.fp-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
	color: var(--fp-muted);
	font-size: 13px;
}

.fp-crumbs li + li::before {
	content: "";
	display: inline-block;
	inline-size: 6px;
	block-size: 6px;
	margin-inline: 10px;
	border-top: 1.5px solid currentColor;
	border-left: 1.5px solid currentColor;
	opacity: 0.6;
	transform: rotate(-45deg);
	vertical-align: middle;
}

[dir="ltr"] .fp-crumbs li + li::before {
	transform: rotate(135deg);
}

.fp-crumbs a:hover {
	color: var(--fp-accent);
}

.fp-crumbs li:last-child {
	color: #1d1730;
}

/* ---------- Gallery ---------- */

.fp-gallery {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 16px;
}

.fp-gallery.thumbs-end {
	grid-template-columns: minmax(0, 1fr) 88px;
}

.fp-gallery.thumbs-end .fp-thumbs {
	order: 2;
}

.fp-gallery.thumbs-bottom,
.fp-gallery.thumbs-none {
	grid-template-columns: minmax(0, 1fr);
}

.fp-gallery.thumbs-bottom .fp-thumbs {
	order: 2;
	flex-direction: row;
}

.fp-thumbs {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-block-size: 560px;
	overflow: auto;
	scrollbar-width: none;
}

.fp-thumb {
	position: relative;
	display: block;
	inline-size: 80px;
	block-size: 80px;
	padding: 4px;
	border: 2px solid var(--fp-line);
	border-radius: 16px;
	background: var(--fp-soft);
	cursor: pointer;
	transition: border-color 0.2s;
}

.fp-thumb img {
	inline-size: 100%;
	block-size: 100%;
	border-radius: 11px;
	object-fit: contain;
}

.fp-thumb[aria-current="true"],
.fp-thumb:hover {
	border-color: var(--fp-accent);
}

.fp-thumb.is-video svg {
	position: absolute;
	inset: 0;
	margin: auto;
	padding: 6px;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.55);
	color: #fff;
	fill: #fff;
}

.fp-gallery__stage {
	position: relative;
	overflow: hidden;
	border-radius: calc(var(--fp-radius) + 4px);
	background: var(--fp-soft);
}

.fp-gallery__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.fp-gallery__track::-webkit-scrollbar {
	display: none;
}

.fp-slide {
	display: grid;
	flex: 0 0 100%;
	place-items: center;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 32px;
	scroll-snap-align: start;
}

.fp-slide img {
	inline-size: 100%;
	max-block-size: 100%;
	height: auto;
	object-fit: contain;
}

.fp-gallery__nav,
.fp-gallery__zoom {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: var(--fp-nav, 44px);
	block-size: var(--fp-nav, 44px);
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #1d1730 !important;
	box-shadow: 0 6px 18px rgb(20 16 40 / 0.12);
	cursor: pointer;
	transition: transform 0.2s, opacity 0.2s, background-color 0.2s;
}

/* Arrow and zoom buttons: glass, dark, or none (set per gallery). */
.fp-gallery.nav-glass :is(.fp-gallery__nav, .fp-gallery__zoom) {
	background: rgb(255 255 255 / 0.55);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6), 0 6px 18px rgb(20 16 40 / 0.08);
	-webkit-backdrop-filter: blur(12px) saturate(1.5);
	backdrop-filter: blur(12px) saturate(1.5);
}

.fp-gallery.is-hero.nav-glass :is(.fp-gallery__nav, .fp-gallery__zoom) {
	background: rgb(255 255 255 / 0.14);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28);
	color: #fff !important;
}

.fp-gallery.nav-dark :is(.fp-gallery__nav, .fp-gallery__zoom) {
	background: rgb(20 16 40 / 0.72);
	color: #fff !important;
}

.fp-gallery.nav-none .fp-gallery__nav {
	display: none;
}

@media (hover: hover) {
	.fp-gallery.nav-hover .fp-gallery__nav {
		opacity: 0;
	}

	.fp-gallery.nav-hover .fp-gallery__stage:is(:hover, :focus-within) .fp-gallery__nav {
		opacity: 1;
	}
}

.fp-gallery__nav:hover,
.fp-gallery__zoom:hover {
	transform: scale(1.06);
}

.fp-gallery__nav {
	inset-block-start: calc(50% - var(--fp-nav, 44px) / 2);
}

.fp-gallery__nav.is-prev {
	inset-inline-start: 16px;
}

.fp-gallery__nav.is-next {
	inset-inline-end: 16px;
}

.fp-gallery__nav.is-prev svg {
	transform: rotate(-90deg);
}

.fp-gallery__nav.is-next svg {
	transform: rotate(90deg);
}

[dir="ltr"] .fp-gallery__nav.is-prev svg {
	transform: rotate(90deg);
}

[dir="ltr"] .fp-gallery__nav.is-next svg {
	transform: rotate(-90deg);
}

.fp-gallery__zoom {
	inset-block-end: 16px;
	inset-inline-end: 16px;
}

/* «ویترین»: a dark stage with the name and highlights on the image. */
.fp-gallery.is-hero .fp-gallery__stage {
	background: linear-gradient(135deg, var(--fp-hero1), var(--fp-hero2));
	color: #fff;
}

.fp-gallery.is-hero .fp-slide {
	aspect-ratio: 16 / 12;
	justify-items: start;
	padding-inline-start: 4%;
}

.fp-gallery.is-hero .fp-slide img {
	inline-size: 58%;
}

.fp-hero {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	inline-size: 44%;
	padding: 32px;
	pointer-events: none;
}

.fp-hero > * {
	pointer-events: auto;
}

.fp-hero__name {
	font-size: clamp(22px, 2.4vw, 34px);
	font-weight: 800;
	line-height: 1.2;
}

.fp-hero__tag {
	opacity: 0.85;
}

.fp-hero__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-block-start: 8px !important;
}

.fp-hero__list li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.fp-hero__list svg {
	flex: none;
	opacity: 0.9;
}

.fp-hero__list span {
	display: flex;
	flex-direction: column;
	line-height: 1.5;
}

.fp-hero__list small {
	opacity: 0.7;
	font-size: 12px;
}

.fp-hero__play {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 10px;
	margin-block-start: 8px;
	padding: 6px 6px 6px 16px;
	padding-inline: 6px 16px;
	border: 0;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.14);
	color: #fff !important;
	cursor: pointer;
}

.fp-hero__play svg {
	inline-size: 36px;
	block-size: 36px;
	padding: 9px;
	border-radius: 50%;
	background: #fff;
	color: #111;
	fill: #111;
}

.fp-gallery.is-hero .fp-gallery__zoom {
	background: rgb(255 255 255 / 0.9);
}

/* ---------- Title, rating, excerpt ---------- */

.fp-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fp-head__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.fp-brand {
	color: var(--fp-muted);
	font-weight: 600;
}

.fp-brand:hover {
	color: var(--fp-accent);
}

.fp-badges {
	display: flex;
	gap: 6px;
}

.fp-badge {
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.fp-badge.is-new {
	background: color-mix(in srgb, var(--fp-accent) 12%, transparent);
	color: var(--fp-accent);
}

.fp-badge.is-sale {
	background: color-mix(in srgb, var(--fp-sale) 12%, transparent);
	color: var(--fp-sale);
}

.fp-title {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.5;
}

.fp-title.is-latin {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fp-title__latin {
	font-size: 28px;
	line-height: 1.25;
	text-align: start;
}

.fp-title__name {
	font-size: 18px;
	font-weight: 600;
}

.fp-rating {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	color: var(--fp-muted);
}

.fp-rating__num {
	padding: 0 8px;
	border-radius: 8px;
	background: var(--fp-accent);
	color: #fff;
	font-weight: 700;
}

.fp-stars {
	display: inline-flex;
	gap: 2px;
}

.fp-stars i {
	inline-size: 16px;
	block-size: 16px;
	background: linear-gradient(to left, #f5b301 var(--fill), #dcd8e4 var(--fill));
	clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

[dir="ltr"] .fp-stars i {
	background: linear-gradient(to right, #f5b301 var(--fill), #dcd8e4 var(--fill));
}

.fp-excerpt {
	color: color-mix(in srgb, #1d1730 72%, transparent);
	line-height: 2.1;
}

.fp-excerpt p + p {
	margin-block-start: 8px;
}

/* ---------- Highlights and specs ---------- */

.fp-hl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
	gap: 10px;
}

.fp-hl li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 14px 8px;
	border: 1px solid var(--fp-line);
	border-radius: 16px;
	text-align: center;
	line-height: 1.5;
}

.fp-hl__icon {
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	margin-block-end: 4px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--fp-accent) 10%, transparent);
	color: var(--fp-accent);
}

.fp-hl small {
	color: var(--fp-muted);
	font-size: 12px;
}

.fp-hl b {
	font-size: 13px;
}

@container fp (max-width: 700px) {
	.fp .fp-slider {
		padding: 16px;
	}

	/* Swiped with a finger: the arrows step aside, dots say where the row is. */
	.fp .fp-slider__arrow {
		display: none;
	}

	.fp .fp-slider__dots {
		display: flex;
	}

	.fp .fp-slider__track :is(.fp-card, .fs-card) {
		flex-basis: min(62%, 240px);
	}
}

/* Four on a phone would leave one alone on its own row: two by two instead. */
@media (max-width: 599.98px) {
	.fp-hl:has(> li:nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.fp-specs {
	margin: 0;
}

.fp-specs__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-block: 8px;
	border-block-end: 1px dashed var(--fp-line);
}

.fp-specs dt {
	color: var(--fp-muted);
}

.fp-specs dd {
	margin: 0;
	font-weight: 600;
	text-align: end;
}

.fp-specs__chips {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}

.fp-specs__chips span {
	padding: 2px 10px;
	border: 1px solid var(--fp-line);
	border-radius: 999px;
	background: var(--fp-card);
	font-size: 13px;
	font-weight: 600;
}

/* The full table in the «مشخصات فنی» tab: two columns, label on a tinted band. */
.fp-tabs .fp-specs {
	display: grid;
	overflow: hidden;
	border: 1px solid var(--fp-line);
	border-radius: 16px;
}

.fp-tabs .fp-specs__row {
	display: grid;
	grid-template-columns: minmax(120px, 240px) minmax(0, 1fr);
	gap: 0;
	padding: 0;
	border-block-end: 1px solid var(--fp-line);
}

.fp-tabs .fp-specs__row:last-child {
	border-block-end: 0;
}

.fp-tabs .fp-specs dt,
.fp-tabs .fp-specs dd {
	padding: 14px 18px;
	line-height: 1.8;
}

.fp-tabs .fp-specs dt {
	background: var(--fp-soft);
	color: var(--fp-muted);
	font-size: 14px;
}

.fp-tabs .fp-specs dd {
	font-size: 14px;
	text-align: start;
}

.fp-tabs .fp-specs__chips {
	justify-content: flex-start;
}

.fp-tabs .fp-specs__row:hover dd {
	background: color-mix(in srgb, var(--fp-accent) 4%, transparent);
}

@media (max-width: 640px) {
	.fp-tabs .fp-specs__row {
		grid-template-columns: 1fr;
	}

	.fp-tabs .fp-specs dt {
		padding-block: 10px 4px;
		background: none;
		font-size: 13px;
	}

	.fp-tabs .fp-specs dd {
		padding-block: 0 12px;
	}
}

.fp-more {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 4px;
	color: var(--fp-accent) !important;
	font-weight: 700;
}

/* ---------- Price ---------- */

.fp-price {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	padding-block-end: 16px;
	border-block-end: 1px solid var(--fp-line);
}

.fp-price__now {
	display: flex;
	flex-direction: column;
	order: -1;
	color: var(--fp-accent);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.4;
}

.fp-price__now del {
	color: var(--fp-muted);
	font-size: 14px;
	font-weight: 400;
}

.fp-price__now ins {
	text-decoration: none;
}

.fp-price__off {
	align-self: flex-start;
	padding: 2px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--fp-sale) 12%, transparent);
	color: var(--fp-sale);
	font-size: 13px;
	font-weight: 700;
}

.fp-price__off[hidden] {
	display: none;
}

.fp-price.is-out .fp-price__now {
	color: var(--fp-muted);
}

.fp-price__stock {
	inline-size: 100%;
	color: var(--fp-sale);
	font-weight: 700;
}

/* ---------- Options and buying ---------- */

.fp-buy {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.fp-attr__label {
	margin-block-end: 10px !important;
	font-weight: 700;
}

.fp-attr__label b {
	font-weight: 500;
}

.fp-attr__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fp-opt {
	min-inline-size: 64px;
	min-block-size: 44px;
	padding-inline: 16px;
	border: 1.5px solid var(--fp-line);
	border-radius: 12px;
	background: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}

.fp-opt:hover {
	border-color: color-mix(in srgb, var(--fp-accent) 50%, var(--fp-line));
}

.fp-opt[aria-pressed="true"] {
	border-color: var(--fp-accent);
	background: color-mix(in srgb, var(--fp-accent) 10%, #fff);
	color: var(--fp-accent);
}

/* A colour is just its circle; the chosen one gets a ring with a gap. */
.fp-opt.is-color {
	display: grid;
	place-items: center;
	min-inline-size: 0;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
}

.fp-opt.is-color:hover,
.fp-opt.is-color[aria-pressed="true"] {
	background: none;
}

.fp-opt__dot {
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
	background: var(--swatch);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
	transition: box-shadow 0.2s;
}

.fp-opt.is-color:hover .fp-opt__dot {
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14), 0 0 0 3px #fff, 0 0 0 5px var(--fp-line);
}

.fp-opt.is-color[aria-pressed="true"] .fp-opt__dot {
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14), 0 0 0 3px #fff, 0 0 0 5px var(--fp-accent);
}

.fp-opt.is-color:disabled .fp-opt__dot {
	background: linear-gradient(135deg, transparent 46%, #999 46% 54%, transparent 54%), var(--swatch);
}

.fp-opt:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* WooCommerce's selects stay in the form; the buttons above drive them. */
:is(.fp-buy, .fp-mbar__qty) table.variations,
:is(.fp-buy, .fp-mbar__qty) .reset_variations,
:is(.fp-buy, .fp-mbar__qty) .woocommerce-variation-price {
	display: none !important;
}

:is(.fp-buy, .fp-mbar__qty) .woocommerce-variation-availability,
.fp-buy .woocommerce-variation-description {
	color: var(--fp-muted);
	font-size: 13px;
}

/* Sold, left, dates. */
.fp-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0 0 10px !important;
	padding: 0 !important;
	list-style: none;
	color: var(--fp-muted);
	font-size: 13px;
}

.fp-stats li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.fp-stats svg {
	flex: none;
	color: var(--fp-accent);
}

.fp-stats .is-left {
	color: var(--fp-sale);
	font-weight: 700;
}

.fp-stats .is-left svg {
	color: currentColor;
}

.fp-stats b {
	color: #1d1730;
}

.fp-stats__bar {
	display: block;
	block-size: 6px;
	margin-block-end: 14px;
	border-radius: 6px;
	background: linear-gradient(to left, var(--fp-sale) var(--left), var(--fp-line) var(--left));
}

[dir="ltr"] .fp-stats__bar {
	background: linear-gradient(to right, var(--fp-sale) var(--left), var(--fp-line) var(--left));
}

.fp-buy__row {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fp-buy.has-price .fp-buy__row {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.fp-buy.has-price .fp-price {
	padding: 0;
	border: 0;
}

.fp-buy.has-price .fp-buy__form {
	flex: 1 1 260px;
}

.fp-buy form.cart,
.fp-buy .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 0;
}

.fp-buy .single_variation_wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	inline-size: 100%;
}

:is(.fp-buy, .fp-mbar__qty) .quantity {
	border-radius: var(--fp-btn-radius, 12px) !important;
	display: flex;
	align-items: center;
	border: 1.5px solid var(--fp-line);
	border-radius: 12px;
	background: #fff;
}

.fp-buy.no-qty .quantity,
.fp-mbar__qty.no-qty .quantity {
	display: none;
}

:is(.fp-buy, .fp-mbar__qty) .quantity input.qty {
	inline-size: 44px;
	min-block-size: 48px;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 700;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

:is(.fp-buy, .fp-mbar__qty) .quantity input::-webkit-inner-spin-button,
:is(.fp-buy, .fp-mbar__qty) .quantity input::-webkit-outer-spin-button {
	margin: 0;
	appearance: none;
}

.fp-qty-btn {
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 48px;
	border: 0;
	background: none;
	color: var(--fp-muted);
	cursor: pointer;
}

.fp-qty-btn:hover {
	color: var(--fp-accent);
}

.fp .fp-buy button.single_add_to_cart_button,
.fp-buy .single_add_to_cart_button {
	border-radius: var(--fp-btn-radius, 12px) !important;
	display: inline-flex;
	/* One line always: when the row is too narrow the button goes under the quantity, full width. */
	flex: 1 1 150px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 52px;
	white-space: nowrap;
	padding-inline: 24px;
	border: 0;
	border-radius: 12px;
	background: var(--fp-accent) !important;
	color: #fff !important;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.2s;
}

.fp-buy .single_add_to_cart_button::before {
	content: "";
	inline-size: 20px;
	block-size: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fp-buy .single_add_to_cart_button:hover {
	filter: brightness(1.08);
}

.fp-buy .single_add_to_cart_button.disabled,
.fp-buy .single_add_to_cart_button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* No option chosen yet: a live button that asks for one, not a faded one. */
.fp-buy .single_add_to_cart_button.disabled.is-choose {
	opacity: 1;
	cursor: pointer;
}

.fp-buy .single_add_to_cart_button.is-choose::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
}

:is(.fp-buy, .fp-mbar__qty) .stock {
	margin: 0;
	color: var(--fp-muted);
}

:is(.fp-buy, .fp-mbar__qty) .stock.out-of-stock {
	color: var(--fp-sale);
	font-weight: 700;
}

.fp-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
}

.fp-action {
	border-radius: var(--fp-btn-radius, 12px) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 48px;
	padding-inline: 12px;
	border: 1.5px solid var(--fp-line);
	border-radius: 12px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.fp-action:hover,
.fp-action[aria-pressed="true"] {
	border-color: var(--fp-accent);
	color: var(--fp-accent);
}

.fp-action[aria-pressed="true"] svg {
	fill: currentColor;
}

/* ---------- Services ---------- */

.fp-services ul {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fp-services li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.fp-services li > svg {
	flex: none;
	color: var(--fp-accent);
}

.fp-services span {
	display: flex;
	flex-direction: column;
	line-height: 1.6;
}

.fp-services small {
	color: var(--fp-muted);
	font-size: 12px;
}

.fp-services a {
	align-self: flex-start;
	color: var(--fp-muted);
	unicode-bidi: isolate;
}

.fp-seller {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-start: 18px !important;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--fp-line);
	font-weight: 700;
}

.fp-seller svg {
	inline-size: 40px;
	block-size: 40px;
	padding: 8px;
	border-radius: 12px;
	background: var(--fp-accent);
	color: #fff;
}

/*
 * Services laid out by their own width: a list in the narrow buy column, one
 * row across when placed in a wide spot (e.g. «ته صفحه», under the description).
 */
.fp-el--services {
	container-type: inline-size;
}

.fp__row:is(.fp__row--head, .fp__row--bottom, .fp__row--foot) .fp-services,
.fp-widget .fp-services {
	padding: 20px;
	border: 1px solid var(--fp-line);
	border-radius: var(--fp-radius, 20px);
	background: var(--fp-card);
}

@container (min-width: 640px) {
	/* One row across: it gets its own card, wherever it sits (a Farin row or an Elementor column). */
	.fp-services {
		display: flex;
		align-items: center;
		gap: 24px;
		padding: 20px;
		border: 1px solid var(--fp-line);
		border-radius: var(--fp-radius, 20px);
		background: var(--fp-card);
	}

	.fp-services ul {
		display: grid;
		flex: 1;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 16px 24px;
	}

	.fp-services .fp-seller {
		flex: none;
		margin: 0 !important;
		padding-block: 0;
		padding-inline-start: 24px;
		border-block-start: 0;
		border-inline-start: 1px solid var(--fp-line);
	}
}

/* An option out of stock with what else is chosen: faded and crossed, still clickable. */
.fp-opt.is-out {
	position: relative;
	opacity: 0.4;
	cursor: not-allowed;
}

.fp-opt.is-out::after {
	content: "";
	position: absolute;
	inset: 50% 6px auto;
	block-size: 1.5px;
	background: currentColor;
	transform: rotate(-20deg);
	pointer-events: none;
}

/* A group still to choose, after «افزودن» was pressed too soon. */
.fp-attr.is-need .fp-attr__label {
	color: #dc2626;
	animation: fp-shake 0.4s;
}

@keyframes fp-shake {
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

/* «از ۶۹۰٬۰۰۰ تومان»: the cheapest variation. */
.farin-from {
	color: var(--fp-muted, #6b6580);
	font-size: 0.8em;
	font-weight: 500;
}

/* ---------- Options on their own («رنگ و گونه‌ها») ---------- */

.fp-vars {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-block: 4px;
}

/* ---------- Installments under the gallery ---------- */

.fp-inst {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	border: 1px solid var(--fp-line);
	border-radius: var(--fp-radius, 20px);
	background: var(--fp-card);
}

.fp-inst[hidden] {
	display: none;
}

.fp-inst__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	font-weight: 800;
}

.fp-inst__title svg {
	color: var(--fp-accent);
}

.fp-inst ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp-inst li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 14px;
	background: var(--fp-soft);
}

.fp-inst li[hidden] {
	display: none;
}

.fp-inst li img,
.fp-inst__letter {
	flex: none;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 12px;
	background: #fff;
	object-fit: contain;
}

.fp-inst__letter {
	display: grid;
	place-items: center;
	color: var(--fp-accent);
	font-weight: 800;
}

.fp-inst__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
	font-size: 13px;
	line-height: 1.6;
}

.fp-inst__text b {
	font-size: 14px;
}

.fp-inst__text span {
	color: var(--fp-muted);
}

.fp-inst__note {
	margin: 0;
	color: var(--fp-muted);
	font-size: 12px;
	line-height: 1.7;
}

/* ---------- Tabs ---------- */

.fp-tabs {
	padding: 8px 24px 24px;
	border: 1px solid var(--fp-line);
	border-radius: var(--fp-radius);
	background: var(--fp-card);
}

.fp-tabs__list {
	display: flex;
	gap: 8px;
	margin-block-end: 20px;
	overflow-x: auto;
	border-block-end: 1px solid var(--fp-line);
	scrollbar-width: none;
}

.fp-tab {
	position: relative;
	flex: none;
	min-block-size: 52px;
	padding-inline: 16px;
	border: 0;
	background: none;
	color: var(--fp-muted) !important;
	font-weight: 600;
	cursor: pointer;
}

.fp-tab[aria-selected="true"] {
	color: var(--fp-accent) !important;
}

.fp-tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	inset-inline: 8px;
	inset-block-end: -1px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--fp-accent);
}

.fp-panel {
	line-height: 2.1;
}

.fp-panel[hidden] {
	display: none;
}

.fp-panel img {
	max-inline-size: 100%;
	height: auto;
	border-radius: 16px;
}

.fp-checks {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-block-start: 16px !important;
}

.fp-checks li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fp-checks li::before {
	content: "✓";
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 20px;
	block-size: 20px;
	border-radius: 50%;
	background: var(--fp-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.fp-panel #reviews .commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp-panel #reviews .comment_container {
	padding: 16px 0;
	border-block-end: 1px solid var(--fp-line);
}

.fp-panel #reviews .avatar {
	float: inline-start;
	margin-inline-end: 12px;
	border-radius: 50%;
}

.fp-panel :is(input[type="text"], input[type="email"], textarea, select) {
	inline-size: 100%;
	padding: 10px 14px;
	border: 1.5px solid var(--fp-line);
	border-radius: 12px;
	font: inherit;
}

.fp-panel .submit {
	min-block-size: 48px;
	padding-inline: 24px;
	border: 0;
	border-radius: 12px;
	background: var(--fp-accent);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* ---------- Related ---------- */

.fp-related {
	padding: 20px;
	border: 1px solid var(--fp-line);
	border-radius: var(--fp-radius);
	background: var(--fp-card);
}

.fp-related__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 16px;
}

.fp-related__head h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
}

/* «اسلاید محصولات»: one row to swipe, arrows beside the title on wide screens. */
.fp-slider {
	padding: 20px 24px 24px;
	border: 1px solid var(--fp-line);
	border-radius: var(--fp-radius, 20px);
	background: var(--fp-card);
}

.fp-slider__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 16px;
}

.fp-slider__head h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
}

/* The row and its arrows: round buttons over the two ends of the row, gone at its ends. */
.fp-slider__stage {
	position: relative;
}

.fp-slider__arrow {
	position: absolute;
	inset-block-start: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--fp-line);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 18px rgb(20 16 40 / 0.1);
	color: inherit;
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.2s, border-color 0.2s;
}

.fp-slider__arrow:hover {
	border-color: color-mix(in srgb, var(--fp-accent) 45%, var(--fp-line));
}

.fp-slider__arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.fp-slider__arrow.is-back {
	inset-inline-start: -14px;
}

.fp-slider__arrow.is-next {
	inset-inline-end: -14px;
}

.fp-slider__arrow.is-back svg {
	transform: rotate(-90deg);
}

.fp-slider__arrow.is-next svg {
	transform: rotate(90deg);
}

/* The slider's own card: a badge, the old price above the new, a full-width button. */
.fp-card.is-wide {
	position: relative;
	align-items: stretch;
	text-align: start;
}

.fp-card.is-wide .fp-card__link {
	align-items: stretch;
}

.fp-card.is-wide .fp-card__link img {
	max-inline-size: none;
	border-radius: 12px;
	background: var(--fp-soft);
}

.fp-card.is-wide .fp-card__name {
	display: -webkit-box;
	min-block-size: 3.2em;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.fp-card.is-wide .fp-card__price {
	display: flex;
	flex-direction: column;
	min-block-size: 3em;
	justify-content: flex-end;
	font-size: 14px;
}

.fp-card.is-wide .fp-card__price del {
	display: block;
	color: var(--fp-muted);
	font-size: 12px;
	font-weight: 400;
}

.fp-card.is-wide .fp-card__cart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	inline-size: auto;
	block-size: 40px;
	margin-block-start: auto;
	border-radius: 12px;
	background: var(--fp-accent);
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
}

.fp-card__off {
	position: absolute;
	inset-block-start: 18px;
	inset-inline-start: 18px;
	z-index: 1;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--fp-sale);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

/* Phones: dots under the row, one for each screenful. */
.fp-slider__dots {
	display: none;
	justify-content: center;
	gap: 6px;
	margin-block-start: 14px;
}

.fp-slider__dots i {
	inline-size: 6px;
	block-size: 6px;
	border-radius: 999px;
	background: var(--fp-line);
	transition: inline-size 0.2s, background-color 0.2s;
}

.fp-slider__dots i.is-on {
	inline-size: 18px;
	background: var(--fp-accent);
}

.fp-slider__track {
	display: flex;
	/* An RTL scroller can still widen the page in Chrome; its cards stay inside. */
	contain: paint;
	gap: 12px;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
}

.fp-slider__track::-webkit-scrollbar {
	display: none;
}

.fp-slider__track .fp-card {
	flex: 0 0 196px;
	scroll-snap-align: start;
}

/* The shop's cards in the row (archive.css draws them). */
.fp-slider__track > .fs-card {
	flex: 0 0 210px;
	scroll-snap-align: start;
}

/* WooCommerce's «مشاهده سبد خرید» after an add would push the card out of line; the cart icon in the header says it. */
.fp-card .added_to_cart {
	display: none !important;
}

.fp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 12px;
}

.fp-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px;
	border: 1px solid var(--fp-line);
	border-radius: 16px;
	text-align: center;
}

.fp-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.fp-card__link img {
	inline-size: 100%;
	max-inline-size: 120px;
	aspect-ratio: 1;
	height: auto;
	object-fit: contain;
}

.fp-card__name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
}

.fp-card__price {
	/* The page's own price carries the accent; card prices read like the shop's. */
	color: inherit;
	font-size: 13px;
	font-weight: 800;
}

.fp-card__price del {
	display: none;
}

.fp-card__price ins {
	text-decoration: none;
}

.fp-card__cart {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--fp-accent) 12%, transparent);
	color: var(--fp-accent) !important;
}

.fp-card__cart.added {
	background: var(--fp-accent);
	color: #fff !important;
}

.fp-card .added_to_cart {
	font-size: 12px;
}

/* ---------- Lightbox ---------- */

.fp-lightbox {
	inline-size: 100vw;
	max-inline-size: none;
	block-size: 100dvh;
	max-block-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #0a090e;
	color: #fff;
}

.fp-lightbox[open] {
	display: grid;
	place-items: center;
	animation: fp-lb-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fp-lightbox::backdrop {
	background: transparent;
}

@keyframes fp-lb-in {
	from {
		opacity: 0;
		transform: scale(0.97);
	}
}

/* A strip of whole-screen pictures that snaps one at a time under the finger. */
.fp-lightbox__track {
	display: flex;
	inline-size: 100vw;
	block-size: 100dvh;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior: contain;
	scrollbar-width: none;
	touch-action: pan-x pinch-zoom;
}

.fp-lightbox__track::-webkit-scrollbar {
	display: none;
}

.fp-lightbox__track[hidden],
.fp-lightbox__media[hidden],
.fp-lightbox__count[hidden] {
	display: none;
}

.fp-lightbox__slide {
	display: grid;
	flex: 0 0 100%;
	place-items: center;
	margin: 0;
	padding: 72px 16px;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.fp-lightbox__slide img {
	max-inline-size: min(100%, 1100px);
	max-block-size: 100%;
	border-radius: 12px;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

.fp-lightbox__count {
	position: absolute;
	inset-block-end: 20px;
	inset-inline-start: 50%;
	margin: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.14);
	color: #fff;
	font-size: 13px;
	transform: translateX(50%);
	backdrop-filter: blur(12px);
}

@media (prefers-reduced-motion: reduce) {
	.fp-lightbox[open] {
		animation: none;
	}
}

/* Phones swipe; the arrows only crowd the picture. */
@media (hover: none) and (pointer: coarse) {
	.fp-lightbox [data-lb-step] {
		display: none;
	}
}

.fp-lightbox__media {
	display: grid;
	place-items: center;
	inline-size: min(92vw, 1100px);
	block-size: 86dvh;
}

.fp-lightbox__media :is(img, video, iframe) {
	max-inline-size: 100%;
	max-block-size: 100%;
	border: 0;
	border-radius: 12px;
	object-fit: contain;
}

.fp-lightbox__media iframe {
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	block-size: auto;
}

.fp-lightbox button {
	position: absolute;
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.12);
	color: #fff;
	cursor: pointer;
}

.fp-lightbox button[hidden] {
	display: none;
}

.fp-lightbox [data-lb-close] {
	inset-block-start: 16px;
	inset-inline-end: 16px;
}

.fp-lightbox [data-lb-step="-1"] {
	inset-block-start: calc(50% - 24px);
	inset-inline-start: 16px;
}

.fp-lightbox [data-lb-step="1"] {
	inset-block-start: calc(50% - 24px);
	inset-inline-end: 16px;
}

.fp-lightbox [data-lb-step="-1"] svg {
	transform: rotate(-90deg);
}

.fp-lightbox [data-lb-step="1"] svg {
	transform: rotate(90deg);
}

/* ---------- Phone buy bar ---------- */

/*
 * Phones: the one place to buy, floating above the page's end (and above the
 * bottom bar). Price and «افزودن به سبد» always show; the handle (or a pull
 * up) opens the rest of the buy box above them like an accordion.
 */
.fp-mbar {
	--fp-mbar-gap: 10px;
	--fp-mbar-ease: cubic-bezier(0.32, 0.72, 0, 1);
	position: fixed;
	inset-inline: 12px;
	inset-block-end: calc(var(--fp-mbar-gap) + env(safe-area-inset-bottom));
	z-index: 850;
	display: flex;
	flex-direction: column;
	border: 1px solid color-mix(in srgb, var(--fp-line) 70%, transparent);
	border-radius: 20px;
	background: rgb(255 255 255 / 0.94);
	box-shadow: 0 12px 32px rgb(20 16 40 / 0.16);
	backdrop-filter: blur(14px) saturate(1.4);
	animation: fp-mbar-in 0.3s var(--fp-mbar-ease);
	touch-action: pan-y;
}

@keyframes fp-mbar-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

.fp-mbar[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.fp-mbar,
	.fp-mbar__more {
		animation: none;
		transition: none;
	}
}

/* The opener: a labelled tab across the top, its arrow saying which way it goes. */
.fp-mbar__grab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-block-size: 36px;
	margin: 0;
	padding: 6px 16px 0;
	border: 0;
	border-radius: 20px 20px 0 0;
	background: none;
	color: var(--fp-muted);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.fp-mbar__grab[hidden] {
	display: none;
}

/* With no opener, the count row starts the bar. */
.fp-mbar:has(> .fp-mbar__grab[hidden]) .fp-mbar__qty {
	padding-block-start: 12px;
}

.fp-mbar__grab svg {
	transform: rotate(180deg);
	transition: transform 0.3s var(--fp-mbar-ease);
}

.fp-mbar.is-open .fp-mbar__grab {
	color: var(--fp-accent);
}

.fp-mbar.is-open .fp-mbar__grab svg {
	transform: none;
}

/* The accordion: 0 rows tall when shut, its content's height when open. */
.fp-mbar__more {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.38s var(--fp-mbar-ease);
}

.fp-mbar.is-open .fp-mbar__more {
	grid-template-rows: 1fr;
}

.fp-mbar__inner {
	min-block-size: 0;
	max-block-size: min(56dvh, 480px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	padding-inline: 16px;
	visibility: hidden;
	transition: visibility 0s 0.38s;
}

.fp-mbar__inner::-webkit-scrollbar {
	display: none;
}

.fp-mbar.is-open .fp-mbar__inner {
	visibility: visible;
	padding-block-end: 12px;
	transition: none;
}

.fp-mbar__main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 8px 8px;
	padding-inline-start: 16px;
}

/* What moved in from the page: no card of its own, its own add button hidden (the bar has one). */
.fp-mbar__inner > * {
	margin: 0;
	padding: 12px 0 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.fp-mbar__inner > * + * {
	margin-block-start: 12px;
	border-block-start: 1px solid var(--fp-line);
}

/* Count and stock: one row above the price, the stock at the start, the count at the end. */
.fp-mbar__qty {
	padding: 4px 16px 8px;
	border-block-end: 1px solid var(--fp-line);
	margin-block-end: 8px;
}

.fp-mbar__qty:empty {
	display: none;
}

.fp-mbar__qty .fp-buy__row,
.fp-mbar__qty .fp-buy__form {
	margin: 0;
	padding: 0;
	border: 0;
}

.fp-mbar__qty .fp-buy__form {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.fp-mbar__qty .single_add_to_cart_button,
.fp-mbar__qty .fp-buy__row > .fp-price,
.fp-mbar__qty .woocommerce-variation-price {
	display: none !important;
}

.fp-mbar__qty form.cart {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	margin-inline-start: auto;
}

.fp-mbar__qty .quantity input.qty {
	min-block-size: 40px;
}

/* A variable product: its chosen variation's stock beside the count, the same row. */
.fp-mbar__qty form.variations_form {
	flex: 1;
}

.fp-mbar__qty .single_variation_wrap {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.fp-mbar__qty .single_variation_wrap .stock {
	margin: 0;
}

.fp-mbar__qty .stock {
	font-size: 13px;
}

/* The wishlist as a heart beside the count; its words stay for screen readers. */
.fp-mbar__qty [data-fp-wish] {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1.5px solid var(--fp-line);
	border-radius: 12px;
	background: #fff;
}

.fp-mbar__qty [data-fp-wish] span {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Nothing left in the actions once the heart moved out: no empty row in the folded part. */
.fp-mbar__inner .fp-el--actions:not(:has(.fp-action)) {
	display: none;
}

.fp-mbar__inner .fp-el--actions:not(:has(.fp-action)) + * {
	margin-block-start: 0;
	border-block-start: 0;
}

/* «از» is for lists of products; here the price is this product's. */
.fp .farin-from,
.fp-mbar .farin-from {
	display: none;
}

.fp-mbar__price {
	color: var(--fp-accent);
	font-weight: 800;
	line-height: 1.4;
}

.fp-mbar__price del {
	display: block;
	color: var(--fp-muted);
	font-size: 12px;
	font-weight: 400;
}

.fp-mbar__price ins {
	text-decoration: none;
}

.fp-mbar__buy {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 48px;
	padding-inline: 20px;
	border: 0;
	border-radius: 14px;
	background: var(--fp-accent);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

@media (min-width: 1024px) {
	.fp-mbar {
		display: none !important;
	}
}

/* ---------- Narrow: by the page's own width, not the screen's ----------
 * In an Elementor column or a narrow window the page stacks the same way. */

.fp {
	container: fp / inline-size;
	/* Measured at its full width inside a wrapping Elementor container, not at zero. */
	contain-intrinsic-inline-size: 100000px;
}

.fp-gallery__stage {
	container: fpstage / inline-size;
}

@media (max-width: 1023.98px) {
	.fp {
		--fp-gap: 20px;
		padding-inline: 16px;
	}

	.fp:has(.fp-mbar:not([hidden])) {
		padding-block-end: 96px;
	}

	/*
	 * The buy box lives in the floating bar (product.js moves it there): its
	 * price leaves the page, and so does its card when nothing is left in it
	 * to choose (a product without options).
	 */
	.fp.has-mbar .fp__zone:has([data-fp-buy]) > .fp-el--price {
		display: none;
	}

	.fp.has-mbar .fp__zone:has([data-fp-buy]):not(:has(.fp-buy > :not(.fp-buy__row))):not(:has(> .fp-el:not(.fp-el--price, .fp-el--buy))) {
		display: none;
	}

	/* The footer comes after the product: it must not end under the buy bar either. */
	body:not(.has-fbb):has(.fp-mbar:not([hidden])) {
		padding-block-end: var(--fp-mbar-h, calc(72px + env(safe-area-inset-bottom)));
	}
}

/* Middle widths: a column holding only the services goes under the others. */
@container fp (max-width: 1240px) {
	.fp__row--top:has(.fp__zone.is-soft) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fp__row--top .fp__zone.is-soft {
		grid-column: 1 / -1;
		order: 9;
	}

	.fp__zone.is-soft .fp-services ul {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
}

@container fp (max-width: 960px) {
	.fp__row--top,
	.fp__row--top:has(.fp__zone.is-soft),
	.fp__row--bottom {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The gallery first, whatever column it sits in. */
	.fp__zone:has(.fp-el--gallery) {
		order: -1;
	}

	/*
	 * One column: the zones open up into one list, so the name comes right
	 * after the photo and the installments wait until after the choices.
	 */
	.fp__row--top {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.fp__row--top .fp__zone:not(.is-card, .is-soft) {
		display: contents;
	}

	.fp__row--top .fp-el--gallery {
		order: -1;
	}

	.fp__row--top .fp-el--installments {
		order: 1;
	}

	.fp__row--top .fp__zone:is(.is-card, .is-soft) {
		order: 2;
	}

	.fp__zone.is-sticky {
		position: static;
	}

	.fp-gallery,
	.fp-gallery.thumbs-end {
		grid-template-columns: minmax(0, 1fr);
	}

	.fp-thumbs {
		flex-direction: row;
		order: 2;
		overflow-x: auto;
	}

	.fp-thumb {
		flex: none;
		inline-size: 64px;
		block-size: 64px;
	}

	.fp-tabs {
		padding-inline: 16px;
	}
}

/* A narrow dark gallery: the name and highlights go under the picture. */
@container fpstage (max-width: 640px) {
	.fp-gallery.is-hero .fp-slide {
		aspect-ratio: 1 / 1;
		justify-items: center;
		padding: 24px;
	}

	.fp-gallery.is-hero .fp-slide img {
		inline-size: 100%;
	}

	.fp-hero {
		position: static;
		inline-size: auto;
		padding: 20px 20px 0;
	}

	.fp-hero__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fp *,
	.fp-gallery__track {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}

/* «تنها ۴ عدد باقی مانده» above already says it; WooCommerce's stock line is not repeated. */
.fp-buy:has(.fp-stats .is-left) .stock.in-stock {
	display: none;
}

/* The seller inside the phone bar's folded part: a plain row, the part's own line above it. */
.fp-mbar__inner .fp-seller {
	margin: 0 !important;
	padding: 0;
	border: 0;
}