/**
 * Algolia facets — minimal styles.
 *
 * Currently scoped to the loading state on the Algolia Loop Grid hits
 * container during AJAX re-render (filter / search / pagination change).
 */

/* The hits container needs to be a positioning context so the absolutely-
   positioned overlay covers it (and only it). */
.algolia-loop-grid__list {
	position: relative;
	min-height: 200px;
}

/* Fade out the (about-to-be-replaced) cards while the AJAX request is in
   flight, and lock interaction so users can't click a card that's about to
   disappear. The transition runs both on entering AND leaving the loading
   state, giving a fade-out / fade-in effect around the innerHTML swap. */
.algolia-loop-grid__list.is-loading {
	pointer-events: none;
}

.algolia-loop-grid__list.is-loading > * {
	opacity: 0.35;
	transition: opacity 0.18s ease-out;
}

.algolia-loop-grid__list > * {
	transition: opacity 0.18s ease-in;
}

/* Semi-transparent white veil on top of the faded content. */
.algolia-loop-grid__list.is-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.55);
	z-index: 10;
	pointer-events: none;
}

/* Centered spinner. Uses the theme's text color for the active arc so it
   matches whatever palette the site is on. */
.algolia-loop-grid__list.is-loading::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border: 3px solid rgba(0, 0, 0, 0.12);
	border-top-color: var(--e-global-color-text, #1f1c17);
	border-radius: 50%;
	animation: stk-algolia-spin 0.75s linear infinite;
	z-index: 11;
	pointer-events: none;
}

@keyframes stk-algolia-spin {
	to { transform: rotate(360deg); }
}



/* Self-contained Algolia Product Grid widget — turns the list into a CSS
   grid so the widget's responsive `grid-template-columns` selectors take
   effect. (The Elementor Loop Grid variant inherits `display: grid` from
   the `elementor-grid` helper class.) */
.algolia-product-grid__list {
	display: grid;
}

/* When an Algolia search returns no products, the grid carries `is-empty`
   (set by PHP on SSR/reload and toggled by facets.js on live filter changes).
   Hide the whole grid — its min-height/spinner box would otherwise leave an
   empty gap. The stats line still shows "Keine Produkte gefunden". */
.algolia-product-grid__list.is-empty,
.algolia-loop-grid__list.is-empty {
	display: none;
}

/* Product card — mirrors the markup produced by both renderHit() in
   facets.js and stk_algolia_render_product_card() in PHP, so the SSR
   initial paint and the JS-rerendered cards look identical. Originally
   inlined in child-theme/algolia/search-modern.php (search modal); pulled
   here so any page that renders product cards (modal, new widget, future
   shortcodes) gets the same baseline styling. */
.product-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-align: left;
      position: relative;
}
.product-card__image-link {
	display: block;
	overflow: hidden;
	background: #f6f6f6;
	height: 280px;
}
@media (max-width: 1366px) {
	.product-card__image-link { height: 250px; }
}
@media (max-width: 1200px) {
	.product-card__image-link { height: 265px; }
}
@media (max-width: 1024px) {
	.product-card__image-link { height: 340px; }
}
.product-card__image {
	display: block;
	width: 100%;
	height: 100% !important;
	object-position: center;
	object-fit: cover;
}
.product-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-top: 20px;
}
.product-card__brand {
	font-family: "Barlow", Sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}
a.product-card__brand {
	color: inherit;
	text-decoration: none;
	width: fit-content;
}
a.product-card__brand:hover { text-decoration: underline; }
.product-card__title {
	font-size: 1rem;
	margin: 0;
}
.product-card__title a {
	color: inherit;
	text-decoration: none;
}
.product-card__title a:hover { text-decoration: underline; }
.product-card__price {
	font-size: 1rem;
	margin-top: auto;
	padding-top: 6px;
}
.product-card__price del { opacity: .5; font-weight: 400; margin-right: 6px; }

.ais-MenuSelect-select.algolia-facet__select{
	border: 1px solid #cfd6e6 !important;
  border-radius: 0;
  background: white;
  font-size: 14px !important;
  padding: 12px 24px;
}

/* Reset-filters button ([algolia_reset]). Ghost button — no background, no
   border, no padding; just the label + circular-arrows icon (brand color).
   `!important` overrides the theme's global button styling (black bg etc.). */
