/*
Homepage sections: hero, trust strip, category grid, and the shared
`.section` heading pattern used by every product/blog row on this page.
*/

.hero {
	border-bottom: 1px solid var(--color-border);
}

.hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: center;
	padding-block: var(--space-7) var(--space-8);
}

@media (min-width: 768px) {
	.hero__grid {
		grid-template-columns: 1fr 1fr;
		padding-block: var(--space-8);
	}
}

.hero__heading {
	font-size: var(--text-4xl);
	margin-block-end: var(--space-4);
}

.hero__subheading {
	font-size: var(--text-lg);
	color: var(--color-muted);
	max-width: 46ch;
	margin-block-end: var(--space-6);
}

.hero__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Generic homepage section ------------------------------------------------------------ */

.section {
	padding-block: var(--space-8);
}

.section--muted {
	background: var(--color-surface);
}

.section__header { 
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin-block-end: var(--space-5);
}

.section__heading {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-md);
}

.section__heading .icon {
	color: var(--color-primary);
}

.section > .container > .section__heading {
	margin-block-end: var(--space-5);
}

.section__link {
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-primary);
	white-space: nowrap;
}

.section__link:hover {
	color: var(--color-primary-hover);
}

/* Mobile: product-carousel and blog-carousel both zero out their own
   .container padding (see their own mobile blocks below) so their Swiper
   track's slidesOffsetBefore/After:16 is the only edge spacing -- .section__header
   isn't part of that track, so it needs its own matching 16px here instead. */
@media (max-width: 640px) {
	.section__header {
		padding: 0 16px;
		margin-block-end: 16px;
	}

	.section__heading {
		font-size: 14px;
	}
}

/* Quick links (icon + label row below the hero/slider) ---------------------------------- */

/* Below 1024px this is a single-row Swiper carousel
   (quick-links-carousel.js) -- .container's own padding is zeroed the same
   way product-carousel/blog-carousel are, since the Swiper track's
   slidesOffsetBefore/After:16 is the edge spacing instead. At 1024px+
   Swiper is destroyed (quick-links-carousel.js) and .swiper-wrapper
   becomes a plain centered, wrapping row -- few enough items that
   stretching them edge-to-edge or leaving them scrollable looks worse
   than just centering what's there, and .container goes back to its
   normal padding since nothing needs edge-to-edge bleed anymore. */
.quick-links {
	padding: 0;
}

.quick-links .container {
	padding: 0;
	margin-block: 16px;
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.quick-links .container {
		padding-inline: var(--container-pad);
	}

	.quick-links__grid .swiper-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		gap: var(--space-4);
		margin: 34px 0;
	}
}

.quick-links__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--color-bg);
	text-align: center;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	flex: 0 0 80px;
	width: 80px;
	gap: 5px;
}

/* 80px chips that look right packed edge-to-edge on a phone read as tiny
   and sparse spread across a desktop viewport -- scale the chip (and its
   label) up at wider breakpoints instead. 640px is kept in sync with
   quick-links-carousel.js's own breakpoint (spaceBetween); 1024px+ is
   where the carousel itself is gone (see above). */
@media (min-width: 640px) {
	.quick-links__item {
		flex-basis: 110px;
		width: 110px;
		gap: var(--space-2);
	}

	.quick-links__label {
		font-size: var(--text-xs);
	}
}

@media (min-width: 1024px) {
	.quick-links__item {
		flex-basis: 140px;
		width: 140px;
	}

	.quick-links__label {
		font-size: var(--text-sm);
	}
}

a.quick-links__item:hover {
	/* border-color: color-mix(in srgb, var(--color-border) 40%, var(--color-ink)); */
	box-shadow: var(--shadow-sm);
}

.quick-links__icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.quick-links__icon img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: 0.3s all;
	max-height: 140px;
}

.quick-links__label {
	font-size: 9px;
	font-weight: var(--font-medium);
	color: #373737;
	width: 100%;
	padding: 0;
	transition: 0.3s all;
}

.quick-links__item:hover span.quick-links__label {
}

.quick-links__item:hover img {
}

/* Product carousel — "جدیدترین محصولات" and per-category rows all share
   this markup/JS (see product-carousel.js) and render the standard
   product card (woocommerce/content-product.php, styled in
   product-card.css) inside each slide — this is just the viewport/track/
   nav chrome around it. */

.product-carousel__viewport {
	position: relative;
}

.product-carousel__track {
	overflow: hidden;
}

.product-carousel__track .swiper-wrapper {
	align-items: flex-start;
}

.product-carousel__slide {
	height: auto;
}

.product-carousel__nav {
	position: absolute;
	top: 37%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: #fff;
	color: var(--color-ink);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border);
	transition: 0.3s opacity;
}

.product-carousel__nav--prev {
	inset-inline-start: -17px;
}

.product-carousel__nav--next {
	inset-inline-end: -17px;
}

/* rotate(90deg) on a down-chevron points left, rotate(-90deg) points
   right (CSS rotation is clockwise) — same convention as the sale
   carousel: prev (right side) points right, next (left side) points left. */
.product-carousel__nav--prev .icon {
	transform: rotate(-90deg);
}

.product-carousel__nav--next .icon {
	transform: rotate(90deg);
}

@media (max-width: 640px) {
	.product-carousel__nav {
		display: none;
	}

	/* Zeroes out the section/container padding so the Swiper track's own
	   slidesOffsetBefore/After:16 (product-carousel.js) is the only edge
	   spacing, instead of stacking on top of the container's own padding. */
	section.section.product-carousel {
		padding: 16px 0;
	}

	section.section.product-carousel .container {
		padding: 0;
	}
}

