/*
 * Produktseite (Ergänzung zur Vorlage Kreativdenker): Farbfelder, Schließe-Wahl, Symbole,
 * Hinweisboxen, Charakter/Details/Beschreibung. Lädt nach style.css (Handle-Abhängigkeit
 * "rios1931"), darf darum dieselbe Spezifität verwenden, um Regeln aus style.css zu ersetzen.
 */

/* ---------- Symbole im hellblauen Kasten unter dem Kaufkasten (Vorlage Kreativdenker, Kevin 14.09.) ---------- */
.rios-symbolkasten{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;background:#edf2f7;padding:1.25rem 1rem;margin:1rem 0 .75rem}
.rios-symbol{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;width:6.5rem;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.rios-symbol[aria-expanded="true"] img,.rios-symbol[aria-expanded="true"] .rios-symbol-badge{box-shadow:0 0 0 2px var(--weiss),0 0 0 4px var(--brand)}
.rios-symbol-erklaerung{position:relative;border:1px solid var(--linie);background:var(--weiss);padding:1rem 2.5rem 1rem 1.25rem;margin:-.25rem 0 .75rem;font-size:.875rem;line-height:1.55}
.rios-symbol-erklaerung strong{display:block;font-family:var(--serif);font-size:1.0625rem;font-weight:400;margin-bottom:.3rem}
.rios-symbol-erklaerung p{margin:0 0 .5rem}
.rios-symbol-erklaerung a{text-decoration:underline;text-underline-offset:3px;font-size:.8125rem}
.rios-symbol-zu{position:absolute;top:.4rem;right:.6rem;background:none;border:0;font-size:1.4rem;line-height:1;color:var(--grau);cursor:pointer}
/* fehlende Auswahl beim Kaufklick (statt Browser-Alert) */
/* Kein Kasten (Kevin 14.09.): kurzes Wackeln, feine rote Linie am Feld, Hinweis in kleiner Schrift darunter */
.rios-fehlt{animation:rios-wackeln .35s ease;position:relative}
.rios-fehlt::after{content:attr(data-hinweis);position:absolute;left:0;top:calc(100% + .3rem);white-space:nowrap;font-size:.75rem;letter-spacing:.02em;color:#b3261e}   /* absolut: nichts verrutscht */
.rios-farbfelder.rios-fehlt::after{position:static;align-self:center;margin-left:.4rem}   /* neben den Farbpunkten, darunter ist kein Platz */
.rios-fehlt select,select.rios-fehlt{border-color:#b3261e!important}
.rios-farbfelder.rios-fehlt .rios-farbfeld:not(.ist-nicht-verfuegbar){border-color:#b3261e}
@keyframes rios-wackeln{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.rios-fehlt{animation:none}}
@media(max-width:600px){.woocommerce div.product form.cart table.variations tr:has(.rios-fehlt){margin-bottom:1.1rem}}   /* Handy: Länge steht direkt darunter */
.rios-toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,1rem);background:var(--text);color:var(--weiss);padding:.8rem 1.25rem;font-size:.875rem;border-radius:.25rem;box-shadow:0 6px 24px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:200;max-width:min(90vw,32rem);text-align:center}
.rios-toast.ist-sichtbar{opacity:1;transform:translate(-50%,0)}
.rios-symbol img{width:4.5rem;height:4.5rem;object-fit:contain;border-radius:50%}
.rios-symbol-badge{width:4.5rem;height:4.5rem;border-radius:50%;border:1px solid var(--grau);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--text);background:var(--weiss)}
.rios-symbol-label{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text)}

/* ---------- Farbfelder statt Auswahlliste (pa_farbe) ---------- */
.rios-farbe-select-versteckt{display:none}
.rios-farbfelder{display:flex;flex-wrap:wrap;gap:.6rem;margin:.25rem 0 .5rem}
/* Ring wie bei Kreativdenker: dünner grauer Rand, weißer Zwischenraum, innen der Farbpunkt */
.rios-farbfeld{width:1.9rem;height:1.9rem;border-radius:50%;border:1px solid #cfd4da;padding:4px;cursor:pointer;background-color:var(--weiss);background-clip:content-box!important;position:relative;transition:border-color var(--t)}
.rios-farbfeld:hover{border-color:var(--grau)}
.rios-farbfeld.ist-gewaehlt{border-color:var(--brand);box-shadow:0 0 0 2px var(--weiss),0 0 0 4px var(--brand)}   /* gewählte Farbe deutlich umrandet (Kevin 14.09.) */
.rios-farbfeld--unbekannt{background:var(--hg)}
.rios-farbfeld--schwarz-orange{border:2px solid #e8630a}
.rios-farbfeld.ist-nicht-verfuegbar{opacity:.35;cursor:not-allowed}
.rios-farbfeld.ist-nicht-verfuegbar::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(to top right,transparent calc(50% - 1px),var(--grau),transparent calc(50% + 1px))}
.rios-farbhinweis{font-size:.75rem;color:var(--grau);margin:0 0 1.5rem}

/* ---------- Breite: zwei Felder Anstoß / Schließe ---------- */
.rios-breite-select-versteckt{display:none}
.rios-breite-felder{display:flex;gap:1.5rem;flex-wrap:wrap}
.rios-breite-feld{flex:0 1 12rem}
.rios-breite-feld label{font-family:var(--sans);font-size:.75rem;font-weight:400;text-transform:uppercase;letter-spacing:.04em;color:var(--grau);margin-bottom:.4rem;display:block}
.rios-breite-feld select{width:100%;padding:.7rem .9rem;border:1px solid var(--linie);font-size:.8125rem;font-weight:600;background-color:var(--weiss);color:var(--text)}
.rios-breite-feld select:disabled{opacity:.5}
.woocommerce div.product form.cart table.variations tr:has(.rios-breite-felder){flex:1 1 100%}
.woocommerce div.product form.cart table.variations tr:has(.rios-breite-felder) th{display:none}

/* ---------- Breite/Länge nebeneinander (Punkt 2 des Solls) ---------- */
.woocommerce div.product form.cart table.variations tbody{display:flex;flex-wrap:wrap;column-gap:1.5rem}
.woocommerce div.product form.cart table.variations tr{flex:1 1 100%}
.woocommerce div.product form.cart table.variations tr:has(.rios-variante-feld){flex:0 1 12rem}
.rios-variante-feld select{width:100%}

/* ---------- Schließe: wählbar (Silber/Gold) oder Hinweiszeile ---------- */
.rios-schliesse-wahl{margin-bottom:1.5rem}
.rios-schliesse-label{font-size:.75rem;font-weight:400;text-transform:uppercase;letter-spacing:.04em;color:var(--grau);display:block;margin-bottom:.5rem}
.rios-schliesse-optionen{display:flex;gap:.6rem}
.rios-schliesse-swatch{display:inline-flex;width:1.9rem;height:1.9rem;border-radius:50%;border:1px solid #cfd4da;cursor:pointer;position:relative;padding:4px;background:var(--weiss);transition:border-color var(--t)}
.rios-schliesse-swatch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.rios-schliesse-farbe{display:block;width:100%;height:100%;border-radius:50%}
.rios-schliesse-swatch--silber .rios-schliesse-farbe{background:linear-gradient(135deg,#f4f4f4 0%,#c7c7c7 45%,#9a9a9a 100%)}
.rios-schliesse-swatch--gold .rios-schliesse-farbe{background:linear-gradient(135deg,#f7e08a 0%,#d4af37 45%,#a97e1f 100%)}
.rios-schliesse-swatch:has(input:checked){border-color:var(--brand)}
.rios-schliesse-swatch input:focus-visible ~ .rios-schliesse-farbe{outline:2px solid var(--brand);outline-offset:2px}
.rios-schliesse-hinweis{font-size:.8125rem;color:var(--grau);margin-bottom:1rem}

/* ---------- Hinweisboxen (Leder, Vintage, Adapter, Schließe-ohne) ---------- */
.rios-hinweisbox{background:var(--hg);padding:.75rem 1rem;margin-bottom:.75rem;font-size:.8125rem;display:flex;gap:.6rem;align-items:flex-start}
.rios-hinweisbox::before{content:"i";flex:none;width:1.1rem;height:1.1rem;border-radius:50%;border:1px solid var(--grau);color:var(--grau);font-family:var(--serif);font-style:italic;font-size:.75rem;line-height:1rem;text-align:center;margin-top:.05rem}
.rios-hinweisbox p{margin:0}
.rios-hinweisbox a{text-decoration:underline;text-underline-offset:2px}

/* ---------- Standard-Variantenbeschreibung im Kaufkasten ausblenden (Punkt 6 des Solls) ---------- */
.woocommerce div.product .rios-produkt-kauf .woocommerce-variation-description{display:none}

/* ---------- Charakter / Details / Beschreibung: Haarlinie + kleinere Überschrift (Kevin-Korrektur) ---------- */
.rios-produkt-text h3,
.rios-produkt-beschreibung h3{
  font-family:var(--serif);font-size:1.25rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;
  margin:2.5rem 0 1rem;padding-top:1.5rem;border-top:1px solid var(--linie);
}
.rios-produkt-text h3:first-child{margin-top:0}
.rios-produkt-beschreibung{max-width:60rem}

@media(max-width:480px){
  .woocommerce div.product form.cart table.variations tr:has(.rios-variante-feld){flex:1 1 100%}
}

/* ---------- Galerie-Pfeile und Punkte (Vorlage Kreativdenker) ---------- */
.rios-produkt-galerie .woocommerce-product-gallery{position:relative}
.rios-produkt-galerie .flex-direction-nav{position:absolute;top:40%;left:.5rem;right:.5rem;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0;pointer-events:none;z-index:3}
.rios-produkt-galerie .flex-direction-nav a{pointer-events:auto;width:2rem;height:2rem;display:block;text-indent:-999em;overflow:hidden;position:relative;opacity:.6;transition:opacity var(--t)}
.rios-produkt-galerie .flex-direction-nav a:hover{opacity:1}
.rios-produkt-galerie .flex-direction-nav a::before{content:"";position:absolute;top:50%;left:50%;width:.9rem;height:.9rem;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:translate(-30%,-50%) rotate(45deg)}
.rios-produkt-galerie .flex-direction-nav .flex-next::before{transform:translate(-70%,-50%) rotate(-135deg)}
.rios-produkt-galerie .flex-control-nav.flex-control-paging{display:flex;justify-content:center;gap:.4rem;list-style:none;margin:.75rem 0 0;padding:0}
.rios-produkt-galerie .flex-control-paging a{display:block;width:.4rem;height:.4rem;border-radius:50%;background:var(--linie);text-indent:-999em;overflow:hidden}
.rios-produkt-galerie .flex-control-paging a.flex-active{background:var(--grau)}
/* Vorschaubilder unter dem großen Bild (Kevin 14.09.), aktives Bild mit Rahmen */
.rios-produkt-galerie .flex-control-thumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;list-style:none;margin:.9rem 0 0;padding:0}
.woocommerce div.product .rios-produkt-galerie div.images .flex-control-thumbs li{width:3.25rem;margin:0;float:none;position:relative}   /* schlägt WooCommerce 25 % + float */
.woocommerce div.product .rios-produkt-galerie div.images .flex-control-thumbs li.ist-versteckt{display:none}
.rios-thumb-mehr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);color:var(--weiss);font-size:.875rem;font-weight:600;cursor:pointer}
.woocommerce div.product .rios-produkt-galerie div.images .flex-control-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--linie);opacity:.6;cursor:pointer;transition:opacity var(--t),border-color var(--t)}
.woocommerce div.product .rios-produkt-galerie div.images .flex-control-thumbs img:hover,.woocommerce div.product .rios-produkt-galerie div.images .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--brand)}
.rios-hinweisbox::before{border-color:#1e73be;color:#1e73be;font-style:normal;font-weight:700}
.rios-produkt-beschreibung li strong,.rios-produkt-text li strong{font-weight:700;text-transform:uppercase;font-size:.9375rem}
@media(max-width:900px){.rios-produkt-galerie .flex-direction-nav{left:0;right:0}}

/* ---------- Spaltenbreiten: WooCommerce-Floats (div.summary 48 %, div.images 48 %) ausschalten ---------- */
.woocommerce div.product .rios-produkt-oben div.summary,.woocommerce div.product .rios-produkt-kauf{float:none;width:auto;max-width:none;margin:0}
.woocommerce div.product .rios-produkt-galerie div.images,.woocommerce div.product .rios-produkt-galerie .woocommerce-product-gallery{float:none;width:100%;margin:0}
/* Breite Anstoß / Breite Schließe / Länge in einer Reihe wie die Vorlage */
.woocommerce div.product form.cart table.variations tr:has(.rios-breite-felder){flex:0 0 auto}
.rios-breite-felder{flex-wrap:nowrap}
.woocommerce div.product form.cart table.variations tr:has(.rios-variante-feld--laenge){flex:0 1 12rem}
.rios-breite-feld{flex:0 1 11rem}
@media(max-width:600px){.woocommerce div.product form.cart table.variations tr:has(.rios-breite-felder),.woocommerce div.product form.cart table.variations tr:has(.rios-variante-feld--laenge){flex:1 1 100%}}
/* Germanized-Preishinweis („inkl. MwSt. zzgl. Versand") steht wie in der Vorlage unter den Hinweisboxen (per JS ans Ende gerückt) */
.rios-produkt-kauf > .wc-gzd-additional-info{font-size:.75rem;color:var(--grau);margin:.5rem 0 0}

/* A1: ab-Preis im Kaufkasten vor der Variantenwahl */
.woocommerce div.product form.cart .rios-vorpreis{font-size:1.5rem;color:var(--text);margin-right:auto}
.woocommerce div.product form.cart .rios-vorpreis .ab{font-size:.75em;color:#5c636a}   /* BFSG: --grau auf --hg hatte 4,3:1, #5c636a 5,6:1 */
.woocommerce div.product form.cart .rios-vorpreis[hidden]{display:none}
.woocommerce div.product form.cart .single_variation_wrap{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;background:var(--hg);padding:1rem;margin-top:1rem}
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-add-to-cart{flex:1 1 auto;background:transparent;padding:0;margin:0}
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation{flex:1 1 100%;margin:0}
/* A3: Knopf kräftiger grau solange keine Variante steht, mit Warenkorb-Symbol */
.woocommerce div.product form.cart .single_add_to_cart_button::before{content:"";display:inline-block;width:1rem;height:1rem;margin-right:.5rem;vertical-align:-2px;background:url(../bilder/icons/woo-btn-cart.svg) center/contain no-repeat}
.woocommerce div.product form.cart .button.disabled,.woocommerce div.product form.cart .button:disabled{opacity:1;background:#6c6c6c;border-color:#6c6c6c;color:#fff}   /* BFSG: #8a8a8a hatte 3,5:1 mit Weiß, jetzt 5,3:1 */
.rios-farbhinweis{display:none}

/* A1: ab-Preis verschwindet, sobald der Variantenpreis steht (kein JS-Ereignis nötig) */
.woocommerce div.product form.cart .single_variation_wrap:has(.woocommerce-variation-price .amount) .rios-vorpreis{display:none}

/* ---------- Gewählte Farbe / Schließe als Text (BFSG 1.4.1, Kevin 16.09.) ---------- */
.rios-farbname,.rios-schliesse-name{font-size:.75rem;letter-spacing:.02em;color:var(--grau);margin:0 0 .5rem;min-height:1.2em;line-height:1.2}
.rios-schliesse-name{margin:.5rem 0 0}