/* ===========================
   Pandoz: Header, Suche, Cart
   ===========================
   CLEANUP 2025-12-11:
   - Alte/duplizierte Kategorie-Pill-Styles entfernt
   - Neue Header-Suche nutzt nur pz-searchbar-* Klassen
   - Legacy pz-search (alte Suche) bleibt unverändert
*/

.pandoz-header,
.pandoz-mainheader {
  z-index: 1030;          /* über Content, unter Offcanvas */
  background-color: #fff;
}

/* Topbar (nur Desktop sichtbar) */
.topbar { font-size: 13px; color: #666; }
.topbar a { color: inherit; }
.topbar a:hover { text-decoration: underline; }

/* Suche */
.pz-search { width: 100%; }
.pz-search-input {
  height: 46px;
  padding-left: 14px;
  border-radius: 9999px 0 0 9999px;
}
.pz-search-select {
  max-width: 220px;
  border-right: 0;
  border-radius: 9999px 0 0 9999px;
}
.pz-search-btn {
  height: 46px;
  border: 0;
  color: #fff;
  background: #6717C6;
  border-radius: 0 9999px 9999px 0;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  font-weight: 500;
}
.pz-search-btn:hover { filter: brightness(.95); }
.pz-search-input:focus,
.pz-search-select:focus {
  box-shadow: 0 0 0 .2rem rgba(103,23,198,.15);
  border-color: #cdb3f1;
}

/* Neue Header-Suchleiste (Livewire) */
.pz-search-bar-container{
  position: relative;
  width: 100%;
  max-width: 1180px;
}

.pz-search-bar{
  display:flex;
  align-items:center;
  gap:6px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:0;
  height:auto;
  box-shadow:0 6px 16px rgba(0,0,0,0.04);
  transition: box-shadow .2s ease, border-color .2s ease;
}

.pz-search-bar:focus-within{
  border-color:#7740f2;
  box-shadow:0 10px 30px rgba(119,64,242,0.12);
}

.pz-searchbar-category{
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
}
.pz-searchbar-category-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f6f7fb;
  border: 1px solid #e5e7eb;
  border-radius: 12px 0 0 12px;
  padding: 0 12px;
  height: 44px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pz-searchbar-category-pill:hover{
  background: #eef0f8;
  border-color: #e0e3f0;
  box-shadow: 0 2px 6px rgba(15,23,42,.04);
}
.pz-searchbar-category-label{
  font-weight: 400;
  font-size: 14px;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pz-searchbar-category-arrow{
  flex: 0 0 auto;
  display: inline-flex;
  line-height: 1;
  pointer-events: none;
}
.pz-searchbar-category-menu{
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  min-width: 100%;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding: 6px 0;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 30px rgba(15,23,42,.12);
  z-index: 2100;
}
.pz-searchbar-category-option{
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.pz-searchbar-category-option:hover{
  background: #f3f4ff;
  color: #4b1bb0;
}
.pz-category-dd{
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  min-width: 100%;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 30px rgba(15,23,42,.12);
  padding: 6px 0;
  z-index: 2100;
}
.pz-category-dd-item{
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.pz-category-dd-item:hover{
  background: #f3f4f6;
}

.pz-search-input-wrap{
  position: relative;
  flex:1;
}
.pz-search-input-wrap input{
  width:100%;
  border:0;
  padding:10px 12px;
  font-size:16px;
  outline:none;
  background:transparent;
  height:44px;
}
.pz-search-clear{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:0;
  font-size:18px;
  color:#9ca3af;
}
.pz-search-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.pz-icon-btn{
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .12s ease;
}
.pz-icon-btn:hover{ background:#f6f7fb; border-radius:10px; }
.pz-search-btn{
  height:44px;
  border-radius: 0 12px 12px 0;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#7740f2;
  border:1px solid #7740f2;
  color:#fff;
  font-weight:600;
}
.pz-search-dropdown{
  position:absolute;
  left:0; right:0;
  top:62px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 18px 46px rgba(0,0,0,0.12);
  padding:10px;
  z-index:2000;
  overflow:hidden;
}
.pz-search-loading{
  display:flex;
  align-items:center;
  padding:6px 8px 8px;
}
.pz-search-section + .pz-search-section{ margin-top:10px; border-top:1px solid #f0f2f5; padding-top:8px; }
.pz-search-section-title{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7280;
  font-weight:700;
  margin-bottom:6px;
}
.pz-search-item{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:8px 10px;
  border-radius:10px;
  font-weight:600;
}
.pz-search-item:hover{ background:#f6f7fb; }
.pz-search-product{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  background:transparent;
  padding:8px 10px;
  border-radius:10px;
  text-align:left;
}
.pz-search-product:hover{ background:#f6f7fb; }
.pz-search-product img{
  width:44px;
  height:44px;
  object-fit:contain;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#fff;
}
.pz-search-product-title{ font-weight:700; font-size:14px; }
.pz-search-product-price{ font-weight:600; color:#7740f2; font-size:13px; }
.pz-search-product-meta{ display:flex; flex-direction:column; gap:2px; }

/* LEGACY SEARCH STYLES – not used anymore */
[x-cloak]{ display:none !important; }
/* (alte pz-search-* Klassen wurden durch neue pz-sr-* Klassen ersetzt) */

/* =============== */
/* New Search (pz-sr) – utilities used by filters & sorting */
/* =============== */
.pz-sr-filter-search{
  width:100%;
  border:1px solid #dce0e8;
  border-radius:10px;
  padding:8px 10px;
  font-size:14px;
  background:#fff;
  margin-bottom:8px;
}
.pz-sr-filter-count{ font-size:12px; color:#6b7280; }
.pz-sr-moq-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pz-sr-moq-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pz-sr-filter-mobile-actions{ margin-top:12px; padding-top:12px; border-top:1px solid #eceff4; }
.pz-sr-price-panel{ display:flex; flex-direction:column; gap:10px; }
.pz-sr-price-slider{ position:relative; height:26px; }
.pz-sr-price-slider{ touch-action: pan-y; }
.pz-sr-price-track{ position:relative; height:6px; background:#e5e7eb; border-radius:999px; }
.pz-sr-price-range{ position:absolute; height:6px; background:#6717c6; border-radius:999px; left:0; right:0; pointer-events:none; }
.pz-sr-range{
  position:absolute;
  left:0;
  top:-10px;
  width:100%;
  height:26px;
  background:transparent;
  pointer-events:none;
  -webkit-appearance:none;
  appearance:none;
}
.pz-sr-range--min{ z-index:2; }
.pz-sr-range--max{ z-index:2; }
.pz-sr-range.is-active{ z-index:3; }
.pz-sr-range.is-inactive{ pointer-events:none; }
.pz-sr-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#ffffff;
  border:2px solid #6717c6;
  box-shadow:0 2px 6px rgba(17,24,39,0.15);
  cursor:pointer;
}
.pz-sr-range::-moz-range-thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:#ffffff;
  border:2px solid #6717c6;
  box-shadow:0 2px 6px rgba(17,24,39,0.15);
  cursor:pointer;
}
.pz-sr-price-presets{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:8px;
}
.pz-sr-range-placeholder{ margin-top:8px; font-size:12px; color:#6b7280; padding:8px 10px; border:1px dashed #e4e7ec; border-radius:10px; background:#f9fafb; }
.pz-sr-filter-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.pz-sr-filter-attribute + .pz-sr-filter-attribute{ margin-top:10px; }
.pz-sr-attribute-name{ font-weight:600; font-size:13px; margin-bottom:6px; }
.pz-sr-filter-actions{ display:flex; flex-direction:column; gap:8px; }
.pz-sr-btn-secondary{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 14px; border-radius:10px; background:#fff; color:#111827; border:1px solid #d6d7e0; font-weight:700; }
.pz-sr-chip{ border:1px solid #d6d7e0; background:#fff; border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; color:#1f2937; display:inline-flex; gap:6px; align-items:center; transition:all .15s ease; }
.pz-sr-chip.ghost{ background:transparent; }
.pz-sr-chip.is-active{ border-color:#6717c6; color:#6717c6; box-shadow:0 6px 16px rgba(103,23,198,0.18); }
.pz-sr-results{ display:flex; flex-direction:column; gap:12px; }
.pz-sr-loading{ display:none; align-items:center; gap:8px; margin-bottom:12px; }
.pz-sr-loading[wire\\:loading]{ display:flex; }
.pz-sr-sort-panel{ background:#fff; width:320px; max-width:90vw; border-radius:16px; padding:14px; box-shadow:0 10px 26px rgba(17,24,39,0.18); }
.pz-sr-sort-list{ display:flex; flex-direction:column; gap:6px; }
.pz-sr-sort-option{ display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #f1f2f4; }
.pz-sr-sort-option:last-child{ border-bottom:0; }

/* Mobile Suche */
#pzMobileSearch .form-control { border-radius: 9999px 0 0 9999px; }
#pzMobileSearch .pz-search-btn { border-radius: 0 9999px 9999px 0; }

/* ---------------------------------------------------------------
   CATEGORY FILTER SIDEBAR (CATEGORY PAGE)
   --------------------------------------------------------------- */

.pz-filter-sidebar{
    font-size:13px;
    line-height:1.4;
    padding:4px 0 16px;
}

.pz-filter-section{
    padding:6px 0 12px;
    margin-bottom:4px;
}

.pz-filter-section--selected{
    padding-bottom:0;
    margin-bottom:4px;
}

.pz-filter-title{
    font-weight:600;
    font-size:13px;
    margin-bottom:6px;
}

.pz-filter-title-sm{
    font-weight:600;
    font-size:12px;
}

.pz-filter-count{
    font-weight:400;
    color:#6B7280;
}

.pz-filter-reset{
    border:0;
    background:transparent;
    color:#6717C6;
    font-size:11px;
    text-decoration:underline;
    padding:0;
}

.pz-filter-category-list,
.pz-filter-category-children{
    list-style:none;
    padding-left:0;
    margin:0;
}

.pz-filter-category-children{
    padding-left:10px;
    margin-top:4px;
}

.pz-filter-category-item + .pz-filter-category-item{
    margin-top:4px;
}

.pz-filter-link{
    text-decoration:none;
    color:#111827;
    font-size:13px;
}

.pz-filter-link:hover{
    color:#6717C6;
}

.pz-filter-link--strong{
    font-weight:600;
}

.pz-filter-arrow{
    border:0;
    background:transparent;
    width:18px;
    height:18px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:relative;
}

.pz-filter-arrow::before{
    content:'';
    border-style:solid;
    border-width:4px 4px 0 4px;
    border-color:#9CA3AF transparent transparent transparent;
    display:block;
    transform:translateY(1px);
}

.pz-filter-arrow.is-open::before{
    transform:rotate(180deg) translateY(-1px);
}

.pz-filter-arrow:hover{
    background:rgba(103,23,198,.06);
}

.pz-filter-options{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.pz-filter-option{
    display:flex;
    align-items:center;
    border-radius:999px;
    padding:4px 8px;
    cursor:pointer;
    margin:0;
    transition:background .15s ease;
    position:relative;
    user-select:none;
}

.pz-filter-option:hover{
    background:rgba(103,23,198,.06);
}

.pz-filter-option input[type="checkbox"],
.pz-filter-option input[type="radio"]{
    position:absolute;
    opacity:0;
    inset:0;
    margin:0;
    cursor:pointer;
}

.pz-filter-box{
    flex:0 0 18px;
    width:18px;
    height:18px;
    border-radius:4px;
    border:1px solid #d1d5db;
    background:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-right:8px;
    box-sizing:border-box;
    position:relative;
}

.pz-filter-box::after{
    content:"";
    width:6px;
    height:10px;
    border:2px solid #fff;
    border-top:none;
    border-left:none;
    transform:rotate(45deg);
    opacity:0;
    transition:opacity .12s ease;
}

.pz-filter-option input[type="checkbox"]:checked ~ .pz-filter-box,
.pz-filter-option input[type="radio"]:checked ~ .pz-filter-box{
    background:#6717C6;
    border-color:#6717C6;
}

.pz-filter-option input[type="checkbox"]:checked ~ .pz-filter-box::after,
.pz-filter-option input[type="radio"]:checked ~ .pz-filter-box::after{
    opacity:1;
}

.pz-filter-label-text{
    margin-left:0;
    white-space:nowrap;
    color:#111827;
    font-size:13px;
}

.pz-filter-option input[type="checkbox"]:checked ~ .pz-filter-label-text,
.pz-filter-option input[type="radio"]:checked ~ .pz-filter-label-text{
    font-weight:600;
}

.pz-filter-price-form{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.pz-filter-price-btn{
    height:26px;
    margin-top:4px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding-inline:10px;
}

.pz-filter-link--strong{
    font-weight:700;
}

.pz-filter-link--lvl0{
    font-weight:700;
}

.pz-filter-link--lvl1{
    font-weight:600;
}

.pz-filter-link--lvl2{
    font-weight:500;
}

.pz-filter-link--strong{
    font-weight:700;
}

/* Header Buttons */
.btn-dark,
.btn-outline-secondary { border-radius: 9999px; }
.btn-dark { background-color: #000; border: none; }
.btn-dark:hover { background-color: #222; }

/* Account-Dropdown Trigger */
.header-actions .dropdown-toggle { font-weight: 500; cursor: pointer; }
.header-actions .dropdown-toggle .text-dark,
.header-actions .dropdown-toggle .text-primary { font-weight: 500; }

/* Cart */
/* Legacy header cart styles removed in favor of .pz-header-cart */

/* Logo */
.pandoz-logo { height: 48px; max-height: 56px; width: auto; }

/* Mobile: Tools-Link ausblenden (steht im Dropdown) */
@media (max-width: 991.98px){
  .header-actions .link-primary { display: none !important; }
}

.workspace-link {
  transition: all .2s ease;
}
.workspace-link:hover {
  color: #580fb5;
  text-decoration: underline;
}

/* ===========================
   Kategorieleiste + Mega „Alle“
   =========================== */

.pz-cats { z-index: 1030; position: relative; overflow: visible; }

.pz-cats--purple { background:#29005a; color:#fff; border:0; }
.pz-cats--purple .nav-link { color:#fff; opacity:.95; }
.pz-cats--purple .nav-link:hover,
.pz-cats--purple .nav-item.dropdown:hover > .nav-link{
  background: rgba(255,255,255,.12); color:#fff; text-decoration:none;
}

/* Menü: einzeilig, keine Umbrüche */
.pz-cats-menu{
  display:flex; flex-wrap:nowrap; overflow:visible; gap:.25rem; padding:.5rem 0;
}
.pz-cats-menu > li { flex: 0 0 auto; }
.pz-cats-menu .nav-link{ white-space:nowrap; padding:.5rem .75rem; border-radius:9999px; font-weight:500; }

/* Mega „Alle“: Position & Breite */
.pz-cats .dropdown { position: relative; }
.pz-cats .dropdown.pz-cat-all > .dropdown-mega.pz-mega{
  position:absolute; left:0 !important; right:auto !important; top:100%;
  margin-top:10px; transform:none !important; z-index:1055;
  width:640px; max-width:min(96vw, 720px);
}
/* Optionale Spaltentrenner neutralisieren */
.mega-col-single, .mega-col-left, .mega-col-right { border:0 !important; }

/* Sichtbarkeit (Hover/Klick) */
.pz-cats .dropdown .dropdown-menu { display: none; }
.pz-cats .dropdown .dropdown-menu.show { display: block; }

/* Hover erst aktivieren, wenn Seite interaktiv ist */
@media (min-width: 992px){
  html.hover-ready .pz-cats .dropdown:hover > .dropdown-menu {
    display: block;
  }
  html.hover-ready .pz-cats .dropdown .dropdown-menu::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-10px;
    height:10px;
  }
}

/* Progressive Anzeigeanzahl der Kategorien */
@media (max-width: 767.98px){ .pz-cats-menu > li:nth-child(n+4){ display:none; } }
@media (min-width: 768px) and (max-width: 991.98px){ .pz-cats-menu > li:nth-child(n+5){ display:none; } }
@media (min-width: 992px) and (max-width: 1199.98px){ .pz-cats-menu > li:nth-child(n+6){ display:none; } }
@media (min-width: 1200px) and (max-width: 1399.98px){ .pz-cats-menu > li:nth-child(n+7){ display:none; } }
@media (min-width: 1400px) and (max-width: 1699.98px){ .pz-cats-menu > li:nth-child(n+9){ display:none; } }
@media (min-width: 1700px){
  .d-3xl-inline-block{ display:inline-block !important; }
}
@media (max-width: 1699.98px){
  .d-3xl-inline-block{ display:none !important; }
}

/* ===========================
   Account-Dropdown 
   =========================== */

/* Trigger: größerer Hitbereich + dezenter Hover */
.header-actions .pz-account > .dropdown-toggle{
  display:flex; align-items:center; padding:6px 10px; border-radius:6px; white-space:nowrap;
}
.header-actions .pz-account > .dropdown-toggle:hover{
  background: rgba(17, 24, 39, .06); text-decoration:none;
}

/* Box: starr, rechts am Trigger, 2 feste Spalten */
.header-actions .pz-account { position: relative; z-index: 1060; }
.header-actions .pz-account .dropdown-mega{
  position:absolute; top:100%; right:0; left:auto; margin-top:10px;
  width:560px; min-width:560px; max-width:560px;   /* starre Breite (Desktop) */
  padding:14px 16px; border-radius:14px; border:1px solid #e5e7eb; background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.06); box-sizing:border-box;
}

.header-actions .pz-account .mega-body{
  display:grid; grid-template-columns:260px 260px; column-gap:16px; align-items:start;
}
.header-actions .pz-account .mega-col-left{ padding-right:16px; border-right:1px solid #e5e7eb; }
.header-actions .pz-account .mega-col-right{ padding-left:16px; }

/* Typo im Dropdown */
.header-actions .pz-account .mega-title{
  font-size:15px; font-weight:700; margin:0 0 8px 0; color:#111;
}
.header-actions .pz-account .mega-subtitle{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:#6b7280; margin:8px 0 6px; position:relative;
}
.header-actions .pz-account .mega-subtitle::after{
  content:""; display:block; height:1px; background:#e5e7eb; margin-top:6px;
}
.header-actions .pz-account .mega-list{ margin:0; padding:0; list-style:none; }
.header-actions .pz-account .mega-list li + li{ margin-top:4px; }
.header-actions .pz-account .mega-list a{
  display:block; font-size:14px; line-height:1.35; padding:2px 0;
  color:#111; text-decoration:none; white-space:normal;  /* Wrap nur wenn nötig */
}
.header-actions .pz-account .mega-list a:hover{ text-decoration: underline; }

/* CTA-Zone kompakt */
.header-actions .pz-account .mega-sep{
  border:0; border-top:1px solid #e5e7eb; opacity:1; margin:12px 0;
}

/* =========================
   CART – Toast & Slide-In
   ========================= */
.pz-cart-ui-root { position: relative; z-index: 9999; }
.pz-cart-toast-stack{
  --pz-toast-bg: #0f172a;
  --pz-toast-bg-soft: #172340;
  --pz-toast-text: #ffffff;
  --pz-toast-muted: #cbd5e1;
  --pz-toast-meta: #94a3b8;
  --pz-toast-success: #16a34a;
  --pz-toast-error: #ef4444;
  --pz-toast-focus: #93c5fd;
  --pz-toast-primary: var(--pz-violet, #6717C6);
  --pz-toast-shadow: 0 16px 36px rgba(15,23,42,0.34);
  --pz-toast-border: rgba(255,255,255,0.12);

  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  max-width: 380px;
  width: min(380px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.pz-cart-toast{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(103,23,198,0.16) 0%, rgba(103,23,198,0) 52%),
    linear-gradient(180deg, var(--pz-toast-bg-soft) 0%, var(--pz-toast-bg) 100%);
  color: var(--pz-toast-text);
  border-radius: 16px;
  padding: 14px 14px;
  pointer-events: auto;
  opacity: 0.995;
  border: 1px solid var(--pz-toast-border);
  box-shadow: var(--pz-toast-shadow);
}
.pz-cart-toast.is-success{
  --pz-toast-accent: var(--pz-toast-success);
}
.pz-cart-toast.is-error{
  --pz-toast-accent: var(--pz-toast-error);
  --pz-toast-muted: #fecaca;
  --pz-toast-meta: #fecaca;
}
.pz-cart-toast-body{
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: start;
  gap: 12px;
}
.pz-cart-toast-content{
  min-width: 0;
}
.pz-cart-toast-icon{
  width: 32px; height: 32px; border-radius: 999px;
  color:#0f172a;
  display: inline-flex; align-items:center; justify-content:center;
  font-weight: 800; font-size: 16px;
  margin-top: 1px;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
.pz-cart-toast-icon.is-success{ background: var(--pz-toast-success); }
.pz-cart-toast-icon.is-error{ background: var(--pz-toast-error); color:#fff; }
.pz-cart-toast-title{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: #eef2ff;
}
.pz-cart-toast-name{
  font-weight: 700; font-size: 15px; line-height: 1.3;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.pz-cart-toast-variant{
  color: var(--pz-toast-muted);
  font-size: 12px;
  margin-top: 2px;
}
.pz-cart-toast-meta{
  color: var(--pz-toast-meta);
  font-size: 12px;
  margin-top: 6px;
}
.pz-cart-toast-close{
  width: 26px; height: 26px;
  border: 0; border-radius: 8px;
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.pz-cart-toast-close:hover{
  background: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}
.pz-cart-toast-close:focus-visible{
  outline: 2px solid var(--pz-toast-focus);
  outline-offset: 2px;
}
.pz-cart-toast-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.pz-toast-btn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease, transform .12s ease;
}
.pz-toast-btn--primary{
  background: var(--pz-toast-primary);
  color: #fff;
  box-shadow: 0 8px 16px rgba(103,23,198,0.32);
}
.pz-toast-btn--primary:hover{
  background: #5813aa;
  transform: translateY(-1px);
}
.pz-toast-btn--ghost{
  background: rgba(255,255,255,0.06);
  color: #e2e8f0;
  border-color: rgba(255,255,255,0.16);
}
.pz-toast-btn--ghost:hover{
  color: #ffffff;
  background: rgba(255,255,255,0.14);
}
.pz-toast-btn:focus-visible{
  outline: 2px solid var(--pz-toast-focus);
  outline-offset: 2px;
}
.pz-cart-toast-thumb img{
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  display: block;
}

@media (prefers-reduced-motion: reduce){
  .pz-cart-toast,
  .pz-toast-btn,
  .pz-cart-toast-close{
    transition: none !important;
    animation: none !important;
  }
}

.pz-cart-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  backdrop-filter: blur(1px); z-index: 9997; display: none;
}
.pz-cart-drawer-shell{
  position: fixed; top:0; right:0; bottom:0;
  width: min(440px, 100vw); background:#fff;
  box-shadow:-16px 0 40px rgba(0,0,0,0.12);
  z-index: 9998; display: none;
}
.pz-cart-drawer-body{ padding: 18px 18px 22px; height: 100%; overflow-y: auto; }
.pz-cart-drawer-header{ position: sticky; top: 0; background:#fff; padding-bottom: 10px; z-index:1; }
.pz-cart-drawer-close{
  border:none; background:#f3f4f6; width:36px; height:36px; border-radius:10px;
  font-size: 20px; line-height:1; font-weight:700; color:#111827;
}
.pz-cart-items{ display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.pz-cart-item-row{ border:1px solid #e5e7eb; border-radius:12px; padding:10px; }
.pz-cart-thumb img{ width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid #e5e7eb; }
.pz-cart-item-main{ min-width:0; } /* erlaubt Umbruch im Flex-Layout */
.pz-cart-item-title{
  font-weight:700;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
.pz-cart-item-variant{ font-size:13px; }
.pz-cart-item-price{ font-size:13px; }
.pz-cart-item-sum{ font-weight:700; white-space:nowrap; }
.pz-cart-remove{
  background:none; border:none; color:#ef4444; font-weight:600;
  padding:2px; display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.pz-cart-summary{ border-top:1px solid #e5e7eb; padding-top:12px; }
.pz-cart-actions .btn-primary{ border-radius:12px; }
.pz-cart-actions .btn-outline-secondary{ border-radius:12px; }
.pz-cart-empty{ border:1px dashed #e5e7eb; border-radius:12px; }

/* Fallback: erzwinge Drawer/Overlay, falls Alpine nicht reagiert */
.pz-cart-open .pz-cart-overlay{
  display:block !important;
  opacity:1 !important;
}
.pz-cart-open .pz-cart-drawer-shell{
  display:block !important;
  transform:none !important;
  opacity:1 !important;
}

/* zusätzliche Notfall-Klasse, falls Alpine/x-show nicht greift */
.pz-cart-open-force .pz-cart-overlay{
  display:block !important;
  opacity:1 !important;
}
.pz-cart-open-force .pz-cart-drawer-shell{
  display:block !important;
  transform:none !important;
  opacity:1 !important;
}

@media (max-width: 640px){
  .pz-cart-toast-stack{
    right: max(10px, env(safe-area-inset-right));
    top: max(10px, env(safe-area-inset-top));
  }
  .pz-cart-toast{ padding: 12px 12px; }
  .pz-cart-toast-body{
    grid-template-columns: auto minmax(0,1fr);
    grid-template-areas:
      "icon content"
      "thumb thumb";
  }
  .pz-cart-toast-icon{ grid-area: icon; }
  .pz-cart-toast-content{ grid-area: content; }
  .pz-cart-toast-thumb{ grid-area: thumb; }
  .pz-cart-toast-icon{ width: 28px; height: 28px; font-size: 14px; }
  .pz-cart-toast-actions{ width: 100%; grid-template-columns: 1fr 1fr; }
  .pz-cart-toast-thumb{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
  }
  .pz-cart-toast-thumb img{ width: 52px; height: 52px; object-fit: cover; }
  .pz-cart-drawer-body{ padding: 16px; }
  .pz-cart-item-row{ padding: 8px; }
}
.header-actions .pz-account .btn{ border-radius:9999px; height:42px; }

/* Mobile/Tablet: volle Breite + stacked */
@media (max-width: 991.98px){
  .header-actions .pz-account .dropdown-mega{
    right:0; left:0; margin:8px auto 0; width:min(94vw,560px); min-width:0; max-width:94vw;
  }
  .header-actions .pz-account .mega-body{ display:block; }
  .header-actions .pz-account .mega-col-left{ border-right:0; padding-right:0; }
  .header-actions .pz-account .mega-col-right{ padding-left:0; margin-top:12px; }
}

/* ===========================
   Hero/Slider – stabilisieren
   =========================== */

.pz-hero, .home-hero, .section-hero {
  --heroMinH: 320px; --heroPref: 38vw; --heroMaxH: 560px;
  position: relative;
  height: clamp(var(--heroMinH), var(--heroPref), var(--heroMaxH));
  max-height: var(--heroMaxH);
  overflow: hidden;
  border-radius: 16px;
}
.pz-hero > .slick-slider,
.pz-hero > .swiper,
.pz-hero > .swiper-container { height: 100%; }

/* Slick/Swiper Höhen */
.pz-hero .slick-list, .pz-hero .slick-track, .pz-hero .slick-slide { height: 100%; }
.pz-hero .swiper-wrapper, .pz-hero .swiper-slide { height: 100%; }

/* Bilder korrekt einpassen */
/* Nur Landing-/Legacy-Carousel – nicht global */
.pz-hero img, .home-hero img, .section-hero img,
.landing-slider img,
.pz-hero img,
.slick-slide img,
.carousel-item img,
.owl-carousel .item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}


/* Typographie im Hero */
.pz-hero h1, .pz-hero .hero-title{
  margin:0; line-height:1.05; font-weight:800; font-size:clamp(28px, 4.2vw, 56px); letter-spacing:-0.02em;
}
.pz-hero h2, .pz-hero .hero-subtitle{
  margin:.15em 0 0; line-height:1.15; font-weight:700; font-size:clamp(18px, 2.4vw, 28px); opacity:.95;
}
.pz-hero .hero-actions{ margin-top:clamp(8px, 1.5vw, 18px); display:flex; gap:12px; flex-wrap:wrap; }

/* Root-Font neutralisieren (falls woanders vw-basiert) */
html { font-size: 16px; }

/* Nur alte Hero-/Landing-Slider anfassen – NICHT global */
:root { --pz-hero-h: clamp(340px, 44vw, 520px); }
@media (min-width: 1700px){ :root { --pz-hero-h: 600px; } }
@media (max-width: 640px){ :root { --pz-hero-h: clamp(260px, 56vh, 420px); } }
.landing-slider,
.landing-slider .swiper,
.landing-slider .swiper-container,
.landing-slider .swiper-wrapper,
.landing-slider .swiper-slide,
.pz-hero,
.pz-hero .swiper,
.pz-hero .swiper-container,
.pz-hero .swiper-wrapper,
.pz-hero .swiper-slide,
.carousel, .carousel-inner, .carousel-item,
.owl-carousel, .owl-carousel .owl-stage-outer, .owl-carousel .owl-stage{
  height: var(--pz-hero-h) !important;
  max-height: var(--pz-hero-h) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
/* Ratio/Embed-Hacks neutralisieren */
.pz-hero .ratio, .landing-slider .ratio,
.pz-hero .embed-responsive, .landing-slider .embed-responsive{
  padding-top: 0 !important; height: 100% !important;
}
.slick-initialized .slick-list, .slick-initialized .slick-track, .slick-initialized .slick-slide{ height:100% !important; }
/* Auch diese 100%-Regel NICHT global – scopen! */
.landing-slider.swiper-initialized,
.landing-slider .swiper-initialized .swiper-wrapper,
.landing-slider .swiper-initialized .swiper-slide,
.pz-hero .swiper-initialized,
.pz-hero .swiper-initialized .swiper-wrapper,
.pz-hero .swiper-initialized .swiper-slide{
  height:100% !important;
}

/* Positionierung am Trigger (rechts bündig) */
.header-actions .pz-account .pz-account-menu{
  position:absolute; top:100%; right:0; left:auto; margin-top:10px;
  width:560px; min-width:560px; max-width:560px;
  padding:14px 16px;
  border-radius:14px; border:1px solid #e5e7eb; background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.06);
  box-sizing:border-box; z-index:1060;
}

/* 2 fixe Spalten + Divider */
.pz-account-menu .mega-body{
  display:grid; grid-template-columns:260px 260px; column-gap:16px; align-items:start;
}
.pz-account-menu .mega-col-left{ padding-right:16px; border-right:1px solid #e5e7eb; }
.pz-account-menu .mega-col-right{ padding-left:16px; }

/* Typo */
.pz-account-menu .mega-title{ font-size:15px; font-weight:700; margin:0 0 8px; color:#111; }
.pz-account-menu .mega-subtitle{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:#6b7280; margin:8px 0 6px; position:relative;
}
.pz-account-menu .mega-subtitle::after{
  content:""; display:block; height:1px; background:#e5e7eb; margin-top:6px;
}
.pz-account-menu .mega-list{ margin:0; padding:0; list-style:none; }
.pz-account-menu .mega-list li + li{ margin-top:4px; }
.pz-account-menu .mega-list a{
  display:block; font-size:14px; line-height:1.35; padding:2px 0;
  color:#111; text-decoration:none; white-space:normal;
}
.pz-account-menu .mega-list a:hover{ text-decoration:underline; }

/* CTA */
.pz-account-menu .mega-sep{ border:0; border-top:1px solid #e5e7eb; opacity:1; margin:12px 0; }
.pz-account-menu .btn{ border-radius:9999px; height:42px; }

/* Mobile/Tablet: volle Breite + stacked */
@media (max-width: 991.98px){
  .header-actions .pz-account .pz-account-menu{
    right:0; left:0; margin:8px auto 0; width:min(94vw,560px); min-width:0; max-width:94vw;
  }
  .pz-account-menu .mega-body{ display:block; }
  .pz-account-menu .mega-col-left{ border-right:0; padding-right:0; }
  .pz-account-menu .mega-col-right{ padding-left:0; margin-top:12px; }
}

/* Trigger-Hitbereich/Bridge bleibt gleich */
.header-actions .pz-account > .dropdown-toggle{
  display:flex; align-items:center; padding:6px 10px; border-radius:6px; white-space:nowrap;
}
.header-actions .pz-account > .dropdown-toggle:hover{
  background: rgba(17,24,39,.06);
}
.header-actions .pz-account::after{
  content:""; position:absolute; top:100%; left:0; width:100%; height:14px;
}
/* === FIX 1: Category "Alle" – Card-Optik + Typo wiederherstellen === */
.pz-cats .dropdown-menu.dropdown-mega{
  background:#fff;
  border:1px solid #e9ecef;
  border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.06);
  padding:16px;
  min-width:360px;
  max-width:min(96vw, 720px);
  z-index:1055;
}
.pz-cats .dropdown-menu .mega-title{
  font-weight:700; font-size:16px; color:#111; margin:0 0 .5rem;
}
.pz-cats .dropdown-menu .mega-subtitle{
  font-weight:700; font-size:12px; text-transform:uppercase;
  letter-spacing:.04em; color:#6b7280; margin:14px 0 6px;
}
.pz-cats .dropdown-menu .mega-subtitle + ul{ position:relative; padding-top:6px; }
.pz-cats .dropdown-menu .mega-subtitle + ul::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; background:#e5e7eb;
}
.pz-cats .dropdown-menu .mega-list{ list-style:none; margin:0; padding:0; }
.pz-cats .dropdown-menu .mega-list li + li{ margin-top:6px; }
.pz-cats .dropdown-menu .mega-list a{
  display:block; color:#111; text-decoration:none; line-height:1.45; padding:2px 0; white-space:nowrap;
}
.pz-cats .dropdown-menu .mega-list a:hover{ color:#6717C6; text-decoration:underline; }
@media (max-width: 991.98px){
  .pz-cats .dropdown-menu .mega-list a{ white-space:normal; } /* nur mobil umbrechen */
}

.header-actions .pz-account{ position:relative; }

.header-actions .pz-account .dropdown-mega{
  position:absolute; top:100%; right:0; left:auto; margin-top:10px;
  width:560px; min-width:560px; max-width:560px;   /* fixe Boxbreite Desktop */
  padding:14px 16px; border-radius:14px; background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 26px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.06);
  box-sizing:border-box; z-index:1060;
}
.header-actions .pz-account .mega-body{
  display:grid; grid-template-columns:260px 260px; column-gap:16px; align-items:start;
}
.header-actions .pz-account .mega-col-left{ padding-right:16px; border-right:1px solid #e5e7eb; }
.header-actions .pz-account .mega-col-right{ padding-left:16px; }

.header-actions .pz-account .mega-title{
  font-size:15px; font-weight:700; color:#111; margin:0 0 8px;
}
.header-actions .pz-account .mega-subtitle{
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:#6b7280; margin:8px 0 6px; position:relative;
}
.header-actions .pz-account .mega-subtitle::after{
  content:""; display:block; height:1px; background:#e5e7eb; margin-top:6px;
}
.header-actions .pz-account .mega-list{ list-style:none; margin:0; padding:0; }
.header-actions .pz-account .mega-list li + li{ margin-top:4px; }
.header-actions .pz-account .mega-list a{
  display:block; font-size:14px; line-height:1.35; color:#111; text-decoration:none;
  white-space:nowrap; padding:2px 0;
}
.header-actions .pz-account .mega-list a:hover{ text-decoration:underline; }

.header-actions .pz-account .mega-sep{ border:0; border-top:1px solid #e5e7eb; opacity:1; margin:12px 0; }
.header-actions .pz-account .btn{ border-radius:9999px; height:42px; }

/* Trigger-Hitfläche + Hover-Feedback */
.header-actions .pz-account > .dropdown-toggle{
  display:flex; align-items:center; padding:6px 10px; border-radius:6px; white-space:nowrap;
}
.header-actions .pz-account > .dropdown-toggle:hover{ background:rgba(17,24,39,.06); text-decoration:none; }
/* Hover-Bridge, damit das Menü nicht „abbricht“ beim Übergang */
.header-actions .pz-account::after{
  content:""; position:absolute; top:100%; left:0; width:100%; height:14px;
}

/* Mobile/Tablet: volle Breite & stacked */
@media (max-width: 991.98px){
  .header-actions .pz-account .dropdown-mega{
    left:0; right:0; margin-top:8px; width:min(94vw, 560px); min-width:0; max-width:94vw;
  }
  .header-actions .pz-account .mega-body{ display:block; }
  .header-actions .pz-account .mega-col-left{ border-right:0; padding-right:0; }
  .header-actions .pz-account .mega-col-right{ padding-left:0; margin-top:12px; }
  .header-actions .pz-account .mega-list a{ white-space:normal; }
}

/* Sicherheit: Links im Mega niemals Browser-Standard-Unterstreichung */
.pz-cats .dropdown-mega a,
.header-actions .pz-account .dropdown-mega a{ text-decoration:none; }
.pz-cats .dropdown-mega a:hover,
.header-actions .pz-account .dropdown-mega a:hover{ text-decoration:underline; }

/* === Account-Dropdown: Sichtbarkeit + Hover-Open (Desktop) === */
.pandoz-mainheader { z-index: 1040; }                 /* sicher über Content */
.header-actions .pz-account { position: relative; }   /* Bezugspunkt */

/* Standard: zu, sichtbar wenn .show (Bootstrap/JS) */
#pzAccountMenu {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  margin-top: 10px;
  z-index: 1060;
  display: none;
  pointer-events: auto;
}
#pzAccountMenu.show { display: block; }

/* 👉 Desktop: auch per Hover öffnen, unabhängig von Bootstrap */
@media (min-width: 992px){
  .pz-account.dropdown:hover > #pzAccountMenu,
  #pzAccountMenu:hover {
    display: block !important;
  }

  /* kleine Hover-Brücke, damit es beim Übergang nicht "abreißt" */
  .pz-account::after{
    content:"";
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    height:12px;
  }
}

/* Sicherheit: falls irgendwo generisch .dropdown-menu {display:none} gesetzt ist */
.dropdown .dropdown-menu#pzAccountMenu { display: none; }
.dropdown .dropdown-menu#pzAccountMenu.show { display: block; }

/* Komfortabler Trigger-Hitbereich */
.header-actions .pz-account > .dropdown-toggle{
  display:flex; align-items:center; padding:6px 10px; border-radius:6px; white-space:nowrap;
}
.header-actions .pz-account > .dropdown-toggle:hover{
  background: rgba(103,23,198,.06);
}
/* === "Alle"-Dropdown: 1 Spalte, schmal & fix === */
.pz-cats .dropdown.pz-cat-all > .dropdown-mega.pz-mega{
  /* feste, deutlich schmalere Box */
  width: 380px !important;
  min-width: 380px !important;
  max-width: 380px !important;

  /* kompaktere Optik */
  padding: 12px 14px !important;
  border-radius: 12px !important;
}

/* Layout: strikt 1 Spalte */
.pz-cats .dropdown.pz-cat-all .mega-body{
  display: block !important;
}
.pz-cats .dropdown.pz-cat-all .mega-col-left,
.pz-cats .dropdown.pz-cat-all .mega-col-right,
.pz-cats .dropdown.pz-cat-all .mega-col-single{
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Typo/Abstände leicht verdichtet */
.pz-cats .dropdown.pz-cat-all .mega-title{
  font-size: 15px !important;
  margin: 0 0 6px !important;
}
.pz-cats .dropdown.pz-cat-all .mega-subtitle{
  font-size: 12px !important;
  margin: 10px 0 6px !important;
}
.pz-cats .dropdown.pz-cat-all .mega-subtitle + ul::before{
  /* feiner Trenner beibehalten, aber subtil */
  background: #eceff3 !important;
}

/* Linkliste kompakter & umbrechbar (wichtig bei schmaler Breite) */
.pz-cats .dropdown.pz-cat-all .mega-list{ margin: 0 !important; padding: 0 !important; }
.pz-cats .dropdown.pz-cat-all .mega-list li + li{ margin-top: 4px !important; }
.pz-cats .dropdown.pz-cat-all .mega-list a{
  display: block;
  padding: 2px 0 !important;
  line-height: 1.35 !important;
  white-space: normal !important;   /* kein erzwungenes nowrap -> keine Überbreite */
  text-overflow: clip;
  overflow: visible;
}

/* Responsive Fallback: auf sehr schmalen Screens volle Breite verwenden */
@media (max-width: 575.98px){
  .pz-cats .dropdown.pz-cat-all > .dropdown-mega.pz-mega{
    width: min(94vw, 420px) !important;
    min-width: 0 !important;
    max-width: 94vw !important;
  }
}
/* === Pandoz: Mega-Dropdown "Alle" — Fullwidth & responsive Höhe === */

/* Vollbreite Dropdown + responsive Höhe */
.pz-cats .dropdown.pz-cat-all > #pzMegaAll.dropdown-mega.pz-mega{
  position: absolute;
  left: 0 !important;
  right: 0 !important;
  top: 100%;
  margin-top: 10px;
  width: 100% !important;
  max-width: 100% !important;

  /* 🔥 Dynamische Höhe statt fix 520px */
  height: min(80vh, 780px);              /* nimmt bis zu 80% der Viewport-Höhe, max. 780px */
  max-height: calc(100vh - 120px);

  border-radius: 16px;
  border: 1px solid #e9ecef;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.10), 0 6px 18px rgba(0,0,0,.06);
  padding: 0;                            /* Spalten paddings übernehmen */
  overflow: hidden;                      /* sauberer Bodenspalt */
  z-index: 1055;
}

/* kleiner optischer Spalt unten */
.pz-cats .dropdown.pz-cat-all { padding-bottom: 8px; }

/* 2-Zonen-Layout: links fix, rechts fluid – beide scrollen */
#pzMegaAll .mega-body{
  display: grid !important;
  grid-template-columns: 320px 1fr;      /* linke Spalte fix */
  height: 100%;
  position: relative;
}

#pzMegaAll .mega-left{
  height: 100%;
  overflow: auto;
  border-right: 1px solid #f0f2f5;
  padding: 10px;
}
#pzMegaAll .mega-left .mega-title{
  font-weight: 800;
  margin: 4px 0 6px;
}

#pzMegaAll .mega-right{
  height: 100%;
  overflow: auto;
  padding: 16px 18px;
}

/* Rechte Panel-Gruppen */
#pzMegaAll .mega-right .mega-group{ margin-bottom: 14px; }
#pzMegaAll .mega-right .mega-title{
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 6px;
  color:#111;
}
#pzMegaAll .mega-right ul{ list-style:none; margin:0; padding:0; }
#pzMegaAll .mega-right li + li{ margin-top:6px; }
#pzMegaAll .mega-right a{ color:#111; text-decoration:none; }
#pzMegaAll .mega-right a:hover{ color:#6717C6; text-decoration:underline; }
#pzMegaAll .subpanel-cta{
  display:inline-block;
  margin-top:10px;
  font-weight:600;
  color:#6717C6;
}

/* Linke Liste: hover/active */
#pzMegaAll .mega-left .mega-list{ list-style:none; margin:0; padding:6px; }
#pzMegaAll .mega-left .mega-list li + li{ margin-top:4px; }
#pzMegaAll .mega-left .mega-list a{
  display:block;
  padding:10px 12px;
  border-radius:8px;
  color:#111;
  text-decoration:none;
  line-height:1.3;
  transition: background .15s ease, color .15s ease;
  white-space: normal;                 /* darf umbrechen */
}
#pzMegaAll .mega-left .mega-list li:hover > a,
#pzMegaAll .mega-left .mega-list li.is-active > a{
  background: rgba(103,23,198,.08);
  color:#6717C6;
}

/* Desktop: Hover-Bereich überbrücken (optional) */
@media (min-width: 992px){
  .pz-cats .dropdown.pz-cat-all:hover > #pzMegaAll{
    /* Anzeige wird primär via JS .show gesteuert – hier nix erzwingen */
  }
  .pz-cats .dropdown.pz-cat-all > #pzMegaAll::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-10px;
    height:10px;
  }
}

/* Mobile/Tablet Fallback: normaler Stack */
@media (max-width: 991.98px){
  .pz-cats .dropdown.pz-cat-all > #pzMegaAll{
    position: static;
    height:auto;
    max-height:78vh;
    overflow:auto;
    border-radius:12px;
  }
  #pzMegaAll .mega-body{
    display:block !important;
  }
  #pzMegaAll .mega-left{
    border-right:0;
    height:auto;
  }
  #pzMegaAll .mega-right{
    height:auto;
    padding-top:8px;
  }
}

/* === Pandoz: Kategorieleiste schlanker (Desktop) === */
@media (min-width: 992px){
  /* Zielhöhe bequem anpassbar */
  .pz-cats{ --pz-cats-h: 44px; } /* z.B. 40–46px */

  .pz-cats .container-fluid{
    min-height: var(--pz-cats-h);
  }

  /* Leisten-Padding runter, Elemente vertikal mittig */
  .pz-cats-menu{
    padding: 0;                     /* statt .5rem 0 */
    height: var(--pz-cats-h);
    align-items: center;
  }

  /* Links kompakter – ohne die Click-Fläche zu verlieren */
  .pz-cats-menu .nav-link{
    padding: 0 .65rem;              /* horizontales Padding beibehalten */
    line-height: var(--pz-cats-h);  /* vertikal zentrieren über ganze Leiste */
    border-radius: 9999px;
  }

  /* „Alle“-Trigger: Icon sauber mittig halten */
  .pz-cats-menu .nav-link .me-2{ line-height: 1; display:inline-block; }
}
#pzMegaAll .mega-left .mega-title{
  color: #111 !important;   /* vorher weiß auf weiß */
  opacity: 1 !important;
}
#pzMegaAll .mega-left a:focus-visible{
  outline: 2px solid #6717C6;
  outline-offset: 2px;
  border-radius: 6px;
}
.pz-cats .dropdown.pz-cat-all > #pzMegaAll{
  margin-top: 0 !important;
  border-radius: 0 !important;
  border-top: none !important;
  top: 100% !important;
}
.pz-cats--purple{
  border-bottom: 1px solid #e9ecef;
}
.pz-cats .dropdown.pz-cat-all:hover > #pzMegaAll::before{
  display: none !important;
}
#pzMegaAll .mega-left a[data-expand]{
  position: relative;
  padding-right: 24px;
}
#pzMegaAll .mega-left a[data-expand]::after{
  content: "›";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #888;
  transition: color .2s ease, transform .2s ease;
}
#pzMegaAll .mega-left li:hover > a[data-expand]::after,
#pzMegaAll .mega-left li.is-active > a[data-expand]::after{
  color: #6717C6;
  transform: translateY(-50%) translateX(2px);
}
.pz-cats .dropdown.pz-cat-all{ padding-bottom: 0 !important; }

.pz-cats .pz-cat-all > .nav-link{
  height: var(--pz-cats-h, 44px) !important;
  line-height: var(--pz-cats-h, 44px) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.pz-cats .pz-cat-all .nav-link .me-2{
  display:inline-flex;
  align-items:center;
  line-height:1;
  margin-right:.5rem;
  transform:none !important;
}
.pz-cats .pz-cat-all > .nav-link.dropdown-toggle::after{
  vertical-align: middle;
  margin-top:0;
  transform:none;
}
/* Blendet das ☰ aus und ersetzt es durch ein CSS-Hamburger-Icon */
.pz-cats .pz-cat-all .nav-link .me-2{
  font-size: 0 !important; /* ☰ ausblenden */
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;  /* Icon-Größe */
  height: 16px;
  margin-right: 6px !important;
}
.pz-cats .pz-cat-all .nav-link .me-2::before{
  content: "";
  display: block;
  width: 26px;        /* Breite der Balken */
  height: 3px;        /* Dicke der Balken */
  background: currentColor;
  border-radius: 2px;
  box-shadow:
    0 8px 0 currentColor,
    0 -8px 0 currentColor;
  transform: translateY(-1px); /* optische Zentrierung */
}
/* === "Alle"-Caret sanft drehen beim Öffnen === */
.pz-cats .pz-cat-all > .nav-link.dropdown-toggle::after{
  transition: transform .25s ease, opacity .2s ease;
}
.pz-cats .pz-cat-all > .nav-link[aria-expanded="true"]::after,
.pz-cats .pz-cat-all.show > .nav-link::after{
  transform: rotate(180deg);
}
/* === "Alle"-Trigger: moderner Hover-Effekt === */
.pz-cats--purple .pz-cat-all > .nav-link{
  transition: background .25s ease, box-shadow .25s ease, transform .15s ease;
}
.pz-cats--purple .pz-cat-all > .nav-link:hover{
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  transform: translateY(-1px);
}
.pz-cats--purple .pz-cat-all > .nav-link:active{
  transform: translateY(0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
/* === Mega-Dropdown: Titelgrößen anpassen === */
#pzMegaAll .mega-left .mega-title,
#pzMegaAll .mega-right .mega-title {
  font-size: 17px !important;   /* vorher 15–16px */
  font-weight: 800;
  color: #111;
  line-height: 1.2;
}

/* Optional – etwas mehr Abstand nach oben/unten */
#pzMegaAll .mega-left .mega-title {
  margin: 6px 0 8px !important;
}

/* === Globaler Backdrop für Dropdown-Fokus === */
.pz-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,.45);     /* Abdunkeln */
  /* optional weicher Look: */
  /* backdrop-filter: saturate(110%) blur(1px); */
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1052;                      /* Mega: 1055, Account: 1060 -> Backdrop liegt darunter */
}
.pz-backdrop.is-active{
  opacity: 1;
  pointer-events: auto;               /* Klick schließt Menüs */
}
html.backdrop-lock{ overflow: hidden; } /* Scroll-Lock bei offenem Overlay */

/* === Breadcrumb & Category Header: kompakter Abstand zu Kategoriebar === */
.category-header,
.breadcrumbs,
ul.breadcrumb {
  margin-top: 4px !important;    /* kleiner vertikaler Abstand */
  padding-top: 0 !important;
}

#lw-product-root .breadcrumb-wrapper,
#lw-product-root .breadcrumbs {
  margin-top: 4px !important;    /* Produktseite */
  padding-top: 0 !important;
}

/* Optional: Kategorie-Überschrift kompakter */
.category-header h3,
.category-title,
.category-name {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  font-size: 20px !important;    /* leicht reduziert */
}

.hero-carousel { margin-bottom: 12px; } /* oder 0, wenn bündig */

#pzHeroSplitSwiper,
#pzHeroSplitSwiper .swiper-wrapper,
#pzHeroSplitSwiper .swiper-slide {
  height: 100% !important;
  min-height: inherit !important; /* sorgt dafür, dass die Höhe der Grid-Zeile übernommen wird */
}

#pzHeroSplitSwiper .swiper-slide{
  position: relative !important;
  background: transparent !important;
  overflow: hidden !important;
  isolation: isolate !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0);
}

#pzHeroSplitSwiper .swiper-slide > a.pz-hero-banner{
  display: block !important;
  position: relative !important;
  height: 100% !important;
}

#pzHeroSplitSwiper .swiper-slide img.pz-hero-slide__img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 2 !important;
}

.pz-hero-banner::after{
  content: "";
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  background: linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,.15) 30%, rgba(0,0,0,0) 60%) !important;
  pointer-events: none !important;
}
.pz-hero-banner__content{ position:absolute !important; inset:0 !important; z-index:4 !important; }

/* Hero immer volle Breite im Container erzwingen */
.hero-carousel,
.pz-hero,
.home-hero,
.section-hero {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
}

/* ===========================================
   Pandoz – Hero Slider (Single Source of Truth)
   Für hero-carousel.blade.php
   =========================================== */

/* Abstand unterhalb ggf. anderer Hero-Varianten */
.hero-carousel { margin-bottom: 12px; } /* oder 0, wenn bündig */

/* -------------------------------
   Grundlayout: linke 70%-Spalte
   ------------------------------- */

/* Swiper füllt die Höhe durch die gesamte Kette */

#pzHeroSplitSwiper .swiper-slide{
  position: relative;
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

#pzHeroSplitSwiper .swiper-slide > a.pz-hero-banner{
  display: block;
  position: relative;
  height: 100%;
}

/* -------------------------------
   Hintergrundbild pro Slide
   ------------------------------- */
.pz-hero-slide__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0; /* unter Overlay/Text/Produkt */
}

/* -------------------------------
   Banner-Container + Overlay
   ------------------------------- */
:root{
  --pz-hero-text:#fff;
  --pz-cta-bg:#f7b500;
  --pz-cta-bg-hover:#eaa900;
  --pz-cta-text:#111;
  --pz-accent:#6717C6;
}

.pz-hero-banner{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pz-hero-text);
  text-decoration: none;
  isolation: isolate; /* Pseudo-Layer sauber kapseln */
  background-image: linear-gradient(135deg,#7740f2 0%,#ff6a95 100%); /* Fallback */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* dezentes Overlay für Lesbarkeit */
.pz-hero-banner::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,.28),
                                   rgba(0,0,0,.14) 35%,
                                   rgba(0,0,0,0) 65%);
  pointer-events: none;
}

/* -------------------------------
   Text-Block (links)
   ------------------------------- */
/* =========================================
   Hero – Content-Breite & Typografie (upgrade)
   ========================================= */

/* Defaults: pro Slide anpassbar */
.pz-hero-banner{
  /* wie breit darf der Content maximal werden? */
  --content-max-percent: 62%;   /* vorher ~54% */
  --content-max-px: 980px;      /* harte Obergrenze */
  --content-pad-l: clamp(16px, 5.6vw, 60px); /* links */
  --content-pad-r: clamp(12px, 3.2vw, 32px); /* rechts als Puffer zum Mockup */
}

/* Feintuning je Slide möglich */
.pz-hero--gastro{
  --content-max-percent: 64%;
}
.pz-hero--logistik{
  --content-max-percent: 60%;
}
.pz-hero--baustoffe{
  --content-max-percent: 62%;
}

/* Der eigentliche Content-Container */
.pz-hero-banner__content{
  position: absolute;
  inset: 0;
  z-index: 4;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .65rem;

  padding-inline: var(--content-pad-l) var(--content-pad-r);
  /* >>> Breite: größer & smarter */
  max-inline-size: min(var(--content-max-px), var(--content-max-percent));
}

/* Lesbarkeit / Zeilenlänge (ca. 60–75ch) */
.pz-hero-banner__title{
  margin: .1rem 0 0;
  line-height: 1.08;
  font-weight: 900;
  font-size: clamp(28px, 4.6vw, 66px);
  text-wrap: balance;          /* moderner Split der Zeilen */
}
.pz-hero-banner__title .hl{
  background: rgba(0,0,0,.28);
  padding: .08em .35em;
  border-radius: .35em;
}
.pz-hero-banner__desc{
  margin: .55rem 0 0;
  opacity: .95;
  font-size: clamp(14px, 1.55vw, 18px);
  max-width: 72ch;             /* angenehme Zeilenlänge */
  text-wrap: pretty;
}

/* CTA unverändert, nur etwas mehr Luft wenn breiter */
.pz-hero-banner__cta{
  margin-top: clamp(.6rem, 1.4vw, 1rem);
}

/* Breakpoints: auf kleineren Screens darf Content noch breiter werden */
@media (max-width: 1200px){
  .pz-hero-banner{ --content-max-percent: 66%; }
}
@media (max-width: 992px){
  .pz-hero-banner{
    --content-max-percent: 72%;
    --content-pad-l: clamp(14px, 4.6vw, 40px);
  }
}
@media (max-width: 720px){
  .pz-hero-banner{ --content-max-percent: 82%; }
  .pz-hero-banner__title{ font-size: clamp(24px, 6.2vw, 42px); }
}
@media (max-width: 520px){
  .pz-hero-banner{ --content-max-percent: 96%; }
}

.pz-hero-banner__eyebrow{
  margin: 0;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .95;
  font-size: clamp(12px, 1.2vw, 14px);
}

.pz-hero-banner__title{
  margin: .1rem 0 0 0;
  line-height: 1.06;
  font-weight: 900;
  font-size: clamp(26px, 4.5vw, 64px);
}
.pz-hero-banner__title .hl{
  background: none;
  padding: 0;
  border-radius: 0;
}

.pz-hero-banner__desc{
  margin: .5rem 0 0 0;
  opacity: .95;
  font-size: clamp(13px, 1.6vw, 18px);
  max-width: 80ch;
}

/* CTA */
.pz-hero-banner__cta{
  margin-top: clamp(.6rem, 1.5vw, 1rem);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--pz-cta-bg);
  color: var(--pz-cta-text);
  border-radius: 12px;
  font-weight: 800;
  padding: .65rem 1.05rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pz-hero-banner__cta::after{
  content: "›";
  font-weight: 900;
  font-size: 1.1em;
}
.pz-hero-banner__cta:hover{
  transform: translateY(-1px);
  background: var(--pz-cta-bg-hover);
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
}

/* -------------------------------
   Produkt-Komposition (Mockup 2000×840)
   – transparentes PNG/WebP (z. B. gastro_mockup.webp)
   ------------------------------- */
.pz-hero-product{
  position: absolute;
  z-index: 3;           /* über Overlay, unter Text */
  pointer-events: none;
  right: 0;
  bottom: 0;
  height: 100%;         /* skaliert an Bannerhöhe */
  width: auto;          /* Seitenverhältnis beibehalten */
  object-fit: contain;
  object-position: right bottom;
  transform-origin: right bottom;
  transform: translate(0,0) scale(1);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.15));
}

