/*
 * Global stylesheet for the NURDAN Production website.
 * Extracted from the original single‑file version and updated to use
 * the new `medien` directory for static assets. This file defines
 * colours, typography, layout primitives and component styling
 * used across all pages (home, products, login, register).
 */

/* Colour palette and sizing variables */
:root{ --bg:#0d0e12; --bg-2:#111318; --card:#14161d; --card-2:#101319; --border:#23262d; --muted:#a8b0bd; --text:#eceff4; --text-dim:#cfd6df; --primary:#3b82f6; --primary-2:#06b6d4; --radius:18px; --shadow:0 10px 35px rgba(0,0,0,.45); --maxw:1200px; }
*{box-sizing:border-box}
body{margin:0;color:var(--text);background:linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(10px);background:rgba(13,14,18,.7);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:900}
/* Updated logo path to point to the new media directory */
.brand-logo{width:42px;height:42px;border-radius:12px;background:#101425 url('medien/logo.png') center/60% no-repeat;border:1px solid #1e2748}
nav ul{list-style:none;display:flex;gap:.4rem;margin:0;padding:0}
nav a{padding:.6rem .9rem;border-radius:12px;color:var(--text-dim);transition:background .2s,color .2s}
nav a:hover{background:#1a1f29;color:#fff}

/* Mobile menu toggle (hamburger) button */
.menu-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.8rem;cursor:pointer;padding:.3rem;margin-left:auto}

.muted{color:var(--muted)}
h1,h2{font-weight:800;margin:0 0 12px}
.section{padding:48px 0}
.card{background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.78rem 1.05rem;border-radius:12px;border:1px solid #32406a;background:#0e1428;color:#e2e8f0;font-weight:800;cursor:pointer;transition:background .2s}
.btn:hover{background:#131c3a}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;color:#fff}
.btn-primary:hover{background:linear-gradient(135deg,var(--primary-2),var(--primary))}

/* HOME */
.hero{
  /* Center the hero content within a maximum width like other sections. */
  padding:88px 20px 64px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2rem;
  max-width:var(--maxw);
  margin-left:auto;
  margin-right:auto;
}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.highlight{background:linear-gradient(135deg,var(--primary),var(--primary-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-text{flex:1;min-width:280px}
.hero-img{flex:1;min-width:260px;display:flex;justify-content:center}
.hero-img img{max-width:380px;width:100%;filter:saturate(1.3) brightness(1.15)}

/* Marketing cards on the home page */
.marketing{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:3rem}
.marketing-card{display:flex;gap:.8rem;align-items:flex-start;background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;min-height:120px}
/* Marketing icons set to 48px for consistency */
.marketing-card img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.marketing-card .mk-title{font-weight:700;font-size:1.05rem;margin-bottom:.15rem}
.marketing-card .mk-desc{font-size:.88rem;color:var(--text-dim);line-height:1.4}

/* References section */
.references{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin-top:3rem}
.reference-card{display:flex;gap:.8rem;align-items:flex-start;background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
.reference-card img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.reference-card .ref-title{font-weight:700;font-size:1.1rem;margin-bottom:.2rem}
.reference-card .ref-artist{font-size:.85rem;color:var(--primary);margin-bottom:.35rem}
.reference-card .ref-quote{font-style:italic;color:var(--text-dim);font-size:.9rem;line-height:1.4}

/* Contact form styling */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
  max-width:480px;
  margin:0 auto;
}
.contact-form .form-group{
  display:flex;
  flex-direction:column;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:.65rem .8rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card-2);
  color:var(--text);
  font-size:.95rem;
  resize:vertical;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:var(--muted);
}
.contact-response{
  color:var(--primary);
  font-weight:600;
  font-size:1rem;
}

/* Product grid and cards */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.cat{cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:.3s box-shadow ease,.3s transform ease;min-height:360px}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cat .thumb{height:30%;min-height:120px;width:100%;overflow:hidden;position:relative}
.cat .thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* Fox overlay on product thumbnails */
.cat .thumb::after{content:'';position:absolute;bottom:4px;right:4px;width:36px;height:36px;background-image:url('medien/fox_cartoon.png');background-size:contain;background-repeat:no-repeat;opacity:0.8;pointer-events:none}
.cat .content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 1rem 1rem}
.cat .title{font-weight:800;margin:.6rem 0 .1rem}
.cat .tag{font-size:.9rem;color:var(--text-dim);margin-bottom:.4rem}
.cat .desc{font-size:.95rem;color:#dbe3ff;background:linear-gradient(180deg,rgba(59,130,246,.08),rgba(6,182,212,.08));border:1px solid rgba(99,102,241,.25);padding:.5rem .6rem;border-radius:10px}

/* Disabled product category card styles
 * When a product is not available (PRODUCTS.available === false), the cat element
 * receives the `disabled` class. We dim the entire card, remove its hover effect,
 * hide the tag and description, and darken the thumbnail image. A label is
 * positioned within the card to indicate that the product is unavailable. */
.cat.disabled{
  opacity:.45;
  cursor:default;
  pointer-events:none;
  filter:grayscale(80%);
  position:relative;
}
.cat.disabled:hover{
  transform:none;
  box-shadow:none;
}
.cat.disabled .unavailable-label{
  position:absolute;
  bottom:1rem;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.6);
  color:#fff;
  padding:.25rem .6rem;
  border-radius:6px;
  font-size:.8rem;
  font-weight:600;
  pointer-events:none;
  text-transform:uppercase;
}
.cat.disabled .tag,
.cat.disabled .desc{
  display:none;
}
.cat.disabled .thumb img{
  filter:grayscale(1) brightness(0.4);
}

/* Product detail layout */
.prod{
  /* Use a two‑column grid where the details take up more space than the gallery. */
  display:grid;
  /* Allocate ~33% of the width to the media gallery and ~67% to the product details. */
  /* Enlarge the media column by an additional 5% (total ~10% larger than original) */
  grid-template-columns:1.1fr 1.9fr;
  overflow:hidden;
  align-items:flex-start;
  gap:1.5rem;
  margin-top:2rem
}
.prod .main-media img,
.prod .main-media video{
  width:100%;
  height:auto;
  /* Allow the image/video to grow slightly taller again (another ~5% increase) */
  max-height:352px;
  object-fit:cover;
  display:block;
  border-radius:var(--radius);
}

/* Restrict height of the main media container to prevent overly large product images */
/* Adjust main media container: allow auto height and relative positioning for navigation arrows */
.prod .main-media{
  position:relative;
  height:auto;
  max-height:420px;
  min-height:280px;
  overflow:hidden;
}

/* Navigation arrows inside the main media */
.media-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:1.3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
  transition:background .2s;
}
.media-nav.prev{ left:10px; }
.media-nav.next{ right:10px; }
.media-nav:hover{ background:rgba(59,130,246,.8); }

/* Vertical list for beats on producer page */
.vertical-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.vertical-list .beat-card{
  flex-direction:row;
  align-items:center;
}
.vertical-list .beat-cover{
  position:relative;
  width:120px;
  height:80px;
  padding-top:0;
  overflow:hidden;
  flex-shrink:0;
}
.vertical-list .beat-cover img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.vertical-list .beat-cover button{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s;
}
.vertical-list .beat-cover button:hover{
  background:rgba(59,130,246,.8);
}
.vertical-list .beat-info{
  flex:1;
  padding:.6rem;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.vertical-list .beat-tags{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:.3rem;
}
.vertical-list .beat-tags .tag-badge{
  padding:2px 6px;
  border-radius:6px;
  background:var(--primary);
  color:#fff;
  font-size:.7rem;
  font-weight:600;
}
.prod .thumbs{display:flex;gap:.5rem;margin-top:1rem}
.prod .thumbs img{width:80px;height:60px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent}

/* Remove default padding/border from thumbnail buttons */
.prod .thumbs button{
  padding:0;
  border:none;
  background:none;
  cursor:pointer;
}
.prod .thumbs img.active{border-color:var(--primary)}
.prod .details{padding:1rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.prod .details h3{margin-top:0;margin-bottom:.6rem;font-size:1.6rem;font-weight:800}
.prod .details .info{font-size:.95rem;color:var(--text-dim);margin-bottom:1rem;line-height:1.5}
.prod .details .price{font-size:1.4rem;font-weight:800;margin-bottom:1rem}
.prod .details .buttons{display:flex;gap:.6rem}
.prod .details .buttons button{flex:1;padding:.8rem 1rem;border-radius:12px;font-weight:800;cursor:pointer;border:none;color:#fff}
.prod .details .buttons .primary{background:linear-gradient(135deg,var(--primary),var(--primary-2))}
.prod .details .buttons .secondary{background:#0e1428;color:var(--text-dim);border:1px solid #32406a}
.prod .details .buttons button:hover{opacity:.9}

/* Rating stars on product detail */
.rating{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}
.rating .stars{color:#facc15;font-size:1.15rem;line-height:1}
.rating .review-count{font-size:.9rem;color:var(--text-dim)}

/* Product features list */
.prod-features{list-style:none;padding:0;margin:.6rem 0}
.prod-features li{display:flex;align-items:flex-start;gap:.5rem;font-size:.95rem;color:var(--text-dim);margin-bottom:.35rem}
.prod-features li::before{content:'\2022'; /* bullet */ color:var(--primary); font-size:1rem; line-height:1; margin-top:.15rem}

/* FAQ section */
.faq{margin-top:2rem}
.faq .item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.6rem;padding:.8rem;background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq .item:hover{background:rgba(255,255,255,.02)}
.faq .question{font-weight:700}
.faq .toggle{font-size:1.2rem;color:var(--primary)}
.faq .answer{display:none;padding-top:.5rem;font-size:.9rem;color:var(--text-dim);line-height:1.4}
.faq .item.open .answer{display:block}

/* Reviews section styling */
.reviews .review{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:1rem;
}
.reviews .review:last-child{
  margin-bottom:0;
}
.reviews .review .avatar{
  flex-shrink:0;
}
.reviews .review .avatar img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
.reviews .review .body{
  flex:1;
}
.reviews .review .body .name{
  font-weight:700;
  margin:0;
  margin-bottom:.2rem;
}
.reviews .review .body .meta{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:.3rem;
}
.reviews .review .body .meta .stars{
  color:#facc15;
  font-size:1rem;
}
.reviews .review .body .topic{
  color:var(--primary);
  font-weight:600;
  text-decoration:none;
}
.reviews .review .body .text{
  margin:0;
  color:var(--text-dim);
  font-size:.9rem;
  line-height:1.4;
}

/* Briefing modal */
#briefModal{position:fixed;top:0;left:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.65);z-index:60}
#briefModal.active{display:flex}
#briefModal .box{width:100%;max-width:560px;background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);position:relative}
/* Decorative fox graphic inside briefing modal */
#briefModal .box::before{content:'';position:absolute;bottom:20px;right:20px;width:80px;height:80px;background-image:url('medien/fox_cartoon.png');background-size:contain;background-repeat:no-repeat;opacity:.08;pointer-events:none}
.brief-head{font-weight:800;margin-bottom:1rem;font-size:1.4rem}
.step-indicator{
  /* Layout for the progress bar in the briefing modal */
  display:flex;
  align-items:center;
  /* Don't spread the dots across the entire width to avoid huge gaps */
  justify-content:flex-start;
  gap:4px;
  /* Add some space below the progress bar so the content doesn't sit directly underneath */
  margin-bottom:.6rem;
}
.step-indicator .bar{flex:1;height:4px;border-radius:4px;overflow:hidden;background:rgba(99,102,241,.2);margin:0 4px}
.step-indicator .bar span{display:block;height:100%;width:0;background:linear-gradient(135deg,var(--primary),var(--primary-2));transition:width 1s ease}
.step-indicator .dot{width:10px;height:10px;border-radius:999px;background:rgba(99,102,241,.2)}
.step-indicator .dot.active{background:linear-gradient(135deg,var(--primary),var(--primary-2))}
/* Completed dots (previous steps) also get a colored fill, with slightly reduced opacity */
.step-indicator .dot.completed{background:linear-gradient(135deg,var(--primary),var(--primary-2)); opacity:.6}

/* Make active/completed dots stand out by using a solid primary colour as a fallback.
   On some browsers, tiny gradient fills on 10px dots are hard to perceive against the dark background.
   By setting a background-colour the dot becomes clearly visible; the gradient still applies on top. */
.step-indicator .dot.active,
.step-indicator .dot.completed{
  background-color: var(--primary);
}
.brief-content{margin-bottom:1.2rem;font-size:.95rem}
.option-buttons{display:grid;gap:.4rem;margin-top:.6rem}
.option-buttons button{width:100%;padding:.6rem .8rem;border-radius:12px;border:1px solid var(--border);background:#0e1428;color:var(--text);text-align:left;cursor:pointer;transition:.2s}
.option-buttons button.active,.option-buttons button:hover{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff}
.brief-nav{display:flex;gap:.6rem;justify-content:flex-end}
.brief-nav button{padding:.6rem 1.2rem;border-radius:12px;border:1px solid #32406a;background:#0e1428;color:var(--text);font-weight:700;cursor:pointer;transition:.2s}
.brief-nav .primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;color:#fff}
.brief-nav button:hover{opacity:.9}
/* Form elements inside briefing */
#briefModal input[type="text"],#briefModal input[type="url"],#briefModal textarea,#briefModal input[type="file"]{width:100%;padding:.6rem .8rem;border-radius:8px;border:1px solid var(--border);background:#0f1218;color:var(--text);font-size:.95rem}
#briefModal input[type="file"]::file-selector-button{background:linear-gradient(135deg,var(--primary),var(--primary-2));border:none;color:#fff;padding:.4rem .8rem;border-radius:8px;margin-right:.5rem;cursor:pointer}
#briefModal input[type="file"]::file-selector-button:hover{background:linear-gradient(135deg,var(--primary-2),var(--primary))}
#briefModal textarea{min-height:80px;resize:vertical}
#briefModal label{display:flex;align-items:center;gap:.6rem;margin:.5rem 0;color:var(--text);font-size:.95rem}
#briefModal input[type="checkbox"],#briefModal input[type="radio"]{width:18px;height:18px;accent-color:var(--primary)}
/* Spacing for revision alert text */
.revision-note{margin-top:.5rem;color:#facc15;font-size:.88rem;line-height:1.4}

/* Subtitle in briefing modal showing the current step number and name */
#briefModal .brief-subtitle{
  margin:.25rem 0 .25rem;
  font-size:.9rem;
  color:var(--muted);
}

/* Contact modal (similar styling to the briefing modal, without the decorative fox) */
#contactModal{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.65);
  z-index:60;
}
#contactModal.active{display:flex}
#contactModal .box{
  width:100%;
  max-width:560px;
  background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:var(--shadow);
  position:relative;
}
#contactModal .box::before{display:none}
#contactModal input[type="text"],
#contactModal input[type="email"],
#contactModal textarea{
  width:100%;
  padding:.6rem .8rem;
  border-radius:8px;
  border:1px solid var(--border);
  background:#0f1218;
  color:var(--text);
  font-size:.95rem;
}
#contactModal textarea{
  min-height:80px;
  resize:vertical;
}

/* Spacing between form fields in contact modal */
#contactModal .form-group{
  margin-bottom:1rem;
}

/* Spacing between form fields in contact modal */
#contactModal .form-group{
  margin-bottom:1rem;
}

/* Login page custom styling */
body.login-page .section{
  /* Center the login card vertically and horizontally */
  display:flex;
  justify-content:center;
  align-items:center;
  /* Ensure the section takes up most of the viewport minus header/footer */
  min-height:calc(100vh - 140px);
}

/* Register page custom styling */
body.register-page .section{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:calc(100vh - 140px);
}
#registerForm input[type="text"],
#registerForm input[type="email"],
#registerForm input[type="password"]{
  width:100%;
  padding:.65rem .8rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0f1218;
  color:var(--text);
  font-size:.95rem;
  margin-bottom:.7rem;
}
#registerForm input::placeholder{
  color:var(--muted);
}
#registerForm button[type="submit"]{
  width:100%;
  padding:.75rem 1rem;
  margin-top:.2rem;
}
/* Login card image sizing */
.login-card img{
  width:80px;
  height:80px;
  object-fit:contain;
  filter:saturate(1.3) brightness(1.2);
}

/* Login form inputs */
#loginForm input[type="email"],
#loginForm input[type="password"]{
  width:100%;
  padding:.65rem .8rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0f1218;
  color:var(--text);
  font-size:.95rem;
  margin-bottom:.7rem;
}
#loginForm input::placeholder{
  color:var(--muted);
}

/* Login button inherits global btn styles; ensure full width */
#loginForm button[type="submit"]{
  width:100%;
  padding:.75rem 1rem;
  margin-top:.2rem;
}

/* Content section spacing in briefing modal */
#briefModal #briefContent{
  /* Ensure there is breathing room between the progress bar and the content */
  margin-top:.6rem;
}

/* Navigation button row inside briefing modal */
#briefModal #briefNav{
  /* Give the buttons a bit of room above so they aren't flush against the content */
  margin-top:1rem;
}

/* Fox hint component for displaying helper text with mascot */
.fox-hint{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin:.6rem 0;
}
.fox-hint img{
  width:56px;
  height:56px;
  object-fit:contain;
  filter:saturate(1.3) brightness(1.15);
}
.fox-hint .bubble{
  position:relative;
  background:#0e1428;
  border:1px solid var(--border);
  border-radius:16px;
  padding:.6rem 1rem;
  color:var(--text-dim);
  font-size:.9rem;
  line-height:1.5;
}

/*
 * Linear progress bar for the briefing modal. This bar shows the overall
 * completion across all briefing steps. It sits below the dot‑based step
 * indicator and fills proportionally as the user advances through the steps.
 */
.progress-container{
  height:4px;
  background:rgba(99,102,241,.2);
  border-radius:4px;
  overflow:hidden;
  margin-bottom:.6rem;
}
.progress-container .progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  transition:width .5s ease;
}
.fox-hint .bubble::before{
  content:'';
  position:absolute;
  left:-12px;
  top:22px;
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-right:12px solid #0e1428;
}

