/* ─── NAV ────────────────────────────────── */
.nav{
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:0 16px;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:10px;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  box-shadow:var(--shadow-sm);
}
.nav-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0;}
.nav-brand{
  font-family:'Playfair Display',serif;
  font-size:1rem;
  color:var(--ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:7px;
  margin-right:8px;
  flex-shrink:0;
}
.brand-logo{
  height:58px;
  width:auto;
  display:block;
}

.login-box-logo.cata-logo-wrap{
  margin-bottom:18px;
}
.login-box-logo.cata-logo-wrap img{
  height:132px;
  width:auto;
  object-fit:contain;
  opacity:1;
}

.landing-logo-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:14px;
}
.landing-logo-wrap img{
  height:240px;
  width:auto;
  display:block;
  object-fit:contain;
}

@media(max-width:760px){
  .brand-logo{height:48px;}
  .login-box-logo.cata-logo-wrap img{height:94px;}
  .landing-logo-wrap img{height:160px;}
}

.nav-back{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--ink2);
  cursor:pointer;
  border:1.5px solid var(--border);
  background:var(--white);
  border-radius:999px;
  font-family:'Outfit',sans-serif;
  padding:0;
  transition:border-color var(--transition),color var(--transition),background var(--transition),transform var(--transition),opacity var(--transition);
}
.nav-back:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-light);transform:translateY(-1px);}
.nav-back svg{width:16px;height:16px;}
.nav-back-label{display:none;}
.nav-back.home-state{opacity:.68;}
.nav-sect{
  display:none;
  align-items:center;
  gap:6px;
  font-size:0.82rem;
  font-weight:600;
}
.nav-sect.show{display:flex;}
.nav-sect img{width:20px;height:20px;border-radius:50%;object-fit:contain;background:var(--bg);padding:2px;}
.nav-count{display:none;}

/* ─── TOPBAR ─────────────────────────── */
.topbar{
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:8px 16px;
  display:none;
  gap:8px;
  align-items:center;
  position:-webkit-sticky;
  position:sticky;
  top:var(--nav-h);
  z-index:40;
}
.topbar.show{display:flex;}
.search-box{position:relative;flex:1;max-width:340px;}
.search-box svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;}
.si{
  width:100%;
  padding:7px 10px 7px 30px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:'Outfit',sans-serif;
  font-size:0.8rem;
  background:var(--bg);
  color:var(--ink);
  outline:none;
  transition:border-color var(--transition),background var(--transition);
}
.si:focus{border-color:var(--accent);background:var(--white);}
.si::placeholder{color:var(--muted);}
.rc{font-size:0.7rem;color:var(--muted);white-space:nowrap;margin-left:auto;}

