:root{
  --sw-black:#07070A;
  --sw-black-2:#0B0B10;
  --sw-gold:#D6B25E;
  --sw-gold-2:#F4D38A;
  --sw-gold-3:#3f2c00;
  --sw-white:#F6F3EA;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--sw-black); color:var(--sw-white); }

/* ---- utilities ---- */
.container-max{ max-width: 1200px; margin: 0 auto; }
.text-gold{ color: var(--sw-gold); }
.bg-glass{ background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); }
.ring-gold{ border-color: rgba(214,178,94,.30) !important; }
.shadow-lux{ box-shadow: 0 18px 70px rgba(0,0,0,.55), 0 0 26px rgba(214,178,94,.10); }
.hr-soft{ border-color: rgba(255,255,255,.08); }

/* ---- cursor glow ---- */
#cursorGlow{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
}
#cursorGlow::before{
  content:"";
  position:absolute;
  width: 460px;
  height: 460px;
  left: var(--gx, -999px);
  top: var(--gy, -999px);
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(214,178,94,.14), rgba(214,178,94,0) 62%);
}

/* ---- header ---- */
.header-wrap{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
}
.navbar-shadow{
  box-shadow: 0 14px 55px rgba(0,0,0,.62);
}

.topbar{
  background: rgba(11,11,16,.92);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.catbar{
  background: rgba(11,11,16,.92);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.logo-badge{
  width: 40px; height: 40px;
  border-radius: 14px;
  background: rgb(255, 255, 255);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--sw-gold);
  display:grid; place-items:center;
  font-weight: 900;
}

.searchbox{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.25);
}
.searchbox input{
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  color: var(--sw-white);
  border: none;
  outline: none;
}
.searchbox input::placeholder{ color: rgba(255,255,255,.35); }
.searchbox button{
  background: var(--sw-gold);
  color: #0b0b10;
  font-weight: 900;
  padding: 10px 16px;
  border: none;
  cursor: pointer;
}

.nav-item{
  display:inline-flex;
  align-items:center;
  padding: 14px 10px;
  border-bottom: 2px solid transparent;
  transition: all .18s ease;
  letter-spacing: .18em;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.90);
}
.nav-item:hover{
  border-bottom-color: rgba(214,178,94,.85);
  color: rgba(244,211,138,.95);
}

.action-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: background .18s ease;
}
.action-btn:hover{ background: rgba(255,255,255,.07); }

.icon-bubble{
  width: 28px; height: 28px;
  border-radius: 999px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--sw-gold);
  font-size: 13px;
}

/* ---- mega menu ---- */
.mega{
  position: relative;
}
.mega-panel{
  position:absolute;
  left:0;
  top:100%;
  width: 760px;
  border-radius: 18px;
  background: rgba(15,15,20,.92);
  border: 1px solid rgba(214,178,94,.20);
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
  backdrop-filter: blur(14px);
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: all .18s ease;
  margin-top: 10px;
  padding: 18px;
}
.mega:hover .mega-panel{ transform: translateY(0); opacity: 1; pointer-events: auto; }

.mega-title{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(214,178,94,.70);
  margin-bottom: 10px;
  font-weight: 900;
}
.mega-link{
  display:block;
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 13px;
  color: rgba(246,243,234,.85);
  transition: background .15s ease;
  text-decoration: none;
}
.mega-link:hover{ background: rgba(214,178,94,.08); }

/* ---- buttons ---- */
.btn-gold{
  background: var(--sw-gold);
  color: #0b0b10;
  font-weight: 900;
  border-radius: 16px;
  padding: 12px 16px;
  border: none;
  cursor:pointer;
  transition: all .22s ease;
}
.btn-gold:hover{ opacity:.92; transform: translateY(-1px); }
.btn-ghost-gold{
  background: rgba(214,178,94,.08);
  border: 1px solid rgba(214,178,94,.28);
  color: rgba(244,211,138,.95);
  font-weight: 900;
  border-radius: 16px;
  padding: 12px 16px;
  cursor:pointer;
  transition: all .22s ease;
}
.btn-ghost-gold:hover{ background: rgba(214,178,94,.12); border-color: rgba(214,178,94,.42); }

