/* ==========================================================================
   public-v2.css — site-wide chrome restyle (0924 page adjust, item 1).
   Linked from public/nav-box.tpl (and public/footer.tpl for the few pages
   without a nav), so EVERY english page gets the new header / quote form /
   footer / go-top look. Selectors are anchored on the shared components
   themselves; ties against main.css are won by source order (this file loads
   after the head stylesheets). The nav starts transparent on every page and
   fades to dark on scroll (.is-solid, toggled inline by nav-box.tpl); the few
   light-banner pages keep a solid bar via the opt-out list at the bottom.
   ========================================================================== */

:root {
    --orange: #f5651b;
    --orange-dark: #da4d08;
    --orange-soft: #fff1e9;
    --navy: #0a1730;
    --navy-soft: #14233e;
    --ink: #152033;
    --muted: #687386;
    --paper: #ffffff;
    --warm: #f7f7f5;
    --line: #e7e8e9;
    --shadow: 0 20px 60px rgba(31, 42, 68, .10);
    --radius: 18px;
}

/* ------------------------------------------- header: nav-box restyle -- */
/* nav-box.tpl markup is shared with 50+ pages; every override below is
   homepage-scoped. The marquee (#gongao/#scroll_div) keeps working as-is. */
.nav-box.white,
.nav-box.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    /* reference: 46px topbar + 88px navbar */
    height: 134px;
    margin: 0;
    padding: 0;
    z-index: 1000;
    color: #fff;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    transition: background .32s ease, box-shadow .32s ease;
}

.nav-box.white.is-solid,
.nav-box.fixed {
    background: #020817;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .16);
}

/* top announcement bar (marquee lives here) — reference .topbar-inner 46px */
.nav-box.white .top-bar,
.nav-box.fixed .top-bar {
    height: 46px;
    line-height: 46px;
    margin-bottom: 0;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    transition: background .32s ease;
}

.nav-box.white .top-bar .content-box,
.nav-box.fixed .top-bar .content-box {
    width: min(1180px, calc(100% - 48px));
    height: 46px;
}

.nav-box.white.is-solid .top-bar,
.nav-box.fixed .top-bar {
    background: #020817;
}

.nav-box.white .top-bar .content-box li {
    color: #d7dde6;
    font-size: 14px;
    font-weight: 600;
    /* main.css: height 14 + margin-top 12 (for the old 40px bar) →
       re-center the 14px line in the 46px bar; reference link gap is 22px
       (11px side padding each). */
    margin-top: 16px;
    padding: 0 11px;
}

/* the marquee li hosts the 24px-tall #gongao box → center that instead */
.nav-box.white .top-bar .content-box li:first-child,
.nav-box.fixed .top-bar .content-box li:first-child {
    margin-top: 11px;
    padding-left: 0;
}

.nav-box.white .top-bar .content-box li a,
.nav-box.fixed .top-bar .content-box li a {
    color: #d7dde6 !important;
}

.nav-box.white .top-bar .content-box li a:hover,
.nav-box.fixed .top-bar .content-box li a:hover {
    color: var(--orange) !important;
}

/* reference topbar has no vertical divider — hidden on the homepage only */
.nav-box .top-bar .content-box li.nav-separator {
    display: none;
}

/* main navigation row — reference .navbar: 88px, border-bottom, container width */
.nav-box.white > .content-box,
.nav-box.fixed > .content-box {
    width: min(1180px, calc(100% - 48px));
    height: 88px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    box-sizing: border-box;
}

/* logo → white horizontal logo; reference .brand img: width 150, height auto
   (sfc-logo.png is 408×300 → 110px tall), centered in the 88px navbar so it
   overflows the row by 11px top and bottom, exactly like the reference. */
.nav-box.white .logo,
.nav-box.fixed .logo {
    width: 150px;
    height: 110px;
    margin-top: -11px;
    background: url(/app/img/en/sfc-logo.png) left center / 100% 100% no-repeat;
}

/* nav links — reference .nav-menu: gap 25px between items, font 600 15px,
   links padded 31px 0 27px inside the 88px navbar (line box 30px).
   main.css gives every li padding 0 25px (=50px between texts) → halved to
   12.5px per side so adjacent texts sit 25px apart, matching the reference. */
