/*
Theme Name: Vital Jelly
Theme URI: https://vitaljelly.cz
Author: VJ Commerce s.r.o.
Description: Jednoproduktový WooCommerce e-shop pro Vital Jelly — landing page + pokladna na dobírku. Veškerý obsah je editovatelný přes Vzhled → Obsah webu (Secure Custom Fields).
Version: 1.15.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vital-jelly
Tags: e-commerce, one-page, custom-colors
WC requires at least: 8.0
WC tested up to: 9.9
*/

/* =========================================================================
   1. Design tokens
   ========================================================================= */

:root {
	--vj-navy: #0C2A4D;
	--vj-navy-card: #123156;
	--vj-navy-tile: #1B406B;
	--vj-crimson: #B01839;
	--vj-crimson-dark: #8E1235;
	--vj-gold: #C9A227;
	--vj-white: #FFFFFF;
	--vj-blue-tint: #EDF3FA;
	--vj-surround: #DCE6F2;
	--vj-pink-tint: #FCE7EC;
	/* Jen pro odznak „ověřený nákup" — fajfku čte každý jako zelenou. */
	--vj-green: #1B7A4B;
	--vj-green-tint: #E4F3EA;
	/* Zelená recenzních portálů — hvězdičkové čtverečky v hero sekci. */
	--vj-trust: #00B67A;
	--vj-trust-off: #DCDCE6;
	--vj-body: #3D4E62;
	--vj-muted: #6B7C90;
	--vj-hairline: rgba(12, 42, 77, 0.1);
	--vj-hairline-strong: rgba(12, 42, 77, 0.16);

	--vj-font-head: 'Bricolage Grotesque', system-ui, sans-serif;
	--vj-font-body: 'Archivo', system-ui, -apple-system, sans-serif;

	--vj-shadow: 0 18px 40px -22px rgba(12, 42, 77, 0.4);
	--vj-shadow-bar: 0 -14px 40px -22px rgba(12, 42, 77, 0.6);

	--vj-max: 1440px;
	--vj-gutter: 64px;

	/* Výška spodní sticky lišty — dopočítává se v JS pro mobil */
	--vj-stickybar-h: 84px;
}

/* =========================================================================
   2. Reset & základ
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* aby kotvy nekončily pod sticky headerem */
	scroll-padding-top: 88px;
}

body {
	margin: 0;
	background: var(--vj-surround);
	color: var(--vj-navy);
	font-family: var(--vj-font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.vj-no-scroll {
	overflow: hidden;
}

a {
	color: var(--vj-crimson-dark);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--vj-navy);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

button {
	font-family: inherit;
}

h1, h2, h3, h4 {
	font-family: var(--vj-font-head);
	font-weight: 800;
	margin: 0;
}

p {
	margin: 0;
}

/* Stránka je „karta" uprostřed šedomodré plochy — jako v návrhu */
.vj-page {
	width: 100%;
	max-width: var(--vj-max);
	margin: 0 auto;
	background: var(--vj-white);
	overflow: clip;
}

.vj-section {
	padding: 96px var(--vj-gutter);
}

.vj-eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vj-crimson-dark);
}

.vj-eyebrow--gold {
	color: var(--vj-gold);
}

.vj-h2 {
	font-size: 56px;
	line-height: 1;
	letter-spacing: -0.03em;
	margin-top: 16px;
}

.vj-h2--sm {
	font-size: 52px;
	line-height: 1.02;
}

.vj-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
}

.vj-section-head p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--vj-body);
	max-width: 380px;
}

/* Přístupnost: skip link + skrytý text pro čtečky */
.screen-reader-text,
.vj-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.vj-skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--vj-navy);
	color: #fff;
	font-weight: 600;
}

:focus-visible {
	outline: 3px solid var(--vj-crimson);
	outline-offset: 3px;
}

/* =========================================================================
   3. Tlačítka & odznaky
   ========================================================================= */

.vj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vj-btn--crimson {
	background: var(--vj-crimson);
	color: var(--vj-white);
	padding: 18px 32px;
	font-size: 17px;
}

.vj-btn--crimson:hover {
	background: var(--vj-crimson-dark);
	color: var(--vj-white);
}

.vj-btn--navy {
	background: var(--vj-navy);
	color: var(--vj-white);
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 600;
}

.vj-btn--navy:hover {
	background: var(--vj-crimson);
	color: var(--vj-white);
}

.vj-btn--ghost {
	background: transparent;
	color: var(--vj-navy);
	padding: 18px 28px;
	font-size: 17px;
	font-weight: 600;
	border: 1.5px solid rgba(12, 42, 77, 0.2);
}

.vj-btn--ghost:hover {
	border-color: var(--vj-navy);
	color: var(--vj-navy);
}

.vj-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vj-badge--crimson { background: var(--vj-crimson); color: #fff; }
.vj-badge--navy    { background: var(--vj-navy);    color: #fff; }
.vj-badge--pink    { background: var(--vj-pink-tint); color: var(--vj-crimson-dark); }

/* =========================================================================
   4. Header
   ========================================================================= */

.vj-header {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 18px var(--vj-gutter);
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--vj-hairline);
}

.vj-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--vj-navy);
	flex: none;
}

.vj-logo:hover {
	color: var(--vj-navy);
}

.vj-logo__mark {
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: var(--vj-navy);
	display: grid;
	place-items: center;
	font-family: var(--vj-font-head);
	font-weight: 800;
	color: var(--vj-gold);
	font-size: 19px;
	line-height: 1;
	flex: none;
}

.vj-logo__img {
	max-height: 40px;
	width: auto;
}

.vj-logo__text {
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 21px;
	letter-spacing: -0.02em;
}

.vj-nav {
	display: flex;
	align-items: center;
	gap: 34px;
	font-size: 15px;
	font-weight: 500;
	color: var(--vj-body);
}

.vj-nav a {
	color: inherit;
}

.vj-nav a:hover {
	color: var(--vj-crimson-dark);
}

.vj-header__right {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: none;
}

.vj-header__claim {
	font-size: 14px;
	color: var(--vj-muted);
}

/* Hamburger — jen mobil */
.vj-burger {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--vj-hairline-strong);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	padding: 0;
	place-items: center;
}

.vj-burger span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--vj-navy);
	position: relative;
	transition: background-color 0.15s ease;
}

.vj-burger span::before,
.vj-burger span::after {
	content: '';
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: var(--vj-navy);
	transition: transform 0.15s ease;
}

.vj-burger span::before { top: -6px; }
.vj-burger span::after  { top: 6px; }

.vj-burger[aria-expanded="true"] span { background: transparent; }
.vj-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.vj-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* =========================================================================
   5. Hero
   ========================================================================= */

.vj-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 56px;
	align-items: center;
	padding: 84px var(--vj-gutter) 72px;
}

.vj-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vj-hero h1 {
	font-size: 84px;
	line-height: 0.93;
	letter-spacing: -0.035em;
	margin: 22px 0 0;
}

.vj-hero h1 .vj-accent {
	color: var(--vj-crimson);
}

.vj-hero__lead {
	font-size: 20px;
	line-height: 1.5;
	color: var(--vj-body);
	max-width: 500px;
	margin: 24px 0 0;
	text-wrap: pretty;
}

.vj-hero__offer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 24px;
	padding: 14px 20px;
	border-radius: 16px;
	background: var(--vj-pink-tint);
	border: 1px dashed var(--vj-crimson-dark);
}

.vj-hero__offer strong {
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 20px;
	color: var(--vj-crimson-dark);
	letter-spacing: -0.01em;
}

.vj-hero__offer span {
	font-size: 15px;
	color: var(--vj-body);
	font-weight: 400;
}

.vj-hero__cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 34px;
}

.vj-hero__body {
	min-width: 0;
}

.vj-hero__proof {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: 38px;
	font-size: 14px;
	color: var(--vj-muted);
}

.vj-hero__proof strong {
	color: var(--vj-navy);
}

/*
 * Hodnocení ve stylu recenzních portálů: řada čtverečků s hvězdou, která se
 * zleva dolévá zelenou podle průměru, k tomu slovní známka a počet. Celé je
 * to odkaz — kliknutí sveze návštěvníka dolů na recenze. Na počítači je to
 * dvouřádkový widget, na mobilu se z něj stává pruh přes celý displej
 * (viz mobilní blok níž), protože je to nejsilnější důkaz na stránce.
 */
.vj-hero__trust {
	display: grid;
	justify-items: start;
	gap: 7px;
	color: inherit;
}

