/*-----------------------------------------------------------------------
    Theme Name: Alowidat - Perfume Website
    Start Date : April 2026
    Version: 1.0
    Theme: Golden & var(--beige) with #705A42 accents
    Designing Company: Zeedesigns
    Developer: Aleena Mussarat
------------------------------------------------------------------------*/

@import url(~owl.carousel/dist/assets/owl.carousel.css);
@import url(~owl.carousel/dist/assets/owl.theme.default.css);

#preloader,
body {
	background-color: #fdfbf7
}

#preloader,
.header {
	position: fixed;
	display: flex
}

.logo,
.nav-link {
	text-decoration: none
}

html[dir=rtl] .mobile-nav-link::before,
html[dir=rtl] .mobile-nav.show {
	right: 0;
	left: auto
}

.mobile-nav-links,
.nav-dropdown-list,
.nav-links,
html[dir=rtl] .mobile-nav-links li {
	list-style: none
}

.product-card-description,
.social-post-text {
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

:root {
	--gold: #D4AF37;
	--gold-dark: #A67C00;
	--beige: #D8C4AB;
	--brown: #705A42;
	--dark: #212121;
	--off-white: #FDFBF7;
	--text: #2C2416
}

::selection {
	background: var(--brown);
	color: var(--off-white)
}

.logo h3,
.nav-link {
	color: var(--beige)
}

html {
	scroll-behavior: auto !important
}

body {
	color: var(--text);
	overflow-x: hidden
}

body:not(.translation-ready) {
	visibility: hidden
}

body.translation-ready {
	visibility: visible
}

.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px
}

::-webkit-scrollbar {
	width: 6px
}

::-webkit-scrollbar-track {
	background: var(--brown)
}

::-webkit-scrollbar-thumb {
	background: var(--gold);
	border-radius: 3px
}

::-webkit-scrollbar-thumb:hover {
	background: var(--gold)
}

#page-wrapper {
	opacity: 0;
	transition: opacity .4s
}

#page-wrapper.ready,
.buy-btn:hover::before,
.hero-background-video.visible,
.nav-dropdown-item:hover .nav-dropdown-item-dot,
.social-post:hover .social-post-overlay,
.why-promise-card:hover .why-promise-spotlight {
	opacity: 1
}

.btn-primary,
.btn-secondary,
.contact-info,
.cta-btn,
.footer-links a,
.footer-social a,
.identity-line,
.lang-btn,
.lead-text,
.mobile-lang-btn,
.mobile-nav-link,
.mobile-shop-btn,
.nav-text,
.newsletter-btn,
.philosophy-text p,
.shop-now-btn,
.signature-quote p,
.tag,
.testimonial-author h4,
.testimonial-author p,
.testimonial-text,
a,
body,
button,
h5,
input,
li,
p,
span,
textarea {
	font-family: Exo, 'Echo of Legacy', 'Threads of Innovation', 'Playfair Display', serif
}

.about-text h3,
.cta-section h2,
.hero-content h1,
.product-info h3,
.section-header h2,
.section-header h5,
h1,
h2,
h2 span,
h3,
h4,
h5 span,
h6 {
	font-family: Exo, Poppins, sans-serif
}

html[dir=rtl] .btn-details span,
html[dir=rtl] .btn-shop span,
html[dir=rtl] .category-cta span,
html[dir=rtl] .category-subtitle,
html[dir=rtl] .category-title,
html[dir=rtl] .contact-info a,
html[dir=rtl] .contact-info p,
html[dir=rtl] .cta-btn span,
html[dir=rtl] .cta-section h2,
html[dir=rtl] .cta-section p,
html[dir=rtl] .footer-bottom p,
html[dir=rtl] .footer-links a,
html[dir=rtl] .footer-widget h3,
html[dir=rtl] .footer-widget p,
html[dir=rtl] .hero-glass-btn,
html[dir=rtl] .hero-glass-btn i,
html[dir=rtl] .hero-glass-btn span,
html[dir=rtl] .hero-glass-panel,
html[dir=rtl] .identity-line-overlay,
html[dir=rtl] .lead-text,
html[dir=rtl] .note-label,
html[dir=rtl] .note-tags span,
html[dir=rtl] .perfume-category-badge,
html[dir=rtl] .perfume-name,
html[dir=rtl] .philosophy-text p,
html[dir=rtl] .promise-label span,
html[dir=rtl] .pyramid-note,
html[dir=rtl] .scent-pyramid,
html[dir=rtl] .section-header h2,
html[dir=rtl] .section-header h5,
html[dir=rtl] .signature-quote p,
html[dir=rtl] .since-badge,
html[dir=rtl] .testimonial-author h4,
html[dir=rtl] .testimonial-author p,
html[dir=rtl] .testimonial-text,
html[dir=rtl] .view-all-btn span,
html[dir=rtl] .why-sig,
html[dir=rtl] .wt-card-text h3,
html[dir=rtl] .wt-card-text p,
html[dir=rtl] a,
html[dir=rtl] body,
html[dir=rtl] button,
html[dir=rtl] div,
html[dir=rtl] h1,
html[dir=rtl] h2,
html[dir=rtl] h3,
html[dir=rtl] h4,
html[dir=rtl] h5,
html[dir=rtl] h6,
html[dir=rtl] li,
html[dir=rtl] p,
html[dir=rtl] span {
	font-family: 'Noto Kufi Arabic', Cairo, Poppins, sans-serif !important
}

html[dir=rtl] .brand-name,
html[dir=rtl] .logo {
	font-family: inherit !important
}

html[dir=rtl] .footer-widget:first-child .contact-info {
	text-align: left
}

html[dir=rtl] .footer-widget:first-child .contact-info p {
	display: flex;
	justify-content: flex-start;
	direction: ltr
}

html[dir=rtl] .footer-widget:first-child .contact-info i,
html[dir=rtl] .mobile-nav-sub-accordion-btn i:first-child {
	margin-left: 10px;
	margin-right: 0
}

#preloader {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	z-index: 99999
}

.preloader-content {
	text-align: center;
	animation: 1.5s fadeInScale
}

.preloader-logo {
	width: 200px;
	height: auto;
	margin-bottom: 30px;
	animation: 3s ease-in-out infinite float
}

.preloader-spinner {
	width: 50px;
	height: 50px;
	border: 3px solid rgba(216, 196, 171, .2);
	border-top-color: var(--gold);
	border-radius: 50%;
	margin: 0 auto;
	animation: 1s linear infinite spin
}

@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}

