.page-brands {
  --pb-bg: #f4f5f7; --pb-bg-card: #ffffff; --pb-hero-surface: #ececec;
  --pb-bg-hero: #1e2a3a; --pb-hero-navy: #1e3a5f;
  --pb-text-primary: #1a1d23; --pb-text-secondary: #5f6368; --pb-text-muted: #9aa0a6;
  --pb-accent: #2b6cb0; --pb-accent-hover: #2158a0; --pb-hero-accent: #7cb518;
  --pb-border: #e2e5ea;
  --pb-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --pb-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --pb-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --pb-radius: 12px; --pb-radius-sm: 8px;
  background: var(--pb-bg);
}
.page-brands *, .page-brands *::before, .page-brands *::after { box-sizing: border-box; }
.page-brands .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.page-brands .brands-hero { position:relative; overflow:hidden; width:100%; font-family:'Plus Jakarta Sans',system-ui,sans-serif; background:var(--pb-hero-surface); padding:0; }
.page-brands .brands-hero--banner { background-color:#f3f2ef; min-height:min(360px,52vh); background-image: linear-gradient(to right, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.92) 35%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0.15) 78%, rgba(255,255,255,0) 100%); background-repeat:no-repeat; background-size:cover; background-position:0% 0%; }
.page-brands .brands-hero__shell { max-width:1200px; margin:0 auto; padding:56px 40px; position:relative; z-index:1; animation:page-brands-fadeUp 0.6s ease forwards; }
.page-brands .brands-hero__text { position:relative; z-index:2; width:100%; max-width:100%; }
@media screen and (min-width:769px) { .page-brands .brands-hero__text { width:min(520px,48%); } }
.page-brands .brands-hero h1 { font-family:'Instrument Sans',system-ui,sans-serif; font-size:clamp(28px,4vw,42px); font-weight:800; font-style:italic; color:var(--pb-hero-navy); line-height:1.15; margin:0 0 14px; max-width:520px; }
.page-brands .brands-hero__accent { color:var(--pb-hero-accent); font-style:italic; }
.page-brands .brands-hero__lead, .page-brands .brands-hero__lead p { font-size:16px; line-height:1.6; color:rgba(30,58,95,0.65); max-width:460px; font-weight:400; margin:0; }
.page-brands .brands-controls { max-width:1200px; margin:-28px auto 0; padding:0 40px; position:relative; z-index:2; }
.page-brands .controls-bar { background:var(--pb-bg-card); border-radius:var(--pb-radius); box-shadow:var(--pb-shadow-md); padding:16px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; animation:page-brands-fadeUp 0.6s ease forwards 0.15s; opacity:0; animation-fill-mode:forwards; }
.page-brands .search-box { position:relative; flex:0 1 240px; min-width:180px; }
.page-brands .search-box input { width:100%; padding:10px 14px 10px 40px; border:1.5px solid var(--pb-border); border-radius:var(--pb-radius-sm); font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:14px; color:var(--pb-text-primary); background:var(--pb-bg); transition:border-color 0.2s,box-shadow 0.2s; outline:none; }
.page-brands .search-box input:focus { border-color:var(--pb-accent); box-shadow:0 0 0 3px rgba(43,108,176,0.12); }
.page-brands .search-box input::placeholder { color:var(--pb-text-muted); }
.page-brands .search-box svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--pb-text-muted); pointer-events:none; }
.page-brands .category-filters { display:flex; gap:6px; flex-wrap:wrap; flex:1; }
.page-brands .cat-btn { padding:8px 18px; border:1.5px solid var(--pb-border); border-radius:100px; background:transparent; font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:13px; font-weight:600; color:var(--pb-text-secondary); cursor:pointer; transition:all 0.2s ease; white-space:nowrap; }
.page-brands .cat-btn:hover { border-color:var(--pb-text-primary); color:var(--pb-text-primary); }
.page-brands .cat-btn.active { background:var(--pb-bg-hero); border-color:var(--pb-bg-hero); color:#fff; }
.page-brands .brands-section { max-width:1200px; margin:0 auto; padding:32px 40px 60px; font-family:'Plus Jakarta Sans',system-ui,sans-serif; }
.page-brands .brands-count { font-size:13px; font-weight:500; color:var(--pb-text-muted); margin-bottom:20px; }
.page-brands .brands-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.page-brands .brand-card { background:var(--pb-bg-card); border-radius:var(--pb-radius); border:1.5px solid var(--pb-border); padding:24px; display:flex; flex-direction:column; transition:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94); cursor:pointer; text-decoration:none; color:inherit; opacity:0; transform:translateY(12px); }
.page-brands .brand-card.visible { opacity:1; transform:translateY(0); }
.page-brands .brand-card:hover { border-color:var(--pb-accent); box-shadow:var(--pb-shadow-lg); transform:translateY(-3px); }
.page-brands .brand-logo-wrap { height:64px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; padding:8px; background:var(--pb-bg); border-radius:var(--pb-radius-sm); }
.page-brands .brand-logo-wrap img { max-width:100%; max-height:48px; object-fit:contain; filter:grayscale(30%); transition:filter 0.3s; }
.page-brands .brand-card:hover .brand-logo-wrap img { filter:grayscale(0%); }
.page-brands .placeholder-logo { font-family:'Instrument Sans',system-ui,sans-serif; font-size:clamp(12px,3vw,22px); font-weight:800; color:var(--pb-bg-hero); letter-spacing:-0.5px; text-align:center; line-height:1.15; max-width:100%; word-break:break-word; }
.page-brands .brand-name { font-family:'Instrument Sans',system-ui,sans-serif; font-size:15px; font-weight:700; margin-bottom:2px; color:var(--pb-text-primary); }
.page-brands .brand-category { font-size:12px; font-weight:500; color:var(--pb-text-muted); margin-bottom:14px; }
.page-brands .brand-link { margin-top:auto; font-size:13px; font-weight:600; color:var(--pb-accent); display:inline-flex; align-items:center; gap:5px; transition:gap 0.2s; }
.page-brands .brand-card:hover .brand-link { gap:8px; }
.page-brands .brand-link svg { width:14px; height:14px; transition:transform 0.2s; flex-shrink:0; }
.page-brands .brand-card:hover .brand-link svg { transform:translateX(2px); }
.page-brands .pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:40px; flex-wrap:wrap; }
.page-brands .pagination button { min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid var(--pb-border); border-radius:var(--pb-radius-sm); background:var(--pb-bg-card); font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:13px; font-weight:600; color:var(--pb-text-secondary); cursor:pointer; transition:all 0.2s; padding:0 8px; gap:4px; }
.page-brands .pagination button:hover:not(:disabled) { border-color:var(--pb-text-primary); color:var(--pb-text-primary); }
.page-brands .pagination button.active { background:var(--pb-bg-hero); border-color:var(--pb-bg-hero); color:#fff; }
.page-brands .pagination button:disabled { opacity:0.4; cursor:default; }
.page-brands .pagination .nav-btn { font-size:12px; }
.page-brands .no-results { grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--pb-text-muted); }
.page-brands .no-results svg { width:48px; height:48px; margin:0 auto 12px; display:block; opacity:0.4; }
.page-brands .no-results p { font-size:15px; font-weight:500; margin:0; }
@keyframes page-brands-fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@media screen and (max-width:1024px) { .page-brands .brands-grid { grid-template-columns:repeat(3,1fr); } }
@media screen and (max-width:768px) {
  .page-brands .brands-hero__shell { padding:40px 24px; }
  .page-brands .brands-controls { padding:0 24px; margin-top:-24px; }
  .page-brands .brands-section { padding:24px 24px 48px; }
  .page-brands .brands-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .page-brands .brand-card { padding:18px; }
  .page-brands .controls-bar { padding:14px 16px; }
  .page-brands .search-box { flex:1 1 100%; }
}
@media screen and (max-width:390px) { .page-brands .brands-grid { grid-template-columns:1fr; } }

#container:has(.page-brands) {
  margin-bottom: 0;
}

#information-information.container.page-dv:has(.page-brands) {
  max-width: none;
  width: 100%;
  padding: 0;
  background: transparent;
}
#information-information.page-dv:has(.page-brands) > .row {
  margin-left: 0;
  margin-right: 0;
  --bs-gutter-x: 0;
}
#information-information.page-dv:has(.page-brands) #content.col,
#information-information.page-dv:has(.page-brands) #column-left,
#information-information.page-dv:has(.page-brands) #column-right {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 24px !important;
  max-width: 100%;
  flex: 1 1 100%;
}
#information-information.page-dv:has(.page-brands) .wrap {
  padding-left: 0;
  padding-right: 0;
}

/* ===== MOBILE: BRANDS HERO ===== */
@media (max-width:768px) {
  .page-brands .brands-hero--banner {
    min-height: 160px !important;
  }
  .page-brands .brands-hero__shell {
    padding: 24px 16px !important;
  }
}