/*
 * VZoom Weave – aplikace design tokenů nad Storefrontem.
 *
 * Zatím FOUNDATION (krok 1): písmo, barvy, tlačítka, odkazy, focus, hlavička,
 * patička. Detailní styly jednotlivých stránek (výpis, detail, košík, pokladna)
 * přijdou v dalších krocích. Pojmy a pravidla viz doc/01 a doc/10.
 */

/* ---------------------------------------------------------------------------
   Základ: písmo a barvy
   --------------------------------------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--vz-font-base);
	color: var(--vz-text);
}

body {
	background-color: var(--vz-bg);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.page-title,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--vz-font-heading);
	font-weight: var(--vz-fw-bold);
	color: var(--vz-text);
}

/* Cover blok (hero, banner Zakázek): tmavý překryv → bílý obsah. Jádro
   WordPressu bělí Cover jen přes :where() (nulová specificita) a nadpisům
   nastavuje color:inherit, takže prohrávají s naším obecným pravidlem pro
   nadpisy. Proto nastavíme bílou explicitně a s dostatečnou specificitou
   (zdvojená třída). Používáme jen tmavé překryvy. */
.wp-block-cover.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover.wp-block-cover :where(h1, h2, h3, h4, h5, h6, p) {
	color: #fff;
}

/* Uvnitř bloku s vlastní barvou (tmavé/barevné pruhy) nadpis dědí barvu textu,
   aby nezůstal tmavý na tmavém (kontrast). */
.has-text-color h1,
.has-text-color h2,
.has-text-color h3,
.has-text-color h4,
.has-text-color h5,
.has-text-color h6 {
	color: inherit;
}

/* Odkazy */
a {
	color: var(--vz-primary);
}

a:hover,
a:focus {
	color: var(--vz-primary-hover);
}

/* Viditelný focus (přístupnost – VZ-OPP-016) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--vz-focus);
	outline-offset: 2px;
}

::selection {
	background: var(--vz-secondary);
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Tlačítka
   --------------------------------------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background-color: var(--vz-primary);
	color: var(--vz-on-primary);
	border: 0;
	border-radius: var(--vz-radius-sm);
	font-weight: var(--vz-fw-bold);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--vz-primary-hover);
	color: var(--vz-on-primary);
}

/* Bloková tlačítka (hero, domovská stránka): jedna linka, zarovnaná na střed.
   .wp-block-buttons nemusí být ve flexu – vynutíme ho, jinak align-items neplatí. */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vz-space-3);
}

/* POZOR na specificitu: Storefront styluje bloková tlačítka přes
   `.hentry .entry-content .wp-block-button .wp-block-button__link` (0,4,0) a u
   outline `… .is-style-outline …` (0,5,0) – nastavuje border-radius:0, border:0/2px
   a vlastní padding. Naše pravidla proto musí mít STEJNOU specificitu (a načítají se
   po Storefrontu → vyhrají). Uvádíme i obecný selektor pro ostatní kontexty. */

/* Společný box obou variant → stejná výška i stejně zakulacené rohy (4px jako shop) */
.wp-block-button > .wp-block-button__link,
.hentry .entry-content .wp-block-button > .wp-block-button__link {
	padding: 0.7em 1.4em;
	border: 1px solid transparent;
	border-radius: var(--vz-radius-sm);
	font-weight: var(--vz-fw-bold);
	line-height: 1.6;
}

/* Plné (primární) tlačítko */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.hentry .entry-content .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background-color: var(--vz-primary);
	color: var(--vz-on-primary);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus,
.hentry .entry-content .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.hentry .entry-content .wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus {
	background-color: var(--vz-primary-hover);
	color: var(--vz-on-primary);
}

/* Outline tlačítko – stejný box, jen průhledné pozadí a 1px okraj (přebíjí 0,5,0) */
.wp-block-button.is-style-outline > .wp-block-button__link,
.hentry .entry-content .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid currentColor;
	border-radius: var(--vz-radius-sm);
	color: inherit;
}

