@media (width >= 1200px) {
    .container {
        width: var(--inner-page-width);
    }
    #js-product-list .js-product.col-xl-4{
        width: var(--product-width);
    }
}

:root{
  --page-bg-color: #fff; /* 网页背景色，影响所有页面 */
  --wrapper-bg-color: #f6f6f6; /* 块颜色，影响所有块 */

  --card-bg-color: #fff; /* 卡片背景色，影响所有类名是card的块， */

  --left-column-bg-color: #fff; /* 左侧栏背景色，影响左侧栏的背景色 */

  --primary-color: #24b9d7; /* 登录按钮的背景色，会影响所有跟登录按钮一样颜色的按钮的背景色 */
  --primary-hover-color: #1d93ab; /* 登录按钮的 hover 背景色，会影响所有跟登录按钮一样颜色的按钮的 hover 背景色 */
  --primary-text-color: #fff;  /* 文字颜色，影响同上 */
  --primary-font-size: 1rem; /* 文字大小，影响同上 */
  --primary-font-family: 'Arial', sans-serif; /* 字体，影响同上 */

  --form-control-bg-color: #f6f6f6; /* 输入框, 即类名是 form-control 的输入框  */
  --form-control-text-color: #7a7a7a; /* 输入框 */
  --form-control-font-size: 1rem; /* 输入框 */
  --form-control-font-family: 'Arial', sans-serif; /* 输入框 */

  --breadcrumb-font-size: 1rem; /* 面包屑 */
  --breadcrumb-font-family: 'Arial', sans-serif; /* 面包屑 */
  --breadcrumb-font-color: #232323; /* 面包屑除最后一项外的其它项的颜色 */
  --breadcrumb-last-font-color: #7a7a7a; /* 面包屑最后一项的颜色 */

  --page-header-text-color: #232323; /* 页面小标题， 类名是 page-header */
  --page-header-font-size: 1rem; /* 页面小标题 */
  --page-header-font-family: 'Arial', sans-serif; /* 页面小标题 */

  --form-control-label-color: #232323; /* 表单项， 类名 form-control-label  */
  --form-control-label-font-size: .875rem; /* 表单项 */
  --form-control-label-font-family: 'Arial', sans-serif; /* 表单项 */

  --login-reg-bg-color: #fff; /* 登录和注册块的背景色 */

  --my-account-links-color: #232323; /* 我的账户页面的链接颜色 */
  --my-account-links-font-size: 1rem; /* 我的账户页面的链接字体大小 */
  --my-account-links-font-family: 'Arial', sans-serif; /* 我的账户页面的链接字体 */

  --block-category-bg-color: #fff; /* 一级分类块的背景色 */
  --block-category-title-color: #232323; /* 一级分类块的标题颜色 */
  --block-category-title-font-size: 2rem; /* 一级分类块的标题字体大小 */
  --block-category-title-font-family: 'Arial', sans-serif; /* 一级分类块的标题字体 */

  --block-category-description-color: #232323; /* 一级分类块的描述颜色 */
  --block-category-description-font-size: 1rem; /* 一级分类块的描述字体大小 */
  --block-category-description-font-family: 'Arial', sans-serif; /* 一级分类块的描述字体 */

  --sub-category-bg-color: #fff;  /* 二级分类块的背景色 */
  --sub-category-title-color: #232323; /* 二级分类块的标题颜色 */
  --sub-category-title-font-size: 1rem; /* 二级分类块的标题字体大小 */
  --sub-category-title-font-family: 'Arial', sans-serif; /* 二级分类块的标题字体 */

  
  --product-bg-color: #fff; /* 商品块的背景色 */
  --product-title-color: #232323; /* 商品块的标题颜色 */
  --product-title-font-size: 1rem; /* 商品块的标题字体大小 */
  --product-title-font-family: 'Arial', sans-serif; /* 商品块的标题字体 */

  --main-bg-color: transparent; /* 商品详情页的背景色. 会影响 id 是 main 的元素 */
  --product-tab-bg-color: #fff; /* 商品详情页的 tab 的背景色 */

  --product-detail-title-color: #232323; /* 商品详情页的标题颜色 */
  --product-detail-title-font-size: 1rem; /* 商品详情页的标题字体大小 */
  --product-detail-title-font-family: 'Arial', sans-serif; /* 商品详情页的标题字体 */

  --product-detail-desc-color: #232323; /* 商品详情页的描述颜色 */
  --product-detail-desc-font-size: 1rem; /* 商品详情页的描述字体大小 */
  --product-detail-desc-font-family: 'Arial', sans-serif; /* 商品详情页的描述字体 */

  --product-detail-discount-bg-color: #f39d72; /* 商品详情页的折扣背景色 */
  --product-detail-discount-text-color: #fff; /* 商品详情页的折扣文字颜色 */
  --product-detail-discount-font-size: 1rem; /* 商品详情页的折扣字体大小 */
  --product-detail-discount-font-family: 'Arial', sans-serif; /* 商品详情页的折扣字体 */

  --cart-title-color: #232323; /* 购物车页的标题颜色 */
  --cart-title-font-size: 1rem; /* 购物车页的标题字体大小 */
  --cart-title-font-family: 'Arial', sans-serif; /* 购物车页的标题字体 */

  --checkout-title-color: #232323; /* 结算页的标题颜色 */
  --checkout-title-font-size: 1rem; /* 结算页的标题字体大小 */
  --checkout-title-font-family: 'Arial', sans-serif; /* 结算页的标题字体 */

  --blockreassurance-bg-color: transparent; /* 信任块的背景色 */

  --checkout-delivery-option-bg-color: #ccc; /* 结算页的送货选项背景色 */
  --checkout-delivery-option-text-color: #232323; /* 结算页的送货选项文字颜色 */

}

