/**
 * VAPNORY FUMOT Product Experience (flavour panels: Cool Mint, Black Ice) - loaded ONLY on product 74533.
 * Every selector is prefixed .vpn-fx, which exists nowhere else, so no theme,
 * gallery, price, cart, tab or related-products CSS is touched.
 * Mobile-first (390px). Clean white full-width surface, no card/border/shadow look.
 * Fonts: site sans-serif inherited for headings/labels; Georgia (system serif, no download)
 * for intro, metric names/percentages and closing line.
 * Every grid track is minmax(0,1fr); every image has width/height.
 */
.vpn-fx {
	--fx-navy: #14284b;
	--fx-muted: #4a6478;
	--fx-line: #d3e4ec;
	--fx-serif: Georgia, "Times New Roman", Times, serif;
	box-sizing: border-box;
	width: 100%;
	margin: 24px 0 0;
	background: #edf8fb;
	color: var(--fx-navy);
	/* full-bleed light ice-blue band without causing horizontal scroll (shadow paint is not scrollable overflow; a shadow can only be a solid colour, so the band is solid) */
	box-shadow: 0 0 0 100vmax #edf8fb;
	clip-path: inset(0 -100vmax);
}
.vpn-fx *,
.vpn-fx *::before,
.vpn-fx *::after {
	box-sizing: border-box;
}
.vpn-fx[hidden],
.vpn-fx-panel[hidden] {
	display: none;
}
.vpn-fx-inner {
	max-width: 800px;
	margin: 0 auto;
	padding: 24px 20px 16px;
}
.vpn-fx img {
	display: block;
	max-width: 100%;
	height: auto;
}
.vpn-fx ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.vpn-fx li {
	margin: 0;
	min-width: 0;
}

/* Illustration with a soft ice-blue mist (pure CSS, behind the transparent WebP) */
.vpn-fx-hero {
	text-align: center;
}
.vpn-fx-art {
	width: min(72vw, 300px);
	max-width: 100%;
	margin: 0 auto;
	background: radial-gradient(closest-side, rgba(186, 222, 244, 0.6) 0%, rgba(204, 231, 247, 0.32) 58%, rgba(220, 240, 250, 0) 100%);
}
.vpn-fx-title {
	margin: 18px 0 10px;
	padding: 0;
	font-size: clamp(30px, 8.6vw, 38px);
	line-height: 1.12;
	font-weight: 300;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fx-navy);
	overflow-wrap: anywhere;
}
.vpn-fx-lead {
	max-width: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 -6px;
	font-family: var(--fx-serif);
	font-size: 17px;
	line-height: 1.45;
	color: var(--fx-navy);
}