/* ---------------------------------------------------------------------------
   Hero akce – vlastní box s tlačítky (mimo .wp-block-button, ať nás nestyluje
   Storefront ani jádro). Plná kontrola nad zarovnáním a rohy.
   --------------------------------------------------------------------------- */
.vz-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;          /* obě tlačítka stejně vysoká */
	gap: var(--vz-space-3);
	margin-top: var(--vz-space-4);
}

.vz-hero-actions .vz-btn {
	display: inline-flex;
	align-items: center;           /* text na střed na výšku */
	justify-content: center;
	padding: 0.7em 1.4em;
	border: 1px solid transparent;
	border-radius: var(--vz-radius-sm);  /* stejné rohy jako tlačítka v shopu */
	font-weight: var(--vz-fw-bold);
	line-height: 1.4;
	text-decoration: none;
}

/* Zrušit podtržení odkazů: Storefront má `.hentry .entry-content a` (0,3,0).
   Tenhle samostatný selektor (0,4,0) ho přebíjí, ale NEsahá na okraj/pozadí
   (jinak by shorthand `border` přebil barvu okraje u ghost varianty). */
.hentry .entry-content .vz-hero-actions .vz-btn,
.hentry .entry-content .vz-hero-actions .vz-btn:hover,
.hentry .entry-content .vz-hero-actions .vz-btn:focus {
	text-decoration: none;
}

.vz-hero-actions .vz-btn--primary {
	background-color: var(--vz-primary);
	color: var(--vz-on-primary);
}

.vz-hero-actions .vz-btn--primary:hover,
.vz-hero-actions .vz-btn--primary:focus {
	background-color: var(--vz-primary-hover);
	color: var(--vz-on-primary);
}

.vz-hero-actions .vz-btn--ghost {
	background-color: transparent;
	border-color: #fff;
	color: #fff;
}

