/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
@import url('https://fonts.googleapis.com/css2?family=Rochester&display=swap');

:root {
  --color1: #c99ad3;
  --color2: #f8def1;
  --color3: #f46e3a;
  --color4: #faaf28;
}
a, .footer-container li a:hover { color: var(--color1); }
#header { background: var(--color1) !important; }
#header nav { font-size: 13px; }
#header a { color: white; }
#header a:hover { color: black; }
#header .menu > ul > li { position: relative; }
.top-menu { padding: 3px 0; }
.top-menu a[data-depth="0"] { font-size: 15px;
  font-weight: normal;
  text-decoration: none !important;
  padding: 25px 20px 25px 20px;
  display: block;
  cursor: pointer;
  text-transform: uppercase;
}
.top-menu li:hover a[data-depth="0"] {
  color: var(--color1) !important;
  background-color: #ffffff;
}
.top-menu a:not([data-depth^="0"]) {
  color: black !important;
}
.top-menu a:not([data-depth="0"]):hover {
  color: var(--color1) !important;
}
.top-menu .sub-menu { width: auto; min-width: auto; top: 100% !important; margin-left: 0; }
#carousel figure { width: 100%; }
#carousel figure img { display: block; object-fit: cover; }
#carousel .carousel-inner { height: 500px; }
#carousel .right.carousel-control { overflow: hidden; }
#custom-text { padding: 0; margin-bottom: 0; border-radius: 0 }
ul.custom-list { width: 100%; float: left; clear: both; border-left: 1px dotted #dadada; border-right: 1px dotted #dadada; margin: 0; padding: 0; list-style: none; }
.custom-list-item { float: left; padding: 10px 20px; display: block; border-left: 1px dotted #dadada; }
.custom-item-img { float: left; width: 16px; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; }
.custom-list-item-0 .custom-item-img { background-image: url(../img/strawberry.png); }
.custom-list-item-1 .custom-item-img { background-image: url(../img/pot.png); }
.custom-list-item-2 .custom-item-img { background-image: url(../img/heart.png); }
.custom-list-item-3 .custom-item-img { background-image: url(../img/smile.png); }
.custom-list-item .custom-item-title { font-size: 13px; text-transform: uppercase; padding-top: 1px; color: var(--color1); float: left; padding-left: 10px; }

#wrapper { background: #fff; }
#wrapper .breadcrumb i { display: inline-block; font-size: 20px; line-height: 17px; margin-right: 5px; }
#wrapper .breadcrumb ol { display: inline-block; }
#wrapper .breadcrumb li::after { content: ">"; }

.row_product { width: 100%; float: left; margin-top: 1rem; }
.top_product_block { padding: 15px; background-color: #faecf6; }
.left_block_product { width: 455px; float: left; }
.product-cover { float: left; border: 1px solid #eeeeee; margin-bottom: 10px; position: relative; background-color: #ffffff; }
.product-cover .layer { background: hsla(0, 0%, 100%, .7); }
.product-cover .layer .zoom-in { font-size: 6.25rem; color: #7a7a7a; }
#main .images-container .js-qv-mask { width: calc(100% - 40px); margin: 0 auto; }
.images-container .product-images > li.thumb-container .thumb { margin-right: 3px; margin-bottom: 0; }
.product-images > li.thumb-container .thumb { border: 1px solid #eeeeee; }
.product-images > li.thumb-container .thumb.selected, .product-images > li.thumb-container > .thumb:hover { border: 1px solid var(--color1); }
.right_block_product { width: calc(100% - 455px); float: left; padding-left: 30px; }
.right_block_product .h1 { text-transform: none; color: var(--color1); }
.control-label-description { font-family: 'Rochester', cursive; font-size: 20px; padding-right: 20px; display: block; color: var(--color1); padding-bottom: 10px; }
.product_description_short { line-height: 20px; font-size: 13px; }
.facebook.icon-gray:hover, .facebook::before { background-image: url(../img/facebook.svg); }
.twitter.icon-gray:hover, .twitter::before { background-image: url(../img/twitter.svg); }
.pinterest.icon-gray:hover, .pinterest::before { background-image: url(../img/pinterest.svg); }
.tabs { display: none; }

.footer-container .h3, .footer-container .h4 {
  text-transform: none !important;
  font-family: 'Rochester', cursive;
  font-size: 25px;
  color: var(--color1) !important;
}
.after-footer {
  height: 2.5rem;
  background-color: var(--color1);
}

.block-category {
  background-color: var(--color2);
}

.block-category h1 {
  text-align: center;
  color: white;
  font-family: 'Rochester', cursive;
  font-size: 4rem;
  text-transform: none;
}