/*** FIXES for existing content ***/

@media only screen and (max-width: 559px) {
	/* Enable buttons by default (without Hover) for low resolutions */
	.carousel .slick-prev,
	.carousel .slick-next,
	/*
	.carousel:hover .slick-prev,
	.carousel:hover .slick-next,
	*/
	.slick-prev:hover,
	.slick-next:hover {
		opacity: 1;
		visibility: visible;
	}
}
/*
.pr-box-list .slick-prev,
.pr-box-list .slick-next {
	background-color: #fff;
	border-color: #dedcdd;
}
*/


.modal-mobile-cartadd {
}
	.modal-mobile-cartadd .modal-body .btn {
		margin: 4px 6px 4px 0;
	}



.product-sizes {
}
	.product-sizes a.size {
		/*
		cursor: pointer;
		text-transform: uppercase;
		padding: 4px;
		margin-right: 4px;
		*/
		
		/*display: inline-block;*/
		float: left;
		margin: 0 1px 2px 0; /* reset? No need to set margin-right for "inline-block" - the space interval is enough!? We need some margin-bottom for tablets, when the sizes are on 2 rows */
		border: 2px solid transparent;
		/*border: 2px solid #f2f2f2;*/
		/*padding: 3px 6px;*/
		padding: 4px 2px; /* reset */
		min-width: 35px; /* Let's make all sizes same width */
		text-align: center;
		font-weight: bold;
	}
		.product-sizes .size.active,
		.product-sizes a.size:hover {
			border: 2px solid #ddb0b7;
			
			color: #ddb0b7;
			color: #ad8087;
		}
	/* https://css-tricks.com/snippets/css/clear-fix/ */
	.product-sizes:after {
		content: "";
		display: table;
		clear: both;
	}

/* FIX extra blank space after footer (web/partials/_drawers-shared) - it seems caused by the Q&A section before footer, where "visibility: hidden" is used instead of "display: none" */
	/* DROPDOWN MOBILE */
		/*
		.show-dropdown {
			cursor: pointer;
		}
		@media only screen and (max-width: 767px) {
			.dropdown {
				visibility: hidden;
				height: 0;
				opacity: 0;
				transition: all 0.4s linear;
			}
		}
		.show-dropdown.shown + .dropdown {
			opacity: 1;
			height: auto;
			visibility: visible;
		}
		*/
	/* DROPDOWN DESKTOP */
		/*
		.dropdown-sm {
			visibility: hidden;
			margin: 0 auto;
			height: 0;
			opacity: 0;
			transition: height 0.4s ease-in-out;
		}
		.show-dropdown.shown + .dropdown-sm {
			height: auto;
		}
		*/
/* Corrections/FIXES */
.policies-section {
	
}
	/* DROPDOWN MOBILE */
		@media only screen and (max-width: 767px) {
			.policies-section .dropdown {
				display: none;
			}
		}
		.policies-section .show-dropdown.shown + .dropdown {
			display: block;
		}
	/* DROPDOWN DESKTOP */
		.policies-section .dropdown-sm {
			display: none;
		}
		.policies-section .show-dropdown.shown + .dropdown-sm {
			display: block;
		}




/*** NEW ELEMENTS STYLES ***/

.page-about-quick-info {
	line-height: 160%;
	color: #616161;
}
	.page-about-quick-info h2 {
		margin-bottom: 20px;
	}

.ourAchievements {
	
}
	.ourAchievements .item {
		float: left;
		width: 20%;
		padding: 2% 3%;
	}
		.ourAchievements .item strong {
			display: block;
			font-size: 30px;
			line-height: 160%;
		}
	.ourAchievements .etsySeller {
		background-color: #cde;
	}
	.ourAchievements .etsySales {
		background-color: #bcd;
	}
	.ourAchievements .etsyRating {
		background-color: #abc;
	}
	.ourAchievements .fastDelivery {
		background-color: #9ab;
	}
	.ourAchievements .satisfaction {
		background-color: #89a;
	}
	/* https://css-tricks.com/snippets/css/clear-fix/ */
	.ourAchievements:after {
		content: "";
		display: table;
		clear: both;
	}



