.csf-wrap{max-width:1380px;margin:24px auto 50px;padding:0 14px;color:#07182f;font-family:inherit}.csf-wrap *{box-sizing:border-box}.csf-head{display:grid;grid-template-columns:330px 1fr;gap:28px;align-items:start}.csf-copy{padding:22px 0}.csf-copy h2{margin:0 0 45px;font-size:30px;line-height:1.15;text-transform:uppercase;color:#121827;font-weight:900}.csf-copy p{font-size:15px;line-height:1.55;color:#667085;margin:0 0 14px}.csf-copy ul{margin:12px 0 0;padding-left:18px;color:#667085;line-height:1.55}.csf-box{position:relative;min-height:490px;border:2px solid #0b7cff;background:#fff;border-radius:0;overflow:hidden;box-shadow:0 18px 45px rgba(10,34,70,.08)}.csf-box:after{content:"";position:absolute;right:-120px;bottom:-145px;width:620px;height:520px;background-image:var(--csf-bg);background-size:cover;background-position:center;opacity:.48;filter:grayscale(1);pointer-events:none}.csf-tabs{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;border-bottom:2px solid #0b7cff}.csf-tabs button{height:90px;border:0;background:#f4f7fb;color:#1b2a41;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;font-weight:900;text-transform:uppercase}.csf-tabs button.is-active{background:#fff}.csf-tabs small{display:block;font-size:15px;text-transform:none;font-weight:700;color:#606b7c}.csf-ico{width:56px;height:56px;border-radius:50%;background:#eef4fb;display:flex;align-items:center;justify-content:center;color:#0b7cff;font-size:23px}.csf-panel{display:none;position:relative;z-index:2;padding:32px 28px 16px;max-width:760px}.csf-panel.is-active{display:block}.csf-label{font-size:13px;font-weight:900;text-transform:uppercase;color:#182439}.csf-axis-label{font-size:13px;font-weight:900;color:#182439;white-space:nowrap}.csf-size-grid{display:grid;grid-template-columns:125px 130px 130px 130px 62px;gap:14px 16px;align-items:center}.csf-size-grid select,.csf-extra-grid select,.csf-car-grid select{width:100%;height:42px;border:1px solid #aeb8c6;background:#fff;color:#172236;padding:0 10px;font-weight:700;border-radius:0}.csf-car-mini{grid-column:5;grid-row:2/4;width:44px;height:90px;border-radius:24px;background:linear-gradient(180deg,#1582ff,#062547);box-shadow:inset 0 0 0 8px rgba(255,255,255,.16);position:relative}.csf-car-mini:before,.csf-car-mini:after{content:"";position:absolute;left:-16px;width:9px;height:24px;border-radius:6px;background:#162337}.csf-car-mini:before{top:16px}.csf-car-mini:after{bottom:16px}.csf-extra-grid{display:grid;grid-template-columns:180px 260px;gap:18px 24px;margin-top:26px;align-items:end}.csf-extra-grid label,.csf-car-grid label{font-size:13px;font-weight:900;text-transform:uppercase;color:#182439}.csf-check{display:flex!important;align-items:center;gap:7px;text-transform:none!important;font-weight:700!important;color:#263548!important}.csf-check input{width:18px;height:18px}.csf-car-grid{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:18px 24px;max-width:610px}.csf-actions{position:relative;z-index:2;display:grid;grid-template-columns:180px 1fr;gap:12px;padding:38px 28px 18px}.csf-submit,.csf-reset{height:44px;font-weight:900;text-transform:uppercase;cursor:pointer;border-radius:8px}.csf-submit{background:#0b7cff;color:#fff;border:0}.csf-reset{background:#fff;border:2px solid #0b7cff;color:#172236}.csf-found{margin:22px 0 12px;font-weight:900;color:#526174}.csf-results{display:grid;gap:22px}.csf-empty{border:1px dashed #bfd0e5;border-radius:18px;background:#fff;padding:28px;color:#667085;font-weight:700}.csf-kit{background:#fff;border:1px solid #d9e6f4;border-radius:22px;padding:22px;box-shadow:0 16px 40px rgba(8,28,60,.06)}.csf-kit.is-smart{border-color:#cfe7ff}.csf-kit-top{display:flex;justify-content:space-between;gap:14px;margin-bottom:18px}.csf-kit-top h3{margin:0;font-size:22px;color:#0b1b33}.csf-kit-top p{margin:6px 0 0;color:#69778b;font-weight:900}.csf-kit-badge{height:max-content;background:#eaf3ff;color:#0b7cff;border-radius:999px;padding:12px 16px;font-size:12px;font-weight:900}.csf-kit-main{display:grid;grid-template-columns:1fr 42px 1fr;gap:16px;align-items:stretch}.csf-axis-card{border:1px solid #dbe6f3;border-radius:18px;padding:16px;display:grid;grid-template-columns:115px 1fr;gap:16px;align-items:center}.csf-img img{width:115px;height:115px;object-fit:contain}.csf-axis-name{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#0b7cff;font-weight:900}.csf-axis-size{font-size:24px;font-weight:900;margin:6px 0;color:#07182f}.csf-oem-note{font-size:12px;color:#9a6400;font-weight:800;margin-bottom:6px}.csf-product-title{display:block;color:#46566d!important;text-decoration:none;font-weight:800;line-height:1.25;margin:6px 0}.csf-axis-price{font-size:23px;font-weight:900;margin:8px 0;color:#07182f}.csf-cart{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 13px;border-radius:10px;background:#061a33;color:#fff!important;text-decoration:none;font-weight:900;font-size:13px}.csf-join{display:flex;align-items:center;justify-content:center;color:#0b7cff;font-size:26px;font-weight:900}.csf-kit-bottom{display:flex;justify-content:space-between;gap:18px;align-items:center;border-top:1px solid #edf3fa;margin-top:18px;padding-top:18px}.csf-tags{display:flex;flex-wrap:wrap;gap:8px}.csf-tags span{background:#edf4fd;color:#41506a;border-radius:999px;padding:9px 12px;font-weight:800;font-size:13px}.csf-total{text-align:right}.csf-total small{display:block;color:#667085;font-weight:800}.csf-total strong{display:block;font-size:27px;color:#07182f;margin:2px 0 9px}.csf-total a{display:inline-flex;background:#16be57;color:#fff!important;border-radius:12px;text-decoration:none;font-weight:900;padding:12px 16px}.csf-loading{opacity:.6;pointer-events:none}@media(max-width:1050px){.csf-head{grid-template-columns:1fr}.csf-copy{padding:0}.csf-copy h2{margin-bottom:14px}.csf-box:after{opacity:.22}}@media(max-width:760px){.csf-wrap{padding:0 10px}.csf-tabs button{height:72px;font-size:12px}.csf-ico{display:none}.csf-panel{padding:20px 16px;max-width:none}.csf-size-grid{grid-template-columns:1fr 1fr 1fr;gap:10px}.csf-size-grid>div:first-child,.csf-label{display:none}.csf-axis-label{grid-column:1/-1}.csf-extra-grid,.csf-car-grid{grid-template-columns:1fr;gap:12px}.csf-car-mini{display:none}.csf-actions{grid-template-columns:1fr;padding:14px 16px 18px}.csf-kit{padding:16px;border-radius:18px}.csf-kit-main{grid-template-columns:1fr}.csf-join{display:none}.csf-axis-card{grid-template-columns:82px 1fr;padding:12px}.csf-img img{width:82px;height:82px}.csf-axis-size{font-size:20px}.csf-kit-bottom{display:block}.csf-total{text-align:left;margin-top:14px}.csf-kit-top{display:block}.csf-kit-badge{display:inline-block;margin-top:12px}.csf-box{min-height:auto}.csf-box:after{display:none}}

/* v4 alignment fix: labels exactly over selects, axis labels stay at left */
.csf-size-grid{
  grid-template-columns:115px 130px 130px 130px 62px;
  align-items:center;
}
.csf-size-grid .csf-label{
  align-self:end;
  padding-left:0;
  margin-bottom:2px;
  line-height:1.1;
}
.csf-size-grid .csf-axis-label{
  grid-column:1;
  justify-self:start;
  align-self:center;
  line-height:1.15;
}
.csf-size-grid select[data-field="fw"],
.csf-size-grid select[data-field="rw"]{grid-column:2;}
.csf-size-grid select[data-field="fp"],
.csf-size-grid select[data-field="rp"]{grid-column:3;}
.csf-size-grid select[data-field="fd"],
.csf-size-grid select[data-field="rd"]{grid-column:4;}
.csf-car-mini{grid-column:5;grid-row:2 / 4;}
@media(max-width:760px){
  .csf-size-grid{grid-template-columns:1fr 1fr 1fr;}
  .csf-size-grid .csf-label{display:block;font-size:11px;}
  .csf-size-grid .csf-axis-label{grid-column:1/-1;}
  .csf-size-grid select[data-field="fw"],
  .csf-size-grid select[data-field="rw"],
  .csf-size-grid select[data-field="fp"],
  .csf-size-grid select[data-field="rp"],
  .csf-size-grid select[data-field="fd"],
  .csf-size-grid select[data-field="rd"]{grid-column:auto;}
}

/* v5: yellow car image + brackets between selectors and car */
/* v5: yellow car image + brackets between selectors and car — safe design fix */
.csf-size-grid{
  grid-template-columns:130px 130px 130px 38px 96px;
  align-items:center;
  column-gap:12px;
}

.csf-size-grid > div:first-child,
.csf-size-grid > div:nth-child(5){
  display:none!important;
}

.csf-size-grid .csf-label{
  grid-row:1;
  align-self:end;
  padding-left:0;
  margin-bottom:6px;
  line-height:1.1;
}

.csf-size-grid .csf-label:nth-child(2){grid-column:1;}
.csf-size-grid .csf-label:nth-child(3){grid-column:2;}
.csf-size-grid .csf-label:nth-child(4){grid-column:3;}

.csf-size-grid select[data-field="fw"],
.csf-size-grid select[data-field="rw"]{grid-column:1;}

.csf-size-grid select[data-field="fp"],
.csf-size-grid select[data-field="rp"]{grid-column:2;}

.csf-size-grid select[data-field="fd"],
.csf-size-grid select[data-field="rd"]{grid-column:3;}

.csf-size-grid .csf-axis-mark{
  grid-column:4;
  justify-self:center;
  width:36px;
  height:42px;
  position:relative;
  align-self:center;
}

.csf-size-grid .csf-axis-mark-front{
  transform:translateY(8px);
}

.csf-size-grid .csf-axis-mark-rear{
  transform:translateY(-4px);
}

.csf-size-grid .csf-axis-mark:before,
.csf-size-grid .csf-axis-mark:after{
  content:"";
  position:absolute;
  right:0;
  width:30px;
  height:17px;
  border-right:2px solid #303946;
  opacity:.95;
}

.csf-size-grid .csf-axis-mark:before{
  top:80px;
  border-top:2px solid #303946;
}

.csf-size-grid .csf-axis-mark:after{
  bottom:0px;
	top:100px;
  border-bottom:2px solid #303946;
}

.csf-size-grid .csf-axis-mark-front:after,
.csf-size-grid .csf-axis-mark-rear:before{
  display:none;
}

.csf-car-mini{
  grid-column:5;
  grid-row:2 / 4;
  width:126px;
  height:158px;
  border-radius:0;
  background:transparent url('https://camion.md/wp-content/uploads/2026/05/depositphotos_83377494-stock-illustration-yellow-car-top-view-removebg-preview.png') center / contain no-repeat;
  box-shadow:none;
  justify-self:center;
  align-self:center;
  transform:translateX(-16px) translateY(-1px) scale(1.08);
  filter:saturate(1.18) contrast(1.08) drop-shadow(0 10px 12px rgba(0,0,0,.18));
}

.csf-car-mini:before,
.csf-car-mini:after,
.csf-car-mini span{
  display:none!important;
}

@media(max-width:760px){
  .csf-size-grid{grid-template-columns:1fr 1fr 1fr;}

  .csf-size-grid > div:first-child,
  .csf-size-grid > div:nth-child(5){display:none!important;}

  .csf-size-grid .csf-label{
    display:block;
    font-size:11px;
    grid-row:auto!important;
    grid-column:auto!important;
  }

  .csf-size-grid select[data-field="fw"],
  .csf-size-grid select[data-field="rw"],
  .csf-size-grid select[data-field="fp"],
  .csf-size-grid select[data-field="rp"],
  .csf-size-grid select[data-field="fd"],
  .csf-size-grid select[data-field="rd"]{grid-column:auto;}

  .csf-size-grid .csf-axis-mark{display:none;}
  .csf-car-mini{display:none;}
}



/* Camion — красивый верхний блок табов, без поломки логики 

.csf-tabs{
  border-bottom:2px solid #0b7cff;
  background:#fff;
}

.csf-tabs button{
  height:74px;
  padding:10px 18px;
  background:#ffffff;
  color:#0b4ea2;
  font-family:inherit;
  font-weight:900;
  letter-spacing:.01em;
}

.csf-tabs button:nth-child(2){
  background:#f3f7fc;
}

.csf-tabs button.is-active{
  background:#ffffff;
}

.csf-tabs small{
  margin-top:4px;
  font-size:14px;
  color:#315f9f;
  font-weight:800;
}

.csf-ico{
  width:58px;
  height:58px;
  border-radius:18px;
  background-color:#eef5ff;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  color:transparent;
  font-size:0;
}

.csf-tabs button:first-child .csf-ico{
  background-image:url('https://camion.md/wp-content/uploads/2026/03/200e9033.jpg');
}

.csf-tabs button:nth-child(2) .csf-ico{
  background-image:url('https://camion.md/wp-content/uploads/2026/05/images-removebg-preview.png');
}

.csf-tabs button:hover{
  background:#f7fbff;
}*/


/* =====================================================
   CAMION — PREMIUM GLASS HEADER TABS
   ===================================================== */

.csf-tabs{
  position:relative!important;

  padding:10px!important;
  gap:10px!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.88) 0%,
      rgba(242,246,255,.82) 100%
    )!important;

  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;

  border-bottom:1px solid rgba(14,8,113,.18)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 24px rgba(14,8,113,.06)!important;
}

