/* Salon Oliver: small refinements of the existing template, 2026-10-26. */
:root {
  --ol-control-border: #b4c7d4;
  --ol-surface-soft: #fff7d5;
}
html { scrollbar-gutter: stable; scrollbar-color: #8299a8 #f4f4f4; scrollbar-width: auto; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: #8299a8; border: 3px solid #f4f4f4; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #506e80; }
::-webkit-scrollbar-thumb:active { background: var(--color-primary); }
::-webkit-scrollbar-track { background: #f4f4f4; }
@media (forced-colors: active) { html { scrollbar-color: auto; } }

/* Reserve known image geometry before the image response arrives. */
.site-name img { aspect-ratio: 300 / 52; height: auto; }
.type-index .baner-obrazek img { aspect-ratio: 842 / 480; width: 842px; max-width: 100%; height: auto; }
.salon-header img, .o-nas-header img, .home-kurzy img { aspect-ratio: 1; width: min(100%,690px); height: auto; }
#zastoupeni .image-all img { aspect-ratio: 320 / 166; width: 320px; max-width: 100%; height: auto; }
.contact-item > img { width: 100px; height: 100px; object-fit: contain; }
.type-product .p-main-image img { aspect-ratio: 1; object-fit: contain; }

/* Keep the existing font and colours; allow comfortable reading. */
.type-product .p-short-description,
.type-product .basic-description { text-align: left; line-height: 1.65; }
.type-product .basic-description :is(h2,h3) { line-height: 1.3; }
.in-salon .salon-text p, .in-o-nas .o-nas-text p { line-height: 1.5; }
.in-kontakty .contact-item p:last-of-type { line-height: 1.55; }
.in-kontakty .contact-item a { color: var(--color-tertiary-hover); text-underline-offset: 3px; }
.in-kontakty .contact-item a:hover { text-decoration: underline; }
/* Compact native subcategory links retain the existing illustrations and HTML. */
.type-category #content .subcategories {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap: 8px;
  margin: 16px 0 20px;
  padding: 0;
}
.type-category #content .subcategories > li { float: none; width: auto; min-width: 0; margin: 0; padding: 0; }
.type-category #content .subcategories > li > a {
  display: flex; align-items: center; gap: 10px; height: 100%; min-height: 52px;
  padding: 8px 12px; border: 0; border-radius: 12px;
  background: transparent; text-decoration: none; isolation: isolate;
  transition: background-color .12s,color .12s;
}
.type-category #content .subcategories > li > a:hover { background: var(--ol-surface-soft); color: var(--color-primary); }
.type-category #content .subcategories > li > a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.type-category #content .subcategories .image {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 36px; width: 36px; height: 36px; min-width: 0; margin: 0; padding: 0; background: transparent;
}
.type-category #content .subcategories .image img { display: block; width: 36px; height: 36px; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.type-category #content .subcategories .text {
  display: block; min-width: 0; padding: 0; margin: 0; font-size: 15px; font-weight: 600;
  line-height: 1.4; white-space: normal; overflow: visible; text-overflow: clip;
}

/* One primary colour throughout the native purchase path. */
.in-krok-1 .radio-wrapper.inactive-child { display: none; }

