@charset "UTF-8";

:root{
	--primary-color: #d6325a;
}
body.type-man{
	--primary-key-color: #C96526;
  --primary-color: #9d4401;
  --on-primary-color: white;
  --primary-container: #ffdbc8;
  --on-primary-container: #341100;
  --secondary-key-color: #1b325f;
  --secondary-color: #485e8d;
  --on-secondary-color: white;
  --secondary-container: #d7e2ff;
  --on-secondary-container: #001946;
  --surface-color: #fffbfa;
  --surface-color-1: rgb(250.1, 241.85, 237.55);
  --surface-color-2: rgb(247.16, 236.36, 230.08);
  --surface-color-3: rgb(244.22, 230.87, 222.61);
  --surface-color-4: rgb(243.24, 229.04, 220.12);
  --surface-color-5: rgb(241.28, 225.38, 215.14);
  --on-surface-color: #201a17;
  --neutral-color-1: #52443d;
  --neutral-color-2: #6b5b53;
  --neutral-color-3: #85746c;
  --neutral-color-4: #9f8d84;
  --neutral-color-5: #d7c2b9;
  --neutral-color-6: #f4ded4;
  --neutral-color-7: #fff8f5;
  --inverse-surface: #362f2c;
  --inverse-on-surface: #fbeee9;
  --inverse-primary: #ffb68d;
}

@font-face 	{
	font-family: 'Lora';
	font-weight: 100 1000;
	src: url('../fonts/Lora-VariableFont_wght.ttf') format('truetype');
}
.mt0{
	margin-top: 0;
}
.mt1{
	margin-top: 1rem !important;
}
.mt2{
	margin-top: 2rem !important;
}
.mt3{
	margin-top: 3rem;
}
.mt4{
	margin-top: 4rem;
}
.mt8{
	margin-top: 8rem;
}
.mtn1{
	margin-top: -1rem;
}
.mb0{
	margin-bottom: 0 !important;
}
.mb1{
	margin-bottom: 1rem !important;
}
.mr1{
	margin-right: 1rem;
}
.mr3{
	margin-right: 3rem;
}
.pt0{
	padding-top: 0;
}
.pt4{
	padding-top: 4rem;
}
.pb0{
	padding-bottom: 0;
}
.p1{
	padding: 1rem;
}
.btn{
	border-radius: var(--border-radius-s);
}
.btn.black{
	background: black;
	color: var(--on-primary-color);
}
@media (min-width: 840px) {
	.row .col.push-m0 {
		left: 0%;
	}
	.row .col.pull-m0 {
		right: 0%;
	}
}

.navigation .mobile-nav>li img {
	max-height: 2.2rem;
}

.section-title{
	text-align: center;
	margin-bottom: 2rem;
	font-weight: 600;
}
.section-title + p{
	max-width: 28rem;
	margin-top: -1.75rem;
	margin-bottom: 3rem;
}
.section-title + p.center{
	margin-left: auto;
	margin-right: auto;
}
.btn.white{
	background: #FFF;
	color: var(--text-color);
	border-color: #FFF;
}
.white-bg{
	background: white !important;
}
.dark{
	background: #f6f6f6;
}
.grecaptcha-badge{
	display: none;
}
.g_id_signin iframe {
	margin: 0 auto !important;
}
.material-icons.giant{
	font-size: 4rem;
	color: var(--neutral-color-3);
}
h1.font-small{
	font-size: 2rem;
	line-height: 1.4;
}
.badge{
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: var(--border-radius-xs);
}
.badge.small{
	font-size: 0.9rem;
	padding: 0rem 0.4rem;
}
.badge.gray{
	background: var(--neutral-color-3);
	color: #FFF;
}
.badge.premium{
	background: #000;
	color: #f4e502;
}
.badge.popular{
	background: #e46518;
	color: white;
}
.badge.new{
	background: var(--error-color);
	color: var(--on-error-color);
}
.badge.green{
	background: var(--success-container);
	color: var(--success-color);
	border: 1px solid var(--success-color);
}
a.card{
	display: block;
	color: var(--text-color);
}
a.card .right{
	margin-top: 0.3rem;
}
.sidesheet.wide{
	width: 600px;
	transform: translateX(650px);
}
.sidesheet.x-wide{
	width: 800px;
	transform: translateX(850px);
}
.full-width{
	width: 100%;
}
.surface-1{
	background: var(--surface-color-1);
}
.scratched{
	position: relative;
	display: inline-block;
	color: var(--neutral-color-1);
}
.scratched:after {
	content: '';
	width: 110%;
	height: 2px;
	background: var(--primary-color);
	position: absolute;
	left: -5%;
	top: 50%;
	transform: rotate(-12deg);
}
.btn.filled .scratched{
	color: var(--primary-container);
}
.btn.filled .scratched:after{
	background: var(--error-color);
}
@media (min-width: 1240px){
	.text-right-l{
		text-align: right;
	}
}
hr.spacer{
	margin: 2rem 0;
}
.max6{
	max-width: 6rem;
}

