/* IVN atelier — styly celého webu
   Vygenerováno skriptem shoptet/sestav.py ze shoptet/zahlavi.html + zapati.html.
   Needitovat — změny patří do zdroje. */

/* ===== ze zahlavi.html ===== */

/* ==========================================================================
   0) Proměnné
   Jediné místo, kde se ladí věci platné pro celý web.
   ========================================================================== */
:root {
  /* Bílá mezera mezi fotkami. Platí pro kategorie, homepage, výpis produktů,
     bannery i galerii na detailu produktu — všude se odkazuje sem, takže
     změna téhle jedné hodnoty přenastaví mezery na celém webu. */
  --ivn-gap: 4px;

  --ivn-gold: #b09a62;   /* jediná barevná konstanta webu */
  --ivn-ink: #12100e;    /* text a plné plochy */
  --ivn-muted: #6e6a63;  /* doplňkový text */
  --ivn-line: #e2ded7;   /* vlasové linky */
  --ivn-soft: #f7f5f2;   /* podklad panelů */

  --ivn-text-w: 640px;   /* šířka textového sloupce na homepage */
  --ivn-ease: cubic-bezier(.22, .61, .36, 1);

  /* Skutečná šířka okna bez posuvníku; hodnotu dopočítá skript dole.
     `100vw` je jen záloha pro případ, že by skript neběžel — sama o sobě
     počítá i s posuvníkem a stránka by dostala vodorovné posouvání. */
  --ivn-vw: var(--ivn-fullw, 100vw);

  /* ------------------------------------------------------------------------
     PŘEPÍNAČ ŠÍŘKY velkých bloků — dlaždice kategorií a výpis produktů.
     Fotky na homepage jdou přes celé okno vždycky (to je princip varianty
     Editorial); tohle rozhoduje o zbytku, ať je celý web v jedné šířce.

       přes celé okno (od kraje ke kraji):
         --ivn-blok: var(--ivn-vw);
         --ivn-blok-posun: calc(50% - var(--ivn-vw) / 2);

       v šířce obsahu (jako nadpisy a text):
         --ivn-blok: 100%;
         --ivn-blok-posun: 0;
     ------------------------------------------------------------------------ */
  --ivn-blok: var(--ivn-vw);
  --ivn-blok-posun: calc(50% - var(--ivn-vw) / 2);
}

@media (max-width: 767px) {
  /* Na mobilu je dlaždice zhruba třetinová, takže i mezera musí být menší —
     jinak by v poměru k fotce působila dvakrát tak silně. */
  :root { --ivn-gap: 3px; }
}

/* ==========================================================================
   1) Základ
   Převzato z dřívějšího vlastního CSS. Beze změny — jen přeskládané do
   sekcí, ať je vidět, co k čemu patří. Podrobnosti v shoptet/PREVZATO.md.
   ========================================================================== */

a:hover { color: var(--ivn-gold); }

/* --- nadpisy --- */
h1, h2, h3, h4, h5, h6 { font-size: 2em; font-weight: 100; }
body:not(.type-product.type-detail) h1 {
  font-size: 2em;
  font-weight: 100;
  text-transform: uppercase;
}

/* --- výpis produktů, obecné --- */
.products-block .p { border: none; }
.products-block > div .p .name { height: auto; }
/* Název kategorie i produktu malými písmeny, první velké. */
.products-block > div .p .name:first-letter { text-transform: uppercase; }
/* Tlačítka do košíku se ve výpisu neukazují — nakupuje se z detailu. */
.products-block > div .p .p-bottom > div .p-tools { display: none; }
.price-final-holder { font-size: 75%; }

