/* =============================================
   DESIGN TOKENY
   Kompletní redesign — editoriální estetika.
   Čistá bílá + kamenně šedá + tmavě námořní akcentová barva.
   ============================================= */

:root {
	--ink:         #111110;
	--ink-mid:     #4A4948;
	--ink-light:   #888784;
	--bg:          #F7F7F5;
	--surface:     #FFFFFF;
	--img-bg:      #EEEDEA;
	--accent:      #1C3D5A;
	--accent-dim:  #2A5479;
	--fill:        #111110;
	--fill-done:   #1C3D5A;
	--border:      #E2E1DD;
	--radius:      6px;
	--t-fast:      0.18s ease;
	--t-med:       0.28s ease;
}

/* =============================================
   HEADER
   Struktura: logo + název | navigace + [účet + košík]
   Ikony účtu a košíku jsou zabaleny v .header-cart-icons (gap: 0).
   Celá pravá skupina (.header-icons) má gap: 1rem od navigace.
   Košík má padding-right aby odznak s počtem nebyl oříznutý.
   ============================================= */

/* Spodní border headeru */
header.wp-block-template-part {
	background: #fff;
	border-bottom: 1px solid #eee;
}

/* Tagline — skrytá, nepřináší hodnotu */
header .wp-block-site-tagline {
	display: none !important;
}

/* Vertikální padding headeru — kompaktní, 10px mezera od levého okraje */
header .wp-block-group.alignfull {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	padding-left: 10px !important;
}

/* Logo — max výška 26px */
header .wp-block-site-logo img {
	height: 26px !important;
	width: auto !important;
}

/* Mezera mezi logem a názvem — menší pro kompaktnější levou část */
header .wp-block-site-logo {
	margin-right: -4px !important;
}

/* Název webu — kompaktní, lehce zesvětlený pro vizuální balanc */
header .wp-block-site-title a {
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	color: #222 !important;
	text-decoration: none !important;
}

/* Navigace — čitelná, ale ne dominantní */
header .wp-block-navigation__container .wp-block-navigation-item__content {
	font-weight: 500 !important;
	color: #333 !important;
	font-size: 0.9rem !important;
	position: relative !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}

header .wp-block-navigation__container .wp-block-navigation-item__content:hover {
	color: #111 !important;
}

/* Podtržení při hoveru — roste zleva doprava */
header .wp-block-navigation__container .wp-block-navigation-item__content::after {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	bottom: -4px !important;
	width: 0% !important;
	height: 2px !important;
	background: #111 !important;
	transition: width 0.2s ease !important;
}

header .wp-block-navigation__container .wp-block-navigation-item__content:hover::after {
	width: 100% !important;
}

/* Aktivní stránka — podtržení viditelné */
header .wp-block-navigation__container .current-menu-item .wp-block-navigation-item__content::after {
	width: 100% !important;
}

header .wp-block-navigation__container .current-menu-item .wp-block-navigation-item__content {
	color: #111 !important;
}

/* Ikony účtu a košíku — sjednocená barva, hover pohyb */
header .wc-block-customer-account__account-icon,
header .wc-block-mini-cart__button {
	color: #222 !important;
	font-size: 17px !important;
	transition: transform 0.15s ease, color 0.15s ease !important;
}

header .wc-block-mini-cart__button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

header .wc-block-mini-cart__button svg {
	display: none !important;
}

