:root{--bg:#0b1814;--card:#0f201a;--text:#e6f2ec;--muted:#a9c3b6;--brand:#1f7a5f;--border:#214035;--shadow:0 10px 30px rgba(0,0,0,.25)}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header / top bar */
header{position:sticky;top:0;z-index:10;background:rgba(11,24,20,.8);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}
.header-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand-logo{height:56px}
.header-nav a{color:var(--text);text-decoration:none;margin-left:16px;font-weight:600}
.cta{padding:10px 14px;border:1px solid var(--brand);border-radius:8px}.cta:hover{background:var(--brand)}

/* Hero */
.hero{background:url('./assets/images/stripes-hero.svg') top right/cover no-repeat, url('./assets/images/hero-bg.svg') center/cover no-repeat;padding:100px 0 70px;border-bottom:1px solid var(--border)}
.hero-logo{height:128px;margin-bottom:16px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.button{display:inline-block;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700;border:1px solid var(--brand)}
.button.primary{background:var(--brand);color:#fff;border-color:transparent}

/* Sections */
.section{padding:54px 0;border-bottom:1px solid var(--border)}
.lead{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--border);padding:18px;border-radius:14px;box-shadow:var(--shadow)}

.kv{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.panel{background:var(--card);border:1px solid var(--border);padding:18px;border-radius:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.table{width:100%;border-collapse:collapse;margin:12px 0}
.table th,.table td{border:1px solid var(--border);padding:8px;text-align:left}
.table th{background:#11261e}
.price{font-weight:800}
.note{color:var(--muted)}

/* Gallery slider */
.gallery{position:relative;overflow:hidden}
.slides{display:flex;transition:transform .35s ease;will-change:transform}
.slide{min-width:100%}
.slide img{display:block;width:100%;height:360px;object-fit:cover;border-radius:10px}
.slider-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);border:none;color:#fff;font-size:26px;width:36px;height:36px;border-radius:50%;cursor:pointer}
.slider-prev{left:8px}.slider-next{right:8px}
.dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.dots button{width:8px;height:8px;border-radius:50%;border:1px solid #5aa78e;background:transparent;cursor:pointer}
.dots button.active{background:#5aa78e}

/* Floating Buttons */
.whatsapp-float{
  position:fixed;width:56px;height:56px;bottom:22px;right:22px;
  background:#25D366;color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 15px rgba(0,0,0,0.25);z-index:1000
}

/* Mobile floating Shop button (bottom-left). Hidden on desktop. */
.shop-float{
  position:fixed;left:22px;bottom:22px;z-index:1000;
  display:none; /* hidden by default; enabled on narrow screens */
  align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--border);
  color:var(--text);text-decoration:none;
  padding:10px 14px;border-radius:999px;box-shadow:var(--shadow);
  font-weight:700
}
.shop-float-logo{height:24px}
@media (max-width:880px){
  .shop-float{display:inline-flex}
}

/* eBay UI */
.header-nav a.shop{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);padding:8px 12px;border-radius:8px}
.icon-ebay{height:16px;vertical-align:middle}

/* eBay promo (Option B) */
.shop-promo .promo{
  display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:center;
  background:var(--card);border:1px solid var(--border);
  padding:20px;border-radius:16px;box-shadow:var(--shadow)
}
.shop-promo .promo-logo{height:40px;margin-bottom:6px}
.promo-media{position:relative}
.promo-video{display:none} /* hidden unless MP4 provided */
.promo-fallback{display:flex;align-items:center;justify-content:center;background:#0b1814;border:1px solid var(--border);border-radius:12px;height:220px}
.promo-fallback img{height:42px;opacity:.95}

/* Footer badge */
footer .ebay-badge{display:inline-flex;align-items:center;gap:8px;opacity:.9}
footer .ebay-badge img{height:26px}

@media (max-width:900px){
  .shop-promo .promo{grid-template-columns:1fr}
  .promo-fallback{height:200px}
}
@media (max-width:880px){
  .kv{grid-template-columns:1fr}
  .slide img{height:260px}
  .brand-logo{height:48px}
  .hero-logo{height:96px}
}

/* === Brand button colours (added) === */
.header-nav .cta{
  background-color:#25D366; /* WhatsApp */
  color:#fff;
  border-color:transparent;
}
.header-nav .cta:hover{filter:brightness(0.95)}
.header-nav .shop{
  background-color:#FFE600; /* eBay yellow */
  color:#000;
  border:none;
  font-weight:700;
}
.header-nav .shop:hover{filter:brightness(0.95)}
.header-nav .shop img{height:28px}


/* === Promo media background (edge-to-edge) === */
.promo-media{
  border-radius:12px;
  height:240px;
  background-image:url('assets/images/Screenshot-2025-10-23-at-20.58.20.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid var(--border);
}
@media (max-width:900px){
  .promo-media{height:220px}
}