/*
Theme Name:   Ocart1
Author:       ocart.net 
Author URI:   https://ocart.net 
License:      9 USD
Copyright 2026 Ocart.net 
*/

/*-------------------------------------------------------*/
/*  = Global css styles 
/*-------------------------------------------------------*/

*{
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}
html{
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
}
.fix{
    margin:0 auto;
    max-width:1170px;
}
.wrapper{ 
    position: relative;
}
.hh,.ff{
    padding: 0px 15px;
}
.cc{
    padding: 10px 15px;
    overflow: hidden;
    position: relative;
}

/*-------------------------------------------------------*/
/*  = Helper styles 
/*-------------------------------------------------------*/
.left{
    float: left;
}
.right{
    float: right;
}
.none{
    float: none;
}
.clear{
    clear: both;
}
.image{
    position: relative;
}
.img-responsive{
    display: block;
    height: auto;
    max-width: 100% !important;
}
.center{
    /*display: block;*/
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}
.row:after, .row:before {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}

input[type="checkbox"],
input[type="radio"] {
  transform: scale(1.5);
  margin-right: 5px;
}
.set1{
    margin-bottom: 10px;
}
/*-------------------------------------------------------*/
/*  = Main template css styles
/*-------------------------------------------------------*/
body{
    font: 14px/22px Arial, Helvetica, sans-serif;
}
.header a{
    color: #fff;
    text-decoration: none;
}
h1{ font-size: 24px; }
h2{ font-size: 22px; }
h3{ font-size: 20px; }
h4{ font-size: 18px; }
h5{ font-size: 16px; }
h6{ font-size: 14px; }

h1,h2,h3,h4,h5,h6{
    padding: 10px 0;
}
p{
    line-height: 1.5;
}
/*-------------------------------------------------------*/
/*  = Columns
/*-------------------------------------------------------*/
.q1, .q2, .q3, .q4, .q5, .q6, .q7, .q8, .q9, .q10, .q11, .q12{
    float: left;
    position: relative;
    /*overflow: hidden;*/
}
.q1{
    width: 8.3333%;
}
.q2{
    width: 16.6666%;
}
.q3{
    width: 25%;
}
.q4{
    width: 33.3333%;
}
.q5{
    width: 41.6666%;
}
.q6{
    width: 50%;
}
.q7{
    width: 58.3333%;
}
.q8{
    width: 66.6666%;
}
.q9{
    width: 75%;
}
.q10{
    width: 83.3333%;
}
.q11{
    width: 91.6666%;
}
.q12{
    width: 100%;
}
/*-------------------------------------------------------*/
/*  = Default Colors
/*-------------------------------------------------------*/
body{
    background: #fff;
}
.header,.more,.price-new,.price-old,.active,
.pcm select,.pcm select option,.btn,
#login-form .btn
{
    background: #6D61EE;
}
.fixed{
    background: #6D61EE;
}
.footer{
    background: #6D61EE;
}
.wrapper{
    background: #fff;
}
h1,h2,h3,h4,h5,h6,
.container a,
.headertop,.headertop a,
.searchformtop ::-moz-placeholder,
.searchformtop ::-webkit-input-placeholder,
.cart .dropdown,
.smenu ul li:before,
.smenu ul li a,
.smenu i,
.smenu .smenu-item,
.pc ul li:before,
.breadcrumb > li + li::before,
.pcm,.filter-content,.nameprice,
.fff label,.mfp-title,.checkout-link a,
#cart .dropdown .text-left a, .proinf li,.dislst,
.smenu .filtertt,.wishprice
{
    color: #6D61EE;
}
.footer a,.pagination a
#cart-total,
.cart,.pmore a,
.price-new,.price-old,.active,
.pcm select, a.btn
{
    color: #fff;
}
.cart .dropdown{
    border-color: #6D61EE; 
}
.carttit{

}
.wp-pagenavi a:hover{
    border-color: #6D61EE;
}

/*-------------------------------------------------------*/
/*  = Footer to bottom
/*-------------------------------------------------------*/
.wrapper{
    min-height: 100%;
}
.cc{
    padding-bottom: 50px;
}
.footer{
    position: absolute;
    left: 0; right:0; bottom: 0;
    width: 100%;
    margin-left:auto;
    margin-right:auto;   
}
/*-------------------------------------------------------*/
/*  = Buttons
/*-------------------------------------------------------*/
.more,.edit {
    float: left;
    display: block;
    border-radius: 3px;
    color: #FFFFFF;
    padding: 4px 12px;
    text-align: center;
    text-decoration: none;
}
.content .more{
    color: #fff;
    margin-left: 15px;
}
.more{
     float: right;
}
.logout-wrap .btn{
    background: green;
}
.btn, .btn a,.btncart{
    width: 200px;
    margin: 15px 0;
}
.btncart{
    width: 100%;
    margin: 15px 0;
}
.text-right .btn{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
} 
.btn,.btncart,#login-form .btn {
    display: inline-block;
    color: #fff;
    text-align: center;
    padding: 12px 0;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    box-sizing: border-box;
    width: 100%;
}
.btncart{
    font-weight: bold;
    background: #E81F0F;
}
.content a,.content a.btn:hover{
    text-decoration: none;
}
#login-form,#register-form{
    width: 400px;
}
/*-------------------------------------------------------*/
/*  = Cart                                        
/*-------------------------------------------------------*/

.cart .dropdown {
    position: absolute;
    top: 45px;
    right: 0;
    display: none;
    background: #fff;
    border: 1px solid #6D61EE;
    z-index: 5000;
    margin: 0;
}
.cart .dropdown .text-center{
    text-align: center;
    padding-top: 10px;
}
.cart .btn{
    width: 60px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin-bottom: 0;
}
#cart .dropdown {
    position: absolute;
    top: 45px;
    right: 0;
    z-index: 1001;
    display: none;
    float: left;
    min-width: 400px;
    padding: 0 15px 15px;
    margin: 0;
    text-align: left;
    border: 1px solid #ccc;
    border-top: 0 !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    background: #fff;
    overflow: hidden;
}
#cart{
    font-weight: bold;
    width: 50px;
    height: 40px;
    position: absolute;
    right: 15px; 
    top: 5px;

}
#cart .dropdown {
    padding: 0 15px 15px;
}

/* Сбрасываем падинги у элементов списка */
#cart .dropdown li {
    padding: 0 !important;
    position: relative; /* Чтобы крестик позиционировался внутри li */
}

/* Оформляем заголовок с отступом, чтобы он не налезал на крестик */
.carttit {
    padding: 10px 15px 15px 0;
    margin: 0;
    display: block;
}

