/* Hoitolatukku product listings (shop, product taxonomies, product search) and the Lisämateriaali pages that share their frame.
   Enqueued by Hoitolatukku_Plp only where is_listing() or is_page_frame() is true. */

/* Page frame: boxed children default to --width:100%; the sidebar/content row needs fixed + fluid columns. */
.ht-plp__title, .ht-plp__title.ht-h1 { font: 700 30px/36px var(--ht-font); letter-spacing: -0.3px; color: var(--ht-text); margin: 0; }
.ht-plp__total { font: 400 16px/25px var(--ht-font); color: var(--ht-muted); }
.ht-plp__head .woocommerce-archive-description, .ht-plp__head .term-description p { font: 400 16px/25px var(--ht-font); color: var(--ht-muted); margin: 0; }
.ht-plp__head button.ht-clamp__toggle { display: none; }
@media (max-width: 767px) {
    .ht-plp__head .term-description:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
    .ht-plp__head button.ht-clamp__toggle { display: inline-block; margin-top: var(--ht-space-xs); padding: 0; border: 0; background: none; font: 400 14px/20px var(--ht-font); color: var(--ht-primary); text-decoration: underline; cursor: pointer; }
    .ht-plp__head button.ht-clamp__toggle:hover { color: var(--ht-primary-dark); }
}
.ht-plp__body > .ht-plp__sidebar, .ht-plp__body > .e-con-inner > .ht-plp__sidebar { --width: 295px; width: 295px; flex: 0 0 295px; border: 1px solid var(--ht-border); border-radius: var(--ht-radius-card); padding: 0; gap: 0; overflow: hidden; }
.ht-plp__body > .ht-plp__content, .ht-plp__body > .e-con-inner > .ht-plp__content { --width: auto; width: auto; min-width: 0; }
@media (min-width: 768px) {
    .ht-plp__body > .ht-plp__content, .ht-plp__body > .e-con-inner > .ht-plp__content { flex: 1 1 0; }
}
@media (max-width: 1024px) {
    .ht-plp__body > .ht-plp__sidebar, .ht-plp__body > .e-con-inner > .ht-plp__sidebar { --width: 240px; width: 240px; flex-basis: 240px; }
}
@media (max-width: 767px) {
    .ht-plp__body > .ht-plp__sidebar, .ht-plp__body > .e-con-inner > .ht-plp__sidebar { display: none; }
}