/* Global override to hide all occurrences of the fox cartoon mascot. Any <img>
   elements referencing the fox_cartoon.png file are hidden, and pseudo-elements
   that draw the fox are suppressed. */
img[src*="fox_cartoon.png"]{ display:none !important; }
/* Remove the small fox overlay from product thumbnails */
.cat .thumb::after{ display:none !important; }
/* Suppress the faint fox graphic on the briefing modal */
#briefModal .box::before{ display:none !important; }
/* Hide the image within fox-hint components while preserving the bubble text */
.fox-hint img{ display:none !important; }

/* Footer */
footer{padding:2rem 0;margin-top:2rem;color:var(--text-dim);font-size:.85rem;text-align:left}

/* Beats marketplace layout */
.beats-container{
  /* Stack producers vertically with space between */
  display:flex;
  flex-direction:column;
  gap:2rem;
  margin-top:1rem;
}

/* Producer card wrapper */
.producer-card{
  background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem;
  box-shadow:var(--shadow);
}

/* Producer header: image and name */
.producer-header{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
}

/* Wrap producer name and follow button together to align them nicely */
.producer-info{
  display:flex;
  align-items:center;
  gap:.6rem;
}

/* Producer avatar image */
.producer-img{
  width:84px;
  height:84px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}

/* Producer name styling */
.producer-name{
  font-size:1.5rem;
  font-weight:800;
}

