/* =================================================================
   EVIL OFFICE – SHOP PAGE  (css/shop.css)
   Store ID: 13712037 | Ecwid Custom Website Integration
   CI: Creme #f5f0e8 · Anthrazit #2e3133 · Rot #C61F26
   Fonts: Bevan (Brand) · Oswald (Display) · Inter (Body)  [Playfair entfernt]

   AUDIT-FIXES (April 2026):
   ✅ Kategorie-Karten: Grid vollständig, nie abgeschnitten
   ✅ Footer-Logo: kein weißer Kasten – elegante Behandlung
   ✅ Sterne: flex-Reihe ohne Lücken
   ✅ Schriften: durchgehend konsistent Inter (Body) / Oswald (Display) / Bevan (Brand)
   ✅ Hintergründe: durchgängig Creme/Anthrazit-System
   ✅ Crossdevice: 5 Breakpoints vollständig getestet
   ✅ Ecwid-Widget: korrekte Mindesthöhe, kein Overflow-Bug
   ✅ USP-Strip: Icon-Farbe auf Dunkel korrekt
   ✅ Container: min-width:0 an allen Grid-Kindern
   ================================================================= */

/* CSS Custom Properties → css/tokens.css (Single Source of Truth) */

/* -----------------------------------------------------------------
   BODY / PAGE BASE
   ----------------------------------------------------------------- */
body.shop-page {
  background-color: var(--cream);
  background-image:
    linear-gradient(rgba(180,160,140,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,160,140,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------------------------------
   BREADCRUMB BAR
   ----------------------------------------------------------------- */
.shop-breadcrumb-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.shop-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--text-light);
  font-family: var(--font-body);
}

.shop-breadcrumb a {
  color: var(--text-light);
  text-decoration: none;
  transition: color var(--transition);
}
.shop-breadcrumb a:hover { color: var(--red); }
.shop-breadcrumb svg { color: #ccc; flex-shrink: 0; }
.shop-breadcrumb span[aria-current] {
  color: var(--red);
  font-weight: 600;
}

/* -----------------------------------------------------------------
   HAUPTLAYOUT: Sidebar + Produkte
   Desktop: 300px Sidebar | Flexibler Rest
   ----------------------------------------------------------------- */
.shop-main-layout {
  padding-block: 36px 72px;
  min-height: 70vh;
}

.shop-layout-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
}

/* -----------------------------------------------------------------
   SIDEBAR
   Sticky auf Desktop, normal auf Mobile
   ----------------------------------------------------------------- */
.shop-sidebar {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overflow-x: visible;      /* Nie horizontal abschneiden */
  scrollbar-width: thin;
  scrollbar-color: rgba(204,34,34,.2) transparent;
  padding-right: 4px;
  padding-bottom: 16px;
}

.shop-sidebar::-webkit-scrollbar { width: 4px; }
.shop-sidebar::-webkit-scrollbar-thumb {
  background: rgba(204,34,34,.18);
  border-radius: 4px;
}

/* -----------------------------------------------------------------
   SIDEBAR HEADER
   ----------------------------------------------------------------- */
.shop-sidebar-header {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.shop-sidebar-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.1;
  margin: 0 0 5px;
}

.shop-sidebar-sub {
  font-size: .74rem;
  color: var(--red);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-family: var(--font-body);
  margin: 0;
}

/* -----------------------------------------------------------------
   TRUST CHIPS
   ----------------------------------------------------------------- */
.shop-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.shop-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--red-light);
  border: 1px solid var(--red-border);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--red);
  letter-spacing: .03em;
  font-family: var(--font-body);
  white-space: nowrap;
}

/* -----------------------------------------------------------------
   KATEGORIE-KARTEN GRID
   KERN-FIX: 2 Spalten Desktop, nie abgeschnitten, Text immer sichtbar
   ----------------------------------------------------------------- */
.shop-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.shop-cat-card {
  /* Layout */
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;               /* KRITISCH: verhindert Grid-Überlauf */
  text-align: left;
  cursor: pointer;

  /* Aussehen */
  background: var(--white);
  border: 1.5px solid rgba(0,0,0,.07);
  border-radius: var(--radius);
  padding: 12px 10px;
  box-shadow: var(--shadow-sm);

  /* Animation */
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);

  /* Kein overflow:hidden – Text darf umbrechen */
  position: relative;
}

/* Roter Top-Akzent */
.shop-cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border-top: 3px solid transparent;
  pointer-events: none;
  transition: border-color var(--transition);
}

.shop-cat-card:hover {
  border-color: rgba(204,34,34,.28);
  box-shadow: var(--shadow-red);
  transform: translateY(-2px);
}

.shop-cat-card:hover::before,
.shop-cat-card.active::before {
  border-color: var(--red);
}

.shop-cat-card.active {
  border-color: rgba(204,34,34,.4);
  box-shadow: var(--shadow-red);
  background: var(--white);
}

.shop-cat-card:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Icon-Box */
.shop-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;            /* Nie zusammendrücken */
  background: var(--red-light);
  border-radius: 8px;
  color: var(--red);
  flex-shrink: 0;
  transition: background var(--transition);
}

.shop-cat-card:hover .shop-cat-icon,
.shop-cat-card.active .shop-cat-icon {
  background: rgba(204,34,34,.14);
}

/* Karten-Textinhalt */
.shop-cat-content {
  flex: 1;
  min-width: 0;               /* KRITISCH: kein Textüberlauf */
  overflow: hidden;
}

.shop-cat-content h3 {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 3px;
  line-height: 1.25;
  /* Wortumbruch statt Abschneiden */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.shop-cat-content p {
  font-size: .7rem;
  color: var(--text-light);
  line-height: 1.4;
  margin: 0 0 5px;
  font-family: var(--font-body);
  overflow-wrap: break-word;
  /* Auf ≤2 Zeilen beschränken */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shop-cat-link {
  font-size: .7rem;
  font-weight: 600;
  color: #bbb;
  transition: color var(--transition);
  display: block;
  font-family: var(--font-body);
}

.shop-cat-card:hover .shop-cat-link,
.shop-cat-card.active .shop-cat-link {
  color: var(--red);
}

/* -----------------------------------------------------------------
   SIDEBAR CTA-BOX
   ----------------------------------------------------------------- */
.shop-sidebar-cta {
  background: var(--white);
  border: 1.5px solid var(--red-border);
  border-top: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-sidebar-cta p {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-mid);
  margin: 0;
  font-family: var(--font-body);
}

.shop-sidebar-cta .btn {
  justify-content: center;
  text-align: center;
}

/* -----------------------------------------------------------------
   SHOP CONTENT (rechte Spalte)
   ----------------------------------------------------------------- */
.shop-content {
  background: transparent;
  min-width: 0;               /* KRITISCH: kein Grid-Überlauf */
}

.shop-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  background: var(--white);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.shop-active-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.shop-active-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  background: var(--red-light);
  border-radius: var(--radius-sm);
  color: var(--red);
  flex-shrink: 0;
}

.shop-active-cat h2 {
  font-family: var(--font-brand);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Suchleiste */
.shop-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border: 1.5px solid rgba(0,0,0,.09);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  color: var(--text-light);
  min-width: 200px;
  flex-shrink: 0;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.shop-search-bar:focus-within {
  border-color: rgba(204,34,34,.35);
  box-shadow: 0 0 0 3px rgba(204,34,34,.06);
  background: var(--white);
}

.shop-search-bar input {
  border: none;
  outline: none;
  font-size: .86rem;
  color: var(--text-dark);
  background: transparent;
  width: 100%;
  font-family: var(--font-body);
}

.shop-search-bar input::placeholder { color: #bbb; }

/* -----------------------------------------------------------------
   ECWID SERVICE LAYER
   #eo-ecwid-shell: full-size fixed, opacity:0, z-index:-1 (renders
   at real dimensions so Ecwid lays out correctly). Made visible
   (opacity:1, z-index:9000) when checkout overlay opens.
   ----------------------------------------------------------------- */

#eo-ecwid-shell {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Service Layer: Mindestgröße damit Ecwid intern korrekt initialisiert */
#eo-ecwid-shell .ecwid,
#eo-ecwid-shell [id^="my-store-"] {
  width: 100% !important;
  min-height: 450px;
}

/* Section intro paragraphs with top spacing */
.eo-section-intro-text { margin-top: 14px; }

/* Kontakt info note (small muted text in dark sections) */
.kontakt-meta-note {
  font-size: .82rem;
  color: rgba(255,255,255,.35);
  margin-top: 16px;
}

/* Contact form submit area and legal note */
.form-submit  { margin-top: 16px; }
.form-note    { margin-top: 12px; }


/* ─── Ecwid native Suchleiste ausblenden (Portal hat eigenes Suchfeld) ─── */
.ecwid-SearchPanel,
.ecwid .ec-search {
  display: none !important;
}

/* ─── Ecwid Kategorie-Kacheln – Service Layer, nie sichtbar ─── */
.eo-ecwid-shell #my-store-13712037 .ec-category-card,
.eo-ecwid-shell #my-store-13712037 [class*="ec-category-card"] {
  border-radius: var(--radius, 8px);
  overflow: hidden;
}
.eo-ecwid-shell #my-store-13712037 .ec-category-card__name,
.eo-ecwid-shell #my-store-13712037 [class*="categoryName"] {
  font-family: var(--font-body, 'Inter', sans-serif);
  color: var(--text-primary, #1a1a1a);
}

/* -----------------------------------------------------------------
   ECWID CI-OVERRIDES – EVIL OFFICE Rot + Schriften
   Scoped auf .shop-page für maximale Spezifität.
   Storefront 6 (ec-*) + Legacy (gwt-*) parallel abgedeckt.
   ----------------------------------------------------------------- */

/* Überschriften */
.ecwid .ec-store__title,
.ecwid .ec-header-title,
.ecwid .product-details__product-title,
.ecwid .grid-product__title,
.shop-page #my-store-13712037 .ec-page__title,
.shop-page #my-store-13712037 .ec-product-details__title,
.ecwid h1, .ecwid h2, .ecwid h3 {
  font-family: var(--font-display) !important;
  color: var(--text-dark) !important;
}

/* Fließtext */
.ecwid p,
.ecwid span,
.ecwid div,
.ecwid label,
.ecwid input,
.ecwid select,
.ecwid textarea {
  font-family: var(--font-body) !important;
}

/* Primär-Buttons: Evil Office Rot */
.ecwid .btn-default,
.ecwid .ec-cart-button,
.ecwid .ec-form__btn,
.ecwid .btn-primary,
.ecwid .form-control__button,
.ecwid .ec-minicart__go-to-checkout,
.ecwid .gwt-Button,
.shop-page #my-store-13712037 .ec-btn--primary,
.shop-page #my-store-13712037 .ec-btn.ec-btn--primary,
.shop-page #my-store-13712037 [class*="btn-primary"],
.shop-page #my-store-13712037 .ec-form .ec-btn {
  background-color: var(--red) !important;
  border-color:     var(--red) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  border-radius: var(--radius-sm) !important;
}

.ecwid .btn-default:hover,
.ecwid .ec-cart-button:hover,
.ecwid .btn-primary:hover,
.shop-page #my-store-13712037 .ec-btn--primary:hover,
.shop-page #my-store-13712037 .ec-form .ec-btn:hover {
  background-color: var(--red-dark) !important;
  border-color:     var(--red-dark) !important;
}

/* Preise: Rot + Fett */
.ecwid .grid-product__price,
.ecwid .product-details__product-price,
.ecwid .ec-price-item,
.shop-page #my-store-13712037 .ec-price__value,
.shop-page #my-store-13712037 [class*="product-price"],
.shop-page #my-store-13712037 .details-product-price__value {
  color: var(--red) !important;
  font-weight: 700 !important;
}

/* Produktkarten-Hover: leichte Creme-Einfärbung */
.shop-page #my-store-13712037 .grid-product:hover,
.shop-page #my-store-13712037 .ec-grid__cell:hover .ec-grid__tile {
  background-color: var(--bg-cream) !important;
}

/* Links: Rot statt Ecwid-Blau */
.shop-page #my-store-13712037 a {
  color: var(--text-dark) !important;
}
.shop-page #my-store-13712037 a:hover {
  color: var(--red) !important;
}

/* Eingabefelder: Evil Office Border + Focus-Rot */
.shop-page #my-store-13712037 input[type="text"],
.shop-page #my-store-13712037 input[type="email"],
.shop-page #my-store-13712037 input[type="number"],
.shop-page #my-store-13712037 select,
.shop-page #my-store-13712037 textarea {
  border-color: var(--border) !important;
  border-radius: var(--radius-sm) !important;
}
.shop-page #my-store-13712037 input:focus,
.shop-page #my-store-13712037 select:focus,
.shop-page #my-store-13712037 textarea:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(204,34,34,.08) !important;
  outline: none !important;
}

/* Hintergrund: transparent → Creme der Seite scheint durch */
.ecwid .ec-store,
.ecwid .ec-store__layout,
.ecwid .ecwid-productBrowser,
.shop-page #my-store-13712037 .ec-wrapper,
.shop-page #my-store-13712037 .ec-store {
  background-color: transparent !important;
}

/* -----------------------------------------------------------------
   WARENKORB IM HEADER
   ----------------------------------------------------------------- */
.eo-cart-header-wrap {
  position: relative;
}

.header-cart {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: #fff;
  position: relative;
}

.header-cart:hover {
  opacity: 0.8;
}

.header-cart-icon {
  display: block;
}

.header-cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--red, #C61F26);
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

.ec-minicart__counter {
  background: var(--red) !important;
  color: #fff !important;
}

