/*
Theme Name: The Retailer Child
Theme URI: http://theretailer.getbowtied.com/
Description: This is a child theme for The Retailer.
Author: Get Bowtied
Author URI: http: //www.getbowtied.com/
Template: theretailer
Version: 1.0
*/

/* =========================================
   Produktseite – korrektes Layout für The Retailer
   ========================================= */
/* =========================================
   Produktseite – korrektes Layout für The Retailer
   ========================================= */

/* Bild und Text nebeneinander, ohne Sidebar zu beeinflussen */
.gbtr_product_details_right_col {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
}

/* Bild links */
.gbtr_product_details_right_col .images {
  flex: 1 1 45%;
  max-width: 500px;
}

/* Produktinfos rechts */
.gbtr_product_details_right_col .summary {
  flex: 1 1 50%;
  max-width: 600px;
  overflow: visible;
  margin-left: 20px; /* etwas Luft zum Bild */
}

/* Produkt-Titel lesbar & barrierefrei */
.woocommerce div.product .product_title.entry-title {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
  margin-bottom: 20px;
}

/* Mobile Ansicht */
@media (max-width: 768px) {
  .gbtr_product_details_right_col {
    flex-direction: column;
    gap: 20px;
  }

  .gbtr_product_details_right_col .images,
  .gbtr_product_details_right_col .summary {
    max-width: 100%;
  }

  .woocommerce div.product .product_title.entry-title {
    font-size: 20px;
  }

  /* Bilder wieder volle Breite auf Handy */
  .woocommerce div.product .images img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Zentrierung von Text und Buttons */
  .woocommerce div.product .summary {
    text-align: center;
    margin: 0 auto;
    padding: 0 10px;
  }

  .woocommerce div.product form.cart {
    display: flex;
    justify-content: center;
  }

  /* kleinere Abstände */
  .woocommerce div.product .summary p {
    margin-bottom: 6px;
  }
}

/* --- Startseite & Kategorieseiten: zentriert, aber schöner Umbruch --- */
.home h1, 
.home h2, 
.home h3, 
.archive h1, 
.archive h2, 
.archive h3 {
  text-align: center !important;
  hyphens: auto !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  max-width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Leicht kleinere Schrift für Handy, damit nichts zu groß wird */
@media (max-width: 600px) {
  .home h1, .archive h1 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }
  .home h2, .archive h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
}