/*
 Theme Name:   Kadence Child
 Theme URI:    https://kadencewp.com/
 Description:  Child theme for Kadence Theme custom archive
 Author:       Ds Trung
 Template:     kadence
 Version:      1.0.29
*/


/* =========================================================
   DS.TRUNG PRODUCT CATALOG
========================================================= */

.dst-product-catalog {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px 20px 50px;
	box-sizing: border-box;
}

.dst-product-catalog *,
.dst-product-catalog *::before,
.dst-product-catalog *::after {
	box-sizing: border-box;
}


/* =========================================================
   DESKTOP LAYOUT
========================================================= */

.dst-product-catalog__layout {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}


/* =========================================================
   DESKTOP SIDEBAR
========================================================= */

.dst-product-sidebar {
	min-width: 0;
}

.dst-product-sidebar__inner {
	position: sticky;
	top: 100px;

	background: #ffffff;
	border: 1px solid #e4e8ee;
	border-radius: 14px;
	overflow: hidden;

	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.dst-product-sidebar__title {
	padding: 17px 18px;

	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #16213d;

	border-bottom: 1px solid #e9edf2;
}

.dst-product-sidebar__nav {
	display: flex;
	flex-direction: column;
	padding: 7px;
}

.dst-product-sidebar__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;

	padding: 11px 12px;

	border-radius: 9px;

	color: #344054;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;

	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.dst-product-sidebar__item:hover {
	background: #f3f7ff;
	color: #1463e6;
}

.dst-product-sidebar__item.is-active {
	background: #eaf2ff;
	color: #1463e6;
	font-weight: 700;
}

.dst-product-sidebar__count {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;

	min-width: 26px;
	height: 22px;
	padding: 0 7px;

	border-radius: 20px;
	background: #f2f4f7;

	color: #667085;
	font-size: 11px;
}

.dst-product-sidebar__item.is-active .dst-product-sidebar__count {
	background: #ffffff;
	color: #1463e6;
}


/* =========================================================
   PRODUCT AREA
========================================================= */

.dst-products-main {
	min-width: 0;
}

.dst-products-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 15px;

	margin: 0 0 15px;
}

.dst-products-heading h2 {
	margin: 0 0 3px;

	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: #111827;
}

.dst-products-count {
	font-size: 13px;
	color: #667085;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.dst-products-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.dst-product-card {
	display: flex;
	flex-direction: column;
	min-width: 0;

	background: #ffffff;
	border: 1px solid #e5e9ef;
	border-radius: 14px;
	overflow: hidden;

	box-shadow: 0 2px 7px rgba(15, 23, 42, 0.035);

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.dst-product-card:hover {
	transform: translateY(-2px);

	border-color: #d4deec;

	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}


/* Product image */

.dst-product-card__image {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 12px;

	background: #ffffff;
	text-decoration: none;
}

.dst-product-card__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;
	object-position: center;
}


/* Product body */

.dst-product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;

	padding: 0 13px 13px;
}


/* Product name */

