@charset "UTF-8";
:root {
  --cbm-primary: #563d7c;
  --cbm-secondary: #6c757d;
  --cbm-success: #198754;
  --mnu-cbm: #faedcb;
  --mnu-vol-weight: #c9e4de;
  --mnu-cubic-feet: #c6def1;
  --mnu-cubic-meter: #dbcdf0;
  --mnu-single-shipping: #f2c6de;
  --mnu-multiple-shipping: #f7d9c4;
  --mnu-clp: #d9edf8;
  --mnu-clp-equal: #dedaf4;
  --mnu-cbm-30: #faedcb1e;
  --mnu-vol-weight-30: #c9e4de1e;
  --mnu-vol-weight-50: #c9e4de32;
  --mnu-vol-weight-70: #c9e4de46;
  --mnu-vol-weight-80: #c9e4de50;
  --mnu-cubic-feet-30: #c6def14e;
  --mnu-cubic-meter-30: #dbcdf04e;
  --mnu-single-shipping-30: #f2c6de1e;
  --mnu-multiple-shipping-30: #f7d9c44e;
  --mnu-clp-50: #d9edf832;
  --mnu-clp-equal-50: #dedaf432;
  --cbm-bg: var(--cbm-primary);
  --cbm-bg-dark: #452c60;
  --cbm-text: #ffffff;
  --cbm-border-light: rgba(255, 255, 255, 0.25);
  --cbm-dropdown-bg: #ffffff;
}

html,
body {
  background: #f7f9fc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  font-display: swap;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.d-none {
  display: none !important;
}

.text-success {
  color: --cbm-success !important;
}

.container {
  max-width: 1180px;
  margin: 0 auto 1.8rem;
  padding: 1.5rem 1rem 0;
}

.p-2 {
  padding: 1rem;
}

.pt-1 {
  padding-top: 0.5rem;
}

.pt-2 {
  padding-top: 1rem;
}

.pb-1 {
  padding-bottom: 0.5rem;
}

.pb-2 {
  padding-bottom: 1rem;
}

.mt-2 {
  margin-top: 1rem;
}

.lh-13 {
  line-height: 1.3rem;
}

.lh-15 {
  line-height: 1.5rem;
}

.text-center {
  margin: 0 auto;
}

.text-primary {
  color: var(--cbm-primary);
}

.img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* CLS protection for header ad below menu */
.top-ad {
  display: block;
  min-height: 120px;
}

/* Desktop & Tablet */
@media (min-width: 768px) {
  .top-ad {
    min-height: 120px;
  }
}
/* Mobile */
@media (max-width: 767px) {
  top-ad {
    min-height: 100px;
  }
  .mobile_in_content_ad {
    min-height: 100px;
  }
}
/* =============================
  Breadcrumb (under menu, above H1)
  ============================= */
.cbm-breadcrumb {
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  color: #6c757d;
}

.cbm-breadcrumb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.cbm-breadcrumb-item a {
  text-decoration: none;
  color: #6c757d;
}

.cbm-breadcrumb-item a:hover {
  text-decoration: underline;
  color: #563d7c;
  /* CBM primary */
}

.cbm-breadcrumb-separator {
  color: #adb5bd;
}

.cbm-breadcrumb-current {
  font-weight: 500;
  color: #343a40;
}

/* company under brand */
.cbm-footer-company {
  margin-top: 16px;
}

.cbm-footer-company .cbm-footer-heading {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* centered apps strip */
.cbm-footer-apps {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 16px 20px 8px;
  text-align: center;
}

.cbm-footer-apps-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 16px 32px;
}

.cbm-footer-app-item {
  min-width: 140px;
}

.cbm-footer-app-label {
  font-size: 0.8rem;
  opacity: 0.9;
  margin-bottom: 6px;
}

.cbm-footer-app-note {
  font-size: 0.75rem;
  opacity: 0.75;
  margin-top: 4px;
}

/* make sure bottom bar sits after apps with clear separation */
.cbm-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 12px 20px 20px;
}

:root {
  --cbm-footer-bg: #563d7c;
  --cbm-footer-bg-dark: #3c2859;
  --cbm-footer-text: #f5f1ff;
  --cbm-footer-text-muted: #cabbec;
  --cbm-footer-divider: rgba(255, 255, 255, 0.12);
}

