:root {
    --c-body: #f6f6f9;
    --c-white: #FFFFFF;
    --c-black: #404040;
        --c-blacl-l-1: #151515;

    --c-gray: rgba(40, 40, 40, .5);
    --c-silver: #e3e3e3;
    --c-platinum: #949494;

    --c-purple: #823CD5;
        --c-purple-hover: #5E1CA7;

    --c-blue: #60AEDB;

    --font-main: "Manrope", sans-serif;

    --gap-10: 10px;
    --gap-20: 20px;
    --gap-30: 30px;
    --gap-40: 40px;
    --gap-50: 50px;
    --gap-60: 60px;
    
}

*{padding: 0px; margin: 0px;}

html{ padding: 0px; margin: 0px; width: 100%; height: 100%; }
body{ 
    background-color: var(--c-body);
    font-family: var(--font-main);
    margin: 0px;
    padding: 0px;
    color: var(--c-black);
}

ul,
li,
img,
svg,
form,
fieldset,
a,
input,
button,
select,
textarea{ all: unset; }

img,
svg{ display: block; }

input,
select,
textarea,
button{ font-family: var(--font-main); }

h1, 
h2, 
h3, 
h4, 
h5, 
h6{ display: block; font-weight: 400; color: var(--c-black); }

a{ cursor: pointer; }
a:hover{ color: var(--c-blue); }

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 0px solid var(--c-white);
    -webkit-text-fill-color: var(--c-black);
    -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
    transition: background-color 5000s ease-in-out 0s;
}
/**************************************/

.wrap{ 
    width: 1240px;
    margin: auto;
}

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

h1{ font-size: 26px; font-weight: 700; }
h2{ font-size: 24px; font-weight: 700; }
h4{ font-size: 17px; font-weight: 400; }

/****************Animation ****************/

@-webkit-keyframes fadeOpacityIn {
    0% { opacity: 0; filter: blur(8px); }
    100% { opacity: 1; filter: blur(0); }
}

@keyframes fadeOpacityIn {
    0% { opacity: 0; filter: blur(8px); }
    100% { opacity: 1; filter: blur(0); }
}

@-webkit-keyframes fadeOpacityOut {
    0% { opacity: 1; filter: blur(0); }
    100% { opacity: 0; filter: blur(8px); }
}

@keyframes fadeOpacityOut {
    0% { opacity: 1; filter: blur(0); }
    100% { opacity: 0; filter: blur(8px); }
}

.fadeOpacityIn{ -webkit-animation: fadeOpacityIn .5s ease; animation: fadeOpacityIn .5s ease; }
.fadeOpacityOut{ -webkit-animation: fadeOpacityOut .5s ease; animation: fadeOpacityOut .5s ease; }

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

header{  
    position: sticky;
    top: 0px;
    z-index: 9;

    background: url('../icon/header-bg.png');
    background-size: cover;

    padding: var(--gap-20) 0px; 
}

header .grid{
    display: grid;
    grid-template-columns: 135px 40px 1fr 370px 150px;
    gap: var(--gap-20);
    align-items: center;
}

header .grid .logo{ width: 100%; }
header .grid .logo img{ width: 100%; } 

header .grid .menu p{ 
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 10px; 
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

header .grid .menu p a{
    display: block;
    padding: 10px;
} 

header .grid .menu p svg{ width: 20px; }
header .grid .menu p svg :is(line){ stroke-width: 21px; stroke: var(--c-white); } 

header .grid .menu:hover p{ color: var(--c-purple-hover); }
header .grid .menu:hover p svg :is(line){ stroke: var(--c-purple-hover); } 

header .grid .search {
    width: 100%;
}

header .grid .search form{ width: 100%; }
header .grid .search form fieldset{ width: 100%; position: relative; }

header .grid .search input{
    background: var(--c-white);
    border-radius: 10px;
    padding: 15px;
    width: calc(100% - 30px);
    font-size: 14px;
}

header .grid .search button{ position: absolute; top: calc(50% - 10px); right: 20px; cursor: pointer; }
header .grid .search button svg{ width: 20px; } 
header .grid .search button svg :is(line, polyline, circle, path){ stroke-width: 21px; stroke: var(--c-black); } 

header .grid .controll{
    width: 100%;
}

header .grid .controll ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .grid .controll ul li{
    cursor: pointer;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: rgb(255, 255, 255, .55);

    position: relative;
}

header .grid .controll ul li img{ margin: auto auto 4px auto; }

header .grid .controll ul li svg{ width: 24px; margin: auto auto 5px auto; }

header .grid .controll ul li svg :is(line, polyline, circle, path){ stroke-width: 21px; stroke: var(--c-white); }

header .grid .controll ul li:hover{ color: var(--c-purple-hover); }
header .grid .controll ul li:hover svg :is(line, polyline, circle, path){ stroke: var(--c-purple-hover); }
header .grid .controll ul li a:hover{ color: var(--c-purple-hover); }

header .controll li .circle{
    background: var(--c-purple);
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    border-radius: 200px;
    color: var(--c-white);

    position: absolute;
    top: -7px;
    right: -3px;
} 

header .controll li .circle.show{ display: flex; }

header .phone{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-20);
}

header .phone .itm{
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
}

header .phone .itm a{ color: var(--c-white); }
header .phone .itm a:hover{ color: var(--c-purple-hover); text-decoration: underline; }


/**************************Footer**************************/

footer{
    margin-top: 100px;
    background: url("../icon/footer-bg.jpg");
    background-position: top;
    background-size: cover;

    padding: 50px 0px 20px 0px;
}

footer .grid{
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--gap-40);
}

footer .logo img{ width: 154px; } 

footer .adress{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap-40);
} 

footer .adress .adr .title{
    border-bottom: 2px solid rgb(40, 40, 40, .15);
}

footer .adress .adr .title h2{
    font-size: 21px;
    font-weight: 700;
    color: var(--c-blacl-l-1);
}

footer .adress .adr .title p{ font-size: 17px; font-weight: 700; margin-top: 8px; height: 100px; color: var(--c-black); }
footer .adress .adr .title p a{ text-decoration: underline; }
footer .adress .adr .title p a:hover{ color: var(--c-purple); }

footer .adress .adr .contact{ margin-top: 16px; }
footer .adress .adr .contact p{ color: var(--c-black); font-weight: 400; margin-bottom: 4px; font-size: 13px; font-weight: 500; }
footer .adress .adr .contact a{ color: var(--c-black); font-weight: 700; display: block; text-decoration: underline; margin: 4px 0px; }
footer .adress .adr .contact a:hover{ color: var(--c-purple); }
footer .adress .adr .contact span{ color: var(--c-black); font-weight: 700; display: block; margin: 2px 0px; font-size: 17px; }

footer .fio{
    text-align: left;
    font-size: 13px;
    margin-top: 50px;
    font-weight: 500;
}

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

.uiIndexAdv{ margin: var(--gap-20) auto; }
.uiIndexAdv ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-10);
}

.uiIndexAdv ul li{
    padding: var(--gap-30);
    overflow: hidden;
    border-radius: 5px;
}

.uiIndexAdv ul li:nth-child(1){ background: url("../icon/index.adv.1.png"); background-size: cover; }
.uiIndexAdv ul li:nth-child(2){ background: url("../icon/index.adv.2.png"); background-size: cover; }

.uiIndexAdv ul li .time{
    font-size: 18px;
    font-weight: 700;
}

