/* ============================================================================
   SP Cart Optimizer v1.0.2 - Warenkorb (Flyout + Cart-Seite)
   templates/pureistic_4000/css/sp_cart.css

   Wird in general_bottom.css.php geladen, VOR custom.css (also NACH stylesheet.css
   -> Overrides greifen). Rein additiv/feinschliff. Scope auf .toggle_cart bzw.
   .orderflex_row, damit nichts anderes beeinflusst wird.

   Design: weniger ist mehr. Haarlinien (#ececec), gedaempfte Grautoene,
   ruhige Typo, luftige CTA-Spacing, zurueckhaltende Icons.

   (c) stylepot.de
   ============================================================================ */

/* =================== FLYOUT =================== */

/* Artikelzeile: mehr Luft, Haarlinie statt kraeftigem Trenner */
.toggle_cart .toggle_products{ border-top:1px solid #ececec; margin:10px 0 0; }
.toggle_cart .toggle_products_item{ padding:18px 0; border-bottom:1px solid #ececec; }
.toggle_cart .toggle_products_content{ padding-left:16px; }

/* Titel ruhig, Sekundaerinfos gedaempft */
.toggle_cart .tpc_title{ font-size:1.25rem; line-height:1.7rem; font-weight:500; letter-spacing:.005em; color:#111; }
.toggle_cart .tpc_atttributes,
.toggle_cart .tpc_quantity{ margin-top:4px; font-size:1.0rem; line-height:1.5rem; color:#9a9a9a; letter-spacing:.02em; }

/* Loeschen dezent (Akzent erst beim Hover) */
.toggle_cart .toggle_products_action{ margin-top:8px; }
.toggle_cart .toggle_products_icon .cssButton{ color:#bcbcbc; transition:color .15s ease; }
.toggle_cart .toggle_products_icon .cssButton:hover{ color:#E2001A; }

/* Preis: Zeilensumme ruhig betont, Einzelpreis fein */
.toggle_cart .toggle_products_price{ font-size:1.2rem; line-height:1.5rem; }
.toggle_cart .tpc_lineprice{ display:block; font-weight:600; color:#111; }
.toggle_cart .tpc_unit{ display:block; margin-top:3px; font-size:.95rem; color:#aeaeae; font-weight:400; letter-spacing:.02em; }

/* --- Klebriger Footer --- */
.toggle_cart .sp-cart-foot{
  position:sticky;
  bottom:-70px;
  margin:20px -20px -70px -20px;
  padding:18px 20px 22px 20px;
  background:#fff;
  border-top:1px solid #ececec;
  box-shadow:0 -8px 22px rgba(0,0,0,.05);
}
@media (min-width:440px){
  .toggle_cart .sp-cart-foot{ margin:20px -40px -70px -40px; padding:20px 40px 26px 40px; }
}

.sp-cart-foot .sp-sum-row{ display:flex; justify-content:space-between; align-items:baseline; }
.sp-cart-foot .sp-sum-total{ font-size:1.35rem; line-height:1.8rem; font-weight:600; letter-spacing:.005em; color:#111; }
.sp-cart-foot .sp-sum-note{ margin:4px 0 16px 0; font-size:.95rem; color:#aeaeae; letter-spacing:.02em; }

/* Primaer-CTA: ruhig, luftiges Tracking */
.sp-cart-foot .sp-btn-checkout{
  display:block; width:100%; box-sizing:border-box; text-align:center;
  background:#111; color:#fff !important; text-decoration:none !important;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  font-size:1.1rem; line-height:1.4rem; padding:16px;
  border:1px solid #111; transition:background .18s ease, border-color .18s ease;
}
.sp-cart-foot .sp-btn-checkout:hover{ background:#000; border-color:#000; }

/* Sekundaer: feine Linie, gedaempft */
.sp-cart-foot .sp-btn-cart{
  display:block; width:100%; box-sizing:border-box; text-align:center; margin-top:10px;
  background:transparent; color:#666 !important; border:1px solid #dcdcdc;
  text-decoration:none !important; font-weight:500; letter-spacing:.02em;
  font-size:1.0rem; line-height:1.4rem; padding:13px;
  transition:border-color .15s ease, color .15s ease;
}
.sp-cart-foot .sp-btn-cart:hover{ border-color:#111; color:#111 !important; }

/* Trust: sehr zurueckhaltend, helle Icons */
.sp-cart-foot .sp-cart-trust{ display:flex; justify-content:space-between; gap:6px; margin-top:18px; }
.sp-cart-foot .sp-cart-trust span{ flex:1; text-align:center; font-size:.82rem; line-height:1.3; color:#b0b0b0; letter-spacing:.03em; }
.sp-cart-foot .sp-cart-trust i{ display:block; margin-bottom:5px; font-size:1.3rem; color:#cfcfcf; }

/* =================== WARENKORB-SEITE =================== */

/* Zeilen: Haarlinie, ruhige Trennung */
.orderflex_row{ border-bottom:1px solid #ececec; }

/* Produktname & Attribute */
.orderflex_row .of_productname{ font-size:1.3rem; line-height:1.7rem; font-weight:500; letter-spacing:.005em; }
.orderflex_row .of_productname a{ color:#111; }
.orderflex_row .of_attributes{ list-style:none; margin:7px 0 0; padding:0; }
.orderflex_row .of_attributes li{ font-size:1.0rem; line-height:1.5rem; color:#9a9a9a; letter-spacing:.02em; }

/* "Entfernen" dezent */
.orderflex_row .of_action span,
.orderflex_row .of_action a{ color:#aeaeae; transition:color .15s ease; }
.orderflex_row .of_action a:hover{ color:#E2001A; }

/* Mengen-Update-Button zurueckhaltend (Modified-Default entkraeften) */
.orderflex_row .of_quantity_update .cssButton{ color:#9a9a9a; box-shadow:none; }
.orderflex_row .of_quantity_update .cssButton:hover{ color:#111; }

/* Preis-Spalte: Zeilensumme gross/ruhig, Einzelpreis fein darunter */
.of_col_total .sp_price{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; line-height:1.4; width:100%; }
.of_col_total .sp_price_total{ font-size:1.25rem; font-weight:600; color:#111; white-space:nowrap; }
.of_col_total .sp_price_unit{ margin-top:3px; font-size:.95rem; color:#aeaeae; letter-spacing:.02em; white-space:nowrap; }
@media (min-width:700px){
  .of_col_total{ width:120px; }
}