/*shoptet fix*/
@media (-webkit-transform-3d), (transform-3d) {
  .carousel-inner > .item {
    perspective: none !important;
  }

  .carousel-inner > .item.active.right,
  .carousel-inner > .item.next {
    left: 0;
    transform: none !important;
  }

  .carousel-inner > .item.active.left,
  .carousel-inner > .item.prev {
    left: 0;
    transform: none !important;
  }

  .carousel-inner > .item.active,
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right {
    left: 0;
    transform: none !important;
  }

  .homepage-latest-contribution-full-width {
    display: none !important;
  }
}

/*redesign menu*/

.custom-header-ilustration-link {
  display: none;
  max-width: 58.4rem;
}

.custom-header-ilustration-link img {
  max-width: 58.4rem;
}

.mobile-header-ilustration {
  width: 100%;
  height: auto;
  transform: translateY(1.8rem);
  position: relative;
  display: block;
}

@media (min-width: 1200px) {
  .custom-header-ilustration-link {
    display: block;
    position: relative;
    transform: translateY(0.5rem);
  }

  .header-top .container {
    max-width: 120rem;
    padding: 0;
  }
  #header .header-top .header-top-wrapper {
    justify-content: space-between;
    height: 23.5rem;
  }
  .navigation-tools {
    order: 2;
  }

  #header .header-top .header-top-wrapper h1.site-name,
  #header .header-top .header-top-wrapper .site-name {
    text-align: left;
    width: 26% !important;
    display: flex;
    align-items: center;
  }

  #header .header-top {
    min-height: 23.5rem;
  }

  .header-top .navigation-buttons {
    width: 24% !important;
  }

  #navigation.visible {
    max-width: 120rem !important;
  }

  .navigation-in ul {
    max-width: 120rem !important;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.06);
    padding: 3rem;
    border-radius: 2rem;
    border: 1px solid var(--light-beige);
  }

  .navigation-in {
    font-size: 2rem;
  }


  /*zde vložit breadcrums*/
  .breadcrumbs {
    margin-top: 6rem;
  }
}

@media (min-width: 768px) {
  .mobile-header-ilustration {
    display: none;
  }

  .breadcrumbs {
    margin-top: 9rem;
  }

  li.menu-item-1805 a[href="/black-friday/"] {
    background-color: black;
    color: white;
  }

  .cart-inner {
    padding: 10rem 0 0;
  }
.navigation-in>ul>li>a:hover {
margin:0 !important;
padding:1.2rem !important;
}
}

@media (min-width: 1024px) {
  .navigation-in > ul > li.ext.exp > a {
    margin-left: none !important;
    margin-right: none !important;
    padding-left: none !important;
    padding-right: none !important;
  }

  .navigation-in > ul > li > a:hover {
    background-color: #cebaa4;
    border: none !important;
    margin-left: none !important;
    margin-right: none !important;
    padding-left: none !important;
    padding-right: none !important;
  }
  .carousel-wrapper {
    margin-top: 10rem;
  }
  .menu-helper.visible {
    display: none;
  }
  #navigation {
    overflow: visible;
    height: 6.6rem;
  }

  #navigation.visible {
    max-width: 90rem;
    margin: 0 auto;
  }
  .navigation-in ul {
    max-width: 90rem;
    justify-content: center;
  }
  .navigation-in ul li.splitted {
    visibility: visible;
  }

  .navigation-in ul li a {
    padding: 1.2rem;
    border-radius: 1rem;
    text-transform: none;
  }

  .navigation-in {
    font-size: 1.8rem;
  }

  .navigation-in > ul > li {
    border: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .navigation-in > ul > li.ext.exp > a {
    margin-left: none !important;
    margin-right: none !important;
    padding-left: none !important;
    padding-right: none !important;
  }

  .navigation-in > ul > li > a:hover {
    background-color: #cebaa4;
    border: none !important;
    margin-left: none !important;
    margin-right: none !important;
    padding-left: none !important;
    padding-right: none !important;
  }
  .carousel-wrapper {
    margin-top: 12rem;
  }
  .menu-helper.visible {
    display: none;
  }
  #navigation {
    overflow: visible;
    height: 3.6rem;
  }

  #navigation.visible {
    max-width: 70rem;
    margin: 0 auto;
  }
  .navigation-in ul {
    max-width: 70rem;
    justify-content: center;
  }
  .navigation-in ul li.splitted {
    visibility: visible;
  }

  .navigation-in ul li a {
    padding: 1.2rem;
    border-radius: 1rem;
    text-transform: none;
  }

  .navigation-in {
    font-size: 1.8rem;
  }
  .navigation-in > ul > li {
    border: none;
  }
}


