:root {
	/* Core Colors */
	--bg-dark: #050505;
	--bg-surface: #0a0a0a;
	--text-main: #F5F3E8;
	--text-muted: #A09E95;
	
	/* Brand Gold */
	--gold: #D4AF37;
	--gold-light: #F3E5AB;
	--gold-hover: #B8860B;
	--gold-dim: rgba(212, 175, 55, 0.2);
	
	/* Collection Colors */
	--men-bg: #1c354b;
	--unisex-bg: #1b423c;
	--women-bg: #60302c;
	
	/* Typography */
	--font-heading: 'Playfair Display', serif;
	--font-body: 'Lora', serif;
	--font-ui: 'Montserrat', sans-serif;
	
	--filter-blue: #2563eb; 
	--filter-blue-hover: #3b82f6;
}

html {
	scroll-padding-top: 80px;
	scroll-behavior: smooth;
}

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

body {
	font-family: var(--font-body);
	color: var(--text-main);
	background: var(--bg-dark);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

#cookie {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background: rgba(5, 5, 5, 0.75);;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 500;
	letter-spacing: 0.5px;
}

.hidden {
	display: none !important;
}

a {
	text-decoration: none;
	color: inherit;
	transition: all 0.3s ease;
}

button {
	cursor: pointer;
}

#alert {
    z-index: 9999;
    position: fixed;
    top: 30%;
    left: 50%;
    width: 400px;
    margin-left: -200px;
}

/* ——— HEADER ——— */
.site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 5%;
	background: rgba(5, 5, 5, 0.75);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	/*border-bottom: 1px solid var(--gold-dim);*/
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	transition: all 0.4s ease;
}

.site-header:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0px;
	height: 2px;
	background: linear-gradient(to right, transparent -25%, var(--gold-dim) 50%, transparent 125%);
}

.logo {
	font-family: var(--font-heading);
	font-size: 2rem;
	color: var(--gold);
	text-shadow: var(--gold) 1px 0px 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-left: 12%;
}

.main-nav {
	display: flex;
	align-items: center;
	gap: 40px;
	list-style: none;
	font-family: var(--font-ui);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.main-nav-block {
	display: flex;
	padding: 10px 25px;
	gap: 20px;
	border: 1px solid var(--gold-dim);
}

.main-nav a {
	position: relative;
	padding-bottom: 0px;
}

.main-nav a::after {
	content: '';
	position: absolute;
	width: 0;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: var(--gold);
	transition: width 0.3s ease;
}

.main-nav a:hover::after {
	width: 100%;
}

.main-nav a:hover {
	color: var(--gold-light);
}

.main-nav a.active::after {
	width: 100%;
}

.main-nav a.active {
	color: var(--gold-light);
}

.cart-icon {
	font-size: 1.8rem;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.cart-icon:hover {
	transform: scale(1.1);
}

/* ——— HERO SECTION ——— */
/* Cinematic CSS Background mirroring the prompt */
.hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: 0 5%;
	position: relative;
	background: url('../../img/hero.webp') center/cover no-repeat;
	background-blend-mode: screen, normal, normal, overlay;
	margin-top: -90px; /* Pull up under header */
}

.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0.2) 60%, transparent 100%);
	z-index: 1;
}

.hero-content {
	position: relative;
	max-width: 650px;
	z-index: 2;
	padding-top: 90px;
}

.hero h1 {
	font-size: 4.5rem;
	line-height: 1.1;
	margin-bottom: 20px;
	padding-bottom: 5px;
	background: linear-gradient(120deg, var(--text-main), var(--gold), var(--gold-light));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 10px 30px rgba(212, 175, 55, 0.1);
}

.hero p {
	font-size: 1.2rem;
	color: var(--text-muted);
	margin-bottom: 40px;
	max-width: 500px;
	font-weight: 300;
}

