/* ============================================================
   URGEFAEHRTE – Shop-Overrides v1.0
   Überschreibt Myfactory's automatisch generiertes Shop-HTML
   mit der Urgefährte-Brandingoptik.

   Voraussetzung: Bootstrap 5.3 + urgefaehrte.css geladen
   SortIndex in Myfactory: NACH urgefaehrte.css (z.B. 20)

   Abgedeckte Myfactory-Ausgaben:
   A. Bootstrap-Reset (Farben, Typo)
   B. Produktliste / Produktkarten (WP-Ausgabe)
   C. Produktdetail
   D. Warenkorb
   E. Kasse / Checkout
   F. Mein Konto
   G. Breadcrumb
   H. Pagination
   I. Suchergebnisse
   J. Meldungen (Alerts)
   ============================================================ */


/* ============================================================
   A. BOOTSTRAP-RESET — Urgefährte Brandingfarben
   ============================================================ */

/* Bootstrap Primary → Amber */
:root {
  --bs-primary:          #8B4220;
  --bs-primary-rgb:      139,66,32;
  --bs-link-color:       #8B4220;
  --bs-link-hover-color: #BF7640;
  --bs-border-radius:    10px;
  --bs-border-radius-lg: 16px;
  --bs-border-radius-sm: 6px;
  --bs-font-sans-serif:  -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --bs-body-color:       #1A1A1A;
  --bs-body-bg:          #FFFFFF;
}

