/* =========================================================
   ALGAE LIBRARY — FOUNDATION
========================================================= */

:root{

  --algae-bg:#ffffff;
  --algae-surface:#ffffff;

  --algae-border:#e6e8ec;
  --algae-border-strong:#d4d7dd;

  --algae-text:#111827;
  --algae-text-muted:#6b7280;

  --algae-accent:#2C6B4A;
  --algae-accent-soft:#e8f2ec;

  --algae-chip:#eef2f6;

  --algae-radius:14px;

  --algae-shadow-sm:0 2px 6px rgba(0,0,0,.04);
  --algae-shadow-md:0 6px 16px rgba(0,0,0,.08);

}


/* =========================================================
   LIBRARY WRAPPER
========================================================= */

#algae-library{

  width:100%;
  max-width:1400px;
  margin:auto;

  padding:28px 22px;

}

.algae-library{

  width:100%;
  position:relative;

}


/* =========================================================
   GRID
========================================================= */

#algae-grid{

  display:grid;

  grid-template-columns:repeat(
    auto-fill,
    minmax(260px,1fr)
  );

  gap:22px;

}

@media (max-width:640px){

  #algae-grid{

    grid-template-columns:1fr;
    gap:16px;

  }

}


/* =========================================================
   CARD
========================================================= */

.algae-card{

  background:var(--algae-surface);

  border:1px solid var(--algae-border);
  border-radius:var(--algae-radius);

  overflow:hidden;

  transition:

    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;

  display:flex;
  flex-direction:column;

}

.algae-card:hover{

  transform:translateY(-3px);

  border-color:var(--algae-border-strong);

  box-shadow:var(--algae-shadow-md);

}


/* =========================================================
   CARD MEDIA
========================================================= */

.algae-card__media-wrap{

  width:100%;
  aspect-ratio:4 / 3;

  overflow:hidden;

  background:#f3f4f6;

}

.algae-card__media{

  width:100%;
  height:100%;

  object-fit:cover;

}

.algae-card__media--empty{

  width:100%;
  height:100%;

  background:linear-gradient(
    45deg,
    #eef2f6,
    #f7f8fb
  );

}


/* =========================================================
   CARD BODY
========================================================= */

.algae-card__body{

  padding:16px 18px 18px 18px;

  display:flex;
  flex-direction:column;
  gap:8px;

}

.algae-card__title{

  font-size:17px;
  font-weight:600;

  color:var(--algae-text);

}

.algae-card__subtitle{

  font-size:13px;

  color:var(--algae-text-muted);

  font-style:italic;

}

.algae-card__excerpt{

  font-size:14px;
  line-height:1.45;

  color:var(--algae-text-muted);

}


/* =========================================================
   CARD META
========================================================= */

.algae-card__meta{

  font-size:12px;
  color:var(--algae-text-muted);

}


/* =========================================================
   CARD CHIPS
========================================================= */

.algae-card__chips{

  display:flex;
  flex-wrap:wrap;

  gap:6px;

  margin-top:6px;

}

.algae-card__chip{

  font-size:11px;
  font-weight:500;

  padding:4px 8px;

  border-radius:999px;

  background:var(--algae-chip);

  color:#374151;

}

.algae-card__chip.is-accent{

  background:var(--algae-accent-soft);

  color:var(--algae-accent);

}


/* =========================================================
   IMAGE CREDIT
========================================================= */

.algae-card__credit{

  padding:10px 16px;

  font-size:11px;

  color:var(--algae-text-muted);

  border-top:1px solid var(--algae-border);

}

.algae-card__credit a{

  color:inherit;
  text-decoration:underline;

}


/* =========================================================
   CARD LINK WRAPPER
========================================================= */

.algae-card__link{

  color:inherit;
  text-decoration:none;

  display:block;
  height:100%;

}

/* =========================================================
   ALGAE LIBRARY — FILTER SIDEBAR / SEARCH / CHIPS
========================================================= */

/* Toggle button */
.sidebar-toggle{

  display:inline-flex;
  align-items:center;
  gap:8px;

  min-height:42px;

  padding:10px 14px;

  border:1px solid var(--algae-border);
  border-radius:999px;

  background:var(--algae-surface);
  color:var(--algae-text);

  box-shadow:var(--algae-shadow-sm);

  cursor:pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;

}

.sidebar-toggle:hover{

  border-color:var(--algae-border-strong);
  box-shadow:var(--algae-shadow-md);
  transform:translateY(-1px);

}

/* Overlay */
.sidebar-overlay{

  position:fixed;
  inset:0;
  z-index:9997;

  background:rgba(17,24,39,.38);
  backdrop-filter:blur(2px);

}

.sidebar-overlay[hidden]{
  display:none !important;
}

/* Sidebar shell */
.offcanvas-sidebar{

  position:fixed;
  top:0;
  right:0;
  z-index:9998;

  width:min(420px, 92vw);
  height:100dvh;

  display:flex;
  flex-direction:column;

  background:var(--algae-surface);

  border-left:1px solid var(--algae-border);
  box-shadow:-10px 0 30px rgba(0,0,0,.10);

  padding:0;

  overflow:hidden;

}

.offcanvas-sidebar[hidden]{
  display:none !important;
}

.offcanvas-sidebar.active{
  display:flex;
}

/* Header */
.sidebar-header{

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:18px 18px 14px 18px;

  border-bottom:1px solid var(--algae-border);

  background:var(--algae-surface);

}

.sidebar-header h2{

  margin:0;

  font-size:18px;
  font-weight:700;
  color:var(--algae-text);

}

.close-button{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:40px;
  height:40px;

  border:none;
  border-radius:999px;

  background:#f3f4f6;
  color:var(--algae-text);

  cursor:pointer;
  transition:
    background .18s ease,
    transform .18s ease;

}

.close-button:hover{
  background:#e8ebef;
  transform:scale(1.03);
}

/* Scroll area behavior */
.offcanvas-sidebar > .filter-section,
.offcanvas-sidebar > .filters__foot,
.offcanvas-sidebar > .filters__chips{
  flex:0 0 auto;
}

.offcanvas-sidebar .filter-section,
.offcanvas-sidebar .filters__chips{
  padding-left:18px;
  padding-right:18px;
}

/* Search block */
.filter-section--search,
.filter-section:first-of-type{
  padding-top:16px;
}

.label{

  display:block;
  margin-bottom:8px;

  font-size:13px;
  font-weight:600;
  color:var(--algae-text);

}

.search-input-wrap{

  position:relative;

}

.input-icon{

  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);

  color:#9ca3af;
  pointer-events:none;

}

#search,
[data-algae-search]{

  width:100%;
  min-height:44px;

  padding:11px 14px 11px 40px;

  border:1px solid var(--algae-border);
  border-radius:12px;

  background:#fff;
  color:var(--algae-text);

  font-size:14px;
  line-height:1.2;

  outline:none;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;

}

#search:focus,
[data-algae-search]:focus{

  border-color:rgba(44,107,74,.55);
  box-shadow:0 0 0 4px rgba(44,107,74,.10);

}

/* Search suggest */
.search-suggest{

  margin-top:8px;

  border:1px solid var(--algae-border);
  border-radius:14px;

  background:#fff;
  box-shadow:var(--algae-shadow-md);

  overflow:hidden;

}

.search-suggest[hidden]{
  display:none !important;
}

.search-suggest__item{

  width:100%;
  display:block;
  text-align:left;

  padding:12px 14px;

  border:none;
  border-bottom:1px solid #f0f2f5;

  background:#fff;

  cursor:pointer;
  transition:background .16s ease;

}

.search-suggest__item:last-child{
  border-bottom:none;
}

.search-suggest__item:hover{
  background:#f8fafc;
}

.search-suggest__title{

  display:block;
  font-size:14px;
  font-weight:600;
  color:var(--algae-text);

}

.search-suggest__meta{

  display:block;
  margin-top:2px;

  font-size:12px;
  color:var(--algae-text-muted);
  font-style:italic;

}

/* Did you mean */
.did-you-mean{

  margin-top:10px;

}

.did-you-mean[hidden]{
  display:none !important;
}

.did-you-mean__btn{

  width:100%;
  text-align:left;

  padding:10px 12px;

  border:1px dashed rgba(44,107,74,.25);
  border-radius:12px;

  background:rgba(44,107,74,.05);
  color:var(--algae-text);

  cursor:pointer;
  transition:
    background .16s ease,
    border-color .16s ease;

}

.did-you-mean__btn:hover{

  background:rgba(44,107,74,.08);
  border-color:rgba(44,107,74,.38);

}

/* Active chips */
.filters__chips{

  display:flex;
  flex-wrap:wrap;
  gap:8px;

  padding-top:14px;
  padding-bottom:8px;

  border-bottom:1px solid var(--algae-border);

}

.filters__chips[hidden]{
  display:none !important;
}

.active-filter-chip{

  display:inline-flex;
  align-items:center;

  min-height:34px;

  padding:7px 11px;

  border:none;
  border-radius:999px;

  background:var(--algae-accent-soft);
  color:var(--algae-accent);

  font-size:12px;
  font-weight:600;

  cursor:pointer;
  transition:
    transform .16s ease,
    background .16s ease;

}

.active-filter-chip:hover{
  transform:translateY(-1px);
  background:#dcece2;
}

/* Filter section */
.filter-section{

  padding-top:10px;
  padding-bottom:2px;

  border-bottom:1px solid #f1f3f6;

}

.group-head{
  width:100%;
}

.filters__group-toggle{

  width:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:10px 0;

  border:none;
  background:transparent;

  color:var(--algae-text);
  font-size:14px;
  font-weight:600;
  text-align:left;

  cursor:pointer;

}

.filters__group-toggle .chev{
  transition:transform .18s ease;
}

.filter-section.is-open .filters__group-toggle .chev{
  transform:rotate(180deg);
}

/* Options wrap */
.filters__options{

  display:flex;
  flex-direction:column;
  gap:8px;

  padding:2px 0 12px 0;

}

.filters__options[hidden]{
  display:none !important;
}

/* Option row */
.filter-option{

  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;

  min-height:40px;

  padding:8px 10px;

  border:1px solid transparent;
  border-radius:12px;

  background:transparent;

  cursor:pointer;
  transition:
    background .16s ease,
    border-color .16s ease,
    opacity .16s ease;

}

.filter-option:hover{
  background:#f8fafc;
}

.filter-option.is-selected{
  background:rgba(44,107,74,.06);
  border-color:rgba(44,107,74,.14);
}

.filter-option.is-zero.is-disabled-like{
  opacity:.52;
}

.filter-option input[type="checkbox"]{
  margin:0;
  accent-color:var(--algae-accent);
}

.filter-option__label{

  font-size:14px;
  color:var(--algae-text);

}

.filter-count{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:28px;
  height:24px;

  padding:0 8px;

  border-radius:999px;

  background:#f3f4f6;
  color:var(--algae-text-muted);

  font-size:11px;
  font-weight:600;

}

/* Footer */
.filters__foot{

  margin-top:auto;

  padding:16px 18px calc(16px + env(safe-area-inset-bottom, 0px));

  border-top:1px solid var(--algae-border);
  background:#fff;

}

.result-count{

  margin-bottom:12px;

  font-size:13px;
  font-weight:600;
  color:var(--algae-text);

}

.button-group{

  display:flex;
  gap:10px;

}

.btn{

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-height:44px;
  width:100%;

  padding:10px 14px;

  border:none;
  border-radius:12px;

  font-size:14px;
  font-weight:600;

  cursor:pointer;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease;

}

.btn:hover{
  transform:translateY(-1px);
}

.btn--ghost{

  background:#f3f4f6;
  color:var(--algae-text);

}

.btn--primary{

  background:var(--algae-accent);
  color:#fff;
  box-shadow:0 8px 18px rgba(44,107,74,.18);

}