.uiIndexAdv ul li .time span{
    background: rgba(103, 208, 244, .2);
    border-radius: 360px;
    border: 1px solid var(--c-blue);

    padding: 5px 15px;
}

.uiIndexAdv ul li h2{
   font-size: 30px;
   font-weight: 700; 
   margin: var(--gap-30) 0px 0px;
}

.uiIndexAdv ul li button{
    border-radius: 10px;
    color: var(--c-white);
    font-size: 16px;
    font-weight: 600;
    padding: 13px 30px;
    cursor: pointer;
    margin-top: 10px;

    background: var(--c-purple);
}

.uiIndexAdv ul li button:hover{ background: var(--c-purple-hover); }

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

.uiCategoryLarge{
    margin-top: var(--gap-20); 
 }
 
 .uiCategoryLarge h2{ font-size: 35px; font-weight: 700; }
 
 .uiCategoryLarge ul li{ cursor: pointer; }
 
 .uiCategoryLarge ul li .itm{ position: relative; border-radius: 7px; overflow: hidden; transition: .3s ease; }
 
 .uiCategoryLarge ul li .icon{ width: 100%; height: 100%; overflow: hidden; border-radius: 7px; }
 .uiCategoryLarge ul li .icon img{ width: 100%; height: 100%; object-fit: cover; }
 
.uiCategoryLarge ul li p{
    position: absolute;
    bottom: 0px;
    left: 0px;
    color: var(--c-white);
 
    padding: 18px;
    width: calc(100% - 36px);
    font-size: 15px;
    font-weight: 500;
}
 
.uiCategoryLarge ul li .itm:hover{
    box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.5);
}
 .uiCategoryLarge ul li .itm:hover a{ color: var(--c-white); }

 .uiCategoryLarge ul li .itm.mobile{ display: none; }
 
 .uiCategoryLarge ul.large{
     display: grid;
     grid-template-columns: 280px 280px 2fr; 
     gap: var(--gap-10);
 
     margin-top: var(--gap-20);
 }
 
 .uiCategoryLarge ul.large li:nth-child(1) p,
 .uiCategoryLarge ul.large li:nth-child(2) p{
     padding: var(--gap-20);
     width: calc(100% - 40px);
     font-size: 23px;
     font-weight: 600;
 }
 
 .uiCategoryLarge ul.large li:nth-child(3){
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: var(--gap-10);
 }
 
 .uiCategoryLarge ul.medium li{
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: var(--gap-10);
     margin-top: var(--gap-10);
 }
 
 .uiCategoryLarge ul.medium li p{ width: 160px; }

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

.uiAbout{ margin: 0px; }

.uiAbout .grid{
    padding: 100px 0px 0px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-40);
    align-items: center;
}

.uiAbout .grid .text h2{ font-size: 35px; font-weight: 700; }
.uiAbout .grid .text p{
    font-size: 18px;
    padding: var(--gap-10) 0px;
    max-width: 520px;
    font-weight: 500;
} 

.uiAbout .grid .text a{
    display: inline-block;
    width: 280px;
    color: var(--c-white);
    border-radius: 7px;
    padding: 15px 0px;

    font-size: 18px;
    font-weight: 700;

    background: var(--c-purple);
    text-align: center;

    margin-top: var(--gap-20);
}

.uiAbout .grid .text a:hover{ background: var(--c-purple-hover); }

.uiAbout .grid .icon{ margin: auto; }

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

.pageIndex h2{
    font-size: 35px;
    font-weight: 700;
}

.pageIndex .wallSet{ margin-top: var(--gap-60); }

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

.uiWallSet{
    margin: auto;
}

.uiWallSet ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 24px;
    row-gap: var(--gap-50);
    margin-top: 27px;
}

.uiWallSet ul li .icon{
    width: 100%;
    border-radius: 7px;
    overflow: hidden;

    height: 300px;

    transition: .3s ease;

    background: var(--c-silver);
}

.uiWallSet ul li .icon img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.uiWallSet ul .price{
    font-weight: 700;
    font-size: 23px;
    margin-top: 10px;
    color: var(--c-blacl-l-1);
}

.uiWallSet ul li .text{
    font-size: 15px;
    font-weight: 600;
    height: 46px;
    overflow: hidden;
    color: var(--c-gray);
    margin: 10px 0px;
}

.uiWallSet ul li .text a:hover{ color: var(--c-purple-hover); text-decoration: underline; }

.uiWallSet ul li .link a{
    width: 100%;
    display: block;
    color: var(--c-white);
    border-radius: 10px;
    padding: 14px 0px;

    font-size: 15px;
    font-weight: 700;

    background: var(--c-purple);
    text-align: center;
}

.uiWallSet ul li .link a:hover{ background: var(--c-purple-hover); }

.uiWallSet ul.large{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }


.uiWallSet ul li:hover .link a{ background: var(--c-purple-hover); }
.uiWallSet ul li:hover .icon{ 
    box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.3);
}

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

.pageCatalog{
    margin: auto;
}

.pageCatalog .gridCatalog{
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--gap-20);

    margin-top: var(--gap-20);
}

.pageCatalog h1{
    font-size: 35px;
    font-weight: 700;
}

.pageCatalog h2{
    margin-top: 33px;
}

.pageCatalog h2 span{
    font-size: 21px;
    font-weight: 600;
    background: var(--c-purple);
    border-radius: 200px;
    padding: 7px 14px;
    color: var(--c-white);
}

.pageCatalog h1 span{ 
    color: var(--c-gray); 
    font-size: 16px; 
    font-weight: 400;
    margin-left: var(--gap-10);
}

.pageCatalog .catMenu{ margin: var(--gap-20) 0px var(--gap-40); }
.pageCatalog .catMenu ul{
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-10);
    row-gap: var(--gap-20);
}

.pageCatalog .catMenu ul li a{
    padding: 7px 10px;
    color: var(--c-black);
    font-size: 15px;
    font-weight: 500;
    border-radius: 200px;
}

.pageCatalog .catMenu ul li a:hover{ 
    background: var(--c-blue); 
    color: var(--c-white); 
}

.pageCatalog .catMenu ul li.active a{
    background: var(--c-blue); 
    color: var(--c-white);
}

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

.uiCategoryLeft{
    position: sticky;
    top: 110px;
}


.uiCategoryLeft ul{
    display: block;
    width: 100%;
    margin-top: 1px;

    max-height: calc(100vh - 130px);
    overflow-y: auto;
    overflow-x: hidden;
}

.uiCategoryLeft ul::-webkit-scrollbar {
    width: 8px;
}

.uiCategoryLeft ul::-webkit-scrollbar-thumb {
    background-color: var(--c-silver);
    border-radius: 4px;
    border: 2px solid var(--c-body);
}

.uiCategoryLeft ul::-webkit-scrollbar-track {
    background: var(--c-body);
    border-radius: 4px;
}

.uiCategoryLeft ul li{ margin-bottom: 16px; display: block; }
.uiCategoryLeft ul li:last-child{ margin-bottom: 0px; } 

.uiCategoryLeft ul li .title{
   color: var(--c-black);
   font-size: 18px;
   font-weight: 600; 
}

.uiCategoryLeft ul li .title a{
    max-width: calc(100% - 40px);
}

