/*
Theme Name: Alviran — Hello Elementor Child
Theme URI: https://alviran.net
Description: Futuristisches Violet × Magenta Theme (minimal & edel) mit einheitlichem Hintergrund für alle Seiten.
Author: Alviran
Template: hello-elementor
Version: 1.1.1
Text Domain: alviran-child
*/

/* =========================
   Design Tokens (einmalig, inkl. SureCart)
   ========================= */
:root{
  /* Primäre Farbtöne */
  --royal-1:#8b5cf6;
  --royal-2:#c084fc;
  --trust-1:#ff2e92;  /* nur für Akzent-Elemente wie Badges/CTAs */
  --trust-2:#ff77e9;
  --hot-1:#f59e0b;
  --hot-2:#facc15;

  /* Flächen & Texte */
  --bg:#0a0a0f;
  --panel:#14121a;
  --line:#242036;
  --text:#f3f1fa;
  --muted:#c7c1d9;

  /* Abstände & Radii */
  --r:16px;
  --shadow:0 10px 28px rgba(0,0,0,.36);
  --maxw:1220px;

  /* SureCart Tokens (aus zweitem :root hierher gezogen) */
  --sc-color-primary-500: var(--royal-1);
  --sc-color-primary-text: #ffffff;
  --sc-color-accent-500: var(--royal-2);
  --sc-surface: rgba(255,255,255,.05);
  --sc-border-color: rgba(255,255,255,.14);
  --sc-border-radius-medium: 12px;
  --sc-input-bg: #11101a;
  --sc-input-color: var(--text);
  --sc-input-border-color: rgba(255,255,255,.2);
  --sc-button-radius: 12px;
}

/* =========================
   Basislayout & Typografie
   ========================= */