/* base */
.cbm-footer {
  background: var(--cbm-footer-bg);
  color: var(--cbm-footer-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 2.5rem;
}

.cbm-footer a {
  color: inherit;
  text-decoration: none;
}

.cbm-footer a:hover {
  text-decoration: underline;
}

/* main top area */
.cbm-footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.75rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(260px, 360px) 3rem minmax(0, 1fr);
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 2rem 3rem;
  border-bottom: 1px solid var(--cbm-footer-divider);
}

/* brand column */
.cbm-footer-brand-title-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.cbm-footer-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid #fff;
}

.cbm-footer-brand-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cbm-footer-brand-text {
  margin: 0 0 1.25rem;
  color: var(--cbm-footer-text-muted);
}

.cbm-footer-app-label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.cbm-footer-app-note {
  font-size: 0.78rem;
  color: var(--cbm-footer-text-muted);
  margin-top: 0.25rem;
}

/* links grid */
.cbm-footer-links {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr) 2.5rem minmax(0, 1fr);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  -webkit-column-gap: 2.5rem;
     -moz-column-gap: 2.5rem;
          column-gap: 2.5rem;
  row-gap: 1.75rem;
}

.cbm-footer-group-api {
  min-width: 200px;
}

.cbm-footer-heading {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cbm-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cbm-footer-list li {
  margin-bottom: 0.35rem;
}

.cbm-footer-list a {
  font-size: 0.9rem;
  color: var(--cbm-footer-text-muted);
}

.cbm-footer-list a:hover {
  color: #ffffff;
}

/* bottom strip */
.cbm-footer-bottom {
  background: var(--cbm-footer-bg-dark);
}

.cbm-footer-bottom-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem 1.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.cbm-footer-social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.cbm-footer-social a {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--cbm-footer-divider);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--cbm-footer-text-muted);
}

.cbm-footer-social a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.cbm-footer-copy {
  font-size: 0.8rem;
  color: var(--cbm-footer-text-muted);
}

