/* ===== vendors.html inline style 1 ===== */
:root{ --gold:#C89B3C; --white:#ffffff; --black:#111827; }
    #site-nav{ position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.82); border-bottom:1px solid #eee; }

    .hero-bleed{position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw;}
    .hero-full{position:relative; width:100%; min-height:56vh;}
    @media (min-width:768px){ .hero-full{min-height:64vh;} }
    .hero-img-full{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;}
    .hero-overlay{position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35) 40%,rgba(0,0,0,.15) 65%,rgba(0,0,0,0) 100%);}
    .hero-content{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:2rem; z-index:1;}
    .hero-textbox{width:min(92vw, 60rem); text-align:center; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.35);}
    .hero-title{font-weight:900;}
    .hero-sub{opacity:.95;}
    .skeleton{ position:relative; overflow:hidden; }
    .skeleton::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.08),rgba(0,0,0,.04)); transform:translateX(-100%); animation:sk 1.2s infinite;}
    @keyframes sk { to { transform: translateX(100%);} }

    .seg{ display:inline-flex; border:1px solid #e5e7eb; border-radius:999px; overflow:hidden; }
    .seg button{ padding:.45rem .7rem; font-size:.85rem; }
    .seg button.active{ background:#fff6e5; color:var(--gold); font-weight:600; }
    .chip{
      --c:#e5e7eb; --bg:#fff; --tx:#111827;
      display:inline-flex; align-items:center; gap:.45rem; padding:.46rem .8rem;
      border:1px solid var(--c); border-radius:9999px; background:#fff; color:#111;
      font-size:.9rem; cursor:pointer; user-select:none; transition:.18s;
    }
    .chip input{ display:none; }
    .chip.active{ border-color: var(--gold) !important; background:#fff1bf !important; color:#111 !important; }

    .cat-card{
      position:relative; border:1px solid #eee; border-radius:1rem; background:#fff; overflow:hidden;
      transition:transform .18s, box-shadow .18s, border-color .18s, background .18s;
      box-shadow:0 1px 2px rgba(0,0,0,.04);
    }
    .cat-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.10); border-color:var(--gold); background:#fffefb; }
    .cat-media{ position:relative; width:100%; aspect-ratio: 4 / 3; background:#fff; }
    .cat-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; background:#fff; }
    .cat-card:hover .cat-media img{ transform:scale(1.03); }
    .cat-body{ padding: .9rem 1rem 1.05rem; }
    .cat-name{ text-align:center; font-size:1.1rem; font-weight:800; line-height:1.2; }
    @media (min-width:768px){ .cat-name{ font-size:1.2rem; } }
    .cat-cta{ margin-top:.3rem; text-align:center; }
    .cat-cta .pill{ display:inline-block; font-size:.8rem; padding:.4rem .8rem; border-radius:9999px; border:1px solid #e5e7eb; opacity:.9; }

    .featured-badge{
      position:absolute; top:.55rem; left:.55rem;
      display:inline-flex; align-items:center; gap:.35rem;
      background:#16a34a; color:#fff; font-weight:800; font-size:11px; line-height:1;
      padding:.28rem .5rem; border-radius:.5rem; box-shadow:0 2px 6px rgba(0,0,0,.15);
    }
    .featured-badge svg{ width:12px; height:12px; }

    .verified-badge{
      position:absolute; top:.55rem; right:.55rem;
      display:inline-flex; align-items:center; gap:.35rem;
      background:var(--gold); color:#fff; font-weight:800; font-size:11px; line-height:1;
      padding:.28rem .5rem; border-radius:.5rem; box-shadow:0 2px 6px rgba(0,0,0,.15);
    }
    .verified-badge svg{ width:12px; height:12px; }

    .page-btn, .page-num{ border:1px solid #e5e7eb; border-radius:.6rem; background:#fff; padding:.5rem .75rem; font-size:14px; line-height:1; transition:background .15s,border-color .15s,color .15s; }
    .page-btn:hover, .page-num:hover{ background:#f5f5f5; }
    .page-btn[disabled]{ opacity:.5; cursor:not-allowed; }
    .page-num.active{ border-color:var(--gold); color:var(--gold); font-weight:600; }
    .page-ellipsis{ padding:0 .4rem; color:#9ca3af; }