@keyframes fadeInScale {
	from {
		opacity: 0;
		transform: scale(.8)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

@keyframes fadeIn {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(50px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-30px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

@keyframes slideLeft {
	from {
		opacity: 0;
		transform: translateX(50px)
	}

	to {
		opacity: 1;
		transform: translateX(0)
	}
}

@keyframes slideRight {
	from {
		opacity: 0;
		transform: translateX(-50px)
	}

	to {
		opacity: 1;
		transform: translateX(0)
	}
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(.9)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

@keyframes float {

	0%,
	100% {
		transform: translateY(0)
	}

	50% {
		transform: translateY(-10px)
	}
}

@keyframes pulse {

	0%,
	100% {
		transform: scale(1)
	}

	50% {
		transform: scale(1.05)
	}
}

@keyframes rotate {
	from {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

@keyframes shimmer {
	0% {
		background-position: -1000px 0
	}

	100% {
		background-position: 1000px 0
	}
}

@keyframes borderPulse {

	0%,
	100% {
		border-color: rgba(212, 175, 55, .3)
	}

	50% {
		border-color: #d4af37
	}
}

@keyframes glow {

	0%,
	100% {
		box-shadow: 0 0 5px rgba(212, 175, 55, .3)
	}

	50% {
		box-shadow: 0 0 20px rgba(212, 175, 55, .6)
	}
}

.fade-in {
	animation: 1s forwards fadeIn
}

.slide-up {
	animation: .8s forwards slideUp
}

.slide-down {
	animation: .8s forwards slideDown
}

.slide-left {
	animation: .8s forwards slideLeft
}

.slide-right {
	animation: .8s forwards slideRight
}

.scale-in {
	animation: .8s forwards scaleIn
}

.float {
	animation: 3s ease-in-out infinite float
}

.pulse {
	animation: 2s ease-in-out infinite pulse
}

.rotate {
	animation: 10s linear infinite rotate
}

.shimmer {
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
	background-size: 1000px 100%;
	animation: 3s infinite shimmer
}

.header,
.top-bar {
	background-color: var(--dark)
}

.delay-1,
.featured-perfume-row:first-child,
.footer-widget:nth-child(2),
.mobile-nav.show .mobile-nav-link:nth-child(2),
.note-tags span:nth-child(3),
.social-post:nth-child(2) {
	animation-delay: .2s
}

.delay-2,
.footer-widget:nth-child(4),
.mobile-nav.show .mobile-nav-link:nth-child(4),
.social-post:nth-child(4) {
	animation-delay: .4s
}

.delay-3 {
	animation-delay: .6s
}

.delay-4 {
	animation-delay: .8s
}

.delay-5 {
	animation-delay: 1s
}

.header {
	z-index: 9999;
	justify-content: center;
	align-items: center;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	padding: 1.11rem;
	top: 20px;
	left: 50%;
	transform: translate(-50%);
	border-radius: 50px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
	border: 2px solid rgba(212, 175, 55, .3);
	transition: background-color .3s, box-shadow .3s, height .3s
}

.header.header-scrolled {
	width: 55%;
	padding: .7rem;
	top: 15px;
	background-color: rgba(33, 33, 33, .95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px)
}

.header.header-scrolled .nav-container {
	height: 45px;
	transition: height .5s cubic-bezier(.4, 0, .2, 1)
}

.header.header-scrolled .logo img {
	height: 25px
}

.category-thumb,
.cta-section::before,
.header.header-scrolled .nav-text,
.header.header-scrolled .shop-now-btn span,
.header:not(.header-scrolled) .nav-link i,
.timeline-line::after {
	display: none
}

.header:not(.header-scrolled) .nav-text {
	display: block;
	font-size: 14px;
	font-weight: 500;
	transition: font-size .3s, color .3s
}

.header:not(.header-scrolled) .nav-link {
	padding: 8px 14px;
	flex-direction: row
}

.header:not(.header-scrolled) .nav-link:hover .nav-text {
	font-size: 18px;
	color: var(--gold)
}

.header.header-scrolled .nav-link i {
	display: block;
	font-size: 20px;
	margin: 0
}

.header.header-scrolled .nav-link {
	padding: 6px 12px;
	flex-direction: row
}

.header.header-scrolled .shop-now-btn {
	padding: 6px 16px
}

.header.header-scrolled .shop-now-btn i {
	font-size: 20px;
	margin-right: 0
}

.header.header-scrolled .language-toggle {
	background-color: #705a42;
	padding: 3px
}

.header.header-scrolled .lang-btn {
	padding: 4px 8px;
	font-size: 11px
}

.header.header-hidden {
	transform: translate(-50%, -150%);
	display: none
}

.header.scrolled {
	box-shadow: 0 5px 20px rgba(0, 0, 0, .15)
}

.preloader-active .about-section,
.preloader-active .cta-section,
.preloader-active .footer,
.preloader-active .header,
.preloader-active .hero-carousel,
.preloader-active .products-section,
.preloader-active .testimonials-section {
	visibility: hidden;
	opacity: 0;
	transition: none
}

.preloader-active.hidden .about-section,
.preloader-active.hidden .cta-section,
.preloader-active.hidden .footer,
.preloader-active.hidden .header,
.preloader-active.hidden .hero-carousel,
.preloader-active.hidden .products-section,
.preloader-active.hidden .testimonials-section {
	visibility: visible;
	opacity: 1;
	transition: opacity .5s
}

.top-bar {
	padding: 8px 0;
	border-bottom: 1px solid rgba(216, 196, 171, .2);
	transition: .3s
}

.top-bar .container {
	display: flex;
	justify-content: flex-end
}

.logo,
.nav-container {
	display: flex;
	align-items: center
}

.main-nav {
	width: 100%;
	background-color: transparent
}

.language-toggle,
.language-toggle:hover {
	background-color: rgba(212, 175, 55, .2)
}

.nav-container {
	width: 100%;
	justify-content: space-between;
	height: 60px;
	padding: 0 20px;
	transition: height .3s
}

.logo,
.logo img {
	transition: none
}

.logo {
	gap: 10px
}

.logo img {
	height: 45px;
	width: auto
}

.logo h3 {
	font-family: 'Playfair Display', serif;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 1px;
	margin: 0;
	transition: color .3s
}

.about-hero .hero-title .gold,
.branch-hours i,
.branch-info h3 span:first-child,
.contact-info a:hover,
.filter-btn:hover .filter-text,
.filter-sub:hover .filter-text,
.footer-bottom-links a:hover,
.fragrances-hero .hero-title .gold,
.logo span,
.logo:hover h3,
.nav-link.active,
.nav-link:hover,
.wt-card:hover .wt-card-text h3,
.wt-card:hover .wt-card-text p strong {
	color: var(--gold)
}

.logo span {
	transition: transform .5s;
	display: inline-block
}

.logo:hover span {
	transform: rotate(180deg) scale(1.2)
}

.desktop-nav {
	display: none;
	align-items: center;
	gap: 4px
}

.nav-link,
.nav-links {
	display: flex;
	transition: .3s
}

.nav-links {
	gap: 10px
}

.nav-link {
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 500;
	position: relative
}

.language-toggle,
.nav-actions {
	align-items: center;
	display: flex
}

.nav-link i {
	transition: .3s
}

.nav-link:hover {
	transform: translateY(-2px)
}

.featured-perfume-row:hover .perfume-small-img,
.nav-link:hover i,
.social-post:hover .social-post-image img {
	transform: scale(1.1)
}

.nav-link.active::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 12px;
	right: 12px;
	height: 2px !important;
	background-color: var(--gold)
}

.nav-text {
	font-size: 14px;
	letter-spacing: .5px;
	transition: .3s
}

.nav-actions {
	margin-left: 16px;
	padding-left: 16px;
	border-left: 1px solid rgba(216, 196, 171, .3);
	transition: .3s
}

.nav-actions:hover {
	border-left-color: var(--gold)
}

.language-toggle {
	border-radius: 9999px;
	padding: 4px;
	margin-right: 12px;
	transition: .3s
}

.mobile-nav-link,
.shop-now-btn {
	align-items: center;
	transition: .3s;
	text-decoration: none
}

.lang-btn {
	background: 0 0;
	border: none;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 9999px;
	cursor: pointer;
	transition: .3s;
	color: var(--beige)
}

.lang-btn:hover {
	color: var(--beige);
	transform: scale(1.2)
}

.lang-btn.active,
.mobile-lang-btn.active,
.shop-now-btn {
	background-color: var(--gold);
	color: var(--dark)
}

.shop-now-btn {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 8px 20px;
	border-radius: 9999px;
	font-size: 14px;
	font-weight: 700
}

.shop-now-btn i {
	font-size: 16px;
	transition: transform .3s
}

.shop-now-btn:hover {
	background-color: var(--gold-dark);
	transform: scale(1.05) translateY(-2px);
	box-shadow: 0 5px 15px rgba(212, 175, 55, .4)
}

.cta-btn:hover i,
.shop-now-btn:hover i {
	transform: rotate(15deg) scale(1.2)
}

.mobile-menu-btn {
	display: block;
	background: 0 0;
	border: none;
	color: var(--beige);
	font-size: 22px;
	cursor: pointer;
	transition: .3s
}

.mobile-menu-btn:hover {
	color: var(--gold);
	transform: rotate(90deg)
}

@media (min-width:1024px) {
	.nav-container {
		padding: 0 30px
	}

	.desktop-nav {
		display: flex
	}

	.mobile-menu-btn {
		display: none
	}
}

.mobile-nav {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;
	overflow-y: auto;
	background-color: rgba(112, 90, 66, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 20px;
	border-radius: 0
}

.mobile-nav-link,
.mobile-nav-links {
	width: 100%;
	position: relative;
	display: flex
}

.mobile-nav.show {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center
}

.mobile-nav::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(circle at 10% 20%, rgba(212, 175, 55, .1) 0, transparent 20%);
	pointer-events: none;
	z-index: -1
}

.mobile-nav-links {
	padding: 0;
	margin: 0 0 30px;
	flex-direction: column;
	align-items: center;
	max-width: 350px;
	z-index: 1
}

.mobile-nav-link {
	justify-content: center;
	gap: 12px;
	padding: 15px 20px;
	color: var(--beige);
	font-size: 14px;
	font-weight: 500;
	overflow: hidden;
	text-align: center;
	border-radius: 10px;
	margin: 5px 0
}

.mobile-nav-link i {
	font-size: 18px;
	width: 24px;
	text-align: center
}

.mobile-nav-link::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background-color: var(--gold);
	transform: scaleY(0);
	transition: transform .3s
}

.mobile-nav-link.active::before,
.mobile-nav-link:hover::before {
	transform: scaleY(1)
}

.mobile-nav-link.active,
.mobile-nav-link:hover {
	color: var(--gold);
	background-color: rgba(33, 33, 33, .2);
	padding-left: 25px;
	transform: scale(1.05)
}

.mobile-close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	background: 0 0;
	border: none;
	color: var(--beige);
	font-size: 30px;
	cursor: pointer;
	z-index: 10000;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: .3s
}

.mobile-close-btn:hover {
	color: var(--gold);
	background-color: rgba(255, 255, 255, .1);
	transform: rotate(90deg)
}

.mobile-logo {
	display: block;
	text-align: center;
	margin-bottom: 20px
}

.mobile-logo img {
	height: 35px;
	width: auto
}

.mobile-language {
	padding: 20px;
	animation: .5s slideLeft;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 300px;
	margin: 20px 0;
	border-top: 1px solid rgba(216, 196, 171, .3);
	border-bottom: 1px solid rgba(216, 196, 171, .3);
	position: relative;
	z-index: 1
}

.mobile-language-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 15px;
	color: var(--beige);
	font-size: 14px;
	width: 100%
}

.mobile-language-toggle,
.mobile-shop-btn {
	width: fit-content;
	transition: .3s;
	display: flex
}

.mobile-language-toggle {
	background-color: rgba(212, 175, 55, .2);
	border-radius: 9999px;
	padding: 3px;
	margin: 0 auto;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px)
}

.mobile-language-toggle:hover {
	background-color: rgba(212, 175, 55, .3)
}

.mobile-lang-btn {
	background: 0 0;
	border: none;
	padding: 10px 25px;
	font-size: 12px;
	border-radius: 9999px;
	cursor: pointer;
	color: var(--beige);
	transition: .3s
}

.mobile-lang-btn:hover {
	color: #fff;
	font-weight: 700;
	transform: scale(1.1)
}

.mobile-shop-btn {
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: linear-gradient(135deg, var(--gold), #c49b3a);
	color: var(--dark);
	text-decoration: none;
	padding: 12px 24px;
	border-radius: 9999px;
	font-size: 14px;
	font-weight: 600;
	margin: 20px auto;
	min-width: 150px;
	text-align: center;
	border: 2px solid transparent;
	position: relative;
	z-index: 1;
	box-shadow: 0 0 0 rgba(212, 175, 55, 0), 0 5px 15px rgba(0, 0, 0, .2);
	animation: 2s ease-in-out infinite subtleGlow;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent
}

.mobile-shop-btn i {
	font-size: 16px;
	margin-right: 0;
	transition: transform .3s
}

.mobile-shop-btn:active {
	transform: scale(.98);
	transition: transform 50ms
}

@keyframes subtleGlow {

	0%,
	100% {
		box-shadow: 0 0 0 rgba(212, 175, 55, 0), 0 5px 15px rgba(0, 0, 0, .2);
		border-color: transparent
	}

	50% {
		box-shadow: 0 0 15px rgba(212, 175, 55, .6), 0 8px 20px rgba(212, 175, 55, .3);
		border-color: rgba(212, 175, 55, .6)
	}
}

.mobile-shop-btn:hover {
	background-color: var(--gold-dark);
	transform: scale(1.1);
	color: #fff;
	border-color: var(--gold);
	box-shadow: 0 8px 25px rgba(212, 175, 55, .4)
}

.category-cta:hover i,
.contact-info p:hover,
.mobile-shop-btn:hover i {
	transform: translateX(5px)
}

.mobile-nav.show .mobile-nav-link {
	animation: .5s forwards fadeInUp;
	opacity: 0
}

.footer-widget:first-child,
.mobile-nav.show .mobile-nav-link:first-child,
.note-tags span:first-child,
.social-post:first-child {
	animation-delay: .1s
}

.footer-widget:nth-child(3),
.mobile-nav.show .mobile-nav-link:nth-child(3),
.note-tags span:nth-child(5),
.social-post:nth-child(3) {
	animation-delay: .3s
}

.mobile-nav.show .mobile-nav-link:nth-child(5) {
	animation-delay: .5s
}

.mobile-nav.show .mobile-language {
	animation: .5s .6s forwards fadeInUp;
	opacity: 0
}

.mobile-nav.show .mobile-shop-btn {
	animation: .5s .7s forwards fadeInUp;
	opacity: 0
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.about-text h3,
.perfume-name {
	font-family: 'Playfair Display', serif
}

@media (max-width:1023px) {
	body.menu-open {
		overflow: hidden
	}

	.mobile-nav-accordion {
		width: 100%;
		margin: 3px 0;
		border-radius: 12px;
		background: 0 0;
		border: none;
		overflow: hidden
	}

	.mobile-nav-accordion.open {
		background: rgba(24, 20, 16, .85);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
		border: 1px solid rgba(212, 175, 55, .3);
		border-radius: 16px
	}

	.mobile-nav-accordion-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 14px 20px;
		background: 0 0;
		border: none;
		color: var(--beige);
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		transition: .3s;
		font-family: inherit;
		position: relative
	}

	.mobile-nav-accordion-btn>span,
	.mobile-nav-sub-accordion-btn span {
		display: flex;
		align-items: center;
		gap: 10px
	}

	.mobile-accordion-arrow {
		margin-left: 10px;
		transition: transform .3s;
		font-size: 12px;
		color: var(--beige)
	}

	.mobile-nav-accordion-btn i:first-child {
		font-size: 20px;
		width: 24px;
		text-align: center
	}

	.mobile-nav-accordion-btn:hover {
		color: var(--gold);
		background-color: rgba(33, 33, 33, .25);
		transform: translateY(-2px)
	}

	.mobile-nav-accordion.open .mobile-nav-accordion-btn {
		color: var(--gold);
		background-color: rgba(212, 175, 55, .1);
		border-radius: 12px 12px 0 0
	}

	.mobile-nav-accordion.open .mobile-accordion-arrow {
		transform: rotate(180deg);
		color: var(--gold)
	}

	.mobile-nav-accordion-body {
		display: block;
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		opacity: 0;
		transform: scaleY(.97);
		transform-origin: top;
		pointer-events: none;
		background: rgba(24, 20, 16, .6);
		border-top: none;
		transition: .4s cubic-bezier(.4, 0, .2, 1);
		width: 100%;
		margin-top: 0;
		border-radius: 0 0 16px 16px
	}

	.mobile-nav-accordion.open .mobile-nav-accordion-body {
		max-height: 800px;
		visibility: visible;
		opacity: 1;
		transform: scaleY(1);
		pointer-events: auto;
		margin-top: 0;
		padding: 16px 12px 20px
	}

	.mobile-nav-accordion-body .mobile-nav-sub-group {
		padding: 10px 12px 14px;
		border-bottom: 1px solid rgba(212, 175, 55, .12)
	}

	.mobile-nav-accordion-body .mobile-nav-sub-group:last-child {
		border-bottom: none
	}

	.mobile-nav-sub-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		color: var(--beige);
		text-align: center
	}

	.mobile-nav-banner {
		background: linear-gradient(135deg, rgba(212, 175, 55, .2), rgba(212, 175, 55, .05));
		border-radius: 12px;
		padding: 14px 16px;
		margin-bottom: 20px;
		margin-top: 4px;
		border: 1px solid rgba(212, 175, 55, .3);
		transition: .3s
	}

	.mobile-nav-banner-btn,
	.mobile-nav-banner-icon {
		background: linear-gradient(135deg, var(--gold), #c49b3a)
	}

	.mobile-nav-banner-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 12px
	}

	.mobile-nav-banner-icon {
		width: 44px;
		height: 44px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		box-shadow: 0 4px 12px rgba(212, 175, 55, .3)
	}

	.mobile-nav-banner-icon i {
		font-size: 24px;
		color: var(--dark)
	}

	.mobile-nav-banner-text {
		flex: 1
	}

	.mobile-nav-banner-label {
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: 2px;
		color: var(--gold);
		display: block;
		margin-bottom: 4px;
		font-weight: 500
	}

	.mobile-nav-banner-title {
		font-size: 14px;
		font-weight: 600;
		color: var(--beige)
	}

	.mobile-nav-banner-btn {
		color: var(--dark);
		padding: 8px 16px;
		border-radius: 30px;
		text-decoration: none;
		font-size: 12px;
		font-weight: 600;
		transition: .3s;
		white-space: nowrap;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		box-shadow: 0 2px 8px rgba(212, 175, 55, .3)
	}

	.mobile-nav-banner-btn:hover {
		transform: translateX(4px) scale(1.05);
		background: var(--gold-dark);
		box-shadow: 0 4px 12px rgba(212, 175, 55, .4)
	}

	.mobile-nav-sub-group {
		margin-bottom: 20px;
		width: 100%
	}

	.mobile-nav-sub-group-label {
		display: block;
		font-size: 14px;
		font-weight: 600;
		color: var(--gold);
		margin-bottom: 12px;
		padding-left: 8px;
		border-left: 2px solid var(--gold)
	}

	.mobile-nav-sub-accordion-btn,
	.mobile-nav-sub-link {
		display: flex;
		width: 100%;
		color: var(--beige);
		transition: .3s
	}

	.mobile-nav-sub-link {
		align-items: center;
		justify-content: center;
		gap: 12px;
		padding: 12px 16px;
		text-decoration: none;
		font-size: 15px;
		font-weight: 500;
		border-radius: 10px;
		margin: 4px 0;
		background: rgba(255, 255, 255, .03);
		border: 1px solid transparent
	}

	.mobile-nav-sub-link i {
		font-size: 18px;
		width: 24px;
		text-align: center;
		color: var(--gold);
		transition: .3s
	}

	.mobile-nav-sub-link--indent {
		padding-left: 32px
	}

	.mobile-nav-sub-link--double-indent {
		padding-left: 48px
	}

	.mobile-nav-sub-link:hover {
		color: var(--gold);
		background: rgba(212, 175, 55, .15);
		color: var(--gold);
		transform: translateX(5px);
		border-color: rgba(212, 175, 55, .3)
	}

	.mobile-nav-sub-link:hover i {
		transform: scale(1.1)
	}

	.mobile-nav-sub-accordion-btn {
		align-items: center;
		justify-content: space-between;
		padding: 12px 16px;
		background: rgba(212, 175, 55, .1);
		border: 1px solid rgba(212, 175, 55, .2);
		border-radius: 8px;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		margin: 6px 0
	}

	.mobile-nav-sub-accordion-btn:hover {
		background: rgba(212, 175, 55, .2);
		border-color: rgba(212, 175, 55, .4)
	}

	.mobile-nav-sub-accordion-btn i {
		width: 18px;
		font-size: 14px;
		color: var(--gold)
	}

	.mobile-sub-accordion-arrow {
		font-size: 12px;
		color: var(--gold);
		transition: transform .3s
	}

	.mobile-nav-sub-accordion-btn.active .mobile-sub-accordion-arrow {
		transform: rotate(180deg)
	}

	.mobile-nav-sub-accordion-body {
		max-height: 0;
		overflow: hidden;
		transition: max-height .4s;
		margin-top: 4px
	}

	.mobile-nav-sub-accordion-body.open {
		max-height: 200px
	}

	.mobile-nav-sub-accordion-body .mobile-nav-sub-link {
		opacity: 0;
		transform: translateX(-15px);
		pointer-events: none;
		transition: opacity .3s, transform .3s
	}

	.mobile-nav-sub-accordion-body.open .mobile-nav-sub-link {
		opacity: 1;
		transform: translateX(0);
		pointer-events: auto
	}

	.mobile-nav-accordion.open .mobile-nav-accordion-body .mobile-nav-sub-link:nth-child(2),
	.mobile-nav-sub-accordion-body.open .mobile-nav-sub-link:first-child {
		animation-delay: .1s
	}

	.mobile-nav-accordion.open .mobile-nav-accordion-body .mobile-nav-sub-link:nth-child(3),
	.mobile-nav-sub-accordion-body.open .mobile-nav-sub-link:nth-child(2) {
		animation-delay: .15s
	}

	.mobile-nav-accordion.open .mobile-nav-accordion-body .mobile-nav-sub-link:nth-child(4),
	.mobile-nav-sub-accordion-body.open .mobile-nav-sub-link:nth-child(3) {
		animation-delay: .2s
	}

	.mobile-nav-accordion-body .mobile-nav-sub-link {
		opacity: 0;
		transform: translateX(-15px);
		pointer-events: none;
		transition: opacity .25s, transform .25s
	}

	.mobile-nav-accordion.open .mobile-nav-accordion-body .mobile-nav-sub-link {
		opacity: 1;
		transform: translateX(0);
		pointer-events: auto;
		animation: .3s forwards fadeInSlide;
		border-radius: 40px
	}

	.mobile-nav-accordion.open .mobile-nav-accordion-body .mobile-nav-sub-link:first-child {
		animation-delay: 50ms
	}

	.mobile-nav-accordion.open .mobile-nav-accordion-body .mobile-nav-sub-link:nth-child(5) {
		animation-delay: .25s
	}

	.mobile-nav-accordion.open .mobile-nav-accordion-body .mobile-nav-sub-link:nth-child(6) {
		animation-delay: .3s
	}

	.mobile-nav-accordion.open .mobile-nav-banner {
		animation: .4s forwards slideInUp
	}

	@keyframes slideInUp {
		from {
			opacity: 0;
			transform: translateY(10px)
		}

		to {
			opacity: 1;
			transform: translateY(0)
		}
	}

	@keyframes fadeInSlide {
		from {
			opacity: 0;
			transform: translateX(-15px)
		}

		to {
			opacity: 1;
			transform: translateX(0)
		}
	}

	.mobile-nav-accordion-btn:active {
		transform: scale(.98)
	}

	.mobile-nav-sub-link:active {
		transform: scale(.96)
	}
}

html[dir=rtl] .header {
	left: auto;
	right: 50%;
	transform: translate(50%)
}

html[dir=rtl] .desktop-nav,
html[dir=rtl] .nav-container,
html[dir=rtl] .shop-now-btn {
	flex-direction: row
}

html[dir=rtl] .featured-perfume-row:first-child .perfume-category-badge,
html[dir=rtl] .logo {
	margin-right: 0;
	margin-left: auto
}

html[dir=rtl] .nav-links {
	flex-direction: row;
	gap: 10px
}

html[dir=rtl] .nav-actions {
	margin-left: 0;
	margin-right: 16px;
	padding-left: 0;
	padding-right: 16px;
	border-left: none;
	border-right: 1px solid rgba(216, 196, 171, .3)
}

html[dir=rtl] .nav-actions:hover {
	border-right-color: var(--gold)
}

html[dir=rtl] .language-toggle {
	margin-right: 0;
	margin-left: 12px
}

html[dir=rtl] .nav-dropdown-mega {
	left: 0;
	text-align: right
}

html[dir=rtl] .filter-results-bottom,
html[dir=rtl] .nav-dropdown-cols,
html[dir=rtl] .nav-dropdown-inner {
	direction: rtl
}

[dir=rtl] .social-links,
[dir=rtl] .social-post-content,
[dir=rtl] .social-post-date,
[dir=rtl] .social-post-stats,
[dir=rtl] .social-post-text,
[dir=rtl] .social-post-user,
html[dir=rtl] .featured-perfume-row:first-child .perfume-buttons,
html[dir=rtl] .featured-perfume-row:first-child .perfume-category-badge,
html[dir=rtl] .featured-perfume-row:first-child .perfume-details,
html[dir=rtl] .featured-perfume-row:first-child .perfume-name,
html[dir=rtl] .featured-perfume-row:first-child .pyramid-note,
html[dir=rtl] .featured-perfume-row:first-child .scent-pyramid,
html[dir=rtl] .nav-dropdown-col {
	text-align: right
}

html[dir=rtl] .nav-dropdown-col-header {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center
}

html[dir=rtl] .nav-dropdown-col-header i,
html[dir=rtl] .nav-dropdown-item-dot {
	order: 1;
	margin-left: 8px;
	margin-right: 0
}

html[dir=rtl] .nav-dropdown-col-header span,
html[dir=rtl] .nav-dropdown-item span {
	order: 2
}

html[dir=rtl] .nav-dropdown-list {
	padding-right: 0
}

html[dir=rtl] .nav-dropdown-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start
}

html[dir=rtl] .nav-dropdown-exclusive {
	flex-direction: row-reverse;
	text-align: right
}

[dir=rtl] .social-post-date,
[dir=rtl] .social-post-header,
[dir=rtl] .social-post-stat,
[dir=rtl] .social-post-stats,
html[dir=rtl] .mobile-nav-accordion-btn,
html[dir=rtl] .mobile-nav-accordion-btn>span,
html[dir=rtl] .mobile-nav-banner-content,
html[dir=rtl] .mobile-nav-link,
html[dir=rtl] .mobile-nav-sub-accordion-btn span,
html[dir=rtl] .nav-dropdown-exclusive-left,
html[dir=rtl] .rb-carousel-track {
	flex-direction: row-reverse
}

html[dir=rtl] .nav-dropdown-exclusive-icon {
	margin-left: 12px;
	margin-right: 0
}

html[dir=rtl] .nav-dropdown-exclusive-cta i {
	transform: rotate(180deg);
	display: inline-block;
	margin-right: 8px;
	margin-left: 0
}

html[dir=rtl] .nav-dropdown-arrow {
	transform: rotate(0)
}

html[dir=rtl] .carousel-next i,
html[dir=rtl] .category-cta i,
html[dir=rtl] .featured-perfume-row:first-child .btn-details i,
html[dir=rtl] .mobile-nav-accordion.open .mobile-accordion-arrow,
html[dir=rtl] .nav-dropdown-wrapper.active .nav-dropdown-arrow,
html[dir=rtl] .testimonial-arrow i {
	transform: rotate(180deg)
}

html[dir=rtl] .mobile-nav {
	left: auto;
	right: -100%;
	transition: right .3s
}

html[dir=rtl] .mobile-nav-link.active,
html[dir=rtl] .mobile-nav-link:hover {
	padding-left: 20px;
	padding-right: 25px
}

html[dir=rtl] .mobile-accordion-arrow {
	margin-left: 0;
	margin-right: 10px;
	transform: rotate(0)
}

html[dir=rtl] .mobile-nav-accordion-btn span,
html[dir=rtl] .mobile-nav-banner-btn {
	display: flex;
	flex-direction: row;
	align-items: center
}

html[dir=rtl] .mobile-nav-accordion-btn i:first-child,
html[dir=rtl] .mobile-nav-accordion-btn span i:first-child,
html[dir=rtl] .mobile-shop-btn i {
	order: 1;
	margin-left: 10px;
	margin-right: 0
}

html[dir=rtl] .mobile-nav-sub-link--indent {
	padding-left: 20px;
	padding-right: 34px
}

html[dir=rtl] .mobile-nav-sub-link--double-indent {
	padding-left: 20px;
	padding-right: 48px
}

html[dir=rtl] .mobile-nav-banner-btn i {
	display: inline-block
}

html[dir=rtl] .mobile-nav-link,
html[dir=rtl] .mobile-nav-sub-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start
}

html[dir=rtl] .mobile-nav-banner-icon,
html[dir=rtl] .mobile-nav-link i,
html[dir=rtl] .mobile-nav-sub-link i {
	order: 1;
	margin-left: 12px;
	margin-right: 0
}

html[dir=rtl] .mobile-language-label span,
html[dir=rtl] .mobile-nav-accordion-btn .mobile-accordion-arrow,
html[dir=rtl] .mobile-nav-accordion-btn span span,
html[dir=rtl] .mobile-nav-link span,
html[dir=rtl] .mobile-nav-sub-link span,
html[dir=rtl] .mobile-shop-btn span {
	order: 2
}

html[dir=rtl] .mobile-nav-accordion-btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%
}

html[dir=rtl] .mobile-nav-accordion-btn span {
	display: flex;
	flex-direction: row;
	align-items: center;
	order: 1
}

html[dir=rtl] .mobile-nav-banner-btn span {
	order: 1
}

html[dir=rtl] .mobile-nav-banner-btn i {
	order: 2;
	margin-left: 0;
	margin-right: 8px;
	transform: rotate(180deg)
}

html[dir=rtl] .mobile-nav-banner-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between
}

html[dir=rtl] .mobile-nav-banner-text {
	order: 2;
	text-align: right
}

html[dir=rtl] .mobile-nav-banner-btn {
	order: 3
}

html[dir=rtl] .mobile-nav-sub-group-label {
	padding-left: 0;
	padding-right: 8px;
	border-left: none;
	border-right: 2px solid var(--gold);
	text-align: right;
	display: block
}

.overlay-content,
.promise-label,
.signature-quote,
html[dir=rtl] .mobile-logo {
	text-align: center
}

html[dir=rtl] .mobile-close-btn {
	right: auto;
	left: 20px
}

html[dir=rtl] .mobile-language-label,
html[dir=rtl] .mobile-shop-btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center
}

html[dir=rtl] .mobile-language-label i {
	order: 1;
	margin-left: 6px;
	margin-right: 0
}