/* --- štítky --- */
.flag.flag-action { background-color: #666; }
.flag.flag-new { background-color: #000; }
.flag.flag-tip { background-color: #888; }
.flag.flag-custom1 { background-color: #ccc; }
.flags.flags-extra { display: none; }

/* Dostupnost se NESCHOVÁVÁ. Původní pole ji dřív obarvovalo na bílo, ale
   v září 2026 to v Shoptetu někdo zakomentoval a doplnil do patičky skript,
   který dostupnost u velikostí vypisuje (viz zapati.html) — dostupnost má být
   vidět. */

/* --- boxy a drobnosti --- */
.box-categories h4 { text-transform: uppercase; }

/* ==========================================================================
   2) Hlavička a menu
   ========================================================================== */

/* Přilepená hlavička. Dřív to dělal scrollovací handler v jQuery, který
   hlavičce nastavil `position: fixed` — jenže tím ji vyndal z toku stránky
   a obsah v tu chvíli poskočil o její výšku nahoru. `sticky` udělá totéž
   bez poskočení a bez skriptu. */
#header {
  position: sticky;
  top: 0;
  z-index: 100;   /* původní z-index: 1 překryla i lišta souhlasu */
}

/* Rozbalovací podmenu.
   Šablona mu dává pevných `width: 200px`. Text se v něm nemá zalamovat
   (dvouřádkové položky v podmenu vypadají špatně) — jenže s pevnou šířkou
   pak delší položky vylezou přes černý podklad ven („vouchery, dárky,
   doplňky“, „ponožky, šály, svetry“, „NAVRHNI SI KALHOTY“).
   Řešení je nechat šířku dopočítat z obsahu a jen ji omezit shora, ať panel
   nevyjede z okna. */
.navigation-in ul.menu-level-2 {
  width: auto;
  min-width: 200px;
  max-width: min(340px, 92vw);
}
.navigation-in ul.menu-level-2 li a {
  padding-right: 24px;   /* šablona řeší jen levé odsazení (40 px) */
  white-space: nowrap;
}

/* Názvy kategorií se v podmenu píšou tak, jak jsou zadané v administraci.
   Dřív tu byla dvě protichůdná pravidla (`none !important` a `uppercase`);
   vyhrávalo to první, takže výsledek je stejný jako dosud. */
.categories ul a,
.navigation-in ul.menu-level-2 li a { text-transform: none; }

.navigation-in ul li a b { font-weight: 300; }
.navigation-in ul li a:hover,
.navigation-in ul li a span:hover { color: var(--ivn-gold); }

.menu-helper > span {
  font-weight: 300;
  text-transform: uppercase;
}
.menu-item--6 a { text-transform: uppercase; }

/* ==========================================================================
   3) Banner
   Prolínání místo posunu. Převzato beze změny.
   ========================================================================== */
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  -webkit-transform: none;
  transform: none;
}
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active { opacity: 1; }
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { opacity: 1; }
.carousel-fade .carousel-control { z-index: 2; }

@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-fade .carousel-inner > .item.next,
  .carousel-fade .carousel-inner > .item.active.right {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.prev,
  .carousel-fade .carousel-inner > .item.active.left {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.next.left,
  .carousel-fade .carousel-inner > .item.prev.right,
  .carousel-fade .carousel-inner > .item.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/* Odkaz v rozšířeném banneru.
   Dřív tu byla chyba: u druhého mediálního dotazu chyběla `{`, takže se celý
   zahodil a pravidla pod ním spadla na úroveň dokumentu — `top: 88%` pak
   platilo ve všech šířkách a přebilo `top: 85%` nad sebou. */
@media (max-width: 992px) {
  .extended-banner-link {
    top: 85%;
    height: 24px;
    font-size: 70%;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .extended-banner-link { top: 88%; }
}

/* Dva mediální dotazy, které byly původně omylem vnořené do sebe
   (`min-width: 768px` uvnitř `max-width: 479px`), takže to druhé nemohlo
   nikdy platit. */
@media (min-width: 321px) and (max-width: 479px) {
  .columns-mobile-2 .products-block > div .p a img { margin-bottom: 1px; }
  .columns-mobile-2 .products-block > div .p a { min-height: 20px !important; }
}
@media (min-width: 768px) {
  .products-block > div .p .p-bottom,
  .products-block > div .p .p-bottom.single-button { padding: 0; }
}

/* ==========================================================================
   4) Dlaždice kategorií
   Jeden komponent pro čtyři místa: homepage, /produkty/, /kolekce/
   a /nase-zakaznice/. Blok s odkazy a fotkami se vkládá do zdrojového kódu
   konkrétní stránky a generuje ho miniaplikace — vzhled je celý tady, takže
   po výměně kategorie zůstane stejný.

   Blok vypadá takhle:
     <div class="ivn-tiles" data-count="18"> … </div>
   `data-count` je počet dlaždic; podle něj se řídí, kolik jich je na řádek,
   aby se při menším počtu roztáhly přes celou šířku místo aby zůstaly
   nalepené vlevo.
   ========================================================================== */

.ivn-tiles {
  --ivn-cols: 6;
  display: grid;
  grid-template-columns: repeat(var(--ivn-cols), minmax(0, 1fr));
  gap: var(--ivn-gap);
  /* Šířku řídí přepínač v sekci 0. */
  width: var(--ivn-blok);
  margin: 0 0 40px var(--ivn-blok-posun);
  padding: 0;
  list-style: none;
}

/* Míň dlaždic než plný řádek → tolik sloupců, kolik je dlaždic.
   Šest a víc zůstává na šesti a přetéká do dalšího řádku. */
.ivn-tiles[data-count="1"] { --ivn-cols: 1; }
.ivn-tiles[data-count="2"] { --ivn-cols: 2; }
.ivn-tiles[data-count="3"] { --ivn-cols: 3; }
.ivn-tiles[data-count="4"] { --ivn-cols: 4; }
.ivn-tiles[data-count="5"] { --ivn-cols: 5; }

.ivn-tile {
  --ivn-pos: 50% 50%;          /* výřez fotky; přebíjí se na dlaždici */
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;          /* vlastní stacking context, ať se scrim nepere se šablonou */
  aspect-ratio: 1 / 1;         /* čtverec */
  background: #e7e4e0;         /* než se fotka načte */
  color: #fff;
  text-decoration: none;
}
.ivn-tile:hover,
.ivn-tile:focus { color: #fff; text-decoration: none; }
.ivn-tile:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

/* Fotky jsou 2:3 na výšku, dlaždice je čtverec — ořezává se shora a zdola.
   Když u konkrétní fotky sedí líp jiný výřez, dá se na dlaždici přebít:
   style="--ivn-pos: 50% 25%" (to nastavuje miniaplikace). */
.ivn-tile__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--ivn-pos);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.ivn-tile:hover .ivn-tile__img { transform: scale(1.05); }

/* Fotky s názvem vypáleným do obrázku.
   Dnešní sada kategorií má dole v obrázku pruh s názvem kategorie — a ten se
   bije s popiskem, který dělá CSS (u „košile a saka“ je v obrázku dokonce jiné
   znění než v odkazu). Když se na blok dá `data-orez="pruh"`, fotka se
   přiblíží tak, že pruh vypadne ze čtverce ven.
   Fotky bez pruhu tenhle atribut nepotřebují — vynechá se a nic se neořezává. */
.ivn-tiles[data-orez="pruh"] .ivn-tile { --ivn-pos: 50% 0; }   /* výchozí výřez odshora; dlaždice ho může přebít */
.ivn-tiles[data-orez="pruh"] .ivn-tile__img {
  bottom: auto;                /* jinak by `inset: 0` výšku přebilo */
  height: 116%;
}

/* Ztmavení spodní části. Nejde o dekoraci: nejsvětlejší fotky mají přesně
   pod popiskem bílou plochu a bez tohohle by na ní bílý text zmizel. Krytí je
   zvolené tak, aby i na bílé fotce vyšel kontrast textu nad 6:1, a na tmavé
   fotce přitom nebylo vidět. */
.ivn-tile::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 55%;
  background: linear-gradient(to top,
              rgba(0, 0, 0, .62) 0%,
              rgba(0, 0, 0, .34) 35%,
              rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.ivn-tile__label {
  position: absolute;
  bottom: 7%;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .85em;
  max-width: 86%;
  padding-bottom: .6em;
  border-bottom: 1px solid rgba(255, 255, 255, .9);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .45);
  white-space: nowrap;
}

/* Šipka je poskládaná z CSS (čára + otočený roh), ne z obrázku ani SVG —
   projde i editorem, který nepovolené značky vyhazuje. */
.ivn-tile__arrow {
  position: relative;
  flex: none;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform .3s ease;
}
.ivn-tile__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.ivn-tile:hover .ivn-tile__arrow { transform: translateX(5px); }

/* Tablet — tři na řádek. Zápis přes `[data-count]` je nutný kvůli
   specificitě: `.ivn-tiles[data-count="4"]` výš má dvě části selektoru,
   takže by samotné `.ivn-tiles` nepřebilo bez ohledu na pořadí. */
@media (max-width: 991px) {
  .ivn-tiles,
  .ivn-tiles[data-count] { --ivn-cols: 3; }
  .ivn-tiles[data-count="1"] { --ivn-cols: 1; }
  .ivn-tiles[data-count="2"] { --ivn-cols: 2; }
  .ivn-tile__label { font-size: 11px; letter-spacing: .1em; gap: .7em; }
  .ivn-tile__arrow { width: 18px; }
}

/* Mobil — vždycky po dvou, ať je dlaždic kolik chce. */
@media (max-width: 767px) {
  .ivn-tiles,
  .ivn-tiles[data-count] { --ivn-cols: 2; }
  .ivn-tiles[data-count="1"] { --ivn-cols: 1; }
  .ivn-tile__label { font-size: 10px; max-width: 90%; }
  .ivn-tile__arrow { width: 14px; }

  /* Lichý počet → poslední dlaždice na střed, v poloviční šířce.
     `:not(:first-child)` vynechá případ jediné dlaždice — ta má zabrat
     celou šířku, ne se scvrknout na polovinu. */
  .ivn-tile:last-child:nth-child(odd):not(:first-child) {
    grid-column: span 2;
    justify-self: center;
    width: calc(50% - var(--ivn-gap) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ivn-tile__img,
  .ivn-tile__arrow { transition: none; }
  .ivn-tile:hover .ivn-tile__img { transform: none; }
}

/* ==========================================================================
   5) Homepage
   Podle varianty B „Editorial“: úzký sloupec textu, patkové mezinadpisy,
   fotky přes celou šířku okna, kategorie jako sloupec verzálek.

   Pořadí shora dolů: banner → text → dlaždice kategorií → fotky.
   Dlaždice vkládá do obsahu editorka (sekce 4), tady jde o zbytek.

   Banner zůstává, jak je dnes. Varianta B ho roztahovala na celou první
   obrazovku; kdyby se to mělo vrátit, patří sem pravidla na `.wide-carousel`.
   ========================================================================== */

/* --- výpis produktů v záložkách na homepage --- */
body.type-index .homepage-tabs-wrapper .shp-tabs .shp-tab-link {
  color: var(--ivn-ink);
  font-size: 20px;
  letter-spacing: .02em;
  text-transform: none;
}
body.type-index .homepage-tabs-wrapper .products-block .p > a.image {
  display: block;
  overflow: hidden;
}
body.type-index .homepage-tabs-wrapper .products-block .p > a.image img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  box-shadow: none !important;
  filter: grayscale(.25);
  transition: filter .4s var(--ivn-ease), transform .6s var(--ivn-ease);
}
body.type-index .homepage-tabs-wrapper .products-block .p:hover > a.image img {
  filter: none;
  transform: scale(1.03);
}
body.type-index .homepage-tabs-wrapper .products-block .p .name {
  font-size: 12px;
  letter-spacing: .14em;
}

/* --- text v úzkém sloupci --- */
body.type-index .welcome {
  color: var(--ivn-ink);
  font-size: 15px;
  line-height: 1.8;
}
body.type-index .welcome .ivn-blank { display: none !important; }

body.type-index .welcome p:not(.ivn-row):not(.ivn-links),
body.type-index .welcome ul,
body.type-index .welcome ol {
  max-width: var(--ivn-text-w);
  margin-right: auto;
  margin-left: auto;
}
body.type-index .welcome ul { padding-left: 1.1em; }
body.type-index .welcome ul li { margin-bottom: .6em; }
body.type-index .welcome ul li::marker { color: var(--ivn-gold); }

/* Mezinadpisy patkově a velké — jediné místo, kde se zvyšuje hlasitost textu.
   Inline `font-size` z editoru se přebíjí, jinak by každý nadpis zůstal
   jinak velký. */
body.type-index .welcome .ivn-lead {
  margin: 88px auto 32px;
  text-align: center;
  font-size: clamp(24px, 2.6vw, 38px) !important;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: none;
}
body.type-index .welcome .ivn-lead span,
body.type-index .welcome .ivn-lead strong {
  font-size: inherit !important;
  font-weight: 400;
}
body.type-index .welcome .ivn-lead a { color: inherit; }
body.type-index .welcome .ivn-lead a:hover { color: var(--ivn-gold); }

/* Velikost a zarovnání z administrace — vždycky třídou, nikdy inline stylem.
   Bez modifikátoru platí výchozí velikost výš (odpovídá --m).
   `!important` je tu ze stejného důvodu jako u .ivn-lead: editor Shoptetu
   do obsahu sype vlastní `font-size`, který by jinak vyhrál. */
body.type-index .welcome .ivn-lead--s  { font-size: clamp(19px, 1.9vw, 27px) !important; }
body.type-index .welcome .ivn-lead--l  { font-size: clamp(28px, 3.4vw, 50px) !important; }
body.type-index .welcome .ivn-lead--xl { font-size: clamp(32px, 4.6vw, 68px) !important; }

/* Odstavec — větší varianta pro uvozovací větu. */
body.type-index .welcome p.ivn-text--l {
  font-size: 18px !important;
  line-height: 1.7;
}
body.type-index .welcome p.ivn-text--l span,
body.type-index .welcome p.ivn-text--l strong { font-size: inherit !important; }

/* Zarovnání. Nadpis je bez třídy na střed, odstavec vlevo. */
body.type-index .welcome .ivn-vlevo { text-align: left !important; }
body.type-index .welcome .ivn-stred { text-align: center !important; }

/* Popisek dlaždic — tři kroky, výchozí je bez třídy (viz .ivn-tile__label). */
.ivn-tiles--popisky-s .ivn-tile__label { font-size: 10px; letter-spacing: .12em; }
.ivn-tiles--popisky-l .ivn-tile__label { font-size: 15px; letter-spacing: .16em; }
@media (max-width: 991px) {
  .ivn-tiles--popisky-s .ivn-tile__label { font-size: 9px; }
  .ivn-tiles--popisky-l .ivn-tile__label { font-size: 13px; }
}
@media (max-width: 767px) {
  .ivn-tiles--popisky-s .ivn-tile__label { font-size: 9px; }
  .ivn-tiles--popisky-l .ivn-tile__label { font-size: 12px; }
}

body.type-index .welcome hr {
  max-width: var(--ivn-text-w);
  margin: 80px auto;
  border: 0;
  border-top: 1px solid var(--ivn-line);
}

/* --- fotky přes celou šířku okna ---
   `.welcome` sedí v kontejneru širokém 1418 px; tohle ho obejde bez obalování
   divem. Od šířky okna se odečítá posuvník (proměnná z JS), jinak by na
   Windows vznikl vodorovný posuvník. */
body.type-index .welcome .ivn-row {
  display: grid;
  gap: var(--ivn-gap);
  width: var(--ivn-vw);
  margin: 72px 0 72px calc(50% - var(--ivn-vw) / 2);
  text-align: left;   /* přebíjí inline text-align:center z editoru */
}
body.type-index .welcome .ivn-row > a,
body.type-index .welcome .ivn-row > img {
  display: block;
  overflow: hidden;
  background: #efece7;
}
body.type-index .welcome .ivn-row img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: grayscale(.3);
  transition: filter .45s var(--ivn-ease), transform .9s var(--ivn-ease);
}
body.type-index .welcome .ivn-row > a:hover img { filter: none; transform: scale(1.03); }
body.type-index .welcome .ivn-row > a:focus-visible {
  outline: 2px solid var(--ivn-gold);
  outline-offset: -4px;
}

body.type-index .welcome .ivn-row--5 { grid-template-columns: repeat(5, 1fr); }
body.type-index .welcome .ivn-row--5 > a { aspect-ratio: 2 / 3; }
body.type-index .welcome .ivn-row--4 { grid-template-columns: repeat(4, 1fr); }
body.type-index .welcome .ivn-row--4 > a { aspect-ratio: 3 / 4; }
body.type-index .welcome .ivn-row--3 { grid-template-columns: repeat(3, 1fr); }
body.type-index .welcome .ivn-row--3 > a { aspect-ratio: 3 / 4; }
body.type-index .welcome .ivn-row--2 { grid-template-columns: repeat(2, 1fr); }
body.type-index .welcome .ivn-row--2 > a { aspect-ratio: 4 / 3; }
body.type-index .welcome .ivn-row--1 > a { aspect-ratio: 5 / 2; }

@media (max-width: 991px) {
  body.type-index .welcome .ivn-row--5 { grid-template-columns: repeat(3, 1fr); }
  body.type-index .welcome .ivn-row--4 { grid-template-columns: repeat(2, 1fr); }
  body.type-index .welcome .ivn-row { margin-top: 48px; margin-bottom: 48px; }
}
@media (max-width: 575px) {
  body.type-index .welcome .ivn-row--5,
  body.type-index .welcome .ivn-row--3 { grid-template-columns: repeat(2, 1fr); }
  body.type-index .welcome .ivn-row--2 { grid-template-columns: 1fr; }
  body.type-index .welcome .ivn-row--2 > a { aspect-ratio: 3 / 2; }
  body.type-index .welcome .ivn-row--1 > a { aspect-ratio: 3 / 2; }
  body.type-index .welcome .ivn-lead { margin-top: 56px; }
}

/* --- seznam kategorií jako sloupec verzálek --- */
body.type-index .welcome .ivn-links {
  max-width: var(--ivn-text-w);
  margin: 56px auto 72px;
  text-align: center;
}
body.type-index .welcome .ivn-links a {
  display: block;
  padding: 9px 0;
  color: var(--ivn-ink);
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: color .16s var(--ivn-ease), letter-spacing .25s var(--ivn-ease);
}
body.type-index .welcome .ivn-links a:hover { color: var(--ivn-gold); letter-spacing: .3em; }
body.type-index .welcome .ivn-links a:focus-visible {
  outline: 1px solid var(--ivn-gold);
  outline-offset: 4px;
}
/* Konfigurátory nejsou kategorie a v seznamu to má být vidět. */
body.type-index .welcome .ivn-links a.ivn-link-accent {
  color: var(--ivn-gold);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  body.type-index .welcome .ivn-row img,
  body.type-index .welcome .ivn-links a,
  body.type-index .homepage-tabs-wrapper .products-block .p > a.image img {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   6) Výpis produktů — v kategorii i „Doporučujeme“ na detailu
   Podle varianty D „Galerie“: souvislá plocha fotek, popiska přes fotku.

   Rozdíl proti variantě D: název a cena jsou vidět POŘÁD, ne až při najetí.
   Hover zůstává, jak byl — mírné přiblížení fotky a záměna za druhou fotku,
   kterou šablona vypisuje v `data-next`.

   Každé pravidlo je zapsané dvakrát: pro `#products` (výpis v kategorii)
   a pro `#productsRelated .products-block` (blok „Doporučujeme“ v záložce na
   detailu produktu). Oba mají stejnou strukturu, takže vypadají stejně.
   Obojí je selektor s id, takže přebije jak šablonu, tak Vlastní CSS e-shopu
   bez jediného !important.
   ========================================================================== */

#products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ivn-gap);
  /* Šířku řídí přepínač v sekci 0 — výpis je ve stejné šířce jako dlaždice. */
  width: var(--ivn-blok);
  margin: 22px 0 0 var(--ivn-blok-posun);
}
/* „Doporučujeme“ na detailu zůstává v šířce obsahu — sedí pod objednávkou
   a přes celé okno by se odtrhlo od zbytku detailu. */
#productsRelated .products-block {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ivn-gap);
  margin: 22px 0 0;
}
/* Clearfix šablony (`::before`/`::after` s content) by se v gridu počítal
   jako dvě buňky a udělal by v první řadě díry. */
#products::before,
#products::after,
#productsRelated .products-block::before,
#productsRelated .products-block::after { display: none; }

#products > .product,
#productsRelated .products-block > .product { float: none; width: auto; padding: 0; }

#products .p,
#productsRelated .products-block .p {
  display: block;      /* popiska se překrývá, sloupec už není potřeba */
  position: relative;
  height: 100%;
  margin: 0;
  border: 0;
  /* Vlastní vrstvení: bez `isolation` by štítek s vyšším z-indexem vylezl
     při scrollování nad hlavičku, která se drží nahoře. */
  isolation: isolate;
}

/* --- fotka ---
   Poměr drží obal, ne obrázek — místo pro fotku je rezervované dřív, než se
   fotka stáhne, takže se plocha při načítání nepřeskládává. */
#products .p > a.image,
#productsRelated .products-block .p > a.image {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: var(--ivn-soft);
}
#products .p > a.image img,
#productsRelated .products-block .p > a.image img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  box-shadow: none;    /* stín by mezi fotkami udělal šedé spáry */
  transition: transform 1s var(--ivn-ease);
}
#products .p:hover > a.image img,
#productsRelated .products-block .p:hover > a.image img { transform: scale(1.05); }

/* Ztmavení pod popiskou. Ve variantě D se kreslilo až při najetí; když je
   popiska vidět pořád, musí být pořád i ono — bílý text jinak na světlé
   fotce zmizí. `.flags` mají vlastní z-index, takže štítek zůstane nad ním. */
#products .p > a.image::after,
#productsRelated .products-block .p > a.image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .58), rgba(0, 0, 0, 0) 42%);
  pointer-events: none;
}