.ourAchievements_2 {
	
}
	.ourAchievements_2 .item {
		float: left;
		width: 50%;
		padding: 2% 3%;
	}
		/*
		.ourAchievements_2 .item:nth-child(1) {
			width: 50%;
		}
		*/
			/*.ourAchievements_2 .item:nth-child(1) .col_item,*/
			.ourAchievements_2 .item .col_item {
				float: left;
				width: 33%;
				padding: 2% 3%;
			}
		.ourAchievements_2 .item strong {
			display: block;
			font-size: 30px;
			line-height: 160%;
		}
	.ourAchievements_2 .etsySellerC {
		background-color: #def;
	}
		.ourAchievements_2 .etsySeller {
			background-color: #cde;
		}
		.ourAchievements_2 .etsySales {
			background-color: #bcd;
		}
		.ourAchievements_2 .etsyRating {
			background-color: #abc;
		}
	.ourAchievements_2 .onlineStoreC {
		background-color: #cde;
	}
		.ourAchievements_2 .personalizedOrders {
			background-color: #abc;
		}
		.ourAchievements_2 .fastShipping {
			background-color: #9ab;
		}
		.ourAchievements_2 .satisfaction {
			background-color: #89a;
		}
	/* https://css-tricks.com/snippets/css/clear-fix/ */
	.ourAchievements_2:after {
		content: "";
		display: table;
		clear: both;
	}


.ourAchievements_3 {
	
}
	.ourAchievements_3 .item {
		float: left;
		width: 50%;
		padding: 2% 3%;
	}
		/*
		.ourAchievements_3 .item:nth-child(1) {
			width: 50%;
		}
		*/
			/*.ourAchievements_3 .item:nth-child(1) .col_item,*/
			.ourAchievements_3 .item .col_item {
				float: left;
				width: 31%;
				padding: 2% 3%;
				margin: 0 1%;
			}
		.ourAchievements_3 .item strong {
			display: block;
			font-size: 30px;
			line-height: 160%;
		}
	.ourAchievements_3 .etsySellerC {
		background-color: #def;
	}
		.ourAchievements_3 .etsySeller {
			background-color: #cde;
		}
		.ourAchievements_3 .etsySales {
			background-color: #bcd;
		}
		.ourAchievements_3 .etsyRating {
			background-color: #abc;
		}
	.ourAchievements_3 .onlineStoreC {
		background-color: #cde;
	}
		.ourAchievements_3 .personalizedOrders {
			background-color: #abc;
		}
		.ourAchievements_3 .fastShipping {
			background-color: #9ab;
		}
		.ourAchievements_3 .satisfaction {
			background-color: #89a;
		}
	/* https://css-tricks.com/snippets/css/clear-fix/ */
	.ourAchievements_3:after {
		content: "";
		display: table;
		clear: both;
	}

/* PHOTOSWIPE */
.my-gallery {
	width: 100%;
	float: left;
}
	.my-gallery img {
		width: 100%;
		height: auto;
	}
	.my-gallery figure {
		display: block;
		float: left;
		margin: 0 5px 5px 0;
		width: 150px;
	}
	.my-gallery figcaption {
		display: none;
	}

.product-inner .main-img-content:hover,
.quickViewPhotoSwipe .main-img-content:hover {
	cursor: pointer;
}



/* June'19 - Header changes */
/*
// -----------------------------------------------------------------------------
// This file contains all styles related to the header of the site/application.
// -----------------------------------------------------------------------------

.header {
	position: relative;
	@include break("small") {
		 z-index: 1;
	}
	
}

// TOP HEADER PINK BOX
.top-header {
	padding: 6px 15px;
	background-color: $top-header-bg;
	color: $light-color;
	text-align: center;
	font-size: $text-size-small;
	
	@include break("small") {
		padding: 10px 0;
		text-transform: uppercase;
	}
	
	
	.slideup {
		
		@include break("small", "max") {
			height: 0;
			visibility: hidden;
			text-align: center;
			font-size: 12px;
			line-height: 18px;
			max-width: 90%;
			margin: 0 auto;
			
			@include transition($dropdown);
			
			.slideup-inner {
			   padding: 10px 0;
			}
			&.shown {
				height: auto;
				min-height: 40px;
				visibility: visible;
			}
		}
	}
	
}

.main-header {
	position: relative;
	padding: 10px 0;
	
	@include break('small') {
		background: $header-bg;
	}
}
*/

