/* NOVÁ PLEŤ – menu, hlavička, kontaktní lišta a filtry, verze 2 */

/* NOVÁ PLEŤ – obrázky v rozbalovacím menu */
  @media (min-width: 768px) {
    #navigation .menu-level-1 > li.menu-item-715 > a > .submenu-arrow,
    #navigation .menu-level-1 > li.menu-item-808 > a > .submenu-arrow,
    #navigation .menu-level-1 > li.menu-item-889 > a > .submenu-arrow {
      display: inline-block !important;
      margin-left: 7px !important;
      padding: 0 !important;
      font-size: 9px !important;
      line-height: 1 !important;
      vertical-align: middle !important;
      -webkit-text-stroke: 0 !important;
    }

    #navigation .menu-level-1 > li.menu-item-715 > a > .submenu-arrow::after,
    #navigation .menu-level-1 > li.menu-item-808 > a > .submenu-arrow::after,
    #navigation .menu-level-1 > li.menu-item-889 > a > .submenu-arrow::after {
      display: block !important;
    }

    #navigation .menu-item-715 > .menu-level-2 > li > .menu-no-image,
    #navigation .menu-item-808 > .menu-level-2 > li > .menu-no-image,
    #navigation .menu-item-889 > .menu-level-2 > li > .menu-no-image {
      width: 100% !important;
    }

    #navigation .menu-item-715 > .menu-level-2 > li > .menu-no-image > a,
    #navigation .menu-item-808 > .menu-level-2 > li > .menu-no-image > a,
    #navigation .menu-item-889 > .menu-level-2 > li > .menu-no-image > a {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      width: 100% !important;
      min-height: 58px !important;
      padding: 7px 14px !important;
      line-height: 1.25 !important;
    }

    #navigation .menu-item-715 > .menu-level-2 > li > .menu-no-image > a::before,
    #navigation .menu-item-808 > .menu-level-2 > li > .menu-no-image > a::before,
    #navigation .menu-item-889 > .menu-level-2 > li > .menu-no-image > a::before {
      content: "";
      display: block;
      flex: 0 0 48px;
      width: 48px;
      height: 48px;
      border: 1px solid #f0e6e2;
      border-radius: 7px;
      background-color: #fff;
      background-image: var(--np-menu-img);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    /* Korejská kosmetika – přímo ověřené PNG adresy */
    #navigation .menu-item-715 .menu-item-856 {
      --np-menu-img: url("https://www.novaplet.cz/user/documents/upload/CSS%20slo%C5%BEka/np-cat-bestsellery.png");
    }

    #navigation .menu-item-715 .menu-item-805 {
      --np-menu-img: url("https://www.novaplet.cz/user/documents/upload/CSS%20slo%C5%BEka/np-cat-vyhodne-balicky.png");
    }

    #navigation .menu-item-715 .menu-item-802 {
      --np-menu-img: url("https://www.novaplet.cz/user/documents/upload/CSS%20slo%C5%BEka/np-cat-cisteni-pleti.png");
    }

    #navigation .menu-item-715 .menu-item-853 {
      --np-menu-img: url("https://www.novaplet.cz/user/documents/upload/CSS%20slo%C5%BEka/np-cat-tonery-esence.png");
    }

    #navigation .menu-item-715 .menu-item-792 {
      --np-menu-img: url("https://www.novaplet.cz/user/documents/upload/CSS%20slo%C5%BEka/np-cat-sera.png");
    }

    #navigation .menu-item-715 .menu-item-783 {
      --np-menu-img: url("https://www.novaplet.cz/user/documents/upload/CSS%20slo%C5%BEka/np-cat-masky.png");
    }

    #navigation .menu-item-715 .menu-item-838 {
      --np-menu-img: url("https://www.novaplet.cz/user/documents/upload/CSS%20slo%C5%BEka/np-cat-ocni-kremy.png");
    }

    #navigation .menu-item-715 .menu-item-786 {
      --np-menu-img: url("https://www.novaplet.cz/user/documents/upload/CSS%20slo%C5%BEka/np-cat-kremy.png");
    }

    #navigation .menu-item-715 .menu-item-925 {
      --np-menu-img: url("https://www.novaplet.cz/user/documents/upload/CSS%20slo%C5%BEka/np-cat-spf50.png");
    }

    #navigation .menu-item-715 .menu-item-847 {
      --np-menu-img: url("https://www.novaplet.cz/user/documents/upload/CSS%20slo%C5%BEka/np-cat-rty-rasy.png");
    }

    #navigation .menu-item-715 .menu-item-859 {
      --np-menu-img: url("https://www.novaplet.cz/user/documents/upload/CSS%20slo%C5%BEka/np-cat-luxusn%C3%AD-pece.png");
    }

    #navigation .menu-item-715 .menu-item-862 {
      --np-menu-img: url("https://www.novaplet.cz/user/documents/upload/CSS%20slo%C5%BEka/np-cat-bez-krabicky.png");
    }

    /* Korejská péče o vlasy – zachování stávajících obrázků */
    #navigation .menu-item-808 .menu-item-811 {
      --np-menu-img: url("/user/documents/upload/Fotky%20-%20korejsk%C3%A1%20p%C3%A9%C4%8De%20o%20vlasy/%C5%A0amp%C3%B3ny.png");
    }

    #navigation .menu-item-808 .menu-item-814 {
      --np-menu-img: url("/user/documents/upload/Fotky%20-%20korejsk%C3%A1%20p%C3%A9%C4%8De%20o%20vlasy/Kondicion%C3%A9ry.png");
    }

    #navigation .menu-item-808 .menu-item-817 {
      --np-menu-img: url("/user/documents/upload/Fotky%20-%20korejsk%C3%A1%20p%C3%A9%C4%8De%20o%20vlasy/Masky%2C%20esence%2C%20s%C3%A9ra.png");
    }

    /* Kosmetické přístroje – zachování stávajících obrázků */
    #navigation .menu-item-889 .menu-item-907 {
      --np-menu-img: url("/user/documents/upload/Kosmetick%C3%A9%20p%C5%99%C3%ADstroje/Boost.png");
    }

    #navigation .menu-item-889 .menu-item-892 {
      --np-menu-img: url("/user/documents/upload/Kosmetick%C3%A9%20p%C5%99%C3%ADstroje/LumiSpa.png");
    }

    #navigation .menu-item-889 .menu-item-901 {
      --np-menu-img: url("/user/documents/upload/Kosmetick%C3%A9%20p%C5%99%C3%ADstroje/GalvanicSpa.png");
    }

    #navigation .menu-item-889 .menu-item-904 {
      --np-menu-img: url("/user/documents/upload/Kosmetick%C3%A9%20p%C5%99%C3%ADstroje/WellSpa%20iO.png");
    }

    #navigation .menu-item-889 .menu-item-910 {
      --np-menu-img: url("/user/documents/upload/Kosmetick%C3%A9%20p%C5%99%C3%ADstroje/%C3%9Astn%C3%AD%20p%C3%A9%C4%8De.png");
    }

    #navigation .menu-item-808 > .menu-level-2 > li > .menu-no-image > a::before,
    #navigation .menu-item-889 > .menu-level-2 > li > .menu-no-image > a::before {
      background-size: cover;
    }

    #navigation .menu-item-889 .menu-item-913 > .menu-no-image > a::before {
      display: none !important;
      content: none !important;
    }
  }

  /* NOVÁ PLEŤ – kontaktní lišta */
  #np-contact-bar {
    position: relative;
    z-index: 50;
    width: 100%;
    border-top: 5px solid #292929;
    background: #f4d1d3;
    color: #111;
    font-size: 14px;
  }

  #np-contact-bar .np-contact-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1170px;
    min-height: 35px;
    margin: 0 auto;
    padding: 0 16px;
  }

  #np-contact-bar a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #111 !important;
    font-weight: 500;
    text-decoration: none !important;
  }

  #np-contact-bar a:hover {
    text-decoration: underline !important;
  }

  #np-contact-bar svg {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
  }

  /* NOVÁ PLEŤ – nativní vyhledávání Shoptetu v hlavičce */
  @media (min-width: 992px) {
    #header .header-top-wrapper > .site-name {
      order: 1;
    }

    #header .header-top-wrapper > .navigation-tools {
      order: 2;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
    }

    #header .header-top-wrapper > .navigation-buttons {
      order: 3;
    }

    #header .header-top-wrapper > .user-action {
      order: 4;
    }

    #header .navigation-buttons > [data-target="search"] {
      display: none !important;
    }

    #header .navigation-tools > .np-header-search-widget {
      position: static !important;
      display: block !important;
      width: 100% !important;
      max-width: 370px !important;
      height: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
      z-index: 100 !important;
    }

    #header .np-header-search-widget > .search-widget-close {
      display: none !important;
    }

    #header .np-header-search-widget form.np-header-search {
      position: relative;
      display: block !important;
      width: 100%;
      max-width: 370px;
      height: 46px;
      margin: 0 !important;
      overflow: visible !important;
      border: 2px solid #ece8e6;
      border-radius: 25px;
      background: #fff;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    #header .np-header-search-widget form.np-header-search:focus-within {
      border-color: #d9aaa8;
      box-shadow: 0 0 0 3px rgba(217, 170, 168, 0.16);
    }

    #header .np-header-search-widget form.np-header-search fieldset {
      width: 100%;
      height: 100%;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
    }

    #header .np-header-search-widget form.np-header-search .search-form-input-group {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
    }

    #header .np-header-search-widget form.np-header-search .search-input-icon {
      display: none !important;
    }

    #header .np-header-search-widget form.np-header-search input[type="search"] {
      flex: 1 1 auto;
      min-width: 0;
      height: 42px !important;
      margin: 0 !important;
      padding: 0 8px 0 19px !important;
      border: 0 !important;
      border-radius: 23px 0 0 23px !important;
      outline: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #111 !important;
      font-size: 14px !important;
    }

    #header .np-header-search-widget form.np-header-search input::placeholder {
      color: #777;
      opacity: 1;
    }

    #header .np-header-search-widget form.np-header-search .search-button {
      flex: 0 0 52px;
      width: 52px;
      height: 42px;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden;
      border: 0 !important;
      border-radius: 0 23px 23px 0 !important;
      background-color: transparent !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
      background-size: 21px 21px !important;
      color: transparent !important;
      font-size: 0 !important;
    }

    #header .np-header-search-widget form.np-header-search .search-button:hover {
      background-color: #f7eeee !important;
    }

    #header .np-header-search-widget .search-whisperer,
    #header .np-header-search-widget .search-results-groups {
      top: calc(100% + 8px);
      overflow: hidden;
      border: 1px solid #e2d8d5;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 10px 28px rgba(40, 32, 32, 0.16);
    }
  }

  @media (max-width: 991px) {
    #np-contact-bar {
      font-size: 12px;
    }

    #np-contact-bar .np-contact-inner {
      min-height: 34px;
      gap: 10px;
      padding: 0 10px;
    }

    #np-contact-bar .np-contact-label {
      display: none;
    }

    #np-contact-bar svg {
      flex-basis: 16px;
      width: 16px;
      height: 16px;
    }
  }

