/* ==========================================================================
   FEWSET — FOOTER (editorial)
   Menu-driven link columns + editable text. Built on the site's own
   type / colour tokens so it reads as the same page on every breakpoint.
   ========================================================================== */

/* Reset GP's footer wrapper */
.site-footer {
    background: none;
    padding: 0;
    margin: 0;
}

.site-footer .site-info,
.site-footer .inside-site-info,
.site-footer .copyright-bar {
    display: none;
}


/* ==========================================================================
   SHELL
   ========================================================================== */

.fewset-footer {
    --kf-hair: 1px solid rgba(26, 26, 26, .10);
    --kf-ink:  var(--on-surface, #1A1A1A);
    --kf-mut:  var(--on-surface-variant, #777);
    background: var(--surface, #FFFFFF);
    border-top: var(--kf-hair);
    color: var(--kf-ink);
    font-family: var(--font-primary, 'Poppins', sans-serif);
}

.fewset-footer-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 72px) 56px clamp(28px, 3vw, 40px);
}

/* shared uppercase label recipe (eyebrow / column heads / legal / contact) */
.fewset-footer-eyebrow,
.fewset-footer-collabel,
.fewset-footer-copy,
.fewset-footer-legal a,
.fewset-footer-contact li {
    font-size: var(--label-md, .6875rem);
    letter-spacing: .14em;
    text-transform: uppercase;
}


/* ==========================================================================
   TOP ROW
   ========================================================================== */

.fewset-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    padding-bottom: clamp(28px, 3.4vw, 44px);
    border-bottom: var(--kf-hair);
}

.fewset-footer-eyebrow {
    color: var(--kf-mut);
    font-weight: 500;
    letter-spacing: .22em;
}


/* ==========================================================================
   MAIN GRID
   ========================================================================== */

.fewset-footer-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
    gap: clamp(28px, 3.5vw, 56px);
    padding: clamp(40px, 4.5vw, 64px) 0;
}

/* --- brand block --- */
.fewset-footer-brandname {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: clamp(1.75rem, 2.4vw + 1rem, 2.75rem);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: var(--kf-ink);
    margin: 0 0 clamp(16px, 1.8vw, 24px);
}

.fewset-footer-tagline {
    font-size: var(--body-sm, .8125rem);
    line-height: 1.7;
    color: var(--on-surface-variant, #555);
    max-width: 34ch;
    margin: 0 0 clamp(20px, 2.2vw, 30px);
}

.fewset-footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.fewset-footer-contact li { color: var(--kf-mut); letter-spacing: .1em; }
.fewset-footer-contact a {
    color: inherit;
    text-decoration: none;
    transition: color .2s var(--ease-luxe, ease);
}
.fewset-footer-contact a:hover { color: var(--kf-ink); }

/* --- link columns --- */
.fewset-footer-col { min-width: 0; }

.fewset-footer-collabel {
    color: var(--kf-mut);
    font-weight: 500;
    letter-spacing: .2em;
    margin: 0 0 clamp(16px, 1.6vw, 22px);
}

.fewset-footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.fewset-footer-menu a {
    position: relative;
    display: inline-block;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: var(--body-sm, .8125rem);
    letter-spacing: .01em;
    color: var(--on-surface-variant, #555);
    text-decoration: none;
    transition: color .2s var(--ease-luxe, ease);
}

.fewset-footer-menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width .28s var(--ease-luxe, ease);
}

.fewset-footer-menu a:hover { color: var(--kf-ink); }
.fewset-footer-menu a:hover::after { width: 100%; }


/* ==========================================================================
   BOTTOM ROW
   ========================================================================== */

.fewset-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    flex-wrap: wrap;
    padding-top: clamp(24px, 2.8vw, 36px);
    border-top: var(--kf-hair);
}

.fewset-footer-copy { color: var(--kf-mut); letter-spacing: .1em; }

.fewset-footer-legal ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
}

.fewset-footer-legal a {
    color: var(--kf-mut);
    text-decoration: none;
    letter-spacing: .14em;
    transition: color .2s var(--ease-luxe, ease);
}
.fewset-footer-legal a:hover { color: var(--kf-ink); }

/* the legal column header is only the mobile accordion toggle — hide on desktop */
@media (min-width: 601px) {
    .fewset-footer-legal .fewset-footer-collabel { display: none; }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* tablet — 2 columns, brand full width */
@media (max-width: 1024px) {
    .fewset-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: clamp(28px, 5vw, 44px);
    }
    .fewset-footer-brand { grid-column: 1 / -1; }
    /* 10px side gutter (matches site --fewset-content-inset-mobile); extra
       bottom space clears the fixed mobile bottom nav */
    .fewset-footer-inner {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: calc(clamp(28px, 3vw, 40px) + 76px);
    }
}