/* FLAVOUR PROFILE: rule - label - rule, then four independent bars, always 4-across */
.vpn-fx-profile {
	margin-top: 26px;
}
.vpn-fx-rule {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 14px;
	padding: 0;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #8595a3;
}
.vpn-fx-rule::before,
.vpn-fx-rule::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: #cfdae2;
}
.vpn-fx-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.vpn-fx-metric {
	--track: #e3edf9;
	--fill: linear-gradient(90deg, #b7d0f0, #6289cf);
	display: block;
	text-align: center;
}
.vpn-fx-metric--mint  { --track: #e0f2f4; --fill: linear-gradient(90deg, #b5e2e4, #3f9fa9); }
.vpn-fx-metric--sweet { --track: #efe7f4; --fill: linear-gradient(90deg, #c9a3dc, #8c4ea8); }
.vpn-fx-metric--fruit { --track: #ebe4ee; --fill: linear-gradient(90deg, #8a4a9c, #5a2870); }
.vpn-fx-metric-name {
	display: block;
	font-family: var(--fx-serif);
	font-size: 13px;
	line-height: 1.3;
	color: var(--fx-navy);
	overflow-wrap: anywhere;
}
.vpn-fx-metric-value {
	display: block;
	font-family: var(--fx-serif);
	font-size: 30px;
	line-height: 1.1;
	font-weight: 700;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--fx-navy);
}
.vpn-fx-bar {
	position: relative;
	display: block;
	height: 10px;
	margin-top: 8px;
	background: var(--track);
	border-radius: 999px;
}
.vpn-fx-bar::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: var(--v, 0%);
	background: var(--fill);
	border-radius: 999px;
}

/* Headline + attributes + closing line */
.vpn-fx-note {
	margin-top: 28px;
}
.vpn-fx-note-title {
	margin: 0 0 14px;
	padding: 0;
	font-size: clamp(24px, 7vw, 32px);
	line-height: 1.15;
	font-weight: 300;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: left;
	color: var(--fx-navy);
	overflow-wrap: anywhere;
}
.vpn-fx-tags {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
	margin: 0 0 16px;
}
.vpn-fx-tag {
	padding: 10px 4px;
	text-align: center;
	font-size: 12px;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #5b2a72;
	border-bottom: 1px solid rgba(91, 42, 114, 0.3);
	overflow-wrap: anywhere;
}
.vpn-fx-tag:nth-child(even) {
	color: #2f86a8;
	border-bottom-color: rgba(47, 134, 168, 0.35);
}
.vpn-fx-note-text {
	max-width: 620px;
	margin: 0;
	font-family: var(--fx-serif);
	font-size: 17px;
	line-height: 1.5;
	text-align: left;
	color: var(--fx-navy);
}

/* Panels without a note block: 32px of air under the bars, then the next section's rule */
.vpn-fx-profile + .vpn-fx-section,
.vpn-fx-profile + [data-vpn-fx-spectrum-slot] .vpn-fx-section,
.vpn-fx-profile + [data-vpn-fx-shared-slot] [data-vpn-fx-shared] > .vpn-fx-section:first-child {
	margin-top: 32px;
}

/* Cool Mint supporting sections (device, facts, spectrum, FAQ) */
.vpn-fx-section {
	padding: 26px 0 8px;
	border-top: 1px solid var(--fx-line);
	margin-top: 26px;
}
.vpn-fx-h2 {
	margin: 0 0 16px;
	padding: 0;
	font-size: 21px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.005em;
	color: var(--fx-navy);
	overflow-wrap: anywhere;
}
.vpn-fx-h3 {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--fx-navy);
	overflow-wrap: anywhere;
}

/* 3. Device innovation: 2x2 mobile, 4-across desktop */
.vpn-fx-device {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.vpn-fx-device-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 10px;
	text-align: center;
}
.vpn-fx-device-icon {
	width: 76px;
	height: 76px;
	margin-bottom: 4px;
}
.vpn-fx-device-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--fx-muted);
	overflow-wrap: anywhere;
}

/* 4. Fast facts */
.vpn-fx-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.vpn-fx-fact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--fx-line);
	border-radius: 10px;
}
.vpn-fx-fact-icon {
	width: 22px;
	height: 22px;
	margin-bottom: 4px;
	fill: none;
	stroke: var(--fx-navy);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.vpn-fx-fact-value {
	font-size: 20px;
	line-height: 1.1;
	font-weight: 800;
	color: var(--fx-navy);
	overflow-wrap: anywhere;
}
.vpn-fx-fact-label {
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--fx-muted);
	overflow-wrap: anywhere;
}

/* 5. Cooling spectrum: 2 x 2 editorial catalogue. No cards/tiles/gradients/shadows: one vertical and one
 * horizontal pale blue-grey rule, italic serif numbers, navy rule at the far left of the current cell. */