/* --- popiska přes fotku, trvale --- */
#products .p-in,
#productsRelated .products-block .p-in {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 0 16px 18px;
  text-align: center;
  pointer-events: none;   /* klikací zůstává fotka pod tím */
}

#products .p .name,
#productsRelated .products-block .p .name {
  float: none;
  width: auto;
  height: auto;
  padding: 0;
  color: #fff;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
  /* Popiska je přisazená ke spodku fotky. Bez tohohle by jednořádkový název
     začínal níž než dvouřádkový a řádky by se v mřížce nesrovnaly. Rezervuje
     se místo na dva řádky, takže první řádek začíná u všech dlaždic stejně.
     3em = 2 řádky při `line-height: 1.5`, takže to platí i po změně velikosti
     písma. Delší název se vejde taky — box se roztáhne, jen se posune níž. */
  min-height: 3em;
  /* Fotky jsou na světlém pozadí ateliéru — samotné ztmavení nestačí,
     bílý text potřebuje ještě vlastní stín. */
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
  pointer-events: auto;
}
#products .p .name:hover,
#productsRelated .products-block .p .name:hover { color: #fff; text-decoration: underline; }

#products .p-bottom,
#productsRelated .products-block .p-bottom { padding: 5px 0 0; }
#products .p-bottom .prices,
#productsRelated .products-block .p-bottom .prices {
  float: none;
  width: auto;
  padding: 0;
  font-size: 12px;
  text-align: center;
}
#products .p-bottom .price-final strong,
#productsRelated .products-block .p-bottom .price-final strong {
  color: #fff;
  font-weight: 400;
  letter-spacing: .06em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

