/* Digital Hub — homepage hero + "Популярное" carousel.
   Values below (white block bg, radius 16px, headline2-bold 24px/700,
   footnote-semibold 14px/600, card width 104px, image 104x130, radius 12px)
   are copied from plati.market's real CSS — see /opt/papa.market/website/donor-reference/. */

.dh-hero {
	padding: 3rem 0 2rem;
	text-align: left;
}

.dh-hero h1 {
	font-size: 2.25rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.dh-hero p {
	color: var(--color-text-secondary);
	font-size: 1.1rem;
}

/* Outer white rounded panel — donor wraps "Популярное" in a .block-medium
   (white bg, 16px radius), it doesn't sit directly on the gray page bg. */
.dh-popular-block {
	background-color: var(--color-surface);
	border-radius: 16px;
	/* donor: pt-4(24px) ps-3/pe-3(16px) pb-lg-3(16px) — see styles.min.css/bootstrap.min.css */
	padding: 1.5rem 1rem 1rem;
	margin-bottom: 3rem;
}

.dh-popular-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}

.dh-popular-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	margin: 0;
	color: var(--color-text);
}

.dh-popular-controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.dh-popular-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 6px;
	border: none;
	background-color: var(--color-bg);
	color: var(--color-text-secondary);
	cursor: pointer;
}

.dh-popular-arrow svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.dh-popular-arrow:hover {
	color: var(--color-accent);
}

.dh-popular-all {
	display: flex;
	align-items: center;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	/* This carousel component also renders on Page-based templates (cart's
	   empty state, see cart-empty.php) where Storefront's
	   `.hentry .entry-content a{text-decoration:underline}` outranks the
	   bare `a{text-decoration:none}` it relied on elsewhere. */
	text-decoration: none !important;
}

.dh-popular-all:hover {
	color: var(--color-accent);
}

/* 2-row paged grid via pure CSS (grid-auto-flow:column), no JS carousel
   library needed — same visual result as the donor's Swiper "grid" mode.
   Card width is fluid (% of the slider's own width) instead of the donor's
   fixed 104/162px so exactly 5 columns sit in the visible area at any
   viewport width, per explicit request — donor showed 8+ columns on a
   normal desktop, leaving nothing to scroll to. clamp() keeps cards from
   shrinking below a usable size on narrow mobile or from growing absurdly
   large on ultra-wide monitors. */
.dh-popular-slider {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, 1fr);
	grid-auto-columns: clamp(120px, calc((100% - 4 * 14px) / 5), 320px);
	row-gap: 8px;
	column-gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 0.25rem;
}

.dh-popular-slider::-webkit-scrollbar {
	display: none;
}

.dh-popular-card {
	width: 100%;
	scroll-snap-align: start;
	cursor: pointer;
}

.dh-popular-card-image {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	margin-bottom: 0.5rem;
}

.dh-popular-card-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 162 / 203;
	object-fit: contain;
	background-color: var(--color-bg);
	border-radius: 12px;
}

.dh-popular-card-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	color: var(--color-text);
}

@media (max-width: 709px) {
	.dh-popular-block {
		border-radius: 0;
	}
}

/* Real priced catalog card carousels (Рекомендуем/"С этим товаром смотрят"/
   "Вы смотрели" — Лидеры продаж moved to its own growing grid below, see
   digitalhub_render_carousel_block()'s
   $product_cards param). Single horizontal row, not the 2-row icon-grid
   above — donor's own swiper slides for these sections measure ~210-220px
   wide (see donor-reference/html/03_product.html swiper-slide inline
   width), tall enough for image+price+title+sold+button in one card. The
   product-card.css rules for `.woocommerce ul.products li.product` (price/
   sold/button styling) apply automatically since this is the same markup
   as the catalog grid — only the container needs to scroll instead of grid. */
.dh-popular-slider--products {
	display: flex !important;
	align-items: stretch;
	gap: 0 1rem !important;
}

.dh-popular-slider--products::before,
.dh-popular-slider--products::after {
	content: none !important;
	display: none !important;
}

/* Fluid width (% of the row) instead of a fixed 220px — a fixed width
   rarely divides evenly into the container, so the last card in view sat
   half cut-off at the right edge. clamp() sizes exactly 5 cards into the
   visible row at any viewport width, same fix as .dh-popular-slider
   (Популярное) above. */
.dh-popular-slider--products li.product {
	flex: 0 0 clamp(180px, calc((100% - 4 * 1rem) / 5), 260px) !important;
	width: clamp(180px, calc((100% - 4 * 1rem) / 5), 260px) !important;
	margin: 0 !important;
	scroll-snap-align: start;
}

@media (max-width: 709px) {
	.dh-popular-slider--products li.product {
		flex-basis: clamp(140px, calc((100% - 2 * 1rem) / 3), 180px) !important;
		width: clamp(140px, calc((100% - 2 * 1rem) / 3), 180px) !important;
	}
}

/* Лидеры продаж — vertical grid that grows as more pages load via AJAX
   (see digitalhub_render_bestsellers_grid()), not a horizontal slider like
   the other homepage sections. auto-fill + minmax is self-responsive (no
   separate mobile breakpoint needed): columns collapse on their own as the
   container narrows. Carries .dh-popular-grid too so it's excluded from
   product-card.css's generic ":not(.dh-popular-grid)" mobile-grid-force
   rule — this block owns its own grid at every width. */
.dh-bestsellers-grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) ) !important;
	gap: 1rem !important;
}

.dh-bestsellers-grid::before,
.dh-bestsellers-grid::after {
	content: none !important;
	display: none !important;
}

.dh-bestsellers-grid li.product {
	width: auto !important;
	margin: 0 !important;
}

.dh-bestsellers-sentinel {
	display: flex;
	justify-content: center;
	padding: 1.5rem 0 0.5rem;
}

.dh-bestsellers-loading {
	font-size: 14px;
	color: var(--color-text-secondary);
}

/* "Пополнение" tab widget — donor's real #topup structure (tabs +
   underline-active state, blue like every other real action element). */
.dh-topup-block {
	background-color: var(--color-surface);
	border-radius: 16px;
	padding: 1.5rem 1.25rem;
	margin-bottom: 3rem;
}

.dh-topup-tabs {
	display: flex;
	gap: 1.5rem;
	border-bottom: 1px solid #e2e4e8;
	margin: 1rem 0 1.25rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.dh-topup-tabs::-webkit-scrollbar {
	display: none;
}

.dh-topup-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0 0 0.75rem;
	font-family: var(--font-family);
	font-size: 16px;
	font-weight: 500;
	white-space: nowrap;
	flex-shrink: 0;
	color: var(--color-text-secondary);
	cursor: pointer;
}

.dh-topup-tab--active {
	color: var(--color-brand);
	border-bottom-color: var(--color-brand);
}

.dh-topup-panel {
	display: none;
}

.dh-topup-panel--active {
	display: block;
}

.dh-topup-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.dh-topup-chip {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background-color: var(--color-bg);
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 0.5rem 0.85rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
}

.dh-topup-chip:hover {
	border-color: var(--color-brand);
	color: var(--color-text);
}

.dh-topup-chip-title {
	font-weight: 400;
	color: var(--color-text-secondary);
}

.dh-topup-soon {
	color: var(--color-text-secondary);
	font-size: 14px;
	margin: 0;
}