.nav-box .nav-el > li {
    height: 88px;
    padding: 31px 12.5px 27px;
    font-family: Inter, Roboto, sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 30px;
    box-sizing: border-box;
}

.nav-box.white a,
.nav-box.fixed a {
    color: #fff !important;
}

/* active/hover underline — reference .nav-menu > a::after: 2px orange bar at
   bottom 21px spanning the link text (li padding-box minus side padding). */
.nav-box.white .nav-el > li:before,
.nav-box.fixed .nav-el > li:before {
    bottom: 21px;
    background: var(--orange);
}

.nav-box.white .nav-el > li.current:before,
.nav-box.fixed .nav-el > li.current:before,
.nav-box.white .nav-el > li:not(.has-more):not(.page-button):hover:before,
.nav-box.fixed .nav-el > li:not(.has-more):not(.page-button):hover:before {
    left: 12.5px;
    right: 12.5px;
    width: auto;
    margin: 0;
}

/* Services caret — small orange chevron like the reference <span>⌄</span> */
.nav-box.white li.has-more:after,
.nav-box.fixed li.has-more:after {
    width: 10px;
    height: 7px;
    margin-left: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath d='M1 1.5 5 5.5 9 1.5' fill='none' stroke='%23f5651b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 10px 7px;
    transform: none;
}

/* Services dropdown — reference .dropdown-menu: 250px white card, top 70px,
   left -18px from the button text (= -6px from our li box), padding 10px.
   Beats nav-box.tpl's inline .more-list{width:500px!important} by specificity. */
.nav-box .nav-el > li ul {
    top: 70px;
    left: -6px;
    border: 1px solid var(--line) !important;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(31, 42, 68, .10);
}

.more-list {
    width: 250px !important;
    padding: 10px !important;
    border-radius: 12px !important;
}

.more-list li {
    width: 100%;
}

.nav-box.white .nav-el > li ul li,
.nav-box.fixed .nav-el > li ul li {
    line-height: 1.4;
    text-align: left;
    background: #fff;
}

.nav-box.white .nav-el > li ul li a,
.nav-box.fixed .nav-el > li ul li a {
    display: block;
    padding: 9px 12px;
    color: var(--ink) !important;
    font-size: 13px;
    font-weight: 500;
    border-radius: 7px;
}

.nav-box.white .nav-el > li ul li:hover,
.nav-box.fixed .nav-el > li ul li:hover {
    background: #fff;
}

.more-list li:hover {
    background: var(--orange-soft) !important;
}

/* Get a Quote button — reference .btn-small: 44px tall, padding-inline 22px,
   separated from the last menu item by the navbar's 30px gap (12.5px of that
   comes from the li's own right padding → 17.5px margin here), vertically
   centered in the 88px navbar. Selector needs li.page-button to beat
   main.css `* .nav-box .nav-el>li:last-child{margin-left:10px}`. */
.nav-box .nav-el > li.page-button {
    width: auto;
    height: 44px;
    line-height: 44px;
    margin: 22px 0 0 17.5px;
    padding: 0 !important;
    background: var(--orange);
    border-radius: 9px;
    box-shadow: 0 10px 24px rgba(245, 101, 27, .22);
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: .25s;
}

.nav-box .nav-el > li.page-button:hover {
    background: var(--orange-dark);
}

.nav-box .page-button a {
    display: block;
    padding: 0 22px;
    line-height: 44px!important;
    color: #fff !important;
    font: 700 12px Inter, Roboto, sans-serif;
}

/* mobile fixed bar: light polish only (icons stay the existing images) */
.s-top-bar {
    box-shadow: 0 2px 14px rgba(2, 8, 23, .14);
}

/* --------------------------------------- main7.tpl → quote-section look -- */
/* main7.tpl markup/scripts untouched; the AJAX quote flow keeps working. */
.main-7 {
    height: auto;
    padding: 105px 0;
    overflow: visible;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(108deg, rgba(9, 23, 48, .97), rgba(9, 23, 48, .85)), url(/app/img/en/home-quote-background.webp) center / cover no-repeat !important;
}

/* reference .quote-grid: two columns .82fr / 1.18fr, 70px gutter */
.main-7c {
    width: min(1180px, calc(100% - 48px));
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 70px;
    align-items: start;
}