/* Beats list grid */
.beats-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1rem;
}

/* Tag list styling for beat cards */
/* Tag list styling for beat cards */
.beat-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.beat-tags .tag-badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:9999px;
  border:1px solid #facc15;
  background:rgba(250,204,21,0.15);
  color:#facc15;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:0.02em;
  transition:background-color .2s,color .2s;
  user-select:none;
}
.beat-tags .tag-badge:hover{
  background:#facc15;
  color:#0d0e12;
}

/* Show more / show less link styling */
.show-more{
  margin-top:.5rem;
  display:block;
  text-align:right;
  color:var(--primary);
  cursor:pointer;
  font-weight:700;
  animation:blink 1.2s infinite;
}

/* Price display inside briefing modal */
/*
 * Price display inside the briefing modal
 *
 * Always ensure the price is clearly visible while the user fills out
 * the briefing. We use a bright accent colour and some padding to
 * separate it from the surrounding content. A slight background tint
 * helps distinguish it from the dark card. The element is full‑width
 * and centre aligned so the eye naturally notices it.
 */
/*
 * Preisanzeige im Briefing
 *
 * Gestaltet als dezente Leiste, die weniger dominant wirkt. Kleinere Schrift,
 * reduziertes Padding und eine zarte Farbgebung sorgen dafür, dass der
 * Preis zwar sichtbar bleibt, aber nicht den restlichen Inhalt verdrängt.
 */
.brief-price{
  display:inline-flex;
  width:auto;
  align-items:center;
  gap:.4rem;
  padding:.35rem .5rem;
  margin-top:.4rem;
  border-radius:5px;
  font-size:.85rem;
  font-weight:600;
  color:#3b82f6;
  background:rgba(59, 130, 246, 0.08);
  border:1px solid rgba(59, 130, 246, 0.16);
}

