@charset "UTF-8";

/**
 * Light footer theme. Layers on top of footer-apple.modern.css (load after it).
 * Scope: .nx-footer-stack--light / .nx-footer--light (layouts/frontend/partial/footer.blade.php).
 * Every colour derives from the store's theme --primary, so each client store gets its own tint.
 * Also styles the dynamic trust strip and the mobile tap-to-open link groups.
 */

/* ds-allow-hardcode:start component token definitions */
.nx-footer-stack--light {
    --fl-primary: var(--primary, #8bc34a);
    --fl-primary-deep: color-mix(in srgb, var(--fl-primary) 62%, #000);
    --fl-primary-deeper: color-mix(in srgb, var(--fl-primary) 48%, #000);
    --fl-primary-ink: color-mix(in srgb, var(--fl-primary) 70%, #000);
    --fl-primary-soft: color-mix(in srgb, var(--fl-primary) 12%, #fff);
    --fl-bg: color-mix(in srgb, var(--fl-primary) 5%, #f8faf7);
    --fl-bg-bar: color-mix(in srgb, var(--fl-primary) 9%, #f1f4ee);
    --fl-surface: #fff;
    --fl-ink: #1f2937;
    --fl-muted: #4b5563;
    --fl-subtle: #6b7280;
    --fl-line: rgba(15, 23, 42, 0.09);
    --fl-line-strong: rgba(15, 23, 42, 0.14);
    --fl-on-band: #fff;
    --fl-on-band-muted: rgba(255, 255, 255, 0.86);
    --fl-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px -14px rgba(15, 23, 42, 0.18);

    --fl-radius: 14px;
    --fl-radius-sm: 10px;
    --fl-icon: 44px;
    --fl-hairline: 1px;
    --fl-stroke: 2px;
    --fl-nudge: 3px;
    --fl-shadow-pill: 0 10px 28px -12px rgba(0, 0, 0, 0.45);
    --fl-shadow-card: 0 24px 48px -24px color-mix(in srgb, var(--fl-primary-deeper) 70%, transparent);
    --fl-card-radius: 24px;
    --fl-content-max: 1200px; /* matches .nx-footer-content */
    --fl-content-gutter: 1.75rem; /* .nx-footer-content side padding at 1024px+ */
    --fl-card-icon: 56px;
    --fl-glow-a: color-mix(in srgb, var(--fl-primary) 55%, transparent);
    --fl-glow-b: rgba(255, 255, 255, 0.12);
    --fl-watermark: color-mix(in srgb, var(--fl-primary-deep) 42%, var(--fl-bg)); /* clearly visible, still a background element */
    --fl-sheen: color-mix(in srgb, var(--fl-primary) 80%, #fff); /* light band that sweeps across the wordmark */
    --fl-sheen-cycle: 7s;
    --fl-reveal: 0.9s;
    --fl-reveal-slow: 1.4s;
    --fl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --fl-shadow-lift: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px -22px rgba(15, 23, 42, 0.28);
    --fl-shadow-btn: 0 8px 18px -8px color-mix(in srgb, var(--fl-primary-deeper) 75%, transparent);
    --fl-art-w: 240px;
    --fl-art-h-sm: 120px;
    --fl-ring-outer: 180px;
    --fl-ring-inner: 112px;
    --fl-btn-h: 46px;
    --fl-glow-soft: color-mix(in srgb, var(--fl-primary) 14%, transparent);
    --fl-glass: rgba(255, 255, 255, 0.14);
    --fl-glass-line: rgba(255, 255, 255, 0.24);
    --fl-fs-title: clamp(1.25rem, 2.6vw, 1.625rem);
    --fl-fs-xs: 0.75rem;
    --fl-fs-sm: 0.8125rem;
    --fl-fs-md: 0.9375rem;

    /* Re-point the shared footer tokens used by footer-apple.modern.css */
    --nx-footer-bg: var(--fl-bg);
    --nx-footer-bg-elevated: var(--fl-surface);
    --nx-footer-bg-bar: var(--fl-bg);
    --nx-footer-text: var(--fl-ink);
    --nx-footer-muted: var(--fl-muted);
    --nx-footer-line: var(--fl-line);
    --nx-footer-accent: var(--fl-primary-ink);
    --nx-footer-accent-hover: var(--fl-primary-deeper);
}
/* ds-allow-hardcode:end */

/* ============================================================
   NEWSLETTER: split card. Theme-coloured art panel + clean white content side.
   ============================================================ */

.nx-footer-stack--light .nx-subscribe-section--split {
    position: relative;
    z-index: 3;
    padding: var(--space-8) var(--space-4) 0;
    background: var(--fl-bg);
    border-top: var(--fl-hairline) solid var(--fl-line);
}

.nx-footer-stack--light .nx-subscribe-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--fl-content-max);
    margin: 0 auto;
    overflow: hidden;
    background: var(--fl-surface);
    border: var(--fl-hairline) solid var(--fl-line);
    border-radius: var(--fl-card-radius);
    box-shadow: var(--fl-shadow-lift);
}

/* Art panel */
.nx-footer-stack--light .nx-subscribe-split__art {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--fl-art-h-sm);
    background:
        radial-gradient(circle at 20% 15%, var(--fl-glow-a) 0%, transparent 55%),
        linear-gradient(140deg, var(--fl-primary) 0%, var(--fl-primary-deep) 55%, var(--fl-primary-deeper) 100%);
}

.nx-footer-stack--light .nx-subscribe-split__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: var(--fl-hairline) solid var(--fl-glass-line);
    border-radius: var(--radius-full);
    transform: translate(-50%, -50%);
}

.nx-footer-stack--light .nx-subscribe-split__ring--outer {
    width: var(--fl-ring-outer);
    height: var(--fl-ring-outer);
    opacity: 0.55;
}

.nx-footer-stack--light .nx-subscribe-split__ring--inner {
    width: var(--fl-ring-inner);
    height: var(--fl-ring-inner);
    background: var(--fl-glass);
}

.nx-footer-stack--light .nx-subscribe-split__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--fl-card-icon);
    height: var(--fl-card-icon);
    font-size: 1.75rem;
    color: var(--fl-primary-deeper);
    background: var(--fl-surface);
    border-radius: var(--radius-full);
    box-shadow: var(--fl-shadow-pill);
}

/* Content side */
.nx-footer-stack--light .nx-subscribe-split__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-6) var(--space-5);
    text-align: center;
}