/* switches at 768px */
.top-header {
	background-color: #f16997;
	color: #fff;
	text-transform: none;
	font-weight: bold;
	
	padding: 0 0; /* 2020.02 */
}
	.top-header a {
		color: #fff;
		text-decoration: none;
	}
		.top-header a:focus,
		.top-header a:hover {
			text-decoration: underline;
		}
	
	.alignRight {
		float: right;
	}
	.menuHeaderContactsSupport,
	.menuHeaderTop,
	.menuHeaderSocial {
		list-style-type: none;
		margin: 0 0 0 25px;
		padding: 0;
		/*display: inline-block;*/
		float: left;
	}
		.menuHeaderContactsSupport li,
		.menuHeaderTop li,
		.menuHeaderSocial li {
			/*display: inline;*/
			float: left;
			margin: 0 0 0 7px;
		}
		/*.menuHeaderContactsSupport li a,*/
		.menuHeaderTop li a,
		.menuHeaderSocial li a {
			float: left;
		}
	.menuHeaderTop li:before {
		content: "|";
		float: left;
		margin: 0 7px 0 0;
	}
		.menuHeaderTop li:nth-child(1):before {
			display: none;
		}
		.menuHeaderTop .myProfileLink {
			text-decoration: underline;
		}
			.menuHeaderTop .myProfileLink:focus,
			.menuHeaderTop .myProfileLink:hover {
				text-decoration: none;
			}
	
	.menuHeaderContactsSupport li,
	.menuHeaderTop li,
	.menuHeaderSocial li a {
		padding: 6px 0;
	}
		.menuHeaderSocial li a {
			/*
			width: 20px;
			border-top: 1px solid #f00;
			text-indent: -9999px;
			*/
			display: block;
			height: 28px;
			width: 29px;
			background: url('../images/icons_social_7.png') no-repeat 500px -501px;
			text-indent: -9999px;
		}
		.menuHeaderSocial li.iconFacebook a {
			background-position: 0px -1px;
		}
		.menuHeaderSocial li.iconFacebook a:hover {
			background-position: 0px -41px;
		}
		.menuHeaderSocial li.iconLinkedin a {
			background-position: -40px -1px;
		}
		.menuHeaderSocial li.iconLinkedin a:hover {
			background-position: -40px -41px;
		}
		.menuHeaderSocial li.iconInstagram a {
			background-position: -80px -1px;
		}
		.menuHeaderSocial li.iconInstagram a:hover {
			background-position: -80px -41px;
		}
		.menuHeaderSocial li.iconPinterest a {
			background-position: -120px -1px;
		}
		.menuHeaderSocial li.iconPinterest a:hover {
			background-position: -120px -41px;
		}
		.menuHeaderSocial li.iconYoutube a {
			background-position: -160px -1px;
		}
		.menuHeaderSocial li.iconYoutube a:hover {
			background-position: -160px -41px;
		}

@media only screen and (max-width: 767px)
{
	.top-header .slideup {
		/* height: 0; */
		/* visibility: hidden; */
		/*
		text-align: center;
		font-size: 12px;
		line-height: 18px;
		max-width: 90%;
		margin: 0 auto;
		transition: height 0.4s ease-in-out;
		*/
		
		/* RESET: */
		height: auto;
		visibility: visible;
		max-width: 100%; /* 2020.02 - avoid adding offsets, so we can align it */
	}
	
	.top-header .slideup .icon-holder {
		display: none;
	}
	.alignRight {
		float: none;
	}
	.menuHeaderContactsSupport,
	.menuHeaderTop,
	.menuHeaderSocial {
		margin: 0 55px 0 0;
		float: left;
		display: block;
		clear: both;
	}
	
	.menuHeaderContactsSupport,
	.menuHeaderSocial {
		display: none;
	}
	
}

@media only screen and (min-width: 768px)
{
	.top-header {
		padding: 10px 0; /* 2020.02 */
	}
}