/*redesign footer — tmavá patička podle nové homepage (2026)*/

#footer {
  background-color: #161616;
  color: #cfc8c0;
  font-weight: 400;
  letter-spacing: normal;
}

#footer a {
  color: #cfc8c0;
  transition: color .18s ease;
}

#footer a:hover,
#footer a:focus-visible {
  color: #fff;
}

#footer a:focus-visible {
  outline: 2px solid #cebaa4;
  outline-offset: 3px;
  border-radius: 0.4rem;
}

/* nadpisy sloupců */
#footer .pageElement__heading,
#footer .pageElement__heading span {
  font-family: "Source Sans 3", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

#footer .pageElement__heading {
  margin-bottom: 1.6rem;
}

/* čárka pod nadpisem ze šablony Shoptetu — v novém designu není */
#footer .pageElement__heading::after {
  display: none;
}

/* odkazy v seznamech */
#footer .custom-footer__articles a,
#footer .contact-box a {
  font-size: 1.5rem;
}

#footer .custom-footer__articles li {
  padding-bottom: 0.8rem;
}

/* kontakt */
#footer #contactboxName {
  color: #fff;
}

#footer .contact-box li span::before,
#footer .contact-box li a::before {
  color: #cfc8c0;
}

/* sociální sítě — světlý obrys na tmavé, při najetí hnědá výplň */
#footer .social-icon {
  background-color: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
  color: #cfc8c0;
  transition: background-color .18s ease, color .18s ease;
}

#footer .social-icon::before {
  color: inherit;
}

#footer .social-icon:hover,
#footer .social-icon:focus-visible {
  background-color: #cebaa4;
  color: #161616;
}

/* loga karet — modré VISA by na tmavé zaniklo, proto bílý podklad */
#footer .custom-footer__onlinePayments img {
  box-sizing: content-box;
  padding: 0.8rem 1.2rem;
  background-color: #fff;
  border-radius: 0.8rem;
}

/* blog */
#footer .newsItemWidget__heading,
#footer .newsItemWidget__heading a {
  font-family: "Source Sans 3", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.4;
}

#footer .news-item-widget time {
  font-size: 1.3rem;
  color: rgba(207, 200, 192, .6);
}

/* spodní lišta */
#footer .footer-bottom-full-width,
#footer .footer-bottom {
  background-color: transparent;
}

#footer .footer-bottom-full-width {
  border-top: 1px solid rgba(255, 255, 255, .16);
}

#footer .footer-bottom,
#footer .footer-bottom #signature a.title {
  font-size: 1.4rem;
  font-weight: 400;
  color: #cfc8c0;
}

#footer .footer-bottom strong {
  color: #fff;
}

#footer .footer-bottom #signature a.title {
  text-decoration: underline;
  text-underline-offset: .2em;
}

#footer .footer-bottom #signature a.title:hover {
  color: #fff;
}


/* loga karet zarovnaná vlevo jako nadpis a ostatní sloupce — Shoptet je centruje třídou .text-center */
#footer .custom-footer__onlinePayments .text-center {
  text-align: left;
}


/*redesign header — kompaktní hlavička podle nové homepage (2026)
  Tablet i desktop od 768px, mobil zůstává beze změny.
  Přebíjí blok "redesign menu" výš.*/

