/*
 * Tolarie — brandova vrstva pro stavajici Django sablony.
 *
 * Barvy a pisma nejsou definovane tady. Berou se z tolarie-tokens.css,
 * coz je kopie design tokenu z Portara (apps/tolarie-eshop). Diky tomu
 * ma tenhle web stejnou paletu jako nove FE a pri prechodu neni co ladit.
 *
 * Nazvy nize jsou jen cesky alias, aby zbytek souboru zustal citelny.
 */

:root {
	/* --- primarni paleta --- */
	--zlata: var(--accent);           /* Tolarie Gold - znacka, durazy */
	--inkoust: var(--c-ink);          /* Imperial Ink - text, tmave plochy */
	--papir: var(--fg);               /* barva textu na tmavem */

	/* --- akcenty, 1-3 % plochy --- */
	--cinnabar: var(--c-cinnabar);    /* durazy, slevy, chyby */
	--patina: var(--c-patina);        /* uspech, skladem */
	--patina-svetla: #6E9478;         /* patina citelna na tmavem */

	/* Tokenova --ok (#2f5747) je na inkoustovem podkladu na hrane citelnosti.
	   Portaro ji pouziva na svetlem, my na tmavem - proto ji zesvetlujeme.
	   Prepis patri sem, tolarie-tokens.css je kopie a needituje se. */
	--ok: #6E9478;
	--mosaz: var(--c-brass);          /* hover, podtrzeni, druhe zlato */

	/* --- plochy a linky --- */
	--inkoust-tmavy: var(--bg-sunk);  /* nejtmavsi plocha - hlavicka, paticka */
	--plocha: var(--bg-elev);         /* podklad karet a obsahu */
	--zlata-tlumena: var(--accent-deep);
	--text-tlumeny: var(--fg-mute);   /* vedlejsi text */
	--linka: var(--fg-soft);          /* druhotny text a jemne oddelovace */

	/* --- pisma --- */
	--pismo-nadpis: var(--f-display);
	--pismo-text: var(--f-body);
	--pismo-cisla: var(--f-mono);
}

/*
 * Nadpisy jsou v Cinzelu, ale verzalky uz tu neurcujeme globalne.
 * O to se staraji komponenty z Portara: .h-section je ve verzalkach,
 * .h-display ne. Globalni pravidlo by je prebijelo a nadpisy stranek
 * by se rozesly s predlohou.
 */
h1, h2, h3 {
	font-family: var(--pismo-nadpis);
	letter-spacing: 0.04em;
}

h4, h5, h6 {
	font-family: var(--pismo-text);
	font-weight: 600;
}

body {
	font-family: var(--pismo-text);
	line-height: 1.55;
}


/* --- levy sloupec s kategoriemi ---------------------------------------
 * Hlavni kategorie mely zlatou plosku jako obrazek 180 px na sirku, takze
 * po rozsireni webu nedosahovala k okraji sloupce. Zlato je navic podle
 * manualu akcent, ne plocha - proto inkoustovy podklad se zlatou linkou.
 */
ul.shop_nav > li > a,
ul.shop_nav > li > a:visited {
	background-image: none;
	background-color: var(--inkoust);
	color: var(--papir);
	border-left: 3px solid var(--zlata);
	font-family: var(--pismo-nadpis);
	font-weight: 600;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-shadow: none;
}

ul.shop_nav > li > a:hover,
ul.shop_nav > li > a:active {
	background-image: none;
	background-color: var(--mosaz);
	color: var(--papir);
}

/* Podkategorie zustavaji svetle, jen v barvach papiru misto sedi. */
ul.shop_nav ul li a,
ul.shop_nav ul li a:visited {
	background-color: var(--papir);
	border-color: var(--linka);
	color: var(--inkoust);
	text-shadow: none;
}

ul.shop_nav ul li a:hover {
	background-color: #fff;
	color: var(--mosaz);
}


/* --- chrome, ktere bylo obrazkem ---------------------------------------
 * Oba prvky byly PNG o pevne sirce navazane na stary layout 1020 px
 * (1010 a 230 px), takze se pri kazde zmene sirky rozesly. Gradienty
 * a stiny umi CSS samo a roztahnou se s cimkoli.
 */

