/* ===== BLACTEC THEME CSS ===== */
/* Slate's rules plus a centred home page, white header and the blactec. logo lockup, matching blactec.ug */
/* Overrides default styles when the BlacTec theme is active */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap');

/* Font override */
body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.section-title, .hero__title, .hero__title-sub, h1, h2, h3, h4 {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Navigation */
.main-nav {
    background: rgba(30, 41, 59, 0.92) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.main-nav.scrolled {
    background: rgba(30, 41, 59, 0.98) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.4) !important;
}

/* Buttons: gradient */
.btn-primary {
    background: linear-gradient(135deg, #64748b, #334155) !important;
    box-shadow: 0 4px 20px rgba(51, 65, 85, 0.35) !important;
}
.btn-primary:hover {
    box-shadow: 0 8px 30px rgba(51, 65, 85, 0.5) !important;
}
.btn-accent {
    background: linear-gradient(135deg, #64748b, #334155) !important;
    box-shadow: 0 4px 20px rgba(100, 116, 139, 0.3) !important;
}
.btn-accent:hover {
    box-shadow: 0 8px 30px rgba(100, 116, 139, 0.45) !important;
}

/* Cards: glassmorphism */
.plan-card, .infra-card, .testimonial-card, .vps-card, .faq__item {
    background: rgba(255,255,255,0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0,0,0,0.06) !important;
    transition: all 0.3s ease !important;
}
.plan-card:hover, .infra-card:hover, .testimonial-card:hover, .vps-card:hover {
    background: rgba(255,255,255,0.95) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08) !important;
    transform: translateY(-4px) !important;
}

/* Hero badge */
.hero__badge {
    background: rgba(100, 116, 139, 0.15) !important;
    border-color: rgba(100, 116, 139, 0.3) !important;
    color: #64748b !important;
}

/* Hero title accent */
.hero__title span {
    color: #64748b !important;
}

/* Hero stats */
.hero__stat i {
    color: #64748b !important;
}

/* Callout cards */
.hero__callout--1 i { color: #334155 !important; }
.hero__callout--2 i { color: #64748b !important; }

/* Plan card badge */
.plan-card__badge { background: linear-gradient(135deg, #64748b, #334155) !important; }
.plan-card__btn--primary {
    background: linear-gradient(135deg, #64748b, #334155) !important;
}
.plan-card__discount {
    background: rgba(100, 116, 139, 0.1) !important;
    color: #334155 !important;
}

/* Hosting promo gradient */
.hosting-plans__promo {
    background: linear-gradient(135deg, #334155, #64748b) !important;
}
.vps__visual {
    background: linear-gradient(135deg, #334155, #64748b) !important;
}
.cta-banner {
    background: linear-gradient(135deg, #1e293b, #1e293b) !important;
}

/* Mega menu promo */
.main-nav__mega-promo {
    background: linear-gradient(135deg, #334155, #64748b) !important;
}

/* Nav login hover */
.main-nav__login:hover {
    border-color: #64748b !important;
    background: #64748b !important;
}

/* Brand dot */
.main-nav__brand-dot, .footer__brand-dot {
    background: #64748b !important;
}

/* Dropdown link hover */
.main-nav__dropdown-link:hover { color: #334155 !important; }
.main-nav__dropdown-link i { color: #334155 !important; }

/* Footer contact icon */
.footer__contact-item i { color: #64748b !important; }

/* Promo cards */
.promo-card--1 { background: linear-gradient(135deg, #334155, #64748b) !important; }
.promo-card--2 { background: linear-gradient(135deg, #1e293b, #1e293b) !important; }

/* Stats accent */
.stats__number span { color: #64748b !important; }

/* VPS card badge */
.vps-card__badge--popular { background: #334155 !important; }
.vps-card__badge--value { background: #64748b !important; }

/* ===== BLACTEC — centred home page, matching blactec.ug =====
   Layout and colour changes are scoped to light mode, so the dark-mode toggle keeps the
   portal's original look. Screenshots are the client sites already shown on blactec.ug. */

/* ---------- Hero: everything centred, mockups fanned out underneath ---------- */
html[data-theme="light"] .hero {
    background: linear-gradient(180deg, #e8eef5 0%, #f1f5f9 62%, #f6f6f6 100%) !important;
    padding: 84px 0 460px !important; text-align: center;
}
html[data-theme="light"] .hero__inner { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; justify-items: center; }

html[data-theme="light"] .hero__badge {
    background: none !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 0 1rem !important;
    color: #6b7280 !important; font-size: .8rem !important; font-weight: 600 !important;
    letter-spacing: .06em !important; text-transform: uppercase !important;
}
html[data-theme="light"] .hero__badge i { display: none !important; }
html[data-theme="light"] .hero__title {
    color: #0e0f13 !important; font-size: clamp(2.4rem, 6vw, 5.6rem) !important; font-weight: 700 !important;
    line-height: .98 !important; letter-spacing: -.045em !important;
    max-width: 15em; margin: 0 auto !important; text-wrap: balance;
}
html[data-theme="light"] .hero__title span { color: inherit !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
/* The short tagline repeats the paragraph below it; blactec.ug shows just the paragraph. */
html[data-theme="light"] .hero__title-sub { display: none !important; }
html[data-theme="light"] .hero__desc {
    color: #5b6270 !important; font-size: 1.15rem !important; line-height: 1.55 !important;
    max-width: 38rem !important; margin: 1.4rem auto 0 !important;
}
html[data-theme="light"] .hero__stats { justify-content: center; margin: 1.6rem 0 1.8rem !important; }
html[data-theme="light"] .hero__stat {
    background: rgba(14, 15, 19, .06) !important; color: #0e0f13 !important; border: 0 !important;
    border-radius: 999px !important; box-shadow: none !important;
}
html[data-theme="light"] .hero__stat i { color: #0e0f13 !important; }
html[data-theme="light"] .hero .btn-accent {
    background: #0e0f13 !important; color: #fff !important; border: 0 !important;
    border-radius: 999px !important; box-shadow: none !important; padding: 14px 30px !important;
}

/* The two callouts become a centred row of chips under the button */
html[data-theme="light"] .hero__visual {
    min-height: 0 !important; margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
html[data-theme="light"] .hero__visual canvas { display: none !important; }
html[data-theme="light"] .hero__callout { position: static !important; box-shadow: 0 8px 30px -12px rgba(14, 15, 19, .25) !important; }

/* The mockup fan: three client sites in browser frames, centred at the bottom of the hero.
   The three empty "orb" divs the portal ships with are reused as the frames. */
html[data-theme="light"] .hero__orb { display: none !important; }
@media (min-width: 1025px) {
    html[data-theme="light"] .hero__orb {
        display: block !important; position: absolute !important; left: 50%; top: auto !important; right: auto !important;
        height: auto; aspect-ratio: 960 / 556; border-radius: 14px; filter: none !important; opacity: 1 !important;
        animation: none !important; pointer-events: none;
        box-shadow: 0 34px 70px -26px rgba(14, 15, 19, .45), 0 0 0 1px rgba(14, 15, 19, .08);
        background-repeat: no-repeat;
        background-size: 56px 22px, 56px 22px, 56px 22px, 100% 22px, 100% calc(100% - 22px);
        background-position: 0 0, 0 0, 0 0, 0 0, 0 22px;
    }
    html[data-theme="light"] .hero__orb--2 {
        width: min(640px, 50vw); bottom: 44px; z-index: 3; transform: translateX(-50%);
        background-image: radial-gradient(circle at 12px 11px, #ff5f57 4px, transparent 4.5px), radial-gradient(circle at 28px 11px, #febc2e 4px, transparent 4.5px), radial-gradient(circle at 44px 11px, #28c840 4px, transparent 4.5px), linear-gradient(#f1f2f4, #f1f2f4), url(https://blactec.ug/assets/showcase/kaco-systems.webp);
    }
    html[data-theme="light"] .hero__orb--1 {
        width: min(440px, 34vw); bottom: 20px; z-index: 2; transform: translateX(calc(-50% - min(390px, 30vw)));
        background-image: radial-gradient(circle at 12px 11px, #ff5f57 4px, transparent 4.5px), radial-gradient(circle at 28px 11px, #febc2e 4px, transparent 4.5px), radial-gradient(circle at 44px 11px, #28c840 4px, transparent 4.5px), linear-gradient(#f1f2f4, #f1f2f4), url(https://blactec.ug/assets/showcase/golden-marketing.webp);
    }
    html[data-theme="light"] .hero__orb--3 {
        width: min(440px, 34vw); bottom: 20px; z-index: 2; transform: translateX(calc(-50% + min(390px, 30vw)));
        background-image: radial-gradient(circle at 12px 11px, #ff5f57 4px, transparent 4.5px), radial-gradient(circle at 28px 11px, #febc2e 4px, transparent 4.5px), radial-gradient(circle at 44px 11px, #28c840 4px, transparent 4.5px), linear-gradient(#f1f2f4, #f1f2f4), url(https://blactec.ug/assets/showcase/trips-and-adventures.webp);
    }
}
@media (max-width: 1024px) {
    html[data-theme="light"] .hero { padding: 64px 0 56px !important; }
}

/* ---------- Domain search: centred cards ---------- */
html[data-theme="light"] .domain-search { background: #f6f6f6 !important; padding: 56px 0 40px !important; }
html[data-theme="light"] .domain-search__bar {
    border-radius: 999px !important; border: 1px solid rgba(14, 15, 19, .12) !important;
    box-shadow: 0 22px 54px -12px rgba(14, 15, 19, .18) !important; padding: 5px 5px 5px 14px;
}
html[data-theme="light"] .domain-search__btn { background: #0e0f13 !important; border-radius: 999px !important; }
.domain-search__extensions { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 900px; margin: 0 auto; }
.domain-search__ext { flex: 1 1 150px; max-width: 172px; text-align: center; transition: transform .25s, box-shadow .25s; }
html[data-theme="light"] .domain-search__ext {
    background: #fff !important; border: 1px solid rgba(14, 15, 19, .08) !important; border-radius: 16px !important;
    padding: 20px 12px !important; box-shadow: 0 1px 2px rgba(14, 15, 19, .04);
}
html[data-theme="light"] .domain-search__ext:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(14, 15, 19, .3); }
html[data-theme="light"] .domain-search__ext-name { color: #0e0f13 !important; font-size: 1.3rem !important; font-weight: 700 !important; letter-spacing: -.02em; }
html[data-theme="light"] .domain-search__ext-price { color: #5b6270 !important; font-variant-numeric: tabular-nums; }
html[data-theme="light"] .domain-search__ext-link {
    display: inline-block; margin-top: 10px; padding: 6px 16px; border-radius: 999px;
    background: #0e0f13; color: #fff !important; font-size: .8rem; font-weight: 600;
}

/* ---------- Section headings ---------- */
html[data-theme="light"] .section-title { font-size: clamp(2rem, 3.6vw, 2.9rem) !important; font-weight: 700 !important; letter-spacing: -.03em !important; color: #0e0f13; }
html[data-theme="light"] .section-subtitle { color: #5b6270 !important; font-size: 1.1rem !important; margin-bottom: 40px !important; }

/* ---------- Promo cards: centred, one clean style, Business Hosting highlighted ---------- */
.promo-cards__grid { gap: 24px !important; }
.promo-card { display: flex !important; flex-direction: column; align-items: center; text-align: center; padding: 32px 22px !important; }
.promo-card::after { display: none !important; }
.promo-card__prices { justify-content: center; flex-wrap: wrap; }
.promo-card__new { font-size: clamp(1.4rem, 2.1vw, 1.8rem) !important; line-height: 1.1; text-wrap: balance; }
.promo-card__cta { margin-top: auto; }
@media (max-width: 1024px) { .promo-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 480px) { .promo-cards__grid { grid-template-columns: minmax(0, 1fr) !important; } }
html[data-theme="light"] .promo-cards { padding: 8px 0 72px !important; }
html[data-theme="light"] .promo-card--1, html[data-theme="light"] .promo-card--2, html[data-theme="light"] .promo-card--4 {
    background: #fff !important; color: #0e0f13; border: 1px solid rgba(14, 15, 19, .09);
    box-shadow: 0 1px 2px rgba(14, 15, 19, .04), 0 18px 40px -22px rgba(14, 15, 19, .25);
}
html[data-theme="light"] .promo-card--3 { background: #0e0f13 !important; color: #fff; box-shadow: 0 24px 50px -22px rgba(14, 15, 19, .5); }
html[data-theme="light"] .promo-card__subtitle { opacity: .7; }
html[data-theme="light"] .promo-card__cta { background: #0e0f13 !important; color: #fff !important; border-radius: 999px !important; padding: 9px 22px !important; }
html[data-theme="light"] .promo-card--3 .promo-card__cta { background: #fff !important; color: #0e0f13 !important; }

/* ---------- Hosting plans: three centred cards, offer banner on top (no more sideways scrolling) ---------- */
.hosting-plans__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; max-width: 1120px; margin-inline: auto; }
.hosting-plans__promo {
    grid-column: 1 / -1; flex-direction: row !important; align-items: center; justify-content: center;
    gap: 28px; text-align: left; padding: 28px 36px !important;
}
.hosting-plans__promo-icon { margin: 0 !important; font-size: 44px; }
.hosting-plans__promo h3 { margin: 0 0 6px !important; }
.hosting-plans__promo p { margin: 0 !important; }
.hosting-plans__promo-btn { align-self: center !important; white-space: nowrap; }
html[data-theme="light"] .hosting-plans__promo { background: #0e0f13 !important; }
html[data-theme="light"] .hosting-plans__promo-btn { border-radius: 999px !important; color: #0e0f13 !important; }
html[data-theme="light"] .hosting-plans { padding: 72px 0 80px !important; }

.plan-card { text-align: center; padding: 36px 28px !important; }
.plan-card__subtitle { min-height: 5.9em; line-height: 1.45; font-size: 13px; }   /* equal height, so prices and buttons line up */
.plan-card__features { text-align: left; }
.plan-card__cp { justify-content: center; }
.plan-card__price { font-size: clamp(1.9rem, 2.7vw, 2.4rem) !important; white-space: nowrap; letter-spacing: -.02em; }
.plan-card__price small { display: block; margin-top: 6px; font-size: .9rem !important; letter-spacing: 0; }
.plan-card__badge { right: auto !important; left: 50%; transform: translateX(-50%); }
html[data-theme="light"] .plan-card--popular { border-color: #0e0f13 !important; box-shadow: 0 24px 60px -24px rgba(14, 15, 19, .35) !important; }
html[data-theme="light"] .plan-card__badge { background: #0e0f13 !important; }
html[data-theme="light"] .plan-card__btn { border-radius: 999px !important; }
html[data-theme="light"] .plan-card__btn--primary { background: #0e0f13 !important; }
html[data-theme="light"] .plan-card__btn--outline { border-color: rgba(14, 15, 19, .18) !important; color: #0e0f13 !important; }
html[data-theme="light"] .plan-card__btn--outline:hover { background: #0e0f13 !important; border-color: #0e0f13 !important; color: #fff !important; }
@media (max-width: 1024px) {
    .hosting-plans__grid { grid-template-columns: 1fr 1fr !important; }
    .hosting-plans__promo { flex-direction: column !important; text-align: center; }
}
@media (max-width: 680px) {
    .hosting-plans__grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- Closing banner and footer: brand black ---------- */
html[data-theme="light"] .cta-banner { background: #0e0f13 !important; }
html[data-theme="light"] .cta-banner .btn-accent { background: #fff !important; color: #0e0f13 !important; border-radius: 999px !important; box-shadow: none !important; }
html[data-theme="light"] .footer { background: #0e0f13 !important; border-top: 1px solid rgba(255, 255, 255, .08); }
html[data-theme="light"] .faq__item { border-radius: 16px !important; }
@media (min-width: 1025px) {
    .footer__grid { grid-template-columns: 1.8fr repeat(3, minmax(0, 1fr)) !important; }   /* the theme reserves a fifth, empty column */
}
/* The theme hard-codes VISA / MC / AMEX / PP / BTC badges in the footer. Airtel Money is the only way to
   pay for now, so say that instead. Restore the badges here when cards or MoMo go live. */
.footer__payment-icon { display: none !important; }
.footer__payments::after { content: "Pay with Airtel Money"; font-size: 13px; opacity: .65; }

/* Below 1024px the portal centres the hero; keep the paragraph centred too */
@media (max-width: 1024px) {
    html[data-theme="light"] .hero__desc { margin-left: auto !important; margin-right: auto !important; }
}

/* ---------- Top bar: never wrap; tablets keep just the account links ---------- */
.top-bar__item { white-space: nowrap; }
@media (max-width: 1024px) { .top-bar__left { display: none !important; } }

/* ===== BLACTEC — white header + logo lockup, matching blactec.ug =====
   Light mode only for the white header; the logo wordmark works in both modes. */

/* Logo: the uploaded logo (Appearance > Logo) is the full blactec. lockup, drawn for light
   backgrounds. Where the background is dark (the footer, and the header in dark mode) the white
   lockup is laid over it instead; it is embedded below so nothing depends on another site. */
.main-nav__brand img { height: 34px !important; width: auto; }
.footer__brand, html[data-theme="dark"] .main-nav__brand { position: relative; }
.footer__brand img, html[data-theme="dark"] .main-nav__brand img { opacity: 0; }
.footer__brand::after, html[data-theme="dark"] .main-nav__brand::after {
    content: ""; position: absolute; inset: 0;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjEuNDUiIGhlaWdodD0iMzQiIHZpZXdCb3g9IjAgMCAxMjEuNDUgMzQiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iQmxhY1RlYyI+CiAgPHRpdGxlPkJsYWNUZWM8L3RpdGxlPgogIDxyZWN0IHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgcng9IjgiIGZpbGw9IiNmZmZmZmYiLz4KICA8cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTYuNzYgMjQuMjRRMTYgMjQuMjQgMTUuMzkgMjQuMDVRMTQuNzggMjMuODYgMTQuMzEgMjMuNTFRMTMuODQgMjMuMTYgMTMuNSAyMi42OEwxMy41IDIyLjY4TDEzLjIgMjRMMTAuOCAyNEwxMC44IDkuNkwxMy41IDkuNkwxMy41IDE1LjRRMTMuOTYgMTQuNzIgMTQuNzYgMTQuMjVRMTUuNTYgMTMuNzggMTYuNzYgMTMuNzhRMTguMTQgMTMuNzggMTkuMjQgMTQuNDZRMjAuMzQgMTUuMTQgMjAuOTggMTYuMzJRMjEuNjIgMTcuNSAyMS42MiAxOS4wMlEyMS42MiAyMC41MiAyMC45OCAyMS43UTIwLjM0IDIyLjg4IDE5LjI2IDIzLjU2UTE4LjE4IDI0LjI0IDE2Ljc2IDI0LjI0Wk0xNi4xNCAyMS44OFExNi45NCAyMS44OCAxNy41NSAyMS41MVExOC4xNiAyMS4xNCAxOC41MiAyMC41UTE4Ljg4IDE5Ljg2IDE4Ljg4IDE5UTE4Ljg4IDE4LjE4IDE4LjUyIDE3LjUzUTE4LjE2IDE2Ljg4IDE3LjU1IDE2LjUxUTE2Ljk0IDE2LjE0IDE2LjE0IDE2LjE0UTE1LjM2IDE2LjE0IDE0Ljc0IDE2LjUxUTE0LjEyIDE2Ljg4IDEzLjc3IDE3LjUzUTEzLjQyIDE4LjE4IDEzLjQyIDE5UTEzLjQyIDE5Ljg2IDEzLjc3IDIwLjUxUTE0LjEyIDIxLjE2IDE0Ljc0IDIxLjUyUTE1LjM2IDIxLjg4IDE2LjE0IDIxLjg4WiIvPgogIDxjaXJjbGUgY3g9IjI0LjUiIGN5PSIyMi41IiByPSIyLjYiIGZpbGw9IiNlMGUwMDciLz4KICA8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNTAuMzYgMjQuNzJRNDkuMzkgMjQuNzIgNDguNTUgMjQuNDRRNDcuNzIgMjQuMTYgNDcuMDggMjMuNjRRNDYuNDQgMjMuMTIgNDYuMDQgMjIuNEw0Ni4wNCAyMi40TDQ1LjkxIDI0LjQ0TDQ0LjQyIDI0LjQ0TDQ0LjQyIDcuNzNMNDYuMDQgNy43M0w0Ni4wNCAxNC45UTQ2LjYgMTQuMDIgNDcuNjggMTMuMzJRNDguNzYgMTIuNjMgNTAuMzggMTIuNjNRNTIuMTIgMTIuNjMgNTMuNDEgMTMuNDJRNTQuNyAxNC4yMSA1NS4zOSAxNS41OVE1Ni4wOSAxNi45NyA1Ni4wOSAxOC43MVE1Ni4wOSAyMC40NSA1NS4zOCAyMS44UTU0LjY4IDIzLjE2IDUzLjQgMjMuOTRRNTIuMTIgMjQuNzIgNTAuMzYgMjQuNzJaTTUwLjI5IDIzLjNRNTEuNTIgMjMuMyA1Mi40NSAyMi43MlE1My4zOCAyMi4xNCA1My45MSAyMS4xMVE1NC40NCAyMC4wOCA1NC40NCAxOC42OFE1NC40NCAxNy4yOSA1My45MSAxNi4yNFE1My4zOCAxNS4xOCA1Mi40NSAxNC42MVE1MS41MiAxNC4wNCA1MC4yOSAxNC4wNFE0OS4wOCAxNC4wNCA0OC4xNCAxNC42MVE0Ny4yIDE1LjE4IDQ2LjY3IDE2LjI0UTQ2LjE0IDE3LjI5IDQ2LjE0IDE4LjY4UTQ2LjE0IDIwLjA4IDQ2LjY3IDIxLjExUTQ3LjIgMjIuMTQgNDguMTQgMjIuNzJRNDkuMDggMjMuMyA1MC4yOSAyMy4zWiIvPgogIDxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik01OC4zNCAyNC40NEw1OC4zNCA3LjczTDU5Ljk3IDcuNzNMNTkuOTcgMjQuNDRaIi8+CiAgPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTY2LjU1IDI0LjcyUTY1LjEyIDI0LjcyIDY0LjE2IDI0LjIyUTYzLjIxIDIzLjcyIDYyLjc1IDIyLjkxUTYyLjI5IDIyLjA5IDYyLjI5IDIxLjE0UTYyLjI5IDE5Ljk0IDYyLjkxIDE5LjExUTYzLjU0IDE4LjI5IDY0LjY3IDE3Ljg3UTY1LjgxIDE3LjQ1IDY3LjMgMTcuNDVMNzAuNDUgMTcuNDVRNzAuNDUgMTYuMzYgNzAuMDkgMTUuNTlRNjkuNzMgMTQuODEgNjkuMDYgMTQuNDJRNjguMzkgMTQuMDIgNjcuMzkgMTQuMDJRNjYuMTggMTQuMDIgNjUuMyAxNC42NFE2NC40MiAxNS4yNSA2NC4yMSAxNi40M0w2Mi40OSAxNi40M1E2Mi42MyAxNS4xOCA2My4zNiAxNC4zM1E2NC4wOSAxMy40OSA2NS4xNiAxMy4wNlE2Ni4yMyAxMi42MyA2Ny4zOSAxMi42M1E2OC45OSAxMi42MyA3MC4wMiAxMy4yM1E3MS4wNSAxMy44NCA3MS41NyAxNC44OVE3Mi4wOCAxNS45NSA3Mi4wOCAxNy4zNEw3Mi4wOCAyNC40NEw3MC41OSAyNC40NEw3MC41MiAyMi4zM0w3MC41MiAyMi4zM1E3MC4yOSAyMi44MSA2OS45MyAyMy4yNVE2OS41NyAyMy43IDY5LjA5IDI0LjAyUTY4LjYyIDI0LjM0IDY3Ljk5IDI0LjUzUTY3LjM3IDI0LjcyIDY2LjU1IDI0LjcyWk02Ni43MiAyMy4yOFE2Ny42IDIzLjI4IDY4LjI4IDIyLjkzUTY4Ljk3IDIyLjU4IDY5LjQ1IDIyUTY5Ljk0IDIxLjQyIDcwLjIgMjAuNjlRNzAuNDUgMTkuOTYgNzAuNDUgMTkuMTlMNzAuNDUgMTguODVMNjcuNDEgMTguODVRNjYuMTYgMTguODUgNjUuNDEgMTkuMTVRNjQuNjUgMTkuNDUgNjQuMzIgMTkuOTVRNjMuOTggMjAuNDUgNjMuOTggMjEuMVE2My45OCAyMS43NSA2NC4yOSAyMi4yM1E2NC42MSAyMi43MiA2NS4yMiAyM1E2NS44MyAyMy4yOCA2Ni43MiAyMy4yOFoiLz4KICA8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNzkuNzUgMjQuNzJRNzguMTUgMjQuNzIgNzYuODYgMjMuOTZRNzUuNTcgMjMuMjEgNzQuODIgMjEuODVRNzQuMDcgMjAuNDkgNzQuMDcgMTguNjhRNzQuMDcgMTYuODUgNzQuODIgMTUuNTFRNzUuNTcgMTQuMTYgNzYuODYgMTMuMzlRNzguMTUgMTIuNjMgNzkuNzUgMTIuNjNRODEuNzcgMTIuNjMgODMuMTMgMTMuNjdRODQuNDggMTQuNzIgODQuODUgMTYuNDZMODMuMjMgMTYuNDZRODIuOTggMTUuMjcgODIuMDEgMTQuNjVRODEuMDUgMTQuMDIgNzkuNzUgMTQuMDJRNzguNzEgMTQuMDIgNzcuNzkgMTQuNTRRNzYuODcgMTUuMDYgNzYuMzEgMTYuMDlRNzUuNzQgMTcuMTEgNzUuNzQgMTguNjhRNzUuNzQgMTkuODQgNzYuMDcgMjAuNzFRNzYuNDEgMjEuNTggNzYuOTggMjIuMThRNzcuNTUgMjIuNzcgNzguMjcgMjMuMDZRNzguOTkgMjMuMzUgNzkuNzUgMjMuMzVRODAuNjEgMjMuMzUgODEuMzQgMjMuMDZRODIuMDcgMjIuNzcgODIuNTcgMjIuMjNRODMuMDcgMjEuNyA4My4yMyAyMC45MUw4NC44NSAyMC45MVE4NC41MSAyMi41OCA4My4xNCAyMy42NVE4MS43NyAyNC43MiA3OS43NSAyNC43MloiLz4KICA8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNOTEuMTMgMjQuNDRROTAuMTMgMjQuNDQgODkuNDEgMjQuMTJRODguNjkgMjMuODEgODguMzEgMjMuMDdRODcuOTIgMjIuMzMgODcuOTIgMjEuMDdMODcuOTIgMTQuM0w4NS45MyAxNC4zTDg1LjkzIDEyLjkxTDg3LjkyIDEyLjkxTDg4LjE2IDEwLjI0TDg5LjU1IDEwLjI0TDg5LjU1IDEyLjkxTDkzLjAzIDEyLjkxTDkzLjAzIDE0LjNMODkuNTUgMTQuM0w4OS41NSAyMS4wN1E4OS41NSAyMi4yMyA5MC4wMiAyMi42NFE5MC41IDIzLjA1IDkxLjY4IDIzLjA1TDkyLjgyIDIzLjA1TDkyLjgyIDI0LjQ0WiIvPgogIDxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik05OS43NiAyNC43MlE5OC4xNCAyNC43MiA5Ni44OCAyMy45NlE5NS42MyAyMy4yMSA5NC45MSAyMS44NVE5NC4xOSAyMC40OSA5NC4xOSAxOC42NlE5NC4xOSAxNi44MyA5NC45IDE1LjQ3UTk1LjYxIDE0LjExIDk2Ljg4IDEzLjM3UTk4LjE2IDEyLjYzIDk5LjgxIDEyLjYzUTEwMS40OCAxMi42MyAxMDIuNjYgMTMuMzhRMTAzLjg0IDE0LjE0IDEwNC40NyAxNS4zNVExMDUuMSAxNi41NyAxMDUuMSAxNy45NlExMDUuMSAxOC4yIDEwNS4xIDE4LjQ1UTEwNS4xIDE4LjcxIDEwNS4wNyAxOS4wM0w5NS40NCAxOS4wM0w5NS40NCAxNy42NEwxMDMuNTIgMTcuNjRRMTAzLjQ1IDE1LjkyIDEwMi4zOCAxNC45N1ExMDEuMzEgMTQuMDIgOTkuNzQgMTQuMDJROTguNjkgMTQuMDIgOTcuNzkgMTQuNDhROTYuODggMTQuOTUgOTYuMzMgMTUuODVROTUuNzcgMTYuNzYgOTUuNzcgMTguMDhMOTUuNzcgMTguNzFROTUuNzcgMjAuMjYgOTYuMzUgMjEuMjlROTYuOTMgMjIuMzMgOTcuODUgMjIuODNROTguNzYgMjMuMzIgOTkuNzYgMjMuMzJRMTAxLjA2IDIzLjMyIDEwMS45NCAyMi43MlExMDIuODIgMjIuMTIgMTAzLjE5IDIxLjA1TDEwNC43NyAyMS4wNVExMDQuNDkgMjIuMDkgMTAzLjgyIDIyLjkzUTEwMy4xNSAyMy43NiAxMDIuMTMgMjQuMjRRMTAxLjExIDI0LjcyIDk5Ljc2IDI0LjcyWiIvPgogIDxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0xMTIuNDEgMjQuNzJRMTEwLjgxIDI0LjcyIDEwOS41MiAyMy45NlExMDguMjMgMjMuMjEgMTA3LjQ4IDIxLjg1UTEwNi43MiAyMC40OSAxMDYuNzIgMTguNjhRMTA2LjcyIDE2Ljg1IDEwNy40OCAxNS41MVExMDguMjMgMTQuMTYgMTA5LjUyIDEzLjM5UTExMC44MSAxMi42MyAxMTIuNDEgMTIuNjNRMTE0LjQzIDEyLjYzIDExNS43OCAxMy42N1ExMTcuMTQgMTQuNzIgMTE3LjUxIDE2LjQ2TDExNS44OSAxNi40NlExMTUuNjMgMTUuMjcgMTE0LjY3IDE0LjY1UTExMy43MSAxNC4wMiAxMTIuNDEgMTQuMDJRMTExLjM2IDE0LjAyIDExMC40NSAxNC41NFExMDkuNTMgMTUuMDYgMTA4Ljk2IDE2LjA5UTEwOC4zOSAxNy4xMSAxMDguMzkgMTguNjhRMTA4LjM5IDE5Ljg0IDEwOC43MyAyMC43MVExMDkuMDcgMjEuNTggMTA5LjYzIDIyLjE4UTExMC4yIDIyLjc3IDExMC45MiAyMy4wNlExMTEuNjQgMjMuMzUgMTEyLjQxIDIzLjM1UTExMy4yNyAyMy4zNSAxMTQgMjMuMDZRMTE0LjczIDIyLjc3IDExNS4yMyAyMi4yM1ExMTUuNzIgMjEuNyAxMTUuODkgMjAuOTFMMTE3LjUxIDIwLjkxUTExNy4xNiAyMi41OCAxMTUuNzkgMjMuNjVRMTE0LjQzIDI0LjcyIDExMi40MSAyNC43MloiLz4KICA8cGF0aCBmaWxsPSIjZjQ4MjFmIiBkPSJNMTIwLjI4IDI0LjU1UTExOS43NyAyNC41NSAxMTkuNDQgMjQuMjFRMTE5LjEgMjMuODYgMTE5LjEgMjMuMzVRMTE5LjEgMjIuODQgMTE5LjQ0IDIyLjVRMTE5Ljc3IDIyLjE2IDEyMC4yOCAyMi4xNlExMjAuNzcgMjIuMTYgMTIxLjExIDIyLjVRMTIxLjQ0IDIyLjg0IDEyMS40NCAyMy4zNVExMjEuNDQgMjMuODYgMTIxLjExIDI0LjIxUTEyMC43NyAyNC41NSAxMjAuMjggMjQuNTVaIi8+Cjwvc3ZnPgo=") left center / contain no-repeat;
}
@media (max-width: 480px) {
    .main-nav__brand img { height: 30px !important; }
    html[data-theme="light"] .main-nav__login { padding: 8px 16px !important; }
}

/* Top bar: light strip like the rest of the page */
html[data-theme="light"] .top-bar {
    background: #fff; color: #6d7081; border-bottom: 1px solid rgba(14, 15, 19, .08);
}
html[data-theme="light"] .top-bar__item:hover { color: #0e0f13; }
html[data-theme="light"] .top-bar__divider { background: rgba(14, 15, 19, .12); }

/* Main nav: white, frosted, ink text, black pill button */
html[data-theme="light"] .main-nav {
    background: rgba(255, 255, 255, .86) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(14, 15, 19, .08) !important; box-shadow: none !important;
}
html[data-theme="light"] .main-nav.scrolled { background: rgba(255, 255, 255, .95) !important; box-shadow: 0 1px 0 rgba(14, 15, 19, .08) !important; }
html[data-theme="light"] .main-nav__link { color: #36344d; }
html[data-theme="light"] .main-nav__link:hover,
html[data-theme="light"] .main-nav__item:hover > .main-nav__link { color: #0e0f13; }
html[data-theme="light"] .main-nav__cart,
html[data-theme="light"] .dark-toggle { color: #36344d !important; }
html[data-theme="light"] .main-nav__cart:hover,
html[data-theme="light"] .dark-toggle:hover { color: #0e0f13 !important; }
html[data-theme="light"] .main-nav__login {
    background: #0e0f13 !important; border: 0 !important; color: #fff !important;
    border-radius: 999px !important; padding: 9px 22px !important;
}
html[data-theme="light"] .main-nav__login:hover { background: #2b2d33 !important; border-color: transparent !important; }
html[data-theme="light"] .main-nav__hamburger { color: #0e0f13; }
html[data-theme="light"] .main-nav__mobile-menu { background: #fff !important; }
html[data-theme="light"] .main-nav__mobile-menu a { color: #36344d !important; border-bottom-color: rgba(14, 15, 19, .08) !important; }