/* -----------------------------------------------------------------
   MINI-CART DROPDOWN PANEL
   ----------------------------------------------------------------- */
.eo-mini-cart {
  position: fixed;
  inset: 0;
  z-index: 9500;
}

.eo-mini-cart[hidden] {
  display: none;
}

.eo-mini-cart-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.eo-mini-cart-panel {
  position: absolute;
  top: calc(var(--header-h) + 8px);
  right: max(16px, calc((100vw - 1320px) / 2 + 16px));
  width: 100%;
  max-width: 380px;
  max-height: calc(100vh - 80px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: miniCartIn 0.18s ease;
}

@keyframes miniCartIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.eo-mini-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e8e4dc;
  flex-shrink: 0;
}

.eo-mini-cart-title {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1a1a1a;
}

.eo-mini-cart-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: #666;
  padding: 4px 6px;
  line-height: 1;
  border-radius: 4px;
  transition: background 0.15s;
}

.eo-mini-cart-close:hover {
  background: #f0ece4;
}

.eo-mini-cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  min-height: 60px;
}

.eo-mini-cart-empty {
  text-align: center;
  color: #888;
  font-size: 0.88rem;
  padding: 28px 16px;
  margin: 0;
}

.eo-mini-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #f0ece4;
  transition: background 0.12s;
}

.eo-mini-cart-item:last-child {
  border-bottom: none;
}

.eo-mini-cart-item:hover {
  background: #faf8f5;
}

.eo-mini-cart-item-img-wrap {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--cream, #f5f0e8);
  border: 1px solid #e8e4dc;
}

.eo-mini-cart-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.eo-mini-cart-item-img--placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f0ece4, #e8e4dc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 1.5rem;
}

.eo-mini-cart-item-body {
  flex: 1;
  min-width: 0;
}

.eo-mini-cart-item-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 4px;
}

.eo-mini-cart-item-meta {
  font-size: 0.78rem;
  color: #666;
  display: flex;
  gap: 8px;
  align-items: center;
}

.eo-mini-cart-item-price {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-weight: 600;
  color: var(--red, #C61F26);
  font-size: 0.9rem;
}

.eo-mini-cart-footer {
  border-top: 2px solid #e8e4dc;
  padding: 12px 16px;
  flex-shrink: 0;
  background: #faf8f5;
}

.eo-mini-cart-footer[hidden] {
  display: none;
}

.eo-mini-cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1a1a1a;
}

.eo-mini-cart-total {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--red, #C61F26);
}

.eo-mini-cart-checkout-btn {
  display: block;
  width: 100%;
  padding: 11px;
  background: var(--red, #C61F26);
  color: #fff;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s;
}

.eo-mini-cart-checkout-btn:hover {
  background: #a81b1b;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 768px) {
  .eo-mini-cart-panel {
    max-width: min(360px, calc(100vw - 20px));
  }
}

@media (max-width: 480px) {
  .eo-mini-cart-panel {
    top: 0;
    right: 0;
    left: 0;
    max-width: 100%;
    border-radius: 0 0 8px 8px;
  }
}

/* -----------------------------------------------------------------
   LADE-INDIKATOR (optional, falls vorhanden)
   ----------------------------------------------------------------- */
.shop-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 20px;
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: .88rem;
}

.shop-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(204,34,34,.15);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: shopSpin .8s linear infinite;
}

@keyframes shopSpin {
  to { transform: rotate(360deg); }
}

/* -----------------------------------------------------------------
   USP STRIP (dunkel, unter Produktliste)
   ----------------------------------------------------------------- */
.shop-usp-strip {
  background: var(--nav-bg);
  border-top: 3px solid var(--red);
  padding-block: 48px;
}

.shop-usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.shop-usp-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.shop-usp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  background: rgba(204,34,34,.12);
  border-radius: 10px;
  color: var(--red);       /* Rot, nicht Weiß – auf Dunkel gut sichtbar */
  flex-shrink: 0;
}

.shop-usp-item strong {
  display: block;
  color: var(--white);
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: 5px;
  font-family: var(--font-body);
}

.shop-usp-item p {
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
  margin: 0;
  font-family: var(--font-body);
}

/* -----------------------------------------------------------------
   FOOTER – Logo-Fix
   Weißes Logo-PNG auf dunklem Footer:
   Statt weißem Kasten → dezenter Hintergrund + abgerundete Ecken
   ----------------------------------------------------------------- */
.shop-page .footer-logo-img {
  height: auto;
  width: 175px;
  max-width: 100%;
  /* Weißer Rahmen – wirkt wie eingebettet, kein harter Kasten */
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 16px;
  object-fit: contain;
  display: block;
}

/* -----------------------------------------------------------------
   FOOTER STERNE – inline Reihe ohne Umbrüche
   ----------------------------------------------------------------- */
.shop-page .footer-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: .82rem;
  color: rgba(255,255,255,.45);
  font-family: var(--font-body);
  flex-wrap: wrap;
}

.shop-page .footer-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  line-height: 1;
}

.shop-page .footer-stars svg {
  display: block;
  flex-shrink: 0;
  vertical-align: middle;
}

/* -----------------------------------------------------------------
   FOOTER SPALTEN-ÜBERSCHRIFTEN
   ----------------------------------------------------------------- */
.footer-heading {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  margin: 0 0 14px;
}

/* -----------------------------------------------------------------
   FOOTER LINKLISTEN
   ----------------------------------------------------------------- */
.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-list a {
  font-size: .85rem;
  color: rgba(255,255,255,.52);
  text-decoration: none;
  transition: color var(--transition);
  font-family: var(--font-body);
  line-height: 1.4;
}

.footer-list a:hover { color: var(--red); }

/* -----------------------------------------------------------------
   FOOTER ADRESSE
   ----------------------------------------------------------------- */
.footer-address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-address p {
  font-size: .85rem;
  color: rgba(255,255,255,.52);
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.5;
}

.footer-address a {
  color: rgba(255,255,255,.62);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-address a:hover { color: var(--white); }

/* -----------------------------------------------------------------
   FOOTER BOTTOM BAR
   ----------------------------------------------------------------- */
.shop-page .footer-bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.shop-page .footer-copy {
  font-size: .74rem;
  color: rgba(255,255,255,.22);
  font-family: var(--font-body);
}

.shop-page .footer-legal-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.shop-page .footer-legal-nav a {
  font-size: .74rem;
  color: rgba(255,255,255,.28);
  text-decoration: none;
  transition: color var(--transition);
  font-family: var(--font-body);
}

.shop-page .footer-legal-nav a:hover { color: rgba(255,255,255,.65); }

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

/* ── 1280px: komfortabler Desktop ── */
@media (max-width: 1280px) {
  .shop-layout-grid {
    grid-template-columns: 270px 1fr;
    gap: 24px;
  }

  .shop-usp-grid {
    gap: 24px;
  }
}

/* ── 1024px: kleiner Desktop / Laptop ── */
@media (max-width: 1024px) {
  .shop-layout-grid {
    grid-template-columns: 240px 1fr;
    gap: 20px;
  }

  .shop-cat-grid {
    grid-template-columns: 1fr;   /* Einspaltig in schmaler Sidebar */
  }

  .shop-usp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .shop-sidebar-title { font-size: 1.3rem; }
}

/* ── 768px: Tablet ── */
@media (max-width: 768px) {
  .shop-layout-grid {
    grid-template-columns: 1fr;   /* Sidebar stapelt sich über Produkte */
    gap: 20px;
  }

  .shop-sidebar {
    position: static;             /* Kein Sticky auf Mobile */
    max-height: none;
    overflow: visible;
    padding-right: 0;
    padding-bottom: 0;
  }

  .shop-cat-grid {
    grid-template-columns: repeat(2, 1fr);  /* 2 Spalten auf Tablet */
    gap: 10px;
  }

  .shop-content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }

  .shop-search-bar {
    width: 100%;
    min-width: unset;
  }

  .shop-usp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .shop-main-layout {
    padding-block: 24px 56px;
  }

  .shop-active-cat h2 { font-size: 1.15rem; }

  .shop-usp-strip {
    padding-block: 36px;
  }
}

/* ── 580px: großes Smartphone ── */
@media (max-width: 580px) {
  .shop-cat-grid {
    grid-template-columns: repeat(2, 1fr);  /* 2 Spalten bleiben */
    gap: 8px;
  }

  .shop-cat-card {
    padding: 10px 8px;
    gap: 8px;
  }

  .shop-cat-content h3 {
    font-size: .78rem;
  }

  .shop-cat-content p {
    display: none;   /* Beschreibungstext auf kleinen Phones ausblenden */
  }

  .shop-cat-link {
    font-size: .68rem;
  }
}

/* ── 480px: Smartphone ── */
@media (max-width: 480px) {
  .shop-cat-grid {
    grid-template-columns: 1fr;   /* Einspaltig auf kleinen Phones */
    gap: 8px;
  }

  .shop-cat-content p {
    display: block;   /* Beschreibung wieder zeigen wenn einzeilig */
    -webkit-line-clamp: 1;
  }

  .shop-usp-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .shop-sidebar-title { font-size: 1.15rem; }

  .shop-main-layout {
    padding-block: 16px 52px;
  }

  .shop-cat-card {
    padding: 12px 10px;
  }

  .shop-cat-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .shop-usp-strip {
    padding-block: 28px;
  }

  /* Footer auf Mobile */
  .shop-page .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .shop-page .footer-legal-nav {
    gap: 14px;
  }
}

/* ── Reduced Motion – Barrierefreiheit ── */
@media (prefers-reduced-motion: reduce) {
  .shop-cat-card,
  .shop-cat-card::before,
  .shop-cat-icon,
  .shop-loading-spinner {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SLIM SHOP HERO  (index.html only)
   ═══════════════════════════════════════════════════════════════════ */
.shop-hero {
  background: var(--nav-bg);
  padding: 48px 0 36px;
  position: relative;
  overflow: hidden;
}
.shop-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 70% 50%, rgba(204,34,34,.06) 0%, transparent 70%);
  pointer-events: none;
}
.shop-hero-inner {
  display: flex;
  align-items: center;
}
.shop-hero-copy {
  max-width: 740px;
  position: relative;
  z-index: 1;
}
.shop-hero .hero-eyebrow {
  color: rgba(255,255,255,.5);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.shop-hero .hero-eyebrow span {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.18);
  max-width: 40px;
}
.shop-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  color: var(--white);
  line-height: 1.12;
  margin-bottom: 14px;
  letter-spacing: -.02em;
}
.shop-hero h1 em {
  font-style: normal;
  color: var(--red);
}
.shop-hero-sub {
  color: rgba(255,255,255,.72);
  font-family: var(--font-body);
  font-size: 1.05rem;
  margin-bottom: 28px;
  max-width: 540px;
  line-height: 1.6;
}
.shop-hero .btn-group {
  margin-bottom: 28px;
}
.shop-hero .trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shop-hero .trust-chip {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.14);
  font-size: .75rem;
  padding: 5px 12px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shop-hero .trust-chip svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: .75;
}

/* ═══════════════════════════════════════════════════════════════════
   SUBCATEGORY ACCORDION
   ═══════════════════════════════════════════════════════════════════ */
.shop-subcat-list {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 4px 12px;
  margin-bottom: 2px;
}
.shop-subcat-list.open {
  display: flex;
}
.shop-subcat-item {
  font-family: var(--font-body);
  font-size: .78rem;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: var(--radius-sm, 6px);
  color: var(--text-mid, #555);
  background: transparent;
  border: none;
  text-align: left;
  transition: background .15s, color .15s;
  width: 100%;
}
.shop-subcat-item:hover,
.shop-subcat-item.active {
  background: var(--red-light, #fdf2f2);
  color: var(--red, #C61F26);
}

/* ─── Responsive: Hero on small screens ─────────────────────────── */
@media (max-width: 767px) {
  .shop-hero {
    padding: 32px 0 24px;
  }
  .shop-hero h1 {
    font-size: 2rem;
  }
  .shop-hero-sub {
    font-size: .95rem;
    margin-bottom: 20px;
  }
  .shop-hero .trust-chips {
    gap: 6px;
  }
  .shop-hero .trust-chip {
    font-size: .7rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO-SHOP  – Dark full-bleed, eyebrow + two-tone H1 + watermark
   ═══════════════════════════════════════════════════════════════════ */
.hero-shop {
  position: relative;
  background-image: url('../images/evil-office-banner-hero.jpg');
  background-size: cover;
  background-position: center top;
  padding-block: 100px 80px;
  overflow: hidden;
  min-height: 440px;
  display: flex;
  flex-direction: column;
}
.hero-shop::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(20,22,24,.88) 0%, rgba(20,22,24,.70) 55%, rgba(46,49,51,.60) 100%);
  z-index: 0;
}
.hero-shop .container {
  position: relative;
  z-index: 1;
  flex: 1;
}

/* ── Ghost watermark overlay text ──────────────────────────────────── */
.hero-watermark {
  position: absolute;
  right: -1%;
  top: 50%;
  transform: translateY(-46%);
  font-family: var(--font-brand, "Bevan", serif);
  font-size: clamp(3.6rem, 9vw, 9.5rem);
  line-height: 1.05;
  color: rgba(255,255,255,.07);
  text-transform: uppercase;
  letter-spacing: .02em;
  pointer-events: none;
  text-align: right;
  z-index: 0;
  user-select: none;
}

.hero-shop-content {
  max-width: 800px;
  position: relative;
  z-index: 1;
}

/* ── Eyebrow ─────────────────────────────────────────────────────── */
.hero-shop .hero-eyebrow {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245,240,232,.55);
  margin-bottom: 20px;
  padding: 0;
  border: none;
  background: none;
}
.hero-shop .hero-eyebrow::before,
.hero-shop .hero-eyebrow::after { display: none; }

/* ── Headline: white first line, red second line ─────────────────── */
#hero-headline {
  font-family: var(--font-brand, "Bevan", serif);
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  line-height: 1.08;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: 20px;
  text-shadow: 0 2px 28px rgba(0,0,0,.35);
}
.hero-title span,
.hero-title-line2 {
  display: block;
  color: var(--red);
}
.hero-subline {
  font-size: 1rem;
  color: rgba(245,240,232,.65);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 0;
}

/* ── Bottom USP strip inside hero ───────────────────────────────── */
.hero-bottom-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(14,15,17,.55);
  border-top: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(6px);
  padding: 13px 0;
  z-index: 2;
}
.hero-bottom-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-display, "Oswald", sans-serif);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245,240,232,.58);
}
.hero-strip-sep {
  color: rgba(245,240,232,.25);
  font-size: .9rem;
}

