/*
 * Kosmetika4U – levý panel kategorií
 * Verze: 1.2.0
 *
 * Vizuální vrstva pro nativní Shoptet sidebar. Funkčnost kategorií,
 * cenového filtru, checkboxů i AJAXového filtrování zůstává nativní.
 */

:root {
  --k4u-sidebar-bg: #f8f9f9;
  --k4u-sidebar-bg-subtle: #f3f4f4;
  --k4u-sidebar-filter-bg: #f6f6f6;
  --k4u-sidebar-border: #dadada;
  --k4u-sidebar-text: #4d4d4d;
  --k4u-sidebar-heading: #343a3a;
  --k4u-sidebar-muted: #737878;
  --k4u-sidebar-accent: #127c72;
  --k4u-sidebar-accent-dark: #0e655d;
  --k4u-sidebar-radius: 9px;
  --k4u-sidebar-focus: #20c3b4;
}

@media (min-width: 768px) {
  .sidebar.sidebar-left,
  .sidebar.sidebar-left * {
    box-sizing: border-box;
  }

  .sidebar.sidebar-left {
    color: var(--k4u-sidebar-text) !important;
    font-family: "Source Sans 3", sans-serif;
    font-size: 15px;
    line-height: 1.4;
  }

  .sidebar.sidebar-left .sidebar-inner {
    padding: 14px 12px 18px;
    background: var(--k4u-sidebar-bg);
  }

  .sidebar.sidebar-left .box,
  .sidebar.sidebar-left .k4u-loyalty-card {
    width: 100%;
    margin: 0 0 12px;
    border: 1px solid var(--k4u-sidebar-border);
    border-radius: var(--k4u-sidebar-radius);
    background: var(--k4u-sidebar-bg);
    box-shadow: none;
  }

  .sidebar.sidebar-left .box {
    padding: 16px;
  }

  .sidebar.sidebar-left .box-categories {
    padding: 14px 12px 10px;
    overflow: hidden;
  }

  .sidebar.sidebar-left .k4u-sidebar-heading-row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin: 0 2px 10px;
  }

  .sidebar.sidebar-left .k4u-sidebar-heading-row > h3,
  .sidebar.sidebar-left .k4u-sidebar-heading-row > h4,
  .sidebar.sidebar-left .box > h3,
  .sidebar.sidebar-left .box > h4 {
    margin: 0;
    color: var(--k4u-sidebar-heading) !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
  }

  .sidebar.sidebar-left .k4u-sidebar-collapse {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    color: var(--k4u-sidebar-accent) !important;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  .sidebar.sidebar-left .k4u-sidebar-collapse:hover {
    color: var(--k4u-sidebar-accent-dark);
  }

  .sidebar.sidebar-left .k4u-sidebar-collapse:focus-visible,
  .sidebar.sidebar-left .categories a:focus-visible,
  .sidebar.sidebar-left .k4u-loyalty-card__cta:focus-visible {
    outline: 2px solid var(--k4u-sidebar-focus);
    outline-offset: 2px;
  }

  .sidebar.sidebar-left #categories,
  .sidebar.sidebar-left .categories {
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  .sidebar.sidebar-left .categories > a,
  .sidebar.sidebar-left .categories > div > a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    gap: 10px;
    padding: 11px 30px 11px 10px;
    border: 0;
    border-bottom: 1px solid var(--k4u-sidebar-border);
    background: transparent;
    color: var(--k4u-sidebar-text) !important;
    -webkit-text-fill-color: var(--k4u-sidebar-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
  }

  .sidebar.sidebar-left .box-categories > .categories > :last-child > a,
  .sidebar.sidebar-left .box-categories > .categories > a:last-child,
  .sidebar.sidebar-left
    #categories
    > .categories:last-child
    > .topic
    > a {
    border-bottom-color: transparent;
  }

  .sidebar.sidebar-left .categories > a:hover,
  .sidebar.sidebar-left .categories > div > a:hover {
    background: #f1f2f2;
    color: var(--k4u-sidebar-heading) !important;
    -webkit-text-fill-color: var(--k4u-sidebar-heading);
  }

  .sidebar.sidebar-left .categories > a::before,
  .sidebar.sidebar-left .categories > div > a::before {
    left: 8px;
    color: var(--k4u-sidebar-muted);
  }

  .sidebar.sidebar-left .categories > a::after,
  .sidebar.sidebar-left .categories > div > a::after {
    right: 8px;
    color: var(--k4u-sidebar-muted);
  }

  .sidebar.sidebar-left .categories > .k4u-current-branch,
  .sidebar.sidebar-left #categories > .k4u-current-branch {
    margin: 4px 0;
    overflow: hidden;
    border-radius: 7px;
    background: var(--k4u-sidebar-bg-subtle);
  }

  .sidebar.sidebar-left .categories > .k4u-current-branch > a,
  .sidebar.sidebar-left
    #categories
    > .k4u-current-branch
    > .topic
    > a,
  .sidebar.sidebar-left #categories > .categories.active > .topic > a {
    border-bottom-color: var(--k4u-sidebar-border);
    color: var(--k4u-sidebar-accent) !important;
    -webkit-text-fill-color: var(--k4u-sidebar-accent);
    font-weight: 700;
  }

  .sidebar.sidebar-left .categories ul {
    margin: 0;
    padding: 4px 0 6px;
    background: transparent;
  }

  .sidebar.sidebar-left .categories ul li {
    margin: 0;
    padding: 0;
  }

  .sidebar.sidebar-left .categories ul a {
    display: flex;
    align-items: center;
    min-height: 38px;
    margin: 0;
    padding: 8px 12px 8px 38px;
    border: 0;
    border-left: 0;
    background: transparent;
    color: var(--k4u-sidebar-text) !important;
    -webkit-text-fill-color: var(--k4u-sidebar-text);
    font-size: 14.5px;
    font-weight: 400;
    line-height: 21px;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease,
      color 150ms ease;
  }

  .sidebar.sidebar-left .categories ul a:hover {
    background: #eceeee;
    color: var(--k4u-sidebar-heading) !important;
    -webkit-text-fill-color: var(--k4u-sidebar-heading);
  }

  .sidebar.sidebar-left .categories ul a.active,
  .sidebar.sidebar-left .categories ul a.k4u-is-current {
    background: #e9ecec;
    color: var(--k4u-sidebar-accent) !important;
    -webkit-text-fill-color: var(--k4u-sidebar-accent);
    box-shadow: inset 3px 0 0 var(--k4u-sidebar-accent);
    font-weight: 700;
  }

  .sidebar.sidebar-left .k4u-category-icon {
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0.68;
    object-fit: contain;
  }

  .sidebar.sidebar-left .categories > a:hover .k4u-category-icon,
  .sidebar.sidebar-left .categories > div > a:hover .k4u-category-icon,
  .sidebar.sidebar-left
    #categories
    > .k4u-current-branch
    > .topic
    > a
    .k4u-category-icon,
  .sidebar.sidebar-left
    #categories
    > .categories.active
    > .topic
    > a
    .k4u-category-icon {
    opacity: 1;
    filter: invert(38%) sepia(28%) saturate(1280%) hue-rotate(125deg)
      brightness(91%) contrast(89%);
  }

  .sidebar.sidebar-left .categories .cat-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-left: auto;
  }

  .sidebar.sidebar-left .categories .cat-trigger::before,
  .sidebar.sidebar-left .categories .cat-trigger::after {
    content: none !important;
  }

  .sidebar.sidebar-left .k4u-category-chevron {
    display: block;
    width: 16px;
    height: 16px;
    opacity: 0.62;
    pointer-events: none;
  }

  .sidebar.sidebar-left .categories.expanded .k4u-category-chevron,
  .sidebar.sidebar-left .categories.k4u-category-open .k4u-category-chevron {
    opacity: 1;
    filter: invert(38%) sepia(28%) saturate(1280%) hue-rotate(125deg)
      brightness(91%) contrast(89%);
    transform: rotate(90deg);
  }

  .sidebar.sidebar-left
    #categories
    > .categories.k4u-category-collapsed
    > ul {
    display: none !important;
  }

  .sidebar.sidebar-left
    #categories
    > .categories.k4u-category-open
    > ul {
    display: block !important;
  }

  .sidebar.sidebar-left
    .box-categories.k4u-categories-collapsed
    .categories
    ul {
    display: none !important;
  }

  .sidebar.sidebar-left .box-filters,
  .sidebar.sidebar-left .box-topProducts,
  .sidebar.sidebar-left .box-onlinePayments,
  .sidebar.sidebar-left .box-newsletter,
  .sidebar.sidebar-left .box-section2 {
    padding: 16px;
  }

  .sidebar.sidebar-left .box-filters h4,
  .sidebar.sidebar-left .box-topProducts h4,
  .sidebar.sidebar-left .box-onlinePayments h4,
  .sidebar.sidebar-left .box-newsletter h4,
  .sidebar.sidebar-left .box-section2 h4,
  .sidebar.sidebar-left .box-filters h3,
  .sidebar.sidebar-left .box-topProducts h3,
  .sidebar.sidebar-left .box-onlinePayments h3,
  .sidebar.sidebar-left .box-newsletter h3,
  .sidebar.sidebar-left .box-section2 h3 {
    margin: 0 0 13px;
    color: var(--k4u-sidebar-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
  }

  .sidebar.sidebar-left .box-filters .filter-sections {
    margin: 14px -4px -4px;
    padding: 12px;
    border-radius: 7px;
    background: var(--k4u-sidebar-filter-bg);
  }

  .sidebar.sidebar-left .box-filters .filter-section,
  .sidebar.sidebar-left .box-filters .filter-section-parametric {
    color: var(--k4u-sidebar-text);
    font-size: 15px;
    line-height: 1.4;
  }

  .sidebar.sidebar-left .box-filters label {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 0;
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
    color: var(--k4u-sidebar-text);
    font-size: 15px;
    line-height: 22px;
  }

  .sidebar.sidebar-left .box-filters .slider-content,
  .sidebar.sidebar-left .box-filters .ui-widget-content {
    background: var(--k4u-sidebar-border);
  }

  .sidebar.sidebar-left .box-filters .ui-slider-range,
  .sidebar.sidebar-left .box-filters .ui-slider-handle {
    background: var(--k4u-sidebar-accent);
  }

  .sidebar.sidebar-left .box-filters .filter-count {
    margin-left: auto;
    background: #fff !important;
    color: var(--k4u-sidebar-text);
  }

  .sidebar.sidebar-left .box-filters .filters-unveil-button-wrapper,
  .sidebar.sidebar-left .box-filters .filter-section-button {
    margin-top: 10px;
  }

  .sidebar.sidebar-left .box-filters .filters-unveil-button,
  .sidebar.sidebar-left .box-filters .btn {
    min-height: 42px;
    border-color: var(--k4u-sidebar-accent);
    border-radius: 6px;
    background: var(--k4u-sidebar-accent);
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    font-size: 15px;
    font-weight: 700;
  }

  .sidebar.sidebar-left .box-filters .filters-unveil-button:hover,
  .sidebar.sidebar-left .box-filters .btn:hover {
    border-color: var(--k4u-sidebar-accent-dark);
    background: var(--k4u-sidebar-accent-dark);
    color: #fff !important;
    -webkit-text-fill-color: #fff;
  }

  .sidebar.sidebar-left .box-topProducts ol,
  .sidebar.sidebar-left .box-topProducts ul {
    margin-bottom: 0;
  }

  .sidebar.sidebar-left .box-topProducts li {
    min-height: 70px;
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid var(--k4u-sidebar-border);
  }

  .sidebar.sidebar-left .box-topProducts li:last-child {
    border-bottom: 0;
  }

  .sidebar.sidebar-left .box-topProducts a,
  .sidebar.sidebar-left .box-section2 a {
    color: var(--k4u-sidebar-text) !important;
    -webkit-text-fill-color: var(--k4u-sidebar-text);
    font-size: 14.5px;
    line-height: 1.35;
  }

  .sidebar.sidebar-left .box-topProducts a:hover,
  .sidebar.sidebar-left .box-section2 a:hover {
    color: var(--k4u-sidebar-accent) !important;
    -webkit-text-fill-color: var(--k4u-sidebar-accent);
  }

  .sidebar.sidebar-left .box-newsletter p,
  .sidebar.sidebar-left .box-section2 p {
    color: var(--k4u-sidebar-text);
    font-size: 14.5px;
    line-height: 1.45;
  }

  .sidebar.sidebar-left .box-newsletter .form-control {
    min-height: 44px;
    border-color: #919191;
    border-radius: 5px;
    background: #fff !important;
    color: var(--k4u-sidebar-text);
    font-size: 15px;
  }

  .sidebar.sidebar-left .box-newsletter .btn-primary {
    min-height: 44px;
    border-color: var(--k4u-sidebar-accent);
    border-radius: 5px;
    background: var(--k4u-sidebar-accent);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
  }

  .sidebar.sidebar-left .box-newsletter .btn-primary:hover {
    border-color: var(--k4u-sidebar-accent-dark);
    background: var(--k4u-sidebar-accent-dark);
  }

  .sidebar.sidebar-left .k4u-loyalty-card {
    padding: 17px 16px 15px;
    border-color: var(--k4u-sidebar-accent-dark);
    background: var(--k4u-sidebar-accent);
    color: #fff !important;
  }

  .sidebar.sidebar-left .k4u-loyalty-card__header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .sidebar.sidebar-left .k4u-loyalty-card__icon {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  .sidebar.sidebar-left .k4u-loyalty-card h3 {
    margin: 0 0 3px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
  }

  .sidebar.sidebar-left .k4u-loyalty-card p {
    margin: 0;
    color: #fff;
    font-size: 14.5px;
    line-height: 1.35;
  }

  .sidebar.sidebar-left .k4u-loyalty-card__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 13px 0 12px;
    padding: 0;
    list-style: none;
  }

  .sidebar.sidebar-left .k4u-loyalty-card__benefits li {
    position: relative;
    margin: 0;
    padding-left: 18px;
    color: #fff;
    font-size: 13.5px;
    line-height: 1.35;
  }

  .sidebar.sidebar-left .k4u-loyalty-card__benefits li::before {
    position: absolute;
    top: 0.62em;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    content: "";
    transform: translateY(-50%);
  }

  .sidebar.sidebar-left .k4u-loyalty-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 15px;
    border: 1px solid #fff;
    border-radius: 5px;
    background: #fff !important;
    color: var(--k4u-sidebar-accent-dark) !important;
    -webkit-text-fill-color: var(--k4u-sidebar-accent-dark);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
  }

  .sidebar.sidebar-left .k4u-loyalty-card__form {
    margin: 0;
  }

  .sidebar.sidebar-left .k4u-loyalty-card__cta:hover {
    background: var(--k4u-sidebar-filter-bg) !important;
    color: var(--k4u-sidebar-accent-dark) !important;
    -webkit-text-fill-color: var(--k4u-sidebar-accent-dark);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .sidebar.sidebar-left {
    font-size: 14.5px;
  }

  .sidebar.sidebar-left .sidebar-inner {
    padding-right: 9px;
    padding-left: 9px;
  }

  .sidebar.sidebar-left .box-categories {
    padding-right: 9px;
    padding-left: 9px;
  }

  .sidebar.sidebar-left .categories > a,
  .sidebar.sidebar-left .categories > div > a {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 14.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar.sidebar-left .categories a,
  .sidebar.sidebar-left .k4u-loyalty-card__cta {
    transition: none;
  }
}