/* стеклянная линия */
.csf-tabs:after{
  content:""!important;

  position:absolute!important;
  left:16px!important;
  right:16px!important;
  bottom:0!important;

  height:1px!important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(14,8,113,.18),
      transparent
    )!important;
}

/* кнопки */
.csf-tabs button{

  position:relative!important;

  min-height:82px!important;

  border-radius:20px!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.78),
      rgba(245,248,255,.68)
    )!important;

  border:1px solid rgba(14,8,113,.08)!important;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease!important;

  box-shadow:
    0 10px 24px rgba(14,8,113,.06),
    inset 0 1px 0 rgba(255,255,255,.95)!important;
}

/* hover */
.csf-tabs button:hover{
  transform:translateY(-2px)!important;

  box-shadow:
    0 18px 34px rgba(14,8,113,.12),
    inset 0 1px 0 rgba(255,255,255,1)!important;
}

/* АКТИВНАЯ */
.csf-tabs button.is-active{

  transform:
    translateY(-7px)
    scale(1.02)!important;

  z-index:5!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.96),
      rgba(248,250,255,.92)
    )!important;

  border:1px solid rgba(14,8,113,.16)!important;

  box-shadow:
    0 28px 48px rgba(14,8,113,.18),
    0 12px 24px rgba(14,8,113,.10),
    inset 0 1px 0 rgba(255,255,255,1)!important;
}

/* glow линия снизу */
.csf-tabs button.is-active:after{
  content:""!important;

  position:absolute!important;

  left:24px!important;
  right:24px!important;
  bottom:-10px!important;

  height:4px!important;

  border-radius:999px!important;

  background:
    linear-gradient(
      90deg,
      #0e0871 0%,
      #4f46ff 100%
    )!important;

  box-shadow:
    0 0 18px rgba(79,70,255,.38)!important;
}

/* иконка */
.csf-ico{
  width:64px!important;
  height:64px!important;

  border-radius:22px!important;

  background-color:rgba(255,255,255,.88)!important;

  box-shadow:
    0 12px 24px rgba(14,8,113,.10),
    inset 0 1px 0 rgba(255,255,255,1)!important;

  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;

  transition:
    transform .22s ease,
    box-shadow .22s ease!important;
}

/* иконка активной */
.csf-tabs button.is-active .csf-ico{

  transform:
    translateY(-2px)
    scale(1.04)!important;

  box-shadow:
    0 18px 34px rgba(14,8,113,.16),
    inset 0 1px 0 rgba(255,255,255,1)!important;
}

/* текст */
.csf-tabs button b{
  font-size:17px!important;
  line-height:1.05!important;
  letter-spacing:-.02em!important;
}

.csf-tabs button small{
  margin-top:4px!important;
  font-size:14px!important;
  opacity:.85!important;
}

/* mobile */
@media(max-width:760px){

  .csf-tabs{
    padding:8px!important;
    gap:8px!important;
  }

  .csf-tabs button{
    min-height:74px!important;
    border-radius:18px!important;
  }

  .csf-tabs button.is-active{
    transform:
      translateY(-4px)
      scale(1.01)!important;
  }

  .csf-ico{
    width:48px!important;
    height:48px!important;
    border-radius:16px!important;
  }

  .csf-tabs button b{
    font-size:12px!important;
  }

  .csf-tabs button small{
    font-size:10px!important;
  }
}



