/* --- Reset-ish minimal --- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #000;
  color: #e9e9e9;
  line-height: 1.5;
}

a { color: #fff; text-decoration: none; }
a:hover { text-decoration: underline; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
}
.skip-link:focus {
  left: 12px; top: 12px; z-index: 9999;
  background: #111; color: #fff; padding: 10px 12px; border-radius: 10px;
  outline: 2px solid #fff;
}

/* --- Header (schmal) --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  max-width: 1200px;
  margin: 0 auto;
}
.brand__logo {
  height: 34px; width: auto; display: block;
}
.brand__text {
  font-weight: 700;
  letter-spacing: .04em;
}
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
}
.menu-toggle__icon {
  width: 18px; height: 12px;
  display: inline-block;
  background:
    linear-gradient(#fff,#fff) 0 0/100% 2px no-repeat,
    linear-gradient(#fff,#fff) 0 50%/100% 2px no-repeat,
    linear-gradient(#fff,#fff) 0 100%/100% 2px no-repeat;
}
.menu-toggle__text { font-size: 14px; }

/* --- Layout: Sidebar + Main --- */
.main, .site-footer, .sidebar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 12px;
}
.site-footer {
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
}

/* Desktop: Sidebar links; Mobile: hidden */
.sidebar { display: none; }

/* --- Offcanvas --- */
.offcanvas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 80;
}
.offcanvas {
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: min(86vw, 360px);
  background: #050505;
  border-right: 1px solid rgba(255,255,255,.10);
  transform: translateX(-100%);
  transition: transform .18s ease;
  z-index: 90;
  display: grid;
  grid-template-rows: auto 1fr;
}
.offcanvas__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.offcanvas__title { font-weight: 700; }
.offcanvas__close {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.offcanvas__body { padding: 10px 12px; overflow: auto; }

body.is-offcanvas-open .offcanvas { transform: translateX(0); }
body.is-offcanvas-open .offcanvas-overlay { display: block; }
.offcanvas-overlay[hidden] { display: none; }

/* --- Menüs im Shop clean halten --- */
.sidebar ul, .offcanvas ul { list-style: none; padding: 0; margin: 0; }
.sidebar a, .offcanvas a {
  display: block;
  padding: 10px 10px;
  border-radius: 12px;
}
.sidebar a:hover, .offcanvas a:hover { background: rgba(255,255,255,.06); }

/* --- Desktop breakpoint: Sidebar immer offen, Offcanvas deaktiviert --- */
@media (min-width: 992px) {
  .menu-toggle { display: none; }

  .main, .site-footer, .site-header .header-inner {
    max-width: 1200px;
  }

  body.bandshop {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header"
      "sidebar main"
      "sidebar footer";
  }
  .site-header { grid-area: header; }
  .sidebar {
    grid-area: sidebar;
    display: block;
    position: sticky;
    top: 52px; /* ungefähr Headerhöhe */
    align-self: start;
    height: calc(100vh - 52px);
    overflow: auto;
    border-right: 1px solid rgba(255,255,255,.08);
    padding-right: 12px;
  }
  .main { grid-area: main; }
  .site-footer { grid-area: footer; }

  .offcanvas, .offcanvas-overlay { display: none !important; }
}

.sidebar ul ul {
  display: none;
  padding-left: 15px;
}

.sidebar li.open > ul {
  display: block;
}

.sidebar li.parent > a::after {
  content: "▸";
  float: right;
}

.sidebar li.open > a::after {
  content: "▾";
}

/* =========================================================
   Tree / Accordion Menu – Bandshop (Sidebar + Offcanvas)
   - Submenus stehen IMMER darunter (nicht rechts)
   - Leicht eingerückt, cleanes Dark-Design
   - Toggle Button rechts, Links bleiben klickbar
   ========================================================= */

/* 1) Layout: LI als Flex, aber mit Wrap -> Untermenü kommt in nächste Zeile */
.sidebar li,
.offcanvas li {
  display: flex;
  align-items: center;
  gap: 8px;

  /* DAS ist der entscheidende Fix gegen "nach rechts ausklappen" */
  flex-wrap: wrap; /* erlaubt Zeilenumbruch innerhalb des li */
}

/* Link nimmt die Hauptbreite, Toggle sitzt rechts */
.sidebar li > a,
.offcanvas li > a {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 10px;
  border-radius: 12px;

  color: rgba(255,255,255,.92);
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}

/* Hover/Focus schöner (für beide Menüs) */
.sidebar li > a:hover,
.offcanvas li > a:hover {
  background: rgba(255,255,255,.06);
}

.sidebar li > a:focus-visible,
.offcanvas li > a:focus-visible {
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}

/* Active (Joomla nutzt je nach Ausgabe active/current) */
.sidebar li.active > a,
.sidebar li.current > a,
.offcanvas li.active > a,
.offcanvas li.current > a {
  background: rgba(255,255,255,.08);
  color: #fff;
}

/* 2) Toggle Button */
.menu-tree__toggle {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  margin-left: auto;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.95);
  cursor: pointer;

  transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}

.menu-tree__toggle:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}

.menu-tree__toggle:focus-visible {
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}

/* Pfeil */
.menu-tree__toggle .chev {
  display: inline-block;
  transform: rotate(0deg);
  transition: transform .15s ease;
}

/* wenn offen: Pfeil dreht */
li.is-open > .menu-tree__toggle .chev {
  transform: rotate(90deg);
}

/* 3) Untermenü: IMMER darunter (volle Breite) + Einrückung */
.sidebar li > ul,
.offcanvas li > ul {
  /* volle Zeile innerhalb des flex-li -> steht darunter */
  flex: 0 0 100%;
  width: 100%;

  /* standardmäßig zu */
  display: none;

  /* Optik */
  margin: 6px 0 2px;
  padding-left: 14px; /* leichte Einrückung */
}

/* geöffnet */
.sidebar li.is-open > ul,
.offcanvas li.is-open > ul {
  display: block;
}

/* Unterpunkte etwas kompakter/ruhiger */
.sidebar li > ul > li > a,
.offcanvas li > ul > li > a {
  padding: 9px 10px;
  border-radius: 12px;
  color: rgba(255,255,255,.85);
}

/* Optional: Tieferer Level noch etwas mehr einrücken */
.sidebar ul ul ul,
.offcanvas ul ul ul {
  padding-left: 22px;
}

/* =========================================================
   J2STORE – PRODUKTLISTE (BANDSHOP DARK DESIGN)
   Clean • modern • performant
   ========================================================= */

.j2store-product-list {
  color: rgba(255,255,255,.92);
}

/* =========================
   GRID / SPACING
   ========================= */
.j2store-product-list .row {
  --bs-gutter-x: 1.2rem;
  --bs-gutter-y: 1.2rem;
}

/* =========================
   FILTER (LINKE SPALTE)
   ========================= */
#productsideFilters {
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.product-filter-group {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10px 12px;
  margin-bottom: 8px;

  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}

.product-filter-heading {
  font-size: .95rem;
  font-weight: 700;
  margin: 0;
}

.j2store-productfilter-label {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px 10px;
  border-radius: 8px;

  cursor: pointer;
  color: rgba(255,255,255,.85);
}

.j2store-productfilter-label:hover {
  background: rgba(255,255,255,.06);
}

/* =========================
   SUCHLEISTE
   ========================= */
#productFilters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;

  margin-bottom: 20px;
}

#productFilters input[type="text"] {
  flex: 1 1 200px;
  min-height: 44px;

  background: #050505;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;
}

/* =========================
   PRODUKT CARD
   ========================= */
.j2store-single-product {
  display: flex;
  flex-direction: column;
  height: 100%;

  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;

  overflow: hidden;

  transition: all .18s ease;
}

.j2store-single-product:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* =========================
   IMAGE
   ========================= */
.j2store-product-images {
  background: #050505;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.j2store-thumbnail-image {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.j2store-thumbnail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   TITEL
   ========================= */
.product-title {
  padding: 12px 12px 6px;
  font-size: .95rem;
  font-weight: 700;
}

.product-title a {
  color: #fff;
}

.product-title a:hover {
  color: rgba(255,255,255,.8);
}

/* =========================
   PREIS
   ========================= */
.product-price-container {
  padding: 0 12px;
}

.sale-price {
  font-size: 1.15rem;
  font-weight: 800;
}

/* =========================
   OPTIONS (GRÖSSE ETC)
   ========================= */
.options {
  padding: 8px 12px;
}

.options select {
  width: 100%;
  min-height: 40px;

  background: #050505;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #fff;

  padding: 8px;
}

/* =========================
   ADD TO CART
   ========================= */
.j2store-addtocart-form {
  margin-top: auto;
  padding: 12px;
}

.j2store-add-to-cart {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 8px;
}

.product-qty input {
  width: 100% !important;
  border-radius: 10px;
  background: #050505;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}

.j2store-cart-button {
  border-radius: 10px;
  font-weight: 700;
  min-height: 42px;

  background: #fff;
  color: #000;
}

.j2store-cart-button:hover {
  background: rgba(255,255,255,.85);
}

/* =========================
   SUCCESS MESSAGE
   ========================= */
.cart-action-complete {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px;
}

/* =========================
   MOBILE OPTIMIERUNG
   ========================= */
@media (max-width: 768px) {
  .j2store-add-to-cart {
    grid-template-columns: 1fr;
  }

  .product-title {
    font-size: .9rem;
  }
}


/* =========================================
   FIX: Add-to-Cart immer untereinander
   ========================================= */

.j2store-add-to-cart {
  display: flex;
  flex-direction: column;   /* <- entscheidend */
  gap: 8px;
}

/* Menge */
.product-qty input {
  width: 100% !important;
  border-radius: 10px;
  background: #050505;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  text-align: center;
  height: 40px;
}

/* Button IMMER volle Breite */
.j2store-cart-button {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  font-weight: 700;

  background: #fff;
  color: #000;

  display: block;          /* wichtig */
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}

/* Hover */
.j2store-cart-button:hover {
  background: rgba(255,255,255,.85);
  color: #000;
}

.j2store-cart-button:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* =============================================
   FIX: Offcanvas wird sichtbar (JCH safe)
   ============================================= */

/* Default Zustand */
.offcanvas {
  transform: translateX(-100%);
  transition: transform .18s ease;
  will-change: transform;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);

}

/* WICHTIG: Höhere Spezifität + !important gegen JCH */
body.is-offcanvas-open #offcanvas {
  transform: translateX(0) !important;
}

