/* =========================================================
   /assets/shop.css – AURORA NEON THEME (final)
   Gradient-Canvas + Glass Cards
   Kompatibel: index.php, category.php, product.php
   Keine HTML-Änderung nötig.
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* Grundfarben */
  --bg:            #070b12;
  --fg:            #e9f0ff;
  --muted:         #aab7d1;
  --dock-h: 72px;
  /* Aurora-Verläufe */
  --aurora-1:
    radial-gradient(1200px 800px at 10% 20%, rgba(80,220,255,.18), transparent 60%),
    radial-gradient(900px 700px at 90% 10%, rgba(168,85,247,.15), transparent 65%),
    radial-gradient(800px 800px at 40% 90%, rgba(16,185,129,.14), transparent 60%);

  /* Glas / Gel */
  --card:          rgba(10,16,28,.65);
  --card-brd:      rgba(149,185,255,.20);
  --glass:         saturate(140%) blur(12px);

  /* Akzente */
  --accent:        #7dd3fc;   /* Eisblau */
  --accent-2:      #34d399;   /* Mintgrün */
  --accent-3:      #a78bfa;   /* Lila */

  /* Rahmen / Schatten / Radius */
  --line:          1px solid rgba(149,185,255,.20);
  --shadow-sm:     0 6px 20px rgba(0,0,0,.25);
  --shadow-lg:     0 30px 60px rgba(0,0,0,.35);
  --r-lg:          18px;
  --r-md:          14px;
  --r-sm:          10px;

  --wrap:          1240px;

  /* Footer-Dock-Höhe (für globales Bottom-Padding) */
  --dock-h:        72px;
}

/* Optional Themes (Switcher via [data-theme]) */
html[data-theme="light"]{
  --bg: #f7fbff;
  --fg: #0f172a;
  --muted:#4b556a;
  --card: rgba(255,255,255,.72);
  --card-brd: rgba(15,23,42,.10);
  --aurora-1:
    radial-gradient(1200px 800px at 10% 20%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(900px 700px at 90% 10%, rgba(129,140,248,.18), transparent 65%),
    radial-gradient(800px 800px at 40% 90%, rgba(16,185,129,.18), transparent 60%);
}
html[data-theme="mint"]{
  --bg: #081512;
  --fg: #e7fff7;
  --muted:#9ee3cf;
  --accent:#34d399; --accent-2:#a5f3fc; --accent-3:#86efac;
  --card: rgba(6,30,26,.60);
  --card-brd: rgba(167,243,208,.25);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html, body{ height:100% }
body{
  margin:0;
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  background-image: var(--aurora-1);
  background-attachment: fixed;
  /* WICHTIG: Platz für das Footer-Dock (inkl. Safe-Area + Luft) */
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 12px) !important;
}
img{ display:block; max-width:100% }
a{ color: var(--accent); text-decoration: none }
a:hover{ text-decoration: underline }
.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 16px }

/* Subtle animated gradient sheen */
@keyframes sheen {
  0% { background-position: 0% 50% }
  50%{ background-position: 100% 50% }
  100%{ background-position: 0% 50% }
}

/* ---------- Generic Cards / Buttons / Inputs ---------- */
.card{
  background: var(--card);
  border: var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass);
}
.card-pad{ padding: 16px }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px;
  border-radius: 999px;
  border: var(--line);
  background: linear-gradient(90deg, rgba(125,211,252,.15), rgba(52,211,153,.12));
  color: var(--fg);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{ text-decoration:none; transform: translateY(-1px); filter: brightness(1.08) }
.btn.primary{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #04121a; font-weight:900; border: 1px solid rgba(255,255,255,.35);
}
.btn.ghost{
  background: transparent;
  border-color: rgba(149,185,255,.25);
}
.btn.secondary{
  background: linear-gradient(90deg, rgba(167,139,250,.22), rgba(125,211,252,.18));
}

