/* ================== 상품 관련 시작 ===================== */
.container {
	width: 100%;
	padding-right: 0px;
	padding-left: 0px;
	margin-right: auto;
	margin-left: auto;
}

.page-content {
	padding-bottom: 0;
}

.col-lg-12 {
	padding: 0;
	background-color: #f9f9f9;
}

.row.justify-content-center {
	/* 부트스트랩의 음수 마진을 강제로 제거 */
	margin-left: 0;
	margin-right: 0;
}

.col-xl-3 {
	padding: 0px;
}

.row {
	margin-left: 0px;
	margin-right: 0px;
}

.product-label.label-sale {
	color: #fff;
	background-color: #c96;
	/* [수정] 이제 사용하지 않으므로 주석 처리 또는 삭제 */
	display: none;
}

.product-label {
	position: absolute;
	z-index: 1;
	top: 1rem;
	left: 1rem;
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1.6rem;
	letter-spacing: -.01em;
	padding: .5rem .9rem;
	min-width: 45px;
	text-align: center;
	color: #333333;
	background-color: #fff;
}

.product {
	position: relative;
	margin-bottom: 0rem;
	transition: box-shadow .35s ease;
	background-color: #fff;
	/* ⭐⭐⭐ [추가] 시작 ⭐⭐⭐ */
	display: flex;
	flex-direction: column;
	height: 100%; /* 부모 요소의 높이를 꽉 채우도록 설정 */
	/* ⭐⭐⭐ [추가] 끝 ⭐⭐⭐ */
}

.product-body {
	position: relative;
	padding: 15px; /* 패딩을 약간 조정 */
	transition: all .35s ease;
	background-color: #fff; /* 배경색을 흰색으로 변경 */
	min-height: 120px;
	flex-grow: 1;
}

/* 1. 카테고리 스타일 */
.product-cat {
	color: #777;
	font-weight: 400;
	font-size: 1.1rem; /* 폰트 크기 약간 줄임 */
	line-height: 1.2;
	letter-spacing: -.01em;
	margin-bottom: 0.1rem; /* 아래 간격 줄임 */
}