/* Utility hidden class used by JS */
.is-hidden{
  display:none !important;
}

/* Desktop behavior */
@media (min-width:1025px){

  .offcanvas-sidebar{
    width:min(400px, 34vw);
  }

}

/* Mobile */
@media (max-width:640px){

  .offcanvas-sidebar{
    width:100vw;
    max-width:100vw;
    border-left:none;
  }

  .button-group{
    flex-direction:column;
  }

}

/* =========================================================
   ALGAE LIBRARY — MODAL / DETAIL UI
========================================================= */

/* Modal shell */
.plm{
  overflow: visible !important;
}

.plm > .plm__close.plm__close--float{
  position:absolute;
  z-index:10;
  top: calc(-1 * var(--plm-close-offset));
  right: calc(-1 * var(--plm-close-offset));
  width: var(--plm-close-size);
  height: var(--plm-close-size);
  display:grid;
  place-items:center;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  background: var(--plm-close-bg);
  color: var(--plm-close-ink);
  box-shadow:
    0 8px 24px rgba(0,0,0,.14),
    0 0 0 6px #fff;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}

.plm > .plm__close.plm__close--float svg{
  width:18px;
  height:18px;
  pointer-events:none;
}

.plm > .plm__close.plm__close--float:hover{
  transform: translateY(-1px);
  box-shadow:
    0 10px 28px rgba(0,0,0,.18),
    0 0 0 6px #fff;
}

.plm > .plm__close.plm__close--float:focus-visible{
  outline:3px solid color-mix(in srgb, var(--plm-brand,#2C6B4A) 48%, transparent);
  outline-offset:2px;
}

@media (max-width:640px){
  .plm > .plm__close.plm__close--float{
    top: calc(12px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    box-shadow: 0 14px 30px rgba(0,0,0,.22);
  }
}

/* Loading / error */
.plm-loading,
.plm-error{

  padding:52px 24px;
  text-align:center;

  color:var(--algae-text-muted);
  font-size:15px;

}

.plm-error{
  color:#991b1b;
}

/* Inner */
.plm-modal__inner{

  padding:0 18px 24px 18px;

}


/* =========================================================
   HERO
========================================================= */

.plm-hero{

  display:grid;
  grid-template-columns:1fr;
  gap:18px;

  padding:18px 0 12px 0;

}

.plm-hero__media{

  width:100%;

}

.plm-hero__media img,
.plm-hero__empty{

  display:block;
  width:100%;

  aspect-ratio:4 / 3;
  object-fit:cover;

  border-radius:18px;

  background:linear-gradient(
    45deg,
    #eef2f6,
    #f7f8fb
  );

}

.plm-hero__content{
  min-width:0;
}

.plm-hero__eyebrow{

  margin:0 0 8px 0;

  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;

  color:var(--algae-accent);

}

.plm-hero__title{

  margin:0;

  font-size:clamp(28px, 4vw, 40px);
  line-height:1.06;
  font-weight:700;

  color:var(--algae-text);

}

.plm-hero__subtitle{

  margin:8px 0 0 0;

  font-size:15px;
  font-style:italic;

  color:var(--algae-text-muted);

}

.plm-hero__excerpt{

  margin:14px 0 0 0;

  font-size:15px;
  line-height:1.72;

  color:#374151;

}

.plm-hero__credit{

  margin-top:12px;

  font-size:12px;
  line-height:1.5;
  color:var(--algae-text-muted);

}

.plm-hero__credit a{
  color:inherit;
  text-decoration:underline;
}

.plm-hero__actions{

  display:flex;
  flex-wrap:wrap;
  gap:10px;

  margin-top:16px;

}


/* =========================================================
   BUTTONS
========================================================= */

.plm-btn{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:44px;

  padding:11px 16px;

  border-radius:999px;
  border:none;

  font-size:14px;
  font-weight:600;
  text-decoration:none;

  cursor:pointer;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease;

}

.plm-btn:hover{
  transform:translateY(-1px);
}

.plm-btn--primary{

  background:var(--algae-accent);
  color:#fff;

  box-shadow:0 8px 18px rgba(44,107,74,.18);

}


/* =========================================================
   CONTENT BLOCKS
========================================================= */

.plm-block{

  margin-top:14px;

  padding:18px;

  border:1px solid var(--algae-border);
  border-radius:18px;

  background:#fff;

  box-shadow:0 12px 34px rgba(15,23,42,.05);

}

.plm-block--related{
  margin-top:18px;
}

.plm-block__title{

  margin:0 0 12px 0;

  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;

  color:rgba(44,107,74,.82);

}

.plm-block__body p{

  margin:10px 0 0 0;

  font-size:15px;
  line-height:1.72;

  color:#1f2937;

}

.plm-block__body p:first-child{
  margin-top:0;
}

.plm-block__body strong{
  color:var(--algae-text);
}


/* =========================================================
   NOTES
========================================================= */

.plm-note{

  margin-top:12px;

  padding:12px 14px;

  border:1px solid rgba(44,107,74,.12);
  border-radius:14px;

  background:rgba(44,107,74,.06);

}

.plm-note--accent{

  border-color:rgba(239,68,68,.14);
  background:rgba(239,68,68,.07);

}


/* =========================================================
   FACTS
========================================================= */

.plm-facts{

  display:grid;
  grid-template-columns:1fr;
  gap:10px;

  margin:0;
  padding:0;

}

.plm-facts div{

  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.7fr);
  gap:12px;

}

.plm-facts dt,
.plm-facts dd{
  margin:0;
}

.plm-facts dt{

  font-size:14px;
  font-weight:600;
  color:var(--algae-text-muted);

}

.plm-facts dd{

  font-size:14px;
  color:var(--algae-text);

}


/* =========================================================
   CHIP LISTS
========================================================= */

.plm-chip-list{

  display:flex;
  flex-wrap:wrap;
  gap:8px;

  margin:12px 0 0 0;
  padding:0;

  list-style:none;

}

.plm-chip{

  display:inline-flex;
  align-items:center;

  min-height:30px;

  padding:6px 10px;

  border:1px solid rgba(44,107,74,.12);
  border-radius:999px;

  background:var(--algae-accent-soft);
  color:var(--algae-accent);

  font-size:12px;
  font-weight:600;

}


/* =========================================================
   RELATED
========================================================= */

.plm-related{

  display:grid;
  grid-template-columns:1fr;
  gap:10px;

}

.plm-related__item{

  width:100%;
  text-align:left;

  padding:12px 14px;

  border:1px solid var(--algae-border);
  border-radius:14px;

  background:#fff;

  cursor:pointer;

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;

}

.plm-related__item:hover{

  transform:translateY(-1px);
  border-color:var(--algae-border-strong);
  box-shadow:var(--algae-shadow-md);

}

.plm-related__title{

  display:block;

  font-size:14px;
  font-weight:600;
  color:var(--algae-text);

}

.plm-related__meta{

  display:block;

  margin-top:3px;

  font-size:12px;
  color:var(--algae-text-muted);
  font-style:italic;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width:900px){

  .plm-hero{

    grid-template-columns:minmax(0,1.02fr) minmax(0,1.08fr);
    align-items:start;

  }

  .plm-facts{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .plm-related{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

}

/* =========================================================
   ALGAE LIBRARY — STATES / SKELETON / SPINNER / POLISH
========================================================= */

/* =========================================================
   GLOBAL UTILITIES
========================================================= */

.is-hidden{
  display:none !important;
}

[hidden]{
  display:none !important;
}


/* =========================================================
   SKELETON
========================================================= */

.skel{

  position:relative;
  overflow:hidden;

  background:rgba(148,163,184,.18);
  border-radius:12px;

}

.skel::after{

  content:"";

  position:absolute;
  inset:0;

  transform:translateX(-100%);

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.46),
    transparent
  );

  animation:alSkel 1.15s infinite;

}

@keyframes alSkel{
  100%{
    transform:translateX(100%);
  }
}

.skel-line{
  height:12px;
  margin:.55rem 0;
}

.skel-line--lg{
  height:16px;
  width:72%;
}

.skel-line--sm{
  width:46%;
}

.algae-card--skeleton{

  pointer-events:none;
  box-shadow:none;

}

.algae-card--skeleton:hover{
  transform:none;
  box-shadow:none;
}

.algae-card--skeleton .algae-card__media{
  height:100%;
  border-radius:0;
}

.algae-card--skeleton .algae-card__body{
  padding:16px 18px 18px 18px;
}


/* =========================================================
   BOTTOM SPINNER
========================================================= */

.al-bottom-spinner{

  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;

  padding:18px 0 26px;

  color:var(--algae-text-muted);
  font-size:.92rem;

}

.al-bottom-spinner[hidden]{
  display:none !important;
}

.al-bottom-spinner__dot{

  width:10px;
  height:10px;

  border-radius:999px;

  background:var(--algae-accent);

  animation:alDotPulse 1s infinite ease-in-out;

}

.al-bottom-spinner__dot:nth-child(2){
  animation-delay:.12s;
}

.al-bottom-spinner__dot:nth-child(3){
  animation-delay:.24s;
}

@keyframes alDotPulse{

  0%,80%,100%{
    transform:scale(.65);
    opacity:.45;
  }

  40%{
    transform:scale(1);
    opacity:1;
  }

}


/* =========================================================
   EMPTY / ERROR STATES
========================================================= */

.algae-empty{

  background:var(--algae-surface);

  border:1px solid var(--algae-border);
  border-radius:18px;

  padding:26px 20px;

  text-align:center;

  box-shadow:var(--algae-shadow-sm);

}

.algae-empty h3{

  margin:0 0 8px 0;

  font-size:18px;
  font-weight:700;

  color:var(--algae-text);

}

.algae-empty p{

  margin:6px 0 0 0;

  font-size:14px;
  line-height:1.65;

  color:var(--algae-text-muted);

}

.algae-empty__summary{

  margin-top:10px;
  font-size:13px;

}

.algae-empty__actions{

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;

  margin-top:18px;

}

.algae-empty__reset{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:42px;

  padding:10px 16px;

  border:none;
  border-radius:999px;

  background:var(--algae-accent);
  color:#fff;

  font-size:14px;
  font-weight:600;

  cursor:pointer;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease;

}

.algae-empty__reset:hover{

  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(44,107,74,.18);

}

.algae-empty__reset.is-secondary{

  background:#eef2f6;
  color:var(--algae-text);

}


/* =========================================================
   FILTER STATE POLISH
========================================================= */

.filter-option.is-disabled-like{
  opacity:.52;
}

.filter-option.is-zero .filter-count{
  background:#f3f4f6;
  color:#9ca3af;
}

.filter-option.is-selected .filter-count{
  background:#dcece2;
  color:var(--algae-accent);
}

.filter-section.is-open{
  padding-bottom:6px;
}


/* =========================================================
   RESULT COUNT / FILTER SUMMARY / DID-YOU-MEAN POLISH
========================================================= */

.result-count:empty{
  display:none;
}

.filter-summary[hidden],
[data-filter-summary][hidden]{
  display:none !important;
}

.did-you-mean strong{
  color:var(--algae-accent);
  font-weight:700;
}


/* =========================================================
   MODAL POLISH
========================================================= */

body.plm-modal-open{
  overflow:hidden;
}

.plm-block__body p + .plm-chip-list{
  margin-top:10px;
}

.plm-note strong{
  color:var(--algae-text);
}

.plm-hero__actions .plm-btn + .plm-btn{
  margin-left:0;
}


/* =========================================================
   CARD POLISH
========================================================= */

.algae-card__title,
.algae-card__subtitle,
.algae-card__excerpt,
.algae-card__meta{
  word-break:break-word;
}

.algae-card__title{
  line-height:1.28;
}

.algae-card__excerpt{
  min-height:0;
}

.algae-card__link:focus-visible,
.sidebar-toggle:focus-visible,
.close-button:focus-visible,
.filters__group-toggle:focus-visible,
.filter-option input[type="checkbox"]:focus-visible,
.btn:focus-visible,
.algae-empty__reset:focus-visible,
.active-filter-chip:focus-visible,
.search-suggest__item:focus-visible,
.did-you-mean__btn:focus-visible,
.plm-btn:focus-visible,
.plm-modal__close:focus-visible,
.plm-related__item:focus-visible{

  outline:3px solid rgba(44,107,74,.22);
  outline-offset:2px;

}


/* =========================================================
   SEARCH / SUGGEST POLISH
========================================================= */

.search-input-wrap{
  z-index:2;
}

.search-suggest{
  position:relative;
  z-index:3;
}

.search-suggest__item:focus-visible{
  background:#f8fafc;
}

#search::-webkit-search-cancel-button{
  appearance:none;
}


/* =========================================================
   MOBILE / TABLET RESPONSIVE
========================================================= */

@media (max-width:1024px){

  #algae-library{
    padding:22px 16px;
  }

  #algae-grid{
    gap:18px;
  }

}

