/* =========================================================
   FOG SHOP – Product List + Sticky Cart + Header Cart
   ========================================================= */

/* ---------- 0) Design Tokens ---------- */
.ec-plist{
  --border:#e5e7eb;
  --muted:#6b7280;
  --bg:#fff;
  --bg-soft:#f9fafb;
  --ink:#111827;
}

/* ---------- 1) Accordion / Panel ---------- */
.ec-plist__panel{border:1px solid var(--border);border-radius:12px;margin:16px 0 20px;background:var(--bg);overflow:hidden}
.ec-plist__toggle{width:100%;padding:14px 16px;background:var(--bg-soft);border:0;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center;justify-content:space-between;font-weight:700;cursor:pointer}
.ec-plist__toggle:focus{outline:2px solid #6366f1;outline-offset:-2px}
.ec-plist__toggle-title{color:var(--ink);font-size:16px;line-height:1.25}
.ec-plist__toggle-icon{transition:transform .18s ease}
.ec-plist__toggle[aria-expanded="true"] .ec-plist__toggle-icon{transform:rotate(180deg)}
.ec-plist__content{padding:10px}
.ec-plist__content.is-collapsed{display:none!important}

/* ---------- 2) Tabelle (Desktop) ---------- */
.ec-plist__table{width:100%;border-collapse:collapse;table-layout:fixed}
.ec-plist__table th,
.ec-plist__table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.ec-plist__table th{font-weight:600;color:#374151;text-align:left}
.ec-plist__row:hover{background:#fbfbfd}

.ec-plist__cell--title a{color:#111827;text-decoration:none}
.ec-plist__cell--title a:hover{text-decoration:underline}
.ec-plist__cell--act{text-align:right;white-space:nowrap}

/* Preis & Bestand als graue Kacheln (Desktop) */
.ec-plist__cell--price,
.ec-plist__cell--stock{background:#f3f4f6;border-radius:10px}
.ec-plist__cell--stock::before{content:"Bestand:";opacity:.75;margin-right:6px;font-weight:500}

/* Menge + Button (Basis) */
.ec-plist__qtywrap{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.ec-plist__qty{width:80px;padding:6px 8px;border:1px solid var(--border);border-radius:8px}
.ec-plist__qty:focus{outline:2px solid #6366f1;outline-offset:1px}
.ec-plist__cell--act .button{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px!important;border-radius:999px!important}

/* ---------- 3) Buttons global (FOG) ---------- */
.ec-plist .button,
.woocommerce .button,
.widget_shopping_cart .buttons .button,
.woocommerce input.button,
.woocommerce .checkout-button,
.woocommerce #payment #place_order{
  background:#1f2937!important;color:#fff!important;border:1px solid #1f2937!important;border-radius:999px!important;
  padding:10px 16px!important;text-transform:none;box-shadow:none!important
}
.ec-plist .button:hover,.woocommerce .button:hover{filter:brightness(.92);transform:translateY(-1px)}
.woocommerce .button:disabled{background:#9ca3af!important;border-color:#9ca3af!important;color:#fff!important}

/* ---------- 4) Shop-Layout (Grid + Sticky) ---------- */
:root{ --ec-sticky-top: 120px; --ec-cart-width: 380px; }
.ec-shopwrap > .elementor-container{display:grid!important;grid-template-columns:minmax(0,1fr) var(--ec-cart-width);gap:24px;align-items:start;overflow:visible!important;padding-top:var(--ec-sticky-top)}
.ec-left,.ec-left .elementor-widget-wrap{min-width:0;overflow:visible!important}
.ec-right{position:sticky;top:var(--ec-sticky-top);align-self:start;max-height:calc(100vh - var(--ec-sticky-top));overflow:auto;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px;z-index:5;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.elementor-location-header,.site-header,header[role="banner"]{z-index:1000}
@media(max-width:1024px){
  .ec-shopwrap > .elementor-container{display:block!important;padding-top:0}
  .ec-right{position:static;top:auto;max-height:none;overflow:visible;margin-top:16px}
}

/* ---------- 5) Mobile Karten-Layout (≤1024px) ---------- */
@media(max-width:1024px){
  .ec-plist__table thead{display:none}
  .ec-plist__table tr{display:flex;flex-wrap:wrap;gap:10px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg);margin-bottom:12px}
  .ec-plist__table td{border:0!important;padding:6px 8px!important;box-sizing:border-box}

  /* Zeile 1: Titel */
  .ec-plist__cell--title{flex:0 0 100%;order:1;font-weight:700;font-size:clamp(16px,3.6vw,20px)}
  .ec-plist__cell--title a{color:var(--ink)}

  /* Zeile 2: Preis | Mindestmenge | Bestand */
  .ec-plist__cell--price,
  .ec-plist__cell--min,
  .ec-plist__cell--stock{
    flex:0 0 calc(33.333% - 4px);order:2;display:flex;align-items:center;gap:6px;
    background:#f3f4f6;border-radius:12px;padding:10px 12px
  }
  .ec-plist__cell--stock{justify-content:flex-end;text-align:right}
  .ec-plist__cell--min::before{content:"min.";opacity:.7;margin-right:4px}
  .ec-plist__cell--stock::before{content:"Bestand:";opacity:.75;margin-right:6px;font-weight:500}

  /* Zeile 3: Menge 50% | Button 50% */
  .ec-plist__cell--qty{flex:1 1 50%;order:3;min-width:0;display:flex;align-items:center}
  .ec-plist__cell--qty .qty{width:100%;height:44px}
  .ec-plist__cell--act{flex:1 1 50%;order:3}
  .ec-plist__cell--act .button{width:100%;min-height:44px}
}

/* ---------- 6) Mini-/Widget-Cart Basics ---------- */
.widget_shopping_cart .cart_list,.woocommerce-mini-cart{list-style:none;margin:0;padding:0}
.widget_shopping_cart .cart_list li,.woocommerce-mini-cart li{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #e5e7eb}
.widget_shopping_cart .cart_list img,.woocommerce-mini-cart img{display:none!important}
.widget_shopping_cart .quantity,.widget_shopping_cart .variation,.woocommerce-mini-cart .quantity,.woocommerce-mini-cart .variation{grid-column:1/3;color:#6b7280;font-size:13px;margin-top:2px}
.widget_shopping_cart input.qty,.woocommerce-mini-cart input.qty{width:72px;padding:6px 8px;border:1px solid #e5e7eb;border-radius:8px}

/* ---------- 7) Header-Cart (goldener Kreis + Badge) ---------- */
[data-ec-cartbtn]{position:relative;display:inline-flex;align-items:center;justify-content:center}
[data-ec-cartbtn] .ec-circle{
  width:clamp(36px,3.2vw,48px);
  height:clamp(36px,3.2vw,48px);
  border-radius:999px;
  background:#8C7D54; /* FOG-Gold */
  display:flex;align-items:center;justify-content:center;
}
[data-ec-cartbtn] svg{width:clamp(18px,1.3vw,32px);height:clamp(18px,1.3vw,32px);display:block;fill:#fff}
[data-ec-cartbtn] .ec-cart-count{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;
  background:#0f1a28;color:#fff;font-size:12px;line-height:18px;text-align:center;font-weight:700;pointer-events:none
}

/* Cart-Seite: kein Drawer – Link bleibt normal nutzbar */
body.woocommerce-cart [data-ec-cartbtn]{pointer-events:auto}

/* ---------- 8) Kleinigkeiten ---------- */
.ec-plist__cell--act .button,
.ec-plist__cell--qty .button{background:#141e2b!important;color:#fff!important;border-color:#141e2b!important}

/* 1) Icon im Kreis (Badge bleibt) */
[data-ec-cartbtn]{
  --ec-ico: clamp(18px, 1.3vw, 32px);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
[data-ec-cartbtn] .ec-icon-wrap{
  width: calc(var(--ec-ico) + 14px);
  height: calc(var(--ec-ico) + 14px);
  border-radius: 999px;
  border: 2px solid #8C7D54;           /* FOG-Gold */
  display:flex; align-items:center; justify-content:center;
}
[data-ec-cartbtn] svg{
  width: var(--ec-ico); height: var(--ec-ico); display:block; color:#8C7D54;
}
[data-ec-cartbtn] .ec-cart-count{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:10px; background:#0f1a28; color:#fff;
  font-size:12px; line-height:18px; text-align:center; font-weight:700;
}

/* 2) Preis/Bestand grau hinterlegt – Button nie grau */
@media (max-width: 1024px){
  .ec-plist__cell--price,
  .ec-plist__cell--stock{ background:#f3f4f6; border-radius:12px; padding:10px 12px; }
  .ec-plist__cell--stock::before{ content:"Bestand:"; margin-right:6px; opacity:.75; font-weight:600; }
  .ec-plist__cell--qty{ display:flex; gap:10px; }
  .ec-plist__cell--qty .button{ flex:1; background:#141e2b !important; border-color:#141e2b !important; color:#fff !important; }
  .ec-plist__cell--qty .qty{ flex:1; height:44px; }
}

/* 3) Cart-Drawer (Fly-in von oben) */
#ec-cart-drawer{
  position:fixed; left:0; right:0; top:0; height:70vh;
  transform:translateY(-110%); transition:transform .28s ease;
  background:#fff; z-index:9999; border-bottom:1px solid #e5e7eb;
  box-shadow:0 20px 40px rgba(0,0,0,.18); display:flex; flex-direction:column;
}
#ec-cart-drawer.is-open{ transform:translateY(0); }
.ec-cartdrawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #e5e7eb; font-weight:700;
}
.ec-cartdrawer__body{ padding:12px 16px; overflow:auto; }
.ec-cartdrawer__close{ appearance:none; background:transparent; border:0; font-size:20px; cursor:pointer; }

/* Header Warenkorb – exakt wie die anderen runden Icons */
[data-ec-cartbtn]{
  --ec-ico: clamp(18px, 1.3vw, 32px);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff; /* Glyph */
  isolation: isolate; /* Badge über Kreis */
}
[data-ec-cartbtn]::before{
  content:"";
  position: absolute;
  inset: 0;
  width: calc(var(--ec-ico) * 1.9); /* Kreisgröße an deine Buttons angepasst */
  height: calc(var(--ec-ico) * 1.9);
  border-radius: 999px;
  background: #8C7D54;         /* FOG-Gold */
  z-index: 0;
  transform: translateZ(0);
}
[data-ec-cartbtn] svg{
  width: var(--ec-ico);
  height: var(--ec-ico);
  display: block;
  z-index: 1;
}
[data-ec-cartbtn] .ec-cart-count{
  position:absolute;
  top: -6px; right: -6px;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:10px; font-size:12px; line-height:18px;
  background:#0f1a28; color:#fff; font-weight:700;
  z-index: 2;
}

/* Auf der Warenkorb-Seite kein Drawer öffnen, Link bleibt Link */
body.woocommerce-cart [data-ec-cartbtn]{ pointer-events:auto; }

/* Mobile Kartenlayout: Reihenfolge & Beschriftungen */
@media (max-width: 768px){
  /* Reihenfolge: 1) Titel, 2) Preiszeile (Preis|min|Bestand), 3) Menge|Button */
  .ec-plist__cell--title { order: 1; flex: 0 0 100%; font-weight:700; }
  .ec-plist__row         { order: 2; display:flex; gap:12px; width:100%; }
  .ec-plist__cell--qty   { order: 3; flex: 1 1 50%; display:flex; }
  .ec-plist__cell--act   { order: 3; flex: 1 1 50%; }

  /* Preiszeile graue “Pills” */
  .ec-plist__row > *{
    background:#f3f4f6; color:#111827;
    border-radius:12px; padding:10px 14px; min-height:40px;
    display:flex; align-items:center; gap:8px; min-width:0;
  }

  /* Labels vor Min & Bestand */
  .ec-plist__row .ec-min::before{ content:"min."; opacity:.75; margin-right:4px; }
  .ec-plist__row .ec-stock::before{ content:"Bestand"; opacity:.75; margin-right:6px; }

  /* Fallback, falls deine Felder keine Klassen haben:
     1. Feld = Preis, 2. Feld = min., 3. Feld = Bestand */
  .ec-plist__row > *:nth-child(2)::before{ content:"min."; opacity:.75; margin-right:4px; }
  .ec-plist__row > *:nth-child(3)::before{ content:"Bestand"; opacity:.75; margin-right:6px; }

  /* Eingabe + Button nebeneinander (50/50) */
  .ec-plist__cell--qty .qty{ width:100%; height:44px; }
  .ec-plist__cell--act .button{ width:100%; min-height:44px; }

  /* “In den Warenkorb” NIE grau hinterlegen */
  .ec-plist__cell--act .button{ background:#141e2b !important; color:#fff !important; border-color:#141e2b !important; }
}