/* =====================================================================
   Fidelio — base layer + layout primitives + header/footer/nav.
   Site-local composition. The primitives (.container / .grid) mirror the
   shared pff-kirby-core contract so the swap is a 1:1 replacement.
   ===================================================================== */

/* --- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    min-height: 100dvh;
    /* Non-fixed flex column: on short pages .site-main grows so the footer
       reaches the viewport bottom without ever covering content (S13). */
    display: flex;
    flex-direction: column;
    background: var(--pff-color-bg);
    color: var(--pff-color-fg);
    font-family: var(--pff-font-sans);
    font-size: var(--pff-step-0);
    line-height: var(--pff-leading-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { font-style: italic; background-repeat: no-repeat; background-size: cover; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
address { font-style: normal; }
h1, h2, h3, h4 { font-family: var(--pff-font-display); font-weight: 700; line-height: var(--pff-leading-tight); }
:focus-visible { outline: 2px solid var(--pff-color-fg); outline-offset: 3px; }

/* --- Accessibility utilities --------------------------------------- */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: var(--pff-gutter); top: -200%; z-index: 1000;
    padding: .75rem 1.25rem; background: var(--pff-color-fg); color: var(--pff-color-inverse);
    transition: top var(--pff-dur) var(--pff-ease);
}
.skip-link:focus { top: .75rem; }

/* --- Layout primitives --------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--pff-container-max);
    margin-inline: auto;
    padding-inline: var(--pff-gutter);
}
.container--flush { padding-inline: 0; }

.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 12), minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
}

/* --- Site header --------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--pff-color-bg);
    border-bottom: 1px solid var(--pff-color-line);
}
/* Three-track grid: equal side columns keep the primary nav centred on the
   header axis, independent of the logo and tools widths. */
.site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--pff-header-h);
}
.site-header__brand { display: inline-flex; justify-self: start; }
.site-header__logo { width: auto; height: 2rem; }
.site-header__nav  { justify-self: center; display: flex; justify-content: center; }
.site-header__tools {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* --- Primary nav --------------------------------------------------- */
.primary-nav__list { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.primary-nav__link {
    font-size: var(--pff-step--1);
    font-weight: 500;
    letter-spacing: var(--pff-tracking-mid);
    text-transform: uppercase;
    padding: .25rem 0;
    /* «Editorial Cut»: hover underline draws left→right in 150ms; the active
       page underline is static. */
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.primary-nav__link:hover,
.primary-nav__link:focus-visible { background-size: 100% 1px; }
.primary-nav__link[aria-current="page"] { background-size: 100% 1px; }

/* --- Social -------------------------------------------------------- */
.social { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .4rem;
    color: var(--pff-color-fg-muted);
    transition: color var(--pff-dur) var(--pff-ease);
}
.social__link:hover,
.social__link:focus-visible { color: var(--pff-color-fg); }
.social__icon { width: 1.2rem; height: 1.2rem; display: block; }
/* Light header: solid black glyphs (currentColor). Footer keeps inverse;
   mobile drawer keeps muted→fg on the light panel. */
.social--header .social__link,
.social--header .social__link:hover,
.social__link:focus-visible { color: var(--pff-color-fg); }

/* --- Nav toggle (mobile) ------------------------------------------ */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; height: 2.5rem;
    border: 1px solid var(--pff-color-line);
    border-radius: var(--pff-radius);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block; width: 1.15rem; height: 1.5px; background: var(--pff-color-fg);
    position: relative; transition: transform var(--pff-dur) var(--pff-ease), opacity var(--pff-dur) var(--pff-ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.is-nav-open .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.is-nav-open .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.is-nav-open .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- Off-canvas mobile nav ---------------------------------------- */
.mobile-nav,
.mobile-nav__scrim { display: none; }
.nav-toggle { display: none; }

.site-header__tools .social { display: flex; }

/* --- Default / editorial page composition ------------------------- */
.site-main { flex: 1 0 auto; min-width: 0; }
.page { padding-block: clamp(3rem, 8vw, 6rem); }
.page--editorial { padding-block: 0; min-width: 0; }

/* Legacy page_* kept for any residual markup / error template. */
.page__head { max-width: 60ch; margin-bottom: 2rem; }
.page__title { font-size: var(--pff-step-3); letter-spacing: -0.01em; }
.page__intro { margin-top: 1rem; color: var(--pff-color-fg-muted); font-size: var(--pff-step-1); }
.page__label { font-size: var(--pff-step--1); letter-spacing: var(--pff-tracking-wide); text-transform: uppercase; color: var(--pff-color-fg-muted); margin-bottom: .75rem; }
.page__figure { margin: 0 0 2rem; }
.page__media { display: block; width: 100%; height: auto; }
.page__store { display: block; max-width: 36ch; margin-top: 2.5rem; font-style: normal; }
.page__store-title { font-size: var(--pff-step-1); margin-bottom: .75rem; }
.page__store-line { font-size: var(--pff-step-0); color: var(--pff-color-fg-muted); margin-bottom: .5rem; }
.page__store-link { border-bottom: 1px solid var(--pff-color-line); }
.page__store-link:hover,
.page__store-link:focus-visible { border-bottom-color: var(--pff-color-fg); }
.page__store-hours { font-size: var(--pff-step--1); color: var(--pff-color-fg-muted); margin-top: .75rem; }
.page__back {
    display: inline-block; margin-top: 1.5rem; padding-bottom: .2rem;
    border-bottom: 1px solid var(--pff-color-fg); text-transform: uppercase; letter-spacing: var(--pff-tracking-mid); font-size: var(--pff-step--1);
}

/* Editorial shell — Tierra-inspired hierarchy, Fidelio tokens only. */
.editorial { min-width: 0; }
.editorial__head,
.editorial__section {
    padding-block: clamp(2.5rem, 7vw, 5rem);
    min-width: 0;
}
.editorial__head { padding-bottom: clamp(1.25rem, 3vw, 2rem); }
.editorial__eyebrow {
    font-size: var(--pff-step--1);
    letter-spacing: var(--pff-tracking-wide);
    text-transform: uppercase;
    color: var(--pff-color-fg-muted);
    margin-bottom: .75rem;
    font-weight: 500;
}
.editorial__title {
    font-size: var(--pff-step-4);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    max-width: 18ch;
}
.editorial__lede {
    margin-top: 1.25rem;
    max-width: 42rem;
    font-size: var(--pff-step-1);
    line-height: var(--pff-leading-body);
    color: var(--pff-color-fg-muted);
}
.editorial__lede--body {
    font-size: var(--pff-step-0);
    color: var(--pff-color-fg);
}
.editorial__lede--body + .editorial__lede--body { margin-top: 1rem; }
.editorial__intro { margin-top: 1.5rem; max-width: 46rem; }

/* Women/Men hero with verified media only (no empty plates). */
.editorial__hero {
    position: relative;
    padding-block: clamp(3rem, 8vw, 6rem);
    border-bottom: 1px solid var(--pff-color-line);
}
/* Women hero renders flush — no bottom rule (S09 review refinement). */
.editorial__hero--flush { border-bottom: 0; }
.editorial__hero--media {
    padding-block: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}
.editorial__figure {
    margin: 0;
    min-width: 0;
    background: var(--pff-color-fg);
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.editorial__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.editorial__hero-copy {
    position: relative;
    z-index: 1;
    padding-block: clamp(2rem, 5vw, 3.5rem);
    min-width: 0;
}
.editorial__hero--media .editorial__hero-copy {
    margin-top: -4.5rem;
    background: var(--pff-color-bg);
    border: 1px solid var(--pff-color-line);
    max-width: min(40rem, calc(100% - (var(--pff-gutter) * 2)));
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

/* Brand A–Z directory (multi-column, break-inside avoid). */
.brand-section + .brand-section {
    border-top: 1px solid var(--pff-color-line);
}
.brand-section__title {
    font-size: var(--pff-step-2);
    letter-spacing: var(--pff-tracking-mid);
    text-transform: uppercase;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.brand-dir {
    columns: 3;
    column-gap: clamp(1.25rem, 3vw, 2.5rem);
    min-width: 0;
}
.brand-dir__group {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 1.75rem;
}
.brand-dir__letter {
    font-size: var(--pff-step-1);
    font-weight: 700;
    letter-spacing: var(--pff-tracking-mid);
    text-transform: uppercase;
    margin: 0 0 .5rem;
}
/* Divider spans ~30% of the column width, not the full column (S09 refinement). */
.brand-dir__letter::after {
    content: "";
    display: block;
    width: 30%;
    height: 1px;
    margin-top: .35rem;
    background: var(--pff-color-line);
}
.brand-dir__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.brand-dir__item {
    font-size: var(--pff-step-0);
    line-height: 1.55;
    padding-block: .2rem;
    color: var(--pff-color-fg);
    overflow-wrap: anywhere;
}

/* In den Medien — press gallery (masonry via CSS columns, no overflow). */
.media-gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 16rem;
    column-gap: clamp(1rem, 2.5vw, 1.75rem);
    min-width: 0;
}
.media-gallery__item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
}
.media-gallery__figure {
    margin: 0;
    min-width: 0;
}
.media-gallery__img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--pff-color-surface);
}
.media-gallery__caption {
    margin-top: .6rem;
    font-size: var(--pff-step--1);
    line-height: var(--pff-leading-body);
    color: var(--pff-color-fg-muted);
    overflow-wrap: anywhere;
    /* Fixed two-line caption style (T-FID-1). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * var(--pff-leading-body) * 1em);
}

/* Featured store card (Women/Men). */
.store-card {
    max-width: 36rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--pff-color-line);
    background: var(--pff-color-surface);
}
/* Featured store card + consent-gated map duo: card left, map right from
   the core 48rem breakpoint; stacked single column below. */
.store-card-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: stretch;
}
@media (min-width: 48rem) {
    .store-card-row { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); }
}
.store-card__eyebrow {
    font-size: var(--pff-step--1);
    letter-spacing: var(--pff-tracking-wide);
    text-transform: uppercase;
    color: var(--pff-color-fg-muted);
    margin-bottom: .5rem;
}
.store-card__title {
    font-size: var(--pff-step-2);
    letter-spacing: var(--pff-tracking-mid);
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.store-card__line {
    font-size: var(--pff-step-0);
    color: var(--pff-color-fg-muted);
    margin-bottom: .65rem;
}
.store-card__link { border-bottom: 1px solid var(--pff-color-line); }
.store-card__link:hover,
.store-card__link:focus-visible { border-bottom-color: var(--pff-color-fg); }
.store-card__hours {
    font-size: var(--pff-step--1);
    color: var(--pff-color-fg-muted);
    margin-top: 1rem;
}
.store-card__hours-label {
    display: inline-block;
    letter-spacing: var(--pff-tracking-mid);
    text-transform: uppercase;
    color: var(--pff-color-fg);
    margin-bottom: .25rem;
}

/* Outlet / partner location cards (legacy presentation; grid is core-owned). */
.location-card,
.partner-card {
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--pff-color-line);
    background: var(--pff-color-surface);
}
.location-card__title,
.partner-card__title {
    font-size: var(--pff-step-1);
    letter-spacing: var(--pff-tracking-mid);
    text-transform: uppercase;
    margin: 0 0 1rem;
    overflow-wrap: anywhere;
}
.location-card__details,
.partner-card__details {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.location-card__line,
.partner-card__line {
    font-size: var(--pff-step--1);
    line-height: 1.55;
    color: var(--pff-color-fg-muted);
    overflow-wrap: anywhere;
}
.location-card__line--hours,
.partner-card__line--hours { margin-top: .35rem; }
.location-card__link,
.partner-card__link {
    border-bottom: 1px solid var(--pff-color-line);
    color: var(--pff-color-fg);
}
.location-card__link:hover,
.partner-card__link:hover { border-bottom-color: var(--pff-color-fg); }
.partner-card__link--brands {
    text-transform: uppercase;
    letter-spacing: var(--pff-tracking-mid);
    font-weight: 500;
}

/* Prose fallback (media/legal etc.). */
.prose { max-width: 48rem; min-width: 0; }
.prose > * + * { margin-top: 1rem; }
.prose h2, .prose h3 {
    margin-top: 2rem;
    letter-spacing: var(--pff-tracking-mid);
    text-transform: uppercase;
}
.prose ul, .prose ol { padding-left: 1.1rem; list-style: disc; }
.prose a { border-bottom: 1px solid var(--pff-color-line); }
.prose a:hover { border-bottom-color: var(--pff-color-fg); }

/* Editorial responsive — stack at tablet / 390px-safe. */
@media (max-width: 959px) {
    .brand-dir { columns: 2; }
    .editorial__hero--media .editorial__hero-copy {
        margin-top: -2.5rem;
        max-width: calc(100% - (var(--pff-gutter) * 2));
    }
    .editorial__figure { aspect-ratio: 4 / 3; }
}

@media (max-width: 480px) {
    .brand-dir { columns: 1; }
    .brand-dir__item { padding-block: .55rem; }
    .editorial__title { font-size: var(--pff-step-3); max-width: none; }
    .editorial__hero--media .editorial__hero-copy {
        margin-top: 0;
        max-width: none;
        margin-inline: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }
}

/* --- Site footer --------------------------------------------------- */
.site-footer { background: var(--pff-color-fg); color: var(--pff-color-inverse); margin-top: clamp(3rem, 8vw, 6rem); }
.site-footer__inner {
    display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 4rem);
    justify-content: space-between; align-items: flex-start;
    padding-block: clamp(2.5rem, 6vw, 4rem);
}
.site-footer__stores { display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 4rem); }
.store { max-width: 26ch; }
.store__name { font-size: var(--pff-step-1); margin-bottom: .75rem; }
.store__line { font-size: var(--pff-step--1); color: rgba(255, 255, 255, .82); margin-bottom: .5rem; }
.store__link { border-bottom: 1px solid rgba(255, 255, 255, .35); }
.store__link:hover { border-bottom-color: var(--pff-color-inverse); }
.store__hours { font-size: var(--pff-step--1); color: rgba(255, 255, 255, .65); }
.site-footer__meta { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.site-footer .social__link { color: rgba(255, 255, 255, .82); }
.site-footer .social__link:hover { color: var(--pff-color-inverse); }
.site-footer__legal-link { font-size: var(--pff-step--1); text-transform: uppercase; letter-spacing: var(--pff-tracking-mid); border-bottom: 1px solid rgba(255, 255, 255, .35); }
.site-footer__copy { font-size: var(--pff-step--1); color: rgba(255, 255, 255, .55); }

/* =====================================================================
   Responsive — below the shared nav breakpoint, switch to off-canvas.
   ===================================================================== */
@media (max-width: 959px) {
    .site-header__nav { display: none; }                 /* hide primary nav */
    .site-header__tools .social--header { display: none; }
    .nav-toggle { display: inline-flex; }                /* show hamburger */

    .mobile-nav {
        position: fixed; inset: 0 0 0 auto;
        width: min(86vw, 420px);
        background: var(--pff-color-bg);
        border-left: 1px solid var(--pff-color-line);
        transform: translateX(100%);
        /* «Editorial Cut»: drawer slides in 240ms ease-out; the item list
           arrives as one printed column (no per-item stagger). */
        transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
        z-index: 200;
        overflow-y: auto;
        padding: var(--pff-header-h) var(--pff-gutter) var(--pff-gutter);
    }
    body.is-nav-open .mobile-nav:not([hidden]) { transform: translateX(0); }
    .mobile-nav:not([hidden]) { display: block; }
    .mobile-nav[hidden] { display: none; }

    .mobile-nav__close {
        position: absolute; top: calc(var(--pff-header-h) * .35); right: var(--pff-gutter);
        width: 2.5rem; height: 2.5rem; font-size: 1.1rem;
        border: 1px solid var(--pff-color-line); border-radius: var(--pff-radius);
    }
    .mobile-nav__list { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 2rem; }
    .mobile-nav__link {
        display: block; padding: .9rem 0; font-size: var(--pff-step-2);
        border-bottom: 1px solid var(--pff-color-line);
    }
    .mobile-nav__link[aria-current="page"] { font-weight: 600; }
    .mobile-nav__social { padding-top: 1rem; border-top: 1px solid var(--pff-color-line); }

    .mobile-nav__scrim {
        display: block; position: fixed; inset: 0; z-index: 150;
        background: var(--pff-color-overlay); opacity: 0;
        /* «Editorial Cut»: backdrop fade 150ms. */
        transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
    }
    body.is-nav-open .mobile-nav__scrim:not([hidden]) { display: block; opacity: 1; }
    .mobile-nav__scrim[hidden] { display: none; }
}

@media (min-width: 960px) {
    .site-footer__inner { flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   Shared pff-core page families (S09) — Fidelio editorial skin.
   Uses Fidelio's own --pff-* tokens only; matches the Women/Men
   directory character (30% letter divider, uppercase editorial).
   ============================================================ */

/* Brands (Women / Men) — alphabet directory in balanced columns. */
.pff-brands { columns: 3; column-gap: clamp(1.25rem, 3vw, 2.5rem); min-width: 0; }
.pff-brands__group { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin: 0 0 1.75rem; }
.pff-brands__letter {
    font-size: var(--pff-step-1); font-weight: 700; letter-spacing: var(--pff-tracking-mid);
    text-transform: uppercase; margin: 0 0 .5rem;
}
.pff-brands__letter::after { content: ""; display: block; width: 30%; height: 1px; margin-top: .35rem; background: var(--pff-color-line); }
.pff-brands__list { list-style: none; margin: 0; padding: 0; }
.pff-brands__item { font-size: var(--pff-step-0); line-height: 1.55; padding-block: .2rem; overflow-wrap: anywhere; }
.pff-brands__link { border-bottom: 1px solid var(--pff-color-line); }
.pff-brands__link:hover { border-bottom-color: var(--pff-color-fg); }
.pff-brands__empty { color: var(--pff-color-fg-muted); }

/* About — Fidelio tokens only; split/stack geometry is core family-layout. */
.pff-about {
    --pff-family-copy-measure: 46rem;
    --pff-family-about-media-ratio: 3 / 2;
    --pff-family-media-fit: cover;
    --pff-family-media-position: center;
    --pff-family-media-radius: 0;
    --pff-family-gap: clamp(1.5rem, 4vw, 3rem);
    padding-block: clamp(3rem, 8vw, 6rem);
}
.pff-about__eyebrow { font-size: var(--pff-step--1); letter-spacing: var(--pff-tracking-wide); text-transform: uppercase; color: var(--pff-color-fg-muted); margin-bottom: .75rem; font-weight: 500; }
.pff-about__title { font-size: var(--pff-step-4); letter-spacing: -0.02em; text-transform: uppercase; max-width: 18ch; }
.pff-about__lead { margin-top: 1.25rem; font-size: var(--pff-step-1); line-height: var(--pff-leading-body); color: var(--pff-color-fg-muted); }
.pff-about__body { margin-top: 1.5rem; }
.pff-about__body p { margin: 0 0 1rem; line-height: var(--pff-leading-body); }
.pff-about__facts { margin: 1.5rem 0 0; }
.pff-about__fact { min-width: 0; }
.pff-about__fact-label { color: var(--pff-color-fg-muted); text-transform: uppercase; letter-spacing: var(--pff-tracking-mid); font-size: var(--pff-step--1); }

/* Outlet + Partner Stores — Fidelio card skin. Geometry is pff-family-grid. */
.pff-outlet,
.pff-stores {
    --pff-family-card-gap: clamp(1.25rem, 3vw, 2rem);
    --pff-family-group-gap: clamp(2rem, 5vw, 3.25rem);
    /* 2026-08-17 feedback: deliberate horizontal + vertical gaps between the
       Region/Stadt/Sortiment controls — one shared token drives both axes. */
    --pff-family-filter-gap: clamp(1rem, 2.5vw, 1.75rem);
    --pff-family-card-radius: 0;
    --pff-family-media-ratio: 4 / 3;
    --pff-family-media-fit: cover;
    --pff-family-media-position: center;
    --pff-family-media-radius: 0;
}
.pff-outlet__entry, .pff-store {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--pff-color-line); background: var(--pff-color-surface);
}
.pff-outlet__name, .pff-store__name {
    font-size: var(--pff-step-2); letter-spacing: var(--pff-tracking-mid); text-transform: uppercase; margin: 0 0 .5rem; overflow-wrap: anywhere;
}
.pff-outlet__offer { font-size: var(--pff-step-0); color: var(--pff-color-fg-muted); margin: 0 0 .75rem; }
.pff-outlet__links, .pff-store__links { flex-wrap: wrap; gap: .35rem 1rem; }
.pff-outlet__link, .pff-store__link { font-size: var(--pff-step--1); text-transform: uppercase; letter-spacing: var(--pff-tracking-mid); border-bottom: 1px solid var(--pff-color-fg); }
.pff-outlet__empty, .pff-stores__empty, .pff-location__empty { color: var(--pff-color-fg-muted); }

/* Shared parts (address / contact / hours / audience / media). */
.pff-address { font-style: normal; line-height: var(--pff-leading-body); overflow-wrap: anywhere; }
.pff-contact { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .25rem; }
.pff-contact__item { display: flex; gap: .5rem; flex-wrap: wrap; font-size: var(--pff-step-0); min-width: 0; }
.pff-contact__label { color: var(--pff-color-fg-muted); text-transform: uppercase; letter-spacing: var(--pff-tracking-mid); font-size: var(--pff-step--1); }
.pff-contact__value { border-bottom: 1px solid var(--pff-color-line); overflow-wrap: anywhere; }
.pff-contact__value:hover { border-bottom-color: var(--pff-color-fg); }
.pff-hours { margin-top: .6rem; }
/* Hours geometry (flex rows, tabular numerals, no mid-range breaks, sub-30rem
   stacking) is owned by core family-layout.css since S12 — Fidelio keeps only
   the colour/size skin. */
.pff-hours__row { font-size: var(--pff-step--1); padding-block: .15rem; }
.pff-hours__day { color: var(--pff-color-fg-muted); }
.pff-hours__note { font-size: var(--pff-step--1); color: var(--pff-color-fg-muted); margin: .35rem 0 0; }
.pff-audience { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.pff-audience__badge { font-size: var(--pff-step--1); text-transform: uppercase; letter-spacing: var(--pff-tracking-mid); padding: .1rem .5rem; border: 1px solid var(--pff-color-line); }
.pff-media { margin: 0 0 1rem; min-width: 0; overflow: hidden; }
.pff-media__img { display: block; width: 100%; height: auto; }

/* Partner Stores filter form — Fidelio visual skin only. */
.pff-stores__fieldset { border: 1px solid var(--pff-color-line); padding: clamp(1rem, 2.5vw, 1.5rem); }
.pff-stores__legend { padding: 0 .5rem; font-size: var(--pff-step--1); text-transform: uppercase; letter-spacing: var(--pff-tracking-wide); color: var(--pff-color-fg-muted); }
.pff-stores__field-label { font-size: var(--pff-step--1); text-transform: uppercase; letter-spacing: var(--pff-tracking-mid); color: var(--pff-color-fg-muted); }
/* 2026-08-17 feedback: the facet selects wear the Fidelio skin instead of
   the generic browser control — flat field, hairline border, house chevron
   (inline SVG, currentColor), 48px touch target. Native select semantics,
   keyboard and the no-JS GET fallback are unchanged (markup/JS frozen). */
.pff-stores__select {
    font: inherit;
    appearance: none;
    min-height: 48px;
    padding: .55rem 2.5rem .55rem .75rem;
    border: 1px solid var(--pff-color-line);
    background: var(--pff-color-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    color: var(--pff-color-fg);
    border-radius: var(--pff-radius);
    max-width: 100%;
    cursor: pointer;
    transition: border-color 120ms cubic-bezier(0.2, 0, 0, 1);
}
.pff-stores__select:hover { border-color: var(--pff-color-fg); }
.pff-stores__select:focus-visible { outline: 2px solid var(--pff-color-fg); outline-offset: 2px; }
/* «Editorial Cut»: buttons invert white↔black in 120ms. */
.pff-stores__submit { font: inherit; font-size: var(--pff-step--1); text-transform: uppercase; letter-spacing: var(--pff-tracking-mid); padding: .55rem 1.1rem; border: 1px solid var(--pff-color-fg); background: var(--pff-color-fg); color: var(--pff-color-inverse); cursor: pointer; border-radius: var(--pff-radius); transition: background-color 120ms cubic-bezier(0.2, 0, 0, 1), color 120ms cubic-bezier(0.2, 0, 0, 1); }
.pff-stores__submit:hover { background: var(--pff-color-bg); color: var(--pff-color-fg); }
/* Review 2026-08-14: vertical separation between the Partner Stores filter
   and the first brand group (core default --pff-space-l read as cramped
   against the bordered fieldset). Site skin only; geometry token untouched. */
.pff-stores__filters { margin-block-end: clamp(2.5rem, 6vw, 4rem); }
.pff-stores__reset, .pff-stores__reset-link { font-size: var(--pff-step--1); text-transform: uppercase; letter-spacing: var(--pff-tracking-mid); border-bottom: 1px solid var(--pff-color-line); }
.pff-stores__reset:hover, .pff-stores__reset-link:hover { border-bottom-color: var(--pff-color-fg); }
/* 2026-08-17 feedback: group titles use Fidelio's normal heading tracking
   (editorial title standard), not the wide label tracking. */
.pff-stores__group-heading { font-size: var(--pff-step-3); text-transform: uppercase; letter-spacing: -0.02em; }
.pff-stores__list--ungrouped { border-top: 1px solid var(--pff-color-line); }

@media (max-width: 720px) { .pff-brands { columns: 2; } }
@media (max-width: 480px) { .pff-brands { columns: 1; } }

/* =====================================================================
   Media archive grouping (Fable 5 T-FID-1) and the bespoke directory
   letter navigation (T-CORE-3, geometry mirrors the shared core
   contract). Motion personality «Editorial Cut» (T-MOT-2): print-inspired,
   hard-edged, fast — short 25% entry range, 12px rise, monochrome only,
   no bounce. Fidelio's custom chrome does not load the core base layer, so
   the reveal primitives follow the same contract here: CSS-only
   scroll-driven view() animations, double-gated behind
   prefers-reduced-motion: no-preference and @supports — everything renders
   fully visible without JS, without support, and in captures.
   ===================================================================== */

.media-archive__group {
    margin-top: clamp(2.5rem, 6vw, 4rem);
}
.media-archive__group:first-child {
    margin-top: 0;
}

/* Publication filter (S13): same visual language as the Partner Stores
   filter — labelled select, invert-on-hover submit, text-link reset. */
.media-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin: 0 0 clamp(2rem, 5vw, 3rem);
}
.media-filter__label {
    font-size: var(--pff-step--1);
    font-weight: 500;
    letter-spacing: var(--pff-tracking-mid);
    text-transform: uppercase;
    color: var(--pff-color-fg-muted);
}
.media-filter__select {
    font: inherit;
    padding: .5rem .6rem;
    border: 1px solid var(--pff-color-line);
    background: var(--pff-color-bg);
    color: var(--pff-color-fg);
    border-radius: var(--pff-radius);
    max-width: 100%;
}
.media-filter__submit {
    font: inherit;
    font-size: var(--pff-step--1);
    text-transform: uppercase;
    letter-spacing: var(--pff-tracking-mid);
    padding: .55rem 1.1rem;
    border: 1px solid var(--pff-color-fg);
    background: var(--pff-color-fg);
    color: var(--pff-color-inverse);
    cursor: pointer;
    border-radius: var(--pff-radius);
    transition: background-color 120ms cubic-bezier(0.2, 0, 0, 1), color 120ms cubic-bezier(0.2, 0, 0, 1);
}
.media-filter__submit:hover {
    background: var(--pff-color-bg);
    color: var(--pff-color-fg);
}
.media-filter__reset {
    font-size: var(--pff-step--1);
    text-transform: uppercase;
    letter-spacing: var(--pff-tracking-mid);
    border-bottom: 1px solid var(--pff-color-line);
}
.media-filter__reset:hover {
    border-bottom-color: var(--pff-color-fg);
}
.media-archive__heading {
    margin: 0 0 1.25rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--pff-color-line);
    font-size: var(--pff-step--1);
    font-weight: 500;
    letter-spacing: var(--pff-tracking-wide);
    text-transform: uppercase;
    color: var(--pff-color-fg-muted);
}

/* Review 2026-08-14: /media rhythm. The hero bottom padding and section
   top padding stacked to ~11rem of whitespace between intro copy and the
   publication filter; collapse the pairing to a single editorial gap. */
.editorial--media .editorial__hero {
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.editorial--media .editorial__section {
    padding-top: 0;
}

/* Editorial images: the clip-path column wipe stays the Fidelio signature —
   now scrubbed by viewport entry inside the T-MOT-2 reveal layer below. */

/* S13: A–Z jump navigation removed portfolio-wide. The bespoke Women/Men
   directory markup no longer emits .brand-dir__nav (styles dropped), and the
   completed S13 core no longer renders .pff-brands__nav in the shared Brands
   snippet at all — grouped letter headings are the only group chrome. */

/* «Editorial Cut» reveals (T-MOT-2): CSS-only scroll-driven view()
   animations behind a double gate, with the shared visibility invariant —
   nothing here animates opacity or fully conceals content. Full-page
   captures resolve scrubbed timelines to their `from` state (coordinator
   Chromium evidence, browser-review 0815 after-motion), so the worst
   degraded render is a 12px offset or an image with a 15% edge crop still
   opening — never a blank block. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .pff-reveal,
        .pff-reveal-group > * {
            animation: fid-reveal-rise 1ms var(--pff-motion-ease-out) both;
            animation-timeline: view();
            animation-range: entry 0% entry var(--pff-motion-reveal-range, 25%);
        }
        /* Editorial images keep the signature column wipe: the clip edge
           opens from a 15% inset — the image is always substantially
           visible while the cut completes on entry. */
        .media-gallery__item.pff-reveal {
            animation-name: fid-reveal-wipe;
        }
    }
}
@keyframes fid-reveal-rise {
    from { transform: translateY(var(--pff-motion-rise, 12px)); }
}
@keyframes fid-reveal-wipe {
    from { clip-path: inset(0 15% 0 0); }
}

/* Store cards: hover raises the border from line to foreground, 120ms. */
.pff-store,
.store-card {
    transition: border-color 120ms cubic-bezier(0.2, 0, 0, 1);
}
.pff-store:hover,
.store-card:hover {
    border-color: var(--pff-color-fg);
}

/* Route transitions: 120ms paper-flash fade; plain navigation is the
   baseline where cross-document View Transitions are unavailable. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}
::view-transition-old(root) {
    animation: fid-route-out 120ms cubic-bezier(0.2, 0, 0, 1) both;
}
::view-transition-new(root) {
    animation: fid-route-in 120ms cubic-bezier(0.2, 0, 0, 1) both;
}
@keyframes fid-route-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes fid-route-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}