.main7_left {
    width: auto;
    float: none;
    height: auto;
    padding: 0;
    background: none;
    color: #fff;
    box-sizing: border-box;
}

/* reference .quote-copy h2: clamp(38px, 4.3vw, 54px), margin 16px 0 25px;
   the tpl's orange <span>s must not shrink (main.css forces 26px on them). */
.main-7 .main7_left .main7_01 {
    margin: 16px 0 25px;
    color: #fff;
    font: 700 clamp(38px, 4.3vw, 54px)/1.13 Inter, Roboto, sans-serif;
    letter-spacing: -.035em;
    text-align: left;
}

.main-7 .main7_01 span {
    /* the tpl spans carry inline color:#ff8100 + main.css forces 26px —
       reference paints the whole phrase in --orange at the h2 size.
       0924 adjust item 3: same face as the white title text, not Rubik. */
    color: var(--orange) !important;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.main-7 .main7_left p {
    display: block;
}

/* reference .quote-copy p: 17px/1.72 body text, 12px bottom margin, no
   check-mark icons (they only exist in the legacy shared markup). */
.main-7 .main7_02 {
    margin: 0 0 12px;
    padding: 0;
    color: #bdc6d3;
    font-size: 17px;
    line-height: 1.72;
}

.main-7 .main7_02 img {
    display: none;
}

/* "FAST RESPONSE / Within one business day" rail — reference .quote-contact,
   injected into .main7_left by index-v2.js (homepage only). */
.main-7 .quote-contact {
    margin-top: 35px;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    border-left: 3px solid var(--orange);
}

.main-7 .quote-contact span {
    color: var(--orange);
    letter-spacing: .14em;
    font: 700 9px Inter, Roboto, sans-serif;
}

.main-7 .quote-contact strong {
    color: #fff;
    font: 600 17px Inter, Roboto, sans-serif;
}

.main7_right {
    flex: 1;
    width: auto;
    float: none;
}

.main7_right form {
    position: relative;
    padding: 32px;
    color: var(--ink);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 55px rgba(0, 0, 0, .18);
}

/* field labels — <h4 class="m7-label"> injected above every field by
   index-v2.js; reference .quote-form label: block, 600 14px, input 8px below */
.main-7 h4,
.main-7 h4.m7-label {
    display: block;
    margin: 0 0 8px;
    color: var(--ink);
    font: 600 14px Inter, Roboto, sans-serif;
}

/* reference .form-row: two equal columns with a 17px gutter (the legacy
   49% + 2% split becomes calc(50% - 8.5px) + 17px) and 16px between rows */
.main-7 li {
    width: calc(50% - 8.5px);
    margin: 0 17px 16px 0;
}

.main-7 li:nth-child(2n) {
    margin-right: 0;
}

/* full-width rows: service select, product description, captcha */
.main-7 li.formtext,
.main-7 li.formcode,
.main-7 li.customer-type {
    width: 100%;
    margin-right: 0;
}

/* Field faces — every selector carries the li so it ties main.css's
   `* .main-7 li select/textarea/...` rules (same specificity) and wins by
   source order; without the li those legacy rules (34px-tall selects, 98%
   textareas, square borders) beat the group below and squeeze the rows. */
.main-7 li input[type="text"],
.main-7 li input[type="email"],
.main-7 li input[type="tel"],
.main-7 li input[type="number"],
.main-7 li input.form-control,
.main-7 li select,
.main-7 li textarea {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 12px 14px;
    color: var(--ink);
    background: #fafafa;
    border: 1px solid var(--line);
    border-radius: 7px;
    outline: 0;
    box-shadow: none;
    font-size: 15px;
    box-sizing: border-box;
}

.main-7 li textarea {
    height: 110px;
    resize: vertical;
}

.main-7 li input[type="text"]:focus,
.main-7 li input[type="email"]:focus,
.main-7 li input[type="tel"]:focus,
.main-7 li input.form-control:focus,
.main-7 li select:focus,
.main-7 li textarea:focus {
    background: #fff;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(245, 101, 27, .08);
}

.main-7 li .code-box {
    display: flex;
    gap: 10px;
    align-items: center;
}

.main-7 li .code-box input.form-control {
    flex: 1;
    width: auto;
    margin-right: 0;
}

.main-7 li .code-box a {
    flex: 0 0 134px;
    width: 134px;
    height: 50px;
    margin: 0;
    border-radius: 7px;
    overflow: hidden;
}

.main-7 li .code-box a img {
    width: 100%;
    height: 100%;
}

/* Required asterisks: the redesign shows clean fields (validation messages
   still surface via .error-text), so the legacy "*" spans — which otherwise
   wrap onto a line of their own and stretch every row to 73px — are dropped. */
.main-7 li > span,
.main-7 li .code-box > span {
    display: none;
}

/* Row 4: the old layout reserved an empty spacer li between the country
   combobox and the phone input (40% / 15% / 45%). With the spacer gone both
   fields share the row like every other pair (49% + 2% gutter + 49%). */
.main-7 li.block {
    display: none;
}

/* main.css pins .country-list to `margin-right:0; height:34px` (the legacy
   40/15/45 row) at equal specificity — restate both so the combobox li
   keeps the shared 17px gutter and stretches around the 50px field. */
.main-7 li.country-list {
    width: calc(50% - 8.5px);
    height: auto;
    margin-right: 17px;
}

.main-7 li.country-list select {
    width: 100%;
}

/* 9th <li> (odd → 17px gutter by the base rule) but sits in the right
   column next to .country-list, so drop the gutter; main.css also leaves
   `margin-left:-1px; padding-left:1px` from the legacy row — reset them
   or the phone field sits 1px left of its column and eats the gutter. */
.main-7 li.phone {
    width: calc(50% - 8.5px);
    margin-right: 0;
    margin-left: 0;
    padding-left: 0;
}

/* main.css narrows this select to 98% at equal-or-higher specificity */
.main7_right li.customer-type select {
    width: 100%;
}

.main-7 li .add-destinations {
    width: 100%;
    height: 50px;
    margin-left: 0;
    padding: 6px 40px 6px 14px;
    color: var(--muted);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23687386' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat 98% center #fafafa;
    background-size: 14px 14px;
    border: 1px solid var(--line);
    border-radius: 7px;
    font-size: 15px;
    line-height: 36px;
    box-sizing: border-box;
}

/* main.css draws a "▼" here via ::after; the plus glyph in the background
   above is the only affordance the redesign wants. */
.add-destinations::after {
    content: none;
}

.main-7 li .add-destinations-list {
    top: 56px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(31, 42, 68, .18);
}

.main-7 li .add-destinations-list:before {
    border-color: transparent transparent #fff #fff;
}

/* reference .form-submit: note left, button right, space-between */
.main-7 .button-demo {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

/* "By submitting…" note injected by index-v2.js — reference .form-submit p */
.main-7 .button-demo .form-note {
    max-width: 260px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.main-7 .button-demo .ladda-button,
.main-7 .button-demo button {
    min-height: 50px;
    padding: 0 32px !important;
    color: #fff !important;
    background: var(--orange) !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-shadow: 0 10px 24px rgba(245, 101, 27, .22);
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: .25s;
}

.main-7 .button-demo .ladda-button:hover,
.main-7 .button-demo button:hover {
    background: var(--orange-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(245, 101, 27, .28);
}

.main-7 .button-demo .ladda-label {
    color: #fff !important;
    font: 700 13px Inter, Roboto, sans-serif;
}

.s_main7_title {
    display: none;
}

/* Country&Region autocomplete widget (jquery-ui combobox built by
   _autocomplete.js). The wrapper gets an inline pixel width at init and
   the input an inline width:95% !important — both neutralized here so the
   widget matches the other 50px form fields. Homepage-scoped only. */
.main-7 .custom-combobox {
    display: block;
    position: relative;
    width: 100% !important;
}

.main-7 .custom-combobox-input {
    width: 100% !important;
    height: 50px;
    margin: 0;
    padding: 12px 48px 12px 14px;
    color: var(--ink);
    background: #fafafa;
    border: 1px solid var(--line);
    border-radius: 7px;
    outline: 0;
    box-shadow: none;
    font-size: 15px;
    font-family: Roboto, Arial, sans-serif;
    box-sizing: border-box;
}

.main-7 .custom-combobox-input:focus {
    background: #fff;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(245, 101, 27, .08);
}

.main-7 .custom-combobox a.ui-corner-right,
.main-7 .custom-combobox .custom-combobox-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: auto;
    left: auto;
    width: 42px;
    height: 48px;
    margin: 0;
    padding: 0;
    background: transparent;
    background-image: none;
    border: 0;
    border-radius: 0 7px 7px 0;
}

/* ------------------------------------------- footer.tpl → dark footer -- */
/* footer.tpl markup is shared; brand column is added there hidden-by-default
   and only displayed here on the homepage. */
.footer {
    position: relative;
    display: block;
    padding: 88px 0 0;
    color: #b3bdca;
    background: #030a18;
    font-size: 14px;
    overflow: hidden;
    clear: both;
}

.footer::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -180px;
    top: -190px;
    border: 1px solid rgba(245, 101, 27, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(245, 101, 27, .025), 0 0 0 110px rgba(245, 101, 27, .018);
}

.footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--orange);
}

.footer .content-box {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 48px));
}