@media (max-width:768px){

  .sidebar-toggle{
    min-height:40px;
    padding:9px 13px;
    font-size:14px;
  }

  .sidebar-header{
    padding:16px 16px 12px 16px;
  }

  .offcanvas-sidebar .filter-section,
  .offcanvas-sidebar .filters__chips{
    padding-left:16px;
    padding-right:16px;
  }

  .filters__foot{
    padding:14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .algae-card__body{
    padding:14px 15px 16px 15px;
  }

  .algae-card__credit{
    padding:10px 15px 14px 15px;
  }

  .plm-hero__title{
    font-size:clamp(24px, 8vw, 34px);
  }

}

@media (max-width:640px){

  #algae-library{
    padding:18px 12px;
  }

  #algae-grid{
    gap:14px;
  }

  .algae-card{
    border-radius:16px;
  }

  .algae-card__media-wrap{
    aspect-ratio:4 / 3;
  }

  .algae-card__title{
    font-size:16px;
  }

  .algae-card__excerpt{
    font-size:13px;
  }

  .filters__chips{
    gap:6px;
  }

  .active-filter-chip{
    min-height:32px;
    font-size:11px;
    padding:6px 10px;
  }

  .filter-option{
    min-height:38px;
    padding:8px 9px;
  }

  .filter-option__label{
    font-size:13px;
  }

  .filter-count{
    min-width:26px;
    height:22px;
    font-size:10px;
  }

  .search-suggest__item{
    padding:11px 12px;
  }

  .button-group{
    flex-direction:column;
  }

  .plm-chip{
    font-size:11px;
    padding:6px 9px;
  }

  .plm-block__body p{
    font-size:14px;
  }

  .plm-related__item{
    padding:11px 12px;
  }

}


/* =========================================================
   DARK MODE
========================================================= */

@media (prefers-color-scheme: dark){

  :root{

    --algae-bg:#0b1220;
    --algae-surface:#101827;

    --algae-border:#223046;
    --algae-border-strong:#32455f;

    --algae-text:#e5edf7;
    --algae-text-muted:#96a3b7;

    --algae-accent:#5ca27a;
    --algae-accent-soft:rgba(92,162,122,.14);

    --algae-chip:#1b2535;

    --algae-shadow-sm:0 2px 6px rgba(0,0,0,.22);
    --algae-shadow-md:0 8px 24px rgba(0,0,0,.28);

  }

  body{
    background:var(--algae-bg);
    color:var(--algae-text);
  }

  .sidebar-overlay{
    background:rgba(2,6,23,.62);
  }

  .offcanvas-sidebar,
  .plm-modal__dialog,
  .plm-block,
  .algae-empty,
  .algae-card{
    background:var(--algae-surface);
  }

  .search-suggest,
  .search-suggest__item,
  .filter-option:hover,
  .close-button,
  .btn--ghost,
  .algae-empty__reset.is-secondary,
  .plm-related__item{
    background:#111c2c;
  }

  #search,
  [data-algae-search]{
    background:#111c2c;
    color:var(--algae-text);
    border-color:var(--algae-border);
  }

  .sidebar-header,
  .filters__foot,
  .algae-card__credit{
    border-color:var(--algae-border);
  }

  .filter-count{
    background:#1b2535;
    color:var(--algae-text-muted);
  }

  .filter-option.is-selected{
    background:rgba(92,162,122,.12);
    border-color:rgba(92,162,122,.18);
  }

  .algae-card__chip{
    background:#1b2535;
    color:#d6e3f0;
    border-color:#2b394d;
  }

  .algae-card__chip.is-accent{
    background:rgba(92,162,122,.14);
    color:#9fd1b4;
  }

  .algae-card__chip.is-difficulty{
    background:rgba(251,191,36,.12);
    color:#f7d27a;
  }

  .algae-card__chip.is-soft{
    background:rgba(59,130,246,.12);
    color:#8eb8ff;
  }

  .plm-chip{
    background:#1a2737;
    color:#cbe6d7;
    border-color:#28433a;
  }

  .plm-note{
    background:rgba(92,162,122,.10);
    border-color:rgba(92,162,122,.18);
  }

  .plm-note--accent{
    background:rgba(239,68,68,.10);
    border-color:rgba(239,68,68,.18);
  }

  .search-suggest__item:hover,
  .plm-related__item:hover{
    background:#132033;
  }

  .skel{
    background:rgba(148,163,184,.16);
  }

  .skel::after{
    background:linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.10),
      transparent
    );
  }

}

.algae-card__credit-part{
  display:inline;
}

.filter-summary,
[data-filter-summary]{
  margin-top:10px;
  font-size:12px;
  line-height:1.5;
  color:var(--algae-text-muted);
}

#algae-sentinel,
.algae-sentinel{
  width:100%;
  height:1px;
}

.search-clear{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:none;
  border-radius:999px;
  background:#f3f4f6;
  color:var(--algae-text-muted);
  cursor:pointer;
  transition:background .16s ease, transform .16s ease;
}

.search-clear:hover{
  background:#e8ebef;
  transform:translateY(-1px);
}

.algae-card{

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;

}

.algae-card:hover{

  transform:translateY(-2px);

  box-shadow:
    0 14px 40px rgba(15,23,42,.10),
    0 2px 6px rgba(15,23,42,.04);

}

.algae-card__media-wrap{
  position:relative;
}

.algae-card__media-wrap::after{

  content:"";

  position:absolute;
  inset:0;

  background:linear-gradient(
    to top,
    rgba(0,0,0,.25),
    rgba(0,0,0,0)
  );

  opacity:.35;

  pointer-events:none;

}

.algae-card__title{
  letter-spacing:0;
}

.algae-card__excerpt{

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;

  overflow:hidden;

}

/* =========================================================
   ALGAE LIBRARY — LAYOUT / FILTERBAR / CANVAS PATCH
   (Plant-Library-like composition fix)
========================================================= */

/* -----------------------------------------
   Page canvas / header spacing
----------------------------------------- */
.al-page-header{
  padding-top: 2.2rem !important;
  padding-bottom: 1.1rem !important;
}

.al-page-header-inner{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.al-page-title{
  margin: 0 0 0.45rem 0 !important;
  line-height: 1.06 !important;
}

.al-page-subline{
  margin: 0 auto !important;
  max-width: 760px;
  line-height: 1.5 !important;
}

/* Falls Theme/Header oben etwas schiebt */
@media (min-width: 768px){
  .al-page-header{
    padding-top: 3rem !important;
  }
}

/* -----------------------------------------
   Main library canvas tighter + centered
----------------------------------------- */
#algae-library,
.algae-library{
  position: relative;
  z-index: 1;
}

#algae-library{
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding-top: 0.6rem !important;
}

/* -----------------------------------------
   Filterbar as one visual unit
----------------------------------------- */
#filterbar,
.filterbar{
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;

  width: 100% !important;
  max-width: 1440px !important;

  margin: 0 auto 0.8rem auto !important;
  padding: 0 !important;

  position: relative !important;
  z-index: 30 !important;
}

.filterbar__search{
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.filterbar__search .input-icon{
  position: absolute !important;
  left: 0.95rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#search,
[data-algae-search]{
  width: 100% !important;
  min-height: 50px !important;
  height: 50px !important;

  padding: 0.8rem 1rem 0.8rem 2.7rem !important;

  border-radius: 14px !important;
  border: 1px solid var(--algae-border) !important;

  background: #fff !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.05) !important;
}

#toggle-sidebar,
.sidebar-toggle{
  flex: 0 0 auto !important;
  min-height: 50px !important;
  height: 50px !important;

  padding: 0 1rem !important;

  border-radius: 14px !important;
  white-space: nowrap !important;

  box-shadow: 0 2px 10px rgba(15,23,42,.05) !important;
}

/* -----------------------------------------
   Search suggest / did-you-mean anchored better
----------------------------------------- */
#search-suggest.search-suggest,
.search-suggest{
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 35 !important;
}

#did-you-mean.did-you-mean,
.did-you-mean{
  position: relative;
  z-index: 5;
}

/* -----------------------------------------
   Global chips row closer to bar
----------------------------------------- */
.filterbar__chips,
#active-filter-chips{
  max-width: 1440px !important;
  margin: 0 auto 1rem auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative !important;
  z-index: 20 !important;
}

/* If no chips, don't reserve awkward space */
#active-filter-chips[hidden],
.filterbar__chips[hidden]{
  display: none !important;
}

/* -----------------------------------------
   Grid starts directly below controls
----------------------------------------- */
#algae-grid,
.algae-grid{
  position: relative;
  z-index: 1;

  margin-top: 0 !important;
  padding-top: 0 !important;

  align-items: start;
}

/* Sentinel should never create visual gap */
#algae-sentinel,
.algae-sentinel{
  width: 100% !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* -----------------------------------------
   Empty state placement
----------------------------------------- */
.algae-empty{
  max-width: 420px;
  margin: 0 !important;
}

#algae-grid:has(.algae-empty){
  justify-items: start;
}

/* Fallback for browsers without :has support:
   harmless, grid still works */
.algae-empty{
  justify-self: start;
}

/* -----------------------------------------
   Result count + footer controls hierarchy
----------------------------------------- */
.result-count{
  min-height: 1.1rem;
}

/* -----------------------------------------
   Offcanvas should sit above header/content layers
----------------------------------------- */
.sidebar-overlay{
  z-index: 9997 !important;
}

.offcanvas-sidebar{
  z-index: 9998 !important;
}

/* -----------------------------------------
   Desktop refinements
----------------------------------------- */
@media (min-width: 1025px){

  #filterbar,
  .filterbar{
    gap: 1rem !important;
  }

  #toggle-sidebar,
  .sidebar-toggle{
    min-width: 132px;
    justify-content: center;
  }
}

/* -----------------------------------------
   Tablet / mobile refinements
----------------------------------------- */
@media (max-width: 1024px){

  .al-page-header{
    padding-top: 1.6rem !important;
  }

  #algae-library{
    padding-top: 0.25rem !important;
  }
}

