/*
 * @nazev  Dětský pokoj
 * @poradi 2
 * @popis  Teplá a veselá pro rodiče, kteří hledají dárek: borůvková modrá, meruňková a mátová na papírově krémové, kulaté tvary, obálky jako polaroidy.
 *
 * Nasazení: soubor do /user/documents/ (SFTP), v Záhlaví jen <link>, varianta-b-detsky-pokoj.js do Zápatí přes <script src>.
 * Písma: Fraunces (nadpisy, měkký tvar SOFT) a Nunito (text a ovládání).
 * Riziko: snadno sklouzne k lacinému vzhledu. Proto tři barvy, žádné stíny ani přechody, ikony jednoduché a jednobarevné.
 *
 * Pravidla, která drží celou variantu pohromadě:
 *  Rádiusy jen ze škály --d-r-*: velké plochy 28, karty a boxy 18, pole a záložky 10, rámeček polaroidu 6.
 *  Pilulka (999px) jen pro tlačítka, štítky a množství.
 *  Výšky ovládání: tlačítko 44, velké tlačítko 52, tlačítko v dlaždici 40, pole formuláře 44.
 *  Mezery z násobků 8: 8, 16, 24, 32, 48, 64. Okraj stránky 20 px všude, mezera mezi dlaždicemi 16 px.
 *  Úvod, dlaždice, výhody i newsletter začínají na stejné svislé linii jako logo.
 */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,500..800,100&family=Nunito:wght@400;600;800&display=swap");

/* Barvy, rádiusy a písma přes proměnné šablony. Všechny stránky.
   Předchozí paleta (žlutá a tyrkysová): hlavni #13807f, hlavni-tmava #0d5f5e, akcent #ffd45c, akcent-svetly #ffecb0. */
:root {
  --d-krem: #fdf6ee;          /* papír */
  --d-bila: #ffffff;
  --d-hlavni: #3346a0;        /* borůvková, bílý text 8,1:1 */
  --d-hlavni-tmava: #26357f;
  --d-akcent: #f7b199;        /* meruňková, inkoust na ní 9:1 */
  --d-akcent-svetly: #fde4d8;
  --d-mata: #d4ece2;
  --d-inkoust: #262a3f;
  --d-inkoust-2: #545a72;
  --d-linka: #efdfcf;

  --d-r-l: 28px;
  --d-r-m: 18px;
  --d-r-s: 10px;
  --d-r-xs: 6px;
  --d-okraj: 20px;

  --d-nadpis: "Fraunces", Georgia, serif;
  --d-text: "Nunito", "Segoe UI", system-ui, sans-serif;

  --template-font: "Nunito";
  --template-headings-font: "Fraunces";
  --color-primary: var(--d-hlavni);
  --color-primary-hover: var(--d-hlavni-tmava);
  --color-secondary: var(--d-hlavni);
  --color-secondary-hover: var(--d-hlavni-tmava);
  --color-tertiary: var(--d-akcent-svetly);
  --color-tertiary-hover: var(--d-akcent);
  --color-header-background: var(--d-krem);
  --colors-surface-primary: var(--d-krem);
  --colors-surface-secondary: var(--d-akcent-svetly);
  --colors-surface-white: var(--d-bila);
  --colors-foregrounds-headlines-primary: var(--d-inkoust);
  --colors-foregrounds-content-primary: var(--d-inkoust);
  --colors-foregrounds-content-primary-dark: var(--d-inkoust);
  --colors-foregrounds-content-secondary: var(--d-inkoust-2);
  --colors-foregrounds-content-tertiary: var(--d-inkoust-2);
  --colors-foregrounds-borders-primary: var(--d-inkoust-2);
  --colors-foregrounds-borders-secondary: var(--d-linka);
  --colors-state-success: var(--d-hlavni);
  --colors-tags-turquoise: var(--d-hlavni);
  --colors-focus-primary: var(--d-hlavni);
}
@media (max-width: 767.98px) { :root { --d-r-l: 22px; --d-r-m: 16px; } }

