body {font-size: 0.9rem !important;} 
#header {font-size: .9rem !important;}
a {/*color: #50596c; text-decoration: underline;*/text-decoration: bone;}
h3 {text-align: center;}
.title-h1h2 h1 {font-weight: 500 !important; color #333}
h1 a, h2 a, h3 a {text-decoration: none;}
.dropmenu ul li a::before {font-family: inherit !important; content: '\25bc';}
.name {text-align:right; padding-right: 8px; min-width: 128px;}
.val {padding-left: 8px; font-weight: 600;}
.price a {color: #575; font-size: 1.3rem; text-align: center; font-weight: 900; margin: 16px 0; text-decoration: none;}
.readmore::before {text-decoration: none; font-style: italic; content: "Детальніше"}
.prev, .next {display: table; padding: 16px; text-decoration: none}
.prev::before {content: "← "}
.next::after {content: " →"}
.wrap12 {margin: 0 auto 16px;}
.col12 {min-width: 264px; max-width: 360px; margin: 0 10px; padding-bottom: 16px; text-align: center}
.col12 td {line-height: 0.8; width: 20%; border: 1px solid #888; padding: 8px 0; margin: -1px;}
.col12 .td-price:hover {background:#ded;}
.col12 .nb {line-height: 1.5; border: none; font-weight: bold; padding: 8px 0}
.headercontact {/*margin: 0 0 3rem; */text-align:center; color: #456; border-top: 1px solid #789; font-size: 0.6rem}
.underh {/*margin: -1rem 0 1rem; */text-align:center;font-weight: 100;font-size:0.7rem}
blockquote {margin-left: 3rem !important; color: #888; font-size: 0.75rem;text-align: justify;}
h1 a, h2 a, h3 a {color: #3a414e;}
.other {font-weight: 100;font-size:80%;padding: 2px}
.product {padding: 16px 0; display: grid; grid-gap: 16px; grid-template-columns: repeat(auto-fit, minmax(284px, auto))}
.product img {margin: auto; display: table;}
.features {margin: 16px auto}
.caption {margin: 16px auto; display: block;}
.meta {text-align: center; color: #456; margin: 1rem 0 0.1rem; font-size: 0.6rem}
.treemenu .toggler {font-size: 1.5rem !important; padding: 0 8px 0 64px !important; opacity: 1 !important}
.treemenu .tree-closed > .toggler::before {content: '+'!important}
h2+p {text-align: center;} /*Після заголовка завжди йде блок фотографій - вирівнюємо по центру*/
@media (min-width: 721px) {
.ExampleRow1, .ExampleRow2, .ExampleRow3, .ExampleRow4 {height: auto; width: calc(25% - 15px); margin: 5px; max-width: 270px; }
}
@media (max-width: 720px) and (min-width: 541px) {
.ExampleRow1, .ExampleRow2, .ExampleRow3 {height: auto; width: calc(33% - 15px); margin: 5px; max-width: 270px; }
.ExampleRow4 {display: none;}
}
@media (max-width: 540px) and (min-width: 321px) {
.ExampleRow1, .ExampleRow2, .ExampleRow3, .ExampleRow4 {height: auto; width: calc(50% - 15px); margin: 5px; max-width: 270px; }
}
@media (max-width: 348px) {
.ExampleRow1, .ExampleRow2, .ExampleRow3, .ExampleRow4 {height: auto; width: calc(100% - 15px); margin: 5px; max-width: 270px; }
}
img {height: auto;}

figure.image-caption {width: auto; max-width: 168px; display: inline-block; /*color: #000*/}

@media (min-width: 595px) {
figure.image-caption {width: calc((100% - 8rem)/4 - 8px); max-width: 240px; display: inline-block; /*color: #000;*/ vertical-align: top;}
}

@media (min-width: 340px) and (max-width: 594px) {
figure.image-caption {width: calc((100% - 4rem)/2 - 4px); max-width: 240px; display: inline-block; /*color: #000;*/ vertical-align: top;}
}

@media (max-width: 340px) {
figure.image-caption {width: calc(100% - 4rem); max-width: 240px; display: table; margin: 0 auto; /*color: #000;*/ vertical-align: top;}
}
#count {float: right;
font-size: 9px;
display: block;
background: #bbb;
padding: 2px 6px;
border-radius: 3px;
color: #fff;}