@media (max-width: 767px){

  .al-page-header{
    padding-top: 1rem !important;
    padding-bottom: 0.8rem !important;
  }

  .al-page-title{
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
  }

  .al-page-subline{
    max-width: 92% !important;
    font-size: 0.98rem !important;
  }

  #filterbar,
  .filterbar{
    gap: 0.5rem !important;
    margin-bottom: 0.45rem !important;
  }

  .filterbar__search{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #search,
  [data-algae-search]{
    min-height: 42px !important;
    height: 42px !important;
    padding: 0.58rem 0.8rem 0.58rem 2.15rem !important;
    font-size: 14px !important;
    border-radius: 11px !important;
  }

  .filterbar__search .input-icon{
    left: 0.72rem !important;
    width: 16px !important;
    height: 16px !important;
  }

  #toggle-sidebar,
  .sidebar-toggle{
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 0.85rem !important;
    font-size: 14px !important;
    border-radius: 11px !important;
  }

  .sidebar-toggle svg{
    width: 16px !important;
    height: 16px !important;
  }

  .filterbar__chips,
  #active-filter-chips{
    margin-bottom: 0.7rem !important;
  }

  .algae-empty{
    max-width: 100%;
  }
}

/* =========================================================
   ALGAE LIBRARY — EXACT FILTERBAR / SEARCH / DRAWER STYLES
   exported from plant-library.css and adapted to algae IDs
   IMPORTANT: place this block at the very end of algae-library.css
========================================================= */

/* -----------------------------------------
   Filterbar layer / anchor
----------------------------------------- */
#filterbar.filterbar.al-sticky-offsets,
#filterbar{
  position: sticky;
  top: 75px;
  z-index: 1100 !important;
}

#filterbar.filterbar{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1400px){
  #filterbar.filterbar{
    max-width: 1200px;
  }
}

/* -----------------------------------------
   Filterbar + search base
----------------------------------------- */
.filterbar{
  z-index: var(--pl-z-filterbar, 2147483000);
}

.filterbar .sidebar-toggle{
  min-width: 96px;
}

.filterbar__search{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: visible !important;
  z-index: var(--pl-z-filterbar, 2147483000) !important;
}

.filterbar__search .input-icon{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

#search{
  width: 100%;
  min-height: 46px;
  padding: 0.72rem 0.9rem 0.72rem 2.35rem;
  border-radius: 14px;
  border: 1px solid var(--ui-border, #e5e7eb);
  background: #fff;
}

#search:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(47,107,74,.18);
  background: #fff;
  border-color: var(--brand, #2f6b4a) !important;
}

/* Eltern müssen das Dropdown durchlassen */
#filterbar,
.filterbar,
.filterbar__search{
  overflow: visible !important;
}

/* -----------------------------------------
   Search suggest — exact plant behavior
----------------------------------------- */
#search-suggest.search-suggest{
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0;
  width: auto;
  max-height: min(320px, 60vh);
  overflow-y: auto;

  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--al-border, #e5e7eb);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.12),
    0 2px 6px rgba(15, 23, 42, 0.10);

  padding: 4px 0;

  z-index: calc(var(--pl-z-filterbar, 2147483000) + 1) !important;
}

.search-suggest .suggest-item,
#search-suggest .suggest-item{
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.55rem 0.85rem;
  display: flex;
  flex-direction: column;
  row-gap: 2px;

  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--al-text, #0f172a);

  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.search-suggest .suggest-item .suggest-main strong{
  font-weight: 700;
}

.search-suggest .suggest-item small{
  font-size: 0.75rem;
  color: var(--al-text-muted, #6b7280);
}

.search-suggest .suggest-item.is-active,
.search-suggest .suggest-item:hover,
#search-suggest .suggest-item.is-active,
#search-suggest .suggest-item:hover{
  background: #f3f4f6;
}

/* optional clear button exactly as in plant */
.search-clear{
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  font-size: 0.9rem;
  cursor: pointer;
  opacity: 0.6;
  padding: 0;
}
.search-clear:hover{
  opacity: 1;
}

/* -----------------------------------------
   Offcanvas drawer — exact plant behavior
----------------------------------------- */
#algae-filters.offcanvas-sidebar{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;

  width: min(92vw, 360px) !important;
  max-width: 360px !important;
  padding: 16px !important;
  background: var(--ui-bg, #fff) !important;

  border-left: 1px solid var(--ui-border, #e5e7eb) !important;
  border-right: 0 !important;
  border-radius: 18px 0 0 18px !important;

  z-index: 2147483646 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;

  overflow: auto !important;

  transform: translateX(100%) !important;
  transition: transform .2s ease-out !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
}
#algae-filters.offcanvas-sidebar{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(92vw, 380px) !important;
  max-width: 380px !important;
  z-index: 2147483646 !important;
  transform: translateX(100%) !important;
  transition: transform 0.22s ease !important;
}
/* -----------------------------------------
   Overlay
----------------------------------------- */
.sidebar-overlay,
#sidebar-overlay{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.35) !important;
  backdrop-filter: blur(2px) !important;
  z-index: 2147483645 !important;
}

.sidebar-overlay[hidden],
#sidebar-overlay[hidden]{
  display: none !important;
}

/* -----------------------------------------
   Sidebar header
----------------------------------------- */
#algae-filters .sidebar-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(to bottom, var(--ui-bg, #fff) 75%, transparent) !important;
  padding: 6px 0 10px !important;
  margin: -6px -2px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#algae-filters .sidebar-header h2{
  margin: 0 !important;
  font: 700 14px/1.2 system-ui !important;
  color: var(--ui-ink, #111827) !important;
}

/* -----------------------------------------
   Close button
----------------------------------------- */
#close-filters{
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--ui-ink, #111827) !important;
  font-size: 20px !important;
  cursor: pointer !important;
}
#close-filters:hover{
  background: transparent !important;
}

/* -----------------------------------------
   Sections / toggles
----------------------------------------- */
#algae-filters .filter-section{
  padding: 10px 0 !important;
  border-bottom: 1px dashed var(--ui-border, #e5e7eb) !important;
}

#algae-filters .filter-section:last-of-type{
  border-bottom: 0 !important;
}

.filters__group-toggle{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  border: 0 !important;
  background: transparent !important;
  font: 600 13px/1.2 system-ui !important;
  color: var(--ui-ink, #111827) !important;
  cursor: pointer !important;
}

#algae-filters .chev{
  width: 14px !important;
  height: 14px !important;
  opacity: .7 !important;
  transition: transform .15s ease !important;
}

#algae-filters .filter-section.is-open .chev{
  transform: rotate(180deg) !important;
}

/* neutral hover/focus exactly like plant */
#algae-filters .filters__group-toggle,
#algae-filters .filters__group-toggle:hover,
#algae-filters .filters__group-toggle:focus,
#algae-filters .filters__group-toggle:active,
#algae-filters button.filters__group-toggle:hover,
#algae-filters a.filters__group-toggle:hover{
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transform: none !important;
  outline: none !important;
  transition: none !important;
  -webkit-tap-highlight-color: transparent;
}

#algae-filters .filters__group-toggle:hover .chev{
  transform: none !important;
  opacity: .7 !important;
}

/* -----------------------------------------
   Options
----------------------------------------- */
.filters__options{
  padding: 6px 2px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}

#algae-filters .filter-section .filters__options{
  display: none !important;
}
#algae-filters .filter-section.is-open .filters__options{
  display: grid !important;
}

/* If your JS renders .filter-option rows, force them into the same compact plant rhythm */
.filter-option{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: none !important;
}