@keyframes fadeInUpRTL {
	from {
		opacity: 0;
		transform: translateY(20px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

html[dir=rtl] .mobile-nav.show .mobile-nav-link {
	animation: .5s forwards fadeInUpRTL
}

html[dir=rtl] .nav-link.active::after {
	left: 12px;
	right: 12px
}

html[dir=rtl] .header.header-scrolled {
	right: 50%;
	transform: translate(50%)
}

html[dir=rtl] .mobile-nav-sub-accordion-btn {
	flex-direction: row-reverse;
	justify-content: space-between
}

html[dir=rtl] .mobile-nav-sub-accordion-body .mobile-nav-sub-link {
	transform: translateX(15px)
}

html[dir=rtl] .mobile-nav-sub-accordion-body.open .mobile-nav-sub-link {
	transform: translateX(0)
}

@keyframes fadeInSlideRTL {
	from {
		opacity: 0;
		transform: translateX(15px)
	}

	to {
		opacity: 1;
		transform: translateX(0)
	}
}

html[dir=rtl] .mobile-nav-accordion.open .mobile-nav-accordion-body .mobile-nav-sub-link {
	animation: .3s forwards fadeInSlideRTL
}

.hero-single-wrapper {
	position: sticky;
	top: 0;
	height: 100vh;
	min-height: 600px;
	overflow: hidden;
	z-index: 0
}

.hero-single {
	position: relative;
	height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center
}

.hero-background-video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
	z-index: 0;
	opacity: 1;
	transition: opacity .5s
}

.hero-video-controls-wrapper {
	display: flex;
	backdrop-filter: blur(8px)
}

.hero-control-btn {
	color: var(--gold, #d4af37);
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center
}

.hero-play-prompt i {
	font-size: 20px
}

.hero-background-video.portrait {
	object-fit: cover;
	object-position: center 30%
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .3);
	z-index: 1;
	pointer-events: none
}

.hero-glass-panel {
	position: relative;
	z-index: 2;
	background: rgba(0, 0, 0, .5);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(212, 175, 55, .3);
	border-radius: 24px;
	padding: 40px 60px;
	max-width: 90%;
	width: auto;
	animation: .8s fadeInUp
}

.hero-buttons-group {
	display: flex;
	gap: 30px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap
}

.hero-glass-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 36px;
	border-radius: 60px;
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
	transition: .3s cubic-bezier(.175, .885, .32, 1.275);
	position: relative;
	overflow: hidden
}

.hero-glass-btn.primary {
	background: linear-gradient(135deg, var(--gold), #c49b3a);
	color: var(--dark);
	box-shadow: 0 4px 20px rgba(212, 175, 55, .4)
}

.hero-glass-btn.primary:hover {
	transform: translateY(-5px) scale(1.05);
	box-shadow: 0 12px 35px rgba(212, 175, 55, .6)
}

.hero-glass-btn.secondary {
	background: rgba(255, 255, 255, .1);
	border: 2px solid var(--gold);
	color: var(--gold)
}

.hero-glass-btn.secondary:hover {
	background: var(--gold);
	color: var(--dark);
	transform: translateY(-5px) scale(1.05);
	border-color: transparent;
	box-shadow: 0 12px 35px rgba(212, 175, 55, .4)
}

.hero-glass-btn i {
	font-size: 18px;
	transition: transform .3s
}

.hero-glass-btn:hover i,
.social-link:hover i {
	transform: scale(1.2) rotate(5deg)
}

.hero-video-controls-wrapper {
	position: absolute;
	bottom: 30px;
	right: 30px;
	display: flex;
	gap: 12px;
	z-index: 20;
	background: rgba(0, 0, 0, .6);
	backdrop-filter: blur(8px);
	padding: 8px 16px;
	border-radius: 50px;
	border: 1px solid rgba(212, 175, 55, .3)
}

.hero-control-btn {
	background: 0 0;
	border: none;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: .2s
}

.hero-control-btn:hover {
	color: var(--gold);
	background: rgba(255, 255, 255, .1);
	transform: scale(1.1)
}

@media (max-width:768px) {
	.hero-single-wrapper {
		min-height: 100vh;
		height: auto
	}

	.hero-single {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden
	}

	.hero-background-video {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100% !important;
		height: auto !important;
		min-width: 100% !important;
		min-height: auto !important;
		object-fit: cover !important
	}

	.hero-glass-panel {
		padding: 25px 30px;
		margin: 0 20px;
		width: calc(100% - 40px);
		max-width: none
	}

	.hero-buttons-group {
		flex-direction: column;
		gap: 15px;
		width: 100%
	}

	.hero-glass-btn {
		width: 100%;
		justify-content: center;
		padding: 12px 24px;
		font-size: 14px
	}

	.hero-glass-btn i {
		font-size: 16px
	}

	.hero-video-controls-wrapper {
		bottom: 20px;
		right: 20px;
		gap: 8px;
		padding: 6px 12px
	}

	.hero-control-btn {
		width: 32px;
		height: 32px;
		font-size: 14px
	}

	.hero-overlay {
		background: linear-gradient(135deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .3))
	}
}

.divider,
.perfume-bottle-icon {
	display: flex;
	align-items: center
}

@media (max-width:480px) {
	.hero-glass-panel {
		padding: 20px 24px
	}

	.hero-glass-btn {
		padding: 10px 20px;
		font-size: 13px
	}

	.hero-glass-btn i {
		font-size: 14px
	}

	.hero-video-controls-wrapper {
		bottom: 15px;
		right: 15px;
		padding: 5px 10px
	}

	.hero-control-btn {
		width: 28px;
		height: 28px;
		font-size: 14px
	}
}

@media (max-width:768px) and (orientation:landscape) {
	.hero-single-wrapper {
		min-height: 100vh
	}

	.hero-background-video {
		object-fit: cover
	}

	.hero-glass-panel {
		padding: 15px 25px
	}

	.hero-glass-btn {
		padding: 8px 18px;
		font-size: 12px
	}
}

.about-section {
	padding: 80px 0;
	position: relative;
	z-index: 1;
	background: #fdfbf7
}

.section-header h2 {
	font-size: 42px;
	color: var(--gold);
	letter-spacing: 1px
}

.featured-perfume-row:hover .note-label,
.section-header h5 {
	letter-spacing: 3px
}

.section-header h5 {
	color: #705a42;
	text-transform: uppercase
}

.divider {
	justify-content: center;
	gap: 15px;
	width: 100%
}

.divider-line {
	background: rgba(112, 90, 66, .3);
	transition: background .3s
}

.craft-step:hover .craft-step-icon,
.divider:hover .divider-line {
	background: var(--gold)
}

.perfume-bottle-icon {
	color: var(--gold);
	font-size: 20px;
	opacity: .8;
	transition: .3s;
	justify-content: center
}

.perfume-bottle-icon img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto
}

.divider:hover .perfume-bottle-icon {
	opacity: 1;
	transform: scale(1.05)
}

.about-content {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 60px;
	align-items: center
}

.about-image-wrapper {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	width: 100%
}

.about-landscape-container {
	position: relative;
	width: 100%;
	aspect-ratio: 4/3;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
	transition: .4s;
	background: linear-gradient(135deg, #f5f0e8, #e8e0d5)
}

.about-landscape-container:hover {
	transform: translateY(-10px);
	box-shadow: 0 30px 50px rgba(212, 175, 55, .25)
}

.btn-details:hover,
.btn-shop:hover {
	box-shadow: 0 5px 20px rgba(212, 175, 55, .4)
}

.about-landscape-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform .6s cubic-bezier(.4, 0, .2, 1)
}

.about-landscape-container:hover .about-landscape-image {
	transform: scale(1.08)
}

.about-landscape-container .image-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(33, 33, 33, .9), transparent);
	padding: 30px 20px 20px;
	opacity: 0;
	transition: opacity .4s;
	pointer-events: none;
	z-index: 2
}

@keyframes fadeOutDelay {

	0%,
	70% {
		opacity: 1
	}

	100% {
		opacity: 0
	}
}

.overlay-content {
	color: var(--beige)
}

.since-badge {
	display: inline-block;
	background: var(--gold);
	color: var(--dark);
	padding: 4px 12px;
	font-size: 12px;
	letter-spacing: 1px;
	margin-bottom: 8px;
	border-radius: 20px
}

.about-text,
.lead-text {
	padding-left: 20px
}

.identity-line-overlay {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 400;
	letter-spacing: 1px;
	color: var(--gold);
	display: block;
	margin: 3px 0
}

.identity-line-overlay.second {
	font-size: 14px;
	color: var(--beige)
}

.about-text h3 {
	font-size: 32px;
	color: var(--dark);
	margin-bottom: 25px;
	font-weight: 400;
	line-height: 1.3
}

.gold-text {
	color: var(--gold);
	font-style: italic;
	transition: color .3s
}

.gold-text:hover {
	color: var(--gold-dark)
}

.philosophy-text {
	margin-bottom: 30px
}

.lead-text {
	font-size: 18px;
	line-height: 1.7;
	color: var(--dark);
	margin-bottom: 20px;
	font-weight: 400;
	border-left: 2px solid #705a42
}

.philosophy-text p {
	color: #705a42;
	line-height: 1.8;
	margin-bottom: 20px;
	font-size: 15px
}

.signature-quote {
	margin: 30px 0 25px;
	padding: 35px 25px;
	background: rgba(212, 175, 55, .12);
	border-radius: 4px;
	position: relative;
	border: 1px solid rgba(212, 175, 55, .4);
	box-shadow: 0 8px 20px rgba(212, 175, 55, .1)
}

.signature-quote::after,
.signature-quote::before {
	content: '"';
	position: absolute;
	font-size: 80px;
	color: var(--gold);
	opacity: .35;
	font-family: serif;
	font-weight: 700;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, .1)
}

.signature-quote::before {
	top: 5px;
	left: 15px
}

.signature-quote::after {
	bottom: -15px;
	right: 15px;
	transform: rotate(180deg)
}

.signature-quote p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--text);
	font-style: italic;
	margin: 0;
	position: relative;
	z-index: 1
}

@media (max-width:992px) {

	.about-text,
	.about-text h3 {
		text-align: center
	}

	.about-content {
		grid-template-columns: 1fr;
		gap: 50px
	}

	.about-text {
		padding-left: 0;
		order: 2
	}

	.about-image-wrapper {
		order: 1;
		display: flex;
		justify-content: center
	}

	.about-landscape-container {
		max-width: 550px;
		margin: 0 auto
	}

	.lead-text {
		text-align: left
	}

	.section-header h2 {
		font-size: 36px
	}

	.identity-line-overlay {
		font-size: 16px
	}

	.vision-content {
		grid-template-columns: 1fr;
		gap: 40px
	}

	.vision-side {
		flex-direction: row;
		gap: 2px
	}

	.vision-stat {
		flex: 1
	}
}

.contact-info li,
.craft-pyramid-caption,
.craft-quote,
.cta-section,
.footer-links li,
.footer-widget,
.fragrance-description,
.section-header,
.social-section,
.vision-quote,
.vision-subtitle,
.vision-text,
.why-promise-text,
.why-sig {
	text-align: center
}

.branches-section,
.featured-perfumes-section {
	padding: 80px 0;
	background: var(--off-white);
	position: relative;
	overflow: hidden
}

@keyframes sectionFadeIn {
	from {
		opacity: 0;
		transform: translateY(30px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.container-full {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px
}

.featured-perfume-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	margin-bottom: 100px;
	align-items: center;
	position: relative;
	opacity: 0;
	transform: translateY(50px);
	animation: .8s cubic-bezier(.4, 0, .2, 1) forwards rowSlideUp
}

.featured-perfume-row .perfume-buttons {
	display: flex;
	gap: 20px;
	align-items: center;
	margin-top: 20px
}

@media (min-width:769px) {
	.about-landscape-container:hover .image-overlay {
		opacity: 1
	}

	.about-landscape-container .image-overlay.show {
		opacity: 0;
		animation: none
	}

	.featured-perfume-row .perfume-buttons {
		gap: 25px
	}

	.category-item.active,
	.category-item:hover {
		border-color: var(--gold);
		box-shadow: 0 15px 40px rgba(212, 175, 55, .15)
	}

	.category-item.active .category-expanded,
	.category-item:hover .category-expanded {
		max-height: 280px;
		opacity: 1
	}

	.category-item.active .category-title,
	.category-item:hover .category-title {
		color: var(--gold)
	}

	.category-item.active .category-image-wrapper,
	.category-item:hover .category-image-wrapper {
		border-color: var(--gold);
		transform: scale(1.05)
	}

	.category-item.active .category-image-wrapper::before,
	.category-item:hover .category-image-wrapper::before {
		transform: rotate(45deg);
		color: var(--gold)
	}

	.category-item.active .expanded-image,
	.category-item:hover .expanded-image {
		transform: scale(1.05) rotate(0)
	}
}

html[dir=rtl] .featured-perfume-row .perfume-buttons {
	gap: 20px
}

@media (max-width:768px) {
	.about-landscape-container .image-overlay {
		opacity: 0;
		transition: opacity .4s
	}

	.about-landscape-container .image-overlay.show {
		opacity: 1;
		animation: 4s forwards fadeOutDelay
	}

	.about-landscape-container:hover .image-overlay {
		opacity: 0
	}

	.about-section {
		padding: 60px 0
	}

	.about-text h3 {
		font-size: 28px
	}

	.lead-text {
		font-size: 16px
	}

	.identity-line-overlay,
	.identity-line-overlay.second,
	.philosophy-text p {
		font-size: 14px
	}

	.signature-quote {
		padding: 20px 15px
	}

	.signature-quote p {
		font-size: 14px;
		text-align: center
	}

	.signature-quote p br {
		display: none
	}

	.about-landscape-container {
		max-width: 450px
	}

	.divider-line {
		width: 40px
	}

	.featured-perfume-row .perfume-buttons {
		gap: 15px;
		flex-direction: row;
		justify-content: center
	}

	html[dir=rtl] .featured-perfume-row .perfume-buttons {
		gap: 15px
	}

	.featured-perfume-row:first-child .perfume-buttons,
	.featured-perfume-row:last-child .perfume-buttons {
		justify-content: center
	}
}

@media (max-width:480px) {
	.about-landscape-container {
		max-width: 100%
	}

	.about-text h3 {
		font-size: 24px
	}

	.lead-text {
		font-size: 15px
	}

	.identity-line-overlay,
	.identity-line-overlay.second {
		font-size: 12px
	}

	.featured-perfume-row .perfume-buttons {
		flex-direction: column;
		gap: 12px;
		width: 100%
	}

	.featured-perfume-row .btn-details,
	.featured-perfume-row .btn-shop {
		width: 100%;
		justify-content: center
	}

	html[dir=rtl] .featured-perfume-row .perfume-buttons {
		gap: 12px
	}
}

.featured-perfume-row:first-child .perfume-buttons,
.featured-perfume-row:last-child .perfume-buttons {
	display: flex;
	gap: 20px
}

.featured-perfume-row .btn-details,
.featured-perfume-row .btn-shop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 24px;
	white-space: nowrap
}

.featured-perfume-row:last-child {
	animation-delay: .4s;
	margin-bottom: 0
}

@keyframes rowSlideUp {
	from {
		opacity: 0;
		transform: translateY(50px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.featured-perfume-row.reverse-mobile {
	direction: ltr
}

.featured-perfume-row.reverse-mobile .perfume-visual {
	order: 2;
	animation: .8s ease-out visualFloatReverse
}

.perfume-visual {
	position: relative;
	min-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: .8s ease-out visualFloat
}

@keyframes visualFloat {
	from {
		opacity: 0;
		transform: translateX(-30px)
	}

	to {
		opacity: 1;
		transform: translateX(0)
	}
}

@keyframes visualFloatReverse {
	from {
		opacity: 0;
		transform: translateX(30px)
	}

	to {
		opacity: 1;
		transform: translateX(0)
	}
}

.perfume-main-image-wrapper {
	position: relative;
	width: 100%;
	max-width: 450px;
	height: 450px;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 0 30px 50px rgba(0, 0, 0, .15);
	transition: .4s;
	background: linear-gradient(135deg, #f5f0e8 0, #e8e0d5 100%);
	animation: 3s ease-in-out infinite imageGlowPulse;
	display: flex;
	align-items: center;
	justify-content: center
}

@keyframes imageGlowPulse {

	0%,
	100% {
		box-shadow: 0 30px 50px rgba(0, 0, 0, .15)
	}

	50% {
		box-shadow: 0 35px 65px rgba(212, 175, 55, .25)
	}
}

.featured-perfume-row:hover .perfume-main-image-wrapper {
	transform: translateY(-10px) scale(1.02);
	box-shadow: 0 40px 60px rgba(212, 175, 55, .35);
	transition: .5s cubic-bezier(.4, 0, .2, 1)
}

.perfume-main-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	padding: 40px;
	transition: transform .6s cubic-bezier(.4, 0, .2, 1)
}

.featured-perfume-row:hover .perfume-main-img {
	transform: scale(1.08) rotate(2deg)
}

.perfume-overlap-image {
	position: absolute;
	bottom: -30px;
	left: -30px;
	width: 180px;
	height: 180px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 30px rgba(0, 0, 0, .2);
	border: 3px solid var(--gold);
	background: #fff;
	transition: .4s;
	z-index: 2;
	animation: .6s cubic-bezier(.4, 0, .2, 1) .3s forwards overlapSlideIn;
	opacity: 0;
	transform: scale(.8) translateY(20px)
}

@keyframes overlapSlideIn {
	to {
		opacity: 1;
		transform: scale(1) translateY(0)
	}
}

.featured-perfume-row:not(.reverse-mobile) .perfume-overlap-image {
	left: auto;
	right: -30px;
	bottom: -30px;
	animation: .6s cubic-bezier(.4, 0, .2, 1) .3s forwards overlapSlideInRight
}

@keyframes overlapSlideInRight {
	from {
		opacity: 0;
		transform: scale(.8) translateY(20px) translateX(20px)
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0) translateX(0)
	}
}

.featured-perfume-row.reverse-mobile .perfume-overlap-image {
	right: auto
}

.featured-perfume-row:hover .perfume-overlap-image {
	transform: scale(1.08) translateY(-5px);
	box-shadow: 0 30px 45px rgba(212, 175, 55, .4)
}

.perfume-small-img,
.product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s
}

.perfume-details {
	padding: 20px 0;
	animation: .8s ease-out .1s forwards detailsSlide;
	opacity: 0;
	transform: translateX(30px)
}

@keyframes detailsSlide {
	to {
		opacity: 1;
		transform: translateX(0)
	}
}

.featured-perfume-row.reverse-mobile .perfume-details {
	order: 1;
	animation: .8s ease-out .1s forwards detailsSlideLeft;
	transform: translateX(-30px)
}

@keyframes detailsSlideLeft {
	to {
		opacity: 1;
		transform: translateX(0)
	}
}

.perfume-category-badge {
	padding: 6px 18px;
	background: linear-gradient(135deg, rgba(212, 175, 55, .15), rgba(212, 175, 55, .05));
	border: 1px solid rgba(212, 175, 55, .3);
	border-radius: 50px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	color: var(--gold);
	text-transform: uppercase;
	margin-bottom: 20px;
	animation: 2s ease-in-out infinite badgePulse;
	display: inline-block
}

.about-hero .hero-title .title-line,
.fragrances-hero .hero-title .title-line,
.note-label {
	display: block
}

@keyframes badgePulse {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(212, 175, 55, 0)
	}

	50% {
		box-shadow: 0 0 0 4px rgba(212, 175, 55, .2)
	}
}

.perfume-category-badge.womens {
	background: linear-gradient(135deg, rgba(212, 175, 55, .12), rgba(212, 175, 55, .03))
}

.perfume-name {
	font-size: 48px;
	font-weight: 500;
	color: var(--dark);
	margin-bottom: 25px;
	line-height: 1.2;
	letter-spacing: -.5px;
	animation: 3s ease-in-out infinite textGlow
}

@keyframes textGlow {

	0%,
	100% {
		text-shadow: 0 0 0 rgba(212, 175, 55, 0)
	}

	50% {
		text-shadow: 0 0 8px rgba(212, 175, 55, .3)
	}
}

.scent-pyramid {
	margin: 25px 0;
	background: linear-gradient(135deg, #faf8f4 0, #f5f2ec 100%);
	border-radius: 16px;
	padding: 18px 22px;
	border: 1px solid rgba(212, 175, 55, .15);
	transition: .4s;
	animation: 2s ease-in-out infinite pyramidGlow
}

@keyframes pyramidGlow {

	0%,
	100% {
		border-color: rgba(212, 175, 55, .15);
		box-shadow: 0 0 0 0 rgba(212, 175, 55, 0)
	}

	50% {
		border-color: rgba(212, 175, 55, .4);
		box-shadow: 0 0 15px rgba(212, 175, 55, .1)
	}
}

.featured-perfume-row:hover .scent-pyramid {
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(212, 175, 55, .15);
	border-color: rgba(212, 175, 55, .3)
}

.pyramid-note {
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(212, 175, 55, .1);
	transition: .3s
}

.featured-perfume-row:hover .pyramid-note {
	border-bottom-color: rgba(212, 175, 55, .3)
}

.pyramid-note:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0
}

.note-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--gold);
	margin-bottom: 8px;
	font-family: Poppins, sans-serif;
	transition: letter-spacing .3s
}