/* responsive */
@media (max-width: 960px) {
  .cbm-footer-inner {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .cbm-footer-links {
    -ms-grid-columns: (minmax(0, 1fr))[2];
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .cbm-footer-inner {
    padding-inline: 1rem;
  }
  .cbm-footer-links {
    -ms-grid-columns: 1fr 1.5rem 1fr;
    grid-template-columns: 1fr 1fr;
    -webkit-column-gap: 1.5rem;
       -moz-column-gap: 1.5rem;
            column-gap: 1.5rem;
  }
  .cbm-footer-bottom-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.cbm-header-inner {
  padding: 0 0 0.75rem;
}

/* Big modern title */
.cbm-header-title {
  font-size: 2.15rem;
  font-weight: 700;
  color: var(--cbm-primary);
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  position: relative;
  letter-spacing: -0.5px;
}

/* Gradient underline (DISTINCT from Style A) */
.cbm-header-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 85px;
  /* bigger line */
  height: 5px;
  /* thicker line */
  border-radius: 4px;
  background: -webkit-gradient(linear, left top, right top, from(#563d7c), to(#7a5db0));
  background: linear-gradient(90deg, #563d7c, #7a5db0);
}

/* Soft tagline below H1 */

/* Body text */
.cbm-header-text {
  font-size: 1rem;
  font-weight: 300;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

/* ==================== Responsive ==================== */
@media (max-width: 768px) {
  .cbm-header-title {
    font-size: 1.7rem;
  }
  .cbm-header-title::after {
    width: 60px;
    height: 4px;
  }
}
.calculator-section {
  padding: 1.75rem 1rem 2.25rem;
  color: #212529;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.calculator-section * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* ========== Layout: calculator left, ad right ========== */
.calculator-layout {
  max-width: 1180px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.5rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

/* Right ad column */

.calculator-sidebar-right {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 300px;
          flex: 0 0 300px;
  /* adjust if your ad has different width */
}

.calculator-main {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

/* ========== Tabs ========== */

/* hide on mobile */

/* ========== Card ========== */
.calculator-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e2dced;
  -webkit-box-shadow: 0 10px 26px rgba(33, 37, 41, 0.08);
          box-shadow: 0 10px 26px rgba(33, 37, 41, 0.08);
}

.calculator-card-inner {
  padding: 1.25rem 1.5rem 1.6rem;
}

/* ========== Rows & Sections ========== */
.calc-row {
  margin-top: 0.7rem;
}

.calc-row:first-of-type {
  margin-top: 0;
}

/* Mode row (Cubic meter + cubic feet button) */

/* Section headings (Inputs / Results) */
.calc-row-section-heading {
  margin-top: 1rem;
}

.calc-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #6c757d;
  border-bottom: 1px solid #e2dced;
  padding-bottom: 0.3rem;
  margin: 0;
}

/* ========== Labels & Inputs ========== */

.calc-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #6c757d;
}

.calc-input,
.calc-select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #d5cde8;
  padding: 0.4rem 0.6rem;
  font-size: 0.86rem;
  outline: none;
  background: #fdfbff;
  -webkit-transition: border-color 0.15s ease, background 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, background 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, -webkit-box-shadow 0.15s ease;
}

.calc-input:focus,
.calc-select:focus {
  border-color: #563d7c;
  -webkit-box-shadow: 0 0 0 2px rgba(86, 61, 124, 0.2);
          box-shadow: 0 0 0 2px rgba(86, 61, 124, 0.2);
  background: #ffffff;
}

/* ========== Inputs main block (2 lines) ========== */
.calc-row-mainline {
  margin-top: 0.8rem;
}

/* LINE 1 + LINE 2 containers */
.calc-mainline-line1,
.calc-mainline-line2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.6rem;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.calc-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 90px;
          flex: 1 1 90px;
  min-width: 0;
}

/* make second line a bit more stable */
.calc-mainline-line2 .calc-item {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 120px;
          flex: 1 1 120px;
}

/* inch inputs under main */

/* ========== Multi-column rows (weights & containers) ========== */

/* Loader */

/* ========== Results ========== */
.calc-row-results {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 0.7rem minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.calc-result {
  padding: 0.6rem 0.8rem 0.8rem;
  border-radius: 12px;
  background: #f6f3fb;
  border: 1px solid #e2dced;
}

.calc-result-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.calc-result-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cbm-primary);
}

.calc-input-result {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  height: 2.3rem;
}

/* ========== Responsive ========== */
@media (max-width: 991px) {
  .calculator-layout {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1.2rem;
  }
  .calculator-main {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .calculator-sidebar-right {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .calculator-card-inner {
    padding: 1.1rem 1.1rem 1.4rem;
    margin-bottom: 1rem;
  }
}
@media (max-width: 768px) {
  /* hide right ad on mobile, calculator full width */
  .calculator-sidebar-right {
    display: none;
  }
  .calculator-layout {
    gap: 1rem;
  }
  .calc-row-results {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .calc-mainline-line1,
  .calc-mainline-line2 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media (max-width: 540px) {
  .calc-mainline-line1,
  .calc-mainline-line2 {
    gap: 0.5rem;
  }
  .calc-item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 48%;
            flex: 1 1 48%;
  }
}
@media (max-width: 420px) {
  .calculator-section {
    padding-inline: 0.75rem;
  }
}
/* ===== BELOW CALCULATOR 2-COLUMN LAYOUT ===== */

/* Left column: stack sections with visible gaps */

/* Card inside each section */
.section-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 1.5rem 1.7rem;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

/* Slightly tinted version for disclaimer etc. */

/* ===== FLAT TOOLS LIST ===== */
.cbm-flat-header {
  margin-bottom: 1.1rem;
}

.cbm-flat-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #222;
  margin: 0 0 0.35rem;
}

.cbm-flat-subtitle {
  font-size: 0.95rem;
  font-weight: 300;
  color: #6c757d;
  max-width: 720px;
  margin: 0;
}

/* each tool item */

/* hover fill */

/* content + CTA above overlay */

/* per-tool hover color */

/* ===== DISCLAIMER ===== */

/* ===== BOTTOMTEXT / TECHNICAL BLOCKS ===== */

/* ===== BLOG (COMPACT ONE-LINE ITEMS) ===== */

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .section-card {
    padding-inline: 1.1rem;
  }
}
/* ========== MULTI-CALCULATOR PROMO BLOCK ========== */

/* 2 cards side-by-side on desktop, stacked on mobile */

/* gradient accent strip at top of card */

/* specific background tints for each card */

/* header: icon + title + badge */

/* body text + bullets */

/* buttons – based on cbm-blog-link style but reused here */

/* responsive tweaks */
/* Improve list spacing just for this section */

/* List bullet alignment fix */

/* Better spacing below final paragraph */

/* Make the whole block breathe */

/* NAV WRAPPER */
.cbm-nav {
  width: 100%;
  background: var(--cbm-bg);
  color: var(--cbm-text);
  padding: 12px 16px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
}

.cbm-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* BRAND */
.cbm-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  color: #fff;
}

.cbm-logo img {
  width: 32px;
  height: auto;
  margin-right: 8px;
}

.cbm-logo span {
  font-size: 1.1rem;
  font-weight: 600;
}

/* TOGGLE (MOBILE) */
.cbm-menu-toggle {
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 4px;
}

.cbm-menu-toggle span {
  display: block;
  width: 22px;
  height: 3px;
  margin: 3px 0;
  background: #fff;
  border-radius: 1px;
}

/* LINKS CONTAINER */
.cbm-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-left: 24px;
}

.cbm-links-left,
.cbm-links-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

.cbm-flex-spacer {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/* COMMON ITEM/LINK */
.cbm-item {
  position: relative;
}

.cbm-link {
  border: none;
  background: none;
  color: #fff;
  font-size: 0.95rem;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  text-decoration: none;
}

.cbm-link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

/* LOGIN BUTTON */
.cbm-login-btn {
  border: none;
  background: #198754;
  color: #fff;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

/* DROPDOWNS - BASE */
.has-dropdown {
  position: relative;
}

.cbm-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  background: var(--cbm-dropdown-bg);
  color: #333;
  border-radius: 4px;
  padding: 8px 0;
  display: none;
  -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
          box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
  z-index: 999;
}

/* global dropdown font size */
.cbm-dropdown a,
.cbm-dropdown button,
.cbm-mega-item,
.cbm-dropdown-user a,
.cbm-dropdown-user button {
  font-size: 0.85rem;
}

/* MEGA DROPDOWNS (BASE) */
.cbm-dropdown-mega {
  padding: 10px 12px;
  background: #ffffff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: none;
}

/* Mega items */
.cbm-mega-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  -webkit-transition: background 0.15s ease, -webkit-box-shadow 0.15s ease, -webkit-filter 0.15s ease;
  transition: background 0.15s ease, -webkit-box-shadow 0.15s ease, -webkit-filter 0.15s ease;
  transition: background 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  transition: background 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, -webkit-box-shadow 0.15s ease, -webkit-filter 0.15s ease;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.cbm-mega-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.cbm-mega-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.cbm-mega-text strong {
  font-size: 0.9rem;
}

.cbm-mega-text span {
  font-size: 0.75rem;
  opacity: 0.95;
}

/* USER / LANGUAGE DROPDOWN */
.cbm-dropdown-user {
  min-width: 210px;
  padding: 6px 0;
  display: none;
  background: #ffffff;
  color: #333;
}

/* align right */
.cbm-links-right .cbm-dropdown-user {
  left: auto;
  right: 0;
}

.cbm-dropdown-user a,
.cbm-dropdown-item {
  width: 100%;
  border: none;
  background: none;
  color: #333;
  padding: 7px 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.cbm-dropdown-user a:hover,
.cbm-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.cbm-dropdown-item-disabled {
  opacity: 0.6;
  cursor: default;
}

.cbm-dropdown-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin: 4px 0;
}

/* LANGUAGE LABEL */
.cbm-lang-label {
  font-size: 0.9rem;
}

/* product colors for calculators (used both desktop & mobile) */
.cbm-cal-list .cbm-mega-item:nth-child(1) {
  background: var(--mnu-cbm);
}

.cbm-cal-list .cbm-mega-item:nth-child(2) {
  background: var(--mnu-cubic-meter);
}

.cbm-cal-list .cbm-mega-item:nth-child(3) {
  background: var(--mnu-cubic-feet);
}

.cbm-cal-list .cbm-mega-item:nth-child(4) {
  background: var(--mnu-vol-weight);
}

.cbm-cal-list .cbm-mega-item:nth-child(5) {
  background: var(--mnu-single-shipping);
}

.cbm-cal-list .cbm-mega-item:nth-child(6) {
  background: var(--mnu-multiple-shipping);
}

/* CLP colors */
.cbm-links-left .mega-parent:nth-child(2) .cbm-mega-item:nth-child(1) {
  background: var(--mnu-clp);
}

.cbm-links-left .mega-parent:nth-child(2) .cbm-mega-item:nth-child(2) {
  background: var(--mnu-clp-equal);
}

/* =========================================================
   DESKTOP (>= 961px)
   ========================================================= */
@media (min-width: 961px) {
  /* open dropdowns on hover */
  .has-dropdown:hover > .cbm-dropdown,
  .cbm-dropdown:hover {
    display: block;
  }
  .has-dropdown:hover > .cbm-dropdown-user,
  .cbm-dropdown-user:hover {
    display: block;
  }
  /* CALCULATORS: first mega-parent */
  .cbm-links-left .mega-parent:first-child {
    position: relative;
  }
  .cbm-links-left .mega-parent:first-child .cbm-dropdown-mega {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    display: none;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
    z-index: 999;
    max-width: 960px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .cbm-links-left .mega-parent:first-child:hover .cbm-dropdown-mega,
  .cbm-links-left .mega-parent:first-child .cbm-dropdown-mega:hover {
    display: block;
  }
  /* layout: arrow | 3 cards | arrow */
  .cbm-cal-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 10px;
  }
  .cbm-cal-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 12px;
  }
  .cbm-cal-list .cbm-mega-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 280px;
            flex: 0 0 280px;
    /* change this to make tiles wider/narrower */
    border-radius: 6px;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    color: #343a40;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: none;
    /* JS shows 3 at a time */
  }
  .cbm-cal-list .cbm-mega-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
  }
  .cbm-cal-list .cbm-mega-item:hover {
    -webkit-filter: brightness(1.05);
            filter: brightness(1.05);
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  }
  .cbm-cal-arrow {
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: #f8f9fa;
    color: #333;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .cbm-cal-arrow:hover {
    background: #e9ecef;
  }
  .cbm-cal-arrow-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
  }
  /* CLP mega (second mega-parent) */
  .cbm-links-left .mega-parent:nth-child(2) {
    position: relative;
  }
  .cbm-links-left .mega-parent:nth-child(2) .cbm-dropdown-mega-two {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    display: none;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
    gap: 12px;
    z-index: 999;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    min-width: 600px;
  }
  .cbm-links-left .mega-parent:nth-child(2):hover .cbm-dropdown-mega-two,
  .cbm-links-left .mega-parent:nth-child(2) .cbm-dropdown-mega-two:hover {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .cbm-links-left .mega-parent:nth-child(2) .cbm-mega-item {
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #343a40;
    width: 280px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .cbm-links-left .mega-parent:nth-child(2) .cbm-mega-item:hover {
    -webkit-filter: brightness(1.05);
            filter: brightness(1.05);
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  }
}
/* =========================================================
   MOBILE (<= 960px)
   ========================================================= */
@media (max-width: 960px) {
  .cbm-menu-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .cbm-nav-inner {
    max-width: none;
    margin: 0;
  }
  .cbm-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--cbm-bg);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 0;
    padding: 8px 8px 12px;
    border-top: 1px solid var(--cbm-border-light);
    display: none;
    z-index: 998;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow-x: hidden;
    margin-left: 0px !important;
  }
  .cbm-links.cbm-open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .cbm-links-left,
  .cbm-links-right {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 0;
  }
  .cbm-flex-spacer {
    display: none;
  }
  .cbm-link,
  .cbm-login-btn {
    width: 100%;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding: 10px 18px;
  }
  .cbm-login-btn {
    margin-top: 4px;
  }
  /* white panel inside purple drawer */
  .cbm-dropdown {
    position: static;
    width: 100%;
    margin: 6px 0;
    padding: 12px 12px;
    -webkit-box-shadow: none;
            box-shadow: none;
    border-radius: 12px;
    background: #ffffff;
    color: #333;
    border: none;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .cbm-dropdown-user {
    background: #ffffff;
    color: #333;
  }
  .cbm-dropdown-user a,
  .cbm-dropdown-item {
    color: #333;
  }
  /* no hover opening on mobile, JS toggles .open */
  .has-dropdown:hover > .cbm-dropdown {
    display: none;
  }
  .has-dropdown.open > .cbm-dropdown {
    display: block;
  }
  /* calculators + CLP cards stacked with spacing */
  .cbm-cal-list .cbm-mega-item,
  .cbm-dropdown-mega-two .cbm-mega-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    padding: 14px 16px;
    border-radius: 8px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.08);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .cbm-cal-list .cbm-mega-item:last-child,
  .cbm-dropdown-mega-two .cbm-mega-item:last-child {
    margin-bottom: 0;
  }
  .cbm-cal-grid {
    display: block;
  }
  .cbm-cal-arrow {
    display: none;
  }
}
/* Wrapper row */