.footer .footer-nav {
    display: flex;
    gap: 36px;
    margin: 0;
    padding: 0 0 64px;
    list-style: none;
}

.footer .footer-nav > div {
    display: none;
}

.footer .footer-nav > li {
    float: none;
    flex: 1;
    width: auto;
    color: #b3bdca;
}

.footer .footer-nav > li.footer-brand-col {
    display: block !important;
    flex: 1.55;
}

.footer .footer-brand-col .footer-brand-logo {
    display: block;
    width: 160px;
    height: auto;
    margin-bottom: 18px;
    background: transparent;
}

.footer .footer-brand-col p {
    max-width: 350px;
    margin: 0;
    color: #b3bdca;
    font-size: 14px;
    line-height: 1.75;
}

.footer h4 {
    position: relative;
    margin: 0 0 20px;
    padding-bottom: 13px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .05em;
    font: 600 16px Inter, Roboto, sans-serif;
}

.footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--orange);
}

.footer .footer-nav p {
    margin: 0 0 9px;
}

.footer .footer-nav li a {
    color: #b3bdca;
    font-size: 14px;
    line-height: 1.72;
    text-decoration: none;
    transition: .2s;
}

.footer .footer-nav li a:hover {
    color: var(--orange);
}

/* reference .footer-social: 38px transparent circles with a hairline border
   and an 18px white glyph — the legacy 300×200 PNGs (facebook/youtube/titok
   -icon.png) get stretched by the old 38×38 box, so the homepage swaps in the
   new SVGs (added hidden-by-default next to each PNG in footer.tpl).
   Selectors carry the full .footer-nav li p a chain: main.css styles these
   through `* .footer li p a.social-logo …` (and absolutely positions
   .social-logo-main at 26px), which outranks a bare .footer-scoped rule and
   was clipping the PNGs inside the circles. */
