/* ==========================================================
   D2S Theme — home-hero.css
   Loads ONLY on the front page. Merged from two files that were
   previously separate requests (hero-slider.css + homepage-
   banners.css) — both are homepage-exclusive (never shared with
   Shop/Category/Bulk & Save, unlike shop.css and home-sections.css,
   which stay as their own separate cacheable files since they're
   reused across multiple page types). Combining these two into one
   request was a direct, zero-risk fix for a PageSpeed Insights
   "render-blocking requests" finding on the live site.
   ========================================================== */

/* ---------- hero-slider (was hero-slider.css) ---------- */
.d2s-hero-slider {
	position: relative;
	overflow: hidden;
	border-radius: 0;
}

.d2s-hero-track {
	display: flex;
	transition: transform 0.8s ease;
}

.d2s-hero-slide {
	flex: 0 0 100%;
	aspect-ratio: 1800 / 380;
	background-color: #f0f0f0;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.d2s-hero-slide-picture {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	line-height: 0;
}

.d2s-hero-slide-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.d2s-hero-slide.has-text-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
}

.d2s-hero-content {
	position: relative;
	z-index: 2;
	max-width: var(--d2s-container-width);
	margin: 0 auto;
	padding: 0 40px;
	width: 100%;
	color: #fff;
}

.d2s-hero-title {
	font-size: 40px;
	font-weight: 800;
	margin: 0 0 12px;
	max-width: 520px;
	line-height: 1.15;
}

.d2s-hero-subtitle {
	font-size: 16px;
	margin: 0 0 22px;
	max-width: 480px;
	opacity: 0.9;
}

.d2s-hero-btn {
	display: inline-block;
	padding: 12px 28px;
	background: #F0A41D;
	color: #1A1A1A;
	font-weight: 700;
	border-radius: var(--d2s-radius);
}

.d2s-hero-btn:hover {
	filter: brightness(0.95);
}

.d2s-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	border: none;
	font-size: 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.d2s-hero-prev {
	left: 16px;
}

.d2s-hero-next {
	right: 16px;
}

.d2s-hero-dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 2;
}

.d2s-hero-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	cursor: pointer;
	padding: 0;
}

.d2s-hero-dot.is-active {
	background: #fff;
	width: 22px;
	border-radius: 4px;
}

@media (max-width: 1024px) {
	.d2s-hero-slide {
		aspect-ratio: auto;
		height: auto;
		display: block;
	}
	.d2s-hero-slide-picture {
		position: static;
		display: block;
	}
	.d2s-hero-slide-img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: initial;
	}
	.d2s-hero-slide.has-text-overlay::before {
		display: none;
	}
	/* A slide saved with a desktop image only (no dedicated mobile
	   image) is hidden below this breakpoint instead of stretching
	   the desktop crop into the wrong aspect ratio; its matching dot
	   is hidden too. hero-slider.js recalculates slide count/order
	   from what's actually visible, so navigation stays in sync. */
	.d2s-hero-slide[data-has-mobile="0"],
	.d2s-hero-dot[data-has-mobile="0"] {
		display: none !important;
	}
	.d2s-hero-content {
		color: var(--d2s-color-text);
		padding: 16px 20px;
	}
	.d2s-hero-title {
		font-size: 26px;
	}
	.d2s-hero-subtitle {
		font-size: 13px;
	}
	.d2s-hero-arrow {
		display: none;
	}
}

/* ---------- Trust badges strip (Version 6 — "Shop With Confidence"
   layout: angled dark-green brand panel (the "green touch" borrowed
   from the bolder reference option) + icon row + italic tagline,
   on a pale mint background with a soft world-map watermark. ---------- */
.d2s-trust-strip {
	position: relative;
	margin-top: -28px;
	z-index: 5;
	padding-bottom: 24px;
}

.d2s-trust-strip-track {
	display: flex;
	align-items: stretch;
	background: #EEF6F3;
	border-radius: 14px;
	box-shadow: 0 10px 26px -10px rgba(8, 83, 76, 0.18);
	overflow: hidden;
	position: relative;
}

