/* ==========================
   1) Globální proměnné a reset
   ========================== */
:root {
  /* Rozměrové proměnné */
  --gap: 16px;
  --pad: 12px;
  --radius: 0px;
  --line: #ddd;
  /* Barvy */
  --ink: #373645;
  /* základní text */
  --muted: #5b6472;
  /* vedlejší text */
  --bg: #ffffff;
  /* pozadí */
  --accent: #16b5e2;
  /* Modra hlavní akcent (tlačítka, badge)  */
  --primary: #e40000;
  /* cervena */
  --blue: #16b5e2;
  --zluta: #fce697;
  --orange: #ffc800;
  /* zluta */
  --zelena: #b4ca08;
  /* zelena */
  --tmzelena: #336604;
  --bgseda: #fafafa;
  /* svetle seda *#e7e7e7*/
  --bgtmseda: #000405;
  /*#54535f  #000405*/
  --bgseda1: #f3f3f3;
  --bgseda2: #cccccc;
  --bgseda3: #8b8a8a;
  --seda: #e6e5e5;
  --iksv1: #e7f3e2;
  --iksv2: #f8f3d6;
  --iksv3: #d1f2f8;
  --header-total: 0px;
  /* topbar + head + ikonový pás */
  --search-h: 44px;
  --search-r: 0px;

  /* Stín */
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06);

  /* Hamburer */
  --hb-size: 30px;
  /* šířka čárek */
  --hb-thick: 2px;
  /* tloušťka čárek */
  --hb-gap: 6px;
  /* rozestup mezi čárkami */
  --hb-color: #fff;
  /* barva čárek */

  --head-h: 92px;
  --headpr: 199px;
  --mainicons-h: 44px;
  --maxsirka: 1680px;
  --maxsirkab: 1880px;
  --filter-collapsed-h: 13.5rem;
  --filter-fade-h: 4rem;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  /* klíčové! rozsah pro variable font */
  src: url('/assets/fonts/roboto-v48-latin_latin-ext-regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  font-style: bold;
  font-weight: 700;
  /* klíčové! rozsah pro variable font */
  src: url('/assets/fonts/roboto-v48-latin_latin-ext-700.woff2') format('woff2');
  font-display: swap;
}



/* Reset box modelu */
* {
  box-sizing: border-box;
}

/* Základní nastavení stránky */
html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font: 16px/1.45 system-ui, -apple-system, 'Roboto', Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
html {
  scroll-behavior: auto !important;
}
/* Odkazy bez podtržení */
a {
  color: inherit;
  text-decoration: none;
}

/* Obrázky přizpůsobivé */
img {
  max-width: 100%;
  display: block;
  height:auto;
}

/* Kontejner s max. šířkou */
.container {
  max-width: var(--maxsirka);
  margin: 0 auto;
  padding: 0 var(--gap);
}

fieldset {
  border-image: none;
  border: 1px solid;
  border-style: solid;
  border-color: var(--seda);
}

body {
  font-family: 'Roboto', Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  background-color: var(--bg);
  padding-top: var(--header-total);
}

body,
html {
  margin: 0;
  padding: 0;
  /* overflow-x: hidden; Zakázání vodorovného posouvání */
}

input,
select,
textarea {
  font-family: 'Roboto', Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  font-size: 1rem;
  color: var(--ink);
  border-top: 1px solid var(--bgseda2);
  border-left: 1px solid var(--bgseda2);
  border-bottom: 1px solid var(--bgseda2);
  border-right: 1px solid var(--bgseda2);
}

body:not(.menu-open) #megamenu-holder,
.filters-footer
{
  display: none;
}

body.menu-open #megamenu-holder {
  display: block;
}

button:hover,
.rating-summary__sh a:hover,
.rating-summary__count a:hover,
.tabs a:hover,
.butseznam:hover,
.top_login_formular_prihl:hover,
.top_login_formular_zapom:hover,
.top_login_formular_obn:hover,
.butregis:hover,
.btn:hover,
.buyboxadd__right a:hover,
.head__links a:hover,
.mainicons a:hover,
.util a:hover,
.topbar__link:hover,
.size-link:hover,
.radekspec:hover,
.related-articles a:hover,
a.page:hover,
a.tag:hover,
.btncrt:hover,
.checkout-step a:hover,
.checkout-categories_link:hover,
.cart-item__name a:hover,
.searchresult__llinkleft:hover,
.searchresult__more:hover,
.cart-checkbox:hover,
.dprdi_osobne_mista_det_otv_sel:hover,
.dprdi_osobne_mista_sam:hover,
.dprdi_osobne_partneri_sam:hover,
.checkout-methods__change:hover,
.breadcrumbs a:hover,
.dotazform .btn_send:hover,
.cart-summary__podminky a:hover,
.mm-grid a:hover,
.mm-grid .catbox:hover,
.mm-grid .category-blok:hover,
.filters-toggle:hover,
.cat-top-products__item:hover,
.servis-page .servis-card a:hover
{
  transform: translate(0px, -1px);
  box-shadow: var(--shadow);
}
.breadcrumbs a:hover {
  transform: translate(0px, 1px);
  box-shadow: var(--shadow);
}

.is-hidden {
  display: none !important;
}

/* Primární tlačítko */
.btn.primary {
  background: var(--accent);
  color: var(--bg);
  border-color: transparent;
}
.btn.ghost {
  background: var(--accent);
  color: var(--bg);
  border-color: transparent;
}
.btn.packet {
  background: var(--tmzelena);
  color: var(--bg);
  border-color: transparent;
}
.btn.plt {
  background: var(--orange);
  color: var(--ink);
  border-color: transparent;
}
.btn.back {
  background: var(--bgseda3);
  color: var(--bg);
  border-color: transparent;
}
.btn.message {
  background: var(--zelena);
  color: var(--ink);
  border-color: transparent;
}
.btn.invoice {
  background: var(--primary);
  color: var(--bg);
  border-color: transparent;
}
.btn.extend {
  background: var(--muted);
  color: var(--bg);
  border-color: transparent;
}
.btn.btn-back {
  margin: 10px 0;
  background-color: var(--bg);
  color:var(--ink);
}
h1 {
  font-size: 1.8rem;
}
/* ==========================
   Vyhledavani
   ========================== */
/* Základ seznamu */
/* === Výsledky hledání === */
.searchresult__layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  height: 80vh; /* pevná výška, scroll uvnitř */
  background: var(--bg);
  border-radius: 8px;
  box-shadow: 0 4px 25px rgba(0,0,0,0.15);
  overflow: hidden; /* zabrání dvojitému scrollu */
}

.searchresult__sidebar,
.searchresult__main {
  padding: 16px;
  overflow-y: auto;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--bgseda2) transparent;
}

/* Chrome, Edge, Safari */
.searchresult__sidebar::-webkit-scrollbar,
.searchresult__main::-webkit-scrollbar {
  width: 6px;
}
.searchresult__sidebar::-webkit-scrollbar-thumb,
.searchresult__main::-webkit-scrollbar-thumb {
  background-color: var(--bgseda2);
  border-radius: 3px;
}
.searchresult__sidebar::-webkit-scrollbar-thumb:hover,
.searchresult__main::-webkit-scrollbar-thumb:hover {
  background-color: var(--bgseda2);
}

.searchresult__heading {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}

.searchresult__section {
  margin-bottom: 20px;
  width:100%;
  float:left;
}

.searchresult__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.searchresult__item {
  list-style: none;
}

.searchresult__link {
  display: flex;
  position: relative;
  flex-direction: column;
  text-decoration: none;
  border: 1px solid var(--seda);
  border-radius: 0px;
  padding: 10px;
  transition: all 0.2s ease;
  background: var(--bg);
  text-align: left;
  min-height:320px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.searchresult__link:hover {
  border-color: var(--bgseda2);
  transform: translateY(-2px);
}

.searchresult__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
}

.searchresult__llinkleft {
  display: block;
  float:left;
  text-decoration: none;
  border-radius: 0px;
  padding: 5px 0 0 0;
  width:100%;
  text-align: left;
  font-size: 0.95rem;
}
.searchresult__llinkleft::before {
  content: "→ ";
  display: inline-block;
  margin-right: 4px;
  color: currentColor; /* převezme barvu textu odkazu */
  font-weight: bold;   /* volitelné */
}


.searchresult__title {
  font-size: 0.9rem;
  color: var(--ink);
  margin-top: 6px;
  margin-bottom: 6px;
  text-align: left;
}

.searchresult__price {
   font-size: 0.9rem;
   font-weight: 700;
  color: var(--ink);
  text-align: left;
  position: absolute;
  bottom:10px;
  left:10px;
}

.searchresult__sipka
{
  font-size: 1.4rem;
  color: var(--ink);
  position: absolute;
  bottom:5px;
  right:10px;
}
.searchresult__sipka::before {
  content: "→ ";
  display: inline-block;
  color: currentColor; /* převezme barvu textu odkazu */
  font-weight: 700;   /* volitelné */
}


.searchresult__brandlogo {
  width: 20px;
  height: auto;
  margin-right: 5px;
}

.searchresult__more {
  float:left;
  text-align: center;
  margin-top: 16px;
  background: var(--primary);
  color:var(--bg);
  border-radius: 0px;
  padding: 8px;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
}


/* ==========================
   2) Hlavička webu (CLEAN)
   ========================== */

/* Sticky + oddělovací linka */
header.site {
  position: relative;
  /* bylo: sticky */
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--bg);
  /* border-bottom: 1px solid var(--line); */
  font-family: inherit;
}


.p-head {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  /* odsadí od breadcrumbs */
}

.p-head h1 {
  margin: 10px 0 10px 0;
  line-height: 1.2;
}

.p-head__row {
  display: grid;
  grid-template-columns: 1fr auto;
  /* text vlevo, logo vpravo */
  align-items: start;
  gap: 16px;
}

.p-head__text p {
  margin: 0;
}

.p-head__text .prheader {
  font-weight: 700;
  margin-bottom: 5px;
}

/* případně tvůj existující .muted; fallback: */
.p-head__text .muted {
  color: var(--ink);
  margin-bottom: 20px;
}

.p-head__brand {
  justify-self: end;
  align-self: start;
}