.nx-footer-stack--light .nx-subscribe-eyebrow {
    display: inline-block;
    margin-bottom: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font-size: var(--fl-fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fl-primary-ink);
    background: var(--fl-primary-soft);
    border-radius: var(--radius-full);
}

.nx-footer-stack--light .nx-subscribe-title {
    margin: 0 0 var(--space-2);
    font-size: var(--fl-fs-title);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--fl-ink);
}

.nx-footer-stack--light .nx-subscribe-note {
    max-width: 30rem;
    margin: 0 auto;
    font-size: var(--fl-fs-md);
    line-height: 1.55;
    color: var(--fl-muted);
}

.nx-footer-stack--light .nx-subscribe-form {
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
}

/* Email field: soft grey well, icon, solid theme button */
.nx-footer-stack--light .nx-subscribe-pill,
.nx-footer-stack--light #subscribeForm .nx-subscribe-pill {
    position: relative;
    align-items: center;
    padding: var(--space-1);
    background: var(--fl-bg);
    border: var(--fl-hairline) solid var(--fl-line-strong);
    box-shadow: none;
    transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease, background-color var(--duration-base) ease;
}

.nx-footer-stack--light .nx-subscribe-pill:focus-within {
    background: var(--fl-surface);
    border-color: var(--fl-primary);
    box-shadow: 0 0 0 var(--space-1) var(--fl-primary-soft);
}

.nx-footer-stack--light .nx-subscribe-pill__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    line-height: 1;
    padding-left: var(--space-3);
    font-size: 1.15rem;
    color: var(--fl-subtle);
}

.nx-footer-stack--light .nx-subscribe-pill .nx-subscribe-input,
.nx-footer-stack--light #subscribeForm .nx-subscribe-input {
    color: var(--fl-ink);
    background: transparent !important;
    text-indent: 0 !important;
    padding-left: var(--space-2) !important;
}

.nx-footer-stack--light .nx-subscribe-pill .nx-subscribe-btn,
.nx-footer-stack--light #subscribeForm .nx-subscribe-btn {
    gap: var(--space-2);
    min-height: var(--fl-btn-h) !important;
    height: var(--fl-btn-h) !important;
    padding: 0 var(--space-5) !important;
    color: var(--fl-on-band) !important;
    background: linear-gradient(180deg, var(--fl-primary-deep), var(--fl-primary-deeper)) !important;
    border-radius: var(--radius-full) !important;
    box-shadow: var(--fl-shadow-btn);
    transition: filter var(--duration-base) ease, transform var(--duration-base) ease;
}

