/**
 * Shared family layout for About, Brands, Partner Stores and Outlet plus the
 * recurring store-card parts (opening hours, contact rows).
 *
 * Core owns structural markup and geometry. Sites may override only the
 * custom properties below — never display/grid-template/column counts.
 *
 * Safe site hooks:
 *   --pff-family-gap
 *   --pff-family-card-gap
 *   --pff-family-group-gap
 *   --pff-family-filter-gap
 *   --pff-family-copy-measure
 *   --pff-family-card-radius
 *   --pff-family-media-radius
 *   --pff-family-media-ratio          (store/outlet cards; default 4 / 3)
 *   --pff-family-about-media-ratio    (About media; default 3 / 2)
 *   --pff-family-media-fit
 *   --pff-family-media-position
 *
 * Typography, colour, spacing scale and radii otherwise come from the
 * existing --pff-font-*, --pff-color-*, --pff-space-* and --pff-radius-*
 * tokens. The desktop/mobile split is the same 48rem breakpoint as base.css;
 * CSS cannot read a custom property inside @media.
 */

.pff-about,
.pff-brands,
.pff-stores,
.pff-outlet {
  --pff-family-gap: var(--pff-space-l);
  --pff-family-card-gap: var(--pff-space-m);
  --pff-family-group-gap: var(--pff-space-xl);
  --pff-family-filter-gap: var(--pff-space-s);
  --pff-family-copy-measure: var(--pff-font-measure);
  --pff-family-card-radius: var(--pff-radius-default);
  --pff-family-media-radius: var(--pff-radius-sm);
  --pff-family-media-ratio: 4 / 3;
  --pff-family-about-media-ratio: 3 / 2;
  --pff-family-media-fit: cover;
  --pff-family-media-position: center;
}

/* -------------------------------------------------------------------------- */
/* About: copy left / media right on desktop; copy then media on mobile.      */
/* -------------------------------------------------------------------------- */

.pff-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pff-family-gap);
}

.pff-about__copy {
  min-width: 0;
  max-width: var(--pff-family-copy-measure);
}

.pff-about__media-region {
  display: grid;
  gap: var(--pff-space-s);
  min-width: 0;
}

.pff-about__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--pff-family-media-radius);
  aspect-ratio: var(--pff-family-about-media-ratio);
}

.pff-about__media .pff-media__img {
  width: 100%;
  height: 100%;
  object-fit: var(--pff-family-media-fit);
  object-position: var(--pff-family-media-position);
}

.pff-about__facts-region,
.pff-about__facts {
  min-width: 0;
}

.pff-about__facts {
  display: grid;
  gap: var(--pff-space-s) var(--pff-space-m);
  margin: 0;
}

.pff-about__fact {
  margin: 0;
}

.pff-about__fact-label,
.pff-about__fact-value {
  margin: 0;
}

@media (min-width: 48rem) {
  .pff-about--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .pff-about--split .pff-about__copy {
    grid-column: 1;
  }

  .pff-about--split .pff-about__media-region {
    grid-column: 2;
  }

  .pff-about__facts-region {
    grid-column: 1 / -1;
  }
}

/* -------------------------------------------------------------------------- */
/* Partner Stores + Outlet: two equal cards / desktop row, one / mobile row.  */
/* A singleton (or filtered singleton) still occupies exactly 50% of the      */
/* desktop content grid — never span the last odd item to full width.         */
/* Image field + aspect-ratio are the shared --pff-family-media-* hooks.      */
/* -------------------------------------------------------------------------- */

.pff-family-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pff-family-card-gap);
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 48rem) {
  .pff-family-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pff-family-grid > .pff-stores__item,
.pff-family-grid > .pff-outlet__item {
  display: flex;
  min-width: 0;
}

.pff-store,
.pff-outlet__entry {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--pff-family-card-radius);
}

.pff-store__body,
.pff-outlet__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.pff-store__links,
.pff-outlet__links {
  margin-top: auto;
}

.pff-store__media,
.pff-outlet__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--pff-family-media-radius);
  aspect-ratio: var(--pff-family-media-ratio);
}

.pff-store__media .pff-media__img,
.pff-outlet__media .pff-media__img {
  width: 100%;
  height: 100%;
  object-fit: var(--pff-family-media-fit);
  object-position: var(--pff-family-media-position);
}

.pff-stores__groups {
  display: grid;
  gap: var(--pff-family-group-gap);
}

.pff-stores__group {
  min-width: 0;
}

.pff-stores__group-heading {
  margin: 0 0 var(--pff-space-s);
}

/* -------------------------------------------------------------------------- */
/* Filter / reset / empty-state structure (progressive-enhancement hooks).    */
/* -------------------------------------------------------------------------- */

.pff-stores__filters {
  margin-block-end: var(--pff-family-gap);
}

.pff-stores__fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pff-family-filter-gap);
  margin: 0;
  padding: 0 0 var(--pff-space-m);
  border: 0;
  min-inline-size: 0;
}

.pff-stores__legend {
  padding: 0;
  margin: 0 0 var(--pff-space-xs);
}