/* Sicherstellen, dass es sichtbar ist */
body.is-offcanvas-open .offcanvas {
  visibility: visible;
  opacity: 1;
}


/* =========================================
   Sticky Cart Footer
   ========================================= */

.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  z-index: 999;

  background: #000;
  border-top: 1px solid rgba(255,255,255,.1);

  padding: 10px 12px;
}

/* optional schöner */
.sticky-footer .j2store-cart-module {
  max-width: 1200px;
  margin: 0 auto;
}


/* =========================================
   J2STORE PAGINATION – FINAL (100% passend)
   ========================================= */

/* Container */
.j2store-product-list .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 24px 0;
  flex-wrap: wrap;
}

/* Elemente */
.j2store-product-list .pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 36px;
  height: 36px;
  padding: 0 10px;

  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);

  background: #050505;
  color: rgba(255,255,255,.85);

  font-weight: 600;
  font-size: 0.9rem;

  text-decoration: none;
  transition: all .15s ease;
}

/* Hover */
.j2store-product-list .pagination .page-link:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.25);
}

/* Aktive Seite */
.j2store-product-list .pagination .active .page-link {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* =========================================
   PFEILE – JETZT RICHTIG (icon-basiert)
   ========================================= */

/* Alle Icons resetten */
.j2store-product-list .pagination .page-link span {
  font-size: 0 !important;
}

/* Double left */
.j2store-product-list .icon-angle-double-left::before {
  content: "«";
  font-size: 16px;
}

/* Left */
.j2store-product-list .icon-angle-left::before {
  content: "‹";
  font-size: 16px;
}

/* Right */
.j2store-product-list .icon-angle-right::before {
  content: "›";
  font-size: 16px;
}

/* Double right */
.j2store-product-list .icon-angle-double-right::before {
  content: "»";
  font-size: 16px;
}

/* =========================================
   FILTER RESET – UX IMPROVEMENT
   ========================================= */

#productFilters .btn-inverse {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.5);

  padding: 0 8px;
  height: auto;

  font-size: 0.85rem;
  text-decoration: underline;
}

/* Hover */
#productFilters .btn-inverse:hover {
  color: #fff;
}

/* =========================================
   ADD TO CART – FIX CUT TEXT
   ========================================= */

.j2store-cart-button {
  width: 100%;
  min-height: 42px;

  white-space: normal;     /* WICHTIG */
  line-height: 1.2;
  padding: 8px 10px;

  font-size: 0.8rem;
}

/* =========================================
   PRODUKTKARTEN SHOP ANSICHT MODIFIKATIONEN
   ========================================= */

/* Hover */
.j2store-single-product:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,.4);
}

/* Bild Hoover Zoom */

.j2store-thumbnail-image img {
  transition: transform .3s ease;
}

.j2store-single-product:hover img {
  transform: scale(1.05);
}

/* Preis hervorheben */

.sale-price {
  font-size: 1.2rem;
  font-weight: 800;
}

/* Filter anpassen */
#productFilters input[type="text"] {
  background: #000;
  border: 1px solid rgba(255,255,255,.2);
}

/* =========================================
   PRODUCT DETAIL LAYOUT
   ========================================= */

.j2store-single-product.detail .row {
  align-items: flex-start;
}

/* rechte Spalte klarer */
.j2store-single-product .col-sm-6:last-child {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/*Produktbild aufwerten */

.j2store-mainimage {
  background: #050505;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
}

.j2store-product-main-image {
  border-radius: 12px;
}

/*Titel und Preis verbessern */


/* Preisblock */
.price-sku-brand-container {
  border: none !important;
  padding: 0 !important;
}


/* =========================================
   DESCRIPTION IMPROVEMENT
   ========================================= */

.product-sdesc {
  background: #050505;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);

  font-size: 0.9rem;
  line-height: 1.6;
}

/* Überschriften */
.product-sdesc strong {
  display: block;
  margin-top: 10px;
  color: #fff;
}

/*Tabs modernisieren*/

.nav-tabs {
  border: none;
}

.nav-tabs .nav-link {
  border: none;
  background: rgba(255,255,255,.05);
  border-radius: 10px;
  margin-right: 6px;
  color: #fff;
}

.nav-tabs .nav-link.active {
  background: #fff;
  color: #000;
}


/* =========================================
   RELATED PRODUCTS
   ========================================= */

.upsell-product,
.crosssell-product-row .upsell-product {
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px;

  display: flex;
  flex-direction: column;
  gap: 6px;

  transition: all .15s ease;
}

.upsell-product:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.4);
}

.upsell-product img {
  border-radius: 8px;
}

/* Buttons */
.upsell-product .btn {
  margin-top: auto;
}