/*
Theme Name: footwearmerch
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** Typography – Font tối ưu cho website bán giày ***************/

:root {
	--font-heading: "Montserrat", sans-serif;
	--font-body: "Source Sans 3", sans-serif;
}

/* Nội dung chính – dễ đọc, chuyên nghiệp */
body,
p,
input,
textarea,
select,
.woocommerce .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-Tabs-panel {
	font-family: var(--font-body) !important;
}

/* Tiêu đề & tên sản phẩm – nét khỏe, thu hút */
h1, h2, h3, h4, h5, h6,
.heading-font,
.banner h1, .banner h2,
.off-canvas-center .nav-sidebar.nav-vertical > li > a,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.woocommerce .related.products h2,
.woocommerce .upsells.products h2,
.widget_product_categories .widget-title,
.widget_price_filter .widget-title {
	font-family: var(--font-heading) !important;
}

/* Menu điều hướng */
.nav > li > a,
.mobile-sidebar-levels-2 .nav > li > ul > li > a,
.header-nav .nav > li > a {
	font-family: var(--font-heading) !important;
	font-weight: 600;
}

/* Nút & CTA – đồng bộ với heading */
button, .button, .btn,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	font-family: var(--font-heading) !important;
	font-weight: 600;
}

/* Giá & thông tin sản phẩm */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	font-family: var(--font-heading) !important;
	font-weight: 700;
}

/* Tối ưu hiển thị font */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*************** Danh mục = Collection style: thẻ vuông bo tròn, ảnh trên, nhãn dưới ***************/

/* Khung thẻ – rounded square, bóng, hover nhẹ */
.row .product-category .col-inner,
.ux-product-categories .product-category .col-inner {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	display: flex;
	flex-direction: column;
}
.row .product-category .col-inner:hover,
.ux-product-categories .product-category .col-inner:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

/* Box danh mục – full rounded */
.row .product-category .box-category,
.ux-product-categories .product-category .box-category {
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Ảnh – vuông (giống collection), bo góc trên */
.row .product-category .box-image,
.ux-product-categories .product-category .box-image {
	border-radius: 20px 20px 0 0;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	position: relative;
}
.row .product-category .box-image img,
.ux-product-categories .product-category .box-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}
.row .product-category:hover .box-image img,
.ux-product-categories .product-category:hover .box-image img {
	transform: scale(1.05);
}

/* Phần nhãn – căn giữa, gọn (collection style) */
.row .product-category .box-text,
.ux-product-categories .product-category .box-text {
	padding: 1rem 1.25rem;
	text-align: center;
	border-top: none;
	flex: 0 0 auto;
}
.row .product-category .box-text .header-title,
.ux-product-categories .product-category .box-text .header-title {
	font-family: var(--font-heading) !important;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 0.2rem 0;
	line-height: 1.3;
}
.row .product-category .box-text .count,
.ux-product-categories .product-category .box-text .count {
	font-family: var(--font-body) !important;
	font-size: 0.75rem;
	opacity: 0.9;
	letter-spacing: 0.03em;
	margin: 0;
}

/* Mặc định – nền trung tính */
.product-category .box-text {
	background: #f5f5f5;
}

/* Collection-style: mỗi danh mục một màu nền rõ (giống ảnh tham chiếu) */
.product-category.cat-bags .box-text {
	background: #e8dfd4;
}
.product-category.cat-bags .header-title { color: #5c4a32; }
.product-category.cat-bags .count { color: #6b5a42; }

.product-category.cat-clothing .box-text {
	background: #e2e8f0;
}
.product-category.cat-clothing .header-title { color: #2d3d4d; }
.product-category.cat-clothing .count { color: #4a6178; }

.product-category.cat-shoes .box-text,
.product-category.cat-footwear .box-text,
.product-category.cat-sneakers .box-text {
	background: #f5e5e5;
}
.product-category.cat-shoes .header-title,
.product-category.cat-footwear .header-title,
.product-category.cat-sneakers .header-title { color: #4a2c2c; }
.product-category.cat-shoes .count,
.product-category.cat-footwear .count,
.product-category.cat-sneakers .count { color: #6b4444; }

/* Hàng ngang đều – khoảng cách giữa các thẻ */
.row.row-collapse .product-category,
.ux-product-categories .row .product-category {
	margin-bottom: 0;
}
.ux-product-categories .row,
.row .product-category {
	gap: 0;
}
.ux-product-categories[class*="col-spacing"] .row .col,
.row.col-spacing-small .product-category.col {
	padding: 0 0.4rem;
}
@media only screen and (max-width: 48em) {
	.row .product-category .box-text .header-title,
	.ux-product-categories .product-category .box-text .header-title {
		font-size: 0.95rem;
	}
	.row .product-category .box-text,
	.ux-product-categories .product-category .box-text {
		padding: 0.85rem 1rem;
	}
	.row .product-category .box-image,
	.ux-product-categories .product-category .box-image {
		aspect-ratio: 1 / 1;
	}
}

/*************** Menu – khôi phục giao diện sau khi phục hồi menu ***************/

/* Đảm bảo header nav luôn hiển thị đúng layout */
.header-nav.header-nav-main,
.header-nav.header-bottom-nav {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
}
.header-nav .nav {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.header-nav .nav > li {
	display: inline-flex;
	align-items: center;
}
.header-nav .nav > li > a.nav-top-link {
	display: inline-flex;
	align-items: center;
	padding: 0 0.75em;
	text-decoration: none;
	font-family: var(--font-heading) !important;
	font-weight: 600;
	white-space: nowrap;
}
.header-nav .nav > li > a.nav-top-link:hover {
	opacity: 0.85;
}

/* Dropdown submenu */
.header-nav .nav .nav-dropdown {
	list-style: none;
	margin: 0;
	padding: 0.5em 0;
	min-width: 200px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.12);
	border-radius: 6px;
	background: #fff;
}
.header-nav .nav .nav-dropdown li a {
	display: block;
	padding: 0.5em 1em;
	text-decoration: none;
}
.header-nav .nav .nav-dropdown li a:hover {
	background: rgba(0,0,0,0.05);
}

/* Top bar menu */
.nav.nav-small.nav-left .nav-top-link,
.nav.nav-small.nav-right .nav-top-link {
	font-size: 0.9em;
	padding: 0 0.5em;
}

/* Mobile / off-canvas menu (sidebar) */
.off-canvas-center .nav-sidebar.nav-vertical .nav > li > a,
.mobile-nav .nav > li > a {
	display: block;
	padding: 0.75em 1em;
	text-decoration: none;
	font-family: var(--font-heading) !important;
}
.mobile-nav .nav {
	display: block !important;
}
.mobile-nav .nav > li {
	display: list-item;
}

/* Footer menu */
.footer-nav .nav,
.nav-footer {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-nav .nav > li > a,
.nav-footer a {
	padding: 0 0.5em;
	text-decoration: none;
}

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}