/* 2. 상점명 (브랜드명) 스타일 */
.product-brand {
	font-size: 1.3rem;
	font-weight: 500;
	color: #666;
	margin-bottom: 0.4rem;
	/* 너비 초과 시 ... 처리 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-brand a {
	color: inherit;
	text-decoration: none;
}

.product-brand a:hover {
	color: #c96;
}

/* 3. 제품명 (.product-title) 스타일 수정 */
.product.product-7 .product-title {
	font-size: 1.6rem;
	font-weight: 400; /* 일반 두께로 */
	color: #666;
	letter-spacing: 0;
	margin-bottom: 0.8rem;
	/* 너비 초과 시 ... 처리 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product.product-7 .product-title a {
	color: inherit;
	text-decoration: none;
}

/* 4. 가격 영역 (.product-price) 전체 스타일 수정 */
.product.product-7 .product-price {
	display: flex;
	align-items: baseline; /* 할인율과 가격의 세로 정렬 기준선 */
	font-size: 19px;
	font-weight: 600; /* 굵게 */
	margin-top: auto; /* 항상 카드 하단에 위치하도록 함 */
	margin-bottom: 0px;
}

/* 할인율 스타일 */
.product-price .discount-rate {
	color: #c96; /* 할인율 텍스트 색상 */
	font-size: 1.5rem;
	margin-right: 8px; /* 가격과의 간격 */
}

/* 최종 가격 스타일 (할인 여부와 무관하게 공통 적용) */
.product-price .final-price {
	color: #333;
}

/* 할인된 가격에만 특별히 적용할 스타일 (필요하다면) */
.product-price .final-price.discounted {
	color: #333;
}

/* ⭐⭐⭐ [추가] 끝 ⭐⭐⭐ */
.product.text-center {
	text-align: left !important;
}

.product.text-center .product-price, .product.text-center .ratings-container,
	.product.text-center .product-nav, .product.text-center .product-size {
	justify-content: flex-start;
}

/* 상품 목록을 감싸는 컨테이너와 행(row)에 대한 기본 설정 */
.products .row {
	display: flex;
	flex-wrap: wrap; /* 상품이 여러 줄로 내려가도록 설정 */
	/* 여기에 gap을 적용하고, gap이 보더처럼 보이도록 배경색을 설정합니다. */
	gap: 1px; /* 아이템 사이의 간격 (보더 두께) */
	background-color: #f0f0f0; /* 이 색상이 아이템 사이의 보더 색상이 됩니다. */
	/* 컨테이너의 모든 가장자리에 1px 보더처럼 보이게 padding을 추가 */
	padding: 1px; /* 이 부분을 수정했습니다! */
}

/* [기존 코드] 각 상품 카드의 기본 스타일
  - 모든 상품 카드가 같은 높이를 갖도록 합니다.
*/
.products>.row>[class*=col-] {
	display: flex; /* 내부 컨텐츠를 위한 flex */
	align-items: stretch;
	align-content: stretch;
	box-sizing: border-box; /* 이미 되어 있지만, 중요합니다. */
	/* 각 col- 요소에 기본적으로 background-color를 흰색으로 줘서 gap 배경색을 덮도록 합니다. */
}

/* 1. 기본 스타일 (모바일 우선): 2개씩 표시 */
/* 화면이 600px 미만일 때 적용됩니다. */
.products>.row>[class*=col-] {
	/* 2열 (50%) - gap 값의 절반을 뺍니다 (양쪽 gap을 합쳐서 1px이 되도록) */
	flex: 0 0 calc(50% - 0.5px); /* (100% / 2) - (gap / 2) = 50% - 0.5px */
	max-width: calc(50% - 0.5px);
}

@media ( min-width : 600px) {
	.products>.row>[class*=col-] {
		/* 4열 (25%) - gap 값의 조정을 적용합니다 */
		flex: 0 0 calc(25% - 0.75px);
		/* (100% / 4) - (gap * 3 / 4) = 25% - 0.75px */
		max-width: calc(25% - 0.75px);
	}
}

/* 2. 데스크탑 스타일: 5개씩 표시 */
/* 화면이 992px 이상일 때 이 스타일이 적용됩니다. */
@media ( min-width : 992px) {
	.products>.row>[class*=col-] {
		/* 5열 (20%) - gap 값의 조정을 적용합니다 */
		flex: 0 0 calc(20% - 0.8px);
		/* (100% / 5) - (gap * 4 / 5) = 20% - 0.8px */
		max-width: calc(20% - 0.8px);
	}
}

/* ================== 상품이미지 비율 설정 =================  */
/* 컨테이너 (비율을 가짐) */
.product-media {
	position: relative;
	overflow: hidden;
	width: 100%; /* 너비를 기준으로 높이가 결정되므로 너비는 100%로 설정 */
	height: 0; /* 높이를 padding으로 제어하기 위해 0으로 설정 */
	/* 계산된 비율(119.6%)을 padding-top에 적용하여 높이 공간을 만듦 */
	padding-top: 125%;
}

/* 내부 이미지 (컨테이너를 채움) */
.product-media img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ================== 상품 관련 끝 ================== */

/* ================== 옵션툴바, 모달 스타일 시작 ================== */
/* ================== 기본 & 툴바 스타일 ================== */
.product-toolbar-container {
	width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	color: #333;
}

.main-category-nav {
	margin-top: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid #ebebeb;
	/* [수정] 가로 스크롤을 항상 활성화하여 어떤 상황에서도 레이아웃이 깨지지 않게 함 */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch; /* 터치 기기 스크롤 개선 */
	/* 스크롤바 숨기기 */
	-ms-overflow-style: none; /* IE, Edge */
	scrollbar-width: none; /* Firefox */
}

.main-category-nav::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

.main-category-list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0 15px;
	gap: 15px;
	/* [핵심 수정] wrap -> nowrap 으로 변경하여 항상 한 줄로 고정 */
	flex-wrap: nowrap;
}

.main-category-item {
	flex-shrink: 0; /* 항목이 좁은 공간에서 찌그러지는 것 방지 */
}

/* 드래그-스크롤 기능 향상을 위한 스타일 */
.main-category-nav.active-drag {
	cursor: grabbing;
	cursor: -webkit-grabbing;
	user-select: none;
}

.category-title {
	font-size: 15px;
	font-weight: bold;
}

.main-category-link {
	text-decoration: none;
	color: #888;
	font-size: 15px;
	font-weight: 500;
	padding: 10px 0;
	position: relative;
	transition: color 0.2s ease;
}

/* 활성화된 카테고리 탭 스타일 */
.main-category-link.active {
	color: #000;
	font-weight: 700;
}

.main-category-link.active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	height: 3px;
	background-color: #000;
}

.product-filter-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 15px;
	flex-wrap: wrap;
}