/* --- štítky ---
   Bez podkladu, jen bílý text se stínem — plocha fotek zůstane čistá. */
#products .p .flags-default,
#productsRelated .products-block .p .flags-default {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 3;
  margin: 0;
}
#products .p .flags-default .flag,
#productsRelated .products-block .p .flags-default .flag {
  float: none;
  clear: none;
  margin: 0;
  padding: 0;
  background: none;
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  line-height: 1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
#products .p .flags-default .flag::before,
#products .p .flags-default .flag::after,
#productsRelated .products-block .p .flags-default .flag::before,
#productsRelated .products-block .p .flags-default .flag::after { display: none; }

/* --- lišta řazení (jen výpis v kategorii) --- */
#category-header .listSorting__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  justify-content: center;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
#category-header .listSorting__control {
  padding: 5px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--ivn-muted);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
#category-header .listSorting__control:hover { color: var(--ivn-ink); }
#category-header .listSorting__control--current {
  color: var(--ivn-ink);
  border-bottom-color: var(--ivn-gold);
}

/* Varianta D tu měla výjimku pro dotykové displeje — popiska se tam vracela
   pod fotku, protože bez myši nebylo čím ji vyvolat. Když je vidět pořád,
   výjimka odpadá a výpis vypadá všude stejně. */

@media (max-width: 991px) {
  #products,
  #productsRelated .products-block { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  #products,
  #productsRelated .products-block { grid-template-columns: repeat(2, 1fr); }
  #products .p .name,
  #productsRelated .products-block .p .name { font-size: 11px; letter-spacing: .08em; }
  #products .p-bottom .prices,
  #productsRelated .products-block .p-bottom .prices { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #products .p > a.image img,
  #productsRelated .products-block .p > a.image img { transition: none; transform: none !important; }
}

/* ==========================================================================
   7) Detail produktu
   Podle varianty C „Lookbook“: fotky tvoří mozaiku ve dvou sloupcích,
   objednávka se drží vpravo nahoře.

   Rozdíl proti variantě C: sloupec s fotkami je užší a objednávka širší, aby
   se na notebooku vešly do okna všechny 4 fotky (dřív jen 2). Šířka se
   nepočítá pevným procentem, ale z VÝŠKY okna — viz komentář u pravidla.

   Do objednávkové logiky se nezasahuje: dlaždice velikostí jen přestaví
   hodnotu původního <select>u a pošlou `change`, takže cena, kód i dostupnost
   se přepočítají jako dosud (a tabulka velikostí z patičky funguje dál).
   ========================================================================== */

body.type-detail {
  --ivn-col-gap: 56px;         /* mezera mezi fotkami a objednávkou */
  --ivn-sticky-top: 16px;      /* odsazení přilepeného sloupce od okraje */
}

/* --- mřížka detailu ---
   Šablona dává obrázkovému sloupci záporné okraje (−80 px od 1200 px,
   −200 px od 1440 px), aby fotka „vylezla“ z obsahu. Tady se ruší. */
body.type-detail .p-detail-inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;     /* sloupce nejsou dohromady na plnou šířku */
  gap: var(--ivn-col-gap);
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px 0 0;
}

/* Šířka sloupce s fotkami se odvozuje od výšky okna.
   Fotka je 2:3, sloupce jsou dva. Aby se do okna vešly DVĚ ŘADY (tj. 4 fotky),
   musí platit:  výška dvou řad = 1,5 × (šířka sloupce − mezera) + mezera ≤ volná výška.
   Odtud šířka ≈ volná výška / 1,5. Od výšky okna se odečítá 170 px na
   hlavičku, drobečkovou navigaci a odsazení.
   `clamp` to drží mezi rozumným minimem a 40 % obsahu — na vysokém monitoru
   ať fotky nezaberou celou stránku. */
body.type-detail .p-detail-inner .p-image-wrapper {
  order: 1;
  flex: 0 1 clamp(340px, calc((100vh - 170px) / 1.5), 40%);
  width: auto;
  min-width: 0;                /* bez tohohle by široká fotka roztáhla sloupec */
  margin: 0;
  padding: 0;
}

body.type-detail .p-detail-inner .p-data-wrapper {
  order: 2;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 640px;
  padding: 0;
  /* Fotky jsou vysoké, objednávka krátká — ať zůstane u ruky po celou dobu
     scrollování. `align-self` je nutné, jinak by se flex položka roztáhla
     na výšku sloupce a přilepení by nemělo kam fungovat. */
  position: sticky;
  top: var(--ivn-sticky-top);
  align-self: flex-start;
}

/* --- hlavní fotka a pás náhledů ---
   Původní galerii nahrazuje mozaika; ruší se až tehdy, když ji skript
   opravdu postaví (třída `ivn-has-gal`). Bez JS zůstane vše jako dosud. */
body.type-detail .p-image,
body.type-detail .image360 {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
body.type-detail .p-image::after { display: none; }
body.type-detail .p-image a { display: block; }
body.type-detail .p-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: auto;
  margin: 0;
}
/* `!important` je tu nutné, ne z pohodlnosti: galerie Shoptetu si na
   `.p-image` sama nastaví inline `style="display: block"`, a inline zápis
   přebije každé pravidlo ze stylopisu. Bez toho zůstane původní velká fotka
   nad mozaikou a ta se odsune pod okraj okna. */