.nx-footer-stack--light .nx-subscribe-pill .nx-subscribe-btn:hover,
.nx-footer-stack--light #subscribeForm .nx-subscribe-btn:hover {
    filter: brightness(1.08);
}

.nx-footer-stack--light .nx-subscribe-btn__icon {
    transition: transform var(--duration-base) ease;
}

.nx-footer-stack--light .nx-subscribe-btn:hover .nx-subscribe-btn__icon {
    transform: translateX(var(--fl-nudge));
}

/* The sitewide input skin (long input:not(...) chain with !important) draws its own border and
   background inside the pill; only an id selector outranks it */
#subscribeForm #nx-subscribe-email {
    align-self: center;
    height: var(--fl-btn-h) !important;
    margin: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 419.98px) {
    .nx-footer-stack--light .nx-subscribe-btn__icon,
    .nx-footer-stack--light .nx-subscribe-pill__icon {
        display: none;
    }
}

/* Tablet / desktop: art panel left, content right */
@media (min-width: 768px) {
    .nx-footer-stack--light .nx-subscribe-section--split {
        padding: var(--space-10) var(--space-6) 0;
    }

    .nx-footer-stack--light .nx-subscribe-split {
        max-width: calc(var(--fl-content-max) - var(--fl-content-gutter) * 2);
        grid-template-columns: var(--fl-art-w) minmax(0, 1fr);
    }

    .nx-footer-stack--light .nx-subscribe-split__art {
        min-height: 100%;
    }

    .nx-footer-stack--light .nx-subscribe-split__body {
        padding: var(--space-8);
        text-align: left;
    }

    .nx-footer-stack--light .nx-subscribe-note {
        margin: 0;
    }

    .nx-footer-stack--light .nx-subscribe-form {
        max-width: none;
        margin: 0;
    }
}

/* Wide: copy and form side by side inside the content side */
@media (min-width: 1100px) {
    .nx-footer-stack--light .nx-subscribe-split__body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
        gap: var(--space-8);
        padding: var(--space-8) var(--space-10);
    }
}

/* Footer content follows straight after the card */
.nx-footer-stack--light .nx-footer.nx-footer--light {
    padding-top: var(--space-8);
}

/* ============================================================
   FOOTER SHELL + TYPE
   ============================================================ */

.nx-footer.nx-footer--light {
    color: var(--fl-ink);
    background: var(--fl-bg);
}

.nx-footer--light .nx-footer-heading {
    color: var(--fl-ink);
    border-bottom-color: var(--fl-line-strong);
}

.nx-footer--light .nx-footer-brand__name,
.nx-footer--light .nx-footer-brand__fallback {
    color: var(--fl-ink);
}

/* Contact */
.nx-footer--light .nx-footer-contact__icon {
    color: var(--fl-primary-ink);
    background: var(--fl-primary-soft);
}

.nx-footer--light .nx-footer-contact__label {
    color: var(--fl-subtle);
}

.nx-footer--light .nx-footer-contact__value,
.nx-footer--light .nx-footer-support-phone,
.nx-footer--light .nx-footer-contact__link {
    color: var(--fl-ink);
}

.nx-footer--light .nx-footer-support-phone:hover,
.nx-footer--light .nx-footer-contact__link:hover .nx-footer-contact__value {
    color: var(--fl-primary-ink);
}

/* Locations */
.nx-footer--light .nx-footer-locations__pin {
    color: var(--fl-primary-ink);
}

.nx-footer--light .nx-footer-locations__title,
.nx-footer--light .nx-footer-connect-branch-name {
    color: var(--fl-ink);
}

.nx-footer--light .nx-footer-locations__detail {
    color: var(--fl-muted);
}

/* Link lists */
.nx-footer--light .nx-footer-link-list a {
    color: var(--fl-muted);
}

.nx-footer--light .nx-footer-link-list a:hover,
.nx-footer--light .nx-footer-link-list a:focus-visible {
    color: var(--fl-primary-ink);
}

.nx-footer--light .nx-footer-shop-more {
    color: var(--fl-primary-ink);
}

.nx-footer--light .nx-footer-shop-more:hover {
    color: var(--fl-primary-deeper);
}

