/*
 * SlimWoo Base — Theme-Stylesheet.
 *
 * Hier steht ausschliesslich, was theme.json nicht ausdruecken kann. Farben,
 * Typografie, Abstaende und Layout kommen von dort und werden ueber die
 * erzeugten --wp--preset--* und --wp--custom--* gelesen. Es gibt bewusst keine
 * zweite Token-Ebene: eine Alias-Datei waere eine weitere Stelle, an der
 * Tokens auseinanderlaufen koennen.
 */

/* --- Topbar --------------------------------------------------------------- */

.slimwoo-topbar {
  font-size: var(--wp--custom--topbar--font-size);
}

/*
 * Ohne konfigurierten Versand rendert slimwoo/free-shipping-notice nichts —
 * die Gruppe drumherum bleibt aber stehen, und WordPress gibt ihr wegen
 * `has-background` von sich aus Innenabstand. Ein frisch installiertes Theme
 * zeigte dann einen leeren grauen Streifen als Erstanblick.
 *
 * :has() statt :empty, weil die Gruppe Zeilenumbrueche enthaelt und damit fuer
 * :empty nie leer ist.
 */
.slimwoo-topbar:not(:has(.slimwoo-free-shipping-notice)) {
  display: none;
}

.slimwoo-free-shipping-notice {
  margin-block: 0;
  padding-block: var(--wp--preset--spacing--20);
}

/* --- Header --------------------------------------------------------------- */

.slimwoo-header {
  min-height: var(--wp--custom--header--height);
}

/*
 * Der Warenkorb ist der wichtigste Einstieg der Seite und darf nie aus dem
 * Blick wandern — das Suchfeld dagegen soll nachgeben.
 *
 * Ein flex-shrink: 0 auf der ganzen Werkzeuggruppe kehrt genau das um: Auf
 * 390 px nahm das Suchfeld dann fast die volle Zeile und drueckte den
 * Warenkorb an den Rand. Deshalb schrumpft die Gruppe, und nur der Warenkorb
 * darin ist geschuetzt.
 */
.slimwoo-header__tools {
  min-width: 0;
}

.slimwoo-header__tools .wp-block-woocommerce-mini-cart {
  flex-shrink: 0;
}

.slimwoo-header__tools .wp-block-search__input {
  min-width: 0;
}

@media (max-width: 600px) {
  /* Auf schmalen Geraeten traegt die Suche hoechstens die halbe Zeile; der
     Rest gehoert Menue und Warenkorb. */
  .slimwoo-header__tools .wp-block-search {
    max-width: 50vw;
  }
}

/* --- Footer --------------------------------------------------------------- */

.slimwoo-footer__nav {
  justify-content: center;
}

/* --- Produktraster und Card ---------------------------------------------- */

.slimwoo-product-card {
  border-color: var(--wp--preset--color--border);
  box-sizing: border-box;
  flex: 1;
  align-items: stretch;
  gap: var(--wp--preset--spacing--20);
  height: 100%;
}

/* Das Sale-Badge positioniert woocommerce/product-image selbst — es braucht
   hier keine Regel. Ein eigener product-sale-badge-Block daneben zeigte es
   doppelt und nahm als `static` zusaetzlich 24px Platz, was die Karten einer
   Reihe gegeneinander verschob. */
.slimwoo-product-card__media {
  position: relative;
}

/* Der Button sitzt unten, auch wenn die Titel unterschiedlich hoch sind —
   sonst franst die Reihe aus. */
.slimwoo-product-card > .slimwoo-product-card__button {
  margin-block-start: auto;
  width: 100%;
}
.slimwoo-product-card .slimwoo-product-card__button.wp-block-button :is(a, button) {
  box-sizing: border-box;
  width: 100%;
}
.wc-block-product-template > li:has(> .slimwoo-product-card) {
  display: flex;
}

