@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap");

/* ==========================================================================
   Nav 2026 — header & footer design system
   Scoped under body.site2026 so it only touches the elements it owns
   (navbar, offcanvas, mobile bar, footer, floating actions).

   2026-07 redesign: sky/blue brand palette + Plus Jakarta Sans, to match
   the new homepage mockup. --n-primary now resolves to a fixed brand blue
   instead of the admin-configurable --yellow-primary, but only within
   these nav/footer-owned components — --yellow-primary itself is left
   untouched so anything elsewhere on the site that still reads it directly
   (order page, admin, etc.) keeps working exactly as before.
   ========================================================================== */

body.site2026 {
    /* These used to be a fixed sky-blue palette independent of the admin
       color config. Now derived from --yellow-primary (conf('color',1))
       so the whole nav/menu/footer system follows whatever brand color is
       set in the DB, same as the promo bar and the rest of the site. */
    --n-primary: var(--yellow-primary);
    --n-primary-2: color-mix(in srgb, var(--yellow-primary) 78%, #000);
    --n-primary-3: color-mix(in srgb, var(--yellow-primary) 55%, #000);
    --n-accent-cyan: color-mix(in srgb, var(--yellow-primary) 70%, #fff);
    --n-primary-soft: color-mix(in srgb, var(--yellow-primary) 12%, var(--white));
    --n-ink: var(--dark-blue);
    --n-line: rgba(20, 25, 43, 0.08);
    --n-line-dark: rgba(255, 255, 255, 0.08);
    --n-glass: color-mix(in srgb, var(--white) 85%, transparent);
    --n-radius-sm: 10px;
    --n-radius: 14px;
    --n-radius-lg: 22px;
    --n-shadow: 0 10px 30px -12px rgba(14, 18, 33, 0.18);
    font-family: "Plus Jakarta Sans", sans-serif;
}

html[data-theme="dark"] body.site2026 {
    --n-glass: color-mix(in srgb, var(--dark-blue) 82%, transparent);
    --n-line: rgba(255, 255, 255, 0.08);
}

body.site2026 .navbar2026,
body.site2026 .offcanvas2026,
body.site2026 .footer2026,
body.site2026 .promo2026,
body.site2026 .mobilebar2026 {
    font-family: "Plus Jakarta Sans", sans-serif;
}

body.site2026 .n-brand,
body.site2026 .n-heading {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
}

/* -------------------------------------------------------------------- */
/* Promo bar                                                             */
/* -------------------------------------------------------------------- */
body.site2026 .promo2026 {
    position: relative;
    z-index: 1051;
    height: 38px;
    display: flex;
    align-items: center;
    /* --n-primary/2/3 are now derived from --yellow-primary (conf('color',1))
       above, so this automatically follows the DB brand color. */
    background: linear-gradient(90deg, var(--n-primary) 0%, var(--n-primary-2) 55%, var(--n-primary-3) 100%);
    color: #fff;
    overflow: hidden;
}

body.site2026 .promo2026-track {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 14px;
    text-align: center;
}

body.site2026 .promo2026 p {
    margin: 0;
    font-size: 12.5px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.site2026 .promo2026 strong {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 2px;
}

body.site2026 .promo2026-cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border-radius: 100px;
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: underline;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

body.site2026 .promo2026-cta:hover {
    color: #fff;
    opacity: 0.85;
    transform: translateY(-1px);
}

body.site2026 .promo2026-cta i {
    font-size: 11px;
}

@media (max-width: 575px) {
    body.site2026 .promo2026 p span.n-long { display: none; }
}

/* -------------------------------------------------------------------- */
/* Navbar                                                                 */
/* -------------------------------------------------------------------- */
body.site2026 { padding-top: 0; }

body.site2026 .navbar2026 {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: var(--n-glass) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--n-line);
    padding: 0;
    transition: box-shadow 0.25s ease;
}

body.site2026 .navbar2026.n-scrolled {
    box-shadow: var(--n-shadow);
}

body.site2026 .navbar2026 .n-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 12px 16px;
}

@media (min-width: 576px) {
    body.site2026 .navbar2026 .n-inner { padding-left: 24px; padding-right: 24px; }
}

@media (min-width: 992px) {
    body.site2026 .navbar2026 .n-inner { padding-left: 40px; padding-right: 40px; }
}

@media (min-width: 1400px) {
    body.site2026 .navbar2026 .n-inner { padding-left: 48px; padding-right: 48px; }
}

/* Promo bar and footer are shared across every page too — same fluid,
   edge-to-edge padding scale as the navbar (and the home page's content
   shell / the order page's container) so every page's left/right edge
   lines up at the exact same distance from the screen edge, top to
   bottom, instead of some pieces being capped+centered and others fluid. */
body.site2026 .promo2026 .container,
body.site2026 .footer2026 .container {
    max-width: none;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 576px) {
    body.site2026 .promo2026 .container,
    body.site2026 .footer2026 .container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 992px) {
    body.site2026 .promo2026 .container,
    body.site2026 .footer2026 .container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1400px) {
    body.site2026 .promo2026 .container,
    body.site2026 .footer2026 .container {
        padding-left: 64px;
        padding-right: 64px;
    }
}

body.site2026 .navbar2026 #navbarNavDropdown {
    order: 3;
}

/* Brand */
body.site2026 .n-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    cursor: pointer;
    text-decoration: none;
}