.category-title,
.cta-section h2,
.expanded-left h4,
.grid-motion-item {
	font-family: 'Playfair Display', serif
}

.note-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	row-gap: 6px
}

.note-tags span {
	font-size: 12px;
	color: var(--brown);
	background: rgba(212, 175, 55, .08);
	padding: 3px 10px;
	border-radius: 20px;
	transition: .3s;
	cursor: default;
	white-space: nowrap;
	animation: .5s ease-out forwards noteFadeIn;
	opacity: 0;
	transform: translateY(10px)
}

.note-tags span:nth-child(2) {
	animation-delay: .15s
}

.note-tags span:nth-child(4) {
	animation-delay: .25s
}

.note-tags span:nth-child(6) {
	animation-delay: .35s
}

@keyframes noteFadeIn {
	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.note-tags span:hover {
	background: rgba(212, 175, 55, .25);
	color: var(--gold);
	transform: translateY(-3px) scale(1.05)
}

.perfume-description {
	font-size: 15px;
	line-height: 1.7;
	color: var(--text);
	margin: 20px 0;
	animation: .6s ease-out .2s forwards fadeInUp;
	opacity: 0;
	transform: translateY(15px)
}

.btn-details,
.btn-shop {
	text-decoration: none;
	transition: .3s cubic-bezier(.175, .885, .32, 1.275);
	display: inline-flex;
	font-weight: 600;
	animation: 2s infinite softPulse;
	font-size: 14px;
	cursor: pointer
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.btn-shop {
	background-color: var(--gold);
	color: var(--dark);
	padding: 12px 28px;
	border-radius: 9999px;
	border: none;
	align-items: center;
	gap: 12px
}

.btn-shop:hover {
	background-color: var(--gold-dark);
	transform: translateY(-3px)
}

.btn-details:active,
.btn-shop:active,
.view-all-btn:active {
	transform: scale(.95)
}

.btn-details {
	border: 1px solid var(--gold);
	color: var(--gold);
	padding: 10px 24px;
	border-radius: 9999px;
	background: 0 0;
	align-items: center;
	gap: 8px
}

.btn-details:hover {
	background-color: var(--gold);
	color: var(--dark);
	transform: translateY(-3px)
}

@keyframes softPulse {

	0%,
	100% {
		box-shadow: 0 4px 10px rgba(212, 175, 55, .2)
	}

	50% {
		box-shadow: 0 8px 20px rgba(212, 175, 55, .4)
	}
}

@media (max-width:1024px) {
	.container-full {
		padding: 0 30px
	}

	.featured-perfume-row {
		gap: 40px;
		margin-bottom: 80px
	}

	.perfume-name {
		font-size: 38px
	}

	.perfume-overlap-image {
		width: 150px;
		height: 150px;
		bottom: -20px
	}

	.featured-perfume-row .perfume-overlap-image {
		left: -20px
	}

	.featured-perfume-row:not(.reverse-mobile) .perfume-overlap-image {
		right: -20px;
		left: auto
	}

	.scent-pyramid {
		padding: 15px 18px
	}

	.note-tags span {
		font-size: 11px;
		padding: 2px 8px
	}
}

.products-section {
	position: relative;
	background: var(--off-white);
	padding: 60px 0;
	z-index: 1;
	width: 100%;
	overflow: visible
}

.category-item,
.category-preview {
	background: #fff;
	position: relative
}

.interactive-categories {
	max-width: 1000px;
	margin: 50px auto 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
	position: relative;
	z-index: 2;
	width: 100%
}

.fragrance-description {
	max-width: 700px;
	margin: 0 auto 40px;
	padding: 0 20px;
	position: relative;
	z-index: 2
}

.fragrance-description p {
	font-size: 18px;
	line-height: 1.8;
	color: #705a42;
	font-style: italic;
	position: relative;
	padding: 0 15px
}

.fragrance-description p::after,
.fragrance-description p::before {
	content: '✦';
	color: var(--gold);
	font-size: 14px;
	margin: 0 10px;
	opacity: .7
}

.category-item {
	border: 1px solid rgba(216, 196, 171, .3);
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 5px 20px rgba(0, 0, 0, .03);
	opacity: 0;
	transform: translateY(30px);
	transition: border-color .4s, box-shadow .4s, opacity .5s, transform .5s;
	z-index: 3;
	width: 100%;
	margin-bottom: 15px
}

.category-item.visible,
.reveal.visible,
.why-promise-text .word.visible {
	opacity: 1;
	transform: translateY(0)
}

.category-preview {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 30px;
	transition: .4s;
	z-index: 4
}

.category-text-group {
	display: flex;
	flex-direction: column
}

.category-title {
	font-size: 28px;
	font-weight: 500;
	color: var(--dark);
	transition: color .4s
}

.category-subtitle {
	font-size: 13px;
	color: var(--brown);
	font-style: italic;
	letter-spacing: 1px;
	opacity: .8
}

.category-image-wrapper {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(212, 175, 55, .3);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: .4s
}

.category-image-wrapper::before {
	content: '\2B';
	font-size: 18px;
	color: rgba(212, 175, 55, .45);
	transition: transform .4s, color .4s;
	font-family: sans-serif;
	font-weight: 300;
	line-height: 1
}

.category-expanded {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .7s cubic-bezier(.4, 0, .2, 1), opacity .5s;
	background: linear-gradient(135deg, #fcf9f5 0, #fff 100%);
	position: relative;
	z-index: 3
}

.expanded-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-top: 1px solid rgba(212, 175, 55, .2);
	overflow: hidden;
	border-radius: 0 0 12px 12px;
	position: relative;
	z-index: 3
}

.expanded-left,
.expanded-right {
	display: flex;
	background: #f5f0e8;
	z-index: 3;
	position: relative
}

.expanded-left {
	flex-direction: column;
	justify-content: center;
	padding: 28px 30px
}

.expanded-left h4 {
	font-size: 22px;
	color: var(--gold);
	margin-bottom: 15px;
	font-weight: 400
}

.expanded-right {
	overflow: hidden;
	min-height: 200px;
	max-height: 200px;
	align-items: center;
	justify-content: center
}

.category-cta,
.view-all-btn {
	display: inline-flex;
	color: var(--gold);
	font-weight: 600;
	text-decoration: none
}

.expanded-image {
	position: relative;
	inset: auto;
	width: auto;
	height: 100%;
	max-height: 200px;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
	transform: scale(.95) rotate(-2deg);
	transition: transform .7s cubic-bezier(.4, 0, .2, 1);
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .15))
}

.expanded-right::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(253, 251, 247, .35), transparent);
	z-index: 4;
	pointer-events: none
}

.view-all-btn {
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: 0 0;
	border: 2px solid var(--gold);
	padding: 12px 32px;
	border-radius: 9999px;
	font-size: 14px;
	transition: .3s cubic-bezier(.175, .885, .32, 1.275);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(212, 175, 55, .2);
	animation: 2s infinite subtleGlow
}

.view-all-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .3), transparent);
	transition: left .5s
}

.view-all-btn:hover::before {
	left: 100%
}

.view-all-btn:hover {
	background: linear-gradient(135deg, var(--gold), #c49b3a);
	color: var(--dark);
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(212, 175, 55, .5);
	border-color: transparent
}

@keyframes subtleGlow {

	0%,
	100% {
		box-shadow: 0 2px 10px rgba(212, 175, 55, .2)
	}

	50% {
		box-shadow: 0 4px 20px rgba(212, 175, 55, .4)
	}
}

.category-cta {
	align-items: center;
	gap: 8px;
	font-size: 15px;
	transition: .3s;
	padding: 8px 0;
	width: fit-content;
	border-bottom: 1px solid transparent
}

.category-cta:hover {
	gap: 12px;
	color: var(--gold-dark);
	border-bottom-color: var(--gold)
}

.category-cta i,
.cta-btn i,
.custom-marker div {
	transition: transform .3s
}

.category-item:first-child,
.tier-base,
.tier-heart,
.tier-top {
	transition-delay: 0s
}

.category-item:nth-child(2) {
	transition-delay: 0.15s
}

.category-item:nth-child(3) {
	transition-delay: 0.3s
}

@media (max-width:768px) {

	.featured-perfume-row,
	.note-tags span,
	.perfume-description,
	.perfume-details,
	.perfume-overlap-image {
		animation: none;
		opacity: 1;
		transform: none
	}

	.featured-perfumes-section {
		padding: 60px 0
	}

	.container-full {
		padding: 0 20px
	}

	.featured-perfume-row {
		grid-template-columns: 1fr;
		gap: 30px;
		margin-bottom: 60px
	}

	.featured-perfume-row.reverse-mobile {
		direction: ltr
	}

	.featured-perfume-row.reverse-mobile .perfume-visual {
		order: 1
	}

	.featured-perfume-row.reverse-mobile .perfume-details {
		order: 2
	}

	.perfume-visual {
		min-height: auto;
		margin-bottom: 20px;
		animation: none
	}

	.perfume-main-image-wrapper {
		max-width: 320px;
		margin: 0 auto;
		animation: none
	}

	.perfume-main-img {
		padding: 30px
	}

	.perfume-overlap-image {
		width: 110px;
		height: 110px;
		bottom: -15px
	}

	.featured-perfume-row .perfume-overlap-image {
		left: -15px
	}

	.featured-perfume-row:not(.reverse-mobile) .perfume-overlap-image {
		right: -15px;
		left: auto;
		animation: none
	}

	.perfume-details {
		padding: 0;
		text-align: center
	}

	.perfume-category-badge {
		margin: 0 auto 20px
	}

	.perfume-name {
		font-size: 32px;
		margin-bottom: 20px;
		text-align: center;
		animation: none
	}

	.scent-pyramid {
		padding: 15px;
		margin: 20px 0;
		max-width: 100%;
		animation: none
	}

	.pyramid-note {
		margin-bottom: 10px;
		padding-bottom: 8px
	}

	.note-label {
		font-size: 9px;
		margin-bottom: 6px;
		text-align: center
	}

	.note-tags span {
		font-size: 10px;
		padding: 2px 8px;
		white-space: normal;
		word-break: keep-all;
		display: inline-block;
		margin: 2px
	}

	.note-tags {
		gap: 8px;
		flex-wrap: wrap;
		justify-content: center
	}

	.perfume-description {
		font-size: 14px;
		line-height: 1.6;
		text-align: center;
		margin: 20px 0
	}

	.perfume-buttons {
		gap: 15px;
		justify-content: center
	}

	.btn-details,
	.btn-shop {
		padding: 10px 22px;
		font-size: 13px
	}

	.view-all-btn {
		padding: 10px 24px;
		font-size: 13px;
		width: 100%;
		max-width: 260px;
		justify-content: center
	}

	.expanded-image,
	.expanded-right {
		max-height: 160px
	}

	.products-section {
		padding: 40px 15px;
		z-index: 1
	}

	.interactive-categories {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin: 30px auto 0;
		width: 100%;
		z-index: 2
	}

	.fragrance-description {
		margin: 0 auto 30px
	}

	.fragrance-description p {
		font-size: 15px
	}

	.category-item {
		width: 100%;
		margin-bottom: 15px;
		z-index: 3;
		opacity: 1 !important;
		transform: translateY(0) !important
	}

	.category-preview {
		padding: 14px 18px;
		z-index: 4
	}

	.category-title {
		font-size: 22px
	}

	.category-subtitle {
		font-size: 12px
	}

	.category-image-wrapper {
		width: 38px;
		height: 38px
	}

	.category-image-wrapper::before {
		font-size: 16px
	}

	.expanded-content {
		grid-template-columns: 1fr
	}

	.expanded-right {
		min-height: 160px;
		order: 1
	}

	.expanded-right::before {
		background: linear-gradient(to bottom, rgba(253, 251, 247, .15), transparent)
	}

	.expanded-left {
		text-align: center;
		padding: 18px 20px 24px;
		background-color: #f5f0e8;
		order: 2
	}

	.expanded-left h4 {
		font-size: 18px;
		margin-bottom: 10px
	}

	.category-cta {
		margin: 0 auto;
		font-size: 14px
	}

	.category-expanded {
		max-height: 0 !important;
		opacity: 0 !important;
		overflow: hidden !important;
		transition: max-height .5s, opacity .3s !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
		visibility: hidden
	}

	.category-item.active .category-expanded {
		max-height: 400px !important;
		opacity: 1 !important;
		margin-top: 15px !important;
		padding: initial !important;
		visibility: visible
	}

	.category-item.active .category-preview {
		background: linear-gradient(135deg, rgba(212, 175, 55, .1), transparent);
		border-radius: 10px
	}

	.category-item.active .category-image-wrapper::before {
		transform: rotate(45deg);
		color: var(--gold)
	}

	.category-item.active .category-title {
		color: var(--gold)
	}

	.category-item.active .expanded-image {
		transform: scale(1.05) rotate(0)
	}

	.category-item:hover .category-expanded {
		max-height: 0 !important;
		opacity: 0 !important
	}

	.category-item {
		visibility: visible !important;
		display: block !important
	}
}

.container {
	overflow: visible !important
}

.category-expanded,
.category-item,
.category-preview,
.interactive-categories,
.products-section {
	transform: translateZ(0);
	-webkit-transform: translateZ(0)
}

.cta-sticky-wrapper,
.promise-sticky-wrapper {
	position: sticky;
	top: 0;
	z-index: 0
}

.cta-section {
	position: relative;
	padding: 100px 0;
	color: #fff;
	overflow: hidden;
	background-color: var(--dark);
	min-height: 500px;
	display: flex;
	align-items: center
}

.cta-overlay,
.grid-motion-container {
	position: absolute;
	z-index: 0;
	inset: 0
}

.grid-motion-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0;
	transform: rotate(-15deg);
	transform-origin: center center;
	scale: 1.4
}

.grid-motion-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	padding: 6px 0;
	will-change: transform
}

.grid-motion-item {
	flex: 0 0 auto;
	background: rgba(212, 175, 55, .08);
	border: 1px solid rgba(212, 175, 55, .15);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: rgba(212, 175, 55, .4);
	letter-spacing: 1px;
	text-transform: uppercase;
	user-select: none
}

.cta-btn,
.testimonial-avatar {
	align-items: center;
	font-weight: 600
}

.grid-motion-item img {
	object-fit: cover;
	opacity: .25
}

.cta-overlay {
	background: linear-gradient(rgba(33, 33, 33, .82), rgba(33, 33, 33, .82))
}

.cta-btn,
.cta-section .container,
.rb-card,
.rb-carousel-wrapper,
.testimonials-section {
	position: relative
}

.cta-section h2 {
	font-size: 42px;
	margin-bottom: 20px;
	color: var(--beige);
	animation: 1s slideDown
}

.cta-section p {
	font-size: 18px;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
	animation: 1s .2s both slideUp;
	max-width: 2000px
}

.cta-btn {
	display: inline-flex;
	gap: 10px;
	background-color: var(--gold);
	color: var(--dark);
	padding: 15px 40px;
	border-radius: 9999px;
	text-decoration: none;
	font-size: 18px;
	transition: .3s;
	cursor: pointer;
	z-index: 3;
	border: none
}

.cta-btn:hover {
	background-color: var(--gold-dark);
	transform: scale(1.05) translateY(-3px);
	box-shadow: 0 10px 30px rgba(212, 175, 55, .5)
}

.testimonials-section {
	z-index: 1;
	padding: 80px;
	background-color: #fdfbf7;
	overflow: hidden
}

.rb-carousel-wrapper {
	width: 100%;
	overflow: hidden;
	padding: 40px 0;
	cursor: grab;
	user-select: none
}

.rb-carousel-wrapper:active {
	cursor: grabbing
}

.rb-carousel-track {
	display: flex;
	gap: 24px;
	will-change: transform;
	transition: transform .3s ease-out;
	padding: 0 20px
}

.rb-carousel-track.is-dragging {
	transition: none
}

.rb-card {
	flex: 0 0 330px;
	background: #fff;
	border: 1px solid rgba(216, 196, 171, .2);
	border-radius: 4px;
	padding: 35px 30px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, .02);
	transition: .4s cubic-bezier(.165, .84, .44, 1);
	overflow: hidden;
	cursor: pointer;
	height: auto;
	min-height: 280px;
	display: flex;
	flex-direction: column
}

.rb-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, .05);
	border-color: rgba(212, 175, 55, .3)
}

.rb-card.is-active {
	border-color: rgba(212, 175, 55, .5);
	box-shadow: 0 8px 32px rgba(212, 175, 55, .15)
}

.rb-card .testimonial-rating {
	color: var(--gold);
	font-size: 13px;
	letter-spacing: 3px;
	margin-bottom: 20px;
	transition: .3s
}

.rb-card:hover .testimonial-rating {
	letter-spacing: 4px
}

.rb-card .testimonial-rating i,
.rb-card .testimonial-rating span {
	display: inline-block;
	transition: .3s
}

.rb-card:hover .testimonial-rating i,
.rb-card:hover .testimonial-rating span {
	transform: scale(1.1);
	color: var(--gold-dark)
}

.rb-card .testimonial-text {
	color: var(--text);
	font-size: 15px;
	font-style: italic;
	line-height: 1.8;
	margin-bottom: 25px;
	position: relative;
	transition: .3s;
	height: auto;
	flex: 1
}

.rb-card:hover .testimonial-text {
	color: var(--dark);
	transform: translateX(3px)
}

.rb-card .testimonial-text::before {
	content: '"';
	position: absolute;
	top: -10px;
	left: -5px;
	font-size: 40px;
	color: var(--gold);
	opacity: .1;
	font-family: serif;
	transition: .4s
}

.rb-card:hover .testimonial-text::before {
	opacity: .2;
	transform: scale(1.2) rotate(5deg)
}

.testimonial-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--gold), #d4af37);
	display: flex;
	justify-content: center;
	font-size: 20px;
	color: var(--dark);
	text-transform: uppercase;
	flex-shrink: 0;
	transition: .3s;
	box-shadow: 0 4px 10px rgba(212, 175, 55, .2)
}

.rb-card:hover .testimonial-avatar {
	transform: scale(1.05);
	box-shadow: 0 6px 15px rgba(212, 175, 55, .3)
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 15px;
	border-top: 1px solid rgba(216, 196, 171, .2);
	padding-top: 20px;
	transition: .3s
}

.testimonial-author-info {
	flex: 1
}

.testimonial-author h4 {
	font-size: 16px;
	margin-bottom: 4px;
	color: var(--dark);
	font-weight: 500;
	transition: .3s
}

.testimonial-author p {
	font-size: 12px;
	color: #705a42;
	margin: 0;
	letter-spacing: .5px;
	transition: .3s
}

.rb-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 32px
}

.rb-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--beige);
	border: none;
	cursor: pointer;
	transition: .3s;
	padding: 0
}

.rb-dot.active {
	background: var(--gold);
	width: 24px;
	border-radius: 4px
}

.rb-carousel-wrapper::after,
.rb-carousel-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 50px;
	width: 120px;
	z-index: 2;
	pointer-events: none
}