/* -------------------------------
   Responsive Feintuning
   ------------------------------- */
@media (max-width: 1400px){
  .pz-hero-banner__content{ max-width: min(58%, 720px); }
  /* weiter nach links, leicht kleiner */
  .pz-hero--gastro .pz-hero-product{ transform: translate(-1.6vw, 0.2vw) scale(1.02); }
}

@media (max-width: 992px){
  .pz-hero-banner__content{
    padding-left: clamp(14px, 4.6vw, 40px);
    max-width: 64%;
  }
  /* auf Tablet weniger Versatz und etwas größer */
  .pz-hero--gastro .pz-hero-product{ transform: translate(-0.4vw, 0) scale(1.04); }
}

@media (max-width: 720px){
  .pz-hero-banner__content{ max-width: 70%; }
  .pz-hero-banner__title{ font-size: clamp(24px, 6.2vw, 42px); }
  /* auf kleinen Screens neutral platzieren */
  .pz-hero--gastro .pz-hero-product{ transform: translate(0, 0) scale(1.00); }
}

@media (max-width: 520px){
  /* Optional: Produkt mobil ausblenden, Fokus auf Message */
  .pz-hero-product{ display: none; }
  .pz-hero-banner__content{ max-width: 96%; }
}

/* -------------------------------
   Swiper UI (Nav + Pagination)
   ------------------------------- */