.pff-stores__field {
  display: flex;
  flex-direction: column;
  gap: var(--pff-space-3xs);
  min-width: 0;
  /* Equal-width facet columns: every select field shares the row equally and
     wraps to a stack on narrow viewports. One facet must never render as a
     lone shrunk-to-content control while its siblings get full columns. */
  flex: 1 1 12rem;
}

.pff-stores__select {
  inline-size: 100%;
}

.pff-stores__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pff-space-xs);
  /* Own full row below the selects: the reset link gets deliberate separation
     and can never touch or overlap a select at any viewport width. */
  flex-basis: 100%;
  margin-block-start: var(--pff-space-2xs);
}

/* With instant filtering active and no active filter, the actions row holds
   only the JS-hidden submit — hide the whole row so the unfiltered filter box
   stays exactly three selects with no phantom row. The reset row reappears
   server-side as soon as a filter is active. (Lives here, not base.css: every
   site loads this file on the family pages.) */
.pff-stores__filters[data-pff-stores-enhanced] .pff-stores__actions--noreset {
  display: none;
}

.pff-stores__empty,
.pff-outlet__empty {
  margin: 0;
}

.pff-stores__empty--filtered {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pff-space-xs);
}

/* -------------------------------------------------------------------------- */
/* Opening hours (T-CORE-2): one shared formatter geometry. Tabular numerals */
/* keep time columns scannable; a time range never breaks mid-range; below   */
/* 30rem (~480px) the day label stacks above its times. Sites keep colour /  */
/* size skin but no longer re-declare this geometry.                          */
/* -------------------------------------------------------------------------- */

.pff-hours__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pff-hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--pff-space-s);
}

.pff-hours__time {
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
  word-break: keep-all;
}

@media (max-width: 30rem) {
  .pff-hours__row {
    flex-direction: column;
    gap: 0;
  }

  .pff-hours__time {
    text-align: left;
  }
}

/* -------------------------------------------------------------------------- */
/* Contact rows (T-CORE-2): e-mail/phone values break only at word           */
/* boundaries — never mid-address (the "streetone@pico- / one.ch" defect).   */
/* -------------------------------------------------------------------------- */

.pff-contact__value {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* -------------------------------------------------------------------------- */
/* Brands directory (S13): letter-group headings, no alphabet jump nav.      */
/* One column on mobile, two at tablet (≥40rem), three at desktop (≥64rem).  */
/* Empty letter groups are never emitted (groups() only has populated ones). */
/* -------------------------------------------------------------------------- */

.pff-brands {
  columns: 1;
  column-gap: var(--pff-family-gap, var(--pff-space-l));
}

.pff-brands__group {
  break-inside: avoid;
  margin-block-end: var(--pff-space-m);
}

.pff-brands__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) {
  .pff-brands {
    columns: 2;
  }
}

@media (min-width: 64rem) {
  .pff-brands {
    columns: 3;
  }
}
/* ---- Consent-gated map embed (pff-core.parts.map) ----------------------- */
/* Core owns structure and geometry; colour, radius, spacing and type come
   from the shared --pff-* tokens. Every var() carries a neutral fallback so
   hosts with bespoke token sets (Fidelio custom chrome) still get a fully
   styled card. Safe site hooks: --pff-family-map-min-h,
   --pff-family-map-frame-h. */
.pff-map {
  --pff-family-map-min-h: 16rem;
  --pff-family-map-frame-h: 22rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pff-space-2xs, 0.5rem);
  min-height: var(--pff-family-map-min-h);
  padding: var(--pff-space-m, 1.5rem);
  border: 1px solid var(--pff-color-border, rgba(127, 127, 127, 0.35));
  border-radius: var(--pff-radius-default, 0);
  background: var(--pff-color-surface, rgba(127, 127, 127, 0.08));
  text-align: center;
  overflow: hidden;
}

.pff-map__gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pff-space-2xs, 0.5rem);
}

.pff-map__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--pff-space-2xs, 0.5rem) var(--pff-space-m, 1.5rem);
  font: inherit;
  font-weight: 600;
  color: var(--pff-color-bg, #ffffff);
  background: var(--pff-color-fg, #1a1a1a);
  border: 0;
  border-radius: var(--pff-radius-default, 0);
  cursor: pointer;
}

.pff-map__btn:hover {
  opacity: 0.85;
}

.pff-map__btn:focus-visible {
  outline: none;
  box-shadow: var(--pff-focus-ring, 0 0 0 2px var(--pff-color-fg, #1a1a1a));
}

.pff-map__note {
  margin: 0;
  max-width: 34ch;
  font-size: calc(var(--pff-font-base, 1rem) * 0.875);
  line-height: var(--pff-font-leading, 1.6);
  color: var(--pff-color-muted, #6b6b6b);
}

.pff-map__ext {
  font-size: calc(var(--pff-font-base, 1rem) * 0.875);
  color: inherit;
}

.pff-map--loaded {
  min-height: 0;
  padding: 0;
  height: var(--pff-family-map-frame-h);
}

.pff-map__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}