.uiCategoryLeft ul li .title a strong{ 
    text-decoration: underline; 
    text-decoration-color: var(--c-body); 
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    line-height: 32px; 
    font-weight: 600; 
}
.uiCategoryLeft ul li .title:hover{ color: var(--c-purple); }
.uiCategoryLeft ul li .title:hover a strong{ color: var(--c-purple-hover); text-decoration-color: var(--c-purple-hover);  }

.uiCategoryLeft ul li .title .circle{
    background: var(--c-purple);
    width: 23px;
    height: 23px;
    font-size: 17px;
    color: var(--c-white);
    display: inline-block;
    border-radius: 200px;
    text-align: center;
    margin-left: 8px;
    line-height: 24px;
    vertical-align: middle;
    text-decoration: none;
}

.uiCategoryLeft ul li .title:hover .circle{ background: var(--c-purple-hover); }
.uiCategoryLeft ul li.active .circle{ background: var(--c-purple-hover); }

.uiCategoryLeft ul li .nowrap{ white-space: nowrap; }

.uiCategoryLeft ul .sub{ display: none; } 

.uiCategoryLeft ul .sub ul{
    width: auto;
    border: 0px solid transparent;
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0px;
    font-size: 17px;
    font-weight: 500;

    max-height: 100%;
}

.uiCategoryLeft ul .sub li{
    margin-bottom: 0px;
} 

.uiCategoryLeft ul .sub .sb{ 
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 0px;
    color: var(--c-platinum);
}

.uiCategoryLeft ul .sub .sb a{ 
    display: flex; 
    gap: 5px; 
    flex-wrap: wrap; 
    align-items: center; 
}

.uiCategoryLeft ul .sub .sb a span{ 
    padding: 5px; 
    color: var(--c-body); 
    border-radius: 200px;
    background: var(--c-purple);

    display: inline-block;
    width: 12px;
    height: 12px;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;
} 

.uiCategoryLeft ul .sub ul li svg{ width: 16px; transform: rotate(45deg); }

.uiCategoryLeft ul li.active a strong{ color: var(--c-purple-hover); text-decoration-color: var(--c-purple-hover); }
.uiCategoryLeft ul li.active .sub{ display: block; }

.uiCategoryLeft ul .sub ul li svg :is(line, polyline){ stroke-width: 32px; stroke: var(--cd-body); }

.uiCategoryLeft ul .sub ul li.active .sb a{ color: var(--c-purple-hover); text-decoration: underline; }
.uiCategoryLeft ul .sub ul li.active svg :is(line, polyline){ stroke: var(--c-purple-hover); }
.uiCategoryLeft ul .sub ul li.active .sb a span{ background: var(--c-purple-hover); text-decoration: none; }

.uiCategoryLeft ul .sub ul li .sb:hover a{ color: var(--c-purple-hover); text-decoration: underline; }
.uiCategoryLeft ul .sub ul li .sb:hover svg :is(line, polyline){ stroke: var(--c-purple-hover); }
.uiCategoryLeft ul .sub ul li .sb:hover a span{ background: var(--c-purple-hover); }

.uiCategoryLeft ul .sub ul ul{ display: none; }
.uiCategoryLeft ul ul li.active ul{ display: block; margin-left: 16px; } 

.uiCategoryLeft ul .sub .sbc{
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
    color: var(--c-platinum);
    font-size: 16px;
} 

.uiCategoryLeft ul ul ul li svg{ visibility: hidden; }

.uiCategoryLeft ul ul ul li:hover .sbc svg,
.uiCategoryLeft ul ul ul li.active .sbc svg{ visibility: visible; }

.uiCategoryLeft ul ul ul li:hover .sbc a,
.uiCategoryLeft ul ul ul li.active .sbc a{ color: var(--c-purple); text-decoration: underline; }

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

.uiBreadcrumbs{ margin: 0px; }
.uiBreadcrumbs ul{
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-10);
    color: var(--c-blacl-l-1);
    font-size: 11px;
    font-weight: 500;
}

.uiBreadcrumbs ul li a{ color: var(--c-gray); text-decoration: underline; }
.uiBreadcrumbs ul li a:hover{ color: var(--c-purple-hover); }


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

.pageGoods{
    margin-top: var(--gap-10);
}

.pageGoods .uiBreadcrumbs{ margin-bottom: 20px; }

.pageGoods .gridGoods{
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--gap-20);

    margin-top: var(--gap-20);
}

.pageGoods .gridGoods .sku{
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--gap-30);
}

.pageGoods .gridGoods .sku .gallery .icon{
    border-radius: 24px;
    overflow: hidden;
    background: var(--c-silver);
}

.pageGoods .gridGoods .sku .gallery .icon img{
    width: 100%;
    height: 100%;
}

.pageGoods .gridGoods .sku .gallery .smallIcon ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap-10);
    margin-top: 8px;
}

.pageGoods .gridGoods .sku .gallery .smallIcon ul li{
    border-radius: 11px;
    cursor: pointer;
    opacity: .4;
    aspect-ratio: 3 / 3;
    overflow: hidden;
    transition: opacity .5s ease;
    border: 2px solid transparent;
}

.pageGoods .gridGoods .sku .gallery .smallIcon ul li img{ width: 100%; }

.pageGoods .gridGoods .sku .gallery .smallIcon ul li.active{ opacity: 1; border-color: var(--c-purple-hover); }
.pageGoods .gridGoods .sku .gallery .smallIcon ul li:hover{ opacity: 7; }

.pageGoods .gridGoods .sku .info .title h1{
    font-size: 27px;
    font-weight: 700;
    color: var(--c-blacl-l-1);
    margin-bottom: var(--gap-10);
}

.pageGoods .gridGoods .sku .info .title p{
    font-size: 16px;
    color: var(--c-blacl-l-1);
    font-weight: bold;

    display: grid;
    grid-template-columns: 100px 1fr;
}

.pageGoods .gridGoods .sku .info .title p strong{ font-weight: 700; }

.pageGoods .gridGoods .sku .info .title p span{
    font-weight: 500;
}

.pageGoods .gridGoods .sku .info .skuList{
    margin-top: 26px;
}

.pageGoods .gridGoods .sku .info .skuList p{
    font-size: 16px;
    color: var(--c-blacl-l-1);
    font-weight: bold;
}

.pageGoods .gridGoods .sku .info .skuList ul{
    margin-top: var(--gap-10);
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-10);
}