.vpn-fx-spectrum {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vpn-fx-cat {
	position: relative;
	display: flex;
}
.vpn-fx-cat:nth-child(odd) {
	border-right: 1px solid #c7d7e2;
}
.vpn-fx-cat:nth-child(-n+2) {
	border-bottom: 1px solid #c7d7e2;
}
.vpn-fx-cat.is-current::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--fx-navy);
}
.vpn-fx .vpn-fx-cat-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 10px 8px 12px 12px;
	text-align: center;
	text-decoration: none;
	color: var(--fx-navy);
}
.vpn-fx-cat-num {
	align-self: flex-start;
	font-family: var(--fx-serif);
	font-style: italic;
	font-size: 15px;
	line-height: 1;
	color: var(--fx-navy);
}
.vpn-fx-cat-img {
	width: 100%;
	max-width: 132px;
	aspect-ratio: 1 / 1;
	height: auto;
	margin: 2px auto 6px;
	object-fit: contain;
}
.vpn-fx-cat-name {
	margin: 0 0 5px;
	padding: 0;
	font-family: var(--fx-serif);
	font-size: 13px;
	line-height: 1.25;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fx-navy);
	overflow-wrap: anywhere;
	text-wrap: balance;
}
.vpn-fx-cat-desc {
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fx-navy);
	overflow-wrap: anywhere;
	text-wrap: balance;
}
.vpn-fx-cat-arrow {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 10px;
	box-sizing: content-box;
	width: 38px;
	height: 10px;
	fill: none;
	stroke: var(--fx-navy);
	stroke-width: 1;
}
.vpn-fx-cat-link:hover .vpn-fx-cat-name {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.vpn-fx .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.vpn-fx a:focus-visible,
.vpn-fx summary:focus-visible {
	outline: 2px solid #3aa6bd;
	outline-offset: 2px;
}

/* 6. FAQ: native <details>, no JS */
.vpn-fx-faq {
	border-top: 1px solid var(--fx-line);
}
.vpn-fx-faq-item {
	border-bottom: 1px solid var(--fx-line);
}
.vpn-fx-faq-item summary {
	position: relative;
	padding: 14px 30px 14px 0;
	list-style: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--fx-navy);
}
.vpn-fx-faq-item summary::-webkit-details-marker {
	display: none;
}
.vpn-fx-faq-item summary::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 1.6px solid var(--fx-navy);
	border-bottom: 1.6px solid var(--fx-navy);
	transform: translateY(-70%) rotate(45deg);
}
.vpn-fx-faq-item[open] summary::after {
	transform: translateY(-30%) rotate(-135deg);
}
.vpn-fx-faq-item p {
	margin: 0;
	padding: 0 0 14px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--fx-muted);
}

@media (min-width: 500px) {
	.vpn-fx-art {
		width: min(72vw, 360px);
	}
	.vpn-fx-cat-img {
		max-width: 156px;
	}
	.vpn-fx-cat-name {
		font-size: 14px;
	}
	.vpn-fx-cat-desc {
		font-size: 10.5px;
	}
	.vpn-fx-metric-value {
		font-size: 32px;
	}
}
@media (min-width: 640px) {
	.vpn-fx-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 768px) {
	.vpn-fx-inner {
		padding: 36px 32px 20px;
	}
	.vpn-fx-title {
		font-size: 42px;
	}
	.vpn-fx-lead {
		font-size: 19px;
	}
	.vpn-fx-metrics {
		gap: 18px;
	}
	.vpn-fx-metric-name {
		font-size: 15px;
	}
	.vpn-fx-metric-value {
		font-size: 34px;
	}
	.vpn-fx-rule {
		font-size: 13px;
	}
	.vpn-fx-tag {
		font-size: 13px;
	}
	.vpn-fx-note-text {
		font-size: 18px;
	}
	.vpn-fx-h2 {
		font-size: 24px;
	}
	.vpn-fx-device {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}
	.vpn-fx-device--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.vpn-fx .vpn-fx-cat-link {
		padding: 16px 14px 16px 20px;
	}
	.vpn-fx-cat-num {
		font-size: 17px;
	}
	.vpn-fx-cat-img {
		max-width: 200px;
	}
	.vpn-fx-cat-name {
		font-size: 16px;
	}
	.vpn-fx-cat-desc {
		font-size: 11px;
	}
}
@media (min-width: 1024px) {
	.vpn-fx-art {
		width: 420px;
	}
}
@media (min-width: 1200px) {
	.vpn-fx-facts {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* 3-item device row (50K): the odd last item is centred under the pair on phones. */
.vpn-fx-device--three .vpn-fx-device-item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}
@media (min-width: 768px) {
	.vpn-fx-device--three .vpn-fx-device-item:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

/* Product Overview tab: per-flavour "About / Who is it for" blocks (only the selected one is shown). */
.vpn-fx-ov-item[hidden] {
	display: none !important;
}

/* JNR flavour profile: unrated items and the editorial-estimate note. */
.vpn-fx-metric.is-unrated .vpn-fx-metric-value {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--fx-muted);
}
.vpn-fx-score-note {
	margin: 14px 0 0;
	font-size: 10.5px;
	line-height: 1.45;
	text-align: center;
	color: #93a3b1;
}

/* Cool Mint experience: Cooling / Sweetness toggle + highlighted current card (2026-10-01).
 * Phones: 2 x 2 cards; desktop (>=768px): one row of four. */
.vpn-fx-spec-toggle {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 6px 0 14px;
}
.vpn-fx-spec-btn {
	appearance: none;
	-webkit-appearance: none;
	padding: 10px 22px;
	border: 1px solid var(--fx-navy);
	border-radius: 999px;
	background: #fff;
	color: var(--fx-navy);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}
.vpn-fx-spec-btn.is-active {
	background: var(--fx-navy);
	color: #fff;
}
.vpn-fx-spec-btn:focus-visible {
	outline: 2px solid var(--fx-navy);
	outline-offset: 2px;
}
.vpn-fx-spec-sub {
	margin: 0 0 14px;
	text-align: center;
	font-family: var(--fx-serif);
	font-size: 16px;
	color: var(--fx-navy);
}
.vpn-fx-spectrum--tabs[hidden] {
	display: none;
}
/* the subtitle keeps its space in the Cooling view so the cards do not move when the view changes */
.vpn-fx-spec-sub[hidden] {
	display: block;
	visibility: hidden;
}
.vpn-fx-spectrum--tabs {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 12px;
}
@media (min-width: 768px) {
	.vpn-fx-spectrum--tabs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0 18px;
	}
}
.vpn-fx-cat-now {
	z-index: 1;
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--fx-navy);
	color: #fff;
	font-family: inherit;
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.vpn-fx-cat-sel {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	color: #1d8c8c;
}