@media (min-width: 992px) {
    body.np-cosmetics-listing .category-content-wrapper {
      display: grid !important;
      grid-template-columns: 250px minmax(0, 1fr);
      grid-auto-flow: row;
      column-gap: 32px;
      align-items: start;
    }

    body.np-cosmetics-listing .category-content-wrapper > * {
      grid-column: 2;
      min-width: 0;
    }

    body.np-cosmetics-listing .category-content-wrapper > #filters-wrapper {
      grid-column: 1;
      grid-row: 1 / span 20;
      width: 100%;
      margin: 0;
      padding: 0 20px 0 0;
      border-right: 1px solid #e7dddd;
      box-sizing: border-box;
    }

    body.np-cosmetics-listing #filters-wrapper label.filter-label::before,
    body.np-cosmetics-listing #filters-wrapper label.filter-label::after {
      display: none !important;
      content: none !important;
    }

    body.np-cosmetics-listing #filters-wrapper .filters-unveil-button-wrapper {
      display: none !important;
    }

    body.np-cosmetics-listing #filters-wrapper #filters,
    body.np-cosmetics-listing #filters-wrapper #category-filter-hover {
      position: static !important;
      display: block !important;
      width: 100% !important;
      max-height: none !important;
      margin: 0 !important;
      padding: 0 !important;
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
      box-shadow: none !important;
      background: transparent !important;
    }

    body.np-cosmetics-listing #filters-wrapper .slider-wrapper,
    body.np-cosmetics-listing #filters-wrapper .filter-section {
      margin: 0 !important;
      padding: 17px 0 !important;
      border: 0 !important;
      border-bottom: 1px solid #e7dddd !important;
      background: transparent !important;
    }

    body.np-cosmetics-listing #filters-wrapper h4 {
      margin: 0 0 13px !important;
      color: #4b3b3b !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      letter-spacing: 1.3px !important;
      text-transform: uppercase !important;
    }

    body.np-cosmetics-listing #filters-wrapper .filter-label {
      display: block !important;
      width: auto !important;
      min-width: 0;
      margin: 0 !important;
      padding: 0 !important;
      color: #554949;
      font-size: 14px;
      line-height: 1.35;
      white-space: normal !important;
      overflow-wrap: anywhere;
    }

    body.np-cosmetics-listing #filters-wrapper fieldset {
      display: block !important;
      width: 100% !important;
      min-width: 0;
      margin: 0 !important;
      padding: 0 !important;
    }

    body.np-cosmetics-listing #filters-wrapper fieldset > div {
      display: grid !important;
      grid-template-columns: 18px minmax(0, 1fr) !important;
      grid-auto-flow: row !important;
      grid-auto-rows: auto !important;
      align-items: flex-start !important;
      column-gap: 9px !important;
      row-gap: 0 !important;
      width: 100% !important;
      min-width: 0;
      margin: 0 !important;
      padding: 0 !important;
      float: none !important;
      clear: both;
      box-sizing: border-box;
    }

    body.np-cosmetics-listing #filters-wrapper fieldset > div > label,
    body.np-cosmetics-listing #filters-wrapper fieldset > div > .filter-label {
      grid-column: 2 !important;
      width: 100% !important;
      min-width: 0 !important;
      margin: 0 !important;
      padding: 6px 0 !important;
      float: none !important;
      box-sizing: border-box !important;
    }

    body.np-cosmetics-listing #filters-wrapper .filter-count {
      display: inline-block !important;
      margin-left: 4px;
      color: #9a8989;
      white-space: nowrap;
    }

    body.np-cosmetics-listing #filters-wrapper .filter-total-count {
      padding-top: 5px;
      color: #756565;
      font-size: 13px;
    }

    body.np-cosmetics-listing .category-header {
      margin-top: 0 !important;
    }

    body.np-cosmetics-listing .listSorting__controls {
      justify-content: flex-end;
    }
  }

  @media (max-width: 991px) {
    body.np-cosmetics-listing .category-content-wrapper {
      display: block !important;
    }
  }