.pageGoods .gridGoods .sku .info .skuList ul li{
    border-radius: 7px;
    border: 2px solid var(--c-silver);
    
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.pageGoods .gridGoods .sku .info .skuList ul li a{
    display: block;
    padding: 7px 14px;
}

.pageGoods .gridGoods .sku .info .skuList ul li a:hover{ color: var(--c-blacl-l-1); }

.pageGoods .gridGoods .sku .info .skuList ul li span{
    display: block;
    font-size: 11px;
    font-weight: 500;
}

.pageGoods .gridGoods .sku .info .skuList ul li:hover{ border-color: var(--c-blue); }
.pageGoods .gridGoods .sku .info .skuList ul li.active{ border-color: var(--c-blue); background: rgba(103, 208, 244, .2); }

.pageGoods .gridGoods .sku .info .price{ 
    font-size: 25px; 
    font-weight: bold; 
    margin: 17px 0px;
}

.pageGoods .gridGoods .sku .info .controll .btn{
    display: flex;
    gap: var(--gap-10);
}

.pageGoods .gridGoods .sku .info .controll button,
.pageGoods .gridGoods .sku .info .controll a{
    font-size: 17px;
    font-weight: 600;
    color: var(--c-white);
    padding: 16px 44px;
    border-radius: 8px;

    background: var(--c-purple);
    cursor: pointer;
}

.pageGoods .gridGoods .sku .info .controll a.rose{ background: #D573FF; position: relative; }
.pageGoods .gridGoods .sku .info .controll a.rose img{ position: absolute; top: -25px; right: -25px; } 

.pageGoods .gridGoods .sku .info .controll button:hover,
.pageGoods .gridGoods .sku .info .controll a:hover{ background: var(--c-purple-hover); }

.pageGoods .gridGoods .sku .info .controll button.added{
    background: var(--c-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pageGoods .gridGoods .sku .info .controll button.added:hover{ background: var(--c-purple-hover); }

.pageGoods .gridGoods .sku .info .controll button.added svg{ width: 19px; }
.pageGoods .gridGoods .sku .info .controll button.added svg :is(line, polyline, circle, path){ stroke-width: 26px; stroke: var(--c-white); }

.pageGoods .gridGoods .sku .info .controll .opt{
    display: flex;
    align-items: center;
    margin-top: 5px;
    padding: 10px;
    font-size: 14px;
}

.pageGoods .gridGoods .sku .info .controll .opt .delivery{ 
    width: 253px; 
    text-decoration: underline;
    text-decoration-thickness: 2px; 
    text-underline-offset: 6px; 

    padding: 0px; 
    font-size: 15px; 
    background: none; 
    color: var(--c-blacl-l-1); 
    display: flex; 
    align-items: center;
}

.pageGoods .gridGoods .outShop{ display: flex; gap: 10px; flex-wrap: wrap; }
.pageGoods .gridGoods .outShop a{ margin-top: 15px; padding: 0px; border-radius: 8px; overflow: hidden; width: 125px; }
.pageGoods .gridGoods .outShop img{ width: 100%; } 

.pageGoods .gridGoods .sku .info .controll .opt .delivery:hover{ background: none; text-decoration-color: var(--c-purple-hover); color: var(--c-purple-hover); }

.pageGoods .gridGoods .sku .info .controll .opt p{
    color: var(--c-gray);
    font-weight: 500;
}

.pageGoods .gridGoods .description{
    margin-top: var(--gap-60);
}

.pageGoods .gridGoods .description h2{
    color: var(--c-black);
    font-size: 25px;
    font-weight: 700;
    margin-bottom: var(--gap-10);
}

.pageGoods .gridGoods .description p{
    font-size: 14px;
    line-height: 22px;
}

.pageGoods .gridGoods .recoList{
    margin-top: var(--gap-60);
}

.pageGoods .gridGoods .recoList h2{
    font-size: 25px;
    font-weight: 700;
    margin-bottom: var(--gap-10);
}

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

.addPopup{
    position: fixed;
    top: 100px;
    right: 50px;

    background: rgba(21, 21, 21, 0.5);

    color: var(--c-white);
    display: none;
    gap: 8px;
    align-items: center;
    justify-content: center;

    font-weight: 600;
    font-size: 14px;
    padding: 12px 20px;

    border-radius: 5px;
}

.addPopup svg{ width: 21px; }

.addPopup svg :is(polyline){ stroke: var(--c-white); stroke-width: 36px; }

.addPopup.show{ display: flex; -webkit-animation: fadeOpacityIn .5s ease; animation: fadeOpacityIn .5s ease; }
.addPopup.hide{ -webkit-animation: fadeOpacityOut .5s ease; animation: fadeOpacityOut .5s ease; }

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

.pageCart{ margin: auto; }

.pageCart h1{ 
    font-size: 30px; 
    font-weight: 700; 
    margin-top: var(--gap-40); 
} 

.pageCart h1 span{
    font-size: 16px; 
    color: var(--c-gray); 
    margin-left: var(--gap-10); 
    font-weight: 500;
}

.pageCart .gridCart{
    display: grid;
    grid-template-columns: 1fr 323px;
    gap: var(--gap-40);

    margin-top: var(--gap-10);
}

.pageCart .gridCart .checkAmount{
    padding: var(--gap-20);

    background: var(--c-white);
    border-radius: 11px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #e63946;
}

.pageCart .gridCart .total .box{
    padding: var(--gap-20);

    position: sticky;
    top: 100px;

    background: var(--c-white);
    border-radius: 11px;
}

.pageCart .gridCart .total .box .item{ margin-bottom: var(--gap-20); }
.pageCart .gridCart .total .box .item p{ 
    display: grid; 
    grid-template-columns: 1fr 19px; 
    font-size: 14px; 
    font-weight: 700;
}

.pageCart .gridCart .total .box .item p svg{ width: 100%; cursor: pointer; } 
.pageCart .gridCart .total .box .item p svg :is(line, path){ stroke-width: 19px; stroke: var(--c-gray); }
.pageCart .gridCart .total .box .item p svg:hover :is(line, path){ stroke: var(--c-purple-hover); }

.pageCart .gridCart .total .box .item:last-child{ margin-bottom: 0px; }
.pageCart .gridCart .total .box .item p strong{ font-weight: 700; } 
.pageCart .gridCart .total .box .item span{ font-size: 14px; font-weight: 500; color: var(--c-gray); }

.pageCart .gridCart .total .box .text{ 
    display: flex;
    justify-content: space-between;

    font-size: 14px;
    color: var(--c-gray);

    font-weight: 500;
    margin-bottom: 5px;
}

.pageCart .gridCart .total .box .text:last-child{ margin-bottom: 0px; } 
.pageCart .gridCart .total .box .text span:last-child{ color: var(--c-blacl-l-1); font-weight: 600; } 

.pageCart .gridCart .total .box .amount{
    margin: var(--gap-20) 0px;
    font-size: 27px;
    font-weight: 700;

    display: flex;
    justify-content: space-between;
} 

.pageCart .gridCart .total .box .amount span:last-child{ color: var(--c-purple); }

.pageCart .gridCart .total .box .amount small{ font-size: 20px; color: var(--c-blacl-l-1); display: none; }

.pageCart .gridCart .total .box button{
    background: var(--c-purple);
    font-weight: 700;
    font-size: 14px;
    text-align: center;

    padding: 15px 0px;
    cursor: pointer;

    border-radius: 5px;
    color: var(--c-white);

    width: 100%;
}

.pageCart .gridCart .total .box button:hover{ background: var(--c-purple-hover); }

.pageCart .gridCart .goodsList{ margin: var(--gap-40) auto; }
.pageCart .gridCart .goodsList ul{ margin: auto; }
.pageCart .gridCart .goodsList ul li{
    display: grid;
    grid-template-columns: 100px 1fr 100px 120px 19px;
    gap: var(--gap-30);
    align-items: flex-start;

    margin-bottom: var(--gap-20);
}

.pageCart .gridCart .goodsList ul li:last-child{ margin-bottom: 0px; }

.pageCart .gridCart .goodsList ul li .icon{ 
    width: 100%; 
    border-radius: 5px; 
    overflow: hidden; 
}

.pageCart .gridCart .goodsList ul li .icon img{ width: 100%; }

.pageCart .gridCart .goodsList ul li .info .name{ 
    font-size: 16px;
    color: var(--c-blacl-l-1);
    font-weight: 600;
}

.pageCart .gridCart .goodsList ul li .info .name a:hover{ color: var(--c-purple); text-decoration: underline; } 

.pageCart .gridCart .goodsList ul li .info .sku{ margin-top: var(--gap-10); }
.pageCart .gridCart .goodsList ul li .info .sku span{ 
    display: inline-block;
    border-radius: 200px; 
    font-size: 14px;
    color: var(--c-gray);
    padding: 7px 9px;
    border: 1px solid var(--c-gray);
    font-weight: 600;
}

.pageCart .gridCart .goodsList ul li .quantity{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

.pageCart .gridCart .goodsList ul li .quantity span{
    width: 25px;
    height: 25px;
    font-weight: 700;
    font-size: 16px;
    background: #EFEFEF;
    color: var(--c-gray);
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    line-height: 25px;
    cursor: pointer;
}

.pageCart .gridCart .goodsList ul li .quantity span:hover{ background: var(--c-black); color: var(--c-white); }
.pageCart .gridCart .goodsList ul li .quantity strong{ font-size: 19px; }

.pageCart .gridCart .goodsList ul li .amount{
    font-weight: 600;
    font-size: 21px;
    color: var(--c-blacl-l-1);
    display: flex;
    align-items: center;
    justify-content: end;
}

.pageCart .gridCart .goodsList ul li .amount span{ margin-right: 5px; }

.pageCart .gridCart .goodsList ul li .delete{ padding-top: 5px; cursor: pointer; }
.pageCart .gridCart .goodsList ul li .delete svg :is(line, path){ stroke-width: 19px; stroke: var(--c-gray);  } 
.pageCart .gridCart .goodsList ul li .delete svg:hover :is(line, path){ stroke: var(--c-purple-hover); }


.pageCart .gridCart .methodDelivery{
    margin-top: var(--d-gap-40);
}

.pageCart .gridCart .methodDelivery h2{
    font-size: 30px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pageCart .gridCart .methodDelivery h2 span{ 
    font-size: 13px; 
    font-weight: 600; 
    display: none; 
    color: var(--c-platinum); 
    display: none; 
    gap: 8px; 
    align-items: center; 
    cursor: pointer; 
}

.pageCart .gridCart .methodDelivery h2 span svg{ 
    display: block; 
    width: 19px; 
}
.pageCart .gridCart .methodDelivery h2 svg :is(line, polyline, path){ stroke-width: 19px; stroke: var(--c-purple); }
.pageCart .gridCart .methodDelivery h2 span:hover{ color: var(--c-purple-hover); }
.pageCart .gridCart .methodDelivery h2 span:hover :is(line, polyline, path){ stroke: var(--c-purple-hover); }

.pageCart .gridCart .methodDelivery ul{
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
    gap: 10px;
}

.pageCart .gridCart .methodDelivery ul.hide{ display: none; }

.pageCart .gridCart .methodDelivery ul li{
    width: auto;
    padding: 12px 12px 14px 12px;
    border: 1px solid var(--c-silver);
    cursor: pointer;

    background: var(--c-white);
    border-radius: 12px;
}

.pageCart .gridCart .methodDelivery ul li:hover{ border-color: var(--c-purple); }

.pageCart .gridCart .methodDelivery ul li .time{
    font-size: 14px;
    font-weight: 500;
    color: var(--c-platinum);
    text-align: right;
}

.pageCart .gridCart .methodDelivery ul li .title{
    font-size: 15px;
    font-weight: 700;
    margin-top: 16px;
}

.pageCart .gridCart .methodDelivery ul li .title span{ color: var(--c-purple); }


.pageCart .gridCart .methodDelivery .activeMethod{
    display: block;
    margin-top: 20px;
}

.pageCart .gridCart .methodDelivery .activeMethod .method{
    background: var(--c-purple);
    border-radius: 12px;
    padding: 20px 16px;

    display: none;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    align-items: center;

    color: var(--c-white);
}

.pageCart .gridCart .methodDelivery .activeMethod .method.active{ display: grid; }

.pageCart .gridCart .methodDelivery .activeMethod .method .title{
    font-size: 18px;
    font-weight: 700;
}

.pageCart .gridCart .methodDelivery .activeMethod .method .title span{ text-decoration: underline; }

.pageCart .gridCart .methodDelivery .activeMethod .method .info{
    border-left: 1px solid var(--c-white);
    padding-left: 20px;
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 20px;
}

.pageCart .gridCart .methodDelivery .activeMethod .method .info .btn{
    display: flex;
    align-items: center;
    justify-content: end;
}

.pageCart .gridCart .methodDelivery .activeMethod .method .info button{
    border-radius: 5px;
    background: var(--c-white);
    padding: 12px;
    color: var(--c-purple);
    display: block;
    
    font-size: 14px;
    font-weight: 700;
    text-align: center;

    cursor: pointer;
}

.pageCart .gridCart .methodDelivery .activeMethod .method .info button:hover{ background: var(--c-purple-hover); color: var(--c-white); }

.pageCart .gridCart .methodDelivery .activeMethod .method .info p{
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.pageCart .gridCart .methodDelivery .activeMethod .method .info p span{
    border: 1px solid var(--c-white);
    padding: 4px 6px;
    font-size: 10px;
    font-weight: 500;
    border-radius: 5px;
    margin-right: 4px;
    opacity: .55;
}

.pageCart .gridCart .methodDelivery .activeMethod .method select{
    background: var(--c-white);
    border-radius: 8px;
    padding: 12px;
    width: calc(100% - 24px);
    border: 1px solid var(--c-silver);
    font-size: 14px;
    font-weight: 500;
    color: var(--c-blacl-l-1);
    cursor: pointer;
    margin-top: 15px;
}

.pageCart .gridCart .methodDelivery ul li.active{
    background: var(--c-purple);
    color: var(--c-white);
}

.pageCart .gridCart .methodDelivery ul li.active .time{ color: var(--c-white); }
.pageCart .gridCart .methodDelivery ul li.active span{ color: var(--c-white); }


.pageCart .gridCart .methodPay{
    margin-top: 40px;
}

.pageCart .gridCart .methodPay h2{
    font-size: 30px;
    font-weight: 700;
}

.pageCart .gridCart .methodPay ul{
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
    gap: 10px;
}

.pageCart .gridCart .methodPay ul li{
    width: auto;
    padding: 20px 12px;
    border: 1px solid var(--c-silver);
    cursor: pointer;

    background: var(--c-white);
    border-radius: 12px;
}

.pageCart .gridCart .methodPay ul li p{
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.pageCart .gridCart .methodPay ul li span{
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    display: block;
    color: var(--c-gray);
}

.pageCart .gridCart .methodPay ul li:hover{ border-color: var(--c-blue); }

.pageCart .gridCart .methodPay ul li.active{ background: var(--c-blue); }
.pageCart .gridCart .methodPay ul li.active p{ color: var(--c-white); }
.pageCart .gridCart .methodPay ul li.active span{ color: var(--c-white); } 


.pageCart .gridCart .formInfo{
    margin-top: 40px;
}

.pageCart .gridCart .formInfo h2{
    font-size: 30px;
    font-weight: 700;
}

.pageCart .gridCart .formInfo form{
    display: block;
    margin-top: 20px;
}

.pageCart .gridCart .formInfo form fieldset{
    display: block;
}

.pageCart .gridCart .formInfo form .formGrid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;

    margin-bottom: 16px;
}

.pageCart .gridCart .formInfo form .formGrid.el3{
    grid-template-columns: 1fr 1fr 1fr;
}

.pageCart .gridCart .formInfo form .formGrid.el2{
    grid-template-columns: 282px 660px;
}

.pageCart .gridCart .formInfo form input,
.pageCart .gridCart .formInfo form select{
    background: var(--c-white);
    border-radius: 8px;
    padding: 12px;
    width: calc(100% - 24px);
    border: 1px solid var(--c-silver);
    font-size: 14px;
    font-weight: 500;
}

.pageCart .gridCart .formInfo form select{ cursor: pointer; }

.pageCart .gridCart .formInfo form input:hover{ border-color: var(--c-platinum); }
.pageCart .gridCart .formInfo form select:hover{ border-color: var(--c-platinum); }

.pageCart .gridCart .formInfo form input:focus{ border-color: var(--c-purple); }
.pageCart .gridCart .formInfo form select:focus{ border-color: var(--c-purple); }

.pageCart .gridCart .formInfo form input:disabled{ opacity: .3; }

.pageCart .gridCart .formInfo form .formGrid.el3.fileUpload{
    grid-template-columns: 282px 1fr;
}

.pageCart .gridCart .formInfo form .inputUpload{ display: flex; align-items: center; }

.pageCart .gridCart .formInfo form .fileUpload .inputUpload{ display: none; }
.pageCart .gridCart .formInfo form .inputUpload input{ display: none; }

.pageCart .gridCart .formInfo form .inputUpload p{
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;

    margin-left: 10px;
}

.pageCart .gridCart .formInfo form .inputUpload p span{ 
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: var(--c-purple-hover);
    border-radius: 200px;
    width: 20px;
    height: 20px;
}

.pageCart .gridCart .formInfo form .inputUpload p span svg{ width: 12px; } 
.pageCart .gridCart .formInfo form .inputUpload p span svg :is(polyline){ stroke-width: 35px; stroke: var(--c-white); } 

.pageCart .gridCart .formInfo form .inputUpload svg{ width: 20px; text-decoration: none; }
.pageCart .gridCart .formInfo form .inputUpload svg :is(path){ stroke-width: 21px; stroke: var(--c-black); }

.pageCart .gridCart .formInfo form .inputUpload p:hover{ color: var(--c-purple-hover); }
.pageCart .gridCart .formInfo form .inputUpload p:hover svg :is(path){ stroke: var(--c-purple-hover); }

#checkDeliSelfStorage{ display: none; }


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

.emptyCart{
    height: 60vh;

    display: flex;
    align-items: center;
    justify-content: center;
}

.emptyCart .ecBox{ text-align: center; margin-top: 128px; }

.emptyCart .ecBox img{ margin: auto; }
.emptyCart .ecBox svg{ width: 42px; margin: auto; }
.emptyCart .ecBox svg :is(line, circle, polyline, path){ stroke-width: 19px; }

.emptyCart .ecBox h1{ font-size: 30px; font-weight: 700; margin: 20px auto 4px; color: var(--c-blacl-l-1); }

.emptyCart .ecBox p{ color: rgba(40, 40, 40, 0.55); font-size: 16px; font-weight: 700; }

.emptyCart .ecBox a{
    display: inline-block;
    margin-top: 20px;
    background: var(--c-purple);
    width: 150px;
    padding: 16px 40px;

    font-weight: 700;
    font-size: 18px;

    border-radius: 7px;

    color: var(--c-white);
}

.emptyCart .ecBox a:hover{ background: var(--c-purple-hover); }


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

.rootModal{
    position: fixed;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    z-index: 99;

    display: none;
    align-items: center;
    justify-content: center;
}

.rootModal.show{ display: flex; }

.rootModal .modalShadow{
    position: fixed;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, .8);
}

.rootModal .content{
    width: 820px;
    margin: auto;
    background: var(--c-white);
    border-radius: 20px;
    padding: 40px;

    position: relative;
    z-index: 2;

    display: none;
}

.rootModal .content.show{ display: block; }

.rootModal .content .close{
    position: absolute;
    top: 20px;
    right: 20px;

    width: 32px;
    cursor: pointer;
}

.rootModal .content .close svg{ width: 100%; }
.rootModal .content .close svg :is(line){ stroke-width: 21px; } 

.rootModal .content .title{
    font-size: 28px;
    font-weight: 700;
}

.rootModal .content .title span{
    text-decoration: underline;
}

.rootModal .content .title p{
    color: var(--c-platinum);
    font-weight: 500;
    font-size: 20px;
}

.rootModal .content .form{
    margin-top: 32px;
    width: 100%;
}

.rootModal .content .form form{ width: 100%; }
.rootModal .content .form form fieldset{ width: 100%; }

.rootModal .content .form input{
    display: block;
    padding:12px;
    border: 1px solid var(--c-silver);

    width: calc(100% - 24px);

    margin-bottom: 8px;

    font-size: 16px;
    font-weight: 500;

    border-radius: 5px;
}

.rootModal .content .form input:focus{ border-color: var(--c-purple-hover); }

.rootModal .content .form button{
    margin-top: 16px;
    border-radius: 5px;
    color: var(--c-white);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;

    background: var(--c-purple);
    padding: 12px 32px;
}

.rootModal .content .form button:hover{ background: var(--c-purple-hover); }


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

.rootModal #deliveryMap{
    padding: 0px;
    overflow: hidden;
    width: 95%;
    max-width: 1400px;
}

.rootModal #deliveryMap .deliveryGrid{
    display: grid;
    grid-template-columns: 1fr 550px;
}

.rootModal #deliveryMap .deliveryGrid .map{ width: 100%;  }
.rootModal #deliveryMap .deliveryGrid .map img{ display: block; width: 100%; height: 100%; object-fit: cover; }

.rootModal #deliveryMap .deliveryGrid .info{
    margin-top: 30px;
    padding: 40px;
}
.rootModal #deliveryMap .deliveryGrid .info h1{
    font-weight: 700;
    font-size: 20px;
}

.rootModal #deliveryMap .deliveryGrid .info ul{
    display: block;
    margin-top: 40px;
}

.rootModal #deliveryMap .deliveryGrid .info ul li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: bold;
}