input, select, textarea{
  width:100%; padding:12px 14px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.08);
  color: var(--fg);
  border: 1px solid rgba(149,185,255,.28);
  backdrop-filter: blur(6px);
}
input:focus, select:focus, textarea:focus, .btn:focus{
  outline:none; box-shadow: 0 0 0 3px rgba(125,211,252,.35);
}

/* ---------- Header (geteilt von Produkt & Kategorie) ---------- */
.header{
  position: sticky; top:0; z-index:20;
  background: linear-gradient(180deg, rgba(4,10,18,.8), rgba(4,10,18,.45));
  border-bottom: var(--line);
  backdrop-filter: blur(10px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px;
}
.breadcrumb{
  font-size:12px; color: var(--muted);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.breadcrumb a{ color: var(--fg) }
.breadcrumb .sep{ opacity:.6 }

/* ---------- INDEX: markanter Auftritt ---------- */
.site-header{ position: sticky; top:0; z-index:25; }
.hero-band{
  margin-top: 8px;
  padding: 24px 16px;
  border-radius: var(--r-lg);
  border: var(--line);
  background: linear-gradient(120deg, rgba(125,211,252,.20), rgba(167,139,250,.18), rgba(52,211,153,.18));
  background-size: 200% 200%;
  animation: sheen 14s ease infinite;
  box-shadow: var(--shadow-lg);
}
.hero-title{
  margin:0 0 10px;
  font-size: clamp(24px, 3.4vw, 44px);
  line-height:1.05;
  font-weight: 900;
  letter-spacing:.2px;
}
.hero-sub{ color: var(--muted); max-width: 70ch }

/* Suche oben (index.php nutzt form.searchbar) */
.searchbar{ display:flex; gap:10px; align-items:center; margin-top:12px }
.searchbar .box{ flex:1; position:relative }
.searchbar input{
  border-radius: 14px;
  background: rgba(255,255,255,.08);
}
.searchbar button{ border-radius: 14px }

/* Live-Suche-Dropdown */
.live{
  position:absolute; left:0; right:0; top: calc(100% + 8px);
  background: var(--card); border: var(--line); border-radius: var(--r-md);
  display:none; max-height: 320px; overflow:auto; z-index:40;
  box-shadow: var(--shadow-lg); backdrop-filter: var(--glass);
}
.live a{
  display:block; padding:10px 12px; color: var(--fg); text-decoration:none;
  border-bottom: 1px solid rgba(149,185,255,.12);
}
.live a:hover{ background: rgba(125,211,252,.08) }

/* Quickfinder Chips */
.quickfinder{
  margin-top: 14px;
  display:grid; gap:10px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.chip{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(149,185,255,.25);
  color: var(--fg); text-decoration:none;
  backdrop-filter: blur(6px);
  transition: transform .18s ease, background .18s ease;
}
.chip:hover{ transform: translateY(-2px); background: rgba(125,211,252,.10) }
.chip-count{
  min-width: 28px; text-align:center; font-size:12px; color: var(--fg);
  padding: 2px 8px; border-radius: 999px; border: var(--line);
  background: linear-gradient(90deg, rgba(125,211,252,.18), rgba(167,139,250,.16));
}

/* Produkt-Slider (Themen-Rails) */
.slider{
  display:grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 25%, 260px);
  gap:14px; padding: 10px 2px 2px;
  overflow-x: auto; scroll-snap-type: x mandatory;
}
.slider > *{ scroll-snap-align: start }
.slider::-webkit-scrollbar{ height:8px }
.slider::-webkit-scrollbar-thumb{ background: rgba(149,185,255,.3); border-radius: 8px }

/* Produktkarte – Neon-Glass */
.product-card{
  display:flex; flex-direction:column; color:inherit; text-decoration:none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(149,185,255,.22);
  border-radius: var(--r-md);
  overflow:hidden; backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-card:hover{
  transform: translateY(-3px);
  border-color: rgba(125,211,252,.45);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.product-card .thumb{
  background: linear-gradient(180deg, rgba(125,211,252,.10), transparent 60%);
  border-bottom: 1px solid rgba(149,185,255,.18);
}
.product-card .thumb img{
  width:100%; height:auto; object-fit:cover;
  transform: translateZ(0); will-change: transform;
}
.noimg{ color: var(--muted); height: 180px }

.p-body{ padding:12px; display:flex; flex-direction:column; gap:6px }
.p-brand{ font-size:12px; color: var(--muted) }
.p-title{
  font-weight:900; color: var(--fg); line-height:1.2;
  text-decoration:none;
}
.p-title:hover{ text-decoration: underline }
.p-stars{ font-size:12px; opacity:.95 }
.p-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px }
.p-price{
  font-weight:900; color: var(--fg);
  background: linear-gradient(90deg, rgba(125,211,252,.22), rgba(52,211,153,.22));
  padding:4px 8px; border-radius: 999px; border: 1px solid rgba(149,185,255,.25);
}

/* Masonry (Index-Feed) via CSS Columns */
.masonry{ column-count: 4; column-gap: 14px; margin-top: 8px }
@media (max-width: 1200px){ .masonry{ column-count: 3 } }
@media (max-width: 900px){  .masonry{ column-count: 2 } }
@media (max-width: 600px){  .masonry{ column-count: 1 } }
.masonry .product-card{ break-inside: avoid; margin: 0 0 14px }

/* Thumb-Ratios */
.ratio-1x1{ aspect-ratio: 1/1 }
.ratio-4x3{ aspect-ratio: 4/3 }
.ratio-3x4{ aspect-ratio: 3/4 }
.tile-sm .thumb{ aspect-ratio: 1/1 }
.tile-md .thumb{ aspect-ratio: 4/3 }
.tile-lg .thumb{ aspect-ratio: 16/10 }
.tile-xl .thumb{ aspect-ratio: 3/4 }

/* Pagination */
.pagination{
  display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap;
  padding: 18px 0 28px;
}
.page{
  padding:10px 14px; border-radius: 999px;
  border: var(--line); background: rgba(255,255,255,.06); color: var(--fg);
  text-decoration:none; backdrop-filter: blur(6px);
}
.page:hover{ background: rgba(125,211,252,.12) }
.page.active{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#04121a; font-weight:900; border: 1px solid rgba(255,255,255,.35);
}
.page.disabled{ opacity:.5; pointer-events:none }

/* ---------- Kategorie-Seite ---------- */
.grid{ display:grid; grid-template-columns: 260px 1fr; gap:16px }
@media (max-width: 1000px){ .grid{ grid-template-columns: 1fr } }

.filter .card-pad{ padding: 14px }
.filter h3{ margin:0 0 10px; font-size:14px; color: var(--fg) }
.filter .row{ display:flex; gap:8px; margin:8px 0 }
.filter .btn{ border-color: rgba(149,185,255,.25) }

.list-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom: var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
}
.list-title{ font-size:20px; font-weight:900 }
.sort select{
  padding:10px 12px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.06); color: var(--fg);
  border: 1px solid rgba(149,185,255,.28);
}

.gridp{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; padding:14px }
@media (max-width: 1100px){ .gridp{ grid-template-columns: repeat(3,1fr) } }
@media (max-width: 800px){  .gridp{ grid-template-columns: repeat(2,1fr) } }

.pcard{ /* alte Kartenklasse kompatibel */
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background: rgba(255,255,255,.06); border: 1px solid rgba(149,185,255,.22);
  border-radius: var(--r-md); overflow:hidden; backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, border-color .2s ease;
}
.pcard:hover{ transform: translateY(-3px); border-color: rgba(125,211,252,.45) }
.pimg{
  width:100%; aspect-ratio: 1/1;
  background: linear-gradient(180deg, rgba(125,211,252,.10), transparent 60%);
  border-bottom: 1px solid rgba(149,185,255,.18);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.pimg img{ max-width:100%; max-height:100%; object-fit:cover }
.pbody{ padding:12px; display:flex; flex-direction:column; gap:6px }
.pbrand{ font-size:12px; color: var(--muted) }
.ptitle{ font-size:14px; line-height:1.25; font-weight:800; color: var(--fg) }
.pmeta{ display:flex; align-items:center; justify-content:space-between }
.pprice{ font-weight:900 }
.prating{ font-size:12px; color: var(--fg) }

/* ---------- Produktseite ---------- */
.gallery{ padding:16px }
.hero{ display:flex; gap:16px; flex-wrap:wrap }
.hero-main{ display:flex; flex-direction:column }
.heroimg{
  width:100%; max-width:560px; aspect-ratio:1/1;
  background: rgba(255,255,255,.06);
  border: var(--line);
  border-radius: var(--r-md);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  backdrop-filter: blur(6px);
}
.heroimg img{ max-width:100%; max-height:100%; object-fit:contain }
.thumbs{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px }
.thumb{
  width:80px; height:80px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.06); border: 1px solid rgba(149,185,255,.25);
  overflow:hidden; cursor:pointer; transition: transform .15s ease, border-color .15s ease;
}
.thumb:hover{ transform: translateY(-2px); border-color: rgba(125,211,252,.45) }
.thumb img{ width:100%; height:100%; object-fit:cover }

.info{ flex:1; min-width:280px }
.brand{ font-size:12px; color: var(--muted) }
.title{ font-size:26px; font-weight:1000; letter-spacing:.2px; margin:6px 0 10px }
.price{ font-weight:900; font-size:20px; margin:8px 0 }
.badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px }
.badge{
  display:inline-flex; align-items:center; padding:5px 10px;
  border-radius: 999px; font-size:12px; color: var(--fg);
  background: linear-gradient(90deg, rgba(125,211,252,.16), rgba(167,139,250,.14));
  border: 1px solid rgba(149,185,255,.25);
}
.rating{ display:flex; gap:6px; align-items:center; margin:6px 0 10px; color: var(--fg) }

