/* Věrnostní sleva na další nákup (page-vernostni-sleva.php, CVIII) — detail produktu s volbou 1–6 ks
   (plátno „AŠVA — Věrnostní sleva jako detail produktu“, varianta A, David 23. 10.). Galerie, nadpis
   a box jsou z detailu produktu (pages/produkt.css se načítá i tady); tady jsou dlaždice počtu kusů,
   souhrn ceny nad tlačítkem a pruh návštěvy bez kódu. */

/* Sloupce se skládají pod sebe dřív než na detailu produktu: dlaždice ve třech sloupcích potřebují
   šířku, v úzkém pravém sloupci by čtyřmístná cena přetekla. */
.as-vern-detail .as-galerie,
.as-vern-detail .as-pdp__info { flex-basis: 420px; }

/* Pruh bez kódu z e-mailu (parts/vernost-bez-kodu.php). S kódem kreslí pruh akce parts/akce.css. */
.as-vern-pas {
	background: var(--as-merunka-svetla);
	color: var(--as-inkoust);
	border-bottom: 1px solid var(--as-merunka);
	font-size: 14.5px;
	line-height: 1.5;
	text-align: center;
}
.as-vern-pas__in { display: block; max-width: var(--as-sirka); margin: 0 auto; padding: 13px var(--as-okraj); box-sizing: border-box; }

/* ===== Volba počtu kusů: 3 × 2 dlaždice ===== */
.as-vern-pocty { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.as-vern-pocty__nadpis { padding: 0; font-family: var(--as-pismo-nadpis); font-size: 19px; font-weight: 800; color: var(--as-inkoust); }
.as-vern-pocty__napoveda { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--as-text-2); }
.as-vern-pocty__seznam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }

.as-vern-pocet {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 16px 14px 12px;
	border: 2px solid var(--as-levandule-tmava);
	border-radius: 16px;
	background: rgba(255, 255, 255, .7);
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.as-vern-pocet:hover { border-color: var(--as-inkoust); }
/* Vybraná dlaždice podbarvená jako vybraná velikost na detailu produktu (.as-velikost.is-vybrano, David 23. 10.). */
.as-vern-pocet.is-vybrano { border-color: var(--as-inkoust); background: var(--as-merunka-svetla); box-shadow: 4px 4px 0 var(--as-merunka); }
.as-vern-pocet:focus-within { outline: 2px solid var(--as-inkoust); outline-offset: 2px; }
/* Rámeček fokusu jen z klávesnice — po kliknutí myší by zvolená dlaždice měla dvojitý okraj. */
@supports selector(:has(*)) {
	.as-vern-pocet:focus-within { outline: 0; }
	.as-vern-pocet:has(.as-vern-pocet__radio:focus-visible) { outline: 2px solid var(--as-inkoust); outline-offset: 2px; }
}
.as-vern-pocet__radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.as-vern-pocet__odznak {
	position: absolute;
	top: -10px;
	right: 12px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--as-terakota);
	color: var(--as-bila);
	box-shadow: 0 2px 0 var(--as-terakota-tmava);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	white-space: nowrap;
}
.as-vern-pocet__hlava { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.as-vern-pocet__ks { font-family: var(--as-pismo-nadpis); font-size: 25px; font-weight: 800; line-height: 1.1; color: var(--as-inkoust); }
.as-vern-pocet__fajfka { visibility: hidden; }
.as-vern-pocet.is-vybrano .as-vern-pocet__fajfka { visibility: visible; }
.as-vern-pocet__zasoba { margin-top: 2px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--as-text-2); }
.as-vern-pocet__popisek { margin-top: 10px; font-size: 12px; font-weight: 800; line-height: 1.3; color: var(--as-terakota-tmava); }
.as-vern-pocet__cena { margin-top: 10px; font-size: 19px; font-weight: 800; line-height: 1.25; white-space: nowrap; color: var(--as-inkoust); }
.as-vern-pocet__popisek + .as-vern-pocet__cena { margin-top: 0; }
.as-vern-pocet__cena.is-sleva { color: var(--as-terakota); }
.as-vern-pocet__doprava { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--as-text-2); }
.as-vern-pocet__doprava.is-zdarma { color: var(--as-zelena-text); }

/* ===== Souhrn nad tlačítkem: cena (vlevo) a sklad s doručením (vpravo), pod nimi počet a úspora ===== */
.as-vern-souhrn__hlava { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.as-vern-souhrn__cena { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.as-vern-souhrn__bezna { font-size: 16px; font-weight: 600; color: var(--as-preskrtnuta); }
/* „z toho 1 ks zdarma“ u množstevní ceny bez kódu (CIX). */
.as-vern-souhrn__zdarma { font-weight: 800; color: var(--as-zelena-text); }
.as-vern-souhrn__dostupnost { margin-left: auto; }
.as-vern-souhrn__info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--as-text); }
.as-vern-souhrn__cena[hidden],
.as-vern-souhrn__info[hidden],
.as-vern-souhrn__cta [hidden] { display: none; }
.as-vern-souhrn__cta { width: 100%; margin-top: 18px; }

/* ===== Mobil ===== */
@media (max-width: 768px) {
	.as-vern-pas { font-size: 13px; text-align: left; }
	.as-vern-pas__in { padding: 11px 16px; }

	.as-vern-pocty__nadpis { font-size: 18px; }
	.as-vern-pocty__napoveda { font-size: 12.5px; }
	.as-vern-pocty__seznam { gap: 12px 10px; margin-top: 14px; }
	.as-vern-pocet { padding: 13px 8px 10px; border-radius: 14px; }
	.as-vern-pocet__odznak { top: -9px; right: 8px; padding: 2px 7px; font-size: 11px; }
	.as-vern-pocet__ks { font-size: 21px; }
	/* „3 + 1 ks“ (70 px při 21 px) se vedle místa pro fajfku vejde až od 17 px — jinak se láme a cena
	   dlaždice sedí níž než u sousedů. Výška řádku jako u 21 px, ať cena drží linku. Pod 360 px se zalomí i tak. */
	.as-vern-pocet__ks--plus { font-size: 17px; line-height: 23.1px; }
	.as-vern-pocet__fajfka { width: 18px; height: 18px; }
	.as-vern-pocet__fajfka svg { width: 9px; height: 9px; }
	.as-vern-pocet__zasoba { font-size: 11.5px; }
	.as-vern-pocet__popisek { margin-top: 8px; font-size: 10px; letter-spacing: -.01em; white-space: nowrap; }
	.as-vern-pocet__cena { margin-top: 8px; font-size: 18px; }
	.as-vern-pocet__doprava { font-size: 11px; }

	.as-vern-souhrn__hlava { display: block; }
	.as-vern-souhrn .as-pdp__castka { font-size: 32px; }
	.as-vern-souhrn__dostupnost { margin: 8px 0 0; }
	.as-vern-souhrn__info { font-size: 13px; }
}