/* Tyre brands index ("03 · Tyre brands index" design) — page-only rules on top of site.css, scoped to <main class="pg pg-brands">.
   Markup: page-brands.php. */

.pg-brands [id]{scroll-margin-top:24px}
.pg-brands .sech h2{font-size:clamp(40px,4.4vw,60px)}
.pg-brands .bi-hero{background-color:#0D0E10;color:#fff;padding:36px 0 64px}
.pg-brands .bi-h1{margin:0;font-size:clamp(52px,7.4vw,104px);font-weight:800}
.pg-brands .bi-search{display:flex;align-items:center;gap:12px;height:60px;padding:0 8px 0 22px;border-radius:999px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.16);color:#fff;max-width:620px}
.pg-brands .bi-search:focus-within{border-color:rgba(255,255,255,0.4)}
.pg-brands .bi-search svg{flex:none;opacity:.7}
.pg-brands .bi-search input[type=search]{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:none;color:inherit;font-family:'TSO Dirham','Archivo',sans-serif;font-size:16px}
.pg-brands .bi-search input::placeholder{color:#8D9199}
.pg-brands .bi-search .btn{min-height:46px;flex:none}
.pg-brands .bi-tabs{display:flex;gap:8px;flex-wrap:wrap}
.pg-brands .bi-tabs .tab:hover{border-color:rgba(255,255,255,0.4);color:#fff}
.pg-brands .bi-tabs .tab.on:hover{color:#111214}
.pg-brands .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.pg-brands .bi-brands{padding-bottom:8px}
.pg-brands .bi-tier{padding:clamp(56px,6vw,88px) 0 0}
.pg-brands .bi-tier[hidden],.pg-brands .bi-grid .bc[hidden]{display:none}
.pg-brands .bi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pg-brands .bc .lg img{width:auto;height:auto;max-height:44px}
.pg-brands .bi-none{margin:48px 0 0}
.pg-brands .bi-none[hidden]{display:none}

.pg-brands .bi-sec{padding:clamp(72px,7vw,104px) 0 clamp(64px,7vw,104px)}
.pg-brands .bi-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pg-brands .bi-tc{padding:30px;border-radius:26px;display:flex;flex-direction:column;gap:14px;min-height:340px}
.pg-brands .bi-tc-popular{border:1px solid rgba(17,18,20,0.08)}
.pg-brands .bi-ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}
.pg-brands .bi-ticks li{display:flex;gap:10px;align-items:center}

@media (max-width:1180px){
.pg-brands .bi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
.pg-brands .bi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
.pg-brands .bi-hero{padding:24px 0 44px}
.pg-brands .bi-search{height:54px;padding-left:16px}
.pg-brands .bi-search .btn{min-height:42px;padding:0 16px}
.pg-brands .bi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pg-brands .bc{padding:14px;gap:10px;border-radius:18px}
.pg-brands .bc .lg{height:64px;padding:10px}
.pg-brands .bc .circ{display:none}
.pg-brands .bi-tc{min-height:0;padding:24px}
}

/* find a brand: toolbar card (search, count, tier tabs) and one grid of brand cards */
.pg .bi-brands{padding:0 0 clamp(56px,7vw,96px);background:#F7F7F5}
.pg .bi-tool{position:relative;z-index:2;margin-top:-56px;background:#fff;border-radius:24px;padding:22px 26px;box-shadow:0 18px 50px rgba(13,14,16,0.12)}
.pg .bi-tool-r1{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap}
.pg .bi-tool .bi-search{flex:1 1 420px;display:flex;align-items:center;gap:10px;height:56px;padding:0 18px;border-radius:16px;border:1px solid rgba(17,18,20,0.12);background:#F7F7F5;color:#8D9199;margin:0;max-width:none}
.pg .bi-tool .bi-search:focus-within{border-color:#D7261E;background:#fff;box-shadow:0 0 0 3px rgba(215,38,30,0.12)}
.pg .bi-tool .bi-search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font-size:16px;color:#111214;font-family:inherit;padding:0}
.pg .bi-meta{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;margin-left:auto;font-size:14px;color:#5F636B}
.pg .bi-cnt{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:#FDECEB;color:#D7261E;font-weight:700;white-space:nowrap}
.pg .bi-cnt i{width:8px;height:8px;border-radius:50%;background:#D7261E}
.pg .bi-gen{font-weight:600;color:#2A2C31;white-space:nowrap}

/* filter sidebar (same look as the shop's accordion filters) + results */
.pg .bi-main{display:grid;grid-template-columns:290px minmax(0,1fr);gap:24px;align-items:start}
.pg .bi-side{position:sticky;top:calc(var(--stick,0px) + 16px);max-height:calc(100vh - var(--stick,0px) - 32px);display:flex;flex-direction:column;background:#fff;border-radius:22px;border:1px solid rgba(17,18,20,0.08);overflow:hidden}
.pg .bi-sh{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid rgba(17,18,20,0.08)}
.pg .bi-hic{width:42px;height:42px;border-radius:12px;background:#FDECEB;color:#D7261E;display:flex;align-items:center;justify-content:center;flex:none}
.pg .bi-st{position:relative;font-size:22px;font-weight:800;letter-spacing:-0.01em;padding-bottom:4px;flex:1}
.pg .bi-st::after{content:'';position:absolute;left:0;bottom:-4px;width:34px;height:3px;border-radius:2px;background:#D7261E}
.pg .bi-clear{border:0;background:none;padding:6px 0;font:inherit;font-size:14px;font-weight:700;color:#D7261E;cursor:pointer}
.pg .bi-clear[hidden]{display:none}
.pg .bi-x{display:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(17,18,20,0.12);background:#fff;color:#111214;align-items:center;justify-content:center;cursor:pointer;flex:none}
.pg .bi-sb{padding:4px 22px 18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.pg .bi-side .ax{border-bottom:1px solid rgba(17,18,20,0.08)}
.pg .bi-side .ax-h{display:flex;align-items:center;gap:12px;min-height:58px;cursor:pointer;list-style:none;font-size:16px;font-weight:700;color:#111214;user-select:none}
.pg .bi-side .ax-h::-webkit-details-marker{display:none}
.pg .bi-side .ax-h::marker{content:''}
.pg .bi-side .ax-h:focus-visible{outline:2px solid #D7261E;outline-offset:2px;border-radius:8px}
.pg .bi-side .ax-ic{color:#D7261E;display:flex;flex:none}
.pg .bi-side .ax-t{flex:1;min-width:0}
.pg .bi-side .ax-n{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#D7261E;color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.pg .bi-side .ax-n[hidden]{display:none}
.pg .bi-side .ax-chev{color:#5F636B;transition:transform .2s ease;flex:none}
.pg .bi-side .ax[open] .ax-chev{transform:rotate(180deg)}
.pg .bi-side .ax-b{display:flex;flex-direction:column;gap:2px;padding:0 0 14px}
.pg .bi-side .opt{display:flex;align-items:center;gap:10px;width:calc(100% + 16px);min-height:38px;padding:4px 8px;margin:0 -8px;border:0;border-radius:8px;background:none;font:inherit;font-size:14px;color:#2A2C31;line-height:1.3;text-align:left;cursor:pointer}
.pg .bi-side .opt:hover{background:#F2F2F0}
.pg .bi-side .opt:focus-visible{outline:2px solid #D7261E;outline-offset:-2px}
.pg .bi-side .opt.zero{color:#A3A7AE}
.pg .bi-side .opt.on{font-weight:600;color:#111214}
.pg .bi-side .box{width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(17,18,20,0.3);display:flex;align-items:center;justify-content:center;flex:none;color:transparent;transition:background .15s ease}
.pg .bi-side .opt.on .box{background:#D7261E;border-color:#D7261E;color:#fff}
.pg .bi-side .ol{flex:1;min-width:0}
.pg .bi-side .cnt{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:12px;color:#8D9199}
.pg .bi-help{margin:16px 0 0;padding:16px;border-radius:16px;background:#111214;color:#fff;display:flex;flex-direction:column;gap:8px}
.pg .bi-help .disp{font-size:22px}
.pg .bi-help > span:not(.disp){font-size:13px;color:#B8BCC3;line-height:1.5}
.pg .bi-help .btn{min-height:44px;font-size:14px}
.pg .bi-sf{display:none}
.pg .bi-ov{position:fixed;inset:0;z-index:1000;background:rgba(13,14,16,0.5)}
.pg .bi-ov[hidden]{display:none}

.pg .bi-res{display:flex;flex-direction:column;gap:18px;min-width:0}
.pg .bi-bar{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;min-height:44px}
.pg .bi-fbtn{display:none;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(17,18,20,0.14);background:#fff;font:inherit;font-size:15px;font-weight:700;color:#111214;cursor:pointer}
.pg .bi-fbtn svg{color:#D7261E}
.pg .bi-fn{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#D7261E;color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.pg .bi-fn[hidden]{display:none}
.pg .bi-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.pg .bi-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 14px;border-radius:999px;border:0;background:#111214;color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.pg .bi-chip:hover{background:#D7261E}
.pg .bi-chip-x{border:0;background:none;padding:6px 4px;font:inherit;font-size:14px;font-weight:700;color:#D7261E;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pg .bi-sort{display:inline-flex;align-items:center;gap:10px;margin-left:auto;font-size:14px;color:#5F636B;white-space:nowrap}
.pg .bi-sort select{height:44px;padding:0 38px 0 14px;border-radius:12px;border:1px solid rgba(17,18,20,0.14);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111214' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;-webkit-appearance:none;appearance:none;font:inherit;font-size:14px;font-weight:600;color:#111214;cursor:pointer}

.pg .bk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pg .bk{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:20px;background:#fff;border:1px solid rgba(17,18,20,0.08);color:#111214;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.pg .bk:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(13,14,16,0.10);border-color:rgba(215,38,30,0.35)}
.pg .bk[hidden]{display:none}
.pg .bk-top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.pg .bk-tier{font-size:11px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:4px 9px;border-radius:7px;white-space:nowrap}
.pg .bk-premium{background:#FDECEB;color:#C21F18}
.pg .bk-popular{background:#E3EEFF;color:#1D4ED8}
.pg .bk-value{background:#EFEFEC;color:#4B4F56}
.pg .bk-china{background:#FFF3DF;color:#9A5B00}
.pg .bk-more{background:#F2F2F0;color:#5F636B}
.pg .bk-n{font-size:13px;color:#5F636B;background:#F2F2F0;padding:4px 9px;border-radius:7px;white-space:nowrap}
.pg .bk-lg{height:78px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.pg .bk-lg img{max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain}
.pg .bk-co{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;min-height:18px;padding-bottom:12px;border-bottom:1px solid rgba(17,18,20,0.08);font-size:12px;color:#5F636B}
.pg .bk-cn{display:inline-flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap}
.pg .bk-cn svg{flex:none;color:#8D9199}
.pg .bk-from{white-space:nowrap}
.pg .bk-from b{color:#111214;font-weight:700}
.pg .bk-cta{display:flex;align-items:center;justify-content:center;gap:6px;height:42px;border-radius:12px;background:#F7F7F5;font-weight:700;font-size:15px;transition:background .15s,color .15s}
.pg .bk:hover .bk-cta{background:#D7261E;color:#fff}
.pg .bi-none{margin:12px 0 0}
.pg .bi-none[hidden]{display:none}

@media (max-width:1280px){.pg .bk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pg .bi-main{grid-template-columns:270px minmax(0,1fr)}}
/* ≤1080px: the sidebar becomes a slide-in panel opened from the Filters button */
@media (max-width:1080px){
.pg .bi-main{grid-template-columns:minmax(0,1fr)}
.pg .bi-side{position:fixed;top:0;left:0;bottom:0;z-index:1001;width:min(400px,92vw);max-height:none;border-radius:0 22px 22px 0;border:0;transform:translateX(-102%);transition:transform .28s ease;visibility:hidden}
.pg .bi-side.open{transform:none;visibility:visible}
.pg .bi-x{display:inline-flex}
.pg .bi-sb{flex:1}
.pg .bi-side .opt{min-height:44px}
.pg .bi-sf{display:block;padding:12px 22px 16px;border-top:1px solid rgba(17,18,20,0.08)}
.pg .bi-sf .btn{width:100%;min-height:48px}
.pg .bi-fbtn{display:inline-flex}
.pg .bk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
html.bi-lock{overflow:hidden}
}
@media (max-width:900px){.pg .bk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pg .bi-meta{margin-left:0}}
@media (max-width:640px){
.pg .bk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pg .bi-tool{padding:16px;margin-top:-40px;border-radius:20px}
.pg .bi-bar{gap:10px}
.pg .bi-chips{order:3;flex-basis:100%}
.pg .bi-sort span{display:none}
.pg .bk{padding:12px;gap:10px}.pg .bk-lg{height:56px}.pg .bk-lg img{max-height:48px}
.pg .bk-co{flex-direction:column;justify-content:center;gap:3px;font-size:11px;padding-bottom:10px}
.pg .bk-tier,.pg .bk-n{font-size:10px;padding:3px 6px}.pg .bk-cta{height:38px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.pg .bi-side{transition:none}}
.pg-brands .bi-hero{padding-bottom:clamp(96px,9vw,128px)}