@import url('fonts.css');

:root {
	--mainBgColor: #FAFAFA;
	--mainHeader: #EBE6DC;
	--mainFooter: #282828;
	--menuTxtColor: #4B4B4B;
	--mainLightTxt: #FAFAFA;
	--mainGoldTxt: #B5A58C;
	--copyTxtColor: #B5A58C;
}

/** { outline: 1px solid red; }*/

body, html {
	margin: 0;
	padding: 0;
	background: var(--mainBgColor);
	scroll-behavior: smooth;

}

/* Mobile Menu*/
#menuOpen{
	all: unset;
	cursor: pointer;
}

#menuOpen img{
	min-width: 32px;
	max-width: 32px;
}

@media (max-width: 1023px) {
	#mobileMenu {
		position: fixed;
		inset: 0;
		background: var(--mainFooter);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;

		transform: translateX(100%);
		transition: transform 0.45s ease;
		z-index: 999;
	}

	#mobileMenu.active {transform: translateX(0);}
	#menuClose {
		position: absolute;
		top: 24px;
		right: 24px;
		font-family: 'Barlow Semi Condensed', sans-serif;
		color: var(--mainGoldTxt);
		font-size: 28px;
		font-weight: 200;
		background: none;
		border: none;
		cursor: pointer;
	}

	#mobileMenu ul {list-style: none; padding: 0; margin: 0; text-align: center;}
	#mobileMenu li {margin: 12px 0;}
	#mobileMenu a {font-family: 'Barlow Semi Condensed', sans-serif; color: var(--mainLightTxt); font-size: 18px; font-weight: 400; letter-spacing: 0.5px; text-decoration: none; text-transform: uppercase;}
	
	#menuLogo {text-align: center; margin: 32px 0 120px 0;}	
	#menuLogo img {width: 13%; min-width: 75px; max-width: 75px; height: auto;}
	
	#menuContact {position: absolute; bottom: 32px; text-align: center;}
	.Utxt1 {font-family: 'Barlow Semi Condensed', sans-serif; font-size: 10pt; font-weight: 700; color: var(--mainLightTxt); text-transform: uppercase; letter-spacing: 1pt;}
	.Utxt2{font-family: 'Barlow Semi Condensed', sans-serif; font-size: 10pt; font-weight: 400; color: var(--mainLightTxt); text-transform: uppercase; letter-spacing: 1pt;}	
}
@media (min-width: 1024px) {
	#menuOpen, #mobileMenu {display: none;}
}
/* Mobile Menu*/

/* Header */
#header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--mainHeader);
}

#navBlock{
	display: flex;
	gap: 24px;
	text-align: center;
}

#contactBlock {
	width: 25%;
	text-align: right;
}

#logoBlock {
	width: 25%;
	border: none;
}

@media (min-width: 1024px) {
	#header {
		width: calc(100% - 30%);
		margin: 0 auto;
		padding: 32px 15%;
	}
	
	#menuBlock {
		display: none;
	}
	
	#navBlock {
		display: flex;
	}
	
	#logoBlock img {
		width: 45%;
		min-width: 200px;
		height: auto;
	}
		
	#contactBlock a{
		padding-left: 5px;
	}
	
	#contactBlock img{
		min-width: 24px;
		width: 5%;
		height: auto;
	}
}

@media (max-width: 1023px) {
	#header {
		width: calc(100% - 48px);
		padding: 30px 24px;
	}
	
	#menuBlock {
		border: 1px;
		width: 20%;
	}
	
	#menuBlock img {
		border: none;
		width: 45%;
		height: auto;
	}
	
	#navBlock {
		display: none;
	}	
	
	#logoBlock {
		text-align: left;
		width: 55%;
	}
	
	#logoBlock img {
		width: 95%;
		height: auto;
	}
	
	#contactBlock {
		text-align: right;
		width: 25%;
	}
	
	#contactBlock a{
		padding-left: 5px;
	}
	
	#contactBlock img{
		width: 28%;
		height: auto;
	}
}

/* Header */

/* Hero Block */

#heroBlock{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

