/* =========================================================
   FUTURE BEAUTY — JB UI
   Version: 4.0
   Date: 2026-08-19

   CURRENT STABLE SCOPE
   ---------------------------------------------------------
   GLOBAL
   - hide price filter
   - hide stock filter
   - hide filter result count
   - remove Shoptet white filter wrapper
   - use one Future Beauty open/close filter control

   XANDRO
   - hide redundant brand filter
   - Zaměření = parametric ID 15
   - restrained warm brand border
   - mobile 2 × 2 pills

   LYI
   - hide redundant brand filter
   - Řada = parametric ID 18
   - Typ produktu = parametric ID 21
   - restrained gemstone/cool brand border
   - natural wrapping on mobile

   dr. he
   - hide redundant brand filter only
   - dedicated parameter styling will be added later

   IMPORTANT
   ---------------------------------------------------------
   This file intentionally does NOT try to pre-style future
   category parameters. Finish the category/filter structure
   first, then extend this file once from the final DOM/IDs.
   ========================================================= */


/* =========================================================
   01 — GLOBAL FILTER CLEANUP
   ========================================================= */

/* Price filter */
.slider-wrapper:has(> #categoryMinValue):has(> #categoryMaxValue),
.filter-section:has(#categoryMinValue):has(#categoryMaxValue) {
  display: none !important;
}


/* Stock filter — hide complete section */
.filter-section-boolean:has(
  input#stock[data-filter-code="stock"]
),
div:has(> input#stock[data-filter-code="stock"]) {
  display: none !important;
}


/* Total result count */
#category-filter-hover .filter-section-count,
#category-filter-hover .filter-total-count {
  display: none !important;
}


/* =========================================================
   02 — REMOVE SHOPTET WHITE FILTER BACKGROUND
   ========================================================= */

.filter-sections {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.filter-sections > .filter-section {
  background: transparent !important;
  box-shadow: none !important;
}


/* Main filter panel: clean, transparent, outlined */
#category-filter-hover {
  margin: 0 !important;
  padding: 20px 24px !important;

  border: 1px solid rgba(38, 50, 49, .14) !important;
  border-radius: 18px !important;

  background: transparent !important;
  box-shadow: none !important;

  overflow: hidden !important;
}


/* =========================================================
   03 — ONE FILTER TOGGLE ONLY
   ========================================================= */

/*
 * Shoptet can render its own:
 * .filter-section-button > .toggle-filters
 *
 * Future Beauty already has:
 * a.unveil-button[data-unveil="filters"]
 *
 * Hide the native Shoptet control ONLY when the Future Beauty
 * control exists, so categories without it retain a fallback.
 */

body:has(a.unveil-button[data-unveil="filters"])
.filter-sections > .filter-section-button {
  display: none !important;
}


/* Future Beauty open / close control */
a.unveil-button[data-unveil="filters"] {
  position: static !important;
  float: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;

  width: fit-content !important;
  min-width: 0 !important;
  min-height: 42px !important;
  height: auto !important;

  margin: 0 auto 18px !important;
  padding: 9px 16px !important;

  border: 1px solid rgba(38, 50, 49, .20) !important;
  border-radius: 999px !important;

  background: transparent !important;
  color: #344044 !important;

  box-shadow: none !important;

  font-family: "Outfit", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;

  cursor: pointer !important;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease !important;
}

a.unveil-button[data-unveil="filters"]:hover,
a.unveil-button[data-unveil="filters"]:focus {
  border-color: rgba(38, 50, 49, .36) !important;
  background: rgba(38, 50, 49, .035) !important;
  color: #26332f !important;

  box-shadow: none !important;
  outline: none !important;
}

a.unveil-button[data-unveil="filters"]::before,
a.unveil-button[data-unveil="filters"]::after {
  color: currentColor !important;
  opacity: .76 !important;
}


/* Native Shoptet fallback — only used if Future Beauty control
   is not present on a page. Keep it clean and usable. */
body:not(:has(a.unveil-button[data-unveil="filters"]))
.filter-sections > .filter-section-button {
  display: flex !important;
  justify-content: flex-end !important;

  margin: 0 0 12px !important;
  padding: 0 !important;

  border: 0 !important;
}

body:not(:has(a.unveil-button[data-unveil="filters"]))
.filter-sections
> .filter-section-button
> a.toggle-filters[data-unveil="category-filter-hover"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  min-height: 40px !important;
  padding: 9px 15px !important;

  border: 1px solid rgba(38, 50, 49, .20) !important;
  border-radius: 999px !important;

  background: transparent !important;
  color: #344044 !important;

  box-shadow: none !important;

  font-family: "Outfit", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}


/* =========================================================
   04 — BRAND PAGES / HIDE REDUNDANT BRAND FILTER
   ========================================================= */

#manufacturer-filter:has(
  input[name="referer"][value="/xandro/"]
),
#manufacturer-filter:has(
  input[name="referer"][value="/lyi-kosmetika-s-exosomy/"]
),
#manufacturer-filter:has(
  input[name="referer"][value="/bydrhe/"]
) {
  display: none !important;
}


