/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Navbar: solid background + drop shadow so it stands apart from the page body.
   Background follows Antler's light/dark palette (settings-init.js "background"). */
[data-background="light"] #header .menu-wrap,
[data-background="light"] #menu-mobile.menu-wrap {
    background-color: #fff;
    box-shadow: 0 6px 16px -4px rgba(20, 32, 60, 0.18);
}
[data-background="dark"] #header .menu-wrap,
[data-background="dark"] #menu-mobile.menu-wrap {
    background-color: #0d0d0d;
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.65);
}

/* Top-bar login dropdown: the plain "or" between "Forgot password" and "Register"
   inherits near-black text, invisible on the dark panel */
[data-background="dark"] .infonews-nav .login-content .forgot-pass {
    color: #d4dee7;
}

/* Blaze PNG logos on the login/register pages (Antler sized its SVG logos) */
.loginpage .login-page-header .navbar-brand .logo-menu {
    width: 200px;
    max-width: 100%;
    height: auto;
}

/* Homepage spacing: sec-normal adds 135px top+bottom. Tighten the Featured On
   section, and drop the padding of the (usually empty) homepage main area so
   there's no large blank gap above the footer. */
html body .blz-featured-on.sec-normal {
    padding: 70px 0 80px !important;
}
html body .wrapper.sec-normal.blz-home-main {
    padding: 0 !important;
}

/* =====================================================================
   Homepage sections (assets/layout/sections/home-*.tpl)
   ===================================================================== */
.blz-home-sec {
    padding: 80px 0;
}
.blz-home-alt {
    background-color: #030303;
}
.blz-home-sec .section-subheading {
    margin-bottom: 40px;
}
.row.blz-gap {
    display: flex;
    flex-wrap: wrap;
}
.blz-gap > [class*="col-"] {
    margin-bottom: 30px;
}

/* Homepage banner slider. Antler makes every slide 100vh with the content absolutely
   centred: tall screens get a big empty band, and when the headline wraps (tablets,
   zoom, the typed.js word) the centred content slides up under the navbar, which
   overlays the slider. Instead, each slide sizes to its content with top padding
   = navbar height + gap, so the content can never go under the navbar. Flickity
   sizes the viewport to the tallest slide; shorter slides stretch to it
   (min-height:100%) and centre their content. The dots rule targets only the main
   slider's own dots, not the nested background carousel of slide 2. */
html body .main-container.slider .silder-container {
    min-height: 0;
}
html body .header-main-slider .carousel-cell {
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 180px 0 100px; /* desktop navbar ends at 117px */
}
html body .main-container.slider .silder-container .slider-content {
    position: relative;
    top: auto;
    transform: none;
}
html body .header-main-slider > .flickity-page-dots {
    bottom: 28px;
}
@media (max-width: 991px) {
    html body .header-main-slider .carousel-cell {
        padding: 160px 0 80px; /* mobile navbar ends at 106px */
    }
    html body .header-main-slider > .flickity-page-dots {
        bottom: 18px;
    }
}

/* Tech stack logo slider under the homepage banner (techstack.tpl).
   Background is transparent so the strip always matches the page surface
   exactly (.bg-colorstyle, currently #0d0d0d) rather than tracking it by
   hand. The track holds the logo list 4 times; sliding it by one copy
   (-25%) loops seamlessly on any width. */
.blz-techstack {
    padding: 26px 0;
    background: transparent;
    border-top: 1px solid rgba(207, 212, 219, 0.10);
    border-bottom: 1px solid rgba(207, 212, 219, 0.10);
    overflow: hidden;
}
.blz-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.blz-marquee-track {
    display: flex;
    width: max-content;
    animation: blz-marquee 70s linear infinite; /* ~45px/s with 14 logos */
}
.blz-marquee:hover .blz-marquee-track {
    animation-play-state: paused;
}
.blz-marquee-group {
    display: flex;
    align-items: center;
    gap: 70px;
    padding-right: 70px;
}
/* Silver monochrome on the dark strip. All 15 logos are dark artwork on
   transparency (litespeed.svg's only white fills are small internal
   highlights), and plesk.png is a 100%-opaque mostly-white tile — so
   inverting both renders the marks light AND drops Plesk's white box to
   near-black, where it disappears into the strip. brightness/contrast land
   the result near the silver token (#cfd4db). The old mix-blend-mode:
   multiply only worked against a light band and would erase everything here. */