.section{ margin: 16px 0 }
.section h2{ font-size:16px; margin:0 0 8px; font-weight:900 }
.desc{ line-height:1.6; color: var(--fg) }

.table{ width:100%; border-collapse: collapse }
.table td{
  border-top: 1px solid rgba(149,185,255,.20);
  padding:9px 6px; vertical-align: top
}
.table td:first-child{ color: var(--muted); width:220px }

/* Buy-Box */
.buy{ position: sticky; top: 90px; align-self: start }
.buy .box{ padding:16px; display:flex; flex-direction:column; gap:10px }
.buy .subinfo{ font-size:12px; color: var(--muted) }
.affs{ display:flex; flex-direction:column; gap:8px }
.badge-row{ display:flex; gap:6px; flex-wrap:wrap }
.b-mini{
  font-size:11px; color: var(--fg);
  background: rgba(255,255,255,.06); border: 1px solid rgba(149,185,255,.25);
  padding:4px 8px; border-radius: 999px
}
@media (max-width:960px){ .buy{ position: static; top:auto } }

/* Ads – nur Container-Styling (Sichtbarkeit per PHP) */
.ad-top{ margin:10px 0; display:flex; justify-content:center }
.ad-side{ position: sticky; top: 90px; align-self: start }
.placeholder{
  display:flex; align-items:center; justify-content:center;
  color: var(--muted);
  background: rgba(255,255,255,.04); border: 1px dashed rgba(149,185,255,.28);
  border-radius: var(--r-md); padding: 12px
}
.ad-middle, .ad-bottom{ display:flex; justify-content:center; margin:16px 0 }