.p-head__brand img {
  width: auto;
  max-width: 180px;
  /* ochrana proti přerostlým logům */
  object-fit: contain;
}

.p-head__tools {
  margin: 10px 0 10px 0;
}

/* ==========================
   MODAL (velikostní tabulka)
   ========================== */
.size-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 400;
  text-decoration: none;
  margin-left: 15px;
  color: var(--accent);
  padding: 3px 5px 3px 3px;
}
.size-link .icon {
  width: 30px;
  height: 30px;
  padding: 2px 0 0 0;
  flex: 0 0 22px;
}

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .6);
  z-index: 1000;
}
.modal__content {
  background: #fff;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 0px;
  padding: 20px;
  position: relative;
  z-index: 1005;
  pointer-events: auto;
}

.modal__content h2 {
  margin-top: 0px;
}
.sortimentprodukty h2 {
  margin-top: 25px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}



.modal__close {
  position: absolute;
  top: 0px;
  right: 5px;
  font-size: 2rem;
  padding: 5px 5px 0 5px;
  margin: 0;
  background: none;
  border: none;
  z-index: 1025;
  cursor: pointer;
}

.modal__body {
  text-align: center;
  padding: 0px 20px 20px 0px;
}
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .6);
  z-index: 1000;
}

[hidden] {
  display: none !important;  /* nejdůležitější! */
}

.modal__overlay {
  position: absolute;
  inset: 0;
}

.modal__content {
  position: relative;
  background: var(--bg);
  padding: 20px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1;
}

.modal__close {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
}

body.modal-open {
  overflow: hidden; /* zákaz scrollu na pozadí */
}




/* --- Topbar (červený proužek) --- */
.topbar {
  font-size: 1rem;
  color: var(--primary);
  background: var(--bgseda);
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 35px;
}

.topbar__promo {
  opacity: .95;
  color: var(--primary);
}

.topbar__promo .topbar__link {
  color: var(--primary);
  padding: 2px;
  margin-left: 4px;
}

.toputils {
  display: flex;
  align-items: center;
  gap: 20px;
}

.toputils a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  text-decoration: none;
}

/* --- Hlavní řádek s vektorovým pozadím 3000×200 (1:3) --- */
.head {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #dbe7ff url("/assets/imgs/header_bg_vector_3000x200.svg") center/cover no-repeat;
}

.head__in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  /* left | search | cart */
  align-items: center;
  gap: 25px;
  min-height: 90px;
  padding: 5px 0 0 0;
}

/* levý blok (logo + tři textové odkazy se šipkou) */
.head__left {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 22px;
}

.head__center {
  display: flex;
  flex-direction: column;
  /* děti pod sebe */
  gap: 10px;
  /* mezera mezi bloky */
}


.logo img {
  display: block;
  height: 50px;
  width: auto;
  margin: 5px 10px 5px 20px;
}

/* tvoje bloky můžou zůstat flexové (ne inline-flex) */
.head__links,
.search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.head__links {
  font-size: 1rem;
  color: var(--ink);
}

.head__links a {
  color: var(--ink);
  text-decoration: none;
}

.head__links .crumb {
  opacity: .9;
  margin-left: 10px;
}

.mainicons .crumb {
  opacity: .9;
  margin-right: 4px;
}
.head--mobile {
  position: fixed;
  top: 0;
  left: 0;
  /* DŮLEŽITÉ */
  right: 0;
  /* DŮLEŽITÉ - roztáhne na celou šířku */
  width: 100vw;
  /* jistota přes celý viewport */
  margin: 0;
  z-index: 1000;
}
.head--shrink {
  position: fixed;
  top: 0;
  left: 0;
  /* DŮLEŽITÉ */
  right: 0;
  /* DŮLEŽITÉ - roztáhne na celou šířku */
  width: 100vw;
  /* jistota přes celý viewport */
  margin: 0;
  z-index: 1000;
}

.head--shrink .logo {
  transform: scale(.8);
}

.head--shrink .head__in {
  min-height: 60px;
  padding: 0;
}

.head--shrink .head__links {
  display: none;
  font-size: 14px;
  opacity: .9;
}

.head--shrink .util {
  padding: 0px 20px 0;
}

.head--shrink .util .toputils {
  gap: 5px;
}

.head--shrink .util img {
  transform: scale(.8);
  opacity: .95;
}



/* --- Hledání --- */
.search {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* DŮLEŽITÉ: žádná mezera mezi inputem a tlačítkem */
}

/* pole s ikonou uvnitř */
.search__input {
  position: relative;
  flex: 1;
  /* roztáhni pole */
  min-width: 260px;
}

.search__input input {
  width: 100%;
  font-size: 1.2rem;
  height: var(--search-h);
  padding: 0 14px 0 42px;
  /* místo pro ikonu vlevo */
  border: 1px solid var(--line);
  border-right: 0;
  /* bez svislé spáry */
  border-radius: var(--search-r) 0 0 var(--search-r);
  background: var(--bg);
  outline: none;
}

.search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  opacity: .65;
  pointer-events: none;
}

/* tlačítko zarovnané na výšku inputu a navázané bez mezery */

.search .btn--search {
  height: var(--search-h);
  padding: 0 18px;
  border-radius: 0 var(--search-r) var(--search-r) 0;
  border: 0;
  border-left: 0;
  font-size: 1.1rem;
  background: var(--bgtmseda);
  font-weight: 400;
  color: var(--bg);
  cursor: pointer;
}
.search .btn--search_s {
  display: none;
  height: var(--search-h);
  padding: 0 18px;
  border-radius: 0 var(--search-r) var(--search-r) 0;
  border: 0;
  border-left: 0;
  font-size: 1.1rem;
  background: var(--bgtmseda);
  font-weight: 400;
  color: var(--bg);
  cursor: pointer;
}
/* stavy */
.search__input input:focus {
  box-shadow: 0 0 0 2px rgba(179, 202, 6, .25);
  border-color: var(--line);
}


/* kosmetika placeholderu + odstranění x u <input type=search> (kdybys ho použil) */
.search__input input::placeholder {
  color: var(--ink);
  opacity: .9;
}

.search__input input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

/* ----- Vysledek hledani ---*/
/* === Live search panel === */
#searchresult {
  display: none;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: auto;
}

#searchresult.is-open {
  display: block;
}

/* loader + error */
.searchresult__loading,
.searchresult__error {
  padding: 14px;
  font-size: 1rem;
  color: var(--ink);
}

.searchresult__error {
  color: var(--primary);
}

/* spinner v inputu (není nutné měnit HTML) */
.search__input.is-loading input {
  padding-right: 34px;
}

.search__input.is-loading::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--seda);
  border-top-color: var(--ink);
  animation: srchspin .7s linear infinite;
}

@keyframes srchspin {
  to {
    transform: translateY(-50%) rotate(1turn);
  }
}

/* křížek (clear/close) uvnitř vstupu */
.search__clear {
  position: absolute;
  font-size: 2rem;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--bg);
  right: 8px;
  top: 8px;
  width: 30px;
  height: 30px;
  line-height: 28px;
  cursor: pointer;
  display: none;
}

.search__clear.is-visible {
  display: inline-block;
}
.searchpage-topblocks {
  display: grid;
  gap: 2rem;
  margin-bottom: 2rem;
}

.searchpage-brandlist,
.searchpage-linklist {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.searchpage-branditem,
.searchpage-textlink {
  display: inline-block;
  text-decoration: none;
}

.searchpage-bottomcontent {
  margin-top: 3rem;
  display: grid;
  gap: 2rem;
}
.searchpage-topblocks .hp-carousel-track 
{
      justify-content: left;
}
.searchpage-topblocks .hpznacky
{
  margin-bottom: 0;
}
.pagebrand .searchbox-articles {
  margin-top: 30px;
}
.pagebrand  .faq-generated .faq-item
{
  margin-bottom: 0px;
}

.searchbox-articles .articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.searchbox-articles .article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
}

.searchbox-articles .article-card .article-image {
  display: block;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: var(--bgseda);
}

.searchbox-articles .article-card .article-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.searchbox-articles .article-card .article-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1rem;
}

.searchbox-articles .article-card .article-title {
  margin: 0 0 .75rem 0;
  line-height: 1.35;
}

.searchbox-articles .article-card .article-title a {
  color: inherit;
  text-decoration: none;
}

.searchbox-articles .article-card .article-excerpt {
  margin: 0 0 1rem 0;
  color: var(--muted);
  line-height: 1.55;
}

.searchbox-articles .article-card .read-more {
  margin-top: auto;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.searchbox-articles .article-card .read-more:hover {
  text-decoration: underline;
}

/* Hledani ajax PRODUKTY */
.searchpage-toolbar-wrap {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--line);
  background: var(--bgseda);
}

.searchpage-toolbar {
  display: grid;
  gap: 1rem;
}

.searchpage-layout {
  margin-top: 1rem;
}

.searchpage-main {
  min-width: 0;
}

.searchpage .products-show,
.searchpage .grid {
  min-width: 0;
}

.searchpage .grid.cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.searchpage .grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.searchpage .grid .product-card {
  width: 100%;
  min-width: 0;
}

.searchpage .grid .sizes,
.searchpage .grid .sizes-wrapper,
.searchpage .grid .buyline,
.searchpage .grid .buyline__top,
.searchpage .grid .price {
  min-width: 0;
}

.searchpage .grid .sizes-wrapper {
  max-width: 100%;
}

.search-filters-toggle {
  display: none;
}

.aside-search .active-filters {
  margin-top: 1rem;
}

.searchpage-toolbar__top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.searchpage-toolbar__brands {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
}

.searchpage-toolbar__branditem {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
}

.searchpage-pagination {
  margin-top: 2rem;
}

.searchpage-pagination__inner {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.searchpage-pagination__link {
  display: inline-flex;
  min-width: 2.5rem;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  text-decoration: none;
}

.searchpage-pagination__link.is-active {
  border-color: var(--ink);
  font-weight: 700;
}

#search-products-area.is-loading,
.searchpage-products.is-loading {
  opacity: .6;
}
#search-products-area {
  scroll-margin-top: 100px;
}
/* KONEC */ 