/* Světlá krémová hlavička. Všechny stránky. */
html.header-background-dark {
  --_color-header-text: var(--d-inkoust);
  --_color-header-contrast-text: var(--d-bila);
  --_color-header-contrast-bg: var(--d-hlavni);
  --_color-header-menu-border: transparent;
  --_color-header-dropdown-border: var(--d-linka);
  --_color-header-button-border: transparent;
}
body.template-12 { background: var(--d-krem); color: var(--d-inkoust); font-family: var(--d-text); font-size: 16px; }
.template-12 h1, .template-12 h2, .template-12 h3, .template-12 .h1, .template-12 .h2, .template-12 .h3, .template-12 .h4 {
  font-family: var(--d-nadpis);
  font-variation-settings: "SOFT" 100;
  font-weight: 700;
  color: var(--d-inkoust);
  letter-spacing: -.01em;
}
.template-12 a { color: var(--d-hlavni); text-underline-offset: 3px; }
.template-12 a:hover { color: var(--d-hlavni-tmava); }
/* Dostupnost „Skladem“ píše Shoptet inline zelenou (#009901, v dlaždici bez mezery, na detailu s mezerou),
   ta se k paletě nehodí. Všechny stránky. */
.template-12 [style*="#009901"] { color: var(--d-hlavni) !important; } /* !important: přebíjí inline styl Shoptetu */

/* Hlavička: logo zarovnané s obsahem. Kontejner hlavičky má do 1458 px šířku skoro celé stránky a žádný okraj,
   logo by tak začínalo 4 px od kraje, obsah 20 px. Na mobilu má logo 10 px vlastního odsazení. Všechny stránky. */
.template-12 #header { background: var(--d-krem); border-bottom: 0; }
.template-12 #header .container { padding-left: 16px; padding-right: 16px; }
@media (min-width: 1459px) { .template-12 #header .container { padding-left: 0; padding-right: 0; } }
@media (max-width: 991.98px) { .template-12 #header .container { padding-left: 10px; padding-right: 10px; } }
.template-12 #header .site-name a.text-logo { font: 800 30px/1 var(--d-nadpis); font-variation-settings: "SOFT" 100; color: var(--d-hlavni); }
.template-12 #header .site-name a.text-logo .motto { font: 600 13px/1.2 var(--d-text); color: var(--d-inkoust-2); margin-top: 4px; }
.template-12 .navigation-in > ul > li > a { font: 800 15px/1 var(--d-text); }
.template-12 .navigation-in ul.menu-level-2 { background: var(--d-bila); border: 2px solid var(--d-linka); border-radius: 0 0 var(--d-r-m) var(--d-r-m); }
.template-12 #header .navigation-in, .template-12 #header .navigation-buttons > a, .template-12 #header .navigation-buttons > button, .template-12 #header .menu-helper { background: transparent; }

/* Hover v menu a u ikon hlavičky: šablona má odkazy vysoké jako celá hlavička (80 px), takže podbarvení
   by byla obří pilulka a kruh. Průhledný rámeček zmenší podbarvenou plochu na 36 px u menu a 44 px u ikon,
   výška hlavičky ani poloha rozbalovacího menu se nemění. Jen desktop, mobilní hlavička má ikony 40 px. */
@media (min-width: 992px) {
  .template-12 .navigation-in > ul > li > a {
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    padding: 10px 16px;
    background-clip: padding-box;
    border-radius: 999px;
  }
  .template-12 .navigation-in > ul > li > a:hover, .template-12 .navigation-in > ul > li.exp > a { color: var(--d-hlavni-tmava); background-color: var(--d-akcent-svetly); }
}
@media (min-width: 992px) {
  .template-12 #header .navigation-buttons > a, .template-12 #header .navigation-buttons > button {
    border: 18px solid transparent;
    background-clip: padding-box;
    border-radius: 50%;
    line-height: 44px; /* ikona je ::before se zděděnou výškou řádku, bez toho by po zmenšení sjela dolů */
  }
  .template-12 #header .navigation-buttons > a::before, .template-12 #header .navigation-buttons > button::before { line-height: 44px; }
  .template-12 #header .navigation-buttons > a:hover, .template-12 #header .navigation-buttons > button:hover { background-color: var(--d-akcent-svetly); }
}

/* Tlačítka: pilulky s pevnou výškou, text na střed, bez verzálek. Všechny stránky. */
.template-12 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font: 800 15px/1.1 var(--d-text);
  text-transform: none;
  letter-spacing: 0;
}
.template-12 .btn.btn-lg { min-height: 52px; padding: 0 28px; font-size: 16px; }
.template-12 .btn.btn-cart, .template-12 .btn.btn-conversion, .template-12 .btn.btn-primary { background: var(--d-hlavni); border-color: var(--d-hlavni); color: var(--d-bila); }
.template-12 .btn.btn-cart:hover, .template-12 .btn.btn-conversion:hover, .template-12 .btn.btn-primary:hover { background: var(--d-hlavni-tmava); border-color: var(--d-hlavni-tmava); color: var(--d-bila); }