.footer .footer-nav li p.social-logo-main {
    position: static;
    height: auto;
    display: flex;
    gap: 8px;
    margin: 18px 0 0;
}

.footer .footer-nav li p a.social-logo {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
    transition: .25s;
}

/* hide the legacy PNG; show the SVG — footer.tpl keeps the SVG hidden with an
   inline display:none (so other pages are untouched), hence the !important */
.footer .footer-nav li p a.social-logo img {
    display: none;
}

.footer .footer-nav li p a.social-logo img.social-svg {
    display: block !important;
    float: none;
    width: 18px;
    height: 18px;
    margin: auto;
    background: transparent;
    border-radius: 0;
    object-fit: contain;
}

.footer .footer-nav li p a.social-logo:hover {
    background: rgba(245, 101, 27, .16);
    border-color: var(--orange);
    transform: translateY(-2px);
}

.footer .btm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 0;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .11);
}

.footer .btm .left {
    float: none;
    width: auto;
    max-width: 52%;
    color: #8d99aa;
    font-size: 13px;
    line-height: 1.7;
}

.footer .btm .left p {
    margin: 0;
}

.footer .btm .left img {
    display: inline-block;
    width: 16px;
    height: auto;
    vertical-align: -3px;
    filter: brightness(0) invert(.75);
}

