:root {
  --fontBase:-apple-system, Helvetica, Arial, sans-serif;
  --textSmall:.8125rem;
  --textSmallLine:1.125rem;
  --textBase:1rem;
  --textBaseLine:1.5rem;
  --textlarge:1.125rem;
  --textlargeLine:1.5rem;
  --textSubtitle:1.5rem;
  --textSubtitleLine:1.75rem;
  --textTitle:2.25rem;
  --textTitleLine:2.75rem;
  --colorWhite:rgba(255,255,255,1);
  --colorBlack:rgba(33,28,42,1);
  --colorGray:rgba(153,153,153,1);
  --colorRed:rgba(255,0,0,1);
  --colorOrange:rgba(251,170,26,1);
  --colorYellow:rgba(255,238,0,1);
  --colorGreen:rgba(113,212,77,1);
  --colorBlue:rgba(52,111,150,1);
  --colorBlueLight:rgba(242,246,252,1);
  --colorBlueDark:rgba(38,81,110,1);
  --borderBlue:rgba(52,111,150,.16);
  --borderGray:rgba(221,221,221,1);

  --mainWidth:72rem;
  --offset:.375rem;
  --offsetNegative:-.375rem;
  --offsetX2:calc(.375rem * 2);
  --textWidth:40rem;
}

* {margin:0; padding:0; font-size:100%}
body {font-family:var(--fontBase); font-weight:400; color:var(--colorBlack); background-color:var(--colorWhite)}
section, article {padding:0 1rem}
div.holder {max-width:var(--mainWidth); margin-left:auto; margin-right:auto}
div.grid {display:flex; flex-direction:row; flex-wrap:wrap; align-self:flex-start; margin:0 var(--offsetNegative)}
div.grid>div {margin:0 var(--offset); align-self:flex-start}
.\(1\/1\) {width:100%}
.\(1\/2\) {width:calc(100% / 2 - var(--offsetX2))}
.\(1\/3\) {width:calc(100% / 3 - var(--offsetX2))}
.\(2\/3\) {width:calc(100% / 3 * 2 - var(--offsetX2))}
.\(1\/4\) {width:calc(100% / 4 - var(--offsetX2))}
.\(2\/4\) {width:calc(100% / 4 * 2 - var(--offsetX2))}
.\(3\/4\) {width:calc(100% / 4 * 3 - var(--offsetX2))}
.\(1\/5\) {width:calc(100% / 5 - var(--offsetX2))}
.\(2\/5\) {width:calc(100% / 5 * 2 - var(--offsetX2))}
.\(3\/5\) {width:calc(100% / 5 * 3 - var(--offsetX2))}
.\(4\/5\) {width:calc(100% / 5 * 4 - var(--offsetX2))}
.\(1\/6\) {width:calc(100% / 6 - var(--offsetX2))}
.\(2\/6\) {width:calc(100% / 6 * 2 - var(--offsetX2))}
.\(3\/6\) {width:calc(100% / 6 * 3 - var(--offsetX2))}
.\(4\/6\) {width:calc(100% / 6 * 4 - var(--offsetX2))}
.\(5\/6\) {width:calc(100% / 6 * 5 - var(--offsetX2))}