.btn-primary {
	display: inline-block;
	padding: 16px 36px;
	background: transparent;
	border: 1px solid var(--gold);
	color: var(--gold);
	font-family: var(--font-ui);
	font-size: 0.85rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	transition: all 0.4s ease;
	position: relative;
	overflow: hidden;
}

.btn-primary:hover {
	background: var(--gold);
	color: var(--bg-dark);
	box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

/* ——— HOME CATEGORIES ——— */
.categories {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 2px;
	background: var(--bg-dark);
}

.category-card {
	position: relative;
	height: 600px;
	overflow: hidden;
	display: block;
}

.category-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	filter: grayscale(30%) brightness(0.8);
}

.category-card:hover img {
	transform: scale(1.08);
	filter: grayscale(0%) brightness(1);
}

.card-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 40px;
	z-index: 3;
	transition: opacity 0.4s ease;
}

/* Requested Colors mapped to Gradients */
[data-category="men"] .card-overlay { background: linear-gradient(to top, var(--men-bg) 0%, rgba(12, 22, 51, 0.2) 60%, transparent 100%); }
[data-category="women"] .card-overlay { background: linear-gradient(to top, var(--women-bg) 0%, rgba(58, 7, 24, 0.2) 60%, transparent 100%); }
[data-category="unisex"] .card-overlay { background: linear-gradient(to top, var(--unisex-bg) 0%, rgba(6, 45, 49, 0.2) 60%, transparent 100%); }

.cat-label {
	align-self: flex-start;
	padding: 6px 14px;
	border: 1px solid rgba(212, 175, 55, 0.5);
	color: var(--gold-light);
	font-family: var(--font-ui);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 20px;
	backdrop-filter: blur(4px);
}

.cat-title {
	font-size: 2.5rem;
	margin-bottom: 15px;
	color: #fff;
}

.cat-text {
	color: rgba(255, 255, 255, 0.8);
	font-size: 1rem;
	max-width: 90%;
}

/* ——— FEATURES ——— */
.features {
	padding: 100px 5%;
	background: var(--bg-surface);
	border-top: 1px solid var(--gold-dim);
	border-bottom: 1px solid var(--gold-dim);
}

.section-title {
	font-size: 2.8rem;
	text-align: center;
	margin-bottom: 70px;
	color: var(--text-main);
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 60px;
	max-width: 1200px;
	margin: 0 auto;
}

.feature-item {
	text-align: center;
}

.feature-icon {
	font-size: 2.5rem;
	margin-bottom: 25px;
}

.feature-title {
	font-size: 1.4rem;
	margin-bottom: 15px;
	color: var(--gold);
}

.feature-desc {
	font-size: 1rem;
	color: var(--text-muted);
}

/* ——— FOOTER ——— */
.site-footer {
	background: #020202;
	padding: 80px 5% 40px;
	text-align: center;
}

.footer-logo {
	font-family: var(--font-heading);
	font-size: 2.5rem;
	color: var(--gold);
	margin-bottom: 15px;
	letter-spacing: 2px;
}

.footer-tagline {
	font-family: var(--font-ui);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--text-muted);
	margin-bottom: 50px;
}

.newsletter {
	display: flex;
	justify-content: center;
	max-width: 500px;
	margin: 0 auto 50px;
	border-bottom: 1px solid var(--gold-dim);
	padding-bottom: 5px;
}

.newsletter-input {
	flex: 1;
	background: transparent;
	border: none;
	color: var(--text-main);
	padding: 15px 10px;
	font-family: var(--font-body);
	font-size: 1rem;
	outline: none;
}

.newsletter-input::placeholder {
	color: #555;
	font-style: italic;
}

.footer-btn {
	background: transparent;
	color: var(--gold);
	border: none;
	padding: 15px 25px;
	font-family: var(--font-ui);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	cursor: pointer;
	transition: 0.3s;
}

.footer-btn:hover {
	color: var(--gold-light);
}

.copyright {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	color: #444;
	letter-spacing: 1px;
}

/* ==========================================================================
   CATALOG PAGE STYLES
   ========================================================================== */