/* =========================================================
   05 — XANDRO
   ========================================================= */

/* Border-only brand language */
body:has(.fb-xandro-top) #category-filter-hover {
  border-color: rgba(184, 160, 106, .38) !important;
}


/* Toggle */
body:has(.fb-xandro-top)
a.unveil-button[data-unveil="filters"] {
  border-color: rgba(184, 160, 106, .40) !important;
  color: #4d493f !important;
}

body:has(.fb-xandro-top)
a.unveil-button[data-unveil="filters"]:hover,
body:has(.fb-xandro-top)
a.unveil-button[data-unveil="filters"]:focus {
  border-color: rgba(255, 91, 29, .34) !important;
  background: rgba(255, 91, 29, .035) !important;
  color: #26332f !important;
}


/* Zaměření — ID 15 */
body:has(.fb-xandro-top)
.filter-section-parametric-id-15 {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
}

body:has(.fb-xandro-top)
.filter-section-parametric-id-15 h4 {
  flex: 0 0 auto !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: #26332f !important;

  font-family: "Outfit", Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}

body:has(.fb-xandro-top)
.filter-section-parametric-id-15 form {
  flex: 1 1 auto !important;
  margin: 0 !important;
}

body:has(.fb-xandro-top)
.filter-section-parametric-id-15 fieldset {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
}


/* =========================================================
   06 — LYI
   ========================================================= */

/* Border-only brand language */
body:has(.fb-lyi-top) #category-filter-hover {
  border-color: rgba(135, 166, 181, .42) !important;
}


/* Toggle */
body:has(.fb-lyi-top)
a.unveil-button[data-unveil="filters"] {
  border-color: rgba(135, 166, 181, .42) !important;
  color: #46565c !important;
}

body:has(.fb-lyi-top)
a.unveil-button[data-unveil="filters"]:hover,
body:has(.fb-lyi-top)
a.unveil-button[data-unveil="filters"]:focus {
  border-color: rgba(112, 145, 160, .58) !important;
  background: rgba(205, 225, 235, .10) !important;
  color: #364044 !important;
}


/* Řada — ID 18
   Typ produktu — ID 21 */

body:has(.fb-lyi-top)
.filter-section-parametric-id-18,

body:has(.fb-lyi-top)
.filter-section-parametric-id-21 {
  display: flex !important;
  align-items: flex-start !important;
  gap: 22px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
}

body:has(.fb-lyi-top)
.filter-section-parametric-id-21 {
  margin-top: 16px !important;
  padding-top: 16px !important;

  border-top: 1px solid rgba(135, 166, 181, .16) !important;
}

body:has(.fb-lyi-top)
.filter-section-parametric-id-18 h4,