/* Крестик теперь не занимает места в потоке (absolute) */
.cartclose {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    z-index: 99;
}

/* Растягиваем таблицу принудительно */
#cart .dropdown table {
    width: 100% !important;
    margin: 0 !important;
    border-spacing: 0;
     border-top: none;
}
#cart .dropdown.active {
    display: block;
}

/* Стили таблицы товаров */
#cart .dropdown table {
    width: 100%;
    border-collapse: collapse;
}

#cart .dropdown table td {
    padding: 8px 5px;
    vertical-align: middle;
    font-size: 13px;
    color: #333;
}

#cart .dropdown .table-striped td img {
    border-radius: 4px;
    padding: 2px;
}

/* Названия товаров */
#cart .dropdown .text-left a {
    text-decoration: none;
    font-weight: 500;
}

/* Кнопка удаления (крестик) */
#cart .dropdown .btndan {
    background: #d9534f;
    border: none;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 20px;
    cursor: pointer;
}
#cart-totals tr:last-child td:last-child,
#cart .dropdown table:last-of-type tr:last-child td:last-child
{
    font-size: 18px;

}
/* Выбираем вторую строку (Image) и третью строку (Price) внутри tbody */
#compa tbody tr:nth-child(1) td:not(:first-child),
#compa tbody tr:nth-child(2) td:not(:first-child),
#compa tbody tr:nth-child(3) td:not(:first-child) {
    font-weight: bold;
    color: #6D61EE;
}
#compa td:not(:first-child) {
    text-align: center;
    vertical-align: middle;
}
.table-bordered {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

#cart .dropdown .table-bordered td,
#cart .dropdown .table-bordered th,
#opc-form .table-bordered td:last-child,
#opc-form .table-bordered th:last-child,
#cart-totals
{
    text-align: right;
    padding: 4px 5px;
}

#cart .dropdown .table-bordered tr:last-child,
#opc-form .table-bordered tr
{
    font-weight: bold;
    font-size: 15px;
    color: #444;
}
#cart .dropdown .table-bordered tbody tr:last-child td:last-child, 
{
    font-size: 16px !important; /* Увеличиваем размер */
}
/* Контейнер для прокрутки на мобилках */
.panel-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.panel1 .table {
    width: 100%;
    min-width: 600px; /* Гарантируем, что таблица не сожмется меньше этого значения */
}
#cart-table-body td.prname {
    vertical-align: middle;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Первый (картинка) и третий (кол-во) столбцы по контенту */
.panel-body .table td:nth-child(1),
.panel-body .table td:nth-child(3) {
    width: 1%;
    white-space: nowrap;
}

/* Второй (название) — гибкий */
.panel-body .table td:nth-child(2) {
    width: auto;
    min-width: 150px;
}

/* Последний столбец (Total) — строго фиксированный */
.panel-body .table td:last-child {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    text-align: right;
}

#compa.table-bordered thead td {
    background: #6D61EE; 
    color: #fff;               
    vertical-align: middle;
}

#cart .fa-shopping-cart{
    padding-right: 10px;
    font-size: 30px;
}
#cart  .fa-times{
    font-size: 24px;
}
#cart .table-striped .fa-times{
    font-size: 16px;
}

#cart .btn{
    margin-top: 4px;
}

#cart .dropdown .table-striped a {
    font-weight: bold !important;
}
/* Выравниваем заголовки (th) и ячейки (td) в 3-м и 4-м столбцах */
#cart .dropdown table tr th:nth-child(3),
#cart .dropdown table tr td:nth-child(3),
#cart .dropdown table tr th:nth-child(4),
#cart .dropdown table tr td:nth-child(4) {
    text-align: center;
}
.table-striped th:nth-child(5),
.table-striped td:nth-child(5) {
    width: 30px;           /* Желаемая ширина */
    min-width: 30px;       /* Не дает сужаться */
    max-width: 30px;
}
#cart .dropdown .btndan{
  background:#d9534f;
  border:0;
  color:#fff;
  width:32px;
  height:32px;
  border-radius:3px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
/* Кнопка Checkout внизу */
.checkout-link {
    display: block;
    text-align: right;
    margin-top: 15px;
    padding-top: 10px;
}

.checkout-link a {
    font-weight: bold;
    text-decoration: none;
    font-size: 20px;
}

.checkout-link a:before {
    content: "➔ ";
}

.checkout-link a:hover {
    text-decoration: underline;
}
/* Контейнер заголовка для позиционирования */
.cart .dropdown li:first-child {
    position: relative;
    padding-right: 30px; /* Место под крестик */
}

/* Стили крестика */
.cartclose {
    position: absolute;
    top: 5px;
    right: 2px;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    z-index: 10;
}

.cartclose .fa-times {
    color: #6D61EE;
    font-size: 18px;
    transition: color 0.2s;
}

.cartclose:hover .fa-times {
    color: #E81F0F; /* Цвет при наведении */
}

/* Убираем стандартное отображение, если оно мешает */
.cart .dropdown {
    display: none; 
    list-style: none;

}
.cart .dropdown table tr{
   border-top: 1px solid #ddd;
}
/*-------------------------------------------------------*/
/*  = Header
/*-------------------------------------------------------*/
.header,.headercol,.logo,.logo img{
    height: 50px;
}
.header{
    /*padding-bottom: 2px;*/
    width: 100%;
}
.hdt{
    margin: 0 auto;
    max-width: 1170px;
}
.headertop{
    position: relative;
    height: 33px;
    padding: 0px 15px;
    font-size: 13px;
}
.headertop a,.logo a{
    text-decoration: underline;
}
.headertop ul li{
    float: left;
    padding-right: 15px;
    padding-top: 4px;
}
.headertop ul li a{}
.headercol{
    position: relative;
}
.logo{
    float: left;
}
.logo a{
    display: block;
    font: bold 22px Arial, Helvetica, sans-serif;
    font-weight: 900;
    padding-top: 12px;
    text-decoration: none;
}
.fa-caret-down{
    color: #fff;
}
/*-------------------------------------------------------*/
/*  = Fixed header
/*-------------------------------------------------------*/
.fixed{
    position: fixed !important;
    width: 100%;
    z-index: 1001;
    top: 0px;
    /*left: 0;
    right: 0;*/
    -webkit-backface-visibility: hidden;
}
/*-------------------------------------------------------*/
/*  = Top menu
/*-------------------------------------------------------*/
.topmenu{
    float: right;
}
.topmenu a{
    padding: 14px 0;
}
.topmenu .nav{
    margin-right: 70px;
}
.nav,
.navleft,
.navright,
.navbot{
    float: left;
    margin: 0;
    padding: 0;
}
.nav li,
.navleft li,
.navright li,
.navbot li{
    display: inline-block;
    padding-right: 15px;
    color: #fff;
}
.navbot li.copy{
    padding-right: 0;
}
.nav li a,
.navleft a,
.navright a{
  display: inline-block;
  padding: 14px 0px;
}

