/* ============================================================
   Shop by Brand — homepage section
   Prefix: brnd-   (no Bootstrap collisions)
   ============================================================ */

.brnd-wrap{position:relative}

/* section-head search */
.brnd-search{position:relative;max-width:340px;width:100%}
.brnd-search i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1rem}
.brnd-search input{width:100%;border:1.5px solid var(--line);border-radius:999px;padding:11px 16px 11px 42px;
  font-size:.92rem;font-family:inherit;color:var(--ink);background:#fff;transition:border-color .18s ease,box-shadow .18s ease}
.brnd-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}

/* grid */
.brnd-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media(max-width:991px){.brnd-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:575px){.brnd-grid{grid-template-columns:repeat(2,1fr)}}

/* tile */
.brnd-tile{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 16px 18px;text-decoration:none;
  overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.brnd-tile::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--brand),#ff8caa);transition:transform .3s ease}
.brnd-tile:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(20,32,43,.12);border-color:transparent}
.brnd-tile:hover::before{transform:scaleX(1)}

/* monogram logo */
.brnd-logo{position:relative;width:78px;height:78px;border-radius:20px;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:1.6rem;letter-spacing:-.02em;margin-bottom:13px;
  box-shadow:0 12px 26px rgba(20,32,43,.18)}
.brnd-logo::after{content:"";position:absolute;left:-70%;top:0;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);
  transition:left .55s ease}
.brnd-tile:hover .brnd-logo::after{left:130%}
.brnd-logo .vf{position:absolute;bottom:-6px;right:-6px;width:24px;height:24px;border-radius:50%;
  background:#fff;color:var(--blue);display:grid;place-items:center;font-size:.8rem;
  box-shadow:0 4px 10px rgba(20,32,43,.2)}
/* per-tile gradient palette */
.brnd-logo.g1{background:linear-gradient(135deg,#ff5f7e,#b91f42)}
.brnd-logo.g2{background:linear-gradient(135deg,#2e6cf6,#5b8dff)}
.brnd-logo.g3{background:linear-gradient(135deg,#12b76a,#0e9f5b)}
.brnd-logo.g4{background:linear-gradient(135deg,#f5a623,#f76b1c)}
.brnd-logo.g5{background:linear-gradient(135deg,#7a5cff,#a06bff)}
.brnd-logo.g6{background:linear-gradient(135deg,#0ea5b7,#12b7a0)}
.brnd-logo.g7{background:linear-gradient(135deg,#e0578a,#b91f42)}
.brnd-logo.g8{background:linear-gradient(135deg,#334155,#0f172a)}

.brnd-tile strong{font-size:.98rem;font-weight:700;color:var(--ink);line-height:1.2}
.brnd-tile span.cnt{font-size:.78rem;color:var(--muted);margin-top:3px}
.brnd-tile .go{margin-top:10px;font-size:.76rem;font-weight:700;color:var(--brand);opacity:0;transform:translateY(4px);
  transition:opacity .2s ease,transform .2s ease}
.brnd-tile:hover .go{opacity:1;transform:none}

/* "all brands" tile */
.brnd-tile.allb{justify-content:center;background:linear-gradient(160deg,#fbecef,#fff);border-style:dashed;border-color:var(--brand)}
.brnd-tile.allb .brnd-logo{background:var(--brand-soft);color:var(--brand);box-shadow:none}

/* no-results */
.brnd-empty{display:none;text-align:center;padding:34px 10px;color:var(--muted)}
.brnd-empty.show{display:block}
.brnd-empty i{font-size:2rem;color:var(--brand);display:block;margin-bottom:8px}

@media(max-width:575px){
  .brnd-search{max-width:100%;margin-top:12px}
  .brnd-logo{width:66px;height:66px;font-size:1.35rem}
}