/* Napoli Pop storefront footer (also used by every skin): call-to-action band, brand with opening state, explore links, tappable contact rows, information links.
   Colours come from the same tokens as the rest of the theme (--np-ft-bg, --np-ft-fg, --np-ft-hl fall back to the Napoli Pop palette), so skins restyle it for free. */
body.np .npf { background: var(--np-ft-bg, var(--np-ink)); color: var(--np-ft-fg, var(--np-cream)); padding: 0 0 132px; margin-top: 56px; }
.npf a:not(.np-btn) { color: inherit; opacity: 1; text-decoration: none; }
.npf a:not(.np-btn):hover { text-decoration: underline; text-underline-offset: 3px; }
.npf a.np-btn { color: var(--np-onred, #fff); opacity: 1; }
.npf .np-btn:hover { text-decoration: none; }
.npf :focus-visible { outline: 3px solid var(--np-ft-hl, var(--np-sun)); outline-offset: 3px; }

.npf-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 28px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.npf-cta b { display: block; font: 800 clamp(22px, 4.6vw, 32px)/1.05 var(--np-fd); letter-spacing: -.025em; }
.npf-cta span { display: block; margin-top: 4px; font-size: 14.5px; opacity: .72; }
.npf-cta .np-btn { flex: none; }
@media (max-width: 40rem) { .npf-cta .np-btn { width: 100%; } }

.npf-grid { display: grid; grid-template-columns: 1fr; gap: 30px; padding: 30px 0 26px; }
@media (min-width: 40rem) { .npf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 40px; } }
@media (min-width: 64rem) { .npf-grid { grid-template-columns: 1.4fr .9fr 1.2fr; gap: 40px 44px; padding: 38px 0 30px; } }

.npf-brand img { display: block; height: 58px; width: auto; max-width: 100%; }
.npf-about { margin: 14px 0 0; max-width: 40ch; font-size: 14.5px; line-height: 1.55; opacity: .88; }
.npf-open { display: inline-flex; align-items: center; gap: 9px; margin: 16px 0 0; padding: 7px 14px; border-radius: 99px; background: color-mix(in srgb, currentColor 11%, transparent); font-weight: 700; font-size: 13.5px; }
.npf-dot { width: 9px; height: 9px; border-radius: 50%; background: #3fcf6d; box-shadow: 0 0 0 3px color-mix(in srgb, #3fcf6d 30%, transparent); flex: none; }
.npf-open--off .npf-dot { background: #ff7a59; box-shadow: 0 0 0 3px color-mix(in srgb, #ff7a59 30%, transparent); }
.npf-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.npf-social a { padding: 8px 14px; border-radius: 99px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); font-size: 13px; font-weight: 700; }

body.np .npf h2 { margin: 0 0 12px; font: 800 12.5px var(--np-fd); text-transform: uppercase; letter-spacing: .12em; color: var(--np-ft-hl, var(--np-sun)); }
.npf-list, .npf-contact { list-style: none; margin: 0; padding: 0; }
.npf-list { display: grid; }
.npf-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 13%, transparent); font-weight: 600; font-size: 15px; }
.npf-list a svg { flex: none; opacity: .5; transition: transform .15s, opacity .15s; }
.npf-list a:hover svg { opacity: 1; transform: translateX(3px); }
.npf-list li:last-child a { border-bottom: 0; }

.npf-contact { display: grid; gap: 4px; }
.npf-contact a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px; padding: 5px 0; font-weight: 600; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.npf-contact i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: color-mix(in srgb, currentColor 12%, transparent); color: var(--np-ft-hl, var(--np-sun)); transition: background .15s; }
.npf-contact a:hover i { background: color-mix(in srgb, currentColor 22%, transparent); }
.npf-contact em { display: block; font-style: normal; font-weight: 700; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: 1px; }

.npf-pay { display: inline-block; margin: 16px 0 0; padding: 9px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, currentColor 35%, transparent); font-size: 13px; font-weight: 600; }

.npf-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.npf-hours li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 11%, transparent); font-size: 14px; }
.npf-hours li:last-child { border-bottom: 0; }
.npf-hours span { text-transform: capitalize; opacity: .8; }
.npf-hours b { font-weight: 700; text-align: right; white-space: nowrap; }
.npf-hours .is-closed b { opacity: .5; font-weight: 600; }
.npf-hours .is-today { color: var(--np-ft-hl, var(--np-sun)); font-weight: 700; }
.npf-hours .is-today span { opacity: 1; }

.npf-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 18px 0 6px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-size: 12.5px; }
.npf-bottom small { font-size: inherit; opacity: .75; }
.npf-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.npf-legal a { font-weight: 600; opacity: .85; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent) !important; }
.npf-legal a:hover { opacity: 1; }
@media (max-width: 40rem) {
    .npf-grid { gap: 26px; }
    /* mobile: the link lists sit in two columns and the hours get tighter, so the footer stays short and tidy */
    .npf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
    .npf-list a { min-height: 42px; font-size: 14.5px; padding: 6px 0; }
    .npf-hours li { padding: 6px 0; font-size: 13.5px; }
    .npf-bottom { flex-direction: column; align-items: flex-start; }
    .npf-legal { gap: 2px 18px; }
    .npf-legal a { display: inline-block; padding: 7px 0; font-size: 13px; }
}

/* desktop: the bottom navigation is hidden, so the footer needs no room for it */
@media (min-width: 56rem) { body.np .npf, body.np.np-has-strip .npf { padding-bottom: 28px; margin-top: 64px; } }

/* Single-brand footer: logo in the band, four columns, round social icons under the contact rows. */
.npf-cta__logo { display: block; height: 64px; width: auto; max-width: 100%; margin-bottom: 6px; }
@media (min-width: 64rem) { .npf-grid.npf-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 36px; } }
.npf-social--icons { gap: 10px; margin-top: 14px; }
.npf-social--icons a { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; }
.npf-social--icons a:hover { text-decoration: none; background: color-mix(in srgb, currentColor 16%, transparent); }