@media (min-width: 1024px) {
	#heroBlock {
		position: relative;s
		width: calc(100% - 30%);
		margin: 0 auto;
		padding: 120px 15%;
		background: url("../images/hero/0001.jpg") left center / 100% auto no-repeat;
	}
	
	#heroBlock::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 1;
	}
	
	#heroBlock > * {
		position: relative;
		z-index: 2;
	}
	
	#heroTxtBlock {
		text-align: center;
		padding: 120px 0;
	}
	
	#heroTxt:nth-child(1) {font-family: 'Barlow Semi Condensed', sans-serif; font-size: 11pt; font-weight: 700; color: var(--mainLightTxt); text-transform: uppercase; letter-spacing: 1px;}
	#heroTxt:nth-child(2) {font-family: 'Noto Serif', serif; font-size: 26pt; font-weight: 700; color: var(--mainGoldTxt); margin: 0; padding: 30px 0;}
	#heroTxt:nth-child(3) {font-family: 'Barlow Semi Condensed', sans-serif; font-size: 10pt; font-weight: 400; color: var(--mainLightTxt); text-transform: uppercase; letter-spacing: 1px;}
}

@media (max-width: 1023px) {
	#heroBlock {
		position: relative;
		width: calc(100% - 48px);
		margin: 0 auto;
		padding: 60px 24px;
		background: url("../images/hero/0001.jpg") left top / auto 100% no-repeat;
	}
	
	#heroBlock::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.7);
		z-index: 1;
		}
	
	#heroBlock > * {
		position: relative;
		z-index: 2;
	}
	
	#heroTxtBlock {
		text-align: center;
		padding: 80px 0;
	}	
	
	#heroTxt:nth-child(1) {font-family: 'Barlow Semi Condensed', sans-serif; font-size: 9pt; font-weight: 700; color: var(--mainLightTxt); text-transform: uppercase; letter-spacing: 1px;}
	#heroTxt:nth-child(2) {font-family: 'Noto Serif', serif; font-size: 18pt; font-weight: 700; color: var(--mainGoldTxt); margin: 0; padding: 30px 0;}
	#heroTxt:nth-child(3) {font-family: 'Barlow Semi Condensed', sans-serif; font-size: 9pt; font-weight: 400; color: var(--mainLightTxt); text-transform: uppercase; letter-spacing: 1px;}
}

/* Hero Block */

/* Philosophy */

#philosophyBlock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

#philosophy {
	width: 100%;
	text-align: center;
}

@media (min-width: 1024px) {
	#philosophyBlock {
		position: relative;s
		width: calc(100% - 30%);
		margin: 0 auto;
		padding: 80px 15%;
		background: url("../images/backgrounds/philosophy.jpg") center / cover no-repeat;
	}
	
	#philosophyBlock::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7); /* фирменный тёмный tint */
	z-index: 1;
	}
	
	#philosophyBlock > * {
		position: relative;
		z-index: 2;
	}
	
	#fullTxt {padding: 35px 0;}
	#shortTxt {display: none;}
}

@media (max-width: 1023px) {
	#philosophyBlock {
		position: relative;
		width: calc(100% - 48px);
		margin: 0 auto;
		padding: 60px 24px;
		background: url("../images/backgrounds/philosophy.jpg") center / cover no-repeat;
	}
	
	#philosophyBlock::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7); /* фирменный тёмный tint */
	z-index: 1;
	}
	
	#philosophyBlock > * {
		position: relative;
		z-index: 2;
	}
	
	#fullTxt {display: none;}
	#shortTxt {padding: 35px 0;}
	#shortTxt.Utxt4{
		font-family: 'Noto Serif', sans-serif;
		font-size: 12pt;
		font-weight: 300;
		color: var(--mainLightTxt);
		font-style: italic;
}

	#bookBTN {
	display: inline-block;
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--mainGoldTxt);
	text-decoration: none;
	padding: 16px 24px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: 1px solid var(--mainGoldTxt);
	cursor: pointer;
}

	#bookBTN:hover{
		color: var(--menuTxtColor);
		background: var(--mainGoldTxt);
		transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	}
	
	h1{font-family: 'Noto Serif', serif; font-size: 18pt; font-weight: 700; color: var(--mainGoldTxt);}
}
/* Philosophy */

/* FAQ's */
#faqsBlock {
	width: 100%;
}

#faq {
	padding: 0;
}

.faq-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;

	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.faq-item {
	border: 1px solid rgba(181, 165, 140, 1); /* gold */
	overflow: hidden;
}
/* кнопка-вопрос */
.faq-q {
	position: relative;          /* 🔑 */
	width: calc(100% - 60px);
	/* font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;*/
	font-family: 'Noto Serif', sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--menuTxtColor);
	display: block;
	padding: 24px 0 24px 24px;
	cursor: pointer;
}

.faq-q:focus-visible {
	outline: 2px solid rgba(181, 165, 140, 1);
	outline-offset: 2px;
}

.faq-icon {
	position: absolute;
	right: -24px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 34px;
	font-weight: 100;
	line-height: 1;
	transform-origin: 50% 50%;
	transition: transform .2s ease;
}

  /* панель ответа (анимация через max-height) */
  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s ease;
  }

.faq-a-inner {
	padding: 0 24px 24px 24px;
	font-family: 'Noto Serif', sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: var(--menuTxtColor);
	line-height: 1.5;
  }

  /* открыто */
  .faq-item.is-open .faq-a {
    max-height: 400px; /* достаточно для коротких ответов */
  }

.faq-item.is-open .faq-icon {
  transform: translateY(-50%) rotate(45deg);
}

@media (min-width: 1024px) {
	#faqsBlock {
		width: calc(100% - 30%);
		margin: 0 auto;
		padding: 60px 15% 60px 15%;
	}
}

@media (max-width: 1023px) {
	#faqsBlock {
		padding: 12px 0 36px 0;
	}
	
	.faq-grid {
		grid-template-columns: 1fr;
		padding: 0 12px;
	}
	
	.faq-icon {
		right: -24px;
		top: 32px;
	}
	
	.faq-q {
		font-weight: 700;
		font-size: 14px;
	}
	
	.faq-a-inner {
		font-size: 13px;
	}
}
/* FAQ's */

/* Services */

#services {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

#servicesThmb {
	position: relative;
	box-sizing: border-box;
	width: calc((100% - 2 * 12px) / 3);
	padding: 48px;
	min-height: 275px;
	margin: 0;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-repeat: no-repeat;
}

#servicesThmb:nth-child(2) { background-image: url("../images/services/0001.jpg"); }
#servicesThmb:nth-child(3) { background-image: url("../images/services/0002.jpg"); }
#servicesThmb:nth-child(4) { background-image: url("../images/services/0004.jpg"); }
#servicesThmb:nth-child(5) { background-image: url("../images/services/0003.jpg"); }
#servicesThmb:nth-child(6) { background-image: url("../images/services/0005.jpg"); }
#servicesThmb:nth-child(7) { background-image: url("../images/services/0006.jpg"); }
		
#servicesThmb::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7); /* фирменный тёмный tint */
	z-index: 1;
}
	
#servicesThmb > * {
	position: relative;
	z-index: 2;
}

@media (min-width: 1024px) {
	#services {
		width: calc(100% - 30%);
		margin: 0 auto;
		padding: 60px 15% 60px 15%;
	}
		
	#serviceHeader {
		padding: 0 0 12px 0;
	}
	h3 {font-family: 'Noto Serif', serif; font-size: 16pt; font-weight: 700; color: var(--mainGoldTxt); margin: 0; padding: 0;}
	 
	#serviceList ul {
		columns: 2;
		column-gap: 12px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#serviceList li {
		position: relative;
		padding-left: 20px;
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 11pt; 
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: var(--mainLightTxt);
		break-inside: avoid;     /* чтобы элементы не рвались */
		margin-bottom: 8px;
	}
	
	#serviceList li::before {
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 11pt; 
		font-weight: 400; 
		color: var(--mainLightTxt);
		content: "—";
		position: absolute;
		left: 0;
		top: 0;
	}
	
	#serviceTime {
		position: absolute;
		bottom: 32px;
		display: flex;
		align-items: center;
		gap: 24px;
	}
	
	#serviceTime > div {
		display: flex;
		align-items: center;
		gap: 6px;
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 11pt; 
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: var(--mainLightTxt);
	}
	
	#serviceTime img {
		min-width: 24px;
		max-width: 24px;
		height: auto;
	}
	
	#serviceLink {
		width: 100%;
		text-align: center;
		padding-top: 32px;
	 }
}