#announcement{
	text-align: center;
	padding: 0.4rem;
	font-size: 0.75rem;
	background: var(--primary-color);
	color: var(--on-primary-color);
}
#announcement:not(.hide) + .navigation.fixed.top{
	top: 2.1rem;
}
@media (min-width: 600px){
	#announcement{
		font-size: 0.9rem;
	}
}

#nav-cart{
	position: relative;
	font-size: 1.6rem;
	overflow: visible;
}
#nav-cart:before{
	border-radius: 50%;
}
#nav-cart #cart-num{
	position: absolute;
	background: var(--inverse-surface);
	top: 50%;
	left: 50%;
	line-height: 1;
	text-align: center;
	border-radius: var(--border-radius-xs);
	color: var(--inverse-on-surface);
	padding: 0.2rem;
	font-size: 0.9rem;
	transform: translate(40%, -80%);
	box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}
.desktop-nav .currency-selector{
	margin-left: 1rem;
	margin-bottom: 0;
}
.desktop-nav .currency-selector .select-controller{
	padding: 0.5rem;
	padding-right: 2rem;
}
#side-nav:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 4.3rem;
	background: var(--surface-color-3);
	z-index: -1;
	left: 0;
	top: 0;
	border-bottom: 1px solid var(--neutral-color-5);
}
#side-nav .segmen{
	display: grid;
	grid-template-columns: 1fr 11rem;
	align-items: center;
  margin-bottom: 0.6rem;
}

header{
	padding-top: 4rem;
	padding-bottom: 2rem;
}
main{
	margin-top: 3rem;
}
header + main{
	margin-top: 0;
}
@media (min-width: 1240px){
	main{
		margin-top: 4rem;
	}
}
.page-title{
	text-align: center;
	font-family: 'Lora';
	margin-top: 5rem;
	margin-bottom: 0.75rem;
}
.circles-cont{
	position: relative;
}
.circles-cont .container{
	position: relative;
	z-index: 1;
}
.circles-cont .circles{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.2;
	z-index: -1;
}

#how-it-works img{
	border-radius: var(--border-radius-l);
}
.slanted-bar{
	position: relative;
}
.slanted-bar:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 14rem;
	left: 70%;
	bottom: -1rem;
	background: var(--primary-color);
	transform: rotate(-40deg);
	transform-origin: bottom left;
	border-radius: 11rem;
	opacity: 0.4;
}
.slanted-bar.left-aligned:before{
	left: auto;
	right: 70%;
	transform: rotate(40deg);
	transform-origin: bottom right;
}

#footer{
	position: relative;
	background: var(--surface-color);
	padding-bottom: 1px;
}
@media (max-width: 839px){
	#footer .logo-cont{
		text-align: center;
	}
}
#footer .logo-cont img{
	width: 14rem;
}
#footer section{
	padding-bottom: 0;
}
#footer .links-list li{
	margin-bottom: 0.2rem;
}
#footer a{
	border-bottom: 0;
	color: var(--neutral-color-3);
}
.inline-list li{
	display: inline-block;
	margin-right: 0.3rem;
}
.inline-list li a{
	border: 0;
	display: block;
	color: var(--text-color);
}
.inline-list li a img{
	width: 2.4rem;
}
#footer .copyright{
	border-top: 1px solid var(--neutral-color-5);
	text-align: center;
	color: var(--neutral-color-4);
	margin-top: 4rem;
	padding-top: 1rem;
}
#gs-credits {
  display: inline-block;
  position: relative;
  font-size: 0.9rem;
  padding: 0.8rem 0;
  margin-top: -0.8rem;
  margin-left: 1rem;
  z-index: 2;
}
#gs-credits:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #FFF;
  bottom: calc(2.4rem - 12px);
  left: 1rem;
  opacity: 0;
  transition: all 0.3s ease-out;
}
#gs-credits a {
	color: var(--neutral-color-3);
	border-color: var(--neutral-color-3);
}
#gs-credits-content{
  position: absolute;
  width: 8rem;
  left: 50%;
  bottom: 2.4rem;
  transform: translate(-50%);
  padding: 0.6rem;
  text-align: center;
  border-radius: 3px;
  background: #FFF;
  color: #444;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-out;
}
#gs-credits:hover #gs-credits-content,
#gs-credits:hover:before{
  opacity: 1;
  pointer-events: all;
}

#cookie-notice{
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	width: calc(100% - 2rem);
	max-width: 28rem;
	padding: 2rem;
	background: var(--surface-color);
	box-shadow: var(--shadow-8dp);
	border-radius: var(--border-radius-l);
	z-index: 4;
}
#cookie-notice.expanded{
	max-height: calc(100cqh - 7rem);
	overflow-y: auto;
	max-width: 40rem;
}
#cookie-notice .one{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
}
#cookie-notice .one .material-icons{
	font-size: 3rem;
}
@media (min-width: 840px){
	#cookie-notice{
		left: 3rem;
		bottom: 5rem;
	}
	#cookie-notice .one .material-icons{
		font-size: 6rem;
	}
}