body.type-detail .p-image-wrapper.ivn-has-gal > .p-image,
body.type-detail .p-image-wrapper.ivn-has-gal .p-thumbnails-wrapper { display: none !important; }

/* --- mozaika fotek --- */
body.type-detail .ivn-gal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ivn-gap);
}
body.type-detail .ivn-gal__item {
  display: block;
  position: relative;
  overflow: hidden;
  /* Všechny dlaždice ve stejném poměru jako fotky — nic se neořezává
     a mozaika vyjde i u lichého počtu fotek. */
  aspect-ratio: 2 / 3;
  background: var(--ivn-soft);
}
body.type-detail .ivn-gal__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* --- název a perex --- */
body.type-detail .p-detail-inner-header h1 {
  margin: 0 0 16px;
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .12em;
}
body.type-detail .p-detail-inner .p-short-description {
  max-width: 46em;
  margin: 0 0 26px;
  color: var(--ivn-muted);
  font-size: 14px;             /* šablona tu má 120 %, což je na perex moc */
  line-height: 1.65;
}
body.type-detail .p-detail-inner .p-short-description p:last-child { margin-bottom: 0; }

/* --- výběr varianty ---
   Tabulka `label | select` se rozpadá na bloky pod sebou: popisek verzálkami,
   pod ním dlaždice (nebo původní select, když JS neběží). */
body.type-detail .p-variants-block { margin: 0 0 20px; padding: 0; }
body.type-detail .p-variants-block table.detail-parameters,
body.type-detail .p-variants-block table.detail-parameters tbody,
body.type-detail .p-variants-block table.detail-parameters tr,
body.type-detail .p-variants-block table.detail-parameters th,
body.type-detail .p-variants-block table.detail-parameters td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
}
body.type-detail .p-variants-block table.detail-parameters tr.variant-list { margin-bottom: 18px; }
body.type-detail .p-variants-block table.detail-parameters th {
  margin-bottom: 9px;
  color: var(--ivn-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}
body.type-detail .p-variants-block select {
  width: 100%;
  max-width: 320px;
  height: 46px;
  border-radius: 0;
}

/* Dlaždice variant. `.ivn-has-opts` nasazuje JS na buňku, kterou obsloužil —
   teprve tehdy se schová původní select. */
body.type-detail .ivn-opts { display: flex; flex-wrap: wrap; gap: 6px; }
body.type-detail td.ivn-has-opts select {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}
body.type-detail .ivn-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 44px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--ivn-line);
  border-radius: 0;
  color: var(--ivn-ink);
  font: inherit;
  font-size: 12px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
body.type-detail .ivn-opt:hover { border-color: var(--ivn-ink); }
body.type-detail .ivn-opt:focus-visible { outline: 2px solid var(--ivn-ink); outline-offset: 2px; }
body.type-detail .ivn-opt.is-active {
  background: var(--ivn-ink);
  border-color: var(--ivn-ink);
  color: #fff;
}
body.type-detail .ivn-opt.is-off {
  color: #b6b1a9;
  cursor: not-allowed;
  text-decoration: line-through;
}
body.type-detail .ivn-opt.is-off:hover { border-color: var(--ivn-line); }

/* --- kód zboží a tabulka velikostí ---
   `#size-info-block` vkládá skript z patičky (rozměry zvolené velikosti). */
body.type-detail .p-basic-info-block {
  margin: 0;
  padding: 14px 0;
  border-style: solid none;
  border-width: 1px 0;
  border-color: var(--ivn-line);
  /* Šablona sem dává tři `.block` s `flex: 1 1 auto`, z toho dva prázdné —
     kód zboží pak plave uprostřed. Prázdné dostanou nulovou šířku. */
  justify-content: flex-start;
}
body.type-detail .p-basic-info-block .block { flex: 0 1 auto; padding: 0; }
body.type-detail .p-basic-info-block .p-code {
  color: var(--ivn-muted);
  font-size: 12px;
  letter-spacing: .04em;
}
body.type-detail .p-basic-info-block .p-code-label { font-weight: 600; }

body.type-detail #size-info-block {
  margin: 0 0 22px;
  padding: 14px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ivn-line);
  border-radius: 0;
  color: var(--ivn-muted);
  font-size: 13px;
  line-height: 1.6;
}
body.type-detail #size-info-block strong { color: var(--ivn-ink); font-weight: 600; }
body.type-detail #size-info-block a { color: var(--ivn-ink); text-decoration: underline; }

/* --- cena a košík ---
   Šablona to řeší jako šedý pruh s cenou vlevo a tlačítkem vpravo. Tady je
   cena na svém řádku a pod ní plná šířka pro množství + tlačítko. */
body.type-detail #product-detail-form > div.p-to-cart-block,
body.type-detail .p-to-cart-block {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0;
  background: none;
  border: 0;
}
body.type-detail .p-to-cart-block .p-final-price-wrapper {
  flex: 1 1 100%;
  float: none;
  width: 100%;
  margin: 0;
  line-height: 1;
  text-align: left;
}
body.type-detail .p-to-cart-block .p-final-price-wrapper > strong.price-final {
  display: block;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .01em;
}
body.type-detail .p-to-cart-block .price-final .price-final-holder { font-size: 100%; }
body.type-detail .p-to-cart-block .price-measure {
  display: block;
  margin-top: 4px;
  color: var(--ivn-muted);
  font-size: 12px;
}
body.type-detail .p-to-cart-block .p-add-to-cart-wrapper { flex: 1 1 100%; width: 100%; margin: 0; }
body.type-detail .p-to-cart-block .add-to-cart {
  display: flex;
  float: none;
  gap: 10px;
  width: 100%;
  height: auto;
}

/* Počítadlo kusů: šablona pozicuje +/− absolutně a počítá s výškou 48 px,
   proto se přenastavují všechny tři rozměry naráz. */
body.type-detail .add-to-cart .quantity {
  flex: 0 0 auto;
  height: 56px;
  padding-right: 44px;
  padding-left: 44px;
  background-color: #fff;
  border-color: var(--ivn-line);
  border-radius: 0;
}
body.type-detail .add-to-cart .quantity input {
  width: 52px;
  height: 54px;
  font-family: inherit;
  font-size: 14px;
}
body.type-detail .add-to-cart .quantity .increase,
body.type-detail .add-to-cart .quantity .decrease {
  width: 44px;
  height: 54px;
  border-color: var(--ivn-line);
}
body.type-detail .add-to-cart .quantity .increase::before,
body.type-detail .add-to-cart .quantity .decrease::before { line-height: 54px; }

body.type-detail .p-to-cart-block .add-to-cart-button.btn-conversion {
  flex: 1 1 auto;
  height: 56px;
  padding: 0 24px;
  background: var(--ivn-ink);
  border: 0;
  border-radius: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 56px;
  text-transform: uppercase;
  transition: background-color .15s ease;
}
body.type-detail .p-to-cart-block .add-to-cart-button.btn-conversion:hover,
body.type-detail .p-to-cart-block .add-to-cart-button.btn-conversion:focus { background: #38322c; }
body.type-detail .p-to-cart-block .add-to-cart-button.btn-conversion::before { margin-right: 10px; }

/* --- body pod tlačítkem (dodává skript, texty jsou v jeho hlavičce) --- */
body.type-detail .ivn-trust {
  display: grid;
  gap: 9px;
  margin: 0 0 20px;
  padding: 18px 0 0;
  border-top: 1px solid var(--ivn-line);
  list-style: none;
  color: var(--ivn-muted);
  font-size: 13px;
}
body.type-detail .ivn-trust li { position: relative; padding-left: 20px; line-height: 1.5; }
body.type-detail .ivn-trust li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 10px;
  height: 1px;
  background: var(--ivn-ink);
}