@media (max-width: 1023px) {
	#services {
		padding: 0 12px 36px 12px;
	}
	
	#servicesThmb {
		position: relative;
		width: 100%;
		min-height: 175px;
		padding: 24px;
		margin: 0;
	}

	#serviceHeader {
		padding: 0 0 12px 0;
	}
	h3 {font-family: 'Noto Serif', serif; font-size: 14pt; font-weight: 700; color: var(--mainGoldTxt); margin: 0; padding: 0;}

	#serviceList ul {
		columns: 2;
		column-gap: 6px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#serviceList li {
		position: relative;
		padding-left: 12px;
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 10pt; 
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: var(--mainLightTxt);
		break-inside: avoid;     /* чтобы элементы не рвались */
		margin-bottom: 8px;
	}
	
	#serviceList li::before {
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 10pt; 
		font-weight: 400; 
		color: var(--mainLightTxt);
		content: "—";
		position: absolute;
		left: 0;
		top: 0;
	}
	
	#serviceTime {
		position: absolute;
		bottom: 32px;
		display: flex;
		align-items: center;
		gap: 24px;
	}
	
	#serviceTime > div {
		display: flex;
		align-items: center;
		gap: 6px;
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 10pt; 
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: var(--mainLightTxt);
	}
	
	#serviceTime img {
		min-width: 24px;
		max-width: 24px;
		height: auto;
	}
	
	#serviceLink {
		width: 100%;
		text-align: center;
		padding-top: 32px;
	 }
}

/* Services */

/* Testimonials */

#testimonials{
	background: var(--mainHeader);
}

@media (min-width: 1024px) {
	#testimonials {
		width: calc(100% - 30%);
		margin: 0 auto;
		padding: 60px 15% 60px 15%;
	}
	
	#quotesBlock {
		width: 100%;
		text-align: center;
		padding: 0 0 16px 0;
	}
	
	#quotesBlock img{
		min-width: 56px;
		max-width: 56px;
	}
	
	#testimonial {
		max-width: 768px;
		text-align: center;
		margin: 0 auto;
	}
	
	#testimonialAutor {
		text-align: center;
		margin: 0 auto;
		padding: 32px 0 0 0;
	}
}

@media (max-width: 1023px) {
	#testimonials {
		width: calc(100% - 48px);
		margin: 0 auto;
		padding: 30px 24px 60px 24px;
	}
	
	#quotesBlock {
		width: 100%;
		text-align: center;
		padding: 0 0 16px 0;
	}
	
	#quotesBlock img{
		min-width: 56px;
		max-width: 56px;
	}
	
	#testimonial {
		text-align: center;
	}
	
	#testimonialAutor {
		text-align: center;
		margin: 0 auto;
		padding: 32px 0 0 0;
	}

	.Utxt5 {font-family: 'Noto Serif', sans-serif; font-size: 12pt; font-weight: 300; color: var(--menuTxtColor); font-style: italic;}
	.Utxt6{font-family: 'Barlow Semi Condensed', sans-serif; font-size: 10pt; font-weight: 500; color: var(--menuTxtColor); text-transform: uppercase; letter-spacing: 0.5px;}
}

/* Testimonials */

/* Gallery */

#gallery{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-start;
	align-items: flex-start;
}

