/*
 Theme Name:   Polestar Child
 Theme URI:    https://kranor.de/
 Description:  Child-Theme für Polestar
 Author:       kranor.de
 Author URI:   https://kranor.de/
 Template:     polestar
 Version:      1.0.0
 Text Domain:  polestar-child
*/

/* Eigene Styles hier */



/*Kopfzeile unter Logo abstand anpassen. original 60px */
/* Header-Abstand hart überschreiben */
#masthead.site-header.mobile-menu{
  margin-bottom: 10px !important;
  padding-top: 10px !important;      /* deine 25px waren recht groß */
  padding-bottom: 10px !important;   /* bei Bedarf anpassen */
}

/* Falls der Abstand vom nächsten Block kommt */
.site-content, #content, main#main{
  margin-top: 0 !important;
}



/* Preisblock sauber nebeneinander */
/* Badge sicher einfärben – auch mobil */
.single-product .summary .price .wc-save-badge,
.woocommerce div.product .summary .price .wc-save-badge{
  display: inline-flex !important;
  align-items: center;
  padding: .2rem .55rem !important;
  font-size: .85em;
  line-height: 1.2;
  border-radius: 999px !important;

  background-color: #e6f6ea !important;   /* Hintergrund */
  border: 1px solid #b8e1c5 !important;   /* Rahmen */
  color: #0a7a35 !important;              /* Textfarbe */
  text-decoration: none !important;       /* falls Preis per <del>/<ins> durchgestrichen ist */
}

/* Preiszeile nebeneinander + Wrap auf Mobil */
.single-product .summary .price{
  display: inline-flex !important;
  gap: .5rem !important;
  align-items: center !important;
  flex-wrap: wrap;
}

@media (max-width: 480px){
  .single-product .summary .price .wc-save-badge{
    font-size: .8em;
    padding: .18rem .5rem;
  }
}

/* Stripe Messaging ausblenden (Produkt + Checkout) */
#payment-method-message{ display:none!important; }


/* — Hauptbild wirklich abrunden — */
.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image a,
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* — Thumbnails: 6/Zeile, so groß wie der Platz erlaubt — */
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;               /* kleineres Gap = mehr Bildfläche */
  margin: 10px 0 0;
  padding: 0;
}

/* Flexslider-Defaults neutralisieren (float/width etc.) */
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs li {
  list-style: none;
  margin: 0 !important;
  float: none !important;   /* wichtig: float entfernen */
  width: auto !important;   /* wichtig: feste Li-Breiten entfernen */
}

/* Bilder füllen die Zelle, bleiben quadratisch, runde Ecken */
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs img {
  display: block;
  width: 100% !important; 
  height: auto !important;  /* übersteuert width/height-Attribute & onload() */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
}


/* Fallback: wenn Container schmaler ist, Thumbs auf verfügbare Breite einpassen */
@media (max-width: 1200px) {
  .woocommerce div.product div.images .flex-control-nav.flex-control-thumbs img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* bleibt quadratisch */
  }
}