/* Wrapper around the price bar and details. Ensures full width. */
.price-wrap{
  width:100%;
  display:flex;
  justify-content:flex-start;
}

/* Toggle arrow next to the price. It rotates depending on the state of details. */
.price-toggle{
  cursor:pointer;
  font-size:1.1rem;
  margin-left:.6rem;
  user-select:none;
}

/* Hidden details section below the price. This shows a breakdown of costs. */
/* Details zum Preis – ebenfalls dezent gehalten */
.price-details{
  margin-top:.3rem;
  padding:.45rem .5rem;
  border-radius:5px;
  background:rgba(59, 130, 246, 0.05);
  border:1px solid rgba(59, 130, 246, 0.1);
  font-size:.8rem;
  color:var(--text);
}
.price-details div{
  display:flex;
  justify-content:space-between;
  margin:.2rem 0;
}

/* When a show-more link is inside a beats grid, span all columns */
.beats-list .show-more{
  grid-column:1 / -1;
}

@keyframes blink{
  0%,100%{ opacity:1; }
  50%{ opacity:.6; }
}

/* Individual beat card */
.beat-card{
  background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}

/* Cover area for beat including play overlay */
.beat-cover{
  position:relative;
  width:100%;
  /* 16:9 ratio by setting height via padding-top */
  padding-top:56.25%;
  overflow:hidden;
}

/* Cover image styling */
.beat-cover img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Play button overlay */
.beat-cover button{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.5);
  color:#fff;
  font-size:1.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s;
}

.beat-cover button:hover{
  background:rgba(59,130,246,.8);
}

/* Info section below cover */
.beat-info{
  padding:.8rem;
  display:flex;
  flex-direction:column;
  gap:.3rem;
  flex:1;
}

.beat-info .beat-title{
  font-weight:700;
  font-size:1.05rem;
  margin:0;
}

.beat-info .beat-price{
  font-size:.9rem;
  color:var(--primary);
  font-weight:700;
}

/* Volume slider container for beats */
.beat-volume{
  margin-top:.3rem;
}
.beat-volume input[type="range"]{
  width:100%;
  accent-color:var(--primary);
  cursor:pointer;
}

/* Global audio player styling (inspired by Spotify) */
.audio-player{
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  width:90%;
  max-width:500px;
  padding:1rem;
  background:rgba(17,19,24,0.85);
  backdrop-filter:blur(20px);
  border-radius:20px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
  display:none;
  flex-direction:column;
  gap:.6rem;
  color:var(--text);
  z-index:200;
  position:fixed;
}
.audio-player .player-title{
  font-weight:700;
  margin-bottom:.2rem;
  font-size:1rem;
}
.audio-player .player-progress{
  width:100%;
}
.audio-player .player-time{
  display:flex;
  justify-content:space-between;
  font-size:.8rem;
  color:var(--text-dim);
}
.audio-player .player-controls{
  display:flex;
  align-items:center;
  gap:1rem;
  justify-content:center;
}
.audio-player .player-controls button{
  border:none;
  background:none;
  color:var(--text);
  font-size:1.3rem;
  cursor:pointer;
}
.audio-player .player-controls input[type="range"]{
  width:100px;
  accent-color:var(--primary);
  cursor:pointer;
}

/* Close button for the audio player */
.audio-player .player-close{
  position:absolute;
  top:8px;
  right:12px;
  border:none;
  background:none;
  color:var(--text);
  font-size:1.4rem;
  font-weight:700;
  cursor:pointer;
  line-height:1;
}

/* Follow button on producer cards */
.follow-btn{
  /* No left margin; spacing is handled by .producer-info wrapper */
  margin-left:0;
  padding:.4rem .8rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0e1428;
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}
.follow-btn.active,
.follow-btn:hover{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  border-color:transparent;
}

/* Add to cart button in beat cards */
.add-cart-btn{
  margin-top:.4rem;
  padding:.4rem .8rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0e1428;
  color:var(--text);
  font-size:.85rem;
  cursor:pointer;
  transition:.2s;
}
.add-cart-btn:hover{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  border-color:transparent;
}

/* Header icons (notification bell and cart) */
.header-icons{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-left:1rem;
  position:relative;
}
.icon-btn{
  position:relative;
  padding:.4rem;
  border-radius:50%;
  border:1px solid var(--border);
  background:#0e1428;
  color:var(--text);
  cursor:pointer;
  font-size:1.2rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
}
.icon-btn:hover{
  background:#131c3a;
}
.icon-btn .notification-count,
.icon-btn .cart-count{
  position:absolute;
  top:-3px;
  right:-3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  font-size:.72rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Dropdown panels for notifications and cart */
.dropdown{
  position:absolute;
  right:0;
  top:calc(100% + .5rem);
  background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  width:260px;
  max-height:320px;
  overflow-y:auto;
  display:none;
  padding:1rem;
  font-size:.9rem;
  z-index:100;
}
.dropdown.open{
  display:block;
}
.dropdown p{
  margin:0 0 .6rem;
}
.cart-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.5rem;
}
.cart-item button{
  background:none;
  border:none;
  color:var(--primary);
  cursor:pointer;
  font-size:1rem;
}
.cart-total{
  font-weight:700;
  color:var(--primary);
  margin-top:.8rem;
  text-align:right;
}