.vj-hero__trust-top {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vj-hero__trust-stars {
	display: inline-flex;
	gap: 3px;
}

.vj-hero__trust-box {
	position: relative;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 3px;
	overflow: hidden;
	background: var(--vj-trust-off);
	color: var(--vj-white);
}

/* Zelená se lije zleva — u 4,7 zbyde poslední čtvereček ze 70 % plný. */
.vj-hero__trust-fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--vj-trust);
}

/* Hvězda leží nad výplní, proto potřebuje vlastní vrstvu. */
.vj-hero__trust-box svg {
	position: relative;
	display: block;
	width: 76%;
	height: 76%;
}

.vj-hero__trust-word {
	font-family: var(--vj-font-head);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--vj-navy);
}

.vj-hero__trust-meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 5px;
}

.vj-hero__trust-score {
	font-weight: 800;
}

.vj-hero__trust-count::before {
	content: "· ";
}

.vj-hero__trust:hover .vj-hero__trust-count {
	color: var(--vj-crimson-dark);
}

/* Šipka dává smysl až v mobilním pruhu, kde je celá plocha na dotyk. */
.vj-hero__trust-go {
	display: none;
}

.vj-hero__media {
	position: relative;
}

.vj-hero__glow {
	position: absolute;
	inset: -8% -4% -4% 6%;
	border-radius: 999px;
	background: radial-gradient(circle at 50% 45%, #D6E4F5 0%, rgba(255, 217, 184, 0) 68%);
	pointer-events: none;
}

.vj-hero__shot {
	position: relative;
	height: 560px;
	border-radius: 28px;
	overflow: hidden;
	background: var(--vj-blue-tint);
}

.vj-hero__shot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * Sleva nalepená na fotku. Na počítači se nevykresluje — tam je stejný text
 * v řádku odznaků vedle nadpisu. Na mobilu jde fotka nahoru a odznaky pod ni,
 * takže sleva skončila pod obrázkem; sem patří víc.
 */
.vj-hero__sticker {
	display: none;
}

/*
 * Nálepka se složením v pravém horním rohu fotky. Na rozdíl od slevy se
 * vykresluje i na počítači — údaj o dávce nikde jinde v hero sekci není.
 */
.vj-hero__dose {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--vj-hairline-strong);
	color: var(--vj-navy);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 8px 22px -10px rgba(12, 42, 77, 0.5);
}

.vj-hero__dose::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vj-gold);
}

.vj-hero__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 12px;
}

.vj-hero__thumb {
	height: 96px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--vj-white);
	border: 1px solid var(--vj-hairline);
	padding: 0;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.vj-hero__thumb:hover,
.vj-hero__thumb.is-active {
	border-color: var(--vj-navy);
}

/* Ořez přes střed uřízl krabičce vršek i patu — u produktových fotek chceme
   vidět celý obal, i za cenu bílého okraje. */
.vj-hero__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vj-hero__video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: var(--vj-blue-tint);
}

.vj-hero__video[hidden] {
	display: none;
}

/* Video vyplní slot celé — na rozdíl od produktové fotky nemá průhledné okraje. */
.vj-hero__shot.is-video .vj-hero__video {
	object-fit: cover;
}

.vj-hero__thumb {
	position: relative;
}

.vj-hero__thumb-play {
	position: absolute;
	right: 6px;
	bottom: 6px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--vj-navy);
	color: var(--vj-white);
	box-shadow: 0 2px 8px rgba(12, 42, 77, 0.35);
	pointer-events: none;
}

.vj-hero__tag {
	position: absolute;
	bottom: 134px;
	left: -28px;
	background: var(--vj-white);
	border: 1px solid var(--vj-hairline);
	border-radius: 18px;
	padding: 16px 20px;
	box-shadow: var(--vj-shadow);
}

.vj-hero__tag strong {
	display: block;
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 26px;
	line-height: 1;
}

.vj-hero__tag span {
	display: block;
	font-size: 13px;
	color: var(--vj-muted);
	margin-top: 2px;
}

/* =========================================================================
   6. Trust bar
   ========================================================================= */

.vj-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(12, 42, 77, 0.12);
	border-top: 1px solid rgba(12, 42, 77, 0.12);
	border-bottom: 1px solid rgba(12, 42, 77, 0.12);
}

.vj-trust__item {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--vj-white);
	padding: 22px 30px;
}

/*
 * Ikona v jemném zlatém čtverečku — stejný jazyk jako odkaz na PDF
 * v sekci bezpečnosti, aby si drobné ikony po webu odpovídaly.
 */
.vj-trust__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	border: 1px solid rgba(201, 162, 39, 0.3);
	background: rgba(201, 162, 39, 0.1);
	color: var(--vj-gold);
}

.vj-trust__icon svg {
	display: block;
	width: 23px;
	height: 23px;
}

.vj-trust__body { display: block; }

.vj-trust__item strong {
	display: block;
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 22px;
	line-height: 1.15;
}

.vj-trust__note {
	display: block;
	font-size: 14px;
	color: var(--vj-muted);
	margin-top: 4px;
}

/* =========================================================================
   7. Pro koho to je
   ========================================================================= */

.vj-audience {
	background: var(--vj-blue-tint);
	padding: 88px var(--vj-gutter);
}

.vj-audience__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 64px;
	align-items: start;
}

.vj-audience__intro p {
	font-size: 18px;
	line-height: 1.6;
	color: var(--vj-body);
	margin-top: 20px;
}

.vj-audience__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.vj-card {
	background: var(--vj-white);
	border: 1px solid var(--vj-hairline);
	border-radius: 18px;
	padding: 26px;
}

.vj-card strong {
	display: block;
	font-size: 18px;
	font-weight: 700;
}

.vj-card p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--vj-muted);
	margin-top: 8px;
}

/* =========================================================================
   8. Složení (tmavá sekce)
   ========================================================================= */

.vj-dark {
	background: var(--vj-navy);
	color: var(--vj-white);
}

.vj-dark .vj-section-head p {
	color: rgba(255, 255, 255, 0.66);
}

.vj-ingredients__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 52px;
}

.vj-ingredient {
	background: var(--vj-navy-card);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 22px;
	padding: 28px;
	transition: border-color 0.15s ease;
}

.vj-ingredient:hover {
	border-color: var(--vj-crimson);
}

.vj-ingredient__icon {
	height: 128px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--vj-navy-tile);
	display: grid;
	place-items: center;
	padding: 14px;
}

.vj-ingredient__icon img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

.vj-ingredient__name {
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 24px;
	margin-top: 20px;
}

.vj-ingredient__value {
	font-size: 14px;
	font-weight: 600;
	color: var(--vj-gold);
	margin-top: 6px;
}

.vj-ingredient p {
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.62);
	margin-top: 12px;
}

.vj-fineprint {
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.42);
	margin-top: 32px;
	max-width: 820px;
}

/* =========================================================================
   9. Jak to funguje
   ========================================================================= */

.vj-how__lead {
	font-size: 19px;
	line-height: 1.55;
	color: var(--vj-body);
	max-width: 720px;
	margin-top: 18px;
}

.vj-how__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 52px;
}

.vj-step {
	border-top: 2px solid var(--vj-navy);
	padding-top: 24px;
}

.vj-step__num {
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 15px;
	color: var(--vj-crimson-dark);
	letter-spacing: 0.1em;
}

.vj-step__title {
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 30px;
	letter-spacing: -0.02em;
	margin-top: 10px;
}

.vj-step p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--vj-body);
	margin-top: 10px;
}

.vj-how__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-top: 64px;
	align-items: stretch;
}

.vj-how__photo {
	border-radius: 26px;
	overflow: hidden;
	background: var(--vj-blue-tint);
	min-height: 340px;
}

.vj-how__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vj-quote {
	background: var(--vj-pink-tint);
	border-radius: 26px;
	padding: 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.vj-quote__text {
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 40px;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.vj-quote__author {
	font-size: 15px;
	color: var(--vj-muted);
	margin-top: 20px;
}

/* =========================================================================
   10. Ceník
   ========================================================================= */

.vj-pricing {
	background: var(--vj-blue-tint);
}

.vj-pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}

.vj-pricing__hint {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 40px;
	font-size: 15px;
	font-weight: 600;
	color: var(--vj-crimson-dark);
}

.vj-pricing__hint::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 2px solid var(--vj-crimson);
	box-shadow: inset 0 0 0 3px var(--vj-white);
	background: var(--vj-crimson);
}

.vj-pricing__hint + .vj-pricing__grid {
	margin-top: 16px;
}