/* --- layout of the tabbed block (design mock): ruled centred heading, bordered portrait cards filling the column --- */
.vpn-fx .vpn-fx-spec-tabs .vpn-fx-h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 16px;
	text-align: center;
	font-weight: 400;
	font-size: 21px;
	line-height: 1.2;
	letter-spacing: 0.03em;
}
.vpn-fx .vpn-fx-spec-tabs .vpn-fx-h2::before,
.vpn-fx .vpn-fx-spec-tabs .vpn-fx-h2::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: #cfdae2;
}
@media (min-width: 768px) {
	.vpn-fx .vpn-fx-spec-tabs .vpn-fx-h2 {
		font-size: 28px;
		gap: 26px;
	}
}
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-link {
	align-items: stretch;
	padding: 0 0 6px;
}
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-num {
	margin: 0 0 8px;
}
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-frame {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border: 2px solid #c9d7df;
	border-radius: 16px;
	background: #fff;
	line-height: 0;
}
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat.is-current .vpn-fx-cat-frame {
	border-color: #1d8c8c;
}
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: auto;
	margin: 0;
}
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-desc {
	display: block;
	margin-top: 10px;
	text-align: center;
}
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-arrow,
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-sel {
	align-self: flex-start;
}

/* Card size back to the original spectrum size (owner: the pictures were too big): the picture keeps the widths the plain cards always had
 * (132px phones, 156px from 500px, 200px from 768px - plus the 2px frame border) and is centred in its column. */
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-frame {
	box-sizing: border-box;
	width: 100%;
	max-width: 136px;
	margin: 0 auto;
}
@media (min-width: 500px) {
	.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-frame {
		max-width: 160px;
	}
}
@media (min-width: 768px) {
	.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-frame {
		max-width: 204px;
	}
}

/* Phones (<768px): three cards per row (owner's trial); desktop keeps one row of four. */
@media (max-width: 767px) {
	.vpn-fx-spectrum--tabs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px 8px;
	}
	.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-frame {
		max-width: none;
	}
	.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-desc {
		font-size: 9px;
		letter-spacing: 0.08em;
	}
	.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-now {
		top: 6px;
		left: 6px;
		padding: 4px 7px;
		font-size: 8px;
		letter-spacing: 0.05em;
	}
	.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-sel {
		font-size: 11px;
	}
}

/* Phones: one row of three - the fourth card (never the current flavour) is hidden; desktop keeps all four. */
@media (max-width: 767px) {
	.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat--phone-hide {
		display: none;
	}
}

/* Phones / tablets: the flavour illustration sits too low under the Wishlist / Share row. Take out the inner top padding (24px) and pull the
 * hero up by another 24px, so the illustration (and everything under it) moves up about 48px. */
@media (max-width: 767px) {
	.vpn-fx-inner {
		padding-top: 0;
	}
	.vpn-fx-hero {
		margin-top: -24px;
	}
}

/* "From sweetest to least sweet." now sits under the cards, left-aligned, small and light (only visible in the Sweetness view; it keeps its
 * space in the Cooling view so nothing below it jumps). */
.vpn-fx .vpn-fx-spec-tabs .vpn-fx-spec-sub {
	margin: 12px 0 0;
	text-align: left;
	font-size: 12px;
	line-height: 1.4;
	color: #93a3b1;
}