/* Map */
.nx-footer--light .nx-footer-map-embed,
.nx-footer--light .nx-footer-map-embed--clean {
    background: var(--fl-surface);
    border: var(--fl-hairline) solid var(--fl-line);
    box-shadow: var(--fl-shadow);
}

.nx-footer--light .nx-footer-map-placeholder {
    color: var(--fl-subtle);
    background: var(--fl-surface);
}

/* Meta row: social + payments */
.nx-footer--light .nx-footer-meta {
    border-top-color: var(--fl-line);
    border-bottom-color: var(--fl-line);
}

.nx-footer--light .nx-footer-meta__label {
    color: var(--fl-subtle);
}

.nx-footer--light .nx-footer-social-link {
    background: var(--fl-surface);
    border-color: var(--fl-line-strong);
    box-shadow: var(--fl-shadow);
}

.nx-footer--light .nx-footer-social-link:hover {
    background: var(--fl-primary-soft);
    border-color: var(--fl-primary);
}

.nx-footer--light .nx-footer-payments--color {
    background: var(--fl-surface);
    border-color: var(--fl-line);
    box-shadow: var(--fl-shadow);
}

/* ============================================================
   TRUST STRIP (dynamic: COD, admin-picked policies, online payment)
   One white bar with thin dividers; items are plain rows, not separate cards.
   ============================================================ */

.nx-footer-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 var(--space-8);
    padding: 0;
    overflow: hidden;
    list-style: none;
    background: var(--fl-surface);
    border: var(--fl-hairline) solid var(--fl-line);
    border-radius: var(--fl-radius);
}

.nx-footer-trust__item {
    min-width: 0;
    border-color: var(--fl-line);
    border-style: solid;
    border-width: 0;
}

/* Phones (2 x 2): divider between columns and between rows */
.nx-footer-trust__item:nth-child(even) {
    border-left-width: var(--fl-hairline);
}

.nx-footer-trust__item:nth-child(n + 3) {
    border-top-width: var(--fl-hairline);
}

@media (min-width: 992px) {
    .nx-footer-trust {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        grid-auto-flow: column;
    }

    .nx-footer-trust__item,
    .nx-footer-trust__item:nth-child(n + 3) {
        border-top-width: 0;
        border-left-width: var(--fl-hairline);
    }

    .nx-footer-trust__item:first-child {
        border-left-width: 0;
    }
}

.nx-footer-trust__card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 100%;
    padding: var(--space-4);
    color: var(--fl-ink);
    text-decoration: none;
    transition: background-color var(--duration-base) ease;
}

a.nx-footer-trust__card:hover,
a.nx-footer-trust__card:focus-visible {
    color: var(--fl-ink);
    background: var(--fl-bg);
}

.nx-footer-trust__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--fl-icon);
    height: var(--fl-icon);
    font-size: 1.35rem;
    color: var(--fl-primary-ink);
    background: var(--fl-primary-soft);
    border-radius: var(--fl-radius-sm);
}

.nx-footer-trust__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--fl-stroke);
    min-width: 0;
}

.nx-footer-trust__title {
    font-size: var(--fl-fs-md);
    font-weight: 700;
    line-height: 1.25;
    color: var(--fl-ink);
}