@media (min-width: 768px) {

  /* linky pod horním pruhem a pod menu */
  #header .header-top,
  #header .header-bottom {
    border-bottom: 1px solid rgba(205, 183, 158, .45);
  }

  /* horní pruh i menu mají přesně šířku obsahu homepage (hero):
     max. 1200px, okraj stejný jako .shell v hp-v2.css.
     !important kvůli Dp-hellodog-kategorie23.css, který od 1700px
     dává všem .container šířku 1712px !important */
  #header .header-top .header-top-wrapper,
  #header #navigation,
  #header #navigation.visible {
    width: min(100% - 2 * clamp(1.6rem, 4vw, 3.2rem), 120rem) !important;
    max-width: none !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* --- horní pruh: logo vlevo, ilustrace uprostřed, ikony vpravo --- */

  /* pod 992px drží Shoptet pruh napevno na 60px — menu pod ním pak
     překrývalo spodek loga */
  #header .header-top {
    height: auto;
    min-height: 0;
  }

  /* výšku dává ilustrace (+ 1.6rem nahoře, dole odsazení ruší její
     záporný okraj); logo a ikony svisle na středu */
  #header .header-top .header-top-wrapper {
    height: auto;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    align-items: center;
    justify-content: space-between;
  }

  /* clearfix Bootstrapu — ve flexu z něj jsou prázdné položky, které si
     berou část volného místa a odsouvají logo od kraje */
  #header .header-top .header-top-wrapper::before,
  #header .header-top .header-top-wrapper::after {
    content: none;
  }

  /* prázdný obal Shoptetu (široký, nulová výška) — na vlastní řádek,
     jinak by v řádku odsouval logo */
  #header .navigation-tools {
    flex-basis: 100%;
  }

  /* logo svisle na středu pruhu — Shoptet mu na tabletu dává odsazení
     16px nahoře i dole, větší logo pak dole dosedalo na linku */
  #header .header-top .header-top-wrapper .site-name,
  #header .header-top .header-top-wrapper h1.site-name {
    display: flex;
    align-items: center;
    width: auto !important;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    text-align: left;
  }

  #header .header-top .header-top-wrapper .site-name a,
  #header .header-top .header-top-wrapper h1.site-name a {
    display: block;
  }

  /* max-width: none — s Bootstrapím max-width: 100% by se logo
     v obalu se sdíleným místem smrsklo až na nulu */
  #header .header-top .header-top-wrapper .site-name a img,
  #header .header-top .header-top-wrapper h1.site-name a img {
    display: block;
    width: clamp(12.8rem, 14vw, 17.6rem);
    height: auto;
    max-width: none;
    max-height: none;
  }

  /* ilustrace dosedá na linku pod pruhem (záporný okraj ruší spodní
     odsazení pruhu). Dvojnásobná velikost — klient ji chtěl víc na očích:
     tablet ~10–13rem, desktop 15.2rem. */
  .custom-header-ilustration-link {
    display: block;
    position: relative;
    align-self: flex-end;
    margin-bottom: -1.6rem;
    transform: none;
  }

  .custom-header-ilustration-link img {
    display: block;
    width: auto;
    height: clamp(9.6rem, 13vw, 15.2rem);
    max-width: none;
  }

  /* ikony vpravo — kolečka, při najetí béžová */
  #header .navigation-buttons > a,
  #header .navigation-buttons > button {
    width: 4.4rem;
    height: 4.4rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color .2s ease, color .2s ease;
  }

  #header .navigation-buttons > a:hover,
  #header .navigation-buttons > button:hover {
    background-color: #f6f2ef;
    color: #8a6f52;
  }

  /* --- menu --- */

  /* menu roste podle počtu řad — dřív mělo pevnou výšku a přetékalo
     přes obsah, což vyrovnávalo odsazení karuselu a drobečkové navigace */
  #header #navigation,
  #header #navigation.visible {
    height: auto;
    overflow: visible;
  }

  .carousel-wrapper,
  .breadcrumbs {
    margin-top: 0;
  }

  /* Shoptet drží menu v absolutním pruhu široké stovky tisíc px,
     aby bylo na jednom řádku — tady se položky zalamují, pruh netřeba */
  #header .navigation-in {
    position: static;
    width: auto;
    right: auto;
  }

  /* bez boxu se stínem — řady na středu, seznam přesně na šířku hera.
     Bez mezery mezi položkami (místo dělá jen vnitřní okraj odkazů),
     ať se jich do řádku vejde co nejvíc. Položky se zalamují samy.
     Na menším tabletu (768–1023px) mezera 0.2rem, viz níž. */
  #header .navigation-in > ul {
    width: 100%;
    max-width: none !important;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0;
  }

  #header .navigation-in > ul > li {
    border: 0;
  }

  /* Kontakty (29) a Hodnocení obchodu (-51) jsou od 768px v horní liště,
     Vrácení a výměna (834) jen v patičce. V menu jsou všechny tři jen
     na mobilu. Čísla = ID položek v adminu; při novém vytvoření položky
     se změní. */
  #header .navigation-in > ul.menu-level-1 > li.menu-item-29,
  #header .navigation-in > ul.menu-level-1 > li.menu-item--51,
  #header .navigation-in > ul.menu-level-1 > li.menu-item-834 {
    display: none;
  }

  #header .navigation-in > ul > li > a,
  #header .navigation-in > ul > li > a:hover {
    position: relative;
    margin: 0 !important;
    padding: 1.4rem 1rem !important;
    font-size: clamp(1.3rem, 1.05vw, 1.5rem);
    font-weight: 600;
    line-height: 2rem;
    letter-spacing: normal;
    text-transform: none;
    background-color: transparent;
    border: 0 !important;
    border-radius: 0;
  }

  #header .navigation-in > ul > li > a {
    color: #161616;
    transition: color .2s ease;
  }

  /* text odkazu je v <b> a Shoptet mu dává řez 400 — 600 = řez
     z návrhu (bez toho by <b> zdědil „bolder“ a skočil na 900) */
  #header .navigation-in > ul > li > a b {
    font-weight: 600;
  }

  /* hnědé podtržení při najetí */
  #header .navigation-in > ul > li > a::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0;
    height: 2px;
    background: #8a6f52;
    border-radius: 100rem;
    transform: scaleX(0);
    transition: transform .22s ease;
  }

  #header .navigation-in > ul > li > a:hover,
  #header .navigation-in > ul > li.active > a {
    color: #8a6f52;
  }

  #header .navigation-in > ul > li > a:hover::after,
  #header .navigation-in > ul > li.active > a::after {
    transform: scaleX(1);
  }

  /* Akční zboží — zvýrazněné */
  #header .navigation-in > ul > li.menu-item-1653 > a {
    color: #8a6f52;
  }

  /* prázdné tlačítko „Více“ — položky se zalamují, není potřeba */
  #header .menu-helper {
    display: none !important;
  }
}