.rb-carousel-wrapper::before {
	left: 0;
	background: linear-gradient(to right, #fdfbf7, transparent)
}

.rb-carousel-wrapper::after {
	right: 0;
	background: linear-gradient(to left, #fdfbf7, transparent)
}

.footer-widget h3::after,
.zedesigns-credit::after {
	position: absolute;
	transition: width .3s;
	height: 1px;
	left: 0;
	content: ''
}

@media (max-width:768px) {
	.testimonials-section {
		padding: 50px 0
	}

	.testimonials-section .section-header {
		padding: 0 20px
	}

	.rb-carousel-wrapper {
		padding: 20px 0 30px
	}

	.rb-card {
		flex: 0 0 85vw;
		padding: 25px 20px
	}

	.rb-card .testimonial-text {
		font-size: 13px;
		line-height: 1.7;
		margin-bottom: 18px
	}

	.rb-card .testimonial-author h4 {
		font-size: 14px
	}

	.rb-card .testimonial-rating {
		font-size: 11px;
		letter-spacing: 2px;
		margin-bottom: 14px
	}

	.rb-carousel-wrapper::after,
	.rb-carousel-wrapper::before {
		width: 20px
	}

	.rb-dots {
		margin-top: 20px
	}

	.cta-section,
	.shimmer-effect,
	.signature-quote {
		position: relative;
		overflow: hidden
	}

	.hero-content-left {
		padding: 0 20px;
		margin-left: 0;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%
	}

	.identity-centered,
	.identity-line {
		display: block;
		text-align: center;
		width: 100%
	}

	.hero-content-left .btn-group {
		justify-content: center;
		width: 100%
	}

	.hero-content-left h1 {
		font-size: 36px;
		animation: .8s fadeInDown
	}

	.hero-content-left p {
		font-size: 16px;
		animation: .8s .2s both fadeInUp
	}

	@keyframes fadeInDown {
		from {
			opacity: 0;
			transform: translateY(-20px)
		}

		to {
			opacity: 1;
			transform: translateY(0)
		}
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px)
		}

		to {
			opacity: 1;
			transform: translateY(0)
		}
	}

	.divider .perfume-bottle-icon {
		transition: transform .5s cubic-bezier(.175, .885, .32, 1.275);
		animation: 3s ease-in-out infinite bottleFloat
	}

	@keyframes bottleFloat {

		0%,
		100% {
			transform: translateY(0) scale(1)
		}

		50% {
			transform: translateY(-8px) scale(1.05)
		}
	}

	.about-section.visible .divider .perfume-bottle-icon img,
	.branches-section.visible .divider .perfume-bottle-icon img,
	.products-section.visible .divider .perfume-bottle-icon img,
	.testimonials-section.visible .divider .perfume-bottle-icon img {
		animation: 1.5s forwards bottleSpin
	}

	@keyframes bottleSpin {
		0% {
			transform: rotate(0) scale(1)
		}

		50% {
			transform: rotate(180deg) scale(1.2)
		}

		100% {
			transform: rotate(360deg) scale(1)
		}
	}

	.identity-centered {
		margin: 30px 0
	}

	.identity-line {
		font-size: 18px;
		line-height: 1.8;
		font-weight: 500;
		color: var(--gold) !important;
		margin: 8px 0;
		padding: 0 10px
	}

	#about .identity-centered,
	#about .identity-centered *,
	.about-section .identity-centered,
	.about-section .identity-centered * {
		text-align: center !important;
		justify-content: center !important;
		align-items: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
		width: 100% !important;
		display: block !important
	}

	.about-section .identity-line {
		text-align: center !important;
		display: block !important;
		width: 100% !important
	}

	.about-section,
	.branches-section,
	.cta-section,
	.products-section,
	.testimonials-section {
		animation: .8s ease-out sectionAppear;
		transition: .4s
	}

	@keyframes sectionAppear {
		from {
			opacity: 0;
			transform: translateY(30px)
		}

		to {
			opacity: 1;
			transform: translateY(0)
		}
	}

	.product-card {
		animation: .6s ease-out both cardAppear
	}

	.product-card:first-child,
	.rb-card:first-child {
		animation-delay: .1s
	}

	.product-card:nth-child(2),
	.rb-card:nth-child(2) {
		animation-delay: .2s
	}

	.product-card:nth-child(3),
	.rb-card:nth-child(3) {
		animation-delay: .3s
	}

	@keyframes cardAppear {
		from {
			opacity: 0;
			transform: scale(.9) translateY(20px)
		}

		to {
			opacity: 1;
			transform: scale(1) translateY(0)
		}
	}

	.rb-card {
		animation: .7s ease-out both slideInCard
	}

	.rb-card:nth-child(4) {
		animation-delay: .4s
	}

	@keyframes slideInCard {
		from {
			opacity: 0;
			transform: translateX(30px)
		}

		to {
			opacity: 1;
			transform: translateX(0)
		}
	}

	.btn-primary,
	.btn-secondary,
	.cta-btn {
		animation: 2s infinite softPulse;
		transition: .3s cubic-bezier(.175, .885, .32, 1.275)
	}

	@keyframes softPulse {

		0%,
		100% {
			box-shadow: 0 4px 10px rgba(212, 175, 55, .2)
		}

		50% {
			box-shadow: 0 8px 20px rgba(212, 175, 55, .4)
		}
	}

	.divider {
		transition: .5s;
		gap: 8px
	}

	.divider.visible .divider-line {
		animation: 1.2s forwards expandWidth
	}

	@keyframes expandWidth {
		0% {
			width: 30px
		}

		50% {
			width: 60px
		}

		100% {
			width: 40px
		}
	}

	.signature-quote {
		transition: .5s
	}

	.signature-quote::before {
		content: '';
		position: absolute;
		top: -100%;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(transparent, rgba(212, 175, 55, .1), transparent);
		animation: 3s infinite shine
	}

	@keyframes shine {
		0% {
			top: -100%
		}

		100%,
		50% {
			top: 100%
		}
	}

	.tag {
		transition: .3s cubic-bezier(.175, .885, .32, 1.275);
		display: inline-block;
		margin: 3px
	}

	.back-to-top,
	.grid-motion-item {
		transition: .3s
	}

	.tag:active {
		transform: scale(1.2);
		background: var(--gold);
		color: var(--dark)
	}

	.cta-section::after {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(212, 175, 55, .05) 0, transparent 70%);
		animation: 20s linear infinite rotateBg;
		pointer-events: none
	}

	@keyframes rotateBg {
		from {
			transform: rotate(0)
		}

		to {
			transform: rotate(360deg)
		}
	}

	.video-controls-overlay {
		opacity: 1 !important;
		pointer-events: all !important;
		background: linear-gradient(to top, rgba(0, 0, 0, .95), rgba(0, 0, 0, .3) 80%, transparent)
	}

	.video-play-btn {
		animation: 2s infinite pulseBtn
	}

	@keyframes pulseBtn {

		0%,
		100% {
			box-shadow: 0 0 10px rgba(212, 175, 55, .5);
			transform: scale(1)
		}

		50% {
			box-shadow: 0 0 20px rgba(212, 175, 55, .8);
			transform: scale(1.08)
		}
	}

	.back-to-top {
		position: fixed;
		bottom: 20px;
		right: 20px;
		width: 45px;
		height: 45px;
		background: var(--gold);
		color: var(--dark);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		z-index: 999;
		box-shadow: 0 5px 15px rgba(212, 175, 55, .3);
		animation: 2s infinite bounceUp
	}

	.back-to-top.show {
		opacity: 1;
		visibility: visible
	}

	@keyframes bounceUp {

		0%,
		100% {
			transform: translateY(0)
		}

		50% {
			transform: translateY(-5px)
		}
	}

	.shimmer-effect::after {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 50%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
		animation: 3s infinite shimmer
	}

	@keyframes shimmer {
		100% {
			left: 200%
		}
	}

	html {
		scroll-behavior: smooth
	}

	.audio-toggle-btn:active,
	.branch-card:active,
	.btn-primary:active,
	.btn-secondary:active,
	.cta-btn:active,
	.lang-btn:active,
	.mobile-menu-btn:active,
	.nav-link:active,
	.product-card:active,
	.rb-card:active,
	.shop-now-btn:active,
	.social-link:active,
	.video-play-btn:active {
		transform: scale(.9);
		transition: transform .1s
	}

	.grid-motion-item:hover {
		opacity: .4;
		transform: scale(1.1)
	}

	.divider:hover .divider-line {
		background: rgba(112, 90, 66, .3)
	}

	.divider:hover .perfume-bottle-icon img {
		transform: none
	}

	.divider-line {
		width: 30px;
		height: 1px;
		animation: 7s ease-in-out infinite pulseLine
	}

	@keyframes pulseLine {

		0%,
		100% {
			width: 30px;
			background: rgba(112, 90, 66, .3)
		}

		50% {
			width: 70px;
			background: var(--gold)
		}
	}
}

@media (min-width:769px) {
	.divider:hover .divider-line {
		background: var(--gold)
	}

	.divider:hover .perfume-bottle-icon img {
		transform: scale(1.1) rotate(180deg)
	}
}

.footer {
	background-color: var(--dark);
	color: var(--beige);
	padding: 60px 0 0;
	border-top: 3px solid var(--gold);
	position: relative;
	transition: .3s
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr 0.8fr 0.8fr 1.2fr;
	gap: 20px;
	margin-bottom: 40px
}

.footer-widget {
	animation: .8s forwards fadeIn;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%
}

.footer-widget h3 {
	color: var(--gold);
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: .5px;
	position: relative;
	display: inline-block
}

.footer-widget h3::after {
	bottom: -5px;
	width: 30px;
	background-color: var(--gold)
}

.footer-widget:hover h3::after {
	width: 100px
}

.footer-widget h4 {
	color: var(--beige);
	font-size: 16px;
	margin-bottom: 10px;
	font-weight: 500
}

.footer-logo {
	margin-bottom: 15px
}

.footer-logo img {
	height: 50px;
	width: auto;
	transition: .3s
}

.footer-logo img:hover {
	transform: scale(1.05);
	filter: drop-shadow(0 0 10px rgba(212, 175, 55, .3))
}

.footer-tagline {
	line-height: 1.6;
	margin-bottom: 20px;
	font-size: 14px;
	color: #705a42;
	opacity: .9
}

.footer-help {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(216, 196, 171, .2)
}

.footer-help h4 {
	color: var(--gold);
	font-size: 15px;
	margin-bottom: 8px
}

.footer-help p {
	font-size: 13px;
	line-height: 1.6;
	margin-bottom: 10px;
	color: var(--beige)
}

.contact-info p {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	transition: .3s;
	display: flex;
	align-items: center
}

.contact-info i {
	color: var(--gold);
	width: 16px;
	font-size: 14px
}

.contact-info a {
	color: var(--beige);
	text-decoration: none;
	transition: color .3s
}

.contact-info,
.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%
}

.footer-links li {
	margin-bottom: 10px;
	width: 100%
}

.footer-links a {
	color: var(--beige);
	text-decoration: none;
	transition: .3s;
	display: inline-block;
	font-size: 14px
}

.footer-links a:hover {
	color: var(--gold);
	transform: translateX(5px)
}

.footer-social {
	display: flex;
	gap: 15px;
	margin-bottom: 20px
}

.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgba(216, 196, 171, .1);
	border-radius: 50%;
	color: var(--beige);
	font-size: 16px;
	transition: .3s;
	text-decoration: none
}

.footer-social a:hover {
	background: var(--gold);
	color: var(--dark);
	transform: translateY(-3px);
	box-shadow: 0 5px 15px rgba(212, 175, 55, .3)
}

.contact-info li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
	transition: .3s;
	justify-content: center;
	width: 100%
}

.footer-newsletter {
	margin-top: 25px
}

.newsletter-form {
	margin-top: 15px
}

.newsletter-input-group {
	display: flex;
	gap: 10px;
	position: relative
}

.newsletter-input-group input {
	flex: 1;
	padding: 12px 15px;
	background: rgba(33, 33, 33, .8);
	border: 1px solid rgba(216, 196, 171, .3);
	color: var(--beige);
	border-radius: 4px;
	font-size: 14px;
	transition: .3s
}

.newsletter-input-group input:focus {
	outline: 0;
	border-color: var(--gold);
	box-shadow: 0 0 10px rgba(212, 175, 55, .2)
}

.newsletter-input-group input::placeholder {
	color: rgba(216, 196, 171, .6)
}

.newsletter-btn,
.wt-icon.active i {
	color: var(--dark)
}

.newsletter-btn {
	width: 45px;
	background: var(--gold);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: .3s;
	display: flex;
	align-items: center;
	justify-content: center
}

.newsletter-btn:hover {
	background: var(--gold-dark);
	transform: scale(1.05)
}

.newsletter-btn i {
	font-size: 16px
}

.footer-bottom {
	border-top: 1px solid rgba(216, 196, 171, .2);
	padding: 20px 0
}

.footer-bottom-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px
}

.footer-bottom-links {
	display: flex;
	align-items: center;
	gap: 10px
}

.footer-bottom-links a {
	color: var(--beige);
	text-decoration: none;
	font-size: 13px;
	transition: color .3s
}

.footer-bottom-links .separator {
	color: rgba(216, 196, 171, .4)
}

.footer:hover {
	box-shadow: 0 -5px 30px rgba(0, 0, 0, .3)
}

.zedesigns-credit {
	color: var(--gold-dark) !important;
	text-decoration: none;
	font-weight: 500;
	transition: .3s;
	position: relative;
	display: inline-block
}

.zedesigns-credit:hover {
	color: var(--beige) !important;
	transform: scale(1.05);
	text-shadow: 0 0 8px rgba(212, 175, 55, .3)
}

.zedesigns-credit::after {
	bottom: -2px;
	width: 0;
	background: var(--gold)
}

.zedesigns-credit:hover::after {
	width: 100%
}

.footer-bottom p {
	color: #705a42;
	font-size: 13px;
	margin: 0;
	opacity: .9
}

.footer-bottom p a.zedesigns-credit {
	color: var(--gold) !important
}

html[dir=rtl] .carousel-next i,
html[dir=rtl] .carousel-prev i,
html[dir=rtl] .fa-arrow-right {
	transform: rotate(180deg);
	display: inline-block
}

html[dir=rtl] .featured-perfume-row:first-child {
	direction: rtl;
	gap: 60px !important;
	grid-template-columns: 1fr 1fr
}

html[dir=rtl] .featured-perfume-row:first-child .perfume-visual {
	order: 2 !important
}

html[dir=rtl] .featured-perfume-row:first-child .perfume-details {
	order: 1 !important
}

html[dir=rtl] .featured-perfume-row:first-child .perfume-name::after {
	left: auto;
	right: 0;
	transform: none
}

html[dir=rtl] .featured-perfume-row:first-child .perfume-buttons {
	display: flex;
	justify-content: flex-start;
	flex-direction: row-reverse
}

html[dir=rtl] .featured-perfume-row:first-child .btn-details,
html[dir=rtl] .featured-perfume-row:first-child .btn-shop {
	flex-direction: row !important
}

html[dir=rtl] .featured-perfume-row:first-child .btn-details i,
html[dir=rtl] .featured-perfume-row:first-child .btn-shop i {
	margin-left: 0;
	margin-right: 8px
}

html[dir=rtl] .featured-perfume-row:first-child .perfume-overlap-image {
	left: auto;
	right: -30px
}

html[dir=rtl] .featured-perfume-row:first-child .note-tags {
	justify-content: flex-start
}

.about-hero,
.fragrances-hero {
	position: relative;
	height: 100vh;
	min-height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden
}

.about-hero-image,
.fragrances-hero-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0
}

.about-hero-blur-overlay,
.fragrances-hero-blur-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .6);
	backdrop-filter: blur(8px);
	z-index: 1
}

.about-hero::before,
.fragrances-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 1
}

#about,
.branches-section,
.craft-section,
.social-section,
.vision-section,
.why-section {
	position: relative;
	z-index: 1;
	background: var(--off-white)
}

#footer-placeholder {
	position: relative;
	bottom: 0;
	z-index: 0;
	background: var(--off-white)
}

.about-hero .hero-content,
.fragrances-hero .hero-content {
	color: #fff;
	position: relative;
	z-index: 4;
	max-width: 1200px;
	padding: 0 20px;
	margin-top: 60px;
	animation: 1.2s ease-out fadeSlideUp
}

.about-hero .hero-subtitle,
.fragrances-hero .hero-subtitle {
	font-family: Poppins, sans-serif;
	font-size: 14px;
	letter-spacing: 6px;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 20px;
	font-weight: 400;
	animation: 1s ease-out fadeSlideUp
}

.about-hero .hero-title,
.fragrances-hero .hero-title {
	font-family: 'Playfair Display', serif;
	font-size: clamp(4rem, 12vw, 7rem);
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 30px;
	color: var(--off-white);
	animation: 1s ease-out .2s both fadeSlideUp
}

.about-hero .hero-rule,
.fragrances-hero .hero-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 30px;
	animation: 1s ease-out .4s both fadeSlideUp
}

.about-hero .rule-line,
.fragrances-hero .rule-line {
	width: 80px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent)
}

.about-hero .rule-icon,
.fragrances-hero .rule-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: 3s ease-in-out infinite floatIcon
}

.about-hero .rule-icon img,
.fragrances-hero .rule-icon img {
	width: 30px;
	height: 30px;
	object-fit: contain;
	filter: drop-shadow(0 2px 4px rgba(212, 175, 55, .5))
}

.about-hero .hero-description,
.fragrances-hero .hero-description {
	font-family: Poppins, sans-serif;
	font-size: clamp(1rem, 2vw, 1.2rem);
	font-weight: 300;
	line-height: 1.8;
	max-width: 700px;
	margin: 0 auto 40px;
	color: rgba(255, 255, 255, .8);
	letter-spacing: .5px;
	animation: 1s ease-out .6s both fadeSlideUp
}

.about-hero .hero-cta,
.fragrances-hero .hero-cta {
	animation: 1s ease-out .8s both fadeSlideUp
}

.about-hero .scroll-indicator,
.fragrances-hero .scroll-indicator {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--gold);
	text-decoration: none;
	transition: .3s;
	cursor: pointer
}

.about-hero .scroll-indicator:hover,
.fragrances-hero .scroll-indicator:hover {
	transform: translateY(5px)
}

.about-hero .scroll-text,
.fragrances-hero .scroll-text {
	font-family: Poppins, sans-serif;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 400
}

.about-hero .scroll-indicator i,
.fragrances-hero .scroll-indicator i {
	font-size: 20px;
	animation: 2s infinite bounce
}

.buy-btn i,
.buy-btn:hover i {
	animation: .9s cubic-bezier(.4, 0, .2, 1) infinite iconShake
}

.grid-motion-row {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
	white-space: nowrap
}

.craft-step-text p:last-child,
.why-section {
	margin-bottom: 0
}

.grid-motion-item {
	flex-shrink: 0;
	width: 160px;
	height: 100px;
	overflow: hidden;
	border-radius: 4px
}

.grid-motion-item img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.about-hero::after,
.fragrances-hero::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .3);
	z-index: 2;
	pointer-events: none
}

.why-section {
	padding: 100px 0 0;
	background: var(--off-white);
	position: relative;
	overflow: hidden
}

.why-sig,
.why-timeline {
	position: relative;
	padding: 0 20px
}

.why-section::before {
	content: '';
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
	width: 700px;
	height: 700px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(212, 175, 55, .07), transparent 65%);
	pointer-events: none;
	z-index: 0
}

.why-sig {
	max-width: 700px;
	margin: 0 auto 60px;
	font-size: 18px;
	color: var(--brown);
	font-style: italic;
	line-height: 1.8;
	z-index: 1
}

.social-header .section-title .gold,
.vision-subtitle span,
.why-sig em {
	color: var(--gold);
	font-style: italic
}

