@charset "UTF-8";
/* ====================================================================
   96IDCtx 前台主题 · 平台模板类名兼容层（自写实现，非引入 Bootstrap）
   文件：assets/css/i9-platform-compat.css
   --------------------------------------------------------------------
   主题标识 : 96IDCtx
   为什么要这个文件：
     魔方财务的购物车模板（configureproduct.tpl / viewcart.tpl / product.tpl）
     由平台逻辑驱动，重度使用 Bootstrap 4 的类名（row / col-md-2 / form-control /
     btn-primary / d-flex / mb-3 …）。这些类名是「平台模板的既有书写方式」，
     不能改动（改动即破坏平台契约）。
     本主题按零继承原则 **不引入 Bootstrap 本体**，因此在此**自行实现**这些类名。
   与 Bootstrap 的关系：
     类名对齐（为了不改平台模板），实现 100% 自写，样式全部指向 --i9-* tokens，
     视觉与本主题一致。文件内不含任何 Bootstrap 源码。
   作用域：
     除 .d-none / .invisible 外，其余全部限定在 `.i9-cart` 容器内，
     因此对前台官网页、用户中心（--idc-*）零影响。
   ==================================================================== */

/* ====================================================================
   1. 栅格（Bootstrap 4 断点语义：sm 576 / md 768 / lg 992 / xl 1200）
   ==================================================================== */
.i9-cart .container,
.i9-cart .container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: 15px;
}
.i9-cart .container { max-width: 1140px; }
@media (min-width: 576px) { .i9-cart .container { max-width: 540px; } }
@media (min-width: 768px) { .i9-cart .container { max-width: 720px; } }
@media (min-width: 992px) { .i9-cart .container { max-width: 960px; } }
@media (min-width: 1200px) { .i9-cart .container { max-width: 1140px; } }

.i9-cart .row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -15px;
}
.i9-cart .row > [class*="col-"] {
  position: relative;
  width: 100%;
  min-width: 0;
  padding-inline: 15px;
}
.i9-cart .no-gutters { margin-inline: 0; }
.i9-cart .no-gutters > [class*="col-"] { padding-inline: 0; }

.i9-cart .col { flex: 1 0 0%; max-width: 100%; }
.i9-cart .col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }

.i9-cart .col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.i9-cart .col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.i9-cart .col-3  { flex: 0 0 25%;      max-width: 25%; }
.i9-cart .col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.i9-cart .col-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.i9-cart .col-6  { flex: 0 0 50%;      max-width: 50%; }
.i9-cart .col-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.i9-cart .col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.i9-cart .col-9  { flex: 0 0 75%;      max-width: 75%; }
.i9-cart .col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.i9-cart .col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.i9-cart .col-12 { flex: 0 0 100%;     max-width: 100%; }

@media (min-width: 576px) {
  .i9-cart .col-sm-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .i9-cart .col-sm-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .i9-cart .col-sm-3  { flex: 0 0 25%;      max-width: 25%; }
  .i9-cart .col-sm-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .i9-cart .col-sm-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .i9-cart .col-sm-6  { flex: 0 0 50%;      max-width: 50%; }
  .i9-cart .col-sm-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .i9-cart .col-sm-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .i9-cart .col-sm-9  { flex: 0 0 75%;      max-width: 75%; }
  .i9-cart .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .i9-cart .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .i9-cart .col-sm-12 { flex: 0 0 100%;     max-width: 100%; }
}
@media (min-width: 768px) {
  .i9-cart .col-md-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .i9-cart .col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .i9-cart .col-md-3  { flex: 0 0 25%;      max-width: 25%; }
  .i9-cart .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .i9-cart .col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .i9-cart .col-md-6  { flex: 0 0 50%;      max-width: 50%; }
  .i9-cart .col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .i9-cart .col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .i9-cart .col-md-9  { flex: 0 0 75%;      max-width: 75%; }
  .i9-cart .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .i9-cart .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .i9-cart .col-md-12 { flex: 0 0 100%;     max-width: 100%; }
}
@media (min-width: 992px) {
  .i9-cart .col-lg-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .i9-cart .col-lg-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .i9-cart .col-lg-3  { flex: 0 0 25%;      max-width: 25%; }
  .i9-cart .col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .i9-cart .col-lg-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .i9-cart .col-lg-6  { flex: 0 0 50%;      max-width: 50%; }
  .i9-cart .col-lg-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .i9-cart .col-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .i9-cart .col-lg-9  { flex: 0 0 75%;      max-width: 75%; }
  .i9-cart .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .i9-cart .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .i9-cart .col-lg-12 { flex: 0 0 100%;     max-width: 100%; }
}
@media (min-width: 1200px) {
  .i9-cart .col-xl-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .i9-cart .col-xl-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .i9-cart .col-xl-3  { flex: 0 0 25%;      max-width: 25%; }
  .i9-cart .col-xl-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .i9-cart .col-xl-6  { flex: 0 0 50%;      max-width: 50%; }
  .i9-cart .col-xl-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .i9-cart .col-xl-12 { flex: 0 0 100%;     max-width: 100%; }
}