header .wc-block-mini-cart__button::before {
	content: '🛒';
	font-size: 17px;
	line-height: 1;
	filter: grayscale(1) brightness(0.2);
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

header .wc-block-customer-account__account-icon:hover,
header .wc-block-mini-cart__button:hover {
	transform: translateY(-1px) !important;
	color: #000 !important;
}

/* Badge — jemný scale efekt při hoveru na košíku */
header .wc-block-mini-cart__button:hover .wc-block-mini-cart__badge {
	transform: scale(1.1) !important;
}

/* Vyhledávání v headeru — 440px, bílý, border, lupa uvnitř vpravo */
header .wp-block-search {
	flex: 0 0 440px !important;
	width: 440px !important;
}

/* Label "Hledat" — skrytý, zbytečný */
header .wp-block-search__label {
	display: none !important;
}

header .wp-block-search__inside-wrapper {
	position: relative !important;
	display: block !important;
	border: 1px solid #ddd !important;
	border-radius: 10px !important;
	background: #fff !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

header .wp-block-search__inside-wrapper:focus-within {
	border-color: #111 !important;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) !important;
}

header .wp-block-search__input {
	width: 100% !important;
	border: none !important;
	background: transparent !important;
	padding: 12px 40px 12px 16px !important;
	font-size: 0.875rem !important;
	color: #111 !important;
	outline: none !important;
	box-shadow: none !important;
}

header .wp-block-search__input::placeholder {
	color: #aaa !important;
}

/* Tlačítko — absolutně vpravo uvnitř inputu, ikona lupy */
header .wp-block-search__button {
	position: absolute !important;
	right: 10px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	cursor: pointer !important;
	font-size: 0 !important;
	display: flex !important;
	align-items: center !important;
}

header .wp-block-search__button::before {
	content: '' !important;
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
}

.header-icons {
	gap: 1rem !important;
}

/* Účet a košík těsně vedle sebe bez mezery */
.header-cart-icons {
	gap: 0 !important;
}

/* Pravý okraj košíku — prostor pro číselný odznak */
.wp-block-woocommerce-mini-cart {
	padding-right: 0.75rem !important;
}

/* Badge u košíku — menší, přesně zarovnaný */
.wc-block-mini-cart__badge {
	font-size: 10px !important;
	padding: 2px 5px !important;
	top: -7px !important;
	right: -6px !important;
}

/* =============================================
   MINI KOŠÍK
   Obrázek produktu — portrait poměr.
   Thumbnail byl přegenerován na 200×300 (bez crop) přes
   woocommerce_get_image_size_thumbnail filter v functions.php.
   Výška fixní 90px, šířka automatická = portrait tvar zachován.
   ============================================= */

.wc-block-mini-cart__products-table .wc-block-cart-item__image,
.wc-block-cart-item__image {
	flex-shrink: 0;
	width: auto !important;
	height: auto !important;
}

.wc-block-mini-cart__products-table .wc-block-cart-item__image img,
.wc-block-cart-item__image img {
	width: auto !important;
	height: 90px !important;
	object-fit: contain !important;
}

/* Mini-cart — tlačítko Přejít k pokladně černé */
.wc-block-mini-cart__footer-checkout {
	background-color: #111 !important;
}

.wc-block-mini-cart__footer-checkout:hover {
	background-color: #333 !important;
}

.wc-block-mini-cart__footer-cart .wc-block-components-button__text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.wc-block-mini-cart__footer-cart .wc-block-components-button__text::before {
	content: '🛒';
	font-size: 16px;
	line-height: 1;
	opacity: 0.8;
	flex-shrink: 0;
}

/* Rezervovat místo pro scrollbar — zabraňuje posunu stránky při přechodu mezi stránkami */
html {
	scrollbar-gutter: stable;
}

/* Světle šedé pozadí stránky — bílá karta se opticky oddělí */
body {
	background-color: #f5f5f5;
}

/* =============================================
   KARTA PRODUKTU (homepage — sekce Nové tituly)
   Struktura karty:
   1. Obrázek (.wc-block-components-product-image)
   2. Název (.wp-block-post-title)
   3. Autor (figure.product-variation — wp:woocommerce/product-specifications)
   4. Cena (.wc-block-components-product-price)
   5. Tlačítko (.wc-block-components-product-button)
   ============================================= */

/* Karta — padding 16px uvnitř, obrázek je inset s vlastním border-radius.
   shadow: jemná hloubka 0 6px 16px.
   transition: 0.2s ease pro všechny animované vlastnosti. */
.wc-block-product {
	background-color: var(--surface);
	border-radius: 12px;
	border: 1px solid var(--border);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 16px;
}

/* Hover — translateY(-4px), stín 0 12px 24px */
.wc-block-product:hover {
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
	border-color: #C8C7C3;
	transform: translateY(-4px);
}

/* --- OBRÁZEK ---
   Karta má padding: 16px → obrázek je inset.
   Šedé pozadí odstraněno — obálka je dominantní, bílá karta prosvítá.
   border-radius: 8px + overflow: hidden na kontejneru = zaoblené rohy.
   margin-bottom: 16px = vertikální rytmus obrázek → text. */
.wc-block-components-product-image {
	flex-shrink: 0;
	margin-bottom: 16px;
	/* border-radius a overflow: hidden jsou na <a> tagu, ne zde */
}

.wc-block-components-product-image a {
	display: block;
	aspect-ratio: 2 / 3;
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	padding: 0;
}

/* object-fit: cover = obrázek vyplní celý kontejner.
   Po přegenerování miniatur na poměr 2:3 nebude žádný ořez. */
.wc-block-components-product-image img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
	transition: transform 0.2s ease;
}

/* Hover zoom obrázku — scale(1.03) s transition 0.2s ease */
.wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.03);
}