#content .btn.btn-conversion,
#colorbox .btn.btn-conversion,
#continue-order-button,
.type-product .p-to-cart-block .add-to-cart-button,
.products-block .p-tools .btn.add-to-cart-button {
  min-height: 44px;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  border-radius: 350px;
}
#content .btn.btn-conversion:hover,
#colorbox .btn.btn-conversion:hover,
#continue-order-button:hover,
.type-product .p-to-cart-block .add-to-cart-button:hover,
.products-block .p-tools .btn.add-to-cart-button:hover {
  background: #06416b;
  border-color: #06416b;
  color: #fff;
}
.product .p-tools a.btn.btn-primary {
  min-height: 44px;
  background: #fff;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.product .p-tools a.btn.btn-primary:hover { background: var(--ol-surface-soft); }
.products-block .p-tools .pr-action { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-width: 0; }
.products-block .p-tools .pr-action > .quantity { flex: 0 0 auto; margin: 0; }
.products-block .p-tools .pr-action > .add-to-cart-button { flex: 1 1 102px; max-width: 100%; margin: 0; }
:is(#content,#colorbox) .btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
:is(#content,#colorbox) .btn:disabled { cursor: not-allowed; }

/* Phone reservations use the existing contact number and native links. */
.ol-salon-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; width: 100%; }
.ol-salon-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 22px; border: 1px solid var(--color-secondary); border-radius: 350px; background: var(--color-secondary); color: var(--color-primary); font: 600 15px/1.4 Raleway,sans-serif; text-decoration: none; }
.ol-salon-actions a + a { background: transparent; color: var(--color-secondary); }
.ol-salon-actions a:hover { background: var(--ol-surface-soft); color: var(--color-primary); }
.ol-salon-actions a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.ol-salon-actions a:focus-visible { outline-color: var(--color-secondary); }

/* Shoptet's extended-order dialog remains the only cart continuation. */
#colorbox:has(.advanced-order) { border-radius: 14px; }
.advanced-order > .h1 { font: 700 28px/1.25 Raleway,sans-serif; color: var(--color-primary); padding-right: 22px; }
.advanced-order > .h2 { font: 600 20px/1.45 Raleway,sans-serif; overflow-wrap: anywhere; }
.advanced-order > .h2 > span { display: block; font-size: 16px; font-weight: 400; }
.advanced-order .advancedOrder__buttons .btn { min-height: 44px; border-radius: 350px; font-size: 15px; line-height: 1.4; white-space: normal; }
.advanced-order .advancedOrder__buttons .btn-conversion { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Native category controls, now grouped above products. */
.type-category #content .ol-filter-wrapper { display: block; position: relative; height: auto; max-height: none; opacity: 1; visibility: visible; overflow: visible; width: 100%; margin: 20px 0; padding: 18px; border: 1px solid #eadb9b; border-radius: 20px; background: var(--color-secondary); }
.ol-filter-heading { margin: 0 0 12px; font: 700 16px/1.4 Raleway,sans-serif; color: var(--color-primary); }
body #content #filters.ol-filterbar { display: block; position: relative; z-index: 20; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; }
.ol-filter-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.ol-filter-wrapper, .ol-filterbar, .ol-filter-groups, .ol-filter-group, .ol-filter-trigger { transition-property: color,background-color,border-color; transition-duration: .12s; }
.ol-filter-group { position: relative; margin: 0; padding: 0; border: 0; min-width: 0; }
.ol-filter-trigger { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 16px; background: #fff; border: 1px solid var(--ol-control-border); border-radius: 23px; color: var(--color-primary); font: 600 15px/1.45 Raleway,sans-serif; cursor: pointer; list-style: none; }
.ol-filter-trigger::-webkit-details-marker { display: none; }
.ol-filter-trigger::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 3px; margin-top: -4px; }
.ol-filter-trigger:hover, .ol-filter-group[open] > summary { background: var(--ol-surface-soft); border-color: var(--color-primary); }
.ol-filter-group[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
.ol-filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 2px 5px; border-radius: 10px; background: var(--color-primary); color: #fff; font-size: 12px; }
.ol-filter-popover { position: absolute; top: var(--ol-filter-top,calc(100% + 8px)); bottom: var(--ol-filter-bottom,auto); left: var(--ol-filter-shift,0px); z-index: 40; width: 300px; max-width: calc(100vw - 36px); max-height: min(430px,65dvh,var(--ol-filter-room,430px)); padding: 16px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--ol-control-border); border-radius: 14px; box-shadow: 0 8px 24px #07558722; background: #fff; }
.ol-filter-group:not([open]) > .ol-filter-popover { display: none; }
body #filters .ol-filter-popover :is(.filter-section,fieldset,form,.param-filter-top) { display: block; float: none; width: 100%; height: auto; margin: 0; padding: 0; border: 0; background: none; }
body #filters .ol-filter-option { display: flex; position: relative; align-items: center; float: none !important; clear: both !important; width: 100% !important; max-width: 100%; flex: 0 0 100%; gap: 10px; padding: 5px 0; min-height: 44px; }
body #filters .ol-filter-option input[type=checkbox] { display: block !important; position: static !important; clip: auto !important; clip-path: none !important; opacity: 1 !important; appearance: auto !important; width: 18px !important; height: 18px !important; flex: 0 0 18px; margin: 0 !important; accent-color: var(--color-primary); }
body #filters .ol-filter-option .filter-label { display: flex !important; align-items: center; gap: 6px; position: static !important; margin: 0 !important; padding: 0 !important; width: 100%; min-width: 0; color: #2b2a29; font-size: 15px; line-height: 1.5; white-space: normal; cursor: pointer; }
body #filters .ol-filter-option .filter-label::before, body #filters .ol-filter-option .filter-label::after { display: none !important; }
body #filters .filter-count { display: inline-block; flex: 0 0 auto; margin-left: auto; padding: 3px 6px; width: auto; height: auto; border-radius: 6px; background: #f0f4f6; color: #4b5e69; font-size: 12px; line-height: 1.4; }
body #filters .ol-filter-options { display: block; width: 100%; }
body #filters .ol-filter-swatch:not(.filter-label) { display: none !important; }
body #filters .ol-filter-swatch img { width: 24px; height: 24px; object-fit: cover; }
.ol-filter-search { width: 100%; height: 44px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--ol-control-border); border-radius: 8px; font-size: 16px; }
.ol-filter-price-fields { display: flex; gap: 12px; margin-bottom: 14px; }
.ol-filter-price-fields label { width: 50%; color: #4b5e69; font-size: 14px; }
.ol-filter-price-fields input { display: block; width: 100%; height: 44px; margin-top: 6px; padding: 8px; border: 1px solid var(--ol-control-border); border-radius: 8px; font-size: 16px; }
.ol-filter-apply { width: 100%; min-height: 44px; padding: 10px; border: 0; border-radius: 24px; background: var(--color-primary); color: #fff; font: 600 15px/1.5 Raleway,sans-serif; cursor: pointer; }
.ol-filter-apply:hover { background: #06416b; }
.ol-filter-error { margin: 12px 0 0; color: #a52332; font-size: 14px; line-height: 1.5; }
.ol-filter-status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; min-height: 36px; margin-top: 10px; color: #394d59; font-size: 13px; }
.ol-filter-count .category-header-pagination { display: block; }
.ol-filter-reset { min-height: 44px; padding: 8px 4px; border: 0; background: none; color: var(--color-primary); font: 600 14px/1.4 Raleway,sans-serif; text-decoration: underline; cursor: pointer; }
.ol-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ol-filter-chips:empty { display: none; }
.ol-filter-chips button { min-height: 44px; max-width: 100%; padding: 9px 12px; border: 1px solid var(--ol-control-border); border-radius: 22px; background: #fff; color: var(--color-primary); font-size: 14px; text-align: left; cursor: pointer; }
body #filters :is(.ol-filter-trigger,button,input):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
body #filters [hidden] { display: none !important; }
#category-header.ol-filter-header-empty { display: none; }
body #filters .listSorting { position: relative; min-width: 0; }
body #filters .sortingToggle { min-height: 46px; padding: 12px 16px; column-gap: 6px; border: 1px solid var(--ol-control-border); border-radius: 23px; background: #fff; color: var(--color-primary); font-size: 15px; }
body #filters .sortingToggle .icon-sort { position: static; margin: 0 4px 0 0; flex-shrink: 0; }
body #filters .sortingToggle .icon-chevron-down { position: static; margin: 0 0 0 4px; flex-shrink: 0; }
body #filters .listSorting__controls--dropdown { min-width: 240px; max-width: calc(100vw - 36px); border-radius: 12px; }
.sidebar-left .box-filters:not(:has(#filters)) { display: none; }

/* Reserve the final filter space while the small native adapter starts. */
html.ol-filters-pending body.type-category .sidebar-left .box-filters,
html.ol-filters-pending body.type-category .filters-wrapper:not(.ol-filter-wrapper) { display: none; }
html.ol-filters-pending body.type-category #category-header {
  display: block; visibility: hidden; min-height: 127px; margin: 20px 0; padding: 0; border: 0;
}
html.ol-filters-pending.ol-filters-selected body.type-category #category-header { min-height: 183px; }
@media (min-width: 768px) and (max-width: 1199px) {
  html.ol-filters-pending body.type-category #category-header { min-height: 182px; }
  html.ol-filters-pending.ol-filters-selected body.type-category #category-header { min-height: 245px; }
}

/* Desktop keeps a light page surface; only individual filter controls are tinted. */
@media (min-width: 768px) {
  .type-category #content .ol-filter-wrapper { padding: 0; border: 0; border-radius: 0; background: transparent; }
  .ol-filter-trigger { background: var(--color-secondary); border-color: #eadb9b; }
  .ol-filter-trigger:hover, .ol-filter-group[open] > summary { background: var(--ol-surface-soft); border-color: var(--color-primary); }

  /* Existing category tree and native expand controls; presentation only. */
  .sidebar-left .box-categories { padding: 14px 10px; }
  .sidebar-left #categories .categories > ul { padding: 0; margin: 0; }
  .sidebar-left #categories li { padding: 0; }
  .sidebar-left #categories .categories li > a,
  .sidebar-left #categories .categories .topic > a {
    position: relative; min-height: 44px; padding: 11px 38px 11px 12px !important;
    border-radius: 8px; font-size: 15px; font-weight: 600; line-height: 1.45;
    white-space: normal; overflow-wrap: anywhere; text-decoration: none;
    transition: color .12s, background-color .12s;
  }
  .sidebar-left #categories .categories ul ul {
    margin: 3px 0 8px 16px; padding: 0 0 0 10px; border: 0;
  }
  .sidebar-left #categories .categories ul ul li > a { font-size: 14px; font-weight: 400; }
  .sidebar-left #categories .categories ul ul ul li > a { font-size: 13px; }
  .sidebar-left #categories .categories li.active > a,
  .sidebar-left #categories .categories li:has(li.active) > a { color: var(--color-primary); font-weight: 700; }
  .sidebar-left #categories .categories li.active:not(:has(li.active)) > a {
    background: #fff; box-shadow: none;
  }
  .sidebar-left #categories .categories a:hover { background: #ffffff80; color: var(--color-primary); }
  .sidebar-left #categories a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
  .sidebar-left #categories .expandable > a > .cat-trigger,
  .sidebar-left #categories .topic > a > .cat-trigger {
    left: auto; right: 0; top: 0; bottom: 0; width: 36px; height: 100%; min-height: 44px;
    display: flex; align-items: center; justify-content: center; color: var(--color-primary);
  }
  .sidebar-left #categories .cat-trigger::before { font-size: 11px; }
}

@media (max-width: 767px) {
  .type-index #content .banners-row .wide-carousel { width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  html.ol-filters-pending body.type-category #category-header { min-height: 265px; }
  html.ol-filters-pending.ol-filters-selected body.type-category #category-header { min-height: 329px; }
  .in-salon .salon-header img, .in-o-nas .o-nas-header img { width: 100% !important; max-width: 300px !important; }
  .advanced-order > .h1 { font-size: 24px; }
  .advanced-order > .h2 { font-size: 18px; }
  .advanced-order .advancedOrder__buttons { display: flex; flex-direction: column-reverse; gap: 8px; }
  .advanced-order .advancedOrder__buttons .btn { width: 100%; margin: 0; padding: 12px 16px; }
  .siteCookies { left: 10px; right: 10px; bottom: 10px; top: auto; width: auto; margin: 0; transform: none; max-height: 45svh; overflow: auto; border-radius: 12px; }
  .siteCookies .siteCookies__form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; border-radius: 12px; }
  .siteCookies .siteCookies__content { display: contents; }
  .siteCookies .siteCookies__text { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.5; }
  .siteCookies .siteCookies__links { position: static; width: auto; max-width: none; margin: 0; }
  .siteCookies .siteCookies__buttonWrap { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
  .siteCookies :is(.siteCookies__link,.siteCookies__button) { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 8px; font-size: 14px; line-height: 1.4; white-space: normal; }
  #heurekaTabright, #heurekaTableft { display: none !important; }
  .in-kontakty .contact-container { gap: 24px; }
  .in-kontakty .contact-item { width: 100%; min-width: 0; padding: 0 20px; }
  .in-kontakty .contact-item > img { width: 64px; height: 64px; }
  .in-kontakty .contact-item p:first-of-type { margin-top: 10px !important; }
  .in-kontakty .contact-item a { overflow-wrap: anywhere; }
  #content h1, .type-product .p-detail-inner-header-mobile .h1 { line-height: 1.2; }
  #content h1:not(.h1) { font-size: 42px; }
  .type-product .p-detail-inner-header-mobile .h1 { font-size: 27px; }
  .in-salon .salon-text p, .in-o-nas .o-nas-text p { font-size: 17px; line-height: 1.6; }
  .type-category .category-perex { font-size: 16px; line-height: 1.6; }
  .type-category #content .subcategories { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .type-category #content .subcategories > li > a { min-height: 52px; padding: 8px; gap: 8px; }
  .type-category #content .subcategories .image { flex-basis: 28px; width: 28px; height: 28px; }
  .type-category #content .subcategories .image img { width: 28px; height: 28px; }
  .type-category #content .subcategories .text { font-size: 14px; line-height: 1.35; }
  .type-category #content .ol-filter-wrapper { padding: 14px; border-radius: 16px; }
  .ol-filter-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .ol-filter-trigger { width: 100%; justify-content: space-between; gap: 5px; padding: 10px 12px; font-size: 14px; }
  .ol-filter-popover { width: calc(100vw - 60px); }
  .ol-filter-group[open] { z-index: 10; }
  #filters .listSorting { grid-column: 1 / -1; }
  #filters .sortingToggle { width: 100%; }
  .ol-salon-actions a { width: 100%; }
}
@media (max-width: 359px) {
  html.ol-filters-pending body.type-category #category-header { min-height: 286px; }
  html.ol-filters-pending.ol-filters-selected body.type-category #category-header { min-height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .ol-filterbar *, .ol-salon-actions * { scroll-behavior: auto; transition: none; animation: none; }
}