/* 栅格对齐（平台模板常用 align-items-center / justify-content-*） */
.i9-cart .align-items-start { align-items: flex-start; }
.i9-cart .align-items-center { align-items: center; }
.i9-cart .align-items-end { align-items: flex-end; }
.i9-cart .justify-content-start { justify-content: flex-start; }
.i9-cart .justify-content-center { justify-content: center; }
.i9-cart .justify-content-end { justify-content: flex-end; }
.i9-cart .justify-content-between { justify-content: space-between; }
.i9-cart .flex-row { flex-direction: row; }
.i9-cart .flex-column { flex-direction: column; }
.i9-cart .flex-wrap { flex-wrap: wrap; }
.i9-cart .flex-nowrap { flex-wrap: nowrap; }
.i9-cart .flex-fill { flex: 1 1 auto; }
.i9-cart .order-1 { order: 1; }
.i9-cart .order-2 { order: 2; }

/* ====================================================================
   2. 表单（form-group / form-control / col-form-label / form-check）
   ==================================================================== */
.i9-cart .form-group { margin-bottom: 16px; }
.i9-cart .form-group:last-child { margin-bottom: 0; }

.i9-cart .form-control {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 42px;
  padding: 9px 13px;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--i9-text);
  background: #fff;
  border: 1px solid var(--i9-border-input);
  border-radius: var(--i9-r-sm);
  transition: border-color var(--i9-dur-fast) var(--i9-ease), box-shadow var(--i9-dur-fast) var(--i9-ease);
}
.i9-cart .form-control:focus {
  outline: none;
  border-color: var(--i9-primary);
  box-shadow: 0 0 0 3px var(--i9-primary-ring);
}
.i9-cart .form-control::placeholder { color: var(--i9-text-muted); }
.i9-cart .form-control:disabled,
.i9-cart .form-control[readonly] { background: #F2F5FA; color: var(--i9-text-muted); }
.i9-cart .form-control-sm { min-height: 34px; padding: 5px 11px; font-size: 13px; border-radius: var(--i9-r-xs); }
.i9-cart .form-control-lg { min-height: 50px; padding: 12px 16px; font-size: 16px; }
.i9-cart select.form-control {
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B85' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px 15px;
  appearance: none;
  -webkit-appearance: none;
}
.i9-cart textarea.form-control { min-height: 96px; resize: vertical; }

.i9-cart .col-form-label {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: var(--i9-fw-medium);
  color: var(--i9-text);
  line-height: 1.5;
}
.i9-cart .form-control.is-invalid,
.i9-cart .form-control.is-valid { background-image: none; }
.i9-cart .is-invalid { border-color: var(--i9-danger) !important; }
.i9-cart .is-valid { border-color: var(--i9-success) !important; }
.i9-cart .invalid-feedback,
.i9-cart .valid-feedback { display: block; margin-top: 5px; font-size: 12px; }
.i9-cart .invalid-feedback { color: var(--i9-danger); }
.i9-cart .valid-feedback { color: var(--i9-success); }

.i9-cart .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding-left: 0;
  margin-bottom: 8px;
}
.i9-cart .form-check:last-child { margin-bottom: 0; }
.i9-cart .form-check-input {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--i9-primary);
  cursor: pointer;
}
.i9-cart .form-check-label { font-size: 14px; color: var(--i9-text-body); cursor: pointer; }
.i9-cart .form-check-inline { display: inline-flex; margin-right: 16px; }

.i9-cart .input-group { display: flex; align-items: stretch; width: 100%; }
.i9-cart .input-group > .form-control { flex: 1 1 auto; min-width: 0; }
.i9-cart .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.i9-cart .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.i9-cart .input-group-append,
.i9-cart .input-group-prepend { display: flex; }
.i9-cart .input-group-text {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 14px;
  color: var(--i9-text-secondary);
  background: var(--i9-bg-soft);
  border: 1px solid var(--i9-border-input);
  border-radius: var(--i9-r-sm);
}