.vz-hero-actions .vz-btn--ghost:hover,
.vz-hero-actions .vz-btn--ghost:focus {
	background-color: rgba(255, 255, 255, 0.14);
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Hero – zarovnání obsahu na šířku obsahu webu (stejná levá hrana jako logo)
   --------------------------------------------------------------------------- */
/* Hero je přes celou šířku (alignfull) a obsah má vlevo, takže text začínal
   u okraje obrazovky – víc vlevo než logo. Vnitřní kontejner omezíme na šířku
   .col-full (66.4989378333em + padding 2.617924em) a vycentrujeme → levá hrana
   textu je na stejné úrovni jako logo. Jádro používá doubled-class selektor
   (0,5,0), proto stejná specificita + pozdější načtení (vyhrává). */
.wp-block-cover.alignfull.is-position-center-left {
	justify-content: center;
}

.wp-block-cover.alignfull.has-custom-content-position.is-position-center-left .wp-block-cover__inner-container {
	width: 100%;
	max-width: 66.4989378333em;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2.617924em;
	padding-right: 2.617924em;
	box-sizing: content-box;
}

/* Sekundární (magenta) – poptávka / zvýrazněné CTA.
   Použití: přidat třídu vz-btn-secondary na tlačítko/odkaz. */
.vz-btn-secondary,
.woocommerce a.button.vz-btn-secondary,
.woocommerce button.button.vz-btn-secondary {
	background-color: var(--vz-secondary);
	color: #fff;
}

.vz-btn-secondary:hover,
.woocommerce a.button.vz-btn-secondary:hover,
.woocommerce button.button.vz-btn-secondary:hover {
	background-color: var(--vz-secondary-hover);
	color: #fff;
}

/* ---------------------------------------------------------------------------
   WooCommerce drobnosti
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce-Price-amount {
	color: var(--vz-text);
	font-weight: var(--vz-fw-bold);
}

/* Odznak (akce / NOVINKA) – magenta dle design systému */
.woocommerce span.onsale,
.vz-badge {
	background-color: var(--vz-secondary);
	color: #fff;
	border-radius: var(--vz-radius-pill);
}

/* ---------------------------------------------------------------------------
   Hlavička a navigace
   --------------------------------------------------------------------------- */
.site-header {
	background-color: var(--vz-surface);
	border-bottom: 1px solid var(--vz-border);
	/* Menší mezera nad hlavičkou (Storefront má ~2.6em) – aby byla blíž
	   hornímu okraji a mezera nahoře i dole byla stejná (k Hero). */
	padding-top: 1.25em;
	padding-bottom: 1.25em;
}

/* Logo – přiměřená velikost (zdroj je 512×512). Vyšší specificita než
   Storefront (ten v @media nastavuje img max-height:none / max-width:230px). */
.site-header .site-branding img.custom-logo {
	max-height: 56px;
	max-width: 56px;
	width: auto;
	height: auto;
}

/* Hlavička na jednu linku (desktop): logo · menu ........ hledání · košík.
   Navigaci a košík do kontejneru přesouvá functions.php. Storefront dává
   prvkům pevné šířky/float (.woocommerce-active …) – tady je přebíjíme na auto,
   aby flex držel vše na jedné lince. */
@media (min-width: 768px) {
	.site-header .col-full {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		column-gap: var(--vz-space-6);
	}

	/* Storefront clearfix přidává ::before/::after, které se ve flexu chovají
	   jako prázdné položky a lámou řádek. Tady je vypneme. */
	.site-header .col-full::before,
	.site-header .col-full::after {
		content: none;
	}

	.woocommerce-active .site-header .site-branding,
	.site-header .site-branding {
		width: auto;
		max-width: none;
		float: none;
		clear: none;
		/* Větší mezera za logem (~3× column-gap): 48px margin + 24px gap = 72px. */
		margin: 0 var(--vz-space-12) 0 0;
		padding: 0;
	}

	/* Menu hned vedle loga; auto margin odsune hledání a košík doprava. */
	.site-header .main-navigation {
		width: auto;
		float: none;
		clear: none;
		margin: 0 auto 0 0;
	}

	.woocommerce-active .site-header .site-search,
	.site-header .site-search {
		width: auto;
		max-width: 220px;
		float: none;
		margin: 0;
		flex-shrink: 1;
	}

	/* Košík na jeden řádek – nezalamovat „0,00 Kč / 0 položek“ a nezmenšovat. */
	.woocommerce-active .site-header .site-header-cart,
	.site-header .site-header-cart {
		width: auto;
		float: none;
		margin: 0;
		flex-shrink: 0;
		white-space: nowrap;
	}
}

/* Aktivní položka menu – petrolejové podtržení (dle návrhu) */
.main-navigation ul.menu li.current-menu-item > a,
.main-navigation ul.nav-menu li.current-menu-item > a {
	color: var(--vz-primary);
	box-shadow: inset 0 -2px 0 var(--vz-primary);
}

/* Rozbalovací košík (po najetí myší) – Storefront ho dělá široký jako ikonu košíku
   (width:100%). Dáme mu pevnou, dostatečnou šířku a ukotvíme zprava, ať nepřeteče
   mimo obrazovku. Skrytí (left:-999em) ponecháváme na Storefrontu. */
.site-header .site-header-cart .widget_shopping_cart {
	width: 24em;
	max-width: calc(100vw - 2em);
}

.site-header .site-header-cart:hover .widget_shopping_cart,
.site-header .site-header-cart.focus .widget_shopping_cart {
	left: auto;
	right: 0;
}

/* 1em mezera mezi textem (cena + počet položek) a ikonou košíku.
   Ikona je ::after s float:right, takže margin-left od textu ji odsadí. */
.site-header .site-header-cart .cart-contents::after {
	margin-left: 1em;
}

/* ---------------------------------------------------------------------------
   Patička – světlá (dle design systému)
   --------------------------------------------------------------------------- */
.site-footer {
	background-color: var(--vz-surface);
	color: var(--vz-text);
	border-top: 1px solid var(--vz-border);
}

.site-footer a {
	color: var(--vz-text);
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--vz-primary);
}

