:root{
  --accent: #FFD700; /* gold */
  --bg: #000000;
  --card: #0f0f10;
  --border: #222;
  --muted: #bfbfbf;
  --text: #fff;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.shop-page {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.shop-main {
    flex: 1;
}


/* optional extra Abstand auf Mobile */
@media (max-width: 600px) {
    .shop-main {
        padding-bottom: 6rem;
    }
}


.fp-footer {
    margin-top: auto;
}


*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}



/* ===========================
   SHOP HEADER
=========================== */

.shop-header {
  background: #000;
  padding: 1.2rem 0;
  border-bottom: 2px solid #d4a017; /* Gold */
}

.shop-header-inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
}

.shop-header h1 {
  color: #d4a017;
  font-size: 1.8rem;
  margin: 0;
  font-weight: 600;
}

.shop-logo {
  width: 55px;
  height: auto;
}


/* ===========================
   SHOP HERO
=========================== */

.shop-hero {
  background: linear-gradient(to bottom right, #000000, #1a1a1a);
  padding: 4rem 1.5rem;
  text-align: center;
  border-bottom: 2px solid #d4a017;
}

.shop-hero h2 {
  color: #d4a017;
  font-size: 2.2rem;
}

.shop-hero p {
  color: #ccc;
  max-width: 600px;
  margin: 1rem auto 0;
}


/* ===========================
   GOLD BUTTONS
=========================== */

.add-cart,
.buy-now {
  background: #d4a017; /* gold */
  color: #000;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s ease;
}

.add-cart:hover,
.buy-now:hover {
  background: #f5c247;
  transform: translateY(-2px);
}

.buy-now {
  text-decoration: none;
  display: inline-block;
}

/* Optional Glow effect */
.product-card:hover {
  box-shadow: 0 0 18px rgba(212,160,23,0.4);
}


/* Header */
.fp-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.8rem 1rem;
  border-bottom:1px solid rgba(255,255,255,0.03);
  background:transparent;
}
.fp-logo img{height:44px}
.fp-nav a{
  color:var(--muted);
  margin:0 0.6rem;
  text-decoration:none;
  font-weight:600;
}
.fp-nav a.active{color:var(--accent)}
.fp-actions{display:flex;align-items:center}
#cart-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:0.45rem 0.6rem;border-radius:8px;cursor:pointer}
#cart-count{background:var(--accent);color:#000;padding:0.08rem 0.45rem;border-radius:999px;margin-left:6px;font-weight:700}

/* Hero */
.shop-hero{padding:2.5rem 1rem;text-align:center}
.section-title{font-size:2rem;margin:0;color:var(--text)}
.section-title::after{content:"";display:block;width:60px;height:3px;background:var(--accent);margin:0.5rem auto;border-radius:2px;transition:width .3s}
.section-subtitle{max-width:720px;margin:0.6rem auto;color:var(--muted)}
.shop-controls{display:flex;flex-wrap:wrap;gap:0.6rem;justify-content:center;margin-top:1.2rem}

/* search */
.search-wrap{position:relative}
#search-input{padding:0.6rem 0.9rem;border-radius:999px;border:1px solid rgba(255,255,255,0.06);background:#0b0b0b;color:var(--text);min-width:260px}
#search-clear{position:absolute;right:6px;top:6px;background:transparent;border:none;color:var(--muted);cursor:pointer}

/* categories */
.category-wrap{display:flex;gap:0.4rem;flex-wrap:wrap;align-items:center}
.cat-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:0.45rem 0.8rem;border-radius:999px;cursor:pointer;font-weight:600}
.cat-btn.active{background:var(--accent);color:#000;border-color:var(--accent)}

/* product grid */
.shop-main{padding:1rem 1rem 4rem}
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.25rem;
  max-width:1200px;margin:0 auto;
}

.product-card{
  background:var(--card);
  border-radius:12px;
  padding:0.9rem;
  border:1px solid var(--border);
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s;
}

.product-card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(0,0,0,0.55);border-color:rgba(255,215,0,0.12)}
.img-wrap{height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent)}
.img-wrap img{max-width:100%;max-height:100%;object-fit:contain}

.product-title{font-size:1.05rem;margin:0.8rem 0 0.25rem;color:var(--text)}
.product-desc{font-size:0.9rem;color:var(--muted);margin:0 0 0.8rem}