.blz-marquee-group img {
    flex: none;
    height: 44px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    filter: grayscale(1) invert(1) contrast(1.1) brightness(0.9);
    transition: filter 0.2s ease;
}
.blz-marquee:hover .blz-marquee-group img {
    filter: grayscale(1) invert(1) contrast(1.1) brightness(1.08);
}
@keyframes blz-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-25%); }
}
@media (prefers-reduced-motion: reduce) {
    .blz-marquee-track { animation: none; }
}
@media (max-width: 767px) {
    .blz-techstack { padding: 18px 0; }
    .blz-marquee-group { gap: 44px; padding-right: 44px; }
    .blz-marquee-group img { height: 32px; max-width: 130px; }
}

/* Hosting plan cards */
.blz-plan-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
    border-radius: 14px;
    border: 1px solid rgba(207, 212, 219, 0.12);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.blz-plan-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.55);
}
.blz-plan-card .svg,
.blz-plan-card > img {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
}
.blz-plan-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}
.blz-plan-card p {
    flex: 1;
    margin-bottom: 18px;
}
.blz-plan-from {
    margin-bottom: 20px;
}
.blz-plan-from b {
    font-size: 32px;
    font-weight: 800;
    margin: 0 2px 0 6px;
    color: var(--blz-gold);
    background-image: var(--blz-gold-metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.blz-plan-card .btn {
    align-self: flex-start;
}

/* Stats (silver tiles) */
.blz-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}
.blz-stat {
    text-align: center;
    padding: 26px 12px;
    border-radius: 14px;
    background: var(--blz-silver-metal);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 18px rgba(0, 0, 0, 0.35);
}
html body .box-container .blz-stat b {
    display: block;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
    color: #1b1f24 !important;
}
html body .box-container .blz-stat span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #2d333b !important;
}

/* Feature boxes */
.blz-feature {
    height: 100%;
    display: flex;
    gap: 18px;
    padding: 24px;
    border-radius: 14px;
    border: 1px solid rgba(207, 212, 219, 0.12);
}
.blz-feature .svg,
.blz-feature > img {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
}
.blz-feature h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
}
.blz-feature p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Domains */
.blz-checklist {
    list-style: none;
    padding: 0;
    margin: 22px 0 28px;
    columns: 2;
}
.blz-checklist li {
    margin-bottom: 10px;
}
.blz-checklist i {
    color: var(--blz-gold);
    margin-right: 8px;
}
.blz-tlds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.blz-tld {
    display: block;
    padding: 20px 14px;
    border-radius: 14px;
    text-align: center;
    border: 1px solid rgba(212, 175, 55, 0.35);
    text-decoration: none !important;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.blz-tld:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 175, 55, 0.8);
}
.blz-tld b {
    display: block;
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 4px;
}
.blz-tld span {
    font-size: 17px;
    font-weight: 700;
    color: var(--blz-gold);
}

/* Money-back banner (silver) */
.blz-guarantee {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 30px;
    padding: 40px 44px;
    border-radius: 18px;
    background: var(--blz-silver-metal);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 30px rgba(0, 0, 0, 0.4);
}
html body .box-container .blz-guarantee h2 {
    margin: 0 0 8px;
    font-weight: 800;
    color: #1b1f24 !important;
}
html body .box-container .blz-guarantee p {
    margin: 0;
    max-width: 680px;
    color: #2d333b !important;
}