.contact-outline{
	padding: 4rem 0 7rem;
	border: 1px solid var(--primary-color);
	background: var(--surface-color-1);
	border-radius: var(--border-radius-xl);
}
.contact-info .material-icons{
	font-size: 3rem;
	color: var(--primary-color);
}
.contact-info a{
	font-size: 1.5rem;
	color: var(--text-color);
	border: none;
}
.contact-info .text-color{
	font-size: 1.5rem;
}
.social-icons{
	display: inline-block;
	background: #FFF;
	padding: 0.5rem 0.6rem 0.2rem !important;
	border-radius: 3rem;
	box-shadow: var(--shadow-1dp);
}
.social-icons li{
	display: inline-block;
	margin: 0 0.3rem;
}
.social-icons li a{
	display: block;
	width: 40px;
	border: none;
}
#contact-form{
	background: #FFF;
	margin-top: -4rem;
}
dl dd{
	margin-left: 0;
}
.search-results li img{
	width: 36px;
	float: left;
	vertical-align: middle;
	margin-right: 10px;
}
.search-results li small{
	display: block;
}
#filters{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 100vw;
	padding: 2rem;
	background: var(--surface-color);
	z-index: 8;
	overflow-y: auto;
	transition: all 0.3s ease-out;
}
#filters .action{
	margin-bottom: 2rem;
}
#filters.active{
	left: 0;
}
.filter-block{
	max-height: 13rem;
	overflow-y: auto;
	margin-bottom: 2rem !important;
}
.filter-block .input-field{
	margin-bottom: 0.4rem;
}
@media (min-width: 840px){
	#filters{
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		background: transparent;
		overflow: visible;
	}
}
#products .item{
	text-align: center;
	position: relative;
	background: var(--surface-color);
	padding: 1rem;
}
#products .item figure{
	margin: 0;
}
#products .badges{
	position: absolute;
	top: 1rem;
	right: 1rem;
	text-align: right;
}
#products .badges > span{
	display: block;
	max-width: 2.2rem;
	height: 2.2rem;
	margin-left: auto;
	margin-bottom: 0.5rem;
	padding: 0 0.45rem;
	line-height: 2.1rem;
	border-radius: var(--border-radius-l);
	overflow: hidden;
	white-space: nowrap;
	transition: all 0.3s ease-out;
}
#products .badges > span .material-icons{
	font-size: 1.3rem;
	vertical-align: middle;
	margin-right: 0.3rem;
}
#products .badges > span:hover{
	max-width: 10rem;
}
#products .badges > span.extra-price{
	max-width: 3rem;
}
.badge.extra-price{
	background: var(--surface-color-3);
}
.quickview-trigger{
	position: absolute;
	top: 0.3rem;
	left: 0rem;
	color: var(--primary-color);
	font-size: 1.5rem;
	background: transparent;
	border: 0;
	opacity: 0;
	transition: opacity 0.3s ease-out;
}
#products .item:hover .quickview-trigger{
	opacity: 1;
}
#products .item a{
	color: var(--text-color);
}
#products .ad .content{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	padding: 0.5rem;
}
#products .ad h3{
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.2;
}
#products .ad .btn{
	font-size: 0.9rem;
}

#subscription-dash .col{
	padding: 0 0.5rem;
}
#subscription-dash .card{
	margin-bottom: 1rem;
}
#subscription-dash .card:not(.refer-banner) figure{
	text-align: center;
	padding: 1rem;
}
#subscription-dash .card:not(.refer-banner) figure img{
	max-width: 6rem;
}
#subscription-dash .card:not(.refer-banner) .content{
	display: flex;
	padding: 0 1rem 1rem;
	align-items: center;
}
#subscription-dash .card:not(.refer-banner) .content strong{
	font-size: 2.2rem;
	margin-right: 0.5rem;
	line-height: 1.2;
}
#subscription-dash .card.refer-banner{
	padding: 2.3rem 0;
	text-align: center;
}
#subscription-dash .card.refer-banner img{
	max-width: 250px;
	margin: 0 auto;
}
#subscription-dash .card.refer-banner .content{
	font-size: 3rem;
}
.order-product{
	display: flex;
	gap: 1rem;
	width: 16rem;
}
.order-product img{
	width: 4rem;
}
.order-product .rate-perfume{
	display: block;
	margin-top: 0.5rem;
	width: 11rem;
}
.order-product .rate-perfume li{
	margin: 0;
}
.order-product .rate-perfume .emoji{
	font-size: 1.4rem;
}