/* --- parametry pod objednávkou + ikony --- */
body.type-detail .p-param-block {
  margin-top: 4px;
  padding: 18px 0 0;
  border-top: 1px solid var(--ivn-line);
}
body.type-detail .p-param-block .detail-parameters-wrapper table.detail-parameters tbody tr th,
body.type-detail .p-param-block .detail-parameters-wrapper table.detail-parameters tbody tr td {
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.5;
  vertical-align: top;
}
body.type-detail .p-param-block .detail-parameters-wrapper table.detail-parameters tbody tr th {
  width: 34%;
  color: var(--ivn-muted);
  font-weight: 400;
  text-align: left;
  text-transform: none;
}
body.type-detail .p-param-block .link-icons { gap: 18px; }
body.type-detail .p-param-block a.link-icon {
  color: var(--ivn-muted);
  font-size: 12px;
  letter-spacing: .04em;
}
body.type-detail .p-param-block a.link-icon:hover { color: var(--ivn-ink); }

/* --- záložky a popis ---
   Popis běží přes celou šířku stránky, takže řádky mají klidně 180 znaků.
   Omezená míra řádku je tu ta hlavní změna. */
body.type-detail .p-detail-tabs-wrapper { max-width: 1480px; margin: 64px auto 0; }
body.type-detail #p-detail-tabs.shp-tabs {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ivn-line);
}
body.type-detail #p-detail-tabs.shp-tabs .shp-tab {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
body.type-detail #p-detail-tabs.shp-tabs .shp-tab-link {
  display: block;
  margin-bottom: -1px;
  padding: 0 0 14px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--ivn-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.type-detail #p-detail-tabs.shp-tabs .shp-tab.active .shp-tab-link,
body.type-detail #p-detail-tabs.shp-tabs .shp-tab-link:hover {
  border-bottom-color: var(--ivn-ink);
  color: var(--ivn-ink);
}

body.type-detail #tab-content { padding-top: 34px; }
body.type-detail .description-inner .basic-description {
  max-width: 74ch;
  font-size: 15px;
  line-height: 1.75;
}
body.type-detail .description-inner .basic-description p { margin-bottom: 1.1em; }
body.type-detail .description-inner .basic-description ul { margin: 0 0 1.4em; padding-left: 1.1em; }
body.type-detail .description-inner .basic-description li { margin-bottom: .35em; }

body.type-detail #productsRelated .product .p .name { font-size: 13px; letter-spacing: .04em; }
body.type-detail #productsRelated .product .p .price-final { font-weight: 400; }

/* --- spodní lišta (dodává skript) ---
   Objeví se, až cena s tlačítkem vyjede z obrazovky. */