body.site2026 .n-brand img {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    object-fit: cover;
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--n-primary) 55%, transparent);
    transition: transform 0.15s ease;
}

body.site2026 .n-brand:hover img {
    transform: scale(1.05);
}

body.site2026 .n-brand .n-brand-name {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: var(--black);
}

/* Center links */
body.site2026 .n-links {
    display: none;
    align-items: center;
    gap: 2px;
    margin: 0 auto;
    padding: 4px;
    background: color-mix(in srgb, var(--n-ink) 5%, transparent);
    border-radius: 100px;
}

html[data-theme="dark"] body.site2026 .n-links {
    background: rgba(255, 255, 255, 0.05);
}

body.site2026 .n-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--black-text);
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

body.site2026 .n-links a i {
    font-size: 14px;
}

body.site2026 .n-links a:hover {
    color: var(--black);
    background: color-mix(in srgb, var(--n-ink) 6%, transparent);
}

body.site2026 .n-links a.n-active {
    color: #fff;
    background: linear-gradient(90deg, var(--n-primary), var(--n-primary-2));
}

@media (min-width: 992px) {
    body.site2026 .n-links { display: inline-flex; }
}

/* Compact tier: menu shown but keep it tight so it doesn't overflow on
   common laptop widths (1280/1366px) before the roomy 1400px+ tier. */
@media (min-width: 992px) and (max-width: 1399px) {
    body.site2026 .n-links a { padding: 8px 11px; font-size: 13px; }
    body.site2026 .n-inner { gap: 10px; }
    body.site2026 .n-actions { gap: 6px; }
}

/* Right side actions */
body.site2026 .n-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    margin-left: auto;
}

body.site2026 .n-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: 1px solid var(--n-line);
    background: transparent;
    color: var(--black);
    font-size: 15px;
    flex: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

body.site2026 .n-icon-btn:hover {
    background: color-mix(in srgb, var(--n-ink) 6%, transparent);
    color: var(--black);
}

body.site2026 .n-icon-btn:active {
    transform: scale(0.94);
}

/* Search */
body.site2026 .n-search {
    position: relative;
    display: none;
    align-items: center;
}

@media (min-width: 992px) {
    body.site2026 .n-search { display: flex; }
}

