/* -----------------------------------------------------------------------------------



  Template Name: Subash Ecommerce Responsive Bootstrap Template

  Description: This is html5 template

  Author: Danilkovich WF

  Author URI: http://www.codecarnival.net/

  Version: 1.0



-----------------------------------------------------------------------------------  */


/*----------------------------------------------------------------------------------- 

    

  CSS INDEX

  ===================

	

  1. Theme Default CSS (css/shortcode/default.css)

  2. Header CSS (css/shortcode/header.css)

  3. Slider CSS (css/shortcode/slider.css)

  4. Footer CSS (css/shortcode/footer.css)

  5. Google Fonts

  6. Custom-content all

  7. Home-1 

    7.1 By brand section 

    7.2 Featured product section

    7.3 Up comming product section

    7.4 Banner section

    7.5 Product tab section 

    7.6 Blog section

  8.  Home version-2

    8.1 Banner section 2

    8.2 Section background top bottom

    8.3 Product item 2

    8.4 Up comming product 2

    8.5 Up comming time 2

    8.6 Blog item 2

    8.7 Newsletter

  9. Shop Page

    9.1 Breadcrumbs section

    9.2 Shop Option

    9.3 Shop List

    9.4 Pagination

    9.5 Sidebar Widget

    9.6 Widget search

    9.7 Widget categories

    9.8 Price Filter

    9.9 Widget color

    9.10 Widget operating system

    9.11 Widget product

  10. Single Product Page

    10.1 Image zoom area

    10.2 Single product info

    10.3 Product reviews tab

    10.4 product color and rating

    10.5 Product Cart plus minus

  11. Cart Page

    11.1 Cart option

    11.2 Cart table content

    11.2 Coupon-discount

    11.3 Payment-details

    11.4 Payment-method

    11.5 Order information

  12. Single Blog Page

    12.1 Blog option

    12.2 blog main post

    12.3 Blog share tags

    12.4 Blog post and comments

  13. About Page

    13.1 Team member

  14. Contact Page

    14.1 Contact Address

    14.2 Google Map

    14.3 Dynamic contact form

  15. 404 Page

  16. Bankground youtube video

  17. Dotted-overlay

----------------------------------------------------------------------------------- */


/*----------------------------------------

  5. Google Fonts

----------------------------------------*/

@import 'https://fonts.googleapis.com/css?family=Raleway:400,500,600,700|Roboto:400,500,700';

/*************************************

  6. Custom-content all   

 **************************************/

.boxed-layout .wrapper {
    box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14);
    margin: auto;
    position: relative;
    width: 1240px;
}

.boxed-layout .sticky {
    left: auto;
    margin: auto;
    width: 1240px;
}


/* ========================================

  7. Home Version-1

======================================== */


/* -------------------------------------

    7.1 By brand section 

------------------------------------- */

.by-brand-product {
    margin-left: -15px;
    margin-right: -15px;
}

.brand-item {
    padding-left: 15px;
    padding-right: 15px;
}

.single-brand-product {
    position: relative;
}

.single-brand-product>a {
    display: block;
}

.single-brand-product img {
    width: 100%;
}

.single-brand-product .brand-title {
    font-size: 20px;
    bottom: 15px;
    margin: 0;
    position: absolute;
    right: 20px;
}


/* -------------------------------------

    7.2 Featured product section

------------------------------------- */

.active-featured-product,
.active-related-product {
    margin-left: -15px;
    margin-right: -15px;
}

.active-featured-product .product-item,
.active-related-product .product-item {
    margin-left: 15px;
    margin-right: 15px;
}

.product-item {
    margin-bottom: 30px;
    transition: all 0.3s ease 0s;
}

.product-img img {
    max-width: 275px;
    padding: 0px 30px;
    width: 100%;
}

.product-info {
    background: #ffffff none repeat scroll 0 0;
    padding: 20px 0;
    text-align: center;
}

.product-title {
    color: #434343;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.pro-rating {
    line-height: 1;
    margin-bottom: 10px;
}

.pro-rating a {
    color: #ff7f00;
    font-size: 14px;
}

.pro-price {
    color: #666666;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 20px;
    z-index: 9;
}

.action-button {}

.action-button>li {
    display: inline-block;
    margin-right: 10px;
}

.action-button>li:last-child {
    margin-right: 0;
}

.action-button>li>a {
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 50%;
    color: #999999;
    display: block;
    font-size: 14px;
    height: 30px;
    text-align: center;
    width: 30px;
}

.action-button>li>a i {
    line-height: 28px;
}

.action-button>li:hover>a {
    background: #FF7F00;
    border-color: #FF7F00;
    color: #fff;
}

.product-item:hover {
    box-shadow: 0px 8px 13px rgba(0, 0, 0, 0.15);
}


/* -------------------------------------

    7.3 Up comming product section

------------------------------------- */

.up-comming-pro {}

.up-comming-pro-img {
    width: 47.3%;
}

.up-comming-pro-img img {
    width: 100%;
}

.up-comming-pro-info {
    padding: 0 30px;
    width: 52.7%;
}

.up-comming-pro-info h3 {
    color: #575757;
    font-weight: 600;
    margin: 45px 0 20px;
}

.up-comming-pro-info>p {
    margin-bottom: 40px;
}

.up-comming-time .cdown {
    display: inline-block;
    margin-right: 30px;
    text-align: center;
}

.up-comming-time .cdown:last-child {
    margin-right: 0;
}

.up-comming-time .time-count {
    border: 1px solid #fcab5b;
    border-radius: 50%;
    color: #999999;
    display: block;
    font-family: roboto;
    font-size: 20px;
    font-weight: 700;
    height: 40px;
    line-height: 40px;
    width: 40px;
}

.up-comming-time .cdown p {
    color: #8a8888;
    line-height: 10px;
    margin: 10px 0 0;
}


/* -------------------------------------

    7.4 Banner section

------------------------------------- */

.banner {}

.banner-item {
    position: relative;
}