.gu-mirror {
	position: fixed !important;
	z-index: 9999 !important;
	opacity: 1;
	list-style-type: none;
	box-shadow: 0 2px 2px rgba(182, 182, 182, 0.5);
	-webkit-align-items: center;
	align-items: center;
	display: block;
	position: relative;
	min-height: 80px;
	line-height: 80px;
	border: 1px solid #d8d8d8;
	margin: 0 30px 10px 0;
	background-color: #fff;
	cursor: move;
	transition: $ease-out;
	border-style: dashed;
	border-width: 2px;
}
.gu-hide {
	display: none !important;
}
.gu-unselectable {
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}
.gu-transit {
	color: #f8f9fb;
	background-color: #f8f9fb !important;
	transform: scale(1.05);
}

@keyframes queueTriggerPop{
	55%{
		transform: rotate(90deg) translateX(105%) scale(1.2);
	}
	70%,100%{
		transform: rotate(90deg) translateX(105%) scale(1);
	}
	85%{
		transform: rotate(90deg) translateX(105%) scale(1.1);
	}
}
#queue-sheet-trigger{
	position: fixed;
	right: 0;
	top: 50%;
	transform: rotate(90deg) translateX(105%);
	transform-origin: right top;
	border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
	padding: 0.5rem 1rem 0.8rem;
	font-size: 1.1rem;
}
#queue-sheet-trigger.pop{
	animation: queueTriggerPop 0.6s linear;
}
#queue-sheet{
	padding-left: 1rem;
	padding-right: 1rem;
}
#queue-sheet.active .head,
#queue-sheet.active .head .close{
  display: revert;
}
@media (max-width: 839px){
	#queue-sheet .head p{
		margin-left: 2.8rem;
	}
}
@media (min-width: 840px){
	#perfume-queue{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.3rem;
	}
	@media (min-width: 600px){
		#perfume-queue{
			grid-template-columns: 1fr 1fr 1fr;
		}
	}
	#queue-sheet .head .close{
		position: absolute;
		top: 2rem;
		right: 1rem;
	}
}
#queue-sheet .body{
	max-height: calc(100dvh - 8rem);
}
/*#queue-sheet:not(.fullscreen) .body{
	margin-bottom: 7rem;
}*/
#perfume-queue > li{
	position: relative;
}
#perfume-queue > li .month{
	position: absolute;
  left: 50%;
  top: 0.7rem;
  z-index: 2;
  transform: translateX(-50%);
  font-size: 0.8rem;
}
#perfume-queue .card{
  border: none;
  height: 100%;
	outline: 4px solid var(--surface-color-3);
	outline-offset: -5px;
	border-radius: var(--border-radius-xs);
}
#perfume-queue .card.has-perfume{
  background: var(--surface-color-3);
}
#perfume-queue .top-bar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 2.7rem;
	font-size: 0.8rem;
	color: var(--neutral-color-1);
	padding: 0.1rem 0.4rem;
}
#perfume-queue .remove-slot{
  background: var(--surface-color);
}
#perfume-queue figure{
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
#perfume-queue figure .badge{
	position: absolute;
	bottom: 0.6rem;
	right: 0.6rem;
}
#perfume-queue figure .placeholder{
	max-width: 5rem;
	height: auto;
}
#perfume-queue .card > .content{
	padding: 0.5rem;
}
#queue-sheet .overlay{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(4px);
	background: rgb(255 255 255 / 50%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
#queue-sheet .footer{
	text-align: center;
	padding: 1rem;
	border-top: 1px solid var(--neutral-color-5);
}
@media (min-width: 840px){
	#queue-sheet .footer{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background: var(--surface-color-1);
		z-index: 2;
	}
}
#queue-sheet .footer h4{
	font-weight: 400;
	margin-bottom: 0;
}
#recommendations-sheet{
	background: var(--surface-color);
}
#queue-recommendations{
	width: 13rem;
  margin-top: 2.7rem;
  text-align: center;
}
#queue-recommendations .item{
	position: relative;
  margin-bottom: 2rem;
}
#queue-recommendations .add-queue{
	position: absolute;
	top: 0rem;
	right: 0rem;
	background: var(--surface-color);
}

#perfume-details .title{
	font-family: 'Lora';
	font-size: 2.9rem;
	font-weight: 300;
	line-height: 1;
}
#perfume-details .title small{
	display: block;
	font-size: 1.2rem;
	font-weight: 600;
}
#perfume-details .perfume-option{
	display: flex;
	border: 1px solid var(--neutral-color-1);
	padding: 0.4rem;
	gap: 0.3rem;
	align-items: center;
	border-radius: var(--border-radius-s);
	cursor: pointer;
}
#perfume-details .perfume-option.active{
	border: 2px solid var(--primary-color);
}
#perfume-details .perfume-option img{
	max-height: 3.4rem;
}
#perfume-details .perfume-option p{
	font-size: 0.9rem;
}
@media (max-width: 840px){
	#perfume-details .subs-btn-cont:not(.active),
	#perfume-details .purchase-btn-cont:not(.active){
		display: none;
	}
}
#buy-4-get-1{
	margin-top: 0.5rem;
}
#buy-4-get-1 h4{
	font-size: 1.4rem;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
}
#buy-4-get-1 p{
	display: flex;
	align-items: center;
	font-size: 0.8rem;
	line-height: 1.3;
}
#buy-4-get-1 img{
	width: 6rem;
}
.notes img{
	width: 70px;
	border-radius: 50%;
	margin: 4px;
	border: 2px solid var(--primary-color);
}