/* Bootstrap btn-primary → Urgefährte Gold-Verlauf */
.btn-primary {
  --bs-btn-bg:               #8B4220;
  --bs-btn-border-color:     #8B4220;
  --bs-btn-hover-bg:         #A85428;
  --bs-btn-hover-border-color: #A85428;
  --bs-btn-active-bg:        #7A3818;
  --bs-btn-focus-shadow-rgb: 139,66,32;
  background: linear-gradient(135deg, #8B4220, #BF7640);
  border: none;
  font-weight: 700;
  letter-spacing: .05em;
  border-radius: 999px;
  padding: .6rem 1.4rem;
  box-shadow: 0 4px 14px rgba(139,66,32,0.28);
}

.btn-primary:hover {
  filter: brightness(1.07);
  box-shadow: 0 7px 20px rgba(191,118,64,0.35);
  transform: translateY(-1px);
  background: linear-gradient(135deg, #8B4220, #BF7640);
  border-color: transparent;
}

.btn-outline-primary {
  --bs-btn-color:              #8B4220;
  --bs-btn-border-color:       #8B4220;
  --bs-btn-hover-bg:           #8B4220;
  --bs-btn-hover-border-color: #8B4220;
  font-weight: 700;
  border-radius: 999px;
}

.btn-secondary {
  background: #1A1A1A;
  border-color: #1A1A1A;
  font-weight: 700;
  border-radius: 999px;
}

/* Fokus-Ring */
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  border-color: #BF7640;
  box-shadow: 0 0 0 3px rgba(191,118,64,0.2);
}

/* Form-Controls */
.form-control,
.form-select {
  border-color: rgba(139,66,32,0.2);
  border-radius: 8px;
  font-size: .92rem;
  color: #1A1A1A;
}

.form-control:focus,
.form-select:focus {
  border-color: #BF7640;
  box-shadow: 0 0 0 3px rgba(191,118,64,0.15);
}

.form-label {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #3D3D3D;
  margin-bottom: .35rem;
}

/* Check & Radio */
.form-check-input:checked {
  background-color: #8B4220;
  border-color: #8B4220;
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(139,66,32,0.2);
  border-color: #BF7640;
}

/* Badge */
.badge.bg-primary { background: linear-gradient(135deg,#8B4220,#BF7640) !important; }
.badge.bg-success { background: #27ae60 !important; }

/* Alert */
.alert-primary { background: rgba(139,66,32,0.09); border-color: rgba(139,66,32,0.35); color: #6b2f10; }

/* Spinner */
.spinner-border { border-top-color: #8B4220; }


/* ============================================================
   B. PRODUKTLISTE – Myfactory generiertes HTML
      Myfactory gibt Produktlisten in Bootstrap-Grid aus.
      Typische Klassen: .product-list, .product-item, .product-card,
      .wp-product-list, .ProductListItem
   ============================================================ */

/* Wrapper */
.product-list,
.wp-product-list,
[class*="ProductList"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

/* Einzelne Karte */
.product-item,
.wp-product-item,
[class*="ProductListItem"],
.product-list .card {
  border: 1px solid rgba(139,66,32,0.1) !important;
  border-radius: 16px !important;
  overflow: hidden;
  transition: transform .22s, box-shadow .22s, border-color .22s;
  box-shadow: 0 1px 4px rgba(10,0,9,0.07) !important;
  background: #fff;
  display: flex !important;
  flex-direction: column;
}

.product-item:hover,
.wp-product-item:hover,
.product-list .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(10,0,9,0.13) !important;
  border-color: rgba(191,118,64,0.28) !important;
}

/* Produktbild */
.product-item .card-img-top,
.product-list .card-img-top,
.product-item img:first-child,
[class*="ProductListItem"] img {
  aspect-ratio: 1;
  object-fit: contain !important;
  background: #FBF8F5;
  padding: .75rem;
  width: 100%;
}

/* Produktname */
.product-item .card-title,
.product-list .card-title,
[class*="ProductListItem"] h3,
[class*="ProductListItem"] h4,
[class*="ProductListItem"] .title {
  font-size: .96rem !important;
  font-weight: 700 !important;
  color: #0A0009 !important;
  line-height: 1.3;
  margin-bottom: .35rem;
}

/* Preis */
.product-item .price,
.product-list .price,
[class*="ProductListItem"] .price,
.product-item [class*="price"],
.product-list [class*="Price"] {
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  color: #0A0009 !important;
}

/* Streichpreis */
.product-item .price-old,
.product-item del,
.product-list del,
[class*="ProductListItem"] del {
  color: #7A6B62 !important;
  font-size: .85rem !important;
}

/* In-den-Warenkorb Button */
.product-item .btn-cart,
.product-list .btn-cart,
[class*="AddToCart"],
.product-item [class*="cart"],
.product-list button[type="submit"] {
  background: linear-gradient(135deg, #8B4220, #BF7640);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .05em;
  padding: .55rem 1.1rem;
  width: 100%;
  transition: filter .22s, box-shadow .22s, transform .22s;
  box-shadow: 0 4px 12px rgba(139,66,32,0.25);
}

.product-item [class*="cart"]:hover,
.product-list button[type="submit"]:hover {
  filter: brightness(1.07);
  box-shadow: 0 6px 18px rgba(191,118,64,0.35);
  transform: translateY(-1px);
}

/* Card Body Innenabstand */
.product-item .card-body,
.product-list .card-body {
  padding: .85rem !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .3rem;
}


/* ============================================================
   C. PRODUKTDETAIL – Myfactory Ausgabe
   ============================================================ */

.product-detail,
.wp-product-detail,
[class*="ProductDetail"] {
  padding: 1.5rem 0;
}

/* Hauptbild */
.product-detail .product-image,
.product-detail .main-image,
[class*="ProductDetail"] .gallery img {
  border-radius: 16px;
  border: 1px solid rgba(139,66,32,0.1);
  background: #FBF8F5;
  padding: 1rem;
  object-fit: contain;
}

/* Produkttitel */
.product-detail h1,
.product-detail h2,
[class*="ProductDetail"] h1 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  color: #0A0009;
  line-height: 1.2;
}

/* Preis Detailseite */
.product-detail .price-wrap,
.product-detail .product-price,
[class*="ProductDetail"] [class*="price"] {
  font-size: 1.55rem;
  font-weight: 900;
  color: #0A0009;
}

/* Varianten-Selekt */
.product-detail select {
  border: 1.5px solid rgba(139,66,32,0.2);
  border-radius: 8px;
  font-weight: 700;
  color: #1A1A1A;
  background: #fff;
  padding: .55rem .9rem;
  font-size: .9rem;
}

/* Menge + In Warenkorb (Detailseite) */
.product-detail .btn-add-to-cart,
.product-detail [class*="AddToCart"],
.product-detail button[type="submit"] {
  background: linear-gradient(135deg, #8B4220, #BF7640);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: .9rem;
  padding: .8rem 2rem;
  box-shadow: 0 5px 16px rgba(139,66,32,0.28);
  transition: all .22s;
  letter-spacing: .05em;
}

.product-detail button[type="submit"]:hover {
  filter: brightness(1.07);
  box-shadow: 0 8px 24px rgba(191,118,64,0.38);
  transform: translateY(-1px);
}


/* ============================================================
   D. WARENKORB – Myfactory Ausgabe
   ============================================================ */

.cart-table,
.wp-cart-table,
table[class*="cart"],
table[class*="Cart"] {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(139,66,32,0.1);
  font-size: .9rem;
}

.cart-table thead th,
.wp-cart-table thead th,
table[class*="cart"] thead th {
  background: #0A0009;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .75rem 1rem;
  border: none;
}

.cart-table tbody tr,
table[class*="cart"] tbody tr {
  border-bottom: 1px solid rgba(139,66,32,0.08);
  transition: background .15s;
}

.cart-table tbody tr:hover,
table[class*="cart"] tbody tr:hover {
  background: rgba(191,118,64,0.04);
}

.cart-table tbody td,
table[class*="cart"] tbody td {
  padding: .85rem 1rem;
  vertical-align: middle;
  border: none;
}

/* Warenkorb Gesamtbereich */
.cart-summary,
.wp-cart-summary,
[class*="CartSummary"],
[class*="cart-total"] {
  background: #FBF8F5;
  border: 1px solid rgba(139,66,32,0.12);
  border-radius: 16px;
  padding: 1.5rem;
}

/* Gesamtpreis */
.cart-summary .total,
[class*="CartTotal"],
[class*="cart-total"] .total {
  font-size: 1.5rem;
  font-weight: 900;
  color: #0A0009;
}

/* Qty-Input im Warenkorb */
.cart-table input[type="number"],
table[class*="cart"] input[type="number"] {
  width: 60px;
  text-align: center;
  border: 1.5px solid rgba(139,66,32,0.2);
  border-radius: 8px;
  padding: .4rem .5rem;
  font-weight: 700;
  font-size: .9rem;
}

/* Entfernen-Button */
.cart-table .btn-remove,
.cart-table [class*="remove"],
.cart-table [class*="delete"] {
  color: #c0392b;
  background: rgba(192,57,43,0.08);
  border: none;
  border-radius: 6px;
  padding: .3rem .6rem;
  font-size: .8rem;
  transition: background .2s;
}

.cart-table .btn-remove:hover { background: rgba(192,57,43,0.16); }


/* ============================================================
   E. KASSE / CHECKOUT – Myfactory Ausgabe
   ============================================================ */

/* Checkout-Bereich Wrapper */
.checkout,
.wp-checkout,
[class*="Checkout"] {
  max-width: 820px;
  margin-inline: auto;
}

/* Checkout-Abschnitte */
.checkout-section,
[class*="CheckoutSection"],
.checkout fieldset {
  background: #fff;
  border: 1px solid rgba(139,66,32,0.1);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 4px rgba(10,0,9,0.06);
}

/* Checkout-Legende */
.checkout legend,
.checkout-section h3,
[class*="CheckoutSection"] h3 {
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8B4220;
  border-bottom: 2px solid rgba(139,66,32,0.15);
  padding-bottom: .6rem;
  margin-bottom: 1rem;
  display: block;
  position: relative;
}

.checkout legend::after,
.checkout-section h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 36px;
  height: 2px;
  background: #BF7640;
  border-radius: 999px;
}

/* Bestellen-Button */
.checkout [class*="submit"],
.checkout button[type="submit"],
[class*="PlaceOrder"],
[class*="place-order"] {
  background: linear-gradient(135deg, #8B4220, #BF7640) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  padding: .9rem 2.5rem !important;
  width: 100%;
  box-shadow: 0 6px 20px rgba(139,66,32,0.3) !important;
  transition: all .22s !important;
  letter-spacing: .06em;
}

.checkout button[type="submit"]:hover {
  filter: brightness(1.07) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 28px rgba(191,118,64,0.4) !important;
}

/* Checkout Zusammenfassung (rechte Spalte) */
.order-summary,
[class*="OrderSummary"],
.checkout-aside {
  background: #FBF8F5;
  border: 1px solid rgba(139,66,32,0.12);
  border-radius: 16px;
  padding: 1.25rem;
  position: sticky;
  top: 80px;
}


/* ============================================================
   F. MEIN KONTO – Myfactory Ausgabe
   ============================================================ */

.account,
.wp-account,
[class*="MyAccount"] {
  max-width: 960px;
  margin-inline: auto;
}

/* Konto-Sidebar / Menü */
.account-nav,
[class*="AccountNav"] {
  background: #fff;
  border: 1px solid rgba(139,66,32,0.1);
  border-radius: 16px;
  padding: .75rem;
  overflow: hidden;
}

.account-nav a,
[class*="AccountNav"] a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .85rem;
  border-radius: 8px;
  font-size: .86rem;
  font-weight: 600;
  color: #3D3D3D;
  transition: all .2s;
  text-decoration: none;
}

.account-nav a:hover,
[class*="AccountNav"] a:hover {
  background: rgba(139,66,32,0.07);
  color: #8B4220;
}

.account-nav a.active,
[class*="AccountNav"] a.active {
  background: rgba(139,66,32,0.1);
  color: #8B4220;
  font-weight: 800;
}

/* Konto-Panels */
.account-panel,
[class*="AccountPanel"],
.account-section {
  background: #fff;
  border: 1px solid rgba(139,66,32,0.1);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(10,0,9,0.06);
}

/* Bestelltabelle */
.order-list table,
[class*="OrderList"] table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.order-list thead th,
[class*="OrderList"] thead th {
  background: #FBF8F5;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #7A6B62;
  padding: .6rem 1rem;
  border-bottom: 2px solid rgba(139,66,32,0.12);
}

.order-list tbody td,
[class*="OrderList"] tbody td {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(139,66,32,0.08);
  color: #3D3D3D;
}

/* Bestellstatus-Badges */
.order-status-shipped,
[class*="status-shipped"]  { background: rgba(39,174,96,0.12);  color: #196534; padding: .2rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.order-status-pending,
[class*="status-pending"]  { background: rgba(243,156,18,0.12);  color: #7a5000; padding: .2rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.order-status-cancelled,
[class*="status-cancelled"]{ background: rgba(192,57,43,0.12);   color: #8b1a1a; padding: .2rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }


/* ============================================================
   G. BREADCRUMB – Myfactory Ausgabe
   ============================================================ */

.breadcrumb {
  background: transparent !important;
  padding: .75rem 0 !important;
  margin: 0 !important;
  font-size: .78rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: #ccc;
}

.breadcrumb-item a {
  color: #7A6B62;
  text-decoration: none;
  font-weight: 600;
  transition: color .2s;
}

.breadcrumb-item a:hover { color: #8B4220; }

.breadcrumb-item.active { color: #3D3D3D; font-weight: 600; }


/* ============================================================
   H. PAGINATION – Myfactory Ausgabe
   ============================================================ */

.pagination {
  gap: .35rem;
}

.page-item .page-link {
  border-radius: 8px !important;
  border: 1px solid rgba(139,66,32,0.15) !important;
  color: #3D3D3D !important;
  font-weight: 700;
  font-size: .84rem;
  min-width: 36px;
  text-align: center;
  transition: all .2s;
}

.page-item .page-link:hover {
  background: rgba(191,118,64,0.08) !important;
  border-color: #BF7640 !important;
  color: #8B4220 !important;
}

.page-item.active .page-link {
  background: linear-gradient(135deg, #8B4220, #BF7640) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(139,66,32,0.28);
}

.page-item.disabled .page-link {
  background: #f5f5f5 !important;
  color: #ccc !important;
}


/* ============================================================
   I. SUCHERGEBNISSE
   ============================================================ */

.search-results h1,
[class*="SearchResults"] h1 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
}

.search-results h1 mark,
[class*="SearchResults"] mark {
  background: rgba(191,118,64,0.2);
  color: #8B4220;
  border-radius: 4px;
  padding: 0 3px;
}

.search-no-results,
[class*="NoResults"] {
  text-align: center;
  padding: 4rem 1rem;
  color: #7A6B62;
}

.search-no-results h2 { font-size: 1.3rem; margin-bottom: .75rem; }


/* ============================================================
   J. MELDUNGEN / ALERTS – Myfactory Ausgabe
   ============================================================ */

/* Myfactory gibt Meldungen oft mit Bootstrap-Klassen aus */
.alert-success {
  background: #f2fdf5 !important;
  border-color: #27ae60 !important;
  border-left: 4px solid #27ae60;
  color: #196534 !important;
  border-radius: 10px !important;
}

.alert-danger,
.alert-error {
  background: #fdf2f2 !important;
  border-color: #e03131 !important;
  border-left: 4px solid #e03131;
  color: #8b1a1a !important;
  border-radius: 10px !important;
}

.alert-info {
  background: #f0f6ff !important;
  border-color: #339af0 !important;
  border-left: 4px solid #339af0;
  color: #1a4a7a !important;
  border-radius: 10px !important;
}

.alert-warning {
  background: #fffbf0 !important;
  border-color: #BF7640 !important;
  border-left: 4px solid #BF7640;
  color: #7a5000 !important;
  border-radius: 10px !important;
}


/* ============================================================
   K. MYFACTORY VERBINDUNG / API-AUSGABEN
      Myfactory rendert spezifische Klassen für eigene Elemente.
      Diese werden hier gematcht und überschrieben.
   ============================================================ */

/* Myfactory Standard-Seitencontainer → max-width an uf-container anpassen */
.WPPortalContent,
.wp-content,
#content,
.page-content {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  padding-bottom: 3rem;
}

/* Myfactory generiert oft eine .container ohne unsere Klasse */
body > .container,
body > .container-fluid {
  max-width: 1240px;
}

/* Myfactory Ladeindikator */
.wp-loading,
.myfactory-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #7A6B62;
  font-size: .9rem;
}

/* Myfactory Bewertungs-Sterne (falls Myfactory eigene ausgibt) */
.wp-rating .star,
.wp-stars .star,
[class*="Rating"] .star {
  color: #BF7640;
}

[class*="Rating"] .star.empty,
.wp-rating .star-empty {
  color: #ddd;
}

/* Myfactory Lagerbestand-Badge */
.stock-available,
[class*="InStock"] {
  color: #27ae60;
  font-size: .78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.stock-available::before { content: "●"; font-size: .5rem; }

.stock-out,
[class*="OutOfStock"] {
  color: #c0392b;
  font-size: .78rem;
  font-weight: 700;
}

/* ── RESPONSIVE OVERRIDES ──────────────────────────────────── */
@media (max-width: 767px) {
  .product-list,
  .wp-product-list { grid-template-columns: repeat(2, 1fr); }

  .cart-table thead { display: none; }
  .cart-table tbody td { display: block; padding: .5rem 1rem; }
  .cart-table tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    color: #7A6B62;
    display: block;
    margin-bottom: .2rem;
  }
}

@media (max-width: 479px) {
  .product-list,
  .wp-product-list { grid-template-columns: 1fr; }
}