/* Mobile Price Bar */
.mobile-sticky-price{
  position: fixed; left:0; right:0; top:0; display:none;
  align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  background: linear-gradient(180deg, rgba(4,10,18,.95), rgba(4,10,18,.6));
  border-bottom: var(--line); backdrop-filter: blur(10px); z-index:50;
}
.mobile-sticky-price .mb-title{
  font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%
}
.mobile-sticky-price .mb-price{
  font-weight:900; background: linear-gradient(90deg, rgba(125,211,252,.22), rgba(52,211,153,.22));
  padding:4px 8px; border-radius:999px; border: 1px solid rgba(149,185,255,.25)
}
.mobile-sticky-price .mb-btn{
  padding:8px 12px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#04121a; font-weight:900; text-decoration:none; border: 1px solid rgba(255,255,255,.35)
}
.mobile-sticky-price.show{ display:flex }
@media (min-width:768px){ .mobile-sticky-price{ display:none !important } }

/* Cross-Sell */
.cross{ margin-top:16px }
.cross-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom: var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
}
.cross-title{ font-size:16px; font-weight:900 }

.cs-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:14px; padding:14px
}
@media (max-width:1100px){ .cs-grid{ grid-template-columns: repeat(3,1fr) } }
@media (max-width:800px){  .cs-grid{ grid-template-columns: repeat(2,1fr) } }