.vj-pack {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: left;
	padding: 32px 68px 32px 32px;
	border-radius: 24px;
	cursor: pointer;
	font-family: inherit;
	background: var(--vj-white);
	color: var(--vj-navy);
	border: 2px solid rgba(12, 42, 77, 0.14);
	transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.vj-pack:hover {
	border-color: var(--vj-navy);
}

.vj-pack.is-selected {
	background: var(--vj-navy);
	color: var(--vj-white);
	border-color: var(--vj-navy);
	transform: translateY(-4px);
}

/*
 * Kolečko jako u přepínače. Karty samy o sobě vypadají jako tři nabídky
 * vedle sebe, ne jako volba jedné ze tří — tohle to říká na první pohled.
 */
.vj-pack::after {
	content: "";
	position: absolute;
	top: 32px;
	right: 30px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid rgba(12, 42, 77, 0.22);
	background: var(--vj-white);
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.vj-pack:hover::after {
	border-color: var(--vj-navy);
}

.vj-pack.is-selected::after {
	border-color: var(--vj-gold);
	background: var(--vj-gold);
	box-shadow: inset 0 0 0 4px var(--vj-navy);
}

.vj-pack__popular {
	position: absolute;
	top: -14px;
	left: 32px;
	background: var(--vj-crimson);
	color: var(--vj-white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
}

.vj-pack__title {
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 34px;
	letter-spacing: -0.03em;
}

.vj-pack__sub {
	font-size: 15px;
	color: var(--vj-muted);
}

.vj-pack.is-selected .vj-pack__sub {
	color: rgba(255, 255, 255, 0.6);
}

.vj-pack__row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}

.vj-pack__old {
	font-size: 20px;
	font-weight: 600;
	text-decoration: line-through;
	color: #96A3B3;
}

.vj-pack.is-selected .vj-pack__old {
	color: rgba(255, 255, 255, 0.5);
}

.vj-pack__off {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding: 5px 10px;
	border-radius: 8px;
	background: var(--vj-crimson);
	color: var(--vj-white);
}

.vj-pack__price {
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 46px;
	letter-spacing: -0.03em;
	margin-top: 6px;
}

.vj-pack__unit {
	font-size: 14px;
	font-weight: 600;
	color: var(--vj-crimson-dark);
}

.vj-pack.is-selected .vj-pack__unit {
	color: var(--vj-gold);
}

.vj-pack__save {
	font-size: 14px;
	font-weight: 700;
	margin-top: 14px;
	padding: 8px 14px;
	border-radius: 999px;
	align-self: flex-start;
	background: var(--vj-pink-tint);
	color: var(--vj-crimson-dark);
}

.vj-pack.is-selected .vj-pack__save {
	background: var(--vj-gold);
	color: var(--vj-navy);
}

/* Zástupný dlaždice, dokud není nahraná fotka */
.vj-img-placeholder {
	width: 100%;
	height: 100%;
	min-height: 120px;
	display: grid;
	place-items: center;
	background: var(--vj-blue-tint);
	border-radius: 18px;
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 22px;
	color: var(--vj-muted);
	text-align: center;
	padding: 16px;
}

.vj-pricing__empty {
	margin-top: 32px;
	padding: 28px 32px;
	border-radius: 20px;
	background: var(--vj-blue-tint);
	color: var(--vj-body);
	font-size: 16px;
}

.vj-pricing__terms {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 32px;
	font-size: 14px;
	color: var(--vj-muted);
}

.vj-pricing__cta {
	margin-top: 32px;
}

.vj-pack.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* =========================================================================
   11. Recenze
   ========================================================================= */

/* --- Hvězdičky ve čtverečcích (souhrn i jednotlivé karty) --- */

.vj-rating {
	display: inline-flex;
	gap: 3px;
	vertical-align: middle;
}

.vj-rating__box {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background: rgba(12, 42, 77, 0.14);
	color: var(--vj-white);
}

.vj-rating__box.is-on {
	background: var(--vj-crimson);
}

.vj-rating__box svg {
	display: block;
	width: 74%;
	height: 74%;
}

.vj-rating--sm { gap: 2px; }
.vj-rating--sm .vj-rating__box { width: 17px; height: 17px; border-radius: 3px; }

.vj-rating--lg { gap: 5px; }
.vj-rating--lg .vj-rating__box { width: 30px; height: 30px; border-radius: 6px; }

/* --- Hlavička sekce --- */

.vj-reviews__note {
	font-size: 14px;
	line-height: 1.55;
	color: var(--vj-muted);
	text-align: right;
	max-width: 280px;
}

/* --- Souhrnný panel --- */

.vj-reviews__summary {
	display: grid;
	grid-template-columns: 210px 1fr;
	align-items: center;
	gap: 44px;
	margin-top: 40px;
	padding: 30px 36px;
	background: var(--vj-white);
	border: 1px solid var(--vj-hairline);
	border-radius: 22px;
}

.vj-reviews__score {
	text-align: center;
	border-right: 1px solid var(--vj-hairline);
	padding-right: 44px;
	margin-right: -44px;
}

.vj-reviews__number {
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 52px;
	line-height: 1;
	color: var(--vj-navy);
	margin-bottom: 12px;
}

.vj-reviews__total {
	font-size: 14px;
	color: var(--vj-muted);
	margin-top: 12px;
}

.vj-reviews__spread {
	display: grid;
	gap: 9px;
}

.vj-reviews__row {
	display: grid;
	grid-template-columns: 30px 1fr 48px;
	align-items: center;
	gap: 14px;
}

.vj-reviews__label {
	font-size: 13px;
	color: var(--vj-muted);
	white-space: nowrap;
}

.vj-reviews__bar {
	height: 8px;
	border-radius: 999px;
	background: var(--vj-blue-tint);
	overflow: hidden;
}

.vj-reviews__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--vj-crimson);
}

.vj-reviews__percent {
	font-size: 13px;
	color: var(--vj-muted);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* --- Ovládání posuvníku --- */

.vj-reviews__slider {
	margin-top: 30px;
}

.vj-reviews__nav {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

/*
 * Ovládání odkrývá až JavaScript. Bez tohohle pravidla by ho display: flex
 * výš zobrazil natvrdo i s atributem hidden.
 */
.vj-reviews__nav[hidden] {
	display: none;
}

.vj-reviews__arrow {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	border: 1px solid var(--vj-hairline-strong);
	background: var(--vj-white);
	color: var(--vj-navy);
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.vj-reviews__arrow:hover:not(:disabled) {
	background: var(--vj-blue-tint);
}

.vj-reviews__arrow:disabled {
	opacity: 0.32;
	cursor: default;
}

.vj-reviews__dots {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
}

.vj-reviews__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--vj-hairline-strong);
	cursor: pointer;
	transition: width 0.2s ease, background 0.2s ease;
}

.vj-reviews__dot.is-on {
	width: 26px;
	background: var(--vj-crimson);
}

/* --- Pás karet --- */

/*
 * Šířka karty je pevná ze stejného důvodu jako u videí: kdyby se odvozovala
 * od volného místa, tři recenze by se roztáhly přes celou šířku a osm by se
 * naopak zmáčklo. Takhle vypadá karta pořád stejně a přebytek jede do strany.
 */
.vj-reviews__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 340px;
	justify-content: start;
	gap: 24px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding-bottom: 10px;
	scrollbar-width: thin;
}

.vj-reviews__track:focus-visible {
	outline: 2px solid var(--vj-crimson);
	outline-offset: 4px;
	border-radius: 4px;
}

.vj-review {
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	background: var(--vj-white);
	border: 1px solid var(--vj-hairline);
	border-radius: 20px;
	overflow: hidden;
}

/*
 * Fotku posílá zákazník z telefonu — přijde na výšku, na šířku i do čtverce.
 * Proto se nikdy neořezává: vejde se do pásu celá (object-fit: contain) a
 * volné místo po stranách vyplní její vlastní rozostřená kopie. Pás má pevný
 * poměr, aby karty vedle sebe zůstaly stejně vysoké.
 *
 * flex: none + min-height: 0 ten poměr udrží i tehdy, když se obrázek vůbec
 * nenačte. Karta je sloupcový flex a ten by jinak nechal zástupnou ikonu
 * rozbitého obrázku pás roztáhnout — jedna karta pak byla vyšší než ostatní.
 */
.vj-review__photo {
	position: relative;
	flex: none;
	min-height: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--vj-blue-tint);
	border-bottom: 1px solid var(--vj-hairline);
}

.vj-review__blur {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Zvětšení schová měkké kraje, které rozostření vytáhne přes hranu. */
	transform: scale(1.2);
	filter: blur(18px);
	opacity: 0.5;
}

.vj-review__img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vj-review__flag {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px 5px 8px;
	border-radius: 999px;
	background: rgba(12, 42, 77, 0.72);
	color: rgba(255, 255, 255, 0.94);
	font-size: 12px;
	font-weight: 600;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.vj-review__flag svg {
	flex: none;
	opacity: 0.85;
}

.vj-review__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 24px 20px;
}