.rootModal #deliveryMap .deliveryGrid .info ul li span{
    border-radius: 5px;
    padding: 5px 10px;
    display: inline-block;
}

.rootModal #deliveryMap .deliveryGrid .info ul li .col_1{ background: #0A4AFA; color: var(--c-body); }
.rootModal #deliveryMap .deliveryGrid .info ul li .col_2{ background: #823CD5; color: var(--c-body); }
.rootModal #deliveryMap .deliveryGrid .info ul li .col_3{ background: #FF7700; color: var(--c-body); }
.rootModal #deliveryMap .deliveryGrid .info ul li .col_4{ background: #EFAB00; color: var(--c-body); }
.rootModal #deliveryMap .deliveryGrid .info ul li .col_5{ background: #008917; color: var(--c-body); }
.rootModal #deliveryMap .deliveryGrid .info ul li .col_6{ background: #02AB9D; color: var(--c-body); }
.rootModal #deliveryMap .deliveryGrid .info ul li .col_7{ background: #DB0000; color: var(--c-body); }

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

.gridContact{ margin: 40px 0px; }
.gridContact h1{ font-weight: 700; font-size: 30px; }

.gridContact .delivery{
    width: 100%;
    padding: 20px 0px;
    font-size: 19px;
    font-weight: 600;
    text-align: center;
    background: #823CD5;
    background: linear-gradient(90deg, rgba(130, 60, 213, 1) 0%, rgba(103, 208, 244, 1) 100%);
    color: var(--c-body);
    border-radius: 11px;
    cursor: pointer;
}