.section-header {
	margin-bottom: 50px;
	position: relative;
	z-index: 1
}

.section-header h2 {
	font-family: 'Playfair Display', serif;
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 700;
	margin-bottom: 15px;
	line-height: 1.2
}

.promise-at,
.section-header h5 {
	font-family: Poppins, sans-serif;
	text-transform: uppercase
}

.section-header h5 {
	font-size: 14px;
	letter-spacing: 4px;
	color: var(--brown);
	font-weight: 300;
	margin-bottom: 20px
}

.divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px
}

.divider-line {
	width: 60px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent)
}

.perfume-bottle-icon img {
	filter: drop-shadow(0 2px 4px rgba(212, 175, 55, .3));
	transition: transform .3s
}

.perfume-bottle-icon img:hover {
	transform: scale(1.1) rotate(5deg)
}

.why-timeline {
	max-width: 800px;
	margin: 0 auto 80px;
	z-index: 2
}

.timeline-line {
	position: absolute;
	left: 21%;
	transform: translateX(-50%);
	width: 3px;
	height: 0;
	background: linear-gradient(180deg, rgba(212, 175, 55, .2) 0, rgba(212, 175, 55, .8) 30%, #d4af37 50%, rgba(212, 175, 55, .8) 70%, rgba(212, 175, 55, .2) 100%);
	box-shadow: 0 0 20px rgba(212, 175, 55, .5);
	z-index: 5;
	transition: height .3s cubic-bezier(.33, 1, .68, 1);
	top: 0;
	will-change: height
}

.wt-card,
.wt-icon,
.wt-icon-wrapper,
.wt-step {
	position: relative
}

.timeline-line::before {
	content: '';
	position: absolute;
	top: 0;
	left: 21%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	background: var(--gold);
	border-radius: 50%;
	box-shadow: 0 0 20px var(--gold);
	transition: .3s
}

.wt-step {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 60px;
	margin-bottom: 40px;
	min-height: 180px
}

.wt-icon-wrapper {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10
}

.wt-icon {
	width: 80px;
	height: 80px;
	border: 2px solid rgba(212, 175, 55, .3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .5s;
	background: var(--off-white);
	z-index: 12;
	box-shadow: 0 5px 15px rgba(0, 0, 0, .05)
}

.wt-icon.active {
	border-color: var(--gold);
	background: var(--gold);
	transform: scale(1.15);
	box-shadow: 0 0 30px rgba(212, 175, 55, .6)
}

.wt-icon i {
	color: var(--gold);
	font-size: 32px;
	transition: .5s
}

.wt-card-text h3,
.wt-card-text p strong {
	color: var(--dark);
	transition: color .3s
}

.wt-card {
	flex: 0 0 400px;
	background: #fff;
	border: 1px solid rgba(112, 90, 66, .1);
	padding: 30px;
	overflow: hidden;
	transition: .35s;
	border-radius: 8px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, .02);
	z-index: 8
}

.wt-card:hover {
	border-color: rgba(212, 175, 55, .35);
	box-shadow: 0 15px 40px rgba(212, 175, 55, .1);
	transform: translateY(-5px)
}

.wt-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s
}

.wt-card:hover::after {
	transform: scaleX(1)
}

.wt-card-text h3 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px
}

.wt-card-text p {
	font-size: 15px;
	color: var(--brown);
	line-height: 1.7;
	margin: 0
}

html[dir=rtl] .timeline-line {
	left: 79%
}

.promise-sticky-wrapper .why-promise-section {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 0
}

.promise-label-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	max-width: 900px;
	margin: 0 auto 20px;
	padding: 0 20px
}

.promise-label-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(212, 175, 55, .25));
	min-width: 30px
}

.promise-label-line.r {
	background: linear-gradient(to left, transparent, rgba(212, 175, 55, .25))
}

.promise-at {
	font-size: 11px;
	letter-spacing: 5px;
	color: var(--brown);
	display: block;
	margin-bottom: 6px
}

.promise-connector {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 16px 0;
	max-width: 900px;
	margin: 0 auto
}

.promise-connector-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--gold);
	opacity: .5
}

.promise-connector-dot:nth-child(2) {
	width: 6px;
	height: 6px;
	opacity: .7
}

.promise-connector-dot:nth-child(3) {
	width: 8px;
	height: 8px;
	opacity: 1
}

.craft-section::before,
.vision-section::before {
	width: 600px;
	height: 600px;
	pointer-events: none;
	right: -200px
}

.why-promise-card {
	background: url('../images/BrandPrint.webp') center/cover fixed #2c2416;
	padding: 100px 20px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow .4s;
	width: 100%;
	margin-top: 20px;
	border-radius: 0
}

.why-promise-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(44, 36, 22, .6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 0;
	pointer-events: none
}

.why-promise-text {
	font-size: 35px;
	font-style: italic;
	color: #fff;
	line-height: 1.5;
	position: relative;
	z-index: 3;
	max-width: 1000px;
	margin: 0 auto;
	text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
	font-weight: 500;
	letter-spacing: .5px
}

.craft-quote::before,
.promise-big-q,
.vq-text::before {
	font-family: serif;
	line-height: 1
}

.why-promise-text .word.gold {
	color: var(--gold);
	font-weight: 600;
	font-style: normal;
	text-shadow: 0 0 20px rgba(212, 175, 55, .6)
}

.why-promise-spotlight {
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(212, 175, 55, .15), transparent 70%);
	pointer-events: none;
	z-index: 2;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	opacity: 0;
	transition: opacity .4s
}

.promise-card-bg {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(212, 175, 55, .03) 30px, rgba(212, 175, 55, .03) 31px);
	pointer-events: none;
	z-index: 1
}

.promise-big-q {
	position: absolute;
	top: -20px;
	left: 30px;
	font-size: 200px;
	color: rgba(212, 175, 55, .1);
	pointer-events: none;
	z-index: 1
}

.craft-quote,
.craft-section,
.craft-step,
.craft-step-icon,
.craft-steps,
.pyramid-tier,
.social-container,
.social-post,
.social-post-image,
.social-section,
.vision-quote,
.vision-section,
.vq-text {
	position: relative
}

.craft-step:hover .craft-step-icon i,
.vision-section .section-header h5,
.vision-subtitle,
.vision-text {
	color: var(--text)
}

.why-promise-text .word {
	display: inline-block;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .5s, transform .5s;
	margin-right: 5px
}

.vision-section {
	padding: 60px 0 80px;
	overflow: hidden;
	margin-top: 0;
	background: var(--off-white);
	z-index: 1
}

.vision-section::before {
	content: '';
	position: absolute;
	top: -200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(212, 175, 55, .07) 0, transparent 70%)
}

.vision-section .section-header h2 span:first-child {
	color: var(--text) !important
}

.vision-section .divider-line {
	background: rgba(212, 175, 55, .2)
}

.vision-body {
	max-width: 780px;
	margin: 0 auto
}

.vision-icon-wrap {
	width: 52px;
	height: 52px;
	border: 1px solid var(--text);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px
}

.vision-icon-wrap i {
	color: var(--text);
	font-size: 20px
}

.vision-subtitle {
	font-family: 'Playfair Display', serif;
	font-size: clamp(20px, 2.5vw, 28px);
	font-weight: 400;
	margin-bottom: 24px;
	line-height: 1.3
}

.vision-text {
	font-size: 15px;
	line-height: 1.95;
	margin-bottom: 16px
}

.craft-pyramid-caption,
.vq-text {
	color: var(--brown);
	font-style: italic
}

.vision-text strong {
	color: var(--gold);
	font-weight: 500
}

.vision-quote {
	margin: 36px auto 0;
	max-width: 680px
}

.vq-top {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px
}

.vq-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(212, 175, 55, .35))
}

.vq-bottom,
.vq-icon {
	display: flex;
	align-items: center
}

.vq-line:last-child {
	background: linear-gradient(to left, transparent, rgba(212, 175, 55, .35))
}

.vq-icon {
	width: 48px;
	height: 48px;
	border: 1px solid rgba(212, 175, 55, .35);
	border-radius: 50%;
	justify-content: center;
	flex-shrink: 0;
	background: rgba(212, 175, 55, .04)
}

.vq-icon i {
	color: var(--gold);
	font-size: 18px
}

.vq-text {
	font-size: 16px;
	line-height: 1.85;
	padding: 28px 36px;
	background: #fff;
	border: 1px solid rgba(112, 90, 66, .1);
	margin: 0
}

.vq-text::before {
	content: '\201C';
	position: absolute;
	top: -14px;
	left: 24px;
	font-size: 70px;
	color: var(--gold);
	opacity: .15
}

.vq-bottom {
	justify-content: center;
	gap: 6px;
	margin-top: 16px
}

.craft-section {
	padding: 80px 0;
	background: var(--off-white);
	overflow: hidden;
	z-index: 1
}

.craft-section::before {
	content: '';
	position: absolute;
	bottom: -200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(212, 175, 55, .06) 0, transparent 70%)
}

.craft-content {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center
}

.craft-pyramid-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px
}

.craft-pyramid-caption {
	font-size: 13px;
	line-height: 1.8;
	max-width: 320px;
	opacity: .8
}

@media (max-width:900px) {
	.craft-content {
		grid-template-columns: 1fr;
		gap: 40px
	}

	.craft-pyramid-col {
		order: 1
	}
}

.craft-steps {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 40px
}

.craft-step {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding: 24px 0
}

.craft-step:not(:last-child) {
	border-bottom: 1px solid rgba(112, 90, 66, .1)
}

.craft-step-icon {
	width: 42px;
	height: 42px;
	background: var(--text);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	z-index: 1;
	transition: background .3s
}

.craft-step-icon i {
	color: var(--gold);
	font-size: 15px;
	transition: color .3s
}

.craft-step-text {
	padding-top: 10px
}

.tier-base,
.tier-heart,
.tier-top {
	padding: 14px 10px
}

.craft-step-text p {
	font-size: 15px;
	color: var(--brown);
	line-height: 1.9;
	margin: 0 0 12px
}

.craft-step-text p strong {
	color: var(--gold-dark);
	font-weight: 500
}

.craft-pyramid {
	margin: 20px 0 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	width: 100%
}

.pyramid-tier {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .5s, transform .5s;
	cursor: default
}

.pyramid-tier.tier-visible,
.scent-pyramid-tier.visible {
	opacity: 1;
	transform: translateY(0) scaleX(1)
}

.pyramid-tier:hover {
	filter: brightness(1.08)
}

.tier-top {
	width: 42%;
	background: linear-gradient(135deg, #2c2416, #4a3828);
	clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%)
}

.tier-heart {
	width: 70%;
	background: linear-gradient(135deg, #3a2d1c, #5a4535);
	clip-path: polygon(6% 0%, 94% 0%, 100% 100%, 0% 100%)
}

.tier-base {
	width: 100%;
	background: linear-gradient(135deg, var(--text), #2c2416);
	clip-path: polygon(3% 0%, 97% 0%, 100% 100%, 0% 100%)
}

.pyramid-tier-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	position: relative;
	z-index: 1
}

.pyramid-tier-label {
	font-size: 11px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	font-family: Poppins, sans-serif;
	font-weight: 600;
	color: var(--gold);
	white-space: nowrap
}

.pyramid-tier-sub {
	font-size: 10px;
	color: rgba(216, 196, 171, .5);
	font-family: Poppins, sans-serif;
	letter-spacing: .5px;
	white-space: nowrap
}

.craft-quote,
.social-post-platform i {
	font-size: 18px
}

.arabic-text {
	font-weight: 700
}

.pyramid-tier::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--gold);
	opacity: .3;
	transition: opacity .3s
}

.pyramid-tier:hover::before {
	opacity: .7
}

.craft-quote {
	font-style: italic;
	color: var(--text);
	padding: 32px 40px;
	background: #fff;
	border: 1px solid rgba(112, 90, 66, .12);
	border-left: 3px solid var(--gold);
	line-height: 1.7
}

.social-section::after,
.social-section::before {
	position: absolute;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	pointer-events: none
}

.craft-quote::before {
	content: '"';
	position: absolute;
	top: -10px;
	left: 20px;
	font-size: 60px;
	color: var(--gold);
	opacity: .12
}

.social-section {
	padding: 100px 0;
	background: var(--dark);
	overflow: hidden;
	z-index: 1
}

.social-section::before {
	content: '';
	top: -200px;
	left: -200px;
	background: radial-gradient(circle, rgba(212, 175, 55, .05) 0, transparent 70%)
}

.social-section::after {
	content: '';
	bottom: -200px;
	right: -200px;
	background: radial-gradient(circle, rgba(112, 90, 66, .05) 0, transparent 70%)
}

.social-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
	z-index: 2
}

.social-feed-grid,
.social-header {
	margin-bottom: 50px
}

.social-header .section-label {
	font-size: 11px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 12px;
	display: block
}

.social-header .section-title {
	font-family: 'Playfair Display', serif;
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 400;
	color: var(--beige);
	margin-bottom: 20px
}

.social-header .divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-bottom: 30px
}

.social-header .divider-line {
	width: 60px;
	height: 2px;
	background: rgba(212, 175, 55, .3);
	transition: width .8s, background .8s
}

.social-header .divider:hover .divider-line {
	width: 90px;
	background: var(--gold)
}

.social-header .perfume-bottle-icon img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	transition: transform .5s
}

.social-header .divider:hover .perfume-bottle-icon img {
	transform: scale(1.1) rotate(180deg)
}

.social-feed-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px
}

.social-post {
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(212, 175, 55, .15);
	border-radius: 15px;
	overflow: hidden;
	transition: .4s;
	backdrop-filter: blur(5px);
	animation: .8s forwards fadeInUp;
	opacity: 0
}

.social-post:hover {
	transform: translateY(-10px);
	border-color: var(--gold);
	box-shadow: 0 20px 40px rgba(212, 175, 55, .2)
}

.social-post-image {
	height: 250px;
	overflow: hidden
}

.social-post-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s
}

.social-post-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to top, rgba(33, 33, 33, .8), transparent);
	opacity: 0;
	transition: opacity .4s;
	display: flex;
	align-items: flex-end;
	padding: 20px
}

.social-post-platform {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--gold);
	font-size: 14px
}

.social-post-content {
	padding: 20px;
	text-align: left
}

.social-post-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px
}

.social-post-avatar {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	border: 2px solid var(--gold);
	background-color: #000;
	object-fit: contain
}

.social-post-user {
	font-size: 12px;
	color: var(--beige)
}

.filter-btn.active .filter-text,
.filter-sub.active .filter-text,
.social-post-user strong {
	color: var(--gold);
	font-weight: 600
}

.social-post-text {
	font-size: 13px;
	line-height: 1.6;
	color: rgba(216, 196, 171, .7);
	margin-bottom: 12px;
	display: -webkit-box;
	overflow: hidden
}

.social-post-stats {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 12px
}

.social-post-stat {
	display: flex;
	align-items: center;
	gap: 5px;
	color: rgba(216, 196, 171, .5);
	font-size: 12px
}

.social-link,
.social-post-date {
	display: flex;
	align-items: center
}

.social-post-stat i {
	color: var(--gold);
	font-size: 13px
}

.social-post-date {
	font-size: 11px;
	color: rgba(216, 196, 171, .4);
	gap: 5px
}

.social-post-date i {
	font-size: 10px;
	color: var(--gold)
}

.social-section a {
	text-decoration: none
}

[dir=rtl] .social-link i {
	margin-left: 8px;
	margin-right: 0
}

.social-post.instagram .social-post-overlay {
	background: linear-gradient(to top, rgba(225, 48, 108, .3), transparent)
}

.social-post.facebook .social-post-overlay {
	background: linear-gradient(to top, rgba(24, 119, 242, .3), transparent)
}

.social-post.tiktok .social-post-overlay {
	background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent)
}

.social-links {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 40px
}

.social-link {
	gap: 10px;
	padding: 14px 28px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(212, 175, 55, .2);
	border-radius: 9999px;
	color: var(--beige);
	text-decoration: none;
	font-size: 14px;
	transition: .3s;
	position: relative;
	overflow: hidden
}

.social-link::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, rgba(212, 175, 55, .2), transparent);
	border-radius: 50%;
	transition: transform .5s
}

.social-link:hover::before {
	transform: translate(-50%, -50%) scale(2)
}

.social-link i {
	color: var(--gold);
	font-size: 18px;
	position: relative;
	z-index: 2;
	transition: transform .3s
}

.social-link span {
	position: relative;
	z-index: 2
}

.social-link:hover {
	background: rgba(212, 175, 55, .1);
	border-color: var(--gold);
	color: var(--gold);
	transform: translateY(-3px)
}

.follow-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(212, 175, 55, .1);
	border: 1px solid rgba(212, 175, 55, .3);
	border-radius: 9999px;
	padding: 8px 24px;
	margin-top: 40px
}

.branch-address i,
.filter-results i,
.follow-badge i {
	color: var(--gold);
	font-size: 14px
}

.follow-badge span {
	color: var(--beige);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase
}

.follow-badge .count {
	color: var(--gold);
	font-weight: 600;
	margin-left: 5px
}

#map,
.branches-map-wrapper {
	height: 100%;
	width: 100%
}

#map {
	min-height: 500px;
	border-radius: 20px;
	z-index: 1
}

.branches-layout {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 30px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
	position: relative
}

.branches-left,
.branches-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 30px;
	justify-content: center
}

.branch-card {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 20px 25px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
	transition: .3s;
	border: 1px solid rgba(212, 175, 55, .2);
	cursor: pointer;
	height: auto
}

.branch-connector-line,
.branch-connector-line.left {
	background: linear-gradient(90deg, var(--gold), rgba(212, 175, 55, .3))
}

.branches-center {
	flex: 1.5;
	min-width: 400px;
	display: flex;
	align-items: center
}

.branch-address,
.branch-hours {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--brown)
}

.branches-map-container {
	position: relative;
	width: 100%;
	height: 500px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
	border: 3px solid var(--gold)
}

.branch-connector-line {
	position: absolute;
	top: 50%;
	width: 60px;
	height: 2px;
	transform: translateY(-50%)
}

.branch-connector-line.left {
	right: -60px
}

.branch-connector-line.right,
html[dir=rtl] .branch-connector-line.left {
	left: -60px;
	background: linear-gradient(270deg, var(--gold), rgba(212, 175, 55, .3))
}

.branch-connector-line::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 8px;
	height: 8px;
	background: var(--gold);
	border-radius: 50%;
	transform: translateY(-50%);
	box-shadow: 0 0 10px var(--gold)
}

.branch-connector-line.right::after {
	right: auto;
	left: 0
}

.branch-info h3 {
	font-size: 20px;
	color: var(--dark);
	margin-bottom: 12px;
	font-family: 'Playfair Display', serif
}

.branch-address {
	margin-bottom: 10px;
	font-size: 14px
}

.branch-hours {
	margin-bottom: 15px;
	font-size: 13px
}

.branch-actions {
	margin-top: 10px
}

.branch-direction-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: 0 0;
	border: 1px solid var(--gold);
	color: var(--gold);
	padding: 8px 20px;
	border-radius: 30px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition: .3s
}

.reveal,
.reveal-left,
.reveal-right {
	opacity: 0;
	transition: opacity .8s, transform .8s
}

.branch-direction-btn:hover,
.product-card:hover .product-btn {
	background: var(--gold);
	color: var(--dark);
	transform: translateX(5px)
}

html[dir=rtl] .branch-connector-line.left {
	right: auto
}

html[dir=rtl] .branch-connector-line.right {
	left: auto;
	right: -60px;
	background: linear-gradient(90deg, var(--gold), rgba(212, 175, 55, .3))
}

