/* Naše Hračkářství V68 — globální vzhled a responzivní chování. */
:root {
  --nh68-navy: #15233b;
  --nh68-yellow: #ffc928;
  --nh68-yellow-hover: #edb800;
  --nh68-paper: #fff;
  --nh68-canvas: #f6f8fb;
  --nh68-line: #dde4ee;
  --nh68-muted: #68758a;
  --nh68-success: #149447;
  --nh68-blue-soft: #edf6ff;
  --nh68-mint-soft: #eaf8ef;
  --nh68-pink-soft: #fff0f4;
  --nh68-radius: 16px;
  --nh68-shadow: 0 12px 34px rgba(21, 35, 59, .09);
}

html { scroll-padding-top: 96px; }
body { color: var(--nh68-navy); background: var(--nh68-paper); }
body,
input,
button,
select,
textarea { font-family: Roboto, Arial, sans-serif; }

/* V68 nesmí skrývat ani doplňovat kategorie. */
#navigation .menu-level-1 > .menu-item-1741 { display: block !important; }
.cart-empty .empty-cart-boxes li:has(> a[href="/novinky---prave-naskladnene/"]) { display: list-item !important; }
html body.type-index .fav-cats > h2::after {
  display: none !important;
  content: none !important;
}

.container { max-width: 1240px; }
.content-wrapper { background: var(--nh68-paper); }

/* Horní informační řádek. */
.top-navigation-bar {
  min-height: 34px;
  border: 0 !important;
  background: var(--nh68-navy) !important;
  color: #fff !important;
}
.top-navigation-bar a,
.top-navigation-bar .dropdown button {
  color: #fff !important;
  text-shadow: none !important;
}

/* Hlavička — stejná logika jako na Nářadí, vlastní hračkářská paleta. */
#header { background: #fff; }
#header .header-top { padding: 0; border-bottom: 1px solid var(--nh68-line); background: #fff; }
#header .header-top-wrapper {
  display: grid !important;
  min-height: 92px;
  padding: 14px 20px;
  grid-template-columns: 210px minmax(300px, 1fr) auto;
  align-items: center;
  gap: 24px;
}
#header .header-top-wrapper::before,
#header .header-top-wrapper::after { display: none !important; }
#header .site-name {
  position: static !important;
  width: auto !important;
  margin: 0 !important;
}
#header .site-name a { display: inline-flex; align-items: center; }
#header .site-name img {
  display: block;
  width: auto !important;
  max-width: 190px !important;
  max-height: 68px !important;
  object-fit: contain;
}
#header .header-top .search {
  position: static !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
#header .search-form {
  display: flex !important;
  width: 100%;
  overflow: hidden;
  border: 1px solid #cbd5e1 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
}
#header .search-form fieldset {
  display: flex !important;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0;
}
#header .search-form .search-input {
  display: block !important;
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  height: 48px !important;
  padding: 0 18px 0 48px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--nh68-navy) !important;
  font-size: 16px !important;
}
#header .search-form .search-button {
  position: static !important;
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 100px;
  height: 48px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--nh68-yellow) !important;
  color: var(--nh68-navy) !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
#header .search-form .search-button:hover { background: var(--nh68-yellow-hover) !important; }
#header .navigation-buttons {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
  gap: 8px;
}
#header .navigation-buttons a,
#header .navigation-buttons button,
#header .navigation-buttons .cart-count {
  min-height: 46px;
  border-radius: 12px;
}
#header .cart-count {
  background: var(--nh68-canvas) !important;
  color: var(--nh68-navy) !important;
}

/* Hlavní navigace. */
#header .header-bottom {
  border-bottom: 1px solid var(--nh68-line);
  background: #fff !important;
  box-shadow: 0 5px 16px rgba(21, 35, 59, .05);
}
#navigation .menu-level-1 { display: flex; align-items: stretch; }
#navigation .menu-level-1 > li { min-width: 0; }
#navigation .menu-level-1 > li > a {
  display: flex !important;
  min-height: 50px;
  padding: 0 14px !important;
  align-items: center;
  color: var(--nh68-navy) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
}
#navigation .menu-level-1 > li > a:hover,
#navigation .menu-level-1 > li > a.active {
  background: #fff7d5 !important;
  color: #745600 !important;
}
#navigation .menu-level-2 {
  border: 1px solid var(--nh68-line) !important;
  border-radius: 0 0 16px 16px !important;
  background: #fff !important;
  box-shadow: 0 24px 44px rgba(21, 35, 59, .16) !important;
}

