/* ==========================================================
   D2S Theme — home-sections.css
   Loads only on the front page.
   ========================================================== */

.d2s-home-section {
	padding: 36px 0;
}

.d2s-home-section:nth-child(even) {
	background: #FAFAFA;
}

.d2s-home-section-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 18px;
	line-height: 1.25;
}

/* Recently Viewed — six-card front-end row with a history link once six items are available. */
.d2s-recently-viewed-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.d2s-recently-viewed-heading .d2s-home-section-title {
	margin-bottom: 18px;
}

.d2s-recently-viewed-view-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
	font-size: 14px;
	font-weight: 700;
	color: var(--d2s-color-primary);
	text-decoration: none;
	white-space: nowrap;
}

.d2s-recently-viewed-view-all:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.d2s-recently-viewed-heading {
		gap: 10px;
	}

	.d2s-recently-viewed-view-all {
		font-size: 13px;
	}
}

/* Grid style reuses .d2s-product-grid from shop.css (loaded here too). */

/* Carousel style — horizontal scroll-snap, no JS library needed. */
.d2s-home-carousel-track {
	display: flex;
	/* Each card sizes to its own content instead of stretching to match
	   whichever sibling has the most text (e.g. a variable product's
	   2-line price range) — that stretching was leaving visibly empty
	   space at the bottom of the shorter cards next to it. */
	align-items: flex-start;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0;
	-webkit-overflow-scrolling: touch;
	/* Scrollable, but the scrollbar itself is hidden (both engines) —
	   swiping/dragging still scrolls it, there's just no visible grey
	   bar under the row, on mobile or desktop. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.d2s-home-carousel-track::-webkit-scrollbar {
	display: none;
	height: 0;
}

.d2s-home-carousel-track .d2s-product-card,
.d2s-home-carousel-track .product {
	flex: 0 0 240px;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.d2s-home-carousel-track .d2s-product-card,
	.d2s-home-carousel-track .product {
		flex-basis: 170px;
	}
}

/* "Today's Best Offers" (sale) carousel, desktop: 6 cards per view
   instead of ~5 (240px cards). Computed against the track's own
   width (5 gaps of 10px for 6 cards) so it stays exactly 6-across
   regardless of container width, rather than a guessed fixed px. */
@media (min-width: 1025px) {
	.d2s-home-section-sale .d2s-home-carousel-track .d2s-product-card,
	.d2s-home-section-sale .d2s-home-carousel-track .product {
		flex: 0 0 calc((100% - 50px) / 6);
	}
}

/* ---------- "Today's Best Offers" (sale) section, mobile only:
   3 cards per view instead of 2, single-line title, and the
   secondary detail rows (rating/sold, MOQ, swatches, stock lines,
   the bottom Add-to-cart row) stripped out to keep each of the
   narrower cards readable — the floating quick-add icon on the
   image already covers add-to-cart here. Scoped to
   .d2s-home-section-sale only, so every other homepage section and
   the Shop grid keep their normal card layout. ---------- */
@media (max-width: 600px) {
	.d2s-home-section-sale .d2s-home-carousel-track {
		gap: 8px;
	}
	.d2s-home-section-sale .d2s-home-carousel-track .d2s-product-card,
	.d2s-home-section-sale .d2s-home-carousel-track .product {
		flex: 0 0 calc((100% - 16px) / 3);
	}
	.d2s-home-section-sale .d2s-card-title {
		-webkit-line-clamp: 2;
		min-height: 0 !important;
		font-size: 11.5px !important;
		line-height: 14px !important;
		max-height: 28px !important;
	}
	.d2s-home-section-sale .d2s-card-body {
		padding: 7px 6px 8px !important;
		gap: 3px !important;
	}
	.d2s-home-section-sale .d2s-card-social-proof,
	.d2s-home-section-sale .d2s-card-moq,
	.d2s-home-section-sale .d2s-card-swatches,
	.d2s-home-section-sale .d2s-card-stock-status,
	.d2s-home-section-sale .d2s-card-stock-urgency,
	.d2s-home-section-sale .d2s-card-shipping-line,
	.d2s-home-section-sale .d2s-card-ticker,
	.d2s-home-section-sale .d2s-card-body > .d2s-card-actions {
		display: none !important;
	}
	.d2s-home-section-sale .d2s-card-price {
		gap: 3px !important;
		min-height: 0 !important;
	}
	.d2s-home-section-sale .d2s-card-price .d2s-card-current-price,
	.d2s-home-section-sale .d2s-card-price .d2s-card-current-price .woocommerce-Price-amount,
	.d2s-home-section-sale .d2s-card-price .d2s-card-current-price bdi,
	.d2s-home-section-sale .d2s-card-price .d2s-card-current-price .woocommerce-Price-currencySymbol,
	.d2s-home-section-sale .d2s-card-price .d2s-card-current-price--sale,
	.d2s-home-section-sale .d2s-card-price .d2s-card-current-price--sale .woocommerce-Price-amount,
	.d2s-home-section-sale .d2s-card-price .d2s-card-current-price--sale bdi,
	.d2s-home-section-sale .d2s-card-price .d2s-card-current-price--sale .woocommerce-Price-currencySymbol {
		font-size: 13px !important;
	}
	.d2s-home-section-sale .d2s-card-price .d2s-card-original-price,
	.d2s-home-section-sale .d2s-card-price .d2s-card-original-price .woocommerce-Price-amount,
	.d2s-home-section-sale .d2s-card-price .d2s-card-original-price bdi {
		font-size: 9px !important;
	}
	.d2s-home-section-sale .d2s-card-price .d2s-card-discount {
		display: none;
	}
	/* Variable products show a price RANGE ("$129.00 – $139.00") via
	   WooCommerce's own markup (.d2s-card-wc-price), which was still
	   using the card's full 19px desktop price size — on a 3-across
	   mobile card that wrapped to two large lines and made that one
	   card much taller than its neighbors. Matched down to the same
	   compact size as the simple/sale price above. */
	.d2s-home-section-sale .d2s-card-wc-price {
		gap: 3px !important;
	}
	.d2s-home-section-sale .d2s-card-wc-price .price {
		gap: 3px !important;
	}
	.d2s-home-section-sale .d2s-card-wc-price .woocommerce-Price-amount,
	.d2s-home-section-sale .d2s-card-wc-price bdi,
	.d2s-home-section-sale .d2s-card-wc-price .woocommerce-Price-currencySymbol {
		font-size: 13px !important;
		font-weight: 700;
	}
	.d2s-home-section-sale .d2s-sale-timer--card {
		font-size: 9px !important;
	}
	.d2s-home-section-sale .d2s-sale-timer--card .d2s-sale-timer-unit b {
		font-size: 9.5px !important;
	}
}

/* ---------- Featured Categories ("Explore Top Collections") ---------- */
.d2s-featured-cats {
	padding: 32px 0;
}

.d2s-featured-cats-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.d2s-featured-cats-title {
	font-size: 26px;
	font-weight: 700;
	color: #1A1A1A;
	margin: 0 0 1px;
	letter-spacing: -0.2px;
	line-height: 1.15;
}

.d2s-featured-cats-subtitle {
	font-size: 14px;
	color: var(--d2s-color-text-muted);
	margin: 0 0 18px;
	line-height: 1.25;
}

.d2s-featured-cats-nav {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	margin-top: 4px;
}

.d2s-featured-cats-arrow-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--d2s-color-border);
	border-radius: 50%;
	background: #fff;
	color: var(--d2s-color-text);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.d2s-featured-cats-arrow-btn:hover:not(:disabled) {
	border-color: var(--d2s-color-primary);
	color: var(--d2s-color-primary);
	background: #f2f5f4;
}

