/* VASKORA — Shop/Katalog (shopspezifisch; Basis-Design in vk-shared.css) */
@import url("vk-shared.css?v=8");

/* ---------- Gast-Hinweis ---------- */
.vk-gast{background:var(--cream);padding:9px 20px;text-align:center;font-size:11.5px;color:var(--ink);max-width:var(--design);margin:0 auto}
.vk-gast a{font-weight:700;text-decoration:underline}

/* ---------- Shop-Layout ---------- */
.vk-shop{max-width:var(--design);margin:0 auto;padding:20px 38px 80px;display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:start}

/* ---------- Filter-Sidebar ---------- */
.vk-filters{position:sticky;top:20px}
.vk-filters__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.vk-filters__title{font-size:15px;font-weight:600;color:var(--ink)}
.vk-filters__reset{font-size:11px;color:var(--muted);cursor:pointer;background:none;border:none;padding:0;font-family:inherit}
.vk-filters__reset:hover{color:var(--ink)}
.vk-filters__close{display:none;background:none;border:none;padding:4px;cursor:pointer;color:var(--ink)}
.vk-filters-overlay{display:none}
.vk-filter-group{border-top:1px solid var(--border-light);padding:16px 0}
.vk-filter-group:first-of-type{border-top:none;padding-top:0}
.vk-filter-group__title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);margin:0 0 12px}

.vk-check{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;font-size:12.5px;color:var(--ink)}
.vk-check__box{width:15px;height:15px;border:1.5px solid var(--border);border-radius:3px;flex:none;position:relative}
.vk-check.checked .vk-check__box{background:#000;border-color:#000}
.vk-check.checked .vk-check__box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.vk-check__label{flex:1}
.vk-check__count{color:var(--muted);font-size:11px}

.vk-hauptkat{margin-bottom:4px}
.vk-hauptkat__head{display:flex;align-items:center;gap:8px;padding:7px 0;cursor:pointer}
.vk-hauptkat__head:hover .vk-hauptkat__name{opacity:.7}
.vk-hauptkat__chev{width:9px;height:9px;flex:none;transition:transform .15s;color:var(--muted)}
.vk-hauptkat.open .vk-hauptkat__chev{transform:rotate(90deg)}
.vk-hauptkat__name{flex:1;font-size:13px;font-weight:600;color:var(--ink)}
.vk-hauptkat__count{font-size:11px;color:var(--muted)}
.vk-hauptkat__sub{display:none;padding-left:17px;margin-top:2px}
.vk-hauptkat.open .vk-hauptkat__sub{display:block}

.vk-mehr-marken{font-size:11px;color:var(--muted);background:none;border:none;padding:6px 0 0;font-family:inherit;cursor:pointer;text-align:left}
.vk-mehr-marken:hover{color:var(--ink)}

/* ---------- Mobile filter toggle ---------- */
.vk-filter-toggle{
  display:none;width:100%;padding:11px;border:1px solid var(--border);border-radius:5px;background:#fff;
  font-size:12.5px;font-weight:600;color:var(--ink);align-items:center;justify-content:center;gap:8px;margin-bottom:16px;
}
.vk-filter-toggle svg{width:15px;height:15px}

/* ---------- Toolbar ---------- */
.vk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.vk-toolbar__count{font-size:13px;color:var(--muted)}
.vk-toolbar__count strong{color:var(--ink);font-weight:600}
.vk-sort{
  font-family:inherit;font-size:12px;color:var(--ink);border:1px solid var(--border-light);border-radius:30px;
  padding:8px 30px 8px 14px;background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>') no-repeat right 10px center/12px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
}

/* ---------- Aktive Filter-Chips ---------- */
.vk-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.vk-chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--cream);border-radius:30px;
  font-size:11.5px;font-weight:500;color:var(--ink);border:none;cursor:pointer;font-family:inherit;
}
.vk-chip span{font-size:14px;font-weight:300;line-height:1}

/* ---------- Zustand: leer/laden ---------- */
.vk-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:80px 20px;color:var(--muted)}
.vk-state svg{color:var(--border)}
.vk-spinner{width:26px;height:26px;border:2.5px solid var(--border-light);border-top-color:var(--ink);border-radius:50%;animation:vk-spin .7s linear infinite}
@keyframes vk-spin{to{transform:rotate(360deg)}}