.cs-card{
  display:flex; flex-direction:column; color:inherit; text-decoration:none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(149,185,255,.22);
  border-radius: var(--r-md); overflow:hidden; backdrop-filter: blur(6px);
  transition: transform .2s ease, border-color .2s ease; box-shadow: var(--shadow-sm);
}
.cs-card:hover{ transform: translateY(-3px); border-color: rgba(125,211,252,.45) }
.cs-img{
  width:100%; aspect-ratio:1/1; background: linear-gradient(180deg, rgba(125,211,252,.10), transparent 60%);
  border-bottom: 1px solid rgba(149,185,255,.18);
  display:flex; align-items:center; justify-content:center; overflow:hidden
}
.cs-img img{ max-width:100%; max-height:100%; object-fit:cover }
.cs-body{ padding:12px; display:flex; flex-direction:column; gap:6px }
.cs-brand{ font-size:12px; color: var(--muted) }
.cs-title{ font-size:14px; font-weight:800; line-height:1.25 }
.cs-price{ font-weight:900 }

.cs-track{
  display:grid; grid-auto-flow: column; grid-auto-columns: 240px;
  gap:14px; padding:14px; overflow-x:auto; scroll-snap-type:x mandatory
}
.cs-track .cs-item{ scroll-snap-align: start }
.cs-track::-webkit-scrollbar{ height:8px }
.cs-track::-webkit-scrollbar-thumb{ background: rgba(149,185,255,.3); border-radius:8px }

/* Footer */
.site-footer{ margin: 24px 0 32px }
.foot-row{ display:flex; align-items:center; justify-content:space-between; gap:12px }
@media (max-width:700px){ .foot-row{ flex-direction:column; align-items:flex-start; gap:6px } }

/* ---------- Print ---------- */
@media print{
  .header, .site-header, .ad-top, .ad-side, .mobile-sticky-price { display:none !important }
  .btn{ display:none !important }
  .wrap{ max-width: 100% }
}

/* ===== Bridge & Robustheit für Footer-Dock ===== */

/* Footer-Dock darf nie verdeckt werden */
.mv-footer{
  z-index: 2147483647 !important;     /* „oberste“ Ebene */
}

/* Overlay blockiert nichts, solange unsichtbar */
.overlay{ pointer-events: none; }
.overlay.show{ pointer-events: auto; }

/* iOS Safari: ungewollte Stacking-Contexts entschärfen
   (nur falls anderswo transform/filter/perspective gesetzt sind) */
.site-header, .hero-band, .section, .wrap{
  transform: none; filter: none; perspective: none;
}