/* ============================================================
   rentica-theme.css – reskinnt den bestehenden Rentica-Warenkorb
   (Cart/Wishlist/PayPal) im neuen heilcode.at-Design.

   WICHTIG: Diese Datei wird IMMER NACH rentica/assets/css/style.css
   geladen. Sie überschreibt nur Farben/Formen/Abstände – niemals
   display/position-Regeln, die für die Cart-/Wishlist-/Modal-Logik
   von scripts/shop.js gebraucht werden. Die Selektoren-Struktur
   entspricht bewusst 1:1 der Original-Datei, damit die Kaskade
   sauber greift.
   ============================================================ */

/* Grundgerüst */
body{
  background: radial-gradient(1200px 700px at 20% 0%, rgba(73,214,199,.14), transparent 60%),
              radial-gradient(900px 600px at 80% 20%, rgba(212,176,106,.12), transparent 55%),
              linear-gradient(180deg, var(--bg), #060913 70%);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
h1, h2, h3, h4, h5, h6{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}
main{
  padding: 0 0 60px;
}

/* Eigener Header/Hero/Footer (siehe rc- Klassen in index.php) */
.rc-header{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.rc-brand{ display:flex; align-items:center; gap:10px; }
.rc-brand strong{ font-size:15px; }
.rc-brand span{ display:block; color: var(--muted); font-size:12px; }
.rc-logo{
  width: 34px; height: 34px; border-radius: 10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(73,214,199,.9), rgba(73,214,199,.0) 60%),
    radial-gradient(circle at 70% 70%, rgba(212,176,106,.95), rgba(212,176,106,.0) 65%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,.18);
}
.rc-nav-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.rc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 9px 13px; border-radius: 12px; font-weight:600; font-size:13px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-decoration:none;
}
.rc-btn:hover{ background: rgba(255,255,255,.1); }
.rc-btn-primary{
  border-color: rgba(212,176,106,.55);
  background: linear-gradient(135deg, rgba(212,176,106,.24), rgba(73,214,199,.16));
}

.rc-hero{
  display:flex; align-items:center; gap:22px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(73,214,199,.10), rgba(212,176,106,.10));
  box-shadow: var(--shadow2);
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.rc-hero-img{
  width: 110px; height: 110px; border-radius: 18px;
  overflow: hidden; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow2);
}
.rc-hero-img img{ width:100%; height:100%; object-fit: cover; display:block; }
.rc-hero h1{ margin: 0 0 6px; font-size: 26px; }
.rc-hero p{ margin:0; color: var(--muted); font-size: 14px; max-width: 60ch; }

.rc-search{
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 14px;
  width: 100%;
}
.rc-search::placeholder{ color: var(--muted); }

.rc-footer{
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between;
  color: var(--muted); font-size: 13px;
}
.rc-footer a{ color: var(--muted); padding: 6px 8px; border-radius: 10px; text-decoration:none; }
.rc-footer a:hover{ color: var(--text); background: rgba(255,255,255,.06); }

/* Warenkorb / Merkliste Widgets */
main .widget{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(16,26,51,.45);
  box-shadow: var(--shadow2);
}
main .widget-header{
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  padding: 14px 16px;
}
main .ct-cart,
main .ct-wishlist{
  background: transparent;
  padding: 10px 16px 16px;
}
main .ct-cart li,
main .ct-wishlist li{
  color: var(--text);
  border-radius: 12px;
  margin-bottom: 6px;
}
main .ct-cart li:nth-child(odd),
main .ct-wishlist li:nth-child(odd){
  background: rgba(255,255,255,.05);
}
main .ct-cart li:nth-child(even),
main .ct-wishlist li:nth-child(even){
  background: rgba(255,255,255,.03);
}
main .ct-cart-name,
main .ct-wishlist-name{ color: var(--text); }
main .ct-cart-price,
main .ct-wishlist-price{ color: var(--muted); }
main .ct-cart-total,
main .ct-wishlist-total{ color: var(--text); }
main .ct-cart-remove,
main .ct-wishlist-remove{
  background: rgba(212,176,106,.28);
  color: var(--text);
}
main .ct-cart-remove:hover,
main .ct-wishlist-remove:hover{
  background: rgba(212,176,106,.5);
}
main .ct-cart input,
main .ct-wishlist input,
main .ct-cart select,
main .ct-wishlist select{
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-radius: 6px;
}

/* Buttons (Warenkorb / Merkliste / Checkout) */
.btn-motive,
main .ct-cart-checkout,
main .ct-wishlist-checkout,
main .ct-cart-clear,
main .ct-wishlist-clear,
main .ct-cart-add-to-cart,
main .ct-wishlist-add-to-cart{
  background: linear-gradient(135deg, rgba(212,176,106,.85), rgba(73,214,199,.65));
  color: #111;
  border-radius: 12px;
  font-weight: 700;
}
.btn-motive:hover,
main .ct-cart-checkout:hover,
main .ct-wishlist-checkout:hover,
main .ct-cart-clear:hover,
main .ct-wishlist-clear:hover,
main .ct-cart-add-to-cart:hover,
main .ct-wishlist-add-to-cart:hover,
.btn-motive:active,
main .ct-cart-checkout:active,
main .ct-wishlist-checkout:active,
.btn-motive:focus,
main .ct-cart-checkout:focus,
main .ct-wishlist-checkout:focus{
  background-color: rgba(73,214,199,.85);
  border-color: transparent;
  color: #111;
}