.product-meta{display:flex;align-items:center;justify-content:space-between;gap:0.6rem}
.price{font-weight:800;color:var(--accent)}
.actions{display:flex;gap:0.5rem;align-items:center}
.add-cart{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);padding:0.45rem 0.8rem;border-radius:999px;cursor:pointer}
.buy-now{background:var(--accent);color:#000;padding:0.45rem 0.9rem;border-radius:999px;text-decoration:none;font-weight:700}
.buy-now:hover{background:#f0c13c}

/* cart modal */
.cart-modal{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));z-index:999}
.cart-panel{width:100%;max-width:480px;background:#0b0b0b;border-radius:12px;padding:1rem;margin:1rem;border:1px solid rgba(255,255,255,0.04)}
.cart-close{background:transparent;border:none;color:var(--muted);float:right;font-size:1.2rem;cursor:pointer}
#cart-items{min-height:80px;max-height:320px;overflow:auto;padding:0.4rem 0}
.cart-item{display:flex;gap:0.6rem;align-items:center;padding:0.45rem 0;border-bottom:1px dashed rgba(255,255,255,0.03)}
.cart-item img{height:48px;border-radius:6px}
.cart-summary{margin-top:0.8rem;display:flex;flex-direction:column;gap:0.6rem}
.btn-checkout{background:var(--accent);color:#000;border:none;padding:0.7rem;border-radius:8px;cursor:pointer;font-weight:800}
.btn-clear{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:0.5rem;border-radius:8px}

/* footer */
.fp-footer{border-top:1px solid rgba(255,255,255,0.03);padding:1rem 1rem;margin-top:auto;}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;color:var(--muted);gap:1rem}
.footer-social a{color:var(--muted);margin-left:0.6rem;text-decoration:none;font-size:1.05rem}

/* responsiveness */
@media (max-width:720px){
  .img-wrap{height:140px}
  .product-card{padding:0.8rem}
  .section-title{font-size:1.6rem}
  .fp-nav{display:none}
  .fp-actions{display:flex;gap:0.4rem}
}

.logo{
  display:flex; align-items:center; gap:.5rem;
  text-decoration:none; color:var(--fg);
  font-weight:800; letter-spacing:.2px;
}
.logo-emoji{ filter: drop-shadow(0 0 8px rgba(250,204,21,.4)); }
.logo-text{ font-family:"Raleway", sans-serif; color: #facc15;}


.shop-main {
    flex: 1;
}

.shop-footer {
  background: #0f0f10;
  padding: 2rem 1rem;
  border-top: 1px solid #222;
  margin-top: 3rem;
  text-align: center;
}

.shop-footer-inner p {
  color: #aaa;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.shop-footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.shop-footer-links a {
  color: #FFD700;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s ease;
}

.shop-footer-links a:hover {
  color: #fff;
}

.product-card {
  background: #0f0f10;
  padding: 1.7rem;
  border-radius: 14px;
  border: 1px solid #222;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.08);
  margin-bottom: 2rem;
}

.product-card .img-wrap img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.product-title {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
  font-weight: 700;
}

.product-desc {
  color: #bbb;
  margin-bottom: 1rem;
  font-size: .95rem;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #FFD700;
  font-size: 1.2rem;
  font-weight: 700;
}

.actions {
  display: flex;
  gap: 0.6rem;
}

.add-cart,
.buy-now {
  border-radius: 12px;
  padding: 0.55rem 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
}

.add-cart {
  background: #000;
  color: #FFD700;
  border: 2px solid #FFD700;
}

.add-cart:hover {
  background: #FFD700;
  color: #000;
}

.buy-now {
  background: #FFD700;
  color: #000;
}

.buy-now:hover {
  background: #f1c93a;
}

.aff-link {
  background: #FFD700;
  color: #000;
  border-radius: 12px;
  padding: 0.55rem 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
  text-decoration: none;
}

.aff-link:hover {
  background: #f1c93a;
}

/* Volle Grid-Breite */
.grid-full {
  grid-column: 1 / -1;
}

/* Gemeinsames Header-Styling */
.shop-section-header {
  max-width: 1200px;
  margin: 40px auto 20px;
}

.shop-section-header h2 {
  color: #facc15;
  margin-bottom: 8px;
}

.shop-section-header p {
  color: #cfcfcf;
  font-size: 0.95rem;
}

/* Affiliate-Bereich etwas mehr Abstand nach oben */
.affiliate-header {
  margin-top: 60px;
}

.checkout-email {
  margin: 14px 0 10px;
}

.checkout-email input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 0.95rem;
  outline: none;
}

.checkout-email input:focus {
  border-color: #facc15;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.25);
}

.checkout-email small {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: #777;
}