/* =============================================================================
   First Element — Atelier pattern-tile label association
   Live 15 Nov 2026, Australia/Melbourne.

   Scoped to the Atelier section on /collections/ only (#atelier).
   Does not change Classic, Couture, the homepage floor selector, or the
   Search panel. Does not change Atelier colourways (only the Patterns list).

   Layout: each pattern name sits under its diagram. This keeps the
   diagram-to-its-own-label gap at 10px, increases the gap between that
   label and the next row's diagram (20px → 32px desktop, 10px → 24px phone),
   and slightly increases the space between adjacent diagrams (23px → 28px
   desktop, 13px → 16px phone). Row counts stay 6 (desktop) and 4 (phone).

   Enqueue from the theme as css/fe-pattern-spacing.css (handle fe-pattern-spacing).
   Do not add this to Customizer Additional CSS / post 1989.
   ============================================================================= */

#atelier.accordian .flooring__body > .list__flooring:first-of-type ul,
#atelier .flooring__body > .list__flooring:first-of-type ul {
  margin-right: -28px;
}

#atelier.accordian .flooring__body > .list__flooring:first-of-type ul li,
#atelier .flooring__body > .list__flooring:first-of-type ul li {
  margin: 0 28px 32px 0;
  max-width: calc((100% / 6) - 28px);
}

#atelier.accordian .flooring__body > .list__flooring:first-of-type ul li img,
#atelier .flooring__body > .list__flooring:first-of-type ul li img {
  margin-bottom: 10px; /* keep: label stays close to its own diagram */
}

@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) {
  #atelier.accordian .flooring__body > .list__flooring:first-of-type ul,
  #atelier .flooring__body > .list__flooring:first-of-type ul {
    margin-right: -16px;
  }

  #atelier.accordian .flooring__body > .list__flooring:first-of-type ul li,
  #atelier .flooring__body > .list__flooring:first-of-type ul li {
    margin: 0 16px 24px 0;
    max-width: calc((100% / 4) - 16px);
  }
}