/* =====================================================
   CAMION — REAL PREMIUM HEADER ICONS
   ===================================================== */

/* tabs container */
.csf-tabs{
  padding:14px!important;
  gap:12px!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.92) 0%,
      rgba(243,246,255,.86) 100%
    )!important;

  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 24px rgba(14,8,113,.06)!important;
}

/* buttons */
.csf-tabs button{
  position:relative!important;

  min-height:92px!important;

  border-radius:24px!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.78),
      rgba(244,247,255,.68)
    )!important;

  border:1px solid rgba(14,8,113,.10)!important;

  overflow:hidden!important;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease!important;

  box-shadow:
    0 14px 28px rgba(14,8,113,.08),
    inset 0 1px 0 rgba(255,255,255,.95)!important;
}

/* glow background */
.csf-tabs button:before{
  content:""!important;

  position:absolute!important;
  inset:0!important;

  background:
    radial-gradient(
      circle at top left,
      rgba(255,255,255,.55),
      transparent 40%
    );

  pointer-events:none!important;
}

/* hover */
.csf-tabs button:hover{
  transform:translateY(-3px)!important;

  box-shadow:
    0 24px 44px rgba(14,8,113,.14),
    inset 0 1px 0 rgba(255,255,255,1)!important;
}

/* ACTIVE */
.csf-tabs button.is-active{

  transform:
    translateY(-7px)
    scale(1.02)!important;

  z-index:5!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.96),
      rgba(248,250,255,.92)
    )!important;

  border:1px solid rgba(14,8,113,.18)!important;

  box-shadow:
    0 30px 55px rgba(14,8,113,.18),
    0 10px 24px rgba(14,8,113,.10),
    inset 0 1px 0 rgba(255,255,255,1)!important;
}

/* active glow line */
.csf-tabs button.is-active:after{
  content:""!important;

  position:absolute!important;

  left:28px!important;
  right:28px!important;
  bottom:-11px!important;

  height:4px!important;

  border-radius:999px!important;

  background:
    linear-gradient(
      90deg,
      #0e0871 0%,
      #4b42ff 100%
    )!important;

  box-shadow:
    0 0 18px rgba(75,66,255,.42)!important;
}

/* =====================================================
   ICONS
   ===================================================== */

.csf-ico{
  position:relative!important;

  width:74px!important;
  height:74px!important;

  border-radius:24px!important;

  background-color:rgba(255,255,255,.88)!important;

  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;

  box-shadow:
    0 16px 30px rgba(14,8,113,.12),
    inset 0 1px 0 rgba(255,255,255,1)!important;

  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;

  transition:
    transform .25s ease,
    box-shadow .25s ease!important;

  color:transparent!important;
  font-size:0!important;
}

/* tire image */
.csf-tabs button:first-child .csf-ico{
  background-image:url('https://camion.md/wp-content/uploads/2026/03/200e9033.jpg')!important;
}

/* car image */
.csf-tabs button:nth-child(2) .csf-ico{
  background-image:url('https://camion.md/wp-content/uploads/2026/05/images-removebg-preview.png')!important;
}

/* active icon */
.csf-tabs button.is-active .csf-ico{

  transform:
    translateY(-2px)
    scale(1.06)!important;

  box-shadow:
    0 24px 40px rgba(14,8,113,.18),
    0 0 22px rgba(75,66,255,.16),
    inset 0 1px 0 rgba(255,255,255,1)!important;
}

/* texts */
.csf-tabs button b{
  font-size:18px!important;
  line-height:1.02!important;
  letter-spacing:-.02em!important;
  color:#0e0871!important;
}

.csf-tabs button small{
  margin-top:5px!important;
  font-size:14px!important;
  line-height:1!important;
  color:#1e2d63!important;
  opacity:.88!important;
}

/* mobile */
@media(max-width:760px){

  .csf-tabs{
    padding:8px!important;
    gap:8px!important;
  }

  .csf-tabs button{
    min-height:78px!important;
    border-radius:18px!important;
  }

  .csf-tabs button.is-active{
    transform:
      translateY(-4px)
      scale(1.01)!important;
  }

  .csf-ico{
    width:52px!important;
    height:52px!important;
    border-radius:18px!important;
  }

  .csf-tabs button b{
    font-size:12px!important;
  }

  .csf-tabs button small{
    font-size:10px!important;
  }
}

@media(max-width:760px){
  .csf-tabs button{
    height:66px;
    padding:8px 10px;
    font-size:12px;
  }

  .csf-ico{
    width:44px;
    height:44px;
    display:flex;
  }

  .csf-tabs small{
    font-size:12px;
  }
}




/* CAMION blue */

.csf-tabs button{
  color:#0e0871 !important;
}

.csf-tabs small{
  color:#0e0871 !important;
}

.csf-tabs button.is-active{
  color:#0e0871 !important;
}

/* CAMION main blue */

:root{
  --camion-blue:#0e0871;
}

/* рамки */
.csf-box{
  border-color:var(--camion-blue)!important;
}

.csf-tabs{
  border-bottom-color:var(--camion-blue)!important;
}

/* активная кнопка */
.csf-submit{
  background:var(--camion-blue)!important;
}

/* hover */
.csf-submit:hover{
  background:#140b96!important;
}

/* reset */
.csf-reset{
  border-color:var(--camion-blue)!important;
  color:var(--camion-blue)!important;
}

/* табы */
.csf-tabs button{
  color:var(--camion-blue)!important;
}

.csf-tabs small{
  color:var(--camion-blue)!important;
}

/* иконки */
.csf-ico{
  background-color:#eef1ff!important;
}

/* цены */
.csf-axis-name,
.csf-kit-badge,
.csf-join{
  color:var(--camion-blue)!important;
}

/* карточки */
.csf-kit.is-smart{
  border-color:#c8ccff!important;
}

/* теги */
.csf-tags span{
  background:#eef1ff!important;
  color:var(--camion-blue)!important;
}




/* CAMION — premium glass tabs */

