/* ==================================================================
   PastaClean — Doofinder-Look fuer normale Produkt-Grids
   angelegt 31.08.2026 (Nyx), Auftrag Fabian
   ZWECK: Die server-gerenderten Shopware-Produktkacheln
          (.card.product-box.box-standard) global so aussehen lassen
          wie die Doofinder-/AI-Slider-Kacheln (.pastaclean-swiper-*).
          Design 1:1 uebernommen aus pastaai2.js "Doofinder-Look Option A".
   HINWEIS: NUR OPTIK. Keine Aenderung an Warenkorb-Logik, Links,
            Varianten, Preisen. Warenkorb-Button wird optisch entfernt
            (Wunsch Fabian) — das Formular bleibt im DOM, nur unsichtbar.
   ROLLBACK: diese Datei + die 1 <link>-Zeile in meta.html.twig loeschen
             + cache:clear + http-cache leeren. Sonst nichts.
   ================================================================== */

/* --- Die Karte selbst: Doofinder-Card statt Shopware-Box --- */
.cms-element-product-listing .product-box.box-standard,
.cms-element-product-slider  .product-box.box-standard,
.product-listing .product-box.box-standard {
    background: #ffffff;
    border: 0.8px solid rgba(0, 26, 51, 0.157);
    border-radius: 4px;
    box-shadow: none;
    text-align: left;
    transition: border-color 0.2s ease;
}
.cms-element-product-listing .product-box.box-standard:hover,
.cms-element-product-slider  .product-box.box-standard:hover,
.product-listing .product-box.box-standard:hover {
    border-color: rgba(0, 26, 51, 0.35);
    box-shadow: none;
    text-decoration: none;
}

.cms-element-product-listing .product-box.box-standard .card-body,
.cms-element-product-slider  .product-box.box-standard .card-body,
.product-listing .product-box.box-standard .card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
}

/* --- Bild: quadratisch, contain (wie Doofinder) --- */
.cms-element-product-listing .product-box.box-standard .product-image-wrapper,
.cms-element-product-slider  .product-box.box-standard .product-image-wrapper,
.product-listing .product-box.box-standard .product-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.cms-element-product-listing .product-box.box-standard .product-image-wrapper .product-image,
.cms-element-product-slider  .product-box.box-standard .product-image-wrapper .product-image,
.product-listing .product-box.box-standard .product-image-wrapper .product-image {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: normal;
}

/* --- Titel: Doofinder-Blau, 14px, 2 Zeilen clamp --- */
.cms-element-product-listing .product-box.box-standard .product-name,
.cms-element-product-slider  .product-box.box-standard .product-name,
.product-listing .product-box.box-standard .product-name {
    margin: 0 0 8px 0;
    color: rgb(18, 79, 124);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    min-height: 2.4em;
    max-height: 2.4em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left;
}
.cms-element-product-listing .product-box.box-standard .product-name-headline,
.cms-element-product-slider  .product-box.box-standard .product-name-headline,
.product-listing .product-box.box-standard .product-name-headline {
    margin-bottom: 0;
}

/* --- Preis: aktueller Preis fett Doofinder-Blau, Streichpreis grau --- */
.cms-element-product-listing .product-box.box-standard .product-price-info,
.cms-element-product-slider  .product-box.box-standard .product-price-info,
.product-listing .product-box.box-standard .product-price-info {
    margin-top: auto;
}
.cms-element-product-listing .product-box.box-standard .product-price,
.cms-element-product-slider  .product-box.box-standard .product-price,
.product-listing .product-box.box-standard .product-price {
    font-weight: 700;
    font-size: 14px;
    color: rgb(18, 79, 124);
}
.cms-element-product-listing .product-box.box-standard .product-price.with-list-price,
.cms-element-product-slider  .product-box.box-standard .product-price.with-list-price,
.product-listing .product-box.box-standard .product-price.with-list-price {
    color: rgba(0, 49, 210, 0.757);
}
.cms-element-product-listing .product-box.box-standard .list-price,
.cms-element-product-slider  .product-box.box-standard .list-price,
.product-listing .product-box.box-standard .list-price {
    text-decoration: line-through;
    color: rgba(0, 14, 24, 0.592);
    font-size: 13px;
    font-weight: 400;
}
.cms-element-product-listing .product-box.box-standard .product-price-unit,
.cms-element-product-slider  .product-box.box-standard .product-price-unit,
.product-listing .product-box.box-standard .product-price-unit {
    font-size: 11px;
    color: rgba(0, 14, 24, 0.55);
}