body.type-detail .ivn-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--ivn-line);
  transform: translateY(101%);
  transition: transform .25s ease;
}
body.type-detail .ivn-bar.is-visible { transform: none; }
body.type-detail .ivn-bar__name {
  flex: 0 1 auto;
  overflow: hidden;
  font-size: 12px;
  letter-spacing: .1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Cena drží u názvu vlevo, ne uprostřed lišty — v pravém dolním rohu sedí
   plovoucí tlačítko „Odebírat novinky“ a překrylo by ji. */
body.type-detail .ivn-bar__price { flex: none; font-size: 16px; white-space: nowrap; }
body.type-detail .ivn-bar__btn {
  flex: none;
  height: 46px;
  margin-left: auto;
  padding: 0 26px;
  background: var(--ivn-ink);
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease;
}
body.type-detail .ivn-bar__btn:hover { background: #38322c; }

/* --- tablet a mobil ---
   991 px je hranice, na které šablona sama překlápí detail do jednoho sloupce. */
@media (max-width: 991px) {
  body.type-detail .p-detail-inner {
    flex-direction: column;
    gap: 28px;
    padding-top: 12px;
  }
  body.type-detail .p-detail-inner .p-image-wrapper,
  body.type-detail .p-detail-inner .p-data-wrapper {
    position: static;
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
  }
  body.type-detail .p-detail-tabs-wrapper { margin-top: 40px; }
}

@media (max-width: 767px) {
  body.type-detail { --ivn-col-gap: 24px; }
  body.type-detail .p-detail-inner-header h1 { font-size: 20px; }
  body.type-detail .p-to-cart-block .p-final-price-wrapper > strong.price-final { font-size: 24px; }
  body.type-detail .add-to-cart .quantity { flex: 0 0 auto; }
  body.type-detail .p-to-cart-block .add-to-cart-button.btn-conversion { padding: 0 12px; letter-spacing: .12em; }
  body.type-detail .ivn-bar { padding: 8px 12px; gap: 10px; }
  body.type-detail .ivn-bar__name { display: none; }
  body.type-detail .ivn-bar__price { flex: 1 1 auto; }
  body.type-detail .ivn-bar__btn { flex: 1 1 auto; padding: 0 14px; }
  body.type-detail .description-inner .basic-description { font-size: 14px; }

  /* Na mobilu z mozaiky vznikne jedna velká fotka a pod ní řádka náhledů.
     Kterou fotku ukázat velkou, řídí třída `is-main`; skript ji při ťuknutí
     na náhled přehodí a zvolenou fotku zároveň přesune na začátek galerie.
     Přesun v DOM je schválně — přes `order: -1` se to chovalo nepředvídatelně
     a velká fotka zůstávala pod náhledy. */
  body.type-detail .ivn-gal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: var(--ivn-gap);
  }
  body.type-detail .ivn-gal__item.is-main {
    grid-column: 1 / -1;
    margin-bottom: 6px;
  }
  /* Náhledy jsou menší a lehce odbarvené, ať je poznat, co je zrovna vidět. */
  body.type-detail .ivn-gal__item:not(.is-main) .ivn-gal__img {
    opacity: .55;
    transition: opacity .2s ease;
  }
  body.type-detail .ivn-gal__item:not(.is-main):hover .ivn-gal__img { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.type-detail .ivn-bar,
  body.type-detail .ivn-opt { transition: none; }
}

/* ==========================================================================
   8) Stránka „Napište nám“ — kontakt a formulář vedle sebe
   Blok s kontaktními údaji vkládá do obsahu stránky editorka
   (shoptet/kontakt-obsah.html); formulář si pod něj dopíše Shoptet sám.

   Chytá se přes `:has(.ivn-kontakt)`, ne přes adresu stránky — kdyby se blok
   vložil i jinam, layout se zachová a nic se nenastavuje zvlášť. Stránky
   bez toho bloku zůstávají, jak jsou.
   ========================================================================== */

body.type-page .content-inner:has(.ivn-kontakt) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px 72px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}
/* Nadpis a úvodní odstavec přes obě strany; pod nimi vlevo kontakt,
   vpravo formulář — v tom pořadí, v jakém jsou v dokumentu. */
body.type-page .content-inner:has(.ivn-kontakt) > h1,
body.type-page .content-inner:has(.ivn-kontakt) > p { grid-column: 1 / -1; margin-bottom: 0; }

@media (max-width: 767px) {
  body.type-page .content-inner:has(.ivn-kontakt) {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* --- kontaktní údaje --- */
.ivn-kontakt { color: var(--ivn-ink); font-size: 15px; line-height: 1.7; }
.ivn-kontakt ul { margin: 0; padding: 0; list-style: none; }
.ivn-kontakt li { padding: 0; }
.ivn-kontakt li::before { display: none !important; }

.ivn-kontakt__popisek {
  display: block;
  margin-bottom: 4px;
  color: var(--ivn-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.ivn-kontakt__spojeni { display: grid; gap: 18px; margin-bottom: 30px !important; }
.ivn-kontakt__spojeni a {
  color: var(--ivn-ink);
  font-size: 19px;
  text-decoration: none;
}
.ivn-kontakt__spojeni a:hover { color: var(--ivn-gold); }

.ivn-kontakt__adresy {
  display: grid;
  gap: 22px;
  margin-bottom: 34px !important;
  padding: 26px 0 !important;
  border-top: 1px solid var(--ivn-line);
  border-bottom: 1px solid var(--ivn-line);
}

.ivn-kontakt__tym { color: var(--ivn-muted); font-size: 14px; }
.ivn-kontakt__tym a { color: var(--ivn-ink); text-decoration: underline; }
.ivn-kontakt__tym blockquote {
  margin: 22px 0;
  padding: 0 0 0 20px;
  border-left: 1px solid var(--ivn-gold);
  color: var(--ivn-ink);
  font-size: 16px;
  font-style: italic;
  line-height: 1.6;
}
.ivn-kontakt__tym blockquote p { margin: 0 0 8px; }
.ivn-kontakt__tym cite {
  color: var(--ivn-muted);
  font-size: 12px;
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ivn-kontakt__tym img { display: block; width: 100%; height: auto; margin-top: 26px; }

/* --- formulář (zůstává ten od Shoptetu, jen se sladí vzhled) --- */
body.type-page .content-inner:has(.ivn-kontakt) .contact-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
body.type-page .content-inner:has(.ivn-kontakt) .contact-form .form-group { margin-bottom: 18px; }
body.type-page .content-inner:has(.ivn-kontakt) .contact-form label {
  display: block;
  margin-bottom: 6px;
  color: var(--ivn-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
body.type-page .content-inner:has(.ivn-kontakt) .contact-form .form-control {
  width: 100%;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--ivn-line);
  border-radius: 0;
  color: var(--ivn-ink);
  font: inherit;
  font-size: 15px;
  transition: border-color .15s ease;
}
body.type-page .content-inner:has(.ivn-kontakt) .contact-form .form-control:focus {
  border-color: var(--ivn-ink);
  outline: 0;
}
body.type-page .content-inner:has(.ivn-kontakt) .contact-form textarea.form-control {
  min-height: 190px;
  resize: vertical;
}
body.type-page .content-inner:has(.ivn-kontakt) .contact-form .consents .label {
  margin: 0;
  color: var(--ivn-muted);
  font-size: 12px;
  line-height: 1.6;
}
body.type-page .content-inner:has(.ivn-kontakt) .contact-form .consents .label a {
  color: var(--ivn-ink);
  text-decoration: underline;
}
body.type-page .content-inner:has(.ivn-kontakt) .contact-form .submit-wrapper { margin-bottom: 0; }
body.type-page .content-inner:has(.ivn-kontakt) .contact-form .btn-primary {
  width: 100%;
  height: 56px;
  padding: 0 24px;
  background: var(--ivn-ink);
  border: 0;
  border-radius: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background-color .15s ease;
}
body.type-page .content-inner:has(.ivn-kontakt) .contact-form .btn-primary:hover,
body.type-page .content-inner:has(.ivn-kontakt) .contact-form .btn-primary:focus { background: #38322c; }

/* ===== ze zapati.html ===== */

/* Sdělení o úpravě velikosti v košíku. */
.custom-size-note {
  margin: 16px 0 24px;
  padding: 12px 16px;
  border: 1px dashed #ddd;
  border-radius: 8px;
  line-height: 1.5;
}

/* 2. krok objednávky — zvýrazněný popisek u poznámky. */
.co-box-additional label[for="add-note"] {
  font-weight: bold;
  font-size: 110%;
}

/* Rozměry pod parametry na detailu produktu. */
.p-size-info-block {
  margin: 12px auto 10px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  background: #fafafa;
}
.p-size-info-block table { width: 100%; border-collapse: collapse; }
.p-size-info-block .detail-parameters tbody tr th,
.p-size-info-block .detail-parameters tbody tr td {
  padding: 1px 6px;
  vertical-align: bottom;
}
.p-size-info-block .detail-parameters tbody tr th {
  width: 150px;
  font-weight: 600;
  text-align: left;
}

/* Tlačítka přihlášky k newsletteru (SmartEmailing). */
.se-button {
  padding: 10px 15px 22px !important;
  background-color: #434343 !important;
}
.se-submit button { background: #434343 !important; }

/* Odkazy v patičce verzálkami. Přesunuto sem ze záhlaví — patří k patičce. */
.custom-footer a { text-transform: uppercase; }

:root {
  --ivn-f-max: 1418px;
  --ivn-f-pad: clamp(18px, 3.2vw, 44px);

  /* tmavý pás výhod */
  --ivn-f-band: #000;
  --ivn-f-band-text: #cfcac2;
  --ivn-f-band-line: rgba(255, 255, 255, .14);

  /* světlá spodní část */
  --ivn-f-bg: #f7f5f2;
  --ivn-f-ink: #14120f;
  --ivn-f-muted: #6f6a61;
  --ivn-f-line: rgba(0, 0, 0, .12);

  --ivn-f-gold: #b09a62;

  --ivn-ico-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.6 5.5h11.6v11H1.6z'/%3E%3Cpath d='M13.2 9.4h4.3l4 3.6v3.5h-8.3z'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='17.6' cy='19' r='2'/%3E%3C/svg%3E");
  --ivn-ico-scissors: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6.5' r='2.8'/%3E%3Ccircle cx='6' cy='17.5' r='2.8'/%3E%3Cpath d='M20.5 3.5 8.4 15.6M14.6 14.2 20.5 20.5M8.4 8.4 12 12'/%3E%3C/svg%3E");
  --ivn-ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.6V12l3.6 2.2'/%3E%3C/svg%3E");
}

/* Bootstrapový clearfix: `.row` si generuje ::before/::after. V gridu by z nich
   byly prázdné buňky a ve flexboxu prázdné položky — proto pryč. */
.footer-banners.banner-wrapper::before,
.footer-banners.banner-wrapper::after,
#footer .custom-footer::before,
#footer .custom-footer::after,
#footer .footer-bottom::before,
#footer .footer-bottom::after { display: none; }

/* --- 1. pás výhod (tmavý) ---
   Tři samostatné černé obdélníky splynou v jeden pás přes celou šířku,
   oddělený jen vlasovými linkami. Inline styly bannerů přebíjí !important. */
.footer-banners.banner-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--ivn-f-max);
  margin: 56px auto 0;
  padding: 0 var(--ivn-f-pad);
  background: var(--ivn-f-band);
  color: var(--ivn-f-band-text);
  /* Pás je uvnitř obsahového kontejneru, ale má působit přes celou šířku.
     Stín s velkým spreadem dobarví okraje, clip-path ho ořízne shora i zdola —
     na rozdíl od 100vw to nevytvoří vodorovný posuvník. */
  box-shadow: 0 0 0 100vmax var(--ivn-f-band);
  clip-path: inset(0 -100vmax);
}
.footer-banners .footer-banner { float: none; width: auto; padding: 0; }
.footer-banners .footer-banner + .footer-banner { border-top: 1px solid var(--ivn-f-band-line); }
.footer-banners .footer-banner > span { display: block; }

.footer-banners .footer-banner > span > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 34px 26px !important;
  background-color: transparent !important;
  color: var(--ivn-f-band-text) !important;
  font-size: 12px;
  letter-spacing: .11em;
  line-height: 1.7 !important;
  text-align: center !important;
  text-transform: uppercase;
}

.footer-banners .footer-banner:nth-child(1) br,
.footer-banners .footer-banner:nth-child(2) br { display: none; }
.footer-banners .footer-banner:nth-child(3) br:first-child { display: none; }

.footer-banners .footer-banner b {
  color: var(--ivn-f-gold);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}

.footer-banners .footer-banner > span > div::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  background: var(--ivn-f-gold);
  -webkit-mask: var(--ivn-ico-truck) center/contain no-repeat;
  mask: var(--ivn-ico-truck) center/contain no-repeat;
}
.footer-banners .footer-banner:nth-child(2) > span > div::before {
  -webkit-mask-image: var(--ivn-ico-scissors);
  mask-image: var(--ivn-ico-scissors);
}
.footer-banners .footer-banner:nth-child(3) > span > div::before {
  -webkit-mask-image: var(--ivn-ico-clock);
  mask-image: var(--ivn-ico-clock);
}

@media (min-width: 768px) {
  .footer-banners.banner-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-banners .footer-banner + .footer-banner {
    border-top: 0;
    border-left: 1px solid var(--ivn-f-band-line);
  }
  .footer-banners .footer-banner > span > div { padding: 46px 38px !important; }
}

/* --- 1b. pás výhod, vlastní podoba ---
   Pravidla výš stylují markup, který vypisuje Shoptet (kdyby se skript
   nespustil). Tahle sekce patří pásu, který si stavíme sami — má vlastní
   třídy, takže se pravidla nepřekrývají.

   Rozdíl proti tomu, co dělá šablona: text není jeden dlouhý odstavec
   verzálkami přes celou buňku, ale nadpis a pod ním věta. Obojí má omezenou
   šířku řádku, takže se text nikdy neopře o dělicí linku ani o okraj pásu. */
.ivn-usp .ivn-usp__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 52px 40px;
  text-align: center;
}

.ivn-usp .ivn-usp__ikona {
  flex: none;
  width: 24px;
  height: 24px;
  margin-bottom: 20px;
  background: var(--ivn-f-gold);
  -webkit-mask: var(--ivn-ico-truck) center/contain no-repeat;
  mask: var(--ivn-ico-truck) center/contain no-repeat;
}
.ivn-usp .ivn-usp__ikona[data-ikona="strihy"] {
  -webkit-mask-image: var(--ivn-ico-scissors);
  mask-image: var(--ivn-ico-scissors);
}
.ivn-usp .ivn-usp__ikona[data-ikona="cas"] {
  -webkit-mask-image: var(--ivn-ico-clock);
  mask-image: var(--ivn-ico-clock);
}

.ivn-usp .ivn-usp__nadpis {
  /* `ch` místo pixelů: řádek se láme podle počtu znaků, takže to drží
     i po přepsání textu nebo změně velikosti písma. */
  max-width: 26ch;
  color: var(--ivn-f-gold);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.55;
  text-transform: uppercase;
  /* Rozloží slova na řádky rovnoměrně, ať na posledním nezůstane viset jedno
     slovo samo. Prohlížeč, který to neumí, zalomí jako dosud. */
  text-wrap: balance;
}

.ivn-usp .ivn-usp__popis {
  max-width: 36ch;
  margin-top: 12px;
  color: var(--ivn-f-band-text);
  font-size: 13px;
  letter-spacing: .02em;
  line-height: 1.8;
  text-wrap: pretty;
}

.ivn-usp .ivn-usp__tel {
  margin-top: 14px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-size: 15px;
  letter-spacing: .06em;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.ivn-usp .ivn-usp__tel:hover {
  border-bottom-color: var(--ivn-f-gold);
  color: var(--ivn-f-gold);
}

@media (max-width: 767px) {
  .ivn-usp__item { padding: 38px 28px; }
  .ivn-usp__nadpis { font-size: 13px; }
}

/* --- 2. patička (světlá) --- */
#footer.footer {
  /* Šablona dává patičce margin-top: 19px — mezi pásem výhod a patičkou
     by prosvítal pruh pozadí stránky. */
  margin-top: 0;
  background: var(--ivn-f-bg);
  color: var(--ivn-f-muted);
  border-top: 0;
}
#footer .footer-rows {
  width: auto;
  max-width: var(--ivn-f-max);
  margin: 0 auto;
  padding: 60px var(--ivn-f-pad) 46px;
}
#footer .custom-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin: 0;
  padding-top: 0;
}
#footer .custom-footer > div { float: none; width: auto; padding: 0; }
@media (min-width: 768px) {
  #footer .custom-footer {
    grid-template-columns: minmax(230px, 1fr) minmax(0, 1.55fr);
    gap: 48px 64px;
  }
}
#footer .custom-footer .pageElement__heading {
  margin: 0 0 20px !important;
  color: var(--ivn-f-ink);
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* --- 3. kontakty --- */
#footer .contact-box ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
}
#footer .contact-box ul li {
  order: 2;
  flex: 0 0 100%;
  padding: 0;
  word-break: normal;
}
#footer .contact-box ul li:has(.mail) { order: 1; }