body{
  background-color: var(--page-bg-color);
}

#wrapper{
  background-color: var(--wrapper-bg-color);
}

.card{
  background-color: var(--card-bg-color);
}

.btn-primary{
  background-color: var(--primary-color);
  color: var(--primary-text-color);
  font-size: var(--primary-font-size);
  font-family: var(--primary-font-family);
}

.btn-primary:hover {
  background-color: var(--primary-hover-color);
}

.form-control{
  background-color: var(--form-control-bg-color);
  color: var(--form-control-text-color);
  font-size: var(--form-control-font-size);
  font-family: var(--form-control-font-family);
}

#wrapper .breadcrumb li,
#wrapper .breadcrumb li a{
  color: var(--breadcrumb-font-color);
  font-size: var(--breadcrumb-font-size);
  font-family: var(--breadcrumb-font-family);
}

#wrapper .breadcrumb li:last-child{
  color: var(--breadcrumb-last-font-color);
}

.page-header{
  color: var(--page-header-text-color);
  font-size: var(--page-header-font-size);
  font-family: var(--page-header-font-family);
}

form .form-control-label{
  color: var(--form-control-label-color);
  font-size: var(--form-control-label-font-size);
  font-family: var(--form-control-label-font-family);
}

.page-authentication #content, .page-registration #content{
  background-color: var(--login-reg-bg-color);
}

.page-my-account #content .links a{
  color: var(--my-account-links-color);
  font-size: var(--my-account-links-font-size);
  font-family: var(--my-account-links-font-family);
}

.block-category{
  background-color: var(--block-category-bg-color, #fff);
}

.block-category h1{
  color: var(--block-category-title-color);
  font-size: var(--block-category-title-font-size);
  font-family: var(--block-category-title-font-family);

}

.block-category .block-category-inner #category-description .page-content.page-cms ul, .block-category .block-category-inner #category-description p, .page-content.page-cms .block-category .block-category-inner #category-description ul{
  color: var(--block-category-description-color);
  font-size: var(--block-category-description-font-size);
  font-family: var(--block-category-description-font-family);
}

#subcategories{
  background-color: var(--sub-category-bg-color);
}

#subcategories .subcategory-heading{
  color: var(--sub-category-title-color);
  font-size: var(--sub-category-title-font-size);
  font-family: var(--sub-category-title-font-family);
}

.thumbnail-container{
  background-color: var(--product-bg-color);
}
.product-description{
  background-color: var(--product-bg-color);
}

.product-title a{
  color: var(--product-title-color);
  font-size: var(--product-title-font-size);
  font-family: var(--product-title-font-family);
}

#main{
  background-color: var(--main-bg-color);
}

.tabs{
  background-color: var(--product-tab-bg-color);
}

#product h1{
  color: var(--product-detail-title-color);
  font-size: var(--product-detail-title-font-size);
  font-family: var(--product-detail-title-font-family);
}

.product-description, .product-description p{
  color: var(--product-detail-desc-color);
  font-size: var(--product-detail-desc-font-size);
  font-family: var(--product-detail-desc-font-family);
}

.has-discount .discount{
  background-color: var(--product-detail-discount-bg-color);
  color: var(--product-detail-discount-text-color);
  font-size: var(--product-detail-discount-font-size);
  font-family: var(--product-detail-discount-font-family);
}

.cart-grid-body .card-block h1{
  color: var(--cart-title-color);
  font-size: var(--cart-title-font-size);
  font-family: var(--cart-title-font-family);
}

body#checkout section.checkout-step .step-title{
  color: var(--checkout-title-color);
  font-size: var(--checkout-title-font-size);
  font-family: var(--checkout-title-font-family);
}

.blockreassurance_product{
  background-color: var(--blockreassurance-bg-color);
}

body#checkout section.checkout-step .delivery-options .delivery-option{
  background-color: var(--checkout-delivery-option-bg-color);
  color: red;
}

body#checkout section.checkout-step .delivery-options .delivery-option label{
  color: var(--checkout-delivery-option-text-color);
}

#left-column{
  background-color: var(--left-column-bg-color);
}

button.select-title{
  line-height: 24px;
}