@media (min-width: 1024px) {
	#gallery {
		width: calc(100% - 30%);
		margin: 0 auto;
		padding: 60px 15% 60px 15%;
	}
	
	#blockHeader {
		width: 100%;
		text-align: center;
		padding: 0 0 32px 0;
	}
	
	 #galleryThmb {
		position: relative;
		width: calc((100% - 5 * 12px) / 6);
		min-width: calc((100% - 3 * 12px) / 4);
		padding: 0;
		margin: 0;
	 }
	 
	 #galleryThmb img {
		display: block;
		width: 100%;
		height: auto;
		border: none;
	 }
	 
	 #like {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: absolute;
		left: 24px;
		bottom: 18px;
	 }
	 
	 #like img {
		max-width: 24px;
		min-width: 24px;
		height: auto;
	 }
	 
	 #like span{
		 padding-left: 5px;
	 }
	 
	 #galleryLink {
		width: 100%;
		text-align: center;
		padding-top: 32px;
	 }
}
@media (max-width: 1023px) {
	#gallery {
		gap: 6px;
		padding: 0 12px 36px 12px;
	}
	
	#blockHeader {
		width: 100%;
		text-align: center;
		padding: 32px 0 32px 0;
	}
	
	 #galleryThmb {
		position: relative;
		width: calc(50% - 3px);
		padding: 0;
		margin: 0;
	 }
	 
	 #galleryThmb img {
		 display: block;
		 width: 100%;
		 height: auto;
	 }
	 
	 #like {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: absolute;
		left: 12px;
		bottom: 12px;
	 }
	 
	 #like img {
		max-width: 24px;
		min-width: 24px;
		height: auto;
	 }
	 
	 #like span{
		padding-left: 5px;
	 }
	
	#like .Utxt2{
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 11pt;
		font-weight: 400;
		color: var(--mainLightTxt);
		text-transform: uppercase;
		letter-spacing: 1px;
	 }

	 #galleryLink {
		width: 100%;
		text-align: center;
		padding-top: 32px;
	 }
	 
	.linkUtxt1 {font-family: 'Noto Serif', sans-serif; font-size: 10pt; font-weight: 500; color: var(--menuTxtColor);}
	.linkUtxt1 a {color: var(--menuTxtColor); text-decoration: underline;}
	.linkUtxt1 a:hover {color: var(--menuTxtColor); text-decoration: none;}
	
	h2{	font-family: 'Noto Serif', serif; font-size: 18pt; font-weight: 700; color: var(--menuTxtColor); margin: 0; padding: 0;}
}

/* Gallery */

/* Aftercare */
#aftercare{
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	justify-content: flex-start;
	align-items: flex-start;
	background: var(--mainHeader);
}

@media (min-width: 1024px) {
	#aftercare > #blockHeader {
		padding-bottom: 0;
	}
	
	#aftercare {
		width: calc(100% - 30%);
		margin: 0 auto;
		padding: 60px 15% 60px 15%;
	}
	
	#aftercareTxt {
		position: relative;
		max-width: calc((100% - 1 * 48px) / 2);
		padding: 0;
		margin: 0;
	}
	
	.Utxt7{font-family: 'Noto Serif', serif; font-size: 12pt; font-weight: 300; color: var(--menuTxtColor); line-height: 1.5; margin: 0; padding: 0;}
	.Utxt8{font-family: 'Noto Serif', serif; font-size: 12pt; font-weight: 600; color: var(--menuTxtColor); line-height: 1.5; margin: 0; padding: 0;}
	h4{	font-family: 'Noto Serif', serif; font-size: 13pt; font-weight: 600; color: var(--menuTxtColor); margin: 0 0 6px 0; padding: 0;}
	
	#aftercareTxt ul {margin: 0; padding: 0; list-style: none;}
	#aftercareTxt li {position: relative; padding-left: 20px; break-inside: avoid;}
	#aftercareTxt li::before {content: "—"; position: absolute; left: 0; top: 0;}
}

@media (max-width: 1023px) {
	#aftercare{
		gap: 6px;
		padding: 0 24px 36px 24px;
	}
	
	#aftercareTxt {
		width: calc(100% - 24px);
		padding: 0;
		margin: 0;
	}
	
	#aftercareTxt:nth-child(3) { margin: 12px 0 0 0; }
	
	.Utxt7{font-family: 'Noto Serif', serif; font-size: 11pt; font-weight: 300; color: var(--menuTxtColor); line-height: 1.5; margin: 0; padding: 0;}
	.Utxt8{font-family: 'Noto Serif', serif; font-size: 10pt; font-weight: 600; color: var(--menuTxtColor); line-height: 1.25; margin: 0; padding: 0;}
	h4{font-family: 'Noto Serif', serif; font-size: 13pt; font-weight: 600; color: var(--menuTxtColor); margin: 0 0 6px 0; padding: 0;}
	
	#aftercareTxt ul {margin: 0; padding: 0; list-style: none;}
	#aftercareTxt li {position: relative; padding-left: 20px; break-inside: avoid;}
	#aftercareTxt li::before {content: "—"; position: absolute; left: 0; top: 0;}
}
/* Aftercare */

/* Recomended Product */
#products {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-start;
	align-items: flex-start;
}

