/*
 * Site-wide adjustments to the template for quyonchi.uz.
 * Kept out of static/vendor/css (replaced wholesale by the licensed package). Dark-mode colours for
 * these rules live in dark.css, which is loaded after this file.
 */

/* ---------- Inner pages (every page except the home hero) ---------- */

/* The template header floats over the first section, which only suits the home hero. Everywhere
   else give the header a solid bar and start the page below it instead of underneath the menu. */
body:not(:has(.hero-slider)) #sisf-page-header-inner {
	background-color: var(--white-color, #fff);
	box-shadow: 0 1px 0 rgb(0 0 0 / 6%);
}

/* Only while the header floats. At 1024px and below custom.css makes it position: relative, so it
   already takes its own height and a margin here would leave an empty band under the menu. */
@media (min-width: 1025px) {
	body:not(:has(.hero-slider)) #sisf-page-header + * {
		margin-top: 150px; /* 50px top bar + 100px header */
	}
}

/* A banner, not a full-screen photo: capped height, and darkened so the white title reads on any
   photograph. */
.sisf-banner .banner-img {
	position: relative;
	height: clamp(240px, 32vw, 420px);
	overflow: hidden;
}

.sisf-banner .banner-img figure {
	height: 100%;
	margin: 0;
}

.sisf-banner .banner-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(0 0 0 / 25%) 0%, rgb(0 0 0 / 55%) 100%);
}

.sisf-banner .sisf-page-title {
	z-index: 1;
}

.sisf-banner .sisf-page-title .sisf-m-title {
	color: #fff;
	text-shadow: 0 2px 16px rgb(0 0 0 / 45%);
}

/* ---------- Equal-height card and image grids ---------- */

/* Every card in a row stretches to the tallest one, and every image box in a grid has the same
   shape. Bootstrap columns already stretch to the row height; each column becomes a flex column so
   its card can fill it, and the card lays its content out as a column so trailing prices, buttons
   and links sit on the bottom edge.
   Image boxes get a fixed aspect-ratio with the picture absolutely positioned inside, so the box
   size never depends on the photo. All photos, breed photos (.quyonchi-breed-photo) included, are
   cropped to cover their box, see below.
   Selectors carry one extra class/element over the components' scoped styles, which load later. */

/* Columns that hold a card */
.row > [class*='col-']:has(> .sisf-product-list),
.row > [class*='col-']:has(> .letest-blog-item),
.row > [class*='col-']:has(> .our-discount),
.row > [class*='col-']:has(> .quyonchi-credit-card) {
	display: flex;
	flex-direction: column;
}