@media (max-width: 991px) {
    .blz-tlds { margin-top: 36px; }
}
@media (max-width: 767px) {
    .blz-home-sec { padding: 56px 0; }
    .blz-stats { grid-template-columns: repeat(2, 1fr); }
    .blz-tlds { grid-template-columns: repeat(2, 1fr); }
    .blz-checklist { columns: 1; }
    .blz-guarantee { padding: 30px 24px; }
}

/* Homepage "Featured On" press logos (assets/layout/sections/featured.tpl).
   The logos mix white and black artwork, so each sits on a light silver tile. */
.blz-featured-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}
.blz-featured-logo {
    flex: 0 1 204px;
    min-width: 150px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dfe3e8 0%, #f7f8fa 50%, #cfd4db 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blz-featured-logo:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 20px rgba(0, 0, 0, 0.45);
}
.blz-featured-logo img {
    max-width: 100%;
    max-height: 62px;
    object-fit: contain;
}
/* Bharat18's artwork is white text: invert to dark, rotate hue to keep the red "18" red */
.blz-featured-logo img.blz-invert {
    filter: invert(1) hue-rotate(180deg);
}
/* Phones: two tiles per row instead of one */
@media (max-width: 575px) {
    .blz-featured-logos {
        gap: 12px;
    }
    .blz-featured-logo {
        flex: 0 1 calc(50% - 6px);
        min-width: 0;
        height: 80px;
        padding: 10px 14px;
    }
    .blz-featured-logo img {
        max-height: 50px;
    }
}

/* =====================================================================
   Gold theme: replaces Antler's flat yellow (#fdd700) with metallic gold.
   The "html body" prefix outranks the vendor rules (several use !important,
   and the order form's stylesheet loads after this file).
   ===================================================================== */