/* Pole formulářů: 44 px, stejný rádius všude (i newsletter, kterému šablona rádius nedává). Všechny stránky. */
.template-12 .form-control, .template-12 select,
.template-12 input[type="text"], .template-12 input[type="email"], .template-12 input[type="search"], .template-12 input[type="tel"], .template-12 textarea {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--d-r-s);
  border: 2px solid var(--d-linka);
  background: var(--d-bila);
  color: var(--d-inkoust);
}
.template-12 textarea { min-height: 96px; }

/* Množství: pilulka stejně vysoká jako vedlejší tlačítko, oddělovače v barvě linky. Detail, košík. */
.template-12 .quantity { box-sizing: border-box; height: 44px; border-radius: 999px; overflow: hidden; border: 2px solid var(--d-linka); background: var(--d-bila); }
.template-12 .quantity input, .template-12 .quantity button { height: 40px; }
.template-12 .quantity input { min-height: 0; border: 0; border-radius: 0; padding: 0; }
.template-12 .quantity button { border-color: var(--d-linka); }
.template-12 .quantity button:hover { background: var(--d-akcent-svetly); }

/* Záložky: nahoře zaoblené, dole rovné. Linka pod nimi je pozadí řádku (ne rámeček), neaktivní záložky
   končí nad ní, aktivní bílá sahá až dolů a linku přeruší, takže přechází do obsahu jako karta v šanonu.
   Díky tomu může řádek na mobilu vodorovně posouvat, rámeček by se při ořezu schoval.
   Řazení v kategorii, záložky na detailu, kroky košíku. */