.filter-option input[type="checkbox"]{
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--ui-primary, #2f6b4a) !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.filter-option__label{
  font: 600 12px/1.2 system-ui !important;
  color: var(--ui-ink, #111827) !important;
  padding: 4px 8px !important;
  border: 1px solid var(--ui-border, #e5e7eb) !important;
  border-radius: 999px !important;
  background: #fff !important;
  flex: 0 1 auto !important;
}

.filter-count{
  font: 600 11px/1 system-ui !important;
  color: var(--ui-sub, #6b7280) !important;
  background: transparent !important;
  border: 0 !important;
  min-width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin-left: auto !important;
  border-radius: 0 !important;
}

.filter-option.is-zero .filter-option__label{
  opacity: .55 !important;
}

.filter-option.is-selected .filter-option__label{
  border-color: var(--ui-primary, #2f6b4a) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-primary, #2f6b4a) 12%, transparent) inset !important;
}

/* -----------------------------------------
   Chips
----------------------------------------- */
.filters__chips{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.filterbar__chips{
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.25rem 0.5rem;
  gap: 0.5rem;
}

/* Make active chips look like plant chips */
.active-filter-chip{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--ui-border, #e5e7eb) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--ui-ink, #111827) !important;
  font: 600 12px/1 system-ui !important;
  cursor: pointer !important;
  min-height: auto !important;
  transition: none !important;
}

/* -----------------------------------------
   Footer / result count / buttons
----------------------------------------- */
.filters__foot{
  position: sticky !important;
  bottom: -1px !important;
  margin-top: 4px !important;
  padding-top: 8px !important;
  background: linear-gradient(to top, #fff 70%, transparent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.result-count{
  font: 600 12px/1 system-ui !important;
  color: var(--ui-sub, #6b7280) !important;
}

.result-count.is-hidden{
  display: none !important;
}

.button-group{
  display: flex !important;
  gap: 8px !important;
}

.btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font: 700 12px/1 system-ui !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: background .15s ease, border-color .15s ease !important;
}

.btn--primary{
  background: var(--ui-primary, #2f6b4a) !important;
  color: #fff !important;
}
.btn--primary:hover{
  background: #14532d !important;
}

.btn--ghost{
  background: #fff !important;
  border-color: var(--ui-border, #e5e7eb) !important;
  color: #111827 !important;
}
.btn--ghost:hover{
  background: var(--ui-muted, #f3f4f6) !important;
}

/* -----------------------------------------
   Sidebar toggle exact plant colors
----------------------------------------- */
.sidebar-toggle{
  background: var(--brand, #2f6b4a) !important;
  border-color: var(--brand, #2f6b4a) !important;
  color: #fff !important;
}
.sidebar-toggle:hover{
  background: var(--brand-600, #24563c) !important;
}

/* -----------------------------------------
   Mobile search behavior exactly like plant
----------------------------------------- */
@media (max-width: 768px){
  .filterbar__search input[type="search"],
  .filterbar__search input[type="text"]{
    font-size: 1.05rem;
    padding-block: 0.8rem;
  }

  #search-suggest{
    max-height: 55vh;
  }
}

/* =========================================================
   ALGAE LIBRARY — INDEX FIX PATCH
   fixes:
   1) drawer above blur/overlay
   2) filterbar closer to header
========================================================= */

/* -----------------------------------------
   1) Drawer / overlay stacking fix
----------------------------------------- */

/* Nichts auf der Seite darf über Sidebar/Overlay liegen */
html body .sidebar-overlay,
html body #sidebar-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483645 !important;
}

html body .offcanvas-sidebar,
html body #algae-filters.offcanvas-sidebar{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;

  z-index: 2147483646 !important;
  isolation: isolate !important;
}

/* Falls Theme/Header/Canvas stacking contexts baut */
#page,
.site,
.site-content,
#content,
.elementor,
.elementor-section,
.elementor-container,
.elementor-widget,
.al-page-header,
#algae-library,
.algae-library,
#filterbar,
.filterbar{
  isolation: auto;
}

/* -----------------------------------------
   2) Header / filterbar spacing fix
----------------------------------------- */

.al-page-header{
  padding-top: 1.65rem !important;
  padding-bottom: 0.35rem !important;
}

.al-page-title{
  margin-bottom: 0.22rem !important;
}

.al-page-subline{
  margin-bottom: 0 !important;
}

#algae-library{
  padding-top: 0 !important;
}

#filterbar,
.filterbar{
  max-width: 1120px !important;
  margin: 0.2rem auto 0.8rem auto !important;
  gap: 0.7rem !important;
  align-items: center !important;
}

.filterbar__chips,
#active-filter-chips{
  max-width: 1120px !important;
  margin: 0 auto 0.7rem auto !important;
}

/* Search rail back closer to Plant */
#search,
[data-algae-search]{
  min-height: 44px !important;
  height: 44px !important;
}

#toggle-sidebar,
.sidebar-toggle{
  min-height: 44px !important;
  height: 44px !important;
}

/* Empty state should begin directly below controls */
#algae-grid,
.algae-grid{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* -----------------------------------------
   Mobile
----------------------------------------- */
@media (max-width: 767px){
  .al-page-header{
    padding-top: 1rem !important;
    padding-bottom: 0.3rem !important;
  }

  #filterbar,
  .filterbar{
    margin: 0.15rem auto 0.55rem auto !important;
  }

  .filterbar__chips,
  #active-filter-chips{
    margin-bottom: 0.55rem !important;
  }
}

/* =========================================================
   ALGAE LIBRARY — FINAL NORMALIZATION PATCH
   Ziel:
   - Filterbar optisch an Plant Library angleichen
   - Drawer sauber über Overlay/Blur
   - Grid/Card-Look harmonisieren
   - Drawer-Optionen als Pill Chips darstellen
========================================================= */

:root{
  --pl-z-filterbar: 2147483000;
  --pl-z-drawer-overlay: 2147483645;
  --pl-z-drawer: 2147483646;

  --ui-bg:#fff;
  --ui-ink:#111827;
  --ui-sub:#6b7280;
  --ui-border:#e5e7eb;
  --ui-muted:#f9fafb;
  --ui-primary:#2C6B4A;
  --ui-primary-600:#285F43;

  --card-radius:16px;
  --card-border:#e6e9ee;
  --card-shadow:0 12px 40px rgba(0,0,0,.14);
  --card-shadow-hover:0 18px 48px rgba(0,0,0,.16);
}

/* ===== Library wrapper wieder auf Plant-Library-Niveau ===== */
#algae-library{
  width:100% !important;
  max-width:none !important;
  margin:2rem auto 0 !important;
  padding:0 1rem !important;
  position:relative !important;
  overflow:visible !important;
  z-index:0 !important;
}

.algae-library{
  position:relative !important;
  z-index:0 !important;
}

/* ===== Filterbar: wieder EIN gemeinsamer Block wie Plant Library ===== */
#filterbar,
.filterbar{
  position:sticky !important;
  top:64px !important;
  z-index:var(--pl-z-filterbar) !important;

  display:flex !important;
  align-items:center !important;
  gap:12px !important;

  width:100% !important;
  max-width:none !important;

  margin:0 0 12px !important;
  padding:10px 12px !important;

  background:#fff !important;
  border:1px solid var(--ui-border) !important;
  border-radius:14px !important;
  box-shadow:0 8px 20px rgba(0,0,0,.05) !important;
}

.filterbar__search{
  position:relative !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  z-index:calc(var(--pl-z-filterbar) + 1) !important;
}

.filterbar__search .input-icon{
  position:absolute !important;
  left:10px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  opacity:.55 !important;
  z-index:2 !important;
  pointer-events:none !important;
}

#search,
#global-search,
[data-algae-search]{
  width:100% !important;
  min-height:auto !important;
  height:auto !important;

  border:1px solid var(--ui-border) !important;
  border-radius:999px !important;

  padding:10px 12px 10px 36px !important;

  background:var(--ui-muted) !important;
  box-shadow:none !important;

  font:500 14px/1.2 system-ui !important;
  color:var(--ui-ink) !important;
}

#search:focus,
#global-search:focus,
[data-algae-search]:focus{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(47,107,74,.18) !important;
  background:#fff !important;
}

#toggle-sidebar,
.sidebar-toggle,
.filterbar .sidebar-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  flex:0 0 auto !important;
  min-width:auto !important;
  min-height:auto !important;
  height:auto !important;

  padding:10px 14px !important;
  border:0 !important;
  border-radius:12px !important;

  background:var(--ui-primary) !important;
  color:#fff !important;
  box-shadow:none !important;

  font:700 14px/1 system-ui !important;
  white-space:nowrap !important;
  cursor:pointer !important;
}

#toggle-sidebar:hover,
.sidebar-toggle:hover,
.filterbar .sidebar-toggle:hover{
  background:var(--ui-primary-600) !important;
  color:#fff !important;
}

/* ===== Chips unter der Filterbar ===== */
#active-filter-chips,
.filterbar__chips,
.filters__chips{
  margin:0 0 12px !important;
  padding:0 !important;
  position:relative !important;
  z-index:10 !important;

  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}

#active-filter-chips[hidden],
.filterbar__chips[hidden],
.filters__chips[hidden]{
  display:none !important;
}

.active-filter-chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;

  padding:7px 10px !important;
  border:1px solid var(--ui-border) !important;
  border-radius:999px !important;

  background:#fff !important;
  color:var(--ui-ink) !important;
  box-shadow:0 2px 6px rgba(0,0,0,.06) !important;

  font:600 12px/1.2 system-ui !important;
  cursor:pointer !important;
}

.active-filter-chip:hover{
  border-color:#cfd5dd !important;
  background:#f8fafc !important;
}

/* ===== Grid wie Plant Library ===== */
#algae-grid,
.algae-grid{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  gap:1.5rem !important;
  align-items:stretch !important;
  margin-top:0 !important;
  padding-top:0 !important;
  position:relative !important;
  z-index:1 !important;
}

@media (max-width: 1200px){
  #algae-grid,
  .algae-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px){
  #algae-grid,
  .algae-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:.85rem !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

@media (max-width: 640px){
  #algae-grid,
  .algae-grid{
    grid-template-columns:1fr !important;
  }
}

/* ===== Cards visuell an Plant Library angleichen ===== */
.algae-card{
  display:flex !important;
  flex-direction:column !important;

  min-height:320px !important;
  overflow:hidden !important;

  background:#fff !important;
  border:1px solid var(--card-border) !important;
  border-radius:var(--card-radius) !important;
  box-shadow:var(--card-shadow) !important;

  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}

@media (hover:hover){
  .algae-card:hover{
    transform:translateY(-3px) !important;
    box-shadow:var(--card-shadow-hover) !important;
    border-color:rgba(0,0,0,.10) !important;
  }
}

.algae-card__media-wrap{
  position:relative !important;
  background:#f3f4f6 !important;
  aspect-ratio:4 / 3 !important;
}

.algae-card__media{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.algae-card__body{
  padding:16px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  flex-grow:1 !important;
  gap:8px !important;
}

.algae-card__title{
  margin:0 0 8px !important;
  text-align:center !important;
  font-weight:800 !important;
  font-size:clamp(1.1rem, 1.2vw + .9rem, 1.3rem) !important;
  line-height:1.2 !important;
  color:#38424a !important;
}

.algae-card__subtitle{
  margin:0 !important;
  text-align:center !important;
  font-size:.9rem !important;
  font-style:normal !important;
  color:#6b7280 !important;
}

.algae-card__excerpt{
  margin:0 !important;
  text-align:center !important;
  font-size:.92rem !important;
  line-height:1.5 !important;
  color:#637083 !important;
}

.algae-card__meta{
  text-align:center !important;
  font-size:.9rem !important;
  color:#637083 !important;
}

.algae-card__chips{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:8px !important;
  margin-top:6px !important;
}

.algae-card__chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-height:28px !important;
  padding:4px 10px !important;
  border-radius:999px !important;

  background:#f5f7f6 !important;
  color:#1f2937 !important;

  font:600 12px/1.2 system-ui !important;
}

.algae-card__chip.is-accent{
  background:#e8f2ec !important;
  color:#2C6B4A !important;
}

.algae-card__chip.is-difficulty{
  background:#eef7ff !important;
  color:#1f4f82 !important;
}

/* ===== Drawer immer über Blur / Content ===== */
html body .sidebar-overlay,
html body #sidebar-overlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,.35) !important;
  backdrop-filter:blur(2px) !important;
  z-index:var(--pl-z-drawer-overlay) !important;
}

html body .sidebar-overlay[hidden],
html body #sidebar-overlay[hidden]{
  display:none !important;
}

html body .offcanvas-sidebar,
html body #algae-filters.offcanvas-sidebar{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;

  width:min(92vw, 360px) !important;
  max-width:360px !important;
  padding:16px !important;

  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;

  background:#fff !important;
  border-left:1px solid var(--ui-border) !important;
  border-right:0 !important;
  border-radius:18px 0 0 18px !important;

  overflow:auto !important;
  transform:translateX(100%) !important;
  transition:transform .2s ease-out !important;

  z-index:var(--pl-z-drawer) !important;
  will-change:transform !important;
  backface-visibility:hidden !important;
}

html body .offcanvas-sidebar.active,
html body #algae-filters.offcanvas-sidebar.active{
  transform:translateX(0) !important;
}

#algae-filters .sidebar-header,
.offcanvas-sidebar .sidebar-header{
  position:sticky !important;
  top:0 !important;
  z-index:2 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  background:linear-gradient(to bottom, #fff 75%, transparent) !important;
  padding:6px 0 10px !important;
  margin:-6px -2px 8px !important;
}

#algae-filters .sidebar-header h2,
.offcanvas-sidebar .sidebar-header h2{
  margin:0 !important;
  font:700 14px/1.2 system-ui !important;
  color:var(--ui-ink) !important;
}

/* ===== Drawer-Sections: technisch raus, kuratiert rein ===== */
#algae-filters .filter-section,
.offcanvas-sidebar .filter-section{
  padding:10px 0 !important;
  border-bottom:1px dashed var(--ui-border) !important;
}

#algae-filters .filter-section:last-of-type,
.offcanvas-sidebar .filter-section:last-of-type{
  border-bottom:0 !important;
}

#algae-filters .filters__group-toggle,
.offcanvas-sidebar .filters__group-toggle{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;

  padding:6px 0 !important;
  border:0 !important;
  background:transparent !important;

  font:600 13px/1.2 system-ui !important;
  color:var(--ui-ink) !important;
  cursor:pointer !important;
}

#algae-filters .chev,
.offcanvas-sidebar .chev{
  display:none !important;
}

#algae-filters .filters__options,
.offcanvas-sidebar .filters__options{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  padding:8px 0 2px !important;
}

#algae-filters .opt,
.offcanvas-sidebar .opt{
  position:relative !important;
  display:block !important;
  margin:0 !important;
}

#algae-filters .opt input[type="checkbox"],
.offcanvas-sidebar .opt input[type="checkbox"]{
  position:absolute !important;
  inset:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

#algae-filters .opt .filter-option__label,
#algae-filters .opt span,
.offcanvas-sidebar .opt .filter-option__label,
.offcanvas-sidebar .opt span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-height:34px !important;
  padding:8px 12px !important;
  border:1px solid var(--ui-border) !important;
  border-radius:999px !important;

  background:#fff !important;
  color:var(--ui-ink) !important;
  box-shadow:0 2px 6px rgba(0,0,0,.04) !important;

  font:600 12px/1.2 system-ui !important;
  white-space:nowrap !important;
  cursor:pointer !important;

  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;
}

#algae-filters .opt input[type="checkbox"]:checked + span,
#algae-filters .opt input[type="checkbox"]:checked + .filter-option__label,
.offcanvas-sidebar .opt input[type="checkbox"]:checked + span,
.offcanvas-sidebar .opt input[type="checkbox"]:checked + .filter-option__label{
  background:#e8f2ec !important;
  border-color:#b8d3c2 !important;
  color:#214E37 !important;
  box-shadow:0 2px 8px rgba(44,107,74,.12) !important;
}

#algae-filters .opt:hover span,
#algae-filters .opt:hover .filter-option__label,
.offcanvas-sidebar .opt:hover span,
.offcanvas-sidebar .opt:hover .filter-option__label{
  background:#f8fafc !important;
  border-color:#d5dbe3 !important;
}

/* versteckte technische Gruppen */
#algae-filters .filter-section.is-algae-hidden,
.offcanvas-sidebar .filter-section.is-algae-hidden{
  display:none !important;
}

/* kuratierte offene Gruppen */
#algae-filters .filter-section.is-algae-curated,
.offcanvas-sidebar .filter-section.is-algae-curated{
  display:block !important;
}

#algae-filters .filter-section.is-algae-curated .filters__options,
.offcanvas-sidebar .filter-section.is-algae-curated .filters__options{
  display:flex !important;
}

/* ===== Mobile ===== */
@media (max-width:767px){
  #algae-library{
    margin-top:1.25rem !important;
    padding:0 .6rem !important;
  }

  #filterbar,
  .filterbar{
    gap:.5rem !important;
    padding:8px 10px !important;
    margin-bottom:8px !important;
    border-radius:12px !important;
  }

  #search,
  #global-search,
  [data-algae-search]{
    padding:.55rem .75rem .55rem 2rem !important;
    font-size:14px !important;
  }

  .filterbar__search .input-icon{
    left:.65rem !important;
  }

  #toggle-sidebar,
  .sidebar-toggle,
  .filterbar .sidebar-toggle{
    padding:9px 12px !important;
    font-size:13px !important;
    border-radius:10px !important;
  }

  #active-filter-chips,
  .filterbar__chips,
  .filters__chips{
    gap:6px !important;
    margin-bottom:10px !important;
  }

  .active-filter-chip{
    padding:6px 9px !important;
    font-size:11.5px !important;
  }
}

/* =========================================================
   ALGAE LIBRARY — DRAWER / OVERLAY Z-INDEX FIX
========================================================= */

/* Filterbar bewusst unter Drawer halten */
#filterbar,
.filterbar{
  position: sticky !important;
  top: 64px !important;
  z-index: 1000 !important;
}

/* Alles innerhalb der Library darf keinen höheren Layer erzwingen */
#algae-library,
.algae-library,
.al-page,
.al-page-inner,
.al-page-content,
.al-grid-wrap,
#algae-grid,
.algae-grid{
  position: relative !important;
  z-index: auto !important;
}

/* Overlay MUSS global über dem Content liegen */
html body #sidebar-overlay,
html body .sidebar-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483645 !important;
  background: rgba(17, 24, 39, 0.26) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Drawer MUSS über Overlay + Filterbar liegen */
html body #algae-filters,
html body .offcanvas-sidebar{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;

  width: min(92vw, 380px) !important;
  max-width: 380px !important;
  margin: 0 !important;

  z-index: 2147483646 !important;

  transform: translateX(100%) !important;
  transition: transform 0.22s ease !important;

  background: #fff !important;
  border-left: 1px solid #e5e7eb !important;
  border-radius: 18px 0 0 18px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  box-shadow: -24px 0 60px rgba(0,0,0,.18) !important;
  will-change: transform !important;
}

/* offener Zustand */
html body #algae-filters.active,
html body .offcanvas-sidebar.active{
  transform: translateX(0) !important;
}

/* hidden wirklich unsichtbar */
html body #sidebar-overlay[hidden],
html body .sidebar-overlay[hidden],
html body #algae-filters[hidden],
html body .offcanvas-sidebar[hidden]{
  display: none !important;
}

/* =========================================================
   ALGAE LIBRARY — FINAL DRAWER STACK FIX
========================================================= */

/* Filterbar bewusst niedrig halten */
#filterbar,
.filterbar{
  position: sticky !important;
  top: 64px !important;
  z-index: 100 !important;
}

/* Wrapper dürfen keinen eigenen Layer erzwingen */
#algae-library,
.algae-library,
.al-page,
.al-page-inner,
.al-page-content,
.al-grid-wrap,
#algae-grid,
.algae-grid{
  z-index: auto !important;
}

/* Overlay */
html body #sidebar-overlay,
html body .sidebar-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
  background: rgba(17, 24, 39, 0.28) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Drawer */
html body #algae-filters,
html body .offcanvas-sidebar{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;

  width: min(92vw, 380px) !important;
  max-width: 380px !important;
  margin: 0 !important;

  z-index: 9999 !important;

  background: #fff !important;
  border-left: 1px solid #e5e7eb !important;
  border-radius: 18px 0 0 18px !important;
  box-shadow: -24px 0 60px rgba(0,0,0,.18) !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  transform: translateX(100%) !important;
  transition: transform 0.22s ease !important;
}

/* offener Zustand */
html body #algae-filters.active,
html body .offcanvas-sidebar.active{
  transform: translateX(0) !important;
}

/* hidden-Zustände sauber halten */
html body #sidebar-overlay[hidden],
html body .sidebar-overlay[hidden],
html body #algae-filters[hidden],
html body .offcanvas-sidebar[hidden]{
  display: none !important;
}

/* ==========================================
   FIX: Global Command Overlay deaktivieren,
   solange der Algae Drawer offen ist
========================================== */

body.sidebar-open #alCmdkOverlay{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
}

