/* ===================================================
   style.css — Dogucar Collection  (v2 – Visual Overhaul)
   =================================================== */

/* ─────────────── TOKENS ─────────────── */
:root {
  --gold:        #c9a84c;
  --gold-light:  #f0c84a;
  --gold-dim:    rgba(201,168,76,0.12);
  --navy:        #06091a;
  --navy-2:      #0b1025;
  --navy-3:      #111e38;
  --card-bg:     rgba(10,18,40,0.75);
  --white:       #ffffff;
  --muted:       #8899b0;
  --dim:         #4a5568;
  --border:      rgba(201,168,76,0.14);
  --border-h:    rgba(201,168,76,0.45);
  --radius-xl:   22px;
  --radius-lg:   14px;
}

/* ─────────────── BASE ─────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:'Outfit',sans-serif;
  background: var(--navy);
  color: var(--white);
  line-height:1.65;
  overflow-x:hidden;
}
a   { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
em  { font-style:normal; color:var(--gold); }
.hidden { display:none !important; }
.container { max-width:1200px; margin:0 auto; padding:0 2rem; }
body { overflow-x:hidden; }
section { padding:6rem 0; position:relative; }

/* ─────────────── GLOBAL ROTATING LOGO (all sections) ─────────────── */
/* Fixed watermark that stays visible while you scroll */
.global-logo-spin {
  position: fixed;
  top: 50%;
  right: -180px;
  width: 520px;
  height: 520px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}
.global-logo-spin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.06;
  filter: blur(2px) saturate(0.5);
  animation: logoSpin 40s linear infinite;
  border-radius: 50%;
}

/* Per-section rotating logo — centred, subtle */
.section-logo-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 420px;
  transform: translate(-50%,-50%);
  pointer-events: none;
  z-index: 0;
}
.section-logo-spin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.045;
  filter: blur(3px) saturate(0.3);
  animation: logoSpin 35s linear infinite reverse;
  border-radius: 50%;
}

/* Hero orbit — bigger and slightly more visible */
.hero-logo-orbit {
  position: absolute;
  top: 50%;
  right: 5%;
  width: 560px;
  height: 560px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}
.hero-logo-orbit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.13;
  filter: blur(1px);
  animation: logoSpin 22s linear infinite;
  border-radius: 50%;
}

@keyframes logoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─────────────── SECTION COMMON ─────────────── */
.section-header {
  text-align:center;
  margin-bottom:3.5rem;
  position:relative;
  z-index:2;
}
.section-tag {
  display:inline-block;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--border);
  background:var(--gold-dim);
  padding:.35rem 1.1rem;
  border-radius:50px;
  margin-bottom:.9rem;
}
.section-header h2, .about-text h2 {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.9rem,4vw,3rem);
  font-weight:900;
  line-height:1.18;
  margin-bottom:.9rem;
}
.section-header p { font-size:1.05rem; color:var(--muted); max-width:580px; margin:0 auto; }

/* ─────────────── BUTTONS ─────────────── */
.btn-gold {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.85rem 2.2rem;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--navy);
  font-family:'Outfit',sans-serif;
  font-weight:700; font-size:.95rem;
  border-radius:50px; border:none; cursor:pointer;
  transition:all .28s; letter-spacing:.03em;
  box-shadow: 0 6px 24px rgba(201,168,76,0.22);
}
.btn-gold:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(201,168,76,0.38); }

.btn-outline {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.85rem 2.2rem;
  background:transparent; color:var(--gold);
  font-family:'Outfit',sans-serif;
  font-weight:600; font-size:.95rem;
  border-radius:50px; border:1.5px solid var(--gold);
  transition:all .28s; cursor:pointer;
}
.btn-outline:hover { background:rgba(201,168,76,.1); transform:translateY(-3px); }

.btn-mini {
  display:inline-flex; align-items:center;
  padding:.42rem 1.1rem;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--navy); font-weight:700; font-size:.78rem;
  border-radius:50px; transition:all .22s;
}
.btn-mini:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(201,168,76,.35); }

