@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

/* ==========================================================================
   inkpo-theme.css
   Drop-in retheme for the BC Sales design system.
   Load LAST — after core.css, theme-default.css, demo.css, snapshot.css.

   Nothing in the vendor theme is edited. This file only remaps the brand
   colour ramp from the old blue (#008bcb) to inkpo purple, plus the small
   number of layout rules the inkpo pages add.
   ========================================================================== */

:root {
  /* ---- inkpo brand ramp ---------------------------------------------- */
  --ink-primary:        #6C3CE4;  /* was #008bcb — sampled from the mascot */
  --ink-primary-hover:  #5A2CC4;  /* was #007db7 */
  --ink-primary-press:  #4A21A8;
  --ink-primary-300:    #B79EF4;
  --ink-primary-200:    #DCCFFA;  /* was #c3e4f3 */
  --ink-primary-100:    #EDE6FD;  /* was #d9eef7 / #d6ecf7 */

  --ink-accent:         #E4008C;  /* magenta from the wordmark — nav CTA only */
  --ink-accent-hover:   #C40079;

  /* CMYK spots, straight off the collateral — accents only, never body copy */
  --ink-cyan:           #00AEEF;
  --ink-magenta:        #E4008C;
  --ink-yellow:         #FFD200;
  --ink-night:          #150830;  /* the deep field the print pieces sit on */

  --ink-deep:           #241056;  /* was #051855 — headings, dark chips     */
  --ink-deep-300:       #5B4B8A;  /* was #445794 — muted body copy          */
  --ink-deep-100:       #DCD3F2;  /* was #ccd4ed                            */

  --ink-surface:        #F3F1FA;  /* was #eff2f9                            */
  --ink-border:         #CFC9DE;  /* was #c1c7d7                            */
  --ink-border-soft:    #DEDAEA;  /* was #d3d7e1 / #dcdfe8                  */

  /* status colours carry over unchanged so alerts stay legible */
  --ink-green:  #2f8f5e;
  --ink-orange: #d9822b;
  --ink-red:    #b93838;

  /* ---- bootstrap overrides -------------------------------------------- */
  --bs-primary:      var(--ink-primary);
  --bs-primary-rgb:  108, 60, 228;
  --bs-link-color:   var(--ink-primary);
  --bs-link-hover-color: var(--ink-primary-hover);
  --bs-secondary:     var(--ink-deep);
  --bs-secondary-rgb: 36, 16, 86;
  --bs-border-color:  var(--ink-border);
}

/* ==========================================================================
   1. Primary — fills, text, borders
   ========================================================================== */
.bg-primary,
.btn-primary,
.badge.bg-primary,
.progress-bar,
.nav-pills .nav-link.active,
.form-check-input:checked,
.page-item.active .page-link          { background-color: var(--ink-primary) !important; }

.btn-primary,
.form-check-input:checked,
.page-item.active .page-link          { border-color: var(--ink-primary) !important; }

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle  { background-color: var(--ink-primary-hover) !important;
                                        border-color: var(--ink-primary-hover) !important; }

.text-primary,
.primary-500,
a,
.link-primary,
.dropdown-item:active                 { color: var(--ink-primary) !important; }

.primary-border-500,
.border-primary                       { border-color: var(--ink-primary) !important; }

.btn-outline-primary                  { color: var(--ink-primary) !important;
                                        border-color: var(--ink-primary) !important; }
.btn-outline-primary:hover            { background-color: var(--ink-primary) !important;
                                        color: #fff !important; }

/* tints */
.bg-primary-100,
.bg-label-primary                     { background-color: var(--ink-primary-100) !important; }
.bg-primary-200                       { background-color: var(--ink-primary-200) !important; }
.bg-label-primary                     { color: var(--ink-primary) !important; }
.primary-300                          { color: var(--ink-primary-300) !important; }

/* focus rings */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible                    { border-color: var(--ink-primary) !important;
                                        box-shadow: 0 0 0 3px rgba(108, 60, 228, .16) !important; }

/* ==========================================================================
   2. Secondary / deep — headings, dark chips, sidebar
   ========================================================================== */
.secondary-500,
.text-secondary,
.d-black,
h1, h2, h3, h4, h5                    { color: var(--ink-deep); }

.bg-secondary-500,
.bg-secondary                         { background-color: var(--ink-deep) !important; }
.bg-secondery-100,
.bg-secondary-100                     { background-color: var(--ink-deep-100) !important; }
.secondery-border-500,
.secondary-border-500                 { border-color: var(--ink-deep) !important; }
.primary-blue-300                     { color: var(--ink-deep-300) !important; }

.prodect-card-gray .card-content p,
.cust-progress p                      { color: var(--ink-deep-300); }

/* sidebar — light, so the purple only marks what's selected */
.layout-menu.bg-menu-theme,
aside#layout-menu                     { background-color: #fff !important;
                                        border-right: 1px solid var(--ink-border-soft); }

