/*
 * Familia Salons – product-page `.familia-salons` block: structure only.
 *
 * The visual design of `.familia-salons` (and `.familia-salons-teaser`) belongs to the theme (stream E); everything
 * here is either layout that the block cannot do without, or a `:where()` rule with zero specificity so the theme
 * overrides it with a plain class selector. Markup contract:
 *
 *   .familia-salons[data-product-id][data-mode=simple|variable|lens|sku][data-state=has|none|pending]
 *     > .familia-salons__title
 *     > .familia-salons__body
 *         > .familia-salons__summary
 *         > .familia-salons__city > .familia-salons__city-name + ul.familia-salons__list
 *             > li.familia-salons__salon[.is-open][data-salon][data-code]
 *                 > .familia-salons__name .familia-salons__hours .familia-salons__qty
 *         > .familia-salons__empty[.familia-salons__empty--pending|--loading]
 *     > .familia-salons__actions > a.familia-salons__cta + a.familia-salons__locator
 */
:where(.familia-salons) { margin: 1.5em 0; }
:where(.familia-salons__title) { font-size: 1em; margin: 0 0 .5em; }
:where(.familia-salons__summary) { margin: 0 0 .5em; font-size: .9em; }
:where(.familia-salons__city) { margin-bottom: .6em; }
:where(.familia-salons__city-name) { font-weight: 500; font-size: .9em; }
:where(.familia-salons__empty) { font-size: .9em; }
:where(.familia-salons__hours, .familia-salons__qty) { font-size: .85em; color: #8a8a8a; }
:where(.familia-salons__salon.is-open) .familia-salons__hours { color: #6293b4; }   /* brandbook steel blue */

/* Layout the theme should not have to repeat. */
.familia-salons__list { list-style: none; margin: 0; padding: 0; }
.familia-salons__salon { display: flex; flex-wrap: wrap; gap: .25em .6em; align-items: baseline; padding: .15em 0; }
.familia-salons__actions { display: flex; flex-wrap: wrap; gap: .75em; align-items: center; margin-top: .75em; }
.familia-salons[data-state="pending"] .familia-salons__empty--loading { opacity: .6; }

/* The block is decorative while empty: keep it out of the tab order and out of the way. */
.familia-salons[data-state="none"] .familia-salons__list { display: none; }