/*
 * WillowPlant 12.10.2026 - wp-shop.css: shopweite Nacharbeiten nach dem mobilen Gesamt-Check (Fortsetzung von
 * wp-mobile.css, eingebunden in templates/_partials/head.tpl direkt danach). Zuruecknehmen: Einbindung entfernen.
 */
/* ===== 12.10.2026: Shopweite Nacharbeiten nach mobilem Gesamt-Check ===== */

/* (1) Seite 1 px breiter als der Bildschirm -> leichtes seitliches Wackeln: aside#notifications hatte margin 0 -15px */
@media (max-width: 767px) {
  aside#notifications {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Rest (Newsletter-Container, verstecktes Chatwoot-iframe je 1 px) abschneiden; clip erzeugt - anders als
     hidden - keinen Scroll-Container, fixe Leisten und sticky bleiben unberuehrt */
  html,
  body {
    overflow-x: clip;
  }
}

/* (2) Footer: leerer gruener Streifen ueber dem orangen Bogen (footer.png hat oben ~105 px transparenten Rand,
   dazu padding-top 180 px) -> Grafik 80 px hoeher, Innenabstand 100 px. (3) Papagei kleiner, Social-Icons in CI-Orange. */
@media (max-width: 767px) {
  .footer-container {
    padding-top: 100px !important;
    background-position: 50% -80px !important;
  }
  #footer img.willow_footer {
    width: 90px !important;
    height: auto !important;
  }
}
.block-social li.facebook,
.block-social li.rss {
  background-color: #ee732a !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
}
.block-social li.facebook {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M13.5 21v-7.6h2.6l.4-3h-3V8.5c0-.9.3-1.5 1.5-1.5h1.6V4.3c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4v2.2H7.8v3h2.6V21h3.1z'/%3E%3C/svg%3E") !important;
}
.block-social li.rss {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.18 15.64a2.18 2.18 0 1 1 0 4.36 2.18 2.18 0 0 1 0-4.36zM4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44zm0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z'/%3E%3C/svg%3E") !important;
}
.block-social li.facebook:hover,
.block-social li.rss:hover {
  background-color: #d4621f !important;
}

/* (4) Kein Blocksatz auf dem Handy (Kategorie-/Produktbeschreibung, Ratgeber-Tabellen): linksbuendig mit Silbentrennung */
@media (max-width: 767px) {
  #wrapper [style*="text-align:justify"],
  #wrapper [style*="text-align: justify"],
  #category-description, #category-description *,
  #product .product-description2, #product .product-description2 *,
  #product #description, #product #description * {
    text-align: left !important;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  #product #description [style*="text-align:center"], #product #description [style*="text-align: center"],
  #product .product-description2 [style*="text-align:center"], #product .product-description2 [style*="text-align: center"] {
    text-align: center !important;
  }
}

/* (5) "Zum Seitenanfang" im Stil von Filter/Sortieren statt grauem Theme-Button */
a.btn.btn-secondary[href="#header"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: 44px;
  padding: 0 20px !important;
  border: 3px solid #fff !important;
  border-radius: 20px !important;
  background: #f1f1f1 !important;
  color: #414141 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: uppercase;
  box-shadow: none !important;
}
a.btn.btn-secondary[href="#header"] .material-icons {
  color: #ee732a;
  font-size: 22px;
}

/* (6) Blog-Boxen der Startseite (Saisonkalender, Ratgeber) wie "Interessante Beitraege": 16 px Innenrand.
   (7) Abschnittsueberschriften der Startseite einheitlich 24 px nach oben, 12 px zum Inhalt. */
@media (max-width: 767px) {
  .ybc_block_category {
    padding: 15px 16px !important;
    margin-bottom: 24px !important;
  }
  .ybc_block_category .title_blog {
    margin: 4px 0 12px !important;
  }
  .page-home .hc-layout {
    margin-bottom: 24px !important;
  }
  .page-home a.home_blog {
    margin: 0 0 12px !important;
  }
}

/* (8) Variantenauswahl (Laenge, Beglasung ...) mobil groesser zum Tippen: mind. 44 x 40 px, 8 px Abstand */
@media (max-width: 767px) {
  #product .product-variants .input-container {
    margin: 0 8px 8px 0 !important;
  }
  #product .product-variants .input-container .radio-label {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    height: 40px;
    padding: 0 12px !important;
    font-size: 15px !important;
    border-radius: 20px !important;
  }
}