.filter-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* 모든 버튼의 공통 스타일 */
.filter-main-button, .filter-button, .filter-dropdown, .sort-dropdown {
	background-color: #fff;
	border: 1px solid #dcdcdc;
	padding: 3px 12px;
	border-radius: 8px;
	font-size: 0.9em;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
	white-space: nowrap;
}

.filter-main-button:hover, .filter-button:hover, .filter-dropdown:hover,
	.sort-dropdown:hover {
	border-color: #aaa;
}

/* '남', '여' 같은 토글 버튼 */
.filter-button.active {
	background-color: #333;
	color: #fff;
	border-color: #333;
}

/* 정렬 드롭다운에만 화살표 표시 */
.sort-dropdown::after {
	content: ' ▾';
	font-size: 1.1em;
	padding: 0;
	margin: 0;
	color: #555;
}

/* ================== 반응형 스타일 (832px 이하) ================== */
@media ( max-width : 832px) {
	/* '상품 필터'와 '신상품'을 제외한 나머지 필터 버튼 숨기기 */
	.filter-dropdown {
		display: none;
	}

	/* 
      [수정] .main-category-nav 와 .main-category-list 에 있던 
      반응형 스타일은 이제 전역으로 옮겨졌으므로 이 곳에서는 제거합니다.
      코드가 더 깔끔해집니다.
    */
}

/* ================== 필터 모달 스타일 ================== */

/* 모달이 열렸을 때 배경 스크롤 방지 */
body.app-modal-open {
	overflow: hidden;
}

/* 1. 모달 뒷배경 (Overlay) */
.app-filter-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1050; /* 부트스트랩 모달 z-index와 유사 */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.app-filter-modal-overlay.show {
	opacity: 1;
	visibility: visible;
}

/* 2. 모달 본문 (Content) */
.app-filter-modal-content {
	background-color: #fff;
	border-radius: 12px;
	width: 90%;
	max-width: 420px; /* 이미지와 유사한 너비 */
	height: 80vh; /* 화면 높이의 80% */
	max-height: 600px; /* 최대 높이 제한 */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
	transform: translateY(20px);
	transition: transform 0.3s ease;
}

.app-filter-modal-overlay.show .app-filter-modal-content {
	transform: translateY(0);
}

/* 2-1. 모달 헤더 */
.app-modal-header-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 17px 0;
}

.app-modal-header {
	display: flex;
	flex-direction: column;
	padding: 0 0 0 0; /* 패딩 조정 */
	flex-shrink: 0;
	border-bottom: 1px solid #eee; /* 하단 경계선 두께 조정 */
}

.app-modal-title {
	margin: 0;
	font-size: 14px; /* 20px */
	font-weight: 600;
}

.app-modal-close-button {
	background: none;
	border: none;
	font-size: 28px; /* 32px */
	line-height: 1;
	color: #888;
	cursor: pointer;
	padding: 0;
}

.app-modal-close-button:hover {
	color: #000;
}

/* 2-2. 모달 바디 (스크롤 영역) */
.app-modal-body {
	flex-grow: 1; /* 남은 공간을 모두 차지 */
	overflow-y: auto; /* 내용이 길어지면 스크롤 */
	padding: 20px 16px;
}

.app-modal-tab-nav {
	display: flex;
	position: sticky; /* 스크롤 시 상단에 고정 */
	top: 0;
	background-color: #fff;
	z-index: 10;
	border-bottom: 1px solid #eee;
}

.app-modal-tab-button {
	padding: 12px 5px; /* 패딩 조정 */
	border: none;
	background: none;
	cursor: pointer;
	color: #888;
	font-size: 1em; /* 16px */
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color 0.2s, border-color 0.2s;
	flex-grow: 1; /* 모든 버튼이 공간을 나눠가짐 */
}

.app-modal-tab-button:hover {
	color: #000;
}

.app-modal-tab-button.active {
	color: #000;
	font-weight: 700;
	border-bottom-color: #000;
}

.app-modal-tab-pane {
	display: none; /* 기본적으로 모든 탭 콘텐츠는 숨김 */
}

.app-modal-tab-pane.active {
	display: block; /* 활성화된 탭 콘텐츠만 보임 */
}

.app-tab-pane-title {
	font-size: 1.1em;
	font-weight: 600;
	margin: 0 0 12px 0; /* 타이틀 마진 조정 */
}

.app-filter-options-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px 10px;
	margin-bottom: 25px;
}

label {
	color: #666;
	font-weight: 300;
	font-size: 1.4rem;
	margin: 0;
}

.app-filter-option {
	display: flex;
	align-items: center;
	font-size: 0.95em;
	cursor: pointer;
}