/* MENU */
/*
// MOBILE
.header-menu {
	text-align: right;
	@include break("small") {
		padding-top: 10px;
	}
}
.header-menu-mobile {
	@include break("small") {
		display: none;
	}
} 
.mobile-bottom-nav {
	height: 50px;
	font-size: $text-size-small;
	border-top: 1px solid #c5c5c5;
	border-bottom: 1px solid #c5c5c5;
	
	.navbar {
		padding: 4px 0;
	}
	@include break("small") {
		display: none;
	}
	
	li {
		padding: 0 8px;
	}
	a {
		display: inline-block;
		padding: 14px 0 15px;
		&:hover, &:active, &:focus,
		&.active {
			border-bottom: 2px solid #6fb1ca;
		}
	}
}

// SIDE SLIDE MENU

$mobile-nav-bg: #fff;
$mobile-nav-width: 264px;
$nav-trans: $slow;

.nav-mobile-menu {
	@include fixed($top: 0, $right: -100%);
	width: $mobile-nav-width;
	height: 100%;
	padding: 26px 26px 0;
	z-index: 999;
	margin-top: 0;
	background: $mobile-nav-bg;
	@include transition($nav-trans);
	
	.btn {
		margin: 0 auto 15px;
	}
	.navbar {
		text-align: right;
		> li {
			padding: 12px 15px 12px 0;
		}
	}
}

.opened .nav-mobile-menu {
	right: 0;
	@include transition($nav-trans);
}

.nav-mobile-menu:hover {
	overflow-y: auto;
}

.nav-trigger {
	@include absolute($top: 50px, $right: 0);
	cursor: pointer;
	z-index: 998;
	padding: 10px 15px 5px;
}
.icon-bars {
	display: block;
	position: relative;
	width: 16px;
	height: 1px;
	background-color: $black;
	vertical-align: middle;
	@include transition($nav-trans);
	
	&:before,
	&:after {
		@include absolute();
		content: " ";
		width: 100%;
		height: 1px;
		background-color: $black;
		@include transition($nav-trans);
	}
	&:before {
		top: 5px;
	}
	&:after {
		bottom: 5px;
	}
}


// NAVIGATION DESKTOP
.header-menu-desktop {
	display: none;
	text-align: right;
	@include transform(translateY(50%)); 
	@include break("small") {
		display: inline-block;
	}
	.nav-list {
		> li {
			display: inline-block;
			vertical-align: middle;
			padding: 10px 18px 10px;
			&.nav-item-icon {
				padding: 10px;
			}
			&:after {
				width: 100%;
				height: 2px;
				position: absolute;
				display: block;
			}
			&:hover:after {
				background: $brand-color;
			}
			a:hover {
				color: $dark-grey;
			}
		}
	}
}
*/

/* FIX - reset 22px text size as it's too wide for mobiles! */
.btn-big {
	font-size: 18px;
}


/* MENU BAR */
.page-main-menu {
	/*
	width: 100%;
	display: none;
	text-align: center;
	border-bottom: 1px solid #c5c5c5;
	font-size: 14px;
	*/
	
	text-align: left;
	display: block;
}
/*
.page-main-menu {
	border-bottom: none;
}
*/
	.page-main-menu .navbar {
		display: none;
	}
	@media only screen and (min-width: 768px)
	{
		.page-main-menu .navbar {
			display: inline-block;
		}
	}

.header-tools {
	/*
	position: absolute;
	top: 25px;
	right: 0;
	z-index: 10;
	*/
	
	position: absolute;
	top: 15px; /* up to max-width: 767px */
	right: 5px; /* fix 0px */
	z-index: 10;
}
@media only screen and (min-width: 768px)
{
	.header-tools {
		/*
		position: relative;
		float: right;
		*/
		
		position: relative;
		float: right;
		
		/* FIX - remove some values for absolute positioning */
		top: auto;
		right: auto;
		
		/* Align vertically */
		padding: 16px 0px 12px;
	}
}

/*
.mobile-bottom-nav {
	height: 50px;
	font-size: 12px;
	border-top: 1px solid #c5c5c5;
	border-bottom: 1px solid #c5c5c5;
}
*/

.header-menu-desktop {
	display: none;
	text-align: right;
}
@media only screen and (min-width: 768px)
{
	.header-menu-desktop {
		display: inline-block;
	}
}
	.header-menu-desktop .nav-list > li {
		padding: 10px 18px 10px 18px;
	}