html,body{
  margin:0;
  min-height:100%;
  color:var(--text);
  font-family:"Plus Jakarta Sans", system-ui, Arial, sans-serif;
  font-size:16px;
  line-height:1.6;

  /* Einheitlicher Wallpaper-Hintergrund für alle Seiten
     NOTE: background-attachment: fixed entfernt (iOS/Perf-Jank) */
  background-color:var(--bg);
  background-image:
    radial-gradient(45% 35% at 50% -10%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(40% 30% at 80% 110%, rgba(139,92,246,.12), transparent 60%),
    linear-gradient(180deg, #0e0e15 0%, #0b0b12 62%, #0a0a0f 100%);
  background-repeat:no-repeat;
  background-position:center top, right bottom, center;
  background-size:140% 120%, 120% 120%, cover;
  /* background-attachment:fixed;  <-- entfernt */
}

h1,h2,h3,
.h1,.h2,.h3,
.glow-title,
.p-title{
  font-family:"Outfit","Plus Jakarta Sans",system-ui,sans-serif;
  letter-spacing:-0.01em;
}

.h1,.glow-title{font-weight:700; line-height:1.15;}
.h2{font-weight:600; line-height:1.2;}
.p-title{font-weight:600; font-size:1.06rem;}

/* Transparente Wrapper – keine eigenen Hintergründe */
.site,.site-container,.elementor,.elementor-section,.elementor-container,.elementor-column,.page,#page,#content{
  background:transparent !important;
  box-shadow:none;
  border:none;
}

/* =========================
   Header (Glass)
   ========================= */
.alv-header{
  position:sticky;
  top:clamp(6px, env(safe-area-inset-top, 0) + 6px, 16px);
  z-index:1000;
  margin:12px auto;
  max-width:min(1280px,94vw);
  border-radius:16px;
  background:rgba(16,14,24,0.42);
  backdrop-filter:blur(12px) saturate(1.35);
  -webkit-backdrop-filter:blur(12px) saturate(1.35);
  box-shadow:0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  border:1px solid rgba(255,255,255,.05);
  overflow:hidden;
}
.alv-header::before{
  content:"";
  position:absolute; inset:0; border-radius:16px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.alv-header-inner{
  height:64px;
  padding:0 clamp(16px, 2.2vw, 32px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:transparent;
}
.alv-brand img{ height:48px; width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.3)); }

/* Navigation */
.alv-menu{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.alv-menu > li > a{
  color:var(--text);
  font:500 15px/1.2 system-ui,-apple-system,Segoe UI,Inter,Roboto,sans-serif;
  text-decoration:none; position:relative; padding:8px 0; transition:opacity .2s ease;
}
.alv-menu > li > a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0%;
  background:linear-gradient(90deg, var(--royal-1), var(--royal-2));
  border-radius:2px; transition:width .25s ease;
}
.alv-menu > li > a:hover{ opacity:.92; }
.alv-menu > li > a:hover::after,
.alv-menu .current-menu-item > a::after{ width:100%; }

/* Discord CTA */
.alv-discord{
  display:flex; align-items:center; gap:8px; padding:8px 16px;
  font:600 14px/1 system-ui, Inter, sans-serif;
  color:#0b0716; text-decoration:none; border-radius:999px;
  background:linear-gradient(135deg, var(--royal-1), var(--royal-2));
  box-shadow:0 0 8px rgba(139,92,246,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.alv-discord:hover{ transform:translateY(-2px); box-shadow:0 0 18px rgba(139,92,246,.55); }

/* Mobile nav */
.alv-burger{ display:none; width:40px; height:40px; border:none; background:transparent; padding:0; margin:0; border-radius:10px; cursor:pointer; }
.alv-burger:focus-visible{ outline:2px solid var(--royal-1); outline-offset:2px; }
.alv-burger-bar{ display:block; width:22px; height:2px; margin:5px auto; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }

.alv-mobile{
  display:none;
  background:rgba(20,16,30,.55);
  backdrop-filter:blur(10px) saturate(1.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  border-top:1px solid rgba(255,255,255,.06);
}
.alv-mobile-menu{ list-style:none; margin:0; padding:12px 16px; display:grid; gap:8px; }
.alv-mobile-menu a{
  display:block; padding:12px 8px; border-radius:10px; color:var(--text);
  text-decoration:none; font-weight:600; transition:background .15s ease;
}
.alv-mobile-menu a:hover{ background:rgba(255,255,255,.06); }
.alv-mobile-discord{
  display:block; margin:12px 16px; text-align:center; padding:12px 14px; border-radius:12px;
  background:linear-gradient(135deg, var(--royal-1), var(--royal-2)); color:#0b0716; text-decoration:none; font-weight:700;
}

@media (max-width:980px){
  .alv-menu-wrap{ display:none; }
  .alv-discord{ display:none; }
  .alv-burger{ display:block; }
}

/* =========================
   Hero Section
   ========================= */
.glow-title{
  font-size:clamp(32px,5vw,56px);
  font-weight:700; margin:0 0 6px;
  background:linear-gradient(90deg, var(--royal-1) 0%, var(--royal-2) 70%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 14px rgba(139,92,246,.18);
}

.alv-hero{
  max-width:860px; margin:34px auto 26px; padding:28px 26px; border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1); box-shadow:var(--shadow); text-align:center;
}
.alv-hero h1{
  font-size:40px; line-height:1.15; margin:0 0 12px; letter-spacing:.2px;
  background:linear-gradient(90deg, var(--royal-2) 0%, var(--royal-1) 85%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.alv-hero p{ color:var(--muted); margin:0 0 14px; }
.alv-badges{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:10px; }
.badge{
  font-size:12px; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#eae5ff;
}
.badge.strong{ background:linear-gradient(90deg, var(--royal-1), var(--royal-2)); color:#0b0716; font-weight:700; }

/* =========================
   Section Titles
   ========================= */
.section-title{ max-width:var(--maxw); margin:32px auto 14px; font-size:18px; color:#d9d3ea }
.section-title strong{ color:#fff }

/* =========================
   Card / Grid / Product
   ========================= */
.alv-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
@media(max-width:1024px){ .alv-grid{ grid-template-columns:repeat(2, 1fr) } }
@media(max-width:640px){ .alv-grid{ grid-template-columns:1fr } }

.alv-card{
  background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.26);
  display:flex; flex-direction:column; gap:10px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.alv-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,.32); border-color:rgba(192,132,252,.36); }
.alv-card h4{ font-size:15px; margin:8px 0 4px; letter-spacing:-0.01em; font-weight:600 }
.alv-card .price{ margin-top:auto; color:#fff; font-weight:600 }
.alv-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; padding:6px 10px;
  border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06);
}

/* =========================
   Steps / How it works
   ========================= */
.alv-steps{ max-width:var(--maxw); margin:8px auto 0; display:flex; gap:12px; flex-wrap:wrap }
.alv-step{
  display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  padding:10px 14px; border-radius:12px; color:#eae5ff;
}
.step-no{
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.9rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.step-sub{ font-weight:500; color:var(--muted) }

/* =========================
   Footer
   ========================= */
.alv-footer{ background:transparent; color:var(--text); padding:40px 20px 24px; margin-top:30px }
.alv-footer-top{
  max-width:var(--maxw); margin:0 auto 22px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
}
@media(max-width:900px){ .alv-footer-top{ grid-template-columns:repeat(2, 1fr) } }
@media(max-width:520px){ .alv-footer-top{ grid-template-columns:1fr } }
.footer-card h3{ font-size:14px; margin:0 0 10px; color:#ded9f3 }
.footer-card p,.footer-card a,.footer-card li{ font-size:13px; color:#cfc9e4 }
.footer-card ul{ list-style:none; padding:0; margin:0 }
.footer-card li{ margin:6px 0 }
.social-icons{ display:flex; gap:10px; font-size:18px }
.alv-footer-bottom{
  max-width:var(--maxw); margin:0 auto; border-top:1px solid rgba(255,255,255,.1);
  padding-top:14px; text-align:center; color:#cfc9e4; font-size:13px;
}

/* =========================
   WooCommerce Anpassungen
   ========================= */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; padding-left:0;
}
@media(max-width:1024px){ .woocommerce ul.products{ grid-template-columns:repeat(2, 1fr) } }
@media(max-width:640px){ .woocommerce ul.products{ grid-template-columns:1fr } }
.woocommerce ul.products li.product{
  list-style:none; background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.26);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.30); border-color:rgba(192,132,252,.28);
}
.woocommerce ul.products li.product .price{ color:#fff; font-weight:600 }
.woocommerce div.product{
  background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:20px; box-shadow:0 8px 22px rgba(0,0,0,.26);
}
.woocommerce button.button,
.woocommerce a.button{
  background:linear-gradient(90deg, var(--royal-1), var(--royal-2)); color:#0b0716; border:none; border-radius:12px; padding:10px 14px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; transition:transform .2s ease, box-shadow .2s ease;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(139,92,246,.32) }

/* =========================
   SureCart Anpassungen
   ========================= */
/* Buttons inside SureCart – unify gradient and hover */
.sc-button,.sc-button--primary{
  background:linear-gradient(90deg, var(--royal-1), var(--royal-2)) !important; color:#fff !important;
  font-weight:600; border-radius:12px !important; padding:12px 20px !important; text-align:center; display:inline-block;
  transition:transform .2s ease, box-shadow .2s ease;
}
.sc-button:hover,.sc-button--primary:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(139,92,246,.32) }

/* Buttons within web components (Shadow DOM) */
sc-buy-button::part(button), sc-order-submit::part(button){
  background:linear-gradient(90deg, var(--royal-1), var(--royal-2)) !important; color:#fff !important; border:0 !important;
  border-radius:12px !important; padding:12px 18px !important; font-weight:600 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  transition:transform .2s ease, box-shadow .2s ease;
}
sc-buy-button::part(button):hover, sc-order-submit::part(button):hover{
  transform:translateY(-2px); box-shadow:0 8px 22px rgba(139,92,246,.32);
}
sc-buy-button::part(button)[disabled], sc-order-submit::part(button)[disabled]{ opacity:.5 !important; }

/* SureCart inputs */
.alv-checkout .sc-input,
.alv-checkout .sc-input input,
.alv-checkout .sc-input textarea,
.alv-checkout .sc-select,
.alv-checkout .sc-select select{
  background: var(--sc-input-bg) !important;
  color: var(--sc-input-color) !important;
  border-color: var(--sc-input-border-color) !important;
  border-radius:12px; padding:10px 12px;
}
.alv-checkout ::placeholder{ color:#d8d2e7 !important; opacity:.9 }
.alv-checkout sc-divider{ opacity:.55 }

/* SureCart panes & grid */
.alv-checkout .alv-checkout-grid{
  background:
    radial-gradient(60vw 60vw at 10% -10%, rgba(139,92,246,.12), transparent 60%),
    radial-gradient(60vw 60vw at 110% 110%, rgba(192,132,252,.12), transparent 60%),
    var(--bg);
  padding:24px; color:var(--text);
}
.alv-checkout .alv-pane{
  background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.alv-checkout .has-background,.alv-checkout .has-white-background-color{ background:transparent }

/* Line items */
sc-line-items, sc-line-items *{ color: var(--text) }
sc-line-items .sc-line-item__image, sc-line-items img{
  width:48px; height:48px; object-fit:cover; border-radius:8px; display:block;
}
sc-line-items .sc-line-item__title{ font-weight:600 }

/* SureCart product cards */
.wp-block-surecart-product-template .wp-block-group > .wp-block-group{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:0; box-shadow:var(--shadow); transition:.25s ease;
}
.wp-block-surecart-product-template .wp-block-group > .wp-block-group:hover{
  transform:translateY(-4px); border-color:rgba(139,92,246,.5); box-shadow:0 16px 40px rgba(139,92,246,.22);
}

/* ACHTUNG: Attribut-Selektor ist fragil, wenn möglich Klasse vergeben */
.wp-block-cover[style*="aspect-ratio:3/4"]{
  border-radius:18px 18px 0 0 !important; overflow:hidden;
}
.wp-block-cover[style*="aspect-ratio:3/4"]::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35)); pointer-events:none;
}

.wp-block-surecart-product-quick-view-button{
  margin:10px; margin-left:auto;
  background:#0a0a0f !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important; border-radius:999px !important;
  padding:.45rem .7rem !important; opacity:.95; transition:.2s ease;
}
.wp-block-surecart-product-quick-view-button:hover{ opacity:1; transform:translateY(-1px); border-color:rgba(192,132,252,.6) !important; }
.wp-block-surecart-product-sale-badge{
  background:linear-gradient(90deg,var(--royal-1),var(--royal-2)) !important; color:#0b0716 !important; font-weight:700;
  border-radius:999px !important; padding:.35rem .6rem !important; margin:10px !important; box-shadow:0 6px 20px rgba(139,92,246,.28);
}
.wp-block-surecart-product-title{
  color:var(--text) !important; line-height:1.25 !important;
  margin:8px 12px 2px !important; padding:0 4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  /* Future-friendly: */
  line-clamp: 2;
}
.wp-block-surecart-product-list-price{
  color:#fff !important; font-weight:700 !important; margin:0 12px 12px !important; padding:0 4px;
}
.wp-block-surecart-product-scratch-price{ color:var(--muted) !important; opacity:.65; text-decoration:line-through }
.wp-block-surecart-product-template .wp-block-group > .wp-block-group > .wp-block-group:last-child{ padding:6px 8px 12px }

/* Pagination */
.wp-block-surecart-product-pagination{
  display:flex; justify-content:center; gap:8px; margin:28px 0 10px;
}
.wp-block-surecart-product-pagination a,
.wp-block-surecart-product-pagination span{
  display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px;
  border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07); color:var(--text); transition:.2s ease;
}
.wp-block-surecart-product-pagination a:hover{
  border-color:rgba(192,132,252,.6); box-shadow:0 8px 22px rgba(139,92,246,.22);
}
.wp-block-surecart-product-pagination .is-active,
.wp-block-surecart-product-pagination .page-numbers.current{
  background:linear-gradient(90deg,var(--royal-1),var(--royal-2)); color:#0b0716; font-weight:700; border-color:transparent;
}

/* Responsive adjustments for SureCart lists */
@media(max-width:1024px){
  .wp-block-surecart-product-list-content{ flex-wrap:wrap }
  .wp-block-surecart-product-list-sidebar{ width:100%; order:2; top:0 }
}
@media(max-width:640px){
  .wp-block-surecart-product-list .wp-block-group[style*="justify-content:space-between"]{ flex-wrap:wrap }
  .wp-block-surecart-product-list-search{ max-width:none }
}

/* =========================
   Focus / Accessibility
   ========================= */
:where(a,button,input,select):focus-visible{
  outline:none; box-shadow:0 0 0 2px rgba(139,92,246,.55); border-radius:12px;
}

/* Mobile Tap-Highlight nur auf interaktive Elemente (statt globalem *) */
:where(a,button,[role="button"],input,select,textarea){
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Fallback-Focus für Browser ohne :focus-visible */
:where(a.btn,button.btn,.faq-title):focus{
  outline:none; box-shadow:0 0 0 3px rgba(139,92,246,.55); border-radius:12px;
}

/* Optional: Visited Farbe statt komplett zu unterdrücken */
/* a:visited{ color: inherit } */

/* Historisch – kann entfernt werden, schadet aber nicht */
button::-moz-focus-inner{ border:0 }

/* =========================
   Dual-Tone Waves Background (Violet × Magenta)
   ========================= */
.bg-waves{
  position:fixed; inset:-5% -5% -5% -5%; z-index:0; pointer-events:none; overflow:hidden; filter:blur(12px);
}
.bg-waves::before,
.bg-waves::after{
  content:""; position:absolute; width:160vw; height:160vh; left:-30vw; top:-30vh; opacity:.55; will-change:transform, filter;
}
/* Violet */
.bg-waves::before{
  background:
    radial-gradient(1100px 600px at 18% 28%, rgba(139,92,246,0.32) 0%, rgba(139,92,246,0) 60%),
    radial-gradient(900px 520px  at 82% 72%, rgba(192,132,252,0.26) 0%, rgba(192,132,252,0) 60%),
    radial-gradient(700px 420px  at 50% 90%, rgba(139,92,246,0.18) 0%, rgba(139,92,246,0) 65%);
  animation:waveA 28s ease-in-out infinite alternate; transform:rotate(8deg); filter:saturate(112%);
}
/* Magenta */
.bg-waves::after{
  background:
    radial-gradient(1200px 640px at 78% 24%, rgba(255,46,146,0.22) 0%, rgba(255,46,146,0) 62%),
    radial-gradient(800px 500px  at 24% 78%, rgba(255,119,233,0.18) 0%, rgba(255,119,233,0) 60%);
  animation:waveB 36s ease-in-out infinite alternate-reverse; transform:rotate(-6deg); opacity:.42;
}

@keyframes waveA{
  0%{ transform:translate3d(0,0,0) rotate(8deg) scale(1) }
  100%{ transform:translate3d(3%,-2%,0) rotate(12deg) scale(1.08) }
}
@keyframes waveB{
  0%{ transform:translate3d(0,0,0) rotate(-6deg) scale(1) }
  100%{ transform:translate3d(-3%,2%,0) rotate(-10deg) scale(1.06) }
}

/* Content über die Waves legen */
main,.surecart-page,.sc-block,.entry-content{ position:relative; z-index:1 }

/* Motion-Reduce: Animationskosten minimieren */
@media (prefers-reduced-motion: reduce){
  .bg-waves::before,.bg-waves::after{ animation:none }
}


/* ===== SURECART PRODUCT PAGE – HINTERGRUND ZURÜCK AUF TRANSPARENT ===== */

/* 1) Exakte Wrapper aus deinem Snippet */
.wp-block-group.is-layout-constrained.sc-template-wrapper,
.wp-block-group.alignwide.sc-template-container,
.wp-site-blocks,
.alignwide.wp-block-surecart-product-page,
.wp-block-columns.alignwide,
.wp-block-column.is-layout-flow {
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Alles, was in SureCart gern Flächen färbt */
.wp-block-surecart-product-page :where(.wp-block-group[style*="background"],
                                       .wp-block-group.has-background,
                                       .wp-block-cover,
                                       .wp-block-cover__background,
                                       .wp-block-cover__image-background,
                                       .wp-block-cover__video-background){
  background: transparent !important;
}
.wp-block-surecart-product-page :where(.wp-block-cover__image-background,
                                       .wp-block-cover__video-background){ opacity:0 !important; }

/* 3) Block-Themes setzen oft den Seiten-Wrapper */
:where(.wp-site-blocks, .wp-block-post-content, .entry-content){
  background: transparent !important;
}

/* 4) Sicherheitsnetz – surecart-spezifische Container & Karten */
.wp-block-surecart-product-template > .wp-block-group { background: transparent !important; }
.sc-card, .alv-pane { background: var(--panel) !important; } /* Nur gezielte Pane dunkler, nicht die ganze Seite */

/* 5) Falls irgendwo inline ein Farbverlauf gesetzt wurde */
.wp-block-surecart-product-page *[style*="background"]{
  background: transparent !important;
}


/* Nur SureCart-Produktseiten: Theme-Verlauf am <body> entfernen
   (damit dein globales Wallpaper sichtbar ist) */
body.sc_product-template-page{
  background: none !important;        /* entfernt den linear-gradient */
  background-color: transparent !important;
}

/* Falls ein Pseudo-Element den Body einfärbt (manche Themes tun das) */
body.sc_product-template-page::before,
body.sc_product-template-page::after{
  content: none !important;
}

/* Sicherheit: häufige Wrapper auf Produktseiten nicht einfärben */
body.sc_product-template-page :where(.wp-site-blocks,
  .wp-block-group.has-background,
  .wp-block-cover,
  .wp-block-cover__background,
  .wp-block-cover__image-background,
  .wp-block-cover__video-background){
  background: transparent !important;
}
























/* ==== FORCE MOBILE FULL BAR (überstimmt frühere Regeln) ==== */
@media (max-width: 560px){
  #alvHypeCoupon.alv-hype-wrap{
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: calc(100% - 12px) !important;
    z-index: 2147483647 !important; /* nach oben */
  }
  #alvHypeCoupon .alv-card{ border-radius: 20px !important; }
  #alvHypeCoupon .alv-row{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 14px !important;
    text-align: left !important;
  }

  /* Titel + Badge sichtbar & umbruchfähig */
  #alvHypeCoupon .alv-title{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }
  #alvHypeCoupon .alv-title .alv-badge{
    display: inline-flex !important;
    height: 24px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  /* Alles untereinander, groß & klickbar */
  #alvHypeCoupon .alv-cta{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Timer sichtbar (falls irgendwo versteckt wurde) */
  #alvHypeCoupon .alv-timer{
    display: inline-flex !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-width: 1px !important;
  }

  /* Code-Pill ERZWINGEN (häufig war der ausgeblendet) */
  #alvHypeCoupon .alv-code{
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    font-size: 15px !important;
    padding: 10px 14px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Button groß */
  #alvHypeCoupon .alv-btn{
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* Close-Button erreichbar */
  #alvHypeCoupon .alv-close{
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    padding: 6px 8px !important;
  }

  /* Deko auf XS abdämpfen, bessere Lesbarkeit */
  #alvHypeCoupon .alv-bg{ opacity: .6 !important; }
  #alvHypeCoupon .alv-card::before{ display: none !important; }
}

@media (max-width: 400px){
  #alvHypeCoupon .alv-row{ gap: 10px !important; padding: 12px 12px !important; }
  #alvHypeCoupon .alv-title{ font-size: 15px !important; }
  #alvHypeCoupon .alv-timer{ font-size: 13px !important; }
  #alvHypeCoupon .alv-code{ font-size: 14px !important; }
}

/* ==== FORCE MOBILE FULL BAR (überstimmt frühere Regeln) ==== */
@media (max-width: 560px){
  #alvHypeCoupon.alv-hype-wrap{
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: calc(100% - 12px) !important;
    z-index: 2147483647 !important; /* nach oben */
  }
  #alvHypeCoupon .alv-card{ border-radius: 20px !important; }
  #alvHypeCoupon .alv-row{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 14px !important;
    text-align: left !important;
  }

  /* Titel + Badge sichtbar & umbruchfähig */
  #alvHypeCoupon .alv-title{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }
  #alvHypeCoupon .alv-title .alv-badge{
    display: inline-flex !important;
    height: 24px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  /* Alles untereinander, groß & klickbar */
  #alvHypeCoupon .alv-cta{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Timer sichtbar (falls irgendwo versteckt wurde) */
  #alvHypeCoupon .alv-timer{
    display: inline-flex !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-width: 1px !important;
  }

  /* Code-Pill ERZWINGEN (häufig war der ausgeblendet) */
  #alvHypeCoupon .alv-code{
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    font-size: 15px !important;
    padding: 10px 14px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Button groß */
  #alvHypeCoupon .alv-btn{
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* Close-Button erreichbar */
  #alvHypeCoupon .alv-close{
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    padding: 6px 8px !important;
  }

  /* Deko auf XS abdämpfen, bessere Lesbarkeit */
  #alvHypeCoupon .alv-bg{ opacity: .6 !important; }
  #alvHypeCoupon .alv-card::before{ display: none !important; }
}