.gridContact .delivery:hover{ background: #823CD5; }

.gridContact ul.contact{ margin-top: 40px; display: block; }
.gridContact ul.contact li{ min-width: 300px; padding-top: 70px; margin-top: 70px; overflow: hidden; border-top: 1px solid var(--c-silver); display: block; }
.gridContact ul.contact li .name{ margin: 20px; }
.gridContact ul.contact li .title{ font-size: 20px; font-weight: 600; }
.gridContact ul.contact li .tit{ font-size: 18px; font-weight: 600; margin-top: 15px; margin-bottom: 3px; }
.gridContact ul.contact li span{ font-size: 16px; display: block; }
.gridContact ul.contact li span a{ margin: 5px 0px; display: block; }

.gridContact ul.contact li:first-child{  padding-top: 0px; margin-top: 40px; border-top: 1px solid transparent; }


.gridContact ul.contact li h2{ font-size: 30px; font-weight: 700; margin-bottom: 32px; }
.gridContact ul.contact li .map{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
} 

.gridContact ul.contact li .map .frame{
    border-radius: 7px;
    width: 100%;
    height: 411px;
    overflow: hidden;
}

.gridContact ul.contact li .map .icon{
    border-radius: 7px;
    overflow: hidden;
}

.gridContact ul.contact li .map .icon img{ width: 100%; height: 100%; display: block; }

.gridContact ul.contact li .info{
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.gridContact ul.contact li .info .item h3{
    font-size: 25px;
    font-weight: 700;
}

.gridContact ul.contact li .info .item .sub{
    margin: 20px 0px;
}

.gridContact ul.contact li .info .item .sub span{
    color: var(--cd-platinum);
    font-size: 14px;
    font-weight: 500;
    display: block;
    margin-bottom: 5px;
}

.gridContact ul.contact li .info .item .sub p{
    font-size: 18px;
    font-weight: 700;
    margin: 5px 0px;
}

.gridContact ul.contact li .info .item .sub p a{ text-decoration: underline; }

.gridContact .ctrl{
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 20px;
}

.gridContact .ctrl a{
    border-radius: 5px;
    font-size: 17px;
    color: var(--c-body);
    padding: 12px 30px;
    font-weight: 600;

    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;

    background: var(--c-purple);
}

.gridContact .ctrl a svg{ width: 16px; transform: rotate(45deg); }
.gridContact .ctrl a svg :is(line, polyline){ stroke-width: 29px; stroke: var(--c-body); } 

.gridContact .ctrl a.blue{ background: var(--c-blue); }
.gridContact .ctrl a.blue svg{ transform: rotate(225deg); } 

.gridContact .ctrl a:hover{ background: var(--c-purple-hover); }
.gridContact .ctrl a.blue:hover{ background: var(--c-purple-hover); }

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

.phoneBlock{ background: #F3F3F3; padding: 10px 0px; }
.phoneBlock .wrap{ display: grid; grid-template-columns: 1fr 200px 200px 200px; gap: 50px; }

.phoneBlock .wrap .phone{ display: grid; grid-template-columns: 24px 1fr; gap: 15px; text-align: right; }
.phoneBlock .wrap .ico{ display: grid; }
.phoneBlock .wrap .ico svg{ width: 24px; margin: auto; }

.phoneBlock .wrap .workTime{ font-size: 14px; margin: auto 0px; }

.phoneBlock .wrap .phone a{ font-size: 19px; font-weight: 600; }

.phoneBlock .wrap .email{ margin: auto; }
.phoneBlock .wrap .email a{ font-size: 19px; font-weight: 600; }

.phoneBlock .wrap .workTime p a{ color: #FA6900; }
.phoneBlock .wrap .workTime p a:hover{ color: #000; }

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

.gTopLine{ background: #F3F3F3; padding: 10px 0px; }
.gTopLine .clampWrap, .gTopLine .wrap{ display: grid; grid-template-columns: 1fr 300px; }

.gTopLine .menu ul{ display: flex; }
.gTopLine .menu ul li{ margin-right: 50px; }
.gTopLine .menu ul li a{ color: #000; font-size: 16px; }
.gTopLine .menu ul li a:hover{ color: #FA6900; }

.gTopLine .login{ text-align: right; }
.gTopLine .login a{ color: #000; font-size: 16px; }
.gTopLine .login a:hover{ color: #FA6900; }

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

.header{ margin: 0px; padding: 20px 0px; }

.header .clampWrap, .header .wrap{ display: grid; grid-template-columns: 200px 1fr 300px; grid-column-gap: 25px; }

.header .search{ margin: auto 0px; }
.header .search form{ width: 100%; margin: auto; }
.header .search form fieldset{ position: relative; }
.header .search form input[type="text"]{ border: 1px solid #C4C4C4; border-radius: 300px; width: calc(100% - 30px); outline: none; padding: 15px; font-size: 16px; font-weight: 600; }
.header .search form input[type="text"]::placeholder{ font-weight: 400; }
.header .search form button{ width: 100px; height: 100%; outline: none; border: 0px solid #FFF; position: absolute; top: 0px; right: -2px; background: #FA6900 url(../ico/ico.search.svg) center no-repeat; border-radius: 300px; cursor: pointer; }

.header .registerInfo{  display: grid; }
.header .registerInfo ul{ display: grid; grid-template-columns: 1fr 1fr 1fr; background: #F3F3F3; overflow: hidden; border-radius: 300px; }
.header .registerInfo ul li{ margin: auto; width: 100%; position: relative; }
.header .registerInfo ul li img{ display: block; margin: auto; } 
.header .registerInfo ul li a{ display: block; width: 100%; cursor: pointer; text-align: center; padding: 18px 0px; }
.header .registerInfo ul li a:hover{ background: #e4e4e4; }

.header .registerInfo ul li .countCart{ width: 24px; height: 24px; border-radius: 200px; text-align: center; background: #FA6900; display: grid; color: #FFF; position: absolute; right: 10px; top: 10px; }


.topMarket{ display: flex; justify-content: flex-end; grid-column-gap: 15px; margin-bottom: 25px;  }
.topMarket .capt{ margin: auto 0px; }
.topMarket ul{ display: flex; justify-content: center; gap: 0px; }
.topMarket img{ border-radius: 200px; width: 152px; display: block; border: 3px solid #FFF; transition: border-color .3s ease; }
.topMarket img:hover{ border-color: #FA6900; }

.bread{ margin: 25px 0px; }
.bread h1{ margin: auto 0px; }

.breadGrid{ display: grid; grid-template-columns: 1fr 150px; margin: 15px 0px 25px;}
.breadGrid h1{ margin: auto 0px; }

.listCat{ margin: 0px; }
.listCat ul{ display: flex; flex-wrap: wrap; }
.listCat ul li{ margin-right: 10px; }
.listCat ul li:nth-child(2n){ font-size: 18px; position: relative; top: -2px; }


.changeView{ display: flex; justify-content: end;}
.changeView svg{ width: 26px; height: 36px; display: block; }
.changeView line{ stroke: #777; }

.changeView div{ margin-left: 10px; padding: 7px 10px; cursor: pointer; transition: .4s; border-radius: 5px; }
.changeView div:hover{ background: #F3F3F3; }
.changeView div:hover line{ stroke: #FA6900; }

.changeView div.actv{ background: #F3F3F3; }
.changeView div.actv line{ stroke: #FA6900; }








.categoryDef{ margin: 0px;}
.categoryDef ul{ margin: 0px; overflow: hidden; border-radius: 15px; }
.categoryDef ul li{ background: #F2F2F2; border-bottom: 2px solid #FFF; font-size: 18px; transition: .4s; }

.categoryDef ul li.listCatOpen{ display: none; grid-template-columns: 1fr 40px; gap: 10px; padding: 10px 20px; font-weight: 700; cursor: pointer; }
.categoryDef ul li.listCatOpen span{ margin: auto 0px; }
.categoryDef ul li.listCatOpen svg{ width: 40px; }

.categoryDef ul li.listCatOpen:hover, .categoryDef ul li.listCatOpen.actv{ background: #FA6900; color: #FFF; }
.categoryDef ul li.listCatOpen:hover polyline, .categoryDef ul li.listCatOpen:hover line{ stroke: #FFF; }
.categoryDef ul li.listCatOpen.actv polyline, .categoryDef ul li.listCatOpen.actv line{ stroke: #FFF; }

.categoryDef ul li a{ padding: 20px; display: block; font-weight: 600; }
.categoryDef ul li a:hover, .categoryDef ul li a.actv{ color: #FFF; background: #FA6900; }

.categoryDef ul li .sub{ background: #FFF; display: none; }
.categoryDef ul li .sub a{ font-weight: 400; background: #FFF; padding-left: 20px; display: block; }
.categoryDef ul li .sub a:hover{ color: #000; background: #f8f8f8; }

.categoryDef ul li .sub a.actv{ font-weight: 600; color: #000; background: #f8f8f8; }

.categoryDef ul li.actv{ background: #FA6900; color: #f8f8f8; }
.categoryDef ul li.actv a{ color: #f8f8f8; }
.categoryDef ul li.actv .sub{ display: block; }
.categoryDef ul li.actv .sub a{ color: #000; }

.categoryDef ul li .sub .it.actv a{ color: #000; background: #f8f8f8; font-weight: 700;  } 

.categoryDef ul li .sub .it .subIt a{ padding: 15px 15px 15px 40px; font-weight: 500; font-size: 16px; }
.categoryDef ul li .sub .it .subIt a:hover{ font-weight: 600;}
.categoryDef ul li .sub .it .subIt.actv a{ font-weight: 700;  } 


.categoryDef ul li.invis{ display: block; }

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

.modalShopCart{ position: fixed; top: 0px; right: 0px; width: 100%; height: 100%; background: rgba(0,0,0,.7); z-index: 999; display: none; }

.modalShopCart .closeModal{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 8; cursor: pointer; }

.modalShopCart .boxCart{ position: fixed; width: 520px; height: 100%; top: 0px; right: 0px; background: #FFF; z-index: 9; overflow-x: hidden; overflow-y: auto; margin-bottom: 100px; } 

.modalShopCart .boxCart .capt{ padding: 25px 25px; font-size: 20px; font-weight: 500; background: #EEE; display: grid; grid-template-columns: 1fr 32px; grid-column-gap: 15px; }
.modalShopCart .boxCart .capt svg{ cursor: pointer; }
.modalShopCart .boxCart .capt span{ margin: auto 0px; }

.modalShopCart .boxCart .goods ul{ margin: 25px; margin-bottom: 175px; }
.modalShopCart .boxCart .goods ul li{ display: grid; grid-template-columns: 75px 1fr; grid-column-gap: 25px; border-bottom: 1px solid #EEE; padding-bottom: 25px; margin-bottom: 25px; }
.modalShopCart .boxCart .goods ul li .ico{ width: 100%; }
.modalShopCart .boxCart .goods ul li .ico img{ width: 100%; display: block; border-radius: 5px; }

.modalShopCart .boxCart .goods ul li .descr{ margin: auto 0px; }

.modalShopCart .boxCart .goods ul li .name{ font-size: 14px; font-weight: 600; line-height: 20px; }

.modalShopCart .boxCart .goods ul li .sku{ margin-top: 20px; font-size: 14px; } 
.modalShopCart .boxCart .goods ul li .sku span{ padding: 10px 20px; font-weight: 600; background: #EEE; border-radius: 200px; }

.modalShopCart .boxCart button{ background: #FA6900; color: #F6F6F6; box-shadow: rgba(100, 100, 111, 0.7) 0px 7px 29px 0px; position: fixed; bottom: 25px; transition: .4s; font-weight: 500; border-radius: 200px; font-size: 16px; border: none; outline: none; padding: 20px 0px; width: 250px; margin: 25px 135px; cursor: pointer; }
.modalShopCart .boxCart button:hover{ background: #181c26; } 

.modalShopCart .boxCartLoader{ display: grid; width: 520px; height: 100%; position: fixed; top: 0px; right: 0px; background: #FFF; }
.modalShopCart .boxCartLoader img{ margin: auto; width: 75px; } 


.alertBox{ background: #ffd60a; text-align: center; padding: 15px; font-size: 18px; color: #181c26; }



.shopCartCircle{ width: 75px; height: 75px; border-radius: 200px; display: grid; position: fixed; right: 50px; bottom: 50px; background: #EEE; animation: pulse 1.5s infinite; cursor: pointer; transition: .4s; }
.shopCartCircle svg{ margin: auto; display: block; width: 60%; }
.shopCartCircle .count{ width: 24px; height: 24px; border-radius: 200px; text-align: center; background: #FA6900; display: grid; color: #FFF; position: absolute; right: 0px; top: 0px; }
.shopCartCircle .count span{ margin: auto; font-size: 14px; }

.shopCartCircle:hover{ background: #FA6900; }
.shopCartCircle:hover svg{ fill: #FFF; }

.goodsPage{ margin: 150px 0; min-height: 800px; text-align: center; }
.goodsPage .textGoodsPage .caption{ font-size: 40px; }
.goodsPage .textGoodsPage .caption span{ color: var(--c-purple-hover); }
.goodsPage .textGoodsPage .caption p{ font-size: 28px; margin-top: 20px; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(93, 118, 143, 0.7); }
    70% { box-shadow: 0 0 0px 7px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}


.megaSale{ background: #F2F2F2; border-radius: 15px; margin-bottom: 15px; overflow: hidden; transition: .3s; }
.megaSale .ico{ 
    background: hsla(25, 100%, 49%, 1);
    background: radial-gradient(circle, hsla(25, 100%, 49%, 1) 0%, hsla(39, 89%, 65%, 1) 100%);
    background: -moz-radial-gradient(circle, hsla(25, 100%, 49%, 1) 0%, hsla(39, 89%, 65%, 1) 100%);
    background: -webkit-radial-gradient(circle, hsla(25, 100%, 49%, 1) 0%, hsla(39, 89%, 65%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FA6900", endColorstr="#F5BE59", GradientType=1 );
}
.megaSale .ico a{ padding: 0px; transition: .3s; }
.megaSale .ico img{ display: block; width: 100%; }
.megaSale a{ padding: 20px; display: block; font-size: 16px; font-weight: 600; }
.megaSale a.actv{ background: #FA6900; color: #FFF; }