.vj-review__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.vj-review__check {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--vj-green-tint);
	color: var(--vj-green);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.vj-review__title {
	font-family: var(--vj-font-head);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--vj-navy);
	margin-top: 15px;
}

.vj-review__text {
	font-size: 15px;
	line-height: 1.62;
	color: var(--vj-body);
	margin-top: 10px;
}

/* margin-top: auto drží patičky karet v jedné řadě, i když jsou texty různě dlouhé. */
.vj-review__author {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: auto;
	padding-top: 20px;
}

.vj-review__mono {
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--vj-blue-tint);
	border: 1px solid rgba(12, 42, 77, 0.12);
	flex: none;
	display: grid;
	place-items: center;
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 16px;
	color: var(--vj-navy);
}

.vj-review__who {
	display: grid;
	min-width: 0;
}

.vj-review__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--vj-navy);
}

.vj-review__meta {
	font-size: 12px;
	color: var(--vj-muted);
}

.vj-review__date {
	margin-left: auto;
	align-self: flex-start;
	padding-top: 2px;
	font-size: 12px;
	color: var(--vj-muted);
	white-space: nowrap;
}

.vj-reviews__disclaimer {
	font-size: 13px;
	color: var(--vj-muted);
	margin-top: 26px;
}

/* =========================================================================
   12. Bezpečnost
   ========================================================================= */

.vj-safety__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 64px;
}

.vj-safety__intro p {
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.66);
	margin-top: 20px;
}

.vj-safety__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	color: var(--vj-gold);
	font-size: 16px;
	font-weight: 600;
}

.vj-safety__link:hover {
	color: var(--vj-white);
}

/* Ikona listu papíru — návštěvník hned vidí, že za odkazem je dokument. */
.vj-safety__link-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	border: 1px solid rgba(201, 162, 39, 0.4);
	background: rgba(201, 162, 39, 0.12);
}

.vj-safety__link:hover .vj-safety__link-icon {
	border-color: rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.14);
}

.vj-safety__link-text {
	text-decoration: underline;
	text-decoration-color: rgba(201, 162, 39, 0.4);
	text-underline-offset: 4px;
}

.vj-safety__link:hover .vj-safety__link-text {
	text-decoration-color: rgba(255, 255, 255, 0.6);
}

.vj-safety__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.vj-safety__card {
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 18px;
	padding: 24px;
}

.vj-safety__card strong {
	display: block;
	font-size: 17px;
	font-weight: 700;
}

.vj-safety__card p {
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 8px;
}

/* =========================================================================
   13. FAQ
   ========================================================================= */

.vj-faq__grid {
	display: grid;
	grid-template-columns: 0.55fr 1fr;
	gap: 64px;
	align-items: start;
}

.vj-faq__intro p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--vj-body);
	margin-top: 20px;
}

.vj-faq__list {
	display: flex;
	flex-direction: column;
}

.vj-faq__item {
	border-bottom: 1px solid var(--vj-hairline-strong);
}

/* Otázka je kvůli osnově stránky v <h3>, vizuálně ale nese styl tlačítko. */
.vj-faq__item h3 {
	margin: 0;
	font: inherit;
	letter-spacing: normal;
}

.vj-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 24px 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	color: var(--vj-navy);
	transition: color 0.15s ease;
}

.vj-faq__q:hover {
	color: var(--vj-crimson-dark);
}

.vj-faq__q span:first-child {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.vj-faq__sign {
	font-family: var(--vj-font-head);
	font-size: 26px;
	line-height: 1;
	color: var(--vj-crimson-dark);
	flex: none;
}

.vj-faq__a {
	font-size: 17px;
	line-height: 1.65;
	color: var(--vj-body);
	margin: 0;
	padding: 0 80px 26px 0;
	max-width: 680px;
}

.vj-faq__a[hidden] {
	display: none;
}

/* =========================================================================
   14. Patička
   ========================================================================= */

.vj-footer {
	padding: 72px var(--vj-gutter) calc(var(--vj-stickybar-h) + 66px);
	background: var(--vj-navy);
	color: rgba(255, 255, 255, 0.66);
}

.vj-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}

.vj-footer__about p {
	font-size: 14px;
	line-height: 1.6;
	margin-top: 18px;
	max-width: 300px;
}

.vj-footer .vj-logo__mark {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: var(--vj-white);
	color: var(--vj-navy);
	font-size: 17px;
}

.vj-footer .vj-logo__text {
	font-size: 19px;
	color: var(--vj-white);
}

.vj-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

.vj-footer__col strong {
	color: var(--vj-white);
	font-weight: 600;
	margin-bottom: 4px;
}

.vj-footer__col a {
	color: inherit;
}

.vj-footer__col a:hover {
	color: var(--vj-white);
}

.vj-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	margin-top: 44px;
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	gap: 40px;
	font-size: 13px;
	line-height: 1.6;
}

.vj-footer__legal span:first-child {
	max-width: 820px;
}

/* =========================================================================
   15. Sticky spodní lišta
   ========================================================================= */

.vj-stickybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding: 16px var(--vj-gutter);
	background: var(--vj-navy);
	color: var(--vj-white);
	border-top: 2px solid var(--vj-gold);
	box-shadow: var(--vj-shadow-bar);
}

.vj-stickybar__title {
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.02em;
}

.vj-stickybar__note {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.7);
}

.vj-stickybar .vj-btn {
	padding: 14px 28px;
	font-size: 16px;
	flex: none;
}

/* =========================================================================
   16. Pokladna a textové stránky
   ========================================================================= */

.vj-slim-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 18px var(--vj-gutter);
	border-bottom: 1px solid var(--vj-hairline);
}

.vj-slim-header__assurances {
	display: flex;
	align-items: center;
	gap: 26px;
	font-size: 14px;
	color: var(--vj-muted);
}

.vj-slim-footer {
	padding: 32px var(--vj-gutter) 48px;
	border-top: 1px solid var(--vj-hairline);
	font-size: 13px;
	line-height: 1.6;
	color: var(--vj-muted);
	display: flex;
	justify-content: space-between;
	gap: 40px;
}

.vj-slim-footer span:first-child {
	max-width: 860px;
}

/* --- Obálka stránky --- */

.vj-page-main {
	padding: 48px var(--vj-gutter) 96px;
}

.vj-back {
	font-size: 15px;
	font-weight: 600;
}

.vj-page-title {
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 52px;
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 16px 0 8px;
}

.vj-page-sub {
	font-size: 16px;
	color: var(--vj-muted);
	margin: 0 0 36px;
}

.vj-page-content {
	margin-top: 24px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--vj-body);
}

.vj-page-main--checkout .vj-page-content {
	margin-top: 0;
}

.vj-page-content > * + * {
	margin-top: 20px;
}

.vj-page-content h2,
.vj-page-content h3 {
	font-family: var(--vj-font-head);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--vj-navy);
	margin-top: 40px;
}

.vj-page-content h2 { font-size: 30px; }
.vj-page-content h3 { font-size: 22px; }

.vj-page-content ul,
.vj-page-content ol {
	padding-left: 22px;
}

.vj-page-content li + li {
	margin-top: 8px;
}

/*
 * Právní stránky jsou dlouhý souvislý text. Na širokém monitoru by řádek
 * přes celou šířku okna nešel číst, proto ho tady krotíme. Pokladny se to
 * netýká — ta má vlastní dvousloupcový layout.
 */
.vj-page-main:not(.vj-page-main--checkout) .vj-page-content {
	max-width: 47em;
}

.vj-page-content a {
	color: var(--vj-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vj-page-content a:hover {
	color: var(--vj-crimson);
}

.vj-page-content h3 { margin-top: 32px; }

.vj-doc-date {
	font-size: 14px;
	color: var(--vj-muted);
}

.vj-page-content hr.wp-block-separator {
	margin-top: 44px;
	border: 0;
	border-top: 1px solid var(--vj-hairline-strong);
}

/* Vzorový formulář pro odstoupení — má se dát označit a zkopírovat. */
.vj-page-content pre.wp-block-preformatted {
	padding: 20px 22px;
	background: var(--vj-blue-tint);
	border-radius: 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13.5px;
	line-height: 1.65;
	white-space: pre-wrap;
	overflow-x: auto;
}

.vj-page-links,
.vj-page-content .pagination {
	margin-top: 32px;
	font-weight: 600;
}

.vj-entry + .vj-entry {
	margin-top: 40px;
	padding-top: 40px;
	border-top: 1px solid var(--vj-hairline);
}

/* --- Rozvržení pokladny --- */

.vj-checkout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 32px;
	align-items: start;
}

.vj-checkout__main {
	background: var(--vj-white);
	border: 1px solid rgba(12, 42, 77, 0.12);
	border-radius: 26px;
	padding: 40px;
	min-width: 0;
}

.vj-checkout__side {
	position: sticky;
	top: 32px;
	min-width: 0;
}

.woocommerce-checkout #order_review {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Kdyby se někdy použila původní šablona Woo s col2-set — potlačíme floaty. */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

.woocommerce-checkout .vj-checkout__main h3 {
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 26px;
	letter-spacing: -0.02em;
	margin: 0 0 26px;
}

.woocommerce-checkout h3#ship-to-different-address {
	margin: 26px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--vj-hairline);
	font-family: var(--vj-font-body);
	font-size: 16px;
	font-weight: 600;
}