.banner-1::before {
    background: rgba(0, 0, 0, 0) url("img/bg/ribbon.png") repeat scroll 0 0;
    content: "";
    height: 137px;
    left: -11px;
    position: absolute;
    top: -11px;
    width: 146px;
}

.ribbon-price {
    left: 15px;
    position: absolute;
    top: 30px;
    transform: rotate(-42deg);
}

.ribbon-price span {
    color: #fefefe;
    font-family: roboto;
    font-size: 20px;
    font-weight: 500;
    line-height: 16px;
}

.banner-img img {
    width: 100%;
}

.banner-info {
    left: 30px;
    position: absolute;
    top: 35%;
}

.banner-featured-list li {
    color: #666666;
}

.banner-featured-list li i {
    margin-right: 10px;
}


/* -------------------------------------

    7.5 Product tab section

------------------------------------- */

.pro-tab-menu {
    margin: 25px 0 30px;
    display: flex;
    justify-content: flex-end;
}

.pro-tab-menu-2 {
    justify-content: center;
}

.pro-tab-menu>ul {}

.pro-tab-menu ul li {
    display: inline-block;
    margin-left: 30px;
}

.pro-tab-menu ul li:first-child {
    margin-left: 0;
}

.pro-tab-menu ul li a {
    color: #999999;
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.pro-tab-menu ul li a.active {
    border-bottom: 1px solid #ffbf7f;
    color: #666666;
}


/* -------------------------------------

    7.6 Blog section

------------------------------------- */

.active-blog {
    margin-left: -15px;
    margin-right: -15px;
}

.active-blog .blog-item {
    margin-left: 15px;
    margin-right: 15px;
}

.active-blog-2 {
    margin-left: -15px;
    margin-right: -15px;
}

.active-blog-2 .blog-item-2 {
    margin-left: 15px;
    margin-right: 15px;
}

.blog-img>a {
    display: block;
}

.blog-img img {
    width: 100%;
}

.blog-title {
    font-weight: 700;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-desc p {
    margin-bottom: 25px;
}

.blog-item .read-more {
    margin-bottom: 45px;
}

.read-more a {
    display: inline-block;
    font-weight: 500;
    line-height: 14px;
}

.blog-meta {
    line-height: 1;
}

.blog-meta li {
    display: inline-block;
    margin-left: 15px;
}

.blog-meta li:first-child {
    margin-left: 0;
}

.blog-meta li a {
    display: block;
    font-size: 11px;
    font-weight: 500;
    line-height: 12px;
}

.blog-meta li a i {
    font-size: 13px;
    margin-right: 10px;
}

.blog-item {
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
}

.blog-item img {
    width: 100%;
}

.blog-item .blog-desc {
    backface-visibility: hidden;
    background: rgba(255, 127, 0, 0.95) none repeat scroll 0 0;
    height: 100%;
    left: 0;
    padding: 40px;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    transition: all 0.5s ease 0s;
}

.blog-item .blog-desc::before,
.blog-item .blog-desc::after {
    bottom: 20px;
    content: "";
    left: 20px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 20px;
    top: 20px;
    transition: opacity 0.35s ease 0s, transform 0.5s ease 0s;
}

.blog-item .blog-desc::before {
    border-bottom: 1px solid #fefefe;
    border-top: 1px solid #fefefe;
    transform: scale(0, 1);
}

.blog-item .blog-desc::after {
    border-left: 1px solid #fefefe;
    border-right: 1px solid #fefefe;
    transform: scale(1, 0);
}

.blog-item:hover .blog-desc::before,
.blog-item:hover .blog-desc::after {
    opacity: 1;
    transform: scale(1);
}

.blog-item:hover .blog-desc {
    opacity: 1;
}

.blog-title {
    text-transform: uppercase;
}

.blog-item .blog-title,
.blog-item .blog-desc p,
.blog-item .read-more a,
.blog-item .blog-meta li a {
    color: #fefefe;
}

.blog-item .blog-title:hover a,
.blog-item .read-more a:hover,
.blog-item .blog-meta li a:hover {
    color: #ccc;
}


/* ==========================================

  8.  Home version-2

============================================= */


/* -------------------------------------

    8.1 Banner section 2

------------------------------------- */

.banner-title-2 {
    color: #666666;
    font-weight: 600;
    text-transform: uppercase;
}

.banner-2 .banner-title-2 {
    position: absolute;
    right: 18px;
    top: 25%;
}

.banner-2 .pro-price {
    bottom: 20px;
    left: 20px;
    margin-bottom: 0;
    position: absolute;
}

.banner-2 .banner-button {
    bottom: 20px;
    position: absolute;
    right: 20px;
    z-index: 99;
}

.banner-button a {
    color: #999999;
    font-size: 13px;
}

.banner-button a:hover {
    color: #FF7F00;
}

.banner-2::before {
    border-right: 270px solid #f6f6f6;
    border-top: 90px solid rgba(0, 0, 0, 0);
    bottom: 0;
    content: "";
    position: absolute;
    right: 0;
}

.banner-2::after {
    border-left: 270px solid #f6f6f6;
    border-top: 90px solid rgba(0, 0, 0, 0);
    bottom: 0;
    content: "";
    position: absolute;
    left: 0;
}

.banner-3 .banner-info {
    top: 17%;
}

.banner-3 .banner-button {
    margin-top: 15px;
}

.banner-4 .banner-title-2 {
    left: 10%;
    position: absolute;
    top: 25%;
}

.banner-4 .banner-button {
    left: 10%;
    position: absolute;
    top: 35%;
}


/* -------------------------------------

    8.2 Section background top bottom

------------------------------------- */

.section-bg-tb {
    margin: 25px 0;
    position: relative;
    z-index: 1;
}

.section-bg-tb::before {
    background: #f6f6f6 none repeat scroll 0 0;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    transform: skewY(-1.7deg);
    width: 100%;
    z-index: -1;
}


/* -------------------------------------

    8.3 Product item 2

------------------------------------- */

.product-item-2 {
    position: relative;
    top: 0;
    transition: all 0.3s ease 0s;
}

.product-item-2 img {
    border-radius: 10px 10px 0 0;
}

.product-item-2 .product-info {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 0 0 10px 10px;
    border-top: 2px solid #f6f6f6;
    padding: 15px 30px;
    text-align: left;
}

.active-featured-product .product-item-2 {
    margin-top: 20px;
}

.brand-name {
    color: #666666;
    font-size: 13px;
    font-weight: 500;
}

.product-item-2 .pro-price {
    margin-bottom: 0;
}

.product-item-2 .action-button {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 0 0 10px 10px;
    border-top: 2px solid #f6f6f6;
    bottom: 0;
    opacity: 0;
    padding: 5px 25px;
    position: absolute;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 100%;
}

.product-item-2 .action-button>li>a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
}

.product-item-2 .action-button>li:hover>a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #ff7f00;
}