/* Produktkarten */
main .ct-product{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16,26,51,.45);
  box-shadow: var(--shadow2);
  overflow: hidden;
  transition: .2s ease;
}
main .ct-product:hover{
  transform: translateY(-2px);
  border-color: rgba(212,176,106,.4);
}
main .ct-product .inner{
  background: transparent;
  border: none;
  padding: 20px;
}
main .ct-product-title{
  color: var(--text);
  font-size: 18px;
  padding-bottom: 12px;
  margin-bottom: 12px;
}
main .ct-product-title:after{
  background: var(--gold);
}
main .ct-product .description{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
main .ct-product .price{
  color: var(--mint);
  font-size: 28px;
}
main .ct-product .price:before,
main .ct-product .price:after{
  color: var(--muted);
}

/* ============================================================
   Seiten-Layout – bringt den Shop optisch auf die gleiche
   Grid-/Card-Sprache wie heilcodes.html.
   Überschreibt NUR Bootstrap-Abstände/Floats (die 1:1 im
   Original-Markup vorhanden sind), rührt aber keine der
   ct-*/#myTable/#myInput-Selektoren an, an denen shop.js hängt.
   ============================================================ */
main .container{
  max-width: var(--max);
  padding: 0 20px;
}
@media (min-width: 992px){
  /* Bootstrap-.row wird zum 2-Spalten-Grid:
     links = Warenkorb/Merkliste (col-lg-4, direktes Kind von .row),
     rechts oben = Toolbar (Home-Link + Suche, direktes .widget-Kind von .row),
     rechts unten = Produktraster (#myTable, direktes Kind von .row). */
  main .row{
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: auto 1fr;
    gap: 20px;
    margin: 0;
  }
  main .row > .col-lg-4{
    grid-column: 1;
    grid-row: 1 / span 2;
    width: auto;
    float: none;
    padding: 0;
  }
  main .row > .widget{
    grid-column: 2;
    grid-row: 1;
  }
  main .row > #myTable{
    grid-column: 2;
    grid-row: 2;
    width: auto;
    float: none;
    padding: 0;
  }
}
@media (max-width: 991px){
  main .row > .col-lg-4,
  main .row > #myTable{
    width: 100%;
    float: none;
    padding: 0;
  }
  main .row > .widget + #myTable,
  main .row > #myTable{
    margin-top: 20px;
  }
}

/* Toolbar (Home-Link + Suche) als kompakte Leiste statt großem "Widget" */
main .row > .widget{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: rgba(16,26,51,.35);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: none;
}
main .row > .widget > a{
  flex: 0 0 auto;
}
main .row > .widget .widget-header{
  background: transparent;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
}
main .row > .widget .widget-header:hover{
  background: rgba(255,255,255,.06);
}
main .row > .widget #myInput{
  flex: 1 1 220px;
  margin-top: 0;
}

/* Produktraster: Karten wie auf heilcodes.html (Bild oben, Inhalt unten) */
#myTable{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  align-items: start;
}
main .ct-product{
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
main .ct-product .image,
main .ct-product .inner{
  display: block;
  width: 100%;
}
main .ct-product .image{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}
main .ct-product .image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-width: 0;
}
main .ct-product .inner{
  border-left: none;
  display: flex;
  flex-direction: column;
  flex: 1;
}
main .ct-product .btn{
  margin: 4px 6px 0 0;
}

#myInput{
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 14px;
  width: 100%;
  margin-top: 10px;
}
#myInput::placeholder{ color: var(--muted); }

/* PayPal-Erfolgsmeldung */
.ct-paypal-modal{
  background: #101a33;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  max-width: 90vw;
}
.ct-paypal-modal-body{
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}
.ct-paypal-modal-header-close span{
  background: rgba(255,255,255,.08);
}
.ct-paypal-modal-header-close span:hover{
  background: rgba(212,176,106,.35);
}

/* Zurück-nach-oben Button */
#myBtn{
  background: linear-gradient(135deg, rgba(212,176,106,.9), rgba(73,214,199,.7));
  color: #111;
  border-radius: 12px;
  box-shadow: var(--shadow2);
}
#myBtn:hover{ background: var(--mint); }

/* Cart-Hinweis "Added to Cart" */
.cart-message-container .cart-message{
  background: rgba(16,26,51,.92);
  border: 1px solid rgba(73,214,199,.4);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 8px;
  box-shadow: var(--shadow2);
}