/* Dedicated chrome width/padding tokens. The header must look IDENTICAL on
           every page, but each template defines its own content-column --max/--pad
           (1080–1320px) which used to leak into the nav below and make the header
           wider/narrower page-to-page (e.g. delivery-info shrank it to 1080px vs the
           homepage's 1280px). These --nav-* tokens are declared here, in the shared
           CSS, so no per-page :root can override them — the nav is pinned to the
           homepage header dimensions everywhere. */
        :root{--nav-max:1280px;--nav-pad:32px;}
        /* announce + top nav — shared across every page that calls smartio_render_header() */
        .announce-bar{background:linear-gradient(90deg,var(--primary,#0d4877),var(--primary-light,#1a6099));color:#fff;text-align:center;font-size:13px;font-weight:500;padding:9px 20px;}
        .announce-bar strong{color:var(--teal-1,#7bd0ca);font-weight:700;}

        .top-nav{background:var(--bg-surface,#fff);border-bottom:1px solid var(--border,#e8edf3);position:sticky;top:0;z-index:200;transition:transform 220ms ease;will-change:transform;}
        .top-nav.is-hidden{transform:translateY(-100%);}
        /* Hide the redundant FiboSearch submit/icon button — the input itself + Enter is enough. */
        .nav-search .dgwt-wcas-search-submit,
        .nav-search .dgwt-wcas-search-icon{display:none!important;}
        .nav-search .dgwt-wcas-search-input{padding-right:16px!important;}
        .nav-search .dgwt-wcas-preloader{right:12px!important;}
        .nav-inner{max-width:var(--nav-max,1280px);margin:0 auto;padding:0 var(--nav-pad,32px);display:flex;align-items:center;gap:24px;height:64px;}
        .nav-logo{flex-shrink:0;display:flex;align-items:center;}
        .nav-logo img,.nav-logo svg{height:42px;width:auto;display:block;}
        .nav-cats{display:flex;gap:4px;flex:1;}
        /* The shared chrome must style its OWN links — several standalone
           templates (PDP, blog, …) have no global `a` reset, so without these
           the menu shows browser-default underlines there (regression seen
           2026-07-02 after cache flush). Low specificity: component rules
           below still override freely. */
        .top-nav a,.announce-bar a,.smartio-drawer-panel a{text-decoration:none;}
        .nav-cat{padding:6px 14px;font-size:14px;font-weight:500;color:var(--text-mid,#556b85);border-radius:8px;cursor:pointer;white-space:nowrap;text-decoration:none;}
        .nav-cat:hover{background:var(--bg,#f4f6f9);color:var(--primary,#0d4877);}
        .nav-right{display:flex;align-items:center;gap:8px;margin-left:auto;}
        .nav-search-pill{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--bg,#f4f6f9);border-radius:999px;border:1px solid var(--border,#e8edf3);font-size:14px;color:var(--text-soft,#a8b8cc);cursor:pointer;min-width:200px;}
        .nav-search-pill:hover{border-color:var(--text-soft,#a8b8cc);color:var(--text-mid,#556b85);}

        /* FiboSearch input in the header — match our brand pill style */
        .nav-search{flex:0 0 auto;min-width:240px;max-width:380px;}
        .nav-search .dgwt-wcas-search-wrapp{width:100%!important;max-width:none!important;}
        .nav-search .dgwt-wcas-search-form{margin:0!important;}
        .nav-search .dgwt-wcas-search-input{
          width:100%!important;height:40px!important;padding:0 38px 0 16px!important;
          background:var(--bg,#f4f6f9)!important;border:1px solid var(--border,#e8edf3)!important;
          border-radius:999px!important;font-size:14px!important;color:var(--text,#111827)!important;
          box-shadow:none!important;outline:none!important;
        }
        .nav-search .dgwt-wcas-search-input::placeholder{color:var(--text-soft,#a8b8cc)!important;}
        .nav-search .dgwt-wcas-search-input:focus{border-color:var(--primary,#0d4877)!important;background:var(--bg-surface,#fff)!important;box-shadow:0 0 0 3px rgba(13,72,119,.08)!important;}
        /* FiboSearch's built-in magnifier / submit button is redundant — the
           input itself looks like a search bar (rounded pill + placeholder),
           and the Enter key submits. Hide both decorations entirely. */
        .nav-search .dgwt-wcas-search-icon,
        .nav-search .dgwt-wcas-search-submit,
        .nav-search .dgwt-wcas-open-search,
        .nav-search .dgwt-wcas-icon-magn { display: none !important; }
        .nav-search .dgwt-wcas-sf-wrapp { position: relative !important; }
        /* Without the trailing icon we no longer need padding-right room. */
        .nav-search .dgwt-wcas-search-input { padding: 0 16px !important; }
        .nav-search .dgwt-wcas-preloader { right: 10px !important; }
        /* iOS Safari force-zooms the viewport onto any focused input whose
           font-size is under 16px — touch devices must get 16px or tapping
           the search bar makes the whole page jump-zoom. */
        @media (max-width:768px),(hover:none) and (pointer:coarse){
          .nav-search .dgwt-wcas-search-input{font-size:16px!important;}
        }
        /* Suggestions dropdown — themed */
        .dgwt-wcas-suggestions-wrapp{
          border-radius:14px!important;border:1px solid var(--border,#e8edf3)!important;
          box-shadow:0 18px 40px -12px rgba(13,72,119,.22)!important;margin-top:6px!important;
          background:var(--bg-surface,#fff)!important;
        }
        .dgwt-wcas-suggestion{color:var(--text,#111827)!important;}
        .dgwt-wcas-suggestion:hover,.dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected{background:var(--bg,#f4f6f9)!important;}
        .dgwt-wcas-st-title{color:var(--text,#111827)!important;font-weight:600!important;}
        .dgwt-wcas-st-price{color:var(--primary,#0d4877)!important;font-weight:700!important;}
        /* Explicit width/height so the icon buttons have consistent 40px
           tap targets and don't shrink to their SVG content when the row
           gets crowded (theme toggle, heart, cart, account). */
        .nav-icon-btn{background:none;border:none;color:var(--text-mid,#556b85);padding:0;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;width:40px;height:40px;flex-shrink:0;transition:background 180ms,color 180ms;}
        .nav-icon-btn:hover{color:var(--primary,#0d4877);background:var(--bg,#f4f6f9);}
        .nav-icon-btn svg{width:20px;height:20px;}
        .nav-icon-btn svg.cart-svg{width:20px;height:20px;}
        .nav-signin{background:var(--primary,#0d4877);color:#fff;border:none;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;}
        .nav-signin:hover{background:var(--primary-dark,#092f50);color:#fff;text-decoration:none;}
        .cart-wrap{position:relative;}
        .cart-badge{position:absolute;top:-4px;right:-4px;background:var(--primary,#0d4877);color:#fff;font-size:9px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
        .smartio-theme-toggle{background:none;border:none;color:var(--text-mid,#556b85);padding:8px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
        .smartio-theme-toggle:hover{color:var(--primary,#0d4877);background:var(--bg,#f4f6f9);}
        .smartio-theme-toggle svg{width:18px;height:18px;}

        /* breadcrumb */
        .breadcrumb-bar{background:var(--bg-surface,#fff);border-bottom:1px solid var(--border,#e8edf3);}
        .breadcrumb-inner{max-width:var(--nav-max,1280px);margin:0 auto;padding:14px var(--nav-pad,32px);display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-mid,#556b85);flex-wrap:wrap;}
        .breadcrumb-inner a{color:var(--primary,#0d4877);font-weight:600;text-decoration:none;}
        .breadcrumb-inner a:hover{text-decoration:underline;}
        .breadcrumb-sep{color:var(--text-soft,#a8b8cc);}
        /* Back button (info / standalone pages) */
        .breadcrumb-back{display:inline-flex;align-items:center;gap:5px;color:var(--primary,#0d4877)!important;font-weight:700;}
        .breadcrumb-back svg{width:15px;height:15px;}
        .breadcrumb-back:hover{text-decoration:none!important;opacity:.78;}
        .breadcrumb-back-divider{display:inline-block;width:1px;height:14px;background:var(--border-subtle,#d0d9e4);margin:0 2px;}
        /* breadcrumb links use var(--primary) (navy), never lightened in dark mode
           → ~1.7:1 on the dark surface. Same pattern as reference_smartio_dark_primary_foreground. */
        html.theme-dark .breadcrumb-inner a{color:var(--teal-1,#7bd0ca);}
        html.theme-dark .breadcrumb-back{color:var(--teal-1,#7bd0ca)!important;}
        @media (max-width:768px){ .breadcrumb-inner{padding:6px 16px;font-size:12px;gap:4px;} }

        /* Mobile-only / desktop-only visibility helpers — !important so later
           component rules (.nav-icon-btn, .nav-signin) don't override. */
        .nav-hamburger,.nav-mobile-only{display:none!important;}
        .nav-desktop-only{display:flex;}

        /* Hamburger button */
        .nav-hamburger{flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-left:-8px;align-items:center;border-radius:8px;width:40px;height:40px;}
        .nav-hamburger span{display:block;width:20px;height:2px;background:var(--text,#111827);border-radius:2px;transition:background 200ms;}
        .nav-hamburger:hover{background:var(--bg,#f4f6f9);}

        /* Slide-in drawer — transform-driven so swipe gestures can live-drag it.
           Closed = visibility:hidden so the offscreen panel doesn't block taps. */
        .smartio-drawer{position:fixed;inset:0;z-index:9998;visibility:hidden;pointer-events:none;}
        .smartio-drawer.open,
        .smartio-drawer.is-dragging{visibility:visible;pointer-events:auto;}
        .smartio-drawer-backdrop{position:absolute;inset:0;background:rgba(13,72,119,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity 240ms ease-out;}
        .smartio-drawer.open .smartio-drawer-backdrop{opacity:1;}
        .smartio-drawer-panel{position:absolute;top:0;left:0;bottom:0;width:100%;background:var(--bg-surface,#fff);box-shadow:8px 0 32px -8px rgba(13,72,119,.3);display:flex;flex-direction:column;overflow-y:auto;transform:translateX(-100%);transition:transform 280ms cubic-bezier(0.2,0.85,0.4,1);will-change:transform;}
        .smartio-drawer.open .smartio-drawer-panel{transform:none;}
        /* While the finger is dragging, suppress transitions so the panel
           tracks the finger 1:1. The inline transform set by JS wins. */
        .smartio-drawer.is-dragging .smartio-drawer-panel,
        .smartio-drawer.is-dragging .smartio-drawer-backdrop{transition:none;}
        .smartio-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border,#e8edf3);}
        .smartio-drawer-logo img,.smartio-drawer-logo svg{height:28px;width:auto;display:block;}
        .smartio-drawer-close{width:36px;height:36px;border-radius:50%;background:var(--bg,#f4f6f9);color:var(--text-mid,#556b85);border:none;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
        .smartio-drawer-close:hover{background:#fee2e2;color:#991b1b;}
        .smartio-drawer-nav{flex:1;padding:10px 8px 4px;display:flex;flex-direction:column;gap:2px;}
        /* Legacy .nav-cat support (kept in case any caller still hits the old path) */
        .smartio-drawer-nav .nav-cat{display:flex;align-items:center;padding:14px 16px;font-size:16px;font-weight:600;color:var(--text,#111827);border-radius:10px;border:none;background:none;text-decoration:none;}
        .smartio-drawer-nav .nav-cat:hover{background:var(--bg,#f4f6f9);color:var(--primary,#0d4877);}

        /* ── Govee-style drawer accordions (sdx-*) ─────────────────────────
           Top-level rows are full-width buttons with hairline dividers; the
           open one tints brand-color and its chevron flips. Panels hold
           grouped link lists, the Shop-by-Room photo grid, brand chips and
           tech wordmarks — all driven by the desktop mega-nav config. */
        .smartio-drawer-nav{padding:2px 16px 8px;gap:0;}
        .sdx-acc{border-bottom:1px solid var(--border,#e8edf3);}
        .sdx-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
          padding:16px 2px;font-family:var(--font-brand,inherit);font-size:16.5px;font-weight:700;
          letter-spacing:-.01em;color:var(--text,#111827);background:none;border:none;cursor:pointer;text-align:left;}
        .sdx-chev{flex:0 0 auto;color:var(--text-soft,#a8b8cc);transition:transform 200ms ease,color 200ms ease;}
        .sdx-btn[aria-expanded="true"]{color:var(--primary,#0d4877);}
        .sdx-btn[aria-expanded="true"] .sdx-chev{transform:rotate(180deg);color:currentColor;}
        .sdx-plain{display:flex;align-items:center;justify-content:space-between;
          padding:16px 2px;border-bottom:1px solid var(--border,#e8edf3);
          font-family:var(--font-brand,inherit);font-size:16.5px;font-weight:700;letter-spacing:-.01em;
          color:var(--text,#111827);text-decoration:none;}
        .sdx-plain-chev{color:var(--text-soft,#a8b8cc);font-size:20px;font-weight:300;line-height:1;}
        .sdx-panel{padding:0 2px 16px;}
        .sdx-group + .sdx-group{margin-top:16px;}
        .sdx-h{font-family:var(--font-brand,inherit);font-size:15px;font-weight:800;color:var(--text,#111827);margin:10px 0 2px;}
        .sdx-list{list-style:none;margin:0;padding:0;}
        .sdx-list a{display:flex;align-items:center;gap:9px;padding:10px 0;
          font-size:14px;font-weight:500;color:var(--text-mid,#556b85);text-decoration:none;}
        .sdx-list a:hover,.sdx-list a:active{color:var(--primary,#0d4877);}
        .sdx-ic{flex:0 0 auto;display:inline-flex;color:var(--teal-4,#61afcc);}
        .sdx-badge{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
          padding:1px 7px;border-radius:4px;border:1px solid currentColor;line-height:1.6;}
        .sdx-badge-hot{color:#f59e0b;}
        .sdx-badge-new{color:var(--teal-3,#6bbac7);}
        .sdx-all{display:inline-flex;align-items:center;gap:5px;margin-top:10px;
          font-size:13px;font-weight:700;color:var(--primary,#0d4877);text-decoration:none;}
        .sdx-all + .sdx-all{margin-left:16px;}
        /* Shop by Room — 2-col photo grid, caption under the photo (Govee mobile) */
        .sdx-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;margin-top:10px;}
        .sdx-tile{display:block;text-decoration:none;}
        .sdx-tile img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block;background:#0f1722;}
        .sdx-tile-ph{display:block;width:100%;aspect-ratio:4/3;border-radius:10px;background:linear-gradient(135deg,var(--teal-1,#7bd0ca),var(--primary,#0d4877));}
        .sdx-tile-label{display:block;text-align:center;font-size:13px;font-weight:600;color:var(--text,#111827);margin-top:7px;line-height:1.3;}
        /* Brand + tech chip grids */
        .sdx-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
        .sdx-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
          padding:13px 10px;border-radius:10px;background:var(--bg,#f4f6f9);border:1px solid var(--border,#e8edf3);
          text-decoration:none;}
        .sdx-brand-name{font-family:var(--font-brand,inherit);font-size:13px;font-weight:700;color:var(--text,#111827);}
        .sdx-brand.is-featured{grid-column:1 / -1;align-items:flex-start;padding:13px 16px;
          background:linear-gradient(135deg,var(--primary,#0d4877),var(--primary-light,#1a6099));border-color:transparent;}
        .sdx-brand.is-featured .sdx-brand-name{color:#fff;font-size:16px;}
        .sdx-brand-tag{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-1,#7bd0ca);}
        .sdx-techs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
        .sdx-tech{display:flex;align-items:center;justify-content:center;height:56px;padding:6px 12px;
          border-radius:10px;background:#0c1f3a;border:1px solid rgba(255,255,255,.06);text-decoration:none;}
        .sdx-tech img{max-height:36px;max-width:100%;width:auto;height:auto;object-fit:contain;display:block;}
        .sdx-tech-txt span{color:var(--teal-1,#7bd0ca);font-weight:600;font-size:14px;letter-spacing:.02em;}

        /* Lebanon Govee promo strip */
        .smartio-drawer-promo{display:grid;grid-template-columns:40px 1fr 16px;align-items:center;gap:12px;margin:8px 14px;padding:14px;background:linear-gradient(135deg,rgba(123,208,202,.14),rgba(97,175,204,.10));border:1px solid rgba(97,175,204,.32);border-radius:12px;text-decoration:none;}
        .smartio-drawer-promo:hover{border-color:var(--teal-4,#61afcc);background:linear-gradient(135deg,rgba(123,208,202,.20),rgba(97,175,204,.16));}
        .smartio-drawer-promo-flag{font-size:26px;line-height:1;}
        .smartio-drawer-promo-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
        /* Title uses an explicit teal that contrasts on both light + dark
           backgrounds (the brand --primary is navy and disappears against
           the dark-mode panel surface). */
        .smartio-drawer-promo-body strong{font-size:13px;font-weight:700;color:#0d4877;line-height:1.3;}
        .smartio-drawer-promo-body span{font-size:11px;color:var(--text-mid,#556b85);}
        html.theme-dark .smartio-drawer-promo{background:linear-gradient(135deg,rgba(123,208,202,.18),rgba(97,175,204,.12));border-color:rgba(123,208,202,.42);}
        html.theme-dark .smartio-drawer-promo-body strong{color:var(--teal-1,#7bd0ca);}
        html.theme-dark .smartio-drawer-promo-body span{color:#9fb0c4;}
        html.theme-dark .smartio-drawer-promo-chev{color:var(--teal-1,#7bd0ca);}
        .smartio-drawer-promo-chev{font-size:18px;color:var(--primary,#0d4877);justify-self:end;}

        .smartio-drawer-foot{border-top:1px solid var(--border,#e8edf3);padding:14px;display:flex;flex-direction:column;gap:8px;}
        .smartio-drawer-cta{display:flex;align-items:center;justify-content:center;padding:13px;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;transition:background 200ms;}
        .smartio-drawer-cta.primary{background:var(--primary,#0d4877);color:#fff;}
        .smartio-drawer-cta.primary:hover{background:var(--primary-dark,#092f50);color:#fff;text-decoration:none;}
        .smartio-drawer-cta.wa{background:#0e7a66;color:#fff;}
        .smartio-drawer-cta.wa:hover{background:#0a5f50;color:#fff;text-decoration:none;}
        .smartio-drawer-links-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:2px;}
        .smartio-drawer-link{padding:11px;font-size:13px;font-weight:600;color:var(--text-mid,#556b85);text-align:center;text-decoration:none;background:var(--bg,#f4f6f9);border-radius:10px;transition:all 200ms;}
        .smartio-drawer-link:hover{color:var(--primary,#0d4877);background:#fff;}

        /* Dark-mode tweaks — navy foregrounds flip to teal on the dark panel */
        html.theme-dark .sdx-btn[aria-expanded="true"]{color:var(--teal-1,#7bd0ca);}
        html.theme-dark .sdx-list a:hover,
        html.theme-dark .sdx-list a:active{color:var(--teal-1,#7bd0ca);}
        html.theme-dark .sdx-all{color:var(--teal-1,#7bd0ca);}
        html.theme-dark .sdx-badge-hot{color:#fbbf24;}
        html.theme-dark .smartio-drawer-link{background:var(--bg-surface,#1a202c);color:var(--text-mid,#a8b8cc);}
        html.theme-dark .smartio-drawer-link:hover{background:var(--bg,#0f1419);color:var(--teal-1,#7bd0ca);}

        @media (max-width:900px){.nav-search-pill{min-width:140px;}}

        /* ── Mobile header layout: hamburger + logo on left, icons on right ──
           Bar height bumped from 56→66px (+18%) for a roomier, more
           thumb-friendly mobile header. Icon buttons + logo grow in lockstep
           so the visual rhythm stays tight. */
        @media (max-width:768px){
          .nav-desktop-only{display:none!important;}
          .nav-mobile-only{display:flex!important;}
          .nav-hamburger{display:flex!important;}
          .nav-inner{gap:10px;padding:0 14px;height:66px;}
          .nav-logo img,.nav-logo svg{height:39px!important;}
          .nav-cats{display:none;}
          .nav-right{gap:2px;}
          .nav-icon-btn{padding:0;width:44px;height:44px;}
          .nav-icon-btn svg{width:22px;height:22px;}
          .nav-icon-btn svg.cart-svg{width:22px;height:22px;}
          .cart-badge{top:0;right:0;font-size:9px;width:16px;height:16px;}
        }
        @media (max-width:380px){
          .nav-inner{gap:6px;padding:0 10px;}
          .nav-icon-btn{width:40px;height:40px;padding:0;}
        }

        /* ── Free-delivery progress bar (dynamic, cart-aware, top of page) ─────── */
        .smartio-ship-bar{background:var(--bg-surface,#fff);border-bottom:1px solid var(--border,#e8edf3);}
        .smartio-ship-bar[data-empty]{display:none;}
        .smartio-ship-bar-in{max-width:var(--nav-max,1280px);margin:0 auto;padding:7px var(--nav-pad,32px);display:flex;align-items:center;gap:14px;}
        .smartio-ship-bar .ssb-msg{font-size:13px;font-weight:600;color:var(--text,#111827);white-space:nowrap;flex:0 0 auto;}
        .smartio-ship-bar .ssb-msg strong{color:var(--primary,#0d4877);font-weight:800;}
        .smartio-ship-bar .ssb-ic{margin-right:2px;}
        .smartio-ship-bar .ssb-track{flex:1;height:7px;border-radius:9999px;background:var(--bg,#f4f6f9);overflow:hidden;min-width:70px;}
        .smartio-ship-bar .ssb-fill{display:block;height:100%;border-radius:9999px;background:linear-gradient(90deg,var(--teal-4,#61afcc),var(--teal-1,#7bd0ca));transition:width 450ms ease;}
        .smartio-ship-bar.is-unlocked{background:rgba(34,197,94,.10);border-bottom-color:rgba(34,197,94,.28);}
        /* #16a34a was 2.81:1 against this bar's own tint (rgba(34,197,94,.10)
           over the surface). #0f7a37 is 4.64:1 there and still unmistakably the
           "unlocked" green. Light mode only — the dark rule below overrides this
           to teal at higher specificity and already passes. */
        .smartio-ship-bar.is-unlocked .ssb-msg strong{color:#0f7a37;}
        .smartio-ship-bar.is-unlocked .ssb-fill{background:#22c55e;}
        html.theme-dark .smartio-ship-bar{background:var(--bg-surface);border-bottom-color:var(--border);}
        html.theme-dark .smartio-ship-bar.is-unlocked{background:rgba(34,197,94,.12);border-bottom-color:rgba(34,197,94,.34);}
        /* .ssb-msg strong uses var(--primary) (navy), never lightened in dark mode
           → ~1.7:1 on the dark surface. Same pattern as reference_smartio_dark_primary_foreground. */
        html.theme-dark .smartio-ship-bar .ssb-msg strong{color:var(--teal-1,#7bd0ca);}
        @media (max-width:768px){
          .smartio-ship-bar-in{padding:6px 16px;gap:10px;}
          .smartio-ship-bar .ssb-msg{font-size:12px;}
          .smartio-ship-bar .ssb-track{height:6px;min-width:56px;}
        }