/* Pevná i mobilní linka jsou tady stejné číslo — druhý řádek jen šumí. */
#footer .contact-box ul li:has(.cellphone) { display: none; }

#footer .contact-box ul li > span {
  position: static;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 0;
}
#footer .contact-box ul li > span::before {
  position: static;
  width: 18px;
  color: var(--ivn-f-gold);
  font-size: 15px;
  line-height: 1;
}
#footer .contact-box a {
  display: inline-block;
  padding: 9px 0;
  color: var(--ivn-f-ink);
  font-size: 16px;
  text-decoration: none;
  text-transform: none !important;
}
#footer .contact-box a:hover { color: var(--ivn-f-gold); }

#footer .contact-box ul::before {
  content: "Sledujte nás";
  order: 3;
  flex: 0 0 100%;
  margin: 26px 0 12px;
  color: var(--ivn-f-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
#footer .contact-box ul li:has(.facebook),
#footer .contact-box ul li:has(.instagram) {
  order: 4;
  flex: 0 0 auto;
  margin-right: 10px;
}
#footer .contact-box ul li:has(.facebook) > span,
#footer .contact-box ul li:has(.instagram) > span {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--ivn-f-line);
  transition: background-color .2s ease, border-color .2s ease;
}
#footer .contact-box ul li:has(.facebook) > span::before,
#footer .contact-box ul li:has(.instagram) > span::before {
  width: auto;
  color: var(--ivn-f-ink);
  font-size: 17px;
  transition: color .2s ease;
}
#footer .contact-box ul li:has(.facebook) > span:hover,
#footer .contact-box ul li:has(.instagram) > span:hover {
  background: var(--ivn-f-ink);
  border-color: var(--ivn-f-ink);
}
#footer .contact-box ul li:has(.facebook) > span:hover::before,
#footer .contact-box ul li:has(.instagram) > span:hover::before { color: #fff; }
#footer .contact-box ul li:has(.facebook) a,
#footer .contact-box ul li:has(.instagram) a {
  position: absolute;
  inset: 0;
  padding: 0;
  font-size: 0 !important;
  line-height: 0;
}

/* --- 4. odkazy „Informace pro vás“ --- */
#footer .custom-footer__articles ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer .custom-footer__articles li {
  flex: 0 0 100%;
  padding: 0;
  list-style: none;
}
#footer .custom-footer__articles li::before { display: none !important; }
@media (min-width: 520px) {
  #footer .custom-footer__articles li { flex: 0 0 calc(50% - 20px); }
}
#footer .custom-footer__articles a {
  position: relative;
  display: inline-block;
  padding: 10px 0;
  color: var(--ivn-f-muted);
  font-size: 12px;
  letter-spacing: .09em;
  text-decoration: none;
  transition: color .2s ease;
}
#footer .custom-footer__articles a:hover { color: var(--ivn-f-ink); }
#footer .custom-footer__articles a::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ivn-f-gold);
  transition: width .25s ease;
}
#footer .custom-footer__articles a:hover::after { width: 100%; }

#footer .custom-footer__articles li:has(a[href*="napiste-nam"]) {
  order: 9;
  flex: 0 0 auto;
  margin-top: 18px;
}
#footer .custom-footer__articles a[href*="napiste-nam"] {
  padding: 14px 28px;
  border: 1px solid var(--ivn-f-ink);
  color: var(--ivn-f-ink);
  font-weight: 600;
  text-transform: uppercase !important;
  transition: background-color .2s ease, color .2s ease;
}
#footer .custom-footer__articles a[href*="napiste-nam"]:hover {
  background: var(--ivn-f-ink);
  color: #fff;
}
#footer .custom-footer__articles a[href*="napiste-nam"]::after { display: none; }

/* --- 5. spodní lišta (světlá) --- */
#footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  width: auto;
  max-width: var(--ivn-f-max);
  margin: 0 auto;
  padding: 20px var(--ivn-f-pad) 30px;
  border-top: 1px solid var(--ivn-f-line);
  color: var(--ivn-f-muted);
  font-size: 12px;
}
#footer .footer-bottom span { width: auto; margin: 0; text-align: left; }
#footer .footer-bottom strong { color: var(--ivn-f-ink); font-weight: 600; }
#footer .footer-bottom .copyright { order: 1; }
/* Logo Shoptetu zůstává v původních barvách — přebarvovat cizí značku nemá smysl. */
#footer .footer-bottom #signature { order: 2; opacity: .75; }
#footer .footer-bottom a {
  color: var(--ivn-f-muted);
  text-transform: none !important;
}
#footer .footer-bottom a:hover { color: var(--ivn-f-ink); }
#footer .footer-bottom .cookies-settings {
  margin-left: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}