/* ============================================================
   BERKA BOTANICALS — Kategorieseite
   Umsetzung des Canva-Entwurfs "Berka Botanicals Kategorie".

   Alle Farben referenzieren die Tokens aus berka-design-system.css,
   jeweils mit Fallback: die Seite bleibt damit auch dann korrekt, wenn
   das Design-System (aktuell) nicht geladen wird.

   Masse sind aus dem Entwurf (Artboard 1920 x 1080) abgeleitet:
   Inhaltsspalte 1614px = 2 x 153px Rand, Filterleiste 80px hoch,
   Pills 40px, Produktraster vierspaltig.
   ============================================================ */

.berka-category {
  --cat-pad: clamp(20px, 8vw, 154px);
  --cat-line: var(--color-line, rgba(44, 44, 44, 0.12));
  --cat-ease: var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));

  /* Beige-Rand rund um das Produktbild (--pad). Der Entwurf setzt Marke,
     Titel und Preis buendig mit der Bildkante, darum --inset 0. */
  --cat-card-pad: clamp(12px, 1.75vw, 34px);
  --cat-card-inset: 0px;
}

/* Hero und Filterleiste sind randlos, sitzen aber im gepolsterten
   Content-Container von GeneratePress. Gleiches Ausbruchsmuster wie bei
   .related.products in der style.css. */
.berka-cat-hero,
.berka-cat-toolbar,
.berka-cat-active {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
}

/* GeneratePress polstert den Inhaltsbereich oben (je nach Layout
   .site-content, .site-main oder .inside-article). Beim randlosen Hero wird
   diese Polsterung zur Luecke unter dem Header — auf der Kategorieseite
   darum nur den *oberen* Abstand der Wrapper auf 0, die Seitenraender
   bleiben unangetastet. */
.berka-category .site-content,
.berka-category .content-area,
.berka-category .site-main,
.berka-category .inside-article,
.berka-category .woocommerce-products-header {
  padding-top: 0;
  margin-top: 0;
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.berka-cat-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(320px, 28vw, 540px);
  padding-block: clamp(48px, 6vw, 88px);
  background-color: var(--color-primary, #455f51);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Abdunklung, links kraeftiger: der Entwurf (Canva DAHMX-6-2B8, hi-res
   geprueft am 2026-09-04) setzt helle Schrift auf ein gedimmtes Motiv, das
   nach rechts hin heller wird. */
.berka-cat-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(30, 34, 28, 0.72) 0%, rgba(30, 34, 28, 0.42) 45%, rgba(30, 34, 28, 0.22) 100%),
    linear-gradient(180deg, rgba(30, 34, 28, 0.28) 0%, rgba(30, 34, 28, 0) 40%);
  pointer-events: none;
}

.berka-cat-hero--plain::after {
  background: linear-gradient(90deg, rgba(30, 34, 28, 0.35), rgba(30, 34, 28, 0));
}

.berka-cat-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: var(--cat-pad);
}

.berka-cat-hero__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.78);
}

.berka-cat-hero__crumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms var(--cat-ease);
}

.berka-cat-hero__crumbs a:hover,
.berka-cat-hero__crumbs a:focus-visible {
  color: #fff;
}

.berka-cat-hero__sep {
  opacity: 0.55;
}