/* ─────────────── NAVBAR ─────────────── */
#navbar {
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  padding:.85rem 3rem;
  background:rgba(6,9,26,.82);
  backdrop-filter:blur(22px);
  border-bottom:1px solid var(--border);
  transition:all .3s;
}
#navbar.scrolled { padding:.55rem 3rem; background:rgba(6,9,26,.97); box-shadow:0 4px 30px rgba(0,0,0,.5); }

.nav-inner { max-width:1080px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.nav-logo { display:flex; align-items:center; gap:.75rem; font-size:1.05rem; font-weight:800; letter-spacing:.08em; }
.nav-logo img { width:44px; height:44px; border-radius:50%; object-fit:cover; border:1.5px solid var(--gold); }
.nav-logo em { color:var(--gold); }

.nav-links { display:flex; list-style:none; gap:2.2rem; }
.nav-links a { font-size:.84rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); transition:color .22s; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--gold); transition:width .3s; }
.nav-links a:hover { color:var(--gold); }
.nav-links a:hover::after { width:100%; }

.nav-admin-link {
  color:var(--gold) !important;
  border:1px solid var(--border);
  padding:.28rem .85rem;
  border-radius:50px;
  font-size:.78rem !important;
  transition:background .25s,border-color .25s;
}
.nav-admin-link:hover { background:rgba(201,168,76,.1); border-color:var(--border-h); }
.nav-admin-link::after { display:none !important; }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { display:block; width:24px; height:2px; background:var(--gold); border-radius:2px; transition:all .3s; }

/* ─────────────── HERO ─────────────── */
#hero {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding:0;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%,rgba(30,58,138,.35) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 20%,rgba(201,168,76,.10) 0%,transparent 60%),
    linear-gradient(180deg,#020817 0%,#06091a 50%,#020817 100%);
  z-index:0;
}
.hero-content { position:relative; z-index:2; text-align:center; max-width:780px; padding:2rem; animation:fadeUp 1s ease both; }

@keyframes fadeUp { from{opacity:0;transform:translateY(36px)} to{opacity:1;transform:translateY(0)} }

.hero-badge {
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.25em; text-transform:uppercase;
  color:var(--gold); padding:.4rem 1.5rem; border:1px solid var(--border); border-radius:50px;
  margin-bottom:1.5rem; background:rgba(201,168,76,.07); animation:fadeUp 1s .2s ease both;
}
.hero-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(3rem,8vw,6.5rem); font-weight:900; line-height:1.05; margin-bottom:1.5rem;
  animation:fadeUp 1s .35s ease both;
}
.hero-title .line1,.hero-title .line2 { display:block; }
.hero-title em {
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub { font-size:clamp(1rem,2vw,1.2rem); color:var(--muted); max-width:560px; margin:0 auto 2.5rem; animation:fadeUp 1s .5s ease both; }
.hero-cta { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; animation:fadeUp 1s .65s ease both; }

/* scroll hint */
.hero-scroll-indicator { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); z-index:2; text-align:center; color:var(--dim); font-size:.75rem; letter-spacing:.1em; animation:fadeUp 1s 1.1s ease both; }
.hero-scroll-indicator span { display:block; width:2px; height:40px; background:linear-gradient(to bottom,var(--gold),transparent); margin:0 auto .5rem; animation:scrollBounce 2s ease-in-out infinite; }
@keyframes scrollBounce { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(.6);opacity:.5} }

/* ─────────────── HERO BANNER IMAGE ─────────────── */
.hero-banner-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.32;
  filter: saturate(0.85);
  transition: opacity 1s ease;
}
.hero-banner-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(6,9,26,.92) 0%, rgba(6,9,26,.55) 50%, rgba(6,9,26,.75) 100%),
    linear-gradient(to top, rgba(6,9,26,.95) 0%, transparent 45%);
}
/* Hero content must sit above the banner */
.hero-content { z-index: 3; }
.hero-scroll-indicator { z-index: 3; }
.hero-logo-orbit { z-index: 2; }