body.site2026 .n-search input {
    width: 160px;
    height: 38px;
    padding: 0 16px 0 38px;
    border-radius: 100px;
    border: 1px solid var(--n-line);
    background: color-mix(in srgb, var(--n-ink) 4%, transparent);
    color: var(--black);
    font-size: 13px;
    outline: none;
    transition: width 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* Compact tier: shrink the search box further so 6 menu pills + search +
   buttons still fit on one line at common laptop widths (1280/1366px). */
@media (min-width: 992px) and (max-width: 1399px) {
    body.site2026 .n-search input { width: 100px; padding-right: 10px; }
    body.site2026 .n-search input:focus { width: 170px; }
}

body.site2026 .n-search input::placeholder {
    color: var(--black-text);
}

body.site2026 .n-search input:focus {
    width: 230px;
    background: var(--white);
    border-color: var(--n-primary);
}

body.site2026 .n-search i {
    position: absolute;
    left: 14px;
    font-size: 13px;
    color: var(--black-text);
    pointer-events: none;
}

/* Live search dropdown */
body.site2026 .n-search-results {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--n-line);
    border-radius: var(--n-radius);
    box-shadow: var(--n-shadow);
    padding: 6px;
    z-index: 1050;
}

html[data-theme="dark"] body.site2026 .n-search-results {
    background: var(--n-ink);
}

body.site2026 .n-search-results.show {
    display: block;
}

body.site2026 .n-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--n-radius-sm);
    text-decoration: none;
    color: var(--black);
    transition: background 0.15s ease;
}

body.site2026 .n-search-item:hover {
    background: color-mix(in srgb, var(--n-ink) 6%, transparent);
}

body.site2026 .n-search-item img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex: none;
}

body.site2026 .n-search-item-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
}

body.site2026 .n-search-item-owner {
    display: block;
    font-size: 11.5px;
    color: var(--black-text);
}

body.site2026 .n-search-empty {
    padding: 14px 10px;
    font-size: 12.5px;
    text-align: center;
    color: var(--black-text);
}

body.site2026 .n-search-mobile {
    display: flex;
    padding: 10px 0 4px;
}

body.site2026 .n-search-mobile .n-search { display: flex; width: 100%; }
body.site2026 .n-search-mobile .n-search input { width: 100%; }

/* Auth buttons */
body.site2026 .n-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 18px;
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

body.site2026 .n-btn-ghost {
    color: var(--black);
    background: transparent;
    border: 1px solid var(--n-line);
}

body.site2026 .n-btn-ghost:hover {
    color: var(--black);
    background: color-mix(in srgb, var(--n-ink) 6%, transparent);
}

body.site2026 .n-btn-solid {
    color: #fff;
    background: linear-gradient(90deg, var(--n-primary), var(--n-primary-2));
    border: 1px solid transparent;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--n-primary) 60%, transparent);
}

body.site2026 .n-btn-solid:hover {
    color: #fff;
    box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--n-primary) 75%, transparent);
    transform: translateY(-1px);
}

/* User pill (logged in) */
body.site2026 .n-user {
    position: relative;
}

body.site2026 .n-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 8px 0 6px;
    border-radius: 100px;
    border: 1px solid var(--n-line);
    background: transparent;
    color: var(--black);
    font-size: 13px;
    font-weight: 600;
}

body.site2026 .n-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--n-primary), var(--n-primary-2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex: none;
    text-transform: uppercase;
}

body.site2026 .n-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 210px;
    background: var(--white);
    border: 1px solid var(--n-line);
    border-radius: var(--n-radius);
    box-shadow: var(--n-shadow);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all 0.15s ease;
    z-index: 1045;
}

body.site2026 .n-user:hover .n-user-menu,
body.site2026 .n-user:focus-within .n-user-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body.site2026 .n-user-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--n-radius-sm);
    color: var(--black);
    font-size: 13px;
    font-weight: 500;
}

body.site2026 .n-user-menu a i {
    font-size: 14px;
    color: var(--n-primary);
    width: 16px;
}

body.site2026 .n-user-menu a:hover {
    background: color-mix(in srgb, var(--n-ink) 6%, transparent);
    color: var(--black);
}