/* --- Warenkorb-Button optisch RAUS (Wunsch Fabian, reiner Doofinder-Look) --- */
.cms-element-product-listing .product-box.box-standard .product-action,
.cms-element-product-slider  .product-box.box-standard .product-action,
.product-listing .product-box.box-standard .product-action {
    display: none !important;
}

/* --- Rating + Beschreibung RAUS: Doofinder-Kachel hat nur Bild/Titel/Preis --- */
.cms-element-product-listing .product-box.box-standard .product-rating,
.cms-element-product-slider  .product-box.box-standard .product-rating,
.product-listing .product-box.box-standard .product-rating,
.cms-element-product-listing .product-box.box-standard .product-description,
.cms-element-product-slider  .product-box.box-standard .product-description,
.product-listing .product-box.box-standard .product-description,
.cms-element-product-listing .product-box.box-standard .product-variant-characteristics,
.cms-element-product-slider  .product-box.box-standard .product-variant-characteristics,
.product-listing .product-box.box-standard .product-variant-characteristics {
    display: none !important;
}

/* --- Preisgroesse hart auf Doofinder-Mass (Theme setzt sonst 22px) --- */
.cms-element-product-listing .product-box.box-standard .product-price-wrapper .product-price,
.cms-element-product-slider  .product-box.box-standard .product-price-wrapper .product-price,
.product-listing .product-box.box-standard .product-price-wrapper .product-price,
.cms-element-product-listing .product-box.box-standard .product-price.with-list-price,
.cms-element-product-slider  .product-box.box-standard .product-price.with-list-price,
.product-listing .product-box.box-standard .product-price.with-list-price {
    font-size: 14px !important;
}

/* --- "Preise inkl. MwSt. zzgl. Versandkosten"-Link raus (Wunsch Fabian) --- */
.cms-element-product-listing .product-box.box-standard .product-price-tax-link,
.cms-element-product-slider  .product-box.box-standard .product-price-tax-link,
.product-listing .product-box.box-standard .product-price-tax-link {
    display: none !important;
}

/* --- Inhalt-Label + Grundpreis (EUR/kg,l) raus + Preis naeher an Titel (Wunsch Fabian) --- */
.cms-element-product-listing .product-box.box-standard .product-unit-label,
.cms-element-product-slider  .product-box.box-standard .product-unit-label,
.product-listing .product-box.box-standard .product-unit-label,
.cms-element-product-listing .product-box.box-standard .price-unit-reference,
.cms-element-product-slider  .product-box.box-standard .price-unit-reference,
.product-listing .product-box.box-standard .price-unit-reference {
    display: none !important;
}
.cms-element-product-listing .product-box.box-standard .product-price-info,
.cms-element-product-slider  .product-box.box-standard .product-price-info,
.product-listing .product-box.box-standard .product-price-info {
    margin-top: 4px !important;
}

/* --- Ganze Inhalt-Zeile raus (5 l / 3 kg unter Titel) — Wunsch Fabian --- */
.cms-element-product-listing .product-box.box-standard .product-price-unit,
.cms-element-product-slider  .product-box.box-standard .product-price-unit,
.product-listing .product-box.box-standard .product-price-unit {
    display: none !important;
}

/* ============================================================
   RHWeb-Produkt-Listing (z.B. "Für Deine tägliche Beauty-Routine")
   Container .cms-element-rhweb-product-listing, Box box-image.
   1:1 gespiegelt vom box-standard-Block oben. Fabian 31.08.2026
   ============================================================ */