/* ─────────────── SEARCH BAR ─────────────── */
.collection-search-wrap {
  margin-bottom: 1.2rem;
  position: relative;
  z-index: 3;
}
.search-box {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: rgba(10,18,40,.8);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: .75rem 1.4rem;
  max-width: 580px;
  margin: 0 auto;
  backdrop-filter: blur(14px);
  transition: border-color .25s, box-shadow .25s;
}
.search-box:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.12), 0 8px 24px rgba(0,0,0,.3);
}
.search-icon-svg { color: var(--gold); flex-shrink: 0; opacity:.8; }
.search-box input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--white); font-family: 'Outfit', sans-serif; font-size: .97rem;
}
.search-box input::placeholder { color: var(--dim); }
.search-clear {
  background: none; border: none; color: var(--dim); font-size: .9rem;
  cursor: pointer; padding: 0 .2rem; transition: color .2s; line-height:1;
}
.search-clear:hover { color: var(--white); }

/* ─────────────── BRAND FILTER PILLS ─────────────── */
.brand-filter-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 3;
}
.brand-filter-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.brand-pills { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.brand-pill {
  padding: .38rem 1rem;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .22s;
  letter-spacing: .04em;
}
.brand-pill:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.brand-pill.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-color: transparent;
  color: var(--navy);
  box-shadow: 0 4px 14px rgba(201,168,76,.35);
}

/* ─────────────── PRODUCT BRAND LABEL ─────────────── */
.product-brand {
  display: inline-block;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(201,168,76,.6);
  margin-bottom: .15rem;
  padding: .15rem .5rem;
  border: 1px solid rgba(201,168,76,.15);
  border-radius: 50px;
  background: rgba(201,168,76,.06);
}

/* ─────────────── BRAND SHORTCUT BUTTONS ─────────────── */
.brand-shortcuts {
  text-align: center;
  margin-bottom: 1.8rem;
  position: relative;
  z-index: 3;
}
.brand-shortcuts-label {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.brand-shortcut-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}
.brand-shortcut-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .6rem .9rem;
  min-width: 68px;
  background: rgba(10,18,40,.7);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: all .25s;
  backdrop-filter: blur(10px);
}
.brand-shortcut-btn .bs-icon {
  font-size: 1.4rem;
  line-height: 1;
  transition: transform .25s;
}
.brand-shortcut-btn .bs-text {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.brand-shortcut-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-dim);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.brand-shortcut-btn:hover .bs-icon { transform: scale(1.2); }
.brand-shortcut-btn.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-color: transparent;
  color: var(--navy);
  box-shadow: 0 6px 20px rgba(201,168,76,.4);
  transform: translateY(-3px);
}
.brand-shortcut-btn.active .bs-text { color: var(--navy); }

/* ─────────────── NO RESULTS ─────────────── */
.no-results {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--muted);
  position: relative;
  z-index: 2;
}
.no-results-icon { font-size: 3.5rem; margin-bottom: 1rem; display: block; opacity:.5; }
.no-results h3 { font-size: 1.3rem; font-weight: 700; color: var(--white); margin-bottom: .5rem; }
.no-results p  { font-size: .9rem; }

/* ─────────────── FOOTER (full) ─────────────── */
#footer { background:#030611; border-top:1px solid var(--border); padding:3rem 2rem; }
.footer-inner { max-width:1200px; margin:0 auto; text-align:center; }
.footer-logo { display:flex; align-items:center; justify-content:center; gap:.75rem; margin-bottom:.75rem; font-size:1.15rem; font-weight:800; letter-spacing:.08em; }
.footer-logo img { width:46px; height:46px; border-radius:50%; border:1.5px solid var(--gold); object-fit:cover; }
.footer-logo em { color:var(--gold); }
.footer-desc { color:var(--dim); font-size:.86rem; margin-bottom:1.4rem; }
.footer-links { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.8rem; }
.footer-links a { font-size:.8rem; font-weight:600; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; transition:color .2s; }
.footer-links a:hover { color:var(--gold); }
.footer-copy { font-size:.78rem; color:var(--dim); }