.berka-cat-hero__title {
  margin: clamp(20px, 2.6vw, 40px) 0 0;
  font-family: "Jost", "Century Gothic", sans-serif;
  font-size: clamp(40px, 4.8vw, 96px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}

.berka-cat-hero__text {
  max-width: 620px;
  margin-top: clamp(20px, 2.4vw, 36px);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.berka-cat-hero__text p {
  margin: 0;
}

.berka-cat-hero__text p + p {
  margin-top: 12px;
}

/* ------------------------------------------------------------
   Filterleiste
   ------------------------------------------------------------ */
.berka-cat-toolbar {
  background: var(--color-bg-page, #fafaf7);
  border-bottom: 1px solid var(--cat-line);
}

.berka-cat-toolbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
  max-width: 1920px;
  margin-inline: auto;
  padding: 16px var(--cat-pad);
}

.berka-cat-toolbar__filters,
.berka-cat-toolbar__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.berka-cat-toolbar__meta {
  gap: 24px;
}

.berka-cat-toolbar__count {
  font-size: 14px;
  color: var(--color-text-muted, #6b6b6b);
  white-space: nowrap;
}

/* ---- Aufklapp-Filter ---- */
.berka-filter {
  position: relative;
}

.berka-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--cat-line);
  border-radius: var(--radius, 2px);
  background: transparent;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text, #2c2c2c);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: border-color 180ms var(--cat-ease), background 180ms var(--cat-ease);
}

/* Das Default-Dreieck von <summary> in beiden Engines abschalten. */
.berka-filter__toggle::-webkit-details-marker {
  display: none;
}

.berka-filter__toggle::marker {
  content: "";
}

.berka-filter__toggle:hover {
  border-color: var(--color-primary, #455f51);
}

.berka-filter__toggle:focus-visible {
  outline: 2px solid var(--color-primary, #455f51);
  outline-offset: 2px;
}

.berka-filter.is-active .berka-filter__toggle {
  border-color: var(--color-primary, #455f51);
  color: var(--color-primary, #455f51);
}

.berka-filter__chevron {
  width: 11px;
  height: 11px;
  opacity: 0.7;
  transition: transform 200ms var(--cat-ease);
}

.berka-filter[open] .berka-filter__chevron {
  transform: rotate(180deg);
}

.berka-filter__icon {
  width: 15px;
  height: 15px;
  opacity: 0.7;
}

.berka-filter__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 340px;
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--cat-line);
  border-radius: var(--radius, 2px);
  box-shadow: 0 14px 32px rgba(44, 44, 44, 0.12);
}

.berka-filter__panel--right {
  left: auto;
  right: 0;
}

.berka-filter__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.berka-filter__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font-size: 14px;
  color: var(--color-text, #2c2c2c);
  text-decoration: none;
  border-radius: var(--radius, 2px);
  transition: background 160ms var(--cat-ease);
}

.berka-filter__option:hover,
.berka-filter__option:focus-visible {
  background: rgba(69, 95, 81, 0.07);
}

.berka-filter__box {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 1px solid var(--color-text-muted, #6b6b6b);
  border-radius: 1px;
  position: relative;
}

.berka-filter__option.is-selected .berka-filter__box {
  background: var(--color-primary, #455f51);
  border-color: var(--color-primary, #455f51);
}

.berka-filter__option.is-selected .berka-filter__box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.berka-filter__label {
  flex: 1 1 auto;
}

.berka-filter__count {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--color-text-muted, #6b6b6b);
}

/* Die Sortierung ist einfach-Auswahl — dort waere eine Checkbox irrefuehrend. */
.berka-filter--sort .berka-filter__option.is-selected {
  color: var(--color-primary, #455f51);
}

/* ------------------------------------------------------------
   Aktive Filter
   ------------------------------------------------------------ */
.berka-cat-active {
  background: var(--color-bg-page, #fafaf7);
}

.berka-cat-active__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1920px;
  margin-inline: auto;
  padding: clamp(32px, 7vw, 110px) var(--cat-pad) 0;
}

.berka-cat-active__label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6b6b6b);
}

.berka-cat-active__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.berka-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius, 2px);
  background: var(--color-primary, #455f51);
  color: var(--color-on-dark, #ece7d9);
  font-size: 13px;
  text-decoration: none;
  transition: background 180ms var(--cat-ease);
}

.berka-cat-chip:hover,
.berka-cat-chip:focus-visible {
  background: var(--color-primary-dark, #33473c);
  color: var(--color-on-dark, #ece7d9);
}

.berka-cat-chip__x {
  width: 9px;
  height: 9px;
  opacity: 0.8;
}

.berka-cat-active__reset {
  font-size: 14px;
  color: var(--color-text, #2c2c2c);
  text-decoration: none;
  text-underline-offset: 4px;
}

.berka-cat-active__reset:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   Produktraster
   ------------------------------------------------------------ */
/* Raster, Pagination und Hinweise brechen genauso aus dem GeneratePress-
   Container aus wie Hero und Leiste — sonst startet das Raster an der Kante
   des (schmaleren) Themecontainers und flieht gegenueber den Filter-Pills
   nach rechts. Das padding haelt den Inhalt oberhalb von 1920px Breite auf
   derselben Spalte wie im Entwurf. */
.berka-category ul.products,
.berka-category .woocommerce-pagination,
.berka-category .woocommerce-info,
.berka-category .woocommerce-no-products-found {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--cat-pad), calc(50vw - 960px + var(--cat-pad)));
  box-sizing: border-box;
}

/* display/grid-template-columns mit !important: GP Premium wickelt das Raster
   in #wc-column-container.wc-mobile-columns-* ein und setzt dort dieselben
   Eigenschaften ueber eine ID-Selektor-Regel — ohne !important gewinnt das,
   Spaltenzahl faellt unterhalb 768px auf 1 zurueck. Gleiches Problem wurde
   bereits fuer .related.products in style.css so geloest. */
.berka-category ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 32px);
  margin-block: clamp(32px, 4vw, 56px) 0;
  list-style: none;
}

.berka-category ul.products::before,
.berka-category ul.products::after {
  content: none;
}

.berka-category ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  float: none;
  width: auto;
  margin: 0;
  padding: var(--cat-card-pad) var(--cat-card-pad) 18px;
  background: var(--color-bg-soft, #e3ded1);
  text-align: left;
}

/* position:relative macht den Link zum Bezug fuer das Badge. */
.berka-category ul.products li.product a.woocommerce-loop-product__link {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
}

.berka-category ul.products li.product img {
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---- Badge ---- */
.berka-cat-badge {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  background: var(--color-accent, #b9ad8d);
  border-radius: var(--radius, 2px);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-on-dark, #ece7d9);
}

.berka-category ul.products li.product .loop-product-brand {
  display: block;
  padding: 18px var(--cat-card-inset) 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6b6b6b);
}

.berka-category ul.products li.product .woocommerce-loop-product__title {
  margin: 0;
  padding: 2px var(--cat-card-inset) 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text, #2c2c2c);
}

.berka-category ul.products li.product .star-rating {
  display: none;
}

/* Gesamtpreis direkt unter der Ueberschrift (Reihenfolge kommt aus
   berka_category_move_price() in category-template.php) — deckt
   Streichpreis (del/ins) und Preisspanne bei Variationen automatisch mit ab,
   das ist alles derselbe Core-Preis-HTML. .price ist von Haus aus inline;
   als Block faellt er sauber in eine eigene Zeile statt an den Titeltext
   anzuschliessen. Greift auch fuer den Germanized-Grundpreis (.price-unit),
   der als eigenes Element danach folgt. */
.berka-category ul.products li.product .price {
  display: block;
  margin: 0;
  padding: 6px var(--cat-card-inset) 0;
  font-size: 15px;
  color: var(--color-text, #2c2c2c);
}

/* Gesamtpreis staerker hervorheben, ohne die Position zu veraendern (die
   kommt weiterhin aus berka_category_move_price()). Der Grundpreis (siehe
   unten) uebernimmt die Basis-Groesse von .price und wird nur noch gedaempft. */
.berka-category ul.products li.product .price:not(.price-unit) {
  font-size: 20px;
  font-weight: 400;
  color: var(--color-primary, #455f51);
}

/* Grundpreis (Germanized) optisch in den Hintergrund ruecken: kleiner,
   leichter und gedaempfter als der Gesamtpreis, aber an derselben Stelle
   direkt darunter (Reihenfolge unveraendert). */
.berka-category ul.products li.product .price-unit {
  padding-top: 2px;
  font-size: 11px;
  font-weight: 300;
  color: var(--color-text-muted, #6b6b6b);
}

/* Fusszeile: nur noch der + Button. Bewusst im Fluss und nicht am
   Kachelboden fixiert — bei zweizeiligen Titeln rutscht die Zeile mit nach
   unten, genau wie im Entwurf. justify-content: flex-end haelt den Button
   rechts, auch wenn kuenftig ein weiteres Element dazukommt. */
.berka-cat-card__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px var(--cat-card-inset) 0;
}

/* Der "Zum Warenkorb"-Link nach dem AJAX-Kauf wuerde die Zeile sprengen. */
.berka-cat-card__foot .added_to_cart {
  display: none;
}

.berka-category ul.products li.product .price .woocommerce-Price-amount {
  color: inherit;
}

.berka-category ul.products li.product .price del {
  opacity: 0.5;
  margin-right: 6px;
}

.berka-category ul.products li.product .button {
  flex: 0 0 auto;
  /* !important noetig: GP Premium setzt auf denselben Selektor
     margin-left/right: auto (Zentrierung), gleiche Spezifitaet wie hier —
     ohne !important gewinnt je nach Ladereihenfolge GP Premium und der
     Button rutscht per Auto-Margin wieder in die Mitte der Fusszeile. */
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-text, #2c2c2c);
  border-radius: var(--radius, 2px);
  background: transparent;
  color: transparent;
  font-size: 0;
  transition: background 180ms var(--cat-ease), border-color 180ms var(--cat-ease);
}

.berka-category ul.products li.product .button::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
  color: var(--color-text, #2c2c2c);
  transition: color 180ms var(--cat-ease);
}

.berka-category ul.products li.product .button:hover {
  background: var(--color-primary, #455f51);
  border-color: var(--color-primary, #455f51);
}

.berka-category ul.products li.product .button:hover::after {
  color: var(--color-on-dark, #ece7d9);
}

.berka-category ul.products li.product .button.loading::after,
.berka-category ul.products li.product .button.added::after {
  content: "";
}

/* ------------------------------------------------------------
   Marken-Band (eingeschoben nach der ersten Rasterzeile)
   ------------------------------------------------------------ */
.berka-category ul.products li.berka-cat-brands {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.berka-cat-brands__inner {
  background: var(--color-bg-soft, #e3ded1);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 48px);
}

.berka-cat-brands__eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6b6b6b);
}

.berka-cat-brands__title {
  margin: 12px 0 0;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text, #2c2c2c);
}

.berka-cat-brands__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px clamp(28px, 4vw, 72px);
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

.berka-cat-brands__brand {
  font-size: clamp(16px, 1.3vw, 20px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-accent, #b9ad8d);
  transition: color 180ms var(--cat-ease);
}

.berka-cat-brands__brand:hover,
.berka-cat-brands__brand:focus-visible {
  color: var(--color-primary, #455f51);
}

/* ---- Leeres Ergebnis ---- */
.berka-category .woocommerce-info,
.berka-category .woocommerce-no-products-found {
  margin-block: clamp(32px, 4vw, 56px) 0;
  background: transparent;
  border: 0;
  font-size: 16px;
  color: var(--color-text-muted, #6b6b6b);
}

/* ---- Pagination ---- */
.berka-category .woocommerce-pagination {
  margin-block: clamp(40px, 5vw, 72px) 0;
  text-align: center;
}

.berka-category .woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  gap: 8px;
  border: 0;
  margin: 0;
  padding: 0;
}

.berka-category .woocommerce-pagination ul.page-numbers li {
  border: 0;
  margin: 0;
}

.berka-category .woocommerce-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--cat-line);
  border-radius: var(--radius, 2px);
  background: transparent;
  font-size: 14px;
  color: var(--color-text, #2c2c2c);
  transition: border-color 180ms var(--cat-ease), color 180ms var(--cat-ease);
}

.berka-category .woocommerce-pagination .page-numbers:hover {
  border-color: var(--color-primary, #455f51);
  color: var(--color-primary, #455f51);
}

.berka-category .woocommerce-pagination .page-numbers.current {
  background: var(--color-primary, #455f51);
  border-color: var(--color-primary, #455f51);
  color: var(--color-on-dark, #ece7d9);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .berka-category ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Das Band steht im Markup nach der vierten Kachel — bei drei Spalten
     bliebe die vierte allein in Zeile 2 stehen und daneben zwei leere Zellen,
     weil das volle Band dort nicht mehr hineinpasst. Per order rutscht es
     hier eine Kachel nach vorn. Betrifft nur die visuelle Reihenfolge einer
     einzigen Kachel, die Vorlesereihenfolge bleibt die des Markups. */
  .berka-category ul.products > li.product:nth-child(-n + 3) {
    order: -1;
  }

  .berka-category ul.products > li.product:nth-child(n + 4) {
    order: 1;
  }
}

@media (max-width: 900px) {
  .berka-cat-toolbar__inner {
    flex-direction: column;
    align-items: stretch;
  }

  /* Auf Schmalgeraeten laufen die Filter horizontal durch statt umzubrechen. */
  .berka-cat-toolbar__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .berka-cat-toolbar__filters::-webkit-scrollbar {
    display: none;
  }

  .berka-cat-toolbar__meta {
    justify-content: space-between;
  }

  .berka-category ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Bei zwei Spalten passt die Markup-Reihenfolge wieder — order zuruecknehmen. */
  .berka-category ul.products > li {
    order: 0;
  }
}

@media (max-width: 560px) {
  .berka-cat-hero__title {
    letter-spacing: 0.03em;
  }

  .berka-category {
    --cat-card-pad: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .berka-filter__chevron {
    transition: none;
  }
}