/* --- Košík vpravo --- */
.right_box {
  margin-top: -35px;
}

/* --- Hamburger menu --- */
/* Tlačítko */

.hamburger {
  display: none;
  /*inline-grid*/
  place-items: center;
  width: calc(var(--hb-size) + 14px);
  height: calc(var(--hb-size) + 14px);
  cursor: pointer;
  border-radius: 10px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: 0;

}

.hamburger:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

/* Tři čárky (1 element + ::before/::after) */
.hamburger__bar,
.hamburger__bar::before,
.hamburger__bar::after {
  content: "";
  display: block;
  width: var(--hb-size);
  height: var(--hb-thick);
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, width .2s ease;
}

.hamburger__bar {
  position: relative;
}

.hamburger__bar::before {
  position: absolute;
  left: 0;
  transform: translateY(calc(-1 * var(--hb-gap)));
}

.hamburger__bar::after {
  position: absolute;
  left: 0;
  transform: translateY(var(--hb-gap));
}


/* --- Černý ikonový pás --- */
.mainicons {
  background: var(--bgtmseda);
  color: var(--bg);
  box-shadow: 0 2px 2px rgba(255, 255, 200, .15);
  position: relative;
  /* ne fixed */
  left: auto;
  right: auto;
  top: auto;
  z-index: 10;
  color: #fff;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.mainicons .container {
  overflow-x: auto;
}

.mainicons ul {
  list-style: none;
  margin: 0;
  padding: 0px 0 0px 5px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 15px;
}

.mainicons ul li {
  list-style: none;
  text-align: center;
  padding: 0px 0 0 0;
  margin: 0;
}

.mainicons a {
  display: inline-flex;
  align-items: center;
  gap: 0px;
  text-decoration: none;
  margin: 0;
  padding: 5px 5px 0px 4px;
  font-size: 1.1rem;
  color: var(--bg);
  text-decoration: none;
}

.mainicons a:hover {
  background: rgba(255, 255, 255, .08);
}

.mainicons img {
  width: 32px;
  height: 32px;
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
}

.mainicons__in {
  display: flex;
  gap: 24px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 16px;
  list-style: none;
}


/* --- A11y --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}




/* overlay pod dropdownem - volitelné */
.menu-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--head-h);
  z-index: 980;
  background: rgba(0, 0, 0, .35);
}

.menu-open .menu-overlay {
  display: block;
}

/* ==========================
   3) Tlačítka a badge
   ========================== */

/* Základní vzhled tlačítka */
.btn,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}



/* Ikonová lišta */
.util {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0px 20px 0;
}

/* košík s ikonou */
.util .cart {
  display: inline-flex;
  align-items: center;
  gap: 0px;

}

.cart-wrapper {
  position: relative;
  display: inline-block;
}
#zakaznik_poznamka {
  width: 100%;
  height: 80px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 0;
  margin-top:10px;
  font-size: 1rem;
  resize: vertical;
}
.zakaznik_udaje_form_data_label {
  cursor: pointer;
}
.cart-dialog {
  display: none;
  position: absolute;
  top: calc(100% + 0px);
  /* hned pod ikonou, bez mezery */
  right: 0;
  width: 380px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 12px;
  z-index: 2000;
  /* větší než header atd. */
  max-height: 70vh;        /* nebo např. 400px, podle layoutu */
  overflow-y: auto;
  overscroll-behavior: contain; /* zabrání scrollu celé stránky */
  scrollbar-gutter: stable;     /* udrží šířku při zobrazení scrollbaru */
}

.cart-wrapper:hover .cart-dialog {
  display: block;
}

.cart-dialog h4 {
  margin: 0 0 8px;
  padding: 10px;
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

.cart-dialog ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart-dialog li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

/* --- produkt --- */
.cart-dialog li img {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  flex-shrink: 0;
}

.cart-dialog li a {
  display: block;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.3;
  font-size: 0.90rem;
}

.cart-dialog li a:hover {
  text-decoration: none;
}

.cart-dialog .cart_item_ks {
  grid-column: 2;
  font-size: 0.8rem;
  color: var(--ink);
  margin-top: 2px;
}

.cart-dialog .cart_item_all {
  grid-column: 3;
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

/* --- slevový kupón (bez obrázku) --- */
.cart-dialog li:not(:has(img)) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px 8px 52px; /* 32px img + 10px gap = zarovnání s textem */
  color: var(--ink);
}

.cart-dialog li:not(:has(img)) .cart_item_text {
  font-weight: 500;
  font-size: 0.90rem;
}

.cart-dialog li:not(:has(img)) .cart_item_all {
  font-weight: 600;
  white-space: nowrap;
}

/* --- souhrn --- */
.cart-summary {
  padding: 10px;
  font-size: 1.1rem;
  text-align: right;
  border-top: 1px solid var(--line);
}
.cart-summary a.btn-cart-go{
text-align: center;
  background: var(--primary, #4caf50);
  color: #fff;
  padding: 6px 10px;
  text-decoration: none;
  border-radius: 0px;
  
}

.btn-cart {
  display: block;
  text-align: center;
  background: var(--primary, #4caf50);
  color: #fff;
  padding: 6px 10px;
  text-decoration: none;
  border-radius: 4px;
}


.btn-cart:hover {
  background: var(--primary-dark, #388e3c);
}

.util .cart .ico-img {
  width: 35px;
  height: 35px;
  display: block;
}

.fav-dialog,
.com-dialog,
.kl-dialog,
.jz-dialog {
  display: none;
  position: absolute;
  width: 250px;
  top: 20px;
  /* pod ikonou */
  right: 0;
  background: var(--bg);
  border: 1px solid var(--bgseda2);
  padding: 10px 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.favourites,
.favourites_product,
.compare {
  position: relative;
}
.favourites_product[aria-pressed="true"] img,
.compare[aria-pressed="true"] img {
  filter: grayscale(1) opacity(0.4);
  transform: scale(1.15);
}
.head .badge {
  display: inline-block;
  height: 25px;
  width: 25px;
  padding: 6px;
  border-radius: 999px;
  background: var(--bgtmseda);
  color: var(--bg);
  font-size: 0.85rem;
  text-align: center;
  margin-left: -10px;
  margin-bottom: 15px;
  line-height: 1.1;
}
/* -------------------------------
   3) SLIDE BOX
--------------------------------- */
/* --- Megamenu --- */
#megamenu-inner[hidden] {
  display: none;
}

#megamenu-inner {
  position: absolute;
  /* bylo: relative */
  left: 0;
  right: 0;
  top: calc(100% + 1px);
  /* hned pod lištou; +1px skryje hraniční linku */
  z-index: 995;
  /* pod .mainicons, nad obsahem */
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  max-height: 90vh;
  /* ať je posuvný, ne nekonečný */
  overflow: auto;
  padding: 0;
}

#megamenu-inner .container {
  max-width: var(--maxsirka);
  margin: 0 auto;
  padding: 0 var(--gap, 16px);
}


/* interní gridy můžeš nechat; jen ať netahají layout stránky */
.slideall {
  width: 100%;
  background: var(--bg);
}

.slide {
  width: var(--maxsirka);
  margin-left: auto;
  margin-right: auto;
  float: none;
}

.slidebox {
  padding: 0px;
  width: var(--maxsirka);
  float: left;
  color: var(--ink);
  background: var(--bg);

}

.slideboxsam {
  margin-right: 15px;
  margin-top: 5px;
  margin-bottom: 0px;
  height: 200px;
  width: 250px;
  padding-left: 10px;
  float: left;
}

.slideboxsam_vyr {
  margin: 7px;
  float: left;
}

.slideboxsam a,
.slideboxsam_vyr a {
  color: var(--ink);
}

.slideboxsamp {
  width: 100%;
  float: left;
  background-color: var(--bg);
}

.slideboxsamp_vyr {
  float: left;
}

.slideboxfoto_vyr {
  float: left;
  padding: 0;
  width: 130px;
  height: 120px;
  position: relative;
  background-color: var(--bg);
}

.slideboxfoto_vyr img {
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  float: left;
}

.slideboxsamnadp {
  width: 100%;
  padding-top: 5px;
  padding-left: 0px;
  min-height: 23px;
  text-align: left;
  float: left;
  font-size: 1.2rem;
}

.mainicons .slideboxsamnadp a,
.mainicons .slideboxsamnadp_vyr a {
  padding: 0px;
  font-weight: normal;
  text-decoration: none;
}

.slideboxfoto {
  float: left;
  padding-left: 10px;
  padding-right: 0px;
  padding-top: 5px;
  width: 28%;
}
.mainicons .slideboxfoto img {
  width: 43px;
  height: 63px;
  max-width:unset;
}
.mainicons .slideboxtxt {

  float: left;
  line-height: 120%;
  font-size: 0.80rem;
  width: 63%;
}

.mainicons .slideboxtxt a {
  color: var(--ink);
  padding: 2px 0 2px 2px;
  text-decoration: none;
  font-size: 0.85rem;
}

.slideboxtxt a:hover {
  color: var(--ink);
  text-decoration: none;
}

.slideboxstin {
  width: 100%;
  height: 0px;
  float: left;

}

.slideboxstin_vyr {
  height: 0px;
  width: 100%;
  float: left;
}

.slide_sort {
  float: left;
  padding-bottom: 20px;
}

.slide_sort_sam {
  float: left;
  position: relative;
  margin-top: 20px;
  width: 9rem;
  height: 4.5rem;
}
.slide_sort_sam a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: .25rem .5rem;
}
.slide_sort_sam img {
  margin: 0;
  max-width: 100%;
  max-height: 3rem;
  width: auto;
  height: auto;
  display: block;
}

/* ==========================
   Prihlaseni zakaznik / Vlajky
========================== */
#top_login_formular {
  position: fixed;
  margin: 0 auto;
  top: 110px;
  right: 40px;
  display: none;
  width: 400px;
  height: 670px;
  opacity: 1;
  background-color: var(--seda);
  z-index: 1111;
}

.top_login_formular_nad {
  width: 80%;
  padding: 10px 0 0px 10px;
  font-size: 22px;
  font-weight: bold;
  float: left;
}
#top_login_formular_bottom_right {
  width: 10%;
  margin-right: 10px;
  float: right;
}