@media (max-width: 400px){
  #alvHypeCoupon .alv-row{ gap: 10px !important; padding: 12px 12px !important; }
  #alvHypeCoupon .alv-title{ font-size: 15px !important; }
  #alvHypeCoupon .alv-timer{ font-size: 13px !important; }
  #alvHypeCoupon .alv-code{ font-size: 14px !important; }
}
/* ==== MOBILE: stack all elements vertically (force) ==== */
@media (max-width:560px){
  #alvHypeCoupon.alv-hype-wrap{
    width: calc(100% - 12px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  /* Column layout */
  #alvHypeCoupon .alv-row{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 14px !important;
    text-align: left !important;
  }

  /* Badge and title on separate lines */
  #alvHypeCoupon .alv-title{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }
  #alvHypeCoupon .alv-title .alv-badge{
    display: inline-flex !important;
    height: 24px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    width: max-content !important;
  }

  /* Kill the inline margin-left:auto on the CTA row */
  #alvHypeCoupon .alv-cta{
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important; /* one per row */
    gap: 10px !important;
  }

  /* Make timer/code/button full width & centered */
  #alvHypeCoupon .alv-timer,
  #alvHypeCoupon .alv-code,
  #alvHypeCoupon .alv-btn{
    width: 100% !important;
    justify-content: center !important;
  }
  #alvHypeCoupon .alv-timer{ display: inline-flex !important; padding: 10px 12px !important; font-size: 14px !important; }
  #alvHypeCoupon .alv-code{ display: flex !important; padding: 10px 14px !important; font-size: 15px !important; }
  #alvHypeCoupon .alv-btn{ min-height: 48px !important; font-size: 16px !important; }

  /* Close button reachable */
  #alvHypeCoupon .alv-close{
    position: absolute !important; top: 8px !important; right: 8px !important; padding: 6px 8px !important;
  }

  /* Tone down decor for readability */
  #alvHypeCoupon .alv-card::before{ display: none !important; }
  #alvHypeCoupon .alv-bg{ opacity: .6 !important; }
}

@media (max-width:400px){
  #alvHypeCoupon .alv-title{ font-size: 15px !important; }
  #alvHypeCoupon .alv-timer{ font-size: 13px !important; }
  #alvHypeCoupon .alv-code{ font-size: 14px !important; }
}

.alv-header .site-logo,
.custom-logo {
  max-height: 48px;
  height: auto;
  width: auto;
  display: block;
}