/* Products carousel — structural styles only; colours and spacing come from
   Elementor controls. Uses native scroll-snap instead of a slider library so
   the widget adds no JS payload beyond its own handler. */

.dnk-pc {
	--dnk-pc-cols: 5;
	--dnk-pc-gap: 16px;
	--dnk-pc-title-lines: 1;
	--dnk-pc-arrow-size: 38px;
	--dnk-pc-thumb-ratio: 140%;
	position: relative;
}

.dnk-pc-track {
	display: flex;
	gap: var(--dnk-pc-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	/* Something on this site cancels native smooth scrolling a frame after it
	   starts, which left arrow navigation stuck at the first card. Instant it is. */
	scroll-behavior: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block: 4px;
}

.dnk-pc-track::-webkit-scrollbar {
	display: none;
}

.dnk-pc-item {
	flex: 0 0 calc( ( 100% - ( var(--dnk-pc-cols) - 1 ) * var(--dnk-pc-gap) ) / var(--dnk-pc-cols) );
	min-width: 0;
	scroll-snap-align: start;
}

.dnk-pc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: #fff;
}

.dnk-pc-media {
	position: relative;
}

.dnk-pc-thumb {
	position: relative;
	display: block;
	width: 100%;
	padding-block-end: var(--dnk-pc-thumb-ratio);
	/* the card now has padding, so the image reads as inset rather than bleeding
	   to the border */
	border-radius: 6px;
	overflow: hidden;
}

.dnk-pc-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dnk-pc-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	padding: 12px;
	text-align: start;
}

.dnk-pc-title {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	display: -webkit-box;
	-webkit-line-clamp: var(--dnk-pc-title-lines);
	line-clamp: var(--dnk-pc-title-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dnk-pc-title a {
	color: inherit;
	text-decoration: none;
}

.dnk-pc-price {
	font-size: 14px;
	color: #777;
}

.dnk-pc-price del {
	opacity: 0.6;
	margin-inline-end: 6px;
}

.dnk-pc-action {
	margin-block-start: auto;
	text-align: center;
}

.dnk-pc-btn {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	background-color: #e31e24;
	color: #fff;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dnk-pc-btn.loading {
	opacity: 0.7;
}

.dnk-pc-btn.added::after {
	content: none;
}

/* Arrows sit at the logical edges, so they land on the correct side in RTL
   without any extra rules. */
.dnk-pc-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--dnk-pc-arrow-size);
	height: var(--dnk-pc-arrow-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	color: #e31e24;
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.2s ease;
}

.dnk-pc-prev {
	inset-inline-start: calc( var(--dnk-pc-arrow-size) / -2 );
}

.dnk-pc-next {
	inset-inline-end: calc( var(--dnk-pc-arrow-size) / -2 );
}

.dnk-pc-arrow svg {
	width: 60%;
	height: 60%;
	fill: currentColor;
}

/* Base glyph points to the inline-end; flip it for the "previous" button. */
.dnk-pc-prev svg {
	transform: scaleX(-1);
}

[dir="rtl"] .dnk-pc-prev svg {
	transform: none;
}

[dir="rtl"] .dnk-pc-next svg {
	transform: scaleX(-1);
}

.dnk-pc-arrow--disabled {
	opacity: 0.35;
	pointer-events: none;
}

.dnk-pc-empty {
	margin: 0;
	padding: 16px;
	text-align: center;
	opacity: 0.7;
}

/* فلش‌ها بیرونِ کادر می‌نشینند و ۱۹ پیکسل از هر طرف جا می‌خواهند. ردیف‌های
   صفحه تا ۱۴۴۰ پیکسل پهن می‌شوند، پس روی هر نمایشگری باریک‌تر از حدود
   ۱۵۰۰ پیکسل (از جمله لپ‌تاپ ۱۴۴۰) فلشِ کناری از لبهٔ صفحه بیرون می‌زد و
   کل صفحه افقی اسکرول می‌شد. زیر این عرض، فلش داخل کادر می‌آید. */
@media (max-width: 1500px) {
	.dnk-pc-prev {
		inset-inline-start: 0;
	}

	.dnk-pc-next {
		inset-inline-end: 0;
	}
}

/* The Toman sign itself is applied site-wide from the child theme stylesheet;
   only the per-widget size control lives here. */

/* ---- Quantity stepper ---------------------------------------------------
   Three states, all present in the markup; CSS picks one by data-qty so the
   script only ever writes that one attribute.

     data-qty="0"  → solid bar, just a +
     data-qty="1"  → tinted bar: trash · 1 · +
     data-qty="2+" → tinted bar: −  · n · +

   It always renders at zero on the server because the page comes from cache;
   the script fills in the visitor's real quantity right after load. */

.dnk-pc-qty {
	--dnk-pc-accent: #e31e24;
	--dnk-pc-qty-bg: #fbeaea;
	--dnk-pc-qty-btn-size: 40px;
	/* inline-flex, not flex: the control is sized by its contents, so at zero
	   it is just the square plus rather than a bar stretched across the card */
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	min-height: var(--dnk-pc-qty-btn-size);
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--dnk-pc-qty-bg);
	transition: background-color 0.2s ease;
}