#top_login_formular_zrusit {
  margin-top: 0px;
  float: right;
  cursor: pointer;
}

#top_login_formular_all {
  width: 100%;
  float: left;
}

#top_login_formular_bottom {
  margin-top: 20px;
  font-size: 1.rem;
  float: left;
  width: 97%;
  padding: 10px 10px 0dvh 10px;
  text-align: left;
}

#top_login_formular_all .separator {
  display: flex;
  float: left;
  align-items: center;
  text-align: center;
  margin-top: 15px;
  margin-left: 10px;
  width: 95%;
}

#top_login_formular_bottom_zapomeli .butseznam {
  width: 40%;
  margin-right: 20px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: left;
  padding: 20px 0px 20px 10px;
  background-color: var(--bg);
  border: 1px solid var(--seda);
  border-radius: 0px;
  color: var(--ink);
  text-decoration: none;
  font-family: "Google Sans", arial, sans-serif;
  font-size: 1rem;
  transition: background-color 0.3s, box-shadow 0.3s;
}

#top_login_formular_bottom_zapomeli .butseznam img {
  width: 20px;
  height: 20px;
  margin-left: 0px;
  margin-right: 15px;
}

#top_login_formular_bottom_zapomeli a,
#top_login_formular_bottom_zapomeli #butgoogle {
  float: left;
  font-weight: normal;
  border: 0;
  margin: 0;
  padding: 5px;
  cursor: pointer;
  color: var(--ink);
}

#top_login_formular_all .separator span {
  font-size: 14px;
  color: var(--bgseda2);
}

#top_login_formular_all .separator::before {
  content: "";
  flex: 1;
  border-bottom: 1px solid #CCCCCC;
  margin: 0 10px 0 0;
}

#top_login_formular_all .separator::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #CCCCCC;
  margin: 0 10px 0 10px;
}

#top_login_formular_prihlaseni {
  margin-top: 15px;
  float: left;
  margin-left: 10px;
  font-size: 1rem;
  font-weight: 700;
  width: 97%;
  line-height: 220%;
  height: 60px;
}

#top_login_formular_prihlaseni input[type="text"] {
  margin: 0;
  padding: 0;
  width: 90%;
  height: 40px;
  font-size: 1rem;
  padding-left: 5px;
  border: 1px solid var(--seda);
}

#top_login_formular_heslo {
  font-size: 1rem;
  float: left;
  margin-left: 10px;
  width: 97%;
}

#top_login_formular_sub {
  margin-top: 10px;
  margin-left: 10px;
  width: 97%;
  float: left;
}

#top_login_formular .password-container {
  position: relative;
  display: flex;
  align-items: center;
}
#top_login_formular_bottom_zapomeli1 .top_login_nadpis {
    float: left;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 0px;
    margin-bottom: 15px;
}
#top_login_formular .password-container input[type="password"],
#top_login_formular .password-container input[type="text"] {
  margin: 0;
  padding: 0;
  width: 90%;
  padding-right: 40px;
  height: 40px;
  font-size: 1rem;
  padding-left: 5px;
  border: 1px solid var(--seda);
}

#top_login_formular .password-container button {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--ink);
  padding: 0;
}

#top_login_formular_sub .top_login_formular_prihl {
  float: left;
  font-size: 1.3rem;
  border: 0;
  width: 40%;
  margin: 0;
  padding: 8px;
  margin-top: 5px;
  cursor: pointer;
  text-align: center;
  background-color: var(--primary);
  color: var(--bg);
}

#top_login_formular_bottom_zapomeli1 a.butregis {
  float: left;
  font-weight: normal;
  border: 0;
  margin: 0;
  font-size: 1.3rem;
  border: 0;
  width: 40%;
  margin: 0;
  padding: 12px;
  cursor: pointer;
  color: var(--bg);
  text-align: center;
  background-color: var(--tmzelena);
}

#top_login_formular_sub .top_login_formular_zapom {
  float: left;
  font-size: 0.9rem;
  border: 0;
  margin: 0;
  padding: 16px 10px 10px 30px;
  margin-top: 5px;
  cursor: pointer;
  text-align: center;
  color: var(--ink);
}

#top_login_formular_bottom {
  margin-top: 0px;
  font-size: 1rem;
  float: left;
  width: 97%;
  padding-left: 10px;
  text-align: left;
}

#top_login_formular_bottom_zapomeli1,
#top_login_formular_bottom_zapomeli {
  margin-top: 0px;
  margin-bottom: 10px;
  width: 95%;
  float: left;
  line-height: 1;
}

#top_login_formular_bottom_zapomeli1 .top_login_text {
  float: left;
  line-height: 1.5rem;
  font-size: 1.1rem;
  margin-bottom: 5px;
}

#top_login_formular_bottom_zapomeli1 ul {
  float: left;
  line-height: 1.5rem;
  font-size: 1rem;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 15px;
}
#top_login_formular_bottom_zapomeli1 ul a {
  text-decoration: underline;
  color: var(--primary);
}


/* Vyber statu */
#top_login_stat {
  position: fixed;
  display: none;
  margin: 0 auto;
  top: 110px;
  right: 40px;
  width: 400px;
  z-index: 1021;
}

#top_vlajka_formular {
  position: relative;
  width: 400px;
  height: 250px;
  margin: 0 auto;
  opacity: 1;
  background-color: #E7E7E7;
  z-index: 1110;
  border-radius: 0px;
  /* volitelné, aby to bylo hezčí */
}

.top_login_formular_vlajka {
  float: left;
  margin-left: 10px;
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  width: 97%;
  line-height: 220%;

}

.top_login_formular_vlajka select {
  margin: 0;
  padding: 0;
  width: 90%;
  height: 40px;
  font-size: 16px;
  padding-left: 5px;
  border: 1px solid #CCCCCC;
  border-radius: 0;
}

#top_vlajka_formular_all {
  width: 100%;
  float: left;
}

#top_login_vlajka_bottom_right {
  width: 10%;
  margin-right: 0px;
  float: right;
}

#top_vlajka_formular_zrusit,
#top_login_formular_zrusit {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

#top_vlajka_formular_zrusit:hover,
#top_login_formular_zrusit:hover {
  color: var(--primary);
}

/* LOGIN, STATY, KOSIK ATD.*/
#vlajka_spinner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

#vlajka_spinner::after {
  content: "";
  width: 40px;
  height: 40px;
  border: 4px solid var(--seda);
  border-top: 4px solid var(--ink);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/*Zapomenute Heslo*/
#top_login_formular_hs {
  position: fixed;
  margin: 0 auto;
  top: 110px;
  right: 40px;
  display: none;
  width: 400px;
  height: 350px;
  opacity: 1;
  background-color: var(--seda);
  z-index: 1111;
}

#top_login_formular_sub .top_login_formular_obn {
  float: left;
  font-size: 1.1rem;
  border: 0;
  width: 90%;
  margin: 0;
  padding: 10px 10px 10px 10px;
  margin-top: 15px;
  cursor: pointer;
  text-align: center;
  background-color: var(--primary);
  color: var(--bg);
}

.top_login_formular_text {
  margin-top: 0px;
  float: left;
  margin-left: 10px;
  font-size: 1.2rem;
  color:var(--primary);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
#cart-toast-holder {
  position: relative;
}

.cart-toast {
  position: absolute;
  top: 40px;
  right: 0;
  background: var(--zelena);
  color: var(--ink);
  padding: 15px;
  border-radius: 0px;
  font-size: 1.1rem;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.cart-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.cart-toast.error { background: #e53935; }



/* ==========================
   CAROUSEL
========================== */
.grid[data-carousel] {
  position: relative;
  display: flex;
  flex-wrap: nowrap;          /* nezalamuj karty na další řádek */
  overflow-x: auto;           /* povol horizontální scroll */
  overflow-y: hidden;         /* zabraň vertikálnímu přetékání */
  scroll-snap-type: x mandatory; /* volitelné – plynulé zarovnání */
  -webkit-overflow-scrolling: touch; /* pro plynulý posun na mobilech */
  gap: 5px;                     /* mezery mezi kartami (ne margin-right) */
  padding: 10px 0;               /* vnitřní mezera nahoře/dole */
  scrollbar-width: none;         /* skryje scrollbar (Firefox) */
}
[data-carousel]::-webkit-scrollbar {
  display: none; /* skryje scrollbar (Chrome/Safari) */
}
[data-carousel] .product-card {
  flex: 0 0 280px;
  /* pevná šířka karty */
  margin-right: 16px;
  /* mezery mezi kartami */
  scroll-snap-align: start;
}

[data-carousel]::before,
[data-carousel]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 2;
}

/* šipky */

.carousel-arrow {
  all: unset;
  /* smaže veškeré default i globální styly */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 2.0rem;
  box-shadow: 0 2px 6px var(--muted);
  z-index: 5;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* jen centrování, žádný posun dolů */
}

.carousel-arrow.prev {
  left: 8px;
}

.carousel-arrow.next {
  right: 8px;
}

.carousel-arrow:hover {
  background: #f6f6f6;
  transform: translateY(-50%);
  /* fix: žádný +1px dolů */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}



/* ==========================
   4) Navigace
   ========================== */
nav.main {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

nav.main .container {
  display: flex;
  gap: 10px;
  overflow: auto;
  scrollbar-width: none;
}

nav.main a {
  padding: 12px 10px;
  white-space: nowrap;
  color: var(--ink);
}

nav.main a:hover {
  color: var(--ink);
}

.page-header {
  display: grid;
  grid-template-columns: auto 30px;
  /* left | search | cart */
}

.share-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0;

}

.share-header .share img {
  width: 28px;
  height: 28px;
  display: block;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.share-header .share img:hover {
  transform: scale(1.1);
}

/* ==========================
   5) Hero sekce
   ========================== */
.hero {
  margin: 20px 0;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--gap);
}

.hero .panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  min-height: 220px;
  position: relative;
  overflow: hidden;
}


/* ==========================
   6) Grid layouty
   ========================== */