.woocommerce-checkout h3#ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-weight: 600;
	margin: 0;
}

.woocommerce-checkout h3#ship-to-different-address input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--vj-crimson);
}

.woocommerce-checkout .shipping_address {
	margin-top: 22px;
	padding: 24px;
	border-radius: 18px;
	background: var(--vj-blue-tint);
}

.woocommerce-checkout .woocommerce-additional-fields {
	margin-top: 26px;
}

.woocommerce-checkout .woocommerce-additional-fields h3 {
	font-family: var(--vj-font-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	color: var(--vj-body);
	margin-bottom: 8px !important;
}

/* --- Pole --- */

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.woocommerce-checkout p.form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	width: 100%;
	float: none;
	min-width: 0;
}

.woocommerce-checkout p.form-row-wide,
.woocommerce-checkout p.form-row.notes,
.woocommerce-checkout p#billing_address_1_field,
.woocommerce-checkout p#shipping_address_1_field {
	grid-column: span 2;
}

.woocommerce-checkout .form-row label {
	font-size: 14px;
	font-weight: 600;
	color: var(--vj-body);
}

.woocommerce-checkout .required {
	color: var(--vj-crimson);
	text-decoration: none;
	border: none;
}

.woocommerce-checkout .optional {
	color: var(--vj-muted);
	font-weight: 400;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
	padding: 15px 18px;
	border-radius: 14px;
	border: 1.5px solid var(--vj-hairline-strong);
	background: var(--vj-white);
	font-size: 16px;
	font-family: inherit;
	color: var(--vj-navy);
	width: 100%;
	height: auto;
	transition: border-color 0.15s ease;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
	border-color: var(--vj-navy);
	outline: none;
}

.woocommerce-checkout .form-row textarea {
	resize: vertical;
	min-height: 96px;
}

.woocommerce-checkout .woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce-invalid select {
	border-color: var(--vj-crimson);
}

/* address_2 sedí pod address_1 a nemá vlastní popisek */
.woocommerce-checkout #billing_address_2_field,
.woocommerce-checkout #shipping_address_2_field {
	grid-column: span 2;
	margin-top: -12px;
}

.woocommerce-checkout #billing_address_2_field label,
.woocommerce-checkout #shipping_address_2_field label {
	display: none;
}

/* --- select2 (výběr země) ---
   CSS WooCommerce je odpojené, takže si rozbalovátko stylujeme sami.
   Rozsah je záměrně minimální — v nabídce jsou jen dvě země. */

.select2-container {
	width: 100% !important;
}

.select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.4;
	padding: 0;
	color: var(--vj-navy);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	position: absolute;
	top: 0;
	right: 14px;
	height: 100%;
	width: 20px;
	display: grid;
	place-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border: solid var(--vj-muted);
	border-width: 0 2px 2px 0;
	padding: 3px;
	transform: rotate(45deg);
	margin-top: -3px;
	display: block;
}

.select2-container--open .select2-selection--single .select2-selection__arrow b {
	transform: rotate(-135deg);
	margin-top: 3px;
}

.select2-dropdown {
	background: var(--vj-white);
	border: 1.5px solid var(--vj-hairline-strong);
	border-radius: 14px;
	box-shadow: var(--vj-shadow);
	overflow: hidden;
	z-index: 60;
}

.select2-search--dropdown {
	display: block;
	padding: 10px;
}

.select2-search--dropdown .select2-search__field {
	width: 100%;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1.5px solid var(--vj-hairline-strong);
	font-family: inherit;
	font-size: 15px;
	color: var(--vj-navy);
}

.select2-search--dropdown.select2-search--hide {
	display: none;
}

.select2-results__options {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 260px;
	overflow-y: auto;
}

.select2-results__option {
	padding: 12px 18px;
	font-size: 16px;
	color: var(--vj-navy);
	cursor: pointer;
}

.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"] {
	background: var(--vj-blue-tint);
}

.select2-container--open .select2-selection--single {
	border-color: var(--vj-navy);
}

.select2-hidden-accessible {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Souhrn objednávky (tmavá karta) --- */

.vj-order-card {
	background: var(--vj-navy);
	color: var(--vj-white);
	border-radius: 26px;
	padding: 36px;
}

.vj-order-card__title {
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 24px;
	letter-spacing: -0.02em;
}

.vj-order-card__items:empty {
	display: none;
}

.vj-order-card__item {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.vj-order-card__thumb {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--vj-navy-tile);
	border: 1px solid rgba(255, 255, 255, 0.14);
	flex: none;
	display: grid;
	place-items: center;
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 20px;
	color: var(--vj-gold);
	overflow: hidden;
}

.vj-order-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vj-order-card__info {
	flex: 1;
	min-width: 0;
}

.vj-order-card__name {
	font-size: 17px;
	font-weight: 700;
}

.vj-order-card__meta {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 2px;
}

.vj-order-card__meta p {
	margin: 0;
	font-size: 14px;
}

.vj-order-card__change {
	font-size: 14px;
	font-weight: 600;
	color: var(--vj-gold);
	flex: none;
}

.vj-order-card__change:hover {
	color: var(--vj-white);
}

.vj-order-card__rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 0;
	font-size: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.vj-order-card__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.vj-order-card__row > span:first-child {
	color: rgba(255, 255, 255, 0.66);
}

.vj-order-card__row--note {
	font-size: 14px;
	line-height: 1.55;
	color: var(--vj-gold);
}

.vj-order-card__row--note > span:first-child {
	color: inherit;
}

.vj-order-card__free {
	color: var(--vj-gold);
}

.vj-order-card__shipping {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vj-order-card__shipping-label {
	color: rgba(255, 255, 255, 0.66);
}

.vj-order-card__shipping-option {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.vj-order-card__shipping-option input {
	accent-color: var(--vj-gold);
	width: 18px;
	height: 18px;
	flex: none;
}

.vj-order-card__shipping-option span:first-of-type {
	flex: 1;
}

.vj-order-card__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding-top: 20px;
}

.vj-order-card__total > span:first-child {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.66);
}

.vj-order-card__amount {
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 38px;
	letter-spacing: -0.03em;
}

.vj-order-card__amount .amount,
.vj-order-card__amount bdi {
	font-family: inherit;
	font-weight: inherit;
}

.vj-order-card__tax {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
	margin-top: 4px;
}

/* --- Doručení (dopravce) --- */

.vj-order-card__delivery {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/*
 * Logo dopravce si nese vlastní pozadí, proto ho neobarvujeme — jen zaoblíme
 * a obtáhneme vlasovou linkou, ať se neslije s tmavou kartou.
 */
.vj-order-card__carrier {
	width: 78px;
	height: auto;
	flex: none;
	display: block;
	border-radius: 10px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.vj-order-card__delivery-body {
	min-width: 0;
}

.vj-order-card__delivery-title {
	font-size: 16px;
	font-weight: 700;
}

.vj-order-card__delivery-time {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin-top: 4px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--vj-gold);
}

/* Na úzkém displeji se lhůta zalomí — hodinky musí zůstat u prvního řádku. */
.vj-order-card__delivery-time svg {
	flex: none;
	margin-top: 3px;
}

.vj-order-card__delivery-note {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.6);
}

/* --- Platba --- */

.woocommerce-checkout #payment {
	background: var(--vj-white);
	border: 1px solid rgba(12, 42, 77, 0.12);
	border-radius: 26px;
	padding: 32px;
}

.woocommerce-checkout #payment::before {
	content: 'Způsob platby';
	display: block;
	font-family: var(--vj-font-head);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.02em;
	margin-bottom: 18px;
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 12px;
	padding: 18px 20px;
	border-radius: 16px;
	background: var(--vj-pink-tint);
	border: 2px solid var(--vj-crimson);
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li + li {
	margin-top: 12px;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--vj-crimson);
	flex: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	margin: 0;
	flex: 1;
}

.woocommerce-checkout #payment .payment_box {
	flex-basis: 100%;
	background: transparent;
	padding: 0;
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--vj-body);
}

