/* BigCommerce additions/fixes for the Kalles listing area (collection, search, collections list, wishlist). */

/* ---- Collection hero: live template custom_css of section heading_template (copied 1:1, scoped) ---- */
.t4s-collection-hero p { text-align: justify !important; }
.t4s-collection-hero .t4s-container.t4s-pr.t4s-z-100 { margin-top: 70px; margin-right: 80px; width: 55%; padding: 30px; }
.t4s-collection-hero .header-banner, .t4s-collection-hero div { height: 500px; }
@media (max-width: 575px) {
  .t4s-collection-hero .t4s-container.t4s-pr.t4s-z-100 { margin-top: 0; margin-right: 0; width: 100%; }
  .t4s-collection-hero .header-banner, .t4s-collection-hero div { height: 335px; }
}
/* parallax layer (jarallax equivalent, built by kalles/listing) */
.t4s-collection-hero .header-banner.parallax_enabled { background-image: none !important; position: relative; z-index: 0; }
.t4s-collection-hero .t4s-parallax-img {
  position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; pointer-events: none; z-index: -100;
  background-repeat: no-repeat; background-size: cover; background-position: center center;
  transform-style: preserve-3d; backface-visibility: hidden; will-change: transform;
}
.t4s-collection-hero .t4s-parallax-clip { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -100; pointer-events: none; }

/* ---- Search toolbar: sort dropdown is positioned by kalles/listing (inline top/left) inside this box ---- */
.t4s-dropdown__sortby { position: relative; }
.t4s-dropdown__sortby button[data-dropdown-open] { position: relative; }
.t4s-dropdown__sortby .t4s-icon-select-arrow { position: absolute; right: 10px; top: 50%; width: 10px; height: 10px; margin-top: -5px; }
.t4s-dropdown__content button.is--selected { color: var(--accent-color); }
@media (max-width: 767px) { .t4s-close-overlay.is--pindop { z-index: 467; } }

/* ---- Filter drawer: price block (BC price facet = min/max inputs; Kalles noUiSlider is not available) ---- */
#t4s-filter-hidden .t4s-price_inputs { gap: 8px; }
#t4s-filter-hidden .t4s-price_inputs input { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: var(--btn-radius, 0); }
#t4s-filter-hidden .t4s-price_sep { color: var(--text-color); }
#t4s-filter-hidden .t4s-price_slider_btn { flex: 0 0 auto; height: 40px; padding: 0 15px; background: var(--secondary-color, #222); color: #fff; border: 0; border-radius: var(--btn-radius, 0); font-weight: 600; }
#t4s-filter-hidden .form-inlineMessage { color: #ec0101; font-size: 13px; margin-top: 5px; }
#t4s-filter-hidden .t4s-filter__values li.is--selected .t4s-checkbox-wrapper { background-color: var(--secondary-color); border-color: var(--secondary-color); color: #fff; }

/* ---- Search "Results from article, page" (live section search-main-others inline <style>) ---- */
.t4s-result-main-title { background-color: rgba(var(--text-color-rgb),.1); padding: 20px; border: 1px solid rgba(var(--border-color-rgb),.8); margin: 60px 0 20px; font-weight: 600; font-size: 16px; color: var(--secondary-color); }
.t4s-result-main__item:not(:last-child) { margin-bottom: 10px; padding-bottom: 10px; }
.t4s-result-main-image { flex: 0 0 auto; margin-right: 15px; min-width: 95px; max-width: 95px; max-height: 120px; }
.t4s-result-main-image img { max-height: 120px; object-fit: contain; }
.t4s-result-main__item-title { font-size: 15px; font-weight: 500; line-height: 1.25; color: var(--secondary-color); }
.t4s-result-main__item-title:hover { color: var(--accent-color); }
.t4s-result-main-svg { padding-bottom: 100%; background-color: rgba(var(--text-color-rgb),.1); }
.t4s-result-main-svg > svg { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; stroke-width: 1px; color: var(--secondary-color); }
.t4s-result-main__item-content { font-size: 14px; word-break: break-all; line-height: 1.4; margin-top: 5px; }
.t4s-search-page.t4s-section .t4s-pagination-wrapper { margin-bottom: 0; }

/* ---- Collections list tiles without an image ---- */
.cat_grid_item .t4s_ratio.t4s-bg-11:empty { background-color: rgba(var(--text-color-rgb),.1); }