/* Clamp: titles to two lines, summaries to three */
.row > [class*='col-'] > .sisf-product-list .sisf-e-product-title,
.letest-blog-item .sisf-e-title.blog-title,
.sisf-sis-category-slider h4.sisf-e-title,
.row > div > a.quyonchi-disease-card .quyonchi-disease-card__title,
.quyonchi-credit-card .quyonchi-credit-body .quyonchi-credit-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.row > [class*='col-'] > .sisf-product-list .quyonchi-card-summary,
.letest-blog-item .sisf-e-text .sisf-e-excerpt,
.row > div > a.quyonchi-disease-card .quyonchi-disease-card__summary,
.testimonial-section .sisf-testimonials-slider .sisf-e-text {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* Shared image fill: a scenic picture covers its fixed-ratio box */
.offers-section .our-discount .sisf-m-image img:not(.quyonchi-breed-photo),
.row > [class*='col-'] > .sisf-product-list .sisf-product-image img:not(.quyonchi-breed-photo),
.letest-blog-item .sisf-e-media-image a > img:not(.quyonchi-breed-photo),
.gallery-slides .photo-gallery figure img:not(.quyonchi-breed-photo),
.quyonchi-credit-card .quyonchi-credit-thumb img:not(.quyonchi-breed-photo) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Breed photos (.quyonchi-breed-photo) fill their box edge to edge, cropped like every other photo.
   The template's hover zoom (scale 1.2) stays off for them. */
.row > [class*='col-'] > .sisf-product-list .sisf-product-image img.quyonchi-breed-photo {
	width: 100%;
	height: 100%;
	object-fit: cover !important;
	border-radius: 10px;
}

.sisf-product-list .product .sisf-e-inner .sisf-product-image img.quyonchi-breed-photo,
.sisf-product-list .product .sisf-e-inner .sisf-product-image img.quyonchi-breed-photo:hover {
	transform: none;
}

/* Home breed circles: the link is the 170px disc and the photo covers all of it. */
.sisf-sis-category-slider .sisf-e-main-image a:has(> img.quyonchi-breed-photo) {
	display: inline-block;
	width: 170px;
	height: 170px;
	overflow: hidden;
	border-radius: 50%;
}

.sisf-sis-category-slider .sisf--inner img.quyonchi-breed-photo {
	width: 100%;
	height: 100%;
	padding: 0;
	border-radius: 50%;
	object-fit: cover;
	background-color: transparent;
}

/* ---------- Mobile card carousels ----------
   Card rows wrapped in MobileCarousel (home sections, related articles, related diseases): below
   768px the row scrolls sideways one card at a time, with the next card peeking in, instead of
   stacking into a long column. The track is a Bootstrap .row or a page's own grid, so these rules
   only rely on the carousel's wrapper. */
@media (max-width: 767px) {
	.quyonchi-carousel > .quyonchi-mobile-carousel {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.quyonchi-carousel > .quyonchi-mobile-carousel::-webkit-scrollbar {
		display: none;
	}

	.quyonchi-carousel > .quyonchi-mobile-carousel > * {
		flex: 0 0 85%;
		max-width: 85%;
		scroll-snap-align: start;
	}
}

/* Home: offer cards (the card is the photo, text is overlaid) */
.offers-section .row > [class*='col-'] > .our-discount {
	flex: 1 1 auto;
}

.offers-section .our-discount .sisf-m-image {
	aspect-ratio: 4 / 3;
}

.offers-section .our-discount .sisf-m-image figure {
	position: absolute;
	inset: 0;
	margin: 0;
}

/* Home popular breeds, home beginner steps, /breeds: product-style cards */
.row > [class*='col-'] > .sisf-product-list,
.row > [class*='col-'] > .sisf-product-list > .sisf-e-inner,
.row > [class*='col-'] > .sisf-product-list .product,
.row > [class*='col-'] > .sisf-product-list .product .sisf-product-inner,
.row > [class*='col-'] > .sisf-product-list .product .sisf-e-product-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.row > [class*='col-'] > .sisf-product-list .sisf-e-product-content > .quyonchi-purpose-tag,
.row > [class*='col-'] > .sisf-product-list .sisf-e-product-content > .badge {
	align-self: flex-start;
}

.row > [class*='col-'] > .sisf-product-list .product .sisf-product-image {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 4 / 3;
}

.row > [class*='col-'] > .sisf-product-list .sisf-product-image > a {
	position: absolute;
	inset: 0;
	display: block;
}

.row > [class*='col-'] > .sisf-product-list .sisf-product-image figure {
	height: 100%;
	margin: 0;
}

/* Trailing price (or, without a price, the button / reading time) goes to the bottom */
.row > [class*='col-'] > .sisf-product-list .sisf-e-product-content > .sisf-product-price,
.featured-product .row > [class*='col-'] > .sisf-product-list .sisf-e-product-content > :last-child {
	margin-top: auto;
}

.row > [class*='col-'] > .sisf-product-list .sisf-e-product-content > :not(.sisf-product-price) + .sisf-m-button {
	margin-top: auto !important; /* beats Bootstrap's .mt-2 */
	padding-top: 0.5rem;
}

/* Home breed circles (Swiper): every slide as tall as the tallest */
.shop-categorie-section .sisf-sis-category-slider .swiper-slide {
	height: auto;
	display: flex;
	align-items: stretch;
}

.shop-categorie-section .sisf-sis-category-slider .swiper-slide > .sisf--inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.sisf-sis-category-slider .sisf-e-main-image img:not(.quyonchi-breed-photo) {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Home FAQ slides (Swiper): equal slides, category + link row pinned to the bottom */
.testimonial-section .sisf-testimonials-slider .swiper-slide {
	height: auto;
	display: flex;
}

.testimonial-section .sisf-testimonials-slider .swiper-slide > .sisf-e-inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.testimonial-section .sisf-testimonials-slider .sisf-e-inner > .sisf-e-bottom {
	margin-top: auto;
}

/* Home latest articles, /articles, related articles: blog cards with a 16:10 cover */
.row > [class*='col-'] > .letest-blog-item,
.row > [class*='col-'] > .letest-blog-item > .sisf-e-inner,
.row > [class*='col-'] > .letest-blog-item .sisf-e-inner > .sisf-e-content,
.row > [class*='col-'] > .letest-blog-item .sisf-e-content > .sisf-e-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.letest-blog-item .sisf-e-media .sisf-e-media-image {
	position: relative;
	aspect-ratio: 16 / 10;
}

.letest-blog-item .sisf-e-media .sisf-e-media-image > a {
	position: absolute;
	inset: 0;
	display: block;
}

.letest-blog-item .sisf-e-text > .quyonchi-reading-minutes {
	margin-top: auto;
}

/* Home gallery (Swiper): identical 4:3 photo boxes */
.gallery-slides .swiper-wrapper > .swiper-slide {
	height: auto;
	display: flex;
}

.gallery-slides .swiper-slide > .photo-gallery {
	flex: 1 1 auto;
}

.gallery-slides .photo-gallery > a {
	display: block;
}

.gallery-slides .photo-gallery figure.image-anime {
	aspect-ratio: 4 / 3;
	margin: 0;
}

.gallery-slides .photo-gallery figure.image-anime img {
	position: absolute;
	inset: 0;
}

/* /health: disease cards (already fill their column), tags pinned to the bottom */
.row > div > a.quyonchi-disease-card {
	display: flex;
	flex-direction: column;
}

.row > div > a.quyonchi-disease-card > .quyonchi-disease-card__tags {
	margin-top: auto;
}

/* /credits: photo cards, source link pinned to the bottom */
.row > [class*='col-'] > .quyonchi-credit-card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.quyonchi-credit-card .quyonchi-credit-thumb {
	position: relative;
	flex: 0 0 auto;
}

.quyonchi-credit-card .quyonchi-credit-thumb img {
	position: absolute;
	inset: 0;
}

.quyonchi-credit-card > .quyonchi-credit-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.quyonchi-credit-card .quyonchi-credit-body > .quyonchi-credit-meta:last-child {
	margin-top: auto;
}

/* ---------- Home health band ---------- */

/* Keep the template's blue and repeat a rabbit tile over it: rabbit heads, carrots and first-aid
   crosses. */
.elite-pet-supply {
	background-color: #1c9aea;
	background-image: url('patterns/rabbit-health.svg');
	background-repeat: repeat;
	background-size: 220px 220px;
}

/* ---------- Phone vertical spacing ----------
   custom.css drops every section to 30px top and bottom below 768px, so content on tinted and photo
   backgrounds hugs the edges. Use the template's tablet spacing instead, and fix the sections that
   don't use .section. */
@media (max-width: 767px) {
	.section {
		padding-block: 50px;
	}

	/* Health band: the floating photo was pinned to the top edge and the last photo ran into the
	   bottom one (the section carries Bootstrap's .pb-0). */
	.elite-pet-supply {
		padding-top: 140px;
	}

	.elite-pet-supply.pb-0 {
		padding-bottom: 50px !important;
	}

	.elite-pet-supply .bounce-img {
		top: 20px;
	}
}

/* ---------- Tablet fixes ---------- */

/* Star ratings: the stars stay on one line and the label wraps under them, instead of the last star
   dropping onto a line of its own in narrow cards. */
.sisf-e-ratings {
	flex-wrap: wrap;
}

.sisf-e-ratings > .sisf-m-inner {
	flex: none;
}

.sisf-e-ratings .sisf-m-star {
	white-space: nowrap;
}

/* Blog cards: the category badge never breaks mid-label; the date moves under it when the card is
   narrow. */
.letest-blog-item .sisf-e-info.sisf-info--top {
	flex-wrap: wrap;
	column-gap: 12px;
}

.letest-blog-item .sisf-e-info-category a {
	white-space: nowrap;
}

/* Offer cards are a third of the screen from 768px to 1199px; the template's 30–34px title ran past
   the card and pushed the subtitle out of it. */
@media (min-width: 768px) and (max-width: 1199px) {
	.offers-section .our-discount h3 {
		font-size: clamp(20px, 2.4vw, 28px);
	}

	.offers-section .our-discount .sisf-m-content {
		padding: 20px;
	}
}

/* Health band, 992px and up: the floating photo is placed against the whole band (60% of its width),
   so on iPads in landscape and small laptops it covered the heading and list. Keep it over the photo
   column. */
@media (min-width: 992px) {
	.elite-pet-supply .bounce-img {
		left: 50%;
	}
}