/*
Theme Name: Blocksy LU Child
Description: Clean custom LU child theme for Blocksy.
Author: Lu
Template: blocksy
Version: 1.5.2
*/

/* ===========================
   0) Grundregeln / Backgrounds
   - Homepage + Produktseiten bekommen Hintergrund
===========================*/
body.home {
  background: url("https://luis.online/wp-content/uploads/2025/11/Lu_Hintergrud-scaled.jpg") center center fixed no-repeat;
  background-size: cover;
  overflow-x: hidden;
}

/* Produktseiten: wir lassen transparent damit WooCommerce-Layout arbeiten kann */
body.single-product,
.woocommerce-page {
  background: transparent !important;
}

/* ===========================
   1) Header (transparent, kein weißer Kasten)
===========================*/
.site-header,
.ct-header,
.ct-header-main,
header,
header * {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.site-header::before,
.ct-header::before,
.ct-header-main::before,
header::before { content: none !important; }

/* Logo */
.site-logo img { max-height: 80px !important; width: auto !important; transition: transform .3s ease; }
body.sticky-header-active .site-logo img { transform: scale(.92); }

/* Fallback falls sticky nicht greift */
.ct-header { position: sticky !important; top: 0 !important; z-index: 9999; }

/* ===========================
   2) Footer (klar getrennt: desktop / sticky mobile / end footer)
===========================*/
/* Desktop footer */
#lu-footer-desktop { display: block; position: fixed; bottom: 0; width: 100%; text-align: center; background: transparent; padding: 14px 0; z-index: 900; }
#lu-footer-desktop a { color: white; font-size: 22px; font-weight: 700; padding: 12px 20px; text-decoration: none; }

/* Sticky mobile footer (Earlybirds) */
#lu-footer-mobile { display: none; position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); background: transparent; z-index: 9999; gap: 8px; padding: 12px 16px; align-items: center; justify-content: center; }
#lu-footer-mobile a { color: white; font-size: 24px; font-weight: 700; text-decoration: none; }

/* End footer (großer Kasten) */
#lu-footer-end { display: none; flex-direction: column; align-items: center; justify-content: center; background: #002366; color: white; padding: 28px 16px; width: 100%; }
#lu-footer-end a { display: block; font-size: 22px; font-weight: 700; margin: 2px 0; text-align: center; color: white; text-decoration: none; }

/* Divider + Danke-Block */
#lu-footer-end .footer-spacer { height: 2em; }
#lu-footer-end .footer-divider { width: 100%; height: 2px; background: white; margin: 1em 0; }
#lu-footer-end .footer-thank { text-align: center; font-size: 20px; font-weight: 600; margin-top: 1em; }
#lu-footer-end .footer-smile { font-size: 22px; margin-top: 0.3em; }
#lu-footer-end .footer-bottom-space { height: 4em; }

/* Breakpoints */
@media (max-width: 1024px) {
  #lu-footer-desktop { display: none !important; }
  #lu-footer-mobile { display: flex !important; }
  #lu-footer-end { display: flex !important; }
}
@media (min-width: 1025px) {
  #lu-footer-desktop { display: block !important; }
  #lu-footer-mobile, #lu-footer-end { display: none !important; }
}

/* JS util: .lu-hide (wird von JS gesetzt, versteckt sticky wenn end-footer sichtbar) */
.lu-hide { display: none !important; }

/* ===========================
   3) Startseite – Artikel Grid + Rotation (PlayStation Style)
   - untereinander (column)
   - Y-Achse Rotation
   - Geschwindigkeit einstellbar über --lu-rot-sec
===========================*/
:root {
  --lu-rot-sec: 5.5s; /* ändere hier die Rotationsdauer (z.B. 5.5s) */
}

.lu-articles-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.lu-article-card {
  width: 320px; /* anpassen nach Bedarf */
  text-align: center;
  cursor: pointer;
  position: relative;
}

/* Bild – Y-Achse Rotation, aber 2D bleibt sichtbar (backface hidden) */
.lu-article-card img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: lu-rotateY var(--lu-rot-sec) linear infinite;
}

/* Stoppt beim Hover (nur Desktop) */
@media (hover: hover) {
  .lu-article-card:hover img { animation-play-state: paused !important; transform: scale(1.03); filter: drop-shadow(0 6px 18px rgba(0,0,0,0.25)); }
}

/* Keyframes (sichtbar bleiben, keine Ausblendung) */
@keyframes lu-rotateY {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

/* Titel und Kurzbeschreibung ausblenden (du wolltest das) */
.lu-article-card h3, .lu-article-card p { display: none; }

/* Responsive */
@media (max-width: 768px) {
  .lu-article-card { width: 260px; }
}

/* ===========================
   4) Warenkorb-Icon (Header / Mobile)
===========================*/
.lu-cart-icon { position: absolute; top: 12px; right: 18px; display: none; z-index: 9999; }
.lu-cart-icon img { width: 28px; height: auto; display: block; }
.lu-cart-count { position: absolute; top: -8px; right: -8px; background: #fff; color:#000; border-radius:999px; padding:2px 6px; font-size:12px; border:1px solid #000; }
@media (max-width:768px) { .lu-cart-icon{ position: fixed; top:12px; right:12px } .lu-cart-icon img{ width:24px } }

/* ===========================
   5) WooCommerce / Produktseite Fixes (sicherstellen Preis + Add-to-cart sichtbar)
===========================*/


/* --- Produktseite minimal sichtbar machen --- */

.single-product .product,
.single-product .summary,
.single-product .images {
    opacity: 1 !important;
    visibility: visible !important;
}

.single-product .summary * {
    opacity: 1 !important;
    visibility: visible !important;
}