/* =====================================================================
   AcrossX theme layer
   Based on the DotCreative HTML design: Poppins type, dark charcoal
   sections, angled section edges, pill buttons. Accent colour is the
   gold from the AcrossX logo.
   Loaded after main.css so it overrides the base storefront theme.
   ===================================================================== */

:root {
    --ax-accent: #de9b2a;          /* logo gold: fills, accents on dark */
    --ax-accent-dark: #c4841a;
    --ax-accent-text: #a8730f;     /* gold dark enough for text on white */
    --ax-accent-soft: #fbf3e4;
    --ax-on-accent: #17191e;       /* text colour on gold fills */
    --ax-green: #f0c25e;           /* light gold */
    --ax-teal: #de9b2a;            /* gold */
    --ax-orange: #b46d17;          /* bronze */
    --ax-navy: #17191e;            /* charcoal, matches logo black */
    --ax-navy-2: #1f2228;
    --ax-navy-3: #2b2f37;
    --ax-heading: #323232;
    --ax-text: #7f7f7f;
    --ax-muted-bg: #f2f2f2;
    --ax-border: #e1e1e1;
    --ax-font: "Poppins", sans-serif;

    /* Legacy variables used by inline styles across the storefront */
    --sh-navy: var(--ax-navy);
    --sh-navy-mid: var(--ax-accent-text);
    --sh-navy-light: var(--ax-accent-soft);
    --sh-gold: var(--ax-accent);
    --sh-gold-dark: var(--ax-accent-dark);
    --sh-gold-light: var(--ax-accent-soft);
    --sh-gray: var(--ax-text);
    --sh-light: #f7f7f7;
    --sh-border: var(--ax-border);

    --bs-primary: var(--ax-accent);
    --bs-primary-rgb: 222, 155, 42;
    --bs-link-color: var(--ax-accent-text);
    --bs-link-hover-color: var(--ax-accent-dark);
    --bs-body-font-family: var(--ax-font);
    --bs-font-sans-serif: var(--ax-font);
}

/* ---------- Base typography ---------- */
body {
    font-family: var(--ax-font);
    font-weight: 300;
    color: var(--ax-text);
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ax-font);
    font-weight: 500;
    color: var(--ax-heading);
}

strong, b, .fw-bold, .fw-semibold { font-weight: 600 !important; }
.fw-black { font-weight: 700 !important; }

a { color: var(--ax-accent-text); transition: color .2s ease; }
a:hover { color: var(--ax-accent-dark); }

::selection { background: var(--ax-accent); color: var(--ax-on-accent); }

.text-primary { color: var(--ax-accent-text) !important; }
.bg-primary { background-color: var(--ax-accent) !important; }
.border-primary { border-color: var(--ax-accent) !important; }
.text-gold { color: var(--ax-accent) !important; }

/* ---------- Buttons ---------- */
.btn {
    font-family: var(--ax-font);
}

.btn-primary,
.btn-primary:focus {
    background-color: var(--ax-accent);
    border-color: var(--ax-accent);
    color: var(--ax-on-accent);
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--ax-accent-dark) !important;
    border-color: var(--ax-accent-dark) !important;
    color: #fff !important;
}

.btn-outline-primary {
    border-color: var(--ax-accent);
    color: var(--ax-accent-text);
}

.btn-outline-primary:hover {
    background: var(--ax-accent);
    border-color: var(--ax-accent);
    color: var(--ax-on-accent);
}

.btn-soft-primary {
    background: var(--ax-accent-soft) !important;
    color: var(--ax-accent-text) !important;
}

/* Template-style uppercase pill button */
.ax-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 4px solid var(--ax-accent);
    border-radius: 50px;
    background: transparent;
    color: var(--ax-navy);
    font-family: var(--ax-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    line-height: 1.6em;
    padding: 16px 44px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .2s linear;
    white-space: nowrap;
}

.ax-btn:hover { background: var(--ax-accent); color: var(--ax-on-accent); }