.navbot li a{
    display: inline-block;
    padding: 14px 0;

}
.nav li:last-child{
    /*padding-right: 0px;*/
}
.navbot li:first-child,
.navbot li a:first-child{
    padding-left:0;
}
.navbot li a i{
    font-size: 16px;
}
.nav a,
.navleft a,
.navright a{
    font-size: 15px;
}
/*-------------------------------------------------------*/
/*  = Header sub menu
/*-------------------------------------------------------*/
.nav ul,
.navleft ul,
.navright ul{
    display: none;
    position: absolute;
    top: 50px; 
    z-index: 1000;
}
.nav ul ul,
.navleft ul ul,
.navright ul ul{
    display: block;
    top: auto;
}
.nav ul.active,
.navleft ul.active,
.navright ul.active{
    display: block;
}
.nav ul li,
.navleft ul li,
.navright ul li{
    display: block;
    background: #4750d0;
    min-width: 180px;
    border-bottom: 1px solid #eee;
    /*white-space: nowrap;*/
}
.nav ul li:last-child,
.navleft ul li:last-child,
.navright ul li:last-child{
    border-bottom: none;
}
.nav ul li a,
.navleft ul li a,
.navright ul li a{
    background: none;
    color: #fff;
    padding: 7px 0px 7px 15px;
    width: 100%;
}
.nav ul ul li,
.navleft ul ul li,
.navright ul ul li{
    border-left: 1px solid #eee;;
}
/*-------------------------------------------------------*/
/*  = Main content
/*-------------------------------------------------------*/
.content{
    float:right;
    margin-left: 4%;
    margin-bottom: 2%;
}
.content p{
    color: #333;
    margin-bottom: 10px;
}
.content a:hover{
    text-decoration: underline;
}
.account{
    margin: 20px 0;
}
/*-------------------------------------------------------*/
/*  = Sidebar
/*-------------------------------------------------------*/
.content{
    width: 75%;
}
.sidebar{
    width: 21%;
    float:left;
}
.sidebar2{
    width: 21%;
    float:right;
}
.smenu::after {
    content: "";
    display: table;
    clear: both;
}
.smenu {
    display: block;
}

.smenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.smenu li {
    width: 100%;
}

.smenu ul li, 
.smenu .subcat li,.smenu-item{
    border-bottom: 1px dotted #6D61EE;
}

.smenu .subcat li:last-child {
    border-bottom: none;
}

.smenu .subcat li:first-child {
    border-top: 1px dotted #6D61EE;
    margin-top: 5px;
}

.smenu a {
    position: relative;
    display: inline-block;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
}
.smenu h2 {
    padding-left: 10px;
}

.cat-item, 
.subcat li {
    white-space: nowrap;
}

.smenu ul li i {
    padding-left: 10px;
}

.smenu .subcat li i {
    padding-left: 25px;
}
.cat-item a, 
.subcat li a {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    width: auto;
    padding-left: 5px; 
}
.cat-item a, .subcat li a {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
}
/***********************************/
.cat-item {
    
    display: block;
    width: 100%;    
}

.cat-link {
    display: inline-block;
    vertical-align: middle;
}

.cat-toggle {
    position: absolute;
    top: 1px;
    right: 4px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 10px;
}

.cat-toggle i {
    display: inline-block;

}

.subcat {
    display: none;
    margin: 5px 0 0 20px;
    padding: 0;
    overflow: hidden;
    width: 100%;
}
/******************************************/
.smenu .filtertt{

    border-bottom: 1px dotted #6D61EE;
}
.filter-subgroup{
    border-top: 1px dotted #6D61EE;
}
.filter-subgroup:first-child{
    border: none;
}
.smenu .filtertt:first-of-type {
    border-top: 1px dotted #6D61EE;
}


.sidebar a:hover{
    text-decoration: underline;
}
.ss{
    /*margin-left: 50px;*/ 
    margin-right: 0px;
}
/* end sidebar right position */    
.stitle,.panel-heading,.sbpanel{
    padding: 10px;
    font-size: 22px;
    color: #6D61EE;
    font-weight: bold;
    border: 1px dotted #6D61EE;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.smenu{
    margin-bottom: 25px;
    border-left: 1px dotted #6D61EE;
    border-right: 1px dotted #6D61EE;
}
.sbpanel.open{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
 .wishcp .btnlnk:first-of-type:not(:last-of-type) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.wishcp .btnlnk:last-of-type:not(:first-of-type) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}   
@media all and (min-width: 830px) {

.sbpanel.open{
    margin-bottom: 15px;
}
}
.smenu ul{
    /*display: block;*/
}
.smenu ul ul{
    margin-top: 0;
}
.sidebar .smenu a {
    box-sizing: border-box;
    width: 100%;
}
.pc ul li:before{
    position: relative;
    content:"›";
    font-size: 22px;
    top: 2px;
}
.pc ul li:before{
    padding-right: 5px;
}

