/* =============================================================================
   WARENKORB-DRAWER (ktmcd)
   -----------------------------------------------------------------------------
   Lag bis zum 14.08.2026 als eingebetteter Block im WPCode-Snippet
   „KTM Warenkorb-Drawer (Store-API)" (KTM 270992), ausgegeben im Fussbereich mit
   Prioritaet 99. Unveraendert uebernommen.

   BEIDE SHOPS. Es gab zwei Snippets (KTM 270992, Husky 5319), die sich nur im
   Token-Block unterschieden: Markenfarbe und Schriftstapel. Genau dieser Block
   laeuft jetzt ueber die Marken-Palette, der Rest ist zeichengleich.
   ============================================================================= */

.ktmcd, .ktmcd *{box-sizing:border-box}
.ktmcd{
  /* Markenfarbe: `--ktm-orange` ist auf BEIDEN Shops gesetzt und traegt je Shop
     den richtigen Wert (KTM #FF6600, Husky #273A60) — der Name taeuscht. Die
     zweite Stufe ueber `--brand-accent` ist die Absicherung fuer einen dritten
     Shop, der die alte Variable nicht mehr fuehrt. */
  --cd-orange:var(--ktm-orange,var(--brand-accent,#ff6600));
  --cd-orange-press:var(--brand-accent-dark,#e25c00);
  --cd-orange-soft:color-mix(in srgb, var(--ktm-orange,var(--brand-accent,#ff6600)) 8%, transparent);
  --cd-ink:#16181c; --cd-muted:#6b7280; --cd-faint:#9aa0a6;
  --cd-line:#ececec; --cd-line2:#e0e1e3; --cd-border:#d7d9dc;
  --cd-bg:#f4f5f6; --cd-card:#fff; --cd-hover:#f7f8f9; --cd-ok:#1f9d43; --cd-warn:#c47f16; --cd-out:#d63b30;
  --cd-radius:12px; --cd-shadow:0 1px 2px rgba(20,24,28,.05),0 10px 30px rgba(20,24,28,.08);
  --cd-sans:var(--spf-brand-sans,'Roboto Condensed Regular','Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif);
  --cd-cond:var(--spf-brand-head,'Blender Heavy','Roboto Condensed Regular','Helvetica Neue',Helvetica,Arial,sans-serif);
  --cd-mono:var(--spf-brand-sans,'Roboto Condensed Regular','Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif);
  font-family:var(--cd-sans);color:var(--cd-ink);font-size:15px;line-height:1.5;
}
.ktmcd__scrim{position:fixed;inset:0;z-index:100000;background:rgba(14,16,20,.45);opacity:0;pointer-events:none;transition:opacity .25s ease}
.ktmcd__scrim.is-open{opacity:1;pointer-events:auto}
.ktmcd__panel{position:fixed;top:0;right:0;bottom:0;z-index:100001;width:min(410px,100%);background:var(--cd-bg);box-shadow:-12px 0 40px rgba(14,16,20,.18);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .32s cubic-bezier(.22,.61,.36,1);visibility:hidden}
.ktmcd__panel.is-open{transform:translateX(0);visibility:visible}
body.ktmcd-open{overflow:hidden}
.ktmcd__head{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--cd-card);border-bottom:1px solid var(--cd-line2);flex:none}
.ktmcd__head svg{width:26px;height:26px;stroke:var(--cd-orange);fill:none;stroke-width:1.7;flex:none}
.ktmcd__title{font-family:var(--cd-cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:20px;margin:0}
.ktmcd__title .n{color:var(--cd-orange)}
.ktmcd__close{margin-left:auto;width:42px;height:42px;border:1px solid var(--cd-border);border-radius:10px;background:#fff;color:var(--cd-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .15s,color .15s}
@media (hover:hover){
.ktmcd__close:hover{border-color:var(--cd-orange);color:var(--cd-orange)}}
.ktmcd__close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;display:block}
.ktmcd__body{flex:1;overflow-y:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:10px}
.ktmcd__it{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;background:var(--cd-card);border:1px solid var(--cd-line2);border-radius:var(--cd-radius);padding:12px;box-shadow:var(--cd-shadow)}
.ktmcd__thumb{width:62px;align-self:stretch;min-height:78px;border-radius:9px;overflow:hidden;background:#fff;border:1px solid var(--cd-line);display:flex;align-items:center;justify-content:center;flex:none}
.ktmcd__thumb img{width:100%;height:100%;object-fit:contain;display:block}
.ktmcd__main{min-width:0;display:flex;flex-direction:column;gap:3px;padding-right:30px}
/* VERSALIEN wie die Ueberschrift `.ktmcd__title` darueber — hier laeuft ueber
   `--cd-cond` dieselbe Blender-Kette, und Blender ist eine Versalschrift
   (Kili, 14.08.2026).
   EINSCHRAENKUNG: Anders als bei der Produktkarte gibt es hier keine
   Husqvarna-Ausnahme. Der Rahmen des Schubkastens wird nicht vom Plugin
   gerendert (der Aufbau kommt aus dem Kopf-Code, nur die Zeilen darin baut
   spf-warenkorb-drawer.js), es gibt also kein Element, an das sich eine
   Markenklasse haengen liesse. Auf Husqvarna steht der Name damit versal in
   Helvetica — genau wie die Ueberschrift daneben, die das seit jeher tut. */
.ktmcd__name{font-family:var(--cd-cond);font-size:14px;font-weight:700;line-height:1.25;color:var(--cd-ink);text-decoration:none;text-transform:uppercase}
@media (hover:hover){
.ktmcd__name:hover{color:var(--cd-orange)}}
.ktmcd__var{font-size:12px;color:var(--cd-muted)}
.ktmcd__sku{font-family:var(--cd-mono);font-size:11px;color:var(--cd-faint)}
.ktmcd__avail{font-size:11.5px;font-weight:600;display:flex;align-items:flex-start;gap:6px;line-height:1.35;margin-top:3px;color:var(--cd-muted)}
.ktmcd__avail::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;margin-top:3px}
.ktmcd__avail .ktmcd__avail-tm{font-weight:500;opacity:.85}
.ktmcd__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px}
.ktmcd__qty{display:inline-flex;align-items:center;height:30px;border:1px solid var(--cd-border);border-radius:8px;overflow:hidden;background:#fff}
.ktmcd__qty button{width:28px;height:30px;border:0;background:#fff;color:var(--cd-muted);font-size:15px;cursor:pointer;line-height:1;transition:background .12s,color .12s;display:flex;align-items:center;justify-content:center;flex:none}
@media (hover:hover){
.ktmcd__qty button:hover:not(:disabled){background:#f1f2f3;color:var(--cd-orange)}}
.ktmcd__qty button:disabled{opacity:.35;cursor:default}
.ktmcd__qty .ktmcd__qtyin{width:38px;height:30px;border:0;border-left:1px solid var(--cd-line);border-right:1px solid var(--cd-line);text-align:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--cd-ink);background:#fff;padding:0;-moz-appearance:textfield;appearance:textfield}
.ktmcd__qty .ktmcd__qtyin:focus{outline:2px solid var(--cd-orange);outline-offset:-2px}
.ktmcd__qty .ktmcd__qtyin::-webkit-outer-spin-button,.ktmcd__qty .ktmcd__qtyin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Zwei Zeilen, fest rechts: Zeilenbetrag oben, „… / Stueck" darunter. Der
   Stueckpreis steht seit dem 04.09.2026 bei JEDER Menge — vorher erschien er
   erst ab Menge 2 und liess die Karte im Moment des Antippens um rund 14 px
   wachsen. Die Spalte haelt den Zusatz im Preisfeld, damit er nicht unter den
   Mengen-Stepper daneben rutscht. */
.ktmcd__price{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end}
.ktmcd__unit{display:block;font-weight:400;font-size:10.5px;color:var(--cd-faint);white-space:nowrap;line-height:1.3}
/* Aufteilung „Sonderpreis nur fuer die Lagermenge": Statt eines Stueckpreises
   stehen hier zwei („1 × 35,79 € + 1 × 71,58 €"). Das passt auf 390 px nicht mehr
   in eine Zeile — `nowrap` muss deshalb genau hier weichen, sonst schiebt der Text
   die Karte seitlich auf. Etwas kleiner und links ausgerichtet, damit der
   Gesamtbetrag darueber die betonte Zahl bleibt. */
.ktmcd__unit--split{white-space:normal;font-size:10px;text-align:right;max-width:15ch;margin-left:auto}
/* Optimistisch gerechneter Betrag, Serverantwort steht aus. Die Korrektur liest
   sich damit als Laden und nicht als Sprung. */
.ktmcd__it.is-syncing .ktmcd__price{opacity:.6;transition:opacity .12s}
.ktmcd__rm{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--cd-faint);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
@media (hover:hover){
/* HOVER: VOLLTON, wie auf der Warenkorbseite (Kili, 04.09.2026)
   Vorher das feste Rosa #fdecea — markenunabhaengig eingetragen und damit auch
   auf Husqvarna. Der Zwischenstand (neutrale Flaeche, rotes Kreuz) sah hier
   anders aus als auf der Warenkorbseite, wo WooCommerce das Kreuz per
   `!important` weiss faerbt. Beide tragen jetzt dasselbe: Vollton im Warnrot,
   weisses Kreuz darauf — 4,79:1. */
.ktmcd__rm:hover{background:var(--cd-out,#da2d23);color:#ffffff}}
.ktmcd__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:36px 24px;color:var(--cd-muted)}
.ktmcd__empty svg{width:64px;height:64px;stroke:var(--cd-faint);fill:none;stroke-width:1.3}
.ktmcd__empty h3{font-family:var(--cd-cond);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:19px;color:var(--cd-ink);margin:0}
.ktmcd__empty p{margin:0;font-size:13.5px;max-width:260px}
.ktmcd__foot-wrap{flex:none;background:var(--cd-card);border-top:1px solid var(--cd-line2);padding:14px 20px 16px}
.ktmcd__ship{margin-bottom:13px}
.ktmcd__ship-txt{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.ktmcd__ship-txt b{color:var(--cd-orange)}
.ktmcd__ship-txt.done{color:var(--cd-ok)}
.ktmcd__ship-bar{margin-top:7px;height:7px;border-radius:4px;background:var(--cd-line2);overflow:hidden}
.ktmcd__ship-fill{height:100%;border-radius:4px;background:var(--cd-orange);width:0;transition:width .35s cubic-bezier(.22,.61,.36,1)}
.ktmcd__ship-fill.done{background:var(--cd-ok)}
.ktmcd__sum{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ktmcd__sum-lbl{font-family:var(--cd-cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:15px}
.ktmcd__sum-val{font-family:var(--cd-cond);font-weight:700;font-size:21px;font-variant-numeric:tabular-nums}
.ktmcd__vat{font-size:11.5px;color:var(--cd-faint);margin:2px 0 12px}
.ktmcd__co{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;border:0;border-radius:10px;background:var(--cd-orange);color:#fff;font-family:var(--cd-cond);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:16px;cursor:pointer;text-decoration:none;transition:background .15s}
@media (hover:hover){
.ktmcd__co:hover{background:var(--cd-orange-press);color:#fff}}
.ktmcd__co svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.2;flex:none}
.ktmcd__view{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin-top:8px;border:1px solid var(--cd-border);border-radius:10px;background:#fff;color:var(--cd-ink);font-family:var(--cd-cond);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:14px;cursor:pointer;text-decoration:none;transition:border-color .15s,color .15s}
@media (hover:hover){
.ktmcd__view:hover{border-color:var(--cd-orange);color:var(--cd-orange)}}
.ktmcd__legal{margin-top:10px;font-size:11px;color:var(--cd-faint);text-align:center}
.ktmcd.is-busy .ktmcd__body{opacity:.55;pointer-events:none;transition:opacity .15s}
/* Der Fussbereich wartet mit: Vor „Zur Kasse" und „Warenkorb ansehen" haelt das
   Skript an, bis die Mengenaenderung beim Server ist. Ohne sichtbares Zeichen
   wirkt der Knopf in dieser knappen Sekunde tot. */
.ktmcd.is-busy .ktmcd__foot-wrap{opacity:.75;transition:opacity .15s}
.ktmcd.is-busy .ktmcd__co,.ktmcd.is-busy .ktmcd__view{cursor:progress}
@media (max-width:767px){
  .ktmcd__panel{width:100%;transform:translateY(103%);border-radius:16px 16px 0 0}
  .ktmcd__panel.is-open{transform:translateY(0)}
  /* 16px gegen den iOS-Fokus-Zoom: Safari zoomt beim Antippen in jedes Feld
     unter 16px und faehrt danach nicht von selbst zurueck. Hoehe und Breite
     bleiben fest, die Zeile springt also nicht. Desktop behaelt die 13px. */
  .ktmcd__qty{height:36px}.ktmcd__qty button{width:34px;height:36px;font-size:17px}.ktmcd__qty .ktmcd__qtyin{height:36px;width:44px;font-size:16px}
  .ktmcd__rm{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){.ktmcd__panel,.ktmcd__scrim,.ktmcd__ship-fill,
  .ktmcd__it.is-syncing .ktmcd__price,.ktmcd.is-busy .ktmcd__foot-wrap{transition:none}}