/* Global vars */

:root {
	--main-bg: #34495E;
	--border1: 1px solid var(--main-bg);
}

/* Own CSS styles */

/* Box */

.box {border: 1px solid var(--main-bg); --padding: 5px;}
.box H3 {margin: 0; padding: 2px 5px; font-size: 1em; background-color: var(--main-bg); color: #fff;}
.box>div {padding: var(--padding)}

#bmSearchSubmit {cursor: pointer; border-radius: 0; border: 0; height: 26px; background-color: #939393; color: white;}

/* Grid Template */

#pageWrapper {
	margin-left: auto;
	margin-right: auto; width: 99%;
	background: white; display: grid;
	grid-template-areas: "header header header" "nav main nav2" "footer footer footer";
	grid-gap: 10px;
	grid-template-columns: 220px auto 220px;
}

.productDesc {margin-bottom: 2em}
.productDesc iframe {width: 100%;} @media screen and (min-width: 1400px) {.productDesc iframe {width: 50%;}}

@media screen and (max-width: 800px) {#pageWrapper {grid-template-areas: "header header" "nav main" "nav2 main" "footer footer"; grid-template-columns: 220px auto}}
@media screen and (max-width: 560px) {#pageWrapper {grid-template-areas: "header" "main" "nav" "nav2" "footer"; grid-template-columns: 1fr}}
@media screen and (max-width: 1024px) {#pageWrapper {grid-gap: 5px;}}

header {grid-area: header}
footer {grid-area: footer}
#columnLeft {grid-area: nav}
#columnRight {grid-area: nav2}
#columnCenter {grid-area: main}

/* Product Listing */

.productListingList {display: grid; grid-gap: 10px; padding: 5px; grid-template-columns: max-content auto max-content max-content; align-items: center; grid-auto-columns: max-content;}
.productListingList.noImage {grid-template-columns: auto max-content max-content; }

@media screen and (min-width: 1024px) {.productListingList.date {grid-template-columns: max-content max-content auto max-content max-content; }}
@media screen and (min-width: 1024px) {.productListingList.date.noImage {grid-template-columns: max-content auto max-content max-content; }}

/*.prListingRow {display: grid; grid-template-columns: max-content auto min-content max-content; grid-gap: 10px; grid-auto-flow: column; align-items:center} */

@media screen and (max-width: 1024px) {.prListingShortDesc {display: none;}}
@media screen and (max-width: 1024px) {.prListingDate {display: none;}}
@media screen and (max-width: 1024px) {.prListingBuy BUTTON SPAN {display: none;}}

/*.prListingImage {grid-column-start: 2}*/
.prListingTitle {}
.prListingPrice {justify-self: end;}
.prListingBuy {justify-self: end;}
@media screen and (max-width: 1024px) {.prListingBuy BUTTON {padding: 5px !important;}}
.prListingBuy BUTTON span {margin-left: 5px}
.prListingTitle A {font-weight: bold}
.prListingShortDesc {font-size: .8em; line-height: 1.1em; text-align: left; margin-top: 3px;}

.categoriesMenu A.dropRight:after {padding-left: 1px; content: '\25BF';}
.categoriesMenu UL UL {list-style-type: none; margin-left: 1em; font-weight: 300;}
.categoriesMenu UL LI UL LI A:before {content: "▫"; margin-right: 2px;}
.categoriesMenu UL LI UL LI A:hover:before {content: "▪"; margin-right: 2px; text-decoration: none !important}

.border {border: var(--border1);}

.selected {font-weight: bold}

.product H3 {font-weight: normal; margin:0; font-size: 0.9em;}
.product img {width: 80px; height: 80px;}
.productContent {padding: 5px; margin-bottom: 1em}
.tagsMenu, #brandFilter {overflow-y: auto; max-height: 25em;}
.tagsMenu LI, .categoriesMenu LI, .headerNav LI, #bmCartContents LI {list-style-type: none;}
.infobox {padding: 5px}
.infoBoxHeader {height: 1.5em; line-height: 1.5em;}
.infoBoxHeaderColored {background-color: var(--main-bg); color: white;}
.infoBoxHeader H1, .infoBoxHeader H2 {padding-left: .3em; font-weight: bold; margin-top: 0; font-size: .9em;}

.pageContent H1 {margin-left: -2px; margin-bottom: 1em;}

.newSign {font-size: .7em; background-color: #AD0000; color: white; margin-left: 1em; padding: 0 .45em}
span.specialPrice {color: #AD0000}

/* HEADER */

#storeLogoText {font-size: 40px; line-height: 40px; color: black;}
@media screen and (max-width: 400px) {#storeLogoText {font-size: 30px; line-height: 30px;}}
header nav {display: grid; background-color: var(--main-bg); color: white; font-weight: bold; height: 1.5em; padding: 0 5px; grid-template-columns: auto auto; align-items: center;}
@media screen and (max-width: 470px) {header nav {grid-template-columns: auto}}
header nav A {color: white; text-decoration: none}
@media screen and (max-width: 470px) {#breadcrumb {display: none;}}
#breadcrumb OL {padding-left: 0; margin: 0; display: inline}
#breadcrumb LI {display: inline}
#accountNav {justify-self: end;}

.headerMenu {margin-left: auto; width: fit-content;}

.spanLink {cursor: pointer; text-decoration: underline}

#storeLogo {margin-bottom: 5px}



.pagesResults {margin: 1em 0 .5em 0; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; grid-gap: 5px;}
@media screen and (max-width: 1024px) {.pagesResults {grid-template-columns: 1fr}}

@media screen and (max-width: 1024px) {.splitPages {justify-self: end;}}
.pagesResults DIV:nth-child(2) {justify-self: end;}
.splitPages SELECT {padding: 2px; margin-left: .5em}
.pageLinks {justify-self: end;}

.pageLinks A, .pageLinks span.selected {
	text-decoration: none;
	width: 1.2em;
	height: 1.2em;
	display: inline-block;
	border: 1px solid rgb(105, 105, 105);
	margin-left: .3em;
	text-align: center;
	padding: .07em;
}

#catPagesCopy {float: right; margin-top: 5px;}

.seoText {border: var(--border1); color: #0000009e; padding: 7px; margin-top: 1em;}
.seoText UL {padding-left: 2em;}


/* BUTTONS */

BUTTON {
	white-space: nowrap;
	cursor: pointer ;
	color: white;
	font-weight: bold;
	padding: 8px 40px;
	background-color: var(--main-bg);
	outline: none;
	border: 1px solid black;
}

BUTTON.cart {border: var(--border1); background-color: var(--main-bg); color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}

BUTTON.small {font-weight: normal; padding: 0.1em .5em;}
BUTTON.medium {padding: 8px 40px; font-weight: bold;}
.buttonSet {height: 2.5em}

#searchBox {display: grid; grid-gap: 10px;}
FORM#poisk > DIV {display: grid; grid-template-columns: auto max-content;}
#poisk BUTTON {padding: 5px; border: none; background-color: var(--main-bg); justify-self: end;}
#poisk INPUT {width: auto; border-radius: 0; border: 1px solid var(--main-bg); padding: 0 5px;}

/* PRODUCT */

.product {text-align: center}

.productInfo {padding: 5px}
.productContent LI {margin-left: 2em}
.productContent UL {margin-bottom: 1em;}
.productInfo A {text-decoration: underline;}
TABLE.productParams {background-color: #0000000a; margin-bottom: 5px; width:100%}
TABLE.productParams TD:first-child {width: 99%; vertical-align: top;}
TABLE.productParams IMG {width: 80px; height: 80px}
.productParams UL {list-style-type: none}
.productParams UL LI {margin: 0}
.productInfoText {text-align: center; font-size: .8em;}
.pImgLink IMG {width: 80px}
.productAdvice {display: grid; grid-template-columns: repeat(6, 1fr)} @media screen and (max-width: 1260px) {.productAdvice {grid-template-columns: repeat(3, 1fr)}} @media screen and (max-width: 940px) {.productAdvice {grid-template-columns: repeat(2, 1fr)}}
.productInfo .infobox {margin: 5px 0}
.productDesc iframe {border: 1px solid var(--main-bg)}

.reviewHeader SPAN:nth-child(1) {font-weight: bold; margin-right: 1em}
.reviewHeader SPAN:nth-child(3) {float: right}
.reviewText {background-color: #DBDBDB82; padding: 7px; margin-bottom: 1em;}
#productReviews textarea {width:50em; height: 10em;}
@media screen and (max-width: 400px) {#productReviews textarea {width:16em; height: 8em;}}

/* Categories and tags */
.tagsMenu A, .categoriesMenu A, #bmCartContents A, A#storeLogoText, .headerNav A, .product A, .noUL {text-decoration: none}

DIV.pageHeading {display: grid; grid-template-columns: auto max-content; grid-gap: 10px;}
DIV.pageHeading DIV:nth-child(1) {}
DIV.pageHeading DIV:nth-child(2) {justify-self: end;}
DIV.pageHeading DIV:nth-child(2) {justify-self: end;}
DIV.pageHeading DIV:nth-child(2) SPAN {font-size: 1.7em; font-weight: bold;}

.productListing {}
TABLE.productListingList {width: 100%;}
.productListing .product {width: 25%; display: inline-block; margin-bottom: 1em; vertical-align: top;}
@media screen and (max-width: 940px) {.productListing .product {width: 50%;}}

.productListing IMG {width: 80px; height: 80px}
TABLE.productListing {border-collapse: collapse;}
TABLE.productListing TR {border-bottom: 1px dotted #282828;}
.productListing TD.price {white-space: nowrap; padding-right: 1em;}

.productListingList TR TD:nth-child(1) {white-space: nowrap; padding: 0 .5em;}

.pDisplay H2, .infoBoxHeader H2 {margin: 0; font-size: 1em;}
.seoCategoryTopText {color: #7b7b7b; font-size: 0.8em;}

/* FILTER */

.filterItem {padding: 5px; margin: 0 0 0.5em 0; min-width: 0;}
.filterItem legend {text-transform: uppercase; font-size: 11px; font-weight: bold;}

.checkboxArea li {list-style-type: none; overflow: clip;}
.checkboxArea li label {white-space: nowrap;}
.checkboxArea label {cursor: pointer}
.checkboxArea input {appearance: none; cursor: pointer; color: #666; border: 1px solid #666; width: 11px; height: 11px; margin: 0 4px 0 0;}
.checkboxArea input:checked {background-color: #666}

#advice_group {border: 1px solid rgba(0,0,0,.5); font-size: .8em; padding: 6px;}
.selPart {background-color: #DADADA;}

/* CART */
#bmShoppingCartTotal {display: flex; flex-flow: row wrap; align-items: start;}
#bmShoppingCartTotal DIV:nth-child(1) {flex: 1}
#bmShoppingCartTotal DIV:nth-child(2) {flex: 2; text-align: right; white-space: nowrap;}
#bmShoppingCartTotal DIV:nth-child(2) SPAN {text-decoration: underline; cursor: pointer}
#bmCartContents UL {border-bottom: 1px solid black; margin-bottom: 3px; padding-bottom: 5px;}
#checkoutForm .checkboxArea li {font-size: 15px; line-height: 1.5em;}


/* Account */

@media screen and (max-width: 1024px) {.ordersTable TBODY TR TD:nth-child(4), .ordersTable TBODY TR TH:nth-child(4), .ordersTable TBODY TR TD:nth-child(5), .ordersTable TBODY TR TH:nth-child(5) {display: none;}}

/* TABS */

.tabWrapper {--border: var(--border1)}

/* DIV.myTab > label { padding: 5px; border: 1px solid #aaa; line-height: 24px; cursor: pointer; position: relative; bottom: 1px; background: #fff; } */
/*.myTab input[type="radio"]:checked + label { border-bottom: 2px solid #fff; }*/
/* .myTab > input:nth-of-type(1):checked ~ div:nth-of-type(1), .myTab > input:nth-of-type(2):checked ~ div:nth-of-type(2), .myTab > input:nth-of-type(3):checked ~ div:nth-of-type(3), .myTab > input:nth-of-type(4):checked ~ div:nth-of-type(4) { display: block; padding: 5px; border: 1px solid #aaa; } */

/*
.myTab > ul {list-style-type: none; height: 2em; margin: 0 !important;}
.myTab > ul > li {float: left; padding: 5px; border: var(--border1); cursor: pointer; margin: 0 5px -1px 0;}
.myTab > ul > li.current {border-bottom: 1px solid #fff;}
.myTab > div {display: none; padding: 5px; border: 1px solid var(--main-bg)}
.myTab .visible {display: block;}
.myTab H2 {margin: 0; font-size: 13px; font-weight: normal;}

 */

/* Sound Player */
.playSound:before {content: '⏵'}
#soundBarWrapper {position: fixed; bottom: 0; width: 100%; background-color: #2b2b2b; /*width: 50%; transform: translateX(-50%); left: 50%;*/}
#soundBarWrapper>div {display: grid; grid-template-columns: 150px auto 120px 30px; grid-gap: 10px; align-items: center;}
#soundPlayerCloseBtn {color: #fff; cursor: pointer; font-size: 24px; margin:0 1em; justify-self: end}
#soundPlayerAddCartBtn {justify-self: end; margin: 0 1em;}
#soundPlayerAddCartBtn BUTTON {background-color: #0000000a; color: #2b2b2b}
#soundBarProductInfo img {width: 50px; height: 50px; margin: 0 1em}
#soundBarProductInfo span {color: #fff; font-weight: bolder}

/*
#soundPlayer {position: relative; width: 80%; left: 0}


 */



	/* Yaku */
.link--yaku {
	overflow: hidden;

}

.link--yaku span {
	display: inline-block;
	position: relative;
	-webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
	transform: perspective(1000px) rotate3d(0,1,0,0deg);
	-webkit-transition: -webkit-transform 0.5s, color 0.5s;
	transition: transform 0.5s, color 0.5s;
}

.link--yaku:hover span {
	color: #1e1a1b;
	-webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg);
	transform: perspective(1000px) rotate3d(0,1,0,360deg);
}

.link--yaku span:nth-child(4),
.link--yaku:hover span:first-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.link--yaku span:nth-child(3),
.link--yaku:hover span:nth-child(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.link--yaku span:nth-child(2),
.link--yaku:hover span:nth-child(3) {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.link--yaku span:first-child,
.link--yaku:hover span:nth-child(4) {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}