.emoji{
	font-size: 1.6rem;
	vertical-align: sub;
}
.emoji-rating{
	text-align: center;
}
.emoji-rating li{
	display: inline-block;
	vertical-align: top;
	margin: 0 0.25rem;
	opacity: 0.3;
	transition: all 0.25s ease-out;
}
.emoji-rating li .emoji{
	display: block;
}
.emoji-rating li.active{
	opacity: 1;
	transform: scale(1.2);
	margin: 0 0.6rem;
}
.emoji-rating.rate label{
	margin-left: 0 !important;
	color: #FFF;
	font-size: 0.3rem;
	transition: all 0.25s ease-out;
}
.emoji-rating.rate label:before,
.emoji-rating.rate label:after{
	display: none;
}
.emoji-rating.rate li:hover{
	opacity: 1;
}
.emoji-rating.rate li:hover label,
.emoji-rating.rate li.active label{
	color: #555;
	font-size: 1rem;
}

#refer-steps .card{
	display: grid;
	grid-template-columns: auto auto;
}
#refer-steps .number{
	font-size: 1.6rem;
	width: 3rem;
	height: 3rem;
	line-height: 2.9rem;
	display: inline-block;
	text-align: center;
	background: var(--surface-color-3);
	color: var(--primary-color);
	border-radius: var(--border-radius-l);
	margin-top: 1rem;
	margin-left: 1rem;
}
.stats h3{
	font-size: 3rem;
}
.stats h3 small{
	display: block;
	font-size: 1.2rem;
	line-height: 1.3;
	color: #AAA;
}

#quiz .main{
	border-radius: var(--border-radius-l);
}
#quiz button{
	position: absolute;
	top: 60%;
	left: 50%;
}
#quiz button.masculine{
	transform: translateX(-120%);
}
#quiz button.feminine{
	transform: translateX(20%);
}
@media (max-width: 600px){
	#quiz button{
		font-size: 1rem;
		padding: 0.8rem 1.5rem;
	}
}
@media (min-width: 1024px){
	#quiz button.masculine{
		transform: translateX(-160%);
	}
	#quiz button.feminine{
		transform: translateX(60%);
	}
}

.accordian{
	border-radius: var(--border-radius-l);
	overflow: hidden;
}
.accordian .item{
	position: relative;
}
.accordian .item input[type=radio],
.accordian .item input[type=checkbox]{
	position: absolute;
	opacity: 0;
}
.accordian .item img{
	aspect-ratio: 0.6;
	display: block;
	width: 100%;
	height: 10rem;
	object-fit: cover;
	transition: all 0.2s ease-out;
}
.accordian .item .caption{
	position: absolute;
	width: 90%;
	bottom: 0;
	left: 1rem;
	color: #FFF;
	font-weight: 900;
	text-shadow: 0 1px 1px rgb(0 0 0 / 50%);
}
.accordian .item:hover img,
.accordian .item:focus img{
	height: 15rem;
}
.accordian .item input[type=radio]:checked ~ label h3:before,
.accordian .item input[type=checkbox]:checked ~ label h3:before{
	content: 'check_circle';
	font-family: 'Material Icons';
	font-size: 1.3rem;
	margin-right: 0.7rem;
}
.accordian.three .caption h3{
	margin-bottom: 0;
}
.accordian.three .caption p{
	margin-top: 0;
	margin-bottom: 0.5rem;
}
@media (min-width: 600px){
	.accordian{
		display: flex;
	}
	.accordian .item{
		flex-basis: 25%;
		transition: all 0.3s ease-out;
	}
	.accordian:not(.three) .item:hover,
	.accordian:not(.three) .item:focus{
		flex-basis: 40%;
	}
	.accordian .item img,
	.accordian .item:hover img,
	.accordian .item:focus img{
		--aspect-ratio: 0.4;
		height: 30rem;
	}
	.accordian.three{
		flex-wrap: wrap;
	}
	.accordian.three .item{
		flex-basis: 33.33%;
	}
	.accordian.three .item img, .accordian.three .item:hover img, .accordian.three .item:focus img {
		--aspect-ratio: 1;
		height: 14rem;
	}
}
@media (min-width: 1024px){
	.accordian.three .item img, .accordian.three .item:hover img, .accordian.three .item:focus img {
		height: 17rem;
	}
}

#quiz-results-blurred{
	background: url(../img/banners/quiz-results-blurred.jpg) no-repeat;
	background-size: cover;
	aspect-ratio: 0.7;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}
#quiz-results-blurred h2{
	font-weight: 600;
	margin-bottom: 0;
}
@media (min-width: 600px){
	#quiz-results-blurred{
		background-size: contain;
		aspect-ratio: 1.5;
		padding: 0 7rem;
	}
}