/* --white stays fixed #fff in dark mode while --black flips to #fff,
   so this menu's background (--white) never went dark and its text
   (--black) went white — invisible white-on-white. Give it its own
   dark surface instead of relying on --white. */
html[data-theme="dark"] body.site2026 .n-user-menu {
    background: var(--dark-blue);
    border-color: var(--n-line-dark);
}

html[data-theme="dark"] body.site2026 .n-user-menu a:hover {
    background: color-mix(in srgb, var(--white) 8%, transparent);
}

/* Hamburger */
body.site2026 .n-burger {
    display: inline-flex;
}

@media (min-width: 992px) {
    body.site2026 .n-burger { display: none; }
}

/* -------------------------------------------------------------------- */
/* Offcanvas (mobile menu)                                               */
/* -------------------------------------------------------------------- */
body.site2026 .offcanvas2026 {
    width: min(320px, 86vw) !important;
    background: var(--n-ink);
    color: #fff;
    border: none;
}

body.site2026 .offcanvas2026::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--n-line-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--n-line-dark) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(circle at 15% 0%, #000 0%, transparent 65%);
    mask-image: radial-gradient(circle at 15% 0%, #000 0%, transparent 65%);
    pointer-events: none;
}

body.site2026 .offcanvas2026 .offcanvas-header {
    position: relative;
    z-index: 1;
    padding: 18px 18px 10px;
    border-bottom: 1px solid var(--n-line-dark);
}

body.site2026 .offcanvas2026 .offcanvas-header .navigation {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}

body.site2026 .offcanvas2026 .offcanvas-body {
    position: relative;
    z-index: 1;
    padding: 18px;
}

body.site2026 .offcanvas2026 .link-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.site2026 .offcanvas2026 .nav-item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--n-radius);
    color: rgba(255, 255, 255, 0.82);
    font-size: 14.5px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

body.site2026 .offcanvas2026 .nav-item-link .icon-link {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    flex: none;
}

/* style.css ships a legacy ".nav-item-link .title { color: var(--dark-blue) }"
   rule that predates this dark offcanvas redesign and is not scoped to it.
   A direct rule on .title always beats inherited color regardless of
   specificity, so without this override the labels render dark-on-dark
   (near-invisible) in light mode. Re-assert the color here explicitly. */
body.site2026 .offcanvas2026 .nav-item-link .title {
    color: rgba(255, 255, 255, 0.82);
}

body.site2026 .offcanvas2026 .nav-item-link:hover,
body.site2026 .offcanvas2026 .nav-item-link.n-active {
    color: #14192b;
    background: var(--n-primary);
}

body.site2026 .offcanvas2026 .nav-item-link:hover .title,
body.site2026 .offcanvas2026 .nav-item-link.n-active .title {
    color: #14192b;
}

body.site2026 .offcanvas2026 .nav-item-link:hover .icon-link,
body.site2026 .offcanvas2026 .nav-item-link.n-active .icon-link {
    background: rgba(20, 25, 43, 0.14);
    color: #14192b;
}

body.site2026 .offcanvas2026 .offcanvas-footer-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--n-line-dark);
}

body.site2026 .offcanvas2026 .offcanvas-footer-actions .n-btn {
    flex: 1;
}

body.site2026 .offcanvas2026 .n-btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
}

body.site2026 .offcanvas2026 .n-btn-ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

body.site2026 .offcanvas2026 .theme-switch {
    position: relative;
    z-index: 1;
}

/* -------------------------------------------------------------------- */
/* Mobile bottom bar                                                     */
/* -------------------------------------------------------------------- */
body.site2026 .mobilebar2026.mobileNav {
    display: none;
    left: 10px;
    right: 10px;
    width: auto;
    bottom: 12px;
    height: auto;
    padding: 8px 6px;
    border-radius: 100px;
    background: var(--n-glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--n-line);
    box-shadow: var(--n-shadow);
    visibility: visible;
}

@media (max-width: 767px) {
    body.site2026 .mobilebar2026.mobileNav { display: flex; }
}

