/* ZHIYAR — homepage product carousels (best-selling / most-liked / all
   products). Minimal thin-border cards (not the site's heavy decorative
   glass frame — this row needs to stay lean so more cards fit on screen),
   matching the site's own emerald/gold/cream palette. A horizontal
   scroll-snap row with arrow controls, not a JS slider library. */

.zhiyar-carousel {
	margin: 0 0 22px;
}

.zhiyar-carousel:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * On-sale row's outer promo frame — a grass-green panel (user-specified
 * #6bc92c) wrapping the whole row, with an icon/label/view-all side panel
 * instead of the plain heading the other rows use. Side-panel text/icons
 * switched to the site's own dark emerald (var(--ast-global-color-2)) for
 * contrast and brand harmony — white text (the original design, back when
 * this frame used a darker #87bf3c) doesn't read clearly against this
 * brighter green.
 * ------------------------------------------------------------------- */
.zhiyar-carousel-sale-frame {
	display: flex;
	align-items: stretch;
	gap: 18px;
	padding: 20px;
	border-radius: 22px;
	background: #6bc92c;
	box-shadow: 0 18px 36px -24px rgba(107, 201, 44, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.zhiyar-carousel-sale-frame .zhiyar-carousel__viewport {
	flex: 1 1 auto;
	min-width: 0;
}

.zhiyar-carousel-sale-frame__side {
	flex: 0 0 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	/* Dark emerald, not white — the frame's background is now a light green,
	   so text needs to go dark for contrast, and this is the exact color
	   already used for headings elsewhere on the site (var(--ast-global-
	   color-2)), which is what actually makes this row read as "in harmony"
	   with the rest of the page rather than as a separate colored banner. */
	color: var(--ast-global-color-2, #1a3d2e);
}

.zhiyar-carousel-sale-frame__icon {
	display: inline-flex;
	width: 34px;
	height: 34px;
	color: var(--ast-global-color-2, #1a3d2e);
	animation: zhiyarSaleWave 2.6s ease-in-out infinite;
	transform-origin: 50% 85%;
}

.zhiyar-carousel-sale-frame__icon svg {
	width: 100%;
	height: 100%;
}

@keyframes zhiyarSaleWave {
	0%, 100% {
		transform: rotate(0deg) scale(1);
	}
	25% {
		transform: rotate(-10deg) scale(1.06);
	}
	50% {
		transform: rotate(0deg) scale(1.12);
	}
	75% {
		transform: rotate(10deg) scale(1.06);
	}
}

.zhiyar-carousel-sale-frame__label {
	font-size: 16px;
	font-weight: 900;
	color: var(--ast-global-color-2, #1a3d2e);
	line-height: 1.4;
}

.zhiyar-carousel-sale-frame__viewall {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(26, 61, 46, 0.1);
	color: var(--ast-global-color-2, #1a3d2e) !important;
	font-size: 11.5px;
	font-weight: 800;
	text-decoration: none;
	transition: background 0.2s ease;
}

.zhiyar-carousel-sale-frame__viewall:hover {
	background: rgba(26, 61, 46, 0.18);
}

.zhiyar-carousel-sale-frame__viewall svg {
	width: 12px;
	height: 12px;
}

@media (max-width: 599px) {
	.zhiyar-carousel-sale-frame {
		gap: 10px;
		padding: 14px;
		border-radius: 18px;
	}

	.zhiyar-carousel-sale-frame__side {
		flex-basis: 92px;
		gap: 4px;
	}

	.zhiyar-carousel-sale-frame__icon {
		width: 26px;
		height: 26px;
	}

	.zhiyar-carousel-sale-frame__label {
		font-size: 12px;
	}

	.zhiyar-carousel-sale-frame__viewall {
		font-size: 10px;
		padding: 4px 9px;
	}
}

.zhiyar-carousel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
}

.zhiyar-carousel__heading {
	margin: 0;
	font-size: 1.25em;
	font-weight: 700;
	color: var(--ast-global-color-2, #1a3d2e);
	/* Header row is space-between (view-all button on the far side, heading
	   on the near/right side per RTL reading order) — order:1 keeps the
	   heading visually first (right) regardless of source order. */
	order: 1;
}

/* "مشاهده همه" pill next to the section heading — plain-page context (not
   the green promo frame, which already has its own __viewall variant above),
   a light bordered ghost button in the site's gold accent. */
.zhiyar-carousel__viewall {
	order: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid rgba(201, 160, 84, 0.5);
	background: rgba(201, 160, 84, 0.06);
	color: var(--ast-global-color-1, #a9813f) !important;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.zhiyar-carousel__viewall:hover {
	background: rgba(201, 160, 84, 0.14);
	border-color: rgba(201, 160, 84, 0.75);
	color: var(--ast-global-color-1, #a9813f) !important;
}

.zhiyar-carousel__viewall svg {
	width: 13px;
	height: 13px;
}

@media (max-width: 599px) {
	.zhiyar-carousel__viewall {
		padding: 6px 11px;
		font-size: 11px;
	}
}

.zhiyar-carousel__viewport {
	position: relative;
}

/* Scroll track — snap, smooth, no visible scrollbar (arrows + swipe drive it).
   A small gap, not the site's usual generous spacing — the whole point here
   is showing more products per screen. */
.zhiyar-carousel__track {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin: 0;
	padding: 4px 2px 8px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.zhiyar-carousel__track::-webkit-scrollbar {
	display: none;
}

.zhiyar-carousel__card {
	flex: 0 0 175px;
	scroll-snap-align: start;
}

.zhiyar-carousel__card-link,
.zhiyar-carousel__card-link:hover,
.zhiyar-carousel__card-link * {
	text-decoration: none !important;
}

/* Digikala-style card: a plain white, opaque, shadowed rounded panel — a
   deliberate, explicit departure from the glass/translucent language used
   everywhere else on the site (product grid, banners), scoped to just this
   carousel card. Both the image frame and the title/price area below sit
   inside this one white surface, not two separately-styled pieces. */
.zhiyar-carousel__card-link {
	display: flex;
	flex-direction: column;
	color: inherit;
	height: 100%;
	padding: 8px 8px 10px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid rgba(18, 36, 28, 0.06);
	box-shadow: 0 2px 10px -4px rgba(18, 36, 28, 0.12);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.zhiyar-carousel__card-link:hover {
	box-shadow: 0 10px 22px -8px rgba(18, 36, 28, 0.22);
	transform: translateY(-2px);
}

/* Square image tile, plain white — no blur/tint, matching the reference. */
.zhiyar-carousel__frame {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	margin-bottom: 8px;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.zhiyar-carousel__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6px;
	box-sizing: border-box;
}

/* Discount-percent badge, top-left of the image (RTL: inset-inline-end) —
   matches the reference's badge placement. Separate from (and replaces) the
   price component's own inline badge, hidden below. */
.zhiyar-carousel__discount {
	position: absolute;
	top: 6px;
	inset-inline-end: 6px;
	z-index: 2;
	padding: 3px 7px;
	border-radius: 7px;
	background: #dc2626;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.6;
}

/* The like button's default size (zhiyar-product-likes.css) is tuned for a
   full-width shop-grid card — shrink it to match this narrower card. Kept on
   the opposite corner from the discount badge above. */
.zhiyar-carousel__frame .zhiyar-like-btn--loop {
	top: 6px;
	inset-inline-start: 6px;
	inset-inline-end: auto;
	width: 22px;
	height: 22px;
	padding: 5px;
}

/* No-op wrapper around title+price in the normal rows — only becomes a
   visible box on the green discount row, see below. */
.zhiyar-carousel__info {
	display: contents;
}

.zhiyar-carousel__title {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ast-global-color-3, #12241c);
	margin-bottom: 2px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* English name under the title — single line, ellipsized, small and muted
   so it doesn't compete with the Persian title or crowd the narrow card. */
.zhiyar-name-en--carousel {
	font-size: 10px;
	margin: 0 0 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The price component already renders via get_price_html() in its natural
   two-row STACKED layout (see .zhiyar-price-component in zhiyar-pricing.css)
   — struck-through old price (small, muted) above the bold final price +
   stacked "تو/مان" mark, exactly the Digikala reference layout. Its own
   inline percent badge is hidden here since the image-corner badge above
   already covers that job; everything else is just resized for a narrow
   carousel card, not restructured. */
.zhiyar-carousel__price .zhiyar-price-component {
	gap: 2px;
}

.zhiyar-carousel__price .zhiyar-price-pct-badge {
	display: none;
}

.zhiyar-carousel__price .zhiyar-price-original {
	font-size: 11px;
}

.zhiyar-carousel__price .zhiyar-price-from-label {
	font-size: 10px;
}

.zhiyar-carousel__price .zhiyar-price-final-amount {
	font-size: 15px;
	font-weight: 800;
}

.zhiyar-carousel__price .zhiyar-price-currency-stack {
	font-size: 8px;
}

/* Cards are opaque white now (see .zhiyar-carousel__card-link), so on the
   green discount row they already read fine against the frame's background
   with no extra glass box needed — just a touch more title weight since it
   sits on a busier surrounding panel. */
.zhiyar-carousel-sale-frame .zhiyar-carousel__title {
	font-weight: 700;
}

/* The struck-through original price is the one exception to "no underline
   here" above — it needs its line-through back, just bigger than the
   default carousel size so it reads clearly next to the final price. */
.zhiyar-carousel-sale-frame .zhiyar-carousel__price .zhiyar-price-original {
	font-size: 14px !important;
	text-decoration: line-through !important;
}

/* Range-starting-from wording ("از") isn't wanted on the discount row —
   the final price sits right next to the original price already. */
.zhiyar-carousel-sale-frame .zhiyar-carousel__price .zhiyar-price-from-label {
	display: none;
}

/* ---------------------------------------------------------------------
 * Trailing "مشاهده همه محصولات" CTA card — same footprint as a product
 * card, light tinted panel, centered icon + label.
 * ------------------------------------------------------------------- */
.zhiyar-carousel__card--cta {
	flex-basis: 112px;
}

.zhiyar-carousel__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 100%;
	min-height: 175px;
	padding: 16px 10px;
	border-radius: 10px;
	text-decoration: none;
	text-align: center;
	background: rgba(201, 160, 84, 0.08);
	border: 1px dashed rgba(201, 160, 84, 0.45);
	color: var(--ast-global-color-2, #1a3d2e);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	transition: background 0.2s ease;
}

.zhiyar-carousel__cta:hover {
	background: rgba(201, 160, 84, 0.16);
	color: var(--ast-global-color-2, #1a3d2e);
}

.zhiyar-carousel__cta-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	color: var(--ast-global-color-1, #a9813f);
}

.zhiyar-carousel__cta-icon svg {
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------------
 * Arrows — one on each edge (not grouped in a corner), so "prev" fading out
 * at the start and "next" fading out at the end are each visible right
 * where they act. The wrapper is unwrapped via display:contents so its two
 * buttons position themselves directly against .zhiyar-carousel__viewport.
 * ------------------------------------------------------------------- */
.zhiyar-carousel__arrows {
	display: contents;
}

/* Premium floating glass control — soft cream/white translucent fill,
   backdrop blur, thin light border, elegant soft shadow. The icon is a
   direct flex-centered child of this same circle (not a separate layer), so
   it's always dead-centered inside the glass, never detached from it.

   box-sizing/padding/margin/appearance/font/line-height are all reset
   explicitly: this is a native <button>, and browser UA stylesheets give
   buttons non-zero, NOT symmetric default padding (wider than tall) plus
   content-box sizing — left alone, that padding was adding on top of the
   42x42 box unevenly and stretching the "circle" into an oval. */
.zhiyar-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 42px;
	height: 42px;
	min-width: 42px;
	min-height: 42px;
	max-width: 42px;
	max-height: 42px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	line-height: 1;
	background: rgba(250, 246, 238, 0.55) !important;
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
	/* isolate: backdrop-filter creates its own compositing layer — isolating
	   it here keeps that layer strictly behind this button's own content
	   (the arrow) rather than risking the icon getting drawn into/under it. */
	isolation: isolate;
	border: 1px solid rgba(255, 255, 255, 0.65) !important;
	box-shadow: 0 10px 24px -12px rgba(74, 60, 46, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.7);
	color: #5a4632;
	cursor: pointer;
	transform: translateY(-50%);
	transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.zhiyar-carousel__arrow--prev {
	right: 2px;
}

.zhiyar-carousel__arrow--next {
	left: 2px;
}

.zhiyar-carousel__arrow:hover {
	background: rgba(250, 246, 238, 0.75) !important;
	box-shadow: 0 14px 30px -12px rgba(74, 60, 46, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.8);
	color: #40311f;
	transform: translateY(-50%) scale(1.08);
}

.zhiyar-carousel__arrow svg {
	position: relative;
	/* Above the button's own glass background/blur layer (see isolation on
	   the parent) and above any other element that might otherwise stack
	   over it — this is what actually keeps the glyph visibly drawn instead
	   of disappearing under the frosted fill. */
	z-index: 1;
	width: 17px;
	height: 17px;
	stroke-width: 2.4;
	overflow: visible;
	color: inherit;
	pointer-events: none;
	/* Centers the icon's own visual weight inside the round/pointy SVG
	   viewBox exactly — display:flex on the parent already centers the box,
	   this just keeps the glyph itself from reading as off-axis. */
	display: block;
}

/* Force the stroke regardless of any other, more-specific SVG rule
   elsewhere in the theme/plugins that might otherwise win and leave the
   path effectively invisible (transparent/no stroke) against the glass. */
.zhiyar-carousel__arrow svg path {
	stroke: currentColor !important;
	fill: none !important;
}

.zhiyar-carousel__arrow.is-disabled {
	opacity: 0;
	pointer-events: none;
}

/* Same premium cream-glass arrow as everywhere else, including on the green
   discount row — the translucent cream fill plus its own shadow/border
   already read clearly against the gradient panel, so no separate dark
   variant is needed here anymore (keeps exactly one nav-button style, not
   two, across the whole carousel system). */

/* ---------------------------------------------------------------------
 * Responsive card widths — fewer cards fit on a narrow phone automatically
 * since each card has a fixed px width; the row itself just scrolls.
 * ------------------------------------------------------------------- */
@media (max-width: 991px) {
	.zhiyar-carousel__card {
		flex-basis: 145px;
	}

	.zhiyar-carousel__card--cta {
		flex-basis: 105px;
	}

	.zhiyar-carousel__arrow {
		width: 32px;
		height: 32px;
	}
}

@media (max-width: 599px) {
	.zhiyar-carousel__heading {
		font-size: 1.05em;
	}

	.zhiyar-carousel__card {
		flex-basis: 112px;
	}

	.zhiyar-carousel__card--cta {
		flex-basis: 92px;
	}

	.zhiyar-carousel__cta {
		min-height: 145px;
		padding: 12px 8px;
		font-size: 10.5px;
	}

	.zhiyar-carousel__title {
		font-size: 11px;
	}

	.zhiyar-carousel__price .zhiyar-price-final-amount {
		font-size: 12.5px;
	}

	.zhiyar-carousel__discount {
		font-size: 9px;
		padding: 2px 5px;
	}

	.zhiyar-carousel__arrow {
		width: 28px;
		height: 28px;
	}

	.zhiyar-carousel__arrow svg {
		width: 14px;
		height: 14px;
	}
}