:root {
    --pink-tone-1: #e91e63;
}
/* Globals */

@font-face {
    font-family: 'Droid Arabic Kufi';
    font-style: normal;
    font-weight: 400;
    src: url("https://cdn.shopgo.me/static/vetrina/ttf/droid-kufi-regular.ttf");
}

@font-face {
    font-family: 'Droid Arabic Kufi';
    font-style: normal;
    font-weight: 700;
    src: url("https://cdn.shopgo.me/static/vetrina/ttf/droid-kufi-bold.ttf");
}

* {
	font-family: 'Roboto', 'Droid Arabic Kufi';
}

body.debug * {
	outline: dashed 1px rgba(0, 0, 0, 0.1);
}

[v-cloak] {
  display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	font-family: 'Roboto';
	border-color: #fdd835;
	-webkit-box-shadow: 0 0 0px 1000px rgba(255, 253, 231, 0.5) inset;
	transition: background-color 5000s ease-in-out 0s;
}

p:lang(ar) {
	line-height: 175%;
}

ul:lang(ar) {
	line-height: 200%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#main-content {
	flex: 1;
}

/* Utilities */

.flex {
	display: flex;
}

.flex-row {
	display: flex;
	flex-direction: row;
}

.flex-col {
	display: flex;
	flex-direction: column;
}

.flex-center {
	justify-content: center;
}

.flex-end {
	justify-content: flex-end;
}

