/* Eldorado-style clean + subtle neon accents */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

.price-updating {
  opacity: 0;
  transition: opacity 0.4s ease, text-shadow 0.3s ease;
  text-shadow: 0 0 10px #00ffc6;
}

.price-updating.removed {
  opacity: 1;
}

:root{
  --bg: #0f1115;
  --card: #0f1720;
  --muted: #9aa6b2;
  --accent: #ffd36b; /* gold */
  --accent-2: #7fd3ff; /* soft neon */
  --glass: rgba(255,255,255,0.03);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#071018 0%, #0f1115 60%);
  color: #e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* topbar */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 28px;
  position:sticky;
  top:0;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  z-index:10;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent-2), #8a9bff);
  box-shadow:0 6px 30px rgba(127,140,255,0.08);
  font-size:20px;color:#071017;
}
.brand-title{font-weight:700;font-size:18px;color:#fff}

/* top controls */
.top-controls{display:flex;align-items:center;gap:14px}
.search{display:flex;align-items:center;background:var(--glass);padding:6px;border-radius:10px}
.search input{border:none;background:transparent;color:inherit;padding:6px 10px;outline:none;width:180px}
.search button{border:none;background:transparent;color:inherit;cursor:pointer;font-size:16px}

.country-note{color:var(--muted);font-size:13px;padding:6px 10px;border-radius:8px}

/* hero */
.hero{padding:44px 20px 8px;text-align:center}
.hero-title{font-size:40px;margin:6px 0;color:transparent;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text}
.hero-sub{color:var(--muted);max-width:820px;margin:6px auto 0}

/* container + grid */
.container{max-width:1100px;margin:20px auto;padding:0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:18px}

/* card */
.card{
  display:block;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 8px 30px rgba(0,0,0,0.6);transition:transform .28s, box-shadow .28s;
  transform: translateY(0);
}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 60px rgba(0,0,0,0.8)}
.card-media{height:180px;background-size:cover;background-position:center;filter:contrast(1.05) saturate(1.05)}
.card-body{padding:14px}
.card-body h3{margin:4px 0 8px;font-size:18px}
.price{font-weight:700;color:var(--accent);font-size:16px}
.tag{display:inline-block;margin-top:8px;background:rgba(255,255,255,0.02);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)}

/* product single */
.single .product-card{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start;padding:28px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 12px 40px rgba(0,0,0,0.7)}
.product-media{height:420px;border-radius:12px;background-size:cover;background-position:center;box-shadow:inset 0 0 120px rgba(0,0,0,0.2)}
.product-info h1{margin:0 0 8px;font-size:30px}
.lead{color:var(--muted);margin-bottom:14px}
.meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0}
.meta-sub{color:#cfe7ff;margin-top:6px}
.trust{margin:8px 0;padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));border:1px solid rgba(255,255,255,0.02);color:var(--muted)}

.buy-row{display:flex;align-items:center;gap:18px;margin-top:16px}
.price.big{font-size:28px;color:var(--accent)}
.buy-btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#071017;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:700;box-shadow:0 10px 30px rgba(255,211,107,0.12)}
.buy-btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(127,140,255,0.08)}
.notes.small{color:var(--muted);margin-top:10px;font-size:13px}

/* footer */
.footer{max-width:1100px;margin:30px auto;padding:12px 18px;color:var(--muted);text-align:center}

/* small screens */
@media (max-width:900px){
  .single .product-card{grid-template-columns:1fr;padding:18px}
  .product-media{height:260px}
  .hero-title{font-size:28px}
  .search input{width:120px}
  .top-controls{gap:8px}
}
/* ======= LOGO CLICKABLE ======= */
.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-img {
  height: 44px;
  width: auto;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(255, 200, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.logo-img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 18px rgba(255, 200, 0, 0.6);
}

.brand-title {
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  cursor: pointer;
}

.brand-title:hover {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-2);
}