.product-item-2:hover {
    box-shadow: 0 5px 2px rgba(0, 0, 0, 0.15);
    top: -20px;
}

.product-item-2:hover .product-info {
    border-radius: 0;
}

.product-item-2:hover .action-button {
    bottom: -40px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    opacity: 1;
    visibility: visible;
}

.pro-tab-menu-2 ul li {
    margin-left: 25px;
    position: relative;
}

.pro-tab-menu-2 ul li a.active::before {
    background: #ff7f00 none repeat scroll 0 0;
    content: "";
    height: 11px;
    left: 0;
    position: absolute;
    top: 6px;
    width: 2px;
}

.pro-tab-menu-2 ul li.active a {
    border-bottom: 0 none;
}

.pro-tab-menu-2 ul li a {
    padding-left: 5px;
}


/* -------------------------------------

    8.4 Up comming product 2

------------------------------------- */

.up-comming-pro-2 .up-comming-pro-img {
    width: 53.3%;
}

.up-comming-pro-2 .up-comming-pro-info {
    width: 46.7%;
}


/* -------------------------------------

    8.5 Up comming time 2

------------------------------------- */

.up-comming-time-2 {
    width: 100%;
}

.up-comming-time-2 .cdown {
    float: left;
    width: 25%;
}

.up-comming-time-2 .time-count {
    border-bottom: 1px solid #999999;
    color: #999999;
    display: inline-block;
    font-family: roboto;
    font-size: 26px;
    font-weight: 700;
    line-height: 26px;
}

.up-comming-time-2 p {
    color: #8a8888;
    font-family: raleway;
    font-weight: 500;
    padding-top: 5px;
    text-transform: uppercase;
}

.up-comming-time-2 .time-count {
    position: relative;
}

.up-comming-time-2 .time-count::before {
    background: #f6f6f6 none repeat scroll 0 0;
    bottom: -3px;
    content: "";
    height: 5px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 2px;
}


/* -------------------------------------

    8.6 Blog item 2

------------------------------------- */

.blog-item-2 {
    margin-bottom: 30px;
}

.blog-item-2 img {
    width: 100%;
    transition: all 0.3s ease 0s;
}

.blog-item-2 .blog-desc {
    text-align: center;
}

.blog-title-2 {
    color: #666666;
    font-weight: 700;
    line-height: 30px;
    margin-top: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
    white-space: nowrap;
}

.blog-title-2>a {
    border-bottom: 1px solid #cccccc;
    padding-bottom: 4px;
}

.blog-item-2 .blog-image {
    overflow: hidden;
}

.blog-item-2:hover img {
    opacity: 0.4;
    transform: scale3d(1.1, 1.1, 1);
}


/* -------------------------------------

    8.7 Newsletter

------------------------------------- */

.newsletter {
    text-align: center;
}

.newsletter-info {
    margin-bottom: 35px;
}

.newsletter-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.newsletter-info p {
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 0;
    font-weight: 600;
}

.subcribe {
    border: 2px solid #d4d4d4;
    margin: auto;
    width: calc(100% - 70px);
}

.subcribe input {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    box-shadow: none;
    float: left;
    height: 45px;
    margin: 0;
    width: 80%;
}

.subcribe input:focus {
    border: 0;
}

.subcribe .submit-btn-2 {
    border-left: 2px solid #d4d4d4;
    float: left;
    font-size: 14px;
    font-weight: 500;
    height: 45px;
    text-transform: uppercase;
    width: 20%;
}


/*=======================================

  9. Shop Page

=======================================*/


/* -------------------------------------

    9.1 Breadcrumbs section

------------------------------------- */

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    color: #cacaca;
}

@media (max-width: 480px) {
    .breadcrumbs {
        font-size: 13px;
        line-height: 1.4;
    }

    .breadcrumbs__separator {
        margin: 0 0.3em;
    }
}

.breadcrumbs__separator {
    margin: 0 0.5em;
    color: #ccc;
}