.flex-between {
	justify-content: space-between;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-grow {
	flex-grow: 1;
}

.align-start {
	align-items: flex-start;
}

.align-center {
	align-items: center;
}

.align-end {
	align-items: flex-end;
}

.max960 {
	max-width: 940pt;
}

.max740 {
	max-width: 640pt;
}

.w100 {
	width: 100%;
}

.pad-sides {
	padding-left: 24pt;
	padding-right: 24pt;
}

.mb-24 {
	margin-bottom: 24pt;
}

.mt-24 {
	margin-top: 24pt;
}

.mb-40 {
	margin-bottom: 40pt;
}

.mt-40 {
	margin-top: 40pt;
}

.flip-h {
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.flip-h-ar:lang(ar) {
	transform: scaleX(-1);
}

/*
	Bootstrap breakpoints (for reference)

	// Small devices (landscape phones, 576px and up)
	@media (min-width: 576px) { ... }

	// Medium devices (tablets, 768px and up)
	@media (min-width: 768px) { ... }

	// Large devices (desktops, 992px and up)
	@media (min-width: 992px) { ... }

	// Extra large devices (large desktops, 1200px and up)
	@media (min-width: 1200px) { ... }
*/

/* X-and-up Attributes */

@media (min-width: 576px) {
	[hidden-sm] {
		display: none !important;
	}
}

@media (min-width: 767px) {
	[hidden-md] {
		display: none !important;
	}
}

@media (min-width: 992px) {
	[hidden-lg] {
		display: none !important;
	}
}

@media (min-width: 1200px) {
	[hidden-xl] {
		display: none !important;
	}
}

/* X-and-down Attributes */

@media (max-width: 575px) {
	[hidden-sm-down] {
		display: none !important;
	}
}

@media (max-width: 766px) {
	[hidden-md-down] {
		display: none !important;
	}
}

@media (max-width: 991px) {
	[hidden-lg-down] {
		display: none !important;
	}
}

@media (max-width: 1199px) {
	[hidden-xl-down] {
		display: none !important;
	}
}

/* Topbar */

.topbar .circular-btn {
	width: 36pt;
	color: #455a64; /* Blue Gray 600 */
	height: 36pt;
	cursor: pointer;
	display: flex;
	columns: red;
	background: rgba(236, 239, 241, 0.75); /* Blue Gray 50 (+ transparency) */
	background: white;
	border-radius: 50%;
	justify-content: center;
	transition-property: *;
	transition-duration: 0.25s;
}

.topbar .circular-btn:hover {
	background: #eceff1;
}

/* Menu */

.menu {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.menu .top-level-item {
	font-size: 14pt;
	padding: 16pt;
	color: #333;
	text-decoration: none !important;
	min-width: 74pt;
	text-align: center;
	transition-property: background;
	transition-duration: 0.2s;
	user-select: none;
}

.menu .top-level-item:hover {
	background: #eee;
}

/* Breadcrumbs */

a.breadcrumbs {
	color:inherit;
	text-decoration: none;
}

a:hover.breadcrumbs {
	color:inherit;
	opacity: 60%;
}

/* Footer */

.footer {
	padding: 12pt 0 36pt;
	color: #777;
	background: #f5f5f5;
	font-size: 11pt;
	padding-bottom: 130px;
}

.footer .title {
	color: #37474f;
	font-size: 18.2px;
	font-weight: 700;
	margin-top: 24pt;
}

.footer .company-links a {
	display: block;
	font-size: 11pt;
	line-height: 175%;
	color: #37474f;
}

.footer .partner-logo {
	height: 50pt;
	margin-bottom: 12pt;
	object-fit: contain;
}

.footer .partner-logo-container {
 	padding: 0px 0px 0px 15px;
}

.footer .partner-logo-frame {
	height: 60pt;
	padding: 0pt;
}

.footer .partner-logo:lang(en) {
	margin-right: 12pt;
}

.footer .partner-logo:lang(ar) {
	margin-left: 12pt;
}

.footer p {
	margin: 0;
}

.footer .social-icon {
	text-decoration: none !important;
}

.ltr {
	direction: ltr !important;
	text-align: left !important;
}

/* Breadcrumbs */

.breadcrumbs > i {
	padding: 0 4pt 0;
}

.breadcrumbs > * {
	color: #555;
}

.breadcrumbs > a {
	transition-property: *;
	transition-duration: 0.1s;
	border-bottom: solid 1px rgba(0, 0, 0, 0);
}

.breadcrumbs > a:hover {
	text-decoration: none;
	color: #0056b3;
	border-bottom: solid 1px #0056b3;
}

.desktop-menu-wrapper {
	display: flex;
	justify-content: center;
	z-index: 11;
}

.desktop-menu {
	z-index: 11;
	padding: 12pt;
	max-width: 80vw;
	box-shadow: 0 4pt 6pt rgba(0, 0, 0, 0.2);
	background: white;
	border-top: solid 1pt #eee;
	border-radius: 4pt;
	display: flex;
}

.desktop-menu:not(.expanded) {
	flex-direction: column;
}

.desktop-menu.expanded {
	flex-wrap: wrap;
	flex-direction: row;
}

.desktop-menu.expanded .item.level-1 {
	margin-bottom: 8pt;
}

.desktop-menu.expanded .item {
	flex: 1 1 0px;
}

.desktop-menu .item > .label {
	cursor: default;  /* fallback */
	padding: 8pt 16pt 8pt;
	min-width: 64pt;
	text-align: center;
	white-space: nowrap;
	user-select: none;
}

.desktop-menu .item > .label:lang(ar) {
	line-height: 1.75;
}

.desktop-menu .item.link > .label {
	cursor: pointer;
}

.desktop-menu .item.level-1 > .label {
	text-align: center;
}

.desktop-menu .item.level-1.has-children > .label {
	color: #37474f;
	font-weight: bold;
}

.desktop-menu .item.level-2 > .label {
	padding-top: 2pt;
	padding-bottom: 2pt;
}

.desktop-menu .item.link.level-1 > .label:hover {
	background: #f5f5f5;
}

.desktop-menu .item.link.level-2 > .label:hover {
	color: #3f51b5;
}

.showable .desktop-menu {
	position: absolute;
	transition-property: top, opacity, left;
	transition-duration: 0.1s;
}

.showable:not(.show) .desktop-menu {
	top: -8pt;
	opacity: 0;
	pointer-events: none;
}

.showable.show .desktop-menu {
	top: 0;
	opacity: 1;
}

iframe.ql-video {
    width: 480pt;
    max-width: 100%;
    min-height: 256pt;
}

.static-page-content img {
	max-width: 100%;
}

.ql-align-center {
	text-align: center;
}

.ql-align-left {
	text-align: left;
}

.ql-align-right {
	text-align: right;
}


/* promotions */
.promotion-tags{
	z-index: 1;
}
.product-image .promotion-tags{
    top: -15px;
}
.checkout .product-image .promotion-tags{
    top: -20px;
}
.layout-left .checkout .product-image .promotion-tags{
    left: -10px;
}
.layout-right .checkout .product-image .promotion-tags{
    right: -10px;
}

.layout-right .product-image .promotion-tags{
    left: -10px;
}
.layout-left .product-image .promotion-tags{
    right: -10px;
}

.promotion-tags .badge.badge-primary{
    background-color: var(--pink-tone-1);
}
.old-price{
    color: #455a64;
    text-decoration: line-through;
}
.layout-left .old-price{
    margin-right: 8px;
}
.layout-right .old-price{
    margin-left: 8px;
}

.price > span {
	display: inline-block;
}
.promotions .promotion-bg{
    padding: 40px 0;
    text-align: center;
    min-height: 145px;
    background-size: cover;
    background-color: #F8F8F8;
    border-radius: 10px;
}
.promotions > div{
	margin-bottom: 26pt;
}
.promotions > div:last-child{
    margin-bottom: 0;
}
.product .price{
    color: #212529;
}
.product .product-info.promotions .promotion-bg{
    background-image: url(/static/store/views/discount_pattern.svg);
}
.checkout .promotions .promotion-bg{
    color: #fff;
    background-image: url(/static/store/views/promotion_bg.svg);
}
.promotions .promotion-bg h3{
    font-size: 20px;
}
.product .promotions .promotion-bg h2 span.red{
    color: var(--pink-tone-1);
}
.layout-left .product .promotions .promotion-bg h2 > span:after{
    content: " and ";
	color: #212529;
}
.layout-right .product .promotions .promotion-bg h2 > span:after{
    content: " و ";
	color: #212529;
}
.product .promotions .promotion-bg h2 > span:last-child:after{
    content: "";
}
.checkout .promotions .promotion-bg h3{
    font-size: 12px;
}
.checkout .promotions .promotion-bg h2{
    font-size: 32px;
}
.promotions .promotion-bg .price{
    font-size: 16px;
}
.promotions .promotion-bg .price > span{
    margin: 0 8px;
    color: #000;
}
.promotions .promotion-bg .price > span.old-price{
    margin: 0 8px;
    color: #455a64;
}
.promotions .items-list{
    background: #fff;
	color: rgb(0, 0, 0);
	border: 1px solid #eee;
	padding: 40px 0px 0px;
	margin-top: -40px;
	border-radius: 10px;
}

.color-red{
	color: var(--pink-tone-1);
}