body.site2026 .mobilebar2026.mobileNav .containers {
    padding: 7px 6px;
    border-radius: 100px;
    gap: 2px;
}

body.site2026 .mobilebar2026.mobileNav .containers i {
    font-size: 18px;
    color: var(--black-text);
}

body.site2026 .mobilebar2026.mobileNav .containers .text {
    font-size: 10.5px;
    color: var(--black-text);
}

body.site2026 .mobilebar2026.mobileNav .containers.active {
    background: var(--n-primary);
}

body.site2026 .mobilebar2026.mobileNav .containers.active i,
body.site2026 .mobilebar2026.mobileNav .containers.active .text {
    color: #14192b;
}

/* -------------------------------------------------------------------- */
/* Footer                                                                 */
/* -------------------------------------------------------------------- */
body.site2026 .footer2026 {
    position: relative;
    margin-top: 60px;
    padding: 56px 0 0;
    background: var(--white);
    color: #64748B;
    border-top: 1px solid #E2E8F0;
    overflow: hidden;
}

html[data-theme="dark"] body.site2026 .footer2026 {
    background: var(--n-ink);
    color: rgba(255, 255, 255, 0.7);
    border-top-color: var(--n-line-dark);
}

body.site2026 .footer2026::before {
    content: none;
}

body.site2026 .footer2026 .n-foot-wrap {
    position: relative;
    z-index: 1;
}

body.site2026 .footer2026 .n-foot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding-bottom: 40px;
    border-bottom: 1px solid #F1F5F9;
}

html[data-theme="dark"] body.site2026 .footer2026 .n-foot-grid {
    border-bottom-color: var(--n-line-dark);
}

body.site2026 .footer2026 .n-foot-brand,
body.site2026 .footer2026 .n-foot-col {
    flex: 1 1 200px;
}

body.site2026 .footer2026 .n-foot-brand {
    flex: 1.6 1 260px;
}

@media (max-width: 767px) {
    body.site2026 .footer2026 .n-foot-grid {
        gap: 28px 16px;
    }
    body.site2026 .footer2026 .n-foot-col {
        flex: 1 1 42%;
    }
}

body.site2026 .footer2026 .n-foot-brand {
    max-width: 320px;
}

body.site2026 .footer2026 .n-foot-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

body.site2026 .footer2026 .n-foot-logo img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
}

body.site2026 .footer2026 .n-foot-logo .names {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: #0F172A;
}

html[data-theme="dark"] body.site2026 .footer2026 .n-foot-logo .names {
    color: #fff;
}

body.site2026 .footer2026 .n-foot-desc {
    font-size: 13px;
    line-height: 1.7;
    max-width: 320px;
    color: #64748B;
    margin-bottom: 18px;
}

html[data-theme="dark"] body.site2026 .footer2026 .n-foot-desc {
    color: rgba(255, 255, 255, 0.55);
}

body.site2026 .footer2026 .n-foot-social {
    display: flex;
    gap: 8px;
}

body.site2026 .footer2026 .n-foot-social a {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #0F172A;
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

html[data-theme="dark"] body.site2026 .footer2026 .n-foot-social a {
    background: rgba(255, 255, 255, 0.06);
    border-color: transparent;
    color: #fff;
}

body.site2026 .footer2026 .n-foot-social a:hover {
    background: linear-gradient(135deg, var(--n-primary), var(--n-primary-2));
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
}

body.site2026 .footer2026 .n-foot-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0F172A;
    margin-bottom: 16px;
}

html[data-theme="dark"] body.site2026 .footer2026 .n-foot-title {
    color: #fff;
}

body.site2026 .footer2026 .n-foot-links {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

body.site2026 .footer2026 .n-foot-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748B;
    width: fit-content;
    transition: color 0.15s ease, transform 0.15s ease;
}

html[data-theme="dark"] body.site2026 .footer2026 .n-foot-links a {
    color: rgba(255, 255, 255, 0.55);
}

body.site2026 .footer2026 .n-foot-links a:hover {
    color: var(--n-primary);
    transform: translateX(2px);
}