/* Blog carousel ("مجله یوبیت‌پلی", front-page.php) -- same viewport/track/
   nav chrome as the product carousel above, just its own class names
   since it wraps template-parts/blog/card.php instead of a product card
   (that file is also reused as a plain grid item on the blog archive, so
   it stays untouched; only this homepage wrapper became a carousel). */

.blog-carousel__viewport {
	position: relative;
}

.blog-carousel__track {
	overflow: hidden;
}

.blog-carousel__track .swiper-wrapper {
	align-items: stretch;
}

.blog-carousel__slide {
	height: auto;
}

.blog-carousel__slide .blog-card {
	height: 100%;
}

.blog-carousel__nav {
	position: absolute;
	top: 37%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: #fff;
	color: var(--color-ink);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border);
	transition: 0.3s opacity;
}

.blog-carousel__nav--prev {
	inset-inline-start: -17px;
}

.blog-carousel__nav--next {
	inset-inline-end: -17px;
}

.blog-carousel__nav--prev .icon {
	transform: rotate(-90deg);
}

.blog-carousel__nav--next .icon {
	transform: rotate(90deg);
}

@media (max-width: 640px) {
	.blog-carousel__nav {
		display: none;
	}

	/* Same reasoning as .product-carousel above: the Swiper track's own
	   slidesOffsetBefore/After:16 (blog-carousel.js) replaces the
	   section/container padding as the edge spacing. */
	section.section.blog-carousel {
		padding: 0;
	}

	section.section.blog-carousel .container {
		padding: 0;
	}
}

/* Sale carousel (blue banner, horizontal scroll) ------------------------------------------- */

.sale-carousel__banner {
	position: relative;
	/* background: var(--color-bg); */
	/* border: 1px solid var(--color-border); */
	border-radius: var(--radius-md);
	/* padding-block: var(--space-5); */
	/* padding-inline-end: var(--space-5); */
	padding-inline-start: 290px;
	/* overflow: hidden; */
}

.sale-carousel__decor {
	position: absolute;
	inset-inline-start: 0;
	/* top: 0; */
	bottom: 0;
	width: 284px;
	height: 106%;
	object-fit: contain;
	pointer-events: none;
}

.sale-carousel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	/* padding-inline-end: var(--space-5); */
	margin-block-end: var(--space-4);
	/* margin-left: 97px; */
}

/* Desktop relies on .sale-carousel__decor for "این یه بخش تخفیفه" branding,
   so the text heading only shows on mobile (@media max-width:640px below),
   where that decor image is hidden. */
.sale-carousel__heading {
	display: none;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-ink);
}

.sale-carousel__heading .icon {
	color: var(--color-sale);
}

/* "مشاهده همه" link — shared by the sale carousel and the product
   carousel section headers, so both look the same. */
.carousel-view-all {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding-inline: var(--space-4);
	padding-block: var(--space-2);
	background: var(--color-bg);
	border: 2px solid var(--color-border);
	border-radius: 8px;
	color: var(--color-ink);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	white-space: nowrap;
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.carousel-view-all:hover {
	background: var(--color-surface);
	border-color: color-mix(in srgb, var(--color-border) 40%, var(--color-ink));
}

/* rotate(90deg) on a down-chevron points left (CSS rotation is clockwise). */
.carousel-view-all .icon {
	width: 1em;
	height: 1em;
	transform: rotate(90deg);
}

@media (max-width: 640px) {
	a.carousel-view-all {
		border: unset;
		padding: unset;
		font-size: 10px;
	}
}

.sale-carousel__viewport {
	position: relative;
}

/* Slide sizing/spacing/looping is Swiper's job now (see sale-carousel.js) —
   this is just the viewport clip and per-slide vertical alignment. */
.sale-carousel__track {
	overflow: hidden;
	padding-inline-end: var(--space-5);
}

.sale-carousel__track .swiper-wrapper {
	align-items: flex-start;
}

.sale-carousel__slide {
	height: auto;
}

.sale-carousel__nav {
	position: absolute;
	top: 35%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: #fff;
	color: var(--color-ink);
	box-shadow: var(--shadow-sm);
}


section.section.sale-carousel {
    padding-block: var(--space-3);
}

.sale-carousel__nav--prev {
	inset-inline-start: -17px;
}

.sale-carousel__nav--next {
	inset-inline-end: -17px;
	z-index: 99;
}

section.section:last-child {
    padding-bottom: 0;
}

/* rotate(90deg) on a down-chevron points left, rotate(-90deg) points
   right (CSS rotation is clockwise) — same convention as header.css and
   slider.css: prev (right side) points right, next (left side) points
   left. */
.sale-carousel__nav--prev .icon {
	transform: rotate(-90deg);
}

.sale-carousel__nav--next .icon {
	transform: rotate(90deg);
}

@media (max-width: 640px) {
	.sale-carousel__nav {
		display: none;
	}

	.sale-carousel__decor {
		display: none;
	}

	/* Reclaims the space the banner reserved for .sale-carousel__decor
	   (padding-inline-start: 290px above) -- otherwise hiding it leaves an
	   empty gap on that side. */
	.sale-carousel__banner {
		padding-inline-start: 0;
	}

	.sale-carousel__heading {
		display: flex;
	}

	.sale-carousel__header {
		padding: 0 16px;
	}
}

.sale-carousel .container {
	padding-inline: 0;
}

/* Blog grid/card styling lives in blog.css — shared with the blog archive
   and home.php, not just the homepage's "latest articles" section. */