/* Drobečková navigace a obsahové nadpisy. */
.breadcrumbs { color: var(--nh68-muted); font-size: 13px; }
#content h1,
.content h1 {
  color: var(--nh68-navy);
  letter-spacing: -.035em;
}

/* Výhody nákupu. */
.position--benefitHomepage,
.benefitBanner.position--benefitHomepage {
  display: grid !important;
  width: 100% !important;
  margin: 22px auto 28px !important;
  padding: 10px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px !important;
  border: 1px solid var(--nh68-line) !important;
  border-radius: var(--nh68-radius) !important;
  background: linear-gradient(135deg, #f8fbff, #fffdf4) !important;
  box-shadow: 0 8px 24px rgba(21, 35, 59, .05) !important;
}
.position--benefitHomepage .benefitBanner__item {
  display: grid !important;
  min-width: 0;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 10px !important;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid #e5eaf1;
  border-radius: 13px;
  background: #fff;
}
.position--benefitHomepage .benefitBanner__picture,
.position--benefitHomepage .benefitBanner__img {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
}
.position--benefitHomepage .benefitBanner__title {
  display: block;
  color: var(--nh68-navy) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25;
}
.position--benefitHomepage .benefitBanner__data {
  display: block;
  margin-top: 3px;
  color: var(--nh68-muted) !important;
  font-size: 11px !important;
  line-height: 1.35;
}

/* Bannery a karty — beze změny jejich obsahu či odkazů. */
.type-index .banners-row .carousel,
.type-index .banners-row .carousel-inner,
.type-index .banners-row .carousel-inner > .item,
.type-index .banners-row .carousel-inner > .item > a,
.type-index .banners-row .carousel-inner img {
  border-radius: 20px !important;
}
.type-index .banners-row .carousel { overflow: hidden; box-shadow: 0 14px 34px rgba(21, 35, 59, .10); }
.homepage-group-title {
  position: relative;
  margin: 44px 0 18px !important;
  color: var(--nh68-navy) !important;
  font-size: clamp(26px, 3vw, 34px) !important;
}
.homepage-group-title::before {
  display: inline-block;
  width: 6px;
  height: 28px;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--nh68-yellow);
  vertical-align: -4px;
  content: '';
}

/* Produktové karty — pouze prezentace existujících produktů. */
.products > div.product { padding: 8px !important; }
.products .product > .p {
  height: 100%;
  padding: 12px !important;
  border: 1px solid var(--nh68-line) !important;
  border-radius: var(--nh68-radius) !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(21, 35, 59, .05) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.products .product > .p:hover {
  border-color: #bfc9d7 !important;
  box-shadow: var(--nh68-shadow) !important;
  transform: translateY(-2px) !important;
}
.products .product .name { color: var(--nh68-navy) !important; }
.products .product .availability { color: var(--nh68-success) !important; }
.products .product .price-final { color: var(--nh68-navy) !important; }
.products .product .btn-cart {
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--nh68-yellow) !important;
  color: var(--nh68-navy) !important;
  font-weight: 850 !important;
}
.products .product .btn-cart:hover { background: var(--nh68-yellow-hover) !important; }