/* tablet — logo a ikony mají po stranách stejně místa, ať je
   ilustrace přesně uprostřed */
@media (min-width: 768px) and (max-width: 1199px) {
  #header .header-top .header-top-wrapper .site-name,
  #header .header-top .header-top-wrapper h1.site-name {
    flex: 1 1 0;
  }

  #header .header-top .header-top-wrapper .navigation-buttons {
    flex: 1 1 0;
    width: auto !important;
    justify-content: flex-end;
  }
}

/* menší tablet — 10 kategorií se do řádku nevejde, menší písmo
   a užší odsazení, ať se 15 položek srovná do dvou řad */
@media (min-width: 768px) and (max-width: 1023px) {
  #header .navigation-in > ul {
    column-gap: 0.2rem;
  }

  #header .navigation-in > ul > li > a,
  #header .navigation-in > ul > li > a:hover {
    padding: 1.2rem 0.6rem !important;
    font-size: 1.3rem;
  }

  #header .navigation-in > ul > li > a::after {
    left: 0.6rem;
    right: 0.6rem;
  }
}

/* desktop — logo větší, písmo menu větší */
@media (min-width: 1200px) {
  /* logo drží 26 % šířky (ikony vpravo 24 %), ať je ilustrace na středu */
  #header .header-top .header-top-wrapper .site-name,
  #header .header-top .header-top-wrapper h1.site-name {
    width: 26% !important;
  }

  #header .header-top .header-top-wrapper .site-name a img,
  #header .header-top .header-top-wrapper h1.site-name a img {
    width: 17.6rem;
  }

  #header .navigation-in > ul > li > a,
  #header .navigation-in > ul > li > a:hover {
    font-size: clamp(1.4rem, 1.15vw, 1.6rem);
  }
}


/* horní lišta — Hodnocení obchodu (5 hvězdiček) a Kontakty.
   HTML je v Editoru HTML kódu (zápatí) hned pod ilustrací, global-v3.js
   ji přesune na začátek #header. Jen od 768px (iPad, desktop) a jen
   uvnitř hlavičky — v zápatí (než ji skript přesune) a na mobilu skrytá.
   Na mobilu jsou tytéž odkazy v mobilním menu. */
.custom-header-topbar {
  display: none;
}

@media (min-width: 768px) {
  #header .custom-header-topbar {
    display: block;
    background-color: #f6f2ef;
  }

  #header .custom-header-topbar__list {
    display: flex;
    justify-content: center;
    gap: clamp(2rem, 2.5vw, 3.2rem);
    width: min(100% - 2 * clamp(1.6rem, 4vw, 3.2rem), 120rem);
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }

  #header .custom-header-topbar__list li {
    margin: 0;
    padding: 0;
  }

  #header .custom-header-topbar__list a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 0;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.8rem;
    color: #161616;
    text-decoration: none;
    transition: color .2s ease;
  }

  #header .custom-header-topbar__list a:hover {
    color: #8a6f52;
  }

  #header .custom-header-topbar__list svg {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    color: #8a6f52;
  }

  /* 5 hvězdiček u Hodnocení obchodu — zlatá jako hvězdy v recenzích */
  #header .custom-header-topbar__list .custom-header-topbar__stars {
    width: 7.2rem;
    height: 1.3rem;
    color: #f0a92a;
  }
}


/* pelíšky (id-674) a matrace (id-683) — dlaždice podkategorií níž
   o výšku štítku „Ortopedický“, ať štítky nenarážejí do nadpisu */
.id-674 .subcategories.with-image,
.id-683 .subcategories.with-image {
  margin-top: 3.6rem;
}