/* Informační menu v patičce – nenápadné, na jednom řádku, vycentrované */
.vz-footer-menu {
	margin: 0 auto var(--vz-space-4);
	text-align: center;
}

.vz-footer-menu__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--vz-space-2) var(--vz-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vz-footer-menu__list a {
	color: var(--vz-text-muted);
	text-decoration: none;
	font-size: 0.9em;
}

.vz-footer-menu__list a:hover,
.vz-footer-menu__list a:focus {
	color: var(--vz-primary);
}

/* ---------------------------------------------------------------------------
   Filtr podle materiálu (nad výpisem Plédů)
   --------------------------------------------------------------------------- */
.vz-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vz-space-2);
	clear: both;
	width: 100%;
	margin: var(--vz-space-4) 0 var(--vz-space-6);
	padding-top: var(--vz-space-4);
	padding-bottom: var(--vz-space-4);
	border-top: 1px solid var(--vz-border);
	border-bottom: 1px solid var(--vz-border);
}

.vz-filter__label {
	font-weight: var(--vz-fw-bold);
	margin-right: var(--vz-space-1);
}

.vz-filter__item {
	display: inline-block;
	padding: var(--vz-space-1) var(--vz-space-3);
	border: 1px solid var(--vz-border);
	border-radius: var(--vz-radius-sm);
	color: var(--vz-text);
	text-decoration: none;
	line-height: 1.6;
}

.vz-filter__item:hover,
.vz-filter__item:focus {
	border-color: var(--vz-primary);
	color: var(--vz-primary);
}

.vz-filter__item.is-active {
	background-color: var(--vz-primary);
	border-color: var(--vz-primary);
	color: var(--vz-on-primary);
}

/* ---------------------------------------------------------------------------
   Detail produktu (originál)
   --------------------------------------------------------------------------- */
.vz-original-note {
	margin: 0 0 var(--vz-space-3);
	color: var(--vz-secondary);
	font-weight: var(--vz-fw-bold);
	letter-spacing: 0.02em;
}

.vz-product-info {
	list-style: none;
	margin: var(--vz-space-4) 0 0;
	padding: var(--vz-space-4) 0 0;
	border-top: 1px solid var(--vz-border);
	font-size: 0.95em;
	color: var(--vz-text-muted);
}

.vz-product-info li {
	margin: 0 0 var(--vz-space-1);
}

/* Stav skladu / „Prodáno“ */
.woocommerce div.product p.stock.out-of-stock {
	color: var(--vz-secondary);
	font-weight: var(--vz-fw-bold);
}

.woocommerce div.product p.stock.in-stock {
	color: var(--vz-primary);
	font-weight: var(--vz-fw-bold);
}

/* --------------------------------------------------------------------------
   Zakázkový formulář (Contact Form 7) – stránka „Zakázková tvorba".
   Vše scoped na .vz-form, aby to neovlivnilo jiné formuláře na webu.
   -------------------------------------------------------------------------- */
.vz-form {
	--vz-form-label-w: 190px; /* šířka sloupce s popiskem */
	max-width: 760px;
}

/* Řádek = popisek vlevo + pole vpravo na stejné lince. */
.vz-form__row {
	display: flex;
	align-items: flex-start;
	gap: var(--vz-space-4);
	margin: 0 0 var(--vz-space-4);
}

.vz-form__row > label {
	flex: 0 0 var(--vz-form-label-w);
	margin: 0;
	/* zarovná text popisku s prvním řádkem pole (horní padding + rámeček pole) */
	padding-top: calc(0.6em + 1px);
	font-weight: var(--vz-fw-bold);
}

/* Obal pole je sám dvousloupcový: vlevo pole, vpravo (po validaci) chybová
   hláška – aby chyba byla VEDLE pole, ne pod ním. */