/* eigenes Sidebar-Overlay */
body.sidebar-open #sidebar-overlay,
body.sidebar-open .sidebar-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9500 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: rgba(17, 24, 39, 0.28) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Drawer immer ganz oben */
body.sidebar-open #algae-filters,
body.sidebar-open .offcanvas-sidebar{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  z-index: 10000 !important;
}

/* ==========================================
   Algae Library – Search bar width fix
   (match Plant Library layout)
========================================== */

#filterbar.filterbar{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}

/* ==========================================
   Algae Library – Filterbar same width as Plant Library
========================================== */


/* eigentliche Filterbar */
.elementor-element-469cda1 #filterbar.filterbar,
#filterbar.filterbar{
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}


/* === FINAL: simple, perfectly round, real off-canvas close === */
:root{
  --plm-close-size:   44px;   /* Touch-sicher, gerne 48px wenn größer gewünscht */
  --plm-close-offset: 10px;   /* Extra-Abstand über Eck hinaus */
}

/* Modal-Rand darf überstehen */
.plm{ overflow: visible !important; }

/* hohe Spezifität: direkter Button-Nachkomme des Modals */
.plm > .plm__close.plm__close--float{
  position: absolute !important;
  z-index: 1002 !important;

  /* echte Off-Canvas-Position:
     Center des Buttons liegt genau in der Modalecke,
     + zusätzlicher Offset schiebt ihn komplett nach außen. */
  top:   calc(-1 * ((var(--plm-close-size) / 2) + var(--plm-close-offset))) !important;
  right: calc(-1 * ((var(--plm-close-size) / 2) + var(--plm-close-offset))) !important;

  width: var(--plm-close-size) !important;
  height: var(--plm-close-size) !important;
  border-radius: 50% !important;      /* „ordentlich rund“ */
  background: #fff !important;
  border: 1px solid var(--plm-border, #e5e7eb) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;

  /* Icon wirklich zentriert */
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  appearance: none !important;

  color: #111827 !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.plm > .plm__close.plm__close--float:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.14) !important;
}
.plm > .plm__close.plm__close--float:active{ transform:none; opacity:.95; }
.plm > .plm__close.plm__close--float:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--plm-brand, #2C6B4A) 45%, transparent) !important;
  outline-offset: 2px !important;
}

/* SVG sauber mittig halten */
.plm > .plm__close.plm__close--float svg{
  width: 20px !important;
  height: 20px !important;
  display: block !important;     /* verhindert Zeilenbox-Shift */
}

/* Mobile: innen andocken, damit nichts abgeschnitten wird */
@media (max-width:640px){
  .plm > .plm__close.plm__close--float{
    top: 10px !important;
    right: 10px !important;
  }
}

/* Dark Mode schlicht */
@media (prefers-color-scheme: dark){
  .plm > .plm__close.plm__close--float{
    background:#0f1620 !important;
    border-color:#1f2937 !important;
    color:#e5e7eb !important;
    box-shadow:0 10px 24px rgba(0,0,0,.5) !important;
  }
}

.filters__group-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.filters__chevron{
  width:10px;
  height:10px;
  margin-left:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .18s ease;
  flex:0 0 auto;
}

.filter-section.is-open .filters__chevron{
  transform:rotate(-135deg);
}

.algae-card__media-wrap,
.algae-modal-card__image-wrap{
  position:relative !important;
}

.algae-modal-card__image-wrap .algae-upload-hint--empty{
  position:absolute;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  z-index:20;
  max-width:calc(100% - 24px);
  width:max-content;
  pointer-events:none;
}

.algae-modal-card__image-wrap .algae-upload-hint--empty > a.js-open-submit-photo{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1.1;
  color:rgba(24,52,36,.9);
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  text-decoration:none;
}

.algae-modal-card__image-wrap .algae-upload-hint--empty > a.js-open-submit-photo:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}

.algae-modal-card__image-wrap .algae-upload-hint--empty .sprout{
  font-size:12px;
  line-height:1;
  flex:0 0 auto;
}

.algae-upload-hint--below{
  display:flex;
  justify-content:center;
  margin-top:10px;
}

.algae-upload-hint--below > a.js-open-submit-photo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1.1;
  color:rgba(24,52,36,.9);
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  text-decoration:none;
}

.algae-upload-hint--below > a.js-open-submit-photo:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}

.algae-upload-hint--below .sprout{
  font-size:12px;
  line-height:1;
  flex:0 0 auto;
}

/* =========================================
   ALGAE MODAL — CONTENT HEIGHT / SAFE TOP
========================================= */

.plm-overlay{
  position:fixed !important;
  inset:0 !important;
  z-index:10050 !important;

  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;

  padding-top:88px !important;
  padding-right:16px !important;
  padding-bottom:32px !important;
  padding-left:16px !important;

  box-sizing:border-box !important;
}

@media (min-width: 641px){
  .plm{
    width:min(1100px, calc(100vw - 32px)) !important;
    max-height:calc(100dvh - 120px) !important;
    overflow:hidden !important;
    border-radius:18px !important;
  }

  .plm__body{
    overflow:auto !important;
    overscroll-behavior:contain !important;
    min-height:0 !important;
    max-height:calc(100dvh - 160px) !important;
  }
}

  .plm-tabs__panels{
    max-height: none !important;
    overflow: visible !important;
    min-height: 0 !important;
  }

  .plm-tabs,
  .plm-tabs__rail{
    overflow: visible !important;
  }

@media (max-width: 640px){
  .plm{
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .plm__body{
    overflow: auto !important;
    min-height: 0 !important;
  }
}

.plm-submit-photo{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.plm-submit-photo__intro{
  margin:0;
  font-size:.96rem;
  line-height:1.6;
  color:var(--algae-text-muted);
}

.plm-submit-photo__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.plm-submit-photo__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1.1;
  color:rgba(24,52,36,.9);
  text-decoration:none;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}

.plm-submit-photo__cta:hover{
  text-decoration:underline;
}

.plm-upload-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:4px;
}

.plm-upload-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.plm-upload-field label{
  font-size:13px;
  font-weight:600;
  color:var(--algae-text);
}

.plm-upload-field input,
.plm-upload-field textarea{
  width:100%;
  border:1px solid var(--algae-border);
  border-radius:12px;
  background:#fff;
  color:var(--algae-text);
  padding:10px 12px;
  font-size:14px;
  line-height:1.4;
  box-sizing:border-box;
}

.plm-upload-field textarea{
  resize:vertical;
  min-height:96px;
}

.plm-upload-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:10px 14px;
  border:none;
  border-radius:12px;
  background:var(--algae-accent);
  color:#fff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

.plm-upload-result{
  font-size:13px;
  line-height:1.5;
  color:var(--algae-text-muted);
  min-height:1.2em;
}

/* Fix: Search suggest background should be white */

#search-suggest,
.search-suggest{
  background:#ffffff !important;
}

#search-suggest .suggest-item{
  background:#ffffff !important;
}