/* Nadpis v pravem sloupci - byl right_title_bg.png 230x40.
   Plny inkoustovy pruh se zlatou linkou vlevo pusobil na tmavem podkladu
   jako cizi teleso a pravidlo chyta i nadpisy psane v CMS. Misto pruhu
   proto stejny zapis jako u .h-section: displejove pismo a linka pod
   textem. */
aside h3 {
	background-image: none;
	background-color: transparent;
	border-left: 0;
	border-bottom: 1px solid var(--bg-rule);
	color: var(--zlata-tlumena);
	font-family: var(--pismo-nadpis);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0 0 8px;
	margin: 0 0 14px;
	text-shadow: none;
}



/* --- rozbalovaci seznamy ----------------------------------------------
 * Sipka byla sipka_select.png 11x6 px na pevne pozici zprava, takze se
 * u ruzne sirokych selectu rozchazela. Trojuhelnik v SVG se skaluje.
 */
select {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 6'%3E%3Cpath fill='%231A1612' d='M0 0h11L5.5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 11px 6px;
	padding-right: 30px;
	border: 1px solid var(--linka);
	border-radius: 2px;
}


/* --- tlacitka plus/minus u mnozstvi -----------------------------------
 * Byly to obrazky plus_minus.png a plus_minus_small.png (30x62 a 19x40),
 * kde se posunem pozadi prepinalo mezi + a -. Znaky uz jsou v sablone
 * jako text, takze staci obrazky zahodit a nastylovat je.
 */
.button_c,
.button_c_small {
	background-image: none;
	background-color: var(--papir);
	border: 1px solid var(--linka);
	color: var(--inkoust);
	font-family: var(--pismo-text);
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-indent: 0;
}

.button_c:hover,
.button_c_small:hover,
.button_c:active,
.button_c_small:active {
	background-image: none;
	background-color: var(--zlata);
	color: var(--inkoust);
}



/* --- tmavy web ---------------------------------------------------------
 * Podle tolarie.store je cely web inkoustovy. Zmizel modry vzorek
 * bg_pattern.png i bila plocha obsahu; papirova barva se presunula
 * z pozadi do textu.
 */
body {
	background-color: var(--bg);
	background-image: none;
	color: var(--papir);
}

.content {
	background-color: var(--plocha);
	color: var(--papir);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--papir);
}

/* Holé `a { color }` tu byvalo, ale nikdy neplatilo - `.screen a` z komponent
   ma (0,1,1) proti jeho (0,0,1) a `<body class="screen">` je na kazde strance.
   Ze stejneho duvodu tu neni `a:visited`: pseudotrida by specificitu zvedla
   na (0,1,1) a navstiveny odkaz by se obarvil jinak nez nenavstiveny. */

a:hover,
a:active,
a:focus {
	color: var(--papir);
}

/* Predchozi pravidlo ma (0,1,1), stejne jako `.tb-footer a:hover` z komponent,
   a brand se nacita pozdeji - hover v paticce by tim ztratil zlatou. Komponenty
   se needituji, takze vyjimku nese brand. */
.tb-footer a:hover,
.tb-footer a:active,
.tb-footer a:focus {
	color: var(--accent-soft);
}

hr {
	background-color: transparent;
	border-color: rgba(201, 162, 74, 0.2);
}

/* Jemne linky mezi radky a bunkami - byly sede na bilem. */
table td,
table th {
	border-color: rgba(201, 162, 74, 0.18);
}

/* Vedlejsi udaje: datum, autor, popisky. */
.date,
.author,
p.annotation {
	color: var(--text-tlumeny);
}

/* Formularova pole na tmavem. */
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=search],
input.number,
textarea,
select {
	background-color: rgba(244, 236, 219, 0.06);
	border: 1px solid rgba(201, 162, 74, 0.3);
	color: var(--papir);
}

select {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 6'%3E%3Cpath fill='%23C9A24A' d='M0 0h11L5.5 6z'/%3E%3C/svg%3E");
}

/* Podkategorie v levem sloupci uz nesmi byt svetly pruh. */
ul.shop_nav ul li a,
ul.shop_nav ul li a:visited {
	background-color: rgba(244, 236, 219, 0.04);
	background-image: none;
	border-color: rgba(201, 162, 74, 0.18);
	color: var(--papir);
}

ul.shop_nav ul li a:hover {
	background-color: rgba(201, 162, 74, 0.14);
	background-image: none;
	color: var(--zlata);
}

