/* ==========================================================================
   Delivery-partner pill — store detail pages.
   Scoped under .sdp. Loaded only when the partial actually renders, so store
   pages with no delivery partners pay nothing for it.

   Sits directly under the store's CTA buttons, so it has to read as a distinct
   ordering path without competing with Directions/Call. Mobile-first.
   ========================================================================== */

.sdp {
    --sdp-orange: #FC5007;
    --sdp-ink:    #2B1A12;
    --sdp-soft:   #8A7767;
    --sdp-paper:  #FFF8EE;
    --sdp-rule:   #EDDCC4;
    --sdp-brand:  var(--sdp-orange); /* per-chip override, set inline */

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .85rem;
    width: 100%;
    padding: .8rem 1rem;
    margin: 1rem 0 0;

    background: var(--sdp-paper);
    border: 1px solid var(--sdp-rule);
    border-radius: 10px;
    color: var(--sdp-ink);
}

.sdp__icon { display: flex; color: var(--sdp-orange); flex: 0 0 auto; }

/* Grows to eat the free space so the chips stay pinned to the end edge on wide
   rows, then collapses to a full row of its own once the chips wrap. */
.sdp__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 8rem; min-width: 0; }

.sdp__eyebrow {
    font-size: .68rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--sdp-soft);
}
.sdp__title { font-size: .95rem; font-weight: 600; line-height: 1.3; }

.sdp__partners { display: flex; flex-wrap: wrap; gap: .5rem; flex: 0 0 auto; }

/* Fixed-size chip rather than a logo sitting loose on the cream.
   All three partner lockups are vertical stacks at different aspect ratios, so
   unboxed they optically read as three different sizes; two of them also ship
   with a black or near-black mark that needs a white ground to hold. The box is
   the treatment, not a workaround — object-fit keeps each lockup whole inside it. */
.sdp__chip {
    /* border-box: the site does not set it globally, and without it the 6px
       padding and 1px border push a 62px chip out to 74px.

       Near-square rather than landscape: all three partner lockups are
       vertical stacks, so a wide chip height-limits them and the wordmark
       under the mark goes illegible. */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 52px;
    padding: 5px;
    background: #FFFFFF;
    border: 1px solid var(--sdp-rule);
    border-radius: 8px;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* The picture must fill the chip so the image has a definite box to fit
   inside. With `max-height: 100%` against an auto-height <picture> the
   constraint never resolves and the taller lockups overflow the chip. */
.sdp__chip picture {
    display: flex;
    width: 100%;
    height: 100%;
}

.sdp__chip img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The partner's own colour only ever appears as the hover edge. Filling the
   chip with it would put three competing brand grounds inside one FiLLi
   component, and would break the two logos that need white behind them. */
.sdp__chip:hover,
.sdp__chip:focus-visible {
    transform: translateY(-2px);
    border-color: var(--sdp-brand);
    box-shadow: 0 10px 20px -14px rgba(43, 26, 18, .65);
}

.sdp__chip:focus-visible { outline: 2px solid var(--sdp-brand); outline-offset: 2px; }

/* Fallback for a registry entry with no logo file. */
.sdp__chip-text {
    font-size: .72rem; font-weight: 700; line-height: 1.15;
    text-align: center; color: var(--sdp-brand);
}

@media (prefers-reduced-motion: reduce) {
    .sdp__chip { transition: none; }
    .sdp__chip:hover, .sdp__chip:focus-visible { transform: none; }
}

/* Below ~420px the label and the chips cannot share a row without the chips
   shrinking below a tappable size, so the label takes the full width and the
   chips drop underneath at full size. */
@media (max-width: 420px) {
    .sdp { gap: .65rem .75rem; }
    .sdp__body { flex: 1 1 100%; }
    .sdp__partners { flex: 1 1 100%; }
}

/* ── Hero join ──────────────────────────────────────────────────────────
   .sl-detail-hero has padding-bottom:48px and the section after it has
   padding-top:clamp(48px,8vw,90px) — 138px of cream between them at desktop
   width. That was tuned for a hero ending on the CTA buttons, whose ragged
   bottom edge lets the space read as breathing room. The pill is a filled
   panel with a hard horizontal edge, so the identical gap below it reads as a
   hole instead. Tightened to ~52px at desktop, and only for heroes that
   actually contain a pill, so every other store page keeps its rhythm.

   :has() is progressive here — where it is unsupported the page simply keeps
   the original 138px, which is the current production spacing, not a break. */
.sl-detail-hero:has(.sdp) { padding-bottom: 16px; }
.sl-detail-hero:has(.sdp) + .sl-section { padding-top: clamp(24px, 3vw, 36px); }