.app-filter-option input[type="checkbox"], .app-filter-option input[type="radio"]
	{
	margin-right: 8px;
	width: 18px; /* 크기 키움 */
	height: 18px; /* 크기 키움 */
	cursor: pointer;
	accent-color: #000; /* 체크/선택 시 색상 */
}

/* --- 컬러 탭 스타일 --- */
.app-color-options {
	gap: 15px 10px;
}

.app-color-option {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.95em;
}

.color-swatch {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-block;
	transition: transform 0.2s ease;
}

.app-color-option input:checked+.color-swatch {
	transform: scale(1.05);
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}

/* --- 가격 탭 스타일 --- */
.modal-content-body { /* 이 클래스명은 실제 모달 구조에 맞게 변경해주세요 */
	max-height: calc(100vh - Xpx); /* 모달 헤더, 푸터 등을 제외한 높이 계산 */
	overflow-y: auto;
	padding-bottom: 20px; /* 푸터와 겹치지 않도록 여유 공간 */
}

.app-brand-search-wrapper {
	position: sticky; /* 스크롤 시 상단에 고정 */
	z-index: 10; /* 다른 요소 위에 오도록 z-index 설정 */
	background-color: #fff; /* 스크롤 시 뒤 내용이 비치지 않도록 배경색 지정 */
	padding-bottom: 20px; /* 기존 margin-bottom 유지 */
	margin-bottom: 0; /* 원래 margin-bottom은 sticky 요소에는 적합하지 않으므로 0으로 */
}

.app-brand-search-input {
	width: 100%;
	padding: 12px 40px 12px 15px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 1em;
	box-sizing: border-box;
}

.app-brand-search-button {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-80%);
	background: none;
	border: none;
	padding: 5px;
	cursor: pointer;
}

.brand-name {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.brand-name small {
	font-size: 0.85em;
	color: #888;
	margin-top: 2px;
}

.app-brand-options {
	/* max-height: 300px; 제거 */
	/* overflow-y: auto; 제거 */
	padding-top: 20px; /* 브랜드 목록 상단에 여백 추가 */
	border-top: 1px solid #eee; /* 브랜드 목록 상단 구분선 */
}

.app-filter-options-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px 10px;
	margin-bottom: 25px;
}

/* 2-3. 모달 푸터 */
.app-modal-footer {
	display: flex;
	flex-direction: column; /* 세로 방향 정렬 (이전과 동일) */
	padding: 15px 20px;
	background-color: #fff;
	border-top: 1px solid #eee;
	gap: 15px; /* 푸터 내부 요소들 (버튼 그룹과 상품보기 버튼) 사이의 간격 */
}

/* 새로 추가된 filter-options-and-reset 컨테이너에 flexbox 적용 */
.filter-options-and-reset {
	display: flex;
	justify-content: space-between; /* 양 끝 정렬 (태그는 왼쪽, 초기화 버튼은 오른쪽) */
	align-items: center; /* 수직 중앙 정렬 */
	width: 100%; /* 부모(footer)의 전체 너비 사용 */
	flex-wrap: wrap; /* 내용이 많아지면 다음 줄로 넘어가도록 허용 */
	gap: 10px; /* 내부 요소 간 간격 */
}

/* selected-filters-container는 그대로 flex-wrap 유지 */
.selected-filters-container {
	display: flex;
	flex-wrap: wrap;
	gap: 8px; /* 태그들 사이의 간격 */
	/* flex-grow를 1로 주어 가능한 공간을 채우게 할 수 있습니다. */
	flex-grow: 1;
}

/* 필터 초기화 버튼 스타일은 이전과 동일하게 유지 */
.app-reset-filters-button {
	background: none;
	border: none;
	color: #888;
	font-size: 1em;
	cursor: pointer;
	padding: 8px 12px;
	border-radius: 4px;
	transition: background-color 0.2s, color 0.2s;
	flex-shrink: 0; /* 필터 태그가 많아져도 이 버튼이 줄어들지 않도록 */
}

.app-reset-filters-button:hover {
	background-color: rgba(0, 0, 0, 0.05);
	color: #000;
}

/* 상품보기 버튼 스타일도 이전과 동일하게 유지 */
.app-view-products-button {
	width: 100%;
	padding: 12px 20px;
	background-color: #000;
	color: #fff;
	border: none;
	font-size: 1.1em;
	cursor: pointer;
	transition: background-color 0.2s;
	text-align: center;
}