.smenu ul li,.pc ul li{
    position: relative;
    /*list-style-type: disc;
    margin-left: 15px;
    color:#000;*/
}
.smenu .children{
    margin-left: 15px;
}
.menu .submenu{
    margin-left: 12px;
}
.pc ul,.pc ol{
    margin-bottom: 15px;
}
.pc ul li,.pc ol li{
    margin-bottom:0px;
}
.sbpanel{
    position: relative;
    cursor: pointer;
}
.sbpanel .fa-angle-down,.stitle .fa-angle-down{
    position: absolute;
    right: 12px;
}
.rotated{
    transform: rotate(180deg);
}
.custom-filter-name{
    width: 100%;
    box-sizing: border-box;
}
/*-------------------------------------------------------*/
/*  = Custom Filter
/*-------------------------------------------------------*/
.smenu .custom-filter .smenu-item {
  padding:0px;
}
.smenu .custom-filter .filter-title {
  padding:10px 15px;
}
.smenu #price-slider{
  margin: 15px 20px 40px 20px;
}
.smenu .price-values{
  margin: 10px 13px;
}
.smenu  .ui-slider .ui-slider-handle{
  background: red;
  border: 0px;
}
.smenu #price-max-val{
  float:right;
}
.smenu .filter-content {
    display: none;
}
  .smenu .custom-filter .filter-title { 
      cursor: pointer; 
      background-color: #fff; 
      font-weight: bold;  
      margin-bottom: 0; 
  }
  .smenu .custom-filter .filter-content { 
      padding: 0px; 
  }
  .smenu a{
    /*border-bottom: 1px dotted #6D61EE;*/
  }
  .smenu .filter-subgroup{
    margin-left: 0px;
  }
  .smenu .custom-filter .checkbox input[type="checkbox"]{
    position: relative;
    padding-left: 5px;
  }
  .smenu .custom-filter .checkbox label{
    margin-right: 5px;
  }
  /* Add border below subname */
  .smenu .custom-filter .name {
    padding: 10px 15px;
    margin-bottom: 5px;
  }
  .smenu .filter-subgroup .checkbox{
    padding: 2px 15px;
  }
  .smenu .filter-subgroup .checkbox:last-child{
    margin-bottom: 5px;
  }
  .smenu .custom-filter .filter-title { 
      cursor: pointer; 
      color: #333; 
      font-weight: 600; 
      padding: 8px; 
      margin-bottom: 0; 
  }
  .smenu .custom-filter .filter-content { 
      padding-top: 8px; 
  }

.smenu .toggle-icon { font-size: 14px; }
.smenu .mf-loading { opacity: 0.5; pointer-events: none; }
.smenu .pull-right { 
    position: relative; 
    top: 5px; 
    right: 4px;

}
.custom-filter .custom-filter-name:first-of-type {
    border-top: 0;
}
.custom-filter-name {
    position: relative;
    display: inline-block;
    padding: 10px;
    border-top: 1px dotted #6D61EE;
    border-bottom: 1px dotted #6D61EE;
    width: 100%;
    margin-bottom: 5px;
}

.filtertt,.name{
    font-weight: bold;
}

/*-------------------------------------------------------*/
/*  = Product
/*-------------------------------------------------------*/
.prod {
    position: relative; 
}
.prod {
    display: inline-block;
    vertical-align: top;
    width: 31%;
    margin: 10px 10px 60px 10px;
}
#product .tx{
    color: #777;
}

.prmain,.prnew{
    font-size: 22px;
    font-weight: bold;
    color: #6D61EE;
    margin: 15px 0;
}
.prold{
    font-size: 16px;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: red; 
}
#qtyinp{
    width: 45px;
    height: 30px;
    border: 1px solid #6D61EE;
    border-radius: 4px;
    padding: 6px;
    text-align: center;
    font-size: 16px;
}
.prmain,.prnew{
    font-size: 28px;
}
    
.prmain,.prnew,.prold {
    float: left;
    margin: 0;
    padding-right: 20px;
    padding-top: 20px;

    line-height: 40px;
}
.prnew{
    padding-bottom: 20px;
}
.prb .prold,
.prb .prnew {
    display: inline-block;
    vertical-align: middle;
}
.prb .prnew,.prb .prold {
    float: left;
}

.prb p {
    display: block;
    width: 100%;
    clear: both;
}
.dislst{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    font-weight: bold;
}
.qnt {
    float: left;
    margin-top: -8px;

}
.rewa{
    margin-top: 10px;
}
.qnt label {
    float: left;
    margin-right: 10px;
    line-height: 32px;
    padding-left: 10px;
}

.qnt .qtybox {

}

.qnt .fc {
    height: 32px;
    padding: 0 10px;
    border: 1px solid #ccc;
}
.cartdo {
    clear: both;

}

/*-------------------------------------------------------*/
/*  = Related
/*-------------------------------------------------------*/
.rellst {
    white-space: nowrap;
    overflow: hidden;
    font-size: 0;
}

.relitm {
    display: inline-block;
    vertical-align: top;
    width: 200px;
    white-space: normal;
    font-size: 14px;
    margin-right: 15px;
    position: relative; /* Должно быть для привязки ценников внутри */
    overflow: hidden;   /* Чтобы ничего не вылетало за границы карточки */
}
/*-------------------------------------------------------*/
/*  = Related
/*-------------------------------------------------------*/
.relsld {
    width: 100%;
}

.relsld {
  display: block;
  width: 100%;
}

.relsld .post {
  text-align: center;
  padding: 10px;
  background: #fff;
  width: auto !important;
}

.relsld .image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/*-------------------------------------------------------*/
/*  = Article
/*-------------------------------------------------------*/

.post{
    position: relative; 
    display: inline-block;
    vertical-align: top;
    width: 31%;
    margin: 10px 10px 60px 10px;
    text-align: center;
}

.post:nth-child(3n) {
    margin-right: 0;
}
article:first-child{
    margin-top: 0;
}
.masonry article:first-child{
    margin-top: 10px;
}
.ph1,.ptop-in{
    font-size: 24px;
    border-bottom: 1px dotted #6D61EE;
    width: 100%;
}
.ptop-in{
    /*padding-bottom: 10px;*/
}
.ph2{
    font-size: 14px;
}
.ptitle{
    float: left;
    width: 100%;
}
.comtit{
    position: absolute;
    right: 0px;
    top: 12px;
    border-radius: 3px;
    border: 1px solid #ccc;
    height: 20px;
    width: 20px;
}
.comtit a{
    position: relative;
    display: block;
    color: #303033;
    font-size: 11px;
    overflow: hidden;
    text-align: center;
    text-decoration: underline;
}
.ptop-in clear{
    clear: both;
}
.meta{
    position: relative;
    float: left;
    font-size: 12px;
    width: 100%;
}
.meta li:after{
    position: relative;
    font-size: 14px;
    left: 3px;
    top: 1px;
    content:"•";
}
.meta li:last-child:after{
    content:"";
}
.meta li{
    display: inline-block;

    margin-right: 5px;
}
.meta a{
    text-decoration: underline;
}
.pc{
    display: inline-block;
    /*float: left;*/
    /*clear: both;*/
    margin-top: 10px;
    margin-bottom: 5px;
}
.pc a{
    text-decoration: underline;
}
.pmore a{
    text-decoration: none;
}
.pc img{
    display: block;
    height: auto;
    max-width: 100% !important;
}
.pc ul{
    margin: 10px 0px 10px 20px;
}
.pc ol{
    margin: 10px 0px 10px 40px;
}
.pc ol li{
    list-style-type: decimal;
}
.pc input, section input{
    border: 1px solid #ccc;
    height: 30px;
    margin: 3px 5px 3px 0;
    padding-left: 10px;
}