.csf-tabs{
  background:linear-gradient(90deg,#ffffff 0%,#ffffff 49.8%,#eef3fb 49.8%,#f7faff 100%)!important;
  border-bottom:2px solid #0e0871!important;
  box-shadow:inset 0 -1px 0 rgba(14,8,113,.18)!important;
}

.csf-tabs button{
  height:82px!important;
  padding:8px 22px!important;
  gap:18px!important;
  background:rgba(255,255,255,.62)!important;
  color:#0e0871!important;
  font-size:15px!important;
  line-height:1.05!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}

.csf-tabs button:nth-child(2){
  background:rgba(238,243,251,.82)!important;
  box-shadow:inset 1px 0 0 rgba(14,8,113,.18)!important;
}

.csf-tabs button.is-active{
  background:rgba(255,255,255,.9)!important;
}

.csf-tabs button strong,
.csf-tabs button span{
  line-height:1.05!important;
}

.csf-tabs small{
  margin-top:2px!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:900!important;
  color:#0e0871!important;
}

.csf-ico{
  width:64px!important;
  height:64px!important;
  border-radius:20px!important;
  background-color:rgba(255,255,255,.72)!important;
  background-size:contain!important;
  box-shadow:
    0 12px 26px rgba(14,8,113,.12),
    inset 0 1px 0 rgba(255,255,255,.9)!important;
}

.csf-tabs button:hover{
  background:rgba(255,255,255,.96)!important;
}




/* CAMION premium selects */

.csf-size-grid select,
.csf-extra-grid select,
.csf-car-grid select{
  border:1px solid #0e0871!important;
  background:#fff!important;
  color:#111827!important;
  font-weight:800!important;
  border-radius:0!important;
  box-shadow:none!important;
  height:40px!important;
  padding:0 38px 0 12px!important;

  appearance:none!important;
  -webkit-appearance:none!important;
  -moz-appearance:none!important;

  background-image:
    linear-gradient(45deg, transparent 50%, #111827 50%),
    linear-gradient(135deg, #111827 50%, transparent 50%)!important;

  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px)!important;

  background-size:5px 5px,5px 5px!important;
  background-repeat:no-repeat!important;
}

/* placeholder */
.csf-size-grid select:invalid,
.csf-extra-grid select:invalid,
.csf-car-grid select:invalid{
  color:#9aa3b2!important;
  font-weight:700!important;
}

/* labels */
.csf-label{
  color:#111827!important;
  font-size:13px!important;
  letter-spacing:.02em!important;
}

/* reset button */
.csf-reset{
  position:relative!important;
  padding-left:42px!important;
}

/* крестик */
.csf-reset:before{
  content:"✕"!important;
  position:absolute!important;
  left:16px!important;
  top:50%!important;
  transform:translateY(-50%)!important;

  font-size:15px!important;
  font-weight:900!important;

  color:#0e0871!important;
}






/* CAMION spacing + softer selects */

.csf-panel{
  padding-top:16px!important;
  padding-bottom:8px!important;
}

/* заголовки над селекторами */
.csf-label{
  margin-bottom:4px!important;
  color:#111827!important;
}

/* селекторы */
.csf-size-grid select,
.csf-extra-grid select,
.csf-car-grid select{
  color:#6b7280!important;
  font-weight:600!important;
  letter-spacing:0!important;
}

/* текст option */
.csf-size-grid option,
.csf-extra-grid option,
.csf-car-grid option{
  color:#6b7280!important;
  font-weight:600!important;
}

/* расстояние между строками */
.csf-size-grid{
  row-gap:10px!important;
}

/* чекбокс */
.csf-check{
  margin-top:4px!important;
}

/* блок фильтров снизу */
.csf-extra-grid{
  margin-top:18px!important;
}






/* CAMION — compact premium result cards */

.csf-found{
  margin:18px 0 10px!important;
  color:#0e0871!important;
  font-size:15px!important;
}

.csf-kit{
  border:1px solid rgba(14,8,113,.16)!important;
  border-radius:18px!important;
  padding:18px 20px!important;
  box-shadow:0 14px 34px rgba(14,8,113,.07)!important;
}

.csf-kit-top{
  margin-bottom:14px!important;
}

.csf-kit-top h3{
  font-size:22px!important;
  color:#07182f!important;
}

.csf-kit-top p{
  font-size:15px!important;
  color:#50617c!important;
}

.csf-kit-badge{
  background:#eef1ff!important;
  color:#0e0871!important;
  padding:10px 14px!important;
  font-size:12px!important;
}
/* EXACT OEM */
.csf-kit-badge.is-exact{
    background:#eef1ff!important;
    color:#0e0871!important;

    box-shadow:
        0 0 14px rgba(14,8,113,.18),
        inset 0 1px 0 rgba(255,255,255,.8)!important;
}

/* SMART OEM */
.csf-kit-badge.is-smart{
    background:#ecfff1!important;
    color:#0b8f3a!important;

    box-shadow:
        0 0 18px rgba(11,143,58,.30),
        0 0 8px rgba(11,143,58,.18),
        inset 0 1px 0 rgba(255,255,255,.8)!important;
}

/* SAFE ANALOG */
.csf-kit-badge.is-safe{
    background:#fff8df!important;
    color:#c28a00!important;

    box-shadow:
        0 0 16px rgba(20,184,166,.26),
        inset 0 1px 0 rgba(255,255,255,.8)!important;
}

.csf-kit-main{
  grid-template-columns:1fr 34px 1fr!important;
  gap:14px!important;
}

.csf-axis-card{
  border:1px solid rgba(14,8,113,.14)!important;
  border-radius:16px!important;
  padding:12px 14px!important;
  grid-template-columns:96px 1fr!important;
  gap:14px!important;
  background:linear-gradient(180deg,#fff,#fbfcff)!important;
}

.csf-img img{
  width:96px!important;
  height:96px!important;
  object-fit:contain!important;
}

.csf-axis-name{
  color:#0e0871!important;
  font-size:11px!important;
}

.csf-axis-size{
  font-size:22px!important;
  margin:4px 0!important;
  color:#07182f!important;
}

.csf-product-title{
  font-size:14px!important;
  color:#40516c!important;
  margin:4px 0!important;
}

.csf-axis-price{
  font-size:0!important;
  margin:6px 0!important;
}

.csf-axis-price::before{
  content:"Цена за 1 шт.: ";
  font-size:13px!important;
  color:#667085!important;
  font-weight:800!important;
}

.csf-axis-price{
  color:#07182f!important;
}

.csf-axis-price strong,
.csf-axis-price span{
  font-size:22px!important;
  font-weight:900!important;
}

.csf-cart{
  min-height:34px!important;
  border-radius:9px!important;
  background:#0e0871!important;
  font-size:12px!important;
  padding:0 12px!important;
}

.csf-join{
  color:#0e0871!important;
  font-size:22px!important;
}

.csf-kit-bottom{
  margin-top:14px!important;
  padding-top:14px!important;
}

.csf-tags span{
  background:#eef1ff!important;
  color:#0e0871!important;
  padding:8px 11px!important;
  font-size:12px!important;
}

.csf-total small{
  color:#667085!important;
  font-size:13px!important;
}

.csf-total strong{
  font-size:28px!important;
  color:#07182f!important;
}

.csf-total a{
  background:#18bf5b!important;
  border-radius:11px!important;
  padding:11px 15px!important;
}

/* подпись к общей цене */
.csf-total small::after{
  content:" · цена уже за комплект";
}

@media(max-width:760px){
  .csf-kit-main{
    grid-template-columns:1fr!important;
  }

  .csf-axis-card{
    grid-template-columns:82px 1fr!important;
  }

  .csf-img img{
    width:82px!important;
    height:82px!important;
  }
}





/* CAMION — mobile premium UI */

@media(max-width:760px){

  .csf-box{
    border-color:#0e0871!important;
    border-radius:16px!important;
    overflow:hidden!important;
    box-shadow:0 18px 42px rgba(14,8,113,.12)!important;
  }

  .csf-box:after{
    display:block!important;
    right:-190px!important;
    bottom:-40px!important;
    width:420px!important;
    height:420px!important;
    opacity:.12!important;
    filter:grayscale(1)!important;
    background-size:contain!important;
    background-repeat:no-repeat!important;
  }

  .csf-panel{
    padding:14px 14px 12px!important;
  }

  .csf-size-grid{
    gap:8px!important;
  }

  .csf-label{
    display:block!important;
    font-size:11px!important;
    margin-bottom:2px!important;
    color:#07182f!important;
  }

  .csf-size-grid select,
  .csf-extra-grid select,
  .csf-car-grid select{
    height:38px!important;
    font-size:12px!important;
    font-weight:600!important;
    color:#7b8493!important;
    padding:0 28px 0 9px!important;
    border-color:#0e0871!important;
    background-color:rgba(255,255,255,.92)!important;
  }

  .csf-extra-grid{
    margin-top:12px!important;
    gap:10px!important;
  }

  .csf-check{
	width: 250px;
    font-size:10px!important;
    margin-top:1px!important;
  }

  .csf-actions{
    gap:10px!important;
    padding:12px 14px 14px!important;
  }

  .csf-submit,
  .csf-reset{
    height:42px!important;
    border-radius:10px!important;
    font-size:13px!important;
  }

  .csf-results{
    gap:14px!important;
  }

  .csf-kit{
    border-radius:18px!important;
    padding:14px!important;
    background:rgba(255,255,255,.9)!important;
    box-shadow:0 14px 34px rgba(14,8,113,.12)!important;
  }

  .csf-kit-top h3{
    font-size:20px!important;
    line-height:1.15!important;
  }

  .csf-kit-main{
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  .csf-axis-card{
    grid-template-columns:64px 1fr!important;
    gap:8px!important;
    padding:10px!important;
    border-radius:14px!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(14,8,113,.08)!important;
  }

  .csf-img img{
    width:64px!important;
    height:64px!important;
  }

  .csf-axis-name{
    font-size:10px!important;
  }

  .csf-axis-size{
    font-size:15px!important;
    margin:2px 0!important;
  }

  .csf-product-title{
    font-size:11px!important;
    line-height:1.2!important;
  }

  .csf-axis-price{
    font-size:17px!important;
    margin:4px 0!important;
  }

  .csf-cart{
    min-height:30px!important;
    font-size:11px!important;
    border-radius:8px!important;
    padding:0 8px!important;
  }

  .csf-join{
    display:none!important;
  }

  .csf-kit-bottom{
    margin-top:10px!important;
    padding-top:10px!important;
  }

  .csf-tags span{
    font-size:11px!important;
    padding:7px 9px!important;
  }

  .csf-total{
    margin-top:10px!important;
  }

  .csf-total strong{
    font-size:24px!important;
  }
}






/* CAMION — mobile compact result cards + axle labels */

@media(max-width:760px){

  .csf-kit{
    padding:12px!important;
    border-radius:16px!important;
  }

  .csf-kit-main{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .csf-axis-card{
    display:grid!important;
    grid-template-columns:74px 1fr!important;
    gap:10px!important;
    padding:10px!important;
    min-height:0!important;
    border-radius:14px!important;
  }

  .csf-img img{
    width:72px!important;
    height:72px!important;
  }

  .csf-axis-name{
    display:inline-flex!important;
    width:max-content!important;
    padding:5px 9px!important;
    border-radius:999px!important;
    background:#eef1ff!important;
    color:#0e0871!important;
    font-size:10px!important;
    line-height:1!important;
    margin-bottom:4px!important;
  }

  .csf-axis-size{
    font-size:17px!important;
    line-height:1.15!important;
    margin:2px 0!important;
  }

  .csf-product-title{
    font-size:12px!important;
    line-height:1.2!important;
    margin:3px 0!important;
  }

  .csf-axis-price{
    font-size:18px!important;
    line-height:1.1!important;
    margin:4px 0!important;
  }

  .csf-cart{
    min-height:30px!important;
    width:max-content!important;
    padding:0 10px!important;
    font-size:11px!important;
    border-radius:8px!important;
  }

  .csf-kit-bottom{
    margin-top:8px!important;
    padding-top:8px!important;
  }

  .csf-tags{
    gap:6px!important;
  }

  .csf-tags span{
    padding:6px 8px!important;
    font-size:10px!important;
  }

  .csf-total strong{
    font-size:23px!important;
  }
}






/* CAMION — always show price for 1 tire */

.csf-axis-price:before{
  content:"Цена за 1 шт.:"!important;
}

/* убрать любые старые подписи */
.csf-axis-price small,
.csf-axis-price em{
  display:none!important;
}

/* desktop */
@media(min-width:761px){

  .csf-axis-price{
    display:flex!important;
    align-items:baseline!important;
    gap:8px!important;

    margin-top:8px!important;
    margin-bottom:8px!important;
  }

  .csf-axis-price:before{
    font-size:13px!important;
    font-weight:700!important;
    color:#667085!important;
  }

  .csf-axis-price strong,
  .csf-axis-price b,
  .csf-axis-price span{
    font-size:18px!important;
    font-weight:900!important;
    color:#07182f!important;
  }
}

/* mobile */
@media(max-width:760px){

  .csf-axis-price{
    display:block!important;
    line-height:1.15!important;
    margin-top:4px!important;
  }

  .csf-axis-price:before{
    display:block!important;
    margin-bottom:2px!important;

    font-size:11px!important;
    font-weight:700!important;
    color:#667085!important;
  }

  .csf-axis-price strong,
  .csf-axis-price b,
  .csf-axis-price span{
    font-size:16px!important;
    font-weight:900!important;
    color:#07182f!important;
  }
}





/* CAMION — force blue price */

.csf-axis-price,
.csf-axis-price strong,
.csf-axis-price span{
  color:#0e0871!important;
  font-weight:900!important;
  text-shadow:
    0 0 1px rgba(14,8,113,.22),
    0 0 8px rgba(14,8,113,.12)!important;
}

.csf-price-label{
  color:#667085!important;
  font-weight:700!important;
  text-shadow:none!important;
}



/* CAMION — soft glowing price */

.csf-axis-price,
.csf-axis-price strong,
.csf-axis-price span{
  color:#0e0871!important;
  font-weight:900!important;

  text-shadow:
    0 0 .4px rgba(14,8,113,.45),
    0 0 2px rgba(14,8,113,.22),
    0 0 6px rgba(14,8,113,.10)!important;

  -webkit-font-smoothing:antialiased!important;
  text-rendering:optimizeLegibility!important;
}




/* CAMION — mobile tabs fix */

@media(max-width:760px){

  .csf-tabs{
    grid-template-columns:1fr 1fr!important;
    overflow:hidden!important;
  }

  .csf-tabs button{
    min-width:0!important;
    width:100%!important;

    padding:1px 1px!important;
    gap:8px!important;

    justify-content:center!important;
    align-items:center!important;

    overflow:hidden!important;
  }

  .csf-tabs button span:last-child{
    min-width:0!important;
    overflow:hidden!important;
  }

  .csf-tabs button b{
    display:block!important;
    font-size:11px!important;
    line-height:1!important;

    white-space:normal!important;
    word-break:break-word!important;
  }

  .csf-tabs button small{
    display:block!important;
    font-size:10px!important;
    line-height:1!important;

    white-space:normal!important;
    word-break:break-word!important;

    margin-top:2px!important;
  }

  .csf-ico{
    width:42px!important;
    height:42px!important;
    flex-shrink:0!important;
  }
}







/* CAMION — axle icons instead of text */

@media(max-width:760px){

  .csf-size-grid{
    position:relative!important;
    padding-left:18px!important;
  }

  /* убрать текст */
  .csf-size-grid:before,
  .csf-size-grid:after{
    content:""!important;

    position:absolute!important;
    left:0!important;

    width:10px!important;
    height:26px!important;

    border-radius:8px!important;

    background:
      linear-gradient(
        180deg,
        #0e0871 0%,
        #3a35c9 100%
      )!important;

    box-shadow:
      0 0 8px rgba(14,8,113,.18)!important;
  }

  /* передняя */
  .csf-size-grid:before{
    top:18px!important;
  }

  /* задняя */
  .csf-size-grid:after{
    top:76px!important;
    opacity:.38!important;
  }

  /* подсветка рядов */
  .csf-size-grid select[data-field="fw"],
  .csf-size-grid select[data-field="fp"],
  .csf-size-grid select[data-field="fd"]{
    background:
      linear-gradient(90deg,#eef1ff 0,#eef1ff 3px,#fff 3px)!important;
  }

  .csf-size-grid select[data-field="rw"],
  .csf-size-grid select[data-field="rp"],
  .csf-size-grid select[data-field="rd"]{
    background:
      linear-gradient(90deg,#d9ddeb 0,#d9ddeb 3px,#fff 3px)!important;
  }
}






/* CAMION — force select arrows */

.csf-size-grid select{
  -webkit-appearance:none!important;
  appearance:none!important;

  background-color:#fff!important;

  background-image:
    linear-gradient(45deg, transparent 50%, #111827 50%),
    linear-gradient(135deg, #111827 50%, transparent 50%)!important;

  background-position:
    calc(100% - 15px) 17px,
    calc(100% - 10px) 17px!important;

  background-size:5px 5px!important;
  background-repeat:no-repeat!important;

  padding-right:28px!important;
}




/* CAMION — softer select text */

.csf-size-grid select,
.csf-extra-grid select,
.csf-car-grid select{
  color:#6b7280!important;
  font-weight:400!important;
  letter-spacing:0!important;
}

/* =========================================================
   CAMION — FINAL CLEAN OVERRIDE 2026-05-18
   Исправляет мобильный блок фильтра, стрелки select и premium вид.
   Этот блок должен быть САМЫМ ПОСЛЕДНИМ в файле.
   ========================================================= */

@media (max-width:760px){

  .csf-wrap{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .csf-wrap .csf-box{
    border:2px solid #0e0871!important;
    border-radius:20px!important;
    overflow:hidden!important;
    background:linear-gradient(180deg,#ffffff 0%,#f9faff 100%)!important;
    box-shadow:0 18px 42px rgba(14,8,113,.14)!important;
  }

  .csf-wrap .csf-box:after{
    display:block!important;
    right:-195px!important;
    bottom:-30px!important;
    width:420px!important;
    height:420px!important;
    opacity:.10!important;
    filter:grayscale(1)!important;
    background-size:contain!important;
    background-repeat:no-repeat!important;
    pointer-events:none!important;
  }

  /* tabs */
  .csf-wrap .csf-tabs{
    border-bottom:2px solid #0e0871!important;
    background:linear-gradient(90deg,#fff 0%,#fff 50%,#f1f4ff 50%,#f8faff 100%)!important;
    box-shadow:0 8px 18px rgba(14,8,113,.06)!important;
  }

  .csf-wrap .csf-tabs button{
    height:74px!important;
    padding:6px 8px!important;
    gap:8px!important;
    background:rgba(255,255,255,.72)!important;
    position:relative!important;
  }

  .csf-wrap .csf-tabs button.is-active{
    background:#ffffff!important;
  }

  .csf-wrap .csf-tabs button.is-active:after{
    content:""!important;
    position:absolute!important;
    left:18px!important;
    right:18px!important;
    bottom:0!important;
    height:3px!important;
    border-radius:999px!important;
    background:#0e0871!important;
  }

  .csf-wrap .csf-ico{
    width:42px!important;
    height:42px!important;
    border-radius:16px!important;
    flex-shrink:0!important;
    display:flex!important;
  }

  .csf-wrap .csf-tabs button b{
    font-size:11px!important;
    line-height:1!important;
  }

  .csf-wrap .csf-tabs button small{
    font-size:10px!important;
    line-height:1!important;
    margin-top:2px!important;
  }

  /* panel spacing */
  .csf-wrap .csf-panel{
    padding:14px 14px 12px!important;
  }

  .csf-wrap .csf-size-grid{
    grid-template-columns:1fr 1fr 1fr!important;
    gap:8px 7px!important;
    padding-left:20px!important;
    position:relative!important;
  }

  .csf-wrap .csf-size-grid > div:first-child,
  .csf-wrap .csf-size-grid > div:nth-child(5),
  .csf-wrap .csf-size-grid .csf-axis-mark,
  .csf-wrap .csf-car-mini{
    display:none!important;
  }

  .csf-wrap .csf-size-grid .csf-label,
  .csf-wrap .csf-label,
  .csf-wrap .csf-extra-grid label,
  .csf-wrap .csf-car-grid label{
    display:block!important;
    font-size:11px!important;
    line-height:1.1!important;
    font-weight:900!important;
    letter-spacing:.04em!important;
    color:#0b1730!important;
    margin:0 0 3px!important;
    text-transform:uppercase!important;
  }

  .csf-wrap .csf-size-grid .csf-label{
    grid-row:auto!important;
    grid-column:auto!important;
  }

  .csf-wrap .csf-size-grid select[data-field="fw"],
  .csf-wrap .csf-size-grid select[data-field="rw"],
  .csf-wrap .csf-size-grid select[data-field="fp"],
  .csf-wrap .csf-size-grid select[data-field="rp"],
  .csf-wrap .csf-size-grid select[data-field="fd"],
  .csf-wrap .csf-size-grid select[data-field="rd"]{
    grid-column:auto!important;
  }

  /* axle markers */
  .csf-wrap .csf-size-grid:before,
  .csf-wrap .csf-size-grid:after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    width:10px!important;
    height:26px!important;
    border-radius:8px!important;
    box-shadow:0 0 9px rgba(14,8,113,.18)!important;
  }

  .csf-wrap .csf-size-grid:before{
    top:34px!important;
    background:linear-gradient(180deg,#0e0871 0%,#3a35c9 100%)!important;
  }

  .csf-wrap .csf-size-grid:after{
    top:82px!important;
    background:linear-gradient(180deg,#9b9cdc 0%,#b6b7e8 100%)!important;
  }

  /* universal premium select + arrows */
  .csf-wrap .csf-panel.is-active .csf-size-grid select,
  .csf-wrap .csf-panel.is-active .csf-extra-grid select,
  .csf-wrap .csf-panel.is-active .csf-car-grid select{
    width:100%!important;
    height:38px!important;
    min-height:38px!important;
    border:1px solid rgba(14,8,113,.28)!important;
    border-radius:8px!important;
    color:#6b7280!important;
    font-size:12px!important;
    font-weight:400!important;
    letter-spacing:0!important;
    padding:0 30px 0 10px!important;
    outline:none!important;

    appearance:none!important;
    -webkit-appearance:none!important;
    -moz-appearance:none!important;

    background-color:#fff!important;
    background-image:
      linear-gradient(45deg, transparent 50%, #0e0871 50%),
      linear-gradient(135deg, #0e0871 50%, transparent 50%),
      linear-gradient(180deg,#ffffff 0%,#f7f8ff 100%)!important;
    background-position:
      calc(100% - 15px) 50%,
      calc(100% - 10px) 50%,
      0 0!important;
    background-size:
      5px 5px,
      5px 5px,
      100% 100%!important;
    background-repeat:no-repeat!important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 5px 14px rgba(14,8,113,.06)!important;
    transition:border-color .22s ease, box-shadow .22s ease, transform .18s ease!important;
  }

  /* front row: blue left stripe + arrows */
  .csf-wrap .csf-panel.is-active .csf-size-grid select[data-field="fw"],
  .csf-wrap .csf-panel.is-active .csf-size-grid select[data-field="fp"],
  .csf-wrap .csf-panel.is-active .csf-size-grid select[data-field="fd"]{
    background-image:
      linear-gradient(45deg, transparent 50%, #0e0871 50%),
      linear-gradient(135deg, #0e0871 50%, transparent 50%),
      linear-gradient(90deg,#eef1ff 0,#eef1ff 4px,transparent 4px),
      linear-gradient(180deg,#ffffff 0%,#f7f8ff 100%)!important;
    background-position:
      calc(100% - 15px) 50%,
      calc(100% - 10px) 50%,
      0 0,
      0 0!important;
    background-size:
      5px 5px,
      5px 5px,
      100% 100%,
      100% 100%!important;
    background-repeat:no-repeat!important;
  }

  /* rear row: soft violet left stripe + arrows */
  .csf-wrap .csf-panel.is-active .csf-size-grid select[data-field="rw"],
  .csf-wrap .csf-panel.is-active .csf-size-grid select[data-field="rp"],
  .csf-wrap .csf-panel.is-active .csf-size-grid select[data-field="rd"]{
    background-image:
      linear-gradient(45deg, transparent 50%, #0e0871 50%),
      linear-gradient(135deg, #0e0871 50%, transparent 50%),
      linear-gradient(90deg,#dfe1f2 0,#dfe1f2 4px,transparent 4px),
      linear-gradient(180deg,#ffffff 0%,#f7f8ff 100%)!important;
    background-position:
      calc(100% - 15px) 50%,
      calc(100% - 10px) 50%,
      0 0,
      0 0!important;
    background-size:
      5px 5px,
      5px 5px,
      100% 100%,
      100% 100%!important;
    background-repeat:no-repeat!important;
  }

  .csf-wrap .csf-panel.is-active select:focus{
    border-color:#3b33d6!important;
    box-shadow:
      0 0 0 3px rgba(59,51,214,.10),
      0 10px 24px rgba(14,8,113,.10)!important;
    transform:translateY(-1px)!important;
  }

  /* lower filters */
  .csf-wrap .csf-extra-grid,
  .csf-wrap .csf-car-grid{
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  .csf-wrap .csf-extra-grid{
    margin-top:8px!important;
  }

  .csf-wrap .csf-extra-grid label,
  .csf-wrap .csf-car-grid label{
    margin:0!important;
    padding:0!important;
  }

  .csf-wrap .csf-extra-grid select,
  .csf-wrap .csf-car-grid select{
    margin-top:3px!important;
  }

  .csf-wrap .csf-check{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    margin-top:2px!important;
    padding:0!important;
    min-height:auto!important;
    font-size:11px!important;
    line-height:1.15!important;
    color:#445066!important;
    text-transform:none!important;
    letter-spacing:0!important;
    font-weight:800!important;
  }

  .csf-wrap .csf-check input{
    width:17px!important;
    height:17px!important;
    margin:0!important;
    flex:0 0 17px!important;
  }

  /* actions */
  .csf-wrap .csf-actions{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:12px 14px 14px!important;
  }

  .csf-wrap .csf-reset,
  .csf-wrap .csf-submit{
    height:42px!important;
    border-radius:12px!important;
    font-size:13px!important;
    letter-spacing:.01em!important;
  }

  .csf-wrap .csf-submit{
    box-shadow:0 10px 22px rgba(14,8,113,.22)!important;
  }
}







/* CAMION — premium mobile result footer */

@media(max-width:760px){

  .csf-kit-bottom{
    margin-top:10px!important;
    padding-top:12px!important;
    border-top:1px solid rgba(14,8,113,.08)!important;
  }

  .csf-tags{
    gap:5px!important;
    margin-bottom:10px!important;
  }

  .csf-tags span{
    font-size:10px!important;
    padding:6px 8px!important;
    border-radius:999px!important;
    background:rgba(238,241,255,.85)!important;
  }

  .csf-total{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    align-items:end!important;
    gap:6px 12px!important;
  }

  .csf-total small{
    grid-column:1/-1!important;
    font-size:11px!important;
    line-height:1.2!important;
    color:#667085!important;
  }

  .csf-total strong{
    margin:0!important;
    font-size:28px!important;
    line-height:1!important;
    letter-spacing:-.03em!important;
    color:#07182f!important;
  }

  .csf-total a{
    margin:0!important;
    min-height:44px!important;
    padding:0 16px!important;
    border-radius:14px!important;
    font-size:14px!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }

  .csf-total a:after{
    content:" →";
  }
}







/* CAMION — compact mobile price block */

@media(max-width:760px){

  .csf-axis-price{
    margin-top:2px!important;
    margin-bottom:2px!important;
    line-height:1!important;

    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    flex-wrap:wrap!important;
  }

  .csf-axis-price:before{
    display:inline!important;
    margin:0!important;

    font-size:10px!important;
    line-height:1!important;
  }

  .csf-axis-price strong,
  .csf-axis-price span{
    font-size:15px!important;
    line-height:1!important;
  }

  .csf-product-title{
    margin-bottom:2px!important;
  }

  .csf-cart{
    margin-top:4px!important;
  }

}







/* CAMION — premium mobile tabs final */

@media(max-width:760px){

  .csf-tabs{
    padding:8px!important;
    gap:8px!important;
    background:linear-gradient(180deg,#ffffff 0%,#f5f7ff 100%)!important;
    border-bottom:1px solid rgba(14,8,113,.18)!important;
  }

  .csf-tabs button{
    height:68px!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.72)!important;
    border:1px solid rgba(14,8,113,.10)!important;
    box-shadow:0 8px 18px rgba(14,8,113,.06)!important;
  }

  .csf-tabs button.is-active{
    background:#ffffff!important;
    border-color:rgba(14,8,113,.28)!important;
    box-shadow:0 12px 26px rgba(14,8,113,.13)!important;
  }

  .csf-tabs button.is-active:after{
    display:none!important;
  }

  .csf-tabs button b{
    font-size:11px!important;
  }

  .csf-tabs button small{
    font-size:9px!important;
  }

  .csf-ico{
    width:44px!important;
    height:44px!important;
    border-radius:50%!important;
    background-color:#fff!important;
    box-shadow:0 6px 14px rgba(14,8,113,.10)!important;
  }
}





/* CAMION — premium active tabs */

@media(max-width:760px){

  .csf-tabs{
    padding:10px!important;
    gap:10px!important;
    overflow:visible!important;
  }

  .csf-tabs button{
    position:relative!important;

    min-height:78px!important;

    border-radius:18px!important;

    transition:
      transform .22s ease,
      box-shadow .22s ease,
      background .22s ease!important;

    box-shadow:
      0 8px 18px rgba(14,8,113,.07),
      inset 0 1px 0 rgba(255,255,255,.9)!important;
  }

  .csf-tabs button b{
    font-size:13px!important;
    line-height:1.05!important;
    font-weight:900!important;
    letter-spacing:.01em!important;
  }

  .csf-tabs button small{
    font-size:10px!important;
    line-height:1!important;
    margin-top:3px!important;
  }

  .csf-tabs button.is-active{

    transform:
      translateY(-6px)
      scale(1.03)!important;

    z-index:5!important;

    background:
      linear-gradient(
        180deg,
        #ffffff 0%,
        #f8f9ff 100%
      )!important;

    border:1px solid rgba(14,8,113,.24)!important;

    box-shadow:
      0 22px 38px rgba(14,8,113,.20),
      0 8px 16px rgba(14,8,113,.10),
      inset 0 1px 0 rgba(255,255,255,.95)!important;
  }

  .csf-tabs button.is-active:before{
    content:""!important;

    position:absolute!important;

    left:18px!important;
    right:18px!important;
    bottom:-10px!important;

    height:4px!important;

    border-radius:999px!important;

    background:
      linear-gradient(
        90deg,
        #0e0871 0%,
        #4338ff 100%
      )!important;

    box-shadow:
      0 6px 14px rgba(14,8,113,.28)!important;
  }

  .csf-ico{
    width:48px!important;
    height:48px!important;

    box-shadow:
      0 10px 20px rgba(14,8,113,.14)!important;
  }
}





/* CAMION — premium buttons desktop + mobile */

.csf-submit,
.csf-reset,
.csf-cart,
.csf-total a{
  position:relative!important;
  overflow:hidden!important;
  border-radius:14px!important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease!important;
}

/* блик */
.csf-submit:after,
.csf-reset:after,
.csf-cart:after,
.csf-total a:before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  left:-80%!important;
  width:55%!important;
  height:100%!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent)!important;
  transform:skewX(-18deg)!important;
  transition:left .55s ease!important;
  pointer-events:none!important;
}

.csf-submit:hover:after,
.csf-reset:hover:after,
.csf-cart:hover:after,
.csf-total a:hover:before{
  left:130%!important;
}

/* главная кнопка */
.csf-submit{
  background:linear-gradient(135deg,#0e0871 0%,#2012b8 100%)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 14px 28px rgba(14,8,113,.26)!important;
}

/* сброс */
.csf-reset{
  background:linear-gradient(180deg,#ffffff 0%,#f7f8ff 100%)!important;
  color:#0e0871!important;
  border:2px solid rgba(14,8,113,.75)!important;
  box-shadow:0 10px 22px rgba(14,8,113,.10)!important;
}

/* корзина */
/* только кнопка "Заказать" */
.csf-cart.is-order{
  background:linear-gradient(135deg,#ffd84d 0%,#ffbf00 100%)!important;
  color:#3a2a00!important;
  border:0!important;

  box-shadow:
    0 10px 22px rgba(255,191,0,.28),
    inset 0 1px 0 rgba(255,255,255,.55)!important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.35)!important;
}

/* hover */
.csf-cart.is-order:hover{
  background:linear-gradient(135deg,#ffe169 0%,#ffca1a 100%)!important;
}

/* active */
.csf-cart.is-order:active{
  transform:translateY(1px)!important;
}

/* WhatsApp */
.csf-total a{
  background:linear-gradient(135deg,#18bf5b 0%,#10a84d 100%)!important;
  color:#fff!important;
  box-shadow:0 12px 26px rgba(24,191,91,.28)!important;
}

/* hover */
.csf-submit:hover,
.csf-reset:hover,
.csf-cart:hover,
.csf-total a:hover{
  transform:translateY(-2px)!important;
}

/* active click */
.csf-submit:active,
.csf-reset:active,
.csf-cart:active,
.csf-total a:active{
  transform:translateY(0)!important;
}

/* mobile */
@media(max-width:760px){

  .csf-submit,
  .csf-reset{
    height:44px!important;
    border-radius:13px!important;
    font-size:13px!important;
    letter-spacing:.02em!important;
  }

  .csf-cart{
    min-height:32px!important;
    border-radius:10px!important;
    font-size:11px!important;
  }

  .csf-total a{
    min-height:44px!important;
    border-radius:14px!important;
    padding:0 16px!important;
  }
}






/* CAMION — axle divider bars inside selects */

@media(max-width:760px){

  /* передняя ось */
  .csf-size-grid select[data-field="fw"],
  .csf-size-grid select[data-field="fp"],
  .csf-size-grid select[data-field="fd"]{

    background-image:
      linear-gradient(90deg,#2c22d3 0,#2c22d3 4px,transparent 4px),
      linear-gradient(45deg, transparent 50%, #0e0871 50%),
      linear-gradient(135deg, #0e0871 50%, transparent 50%),
      linear-gradient(180deg,#ffffff 0%,#f7f8ff 100%)!important;

    background-position:
      left top,
      calc(100% - 15px) 50%,
      calc(100% - 10px) 50%,
      0 0!important;

    background-size:
      100% 100%,
      5px 5px,
      5px 5px,
      100% 100%!important;

    background-repeat:no-repeat!important;
  }

  /* задняя ось */
  .csf-size-grid select[data-field="rw"],
  .csf-size-grid select[data-field="rp"],
  .csf-size-grid select[data-field="rd"]{

    background-image:
      linear-gradient(90deg,#b8b2f1 0,#b8b2f1 4px,transparent 4px),
      linear-gradient(45deg, transparent 50%, #0e0871 50%),
      linear-gradient(135deg, #0e0871 50%, transparent 50%),
      linear-gradient(180deg,#ffffff 0%,#f7f8ff 100%)!important;

    background-position:
      left top,
      calc(100% - 15px) 50%,
      calc(100% - 10px) 50%,
      0 0!important;

    background-size:
      100% 100%,
      5px 5px,
      5px 5px,
      100% 100%!important;

    background-repeat:no-repeat!important;
  }

}



/* CAMION — final force axle bars with stronger selector */

@media(max-width:760px){

  .csf-wrap .csf-panel.is-active .csf-size-grid select[data-field="fw"],
  .csf-wrap .csf-panel.is-active .csf-size-grid select[data-field="fp"],
  .csf-wrap .csf-panel.is-active .csf-size-grid select[data-field="fd"]{
    border-left:5px solid #2c22d3!important;
    padding-left:11px!important;
  }

  .csf-wrap .csf-panel.is-active .csf-size-grid select[data-field="rw"],
  .csf-wrap .csf-panel.is-active .csf-size-grid select[data-field="rp"],
  .csf-wrap .csf-panel.is-active .csf-size-grid select[data-field="rd"]{
    border-left:5px solid #c6c1f4!important;
    padding-left:11px!important;
  }

}






/* CAMION — move exact badge to top right on mobile */

@media(max-width:760px){

  .csf-kit-top{
    position:relative!important;
    padding-right:110px!important;
    margin-bottom:8px!important;
  }

  .csf-kit-badge{
    position:absolute!important;

    top:-2px!important;
    right:0!important;

    margin:0!important;

    padding:6px 10px!important;

    font-size:10px!important;
    line-height:1!important;

    border-radius:999px!important;

    white-space:nowrap!important;

    box-shadow:
      0 6px 14px rgba(14,8,113,.10)!important;
  }

  .csf-kit-top h3{
    margin-right:0!important;
  }

}




/* CAMION — absolute final badge color override */

.csf-wrap .csf-kit .csf-kit-top .csf-kit-badge.is-smart{
  background:#ecfff1!important;
  color:#078c38!important;
  box-shadow:
    0 0 18px rgba(7,140,56,.35),
    0 0 8px rgba(7,140,56,.22),
    inset 0 1px 0 rgba(255,255,255,.9)!important;
}

.csf-wrap .csf-kit .csf-kit-top .csf-kit-badge.is-safe{
  background:#fff8df!important;
  color:#b98200!important;
  box-shadow:
    0 0 18px rgba(255,190,0,.36),
    0 0 8px rgba(255,190,0,.22),
    inset 0 1px 0 rgba(255,255,255,.9)!important;
}

.csf-wrap .csf-kit .csf-kit-top .csf-kit-badge.is-exact{
  background:#eef1ff!important;
  color:#0e0871!important;
  box-shadow:
    0 0 16px rgba(14,8,113,.22),
    inset 0 1px 0 rgba(255,255,255,.9)!important;
}






/* CAMION — premium glass left info block */

.csf-copy{
  position:relative!important;
  padding:44px 42px!important;
  border-radius:34px!important;
  overflow:hidden!important;

  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.95), transparent 32%),
    radial-gradient(circle at 90% 88%, rgba(145,190,255,.35), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(238,246,255,.72))!important;

  border:1px solid rgba(190,215,245,.8)!important;

  box-shadow:
    0 24px 55px rgba(14,8,113,.13),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 28px rgba(255,255,255,.65)!important;

  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

.csf-copy:before{
  content:""!important;
  position:absolute!important;
  inset:8px!important;
  border-radius:28px!important;
  border:1px solid rgba(255,255,255,.75)!important;
  pointer-events:none!important;
}

.csf-copy:after{
  content:"✦"!important;
  position:absolute!important;
  right:26px!important;
  bottom:22px!important;
  color:rgba(255,255,255,.95)!important;
  font-size:34px!important;
  text-shadow:
    0 0 14px rgba(80,140,255,.45),
    0 0 26px rgba(255,255,255,.9)!important;
}

.csf-copy h2{
  margin:0 0 34px!important;
  color:#111827!important;
  font-size:26px!important;
  line-height:1.15!important;
  font-weight:900!important;
  letter-spacing:-.03em!important;
  text-transform:uppercase!important;
  text-shadow:0 1px 0 rgba(255,255,255,.8)!important;
}

.csf-copy h2 span{
  display:inline-block!important;
  margin-left:6px!important;
  font-size:.72em!important;
  vertical-align:middle!important;
}

.csf-copy p{
  margin:0 0 28px!important;
  color:#4b5870!important;
  font-size:13px!important;
  line-height:1.65!important;
  font-weight:500!important;
}

.csf-copy ul{
  margin:0!important;
  padding:0!important;
  list-style:none!important;
  display:grid!important;
  gap:14px!important;
}

.csf-copy li{
  display:grid!important;
  grid-template-columns:58px 1fr!important;
  align-items:center!important;
  gap:16px!important;

  color:#4b5870!important;
  font-size:15px!important;
  line-height:1.35!important;
  font-weight:600!important;
}

.csf-copy li span{
  width:58px!important;
  height:58px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  border-radius:16px!important;
  background:rgba(255,255,255,.75)!important;

  box-shadow:
    0 8px 18px rgba(14,8,113,.10),
    inset 0 1px 0 rgba(255,255,255,.95)!important;

  font-size:25px!important;
}

@media(max-width:760px){
  .csf-copy{
    padding:30px 24px!important;
    border-radius:26px!important;
  }

  .csf-copy h2{
    font-size:30px!important;
    margin-bottom:24px!important;
  }

  .csf-copy li{
    grid-template-columns:50px 1fr!important;
  }

  .csf-copy li span{
    width:50px!important;
    height:50px!important;
    font-size:22px!important;
  }
}






/* CAMION — glass 3D right selector box */

.csf-box{
  border-radius:18px!important;
  border:1px solid rgba(14,8,113,.38)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.92),rgba(240,246,255,.78))!important;

  box-shadow:
    0 28px 65px rgba(14,8,113,.18),
    0 10px 24px rgba(14,8,113,.10),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 28px rgba(255,255,255,.55)!important;

  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

.csf-box:before{
  content:""!important;
  position:absolute!important;
  inset:8px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.65)!important;
  pointer-events:none!important;
  z-index:1!important;
}

.csf-tabs,
.csf-panel,
.csf-actions{
  position:relative!important;
  z-index:3!important;
}

.csf-tabs{
  border-radius:16px 16px 0 0!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.58)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}

.csf-tabs button{
  background:rgba(255,255,255,.62)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 24px rgba(14,8,113,.08)!important;
}

.csf-tabs button.is-active{
  background:rgba(255,255,255,.92)!important;
  box-shadow:
    0 16px 34px rgba(14,8,113,.14),
    inset 0 1px 0 rgba(255,255,255,1)!important;
}

.csf-size-grid select,
.csf-extra-grid select,
.csf-car-grid select{
  border-radius:10px!important;
  background-color:rgba(255,255,255,.82)!important;

  box-shadow:
    0 10px 22px rgba(14,8,113,.10),
    inset 0 1px 0 rgba(255,255,255,.95)!important;

  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

.csf-size-grid select:focus,
.csf-extra-grid select:focus,
.csf-car-grid select:focus{
  transform:translateY(-1px)!important;
  box-shadow:
    0 14px 28px rgba(14,8,113,.18),
    0 0 0 3px rgba(14,8,113,.08),
    inset 0 1px 0 rgba(255,255,255,1)!important;
}

.csf-submit{
  box-shadow:
    0 18px 34px rgba(14,8,113,.32),
    inset 0 1px 0 rgba(255,255,255,.28)!important;
}

.csf-reset{
  background:rgba(255,255,255,.72)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}



/* =====================================================
   CAMION — premium labels
   ===================================================== */

.csf-label{

  margin-bottom:-2px!important;

  font-size:12px!important;
  line-height:1!important;

  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;

  color:#0f172a!important;

  opacity:.92!important;

  position:relative!important;

  padding-left:2px!important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.9),
    0 0 10px rgba(255,255,255,.35)!important;
}

/* тонкая glow линия */
.csf-label:after{
  content:""!important;

  position:absolute!important;

  left:0!important;
  bottom:-6px!important;

  width:32px!important;
  height:2px!important;

  border-radius:999px!important;

  background:
    linear-gradient(
      90deg,
      #0e0871 0%,
      rgba(14,8,113,0) 100%
    )!important;

  opacity:.28!important;
}

/* desktop tighter spacing */
.csf-size-grid{
  row-gap:6px!important;
}

/* mobile */
@media(max-width:760px){

  .csf-label{
    font-size:10px!important;
    letter-spacing:.06em!important;
    margin-bottom:-1px!important;
  }

  .csf-label:after{
    width:22px!important;
    bottom:-4px!important;
  }

  .csf-size-grid{
    row-gap:4px!important;
  }
}





/* CAMION — align lower labels + manufacturer width */

.csf-extra-grid label{
  font-size:12px!important;

  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:#0f172a!important;
  opacity:.92!important;
  position:relative!important;
  padding-left:2px!important;
  text-shadow:0 1px 0 rgba(255,255,255,.9)!important;
}

.csf-extra-grid label:after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:16px!important;
  width:32px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#0e0871 0%,rgba(14,8,113,0) 100%)!important;
  opacity:.28!important;
}

/* делаем нижние селекторы в ровень с верхними */
.csf-extra-grid{
  grid-template-columns:180px 260px!important;
  gap:18px 24px!important;
}

/* производитель уже, не растягивается */
.csf-extra-grid label:nth-child(2){
  width:260px!important;
}

/* сам select внутри производителя */
.csf-extra-grid label:nth-child(2) select{
  width:208px!important;
}

/* сезон */
.csf-extra-grid label:nth-child(1),
.csf-extra-grid label:nth-child(1) select{
  width:180px!important;
}

  .csf-check{
	width: 250px;
    font-size:10px!important;
    margin-top:1px!important;
  }






/* CAMION — force season + manufacturer inline on mobile */

@media(max-width:760px){

  .csf-extra-grid{

    display:flex!important;
    flex-wrap:wrap!important;

    gap:10px!important;

    align-items:flex-start!important;
  }

  /* сезон */
  .csf-extra-grid > label:nth-child(1){

    width:calc(50% - 5px)!important;
    flex:0 0 calc(50% - 5px)!important;
  }

  /* производитель */
  .csf-extra-grid > label:nth-child(2){

    width:calc(50% - 5px)!important;
    flex:0 0 calc(50% - 5px)!important;
  }

  /* чекбокс вниз */
  .csf-extra-grid > .csf-check{

    width:100%!important;
    flex:0 0 100%!important;

    margin-top:2px!important;
  }

  /* select */
  .csf-extra-grid select{
    width:100%!important;
  }
}