.ax-btn-fill { background: var(--ax-accent); color: var(--ax-on-accent); }
.ax-btn-fill:hover { background: var(--ax-navy); border-color: var(--ax-navy); color: #fff; }
.ax-ds .ax-btn-fill:hover { background: #fff; border-color: #fff; color: var(--ax-navy); }
.ax-ds .ax-btn:not(.ax-btn-fill):not(.ax-btn-white) { color: #fff; }

.ax-btn-light { border-color: #fff; color: #fff; }
.ax-btn-light:hover { background: #fff; color: var(--ax-navy); }

.ax-btn-white { background: #fff; border-color: #fff; color: var(--ax-navy); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.ax-btn-white:hover { background: var(--ax-navy); border-color: var(--ax-navy); color: #fff; }

.ax-btn-sm { padding: 10px 26px; font-size: 11px; border-width: 3px; }

/* ---------- Sections ---------- */
.ax-section { padding: 100px 0; position: relative; }
.ax-section-sm { padding: 70px 0; position: relative; }
.ax-ls { background: #fff; }
.ax-ms { background: var(--ax-muted-bg); }
.ax-ds { background: var(--ax-navy); color: #9a9a9a; }
.ax-ds h1, .ax-ds h2, .ax-ds h3, .ax-ds h4, .ax-ds h5, .ax-ds h6 { color: #fff; }

/* angled edges like the template */
.ax-angle-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), 0 100%); padding-bottom: 170px; }
.ax-angle-top { clip-path: polygon(0 70px, 100% 0, 100% 100%, 0 100%); padding-top: 170px; }
.ax-angle-both { clip-path: polygon(0 70px, 100% 0, 100% calc(100% - 70px), 0 100%); padding-top: 170px; padding-bottom: 170px; }

@media (max-width: 767.98px) {
    .ax-section { padding: 70px 0; }
    .ax-angle-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%); padding-bottom: 100px; }
    .ax-angle-top { clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%); padding-top: 100px; }
    .ax-angle-both { clip-path: polygon(0 30px, 100% 0, 100% calc(100% - 30px), 0 100%); padding-top: 100px; padding-bottom: 100px; }
}

/* section heading */
.ax-heading { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.ax-heading .ax-kicker {
    display: inline-block;
    color: var(--ax-accent-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.ax-heading h2 {
    font-size: 36px;
    line-height: 1.3;
    font-weight: 500;
    margin-bottom: 18px;
}
.ax-heading h2 span { color: var(--ax-accent-text); }
.ax-ds .ax-heading .ax-kicker, .ax-ds .ax-heading h2 span { color: var(--ax-accent); }
.ax-ds .ax-heading p { color: #a3a7ae; }
.ax-heading p { font-size: 15px; line-height: 1.9; margin: 0; }
.ax-heading.text-start { text-align: left; margin-left: 0; }

@media (max-width: 767.98px) {
    .ax-heading { margin-bottom: 40px; }
    .ax-heading h2 { font-size: 26px; }
}

/* vertical dashed pink divider */
.ax-dash {
    display: block;
    width: 2px;
    height: 70px;
    margin: 0 auto;
    background: repeating-linear-gradient(to bottom, var(--ax-accent) 0 8px, transparent 8px 14px);
}
.ax-dash-light { background: repeating-linear-gradient(to bottom, #fff 0 8px, transparent 8px 14px); }

/* ---------- Icon feature cards (template "services" grid) ---------- */
.ax-feature { text-align: center; padding: 10px 18px 30px; }
.ax-feature .ax-icon {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    margin: 0 auto 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 8px solid #f2f2f2;
    box-shadow: 0 0 0 1px var(--ax-border);
    font-size: 34px;
    color: var(--ax-accent-text);
    transition: all .3s ease;
}
.ax-feature:hover .ax-icon { transform: translateY(-6px); border-color: var(--ax-accent-soft); }
.ax-ds .ax-feature .ax-icon { color: var(--ax-accent); }
.ax-ds .ax-feature p { color: #a3a7ae; }
.ax-feature h3 { font-size: 21px; line-height: 1.4; margin-bottom: 12px; }
.ax-feature p { font-size: 14px; line-height: 1.9; margin: 0; }

.ax-ds .ax-feature .ax-icon { background: var(--ax-navy-2); border-color: var(--ax-navy-3); box-shadow: none; }

/* Big coloured circle icons (template about page) */
.ax-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 52px;
    box-shadow: 0 0 0 6px #fff, 0 0 0 8px currentColor;
}
.ax-circle.c1 { background: var(--ax-accent); color: var(--ax-accent); }
.ax-circle.c2 { background: var(--ax-navy); color: var(--ax-navy); }
.ax-circle.c3 { background: var(--ax-orange); color: var(--ax-orange); }
.ax-circle.c4 { background: var(--ax-accent); color: var(--ax-accent); }
.ax-circle i { color: #fff; }
.ax-circle.c1 i { color: var(--ax-on-accent); }

/* ---------- Numbered steps (template "Strategy / Design / Develop / Support") ---------- */
.ax-steps { position: relative; }
.ax-step { display: flex; align-items: center; gap: 40px; margin-bottom: 70px; }
.ax-step:last-child { margin-bottom: 0; }
.ax-step.reverse { flex-direction: row-reverse; text-align: right; }
.ax-step-title { flex: 1; display: flex; align-items: center; gap: 0; }
.ax-step.reverse .ax-step-title { justify-content: flex-start; flex-direction: row-reverse; }
.ax-step:not(.reverse) .ax-step-title { justify-content: flex-end; }
.ax-step-num { font-size: 120px; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.ax-step-title h3 { font-size: 34px; margin: 0 0 0 -18px; color: #fff; position: relative; z-index: 1; }
.ax-step.reverse .ax-step-title h3 { margin: 0 -18px 0 0; }
.ax-step-media {
    width: 190px;
    height: 190px;
    flex: 0 0 190px;
    border-radius: 50%;
    border: 10px solid var(--ax-navy-3);
    background: var(--ax-navy-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 62px;
}
.ax-step-text { flex: 1; font-size: 14px; line-height: 2; color: #9a9a9a; }
.ax-step-text p { margin: 0; }
.ax-n1 { color: var(--ax-accent); }
.ax-n2 { color: var(--ax-green); }
.ax-n3 { color: var(--ax-teal); }
.ax-n4 { color: var(--ax-orange); }

@media (max-width: 991.98px) {
    .ax-step, .ax-step.reverse { flex-direction: column; text-align: center; gap: 18px; }
    .ax-step-title, .ax-step.reverse .ax-step-title, .ax-step:not(.reverse) .ax-step-title { justify-content: center; flex-direction: row; }
    .ax-step-title h3, .ax-step.reverse .ax-step-title h3 { margin: 0 0 0 -14px; }
    .ax-step-num { font-size: 80px; }
    .ax-step-title h3 { font-size: 26px; }
    .ax-step-media { width: 140px; height: 140px; flex-basis: 140px; font-size: 46px; order: -1; }
}

/* ---------- Quote ---------- */
.ax-quote { text-align: center; max-width: 820px; margin: 0 auto; }
.ax-quote blockquote { background: none; border: 0; padding: 0; margin-left: 0; margin-right: 0;
    font-size: 26px; line-height: 1.5; color: var(--ax-heading); font-weight: 400; margin-bottom: 14px; }
.ax-quote cite { font-style: normal; font-size: 13px; }
.ax-quote cite span { color: var(--ax-accent-text); }

@media (max-width: 767.98px) { .ax-quote blockquote { font-size: 20px; } }

/* ---------- Cards / tiles ---------- */
.ax-card {
    background: #fff;
    border: 1px solid var(--ax-border);
    border-radius: 6px;
    padding: 40px 32px;
    height: 100%;
    transition: all .3s ease;
}
.ax-card:hover { border-color: var(--ax-accent); box-shadow: 0 20px 45px rgba(23, 25, 30, .08); transform: translateY(-4px); }
.ax-card h4 { font-size: 20px; margin-bottom: 12px; }
.ax-card p { font-size: 14px; line-height: 1.9; margin: 0; }

.ax-stat { text-align: center; }
.ax-stat .num { font-size: 54px; font-weight: 600; color: #fff; line-height: 1; }
.ax-stat .num span { color: var(--ax-accent); }
.ax-stat .lbl { margin-top: 12px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: #9a9a9a; }

/* category tile */
.ax-cat {
    display: block;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background: var(--ax-muted-bg);
    aspect-ratio: 1 / 1;
    text-decoration: none;
}
.ax-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ax-cat .ax-cat-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; color: #cfcfcf; }
.ax-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23, 25, 30, .85) 0%, rgba(23, 25, 30, 0) 60%); }
.ax-cat .ax-cat-label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px; text-align: center; }
.ax-cat .ax-cat-label h4 { color: #fff; font-size: 18px; margin: 0 0 4px; }
.ax-cat .ax-cat-label span { color: var(--ax-accent); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ax-cat:hover img { transform: scale(1.07); }

/* brand logo tile */
.ax-logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--ax-border);
    border-radius: 6px;
    transition: all .3s ease;
}
.ax-logo-tile img { max-height: 64px; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: all .3s ease; }
.ax-logo-tile:hover { border-color: var(--ax-accent); }
.ax-logo-tile:hover img { filter: none; opacity: 1; }

/* call to action band */
.ax-cta { background: var(--ax-accent); color: var(--ax-on-accent); padding: 70px 0; }
.ax-cta h3 { color: var(--ax-on-accent); font-size: 30px; margin-bottom: 8px; }
.ax-cta p { color: rgba(23, 25, 30, .8); margin: 0; }
.ax-cta .ax-btn { border-color: var(--ax-navy); color: var(--ax-navy); }
.ax-cta .ax-btn:hover, .ax-cta .ax-btn-fill { background: var(--ax-navy); color: #fff; }
.ax-cta .ax-btn-fill:hover { background: #fff; border-color: #fff; color: var(--ax-navy); }

/* ---------- Header ---------- */
.ax-header { background: var(--ax-navy); position: sticky; top: 0; z-index: 1040; box-shadow: 0 1px 0 rgba(255, 255, 255, .04); }
.ax-header .ax-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.ax-header .ax-logo img { max-height: 46px; width: auto; }
.ax-header .ax-logo-text { color: #fff; font-size: 26px; font-weight: 400; letter-spacing: -.01em; text-decoration: none; }
.ax-header .ax-logo-text b { font-weight: 600; color: #fff; }
.ax-header .ax-logo-text b span { color: var(--ax-accent); }

.ax-nav { display: flex; align-items: center; justify-content: center; flex: 1; }
.ax-nav > a,
.ax-nav > .dropdown > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 30px 14px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.ax-nav > a + a::before,
.ax-nav > .dropdown::before,
.ax-nav > a + .dropdown::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    opacity: .55;
}
.ax-nav > a + a::before { left: -2px; top: 50%; margin-top: -2px; }
.ax-nav > .dropdown { position: relative; }
.ax-nav > .dropdown::before { left: -2px; top: 50%; margin-top: -2px; }
.ax-nav > a:hover,
.ax-nav > a.active,
.ax-nav > .dropdown > a:hover,
.ax-nav > .dropdown > a.active { color: var(--ax-accent); }
.ax-nav .dropdown-toggle::after { display: none; }
.ax-nav .dropdown + a::before { left: -2px; top: 50%; margin-top: -2px; }

.ax-nav .dropdown-menu,
.ax-header .ax-tools .dropdown-menu {
    border: 0;
    border-top: 3px solid var(--ax-accent);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
    padding: 12px 0;
    margin-top: 0 !important;
}
.ax-nav .dropdown-item {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ax-heading);
    padding: 10px 24px;
}
.ax-nav .dropdown-item:hover { background: transparent; color: var(--ax-accent-text) !important; }

.ax-tools { display: flex; align-items: center; gap: 6px; }
.ax-tool {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    position: relative;
    transition: all .2s ease;
}
.ax-tool:hover { background: rgba(255, 255, 255, .08); color: var(--ax-accent); }
.ax-tool .ax-badge {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--ax-accent);
    color: var(--ax-on-accent);
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    padding: 0 4px;
}
.ax-phone { color: #fff; font-size: 18px; font-weight: 300; white-space: nowrap; text-decoration: none; margin-left: 10px; }
.ax-phone span { color: var(--ax-accent); }
.ax-phone:hover { color: var(--ax-accent); }

.ax-header .dropdown-menu .dropdown-item { font-size: 13px; padding: 9px 20px; }
.ax-header .dropdown-menu .dropdown-item:hover { background: var(--ax-accent-soft); color: var(--ax-accent-text) !important; }

.ax-topbar { background: var(--ax-navy-2); color: #9a9a9a; font-size: 12px; padding: 8px 0; }
.ax-topbar a { color: #9a9a9a; text-decoration: none; }
.ax-topbar a:hover { color: var(--ax-accent); }
.ax-topbar i { color: var(--ax-accent); margin-right: 6px; }

@media (max-width: 1199.98px) {
    .ax-header .ax-header-inner { min-height: 70px; }
    .ax-header .ax-logo img { max-height: 38px; }
}

/* mobile drawer */
.ax-drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: 310px;
    max-width: 86vw;
    height: 100vh;
    background: var(--ax-navy);
    z-index: 9999;
    transition: left .35s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
}
.ax-drawer.open { left: 0; }
.ax-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ax-drawer-head img { max-height: 36px; }
.ax-drawer-close { background: none; border: 0; color: #fff; font-size: 22px; }
.ax-drawer nav a {
    display: block;
    padding: 14px 24px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.ax-drawer nav a:hover, .ax-drawer nav a.active { color: var(--ax-accent); }
.ax-drawer .ax-drawer-body { padding: 24px; }
.ax-drawer .form-control { background: var(--ax-navy-2); border: 1px solid var(--ax-navy-3); color: #fff; border-radius: 50px 0 0 50px; padding: 11px 18px; }
.ax-drawer .form-control::placeholder { color: #8a8f98; }
.ax-drawer .ax-search-btn { background: var(--ax-accent); color: var(--ax-on-accent); border: 0; border-radius: 0 50px 50px 0; padding: 0 18px; }
.ax-drawer-info { color: #9a9a9a; font-size: 13px; line-height: 2; }
.ax-drawer-info i { color: var(--ax-accent); width: 18px; }
.ax-overlay { position: fixed; inset: 0; background: rgba(15, 19, 25, .6); z-index: 9998; display: none; }
.ax-overlay.open { display: block; }

/* ---------- Page title band (template inner pages) ---------- */
.ax-page-title {
    position: relative;
    background-color: var(--ax-muted-bg);
    background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px);
    background-size: 6px 6px;
    text-align: center;
    padding: 70px 0 120px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 50% 100%, 0 calc(100% - 50px));
}
.ax-page-title .ax-kicker { display: inline-block; color: var(--ax-accent-text); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 10px; }
.ax-page-title h1 { font-size: 48px; line-height: 1.2; font-weight: 500; color: var(--ax-heading); margin-bottom: 14px; }
.ax-page-title h1 span { color: var(--ax-accent-text); }
.ax-page-title p { max-width: 640px; margin: 0 auto 18px; font-size: 15px; line-height: 1.9; }
.ax-crumbs { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 0; padding: 0; margin: 0; }
.ax-crumbs li { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ax-heading); }
.ax-crumbs li a { color: var(--ax-accent-text); text-decoration: none; }
.ax-crumbs li + li::before { content: "•"; margin: 0 14px; color: var(--ax-heading); }
.ax-page-title .ax-title-actions { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (max-width: 767.98px) {
    .ax-page-title { padding: 50px 0 80px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 50% 100%, 0 calc(100% - 26px)); }
    .ax-page-title h1 { font-size: 30px; }
}

/* legacy breadcrumb partial uses the same look */
.gstore-breadcrumb { background: var(--ax-muted-bg) !important; }

/* ---------- Home hero ---------- */
.ax-hero {
    position: relative;
    background: var(--ax-navy);
    color: #fff;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
    padding: 120px 0 200px;
}
.ax-hero .ax-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .18; }
.ax-hero .ax-hero-rings { position: absolute; left: 50%; top: 46%; width: 560px; height: 560px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .06); pointer-events: none; }
.ax-hero .ax-hero-rings::before,
.ax-hero .ax-hero-rings::after { content: ""; position: absolute; inset: 60px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .05); }
.ax-hero .ax-hero-rings::after { inset: 130px; border-color: rgba(222, 155, 42, .35); }
.ax-hero .container { position: relative; z-index: 2; }
.ax-hero .ax-kicker { color: var(--ax-accent); font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; display: inline-block; margin-bottom: 22px; }
.ax-hero h1 { color: #fff; font-size: 64px; line-height: 1.12; font-weight: 600; margin-bottom: 24px; letter-spacing: -.01em; }
.ax-hero h1 span { color: var(--ax-accent); }
.ax-hero p.lead { color: #b9bec6; font-size: 18px; font-weight: 300; line-height: 1.8; max-width: 680px; margin: 0 auto 40px; }
.ax-hero .swiper-slide { text-align: center; }
.ax-hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: #fff; display: flex; align-items: center; justify-content: center; }
.ax-hero-nav:hover { background: var(--ax-accent); }
.ax-hero-prev { left: 24px; }
.ax-hero-next { right: 24px; }
.ax-hero-dots { position: absolute; left: 0; right: 0; bottom: 120px; z-index: 3; display: flex; justify-content: center; gap: 10px; }
.ax-hero-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .25); cursor: pointer; transition: all .2s ease; }
.ax-hero-dots span.active { background: var(--ax-accent); transform: scale(1.3); }
.ax-hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 34px; font-size: 13px; color: #b9bec6; }
.ax-hero-trust i { color: var(--ax-accent); margin-right: 6px; }
.ax-mouse { display: block; width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 14px; margin: 50px auto 0; position: relative; }
.ax-mouse::after { content: ""; position: absolute; left: 50%; top: 8px; width: 2px; height: 8px; margin-left: -1px; border-radius: 2px; background: #fff; animation: axScroll 1.6s infinite; }
@keyframes axScroll { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(12px); } }

@media (max-width: 991.98px) {
    .ax-hero { padding: 90px 0 150px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%); }
    .ax-hero h1 { font-size: 42px; }
    .ax-hero-nav { display: none; }
    .ax-hero-dots { bottom: 80px; }
}

@media (max-width: 575.98px) {
    .ax-hero h1 { font-size: 32px; }
    .ax-hero p.lead { font-size: 15px; }
    .ax-hero .ax-hero-rings { width: 340px; height: 340px; }
}

/* ---------- Footer ---------- */
.ax-footer {
    background: var(--ax-navy);
    color: #9a9a9a;
    text-align: center;
    position: relative;
    width: 100%;
    clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%);
    padding: 140px 0 60px;
    margin-top: 40px;
}
.ax-footer .ax-footer-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--ax-navy-3); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 26px; }
.ax-footer .ax-footer-mark img { max-width: 40px; max-height: 40px; }
.ax-footer .ax-footer-logo img { max-height: 120px; }
.ax-footer .ax-footer-about { max-width: 620px; margin: 22px auto 30px; font-size: 14px; line-height: 1.9; }
.ax-socials { display: flex; justify-content: center; gap: 12px; }
.ax-socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ax-navy-3);
    color: #fff;
    font-size: 13px;
    transition: all .2s ease;
}
.ax-socials a:hover { background: var(--ax-accent); color: var(--ax-on-accent); }
.ax-footer-cols { margin-top: 60px; padding-top: 50px; border-top: 1px solid rgba(255, 255, 255, .06); text-align: left; }
.ax-footer-cols h6 { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px; }
.ax-footer-cols ul { list-style: none; padding: 0; margin: 0; }
.ax-footer-cols li { margin-bottom: 10px; font-size: 14px; }
.ax-footer-cols li a { color: #9a9a9a; text-decoration: none; }
.ax-footer-cols li a:hover { color: var(--ax-accent); }
.ax-footer-cols .ax-contact li { display: flex; gap: 10px; align-items: flex-start; }
.ax-footer-cols .ax-contact i { color: var(--ax-accent); margin-top: 7px; font-size: 12px; width: 14px; }
.ax-copyright { width: 100%; background: var(--ax-accent); color: var(--ax-on-accent); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 18px 0; }
.ax-copyright a { color: var(--ax-on-accent); text-decoration: underline; }
.ax-copyright p, .ax-copyright div { margin: 0; color: var(--ax-on-accent); }
.ax-copyright img { max-height: 26px; }

@media (max-width: 767.98px) {
    .ax-footer { clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%); padding: 90px 0 40px; }
    .ax-footer-cols { text-align: center; }
    .ax-footer-cols .ax-contact li { justify-content: center; }
}

/* ---------- Forms ---------- */
.form-control, .form-select { font-family: var(--ax-font); }
.form-control:focus, .form-select:focus { border-color: var(--ax-accent); box-shadow: 0 0 0 .2rem rgba(222, 155, 42, .2); }
.form-check-input:checked { background-color: var(--ax-accent); border-color: var(--ax-accent); }

.ax-form .form-control,
.ax-form .form-select {
    background: var(--ax-muted-bg);
    border: 1px solid transparent;
    border-radius: 0;
    padding: 14px 20px;
    font-size: 14px;
}
.ax-form .form-control:focus,
.ax-form .form-select:focus { background: #fff; border-color: var(--ax-accent); }
.ax-form label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ax-heading); margin-bottom: 8px; }

/* ---------- Contact ---------- */
.ax-contact-item { text-align: center; padding: 10px 20px; }
.ax-contact-item .ax-icon { width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; background: var(--ax-accent-soft); color: var(--ax-accent-text); font-size: 24px; }
.ax-contact-item h5 { font-size: 18px; margin-bottom: 8px; }
.ax-contact-item p, .ax-contact-item a { font-size: 14px; color: var(--ax-text); margin: 0; word-break: break-word; }
.ax-contact-item a:hover { color: var(--ax-accent-text); }

/* ---------- Storefront component restyle (shop, product, cart, account) ---------- */
.vertical-product-card,
.horizontal-product-card,
.gstore-product-quick-view {
    border: 1px solid var(--ax-border) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transition: all .3s ease;
}
.vertical-product-card:hover,
.horizontal-product-card:hover { border-color: var(--ax-accent) !important; box-shadow: 0 20px 40px rgba(23, 25, 30, .08) !important; }
.vertical-product-card .card-title,
.vertical-product-card h6,
.vertical-product-card .card-title a { font-family: var(--ax-font); font-weight: 500 !important; color: var(--ax-heading); }
.vertical-product-card .card-title a:hover { color: var(--ax-accent-text); }
.vertical-product-card .price,
.vertical-product-card .text-secondary { color: var(--ax-accent-text) !important; }

.gshop-sidebar .sidebar-widget,
.sidebar-widget {
    border-radius: 6px !important;
}
.sidebar-widget .widget-title,
.gshop-sidebar .widget-title {
    font-family: var(--ax-font);
    font-weight: 500;
    color: var(--ax-heading);
}

.pagination .page-link { border-radius: 50% !important; margin: 0 4px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: var(--ax-heading); border-color: var(--ax-border); }
.pagination .page-item.active .page-link { background: var(--ax-navy); border-color: var(--ax-navy); color: #fff; }
.pagination .page-link:hover { background: var(--ax-accent); border-color: var(--ax-accent); color: var(--ax-on-accent); }

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active { background: var(--ax-accent) !important; color: var(--ax-on-accent) !important; border-color: var(--ax-accent) !important; }

.badge.bg-primary, .badge.bg-secondary { background: var(--ax-accent) !important; color: var(--ax-on-accent) !important; }

.scroll-top-btn { background: var(--ax-accent) !important; color: var(--ax-on-accent) !important; }

/* customer dashboard sidebar */
.customer-sidebar .nav-link.active,
.user-sidebar .active { color: var(--ax-accent-text) !important; }

.ax-quote blockquote::before, .ax-quote blockquote::after { display: none; }
.ax-copyright .container { margin-left: auto !important; margin-right: auto !important; }

/* =====================================================================
   DotCreative template integration (.dc wrappers)
   ===================================================================== */
.dc .btn-maincolor { color: var(--ax-on-accent); }
.dc .btn-maincolor:hover { color: #fff; }

/* header */
.ax-dc-header { position: relative; z-index: 1040; }
.ax-dc-header .page_header .logo img { max-height: 46px; width: auto; }
.ax-header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.ax-htool {
    width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px; position: relative;
}
.ax-htool:hover { color: var(--ax-accent); }
.ax-htool .ax-badge {
    position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
    background: var(--ax-accent); color: var(--ax-on-accent); font-size: 10px; font-weight: 600; line-height: 18px; text-align: center;
}
.ax-header-tools .header_phone { margin-left: 14px; }
.ax-header-tools .header_phone h6 { margin: 0; white-space: nowrap; }
.ax-dc-header .dropdown-menu { font-family: var(--ax-font); }
.ax-dc-header .dropdown-menu .dropdown-item { font-size: 13px; padding: 9px 20px; }
.ax-dc-header .dropdown-menu .dropdown-item:hover { background: var(--ax-accent-soft); color: var(--ax-accent-text) !important; }

/* service icons in the template's grey ring */
.dc .ax-icon-media {
    width: 120px; height: 120px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #f2f2f2; box-shadow: inset 0 0 0 6px #fff, 0 0 0 1px #e1e1e1; font-size: 40px;
}

/* gallery carousel */
.ax-gallery-wrap { position: relative; }
.ax-gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ax-gallery-track::-webkit-scrollbar { display: none; }
.ax-gallery-track .item-gallery { flex: 0 0 20%; scroll-snap-align: start; margin: 0; }
.ax-gallery-track .item-gallery .item-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 1199.98px) { .ax-gallery-track .item-gallery { flex-basis: 33.333%; } }
@media (max-width: 575.98px) { .ax-gallery-track .item-gallery { flex-basis: 50%; } }
.ax-gal-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 60px; height: 60px; border-radius: 50%; border: 0;
    background: var(--ax-accent); color: var(--ax-on-accent); font-size: 22px;
}
.ax-gal-prev { left: -30px; padding-left: 26px; }
.ax-gal-next { right: -30px; padding-right: 26px; }

/* quotes */
.dc .ax-quote-mark img { object-fit: contain; background: #fff; padding: 18px; }
.ax-quote-dots { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.ax-quote-dots .owl-dot { border: 0; background: transparent; padding: 4px; }
.ax-quote-dots .owl-dot span { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.ax-quote-dots .owl-dot.active span { background: var(--ax-accent); }

/* how-we-work cards */
.dc .ax-blog-row { margin: 0; }
.dc .ax-blog-row > [class*="col-"] { padding: 2px; }
.dc .ax-box-text { font-size: 14px; line-height: 24px; margin-bottom: 14px; }

/* page title extras */
.dc .page_title .ax-title-sub { max-width: 640px; margin: 18px auto 0; }
.dc .page_title .ax-title-actions { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* footer */
.ax-dc-footer .page_footer { margin-top: 40px; }
.ax-footer-mark {
    width: 70px; height: 70px; border-radius: 50%; background: #1f2732; display: inline-flex; align-items: center; justify-content: center;
    margin-top: -70px; position: relative; z-index: 2;
}
.ax-footer-mark img { max-width: 42px; max-height: 42px; }
.ax-footer-logo img { max-height: 58px; margin: 18px 0 6px; }
.ax-footer-links { list-style: none; padding: 0; margin: 0 0 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; }
.ax-footer-links a { color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.ax-footer-links a:hover { color: var(--ax-navy); }

/* the template was built on Bootstrap 4, where grid columns are position: relative */
.dc [class*="col-"] { position: relative; }

/* the template's body rules land on every .dc wrapper; wrappers must not clip or scroll */
.dc { overflow: visible; min-height: 0; }
.ax-dc-header { background: transparent; }

/* plain icon buttons inside .dc must not get the template's big pill button style */
.dc .ax-htool,
.dc .search-btn,
.dc .ax-gal-nav,
.dc .ax-quote-dots .owl-dot {
    border-radius: 50%;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
    font-weight: 400;
}
.dc .ax-htool { padding: 0; border: 0; background: transparent; color: #fff; font-size: 15px; width: 40px; height: 40px; }
.dc .ax-htool:hover { background: transparent; color: var(--ax-accent); }
.dc .search-btn { padding: 0; border: 0; color: #1f2732; font-size: 14px; }
.dc .search-box { display: flex; align-items: center; width: auto; }
.dc .ax-gal-nav { border: 0; color: var(--ax-on-accent); }
.dc .ax-quote-dots .owl-dot { padding: 4px; border: 0; background: transparent; width: auto; height: auto; }
.dc .header_phone h6 { font-weight: 200 !important; font-size: 24px; color: #fff; }

/* match the template's Bootstrap 4 container and clip its decorative overflow */
@media (min-width: 1200px) { .dc .container { max-width: 1170px; } }
.dc.ax-home, .ax-dc-footer, .dc.ax-page { overflow-x: clip; }
.ax-dc-footer .margin-negative { width: 70px; height: 70px; object-fit: contain; padding: 14px; border-radius: 50%; background: #1f2732; }

/* Bootstrap 4 alignment class names used by the template markup */
.dc .text-right { text-align: right !important; }
.dc .text-left { text-align: left !important; }
@media (min-width: 576px) { .dc .text-sm-center { text-align: center !important; } .dc .text-sm-right { text-align: right !important; } }
@media (min-width: 992px) { .dc .text-lg-right { text-align: right !important; } .dc .text-lg-left { text-align: left !important; } }
@media (min-width: 1200px) { .dc .text-xl-right { text-align: right !important; } }
@media (max-width: 991.98px) { .dc .step-left-part.text-right, .dc .step-right-part, .dc .text-right .step-right-part { text-align: center !important; } }

/* brand logo tiles */
.dc .ax-brand-logo { display: flex; align-items: center; justify-content: center; height: 140px; background: #fff; border: 1px solid #e1e1e1; padding: 20px; margin-bottom: 20px; transition: border-color .2s ease; }
.dc .ax-brand-logo img { max-height: 90px; max-width: 100%; object-fit: contain; }
.dc .ax-brand-logo:hover { border-color: var(--ax-accent); }
.dc .ax-brand-logo .fa { font-size: 40px; color: #ccc; }

/* breadcrumbs: undo the storefront's Bootstrap 5 breadcrumb tweaks inside the template band */
.dc .breadcrumb, .dc .breadcrumb * { border: 0 !important; text-decoration: none !important; box-shadow: none !important; background-image: none !important; }
.dc .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.dc .breadcrumb-item + .breadcrumb-item::before { float: none; transform: none; -webkit-transform: none; vertical-align: middle; }
@media (max-width: 991.98px) { .dc .search-box { display: none; } }

/* =====================================================================
   Shop pages in the DotCreative style
   ===================================================================== */
/* product card (mirrors the template's ul.products .product) */
.ax-product-card { position: relative; text-align: center; margin-bottom: 50px; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.ax-product-card .ax-product-link { display: block; text-decoration: none; color: inherit; }
.ax-product-card .media-product { overflow: hidden; background: #f2f2f2; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.ax-product-card .media-product img { width: 100%; height: 100%; object-fit: contain; padding: 22px; transition: transform .2s ease-in-out; }
.ax-product-card .media-product img:hover { transform: scale(1.1); }
.ax-product-card h6 { font-family: var(--ax-font); font-size: 20px; font-weight: 500; line-height: 1.25; margin: 24px 0 10px; color: #1f2732; }
.ax-product-card .ax-product-link:hover h6 { color: var(--ax-accent); }
.ax-product-card .price { display: block; color: #1f2732; font-weight: 500; margin: 6px 0 22px; min-height: 20px; }
.ax-product-card .price .h4, .ax-product-card .price .text-primary { font-size: 16px !important; font-weight: 500 !important; color: #1f2732 !important; }
.ax-product-card .onsale {
    background: var(--ax-accent); color: var(--ax-on-accent); position: absolute; top: 10px; left: 6px; z-index: 2;
    padding: .3em 1em; font-size: 12px; font-weight: 500;
}
.ax-product-card .onsale::before {
    content: ""; position: absolute; left: 0; bottom: -10px; border-style: solid; border-width: 0 10px 10px 0;
    border-color: transparent var(--ax-accent-dark) transparent transparent;
}
.ax-product-card .button {
    display: inline-block; background: #f4f4f5; border-radius: 50px; color: #1f2732; font-family: var(--ax-font);
    font-size: 12px; font-weight: 700; letter-spacing: .2em; line-height: 1.6em; padding: 14px 30px; text-transform: uppercase; text-decoration: none;
    transition: all .2s linear;
}
.ax-product-card .button:hover { background: var(--ax-accent); color: var(--ax-on-accent); }
.ax-product-card .add_to_cart_button::before {
    content: "\f291"; font-family: "FontAwesome"; font-size: 15px; color: var(--ax-accent); display: inline-block; margin-right: .6em; position: relative; top: .05em;
}
.ax-product-card .add_to_cart_button:hover::before { color: var(--ax-on-accent); }

/* shop sidebar widgets in the template style */
.dc .ax-shop .gshop-sidebar { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
.dc .ax-shop .sidebar-widget { background: transparent !important; padding: 0 0 40px !important; border: 0 !important; }
.dc .ax-shop .sidebar-widget .widget-title h6 { font-size: 20px; font-weight: 500; color: #1f2732; }
.dc .ax-shop .sidebar-widget .hr-line { display: none !important; }
.dc .ax-shop .form-check { padding: 10px 0 10px 1.6em; margin: 0 !important; border-bottom: 1px solid #e1e1e1; }
.dc .ax-shop .form-check-label { font-size: 14px; color: #7f7f7f; }
.dc .ax-shop .form-check-input:checked + .form-check-label { color: #1f2732; font-weight: 500; }
.dc .ax-shop .search-form .form-control { background: #f4f4f5; border: 0 !important; border-radius: 0 !important; height: 60px; text-align: center; letter-spacing: .2em; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.dc .ax-shop .listing-top { background: #f4f4f5 !important; box-shadow: none !important; border-radius: 0 !important; }
.dc .ax-shop .sidebar-widget .btn, .dc .ax-shop .offcanvas-footer .btn { border-radius: 50px; padding: 14px 20px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; border: 0; }
@media (min-width: 992px) { .ax-shop-sidebar { position: sticky; top: 20px; } }

/* pagination like the template's round page links */
.dc .pagination .page-link { border-radius: 50% !important; width: 46px; height: 46px; margin: 0 4px; display: flex; align-items: center; justify-content: center; border: 1px solid #e1e1e1; color: #1f2732; font-weight: 500; }
.dc .pagination .page-item.active .page-link { background: #1f2732; border-color: #1f2732; color: #fff; }
.dc .pagination .page-item:first-child .page-link, .dc .pagination .page-item:last-child .page-link { background: var(--ax-accent); border-color: var(--ax-accent); color: var(--ax-on-accent); }
.ax-product-card h6, .dc .ax-product-card h6 { color: #1f2732 !important; }
.ax-product-card .ax-product-link:hover h6 { color: var(--ax-accent) !important; }
.ax-product-card .button, .dc .ax-product-card .button { color: #1f2732 !important; border: 0; }
.ax-product-card .button:hover, .dc .ax-product-card .button:hover { color: var(--ax-on-accent) !important; }

/* filter radios: plain native inputs, template-like list rows */
.dc .ax-shop input[type="radio"] + label::before, .dc .ax-shop input[type="checkbox"] + label::before { display: none !important; }
.dc .ax-shop .form-check-input { position: static; opacity: 1; margin: 0 10px 0 -1.6em; float: none; width: 14px; height: 14px; }
.dc .ax-shop .form-check { display: flex; align-items: center; }
.dc .ax-shop .form-check-label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; text-align: left; padding: 0; margin: 0; color: #7f7f7f; }

/* product page */
.dc .gstore-breadcrumb .breadcrumb-content h2 { font-family: var(--ax-font); text-transform: none; font-weight: 500; color: #1f2732; }
.dc .gstore-breadcrumb .breadcrumb-item { font-weight: 700 !important; }
:root {
    --bs-secondary: var(--ax-accent);
    --bs-secondary-rgb: 222, 155, 42;
}
.text-secondary { color: var(--ax-accent-text) !important; }
.bg-secondary, .btn-secondary { background-color: var(--ax-accent) !important; border-color: var(--ax-accent) !important; color: var(--ax-on-accent) !important; }
.btn-outline-secondary { border-color: var(--ax-accent) !important; color: var(--ax-accent-text) !important; }
.related-product-slider .ax-product-card, .swiper .ax-product-card { margin-bottom: 0; }

/* cart in the template's shop-cart style */
.cart-section .cart-table-wrapper { box-shadow: none !important; border-radius: 0 !important; background: transparent !important; }
.cart-section .cart-table thead th {
    background: transparent !important; color: #1f2732; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    border: 0 !important; border-bottom: 1px solid #e1e1e1 !important; padding: 18px 12px;
}
.cart-section .cart-table tbody td { border: 0 !important; border-bottom: 1px solid #e1e1e1 !important; padding: 20px 12px; font-weight: 500; color: #1f2732; }
.cart-section .cart-table tbody td img { background: #f2f2f2; padding: 8px; width: 80px; height: 80px; object-fit: contain; }
.cart-section .product-qty, .cart-section .cart-table .product-qty { background: #f4f4f5 !important; border: 0 !important; border-radius: 0 !important; }
.cart-section .product-qty button, .cart-section .product-qty input { background: transparent !important; border: 0 !important; }
.cart-section .cart-summery { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; }
.cart-section .cart-summery h5 { font-size: 24px; font-weight: 500; }
.cart-section .cart-summery td { border-bottom: 1px solid #e1e1e1; padding: 12px 6px !important; font-size: 14px !important; }
.cart-section .cart-summery .text-primary { color: var(--ax-accent-text) !important; }
.cart-section .btn, .checkout-section .btn-primary, .checkout-section .btn-lg {
    border-radius: 50px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .2em; text-transform: uppercase; padding: 18px 30px !important;
}
.cart-section .btn-outline-secondary { background: transparent !important; color: #1f2732 !important; border: 3px solid #1f2732 !important; }
.cart-section .btn-outline-secondary:hover { background: #1f2732 !important; color: #fff !important; }
.cart-item-card { border-radius: 0 !important; box-shadow: none !important; }
.dc .gstore-breadcrumb { overflow: visible !important; border: 0 !important; }

/* account login / register in the template's shop-account-login style */
.dc .ax-auth .form-group { margin-bottom: 20px; }
.dc .ax-auth .form-control { text-align: center; }
.dc .ax-auth-tabs { display: inline-flex; gap: 6px; background: #f4f4f5; border-radius: 50px; padding: 5px; }
.dc .ax-auth-tabs .auth-tab-btn {
    border: 0; background: transparent; color: #7f7f7f; border-radius: 50px; padding: 9px 26px;
    font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4;
}
.dc .ax-auth-tabs .auth-tab-btn.active { background: #1f2732; color: #fff; }
.dc .ax-password-toggle { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #9a9a9a; cursor: pointer; z-index: 5; }
.dc .ax-remember { display: inline-flex; align-items: center; gap: 8px; }
.dc .ax-remember input { width: 14px; height: 14px; margin: 0; }
.dc .ax-remember label { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #1f2732; margin: 0; }
.dc .ax-remember input + label::before { display: none !important; }
.dc .ax-notice { background: #f4f4f5; border-left: 4px solid var(--ax-accent); padding: 18px 24px; text-align: left; font-size: 14px; }
.dc .ax-notice-error { border-left-color: #e74c3c; color: #b42318; }
.dc .ax-file-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #7f7f7f; margin-bottom: 8px; }
.dc .ax-file-field .form-control { height: auto; padding: 16px; }
.dc .ax-auth textarea.form-control { min-height: 110px; height: 110px; }

/* checkout + account pages: flat template look (no rounded shadowed cards, grey fields) */
.checkout-section .section-card, .checkout-section .order-summary, .checkout-section .bg-white.rounded-4,
.ax-account .bg-white.rounded-4, .ax-account .rounded-4.border, .ax-account .card, .ax-account .bg-white.shadow-sm {
    border-radius: 0 !important; box-shadow: none !important; border-color: #e1e1e1 !important;
}
.checkout-section .form-control, .checkout-section .form-select,
.ax-account .form-control, .ax-account .form-select {
    background: #f4f4f5 !important; border: 1px solid transparent !important; border-radius: 0 !important; box-shadow: none !important;
    padding: 16px 20px !important; font-size: 14px;
}
.checkout-section .form-control:focus, .ax-account .form-control:focus { background: #fff !important; border-color: var(--ax-accent) !important; }
.checkout-section label, .ax-account label.fw-bold {
    font-size: 11px !important; font-weight: 700 !important; letter-spacing: .2em; text-transform: uppercase; color: #1f2732 !important; margin-left: 0 !important;
}
.checkout-section h5, .checkout-section .fs-5.fw-bold, .ax-account h5 { font-family: var(--ax-font); font-weight: 500 !important; }
.checkout-section .step-count { background: var(--ax-accent) !important; color: var(--ax-on-accent) !important; }
.checkout-section .btn, .ax-account .btn {
    border-radius: 50px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .2em; text-transform: uppercase;
}
.checkout-section .btn-lg, .checkout-section .btn-primary.w-100 { padding: 20px 30px !important; }

/* account sidebar menu like the template's dotted list */
.ax-account .customer-sidebar, .ax-account .user-sidebar, .ax-account aside .bg-white { background: transparent !important; border: 0 !important; }
.ax-account .nav-link, .ax-account .sidebar-nav a, .ax-account .customer-nav a {
    border-radius: 0 !important; border-bottom: 1px solid #e1e1e1; color: #7f7f7f !important; font-weight: 400 !important; padding: 13px 0 13px 18px !important; position: relative; background: transparent !important;
}
.ax-account .nav-link::before, .ax-account .sidebar-nav a::before, .ax-account .customer-nav a::before {
    content: ""; position: absolute; left: 2px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--ax-accent);
}
.ax-account .nav-link.active, .ax-account .sidebar-nav a.active, .ax-account .customer-nav a.active { color: #1f2732 !important; font-weight: 500 !important; }
.ax-account .nav-link i, .ax-account .sidebar-nav a i, .ax-account .customer-nav a i { display: none; }
.ax-account .account-nav { background: transparent !important; border: 0 !important; padding: 0 !important; }
.ax-account .account-nav-menu li a {
    display: block; border-radius: 0 !important; border-bottom: 1px solid #e1e1e1; color: #7f7f7f !important; font-weight: 400 !important;
    padding: 13px 0 13px 18px !important; position: relative; background: transparent !important; box-shadow: none !important; margin: 0 !important;
}
.ax-account .account-nav-menu li a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--ax-accent); }
.ax-account .account-nav-menu li a.active { color: #1f2732 !important; font-weight: 500 !important; }
.ax-account .account-nav-menu li a i { display: none; }
.wishlist-table thead th, .wishlist-table th {
    background: transparent !important; color: #1f2732; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    border: 0 !important; border-bottom: 1px solid #e1e1e1 !important; padding: 18px 12px;
}
.wishlist-table td { border: 0 !important; border-bottom: 1px solid #e1e1e1 !important; }
.ax-account table thead th, .ax-account table thead { background: transparent !important; }
.ax-account table thead th { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid #e1e1e1 !important; }
.dc .ax-shop .form-check-label .text-truncate { max-width: none !important; white-space: normal; }
.ax-product-card h6 { min-height: 2.5em; display: flex; align-items: center; justify-content: center; }
.dc .ax-category-tile .item-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* sign-in popup */
.ax-login-modal { border: 0; border-radius: 0; overflow: hidden; position: relative; }
.ax-login-modal .ax-modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .1); color: #fff; font-size: 16px; letter-spacing: 0; line-height: 1; }
.ax-login-modal .ax-modal-close:hover { background: var(--ax-accent); color: var(--ax-on-accent); }
.ax-login-modal-head { padding: 36px 30px 30px; background-color: #1f2732; }
.ax-login-modal-head h4 { color: #fff; font-size: 30px; margin: 14px 0 6px; }
.ax-login-modal-head p { color: #9a9a9a; margin: 0; font-size: 14px; line-height: 1.6; }
.ax-login-modal-mark { width: 64px; }
.ax-login-modal-body { padding: 30px; }
.ax-login-modal-body .form-group { margin-bottom: 16px; }
.ax-login-modal-body .form-control { text-align: center; }

/* product page info sidebar */
.ax-product-info { background: transparent !important; border: 0 !important; }
.ax-product-info .ax-info-item { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid #e1e1e1; }
.ax-product-info .ax-info-icon { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%; background: #1f2732; color: var(--ax-accent);
    display: flex; align-items: center; justify-content: center; font-size: 18px; }
.ax-product-info .ax-info-icon img { max-width: 28px; max-height: 28px; }
.ax-product-info h6 { font-family: var(--ax-font); font-size: 15px; font-weight: 500; margin: 0 0 2px; color: #1f2732; }
.ax-product-info span, .ax-product-info a { font-size: 13px; color: #7f7f7f; }
.ax-product-info a:hover { color: var(--ax-accent-text); }

/* address book actions below the address instead of over it */
.ax-address-actions { position: static !important; margin-top: 10px; display: flex; gap: 14px; font-size: 13px; }

/* quote request popup */
.ax-quote-modal { border: 0; border-radius: 0; overflow: hidden; position: relative; }
.ax-quote-modal .ax-modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    background: #f4f4f5; color: #1f2732; font-size: 16px; letter-spacing: 0; line-height: 1; }
.ax-quote-modal .ax-modal-close:hover { background: var(--ax-accent); color: var(--ax-on-accent); }
.ax-quote-side { background-color: #1f2732; height: 100%; padding: 46px 32px; }
.ax-quote-side h4 { color: #fff; font-size: 24px; line-height: 1.3; margin: 0 0 12px; }
.ax-quote-photo { width: 190px; height: 190px; margin: 0 auto 26px; border-radius: 50%; overflow: hidden; border: 10px solid #2b2f37; background: #fff; }
.ax-quote-photo img { width: 100%; height: 100%; object-fit: cover; }
.ax-quote-note { color: #9a9a9a; font-size: 14px; line-height: 1.7; }
.ax-quote-points { list-style: none; padding: 0; margin: 18px 0 0; text-align: left; display: inline-block; }
.ax-quote-points li { color: #fff; font-size: 13px; margin-bottom: 8px; }
.ax-quote-points i { color: var(--ax-accent); margin-right: 10px; }
.ax-quote-form { padding: 46px 36px 36px; }
.ax-quote-form h4 { font-size: 26px; margin-bottom: 24px; }
.ax-quote-form .form-group { margin-bottom: 14px; }
.ax-quote-form .form-control { text-align: center; }
.ax-quote-form .btn { margin-top: 8px; }
.dc .ax-quote-page select.form-control { text-align: center; text-align-last: center; appearance: auto; height: 60px; }

/* login / register: photo panel + form */
.ax-auth-row { box-shadow: 0 30px 60px rgba(31, 39, 50, .08); }
.ax-auth-panel { height: 100%; min-height: 100%; padding: 56px 40px; background-size: cover; background-position: center; text-align: center; }
.ax-auth-panel .ax-auth-mark { width: 70px; margin-bottom: 22px; }
.ax-auth-panel h3 { color: #fff; font-size: 32px; margin-bottom: 12px; }
.ax-auth-panel p { color: #c4c7cc; font-size: 15px; line-height: 1.7; margin: 0; }
.ax-auth-panel .ax-auth-line { display: block; margin: 26px auto; }
.ax-auth-panel ul { list-style: none; padding: 0; margin: 0; display: inline-block; text-align: left; }
.ax-auth-panel li { color: #fff; font-size: 14px; margin-bottom: 12px; }
.ax-auth-panel li i { color: var(--ax-accent); margin-right: 12px; }
.ax-auth-form { padding: 56px 48px; background: #fff; }
@media (max-width: 991.98px) { .ax-auth-panel { padding: 40px 24px; } .ax-auth-form { padding: 40px 20px; } }
.dc .ax-quote-page .form-group, .dc .ax-quote-form .form-group { margin-bottom: 16px; }

/* AcrossX replacements for template imagery */
.dc .book-item .book .stage.book-1 div { background-image: url("../img/acrossx/design/book-1-inside.png"); }
.dc .book-item .book .stage.book-2 div { background-image: url("../img/acrossx/design/book-2-inside.png"); }
.dc .book-item .book .stage.book-3 div { background-image: url("../img/acrossx/design/book-3-inside.png"); }
.dc .page_404 { background-image: url("../img/acrossx/design/404.jpg"); }

/* keep visual sizes after heading-level fixes */
.dc .text-section h2.ax-cta-title { font-size: 56px; line-height: 1.1; font-weight: 600; }
@media (max-width: 767px) { .dc .text-section h2.ax-cta-title { font-size: 1.8rem; } }
.gstore-breadcrumb .breadcrumb-content h1 { font-size: 56px; line-height: 1.1; margin-bottom: 10px; font-family: var(--ax-font); font-weight: 600; color: #1f2732; }
@media (max-width: 767.98px) { .gstore-breadcrumb .breadcrumb-content h1 { font-size: 32px; } }

/* hero slider on tablets/phones: photo fills the whole slide behind the overlay (template stacks it above the text) */
@media (max-width: 991.98px) {
    .dc .main_slider .slides > li { position: relative; overflow: hidden; }
    .dc .main_slider .slides > li > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
    .dc .main_slider .slides > li > .flexslider-overlay { z-index: 1; }
    .dc .main_slider .slides > li > .container { position: relative; z-index: 2; }
    .dc .main_slider .itro_slider { background: transparent !important; }
}
/* the storefront's "app-like" mobile rule squares all buttons; keep the template's pill buttons */
@media (max-width: 767.98px) {
    .dc .btn, .ax-btn { border-radius: 50px !important; }
}
@media (max-width: 991.98px) {
    .dc .main_slider .slides > li > .container { padding-top: 110px; padding-bottom: 120px; }
}
@media (max-width: 767.98px) { .dc .ax-flexslider .flex-direction-nav { display: none; } }

/* header account menu: explicit colours so the dark (.ds) header can't turn the text white */
.ax-dc-header .ax-account-menu { width: 290px; padding: 0; border: 0; border-top: 3px solid var(--ax-accent); border-radius: 0 0 6px 6px;
    box-shadow: 0 20px 45px rgba(23, 25, 30, .18); overflow: hidden; background: #fff; color: #1f2732; text-align: left; margin-top: 8px !important; }
.ax-dc-header .ax-account-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #1f2732; }
.ax-dc-header .ax-account-avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--ax-accent); color: var(--ax-on-accent);
    display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; }
.ax-dc-header .ax-account-who { min-width: 0; line-height: 1.35; }
.ax-dc-header .ax-account-who strong { display: block; color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-dc-header .ax-account-who span { display: block; color: #9a9a9a; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-dc-header .ax-account-note { padding: 8px 20px; background: var(--ax-accent-soft); color: var(--ax-accent-text); font-size: 12px; font-weight: 500; }
.ax-dc-header .ax-account-links { list-style: none; margin: 0; padding: 8px 0; }
.ax-dc-header .ax-account-links a,
.ax-dc-header .ax-account-foot a { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: #1f2732 !important; font-size: 14px;
    font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: none; line-height: 1.4; }
.ax-dc-header .ax-account-links a i,
.ax-dc-header .ax-account-foot a i { width: 18px; text-align: center; color: var(--ax-accent-text); font-size: 14px; }
.ax-dc-header .ax-account-links a:hover,
.ax-dc-header .ax-account-foot a:hover { background: #f4f4f5; color: var(--ax-accent-text) !important; }
.ax-dc-header .ax-account-foot { border-top: 1px solid #e1e1e1; padding: 6px 0; }
.ax-dc-header .ax-account-foot .ax-account-signout,
.ax-dc-header .ax-account-foot .ax-account-signout i { color: #c0392b !important; }
.ax-dc-header .ax-account-actions { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 14px; }
.ax-dc-header .ax-account-actions .ax-btn:not(.ax-btn-fill) { color: #1f2732 !important; }
.ax-dc-header .ax-account-actions .ax-btn-fill { color: var(--ax-on-accent) !important; }

/* cart menu: same frame */
.ax-dc-header .cart-navbar-wrapper { border: 0; border-top: 3px solid var(--ax-accent); border-radius: 0 0 6px 6px; box-shadow: 0 20px 45px rgba(23, 25, 30, .18);
    background: #fff; color: #1f2732; text-align: left; margin-top: 8px !important; }
.ax-dc-header .cart-navbar-wrapper a:not(.ax-btn) { color: #1f2732; }

/* phone bottom toolbar in the template's charcoal + gold */
html body .mobile-toolbar { background-color: #1f2732 !important; backdrop-filter: none !important; border-top: 3px solid var(--ax-accent); box-shadow: 0 -10px 30px rgba(23, 25, 30, .25) !important; }
html body .mobile-toolbar .mobile-toolbar-item { background: transparent !important; color: #9a9a9a !important; text-decoration: none; }
.mobile-toolbar .mobile-toolbar-item i { color: #c4c7cc !important; }
.mobile-toolbar .mobile-toolbar-label { font-family: var(--ax-font); font-size: 10px !important; font-weight: 700 !important; letter-spacing: .15em; text-transform: uppercase; color: #9a9a9a !important; }
.mobile-toolbar .mobile-toolbar-item.active i, .mobile-toolbar .mobile-toolbar-item.active .mobile-toolbar-label { color: var(--ax-accent) !important; }
.mobile-toolbar .active-indicator { background: var(--ax-accent) !important; }
.mobile-toolbar .cart-counter-pill { background: var(--ax-accent) !important; color: var(--ax-on-accent) !important; }
html body .mobile-toolbar .mobile-toolbar-item { border: 0 !important; border-right: 1px solid rgba(255, 255, 255, .06) !important; box-shadow: none !important; outline: 0; }
html body .mobile-toolbar .mobile-toolbar-item:last-child { border-right: 0 !important; }
html body .mobile-toolbar .active-indicator { display: none !important; }

/* trade account form: labelled fields, left-aligned, readable */
.dc .ax-dealer-form { background: #fff; padding: 48px 50px 40px; }
.dc .ax-form-step { display: flex; align-items: center; gap: 14px; margin: 10px 0 22px; padding-bottom: 14px; border-bottom: 1px solid #e1e1e1; }
.dc .ax-form-step span { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: #1f2732; color: var(--ax-accent); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.dc .ax-form-step h5 { margin: 0; font-size: 22px; }
.dc .ax-form-step ~ .ax-form-step { margin-top: 30px; }
.dc .ax-field { margin-bottom: 20px; text-align: left; }
.dc .ax-field label { position: static !important; display: block; clip: auto !important; width: auto !important; height: auto !important; margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #1f2732; }
.dc .ax-field .required { color: var(--ax-accent-text); }
.dc .ax-field .form-control { text-align: left; padding: 0 20px; height: 56px; letter-spacing: 0; text-transform: none; font-size: 15px; color: #1f2732; }
.dc .ax-field textarea.form-control { height: auto; padding: 16px 20px; }
.dc .ax-field select.form-control { appearance: auto; }
.dc .ax-field .form-control::placeholder { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 300; color: #9a9a9a; }
.dc .ax-field .form-control.is-invalid { border-color: #e74c3c !important; background: #fff6f5 !important; }
.dc .ax-field-error { display: block; margin-top: 6px; font-size: 13px; color: #c0392b; }
.dc .ax-form-hint { margin: -6px 0 0; font-size: 13px; color: #7f7f7f; }
.dc .ax-terms { display: flex; gap: 12px; align-items: flex-start; margin: 30px 0 28px; padding: 18px 20px; background: #f4f4f5; text-align: left; }
.dc .ax-terms input { width: 18px; height: 18px; flex: 0 0 18px; margin: 3px 0 0; accent-color: var(--ax-accent); }
.dc .ax-terms input + label::before { display: none !important; }
.dc .ax-terms label { margin: 0; font-size: 14px; line-height: 1.6; color: #1f2732; text-transform: none; letter-spacing: 0; font-weight: 400; padding: 0 !important; }
@media (max-width: 767.98px) { .dc .ax-dealer-form { padding: 30px 18px; } }
html body .dc .ax-field .form-control { background: #f4f4f5 !important; border: 1px solid #e1e1e1 !important; border-radius: 0 !important; text-align: left !important; }
html body .dc .ax-field .form-control:focus { background: #fff !important; border-color: var(--ax-accent) !important; box-shadow: 0 0 0 3px rgba(222, 155, 42, .15) !important; }
html body .dc .ax-field .form-control::placeholder { text-align: left; }
.dc .ax-terms label a { color: var(--ax-accent-text); text-decoration: underline; }
html body .dc .ax-dealer-form .ax-field { margin-bottom: 26px !important; }

/* contact page */
.dc .ax-contact-card { box-shadow: 0 30px 60px rgba(31, 39, 50, .08); }
.dc .ax-contact-panel { height: 100%; padding: 50px 42px; background: linear-gradient(rgba(31, 39, 50, .9), rgba(31, 39, 50, .96)), url("../img/acrossx/photos/hero-1.jpg") center/cover; }
.dc .ax-contact-panel h4 { color: #fff; font-size: 30px; margin-bottom: 12px; }
.dc .ax-contact-panel > p { color: #c4c7cc; font-size: 15px; line-height: 1.7; }
.dc .ax-contact-list { list-style: none; padding: 0; margin: 30px 0; }
.dc .ax-contact-list li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dc .ax-contact-ico { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: var(--ax-accent); color: var(--ax-on-accent); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.dc .ax-contact-list small { display: block; color: #9a9a9a; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 3px; }
.dc .ax-contact-list a, .dc .ax-contact-list span { color: #fff; font-size: 16px; line-height: 1.5; text-decoration: none; }
.dc .ax-contact-list a:hover { color: var(--ax-accent); }
.dc .ax-contact-quick { display: flex; flex-direction: column; gap: 10px; }
.dc .ax-contact-quick a { color: #fff; font-size: 14px; text-decoration: none; }
.dc .ax-contact-quick a i { color: var(--ax-accent); width: 22px; }
.dc .ax-contact-quick a:hover { color: var(--ax-accent); }
.dc .ax-contact-form h4 { font-size: 28px; margin-bottom: 26px; }
.dc .ax-contact-form .ax-form-hint a { color: var(--ax-accent-text); text-decoration: underline; }
.ax-contact-map iframe { display: block; width: 100%; height: 420px; border: 0; filter: grayscale(1) contrast(1.05); }
@media (max-width: 991.98px) { .dc .ax-contact-panel { padding: 36px 22px; } }

/* email verification code field */
.ax-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
html body .dc .ax-code-field { text-align: left; }
html body .dc .ax-code-row { display: flex; gap: 10px; }
html body .dc .ax-code-row .form-control { flex: 1 1 auto; height: 56px; padding: 0 20px; text-align: left !important; letter-spacing: .35em !important; font-size: 18px; font-weight: 600;
    background: #f4f4f5 !important; border: 1px solid #e1e1e1 !important; border-radius: 0 !important; text-transform: none; }
html body .dc .ax-code-row .form-control::placeholder { letter-spacing: 0; font-size: 14px; font-weight: 300; }
html body .dc .ax-code-send { flex: 0 0 auto; height: 56px; padding: 0 24px; border: 0; border-radius: 0; background: #1f2732; color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
html body .dc .ax-code-send:hover:not(:disabled) { background: var(--ax-accent); color: var(--ax-on-accent); }
html body .dc .ax-code-send:disabled { background: #9a9a9a; cursor: default; }
html body .dc .ax-code-status { display: block; margin-top: 6px; font-size: 13px; color: #7f7f7f; }
html body .dc .ax-code-status.is-ok { color: #1e8449; }
html body .dc .ax-code-status.is-error { color: #c0392b; }
html body .dc .ax-code-field label { position: static !important; display: block; clip: auto !important; width: auto !important; height: auto !important; margin: 0 0 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #1f2732; }