.footer .btm .right {
    float: none;
    width: auto;
}

/* Track-order form — selectors carry the full .sreach-box .input-box chain:
   main.css styles these through `* .footer .btm .right .sreach-box
   .input-box …`, which outranks the shorter chain and left the input at
   59% width with the button absolutely positioned on top of it. */
.footer .btm .right .sreach-box {
    display: flex;
    align-items: center;
    gap: 14px;
    line-height: normal;
    color: #8d99aa;
    font-size: 13px;
    white-space: nowrap;
}

.footer .btm .right .sreach-box .input-box {
    display: flex;
    width: auto;
    margin: 0;
}

.footer .btm .right .sreach-box .input-box input[name="tracknumbers"] {
    width: 250px;
    height: 44px;
    padding: 0 14px;
    color: #fff;
    font-size: 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 4px 0 0 4px;
    outline: 0;
    box-shadow: none;
    box-sizing: border-box;
}

.footer .btm .right .sreach-box .input-box input[name="tracknumbers"]::placeholder {
    color: #8d99aa;
}

.footer .btm .right .sreach-box .input-box img {
    position: static;
    width: 74px;
    height: 44px;
    margin: 0;
    object-fit: none;
    object-position: center;
    background: var(--orange);
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    transition: .25s;
}

.footer .btm .right .sreach-box .input-box img:hover {
    background: var(--orange-dark);
}

.bottom-bar {
    background: #020610;
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: #8d99aa;
    font-size: 13px;
    line-height: 44px;
    text-align: center;
}

.bottom-bar a {
    color: #8d99aa !important;
    text-decoration: none;
}

.bottom-bar a:hover {
    color: var(--orange) !important;
}

/* --------------------------------------- go-top (functionality kept) -- */
/* index.js still toggles .fixed on scroll; only the look changes. */
.go-top {
    width: 43px;
    height: 43px;
    background: var(--orange);
    background-image: none;
    border: 0;
    border-radius: 9px;
    box-shadow: 0 10px 24px rgba(245, 101, 27, .35);
    transition: background .25s ease;
}

.go-top:hover {
    background: var(--orange-dark);
}