/* (9) Wissen-Beitraege: Teilen-Buttons wie auf der Produktseite (wp-mobile.js baut .social-sharing mit Facebook,
   Pinterest, WhatsApp, Teilen). Styles der WhatsApp-/Teilen-Icons 1:1 aus ps_sharebuttons.tpl (dort nur Produktseite). */
.social-sharing li.wp-whatsapp,.social-sharing li.wp-share-native{position:relative;background-size:1.375rem 1.375rem;background-position:center}
.social-sharing li.wp-whatsapp.icon-gray{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23acaaa6' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E")}
.social-sharing li.wp-whatsapp.icon-gray:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2325d366' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E")}
.social-sharing li.wp-share-native.icon-gray{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23acaaa6' d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.790 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E")}
.social-sharing li.wp-share-native.icon-gray:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ee732a' d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E")}
.social-sharing li.wp-share-native.wp-copied::after{content:"Link kopiert";position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;padding:4px 8px;border-radius:6px;background:#414141;color:#fff;font-size:12px;line-height:1.2}
body.ybc-blog .wp-blog-share {
  margin: 8px 0 4px;
}
body.ybc-blog .wp-blog-share ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.ybc-blog .wp-blog-share li {
  margin: 0 !important;
}

/* (10) "0 Gefallen" bei Wissen-Beitraegen ausblenden */
.ybc-blog-like-span {
  display: none !important;
}

/* (12) Kassa: Versandart-Logo ausblenden (img/s/175.jpg war das PrestaShop-Demobild "Wonka/London") */
body#checkout .delivery-option .carrier-logo,
body#checkout .summary-selected-carrier .logo-container {
  display: none !important;
}

/* (13) Kassa Schritt 4 "Bitte pruefen Sie Ihre Bestellung" mobil: Bild neben dem Namen, Summen kompakt, "Gesamt"
   normal geschrieben (bricht nicht mehr um), Steuerzeile als normale Zeile Beschriftung links / Betrag rechts. */
@media (max-width: 767px) {
  #order-summary-content .order-confirmation-table {
    padding: 14px !important;
  }
  #order-summary-content .order-line {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 !important;
  }
  #order-summary-content .order-line > .col-xs-3 {
    flex: 0 0 64px;
    max-width: 64px;
    padding: 0 !important;
  }
  #order-summary-content .order-line > .col-xs-3 img {
    width: 64px;
    height: auto;
  }
  #order-summary-content .order-line > .details {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 0 0 12px !important;
    font-size: 15px;
    line-height: 1.3;
  }
  #order-summary-content .order-line > .qty {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 10px;
    padding: 0 !important;
    font-size: 14px;
  }
  #order-summary-content .order-line > .qty .row {
    margin: 0 !important;
  }
  #order-summary-content .order-line > .qty .row > div {
    padding: 0 !important;
  }
  #order-summary-content .order-confirmation-table hr {
    margin: 10px 0 !important;
  }
  #order-summary-content .order-confirmation-table table {
    width: 100%;
  }
  #order-summary-content .order-confirmation-table table td {
    padding: 4px 0 !important;
    font-size: 14px !important;
  }
  #order-summary-content .order-confirmation-table tr.total-value td,
  #order-summary-content .order-confirmation-table tr.total-value .text-uppercase {
    font-size: 15px !important;
    text-transform: none !important;
  }
  #order-summary-content .order-confirmation-table tr.sub.taxes td {
    text-align: right !important;
    color: #7a7a7a;
    font-size: 13px !important;
  }
  #order-summary-content .order-confirmation-table tr.sub.taxes .label {
    float: left;
  }
  #order-summary-content .order-confirmation-table tr.sub.taxes .label,
  #order-summary-content .order-confirmation-table tr.sub.taxes .value {
    font-size: 13px !important;
  }
}

/* (11) 404-Seite (templates/errors/404.tpl, eigener Text + Links statt "Noch keine Produkte verfuegbar") */
.wp-404-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 6px;
  padding: 0;
  list-style: none;
}
.wp-404-links a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  background: #ee732a;
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
}
.wp-404-links a:hover {
  background: #d4621f;
}