/* Vitrinchi – product blocks. Logical properties: one file for RTL and LTR. Inherits the theme's font and text color. */

.vtc {
	/* Neutral by default: theme "accent" globals are often light greys. Set a brand color in Settings. */
	--vtc-accent: #1b2430;
	text-align: start;
	--vtc-on-accent: #fff;
	--vtc-line: rgba(127, 127, 127, 0.22);
	--vtc-soft: rgba(127, 127, 127, 0.07);
	--vtc-radius: 12px;
	--vtc-gap: 16px;
	--c: var(--vtc-cols, 4);
	clear: both;
	margin-block: 2em;
	margin-inline: 0;
	padding: 0;
	box-sizing: border-box;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.vtc {
		--vtc-line: color-mix(in srgb, currentColor 14%, transparent);
		--vtc-soft: color-mix(in srgb, currentColor 5%, transparent);
	}
}

.vtc *,
.vtc *::before,
.vtc *::after {
	box-sizing: inherit;
}

@media (max-width: 1024px) {
	.vtc {
		--c: var(--vtc-cols-t, 3);
	}
}

@media (max-width: 767px) {
	.vtc {
		--c: var(--vtc-cols-m, 2);
	}

	/* Carousels on phones: one card per view (plus a slice of the next one with "peek"). */
	.vtc.vtc--carousel {
		--c: var(--vtc-cols-mc, 1);
	}
}

/* Head */

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

.vtc .vtc__title {
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

.vtc__tools {
	display: flex;
	flex: none;
	align-items: center;
	gap: 14px;
	margin-inline-start: auto;
}

.vtc__nav {
	display: flex;
	flex: none;
	gap: 8px;
}

.vtc__nav[hidden] {
	display: none;
}

.vtc .vtc__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--vtc-line);
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: inherit;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}

.vtc .vtc__arrow:hover:not(:disabled) {
	border-color: var(--vtc-accent);
	background: var(--vtc-accent);
	color: var(--vtc-on-accent);
}

.vtc .vtc__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.vtc .vtc__arrow:focus-visible,
.vtc .vtc__dot:focus-visible,
.vtc .vtc-card a:focus-visible,
.vtc .vtc__load:focus-visible,
.vtc .vtc__more:focus-visible {
	outline: 2px solid var(--vtc-accent);
	outline-offset: 2px;
}

.rtl .vtc__arrow svg,
[dir="rtl"] .vtc__arrow svg,
.rtl .vtc__more svg,
[dir="rtl"] .vtc__more svg {
	transform: scaleX(-1);
}

/* List */

.vtc .vtc__list {
	display: grid;
	grid-template-columns: repeat(var(--c), minmax(0, 1fr));
	gap: var(--vtc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Themes often indent lists inside post content (padding-inline-start); that would leave a slice of an extra card visible. */
.vtc .vtc__list {
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

.vtc .vtc__list > li {
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vtc .vtc__list > li::before,
.vtc .vtc__list > li::marker {
	content: none;
}

/* Carousel: native scroll with snap (swipe everywhere), arrows and dots from front.js. */

.vtc--carousel .vtc__list {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--c) - 1) * var(--vtc-gap)) / var(--c));
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-block-end: 2px;
}

.vtc--carousel .vtc__list::-webkit-scrollbar {
	display: none;
}

.vtc--carousel .vtc__list > li {
	scroll-snap-align: start;
}

@media (max-width: 767px) {
	.vtc--peek .vtc__list {
		grid-auto-columns: calc((100% - var(--c) * var(--vtc-gap)) / (var(--c) + 0.3));
	}
}

@media (prefers-reduced-motion: reduce) {
	.vtc--carousel .vtc__list {
		scroll-behavior: auto;
	}
}

.vtc__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-block-start: 14px;
}

.vtc__dots[hidden] {
	display: none;
}

.vtc .vtc__dot {
	width: 8px;
	height: 8px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--vtc-line);
	box-shadow: none;
	cursor: pointer;
	transition: width 0.2s, background-color 0.2s;
}

.vtc .vtc__dot[aria-current="true"] {
	width: 22px;
	background: var(--vtc-accent);
}

/* Card */

/* Minimal (default): no frame, no shadow; the image carries the shape. */
.vtc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: transparent;
}

.vtc--card-minimal .vtc-card__media {
	overflow: hidden;
	border-radius: var(--vtc-radius);
}

/* Boxed: a thin frame around the whole card, still flat. */
.vtc--card-boxed .vtc-card {
	overflow: hidden;
	border: 1px solid var(--vtc-line);
	border-radius: var(--vtc-radius);
	transition: border-color 0.2s;
}