.storeInfo {
	/*display: none;*/
	/*width: 500px;*/
	text-align: left; /* reset */
}
	.storeInfo .col_1,
	.storeInfo .col_2 {
		/*display: none;*/
	}
	.storeInfo .col_1 {
		float: left;
		border-left: 1px solid #ef6a97;
		padding: 0 0 0 14px;
		margin: 10px 20px 0 0;
	}
	.storeInfo .col_2 {
		float: left;
		border-left: 1px solid #ef6a97;
		padding: 0 0 0 14px;
		margin: 10px 0 0 0;
	}
	.storeInfo h4 {
		display: inline-block;
		font-size: 17px;
		color: #f16997;
	}
		.storeInfo a.etsyShop {
			/*display: none;*/
			
			position: relative;
			float: right;
			background-color: #ff5813;
			color: #fff;
			/*padding: 4px 22px 4px 6px;*/ /* Leave space for an icon */
			padding: 4px 6px 4px 6px;
			margin-top: -4px;
			margin-left: 7px;
		}
		.storeInfo a.etsyShop2 {
			background-color: #ff5813;
			color: #fff;
			padding: 4px 6px 4px 6px;
		}
	.storeInfo .col_13 {
		float: left;
		/*width: 32.5%;*/
		margin-left: 0.7%;
		margin: 6px 0 0 12px;
	}
		.storeInfo .col_13:nth-child(1) {
			margin-left: 0;
		}
		.storeInfo .col_13 h5 {
			font-size: 14px;
			color: #000;
			margin: 0 0 4px 0;
		}
		.storeInfo .col_13 p {
			margin: 0; /* reset */
			font-size: 13px;
			color: #6f9b9e;
		}
			.storeInfo .col_13 p span {
				color: #fd5d13;
			}
	
@media only screen and (max-width: 767px) {
	/* 2020.02 - hide the whole bar for low resolutions */
	.header-menu,
	.storeInfo {
		display: none;
	}
}
@media only screen and (max-width: 989px) {
	/* Hide selected items on mobiles only!! */
	.storeInfo .col_1 .col_13:nth-child(2),
	.storeInfo .col_2 .col_13:nth-child(1) {
		display: none;
	}
	.storeInfo .col_2 .col_13:nth-child(2) {
		margin-left: 0;
	}
}

/*@media only screen and (min-width: 768px) {*/
@media only screen and (min-width: 990px) {
	
	.storeInfo {
		float: right;
		}
		.storeInfo .col_1,
		.storeInfo .col_2 {
			display: block;
		}
		.storeInfo .col_1 .col_13:nth-child(2),
		.storeInfo .col_2 .col_13:nth-child(1) {
			display: block;
		}
		
		.storeInfo .col_1 {
			float: left;
			/*min-width: 380px;*/
		}
		.storeInfo .col_2 {
			float: left;
			/*min-width: 290px;*/
			margin: 20px 0 0 0px;
		}
		.storeInfo .col_1,
		.storeInfo .col_2 {
			margin: 7px 0 0 10px; /* reset */
		}
		/*
		.storeInfo .col_1 {
			width: 380px;
		}
		.storeInfo .col_2 {
			width: 290px;
		}
		*/
}


/* 2020.02.26 - add empty field to the registration/forgotten password forms, as an ANTI-SPAM protection */
.formPhone2 {
	display: none;
}

/* 2020.03.03 - home page - align the text left */
	.box-banner-1 .box-text,
	.box-banner-1 .box-text * {
		/*color: #fff;*/
		text-shadow: 1px 1px 3px #222;
	}
	.box-banner-1 .box-subtitle {
		font-size: 1.25rem;
	}
	
	/* Perhaps, if there's need to change the position/style of the text for .box-banner-2, it would be better to use ".box-banner-3" instead, and set up responsive styles... */
	@media only screen and (min-width: 768px) {
		.box-banner-2 .box-text {
			right: auto;
			width: 50%;
		}
	}
	.box-banner-2 .box-title {
		/*font-size: 86px;*/
		font-size: 1.25rem;
		color: #fff;
		text-shadow: 1px 1px 3px #222;
	}
	.box-banner-2 .box-subtitle {
		text-transform: none;
		font-size: 1.75rem;
		color: #fff;
		text-shadow: 1px 1px 3px #222;
	}


/* 2021.03.31 */
.icon-dhl {
	/*
	vertical-align: middle;
	width: 117px;
	height: 27px;
	background-image: url(../images/icon-dhl.png);
	background-repeat: no-repeat;
	*/
	background-image: url(https://www.cherryblo.com/images/icon-fedex-dhl.png);
	background-color: #ffcc00; /* FIX the height difference by setting the same color for DHL, where the pixels are transparent */
	width: 225px;
	height: 29px;
}