/*
Theme Name: SportRoth2025
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.wc-attr-btn.is-selected {
  background-color: var(--wc-success) !important;
  border-color: var(--wc-success) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15) inset;
  font-weight: 600;
}


/* Original-Select unsichtbar lassen (zugänglich für Screenreader, falls gewünscht) */
.wc-attr-to-buttons .original-select select {
  position: absolute !important;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  pointer-events: none;
}
.wc-attr-to-buttons .original-select.is-hidden { display: block; }

/* Button-Gruppe */
.wc-attr-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .5rem 0 1rem;
}

/* Flatsome/UX-Button-Anmutung */
.wc-attr-btn {
  border: 1px solid var(--ux-border, #ddd);
  padding: .5rem .9rem;
  border-radius: 12px;
  line-height: 1;
  background: #fff;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .2s ease, border-color .2s ease;
}
.wc-attr-btn:hover { box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.wc-attr-btn.is-selected {
  border-color: var(--ux-accent, #111);
  box-shadow: 0 0 0 2px rgba(0,0,0,.05) inset;
  font-weight: 600;
}
.wc-attr-btn.is-disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Clear-Button klein/sekundär */
.wc-attr-clear {
  border: 1px dashed #ddd;
  background: transparent;
  padding: .4rem .7rem;
  border-radius: 10px;
  font-size: .85rem;
}

/* ===== Variation Buttons – Active = Success Color ===== */

:root{
  /* Fallback-Kette: nimmt vorhandene Theme-Variable, sonst grünes Default */
  --wc-success: var(--success, var(--success-color, var(--color-success, #46b450)));
}

/* Basis: unverändert, nur kleine Verfeinerungen */
.wc-attr-buttons { gap: .55rem; }
.wc-attr-btn{
  border: 1px solid var(--ux-border, #ddd);
  background: #fff;
  color: inherit;
  border-radius: 12px;
  padding: .55rem .9rem;
  line-height: 1;
  cursor: pointer;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease, color .15s ease, transform .05s ease;
}
.wc-attr-btn:hover{ box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.wc-attr-btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--wc-success) 55%, transparent);
  outline-offset: 2px;
}

/* >>> Aktive Auswahl = Success-Look <<< */
.wc-attr-btn.is-selected{
  background: var(--wc-success);
  border-color: var(--wc-success);
  color: #fff;                         /* guter Kontrast */
  box-shadow: 0 0 0 2px color-mix(in srgb, #fff 100%, transparent) inset;
  font-weight: 600;
}
.wc-attr-btn.is-selected:hover{
  filter: brightness(.97);
}
.wc-attr-btn.is-selected:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--wc-success) 80%, transparent);
  outline-offset: 2px;
}

/* Disabled-Zustand: bleibt dezent */
.wc-attr-btn.is-disabled{
  opacity: .38;
  cursor: not-allowed;
  filter: grayscale(.1);
}

/* Klein & sekundär: "Auswahl löschen" – neutral lassen */
.wc-attr-clear{
  border: 1px dashed #ddd;
  background: transparent;
  padding: .4rem .7rem;
  border-radius: 10px;
  font-size: .85rem;
}
.wc-attr-clear:hover{
  border-color: #cfcfcf;
}

/* Success-Farbe direkt aus Flatsome übernehmen */
:root{
  --wc-success: var(--fs-color-success, var(--success-color, var(--success, #46b450)));
}

/* Aktiver Variations-Button = Success-Look */
.single-product .variations_form .wc-attr-btn.is-selected{
  background-color: var(--wc-success) !important;
  border-color: var(--wc-success) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15) inset;
}

/* Größerer Preis in der Variantenbox */
.single-product .single_variation_wrap .woocommerce-variation-price,
.single-product .single_variation_wrap .woocommerce-variation-price .price,
.single-product .single_variation_wrap .woocommerce-variation-price .amount,
.single-product .single_variation_wrap .woocommerce-variation-price bdi {
  font-size: clamp(1.6rem, 2.2vw, 2.2rem); /* mobil → desktop */
  line-height: 1.2;
  font-weight: 700;
}
.single-product .single_variation_wrap .woocommerce-variation-price {
  margin: .4rem 0 .8rem;  /* etwas Luft */
}

/* Variations-"Tabelle" stapeln: Label oben, Werte darunter */
.single-product .variations { display:block; }
.single-product .variations tr { display:block; margin: 0 0 14px; }
.single-product .variations td,
.single-product .variations th { display:block; padding:0; }

/* Label-Optik über den Buttons */
.single-product .variations .label { 
  margin: 0 0 6px;
}
.single-product .variations .label label {
  display:block;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Optional: "Zurücksetzen"-Link rechts neben/unter dem Label etwas dezenter */
.single-product .variations .reset_variations {
  display:inline-block;
  margin-left: .6rem;
  font-size: .85em;
  opacity: .6;
}

.single-product .product-ids{
  display:flex;
  flex-wrap:wrap;
  gap: .8rem 1.2rem;
  margin:.6rem 0 1.2rem;
  font-size:.95rem;
  color:var(--fs-color-base,#4a4a4a);
}

.single-product .product-ids .product-sku-line,
.single-product .product-ids .product-gtin-line{
  display:inline-flex;
  align-items:baseline;
  gap:.35rem;
}

.single-product .product-ids .sku,
.single-product .product-ids .gtin{
  font-weight:600;
}



/* WhatsApp-Button */
.sr-btn.sr-wa{display:inline-block;padding:.55rem .9rem;border-radius:9999px;background:#25D366;color:#000;text-decoration:none;font-weight:600}
.sr-btn.sr-wa:hover{filter:brightness(.95)}

/* Basis-Button (du hast den schon ähnlich) */
.sr-btn.sr-wa, a.sr-wa{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.55rem .9rem; border-radius:9999px; font-weight:600;
  background:#25D366; color:#111; text-decoration:none;
}

/* Offizielles Icon links – SVG/PNG austauschen */
.sr-btn.sr-wa::before, a.sr-wa::before{
  content:""; display:inline-block; width:18px; height:18px;
  background-image:url('/wp-content/uploads/static/Digital_Glyph_Dark_Green.svg'); /* oder .png */
  background-repeat:no-repeat; background-size:contain; background-position:center;
}

/* Hover */
.sr-btn.sr-wa:hover, a.sr-wa:hover{ filter:brightness(.95); }

/* Dunkle Hintergründe: optional weiße Variante */
.dark .sr-btn.sr-wa, .footer-widgets .sr-btn.sr-wa{ color:#fff; }

/* WhatsApp-Button – Icon links einblenden */
.sr-btn.sr-wa{
  position: relative;
  display: inline-block;              /* stabil */
  padding: .55rem .9rem;              /* rechts */
  padding-left: 2.1rem;               /* Platz fürs Icon links */
  border-radius: 9999px;
  font-weight: 700;
  background: #ffff;
  color: #111;
  text-decoration: none;
}

.sr-btn.sr-wa::before{
  content: "";
  position: absolute;
  left: .75rem;                       /* Icon-Position */
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url('/wp-content/uploads/static/Digital_Glyph_Dark_Green.svg'); /* <— dein Pfad */
  pointer-events: none;
}

.sr-btn.sr-wa:hover{ filter: brightness(.95); }

/* === Shop-Sidebar: Marken-Logos fix === */

/* Bild: nicht strecken, max. 44px Höhe */
#shop-sidebar ul.brand-thumbnails li img.brand-thumbnail{
  width:auto !important;
  height:auto !important;
  max-height:44px !important;
  max-width:100%;
  object-fit:contain;
  display:block;
  margin:1px auto;            /* vertikaler Abstand + zentriert */
}

/* Linie zwischen den Logos entfernen + mehr Luft */
#shop-sidebar ul.brand-thumbnails li{
  border:0 !important;         /* z. B. border-bottom vom Plugin */

	 
}

/* Sicherheitshalber auch auf den Link selbst kein Border */
#shop-sidebar ul.brand-thumbnails li a{
  border:0 !important;
  box-shadow:none !important;
}

/* Definiert die maximale Größe für alle Marken-Thumbnails, 
   egal ob auf der Produktseite, in Widgets oder der Übersichtsseite */
img.brand-thumbnail {
    /* Stellt sicher, dass keine festen Breiten-/Höhenvorgaben des Themes/Plugins gelten */
    width: auto !important;
    height: auto !important;
    
    /* Setzt die maximale Höhe auf den gewünschten Wert */
    max-height: 64px !important; 
    
    /* Sorgt für korrekte Skalierung und zentrierte Anzeige */
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 5px auto; 
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}