/* pico-one.ch — Sprint 04 visual-review build.
 *
 * Composition layer on top of pff-core (tokens/base/accessibility). Raw palette
 * and type scale are audit-confirmed (report.md §2.2–2.4, spec §3). Square 0px
 * controls everywhere; navy is the global umbrella chrome, Street One red and
 * CECIL blue are scoped to their brand modes. No webfonts are loaded: the
 * Roboto-first system stack is privacy-safe (no runtime request).
 */

:root {
  --pff-radius-default: 0;
  --pff-radius-sm: 0;
  --pff-color-focus: #0A4895;
  --pff-container-current-width: 75rem; /* 1200px content column */

  --pico-navy: #07152B;
  --pico-navy-deep: #0A0E1E;
  --pico-divider: #BDC1C8;
  --pico-body-gray: #555555;
  --pico-muted: #6E6E6E; /* a11y bump from audited #8D8D8D for <16px meta */
  --pico-red: #E40521;
  --pico-so-footer: #3D3D3D;
  --pico-blue: #0A4895;
  --pico-cecil-footer: #EBEBEB;

  --pico-font: Roboto, "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
}

body.pico {
  font-family: var(--pico-font);
  color: var(--pico-body-gray);
  background: #FFFFFF;
}

/* ---- theme modes ---------------------------------------------------- */
.theme-pico       { --accent: var(--pico-navy); --on-accent: #FFFFFF; }
.theme-street-one { --accent: var(--pico-red);  --on-accent: #FFFFFF; --pff-color-focus: var(--pico-navy); }
.theme-cecil      { --accent: var(--pico-blue); --on-accent: #FFFFFF; --pff-color-focus: var(--pico-navy); }

/* ---- type utilities --------------------------------------------------- */
.pico-container { max-width: 75rem; margin-inline: auto; padding-inline: 1.5rem; }

.pico-eyebrow {
  margin: 0 0 1rem;
  font-size: 0.75rem; /* 12px */
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: inherit;
}

.pico-h1 { font-size: 2.5rem; line-height: 2.875rem; font-weight: 500; color: var(--pico-navy); margin: 0 0 2rem; }
.pico-h2 { font-size: 2.1875rem; line-height: 2.625rem; font-weight: 500; color: var(--pico-navy); margin: 0 0 1.5rem; }
.pico-h3 { font-size: 1.375rem; line-height: 1.875rem; font-weight: 700; color: var(--pico-navy); margin: 0 0 1rem; }
.pico-h4 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; color: var(--pico-navy); margin: 0 0 0.75rem; }

.pico-lead { font-size: 1rem; line-height: 1.625rem; max-width: 45rem; }
.pico-body { font-size: 0.875rem; line-height: 1.5rem; max-width: 45rem; }
.pico-meta { font-size: 0.8125rem; line-height: 1.375rem; color: var(--pico-muted); }

/* ---- buttons (square 0px everywhere) ----------------------------------- */
.pico-btn {
  display: inline-block;
  padding: 12px 25px;
  border: 0;
  border-radius: 0;
  background: var(--pico-navy);
  color: #FFFFFF;
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.pico-btn--accent { background: var(--accent); color: var(--on-accent); text-transform: uppercase; letter-spacing: 0.5px; }
.pico-btn--blue   { background: var(--pico-blue); }
.pico-btn--outline { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.pico-btn--block  { display: block; text-align: center; }

.pico-btn:focus-visible,
.pico a:focus-visible,
.pico summary:focus-visible {
  outline: 2px solid var(--pff-color-focus);
  outline-offset: 2px;
}

/* ---- header -------------------------------------------------------------- */
.pico-header__top {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 72px;
  padding-inline: 2rem;
}
.pico-header--pico .pico-header__top { background: var(--pico-navy); }
.pico-header--street-one .pico-header__top { background: #FFFFFF; }
.pico-header--cecil .pico-header__top { background: var(--pico-navy); }

.pico-header__logo { display: block; height: 29px; width: auto; }
.pico-header--street-one .pico-header__logo { height: 34px; }
.pico-header--cecil .pico-header__logo { height: 26px; }

.pico-header__nav { margin-inline-start: auto; }
.pico-header__list,
.pico-nav-mobile__list {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pico-header__list--sub { justify-content: flex-end; padding: 0 2rem; min-height: 40px; align-items: center; }
.pico-header__sub { background: var(--pico-red); }
.pico-header--cecil .pico-header__sub { background: var(--pico-cecil-footer); }

.pico-header__link {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
}
.pico-header__link:hover,
.pico-header__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.pico-header--street-one .pico-header__top .pico-header__link { color: var(--pico-navy); }
.pico-header--cecil .pico-header__sub .pico-header__link { color: var(--pico-blue); }

/* native mobile navigation (replaces the shared off-canvas) */
.pico-nav-mobile { display: none; position: relative; }
.pico-nav-mobile__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 0 0 -0.75rem;
  color: currentColor;
  cursor: pointer;
  list-style: none;
}
.pico-nav-mobile__toggle::-webkit-details-marker { display: none; }
.pico-header--pico .pico-nav-mobile__toggle,
.pico-header--cecil .pico-nav-mobile__toggle { color: #FFFFFF; }
.pico-header--street-one .pico-nav-mobile__toggle { color: var(--pico-navy); }

.pico-nav-mobile__panel {
  position: absolute;
  top: 100%;
  left: -2rem;
  right: -2rem;
  width: 100vw;
  background: var(--pico-navy);
  z-index: 900;
}
.pico-header--street-one .pico-nav-mobile__panel { background: var(--pico-red); }
.pico-nav-mobile__list { flex-direction: column; gap: 0; padding: 1rem 0 1.5rem; }
.pico-nav-mobile__link {
  display: block;
  min-height: 44px;
  padding: 12px 2rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: #FFFFFF;
  text-decoration: none;
}

/* ---- hero slider ---------------------------------------------------------- */
.pico-hero { position: relative; height: min(46.25rem, 92vh); overflow: hidden; background: var(--pico-navy); }
.pico-hero--still { height: min(38.75rem, 80vh); }
.pico-hero__slides,
.pico-hero__slide { position: absolute; inset: 0; }
.pico-hero__slide { opacity: 0; transition: opacity 500ms ease; }
.pico-hero__slide.is-active { opacity: 1; }
.pico-hero__slide .pico-ph { width: 100%; height: 100%; }

.pico-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #FFFFFF;
  /* Soft static scrim centred on the copy zone; keeps white type AA-legible
     over the light campaign imagery without hiding the slides. */
  background: radial-gradient(ellipse 62% 58% at 50% 50%,
      rgba(7, 21, 43, 0.38) 0%,
      rgba(7, 21, 43, 0.16) 52%,
      rgba(7, 21, 43, 0) 72%);
  text-shadow: 0 1px 2px rgba(7, 21, 43, 0.45), 0 1px 14px rgba(7, 21, 43, 0.5);
  padding: 1rem;
}
.pico-hero__title { margin: 0; font-size: 2.8125rem; line-height: 3.25rem; font-weight: 300; }
.pico-hero__sub { margin: 0.75rem 0 0; font-size: 1.25rem; font-weight: 700; }
.pico-hero__tag { margin: 0.5rem 0 0; font-size: 0.875rem; }

.pico-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}
.pico-hero__arrow--prev { left: 1rem; }
.pico-hero__arrow--next { right: 1rem; }

.pico-hero__dots {
  position: absolute;
  bottom: 4.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}
.pico-hero__dot {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
/* «Schaufenster» carousel: progress shown as filling bars, never dots. The
   ::after track stays dim; the ::before fill sweeps 0 → 100% over the 6s
   rotation interval and pauses with the slider (is-paused). */
.pico-hero__dot::after {
  content: "";
  position: absolute;
  inset: 20px 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}
.pico-hero__dot::before {
  content: "";
  position: absolute;
  inset: 20px 6px;
  border-radius: 2px;
  background: #FFFFFF;
  transform: scaleX(0);
  transform-origin: left center;
}
.pico-hero__dot.is-active::before {
  animation: pico-hero-fill 6s linear forwards;
}
[data-pico-slider].is-paused .pico-hero__dot.is-active::before {
  animation-play-state: paused;
}
@keyframes pico-hero-fill {
  to { transform: scaleX(1); }
}

.pico-hero__chevron {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #FFFFFF;
}

.pico-hero__loader {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: pico-spin 1.4s linear infinite;
}
@keyframes pico-spin { to { transform: rotate(360deg); } }

/* ---- image placeholders / media -------------------------------------------- */
.pico-ph {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background: #D8D8DC;
  color: rgba(7, 21, 43, 0.55);
  overflow: hidden;
}
.pico-ph__label {
  padding: 0.75rem;
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.pico-ph--brick  { background: #A85F4B; color: rgba(255, 255, 255, 0.85); }
.pico-ph--purple { background: #83789B; color: rgba(255, 255, 255, 0.85); }
.pico-ph--camel  { background: #C9A68F; color: rgba(7, 21, 43, 0.55); }
.pico-ph--steel  { background: #7C93B4; color: rgba(255, 255, 255, 0.85); }
.pico-ph--portrait  { aspect-ratio: 3 / 4; }
.pico-ph--landscape { aspect-ratio: 4 / 3; }
.pico-ph--square    { aspect-ratio: 1 / 1; }
.pico-ph--hero,
.pico-ph--map { height: 100%; min-height: 260px; }
.pico-ph--media {
  background: #0b1528;
  display: block;
  line-height: 0;
  padding: 0;
}
.pico-ph__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}
.pico-ph--media.pico-ph--portrait {
  aspect-ratio: auto;
}
.pico-ph--media.pico-ph--portrait .pico-ph__img {
  aspect-ratio: 3 / 4;
  height: auto;
}
.pico-ph--media.pico-ph--landscape {
  aspect-ratio: auto;
}
.pico-ph--media.pico-ph--landscape .pico-ph__img {
  aspect-ratio: 4 / 3;
  height: auto;
}
.pico-ph--media.pico-ph--hero,
.pico-ph--media.pico-ph--map {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 260px;
  aspect-ratio: auto;
}
.pico-ph--media.pico-ph--hero .pico-ph__img,
.pico-ph--media.pico-ph--map .pico-ph__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* ---- sections & hierarchy (Tierra rhythm, Pico tokens) --------------------- */
.pico-section { padding-block: 6rem; min-width: 0; }
.pico-band { padding: 6rem 0; }
.pico-band--navy { background: var(--pico-navy); color: var(--pico-divider); }
.pico-band--navy .pico-h2,
.pico-band--navy .pico-heading,
.pico-band--navy .pico-eyebrow,
.pico-band--navy .pico-lede { color: #FFFFFF; }

/* Centred section intro — eyebrow → heading → lede */
.pico-intro {
  text-align: center;
  max-width: 45rem;
  margin-inline: auto;
  min-width: 0;
}
.pico-heading {
  margin: 0;
  font-size: 2.1875rem;
  line-height: 2.625rem;
  font-weight: 500;
  color: var(--pico-navy);
}
.pico-lede {
  margin: 1.5rem 0 0;
  font-size: 1rem;
  line-height: 1.625rem;
  color: inherit;
  max-width: 45rem;
  margin-inline: auto;
}
.pico-lede--start {
  text-align: start;
  /* margin-inline takes two values at most — the previous three-value form
     was invalid, so the centred `margin-inline: auto` kept winning. */
  margin-inline: 0;
  margin-block-end: 2.5rem;
  max-width: 40rem;
}
.pico-intro__action {
  margin: 1.75rem 0 0;
  text-align: center;
}
.pico-pageheading {
  margin: 0 0 3rem;
  font-size: 2.5rem;
  line-height: 2.875rem;
  font-weight: 500;
  color: var(--pico-navy);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.pico-subheading {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
  color: var(--pico-navy);
}

.pico-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-width: 0; }
.pico-split--navy { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--pico-navy); color: var(--pico-divider); }
.pico-split--navy .pico-h2 { color: #FFFFFF; }
.pico-split__text { padding: 6rem 4rem; align-self: center; min-width: 0; }
.pico-split__logo { height: 40px; width: auto; max-width: 100%; margin-bottom: 2.5rem; }
.pico-split--navy .pico-body { color: var(--pico-divider); }
.pico-split__media {
  min-height: 24rem;
  min-width: 0;
  display: flex;
  align-items: stretch;
}
.pico-split__media .pico-ph {
  width: 100%;
  flex: 1 1 auto;
  min-height: 24rem;
}
.pico-split__media .pico-ph--media.pico-ph--portrait {
  height: 100%;
  min-height: 24rem;
}
.pico-split__media .pico-ph--media.pico-ph--portrait .pico-ph__img {
  width: 100%;
  height: 100%;
  min-height: 24rem;
  aspect-ratio: auto;
  object-fit: cover;
}

.pico-stores { padding: 6rem 0; background: #FFFFFF; }
.pico-stores__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

/* store cards */
.pico-card { background: #F4F4F5; min-width: 0; }
/* Grid cards fill their row so every store card in a row is the same height
   (hours blocks vary from two to three rows); the CTA is pinned to the bottom. */
.pico-stores__grid > li { display: flex; min-width: 0; }
.pico-card--grid {
  padding: 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.pico-card__brand {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pico-card__name { margin: 0 0 1.25rem; font-size: 1.25rem; font-weight: 500; color: var(--pico-navy); }
/* Fixed two-column fact grid keeps Adresse | Öffnungszeiten and
   Telefon | E-Mail aligned identically across every card. */
.pico-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  margin: 0 0 1.5rem;
}
.pico-card--grid .pico-card__cta { margin-top: auto; }
.pico-card__fact dt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pico-muted);
}
.pico-card__fact dd { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.375rem; overflow-wrap: anywhere; }
.pico-card__fact a { color: inherit; }
.pico-card--band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pico-card--band .pico-card__body { padding: 2rem; min-width: 0; }
.pico-card__address { font-style: normal; font-size: 0.875rem; line-height: 1.5rem; margin-bottom: 0.75rem; }
.pico-card__contact { font-size: 0.8125rem; line-height: 1.5rem; }
.pico-card__contact a { color: inherit; }
.pico-card__hours ul { list-style: none; margin: 0.25rem 0 0; padding: 0; font-size: 0.8125rem; line-height: 1.5rem; }
.pico-card__hours li { display: flex; justify-content: space-between; gap: 1rem; max-width: 16rem; }
.pico-card__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.25rem 0 0; }

/* ---- microsite collection --------------------------------------------------- */
.pico-collection { padding: 6rem 0; }
.pico-collection__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
}
.pico-collection__grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pico-collection__grid > li { min-width: 0; }
.pico-collection__grid li:first-child { grid-row: span 2; }

/* ---- locator (Tierra standorte: map | details + hairline) ------------------- */
.pico-location {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 1.5rem 2rem;
  padding-top: 3rem;
  border-top: 1px solid var(--pico-divider);
  min-width: 0;
}
.pico-location + .pico-location { margin-top: 4rem; }
.pico-location:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.pico-location__map,
.pico-location__details { min-width: 0; }
/* The media map/storefront panel is absolutely positioned (inset: 0), so its
   column MUST be the containing block — without this the image resolves
   against the initial containing block and paints full-bleed over the page
   header while every map column collapses empty. */
.pico-location__map { position: relative; min-height: 260px; }
.pico-location__address { margin: 0 0 0.75rem; font-size: 0.875rem; line-height: 1.5rem; }
.pico-location__contact { margin: 0 0 1.25rem; font-size: 0.875rem; line-height: 1.5rem; }
.pico-location__contact a { color: inherit; }
.pico-location__hours .pico-eyebrow { margin-bottom: 0.35rem; color: var(--pico-muted); }
.pico-location__hours ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.5rem;
}
.pico-location__hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 18rem;
}
.pico-location__cta { margin: 1.5rem 0 0; }

.pico-map { position: relative; min-height: 260px; margin-bottom: 0; min-width: 0; }
.pico-map .pico-ph { position: absolute; inset: 0; }
.pico-map__overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  min-height: 260px;
  padding: 1.25rem;
  background: linear-gradient(transparent 40%, rgba(7, 21, 43, 0.75));
  color: #FFFFFF;
}
.pico-map__address { margin: 0; font-size: 0.875rem; overflow-wrap: anywhere; }
.pico-map__route { color: #FFFFFF; font-weight: 500; text-underline-offset: 3px; }

/* ---- contact / legal (open address columns, not generic card stack) --------- */
.pico-contact-addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
}
.pico-contact-address {
  min-width: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pico-divider);
}
.pico-contact-address:nth-child(-n+2) {
  border-top: 0;
  padding-top: 0;
}
.pico-contact-address__brand {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pico-contact-address p {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.pico-contact-address a { color: inherit; }
.pico-contact-address__cta { margin: 1.25rem 0 0; }
/* Fable 5 §6.2 (T-PICO-1): legal rebuilt for reading — light surface (the
   white body is already the page surface), 70ch measure, larger base size,
   section table of contents with anchors. */
.pico-legal .pico-body,
.pico-legal .pff-prose {
  max-width: 70ch;
  font-size: 1rem;
  line-height: 1.625;
}
.pico-legal .pff-prose p,
.pico-legal .pff-prose li {
  font-size: 1rem;
  line-height: 1.625;
}
.pico-legal .pff-prose h2,
.pico-legal .pff-prose h3,
.pico-legal .pff-prose h4 {
  scroll-margin-top: 5rem; /* anchored jumps clear the sticky header */
}

.legal-toc {
  margin: 0 0 3rem;
  padding: 1.5rem;
  border: 1px solid var(--pico-divider, #D8DCE3);
  border-radius: 4px;
  background: #F7F8FA;
}
.legal-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}
.legal-toc__item--h3 { margin-top: 0.75rem; }
.legal-toc__item--h4 { padding-left: 1rem; }
.legal-toc__link {
  color: var(--pico-navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms var(--pff-motion-ease-out, ease-out);
}
.legal-toc__link:hover,
.legal-toc__link:focus-visible {
  border-bottom-color: var(--pico-navy);
}

/* ---- footer --------------------------------------------------------------------- */
.pico-footer { margin-top: 0; border: 0; }
.pico-footer--pico {
  background: linear-gradient(180deg, var(--pico-navy) 0%, var(--pico-navy-deep) 100%);
  color: var(--pico-divider);
  padding: 4rem 0 2rem;
}
.pico-footer--pico .pico-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem 4rem;
  align-items: start;
}
.pico-footer__brand img { height: 40px; width: auto; }
.pico-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pico-footer__links a { color: var(--pico-divider); font-size: 0.8125rem; text-decoration: none; }
.pico-footer__links a:hover { text-decoration: underline; }

.pico-footer--street-one { background: var(--pico-so-footer); color: var(--pico-divider); padding: 4rem 0 2rem; }
.pico-footer--cecil { background: var(--pico-cecil-footer); color: var(--pico-body-gray); padding: 4rem 0 2rem; }
.pico-footer--cecil .pico-card__name,
.pico-footer--cecil .pico-eyebrow { color: var(--pico-navy); }
.pico-footer__stores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pico-footer--street-one .pico-card,
.pico-footer--cecil .pico-card { background: transparent; padding: 0; }
.pico-footer--street-one .pico-card__name { color: #FFFFFF; }
.pico-footer__legal { display: flex; justify-content: flex-end; margin-top: 2.5rem; }
.pico-footer__copy { font-size: 0.75rem; margin: 2.5rem auto 0; opacity: 0.7; }

/* ---- responsive (390 mobile stack) ----------------------------------------------- */
@media (max-width: 48rem) {
  .pico-header__top { min-height: 64px; padding-inline: 1.25rem; justify-content: center; }
  .pico-header__brand { margin-inline: auto; }
  .pico-header__brand .pico-header__logo { height: 24px; }
  .pico-nav-mobile { display: block; position: absolute; left: 1.25rem; }
  .pico-header__top { position: relative; }
  .pico-header__nav,
  .pico-header__sub { display: none; }

  .pico-h1,
  .pico-pageheading { font-size: 1.75rem; line-height: 2.125rem; }
  .pico-pageheading { margin-bottom: 2rem; }
  .pico-h2,
  .pico-heading { font-size: 1.625rem; line-height: 2rem; }
  .pico-h3 { font-size: 1.1875rem; line-height: 1.625rem; }
  .pico-subheading { font-size: 1.125rem; line-height: 1.5rem; }
  .pico-lede { font-size: 0.9375rem; line-height: 1.5rem; }
  .pico-hero__title { font-size: 2rem; line-height: 2.375rem; }

  .pico-hero { height: min(43.75rem, 88vh); }
  .pico-hero__arrow { display: none; } /* dots + swipe are primary on mobile */
  .pico-hero__loader { left: 1.25rem; bottom: 1.25rem; }

  /* Review 2026-08-14: below 48rem the slider band turns portrait, so the
     landscape campaign masters crop horizontally instead of vertically. The
     inline desktop focal points (subject-centring y values) would park the
     crop on empty backdrop — re-anchor each slide to its model's face
     (Street One ~66% x, CECIL ~33% x of the master). !important overrides
     the per-image inline object-position from img-placeholder only in this
     narrow-band case; desktop keeps the inline focal points. */
  .pico-hero__slide:nth-child(1) .pico-ph__img { object-position: 65% 3% !important; }
  .pico-hero__slide:nth-child(2) .pico-ph__img { object-position: 25% 15% !important; }

  .pico-section { padding-block: 3.5rem; }
  .pico-band { padding: 3rem 0; }
  .pico-split,
  .pico-split--navy { grid-template-columns: minmax(0, 1fr); }
  .pico-split__text { padding: 3rem 1.5rem; }
  .pico-split--navy .pico-split__media { order: 2; }
  .pico-split__media { min-height: 16rem; }
  .pico-split__media .pico-ph,
  .pico-split__media .pico-ph--media.pico-ph--portrait,
  .pico-split__media .pico-ph--media.pico-ph--portrait .pico-ph__img { min-height: 16rem; }

  .pico-stores { padding: 3rem 0; }
  .pico-stores__grid,
  .pico-collection__grid,
  .pico-collection__grid--5,
  .pico-contact-addresses { grid-template-columns: minmax(0, 1fr); }
  .pico-collection__grid li:first-child { grid-row: auto; }

  .pico-location {
    grid-template-columns: minmax(0, 1fr);
  }
  .pico-location + .pico-location { margin-top: 3.5rem; }
  .pico-contact-address,
  .pico-contact-address:nth-child(-n+2) {
    border-top: 1px solid var(--pico-divider);
    padding-top: 1.5rem;
  }
  .pico-contact-address:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .pico-card--band { grid-template-columns: minmax(0, 1fr); }
  .pico-btn { display: block; text-align: center; }
  .pico-card__cta .pico-btn,
  .pico-location__cta .pico-btn,
  .pico-contact-address__cta .pico-btn,
  .pico-intro__action .pico-btn { flex: 1 1 100%; width: 100%; }

  .pico-footer--pico .pico-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .pico-footer__legal { justify-content: stretch; }
  .pico-footer__legal .pico-btn { flex: 1; }
}

/* Document-level overflow guard (desktop + 390) */
body.pico,
.pff-main,
.pico-container {
  max-width: 100%;
  overflow-x: clip;
}

/* ==========================================================================
   Shared pff-core Location & Contact family (S09) — pico skin.
   PicoOne's only recurring family; styled with pico tokens + theme --accent.
   Links inherit the .pico a:focus-visible ring. No filter form on this site.
   ========================================================================== */
.pff-location { margin: 0; }
.pff-location__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
/* Locator renders one entry beside the map image → single column. */
.pico-location__details .pff-location__list { display: block; }
.pff-location__item, .pff-location__entry { min-width: 0; }
.pff-location__name { margin: 0 0 0.75rem; font-family: var(--pico-font); font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: var(--pico-navy-deep); overflow-wrap: anywhere; }
.pff-address { font-style: normal; font-size: 0.875rem; line-height: 1.5rem; margin: 0 0 0.75rem; overflow-wrap: anywhere; }
.pff-contact { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.25rem; }
.pff-contact__item { display: flex; gap: 0.5rem; flex-wrap: wrap; font-size: 0.875rem; line-height: 1.5rem; min-width: 0; }
.pff-contact__label { color: var(--pico-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; align-self: center; }
.pff-contact__value { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; overflow-wrap: anywhere; }
.pff-contact__value:hover { border-bottom-color: var(--accent); }
.pff-hours { margin: 0 0 0.75rem; }
.pff-hours__rows { list-style: none; margin: 0; padding: 0; }
.pff-hours__row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; line-height: 1.5rem; }
.pff-hours__day { color: var(--pico-muted); }
.pff-hours__time { text-align: right; overflow-wrap: anywhere; }
.pff-hours__note { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--pico-muted); white-space: pre-line; }
.pff-location__links { margin: 1rem 0 0; }
.pff-location__link { display: inline-block; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.pff-location__note { margin: 0.75rem 0 0; color: var(--pico-muted); font-size: 0.8125rem; white-space: pre-line; }
.pff-location__empty { color: var(--pico-muted); }

/* 2026-08-17 feedback: brand contact pages render their stores as designed
   tiles — markup and data stay the shared pff-core location family fed by
   Families::siteStores(); this is purely the Pico skin. Brand accent bar on
   top (Street One red / CECIL blue), card surface like .pico-card. */
.pico-contact .pff-location__list {
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pico-contact .pff-location__entry {
  height: 100%;
  background: #F4F4F5;
  border: 1px solid var(--pico-divider);
  border-top: 3px solid var(--accent);
  padding: 2rem;
  box-sizing: border-box;
}
.pico-contact .pff-location__name {
  color: var(--pico-navy);
}
/* One store (CECIL): a single deliberate tile, not a stranded grid fragment. */
.pico-contact .pff-location__item:only-child {
  max-width: 34rem;
}
@media (max-width: 48rem) {
  .pico-contact .pff-location__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .pico-contact .pff-location__item:only-child {
    max-width: none;
  }
}
.pff-media { margin: 0 0 1rem; overflow: hidden; }
.pff-media__img { display: block; width: 100%; height: auto; }

/* ---- reduced motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pico-hero__slide { transition: none; }
  .pico-hero__loader { animation: none; }
}

/* ==========================================================================
   Motion personality «Schaufenster» (Fable 5 §6, T-MOT-1).
   Brisk retail efficiency with brand-color signatures — quick, bright,
   changed overnight, never theatrical. Token overrides on the shared core
   contract (this file loads after the core stylesheets, so these :root
   values win). Decorative reveals are the core CSS-only scroll-driven view()
   animations — double-gated, no JavaScript, content always visible without
   support or motion preference. The short 25% entry range keeps the brisk
   changed-overnight snap.
   ========================================================================== */

:root {
  --pff-motion-duration-fast: 150ms;
  --pff-motion-duration-base: 250ms;
  --pff-motion-duration-slow: 400ms;
  --pff-motion-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --pff-motion-rise: 12px;
  --pff-motion-reveal-range: 25%;
}

/* Page entry: blocks rise 12px on a short entry range (pff-reveal classes in
   templates, core scroll-driven reveal layer). Hero: the stills stay put —
   the carousel (6s, 500ms crossfade, filling-bar progress, permanent yield
   to the user) lives in pico-one.js and the slider styles above. */

/* Header/nav: brand-color underline slides in over 150ms; the microsite nav
   band itself is static (it IS the brand statement). */
.pico-header__link {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 150ms var(--pff-motion-ease-out);
}
.pico-header__link:hover,
.pico-header__link:focus-visible {
  text-decoration: none;
  background-size: 100% 1px;
}
.pico-header__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
  background-image: none;
}

/* Menu: the mobile panel slides down from the header over 240ms; items
   appear together. */
.pico-nav-mobile[open] .pico-nav-mobile__panel {
  animation: pico-menu-in 240ms var(--pff-motion-ease-out);
}
@keyframes pico-menu-in {
  from { opacity: 0; transform: translateY(-12px); }
}

/* Store cards: hover lifts 2px and raises a shadow over 200ms; the Anfahrt
   button darkens over 120ms. Essential feedback, never gated. */
.pico-store-card,
.pff-store {
  transition: transform 200ms var(--pff-motion-ease-out), box-shadow 200ms var(--pff-motion-ease-out);
}
.pico-store-card:hover,
.pff-store:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgba(7, 21, 43, 0.12);
}

/* Links/CTAs: buttons darken/brighten over 120ms. */
.pico-btn {
  transition: filter 120ms var(--pff-motion-ease-out), background-color 120ms var(--pff-motion-ease-out), color 120ms var(--pff-motion-ease-out), border-color 120ms var(--pff-motion-ease-out);
}
.pico-btn:hover,
.pico-btn:focus-visible {
  filter: brightness(0.88);
}

/* Route signature: parent → microsite navigations wipe a brand-color band
   across the viewport (translateX -100% → 100%, 250ms) — red into Street
   One, navy into CECIL. The band plays over the arriving page's painted
   content and removes itself; plain navigation without it, and skipped under
   reduced motion (pico-one.js guards both sides). */
.pico-wipe {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  transform: translateX(-100%);
  animation: pico-wipe-sweep 250ms var(--pff-motion-ease-out) forwards;
}
.pico-wipe--red  { background: var(--pico-red); }
.pico-wipe--navy { background: var(--pico-navy); }
@keyframes pico-wipe-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Footer: no entrance choreography. */