/* Contact icons */
.contact-icon { width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.instagram .contact-icon { background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); }
.whatsapp  .contact-icon { background:linear-gradient(135deg,#128c7e,#25d366); }
.contact-card h4 { font-size:1.1rem; font-weight:700; color:var(--white); margin-bottom:.25rem; }
.contact-card p  { font-size:.93rem; color:var(--muted); margin-bottom:.15rem; }
.contact-card span { font-size:.8rem; color:var(--dim); }
.contact-card.instagram:hover { border-color:#c13584; box-shadow:0 15px 40px rgba(193,53,132,.2); }
.contact-card.whatsapp:hover  { border-color:#25d366; box-shadow:0 15px 40px rgba(37,211,102,.2); }

/* ─────────────── STATS ─────────────── */
#stats {
  padding:3.5rem 0;
  background:linear-gradient(to right,#06091a,#0c1428,#06091a);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.stats-inner { max-width:1200px; margin:0 auto; padding:0 2rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; position:relative; z-index:2; }
.stat-card { text-align:center; padding:1.5rem 1rem; position:relative; }
.stat-card:not(:last-child)::after { content:''; position:absolute; right:0; top:20%; bottom:20%; width:1px; background:var(--border); }
.stat-num {
  display:block; font-size:2.6rem; font-weight:900;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-label { font-size:.82rem; color:var(--muted); font-weight:600; letter-spacing:.06em; margin-top:.3rem; display:block; }

/* ─────────────── ABOUT ─────────────── */
#about { background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%); }
.section-inner { max-width:1100px; margin:0 auto; padding:0 2rem; display:grid; grid-template-columns:1fr 1.5fr; gap:5rem; align-items:center; position:relative; z-index:2; }
.about-img-wrap { position:relative; display:flex; align-items:center; justify-content:center; }
.about-glow { position:absolute; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(201,168,76,.18) 0%,transparent 70%); pointer-events:none; }
.about-logo-big { width:280px; height:280px; object-fit:contain; border-radius:50%; border:2px solid var(--border-h); box-shadow:0 0 60px rgba(201,168,76,.22),0 0 100px rgba(30,58,138,.2); animation:logoPulse 4s ease-in-out infinite; }
@keyframes logoPulse { 0%,100%{box-shadow:0 0 40px rgba(201,168,76,.18),0 0 80px rgba(30,58,138,.18)} 50%{box-shadow:0 0 70px rgba(201,168,76,.35),0 0 120px rgba(30,58,138,.28)} }
.about-text { position:relative; z-index:2; }
.about-text .section-tag { display:inline-block; margin-bottom:1rem; }
.about-text h2 { margin-bottom:1.5rem; }
.about-text p { color:var(--muted); margin-bottom:1.4rem; font-size:1.02rem; }

/* ─────────────── CATEGORIES ─────────────── */
#categories { background:var(--navy-2); }
.categories-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; position:relative; z-index:2; }
.cat-card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:2.5rem 1.5rem;
  text-align:center; cursor:pointer;
  transition:all .35s; position:relative; overflow:hidden;
  backdrop-filter:blur(12px);
}
.cat-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(201,168,76,.07) 0%,transparent 100%); opacity:0; transition:opacity .3s; }
.cat-card:hover { border-color:var(--border-h); transform:translateY(-9px); box-shadow:0 24px 60px rgba(0,0,0,.45); }
.cat-card:hover::before { opacity:1; }
.cat-icon { font-size:3rem; margin-bottom:1.2rem; display:block; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); transition:transform .3s; }
.cat-card:hover .cat-icon { transform:scale(1.18) rotate(-5deg); }
.cat-card h3 { font-size:1.12rem; font-weight:700; margin-bottom:.7rem; }
.cat-card p  { font-size:.86rem; color:var(--muted); line-height:1.6; margin-bottom:1.4rem; }
.cat-link { font-size:.82rem; font-weight:700; color:var(--gold); letter-spacing:.05em; transition:letter-spacing .3s; }
.cat-card:hover .cat-link { letter-spacing:.14em; }