/* Group that behaves like segmented control */
.unit-toggle-group {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 2px;
  border-radius: 999px;
  background: #f3f4f6;
  /* light grey pill background */
}

/* Each option = pill */
.unit-option {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* Hide default radio but keep it accessible */
.unit-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Visual pill */
.unit-label {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  -webkit-transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}

/* Default (unselected) */
.unit-label {
  background: transparent;
  color: #333;
}

/* Hover effect */
.unit-option:hover .unit-label {
  background: #e5e7eb;
}

/* ✅ Selected state – real toggle look */
.unit-radio:checked + .unit-label {
  background: var(--cbm-primary);
  /* your brand blue if you want */
  color: #fff;
  border-color: var(--cbm-secondary);
  -webkit-box-shadow: 0 0 0 1px rgba(0, 90, 156, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 90, 156, 0.2);
}

/* 📱 Small screens: let pills wrap nicely */
@media (max-width: 480px) {
  .unit-toggle-group {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
/* 📱 Extra-small screens: allow text wrapping if needed */
@media (max-width: 360px) {
  .unit-label {
    white-space: normal;
    /* allow text to wrap on very narrow screens */
    text-align: center;
  }
}
/* ===== Base table wrapper ===== */
.cbm-table-wrap {
  width: 100%;
  overflow-x: auto;
  /* Horizontal scroll on small screens */
}

/* ===== Table base ===== */
.cbm-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  color: #1f2933;
  /* Dark grey text */
  background-color: #ffffff;
}

/* ===== Header ===== */
.cbm-table thead {
  background-color: #f2f6fb;
  /* Light flat header */
}

.cbm-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  border-bottom: 1px solid #d6e3f3;
  white-space: nowrap;
  font-size: 13px;
  color: #005a9c;
  /* Your primary blue */
}

/* ===== Body rows ===== */
.cbm-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #edf2f7;
  font-size: 13px;
}