.page-catalog .site-header {
	background: var(--bg-dark);
}

.page-title-banner {
	padding: 60px 5% 40px;
	text-align: center;
	border-bottom: 1px solid var(--gold-dim);
}

.page-title-banner h1 {
	font-size: 3rem;
	color: var(--gold);
}

.catalog-container {
	display: flex;
	gap: 60px;
	padding: 30px 5%;
	max-width: 1600px;
	margin: 0 auto;
}

.checkbox-container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 18px;
	cursor: pointer;
	font-family: var(--font-ui);
	font-size: 0.85rem;
	color: var(--text-muted);
	user-select: none;
	transition: 0.3s;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.checkbox-container:hover {
	color: var(--gold);
}

.checkbox-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: -2px;
	left: 0;
	height: 18px;
	width: 18px;
	border: 1px solid #444;
	background: transparent;
	transition: 0.3s;
}

.checkbox-container:hover .checkmark {
	border-color: var(--gold);
}

.checkbox-container input:checked ~ .checkmark {
	border-color: var(--gold);
	background-color: transparent;
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
	display: block;
}

.checkbox-container .checkmark:after {
	left: 5px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid var(--gold);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* --- Products Grid --- */
.products-display {
	flex: 1;
}

.products-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40px;
	font-family: var(--font-ui);
}

.product-count-text {
	font-size: 0.85rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.sort-select {
	background: transparent;
	color: var(--text-main);
	border: none;
	border-bottom: 1px solid var(--gold);
	padding: 5px 30px 5px 0;
	font-family: var(--font-ui);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	outline: none;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23D4AF37%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: right 5px top 50%;
	background-size: 10px auto;
}

.sort-select option {
	background: var(--bg-surface);
}

.products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 40px;
}

/* --- Product Cards --- */
.product-card {
	background: var(--bg-surface);
	position: relative;
	transition: all 0.5s ease;
	border: 1px solid transparent;
}

.product-image {
	display: grid;
	/*height: 400px;*/
	overflow: hidden;
	border-radius: 10px;
    border: 2px solid #3C3835;
	background: #111;
	position: relative;
}

.product-image img {
	width: 100%;
	/*height: 100%;*/
	object-fit: cover;
	transition: transform 0.8s ease;
	transform: scale(1.01);
	opacity: 0.9;
}

.product-card:hover .product-image img {
	transform: scale(1.05);
	opacity: 1;
}

/* Category Specific Hover Effects using Requested Colors */
.card-men:hover { 
	border-color: rgba(12, 22, 51, 0.5); 
	box-shadow: 0 15px 40px rgba(12, 22, 51, 0.4); 
}
.card-women:hover { 
	border-color: rgba(58, 7, 24, 0.5); 
	box-shadow: 0 15px 40px rgba(58, 7, 24, 0.4); 
}
.card-unisex:hover { 
	border-color: rgba(6, 45, 49, 0.5); 
	box-shadow: 0 15px 40px rgba(6, 45, 49, 0.4); 
}

/* --- Badges --- */
.badge-container {
	position: absolute;
	top: 20px;
	left: 2px;
	right: 2px;
	z-index: 10;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	gap: 10px;
}

.product-card .badge {
	font-size: 8px;
	padding: 5px 7px;
}


.badge {
	padding: 5px 7px;
	font-family: var(--font-ui);
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 600;
	backdrop-filter: blur(5px);
}

