/* Choose a brand, explore a need, then consult AZZA. */
.brands .brand-heading{align-items:flex-end;margin-bottom:30px}
.brand-heading-copy{max-width:700px}
.brand-catalog-hint{font-size:16px;line-height:1.6;color:var(--text-muted);margin:18px 0 0;max-width:68ch}
.brand-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.brand-grid .brand-tile{width:100%;height:132px;padding:22px 18px 34px;cursor:pointer}
.brand-grid .brand-tile>img{max-height:68px;max-width:100%;height:var(--logo-h,40px)}
.brand-grid .brand-tooltip{opacity:1;transform:none;font-size:12px;bottom:12px}
.brand-grid .brand-tile:hover,.brand-grid .brand-tile:focus-visible{border-color:var(--teal);transform:translateY(-4px)}
.brand-grid .brand-tile:hover img,.brand-grid .brand-tile:focus-visible img{transform:none}
.brand-grid .brand-tile .icon{color:var(--teal);width:28px;height:28px;flex-shrink:0}
.brand-grid .brand-custom{background:var(--paper);font-size:16px;text-align:left;font-weight:700;line-height:1.4}
.brand-grid .microsoft-label{font-size:17px}
.brand-grid .brand-tile:has(.microsoft-label)>img{width:28px;height:28px}
.brands .note{margin:22px 0 0}
.footer{background:#fff;color:var(--ink);border-top:1px solid var(--line)}
.footer .footer-brand img{background:transparent;border-radius:0;padding:0;height:120px;width:auto}
.footer-top strong{color:var(--ink)}
.footer-top p,.footer-contact>span{color:var(--text-muted)}
.footer-top a:hover,.footer-bottom a:hover{color:var(--teal-ink)}
.footer-brands{border-top-color:var(--line);gap:14px}
.footer-brands>button{height:62px;min-width:112px;max-width:170px;border:0;border-radius:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:10px;gap:6px;transition:opacity .2s}
.footer-brands>button:hover{opacity:.72}
.footer-brands img{max-width:128px;height:var(--footer-logo-h,30px);max-height:45px}
.footer-brands>button:has(.microsoft-label) img{height:22px}
.footer-bottom{color:var(--text-muted);border-top-color:var(--line)}
.brand-catalog-dialog{width:min(1160px,calc(100vw - 40px));max-height:90dvh;padding:0;border:0;border-radius:20px;background:#fff;color:var(--ink);overflow:hidden}
.brand-catalog-dialog[open]{display:flex;flex-direction:column}
.brand-catalog-dialog::backdrop{background:#071d28bf;backdrop-filter:blur(6px)}
.catalog-head{flex-shrink:0;z-index:2;background:#fff;border-bottom:1px solid var(--line);padding:24px 30px;display:flex;align-items:center;gap:22px}
.catalog-head-logo{width:150px;flex:0 0 150px;display:flex;align-items:center;justify-content:center}
.catalog-head-logo img{max-width:150px;max-height:70px;object-fit:contain}
.catalog-head-copy{min-width:0;flex:1}
.catalog-head .eyebrow{font-size:12px;margin:0 0 8px}
.catalog-head h2{font-size:30px;line-height:1.2;margin:0}
.catalog-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--line);border-radius:50%;background:#fff}
.catalog-body{padding:26px 30px 30px;overflow:auto;min-height:0}
.catalog-intro{font-size:17px;line-height:1.7;max-width:80ch;margin:0 0 24px}
.catalog-workspace{display:grid;grid-template-columns:285px minmax(0,1fr);gap:26px;align-items:start}
.catalog-navigation{padding:20px;background:#f3f7f6;border:1px solid var(--line);border-radius:14px}
.catalog-navigation label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.catalog-navigation select{background:#fff;width:100%;padding:12px;font-size:15px;border-radius:8px}
.catalog-count{font-size:13px;color:var(--text-muted);margin:20px 0 12px}
.catalog-categories{display:flex;flex-direction:column;gap:8px}
.catalog-categories button{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid transparent;border-radius:8px;min-height:52px;padding:12px;font-size:15px;line-height:1.4;background:#fff}
.catalog-categories button span{flex:1}
.catalog-categories .icon{width:18px;height:18px;flex:0 0 18px}
.catalog-categories button[aria-pressed=true]{background:var(--dark);color:#fff;border-color:var(--dark)}
.catalog-categories button[aria-pressed=true]>.icon:first-child{color:var(--mint)}
.catalog-categories button:hover{border-color:var(--teal)}
.catalog-detail{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.catalog-visual{padding:22px;background:#f1f6f5;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.catalog-visual>img{height:116px;width:100%;object-fit:contain}
.catalog-product-icon{width:70px;height:70px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--teal)}
.catalog-product-icon>.icon{width:40px;height:40px}
.catalog-visual p{font-size:12px;line-height:1.5;color:var(--text-muted);margin:0;text-align:center}
.catalog-detail-body{padding:26px}
.catalog-detail h3{font-size:28px;line-height:1.2;margin-bottom:14px}
.catalog-detail-description{font-size:16px;line-height:1.7}
.catalog-detail h4{font-size:16px;margin:22px 0 12px}
.catalog-detail ul{list-style:disc;padding-left:20px;font-size:15px;line-height:1.65;margin-bottom:22px}
.catalog-detail li{padding-left:3px;margin:6px 0}
.catalog-prepare{padding:16px 18px;background:#f3f7f6;border-left:3px solid var(--teal);border-radius:0 8px 8px 0;font-size:15px;line-height:1.6;margin:20px 0}
.catalog-detail .button{font-size:16px;width:100%}
.catalog-note{font-size:13px;line-height:1.6;color:var(--text-muted);margin:16px 0 0}
.catalog-summary{font-size:13px;color:var(--teal-ink);margin:0 0 8px}
.catalog-contact-bar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 30px;border-top:1px solid var(--line);background:#f3f7f6}
.catalog-contact-bar p{margin:0;font-size:14px;line-height:1.5}
.catalog-contact-bar .catalog-summary{font-size:16px;color:var(--ink);font-weight:700;margin-bottom:4px}
.catalog-contact-bar .button{font-size:16px;flex-shrink:0}
@media(max-width:1100px){.brand-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.catalog-workspace{grid-template-columns:245px minmax(0,1fr);gap:20px}}
@media(max-width:767px){
 .brand-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.brand-grid .brand-tile{height:115px;padding:18px 12px 32px}
 .brand-grid .brand-tooltip{font-size:12px;bottom:9px}.brand-grid .microsoft-label{font-size:14px}.brand-grid .brand-tile:has(.microsoft-label)>img{width:20px;height:20px}
 .brand-grid .brand-custom{font-size:14px;gap:6px}.brand-grid .brand-custom>.icon{width:22px;height:22px}
 .brand-catalog-dialog{width:calc(100vw - 20px);max-height:94dvh;border-radius:14px}
 .catalog-head{padding:18px;gap:14px}.catalog-head-logo{width:76px;flex-basis:76px}.catalog-head-logo img{max-width:76px;max-height:48px}
 .catalog-head h2{font-size:22px}.catalog-head .eyebrow{font-size:12px;letter-spacing:.03em}
 .catalog-body{padding:20px 18px}.catalog-intro{font-size:16px}.catalog-workspace{grid-template-columns:1fr;gap:18px}
 .catalog-navigation{padding:16px}.catalog-navigation select{font-size:16px}.catalog-count{margin-top:14px}
 .catalog-categories{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .catalog-categories button{font-size:14px;padding:10px;gap:7px}.catalog-categories button>.icon:last-child{display:none}
 .catalog-detail-body{padding:20px}.catalog-detail h3{font-size:25px}.catalog-visual{min-height:120px;padding:16px}.catalog-visual>img{height:90px}
 .catalog-contact-bar{padding:16px 18px;display:block}.catalog-contact-bar>div{display:none}.catalog-contact-bar .button{width:100%;font-size:15px}
 .footer .footer-brand img{height:112px}.footer-brands>button{min-width:90px;max-width:132px;height:58px;padding:8px}
 .footer-brands img{max-width:110px}.footer-brands .microsoft-label{font-size:12px}
}
@media(max-width:480px){
 .brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-grid .brand-tile{height:120px}
 .brand-grid .brand-custom{font-size:15px}.brand-grid .microsoft-label{font-size:15px}
 .catalog-head-logo{display:none}.catalog-head h2{font-size:23px}.catalog-head .eyebrow{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.brand-grid .brand-tile,.footer-brands>button{transition:none}.brand-grid .brand-tile:hover{transform:none}}

/* category picture taken from a catalog product (v3.24) */
.catalog-visual>img.is-product{height:170px}
@media(max-width:767px){.catalog-visual>img.is-product{height:130px}}