.app-view-products-button:hover {
	background-color: #333;
}
/* 정렬 드롭다운 메뉴 컨테이너 */
.sort-dropdown-container {
	position: relative; /* 중요: 드롭다운 메뉴가 이 컨테이너를 기준으로 위치하도록 */
	display: inline-block; /* 버튼이 인라인 블록 요소로 존재하도록 */
}

/* 정렬 드롭다운 메뉴 (기본 숨김 상태) */
.sort-dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 88.3px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 8px;
    right: -30px;
    top: calc(100% + 5px);
}

/* `.sort-dropdown-container`에 `.active` 클래스가 있을 때 메뉴를 표시 */
.sort-dropdown-container.active .sort-dropdown-menu {
	display: block; /* 핵심: active 클래스 있을 때 메뉴 보임 */
}

/* 드롭다운 메뉴 내 링크 스타일 */
.sort-dropdown-menu li a {
	color: #333; /* 링크 텍스트 색상 */
	padding: 12px 16px; /* 링크 내부 패딩 */
	text-decoration: none; /* 밑줄 제거 */
	display: block; /* 전체 영역 클릭 가능하도록 */
	white-space: nowrap; /* 텍스트가 한 줄에 표시되도록 */
}

.sort-dropdown-menu li a:hover {
	background-color: #ddd; /* 호버 시 배경색 */
	border-radius: 8px; /* 메뉴 아이템에도 둥근 모서리 */
}

/* 모달 js 스타일 */
/* footer 내부 버튼 그룹을 위한 스타일 */
.footer-buttons-group {
	display: flex;
	justify-content: space-between; /* 양 끝 정렬 */
	align-items: center; /* 수직 중앙 정렬 */
	width: 100%; /* 전체 너비 사용 */
	gap: 10px; /* 버튼 사이 간격 */
}

/* 필터 초기화 버튼 스타일 (모달 X 버튼과 유사하게) */
.app-reset-filters-button {
	background: none; /* 배경 투명 */
	border: none; /* 테두리 없음 */
	color: #888; /* 옅은 회색 텍스트 */
	font-size: 1em; /* 기본 폰트 크기 */
	cursor: pointer;
	padding: 8px 12px; /* 패딩 */
	border-radius: 4px; /* 둥근 모서리 */
	transition: background-color 0.2s, color 0.2s; /* 호버 효과 */
	flex-shrink: 0; /* flex item에서 공간이 부족해도 줄어들지 않도록 */
}

.app-reset-filters-button:hover {
	background-color: rgba(0, 0, 0, 0.05); /* 호버 시 약간 어두운 배경 */
	color: #000; /* 호버 시 텍스트 색상 진하게 */
}

/* 개별 필터 태그 내 'x' 버튼 스타일 (remove-filter-btn) */
.remove-filter-btn {
	background: none;
	border: none;
	color: #999; /* X 버튼 색상 */
	font-size: 1.2em; /* 크기 조정 */
	margin-left: 5px; /* 텍스트와의 간격 */
	cursor: pointer;
	padding: 0 3px;
	line-height: 1; /* 라인 높이 조절 */
	transition: color 0.2s;
}

.remove-filter-btn:hover {
	color: #333; /* 호버 시 진한 색상 */
}

/* selected-filter-tag 자체의 디자인을 모달스럽게 조정 (필요하다면) */
.selected-filter-tag {
	font-weight: 400;
	display: inline-flex;
	align-items: center;
	background-color: #f0f0f0; /* 밝은 배경색 */
	border: 1px solid #ddd; /* 옅은 테두리 */
	border-radius: 4px;
	padding: 5px 10px;
	font-size: 0.9em;
	color: #555;
}

.app-view-products-button:hover {
	background-color: #333;
}

/* 상품정렬  */
/* filter-button의 스타일 (예시) */
.filter-button {
	background-color: #fff;
	border: 1px solid #dcdcdc;
	padding: 3px 12px;
	border-radius: 8px;
	font-size: 0.9em;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
	white-space: nowrap;
}
/* sort-control에 삼각형 추가 (이 부분은 이전과 동일) */
.sort-control::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 7px;
	margin-left: 5px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 6px solid #333;
}

.sort-dropdown-button {
	margin: 0;
	border: none;
	padding: 0;
	background-color: white;
}

/* 등록된 상품이 없을 때 */
.products-none.col-12.text-center.mt-4 {
	margin: 0px !important;
	height: 427px;
	align-items: center;
}

.products-none.col-12.text-center.mt-4 p {
    margin-bottom: 0;
    font-size: 1.4rem;
    font-weight: 500;
    font-family: 'Poppins';
    letter-spacing: 0;
    color: #777;
}