/* ─────────────── COLLECTION ─────────────── */
#collection { background:var(--navy); }

.filter-tabs { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.5rem; position:relative; z-index:2; }
.filter-btn {
  padding:.5rem 1.4rem; border-radius:50px; border:1.5px solid var(--border);
  background:transparent; color:var(--muted);
  font-family:'Outfit',sans-serif; font-size:.84rem; font-weight:600;
  cursor:pointer; transition:all .22s;
}
.filter-btn:hover,.filter-btn.active { background:linear-gradient(135deg,var(--gold),var(--gold-light)); border-color:transparent; color:var(--navy); }

/* ---- Product Grid ---- */
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; position:relative; z-index:2; }

.product-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all .35s;
  backdrop-filter: blur(14px);
  animation: cardFadeIn .4s ease both;
  position: relative;
}

@keyframes cardFadeIn { from{opacity:0;transform:scale(.95) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }

.product-card.hidden { display:none; }

.product-card::after {
  content:'';
  position:absolute; inset:0;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(201,168,76,.06) 0%, transparent 60%);
  opacity:0; transition:opacity .35s; pointer-events:none;
}

.product-card:hover { border-color:var(--border-h); transform:translateY(-8px); box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(201,168,76,.1); }
.product-card:hover::after { opacity:1; }

/* Image area */
.product-img-wrap {
  position:relative; height:210px; overflow:hidden; cursor:zoom-in;
}

.product-img-wrap img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.product-card:hover .product-img-wrap img { transform:scale(1.06); }

