/*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;
  }

  #header .header-top .header-top-wrapper {
    height: 8.4rem;
    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 */
  .custom-header-ilustration-link {
    display: block;
    position: relative;
    align-self: flex-end;
    transform: none;
  }

  .custom-header-ilustration-link img {
    display: block;
    width: auto;
    height: 6.4rem;
    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;
  }

  #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 — vyšší pruh, ilustrace dosedá na linku */
@media (min-width: 1200px) {
  #header .header-top .header-top-wrapper {
    height: 10.4rem;
  }

  /* 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);
  }

  .custom-header-ilustration-link img {
    height: 7.6rem;
  }
}


/* 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;
}