@media (min-width: 1024px) {
	#products {
		width: calc(100% - 30%);
		margin: 0 auto;
		padding: 60px 15% 60px 15%;
	}
	
	 .productsThumb {
		position: relative;
		max-width: calc((100% - 4 * 12px) / 5);
		padding: 0;
		margin: 0;
		text-align: center;
	 }
	 
	 .productsThumb img {
		display: block;
		width: 100%;
		height: auto;
		border: none;
	 }
	 .Utxt9{font-family: 'Noto Serif', serif; font-size: 12pt; font-weight: 700; color: var(--menuTxtColor); margin: 0; padding: 0;}
	 .Utxt10{font-family: 'Noto Serif', serif; font-size: 12pt; font-weight: 400; color: var(--menuTxtColor); line-height: 1.25; margin: 3px 0; padding: 0;}
	 
	 #products .productsThumb:nth-child(7) {display: none;}
}

@media (max-width: 1023px) {
	#products{
		gap: 6px;
		padding: 0 12px 12px 12px;
	}
	
	.productsThumb {
		position: relative;
		max-width: calc((100% - 1 * 12px) / 2);
		padding: 0;
		margin: 0 0 32px 0;
		text-align: center;
	}
	 
	.productsThumb img {
		display: block;
		width: 100%;
		height: auto;
		border: none;
	}
	.Utxt9{font-family: 'Noto Serif', serif; font-size: 11pt; font-weight: 700; color: var(--menuTxtColor); margin: 0; padding: 0;}
	.Utxt10{font-family: 'Noto Serif', serif; font-size: 11pt; font-weight: 400; color: var(--menuTxtColor); line-height: 1.25; margin: 3px 0; padding: 0;}
}
/* Recomended Product */

/* Footer */

#footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	background-color: var(--mainFooter);
}

#footerBlock1 {
	width: 30%;
	text-align: left;
}

#footerBlock2 {
	width: 40%;
	text-align: center;
}

#footerBlock3 {
	width: 30%;
	text-align: right;
}

#footerCopy {
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

@media (min-width: 1024px) {
	#footer {
		width: calc(100% - 30%);
		margin: 0 auto;
		padding: 60px 15% 0 15%;
	}
	
	#footerCopy{
		width: 100%;
		margin-top: 60px;
		padding: 32px 0;
		text-align: center;
		border-top: 1px solid rgba(255, 255, 255, 0.25);
	}

	#footerBlock2 img {
		width: 13%;
		min-width: 75px;
		height: auto;
	}
	
	#footerLinks img{
		min-width: 24px;
		width: 5%;
		padding: 15px 0 0 0;
	}
	
	#footerSent {
		padding: 15px 0;
	}
}

@media (max-width: 1023px) {
	#footer {
		flex-direction: column;
		width: calc(100% - 48px);
		padding: 30px 24px;
	}
	
	#footerBlock1 {width: 100%; padding: 35px 0; order: 2; text-align: center;}
	#footerBlock2 {width: 100%; order: 1; text-align: center;}
	#footerBlock3 {width: 100%; order: 3; text-align: center;}
	
	#footerBlock1 div.Utxt1 {
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 10pt;
		font-weight: 700;
		color: var(--mainLightTxt);
		text-transform: uppercase;
		letter-spacing: 1pt;
		}

	#footerBlock1 div.Utxt2{
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 10pt;
		font-weight: 400;
		color: var(--mainLightTxt);
		text-transform: uppercase;
		letter-spacing: 1pt;
	}
	
	#footerBlock2 img {
		width: 12%;
		min-width: 75px;
		height: auto;
	}
		
	#footerBlock3 br {display: none;}
	#footerBlock3.Utxt3{
		font-family: 'Noto Serif', sans-serif;
		font-size: 11pt;
		font-weight: 500;
		color: var(--mainLightTxt);
		font-style: italic;
		padding: 0 0;
	}
	
	#footerLinks img{
		min-width: 24px;
		width: 5%;
		padding: 15px 0 0 0;
	}

	#footerCopy {width: 100%; order: 4;	margin-top: 16px; padding: 30px 0 0 0; text-align: center;}
	
	#footerCopy.copyUtxt1{
		font-family: 'Barlow Semi Condensed', sans-serif;
		color: var(--copyTxtColor);
		line-height: 1.4;
		font-size: 6pt;
		font-weight: 500;
		color: var(--copyTxtColor);		
		text-transform: uppercase;
		letter-spacing: 1px;
	}
}

/* Footer */