/* --- MEZERY UVNITŘ KARTY ---
   Karta má padding: 16px → vnitřní group bloky nesmí mít boční padding (bylo 1rem).
   WordPress blockGap vynulován přes row-gap.
   Obrázek má margin-bottom: 16px → první group nepotřebuje padding-top. */
.wc-block-product .wp-block-group {
	flex-grow: 1;
}

.wc-block-product .wp-block-group,
.wc-block-product .wp-block-group > * {
	row-gap: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Boční padding skupin vynulován — karta samotná má padding: 16px */
.wc-block-product .wp-block-group {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.wc-block-product > * + * {
	margin-top: 0 !important;
}

/* Obrázek má margin-bottom: 16px → mezera před textem je zajištěna */
.wc-block-product .wp-block-group:first-of-type {
	padding-top: 0 !important;
}

/* --- AUTOR ---
   Blok wp:woocommerce/product-specifications s className="product-variation".
   Renderuje se jako <figure class="wp-block-table product-variation">.
   Zobrazuje VŠECHNY atributy produktu — druhý řádek (Nakladatelství) skryt přes tr + tr.
   Label (th) skryt, zobrazuje se jen hodnota v <td><p>.
   <p> uvnitř <td> měl výchozí margin — vynulován. */
.wc-block-product figure.product-variation {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
}

.wc-block-product .product-variation table {
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Skrýt label "Autor" */
.wc-block-product .product-variation th {
	display: none !important;
}

/* Skrýt druhý a další atribut (Nakladatelství atd.) */
.wc-block-product .product-variation tr + tr {
	display: none !important;
}

/* Převést tabulku na blokový layout */
.wc-block-product .product-variation table,
.wc-block-product .product-variation tbody,
.wc-block-product .product-variation tr {
	display: block;
}

.wc-block-product .product-variation td {
	display: block;
	padding: 0 !important;
	border: none !important;
	text-align: center;
}

/* Styl hodnoty autora — 13px, #666, italic.
   color: #666 (bylo var(--ink-light) = #888) — tmavší šedá, lépe čitelná.
   margin-bottom: 12px dle spacing rytmu 4/8/12/16px. */
.wc-block-product .product-variation td p {
	font-size: 0.8125rem;
	font-style: italic;
	color: #666;
	margin: 0 0 12px !important;
	padding: 0 !important;
	letter-spacing: 0.01em;
}

/* --- NÁZEV ---
   font-size: 1.125rem = 18px, font-weight: 700.
   line-clamp: 2 řádky s ellipsis — zabraňuje rozlití dlouhých názvů.
   color: #111 — tmavý, ne červený (isLink=true dědí červenou, přebíjíme níže). */
.wc-block-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--roboto) !important;
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--ink) !important;
	letter-spacing: -0.01em;
	margin-top: 0 !important;
	margin-bottom: 6px !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* Přebít červenou barvu odkazu z globálních téma stylů */
.wc-block-product .wp-block-post-title a,
.wc-block-product .wp-block-post-title a:link,
.wc-block-product .wp-block-post-title a:visited {
	color: var(--ink) !important;
	text-decoration: none !important;
}

.wc-block-product .wp-block-post-title a:hover {
	color: var(--ink-mid) !important;
}

/* --- CENA ---
   font-size: 1.3125rem = 21px — mírně zvýrazněna, vede oko k akci.
   margin-bottom: 18px — více prostoru před CTA (bylo 16px), prvky se "nedusí".
   Celá čísla bez desetinných míst — viz functions.php (wc_get_price_decimals). */
.wc-block-product .wc-block-components-product-price {
	font-size: 1.3125rem !important;
	font-weight: 700 !important;
	color: var(--ink) !important;
	letter-spacing: -0.02em;
	margin-top: 0.25rem !important;
	margin-bottom: 18px !important;
}

.wc-block-product .wc-block-components-product-price .woocommerce-Price-amount {
	color: var(--ink) !important;
}

/* --- TLAČÍTKO "PŘIDAT DO KOŠÍKU" ---
   Text tlačítka řídí WordPress Interactivity API (data-wp-text) — mění se na "1 v košíku".
   Řešení: span s data-wp-text skryt, text zobrazen přes ::after pseudo-element.
   "Zobrazit košík" link (added_to_cart) taky skryt.
   Tmavé tlačítko — moderní, čisté.
   border-radius: var(--radius) přebíjí WooCommerce výchozích 45px. */

/* Skrýt "Zobrazit košík" link po přidání */
.wc-block-components-product-button .added_to_cart,
.wc-block-components-product-button .wc-forward {
	display: none !important;
}

/* Skrýt dynamický text (API mění na "1 v košíku") */
.wc-block-components-product-button__button span[data-wp-text] {
	display: none !important;
}

/* Ikona košíku vlevo — 16px, opacity 0.8, gap zajišťuje flex na tlačítku (gap: 8px).
   margin-right: 0 — gap na flex kontejneru je přesnější.
   V just-added stavu ::before přepíše na fill animaci — ikona zmizí. */
.wc-block-components-product-button__button::before {
	content: '🛒';
	font-size: 16px;
	filter: grayscale(1) brightness(2.8);
	position: relative;
	z-index: 1;
	line-height: 1;
	flex-shrink: 0;
}

/* Pevný text přes pseudo-element */
.wc-block-components-product-button__button::after {
	content: 'Přidat do košíku';
	text-transform: uppercase;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
}



/* Mezery okolo tlačítka — karta má padding: 16px → jen margin-top pro oddělení od ceny */
.wc-block-product .wc-block-components-product-button {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Styl tlačítka — tmavé #222, height 46px, border-radius 8px, font 14px/600.
   gap: 8px odděluje ikonu 🛒 od textu.
   transition: background + transform 0.15s ease (rychlejší než karta — UX spec). */
.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button {
	background: #222222 !important;
	color: #ffffff !important;
	padding: 0 20px !important;
	min-height: 46px !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	font-family: var(--wp--preset--font-family--roboto) !important;
	text-transform: uppercase !important;
	font-size: 0.875rem !important;
	letter-spacing: 0.06em !important;
	border: none !important;
	position: relative !important;
	overflow: hidden !important;
	transition: background 0.15s ease, transform 0.15s ease !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button:hover {
	background: #333333 !important;
	transform: scale(1.02) !important;
}

/* Stisknutí — krátký "propadnutý" efekt */
.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button:active {
	transform: scale(0.96) !important;
	background: #111111 !important;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
	transition: transform 0.08s ease, background 0.08s ease !important;
}



/* =============================================
   Stránka obchodu — archiv produktů
   ============================================= */

/* Dvousloupcový layout: sidebar vlevo + produkty vpravo */
.wp-block-group.shop-layout {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 2.5rem !important;
}

.wp-block-group.shop-sidebar {
	flex: 0 0 160px !important;
	width: 160px !important;
	min-width: 160px !important;
	max-width: 160px !important;
}

.wp-block-group.shop-products {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
}

/* Styl kategorií v sidebaru */
.shop-sidebar h4.wp-block-heading {
	font-size: 0.7rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: var(--ink-light) !important;
	margin-bottom: 0.75rem !important;
}

.shop-sidebar .wp-block-woocommerce-product-categories ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.shop-sidebar .wp-block-woocommerce-product-categories li {
	margin-bottom: 0.3rem;
	font-size: 0.9rem;
}

.shop-sidebar .wp-block-woocommerce-product-categories a {
	color: var(--ink-mid);
	text-decoration: none;
	font-size: 0.9rem;
	transition: color var(--t-fast);
}

.shop-sidebar .wp-block-woocommerce-product-categories a:hover {
	color: var(--ink);
}

/* Mobilní layout — sidebar nad produkty */
@media (max-width: 640px) {
	.wp-block-group.shop-layout {
		flex-direction: column !important;
		gap: 1.5rem !important;
	}

	.wp-block-group.shop-sidebar {
		flex: none !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	/* Kategorie horizontálně na mobilu */
	.shop-sidebar .wp-block-woocommerce-product-categories ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.shop-sidebar .wp-block-woocommerce-product-categories li {
		margin-bottom: 0;
	}

	.shop-sidebar .wp-block-woocommerce-product-categories a {
		display: inline-block;
		padding: 5px 12px;
		border: 1px solid var(--border);
		border-radius: 20px;
		font-size: 0.85rem;
		background: var(--surface);
	}

	.shop-sidebar .wp-block-woocommerce-product-categories a:hover {
		background: var(--ink);
		color: #fff;
		border-color: var(--ink);
	}
}