/* NOVÁ PLEŤ – rozcestník péče na hlavní stránce */

.np-care-picker {
  width: 100%;
  max-width: 1240px;
  margin: 38px auto 48px;
  padding: 28px 28px 30px;
  overflow: hidden;
  border: 1px solid #f0e3e1;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(244, 209, 211, 0.42), transparent 34%),
    #fffaf9;
  box-sizing: border-box;
}

.np-care-picker-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.np-care-picker-heading {
  min-width: 0;
}

.np-care-picker-kicker {
  display: block;
  margin-bottom: 5px;
  color: #a96f73;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.45px;
  line-height: 1.3;
  text-transform: uppercase;
}

.np-care-picker h2 {
  margin: 0 !important;
  color: #352c2d !important;
  font-size: clamp(25px, 2.4vw, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.15 !important;
  text-align: left !important;
  text-transform: none !important;
}

.np-care-picker-controls {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
}

.np-care-picker-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid #e5cfcd;
  border-radius: 50%;
  background: #fff;
  color: #4c3d3e;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}

.np-care-picker-button:hover {
  border-color: #d5a5a7;
  background: #f8e8e8;
  transform: translateY(-1px);
}

.np-care-picker-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.np-care-picker-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.np-care-picker-viewport::-webkit-scrollbar {
  display: none;
}

.np-care-picker-track {
  display: flex !important;
  gap: 16px;
  width: max-content !important;
  max-width: none !important;
}

.np-care-card {
  display: flex;
  flex: 0 0 270px !important;
  width: 270px !important;
  min-width: 270px !important;
  max-width: 270px !important;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #eadfdd;
  border-radius: 15px;
  background: #fff;
  color: #3c3334 !important;
  text-decoration: none !important;
  box-shadow: 0 5px 18px rgba(74, 52, 53, 0.07);
  flex-direction: column;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.np-care-card:hover {
  border-color: #ddb9b8;
  color: #3c3334 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(74, 52, 53, 0.13);
  transform: translateY(-4px);
}

.np-care-card-image {
  display: block;
  position: relative;
  width: 100%;
  height: 150px !important;
  min-height: 150px;
  max-height: 150px;
  aspect-ratio: auto !important;
  overflow: hidden;
  background: #f7eeee;
}

.np-care-card-image::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(54, 39, 40, 0.16), transparent);
  content: "";
  pointer-events: none;
}

