/* ============================================
   OTRSUPPLIER - Brand Page Styles
   Extracted from brand.php inline <style>
   ============================================ */

.bp-wrap{max-width:1200px;margin:0 auto;padding:15px}
.bp-hero{background:linear-gradient(135deg,#0B2B40,#1a4a6e);color:#fff;padding:35px 25px;border-radius:10px;margin-bottom:20px}
.bp-hero h1{font-size:28px;margin-bottom:6px}
.bp-hero p{font-size:15px;opacity:.85;margin:0}
.bp-hero .bp-stats{display:flex;gap:25px;margin-top:15px;flex-wrap:wrap}
.bp-hero .bp-stat{font-size:13px;opacity:.8}
.bp-hero .bp-stat strong{font-size:22px;display:block;opacity:1}
.bp-breadcrumb{font-size:12px;color:#888;margin-bottom:10px}
.bp-breadcrumb a{color:#E85D04;text-decoration:none}

/* === LAYOUT === */
.bp-body{display:grid;grid-template-columns:260px 1fr;gap:25px}
.bp-side{position:sticky;top:15px;align-self:start;max-height:calc(100vh - 30px);overflow-y:auto}

/* === FILTERS === */
.bp-side .fl-box{background:#f8f9fa;border:1px solid #e8e8e8;border-radius:8px;padding:16px;margin-bottom:14px}
.bp-side .fl-box h4{font-size:13px;color:#0B2B40;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
.bp-side .fl-box select,.bp-side .fl-box input[type=text]{width:100%;padding:8px 10px;border:1px solid #ddd;border-radius:5px;font-size:13px;background:#fff}
.bp-side .fl-box select:focus,.bp-side .fl-box input:focus{border-color:#E85D04;outline:none}
.fl-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.fl-tag{display:inline-flex;align-items:center;gap:4px;background:#E85D04;color:#fff;padding:4px 10px;border-radius:15px;font-size:12px;font-weight:600}
.fl-tag a{color:#fff;text-decoration:none;font-weight:700}

/* === SEO INTRO === */
.bp-seo{background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:25px;margin-bottom:20px}
.bp-seo h2{font-size:20px;color:#0B2B40;margin-bottom:8px}
.bp-seo h3{font-size:16px;color:#0B2B40;margin:16px 0 6px}
.bp-seo p{font-size:14px;line-height:1.7;color:#555;margin-bottom:8px}
.bp-seo ul{margin:6px 0 10px 20px;font-size:14px;color:#555;line-height:1.7}
.bp-seo .note{background:#fff8e1;border-left:4px solid #ffc107;padding:12px 16px;border-radius:4px;margin-top:12px;font-size:13px;color:#856404}

/* === TOOLBAR === */
.bp-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 0;border-bottom:1px solid #eee;margin-bottom:15px}
.bp-toolbar span{font-size:13px;color:#666}

/* === PRODUCT GRID === */
.bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-bottom:20px}
.bp-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden;transition:box-shadow .2s}
.bp-card:hover{box-shadow:0 4px 15px rgba(0,0,0,.1)}
.bp-card .bp-img{height:160px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bp-card .bp-img img{width:100%;height:100%;object-fit:cover}
.bp-card .bp-img .ph{font-size:50px;opacity:.3}
.bp-card .bp-info{padding:14px}
.bp-card .bp-brand{font-size:11px;color:#E85D04;font-weight:700;text-transform:uppercase}
.bp-card .bp-size{font-size:18px;font-weight:800;color:#0B2B40;margin:2px 0}
.bp-card .bp-model{font-size:13px;color:#666;margin-bottom:6px}
.bp-card .bp-badges{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.bp-card .badge{font-size:10px;padding:2px 8px;border-radius:10px;background:#f0f4f8;color:#555;font-weight:600}
.bp-card .bp-actions{display:flex;gap:6px}
.bp-card .bp-actions a{flex:1;text-align:center;padding:8px;border-radius:5px;font-size:12px;font-weight:600;text-decoration:none}
.bp-card .bp-actions .btn-v{background:#0B2B40;color:#fff}
.bp-card .bp-actions .btn-q{background:#E85D04;color:#fff}

/* === EMPTY STATE === */
.bp-empty{text-align:center;padding:60px 20px;color:#888}
.bp-empty h3{font-size:18px;color:#0B2B40;margin-bottom:8px}
.bp-empty p{margin-bottom:15px}

/* === FAQ === */
.bp-faq{background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:25px;margin-top:20px}
.bp-faq h2{font-size:20px;color:#0B2B40;margin-bottom:15px}
.bp-faq-item{border-bottom:1px solid #eee;padding:12px 0}
.bp-faq-q{font-size:14px;font-weight:700;color:#0B2B40;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.bp-faq-a{font-size:13px;color:#555;line-height:1.7;padding-top:8px;display:none}

/* === RESPONSIVE === */
@media(max-width:900px){
    .bp-body{grid-template-columns:1fr}
    .bp-side{position:static;max-height:none}
    .bp-grid{grid-template-columns:repeat(2,1fr)}
    .mob-hide{display:none}
}
@media(max-width:600px){
    .bp-grid{grid-template-columns:1fr}
}