/* Hemdox Ecommerce Kit — Home page widgets (Hero + USP bar). JUUL-blue system by default. */

/* ============================ HERO ============================ */
.hemdox-hero {
	--hh-accent: #0098DA;
	--hh-accent-2: #00C2F2;
	--hh-bg-1: #0B1F2A;
	--hh-bg-2: #0E2A38;
	--hh-ink: #FFFFFF;
	--hh-text: #B9D2DE;
	--hh-chip: rgba(255,255,255,.08);
	--hh-chip-bd: rgba(255,255,255,.16);
	position: relative;
	overflow: hidden;
	border-radius: var(--hh-radius, 28px);
	background:
		radial-gradient(120% 120% at 100% 0%, rgba(0,152,218,.35) 0%, rgba(0,152,218,0) 45%),
		radial-gradient(90% 90% at 0% 100%, rgba(0,194,242,.18) 0%, rgba(0,194,242,0) 40%),
		linear-gradient(155deg, var(--hh-bg-1) 0%, var(--hh-bg-2) 100%);
	isolation: isolate;
}
.hemdox-hero__grid-lines {
	position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
	background-image:
		linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(80% 70% at 70% 30%, #000 30%, transparent 75%);
	        mask-image: radial-gradient(80% 70% at 70% 30%, #000 30%, transparent 75%);
}
.hemdox-hero__inner {
	position: relative; z-index: 2;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	align-items: center;
	gap: 32px;
	min-height: var(--hh-minh, 520px);
	padding: clamp(28px, 5vw, 64px);
}
.hemdox-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hemdox-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
	color: #fff; padding: 7px 14px; border-radius: 999px;
	background: var(--hh-chip); border: 1px solid var(--hh-chip-bd);
}
.hemdox-hero__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hh-accent-2); box-shadow: 0 0 10px var(--hh-accent-2); }
.hemdox-hero__title {
	margin: 0; color: var(--hh-ink);
	font-size: clamp(34px, 5.2vw, 62px); font-weight: 800; line-height: 1.03; letter-spacing: -1.4px;
}
.hemdox-hero__title .hl {
	background: linear-gradient(100deg, var(--hh-accent) 0%, var(--hh-accent-2) 100%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.hemdox-hero__sub { margin: 0; color: var(--hh-text); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; max-width: 46ch; }
.hemdox-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hemdox-hero__btn {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 15px 28px; border-radius: 999px; font-size: 15.5px; font-weight: 700; line-height: 1;
	text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.hemdox-hero__btn--primary { background: var(--hh-accent); color: #fff; box-shadow: 0 14px 34px -12px rgba(0,152,218,.75); }
.hemdox-hero__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(0,152,218,.85); background: #00A9F0; }
.hemdox-hero__btn--ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.28); }
.hemdox-hero__btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.hemdox-hero__btn svg { width: 18px; height: 18px; }
.hemdox-hero__chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hemdox-hero__chips li { display: inline-flex; align-items: center; gap: 8px; color: #D7E7EF; font-size: 13.5px; font-weight: 600; }
.hemdox-hero__chips svg { width: 17px; height: 17px; color: var(--hh-accent-2); flex: none; }

/* Visual: animated device + glow + floating pods */
.hemdox-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.hemdox-hero__glow {
	position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle, rgba(0,152,218,.55) 0%, rgba(0,152,218,0) 68%);
	filter: blur(6px); animation: hh-pulse 4.5s ease-in-out infinite; z-index: 0;
}
.hemdox-hero__ring {
	position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%;
	border: 1px dashed rgba(0,194,242,.35); animation: hh-spin 26s linear infinite; z-index: 0;
}
.hemdox-hero__device { position: relative; z-index: 2; width: clamp(150px, 22vw, 236px); height: auto; filter: drop-shadow(0 26px 40px rgba(0,0,0,.45)); animation: hh-float 5.2s ease-in-out infinite; transform-origin: center; }
.hemdox-hero__pod { position: absolute; z-index: 1; filter: drop-shadow(0 12px 20px rgba(0,0,0,.4)); }
.hemdox-hero__pod--a { width: 62px; top: 12%; right: 12%; animation: hh-float 6.4s ease-in-out infinite; }
.hemdox-hero__pod--b { width: 52px; bottom: 14%; left: 10%; animation: hh-float 7.1s ease-in-out .6s infinite; }

@keyframes hh-float { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(-4deg); } }
@keyframes hh-pulse { 0%,100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes hh-spin { to { transform: rotate(360deg); } }

@media (max-width: 1024px) {
	.hemdox-hero__inner { grid-template-columns: 1fr; min-height: 0; gap: 22px; }
	.hemdox-hero__visual { order: -1; min-height: 240px; }
	.hemdox-hero__content { align-items: center; text-align: center; }
	.hemdox-hero__sub { max-width: 60ch; }
	.hemdox-hero__chips { justify-content: center; }
}
@media (max-width: 480px) {
	.hemdox-hero__cta { width: 100%; }
	.hemdox-hero__btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.hemdox-hero__device, .hemdox-hero__pod, .hemdox-hero__glow, .hemdox-hero__ring { animation: none !important; }
}

/* ============================ USP / TRUST BAR ============================ */
.hemdox-usp {
	--hu-accent: #0098DA;
	--hu-ink: #0B1F2A;
	--hu-muted: #5A6B75;
	--hu-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--hu-cols), minmax(0,1fr));
	gap: var(--hu-gap, 16px);
	width: 100%;
}
.hemdox-usp__item {
	display: flex; align-items: center; gap: 14px;
	padding: 18px 20px; background: #fff;
	border: 1px solid #E4EBEF; border-radius: 16px;
	box-shadow: 0 10px 26px -20px rgba(11,31,42,.4);
}
.hemdox-usp__icon {
	flex: none; width: 46px; height: 46px; border-radius: 12px;
	display: grid; place-items: center;
	background: color-mix(in srgb, var(--hu-accent) 12%, #fff);
	color: var(--hu-accent);
}
.hemdox-usp__icon svg { width: 24px; height: 24px; }
.hemdox-usp__title { margin: 0; font-size: 15px; font-weight: 800; color: var(--hu-ink); letter-spacing: -.2px; line-height: 1.2; }
.hemdox-usp__text { margin: 2px 0 0; font-size: 13px; color: var(--hu-muted); line-height: 1.35; }
@media (max-width: 900px) { .hemdox-usp { --hu-cols: 2; } }
@media (max-width: 520px) { .hemdox-usp { --hu-cols: 1; } }

/* ============================ HOME-SCOPED TWEAKS ============================ */
/* Keep category-tile hover on-brand (blue) instead of the kit's default flame-red. */
.hemdox-home-cats .hemdox-ctile:hover { outline-color: #0098DA; }
/* On-brand sale badge + accents for home product grids (kit default flame is purple→red). */
.hemdox-home-grid .hemdox-grid { --ph-flame: linear-gradient(120deg, #0098DA 0%, #00C2F2 100%); --ph-accent-h: #007BB5; }
/* Section heading helpers used by native Elementor headings on the home page */
.hemdox-eyebrow { display:inline-block; font-size:13px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#0098DA; }
.hemdox-sec-sub { max-width: 62ch; margin-left:auto; margin-right:auto; }

/* =========================================================================
   Kit-specificity overrides. The Elementor global kit styles
   `.elementor-kit-XXXX h1/h2/h3/a` (specificity 0-1-1), which beats our
   widgets' plain class colors (0-1-0) — so headings fell back to the kit's
   dark navy (invisible on dark / image backgrounds) and buttons fell back to
   the kit's link color / default purple gradient. These rules win it back.
   Scoped to the home page (this stylesheet only loads where the Hero is).
   ========================================================================= */

/* Hero — force the white headline (the [hl] span keeps its accent gradient). */
.hemdox-hero .hemdox-hero__title { color: var(--hh-ink); }
.hemdox-hero .hemdox-hero__title .hl { -webkit-text-fill-color: transparent; color: transparent; }
.hemdox-hero .hemdox-hero__sub { color: var(--hh-text); }

/* Category tiles — white names + a stronger bottom scrim so they read on any image. */
.hemdox-home-cats .hemdox-ctile__name { color: #fff; }
.hemdox-home-cats .hemdox-ctile--img .hemdox-ctile__overlay {
	background: linear-gradient(180deg, rgba(11,31,42,0) 6%, rgba(11,31,42,.5) 48%, rgba(11,31,42,.93) 100%);
}
.hemdox-home-cats .hemdox-ctile--solid .hemdox-ctile__bg { background-image: linear-gradient(150deg, #0098DA 0%, #0B1F2A 100%) !important; }

/* Product / kit buttons — honor the intended button colors instead of the kit's <a> color. */
.hemdox-btn { color: var(--ph-btn-color) !important; }
.hemdox-btn:hover, .hemdox-btn.added { color: var(--ph-btn-color-h) !important; }
.hemdox-qty__btn:hover { background: rgba(0,152,218,.10); color: #0098DA; }

/* Banner grid — blue button (not the purple flame) + white button label. */
.hemdox-bgrid { --ph-flame: linear-gradient(120deg, #0098DA 0%, #00C2F2 100%); }
.hemdox-bgrid .hemdox-bcard__btn { color: #fff !important; box-shadow: 0 12px 26px -12px rgba(0,152,218,.55); }
.hemdox-bgrid .hemdox-bcard__btn:hover { box-shadow: 0 16px 30px -12px rgba(0,152,218,.7); }

/* Kit Builder — on-brand solid add-to-cart button. */
.hemdox-kit .hemdox-kit__add { background: #0098DA !important; border-color: #0098DA !important; color: #fff !important; }