.grid {
  display: grid;
  gap: var(--gap);
  
}
.grid.cols-10 {
  grid-template-columns: repeat(10, 1fr);
  gap: 25px;
  padding-left: 50px; 
}
.grid.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}




/* ==========================
   8) Breadcrumbs
   ========================== */
.breadcrumbs {
  font-size: 1rem;
  color: var(--muted);
  padding: 20px 0 20px 10px;
}
.breadcrumbs_last {
  display:block;
}

.breadcrumbs a {
  float: left;
}

.breadcrumbs img {
  float: left;
  margin-right: 0px;
}

.breadcrumbs span {
  float: left;
  margin-right: 5px;
  margin-left: 5px;
}

/* ==========================
   9) Rozvržení stránky
   ========================== */
.pageall {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.pagecat {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--gap);
}

.aside {
  /* position: sticky; */
  /* top: 84px; */
  align-self: start;
}




/* ==========================
   11) Toolbar
   ========================== */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 1rem;
  color: var(--muted);
}

.section {
  border-bottom: 1px solid var(--seda);
  padding: 16px;
  margin-top: 12px;
}

/* ==========================
   12) Animace
   ========================== */
.fade-up {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}

.fade-up.in {
  opacity: 1;
  transform: none;
}



/* ==========================
   13) Patička (nový layout)
   ========================== */
footer.site {
  margin-top: 30px;
  border-top: 1px solid var(--line);
  background: var(--bgseda);
  font-size: 0.9rem;
  color: var(--ink);
}

footer.site a {
  color: inherit;
  text-decoration: none;
}

footer.site a:hover {
  text-decoration: underline;
}

footer.site .container {
  padding-top: 15px;
  padding-bottom: 15px;
}

/* newsletter pásek */
.footer__newsletter {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  /* vlevo social, vpravo newsletter */
  gap: 24px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

/* social ikony */
.footer__social {
  display: flex;
  gap: 30px;
  align-items: center;
}

.footer__social img {
  width: 56px;
  height: 56px;
  display: block;
}

/* pravý blok */
.footer__newsletter-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__newsletter-title {
  margin: 0;
  font-size: 1rem;
}

.footer__newsletter-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.footer__newsletter-form input[type="email"] {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.footer__newsletter-form button {
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--bgtmseda);
  color: var(--bg);
  font-weight: 600;
  cursor: pointer;
}

.footer__newsletter-form button:hover {
  filter: brightness(0.95);
}

/* výsledná hláška */
.footer__newsletter-result {
  font-size: 1rem;
  min-height: 20px;
  color: var(--ink);
}

/* hlavní grid patičky */
.footer__main {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(5, 1fr);
  padding: 24px 0;
}

/* sloupce odkazů */
.footer__col h3 {
  margin: 0 0 10px 0;
  font-size: 1rem;
  font-weight: 800;
}

.footer__col a {
  display: block;
  padding: 4px 0;
  line-height: 1.5;
}

/* spodní lišta */
.footer__bottom {
  display: grid;
  gap: 10px 16px;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  color: var(--muted);
}

.footer__copy,
.footer__projects {
  margin: 0;
}

.footer__projects a {
  color: var(--muted);
}

.footer__projects a:hover {
  color: inherit;
}

/* ==========================
   16) Karty produktů s velikostmi
   ========================== */
.grid .product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--seda);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 0;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  color: inherit;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.grid .product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(0, 0, 0, .08);
}

.grid .product-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Nadpis */
.product-card h3 {
  font-size: 1rem;
  font-weight:400;
  position: relative;
  line-height: 1.3;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  /* clamp na 2 řádky */
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 85px;
  padding:5px 5px 3px 5px;
}

/* Obrázek produktu */
.product-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--bg);
  overflow: hidden;
  border-radius: var(--radius);
  box-sizing: border-box;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  border-radius: var(--radius);
  margin: 0;
}

/* Labely */
.grid-labels {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-wrap: wrap;   /* 🔥 povolí přesun na nový řádek */
    gap: 6px;
    max-width: calc(100% - 24px);  /* ať se vejde do karty */
    z-index: 2;
    pointer-events: none;
}

.grid-label,
.grid-labels div
{
  background: var(--zelena);
  /* firemní barva */
  color: var(--bg);
  font-size: 0.85rem;
  padding: 4px 8px;
  border-radius: 0px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Blok velikostí */
.sizes {
  margin-top: 6px;
  position: relative;
  --chip-h: 30px;
  max-height: var(--chip-h);
  overflow: hidden;
  transition: max-height .3s ease;
  padding:0px 5px 0px 8px;
}

.sizes.is-expanded {
  max-height: 500px;
  /* nebo none, ale pak bez animace */
}

/* gradient na pravé straně */
.sizes::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%);
  pointer-events: none;
  z-index: 1;
}

/* Wrapper pro čipy + tlačítko */
.sizes-wrapper {
  display: flex;
  flex-wrap: nowrap;
  max-width: 260px;
  overflow: hidden;
  gap: 5px;
  align-items: center;
}

/* Fade efekt na pravé straně */
.sizes-wrapper::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  /* šířka vytrácení */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 50%);
  pointer-events: none;
  z-index: 1;
}

/* Odkazy s čipy */
.sizes a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
  /* aby se nezmenšovaly */
}

/* Čip velikosti */
.sizes .sklvel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: var(--chip-h);
  padding: 0 10px;
  border: 0px solid var(--line);
  border-radius: 0px;
  background: var(--bgseda1);
  color: var(--ink);
  font-size: .85rem;
  line-height: 1;
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}

.sizes a:hover .sklvel {
  border-color: var(--accent);
  background: var(--bgseda1);
  transform: translateY(1px);
}

/* Tlačítko „Vše“ (rozbalit velikosti) */
.show-more-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: var(--chip-h);
  padding: 0 8px;
  border: 0;
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  z-index: 2;
  /* nad gradientem */
}

.product-card .buyline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top:auto; 
  padding: 0 8px 0 8px;
}

.product-card .buyline .price {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
  margin: 15px 0 0 0;
  /* zrušit horní margin, aby to sedělo na střed */
}
/* Listing – ceny v kartě */
.product-card .buyline{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin-top:.25rem;
  position:relative;
}

.product-card .buyline__top{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:10px;
  flex-wrap:wrap;
  line-height:1.2;
  min-height:24px;
}

/* původní cena */
.product-card .sale{
  font-size:.9rem;
  color:var(--muted);
  text-decoration:line-through;
  text-decoration-thickness: .08rem;
  text-decoration-color: rgba(0,0,0,.35);
  white-space:nowrap;
}

/* badge se slevou */
.product-card .sale_pr{
  font-size:.85rem;
  font-weight:700;
  padding:.18rem .45rem;
  background:var(--primary);
  color:var(--bg);
  white-space:nowrap;
}

/* finální cena */
.product-card .price{
  margin:0;
  font-size:1.35rem;
  font-weight:800;
  color:var(--ink);
  white-space:nowrap;
}

/* info kolečko */
.price-info{
  width:1.35rem;
  height:1.35rem;
  display:inline-grid;
  place-items:center;
  border:1px solid var(--line);
  background:var(--bgseda1);
  border-radius: 15px;
  color:var(--muted);
  font-weight:800;
  font-size:.85rem;
  padding:0;
  cursor:pointer;
}

.price-info:hover{
  background:var(--bgseda);
  color:var(--ink);
}

/* popover */
.price-pop{
  position:absolute;
  left:0;
  top:2.1rem;
  min-width:18rem;
  max-width:22rem;
  border:1px solid var(--line);
  background:var(--bg);
  box-shadow:var(--shadow);
  padding:.75rem;
  z-index:999;
  display:none;
}

.price-pop__title{
  font-weight:800;
  margin-bottom:.35rem;
  color:var(--ink);
  font-size:.95rem;
}

.price-pop__text{
  color:var(--muted);
  font-size:.85rem;
}

/* otevřený stav */
.buyline.is-open .price-pop{
  display:block;
}


.buyline .btn-grid-buy,
.buyline .btn-buy {
  padding: 8px 18px 8px 18px;
  background: var(--primary);
  color: var(--bg);
  font-weight: 700;
  font-size: 1.4rem;
  border: none;
  cursor: pointer;
  margin: 15px 0;
}

/* ==========================
   POPUP OKNO
   ========================== */
   @keyframes spinshow 
    {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .popup-overlay 
    {
         position: fixed;
         top: 0; left: 0; right: 0; bottom: 0;
         background: rgba(0, 0, 0, 0.5);
         display: none; justify-content: center; align-items: center;
         z-index: 9999;
     }
     .popup-content {
         position: relative;
         background: white;
         padding: 20px;
         border-radius: 2px;
         max-width: 90%; 
         max-height: 90vh;
         text-align: center;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        animation: fadeIn 0.5s ease;
     }
     .close-btn {
        position: absolute;
        top: -10px;
        right: -10px;
        width: 30px;
        height: 30px;
        background-color: red;
        color: white;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .close-btn:hover {
        background-color: darkred;
    }

    .close-btn:active {
        background-color: #b22222;
    }

/*
HOMEPAGE
*/
/* ====== Hlavní banner – v šířce containeru s přechodem ====== */
.mobbanner,
.allkategorie
{
  display: none;
}
.hpbanner {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}

.hpbanner.single .hp-banner-item {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  inset: auto;
  transform: none;
}

.hpbanner.single .hp-banner-track {
  transform: none !important;
}

.hpbanner.single .hp-banner-nav {
  display: none;
}

.hpbanner.single .banner-content {
  opacity: 1;
  transform: translateY(0);
}

.hpbanner {
  background: var(--bgseda1);
}

.hpbanner a {
  display: block;
}

.hpbanner .hp-banner-item,
.mobbanner .mob-banner-item {
  overflow: hidden;
}

.hpbanner .hp-banner-item::after,
.mobbanner .mob-banner-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 4, 5, .18) 0%, rgba(0, 4, 5, 0) 55%);
  pointer-events: none;
  z-index: 1;
}

.hpbanner .hp-banner-item > a,
.mobbanner .mob-banner-item > a {
  width: 100%;
  height: 100%;
}

.hpbanner .hp-banner-item > a img,
.mobbanner .mob-banner-item > a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hpbanner .hp-banner-item > a img {
  aspect-ratio: auto;
}