html[dir=rtl] .branch-direction-btn:hover {
	transform: translateX(-5px)
}

.custom-marker {
	background: 0 0;
	border: none
}

.custom-marker:hover div {
	transform: scale(1.2)
}

.branch-card.active {
	border-color: var(--gold);
	box-shadow: 0 15px 40px rgba(212, 175, 55, .3);
	background: linear-gradient(135deg, #fff, rgba(212, 175, 55, .05))
}

.reveal {
	transform: translateY(30px)
}

.reveal-left {
	transform: translateX(-40px)
}

.reveal-left.visible,
.reveal-right.visible {
	opacity: 1;
	transform: translateX(0)
}

.reveal-right {
	transform: translateX(40px)
}

@media (min-width:1025px) and (max-width:1200px) {
	.branch-connector-line.left {
		right: -40px;
		width: 40px
	}

	.branch-connector-line.right {
		left: -40px;
		width: 40px
	}
}

.no-products {
	grid-column: 1/-1
}

.nav-dropdown-wrapper {
	position: static
}

.nav-dropdown-trigger {
	display: flex;
	align-items: center;
	gap: 6px
}

.nav-dropdown-arrow {
	font-size: 9px !important;
	transition: transform .3s;
	opacity: .6;
	display: block !important;
	margin-left: 2px
}

.nav-dropdown-wrapper:hover .nav-dropdown-arrow {
	transform: none;
	opacity: .6
}

.nav-dropdown-mega {
	position: fixed;
	top: 120px;
	left: 0;
	right: 0;
	background: rgba(18, 16, 14, .98);
	border-top: 2px solid var(--gold);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-120px);
	transform-origin: top center;
	transition: opacity .4s, transform .4s, visibility .4s;
	z-index: 99998;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
	pointer-events: none;
	border-radius: 0
}

.nav-dropdown-wrapper.active .nav-dropdown-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: all;
	border-radius: 40px
}

.nav-dropdown-wrapper.active .nav-dropdown-arrow {
	transform: rotate(180deg);
	opacity: 1
}

.nav-dropdown-wrapper:not(.active):hover .nav-dropdown-mega {
	opacity: 0;
	visibility: hidden;
	pointer-events: none
}

@media (max-width:1023px) {
	.nav-dropdown-mega {
		position: static;
		top: auto;
		left: auto;
		right: auto;
		border-top: 0;
		box-shadow: none;
		background: 0 0;
		pointer-events: none;
		visibility: hidden;
		opacity: 0;
		transform: none
	}
}

.nav-dropdown-inner {
	max-width: 100%;
	margin: 0 auto
}

.nav-dropdown-exclusive {
	border-start-end-radius: 40px;
	border-start-start-radius: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 40px;
	width: 100%;
	background: linear-gradient(90deg, #2c2416, #1a1209);
	border-bottom: 1px solid rgba(212, 175, 55, .25)
}

.nav-dropdown-exclusive-left {
	display: flex;
	align-items: center;
	gap: 14px
}

.nav-dropdown-exclusive-icon {
	width: 36px;
	height: 36px;
	background: var(--gold);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.nav-dropdown-exclusive-icon i {
	color: var(--dark);
	font-size: 15px
}

.nav-dropdown-exclusive-eyebrow {
	display: block;
	font-size: 9px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: rgba(212, 175, 55, .6);
	font-family: Poppins, sans-serif;
	margin-bottom: 2px
}

.nav-dropdown-exclusive-title {
	display: block;
	font-family: 'Playfair Display', serif;
	font-size: 16px;
	color: var(--beige);
	font-weight: 400
}

.filter-group-title,
.nav-dropdown-col-header {
	font-weight: 600;
	letter-spacing: 2px;
	font-family: Poppins, sans-serif;
	text-transform: uppercase
}

.nav-dropdown-exclusive-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--gold);
	text-decoration: none;
	border: 1px solid rgba(212, 175, 55, .35);
	padding: 7px 18px;
	border-radius: 9999px;
	font-family: Poppins, sans-serif;
	transition: .3s
}

.nav-dropdown-exclusive-cta:hover {
	background: rgba(212, 175, 55, .1);
	border-color: var(--gold)
}

.nav-dropdown-exclusive-cta i {
	font-size: 10px;
	transition: transform .3s
}

.nav-dropdown-exclusive-cta:hover i {
	transform: translateX(4px)
}

.nav-dropdown-cols {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	padding: 40px 20px 40px 16px;
	gap: 0
}

.nav-dropdown-col {
	padding: 0 20px;
	border-right: 1px solid rgba(212, 175, 55, .08)
}

.nav-dropdown-col:first-child {
	padding-left: 0
}

.nav-dropdown-col:last-child {
	padding-right: 0;
	border-right: none
}

.nav-dropdown-col-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	color: var(--gold);
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(212, 175, 55, .15)
}

.nav-dropdown-col-header i {
	font-size: 13px;
	opacity: .85
}

.nav-dropdown-list {
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px
}

.nav-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	color: rgba(216, 196, 171, .65);
	text-decoration: none;
	font-size: 13px;
	font-family: Poppins, sans-serif;
	border-radius: 40px;
	transition: .2s
}

.nav-dropdown-item:hover {
	color: var(--gold);
	background: rgba(212, 175, 55, .06);
	padding-left: 14px
}

.nav-dropdown-item-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--gold);
	opacity: .35;
	flex-shrink: 0;
	transition: opacity .2s
}

@keyframes fadeSlideUp {
	from {
		opacity: 0;
		transform: translateY(30px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

@keyframes floatIcon {

	0%,
	100% {
		transform: translateY(0)
	}

	50% {
		transform: translateY(-5px)
	}
}

@keyframes bounce {

	0%,
	100%,
	20%,
	50%,
	80% {
		transform: translateY(0)
	}

	40% {
		transform: translateY(-10px)
	}

	60% {
		transform: translateY(-5px)
	}
}

.filter-bar {
	background: #fff;
	border-bottom: 1px solid rgba(112, 90, 66, .1);
	padding: 25px 0;
	position: relative;
	z-index: 10
}

.filter-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 25px
}

.filter-groups-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 40px
}

.filter-group {
	flex: 1;
	min-width: 280px
}

.filter-group-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(212, 175, 55, .3);
	position: relative;
	flex-wrap: wrap
}

.filter-group-label::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 40px;
	height: 2px;
	background: var(--gold);
	border-radius: 2px
}

.filter-group-icon {
	font-size: 16px;
	color: var(--gold)
}

.filter-group-title {
	font-size: 13px;
	color: var(--gold)
}

.filter-group-desc {
	font-size: 11px;
	color: var(--brown);
	margin-left: auto;
	opacity: .6;
	font-style: italic
}

.filter-categories,
.filter-subcategories {
	display: flex;
	flex-wrap: wrap;
	gap: 12px
}

.filter-results {
	color: var(--brown);
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba(212, 175, 55, .05);
	padding: 12px 24px;
	border-radius: 50px;
	width: fit-content;
	margin: 0 auto
}

.filter-results span {
	color: var(--gold);
	font-weight: 700;
	font-size: 18px;
	margin: 0 4px
}

.filter-btn,
.filter-sub {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 18px;
	background: 0 0;
	border: 1px solid rgba(112, 90, 66, .2);
	border-radius: 50px;
	cursor: pointer;
	transition: .3s cubic-bezier(.4, 0, .2, 1);
	font-family: Poppins, sans-serif;
	gap: 6px;
	min-width: 85px;
	position: relative
}

.filter-icon {
	font-size: 18px;
	transition: .3s;
	color: var(--brown)
}

.filter-text {
	font-size: 12px;
	font-weight: 500;
	color: var(--brown);
	transition: color .3s;
	letter-spacing: .5px
}

.filter-btn:hover,
.filter-sub:hover {
	border-color: var(--gold);
	transform: translateY(-2px);
	box-shadow: 0 0 20px rgba(212, 175, 55, .2)
}

.filter-btn:hover .filter-icon,
.filter-sub:hover .filter-icon {
	transform: scale(1.1);
	color: var(--gold)
}

.filter-btn.active,
.filter-sub.active {
	border-color: var(--gold);
	background: 0 0;
	box-shadow: 0 0 25px rgba(212, 175, 55, .4), 0 0 8px rgba(212, 175, 55, .2);
	animation: 2s infinite gentlePulse
}

.filter-btn.active .filter-icon,
.filter-sub.active .filter-icon {
	transform: scale(1.05);
	color: var(--gold);
	filter: drop-shadow(0 0 4px rgba(212, 175, 55, .5))
}

@keyframes gentlePulse {

	0%,
	100% {
		box-shadow: 0 0 5px rgba(212, 175, 55, .2), 0 0 10px rgba(212, 175, 55, .1);
		border-color: rgba(212, 175, 55, .5)
	}

	50% {
		box-shadow: 0 0 20px rgba(212, 175, 55, .5), 0 0 25px rgba(212, 175, 55, .25);
		border-color: var(--gold)
	}
}

.filter-btn.active::before,
.filter-sub.active::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 50px;
	background: radial-gradient(circle at center, rgba(212, 175, 55, .08), transparent);
	pointer-events: none;
	animation: 2s infinite softInnerGlow
}

@keyframes softInnerGlow {

	0%,
	100% {
		opacity: .3
	}

	50% {
		opacity: .6
	}
}

.products-grid-section {
	padding: 60px 0;
	background: var(--off-white);
	position: relative;
	z-index: 1
}

.products-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px
}

.product-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 0, 0, .03);
	border: 1px solid rgba(216, 196, 171, .2);
	cursor: pointer;
	animation: .6s forwards fadeInUp;
	opacity: 0;
	will-change: transform;
	transition: box-shadow .3s, border-color .3s
}

.product-card:hover {
	box-shadow: 0 25px 40px rgba(212, 175, 55, .2);
	border-color: var(--gold)
}

.product-card:active {
	transform: scale(.98);
	transition: transform .1s
}

.product-card:hover .product-image {
	background: linear-gradient(135deg, rgba(212, 175, 55, .1), rgba(212, 175, 55, .05))
}

.product-image {
	position: relative;
	height: 200px;
	overflow: hidden;
	background: linear-gradient(135deg, #f5f0e8, #e8e0d5);
	transition: background .3s
}

.product-card:hover .product-image img {
	transform: scale(1.05)
}

.product-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: var(--gold);
	color: var(--dark);
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 9px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px
}

.product-info {
	padding: 15px;
	text-align: center
}

.product-category {
	font-size: 10px;
	color: var(--gold);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 6px;
	display: block
}

.product-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--dark);
	margin-bottom: 6px;
	font-family: 'Playfair Display', serif
}

.product-card-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--gold);
	margin-bottom: 8px
}

.product-card-description {
	font-size: 11px;
	color: var(--brown);
	line-height: 1.5;
	margin-bottom: 10px;
	display: -webkit-box;
	overflow: hidden
}

.product-notes {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: center;
	margin-bottom: 15px
}

.note-tag {
	font-size: 9px;
	padding: 2px 8px;
	background: rgba(212, 175, 55, .1);
	border-radius: 15px;
	color: var(--brown)
}

.product-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 16px;
	background: 0 0;
	border: 1px solid var(--gold);
	border-radius: 30px;
	color: var(--gold);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: .3s
}

.product-btn i {
	font-size: 11px;
	transition: transform .3s
}

.product-btn:hover i {
	transform: translateX(3px)
}

.no-products {
	background: #fff;
	border-radius: 16px;
	border: 1px solid rgba(212, 175, 55, .2)
}

.no-products i {
	color: var(--gold);
	opacity: .5
}

.no-products h3 {
	font-size: 20px;
	color: var(--dark);
	margin-bottom: 8px
}

.no-products p {
	color: var(--brown);
	font-size: 14px
}

.pagination-container {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
	padding: 2rem 0;
	min-height: 80px
}

.pagination {
	display: flex;
	gap: .75rem;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center
}

.page-btn {
	min-width: 80px;
	height: 44px;
	padding: 0 1rem;
	border: 2px solid #d4af37;
	background: 0 0;
	border-radius: 12px;
	font-family: Poppins, sans-serif;
	font-size: .9rem;
	font-weight: 500;
	cursor: pointer;
	transition: .3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	color: #d4af37;
	letter-spacing: .5px
}

.page-btn:hover:not(:disabled) {
	background: linear-gradient(135deg, #d4af37, #f3e5ab);
	border-color: #b8941a;
	color: #000;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(212, 175, 55, .3)
}

.page-btn.active {
	background: linear-gradient(135deg, #d4af37, #c5a028);
	border-color: #b8941a;
	color: #000;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(212, 175, 55, .4)
}

.page-btn:disabled {
	opacity: .4;
	cursor: not-allowed;
	transform: none;
	border-color: #d4af37;
	color: #d4af37
}

.page-dots {
	padding: 0 .5rem;
	color: #d4af37;
	font-weight: 500;
	font-size: 1.1rem;
	letter-spacing: 2px
}

.next-btn,
.prev-btn {
	min-width: 90px
}

.loading-spinner,
.no-products {
	text-align: center;
	padding: 4rem
}

.loading-spinner {
	font-size: 1.2rem;
	color: #d4af37
}

.loading-spinner i {
	font-size: 2rem;
	margin-bottom: 1rem;
	display: block
}

.no-products i {
	font-size: 3rem;
	color: #d4af37;
	margin-bottom: 1rem
}

.pagination-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 20px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	border-top: 1px solid rgba(212, 175, 55, .2)
}

.filter-results-bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 14px;
	color: var(--brown);
	font-family: Poppins, sans-serif;
	letter-spacing: .5px;
	padding: 12px 20px;
	background: rgba(212, 175, 55, .05);
	border-radius: 50px;
	animation: .5s ease-out fadeInUp
}

.filter-results-bottom i {
	color: var(--gold);
	font-size: 16px
}

.filter-results-bottom #resultCount {
	font-weight: 700;
	color: var(--gold);
	font-size: 18px;
	margin: 0 4px
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(10px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.product-detail-section {
	padding: 140px 0 120px;
	background: linear-gradient(135deg, var(--off-white) 0, #f8f6f0 100%);
	min-height: 100vh;
	position: relative
}

.product-detail-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: radial-gradient(circle at 20% 80%, rgba(212, 175, 55, .03) 0, transparent 50%), radial-gradient(circle at 80% 20%, rgba(112, 90, 66, .02) 0, transparent 50%);
	pointer-events: none
}

.product-detail-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 60px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 100px;
	align-items: start;
	position: relative;
	z-index: 1
}

.product-gallery {
	position: sticky;
	top: 140px;
	display: flex;
	flex-direction: column;
	gap: 30px
}

.main-image {
	background: linear-gradient(145deg, #f5f0e8 0, #ede6d6 100%);
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 3/4;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .08), 0 8px 32px rgba(212, 175, 55, .06), inset 0 1px 0 rgba(255, 255, 255, .3);
	border: 1px solid rgba(212, 175, 55, .08);
	transition: .4s cubic-bezier(.4, 0, .2, 1)
}

.main-image:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 32px 80px rgba(0, 0, 0, .12), 0 16px 48px rgba(212, 175, 55, .1), inset 0 1px 0 rgba(255, 255, 255, .4)
}

.main-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 50px;
	transition: transform .6s cubic-bezier(.4, 0, .2, 1);
	filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .1))
}

.main-image:hover img {
	transform: scale(1.08) rotate(1deg)
}

.main-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../images/brandprint.webp');
	background-size: cover;
	background-position: center;
	opacity: .04;
	pointer-events: none;
	mix-blend-mode: multiply
}

.main-image::after {
	content: '';
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	background: radial-gradient(circle, rgba(212, 175, 55, .15) 0, transparent 70%);
	border-radius: 50%;
	pointer-events: none
}

.product-info-detail {
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	gap: 24px
}

.product-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px
}

.product-category-badge,
.product-subcategory-badge {
	display: inline-flex;
	align-items: center;
	padding: 8px 20px;
	border-radius: 50px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: Poppins, sans-serif;
	transition: .3s cubic-bezier(.4, 0, .2, 1);
	border: 1px solid transparent;
	position: relative;
	overflow: hidden
}

.product-category-badge {
	background: linear-gradient(135deg, rgba(212, 175, 55, .15), rgba(212, 175, 55, .08));
	color: var(--gold);
	border-color: rgba(212, 175, 55, .2);
	box-shadow: 0 2px 8px rgba(212, 175, 55, .1)
}

.product-category-badge:hover {
	background: linear-gradient(135deg, var(--gold), #c49b3a);
	color: var(--dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(212, 175, 55, .25)
}

.product-subcategory-badge {
	background: linear-gradient(135deg, rgba(112, 90, 66, .12), rgba(112, 90, 66, .06));
	color: var(--brown);
	border-color: rgba(112, 90, 66, .2);
	box-shadow: 0 2px 8px rgba(112, 90, 66, .08)
}

.product-subcategory-badge:hover {
	background: linear-gradient(135deg, var(--brown), #6a5a46);
	color: var(--off-white);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(112, 90, 66, .2)
}

.product-title {
	font-family: 'Playfair Display', serif;
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 300;
	color: var(--dark);
	margin-bottom: 0;
	line-height: 1.1;
	letter-spacing: -.5px;
	position: relative
}

.product-title::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 60px;
	height: 2px;
	background: linear-gradient(90deg, var(--gold), transparent)
}

.product-detail-price {
	font-size: 24px;
	font-weight: 700;
	color: var(--gold);
	margin: 24px 0;
	padding: 20px 0;
	border-bottom: 1px solid rgba(112, 90, 66, .12);
	font-family: Poppins, sans-serif;
	position: relative
}

.product-detail-price::before {
	content: '';
	position: absolute;
	left: -20px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 20px;
	background: var(--gold);
	border-radius: 2px
}

.product-detail-description {
	color: var(--text);
	line-height: 1.8;
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 400;
	text-align: justify;
	hyphens: auto;
	word-break: break-word
}

.scent-pyramid-title,
.scent-tier-label {
	font-weight: 700;
	color: var(--gold);
	text-transform: uppercase;
	font-family: Poppins, sans-serif;
	position: relative
}

.scent-pyramid-section {
	background: linear-gradient(145deg, #fff 0, #faf8f4 100%);
	border-radius: 20px;
	padding: 40px 36px;
	margin: 0 0 40px;
	border: 1px solid rgba(212, 175, 55, .08);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .04), 0 2px 16px rgba(212, 175, 55, .06);
	transition: .4s cubic-bezier(.4, 0, .2, 1);
	position: relative;
	overflow: hidden
}

.scent-pyramid-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--gold), #c49b3a, var(--gold))
}

.scent-pyramid-section:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, .08), 0 8px 24px rgba(212, 175, 55, .12);
	border-color: rgba(212, 175, 55, .15)
}

.scent-pyramid-title {
	font-size: 12px;
	letter-spacing: 3px;
	margin-bottom: 32px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px
}

.scent-pyramid-title::after,
.scent-pyramid-title::before {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(212, 175, 55, .4), transparent);
	max-width: 80px
}

.scent-pyramid-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0 auto;
	padding: 20px 0;
	position: relative
}

.scent-pyramid-tier {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 18px 24px;
	position: relative;
	transition: .4s cubic-bezier(.4, 0, .2, 1);
	cursor: default;
	min-height: 95px;
	z-index: 2;
	opacity: 0;
	transform: translateY(-20px) scaleX(.5);
	transition: opacity .5s, transform .5s;
	will-change: opacity, transform;
	clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%)
}

.scent-pyramid-tier:first-child {
	background: linear-gradient(135deg, #2c2416, #4a3828);
	width: 50%;
	clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%)
}

