:root {
    --brands-cols: 3;
}

*, *:before, *:after { border: 0; margin: 0; padding: 0; outline: 0; box-sizing: border-box; }
body { background-color: #fff; color: #000; font-family: Circe, sans-serif; font-size: 16px; font-weight: 400; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
b, strong { font-weight: 700; }
a { background-color: transparent; color: #0d0d0d; }
a:active, a:hover { outline: 0; }
a:hover { color: #06a1cd; }
img, svg { display: block; border: 0; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; }

h1 { margin: 16px 0px; color: #000; font-size: 28px; font-weight: 300; text-align: center; }
h2 { margin: 16px 0px; color: #000; font-size: 24px; font-weight: 400; }
ul, ol { }
p, li { }

.m-16-0 { margin: 16px 0px; }
.p-16-0 { padding: 16px 0px; }

.tal { text-align: left; }
.tac { text-align: center; }
.tar { text-align: right; }

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

body { scrollbar-width: thin; scrollbar-color: #e5f5fa #9cdcee; }
body::-webkit-scrollbar { width: 4px; }
body::-webkit-scrollbar-track { background: #e5f5fa; }
body::-webkit-scrollbar-thumb { background-color: #9cdcee; }

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

.page { display: flex; flex-flow: column wrap; }
.data { min-width: 320px; max-width: 1216px; margin: 0 auto; padding: 0px 16px; }
.top { order: 10; background-color: #9ee1d3; color: #000000; text-align: center; line-height: 40px; }
header { order: 20; }
nav { order: 30; }  
main { order: 40; padding-bottom: 32px; }
footer { order: 50; padding: 48px 0; background-color: #e5f5fa; }
.bottom { order: 60; }

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

input, textarea, select { height: 40px; margin: 0; padding: 0px 8px; outline: none; border: 1px solid #dbcccc; border-radius: 4px; background-color: #f9f9f9; color: #000; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 38px; transition: 0.3s ease border-color; }
input[type=text], textarea { -webkit-appearance: none; }
input:focus, textarea:focus { border-color: #000; }

input.btn, a.btn { display: inline-block; margin: 0; padding: 0px 16px; border: 1px solid #000; border-radius: 4px; background-color: #000; color: #fff; font-size: 16px; font-weight: 700; line-height: 38px; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; -webkit-appearance: none; transition: 0.3s ease all; }
input.btn:hover, a.btn:hover { border-color: #333; background-color: #333; }

.btn.btn100 { display: block; width: 100%; }

.frow { margin-bottom: 16px; }
.frow label { display: block; color: #757575; text-transform: lowercase; }
.frow .frow-err { margin: 2px 0px; padding: 4px 8px; border-radius: 2px; background-color: #cd4771; color: #fff; font-size: 14px; font-weight: 400; line-height: 20px; }
.frow-mess { margin: 2px 0px; padding: 4px 8px; border-radius: 2px; background-color: #9ee1d3; color: #000; font-size: 14px; font-weight: 400; line-height: 20px; }
.frow .frow-cb { color: #757575; text-transform: lowercase; }
.frow .frow-cb input[type=checkbox] { width: auto; margin-right: 10px; vertical-align: middle; }
.frow input, .frow select { width: 100%; }

/*
.btn.btn-pay { }
.btn.btn-del { padding: 0px 10px; border: 1px solid #68707f; background-color: #fff; color: #68707f; font-size: 11px; line-height: 22px; text-transform: lowercase; }
.btn.btn-del:hover { border: 1px solid #68707f; background-color: #68707f; color: #fff; }
*/

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

.header-inner { display: flex; flex-flow: row nowrap; align-items: center; padding: 8px 0px; border-bottom: 1px solid #eee; }
.hamburger { display: block; margin-right: 16px; }
.hamburger span { display: block; width: 25px; height: 1px; background-color: #000; }
.hamburger span + span { margin-top: 5px; }
.logo { margin-right: auto; color: #000; font-family: Alexandria, sans-serif; font-size: 24px; font-weight: 900; line-height: 50px; text-align: center; }
.head-icon { position: relative; padding: 11px; }
.head-icon img { width: 28px; height: 28px; }
.head-icon span { position: absolute; top: 0px; right: 0px; display: inline-block; width: 20px; height: 20px; border-radius: 2px; background-color: #000; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; opacity: .8; }

nav ul { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: 32px; border-bottom: 1px solid #eee; list-style: none; }
nav ul li { display: inline-block; margin: 0; padding: 0; font-size: 16px; line-height: 48px; }
nav ul li a { color: #000; text-decoration: none; }
nav ul li a:hover { color: #06a1cd; }
@media only screen and (max-width : 832px) { nav { display: none; } }

footer p { margin: 0; font-size: 14px; font-weight: 300; }
footer ul { display: flex; flex-flow: row wrap; margin: 24px 0px; list-style: none; }
footer ul li { margin: 0; padding-right: 16px; font-size: 14px; white-space: nowrap; }
footer ul li a { color: #333; }
footer .contact { display: flex; flex-flow: row wrap; gap: 0px 24px; justify-content: space-between; font-size: 18px; }
@media only screen and (max-width : 736px) {
	footer { flex-flow: column wrap; }
	footer ul li { display: inline-block; padding-right: 16px; }
}
@media only screen and (max-width : 512px) {
	.top { font-size: 12px; }
}

.bottom ul { display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; gap: 8px; margin: 16px 0px; list-style: none; }

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

aside { position: fixed; z-index: 1; top: 0; left: 0; display: none; width: 300px; height: 100%; overflow-x: hidden; padding: 16px; background-color: rgba(229,245,250,0.98); transition: 0.5s; box-shadow: 8px 0px 8px -8px rgba(34, 60, 80, 0.6); }
aside.right { left: unset; right: 0; box-shadow: 8px 0px 8px 8px rgba(34, 60, 80, 0.6); }
.panel-top { display: flex; flex-flow: row nowrap; align-items: center; margin-bottom: 16px; }
.panel-logo { margin-right: auto; color: #000; font-family: Alexandria, sans-serif; font-size: 18px; font-weight: 900; line-height: 40px; text-align: center; }
.panel-btn-close { color: #000; font-size: 32px; text-decoration: none; }
aside h3 { }
aside > ul { margin: 0; list-style: none; }
aside > ul > li { }
aside > ul > li > a { color: #000; text-decoration: none; }
aside > ul > li > b { }
aside > ul + h3 { margin-top: 16px; }

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

ul.breadcrumb { margin: 8px 0px; padding: 0; list-style: none; }
ul.breadcrumb li { display: inline-block; margin: 0; padding: 0; line-height: 18px; font-size: 14px; text-transform: lowercase; }
ul.breadcrumb li.sp { padding: 0px 4px; }
ul.breadcrumb li a { text-decoration: none; }
ul.breadcrumb li a:hover { border-bottom: 1px solid #278cbd; }
ul.breadcrumb li b { }

.pages { margin-top: 32px; text-align: center; }
.pages * { display: inline-block; border-radius: 16px; margin: 2px; padding: 4px 16px; color: #000; font-size: 14px; }
.pages a { background-color: #e5f5fa; text-decoration: none; }
.pages b, .pages a:hover { background-color: #9cdcee; }

.divcat { display: flex; flex-flow: row wrap; gap: 4px; align-items: center; justify-content: center; align-content: center; margin: 16px 0px; }
.divcat * { border-radius: 4px; padding: 5px 10px; color: #000; font-size: 14px; font-weight: 400; line-height: 24px; white-space: nowrap; text-decoration: none; }
.divcat a { background-color: #e5f5fa; }
.divcat b { background-color: #9cdcee; }

.divfilter { display: flex; flex-flow: row nowrap; gap: 16px; margin: 32px 0px; }
.divfilter > span { margin-right: auto; color: #555; font-size: 14px; font-weight: 300; }
.divfilter > a { color: #555; font-size: 14px; font-weight: 300; text-decoration: none; }
.flex01 { display: flex; flex-flow: row nowrap; align-items: center; gap: 5px; }

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

.carts { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 48px 48px; }
.carts article { text-align: center; }
.carts article img { max-width: 100%; }
.carts article img { aspect-ratio: 400 / 572; object-fit: contain; }
.carts article .info { margin-top: 32px; }
.carts article p + p { margin-top: 8px; }
.carts article p { font-size: 16px; font-weight: 400; }
.carts article p a { color: #777; text-decoration: none; }
.carts article p a:hover { text-decoration: underline; }
.carts article p a span.brand { color: #d06363; font-size: 18px; font-weight: 300; text-transform: lowercase; }
.carts article p.price { color: #000; font-weight: 700; }
.carts article p.priceold { margin-top: 0; color: #a00; font-size: 12px; text-decoration: line-through; }
.carts article p.priceold span { background-color: #ea9ab3; color: #f9f9f9; padding: 0px 4px; text-decoration: none; }
@media only screen and (max-width : 880px) { .carts { grid-template-columns: repeat(3, 1fr); grid-gap: 48px 32px; } }
@media only screen and (max-width : 592px) { .carts { grid-template-columns: repeat(2, 1fr); grid-gap: 48px 24px; } }

/* ---------- ORDERS, BAsket, Wish */

.grd-item {
	display: grid;
	grid-template-areas: "image info1 info2 act price";
	grid-template-columns: min-content 1fr 1fr min-content min-content;
	grid-gap: 24px 24px;
	padding: 24px 0px;
	border-bottom: 1px solid rgb(223, 223, 225);
}
.grd-img { grid-area: image; width: 60px; }
.grd-img img { max-width: 100%; }
.grd-info1 { grid-area: info1; }
.grd-info2 { grid-area: info2; }
.grd-price { grid-area: price; color: #000; font-size: 18px; font-weight: 700; line-height: normal; text-align: right; }
.grd-act { grid-area: act; }

.grd-item a { }
.grd-item p { margin: 0; line-height: 28px; }
.grd-item p b { text-transform: uppercase; }
.grd-item p.grd-art { }
.grd-item p.grd-color { }

.grd-price span { white-space: nowrap;  }
.grd-price span.grd-price-strike { font-size: 14px; font-weight: 400; text-decoration: line-through; }
.grd-price span.grd-price-red { color: #d76565; font-size: 12px; font-weight: 400; }

@media only screen and (max-width : 896px) {
	.grd-item {
		grid-template-areas: "image info1 act price" "image info2 act price";
		grid-template-columns: min-content 1fr min-content min-content;
		grid-gap: 0px 8px;
	}
}
@media only screen and (max-width : 640px) {
	.grd-item {
		grid-template-areas: "image info1 act" "image info2 act" "image price act";
		grid-template-columns: min-content 1fr min-content;
	}
	.grd-price { text-align: left; }
}

.tablestatus { margin-right: 8px; padding: 2px 4px; border-radius: 4px; background-color: #fadfdf; color: #e45f5f; font-weight: 700; }

.itogo { display: grid; grid-template-columns: 1fr auto; grid-gap: 0px 24px; align-items: center; margin: 16px 0px; }
.itogo > * { font-size: 18px; font-weight: 300; text-align: right; line-height: 32px; }
.itogo label { color: var(--col10); }
.itogo span { white-space: nowrap; }
.itogo .sum { font-size: 24px; font-weight: 700; }

.itogo-flex { display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: center; gap: 24px; margin: 16px 0px; }
.itogo-flex-text { font-size: 14px; font-weight: 300; }

/* ---------- Product - begin */

.product {
	display: grid;
	grid-template-columns: 70px 650px 1fr;
	grid-template-rows: auto 1fr auto;
	grid-gap: 24px;
}
.pname { grid-area: 1 / 3 / 2 / 4; position: relative; }
.pdesc { grid-area: 2 / 3 / 3 / 4; }
.ptext { grid-area: 3 / 1 / 4 / 4; }
.pimage { grid-area: 1 / 2 / 3 / 3; text-align: center; }
.picons { grid-area: 1 / 1 / 3 / 2; text-align: center; }
@media only screen and (max-width: 1152px) {
	.product { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4,auto); }
	.pname { grid-area: 1 / 2 / 2 / 3; }
	.pdesc { grid-area: 2 / 2 / 4 / 3; }
	.ptext { grid-area: 4 / 1 / 5 / 3; }
	.pimage { grid-area: 1 / 1 / 3 / 2; }
	.picons { grid-area: 3 / 1 / 4 / 2; }
	.picons img { width: 40px; margin: 0px 5px; }
}
@media only screen and (max-width: 800px) {
	.product { grid-template-columns: auto; grid-template-rows: repeat(5, auto); grid-gap: 16px; }
	.pname { grid-area: 1 / 1 / 2 / 2; }
	.pdesc { grid-area: 4 / 1 / 5 / 2; }
	.ptext { grid-area: 5 / 1 / 6 / 2; }
	.pimage { grid-area: 2 / 1 / 3 / 2; }
	.picons { grid-area: 3 / 1 / 4 / 2; }
}

.pname h1 { margin: 0; padding-right: 44px; font-size: 22px; text-align: left; }
.pname h2 { margin: 0; padding-right: 44px; font-size: 18px; font-weight: 700; }
.btn2like { position: absolute; top: 0; right: 0; }
.btn2like img { width: 28px; height: 28px; }

.picons img { display: inline-block; border: 1px solid #f9f9f9; width: 70px; margin: 3px 0px; padding: 4px; cursor: pointer; }
.picons img.active { border: 1px solid #e995af; }

.zoom { display: inline-block; position: relative; }
.zoom:after { content: ''; position: absolute; top: 0; right: 0; display: block; width: 33px; height: 33px; background: url(/static/img/zoom.png); opacity: 0.2; }
.zoom img { display: block; max-width: 100%; }

.pprice { margin-bottom: 24px; }
#pprice-sum { color: #000; font-size: 32px; font-weight: 700; }
#ppriceold { font-size: 14px; font-weight: 700; line-height: normal; line-height: 24px; }
#ppriceold-sum { color: #980c38; font-style: italic; text-decoration: line-through; }
#ppriceold-percent { display: inline-block; border-radius: 2px; margin-left: 10px; padding: 0px 5px; background-color: #980c38; color: #fff; }
a.btn.btn2basket { display: block; width: 100%; border-color: #9cdcee; background-color: #9cdcee; color: #000; }
a.btn.btn2basket:hover { border-color: #e5f5fa; background-color: #e5f5fa; }
.pstock { display: block; border-radius: 4px; padding: 8px 16px; background-color: #f6f5f3; color: #000; }
.pvars { margin: 24px 0px; }
.pvars > p:not(:first-child) { margin-top: 24px; }
.pvars > p span { font-weight: 700; }
.pvar-sel { display: flex; flex-flow: row wrap; gap: 8px; margin: 5px 0px; }

.pvar-sel * { border-radius: 4px; padding: 8px 16px; background-color: #e5f5fa; font-size: 16px; font-weight: 400; text-transform: lowercase; white-space: nowrap; }
.pvar-sel a { color: #000; text-decoration: none; }
.pvar-sel b { background-color: #9cdcee; font-weight: 700; }
.pvar-sel b.disabled { color: #888a8c; text-decoration: line-through; }
.pvar-sel a:hover { background-color: #9cdcee; }
.pvar-sel a.disabled { color: #888a8c; background-color: #fff; text-decoration: line-through; }
.pvar-sel a.disabled:hover { background-color: #9cdcee; }

.ptext h3 { margin: 24px 0px 8px; font-weight: 300; font-size: 22px; }
.ptext p, .ptext div { margin: 8px 0px; font-weight: 400; font-size: 16px; }

/* ---------- blocks begin */

.flex50 { display: flex; justify-content: center; column-gap: 32px; }
.flex50 > * { flex-basis: calc(50% - 16px); }
@media only screen and (max-width : 800px) { .flex50 { display: block; } }

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

.tbl01 td, .tbl01 th { padding: 4px 24px 4px 0px; font-weight: 400; text-align: left; }
.tbl01 td { font-weight: 300; }

/*  ---------- main page */

.bricks { display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 4px; margin: 32px 0px; }
.brick { position: relative; }
.brick-img img { max-width: 100%; }
.brick-text { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; text-align: center; }
.brick-text h2 { color: #e5f5fa; text-transform: uppercase; text-shadow: 1px 1px black; }
.brick-text a { display: inline-block; padding: 8px 24px; border-radius: 4px; background-color: #fff; color: #000; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; }
.brick-text a:hover { opacity: 0.7; }
@media only screen and (max-width : 832px) { .bricks { grid-template-columns: repeat(2,1fr); } }

.aboutshop { margin: 32px 0px; }
.aboutshop h1 { margin: 16px 0px 8px; text-align: left; }
.aboutshop h2 { margin: 16px 0px 8px; }
.aboutshop p { text-align: justify; }
.aboutshop ul, .aboutshop ol { margin: 0px 26px; }

.brandlogo { --brandlogo-cols: 8; display: grid; grid-template-columns: repeat(var(--brandlogo-cols),1fr); align-items: center; }
.brandlogo > * { padding: 24px; }
.brandlogo img { max-width: 100%; }
@media only screen and (max-width : 1024px) { .brandlogo { --brandlogo-cols: 6; } }
@media only screen and (max-width : 704px) { .brandlogo { --brandlogo-cols: 4; } }
@media only screen and (max-width : 512px) { .brandlogo { --brandlogo-cols: 3; } }

/* ---------- brands page */

.brands { display: grid; grid-template-columns: repeat(var(--brands-cols), 1fr); grid-gap: 4px 24px; margin: 0; list-style: none; }
.brands li { margin: 0; }
.brands li.letter { grid-column: 1 / -1; padding: 16px 0px 8px; color: #82807d; font-weight: 900; }
.brands li a { display: block; text-decoration: none; }
.brands li a b { float: right; color: #82807d; }
@media only screen and (max-width : 960px) { :root { --brands-cols: 2; } }
@media only screen and (max-width : 672px) { :root { --brands-cols: 1; } }

/* ---------- basket/delivery page */

.point { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 0px; line-height: 26px; }
.point + .point { border-top: 1px solid #eee; }
.point p { margin: 0; padding: 0; line-height: 20px; }
.point span { font-size: 11px; }

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