.mobbanner .mob-banner-item > a img {
  aspect-ratio: 1 / 1;
}

.hpbanner .hp-banner-item.active .banner-content,
.mobbanner .mob-banner-item.active .banner-content {
  opacity: 1;
  transform: translateY(0);
}

.hp-banner-track {
  display: flex;
  align-items: stretch;
  transition: transform 0.6s ease;
  position: relative;
  width: 100%;
}

.hp-banner-item {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  height: clamp(26rem, 36vw, 42rem);
  opacity: 1;
  transition: opacity 0.35s ease;
}

.hp-banner-item img {
  width: 100%;
  height: 100%;
  border-radius: 0px;
  display: block;
}

.hpbanner .banner-content {
  position: absolute;
  z-index: 2;
  top: 12%;
  left: 2.5rem;
  bottom: auto;
  width: min(32rem, calc(100% - 5rem));
  max-width: calc(100% - 5rem);
  background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 100%);
  padding: 2.25rem;
  text-align: left;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.hpbanner .banner-content h2 {
  font-size: 3rem;
  padding:0;
  margin:0;
  margin-bottom: .75rem;
  font-weight: 700;
  line-height: 1.1;
}
.hpbanner .banner-content p {
  padding:0;
  margin: 0 0 1.25rem 0;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.45;
}

.hpbanner .banner-content .btn {
  display: inline-block;
  background: var(--primary);
  color: var(--bg);
  padding: 1rem 1.75rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 0px;
  box-shadow: var(--shadow);
}


.hp-banner-nav {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 10;
  width: min(calc(100% - 2rem), 60rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(0, 4, 5, .42);
  padding: .75rem 1rem;
  border-radius: 0px;
  backdrop-filter: blur(12px);
  border: none;
  scrollbar-width: none;
}

.hp-banner-nav::-webkit-scrollbar {
  display: none;
}

.hp-banner-nav button {
  background: transparent;
  border: none;
  padding: .5rem .75rem;
  cursor: pointer;
  opacity: 0.7;
  font-size: 1rem;
  color: var(--bg);
  font-weight: 400;
  transition: all 0.3s;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.hp-banner-nav button:hover,
.hp-banner-nav button.active {
  opacity: 1;
  color: var(--bg);
  border-bottom: 2px solid var(--bg);
}



/* ====== SEKCE pro Homepage ====== */
.homepage section {
  margin: 35px 0;
}

.homepage h2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: left;
}


/* ====== Carousely ====== */
.carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }

/* ====== Kategorie ====== */
.categories .cat-item {
  flex: 0 0 200px;
  text-align: center;
}
.categories img {
  width: 100%;
  border-radius: 8px;
  transition: transform .3s;
}
.categories img:hover {
  transform: scale(1.05);
}

/* ====== Značky ====== */
.logos img {
  height: 60px;
  flex: 0 0 auto;
  filter: grayscale(100%);
  opacity: .7;
  transition: all .3s;
}
.logos img:hover {
  filter: none;
  opacity: 1;
}

/* ====== Výhody ====== */
.benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
}
.benefits li {
  background: #f5f5f5;
  padding: 15px 25px;
  border-radius: 10px;
  font-weight: 500;
}

/* ====== Prodejna ====== */
.store-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
}
.store-info img {
  flex: 1 1 400px;
  border-radius: 10px;
}
.store-info .text {
  flex: 1 1 300px;
}
.btn {
  display: inline-block;
  background: var(--accent, --zelena);
  color: var(--ink);
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: background .3s;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

/* ====== HP carousel základ ====== */
.hp-carousel {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.hp-carousel-track {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 10px 40px;
  justify-content: center; 
  align-items: center;
}
.hp-carousel-track::-webkit-scrollbar {
  display: none;
}

/* ====== Položky v karuselu ====== */
.hp-carousel-track img,
.hp-carousel-track .cat-item,
.hp-carousel-track .product,
.hp-carousel-track article {
  flex: 0 0 auto;
  scroll-snap-align: start;
  cursor: pointer;
}

/* ====== Tlačítka ====== */
.hp-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  font-size: 26px;
  line-height: 38px;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  z-index: 2;
  transition: background 0.2s, transform 0.2s;
}

.hp-carousel-btn:hover {
  background: var(--accent, #b3ca06);
  transform: translateY(-50%) scale(1.1);
}

.hp-carousel-btn.prev {
  left: 5px;
}

.hp-carousel-btn.next {
  right: 5px;
}

.hpznacky
{
 margin-bottom:20px;
 border-bottom: 1px solid var(--seda);
 
}
/* BLOKY HP  */
/* LISTA */
#center_right_lista {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--bg);
  padding: 30px 40px;
  gap: 30px;
  flex-wrap: wrap;
  border: 1px solid var(--seda);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* každý blok (1–5) */
.center_right_blok2 {
  display: flex;
  align-items: flex-start;
  flex: 1 1 180px;
  max-width: 220px;
  position: relative;
}

/* velké číslo vlevo */
.center_right_obrazek {
  font-size: 48px;
  font-weight: 700;
  color: #ccc;
  line-height: 1;
  margin-right: 10px;
  flex-shrink: 0;
}

/* text vedle čísla */
.center_right_txtblok {
  font-size: 15px;
  line-height: 1.2;
  color: #333;
}

/* nadpis v rámci textového bloku */
.center_right_txtblok strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #000;
  margin-bottom: 0px;
}

/* nadpis sekce nahoře */
.center_right_news_pruh {
  background: #fff;
  padding: 20px 40px 10px;
}

.center_right_prod_pruh_nadpis {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
}



/* PRODEJNA */
/* --- HLAVNÍ NADPIS SEKCE --- */
.center_right_news_pruh {
  background: #fff;
  padding: 20px 40px 10px;
  
}

.center_right_prod_pruh_nadpis {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 10px;
}

/* --- ČTYŘSLOUPCOVÝ BLOK --- */
.vypis_unv_box_toprd {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: var(--bg);
  padding: 20px 40px;
  gap: 30px;
  border: 1px solid var(--seda);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.vypis_unv_box_toprd_box {
  flex: 1 1 200px;
  max-width: 260px;
}

.vypis_unv_box_toprd_boxsam {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

.vypis_unv_box_toprd_box_nad {
  font-size: 1.3rem;;
  font-weight: 700;
  margin-bottom: 5px;
  color: #000;
}

/* --- Odkazy --- */
.vypis_unv_box_toprd_box a {
  color: var(--ink);
  text-decoration: none;
}
#rotatingText a
{
  color: var(--ink);
  text-decoration: underline;
}
.vypis_unv_box_toprd_box a::before,
#rotatingText a::before
{
  content: "→ ";
  display: inline-block;
  margin-right: 4px;
}


.vypis_unv_box_toprd_box a:hover {
  text-decoration: underline;
}

/* --- OBRÁZKY PRODEJNY --- */
.vypis_prd_box_img {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0px;
  background: #fff;
  margin-top: 0px;
  transition: all 0.25s ease;
  border: 1px solid var(--seda);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.vypis_prd_box_imgsam {
  flex: 1 1 calc(25% - 10px);
}

.vypis_prd_box_imgsam img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border: 1px solid #ddd;
}

/* --- TLAČÍTKO VÍCE O PRODEJNĚ --- */
.topvyrnext {
  text-align: left;
  margin-top: 0px;
  background: #fff;
  padding: 20px 40px 20px 0;
}

#topvyrnext a {
  display: inline-block;
  background: var(--bgseda3);
  color: var(--bg);
  text-decoration: none;
  padding: 12px;
  font-size: 1rem;;
  border-radius: 0px;
  transition: background 0.2s ease;
}

#topvyrnext a:hover {
  background: #333;
}


/*
// Klientsky system
*/
/* CLIENT MENU */
.clientnav .filter
{
  border:1px solid var(--bgseda1);
  background:var(--bg);
  margin-bottom:12px;
}

.clientnav .filter__head
{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 12px;
  background:var(--bgseda1);
  border:0;
  font-weight:700;
  font-size:1.1em;
  text-align:left;
}

.clientnav .filter__arrow
{
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:7px solid var(--ink);
  transition: transform .15s ease;
}

/* sbalené */
.clientnav .filter.is-collapsed .filter__arrow
{
  transform: rotate(-90deg);
}

/* tělo boxu */
.clientnav .filter__body
{
  padding:8px 0;
}

/* položky */
.clientnav__item
{
  display:block;
  padding:10px 12px;
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  border-top:1px solid var(--bgseda1);
  transition: background .12s ease, color .12s ease;
}

.clientnav__item:first-child
{
  border-top:0;
}

.clientnav__item:hover
{
  background:var(--bgseda1);
}

/* aktivní položka jako zvýrazněný filtr */
.clientnav__item.active
{
  background:var(--blue);
  color:var(--bg);
  font-weight:700;
}

/* ===== DOTAZ FORM ===== */

/* ------------------------------------------------------------
   Kontakt: FAQ + volba tématu + formulář
------------------------------------------------------------ */
.faq-section{
  padding: 14px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,.03), rgba(0,0,0,.01));
  border-top: 1px solid rgba(0,0,0,.08);
}

.faq-section__title{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 1.3rem;
  margin: 0;
}

.faq-section__desc{
  margin-top: 4px;
  opacity: .78;
  line-height: 1.35;
  font-size: .93rem;
}

/* když je sekce hned na začátku .faq */
.faq > .faq-section:first-child{
  border-top: 0;
}

.kontakt-choose {
  margin-top: 40px;
}
.kontakt-h2{
  font-size: 1.15rem;
  margin: 25px 0 20px 0;
}

.kontakt-lead{
  margin: 0 0 1rem;
  opacity: .85;
  line-height: 1.45;
}

/* FAQ accordion */
.faq{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 0px;
  overflow: hidden;
  background: var(--bg);
}

.faq-item{
  border-top: 1px solid rgba(0,0,0,.08);
}
.faq-item a
{
  text-decoration: underline;
  color: var(--primary);
}
.faq-item:first-child{
  border-top: 0;
}

.faq-q{
  list-style: none;
  cursor: pointer;
  padding: 14px 14px;
  font-size:1.0rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 10px;
}

