/* Approved preview card design, isolated to the real catalog-backed brand section. */
#homepageBrandCards{--columns:2;--gap:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);direction:rtl}
#homepageBrandCards>.brand-card{box-sizing:border-box;flex:0 0 calc((100% - (var(--columns) - 1)*var(--gap))/var(--columns));width:auto;min-width:0;position:relative;min-height:150px;padding:20px 12px;border-radius:18px;background:rgba(15,23,42,.65);border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;overflow:hidden;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;background-image:linear-gradient(145deg,rgba(255,255,255,.045),transparent 50%);text-decoration:none}
#homepageBrandCards>.brand-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.025) 45%,transparent 60%)}
#homepageBrandCards .logo-stage{width:calc(100% + 8px);height:72px;display:flex;align-items:center;justify-content:center;position:relative}
#homepageBrandCards .brand-logo{width:100%;max-width:var(--brand-logo-width,128px);height:72px;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,0,0,.22));transform:none}
#homepageBrandCards .logo-edge{filter:drop-shadow(0 0 1.3px rgba(255,255,255,.8)) drop-shadow(0 0 4px rgba(255,255,255,.18)) drop-shadow(0 3px 3px rgba(0,0,0,.3))}
#homepageBrandCards .mini-official-dark{filter:invert(1)}
#homepageBrandCards .brand-name{color:#f1f5f9;font:700 17px/1.25 Tajawal,sans-serif;text-align:center;text-shadow:0 2px 2px rgba(0,0,0,.45);overflow-wrap:anywhere}
#homepageBrandCards>.brand-card:hover,#homepageBrandCards>.brand-card:focus-visible{transform:translateY(-6px);border-color:rgba(59,130,246,.55);box-shadow:0 20px 40px rgba(0,0,0,.35),0 0 25px rgba(59,130,246,.12);outline:none}
#homepageBrandCards>.brand-card:active{transform:translateY(-2px) scale(.985)}
#homepageBrandCards [data-canonical="BMW"] .brand-logo{width:72px;height:72px}
#homepageBrandCards [data-canonical="Chrysler"] .brand-logo{max-width:136px}
#homepageBrandCards [data-canonical="Chrysler"] .logo-stage{width:calc(100% + 16px)}
@media(min-width:640px){#homepageBrandCards{--columns:3;--gap:20px}}
@media(min-width:768px){#homepageBrandCards{--columns:4}}
@media(min-width:1024px){#homepageBrandCards{--columns:8}}
@media(max-width:639px){#homepageBrandCards>.brand-card{min-height:135px;padding:16px 8px}#homepageBrandCards .logo-stage,#homepageBrandCards .brand-logo{height:62px}#homepageBrandCards .brand-name{font-size:16px}}
@media(prefers-reduced-motion:reduce){#homepageBrandCards>.brand-card{transition:none}#homepageBrandCards>.brand-card:hover,#homepageBrandCards>.brand-card:active,#homepageBrandCards>.brand-card:focus-visible{transform:none}}