/* Tlacitka plus/minus a sede tlacitko na tmavem. */
.button_c,
.button_c_small {
	background-color: rgba(244, 236, 219, 0.06);
	border-color: rgba(201, 162, 74, 0.3);
	color: var(--papir);
}

/* Sipka u podkategorie - byla sipka_nav_kat.png. */
.sipka_nav_kat {
	background-image: none;
	position: relative;
}

.sipka_nav_kat::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 2px;
	margin-top: -4px;
	border: 4px solid transparent;
	border-left-color: var(--zlata);
}


/* --- tlacitko kosiku ---------------------------------------------------
 * Byval tu i cely ovladac mnozstvi (.numbers_row) a tlacitka .shop_buy -
 * ~86 radku pravidel pro markup, ktery na teto vetvi uz neexistuje.
 * Pocitadlo dnes kresli .slqty / .vqty / .qty / .cdrow__qty.
 */

span.basket_buy_btn,
span.basket_buy_btn_small {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1612' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h2.2l2.5 11.6a1.8 1.8 0 0 0 1.8 1.4h8.8a1.8 1.8 0 0 0 1.8-1.4L21 7H5.2'/%3E%3C/svg%3E");
	background-size: 17px 17px;
	background-position: center;
}


/* --- modal prihlaseni ---------------------------------------------------
 * Bylo to rozbalovaci okenko pod odkazem v hlavicce, ktere se u praveho
 * okraje nevesla na stranku. Ted je to modal uprostred obrazovky; otevira
 * a zavira ho login.js tridou `otevreno`.
 */
.loginBox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 20000;
	align-items: center;
	justify-content: center;
	background-color: rgba(8, 6, 4, 0.78);
}

.loginBox.otevreno {
	display: flex;
}

.loginForm {
	position: relative;
	box-sizing: border-box;
	width: 420px;
	max-width: calc(100vw - 40px);
	padding: 34px 40px 30px;
	background-color: var(--plocha);
	border: 1px solid rgba(201, 162, 74, 0.28);
	border-radius: 4px;
	text-align: center;
	/* Modal lezi uvnitr .log, ktery ma verzalky a Cinzel - tady je zrusime. */
	font-family: var(--pismo-text);
	text-transform: none;
	letter-spacing: normal;
	color: var(--papir);
}

/* Rohove uholniky z brand booku - osm prouzku jednim prvkem. */
.loginForm::before {
	content: "";
	position: absolute;
	inset: 10px;
	pointer-events: none;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(var(--zlata) 0 0), linear-gradient(var(--zlata) 0 0),
		linear-gradient(var(--zlata) 0 0), linear-gradient(var(--zlata) 0 0),
		linear-gradient(var(--zlata) 0 0), linear-gradient(var(--zlata) 0 0),
		linear-gradient(var(--zlata) 0 0), linear-gradient(var(--zlata) 0 0);
	background-size: 18px 1px, 1px 18px, 18px 1px, 1px 18px,
		18px 1px, 1px 18px, 18px 1px, 1px 18px;
	background-position: top left, top left, top right, top right,
		bottom left, bottom left, bottom right, bottom right;
	opacity: 0.55;
}

.login_znak {
	width: auto;
	height: 40px;
	margin: 0 auto 14px;
}

.loginForm h2 {
	margin: 0;
	font-size: 1.5em;
	color: var(--papir);
}

.login_podnadpis {
	margin: 6px 0 22px;
	color: var(--text-tlumeny);
	font-style: italic;
}

.loginForm fieldset.body {
	padding: 0;
	text-align: left;
}

.loginForm .body fieldset {
	margin-bottom: 16px;
}