input.txt{
    border: 1px solid #ccc;
    height: 30px;
    margin: 3px 0;
    padding: 0 10px;
    width: 100%;
}
textarea{
    border: 1px solid #6D61EE;
    border-radius: 6px;
    margin: 3px 0;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}
.pc input.radio,
.pc input.checkbox{
    height: auto !important;
}
.pc input.file{
    background: none;
    border:0;
    padding: 0;
}
.pc select{
    border: 1px solid #ccc;
}
.comment-title{
    float: right;
    margin-top: 7px;
    background: url("images/comment1.png") no-repeat scroll 0 0 transparent;
    height: 33px;
    width: 38px;
}
.comment-title a{
    position: relative;
    display: block;
    top: 3px;
    color: #000;
    font-size: 11px;
    overflow: hidden;
    text-align: center;
}
.comment-title .reply{
    visibility: hidden;
}
.comment-title span{
    display: none;
}
#recentcomments{
    margin-top: 10px;
}
#recentcomments span{
    margin-left: 5px;
}
#recentcomments a{
    text-decoration: underline;
}
.recentcomments{
    margin-bottom: 10px;
}
.comment-author-link{
    font-weight: bold;
    color:#000;
}


blockquote{
    background: #fff none repeat scroll 0 0;
    border-left: 3px solid black;
    margin: 10px 0 15px 20px;
    padding: 10px;
}
blockquote p{
    padding: 0px 15px;
}
.content blockquote p{
    margin-bottom: 0px;
}
.tags,.cattags{
    margin-bottom: 10px;
}
.tags a,.cattags a, .tagcloud a{
    background:none;
    border-radius: 3px;
    text-decoration: none;
    padding: 0px 8px;
    margin:10px 5px 20px 0;
    color: #000;
    border:1px dotted #000;
}
.tagstitle{
    font-weight: bold;
    margin-bottom: 5px;
}
.optgroup[label]{
    font-style: normal;
}
.image{
    padding: 0px 13px 5px 0;
}
.screen-reader-text{
    display: none;
}
#comments nav{
    display: block;
    float: none;
}
.post_thumb{
    margin-bottom: 10px;
}
.post_thumb img,.post_thumb_big img{
    width:100%;
    height: auto !important;
}

/*-------------------------------------------------------*/
/*  = Table
/*-------------------------------------------------------*/
table{
    width: 100%;
    text-align: left;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    margin-bottom: 15px;
}
th,td{
    padding: 5px;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

/*-------------------------------------------------------*/
/*  = Footer                                        
/*-------------------------------------------------------*/
.footer{
    font-size: 12px;
    overflow: hidden;
}
.footer a{
    text-decoration: underline;
}
.footer p{
    float: left;
}
.fmenu1 ul li,
.fmenu2 ul li{
    /*float: left;*/
    padding-left: 15px;
}
.fmenu1 ul li:first-child{
    padding-left: 0;
}
.fmenu2{
    float: right;
}
.scroll{
    display: none;
    position: absolute;
    float: right;
    bottom: 5px; 
    right: 15px;
}
.scroll a{
    text-decoration: none;
}
/*-------------------------------------------------------*/
/*  = Header search                                          
/*-------------------------------------------------------*/
.hs_title{
    display: none;
}
.searchtop{
    float: right;
    width: 25px; 
    height: 33px;  

}
.searchbtn{
    font-size: 25px;
    cursor: pointer;
    position: relative;
    z-index: 3000;
    color: black;
    text-align: center;
    margin-top: 5px;
    right: 13px;
}
.searchbtn i{
    display: inline-block;
    width: 100%;
    color: #6D61EE;
}
.ion-ios-search-strong,
.ion-close-round,
.ion-android-close{
    /*line-height: 50px;*/
}

.searchformtop{
    display: none;
    position: absolute;
    top: 0px;
    right: 15px; left: 15px;
    height: 33px;
    z-index: 1000;
    /*background: none;*/
    /*width: 100%;*/
}
.searchformtop.open{
    display: block;
    border: 1px solid #6D61EE;
}
.fixedsearch{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.searchsubmit{
    display: none;
}
.searchfieldtop{
    border-top: 0; 
    border-right: 0;
    height: 31px;
    width:         calc(100% - 2px);
    width:    -moz-calc(100% - 2px);
    width: -webkit-calc(100% - 2px);
    padding: 0px 15px;
    font-size: 14px;
    box-sizing: border-box;
    width: 100%;
} 
.searchformtop ::-moz-placeholder{ 
   opacity:  1;
}
.searchformtop ::-webkit-input-placeholder{ 
   opacity:  1;
}
/*-------------------------------------------------------*/
/* = Sidebar search                                          
/*-------------------------------------------------------*/
.sbsearchform input{}
.searchfield,
.searchfieldsb{
    border: 1px solid #ccc;
    height: 30px;
    margin: 0 6px 0 0;
    padding: 0 10px;
    position: relative;
    width:         calc(100% - 65px);
    width:    -moz-calc(100% - 65px);
    width: -webkit-calc(100% - 65px);
}
.searchsubmitsb{
    background: none;
    position: relative;
    cursor: pointer;
    color: #000000;
    cursor: pointer;
    font-size: 30px;  
    top: 7px;
}

.well{
    margin-top: 10px;
}
.chk{
    margin-bottom: 10px;
}
.fff {
  margin-bottom: 15px;
 width: 400px;
}
.fff label,.chk{
    display: block;
}
.fff input:not([type="radio"]), 
.fff select, .options select,
.content input:not([type="radio"]):not([type="checkbox"]):not(.btn) {
    display: block;
    width: 100%;
    height: 40px;
    padding: 5px 10px;
     border: 1px solid #6D61EE;
     border-radius: 6px;
     margin-top: 5px;
     background-color: #fff !important;
     box-sizing: border-box;
}
.fff input:-webkit-autofill,
.fff input:-webkit-autofill:hover, 
.fff input:-webkit-autofill:focus,
.fff input:-webkit-autofill:active {
    /* Заливаем фон белым цветом через внутреннюю тень */
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    /* Устанавливаем цвет текста, если он изменился */
    -webkit-text-fill-color: #333 !important;
}

/* 2. Для Firefox (хотя там проблема встречается реже) */
.fff input:filter(active) {
    background-color: #fff !important;
}
.fff input[type="radio"],
.fff input[type="checkbox"]{
    height: auto;
    width: auto;
    margin: 10px;
}
.fff a{
    text-decoration: underline;
}
.fff .err{
    color: red;
}
#generate-password{
    padding: 5px;
    border-radius: 3px;
    cursor: pointer;
}
#toggle-password{
    position: absolute;
    cursor: pointer;
    width: 20px;
    background: #fff;
    right: 7px;
    top: 20%;
}
.pass{
    position: relative;
    margin-bottom: 10px;
}
.alertlogin{
    display: none;
  position: relative;

  border-radius: 3px;
  border: 1px solid #ccc;
  padding: 10px 40px 10px 15px;
  margin: 10px 0;
}
.alert.success,.alertlogin.success{
    background: #BCEEB1;
}
.alert.error,.alertlogin.error{
      background: #EFDADA;
}
.btn-delete{
    background: #E81F0F;
}
a.btn-info{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
}
.alertclose {
  position: absolute;
  font-size: 20px;
  right: 15px;
  top: 10px;
  cursor: pointer;
  color: #555;
}
.text-danger{
    color: red;
    font-weight: bold;
}
/* Контейнер для звезд */
.star-rating {
    display: flex;
    flex-direction: row-reverse; /* Разворачиваем, чтобы работал селектор ~ */
    justify-content: flex-end;
    font-size: 24px;
}