.nx-footer-trust__text {
    overflow: hidden;
    font-size: var(--fl-fs-xs);
    line-height: 1.35;
    color: var(--fl-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nx-footer-trust__go {
    flex: 0 0 auto;
    font-size: 1.15rem;
    color: var(--fl-subtle);
    transition: transform var(--duration-base) ease, color var(--duration-base) ease;
}

a.nx-footer-trust__card:hover .nx-footer-trust__go {
    color: var(--fl-primary-ink);
    transform: translateX(var(--fl-nudge));
}

/* Small phones: icon on top so the two columns stay tidy */
@media (max-width: 419.98px) {
    .nx-footer-trust__card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        padding: var(--space-3);
    }

    .nx-footer-trust__go {
        display: none;
    }

    .nx-footer-trust__text {
        white-space: normal;
    }
}

/* ============================================================
   BRAND MARK (store title from admin): animated wordmark
   - base: solid, clearly visible theme tint (also the no-motion / fallback look)
   - motion: a soft light band sweeps across the letters; on first view the title rises in
     and the accent line draws outwards (reveal classes set by the footer script)
   ============================================================ */

.nx-footer--light .nx-footer-brandmark span {
    color: var(--fl-watermark);
    background: none;
    letter-spacing: 0.01em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .nx-footer--light .nx-footer-brandmark span {
        color: transparent;
        background-image: linear-gradient(
            100deg,
            var(--fl-watermark) 0%,
            var(--fl-watermark) 34%,
            var(--fl-sheen) 50%,
            var(--fl-watermark) 66%,
            var(--fl-watermark) 100%
        );
        background-size: 250% 100%;
        background-position: 100% 0;
        -webkit-background-clip: text;
        background-clip: text;
        animation: fl-brand-sheen var(--fl-sheen-cycle) ease-in-out infinite;
    }
}

.nx-footer--light .nx-footer-brandmark::before {
    background: linear-gradient(90deg, transparent, var(--fl-primary), transparent);
    height: var(--fl-stroke);
    border-radius: var(--radius-full);
    transform-origin: center;
}

/* The old radial glow behind the text made it look patchy on the light background */
.nx-footer--light .nx-footer-brandmark::after {
    content: none;
}

/* Reveal on first view (only when JS added .is-pending, so no-JS always shows the text) */
.nx-footer--light .nx-footer-brandmark.is-pending span {
    opacity: 0;
    transform: translateY(var(--space-4));
    letter-spacing: 0.08em;
}

.nx-footer--light .nx-footer-brandmark.is-pending::before {
    transform: scaleX(0);
}

.nx-footer--light .nx-footer-brandmark.is-visible span {
    transition:
        opacity var(--fl-reveal) var(--fl-ease-out),
        transform var(--fl-reveal) var(--fl-ease-out),
        letter-spacing var(--fl-reveal-slow) var(--fl-ease-out);
}

.nx-footer--light .nx-footer-brandmark.is-visible::before {
    transition: transform var(--fl-reveal-slow) var(--fl-ease-out);
}

@keyframes fl-brand-sheen {
    0% { background-position: 100% 0; }
    55%, 100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .nx-footer--light .nx-footer-brandmark span {
        animation: none;
        background-position: 100% 0;
    }

    .nx-footer--light .nx-footer-brandmark.is-pending span,
    .nx-footer--light .nx-footer-brandmark.is-pending::before {
        opacity: 1;
        transform: none;
        letter-spacing: 0.01em;
    }
}

/* ============================================================
   COPYRIGHT BAR
   ============================================================ */

.nx-footer--light .nx-footer-copyright {
    border-top: var(--fl-hairline) solid var(--fl-line);
}

.nx-footer--light .nx-footer-copyright-copy,
.nx-footer--light .nx-footer-copyright-link {
    color: var(--fl-muted);
}

.nx-footer--light .nx-footer-copyright-link:hover {
    color: var(--fl-primary-ink);
}

/* ============================================================
   PHONES: Shop / Customer care open on tap (class set by the footer script)
   ============================================================ */

@media (max-width: 767.98px) {
    .nx-footer--light .nx-footer-col--collapsible.is-collapsible .nx-footer-heading {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: var(--fl-icon);
        margin-bottom: 0;
        cursor: pointer;
        user-select: none;
    }

    .nx-footer--light .nx-footer-col--collapsible.is-collapsible .nx-footer-heading::after {
        content: "";
        width: 0.55rem;
        height: 0.55rem;
        margin-right: var(--space-1);
        border-right: var(--fl-stroke) solid currentColor;
        border-bottom: var(--fl-stroke) solid currentColor;
        transform: rotate(45deg) translateY(calc(var(--fl-nudge) * -1));
        transition: transform var(--duration-base) ease;
    }

    .nx-footer--light .nx-footer-col--collapsible.is-collapsible.is-open .nx-footer-heading::after {
        transform: rotate(-135deg) translateY(calc(var(--fl-nudge) * -1));
    }

    .nx-footer--light .nx-footer-col--collapsible.is-collapsible:not(.is-open) .nx-footer-link-list,
    .nx-footer--light .nx-footer-col--collapsible.is-collapsible:not(.is-open) .nx-footer-shop-more {
        display: none;
    }

    .nx-footer--light .nx-footer-col--collapsible.is-collapsible.is-open .nx-footer-link-list {
        padding-top: var(--space-3);
    }

    .nx-footer--light .nx-footer-col--collapsible.is-collapsible .nx-footer-heading:focus-visible {
        outline: var(--fl-stroke) solid var(--fl-primary);
        outline-offset: var(--fl-stroke);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nx-footer-trust__card,
    .nx-footer-trust__go,
    .nx-footer--light .nx-footer-heading::after {
        transition: none;
    }
}