.faq-q::-webkit-details-marker{ display:none; }

.faq-q::after{
  content: "▾";
  margin-left: auto;
  opacity: .7;
  transform: rotate(0deg);
  transition: transform .18s ease;
}

.faq-item[open] .faq-q::after{
  transform: rotate(180deg);
}

.faq-a{
  padding: 0 14px 14px;
  line-height: 1.55;
  font-size:0.95rem;
  opacity: .92;
}

/* Chips (volba typu dotazu) */
.dotaz-choose{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0 40px;
}

.dotaz-chip{
  appearance: none;
  border: 1px solid rgba(0,0,0,.14);
  background: var(--bgseda);
  color: var(--ink);
  font-size: 1.0rem;
  border-radius: 0;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease;
}

.dotaz-chip:hover{
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.dotaz-chip:active{
  transform: translateY(1px);
}

.dotaz-chip.is-active{
  border-color: var(--bgseda3);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* ID rodiče */
.dotaz-parent{
  margin-top: 12px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 0;
  background: var(--bg);
  padding: 12px;
}

.dotaz-parent-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.dotaz-label{
  font-weight: 700;
  font-size: .95rem;
}

.dotaz-input{
  width: 100%;
  border: 1px solid var(--bgseda1);
  border-radius: 12px;
  padding: 11px 12px;
  outline: none;
  font-size: 1rem;
}

.dotaz-input:focus{
  border-color: var(--bgseda3);
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}

.dotaz-parent-help{
  font-size: .92rem;
  opacity: .75;
  line-height: 1.4;
}

/* Form wrap hlavička */
.dotaz-wrap{
  margin-top: 16px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 0;
  background: var(--bg);
  padding: 14px;
}

.dotaz-head{
  margin-bottom: 10px;
}

.dotaz-head-title{
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.dotaz-head-sub{
  opacity: .8;
  line-height: 1.4;
}



.dotazbox {
  background: var(--bg);
  border: 1px solid var(--bgseda2);
  border-radius: 0px;
  padding: 28px;
  margin: 30px 0;
  box-shadow: 0 4px 18px rgba(0,0,0,0.04);
  max-width: 100%;
}

.dotazbox h3 {
  margin: 0 0 20px 0;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* Grid pro jméno/příjmení */
.dotazgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Všechny bloky pod sebou */
.dotazform > div {
  margin-bottom: 18px;
}

.dotazform label {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--ink);
}

/* Inputy a textarea */
.dotazform input[type="text"],
.dotazform input[type="password"],
.dotazform input[type="email"],
.dotazform input[type="url"],
.dotazform textarea {
  width: 100%;
  border: 1px solid var(--bgseda2);
  border-radius: 0px;
  padding: 11px 14px;
  font-size:  1rem;
  transition: all .2s ease;
  background: var(--bgseda);
}

.dotazform textarea {
  resize: vertical;
  min-height: 130px;
}

/* focus efekt */
.dotazform input:focus,
.dotazform textarea:focus {
  border-color: var(--ink);
  background: var(--bg);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

/* malý hint pod polem */
.dotazform small {
  display: block;
  font-size:  0.9rem;
  margin-top: 6px;
  color: var(--bgseda3);
}

/* tlačítko */
.dotazform .btn_send {
  background: var(--primary);
  color: var(--bg);
  border: none;
  border-radius: 0;
  padding: 13px 26px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}

/* stavová hláška */
.dotazstatus {
  margin-top: 14px;
  font-size: 1rem;
  min-height: 20px;
}

/* když budeš chtít error/success přes JS přidat class */
.dotazstatus.error {
  color: var(--primary);
}

.dotazstatus.success {
  color: var(--tmzelena);
}

/* captcha box */
.dotazcaptcha {
  margin-top: 10px;
}



/* =========================================================
   USER ORDERS (new design)
   Prefix: .ob-*
   ========================================================= */

/* ---------- List (all orders) ---------- */
.ob-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.ob-item {
  border: 1px solid #e5e5e5;
  border-radius: 0px;
  background: #fff;
  overflow: hidden;
}

.ob-item-link {
  display: block;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
}

.ob-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ob-item-id {
  font-weight: 700;
}

.ob-item-stav {
  display: flex;
  align-items: center;
}

.ob-item-mid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.ob-item-kv .k {
  font-size: 12px;
  opacity: 0.7;
}

.ob-item-kv .v {
  font-size: 14px;
}

.ob-item-cta {
  margin-top: 10px;
  font-weight: 700;
  opacity: 0.9;
}


/* ---------- Status badge ---------- */
.ob-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid var(--line);
}

/* variants */
.ob-badge.s-new {
  background: #f6f6f6;
}
.ob-badge.s-pickup {
  background: #b8daee;
  border-color: #f7f9fa;
}

.ob-badge.s-wait {
  background: #fff6e6;
  border-color: #ffd9a8;
}

.ob-badge.s-ship {
  background: #eaf4ff;
  border-color: #b7dcff;
}

.ob-badge.s-done {
  background: #e9fff1;
  border-color: #b7f2cc;
}

.ob-badge.s-cancel {
  background: #ffecec;
  border-color: #ffbdbd;
}


/* ---------- Detail page layout ---------- */
.ob-detail {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.ob-card {
  border: 1px solid var(--line);
  border-radius: 0px;
  background: var(--bg);
  padding: 14px 16px;
}
.ob-head
{
  padding-bottom: 15px;
}
.ob-h2 {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
}


/* ---------- Key/Value blocks (header rows) ---------- */
.ob-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.ob-kv .k {
  font-size: 12px;
  opacity: 0.7;
}

.ob-kv .v {
  font-size: 1rem;
}
.ob-kv .p {
  font-size: 1rem;
}

.ob-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}


/* ---------- Address boxes ---------- */
.ob-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ob-box {
  border: 1px dashed var(--line);
  border-radius: 0;
  padding: 12px;
}

.ob-box-title {
  font-weight: 800;
  margin-bottom: 6px;
}

.ob-box-txt {
  font-size: 14px;
  line-height: 1.5;
}


/* ---------- Items table ---------- */
.ob-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 0;
}

.ob-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--bg);
}

.ob-table th,
.ob-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.ob-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.t-right {
  text-align: right;
}

.ob-prod-title {
  font-weight: 700;
}
.ob-prod-url a {
  font-weight: 400;
  text-decoration: underline;
  color: var(--primary);
}

.ob-tags {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.7;
}


/* ---------- Totals summary ---------- */
.ob-sum {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.ob-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}


/* ---------- Accordion (payment & shipping) ---------- */
.ob-acc {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 12px;
  background: var(--bg);
}

.ob-acc summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.ob-acc-body {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.95;
}

.ob-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
}


/* ---------- Empty state ---------- */
.ob-empty {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 0px;
  opacity: 0.85;
}
.dotaz-wrap{
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--bgseda2);
  background: var(--bg);
}

/* ---------- Responsive ---------- */


/* Toast */
#copyToast{
  position: fixed;
  bottom: 30px;
  right: 30px;

  padding: 12px 18px;
  border-radius: 0;

  background: var(--ink);
  color: var(--bg);
  font-size: 0.9rem;
  font-weight: 700;

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;

  transition: all .25s ease;
  z-index: 9999;
}

#copyToast.show{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   SERVIS – layout pro nové třídy (rem + root var barvy)
   ========================================================= */

/* izolace + box sizing */
.servis-page,
.servis-page *{
  box-sizing: border-box;
}

/* wrapper */
.servis-page{
  width: 100%;
  margin: 0 auto;
  padding: 0.625rem 0 3.125rem; /* 10px 0 50px */
  color: var(--ink);
  background: transparent;
}

/* titulky */
.servis-title{
  font-size: 2.375rem; /* 38px */
  font-weight: 800;
  margin: 0 0 1.25rem 0; /* 20px */
  line-height: 1.15;
  color: var(--ink);
}

/* =========================================================
   3 BOXy nahoře
   ========================================================= */
.servis-page .rental-cards{
  display: grid;
  grid-template-columns: 1;
  gap: 1.25rem;              /* 20px */
  margin: 0.625rem 0 2.1875rem; /* 10px 0 35px */
}

.servis-page .servis-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;              /* 20px */
  margin: 0.625rem 0 2.1875rem; /* 10px 0 35px */
}

.servis-page .servis-card{
  background: var(--bgseda1);
  border: 1px solid var(--line);
  padding: 1.25rem;          /* 20px */
  min-height: 9.375rem;      /* 150px */
  color: var(--ink);
}

.servis-page .servis-card h2{
  font-size: 1.125rem; /* 18px */
  font-weight: 800;
  margin: 0 0 0.75rem 0; /* 12px */
  color: var(--ink);
}

.servis-page .servis-address{
  font-style: normal;
  margin: 0;
  display: grid;
  gap: 0.25rem; /* 4px */
  color: var(--ink);
}

.servis-page .servis-link{
  margin: 0.625rem 0 0; /* 10px */
  font-weight: 700;
}

/* odkazy */
.servis-page .servis-card a{
  color: var(--accent);
  text-decoration: none;
}
.servis-page .servis-card a:hover{
  text-decoration: underline;
}
.servis-page .servis-card a.servis-contact-tl{
    appearance: none;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: var(--bg);
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: .2s ease;
    margin-top: 15px;
    float:left;
}
.servis-page .servis-card a:hover{
  text-decoration: none;
}



/* otevírací doba (dl) */
.servis-page .servis-hours{
  margin: 0;
}
.servis-page .servis-hours .row{
  display: grid;
  grid-template-columns: 5.625rem 1fr; /* 90px */
  gap: 0.625rem; /* 10px */
  padding: 0.375rem 0; /* 6px 0 */
}
.servis-page .servis-hours dt{ font-weight: 700; }
.servis-page .servis-hours dd{ margin: 0; }

/* objednání (ul) */
.servis-page .servis-contact{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem; /* 8px */
}

/* =========================================================
   PROČ SERVIS – 2 sloupce (text + obrázek)
   ========================================================= */

.servis-page .servis-why{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1.875rem; /* 30px */
  align-items: start;
  margin: 0.625rem 0 2.5rem; /* 10px 0 40px */
}