.breadcrumbs__link {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumbs__link:hover {
    color: #c9c9c9;
    text-decoration: underline;
}

.breadcrumbs__current {
    font-weight: 500;
    color: #a3a3a3;
}

.overlay-bg {
    position: relative;
}

.overlay-bg::before {
    background: #f6f6f6 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.6;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 100%;
}

.breadcrumbs-inner {
    position: relative;
    z-index: 10;
}

.breadcrumbs-title {
    color: #ffffff;
    font-size: 30px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 0;
    padding: 115px 85px 0 85px;
    text-align: center;
    text-transform: uppercase;
}

.breadcrumb-list {
    line-height: 1;
    padding-bottom: 20px;
}

.breadcrumb-list>li {
    color: #999999;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    margin-right: 15px;
    text-transform: uppercase;
}

.breadcrumb-list>li::before {
    content: "_";
    left: 0;
    color: #666666;
    transition: all 0.3s ease 0s;
}

.breadcrumb-list>li:hover::before {
    color: #ff7f00;
}

.breadcrumb-list>li>a {
    color: #666666;
}

.breadcrumb-list>li:hover>a {
    color: #ff7f00;
}


/* -------------------------------------

    9.2 Shop Option

------------------------------------- */

.shop-option {
    padding: 10px 30px;
}

.shop-tab {
    line-height: 1;
}

.shop-tab>li {
    display: inline-block;
    margin-right: 5px;
}

.shop-tab>li:last-child {
    margin-right: 0px;
}

.shop-tab li a {
    color: #999999;
    display: block;
    font-size: 25px;
    height: 30px;
    text-align: center;
    width: 30px;
}

.shop-tab li a i {
    line-height: 30px;
}

.shop-tab li a.active {
    color: #ff7f00;
}

.shop-tab,
.short-by,
.showing {
    width: 33.3337%;
}

.short-by>span {
    margin-right: 10px;
}

.showing span {
    color: #999999;
    display: block;
    line-height: 30px;
}


/* -------------------------------------

    9.3 Shop List

------------------------------------- */

.shop-list.product-item {
    box-shadow: 0px 8px 13px rgba(0, 0, 0, 0.15);
    background: #ffffff none repeat scroll 0 0;
    overflow: hidden;
}

.shop-list .product-img {
    padding-right: 30px;
    width: 35%;
    text-align: center;
    padding-top: 30px;
    padding-right: 30px;
    width: 35%;
}

.shop-list .product-info {
    float: left;
    padding: 30px 40px;
    text-align: left;
    width: 65%;
}

.shop-list .brand-name {
    color: #999999;
    font-style: italic;
    font-weight: 400;
}

.shop-list p {
    color: #666;
    margin-bottom: 30px;
}


/* -------------------------------------

    9.4 Pagination

------------------------------------- */

.shop-pagination {
    padding: 10px;
}

.shop-pagination>li {
    display: inline-block;
    margin-right: 3px;
}

.shop-pagination>li:last-child {
    margin-right: 0;
}

.shop-pagination>li>a {
    border: 1px solid #eee;
    color: #999999;
    display: block;
    font-family: roboto;
    font-size: 13px;
    font-weight: 400;
    height: 30px;
    line-height: 28px;
    text-align: center;
    width: 30px;
}

.shop-pagination>li>a i {
    line-height: 28px;
}

.shop-pagination>li.active a,
.shop-pagination>li:hover a {
    border-color: #ff7f00;
    color: #ff7f00;
}


/* -------------------------------------

    9.5 Sidebar Widget

------------------------------------- */

.widget {
    padding: 20px 30px;
}

.widget-title {
    color: #666666;
    font-weight: 700;
    text-transform: uppercase;
}


/* -------------------------------------

    9.6 Widget search

------------------------------------- */

.widget-search {
    position: relative;
}

.widget-search input {
    height: 50px;
    margin-bottom: 0;
    padding-right: 50px;
}

.widget-search button {
    background: transparent none repeat scroll 0 0;
    color: #999;
    font-size: 20px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.3s ease 0s;
    width: 50px;
}

.widget-search button:hover {
    color: #ff7f00;
}


/* -------------------------------------

    9.7 Widget categories

------------------------------------- */

.product-cat>ul>li>ul {
    padding-left: 20px;
}

.product-cat .treeview>li>a,
.product-cat .treeview>li>ul>li>a {
    color: #999999;
    display: inline-block;
    text-transform: capitalize;
}

.product-cat .treeview>li>a {
    font-size: 14px;
    line-height: 30px;
}

.product-cat .treeview>li>ul>li>a {
    font-size: 13px;
    line-height: 25px;
}

.product-cat .treeview li {
    position: relative;
}

.product-cat .hitarea {
    cursor: pointer;
    height: 30px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.product-cat .treeview .collapsable>a {
    color: #ff7f00;
}


/* -------------------------------------

    9.8 Price Filter

------------------------------------- */

.price_filter {
    padding-bottom: 13px;
}

.price_slider_amount {
    overflow: hidden;
}

.price_slider_amount>input {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    box-shadow: none;
    float: left;
    height: 25px;
    padding: 0;
    text-align: left;
    width: 50%;
}

.price_slider_amount>input#amount {}

.ui-widget-content {
    background: #eee none repeat scroll 0 0;
    border: medium none;
    color: #222;
    height: 3px;
}

.ui-slider .ui-slider-range {
    background: #ff7f00 none repeat scroll 0 0;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background: #ff7f00 none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    height: 12px;
    margin-left: 0;
    margin-top: -6px;
    top: 50%;
    width: 5px;
}


/* -------------------------------------

    9.9 Widget color

------------------------------------- */

.widget-color ul li {
    display: block;
    position: relative;
}

.widget-color ul li::before {
    background: #ff7f00 none repeat scroll 0 0;
    border-radius: 50%;
    content: "";
    height: 12px;
    left: 0;
    margin-top: -6px;
    position: absolute;
    top: 50%;
    width: 12px;
}

.widget-color ul li a {
    display: inline-block;
    font-size: 13px;
    line-height: 30px;
    padding-left: 20px;
}

.widget-color ul li.color-1:before {
    background: #ffa07a;
}

.widget-color ul li.color-2:before {
    background: #e9967a;
}

.widget-color ul li.color-3:before {
    background: #fe5858;
}

.widget-color ul li.color-4:before {
    background: #00b2ee;
}

.widget-color ul li.color-5:before {
    background: #00eeb3;
}

.widget-color ul li.color-6:before {
    background: #8dc63f;
}


/* -------------------------------------

    9.10 Widget operating system

------------------------------------- */

.operating-system input[type="checkbox"] {
    margin: 4px 20px 0 0;
}


/* -------------------------------------

    9.11 Widget product

------------------------------------- */

.widget-product .product-item {
    overflow: hidden;
}

.widget-product .product-item:last-child {
    margin-bottom: 0;
}

.widget-product .product-img {
    float: left;
    width: 35%;
}

.widget-product .product-info {
    background: #fff none repeat scroll 0 0;
    float: left;
    padding: 15px 0 0 10px;
    text-align: left;
    width: 65%;
}

.widget-product .product-title {
    color: #666;
    font-weight: 500;
    text-transform: capitalize;
}

.widget-product .pro-price {
    color: #999999;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0;
}


/*=====================================

  10. Single Product Page

======================================*/


/* -------------------------------------

    10.1 Image zoom area

------------------------------------- */

.imgs-zoom-area {
    width: 100%;
}

.imgs-zoom-area img {
    width: 100% !important;
}

#gallery_01 img {
    width: 100%;
}

#gallery_01 {
    padding: 0 30px;
}