#pzHeroSplitSwiper .swiper-button-prev,
#pzHeroSplitSwiper .swiper-button-next{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.18);
  backdrop-filter: saturate(120%) blur(6px);
  transition: transform .2s, background .2s;
}
#pzHeroSplitSwiper .swiper-button-prev:hover,
#pzHeroSplitSwiper .swiper-button-next:hover{
  background: rgba(0,0,0,.28);
  transform: scale(1.06);
}
#pzHeroSplitSwiper .swiper-button-prev::after,
#pzHeroSplitSwiper .swiper-button-next::after{
  font-size: 18px;
  color: #fff;
}

#pzHeroSplitSwiper .swiper-pagination{
  bottom: 12px !important;
  z-index: 5;
}
#pzHeroSplitSwiper .swiper-pagination-bullet{
  width: 10px;
  height: 10px;
  opacity: .75;
  background: #fff;
  border: 2px solid rgba(0,0,0,.25);
}
#pzHeroSplitSwiper .swiper-pagination-bullet-active{
  opacity: 1;
  background: var(--pz-accent);
  border-color: var(--pz-accent);
}

/* -------------------------------
   Defensive: keine Theme-Interferenz
   ------------------------------- */
#pzHeroSplitSwiper .swiper-slide{
  background: transparent !important;
  position: relative;
  padding: 0;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