/* text */
.servis-page .servis-why-text h2{
  font-size: 1.625rem; /* 26px */
  font-weight: 900;
  margin: 0 0 0.9375rem 0; /* 15px */
  text-align: left;
  color: var(--ink);
}

/* seznam výhod – šipka */
.servis-page .servis-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem; /* 12px */
}

.servis-page .servis-list li{
  position: relative;
  padding-left: 1.375rem; /* 22px */
  line-height: 1.4;
  color: var(--ink);
}

.servis-page .servis-list li::before{
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  color: var(--muted);
}

/* obrázkový box */
.servis-page .servis-why-media{
  margin: 0;
  border: 0 solid var(--line);
  background: var(--bg);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.servis-page .servis-why-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.servis-anot {
  margin: 3rem 0;
}

.servis-steps {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
}

.faq-item {
  border-top: 1px solid var(--line);
  padding: 1rem 0;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
}

.faq-answer {
  margin-top: .5rem;
  color: var(--muted);
}
/* =========================================================
   CENÍK – karty
   ========================================================= */

.servis-page .servis-section-title{
  font-size: 1.625rem; /* 26px */
  font-weight: 900;
  margin: 1.875rem 0 0.9375rem; /* 30px 0 15px */
  color: var(--ink);
}

.servis-page .servis-items{
  display: grid;
  gap: 0.875rem; /* 14px */
}

/* jedna položka ceníku */
.servis-page .servis-item{
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}

.servis-page .servis-item-head{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem; /* 16px */
  align-items: center;
  padding: 1rem 1.125rem; /* 16px 18px */
  border-bottom: 1px solid var(--line);
  background: var(--bgseda1);
}

.servis-page .servis-item-head h3{
  margin: 0;
  font-size: 1.125rem; /* 18px */
  font-weight: 900;
  color: var(--ink);
}

.servis-page .servis-price{
  font-size: 1.125rem; /* 18px */
  font-weight: 900;
  white-space: nowrap;
  color: var(--ink);
}

.servis-page .servis-price span{
  font-weight: 700;
  font-size: 0.8125rem; /* 13px */
  color: var(--muted);
}

.servis-page .servis-item-body{
  padding: 0.875rem 1.125rem 1.125rem; /* 14px 18px 18px */
}

.servis-page .servis-muted{
  margin: 0 0 0.625rem; /* 10px */
  color: var(--muted);
}

.servis-page .servis-sublist{
  margin: 0;
  padding-left: 1.125rem; /* 18px */
  display: grid;
  gap: 0.375rem; /* 6px */
}

.servis-page .servis-cta{
  margin-top: 0.875rem; /* 14px */
}

/* tlačítko */
.servis-page .btn-servis{
  appearance: none;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--bg);
  font-size: 1.1rem;
  padding: 0.75rem 1rem; /* 12px 16px */
  font-weight: 400;
  cursor: pointer;
  transition: .2s ease;
  width: 100%;
  max-width: 22.5rem; /* 360px */
}

.servis-page .btn-servis:hover{
  filter: brightness(1.08);
}

.servis-page .servis-note{
  margin: 0.75rem 0 0; /* 12px */
  font-size: 0.8125rem; /* 13px */
  color: var(--muted);
}


/* =========================================================
   Servis objednání – page
   ========================================================= */

.servis-order-page,
.servis-order-page *{ box-sizing: border-box; }

.servis-order-page{
  width: 100%;
  color: var(--ink);
  padding: 0.75rem 0 3rem;
}

.servis-order-title{
  font-size: 2rem;
  font-weight: 900;
  margin: 0 0 1rem;
}

.servis-order-info ul{
  margin: 0 0 1.25rem;
  padding-left: 1.15rem;
  color: var(--ink);
}
.servis-order-info li{
  margin: 0.35rem 0;
  line-height: 1.4;
}
.servis-order-info a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}
.servis-order-info a:hover{ text-decoration: underline; }

.servis-form-wrap{
  border: 1px solid var(--line);
  background: var(--bg);
}

.servis-form-title{
  margin: 0;
  padding: 0.9rem 1rem;
  font-size: 1.25rem;
  font-weight: 900;
  border-bottom: 1px solid var(--line);
  background: var(--bgseda1);
}

.servis-form-banner{
  background: var(--accent);
  color: var(--bg);
  padding: 1rem;
  border-bottom: 1px solid var(--line);
}
.servis-form-banner .t1{ font-weight: 800; }
.servis-form-banner .t2{ font-size: 1.25rem; font-weight: 900; margin: 0.15rem 0; }
.servis-form-banner .t3{ opacity: .95; }

.servis-form{
  padding: 1rem;
}

.grid2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.field{
  display: grid;
  gap: 0.35rem;
  margin: 0 0 0.9rem;
}

.field > span{
  font-weight: 800;
}
.field b{ color: var(--primary); }

.field input,
.field select,
.field textarea{
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  padding: 0.7rem 0.75rem;
  font-size: 1rem;
  outline: none;
}

.field textarea{ resize: vertical; min-height: 9rem; }

.help{
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.35;
}

.servis-actions{
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-top: 0.25rem;
}

.btn-servis-order{
  appearance: none;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--bg);
  padding: 0.85rem 1.25rem;
  font-weight: 900;
  cursor: pointer;
  min-width: 16rem;
}
.btn-servis-order:disabled{
  opacity: .7;
  cursor: not-allowed;
}

.servis-status{
  font-weight: 800;
  color: var(--muted);
}
.servis-status[data-type="ok"]{ color: var(--tmzelena); }
.servis-status[data-type="err"]{ color: var(--primary); }

.servis-note{
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.servis-warn{
  margin: 0.75rem 1rem;
  padding: 0.75rem 1rem;
  background: var(--zluta);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 800;
}



/* =========================================================
   SORTIMENT, VYROBCI
   ========================================================= */
.vyrobci{
  padding: 1.25rem 0;
  display: grid;
  gap: 2rem;
}

.vyrobci-title{
  margin: 0 0 1rem 0;
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.vyrobci-subtitle{
  margin: 0 0 1rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* TOP loga */
.vyrobci-logos{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  align-items: center;
}

.vyrobci-logo{
  display: grid;
  place-items: center;
  min-height: 3.25rem;
  border: 1px solid transparent;
  padding: .25rem;
}

.vyrobci-logo img{
  max-width: 100%;
  max-height: 3rem;
  width: auto;
  height: auto;
  display: block;
  filter: saturate(1);
}

.vyrobci-logo:hover{
  border-color: var(--line);
  background: var(--bgseda);
}

/* A–Z head + písmena */
.vyrobci-az-head{
  display: grid;
  gap: 1rem;
}

.vyrobci-letters{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.vyrobci-letter{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .5rem;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  background: var(--bg);
}

.vyrobci-letter:hover{
  background: var(--bgseda);
}

/* skupiny A–Z */
.vyrobci-az-groups{
  display: grid;
  gap: 1.5rem;
}

.vyrobci-group{
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.vyrobci-group-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.vyrobci-group-letter{
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .02em;
}

.vyrobci-group-top{
  color: var(--muted);
  text-decoration: none;
  font-size: .95rem;
}
.vyrobci-group-top:hover{ color: var(--ink); }

/* seznam výrobců v mřížce */
.vyrobci-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem 1rem;
}

.vyrobci-link{
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .5rem;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid transparent;
  background: var(--bg);
}

.vyrobci-link:hover{
  border-color: var(--line);
  background: var(--bgseda);
}

.vyrobci-ico{
  width: 2rem;
  height: 1.5rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.vyrobci-ico img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.vyrobci-name{
  font-size: 1rem;
  line-height: 1.2;
}

.vyrobci-link{
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: .6rem;
}

.vyrobci-count{
  font-size: .95rem;
  color: var(--muted);
  font-weight: 700;
  padding-left: .75rem;
  border-left: 1px solid var(--line);
  min-width: 3.5rem;
  text-align: right;
}
/* responsive */


/* ====== BRAND PAGE DOPLNĚK ====== */
.pagebrand {
  width: 100%;
  padding: 0 10px 20px; /* symetrické odsazení vlevo i vpravo */
  box-sizing: border-box;
}
.pagebrand h1 {
  font-size: 2.2rem;
}
.pagebrand .brand-hero{
  position: relative;
  padding: 16px;
  border: 1px solid var(--bgseda1);
  background: var(--bg);
}

/* hero pozadí přes CSS proměnnou --brand-hero */
.pagebrand .brand-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: linear-gradient(to right, rgba(255, 255, 252, 1), rgba(255, 255, 255, 0)),var(--brand-hero);
  background-size: cover;
  background-position: center;
  
  pointer-events: none;
}

/* aby obsah byl nad pozadím */
.pagebrand .brand-hero > *{
  position: relative;
}

.pagebrand .brand-desc{
  max-width: 70rem;
}

.pagebrand .brand-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}

.pagebrand .brand-pill{
  display:inline-flex;
  align-items:center;
  height: 32px;
  padding: 0 10px;
  background: var(--bgseda1);
  border: 1px solid var(--bgseda1);
  font-weight: 700;
}

/* levý panel: seznam kategorií značky */
.brand-cats{
  display:grid;
  gap: 8px;
}

.brand-catlink{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  text-decoration:none;
  padding: 8px 10px;
  border: 1px solid var(--bgseda1);
  background: var(--bg);
}

.brand-catlink:hover{
  background: var(--bgseda1);
  border-color: var(--seda);
}

.brand-catname{
  color: var(--ink);
  font-weight: 600;
}

.brand-catcount{
  color: var(--muted);
  white-space: nowrap;
}

/* tlačítko více */
.brand-more-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 40px;
  padding: 0 16px;
  margin-top: 12px;
  margin-bottom: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration:none;
}

.brand-more-btn:hover{
  opacity:.9;
}

/* spodní popis */
.brand-full-desc{
  margin-top: 24px;
}

.brand-full-text{
  padding: 16px;
  line-height: 1.6;
  font-size: 1rem;
}
.loyalty_program a
{
  text-decoration: underline;
  color: var(--primary);
  font-size: 1.1rem;
}