#search-suggest .suggest-item:hover{
  background:#f3f4f6 !important;
}

#search-suggest .suggest-main{
  color:#111827 !important;
}

#search-suggest small{
  color:#6b7280 !important;
}

/* =========================================
   ALGAE SUBMIT PHOTO — COPY PLANT BLOCK
========================================= */

.plm-upload{
  display:block !important;
}

.plm-upload .plm__secTitle{
  margin:0 0 12px !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#2f6f57 !important;
}

.plm-up__grid{
  display:grid !important;
  grid-template-columns:minmax(160px, 1fr) minmax(260px, 1.2fr) !important;
  gap:16px !important;
  align-items:start !important;
}

.plm-up__drop{
  position:relative !important;
  min-height:260px !important;
  border:1px dashed rgba(15,23,42,.12) !important;
  border-radius:16px !important;
  background:#fbfcfd !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:18px !important;
  cursor:pointer !important;
  overflow:hidden !important;
}

.plm-up__drop.is-drag{
  border-color:#2f6f57 !important;
  background:#f3faf6 !important;
}

.plm-up__drop{
  position:relative !important;
}

.plm-up__file{
  position:absolute !important;
  inset:0 !important;
  opacity:0 !important;
  width:100% !important;
  height:100% !important;
  cursor:pointer !important;
  z-index:2 !important;
}

.plm-up__hint,
.plm-up__preview{
  position:relative !important;
  z-index:1 !important;
  pointer-events:none !important;
}

.plm-up__drop.is-drag{
  border-color:#2f6f57 !important;
  background:#f3faf6 !important;
}

.plm-up__hint{
  font-size:14px !important;
  line-height:1.5 !important;
  color:#64748b !important;
}

.plm-up__hint strong{
  color:#334155 !important;
}

.plm-up__preview{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.plm-up__form{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.plm-up__row{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
}

.plm-up__row > span{
  font-size:13px !important;
  font-weight:600 !important;
  color:#334155 !important;
}

.plm-up__input{
  width:100% !important;
  min-height:42px !important;
  padding:10px 12px !important;
  border:1px solid rgba(15,23,42,.12) !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#111827 !important;
  font-size:14px !important;
  line-height:1.4 !important;
  box-sizing:border-box !important;
}

textarea.plm-up__input{
  min-height:110px !important;
  resize:vertical !important;
}

.plm-up__input.is-invalid{
  border-color:#dc2626 !important;
  box-shadow:0 0 0 3px rgba(220,38,38,.08) !important;
}

.plm-up__agree{
  flex-direction:row !important;
  align-items:flex-start !important;
  gap:10px !important;
}

.plm-up__agree input{
  margin-top:3px !important;
}

.plm-up__actions{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:10px !important;
}

.plm__btn.plm__btn--primary{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  padding:10px 14px !important;
  border:none !important;
  border-radius:12px !important;
  background:#2f6f57 !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:700 !important;
  cursor:pointer !important;
}

.plm__btn.plm__btn--primary[disabled]{
  opacity:.45 !important;
  cursor:not-allowed !important;
}

.plm-up__progress{
  width:100% !important;
  height:8px !important;
  border-radius:999px !important;
  background:#eef2f7 !important;
  overflow:hidden !important;
}

.plm-up__bar{
  height:100% !important;
  background:#2f6f57 !important;
  transition:width .2s ease !important;
}

.plm-up__msg{
  font-size:13px !important;
  line-height:1.45 !important;
  min-height:1.2em !important;
}

.plm-up__contributorsNote{
  font-size:12px !important;
  line-height:1.5 !important;
  color:#64748b !important;
}

.plm-up__contributorsNote a{
  color:#2f6f57 !important;
  text-decoration:none !important;
  font-weight:600 !important;
}

.plm-up__contributorsNote a:hover{
  text-decoration:underline !important;
}

@media (max-width: 840px){
  .plm-up__grid{
    grid-template-columns:1fr !important;
  }

  .plm-up__drop{
    min-height:220px !important;
  }
}

/* Search suggest force white */
#search-suggest,
#search-suggest.search-suggest,
.search-suggest{
  background:#fff !important;
}

#search-suggest .suggest-item,
.search-suggest .suggest-item,
#search-suggest button.suggest-item,
.search-suggest button.suggest-item{
  display:flex !important;
  width:100% !important;
  background:#fff !important;
  background-color:#fff !important;
  color:#111827 !important;
  border:0 !important;
  box-shadow:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}

#search-suggest .suggest-item:hover,
#search-suggest .suggest-item.is-active,
.search-suggest .suggest-item:hover,
.search-suggest .suggest-item.is-active{
  background:#f3f4f6 !important;
  background-color:#f3f4f6 !important;
}

#search-suggest .suggest-item small,
.search-suggest .suggest-item small{
  color:#6b7280 !important;
}

/* =========================================================
   FORCE WHITE SEARCH SUGGEST DROPDOWN
========================================================= */

#search-suggest,
.search-suggest{
  background:#fff !important;
  background-color:#fff !important;
}

#search-suggest .search-suggest__item,
.search-suggest .search-suggest__item,
#search-suggest button.search-suggest__item,
.search-suggest button.search-suggest__item{
  all: unset !important;
  box-sizing: border-box !important;

  display: block !important;
  width: 100% !important;

  padding: 12px 14px !important;

  background: #fff !important;
  background-color: #fff !important;
  color: #111827 !important;

  border: none !important;
  border-bottom: 1px solid #f0f2f5 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  text-align: left !important;
  cursor: pointer !important;
}

#search-suggest .search-suggest__item:last-child,
.search-suggest .search-suggest__item:last-child{
  border-bottom: none !important;
}

#search-suggest .search-suggest__item:hover,
#search-suggest .search-suggest__item:focus,
#search-suggest .search-suggest__item:active,
#search-suggest .search-suggest__item.is-active,
.search-suggest .search-suggest__item:hover,
.search-suggest .search-suggest__item:focus,
.search-suggest .search-suggest__item:active,
.search-suggest .search-suggest__item.is-active{
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #111827 !important;
}

#search-suggest .search-suggest__title,
.search-suggest .search-suggest__title{
  display:block !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:#111827 !important;
}

#search-suggest .search-suggest__meta,
.search-suggest .search-suggest__meta{
  display:block !important;
  margin-top:2px !important;
  font-size:12px !important;
  font-style:italic !important;
  color:#6b7280 !important;
}

/* =========================================================
   ALGAE LIBRARY - PLANT PARITY ACTIONS / IMAGE STATES
========================================================= */

.algae-card{
  position:relative !important;
}

.algae-card__media-wrap{
  position:relative !important;
  overflow:hidden !important;
}

.algae-card__media-link{
  display:block;
  width:100%;
  height:100%;
  color:inherit;
  text-decoration:none;
}

.algae-card__media-link:focus-visible{
  outline:3px solid rgba(44,107,74,.24);
  outline-offset:-3px;
}

.algae-card-actions{
  position:absolute;
  top:10px;
  right:10px;
  z-index:40;
  display:flex;
  align-items:center;
  gap:8px;
}

.algae-card-action{
  appearance:none;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.96);
  color:#0f172a;
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-shadow:0 8px 18px rgba(15,23,42,.16);
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}

.algae-card-action:hover,
.algae-card-action:focus-visible{
  transform:translateY(-1px);
  background:#fff;
  box-shadow:0 10px 22px rgba(15,23,42,.22);
}

.algae-card-action:focus-visible{
  outline:2px solid rgba(44,107,74,.34);
  outline-offset:2px;
}

.algae-card-action__icon,
.algae-card-action__icon svg{
  display:block;
  width:18px;
  height:18px;
}

.algae-save-toggle.is-saved{
  color:var(--ui-primary, #2C6B4A);
}

.algae-save-toggle.is-saved .al-fillable{
  fill:currentColor;
}

.algae-card__media--empty{
  display:grid !important;
  place-items:center !important;
  background:
    linear-gradient(135deg, rgba(44,107,74,.10), rgba(148,163,184,.16)),
    #f8fafc !important;
  color:#64748b;
}

.algae-card__media-empty-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(148,163,184,.28);
  color:#64748b;
  font:700 12px/1 system-ui;
}

.algae-card--no-image .algae-card__media-wrap::after{
  opacity:0 !important;
}

.algae-card .algae-card__credit{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  padding:10px 16px 14px;
  border-top:1px solid rgba(148,163,184,.22);
  color:#64748b;
  font-size:.78rem;
  line-height:1.4;
}

.algae-card .algae-card__credit a{
  color:inherit;
  text-decoration:none;
}

.algae-card .algae-card__credit a:hover{
  text-decoration:underline;
}

.algae-card__credit-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(44,107,74,.08);
  color:#174330;
  font:800 11px/1 system-ui;
  text-transform:uppercase;
}

.algae-card__credit.is-community .algae-card__credit-badge{
  background:rgba(59,130,246,.08);
  color:#1d4ed8;
}

.algae-card__credit-dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:currentColor;
}

.algae-card__credit-copy{
  min-width:0;
}

.plm .algae-card--modal{
  width:100%;
  min-height:0 !important;
  border-radius:18px !important;
  box-shadow:none !important;
  transform:none !important;
  cursor:default !important;
}

.plm .algae-card--modal:hover{
  transform:none !important;
  box-shadow:none !important;
}

.plm .algae-card--modal .algae-card__media-wrap{
  aspect-ratio:4 / 3 !important;
  border-radius:18px !important;
}

.plm .algae-card--modal .algae-card__media{
  object-fit:contain !important;
  background:#f8fafc !important;
}

.plm .algae-card--modal .algae-card__body{
  padding:16px 0 0 !important;
  justify-content:flex-start !important;
  text-align:left !important;
}

.plm .algae-card--modal .algae-card__title,
.plm .algae-card--modal .algae-modal-card__subtitle,
.plm .algae-card--modal .algae-modal-card__excerpt{
  text-align:left !important;
}

.plm .algae-card--modal .algae-card__chips,
.plm .algae-card--modal .algae-modal-card__chips{
  justify-content:flex-start !important;
}

@media (max-width:640px){
  .algae-card-actions{
    top:8px;
    right:8px;
  }

  .algae-card-action{
    width:32px;
    height:32px;
  }

  .plm .algae-card--modal .algae-card__media-wrap{
    max-height:42vh;
  }
}

/* =========================================================
   ALGAE LIBRARY - PARITY FIXES FOR ACTIONS / MODAL / TABS
========================================================= */

html body .plm-overlay{
  z-index:2147483646 !important;
  min-height:100dvh !important;
}

html body.plm-modal-open{
  overflow:hidden !important;
}

html body.plm-modal-open .plm-overlay{
  pointer-events:auto !important;
}

html body .plm{
  z-index:1 !important;
}

.algae-card .algae-card-actions,
.algae-card-actions{
  z-index:1000 !important;
}

.algae-card .algae-card-actions .algae-card-action,
.algae-card-action{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  padding:0 !important;
  border-radius:999px !important;
  border:1px solid rgba(15,23,42,.14) !important;
  background:rgba(255,255,255,.98) !important;
  color:#174330 !important;
  box-shadow:0 9px 22px rgba(15,23,42,.18) !important;
  transform:none !important;
  cursor:pointer !important;
}

.algae-card .algae-card-actions .algae-card-action:hover,
.algae-card .algae-card-actions .algae-card-action:focus-visible,
.algae-card-action:hover,
.algae-card-action:focus-visible{
  background:#fff !important;
  color:#123c29 !important;
  transform:translateY(-1px) !important;
  box-shadow:0 12px 26px rgba(15,23,42,.24) !important;
}

.algae-card-action:focus-visible{
  outline:2px solid rgba(44,107,74,.38) !important;
  outline-offset:2px !important;
}