:root {
    --blz-gold: #d4af37;
    --blz-gold-base: #c9a13b;
    --blz-gold-text: #2a1c00;
    --blz-gold-metal: linear-gradient(135deg, #a67c2e 0%, #c9a13b 22%, #f0d77b 42%, #fff4c7 50%, #f0d77b 58%, #c9a13b 78%, #a67c2e 100%);
    --blz-gold-metal-hover: linear-gradient(135deg, #b8862b 0%, #e0bd5a 25%, #fff4c7 48%, #f5e08f 60%, #d4af37 80%, #b8862b 100%);
}

/* Metallic fills: buttons, badges, active states, promo boxes */
html body .btn-default-yellow-fill,
html body .btn-primary,
html body .bg-yellow,
html body a.plans.badge.feat,
html body .btn-default-fill:hover,
html body .btn-secondary:not(:disabled):not(.disabled).active,
html body table .btn-group a.btn,
html body table .btn-group > .btn:not(:first-child):hover,
html body ul.top-nav > li > a.btn-logged-in-admin,
html body #promotions-slider .promo-banner .btn,
html body .landing-page .btn,
html body .landing-page .btn-order-now,
html body .landing-page .btn-buy,
html body .landing-page .btn-learn-more:hover,
html body .know-bgbox-container .col-sm-12 a span,
html body .pagination > li > a:hover,
html body .pagination > li.active > a,
html body .pagination > .active > a,
html body .pagination > .active > span,
html body .pricing .wrapper.active,
html body .megamenu-list .start-offer .inner,
html body .spotlight-tld .btn:not(.domain-contact-support),
html body .suggested-domains .btn:not(.domain-contact-support),
html body .suggested-domains .promo.sale,
html body #order-standard_cart .addon-promo-container a,
html body #order-standard_cart .mc-promo .btn-add,
html body #order-standard_cart .domain-pricing .tld-filters .tld-filters-button.label-success {
    background-color: var(--blz-gold-base) !important;
    background-image: var(--blz-gold-metal) !important;
    background-size: 200% 100% !important;
    background-position: left center !important;
    border-color: #a67c2e !important;
    color: var(--blz-gold-text) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: background-position 0.4s ease, box-shadow 0.3s ease;
}

/* Hover: the sheen slides across instead of Antler's grey hover */
html body .btn-default-yellow-fill:hover,
html body .btn-default-yellow-fill:focus,
html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-primary:active,
html body .landing-page .btn:hover,
html body .spotlight-tld .btn:not(.domain-contact-support):hover,
html body .suggested-domains .btn:not(.domain-contact-support):hover,
html body #order-standard_cart .mc-promo .btn-add:hover,
html body #order-standard_cart .addon-promo-container a:hover {
    background-color: var(--blz-gold-base) !important;
    background-image: var(--blz-gold-metal-hover) !important;
    background-size: 200% 100% !important;
    background-position: right center !important;
    color: var(--blz-gold-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 4px 12px rgba(212, 175, 55, 0.35);
}

/* Large band on the homepage ("How can we help") */
html body .sec-bg4,
html body[data-background] .box-container .sec-bg4 {
    background-color: var(--blz-gold-base) !important;
    background-image: var(--blz-gold-metal) !important;
}

/* Gold text: links, hovers, highlighted menu items */
html body .c-yellow,
html body .secnav li a.dropdown-toggle {
    color: var(--blz-gold) !important;
    background-image: var(--blz-gold-metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
html body .nav-menu .main-menu .menu-item .menu-large .menu-item a:hover,
html body .nav-menu .main-menu .menu-item .menu-large .service-list .service.special i,
html body .nav-menu .main-menu .menu-item .menu-large .service-list .service.special .media-body a:hover,
html body .nav-menu .main-menu .menu-item .menu-large li.start-offer .inner .title,
html body .nav-menu .main-menu > .menu-item:hover > a,
html body .menu-item .sub-menu .menu-item a:hover,
html body .dropdown-menu.show a:hover,
html body #menu-mobile .dropdown.open .dropdown-menu a:hover,
html body .header .mobile .dropdown.open a.dropdown-toggle,
html body .navbar-main .navbar-nav > li a:hover,
html body .navbar-main .navbar-nav .open .dropdown-menu > li > a:hover,
html body #top-nav a.quick-nav:hover,
html body .pricing.slider .btn:hover,
html body .footer .contact a:hover,
html body .footer .contact a:hover i,
html body .footer .payment-list li i:hover,
html body .footer .footer-menu .menu-item a:hover {
    color: var(--blz-gold) !important;
}

/* Solid gold accents: borders, lines, spinner, mobile menu toggle */
html body .nav-menu .main-menu .menu-item .menu-large li.start-offer .inner,
html body .btn-x,
html body .activite-logreg-form:hover .circleactive {
    border-color: var(--blz-gold) !important;
}
html body .services .service-wrap .line:before,
html body .double-bounce1,
html body .double-bounce2,
html body .domain-promo-box i,
html body #order-standard_cart .mc-promo .arrow,
html body .regi-claaa-box #containerNewUserSignup:before,
html body .login-claaa-box #containerExistingUserSignin:before,
html body .active #nav-toggle span:before,
html body .active #nav-toggle span:after,
html body #nav-toggle.active span:before,
html body #nav-toggle.active span:after {
    background: var(--blz-gold) !important;
    border-color: var(--blz-gold) !important;
}
/* ==========================================================================
   Legal pages (terms-condition.tpl, return-refund-policy.tpl,
   privacy-policy.tpl) — long-form prose inside the standard Antler panel.
   ========================================================================== */
html body .blz-legal h2 {
    margin: 0 0 25px;
    font-size: 30px;
}
html body .blz-legal h3 {
    margin: 35px 0 15px;
    font-size: 20px;
}
html body .blz-legal p,
html body .blz-legal li {
    line-height: 1.8;
}
html body .blz-legal ul {
    margin: 0 0 20px;
    padding-left: 20px;
    list-style: disc;
}
html body .blz-legal li {
    margin-bottom: 8px;
}
/* !important + the html body prefix are needed because blaze-silver.css is
   linked after custom.css and sets link colours with !important of its own. */
html body .blz-legal a,
html body .blz-legal a:visited {
    color: var(--blz-gold) !important;
    text-decoration: underline !important;
}
html body .blz-legal a:hover,
html body .blz-legal a:focus {
    color: #fff !important;
}
/* The panel padding (p-50) is too generous on phones */
@media (max-width: 767px) {
    html body .blz-legal {
        padding: 30px 20px !important;
    }
}

/* ==========================================================================
   Homepage slider (assets/layout/sections/slider.tpl)

   All three hero cells are transparent and identical. The background lives on
   the container: a flat theme dark fill with the particles.js canvas above it,
   both behind .silder-container. Slide 1's planet.mp4 and slide 2's
   topbanner01.jpg were removed so the three read as one surface.
   ========================================================================== */
html body .blz-slider {
    position: relative;
    background: #0d0d0d;
    overflow: hidden; /* the particles canvas must never spill past the slider */
}
html body .blz-slider #blz-particles {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    /* Never intercept clicks: the domain search form sits on top of this. */
    pointer-events: none;
}
/* Two stacked instances (the "0" glyphs and the "1" glyphs) */
html body .blz-slider #blz-particles > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
html body .blz-slider #blz-particles canvas {
    display: block;
}
html body .blz-slider .silder-container {
    position: relative;
    z-index: 1;
    /* Antler fills this with a solid #212122, which sits on top of the
       particles canvas and hides it completely. */
    background: transparent !important;
}
/* Kill the per-cell fills and the .overlay scrim the old markup relied on */
html body .blz-slider .carousel-cell,
html body .blz-slider .carousel-cell.sec-bg6 {
    background: transparent !important;
}
html body .blz-slider .carousel-cell::before {
    display: none !important;
}
/* Text no longer sits on media, so set it explicitly rather than inheriting
   whatever .overlay used to provide */