/* dropdown */
.drop{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  z-index:200;overflow:hidden;display:none;
  max-height:280px;overflow-y:auto;
}
.sdrop-item{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--border);}
.sdrop-item:last-child{border-bottom:none;}
.sdrop-item:hover{background:var(--bg);}
.sdrop-thumb{width:54px;height:54px;flex-shrink:0;border-radius:8px;background:#f0ede8;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.sdrop-thumb img{width:100%;height:100%;object-fit:contain;padding:4px;}
.sdrop-name{font-size:0.76rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sdrop-name mark,.sdrop-code mark{background:var(--yellow);border-radius:2px;padding:0 1px;font-style:normal;}
.sdrop-meta{font-size:0.64rem;color:var(--muted);margin-top:1px;display:flex;gap:5px;}
.sdrop-sec{color:var(--accent);font-weight:600;}
.sdrop-more{padding:7px 10px;font-size:0.7rem;color:var(--accent);text-align:center;font-weight:600;background:var(--bg);}
.sdrop-none{padding:10px;font-size:0.76rem;color:var(--muted);text-align:center;}

/* ─── NAV HOME EXTRAS ────────────────────── */
.nav-home-extras{
  display:flex;align-items:center;gap:6px;margin-left:auto;
}
.nav-pill{
  display:flex;align-items:center;gap:5px;
  padding:5px 10px;
  border-radius:20px;
  border:1.5px solid var(--border);
  background:var(--white);
  font-family:'Outfit',sans-serif;
  font-size:0.72rem;font-weight:600;
  color:var(--ink2);
  cursor:pointer;
  white-space:nowrap;
  transition:all var(--transition);
  position:relative;
}
.nav-pill:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
.nav-pill.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.nav-pill.active:hover{background:#004a99;}
.nav-pill-dot{
  width:6px;height:6px;border-radius:50%;
  background:#ef4444;
  flex-shrink:0;
}
.nav-search-wrap{
  position:relative;
  display:flex;align-items:center;
}
.nav-search-wrap svg{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;
}
.nav-search-input{
  width:180px;
  padding:6px 10px 6px 28px;
  border:1.5px solid var(--border);
  border-radius:20px;
  font-family:'Outfit',sans-serif;font-size:0.76rem;
  background:var(--bg);color:var(--ink);outline:none;
  transition:all var(--transition);
}
.nav-search-input:focus{
  border-color:var(--accent);background:var(--white);width:220px;
}
.nav-search-input::placeholder{color:var(--muted);}
/* Hide on mobile — show abbreviated */
@media(max-width:599px){
  .nav-pill span:not(.nav-pill-dot){display:none;}
  .nav-pill{padding:6px 8px;}
  .nav-search-input{width:120px;}
  .nav-search-input:focus{width:150px;}
}
@media(min-width:900px){
  .nav-search-input{width:220px;}
  .nav-search-input:focus{width:280px;}
}

/* ─── NAV DROPDOWNS (Novidades & Marcas) ─── */
.nav-dropdown{
  position:fixed;
  top:calc(var(--nav-h) + 6px);
  left:auto;
  width:min(96vw, 340px);
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.15);
  z-index:500;
  display:none;
  overflow:hidden;
  animation:dropIn 0.18s ease;
}
.nav-dropdown.open{display:block;}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.nav-dropdown-inner{
  max-height:70vh;
  overflow-y:auto;
  padding:10px;
}
.nav-dropdown-arrow{
  position:absolute;top:-7px;
  width:12px;height:12px;
  background:var(--white);
  border-left:1.5px solid var(--border);
  border-top:1.5px solid var(--border);
  transform:rotate(45deg);
  border-radius:2px 0 0 0;
}
.nav-dropdown-close{
  display:flex;align-items:center;justify-content:flex-end;
  padding:6px 10px 4px;
  border-top:1px solid var(--border);
}
.nav-dropdown-close button{
  border:none;background:none;cursor:pointer;
  font-family:'Outfit',sans-serif;font-size:0.68rem;
  color:var(--muted);display:flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:6px;
  transition:background var(--transition),color var(--transition);
}
.nav-dropdown-close button:hover{background:var(--bg);color:var(--ink);}
/* Override novidades/marcas padding inside dropdown */
.nav-dropdown .novidades,.nav-dropdown .marcas{padding:0;border:none;margin:0;}
.nav-dropdown .novidades .nov-header,.nav-dropdown .marcas .nov-header{padding:0 2px;margin-bottom:8px;}

/* ─── LIST STYLE INSIDE NAV DROPDOWNS ───── */
.nav-dropdown .nov-grid{
  display:flex;flex-direction:column;gap:6px;
}
.nav-dropdown .nov-card{
  flex-direction:row;align-items:center;
  border-radius:8px;
}
.nav-dropdown .nov-img{
  width:80px;min-width:80px;height:56px;
  aspect-ratio:unset;flex-shrink:0;
  border-radius:6px 0 0 6px;
}
.nav-dropdown .nov-body{
  padding:6px 10px;gap:1px;
}
.nav-dropdown .nov-name{
  font-size:0.78rem;-webkit-line-clamp:1;
}
.nav-dropdown .nov-date{font-size:0.64rem;}
.nav-dropdown .nov-link{font-size:0.68rem;margin-top:2px;}
.nav-dropdown .nov-desc{display:none;}

/* Marcas list */
.nav-dropdown .marcas-grid{
  display:flex;flex-direction:column;gap:5px;
}
.nav-dropdown .marca-card{
  flex-direction:row;align-items:center;
  padding:7px 10px;gap:12px;text-align:left;
  border-radius:8px;
}
.nav-dropdown .marca-logo{
  width:70px;min-width:70px;height:22px;
  flex-shrink:0;justify-content:flex-start;
}
.nav-dropdown .marca-logo img{max-height:20px;}
.nav-dropdown .marca-img{display:none;}
.nav-dropdown .marca-desc{font-size:0.68rem;flex:1;}
.nav-dropdown .nov-link{white-space:nowrap;flex-shrink:0;font-size:0.68rem;}
  position:fixed;inset:0;z-index:499;display:none;
}
.nav-dropdown-overlay.show{display:block;}
#vh{display:block;}
.home-hero{
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:14px 16px 14px;
  text-align:center;
}
.home-hero h1{
  font-family:'Playfair Display',serif;
  font-size:1.3rem;
  color:var(--ink);
  line-height:1.2;
}
.home-hero .sub{font-size:0.75rem;color:var(--ink2);margin-top:2px;}
.home-hero .credit{font-size:0.62rem;color:var(--muted);margin-top:1px;}
.hsw{position:relative;max-width:380px;margin:10px auto 0;}
.hsw svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;}
.hsi{
  width:100%;
  padding:9px 10px 9px 32px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:'Outfit',sans-serif;
  font-size:0.82rem;
  background:var(--bg);
  color:var(--ink);
  outline:none;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.hsi:focus{border-color:var(--accent);background:var(--white);box-shadow:0 0 0 3px rgba(0,94,184,0.1);}
.hsi::placeholder{color:var(--muted);}
.hrc{font-size:0.68rem;color:var(--muted);margin-top:4px;min-height:12px;}