/* ====== onair Woo ⟷ Store-Polish ====== */

/* 0) Container-Breite und „Luft“ */
.woocommerce .products, .woocommerce-page .products { margin-top: 1.25rem; }
.woocommerce-result-count { color: var(--oc-muted); margin: .2rem 0 1rem; }
.woocommerce-notices-wrapper { margin-bottom: 1rem; }

/* 1) Sortierung hübsch linksbündig + passend zum Dark-Theme */
.woocommerce .woocommerce-ordering { float: none; text-align: left; margin-bottom: 1rem; }
.woocommerce .woocommerce-ordering select {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; border-radius: 12px; padding: .45rem .6rem;
}
.woocommerce .woocommerce-ordering select:focus {
  border-color: #8f87ff; box-shadow: 0 0 0 .2rem rgba(108,92,231,.25);
}

/* 2) Grid: gleiche Kartenhöhe (Bild + Inhalt ordentlich) */
.woocommerce ul.products li.product { display: flex; flex-direction: column; }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: block; }
.woocommerce ul.products li.product .price { margin-top: .25rem; }
.woocommerce ul.products li.product .button { margin-top: auto; } /* Button immer unten */

/* 3) Karten-Header & Titel */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  line-height: 1.25; min-height: 2.6em; /* zweizeilig möglich */
}

/* 4) Pagination mittig & pillig (falls viele Produkte) */
.woocommerce nav.woocommerce-pagination { text-align: center; }
.woocommerce nav.woocommerce-pagination ul { justify-content: center; }

/* 5) Breadcrumbs (wenn in functions.php aktiviert) */
.oc-breadcrumb .breadcrumb {
  --bs-breadcrumb-divider: '›';
  background: transparent; margin: 0; padding: 0;
}
.oc-breadcrumb .breadcrumb-item { color: var(--oc-muted); }
.oc-breadcrumb .breadcrumb-item a { color: #fff; text-decoration: none; }
.oc-breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }

/* 6) Produktseite: Galerie-Bild rund + Schatten, Meta dezenter */
.woocommerce div.product div.images img { border-radius: 14px; box-shadow: 0 16px 42px rgba(0,0,0,.45); }
.woocommerce div.product .product_meta { color: var(--oc-muted); }
.woocommerce div.product .product_meta a { color: #fff; text-decoration: none; }
.woocommerce div.product .product_meta a:hover { text-decoration: underline; }

/* 7) Warenkorb/Checkout – Tabellenränder weicher */
.woocommerce table.shop_table { border-radius: 14px; overflow: hidden; }
.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button{
  font-weight: 700; font-size: 1.05rem;
}

/* 8) (Falls doch Sidebar/WP-Widgets) – Dark/Glass & Listen fixen */
.widget-area .widget,
.sidebar .widget, .woocommerce .widget {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px; padding: 14px 14px 10px; color: var(--oc-text);
}
.widget-title, .widget .widgettitle { color: #fff; font-weight: 700; margin-bottom: .5rem; }
.widget ul, .woocommerce .widget ul { list-style: none; padding-left: 0; margin: 0; }
.widget ul li { padding: .35rem .25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.widget ul li:last-child { border-bottom: 0; }
.widget a { color: #fff; text-decoration: none; }
.widget a:hover { text-decoration: underline; }

/* 9) Fuß-/Seiten-Links allgemein schöner */
footer a, .site-footer a { color: #fff; text-decoration: none; opacity: .9; }
footer a:hover, .site-footer a:hover { opacity: 1; text-decoration: underline; }

/* 10) Kleine Korrekturen für sehr große Bilder */
.woocommerce ul.products li.product a img { width: 100%; height: auto; object-fit: cover; }

/* ===== Shop-Layout: zentriert & luftiger ===== */
.oc-shop-container{
  /* gewünschte maximale Shopbreite – gern anpassen */
  max-width: 1200px;             /* z.B. 1140 / 1200 / 1320 */
  margin: 0 auto;
  padding: 0 24px;               /* Seitenabstand */
}

/* Toolbar: Ergebnis links, Sortierung rechts */
.woocommerce .woocommerce-result-count{ 
  margin: .25rem 0 1rem; 
  color: var(--oc-muted);
}
.woocommerce .woocommerce-ordering{
  margin: .25rem 0 1rem;
  float: none;                   /* Standard float entfernen */
  margin-left: auto;             /* nach rechts schieben */
  display: inline-block;
}
@media (min-width: 768px){
  /* Ergebnis-Text & Sortierung in eine Zeile */
  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering{
    display: inline-block;
    vertical-align: middle;
  }
}

/* Sortier-Select an Dark/Glass anpassen (passt zu deinem Theme) */
.woocommerce .woocommerce-ordering select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 12px;
  padding: .45rem .6rem;
}
.woocommerce .woocommerce-ordering select:focus{
  border-color: #8f87ff;
  box-shadow: 0 0 0 .2rem rgba(108,92,231,.25);
}

/* Produktkarten: kompakter & Bilder kleiner */
.woocommerce ul.products{ margin-top: .5rem; }

.woocommerce ul.products li.product{
  padding: 14px;                 /* etwas kompakter als zuvor */
}

.woocommerce ul.products li.product a img{
  /* kleinere, einheitliche Darstellung */
  aspect-ratio: 1 / 1;           /* quadratisch */
  height: auto;
  max-height: 220px;             /* <— Bildhöhe hier steuern (z.B. 200–240) */
  object-fit: cover;
  border-radius: 12px;
}

/* Titel kürzer, Button immer unten: */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: .98rem;
  min-height: 2.4em;             /* max. zwei Zeilen */
}
.woocommerce ul.products li.product{ display:flex; flex-direction:column; }
.woocommerce ul.products li.product .price{ margin-top: .25rem; }
.woocommerce ul.products li.product .button{ margin-top:auto; }

/* Pagination mittig */
.woocommerce nav.woocommerce-pagination{ text-align:center; }
.woocommerce nav.woocommerce-pagination ul{ justify-content:center; }

/* (falls Sidebar/Widgets aktiv sind) – saubere Darstellung */
.widget-area .widget,
.sidebar .widget, .woocommerce .widget{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 14px 14px 10px;
}
.widget ul{ list-style: none; padding-left: 0; margin: 0; }
.widget ul li{ padding: .35rem .25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.widget ul li:last-child{ border-bottom: 0; }
.widget a{ color:#fff; text-decoration:none; }
.widget a:hover{ text-decoration:underline; }

/* ===== Toolbar: Ergebnis links, Sortierung oben rechts ===== */
.oc-shop-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .25rem 0 1rem;
}

/* Ergebnistext dezenter */
.oc-shop-toolbar .oc-shop-count,
.woocommerce .woocommerce-result-count{
  color: var(--oc-muted);
  margin: 0;
}

/* Sortier-Dropdown hübsch, mit fester Breite */
.oc-shop-toolbar .oc-shop-ordering select,
.woocommerce .woocommerce-ordering select{
  min-width: 220px;                 /* genug Platz, wirkt nicht gequetscht */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 12px;
  padding: .45rem .6rem;
}
.oc-shop-toolbar .oc-shop-ordering select:focus{
  border-color: #8f87ff;
  box-shadow: 0 0 0 .2rem rgba(108,92,231,.25);
}

/* Mobile: untereinander, Sortierung unten */
@media (max-width: 575.98px){
  .oc-shop-toolbar{
    flex-direction: column;
    align-items: stretch;
  }
  .oc-shop-toolbar .oc-shop-ordering select{ width: 100%; min-width: 0; }
}

/* (Falls noch nicht gesetzt) – Shop-Inhalt zentrieren und schmaler */
.oc-shop-container{
  max-width: 1200px;   /* gern 1140 / 1200 / 1320 anpassen */
  margin: 0 auto;
  padding: 0 24px;
}

/* Bilder etwas kleiner & einheitlich */
.woocommerce ul.products li.product a img{
  aspect-ratio: 1 / 1;
  max-height: 210px;   /* bei 4 Spalten evtl. 190–200px wählen */
  object-fit: cover;
  border-radius: 12px;
}
/* ===== Single Product – Bühne, 2 Spalten, Glass-Panel ===== */
.oc-single{
  max-width: 1100px;           /* 1140/1200 geht auch – Geschmackssache */
  margin: 0 auto;
  padding: 0 24px 40px;
}

/* Grid: links Galerie, rechts Summary-Panel */
.single-product .product{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 991.98px){
  .single-product .product{ grid-template-columns: 1fr; }
}

/* Galerie */
.woocommerce div.product div.images{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 14px;
}
.woocommerce div.product div.images img{
  border-radius: 12px;
  box-shadow: 0 16px 42px rgba(0,0,0,.45);
}

/* Summary als Glass-Card */
.woocommerce div.product .summary{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 18px 18px 16px;
  backdrop-filter: blur(10px);
  color: #eef1ff;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.woocommerce div.product .product_title{ color:#fff; margin-bottom: .35rem; }
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color:#fff; font-size:1.35rem; font-weight:800; margin:.25rem 0 .6rem;
}

/* Hinweis-Badge (Hook aus functions.php) */
.oc-badge-download{
  display:inline-flex; align-items:center; gap:.5rem;
  background-image: linear-gradient(135deg,var(--oc-acc1),var(--oc-acc2));
  color:#fff; padding:.35rem .6rem; border-radius:999px;
  box-shadow: 0 8px 22px rgba(108,92,231,.35);
  margin-bottom: .6rem;
  font-weight:600; font-size:.92rem;
}

/* Menge + Button */
.woocommerce .quantity .qty{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);
  color:#fff; border-radius:10px; padding:.45rem .6rem; width:90px;
}
.single-product .cart .button{
  margin-left:.5rem; padding:.6rem 1rem; font-weight:700; font-size:1.02rem;
}

/* Meta & Kategorien dezenter */
.woocommerce div.product .product_meta{
  margin-top: .75rem; color: rgba(240,243,255,.78);
}
.woocommerce div.product .product_meta a{ color:#fff; text-decoration:none; }
.woocommerce div.product .product_meta a:hover{ text-decoration:underline; }

/* Tabs unter dem Panel – pilliger Look (ergänzt vorhandene Tab-Styles) */
.woocommerce div.product .woocommerce-tabs{
  margin-top: 22px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  border:0; padding-left:0; margin-bottom: .75rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px; margin-right:.5rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  background-image: linear-gradient(135deg,var(--oc-acc1),var(--oc-acc2)); border:0;
}
.woocommerce-Tabs-panel{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: 14px;
}

/* Related Products – gleiche Karten wie im Shopgitter */
.related.products h2{ margin-top: 28px; }
.related.products ul.products{ margin-top: 10px; }
.related.products ul.products li.product{
  background: var(--oc-glass-bg);
  border:1px solid var(--oc-glass-bd);
  border-radius:18px; padding:14px; backdrop-filter: blur(10px);
}
.related.products ul.products li.product a img{
  border-radius: 12px; object-fit: cover; aspect-ratio: 1/1; max-height: 210px;
}

/* Breadcrumbs (wenn aktiv) enger an den Content */
.oc-breadcrumb{ margin-bottom: 10px; }

/* ===== Single Product – Bühne, 2 Spalten, Glass-Panel ===== */
.oc-single{
  max-width: 1100px;           /* 1140/1200 je nach Geschmack */
  margin: 0 auto;
  padding: 0 24px 40px;
}

/* Grid: links Galerie, rechts Summary */
.single-product .product{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 991.98px){
  .single-product .product{ grid-template-columns: 1fr; }
}

/* Galerie */
.woocommerce div.product div.images{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 14px;
}
.woocommerce div.product div.images img{
  border-radius: 12px;
  box-shadow: 0 16px 42px rgba(0,0,0,.45);
}

/* Summary als Glass-Card */
.woocommerce div.product .summary{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 18px 18px 16px;
  backdrop-filter: blur(10px);
  color: #eef1ff;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.woocommerce div.product .product_title{ color:#fff; margin-bottom:.35rem; }
.woocommerce div.product p.price,
.woocommerce div.product span.price{ color:#fff; font-size:1.35rem; font-weight:800; margin:.25rem 0 .6rem; }

/* Download-Badge */
.oc-badge-download{
  display:inline-flex; align-items:center; gap:.5rem;
  background-image: linear-gradient(135deg,var(--oc-acc1),var(--oc-acc2));
  color:#fff; padding:.35rem .6rem; border-radius:999px;
  box-shadow: 0 8px 22px rgba(108,92,231,.35);
  margin-bottom: .6rem; font-weight:600; font-size:.92rem;
}

/* Menge + CTA */
.woocommerce .quantity .qty{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);
  color:#fff; border-radius:10px; padding:.45rem .6rem; width:90px;
}
.single-product .cart .button{
  margin-left:.5rem; padding:.6rem 1rem; font-weight:700; font-size:1.02rem;
}

/* Meta & Kategorien dezenter */
.woocommerce div.product .product_meta{
  margin-top:.75rem; color: rgba(240,243,255,.78);
}
.woocommerce div.product .product_meta a{ color:#fff; text-decoration:none; }
.woocommerce div.product .product_meta a:hover{ text-decoration:underline; }

/* Tabs hübsch (ergänzt vorhandene) */
.woocommerce div.product .woocommerce-tabs{ margin-top:22px; }
.woocommerce div.product .woocommerce-tabs ul.tabs{
  border:0; padding-left:0; margin-bottom:.75rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px; margin-right:.5rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  background-image: linear-gradient(135deg,var(--oc-acc1),var(--oc-acc2)); border:0;
}
.woocommerce-Tabs-panel{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: 14px;
}

/* Related Products im Card-Stil */
.related.products h2{ margin-top: 28px; }
.related.products ul.products{ margin-top: 10px; }
.related.products ul.products li.product{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px; padding:14px; backdrop-filter: blur(10px);
}
.related.products ul.products li.product a img{
  border-radius: 12px; object-fit: cover; aspect-ratio:1/1; max-height: 210px;
}

/* ——— Unten/Seite: „komische Links“ (Widgets/Listen) weg oder schön ——— */

/* Variante 1: Auf Produktseiten Sidebar komplett ausblenden */
.single-product .sidebar, .single-product .widget-area{ display:none !important; }

/* Variante 2 (falls Sidebar behalten): glasig + ohne Bullet-Punkte */
.single-product .widget-area .widget,
.single-product .sidebar .widget{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px; padding: 14px 14px 10px; color:#eef1ff;
}
.single-product .widget-title, .single-product .widget .widgettitle{ color:#fff; font-weight:700; margin-bottom:.5rem; }
.single-product .widget ul{ list-style:none; padding-left:0; margin:0; }
.single-product .widget ul li{ padding:.35rem .25rem; border-bottom:1px solid rgba(255,255,255,.08); }
.single-product .widget ul li:last-child{ border-bottom:0; }
.single-product .widget a{ color:#fff; text-decoration:none; }
.single-product .widget a:hover{ text-decoration:underline; }

/* ===== Breadcrumb Leiste ===== */
.oc-breadcrumb{
  margin: 10px 0 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 8px 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
.oc-breadcrumb .breadcrumb{ display:flex; flex-wrap:wrap; gap:.35rem .5rem; }
.oc-breadcrumb .breadcrumb-item{
  color: var(--oc-muted);
  position: relative;
  padding-right: 14px;
}
.oc-breadcrumb .breadcrumb-item a{
  color:#fff; text-decoration:none;
}
.oc-breadcrumb .breadcrumb-item a:hover{ text-decoration:underline; }
/* Pfeil-Trenner */
.oc-breadcrumb .breadcrumb-item:not(:last-child)::after{
  content: '›';
  position: absolute; right: 2px; top: 0; color: rgba(255,255,255,.7);
}

/* Rechte Spalte minimal breiter */
.single-product .product{
  grid-template-columns: 1fr 1.1fr;   /* vorher ~1.05fr/.95fr */
}

/* Sofort-Download Badge deutlich breiter, optisch wie Banner */
.oc-badge-download{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  width: 100%;                       /* volle Breite des Containers */
  padding: .6rem 1rem;               /* größerer Innenabstand */
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  text-align: center;
  border-radius: 12px;
  background-image: linear-gradient(135deg, var(--oc-acc1), var(--oc-acc2));
  color: #fff;
  box-shadow: 0 10px 28px rgba(108,92,231,.35);
  margin-bottom: .9rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: transform .2s ease, filter .2s ease;
}
.oc-badge-download:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
}


/* Tabs/Beschreibung über volle Breite (beide Spalten) */
.single-product .product .woocommerce-tabs{
  grid-column: 1 / -1;                 /* spannt über beide Spalten */
  margin-top: 24px;
}
.woocommerce-Tabs-panel{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 18px;
}

/* Mobile: saubere Reihenfolge beibehalten */
@media (max-width: 991.98px){
  .single-product .product{ grid-template-columns: 1fr; }
  .single-product .product .woocommerce-tabs{ grid-column: auto; }
}
/* Summary-Padding etwas definieren/vereinheitlichen */
.single-product .summary{
  padding: 18px;                 /* falls bei dir anders: hier anpassen */
}

/* Badge über die Ränder hinausziehen (breiter als die Card) */
.single-product .summary .oc-badge-download{
  width: calc(100% + 26px);      /* 36px = 2x 18px (Summary-Padding) */
  margin-left: -18px;
  margin-right: -18px;
  border-radius: 14px;
}

/* wenn du noch mehr Breite willst: */
.single-product .summary .oc-badge-download.oc-wide{
  width: calc(100% + 86px);      /* 56px = 2x 28px */
  margin-left: -28px;
  margin-right: -28px;
}
/* ===== Single-Product: Summary-Box breiter ===== */
@media (min-width: 992px){
  /* rechte Spalte breiter als die linke */
  .single-product .product{
    /* vorher evtl. 1fr 1.1fr – wir geben der Summary deutlich mehr Platz */
    grid-template-columns: minmax(300px, 0.85fr) minmax(560px, 1.65fr);
    column-gap: 36px; /* etwas mehr Luft zwischen Bild & Box */
  }
  /* keine künstliche Begrenzung der Summary-Breite */
  .single-product .product .summary{
    max-width: none;
  }
  /* Titel sauber umbrechen, ohne hässliches Wort-Breaking */
  .woocommerce div.product .product_title{
    word-break: normal;
    hyphens: auto;
  }
}