.p-c {
    border: 1px solid #fff;
    padding: 0 5px;
}

.p-c a.active img {
    border: 1px solid #FF7F00;
}

#gallery_01.slick-arrow-3 .arrow-next.slick-arrow {
    right: -3px;
}


/* -------------------------------------

    10.2 Single product info

------------------------------------- */

.single-product-info h3 {
    font-weight: 500;
    margin-bottom: 5px;
}

.brand-name-2 {
    color: #999999;
    font-style: italic;
    text-transform: capitalize;
}


/* -------------------------------------

    10.3 Product reviews tab

------------------------------------- */

.reviews-tab li {
    display: inline-block;
    margin-right: 35px;
}

.reviews-tab li:last-child {
    margin-right: 0;
}

.reviews-tab li a {
    display: block;
    font-weight: 500;
    line-height: 20px;
    text-transform: uppercase;
}

.reviews-tab li a.active {
    border-bottom: 1px solid #ffcc99;
}

.reply-delate ul li {
    display: inline-block;
}

.reply-delate ul li a {
    font-size: 13px;
}

.saparator {
    margin: auto 5px;
}


/* -------------------------------------

    10.4 product color and rating

------------------------------------- */

.color-title {
    color: #575757;
    line-height: 25px;
    margin-bottom: 0;
    text-transform: uppercase;
    width: 70px;
}

.single-pro-color-rating .widget-color ul li {
    display: inline-block;
}

.sin-pro-rating span {
    font-size: 13px;
}


/* -------------------------------------

    10.5 Product Cart plus minus

------------------------------------- */

.cart-plus-minus {
    border: 1px solid #cccccc;
    height: 25px;
    text-align: center;
    width: 90px;
    color: #666666;
}

.qtybutton {
    background: #cccccc none repeat scroll 0 0;
    height: 100%;
    width: 30%;
}

.dec.qtybutton {
    float: left;
}

.inc.qtybutton {
    float: right;
}

input.cart-plus-minus-box {
    background: transparent none repeat scroll 0 0;
    box-shadow: none;
    font-family: roboto;
    height: 100%;
    margin-bottom: 0;
    padding: 0;
    text-align: center;
    width: 40%;
}


/*=========================================

  11. Cart Page

==========================================*/


/* -------------------------------------

    11.1 Cart option

------------------------------------- */

.cart-tab {
    display: block;
}

.cart-tab li {
    display: block;
    margin-bottom: 100px;
    position: relative;
    text-align: center;
}

.cart-tab li::before {
    background: #ddd none repeat scroll 0 0;
    content: "";
    height: 40px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 130%;
    width: 2px;
}

.cart-tab li:last-child {
    margin-bottom: 0;
}

.cart-tab li:last-child::before {
    display: none;
}