.vtc--card-boxed .vtc-card:hover {
	border-color: color-mix(in srgb, currentColor 28%, transparent);
}

.vtc .vtc-card__media {
	position: relative;
	display: block;
	margin: 0;
	background: var(--vtc-soft);
	text-decoration: none;
	line-height: 0;
}

.vtc .vtc-card__media img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.vtc--ratio .vtc-card__media {
	aspect-ratio: var(--vtc-ratio, 1 / 1);
}

.vtc--ratio .vtc-card__media img {
	height: 100%;
	object-fit: contain;
}

.vtc-card__badges {
	position: relative;
	min-height: 0;
	padding: 12px 12px 0;
}

.vtc .vtc-card__badge {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	z-index: 1;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--vtc-accent);
	color: var(--vtc-on-accent);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

.vtc .vtc-card__badge--out {
	inset-inline-start: auto;
	inset-inline-end: 10px;
	background: rgba(27, 36, 48, 0.72);
	color: #fff;
}

.vtc-card__badges .vtc-card__badge {
	position: static;
	display: inline-block;
	margin-inline-end: 6px;
}

.vtc-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: 12px 2px 0;
}

.vtc--card-boxed .vtc-card__body {
	padding: 12px 12px 14px;
}

.vtc .vtc-card__title {
	display: -webkit-box;
	min-height: 3em;
	overflow: hidden;
	color: inherit;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.vtc .vtc-card__title:hover {
	color: var(--vtc-accent);
}

.vtc-card__rating {
	--s: 14px;
	display: block;
	width: calc(var(--s) * 5);
	height: var(--s);
	background: linear-gradient(to right, #f5a623 var(--vtc-rate, 0%), var(--vtc-line) var(--vtc-rate, 0%));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7.1L12 17.3 5.8 21l1.6-7.1L2 9.2l7.1-.6z'/%3E%3C/svg%3E") 0 0 / var(--s) var(--s) repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7.1L12 17.3 5.8 21l1.6-7.1L2 9.2l7.1-.6z'/%3E%3C/svg%3E") 0 0 / var(--s) var(--s) repeat-x;
}

.rtl .vtc-card__rating,
[dir="rtl"] .vtc-card__rating {
	background: linear-gradient(to left, #f5a623 var(--vtc-rate, 0%), var(--vtc-line) var(--vtc-rate, 0%));
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
}

.vtc-card__stock {
	font-size: 0.8em;
	opacity: 0.7;
}

.vtc-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-block-start: auto;
	padding-block-start: 4px;
}

.vtc-card__price {
	min-width: 0;
	font-weight: 700;
	line-height: 1.45;
}

.vtc .vtc-card__price del {
	display: block;
	font-size: 0.82em;
	font-weight: 400;
	opacity: 0.55;
}

.vtc .vtc-card__price ins {
	background: none;
	text-decoration: none;
}

.vtc .vtc-card__cart {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vtc-accent);
	box-shadow: none;
	color: var(--vtc-on-accent);
	line-height: 1;
	text-decoration: none;
	transition: opacity 0.15s, transform 0.15s;
}

.vtc .vtc-card__cart:hover {
	opacity: 0.88;
	color: var(--vtc-on-accent);
}

.vtc .vtc-card__cart.loading {
	opacity: 0.55;
	pointer-events: none;
}

.vtc .vtc-card__cart.loading::after,
.vtc .vtc-card__cart.added::after {
	display: none;
}

.vtc .vtc-card__cart.added {
	background: #1e8e5a;
}

.vtc .vtc-card__cart--link {
	border: 1px solid var(--vtc-line);
	background: transparent;
	color: inherit;
}

.vtc .vtc-card__cart--link:hover {
	border-color: var(--vtc-accent);
	color: var(--vtc-accent);
}

.rtl .vtc-card__cart--link svg,
[dir="rtl"] .vtc-card__cart--link svg {
	transform: scaleX(-1);
}

/* Narrow cards (many columns in a slim post column): price on its own line, a full-width labelled button. */

.vtc-card {
	container-type: inline-size;
}

@container (max-width: 239px) {
	.vtc .vtc-card__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.vtc .vtc-card__cart {
		gap: 6px;
		width: 100%;
		height: 36px;
		border-radius: 999px;
	}

	.vtc .vtc-card__cart svg {
		width: 16px;
		height: 16px;
	}

	.vtc .vtc-card__cart .vtc-card__cart-text {
		position: static !important;
		width: auto;
		height: auto;
		margin: 0;
		overflow: hidden;
		clip: auto;
		font-size: min(0.85em, 8cqi);
		font-weight: 600;
		text-overflow: ellipsis;
	}

	.vtc .vtc-card__price {
		font-size: min(1em, 9.5cqi);
	}

	.vtc .vtc-card__title {
		font-size: min(0.95em, 10cqi);
	}
}

.vtc .added_to_cart {
	flex-basis: 100%;
	font-size: 0.85em;
	text-align: end;
}

.vtc .vtc-card__cart-text,
.vtc .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Foot */

.vtc__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-block-start: 16px;
}