.woocommerce-checkout #payment .payment_box::before {
	display: none;
}

.woocommerce-checkout #payment .payment_box p {
	margin: 0;
	font-size: 14px;
}

/* --- Souhlasy --- */

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout .vj-age-consent {
	margin-top: 22px;
}

.woocommerce-checkout .vj-age-consent label,
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--vj-body);
	font-weight: 400;
	cursor: pointer;
}

.woocommerce-checkout .vj-age-consent input[type="checkbox"],
.woocommerce-checkout .woocommerce-form__input-checkbox {
	margin: 3px 0 0;
	width: 18px;
	height: 18px;
	accent-color: var(--vj-crimson);
	flex: none;
}

.woocommerce-checkout #place_order {
	width: 100%;
	margin-top: 22px;
	padding: 20px;
	border: none;
	border-radius: 999px;
	background: var(--vj-crimson);
	color: var(--vj-white);
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
	float: none;
}

.woocommerce-checkout #place_order:hover {
	background: var(--vj-crimson-dark);
}

.woocommerce-checkout .woocommerce-privacy-policy-text {
	font-size: 13px;
	color: var(--vj-muted);
	margin-top: 14px;
	line-height: 1.55;
}

.woocommerce-checkout .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: 13px;
}

/* Překryv při přepočtu objednávky */
.blockUI.blockOverlay {
	border-radius: 26px;
}

/* --- Hlášky WooCommerce --- */

.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-NoticeGroup {
	list-style: none;
	margin: 0 0 24px;
	padding: 18px 24px;
	border-radius: 18px;
	background: var(--vj-pink-tint);
	border: 1px solid var(--vj-crimson);
	color: var(--vj-crimson-dark);
	font-size: 15px;
}

.woocommerce-message,
.woocommerce-info {
	background: var(--vj-blue-tint);
	border-color: var(--vj-hairline-strong);
	color: var(--vj-navy);
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
	margin: 0;
}

.woocommerce-NoticeGroup {
	padding: 0;
	border: none;
	background: transparent;
}

/* --- Děkovací stránka a přehled objednávky --- */

.vj-page-content .woocommerce-order,
.vj-page-content .woocommerce {
	font-size: 16px;
}

.vj-page-content table.shop_table,
.vj-page-content table.woocommerce-table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
}

.vj-page-content table.shop_table th,
.vj-page-content table.shop_table td {
	text-align: left;
	padding: 12px 0;
	border-bottom: 1px solid var(--vj-hairline);
}

.vj-page-content ul.woocommerce-order-overview {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: 24px;
	margin: 24px 0;
	border-radius: 18px;
	background: var(--vj-blue-tint);
}

.vj-page-content ul.woocommerce-order-overview li {
	margin: 0;
	font-size: 14px;
	color: var(--vj-muted);
}

.vj-page-content ul.woocommerce-order-overview strong {
	display: block;
	font-size: 18px;
	color: var(--vj-navy);
	margin-top: 4px;
}

.vj-page-content .woocommerce-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 32px;
}

/* =========================================================================
   16b. Videa
   ========================================================================= */

.vj-videos {
	background: var(--vj-blue-tint);
}

.vj-videos__lead {
	max-width: 420px;
	color: var(--vj-body);
	font-size: 16px;
	line-height: 1.55;
}

/*
 * Pás karet. Šířka karty je pevná — kdyby se odvozovala od volného místa,
 * dvě videa by se roztáhla přes půl obrazovky a při poměru 9:16 by byla
 * přes tisíc pixelů vysoká. Takhle vypadá pás stejně při dvou i osmi videích
 * a přebytek se posouvá do strany.
 */
.vj-videos__strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 268px;
	justify-content: start;
	gap: 20px;
	margin-top: 36px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* Aby stín karet nebyl uříznutý o hranu posuvné oblasti. */
	padding-bottom: 8px;
	scrollbar-width: thin;
}

.vj-video-card {
	scroll-snap-align: start;
	min-width: 0;
}

.vj-video-card__frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	border: 0;
	padding: 0;
	border-radius: 20px;
	overflow: hidden;
	background: var(--vj-navy);
	cursor: pointer;
	box-shadow: var(--vj-shadow);
}

.vj-video-card__media,
.vj-video-card__blank {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--vj-navy);
}

.vj-video-card__frame::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(to top, rgba(12, 42, 77, 0.55), rgba(12, 42, 77, 0));
	pointer-events: none;
}

.vj-video-card__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--vj-crimson);
	/* Ikona ▶ má opticky těžiště vlevo, posuneme ji doprava. */
	padding-left: 4px;
	box-shadow: 0 6px 20px rgba(12, 42, 77, 0.35);
	transition: transform 0.15s ease;
	z-index: 1;
}

.vj-video-card__frame:hover .vj-video-card__play,
.vj-video-card__frame:focus-visible .vj-video-card__play {
	transform: scale(1.08);
}

.vj-video-card__body {
	margin-top: 14px;
}

.vj-video-card__title {
	font-family: var(--vj-font-head);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	color: var(--vj-navy);
}

.vj-video-card__text {
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--vj-muted);
}

.vj-videos__note {
	margin-top: 28px;
	font-size: 13px;
	color: var(--vj-muted);
}

/* ---------- Přehrávač přes celou obrazovku ---------- */

.vj-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(6, 20, 38, 0.92);
}

.vj-lightbox[hidden] {
	display: none;
}

.vj-lightbox__stage {
	display: grid;
	place-items: center;
	gap: 12px;
	width: 100%;
	max-width: min(520px, 100%);
}

.vj-lightbox__player {
	width: 100%;
	/* Svislé video se musí vejít na výšku obrazovky, ne jen na šířku. */
	max-height: 78vh;
	display: grid;
	place-items: center;
}

.vj-lightbox__player video,
.vj-lightbox__player iframe {
	width: 100%;
	max-height: 78vh;
	aspect-ratio: 9 / 16;
	border: 0;
	border-radius: 18px;
	background: #000;
	display: block;
}

.vj-lightbox__caption {
	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
	text-align: center;
}

.vj-lightbox__caption:empty {
	display: none;
}

.vj-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
}

.vj-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.26);
}

/* Pod otevřeným přehrávačem se stránka nesmí rolovat. */
body.vj-noscroll {
	overflow: hidden;
}

/* =========================================================================
   17. Responzivita
   ========================================================================= */