.template-12 .listSorting__controls,
.template-12 .p-detail-tabs,
.template-12 .cart-header {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  border: 0;
  background: linear-gradient(var(--d-linka), var(--d-linka)) left bottom / 100% 2px no-repeat;
}
.template-12 .listSorting { flex: 1 1 auto; } /* linka přes celou šířku, ne jen pod záložkami */
.template-12 .listSorting__controls li, .template-12 .p-detail-tabs .shp-tab { margin: 0; flex: none; }
.template-12 .p-detail-tabs-wrapper .shp-tabs-row, .template-12 .category-header { border: 0; }
/* Obsah záložky na detailu je bílá karta, na kterou aktivní záložka navazuje (levý horní roh rovný). Detail. */
.template-12 .p-detail-tabs-wrapper .shp-tabs-row { margin-bottom: 0; }
.template-12 .p-detail-tabs-wrapper .shp-tabs-holder { display: flex; } /* bez řádkové mezery pod záložkami */
.template-12 .p-detail-tabs-wrapper .tab-content { background: var(--d-bila); border-radius: 0 var(--d-r-m) var(--d-r-m) var(--d-r-m); padding: 24px 28px; margin-bottom: 48px; }
@media (max-width: 767.98px) { .template-12 .p-detail-tabs-wrapper .tab-content { padding: 20px 16px; border-radius: var(--d-r-m); } } /* na mobilu záložky nezačínají přesně na hraně karty */
.template-12 .listSorting__control,
.template-12 .p-detail-tabs .shp-tab-link,
.template-12 .cart-header .step {
  display: block;
  border: 2px solid var(--d-linka);
  border-bottom: 0;
  border-radius: var(--d-r-s) var(--d-r-s) 0 0;
  background: var(--d-akcent-svetly);
  color: var(--d-inkoust);
  font: 800 15px/1.2 var(--d-text);
  white-space: nowrap;
  padding: 12px 20px;
  margin: 0 0 2px;
}
.template-12 .listSorting__control:hover, .template-12 .p-detail-tabs .shp-tab-link:hover { background: var(--d-akcent); color: var(--d-inkoust); }
.template-12 .listSorting__control--current,
.template-12 .p-detail-tabs .active .shp-tab-link,
.template-12 .cart-header .step.active {
  background: var(--d-bila);
  color: var(--d-hlavni);
  margin-bottom: 0;
  padding-bottom: 14px;
}
.template-12 .listSorting__control--current:hover, .template-12 .p-detail-tabs .active .shp-tab-link:hover { background: var(--d-bila); color: var(--d-hlavni); }
@media (max-width: 767.98px) {
  .template-12 .listSorting__controls, .template-12 .p-detail-tabs, .template-12 .cart-header { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .template-12 .cart-header .step { flex: none; }
  .template-12 .listSorting__control, .template-12 .p-detail-tabs .shp-tab-link, .template-12 .cart-header .step { padding: 10px 14px; font-size: 14px; }
  .template-12 .listSorting__control--current, .template-12 .p-detail-tabs .active .shp-tab-link, .template-12 .cart-header .step.active { padding-bottom: 12px; }
}

/* Příznak Tip jako meruňková bublina s hvězdičkou. Dlaždice a detail. */
.template-12 .flags-default .flag.flag-tip {
  background: var(--d-akcent);
  color: var(--d-inkoust);
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  font: 800 13px/1 var(--d-text);
  text-transform: none;
  width: auto;
  max-width: none;
  white-space: nowrap;
}
.template-12 .flags-default .flag.flag-tip::before { content: "★ "; position: static; display: inline; width: auto; height: auto; padding: 0; transform: none; background: none; }
.template-12 .flags-default .flag.flag-tip::after { display: none; }

/* Dlaždice: bílá karta, obálka v rámu 2:3 lehce natočená jako fotka na nástěnce, při najetí se srovná.
   Karta je sloupec: název, dostupnost, popis, a cena s tlačítkem vždy dole, takže tlačítka v řadě
   sedí na jedné výšce. Rámec má pevný poměr, druhá fotka dlaždici neposune. Homepage, kategorie. */
/* Mřížka dlaždic: šablona přidává na homepage další okraj 20 px a sloupcům 13 px, takže dlaždice
   začínaly jinde než úvod a výhody. Teď mezera 16 px a vnější hrana na okraji obsahu. Homepage, kategorie. */
.template-12 .homepage-tabs-wrapper #tab-content { padding-left: 0; padding-right: 0; }
.template-12 .products-block { margin-left: -8px; margin-right: -8px; }
.template-12 .products-block > div.product { padding: 8px; } /* .product: šablona má na mobilu silnější pravidlo s 5 px */
.template-12 .products-block > div .p {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--d-bila);
  border: 0; /* bez rámečku karty: rámeček má jen polaroid, jinak by byl box v boxu */
  border-radius: var(--d-r-m);
  padding: 24px 16px;
  text-align: center;
}
.template-12 .products-block > div .p .p-in { display: flex; flex-direction: column; flex: 1 1 auto; }
.template-12 .products-block > div .p .p-bottom { display: flex; flex-direction: column; flex: 1 1 auto; }
.template-12 .products-block > div .p .p-bottom > [data-micro="offer"] { display: flex; flex-direction: column; flex: 1 1 auto; } /* obal ceny, tlačítka i popisu */
.template-12 .products-block > div .p .p-desc { order: -1; }
.template-12 .products-block > div .p .prices { margin-top: auto; }
.template-12 .products-block > div .p:hover > a.image { border-color: var(--d-akcent); }
.template-12 .products-block > div .p > a.image {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  width: 78%;
  margin: 0 auto 24px;
  padding: 8px 8px 30px;
  background: var(--d-bila);
  border: 2px solid var(--d-linka);
  border-radius: var(--d-r-xs);
  transform: rotate(-2deg);
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
.template-12 .products-block > div:nth-child(even) .p > a.image { transform: rotate(2deg); }
.template-12 .products-block > div .p:hover > a.image { transform: rotate(0) translateY(-4px); }
.template-12 .products-block > div .p > a.image img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 3px; }
.template-12 .products-block > div .p .flags-default { top: -8px; left: -10px; }
.template-12 .products-block > div .p .p-code { display: none; }
.template-12 .products-block > div .p .name, .template-12 .products-block > div .p .p-bottom { padding-left: 0; padding-right: 0; }
.template-12 .products-block > div .p .name {
  font: 700 20px/1.2 var(--d-nadpis);
  font-variation-settings: "SOFT" 100;
  height: auto;
  min-height: 0;
  color: var(--d-inkoust);
  text-decoration: none;
}
.template-12 .products-block > div .p .availability { font: 600 13px/1.2 var(--d-text); margin-top: 8px; }
.template-12 .products-block > div .p .price-final strong { font: 800 22px/1 var(--d-text); color: var(--d-inkoust); }
.template-12 .products-block > div .p .prices { padding-top: 16px; }
.template-12 .products-block > div .p .p-desc { font: 400 14px/1.45 var(--d-text); color: var(--d-inkoust-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; padding: 0; }
.template-12 .products-block > div .p .p-tools { justify-content: center; padding: 16px 0 0; }
.template-12 .products-block > div .p .btn { min-height: 40px; padding: 0 18px; font-size: 14px; }

/* Stav knihy jako lístek pod obálkou na „polaroidu“ (vkládá ho JS z textu „Stav: …“). Dlaždice a detail. */
.d-stitek {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font: 800 12px/1 var(--d-text);
  color: var(--d-hlavni);
  pointer-events: none;
}
.d-stitek svg { width: 14px; height: 14px; flex: none; }

/* Záložky na homepage: zobrazuje se jen jedna (Tipy), proto ne jako záložka, ale jako nadpis
   s meruňkovou vlnovkou. Novinky skryté. Homepage. */
.template-12 #homepage-tabs .shp-tab:has(> a[href="#homepageProducts2"]) { display: none; }
.template-12 .homepage-tabs-wrapper, .template-12 .homepage-tabs-wrapper .shp-tabs-row, .template-12 .homepage-tabs-wrapper .shp-tabs-holder { border: 0; }
.template-12 .homepage-tabs-wrapper .navigation-btn { display: none !important; } /* !important: skript šablony píše display inline stylem */
.template-12 #homepage-tabs { display: flex; justify-content: center; border: 0; }
.template-12 #homepage-tabs .shp-tab-link, .template-12 #homepage-tabs .active .shp-tab-link {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 4px 8px;
  font: 800 44px/1.1 var(--d-nadpis);
  font-variation-settings: "SOFT" 100;
  color: var(--d-inkoust);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--d-akcent);
  text-decoration-thickness: 4px;
  text-underline-offset: 10px;
  margin-bottom: 32px;
}
.template-12 .homepage-group-title { display: none; }

