/**
 * Pros Facet UI — DESKTOP (presentation).
 * Only applied when body has .pros-mode-desktop. Z-index low (<=10) for sidebar.
 * Enqueue priority 999 so this loads after theme and overrides.
 */

/* Xstore: .template-container κλπ δεν πρέπει να κόβουν το sticky */
body.pros-mode-desktop .template-container,
body.pros-mode-desktop .template-content,
body.pros-mode-desktop .pros-plp {
  overflow: visible !important;
}

body.pros-mode-desktop .pros-plp {
  display: grid !important;
  grid-template-columns: 336px 1fr !important;
  grid-template-areas:
    "sidebar toolbar"
    "sidebar results" !important;
  gap: 24px 22px !important;
  align-items: start !important;
}

/* Sticky sidebar: πλήρες ύψος, scroll μέσα, χωρίς οριζόντια μπάρα */
body.pros-mode-desktop .pros-sidebar {
  grid-area: sidebar !important;
  align-self: stretch !important;
  position: sticky !important;
  top: calc(var(--et-header-height, 24px) + 12px) !important;
  z-index: 5 !important;
  min-height: calc(100vh - var(--et-header-height, 72px) - 24px) !important;
  max-height: calc(100vh - var(--et-header-height, 72px) - 24px) !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.pros-mode-desktop .pros-sidebar__title {
  flex-shrink: 0 !important;
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

body.pros-mode-desktop .pros-sidebar__body {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0;
}

body.pros-mode-desktop .pros-sidebar .pros-facet-block {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 16px 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

body.pros-mode-desktop .pros-sidebar .pros-facet-block:last-child {
  border-bottom: none !important;
}

body.pros-mode-desktop .pros-sidebar__body .pros-facets-host {
  min-width: 0;
}

/* Collapse wrapper: always visible on desktop (accordion only on mobile) */
body.pros-mode-desktop .pros-facet-block__collapse {
  display: block !important;
  overflow: visible !important;
}

/* =========================
   SCROLLABLE FACET LISTS (DESKTOP)
   max-height per type via CSS vars
   ========================= */
body.pros-mode-desktop .pros-sidebar .pros-facet-list,
body.pros-mode-desktop .pros-facet-list {
  max-height: var(--pros-facet-list-h-default) !important;
}
body.pros-mode-desktop .pros-sidebar [data-pros-search-facet="brands"] .pros-facet-list {
  max-height: var(--pros-facet-list-h-brands) !important;
}
body.pros-mode-desktop .pros-sidebar [data-pros-search-facet="color"] .pros-facet-list {
  max-height: var(--pros-facet-list-h-color) !important;
}
body.pros-mode-desktop .pros-sidebar [data-pros-size-facet] .pros-facet-list {
  max-height: var(--pros-facet-list-h-size) !important;
}
/* Price block: no scroll, show histogram + slider + inputs + ranges in full */
body.pros-mode-desktop .pros-sidebar .pros-facet-block--price .pros-facet-list {
  max-height: none !important;
}

body.pros-mode-desktop .pros-drawer--mobile {
  display: none !important;
}

body.pros-mode-desktop .pros-filter-trigger {
  display: none !important;
}

/* =========================
   SLIM TOKENS (DESKTOP)
   ========================= */
body.pros-mode-desktop{
  --pros-toolbar-row: 34px;  /* ύψος outer pill */
  --pros-control-h: 28px;    /* ύψος κάθε κουτιού (Ταξινόμηση/Προβολή/Reset wrapper) */
  --pros-select-h: 24px;     /* ύψος select & reset button */
  --pros-radius: 10px;       /* outer radius */
  --pros-radius-in: 8px;     /* inner radius */
}

/* =========================
   TOOLBAR (DESKTOP)
   Slim + καλλίγραμμο
   ========================= */

body.pros-mode-desktop .pros-toolbar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  grid-area: toolbar !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  align-items: center !important;
}

/* 1) Το κεντρικό container (outer pill) */
body.pros-mode-desktop .pros-toolbar__controls {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;

  /* SLIM */
  padding: 3px 8px !important;
  height: var(--pros-toolbar-row) !important;
  min-height: var(--pros-toolbar-row) !important;

  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: var(--pros-radius) !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(2,6,23,.04) !important;
  box-sizing: border-box !important;
}

/* 2) Τα blocks (inner pills) */
body.pros-mode-desktop .pros-toolbar__control {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;

  /* SLIM */
  height: var(--pros-control-h) !important;
  min-height: var(--pros-control-h) !important;
  padding: 0 8px !important;

  border: 1px solid rgba(15,23,42,.06) !important;
  border-radius: var(--pros-radius-in) !important;
  background: #fff !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* 3) Το πεδίο με το select */
body.pros-mode-desktop .pros-toolbar__field {
  display: flex !important;
  align-items: center !important;
}

/* κρατάμε το facet wrapper “καθαρό” */
body.pros-mode-desktop .pros-toolbar__control .pros-toolbar__field .facetwp-facet {
  display: inline-flex !important;
  align-items: center !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Label πιο λεπτό/ήσυχο */
body.pros-mode-desktop .pros-toolbar__label {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  color: rgba(17,24,39,.72) !important;
  letter-spacing: .1px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 4) Select — slim */
body.pros-mode-desktop .pros-toolbar__field .facetwp-facet select,
body.pros-mode-desktop .pros-toolbar select,
body.pros-mode-desktop .pros-toolbar .facetwp-sort-select,
body.pros-mode-desktop .pros-toolbar .facetwp-dropdown,
body.pros-mode-desktop .pros-toolbar .facetwp-per-page-select,
body.pros-mode-desktop .pros-toolbar__field select {
  margin: 0 !important;

  height: var(--pros-select-h) !important;
  min-height: var(--pros-select-h) !important;
  max-height: var(--pros-select-h) !important;
  line-height: var(--pros-select-h) !important;

  padding: 0 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;

  border: 1px solid rgba(15,23,42,.10) !important;
  background: #fff !important;
  color: #111 !important;

  vertical-align: middle !important;
  display: block !important;
  box-sizing: border-box !important;

  min-width: 110px !important;
  max-width: 150px !important;
}

/* 5) Reset wrapper (ίδιο ύψος, slim) */
body.pros-mode-desktop .pros-toolbar__control--reset {
  display: none !important;
  align-items: center !important;

  height: var(--pros-control-h) !important;
  min-height: var(--pros-control-h) !important;

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

body.pros-mode-desktop.pros-has-active-facet .pros-toolbar__control--reset {
  display: flex !important;
  align-items: center !important;

  height: var(--pros-control-h) !important;
  min-height: var(--pros-control-h) !important;

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

body.pros-mode-desktop .pros-toolbar__control--reset .pros-toolbar__field {
  align-items: center !important;
}

body.pros-mode-desktop .pros-toolbar__control--reset .pros-toolbar__field label,
body.pros-mode-desktop .pros-toolbar__control--reset .pros-toolbar__field .facetwp-label {
  display: none !important;
}

/* Reset button slim */
body.pros-mode-desktop .pros-toolbar .facetwp-facet-reset .facetwp-reset,
body.pros-mode-desktop .pros-toolbar .facetwp-facet-reset button,
body.pros-mode-desktop .pros-toolbar .facetwp-facet-reset a {
  height: var(--pros-select-h) !important;
  min-height: var(--pros-select-h) !important;
  line-height: calc(var(--pros-select-h) - 2px) !important;

  padding: 0 12px !important;
  min-width: 0 !important;
  font-size: 12px !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
  border-radius: 999px !important;
}

/* Results area */
body.pros-mode-desktop .pros-results {
  grid-area: results !important;
}

/* gaps στα προϊόντα */
body.pros-mode-desktop .pros-results__list .facetwp-template ul.products {
  gap: 22px !important;
}