html body .blz-slider .carousel-cell h1 {
    color: #fff;
}
html body .blz-slider .carousel-cell p {
    color: #d4dee7;
}
html body .blz-slider .special-note .text {
    color: rgba(255, 255, 255, 0.6);
}

/* Footer contact list (address/email/phone) is #333 in Antler's palette,
   which was already unreadable on the old dark footer and still is. */
[data-background="dark"] #footer .footer-menu li.menu-item,
[data-background="dark"] #footer .footer-menu li {
    color: #c3ccd5;
}

/* ==========================================================================
   Store group content sections (order form: orderforms/antler/groups/*.tpl)
   Reuses .blz-home-sec / .blz-feature from above; these are the extras.
   ========================================================================== */
html body .blz-store-content {
    padding-top: 70px;
}
html body .blz-store-content .section-subheading {
    max-width: 720px;
    margin: 0 auto 40px;
}
html body .blz-store-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 40px;
    border-radius: 14px;
    border: 1px solid rgba(207, 212, 219, 0.12);
}
html body .blz-store-cta h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 18px;
}
html body .blz-store-incl {
    margin: 0;
    columns: 2;
    column-gap: 36px;
}
html body .blz-store-incl li {
    break-inside: avoid;
}
html body .blz-store-help {
    flex: 0 0 280px;
}
html body .blz-store-help p {
    margin-bottom: 16px;
}
@media (max-width: 767px) {
    html body .blz-store-cta { padding: 26px 20px; }
    html body .blz-store-incl { columns: 1; }
    html body .blz-store-help { flex: 1 1 100%; }
}

/* Store group intro (text + illustration). Sits above the group headline,
   so it is the first thing on the page and needs breathing room below. */
/* Match the homepage banner height exactly.
   -135px cancels .wrapper.sec-normal's top padding so this band starts at the
   very top of the page, the way the slider does (the navbar is fixed and
   overlays it); the 180px top padding then clears the 117px navbar — the same
   recipe as .header-main-slider .carousel-cell. box-sizing is border-box, so
   min-height includes that padding.
   The heights are hard numbers because the slider's own height is content
   driven (tallest cell + 280px padding): re-measure if slider content changes. */