.first-product .vial,
.first-product .product{
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: 0.5rem;
	align-items: center;
}
.first-product h3{
	font-size: 1.3rem;
}
.first-product h4{
	font-weight: 400;
}

#gift-preview .price,
#subs-preview .price{
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 120%;
}
#gift-preview .price-striked,
#subs-preview .price-striked{
	font-size: 1.5rem;
	text-decoration: line-through;
	color: #AAA;
	font-weight: 400;
}
.coupon input{
	padding-right: 5rem;
}
.coupon .check{
	padding: 0px 1rem;
}
.coupon .field{
	padding: 0 1rem;
	align-items: center;
	gap: 1rem;
	grid-template-columns: 2fr 1fr;
}
.coupon.disabled{
	pointer-events: none;
	opacity: 0.4;
}
#payment-info ul.safe{
	display: flex;
	gap: 2rem;
	margin-top: 1rem;
}
#payment-info ul.safe li{
	align-items: start;
}
.dl-horizontal{
	display: grid;
	grid-template-columns: auto minmax(1rem, 1fr);
	gap: 1rem;
}
.dl-horizontal dt{
	max-width: 12rem;
}

#hiw-timeline{
	max-width: 880px;
	margin: 0 auto;
}
#hiw-timeline > li{
	position: relative;
	padding: 1rem 0;
}
#hiw-timeline > li:before {
	content: '';
	position: absolute;
	width: 3px;
	height: 75%;
	left: 1rem;
	top: 5rem;
	background: var(--neutral-color-3);
}
#hiw-timeline .sequence{
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	line-height: 2.3rem;
	border-radius: 50%;
	border: 2px solid var(--neutral-color-3);
	font-weight: 600;
	text-align: center;
}
#hiw-timeline li > .row{
	padding-left: 3rem;
}
#hiw-timeline h3{
	margin-top: 2rem;
	color: var(--primary-color);
}
#hiw-timeline img{
	margin: 1rem 0 -2rem 1rem;
	width: 6rem;
}
#hiw-timeline .icon-cluster img{
	margin: 0;
}
@media (min-width: 600px){
	.center-on-s{
		text-align: center;
	}
	#hiw-timeline{
		text-align: center;
	}
	#hiw-timeline > li:before {
		height: 70%;
		left: calc(50% - 1.5px);
	}
	#hiw-timeline .row{
		padding-left: 0;
	}
	#hiw-timeline img{
		margin: 1rem 0 0;
		width: 10rem;
	}
}
#hiw-timeline.continuous > li:before{
	top: 0;
	height: 100%;
}
.quote{
	color: var(--neutral-color-3);
	font-size: 1.5rem;
}
.star-rating li{
	display: inline-block;
	font-size: 1.2rem;
	color: #eec000;
}

#gift-hero{
	position: relative;
	background: #c3a37c url(../img/banners/gift-hero-banner.jpg);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 57rem;
	padding-bottom: 24rem;
}
#gift-hero h1{
	margin-bottom: 0.6rem;
	line-height: 1.2;
}
#gift-hero h4{
	font-weight: 100;
}
@media (min-width: 600px){
	#gift-hero{
		padding-bottom: 12%;
		padding-top: 19%;
	}
}
@media (min-width: 840px){
	#gift-hero{
		background-size: cover;
		padding-bottom: 14%;
		padding-top: 18%;
	}
}

#gift-wtlt{
	background: var(--surface-color);
}
#gift-wtlt img{
	border-radius: var(--border-radius-l);
}
#gift-wtlt .section-title + p{
	margin-top: -2rem;
}

.gift-icons{
	text-align: center;
}
.gift-icons h4{
	color: var(--neutral-color-3);
}
.gift-icons img{
	max-width: 100px;
}
button .show-on-disable{
	display: none;
}
button:disabled .show-on-disable{
	display: inline-block;
}
.gift-price{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
}
.gift-price .price{
	font-size: 1.7rem;
}
#gift-activated{
	max-width: 42rem;
}
#gift-activated .body{
	padding: 0 12px 0 0;
}
#gift-activated img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#gift-activated .col.m7{
	padding: 2rem 1rem;
}
#gift-activated .check-mark{
	font-variation-settings: 'FILL' 0;
}

.cart-thumb{
	display: block;
	float: left;
	width: 50px;
	margin-right: 10px;
	border: 0;
}
#cart-summary .success-bg{
	color: #FFF;
}
#cart-summary .text-banner{
	padding: 0.6rem 1rem;
}
#added-to-cart{
	position: fixed;
	top: 6rem;
	right: 2rem;
	width: 84%;
	max-width: 23rem;
	z-index: 4;
}
#added-to-cart .content{
	display: grid;
	grid-template-columns: 1fr 2.4fr;
	gap: 1rem;
}
#added-to-cart .btn.icon{
	position: absolute;
	right: 4%;
	top: 5%;
}
#added-to-cart .offer{
	padding: 0.6rem;
	border: 1px solid var(--primary-color);
	border-radius: var(--border-radius-s);
	margin: 1rem;
	color: var(--primary-color);
	text-align: center;
	margin-top: 0;
	overflow: hidden;
}
#added-to-cart .offer p{
	margin-bottom: 0;
}
#added-to-cart .progress{
	margin: -0.7rem;
	margin-top: 0.7rem;
}

