﻿:root {
	--color-gr-m: #2ec4b6;
	--color-gr-s: #cbf3f0;
	--color-or-m: #ff9f1c;
	--color-or-s: #ffbf69;
	--color-rd-m: #d37070;
	--color-rd-s: #db9797;
}

*, *:before, *:after { border: 0; margin: 0; padding: 0; outline: 0; box-sizing: border-box; }

body { background-color: #fff; color: #000; font-family: Manrope, sans-serif; font-size: 14px; font-weight: normal; line-height: 30px; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
strong, b { font-weight: bold; }
a { background-color: transparent; color: #278cbd; }
a:active, a:hover { outline: 0; }
img { border: 0; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; }

h1 { margin: 20px 0px; padding: 0; color: #000; font-size: 28px; font-weight: 400; line-height: normal; }
h2 { margin: 20px 0px; padding: 0; color: var(--color-or-m); font-size: 16px; font-weight: 700; line-height: normal; text-transform: uppercase; }
h3 { margin: 10px 0px; padding: 0; color: #f18f38; font-size: 16px; font-weight: 600; line-height: normal; text-transform: uppercase; }
h4 { margin: 30px 0px; padding: 0; color: var(--color-gr-m); font-size: 16px; font-weight: 400; letter-spacing: 1px; line-height: normal; text-transform: uppercase; }
h5 { margin: 10px 0px; padding: 0; color: var(--color-or-m); font-size: 16px; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; }
p { margin: 10px 0px; padding: 0; }
ul { margin: 10px 40px; }
li { margin: 10px 0px; }

.fl-l { float: left; }
.fl-r { float: right; }
.ta-l { text-align: left; }
.ta-r { text-align: right; }
.ta-c { text-align: center; }
.big { color: #d76565; font-size: 64px; font-weight: 700; }
.m-70-0 { margin: 70px 0px; }
.m-b-20 { margin-bottom: 20px; }
.m-20 { margin: 20px 0px; }
a.a-local { border-bottom: 1px dashed #278cbd; text-decoration: none; }
.cf:after{ content: ""; display: table; clear:both; }

 /* ----- */

input, select { margin: 0; padding: 0px 10px; border: 1px solid #eee; background-color: #f9f9f9; color: #536e84; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 38px; height: 40px; }
input[type=text] { -webkit-appearance: none; }
input:focus, select:focus { border-color: #f18f38; }

.form-line { margin-bottom: 15px; }
.form-line label { display: block; color: #666; font-size: 13px; letter-spacing: 1px; line-height: 25px; text-transform: lowercase; }
.form-line input, .form-line select { width: 100%; }
.form-line .form-err { margin: 0; padding: 0; color: #d76565; font-size: 13px; letter-spacing: 1px; line-height: 20px; text-transform: lowercase; }
.form-line .form-cb { color: #666; font-size: 13px; letter-spacing: 1px; line-height: 25px; text-transform: lowercase; }
.form-line .form-cb input[type=checkbox] { width: auto; margin-right: 10px; vertical-align: middle; }

a.btn, input.btn { display: inline-block; margin: 0; padding: 0px 20px; border: 1px solid var(--color-gr-m); background-color: #fff; color: var(--color-gr-m); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 38px; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; -webkit-appearance: none; transition: 0.3s ease all; }
a.btn:hover, input.btn:hover{ background-color: var(--color-gr-m); color: #000; }

input.btn.btn2order { width: 100%; border: 1px solid var(--color-gr-m); background-color: var(--color-gr-m); color: #fff; font-weight: bold; letter-spacing: 2px; }
input.btn.btn2order:hover { background-color: #fff; color: var(--color-gr-m); }

a.btn.btn-bonus-set { border-color: var(--color-or-m); background-color: var(--color-or-m); color: #fff; font-size: 12px; font-weight: 300; line-height: 23px; text-transform: lowercase; }
a.btn.btn-bonus-set:hover { border-color: var(--color-or-s); background-color: var(--color-or-s); }
a.btn.btn-bonus-del { border-color: var(--color-rd-m); background-color: var(--color-rd-m); color: #fff; font-size: 12px; font-weight: 300; line-height: 23px; text-transform: lowercase; }
a.btn.btn-bonus-del:hover { border-color: var(--color-rd-s); background-color: var(--color-rd-s); }
a.btn.btn-load { width: 100%; border: none; background-color: #f9f9f9; color: #000; font-weight: 300; }
a.btn.btn-load:hover{ background-color: #eee; }
input.btn.btnpay, a.btn.btnpay { border: 1px solid var(--color-gr-m); background-color: var(--color-gr-m); color: #000; font-weight: bold; }
input.btn.btnpay:hover, a.btn.btnpay:hover { background-color: #fff; color: var(--color-gr-m); }

.btn-like-brand { display: inline-block; padding: 0px 10px; background-color: var(--color-gr-s); color: #000; font-size: 12px; line-height: 32px; text-decoration: none; }
.btn-like-brand:hover { color: #000; background-color: #eee; }

/* ----- */

header { padding: 20px 0px; transition: 0.3s; background-color: var(--color-gr-m); }
menu { background-color: var(--color-gr-s); }
section { padding-bottom: 30px; }
.data { min-width: 320px; max-width: 1216px; margin: 0px auto; padding: 0px 16px; }

/* ----- */

#scroll2Top { position: fixed; top: 32px; right: 32px; z-index: 100; display: none; border-radius: 5px; padding: 0px 15px; background-color: #104c4e; color: #ccc; font-size: 12px; line-height: 30px; opacity: 0.6; cursor: pointer; transition: opacity .5s ease; letter-spacing: 1px; }
#scroll2Top:hover { color: #fff; opacity: 1; }

/* ----- */

header .data{ display: flex; flex-flow: row nowrap; align-items: center; }

.mobile-btnopen { display: none; padding-right: 16px; }
.mobile-btnopen span { display: block; width: 20px; height: 1px; background-color: #fff; }
.mobile-btnopen span + span { margin-top: 4px; }

.logo { margin-right: auto; color: #fff; font-family: 'Gotham', sans-serif; font-size: 28px; font-weight: 900; text-decoration: none; }
.slogan { padding: 0px 8px; color: #fff; font-size: 12px; font-weight: 300; line-height: 15px; text-align: right; }
.icon { position: relative; display: inline-block; width: 40px; height: 40px; padding: 8px 0px; margin-left: 8px; line-height: normal; text-align: center; }
.icon:hover { background-color: var(--color-gr-s); }
.icon img { width: 24px; height: 24px; }
.icon.hdi-phone { display: none; }
.top-count { position: absolute; bottom: 0; right: 0; display: inline-block; min-width: 18px; min-height: 18px; border-radius: 50%; background-color: #fff; color: #222; font-size: 10px; font-weight: 300; line-height: 18px; text-align: center; opacity: 0.9; }
.phone { padding: 0px 20px; background-color: var(--color-gr-s); color: #000; font-size: 14px; font-weight: 700; line-height: 40px; }

/* ----- */

/* #filter-panel, #mobile-panel { } */
.slide-panel { position: fixed; top: 0; left: 0; z-index: 3; overflow-x: hidden; width: 0; height: 100%; background-color: #fff; transition: 0.2s; }
.slide-top { display: flex; flex-flow: row nowrap; align-items: center; margin: 10px; }
.slide-logo { margin-right: auto; color: #000; font-family: 'Gotham', sans-serif; font-size: 18px; font-weight: 900; text-decoration: none; }
.slide-btn-close { width: 16px; height: 16px; line-height: 16px; text-decoration: none; }

/* ----- */

section.find-top { display: none; border-bottom: 1px solid #eee; padding: 10px 0px; background-color: #f9f9f9; }
.find-form { margin: 20px 0px; }
.find-top form, .find-form form { position: relative; width: 100%; }
.find-top input, .find-form input { width: 100%; border: 1px solid #eee; padding: 0px 50px 0px 15px; background: #fff; letter-spacing: 1px; }
.find-top button, .find-form button { position: absolute; top: 11px; right: 25px; width: 20px; height: 20px; border: 0; padding: 0; outline: 0; background-color: #fff; background-image: url(/img/top/find.svg); background-repeat: no-repeat; cursor: pointer; }

/* ----- */

menu { position: relative; }
menu > ul { display: flex; flex-flow: row nowrap; justify-content: flex-start; list-style: none; }
menu > ul > li { margin: 0px 20px 0px 0px; padding: 0; line-height: 40px; }
menu > ul > li:last-child { margin: 0px 0px 0px auto; }
menu > ul > li > a { color: #000; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; }
menu > ul > li:hover > a { color: var(--color-gr-m); }
menu > ul > li:hover > .dd-div { display: block; }

.dd-div { position: absolute; left: 0; right: 0; z-index: 1; display: none; padding: 20px 0px; border-bottom: 5px solid var(--color-gr-m); background-color: #fff; }
.dd-ul { margin: 0; padding: 0; list-style: none; column-count: 6; -webkit-column-count: 6; -moz-column-count: 6; }
.dd-ul > li { margin: 0; padding: 0; line-height: 26px; }
.dd-ul > li > a { color: #000; text-decoration: none; }
.dd-ul > li > a:hover { text-decoration: underline; }

#mobile-panel > ul { margin: 10px 0px; padding: 0; list-style: none; }
#mobile-panel > ul > li { display: block; border-top: 1px solid #fff; margin: 0px 10px; padding: 0; background-color: #f9f9f9; line-height: 36px; }
#mobile-panel > ul > li:first-child { border-top: none; }
#mobile-panel ul li:hover { background-color: #eee; }
#mobile-panel ul li a { padding: 0px 8px; color: #000; font-size: 16px; font-weight: 700; text-decoration: none; }
#mobile-panel ul ul { display: none; margin: 0; padding: 0; background-color: #fff; list-style: none; }
#mobile-panel ul ul li { display: block; border-bottom: 1px solid #eee; margin: 0; padding: 0px 8px; }
#mobile-panel ul ul li:last-child { border-bottom: none; }
#mobile-panel ul ul li a { color: #000; font-size: 16px; font-weight: 300; line-height: 26px; text-decoration: none; }

@media only screen and (max-width : 1216px) { menu > ul > li > a { font-size: 12px; letter-spacing: 0px; } }
@media only screen and (max-width : 1072px) { menu > ul > li > a { font-size: 11px; } }
@media only screen and (max-width : 992px) { menu > ul > li { margin: 0px 10px 0px 0px; } }
@media only screen and (max-width : 864px) {
	header { padding: 10px 0px; }
	.mobile-btnopen { display: block; }
	a.logo { font-size: 18px; }
	.phone, .slogan { display: none; }
	.icon.hdi-phone { display: inline-block; }
	menu { display: none; }
}
@media only screen and (max-width : 544px) {
	.logo { flex: 1 1 auto; }
}
@media only screen and (max-width : 480px) {
	.icon.hdi-phone { display: none; }
}

/* ----- */

footer > * { padding: 40px 0px; }
footer .info { background-color: var(--color-gr-s); }
footer .pe { background-color: #fff; }
footer .brands { background-color: var(--color-gr-s); }
footer .last { background-color: #fff; padding: 20px 0px; }
footer h5 { color: #000; font-weight: bold; }
footer a { color: #000; text-decoration: none; }
footer a:hover { color: #000; border-bottom: 1px solid #000; }
footer ul { margin: 0; padding: 0; list-style: none; }
footer ul li { margin: 0; padding: 0; }
footer .info ul li { display: inline-block; padding-right: 10px; }
footer .brands ul { column-count: 6; -webkit-column-count: 6; -moz-column-count: 6; }
footer .pe p { font-weight: 300; font-size: 28px; text-align: center; }
footer .last .data { display: flex; flex-flow: row wrap; align-items: center; }
footer .last p { flex-grow: 1; color: var(--color-gr-m); font-size: 12px; line-height: normal; }
footer .last p:last-child{ text-align: right; }
@media only screen and (max-width : 896px) {
	footer .brands ul { column-count: 4; -webkit-column-count: 4; -moz-column-count: 4; } }
@media only screen and (max-width : 496px) {
	footer .brands ul { column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; }
	footer .last p { width: 100%; text-align: center; }
	footer .last p:last-child{ text-align: center; }
}

/* ----- */

ul.breadcrumb { margin: 15px 0px; padding: 0; list-style: none; }
ul.breadcrumb li { display: inline-block; margin: 0; padding: 0; line-height: 25px; color: #278cbd; font-size: 12px; text-transform: lowercase; }
ul.breadcrumb li.sp { padding: 0px 5px; font-size: 10px; }
ul.breadcrumb li a { color: #278cbd; text-decoration: none; }
ul.breadcrumb li a:hover { border-bottom: 1px solid #278cbd; }
ul.breadcrumb li b { color: #d76565; }

.brandcat { margin: 20px 0px; font-size: 12px; }
.brandcat * { display: inline-block; margin: 0px 5px 5px 0px; padding: 0px 5px; border: 1px solid var(--color-gr-s); text-transform: lowercase; }
.brandcat b { padding-left: 0px; border-color: #fff; background-color: #fff; color: #000; }
.brandcat a { color: #000; text-decoration: none; }
.brandcat span, .brandcat a:hover { background-color: var(--color-gr-s); color: #000; }

/* ----- */

.pages { margin: 20px 0px; text-align: center; }
.pages * { display: inline-block; margin: 2px; padding: 0px 10px; background-color: #ffffff; color: #000; font-size: 13px; }
.pages a { background-color: #f9f9f9; text-decoration: none;  }
.pages b, .pages a:hover { background-color: var(--color-gr-m); color: #fff; font-weight: 400; }

.dd-group { display: flex; flex-flow: row wrap; gap: 10px; }
.dropdown { position: relative; width: fit-content; margin-left: auto; }
.dropdown ul { position: absolute; left: 0px; right: 0px; top: 33px; z-index: 10002; display: none; border: 1px solid #eee; margin: 0; padding: 0; background-color: #fff; list-style: none; }
.dropdown ul li { margin: 0; padding: 0; }
.dropdown ul li a { display: block; padding: 0px 8px; color: #000; font-size: 12px; text-decoration: none; }
.dropdown ul li a:hover { background-color: #f9f9f9; }
.filter-page { display: none; }
.filter-page > a, .dropdown > a { display: block; width: 100%; padding: 0px 10px; background-color: #f9f9f9; color: #000; font-size: 12px; line-height: 32px; text-decoration: none; }
.filter-page > a > span, .dropdown > a > span { float: right; padding-left: 10px; }
@media only screen and (max-width : 832px) { .filter-page { display: block; } }
@media only screen and (max-width : 480px) { .filter-page, .dropdown { width: 100%; } }

/* ----- */

.prods { display: flex; flex-flow: row wrap; }
.prod-menu { flex-basis: 25%; order: 1; padding-right: 16px; }
.prod-data { flex-basis: 75%; order: 2; }

.prod-cells { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 16px; }
.prod-cells.cell4 { grid-template-columns: repeat(4,1fr); }
.prod-cells.cell6 { grid-template-columns: repeat(6,1fr); }

.prod-cell { position: relative; }

.prod-cell img { max-width: 100%; }
.prod-cell img { aspect-ratio: 400 / 572; object-fit: contain; }
.prod-cell p { color: var(--color-gr-m); font-size: 13px; font-weight: 600; line-height: normal; }
.prod-cell p a { color: var(--color-gr-m); text-decoration: none; }
.prod-cell p span.brand { color: var(--color-or-m); }
.prod-cell p.price { color: #000; font-size: 16px; font-weight: 700; line-height: 20px; }
.prod-cell p.price span.old { color: var(--color-rd-m); font-size: 14px; font-weight: 400; text-decoration: line-through; }

.prod-cell .flag { position: absolute; top: 10px; padding: 0px 5px; color: #fff; font-size: 10px; font-weight: 300; line-height: 20px; opacity: 0.8; }
.prod-cell .flag.discount { right: 10px; background-color: var(--color-rd-m); }
.prod-cell .flag.isnew { left: 10px; background-color: var(--color-or-m); }
.prod-cell .sizes { position: absolute; left: 10px; top: 30px; z-index: 10001; display: none; width: fit-content; padding: 8px; background-color: #f6f6f6; color: #000; font-size: 11px; line-height: 15px; opacity: 1; }
.prod-cell:hover .sizes { display: block; opacity: 0.8; }

.prod-menu-content { margin-bottom: 15px; padding: 10px 20px; background-color: #f9f9f9; }
.prod-menu-content h3 { border-bottom: 1px solid var(--color-rd-m); margin: 20px 0px 5px; padding: 0; color: var(--color-rd-m); font-size: 13px; font-weight: 600; line-height: 26px; }
.prod-menu-content h3:first-child { margin-top: 0px }
.prod-menu-content ul { margin: 0; padding: 0; list-style: none; }
.prod-menu-content ul li { margin: 0; padding: 0; font-size: 13px; line-height: 26px; }
.prod-menu-content ul li a { color: #000; text-decoration: none; }
.prod-menu-content ul li a:hover { text-decoration: underline; }
.prod-menu-content ul li b { color: var(--color-rd-m); font-weight: 600; }

#filter-panel .prod-menu-content { background-color: #fff; }
#filter-panel .prod-menu-content ul li { font-size: 16px; }

.filter-area { }
.filter-form { position: relative; display: none; margin: 10px 0px 5px; }
.filter-form input { width: 100%; padding: 0px 40px 0px 10px; background: #fff; font-size: 12px; font-weight: 300; line-height: 32px; }
.filter-form button { position: absolute; top: 1px; right: 1px; display: block; overflow: hidden; width: 30px; height: 30px; border: none; margin: 0; padding: 0; background: url(/img/search.png) 50% 50% no-repeat; background-size: 16px 16px; background-color: transparent; line-height: normal; text-indent: -9999px; cursor: pointer; -webkit-appearance: none; }

.collapse-a { font-size: 13px; font-weight: 300; }

.info-left { padding: 20px; background-color: var(--color-gr-s); }
.info-left h3 { font-size: 12px; color: #000; }
.info-left p { font-size: 12px; color: #000; line-height: 22px; }

@media only screen and (max-width : 832px) {
	.prod-menu { display: none; }
	.prod-data { flex-basis: 100%; }
}
@media only screen and (max-width : 768px) {
	.prod-cells.cell4, .prod-cells.cell6 { grid-template-columns: repeat(3,1fr); }
}
@media only screen and (max-width : 480px) {
	.prod-cells, .prod-cells.cell4, .prod-cells.cell6 { grid-template-columns: repeat(2,1fr); }
}

/* ----- */

.prd { display: grid; grid-template-columns: 70px 590px 1fr; grid-template-rows: auto 1fr auto; }
.prd-name { grid-area: 1 / 3 / 2 / 4; }
.prd-info { grid-area: 2 / 3 / 3 / 4; }
.prd-text { grid-area: 3 / 1 / 4 / 4; padding: 10px 20px; background-color: #f9f9f9; }
.prd-img { grid-area: 1 / 2 / 3 / 3; padding: 0 20px; text-align: center; }
.prd-icon { grid-area: 1 / 1 / 3 / 2; text-align: center; }
.prd-name h1 { margin: 0; text-wrap: balance; line-height: 36px; }
.prd-name h2 { margin: 0; }
.prd-text h3:not(:first-child) { margin-top: 30px; }
.prd-icon span { display: inline-block; border: 1px solid #eee; margin: 3px 0px; padding: 4px; }
.prd-icon span.active { border: 1px solid #d76565; }
.prd-icon img { width: 60px; height: 80px; }
.prd-icon .slick-arrow { display: block; width: 100%; height: 24px; padding: 17px 0px; text-indent: -9999px; cursor: pointer; opacity: 0.5; }
.prd-icon .slick-prev { background: url(/img/up.png) no-repeat; background-position: center center; }
.prd-icon .slick-next { background: url(/img/down.png) no-repeat; background-position: center center; }
.prd-icon .slick-arrow:hover { opacity: 1; }
.prd-icon .slick-arrow.slick-disabled { opacity: 0.1; cursor: default; }
.zoom { display: inline-block; position: relative; }
.zoom:after { content: ''; position: absolute; top: 0; right: 0; display: block; width: 33px; height: 33px; background: url(/img/zoom.png); opacity: 0.2; }
.zoom img { display: block; max-width: 550px; }
@media only screen and (max-width: 1024px) {
	.prd { grid-template-columns: 40px 420px 1fr; }
	.prd-img { padding: 0 10px; }
	.prd-icon img { width: 30px; height: 40px; }
	.zoom img { max-width: 400px; }
}
@media only screen and (max-width: 816px) {
	.prd { grid-template-columns: auto; grid-template-rows: repeat(5,auto); }
	.prd-name{ grid-area: 1 / 1 / 2 / 2; }
	.prd-info{ grid-area: 4 / 1 / 5 / 2; }
	.prd-text{ grid-area: 5 / 1 / 6 / 2; }
	.prd-img { grid-area: 2 / 1 / 3 / 2; }
	.prd-icon { grid-area: 3 / 1 / 4 / 2; }
	.prd-img { width: 100%; margin-top: 10px; padding: 0; }
	.prd-icon span { margin: 3px; }
	.zoom img { max-width: 550px; }
}
@media only screen and (max-width: 582px) {
	.zoom img { max-width: 100%; }
}

#ordPrice { font-size: 28px; font-weight: bold; }
#ordPriceOld { color: var(--color-rd-m); font-size: 12px; font-weight: 300; line-height: 24px; }
#opoPrice { display: inline-block; text-decoration: line-through; }
#opoPercent { display: inline-block; margin-left: 10px; padding: 0px 5px; background-color: var(--color-rd-m); color: #fff; }

.prd-info b { color: var(--color-rd-m); }
.prd-block { margin: 20px 0px; }
.prd-block p { }
.prd-block p b { color: var(--color-rd-m); }

.prd-sel { display: flex; flex-flow: row wrap; justify-content: flex-start; gap: 5px; }
.prd-sel > * { padding: 0px 10px; background-color: #f9f9f9; color: #000000; font-size: 13px; font-weight: 400; text-decoration: none; text-transform: lowercase; white-space: nowrap; }
.prd-sel b,
.prd-sel a:hover { background-color: var(--color-or-m); color: #000; }
.prd-sel b.disabled { color: #999; text-decoration: line-through; }
.prd-sel a.disabled { color: #999; text-decoration: line-through; }

.buttons { display: flex; gap: 5px; }
a.btn.btn-basket { flex: 1; background-color: var(--color-gr-m); color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 3px; }
a.btn.btn-wish { flex:0; margin-left: 5px; border-color: #fff; padding: 0px 10px; }
a.btn.btn-wish:hover, input.btn:hover { background-color: #fff; }

/* ----- */

.tblhelp01 { width: 100%; margin: 8px; border-collapse: collapse; }
.tblhelp01 th { border: 1px solid #eee; padding: 3px; color: #536e84; font-size: 11px; font-weight: 600; text-align: center; }
.tblhelp01 td { border: 1px solid #eee; padding: 3px; color: #000000; font-size: 12px; font-weight: 400; text-align: center; }
.tblhelp01 td.right { font-weight: 600; text-align: right; }
.tblhelp01 td.left { text-align: left; }

table.t05 th, table.t05 td { margin: 0px; padding-right: 10px; font-size: 13px; vertical-align: top; }
table.t05 th { font-weight: 600; text-align: left; }
table.t05 td { font-weight: 400; }

table.order07 { width: 100%; border-collapse: collapse; }
table.order07 th { margin: 0; padding: 10px; color: #104c4e; font-weight: 600; font-size: 12px; line-height: 18px; }
table.order07 td { border-top: 1px solid #eee; margin: 0; padding: 10px; color: #666666; font-size: 12px; line-height: 18px; }
@media all and (max-width: 768px) {
	table.order07 thead { display: none; }
	table.order07 tr { display: block; margin-bottom: 10px; }
	table.order07 td { display: block; padding: 5px 0px; text-align: right; }
	table.order07 td:first-child { border-top: 0; }
	table.order07 td:before { content: attr(data-label); float: left; color: #104c4e; }
}

/* ----- */

.redmess { margin: 10px 0px; padding: 5px 10px; border-left: 5px solid #d76565; color: #d76565; }
.yellowmess { margin: 10px 0px; padding: 5px 10px; border-left: 5px solid #f18f38; color: #f18f38; }
.greenmess { margin: 10px 0px; padding: 5px 10px; border-left: 5px solid var(--color-gr-m); color: var(--color-gr-m); }

.divgray { margin: 20px 0px; padding: 10px 20px; background-color: #f9f9f9; }

.grid2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 448px), 1fr)); gap: 20px; }

.data-article img { padding: 20px; }

#ymapMSK { height: 350px; }

/* ----- */

.brands-az h2 { }
.brands-az ul { margin: 0; padding: 0; list-style: none; column-count: 4; -webkit-column-count: 4; -moz-column-count: 4; }
.brands-az ul li { margin: 0; padding: 0px 8px; }
.brands-az a { color: #278cbd; font-size: 13px; line-height: 26px; text-decoration: none; }
.brands-az a:hover { text-decoration: underline; }
.brands-az sup { color: #666; }
@media only screen and (max-width : 864px) { .brands-az ul { column-count: 3; -webkit-column-count: 3; -moz-column-count: 3; } }
@media only screen and (max-width : 672px) { .brands-az ul { column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; } }



/* ----- */

.brick { margin: 20px 0px; display: flex; flex-flow: row wrap; justify-content: space-between; }
.brick img { max-width: 100%; }
.brick a { position: relative; display: block; padding: 8px; text-align: center; }
.brick a b { position: absolute; left: 8px; right: 8px; bottom: 16px; display: block; width: 80%; margin: 0px auto; background-color: rgba(255,255,255,0.6); color: #000; font-size: 11px; letter-spacing: 2px; text-align: center; text-transform: uppercase; }
.brick a:hover b { background-color: rgba(255,255,255,1); }
.brick h2 { margin: 0px 0px 12px 0px; width: 100%; font-size: 18px; font-weight: 300; text-align: center; }
.brick.brick1 a { width: 100%; }
.brick.brick2 a { width: 50%; }
.brick.brick4 a { width: 25%; }
@media only screen and (max-width : 704px) {
	.brick.brick4 a { width: 50%; }
	.brick.brick2 a { width: 100%; }
}
.main-icons { display: flex; flex-flow: row wrap; justify-content: space-between; margin: 30px 0px; padding: 0; list-style: none; }
.main-icons li { width: 16.666666666%; margin: 0; padding: 10px; color: #333; font-size: 14px; font-weight: 300; line-height: 20px; text-align: center; text-transform: lowercase; }
.main-icons li img { margin-bottom: 20px; }
@media only screen and (max-width : 816px) { .main-icons li { width: 33.333333333%; } }
@media only screen and (max-width : 560px) { .main-icons li { font-size: 12px; } }
.weekly { margin: 20px 8px 0px; color: #fff; font-size: 24px; font-weight: 300; line-height: 120px; text-align: center; text-transform: uppercase; background-color: darkcyan; }
@media only screen and (max-width : 704px) { .weekly { font-size: 12px; line-height: 60px; } }

/* ----- */

.line-item { display: grid; grid-template-areas: "image info txt act price"; grid-template-columns: min-content 1fr 1fr min-content min-content; grid-column-gap: 16px; padding: 20px 0px; border-bottom: 1px solid #eee; }
.line-img { grid-area: image; width: 60px; }
.line-img img { max-width: 100%; }
.line-info { grid-area: info; }
.line-txt { grid-area: txt; }
.line-price { grid-area: price; color: #000; font-size: 16px; font-weight: 700; line-height: normal; text-align: right; white-space: nowrap; }
.line-act { grid-area: act; }
.line-item p { margin: 0; padding: 0px 0px 10px; font-size: 16px; line-height: normal; }
.line-item p b { color: var(--color-or-m); text-transform: uppercase; }
.line-price-strike { color: #ccc; text-decoration: line-through; }
.line-price-red { color: #d76565; }
@media only screen and (max-width : 896px) {
	.line-item {
		grid-template-areas: "image info act price" "image txt act price";
		grid-template-columns: min-content 1fr min-content min-content;
	}
}
@media only screen and (max-width : 640px) {
	.line-item {
		grid-template-areas: "image info act" "image txt act" "image price act";
		grid-template-columns: min-content 1fr min-content;
		grid-column-gap: 8px;
	}
	.line-price { text-align: left; }
}
.line-sum { padding: 20px 0px; color: #000; font-size: 18px; font-weight: 600; text-align: right; }
.line-sum-grey { color: #666; font-size: 14px; }
.orderStatus { border-bottom: 1px dotted #278cbd; text-decoration: none; }

/* --- --- --- */

.delivery-block { position: relative; }
.delivery-block h3 { padding: 0px 20px 0px 30px; line-height: 40px; }
.delivery-block > h3 > a { display: block; color: #999; text-decoration: none; }
.delivery-block > h3 > a:before { content: ""; position: absolute; top: 10px; left: 0; display: block; width: 20px; height: 20px; border: 1px solid #999; }
.delivery-block-active h3 > a:before { background-color: #999; }
.delivery-block-data { padding: 10px 20px; border-left: 5px solid #999; }
.point { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 10px; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; line-height: 26px; }
.point p { margin: 0px 0px; padding: 0; line-height: 20px; }
.point span { font-size: 11px; }

/* --- --- --- */

.cabinet { border-bottom: 1px solid #eee; padding: 0; }
.cabinet .data { display: flex; flex-flow: row wrap; align-items: center; }
.cabinet .fio { margin-left: auto; color: var(--color-or-m); font-size: 13px; font-weight: bold; line-height: 40px; text-transform: uppercase; }
.cabinet ul { margin: 0; padding: 0; list-style: none; }
.cabinet ul li { display: inline-block; margin: 0; padding: 0px 8px 0px 0px; }
.cabinet ul li a { color: var(--color-gr-m); font-size: 13px; font-weight: bold; text-decoration: none; text-transform: uppercase; }
.cabinet-button { display: none; }
.cabinet-button span { display: block; width: 20px; height: 1px; background-color: var(--color-or-m); }
.cabinet-button span + span { margin-top: 4px; }
@media all and (max-width: 864px) {
	.cabinet ul { display: none; }
	.cabinet-button { display: block; }
	.cabinet ul.open { display: block; width: 100%; order: 10; }
	.cabinet ul.open li { border-top: 1px solid #eee; width: 100%; padding: 0; }
}

/* --- --- --- */