html body .blz-store-intro {
    --blz-hero-h: 763px;
    /* 155px = .wrapper.sec-normal 135px + 20px of ancestor offset, measured */
    margin-top: -155px;
    margin-bottom: 0;
    min-height: var(--blz-hero-h);
    display: flex;
    align-items: center;
    padding: 180px 0 100px;
    border-bottom: 1px solid rgba(207, 212, 219, 0.10);
}
html body .blz-store-intro > .container {
    width: 100%;
}
html body .blz-store-intro h2.section-heading,
html body[data-background] .blz-store-intro h2.section-heading {
    /* .section-heading is 52px from the theme; too heavy for an intro that
       now sits above the group headline. !important because the theme sets
       it with its own !important. */
    font-size: 34px !important;
    line-height: 1.2 !important;
    margin-bottom: 16px;
}
html body .blz-store-intro > .container > .row > div > p.seccolor {
    max-width: 520px;
    font-size: 15px;
    line-height: 1.75;
}
html body .blz-store-intro .blz-checklist {
    margin: 24px 0 22px;
}
html body .blz-store-intro-art {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    height: auto;
    /* Cap the height so a SQUARE illustration cannot inflate the band past
       the homepage-banner height. rack.svg is wide/short (1084x480 -> 230px
       tall at 520 wide) but api.svg is square (150x150 -> 519px tall), which
       pushed the WordPress band to 800px. 440px keeps the row under the
       763 - 280(padding) = 483px content budget for any aspect ratio. */
    max-height: 440px;
    object-fit: contain;
    /* rack.svg ships Antler's pink #ee5586 accents, which clash with the
       gold/cyan palette. Rotating the hue moves the pink to cyan and leaves
       the grey line work alone (grey has no hue to rotate). */
    filter: hue-rotate(205deg) saturate(1.15) brightness(1.2);
}
html body .blz-store-mbg {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 18px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--blz-cyan-line, rgba(34, 211, 238, 0.35));
    background: var(--blz-cyan-soft, rgba(34, 211, 238, 0.14));
}
/* World map section */
html body .blz-store-map .blz-store-map-img {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 10px auto 0;
    height: auto;
    /* map.svg is a single flat #808080 line drawing: lift it toward the
       theme silver (#cfd4db) so it reads on the near-black page. */
    filter: brightness(1.45);
    opacity: 0.95;
}
@media (max-width: 991px) {
    html body .blz-store-intro {
        /* Mobile has no 20px ancestor offset, so -135px is the exact cancel.
           559px is the homepage banner height here, but it acts only as a
           FLOOR: stacked content legitimately makes this band taller, and
           forcing the banner height would crop it. */
        --blz-hero-h: 559px;
        margin-top: -135px;
        padding: 160px 0 80px;
    }
    html body .blz-store-intro-art { max-width: 420px; margin-top: 30px; }
}

/* Antler's .section-heading is display:inline-block, so it shrink-wraps to
   its text and a text-center class ON the heading centres nothing — the box
   itself still sits at the left. Make the store-section headings block-level
   and full width so text-center actually centres them across the container.
   Scoped to DIRECT children so the left-aligned text inside the feature
   cards and the CTA is untouched. */
html body .blz-store-content > .container > h2.section-heading,
html body .blz-store-content > .container > p.section-subheading,
html body .blz-store-map > .container > h2.section-heading,
html body .blz-store-map > .container > p.section-subheading {
    display: block;
    width: 100%;
    text-align: center;
}

/* Order form: remove the three-dot category menu (.dropnav-header-lined).
   It is present in all 14 orderforms/antler templates (store, cart, checkout,
   domain pages...), so it is hidden here in one place rather than editing
   every vendor template.
   Navigation is not lost: the main navbar covers the product categories
   (Domain / Hosting / Website / Security / Reseller), and phones and tablets
   still get the separate .categories-collapsed selector.
   display:none (not visibility/opacity) also removes it from the tab order
   and the accessibility tree, so the hidden dropdown cannot be focused. */
html body .dropnav-header-lined,
html body #order-standard_cart .dropnav-header-lined {
    display: none !important;
}