.vz-form__row > .wpcf7-form-control-wrap {
	display: flex;
	align-items: flex-start;
	gap: var(--vz-space-3);
	flex: 1 1 auto;
	min-width: 0;
}

.vz-form__row > .wpcf7-form-control-wrap > input,
.vz-form__row > .wpcf7-form-control-wrap > textarea {
	flex: 1 1 auto;
	min-width: 0;
}

.vz-form__req,
.vz-form__hint {
	font-weight: var(--vz-fw-normal);
	font-size: 0.85em;
	color: var(--vz-text-muted);
}

.vz-form input[type="text"],
.vz-form input[type="email"],
.vz-form input[type="tel"],
.vz-form textarea {
	width: 100%;
	padding: 0.6em 0.8em;
	border: 1px solid var(--vz-border);
	border-radius: var(--vz-radius-sm);
	background: var(--vz-surface);
	font-family: var(--vz-font-base);
	font-size: 1em;
	color: var(--vz-text);
	box-sizing: border-box;
}

.vz-form textarea {
	resize: vertical;
	min-height: 8em;
}

.vz-form input[type="text"]:focus,
.vz-form input[type="email"]:focus,
.vz-form input[type="tel"]:focus,
.vz-form textarea:focus {
	outline: 2px solid var(--vz-focus);
	outline-offset: 1px;
	border-color: var(--vz-focus);
}

.vz-form input[type="file"] {
	display: block;
	width: 100%;
	font-family: var(--vz-font-base);
}

/* Souhlas a tlačítko nemají popisek – nepatří do dvousloupcového rozložení.
   Odsadíme je tak, aby lícovaly se sloupcem polí. */
.vz-form__row.vz-form__consent,
.vz-form__row.vz-form__actions {
	display: block;
	padding-left: calc(var(--vz-form-label-w) + var(--vz-space-4));
}

/* Souhlas se zpracováním – zaškrtávátko vedle textu na jednom řádku. */
.vz-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: var(--vz-space-2);
	margin: 0;
	font-weight: var(--vz-fw-normal);
}

.vz-form__consent .wpcf7-list-item {
	margin: 0;
}

.vz-form__consent input[type="checkbox"] {
	margin-top: 0.2em;
	flex-shrink: 0;
}

.vz-form__actions {
	margin-top: var(--vz-space-6);
}

.vz-form .wpcf7-submit {
	border-radius: var(--vz-radius-sm);
	padding: 0.7em 1.6em;
	font-weight: var(--vz-fw-bold);
}

/* Validační hláška vedle pole (pravý sloupec obalu). padding-top zarovná text
   hlášky s prvním řádkem pole; flex:0 0 auto + max-width drží šířku na obsahu. */
.vz-form .wpcf7-not-valid-tip {
	flex: 0 0 auto;
	max-width: 15em;
	padding-top: calc(0.6em + 1px);
	color: var(--vz-error);
	font-size: 0.85em;
}

.wpcf7-response-output {
	margin: var(--vz-space-4) 0 0;
	padding: var(--vz-space-3) var(--vz-space-4);
	border-radius: var(--vz-radius-sm);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--vz-success);
	color: var(--vz-success);
}

/* Mobil: na úzkém displeji je dvousloupcové rozložení nečitelné – popisek
   se vrátí nad pole a zruší se odsazení souhlasu/tlačítka. */
@media (max-width: 600px) {
	.vz-form__row {
		display: block;
	}

	.vz-form__row > label {
		padding-top: 0;
		margin-bottom: var(--vz-space-2);
	}

	.vz-form__row.vz-form__consent,
	.vz-form__row.vz-form__actions {
		padding-left: 0;
	}

	/* Na úzkém displeji není vedle pole místo – hláška jde zpět pod pole. */
	.vz-form__row > .wpcf7-form-control-wrap {
		display: block;
	}

	.vz-form .wpcf7-not-valid-tip {
		padding-top: 0;
		margin-top: var(--vz-space-1);
		max-width: none;
	}
}