/* Cards that are NOT selected: the photo banner at the bottom of the picture (with the name baked in) is covered by one plain colour band that
 * shows only the name. The selected card keeps its full picture. */
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-veil {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 8px;
	background: #14284b;
	text-align: center;
	line-height: 1;
}
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-veil-name {
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: #fff;
}
@media (max-width: 767px) {
	.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-veil {
		padding: 0 4px;
	}
	.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-veil-name {
		font-size: 11px;
	}
}

/* The flavour name is already in the picture (or in the colour band on cards that are not selected): hide the text title under the card
 * (kept for screen readers). Before, only four flavours had it hidden by a theme rule. */
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat-name {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Fixed card groups: a separate list for desktop (four cards) and phones (three cards). */
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat:not(.is-current) .vpn-fx-cat-now,
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat:not(.is-current) .vpn-fx-cat-sel,
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat.is-current .vpn-fx-cat-veil,
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat.is-current .vpn-fx-cat-arrow {
	display: none;
}
@media (max-width: 767px) {
	.vpn-fx .vpn-fx-spectrum--tabs.vpn-fx-spectrum--d4 {
		display: none;
	}
}
@media (min-width: 768px) {
	.vpn-fx .vpn-fx-spectrum--tabs.vpn-fx-spectrum--p3 {
		display: none;
	}
}

/* Tabbed cards: the old divider lines of the plain card list (right / bottom hairlines, navy bar on the current card) do not apply. */
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat {
	border: 0;
}
.vpn-fx .vpn-fx-spectrum--tabs .vpn-fx-cat.is-current::before {
	display: none;
}

/* --- FUMOT 12K Description tab (owner design 2026-10-01): light "Flavour details" card with Main note and an Opens / Middle / Finish timeline --- */
.vpn-fx-desc .vpn-fx-ov-item[hidden] {
	display: none !important;
}
.vpn-fx-desc p {
	margin: 0 0 16px;
}
.vpn-fx-desc .vpn-fx-fd {
	margin: 24px 0 26px;
	padding: 20px 18px 18px;
	background: #f6f8fa;
	border: 1px solid #e1e8ee;
	border-radius: 16px;
	color: #1b2b44;
}
.vpn-fx-desc .vpn-fx-fd-eyebrow {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #7b8a99;
}
.vpn-fx-desc .vpn-fx-fd-title {
	margin: 0 0 10px;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fx-navy, #14284b);
}
.vpn-fx-desc .vpn-fx-fd-para {
	margin: 0 0 14px;
	line-height: 1.55;
}
.vpn-fx-desc .vpn-fx-fd-rows,
.vpn-fx-desc .vpn-fx-fd-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}
.vpn-fx-desc .vpn-fx-fd-rows {
	border-top: 1px solid #e1e8ee;
}
.vpn-fx-desc .vpn-fx-fd-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid #e1e8ee;
}
.vpn-fx-desc .vpn-fx-fd-ico {
	flex: 0 0 22px;
	margin-top: 2px;
	color: #1d8c8c;
}
.vpn-fx-desc .vpn-fx-fd-row strong,
.vpn-fx-desc .vpn-fx-fd-steps strong {
	display: block;
	font-weight: 700;
	line-height: 1.35;
	color: var(--fx-navy, #14284b);
}
.vpn-fx-desc .vpn-fx-fd-row span span,
.vpn-fx-desc .vpn-fx-fd-steps span {
	display: block;
	line-height: 1.4;
}
.vpn-fx-desc .vpn-fx-fd-steps {
	position: relative;
	padding: 14px 0 2px 36px;
}
.vpn-fx-desc .vpn-fx-fd-steps::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 26px;
	bottom: 24px;
	width: 2px;
	background: #b9dada;
}
.vpn-fx-desc .vpn-fx-fd-steps li {
	position: relative;
	margin: 0 0 14px;
	padding: 0;
}
.vpn-fx-desc .vpn-fx-fd-steps li::before {
	content: "";
	position: absolute;
	left: -35px;
	top: 3px;
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border: 2.5px solid #1d8c8c;
	border-radius: 50%;
	background: #f6f8fa;
}
.vpn-fx-desc .vpn-fx-fd-note {
	margin: 4px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: #7b8a99;
}
.vpn-fx-desc .vpn-fx-desc-h {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--fx-navy, #14284b);
}
.vpn-fx-desc .vpn-fx-desc-list {
	margin: 0 0 14px;
	padding-left: 22px;
	list-style: disc;
}
.vpn-fx-desc .vpn-fx-desc-list li {
	margin: 0 0 6px;
	line-height: 1.45;
}
.vpn-fx-desc .vpn-fx-desc-warn {
	margin: 0;
	font-size: 14px;
}