/* ═══════════════════════════════════════════════════════════════════
   SUCHE & FILTER SECTION  – White bar below hero
   ═══════════════════════════════════════════════════════════════════ */
.hero-search-section {
  background: #fff;
  padding: 22px 0 18px;
  border-bottom: 1.5px solid var(--border, #e0dbd0);
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  position: relative;
  z-index: 10;
}

/* ── Search Form ─────────────────────────────────────────────────── */
.hero-search-form {
  width: 100%;
}
.hero-search-input-row {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1.5px solid var(--border, #ddd);
  border-radius: var(--radius, 10px);
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  overflow: hidden;
  gap: 0;
}
.hero-search-text-wrap {
  display: flex;
  align-items: center;
  flex: 1 1 220px;
  padding: 0 16px;
  gap: 10px;
  border-right: 1.5px solid var(--border, #ddd);
  min-width: 0;
  position: relative;
}
.hero-search-icon {
  flex-shrink: 0;
  color: #999;
}
.hero-search-text-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1rem; /* ≥16px prevents iOS auto-zoom */
  color: var(--text);
  padding: 14px 0;
  min-width: 0;
  outline: none;
}
.hero-search-text-input::placeholder { color: #aaa; }
.hero-filter-selects {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.hero-filter-select {
  border: none;
  border-right: 1.5px solid var(--border, #ddd);
  background: transparent;
  font-size: .83rem;
  color: var(--text);
  padding: 14px 28px 14px 14px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s;
}
.hero-filter-select:focus { outline: none; }
.hero-filter-select:hover { background-color: rgba(0,0,0,.03); }
.hero-search-submit-btn {
  border-radius: 0;
  padding: 14px 22px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
}
/* Submit label: visible on desktop, hidden on small mobile */
.hero-search-submit-label { display: inline; }

/* ── Filter Toggle (mobile / tablet only) ─────────────────────── */
.eo-filter-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: transparent;
  border: none;
  border-left: 1.5px solid var(--border, #ddd);
  color: var(--text, #3a3a3a);
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  transition: background .15s;
}
.eo-filter-toggle:hover { background: rgba(0,0,0,.04); }
.eo-filter-toggle:focus-visible {
  outline: 2px solid var(--red, #c61f26);
  outline-offset: -2px;
}
.eo-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--red, #c61f26);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}

/* ── Filter Panel (mobile-first: hidden; desktop: always visible) */
.eo-filter-panel {
  display: none; /* hidden by default on mobile */
  flex-direction: column;
  gap: 10px;
  padding: 12px 0 4px;
}
.eo-filter-panel.is-open {
  display: flex;
}
/* Mobile: each select is full width, min 44px height */
.eo-filter-panel .hero-filter-select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1.5px solid var(--border, #ddd);
  border-radius: 8px;
  padding: 10px 36px 10px 12px;
  font-size: 1rem;
  background-color: #fff;
}

/* Mobile: "Filter zurücksetzen" inside panel */
.eo-filter-panel-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1.5px solid rgba(198,31,38,.35);
  background: transparent;
  color: var(--red, #c61f26);
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  width: 100%;
}
.eo-filter-panel-reset:hover {
  background: rgba(198,31,38,.08);
  border-color: var(--red, #c61f26);
}

/* ── Active Filter Chips ──────────────────────────────────────── */
.eo-active-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.eo-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px 6px 12px;
  border-radius: 100px;
  border: 1.5px solid var(--border, #ddd);
  background: var(--off-white, #faf8f4);
  color: var(--text, #3a3a3a);
  font-size: .78rem;
  font-weight: 500;
  cursor: default;
}
.eo-active-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.1);
  color: var(--text, #3a3a3a);
  font-size: .75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}
.eo-active-chip-remove:hover { background: rgba(0,0,0,.22); }

/* ── Filter Chips (on white bg) ─────────────────────────────────── */
.hero-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.hero-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 100px;
  border: 1.5px solid rgba(0,0,0,.14);
  background: transparent;
  color: var(--text, #3a3a3a);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.hero-filter-chip:hover {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.28);
}
.hero-filter-chip--active {
  background: var(--nav-bg, #2e3133);
  color: #fff;
  border-color: var(--nav-bg, #2e3133);
}
.hero-filter-chip--reset {
  border-color: rgba(198,31,38,.35);
  color: var(--red, #c61f26);
}
.hero-filter-chip--reset:hover {
  background: rgba(198,31,38,.08);
  border-color: var(--red, #c61f26);
}

.eo-shop-entry-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.eo-shop-entry-usps {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.eo-shop-entry-usp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(246,244,239,.9);
  border: 1px solid rgba(0,0,0,.08);
  color: var(--text, #202020);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.2;
}

.eo-shop-entry-usp::before {
  content: "\2713";
  color: var(--red, #c61f26);
  font-weight: 800;
}

.eo-shop-entry-help {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.eo-shop-active-context {
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(198,31,38,.08);
  border: 1px solid rgba(198,31,38,.18);
  color: var(--red, #c61f26);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.2;
}

.eo-shop-help-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--nav-bg, #2e3133);
  color: #fff;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 700;
  transition: opacity .15s, transform .15s;
}

.eo-shop-help-cta:hover {
  opacity: .92;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════
   SHOP CAT TABS  – Horizontal scrollable tab bar
   ═══════════════════════════════════════════════════════════════════ */
.shop-cat-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 24px 0 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.shop-cat-tabs::-webkit-scrollbar { display: none; }

/* ─── entfernt: ECWID NATIVE KATEGORIE-NAVIGATION AUSBLENDEN (Option B, April 2026) ─── */

/* Product count badge in sidebar category buttons */
.eo-cat-count {
  font-size: .72rem;
  color: var(--text-light, #888);
  margin-left: auto;
  padding-left: 6px;
  font-weight: 400;
  font-family: var(--font-body, 'Inter', sans-serif);
  opacity: .75;
}

.shop-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid var(--border, #e0dbd0);
  min-width: 88px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-display, 'Oswald', sans-serif);
  color: #555;
}
.shop-tab-item:hover {
  background: var(--cream, #f5f0e8);
  border-color: var(--nav-bg, #2e3133);
  color: var(--nav-bg, #2e3133);
}
.shop-tab-item.active {
  background: var(--nav-bg, #2e3133);
  color: #fff;
  border-color: var(--nav-bg, #2e3133);
  box-shadow: 0 4px 14px rgba(46,49,51,.2);
}
.shop-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .65;
}
.shop-tab-item.active .shop-tab-icon { opacity: 1; }
.shop-tab-label {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  letter-spacing: .01em;
}

/* Angebote tab accent */
.shop-tab-item--angebot.active {
  background: var(--red, #C61F26);
  border-color: var(--red, #C61F26);
}
.shop-tab-item--angebot:hover {
  border-color: var(--red, #C61F26);
  color: var(--red, #C61F26);
}

/* ── Subcat bar ──────────────────────────────────────────────────── */
.shop-subcat-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0 14px;
}
.shop-subcat-item {
  padding: 6px 15px;
  border-radius: 20px;
  border: 1.5px solid var(--border, #ddd);
  background: #fff;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.shop-subcat-item:hover,
.shop-subcat-item.active {
  background: var(--nav-bg, #2e3133);
  color: #fff;
  border-color: var(--nav-bg, #2e3133);
}

/* ─── Layout: shop full-width (no sidebar) ───────────────────────── */
.shop-main-layout .shop-layout-grid {
  display: block; /* fallback if old grid still referenced */
}

/* ═══════════════════════════════════════════════════════════════════
   EMPFOHLENE PRODUKTE
   ═══════════════════════════════════════════════════════════════════ */
.section-intro-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
}
.link-more {
  font-size: .88rem;
  font-weight: 700;
  color: var(--red, #C61F26);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-color .15s;
}
.link-more:hover { border-bottom-color: var(--red, #C61F26); }

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
  margin-top: 28px;
}
.product-card {
  background: #fff;
  border: 1.5px solid var(--border, #e0dbd0);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .18s, transform .18s;
  cursor: pointer;
  position: relative;
}
.product-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
  transform: translateY(-3px);
}
.product-card-img {
  height: 190px;
  background: var(--cream, #f5f0e8);
}
.product-card-img--usm      { background: #e8e4da; }
.product-card-img--vitra    { background: #dce8e4; }
.product-card-img--bosse    { background: #e4dce8; }
.product-card-img--konf     { background: #e8e8dc; }
.product-card-img--steelcase{ background: #dce4e8; }
.product-card-img--schrank  { background: #e8dce0; }
.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.product-badge--avail   { background: #22c55e; color: #fff; }
.product-badge--checked { background: #64748b; color: #fff; }
.product-card-body {
  padding: 18px;
}
.product-card-body h3 {
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 5px;
  color: var(--text-dark, #1a1a1a);
  font-family: var(--font-body, 'Inter', sans-serif);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-body p {
  font-size: .8rem;
  color: #777;
  margin: 0 0 10px;
}
.product-price {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--red, #C61F26);
}
.products-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 36px;
}

/* ═══════════════════════════════════════════════════════════════════
   BELIEBTE KATEGORIEN  – Cat tiles grid
   ═══════════════════════════════════════════════════════════════════ */
.cat-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.cat-tile {
  background: var(--nav-bg, #2e3133);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 26px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  cursor: pointer;
  transition: background .18s, transform .18s, box-shadow .18s;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.cat-tile:hover {
  background: #3c4145;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.cat-tile--angebot { background: var(--red, #C61F26); }
.cat-tile--angebot:hover { background: #b01e1e; }
.cat-tile-icon { opacity: .85; }
.cat-tile h3 {
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}
.cat-tile p {
  font-size: .78rem;
  opacity: .72;
  margin: 0;
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE – Search & Filter
   ═══════════════════════════════════════════════════════════════════ */

/* ── Desktop ≥1024px: filter panel always visible as horizontal row ── */
@media (min-width: 1024px) {
  .eo-filter-toggle { display: none; } /* toggle not needed */
  .eo-filter-panel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 1.5px solid var(--border, #ddd);
    border-top: none;
    border-radius: 0 0 var(--radius, 10px) var(--radius, 10px);
    background: #fff;
    overflow: hidden;
  }
  .hero-search-input-row {
    border-radius: var(--radius, 10px) var(--radius, 10px) 0 0;
    /* Keep a bottom edge as the divider between the search field and the filter
       row — without it the connected box looks "open" under the search. The panel
       below has border-top:none, so this is a single 1.5px line (no double border). */
    border-bottom: 1.5px solid var(--border, #ddd);
  }
  .eo-filter-panel .hero-filter-select {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 100%;
    min-height: 48px;
    border: none;
    border-right: 1.5px solid var(--border, #ddd);
    border-radius: 0;
    font-size: .83rem;
    padding: 12px 28px 12px 14px;
    background-color: transparent;
  }
  .eo-filter-panel-reset {
    flex: 0 0 auto;
    width: auto;
    border: none;
    border-left: 1.5px solid var(--border, #ddd);
    border-radius: 0 0 var(--radius, 10px) 0;
    padding: 12px 16px;
    font-size: .8rem;
  }
  .hero-search-submit-label { display: inline; }
}

/* ── Tablet 768–1023px: 2-col filter grid, toggle hidden ─────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .eo-filter-toggle { display: none; }
  /* Stack the "Aktiv: …" pill above the help CTA so the long CTA can't collide
     with the pill in the tablet range (this is where the 2-col grid applies). */
  .eo-shop-entry-help {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
  }
  .eo-filter-panel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 10px 0 4px;
  }
  /* 5 selects + reset = 6 cells → 3 even rows of 2 (Standort + Reset share the
     last row instead of leaving an orphaned half-empty field row). */
  .hero-search-input-row { flex-wrap: nowrap; }
  .hero-search-submit-label { display: inline; }
}

/* ── Mobile <768px: compact row, toggle visible, panel collapsible ── */
@media (max-width: 767px) {
  .hero-search-section { padding: 14px 0 10px; }
  .hero-search-input-row {
    flex-wrap: nowrap;
    border-radius: var(--radius, 10px);
  }
  .hero-search-text-wrap {
    flex: 1 1 auto;
    min-width: 0;
    border-right: none;
    padding: 0 10px;
  }
  .hero-search-submit-label { display: none; } /* icon-only button on mobile */
  .hero-search-submit-btn { padding: 0 16px; min-height: 48px; border-radius: 0 8px 8px 0; }
  .hero-filter-chips { gap: 6px; margin-top: 8px; }
  .hero-filter-chip { font-size: .72rem; padding: 8px 12px; min-height: 36px; }
}

/* ── Very small mobile <480px ──────────────────────────────────── */
@media (max-width: 480px) {
  .hero-search-text-input { padding: 12px 0; }
  .eo-filter-badge { font-size: .65rem; min-width: 16px; height: 16px; }
}

@media (max-width: 768px) {
  .hero-shop { padding-block: 40px 48px; min-height: 260px; }
  #hero-headline { font-size: clamp(1.3rem, 5vw, 2rem); }
  .hero-subline { font-size: .95rem; }
  .hero-watermark { font-size: clamp(2.4rem, 7vw, 5rem); opacity: .6; }
  .hero-bottom-strip-inner { font-size: .7rem; gap: 14px; }
  .eo-shop-entry-meta { align-items: stretch; }
  /* Stack the "Aktiv: …" pill and the help CTA vertically below the tablet
     breakpoint so the long CTA never collides with the pill (480–768 px). */
  .eo-shop-entry-help {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
  }
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
  }
  .cat-tiles-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .hero-shop { padding-block: 28px 32px; min-height: 200px; }
  .hero-watermark { display: none; }
  .eo-shop-entry-usps { gap: 8px; }
  .eo-shop-entry-usp,
  .eo-shop-active-context,
  .eo-shop-help-cta {
    width: 100%;
    justify-content: center;
  }
  .eo-shop-entry-help { width: 100%; }
  .shop-tab-item {
    min-width: 72px;
    padding: 10px 12px;
  }
  .shop-tab-label { font-size: .78rem; }
  .eo-product-card-body { padding: 10px 12px 12px; }
  .products-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .product-card-img { height: 140px; }
  .cat-tiles-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-tile { padding: 18px 12px 14px; }
}

/* ==========================================================================
   EO-SHOP PORTAL — custom eo-* components (Aufgabe 10)
   All classes prefixed eo- to avoid conflicts with legacy styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   USP Strip
   -------------------------------------------------------------------------- */
.eo-usp-strip {
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 11px 0;
}
.eo-usp-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.eo-usp-item {
  color: rgba(255,255,255,.82);
  font-size: .78rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.eo-usp-item::before {
  content: "\2713";
  color: var(--red);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   2-Column Shop Layout
   -------------------------------------------------------------------------- */
.eo-shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 40px 0 60px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.eo-shop-sidebar {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  position: sticky;
  top: calc(var(--header-h) + var(--topbar-h, 32px) + 16px);
}
.eo-sidebar-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-light, #999);
  margin: 0 0 10px;
}
.eo-category-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eo-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: .88rem;
  font-family: var(--font-body);
  color: var(--text);
  transition: background .15s, color .15s;
  width: 100%;
  line-height: 1.3;
}
.eo-cat-item:hover { background: var(--bg-cream); }
.eo-cat-item--active {
  background: var(--nav-bg);
  color: #fff;
  font-weight: 600;
}
.eo-cat-item--active:hover { background: var(--nav-bg); }
.eo-cat-count {
  font-size: .72rem;
  background: rgba(0,0,0,.09);
  border-radius: 20px;
  padding: 1px 7px;
  margin-left: 6px;
  flex-shrink: 0;
}
.eo-cat-item--active .eo-cat-count { background: rgba(255,255,255,.18); }
.eo-loading {
  padding: 14px 4px;
  font-size: .82rem;
  color: var(--text-light, #999);
}

/* --------------------------------------------------------------------------
   Accordion Sidebar (April 2026)
   .eo-cat-list        → <ul> wrapper
   .eo-cat-group       → <li> per Kategorie
   .eo-cat-parent      → Parent-Button (root + flat)
   .eo-cat-chevron     → Pfeil-Icon (dreht sich bei open)
   .eo-subcat-list     → Unterkategorien-Panel
   .eo-subcat-item     → Unterkategorie-Button
   -------------------------------------------------------------------------- */
.eo-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.eo-cat-group {
  margin-bottom: 1px;
}

/* Parent-Button: Basis-Stil (geteilt von Root und Flat) */
.eo-cat-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
  transition: background .15s, color .15s;
}

.eo-cat-parent:hover {
  background: var(--bg-cream, #f5f0e8);
}

.eo-cat-parent--active {
  background: var(--nav-bg, #2e3133);
  color: #fff;
  font-weight: 600;
}

.eo-cat-parent--active:hover {
  background: var(--nav-bg, #2e3133);
}

.eo-cat-parent-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Chevron-Icon */
.eo-cat-chevron {
  flex-shrink: 0;
  margin-left: 6px;
  opacity: .55;
  transition: transform .2s ease;
  font-size: .7rem;
  line-height: 1;
}

/* Unicode-Chevron via ::after */
.eo-cat-chevron::after {
  content: '\25BE'; /* ▾ */
}

.eo-cat-parent[aria-expanded="true"] .eo-cat-chevron {
  transform: rotate(180deg);
}

.eo-cat-parent--active .eo-cat-chevron {
  opacity: .75;
}

/* Unterkategorien-Panel */
.eo-subcat-list {
  padding-left: 12px;
  padding-bottom: 4px;
}

.eo-subcat-list[hidden] {
  display: none;
}

/* Subcat-Button */
.eo-subcat-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .83rem;
  color: var(--text-mid, #555);
  cursor: pointer;
  text-align: left;
  line-height: 1.35;
  transition: background .15s, color .15s;
  overflow-wrap: break-word;
}

.eo-subcat-item:hover {
  background: var(--bg-cream, #f5f0e8);
  color: var(--text);
}

.eo-subcat-item--active {
  background: rgba(204, 34, 34, .09);
  color: var(--red, #C61F26);
  font-weight: 600;
}

.eo-subcat-item--active:hover {
  background: rgba(204, 34, 34, .14);
}

/* "Alle [Plural]"-Button in Unterliste */
.eo-subcat-item--all {
  font-style: italic;
  font-size: .79rem;
  color: var(--text-light, #999);
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
  margin-bottom: 3px;
  padding-bottom: 6px;
  border-radius: 0;
}

.eo-subcat-item--all.eo-subcat-item--active {
  color: var(--red, #C61F26);
  font-weight: 600;
}

/* Mobile */
@media (max-width: 768px) {
  .eo-cat-parent  { padding: 10px 12px; }
  .eo-subcat-list { padding-left: 8px; }
  .eo-subcat-item { font-size: .85rem; }
}

/* --------------------------------------------------------------------------
   Promo Section wrapper (directly below hero)
   -------------------------------------------------------------------------- */
.eo-promo-section {
  background: #f5f3ee;
  padding: 28px 0 0;
}

/* --------------------------------------------------------------------------
   Promo Grid
   -------------------------------------------------------------------------- */
.eo-promo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 0;
}
.eo-promo-tile {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: flex-end;
  background: var(--nav-bg);
  transition: transform .2s;
}
.eo-promo-tile:hover { transform: translateY(-3px); }
.eo-promo-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 60%);
  z-index: 1;
}
.eo-promo-tile--usm {
  background: #1a1f22 url("../images/evil-office-banner-hero.jpg") center/cover no-repeat;
}
.eo-promo-tile--chairs {
  background: #2a3038 url("../images/evil-office-firmenwagen-branding.jpg") center/cover no-repeat;
}
.eo-promo-tile--angebote { background: var(--red); }
.eo-promo-tile--nachhaltig { background: #2d4a3e; }
.eo-promo-tile-body {
  position: relative;
  z-index: 2;
  padding: 14px 16px;
  color: #fff;
  width: 100%;
}
.eo-promo-label {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(255,255,255,.18);
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 5px;
}
.eo-promo-tile-body h3 {
  margin: 0 0 3px;
  font-size: .95rem;
  font-weight: 700;
  font-family: var(--font-brand);
  line-height: 1.2;
}
.eo-promo-tile-body p {
  margin: 0 0 10px;
  font-size: .76rem;
  opacity: .85;
  line-height: 1.35;
}
.eo-promo-btn {
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  font-size: .74rem;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .15s;
  white-space: nowrap;
}
.eo-promo-btn:hover { background: rgba(255,255,255,.3); }

/* --------------------------------------------------------------------------
   Products Section
   -------------------------------------------------------------------------- */
.eo-products-section {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 28px 32px;
}
.eo-products-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 12px;
}
.eo-products-title {
  font-size: 1.35rem;
  font-weight: 700;
  font-family: var(--font-brand);
  margin: 0;
  letter-spacing: .01em;
}
.eo-products-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.eo-sort-select {
  padding: 7px 12px;
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  font-size: .83rem;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg-cream);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  padding-right: 30px;
}
.eo-sort-select:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.eo-search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-cream);
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  color: var(--text-light, #999);
}
.eo-search-wrap input[type="search"] {
  border: none;
  background: none;
  outline: none;
  font-size: .83rem;
  font-family: var(--font-body);
  color: var(--text);
  width: 160px;
}
.eo-search-wrap input[type="search"]::placeholder { color: var(--text-light, #aaa); }

/* --------------------------------------------------------------------------
   Product Grid
   -------------------------------------------------------------------------- */
.eo-product-grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}

/* --------------------------------------------------------------------------
   Product Card
   -------------------------------------------------------------------------- */
.eo-product-card {
  border: 1px solid #ebebeb;
  border-radius: var(--radius);
  /* overflow:hidden removed – image-wrap has its own; keeps action buttons fully visible */
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
  background: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
}
.eo-product-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.13);
  transform: translateY(-3px);
}
.eo-product-card:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.eo-product-card--oos { opacity: .72; }
.eo-product-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-cream);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eo-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.eo-product-card:hover .eo-product-img img { transform: scale(1.05); }
.eo-product-no-img { color: #ccc; }
.eo-product-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  z-index: 2;
}
.eo-product-badge--sold { background: #e53935; color: #fff; }
.eo-product-body {
  padding: 12px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.eo-product-name {
  font-size: .88rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.eo-price-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: auto;
}
.eo-product-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--red);
}
.eo-old-price {
  font-size: .78rem;
  color: var(--text-light, #999);
  text-decoration: line-through;
}
.eo-add-to-cart {
  margin-top: 8px;
  width: 100%;
  padding: 11px 10px;
  min-height: 44px;
  background: var(--nav-bg);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .78rem;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background .15s;
  white-space: nowrap;
}
.eo-add-to-cart:hover { background: var(--red); }
.eo-add-to-cart:disabled { opacity: .6; cursor: wait; }

/* --------------------------------------------------------------------------
   Skeleton
   -------------------------------------------------------------------------- */
.eo-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}
.eo-product-skeleton {
  border-radius: var(--radius);
  height: 280px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: eo-shimmer 1.4s infinite;
}
@keyframes eo-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   States
   -------------------------------------------------------------------------- */
.eo-state-msg {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-light, #999);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.eo-state-msg svg { opacity: .3; }
.eo-state-msg--error { color: var(--red); }
.eo-state-msg--error svg { opacity: .5; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.eo-products-pagination {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .eo-promo-grid { grid-template-columns: repeat(2, 1fr); }
  .eo-promo-tile { min-height: 180px; }
  .eo-shop-layout   { grid-template-columns: 210px 1fr; gap: 20px; }
}
@media (max-width: 1024px) {
  .eo-shop-layout   { grid-template-columns: 190px 1fr; gap: 16px; }
  .eo-products-section { padding: 20px 16px 28px; }
}
@media (max-width: 768px) {
  .eo-shop-layout   { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  /* Products grid first on mobile; promo sections hidden */
  .eo-shop-content  { display: flex; flex-direction: column; }
  .eo-products-section { order: -1; }
  .eo-featured-section,
  .eo-neue-section,
  .eo-brands-section,
  .eo-sets-section  { display: none; }
  .eo-promo-grid    { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 0; }
  .eo-promo-tile    { min-height: 150px; }
  .eo-product-grid-inner, .eo-skeleton-grid { grid-template-columns: repeat(2, 1fr); }
  .eo-products-section { border-radius: 0; box-shadow: none; padding: 20px 16px 28px; }
  .eo-search-wrap input[type="search"] { width: 120px; }
}
@media (max-width: 480px) {
  .eo-promo-grid    { grid-template-columns: 1fr; }
  .eo-product-grid-inner, .eo-skeleton-grid { grid-template-columns: repeat(2, 1fr); }
  .eo-products-header { flex-direction: column; align-items: flex-start; }
  .eo-products-controls { width: 100%; }
  .eo-search-wrap   { flex: 1; }
  .eo-search-wrap input[type="search"] { width: 100%; flex: 1; }
}

/* ==========================================================================
   Ecwid ProductBrowser – portal integration
   ========================================================================== */

/* Container: prevents layout jump while Ecwid loads asynchronously */
.eo-ecwid-widget {
  min-height: 400px;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
}
/* Shimmer placeholder while the widget DOM is still empty */
.eo-ecwid-widget:empty {
  animation: eo-shimmer 1.4s infinite;
}

/* ─── entfernt: Hide Ecwid category tiles (Option B, April 2026) ─── */

/* Widget uses full width of .eo-shop-content */
#my-store-13712037 { width: 100%; }

/* Ecwid hidden service layer – provides Cart + product overlay only */
.eo-ecwid-service-layer {
  position: fixed !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -999 !important;
}

@media (max-width: 768px) {
  .eo-ecwid-widget { min-height: 300px; border-radius: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PARENT CATEGORY OVERVIEW  (Portal Layer)
   Zeigt Unterkategorie-Kacheln + Produkt-Previews wenn ein Parent-Tab
   oder Parent-Sidebar-Button mit Kindern aktiviert wird.
   ══════════════════════════════════════════════════════════════════════════ */

.eo-category-overview {
  background: var(--cream, #f5f0e8);
  border-radius: 8px;
  padding: 16px 20px 20px;
  margin-bottom: 24px;
}

/* Eyebrow label (z. B. "Kategorie") */
.eo-eyebrow {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red, #C61F26);
  margin: 0 0 8px;
}

/* Header-Bereich: Eyebrow + Headline + Beschreibungstext */
.eo-category-overview-header {
  margin-bottom: 28px;
}

.eo-category-overview-header h2 {
  font-family: var(--font-brand, "Bevan", serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
  line-height: 1.2;
}

.eo-category-overview-header p {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.95rem;
  color: #555;
  margin: 0;
  max-width: 640px;
}

/* ── Subcategory-Kacheln ─────────────────────────────────────────────────── */

.eo-subcategory-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 24px;
}

.eo-subcategory-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px 8px;
  background: #fff;
  border: 1px solid #ddd8d0;
  border-left: 4px solid var(--nav-bg, #2e3133);
  border-radius: 4px;
  min-height: 54px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body, 'Inter', sans-serif);
  color: #222;
  transition: border-left-color 0.15s, box-shadow 0.15s, transform 0.12s;
  word-break: break-word;
  hyphens: auto;
}

.eo-subcategory-tile:hover {
  border-left-color: var(--red, #C61F26);
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.eo-subcategory-tile:focus-visible {
  outline: 2px solid var(--red, #C61F26);
  outline-offset: 2px;
}

.eo-subcategory-tile--active {
  border-left-color: var(--red, #C61F26);
  background: #fff9f9;
}

.eo-subcategory-tile--active .eo-subcategory-tile-title {
  color: var(--red, #C61F26);
}

.eo-subcategory-tile-title {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  line-height: 1.2;
}

.eo-subcategory-tile-count {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.68rem;
  color: #888;
  font-weight: 400;
}

.eo-subcategory-tile-cta {
  display: none;
}

/* ── Produktgruppen ──────────────────────────────────────────────────────── */

.eo-category-overview-groups {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.eo-category-product-group {
  /* jede Unterkategorie als Block */
}

.eo-category-product-group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.eo-category-product-group-title {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  margin: 0;
}

.eo-category-more-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border: 1.5px solid var(--red, #C61F26);
  border-radius: 4px;
  background: transparent;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--red, #C61F26);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.eo-category-more-link:hover {
  background: var(--red, #C61F26);
  color: #fff;
}

/* ── Produktgitter ───────────────────────────────────────────────────────── */

.eo-category-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ── Produktkarte ────────────────────────────────────────────────────────── */

.eo-category-product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e0dbd4;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.eo-category-product-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-color: #c5bfb7;
}

.eo-category-product-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #ede8df;
}

.eo-category-product-image--placeholder {
  background: #ede8df;
}

.eo-category-product-meta {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.eo-category-product-title {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.825rem;
  font-weight: 500;
  color: #222;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eo-category-product-price {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--red, #C61F26);
  margin-top: auto;
  padding-top: 4px;
}

/* ── Unavailable-Produkte ────────────────────────────────────────────────── */

.eo-category-product-card[data-unavailable="true"] {
  opacity: 0.55;
}

/* ── Fallback-Meldung ────────────────────────────────────────────────────── */

.eo-category-overview-fallback {
  padding: 24px;
  background: #fff;
  border: 1px solid #e0dbd4;
  border-radius: 6px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9rem;
  color: #666;
  text-align: center;
}

/* ── Skeleton Loading ────────────────────────────────────────────────────── */

@keyframes eoSkeletonPulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

.eo-skeleton {
  background: #e0dbd4;
  border-radius: 4px;
  animation: eoSkeletonPulse 1.4s ease-in-out infinite;
}

.eo-skeleton--title {
  height: 22px;
  width: 180px;
}

.eo-skeleton--card {
  height: 160px;
  border-radius: 6px;
}

/* ── Leere Produktgruppe (API liefert keine Produkte für diese Unterkategorie) */
.eo-category-product-group--empty .eo-category-product-group-header {
  border-bottom: 1px dashed #d8d2cc;
  padding-bottom: 12px;
  margin-bottom: 0;
  opacity: 0.7;
}

.eo-category-product-group--empty .eo-category-more-link {
  opacity: 0.75;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .eo-category-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .eo-category-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .eo-subcategory-tiles {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 6px;
  }

  .eo-category-overview {
    padding: 24px 16px 32px;
  }
}

@media (max-width: 600px) {
  .eo-category-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .eo-category-overview-header h2 {
    font-size: 1.4rem;
  }

  .eo-subcategory-tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .eo-category-product-group-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .eo-subcategory-tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

/* ==========================================================================
   PORTAL PRODUCT CARD  (used by search results + featured section)
   ========================================================================== */

.eo-product-card-img-wrap {
  position: relative;
  width: 100%;
  padding-top: 75%;
  overflow: hidden;
  background: var(--cream, #f5f0e8);
}

.eo-product-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.eo-product-card:hover .eo-product-card-img {
  transform: scale(1.08);
}

.eo-product-card-img--placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f0ece4 0%, #e8e4dc 100%);
}

/* ── Produktkachel Bildslider ──────────────────────────────────── */
.eo-card-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.eo-card-slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.32s ease;
  will-change: transform;
}

.eo-card-slider-track img {
  width: 100%;
  height: 100%;
  flex: 0 0 100%;
  object-fit: cover;
}

.eo-card-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.eo-product-card:hover .eo-card-slider-btn,
.eo-product-card:focus-within .eo-card-slider-btn {
  opacity: 1;
}

/* Touch devices: slider buttons always visible (no hover available) */
@media (pointer: coarse) {
  .eo-card-slider-btn {
    opacity: 1;
    width: 34px;
    height: 34px;
    font-size: 1.3rem;
  }
}

.eo-card-slider-btn--prev { left: 5px; }
.eo-card-slider-btn--next { right: 5px; }

.eo-card-slider-dots {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 3;
}

.eo-card-slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.2s, transform 0.2s;
}

.eo-card-slider-dot--active {
  background: #fff;
  transform: scale(1.25);
}
/* ── End Produktkachel Bildslider ───────────────────────────────── */

.eo-product-card-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
  z-index: 1;
}

.eo-product-badge--sale {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--red, #C61F26);
  color: #fff;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.eo-product-badge--new {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 3px;
  background: #1a7a3a;
  color: #fff;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.eo-product-card-body {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;
  flex: 1;
  gap: 6px;
}

.eo-product-card-title {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eo-product-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.eo-product-card-price {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--red, #C61F26);
  line-height: 1;
}

.eo-product-card-compare {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.78rem;
  color: #999;
  text-decoration: line-through;
}

.eo-product-card-savings {
  display: inline-block;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  color: #1a7a3a;
  background: #e8f5ec;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.03em;
}

.eo-product-card-shipping {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.78rem;
  color: var(--eo-text-muted, #888);
}

.eo-product-card-cta {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  color: var(--red, #C61F26);
  font-weight: 600;
  margin-top: auto;
}

/* ── Product action buttons (add-to-cart + view) ──────────────────────────── */

.eo-product-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.eo-product-button {
  min-width: 0;
  padding: 11px 10px;
  min-height: 44px;
  border-radius: var(--radius-sm, 4px);
  font-size: .78rem;
  font-weight: 700;
  font-family: var(--font-body, 'Inter', sans-serif);
  cursor: pointer;
  border: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  line-height: 1;
}

/* Icon-only cart button — compact square */
.eo-product-button--cart {
  flex: 0 0 48px;
  width: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--red, #C61F26);
  color: #fff;
  overflow: visible;
}
.eo-product-button--cart:hover { background: var(--red-dark); }

.eo-product-button-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  pointer-events: none;
}

.eo-product-button-plus {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  margin-top: -1px;
  pointer-events: none;
}

/* "Ansehen →" button fills remaining width */
.eo-product-button--view {
  flex: 1;
  background: transparent;
  color: var(--text, #1a1a1a);
  border: 1px solid #ddd8d0;
}
.eo-product-button--view:hover {
  background: var(--cream, #f5f0e8);
}

/* Responsive — narrow mobile */
@media (max-width: 480px) {
  .eo-product-button--view {
    padding: 10px 6px;
    font-size: 0.72rem;
    min-height: 40px;
  }
  .eo-product-button--cart {
    flex: 0 0 44px;
    width: 44px;
    min-height: 40px;
  }
}

@media (max-width: 380px) {
  .eo-product-button--view {
    padding: 11px 10px;
    font-size: .78rem;
    min-height: 44px;
  }
  .eo-product-button--cart {
    flex: 0 0 48px;
    width: 48px;
    min-height: 44px;
  }
}

/* ==========================================================================
   PORTAL PRODUCT GRID  (catalog + search results grid)
   ========================================================================== */

/* Sort control */
.eo-sort-control {
  padding: 7px 30px 7px 10px;
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-white, #fff);
  border: 1px solid #ddd8d0;
  color: var(--text, #1a1a1a);
  font-size: .82rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
.eo-sort-control:focus {
  border-color: var(--red, #C61F26);
  outline: none;
}

/* Empty / error state */
.eo-shop-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: #888;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9rem;
}

.eo-portal-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.eo-portal-product-grid > * {
  min-width: 0; /* KRITISCH: verhindert Grid-Überlauf bei langen Produktnamen */
}

@media (min-width: 1440px) {
  .eo-portal-product-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 1024px) {
  .eo-portal-product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .eo-portal-product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .eo-portal-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media (max-width: 380px) {
  .eo-portal-product-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SEARCH RESULTS SECTION
   ========================================================================== */

.eo-portal-catalog {
  margin-bottom: 32px;
}

.eo-search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

#eo-catalog-count {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  color: #666;
  margin: 0;
}

#eo-search-clear {
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 14px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8rem;
  color: #444;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

#eo-search-clear:hover {
  border-color: var(--red, #C61F26);
  color: var(--red, #C61F26);
}

.eo-search-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 16px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.95rem;
  color: #888;
}

#eo-search-pagination {
  text-align: center;
  margin-top: 24px;
}

#eo-load-more-btn {
  background: transparent;
  border: 2px solid var(--red, #C61F26);
  color: var(--red, #C61F26);
  border-radius: 4px;
  padding: 10px 32px;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

#eo-load-more-btn:hover {
  background: var(--red, #C61F26);
  color: #fff;
}

/* ==========================================================================
   PORTAL SKELETON CARDS
   ========================================================================== */

@keyframes eo-portal-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.eo-product-card-skeleton {
  border-radius: 8px;
  height: 300px;
  background: linear-gradient(
    90deg,
    #f0ece4 25%,
    #e8e4dc 50%,
    #f0ece4 75%
  );
  background-size: 800px 100%;
  animation: eo-portal-shimmer 1.4s infinite linear;
}

/* ==========================================================================
   PROMO STRIP – Highlights + Neue Eingetroffen über der Suche
   ========================================================================== */

.eo-promo-strip {
  background: #fff;
  padding: 40px 0 32px;
  border-bottom: 1px solid #e8e4dc;
}

/* Innerhalb des Promo-Strips: kein oberer Rand beim ersten Block */
.eo-promo-strip .eo-featured-section {
  border-top: none;
  padding-top: 0;
}

/* Trennlinie zwischen Highlights und Neu Eingetroffen */
.eo-promo-strip .eo-neue-section {
  border-top: 1px solid #e8e4dc;
  padding-top: 24px;
  margin-top: 8px;
}

/* ─── Landscape card layout for Promo-Strip Highlights ─── */
.eo-promo-strip .eo-product-card {
  flex-direction: row;
  /* No fixed height: the body (title + price + MwSt + condition + stock + shipping
     + button) is taller than the old 148px, and with justify-content:center the
     overflow spilled ABOVE the top border (the price sat over the card edge).
     Let the card grow to its content; the grid keeps all cards equal height. */
}
.eo-promo-strip .eo-product-card-img-wrap {
  width: 42%;
  flex-shrink: 0;
  padding-top: 0;       /* remove the aspect-ratio trick */
  align-self: stretch;  /* fill the now content-driven card height */
  border-radius: var(--radius) 0 0 var(--radius);
}
.eo-promo-strip .eo-product-card-body {
  padding: 10px 13px;
  justify-content: center;
  gap: 3px;
}
.eo-promo-strip .eo-product-card-title {
  -webkit-line-clamp: 3;
  font-size: 0.82rem;
}
.eo-promo-strip .eo-product-button--cart { display: none; }
.eo-promo-strip .eo-product-button--view {
  font-size: 0.74rem;
  padding: 5px 10px;
}
.eo-promo-strip .eo-product-card-skeleton { height: 148px; }
/* Hover lift unchanged on desktop */
.eo-promo-strip .eo-product-card:hover { transform: translateY(-2px); }

/* Responsive: collapse landscape → portrait on small screens */
@media (max-width: 600px) {
  .eo-promo-strip .eo-product-card { flex-direction: column; height: auto; }
  .eo-promo-strip .eo-product-card-img-wrap {
    width: 100%;
    height: auto;
    padding-top: 75%;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .eo-promo-strip .eo-product-card-skeleton { height: 240px; }
}

/* ==========================================================================
   FEATURED / HIGHLIGHTS SECTION
   ========================================================================== */

.eo-featured-section {
  margin-bottom: 28px;
  border-top: 2px solid #e8e4dc;
  padding-top: 20px;
}

.eo-featured-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.eo-featured-header h2 {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  margin: 0;
}

.eo-featured-all-btn {
  background: transparent;
  border: none;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8rem;
  color: var(--red, #C61F26);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.eo-featured-all-btn:hover {
  text-decoration: underline;
}

/* Highlight-Kacheln: Produktname darf 3 Zeilen zeigen */
#eo-highlights-row .eo-product-card-title {
  -webkit-line-clamp: 3;
  min-height: 0;
}

.eo-featured-scroll {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 768px) {
  .eo-featured-scroll {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .eo-featured-scroll { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   BREADCRUMB NAVIGATION
   ========================================================================== */

.eo-breadcrumb {
  margin-bottom: 16px;
}

.eo-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8rem;
  color: #888;
}

.eo-breadcrumb-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--red, #C61F26);
  font-size: 0.8rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.eo-breadcrumb-link:hover { color: var(--red-dark); }

.eo-breadcrumb-sep {
  color: #bbb;
  font-size: 0.75rem;
  user-select: none;
}

/* ==========================================================================
   HOME VIEW – CATEGORY TILE GRID
   ========================================================================== */

.eo-home-view {
  margin-bottom: 32px;
}

.eo-home-view-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  .eo-home-view-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .eo-home-view-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .eo-home-view-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
  .eo-home-view-grid { grid-template-columns: 1fr; }
}

.eo-category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  background: var(--bg-white, #fff);
  border: 1px solid #e8e4dc;
  border-radius: var(--radius, 6px);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  text-align: center;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.eo-category-tile:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transform: translateY(-2px);
}

.eo-category-tile-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 4px;
}

.eo-category-tile-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
}

.eo-category-tile-count {
  font-size: 0.75rem;
  color: #888;
}

/* ==========================================================================
   PORTAL PRODUCT DRAWER
   ========================================================================== */

.eo-product-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.eo-product-drawer[hidden] {
  display: none;
}

.eo-product-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  cursor: pointer;
  z-index: 1;
}

.eo-product-drawer-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 960px;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  overflow-y: auto;
  padding: 56px 28px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 48px rgba(0, 0, 0, 0.18);
}

.eo-product-drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid #ddd8d0;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  line-height: 1;
  transition: background 0.15s;
  flex-shrink: 0;
  z-index: 1;
}

.eo-product-drawer-close:hover {
  background: #f5f0e8;
}

/* ── Product Detail Layout ─────────────────────────────────────────────── */

.eo-product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  flex: 1;
}

/* Desktop: give the product image more room (image-favoured 1.35:1, "Stufe B").
   Stays 1fr 1fr on tablets (641–899px) and stacks at ≤640px (see mobile query). */
@media (min-width: 900px) {
  .eo-product-detail { grid-template-columns: 1.35fr 1fr; }
}

.eo-product-detail-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eo-product-detail-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.1s ease;
  will-change: transform;
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}

.eo-product-detail-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #f5f0e8;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
}

.eo-product-detail-image-wrap:hover .eo-product-detail-image {
  transform: scale(2);
}

.eo-product-detail-image-wrap.is-swiping {
  cursor: grabbing;
}

.eo-product-detail-image--placeholder {
  background: #eeeae3;
  border-radius: 6px;
}

.eo-product-detail-gallery {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.eo-product-detail-thumb {
  width: 72px;
  height: 72px;
  padding: 3px;
  border: 2px solid #ddd8d0;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  background: #f5f0e8;
  transition: border-color 0.15s;
}

.eo-product-detail-thumb:hover,
.eo-product-detail-thumb--active {
  border-color: var(--red, #C61F26);
}

.eo-product-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.eo-product-detail-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eo-product-detail-title {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #1a1a1a;
}

.eo-product-detail-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.eo-product-detail-avail {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.eo-product-detail-avail--in {
  background: #e6f4ea;
  color: #1a7a35;
}

.eo-product-detail-avail--out {
  background: #fdecea;
  color: #b71c1c;
}

/* Stock quantity badge (product detail drawer) */
.eo-product-detail-stock {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(46,49,51,.07);
  color: #555;
}
.eo-product-detail-stock--low {
  background: #fff3e0;
  color: #c75f00;
  font-weight: 700;
}

.eo-product-cat-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(46,49,51,.55);
  padding: 3px 8px;
  background: rgba(46,49,51,.06);
  border-radius: 999px;
  white-space: nowrap;
}
.eo-product-cat-count svg { color: rgba(46,49,51,.4); flex-shrink: 0; }

.eo-product-detail-price {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--red, #C61F26);
  letter-spacing: 0.01em;
}

.eo-product-detail-attrs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  font-size: 0.84rem;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.eo-product-detail-attrs dt {
  color: #666;
  font-weight: 600;
}

.eo-product-detail-attrs dd {
  color: #1a1a1a;
  margin: 0;
}

.eo-product-detail-description {
  font-size: 0.87rem;
  line-height: 1.7;
  color: #4a4a4a;
  max-height: 180px;
  overflow-y: auto;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.eo-product-detail-description * {
  max-width: 100%;
}

.eo-product-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.eo-product-detail-actions .eo-product-button {
  flex: 1;
  padding: 11px 16px;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

/* Drawer cart button: icon-only, compact — don't stretch */
.eo-product-detail-actions .eo-product-button--cart {
  flex: 0 0 auto;
  padding: 11px 20px;
  min-width: 56px;
}

.eo-product-button--inquiry {
  background: transparent;
  color: #1a1a1a;
  border: 1px solid #ddd8d0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.eo-product-button--inquiry:hover {
  background: #f5f0e8;
  color: #1a1a1a;
  text-decoration: none;
}

/* Icon inside drawer buttons */
.eo-btn-icon {
  flex-shrink: 0;
  vertical-align: middle;
}

/* Sofort-kaufen Button im Drawer */
.eo-product-button--buynow {
  background: #1a1a1a;
  color: #fff;
  border: 2px solid #1a1a1a;
  flex-basis: 100%;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.eo-product-button--buynow:hover:not(:disabled) {
  background: #333;
  border-color: #333;
  color: #fff;
}

/* CTA hierarchy in the product drawer (D): primary = "In den Warenkorb" (full width,
   red), secondary row = "Direkt kaufen" + "Anfrage" (ghost). Scoped to the drawer. */
.eo-product-detail-actions .eo-product-button--cart {
  flex: 0 0 100%;
  min-width: 0;
  order: -1;
  font-size: 0.95rem;
}
.eo-product-detail-actions .eo-product-button--buynow {
  flex: 1 1 0;
  flex-basis: 0;
  background: transparent;
  color: var(--text-dark);
  border-color: var(--border);
}
.eo-product-detail-actions .eo-product-button--buynow:hover:not(:disabled) {
  background: var(--bg-cream);
  border-color: var(--text-mid);
  color: var(--text-dark);
}
.eo-cart-btn-label { white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────────────────
   PRODUCT DRAWER – WISHLIST (MERKZETTEL) & SOCIAL SHARING
   ───────────────────────────────────────────────────────────────────────── */
.eo-product-detail-wishlist,
.eo-product-detail-share {
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid #eee;
}

.eo-product-detail-section-title {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #999;
  margin: 0 0 10px;
}

/* Wishlist / Favorit button */
.eo-product-wishlist-drawer-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border: 1px solid #ddd8d0;
  border-radius: 6px;
  background: #fff;
  color: #555;
  font-size: 0.875rem;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  line-height: 1;
}
.eo-product-wishlist-drawer-btn:hover {
  border-color: var(--red, #C61F26);
  color: var(--red, #C61F26);
  background: #fff8f8;
}
.eo-product-wishlist-drawer-btn--saved {
  border-color: var(--red, #C61F26);
  color: var(--red, #C61F26);
  background: #fff8f8;
}

/* Social share buttons row */
.eo-product-share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.eo-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  line-height: 1;
  white-space: nowrap;
}
.eo-share-btn:hover {
  opacity: 0.85;
  text-decoration: none;
  transform: translateY(-1px);
}
.eo-share-btn--facebook {
  background: #1877F2;
  color: #fff;
}
.eo-share-btn--twitter {
  background: #000;
  color: #fff;
}
.eo-share-btn--pinterest {
  background: #E60023;
  color: #fff;
}

.eo-product-detail-loading {
  text-align: center;
  padding: 60px 20px;
  color: #888;
  font-size: 0.95rem;
}

.eo-product-detail-error {
  text-align: center;
  padding: 60px 20px;
  color: #b71c1c;
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* Mobile: full-screen drawer */
@media (max-width: 640px) {
  .eo-product-drawer-panel {
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 52px 16px 0 16px;
  }

  .eo-product-detail {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 80px;
  }

  /* Sticky action buttons at bottom of drawer on mobile.
     wrap (not nowrap) so the D hierarchy holds: primary "In den Warenkorb" full
     width, "Direkt kaufen" + "Anfrage" on a second row — otherwise the 3 buttons
     cram into one row and overflow/clip on narrow phones. */
  .eo-product-detail-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 0 16px;
    margin-top: 0;
    border-top: 1px solid #eee;
    z-index: 1;
    flex-wrap: wrap;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   TOP BAR USPs
   ───────────────────────────────────────────────────────────────────────── */
.top-bar-usps {
  display: flex;
  gap: 20px;
  align-items: center;
}

.top-bar-usp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: rgba(245, 240, 232, 0.75);
  font-weight: 500;
  white-space: nowrap;
}

.top-bar-usp svg {
  flex-shrink: 0;
  color: rgba(245, 240, 232, 0.6);
}

@media (max-width: 680px) {
  .top-bar-usps {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   HEADER ICON BUTTONS (search, user)
   ───────────────────────────────────────────────────────────────────────── */
.header-icon-btn {
  background: none;
  border: none;
  padding: 7px;
  cursor: pointer;
  color: #fff;
  opacity: 0.8;
  transition: opacity 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}

.header-icon-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

/* ─────────────────────────────────────────────────────────────────────────
   SEARCH SECTION (below hero, above ecwid)
   ───────────────────────────────────────────────────────────────────────── */
.eo-search-section {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 18px 0 6px;
}

.eo-search-bar-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eo-search-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}

.eo-search-text-wrap {
  flex: 1 1 220px;
  position: relative;
  display: flex;
  align-items: center;
}

.eo-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  pointer-events: none;
  flex-shrink: 0;
}

.eo-search-text-input {
  width: 100%;
  padding: 10px 12px 10px 38px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  color: #222;
  outline: none;
  transition: border-color 0.15s;
  background: #fafafa;
}

.eo-search-text-input:focus {
  border-color: var(--red, #C61F26);
  background: #fff;
}

.eo-search-text-input::placeholder {
  color: #bbb;
}

.eo-filter-selects {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}

.eo-filter-select {
  padding: 10px 28px 10px 10px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 0.82rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  color: #444;
  background: #fafafa;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  white-space: nowrap;
}

.eo-filter-select:focus {
  border-color: var(--red, #C61F26);
  background-color: #fff;
}

.eo-search-submit-btn {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   FILTER CHIPS
   ───────────────────────────────────────────────────────────────────────── */
.eo-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0 12px;
}

.eo-filter-chip {
  padding: 5px 14px;
  border: 1.5px solid #ddd;
  border-radius: 20px;
  background: #fff;
  font-size: 0.8rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  color: #555;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}

.eo-filter-chip:hover {
  border-color: var(--red, #C61F26);
  color: var(--red, #C61F26);
}

.eo-filter-chip.active {
  border-color: var(--red, #C61F26);
  color: var(--red, #C61F26);
  background: rgba(204, 34, 34, 0.05);
}

.eo-filter-chip--reset {
  border-color: #ccc;
  color: #888;
}

.eo-filter-chip--reset:hover {
  border-color: #999;
  color: #555;
  background: #f5f5f5;
}

/* ─────────────────────────────────────────────────────────────────────────
   PRODUCT CARD – Wishlist button + Condition indicator
   ───────────────────────────────────────────────────────────────────────── */
.eo-product-card-wishlist {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  z-index: 2;
  color: #888;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.eo-product-card-wishlist:hover {
  background: #fff;
  color: var(--red, #C61F26);
  transform: scale(1.08);
}

.eo-product-condition {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  margin-bottom: 2px;
}

.eo-condition-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.eo-condition-dot--green {
  background: #22aa55;
}

.eo-condition-dot--yellow {
  background: #f5a623;
}

.eo-condition-dot--orange {
  background: #e67e22;
}

.eo-condition-dot--red {
  background: #C61F26;
}

.eo-condition-label {
  font-size: 0.72rem;
  color: #777;
  font-family: var(--font-body, 'Inter', sans-serif);
}

/* Stock indicator on product cards */
.eo-product-card-stock {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.70rem;
  color: #777;
  margin-top: 3px;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.eo-product-card-stock--low {
  color: #c75f00;
  font-weight: 600;
}
.eo-stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  display: inline-block;
}

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE – search section
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .eo-filter-selects {
    gap: 6px;
  }

  .eo-filter-select {
    font-size: 0.78rem;
    padding: 9px 24px 9px 8px;
  }
}

@media (max-width: 680px) {
  .eo-search-input-row {
    flex-direction: column;
  }

  .eo-filter-selects {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .eo-search-submit-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   MOBILE CATEGORIES TOGGLE BUTTON
   ========================================================================== */

.eo-mobile-cats-toggle {
  display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
  .eo-mobile-cats-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 12px 0 0;
    padding: 11px 16px;
    background: #fff;
    border: 1.5px solid #ddd8d0;
    border-radius: var(--radius, 6px);
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
  }

  .eo-mobile-cats-toggle:hover {
    border-color: var(--red, #C61F26);
    background: #fafafa;
  }

  .eo-mobile-cats-toggle[aria-expanded="true"] {
    border-color: var(--red, #C61F26);
    color: var(--red, #C61F26);
    background: #fff9f9;
  }

  /* Sidebar: slide-in drawer from left on mobile */
  .eo-shop-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 85vw);
    z-index: 930;
    background: #fff;
    border: none;
    border-radius: 0;
    padding: 20px 16px;
    margin: 0;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .16);
  }

  .eo-shop-sidebar.eo-sidebar-open {
    transform: translateX(0);
  }
}

/* Backdrop overlay for mobile sidebar drawer */
.eo-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 920;
  cursor: pointer;
}
.eo-sidebar-backdrop.active {
  display: block;
}

/* ==========================================================================
   SIDEBAR FILTER: Preis-Slider + Zustand-Checkboxen
   ========================================================================== */

.eo-sidebar-filter {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e8e4dc;
}

.eo-sidebar-filter-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-light, #999);
  margin: 0 0 10px;
}

/* Price slider */
.eo-price-slider-wrap { display: flex; flex-direction: column; gap: 6px; }

.eo-price-slider {
  width: 100%;
  accent-color: var(--red, #C61F26);
  cursor: pointer;
}

.eo-price-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--text-mid, #555);
}

#eo-price-max-output {
  font-weight: 600;
  color: var(--red, #C61F26);
}

/* Condition checkboxes */
.eo-sidebar-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: .85rem;
  color: var(--text, #1a1a1a);
  cursor: pointer;
  user-select: none;
}

.eo-sidebar-check input[type="checkbox"] {
  accent-color: var(--red, #C61F26);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ==========================================================================
   NEU EINGETROFFEN STRIP
   ========================================================================== */

.eo-neue-section {
  margin-bottom: 28px;
}

.eo-neue-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.eo-neue-header h2 {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  margin: 0;
  flex: 1;
}

.eo-neue-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #1a7a3a;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(26,122,58,.2);
  flex-shrink: 0;
}

/* ==========================================================================
   MARKEN-SPOTLIGHT STRIP
   ========================================================================== */

.eo-brands-section {
  margin-bottom: 28px;
  padding: 16px 0;
  border-top: 1px solid #e8e4dc;
  border-bottom: 1px solid #e8e4dc;
}

.eo-brands-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-light, #999);
  margin: 0 0 12px;
}

.eo-brands-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.eo-brand-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
  background: #fff;
  border: 1.5px solid #ddd8d0;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  text-align: left;
}

.eo-brand-chip:hover {
  border-color: var(--red, #C61F26);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.eo-brand-chip-name {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #1a1a1a;
}

.eo-brand-chip-sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .68rem;
  color: #888;
}

/* ==========================================================================
   KOMPLETT-BÜRO SETS SECTION
   ========================================================================== */

.eo-sets-section {
  margin-bottom: 32px;
  padding: 24px;
  background: var(--panel-beige, #EAE4D8);
  border-radius: 8px;
}

.eo-sets-header {
  margin-bottom: 20px;
}

.eo-sets-header h2 {
  font-family: var(--font-brand, 'Bevan', serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 4px;
}

.eo-sets-header p {
  font-size: .85rem;
  color: var(--text-mid, #555);
  margin: 0;
}

.eo-sets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.eo-set-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #d8d2c8;
  transition: box-shadow .15s;
}

.eo-set-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

.eo-set-card-icon {
  color: var(--red, #C61F26);
  margin-bottom: 4px;
}

.eo-set-card h3 {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: .95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #1a1a1a;
  margin: 0;
}

.eo-set-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.eo-set-list li {
  font-size: .8rem;
  color: #555;
  padding-left: 14px;
  position: relative;
}

.eo-set-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #1a7a3a;
  font-size: .7rem;
}

.eo-set-price {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--red, #C61F26);
  margin: 4px 0 0;
}

.eo-set-cta {
  display: inline-block;
  margin-top: auto;
  padding: 7px 14px;
  background: var(--nav-bg, #111111);
  color: #fff;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background .15s;
}

.eo-set-cta:hover { background: var(--red, #C61F26); }

@media (max-width: 1024px) {
  .eo-sets-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .eo-sets-grid { grid-template-columns: 1fr; }
  .eo-sets-section { padding: 16px; }
}

/* ==========================================================================
   PROJEKTE SECTION
   ========================================================================== */

.section--projekte { background: var(--bg-page, #F6F4EF); }

/* -----------------------------------------------------------------
   SHOP LOADING STATE  (#eo-shop-loading)
   Visible while catalog/search requests are in flight.
   ----------------------------------------------------------------- */
.eo-shop-loading {
  padding: 0;
}

.eo-shop-loading__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 20px;
  margin: 18px 0 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,244,239,.96));
  border: 1.5px solid rgba(0,0,0,.07);
  border-radius: var(--radius, 8px);
}

.eo-shop-loading__spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(198, 31, 38, .18);
  border-top-color: var(--red, #C61F26);
  animation: eo-shop-loading-spin .7s linear infinite;
  flex-shrink: 0;
}

.eo-shop-loading__text {
  margin: 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-mid, #555);
}

@keyframes eo-shop-loading-spin {
  to { transform: rotate(360deg); }
}

/* -----------------------------------------------------------------
   SHOP ERROR STATE  (#eo-shop-error)
   Shown when catalog or search API calls fail.
   ----------------------------------------------------------------- */
.eo-shop-error {
  padding: 0;
}

.eo-shop-error__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 48px 24px;
  background: var(--white, #fff);
  border: 1.5px solid var(--red-border, rgba(204,34,34,.18));
  border-top: 3px solid var(--red, #C61F26);
  border-radius: var(--radius, 8px);
  max-width: 480px;
  margin: 24px auto;
}

.eo-shop-error__icon {
  color: var(--red, #C61F26);
  opacity: .85;
}

.eo-shop-error__msg {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .9rem;
  color: var(--text-mid, #555);
  line-height: 1.5;
  margin: 0;
}

.eo-shop-error__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red, #C61F26);
  color: #fff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 6px;
  transition: opacity .18s;
}

.eo-shop-error__cta:hover {
  opacity: .88;
}

@media (max-width: 480px) {
  .eo-shop-loading__inner {
    justify-content: flex-start;
    padding: 14px 16px;
    margin: 14px 0 18px;
  }

  .eo-shop-error__inner {
    padding: 32px 16px;
    margin: 16px 0;
    max-width: 100%;
  }
}

/* ==========================================================================
   CHECKOUT PORTAL OVERLAY
   Evil Office branded frame around native Ecwid checkout.
   Matches the Portal product drawer visual language.
   ========================================================================== */

/* Wrapper – pointer-events:none so backdrop + header children handle events */
#eo-checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 8998;
  pointer-events: none;
}

/* Dark semi-transparent backdrop */
.eo-checkout-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8999;
  background: rgba(0, 0, 0, 0.62);
  pointer-events: all;
  cursor: pointer;
}

/* Evil Office branded header bar sits above the Ecwid shell */
.eo-checkout-header-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: 100%;
  max-width: 900px;
  height: 56px;
  z-index: 9100;
  background: #1a1a1a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  pointer-events: all;
  box-shadow: -4px 0 40px rgba(0, 0, 0, 0.35);
  font-family: var(--font-display, 'Oswald', sans-serif);
}

.eo-checkout-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
}

.eo-checkout-logo-icon {
  width: 22px;
  height: 22px;
  color: #c8a87e;
  flex-shrink: 0;
}

.eo-checkout-brand-name {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #c8a87e;
  text-transform: uppercase;
}

.eo-checkout-steps {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-display, 'Oswald', sans-serif);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}
.eo-checkout-step {
  transition: color 0.2s;
}
.eo-checkout-step--active {
  color: #c8a87e;
  font-weight: 600;
}
.eo-checkout-step-sep {
  opacity: 0.3;
  font-size: 0.65rem;
}

/* Close button inside the header bar */
.eo-checkout-close-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  pointer-events: all;
  flex-shrink: 0;
}

.eo-checkout-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Shipping hint line in mini cart footer */
.eo-mini-cart-shipping-hint {
  font-size: 0.77rem;
  color: #6b7280;
  margin: 6px 0 10px;
  padding: 0;
  line-height: 1.4;
}

/* Mobile: full-width checkout header on narrow screens */
@media (max-width: 768px) {
  .eo-checkout-header-bar {
    max-width: 100%;
    left: 0;
    right: 0;
  }
}

/* Mobile: compact header, hide centre title on very narrow screens */
@media (max-width: 480px) {
  .eo-checkout-header-bar {
    height: 52px;
    padding: 0 14px;
    max-width: 100%;
    left: 0;
  }
  .eo-checkout-steps {
    display: none;
  }
}

/* -----------------------------------------------------------------
   MINI-CART ITEM QUANTITY CONTROLS + REMOVE BUTTON
   ----------------------------------------------------------------- */
.eo-mini-cart-item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  gap: 8px;
}

.eo-mini-cart-qty {
  display: flex;
  align-items: center;
  gap: 4px;
}

.eo-mini-cart-qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #d8d4cc;
  background: #fff;
  color: #1a1a1a;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .12s, border-color .12s;
}

.eo-mini-cart-qty-btn:hover {
  background: #f0ece4;
  border-color: #bbb;
}

.eo-mini-cart-qty-num {
  min-width: 22px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a1a;
}

.eo-mini-cart-item-remove {
  background: none;
  border: none;
  color: #999;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color .12s, background .12s;
  white-space: nowrap;
}

.eo-mini-cart-item-remove:hover {
  color: var(--red, #C61F26);
  background: #fdf0f0;
}

/* -----------------------------------------------------------------
   WISHLIST HEART – ACTIVE (SAVED) STATE
   ----------------------------------------------------------------- */
.eo-product-card-wishlist--saved {
  color: var(--red, #C61F26) !important;
  opacity: 1 !important;
}

.eo-product-card-wishlist--saved svg,
.eo-product-card-wishlist--saved::before {
  fill: var(--red, #C61F26);
}

/* =================================================================
   ECWID DATEPICKER / CALENDAR – Fix für Abhol-Zeitauswahl im Checkout
   Ecwid rendert Datepicker-Popups mit position:absolute, die bei
   overflow-y:auto des Shells abgeschnitten werden. Durch position:fixed
   + hohen z-index erscheinen sie korrekt über dem Overlay.
   ================================================================= */
.ec-datepicker,
.ec-datepicker__popup,
.pika-single,
.ec-cart__scheduled-pickup-date-picker,
.ec-form__datepicker-popup,
[class*="ec-datepicker"],
[class*="ec-calendar"],
[class*="dateTimePicker"] {
  position: fixed !important;
  z-index: 9300 !important;
  overflow: visible !important;
}

/* Logo img in checkout overlay header */
.eo-checkout-logo-img {
  height: 32px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
}


/* ── Produktkachel: Versandhinweis ──────────────────────────────────────── */
.eo-product-card-shipping {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-top: 4px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* MwSt-Hinweis unter Preis */
.eo-product-card-vat {
  font-size: 0.68rem;
  color: #9ca3af;
  margin-top: 1px;
  line-height: 1.2;
}
.eo-product-detail-vat {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: #9ca3af;
  margin-top: 2px;
}

/* ── Produktdrawer: Versand & Lieferung ──────────────────────────────────── */
.eo-product-detail-shipping-info {
  border-top: 1px solid #f0f0f0;
  padding-top: 14px;
  margin-top: 14px;
}
.eo-product-detail-section-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.eo-shipping-methods-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eo-shipping-method-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84rem;
  color: #374151;
  line-height: 1.5;
}
.eo-shipping-method-icon {
  flex: 0 0 auto;
  color: #6b7280;
  margin-top: 3px;
}
.eo-shipping-tiers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  margin-top: 4px;
  font-size: 0.78rem;
  color: #6b7280;
}
.eo-shipping-tier-note {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 3px;
}

/* ── Checkout Overlay: Lieferkosten-Strip ───────────────────────────────── */
.eo-checkout-shipping-bar {
  position: fixed;
  right: 0;
  top: 56px;
  width: 100%;
  max-width: 900px;
  height: 40px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  font-size: 0.82rem;
  color: #374151;
  z-index: 9100;
  box-sizing: border-box;
}
.eo-checkout-shipping-bar svg {
  flex: 0 0 auto;
  color: #6b7280;
}
.eo-checkout-shipping-bar strong {
  color: #111827;
}
.eo-checkout-shipping-bar-days {
  color: #6b7280;
}
@media (max-width: 480px) {
  .eo-checkout-shipping-bar {
    font-size: 0.75rem;
    padding: 0 12px;
  }
}

/* == Checkout back button ================================================= */
.eo-checkout-back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 44px;
  padding: 0 12px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  font-size: 0.8rem;
  font-family: var(--font-display, "Oswald", sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.eo-checkout-back-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}
.eo-checkout-back-btn--hidden {
  display: none !important;
}

/* == Injected shipping row in Ecwid order-total panel ==================== */
.eo-injected-shipping-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin: 4px 0;
  font-size: 0.9rem;
  border-radius: 6px;
  gap: 8px;
  animation: eoShipFadeIn 0.25s ease;
}
@keyframes eoShipFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.eo-injected-shipping-row--delivery {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}
.eo-injected-shipping-row--pickup {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0c4a6e;
}
.eo-inj-label {
  font-weight: 500;
}
.eo-inj-label::before {
  content: '🚚 ';
  font-style: normal;
}
.eo-injected-shipping-row--pickup .eo-inj-label::before {
  content: '✓ ';
}
.eo-inj-price {
  font-weight: 700;
  white-space: nowrap;
}

/* == Shipping bar highlight when delivery selected ======================= */
.eo-checkout-shipping-bar--delivery {
  background: #1a3a1a;
  border-bottom-color: #2d6a2d;
}

/* == Ecwid-interne Navigation innerhalb Checkout-Overlay ausblenden ====== */
/* Breadcrumb "Shop / Warenkorb" und alle Footer-/Bottom-Navigationselemente */
#eo-ecwid-shell [class*="breadcrumb"],
#eo-ecwid-shell [class*="Breadcrumb"],
#eo-ecwid-shell [class*="ec-breadcrumbs"],
#eo-ecwid-shell .ec-breadcrumbs,
#eo-ecwid-shell [class*="footer"],
#eo-ecwid-shell [class*="Footer"],
#eo-ecwid-shell [class*="bottom-bar"],
#eo-ecwid-shell [class*="bottomBar"],
#eo-ecwid-shell [class*="BottomBar"],
#eo-ecwid-shell [class*="continue-shopping"],
#eo-ecwid-shell [class*="continueShopping"],
#eo-ecwid-shell [class*="ContinueShopping"],
#eo-ecwid-shell [class*="back-to-shop"],
#eo-ecwid-shell [class*="backToShop"],
#eo-ecwid-shell [class*="catalog-link"],
#eo-ecwid-shell [class*="catalogLink"] {
  display: none !important;
}

/* == Cart Step 1: Shipping picker (delivery/pickup) – Card Layout ========= */
#eo-cart-ship-picker td,
#eo-cart-ship-picker td.ec-cart-summary__cell {
  padding: 8px 0 4px !important;
  background: none !important;
  border: none !important;
}
#eo-cart-ship-picker .eo-csp-inner {
  width: 100% !important;
}
.eo-csp-title {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #9ca3af !important;
  margin-bottom: 8px !important;
}
.eo-csp-cards {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
}
.eo-csp-card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 12px 8px !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #f9fafb !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: border-color 0.15s, background 0.15s !important;
  position: static !important;
  float: none !important;
  box-sizing: border-box !important;
  user-select: none !important;
}
.eo-csp-card input[type="radio"] {
  display: none !important;
}
.eo-csp-card--active {
  border-color: #1a3a1a !important;
  background: #f0fdf4 !important;
}
.eo-csp-card-icon {
  font-size: 1.4rem !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}
.eo-csp-card-label {
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  color: #111827 !important;
  line-height: 1.2 !important;
}
.eo-csp-card--active .eo-csp-card-label {
  color: #14532d !important;
}
.eo-csp-card-price {
  font-weight: 700 !important;
  font-size: 0.97rem !important;
  color: #1a3a1a !important;
  font-family: var(--font-display, 'Oswald', sans-serif) !important;
}
.eo-csp-card--active .eo-csp-card-price {
  color: #166534 !important;
}
.eo-csp-card-sub {
  font-size: 0.69rem !important;
  color: #6b7280 !important;
  margin-top: 1px !important;
  line-height: 1.3 !important;
}
/* Own shipping row (#eo-cart-shipping-row) */
#eo-cart-shipping-row td,
#eo-cart-total-row td {
  padding: 5px 0 !important;
  background: none !important;
  border: none !important;
}
#eo-cart-shipping-row .ec-cart-summary__title,
#eo-cart-shipping-row .ec-cart-summary__price {
  color: #374151 !important;
  font-size: 0.85rem !important;
}
#eo-cart-total-row .ec-cart-summary__title {
  font-weight: 600 !important;
  color: #111827 !important;
}
#eo-cart-total-row .ec-cart-summary__price {
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #1a1a1a !important;
}

/* == Custom Checkout Right Form ========================================== */
/* ======================================================================
   CUSTOM CHECKOUT – Two-column panel (z-index 9001, above Ecwid shell)
   LEFT:  warm cart summary + shipping picker + price rows
   RIGHT: contact / address form + CTA
   ====================================================================== */
#eo-custom-right-form {
  position: fixed;
  top: 96px; /* below dark header (56px) + shipping bar (40px) */
  right: 0;
  left: auto;
  width: 100%;
  max-width: 900px;
  height: calc(100% - 96px);
  display: grid;
  grid-template-columns: 5fr 7fr;
  overflow: hidden;
  z-index: 9001;
  box-shadow: -4px 0 40px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  pointer-events: all;
}

/* ── Left column: warm background ── */
.eo-cf-left {
  background: #f5f1ea;
  overflow-y: auto;
  padding: 24px 20px 32px;
  border-right: 1px solid #e5ddd0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Right column: white form ── */
.eo-cf-right {
  background: #ffffff;
  overflow-y: auto;
  padding: 24px 28px 40px;
}

/* ── Section label (small caps, muted) ── */
.eo-cf-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 10px;
}

/* ── Form headline (right column) ── */
.eo-cf-form-title {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: 0.01em;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid #f3f4f6;
}

/* ── Cart items list ── */
.eo-cf-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eo-cf-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ece6da;
}
.eo-cf-item-img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: #ece6da;
}
.eo-cf-item-img--placeholder {
  background: linear-gradient(135deg, #ece6da 0%, #d5cbbf 100%);
}
.eo-cf-item-info {
  flex: 1;
  min-width: 0;
}
.eo-cf-item-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Quantity row: [-] n [+] */
.eo-cf-item-qty-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}
.eo-cf-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid #d1d5db;
  border-radius: 5px;
  background: #fff;
  color: #374151;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.12s, background 0.12s;
}
.eo-cf-qty-btn:hover { border-color: #C61F26; color: #C61F26; background: #fff5f5; }
.eo-cf-qty-val {
  min-width: 18px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: #111827;
}
/* Right side: remove button + price stacked */
.eo-cf-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  flex-shrink: 0;
  align-self: stretch;
}
.eo-cf-item-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.eo-cf-item-remove:hover { color: #C61F26; background: #fef2f2; }
.eo-cf-item-price {
  font-size: 0.88rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}
.eo-cf-item-skeleton {
  height: 52px;
  background: linear-gradient(90deg, #ece6da 25%, #f5f1ea 50%, #ece6da 75%);
  background-size: 200% 100%;
  animation: eoSkeletonShimmer 1.4s infinite;
  border-radius: 10px;
}
@keyframes eoSkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.eo-cf-items-empty {
  font-size: 0.82rem;
  color: #9ca3af;
  text-align: center;
  padding: 12px 0;
}

/* ── Shipping picker cards ── */
.eo-cf-ship-section { }
.eo-cf-ship-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.eo-cf-ship-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 12px 8px 10px;
  border: 2px solid #e5ddd0;
  border-radius: 11px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.eo-cf-ship-card:hover {
  border-color: #c4bbb0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.eo-cf-ship-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.eo-cf-ship-card--active {
  border-color: #2d6a2d;
  background: #f0fdf4;
  box-shadow: 0 0 0 1px #2d6a2d;
}
.eo-cf-ship-card--active.eo-cf-ship-card--pickup {
  border-color: #1d4ed8;
  background: #eff6ff;
  box-shadow: 0 0 0 1px #1d4ed8;
}
.eo-cf-ship-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.eo-cf-ship-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eo-cf-ship-body strong {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: #374151;
}
.eo-cf-ship-card--active .eo-cf-ship-body strong { color: #166534; }
.eo-cf-ship-card--active.eo-cf-ship-card--pickup .eo-cf-ship-body strong { color: #1e40af; }
.eo-cf-ship-price {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #C61F26;
  letter-spacing: -0.01em;
}
.eo-cf-ship-price--free { color: #166534; }
.eo-cf-ship-card--active.eo-cf-ship-card--pickup .eo-cf-ship-price { color: #1e40af; }
.eo-cf-ship-body small {
  display: block;
  font-size: 0.67rem;
  color: #9ca3af;
  line-height: 1.3;
}

/* ── Price summary in left column ── */
.eo-cf-price-summary {
  border-top: 1px solid #e5ddd0;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eo-cf-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.82rem;
  color: #6b7280;
}
.eo-cf-price-row--total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1.5px solid #e5ddd0;
}
.eo-cf-price-row--total strong {
  font-size: 1.1rem;
  font-weight: 800;
  color: #111827;
  font-family: var(--font-display, 'Oswald', sans-serif);
  letter-spacing: 0.01em;
}

/* ── Form fields (right column) ── */
.eo-crf-field {
  margin-bottom: 14px;
  flex: 1;
  min-width: 0;
}
.eo-crf-field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.eo-crf-field input,
.eo-crf-field select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.93rem;
  color: #111827;
  background: #fafafa;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  box-sizing: border-box;
  font-family: inherit;
}
.eo-crf-field input:focus,
.eo-crf-field select:focus {
  outline: none;
  background: #fff;
  border-color: #C61F26;
  box-shadow: 0 0 0 3px rgba(204, 34, 34, 0.1);
}
.eo-crf-field input.eo-crf--invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}
.eo-crf-field--row {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
}
.eo-crf-field--row .eo-crf-field { margin-bottom: 14px; }
.eo-crf-field--small { flex: 0 0 95px !important; }

/* Pickup info strip */
.eo-crf-pickup-info {
  font-size: 0.82rem;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 11px 14px;
  margin-bottom: 16px;
  line-height: 1.55;
}

/* Error */
.eo-crf-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.84rem;
  margin-bottom: 14px;
  line-height: 1.45;
}

/* Submit button */
.eo-crf-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px;
  background: #C61F26;
  color: #fff;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  margin-top: 8px;
  box-shadow: 0 4px 14px rgba(204, 34, 34, 0.3);
}
.eo-crf-submit:hover:not(:disabled) {
  background: var(--red-dark);
  box-shadow: 0 6px 20px rgba(204, 34, 34, 0.4);
  transform: translateY(-1px);
}
.eo-crf-submit:active:not(:disabled) { transform: translateY(0); }
.eo-crf-submit:disabled { opacity: 0.65; cursor: not-allowed; box-shadow: none; }

/* Confirmation screen – spans both columns */
.eo-crf-confirmation {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  min-height: 100%;
  background: #fff;
}
.eo-crf-confirmation-icon {
  font-size: 3.5rem;
  margin-bottom: 14px;
  display: block;
}
.eo-crf-order-number {
  font-size: 1.2rem;
  font-weight: 700;
  color: #166534;
  margin: 12px 0 6px;
  font-family: var(--font-display, 'Oswald', sans-serif);
  letter-spacing: 0.05em;
}

/* ── Mobile: stack columns ── */
@media (max-width: 700px) {
  #eo-custom-right-form {
    grid-template-columns: 1fr;
    max-width: 100%;
    left: 0;
  }
  .eo-cf-left {
    border-right: none;
    border-bottom: 1px solid #e5ddd0;
    padding: 16px 16px 20px;
    gap: 14px;
    overflow-y: visible;
  }
  .eo-cf-right { padding: 16px 16px 32px; }
  .eo-crf-field--row { flex-direction: column; gap: 0; }
  .eo-crf-field--small { flex: 1 !important; }
}

/* Consent checkboxes */
.eo-crf-consents {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.eo-crf-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
  font-size: 0.77rem;
  color: #374151;
  line-height: 1.45;
}
.eo-crf-consent-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: #C61F26;
  cursor: pointer;
}
.eo-crf-consent-row a {
  color: #C61F26;
  text-decoration: underline;
}
.eo-crf-consent-row a:hover { color: var(--red-dark); }
.eo-crf-consent-row--optional { color: #6b7280; }

/* Legacy .eo-crf-summary hidden (prices moved to left column) */
.eo-crf-summary { display: none !important; }

/* == Search Autocomplete Suggestions ==================================== */
.eo-suggest-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0,0,0,.13);
  z-index: 9000;
  overflow: hidden;
  max-height: 430px;
  overflow-y: auto;
}

.eo-suggest-section {
  padding: 4px 0;
}
.eo-suggest-section + .eo-suggest-section {
  border-top: 1px solid #f2f2f2;
}

.eo-suggest-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #aaa;
  padding: 6px 16px 2px;
  pointer-events: none;
}

.eo-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background .1s;
  outline: none;
}
.eo-suggest-item:hover,
.eo-suggest-item--active {
  background: #f7f7f7;
}

.eo-suggest-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #aaa;
}

.eo-suggest-thumb {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  background: #f0f0f0;
}
.eo-suggest-thumb--placeholder {
  display: inline-block;
  background: #ececec;
}

.eo-suggest-name {
  flex: 1;
  font-size: 13px;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.eo-suggest-name strong {
  color: #8b0000;
  font-weight: 700;
}

.eo-suggest-meta {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
  flex-shrink: 0;
}

.eo-suggest-badge {
  font-size: 10px;
  background: #f0f0f0;
  color: #777;
  padding: 1px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .eo-suggest-panel { max-height: 60vh; border-radius: 0 0 10px 10px; }
  .eo-suggest-thumb { width: 32px; height: 32px; }
}

/* ── In-checkout legal overlay (AGB / Widerruf) ──────────────────────────────
   Opens above the checkout (z-index > #eo-custom-right-form 9001) so closing it
   returns the user to the untouched checkout. */
.eo-legal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.eo-legal-overlay[hidden] { display: none; }
.eo-legal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.eo-legal-panel {
  position: relative;
  z-index: 1;
  width: min(720px, 96vw);
  max-height: 88vh;
  background: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 54px rgba(0, 0, 0, 0.32);
}
.eo-legal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.eo-legal-title { font-weight: 700; font-size: 1.05rem; }
.eo-legal-close {
  background: var(--red, #C61F26);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.eo-legal-close:hover { background: var(--red-dark, #a3151b); }
.eo-legal-body {
  padding: 18px 22px 24px;
  overflow-y: auto;
}
.eo-legal-loading { color: #888; }