/* One shared card grid: usable cards, not a fixed column count in a narrow container. */
.wc-block-product-template.is-flex-container:has(.slimwoo-product-card) {
  display: grid;
  --slimwoo-grid-columns: 3;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(18rem, calc((100% - (var(--slimwoo-grid-columns) - 1) * var(--wp--preset--spacing--30)) / var(--slimwoo-grid-columns)))), 1fr));
  gap: var(--wp--preset--spacing--30);
}
.wc-block-product-template.is-flex-container:has(.slimwoo-product-card) > li.wc-block-product {
  width: 100%;
  max-width: none;
  min-width: 0;
  flex-basis: auto;
}
.wc-block-product-template.is-flex-container.columns-1:has(.slimwoo-product-card) { --slimwoo-grid-columns: 1; }
.wc-block-product-template.is-flex-container.columns-2:has(.slimwoo-product-card) { --slimwoo-grid-columns: 2; }
.wc-block-product-template.is-flex-container.columns-3:has(.slimwoo-product-card) { --slimwoo-grid-columns: 3; }
.wc-block-product-template.is-flex-container.columns-4:has(.slimwoo-product-card) { --slimwoo-grid-columns: 4; }
.wc-block-product-template.is-flex-container.columns-5:has(.slimwoo-product-card) { --slimwoo-grid-columns: 5; }
.wc-block-product-template.is-flex-container.columns-6:has(.slimwoo-product-card) { --slimwoo-grid-columns: 6; }
@media (max-width: 600px) {
  .wc-block-product-template.is-flex-container:has(.slimwoo-product-card) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Gleiche Bildflaeche je Karte.
 *
 * Produktfotos kommen in verschiedenen Seitenverhaeltnissen; ohne feste
 * Flaeche beginnen Titel und Preis in einer Reihe auf verschiedener Hoehe und
 * das Raster wirkt zerfahren.
 *
 * `contain` statt `cover`: Bei Produktbildern darf nichts abgeschnitten
 * werden — ein halber Artikel ist schlimmer als ein Rand.
 */
.slimwoo-product-card__media img {
  aspect-ratio: 1;
  width: 100%;
  object-fit: contain;
}

/* --- Angebots-Filter ------------------------------------------------------ */

.slimwoo-filter-on-sale__link {
  display: inline-block;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 4px;
  text-decoration: none;
}

.slimwoo-filter-on-sale__link.is-active {
  border-color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--surface-soft);
  font-weight: 600;
}


/* Preserve native navigation behavior at the width where the desktop row no longer fits. */
.slimwoo-header > .wp-block-group {
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
}
.slimwoo-header__tools {
  flex: 1 1 16rem;
  max-width: 24rem;
}
.slimwoo-header__tools .wp-block-search {
  min-width: 0;
  flex: 1;
}
@media (max-width: 1023px) {
  .slimwoo-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
  .slimwoo-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* Native Woo drawer at every viewport; Woo 11.1 only exposes showFilterDrawer. */
.slimwoo-archive__filters .wc-block-product-filters:not(.is-filter-drawer-disabled) .wc-block-product-filters__open-overlay,
.slimwoo-archive__filters .wc-block-product-filters:not(.is-filter-drawer-disabled) .wc-block-product-filters__overlay-header,
.slimwoo-archive__filters .wc-block-product-filters:not(.is-filter-drawer-disabled) .wc-block-product-filters__overlay-footer { display: flex; }
.slimwoo-archive__filters .wc-block-product-filters:not(.is-filter-drawer-disabled) .wc-block-product-filters__overlay {
  position: fixed;
  inset: 0;
  top: var(--wp-admin--admin-bar--height, 0px);
  background: transparent;
  pointer-events: none;
  z-index: 9999;
}
.slimwoo-archive__filters .wc-block-product-filters:not(.is-filter-drawer-disabled).is-overlay-opened .wc-block-product-filters__overlay {
  pointer-events: auto;
  background: rgb(0 0 0 / 35%);
}
.slimwoo-archive__filters .wc-block-product-filters:not(.is-filter-drawer-disabled) .wc-block-product-filters__overlay-wrapper { height: 100%; width: 100%; }
.slimwoo-archive__filters .wc-block-product-filters:not(.is-filter-drawer-disabled) .wc-block-product-filters__overlay-dialog {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(100%, 28rem);
  background: var(--wc-product-filters-overlay-background-color, var(--wc-product-filters-background-color, var(--wp--preset--color--base)));
  color: var(--wc-product-filters-overlay-text-color, var(--wc-product-filters-text-color, var(--wp--preset--color--contrast)));
  transform: translateX(100%);
  visibility: hidden;
}
.slimwoo-archive__filters .wc-block-product-filters:not(.is-filter-drawer-disabled).is-overlay-opened .wc-block-product-filters__overlay-dialog {
  transform: translateX(0);
  visibility: visible;
}
.slimwoo-archive__filters .wc-block-product-filters:not(.is-filter-drawer-disabled) .wc-block-product-filters__overlay-content {
  min-width: 0;
  overflow-y: auto;
  padding: var(--wp--preset--spacing--40);
}
.slimwoo-archive__filters fieldset { min-inline-size: 0; margin-inline: 0; box-sizing: border-box; max-width: 100%; }
.slimwoo-archive__filters .wc-block-product-filter-price-slider__left,
.slimwoo-archive__filters .wc-block-product-filter-price-slider__right { min-width: 0; flex: 1; }
.slimwoo-archive__filters .wc-block-product-filter-price-slider input { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
.slimwoo-archive__results .slimwoo-product-card { width: 100%; max-width: 24rem; min-width: 0; }