/* Subcategory chips */
.ht-subcategory-rail { position: relative; display: flex; align-items: center; gap: var(--ht-space-2xs); width: 100%; }
.ht-subcategory-rail__track { display: flex; gap: var(--ht-space-2xs); overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; flex: 1 1 auto; min-width: 0; padding: 2px 0; }
.ht-subcategory-rail__track::-webkit-scrollbar { display: none; }
/* Round arrow button (ht.css), smaller and shown only once the track overflows. */
.ht-subcategory-rail__arrow { --ht-arrow-size: 36px; --ht-arrow-icon: 24px; display: none; flex: 0 0 var(--ht-arrow-size); }
.ht-subcategory-rail .ht-subcategory-rail__arrow svg { fill: none; }
.ht-subcategory-rail__arrow:disabled { opacity: 1; background: var(--ht-border); border-color: var(--ht-border); }
.ht-subcategory-rail .ht-subcategory-rail__arrow:disabled svg { color: var(--ht-border-strong); }
.ht-subcategory-rail.has-overflow .ht-subcategory-rail__arrow { display: inline-flex; }
.ht-subcategory-rail__progress { display: none; }
.subcategory-pill, .ht-subcategory-rail .subcategory-pill { display: inline-flex; align-items: center; gap: var(--ht-space-2xs); flex: 0 0 auto; padding: 8px var(--ht-space-xs); border: 1px solid var(--ht-border-strong); border-radius: var(--ht-radius-pill); background: #fff; color: var(--ht-text); font: 600 14px/20px var(--ht-font); text-decoration: none; white-space: nowrap; margin: 0; transition: background .15s, color .15s; }
.subcategory-pill:hover { background: var(--ht-cream-dark); color: var(--ht-text); }
.subcategory-pill.is-current { background: var(--ht-text); border-color: var(--ht-text); color: #fff; }
.subcategory-pill__count { display: inline-flex; align-items: center; height: 20px; font: 400 12px/19px var(--ht-font); padding: 0 4px; border-radius: 14px; background: var(--ht-cream); color: var(--ht-muted); }
.subcategory-pill.is-current .subcategory-pill__count { background: rgba(255,255,255,.2); color: #fff; }
@media (max-width: 767px) {
    .ht-subcategory-rail { flex-wrap: wrap; }
    .ht-subcategory-rail__arrow { display: none !important; }
    .ht-subcategory-rail__progress { display: block; position: relative; width: 100%; height: 3px; background: var(--ht-border); border-radius: var(--ht-radius-pill); overflow: hidden; }
    .ht-subcategory-rail__progress span { position: absolute; top: 0; left: 0; height: 100%; width: 40%; background: var(--ht-primary); border-radius: var(--ht-radius-pill); }
}

/* Sidebar panel: the box border sits on .ht-plp__sidebar, dividers separate its blocks */
.ht-plp__sidebar > :not(:last-child) { border-bottom: 1px solid var(--ht-border); } /* a display:none block draws no divider, so the search sidebar keeps one line less */
/* Padding lives on the blocks, not the panel, so dividers run edge to edge and blocks stack flush. */
.ht-plp__sidebar > :not(:has(.ht-facet-item)) { padding: var(--ht-space-xs); }
.ht-plp__sidebar .ht-facet-item { padding-inline: var(--ht-space-xs); }

/* Category tree */
.ht-category-nav { font-family: var(--ht-font); }
.ht-category-nav__title { display: flex; align-items: center; justify-content: space-between; gap: var(--ht-space-2xs); font: 700 16px/24px var(--ht-font); color: var(--ht-text); margin: 0 0 var(--ht-space-2xs); cursor: pointer; }
.ht-category-nav__title::after { content: ""; flex: 0 0 24px; width: 24px; height: 24px; background: var(--ht-text); -webkit-mask: url(../img/icons/chevron-right.svg) center/contain no-repeat; mask: url(../img/icons/chevron-right.svg) center/contain no-repeat; transform: rotate(90deg); transition: transform .2s; }
.ht-category-nav.is-open > .ht-category-nav__title::after { transform: rotate(-90deg); }
.ht-category-nav:not(.is-open) > .ht-category-nav__list { display: none; }
.ht-category-nav__list { list-style: none; margin: 0; padding: 0; }
.ht-category-nav__list--l2 { padding-left: var(--ht-space-xs-plus); }
.ht-category-nav__list--l3, .ht-category-nav__list--l4 { padding-left: var(--ht-space-xs-plus); }
/* Tint the open branch so its children read as inside it; solid fill, so nesting does not stack. */
.ht-category-nav__item.is-branch { position: relative; }
.ht-category-nav__item.is-branch::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; background: var(--ht-cream); }
.ht-category-nav__item.is-branch > a, .ht-category-nav__item.is-branch > .ht-category-nav__list { position: relative; }
.ht-category-nav__item > a { display: flex; align-items: center; gap: var(--ht-space-2xs); padding: 6px 0; font: 400 16px/24px var(--ht-font); color: var(--ht-text); text-decoration: none; }
.ht-category-nav__item > a:hover { color: var(--ht-primary); }
.ht-category-nav__item.is-open > a { font-weight: 600; }
.ht-category-nav__item.is-current > a { color: var(--ht-text); font-weight: 700; }
.ht-category-nav__name { flex: 0 1 auto; min-width: 0; }
.ht-category-nav__count { flex: 0 0 auto; margin-inline-start: auto; font: 400 16px/24px var(--ht-font); color: var(--ht-muted); }
.ht-category-nav__chevron { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; transform: rotate(90deg); transition: transform .2s; }
.ht-category-nav__chevron svg { width: 100%; height: 100%; fill: none; }
.ht-category-nav__item.is-open > a .ht-category-nav__chevron { transform: rotate(-90deg); }
.ht-category-nav__list:not(.is-expanded) > .ht-category-nav__item.is-overflow { display: none; }
.ht-category-nav__more { padding: 6px 0; }
.ht-category-nav button.ht-category-nav__toggle { padding: 0; border: 0; background: none; font: 400 14px/20px var(--ht-font); color: var(--ht-primary); text-decoration: underline; cursor: pointer; }
.ht-category-nav button.ht-category-nav__toggle:hover { color: var(--ht-primary-dark); }

/* Facets (container template "Facetted Filters"): accordion items */
.facetwp-hidden, .facetwp-facet .facetwp-hidden, .facetwp-facet a.facetwp-toggle.facetwp-hidden { display: none !important; }
.ht-facets, .ht-facet-item { width: 100%; }
.ht-facet-item { border-top: 1px solid var(--ht-border); padding: var(--ht-space-xs) 0; }
.ht-facet-item:first-child { border-top: 0; }
.ht-facet-item:has(.facetwp-facet.is-hidden),
.ht-facet-item:has(.facetwp-facet.is-empty),
.ht-facet-item:has(.facetwp-facet:empty) { display: none !important; } /* Conditional Logic marks the facet, not the accordion wrapper */
.ht-facets:not(:has(.facetwp-facet:not(.is-hidden, .is-empty, :empty))) { display: none; } /* every facet hidden -> no empty bordered box */
.ht-facet-item__count { display: none; }
.ht-drawer .ht-facet-item__count { display: inline; margin-inline-start: 4px; margin-inline-end: auto; font-weight: 400; }
.ht-facet-item__title, .ht-facet-item .ht-facet-item__title .elementor-heading-title { font: 700 16px/24px var(--ht-font); color: var(--ht-text); margin: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.ht-facet-item__title > .elementor-widget-container { flex: 1 1 auto; min-width: 0; }
.ht-facet-item__title .elementor-heading-title::after, h3.ht-facet-item__title::after { content: ""; flex: 0 0 24px; width: 24px; height: 24px; background: var(--ht-text); -webkit-mask: url(../img/icons/chevron-right.svg) center/contain no-repeat; mask: url(../img/icons/chevron-right.svg) center/contain no-repeat; transform: rotate(90deg); transition: transform .2s; }
.ht-facet-item.is-open .ht-facet-item__title .elementor-heading-title::after, .ht-facet-item.is-open h3.ht-facet-item__title::after { transform: rotate(-90deg); }
.ht-facet-item:not(.is-open) > .elementor-element:not(.ht-facet-item__title), .ht-facet-item:not(.is-open) > .e-con-inner > .elementor-element:not(.ht-facet-item__title), .ht-facet-item:not(.is-open) > .ht-sort-radios { display: none; }
.ht-facet-item .facet-wrap, .ht-facet-item .facetwp-facet { margin: var(--ht-space-2xs) 0 0; font-family: var(--ht-font); }
.facetwp-facet .facetwp-checkbox { display: flex; align-items: center; gap: 10px; padding: 6px 0; margin: 0; background: none !important; font: 400 14px/20px var(--ht-font); color: var(--ht-text); cursor: pointer; }
.facetwp-facet .facetwp-checkbox::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid var(--ht-border-strong); border-radius: var(--ht-radius-default); background: #fff; box-sizing: border-box; }
.facetwp-facet .facetwp-checkbox.checked::before { background: var(--ht-primary) url(../img/icons/checkbox-check.svg) center/8px 8px no-repeat; border-color: var(--ht-primary); }
.facetwp-facet .facetwp-checkbox .facetwp-display-value { flex: 1 1 auto; }
.facetwp-facet .facetwp-counter { font: 400 12px/19px var(--ht-font); color: var(--ht-muted); }
.facetwp-facet .facetwp-depth { padding-left: var(--ht-space-xs); }
.facetwp-facet a.facetwp-toggle { display: inline-block; margin-top: 4px; font: 400 14px/20px var(--ht-font); color: var(--ht-primary); text-decoration: underline; cursor: pointer; }
.facetwp-facet .facetwp-slider-wrap { padding: var(--ht-space-xs) 6px 0; }
.facetwp-facet .noUi-target { border: 0; box-shadow: none; background: var(--ht-border); height: 4px; }
.facetwp-facet .noUi-connect { background: var(--ht-primary); }
.facetwp-facet .noUi-horizontal .noUi-handle { width: 18px; height: 18px; top: -7px; right: -9px; border-radius: 50%; border: 2px solid var(--ht-primary); background: #fff; box-shadow: none; cursor: grab; }
.facetwp-facet .noUi-horizontal .noUi-handle-upper { background: var(--ht-primary); }
.facetwp-facet .noUi-handle::before, .facetwp-facet .noUi-handle::after { display: none; }
.facetwp-facet .facetwp-slider-label { display: block; margin-top: var(--ht-space-xs); font: 600 14px/20px var(--ht-font); color: var(--ht-text); }

/* Toolbar */
.ht-plp__toolbar { width: 100%; padding-bottom: var(--ht-space-sm); border-bottom: 1px solid var(--ht-border); }
.ht-result-count { font: 400 14px/20px var(--ht-font); color: var(--ht-text); white-space: nowrap; }
.ht-result-count b { font-weight: 700; }
.ht-vat-toggle { display: inline-flex; padding: 4px; border-radius: var(--ht-radius-pill); background: var(--ht-cream); }
.ht-vat-toggle__btn, .ht-vat-toggle button.ht-vat-toggle__btn { border: 0; background: transparent; padding: 8px 16px; border-radius: var(--ht-radius-pill); font: 600 12px/19px var(--ht-font); letter-spacing: 0; text-transform: uppercase; color: var(--ht-muted); cursor: pointer; transition: background .15s, color .15s; }
.ht-vat-toggle__btn[aria-pressed="true"], .ht-vat-toggle button.ht-vat-toggle__btn[aria-pressed="true"] { background: #fff; color: var(--ht-text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ht-sort { position: relative; display: inline-block; margin: 0 !important; }
.ht-sort button.ht-sort__button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ht-space-2xs); height: 40px; margin: 0; padding: 0 var(--ht-space-xs); border: 1px solid var(--ht-border-strong); border-radius: var(--ht-radius-pill); background: #fff; color: var(--ht-text); cursor: pointer; white-space: nowrap; --ht-btn-bg: #fff; --ht-btn-fg: var(--ht-text); }
.ht-sort button.ht-sort__button:hover, .ht-sort[data-open] button.ht-sort__button { background: #fff; border-color: var(--ht-text); }
/* The Elementor kit paints every button #860044 and every label 300/0.9rem, both from (0,1,1). */
.ht-sort .ht-sort__label { font: 400 14px/20px var(--ht-font); color: var(--ht-text); }
.ht-sort .ht-sort__value { font: 600 14px/20px var(--ht-font); color: var(--ht-text); }
.ht-sort__chevron { width: 16px; height: 16px; color: var(--ht-text); transition: transform .15s; }
.ht-sort[data-open] .ht-sort__chevron { transform: rotate(180deg); }
.ht-sort__list { position: absolute; z-index: 20; inset-inline-start: 0; top: calc(100% + 4px); display: none; min-width: 100%; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--ht-border); border-radius: var(--ht-radius-default); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); overflow: clip; }
.ht-sort[data-open] .ht-sort__list { display: block; }
.ht-sort__option a { display: block; padding: 10px var(--ht-space-xs); font: 400 14px/20px var(--ht-font); color: var(--ht-text); text-decoration: none; white-space: nowrap; }
.ht-sort__option.is-selected a { background: var(--ht-cream); }
.ht-sort__option a:hover { background: var(--ht-cream-dark); color: var(--ht-text); }
.ht-sort__option a:focus-visible { outline: 2px solid var(--ht-primary); outline-offset: -2px; }
.ht-view-toggle { display: inline-flex; align-items: center; height: 41px; padding: 0 2px; border-radius: var(--ht-radius-pill); background: var(--ht-cream); }
.ht-view-toggle__btn, .ht-view-toggle button.ht-view-toggle__btn { width: 37px; height: 37px; border: 0; border-radius: 50%; background: transparent; color: var(--ht-text); padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none; }
.ht-view-toggle__btn svg { width: 24px; height: 24px; display: block; }
.ht-view-toggle__btn[aria-pressed="true"], .ht-view-toggle button.ht-view-toggle__btn[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ht-plp__toolbar .e-con-inner > .elementor-widget, .ht-plp__toolbar > .elementor-widget, .ht-plp__toolbar-right > .elementor-widget, .ht-plp__toolbar-right .e-con-inner > .elementor-widget, .ht-plp__toolbar > .ht-plp__toolbar-right, .ht-plp__toolbar .e-con-inner > .ht-plp__toolbar-right { --width: auto; width: auto; flex: 0 0 auto; }
@media (max-width: 767px) {
    .ht-plp__toolbar .ht-result-count, .ht-plp__toolbar .ht-sort { display: none; }
}

/* Active filters */
.ht-plp__selections { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ht-space-2xs); }
/* Flatten Elementor's and FacetWP's wrappers so every pill and "Clear all" are items of the same wrapping row. */
.ht-plp__selections > .elementor-widget, .ht-plp__selections .elementor-widget-container, .ht-plp__selections .facet-wrap, .ht-plp__selections .elementor-shortcode,
.facetwp-selections, .facetwp-selections ul, .facetwp-selections ul li { display: contents; }
.facetwp-selections .facetwp-selection-label { display: none; }
/* `body` outranks FacetWP front.css, which loads after ht.css and otherwise wins the shorthand (its own close icon is a background image). */
body .facetwp-selections .facetwp-selection-value { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 4px var(--ht-space-2xs) 4px var(--ht-space-xs); border: 1px solid var(--ht-primary); border-radius: var(--ht-radius-pill); background: color-mix(in srgb, var(--ht-primary) 8%, transparent); color: var(--ht-primary); font: 600 14px/20px var(--ht-font); cursor: pointer; }
/* 24px icon in an 18px box, as in the design: the cross is cropped to its 12px arms. */
body .facetwp-selections .facetwp-selection-value::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E") center / 24px 24px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E") center / 24px 24px no-repeat; }
.ht-selections__label { order: -1; font: 600 16px/24px var(--ht-font); color: var(--ht-text); }
.ht-selections__label[hidden] { display: none; }
button.ht-clear-all { border: 0 !important; background: none !important; padding: 0 !important; font: 400 14px/20px var(--ht-font) !important; color: var(--ht-primary) !important; text-decoration: underline; cursor: pointer; border-radius: 0; }
button.ht-clear-all:hover { color: var(--ht-primary-dark) !important; }
button.ht-clear-all[hidden] { display: none !important; }
.ht-no-results button.ht-clear-all { text-decoration: none; }

/* Products grid: the single woocommerce-products widget */
.ht-products ul.products, .ht-products .elementor-grid, .ht-products ul.products.elementor-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--ht-space-xs) !important; grid-column-gap: var(--ht-space-xs); grid-row-gap: var(--ht-space-xs); margin: 0; padding: 0; width: 100%; }
.ht-products ul.products li.product, .ht-products li.product { float: none; width: auto !important; margin: 0 !important; padding: 0 !important; list-style: none; display: flex; }
.ht-products li.product > .ht-card { width: 100%; }
.ht-products .woocommerce-pagination, .ht-products .woocommerce-result-count, .ht-products .woocommerce-ordering, .ht-products .elementor-products-nothing-found { display: none !important; }
@media (min-width: 768px) and (max-width: 1024px) {
    .ht-plp__body > .ht-plp__sidebar { display: none; }
    .ht-plp__content > .ht-plp__mobile-bar { display: flex; }
    .ht-plp__content > .ht-plp__mobile-nav { display: flex; }
}
@media (max-width: 1439px) { .ht-products ul.products, .ht-products .elementor-grid, .ht-products ul.products.elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 767px) {
    .ht-products ul.products, .ht-products .elementor-grid, .ht-products ul.products.elementor-grid { gap: var(--ht-space-2xs) !important; }
    .ht-products .ht-card { padding: var(--ht-space-2xs); }
    .ht-products .ht-card__media { height: 112px; }
    .ht-products .ht-card__sku, .ht-products .ht-card__rating u, .ht-products .ht-card__rating-sep { display: none; }
    .ht-products .ht-card .ht-badge { top: 4px; }
    .ht-products .ht-card__rating { font-size: 12px; line-height: 19px; }
    .ht-products .ht-card__rating--none .ht-card__rating-value { display: inline; }
    .ht-products .ht-card__statline { display: flex; align-items: center; justify-content: space-between; gap: var(--ht-space-2xs); }
    .ht-products .ht-card__rating .ht-stars { width: 14px; }
    .ht-products .ht-card__rating:not(.ht-card__rating--none) .ht-stars__fill { width: 100% !important; }
    .ht-products .ht-card__cta { flex-direction: column; margin-top: 0; }
    .ht-products .ht-stepper { display: none; }
}