.cms-element-rhweb-product-listing .product-box {
    background: #ffffff;
    border: 0.8px solid rgba(0, 26, 51, 0.157);
    border-radius: 4px;
    box-shadow: none;
    text-align: left;
    transition: border-color 0.2s ease;
}
.cms-element-rhweb-product-listing .product-box:hover {
    border-color: rgba(0, 26, 51, 0.35);
    box-shadow: none;
    text-decoration: none;
}
.cms-element-rhweb-product-listing .product-box .card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
}
.cms-element-rhweb-product-listing .product-box.box-image .product-image-wrapper,
.cms-element-rhweb-product-listing .product-box .product-image-wrapper {
    position: relative;
    width: 100%;
    height: 220px !important;
    aspect-ratio: auto !important;
    flex: 0 0 auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.cms-element-rhweb-product-listing .product-box .product-image-wrapper .product-image {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cms-element-rhweb-product-listing .product-box .product-name {
    color: rgb(18, 79, 124);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    max-height: 33.6px;
    overflow: hidden !important;
}
.cms-element-rhweb-product-listing .product-box .product-price,
.cms-element-rhweb-product-listing .product-box .product-price.with-list-price,
.cms-element-rhweb-product-listing .product-box .product-price-wrapper .product-price {
    color: rgb(18, 79, 124);
    font-weight: 700;
    font-size: 14px !important;
}
.cms-element-rhweb-product-listing .product-box .list-price {
    text-decoration: line-through;
    color: rgba(0, 14, 24, 0.592);
    font-size: 13px;
    font-weight: 400;
}
.cms-element-rhweb-product-listing .product-box .product-price-info {
    margin-top: 4px !important;
}
.cms-element-rhweb-product-listing .product-box .product-action,
.cms-element-rhweb-product-listing .product-box .product-rating,
.cms-element-rhweb-product-listing .product-box .product-description,
.cms-element-rhweb-product-listing .product-box .product-variant-characteristics,
.cms-element-rhweb-product-listing .product-box .product-price-unit,
.cms-element-rhweb-product-listing .product-box .product-unit-label,
.cms-element-rhweb-product-listing .product-box .price-unit-reference,
.cms-element-rhweb-product-listing .product-box .product-price-tax-link {
    display: none !important;
}

/* ============================================================
   box-minimal (z.B. /mueckenschutz/) — gleiche Doofinder-Optik.
   Standard-Container, aber Box-Variante box-minimal. Fabian 31.08.2026
   ============================================================ */
.cms-element-product-listing .product-box.box-minimal,
.cms-element-product-slider  .product-box.box-minimal,
.product-listing .product-box.box-minimal {
    background: #ffffff;
    border: 0.8px solid rgba(0, 26, 51, 0.157);
    border-radius: 4px;
    box-shadow: none;
    text-align: left;
    transition: border-color 0.2s ease;
}
.cms-element-product-listing .product-box.box-minimal:hover,
.cms-element-product-slider  .product-box.box-minimal:hover,
.product-listing .product-box.box-minimal:hover {
    border-color: rgba(0, 26, 51, 0.35);
    box-shadow: none;
    text-decoration: none;
}
.cms-element-product-listing .product-box.box-minimal .card-body,
.cms-element-product-slider  .product-box.box-minimal .card-body,
.product-listing .product-box.box-minimal .card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
}
.cms-element-product-listing .product-box.box-minimal .product-image-wrapper,
.cms-element-product-slider  .product-box.box-minimal .product-image-wrapper,
.product-listing .product-box.box-minimal .product-image-wrapper {
    position: relative;
    width: 100%;
    height: 220px !important;
    aspect-ratio: auto !important;
    flex: 0 0 auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.cms-element-product-listing .product-box.box-minimal .product-image-wrapper .product-image,
.cms-element-product-slider  .product-box.box-minimal .product-image-wrapper .product-image,
.product-listing .product-box.box-minimal .product-image-wrapper .product-image {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cms-element-product-listing .product-box.box-minimal .product-name,
.cms-element-product-slider  .product-box.box-minimal .product-name,
.product-listing .product-box.box-minimal .product-name {
    color: rgb(18, 79, 124);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    max-height: 33.6px;
    overflow: hidden !important;
}
.cms-element-product-listing .product-box.box-minimal .product-price,
.cms-element-product-listing .product-box.box-minimal .product-price.with-list-price,
.cms-element-product-listing .product-box.box-minimal .product-price-wrapper .product-price,
.cms-element-product-slider  .product-box.box-minimal .product-price,
.cms-element-product-slider  .product-box.box-minimal .product-price.with-list-price,
.cms-element-product-slider  .product-box.box-minimal .product-price-wrapper .product-price,
.product-listing .product-box.box-minimal .product-price,
.product-listing .product-box.box-minimal .product-price.with-list-price,
.product-listing .product-box.box-minimal .product-price-wrapper .product-price {
    color: rgb(18, 79, 124);
    font-weight: 700;
    font-size: 14px !important;
}
.cms-element-product-listing .product-box.box-minimal .list-price,
.cms-element-product-slider  .product-box.box-minimal .list-price,
.product-listing .product-box.box-minimal .list-price {
    text-decoration: line-through;
    color: rgba(0, 14, 24, 0.592);
    font-size: 13px;
    font-weight: 400;
}
.cms-element-product-listing .product-box.box-minimal .product-price-info,
.cms-element-product-slider  .product-box.box-minimal .product-price-info,
.product-listing .product-box.box-minimal .product-price-info {
    margin-top: 4px !important;
}
.cms-element-product-listing .product-box.box-minimal .product-action,
.cms-element-product-listing .product-box.box-minimal .product-rating,
.cms-element-product-listing .product-box.box-minimal .product-description,
.cms-element-product-listing .product-box.box-minimal .product-variant-characteristics,
.cms-element-product-listing .product-box.box-minimal .product-price-unit,
.cms-element-product-listing .product-box.box-minimal .product-unit-label,
.cms-element-product-listing .product-box.box-minimal .price-unit-reference,
.cms-element-product-listing .product-box.box-minimal .product-price-tax-link,
.cms-element-product-slider  .product-box.box-minimal .product-action,
.cms-element-product-slider  .product-box.box-minimal .product-rating,
.cms-element-product-slider  .product-box.box-minimal .product-description,
.cms-element-product-slider  .product-box.box-minimal .product-variant-characteristics,
.cms-element-product-slider  .product-box.box-minimal .product-price-unit,
.cms-element-product-slider  .product-box.box-minimal .product-unit-label,
.cms-element-product-slider  .product-box.box-minimal .price-unit-reference,
.cms-element-product-slider  .product-box.box-minimal .product-price-tax-link,
.product-listing .product-box.box-minimal .product-action,
.product-listing .product-box.box-minimal .product-rating,
.product-listing .product-box.box-minimal .product-description,
.product-listing .product-box.box-minimal .product-variant-characteristics,
.product-listing .product-box.box-minimal .product-price-unit,
.product-listing .product-box.box-minimal .product-unit-label,
.product-listing .product-box.box-minimal .price-unit-reference,
.product-listing .product-box.box-minimal .product-price-tax-link {
    display: none !important;
}

/* ============================================================
   MOBILE (<=767px) — kompakter wie Doofinder-Original.
   Fabian 31.08.2026: weniger Abstand Titel<->Bild und Titel<->Preis
   Gilt fuer alle Box-Varianten (standard/image/minimal) + rhweb.
   ============================================================ */
@media (max-width: 767px) {
  .cms-element-product-listing .product-box .card-body,
  .cms-element-product-slider  .product-box .card-body,
  .product-listing .product-box .card-body,
  .cms-element-rhweb-product-listing .product-box .card-body {
      padding: 10px !important;
  }
  .cms-element-product-listing .product-box .product-image-wrapper,
  .cms-element-product-slider  .product-box .product-image-wrapper,
  .product-listing .product-box .product-image-wrapper,
  .cms-element-rhweb-product-listing .product-box .product-image-wrapper,
  .cms-element-rhweb-product-listing .product-box.box-image .product-image-wrapper,
  .cms-element-product-listing .product-box.box-minimal .product-image-wrapper,
  .cms-element-product-slider  .product-box.box-minimal .product-image-wrapper,
  .product-listing .product-box.box-minimal .product-image-wrapper,
  .cms-element-product-listing .product-box.box-standard .product-image-wrapper,
  .cms-element-product-slider  .product-box.box-standard .product-image-wrapper,
  .product-listing .product-box.box-standard .product-image-wrapper {
      height: 150px !important;
      min-height: 150px !important;
      max-height: 150px !important;
      aspect-ratio: auto !important;
      flex: 0 0 auto !important;
      margin-bottom: 6px !important;
  }
  .cms-element-product-listing .product-box .product-name,
  .cms-element-product-slider  .product-box .product-name,
  .product-listing .product-box .product-name,
  .cms-element-rhweb-product-listing .product-box .product-name,
  .cms-element-product-listing .product-box.box-minimal .product-name,
  .cms-element-product-slider  .product-box.box-minimal .product-name,
  .product-listing .product-box.box-minimal .product-name {
      margin-top: 0 !important;
      margin-bottom: 2px !important;
      font-size: 13px !important;
      line-height: 1.2 !important;
      max-height: 31.2px !important;
  }
  .cms-element-product-listing .product-box .product-price-info,
  .cms-element-product-slider  .product-box .product-price-info,
  .product-listing .product-box .product-price-info,
  .cms-element-rhweb-product-listing .product-box .product-price-info,
  .cms-element-product-listing .product-box .product-price-wrapper,
  .cms-element-rhweb-product-listing .product-box .product-price-wrapper {
      margin-top: 2px !important;
  }
}