.elementor-17987 .elementor-element.elementor-element-9a4ccaf{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;border-style:solid;--border-style:solid;border-width:0px 0px 3px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:3px;--border-left-width:0px;border-color:#C9DA2A;--border-color:#C9DA2A;--padding-top:40px;--padding-bottom:150px;--padding-left:0px;--padding-right:0px;}.elementor-17987 .elementor-element.elementor-element-9a4ccaf:not(.elementor-motion-effects-element-type-background), .elementor-17987 .elementor-element.elementor-element-9a4ccaf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F6F8FA;}.elementor-17987 .elementor-element.elementor-element-9a4ccaf.e-con{--align-self:center;}.elementor-17987 .elementor-element.elementor-element-f590458 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-17987 .elementor-element.elementor-element-f590458.elementor-element{--align-self:flex-start;}.elementor-17987 .elementor-element.elementor-element-f590458 .eael-breadcrumbs{justify-content:center;}.elementor-17987 .elementor-element.elementor-element-f590458 .eael-breadcrumbs .eael-breadcrumbs__content{background-color:#F6F8FA;border-style:none;padding:0px 0px 0px 0px;color:#475259;font-family:"Raleway", Sans-serif;font-size:16px;font-style:normal;text-decoration:none;}.elementor-17987 .elementor-element.elementor-element-f590458 .eael-breadcrumbs .eael-breadcrumbs__content a{color:#00ADEE;}.elementor-17987 .elementor-element.elementor-element-f590458 .eael-breadcrumbs .eael-breadcrumb-separator svg path{fill:#D0D7DD;}.elementor-17987 .elementor-element.elementor-element-f590458 .eael-breadcrumbs .eael-breadcrumb-separator{color:#D0D7DD;margin:0 15px;}.elementor-17987 .elementor-element.elementor-element-f590458 .eael-breadcrumbs .eael-breadcrumb-separator svg{width:15px;height:15px;}.elementor-17987 .elementor-element.elementor-element-f590458 .eael-breadcrumbs .eael-breadcrumb-separator i{font-size:15px;}.elementor-17987 .elementor-element.elementor-element-f590458 .eael-breadcrumbs .eael-breadcrumb-separator svg, 
					.elementor-17987 .elementor-element.elementor-element-f590458 .eael-breadcrumbs .eael-breadcrumb-separator i{margin:4px 0px 0px 0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-17987 .elementor-element.elementor-element-258c925{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:40px 0px 0px 0px;text-align:center;}.elementor-17987 .elementor-element.elementor-element-258c925.elementor-element{--align-self:flex-start;}.elementor-17987 .elementor-element.elementor-element-258c925 .elementor-heading-title{font-family:"Be Vietnam Pro", Sans-serif;font-size:40px;font-weight:500;color:#002540;}.elementor-17987 .elementor-element.elementor-element-ffced1c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17987 .elementor-element.elementor-element-bbcc821{width:100%;max-width:100%;}.elementor-17987 .elementor-element.elementor-element-e3ab9a1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:30px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17987 .elementor-element.elementor-element-23b6935{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17987 .elementor-element.elementor-element-f7b7a8b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:150px;--padding-left:0px;--padding-right:0px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-17987 .elementor-element.elementor-element-7d1971d{--grid-columns:4;--load-more—spacing:50px;--load-more-button-align:center;--grid-column-gap:15px;}.elementor-17987 .elementor-element.elementor-element-7d1971d .elementor-button{background-color:#00B6FA;font-family:"Raleway", Sans-serif;font-size:16px;font-weight:600;text-decoration:none;fill:#FFFFFF;color:#FFFFFF;border-radius:6px 6px 6px 6px;padding:18px 27px 18px 27px;}.elementor-17987 .elementor-element.elementor-element-92a9432{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--padding-top:50px;--padding-bottom:50px;--padding-left:10px;--padding-right:10px;}.elementor-17987 .elementor-element.elementor-element-92a9432:not(.elementor-motion-effects-element-type-background), .elementor-17987 .elementor-element.elementor-element-92a9432 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#C9DA2A;}.elementor-17987 .elementor-element.elementor-element-c392c8f.elementor-element{--align-self:center;}.elementor-17987 .elementor-element.elementor-element-c392c8f{text-align:center;}.elementor-17987 .elementor-element.elementor-element-c392c8f .elementor-heading-title{font-family:"Be Vietnam Pro", Sans-serif;font-size:27px;font-weight:600;color:#002540;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-17987 .elementor-element.elementor-element-f257f54 .elementor-button{background-color:#FFFFFF;font-family:"Raleway", Sans-serif;font-size:16px;font-weight:600;fill:#002540;color:#002540;border-radius:6px 6px 6px 6px;padding:18px 32px 18px 32px;}.elementor-17987 .elementor-element.elementor-element-f257f54{width:auto;max-width:auto;margin:0px 10px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-17987 .elementor-element.elementor-element-92a9432{--content-width:1140px;}}@media(max-width:1024px){.elementor-17987 .elementor-element.elementor-element-9a4ccaf{--padding-top:50px;--padding-bottom:70px;--padding-left:10px;--padding-right:10px;}.elementor-17987 .elementor-element.elementor-element-258c925{padding:30px 0px 0px 0px;}.elementor-17987 .elementor-element.elementor-element-258c925 .elementor-heading-title{font-size:27px;}.elementor-17987 .elementor-element.elementor-element-ffced1c{--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-17987 .elementor-element.elementor-element-e3ab9a1{--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-17987 .elementor-element.elementor-element-23b6935{--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-17987 .elementor-element.elementor-element-f7b7a8b{--padding-top:0px;--padding-bottom:50px;--padding-left:10px;--padding-right:10px;}.elementor-17987 .elementor-element.elementor-element-7d1971d{--grid-columns:2;}.elementor-17987 .elementor-element.elementor-element-c392c8f .elementor-heading-title{font-size:21px;}}@media(max-width:767px){.elementor-17987 .elementor-element.elementor-element-7d1971d{--grid-columns:1;}.elementor-17987 .elementor-element.elementor-element-c392c8f{text-align:left;}}/* Start custom CSS for eael-breadcrumbs, class: .elementor-element-f590458 */#breadcrumbs-links-custom-style a {
    text-decoration: none;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bbcc821 *//************************************
 * FILTER BAR – main card + layout
 ************************************/




.elementor-17987 .elementor-element.elementor-element-bbcc821 .filters-card-top {
  margin-bottom: 12px;
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .filters-card-title {
  font-size: 16px;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 600;
  color #002540;
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-close {
  display: none;
}

/* 3 wide (Brands, Categories, Search) + 2 smaller (Currency, Sort),
   with spacing similar to reference design */
.elementor-17987 .elementor-element.elementor-element-bbcc821 .products-filter-bar .pf-row {
  display: grid;
  grid-template-columns: 1.25fr 2.1fr 2.1fr 0.7fr 0.9fr;
  column-gap: 24px;
  row-gap: 16px;
  align-items: flex-end;
}

@media (max-width: 1024px) {
  .elementor-17987 .elementor-element.elementor-element-bbcc821 .products-filter-bar .pf-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .elementor-17987 .elementor-element.elementor-element-bbcc821 .products-filter-bar .pf-row {
    grid-template-columns: 1fr;
  }
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* removed lable*/
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-label {
  display: none;
}

/************************************
 * Base controls – selects & inputs
 ************************************/

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-select,
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-search {
  width: 100%;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #D0D7DD;
  background-color: #ffffff;
  font-size: 14px;
  color: #475259;
  outline: none;
  box-sizing: border-box;
  box-shadow: inset 0px -1px 4px #0000000A, 0px 2px 8px #00000014;
  min-height: 44px; /* consistent height with design */
}
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-select,
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-search::placeholder {
    color: #475259;;
}

/* generic select arrow (Currency + Sort only – Brand/Cat selects are hidden) */
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('https://youdobio-new.pilardev.fi/wp-content/uploads/2025/11/down-arrow.png');
  background-repeat: no-repeat;
  background-size: 10px 6px;
  background-position: right 12px center;
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-select:focus,
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-search:focus {
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}

/************************************
 * Search within – icon
 ************************************/

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-field--search .pf-search-wrapper {
  position: relative;
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  background-image: url('https://youdobio-new.pilardev.fi/wp-content/uploads/2025/10/icons8-search-60.svg');
  background-repeat: no-repeat;
  background-size: 25px 25px;
  pointer-events: none;
  font-size: 0; /* hide emoji fallback */
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-field--search .pf-search {
  padding-left: 36px;
}

/************************************
 * Enhanced dropdown (Brands & Categories)
 * JS wraps the <select> in .pf-ed
 ************************************/

/* hide native selects for brand + category (JS enhanced) */
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-field--brand .pf-select,
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-field--category .pf-select {
  display: none;
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed {
  position: relative;
}

/* RESET all button styles coming from theme */
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-toggle,
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-item,
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-close {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  margin: 0;
  font: inherit;
  box-shadow: none;
  border-radius: 0;
}

/* Closed state button (looks like normal select) */
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-toggle {
  font-family: "Raleway", sans-serif;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #D0D7DD;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  color: #475259;
  cursor: pointer;
  box-sizing: border-box;
  min-height: 44px; /* match other fields */
  box-shadow: inset 0px -1px 4px #0000000A, 0px 2px 8px #00000014;
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}

/* arrow inside enhanced toggle */
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-arrow {
  width: 18px;
  height: 18px;
  background-image: url('https://youdobio-new.pilardev.fi/wp-content/uploads/2025/11/down-arrow.png');
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: center;
  flex-shrink: 0;
  transition: transform 0.16s ease;
}

/* rotate arrow when open */
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed.is-open .pf-ed-arrow {
  transform: rotate(180deg);
}

/* Dropdown panel */
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
  padding: 8px 0 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed.is-open .pf-ed-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Search row inside panel */
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-search-wrap {
  display: flex;
  align-items: center;
  padding: 4px 12px 8px;
  column-gap: 6px;
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-search-input {
  flex: 1;
  padding: 7px 9px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #FFFFFF;
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-search-input::placeholder {
  color: #9ca3af;
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-search-input:focus {
  outline: none;
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(37,99,235,0.10);
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-close {
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: #9ca3af;
  padding: 0 2px;
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-close:hover {
  color: #4b5563;
}

/* Items list */
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 0 6px 4px;
}

/* nice slim scrollbar */
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-list::-webkit-scrollbar {
  width: 6px;
}
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-list::-webkit-scrollbar-track {
  background: transparent;
}
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 999px;
}

/* Item row */
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: #111827;
  text-align: left;
  box-sizing: border-box;
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-item:hover {
  background: #f3f4f6;
}

/* left side: fake checkbox + label */
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid #d1d5db;
  margin-right: 8px;
  flex-shrink: 0;
  background-color: #ffffff;
  box-sizing: border-box;
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-item-label {
  flex: 1;
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-item-count {
  margin-left: 6px;
  color: #6b7280;
  font-size: 12px;
}

/* active (selected) item */
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-item.is-active {
  background: #eff6ff;
}

.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-item.is-active .pf-ed-check {
  background-color: #2563eb;
  border-color: #2563eb;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/* "All ..." row a bit bolder */
.elementor-17987 .elementor-element.elementor-element-bbcc821 .pf-ed-item.pf-ed-item-all {
  font-weight: 500;
}

/************************************
 * Small gap below card
 ************************************/
.elementor-17987 .elementor-element.elementor-element-bbcc821 {
  margin-bottom: 8px;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e3ab9a1 *//* ===== Chips row (Applied filters) – YouDoBio products ===== */

#chips-custom-styling .products-filter-chips {
  margin-top: 10px;
  padding-top: 4px;
  padding-bottom: 45px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  border-bottom: 3px solid #F6F8FA; /* subtle divider line */
}

/* "Applied filters:" + "Keyword search:" labels */
#chips-custom-styling .products-filter-chips .pf-label-main,
#chips-custom-styling .products-filter-chips .pf-keyword-label {
  font-family: "Be Vietnam Pro", sans-serif;
  color: #002540;
  font-weight: 400;
  margin-right: 4px;
}

/* Individual chips */
#chips-custom-styling .products-filter-chips .pf-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 500;
  background: #e5e7eb;
  color: #83909B;
  text-decoration: none;
  line-height: 1.2;
}

/* “×” icon inside chip */
#chips-custom-styling .products-filter-chips .pf-chip-x {
  margin-left: 6px;
  font-size: 23px;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 300!important;
  opacity: 0.7;
}

/* "Clear all selections" link */
#chips-custom-styling .products-filter-chips .pf-clear {
  margin-left: 50px;
  font-family: "Be Vietnam Pro", sans-serif;
  color: #00ADEE;
  text-decoration: none;
  font-weight: 400;
}

#chips-custom-styling .products-filter-chips .pf-clear:hover {
  text-decoration: underline;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-fe29c1e *//* ==== [products_filter_count] – result text spacing ==== */

.elementor-17987 .elementor-element.elementor-element-fe29c1e .products-filter-count {
  margin: 24px 0 12px;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #002540;
}/* End custom CSS */