/* A11y/Motion */
@media (prefers-reduced-motion: reduce){
  #pzHeroSplitSwiper .swiper-wrapper{ transition: none !important; }
  .pz-hero-banner__cta{ transition: none; }
}
/* =========================================================
   Pandoz – Hero Split + Carousel (Single Source of Truth)
   ========================================================= */

/* ---------- Globale Variablen für den Hero ---------- */
.pz-hero-split{
  /* Einmal anpassen -> alles richtet sich danach */
  --hero-max-h: 520px;                  /* maximale Höhe Desktop */
  --hero-min-h: 300px;                  /* minimale Höhe */
}

/* ---------- Split-Section + Grid ---------- */
.pz-hero-split { width: 100%; margin: 0; }

.pz-hero-split__inner{
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 12px;
  width: 100%;
  align-items: stretch;

  /* eine gemeinsame Höhe für beide Spalten */
  height: var(--hero-h);
  min-height: 0;
}
@media (max-width: 992px){
  .pz-hero-split__inner{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Linke/rechte Kachel: Ecken & sauberes Masking */
.pz-hero-split__left,
.pz-hero-split__right{
  background: transparent;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 10px;
  overflow: hidden;                     /* verhindert Überstände */
}

/* ---------- Höhe linke 70%-Spalte (Carousel) ---------- */
/* Linke Spalte – füllt die Grid-Zeile automatisch */
.pz-hero-split__left{
  overflow: hidden;   /* sauberes Masking */
  min-height: 0;
}

/* ---------- Rechte 30%-Spalte (Panel) ---------- */
/* Rechte Spalte – füllt die Grid-Zeile automatisch */
.pz-hero-split__right{
  overflow: hidden;   /* Panel-Rand maskieren */
  min-height: 0;
}

/* =========================
   Swiper-Chain / Carousel
   ========================= */
#pzHeroSplitSwiper,
#pzHeroSplitSwiper .swiper-wrapper,
#pzHeroSplitSwiper .swiper-slide{
  height: 100% !important;              /* ganze Kette füllt die Höhe */
}

#pzHeroSplitSwiper .swiper-slide{
  position: relative !important;
  background: transparent !important;
  overflow: hidden !important;          /* sauber maskieren */
  isolation: isolate !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0);
  will-change: transform;
}

#pzHeroSplitSwiper .swiper-slide > a.pz-hero-banner{
  display: block !important;
  position: relative !important;
  height: 100% !important;
}

/* =========================
   Banner: BG-Image + Overlay
   ========================= */
.pz-hero-slide__img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 0 !important;                /* unter Overlay & Content */
}

.pz-hero-banner{
  position: relative;
  display: block;
  width: 100%; height: 100%;
  color: #fff; text-decoration: none;
  isolation: isolate;
  /* Fallback Gradient */
  background-image: linear-gradient(135deg, #7740f2 0%, #ff6a95 100%);
  background-size: cover; background-position: center;
}

.pz-hero-banner::after{
  content: "";
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;                /* unter Text, über BG */
  background: linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,.15) 30%, rgba(0,0,0,0) 60%) !important;
  pointer-events: none !important;
}

/* =========================
   Banner: Text/CTA (links)
   ========================= */
.pz-hero-banner__content{
  position: absolute !important; inset: 0 !important;
  z-index: 4 !important;
  display: flex; flex-direction: column; justify-content: center;
  gap: .6rem;
  padding: clamp(14px, 3.2vw, 34px);
  padding-left: clamp(16px, 5.6vw, 60px);
  max-width: min(65%, 980px);
  text-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.pz-hero-banner__eyebrow{
  margin: 0; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; opacity: .95;
  font-size: clamp(12px, 1.2vw, 14px);
}
.pz-hero-banner__title{
  margin: .1rem 0 0 0; line-height: 1.06; font-weight: 900;
  font-size: clamp(26px, 4.5vw, 64px);
}
.pz-hero-banner__title .hl{
  background: rgba(0,0,0,.28);
  padding: .08em .35em; border-radius: .35em;
}
.pz-hero-banner__desc{
  margin: .5rem 0 0 0; opacity: .95;
  font-size: clamp(13px, 1.6vw, 18px);
  max-width: 80ch;
}

.pz-hero-banner__cta{
  margin-top: clamp(.6rem, 1.5vw, 1rem);
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--pz-cta-bg, #f7b500);
  color: var(--pz-cta-text, #111);
  border-radius: 12px; font-weight: 800;
  padding: .65rem 1.05rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pz-hero-banner__cta::after{ content: "›"; font-weight: 900; font-size: 1.1em; }
.pz-hero-banner__cta:hover{
  transform: translateY(-1px);
  background: var(--pz-cta-bg-hover, #eaa900);
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
}
@media (max-width: 992px){
  .pz-hero-banner__content{
    padding-left: clamp(14px, 4.6vw, 40px);
    max-width: 64%;
  }
}
@media (max-width: 720px){
  .pz-hero-banner__content{ max-width: 70%; }
  .pz-hero-banner__title{ font-size: clamp(24px, 6.2vw, 42px); }
}

/* =========================
   Produkt-Komposition (Mockup)
   2000x840 transparentes PNG/WebP
   ========================= */
.pz-hero-product{
  position: absolute;
  right: 0; bottom: 0;                   /* rechts/unten verankert */
  height: 100%;                          /* füllt Banner-Höhe */
  max-height: var(--hero-max-h);         /* sicherheitshalber cap */
  width: auto;                           /* Seitenverhältnis beibehalten */
  object-fit: contain;
  object-position: right bottom;
  transform-origin: right bottom;
  transform: translate(0,0) scale(1);    /* Basisskalierung */
  z-index: 3;                            /* über Overlay, unter Text */
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.15));
}

/* Default für alle Slides */
.pz-hero-product{
  transform:
    translate(var(--mockup-tx, 0), var(--mockup-ty, 0))
    scale(var(--mockup-scale, 1));
}

/* =========================
   Swiper UI (Buttons / Dots)
   ========================= */
#pzHeroSplitSwiper .swiper-button-prev,
#pzHeroSplitSwiper .swiper-button-next{
  width: 44px; height: 44px; border-radius: 999px; border: 0;
  background: rgba(0,0,0,.18);
  backdrop-filter: saturate(120%) blur(6px);
  transition: transform .2s, background .2s;
}
#pzHeroSplitSwiper .swiper-button-prev:hover,
#pzHeroSplitSwiper .swiper-button-next:hover{
  background: rgba(0,0,0,.28); transform: scale(1.06);
}
#pzHeroSplitSwiper .swiper-button-prev::after,
#pzHeroSplitSwiper .swiper-button-next::after{
  font-size: 18px; color: #fff;
}

#pzHeroSplitSwiper .swiper-pagination{ bottom: 12px !important; z-index: 5; }
#pzHeroSplitSwiper .swiper-pagination-bullet{
  width: 10px; height: 10px; opacity: .75; background: #fff;
  border: 2px solid rgba(0,0,0,.25);
}
#pzHeroSplitSwiper .swiper-pagination-bullet-active{
  opacity: 1; background: var(--pz-purple, #6717C6); border-color: var(--pz-purple, #6717C6);
}
/* === Pure SVG Arrows (Outline + White fill) === */

.pz-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: transparent;

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

  cursor: pointer;
}

/* Links / Rechts – so weit wie möglich an den Rand */
.pz-arrow--prev {
  left: 0px;
}

.pz-arrow--next {
  right: 0px;
}

/* SVG */
.pz-arrow__icon {
  width: 40px;
  height: 40px;
  pointer-events: none;
}

/* Hover minimal – nur etwas heller */
.pz-arrow:hover .pz-arrow__icon path:first-child {
  stroke: #ffffff;
}

.pz-arrow:hover .pz-arrow__icon path:last-child {
  opacity: 0.45;
}

/* Bei deaktiviert (falls loop=false) */
.pz-arrow.swiper-button-disabled {
  opacity: 0.2;
  cursor: default;
}

/* =========================
   Motion / A11y
   ========================= */
@media (prefers-reduced-motion: reduce){
  #pzHeroSplitSwiper .swiper-wrapper{ transition: none !important; }
  .pz-hero-banner__cta{ transition: none; }
}

/* =========================================================
   Pandoz – Right Panel (Deals)
   Gültig nur innerhalb .rp-stack
   Zwei Karten: "Deal des Tages" + "Wochendeals"
   ========================================================= */

/* ---------- Design-Tokens (lokal gescoped) ---------- */
.rp-stack{
  /* Farben & Typo */
  --rp-tx: #111827;         /* Primärtext */
  --rp-tx-muted: #4b5563;   /* Sekundärtext */
  --rp-brand: #6717C6;      /* Pandoz Violett */
  --rp-accent: #FF9800;     /* Pandoz Orange */

  /* Card */
  --rp-bg: #fff;
  --rp-b: 1px solid rgba(0,0,0,.08);
  --rp-r: 12px;
  --rp-shadow: 0 2px 6px rgba(0,0,0,.04);
}

/* ---------- Defensive Defaults (nur im Panel) ---------- */
.rp-stack img{ display:block; max-width:100%; height:auto; }
.rp-stack a{ text-decoration:none; color:inherit; }

/* ---------- Wrapper: vertikale Liste der Karten ---------- */
/* zwei Reihen gleicher Höhe: Daily | Weekly */
.rp-stack{
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
}

/* Deal des Tages – automatische Höhe nach Inhalt */
.rp-card--daily{
  flex: 0 0 auto;  /* wächst nicht, nimmt nur benötigte Höhe */
}

/* Wochendeals – füllt verbleibenden Platz, intern scrollbar */
.rp-card--weekly{
  flex: 1 1 auto;  /* nimmt Resthöhe */
  min-height: 0;   /* wichtig für sauberes overflow-Verhalten */
}
.rp-card--weekly .rp-card__body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}


/* ---------- Karte (Header / Body / optional Footer) ---------- */
.rp-card__body{
  min-height: 0;
  overflow: auto;                     /* nur hier scrollen */
  -webkit-overflow-scrolling: touch;  /* iOS Momentum */
  overscroll-behavior: contain;       /* kein Scroll-Chaining */
  scrollbar-gutter: stable both-edges;
}

.rp-card__header{ padding:12px 14px 0; }
.rp-card__body  { padding:12px 14px 12px; min-height:0; }
.rp-card__footer{ padding:8px 14px 12px; }

.rp-card__title{
  margin:0;
  font-size:16px;
  font-weight:800;
  line-height:1.2;
  color:var(--rp-tx);
}

/* =========================================================
   Sektion 1 – Deal des Tages
   Blade: <a class="daily"> … <div class="daily__media"><img …></div>
   ========================================================= */
.daily{
  display:grid;
  grid-template-columns: 1fr min(55%, 300px); /* Text | Bildbühne */
  gap:12px;
  align-items:center;
  min-width:0; min-height:0;
}
@media (max-width: 540px){
  .daily{ grid-template-columns: 1fr 130px; }
}
@media (max-width: 420px){
  .daily{ grid-template-columns: 1fr 110px; gap:10px; }
}