/* Скрываем стандартные радиокнопки */
.star-rating input {
    display: none;
}

/* Обычный вид звезды (пустая) */
.star-rating label:before {
    content: "\f006"; /* Код пустой звезды FontAwesome */
    font-family: FontAwesome;
    display: inline-block;
    cursor: pointer;
    color: #ccc;
    padding: 0 2px;
}

/* Состояние при наведении или если кнопка нажата */
.star-rating input:checked ~ label:before,
.star-rating label:hover ~ label:before,
.star-rating label:hover:before {
    content: "\f005"; /* Код закрашенной звезды */
    color: #ffca08; /* Золотой цвет */
}

/*-------------------------------------------------------*/
/*  = Onepage checkout                                        
/*-------------------------------------------------------*/

  #payment-method-form-container { 
    margin-top: 15px; 
    padding: 15px; 
    border: 1px solid #e2e2e2; 
    background: #f9f9f9; 
    display: none; 
    min-height: 50px; 
  }
  /* верхняя панель всегда 100% */
  .panel {
    width: 100%;
    margin-bottom: 20px;
  }

  /* форма — grid контейнер */
  #opc-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "panel panel"
        "panel2 panel3"
        "panel2 panel4"
        "panel2 confirm-area"; /* Добавляем новую область для кнопки под Payment */
    gap: 20px;
    align-items: start; /* Это уберет лишнее растягивание блоков по высоте */
    margin-bottom: 30px;
}
.panel3, .panel4 {
    height: fit-content;
}
.confirm-area {
    grid-area: confirm-area;
}

  .panel   { grid-area: panel; }
  .panel2  { grid-area: panel2; }
  .panel3  { grid-area: panel3; }
  .panel4  { grid-area: panel4; }
.panel,.panel2, .panel3,  .panel4{
    border: 1px dotted #6D61EE;
     border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.panel-body{
    padding: 20px;
}

.checktitle{
    padding: 10px;
    font-size: 22px;
    color: #6D61EE;
    font-weight: bold;
    border-bottom: 1px dotted #6D61EE;
}
.panel2 .fff{
    width: 100%;
}
.delivery-item,
.payment-item {
    margin-bottom: 20px;
}

.delivery-item .btn,
.payment-item .btn {
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.method-price{
    padding-left: 10px;
}
/* onepagecheckout */
 /* Стили как на картинке-примере */
  .opc-qty-group { max-width: 150px; }
  .opc-qty-group .form-control.update-qty {
    height: 36px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border-radius: 4px 0 0 4px;
  }
  .opc-qty-group .btn-danger {
    height: 36px;
    padding: 0 15px;
    font-size: 18px;
    border-radius: 0 4px 4px 0;
  }
  /* Увеличиваем стрелки для Chrome/Safari */
  .update-qty::-webkit-inner-spin-button, 
  .update-qty::-webkit-outer-spin-button { 
    opacity: 1; height: 30px; 
  }
  #cart-totals{
    font-weight:bold;
    font-size: 14px;
  }
  opc-qty-group { max-width: 90px; display: flex; align-items: center; }
  .opc-qty-group .form-control.update-qty { height: 30px; font-size: 13px; text-align: center; }
  .opc-qty-group .btn-remove-opc { height: 30px; padding: 0 8px; }
  #payment-method-form-container { margin-top: 15px; padding: 15px; border: 1px dashed #ccc; background: #f9f9f9; display: none; }



/* Увеличиваем radio и checkbox */
#content .radio input[type="radio"],
#content .checkbox input[type="checkbox"] {
  transform: scale(1.5);
}

/* Добавляем расстояние между кнопкой и текстом */
#content .radio label,
#content .checkbox label {
  margin-left: 3px;
}

/* Сетка для кнопок */
.payment-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

/* Базовый стиль кнопки-метода */
.btn-select-method {
    padding: 15px 10px;
    border: 2px solid #ddd;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: normal;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.btn-select-method:hover {
    border-color: #bbb;
    background: #f8f8f8;
}

/* Стиль для ВЫБРАННОЙ кнопки */
input[type="radio"]:checked + .btn-select-method {
    border-color: #2196F3; /* Цвет вашего бренда */


    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.payment-item,.delivery-item{
    margin-bottom: 20px;
}
#opc-form .btn.active{
    background: #123fd7;
    box-shadow:none;
    color: #fff;
}
.payment-item .btn,.delivery-item .btn{
    background: #41dd68;
    color: black;
    font-size: 13px;
}
.payment-item .btn-select-method,.delivery-item .btn-select-method{
    border: none;
}
#opc-form .table tr{
    font-size: 14px;
    font-weight: bold;
    color: #123fd7;
}
#opc-form .table thead td{
    color: #222;
}
#opc-form .fa{
    font-size: 21px;
}
#opc-form .prname{
    padding-top: 21px;
}
/* Контейнер для всей группы управления */
.opc-quantity-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Блок управления количеством */
.qty-control {
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    height: 44px; /* Оптимальная высота для мобильных */
}

/* Кнопки плюс и минус */
.qty-btn {
    width: 40px;
    height: 100%;
    border: none;
    background: #f8f9fa;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.qty-btn:hover {
    background: #e9ecef;
}

.qty-btn:active {
    background: #dee2e6;
}

/* Поле ввода числа */
.qty-input {
    width: 45px;
    height: 100%;
    border: none;
    border-left: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    background: #fff;
    -moz-appearance: textfield; /* Убирает стрелки в Firefox */
}