/* ---- shine hover ---- */
.shine{ position: relative; overflow: hidden; }
.shine::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(115deg, transparent 40%, rgba(214,178,94,.28) 50%, transparent 60%);
  transform: translateX(-60%) rotate(15deg);
  transition: transform .7s ease;
  pointer-events:none;
}
.shine:hover::before{ transform: translateX(60%) rotate(15deg); }

/* ---- hero ---- */
.hero{
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 18% 20%, rgba(214,178,94,.12), transparent 60%),
    radial-gradient(900px 500px at 78% 10%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.80), var(--sw-black));
}
.hero-media{
  position:absolute;
  inset:0;
  opacity:.18;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), transparent 60%);
}

/* ---- cards & sections ---- */
.section-card{
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.section-card:hover{ border-color: rgba(214,178,94,.25); }

.grid-card{
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.grid-card:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.07);
  border-color: rgba(214,178,94,.28);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(214,178,94,.10);
  border: 1px solid rgba(214,178,94,.18);
  color: rgba(244,211,138,.95);
  font-size: 12px;
  font-weight: 900;
}

/* ---- reveal ---- */
.reveal-init{ opacity:0; transform: translateY(18px) scale(.99); }
.reveal-show{ opacity:1; transform: translateY(0) scale(1); transition: all .85s cubic-bezier(.2,.8,.2,1); }

/* ---- lighting finder ---- */
.finder-chip{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  color: rgba(255,255,255,.85);
}
.finder-card{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius: 18px;
  padding: 16px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 14px;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.finder-card:hover{ background: rgba(255,255,255,.10); transform: translateY(-2px); }
.finder-ico{
  width: 34px; height: 34px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 14px;
  opacity:.9;
}
.finder-pill{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  font-size: 13px;
  transition: all .2s ease;
}
.finder-pill:hover{ background: rgba(255,255,255,.10); }
.finder-style{
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(10,10,10,.55);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  font-size: 13px;
  transition: all .2s ease;
}
.finder-style:hover{ border-color: rgba(214,178,94,.40); }
.finder-active{
  background: rgba(214,178,94,.14) !important;
  border-color: rgba(214,178,94,.45) !important;
}

/* ---- footer ---- */
.footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(11,11,16,.88);
}
.footer a{ color: rgba(255,255,255,.78); text-decoration:none; }
.footer a:hover{ color: rgba(244,211,138,.95); }


/* ===== Top Category Tiles ===== */
.cat-tile{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgb(255, 255, 255);
  border: 1px solid var(--sw-gold);
  transition: all .22s ease;
  text-decoration:none;
  color: rgba(0, 0, 0, 0.92);
  min-height: 62px;
}

.cat-tile:hover{
  transform: translateY(-2px);
  background: rgb(255, 255, 255);
  border-color: rgba(214,178,94,.35);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.cat-ico{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  /* background: rgba(255,255,255,.05); */
  /* border: 1px solid var(--sw-gold);; */
  color: var(--sw-gold);
  font-size: 18px;
  flex: 0 0 auto;
}

.cat-ico img{
  width: 52px;
  height: 52px;
}

.cat-name{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .02em;
}

.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;            /* fills hero */
  transform: none;              /* no extra zoom */
  filter: saturate(1.05) contrast(1.06);
}

/* Move hero copy card to the right on desktop */
.hero-copy-wrap{
  display:flex;
  justify-content:center;     /* default for small */
}

@media (min-width: 1024px){
  .hero-copy-wrap{
    justify-content:flex-end; /* right side */
  }
  .hero-copy{
    margin-right: 2vw;        /* breathing from edge */
    max-width: 660px;
  }
}

/* Optional: keep it slightly above center */
@media (min-width: 1024px){
  .hero-copy{
    transform: translateY(-10px);
  }
}