.vtc .vtc__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--vtc-accent);
	font-weight: 600;
	text-decoration: none;
}

.vtc .vtc__more:hover {
	text-decoration: underline;
}

.vtc .vtc__load {
	min-width: 180px;
	min-height: 0;
	margin: 0;
	padding: 10px 22px;
	border: 1px solid var(--vtc-line);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.vtc .vtc__load:hover:not(:disabled) {
	border-color: var(--vtc-accent);
	color: var(--vtc-accent);
}

.vtc .vtc__load:disabled {
	opacity: 0.6;
	cursor: progress;
}

.vtc__status:empty {
	display: none;
}

.vtc__status {
	font-size: 0.85em;
}

/* Theme's own product cards inside the block. */

.vtc--card-theme .vtc__list.products {
	display: grid !important;
	width: auto !important;
	margin: 0 !important;
}

.vtc--carousel.vtc--card-theme .vtc__list.products {
	display: grid !important;
	grid-template-columns: none !important;
}

.vtc--card-theme .vtc__list.products::before,
.vtc--card-theme .vtc__list.products::after {
	display: none !important;
}

.vtc--card-theme .vtc__list.products > li.product {
	float: none !important;
	clear: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

/* Isolation from post-content styles (themes underline, recolor, justify and restyle links and
   WooCommerce buttons inside articles). Only the properties themes are known to touch. */

.vtc a,
.vtc a:hover,
.vtc a:focus {
	border-bottom: 0 !important;
	background-image: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

.vtc .vtc-card__title,
.vtc .vtc-card__title:visited {
	color: inherit !important;
	text-align: start !important;
}

.vtc .vtc-card__title:hover {
	color: var(--vtc-accent) !important;
}

.vtc .vtc__more,
.vtc .vtc__more:visited {
	color: var(--vtc-accent) !important;
}

.vtc .vtc-card__cart:not(.vtc-card__cart--link) {
	border: 0 !important;
	background: var(--vtc-accent) !important;
	color: var(--vtc-on-accent) !important;
}

.vtc .vtc-card__cart.added:not(.vtc-card__cart--link) {
	background: #1e8e5a !important;
}

.vtc .vtc-card__cart--link {
	border: 1px solid var(--vtc-line) !important;
	background: transparent !important;
	color: inherit !important;
}

.vtc .vtc-card__cart--link:hover {
	border-color: var(--vtc-accent) !important;
	color: var(--vtc-accent) !important;
}

.vtc .vtc-card__body,
.vtc .vtc__head {
	text-align: start;
}

/* Shop note ("see more" page) and editor hint. */

.vtc-shop-note,
.vtc-empty {
	margin: 0 0 1.5em;
	padding: 10px 14px;
	border: 1px dashed rgba(127, 127, 127, 0.4);
	border-radius: 8px;
	font-size: 0.9em;
}

/* Minimal card: an outlined round cart button instead of a filled one. */

.vtc--card-minimal .vtc-card__cart:not(.vtc-card__cart--link) {
	border: 1px solid var(--vtc-line) !important;
	background: transparent !important;
	color: inherit !important;
}

.vtc--card-minimal .vtc-card__cart:not(.vtc-card__cart--link):hover {
	border-color: var(--vtc-accent) !important;
	background: var(--vtc-accent) !important;
	color: var(--vtc-on-accent) !important;
}

.vtc--card-minimal .vtc-card__cart.added:not(.vtc-card__cart--link) {
	border-color: #1e8e5a !important;
	background: #1e8e5a !important;
	color: #fff !important;
}

/* "See more" next to the arrows. */

.vtc .vtc__head .vtc__more {
	font-size: 0.9em;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.vtc__head {
		flex-wrap: wrap;
	}
}

/* Elementor loop-item cards: the template decides everything inside the item. */

.vtc--card-elementor .vtc__list > .vtc__item > .elementor {
	height: 100%;
}

/* An amount never breaks inside ("2,880,000 تومان" stays together). */
.vtc .vtc-card__price .amount {
	white-space: nowrap;
}