/* ---------- Pagination ---------- */
.vk-pagination{display:flex;justify-content:center;gap:6px;margin-top:40px}
.vk-page-btn{
  min-width:34px;height:34px;padding:0 10px;border:1px solid var(--border-light);border-radius:5px;background:#fff;
  font-size:12.5px;color:var(--ink);cursor:pointer;font-family:inherit;
}
.vk-page-btn.active{background:#000;border-color:#000;color:#fff}
.vk-page-btn:disabled{opacity:.4;cursor:default}

/* ---------- Warenkorb-Drawer ---------- */

/* ---------- Quick View Modal ---------- */
.vk-qv-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:850;display:none;align-items:center;justify-content:center;padding:24px}
.vk-qv-overlay.open{display:flex}
.vk-qv-box{position:relative;background:#fff;border-radius:8px;max-width:760px;width:100%;max-height:88vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr}
.vk-qv-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:var(--ink)}
.vk-qv-img{background:#fafafa;display:flex;align-items:center;justify-content:center;min-height:280px}
.vk-qv-img img{width:100%;height:100%;object-fit:contain;padding:32px}
.vk-qv-info{padding:32px}

/* ---------- Produktdetail ---------- */
.vk-detail{max-width:var(--design);margin:0 auto;padding:24px 38px 0;display:grid;grid-template-columns:1fr 1fr;gap:56px}
.vk-detail__img{position:sticky;top:20px;aspect-ratio:1/1;background:#fafafa;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.vk-detail__img img{width:100%;height:100%;object-fit:contain;padding:48px}
.vk-detail__marke{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);cursor:pointer;margin-bottom:8px}
.vk-detail__marke:hover{color:var(--ink)}
.vk-detail__name{font-size:24px;font-weight:500;margin:0 0 10px;line-height:1.3}
.vk-detail__sku{font-size:11.5px;color:var(--muted);margin-bottom:14px}
.vk-stock{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;margin-bottom:18px}
.vk-stock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.vk-stock.ok{color:#2f7a3d}
.vk-stock.warn{color:#b5750f}
.vk-stock.aus{color:#a13030}
.vk-detail__price{font-size:30px;font-weight:600;margin-bottom:2px}
.vk-detail__price-sub{font-size:12px;color:var(--muted);margin-bottom:22px}
.vk-qty{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.vk-qty__ctrl{display:flex;align-items:center;border:1px solid var(--border);border-radius:30px;overflow:hidden}
.vk-qty__ctrl button{width:36px;height:36px;background:#fff;border:none;font-size:16px;cursor:pointer;color:var(--ink)}
.vk-qty__ctrl input{width:44px;height:36px;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);text-align:center;font-size:13px;font-family:inherit}
.vk-detail__actions{display:flex;gap:10px;margin-bottom:12px}
.vk-detail__actions .vk-btn-black{flex:1;padding:14px}
.vk-icon-btn{
  width:48px;height:48px;flex:none;border:1px solid var(--border);border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;transition:border-color .15s;
}
.vk-icon-btn:hover{border-color:var(--ink)}
.vk-icon-btn.active{color:#e0517a;border-color:#e0517a}
.vk-icon-btn svg{width:18px;height:18px}
.vk-share-row{display:flex;gap:10px;margin-bottom:20px}
.vk-share-row button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border:1px solid var(--border);
  border-radius:30px;background:#fff;font-size:12px;color:var(--ink);cursor:pointer;font-family:inherit;
}
.vk-share-row button svg{width:14px;height:14px;flex:none}
.vk-share-row button:hover{border-color:var(--ink)}
.vk-rc-note{background:var(--cream);border-radius:6px;padding:14px 16px;font-size:12px;line-height:1.6;margin-bottom:20px}
.vk-tabs{border-top:1px solid var(--border-light);padding-top:22px;margin-top:8px}
.vk-tabs__head{display:flex;gap:0;border-bottom:1px solid var(--border-light);margin-bottom:18px}
.vk-tabs__btn{padding:10px 18px 12px;font-size:12.5px;font-weight:600;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;font-family:inherit}
.vk-tabs__btn.active{color:var(--ink);border-bottom-color:var(--ink)}
.vk-tabs__panel{display:none;font-size:13px;line-height:1.8;color:#444}
.vk-tabs__panel.active{display:block}
.vk-tabs__table{width:100%;border-collapse:collapse;font-size:12.5px}
.vk-tabs__table td{padding:10px 0;border-bottom:1px solid var(--border-light)}
.vk-tabs__table td:first-child{color:var(--muted);width:160px}
.vk-tabs__table td:last-child{font-weight:600;color:var(--ink)}
.vk-section{max-width:var(--design);margin:0 auto;padding:56px 38px 0}
.vk-section__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.vk-section__title{font-size:18px;font-weight:500;margin:0}
.vk-section__link{font-size:12px;font-weight:500}
.vk-section__link:hover{opacity:.6}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .vk-detail{grid-template-columns:1fr;gap:24px;padding:16px 20px 0}
  .vk-detail__img{position:static}
  .vk-section{padding:40px 20px 0}
  .vk-shop{grid-template-columns:1fr;padding:16px 20px 60px}
  .vk-breadcrumb{padding:16px 20px 0}
  .vk-gast{padding:9px 20px}
  .vk-filter-toggle{display:flex}
  .vk-filters{
    position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:#fff;z-index:820;
    padding:20px;overflow-y:auto;transform:translateX(100%);transition:transform .3s;
  }
  .vk-filters.open{transform:translateX(0)}
  .vk-filters__close{display:flex}
  .vk-filters-overlay{
    display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:810;
    opacity:0;pointer-events:none;transition:opacity .3s;
  }
  .vk-filters-overlay.open{opacity:1;pointer-events:auto}
  .vk-qv-box{grid-template-columns:1fr}
}