/* .hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 35%, rgba(214,178,94,.18), transparent 60%),
    radial-gradient(900px 520px at 70% 30%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(to right,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.32) 45%,
      rgba(0,0,0,.22) 100%
    ),
    linear-gradient(to bottom,
      rgba(0,0,0,.05),
      rgba(0,0,0,.35),
      rgba(7,7,10,.85)
    );
} */


.hero-copy{
  position: relative;
  z-index: 20; /* above hotspots */
  max-width: 640px;
  padding: 18px 18px;
  border-radius: 22px;
  background: rgba(7,7,10,.45);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
}

.hotspots{
  position:absolute;
  inset:0;
  pointer-events: none;
}

.hotspot{
  position:absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%,-50%);
  pointer-events: auto;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.hotspot .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--sw-gold);
  box-shadow:
    0 0 0 6px rgba(214,178,94,.16),
    0 0 18px rgba(214,178,94,.35);
  position: relative;
}

.hotspot .dot::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 999px;
  border: 1px solid rgba(214,178,94,.28);
  animation: pulseGold 1.9s ease-out infinite;
}

@keyframes pulseGold{
  0%{ transform: scale(.55); opacity:.9; }
  100%{ transform: scale(1.35); opacity:0; }
}

.hotspot .label{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15,15,20,.72);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  color: rgba(246,243,234,.9);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
  transform: translateY(0);
  transition: all .18s ease;
  white-space: nowrap;
}

.hotspot:hover .label{
  border-color: rgba(214,178,94,.45);
  background: rgba(214,178,94,.10);
  color: rgba(244,211,138,.98);
  transform: translateY(-2px);
}

.hero-grain{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* ===== Cinematic Hero ===== */
.hero-hotspot{
  position: relative;
  min-height: 92vh;          /* KEY FIX */
  height: 92vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}


/* Premium fade divider under hero */
.hero-hotspot::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 90px;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0),
    rgba(7,7,10,1)
  );
  pointer-events:none;
}


/* Top categories section: extra spacing */
.topcats-wrap{
  padding-top: 42px;
}

.hero-hotspot::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("../img/hero.png") center/cover no-repeat;
  filter: blur(20px) brightness(.6);
  transform: scale(1.15);
  opacity: .55;
  z-index: 0;
}
.hero-img{ z-index: 1; }
.hero-overlay{ z-index: 2; }
.container-max{ position: relative; z-index: 3; }
.hotspots{ z-index: 10; }
.hero-grain{ z-index: 4; }
.hero-copy{ z-index: 20; position: relative; }


/* ===== HERO: allow copy to move further right (override container-max) ===== */
.hero-hotspot .hero-copy-wrap{
  max-width: none;          /* removes 1200px clamp */
  width: 100%;
}

@media (min-width: 1024px){
  .hero-hotspot .hero-copy-wrap{
    justify-content: flex-end;
    padding-right: 6vw;    /* increase this if needed: 12vw / 14vw */
  }
}


/* ===== Finder: image on top, text below ===== */
.finder-card{
  flex-direction: column;          /* was row */
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 14px 12px;
  min-height: 110px;               /* gives space for image */
}

/* image box */
.finder-img{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  place-items: center;
}

/* actual image */
.finder-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;               /* use contain if icons */
  display: block;
  opacity: .95;
}

/* label text */
.finder-label{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}

/* ===== Finder Tiles (Image BIG like reference) ===== */
.finder-tile{
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  transition: all .25s ease;
  overflow: hidden;
  text-align: center;
}

/* hover */
.finder-tile:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,.06);
  border-color: rgba(214,178,94,.35);
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
}

/* IMAGE AREA (BIG) */
.finder-tile .finder-img{
  width: 100%;
  height: 250px;               /* 🔥 key change */
  border-radius: 14px;
  overflow: hidden;
  background: #111;
}

/* image itself */
.finder-tile .finder-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;           /* fills like your example */
  display: block;
}

/* text */
.finder-tile .finder-label{
  margin-top: 10px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.95);
}

/* selected state */
.finder-tile.finder-active{
  border-color: rgba(214,178,94,.6);
  background: rgba(214,178,94,.08);
}