.np-care-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.np-care-card:hover .np-care-card-image img {
  transform: scale(1.035);
}

.np-care-card-content {
  display: flex;
  flex: 1 1 auto;
  min-height: 140px;
  padding: 17px 18px 18px;
  box-sizing: border-box;
  flex-direction: column;
}

.np-care-card-title {
  display: block;
  margin-bottom: 15px;
  color: #342b2c;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.np-care-card-text {
  display: none;
}

.np-care-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin-top: auto;
  padding: 9px 13px;
  border: 2px solid #efa9a6;
  border-radius: 999px;
  color: #9e666b;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.25px;
  line-height: 1.2;
  box-sizing: border-box;
}

.np-care-card-link svg {
  display: none;
}

.np-care-card:hover .np-care-card-link svg {
  transform: translateX(3px);
}

@media (max-width: 991px) {
  .np-care-picker {
    margin: 36px 0 44px;
    padding: 30px 25px 32px;
  }

  .np-care-card {
    flex-basis: 250px !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
  }
}

@media (max-width: 575px) {
  .np-care-picker {
    margin: 28px 0 36px;
    padding: 25px 16px 26px;
    border-radius: 17px;
  }

  .np-care-picker-header {
    align-items: center;
    gap: 12px;
    margin-bottom: 19px;
  }

  .np-care-picker h2 {
    font-size: 25px !important;
  }

  .np-care-picker-kicker {
    font-size: 10px;
  }

  .np-care-picker-controls {
    display: none;
  }

  .np-care-picker-track {
    gap: 12px;
  }

  .np-care-card {
    flex-basis: clamp(240px, 78vw, 280px) !important;
    width: clamp(240px, 78vw, 280px) !important;
    min-width: clamp(240px, 78vw, 280px) !important;
    max-width: clamp(240px, 78vw, 280px) !important;
  }

  .np-care-card-title {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .np-care-picker-viewport {
    scroll-behavior: auto;
  }

  .np-care-card,
  .np-care-card-image img,
  .np-care-picker-button,
  .np-care-card-link svg {
    transition: none;
  }
}