.scent-pyramid-tier:nth-child(2) {
	background: linear-gradient(135deg, #3a2d1c, #5a4535);
	width: 75%;
	clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%)
}

.scent-pyramid-tier:nth-child(3) {
	background: linear-gradient(135deg, #4a3828, #6a5a46);
	width: 100%;
	clip-path: polygon(4% 0%, 96% 0%, 100% 100%, 0% 100%)
}

.scent-pyramid-tier:hover {
	transform: translateY(-2px) scale(1.02);
	filter: brightness(1.08);
	box-shadow: 0 8px 20px rgba(212, 175, 55, .2)
}

.scent-tier-label {
	font-size: 10px;
	letter-spacing: 2px;
	margin-bottom: 12px;
	text-align: center
}

.scent-tier-label::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 25px;
	height: 1.5px;
	background: var(--gold);
	border-radius: 1px
}

.scent-tier-notes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 0;
	margin-top: 8px
}

.scent-note-item {
	background: var(--brown) !important;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 10px;
	font-family: Exo, Poppins, sans-serif;
	color: var(--beige) !important;
	font-weight: 500;
	transition: .3s
}

.back-link,
.buy-btn {
	display: inline-flex;
	text-decoration: none;
	font-family: Poppins, sans-serif
}

.scent-note-item:hover {
	color: var(--gold);
	background: rgba(212, 175, 55, .2);
	border-color: var(--gold);
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 4px 10px rgba(212, 175, 55, .25)
}

.buy-section {
	margin-top: 16px
}

.buy-btn {
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	background: 0 0;
	border: 1px solid var(--gold);
	color: var(--gold);
	padding: 20px 32px;
	border-radius: 50px;
	font-size: 18px;
	font-weight: 600;
	transition: .4s cubic-bezier(.4, 0, .2, 1);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 0 rgba(212, 175, 55, 0), 0 4px 16px rgba(212, 175, 55, .2);
	animation: 2s ease-in-out infinite subtleGlow
}

.buy-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(212, 175, 55, .1);
	opacity: 0;
	transition: opacity .3s;
	border-radius: 50px
}

.buy-btn:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 0 20px rgba(212, 175, 55, .6), 0 12px 32px rgba(212, 175, 55, .3);
	animation: none
}

.buy-btn:active {
	transform: translateY(-1px) scale(1.01)
}

.buy-btn i {
	font-size: 16px
}

@keyframes iconShake {

	0%,
	100% {
		transform: translateX(0)
	}

	25% {
		transform: translateX(-3px)
	}

	75% {
		transform: translateX(3px)
	}
}

@keyframes subtleGlow {

	0%,
	100% {
		box-shadow: 0 0 0 rgba(212, 175, 55, 0), 0 4px 16px rgba(212, 175, 55, .2)
	}

	50% {
		box-shadow: 0 0 12px rgba(212, 175, 55, .4), 0 6px 20px rgba(212, 175, 55, .25)
	}
}

.back-link {
	align-items: center;
	gap: 10px;
	color: var(--brown);
	margin-top: 32px;
	font-size: 15px;
	font-weight: 500;
	transition: .3s cubic-bezier(.4, 0, .2, 1);
	opacity: .8;
	padding: 12px 0;
	border-bottom: 1px solid transparent
}

.back-link:hover {
	color: var(--gold);
	opacity: 1;
	gap: 14px;
	border-bottom-color: rgba(212, 175, 55, .3);
	transform: translateX(-4px)
}

.error,
.loading {
	text-align: center;
	padding: 140px 60px;
	color: var(--brown);
	background: rgba(255, 255, 255, .8);
	border-radius: 20px;
	margin: 40px 0;
	border: 1px solid rgba(212, 175, 55, .08)
}

.error i,
.loading i {
	font-size: 56px;
	color: var(--gold);
	margin-bottom: 24px;
	display: block;
	opacity: .7
}

.loading i {
	animation: 2s linear infinite spin, 2s ease-in-out infinite pulse
}

@keyframes spin {
	from {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

@keyframes pulse {

	0%,
	100% {
		opacity: .7;
		transform: scale(1)
	}

	50% {
		opacity: 1;
		transform: scale(1.05)
	}
}

@media (max-width:1200px) {
	.product-detail-container {
		grid-template-columns: 1fr 1fr;
		gap: 80px;
		padding: 0 40px
	}

	.product-gallery {
		top: 140px
	}
}

@media (max-width:1024px) {
	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px
	}

	.social-feed-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px
	}

	.branches-grid,
	.why-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.branches-layout {
		flex-direction: column;
		padding: 0 20px;
		gap: 20px
	}

	.branches-left,
	.branches-right {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px
	}

	.branches-left .branch-card,
	.branches-right .branch-card {
		flex: 1;
		min-width: calc(50% - 10px)
	}

	.branches-center {
		order: 2;
		min-width: auto;
		margin: 20px 0
	}

	.branches-left {
		order: 1
	}

	.branches-right {
		order: 3
	}

	.branch-connector-line,
	.product-detail-price::before {
		display: none
	}

	.products-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px
	}

	.product-detail-section {
		padding: 120px 0 100px
	}

	.product-detail-container {
		grid-template-columns: 1fr;
		gap: 60px;
		padding: 0 32px;
		max-width: 800px
	}

	.product-gallery {
		position: relative;
		top: 0;
		max-width: 500px;
		margin: 0 auto 40px
	}

	.main-image {
		aspect-ratio: 4/5
	}

	.product-detail-price,
	.product-title {
		text-align: center
	}

	.product-title::after {
		left: 50%;
		transform: translateX(-50%)
	}

	.product-detail-description {
		text-align: left
	}

	.scent-pyramid-section {
		margin: 0 auto 40px;
		max-width: 600px
	}

	.buy-section {
		max-width: 400px;
		margin: 0 auto
	}

	.back-link {
		text-align: center;
		justify-content: center
	}
}

@media (max-width:768px) {
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 30px
	}

	.footer-bottom-content {
		flex-direction: column;
		text-align: center
	}

	.footer-bottom-links {
		flex-direction: column;
		gap: 8px
	}

	.about-alowidat-image::before,
	.craft-step-empty,
	.craft-step-node,
	.craft-steps::before,
	.filter-group-desc,
	.footer-bottom-links .separator,
	.timeline-line {
		display: none
	}

	.footer-bottom-links a {
		font-size: 12px
	}

	.footer-widget h3::after {
		left: 0;
		transform: none
	}

	.branches-grid,
	.craft-step,
	.vm-grid,
	.why-grid,
	html[dir=rtl] .featured-perfume-row:first-child {
		grid-template-columns: 1fr
	}

	html[dir=rtl] .featured-perfume-row:first-child .perfume-visual {
		order: 1 !important
	}

	html[dir=rtl] .featured-perfume-row:first-child .perfume-details {
		order: 2 !important;
		text-align: center
	}

	html[dir=rtl] .featured-perfume-row:first-child .perfume-category-badge {
		margin: 0 auto
	}

	.product-tags,
	html[dir=rtl] .featured-perfume-row:first-child .perfume-buttons {
		justify-content: center
	}

	html[dir=rtl] .featured-perfume-row:first-child .perfume-overlap-image {
		right: -15px;
		left: auto
	}

	.about-hero {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding-top: 130px;
		padding-bottom: 60px;
		overflow: hidden
	}

	.about-hero .hero-content,
	.fragrances-hero .hero-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		height: auto;
		width: 100%;
		padding: 0 24px;
		margin-top: 0;
		gap: 20px
	}

	.about-hero .hero-subtitle {
		font-size: 11px;
		letter-spacing: 4px;
		margin-bottom: 0
	}

	.about-hero .hero-title,
	.fragrances-hero .hero-title {
		font-size: clamp(2.8rem, 12vw, 4.5rem);
		margin-bottom: 0;
		line-height: 1.1
	}

	.about-hero .hero-rule,
	.fragrances-hero .hero-rule {
		gap: 12px;
		margin-bottom: 0
	}

	.about-hero .rule-line,
	.fragrances-hero .rule-line {
		width: 40px
	}

	.about-hero .hero-description,
	.fragrances-hero .hero-description {
		font-size: 14px;
		padding: 0;
		margin-bottom: 0;
		max-width: 100%;
		line-height: 1.7
	}

	.about-hero .hero-cta,
	.fragrances-hero .hero-cta {
		margin-top: 0;
		padding-bottom: 0
	}

	.about-hero .scroll-text,
	.fragrances-hero .scroll-text {
		font-size: 11px;
		letter-spacing: 2px
	}

	.about-hero .scroll-indicator i,
	.branch-info h3,
	.fragrances-hero .scroll-indicator i {
		font-size: 18px
	}

	.why-timeline {
		padding: 0 15px
	}

	.wt-step {
		flex-direction: column;
		gap: 20px;
		margin-bottom: 40px;
		min-height: auto
	}

	.wt-icon {
		width: 70px;
		height: 70px
	}

	.product-title,
	.why-promise-text,
	.wt-icon i {
		font-size: 28px
	}

	.wt-card {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%
	}

	.wt-card:hover {
		transform: translateY(-5px)
	}

	.why-promise-card {
		padding: 60px 20px
	}

	.about-alowidat,
	.branches-section,
	.craft-section,
	.social-section,
	.vision-mission,
	.vision-section,
	.why-section {
		padding: 60px 0
	}

	.vision-side {
		flex-direction: column
	}

	.craft-quote {
		padding: 24px 20px;
		font-size: 16px
	}

	.social-feed-grid {
		grid-template-columns: 1fr;
		gap: 20px;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto
	}

	.social-post-image {
		height: 200px
	}

	.social-links {
		flex-direction: column;
		align-items: center;
		gap: 15px
	}

	.social-link {
		width: 100%;
		max-width: 280px;
		justify-content: center
	}

	.branches-map-container {
		height: 350px
	}

	.branch-card {
		padding: 15px 20px
	}

	.branches-left .branch-card,
	.branches-right .branch-card {
		min-width: 100%
	}

	.about-hero {
		height: 100vh;
		min-height: 300px
	}

	.about-alowidat-grid {
		grid-template-columns: 1fr;
		gap: 40px
	}

	.about-alowidat-image .img-badge {
		right: 10px;
		bottom: 10px
	}

	.about-alowidat-image img {
		height: 320px
	}

	.stats-row {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px
	}

	.stat-item .num {
		font-size: 26px
	}

	.why-card {
		padding: 32px 24px
	}

	.vm-grid {
		gap: 4px
	}

	.vm-card {
		padding: 44px 28px
	}

	.craft-step {
		gap: 16px
	}

	.craft-step-content {
		grid-column: 1 !important
	}

	.craft-step:nth-child(2n) .craft-step-content {
		order: 0
	}

	.fragrances-hero {
		height: 100vh;
		min-height: 500px;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding-top: 130px;
		padding-bottom: 60px;
		overflow: hidden
	}

	.fragrances-hero .hero-subtitle {
		font-family: Poppins, sans-serif;
		font-size: 14px;
		letter-spacing: 6px;
		text-transform: uppercase;
		color: var(--gold);
		margin-bottom: 20px;
		font-weight: 400;
		animation: 1s ease-out fadeSlideUp
	}

	.filter-bar {
		padding: 20px 0
	}

	.filter-container {
		padding: 0 15px;
		gap: 20px
	}

	.filter-groups-wrapper,
	.product-info-detail {
		gap: 20px
	}

	.filter-group-label {
		margin-bottom: 12px
	}

	.filter-categories,
	.filter-subcategories {
		display: flex;
		flex-wrap: wrap !important;
		gap: 10px;
		overflow-x: visible !important;
		padding-bottom: 0;
		justify-content: flex-start
	}

	.filter-btn,
	.filter-sub {
		flex-shrink: 1 !important;
		min-width: auto;
		padding: 8px 16px
	}

	.filter-icon {
		font-size: 14px
	}

	.filter-text {
		font-size: 11px
	}

	.filter-results {
		padding: 10px 18px;
		font-size: 13px;
		width: 100%;
		justify-content: center
	}

	.filter-results span,
	.filter-results-bottom #resultCount {
		font-size: 16px
	}

	.products-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		padding: 0 15px
	}

	.page-btn {
		min-width: 60px;
		height: 38px;
		font-size: .8rem;
		padding: 0 .75rem
	}

	.next-btn,
	.prev-btn {
		min-width: 70px
	}

	.page-dots {
		font-size: .9rem
	}

	.pagination-wrapper {
		padding: 15px 15px 30px;
		gap: 15px
	}

	.filter-results-bottom {
		font-size: 12px;
		padding: 8px 16px;
		gap: 8px
	}

	.product-detail-section {
		padding: 100px 0 80px
	}

	.product-detail-container {
		padding: 0 20px;
		gap: 40px
	}

	.product-gallery {
		max-width: 100%
	}

	.main-image {
		aspect-ratio: 1/1;
		border-radius: 16px
	}

	.main-image img {
		padding: 30px
	}

	.product-detail-price {
		font-size: 20px;
		margin: 20px 0;
		padding: 16px 0
	}

	.product-detail-description {
		font-size: 15px;
		line-height: 1.7
	}

	.scent-pyramid-section {
		padding: 30px 24px;
		margin: 0 0 30px
	}

	.scent-pyramid-container {
		gap: 6px
	}

	.scent-pyramid-tier {
		padding: 14px 20px;
		min-height: 80px
	}

	.scent-pyramid-tier:first-child {
		width: 50%
	}

	.scent-pyramid-tier:nth-child(2) {
		width: 72%
	}

	.scent-pyramid-tier:nth-child(3) {
		width: 94%
	}

	.scent-tier-label {
		font-size: 9px;
		letter-spacing: 1.5px;
		margin-bottom: 10px
	}

	.scent-tier-label::after {
		width: 20px;
		bottom: -5px
	}

	.scent-note-item {
		font-size: 10px;
		padding: 4px 10px
	}

	.buy-btn {
		padding: 18px 28px;
		font-size: 16px
	}

	.back-link {
		margin-top: 24px;
		font-size: 14px
	}
}

@media (max-width:480px) {

	.featured-perfume-row .btn-details,
	.featured-perfume-row .btn-shop {
		white-space: normal;
		padding: 10px 20px
	}

	.featured-perfumes-section {
		padding: 40px 0
	}

	.container-full {
		padding: 0 16px
	}

	.featured-perfume-row {
		gap: 25px;
		margin-bottom: 50px
	}

	.perfume-main-image-wrapper {
		max-height: 300px
	}

	.main-image img,
	.perfume-main-img,
	.wt-card {
		padding: 20px
	}

	.perfume-overlap-image {
		width: 85px;
		height: 85px;
		bottom: -12px;
		border-width: 2px;
		border-radius: 15px
	}

	.featured-perfume-row .perfume-overlap-image {
		left: -12px
	}

	.featured-perfume-row:not(.reverse-mobile) .perfume-overlap-image {
		right: -12px;
		left: auto
	}

	.perfume-name {
		font-size: 28px;
		margin-bottom: 15px
	}

	.perfume-category-badge {
		font-size: 10px;
		padding: 4px 14px;
		margin-bottom: 15px
	}

	.scent-pyramid {
		padding: 12px;
		margin: 15px 0;
		border-radius: 12px
	}

	.pyramid-note {
		margin-bottom: 8px;
		padding-bottom: 6px
	}

	.note-label {
		font-size: 8px;
		letter-spacing: 1.5px;
		margin-bottom: 5px
	}

	.note-tags {
		gap: 8px;
		flex-wrap: wrap;
		justify-content: center
	}

	.note-tags span {
		font-size: 10px;
		padding: 2px 8px;
		white-space: nowrap;
		display: inline-block;
		margin: 0
	}

	.perfume-description {
		font-size: 13px;
		line-height: 1.5;
		margin: 15px 0
	}

	.perfume-buttons {
		flex-direction: column;
		gap: 12px
	}

	.btn-details,
	.btn-shop {
		width: 100%;
		justify-content: center;
		padding: 12px 20px;
		font-size: 13px
	}

	.about-hero .hero-description,
	.btn-details i,
	.btn-shop i,
	.category-cta,
	.fragrances-hero .hero-description {
		font-size: 13px
	}

	.view-all-btn {
		padding: 8px 20px;
		font-size: 12px;
		max-width: 220px
	}

	.products-section {
		padding: 30px 10px
	}

	.category-title {
		font-size: 20px
	}

	.category-image-wrapper {
		width: 46px;
		height: 46px
	}

	.category-preview {
		padding: 12px 14px
	}

	.expanded-right {
		min-height: 140px
	}

	.expanded-left {
		padding: 14px 16px 20px
	}

	.expanded-left h4 {
		font-size: 16px
	}

	.about-hero {
		padding-top: 150px;
		padding-bottom: 250px
	}

	.about-hero .hero-content {
		gap: 16px;
		top: 100px
	}

	.about-hero .hero-title,
	.contact-hero .hero-title,
	.fragrances-hero .hero-title {
		font-size: 2.6rem
	}

	.about-hero .hero-subtitle,
	.fragrances-hero .hero-subtitle {
		font-size: 10px;
		letter-spacing: 3px
	}

	.section-header h2 {
		font-size: 28px
	}

	.section-header h5 {
		font-size: 12px;
		letter-spacing: 3px
	}

	.divider-line {
		width: 40px
	}

	.perfume-bottle-icon img {
		width: 40px;
		height: 40px
	}

	.wt-icon {
		width: 60px;
		height: 60px
	}

	.product-title,
	.why-promise-text,
	.wt-icon i {
		font-size: 24px
	}

	.wt-card-text h3 {
		font-size: 18px
	}

	.product-detail-description,
	.wt-card-text p {
		font-size: 14px
	}

	.stats-row {
		grid-template-columns: 1fr;
		gap: 20px
	}

	.social-links {
		flex-direction: column;
		align-items: center
	}

	.social-link {
		width: 100%;
		max-width: 260px;
		justify-content: center
	}

	.fragrances-hero {
		padding-top: 250px;
		padding-bottom: 150px
	}

	.fragrances-hero .hero-content {
		gap: 16px
	}

	.products-grid {
		grid-template-columns: 1fr;
		gap: 15px
	}

	.product-image {
		height: 180px
	}

	.filter-btn,
	.filter-sub {
		padding: 6px 14px
	}

	.filter-icon {
		font-size: 12px
	}

	.filter-text {
		font-size: 10px
	}

	.product-detail-section {
		padding: 80px 0 60px
	}

	.product-detail-container {
		padding: 0 16px;
		gap: 32px
	}

	.main-image {
		border-radius: 12px
	}

	.product-detail-price {
		font-size: 18px;
		margin: 16px 0;
		padding: 12px 0
	}

	.scent-pyramid-section {
		padding: 24px 20px;
		border-radius: 16px
	}

	.scent-pyramid-title {
		font-size: 11px;
		margin-bottom: 20px
	}

	.scent-pyramid-tier {
		padding: 12px 16px;
		min-height: 70px
	}

	.scent-pyramid-tier:first-child,
	.scent-pyramid-tier:nth-child(2),
	.scent-pyramid-tier:nth-child(3) {
		width: 100%
	}

	.scent-tier-label {
		font-size: 8px;
		letter-spacing: 1px;
		margin-bottom: 8px
	}

	.scent-tier-label::after {
		width: 18px;
		bottom: -4px
	}

	.scent-note-item {
		font-size: 9px;
		padding: 3px 8px
	}

	.buy-btn {
		padding: 14px 24px;
		font-size: 14px;
		animation: 2s infinite softPulse
	}

	.error,
	.loading {
		padding: 80px 30px
	}

	.error i,
	.loading i {
		font-size: 48px
	}
}