/* ====================================================================
   3. 按钮（含 btn-group-toggle：平台用它做配置项选中，必须支持 .active）
   ==================================================================== */
.i9-cart .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: var(--i9-fw-medium);
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  color: var(--i9-text-body);
  background: #fff;
  border: 1px solid var(--i9-border);
  border-radius: var(--i9-r-sm);
  cursor: pointer;
  user-select: none;
  transition: background var(--i9-dur-fast) var(--i9-ease),
              border-color var(--i9-dur-fast) var(--i9-ease),
              color var(--i9-dur-fast) var(--i9-ease),
              box-shadow var(--i9-dur-fast) var(--i9-ease);
}
.i9-cart .btn:hover { color: var(--i9-primary); border-color: var(--i9-primary); background: var(--i9-primary-soft-2); }
.i9-cart .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--i9-primary-ring); }
.i9-cart .btn[disabled],
.i9-cart .btn.disabled { opacity: .5; pointer-events: none; }

.i9-cart .btn-primary {
  color: #fff;
  background: var(--i9-primary);
  border-color: var(--i9-primary);
}
.i9-cart .btn-primary:hover,
.i9-cart .btn-primary.active {
  color: #fff;
  background: var(--i9-primary-hover);
  border-color: var(--i9-primary-hover);
}
.i9-cart .btn-primary:active { background: var(--i9-primary-active); border-color: var(--i9-primary-active); }