.dnk-pc-qty[data-qty="0"] {
	background-color: var(--dnk-pc-accent);
}

.dnk-pc-qty-btn {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--dnk-pc-qty-btn-size);
	align-self: stretch;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--dnk-pc-accent);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.dnk-pc-qty-btn:hover {
	color: var(--dnk-pc-accent-hover, var(--dnk-pc-accent));
}

.dnk-pc-qty:not([data-qty="0"]):hover {
	background-color: var(--dnk-pc-qty-bg-hover, var(--dnk-pc-qty-bg));
}

.dnk-pc-qty[data-qty="0"]:hover {
	background-color: var(--dnk-pc-accent-hover, var(--dnk-pc-accent));
}

.dnk-pc-qty[data-qty="0"] .dnk-pc-qty-plus:hover {
	color: #fff;
}

.dnk-pc-qty-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.dnk-pc-qty-value {
	flex: 0 0 auto;
	min-width: 32px;
	text-align: center;
	font-weight: 600;
	line-height: 1;
	color: inherit;
}

/* state 0 — the whole bar acts as the add button */
.dnk-pc-qty[data-qty="0"] .dnk-pc-qty-remove,
.dnk-pc-qty[data-qty="0"] .dnk-pc-qty-minus,
.dnk-pc-qty[data-qty="0"] .dnk-pc-qty-value {
	display: none;
}

.dnk-pc-qty[data-qty="0"] .dnk-pc-qty-plus {
	color: #fff;
}

/* state 1 — removing is the only way down, so show a bin instead of a minus */
.dnk-pc-qty[data-qty="1"] .dnk-pc-qty-minus {
	display: none;
}

.dnk-pc-qty:not([data-qty="1"]) .dnk-pc-qty-remove {
	display: none;
}

.dnk-pc-qty--busy {
	opacity: 0.55;
	pointer-events: none;
}

/* ---- Sale price -------------------------------------------------------
   Row one: the price you pay, then the discount badge (DOM order puts the
   badge on the left in RTL). Row two: what it used to cost, struck through.

   The old price drops the Toman sign — it is a reference figure, not an
   amount anyone is being asked to pay, and repeating the unit twice in a
   card this small is noise. */

/* Block + inline-flex rather than a flex column: both rows then follow the
   card's text-align on their own, so the price alignment control keeps working
   without a second rule per alignment. */
.dnk-pc-price--sale {
	display: block;
}

.dnk-pc-price-row {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.dnk-pc-price--sale .dnk-pc-price-now {
	color: var(--dnk-pc-price-now-color, #1a1a1a);
	font-weight: 700;
	text-decoration: none;
	background: none;
}

.dnk-pc-price--sale .dnk-pc-price-was {
	color: var(--dnk-pc-price-was-color, #9b9b9b);
	font-size: 0.82em;
	font-weight: 400;
	text-decoration: line-through;
}

.dnk-pc-price--sale .dnk-pc-price-was .woocommerce-Price-amount::after {
	content: none;
}

.dnk-pc-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4em;
	padding: 1px 6px;
	border-radius: 6px;
	background-color: var(--dnk-pc-badge-bg, #e31e24);
	color: var(--dnk-pc-badge-color, #fff);
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

.dnk-pc-price--sale .dnk-pc-price-was {
	display: block;
	margin-block-start: 2px;
}

/* ---- Cart control floating on the image --------------------------------
   The reference puts the add button over the bottom corner of the photo
   rather than under the card, which keeps the price and name adjacent. */

.dnk-pc-action--overlay {
	position: absolute;
	inset-block-end: 8px;
	inset-inline-end: 8px;
	z-index: 2;
	line-height: 0;
}

.dnk-pc-action--overlay .dnk-pc-qty {
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

/* ---- Hover effects ------------------------------------------------------
   Driven off the card so the whole tile reacts, not just the photo. */

.dnk-pc-thumb img {
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.dnk-pc-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dnk-pc--img-zoom .dnk-pc-card:hover .dnk-pc-thumb img {
	transform: scale(1.07);
}

.dnk-pc--img-out .dnk-pc-card:hover .dnk-pc-thumb img {
	transform: scale(0.94);
}

.dnk-pc--img-fade .dnk-pc-card:hover .dnk-pc-thumb img {
	opacity: 0.75;
}

.dnk-pc--img-lift .dnk-pc-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

@media (prefers-reduced-motion: reduce) {
	.dnk-pc-thumb img,
	.dnk-pc-card {
		transition: none;
	}

	.dnk-pc-card:hover .dnk-pc-thumb img,
	.dnk-pc--img-lift .dnk-pc-card:hover {
		transform: none;
	}
}

/* شمارندهٔ قفل‌شده: موجودی کامل از قبل در سبد است */
.dnk-pc-qty--locked .dnk-pc-qty-plus {
	opacity: .4;
	cursor: not-allowed;
}

/* در موبایل کاروسل با انگشت کشیده می‌شود و فلش‌ها فقط روی کارت‌ها می‌افتند. */
@media (max-width: 767px) {
	.dnk-pc .dnk-pc-arrow {
		display: none;
	}
}