/* List (row) view. Same partial; .ht-card__main / .ht-card__aside become the two text columns. */
.ht-view-list .ht-products ul.products, .ht-view-list .ht-products .elementor-grid, .ht-view-list .ht-products ul.products.elementor-grid { grid-template-columns: minmax(0, 1fr) !important; }
.ht-view-list .ht-products .ht-card { flex-direction: row; align-items: flex-start; gap: var(--ht-space-xs); height: auto; }
.ht-view-list .ht-products .ht-card__media { width: 258px; height: 234px; flex: 0 0 258px; }
.ht-view-list .ht-products .ht-card__wishlist { top: 24px; left: 244px; right: auto; }
.ht-view-list .ht-products .ht-card__media .ht-badges { left: 8px; }
.ht-view-list .ht-products .ht-card__body { flex-direction: row; align-items: stretch; gap: var(--ht-space-xs); padding-top: 0; min-height: 247px; min-width: 0; }
.ht-view-list .ht-products .ht-card__main { display: flex; flex-direction: column; gap: 4px; flex: 1 0 0; min-width: 0; border-right: 1px solid var(--ht-border); padding-right: var(--ht-space-2xs); }
.ht-view-list .ht-products .ht-card__name { -webkit-line-clamp: 3; min-height: 0; }
.ht-view-list .ht-products .ht-card__bullets { display: flex; flex-direction: column; gap: var(--ht-space-2xs); list-style: none; margin: 0; padding: 0; font: 400 12px/19px var(--ht-font); color: var(--ht-text); }
.ht-view-list .ht-products .ht-card__bullets li { display: flex; gap: 8px; margin: 0; padding: 0; }
.ht-view-list .ht-products .ht-card__bullets li::before { content: "\2022"; font-size: 16px; line-height: 19px; flex: 0 0 auto; }
.ht-view-list .ht-products .ht-card__aside { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--ht-space-xs); flex: 1 0 0; min-width: 0; }
.ht-view-list .ht-products .ht-card__meta { width: 100%; }
.ht-view-list .ht-products .ht-card__price-row { margin-top: 0; }
@media (min-width: 768px) and (max-width: 1024px) {
    .ht-view-list .ht-products .ht-card__media { width: 180px; height: 180px; flex-basis: 180px; }
    .ht-view-list .ht-products .ht-card__wishlist { left: 166px; }
    .ht-view-list .ht-products .ht-card__body { min-height: 0; }
}
@media (max-width: 767px) {
    .ht-view-list .ht-products .ht-card { flex-wrap: nowrap; align-items: center; gap: var(--ht-space-2xs); padding: var(--ht-space-xs) var(--ht-space-2xs); }
    .ht-view-list .ht-products .ht-card__media { flex: 1 1 0; width: auto; height: 246px; }
    .ht-view-list .ht-products .ht-card__wishlist { top: 20px; left: calc(50% - 30px); }
    .ht-view-list .ht-products .ht-card__media .ht-badges { top: 4px; left: 4px; }
    .ht-view-list .ht-products .ht-card__body { flex: 1 1 0; flex-direction: column; gap: var(--ht-space-2xs); min-height: 0; }
    .ht-view-list .ht-products .ht-card__main { flex: none; border-right: 0; padding-right: 0; }
    .ht-view-list .ht-products .ht-card__bullets { display: none; }
    .ht-view-list .ht-products .ht-card__aside { flex: none; justify-content: flex-start; gap: var(--ht-space-2xs); }
    .ht-view-list .ht-products .ht-card__price { font-size: 16px; line-height: 20px; }
    .ht-view-list .ht-products .ht-card__price del { font-size: 12px; line-height: 19px; }
    .ht-view-list .ht-products .ht-card__cta { flex-direction: row; }
}