/*Top Bar*/
div.topBar {padding:.375rem 1rem; background-color:var(--colorBlue)}
div.topBar div.holder div.grid {justify-content:space-between}
div.phone {width:auto}
div.locale {width:auto}
div.topBar a, div.phone p {display:inline-block; font-size:var(--textlarge); line-height:2rem}
div.topBar a, div.topBar p, div.topBar span {color:var(--colorWhite)}
a.navButton {width:2rem; margin-right:.5rem; text-align:center}
div.phone a.viber, div.phone a.telegram {display:inline-block; width:2rem; line-height:2rem; font-size:var(--textBase); text-align:center; border-radius:50%}
div.phone a.viber {margin:0 .5rem; background-color:#7B519D}
div.phone a.telegram {margin-right:1rem; background-color:#20A0E1}
div.phone a.mobile-link {display:none}
div.phone a.desktop-link {}

div.locale {text-align:right}
div.locale a {padding:0 .5rem; font-size:var(--textBase); border-radius:.125rem}
div.locale a.ru {margin-left:.5rem}
div.locale a.ru:after {content:" Ru"}
div.locale a.ua:after {content:" Ua"}
div#links {display:none; padding:1rem 0 1.5rem 0}
div#links a {margin:0 1.5rem .25rem 0; line-height:2.5rem}
div#links a i {display:inline-block; width:2rem; margin-right:.5rem; text-align:center; color:var(--colorYellow)}

/*Header and Footer*/
header {position:sticky; top:0; z-index:3; padding:1rem; background-color:#E8F0FC}
a.logo, span.logo, a.basket, div.search input, div.search button {font-size:var(--textlarge); line-height:2.5rem}
a.logo, span.logo {display:block; font-size:1.625rem}
a.logo:before, span.logo:before {content:"Viagra Shop"; margin-right:.5rem}
a.basket, .basketPoint {display:inline-block}
a.basket span {margin-left:.5rem}
.basketPoint {width:1.75rem; margin-left:.5rem; line-height:1.75rem; text-align:center; color:var(--colorWhite); background-color:var(--colorRed); border-radius:50%}
div.search {position:relative; border-radius:.25rem; background-color:var(--colorWhite)}
div.search input, div.search button {display:block; border:none; outline:none}
div.search input {width:calc(100% - 3rem); padding-left:.25rem; border-radius:.25rem; background-color:var(--colorWhite)}
div.search button {width:3rem; position:absolute; top:0; right:0; text-align:center; cursor:pointer; color:var(--colorBlue); background:none; border-top-right-radius:.25rem; border-bottom-right-radius:.25rem}
div.search button:hover {background-color:var(--colorYellow)}

/*Links Bar*/
div.linksBar {padding:.5rem 1rem .75rem 1rem; margin-bottom:2rem; background-color:#E8F0FC}
div.quickLinks a {display:inline-block; font-size:var(--textlarge); line-height:var(--textlargeLine); margin-right:1rem}
div.quickLinks a span {margin-left:.25rem; border-bottom:1px dashed var(--colorBlueDark)}
a.catButton::after {content:"💊 Еще"}
a.ua-link::after {content:"💊 Ще"}
div.catalogLinks {display:none; margin-top:1.5rem}
div.catalogLinks p.large a {font-weight:600; color:var(--colorBlack)}
div.catalogLinks ul {margin-bottom:1.5rem}

/*WICart*/
#bcaption {color:var(--colorGray)}
#containerBasket {width:auto; width:100%}

/*Basket*/
div.basket, div.basketForm {width:calc(100% / 4 * 3); margin:0 auto}
div.basketForm form {display:flex; flex-direction:row; flex-wrap:wrap; align-self:flex-start; margin:0 var(--offsetNegative)}
div.basketForm form>div {margin:0 var(--offset); align-self:flex-start}
div.basketForm form p {margin:2rem 0 1rem 0}
div.basketForm form input {margin-bottom:.75rem}
.basketNote {text-align:right;}
.basketTitle {padding:3.5rem 0 2rem 0}
.basketProduct {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; margin-bottom:.625rem; padding:.25rem .5rem; font-size:1.25rem; line-height:2rem; border:1px solid var(--borderGray); border-radius:.375rem}
.basketProduct > div {align-self:center}
.basketProduct span {display:inline-block}
.basketProduct a.small {display:inline-block; margin-left:.5rem; color:var(--colorGray)}
.basketProduct a.small:hover {color:var(--colorRed)}
.prodPhoto {width:3rem}
.prodPhoto img {display:block}
.prodName {width:calc(50% - 3.625rem); padding-left:.625rem}
.basket_price {width:10%; font-size:var(--textBase); text-align:right}
.prodNumbers {width:20%; text-align:center}
.prodCost {width:15%}
.basket_num_buttons {cursor:pointer; color:var(--colorBlue)}
.basket_num_buttons:hover {color:var(--colorBlueDark)}
.basket_num {margin:0 .5rem; padding:0 1rem; background-color:var(--colorBlueLight); border-radius:.375rem}
.prodCost:after {content:" грн."; font-size:var(--textBase)}
div.basketTotal {margin:1rem 0 3rem 0; padding:.5rem 2.5rem .5rem 0; text-align:right; background-color:var(--colorBlueLight)}
div.basketTotal p.large {font-size:1.25rem; line-height:1.5rem; font-weight:600}
div.basketForm h3 {margin-bottom:1rem}
div.basketForm div.grid > div {margin-bottom:1rem}
div.basketForm input {display:block; width:calc(100% - .75rem); padding-left:.5rem; line-height:2.75rem; border:none; outline:none; border:2px solid var(--borderGray); border-radius:.25rem}
div.basketForm input:focus {border-color:var(--colorBlue)}
div.basketForm button {display:block; width:100%; line-height:2.75rem; text-align:center; cursor:pointer; border:none; outline:none; border-radius:.375rem; background-color:var(--colorYellow)}
div.basketForm button:hover {background-color:#FFF34D}
div.basket a.back-button {display:inline-block; padding:0 1rem; font-size:var(--textlarge); line-height:2.75rem; color:var(--colorBlue); border-radius:.375rem; background-color:#E8F0FC;}
div.basket a.back-button:hover {background-color:var(--colorBlueLight);}

/*Footer*/
footer {padding:2rem 1rem 3rem 1rem; background-color:var(--colorBlueLight)}
footer a {display:inline-block}
footer a, footer ul li {line-height:1.75rem}
footer a.logo, footer span.logo {margin-bottom:.625rem; font-size:1.5rem; line-height:2rem; font-weight:900; color:var(--colorBlack)}
footer .\(1\/1\) {padding-top:2rem}
footer .\(1\/1\) p.large {margin-bottom:1rem}
footer .\(1\/1\) p.large a {margin-right:1rem; margin-bottom:.5rem}

/*Main*/
div.promo, div.leaders, div.new-and-cat, div.articles, div.thematic, div.instructions, div.seoText, div.catalog, div.product {margin-bottom:4rem}
div.promo h1 {margin-bottom:1.5rem}
div.banner img {border-radius:.25rem}

div.facts {margin-bottom:4rem}
div.facts span {display:block; width:4rem; height:4rem; float:left; text-align:center; font-size:1.75rem; line-height:4rem; border-radius:50%; color:var(--colorYellow); background-color:var(--colorBlue)}
div.facts p {margin:0 1rem 0 5rem; padding:.5rem 0}

div.categories a {display:block; position:relative; margin-bottom:var(--offsetX2)}
div.categories a span {display:block; position:absolute; left:1rem; bottom:1rem; font-size:var(--textlarge); line-height:var(--textlargeLine); font-weight:600; color:var(--colorWhite)}
div.categories a span i {display:none}
div.categories a:hover span i {display:inline; margin-right:.25rem}

div.articles {margin-bottom:1.5rem}
div.articlePreview {padding-bottom:2.5rem}
div.articlePreview a {color:var(--colorBlack)}
div.articlePreview a:hover {color:var(--colorBlueDark)}
div.articlePreview a.img {display:block; width:11.375rem; float:left}
div.articlePreview img {width:100%}
div.articlePreview p {margin:0 2rem 0 12.5rem}
div.articlePreview p.large {margin-bottom:.25rem; font-weight:600}
div.articlePreview p.light {margin-bottom:.5rem}

div.thematic {padding:2rem 1.5rem; background-color:var(--colorBlueLight)}
div.thematic p.large {margin-right:4rem}

/*Catalog*/
div.catalog div.grid>div {}
div.catalogTitle {text-align:center; margin-bottom:3rem}
div.catalogTitle p {display:inline-block; margin-top:.5rem; padding:0 1rem; line-height:2rem; border:1px solid var(--borderGray)}
div.catalogNavigation {align-self:flex-start; padding:.5rem 0 1rem 0; background-color:var(--colorBlueLight)}
div.catalogNavigation label {position:relative; z-index:2; cursor:pointer; font-weight:bold; color:var(--colorBlack)}
div.catalogNavigation label:after {content:"+"; display:inline-block; width:1.25rem; position:absolute; top:.375rem; right:.625rem; text-align:center}
div.catalogNavigation input {display:none}
div.catalogNavigation input:checked + label,
div.catalogNavigation input:checked + label:hover {}
div.catalogNavigation input:checked + label:after {content:"–"}
div.catalogNavigation ul {overflow:hidden; height:0px; position:relative; z-index:1}
div.catalogNavigation input:checked ~ ul {height:auto}
div.catalogNavigation label, div.catalogNavigation ul li a {display:block; padding:.375rem 1rem; font-size:var(--textBase); line-height:1.25rem}
div.catalogNavigation a.active {background-color:var(--borderBlue); cursor:default}

div.card {width:calc(100% / 4 - 2rem - 2px - var(--offsetX2)); margin-bottom:var(--offsetX2) !important; padding:1rem 1rem 1.5rem 1rem; position:relative; align-self:stretch; border:1px solid var(--borderGray)}
div.random div.card {width:calc(100% / 5 - 2rem - 2px - var(--offsetX2)); margin-bottom:var(--offsetX2) !important; padding:1rem 1rem 1.5rem 1rem; position:relative; align-self:stretch; border:1px solid var(--borderGray)}
div.promo div.card, div.leaders div.card, div.thematic div.card {width:calc(100% / 6 - 2rem - 2px - var(--offsetX2))}
div.new-and-cat div.card {width:calc(100% / 3 - 2rem - 2px - var(--offsetX2))}
div.card img {max-height:11rem; margin-bottom:.25rem}
div.card a {display:block; font-size:var(--textlarge)}
div.card span {display:block}
div.card span.preview_text {margin:.5rem 0; font-size:var(--textBase)}
div.card span.stars {height:3rem}
div.card span.stars i {font-size:var(--textSmall); color:var(--colorBlack)}
div.card span.price {margin-bottom:1rem; font-size:1.25rem; font-weight:bold}
div.card span.price:after {content:" грн."; font-size:var(--textSmall);}
div.card a.button {line-height:2.25rem}
div.sale:before, div.top:before, div.new:before, div.alcohol:before {content:""; display:inline-block; width:2.5rem; height:2.5rem; position:absolute; left:.5rem; top:.5rem; background-size:cover; border-radius:50%}
div.sale:before {background-image: url(../images/sale.svg)}
div.top:before {background-image: url(../images/leader.svg)}
div.new:before {background-image: url(../images/new.svg)}
div.alcohol:before {background-image: url(../images/alcohol.svg)}
div.sale span.price {color:var(--colorRed)}
div.card a.button {display:inline-block;}

/*Product*/
div.product {padding-bottom:3rem}
div.product div.grid {padding-left:1rem}
div.productDesk h3 {margin:2rem 0 1rem 0}
div.productDesk form {margin:1rem 0 2rem 0}
p.productStatus {margin:1rem 0; padding:.5rem 1rem; border-radius:.375rem; background-color:rgba(113,212,77,.16)}
p.productStatus i {margin-right:.25rem}
ul.productTable li {vertical-align:top; padding:.25rem 0; border-bottom:1px solid var(--borderGray)}
ul.productTable li span, ul.productTable li strong {vertical-align:top; display:inline-block; width:50%}
ul.productTable li strong {font-weight:400}

div.productDosage {display:flex; flex-direction:row; flex-wrap:wrap}
div.productDosage div {width:20%; text-align:center}
div.productDosage input[type=radio] {display:none}
div.productDosage label {display:block; padding:.625rem 0; font-size:var(--textSmall); line-height:var(--textSmallLine); cursor:pointer; background-color:var(--colorBlueLight); border:2px solid white; border-radius:.375rem}
div.productDosage label:hover {background-color:#E8F0FC}
div.productDosage label span {display:block; margin-top:.25rem; font-size:var(--textlarge); line-height:var(--textlargeLine); font-weight:700}
div.productDosage label span::after {content:" грн."; font-size:var(--textSmall)}
div.productDosage input[type=radio]:checked + label {background-color:white; border:2px solid var(--colorBlue)}
div.productDosage input[type=radio]:disabled + label {background-color:#F0F0F0; cursor:default}
div.productDosage p {width:100%; margin-top:1rem}
div.productDosage p a {font-size:var(--textlarge); line-height:2.5rem; border-radius:.375rem}
div.productDosage p a.blue {margin-left:.625rem}

div.productPhotos {position:relative}
div.productPhotos .owl-carousel {/*border:1px solid var(--borderGray)*/}
span.productLables {position:absolute; top:.5rem; left:.5rem; right:.5rem; z-index:2; text-align:right}

div.productText h3 {margin-bottom:.625rem}
div.productText p {margin-bottom:1rem}
div.productText p.large {margin-bottom:.25rem; font-size:1.25rem; font-weight:600}

div.reviews {padding-top:3rem}
div.reviews h3 {margin:0}
div.reviews p.rating {margin:.25rem 0 1.5rem 0}
div.review {padding:.75rem 0; border-top:1px solid var(--borderGray)}
div.review p.large {font-weight:600}
div.review p.large span {margin-left:.25rem}
div.reviewForm {margin-top:1.5rem; padding:1rem; position:relative; background-color:var(--colorBlueLight)}
div.reviewForm input, div.reviewForm button {display:block; font-size:var(--textLarge); line-height:2.5rem; border:none; outline:none}
div.reviewForm input {width:calc(100% - .5rem); margin-bottom:0.5rem; padding-left:.5rem; border-radius:.25rem}
div.reviewForm button {width:16rem; text-align:center; cursor:pointer; color:var(--colorBlack); background:none; border-top-right-radius:.25rem; border-bottom-right-radius:.25rem; background-color:var(--colorYellow)}
/*Stars*/
.rating-area {
	overflow: hidden;
  width: 11.25rem;
	margin: 1rem 0 2rem 0;
}
.rating-area:not(:checked) > input {
	display: none;
}
.rating-area:not(:checked) > label {
  float: right;
	width: 2rem;
	padding: 0 .25rem 0 0;
	cursor: pointer;
	font-size: 2rem;
	line-height: 2rem;
	color: lightgrey;
	text-shadow: 1px 1px #bbb;
}
.rating-area:not(:checked) > label:before {
	content: '★';
}
.rating-area > input:checked ~ label {
	color: gold !important;
  border:none !important;
  background:none !important;
	text-shadow: 1px 1px #c60;
}
.rating-area:not(:checked) > label:hover,
.rating-area:not(:checked) > label:hover ~ label {
	color: gold !important;
}
.rating-area > input:checked + label:hover,
.rating-area > input:checked + label:hover ~ label,
.rating-area > input:checked ~ label:hover,
.rating-area > input:checked ~ label:hover ~ label,
.rating-area > label:hover ~ input:checked ~ label {
	color: gold !important;
	text-shadow: 1px 1px goldenrod;
}
.rate-area > label:active {
	position: relative;
}
span.stars {color:var(--colorOrange)}


/*Instruction*/
div.instruction {margin-bottom:3rem}
div.instruction h1, div.instruction p.large {margin-bottom:1.5rem}
div.instruction p {margin-bottom:1rem; margin-right:3rem}

div.instructions a {display:block; margin:0 var(--offset) var(--offsetX2) var(--offset); padding:1rem 0; position:relative; font-size:var(--textlarge); line-height:var(--textlargeLine); background-color:var(--colorBlueLight)}
div.instructions a span {display:block; margin:0 5rem 0 1.25rem}
div.instructions a i {display:inline-block; width:2.5rem; height:2.5rem; position:absolute; top:1rem; right:1.5rem; font-size:2rem; line-height:2.5rem; text-align:center}
div.instructions a:hover {background-color:#E8F0FC}

/*Вопросы и ответы*/
div.question {margin-bottom:2rem}
div.question p.large {margin-bottom:0.5rem; font-weight:700}
.note {padding:1rem 1.5em 2rem 1.5rem; background-color:var(--colorBlueLight)}

/*Сертификаты*/
div.sertifikaty img {width:90%; margin-bottom:0.5rem; border:4px solid var(--colorBlue)}
div.sertifikaty p {margin-bottom:2rem}

/*Форма братной связи*/
.notePhone {margin-bottom:3rem; padding:1rem 1rem 1rem 1rem; background-color:var(--colorBlueLight)}
.form input, .form textarea {display:block; width:calc(100% - .75rem); margin-bottom:0.5rem; padding-left:.5rem; line-height:2.75rem; border:none; outline:none; border:2px solid var(--borderGray); border-radius:.25rem}
.form input:focus, .form textarea:focus {border-color:var(--colorBlue)}
.form button {display:block; width:100%; line-height:2.75rem; text-align:center; cursor:pointer; border:none; outline:none; border-radius:.375rem; background-color:var(--colorYellow)}
.form button:hover {background-color:#FFF34D}

/*Status*/
div.status {margin-bottom:2rem; padding:1rem 1rem 2rem 1rem; text-align:center; border-radius:.25rem}
.success {background-color:var(--colorGreen)}
.warning {background-color:var(--colorYellow)}
.error {background-color:var(--colorRed); color:var(--colorWhite)}

/*Typography*/
h1, h2, h3 {font-weight:700}
h1 {font-size:var(--textTitle); line-height:var(--textTitleLine)}
h3 {font-size:var(--textSubtitle); line-height:var(--textSubtitleLine); margin-bottom:1.5rem}
p, ul, ol, .base, input, label, textarea, button {font-size:var(--textBase); line-height:var(--textBaseLine); color:var(--colorBlack)}
ul {list-style:none}
ol {list-style:decimal; list-style-position:inside}
.small {font-size:var(--textSmall); line-height:var(--textSmallLine)}
.large {font-size:var(--textlarge); line-height:var(--textlargeLine)}
.light {color:var(--colorGray)}
img {max-width:100%; height:auto; margin:0; padding:0; border:none; outline:none}
strong {font-weight:bold}
h3 a.base {margin-left:.5rem; font-weight:400; color:var(--colorBlue)}
h3 a.base:hover {color:var(--colorBlueDark)}
.list li {padding-left:1rem}
a.logo, span.logo {display:inline-block; font-weight:900; color:var(--colorBlack)}
img.certificate {float:left}
p.breadCrumbs {margin-bottom:2rem}
.right {text-align:right}
.fa-heart, .fa-arrow-circle-right {color:var(--colorYellow)}
.fa-star {color:#FF7849}
.fa-check-circle {color:#6DB528}
hr {max-width:var(--mainWidth); margin:0 auto; height:1px; color:#CCC; background-color:#CCC; border:0; outline:none}

a {color:var(--colorBlue); text-decoration:none; border:none; outline:none}
a:hover {color:var(--colorBlueDark)}
.button {display:inline-block; padding:0 1em; line-height:2rem; border-radius:.125rem; color:var(--colorBlack); background-color:var(--colorYellow); border-radius:.25rem; cursor: pointer}
.button:hover {background-color:#FFF34D}
a.darkLink, .darklink a {color:var(--colorBlack)}
a.darkLink:hover, .darklink a:hover {color:var(--colorBlueDark)}
a.active {color:var(--colorBlack) !important; background-color:var(--colorYellow)}
.blue {background-color:var(--borderBlue)}
.blue:hover {color:var(--colorWhite); background-color:var(--colorBlue)}

button {padding:0 1em; line-height:2rem; border-radius:.125rem; color:var(--colorBlack); border:none; outline:none; background-color:var(--colorYellow); border-radius:.25rem; cursor: pointer}
button.buy {line-height:2.25rem}

/*breadCrumbs*/
ul.breadCrumbs {margin-bottom:2rem}
ul.breadCrumbs li {display:inline-block}
ul.breadCrumbs li:after {content:" – "}
ul.breadCrumbs li:last-child:after {content:" ";}

/*Tabs*/
.tabs {margin-top:2rem !important; background-color:var(--colorBlueLight)}
.tabs > div {padding:2rem 0 1rem 0; background-color:var(--colorWhite)}
.tabs > div, .tabs > input {display:none}
.tabs label {display:inline-block; padding:0 1.5rem; line-height:3rem; cursor:pointer; border-top:2px solid var(--colorBlueLight)}
.tabs input[type="radio"]:checked + label {color:var(--colorBlue); border-top:2px solid var(--colorBlue); background-color:var(--colorWhite)}

.tabs > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.tabs > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.tabs > input:nth-of-type(5):checked ~ div:nth-of-type(5) {display:block}

/*Phone Mask*/
button.btn {pointer-events:none; background-color:lightgray !important;}
button.btn--active {pointer-events:auto; cursor:pointer; background-color:#FFF34D !important}
span.code {display:block; width:2.5rem; float:left; line-height:2.75rem; text-align:right; border:2px solid var(--borderGray); border-right:none; border-radius:.25rem 0 0 .25rem}
/*input.phone {width:calc(100% - 3.25rem) !important; border-left:none !important; border-radius:0 .25rem .25rem 0 !important;;}*/
input.phone--success {background-image:url("/images/check-icon.svg"); background-position:right center; background-repeat:no-repeat}
.phoneinput:focus-within span {border-color:var(--colorBlueDark)}

/*Search*/
div.search-result {padding-bottom:3rem}
div.search-result p {margin-top:0.5rem; margin-bottom:1.5rem}
div.search-result a {margin-right:0.5rem}

@media screen and (max-width:1024px)
{
  section, article {padding:0 .625rem}
  div.holder {max-width:50rem}
  div.topBar div.holder, header div.holder, div.linksBar div.holder, footer div.holder {max-width:none; width:auto}

  /*Top Bar*/
  div.topBar {padding:.5rem .625rem}

  /*Header*/
  header {padding:.625rem}
  header .\(1\/5\) {width:calc(3.75rem - var(--offsetX2))}
  header .right {position:relative; text-align:center}
  header a.logo, header span.logo, a.basket {display:block; font-size:1.5rem; text-align:center}
  header a.logo:before, header span.logo:before, a.basket:after {content:""; margin-left:0; margin-right:0}
  header a.logo, header span.logo {background-color:var(--colorYellow); border-radius:.375rem}
  header a.logo i, header span.logo i {color:var(--colorBlue)}
  .basketPoint {width:1.25rem; position:absolute; top:0; right:0; margin-left:0; line-height:1.25rem; font-size:var(--textSmall)}
  div.search {width:calc(100% - 7.5rem - var(--offsetX2))}
  a.basket span {display:none}

  /*Links Bar*/
  div.quickLinks a {line-height:2rem}

  /*Main*/
  div.promo h1 {width:auto}
  div.banner {padding-bottom:1rem}
  div.categories {margin-top:3rem !important}
  div.categories a img {width:100%}
  div.thematic p.large {margin:0 0 3rem 0}
  div.facts div.grid>div {margin-bottom:1.5rem}
  div.facts p {margin:0 0 0 5rem}

  /*Common*/
  div.promo, div.leaders, div.new-and-cat, div.thematic, div.catalog, div.catalogTitle, div.product {margin-bottom:3rem}
  div.banner, div.facts div.grid>div, div.new-and-cat .\(1\/2\), div.thematic .\(1\/2\), div.seoText .\(1\/2\), div.catalogCards, div.product {width:calc(100% - var(--offsetX2))}
  div.new-and-cat div.categories .\(1\/2\), div.instructions a {width:calc(50% - var(--offsetX2))}
  div.seoText .\(1\/2\) {margin-bottom:1rem}
  img.certificate {float:none}

  /*Catalog*/
  div.card {width:calc(100% / 3 - 2rem - 2px - var(--offsetX2)) !important; margin-bottom:var(--offsetX2) !important}
  div.card img {max-height:none; width:100%}
  div.sale:before, div.top:before, div.leader:before, div.new:before, div.alcohol:before {width:4rem; height:4rem}
  div.catalogNavigation {display:none}

  /*Product*/
  div.product div.grid {padding-left:0}
  div.basket br {display:none;}

  /*Articles*/
  div.articles {margin-bottom:2rem}
  div.articlePreview {padding-bottom:2rem}
  div.articlePreview a.img {width:auto; float:none; margin-bottom:1rem}
  div.articlePreview p {margin:0}
}

@media screen and (max-width:768px)
{
  section .\(1\/3\) {width:calc(100% - var(--offsetX2))}
  section .\(2\/3\) {width:calc(100% - var(--offsetX2))}
  .note {margin-bottom:4rem;}

  h1 {font-size:1.75rem; line-height:2.25rem}
  div.productDosage p a {display:block; text-align:center}
  div.productDosage p a.blue {margin:0; margin-top:1rem}

  /*Top Bar*/
  div.topBar div.holder div.grid {justify-content:space-between}
  div.phone p span, div.phone span.viber, div.phone span.telegram {display:none}
  div.locale a.active {display:none}
  div.locale a.ua:after {content:"Ua"}
  div.locale a.ru:after {content:"Ru"}
  div#links a {display:block; margin:0}
  /*div.search button {display:none}*/
  div.phone a.mobile-link {display:inline-block}
  div.phone a.desktop-link {display:none}

  /*Links Bar*/
  div.quickLinks a {display:none}
  div.quickLinks a.catButton {display:block; line-height:2.5rem; margin:0; text-align:center; border:1px solid rgba(52,111,150,.40)}
  div.quickLinks a.catButton::after {content:"💊 Каталог препаратов"}
  div.quickLinks a.ua-link::after {content:"💊 Каталог товарів"}

  /*Footer*/
  footer {padding-top:1rem}
  footer ul {margin-bottom:1rem}
  footer a {display:block; line-height:2.25rem; border-bottom:1px solid var(--borderBlue)}
  footer a.logo, footer span.logo {border:none}
  footer .\(1\/1\) p.large a {margin:0}

  /*Basket*/
  div.basket, div.basketForm {width:100%}
  div.basketForm form>div {width:100%}
  div.basket div.holder, div.basketForm div.holder {max-width:none; width:auto; padding:1rem .625rem}
  .basketProduct {padding:.625rem; font-size:var(--textlarge); line-height:var(--textlargeLine)}
  .prodName {width:calc(100% - 4rem); padding-left:1rem}
  .basketProduct a.small {display:block; float:right; margin:.25rem 0 0 0; font-size:var(--textBase)}
  .basket_price {display:none;}
  .prodNumbers {width:10rem; padding:1rem 0 1rem 4rem; text-align:left}
  .basket_num_buttons, .basket_num, .prodCost {line-height:1.75rem}
  .basket_num_buttons {width:1.75rem; text-align:center; border-radius:50%; border:1px solid var(--colorBlue)}
  .basket_num {display:inline-block}
  .prodCost {width:100%; padding:0 0 0 4rem; font-size:var(--textSubtitle);}
  .basketTotal {padding:.625rem; text-align:left}
  div.basket .\(1\/2\) {width:100% !important; text-align:left !important}

  /*Main*/
  div.thematic {margin-left:-.625rem; margin-right:-.625rem; padding-left:.625rem; padding-right:.625rem}
  div.categories a span {left:1.5rem; bottom:1.5rem; font-size:1.25rem}
  div.instructions a {min-height:2rem}
  div.seoText h3 br {display:none}
  .empty {display:none}
  .mbX0 {margin-bottom:0}

  /*Common*/
  div.catalogLinks .\(1\/4\) {width:calc(50% - var(--offsetX2))}
  div.card {width:calc(100% / 2 - 2rem - 2px - var(--offsetX2)) !important}
  div.categories div.grid .\(1\/2\), div.articles div.grid .\(1\/2\), div.instructions a, footer div.grid div, div.productDesk, div.productPhotos, div.instruction .\(1\/4\), div.instruction .\(3\/4\), div.basketForm div.grid > div {width:calc(100% - var(--offsetX2))}
  div.promo, div.leaders, div.new-and-cat, div.thematic, div.catalog, div.catalogTitle, div.instruction {margin-bottom:2rem}

  /*Catalog*/
  div.catalogTitle p {border:none; padding:0}

  /*Product*/
  div.productPhotos {padding-bottom:2rem; order:-1}
  ul.productTable li {margin-bottom:.5rem; padding:.25rem 0; font-size:var(--textlarge); line-height:var(--textlargeLine)}
  ul.productTable li span, ul.productTable li strong {display:block; width:100%}
  ul.productTable li span {margin-bottom:.125rem; font-size:var(--textSmall); line-height:var(--textSmallLine)}
  span.productLables img {width:4rem; height:4rem}
  div.productDosage div {width:50%}

  /*Instruction*/
  div.instruction p {margin-right:0}
}

@media screen and (max-width:320px)
{
  div.card {width:calc(100% - 2rem - 2px - var(--offsetX2)) !important}
}