.badge-men {
	border: 1px solid #2D3542;
	/*background: var(--men-bg); */
	background: linear-gradient(to right, #212B37, #31394C 50%, #3B475F);
	color: var(--text-main);
}

.badge-women { 
	/*background: var(--women-bg);*/
	background: linear-gradient(to right, #402420, #60302c 50%, #743b37);
	color: var(--text-main);
}

.badge-unisex { 
	/*background: var(--unisex-bg); */
	background: linear-gradient(to right, #12312b, #1b423c 50%, #20524b);
	color: var(--text-main);
}

.badge-rare {
	background: var(--gold); 
	color: var(--bg-dark);
}

.badge-novelty { 
	background: var(--gold-light); 
	color: var(--bg-dark);
}

.badge-limited { 
	border: 1px solid #fff; 
	color: #fff; 
	background: rgba(0,0,0,0.4); 
}

/* --- Product Info --- */
.product-info {
	padding: 0px 25px 30px;
	text-align: center;
}

.product-cat {
	display: block;
	font-family: var(--font-ui);
	font-size: 0.7rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 12px;
}

.product-name {
	font-family: Montserrat, sans-serif;
	font-size: 1.6rem;
	margin-bottom: 12px;
	color: var(--text-main);
}

.add-to-cart {
	background: transparent;
	border: 1px solid #333;
	color: var(--text-main);
	padding: 14px 25px;
	font-family: var(--font-ui);
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.75rem;
	cursor: pointer;
	transition: all 0.3s ease;
	width: 100%;
}

.product-card:hover .add-to-cart {
	border-color: var(--gold);
	color: var(--gold);
}

.add-to-cart:hover {
	background: var(--gold) !important;
	color: var(--bg-dark) !important;
}

/* ——— RESPONSIVE ——— */
@media (max-width: 992px) {
	.catalog-container {
		flex-direction: column;
	}
	
	.filter-sidebar {
		flex: none;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 30px;
	}
	
	.filter-group {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.hero h1 {
		font-size: 3.5rem;
	}
}

@media (max-width: 768px) {
	.main-nav ul {
		display: none;
	}
	
	.hero {
		padding-top: 120px;
	}
	
	.hero h1 {
		font-size: 2.8rem;
	}
	
	.categories {
		grid-template-columns: 1fr;
	}
	
	.category-card {
		height: 450px;
	}
}


/* ==========================================================================
	PRODUCT DETAIL PAGE STYLES
	========================================================================== */

.page-product .site-header {
	background: var(--bg-dark);
}

.product-main {
	padding: 40px 5% 100px;
	/*max-width: 1400px;*/
	margin: 0 auto;
}

/* --- Breadcrumbs --- */
.breadcrumbs {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--text-muted);
	margin-bottom: 50px;
}

.breadcrumbs a {
	transition: color 0.3s ease;
}

.breadcrumbs a:hover {
	color: var(--gold);
}

.breadcrumbs .sep {
	margin: 0 10px;
	color: #333;
}

.breadcrumbs .current {
	color: var(--gold-light);
}

/* --- Layout --- */
.product-container {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 80px;
	align-items: start;
}

/* --- Image Gallery & Thematic Glows --- */
.product-gallery-main {
	background: #0a0a0a;
	/*height: 650px;*/
	/*border-radius: 7px;*/
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 15px;
	border: 2px solid #3C3835;
	/*border: 1px solid rgba(255, 255, 255, 0.05);*/
	transition: box-shadow 0.8s ease;
}

/* Свечение зависит от категории аромата */
.theme-women .product-gallery-main {
	box-shadow: 0 0 60px rgba(58, 7, 24, 0.4);
	/*border-color: rgba(58, 7, 24, 0.3);*/
}

.theme-men .product-gallery-main {
	box-shadow: 0 0 60px rgba(12, 22, 51, 0.4);
	/*border-color: rgba(12, 22, 51, 0.3);*/
}

.theme-unisex .product-gallery-main {
	box-shadow: 0 0 60px rgba(6, 45, 49, 0.4);
	/*border-color: rgba(6, 45, 49, 0.3);*/
}

.product-gallery-main img {
	width: 100%;
	height: 100%;
	/*--w: 20px;
	--h: 10px;
	border-bottom-left-radius: var(--w) var(--h);
	border-bottom-right-radius: var(--w) var(--h);
	border-top-left-radius: var(--w) var(--h);
	border-top-right-radius: var(--w) var(--h);*/
	object-fit: cover;
	animation: slowZoom 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes slowZoom {
	from { transform: scale(1.05); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.product-badge {
	position: absolute;
	top: 30px;
	right: 0px;
	/*padding-right: 25px;*/
	text-align: center;
	/*min-width: 105px;*/
	z-index: 10;
}

.product-badge-left {
	right: initial;
	left: 0px;
}

.product-thumbnails {
	display: flex;
	gap: 20px;
	margin-top: 20px;
}

.thumb {
	width: 100px;
	height: 120px;
	background: #0a0a0a;
	cursor: pointer;
	border: 1px solid transparent;
	opacity: 0.6;
	transition: all 0.3s ease;
}

.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.thumb:hover {
	opacity: 1;
}

.thumb.active {
	opacity: 1;
	border-color: var(--gold);
}

/* --- Product Details --- */
.product-details {
	/*padding-top: 20px;*/
}

.product-cat-label {
	font-family: var(--font-ui);
	font-size: 0.8rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 2.5px;
	display: block;
	margin-bottom: 15px;
}

.product-title {
	font-family: Montserrat, sans-serif;
	font-size: 3.5rem;
	line-height: 1.1;
	text-shadow: var(--text-main) 0px 0px 3px;
	margin-bottom: 20px;
	color: var(--text-main);
}

.product-title-row {
	display: flex;
	grid-auto-flow: column;
	justify-content: space-between;
	align-items: flex-end;
}

.product-title-row .product-price {
	font-size: 2.65rem;
	margin-bottom: 20px;
	line-height: 1.1;
}

.product-price {
	font-family: var(--font-ui);
	font-size: 1.8rem;
	color: var(--gold);
	font-weight: 500;
	margin-bottom: 20px;
}

.product-story {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.8;
	margin-bottom: 15px;
	font-weight: 300;
}

/* --- Volume Options --- */
.product-options {
	margin-bottom: 40px;
}

.product-option {
	position: relative;
	display: grid;
    grid-auto-flow: column;
	/*justify-content: space-between;*/
    /*align-items: center;*/
	padding: 16px 16px;
	/*--l: 60px;
	--t: 2px;
	clip-path: polygon(
		0 0,
		var(--l) 0,
		var(--l) var(--t),
		calc(100% - var(--t)) var(--t),
		calc(100% - var(--t)) calc(100% - var(--l)),
		100% calc(100% - var(--l)),
		100% 100%,
		calc(100% - var(--l)) 100%,
		calc(100% - var(--l)) calc(100% - var(--t)),
		var(--t) calc(100% - var(--t)),
		var(--t) var(--l),
		0 var(--l)
	);
	border: var(--t) solid pink;*/
}

.product-option:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: radial-gradient(ellipse at 27%, #6E6A61 0%, transparent 90%);
}

.product-option + .product-option {
	/*margin-top: 20px;*/
}

.corner-box {  
  /* Настраиваем наши углы через переменные для удобства */
  --c: pink;  /* Цвет */
  --t: 5px;   /* Толщина (thickness) */
  --l: 60px;  /* Длина линий (length) */
  
  background:
    /* ЛЕВЫЙ ВЕРХНИЙ УГОЛ */
    linear-gradient(var(--c) 0 0) top left / var(--l) var(--t) no-repeat, /* Верхняя горизонтальная линия */
    linear-gradient(var(--c) 0 0) top left / var(--t) var(--l) no-repeat, /* Левая вертикальная линия */
    
    /* ПРАВЫЙ НИЖНИЙ УГОЛ */
    linear-gradient(var(--c) 0 0) bottom right / var(--l) var(--t) no-repeat, /* Нижняя горизонтальная линия */
    linear-gradient(var(--c) 0 0) bottom right / var(--t) var(--l) no-repeat; /* Правая вертикальная линия */
}

.option-title {
	font-family: var(--font-ui);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 15px;
	color: var(--text-muted);
}

.size-selector {
	display: grid;
    grid-auto-flow: column;
	justify-content: space-between;
    /*align-items: flex-start;*/
	gap: 20px;
}

.sticker-front {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: bold;
	display: grid;
	justify-content: center;
	align-content: center;
	text-align: center;
	width: 100px;
	height: 100px;
	border: 1px solid #6E6A61;
    box-shadow: 0px 0px 10px 1px #ffffff;
    background: #6E6A61;
    opacity: 0.75;
    color: black;
	border-radius: 50%;
}

.sticker-back {
	font-family: Oswald, sans-serif;
	font-size: 14px;
	display: grid;
	justify-content: center;
	align-content: center;
	text-align: center;
	margin-top: 5px;
	width: 100px;
	height: 50px;
	border-radius: 5px;
	border: 1px solid #6E6A61;
    box-shadow: 0px 0px 10px 1px #ffffff;
    background: #6E6A61;
    opacity: 0.75;
    color: black;
}

.size-option {
	display: grid;
    grid-auto-flow: row;
    grid-gap: 10px;
	justify-items: center;
    align-items: center;
	align-content: flex-end;
}

.size-option img {
	/*cursor: zoom-in;*/
	align-self: flex-end;
	max-width: 150px;
	max-height: 150px;
}

.size-option img, .size-option .sticker-front, .size-option .sticker-back {
	transform: scale(1.01);
	transition: all 0.3s ease;
}

.size-option:hover img, .size-option:hover .sticker-front, .size-option:hover .sticker-back {
	transform: scale(1.1);
	z-index: 1;
}

.size-option input {
	display: none;
}

.size-box {
	display: inline-block;
	align-self: flex-end;
	padding: 12px 30px;
	text-align: center;
	border: 1px solid #333;
	border-color: transparent;
	font-family: var(--font-ui);
	font-size: 0.9rem;
	color: var(--text-muted);
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.size-option input:checked + .size-box {
	border-color: var(--gold);
	color: var(--gold);
	background: rgba(212, 175, 55, 0.1);
}

.size-option:hover .size-box {
	/*border-color: var(--gold-dim);*/
	color: var(--text-main);
}

/* --- Actions (Cart & Qty) --- */
.product-actions {
	display: flex;
	gap: 20px;
	margin-bottom: 60px;
}

.quantity-selector {
	display: flex;
	align-items: center;
	border: 1px solid #333;
	height: 56px;
}

.qty-btn {
	display: grid;
	justify-content: center;
	align-content: center;
	background: transparent;
	border: none;
	color: var(--text-muted);
	width: 45px;
	height: 100%;
	font-size: 1.2rem;
	cursor: pointer;
	transition: 0.3s;
}

.qty-btn:hover {
	color: var(--gold);
}

.qty-input {
	background: transparent;
	border: none;
	color: var(--text-main);
	width: 50px;
	text-align: center;
	font-family: var(--font-ui);
	font-size: 1rem;
	outline: none;
	-moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.btn-add-cart {
	flex: 1;
	height: 56px;
	font-size: 0.9rem;
}

/* --- Fragrance Pyramid --- */
.fragrance-pyramid {
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	padding-top: 20px;
	margin-bottom: 40px;
}

.pyramid-title {
	font-family: var(--font-ui);
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 5px;
	color: var(--gold);
}

.notes-list {
	list-style: none;
}

.notes-list li {
	display: flex;
	/*padding: 15px 0;*/
	border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.note-level {
	flex: 0 0 100px;
	font-family: var(--font-ui);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--text-muted);
}

.note-desc {
	font-family: var(--font-body);
	font-style: italic;
	color: var(--text-main);
}

/* --- Meta Info --- */
.product-meta {
	font-family: var(--font-ui);
	font-size: 0.8rem;
	color: var(--text-muted);
	letter-spacing: 1px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.product-meta span {
	color: #666;
	text-transform: uppercase;
	margin-right: 10px;
}

/* --- RESPONSIVE PRODUCT PAGE --- */
@media (max-width: 1024px) {
	.product-container {
		grid-template-columns: 1fr;
		gap: 50px;
	}
	
	.product-gallery-main {
		height: 500px;
	}
	
	.product-title {
		font-size: 3rem;
	}
}

@media (max-width: 768px) {
	.product-gallery-main {
		height: 400px;
	}
	
	.product-actions {
		flex-direction: column;
	}
	
	.quantity-selector {
		width: 100%;
		justify-content: space-between;
	}
	
	.notes-list li {
		flex-direction: column;
		gap: 5px;
	}
}


.header-actions {
    display: grid;
	grid-auto-flow: column;
    align-items: center;
    gap: 20px;
}

.lang-switcher {
    position: relative;
}

.current-lang {
	display: grid;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    padding: 5px;
    align-items: center;
    transition: transform 0.3s ease;
}

.current-lang img {
	transform: scale(1.5);
	transition: all 0.3s ease;
}

.current-lang:hover img {
    transform: scale(1.6);
}

.lang-dropdown {
    position: absolute;
    top: 150%;
    right: 0;
    background: rgba(5, 5, 5, 0.95);
    border: 1px solid var(--gold-dim);
    list-style: none;
    padding: 10px 0;
    /*min-width: 150px;*/
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    z-index: 1001;
}

.lang-switcher.active .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown li {
	display: grid;
    cursor: pointer;
    align-items: center;
    gap: 12px;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--text-main);
    transition: background 0.3s, color 0.3s;
}

.lang-dropdown li:hover {
    background: var(--gold-dim);
    color: var(--gold-light);
}

.lang-dropdown li a {
	padding: 20px 20px;
}

.lang-dropdown li a {
	transform: scale(1.3);
}

.flag {
	display: grid;
}

.flag img {
	width: 20px;
}

.cart-icon a {
	display: grid;
}

.cart-icon img {
	width: 45px;
}

.lang-dropdown .flag {
    font-size: 1.2rem;
}

.product-inspiration {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: -5px;
}

.product-inspiration + .product-inspiration {
	margin-bottom: 15px;
}

.product-inspiration span {
    color: var(--gold-light);
}


.filter-sidebar {
    flex: 0 0 300px; /* Чуть расширили, чтобы больше чипов влезало в строку */
}

.filter-group {
    margin-bottom: 0px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.filter-title {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    color: var(--text-main);
}

/* Контейнер для кнопок-чипов (строка с переносом) */
.filter-chips-container {
    display: flex;
    flex-wrap: wrap; /* Перенос на новую строку, если не помещается */
    gap: 10px;       /* Отступы между кнопками */
}

/* Обертка для инпута и текста */
.filter-chip {
    cursor: pointer;
    display: inline-block;
    user-select: none;
}

/* Скрываем стандартный квадратик чекбокса */
.filter-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Внешний вид самой кнопки (чипа) */
.filter-text {
    display: inline-block;
    padding: 6px 14px;
    background-color: transparent;
    border: 1px solid #333; /* Базовая темная рамка */
    border-radius: 4px;     /* Слегка скругленные углы */
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* --- СОСТОЯНИЯ ФИЛЬТРА --- */

/* 1. При наведении (Hover): Синяя рамка и светлый текст */
.filter-chip:hover .filter-text {
    border-color: var(--gold);
    color: var(--text-main);
}

/* 2. При выборе (Checked): Синяя заливка, синяя рамка, белый текст */
.filter-input:checked + .filter-text {
    background-color: var(--filter-blue);
    border-color: var(--filter-blue);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2); /* Легкое синее свечение */
}

/* Мобильная адаптация: выравниваем фильтры на мобилках */
@media (max-width: 992px) {
    .filter-sidebar {
        flex: none;
        display: block; /* Убираем грид, чтобы чипы шли друг за другом */
    }
    .filter-group {
        border-bottom: none;
        margin-bottom: 25px;
    }
}