.trophy-separator{
	position: relative;
	margin: 1.5rem 0;
}
.trophy-separator .material-icons{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.4rem;
	color: var(--neutral-color-5);
	background: var(--surface-color);
}

#scent-of-month .perfume-name{
	line-height: 1;
}
#scent-of-month .perfume-name small{
	display: block;
	font-weight: 100;
}
#scent-of-month ul.notes li{
	display: inline-block;
	margin-right: 0.6rem;
}
#scent-of-month ul.notes li img{
	width: 4rem;
	border: 1px solid var(--primary-color);
	border-radius: 50%;
	vertical-align: middle;
}
#scent-of-month{
	background: var(--surface-color-5);
}
#scent-of-month .perfume-name{
	margin-top: 1rem;
}
#scent-of-month .perfume-desc p{
	display: none;
}
body.type-woman #scent-of-month .row.male,
body.type-man #scent-of-month .row.female{
	display: none;
}
body.type-woman #scent-of-month .perfume-desc p,
body.type-man #scent-of-month .perfume-desc p{
	display: block;
}
@media (min-width: 600px){
	.card.horizontal{
		display: grid;
		grid-template-columns: 1fr 2fr;
	}
	.card.horizontal > figure{
		border-radius: var(--border-radius-m) 0 0 var(--border-radius-m);
		padding: 1rem 0;
	}
	.card.horizontal.right-image{
		grid-template-columns: 2fr 1fr;
		text-align: right;
	}
	.card.horizontal.right-image > figure{
		border-radius: 0 var(--border-radius-m) var(--border-radius-m) 0;
		order: 1;
	}
}

#about-us .testimonials blockquote{
	font-size: 1.3rem;
}
#about-us .testimonials blockquote:before,
#about-us .testimonials blockquote:after{
	content: 'format_quote';
	font-size: 1.5rem;
	font-family: 'Material Icons';
	display: inline-block;
	font-variation-settings: 'FILL' 1;
	color: var(--neutral-color-4);
}
#about-us .testimonials blockquote:before{
	transform: rotate(180deg);
}
#about-us .testimonials img{
	max-width: 13rem;
}
.paint-stroke{
	display: inline-block;
	background: url(../img/brush-stroke.png);
	background-size: cover;
	background-position: center;
	padding: 1rem 1rem 2rem;
}
#about-us .icons img{
	max-width: 6rem;
}

#num_products{
  display: block;
  font-size: 50%;
  opacity: 0.6;
}
.product-list .item{
	display: block;
	height: 100%;
	text-align: center;
}
.product-list .item img{
	display: block;
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
}
.product-list .item .name{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	max-height: 4.5rem; /*increase for number of lines to display*/
}
.product-list .item .name strong{
	color: var(--primary-color);
}
.product-list .item .price{
	font-size: 1.1rem;
	margin-top: 0.8rem;
}
.price .scratched{
	color: var(--neutral-color-5);
	display: inline-block;
	position: relative;
}
.price .scratched:after {
	content: '';
	position: absolute;
	width: 112%;
	height: 1.5px;
	top: 45%;
	left: -3%;
	background: var(--neutral-color-5);
	transform: rotate(-11deg);
}
.price .discount{
	display: inline-block;
	background: var(--warning-color);
	color: var(--surface-color);
	padding: 0 0.5rem;
	border-radius: var(--border-radius-s);
	margin-left: 0.4rem;
	font-size: 90%;
	line-height: 140%;
}
.product-list .item .rating{
	display: inline-block;
	margin: 0.4rem 0 -0.4rem;
	border: 1px solid var(--neutral-color-6);
	padding: 0.2rem 0.5rem 0.2rem 0.18rem;
	border-radius: var(--border-radius-s);
	color: var(--neutral-color-4);
	font-size: 0.8rem;
}
.product-list .item .rating.empty{
	border: 0;
	margin-top: 1.5rem;
}
.product-list .item .rating span{
	font-size: 1.2rem;
	vertical-align: middle;
}