.go-top::after {
    content: "\2191";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.go-top img {
    display: none;
}

@media (max-width: 1200px) {
    /* main7: counter main.css rem-based mobile rules with px values */
    .main-7 {
        height: auto;
        padding: 64px 0;
        font-size: 14px;
    }

    .main-7c {
        display: block;
        width: min(700px, calc(100% - 32px));
    }

    .main7_left {
        width: 100%;
        height: auto;
        padding: 0 0 30px;
        background: none;
        color: #fff;
    }

    .main-7 .main7_left .main7_01 {
        font-size: 30px;
        text-align: left;
    }

    .main7_right {
        width: 100%;
        float: none;
    }

    .main-7 li.country-list,
    .main-7 li.phone {
        /* beats the !important widths in main7.tpl's inline <style> */
        width: 100% !important;
        margin-right: 0;
    }

    /* main7.tpl's inline <style> turns this li into a flex row ≤1199px —
       with the injected label it must stay a normal block */
    .main-7 li.customer-type {
        display: block;
    }

    .footer .content-box {
        width: min(1180px, calc(100% - 48px));
    }
}

@media (max-width: 1080px) {

    /* reference @1080: .nav-menu gap shrinks 25px → 14px */
    .nav-box .nav-el > li {
        padding-left: 7px;
        padding-right: 7px;
    }

    .nav-box.white .nav-el > li.current:before,
    .nav-box.fixed .nav-el > li.current:before,
    .nav-box.white .nav-el > li:not(.has-more):not(.page-button):hover:before,
    .nav-box.fixed .nav-el > li:not(.has-more):not(.page-button):hover:before {
        left: 7px;
        right: 7px;
    }

    .nav-box .nav-el > li.page-button {
        margin-left: 16px;
    }
}

@media (max-width: 860px) {

    /* 800–860px band: main.css only hides the desktop nav at ≤800px, so
       mirror the reference compact header here — topbar 34px + navbar 72px,
       108px logo, quote button hidden (the sm-button pill takes over). */
    .nav-box.white,
    .nav-box.fixed {
        height: 106px;
    }

    .nav-box.white .top-bar,
    .nav-box.fixed .top-bar,
    .nav-box.white .top-bar .content-box,
    .nav-box.fixed .top-bar .content-box {
        height: 34px;
        line-height: 34px;
    }

    .nav-box.white .top-bar .content-box li {
        margin-top: 10px;
    }

    .nav-box.white .top-bar .content-box li:first-child,
    .nav-box.fixed .top-bar .content-box li:first-child {
        margin-top: 5px;
    }

    .nav-box.white > .content-box,
    .nav-box.fixed > .content-box {
        height: 72px;
    }

    .nav-box .nav-el > li {
        height: 72px;
        padding-top: 21px;
        padding-bottom: 21px;
    }

    .nav-box.white .nav-el > li:before,
    .nav-box.fixed .nav-el > li:before {
        bottom: 14px;
    }

    .nav-box .nav-el > li ul {
        top: 56px;
    }

    .nav-box.white .logo,
    .nav-box.fixed .logo {
        width: 108px;
        height: 79px;
        margin-top: -3.5px;
    }

    .nav-box .nav-el > li.page-button {
        display: none;
    }

    .main7_right form {
        padding: 26px 20px;
    }

    .footer {
        padding-top: 64px;
    }

    .footer .footer-nav {
        flex-wrap: wrap;
        gap: 32px 24px;
        padding-bottom: 48px;
    }

    .footer .footer-nav > li,
    .footer .footer-nav > li.footer-brand-col {
        flex: 1 1 40%;
    }
}

@media (max-width: 800px) {
    /* nav-box/top-bar/footer-mobile rules from main.css stay in charge of
       show/hide (s-top-bar + page-left drawer take over navigation). */
    .header.index-header {
        height: auto;
    }

    .go-top {
        /* main.css hides .go-top below 800px (display:none !important) — kept */
        bottom: 20px;
        right: 14px;
    }

    .footer .content-box {
        width: calc(100% - 32px);
    }
}

@media (max-width: 600px) {

    .main-7 {
        padding: 56px 0 64px;
    }

    .main-7 .main7_left .main7_01 {
        font-size: 25px;
    }

    .main7_right form {
        padding: 22px 17px;
    }

    .main-7 li,
    .main-7 li:nth-child(2n) {
        width: 100%;
        float: none;
        margin-right: 0;
    }

    .footer {
        padding-top: 56px;
    }

    .footer .footer-nav {
        padding-bottom: 40px;
    }

    .footer .footer-nav > li,
    .footer .footer-nav > li.footer-brand-col {
        flex: 1 1 100%;
    }

    .footer .btm {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px 0;
    }

    .footer .btm .left {
        max-width: 100%;
    }

    .footer .btm .right {
        width: 100%;
    }

    .footer .btm .right .sreach-box {
        flex-wrap: wrap;
        white-space: normal;
    }

    .footer .btm .right .sreach-box .input-box {
        width: 100%;
    }

    .footer .btm .right .sreach-box .input-box input[name="tracknumbers"] {
        flex: 1;
        width: auto;
        min-width: 0;
    }
}

/* Site-wide scroll fade (0924 adjust follow-up): the bar starts transparent
   on EVERY page and .is-solid (toggle inline in nav-box.tpl, scrollY > 0)
   fades it to dark over .32s — exactly the homepage behaviour. Pages whose
   top strip is light keep the solid bar instead: the white nav copy would
   vanish on a transparent start there (utility pages with a bare .header,
   plus the two banners explicitly overridden to white / transparent). */
.header:not(.sub-header):not(.index-header) .nav-box.white:not(.is-solid):not(.fixed),
.header.sfc-ship-us-header .nav-box.white:not(.is-solid):not(.fixed),
.header.sfc-amif-sub-header .nav-box.white:not(.is-solid):not(.fixed) {
    background: #020817;
}

/* main7 "Start shipping" eyebrow (injected by public-v2.js) — the .index-v2
   scoped .eyebrow look from index-v2.css, available on every page here. */
.main-7 .eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: .15em;
    font: 700 11px Inter, Roboto, sans-serif;
}

.main-7 .eyebrow span {
    width: 32px;
    height: 2px;
    background: var(--orange);
}