.product-img-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative;
}
.sports-placeholder   { background:linear-gradient(135deg,#0c1c48,#162f7a); }
.sports2-placeholder  { background:linear-gradient(135deg,#18103a,#2d1f6a); }
.sports3-placeholder  { background:linear-gradient(135deg,#0c1e48,#1a2e64); }
.classic-placeholder  { background:linear-gradient(135deg,#281400,#3d2800); }
.classic2-placeholder { background:linear-gradient(135deg,#091a38,#102444); }
.classic3-placeholder { background:linear-gradient(135deg,#250505,#3b0808); }
.moto-placeholder     { background:linear-gradient(135deg,#082410,#0e3818); }
.truck-placeholder    { background:linear-gradient(135deg,#141420,#1e1e30); }

.car-emoji {
  font-size:5rem;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.6));
  transition:transform .35s;
  user-select:none;
}
.product-card:hover .car-emoji { transform:scale(1.12); }

/* Subtle radial glow behind emoji */
.product-img-placeholder::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 55%,rgba(201,168,76,.12) 0%,transparent 70%);
  pointer-events:none;
}

.product-badge {
  position:absolute; top:.75rem; right:.75rem;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--navy); font-size:.68rem; font-weight:800; letter-spacing:.08em;
  padding:.25rem .7rem; border-radius:50px; text-transform:uppercase;
  box-shadow:0 4px 12px rgba(201,168,76,.3);
}
.product-img-count {
  position:absolute; bottom:.55rem; right:.55rem;
  background:rgba(0,0,0,.72); color:#fff;
  font-size:.68rem; font-weight:700;
  padding:.18rem .55rem; border-radius:50px;
  backdrop-filter:blur(4px);
}

.product-info { padding:1.25rem 1.35rem; }
.product-cat { font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.4rem; }
.product-info h4 { font-size:1rem; font-weight:700; margin-bottom:.35rem; line-height:1.3; }
.product-info p  { font-size:.79rem; color:var(--dim); margin-bottom:1rem; }

.product-footer { display:flex; align-items:center; justify-content:space-between; }
.product-scale { font-size:.76rem; font-weight:700; color:var(--muted); background:rgba(255,255,255,.05); padding:.25rem .65rem; border-radius:50px; border:1px solid var(--border); }

.collection-more { text-align:center; margin-top:3rem; position:relative; z-index:2; }

/* ─────────────── WHY US ─────────────── */
#why { background:var(--navy-2); }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; position:relative; z-index:2; }
.why-card {
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:2.2rem 1.5rem; text-align:center; transition:all .3s; backdrop-filter:blur(12px);
}
.why-card:hover { border-color:var(--border-h); transform:translateY(-6px); box-shadow:0 18px 50px rgba(0,0,0,.44); }
.why-icon { font-size:2.4rem; margin-bottom:1rem; display:block; }
.why-card h4 { font-size:1rem; font-weight:700; color:var(--gold); margin-bottom:.75rem; }
.why-card p  { font-size:.86rem; color:var(--muted); line-height:1.65; }

/* ─────────────── CONTACT ─────────────── */
#contact { background:var(--navy); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; max-width:800px; margin:0 auto; position:relative; z-index:2; }
.contact-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:.6rem;
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:2.2rem 2rem; transition:all .3s; cursor:pointer; backdrop-filter:blur(12px);
}
.contact-card:hover { border-color:var(--border-h); transform:translateY(-5px); box-shadow:0 16px 44px rgba(0,0,0,.4); }
.contact-card h4 { font-size:1.15rem; font-weight:700; color:var(--white); }
.contact-card p  { font-size:.95rem; color:var(--muted); }

/* ─────────────── FOOTER ─────────────── */
#footer { background:#030611; border-top:1px solid var(--border); padding:2.5rem 2rem; text-align:center; }
#footer p { font-size:.82rem; color:var(--dim); }

/* ─────────────── SCROLL REVEAL ─────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ─────────────── MUSIC BUTTON ─────────────── */
.music-btn {
  position:fixed; bottom:2rem; left:2rem;
  z-index:900;
  width:50px; height:50px;
  border-radius:50%;
  background:rgba(6,12,24,.75);
  border:1px solid rgba(201,168,76,.3);
  color:#fff;
  font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  transition:all .3s ease;
}
.music-btn:hover {
  background:rgba(201,168,76,.15);
  border-color:var(--gold);
  transform:scale(1.08);
}
.music-btn.playing {
  border-color:var(--gold);
  box-shadow:0 0 15px rgba(201,168,76,.3);
}

/* ─────────────── LIGHTBOX ─────────────── */
#lightbox {
  position:fixed; inset:0; z-index:1100;
  background:rgba(2,8,16,.96); backdrop-filter:blur(18px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2rem; cursor:zoom-out; animation:lbIn .25s ease;
}
@keyframes lbIn { from{opacity:0} to{opacity:1} }
#lightbox.hidden { display:none; }
#lightboxImg { max-width:90vw; max-height:78vh; object-fit:contain; border-radius:18px; box-shadow:0 40px 100px rgba(0,0,0,.8); border:1px solid rgba(201,168,76,.2); animation:lbImgIn .3s ease both; cursor:default; }
@keyframes lbImgIn { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }
#lightboxEmoji { font-size:10rem; animation:lbImgIn .3s ease both; cursor:default; user-select:none; }
#lightboxCaption { margin-top:1.25rem; text-align:center; animation:lbImgIn .35s .05s ease both; }
#lightboxCaption strong { display:block; font-size:1.2rem; font-weight:700; margin-bottom:.3rem; }
#lightboxCaption span { font-size:.85rem; color:rgba(255,255,255,.45); background:rgba(201,168,76,.1); padding:.25rem .8rem; border-radius:50px; border:1px solid rgba(201,168,76,.2); }
#lightboxClose { position:fixed; top:1.25rem; right:1.5rem; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); color:#fff; width:40px; height:40px; border-radius:50%; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; z-index:1101; }
#lightboxClose:hover { background:rgba(255,255,255,.2); }

/* Lightbox gallery navigation */
.lb-nav {
  display:flex; align-items:center; gap:1.2rem;
  margin-top:1rem;
  color:rgba(255,255,255,.8); font-size:.9rem; font-weight:600;
}
.lb-nav button {
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:#fff; width:46px; height:46px;
  border-radius:50%; font-size:1.5rem;
  cursor:pointer; transition:background .2s;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}
.lb-nav button:hover { background:rgba(255,255,255,.25); }

/* ─────────────── RESPONSIVE ─────────────── */

/* ─── Tablet (1024px) ─── */
@media (max-width:1024px) {
  .categories-grid { grid-template-columns:repeat(2,1fr); }
  .product-grid { grid-template-columns:repeat(2,1fr); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
}

/* ─── Phablet / Tablet portrait (768px) ─── */
@media (max-width:768px) {
  /* Disable heavy spinning watermarks on mobile for performance */
  .global-logo-spin { display:none; }
  .section-logo-spin { display:none; }
  .hero-logo-orbit { display:none; }

  /* Navbar */
  #navbar { padding:.75rem 1rem; }
  #navbar.scrolled { padding:.5rem 1rem; }
  .nav-inner { padding:0; }
  .nav-logo { font-size:.9rem; gap:.5rem; }
  .nav-logo img { width:38px; height:38px; }

  .nav-links {
    display:none; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(6,9,26,.98);
    padding:1.2rem 1.5rem; gap:1rem;
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(20px);
  }
  .nav-links.open { display:flex; }
  .hamburger { display:flex; }

  /* Hero */
  #hero { min-height:100svh; }
  .hero-title { font-size:clamp(2.2rem,9vw,3.5rem); }
  .hero-sub { font-size:.95rem; padding:0 .5rem; }
  .hero-badge { font-size:.65rem; letter-spacing:.15em; }
  .hero-content { padding:6rem 1.5rem 2rem; }
  .hero-cta { flex-direction:column; align-items:center; gap:.75rem; }
  .btn-gold, .btn-outline { width:100%; max-width:280px; justify-content:center; font-size:.9rem; padding:.8rem 1.5rem; }

  /* Stats */
  #stats { padding:2.5rem 0; }
  .stats-inner { grid-template-columns:repeat(2,1fr); gap:.75rem; padding:0 1rem; }
  .stat-card:nth-child(2)::after,.stat-card:nth-child(4)::after { display:none; }
  .stat-num { font-size:2rem; }
  .stat-label { font-size:.75rem; }

  /* About */
  .section-inner { grid-template-columns:1fr; gap:2.5rem; text-align:center; padding:0 1rem; }
  .about-img-wrap { justify-content:center; }
  .about-logo-big { width:170px; height:170px; }

  /* Categories */
  .categories-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }
  .cat-card { padding:1.75rem 1rem; }
  .cat-icon { font-size:2.2rem; }

  /* Brand shortcuts — scrollable horizontal row */
  .brand-shortcuts { margin-bottom:1.2rem; }
  .brand-shortcuts-label { font-size:.65rem; margin-bottom:.65rem; }
  .brand-shortcut-btns {
    display:flex; flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    gap:.5rem;
    justify-content:flex-start;
    padding:.25rem .25rem .6rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .brand-shortcut-btns::-webkit-scrollbar { display:none; }
  .brand-shortcut-btn {
    flex-shrink:0;
    min-width:62px; padding:.55rem .7rem;
    border-radius:12px;
  }
  .brand-shortcut-btn .bs-icon { font-size:1.25rem; }
  .brand-shortcut-btn .bs-text { font-size:.62rem; }

  /* Search */
  .search-box { padding:.65rem 1rem; border-radius:12px; max-width:100%; }
  .search-box input { font-size:.9rem; }

  /* Brand pills — scrollable row */
  .brand-filter-bar { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:.4rem; padding-bottom:.3rem; scrollbar-width:none; }
  .brand-filter-bar::-webkit-scrollbar { display:none; }
  .brand-pill { flex-shrink:0; font-size:.72rem; padding:.3rem .85rem; }

  /* Filter tabs */
  .filter-tabs { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:.4rem; padding-bottom:.3rem; scrollbar-width:none; }
  .filter-tabs::-webkit-scrollbar { display:none; }
  .filter-btn { flex-shrink:0; font-size:.76rem; padding:.45rem 1rem; }

  /* Product grid */
  .product-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }
  .product-img-wrap { height:160px; }
  .car-emoji { font-size:3.5rem; }
  .product-info { padding:1rem; }
  .product-info h4 { font-size:.9rem; }
  .product-info p { font-size:.74rem; margin-bottom:.75rem; }
  .btn-mini { font-size:.72rem; padding:.38rem .85rem; }

  /* Why us */
  .why-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }
  .why-card { padding:1.7rem 1rem; }

  /* Contact */
  .contact-grid { grid-template-columns:1fr; max-width:100%; gap:1rem; }
  .contact-card { flex-direction:row; padding:1.5rem; }
  .contact-icon { width:52px; height:52px; flex-shrink:0; }
  .contact-icon svg { width:28px; height:28px; }

  /* Footer */
  #footer { padding:2rem 1rem; }
  .footer-links { gap:1rem; }
  .footer-links a { font-size:.72rem; }

  /* Section general */
  section { padding:4.5rem 0; }
  .container { padding:0 1rem; }
  .section-header { margin-bottom:2.5rem; }
  .section-header h2, .about-text h2 { font-size:clamp(1.6rem,6vw,2.2rem); }
}

/* ─── Mobile (540px) ─── */
@media (max-width:540px) {
  /* Product grid — 2 columns on small screen */
  .product-grid { grid-template-columns:repeat(2,1fr); gap:.75rem; }
  .product-img-wrap { height:140px; }
  .car-emoji { font-size:3rem; }
  .product-info { padding:.8rem; }
  .product-info h4 { font-size:.82rem; }
  .product-info p { font-size:.68rem; margin-bottom:.6rem; }
  .product-footer { flex-wrap:wrap; gap:.3rem; }
  .btn-mini { font-size:.68rem; padding:.32rem .7rem; }
  .product-scale { font-size:.68rem; }

  /* Categories — single column */
  .categories-grid { grid-template-columns:1fr; gap:.8rem; }
  .cat-card { padding:1.4rem 1.2rem; display:flex; flex-direction:row; align-items:center; gap:1rem; text-align:left; }
  .cat-card .cat-icon { font-size:2rem; margin-bottom:0; flex-shrink:0; }
  .cat-card h3 { font-size:1rem; margin-bottom:.25rem; }
  .cat-card p { font-size:.8rem; margin-bottom:.5rem; }

  /* Why us — single column */
  .why-grid { grid-template-columns:1fr; gap:.8rem; }
  .why-card { padding:1.4rem 1.2rem; }

  /* Stats — 2 column */
  .stats-inner { grid-template-columns:repeat(2,1fr); }

  /* Hero */
  .hero-title { font-size:clamp(2rem,9vw,3rem); }
  .hero-scroll-indicator { display:none; }
  .hero-content { padding:5rem 1rem 2rem; }

  /* Sections */
  section { padding:3.5rem 0; }
  .section-logo-spin { display:none; }

  /* Search box full width */
  .search-box { margin:0; border-radius:10px; }

  /* Footer */
  .footer-links { gap:.75rem; flex-wrap:wrap; }
}