Version: 1.1
/*
Theme Name: UniNeukoelln Child
Template: inspiro
*/just 

/*MAD*/

/* ============================
   GLOBAL SPACING & RESET
============================ */

.hero,
.product,
.features,
.price {
  margin-bottom: 32px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ============================
   HERO SECTION
============================ */

.hero {
  padding: 28px 16px;
  text-align: center;
}

.hero h1 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
}

.hero .sub {
  font-size: 15px;
  margin-bottom: 14px;
  color: #444;
}

.cta {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 12px 18px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
}


/* ============================
   PRODUCT SECTION
============================ */

.product {
  padding: 20px 16px;
  text-align: center;
}

.product h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.product img {
  max-width: 92%;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.product .desc {
  margin-top: 10px;
  color: #555;
  font-size: 15px;
}


/* ============================
   FEATURES SECTION
============================ */

.features {
  padding: 20px 16px;
}

.features h3 {
  font-size: 18px;
  margin-bottom: 12px;
  font-weight: 600;
}

.features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.features li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 15px;
}


/* ============================
   PRICE SECTION
============================ */

.price {
  text-align: center;
  padding: 20px 16px;
}

.price .old {
  text-decoration: line-through;
  color: #b3b3b3;
  margin-right: 8px;
}

.price .now {
  font-weight: 800;
  font-size: 22px;
  color: #000;
}

.price .note {
  color: #666;
  font-size: 14px;
  margin-top: 8px;
}


/* ============================
   STICKY BUY BUTTON (MOBILE)
============================ */

@media (max-width: 768px) {
  .sticky-buy-button {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    background: #000;
    color: #fff;
    padding: 14px 18px;
    text-align: center;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 700;
    z-index: 9999;
    box-shadow: 0 10px 28px rgba(0,0,0,0.22);
    text-decoration: none !important;
  }

  .sticky-buy-button * {
    text-decoration: none !important;
  }

  body {
    padding-bottom: 100px;
  }
}


/* ============================
   DESKTOP OPTIMIERUNGEN
============================ */

@media (min-width: 769px) {
  .hero h1 {
    font-size: 32px;
  }

  .product img {
    max-width: 480px;
    margin: 0 auto;
  }
}
.woocommerce div.product form.cart .variations { display:block; margin:12px 0; }
.woocommerce div.product .single_variation_wrap { margin-top:12px; }
.woocommerce div.product .variations select { width:100%; padding:12px; font-size:16px; }
/*mmmmm */
/* Related Products – mobil: horizontale Kartenleiste */
.related.products {
  padding: 16px 16px 8px;
}

.related.products > h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

/* UL als horizontale Leiste */
.related.products ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

/* Einzelne Karte */
.related.products ul.products li.product {
  scroll-snap-align: start;
  min-width: 160px;
  max-width: 220px;
  flex: 0 0 auto;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  text-align: center;
}

/* Bild in der Karte */
.related.products ul.products li.product img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* Titel */
.related.products ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px;
  margin: 6px 0;
  line-height: 1.3;
}

/* Preis */
.related.products ul.products li.product .price {
  font-weight: 700;
  color: #000;
  margin-top: 6px;
}

/* Desktop: Grid statt Slider */
@media (min-width: 769px) {
  .related.products ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    overflow: visible;
  }

  .related.products ul.products li.product {
    min-width: auto;
    max-width: none;
  }
}
.woocommerce-breadcrumb,
.breadcrumb,
nav.woocommerce-breadcrumb,
nav.breadcrumb {
    display: none !important;
}
/* Globale Textausrichtung für Produktseiten */
.single-product .product,
.single-product .product *:not(.cta):not(.sticky-buy-button):not(button):not(.button) {
    text-align: left !important;
}
/* Desktop: sauberes 3-Spalten-Grid für Related Products */
@media (min-width: 769px) {

  .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0;
    margin: 0;
  }

  .related.products ul.products li.product {
    min-width: auto !important;
    max-width: none !important;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .related.products ul.products li.product img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 10px;
  }

  .related.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px;
    margin: 8px 0;
    line-height: 1.3;
    flex-grow: 1;
  }

  .related.products ul.products li.product .price {
    font-weight: 700;
    margin-top: auto;
  }
}
.related.products ul.products li.product {
  width: auto !important;
}
/* Entfernt den leeren linken Platz im Desktop-Grid */
@media (min-width: 769px) {

  /* Entfernt Theme-Margins/Padding auf dem UL */
  .related.products ul.products {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Entfernt linke Abstände auf dem ersten Produkt */
  .related.products ul.products li.product:first-child {
    margin-left: 0 !important;
  }

  /* Falls das Theme mit nth-child arbeitet */
  .related.products ul.products li.product {
    margin-left: 0 !important;
  }
}
/* WooCommerce Tabs ausblenden, Inhalt behalten */
.woocommerce-tabs .tabs {
    display: none !important;
}

/* Optional: Abstand oben reduzieren */
.woocommerce-tabs {
    margin-top: 20px;
}
/* WooCommerce Tabs ausblenden, Inhalt behalten */
.woocommerce-tabs .tabs {
    display: none !important;
}

/* Optional: Abstand oben reduzieren */
.woocommerce-tabs {
    margin-top: 20px;
}
/* Label "Größe" komplett entfernen */
.variations .label,
.variations td.label,
.woocommerce-variation .label {
    display: none !important;
}

/* Dropdown linksbündig ausrichten */
.variations td.value,
.variations .value {
    padding-left: 0 !important;
    text-align: left !important;
    display: block !important;
}
/* Mobile: Produktbild wirklich vollbreit erzwingen */
@media (max-width: 768px) {

    /* Der gesamte Produkt-Grid-Container */
    .product,
    .product-wrapper,
    .woocommerce div.product {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Die Bild-Spalte */
    .product-gallery,
    .woocommerce-product-gallery {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Der Wrapper im Gallery-Container */
    .woocommerce-product-gallery__wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Das eigentliche Bild */
    .woocommerce-product-gallery__image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}
/* Rückgängig machen, was das Bild versteckt */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.product-gallery,
.product-wrapper {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* Produktbild auf Mobile vollbreit machen */
@media (max-width: 768px) {

    /* Padding entfernen, das das Bild verkleinert */
    .woocommerce-product-gallery {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Bild selbst */
    .woocommerce-product-gallery__image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}