body.site2026 .footer2026 .n-foot-links a i {
    font-size: 11px;
    color: var(--n-primary);
}

body.site2026 .footer2026 .n-foot-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #64748B;
    margin-bottom: 13px;
}

html[data-theme="dark"] body.site2026 .footer2026 .n-foot-contact-item {
    color: rgba(255, 255, 255, 0.55);
}

body.site2026 .footer2026 .n-foot-contact-item i {
    color: var(--n-primary);
    font-size: 14px;
    margin-top: 2px;
}

/* Payment method badges */
body.site2026 .footer2026 .n-foot-pay {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.site2026 .footer2026 .n-foot-pay span {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #334155;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 6px 10px;
    border-radius: 6px;
}

html[data-theme="dark"] body.site2026 .footer2026 .n-foot-pay span {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--n-line-dark);
    color: rgba(255, 255, 255, 0.75);
}

body.site2026 .footer2026 .n-foot-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0;
    font-size: 12.5px;
    color: #94A3B8;
    border-top: 1px solid #F1F5F9;
}

html[data-theme="dark"] body.site2026 .footer2026 .n-foot-bottom {
    color: rgba(255, 255, 255, 0.45);
    border-top-color: var(--n-line-dark);
}

@media (max-width: 575px) {
    body.site2026 .footer2026 .n-foot-bottom {
        flex-direction: column-reverse;
        text-align: center;
    }
}

body.site2026 .footer2026 .n-foot-bottom a {
    color: #94A3B8;
}

html[data-theme="dark"] body.site2026 .footer2026 .n-foot-bottom a {
    color: rgba(255, 255, 255, 0.45);
}

body.site2026 .footer2026 .n-foot-bottom a:hover {
    color: var(--n-primary);
}

body.site2026 .footer2026 .n-foot-legal {
    display: flex;
    gap: 18px;
}

/* -------------------------------------------------------------------- */
/* Floating actions (WA + back to top)                                   */
/* -------------------------------------------------------------------- */
body.site2026 .floating-contact.n-fab-wa {
    right: 18px;
    bottom: 84px;
    height: 46px;
    padding: 0 18px;
    border-radius: 100px;
    background: #25D366;
    box-shadow: 0 10px 24px -8px rgba(37, 211, 102, 0.55);
    flex-direction: row !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

body.site2026 .floating-contact.n-fab-wa::before {
    font-family: "bootstrap-icons" !important;
    content: "\F63D";
    font-size: 18px;
}

body.site2026 .floating-contact.n-fab-wa span {
    font-size: 13px;
    font-weight: 600;
}

body.site2026 #backToTopBtn.n-fab-top {
    right: 18px;
    bottom: 142px;
    width: 42px;
    height: 42px;
    border-radius: 100px;
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--n-line);
    box-shadow: var(--n-shadow);
}

@media (max-width: 767px) {
    body.site2026 .floating-contact.n-fab-wa { bottom: 96px; }
    body.site2026 #backToTopBtn.n-fab-top { bottom: 154px; }
}

/* -------------------------------------------------------------------- */
/* Order page override: the order page already ships its own inline WA  */
/* CTA card (.order2026-cs-box, "Ada kendala transaksi?"), which sits in */
/* the exact same bottom-right vertical band as this global floating WA  */
/* button. The two were rendering on top of each other on every scroll   */
/* frame — not just at the bottom of the page — so instead of trying to  */
/* dodge it with spacing, just remove the duplicate CTA on this page and */
/* let back-to-top drop down into the freed-up slot.                     */
/* -------------------------------------------------------------------- */
body.site2026:has(.order2026) .floating-contact.n-fab-wa {
    display: none !important;
}

body.site2026:has(.order2026) #backToTopBtn.n-fab-top {
    bottom: 84px;
}

@media (max-width: 767px) {
    body.site2026:has(.order2026) #backToTopBtn.n-fab-top { bottom: 96px; }
}