.center .g_id_signin iframe{
	margin-left: auto !important;
	margin-right: auto !important;
}
.product-list{
	scroll-margin-top: 10rem;
}
.list-controls{
	display: grid;
	grid-template-columns: 1fr auto;
}
.filter-color{
	width: 1rem;
	height: 1rem;
	display: inline-block;
	border-radius: 50%;
	vertical-align: middle;
	margin: -0.2rem 0.4rem 0 0.3rem;
	border: 1px solid var(--neutral-color-4);
}
.num-selected-filters{
	background: var(--primary-color);
	color: var(--on-primary-color);
	padding: 0rem 0.4rem;
	border-radius: var(--border-radius-s);
	display: inline-block;
	font-size: 0.8rem;
	vertical-align: text-bottom;
}
#pagination{
	text-align: center;
}
#pagination li{
	display: inline-block;
	margin: 0 0.2rem;
}
.product-attributes .chips.color li{
	padding: 1rem;
	margin-right: 0.6rem;
}
.product-attributes .chips.color li.active{
	outline: 1px solid var(--neutral-color-2);
}
#product-details h1{
	font-family: 'Lora';
	font-size: 2.9rem;
	font-weight: 300;
	line-height: 1;
}
#product-details h1 small{
	display: block;
	font-size: 1.2rem;
	font-weight: 600;
}

.progress-dots{
	position: relative;
	display: inline-flex;
	gap: 1rem;
}
.progress-dots:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	background: var(--neutral-color-1);
	left: 0;
	top: 1.5rem;
}
.progress-dots li{
	position: relative;
	padding-top: 3rem;
	max-width: 10rem;
	text-align: center;
}
.progress-dots li:before{
	content: '';
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--surface-color);
	border: 1px solid var(--neutral-color-1);
	top: 1.5rem;
	left: 50%;
	transform: translate(-50%, -50%);
}
.progress-dots li.active:before{
	outline: 0.4rem solid var(--primary-color);
	outline-offset: -0.4rem;
}
@media (min-width: 600px){
	.progress-dots{
		gap: 5rem;
	}
}
.box-select.input-field>input[type=radio]+label{
	padding: 0.8rem 1.2rem 0.8rem 3rem;
	position: relative;
	top: 0;
	left: 0;
	margin-left: 0;
	display: flex;
	justify-content: space-between;
	border-radius: var(--border-radius-s);
	border: 1px solid var(--neutral-color-5);
	max-width: 32rem;
}
.box-select>input[type=radio]+label:after, .box-select>input[type=radio]+label:before {
	left: 0.9rem;
	top: 0.9rem;
}
.box-select span.right{
	flex-shrink: 0;
}
.box-select > input:checked + label{
	background: var(--surface-color-1);
}
.case-select label{
	margin-left: 0 !important;
	text-align: center;
}
.case-select.input-field>input[type=radio]+label:after, .case-select.input-field>input[type=radio]+label:before{
	opacity: 0;
}
.case-select img{
	width: 100%;
	border-radius: 50%;
	border: 1px solid var(--neutral-color-6);
	transition: border 0.1s ease-out;
}
.case-select > input:checked + label img{
	border: 2px solid var(--primary-color);
}

.gender-icon{
	position: absolute;
	width: 1.5rem;
	top: 0.6rem;
	left: 0.6rem;
}

#main-popup .head{
	margin-bottom: 0;
}
#main-popup .head .close{
	display: none;
}
#main-popup .body{
	overflow-x: hidden;
	padding: 0;
}
#main-popup figure{
	align-self: stretch;
	aspect-ratio: 1.4;
}
#main-popup figure img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	max-width: none;
}
#main-popup .icon.close{
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
}
.dialog#main-popup{
	max-width: 45rem;
}
#main-popup .neutral-color-4{
	line-height: 1.2;
}
#main-popup .col.s7{
	padding: 1rem;
}
@media (min-width: 600px){
	#main-popup figure{
		aspect-ratio: auto !important;
	}
	#main-popup .popup-content{
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		min-height: 32rem;
	}
	#main-popup .popup-content h2{
		font-size: 2.5rem;
		font-weight: 600;
		line-height: 1;
		opacity: 0.8;
		max-width: 14rem;
	}
	#main-popup .popup-content p{
		max-width: 14rem;
	}
	#main-popup .pt3-s{
		padding-top: 3rem;
	}
}
@media (min-width: 840px){
	#main-popup .col.s7{
		padding-top: 3rem;
	}
}

.cart-products{
	background: var(--surface-color-1);
	border-radius: var(--border-radius-m);
}
.cart-products > .row{
	padding: 0.8rem;
	margin-right: 0;
}
.cart-products .row:not(:first-child){
	border-top: 1px solid var(--neutral-color-6);
}
.quantity-tool{
	display: flex;
}
.quantity-tool .btn{
	padding: 0.4rem;
}
.quantity-tool input{
	width: 2.7rem;
	text-align: center;
	background: transparent;
	border: none;
	font-size: 1.1rem;
}
.cart-products .cart-delete{
	position: absolute;
	right: 0.3rem;
	top: 0.3rem;
}

.partially-visible{
	position: relative;
	max-height: 12rem;
	overflow: hidden;
}
.partially-visible:before{
	position: absolute;
	width: 100%;
	height: 12rem;
	left: 0;
	bottom: 0;
	content: 'Read More';
	background: linear-gradient(transparent, white 95%);
	text-align: center;
	line-height: 22rem;
	color: var(--neutral-color-1);
	cursor: pointer;
}
#custom-dd-trigger.active{
	transform: rotate(180deg);
}