/* Highlight the active header icon (e.g., on the cart page) */
.icon-btn.active{
  color:var(--primary);
  border-color:var(--primary);
}

/* Cart page layout styles */
.cart-layout{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  margin-top:1.5rem;
}
.cart-items{
  flex:2 1 60%;
}
.cart-summary{
  flex:1 1 35%;
  background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.2rem;
  height:fit-content;
}
.cart-summary .summary-content .line{
  display:flex;
  justify-content:space-between;
  margin-bottom:.4rem;
}
.cart-summary .summary-content .line.total{
  font-size:1.1rem;
  font-weight:700;
  margin-top:.8rem;
}
.cart-summary .summary-content .coupon{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.cart-summary .summary-content .coupon input{
  padding:.5rem .8rem;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#0e1428;
  color:var(--text);
}
.cart-summary .summary-content .coupon button{
  padding:.5rem .8rem;
  border:none;
  border-radius:var(--radius);
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  cursor:pointer;
  font-size:.85rem;
}
.cart-summary .summary-content .coupon-msg{
  font-size:.8rem;
  color:var(--primary);
}

/* Style for the tax line (MwSt) to be smaller and muted */
.cart-summary .summary-content .tax-line{
  font-size:.85rem;
  color:var(--text-dim);
}
.cart-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  margin-bottom:1rem;
  gap:1rem;
}
.cart-item .info{
  flex:1;
}
.cart-item .info .title{
  font-weight:700;
  margin-bottom:.3rem;
}
.cart-item .info .details{
  font-size:.85rem;
  color:var(--text-dim);
}

/* Thumbnail within cart items */
.cart-item .thumb{
  flex:0 0 auto;
}
.cart-item .thumb img{
  width:60px;
  height:60px;
  object-fit:cover;
  border-radius:var(--radius);
}
/* Producer info styling in cart items */
.cart-item .producer-info{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin-top:.25rem;
  font-size:.85rem;
  color:var(--text-dim);
}
.cart-item .producer-info img{
  width:24px;
  height:24px;
  border-radius:50%;
}
.cart-item .price{
  font-weight:700;
  min-width:70px;
  text-align:right;
}
.cart-item .remove-btn{
  background:none;
  border:none;
  color:var(--primary);
  font-size:1.2rem;
  cursor:pointer;
}

/* Responsive styles */
@media (max-width:768px){
  /* Stack hero content vertically and center text */
  .hero{flex-direction:column-reverse;align-items:center;text-align:center;padding:60px 0 32px;}
  /* --- Mobile header: hamburger + icons aligned --- */
  .nav{ position:relative; flex-wrap:wrap; align-items:center; }
  .brand{ order:1; }
  .menu-toggle{ order:2; margin-left:auto; }
  .header-icons{ order:3; margin-left:.5rem; display:flex; align-items:center; gap:.6rem; }
  .header-icons .icon-btn{ width:40px; height:40px; display:grid; place-items:center; }
  /* Place the mobile nav list below header row */
  .nav nav{ order:4; width:100%; }
  .nav nav ul{ left:0; right:0; top:64px; } /* keep full width dropdown */
  /* Ensure dropdowns from icons open correctly on small screens */
  .header-icons .dropdown{ right:0; left:auto; top:calc(100% + .4rem); }
    
}
  .hero-text{max-width:100%}
  .hero-img{margin-top:1.5rem}
  /* Show hamburger and adjust nav */
  .menu-toggle{display:block}
  .nav{flex-wrap:wrap}
  .nav nav{width:100%}
  .nav nav ul{flex-direction:column;position:absolute;top:64px;right:0;left:0;width:100%;background:var(--bg-2);padding:1rem 0;border-top:1px solid var(--border);display:none}
  .nav nav ul.open{display:flex}
  .nav nav ul li{margin:0}
  .nav nav a{padding:.8rem 1.2rem;display:block;width:100%}
  /* Product detail page: single column */
  .prod{grid-template-columns:1fr}
  .prod .gallery{margin-bottom:1rem}
  /* Cart layout stacks summary */
  .cart-layout{display:flex;flex-direction:column}
  .cart-summary{width:100%;margin-top:1.5rem}
}

/* Social media icons in producer profiles */
#socialLinks a{
  /* Align icons nicely and provide spacing */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--card-2);
  border:1px solid var(--border);
  transition:background .2s;
}
#socialLinks a:hover{
  background:var(--primary);
}
#socialLinks img.social-icon{
  width:18px;
  height:18px;
  /* Invert black icons to ensure visibility on dark background */
  filter:invert(1);
}

/* == Mobile Header Fix Overrides (final cascade) == */
@media (max-width:768px){
  header .nav{ position:relative; flex-wrap:wrap; align-items:center; }
  header .brand{ order:1; }
  header .menu-toggle{ order:2; margin-left:auto; display:block; }
  header .header-icons{ order:3; margin-left:.5rem; display:flex; align-items:center; gap:.6rem; }
  header .header-icons .icon-btn{ width:40px; height:40px; display:grid; place-items:center; }
  header .nav nav{ order:4; width:100%; }
  header .nav nav ul{ left:0; right:0; top:64px; }
}