/* logo sits on the same white as the rail, separated by a hairline */
aside#layout-menu .logo               { background: #fff !important;
                                        border-bottom: 1px solid var(--ink-border-soft);
                                        padding: 20px 20px 18px !important; margin-bottom: 12px; }
aside#layout-menu .logo img           { width: 132px; height: auto; }

/* one gutter value drives both sides, so the pills inset evenly */
.sidebar-cust                         { --rail-gutter: 12px;
                                        padding-left: var(--rail-gutter) !important;
                                        padding-right: var(--rail-gutter) !important; }
.sidebar-cust .nav-list-mob           { padding: 0 !important; margin: 0 !important; }
.nav-list-mob li                      { border-radius: 8px; overflow: hidden;
                                        margin-inline: 0 !important;
                                        transition: background-color .12s ease; }
.nav-list-mob li > a                  { color: var(--ink-deep-300) !important;
                                        font-size: 15px !important;
                                        text-transform: none !important;
                                        border-radius: 8px; display: flex; align-items: center;
                                        padding: 11px 14px !important; margin: 0 !important;
                                        width: 100%; }

/* hover paints the whole pill, same as the selected item — not just the label */
.nav-list-mob li:hover                { background-color: var(--ink-primary) !important; }
.nav-list-mob li:hover > a,
.nav-list-mob li:hover > a i          { color: #fff !important; }
.nav-list-mob li.active               { background-color: var(--ink-primary) !important; }
.nav-list-mob li.active > a,
.nav-list-mob li.active > a i         { color: #fff !important; }
aside#layout-menu .close-btn i        { color: var(--ink-deep) !important; }

/* ==========================================================================
   3. Surfaces and borders
   ========================================================================== */
.prodect-card-gray,
.bg-gray-100,
.bg-light                             { background-color: var(--ink-surface) !important; }
.white-bg-card,
.outline-box,
.card                                 { border-color: var(--ink-border-soft) !important; }
.bg-gray-300                          { background-color: var(--ink-border) !important; }
hr, .dropdown-divider                 { border-color: var(--ink-border-soft) !important; }

/* ==========================================================================
   4. Typography — smoother display face across front end and admin
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.lane-tag strong,
.price-head .amount,
.btn,
.nav-list-mob li > a                  { font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
                                        letter-spacing: -.02em; font-weight: 600; }
h1, h2                                { font-weight: 700; letter-spacing: -.03em; }
.nav-list-mob li > a                  { letter-spacing: .02em; font-weight: 500; }

/* Outfit carries a taller x-height than the face it replaced, so the whole
   scale reads a step larger. Pull the utilities and headings back down. */
.font-28                              { font-size: 24px !important; }
.font-22                              { font-size: 19px !important; }
.font-20                              { font-size: 17px !important; }
.font-18                              { font-size: 16px !important; }
h1                                    { font-size: 1.9rem; }
h2                                    { font-size: 1.55rem; }
h3                                    { font-size: 1.28rem; }
h4                                    { font-size: 1.08rem; }
h5                                    { font-size: .98rem; }
.main-header h1                       { font-size: 1.55rem !important; }
/* the marketing hero keeps its own fluid size */
.hero-inkpo h1                        { font-size: clamp(34px, 4.6vw, 54px) !important; }

/* ==========================================================================
   5. inkpo layout additions
   ========================================================================== */

/* accent CTA — keeps the nav button from disappearing into the purple page */
.btn-accent                           { background-color: var(--ink-accent) !important;
                                        border-color: var(--ink-accent) !important;
                                        color: #fff !important; }
.btn-accent:hover, .btn-accent:focus  { background-color: var(--ink-accent-hover) !important;
                                        border-color: var(--ink-accent-hover) !important;
                                        color: #fff !important; }

/* marketing shell (index.html) */
.site-nav                             { background: #fff; border-bottom: 1px solid var(--ink-border-soft);
                                        position: sticky; top: 0; z-index: 60; }
.site-nav img                         { height: 84px; width: auto; }
@media (max-width: 575px) { .site-nav img { height: 60px; } }
/* masthead runs dark — needs a transparent-background mascot PNG */
.hero-inkpo                           { position: relative; overflow: hidden; color: #fff;
                                        background: radial-gradient(120% 140% at 12% 0%,
                                          #3A1670 0%, #1F0C46 52%, var(--ink-night) 100%); }
.hero-inkpo h1, .hero-inkpo h2,
.hero-inkpo h3, .hero-inkpo h4,
.hero-inkpo strong                    { color: #fff !important; }
.hero-inkpo .lede-dark                { color: #CFC3EA !important; }
.hero-inkpo .container-xxl            { position: relative; z-index: 2; }
.hero-inkpo h1                        { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08;
                                        letter-spacing: -.03em; }
.hero-inkpo h1 em                     { font-style: normal; color: var(--ink-yellow); }
.hero-hippo                           { max-width: 380px; width: 100%; }

/* quantity slider */
.qty-grid                             { display: grid; grid-template-columns: 132px 1fr; gap: 18px;
                                        align-items: center; }
input[type=range].ink-range           { -webkit-appearance: none; appearance: none; width: 100%;
                                        height: 6px; border-radius: 99px; outline: 0; cursor: pointer;
                                        background: linear-gradient(90deg,
                                          var(--ink-primary) 0%, var(--ink-primary) var(--pct, 10%),
                                          var(--ink-primary-200) var(--pct, 10%), var(--ink-primary-200) 100%); }
input[type=range].ink-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px;
                                        border-radius: 50%; background: #fff; cursor: grab;
                                        border: 3px solid var(--ink-primary);
                                        box-shadow: 0 1px 4px rgba(36, 16, 86, .25); }
input[type=range].ink-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%;
                                        background: #fff; border: 3px solid var(--ink-primary);
                                        box-shadow: 0 1px 4px rgba(36, 16, 86, .25); }

/* segmented control */
.seg-ink                              { display: flex; border: 1px solid var(--ink-border);
                                        border-radius: 8px; overflow: hidden; background: #fff; }
.seg-ink button                       { flex: 1; border: 0; background: #fff; padding: 10px 8px;
                                        font-size: .95rem; color: var(--ink-deep-300); cursor: pointer;
                                        border-right: 1px solid var(--ink-border); white-space: nowrap;
                                        transition: .12s; }
.seg-ink button:last-child            { border-right: 0; }
.seg-ink button:hover                 { background: var(--ink-primary-100); }
.seg-ink button[aria-pressed=true]    { background: var(--ink-deep); color: #fff; }

/* print-location tiles */
.place-tile                           { border: 1px solid var(--ink-border-soft); border-radius: 10px;
                                        padding: 12px; background: #fff; height: 100%; transition: .15s; }
.place-tile.on                        { border-color: var(--ink-primary);
                                        background: var(--ink-primary-100);
                                        box-shadow: 0 0 0 3px rgba(108, 60, 228, .12); }
.place-tile input[type=checkbox]      { accent-color: var(--ink-primary); width: 15px; height: 15px; }

/* price rail */
.price-rail                           { position: sticky; top: 124px; }
.price-head                           { background: var(--ink-deep); color: #fff;
                                        border-radius: 10px 10px 0 0; padding: 18px 20px; }
.price-head .amount                   { font-size: 2.7rem; font-weight: 700; letter-spacing: -.045em;
                                        line-height: 1; color: #fff; }
.price-head .price-label              { font-size: .82rem; font-weight: 600; letter-spacing: .14em;
                                        color: #fff; opacity: .9; margin-bottom: 2px !important; }
.price-head .price-sub                { font-size: .82rem; color: #fff; opacity: .78; }
.price-head .amount .per-unit         { font-size: 1.05rem; font-weight: 500; letter-spacing: 0;
                                        color: #fff; opacity: .8; margin-left: 6px;
                                        white-space: nowrap; }
.turn-chip                            { background: var(--ink-primary-100); border-radius: 10px;
                                        padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
.turn-chip b                          { font-size: 1.6rem; line-height: 1; color: var(--ink-primary); }
@media (max-width: 991px) { .price-rail { position: static; } }

/* who-does-what lanes */
.lane-ink                             { border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.lane-ink.you                         { background: var(--ink-primary-100); border: 1px solid var(--ink-primary-200); }
.lane-ink.us                          { background: var(--ink-surface);     border: 1px solid var(--ink-border-soft); }
.lane-tag                             { border-radius: 10px; color: #fff; text-align: center;
                                        padding: 10px 8px; height: 100%;
                                        display: flex; flex-direction: column; justify-content: center; }
.lane-ink.you .lane-tag               { background: var(--ink-primary); }
.lane-ink.us  .lane-tag               { background: var(--ink-deep); }
.lane-cell                            { background: #fff; border: 1px solid var(--ink-border-soft);
                                        border-radius: 10px; padding: 14px; height: 100%; position: relative; }
.lane-cell .step-n                    { position: absolute; top: -11px; left: 12px; width: 24px; height: 24px;
                                        border-radius: 50%; color: #fff; font-size: .82rem; font-weight: 700;
                                        display: flex; align-items: center; justify-content: center; }
.lane-ink.you .step-n                 { background: var(--ink-primary); }
.lane-ink.us  .step-n                 { background: var(--ink-deep); }
.lane-gap                             { display: flex; align-items: center; min-height: 44px; }
.lane-gap i                           { display: block; width: 100%; border-top: 2px dashed var(--ink-border); }
@media (max-width: 991px) { .lane-gap { display: none; }
                            .lane-cell .step-n { position: static; margin-bottom: 8px; } }

/* PO drop zone */
.po-drop                              { position: relative; display: flex; align-items: center; gap: 14px;
                                        border: 1.5px dashed var(--ink-primary-300); border-radius: 10px;
                                        padding: 14px 16px; background: var(--ink-primary-100);
                                        cursor: pointer; transition: .15s; }
.po-drop:hover, .po-drop.hot          { border-color: var(--ink-primary); }
.po-drop input                        { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }


/* ==========================================================================
   6. Print-shop energy — halftones, spot splats, CMYK accents
   Applied to the selling sections only. The quote tool stays calm on white:
   texture behind a working form costs more in legibility than it earns.
   ========================================================================== */

/* halftone field — the dot screen a printed piece is actually made of */
.halftone-dark::before,
.halftone-light::before               { content: ""; position: absolute; inset: 0; z-index: 1;
                                        pointer-events: none; background-size: 10px 10px; }
.halftone-dark::before                { background-image: radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.3px); }
.halftone-light::before               { background-image: radial-gradient(rgba(36,16,86,.10) 1.2px, transparent 1.3px); }

/* soft spot-colour splats behind the type */
.splat                                { position: absolute; border-radius: 50%; filter: blur(46px);
                                        pointer-events: none; z-index: 0; opacity: .55; }
.splat.c { background: var(--ink-cyan); }
.splat.m { background: var(--ink-magenta); }
.splat.y { background: var(--ink-yellow); }

/* CMYK feature ticks */
.feat                                 { display: flex; gap: 12px; align-items: flex-start; }
.feat .tick                           { flex: none; width: 28px; height: 28px; border-radius: 50%;
                                        display: flex; align-items: center; justify-content: center;
                                        border: 2.5px solid currentColor; font-size: 13px; }
.feat.c .tick { color: var(--ink-cyan); }
.feat.m .tick { color: var(--ink-magenta); }
.feat.y .tick { color: var(--ink-yellow); }
.feat.k .tick { color: #fff; }
.feat.p .tick { color: var(--ink-primary); }
.feat.d .tick { color: var(--ink-deep); }
.feat p                               { color: #CFC3EA; margin: 0; font-size: .95rem; }
.feat p strong                        { color: #fff; }


/* brush-swash highlight behind a line, like the pink stroke on the mailer */
.swash                                { display: inline-block; padding: 4px 14px; border-radius: 3px;
                                        background: var(--ink-magenta); color: #fff !important;
                                        transform: rotate(-.6deg); }

/* the three-beat callout */
.beats                                { border: 2px solid rgba(255,255,255,.22); border-radius: 14px;
                                        padding: 28px 32px; background: rgba(255,255,255,.05);
                                        display: flex; flex-wrap: wrap; align-items: baseline;
                                        gap: 8px 26px; }
.beats span                           { font-family: 'Outfit', sans-serif; font-weight: 700;
                                        font-size: clamp(22px, 2.9vw, 42px); letter-spacing: -.025em;
                                        line-height: 1.12; }
/* the third beat takes its own line, so the box reads as two statements */
.beats .b3                            { flex-basis: 100%; }
@media (max-width: 575px) { .beats { padding: 20px 22px; } }
.beats .b1 { color: #fff; }
.beats .b2 { color: var(--ink-yellow); }
.beats .b3 { color: var(--ink-cyan); }

/* CMYK rule — four spots, used as a section divider */
.cmyk-rule                            { height: 5px; border-radius: 99px; border: 0; opacity: 1;
                                        background: linear-gradient(90deg,
                                          var(--ink-cyan) 0 25%, var(--ink-magenta) 25% 50%,
                                          var(--ink-yellow) 50% 75%, var(--ink-night) 75% 100%); }

/* ==========================================================================
   7. Capability cards — fixed rhythm instead of run-on sentences
   ========================================================================== */
.run-card                             { display: flex; flex-direction: column; padding: 22px !important; }
.run-head                             { display: flex; align-items: center; gap: 13px;
                                        padding-bottom: 14px; margin-bottom: 14px;
                                        border-bottom: 1px solid var(--ink-border-soft); }
.run-head h4                          { font-size: 1.05rem; line-height: 1.2; }
.run-icon                             { flex: none; width: 42px; height: 42px; border-radius: 50%;
                                        background: var(--ink-primary); color: #fff;
                                        display: flex; align-items: center; justify-content: center;
                                        font-size: 16px; }
.run-list                             { list-style: none; margin: 0; padding: 0; }
.run-list li                          { position: relative; padding-left: 18px; margin-bottom: 8px;
                                        font-size: .9rem; line-height: 1.45; color: var(--ink-deep-300);
                                        text-wrap: balance; }
.run-list li:last-child               { margin-bottom: 0; }
.run-list li::before                  { content: ""; position: absolute; left: 0; top: .55em;
                                        width: 6px; height: 6px; border-radius: 2px;
                                        background: var(--ink-primary); }

/* ==========================================================================
   8. Who we print for — anonymised shop types instead of a logo wall
   ========================================================================== */
.shop-bar                             { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
                                        background: var(--ink-border-soft); border: 1px solid var(--ink-border-soft);
                                        border-radius: 12px; overflow: hidden; }
.shop-bar > div                       { background: #fff; padding: 18px 20px; }
.shop-bar b                           { display: block; font-family: 'Outfit', sans-serif; font-weight: 700;
                                        font-size: 1.9rem; line-height: 1; letter-spacing: -.04em;
                                        color: var(--ink-primary); margin-bottom: 5px; }
.shop-bar span                        { font-size: .84rem; line-height: 1.4; color: var(--ink-deep-300); }

.shop-card                            { background: #fff; border: 1px solid var(--ink-border-soft);
                                        border-radius: 12px; padding: 20px; display: flex; flex-direction: column; }
/* small shops carry the accent — they are the focus, and it should be visible */
.shop-card.featured                   { border-color: var(--ink-primary-200);
                                        box-shadow: inset 4px 0 0 var(--ink-primary); }
.shop-head                            { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.shop-icon                            { flex: none; width: 34px; height: 34px; border-radius: 9px;
                                        background: var(--ink-primary-100); color: var(--ink-primary);
                                        display: flex; align-items: center; justify-content: center; font-size: 14px; }
.shop-card.featured .shop-icon        { background: var(--ink-primary); color: #fff; }
.shop-tag                             { margin-left: auto; font-family: var(--mono, monospace); font-size: .6rem;
                                        letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
                                        padding: 4px 10px; border-radius: 99px;
                                        background: var(--ink-surface); color: var(--ink-deep-300); }
.shop-tag.small-shop                  { background: var(--ink-primary); color: #fff; }
.shop-card h4                         { font-size: 1.02rem; margin-bottom: 8px; }
.shop-card > p                        { font-size: .88rem; line-height: 1.5; margin: 0 0 16px;
                                        color: var(--ink-deep-300); }
.shop-stat                            { margin-top: auto; padding-top: 14px;
                                        border-top: 1px solid var(--ink-border-soft); }
.shop-stat b                          { display: block; font-family: 'Outfit', sans-serif; font-weight: 700;
                                        font-size: 1.35rem; letter-spacing: -.03em; line-height: 1.1;
                                        color: var(--ink-deep); }
.shop-stat span                       { font-size: .8rem; color: var(--ink-deep-300); }
.shop-note                            { font-size: .78rem; color: var(--ink-deep-300); }
@media (max-width: 767px) { .shop-bar { grid-template-columns: 1fr; } }

/* small-run notice under the quantity control */
.smallrun-note                        { font-size: .8rem; line-height: 1.45; margin: 8px 0 0;
                                        padding: 9px 12px; border-radius: 8px;
                                        background: var(--ink-primary-100); color: var(--ink-deep);
                                        border-left: 3px solid var(--ink-primary); }

/* ==========================================================================
   9. Free inbound freight — SanMar PSST / S&S CDN
   ========================================================================== */
.freight-steps                        { display: grid; gap: 10px; }
.freight-steps > div                  { display: flex; align-items: center; gap: 13px;
                                        background: #fff; border: 1px solid var(--ink-border-soft);
                                        border-radius: 10px; padding: 12px 14px; }
.freight-steps b                      { flex: none; width: 26px; height: 26px; border-radius: 50%;
                                        background: var(--ink-primary); color: #fff;
                                        font-family: 'Outfit', sans-serif; font-size: .82rem; font-weight: 700;
                                        display: flex; align-items: center; justify-content: center; }
.freight-steps span                   { font-size: .89rem; color: var(--ink-deep); }

.freight-card                         { background: #fff; border: 1px solid var(--ink-border-soft);
                                        border-radius: 12px; padding: 20px; display: flex; flex-direction: column;
                                        border-top: 4px solid var(--ink-primary); }
.freight-tag                          { font-family: var(--mono, monospace); font-size: .6rem;
                                        letter-spacing: .14em; text-transform: uppercase;
                                        color: var(--ink-deep-300); display: block; margin-bottom: 4px; }
.freight-card h4                      { font-size: 1.55rem; letter-spacing: -.03em; margin-bottom: 2px;
                                        color: var(--ink-primary); }
.freight-sub                          { font-size: .8rem; color: var(--ink-deep-300); margin: 0 0 14px;
                                        padding-bottom: 12px; border-bottom: 1px solid var(--ink-border-soft); }
.freight-card ul                      { list-style: none; margin: 0 0 14px; padding: 0; }
.freight-card li                      { position: relative; padding-left: 20px; margin-bottom: 8px;
                                        font-size: .86rem; line-height: 1.45; color: var(--ink-deep-300); }
.freight-card li::before              { content: "\2713"; position: absolute; left: 0; top: 0;
                                        color: var(--ink-primary); font-weight: 700; font-size: .82rem; }
.freight-fine                         { margin-top: auto; font-size: .78rem; line-height: 1.45;
                                        color: var(--ink-deep); background: var(--ink-primary-100);
                                        border-radius: 8px; padding: 9px 11px; }
.freight-note                         { font-size: .82rem; color: var(--ink-deep-300); }

/* ==========================================================================
   10. In-page navigation — smooth scroll, clear of the sticky nav
   ========================================================================== */
html                                  { scroll-behavior: smooth; }
#quote, #freight                      { scroll-margin-top: 118px; }
@media (max-width: 575px) { #quote, #freight { scroll-margin-top: 86px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


.web .bg-menu-theme.menu-vertical{
   padding: 0 !important;
}

.btn-2, .web a.btn-2{
   color: #fff !important;
}

.prodect-card-gray i{
   color: var(--ink-primary) !important;
}