.cart-tab li a {
    color: #999999;
    display: block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.cart-tab li a span {
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    display: block;
    font-family: roboto;
    font-size: 20px;
    font-weight: 500;
    height: 50px;
    line-height: 50px;
    margin: auto auto 20px;
    text-align: center;
    width: 50px;
}

.cart-tab li a.active {
    color: #ff7f00;
}

.cart-tab li a.active span {
    box-shadow: 0 0 4px rgba(255, 127, 0, 0.1);
    border: 1px solid #ff7f00;
}


/* -------------------------------------

    11.2 Cart table content

------------------------------------- */

.table-content table,
.table-content table th,
.table-content table td {
    border: 1px solid #eee;
    border-collapse: collapse;
}

table {
    width: 100%
}

.table-content table thead th {
    color: #666666;
    font-family: raleway;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 18px 0;
    text-align: center;
    text-transform: uppercase;
}

.table-content table tr td {
    color: #999;
    padding: 20px 30px;
}

.product-thumbnail {
    width: 420px;
}

.pro-thumbnail-img {
    float: left;
    width: 28%;
}

.pro-thumbnail-img img {
    width: 100%;
}

.pro-thumbnail-info {
    float: left;
    padding-left: 20px;
    width: 72%;
}

.product-title-2 {
    color: #666666;
    font-weight: 500;
    margin-top: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.pro-thumbnail-info>p {
    margin-bottom: 0;
}

.product-price,
.product-subtotal {
    font-family: roboto;
    font-size: 16px;
    font-weight: 700;
}

.product-remove a {
    color: #999;
    display: block;
    font-size: 18px;
    height: 20px;
    line-height: 20px;
    transition: all 0.3s ease 0s;
    width: 20px;
}

.product-remove a:hover {
    color: #ff7f00;
}

.product-stock {
    font-weight: 600;
    text-transform: uppercase;
}

.product-add-cart a {
    color: #999;
    font-size: 25px;
}

.product-add-cart a:hover {
    color: #ff7f00;
}


/* -------------------------------------

    11.2 Coupon-discount

------------------------------------- */

.coupon-discount input {
    margin-bottom: 28.5px;
}


/* -------------------------------------

    11.3 Payment-details

------------------------------------- */

.payment-details tr {
    border-bottom: 1px solid #eee;
}

.payment-details tr:last-child {
    border-bottom: 0 none;
}

.payment-details td {
    padding: 5px 0;
}

.td-title-1 {
    color: #999;
    font-size: 13px;
    text-align: left;
}

.td-title-2 {
    color: #999;
    font-family: roboto;
    font-weight: 500;
    text-align: right;
}

.order-total {
    color: #ff7f00;
    font-weight: 500;
    text-align: left;
}

.order-total-price {
    color: #ff7f00;
    font-family: roboto;
    font-weight: 700;
    text-align: right;
}


/*custom-select*/

.custom-select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.custom-select {
    background: rgba(0, 0, 0, 0) url("img/icon/down-arrow.png") no-repeat scroll 97% center;
    border: medium none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    height: 40px;
    margin-bottom: 20px;
    width: 100%;
}

.custom-select option {
    font-size: 13px;
    padding: 2px 0 0 20px;
}

.custom-textarea {
    height: 110px;
}


/* -------------------------------------

    11.4 Payment-method

------------------------------------- */

.payment-method .panel {
    border: medium none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    padding-bottom: 20px;
}

.payment-content {
    padding: 20px 20px 0;
}

.payment-method .panel:last-child {
    padding-bottom: 0;
}

.payment-title {
    color: #666666;
    font-size: 13px;
    font-weight: 500;
    height: 40px;
    line-height: 40px;
    margin-bottom: 0;
    padding-left: 20px;
    text-transform: uppercase;
}

.payment-content>p {
    margin-bottom: 5px;
}

.payent-type li {
    display: inline-block;
    margin-right: 10px;
}

.payent-type li:last-child {
    margin-right: 0;
}

.payent-type li a {
    border: 1px solid #e5e5e5;
    padding: 5px;
    display: block;
}


/* -------------------------------------

    11.5 Order information

------------------------------------- */

.order-info {
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
}

.order-info-list {
    text-transform: uppercase;
    text-align: center;
}

.order-info-list li {
    border-right: 1px solid #eee;
    display: inline-block;
    padding: 0 35px;
}

.order-info-list li:last-child {
    border-right: 0;
}

.order-info-list li h6 {
    color: #666;
    font-weight: 500;
}

.order-info-list li p {
    font-family: roboto;
    margin-bottom: 0;
}

.bill-address>li {
    color: #999999;
    display: block;
    font-size: 13px;
}

.bill-address li span {
    color: #666666;
    display: inline-block;
    font-weight: 500;
    text-transform: uppercase;
    width: 85px;
}


/*========================================

  12. Single Blog Page

========================================*/


/* -------------------------------------

    12.1 Blog option

------------------------------------- */

.blog-option {
    padding: 18px 0;
}

.option-btn {
    margin-left: 30px;
    padding: 0;
}

.option-btn i {
    margin-left: 5px;
}

.dropdown-menu {
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.dropdown-width {
    width: 270px;
}

.multi-line {
    overflow: inherit;
    text-overflow: inherit;
    white-space: inherit;
}

.widget-tags-list>li {
    display: inline-block;
    margin-top: 5px;
    margin-right: 10px;
}

.widget-tags-list li a {
    color: #999999;
    font-size: 13px;
}

.widget-tags-list li:hover a {
    color: #ff7f00;
}


/* -------------------------------------

    12.2 blog main post

------------------------------------- */

.blog-details-photo {
    position: relative;
}

.bg-img-1 {
    background: rgba(255, 255, 255, 0.5) url("img/bg/blog-photo-bg.png") repeat scroll 0 0;
}

.blog-details-photo>img {
    width: 100%;
}

.today-date {
    bottom: 20px;
    height: 100px;
    left: 20px;
    position: absolute;
    text-align: center;
    width: 100px;
}

.today-date span {
    color: #434343;
    display: block;
}

.meta-date {
    font-family: roboto;
    font-size: 42px;
    font-weight: 500;
    line-height: 30px;
    padding-top: 20px;
}

.meta-month {
    font-size: 20px;
    font-weight: 700;
    line-height: 15px;
    padding-top: 15px;
    text-transform: uppercase;
}

.blog-like-share {
    line-height: 1;
}

.blog-like-share li {
    display: inline-block;
}

.blog-like-share li+li {
    margin-left: 20px;
}

.blog-like-share li a {
    color: #999999;
    display: block;
    font-size: 12px;
    line-height: 14px;
}

.blog-like-share li a:hover {
    color: #ff7f00;
}

.blog-like-share li a i {
    margin-right: 10px;
}

.blog-details-title {
    color: #666;
    font-weight: 700;
    line-height: 16px;
}

.quote-border {
    position: relative;
}

.quote-border::before {
    background: #ff9f40 none repeat scroll 0 0;
    content: "";
    height: 90%;
    left: 0;
    position: absolute;
    top: 3px;
    width: 2px;
}


/* -------------------------------------

    12.3 Blog share tags

------------------------------------- */

.blog-share-tags {
    padding: 15px 20px;
}

.share-tags-title {
    color: #666666;
    font-weight: 600;
    line-height: 30px;
    margin-bottom: 0;
    margin-right: 30px;
    text-transform: uppercase;
}

.blog-tags-list li {
    display: inline-block;
}

.blog-tags-list li+li {
    margin-left: 20px;
}

.blog-tags-list li a {
    color: #999;
    font-size: 13px;
    line-height: 30px;
}


/* -------------------------------------

    12.4 Blog post and comments

------------------------------------- */

.blog-section-title {
    color: #575757;
    font-size: 18px;
    font-weight: 700;
    line-height: 14px;
    text-transform: uppercase;
}

.author-post {
    padding: 20px;
    display: flex;
}

.media {
    display: flex;
}

.media-heading {
    color: #666666;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.author-post .media-heading {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.reviews-tab-desc .media {
    display: flex;
}

.reviews-tab-desc .media .media-left {
    padding-right: 15px;
}

.reply-delate {
    line-height: 1;
}

.reply-delate>li {
    display: inline-block;
    margin-right: 0;
}

.reply-delate li a {
    color: #666666;
    display: block;
    font-size: 13px;
}

.reply-delate li:hover a {
    color: #ff7f00;
    display: block;
}


/* --------------------

  blog-audio

----------------------- */

.blog-audio audio {
    width: 100%;
}


/*===================================

  13. About Page

===================================*/

.about-photo img {
    width: 100%;
}

.about-description {}

.about-description p {
    color: #666;
}


/* -------------------------------------

    13.1 Team member

------------------------------------- */

.active-team-member {
    margin-left: -15px;
    margin-right: -15px;
}

.active-team-member .team-member-item {
    margin-left: 15px;
    margin-right: 15px;
}

.team-member {
    margin-bottom: 30px;
    padding: 20px 20px 30px;
    text-align: center;
}

.team-member-photo img {
    margin: auto;
}

.member-name {
    color: #666;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.member-position {
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}


/*bg-shape*/

.bg-shape {
    overflow: hidden;
    position: relative;
}

.bg-shape::before {
    background: #434343 none repeat scroll 0 0;
    content: "";
    height: 150px;
    left: 0;
    margin-top: -65px;
    position: absolute;
    top: 0;
    transform: skewY(-25deg);
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: -1;
}

.bg-shape:hover:before {
    background: #ff7f00 none repeat scroll 0 0;
}


/*====================================

  14. Contact Page

====================================*/


/* -------------------------------------

    14.1 Contact Address

------------------------------------- */

.contact-address {
    padding: 40px 20px 30px;
    text-align: center;
    min-height: 230px;
}

.contact-address i {
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    color: #999999;
    font-size: 30px;
    height: 60px;
    line-height: 60px;
    margin-bottom: 30px;
    text-align: center;
    width: 60px;
    transition: all 0.3s ease 0s;
}

.contact-address:hover i {
    background: #ff7f00 none repeat scroll 0 0;
    color: #fff;
}

.contact-address h6 {
    color: #666;
}


/* -------------------------------------

    14.2 Google Map

------------------------------------- */

#googleMap {
    height: 350px;
    width: 100%;
}

.message-box-section {
    position: relative;
}

.message-box {
    padding: 40px 60px;
}

.message-box input {
    margin-bottom: 5px;
}


/* -------------------------------------

    14.3 Dynamic contact form

------------------------------------- */

.form-message {
    margin-top: 10px;
    margin-bottom: 0;
}

.form-message.success {
    color: green;
}

.form-message.error {
    color: red;
}


/*==================================

  15. 404 Page

==================================*/

.error-404 {
    padding: 20px;
    position: relative;
}

.error-404 img {
    width: 100%;
}

.go-to-btn {
    bottom: 20%;
    position: absolute;
    right: 27%;
}

.go-to-btn a {
    background: #333 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    height: 40px;
    line-height: 40px;
    padding: 0 25px;
    text-transform: uppercase;
}


/* wrapper */

.wrapper {
    background: #fff none repeat scroll 0 0;
}


/* -------------------------------------

  16. Bankground youtube video

------------------------------------- */

.mb_YTPBar {
    display: none !important;
}

.mbYTP_wrapper {
    z-index: -2 !important;
}


/* -------------------------------------

  17. Dotted-overlay

------------------------------------- */

.dotted-overlay::after {
    background: rgba(0, 0, 0, 0) url("img/bg/grid.png") repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}


/*================================================*/

.bg-3 {
    background: url(/wp-content/uploads/2025/05/back.jpg);
}

.black {
    background: black;
    color: rgb(255, 255, 255);
    font-size: 13px;
    font-weight: 700;
    height: 35px;
    padding: 0 20px;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
    margin-top: 15px;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-content {
    background: #fff;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    border-radius: 10px;
    position: relative;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    background: none;
    border: none;
    cursor: pointer;
}

.wpcf7-spinner {
    display: none !important;
}

.category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

}

.video-background-wrapper {
    position: relative;
    overflow: hidden;
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* Это замена bg-opacity-black-60 */
    z-index: 1;
}


/* Контент поверх видео */

.slider-desc-3 {
    position: relative;
    z-index: 2;
}

.bg-3 {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.bg-3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;
    background: none;
    pointer-events: none;
}


/* Видеофон */

.bg-3 video.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -3;
    pointer-events: none;
}


/* Опциональный overlay */

.bg-3::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* как bg-opacity-black-60 */
    z-index: -1;
}