/* --- Product tabs (all four module pages): Description is open on the page, FAQ / Reviews are folding items below it (owner design 2026-10-01) --- */
body.vpn-fx-flat-tabs .woocommerce-tabs.wc-tabs-wrapper {
	background: none;
	padding: 0;
}
body.vpn-fx-flat-tabs .woocommerce-tabs .content-ul-tab {
	display: none;
}
body.vpn-fx-flat-tabs .woocommerce-tabs .content-tab {
	background: none;
	border: 0;
	padding: 0;
}
body.vpn-fx-flat-tabs .woocommerce-tabs .container-tab {
	margin-bottom: 0;
	border-bottom: 1px solid #e5e5e5 !important;
}
body.vpn-fx-flat-tabs .woocommerce-tabs .container-tab:last-child {
	border-bottom: 0 !important;
}
/* the titles are shown on every screen size (the theme shows them on phones only) */
body.vpn-fx-flat-tabs .woocommerce-tabs .tab-title {
	display: flex !important;
	cursor: pointer;
	margin: 0;
	padding: 16px 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #1a1a1a;
}
body.vpn-fx-flat-tabs .woocommerce-tabs .tab-title::after {
	content: "" !important;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin: -4px 4px 0 0;
	border-right: 2px solid #1a1a1a;
	border-bottom: 2px solid #1a1a1a;
	font-family: inherit;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
body.vpn-fx-flat-tabs .woocommerce-tabs .tab-title.is-open::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}
/* Description: a plain heading with a thick underline, content always open */
body.vpn-fx-flat-tabs .woocommerce-tabs .tab-title[data-id="tab-description"] {
	display: block !important;
	cursor: default;
	margin: 0 0 18px;
	padding: 6px 0 10px;
	border-bottom: 1px solid #e5e5e5;
	text-align: center;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-decoration-thickness: 4px;
	text-underline-offset: 14px;
	text-decoration-color: #111;
}
body.vpn-fx-flat-tabs .woocommerce-tabs .tab-title[data-id="tab-description"]::after {
	display: none;
}
body.vpn-fx-flat-tabs .woocommerce-tabs #tab-description {
	display: block !important;
	padding: 0 0 20px;
}
body.vpn-fx-flat-tabs .woocommerce-tabs .wc-tab:not(#tab-description) {
	display: none !important;
	padding: 4px 0 18px;
}
body.vpn-fx-flat-tabs .woocommerce-tabs .wc-tab.is-open:not(#tab-description) {
	display: block !important;
}