/* Убирает стрелки в Chrome/Safari */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.opc-quantity-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.qty-control {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.qty-control .qty-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: #f4f4f4;
    cursor: pointer;
    transition: background 0.2s;
}

.qty-control .qty-btn:hover {
    background: #e8e8e8;
}

.qty-control .qty-input {
    width: 45px;
    height: 40px;
    text-align: center;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background: #fff;
}

/* Убираем стрелочки у input number */
.qty-control .qty-input::-webkit-outer-spin-button,
.qty-control .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.btn-remove-item {
    background: none;
    border: none;
    color: #d9534f;
    font-size: 20px;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.btn-remove-item:hover {
    opacity: 0.7;
}

/* Кнопка удаления (мусорка) */
.btn-remove-item {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease, transform 0.1s ease;
}

.btn-remove-item:hover {
    color: #a71d2a;
}

.btn-remove-item:active {
    transform: scale(0.9);
}
/* Стили для валидации */
.fff.has-error .fc {
    border: 1px solid #b94a48 !important;
    background-color: #f2dede;
}

.text-danger {
    color: #b94a48;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}
.panel-danger {
    border: 1px solid #b94a48 !important;
    box-shadow: 0 0 10px rgba(185, 74, 72, 0.2);
}
/*-------------------------------------------------------*/
/*  = Buttons                                        
/*-------------------------------------------------------*/

.down{
    float: right;
    margin-right: 10px;
}
.docs{
    margin-left: 10px;
}
.support{
    clear: both;
    overflow: hidden;
}
.call{
    margin-top:20px;
}
.top-btn{
    float: right;
    height: 50px;
    width: 38px;
}
.lt,.rt,.ct{
    margin: 0 10px;
}
.qicon{
    font-size: 60px;
    margin-bottom: 50px;
}
#nav li a.current{
    border-bottom: 2px solid black;
    padding-bottom: 12px;
}
/*-------------------------------------------------------*/
/*  = Page navigation                                          
/*-------------------------------------------------------*/
.wp-pagenavi{
    display: block;
    float: left;
    margin-top: 5px; 
    margin-bottom: 10px;
    clear: both;
    width: 100%;
    text-align: center;
}
.wp-pagenavi ul li{
    display: inline-block;   /* 🔑 цифры в одну строку */
    margin-right: 20px; 
}

.wp-pagenavi li{
    border-radius: 3px;   
}
.wp-pagenavi a{
    
}
 
.wp-pagenavi a, .wp-pagenavi span{
    display: inline-block;
    text-decoration: none;
    border: 1px solid #6D61EE;
    padding: 10px;
    border-radius: 3px;
}
.wp-pagenavi .active{
    font-weight: bold;
}
.pagenav {
    clear: both;
    display: block;
    height: 35px;
    margin-bottom: 10px;
}
.next, .prev {
    display: block;
    font: bold 22px 'Libre Franklin','Open Sans',Tahoma,Verdana,sans-serif;
    text-decoration: underline;
}
.next,.nav-next{
    float: right;
}
/*-------------------------------------------------------*/
/*  = Popup box                                        
/*-------------------------------------------------------*/
.contacts{
    float: right;
    display: inline-block;
}
.contacts a{
    display: inline-block;
}
.mask{
    display: none;
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    z-index: 3000;

    &:before{
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        content: '';
    }
}
.popup{
    display: none;
    white-space: normal;
    vertical-align: middle;
    background: #fff;
    width: 600px;
    border-radius: 3px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    margin: 8% auto 0;
    position: relative;
    z-index: 2000;
    img{
        display: block;
        border: none;
    }
}
.popup h3{
    font-size: 20px;
    font-weight: bold;
}

.popup p span{
    font-weight: bold;
}
.pp{
    padding: 10px 20px;
}
.popup.open,.mask.open{
    display: block;
}
.popupbtn{
    position: relative;
    float: right;
    right: 0px;
    padding: 12px 18px;
    z-index: 3000;
}
.popupbtn a{
    display: block;
    text-align: center;wp-pa
}
.popupclose{
    font-size: 26px;
}
.popupclose{
    cursor: pointer;
    color: #555;
}
.popupclose:hover,
.alertclose:hover{
    color: #000;
}
.alert{
    position: relative;
    background: #fff;
    border-radius: 3px;
    border:1px solid #ccc;
    padding: 10px 40px 10px 15px;
    margin-bottom: 10px;
    display: none;
}
.alertclose{
    position: absolute;
    font-size: 20px;
    right: 15px; top: 10px;
    cursor: pointer;
    color: #555;
}
.closed{
    display: none;
}
.danger{
    background: #EFDADA;
}
/*-------------------------------------------------------*/
/*  = Tabs switch                                        
/*-------------------------------------------------------*/
.tabs {
    display: block;
    width: auto;      /* Позволяет блоку менять ширину */
    overflow: hidden; /* Создает BFC для обтекания блока .second */
    clear: none;      /* Позволяет блоку стоять рядом с float */
    margin-top: 20px;
    box-sizing: border-box;
}
.tabs ul,.tab-links li{
    margin:0;
    padding:0;
}
.tabs ul.tab-links li{
    margin-left: 1px;
}
.tabs ul.tab-links li:first-child{
    margin-left:0;
}
.tab-links li{
    position: relative;
    float:left;
    margin-left: 0;
    margin:0px 5px;
     z-index: 3;
}
.tabs ul.tab-links li{
    list-style-type:none;
}
.tab-links a {
    position: relative;
    display:inline-block;
    background:#fff;
    font-size:16px;
    font-weight: bold;
    padding:9px 15px;
    border-radius:2px 2px 0px 0px;
    color:#6D61EE;
    transition:all linear 0.15s;
    z-index: 1;   
    border-radius: 4px 4px 0 0;
    border: 1px solid transparent; 
    border-bottom: none; /* Нижнюю рамку не рисуем вообще */
    bottom: -1px; /* Сразу опускаем на 1px к линии контента */
}
.tab-links a:hover {
    border-color: #ccc;
    text-decoration:none;
}
.tab-links li.active{
    background: #fff;
}
.tab-links li.active a{
    background: #fff;
    border: 1px solid #6D61EE;
    /*border-radius: 4px 4px 0 0;*/
}

.tab-links li.active a, 
.tab-links li.active a:hover{
    background: #fff;
    position: relative;
    z-index: 10;
    bottom: -1px;
    /*border-bottom-color: transparent;*/

    border-color: #6D61EE;
    border-bottom-color: #fff;

}
.tab-content {
    display: block;
    width: 100%;
    box-sizing: border-box; /* Чтобы padding не раздувал блок за пределы q8 */
    background: #fff;
    margin-top: 0px; 
    padding: 20px 0px; /* 0px по бокам, если текст должен быть вровень с линией */
    border-top: 1px solid #6D61EE;
    clear: both;
}
.tab{
    display: none;
}
.tab-content .active{
    position: relative;
    display: block;
    background: #fff;
    border-top: none;
    color: #202020;
}
.fgrp{
    margin-bottom: 15px;
}
.fgrp input{
    margin-bottom: 15px;
}
/*-------------------------------------------------------*/
/*  = Pricing table                                      
/*-------------------------------------------------------*/
.wishprice{
    font-weight: bold;
    text-align: center;
}
.price {
    display: block;
    position: absolute;
    top: -25px;
    right: 5px;
    font-weight: bold;

}
.price-new,.price-old {
    margin-bottom: 5px;
    padding: 4px 6px;
    border-radius: 6px;
}
.price-old {
    background: #eee;
    color: #000;
    text-decoration: line-through;
}
.rating .fa-stack{
    font-size: 7px;
}
.rating .fa-stack-2x {
  color: #f2b01e;
}
.caption {
  padding-top: 10px;
}
.post button {
  border: 1px solid #E81F0F;
  border-radius: 3px;
  padding: 5px 10px;
  background: none;
  color: #E81F0F;
  cursor: pointer;
}
/*-------------------------------------------------------*/
/*  = Other styles                                      
/*-------------------------------------------------------*/
.pcm {
    width: 100% !important;
    margin: 20px 0 50px 0;
    overflow: hidden; /* простой clearfix */
}
.pcm select{
    border-radius: 3px;
    padding: 5px;
}
.rtb{
    float: right;
    width: 50%; /* правая половина */
    overflow: hidden; /* чтобы внутренние плавающие блоки работали */
}
.compare{
    float: left;
    width: 30%;
}
.sort{
    float: left;
}
.limit{
    float: right;
}
.breadcrumb{
    margin-bottom: 10px;
}

.breadcrumb li{
    display: inline-block;
}
.breadcrumb > li + li::before {
  padding: 0 5px;
  content: "\2192"; /* длинная стрелка вправо */
}
.breadcrumb li a{
    text-decoration: underline;
}
.admin-edit{
    display: block;
    position: absolute;
    top: -30px;
    background: #ccc;
    border-radius: 3px;
    padding: 0 5px;
    font-weight: bold;
}
.logout-wrap{
    margin: 10px 0;
}
#cf-products p.not {
    margin-top: 30px;
    font-size: 20px;
color: #ff0000;
}