@media (max-width: 1200px) {
	:root {
		--vj-gutter: 40px;
	}

	.vj-hero h1 { font-size: 68px; }
	.vj-h2 { font-size: 46px; }
	.vj-h2--sm { font-size: 42px; }
	.vj-quote__text { font-size: 32px; }
	.vj-header__claim { display: none; }
	.vj-nav { gap: 24px; font-size: 14px; }
	.vj-ingredients__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
	.vj-hero {
		grid-template-columns: 1fr;
		gap: 40px;
		padding-top: 56px;
	}

	.vj-hero__media { order: -1; }
	.vj-hero__shot { height: 420px; }
	.vj-hero__tag { bottom: 122px; left: 0; }
	.vj-hero__lead { max-width: none; }

	.vj-audience__grid,
	.vj-safety__grid,
	.vj-faq__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.vj-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.vj-reviews__note {
		text-align: left;
		max-width: none;
	}

	/* Souhrn se skládá pod sebe — číslo, hvězdy a počet na jeden řádek. */
	.vj-reviews__summary {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 26px 28px;
	}

	.vj-reviews__score {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 16px;
		text-align: left;
		border-right: 0;
		border-bottom: 1px solid var(--vj-hairline);
		padding: 0 0 22px;
		margin: 0;
	}

	.vj-reviews__number { margin-bottom: 0; }
	.vj-reviews__total { margin-top: 0; margin-left: auto; }

	.vj-how__steps { grid-template-columns: 1fr; gap: 32px; }
	.vj-how__split { grid-template-columns: 1fr; }
	.vj-pricing__grid { grid-template-columns: 1fr; gap: 32px; }

	/*
	 * Karty s videem jedou od kraje ke kraji, ať je vidět, že se dají posouvat.
	 *
	 * scroll-padding musí odpovídat padding-left. Bez něj přichytávání zarovná
	 * první kartu na okraj scrollovací plochy, tím spolkne odsazení a pás se
	 * hned po načtení sám posune — první karta pak lepí na kraj displeje.
	 */
	.vj-videos__strip {
		grid-auto-columns: 68vw;
		gap: 14px;
		margin-left: calc(var(--vj-gutter) * -1);
		margin-right: calc(var(--vj-gutter) * -1);
		padding-left: var(--vj-gutter);
		padding-right: var(--vj-gutter);
		scroll-padding-left: var(--vj-gutter);
	}

	/* Recenze stejně — karta od kraje ke kraji, další kouká za okraj. */
	.vj-reviews__track {
		grid-auto-columns: 78vw;
		gap: 14px;
		margin-left: calc(var(--vj-gutter) * -1);
		margin-right: calc(var(--vj-gutter) * -1);
		padding-left: var(--vj-gutter);
		padding-right: var(--vj-gutter);
		scroll-padding-left: var(--vj-gutter);
	}

	.vj-reviews__summary { padding: 22px 22px; }
	.vj-reviews__number { font-size: 42px; }
	.vj-reviews__row { grid-template-columns: 28px 1fr 42px; gap: 10px; }

	.vj-videos__lead { max-width: none; }
	.vj-trust { grid-template-columns: repeat(2, 1fr); }
	.vj-footer__grid { grid-template-columns: 1fr 1fr; }

	/* Pokladna — jeden sloupec, souhrn nahoru */
	.vj-checkout__grid {
		grid-template-columns: 1fr;
	}

	.vj-checkout__main {
		grid-row: 2;
		padding: 28px;
	}

	.vj-checkout__side {
		grid-row: 1;
		position: static;
	}

	.vj-page-content .woocommerce-columns {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 782px) {
	:root {
		--vj-gutter: 20px;
		--vj-stickybar-h: 132px;
	}

	html { scroll-padding-top: 76px; }

	.vj-section { padding: 56px var(--vj-gutter); }
	.vj-audience { padding: 56px var(--vj-gutter); }

	/* Velikost se váže na šířku displeje, aby se „30 minut před akcí."
	   vešlo na jeden řádek i na užších telefonech. */
	.vj-hero h1 {
		font-size: clamp(26px, 9.5vw, 38px);
		letter-spacing: -0.03em;
	}

	.vj-hero__lead { font-size: 17px; }
	.vj-hero__cta .vj-btn { flex: 1 1 100%; }
	.vj-hero__thumb { height: 68px; }

	/* „před akcí." se vejde na řádek k „30 minut" — trojřádkový nadpis
	   z desktopu je na mobilu zbytečně roztahaný. */
	.vj-hero__break { display: none; }

	/*
	 * Nad fotkou nemá být nic než hlavička. Fotku roztahujeme přes obě
	 * rýhy na celou šířku displeje a necháváme ji diktovat výšku, aby se
	 * produkt nikde neořízl.
	 */
	.vj-hero { padding-top: 0; }

	.vj-hero__shot {
		height: auto;
		margin: 0 calc(-1 * var(--vj-gutter));
		border-radius: 0;
		background: var(--vj-white);
	}

	.vj-hero__shot img { height: auto; }

	/* Video nemá jak diktovat výšku, než se načte — držíme mu poměr telefonu. */
	.vj-hero__video {
		height: auto;
		aspect-ratio: 9 / 16;
	}

	/* Zář kolem fotky je vidět jen na jejích okrajích — po roztažení na celou
	   šířku nemá kam svítit. */
	.vj-hero__glow { display: none; }

	/* Štítek „7 × 10 g" bral celý řádek pod galerií. Vracíme ho na fotku,
	   do prázdného bílého rohu, kde nezabírá nic. */
	.vj-hero__tag {
		bottom: 92px;
		left: 0;
		padding: 10px 14px;
		border-radius: 14px;
	}

	.vj-hero__tag strong { font-size: 17px; }
	.vj-hero__tag span { font-size: 12px; }

	/* Sleva se lepí do horního rohu fotky. Levý okraj drží rýhu stránky,
	   ať je zarovnaná s nadpisem pod ní — fotka sama jde od kraje ke kraji. */
	.vj-hero__sticker {
		position: absolute;
		top: 14px;
		left: var(--vj-gutter);
		z-index: 2;
		display: inline-flex;
		align-items: center;
		padding: 7px 14px;
		border-radius: 999px;
		background: var(--vj-crimson);
		color: var(--vj-white);
		font-size: 13px;
		font-weight: 700;
		line-height: 1.2;
		white-space: nowrap;
		box-shadow: 0 8px 20px -6px rgba(176, 24, 57, 0.55);
	}

	/* Stejný text už je na fotce — v řádku odznaků by byl podruhé. */
	.vj-hero__badges .vj-badge--crimson {
		display: none;
	}

	/* Odznaky do jednoho řádku — na úzkém displeji se jinak lámaly do tří. */
	.vj-hero__badges {
		flex-wrap: nowrap;
		gap: 5px;
	}

	/* Nálepka se složením drží rýhu stránky ze druhé strany. */
	.vj-hero__dose {
		top: 14px;
		right: var(--vj-gutter);
		padding: 7px 12px;
		font-size: 12px;
	}

	.vj-hero__dose::before {
		width: 7px;
		height: 7px;
	}

	/*
	 * Hodnocení je nejsilnější důkaz na stránce, tak dostává vlastní pruh
	 * přes celou šířku displeje. Vlevo hvězdičkové čtverečky se známkou,
	 * pod nimi číslo a počet, vpravo kolečko se šipkou. Kliknout se dá
	 * kamkoli do pruhu — na dotyk je celá plocha snáz trefitelná než odkaz.
	 */
	/* Bez block by byl pruh flex položkou a smrskl se na šířku obsahu —
	   přes rýhy stránky by pak nepřetekl na celý displej. */
	.vj-hero__proof {
		display: block;
		margin-top: 30px;
	}

	/* Pruh je poslední věc v hero sekci — pod ním stačí menší mezera. */
	.vj-hero {
		padding-bottom: 40px;
	}

	.vj-hero__trust {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"top  go"
			"meta go";
		align-items: center;
		justify-items: stretch;
		column-gap: 14px;
		row-gap: 7px;
		margin: 0 calc(-1 * var(--vj-gutter));
		padding: 18px var(--vj-gutter);
		border-top: 1px solid var(--vj-hairline);
		border-bottom: 1px solid var(--vj-hairline);
		background: linear-gradient(180deg, #FFFFFF 0%, #F2F5F9 100%);
	}

	.vj-hero__trust-top {
		grid-area: top;
	}

	.vj-hero__trust-box {
		width: 28px;
		height: 28px;
		border-radius: 4px;
	}

	.vj-hero__trust-word {
		font-size: 17px;
	}

	.vj-hero__trust-meta {
		grid-area: meta;
		font-size: 13px;
		line-height: 1.2;
	}

	.vj-hero__trust-go {
		grid-area: go;
		display: grid;
		place-items: center;
		width: 42px;
		height: 42px;
		border-radius: 50%;
		background: var(--vj-trust);
		color: var(--vj-white);
		box-shadow: 0 10px 20px -8px rgba(0, 182, 122, 0.85);
	}

	/* Na nejužších displejích se čtverečky nesmí lámat do druhého řádku. */
	@media (max-width: 359px) {
		.vj-hero__trust-box {
			width: 25px;
			height: 25px;
		}

		.vj-hero__trust-word {
			font-size: 15px;
		}

		.vj-hero__trust-top {
			gap: 8px;
		}
	}

	.vj-hero__badges .vj-badge {
		min-width: 0;
		padding: 5px 9px;
		gap: 4px;
		font-size: clamp(8px, 2.5vw, 11px);
		letter-spacing: 0.01em;
		white-space: nowrap;
	}

	.vj-h2 { font-size: 32px; }
	.vj-h2--sm { font-size: 30px; }
	.vj-quote { padding: 28px; }
	.vj-quote__text { font-size: 24px; }
	.vj-step__title { font-size: 24px; }
	.vj-faq__q span:first-child { font-size: 17px; }
	.vj-faq__a { padding-right: 0; font-size: 16px; }

	.vj-ingredients__grid,
	.vj-audience__cards,
	.vj-safety__cards,
	.vj-trust,
	.vj-footer__grid {
		grid-template-columns: 1fr;
	}

	.vj-videos__strip { grid-auto-columns: 74vw; }
	.vj-video-card__play { width: 50px; height: 50px; }

	.vj-reviews__track { grid-auto-columns: 86vw; }
	.vj-review__body { padding: 20px 20px 18px; }
	.vj-reviews__number { font-size: 38px; }
	.vj-rating--lg .vj-rating__box { width: 26px; height: 26px; }
	.vj-reviews__arrow { width: 38px; height: 38px; }
	.vj-lightbox { padding: 12px; }
	.vj-lightbox__player video,
	.vj-lightbox__player iframe { max-height: 72vh; }

	.vj-trust__item { padding: 18px var(--vj-gutter); gap: 14px; }
	.vj-trust__icon { width: 42px; height: 42px; border-radius: 13px; }
	.vj-trust__item strong { font-size: 19px; }

	/*
	 * Ceník na mobilu: ve výchozí podobě zabírala jedna karta skoro celou
	 * obrazovku, takže nebylo vidět, že jsou tři a že se mezi nimi vybírá.
	 * Překlápíme je do kompaktních řádků — název a cena vedle sebe — aby
	 * všechny tři byly naráz na displeji.
	 */
	/* Nad nadpisem ceníku zbývala díra přes třetinu displeje — odsazení
	   sekce se sčítalo s odsazením té nad ním. */
	.vj-pricing {
		padding-top: 32px;
	}

	/* Videa mají stejné modré pozadí jako ceník, takže mezi nimi nebylo
	   vidět nic než prázdno. Ubíráme z obou stran přechodu. */
	.vj-videos:has(+ .vj-pricing) {
		padding-bottom: 24px;
	}

	.vj-videos + .vj-pricing {
		padding-top: 8px;
	}

	.vj-videos__note {
		margin-top: 18px;
	}

	.vj-pricing__hint {
		margin-top: 28px;
		font-size: 14px;
	}

	.vj-pricing__grid {
		gap: 12px;
	}

	.vj-pack {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"badge badge"
			"title price"
			"sub   unit"
			"row   save";
		align-items: center;
		gap: 2px 12px;
		padding: 16px 50px 16px 18px;
		border-radius: 18px;
	}

	/* Nadzvednutí by v těsném sloupci jen rozhoupalo rozestupy. */
	.vj-pack.is-selected {
		transform: none;
	}

	.vj-pack::after {
		top: 50%;
		right: 16px;
		width: 22px;
		height: 22px;
		margin-top: -11px;
	}

	.vj-pack__popular {
		grid-area: badge;
		position: static;
		justify-self: start;
		margin-bottom: 6px;
		padding: 4px 10px;
		font-size: 11px;
	}

	.vj-pack__title {
		grid-area: title;
		font-size: 23px;
	}

	.vj-pack__sub {
		grid-area: sub;
		font-size: 13px;
	}

	.vj-pack__row {
		grid-area: row;
		margin-top: 10px;
		gap: 8px;
	}

	.vj-pack__old { font-size: 15px; }

	.vj-pack__off {
		font-size: 11px;
		padding: 3px 7px;
	}

	.vj-pack__price {
		grid-area: price;
		justify-self: end;
		margin-top: 0;
		font-size: 28px;
	}

	.vj-pack__unit {
		grid-area: unit;
		justify-self: end;
		text-align: right;
		font-size: 12px;
	}

	.vj-pack__save {
		grid-area: save;
		justify-self: end;
		align-self: center;
		margin-top: 10px;
		padding: 5px 10px;
		font-size: 12px;
	}

	/* Odrážky mezi podmínkami se při zalomení trhaly od textu — na úzkém
	   displeji je čitelnější prostý seznam pod sebou. */
	.vj-pricing__terms {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.vj-pricing__terms [aria-hidden="true"] {
		display: none;
	}

	/* Header → hamburger */
	.vj-burger { display: grid; }

	.vj-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px var(--vj-gutter) 16px;
		background: #fff;
		border-bottom: 1px solid var(--vj-hairline);
		box-shadow: var(--vj-shadow);
	}

	.vj-nav.is-open { display: flex; }

	.vj-nav a {
		padding: 14px 0;
		font-size: 16px;
		border-bottom: 1px solid var(--vj-hairline);
	}

	.vj-nav a:last-child { border-bottom: none; }

	/*
	 * Na mobilu patří hamburger úplně doprava a tlačítko „Koupit" hned vedle
	 * něj — palec je u kraje displeje. Ve zdroji je hamburger před navigací
	 * (kvůli pořadí pro čtečky), takže ho sem přesouváme přes order.
	 */
	.vj-header {
		position: sticky;
		justify-content: flex-start;
		gap: 10px;
	}

	.vj-header__right {
		order: 2;
		margin-left: auto;
	}

	.vj-burger { order: 3; }

	.vj-header__right .vj-btn--navy { padding: 10px 16px; font-size: 14px; }

	.vj-footer__legal {
		flex-direction: column;
		gap: 12px;
	}

	/* Sticky lišta na mobilu — dvouřádkově, CTA přes celou šířku */
	.vj-stickybar {
		flex-wrap: wrap;
		gap: 10px;
		padding: 12px var(--vj-gutter);
		justify-content: space-between;
	}

	.vj-stickybar__title { font-size: 16px; flex: 1 1 100%; }
	.vj-stickybar__note { display: none; }
	.vj-stickybar .vj-btn { flex: 1 1 100%; padding: 14px 20px; }

	.vj-page-title { font-size: 34px; }

	.vj-slim-header__assurances { display: none; }

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.woocommerce-checkout p.form-row-wide,
	.woocommerce-checkout p.form-row.notes,
	.woocommerce-checkout p#billing_address_1_field,
	.woocommerce-checkout p#shipping_address_1_field,
	.woocommerce-checkout #billing_address_2_field,
	.woocommerce-checkout #shipping_address_2_field {
		grid-column: span 1;
	}

	/* Souhrn objednávky jde od kraje ke kraji — tmavý pruh přes celou šířku
	   odděluje „co platím" od formuláře líp než karta s rýhami po stranách. */
	.vj-order-card {
		margin-left: calc(-1 * var(--vj-gutter));
		margin-right: calc(-1 * var(--vj-gutter));
		border-radius: 0;
		padding: 26px var(--vj-gutter);
	}

	.woocommerce-checkout #payment { padding: 24px; }
	.vj-order-card__amount { font-size: 30px; }
	.vj-order-card__carrier { width: 64px; }

	.vj-slim-footer { flex-direction: column; gap: 12px; }
	.vj-page-main { padding: 32px var(--vj-gutter) 64px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Tisk — hlavně děkovací stránka / objednávka */
@media print {
	.vj-stickybar,
	.vj-header,
	.vj-burger { display: none !important; }
}

/* =========================================================================
   19. Přihlášený administrátor — horní lišta WordPressu
   -------------------------------------------------------------------------
   Lišta je fixed přes celou šířku, takže sticky prvky musí začínat pod ní.
   Výšky kopírují WordPress: 32 px, do 782 px 46 px, a do 600 px se lišta
   přestává lepit (position: absolute), takže odsazení rušíme.
   ========================================================================= */

.admin-bar .vj-header {
	top: 32px;
}

.admin-bar .vj-checkout__side {
	top: 64px;
}

@media screen and (max-width: 782px) {
	.admin-bar .vj-header {
		top: 46px;
	}

	.admin-bar .vj-checkout__side {
		top: 78px;
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .vj-header,
	.admin-bar .vj-checkout__side {
		top: 0;
	}
}

/* =========================================================================
   20. Přepínače lepících se lišt
   -------------------------------------------------------------------------
   Obsah webu → Hlavička / Spodní lišta. Třídy na <body> přidává
   vj_layout_classes() v functions.php.

   Hlavička se vypíná přes position: static, ne relative — jinak by ji
   posunul `top`, kterým ji odsazujeme od administrátorské lišty.

   Když spodní lišta zmizí, musí se vynulovat i --vj-stickybar-h. Z té
   výšky se počítá odsazení patičky, aby text nekončil pod lištou; bez
   lišty by tam zbyla prázdná díra.
   ========================================================================= */

/* Vypnutá lišta se nevykreslí vůbec, tady jen zavíráme díru pod patičkou. */
.vj-bar-off {
	--vj-stickybar-h: 0px;
}

/*
 * Nelepící se hlavička musí zůstat „positioned“ — rozbalené mobilní menu
 * z ní visí přes position: absolute; top: 100 %. Se static by se ukotvilo
 * k celé stránce a vyjelo o výšku displeje pod hlavičku, takže by po klepnutí
 * na hamburger nebylo vidět vůbec nic. `top: auto` ruší odsazení, kterým se
 * lepící se hlavička uhýbá liště WordPressu.
 */

/* Přepínač pro počítač nesmí sahat na mobil — na to je přepínač zvlášť. */
@media (min-width: 783px) {
	.vj-head-static .vj-header {
		position: relative;
		top: auto;
	}

	html:has(.vj-head-static) {
		scroll-padding-top: 24px;
	}
}

@media (max-width: 782px) {
	.vj-head-static-m .vj-header {
		position: relative;
		top: auto;
	}

	html:has(.vj-head-static-m) {
		scroll-padding-top: 24px;
	}

	.vj-bar-off-m {
		--vj-stickybar-h: 0px;
	}

	.vj-bar-off-m .vj-stickybar {
		display: none;
	}
}