.algae-card-action__icon,
.algae-card-action__icon svg{
  display:block !important;
  width:19px !important;
  height:19px !important;
  overflow:visible !important;
  pointer-events:none !important;
}

.algae-card-action .al-fillable{
  fill:transparent !important;
  stroke:currentColor !important;
  stroke-width:2.2 !important;
  vector-effect:non-scaling-stroke;
}

.algae-save-toggle.is-saved{
  background:#2c6b4a !important;
  border-color:#2c6b4a !important;
  color:#fff !important;
}

.algae-save-toggle.is-saved:hover,
.algae-save-toggle.is-saved:focus-visible{
  background:#245a3e !important;
  border-color:#245a3e !important;
  color:#fff !important;
}

.algae-save-toggle.is-saved .al-fillable{
  fill:currentColor !important;
  stroke:currentColor !important;
}

html body .plm > .plm__close.plm__close--float{
  z-index:2147483647 !important;
}

html body .plm .algae-card--modal .algae-card-actions--modal{
  z-index:60 !important;
}

html body .plm .plm-tabs{
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border-bottom:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

html body .plm .plm-tabs__rail{
  position:sticky !important;
  top:0 !important;
  z-index:20 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 14px !important;
  padding:8px 0 !important;
  border-bottom:1px solid rgba(148,163,184,.28) !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
  background:linear-gradient(to bottom, #fff 82%, rgba(255,255,255,.94)) !important;
  box-shadow:0 8px 18px rgba(255,255,255,.86) !important;
}

html body .plm .plm-tabs__rail::-webkit-scrollbar{
  display:none !important;
}

html body .plm .plm-tabs__btn{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 14px !important;
  margin:0 !important;
  border:1px solid rgba(148,163,184,.34) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#111827 !important;
  box-shadow:none !important;
  font:700 12px/1 system-ui !important;
  white-space:nowrap !important;
  text-align:center !important;
}

html body .plm .plm-tabs__btn:hover,
html body .plm .plm-tabs__btn:focus-visible{
  background:#f8fafc !important;
  color:#111827 !important;
  border-color:rgba(44,107,74,.26) !important;
}

html body .plm .plm-tabs__btn.is-active,
html body .plm .plm-tabs__btn[aria-selected="true"]{
  background:#2c6b4a !important;
  border-color:#2c6b4a !important;
  color:#fff !important;
}

html body .plm .plm-tabs__indicator{
  display:none !important;
}

html body .plm .plm-tabs__panels{
  padding:12px 0 0 !important;
  max-height:none !important;
  overflow:visible !important;
  min-height:0 !important;
  contain:layout paint;
}

@media (max-width:640px){
  html body .plm-overlay{
    padding:0 !important;
    align-items:stretch !important;
    overflow:hidden !important;
  }

  html body .plm{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
  }

  html body .plm__body{
    height:100dvh !important;
    max-height:100dvh !important;
    padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important;
    border-radius:0 !important;
    overflow:auto !important;
    overscroll-behavior:contain !important;
  }

  html body .plm .algae-card--modal .algae-card-actions--modal{
    top:10px !important;
    left:10px !important;
    right:auto !important;
  }

  html body .plm .plm-tabs{
    margin:0 !important;
    padding:0 !important;
  }

  html body .plm .plm-tabs__rail{
    top:0 !important;
    gap:8px !important;
    margin-bottom:10px !important;
    padding:8px 0 !important;
  }

  html body .plm .plm-tabs__btn{
    height:32px !important;
    min-height:32px !important;
    padding:0 11px !important;
    font:700 12px/1 system-ui !important;
  }

  .algae-card .algae-card-actions .algae-card-action,
  .algae-card-action{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }
}

/* =========================================================
   ALGAE LIBRARY - FINAL PLANT MODAL / SAVED PARITY
========================================================= */

html body .plm.plm-like{
  width:min(960px, 92vw) !important;
  max-height:calc(100dvh - 48px) !important;
  border-radius:16px !important;
  box-shadow:0 18px 50px rgba(0,0,0,.18) !important;
}

html body .plm.plm-like .plm__body{
  align-items:start !important;
  overflow:auto !important;
  overscroll-behavior:contain !important;
}

html body .plm .algae-card-action[disabled],
html body .algae-card-action[disabled]{
  cursor:wait !important;
  opacity:.72 !important;
}

@media (min-width:900px){
  html body .plm-like .plm__body{
    grid-template-columns:320px minmax(0, 1fr) !important;
    gap:24px !important;
    padding:18px 20px !important;
  }

  html body .plm-like .plm__media{
    position:sticky !important;
    top:18px !important;
    align-self:start !important;
  }
}

html body .plm .plm-tabs{
  position:sticky !important;
  top:0 !important;
  z-index:20 !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border-bottom:1px solid rgba(148,163,184,.28) !important;
  background:linear-gradient(to bottom, #fff 88%, rgba(255,255,255,.92)) !important;
  box-shadow:none !important;
  overflow:visible !important;
}

html body .plm .plm-tabs__rail{
  position:relative !important;
  top:auto !important;
  z-index:21 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:flex-end !important;
  gap:18px !important;
  margin:0 0 14px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
}

html body .plm .plm-tabs__btn{
  position:relative !important;
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 0 12px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#64748b !important;
  box-shadow:none !important;
  font:600 13px/1.2 system-ui !important;
  white-space:nowrap !important;
  text-align:left !important;
}

html body .plm .plm-tabs__btn::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-1px !important;
  height:2px !important;
  border-radius:999px !important;
  background:transparent !important;
}

html body .plm .plm-tabs__btn:hover,
html body .plm .plm-tabs__btn:focus-visible{
  background:transparent !important;
  color:#111827 !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

html body .plm .plm-tabs__btn.is-active,
html body .plm .plm-tabs__btn[aria-selected="true"]{
  background:transparent !important;
  border-color:transparent !important;
  color:#111827 !important;
  font-weight:700 !important;
}

html body .plm .plm-tabs__btn.is-active::after,
html body .plm .plm-tabs__btn[aria-selected="true"]::after{
  background:#2c6b4a !important;
}

html body .plm .plm-tabs__indicator{
  display:none !important;
}

html body .plm .plm-tabs__panels{
  padding:12px 0 0 !important;
  max-height:none !important;
  overflow:visible !important;
  min-height:0 !important;
}

@media (max-width:640px){
  html body .plm.plm-like{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
  }

  html body .plm-like .plm__body{
    height:100dvh !important;
    max-height:100dvh !important;
    padding:12px 12px calc(92px + env(safe-area-inset-bottom)) !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  html body .plm .plm-tabs__rail{
    gap:16px !important;
    margin-bottom:12px !important;
    padding:0 !important;
  }

  html body .plm .plm-tabs__btn{
    padding:0 0 10px !important;
    font:600 13px/1.1 system-ui !important;
  }
}

/* =========================================================
   ALGAE LIBRARY - FINAL CARD / BOOKMARK / PLACEHOLDER PARITY
========================================================= */

#algae-grid,
.algae-grid{
  gap:.85rem !important;
  min-height:1100px !important;
  align-content:start !important;
  align-items:start !important;
}

.algae-card{
  border-radius:18px !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 6px 20px rgba(0,0,0,.06) !important;
}

@media (hover:hover){
  .algae-card:hover{
    transform:translateY(-2px) !important;
    box-shadow:
      0 4px 10px rgba(0,0,0,.06),
      0 12px 30px rgba(0,0,0,.10) !important;
  }
}

.algae-card__media-wrap{
  aspect-ratio:4 / 3 !important;
  position:relative !important;
  overflow:hidden !important;
  background:#f3f4f6 !important;
}

.algae-card__media,
.algae-card__media--placeholder{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}

.algae-card__media--placeholder{
  opacity:1 !important;
  filter:saturate(.95) !important;
}

.algae-card__media--empty{
  background:#f3f4f6 !important;
}

.algae-card__media-empty-mark{
  display:none !important;
}

.algae-card__body{
  padding:12px 12px 10px !important;
  gap:8px !important;
  min-height:0 !important;
}

.algae-card__title{
  min-height:0 !important;
}

.algae-card__subtitle,
.algae-card__excerpt,
.algae-card__meta{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

.algae-card__subtitle{
  -webkit-line-clamp:2 !important;
}

.algae-card__excerpt,
.algae-card__meta{
  -webkit-line-clamp:2 !important;
}

.algae-card .algae-card-actions,
.algae-card-actions{
  top:10px !important;
  right:10px !important;
  gap:8px !important;
  z-index:1000 !important;
}

.algae-card .algae-card-actions .algae-card-action,
.algae-card-action,
.al-bookmark-btn.algae-card-action,
.al-heart-btn.algae-card-action{
  appearance:none !important;
  box-sizing:border-box !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  padding:0 !important;
  border:1px solid rgba(15,23,42,.12) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.96) !important;
  color:#0f172a !important;
  box-shadow:0 8px 18px rgba(15,23,42,.16) !important;
}

.algae-card .algae-card-actions .algae-card-action:hover,
.algae-card .algae-card-actions .algae-card-action:focus-visible,
.algae-card-action:hover,
.algae-card-action:focus-visible,
.al-bookmark-btn.algae-card-action:hover,
.al-heart-btn.algae-card-action:hover{
  background:#fff !important;
  color:#0f172a !important;
  transform:translateY(-1px) !important;
  box-shadow:0 10px 22px rgba(15,23,42,.22) !important;
}

.algae-card-action__icon,
.algae-card-action__icon svg,
.al-bookmark-btn.algae-card-action svg,
.al-heart-btn.algae-card-action svg{
  display:block !important;
  width:18px !important;
  height:18px !important;
}

.algae-card-action .al-fillable,
.al-bookmark-btn.algae-card-action .al-fillable,
.al-heart-btn.algae-card-action .al-fillable{
  fill:transparent !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
}

.algae-save-toggle.is-saved,
.algae-save-toggle[aria-pressed="true"],
.al-bookmark-btn.algae-save-toggle.is-saved,
.al-heart-btn.algae-save-toggle.is-saved{
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(15,23,42,.12) !important;
  color:#2C6B4A !important;
}

.algae-save-toggle.is-saved:hover,
.algae-save-toggle.is-saved:focus-visible,
.algae-save-toggle[aria-pressed="true"]:hover,
.algae-save-toggle[aria-pressed="true"]:focus-visible{
  background:#fff !important;
  border-color:rgba(15,23,42,.12) !important;
  color:#2C6B4A !important;
}

.algae-save-toggle.is-saved .al-fillable,
.algae-save-toggle[aria-pressed="true"] .al-fillable{
  fill:currentColor !important;
  stroke:currentColor !important;
}

.plm .algae-card--modal .algae-card__media-wrap{
  background:#f3f4f6 !important;
}

.plm .algae-card--modal .algae-card__media--placeholder{
  box-sizing:border-box !important;
  padding:18px !important;
  object-fit:contain !important;
  background:#f3f4f6 !important;
}

@media (max-width:767px){
  #algae-grid,
  .algae-grid{
    gap:.85rem !important;
    min-height:950px !important;
    align-content:start !important;
  }

  .algae-card{
    border-radius:16px !important;
  }

  .algae-card__media-wrap{
    aspect-ratio:4 / 2.55 !important;
  }

  .algae-card__body{
    padding:12px 12px 10px !important;
  }

  .algae-card__title{
    font-size:1.08rem !important;
    line-height:1.2 !important;
    margin:0 !important;
  }
}

@media (max-width:640px){
  .algae-card .algae-card-actions,
  .algae-card-actions{
    top:8px !important;
    right:8px !important;
  }

  .algae-card .algae-card-actions .algae-card-action,
  .algae-card-action,
  .al-bookmark-btn.algae-card-action,
  .al-heart-btn.algae-card-action{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
  }
}