body:has(.fb-lyi-top)
.filter-section-parametric-id-21 h4 {
  flex: 0 0 150px !important;

  margin: 9px 0 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: #364044 !important;

  font-family: "Outfit", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

body:has(.fb-lyi-top)
.filter-section-parametric-id-18 form,

body:has(.fb-lyi-top)
.filter-section-parametric-id-21 form {
  flex: 1 1 auto !important;
  margin: 0 !important;
}

body:has(.fb-lyi-top)
.filter-section-parametric-id-18 fieldset,

body:has(.fb-lyi-top)
.filter-section-parametric-id-21 fieldset {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
}


/* =========================================================
   07 — SHARED PARAMETRIC PILL SYSTEM
   XANDRO + LYI ONLY FOR NOW
   ========================================================= */

body:has(.fb-xandro-top)
.filter-section-parametric .advanced-filters-wrapper,

body:has(.fb-lyi-top)
.filter-section-parametric .advanced-filters-wrapper {
  display: none !important;
}

body:has(.fb-xandro-top)
.filter-section-parametric
fieldset > div:not(.advanced-filters-wrapper),

body:has(.fb-lyi-top)
.filter-section-parametric
fieldset > div:not(.advanced-filters-wrapper) {
  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* Keep native checkbox functional and accessible */
body:has(.fb-xandro-top)
.filter-section-parametric input[type="checkbox"],

body:has(.fb-lyi-top)
.filter-section-parametric input[type="checkbox"] {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  margin: -1px !important;
  padding: 0 !important;

  overflow: hidden !important;

  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;
  border: 0 !important;
}


/* Remove default Shoptet checkbox graphics */
body:has(.fb-xandro-top)
.filter-section-parametric .filter-label::before,

body:has(.fb-xandro-top)
.filter-section-parametric .filter-label::after,

body:has(.fb-lyi-top)
.filter-section-parametric .filter-label::before,

body:has(.fb-lyi-top)
.filter-section-parametric .filter-label::after {
  display: none !important;
  content: none !important;
}


/* Base pill */
body:has(.fb-xandro-top)
.filter-section-parametric .filter-label,

body:has(.fb-lyi-top)
.filter-section-parametric .filter-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  width: auto !important;
  min-height: 38px !important;

  margin: 0 !important;
  padding: 8px 13px !important;

  border-radius: 999px !important;
  background: transparent !important;

  font-family: "Outfit", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;

  cursor: pointer !important;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease !important;
}


/* XANDRO pills */
body:has(.fb-xandro-top)
.filter-section-parametric .filter-label {
  border: 1px solid rgba(184, 160, 106, .30) !important;
  color: #4d493f !important;
}

body:has(.fb-xandro-top)
.filter-section-parametric .filter-label:hover {
  border-color: rgba(255, 91, 29, .30) !important;
  background: rgba(255, 91, 29, .035) !important;
}


/* LYI pills */
body:has(.fb-lyi-top)
.filter-section-parametric .filter-label {
  border: 1px solid rgba(135, 166, 181, .30) !important;
  color: #465155 !important;
}

body:has(.fb-lyi-top)
.filter-section-parametric .filter-label:hover {
  border-color: rgba(135, 166, 181, .52) !important;
  background: rgba(205, 225, 235, .12) !important;
}


/* Counts */
body:has(.fb-xandro-top)
.filter-section-parametric .filter-count,

body:has(.fb-lyi-top)
.filter-section-parametric .filter-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 21px !important;
  height: 21px !important;
  padding: 0 6px !important;

  border-radius: 999px !important;

  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

body:has(.fb-xandro-top)
.filter-section-parametric .filter-count {
  background: rgba(184, 160, 106, .10) !important;
  color: #766d61 !important;
}

body:has(.fb-lyi-top)
.filter-section-parametric .filter-count {
  background: rgba(176, 211, 232, .16) !important;
  color: #68767b !important;
}


/* Active XANDRO */
body:has(.fb-xandro-top)
.filter-section-parametric
input[type="checkbox"]:checked + .filter-label {
  background: #263b35 !important;
  border-color: #263b35 !important;
  color: #fff !important;
}


/* Active LYI */
body:has(.fb-lyi-top)
.filter-section-parametric
input[type="checkbox"]:checked + .filter-label {
  background: #4c5b60 !important;
  border-color: #4c5b60 !important;
  color: #fff !important;
}


/* Active pill count */
body:has(.fb-xandro-top)
.filter-section-parametric
input[type="checkbox"]:checked + .filter-label .filter-count,

body:has(.fb-lyi-top)
.filter-section-parametric
input[type="checkbox"]:checked + .filter-label .filter-count {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
}


/* =========================================================
   08 — dr. he
   ========================================================= */

/*
 * Only redundant manufacturer filter is handled in V4.
 * Parameter-specific layout/theme will be added after the
 * final catalog filter architecture is complete.
 */

body:has(
  #manufacturer-filter
  input[name="referer"][value="/bydrhe/"]
)
#category-filter-hover {
  border-color: rgba(38, 50, 49, .20) !important;
}


/* =========================================================
   09 — MOBILE
   ========================================================= */

@media (max-width: 767px) {

  #category-filter-hover {
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }


  /* Future Beauty control */
  a.unveil-button[data-unveil="filters"] {
    width: 100% !important;
    min-height: 44px !important;

    margin: 0 0 14px !important;
    padding: 10px 14px !important;

    border-radius: 14px !important;
  }


  /* Native fallback */
  body:not(:has(a.unveil-button[data-unveil="filters"]))
  .filter-sections
  > .filter-section-button
  > a.toggle-filters[data-unveil="category-filter-hover"] {
    width: 100% !important;
    min-height: 44px !important;

    padding: 10px 14px !important;

    border-radius: 14px !important;
  }


  /* XANDRO — 2 × 2 */
  body:has(.fb-xandro-top)
  .filter-section-parametric-id-15 {
    display: block !important;
  }

  body:has(.fb-xandro-top)
  .filter-section-parametric-id-15 h4 {
    margin: 0 0 14px !important;
    font-size: 16px !important;
  }

  body:has(.fb-xandro-top)
  .filter-section-parametric-id-15 fieldset {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body:has(.fb-xandro-top)
  .filter-section-parametric-id-15
  fieldset > div:not(.advanced-filters-wrapper) {
    width: 100% !important;
  }

  body:has(.fb-xandro-top)
  .filter-section-parametric-id-15
  .filter-label {
    width: 100% !important;
    min-height: 40px !important;

    padding: 9px 12px !important;

    justify-content: space-between !important;
    box-sizing: border-box !important;
  }


  /* LYI */
  body:has(.fb-lyi-top)
  .filter-section-parametric-id-18,

  body:has(.fb-lyi-top)
  .filter-section-parametric-id-21 {
    display: block !important;
  }

  body:has(.fb-lyi-top)
  .filter-section-parametric-id-18 h4,

  body:has(.fb-lyi-top)
  .filter-section-parametric-id-21 h4 {
    margin: 0 0 12px !important;
    font-size: 15px !important;
  }

  body:has(.fb-lyi-top)
  .filter-section-parametric-id-21 {
    margin-top: 18px !important;
    padding-top: 18px !important;
  }

  body:has(.fb-lyi-top)
  .filter-section-parametric fieldset {
    gap: 8px !important;
  }

  body:has(.fb-lyi-top)
  .filter-section-parametric .filter-label {
    min-height: 40px !important;
    padding: 9px 12px !important;
  }
}