/* =====================================================================
   Tantopia – Home v2 hero: transparent header + tablet/mobile hero
   Advertise1 · loaded by mu-plugins/a1-tantopia-hero.php

   Scope: page 5978 (home-version-2). When this becomes the front page
   it keeps body.page-id-5978, so nothing needs changing.
   Header = Themify layout part 3788 · Hero = Builder row .tb_w011946
   ===================================================================== */

/* ---------- 1. Transparent header that turns black on scroll ---------- */

.page-id-5978 { --a1-hh: 182px; } /* real value set by the JS snippet */

.page-id-5978 .tb_layout_part_wrap:has(> .themify_builder_content-3788) {
	position: sticky;
	top: 0;
	z-index: 1000;
	margin-bottom: calc(-1 * var(--a1-hh)); /* lets the hero slide up underneath */
	isolation: isolate;
	/* soft shade so the yellow logo/menu stay readable over bright sky */
	background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,0) 100%);
}
.page-id-5978 .tb_layout_part_wrap:has(> .themify_builder_content-3788)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #000;
	opacity: 0;
	transition: opacity .3s ease, box-shadow .3s ease;
	pointer-events: none;
}
.page-id-5978.a1-scrolled .tb_layout_part_wrap:has(> .themify_builder_content-3788)::before {
	opacity: 1;
	box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
/* the Builder rows/columns inside the header have their own black fills */
.page-id-5978 .themify_builder_content-3788 .module_row,
.page-id-5978 .themify_builder_content-3788 .module_column {
	background-color: transparent !important;
}
/* keep clear of the WP admin bar when logged in */
.admin-bar.page-id-5978 .tb_layout_part_wrap:has(> .themify_builder_content-3788) { top: 32px; }
@media (max-width: 782px) {
	.admin-bar.page-id-5978 .tb_layout_part_wrap:has(> .themify_builder_content-3788) { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar.page-id-5978 .tb_layout_part_wrap:has(> .themify_builder_content-3788) { top: 0; }
}

/* menu: drop the black pill so the header is genuinely transparent */
.page-id-5978 .tb_pjse468 .nav,
.page-id-5978 .tb_pjse468 .nav > li > a { background-color: transparent !important; }

/* desktop (1025+): logo left, full menu in one line on the right */
@media (min-width: 1025px) {
	.page-id-5978 .tb_hxt2159 > .row_inner {
		grid-template-columns: auto minmax(0, 1fr) !important;
		grid-template-areas: "col1 col2" !important;
		align-items: center;
		column-gap: 32px;
	}
	.page-id-5978 .tb_hxt2159 .tb_wuie160,
	.page-id-5978 .tb_hxt2159 .tb_uh5b250 { width: auto !important; margin: 0 !important; display: block !important; min-width: 0; }
	/* Builder gives the menu margin-right:-200px – not needed now it's right-aligned */
	body.page-id-5978 .themify_builder_content-3788 .tb_hxt2159 .module.module-menu.tb_pjse468 { margin: 0 !important; width: auto !important; }
	.page-id-5978 .tb_uh5b250 .module-menu { text-align: right; }
	.page-id-5978 .tb_pjse468 .nav { white-space: nowrap; display: inline-block !important; }
	.page-id-5978 .tb_5ee1723 img { max-width: 260px; height: auto; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
	.page-id-5978 .tb_pjse468 .nav > li > a { padding-left: 12px !important; padding-right: 12px !important; font-size: 17px !important; }
}

/* tablets: the full menu doesn't fit below 1025px, so use the burger up to 1024
   (same rules Themify prints for its own 767px breakpoint) */
@media (max-width: 1024px) {
	.page-id-5978 .tb_pjse468 .menu-module-burger { display: inline-block !important; color: #fff204 !important; }
	.page-id-5978 .tb_pjse468 .module-menu-container { display: none; }
	.page-id-5978 .tb_pjse468 .module-menu-container.is-open { display: block; }
	.page-id-5978 .tb_hxt2159 > .row_inner {
		grid-template-columns: minmax(0, 1fr) 64px !important;
		grid-template-areas: "col1 col2" !important;
		align-items: center;
	}
	.page-id-5978 .tb_hxt2159 .tb_uh5b250,
	.page-id-5978 .tb_pjse468 { width: auto !important; margin: 0 !important; padding: 0 !important; }
	.page-id-5978 .tb_uh5b250 .module-menu { text-align: right; }
	.page-id-5978 .tb_5ee1723 img { max-width: 240px; height: auto; }
}
@media (max-width: 600px) {
	.page-id-5978 .tb_5ee1723 img { max-width: 180px; }
}

/* site-wide fix: the mobile menu's close (×) was black on the black overlay */
.tb_pjse468 .menu-close { color: #fff204 !important; }

/* hero content starts below the overlaid header (desktop keeps your spacing) */
.page-id-5978 .tb_w011946 {
	padding-top: calc(var(--a1-hh) + 2vw) !important; /* title + subtitle sit in the sky, above the sea line */
}

/* ---------- 2. Tablet landscape (769–1024): text left, products bottom-right ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
	.page-id-5978 .tb_w011946 {
		background-image: url(tantopia-hero-tablet.jpg) !important;
		background-size: 100% auto !important;   /* products always sit in the right ~40% */
		background-position: 50% 100% !important;
		background-color: #92b1b2 !important;     /* fallback above the sky if the text runs very tall */
		padding: calc(var(--a1-hh) + 40px) 40px 48px !important;
		min-height: 82vw;
	}
	.page-id-5978 .tb_w011946 > .row_inner {
		grid-template-columns: 52% 1fr !important;
		grid-template-areas: "col1 col2" !important;
	}
	.page-id-5978 .tb_w011946 .tb_axbt190 { display: none !important; }
	.page-id-5978 .tb_uct0420 h1 { font-size: clamp(42px, 5.4vw, 54px) !important; line-height: 1.05 !important; }
	.page-id-5978 .tb_gl01991 p { font-size: 18px !important; line-height: 1.5 !important; }
}

/* ---------- 3. Tablet portrait + mobile (≤768): text on top, products below ---------- */
@media (max-width: 768px) {
	.page-id-5978 .tb_w011946 {
		background-image: url(tantopia-hero-mobile.jpg) !important;
		background-size: 100% auto !important;
		background-position: 50% 100% !important;
		background-color: #689ca3 !important;
		padding: calc(var(--a1-hh) + 32px) 32px 122vw !important; /* bottom = room for the products */
	}
	.page-id-5978 .tb_w011946 > .row_inner {
		grid-template-columns: 1fr !important;
		grid-template-areas: "col1" !important;
	}
	.page-id-5978 .tb_w011946 .tb_499h170,
	.page-id-5978 .tb_w011946 .tb_axbt190 { display: none !important; }
	.page-id-5978 .tb_uct0420 h1 { font-size: 52px !important; line-height: 1.05 !important; }
	.page-id-5978 .tb_gl01991 p { font-size: 19px !important; line-height: 1.5 !important; max-width: 30em; }
}

@media (max-width: 600px) {
	.page-id-5978 .tb_w011946 {
		padding: calc(var(--a1-hh) + 24px) 20px 124vw !important;
	}
	.page-id-5978 .tb_uct0420 h1 { font-size: 38px !important; }
	.page-id-5978 .tb_gl01991 p { font-size: 17px !important; }
}

/* ---------- 4. Hero text block: ticks on one line, buttons side by side ---------- */
.page-id-5978 .tb_jcf0690 {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 12px 26px;
	align-items: center;
}
.page-id-5978 .tb_jcf0690 > .module_column { width: auto !important; margin: 0 !important; flex: 0 0 auto; }
.page-id-5978 .tb_jcf0690 .module-icon-item span { white-space: nowrap; }
.page-id-5978 .tb_c1u1264 {
	display: flex !important;
	flex-wrap: wrap;
	gap: 14px 18px;
}
.page-id-5978 .tb_c1u1264 > .module_column { width: auto !important; margin: 0 !important; flex: 0 0 auto; }
.page-id-5978 .tb_c1u1264 .builder_button { white-space: nowrap; }

/* desktop: text block ~50% of the width */
@media (min-width: 1025px) {
	.page-id-5978 .tb_w011946 > .row_inner {
		grid-template-columns: minmax(0, 50%) 1fr !important;
		grid-template-areas: "col1 col2" !important;
	}
	.page-id-5978 .tb_w011946 .tb_axbt190 { display: none !important; }
	.page-id-5978 .tb_uct0420 h1 { font-size: clamp(56px, 4.5vw, 120px) !important; line-height: 1.05 !important; }
	.page-id-5978 .tb_gl01991 p { max-width: 620px; }
	.page-id-5978 .tb_uct0420 h1 { margin: 0 0 .25em !important; }
	.page-id-5978 .tb_uct0420 { margin-bottom: 0 !important; }
	/* Hero is a fixed 2:1 box (the photo scales with the width), and the ticks / buttons /
	   Trustpilot group is pinned to the bottom of it. Everything below is sized in vw,
	   so the ticks land on the waves at any desktop width (checked 1280–2560px). */
	.page-id-5978 .tb_w011946 { padding-bottom: 1vw !important; }
	.page-id-5978 .tb_w011946 > .row_inner {
		min-height: calc(50vw - var(--a1-hh) - 3vw);
		align-items: stretch !important;
		align-content: stretch !important;
		grid-template-rows: minmax(0, 1fr) !important;
	}
	.page-id-5978 .tb_cnfd062 { display: flex !important; flex-direction: column; }
	.page-id-5978 .tb_gl01991 { margin-bottom: 1.2vw !important; }
	/* ticks + buttons follow the subtitle; on very wide screens add space so they stay level with the waves */
	.page-id-5978 .tb_jcf0690 { margin-top: max(0px, calc(9.2vw - var(--a1-hh))) !important; margin-bottom: 2.6vw !important; gap: .8vw 1.4vw !important; }
	.page-id-5978 .tb_jcf0690 .module-icon-item em { font-size: clamp(13px, .95vw, 25px) !important; padding: .5em !important; }
	/* everything scales with the photo: side padding, subtitle size + width (values match 1920px) */
	.page-id-5978 .tb_w011946 { padding-left: 6.1vw !important; padding-right: 6.1vw !important; }
	.page-id-5978 .tb_gl01991 p { font-size: clamp(17px, 1.52vw, 40px) !important; line-height: 1.38 !important; max-width: 32.5vw !important; }
	.page-id-5978 .tb_zzp7623 { margin-top: auto !important; } /* Trustpilot stays pinned to the bottom of the hero */
	.page-id-5978 .tb_jcf0690 .module-icon-item span { font-size: clamp(15px, 1.05vw, 28px) !important; }
	.page-id-5978 .tb_c1u1264 { margin-bottom: 1.7vw !important; gap: 1vw !important; }
	.page-id-5978 .tb_c1u1264 .builder_button { font-size: clamp(16px, 1.15vw, 30px) !important; padding: .75em 1.4em !important; }
	.page-id-5978 .tb_9yqk84 img { width: clamp(180px, 13vw, 360px) !important; height: auto !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
	.page-id-5978 .tb_jcf0690 { flex-wrap: wrap; } /* narrow tablet column: let the third tick drop */
}
@media (max-width: 1024px) {
	.page-id-5978 .tb_9yqk84 img { width: 200px; height: auto; }
	.page-id-5978 .tb_jcf0690,
	.page-id-5978 .tb_c1u1264 { margin-bottom: 28px !important; }
	.page-id-5978 .tb_gl01991 { margin-bottom: 20px !important; }
}
/* mobile: ticks stacked */
@media (max-width: 600px) {
	.page-id-5978 .tb_jcf0690 { flex-direction: column; align-items: flex-start; gap: 10px; }
	.page-id-5978 .tb_c1u1264 .builder_button { padding: 14px 24px !important; font-size: 15px !important; }
	.page-id-5978 .tb_9yqk84 img { width: 190px; }
}

/* ---------- 5. Header: breathing room above the logo ---------- */
.page-id-5978 .tb_hxt2159 { padding-top: 22px !important; }
@media (max-width: 1024px) { .page-id-5978 .tb_hxt2159 { padding-top: 16px !important; } }
@media (max-width: 600px)  { .page-id-5978 .tb_hxt2159 { padding-top: 12px !important; } }

/* ---------- 6. Delivery / dispatch / Klarna / authentic strip: 2×2 on tablet + mobile ---------- */
@media (max-width: 1024px) {
	.page-id-5978 .tb_ubdf599 > .row_inner {
		grid-template-columns: 1fr 1fr !important;
		grid-template-areas: "col1 col2" "col3 col4" !important;
		gap: 18px 24px !important;
		padding: 20px 0;
	}
	.page-id-5978 .tb_ubdf599 > .row_inner > .module_column { width: auto !important; margin: 0 !important; }
	.page-id-5978 .tb_ubdf599 .module-icon { padding: 0 !important; text-align: left !important; }
	.page-id-5978 .tb_ubdf599 .module-icon-item {
		display: flex !important;
		align-items: center;
		gap: 14px;
		text-align: left !important;
	}
	.page-id-5978 .tb_ubdf599 .module-icon-item img { width: 56px !important; height: auto !important; flex: 0 0 56px; object-fit: contain; margin: 0 !important; }
	.page-id-5978 .tb_ubdf599 .module-icon-item span { font-size: 16px !important; line-height: 1.3 !important; margin: 0 !important; word-break: normal; overflow-wrap: normal; }
}
@media (max-width: 600px) {
	.page-id-5978 .tb_ubdf599 { padding-left: 16px !important; padding-right: 16px !important; }
	.page-id-5978 .tb_ubdf599 > .row_inner { gap: 16px 14px !important; padding: 16px 0; }
	.page-id-5978 .tb_ubdf599 .module-icon-item { gap: 10px; }
	.page-id-5978 .tb_ubdf599 .module-icon-item img { width: 40px !important; flex-basis: 40px; }
	.page-id-5978 .tb_ubdf599 .module-icon-item span { font-size: 14px !important; }
}

/* ---------- 8. Site-wide: Themify full-width rows without the scrollbar offset ---------- */
html { scrollbar-gutter: stable; }

.module_row.fullwidth,
.module_row.fullwidth_row_container {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	left: auto !important;
	right: auto !important;
}

#pagewrap { overflow-x: clip; }

/* ---------- 9. Subtitle readability: soft white glow behind "Premium tanning…" ---------- */
.page-id-5978 .tb_gl01991 { position: relative; isolation: isolate; }
.page-id-5978 .tb_gl01991::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -18% -6% -18% -4%;
	pointer-events: none;
	background: radial-gradient(ellipse at 40% 50%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.38) 45%, rgba(255,255,255,0) 72%);
	filter: blur(6px);
}
.page-id-5978 .tb_gl01991 p {
	text-shadow: 0 0 2px rgba(255,255,255,.9), 0 0 10px rgba(255,255,255,.75), 0 0 22px rgba(255,255,255,.5);
}