/* Patička používá stávající odkazy a kontakty. */
.footer {
  border-top: 0 !important;
  background: var(--nh68-navy) !important;
  color: #dbe4ef !important;
}
.footer h3,
.footer h4 { color: #fff !important; }
.footer a { color: #e8eef6 !important; }
.footer a:hover { color: var(--nh68-yellow) !important; }
.footer-icons {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px !important;
}
.footer-icons .footer-icon {
  display: flex !important;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
}
.footer-icons .footer-icon img { max-width: 100px; max-height: 42px; object-fit: contain; }

/* Vrstevnice a kolize externího slevového okna. */
body.search-focused .lh-popup--root,
body.in-kosik .lh-popup--root,
body.ordering-process .lh-popup--root,
body:has(.nh-cart-modal.is-open) .lh-popup--root {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (min-width: 768px) {
  #header {
    position: sticky !important;
    top: -126px !important;
    z-index: 100 !important;
  }
  body.navigation-hovered #header,
  body.search-focused #header { z-index: 1100 !important; }
}

@media (max-width: 991px) and (min-width: 768px) {
  #header .header-top-wrapper {
    grid-template-columns: 170px minmax(220px, 1fr) auto;
    gap: 14px;
  }
  #header .site-name img { max-width: 160px !important; }
  #navigation .menu-level-1 > li > a { padding: 0 9px !important; font-size: 12px !important; }
}

@media (max-width: 767px) {
  html { scroll-padding-top: 76px; }
  body { overflow-x: clip; }
  .overall-wrapper { padding-top: 0 !important; }
  #header {
    position: sticky !important;
    top: 0;
    z-index: 1000 !important;
  }
  .top-navigation-bar { display: none !important; }
  #header .header-top { padding: 0 !important; }
  #header .header-top-wrapper {
    display: grid !important;
    min-height: 0;
    padding: 9px 12px 10px !important;
    grid-template-columns: minmax(110px, 1fr) auto auto;
    gap: 7px;
  }
  #header .site-name { grid-column: 1; }
  #header .site-name img {
    max-width: 132px !important;
    max-height: 48px !important;
  }
  #header .navigation-buttons {
    grid-column: 2 / 4;
    justify-self: end;
    gap: 6px;
  }
  #header .navigation-buttons a,
  #header .navigation-buttons button,
  #header .navigation-buttons .cart-count {
    min-width: 44px;
    min-height: 44px;
  }
  #header .header-top .search {
    position: static !important;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
  }
  #header .search-form { border-radius: 13px !important; }
  #header .search-form .search-input { height: 46px !important; padding-left: 44px !important; font-size: 16px !important; }
  #header .search-form .search-button {
    min-width: 76px;
    height: 46px !important;
    padding: 0 13px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }
  #header .header-bottom { border: 0; box-shadow: none; }

  /* Shoptet mobilní panel musí zůstat svislý. Desktopový flex by položky skládal přes sebe. */
  #navigation .navigation-in,
  #navigation .menu-level-1 {
    display: block !important;
    width: 100% !important;
  }
  #navigation .menu-level-1 > li {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #navigation .menu-level-1 > li > a {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 10px 58px 10px 18px !important;
    align-items: center !important;
    line-height: 1.3 !important;
  }
  [data-testid="hamburgerMenu"] .nh-hamburger-label {
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    font-weight: 800;
  }
  .position--benefitHomepage,
  .benefitBanner.position--benefitHomepage {
    width: calc(100% - 24px) !important;
    margin: 14px 12px 22px !important;
    padding: 7px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px !important;
    border-radius: 15px !important;
  }
  .position--benefitHomepage .benefitBanner__item {
    min-height: 74px !important;
    padding: 8px !important;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 7px;
    border-radius: 11px;
  }
  .position--benefitHomepage .benefitBanner__picture,
  .position--benefitHomepage .benefitBanner__img {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
  }
  .position--benefitHomepage .benefitBanner__title { font-size: 11.5px !important; }
  .position--benefitHomepage .benefitBanner__data {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10px !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .type-index .banners-row { margin-right: 12px !important; margin-left: 12px !important; }
  .type-index .banners-row .carousel,
  .type-index .banners-row .carousel-inner,
  .type-index .banners-row .carousel-inner > .item,
  .type-index .banners-row .carousel-inner > .item > a {
    height: clamp(178px, 50vw, 198px) !important;
    min-height: clamp(178px, 50vw, 198px) !important;
    border-radius: 16px !important;
  }
  .type-index .banners-row .carousel-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: left center !important;
  }
  .homepage-group-title { margin: 32px 12px 15px !important; font-size: 25px !important; }
  .homepage-group-title::before { height: 23px; }
  .products > div.product { padding: 5px !important; }
  .products .product > .p { padding: 9px !important; border-radius: 13px !important; }
  .products .product .btn-cart { min-height: 44px !important; }
  .footer-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.type-product .nh-mobile-buy-jump { z-index: 950 !important; }
  body.type-product:has(.nh-mobile-buy-jump:not(.is-native-visible)) .lh-popup--root { display: none !important; }
}

@media (max-width: 350px) {
  .position--benefitHomepage,
  .benefitBanner.position--benefitHomepage { grid-template-columns: 1fr; }
  .footer-icons { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