.i9-cart .btn-outline-primary { color: var(--i9-primary); border-color: var(--i9-primary); background: #fff; }
.i9-cart .btn-outline-primary:hover,
.i9-cart .btn-outline-primary.active { color: #fff; background: var(--i9-primary); }

.i9-cart .btn-light { color: var(--i9-text-body); background: var(--i9-bg-soft); border-color: var(--i9-border-light); }
.i9-cart .btn-light:hover { color: var(--i9-primary); background: var(--i9-primary-soft); }

.i9-cart .btn-success { color: #fff; background: var(--i9-success); border-color: var(--i9-success); }
.i9-cart .btn-danger { color: #fff; background: var(--i9-danger); border-color: var(--i9-danger); }
.i9-cart .btn-link { color: var(--i9-primary); background: none; border-color: transparent; padding-inline: 6px; }
.i9-cart .btn-link:hover { background: none; text-decoration: underline; }

.i9-cart .btn-sm { padding: 5px 12px; font-size: 13px; border-radius: var(--i9-r-xs); }
.i9-cart .btn-lg { padding: 12px 26px; font-size: 16px; border-radius: var(--i9-r-md); }
.i9-cart .btn-block { display: flex; width: 100%; }

.i9-cart .btn-group { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.i9-cart .btn-group-toggle > .btn { position: relative; }
.i9-cart .btn-group-toggle > .btn input[type="radio"],
.i9-cart .btn-group-toggle > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
.i9-cart .btn-group-toggle > .btn.active {
  color: var(--i9-primary);
  background: var(--i9-primary-soft);
  border-color: var(--i9-primary);
  box-shadow: inset 0 0 0 1px var(--i9-primary);
  font-weight: var(--i9-fw-semibold);
}
.i9-cart .btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.i9-cart .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ====================================================================
   4. 组件：card / badge / alert / table / nav / dropdown / modal / progress
   ==================================================================== */
.i9-cart .card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--i9-border-light);
  border-radius: var(--i9-r-lg);
  box-shadow: var(--i9-sh-xs);
  overflow: hidden;
}
.i9-cart .card-header {
  padding: 15px 20px;
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text);
  background: #fff;
  border-bottom: 1px solid var(--i9-border-light);
}
.i9-cart .card-body { padding: 20px; flex: 1 1 auto; }
.i9-cart .card-footer {
  padding: 14px 20px;
  background: var(--i9-bg-input);
  border-top: 1px solid var(--i9-border-light);
}
.i9-cart .card-title { margin-bottom: 12px; font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-semibold); color: var(--i9-text); }
.i9-cart .card-text { font-size: 14px; color: var(--i9-text-secondary); }

.i9-cart .badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: var(--i9-fw-semibold);
  line-height: 1.7;
  border-radius: var(--i9-r-xs);
}
.i9-cart .badge-primary { color: #fff; background: var(--i9-primary); }
.i9-cart .badge-success { color: #fff; background: var(--i9-success); }
.i9-cart .badge-warning { color: #fff; background: var(--i9-warning); }
.i9-cart .badge-danger { color: #fff; background: var(--i9-danger); }
.i9-cart .badge-light { color: var(--i9-text-secondary); background: var(--i9-bg-soft); }
.i9-cart .badge-pill { border-radius: var(--i9-r-pill); }

.i9-cart .alert {
  position: relative;
  padding: 11px 15px;
  margin-bottom: 15px;
  font-size: 13.5px;
  border: 1px solid transparent;
  border-radius: var(--i9-r-sm);
}
.i9-cart .alert-primary { color: var(--i9-primary-active); background: var(--i9-info-soft); border-color: rgba(22, 119, 255, .18); }
.i9-cart .alert-success { color: #0B7C4C; background: var(--i9-success-soft); border-color: rgba(15, 169, 104, .2); }
.i9-cart .alert-warning { color: #A75E0C; background: var(--i9-warning-soft); border-color: rgba(232, 135, 30, .22); }
.i9-cart .alert-danger  { color: #B33236; background: var(--i9-danger-soft); border-color: rgba(229, 72, 77, .2); }
.i9-cart .alert-light   { color: var(--i9-text-secondary); background: var(--i9-bg-soft); border-color: var(--i9-border-light); }

.i9-cart .table { width: 100%; margin-bottom: 0; font-size: 14px; }
.i9-cart .table th,
.i9-cart .table td { padding: 11px 14px; border-top: 1px solid var(--i9-border-light); vertical-align: middle; }
.i9-cart .table thead th { border-top: 0; border-bottom: 1px solid var(--i9-border); font-weight: var(--i9-fw-semibold); color: var(--i9-text); white-space: nowrap; }
.i9-cart .table-bordered,
.i9-cart .table-bordered th,
.i9-cart .table-bordered td { border: 1px solid var(--i9-border-light); }
.i9-cart .table-striped tbody tr:nth-of-type(odd) { background: var(--i9-primary-soft-2); }

.i9-cart .nav { display: flex; flex-wrap: wrap; }
.i9-cart .nav-link { display: inline-flex; align-items: center; padding: 8px 14px; color: var(--i9-text-secondary); border-radius: var(--i9-r-sm); }
.i9-cart .nav-link:hover { color: var(--i9-primary); }
.i9-cart .nav-link.active { color: var(--i9-primary); background: var(--i9-primary-soft); font-weight: var(--i9-fw-medium); }
.i9-cart .nav-tabs { border-bottom: 1px solid var(--i9-border-light); }
.i9-cart .nav-tabs .nav-link { border-radius: var(--i9-r-sm) var(--i9-r-sm) 0 0; }
.i9-cart .nav-tabs .nav-link.active { background: #fff; border-bottom: 2px solid var(--i9-primary); }

.i9-cart .dropdown-menu {
  position: absolute;
  z-index: 60;
  min-width: 168px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--i9-border-light);
  border-radius: var(--i9-r-sm);
  box-shadow: var(--i9-sh-md);
}
.i9-cart .dropdown-item { display: block; padding: 8px 12px; font-size: 14px; color: var(--i9-text-body); border-radius: var(--i9-r-xs); }
.i9-cart .dropdown-item:hover { color: var(--i9-primary); background: var(--i9-primary-soft-2); }

.i9-cart .modal-content {
  background: #fff;
  border: 0;
  border-radius: var(--i9-r-lg);
  box-shadow: var(--i9-sh-lg);
}
.i9-cart .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--i9-border-light); }
.i9-cart .modal-title { font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-semibold); }
.i9-cart .modal-body { padding: 20px; }
.i9-cart .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--i9-border-light); }

.i9-cart .progress { display: flex; height: 8px; overflow: hidden; background: var(--i9-bg-soft); border-radius: var(--i9-r-pill); }
.i9-cart .progress-bar { height: 100%; background: var(--i9-primary); transition: width var(--i9-dur) var(--i9-ease); }

.i9-cart .list-group { display: flex; flex-direction: column; }
.i9-cart .list-group-item { padding: 11px 14px; background: #fff; border: 1px solid var(--i9-border-light); }
.i9-cart .list-group-item + .list-group-item { border-top: 0; }
.i9-cart .list-group-item:first-child { border-radius: var(--i9-r-sm) var(--i9-r-sm) 0 0; }
.i9-cart .list-group-item:last-child { border-radius: 0 0 var(--i9-r-sm) var(--i9-r-sm); }
.i9-cart .list-group-item.active { color: #fff; background: var(--i9-primary); border-color: var(--i9-primary); }

.i9-cart .breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin-bottom: 0; font-size: 13px; background: none; }
.i9-cart .breadcrumb-item + .breadcrumb-item::before { content: "/"; margin-right: 6px; color: var(--i9-border); }

.i9-cart .close {
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--i9-text-muted);
  background: none;
  border: 0;
  opacity: .7;
}
.i9-cart .close:hover { opacity: 1; color: var(--i9-text); }

/* ====================================================================
   5. 工具类（display / spacing / text / flex / 尺寸）
   ==================================================================== */
.i9-cart .d-none { display: none !important; }
.i9-cart .d-block { display: block !important; }
.i9-cart .d-inline { display: inline !important; }
.i9-cart .d-inline-block { display: inline-block !important; }
.i9-cart .d-flex { display: flex !important; }
.i9-cart .d-inline-flex { display: inline-flex !important; }
.i9-cart .d-table { display: table !important; }
.i9-cart .d-table-cell { display: table-cell !important; }

.i9-cart .w-25 { width: 25% !important; }
.i9-cart .w-50 { width: 50% !important; }
.i9-cart .w-75 { width: 75% !important; }
.i9-cart .w-100 { width: 100% !important; }
.i9-cart .h-100 { height: 100% !important; }
.i9-cart .mw-100 { max-width: 100% !important; }
.i9-cart .mh-100 { max-height: 100% !important; }
.i9-cart .h100p { height: 100%; }

.i9-cart .m-0 { margin: 0 !important; }
.i9-cart .m-1 { margin: 4px !important; }
.i9-cart .m-2 { margin: 8px !important; }
.i9-cart .m-3 { margin: 16px !important; }
.i9-cart .m-4 { margin: 24px !important; }
.i9-cart .mt-0 { margin-top: 0 !important; }
.i9-cart .mt-1 { margin-top: 4px !important; }
.i9-cart .mt-2 { margin-top: 8px !important; }
.i9-cart .mt-3 { margin-top: 16px !important; }
.i9-cart .mt-4 { margin-top: 24px !important; }
.i9-cart .mt-5 { margin-top: 32px !important; }
.i9-cart .mb-0 { margin-bottom: 0 !important; }
.i9-cart .mb-1 { margin-bottom: 4px !important; }
.i9-cart .mb-2 { margin-bottom: 8px !important; }
.i9-cart .mb-3 { margin-bottom: 16px !important; }
.i9-cart .mb-4 { margin-bottom: 24px !important; }
.i9-cart .mb-5 { margin-bottom: 32px !important; }
.i9-cart .ml-0 { margin-left: 0 !important; }
.i9-cart .ml-1 { margin-left: 4px !important; }
.i9-cart .ml-2 { margin-left: 8px !important; }
.i9-cart .ml-3 { margin-left: 16px !important; }
.i9-cart .ml-auto { margin-left: auto !important; }
.i9-cart .mr-0 { margin-right: 0 !important; }
.i9-cart .mr-1 { margin-right: 4px !important; }
.i9-cart .mr-2 { margin-right: 8px !important; }
.i9-cart .mr-3 { margin-right: 16px !important; }
.i9-cart .mr-auto { margin-right: auto !important; }
.i9-cart .mx-auto { margin-inline: auto !important; }
.i9-cart .my-2 { margin-block: 8px !important; }
.i9-cart .my-3 { margin-block: 16px !important; }

.i9-cart .p-0 { padding: 0 !important; }
.i9-cart .p-1 { padding: 4px !important; }
.i9-cart .p-2 { padding: 8px !important; }
.i9-cart .p-3 { padding: 16px !important; }
.i9-cart .p-4 { padding: 24px !important; }
.i9-cart .pt-2 { padding-top: 8px !important; }
.i9-cart .pt-3 { padding-top: 16px !important; }
.i9-cart .pb-2 { padding-bottom: 8px !important; }
.i9-cart .pb-3 { padding-bottom: 16px !important; }
.i9-cart .pl-0 { padding-left: 0 !important; }
.i9-cart .pr-0 { padding-right: 0 !important; }
.i9-cart .px-3 { padding-inline: 16px !important; }
.i9-cart .py-2 { padding-block: 8px !important; }
.i9-cart .py-3 { padding-block: 16px !important; }

.i9-cart .text-left { text-align: left !important; }
.i9-cart .text-center { text-align: center !important; }
.i9-cart .text-right { text-align: right !important; }
.i9-cart .text-primary { color: var(--i9-primary) !important; }
.i9-cart .text-success { color: var(--i9-success) !important; }
.i9-cart .text-warning { color: var(--i9-warning) !important; }
.i9-cart .text-danger { color: var(--i9-danger) !important; }
.i9-cart .text-muted { color: var(--i9-text-muted) !important; }
.i9-cart .text-dark { color: var(--i9-text) !important; }
.i9-cart .text-white { color: #fff !important; }
.i9-cart .font-weight-normal { font-weight: 400 !important; }
.i9-cart .font-weight-medium { font-weight: 500 !important; }
.i9-cart .font-weight-bold,
.i9-cart .font-weight-600 { font-weight: 600 !important; }
.i9-cart .text-nowrap { white-space: nowrap !important; }
.i9-cart .text-break { word-break: break-word !important; }
.i9-cart .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.i9-cart .small { font-size: 13px !important; }
.i9-cart .font-size-12 { font-size: 12px !important; }
.i9-cart .font-size-13 { font-size: 13px !important; }
.i9-cart .font-size-14 { font-size: 14px !important; }
.i9-cart .font-size-15 { font-size: 15px !important; }
.i9-cart .font-size-16 { font-size: 16px !important; }
.i9-cart .font-size-18 { font-size: 18px !important; }
.i9-cart .font-size-20 { font-size: 20px !important; }
.i9-cart .font-size-24 { font-size: 24px !important; }

.i9-cart .border { border: 1px solid var(--i9-border-light) !important; }
.i9-cart .border-top { border-top: 1px solid var(--i9-border-light) !important; }
.i9-cart .border-bottom { border-bottom: 1px solid var(--i9-border-light) !important; }
.i9-cart .border-0 { border: 0 !important; }
.i9-cart .rounded { border-radius: var(--i9-r-sm) !important; }
.i9-cart .rounded-lg { border-radius: var(--i9-r-md) !important; }
.i9-cart .rounded-circle { border-radius: 50% !important; }
.i9-cart .rounded-pill { border-radius: var(--i9-r-pill) !important; }
.i9-cart .shadow-sm { box-shadow: var(--i9-sh-sm) !important; }
.i9-cart .shadow { box-shadow: var(--i9-sh-md) !important; }
.i9-cart .position-relative { position: relative !important; }
.i9-cart .overflow-hidden { overflow: hidden !important; }
.i9-cart .float-right { float: right !important; }
.i9-cart .float-left { float: left !important; }
.i9-cart .invisible { visibility: hidden !important; }
.i9-cart .collapse { display: none; }
.i9-cart .collapse.show { display: block; }
.i9-cart .fade { transition: opacity var(--i9-dur) var(--i9-ease); }
.i9-cart .fade:not(.show) { opacity: 0; }

/* 平台 JS 常用：隐藏克隆模板（保持全局，供脚本内插使用） */
.d-none { display: none !important; }

/* sm 断点文本对齐（viewcart 模板用到 text-sm-right） */
@media (min-width: 576px) {
  .i9-cart .text-sm-left { text-align: left !important; }
  .i9-cart .text-sm-center { text-align: center !important; }
  .i9-cart .text-sm-right { text-align: right !important; }
}
/* md 断点外边距（configureproduct 模板用到 mt-xl-0 / mt-md-2） */
@media (min-width: 768px) {
  .i9-cart .mt-md-0 { margin-top: 0 !important; }
  .i9-cart .mt-md-2 { margin-top: 8px !important; }
  .i9-cart .mb-md-0 { margin-bottom: 0 !important; }
}
@media (min-width: 1200px) {
  .i9-cart .mt-xl-0 { margin-top: 0 !important; }
  .i9-cart .mb-xl-0 { margin-bottom: 0 !important; }
  .i9-cart .d-xl-flex { display: flex !important; }
}

/* ====================================================================
   6. 补齐层：由「平台模板类名全量清单」比对后新增的缺失类名
      清单来源：对 9 个平台 cart tpl 做 class 属性全量抽取，
      去重后 239 个真实类名，本层覆盖其中此前未实现的部分。
   ==================================================================== */

/* ---- 6.1 栅格：xxl 断点（Bootstrap 4 无 xxl，部分模板使用 col-xxl-3） ---- */
@media (min-width: 1400px) {
  .i9-cart .col-xxl-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .i9-cart .col-xxl-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .i9-cart .col-xxl-3  { flex: 0 0 25%;      max-width: 25%; }
  .i9-cart .col-xxl-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .i9-cart .col-xxl-6  { flex: 0 0 50%;      max-width: 50%; }
  .i9-cart .col-xxl-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .i9-cart .col-xxl-12 { flex: 0 0 100%;     max-width: 100%; }
}

/* ---- 6.2 表单：自定义控件 / range / file（平台模板使用 custom-* 与 form-control-range） ---- */
.i9-cart .form-control-range {
  display: block;
  width: 100%;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.i9-cart .form-control-range:focus { outline: none; }
.i9-cart .form-control-range::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--i9-bg-soft);
  border-radius: var(--i9-r-pill);
}
.i9-cart .form-control-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  background: #fff;
  border: 2px solid var(--i9-primary);
  border-radius: 50%;
  box-shadow: var(--i9-sh-sm);
}
.i9-cart .form-control-range::-moz-range-track {
  height: 6px;
  background: var(--i9-bg-soft);
  border-radius: var(--i9-r-pill);
}
.i9-cart .form-control-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid var(--i9-primary);
  border-radius: 50%;
}