/* ── Left: angled dark-green brand panel — the "green touch" ── */
.d2s-trust-strip-brand {
	flex-shrink: 0;
	position: relative;
	width: 212px;
	background: linear-gradient(135deg, #0C5A51, #08534C);
	clip-path: polygon(0 0, 100% 0, 82% 100%, 0% 100%);
	margin-right: -18px;
}

/* Absolute + translateY(-50%) centers this block on the parent's
   actual rendered height, regardless of flex/grid stretch quirks —
   the most reliable cross-browser vertical-centering technique,
   since it measures the wrapper's own natural content height at
   render time instead of relying on a layout algorithm to guess it. */
.d2s-trust-strip-brand-center {
	position: absolute;
	top: 50%;
	left: 24px;
	right: 40px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.d2s-trust-strip-brand-line1,
.d2s-trust-strip-brand-line2 {
	margin: 0;
}

.d2s-trust-strip-brand-line1 {
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.2;
	white-space: nowrap;
}

.d2s-trust-strip-brand-line2 {
	position: relative;
	display: inline-block;
	width: fit-content;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #fff;
	line-height: 1.25;
	white-space: nowrap;
}

/* The "half underline in gold" accent under CONFIDENCE. */
/* A real block-level element (not position:absolute) — this is
   what makes the earlier centering fix actually work: an absolutely
   positioned underline doesn't count toward its parent's height, so
   the vertical-center calculation was balancing the two text lines
   alone and then this bar added extra visual weight below that,
   unbalanced. As a normal flow element it's counted correctly. */
.d2s-trust-strip-brand-line2::after {
	content: '';
	display: block;
	width: 55%;
	height: 3px;
	margin-top: 4px;
	border-radius: 2px;
	background: var(--d2s-color-gold);
}

/* ── Icon items ── */
.d2s-trust-strip-items {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	position: relative;
	z-index: 1;
}

.d2s-trust-strip-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 12px;
	position: relative;
}

.d2s-trust-strip-item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 20%;
	bottom: 20%;
	width: 1px;
	background: rgba(8, 83, 76, 0.12);
}

.d2s-trust-strip-icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	color: var(--d2s-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 3px 8px rgba(8, 83, 76, 0.12);
}

.d2s-trust-strip-icon svg {
	width: 18px;
	height: 18px;
}

.d2s-trust-strip-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.d2s-trust-strip-text strong {
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -0.1px;
	color: var(--d2s-color-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.d2s-trust-strip-text small {
	font-size: 11px;
	color: #4C6B65;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Mobile — hidden entirely (desktop/web only per request). */
@media (max-width: 1024px) {
	.d2s-trust-strip {
		display: none;
	}
}


/* ---------- homepage banners (was homepage-banners.css) ---------- */
.d2s-home-banners{padding:34px 0 38px}
.d2s-home-banners-grid{display:flex;flex-direction:column;gap:14px}
.d2s-home-banner-card{min-width:0;width:100%}
.d2s-home-banner-link{position:relative;display:block;overflow:hidden;width:100%;border-radius:16px;background:#0b332f;text-decoration:none;isolation:isolate;line-height:0}
.d2s-home-banner-media{display:block;width:100%;line-height:0}
.d2s-home-banner-media img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;transition:transform .45s ease}
.d2s-home-banner-link:hover .d2s-home-banner-media img{transform:scale(1.012)}
.d2s-home-banner-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,0));z-index:1;pointer-events:none}
.d2s-home-banner-content{position:absolute;left:0;top:0;bottom:0;width:min(62%,520px);display:flex;flex-direction:column;justify-content:center;padding:30px 34px;color:#fff;z-index:2}
.d2s-home-banner-eyebrow{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#f5c242;margin-bottom:7px}
.d2s-home-banner-content h2{font-size:25px;line-height:1.12;font-weight:800;margin:0 0 7px;color:#fff;letter-spacing:-.25px}
.d2s-home-banner-content p{font-size:13px;line-height:1.4;margin:0 0 15px;color:rgba(255,255,255,.88);max-width:420px}
.d2s-home-banner-cta{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:9px 15px;border-radius:999px;background:#f5c242;color:#13231f;font-size:12px;font-weight:800;line-height:1.2}
.d2s-home-banner-cta span{font-size:15px;line-height:1}
@media(max-width:1024px){.d2s-home-banners{padding:26px 0 30px}.d2s-home-banners-grid{gap:12px}.d2s-home-banner-link{border-radius:12px}.d2s-home-banner-content{padding:20px 22px}.d2s-home-banner-content h2{font-size:20px}.d2s-home-banner-content p{font-size:12px;margin-bottom:11px}.d2s-home-banner-cta{padding:8px 13px;font-size:11.5px}}
@media(max-width:600px){.d2s-home-banners{padding:22px 0 26px}.d2s-home-banners-grid{gap:10px}.d2s-home-banner-link{border-radius:10px}.d2s-home-banner-content{width:72%;padding:16px}.d2s-home-banner-eyebrow{font-size:9px;margin-bottom:5px}.d2s-home-banner-content h2{font-size:18px;margin-bottom:5px}.d2s-home-banner-content p{font-size:11.5px;margin-bottom:9px}.d2s-home-banner-cta{font-size:11px;padding:7px 11px}}