/* Zebra striping */
.cbm-table tbody tr:nth-child(even) {
  background-color: #f9fbfd;
}

/* Hover state */
.cbm-table tbody tr:hover {
  background-color: #eaf3ff;
}

/* Numeric alignment helper */

/* Center alignment helper */
.cbm-table td.text-center,
.cbm-table th.text-center {
  text-align: center;
}

/* ===== Small, compact version ===== */

/* ===== Optional: subtle outer border/card feel ===== */

.calc-result-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cbm-primary);
}

.calc-input-result {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  height: 2.3rem;
}

/* Medium screens – 2 columns */
@media (max-width: 900px) {
  .calc-row-results-three {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
/* Small screens – 1 column */
@media (max-width: 500px) {
  .calc-row-results-three {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.calc-input,
.calc-select {
  border: 1px solid #e2b99b;
  background: #fcebe1;
}

/* First line: 4 items */

/* First line: 3 items */
.calc-row-results-three {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1.5fr 0.5rem 1fr 0.5rem 1fr;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 0.5rem;
}

/* Second line: 5 items */

.calc-result {
  padding: 0.3rem 0.4rem 0.4rem;
  background: #fcebe1;
  border: 1px solid #e2b99b;
}

/* Card inside each section */
.section-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 1.5rem 1.7rem;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

/* Base flat list for CBM Calculator */

/* Each list item */

/* Remove border from last item */

/* Custom flat "bullet" */

/* Optional: compact variant if you need tighter lists */

/* Tablet: 2 per row */
/* Mobile: 1 per row */