/**
 * Atelier — T9 Brands.
 * Source: design/store-theme/01-atelier-fashion/pages/T9 Brands.dc.html
 */
.atl-brands-head { padding: 14px 40px 0; }
.atl-brands-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.12; margin: 0; font-size: 34px; text-wrap: balance; }

.atl-brands-alpha { padding: 18px 40px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.atl-brands-alpha a { width: 32px; height: 32px; display: grid; place-items: center; font-size: 13px; border: 1px solid var(--atl-border-strong); color: var(--atl-text); text-decoration: none; }
.atl-brands-alpha a:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: 2px; }
/* Letters with no brand tiles: disabled, non-interactive. */
.atl-brands-alpha span[aria-disabled="true"] { width: 32px; height: 32px; display: grid; place-items: center; font-size: 13px; border: 1px solid var(--atl-border); color: var(--atl-text-subtle); }
/* Anchor targets land below the sticky header comfortably. */
.atl-brands-tile { scroll-margin-top: 96px; }

.atl-brands-grid { padding: 26px 40px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.atl-brands-tile { background: var(--atl-surface); border: 1px solid var(--atl-border); padding: 28px; display: grid; place-items: center; text-decoration: none; }
.atl-brands-tile span { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--atl-text-muted); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }

@media (max-width: 767px) {
  .atl-brands-head, .atl-brands-alpha, .atl-brands-grid { padding-left: 20px; padding-right: 20px; }
  .atl-brands-title { font-size: 26px; }
  .atl-brands-grid { grid-template-columns: 1fr 1fr; }
}