.daily__text{
  display:grid;
  gap:8px;
  min-width:0;
}
.daily__name{
  margin:0;
  font-weight:700;
  line-height:1.25;
  font-size:14px;
  color:var(--rp-tx);
  display:-webkit-box;
  -webkit-line-clamp:2;        /* max. 2 Zeilen */
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.daily__price-row{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  margin:0;
  color:var(--rp-tx-muted);
}
.daily__price{
  font-size:26px;
  font-weight:800;
  color:var(--rp-tx);          /* Preis bleibt dunkel, auch bei Hover */
}

/* Rabatt-Badge (optional) */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  line-height:1;
  font-size:12px;
  font-weight:800;
  padding:.4em .7em;
  border-radius:999px;
  user-select:none;
  pointer-events:none;
}
.badge--discount{
  background:rgba(103, 23, 198, .12);   /* soft brand */
  color:#4b0aa8;
}

/* Daily – Bildbühne: niemals croppen, niemals überstehen */
.daily__media{
  min-height:0;
  display:grid;
  place-items:center;
  aspect-ratio:1 / 1;                      /* quadratische Bühne */
  max-height: clamp(160px, 26vh, 260px);   /* passt sich Viewport-Höhe an */
  overflow:hidden;                          /* harte Maskierung */
}
.daily__media img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  transform:translateZ(0);
}

/* Hover-Effekte (dezent) */
.daily:hover .daily__name{ color:var(--rp-accent); }
.daily:hover .daily__media img{ transform:scale(1.03); }

/* =========================================================
   Sektion 2 – Wochendeals
   Blade: <div class="weekly-grid"> <a class="weekly"> … </a> ×2
   ========================================================= */
.weekly-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  min-height:0;
  align-content:start; /* oben beginnen, nicht strecken */
}
@media (max-width: 360px){
  .weekly-grid{ grid-template-columns: 1fr; }
}

.weekly{
  display:grid;
  grid-template-rows: minmax(0,1fr) auto auto; /* Bühne wächst, Titel & Preis folgen */
  min-width:0; min-height:0;
  text-align:center;
}

.weekly__media{
  min-height:0;
  aspect-ratio:1 / 1;                        /* feste Bühne */
  max-height: clamp(140px, 22vh, 220px);
  display:grid; place-items:center;
  border-radius:10px;
  background:#fff;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.06);
  overflow:hidden;                             /* keine Überstände */
}
.weekly__media img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  transform:translateZ(0);
}
.weekly:hover .weekly__media img{ transform:scale(1.03); }

.weekly__name{
  margin:2px 0 0;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--rp-tx);
}
.weekly__price{
  margin:0;
  font-size:16px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--rp-tx);
}
.weekly:hover .weekly__name{ color:var(--rp-accent); }

/* ---------- Fokus/A11y ---------- */
.daily:focus-visible,
.weekly:focus-visible,
.rp-card__footer .rp-link:focus-visible{
  outline:2px solid var(--rp-accent);
  outline-offset:2px;
  border-radius:8px;
}
/* ===========================================
   Feine horizontale Trennlinie zwischen Daily & Weekly
   =========================================== */
.rp-card--weekly {
  position: relative;
}

/* Linie oben im Weekly-Container */
.rp-card--weekly::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;       /* gleicht das Padding der Karten aus */
  right: 14px;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  z-index: 2;
}
/* =========================================================
   Right Panel ≙ Produktkarten-Style (Landing Grid)
   - 1:1 Bühne, object-fit: cover
   - Card-Hover (leichter Lift + Shadow)
   - Typo/Clamp identisch (14px Title, 18px Price)
   ========================================================= */

/* --- Bühne: 1:1 und cover (wie Grids) --- */
.daily__media,
.weekly__media{
  aspect-ratio: 1 / 1;
  max-height: none;                  /* Ratio bestimmt die Höhe */
  background: #f8f9fb;
  border-radius: 10px;
  overflow: hidden;                  /* sauber maskieren */
}
.daily__media img,
.weekly__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* wie Grid-Karten */
  object-position: center;
  display: block;
  transform: translateZ(0);
}

/* --- Typo: wie Produktkarten unten --- */
.daily__name,
.weekly__name{
  font-size: 14px;
  font-weight: 600;
  color: #111;
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;             /* max 2 Zeilen */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.daily__price,
.weekly__price{
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin: 2px 0 0;
}

/* --- Links: schwarz, Hover orange (wie unten) --- */
.rp-card a,
.rp-card a:link,
.rp-card a:visited,
.rp-card a:active,
.rp-card a:focus{
  color:#000;
  text-decoration:none;
}
.rp-card a:hover{ color:#ff6600; }

/* --- Layout-Finetuning Desktop --- */
.daily{
  grid-template-columns: 1fr min(60%, 340px); /* mehr Bühne rechts */
  gap: 12px;
  align-items: center;
}
.weekly-grid{ gap: 12px; }

/* --- Divider oben bei Weekly bleibt bündig --- */
.rp-card--weekly{ position: relative; }
.rp-card--weekly::before{
  content:"";
  position:absolute;
  top:0; left:14px; right:14px;
  height:1px;
  background: rgba(0,0,0,.08);
  pointer-events:none;
  z-index:1;
}

/* =========================
   Responsive: Tablet & Phone
   (an Produktkarten-Optik angeglichen)
   ========================= */
@media (max-width: 992px){
  /* Höhe-Kopplung lösen (siehe vorherige Fixes) – nur zur Sicherheit */
  .pz-hero-split__inner{ height:auto; }

  /* Daily: mehr Bild, weniger Text */
  .daily{
    grid-template-columns: minmax(200px, 58%) 1fr; /* Bild | Text */
    gap: 10px;
  }
}
@media (max-width: 640px){
  /* Stack: Bild oben, Text darunter – identisch zum Grid-Look */
  .daily{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .daily__media{ order:-1; aspect-ratio: 1 / 1; }

  /* Weekly: 1-spaltig, klare Bühne */
  .weekly-grid{ grid-template-columns: 1fr; gap: 12px; }
  .weekly{ text-align: left; }
}
@media (max-width: 420px){
  .daily__name, .weekly__name{ font-size: 13.5px; }
  .daily__price, .weekly__price{ font-size: 16px; }
}
/* =========================================================
   Countdown (Daily Deal) – Pill-Style (scoped auf .rp-stack)
   ========================================================= */

/* Textspalte ausrichten */
.rp-stack .daily__text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  gap: 8px;
  flex: 1 1 auto;
}

/* Preis + Countdown in eigener Spalte, Countdown nach unten drücken */
.rp-stack .daily__price-countdown{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  flex: 1 1 auto;
}

.rp-stack .daily__price-row{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

/* Label + Pill untereinander */
.rp-stack .daily__countdown-wrap{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: auto; /* an die Unterkante der Textspalte schieben */
}
.rp-stack .daily__countdown-label{
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: var(--rp-tx-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-left: 2px;
}

/* Pill */
.rp-stack .btn-countdown{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .72rem 1.05rem;
  border: 0;
  border-radius: 999px;
  background: var(--rp-accent, #FF9800);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 16px rgba(255, 152, 0, .28);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.rp-stack .btn-countdown__dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  opacity: .9;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18) inset;
}
@media (hover:hover){
  .rp-stack .btn-countdown:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(255, 152, 0, .35);
  }
}
.rp-stack .btn-countdown:active{
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(255, 152, 0, .26);
}
.rp-stack .btn-countdown:focus-visible{
  outline: 2px solid transparent;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.75),
    0 0 0 6px rgba(255, 152, 0, .55);
}
@media (max-width: 640px){
  .rp-stack .btn-countdown{
    font-size: 15px;
    padding: .64rem .96rem;
  }
}
/* Basis für alle Slides */
.pz-hero-banner{ position:relative; overflow:hidden; }
.pz-hero-slide__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================================================
   Deal Badges (Tagesdeal & Wochendeals) — CLEAN
   ========================================================= */

/* ---- Daily: nutzt .deal-badge ---- */
.rp-card--daily .deal-badge{
  position:absolute;
  top:12px; left:12px;
  z-index:2;
  background:#ff0015;
  color:#fff;
  font-weight:700;
  font-size:.875rem;
  line-height:1;
  padding:.35rem .6rem;
  border-radius:9999px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  letter-spacing:.2px;
}

/* Falls irgendwo noch ein .deal-badge in Weekly gerendert würde → hart abschalten */
.rp-card--weekly .deal-badge{ display:none !important; }

/* ---- Weekly: nutzt .badge-discount im Bild ---- */
.rp-card--weekly .weekly__media{
  position:relative;           /* Anker für absolutes Badge */
  overflow:hidden;
  border-radius:12px;
}
.rp-card--weekly .weekly__media img{
  display:block;
  width:100%; height:auto;
  object-fit:contain;
  background:#fff;
}
.rp-card--weekly .weekly__media .badge-discount{
  position:absolute;
  top:10px; left:10px;
  z-index:2;
  padding:6px 10px;
  font-size:12px;
  line-height:1;
  font-weight:700;
  color:#fff;
  background:#ff0015;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  pointer-events:none;
}

/* Preise */
.price--strike{ text-decoration:line-through; color:#9ca3af; margin-right:6px; font-size:.7em; }
.price--final{ color:#111827; font-weight:600; }

/* --- Normalize: Daily Deal Preise nicht von Eltern skalieren lassen --- */
.rp-card--daily .daily__price {
  font-size: 1rem;            /* Basis in rem, unabhängig vom Eltern-Knoten */
  line-height: 1.1;
}

/* Durchgestrichener Altpreis im Daily – bewusst etwas größer für Lesbarkeit */
.rp-card--daily .daily__price.price--strike {
  font-size: 1.125rem;        /* ≈ 18px bei 16px Root */
  color: #9ca3af;
  margin-right: 8px;
  text-decoration: line-through;
}

/* Neuer Preis im Daily (prominent) */
.rp-card--daily .daily__price.price--final {
  font-size: 1.625rem;        /* ≈ 26px */
  font-weight: 800;
  color: #111827;
}

/* Weekly: einheitliche Größen (ebenfalls in rem, unabhängig von Eltern) */
.rp-card--weekly .weekly__price .price--strike {
  font-size: 1rem;
  color: #9ca3af;
  text-decoration: line-through;
  margin-right: 6px;
}
.rp-card--weekly .weekly__price .price--final {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}
/* =========================================================
   Hero Banner – Lesbarkeit bei hellen / kontrastreichen Mockups
   ========================================================= */

/* Dezenter Textschatten für alle Texte im Hero-Content */
.pz-hero-banner__content h2,
.pz-hero-banner__content p,
.pz-hero-banner__content .pz-hero-banner__eyebrow,
.pz-hero-banner__content .pz-hero-banner__title,
.pz-hero-banner__content .pz-hero-banner__desc {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.25),   /* weiche Grundschicht */
    0 0 6px rgba(0, 0, 0, 0.15);     /* diffuse Kante für helle Motive */
}

/* Optional: CTA-Button ebenfalls etwas mehr Abhebung auf hellen Hintergründen */
.pz-hero-banner__cta {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* Hero: produktspezifisches Mockup höhenbasiert skalieren (Blade steuert Variablen) */
#pzHeroSplitSwiper .swiper-slide .pz-hero-product{
  position: absolute;
  right: var(--hero-prod-right, 2vw);
  bottom: var(--hero-prod-bottom, 1.2vw);

  /* Höhe ist die Leitgröße: wächst mit dem Banner */
  height: min(
    var(--hero-prod-h, clamp(520px, 70vh, 780px)),
    calc(100% - (var(--hero-prod-bottom, 1.2vw) * 2))
  );
  width: auto;

  /* alte Deckel/Transforms zuverlässig neutralisieren */
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  object-fit: contain;
  z-index: 1;
}

/* Optional: Bannerhöhe sicherstellen (links) */
.pz-hero-split__left .pz-hero-banner{
  min-height: clamp(520px, 40vw, 820px);
}
/* --- Hero Mockup niemals verstecken, immer oben --- */
#pzHeroSplitSwiper .pz-hero-banner{ position: relative; overflow: hidden; }

#pzHeroSplitSwiper .pz-hero-slide__img{
  position: absolute; inset: 0; z-index: 0;  /* echtes BG */
}

#pzHeroSplitSwiper .pz-hero-product{
  position: absolute;
  z-index: 3 !important;         /* über BG & Content */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;          /* keine Klicks blocken */
  transition: none !important;   /* gegen „Fade-out“-Effekte */
}

/* Falls irgendwo per Selektor Nicht-Active-Slides ausgeblendet werden: neutralisieren */
#pzHeroSplitSwiper .swiper-slide .pz-hero-product{ opacity: 1 !important; }
#pzHeroSplitSwiper .swiper-slide:not(.swiper-slide-active) .pz-hero-product{ opacity: 1 !important; }

/* Nur auf sehr kleinen Screens ausblenden (dein altes Verhalten) */
@media (max-width: 520px){
  #pzHeroSplitSwiper .pz-hero-product{ display: none !important; }
}
/* ===========================
   HERO — Responsive Base
   =========================== */

/* Gesamthöhe flexibel, aber nie zu klein */
.pz-hero-split__left .swiper,
.pz-hero-banner{
  min-height: clamp(340px, 46vw, 640px);
}

/* Inhalt links darf max. X% einnehmen, Rest ist Mockup-Zone */
.pz-hero-banner{
  --content-max-percent: 62%;
  position: relative;
}

/* Copy-Block: gut lesbar auf allen Größen */
.pz-hero-banner__content{
  max-width: min(var(--content-max-percent), 840px);
  padding-left: clamp(16px, 4.4vw, 42px);
  padding-right: clamp(10px, 2.6vw, 28px);
}

/* Headline/Teaser/CTA skalieren weich mit clamp() */
.pz-hero-banner__eyebrow{ 
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: .06em;
}
.pz-hero-banner__title{
  font-size: clamp(28px, 5.8vw, 56px);
  line-height: 1.05;
  text-wrap: balance;
}
.pz-hero-banner__desc{
  font-size: clamp(14px, 1.6vw, 16px);
  opacity: .95;
  max-width: 60ch;
}

/* CTA */
.pz-hero-banner__cta{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: clamp(13px, 1.6vw, 15px);
  box-shadow: 0 6px 16px rgba(255,152,0,.25);
}

/* Mockup-Bild: rechts unten verankert, skaliert in vw */
.pz-hero-product{
  right: clamp(6px, 1.8vw, 18px);
  bottom: clamp(6px, 1.8vw, 18px);
  width: clamp(320px, 38vw, 660px);  /* <- Hauptskalierung */
  height: auto;
  transform-origin: bottom right;
  /* bleibt sichtbar (Fix von vorhin) */
  position: absolute;
  z-index: 3 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}
/* Slide-Modifikatoren: feiner Versatz/Zoom pro Motiv */
.pz-hero--gastro   { --content-max-percent: 60%; }
.pz-hero--logistik { --content-max-percent: 58%; }
.pz-hero--baustoffe{ --content-max-percent: 60%; } /* Elektronik -> Baustoffe */

.pz-hero--gastro   .pz-hero-product{ transform: translate(0.6vw, 0.2vw) scale(1.04); }
.pz-hero--logistik .pz-hero-product{ transform: translate(0.0vw, 0.0vw) scale(1.06); }
.pz-hero--baustoffe .pz-hero-product{ transform: translate(0.8vw, 0.0vw) scale(1.06); }
/* ====== <= 1440px (Large Desktop) ====== */
@media (max-width: 1440px){
  .pz-hero-banner      { --content-max-percent: 64%; }
  .pz-hero-product     { width: clamp(300px, 40vw, 620px); }
}

/* ====== <= 1200px (Laptop) ====== */
@media (max-width: 1200px){
  .pz-hero-banner      { --content-max-percent: 66%; }
  .pz-hero-banner__title{ font-size: clamp(26px, 5.6vw, 48px); }
  .pz-hero-product     { width: clamp(280px, 42vw, 560px); }
  .pz-hero--gastro   .pz-hero-product{ transform: translate(0.4vw, .1vw) scale(1.02); }
  .pz-hero--logistik .pz-hero-product{ transform: translate(0,0)        scale(1.04); }
  .pz-hero--baustoffe .pz-hero-product{ transform: translate(0.4vw, 0)   scale(1.04); }
}

/* ====== <= 992px (Tablet quer) ====== */
@media (max-width: 992px){
  .pz-hero-banner{ --content-max-percent: 70%; }
  .pz-hero-banner__content{
    max-width: 72%;
    padding-left: clamp(14px, 4vw, 32px);
  }
  .pz-hero-banner__title{ font-size: clamp(24px, 6vw, 40px); }
  .pz-hero-product{ width: clamp(260px, 45vw, 520px); }
}

/* ====== <= 720px (Tablet hoch / großes Phone) ====== */
@media (max-width: 720px){
  .pz-hero-banner{ --content-max-percent: 78%; }
  .pz-hero-banner__content{ max-width: 80%; }
  .pz-hero-banner__title{ font-size: clamp(22px, 6.8vw, 34px); }
  .pz-hero-product{
    width: clamp(220px, 52vw, 480px);
    right: clamp(4px, 2vw, 12px);
    bottom: clamp(4px, 2vw, 12px);
    transform: translate(0,0) scale(1.00);
  }
}

/* ====== <= 560px (Phones) ====== */
@media (max-width: 560px){
  /* Mockup ausblenden – Fokus komplett auf Copy */
  .pz-hero-product{ display: none !important; }
  .pz-hero-banner__content{
    max-width: 96%;
    padding-left: clamp(14px, 5vw, 20px);
    padding-right: clamp(10px, 4vw, 18px);
  }
  .pz-hero-banner__title{ font-size: clamp(22px, 7.2vw, 30px); }
  .pz-hero-banner__desc { font-size: clamp(13px, 3.8vw, 15px); }
  .pz-hero-banner__cta  { font-size: clamp(12px, 3.4vw, 14px); }
}
.pz-hero-banner__content *{
  text-shadow:
    0 1px 2px rgba(0,0,0,.22),
    0 6px 18px rgba(0,0,0,.10);
}
/* ===========================
Pandoz – Industry & Themes Shared Styles
/=========================== */

:root{ --outer-gap:0; --bleed-radius:0; --bleed-bg:#f8f9fa; }

.bleed-gap{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }
.bleed-content{ position:relative; z-index:1; padding-left:clamp(6px,0.9vw,14px); padding-right:clamp(6px,0.9vw,14px); }

.themes-grid{ --bs-gutter-x:.75rem; --bs-gutter-y:.75rem; }
@media (min-width:1400px){ .themes-grid{ --bs-gutter-x:1rem; --bs-gutter-y:1rem; } }

.themes-grid .theme-card{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:pointer; text-decoration:none; color:inherit; padding:0; overflow:hidden;
}
.themes-grid .theme-card:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.1); border-color:rgba(103,23,198,.35); }
.theme-card__media{ width:100%; aspect-ratio:16/9; background:#f3f4f6; }
.theme-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.theme-card__body{ padding:16px; display:flex; flex-direction:column; gap:6px; }
.theme-card__title{ font-size:16px; font-weight:700; color:#111827; margin:0 0 4px; }
.theme-card__desc{ font-size:13px; color:#4b5563; margin:0 0 10px; }
.theme-card__cta{ align-self:flex-end; font-size:12px; color:#FF6600; font-weight:700; }

html,body{ overflow-x:hidden; }

/* Icon-Karten */
.theme-card--icon .theme-card__media { display:none; }
.theme-card--icon .theme-card__icon {
  width: 56px; height: 56px; border-radius: 12px; 
  background:#f3f4f6; display:flex; align-items:center; justify-content:center;
  margin-bottom:10px;
}
.theme-card--icon svg { width: 32px; height: 32px; }
.theme-card--icon .theme-card__body { padding:16px 16px 18px; }

/* ===========================================
   Abstand zwischen Kategoriebar und Breadcrumb
   =========================================== */
.pz-cats + .bleed-gap,
.pz-cats + .container,
.pz-cats + .container-fluid {
  margin-top: 12px !important;
}

/* Zusätzliche Sicherheit für Branchenseiten */
.breadcrumb {
  margin-top: 8px;
  margin-bottom: 16px;
}

/* Theme Cards */
.theme-card__body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.theme-card__desc {
  flex-grow: 1;
  margin-bottom: .5rem;
}

.theme-card__cta {
  margin-top: auto;
  align-self: flex-end;
  font-weight: 600;
  color: #ff6600;
  transition: color .2s ease;
}

.theme-card__cta:hover {
  color: #d94c00;
}

/* ===========================
   CART – Layout & Items
   =========================== */
.pz-cart-wrapper {
  max-width: 1200px;
}

/* Tabs */
.pz-cart-tabs .pz-cart-tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .6rem 1.1rem;
  text-decoration: none;
  border-radius: .75rem .75rem 0 0;
  background: #f7f7f7;
  color: #333;
  font-weight: 600;
  font-size: .9rem;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  transition: all .2s ease;
}

.pz-cart-tabs .pz-cart-tab:hover {
  background: #f0f0f0;
}

.pz-cart-tabs .pz-cart-tab.active {
  background: #fff;
  border-color: #e0e0e0;
  border-bottom: 2px solid var(--pz-violet);
  color: var(--pz-violet);
}

.pz-cart-tabs .pz-cart-tab span {
  font-size: .9rem;
}

/* Cart Item – zusammengeführte Version */
.pz-cart-item {
  display: flex;
  align-items: stretch;
  min-height: 96px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid #eee;
  background: #fff;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.02);
}

.pz-cart-item + .pz-cart-item {
  margin-top: .75rem;
}

/* Bild: volle Zeilenhöhe ausnutzen */
.pz-cart-item-image {
  flex: 0 0 140px;
  max-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18px;
  overflow: hidden;          /* für Zoom */
}

.pz-cart-item-image img {
  width: auto;
  height: 100%;              /* Höhe an Zeilenhöhe koppeln */
  max-height: 160px;         /* Sicherheitslimit */
  object-fit: contain;
  border-radius: 12px;
  border: none;
  background: transparent;
  transition: transform .25s ease;
}

.pz-cart-item-image:hover img,
.pz-cart-item-image:focus-within img {
  transform: scale(1.08);
}

/* Inhalt: Header oben, Bottom-Bereich nach unten gedrückt */
.pz-cart-item-main {
  display: flex;
  flex-direction: column;
}

/* Header (Titel + Entfernen) sitzt ganz oben */
.pz-cart-item-header a {
  font-size: 16px;
}

/* Links unten Menge, rechts Preise */
.pz-cart-item-bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Menge-Bereich */
.pz-cart-item-qty {
  display: flex;
  align-items: center;
}

.pz-cart-item-main a:hover {
  color: #ff6600;
}

/* Empty state & summary */
.pz-cart-section-empty {
  padding: 1.5rem;
  border-radius: .75rem;
  border: 1px dashed #ddd;
  background: #fcfcfc;
}

.pz-cart-summary {
  position: sticky;
  top: 90px;
  border: 1px solid #e5e5e5;
  border-radius: .75rem;
  padding: 1.5rem;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.03);
}

/* Projekt- / RFQ-Karten */
.pz-cart-project {
  border: 1px solid #eee;
  border-radius: .75rem;
  padding: 1rem;
  background: #fff;
}

/* ===========================
   HEADER CART ICON
   =========================== */
.pz-header-cart {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #333;
}

.pz-header-cart:hover {
  color: var(--pz-violet);
}

.pz-header-cart-icon {
  width: 26px;
  height: 26px;
  line-height: 1;
}

.pz-header-cart-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--pz-badge, #d90429);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .25rem;
  box-shadow: 0 0 0 2px #fff;
}
.pz-header-cart-badge.is-empty{
  display: none;
}

/* =====================================
   CART – kompakte Menge-Pill
   ===================================== */

.pz-qty-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: #ffffff;
  border: 1.5px solid #6717C6;
  height: 28px;
}

.pz-qty-pill-btn {
  border: none;
  background: transparent;
  color: #111827;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, transform .1s ease;
}

.pz-qty-pill-btn:hover,
.pz-qty-pill-btn:focus-visible {
  background-color: #f3e8ff;
  color: #4b157a;
  outline: none;
  border-radius: 50%;
}

.pz-qty-pill-btn:active {
  transform: scale(0.95);
}

.pz-qty-pill-input {
  border: none;
  outline: none;
  background: transparent;
  color: #111827;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  padding: 0;
  min-width: 3ch;
  max-width: 4ch;
  flex: 0 0 auto;
}

/* Spinners weg */
.pz-qty-pill-input::-webkit-outer-spin-button,
.pz-qty-pill-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pz-qty-pill-input[type=number] {
  -moz-appearance: textfield;
}

/* ===========================
   Cart Summary – CTA Buttons
   =========================== */

.pz-cart-summary .pz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

/* Primary: vollflächig violett (wie Produkt-CTA) */
.pz-cart-summary .pz-btn-primary {
  background: #6717C6;
  border-color: #6717C6;
  color: #fff;
}

.pz-cart-summary .pz-btn-primary:hover {
  background: #5813aa;
  border-color: #5813aa;
}

/* Secondary: Ghost-Buttons, aber gleiche Form/Höhe */
.pz-cart-summary .pz-btn-secondary {
  background: #fff;
  color: #4B5563;
  border-color: #E5E7EB;
}

.pz-cart-summary .pz-btn-secondary:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

/* Disabled-Zustände (Anchor + Button) */
.pz-cart-summary .pz-btn.is-disabled,
.pz-cart-summary .pz-btn[disabled] {
  opacity: .55;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}

/* Option-Boxen im Summary rechts */

.pz-option-box {
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  cursor: pointer;
  transition: all .2s ease;
  background: #fafafa;
}

.pz-option-box:hover {
  background: #f0f0ff;
  border-color: #c9c6ff;
}

.pz-option-box.disabled {
  opacity: .4;
  pointer-events: none;
}

.pz-option-icon {
  font-size: 22px;
  line-height: 1;
}

.pz-option-text strong {
  font-size: 14px;
}

.pz-option-text .small {
  font-size: 12px;
}

/* Einheitliche CTA Buttons – leicht abgerundet */
.pz-consult-actions .pz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 0.6rem 1.2rem;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

/* PRIMARY Button */
.pz-consult-actions .pz-btn-primary {
    background: #6717C6;
    border-color: #6717C6;
    color: #fff;
}
.pz-consult-actions .pz-btn-primary:hover {
    background: #5813aa;
    border-color: #5813aa;
}

/* SECONDARY Button */
.pz-consult-actions .pz-btn-secondary {
    background: #fff;
    color: #4B5563;
    border: 1px solid #E5E7EB;
}
.pz-consult-actions .pz-btn-secondary:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

/* Disabled Zustand */
.pz-consult-actions .pz-btn[disabled],
.pz-consult-actions .pz-btn.is-disabled {
    opacity: .55;
    cursor: default;
    pointer-events: none;
}
.pz-cat-node {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
}

.pz-cat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: calc(var(--pz-cat-level, 0) * 14px);
}

.pz-cat-toggle {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}

.pz-cat-toggle.is-collapsed {
  transform: rotate(-90deg);
}

.pz-cat-spacer {
  display: inline-block;
  width: 12px;
}

.pz-cat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.pz-cat-label input {
  width: 14px;
  height: 14px;
}

.pz-cat-children {
  margin-top: 2px;
  padding-left: 0;
  list-style: none;
}
/* ================================
   PANDOZ – SEARCH RESULT CARD SYSTEM
   ================================ */

/* --- CARD WRAPPER ---------------------------------------------------- */

.pz-sr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 12px;
  background: #ffffff;
  border-radius: 8px;
  border: 0.5px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.pz-sr-card:hover {
  border-color: rgba(129, 140, 248, 0.7);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

/* LIST-MODE → horizontal layout */
.pz-sr-card.pz-sr-card--list {
    flex-direction: row;
    padding: 16px;
    gap: 20px;
}

/* --- IMAGE ----------------------------------------------------------- */

.pz-sr-card__image {
    display: block;
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

/* Bild soll die komplette Kartenbreite nutzen */
.pz-sr-card__image img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: cover;
    border-radius: 6px;
}

/* --- BADGES ---------------------------------------------------------- */

.pz-sr-card__badges {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pz-sr-badge {
    font-size: 10px;
    font-weight: 400;
    padding: 1px 6px;
    border-radius: 3px;
    width: fit-content;
    line-height: 1.3;
    color: #fff;
}

.pz-sr-badge--primary {
    background: #10b981; /* Grün – sofort lieferbar */
}

.pz-sr-badge--success {
    background: #2563eb; /* Blau – Express */
}

.pz-sr-badge--highlight {
    background: #f59e0b; /* Orange – Top rated */
}

/* --- BODY ------------------------------------------------------------ */

.pz-sr-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.pz-sr-card--list .pz-sr-card__body {
    flex: 1;
}

/* BRAND */
.pz-sr-card__brand {
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0;
}

/* TITLE */
.pz-sr-card__title {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
}

.pz-sr-card__title a {
  color: #111827;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pz-sr-card__title a:hover {
  color: #4f46e5;
}

/* SPECS (MOQ, Lieferzeit) */
.pz-sr-card__specs {
  font-size: 11px;
  color: #4b5563;
  margin-top: 2px;
}

.pz-sr-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #4b5563;
}

/* --- RATING ---------------------------------------------------------- */

.pz-sr-card__rating {
  font-size: 11px;
  color: #4b5563;
  margin-top: 2px;
}

.pz-sr-stars {
  font-size: 12px;
  line-height: 1;
}

.pz-sr-stars .is-filled {
    color: #f59e0b;
}

.pz-sr-rating-count {
  font-size: 11px;
  color: #6b7280;
}

/* --- PRICE ----------------------------------------------------------- */

.pz-sr-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
}

.pz-sr-card__price {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.pz-sr-card__vat {
  font-size: 11px;
  color: #6b7280;
}

/* --- SHIPPING -------------------------------------------------------- */

.pz-sr-card__shipping {
  font-size: 12px;
  color: #4b5563;
  margin-top: 2px;
}

/* --- AVAILABILITY ---------------------------------------------------- */

.pz-sr-card__availability {
  font-size: 12px;
  color: #4b5563;
  margin-top: 2px;
}

.pz-sr-card__availability.is-available {
    color: #059669;
}

.pz-sr-card__availability.is-unavailable {
    color: #dc2626;
}

/* --- CTA BUTTONS ----------------------------------------------------- */

.pz-sr-card__cta-row {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}

.pz-sr-btn-primary {
    flex: 1;
    background: #6717c6;
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background .15s ease;
}

.pz-sr-btn-primary:hover {
    background: #5813aa;
}

.pz-sr-btn-ghost {
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    background: #f3f4f6;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    cursor: pointer;
}

.pz-sr-btn-ghost:hover {
    background: #e5e7eb;
}
/* ================================================================
   PANDOZ – COMPLETE SEARCH EXPERIENCE
   ================================================================ */

/* Gesamte Suchseite – weißer Hintergrund, direkt unter der Kategorieleiste */
.pz-sr-shell {
  width: 100%;
  background: #ffffff;
  padding: 0 0 16px;
}

/* Layout: Sidebar + Ergebnisse – ohne graue Fläche, links bündig */
.pz-sr-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 6px;
  width: 100%;
  max-width: 100% !important;
  padding: 0 12px 24px;
  margin: 0;
}

/* Category layout aligned to search layout */
.pz-category-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 6px;
  width: 100%;
  margin: 0;
  padding: 0 12px 24px;
}

.pz-category-grid-root {
  display: contents;
}

.pz-category-topbar {
  grid-area: topbar;
  width: 100%;
}

.pz-category-filters {
  grid-area: filters;
}

.pz-category-results {
  grid-area: results;
}

.cat-header-compact .cat-breadcrumb-wrap {
  display: none;
}

.cat-header-compact {
  padding: 0;
}

.pz-category-results {
  padding-top: 4px;
  padding-bottom: 16px;
}

.products-loading {
  opacity: .4;
  pointer-events: none;
}

@media (max-width: 992px) {
  .pz-category-layout {
    grid-template-columns: 1fr;
    padding: 12px 12px 0;
  }
}

.pz-sr-grid-root {
  display: contents;
}

@media (min-width: 993px) {
  .pz-sr-topbar {
    grid-area: topbar;
  }

  .pz-sr-filters {
    grid-area: filters;
  }

  .pz-sr-results {
    grid-area: results;
  }

  .pz-sr-filterbar {
    grid-area: filterbar;
  }

  .pz-sr-layout {
    grid-template-areas:
      "topbar topbar"
      "filterbar filterbar"
      "filters results";
  }

  .pz-category-layout {
    grid-template-areas:
      "topbar topbar"
      "filters results";
  }
}

@media (max-width: 992px) {
  .pz-sr-layout {
    grid-template-columns: 1fr;
    padding: 12px 12px 0;
  }
}

/* ---------------------------------------------------------------
   SIDEBAR / FILTER PANEL
   --------------------------------------------------------------- */

.pz-sr-filters-panel {
    background: transparent;
    border: none;
    padding: 16px;
    border-radius: 0;
    position: relative;
}

@media (max-width: 992px) {
    .pz-sr-filters-panel {
        display: none;
    }
}

.pz-sr-filters-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.pz-sr-filters-header p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

/* ---------------------------------------------------------------
   FILTER GROUPS
   --------------------------------------------------------------- */

.pz-sr-filter-group {
    padding: 14px 0;
    border-bottom: none;
}

.pz-sr-filter-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}

.pz-sr-filter-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pz-sr-price-reset {
    font-size: 12px;
}

.pz-sr-price-summary {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
}

/* CHECKBOX LIST */
.pz-sr-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0;
    font-size: 13px;
    cursor: pointer;
}

.pz-sr-filter-checkbox input {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid #9ca3af;
    border-radius: 3px;
    background: #fff;
    display: inline-block;
    box-sizing: border-box;
}
.pz-sr-filter-checkbox input:checked{
    border-color: #6717c6;
    background-color: #6717c6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='%23ffffff' d='M4.5 7.2L1.8 4.5l-1 1 3.7 3.7L11.2 2.5l-1-1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 8px;
}
.pz-sr-filter-checkbox input:focus-visible{
    outline: 2px solid rgba(103,23,198,0.25);
    outline-offset: 2px;
}

/* Sidebar hover: orange text, purple checkbox */
.pz-sr-filter-checkbox:hover span{
  color: #ff6600;
}
.pz-sr-filter-checkbox:hover input{
  border-color: #6717c6;
}
.pz-sr-filter-checkbox:hover input:not(:checked){
  background-color: #f4ecff;
}

/* INLINE TAG-CHIPS */
.pz-sr-filter-chip {
    padding: 4px 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
    margin: 3px 4px 0 0;
}

.pz-sr-filter-chip.is-active {
    background: #6717c6;
    border-color: #6717c6;
    color: #fff;
}

/* "Alle Produkte" as text-link instead of pill */
.pz-sr-filter-group .pz-sr-filter-chip.mb-2 {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #2563eb;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.pz-sr-filter-group .pz-sr-filter-chip.mb-2:hover {
    color: #1d4ed8;
}
.pz-sr-filter-group .pz-sr-filter-chip.mb-2.is-active {
    background: transparent;
    border-color: transparent;
    color: #1d4ed8;
}

/* PRICE RANGE */
.pz-sr-filter-range {
    display: flex;
    gap: 6px;
    align-items: center;
}