.d2s-featured-cats-arrow-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Every featured category shows, in one horizontally scrolling row —
   fixed-width cards (not a fixed-column grid), so any count keeps a
   consistent card size instead of stretching/shrinking to fill columns.
   The head row's prev/next buttons (or touch/trackpad scroll) move it. */
.d2s-featured-cats-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px;
}
.d2s-featured-cats-track::-webkit-scrollbar {
	display: none;
}

.d2s-featured-cat-card {
	position: relative;
	flex: 0 0 auto;
	width: 200px;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	overflow: hidden;
	display: block;
}

.d2s-featured-cat-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.d2s-featured-cat-card:hover img {
	transform: scale(1.05);
}

.d2s-featured-cat-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0) 100%);
}

.d2s-featured-cat-name {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	line-height: 1.25;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	overflow-wrap: break-word;
}

.d2s-featured-cat-arrow {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease;
}

.d2s-featured-cat-arrow svg {
	width: 15px;
	height: 15px;
}

.d2s-featured-cat-card:hover .d2s-featured-cat-arrow {
	transform: scale(1.08);
}

@media (max-width: 1024px) {
	.d2s-featured-cats {
		padding: 22px 0;
	}
	.d2s-featured-cats-title {
		font-size: 19px;
		font-weight: 700;
	}
	.d2s-featured-cats-subtitle {
		font-size: 13px;
		margin-bottom: 14px;
	}
	.d2s-featured-cats-nav {
		display: none;
	}
	.d2s-featured-cats-track {
		gap: 10px;
	}
	.d2s-featured-cat-card {
		width: 128px;
		border-radius: 12px;
	}
	.d2s-featured-cat-overlay {
		padding: 10px;
	}
	.d2s-featured-cat-name {
		font-size: 13px;
	}
	.d2s-featured-cat-arrow {
		width: 28px;
		height: 28px;
	}
	.d2s-featured-cat-arrow svg {
		width: 13px;
		height: 13px;
	}
}

