/*
 * AlterShops — pickup context bar (Lot I+ P0).
 * Persistent "Retrait à [Boutique] · Changer" affordance on header (compact
 * chip), PDP and listing (bandeau under the breadcrumb). Display-only; the
 * pickup proof stays server-side (PickupContext at ccsubmit, hard-gate V29-A-6).
 * Loaded sitewide only when the altercheckout PDP-unified flag is ON.
 */

:root {
  --apc-amaranth: #e62249;
  --apc-amaranth-soft: #fdeef1;
  --apc-ink: #2b2b35;
  --apc-muted: #6b6b78;
  --apc-line: #e7e7ee;
}

/* shared store glyph */
.apc-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: url('../img/pickup-store.svg') center / contain no-repeat;
}

/* ───────────── header compact chip (absorbs "Magasin le plus proche") ───────────── */
.am-topbar__store.apc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--apc-ink);
  line-height: 1.2;
}
.apc-chip .apc-chip__label { font-size: 13px; }
.apc-chip .apc-chip__label strong { font-weight: 700; }
.apc-chip .apc-chip__change {
  font-size: 12px;
  font-weight: 700;
  color: var(--apc-amaranth);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.apc-chip:hover .apc-chip__change { color: #c11339; }
.apc-chip--empty .apc-chip__label {
  font-weight: 700;
  color: var(--apc-amaranth);
}

/* R2 — compact open/closed dot (the full "Ouvert · Ferme à 20h00" cue lives on
   the PDP/listing bandeau). Rendered only when the status is known. */
.apc-chip__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--apc-muted);
}
.apc-chip__dot--open { background: #1f9d4d; }
.apc-chip__dot--closed { background: #c93434; }

/* ───────────── PDP / listing bandeau ───────────── */
.apc-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 14px;
  margin: 0 0 16px;
  background: var(--apc-amaranth-soft);
  border: 1px solid var(--apc-line);
  border-radius: 10px;
  font-size: 14px;
  color: var(--apc-ink);
}
.apc-bar--listing { margin-bottom: 18px; }
.apc-bar__text { color: var(--apc-ink); }
.apc-bar__store { font-weight: 700; }
.apc-bar__city { color: var(--apc-muted); font-weight: 400; }
.apc-bar__text--empty { color: var(--apc-muted); }

/* R2 — opening status ("Ouvert · Ferme à 20h00" / "Fermé · Ouvre demain à 10h00").
   Rendered only when the boutique has a schedule ; green when open, muted-red
   when closed. An unknown schedule renders no label (never shown as "Fermé"). */
.apc-bar__hours {
  font-weight: 700;
  font-size: 13px;
  color: var(--apc-muted);
}
.apc-bar__hours--open { color: #157f3a; }
.apc-bar__hours--closed { color: #b53030; }

/* P3-b — per-product availability chip hosted in the PDP context bar, filled
   client-side by pickup-pdp-availability.js. Same qualitative vocabulary as the
   listing chips (P3-a). Hidden until painted ; the [hidden] guard must win over
   the inline-flex base, hence the explicit attribute rule. */
.apc-bar__avail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  background: #f1f1f5;
  color: var(--apc-ink);
}
.apc-bar__avail[hidden] { display: none; }
.apc-bar__avail-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--apc-muted);
}
.apc-bar__avail--in { background: #eaf6ee; color: #157f3a; }
.apc-bar__avail--in .apc-bar__avail-dot { background: #1f9d4d; }
.apc-bar__avail--low { background: #fdf3e3; color: #9a6700; }
.apc-bar__avail--low .apc-bar__avail-dot { background: #d08700; }
.apc-bar__avail--out { background: #fbecea; color: #b53030; }
.apc-bar__avail--out .apc-bar__avail-dot { background: #c93434; }
.apc-bar__avail--unknown { background: #f0f0f4; color: var(--apc-muted); }
.apc-bar__avail--unknown .apc-bar__avail-dot { background: #9a9aa6; }

/* CX-02 — web / home-delivery truth : a second row of the PDP context bar shown
   ALONGSIDE the boutique availability so the preferred store never hides the web
   channel (handoff principle 2). Painted by pickup-pdp-availability.js from the
   add-to-cart orderability (qualitative in/out). flex-basis:100% drops it onto
   its own row under the boutique line ; hidden until painted. */
.apc-bar__web {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
}
.apc-bar__web[hidden] { display: none; }
.apc-bar__web-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--apc-muted);
}
.apc-bar__web--in { color: #157f3a; }
.apc-bar__web--in .apc-bar__web-dot { background: #1f9d4d; }
.apc-bar__web--out { color: #b53030; }
.apc-bar__web--out .apc-bar__web-dot { background: #c93434; }

.apc-bar__change {
  margin-left: auto;
  font-weight: 700;
  font-size: 13px;
  color: var(--apc-amaranth);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.apc-bar__change:hover { color: #c11339; }

/* mode pill */
.apc-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  background: var(--apc-amaranth);
  color: #fff;
}
.apc-pill--reservation { background: #2b2b35; }
.apc-pill--livraison { background: #4a4a57; }

@media (max-width: 575px) {
  .apc-bar {
    padding: 9px 12px;
    font-size: 13px;
    gap: 6px 10px;
  }
  .apc-bar__change { margin-left: 0; }
}

/* ───────────── CX-01 — mobile header pickup strip ─────────────
   The desktop chip lives in .am-topbar, hidden < 992px by altermegamenu, so the
   mobile header had no preferred-store affordance. This strip (rendered by the
   theme header.tpl via the 'header_mobile' hook surface) surfaces the same chip
   on the dark mobile header + the reassurance micro-copy. Shown ONLY < 992px so
   it never doubles the desktop topbar chip (exact mirror of the topbar breakpoint).
   .apc-chip--mobile does NOT carry .am-topbar__store → none of the dark-topbar
   altermegamenu rules bleed in; colours are set here for the dark header bg. */
.apc-pickup-mobile { display: none; }
@media (max-width: 991.98px) {
  .apc-pickup-mobile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 16px 10px;
  }
}
.apc-chip--mobile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  text-decoration: none;
  line-height: 1.2;
  color: #fff;
}
.apc-chip--mobile .apc-chip__label { color: #fff; }
.apc-chip--mobile .apc-chip__label strong { color: #fff; font-weight: 700; }
.apc-chip--mobile.apc-chip--empty .apc-chip__label {
  color: var(--apc-amaranth);
  font-weight: 700;
}
.apc-chip__note {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--as-grey-100, #d9d9e0);
}