/* == Mobile Header Refinement (icons left of hamburger) == */
@media (max-width:768px){
  header .nav{ position:relative; flex-wrap:wrap; align-items:center; padding:12px 14px; }
  header .brand{ order:1; }
  /* Icons directly left of hamburger, pushed to the right edge */
  header .header-icons{ order:2; margin-left:auto; display:flex; align-items:center; gap:.6rem; }
  header .header-icons .icon-btn{ width:36px; height:36px; display:grid; place-items:center; }
  /* Hamburger sits at the far right, just after icons */
  header .menu-toggle{ order:3; margin-left:.25rem; }
  /* Menu list breaks to a new line below */
  header .nav nav{ order:4; flex-basis:100%; width:100%; }
  header .nav nav ul{ left:0; right:0; top:68px; }
}

/* == Header brand logo: remove box == */
header .brand-logo{
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  /* keep the image but let it fill the element without a colored box */
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  width: 80px !important;
  height: 80px !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* Slightly reduce gap so logo + text breathe */
header .brand{ gap: .6rem; }

/* === NURDAN Header Layout (2025-10-12) ===
   Desktop:  [Logo] ............ [Icons][Nav]
   Mobile:   [Logo] ............ [Icons][Hamburger]
   Plus: a bit of side padding on mobile so nothing hugs the edges.
*/
@media (min-width: 769px){
  header .nav{ justify-content: flex-start; gap: .6rem; }
  header .brand{ order: 1; }
  header .header-icons{ order: 2; margin-left: auto; }
  header nav{ order: 3; }
  header .menu-toggle{ display: none !important; }
}

/* Mobile layout refinements */
@media (max-width: 768px){
  /* Keep icons directly left of the hamburger on the top row */
  header .brand{ order: 1; }
  header .header-icons{ order: 2; margin-left: auto; }
  header .menu-toggle{ order: 3; }
  header .nav nav{ order: 4; width: 100%; }

  /* Give the header a little more breathing room on the sides */
  .container{ padding-left: 18px; padding-right: 18px; }
  header .nav{ padding-left: 18px; padding-right: 18px; }
  /* Ensure the icon buttons have a small hit area and spacing */
  header .header-icons{ gap: .6rem; }
}


/* === NURDAN Brand Cleanup (2025-10-12b) === */
/* Hide any stray brand text next to the logo (defensive) */
header .brand b,
header .brand strong,
header .brand span:not(.brand-logo),
header .brand em{ display:none !important; }
/* Slightly reduce gap since text is gone */
header .brand{ gap:.4rem; }
/* Enlarge logo */
header .brand-logo{ width:56px !important; height:56px !important; background-size:68% !important; border-radius:14px; }
@media (max-width:768px){
  header .brand-logo{ width:48px !important; height:48px !important; }
}


/* === NURDAN Header Fix v2 (2025-10-12c) === */
/* Bigger logo without box */
header .brand-logo{
  width:72px !important;
  height:72px !important;
  border:none !important;
  background-color:transparent !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;
  border-radius:0 !important;
}
@media (max-width:768px){
  header .brand-logo{
    width:56px !important;
    height:56px !important;
  }
  /* Show the hamburger on mobile */
  header .menu-toggle{ display:block !important; }
  /* Hide the horizontal nav on mobile until opened */
  header .nav nav ul{ display:none; }
  header .nav nav ul.open{ display:flex; }
  /* Keep order: [brand][icons][hamburger] */
  header .brand{ order:1; }
  header .header-icons{ order:2; margin-left:auto; display:flex; }
  header .menu-toggle{ order:3; }
}
/* Desktop ordering and spacing */
@media (min-width:769px){
  header .nav{ display:flex; align-items:center; gap:.8rem; }
  header .brand{ order:1; }
  header .header-icons{ order:2; margin-left:auto; display:flex; }
  header nav{ order:3; }
  header .menu-toggle{ display:none !important; }
}


/* === NURDAN Header Fix v3 (bigger logo) — 2025-10-12d === */
header .brand-logo{
  width:96px !important;
  height:96px !important;
  border:none !important;
  background-color:transparent !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;
  border-radius:0 !important;
}
/* Keep header comfortable with taller logo */
header .nav{ min-height:100px; }

@media (max-width:768px){
  header .brand-logo{ width:72px !important; height:72px !important; }
  /* Mobile menu should drop below the taller header */
  header .nav nav ul{ top:88px !important; }
}


/* === NURDAN Header Fix v4 (desktop nav visible) — 2025-10-12e === */
@media (min-width: 769px){
  /* Show the nav items as buttons on large screens */
  header .nav{ align-items:center; justify-content:space-between; }
  header .nav nav ul{
    display:flex !important;
    position:static !important;
    flex-direction:row !important;
    gap:.4rem;
    padding:0;
    border-top:0;
    background:transparent;
    width:auto;
  }
  header .menu-toggle{ display:none !important; }
  /* Order: brand | icons | nav */
  header .brand{ order:1; }
  header .header-icons{ order:2; margin-left:auto; }
  header nav{ order:3; margin-left:.6rem; }
}


/* === NURDAN Header Fix v5 (nav left of icons + mobile spacing) — 2025-10-12f === */

/* Desktop: order = [brand][nav buttons][icons], icons stay at far right */
@media (min-width:769px){
  header .nav{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:.6rem;
  }
  header .brand{ order:1; }
  header nav{ 
    order:2; 
    margin-left:1rem; 
    margin-right:.6rem; 
  }
  header .header-icons{ 
    order:3; 
    margin-left:0; 
  }
  /* Ensure the nav is visible as inline buttons on desktop */
  header .nav nav ul{
    display:flex !important;
    position:static !important;
    flex-direction:row !important;
    gap:.6rem;
    padding:0;
    border-top:0;
    background:transparent;
    width:auto;
  }
  header .menu-toggle{ display:none !important; }
}

/* Mobile: more side padding and spacing so nothing hugs the edges */
@media (max-width:768px){
  .container{ padding-left:24px; padding-right:24px; }
  header .nav{ padding-left:24px; padding-right:24px; gap:.6rem; }
  /* Keep icons just left of the hamburger with a little gap */
  header .header-icons{ order:2; margin-left:auto; gap:.8rem; }
  header .menu-toggle{ order:3; margin-left:.6rem; display:block !important; }
}


/* === NURDAN Header Fix v6 (desktop alignment) — 2025-10-12g === */
@media (min-width:769px){
  header .nav{ flex-wrap:nowrap !important; align-items:center; }
  header .nav nav{ width:auto !important; }
  header .nav nav ul{ position:static !important; top:auto !important; display:flex !important; }
  header .header-icons{ margin-left:auto !important; }
}


/* === NURDAN Product Layout Fix v7 — 2025-10-12h === */
/* Desktop/tablet: two-column layout (gallery left, details right) */
@media (min-width:769px){
  .prod{
    display:grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: 1.5rem !important;
    align-items:flex-start;
  }
  .prod > .gallery{ order:1; }
  .prod > .details{ order:2; }
}

/* Mobile: keep single-column */
@media (max-width:768px){
  .prod{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
}


/* === NURDAN Header Add: Dashboard button (2025-10-12i) === */
.header-icons .dash-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .8rem;
  border-radius:12px;
  background:#0e1428;
  border:1px solid #32406a;
  color:var(--text);
  font-weight:700;
  text-decoration:none;
}
.header-icons .dash-btn:hover{ background:#1a1f29; color:#fff; }
@media (max-width:768px){
  /* keep it compact on mobile */
  .header-icons .dash-btn{ padding:.4rem .7rem; }
}


/* === NURDAN Header Layout v8 (mobile/desktop order + dashboard/login) — 2025-10-12j === */

/* Re-usable button styles */
.header-actions .dash-btn,
.header-actions .login-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .9rem;
  border-radius:12px;
  border:1px solid #32406a;
  background:#0e1428;
  color:var(--text);
  font-weight:800;
  text-decoration:none;
}
.header-actions .dash-btn:hover,
.header-actions .login-btn:hover{ background:#1a1f29; color:#fff; }

/* Actions group (Dashboard + Login) */
.header-actions{ display:flex; align-items:center; gap:.6rem; }

/* Desktop ordering */
@media (min-width:769px){
  header .nav{ display:flex; align-items:center; gap:.8rem; flex-wrap:nowrap; }
  header .brand{ order:1; }
  header nav{ order:2; }
  header .header-icons{ order:3; margin-left:auto; display:flex; }
  header .header-actions{ order:4; }
  header .menu-toggle{ display:none !important; }
  /* Dashboard lives outside the hamburger on desktop */
  .dash-desktop{ display:inline-flex !important; }
  /* Dashboard item inside the hamburger is hidden on desktop */
  .nav-dashboard-mobile{ display:none !important; }
  /* Keep nav inline */
  header .nav nav ul{ display:flex !important; position:static !important; flex-direction:row !important; gap:.6rem; padding:0; background:transparent; border:0; width:auto; }
}

/* Mobile ordering */
@media (max-width:768px){
  /* Order: Logo | Icons | Hamburger | Login */
  header .brand{ order:1; }
  header .header-icons{ order:2; margin-left:auto; gap:.8rem; }
  header .menu-toggle{ order:3; display:block !important; margin-left:.6rem; }
  header .header-actions{ order:4; margin-left:.6rem; }
  /* Only show Login as a button on mobile; Dashboard goes into the hamburger */
  .dash-desktop{ display:none !important; }
  .nav-dashboard-mobile{ display:list-item !important; }
  /* Give more side padding */
  .container{ padding-left:24px; padding-right:24px; }
  header .nav{ padding-left:24px; padding-right:24px; }
}

/* Active state style for cart icon button (optional subtle) */
.icon-btn.active{ outline:2px solid #2f5ef1; outline-offset:2px; border-radius:12px; }


/* === Mobile Header Fix: Login neben Hamburger (final override) — 2025-10-12 === */
@media (max-width:768px){
  header .nav{ flex-wrap:wrap; }
  header .brand{ order:1; }
  header .header-icons{ order:2; margin-left:auto; }
  header .menu-toggle{ order:3; }                   /* Hamburger */
  header .header-actions{
    order:4;                                        /* Login direkt nach Hamburger */
    display:flex; align-items:center; gap:.45rem;
    margin-left:.35rem; flex:0 0 auto;
  }
  header .header-actions .dash-desktop{ display:none !important; } /* Dashboard-Button nur Desktop */
  header .header-actions .login-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:.45rem .7rem; line-height:1; font-weight:800; font-size:.9rem;
    border:1px solid var(--border); border-radius:12px;
    background:#0e1428; color:var(--text);
  }
  header .nav nav{ order:5; width:100%; }
  header .nav nav ul{ top:72px; }                   /* etwas tiefer wegen Login */
}
@media (min-width:769px){
  .nav-dashboard-mobile{ display:none !important; } /* Dashboard-Link nur mobil im Menü */
  header .header-actions{ display:flex; gap:.6rem; }
}