.loginForm label {
	float: none;
	margin: 0 0 6px;
	color: var(--zlata);
	font-family: var(--pismo-nadpis);
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.loginForm input[type=text],
.loginForm input[type=password] {
	box-sizing: border-box;
	width: 100%;
	height: 42px;
	padding: 0 12px;
	background-color: rgba(244, 236, 219, 0.05);
	border: 1px solid rgba(201, 162, 74, 0.3);
	border-radius: 3px;
	color: var(--papir);
	font-family: var(--pismo-text);
}

.loginForm input[type=text]:focus,
.loginForm input[type=password]:focus {
	border-color: var(--zlata);
	outline: none;
}

/* Tlacitko pres celou sirku panelu jako na herne. */
.loginForm .login {
	float: none;
	width: 100%;
	margin: 4px 0 0;
	padding: 12px 16px;
	background-color: var(--zlata);
	border: 0;
	border-radius: 3px;
	color: var(--inkoust);
	font-family: var(--pismo-nadpis);
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.loginForm .login:hover {
	background-color: var(--mosaz);
	color: var(--papir);
}

.loginForm > span {
	display: block;
	padding-top: 16px;
	text-align: center;
}

.loginForm span a,
.logout a,
.logout a:visited {
	color: var(--zlata);
}


/* Zaskrtavatko melo natvrdo bile pozadi, accent-color pak nemel co obarvit. */
input[type=checkbox] {
	background-color: transparent;
}


/* --- bublinove hlasky ---------------------------------------------------
 * Nahrada za alert(), ktery zastavoval stranku a vypadal jako chyba
 * prohlizece. Vysune se vpravo dole a sama zmizi; kliknutim driv.
 */
.hlasky {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 30000;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-end;
	pointer-events: none;
}

.hlaska {
	max-width: 340px;
	padding: 14px 18px;
	background-color: var(--plocha);
	border: 1px solid rgba(201, 162, 74, 0.3);
	border-left: 3px solid var(--zlata);
	border-radius: 3px;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
	color: var(--papir);
	font-family: var(--pismo-text);
	line-height: 1.45;
	cursor: pointer;
	pointer-events: auto;
	animation: hlaska-prichod 0.22s ease-out both;
}

.hlaska--chyba {
	border-left-color: var(--cinnabar);
}

.hlaska.odchazi {
	animation: hlaska-odchod 0.22s ease-in both;
}

@keyframes hlaska-prichod {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes hlaska-odchod {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(8px); }
}

/* Odznak u kosiku pri zmene poctu kratce cukne, at je zmena videt. */
@keyframes kosik-cuk {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

.tb-icon-btn__badge.cuk {
	animation: kosik-cuk 0.35s ease-out;
}

/* Prazdny odznak se nekresli, at u prazdneho kosiku nesviti nula. */
.tb-icon-btn__badge:empty {
	display: none;
}


/* --- srovnani kostry s mrizkou ------------------------------------------
 * Hlavicka a paticka z Portara jdou pres celou sirku, nase mrizka ma
 * pevnych 1420 px (.container_20). Aby loga a odkazy sedely na stejnou
 * osu jako obsah, omezime vnitrek kostry na stejnou sirku. Padding
 * jednotlivych pruhu se pripocitava, at vnitrni obsah konci presne
 * na 1420 px.
 */
.tb-header__strip-inner,
.tb-header__main {
	max-width: calc(1420px + 64px);
	margin-left: auto;
	margin-right: auto;
}

.tb-header__nav-list {
	max-width: 1420px;
	margin-left: auto;
	margin-right: auto;
}

.tb-footer__grid,
.tb-footer__bottom {
	max-width: 1420px;
}

/* Predloha ma hlavicku na z-index 5, protoze jeji obsah zadny nenastavuje.
   Nase stare CSS ano (nav ul melo 200), proto ji zvedame nad nej. Modal
   prihlaseni je na 20000, ten zustava nahore. */
#header.tb-header {
	z-index: 1000;
	/* Stara header.css dava kazdemu <header> padding 20px 0 15px. Nova
	   hlavicka si odsazeni resi uvnitr (.tb-header__main), takze to jen
	   pridavalo 35 px vysky navic. */
	padding: 0;
}

/* Ikony z partialu core/ikona jsou 16x16; predloha je v menu kresli mensi. */
.tb-nav-item__ic svg,
.tb-mega__item svg {
	width: 12px;
	height: 12px;
}

.tb-icon-btn svg,
.tb-header__search-ic svg {
	width: 18px;
	height: 18px;
}


/* --- drobeckova navigace ------------------------------------------------
 * Prevzato z 07-listing-detail.css. Pouziva ji vypis, detail i ucet,
 * proto je tady ve sdilene vrstve a ne trikrat v sekcnich souborech.
 */
.crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--fg-mute);
}

.crumbs a {
	color: var(--fg-mute);
}

.crumbs a:hover {
	color: var(--accent-deep);
}

.crumbs span {
	color: var(--fg);
}

.crumbs svg {
	width: 12px;
	height: 12px;
	opacity: 0.4;
}