@font-face {
  font-family: 'Manrope';
  src: url('../font/mp-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../font/mp-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../font/mp-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../font/mp-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root {
    /* Colors */
		--color-text: #444343;
		--color-text-light: #757575;
		--color-text-dark:#343434;
		--color-white: #ffffff;
		--color-light: #f5f5f5;
		--color-gray: #8F8F8F;
		--color-border:#c0c0c0;

		--color-gray-light: #EDEDED;
    --color-primary: #000000;
		--color-secondary: #AA0000;
    --color-accent: #ff6600;

    
    /* Typography */
    --font-family: Manrope, sans-serif;
		--font-size: 0.875rem;


    
    /* Spacing */
		--spacing-1: 12px;
		--spacing-2: 15px;
		--spacing-3: 20px;
    --spacing-4: 40px;
    --spacing-5: 60px;
		

    
    /* Border Radius */
    --radius-sm:6px;
    
}

@media screen and (min-width: 768px) {
	:root {
		--spacing-2: 20px;
		--spacing-3: 30px;
		--spacing-4: 65px;
		--spacing-5: 90px;
	}
}

@media screen and (min-width:960px) {
		:root {
		--font-size: 1rem;
	}
}


html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
		box-sizing: border-box;
}
html * {
		box-sizing: inherit;
}
body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: 1.5;
		font-weight: 400;
    color: var(--color-text);
    background-color: var(--color-white);
		    padding: 0;
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
		margin: 0;
		padding: 0;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

button:focus,
button:focus-visible {
  outline: none;
  box-shadow: none;
}

.container {
	width: 100%;
    max-width: 1200px;
    margin: 0 auto;
		padding: 0 var(--spacing-2);
}
@media screen and (min-width: 1201px) {.container {padding: 0;}}

p{margin: 0;}
a{
	color:inherit;
	transition: color 0.3s ease;
	text-decoration: none;
	cursor: pointer;
}
a:hover {
	color: var(--color-secondary);
}


/* ===============================
   Utility Classes
   =============================== */
.gray {
    color: var(--color-gray);
}
.hidden {
    display: none !important;
}
.list-reset {
		list-style: none;
		padding: 0;
		margin: 0;
}
.text--center {
		text-align: center;
}


.flex--between--center {
		display: flex;
		justify-content: space-between;
		align-items: center;
}
.flex--center--center {    
		display: flex;
    align-items: center;
    justify-content: center;
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4 {	margin: 0;	padding: 0; font-weight: 700;}

h1,.h1 {
	font-size:32px;
	line-height: 1.1;
	color: var(--color-primary);

}

h2,.h2 {
	font-size: 18px;
	line-height: 1.4;
}

h3,.h3{
	font-size:var(--font-size);
	font-weight: 400;
	line-height: 1.6;
}

@media screen and (min-width: 960px) {
h1,.h1 {font-size:54px;}
h2,.h2 {	font-size: 28px;font-weight: 500;}
}

/*===============================
  Badge Block
  =============================== */
.badge {
    background-color: var(--color-accent);
    color: #FFCAA4;
    font-size: var(--font-size);
   	line-height: 30px;
    font-weight: 700;
}



/*===============================
  Header Block
  =============================== */
.header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 100;
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
  background-color: var(--color-white);
  flex-wrap: wrap;
}

.header__nav-btn {
		display: flex;
		align-items: center;
}
.header__nav-btn .close {
		display: none;
}
.header__nav-btn.toggler .close {
		display: block;
}
.header__nav-btn.toggler .open {
		display: none;
}
.header__logo {
    height: 33px;
    width: auto;
}
.header__nav {
    flex: 0 0 100%;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    position: absolute;
    width: 100%;
    top: 50px;
    left: 0;
    background: var(--color-white);
}
.header__nav.is-toggle{
	display: block;
    max-height: 250px;		
}
.header .menu{
padding: var(--spacing-2) var(--spacing-2) 0;
    width: 100%;

}
.header .menu-item {
	text-align: center;
	padding: var(--spacing-1) 0;
}
.header .menu-item :not(:last-child) {
	border-bottom: 1px solid var(--color-border);
}
@media screen and (min-width: 768px) {
.header__nav.is-toggle{  max-height: 260px;	}
.header__nav {top: 60px;}
}
@media screen and (min-width: 960px) {
	.header__nav{
			max-height: none;
			position: relative;
			top: 0;
			flex: 1 1 auto;
			order: -1;
			width: auto;
	}
	.header__nav-btn{display: none;}
	.header .menu {
			display: flex;
			gap: 30px;
			padding: 0;
	}
	.header .menu-item  {
		border-bottom: none !important;
    padding:  0;
}
}
@media screen and (min-width: 1200px) {
		.header .menu{gap: 50px;}
		.header .menu-item {font-size: 18px;}
}


/*==============================
  Hero Block
  =============================== */
.hero {
    width: 100%;
    overflow: hidden;
		margin-bottom: var(--spacing-5);
}

.hero__img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
		object-position: center;
		max-height: 85vh;
}
.hero__page{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	margin-bottom: var(--spacing-4);
}
.hero__page-img{
	width: 100%;
  overflow: hidden;
	 aspect-ratio: 3 / 2;
    object-fit: cover;
		object-position: center;
		max-height: 300px;
		
}
@media screen and (min-width: 960px) {
.head__subtitle {	font-size: 32px;font-weight: 400;}
.hero__page{	margin-bottom: var(--spacing-3);}
.hero__page-img{max-height: 315px; order: -1;}
}
@media screen and (min-width: 1599px) {
	.hero__page-img{max-height: 500px;}
}


/*===============================
  Breadcrumbs Block
  =============================== */

.breadcrumbs, .breadcrumbs a {
	color: var(--color-gray);
}
.breadcrumbs a:hover {
	color: var(--color-secondary);
}


/*===============================
  Head Block
  =============================== */

.head, .woocommerce-products-header {
	display: flex;
	gap: 16px;
	flex-direction: column;
	margin-bottom: var(--spacing-4);
}

.head__subtitle, .page-description {
	font-weight: 500;
	font-size: 18px;
	line-height: 1.4;
}

@media screen and (min-width: 960px) {
.head__subtitle, .page-description {	font-size: 32px;font-weight: 400;}
.head, .woocommerce-products-header {	margin-bottom: 40px;}
}

.content h1,.content h2,.content h3,.content h4,.content h5,
.content p, .content ul, .content ol {margin-bottom: 20px;}

/* ===============================
   Button Block
   =============================== */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding:var(--spacing-1);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    border: none;
}

.button--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
		padding: 15px;
}

.button--primary:hover {
   background-color: var(--color-secondary);
}

.button--full {
    width: 100%;

}
.button--transparent {
    background-color: transparent;
    color: var(--color-primary);
		border: #C0C0C0 1px solid;
}
.button--transparent:hover{
		color: var(--color-white);
		 background-color:  var(--color-primary);
}
.button:disabled {
    background-color: var(--color-gray);
    cursor: not-allowed;
    opacity: 0.6;
}

a.button:hover {
	color: #fff;
}




/* ===============================
   Footer Block
   =============================== */
.footer {
    background-color: var(--color-light);
		margin-top:var(--spacing-5);
    padding: var(--spacing-3) 0;
}

.footer__box {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}
.footer__box-item {
	flex: 0 1 auto;
}
.footer__title {
	color: var(--color-text);
	margin-bottom: var(--spacing-2);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-gray);
}
.footer__logo {
	width: auto;
	height: 24px;

}
.footer .menu-item:not(:last-child) {
	margin-bottom: 8px;
}
.footer .menu-item a{
	font-weight: 300;
}