/* --- 12K Description, merged design: Specifications table, folding How to use / Storage and care --- */
body.vpn-fx-flat-tabs .woocommerce-tabs .tab-title[data-id="tab-description"] {
	text-decoration-color: var(--fx-navy, #14284b);
}
.vpn-fx-desc .vpn-fx-desc-h {
	margin: 4px 0 6px;
	font-size: 22px;
}
.vpn-fx-desc table.vpn-fx-spec-table {
	width: 100%;
	margin: 0 0 18px;
	border-collapse: collapse;
	border: 0;
}
.vpn-fx-desc table.vpn-fx-spec-table th,
.vpn-fx-desc table.vpn-fx-spec-table td {
	padding: 13px 4px;
	border: 0;
	border-top: 1px solid #e5e5e5;
	background: none;
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
	vertical-align: top;
}
.vpn-fx-desc table.vpn-fx-spec-table th {
	width: 34%;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--fx-navy, #14284b);
}
.vpn-fx-desc table.vpn-fx-spec-table td {
	font-weight: 400;
	color: #3a4656;
}
.vpn-fx-desc .vpn-fx-desc-folds {
	margin: 0 0 16px;
}
.vpn-fx-desc .vpn-fx-desc-folds .vpn-fx-faq-item {
	margin: 0;
}
.vpn-fx-desc .vpn-fx-fold-head {
	margin: 4px 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--fx-navy, #14284b);
}
.vpn-fx-desc .vpn-fx-fold-list {
	margin: 0 0 14px;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.55;
	color: #3a4656;
}
.vpn-fx-desc .vpn-fx-fold-list li {
	margin: 0 0 6px;
}

/* --- FUMOT 50K 2-in-1: "Two flavours, one device" (owner design 2026-10-02) --- */
.vpn-fx .vpn-fx-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.vpn-fx-two {
	margin-top: 14px;
	text-align: center;
}
.vpn-fx-two-title {
	margin: 0 0 10px;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 300;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fx-navy);
}
.vpn-fx-two-sub {
	margin: 0 0 14px;
	font-family: var(--fx-serif);
	font-size: 15px;
	color: var(--fx-navy);
}
.vpn-fx-two-hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0 0 18px;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: #7b8a99;
}
.vpn-fx-two-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	max-width: 960px;
	margin: 0 auto;
}
.vpn-fx-two-col {
	padding: 0 8px;
}
.vpn-fx-two-col + .vpn-fx-two-col {
	border-left: 1px solid #d5e0e8;
}
/* name and line keep two lines of room, so both sides line up */
.vpn-fx-two-name {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.7em;
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fx-navy);
}
.vpn-fx-two-line {
	min-height: 2.9em;
	margin: 0 0 14px;
	font-family: var(--fx-serif);
	font-size: 14px;
	line-height: 1.4;
	color: #34445a;
}
.vpn-fx-two-metrics {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 10px;
}
.vpn-fx-two-metrics .vpn-fx-metric-name {
	font-size: 11px;
}
.vpn-fx-two-metrics .vpn-fx-metric-value {
	font-size: 20px;
}
.vpn-fx-two-metrics .vpn-fx-bar {
	height: 6px;
	margin-top: 5px;
}
.vpn-fx-two-metrics .vpn-fx-metric.is-unrated .vpn-fx-metric-value {
	font-size: 13px;
	line-height: 1.6;
}
@media (min-width: 768px) {
	.vpn-fx-two-title {
		font-size: 34px;
	}
	.vpn-fx-two-sub {
		font-size: 18px;
	}
	.vpn-fx-two-hint {
		font-size: 12px;
	}
	.vpn-fx-two-col {
		padding: 0 22px;
	}
	.vpn-fx-two-name {
		min-height: 1.4em;
		font-size: 19px;
	}
	.vpn-fx-two-line {
		min-height: 1.5em;
		font-size: 16px;
	}
	.vpn-fx-two-metrics {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 10px;
	}
	.vpn-fx-two-metrics .vpn-fx-metric-name {
		font-size: 13px;
	}
	.vpn-fx-two-metrics .vpn-fx-metric-value {
		font-size: 26px;
	}
}

/* --- FUMOT 50K 2-in-1 Description: one Flavour details card with the two flavours side by side (stacked on phones) --- */
.vpn-fx-desc .vpn-fx-fd-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}
.vpn-fx-desc .vpn-fx-fd-side + .vpn-fx-fd-side {
	padding-top: 18px;
	border-top: 1px solid #e1e8ee;
}
@media (min-width: 768px) {
	.vpn-fx-desc .vpn-fx-fd-pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 26px;
	}
	.vpn-fx-desc .vpn-fx-fd-side + .vpn-fx-fd-side {
		padding: 0 0 0 26px;
		border-top: 0;
		border-left: 1px solid #e1e8ee;
	}
}

/* --- Polish found with the server-side browser (2026-10-03): the Description tab and the FAQ tab sit OUTSIDE the .vpn-fx section, so the --fx-* colours
 * were undefined there (How to use / Storage and care / FAQ showed no arrows and no lines); the theme's heading and list rules also beat the
 * Specifications heading (14px) and put a grey line left of the card rows. --- */
.vpn-fx-desc,
.vpn-fx-faq {
	--fx-navy: #14284b;
	--fx-muted: #4a6478;
	--fx-line: #d3e4ec;
}
body.single-product .woocommerce-tabs .vpn-fx-desc h3.vpn-fx-desc-h {
	margin: 6px 0 8px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: #14284b;
}
body.single-product .woocommerce-tabs .vpn-fx-desc ul.vpn-fx-fd-rows {
	margin: 0;
	padding-left: 0;
	border-left: 0;
}
body.single-product .woocommerce-tabs .vpn-fx-desc h3.vpn-fx-fd-title {
	font-size: 26px;
	line-height: 1.2;
	font-weight: 700;
}