/* Úvodní pokoj na homepage (staví ho JS místo karuselu a uvítacího textu):
   meruňková plocha s vlnou dole, nadpis, obálky jako polaroidy a jednoduché kreslené ikony.
   Fotky zůstávají uvnitř plochy, vlna je ořízne. Homepage. */
.d-ma-uvod .homepage-texts-wrapper .welcome-wrapper { display: none; }
.d-uvod {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  max-width: 1418px; /* stejná šířka jako obsah pod ním, na širokých monitorech by jinak šel od kraje ke kraji */
  margin: 16px auto 64px;
  padding: 64px 56px 88px;
  background: var(--d-akcent);
  border-radius: var(--d-r-l);
  overflow: hidden;
  /* Vlna dole je maska samotné plochy (horní část plná, spodních 46 px vlnka). Krémový překryv by na hranách
     nechal vyhlazený obrys a musel by znát barvu pozadí. */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 45px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V26Q105 46 90 26T60 26T30 26T0 26Z'/%3E%3C/svg%3E") left bottom / 240px 46px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 45px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V26Q105 46 90 26T60 26T30 26T0 26Z'/%3E%3C/svg%3E") left bottom / 240px 46px repeat-x;
}
.d-uvod-stitek { display: inline-block; padding: 8px 16px; background: var(--d-bila); border-radius: 999px; font: 800 14px/1 var(--d-text); color: var(--d-hlavni); margin-bottom: 24px; }
.d-uvod-nadpis { margin: 0; font: 800 clamp(40px, 5vw, 64px)/1.02 var(--d-nadpis); font-variation-settings: "SOFT" 100; color: var(--d-inkoust); letter-spacing: -.02em; }
.d-uvod-nadpis em { font-style: normal; color: var(--d-hlavni); }
.d-uvod-text p { font: 600 18px/1.5 var(--d-text); color: var(--d-inkoust); margin: 24px 0 0; max-width: 30em; }
.d-uvod-text p + p { font-size: 14px; font-weight: 400; margin-top: 8px; }
.d-uvod-cta {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  margin-top: 32px;
  padding: 0 28px;
  background: var(--d-hlavni);
  color: var(--d-bila) !important; /* !important: přebíjí barvu odkazů šablony */
  border-radius: 999px;
  font: 800 16px/1 var(--d-text);
  text-decoration: none;
  transition: background-color .2s ease;
}
.d-uvod-cta:hover { background: var(--d-hlavni-tmava); }
.d-uvod-fotky { position: relative; height: 400px; }
.d-foto {
  position: absolute;
  width: 40%;
  aspect-ratio: 2 / 3;
  padding: 10px 10px 30px;
  background: var(--d-bila);
  border-radius: var(--d-r-xs);
  transition: transform .4s cubic-bezier(.3, 1.4, .5, 1);
}
.d-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; }
.d-foto:nth-of-type(1) { left: 4%; top: 40px; transform: rotate(-8deg); }
.d-foto:nth-of-type(2) { left: 31%; top: 0; transform: rotate(3deg); z-index: 2; }
.d-foto:nth-of-type(3) { right: 2%; top: 56px; transform: rotate(9deg); }
.d-foto:hover { transform: rotate(0) translateY(-6px); z-index: 3; }
.d-ikona { position: absolute; color: var(--d-inkoust); animation: d-vznaseni 6s ease-in-out infinite; }
.d-ikona svg { display: block; width: 100%; height: 100%; }
.d-ikona-hvezda { width: 40px; height: 40px; top: 24px; right: 44%; }
.d-ikona-mesic { width: 48px; height: 48px; top: 16px; right: 16px; animation-delay: -2s; color: var(--d-bila); }
.d-ikona-mrak { width: 84px; height: 50px; bottom: 24px; left: -8px; animation-delay: -4s; color: var(--d-bila); }
@keyframes d-vznaseni { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .d-ikona { animation: none; } .d-foto, .template-12 .products-block > div .p > a.image { transition: none; } }