.wrapper.openleft,
.navleft.openleft,{
    -webkit-transition: all 3s;
    -moz-transition: all 3s;
    -o-transition: all 3s;
    transition:all 3s;
}

/*-------------------------------------------------------*/
/*  = Related Product                                      
/*-------------------------------------------------------*/
.prolay{
    margin: 20px 0;
    overflow: visible; 
    position: relative;
}
.prolay::after {
    content: "";
    display: table;
    clear: both;
}
/*-------------------------------------------------------*/
.prolay {
        display: grid;
        grid-template-columns: 65% 35%;
        align-items: start;
    }

    .first {
        grid-column: 1;
        grid-row: 1;
    }

    .third {
        grid-column: 1;
        grid-row: 2;
        margin-top: 20px;
    }

    .second {
    grid-column: 2;
    grid-row: 1 / span 2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-right: 15px;
    box-sizing: border-box;
}
.second {
    overflow: hidden; 
    display: block;
    float: none;     
    padding-left: 25px;
}
.relbox {
    grid-column: 1 / span 2;
    width: 100%;
    margin-top: 20px;
}

.prolay > div {
    height: min-content;
}
.relbox h2{
    margin-bottom: 30px;
    color: #333;
}

/*-------------------------------------------------------*/
.relsld{
    position: relative;
    width: 100%;
}
.imgmain{
    margin: 0 15px 15px 0;
}
.imgmain,.relimg,.imggrid {
    text-align: center;
}
.imgwrap .imgadd {
    display: inline-block;
    margin-right: 8px;
}
.imgadd{
    margin-bottom: 8px;
}
.imggrid .imgadd {
    display: inline-block;
    vertical-align: middle;
}
.thumb,.thumb2{
    display: block;
}
.thumb2{
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
}
img.mfp-img{
    background: #fff;
}
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close{
    right: -35px;
}
.mfp-title{
    font-weight: bold;
    text-align: center;
    margin-left: 30px;
}
.wishcp {
    display: flex; 
    gap: 0;
    margin-bottom: 15px;
}
.wishcp .btnlnk {
    border: 1px solid #ccc;
}
.wishcp a{
    text-decoration: underline;
}
/* убираем левый бордер у всех, кроме первой */
.wishcp .btnlnk + .btnlnk {
    border-left: 0;
}

.btnlnk{
    padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  background: #fff;
}
.manuf{
    padding: 6px 10px;
}
.content .fa{
    color: #E81F0F;
}
.rating .fa{
    color: #f2b01e;
}
 /* related */
 .relsld-wrapper { 
    position: relative; 
    padding: 0 45px; 
    margin: 20px 0;
    box-sizing: border-box;
    width: 100%;
  }
  
  .swiper-button-next, 
  .swiper-button-prev { 
    position: absolute !important;
    z-index: 999;
    color: #fff !important; 
    background: #6f42c1 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50%;
    top: 50% !important;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
  }

  .swiper-button-next::after, 
  .swiper-button-prev::after { 
    font-size: 16px !important; 
    font-family: swiper-icons;
  }

  .swiper-button-prev { left: 5px !important; }
  .swiper-button-next { right: 5px !important; }

  .relsld.swiper { 
    overflow: hidden !important; 
    width: auto;
    position: relative;
    margin: -50px -20px 0 -20px !important;
    padding: 50px 20px 10px 20px !important;
  }
  
  .swiper-slide {
    height: auto;
    display: flex;
    justify-content: center;
    visibility: hidden;
  }

  .swiper-slide-visible {
    visibility: visible;
  }

  .relsld .post { 
    width: 100%;
    margin: 5px; 
    position: relative;
  }

  .price {
    display: block !important;
    position: absolute !important;
    top: -30px !important;
    right: 5px !important;
    font-weight: bold !important;
    z-index: 500 !important;
    white-space: nowrap;
  }

/* succes email */