/* Load more (FacetWP pager facet) + progress */
.facetwp-type-pager { display: flex; flex-direction: column; align-items: center; gap: var(--ht-space-xs); width: 100%; padding: var(--ht-space-md) 0; font-family: var(--ht-font); }
.facetwp-type-pager.is-hidden, .facetwp-type-pager.ht-pager--empty { display: none; }
.ht-progress { display: flex; flex-direction: column; align-items: center; gap: var(--ht-space-2xs); width: 100%; }
.ht-progress__text { font: 400 14px/20px var(--ht-font); color: var(--ht-text); }
.ht-progress__track { width: 200px; height: 3px; background: var(--ht-border); border-radius: var(--ht-radius-pill); overflow: hidden; }
.ht-progress__fill { display: block; height: 100%; background: var(--ht-primary); transition: width .3s; }
.facetwp-type-pager button.facetwp-load-more, .facetwp-load-more { font: 600 14px/20px var(--ht-font); padding: 10px var(--ht-space-sm); border: 1.5px solid var(--ht-primary); border-radius: var(--ht-radius-default); background: #fff; color: var(--ht-primary); cursor: pointer; }
.facetwp-type-pager button.facetwp-load-more:hover { background: var(--ht-primary); color: #fff; }
.facetwp-load-more.facetwp-hidden { display: none; }

/* No results */
.ht-no-results { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ht-space-xs); padding: var(--ht-space-lg) 0; font-family: var(--ht-font); }
.ht-no-results__chips { display: flex; flex-wrap: wrap; gap: var(--ht-space-2xs); }
.ht-btn.ht-btn--link { display: inline-flex; align-items: center; gap: 8px; padding: 12px var(--ht-space-sm); border-radius: var(--ht-radius-default); border: 1.5px solid var(--ht-primary); background: var(--ht-primary); color: #fff; font: 600 14px/20px var(--ht-font); text-decoration: none; cursor: pointer; }
.ht-btn.ht-btn--link:hover { background: var(--ht-primary-dark); border-color: var(--ht-primary-dark); color: #fff; }

/* Search results extras */
.ht-search-title { display: flex; flex-direction: column; gap: 4px; }
.ht-search-count { margin: 0; }
.ht-search-entities { display: flex; align-items: center; gap: var(--ht-space-xs); width: 100%; }
.ht-search-entities__label { font: 600 14px/20px var(--ht-font); color: var(--ht-text); white-space: nowrap; }

/* Mobile filter bar + drawer */
.ht-plp__mobile-bar { width: 100%; }
.ht-filter-button, .ht-plp__mobile-bar .ht-filter-button.ht-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: var(--ht-space-2xs); padding: 14px var(--ht-space-sm); border-radius: var(--ht-radius-default); border: 1.5px solid var(--ht-primary); background: var(--ht-primary); color: #fff; font: 600 16px/24px var(--ht-font); cursor: pointer; }
.ht-filter-button__icon { width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3Ccircle cx='9' cy='6' r='2' fill='%23860044'/%3E%3Ccircle cx='15' cy='12' r='2' fill='%23860044'/%3E%3Ccircle cx='9' cy='18' r='2' fill='%23860044'/%3E%3C/svg%3E") center/contain no-repeat; }
.elementor-popup-modal.ht-filter-drawer .dialog-widget-content { border-radius: 0; box-shadow: none; position: fixed; top: var(--wp-admin--admin-bar--height, 0px); bottom: 0; height: auto; }
.ht-filter-drawer .dialog-message { max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
@supports (height: 100dvh) {
    .ht-filter-drawer .dialog-message { height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)) !important; max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)) !important; }
}
.ht-drawer { font-family: var(--ht-font); }
.ht-drawer__bar { min-height: 48px; border-bottom: 1px solid var(--ht-border); }
.ht-filter-drawer .dialog-close-button { top: 0; inset-inline-end: var(--ht-space-xs); height: 48px; align-items: center; }
.ht-drawer__title, .elementor-widget-heading.ht-drawer__title .elementor-heading-title { font: 700 18px/23px var(--ht-font); color: var(--ht-text); margin: 0; }
.ht-drawer .ht-facet-item { padding-inline: var(--ht-space-xs); border-top: 0; border-bottom: 1px solid var(--ht-border); }
.ht-drawer .ht-category-nav { padding: var(--ht-space-xs); overflow: hidden; border-bottom: 1px solid var(--ht-border); }
.ht-drawer .ht-category-nav:not(.is-open) > .ht-category-nav__title, .ht-plp__mobile-nav .ht-category-nav:not(.is-open) > .ht-category-nav__title { margin-bottom: 0; }
/* Lisämateriaali pages have no filter drawer: on touch sizes the tree sits above the content in the sidebar's box. */
.ht-plp__mobile-nav { width: 100%; }
.ht-plp__mobile-nav .ht-category-nav { padding: var(--ht-space-xs); border: 1px solid var(--ht-border); border-radius: var(--ht-radius-card); }
.ht-drawer .facet-wrap:has(> .facetwp-selections) { display: flex; flex-wrap: wrap; gap: var(--ht-space-2xs); padding: var(--ht-space-xs); border-bottom: 1px solid var(--ht-border); }
.ht-drawer .facet-wrap:has(> .facetwp-selections:empty) { display: none; }
.ht-facet-item--sort { border-top: 0; border-bottom: 1px solid var(--ht-border); }
.ht-sort-radios { border: 0; margin: 0; padding: 0; min-width: 0; }
.ht-sort-radios__option { display: flex; align-items: center; gap: var(--ht-space-2xs); padding: 8px 0; font: 400 16px/24px var(--ht-font); color: var(--ht-text); cursor: pointer; }
/* !important: the Elementor kit's `input:not([type=button]):not([type=submit])` rule outranks this one and would square off the dot. */
.ht-sort-radios__option input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--ht-border-strong) !important; border-radius: 50% !important; background: #fff; flex: 0 0 18px; }
.ht-sort-radios__option input:checked { border-color: var(--ht-primary) !important; background: radial-gradient(circle at center, #fff 0 3.75px, var(--ht-primary) 3.75px); }
.ht-drawer__footer { border-top: 0; }
.ht-drawer__footer .e-con-inner > .elementor-widget, .ht-drawer__footer > .elementor-widget { --width: auto; width: auto; flex: 1 1 0; }
.ht-drawer__footer .elementor-button { width: 100%; }
.elementor-widget-button.ht-drawer__clear .elementor-button { background: #fff; color: var(--ht-primary); border: 1.5px solid var(--ht-primary); font: 600 16px/24px var(--ht-font); border-radius: var(--ht-radius-default); }
.elementor-widget-button.ht-drawer__apply .elementor-button { background: var(--ht-primary); color: #fff; border: 1.5px solid var(--ht-primary); font: 600 16px/24px var(--ht-font); border-radius: var(--ht-radius-default); }