.i9-cart .custom-control {
  position: relative;
  display: block;
  min-height: 22px;
  padding-left: 26px;
  margin-bottom: 8px;
}
.i9-cart .custom-control-input {
  position: absolute;
  left: 0;
  top: 2px;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--i9-primary);
  cursor: pointer;
}
.i9-cart .custom-control-label {
  font-size: 14px;
  color: var(--i9-text-body);
  cursor: pointer;
}
.i9-cart .custom-control-label::before,
.i9-cart .custom-control-label::after { content: none; }
.i9-cart .custom-checkbox .custom-control-input:checked ~ .custom-control-label { color: var(--i9-primary); }
.i9-cart .custom-file { position: relative; display: block; width: 100%; }
.i9-cart .custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 42px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.i9-cart .custom-file-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 14px;
  color: var(--i9-text-muted);
  background: #fff;
  border: 1px dashed var(--i9-border-input);
  border-radius: var(--i9-r-sm);
}
.i9-cart .custom-file-label::after { content: none; }
.i9-cart .control-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: var(--i9-fw-medium);
  color: var(--i9-text);
}

/* ---- 6.3 按钮：btn-custom / btn-custom-group / btn-outline-light / btn-warning（平台旧皮肤命名，给出友好兜底） ---- */
.i9-cart .btn-custom {
  color: var(--i9-primary);
  background: var(--i9-primary-soft);
  border-color: transparent;
}
.i9-cart .btn-custom:hover,
.i9-cart .btn-custom.active { color: #fff; background: var(--i9-primary); border-color: var(--i9-primary); }
.i9-cart .btn-custom-group { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.i9-cart .btn-custom-group > .btn { border-radius: var(--i9-r-sm); }
.i9-cart .btn-outline-light { color: var(--i9-text-body); background: #fff; border-color: var(--i9-border); }
.i9-cart .btn-outline-light:hover { color: var(--i9-primary); border-color: var(--i9-primary); background: var(--i9-primary-soft-2); }
.i9-cart .btn-warning { color: #fff; background: var(--i9-warning); border-color: var(--i9-warning); }

/* ---- 6.4 工具类补齐（对齐 239 类名清单） ---- */
.i9-cart .fs-14 { font-size: 14px !important; }
.i9-cart .fs-16 { font-size: 16px !important; }
.i9-cart .fs-18 { font-size: 18px !important; }
.i9-cart .fs-20 { font-size: 20px !important; }
.i9-cart .color-999 { color: #999 !important; }
.i9-cart .mw-250 { max-width: 250px !important; }
.i9-cart .pointer { cursor: pointer !important; }
.i9-cart .d-print-none { }
.i9-cart .align-content-start { align-content: flex-start; }
.i9-cart .align-middle { vertical-align: middle !important; }
.i9-cart .mt-sm-0 { margin-top: 0 !important; }
.i9-cart .rounded-sm { border-radius: var(--i9-r-xs) !important; }
.i9-cart .text-uppercase { text-transform: uppercase !important; }
.i9-cart .font-weight-500 { font-weight: 500 !important; }
.i9-cart .font-weight-bolder { font-weight: 700 !important; }
.i9-cart .text-wrap { white-space: normal !important; }
.i9-cart .overflow-auto { overflow: auto !important; }
.i9-cart .position-absolute { position: absolute !important; }
.i9-cart .d-none-important { display: none !important; }
.i9-cart .visible { visibility: visible !important; }
/* 平台旧模板用 .hidden 表示隐藏 */
.i9-cart .hidden { display: none !important; }

/* ---- 6.5 组件补齐：分页 / 响应式表格 / 表格页脚 / 模态定位 ---- */
.i9-cart .pagination { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 0; margin: 16px 0 0; }
.i9-cart .pagination .page-item,
.i9-cart .pagination li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 13.5px;
  color: var(--i9-text-body);
  background: #fff;
  border: 1px solid var(--i9-border);
  border-radius: var(--i9-r-sm);
}
.i9-cart .pagination .page-item.active,
.i9-cart .pagination li.active { color: #fff; background: var(--i9-primary); border-color: var(--i9-primary); }
.i9-cart .pagination .page-item.disabled,
.i9-cart .pagination li.disabled { opacity: .45; pointer-events: none; }
.i9-cart .pagination .page-link { color: inherit; background: none; border: 0; padding: 0; }
.i9-cart .pagination-sm .page-item,
.i9-cart .pagination-sm li { min-width: 30px; height: 30px; font-size: 12.5px; }

.i9-cart .table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.i9-cart .table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 0;
}

.i9-cart .modal {
  position: fixed;
  inset: 0;
  z-index: var(--i9-z-modal);
  display: none;
  overflow: auto;
  background: var(--i9-bg-mask);
}
.i9-cart .modal.show { display: block; }
.i9-cart .modal-dialog {
  position: relative;
  width: auto;
  max-width: 560px;
  margin: 60px auto;
  padding: 0 16px;
}
.i9-cart .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100vh - 120px); }
.i9-cart .modal-dialog-centered .modal-content { width: 100%; }
.i9-cart .modal-backdrop { position: fixed; inset: 0; z-index: calc(var(--i9-z-modal) - 1); background: var(--i9-bg-mask); }
.i9-cart .alert-dismissable { padding-right: 40px; }
.i9-cart .error-tip { display: block; margin-top: 5px; font-size: 12px; color: var(--i9-danger); }
.i9-cart .title { font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-semibold); color: var(--i9-text); }
.i9-cart .total { font-family: var(--i9-font-num); font-weight: var(--i9-fw-bold); }
.i9-cart .number,
.i9-cart .price-num,
.i9-cart .len-num { font-family: var(--i9-font-num); font-variant-numeric: tabular-nums; }
.i9-cart .info { color: var(--i9-text-secondary); }
.i9-cart .zk { display: block; }
.i9-cart .cart-no-data,
.i9-cart .range_none { display: block; padding: 24px 0; text-align: center; color: var(--i9-text-muted); }
.i9-cart .mobile-hide { }
.i9-cart .mobile-flex { }
.i9-cart .selectpicker_refresh { display: inline-flex; }

/* ---- 6.6 JS 动态注入的类名（不在 class 属性里，但皮肤必须覆盖） ---- */
.i9-cart .has-list { }
.i9-cart .checkboxSelect { display: inline-flex; align-items: center; }
.i9-cart .input_active { border-color: var(--i9-primary) !important; box-shadow: 0 0 0 3px var(--i9-primary-ring); }
.i9-cart .selectpicker { max-width: 100%; }
.i9-cart .bootstrap-select { max-width: 100%; }
.i9-cart .bootstrap-select > .dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 9px 13px;
  font-size: 14.5px;
  color: var(--i9-text);
  background: #fff;
  border: 1px solid var(--i9-border-input);
  border-radius: var(--i9-r-sm);
}
.i9-cart .bootstrap-select .dropdown-menu { min-width: 100%; }
.i9-cart .bootstrap-select .dropdown-item.active { color: var(--i9-primary); background: var(--i9-primary-soft); }
.i9-cart .irs--flat .irs-bar,
.i9-cart .irs--flat .irs-from,
.i9-cart .irs--flat .irs-to,
.i9-cart .irs--flat .irs-single { background: var(--i9-primary); }
.i9-cart .irs--flat .irs-handle > i:first-child { background: var(--i9-primary); }
.i9-cart .irs--flat .irs-line { background: var(--i9-bg-soft); }

/* ---- 6.7 旧图标字体类名兜底 ----
   平台旧模板里残留 BoxIcons（bx-*）/ FontAwesome（fa-*）/ MDI（mdi-*）类名。
   新主题不引入这些字体（零继承），这里给出「不显示空方块」的降级处理：
   一律不渲染字形，需要图标时请改用本主题自绘 SVG：<svg class="i9-ico"><use href="#i9-xxx"></use></svg>
   若某处必须保留旧图标，请在对应 tpl 中替换为 i9 图标，不要恢复图标字体。 */
.i9-cart .bx, .i9-cart .bxs-help-circle, .i9-cart .bx-show-alt, .i9-cart .bx-loader, .i9-cart .bx-spin,
.i9-cart .fas, .i9-cart .fa-dice, .i9-cart .fa-pen, .i9-cart .fa-times-circle,
.i9-cart .mdi, .i9-cart .mdi-cart-arrow-right, .i9-cart .mdi-truck-fast {
  display: none;
}