/* Výhody: čtyři bílé karty s jednoduchou ikonou v kruhu (na tabletu dvě, na mobilu pod sebou).
   Šablona jim dává třetinovou šířku, čtvrtá by jinak spadla na další řádek sama. Homepage. */
.template-12 .footer-banners { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 64px 0 48px; }
.template-12 .footer-banners::before, .template-12 .footer-banners::after { display: none; } /* clearfix řádku Bootstrapu by v mřížce zabral buňku */
.template-12 .footer-banners .footer-banner { width: auto; max-width: none; flex: none; padding: 24px; background: var(--d-bila); border: 0; border-radius: var(--d-r-m); text-align: center; }
.template-12 .footer-banners .footer-banner::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--d-akcent-svetly) center / 28px 28px no-repeat;
}
/* Ikony: lupa (popis vad), fotoaparát (skutečné fotky), bublina (píšu sám), balíček (balení). */
.template-12 .footer-banners .footer-banner:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233346a0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E"); }
.template-12 .footer-banners .footer-banner:nth-child(2)::before { background-color: var(--d-mata); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233346a0' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 8h4l2-3h6l2 3h4v11H3z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E"); }
.template-12 .footer-banners .footer-banner:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233346a0' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H10l-5 4v-4H4z'/%3E%3C/svg%3E"); }
.template-12 .footer-banners .footer-banner:nth-child(4)::before { background-color: var(--d-mata); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233346a0' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-4 9 4v9l-9 4-9-4z'/%3E%3Cpath d='M3 8l9 4 9-4M12 12v9'/%3E%3C/svg%3E"); }
.template-12 .footer-banners .footer-banner strong { display: block; font: 700 20px/1.2 var(--d-nadpis); font-variation-settings: "SOFT" 100; margin-bottom: 8px; }
.template-12 .footer-banners .footer-banner p { font: 400 15px/1.45 var(--d-text); color: var(--d-inkoust-2); margin: 0; }
@media (max-width: 991.98px) { .template-12 .footer-banners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .template-12 .footer-banners { grid-template-columns: 1fr; margin-top: 48px; } }

/* Platba kartou se nenabízí: box „Přijímáme online platby“ s logy karet pryč. Postranní panel. */
.template-12 .box-onlinePayments { display: none; }

/* Kategorie: nadpis s meruňkovou vlnovkou, bílé boxy bez rámečku. Kategorie. */
.template-12 .category-title { font: 800 clamp(38px, 5vw, 56px)/1.05 var(--d-nadpis); font-variation-settings: "SOFT" 100; text-decoration: underline wavy var(--d-akcent) 4px; text-underline-offset: 12px; margin-bottom: 32px; }
.template-12 .category-top { background: transparent; border: 0; padding: 0; } /* obal nadpisu a boxu, bez rámečku, jinak box v boxu */
.template-12 .products-top-wrapper { background: var(--d-bila); border: 0; border-radius: var(--d-r-m); padding: 24px 24px 16px; margin: 0 0 32px; }
.template-12 .sidebar .box { background: var(--d-bila); border: 0; border-radius: var(--d-r-m); padding: 16px 20px; margin-bottom: 16px; }
.template-12 .sidebar h4, .template-12 .sidebar .topic { font: 700 20px/1.1 var(--d-nadpis); text-transform: none; }

/* Detail: obálka jako polaroid, velká cena, lístek se stavem u dostupnosti.
   Na mobilu menší obálka, aby cena, dostupnost a stav byly vidět bez posouvání. Detail. */
.template-12 .p-image-wrapper .p-image { background: var(--d-bila); border: 0; border-radius: var(--d-r-m); padding: 24px; }
.template-12 .p-image-wrapper .p-image img { aspect-ratio: 2 / 3; object-fit: cover; height: auto; max-height: 640px; width: auto; max-width: 100%; margin: 0 auto; display: block; border-radius: var(--d-r-xs); }
.template-12 .p-thumbnail { border-radius: var(--d-r-s); overflow: hidden; border: 2px solid var(--d-linka); }
.template-12 .p-thumbnail.highlighted { border-color: var(--d-hlavni); }
.template-12 .p-detail .stars-wrapper { display: none; }
.template-12 .p-detail-inner-header h1 { font: 800 clamp(36px, 4.4vw, 52px)/1.05 var(--d-nadpis); font-variation-settings: "SOFT" 100; }
.template-12 .p-short-description { font: 600 18px/1.5 var(--d-text); color: var(--d-inkoust-2); }
.template-12 .p-final-price-wrapper .price-final-holder, .template-12 .p-final-price-wrapper .price-final { font: 800 34px/1 var(--d-text); color: var(--d-inkoust); }
.template-12 .p-basic-info-block .d-stav-blok { margin: 0 0 8px; }
.template-12 .p-basic-info-block .d-stitek { position: static; transform: none; background: var(--d-mata); padding: 8px 14px; border-radius: 999px; font-size: 14px; }
.template-12 .detail-parameters th, .template-12 .detail-parameters td { border-color: var(--d-linka); }
.template-12 .p-detail .quantity { height: 48px; }
.template-12 .p-detail .quantity input, .template-12 .p-detail .quantity button { height: 44px; }
.template-12 .p-detail .add-to-cart-button { min-height: 48px; }
/* Množství a Do košíku vždy v jedné řadě, tlačítko zabere zbytek (šablona je na mobilu láme pod sebe). */
.template-12 .p-detail .add-to-cart { flex-wrap: nowrap; gap: 8px; }
@media (max-width: 767.98px) {
  .template-12 .p-detail .add-to-cart .btn.add-to-cart-button { flex: 1 1 auto; max-width: none; width: auto; margin: 0; white-space: nowrap; }
  .template-12 .p-detail .p-add-to-cart-wrapper { flex: 1 1 100%; }
  .template-12 .p-detail .quantity { padding: 0 40px; } /* užší tlačítka ±, ať se „Do košíku“ vejde na jeden řádek */
  .template-12 .p-detail .quantity button { width: 40px; }
  .template-12 .p-detail .quantity input { width: 40px; }
}
@media (max-width: 767.98px) {
  .template-12 .p-image-wrapper .p-image { padding: 10px; }
  .template-12 .p-image-wrapper .p-image img { height: 30vh; }
  .template-12 .p-thumbnails-wrapper { display: none; }
  .template-12 .p-detail-inner-header h1 { font-size: 34px; margin-bottom: 8px; }
  .template-12 .p-short-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Stav knihy na detailu na vlastním řádku nad dostupností, ať se nemačká mezi kód a značku. Detail. */
.template-12 .p-basic-info-block { flex-wrap: wrap; }
.template-12 .p-basic-info-block > [class*="-stav-blok"] { flex: 0 0 100%; max-width: 100%; white-space: nowrap; }

/* Košík: kroky jako záložky (viz výše), tabulka jako bílá karta bez podbarvených buněk. Košík. */
.template-12 .cart-header { flex-direction: row; margin-bottom: 24px; }
.template-12 .cart-header .step { flex: 1 1 0; text-align: center; }
.template-12 .cart-header .step > a, .template-12 .cart-header .step > strong,
.template-12 .cart-header .step span { display: block; background: none; border: 0; border-radius: 0; color: inherit; font: inherit; padding: 0; margin: 0; } /* šablona má uvnitř kroku ještě vlastní rámeček */
.template-12 .cart-header .step::before, .template-12 .cart-header .step::after { display: none; } /* šipky a podklad kroků šablony by pod záložkou vykukovaly */
.template-12 .cart-table { background: var(--d-bila); border: 0; border-radius: var(--d-r-m); overflow: hidden; margin-top: 24px; }
.template-12 .cart-table tr, .template-12 .cart-table td, .template-12 .cart-table td.cart-p-image { background: transparent; }
.template-12 .cart-table .p-name a { font: 700 19px/1.2 var(--d-nadpis); }
.template-12 .next-step { gap: 16px; }
.template-12 .btn .order-button-text { text-transform: none; } /* Pokračovat: šablona píše verzálkami jen vnitřní text */

/* Informační stránky: text na bílé kartě se čtenářskou šířkou. Informační stránka. */
.template-12.type-page .content-inner { max-width: 44em; background: var(--d-bila); border-radius: var(--d-r-m); padding: 32px 40px; margin-bottom: 48px; }
.template-12.type-page .content-inner p, .template-12.type-page .content-inner li { font-size: 17px; line-height: 1.65; }
@media (max-width: 767.98px) { .template-12.type-page .content-inner { padding: 24px 20px; } }

/* Newsletter borůvkový jako karta zarovnaná s obsahem, patička meruňková. Všechny stránky. */
.template-12 .footer-newsletter {
  width: min(1418px, calc(100% - 2 * var(--d-okraj)));
  margin: 0 auto 32px;
  padding: 40px 40px;
  background: var(--d-hlavni);
  color: var(--d-bila);
  border: 0;
  border-radius: var(--d-r-l);
}
.template-12 .footer-newsletter .topic, .template-12 .footer-newsletter h3, .template-12 .footer-newsletter p, .template-12 .footer-newsletter label, .template-12 .footer-newsletter a { color: var(--d-bila); }
.template-12 .footer-newsletter input { border-color: transparent; }
.template-12 .footer-newsletter .btn.btn-primary { background: var(--d-akcent); border-color: var(--d-akcent); color: var(--d-inkoust); }
.template-12 .footer-newsletter .btn.btn-primary:hover { background: var(--d-akcent-svetly); border-color: var(--d-akcent-svetly); color: var(--d-inkoust); }
.template-12 #footer { background: var(--d-akcent-svetly); border: 0; color: var(--d-inkoust); padding-top: 32px; }
.template-12 #footer .footer-bottom { border-color: var(--d-linka); color: var(--d-inkoust-2); }

/* Mobil: úvod pod sebou, menší fotky a písmo, dlaždice úspornější. Do 767 px. */
@media (max-width: 767.98px) {
  .template-12 #header .site-name a.text-logo { font-size: 24px; }
  .template-12 #header .site-name a.text-logo .motto { display: none; } /* ve 52 px vysoké hlavičce by logo ořízlo */
  .d-uvod { grid-template-columns: 1fr; gap: 8px; margin: 8px auto 48px; padding: 24px 20px 64px; }
  .d-uvod-fotky { height: 230px; order: -1; }
  .d-foto { width: 36%; padding: 6px 6px 20px; }
  .d-uvod-nadpis { font-size: 36px; }
  .d-uvod-text p { font-size: 16px; margin-top: 16px; }
  .d-uvod-cta { margin-top: 24px; }
  .d-ikona-mrak { display: none; }
  .template-12 #homepage-tabs .shp-tab-link, .template-12 #homepage-tabs .active .shp-tab-link { font-size: 32px; margin-bottom: 24px; }
  .template-12 .products-block > div .p { padding: 16px 8px; }
  .template-12 .products-block > div .p > a.image { width: 86%; padding: 5px 5px 24px; margin-bottom: 16px; }
  .template-12 .products-block > div .p .name { font-size: 16px; }
  .template-12 .products-block > div .p .price-final strong { font-size: 18px; }
  .template-12 .products-block > div .p .p-desc { display: none; }
  .template-12 .products-block > div .p .btn { padding: 0 14px; font-size: 13px; }
  .products-block .d-stitek { font-size: 10px; bottom: 5px; }
  .template-12 .footer-newsletter { padding: 32px 20px; }
}