/* shop.css – Produktkarten, Detailseite, Warenkorb, Kasse und Warenkorb-Symbol (includes/shop-ansicht.php, shop-checkout.php).
   Farben aus den Variablen der jeweiligen Website (Dorfbäckerei --kb-*, MEDVS --accent, Royal-Yoga --ry-*, neutrales CMS/Schönmetz --blue);
   eine Website kann --shop-accent usw. selbst setzen. Schaltflächen nutzen die Klassen der Website (ry_shop_klassen()). */
:root {
  --shop-a: var(--shop-accent, var(--kb-red, var(--accent, var(--ry-forest, var(--blue, #24527a)))));
  --shop-text: var(--shop-ink, var(--kb-ink, var(--text, var(--ry-ink, var(--ink, #24313d)))));
  --shop-muted: var(--shop-gedaempft, var(--kb-muted, var(--mid, var(--muted, #5d6873))));
  --shop-line: var(--shop-linie, var(--kb-line, var(--border, var(--line, #dce3e9))));
  --shop-soft: var(--shop-flaeche, var(--kb-cream, var(--warm-white, var(--ry-cream, var(--soft, #f3f7fa)))));
  --shop-radius: var(--shop-rundung, 14px);
}

/* ---- Produktkarten ------------------------------------------------------ */
.ry-shop-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.ry-shop-karte { display: flex; flex-direction: column; overflow: hidden; height: 100%; max-width: 420px; margin: 1.5rem 0;
  background: #fff; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); box-shadow: 0 10px 30px rgba(20, 30, 50, .07);
  color: var(--shop-text); transition: box-shadow .2s ease, transform .2s ease; }
.ry-shop-raster .ry-shop-karte { max-width: none; margin: 0; }
.ry-shop-karte { scroll-margin-top: 140px; }
.ry-shop-karte:hover { box-shadow: 0 16px 40px rgba(20, 30, 50, .12); transform: translateY(-2px); }
.ry-shop-karte__bild { display: block; aspect-ratio: 4 / 3; background: var(--shop-soft); overflow: hidden; }
.ry-shop-karte__bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ry-shop-karte:hover .ry-shop-karte__bild img { transform: scale(1.03); }
.ry-shop-karte__ohnebild { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--shop-soft), #fff); }
.ry-shop-karte__inhalt { display: flex; flex-direction: column; flex: 1; gap: .55rem; padding: 1.15rem 1.25rem 1.3rem; }
.ry-shop-karte__titel { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.ry-shop-karte__titel a { color: inherit; text-decoration: none; }
.ry-shop-karte__titel a:hover, .ry-shop-karte__titel a:focus-visible { color: var(--shop-a); text-decoration: underline; }
.ry-shop-karte__text { margin: 0; color: var(--shop-muted); font-size: .95rem; line-height: 1.55; }
.ry-shop-karte__aktionen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: .5rem; }
.ry-shop-karte__aktionen .ry-shop-kaufen { flex: 1 1 auto; margin: 0; }
.ry-shop-karte__aktionen .ry-shop-kaufen button { width: 100%; }
.ry-shop-karte__aktionen > a { flex: 0 1 auto; }

.ry-shop-preis { margin: 0; color: var(--shop-text); }
.ry-shop-preis strong { font-size: 1.35rem; color: var(--shop-a); white-space: nowrap; }
.ry-shop-preis__hinweis { color: var(--shop-muted); font-size: .82rem; }
.ry-shop-preis__hinweis a { color: inherit; text-decoration: underline; }

/* Zweitknopf mit Rahmen für Websites ohne passenden eigenen (z. B. Royal-Yoga) */
.ry-shop-knopf-rand { display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1.4rem; border: 1.5px solid var(--shop-a);
  border-radius: 999px; background: transparent; color: var(--shop-a); font-weight: 600; text-decoration: none; }
.ry-shop-knopf-rand:hover, .ry-shop-knopf-rand:focus-visible { background: var(--shop-a); color: #fff; }

/* ---- Detailseite -------------------------------------------------------- */
.ry-shop-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.ry-shop-detail--ohnebild { grid-template-columns: minmax(0, 34rem); }
.ry-shop-detail--ohnebild .ry-shop-detail__medien { display: none; }
.ry-shop-detail__bild { display: block; width: 100%; border-radius: var(--shop-radius); background: var(--shop-soft); }
.ry-shop-detail__galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .6rem; margin-top: .8rem; }
.ry-shop-detail__galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--shop-line); }
.ry-shop-detail__kauf { position: sticky; top: 7rem; padding: 1.6rem; background: var(--shop-soft); border: 1px solid var(--shop-line); border-radius: var(--shop-radius); }
.ry-shop-detail__titel { margin: 0 0 .6rem; }
.ry-shop-detail__kauf .ry-shop-preis strong { font-size: 1.8rem; }
.ry-shop-detail__text { margin: .9rem 0 0; color: var(--shop-text); }
.ry-shop-lieferzeit { margin: .8rem 0 0; color: var(--shop-muted); font-size: .9rem; }
.ry-shop-rabatte { margin: .8rem 0 0; padding-left: 1.1rem; color: var(--shop-muted); font-size: .9rem; }
.ry-shop-kaufen--detail { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; margin-top: 1.2rem; }
.ry-shop-kaufen--detail button { flex: 1 1 12rem; }
.ry-shop-menge { display: flex; flex-direction: column; gap: .25rem; margin: 0; font-size: .85rem; color: var(--shop-muted); }
.ry-shop-menge input { width: 5.5rem; }
.ry-shop-beschreibung { margin-top: 2.5rem; max-width: 72ch; }

/* ---- Formularfelder, Tabellen, Meldungen (einheitlich, unabhängig vom Website-Formular) ---- */
.ry-shop input[type="text"], .ry-shop input[type="email"], .ry-shop input[type="number"], .ry-shop select,
.ry-shop-kaufen input[type="number"], .ry-shop-land select {
  box-sizing: border-box; min-height: 2.75rem; padding: .55rem .75rem; font: inherit; color: var(--shop-text); background: #fff;
  border: 1px solid var(--shop-line); border-radius: 8px; }
.ry-shop input:focus-visible, .ry-shop select:focus-visible, .ry-shop-kaufen input:focus-visible, .ry-shop-land select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--shop-a) 35%, transparent); outline-offset: 1px; border-color: var(--shop-a); }
.ry-shop-tabelle { overflow-x: auto; }
.ry-shop-tabelle table, .ry-shop-mailtabelle table { width: 100%; border-collapse: collapse; }
.ry-shop-tabelle th, .ry-shop-tabelle td { padding: .75rem .6rem; border-bottom: 1px solid var(--shop-line); text-align: left; vertical-align: middle; }
.ry-shop-tabelle th { font-size: .85rem; color: var(--shop-muted); font-weight: 600; }
.ry-shop-tabelle .ry-r { text-align: right; white-space: nowrap; }
.ry-shop-tabelle .ry-c { text-align: center; }
.ry-shop-tabelle td input[type="number"] { width: 5rem; text-align: center; }
.ry-shop-artikel { display: flex; align-items: center; gap: .8rem; }
.ry-shop-artikel img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; }
.ry-shop-artikel a { color: inherit; font-weight: 600; }
.ry-shop-entfernen { width: 2.2rem; height: 2.2rem; border: 1px solid var(--shop-line); border-radius: 50%; background: #fff; color: var(--shop-muted);
  font-size: 1.2rem; line-height: 1; cursor: pointer; }
.ry-shop-entfernen:hover, .ry-shop-entfernen:focus-visible { color: #b3261e; border-color: #b3261e; }
.ry-shop-meldung { padding: .9rem 1.1rem; border-radius: 10px; border-left: 4px solid var(--shop-a); background: var(--shop-soft); }
.ry-shop-meldung--fehler { border-left-color: #b3261e; background: #fdf1f0; }
.ry-shop-meldung--ok { border-left-color: #2c7a3e; background: #eef7f0; }
.ry-shop-meldung ul { margin: 0; padding-left: 1.1rem; }
.ry-shop-hinweis { color: var(--shop-muted); font-size: .9rem; }

/* ---- Warenkorb ---------------------------------------------------------- */
.ry-shop-warenkorb__aktualisieren { margin: 1rem 0 0; text-align: right; }
.ry-shop-abschluss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 2rem; margin-top: 2rem; align-items: start; }
.ry-shop-abschluss__summen { padding: 1.4rem; background: var(--shop-soft); border: 1px solid var(--shop-line); border-radius: var(--shop-radius); }
.ry-shop-zurkasse { display: block; width: 100%; margin-top: 1rem; text-align: center; }
.ry-shop-land { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.ry-shop-land label { font-weight: 600; }
.ry-shop-summen { margin: 0; }
.ry-shop-summen__zeile { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.ry-shop-summen__zeile dt { font-weight: 400; color: var(--shop-muted); }
.ry-shop-summen__zeile dd { margin: 0; white-space: nowrap; }
.ry-shop-summen__gesamt { margin-top: .4rem; padding-top: .7rem; border-top: 2px solid var(--shop-line); font-size: 1.15rem; }
.ry-shop-summen__gesamt dt, .ry-shop-summen__gesamt dd { color: var(--shop-text); font-weight: 700; }

/* ---- Kasse -------------------------------------------------------------- */
.ry-shop-kasse { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.ry-shop-kasse > .ry-shop-block { grid-column: 1; }
.ry-shop-kasse > .ry-shop-block--pruefen { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 7rem; background: var(--shop-soft); }
.ry-shop-block { margin: 0; padding: 1.5rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: #fff; }
.ry-shop-block legend { float: left; width: 100%; margin: 0 0 1rem; padding: 0; font-size: 1.2rem; font-weight: 700; }
.ry-shop-block legend + * { clear: both; }
.ry-shop-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ry-shop-felder__voll { grid-column: 1 / -1; }
.ry-shop-feld { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.ry-shop-feld > span { font-size: .9rem; font-weight: 600; }
.ry-shop-feld abbr { color: #b3261e; text-decoration: none; }
.ry-shop-feld input { width: 100%; }
.ry-shop-check { display: flex; align-items: flex-start; gap: .6rem; margin: 1rem 0 0; cursor: pointer; }
.ry-shop-check input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; flex: none; accent-color: var(--shop-a); }
.ry-shop-zahlart { padding: .9rem 1rem; border: 1px solid var(--shop-line); border-radius: 10px; }
.ry-shop-zahlart:has(input:checked) { border-color: var(--shop-a); background: var(--shop-soft); }
.ry-shop-zahlart small { color: var(--shop-muted); }
.ry-shop-liefer { margin-top: 1rem; }
.ry-shop-check:has(input[data-ry-shop-liefer]:not(:checked)) + .ry-shop-liefer { display: none; }
.ry-shop-recht { margin: 1rem 0; color: var(--shop-muted); font-size: .9rem; }
.ry-shop-recht a { color: inherit; text-decoration: underline; }
.ry-shop-bestellen { width: 100%; margin-top: .5rem; }
.ry-shop-bestellen[disabled] { opacity: .55; cursor: not-allowed; }
.ry-shop-bank table td { padding: .25rem 1rem .25rem 0; }
.ry-shop-adressen { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.ry-shop-recht-text { max-width: 75ch; }

/* ---- Warenkorb-Symbol rechts mittig (Optik der Schnellkontakt-Knöpfe der Website) ---- */
.ry-cart-float { position: fixed; right: 18px; top: 50%; z-index: 998; transform: translateY(-50%); display: flex; flex-direction: row-reverse; align-items: center; gap: .6rem; }
.ry-cart-float a.ry-cart-float__link { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--shop-a); border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 8px 25px rgba(15, 21, 48, .25); text-decoration: none; }
.ry-cart-float__knopf { flex: none; }
.ry-cart-float a.ry-cart-float__link:hover { transform: translateY(-2px); }
.ry-cart-float a.ry-cart-float__link:focus-visible { outline: 3px solid var(--shop-a); outline-offset: 3px; }
.ry-cart-float__anzahl { position: absolute; top: -4px; right: -4px; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border-radius: 999px;
  background: #fff; color: var(--shop-a); border: 2px solid var(--shop-a); font-size: .75rem; font-weight: 700; line-height: 1.05rem; text-align: center; }
.ry-cart-float__hinweis { max-width: 15rem; margin: 0; padding: .7rem .9rem; background: #fff; color: var(--shop-text); border: 1px solid var(--shop-line);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 21, 48, .18); font-size: .88rem; animation: ry-cart-hinweis 6s ease forwards; }
.ry-cart-float__hinweis a { color: var(--shop-a); font-weight: 600; }
.ry-cart-float--neu a.ry-cart-float__link { animation: ry-cart-puls 1s ease 2; }
@keyframes ry-cart-puls { 50% { transform: scale(1.12); } }
@keyframes ry-cart-hinweis { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .ry-cart-float--neu a.ry-cart-float__link, .ry-cart-float__hinweis { animation: none; }
  .ry-shop-karte, .ry-shop-karte__bild img { transition: none; }
}

/* ---- Schmale Bildschirme ------------------------------------------------ */
@media (max-width: 860px) {
  .ry-shop-detail, .ry-shop-abschluss, .ry-shop-kasse { grid-template-columns: 1fr; }
  .ry-shop-kasse > .ry-shop-block--pruefen { grid-column: 1; grid-row: auto; position: static; }
  .ry-shop-detail__kauf { position: static; }
}
@media (max-width: 640px) {
  .ry-shop-felder { grid-template-columns: 1fr; }
  .ry-shop-block { padding: 1.1rem; }
  .ry-shop-warenkorb thead { display: none; }
  .ry-shop-warenkorb tr { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; padding: .8rem 0; border-bottom: 1px solid var(--shop-line); }
  .ry-shop-warenkorb td { padding: 0; border: 0; }
  .ry-shop-warenkorb td[data-label="Artikel"] { grid-column: 1 / -1; }
  .ry-shop-warenkorb td[data-label]:not([data-label="Artikel"])::before { content: attr(data-label) ": "; color: var(--shop-muted); font-size: .85rem; }
  .ry-cart-float { right: 12px; }
  .ry-cart-float a.ry-cart-float__link { width: 48px; height: 48px; }
  .ry-cart-float__hinweis { max-width: 11rem; }
}