.algolia-facet__reset-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Barlow", Sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 0 !important;
    margin-left: 10px;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	color: var(--e-global-color-text) !important;
	box-shadow: none !important;
	cursor: pointer;
}
.algolia-facet__reset-button:hover {
	color: var(--e-global-color-primary);
}
.algolia-facet__reset-icon {
	flex: 0 0 auto;
	color: var(--e-global-color-text);
}


/* Marks the current archive's category as the "you are here" option in the
   kategorie dropdown. Browser styling for <option> is patchy (Chrome/Safari
   mostly ignore CSS here), but Firefox honors it and the `disabled` attribute
   set in JS reliably greys the row out everywhere. */
.algolia-facet__select option.algolia-facet__option--current {
	font-weight: 700;
	color: var(--e-global-color-text, #1f1c17);
}

/* List-style facet (display="list" on [algolia_facet]). Renders the facet
   values as a clickable <ul>/<li> list instead of a <select>. For the kategorie
   facet this is a drill-down tree (parents + current-level siblings + direct
   children); other facets render as a flat list. Shared by live mode
   (connectMenu custom render) and reload mode (renderReloadFacet) — both emit
   the same class names. */
.algolia-facet-group--list, .algolia-facet-group--select, .algolia-facet-group--search  {
	margin-bottom: 4px;
}
.algolia-facet__heading {
	font-family: "Barlow", Sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--e-global-color-text, #1f1c17);
	margin-bottom: 8px;
}
.algolia-facet__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.algolia-facet__list-item {
	margin: 0;
}
.algolia-facet__list-link {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	padding: 6px 0;
	text-decoration: none;
	font-family: "Barlow", Sans-serif;
	font-size: 14px;
	color: var(--e-global-color-text, #1f1c17);
}
.algolia-facet__list-link:hover {
	color: var(--e-global-color-primary);
}
.algolia-facet__list-item--selected > .algolia-facet__list-link,
.algolia-facet__list-item--current > .algolia-facet__list-link {
	font-weight: 700;
}
.algolia-facet__list-count {
	opacity: .5;
	font-size: 12px;
}

/* Category drill-down indentation. `--algolia-cat-depth` is set per row from
   the term's depth (relative to the shallowest visible row); ancestors read
   slightly muted so the active branch stands out. */
.algolia-facet--cat-tree .algolia-facet__list-link {
	padding-left: calc(var(--algolia-cat-depth, 0) * 14px);  
	
	padding-left: 0;
    color: #1F1C17;
}
.algolia-facet--cat-tree .algolia-facet__list-item--ancestor > .algolia-facet__list-link {
	opacity: .75;
}

/* Sidebar filter column. Add the CSS class `algolia-facets-sidebar` (Elementor:
   Advanced → CSS Classes) to the container/column that holds the facet
   shortcodes — every dropdown then fills the column width and the facets stack
   with consistent spacing, so they read as a filter rail beside the grid.
   The same shortcodes can be placed in a SECOND container (e.g. a mobile-only
   one): live mode wires up one InstantSearch menuSelect per [data-algolia-facet]
   element and keeps them all in sync on the same attribute — see facets.js. Use
   Elementor's responsive "Hide On" toggles to show the right one per breakpoint;
   hidden containers stay in the DOM, so both instances remain live. */
.algolia-facets-sidebar .algolia-facet { display: block; }
.algolia-facets-sidebar .algolia-facet + .algolia-facet { margin-top: 12px; }
.algolia-facets-sidebar .algolia-facet__select,
.algolia-facets-sidebar .ais-MenuSelect-select,
.algolia-facets-sidebar .algolia-facet--search,
.algolia-facets-sidebar .ais-SearchBox-form,
.algolia-facets-sidebar .ais-SearchBox-input { width: 100%; }

/* Optional: keep the rail in view while scrolling the grid on desktop. Add
   `algolia-facets-sidebar--sticky` alongside `algolia-facets-sidebar`. */
@media (min-width: 1025px) {
	.algolia-facets-sidebar--sticky { position: sticky; top: 24px; align-self: start; }
}

.ais-SearchBox-form > input[type="search"].ais-SearchBox-input{
           color: #222;
font-size: 14px;
  font-weight: 400;
  border: 1px solid #cfd6e6 !important;  
	font-size: 14px !important;
   padding: 12px 24px;
    }
    .ais-SearchBox-input::placeholder{
          color: #cfd6e6 !important;

    }
.ais-SearchBox-submit, .ais-SearchBox-reset{
	background-color: white !important;
	border: 1px solid white !important;
}
.ais-SearchBox-form{
	display: flex;
	flex-direction: row;
	gap: 5px;
}
.ais-SearchBox-submit{
	display: none;
}
.algolia-product-grid__pagination{
      margin-top: 25px;
}
.ais-Pagination-list{
	list-style-type: none;
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 0;
}
.ais-Pagination-item .ais-Pagination-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--e-global-color-text, #ddd);
  text-decoration: none;
  font-size: 14px;
  transition: background .15s ease, color .15s ease;
	  color: var(--e-global-color-text, #333) !important;
}

.ais-Pagination-item .ais-Pagination-link:hover{
		background: var(--e-global-color-text, #000);
	  color: #fff !important;
}

.ais-Pagination-item.ais-Pagination-item--selected .ais-Pagination-link{
		background: var(--e-global-color-text, #000);
  color: #fff !important;
}
.ais-Pagination-item.ais-Pagination-item--disabled {
	opacity: 0.3;
}
.ais-Pagination-item.ais-Pagination-item--disabled .ais-Pagination-link:hover {
	
		background: white;
	  color: var(--e-global-color-text, #333) !important;
}

.product-card__brand{
  font-family: "Barlow", Sans-serif;
    font-weight: 600;
  text-transform: uppercase;  
  font-size: 12px;  
  color: var(--e-global-color-text);
}
.product-card__brand:hover{  
    color: var(--e-global-color-primary);
    
}

.product-card__title{
      font-family: "Barlow", Sans-serif;
  font-weight: 400;  
  color: var(--e-global-color-text);

}
.product-card__price{
    color: var(--e-global-color-text);
  font-family: "Barlow", Sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.product-card__price del .woocommerce-Price-amount{
        color: var(--e-global-color-text);
  font-family: "Barlow", Sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.algolia-product-grid .woocommerce-Price-amount{
 color: var(--e-global-color-text);
  font-family: "Barlow", Sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.product-card__image-link{

}
.product-card.product-card--on-sale::before {
  content: "Sale";
  background-color: #FFCC00;
  color: black;
  font-family: "Barlow", Sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  font-style: normal;
  text-decoration: none;
  border-style: none;
  padding: 5px 10px 5px 10px;
  position: absolute !important;
  left: 0;
  top: 0;
}
.algolia-loop-grid__stats{
	padding-bottom: 20px;
}
.ais-ToggleRefinement-checkbox{
	margin-right: 5px;
}
.algolia-facet__sale-label{
	  min-width: 120px;
}
.algolia-facet--sale{
	display: flex;
}

/* ---------------------------------------------------------------------------
   Off-canvas mobile filter panel.
   Author builds #mobile-shop-filter (display:none) with the filter shortcodes
   inside and a #mobile-shop-filter-toggle button. facets.js adds the classes
   below and slides the panel in from the side. See initMobileShopFilter().
   --------------------------------------------------------------------------- */
.mobile-shop-filter {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(360px, 85vw);
	max-width: 100%;
	background: #fff;
	z-index: 100000;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 56px 20px 24px;
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
	transform: translateX(-100%);
	transition: transform 0.3s ease;
}
.mobile-shop-filter.mobile-shop-filter--right {
	left: auto;
	right: 0;
	transform: translateX(100%);
}
.mobile-shop-filter.is-open {
	transform: translateX(0);
}

.mobile-shop-filter__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99999;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.mobile-shop-filter__overlay.is-open {
	opacity: 1;
}

.mobile-shop-filter__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	line-height: 1;
	border: 0;
	background: transparent;
	color: var(--e-global-color-text, #1f1c17);
	cursor: pointer;
}
.mobile-shop-filter__close:hover {
	color: var(--e-global-color-primary);
}

/* Lock page scroll behind the open panel. */
body.mobile-shop-filter-open {
	overflow: hidden;
}