/* =============================================================
   Floating pill nav  —  lailaipro.co.za
   -------------------------------------------------------------
   Shape taken from nachoz.app: the nav stops spanning the page and
   becomes a rounded, translucent island that floats below the top
   bar and sticks there as you scroll.

   The island is WHITE and see-through, the same recipe as the
   reference: white at 82% over a 24px blur with a little saturation,
   so whatever scrolls behind it stays faintly visible. It keeps that
   treatment the whole way down the page, over the dark hero and the
   white content alike.

   Applies only to <nav class="nav nav-pill">, so a page keeps the
   old bar until its markup opts in. Every page ships both logos in
   the markup; the dark one is the one on show.

   nav-pill.js adds .on-dark whenever the section behind the pill is
   dark, so the island is black over the hero and the footer-coloured
   blocks and white over the content between them. Default (no class)
   is the light pill.
   ============================================================= */

/* The thin strip above the nav: its container was already centred but the
   items sat packed to the left. Lives here because this file is the one
   stylesheet every page already loads. */
.topbar-inner { justify-content: center; }

.nav.nav-pill {
    position: sticky;
    top: 16px;
    z-index: 100;
    margin-top: 16px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    color: #1D1D1F;
}

/* Full-width wrapper so the island can centre itself inside it. */
.nav.nav-pill .container {
    max-width: none;
    padding: 0 16px;
}

/* The island: white and see-through over a blur, so the page keeps
   showing faintly behind it. A hairline holds the edge where the pill
   sits on something pale. */
.nav.nav-pill .nav-inner {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    height: 60px;
    gap: 40px;
    padding: 0 24px;
    border-radius: 980px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .10);
}

/* Both logos ship in the markup. The dark one is the one on show, since
   the island is light the whole way down.
   !important because the logo <img> carries an inline display:block from
   the original markup, and inline styles beat a stylesheet. */
/* Some pages still add .scrolled on scroll, a holdover from the bar that
   spanned the page. On a transparent wrapper that shadow paints a band
   across the whole page, so it is cancelled here; the island has its own. */
.nav.nav-pill, .nav.nav-pill.scrolled { box-shadow: none; }

.nav.nav-pill .nav-logo img { height: 44px; width: auto; display: block; }
.nav.nav-pill .nav-logo .logo-light { display: none !important; }
.nav.nav-pill .nav-logo .logo-dark { display: block !important; }

.nav.nav-pill .nav-links { gap: 28px; }
.nav.nav-pill .nav-links a { color: #6E6E73; font-size: 14px; }
.nav.nav-pill .nav-links a:hover { color: #1D1D1F; }

/* One filled control in the island. */
.nav.nav-pill .nav-links .nav-cta {
    background: #1D1D1F;
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 18px;
    border-radius: 980px;
    border: 1px solid rgba(0, 0, 0, .08);
}
.nav.nav-pill .nav-links .nav-cta:hover { background: #000; }

.nav.nav-pill .nav-cart svg { stroke: #1D1D1F; }
.nav.nav-pill .nav-toggle span { background: #1D1D1F; }

/* Search icon: same footprint as the cart, shown at every width. Opens the
   shop search (nav-pill.js focuses it when already on /shop/). */
.nav.nav-pill .nav-search {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 50%; color: #1D1D1F; text-decoration: none;
    transition: background-color .2s ease, color .25s ease;
}
.nav.nav-pill .nav-search:hover { background: rgba(0, 0, 0, .06); }
.nav.nav-pill .nav-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ---- Dark sections: .on-dark, set by nav-pill.js ----------------------
   Same island, black surface. Controls go to a lighter black so they stay
   separable without bringing in another colour. */
.nav.nav-pill .nav-inner,
.nav.nav-pill .nav-logo img,
.nav.nav-pill .nav-links a,
.nav.nav-pill .nav-links .nav-cta,
.nav.nav-pill .nav-cart svg,
.nav.nav-pill .nav-toggle span { transition: background-color .25s ease, border-color .25s ease, color .25s ease, stroke .25s ease, box-shadow .25s ease; }

.nav.nav-pill.on-dark .nav-inner {
    background: rgba(18, 18, 20, .82);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.nav.nav-pill.on-dark .nav-logo .logo-dark { display: none !important; }
.nav.nav-pill.on-dark .nav-logo .logo-light { display: block !important; }
.nav.nav-pill.on-dark .nav-links a { color: rgba(255, 255, 255, .64); }
.nav.nav-pill.on-dark .nav-links a:hover { color: #fff; }
.nav.nav-pill.on-dark .nav-links .nav-cta { background: #2C2C2E; border-color: rgba(255, 255, 255, .10); }
.nav.nav-pill.on-dark .nav-links .nav-cta:hover { background: #3A3A3C; }
.nav.nav-pill.on-dark .nav-cart svg { stroke: #fff; }
.nav.nav-pill.on-dark .nav-search { color: #fff; }
.nav.nav-pill.on-dark .nav-search:hover { background: rgba(255, 255, 255, .10); }
.nav.nav-pill.on-dark .nav-toggle span { background: #fff; }
.nav.nav-pill.on-dark .nav-tt { background: #2C2C2E; border-color: rgba(255, 255, 255, .10); }

/* "Follow us on [TikTok]" — mobile only, where the links collapse
   into the hamburger and the pill would otherwise be logo + burger. */
.nav.nav-pill .nav-tt { display: none; }

@media (max-width: 900px) {
    .nav.nav-pill .nav-inner { gap: 10px; padding: 0 14px; height: 54px; }
    /* Phones: logo, TikTok pill, then the two icons together. */
    .nav.nav-pill .nav-tt { order: 1; }
    .nav.nav-pill .nav-search { order: 2; }
    .nav.nav-pill .nav-toggle { order: 3; }
    .nav.nav-pill .nav-logo img { height: 34px; }
    .nav.nav-pill .nav-tt {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        padding: 6px 14px;
        border-radius: 980px;
        background: #1D1D1F;
        border: 1px solid rgba(0, 0, 0, .08);
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
    }
    .nav.nav-pill .nav-tt svg { width: 13px; height: 13px; fill: currentColor; display: block; }
    .nav.nav-pill .nav-tt:active { background: #000; }
    /* The cart has its own floating button on phones; two icons plus
       the follow pill is more than fits at 360px. */
    .nav.nav-pill .nav-cart { display: none; }
}

@media (max-width: 360px) {
    .nav.nav-pill .nav-tt { padding: 6px 10px; font-size: 0; gap: 0; }
    .nav.nav-pill .nav-tt svg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .nav.nav-pill, .nav.nav-pill .nav-inner { transition: none; }
}