.brand-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.brand-item:hover {
    transform: scale(1.05);
    z-index: 2;
}

.single-feature img,
.single-delivery img {
    transition: transform 0.3s ease;
}

.single-feature:hover img,
.single-delivery:hover img {
    transform: scale(1.1);
}

.shop-list.product-item.d-flex.position-relative {
    display: flex;
    flex-direction: row;
}

@media (max-width: 767px) {
    .slider-area .container {
        padding-right: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    .shop-list.product-item.d-flex.position-relative {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.logo_name {
    margin-bottom: 10px;
    font-size: 24px;
    font-family: 'Raleway', sans-serif;
    color: #434343;
    margin-top: 0px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
}

.adv-title {
    margin-bottom: 10px;
    font-size: 18px;
    font-family: 'Raleway', sans-serif;
    color: #434343;
    margin-top: 0px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
}

.device-preview-scroll {
    display: flex;
    gap: 20px;

    padding: 20px 0;

    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

@media (max-width: 767px) {
    .device-preview-scroll {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        padding: 20px 0;
        scroll-snap-type: x mandatory;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }
}

.device-card {
    flex: 0 0 auto;
    width: 200px;
    height: 270px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.device-card:hover {
    transform: translateY(-5px);
}

.device-card img {
    width: 100%;
    height: 240px;
    object-fit: contain;
    padding: 10px 10px;
}

.device-card h5 {
    margin: 10px 0;
    font-size: 16px;
    font-weight: 500;
}

.device-card p {
    color: black;
}

@media (min-width: 992px) {
    .d-menu {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
    }
}

.main-menu .menu-item-has-children>a::after {
    content: "▾";
    /* ▼ или ⯆ тоже вариант */
    margin-left: 0.4em;
    font-size: 0.7em;
    vertical-align: middle;
    color: #666;
    /* можно задать любой цвет */
    transition: transform 0.3s ease;
}

/* При наведении — можно чуть поворачивать стрелку */
.main-menu .menu-item-has-children:hover>a::after {
    transform: rotate(180deg);
}

.blog-description ul {
    list-style-type: disc !important;
    /* обычные точки */
    list-style-position: outside !important;
    /* точки слева от текста */
    margin-left: 20px !important;
    /* отступ слева */
    margin-bottom: 10px !important;
    color: #999999 !important;
    /* текст чёрный */
}

.blog-description ul li {
    color: #999999 !important;
    list-style: disc !important;
    /* текст элементов чёрный */
}




.blog-description ol {
    list-style-type: disc !important;
    /* обычные точки */
    list-style-position: outside !important;
    /* точки слева от текста */
    margin-left: 20px !important;
    /* отступ слева */
    margin-bottom: 10px !important;
    color: #999999 !important;
    /* текст чёрный */
}

.blog-description ol li {
    color: #999999 !important;
    list-style: disc !important;
    /* текст элементов чёрный */
}

/* ========================= */
/*  Блок с отзывами         */
/* ========================= */

.custom-reviews-section {

    margin: 50px auto;
    padding: 0px 20px;
    font-family: Arial, sans-serif;
}

.custom-reviews-subtitle {
    text-align: center;
    font-size: 22px;
    margin-top: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}

.custom-reviews-list {
    margin-bottom: 40px;
}

.custom-review-item {
    background: #fdfdfd;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.custom-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.custom-review-author {
    font-size: 18px;
    color: #222;
}

.custom-review-rating .custom-star {
    font-size: 20px;
    color: #ccc;
    margin-left: 3px;
}

.custom-review-rating .custom-star.filled {
    color: #ffcc00;
}

.breadcrumb-item.active a {
    pointer-events: none;
    /* запрещает клики */
    cursor: default;
    /* убирает курсор руки */
    text-decoration: none !important;
    /* убирает подчеркивание */
    color: #666 !important;
    /* цвет как у обычного текста */
}

.custom-review-content {
    font-size: 15px;
    color: #555;
}

.custom-no-reviews {
    font-style: italic;
    color: #777;
}

.crf-mini-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.crf-mini-header-title {
    margin: 0;
    font-size: 24px;
}

.crf-mini-toggle {
    padding: 10px 18px;
    background: #111;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

.crf-mini-toggle:hover {
    background: #333;
}

/* ==================================================
   БЛОК ОТЗЫВОВ (СПИСОК)
================================================== */

.custom-reviews-section {
    margin: 40px 0;
}


.crf-latest-review-item {
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
}

.crf-latest-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.crf-latest-review-author {
    font-weight: 600;
    font-size: 15px;
    color: #222;
}

/* ---------- СТАТИЧНЫЕ ЗВЁЗДЫ ---------- */

.crf-latest-review-rating {
    display: flex;
    gap: 4px;
    pointer-events: none;
}

.crf-latest-star {
    font-size: 15px;
    color: #e0e0e0;
}

.crf-latest-star.filled {
    color: #f5c518;
}

.crf-latest-review-content {
    font-size: 14px;
    line-height: 1.55;
    color: #444;
}


/* ==================================================
   ФОРМА «ОСТАВИТЬ ОТЗЫВ» (КОМПАКТНАЯ)
================================================== */

.crf-mini-container {
    margin: 30px auto;
    padding: 20px 22px;
    max-width: 520px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.07);
}

.crf-mini-title {
    font-size: 18px;
    margin-bottom: 14px;
    text-align: center;
}

.crf-mini-label {
    display: block;
    text-align: left;
    color: black;
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 4px;
}

.crf-mini-input,
.crf-mini-textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

.crf-mini-textarea {
    min-height: 90px;
    resize: vertical;
}


/* ---------- ЗВЁЗДЫ В ФОРМЕ ---------- */

.crf-mini-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
    margin-top: 4px;
}

.crf-mini-stars input {
    display: none;
}

.crf-mini-stars label {
    font-size: 22px;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s ease;
}

.crf-mini-stars label:hover,
.crf-mini-stars label:hover~label,
.crf-mini-stars input:checked~label {
    color: #f5c518;
}


/* ---------- КНОПКА ---------- */

.crf-mini-submit {
    margin-top: 16px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    background: #575757;
    color: white;
    cursor: pointer;
    transition: background 0.2s ease;
}

.crf-mini-submit:hover {
    background: #202020;
}

.crf-latest-review-date {
    font-size: 12px;
    color: #888;
    margin-left: 10px;
}

/* ==================================================
   СООБЩЕНИЯ
================================================== */

.crf-mini-success {
    background: #e8f8ee;
    color: #1a7f37;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 13px;
}

.crf-mini-error {
    background: #fdecea;
    color: #b42318;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 13px;
}

/* ==================================================
   СЛАЙДЕР ОТЗЫВОВ
================================================== */

.crf-latest-reviews-grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}

/* убираем скроллбар */
.crf-latest-reviews-grid::-webkit-scrollbar {
    display: none;
}

.crf-latest-reviews-grid {
    scrollbar-width: none;
}

/* карточка */
.crf-latest-review-item {
    flex: 0 0 calc(50% - 10px);
    /* 2 в ряд */
    scroll-snap-align: start;
}

@media (max-width: 640px) {
    .crf-latest-review-item {
        flex: 0 0 100%;
    }

    .crf-latest-review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ==================================================
   ТОЧКИ ПАГИНАЦИИ
================================================== */

.crf-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.crf-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d0d0d0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.crf-slider-dot.active {
    background: #575757;
    transform: scale(1.2);
}


/* ==================================================
   АДАПТИВ
================================================== */


@media (max-width: 640px) {


    .crf-latest-review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .crf-mini-container {
        padding: 16px;
    }

    .crf-mini-stars label {
        font-size: 20px;
    }
}