/* Small phones — 2 columns still fits, just tighten once more. */
@media (max-width: 400px) {
	.d2s-featured-cats-track {
		gap: 8px;
	}
	.d2s-featured-cat-name {
		font-size: 12px;
	}
}

/* ---------- Homepage Bulk & Save teaser ----------
   Deliberately lightweight — just enough to make the banner image +
   overlay text readable and clickable. The full Bulk & Save visual
   language (hero, filters, cards) lives in bulk-save.css and is
   never loaded on the homepage. */
.d2s-bulk-home-teaser {
	margin: 32px 0;
	padding: 0 20px;
}

.d2s-bulk-home-teaser-link {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	min-height: 180px;
	background: linear-gradient(135deg, #0D2B27, #08211D);
}

.d2s-bulk-home-teaser-bg {
	position: absolute;
	inset: 0;
}

.d2s-bulk-home-teaser-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.d2s-bulk-home-teaser-inner {
	position: relative;
	z-index: 1;
	padding: 32px;
	max-width: 480px;
}

.d2s-bulk-home-teaser-kicker {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--d2s-color-gold);
	margin-bottom: 8px;
}

.d2s-bulk-home-teaser-inner h2 {
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 6px;
}

.d2s-bulk-home-teaser-inner p {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 16px;
}

.d2s-bulk-home-teaser-cta {
	display: inline-block;
	background: var(--d2s-color-gold);
	color: #1A1300;
	font-weight: 700;
	font-size: 13.5px;
	padding: 10px 22px;
	border-radius: 22px;
}

@media (max-width: 1024px) {
	.d2s-bulk-home-teaser {
		padding: 0 16px;
		margin: 24px 0;
	}
	.d2s-bulk-home-teaser-inner {
		padding: 22px;
	}
	.d2s-bulk-home-teaser-inner h2 {
		font-size: 20px;
	}
	.d2s-bulk-home-teaser-inner p {
		font-size: 13px;
	}
}


/* ---------- Premium homepage section header / carousel controls ---------- */
.d2s-home-section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 18px;
}

.d2s-home-section-heading {
	min-width: 0;
}

.d2s-home-section-title {
	margin-bottom: 2px;
}

.d2s-home-section-subtitle {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	color: var(--d2s-color-text-muted);
}

.d2s-home-section-actions {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
}

.d2s-home-section-view-all {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 700;
	color: var(--d2s-color-primary, #08534C);
	text-decoration: none;
	white-space: nowrap;
	margin-right: 4px;
}

.d2s-home-section-view-all:hover {
	text-decoration: none;
	transform: translateX(1px);
}

.d2s-home-carousel-prev,
.d2s-home-carousel-next {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--d2s-color-border, #E4E8E7);
	border-radius: 50%;
	background: #fff;
	color: #174B46;
	font-size: 22px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.d2s-home-carousel-prev:hover,
.d2s-home-carousel-next:hover {
	border-color: #0F766E;
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
	transform: translateY(-1px);
}

.d2s-home-carousel-prev:disabled,
.d2s-home-carousel-next:disabled {
	opacity: .38;
	cursor: default;
	transform: none;
	box-shadow: none;
}

.d2s-home-section-sale .d2s-home-carousel-track {
	scroll-behavior: smooth;
}

@media (max-width: 1024px) {
	.d2s-home-section-header {
		align-items: center;
		margin-bottom: 14px;
	}
	.d2s-home-section-subtitle {
		font-size: 13px;
	}
	.d2s-home-section-actions {
		gap: 5px;
	}
	.d2s-home-section-view-all {
		font-size: 12px;
	}
	.d2s-home-carousel-prev,
	.d2s-home-carousel-next {
		width: 30px;
		height: 30px;
		font-size: 19px;
	}
}

@media (max-width: 600px) {
	.d2s-home-section-header {
		gap: 10px;
	}
	.d2s-home-section-heading {
		flex: 1 1 auto;
	}
	.d2s-home-section-title {
		font-size: 20px;
	}
	.d2s-home-section-subtitle {
		font-size: 12.5px;
	}
	.d2s-home-section-view-all {
		font-size: 12px;
	}
	.d2s-home-section-actions .d2s-home-carousel-prev,
	.d2s-home-section-actions .d2s-home-carousel-next {
		display: none;
	}
}