/* phone — brand block, then the link columns collapse into an accordion */
@media (max-width: 600px) {
    .fewset-footer-grid {
        display: block;
        padding: clamp(28px, 7vw, 40px) 0 4px;
    }

    .fewset-footer-brand { margin-bottom: clamp(20px, 6vw, 28px); }
    .fewset-footer-brandname { font-size: clamp(2rem, 11vw, 2.5rem); }
    .fewset-footer-tagline { max-width: none; }

    /* each column is an accordion row */
    .fewset-footer-col { border-top: var(--kf-hair); }

    .fewset-footer-collabel {
        margin: 0;
        padding: 17px 2px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .fewset-footer-collabel::after {
        content: '';
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        margin: -2px 4px 0 0;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transition: transform .28s var(--ease-luxe, ease);
        opacity: .5;
    }
    .fewset-footer-col.is-open .fewset-footer-collabel { color: var(--kf-ink); }
    .fewset-footer-col.is-open .fewset-footer-collabel::after {
        transform: rotate(-135deg);
        margin-top: 3px;
        opacity: .7;
    }

    .fewset-footer-menu {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding-left: 2px;
        gap: 14px;
        transition: max-height .32s var(--ease-luxe, ease),
                    opacity .25s ease,
                    padding-bottom .25s ease;
    }
    .fewset-footer-col.is-open .fewset-footer-menu {
        max-height: 480px;
        opacity: 1;
        padding-bottom: 22px;
    }

    /* seamless hairline flow from the last column into the legal row */
    .fewset-footer-grid { padding-bottom: 0; }

    /* the legal links become a 5th accordion row; copyright centers below */
    .fewset-footer-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: 0;
        border-top: none;
    }
    .fewset-footer-legal { order: 1; }
    .fewset-footer-legal .fewset-footer-menu { display: grid; gap: 14px; }
    .fewset-footer-copy {
        order: 2;
        text-align: center;
        letter-spacing: .12em;
        padding-top: clamp(24px, 7vw, 32px);
    }
}


/* ==========================================================================
   MOBILE BOTTOM NAV BAR  (unchanged)
   ========================================================================== */

.fewset-mobnav {
    display: none;
}

@media (max-width: 1024px) {
    .fewset-mobnav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: #FFF;
        border-top: 1px solid #ECECE8;
        box-shadow: none;
        padding: 5px 0 max(2px, env(safe-area-inset-bottom));
        justify-content: space-around;
        align-items: center;
    }

    /* Space at bottom so content isn't hidden behind nav */
    body {
        padding-bottom: 14px;   /* content flows UNDER the transparent nav */
    }

    .fewset-mobnav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        text-decoration: none;
        color: color-mix(in srgb, var(--on-surface) 35%, transparent);
        font-family: var(--font-primary, 'Poppins', sans-serif);
        font-size: var(--label-md);
        font-weight: 600;
        letter-spacing: 0.02em;
        padding: 3px 12px;
        position: relative;
        transition: color .15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .fewset-mobnav__item svg {
        width: 20px;
        height: 20px;
        transition: transform .15s ease;
    }

    .fewset-mobnav__item:active svg {
        transform: scale(.9);
    }

    .fewset-mobnav__item.is-active {
        color: var(--on-surface);
    }

    .fewset-mobnav__item.is-active svg {
        stroke-width: 1.8;
    }

    /* Wishlist badge */
    .fewset-mobnav__badge {
        position: absolute;
        top: 0;
        right: 4px;
        min-width: 14px;
        height: 14px;
        padding: 0 3px;
        background: var(--on-surface);
        color: #FFF;
        font-size: 8px;
        font-weight: 700;
        line-height: 14px;
        text-align: center;
        border-radius: 7px;
    }
    /* The badge is always in the DOM now (so JS updates it the instant you add
       an item — no page refresh); it's hidden while empty. Scoped selector so it
       can't be lost to stylesheet load order. */
    .fewset-mobnav__badge.fewset-wl-count--empty { display: none; }

    /* No underline animation */
    .fewset-mobnav__item::after {
        display: none !important;
    }

    /* Hide GP back-to-top if it overlaps */
    a.generate-back-to-top {
        bottom: 72px;
    }

    /* The mega-menu drawer (body.mm-lock) is full-screen and must cover
       everything. But .fewset-mobnav is a body-level position:fixed bar (z-index
       999) while the drawer is trapped inside .ql-header's stacking context
       (z-index 100) — 999 > 100, so the bar would paint OVER the drawer. Hide
       the bar while the drawer is open so the drawer is truly full-screen. */
    body.mm-lock .fewset-mobnav { display: none !important; }
}

/* Phone PDP only: the sticky add-to-cart bar (.fewset-sp-stickybar, <=768px)
   replaces the bottom tab bar — hide the tab bar so they don't stack, and drop
   the now-dead +76px tab-bar clearance so the footer doesn't leave a gap above
   the sticky bar. (Tablet PDP 769-1024 keeps the tab bar + its clearance, since
   the sticky bar isn't shown there and the page uses the desktop layout.) */
@media (max-width: 768px) {
    body.fewset-sp .fewset-mobnav { display: none !important; }
    body.fewset-sp .fewset-footer-inner { padding-bottom: clamp(28px, 3vw, 40px); }
}

/* Safari samples the root background for its chrome tint — keep it
   explicit (transparent roots can fall back to plain white blocks) */
html, body { background-color: #FFFFFF; }
/* PDP iOS-notch dark root is injected inline in <head> on product pages only —
   see inc/single-product.php (fewset-sp-notch) — so it's scoped without an html class. */