.pz-sr-filter-range input {
    width: 100%;
    padding: 4px 6px;
    font-size: 13px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .pz-sr-filter-range {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .pz-sr-filter-range span {
        display: none;
    }
}

.pz-sr-price-presets button {
    margin: 4px 4px 0 0;
}

/* ---------------------------------------------------------------
   CATEGORY TREE
   --------------------------------------------------------------- */

.pz-filter-tree {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.pz-filter-tree li {
    padding: 2px 0;
}

.pz-filter-tree .pz-tree-item {
    padding-left: 8px;
}

.pz-tree-toggle-btn {
    cursor: pointer;
    color: #6b7280;
    font-size: 11px;
    margin-right: 4px;
}

.pz-tree-toggle-btn:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------
   ACTIVE FILTER BAR
   --------------------------------------------------------------- */

.pz-sr-active-bar {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pz-sr-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pz-sr-chip-active {
    background: #6717c6;
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
}

.pz-sr-link-reset {
    background: none;
    border: none;
    color: #2563eb;
    cursor: pointer;
    font-size: 13px;
}

.pz-sr-link-reset:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------
   TOOLBAR (SORT, VIEW, PER-PAGE)
   --------------------------------------------------------------- */

.pz-sr-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.pz-sr-count-number {
    font-size: 16px;
    font-weight: 700;
}

.pz-sr-count-label {
    font-size: 14px;
    color: #6b7280;
}

.pz-sr-select {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
}

/* VIEW TOGGLE */
.pz-sr-view-toggle {
    display: flex;
    gap: 6px;
}

.pz-sr-view-toggle button {
    padding: 4px 10px;
    border-radius: 4px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    cursor: pointer;
    font-size: 13px;
}

.pz-sr-view-toggle .is-active {
    background: #6717c6;
    color: #fff;
    border-color: #6717c6;
}

/* ---------------------------------------------------------------
   PRODUCT GRID SPACING
   --------------------------------------------------------------- */
   
.pz-sr-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.pz-sr-product-grid.pz-sr-product-grid--list {
  grid-template-columns: 1fr !important;
}

.pz-sr-product-grid--list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ≥ 768px – 2 Spalten */
@media (min-width: 768px) {
  .pz-sr-product-grid:not(.pz-sr-product-grid--list) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ≥ 1100px – 3 Spalten */
@media (min-width: 1100px) {
  .pz-sr-product-grid:not(.pz-sr-product-grid--list) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ≥ 1360px – 4 Spalten (dein aktueller Screen) */
@media (min-width: 1360px) {
  .pz-sr-product-grid:not(.pz-sr-product-grid--list) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ≥ 1700px – 5 Spalten (große Monitore) */
@media (min-width: 1700px) {
  .pz-sr-product-grid:not(.pz-sr-product-grid--list) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ≥ 2000px – 6 Spalten (Ultrawide) */
@media (min-width: 2000px) {
  .pz-sr-product-grid:not(.pz-sr-product-grid--list) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------
   PAGINATION
   --------------------------------------------------------------- */

.pz-sr-pagination {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.pz-sr-pagination .pagination {
    justify-content: center;
}

.pz-sr-pagination .page-link {
    border-radius: 4px;
}

/* ---------------------------------------------------------------
   MOBILE DRAWERS (FILTER / SORT)
   --------------------------------------------------------------- */

@media (max-width: 992px) {

    .pz-sr-sort-drawer,
    .pz-sr-filter-drawer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 70%;
        background: #fff;
        border-top: 1px solid #d1d5db;
        padding: 16px;
        overflow-y: auto;
        z-index: 5000;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    }

    .pz-sr-filter-drawer h3,
    .pz-sr-sort-drawer h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 12px;
    }
}
/* Obere Leiste: Treffer + Sortierung – vollflächig mit feiner Linie unten */
.pz-sr-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

.pz-sr-topbar-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
}

.pz-sr-topbar-count {
  font-weight: 600;
  color: #111827;
}

.pz-sr-topbar-query {
  color: #6b7280;
}

.pz-sr-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pz-sr-topbar-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #374151;
}
/* Sidebar clean: keine Rahmen / Linien */
.pz-cat-tree,
.pz-cat-tree ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.pz-cat-tree li {
  border: none;
}
/* Filterchip-Leiste über den Ergebnissen – spannt Sidebar + Ergebnisse */
.pz-sr-filterbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.pz-sr-filterbar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pz-sr-filterbar-actions {
  flex-shrink: 0;
}


@media (max-width: 992px) {
  .pz-sr-filterbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===========================
   1) Card: keine Rundung + feiner Rahmen
   =========================== */
.pz-gridcard--flat {
  border-radius: 0 !important;
  border: 1px solid rgba(0,0,0,.06);  /* kaum sichtbar */
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pz-gridcard--flat .pz-gridcard__image,
.pz-gridcard--flat .pz-gridcard__image img {
  border-radius: 0 !important;
}

/* ===========================
   2) Bild: 1:1 + contain (kein Abschneiden)
   =========================== */
.pz-gridcard__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f6f6f6;
  overflow: hidden;
}
.pz-gridcard__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

/* ===========================
   3) Body: kompakt + full width
   =========================== */
.pz-gridcard__body {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Titel */
.pz-gridcard__title {
  font-size: 1rem;
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
}
.pz-gridcard__title a { text-decoration: none; color: inherit; }
.pz-gridcard__title mark { padding: 0 .12em; border-radius: .25em; }

/* Brand */
.pz-gridcard__brand {
  font-size: .85rem;
  opacity: .78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rating */
.pz-gridcard__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .84rem;
  flex-wrap: wrap;
}
.pz-gridcard__stars { display: inline-flex; gap: 2px; }
.pz-gridcard__star { opacity: .25; font-size: .95rem; line-height: 1; }
.pz-gridcard__star.is-filled { opacity: 1; }

/* MOQ + Availability + Delivery + Ship */
.pz-gridcard__minorder,
.pz-gridcard__availability,
.pz-gridcard__delivery,
.pz-gridcard__ship {
  font-size: .86rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.pz-gridcard__availability { white-space: nowrap; }
.pz-gridcard__availability.is-instock { color: #147a2a; }
.pz-gridcard__availability.is-req     { color: #8a5a00; }

/* ===========================
   4) Pricebar: Ab + Mengenpreis nebeneinander
   =========================== */
.pz-gridcard__pricebar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
  margin-top: 4px;
  min-width: 0;
}

.pz-gridcard__pricefrom {
  min-width: 0;
}
.pz-gridcard__pricefrom-label {
  display: inline-block;
  font-size: .95rem;
  opacity: .75;
  margin-right: 6px;
  white-space: nowrap;
}
.pz-gridcard__pricefrom-value {
  font-size: 1.5rem;      /* groß */
  font-weight: 800;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.pz-gridcard__pricecurrent {
  text-align: right;
  min-width: 0;
}
.pz-gridcard__current-label {
  font-size: .8rem;
  opacity: .7;
  margin-bottom: 2px;
}
.pz-gridcard__current-value {
  font-size: 1.5rem;      /* groß */
  font-weight: 800;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

/* Wenn Card schmal wird -> untereinander */
@media (max-width: 420px) {
  .pz-gridcard__pricebar {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .pz-gridcard__pricecurrent { text-align: left; }
}

/* ===========================
   5) Buyrow: qty-pill + CTA immer in Card, responsive
   =========================== */
.pz-gridcard__buyrow {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

/* Livewire Add-to-cart darf NICHT overflowen */
.pz-gridcard__qty {
  flex: 1 1 100%;
  min-width: 0;
}

/* ===========================
   6) Grids breiter + weniger Abstand (Bootstrap gutters + Spaltenbreite)
   =========================== */
/* kleinere Abstände */
.pz-products-grid-row {
  --bs-gutter-x: .5rem;
  --bs-gutter-y: .5rem;
}

/* WICHTIG:
   Die echte “Breite”/Anzahl Cards pro Zeile kommt aus deinen col- Klassen.
   Wenn du z.B. aktuell col-xl-3 nutzt (4 pro Zeile), stell auf col-xl-4 (3 pro Zeile)
   oder col-xxl-3/col-xxl-2 je nach Ziel.
*/
/* Pricebar bleibt: links Staffeln, rechts Mengenpreis */
.pz-gridcard__pricebar{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  align-items:start;
  margin-top: 4px;
}

/* Mengenpreis rechts (wie gehabt groß) */
.pz-gridcard__pricecurrent{
  text-align:right;
  min-width:0;
}
.pz-gridcard__current-label{
  font-size:.8rem;
  opacity:.7;
  margin-bottom:2px;
}
.pz-gridcard__current-value{
  font-size: 2.0rem;
  font-weight: 800;
  line-height: 1.05;
  overflow-wrap:anywhere;
}

/* Wenn schmal -> untereinander */
@media (max-width: 420px){
  .pz-gridcard__pricebar{ grid-template-columns: 1fr; }
  .pz-gridcard__pricecurrent{ text-align:left; }
}

/* ===========================
   BUY BAR: Preis neben Controls
   =========================== */
.pz-gridcard__buyprice{
  flex: 1 1 170px;
  min-width:0;
}

.pz-gridcard__buyprice-label{
  font-size:.8rem;
  opacity:.7;
  margin-bottom:2px;
}

.pz-gridcard__buyprice-value{
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.05;
  overflow-wrap:anywhere;
}

@media (max-width: 576px){
  .pz-gridcard__buyprice-value{ font-size:1.85rem; }
}

/* Flat card + ultrafeiner Rahmen */
.pz-gridcard--flat{
  border-radius: 0 !important;
  border: 1px solid rgba(0,0,0,.06);
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.pz-gridcard--flat .pz-gridcard__image,
.pz-gridcard--flat .pz-gridcard__image img{
  border-radius:0 !important;
}

/* 1:1 contain */
.pz-gridcard__image{ display:block; width:100%; aspect-ratio:1/1; background:#f6f6f6; overflow:hidden; }
.pz-gridcard__image img{ width:100%; height:100%; display:block; object-fit:contain; object-position:center; }

.pz-gridcard__body{ width:100%; padding:10px; display:flex; flex-direction:column; gap:6px; min-width:0; }

.pz-gridcard__title{ font-size:1rem; line-height:1.25; margin:0; overflow-wrap:anywhere; }
.pz-gridcard__title a{ text-decoration:none; color:inherit; }
.pz-gridcard__brand{ font-size:.85rem; opacity:.78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.pz-gridcard__rating{ display:flex; align-items:center; gap:6px; font-size:.84rem; flex-wrap:wrap; }
.pz-gridcard__stars{ display:inline-flex; gap:2px; }
.pz-gridcard__star{ opacity:.25; font-size:.95rem; line-height:1; }
.pz-gridcard__star.is-filled{ opacity:1; }

.pz-gridcard__minorder,
.pz-gridcard__availability,
.pz-gridcard__delivery,
.pz-gridcard__ship{
  font-size:.86rem;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.pz-gridcard__availability{ white-space:nowrap; }
.pz-gridcard__availability.is-instock{ color:#147a2a; }
.pz-gridcard__availability.is-req{ color:#8a5a00; }

/* (4) Active = Pandoz-lila Box ohne Rahmen */
.pz-gridcard__tierline.is-active{
  background: rgba(109, 40, 217, 0.08);
  border: 0;
  padding: 3px 6px;
  margin: 1px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Text leicht betonen, aber nicht schreien */
.pz-gridcard__tierline.is-active .pz-gridcard__tier-qty{
  color: rgba(0,0,0,.85);
  font-weight: 600;
}

/* Details */
.pz-gridcard__tiers-more{ margin-top: 1px !important; }
.pz-gridcard__tiers-summary{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1;
}
.pz-gridcard__tiers-list--more{ margin-top: 4px; }

/* Details/summary Standardmarker/Indent entfernen */
.pz-gridcard__tiers-more > summary{
  list-style: none;
}
.pz-gridcard__tiers-more > summary::-webkit-details-marker{
  display: none;
}

/* "Mehr anzeigen" wirkt wie Inline-Link, kein Block-Abstand */
.pz-gridcard__tiers-summary{
  display: inline-block;
  font-size: .78rem;
  opacity: .75;
}

.pz-gridcard__tierline.is-active{ border-radius: 4px; }

/* Marker nur sichtbar bei aktiver Zeile */
.pz-gridcard__tierline.is-active::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: rgba(29, 28, 31, 0.6);
}

/* Headline + Toggle in einer Zeile, ohne Luft */
.pz-gridcard__tiers-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin: 2px 0 3px;
}
.pz-gridcard__tiers-title{
  font-size:.78rem;
  opacity:.7;
  margin:0;
}
.pz-gridcard__tiers-toggle{
  border:0;
  background:transparent;
  padding:0;
  font-size:.78rem;
  opacity:.75;
  cursor:pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pz-gridcard__tiers-toggle:hover{ opacity:.95; }

/* Compact list */
.pz-gridcard__tiers-list--compact{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.pz-gridcard__tierline{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding:1px 0;
  min-width:0;
}
.pz-gridcard__tier-qty{
  font-size:.88rem;
  opacity:.78;
  white-space:nowrap;
}
.pz-gridcard__tier-price{
  font-size:.95rem;
  font-weight:700;
  white-space:nowrap;
  text-align:right;
  margin-left:auto;
}

/* Active: dezent, CTA bleibt Fokus */
.pz-gridcard__tierline.is-active{
  background: rgba(54, 26, 100, 0.08);
  padding: 3px 6px;
}
.pz-gridcard__tierline.is-active .pz-gridcard__tier-price{
  color: #6d28d9;
  font-weight: 750;
}

/* COLLAPSED MODE:
   zeige nur pinned (max, max2, min) ODER active/next */
.pz-gridcard__tiers.is-collapsed .pz-gridcard__tierline{
  display:none;
}
.pz-gridcard__tiers.is-collapsed .pz-gridcard__tierline.is-pin,
.pz-gridcard__tiers.is-collapsed .pz-gridcard__tierline.is-active{
  display:flex;
}

/* Toggle Text wenn expanded (JS setzt data-state) */
.pz-gridcard__tiers[data-state="expanded"] .pz-gridcard__tiers-toggle::after{ content:""; }

/* ===========================
   GRIDCARD — Tier UI (state of the art)
   =========================== */

.pz-gridcard__tiers-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
  margin: 2px 0 4px;
}

.pz-gridcard__tiers-title{
  font-weight:700;
  font-size:.9rem;
  line-height:1.1;
}

.pz-gridcard__tiers-toggle{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  cursor:pointer;
  opacity:.65;
  font-weight:600;
  font-size:.85rem;
  line-height:1.1;
}
.pz-gridcard__tiers-toggle:hover{ opacity:.9; }
.pz-gridcard__tiers-toggle:focus{ outline: none; }
.pz-gridcard__tiers-toggle:focus-visible{ outline: 2px solid rgba(120,80,255,.35); outline-offset: 3px; }

.pz-gridcard__tiers-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px; /* compact */
}

.pz-gridcard__tierline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:4px 8px;
  border-radius:10px; /* subtle, not “klobig” */
  font-size:.9rem;
  line-height:1.1;
}

.pz-gridcard__tier-qty{
  opacity:.85;
  white-space:nowrap;
}

.pz-gridcard__tier-price{
  font-weight:700;
  white-space:nowrap;
  text-align:right;
}

/* Active tier — subtle (CTA stays focus) */
.pz-gridcard__tierline.is-active{
  background: rgba(120,80,255,.10);
}

/* ===========================
   COLLAPSE LOGIC (bulletproof)
   =========================== */
.pz-gridcard__tiers.is-collapsed .pz-gridcard__tierline{
  display:none !important;
}
.pz-gridcard__tiers.is-collapsed .pz-gridcard__tierline.is-pin,
.pz-gridcard__tiers.is-collapsed .pz-gridcard__tierline.is-active{
  display:flex !important;
}

/* =========================================================
   PANDOZ — SEARCH GRID (Outer Layout) — State of the Art
   ========================================================= */

/* 1) OUTER GRID:
   Wenn deine Results ein ".pz-products-grid-row" (Bootstrap row) ist,
   überschreiben wir auf echtes CSS Grid für moderne Kontrolle. */
.pz-products-grid-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px !important;           /* weniger Abstand = dichter & SOTA */
  align-items: stretch;
}

/* Desktop breiter: mehr Karten nebeneinander */
@media (min-width: 992px) {
  .pz-products-grid-row {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px !important;
  }
}
@media (min-width: 1200px) {
  .pz-products-grid-row {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px !important;
  }
}
@media (min-width: 1600px) {
  .pz-products-grid-row {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px !important;
  }
}

/* Bootstrap Cols neutralisieren (falls vorhanden) */
.pz-products-grid-row > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: initial !important;
}


/* =========================================================
   PANDOZ — GRID CARD POLISH — State of the Art
   ========================================================= */

.pz-gridcard {
  border-radius: 0 !important;         /* flat */
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);   /* sehr feiner Rahmen */
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Hover: nur minimal, damit CTA Fokus bleibt */
.pz-gridcard:hover {
  border-color: rgba(0,0,0,.12);
}

/* Bild: vollflächig, ohne Luft, 1:1, contain */
.pz-gridcard__image {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
}
.pz-gridcard__image img {
  display: block;
  width: 100%;
  height: auto;                 /* fallback */
  aspect-ratio: 1 / 1;          /* 1:1 */
  object-fit: contain;          /* KEIN Abschneiden */
}

/* Body: volle Breite, kompakt */
.pz-gridcard__body {
  padding: 10px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;                     /* deutlich kompakter */
  flex: 1 1 auto;
}

/* Brand: 1 Zeile clamp, dezent */
.pz-gridcard__brand {
  font-size: .85rem;
  line-height: 1.1;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rating + Meta kompakt */
.pz-gridcard__rating {
  font-size: .85rem;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
}
.pz-gridcard__stars { display: inline-flex; gap: 1px; }
.pz-gridcard__star { opacity: .25; }
.pz-gridcard__star.is-filled { opacity: .9; }
.pz-gridcard__ratingempty { opacity: .6; }

.pz-gridcard__minorder,
.pz-gridcard__availability,
.pz-gridcard__delivery,
.pz-gridcard__ship {
  font-size: .85rem;
  line-height: 1.1;
  margin: 0;
}

/* Availability etwas “badge-like” aber nicht dominant */
.pz-gridcard__availability.is-instock { opacity: .85; }
.pz-gridcard__availability.is-req { opacity: .65; }

/* Shipping: keep it quiet */
.pz-gridcard__shipfree { font-weight: 600; opacity: .8; }
.pz-gridcard__shipfee  { opacity: .75; }

/* =========================================================
   STAFFEL — Collapse/Expand + Kompakt + Alignment
   (nutzt deinen letzten CSS Block – hier nur Ergänzungen)
   ========================================================= */

.pz-gridcard__tiers {
  margin-top: 2px;
}

/* Mengen links, Preis rechts, dichter */
.pz-gridcard__tierline {
  padding: 2px 8px 4px;
}
.pz-gridcard__tier-qty {
  padding-left: 0 !important; /* gegen “eingerückt” */
}

/* =========================================================
   Optional: Mark <mark> im Titel schöner (Highlight)
   ========================================================= */
.pz-gridcard__title mark {
  background: rgba(255, 220, 120, .6);
  padding: 0 .12em;
}

/* =========================
   Rating (State of the Art)
   ========================= */
.pz-gridcard__rating {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: #666;
  line-height: 1;
}

.pz-gridcard__stars {
  display: inline-flex;
  gap: 1px;
}

.pz-gridcard__star {
  font-size: .85rem;
  color: #ababab; /* leer */
}

.pz-gridcard__star.is-filled {
  color: #f5a623; /* hochwertiges Gold */
}

.pz-gridcard__ratingmeta {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.pz-gridcard__ratingval {
  font-weight: 600;
  color: #333;
}

.pz-gridcard__ratingcount {
  color: #888;
  font-size: .75rem;
}
/* =========================================================
   Buybar / Add-to-cart — konsolidiert (Qty + CTA)
   ========================================================= */

.pz-gridcard { overflow: hidden; }

/* Grundlayout */
.pz-gridcard__buybar{
  margin-top: auto;
  padding-top: 10px;
  padding-bottom: 12px;
}

.pz-gridcard__buycontrols{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
}

.pz-gridcard__buycontrols > *{
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.pz-gridcard__qty .pz-cart-qty-input,
.pz-gridcard__qty .pz-qty-input,
.pz-gridcard__qty input[type="number"]{
  width: 100%;
}

/* Wrapper für Qty + CTA */
.pz-addtocart-wrapper{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}

.pz-product-add-to-cart .pz-addtocart-wrapper{
  justify-content: space-between;
}

/* Qty Pill – Basis */
.pz-qty-wrapper{
  display: inline-flex;
  align-items: center;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  padding: 2px;
  flex: 0 0 auto;
}

.pz-gridcard__buycontrols .pz-qty-wrapper{
  min-height: 34px;
}

.pz-product-add-to-cart .pz-qty-wrapper{
  height: 36px;
}

/* Qty Buttons */
.pz-cart-qty-btn{
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: #111827;
  cursor: pointer;
  border-radius: 8px;
}

.pz-cart-qty-btn:hover{ background: #F3F4F6; }

.pz-gridcard__buycontrols .pz-cart-qty-btn{
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.pz-product-add-to-cart .pz-cart-qty-btn{
  width: 32px;
  height: 32px;
}

/* Qty Input */
.pz-cart-qty-input{
  width: auto;
  height: 30px;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  padding: 0 4px;
}

.pz-cart-qty-input::-webkit-outer-spin-button,
.pz-cart-qty-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.pz-cart-qty-input[type="number"]{ -moz-appearance: textfield; }

.pz-gridcard__buycontrols .pz-cart-qty-input{
  field-sizing: content;
  width: calc((var(--pz-digits, 1) * 1ch) + 2.2ch);
  min-width: 2.6ch;
  max-width: 9ch;
  height: 30px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 0 6px;
}

.pz-product-add-to-cart .pz-cart-qty-input{
  --pz-digits: 1;
  width: calc((var(--pz-digits, 1) * 1ch) + 1.2ch);
  min-width: 1.2ch;
  max-width: 10ch;
  height: 32px;
  font-size: 14px;
  font-weight: 700;
  padding: 0;
}

/* Qty im Cart-Drawer */
.pz-cart-qty{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 2px 8px;
}

.pz-cart-qty .pz-cart-qty-btn{
  background: none;
  border: none;
  font-size: 16px;
  width: 22px;
  height: 22px;
  line-height: 1;
}

.pz-cart-qty .pz-cart-qty-input{
  width: 48px;
  border: none;
  text-align: center;
  font-weight: 600;
}

.pz-cart-qty .pz-cart-qty-input:focus{ outline: none; }

/* CTA Button – Basis */
.pz-add-to-cart-btn{
  height: auto;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: keep-all;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  width: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* CTA Button – Grid */
.pz-gridcard__buycontrols .pz-add-to-cart-btn{
  width: auto !important;
  max-width: 100%;
  flex: 1 1 0;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}

@media (max-width: 1280px){
  .pz-gridcard__buycontrols .pz-addtocart-wrapper{ gap: 8px; }
  .pz-gridcard__buycontrols .pz-qty-wrapper{ padding: 1px; }
  .pz-gridcard__buycontrols .pz-cart-qty-btn{ width: 28px; height: 28px; }
  .pz-gridcard__buycontrols .pz-cart-qty-input{ height: 28px; padding: 0 2px; }
  .pz-gridcard__buycontrols .pz-add-to-cart-btn{
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
}

@supports (text-wrap: balance) {
  .pz-gridcard__buycontrols .pz-add-to-cart-btn{
    text-wrap: balance;
  }
}

@media (max-width: 1280px){
  .pz-gridcard__buycontrols .pz-add-to-cart-btn{
    text-wrap: nowrap;
  }
}

/* CTA Button – Produktkomponente */
.pz-product-add-to-cart .pz-add-to-cart-btn{
  width: auto !important;
  max-width: 100%;
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
  padding: 9px 12px;
  border-radius: 999px;
  line-height: 1.2;
  font-weight: 700;
  font-size: 13px;
}

/* Interaktionszustände */
.pz-gridcard__buycontrols button,
.pz-gridcard__buycontrols .btn,
.pz-gridcard__buycontrols input,
.pz-gridcard__buycontrols select{
  max-width: 100%;
}

.pz-gridcard__buycontrols button,
.pz-gridcard__buycontrols .btn{
  border-radius: 10px;
  transition: transform .08s ease, filter .12s ease, opacity .12s ease;
  will-change: transform;
}

.pz-gridcard__buycontrols button:hover,
.pz-gridcard__buycontrols .btn:hover{
  filter: brightness(0.98);
}

.pz-gridcard__buycontrols button:active,
.pz-gridcard__buycontrols .btn:active{
  transform: translateY(1px);
}

.pz-gridcard__buycontrols button:focus-visible,
.pz-gridcard__buycontrols .btn:focus-visible,
.pz-gridcard__buycontrols input:focus-visible{
  outline: 2px solid rgba(120,80,255,.35);
  outline-offset: 3px;
}

.pz-gridcard__buycontrols [wire\\:loading],
.pz-gridcard__buycontrols [wire\\:loading\\.attr]{
  pointer-events: none;
}

.pz-gridcard__buycontrols button[disabled],
.pz-gridcard__buycontrols .btn[disabled]{
  opacity: .7;
  cursor: not-allowed;
}

/* Responsive Verhalten */
@media (max-width: 576px){
  .pz-gridcard__buycontrols{
    flex-wrap: wrap;
  }
  .pz-gridcard__buycontrols button,
  .pz-gridcard__buycontrols .btn,
  .pz-gridcard__buycontrols a{
    width: 100%;
  }
}

@media (max-width: 420px){
  .pz-gridcard__buycontrols .pz-addtocart-wrapper{
    gap: 10px;
  }
  .pz-gridcard__buycontrols .pz-add-to-cart-btn{
    font-size: 12.5px;
    padding: 8px 10px;
  }
  .pz-add-to-cart-btn{
    font-size: 12.5px;
    padding: 8px 10px;
  }
  .pz-product-add-to-cart .pz-addtocart-wrapper{
    flex-wrap: wrap;
  }
  .pz-product-add-to-cart .pz-add-to-cart-btn{
    white-space: normal;
    flex: 1 1 100%;
  }
}

/* ===========================
   Telemetry: Add Product Redesign
   =========================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

.tp-add-product{
  --tp-bg: #f6f1ea;
  --tp-card: #ffffff;
  --tp-ink: #1f2937;
  --tp-muted: #6b7280;
  --tp-accent: #0f766e;
  --tp-accent-2: #0ea5a4;
  --tp-border: #e5e7eb;
  --tp-radius: 16px;
  --tp-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --tp-shadow-soft: 0 8px 20px rgba(15, 23, 42, 0.06);
  --tp-ring: 0 0 0 3px rgba(15, 118, 110, 0.16);
  font-family: "Space Grotesk", "IBM Plex Sans", "Segoe UI", sans-serif;
  color: var(--tp-ink);
  background: radial-gradient(circle at 10% 10%, rgba(15, 118, 110, 0.14), transparent 40%),
              radial-gradient(circle at 90% 0%, rgba(14, 165, 164, 0.14), transparent 45%),
              radial-gradient(circle at 30% 80%, rgba(249, 115, 22, 0.08), transparent 55%),
              var(--tp-bg);
  padding: 28px 24px 48px;
}

.tp-add-hero{
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  background: var(--tp-card);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  padding: 22px 26px;
  box-shadow: var(--tp-shadow-soft);
}

.tp-eyebrow{
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--tp-muted);
}

.tp-title{
  font-size: 30px;
  font-weight: 700;
  margin: 6px 0 4px;
}

.tp-subtitle{
  margin: 0;
  color: var(--tp-muted);
}

.tp-actions{
  display: flex;
  gap: 10px;
  align-items: center;
}

.tp-action-hint{
  font-size: 12px;
  color: var(--tp-muted);
}

.tp-alert{
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(185, 28, 28, 0.25);
  background: rgba(254, 242, 242, 0.9);
  color: #7f1d1d;
}

.tp-add-layout{
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
}

.tp-steps-bar{
  position: sticky;
  top: 12px;
  z-index: 20;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  padding: 12px 14px;
  margin-top: 16px;
  box-shadow: var(--tp-shadow-soft);
  backdrop-filter: blur(6px);
  align-items: center;
}

.tp-step-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tp-ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #f8fafc;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tp-step-btn:hover{
  color: var(--tp-accent);
  border-color: rgba(15, 118, 110, 0.4);
  background: rgba(15, 118, 110, 0.08);
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.15);
}

.tp-add-main{
  display: grid;
  gap: 18px;
}

.tp-section{
  background: var(--tp-card);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  padding: 24px;
  box-shadow: var(--tp-shadow-soft);
  scroll-margin-top: 90px;
}

.tp-section-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.tp-section-head h4{
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
}

.tp-section-head p{
  margin: 0;
  color: var(--tp-muted);
}

.tp-chip{
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.12);
  color: var(--tp-accent);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tp-chip-muted{
  background: rgba(15, 23, 42, 0.08);
  color: #334155;
}

.tp-section-status{
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tp-section-status.is-ok{
  background: rgba(5, 150, 105, 0.12);
  color: #065f46;
}

.tp-section-status.is-missing{
  background: rgba(234, 88, 12, 0.12);
  color: #9a3412;
}


.tp-add-aside{
  position: sticky;
  top: 18px;
  align-self: flex-start;
}

.tp-summary{
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--tp-border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--tp-shadow-soft);
}

.tp-summary h5{
  margin-bottom: 14px;
  font-size: 18px;
}

.tp-summary ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.tp-summary li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--tp-muted);
}

.tp-summary li::before{
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e5e7eb;
}

.tp-summary li.is-ok{
  color: #065f46;
}

.tp-summary li.is-ok::before{
  background: #10b981;
}

.tp-summary li.is-missing{
  color: #9a3412;
}

.tp-summary li.is-missing::before{
  background: #f59e0b;
}

.tp-summary-footer{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--tp-border);
}

.tp-draft-status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tp-draft-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
}

.tp-draft-status.is-saving .tp-draft-dot{
  background: #f59e0b;
  animation: tpBlink 1s ease-in-out infinite;
}

@keyframes tpBlink{
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.tp-add-product .form-control,
.tp-add-product .form-select,
.tp-add-product textarea{
  border-radius: 12px;
  border-color: var(--tp-border);
  font-family: "IBM Plex Sans", "Space Grotesk", "Segoe UI", sans-serif;
  background: #fff;
}

.tp-add-product .form-control:focus,
.tp-add-product .form-select:focus,
.tp-add-product textarea:focus{
  border-color: var(--tp-accent);
  box-shadow: var(--tp-ring);
}

.tp-add-product .btn-primary{
  background: var(--tp-accent);
  border-color: var(--tp-accent);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.2);
}

.tp-add-product .btn-outline-secondary{
  border-radius: 999px;
}

.tp-add-product .list-group-item{
  border-radius: var(--tp-radius);
  border: 1px solid var(--tp-border);
}

.tp-add-product .progress{
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
}

.tp-add-product .progress-bar{
  background: linear-gradient(90deg, var(--tp-accent), var(--tp-accent-2));
  border-radius: 999px;
}

.tp-add-product .card{
  border-radius: var(--tp-radius);
  border: 1px solid var(--tp-border);
  box-shadow: none;
  overflow: hidden;
}

.tp-add-product .card img{
  border-top-left-radius: var(--tp-radius);
  border-top-right-radius: var(--tp-radius);
}

.tp-photo-preview{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.tp-add-product .card-body{
  display: grid;
  gap: 6px;
}

.tp-add-product .card .badge{
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 8px;
}

.tp-add-product .tp-photo-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.tp-add-product .tp-photo-actions .btn{
  border-radius: var(--tp-radius);
  padding: 6px 8px;
  font-size: 12px;
}

@media (max-width: 1200px){
  .tp-add-layout{
    grid-template-columns: minmax(0, 1fr);
  }
  .tp-add-aside{
    position: static;
  }
  .tp-steps-bar{
    position: static;
  }
}

.tp-footer-cta{
  margin-top: 24px;
  background: var(--tp-card);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--tp-shadow-soft);
}

.tp-footer-title{
  font-size: 16px;
  font-weight: 700;
}

.tp-footer-subtitle{
  font-size: 13px;
  color: var(--tp-muted);
}

.tp-product-detail{
  display: grid;
  gap: 18px;
}

.tp-product-header{
  background: var(--tp-card);
  border-radius: 18px;
  border: 1px solid var(--tp-border);
  padding: 18px 20px;
  box-shadow: var(--tp-shadow-soft);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.tp-product-header-main{
  display: grid;
  gap: 6px;
  min-width: 0;
}

.tp-product-actions .btn{
  border-radius: 999px;
}

.tp-product-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.tp-stat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.tp-stat-card{
  background: var(--tp-card);
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--tp-shadow-soft);
  display: grid;
  gap: 4px;
}

.tp-stat-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tp-muted);
  font-weight: 700;
}

.tp-stat-value{
  font-size: 16px;
  font-weight: 700;
}

.tp-product-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
}

.tp-product-main{
  display: grid;
  gap: 18px;
}

.tp-product-aside{
  position: static !important;
  display: grid;
  gap: 16px;
}

.tp-product-detail .tp-summary{
  position: static !important;
  top: auto !important;
}

.tp-variant-card{
  background: var(--tp-card);
  border: 1px solid var(--tp-border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--tp-shadow-soft);
  display: grid;
  gap: 16px;
}

.tp-variant-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tp-variant-label{
  font-size: 12px;
  text-transform: uppercase;
  color: var(--tp-muted);
  letter-spacing: 0.1em;
  font-weight: 700;
}

.tp-variant-actions .btn{
  border-radius: 999px;
}

.tp-variant-summary{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  background: #f8fafc;
  border-radius: 14px;
  padding: 12px;
}

.tp-variant-body{
  display: grid;
  gap: 16px;
}

.tp-variant-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.tp-variant-section{
  display: grid;
  gap: 8px;
}

.tp-section-title{
  font-weight: 700;
  font-size: 14px;
}

.tp-meta-list{
  display: grid;
  gap: 4px;
  color: var(--tp-muted);
  font-size: 13px;
}

.tp-photo-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tp-stock-grid{
  display: grid;
  gap: 12px;
}

.tp-stock-card{
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

.tp-stock-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tp-stock-prices{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.tp-price-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--tp-border);
  font-size: 12px;
  background: #f8fafc;
}

.tp-variant-footer{
  font-size: 12px;
  color: var(--tp-muted);
}

.tp-muted{
  color: var(--tp-muted);
  font-size: 12px;
}

.tp-strong{
  font-weight: 700;
}

.tp-toast{
  position: sticky;
  top: 16px;
  z-index: 30;
  background: #ecfdf3;
  border: 1px solid #b7f0cf;
  color: #14532d;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: var(--tp-shadow-soft);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tp-toast-danger{
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.tp-toast.is-hidden{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.tp-product-thumb{
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tp-product-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tp-product-thumb__empty{
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
}

.tp-actions-menu{
  position: relative;
  display: inline-block;
}

.tp-actions-menu summary{
  list-style: none;
}

.tp-actions-menu summary::-webkit-details-marker{
  display: none;
}

.tp-actions-menu__panel{
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  padding: 6px;
  z-index: 20;
}

.tp-actions-menu__item{
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: #0f172a;
  text-decoration: none;
  font-size: 14px;
}

.tp-actions-menu__item:hover{
  background: #f1f5f9;
  color: #0f172a;
}

.tp-actions-menu__danger{
  color: #b91c1c;
}

.tp-actions-menu__danger:hover{
  background: #fee2e2;
  color: #7f1d1d;
}

[x-cloak]{
  display: none !important;
}

.tp-actions-menu__confirm-actions{
  display: grid;
  gap: 4px;
}

.tp-inline-confirm{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tp-inline-confirm__actions{
  display: inline-flex;
  gap: 6px;
}

@media (max-width: 768px){
  .tp-footer-cta{
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 1200px){
  .tp-product-layout{
    grid-template-columns: minmax(0, 1fr);
  }
  .tp-product-header{
    flex-direction: column;
    align-items: flex-start;
  }
  .tp-product-actions{
    justify-content: flex-start;
  }
}

@media (max-width: 768px){
  .tp-add-product{
    padding: 20px 14px 28px;
  }
  .tp-add-hero{
    flex-direction: column;
    align-items: flex-start;
  }
  .tp-title{
    font-size: 26px;
  }
  .tp-actions{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}