.kt-spares{margin:1rem auto 2rem}
.kt-spares h2{font-size:1.5rem}
.kt-spares-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin:20px 0}
.kt-spares-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-decoration:none;text-align:center;padding:22px 12px;background:var(--panel-bg,#fff);border:1px solid #d5dce5;border-radius:12px;color:inherit;min-height:180px;transition:box-shadow .15s,border-color .15s}
.kt-spares-tile:hover,.kt-spares-model-tile:hover{border-color:#248ad1;box-shadow:0 5px 18px #0001}
.kt-spares-tile-image{display:flex;align-items:center;justify-content:center;height:95px;width:100%;background:#fff;border-radius:8px}
.kt-spares-tile-image img{display:block;max-width:90%;max-height:90px;object-fit:contain}
.kt-spares-tile-icon{font-size:45px}
.kt-spares-tile small,.kt-spares-model-tile small{opacity:.76}
.kt-spares-model-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.kt-spares-model-tile{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;text-align:center;padding:14px;background:var(--panel-bg,#fff);border:1px solid #d5dce5;border-radius:12px;color:inherit;min-height:290px;transition:box-shadow .15s,border-color .15s}
.kt-spares-model-photo,.kt-spares-model-diagram{display:flex;align-items:center;justify-content:center;width:100%;background:#fff;border-radius:8px;overflow:hidden}
.kt-spares-model-photo{height:136px;border:1px solid #edf1f5}
.kt-spares-model-photo img{display:block;max-width:100%;max-height:130px;object-fit:contain}
.kt-spares-model-diagram{height:86px;border:1px solid #edf1f5}
.kt-spares-model-diagram img{display:block;max-width:100%;max-height:80px;object-fit:contain}
.kt-spares-diagram{border:1px solid #cbd5e1;border-radius:10px;overflow:hidden;background:#fff}
.kt-spares-diagram iframe{display:block;width:100%;height:clamp(550px,75vh,950px);border:0;background:#fff}
@media(max-width:600px){
 .kt-spares-grid,.kt-spares-model-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .kt-spares-tile{min-height:145px;padding:14px 8px}
 .kt-spares-model-tile{min-height:240px;padding:10px}
 .kt-spares-model-photo{height:104px}
 .kt-spares-model-photo img{max-height:98px}
 .kt-spares-model-diagram{height:70px}
 .kt-spares-model-diagram img{max-height:64px}
 .kt-spares-diagram iframe{height:75vh}
}

.kt-spares-media-selection{margin:1rem 0;padding:14px;border:1px solid #d5dce5;border-radius:10px}
.kt-spares-media-preview{margin:10px 0;display:flex;align-items:center;justify-content:center;min-height:135px;max-width:320px;background:white;border:1px solid #e4eaf1;border-radius:8px;color:#536171}
.kt-spares-media-preview img{display:block;max-width:100%;max-height:160px;object-fit:contain}
.kt-spares-media-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.kt-spares-media-actions button{cursor:pointer}
.kt-spares-media-actions label{max-width:320px}

/* Scalable, accessible SVG viewer: embedded links work when pan mode is off. */
.kt-spares-zoom-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0}
.kt-spares-zoom-tools button{padding:8px 13px;border-radius:7px;cursor:pointer}
.kt-spares-zoom-tools input[type=range]{width:min(240px,45vw)}
.kt-spares-zoom-tools output{min-width:66px;font-weight:650;font-variant-numeric:tabular-nums}
.kt-spares-zoom-tools [aria-pressed=true]{background:#236caa;color:#fff}
.kt-spares-zoom-hint{font-size:.9em;opacity:.8}
.kt-spares-diagram{position:relative;overflow:auto;height:clamp(550px,75vh,950px);overscroll-behavior:contain}
.kt-spares-zoom-canvas{position:relative;min-width:100%;min-height:100%}
.kt-spares-diagram iframe{position:absolute;top:0;left:0;max-width:none;transform-origin:top left}
.kt-spares-pan-layer{position:absolute;top:0;left:0;z-index:2;cursor:grab;touch-action:none}
.kt-spares-pan-layer[hidden]{display:none}
.kt-spares-pan-layer.is-dragging{cursor:grabbing}
.kt-spares-missing-table td{vertical-align:middle}
.kt-spares-missing-table tr[hidden]{display:none}

/* Compact exploded-view header: model and zoom controls share one row. */
.kt-spares-viewer{margin-top:0;margin-bottom:1rem}
.kt-spares-viewer>p:first-child{margin:0 0 10px}
.kt-spares-viewer-header{display:flex;align-items:center;justify-content:space-between;gap:14px 22px;flex-wrap:wrap;margin:0 0 6px}
.kt-spares-viewer-header h2{margin:0;font-size:1.45rem;line-height:1.35;flex:0 1 auto}
.kt-spares-viewer-header .kt-spares-zoom-tools{margin:0;gap:8px;justify-content:flex-end;flex:1 1 540px}
.kt-spares-viewer-header .kt-spares-zoom-tools button{white-space:nowrap}
.kt-spares-viewer-header .kt-spares-zoom-tools input[type=range]{width:clamp(100px,13vw,210px)}
.kt-spares-viewer .kt-spares-zoom-hint{margin:0 0 9px;font-size:.84rem;line-height:1.4}
@media(max-width:850px){
 .kt-spares-viewer-header{align-items:flex-start;gap:10px}
 .kt-spares-viewer-header .kt-spares-zoom-tools{justify-content:flex-start;flex-basis:100%;gap:7px}
}

/* Keep spare product details above the drawing; shared quickview UI. */
.kt-spares-product-modal .kt-quickview-panel{max-height:min(90vh,900px);overflow:auto}
.kt-spares-preview-missing{padding:25px}

/* V0.31.94: compact maker overview; share the same logo asset as the shop manufacturer menu. */
.kt-spares-makers{margin-top:0}
.kt-spares-makers-intro{margin:0 0 12px;color:var(--text-muted,#5c6978)}
.kt-spares-makers .kt-spares-grid{margin-top:12px}
.kt-spares-makers .kt-spares-tile-image img{width:auto;height:auto;max-width:100%;max-height:90px;object-fit:contain}

/* Additional diagram pages under one vehicle */
.kt-spares-page-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.kt-spares-page-tabs button{padding:9px 14px;border:1px solid #c7d4e2;background:var(--panel-bg,#fff);color:inherit;border-radius:8px;cursor:pointer}
.kt-spares-page-tabs button[aria-pressed="true"]{background:#236caa;border-color:#236caa;color:#fff;font-weight:650}
.kt-spare-pages-admin{margin:18px 0;padding:16px;border:1px solid #c7d4e2;border-radius:10px}
.kt-spare-pages-list{display:grid;gap:10px;margin:12px 0}
.kt-spare-page-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:10px;border:1px solid #d7e0ea;border-radius:8px}
.kt-spare-page-row label{flex:1 1 150px;margin:0}
.kt-spare-page-row label input{margin:2px 0 0}
.kt-spare-page-row .kt-spare-page-thumb{width:96px;height:60px;background:white;display:flex;align-items:center;justify-content:center;border:1px solid #d7e0ea}
.kt-spare-page-row .kt-spare-page-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.kt-spare-pages-upload{margin-top:18px;display:flex;align-items:end;gap:14px;flex-wrap:wrap}


/* V0.31.97 – Kontrast der Zeichnungsseiten-Tabs unabhängig von Shop-Buttonfarben.
   button-text-apply.css setzt die Akzent-Schriftfarbe global mit !important;
   daher müssen die Spezial-Tabs diese Regel explizit übersteuern. */
html body.kt-store-mode .kt-spares-viewer nav.kt-spares-page-tabs button[data-spares-page],
html body.kt-store-mode .kt-spares-viewer nav.kt-spares-page-tabs button[data-spares-page][aria-pressed="false"] {
  background:#f6f8fb!important;
  color:#253247!important;
  -webkit-text-fill-color:#253247!important;
  border:1px solid #a9bfd6!important;
  opacity:1!important;
  filter:none!important;
  box-shadow:none!important;
}
html body.kt-store-mode .kt-spares-viewer nav.kt-spares-page-tabs button[data-spares-page][aria-pressed="false"]:hover {
  background:#e8f1fb!important;
  color:#163a60!important;
  -webkit-text-fill-color:#163a60!important;
  border-color:#2679c9!important;
}
html body.kt-store-mode .kt-spares-viewer nav.kt-spares-page-tabs button[data-spares-page][aria-pressed="true"] {
  background:#236caa!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  border-color:#236caa!important;
  opacity:1!important;
  filter:none!important;
  box-shadow:0 1px 3px #0002!important;
}
html body.kt-store-mode .kt-spares-viewer nav.kt-spares-page-tabs button[data-spares-page]:focus-visible {
  outline:3px solid #f0a300!important;
  outline-offset:2px!important;
}

/* V0.31.100: Werkzeugleiste der Ersatzteilzeichnung bleibt beim Scrollen unter der Shop-Navigation. */
.kt-spares-viewer .kt-spares-sticky-toolbar{
 position:sticky;top:var(--kt-spares-sticky-top,0px);z-index:50;
 padding:10px 12px 8px;margin:0 -12px 10px;
 background:var(--panel-bg,var(--panel,#f6f7fa));color:var(--text,#263343);
 border:1px solid var(--border,#d7dee8);border-radius:9px;
 box-shadow:0 3px 12px rgba(0,0,0,.09);
}
.kt-spares-viewer .kt-spares-sticky-toolbar>p:first-child{margin:0 0 8px}
.kt-spares-viewer .kt-spares-sticky-toolbar .kt-spares-page-tabs{margin:8px 0 0}
.kt-spares-viewer .kt-spares-sticky-toolbar .kt-spares-zoom-hint{margin:5px 0 4px}
@media(max-width:850px){
 .kt-spares-viewer .kt-spares-sticky-toolbar{padding:8px;margin-left:0;margin-right:0}
 .kt-spares-viewer .kt-spares-sticky-toolbar .kt-spares-zoom-tools{gap:5px}
 .kt-spares-viewer .kt-spares-sticky-toolbar .kt-spares-zoom-tools button{padding:7px 9px}
}

/* 0.31.181: category product cards beneath the exploded drawing (or without SVG). */
.kt-spares-products{margin:22px auto 36px;min-width:0}
.kt-spares-products-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.kt-spares-products-header h3{font-size:1.35rem;margin:0 0 5px}
.kt-spares-products-header p{margin:0;color:var(--text-muted,#697789)}
.kt-spares-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(235px,100%),1fr));gap:14px}
.kt-spares-product-pagination{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:20px}
.kt-spares-product-pagination a{min-width:38px;padding:8px 10px;text-align:center;border:1px solid var(--border,#c5ced8);border-radius:7px;text-decoration:none}
.kt-spares-product-pagination a[aria-current=page]{background:var(--accent,#236caa);color:#fff}
@media(max-width:600px){.kt-spares-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}}

/* V0.31.182 – kompakte reine Kategorieansicht und konfigurierbare Spalten. */
.kt-spares-model-grid{grid-template-columns:repeat(var(--kt-spares-grid-desktop,5),minmax(0,1fr))}
.kt-spares-model-grid .kt-spares-model-tile{min-width:0;min-height:0}
.kt-spares-product-grid{grid-template-columns:repeat(var(--kt-spares-grid-desktop,4),minmax(0,1fr))}
.kt-spares-products-count{font-size:.85rem;color:var(--muted,#697789);margin:0 0 12px}
.kt-spares-display-settings{padding:14px 16px;margin:16px 0;border:1px solid var(--border,#d5dce5);border-radius:9px}
.kt-spares-display-settings h3{margin:0 0 8px}
.kt-spares-display-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px;margin:14px 0}
.kt-spares-display-fields label{display:grid;gap:5px}
.kt-spares-display-fields select{width:100%;min-width:0}
@media(max-width:600px){
 .kt-spares-model-grid{grid-template-columns:repeat(var(--kt-spares-grid-mobile,2),minmax(0,1fr))}
 .kt-spares-product-grid{grid-template-columns:repeat(var(--kt-spares-grid-mobile,2),minmax(0,1fr))}
}

/* V0.31.183: The global catalog grid uses !important and otherwise wins over
   the spare-parts grid settings. Override only the spare-parts grid, not other
   catalog pages. Both counts are supplied as inline CSS variables by PHP. */
html body.kt-store-mode .kt-spares-products .kt-catalog-results.kt-spares-product-grid:not(.kt-list-view) {
 grid-template-columns:repeat(var(--kt-spares-grid-desktop,4),minmax(0,1fr)) !important;
}
@media(max-width:600px) {
 html body.kt-store-mode .kt-spares-products .kt-catalog-results.kt-spares-product-grid:not(.kt-list-view) {
  grid-template-columns:repeat(var(--kt-spares-grid-mobile,2),minmax(0,1fr)) !important;
 }
}

/* V0.31.273: Ersatzteilkarten folgen den tatsächlichen Theme-Variablen. */
html body.kt-store-mode .kt-spares .kt-spares-tile,
html body.kt-store-mode .kt-spares .kt-spares-model-tile {
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}
html body.kt-store-mode .kt-spares .kt-spares-tile strong,
html body.kt-store-mode .kt-spares .kt-spares-tile small,
html body.kt-store-mode .kt-spares .kt-spares-model-tile strong,
html body.kt-store-mode .kt-spares .kt-spares-model-tile small {
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
  opacity:1!important;
}
html body.kt-store-mode .kt-spares .kt-spares-makers-intro {color:var(--muted)!important}
html body.kt-store-mode .kt-spares .kt-spares-tile-image,
html body.kt-store-mode .kt-spares .kt-spares-model-photo,
html body.kt-store-mode .kt-spares .kt-spares-model-diagram {background:#fff;color:#253247}