.dst-product-card__name {
	display: -webkit-box;

	min-height: 60px;
	margin: 2px 0 9px;

	overflow: hidden;

	color: #182033;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.45;
	text-decoration: none;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.dst-product-card__name:hover {
	color: #1463e6;
}


/* Product bottom */

.dst-product-card__bottom {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
}


/* Product price */

.dst-product-card__price {
	min-height: 31px;
	margin-bottom: 10px;

	color: #1463e6;
	font-size: 17px;
	font-weight: 750;
	line-height: 1.25;
}

.dst-product-card__price del {
	display: block;

	margin-bottom: 2px;

	color: #98a2b3;
	font-size: 12px;
	font-weight: 500;
}

.dst-product-card__price ins {
	text-decoration: none;
}

.dst-contact-price {
	color: #475467;
	font-size: 14px;
}


/* =========================================================
   CUSTOM PRODUCT BUTTON
========================================================= */

.dst-product-card__button,
.dst-product-card__button.button {
	display: flex !important;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 40px;

	margin: 0 !important;
	padding: 9px 12px !important;

	border: 0 !important;
	border-radius: 999px !important;

	font-size: 14px !important;
	font-weight: 650 !important;
	line-height: 1.2 !important;

	text-align: center;
	text-decoration: none !important;

	box-shadow: none !important;

	transition:
		background-color 0.2s ease,
		transform 0.15s ease;
}


/* =========================================================
   MOBILE CATEGORY
   Hidden on desktop
========================================================= */

.dst-product-catalog__mobile-cats {
	display: none;
}


/* =========================================================
   PAGINATION
========================================================= */

.dst-product-pagination {
	display: flex;
	justify-content: center;

	margin-top: 30px;
}

.dst-product-pagination ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 7px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.dst-product-pagination li {
	margin: 0;
}

.dst-product-pagination a,
.dst-product-pagination span {
	display: flex;
	align-items: center;
	justify-content: center;

	min-width: 38px;
	height: 38px;
	padding: 0 10px;

	border: 1px solid #dde3ec;
	border-radius: 9px;

	background: #ffffff;

	color: #344054;
	font-size: 14px;
	text-decoration: none;
}

.dst-product-pagination a:hover {
	border-color: #1463e6;
	color: #1463e6;
}

.dst-product-pagination .current {
	border-color: #1463e6;
	background: #1463e6;

	color: #ffffff;
	font-weight: 700;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.dst-products-empty {
	padding: 35px 20px;

	border: 1px solid #e5e9ef;
	border-radius: 12px;

	background: #ffffff;

	color: #667085;
	text-align: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.dst-product-catalog__layout {
		grid-template-columns: 210px minmax(0, 1fr);
		gap: 18px;
	}

	.dst-products-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	/* Main catalog */

	.dst-product-catalog {
		padding: 14px 12px 35px;
	}


	/* Hide desktop sidebar */

	.dst-product-sidebar {
		display: none;
	}

	.dst-product-catalog__layout {
		display: block;
	}


	/* =====================================================
	   MOBILE CATEGORY STRIP
	===================================================== */

	.dst-product-catalog__mobile-cats {
		display: block;

		width: calc(100% + 24px);
		margin: 0 -12px 16px;

		overflow: hidden;
	}

	.dst-product-catalog__mobile-track {
		display: flex;
		gap: 8px;

		overflow-x: auto;

		padding: 2px 12px 6px;

		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.dst-product-catalog__mobile-track::-webkit-scrollbar {
		display: none;
	}


	/* Category card */

	.dst-mobile-cat {
		display: flex;
		flex: 0 0 82px;
		flex-direction: column;

		align-items: center;
		justify-content: center;
		gap: 5px;

		width: 82px;
		min-height: 82px;

		padding: 7px 5px;

		border: 1px solid #e0e5ec;
		border-radius: 11px;

		background: #ffffff;

		color: #25314d;
		text-align: center;
		text-decoration: none;

		scroll-snap-align: start;
	}

	.dst-mobile-cat.is-active {
		border-color: #1463e6;
		background: #f2f7ff;
		color: #1463e6;
	}


	/* Category image */

	.dst-mobile-cat__image {
		width: 30px;
		height: 30px;

		object-fit: contain;
	}


	/* Default category icon */

	.dst-mobile-cat__icon {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 28px;
		height: 28px;

		border-radius: 50%;

		background: #eef4ff;
		color: #1463e6;

		font-size: 15px;
	}


	/* Category name */

	.dst-mobile-cat__name {
		display: -webkit-box;

		overflow: hidden;

		font-size: 11px;
		font-weight: 650;
		line-height: 1.2;

		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}


	/* =====================================================
	   MOBILE HEADING
	===================================================== */

	.dst-products-heading {
		margin: 0 0 12px;
	}

	.dst-products-heading h2 {
		font-size: 21px;
		line-height: 1.25;
	}

	.dst-products-count {
		margin-top: 4px;

		font-size: 13px;
	}


	/* =====================================================
	   MOBILE PRODUCT GRID
	===================================================== */

	.dst-products-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}


	/* =====================================================
	   MOBILE PRODUCT CARD
	===================================================== */

	.dst-product-card {
		border-radius: 12px;
	}

	.dst-product-card:hover {
		transform: none;

		box-shadow: 0 2px 7px rgba(15, 23, 42, 0.035);
	}


	/* Product image */

	.dst-product-card__image {
		aspect-ratio: 1 / 0.88;
		padding: 7px;
	}

	.dst-product-card__image img {
		width: 100%;
		height: 100%;

		object-fit: contain;
	}


	/* Card body */

	.dst-product-card__body {
		padding: 0 10px 10px;
	}


	/* Product name */

	.dst-product-card__name {
		min-height: 54px;

		margin: 5px 0 7px;

		font-size: 13px;
		font-weight: 650;
		line-height: 1.38;

		-webkit-line-clamp: 3;
	}


	/* Price */

	.dst-product-card__price {
		min-height: 25px;
		margin-bottom: 8px;

		font-size: 16px;
		line-height: 1.2;
	}

	.dst-product-card__price del {
		font-size: 11px;
	}


	/* Buy button */

	.dst-product-card__button,
	.dst-product-card__button.button {
		min-height: 36px;

		padding: 7px 6px !important;

		font-size: 13px !important;
	}

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 370px) {

	.dst-products-grid {
		gap: 7px;
	}

	.dst-product-card__name {
		font-size: 12.5px;
	}

	.dst-product-card__price {
		font-size: 15px;
	}

}


/* =========================================================
   DS.TRUNG GLOBAL WOOCOMMERCE PURCHASE BUTTONS
   Màu chuẩn toàn website
========================================================= */

/*
 * Các selector này được cố tình đặt ở CUỐI FILE
 * và có specificity cao để thắng CSS WooCommerce/Kadence
 * đang dùng #446684 !important.
 */


/* NORMAL STATE */

html body .woocommerce a.button.add_to_cart_button,
html body .woocommerce a.button.ajax_add_to_cart,
html body .woocommerce a.add_to_cart_button,
html body .woocommerce button.single_add_to_cart_button,
html body .woocommerce .single_add_to_cart_button,
html body .woocommerce div.product form.cart .single_add_to_cart_button,
html body .woocommerce a.button.alt,
html body .woocommerce button.button.alt,
html body .woocommerce input.button.alt,

html body .dst-product-catalog a.dst-product-card__button,
html body .dst-product-catalog a.button.dst-product-card__button,
html body .dst-product-catalog a.button.add_to_cart_button,
html body .dst-product-catalog a.ajax_add_to_cart {
	background: #1463e6 !important;
	background-color: #1463e6 !important;
	background-image: none !important;

	border-color: #1463e6 !important;

	color: #ffffff !important;

	box-shadow: none !important;
}


/* HOVER */

html body .woocommerce a.button.add_to_cart_button:hover,
html body .woocommerce a.button.ajax_add_to_cart:hover,
html body .woocommerce a.add_to_cart_button:hover,
html body .woocommerce button.single_add_to_cart_button:hover,
html body .woocommerce .single_add_to_cart_button:hover,
html body .woocommerce div.product form.cart .single_add_to_cart_button:hover,
html body .woocommerce a.button.alt:hover,
html body .woocommerce button.button.alt:hover,
html body .woocommerce input.button.alt:hover,

html body .dst-product-catalog a.dst-product-card__button:hover,
html body .dst-product-catalog a.button.add_to_cart_button:hover,
html body .dst-product-catalog a.ajax_add_to_cart:hover {
	background: #0f52c7 !important;
	background-color: #0f52c7 !important;
	background-image: none !important;

	border-color: #0f52c7 !important;

	color: #ffffff !important;
}


/* FOCUS */

html body .woocommerce a.button.add_to_cart_button:focus,
html body .woocommerce a.button.ajax_add_to_cart:focus,
html body .woocommerce button.single_add_to_cart_button:focus,
html body .woocommerce .single_add_to_cart_button:focus,
html body .woocommerce div.product form.cart .single_add_to_cart_button:focus,
html body .woocommerce a.button.alt:focus,
html body .woocommerce button.button.alt:focus,

html body .dst-product-catalog a.dst-product-card__button:focus {
	background: #0f52c7 !important;
	background-color: #0f52c7 !important;
	background-image: none !important;

	border-color: #0f52c7 !important;

	color: #ffffff !important;

	outline: none;
}


/* ACTIVE */

html body .woocommerce a.button.add_to_cart_button:active,
html body .woocommerce button.single_add_to_cart_button:active,
html body .woocommerce .single_add_to_cart_button:active,
html body .woocommerce div.product form.cart .single_add_to_cart_button:active,
html body .woocommerce button.button.alt:active,

html body .dst-product-catalog a.dst-product-card__button:active {
	background: #0b49b3 !important;
	background-color: #0b49b3 !important;

	color: #ffffff !important;
}