.brand-directory { padding: 56px 6% 64px; background: #f8f5f9; }
.brand-directory h2 { font: 400 38px/1.2 Georgia, serif; color: #452752; }
.brand-directory .eyebrow { color: #876540; }
.brand-category-links { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 36px; }
.brand-category-links a { padding: 13px 18px; min-height: 44px; font-size: 12px; color: #572575; border: 1px solid #ddcfE5; border-radius: 3px; background: white; }
.brand-category { scroll-margin-top: 24px; margin-top: 32px; }
.brand-category-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.brand-category-heading h3 { font: 400 25px Georgia, serif; color: #452752; margin: 0; }
.brand-category-heading > span { font-size: 11px; color: #85778a; }
.retail-brand-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
.retail-brand { min-width: 0; min-height: 124px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px 12px; background: white; border: 1px solid #e8e1eb; border-radius: 4px; }
.retail-brand img { width: 80px; max-width: 100%; height: 48px; object-fit: contain; }
.retail-brand > span:last-child { font-size: 12px; color: #625568; }
.brand-name-mark { display: grid; place-items: center; min-height: 48px; font-size: 21px; font-weight: 600; color: #452752; }
.catalogue-brand-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.catalogue-brand-grid .retail-brand { flex-direction: row; justify-content: flex-start; min-height: 36px; gap: 6px; padding: 6px 8px; background: #faf8fb; }
.catalogue-brand-grid .retail-brand img { width: 24px; height: 20px; }
.catalogue-brand-grid .retail-brand > span:last-child { font-size: 10px; }
.catalogue-brand-grid .brand-name-mark { display: none; }
@media(max-width:1000px) { .retail-brand-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media(max-width:600px) { .brand-directory { padding: 40px 6%; } .brand-directory h2 { font-size: 31px; } .retail-brand-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; } .retail-brand { padding: 16px 8px; min-height: 112px; } .brand-category-heading h3 { font-size: 22px; } }
@media(max-width:360px) { .retail-brand-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }