/* ==========================================================================
   An Thành Phát — Unified product card (.cp-card)
   Used on: home (carousel), shop/category, search results, related products.
   This is the SINGLE source of truth for product card visuals across pages.
   Parent shopdevvn forces ul.products > li.product { width:25%; height:320px;
   float:left; border-right:0 } — overridden here with !important + grid.
   ========================================================================== */

/* ---------- Card itself ---------- */
.cp-card{
	display:flex;
	flex-direction:column;
	height:100%;
	background:#fff;
	border:1px solid var(--cp-border,#e1e8ee);
	border-radius:6px;
	padding:10px;
	box-sizing:border-box;
	transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
	position:relative;
	overflow:hidden;
	text-decoration:none;
	color:var(--cp-text,#1a1a1a);
}
.cp-card:hover{
	transform:translateY(-3px);
	box-shadow:0 4px 16px rgba(0,0,0,.08);
	border-color:var(--cp-primary,#3C4CE6);
}

/* ---------- Media (image + badge) ---------- */
.cp-card__media{
	display:block;
	position:relative;
	aspect-ratio:1/1;
	width:100%;
	background:#f8fafc;
	border-radius:4px;
	overflow:hidden;
	text-decoration:none;
}
.cp-card__img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
	transition:transform .25s ease;
	margin:0;
}
.cp-card:hover .cp-card__img{transform:scale(1.04)}
.cp-card__badge{
	position:absolute;
	top:8px;
	left:8px;
	padding:2px 8px;
	font-size:11px;font-weight:600;line-height:1.4;
	color:#fff;
	border-radius:3px;
	letter-spacing:.3px;
	z-index:2;
}
.cp-card__badge--sale{background:#ef4444}

/* ---------- Body ---------- */
.cp-card__body{
	display:flex;
	flex-direction:column;
	flex:1 1 auto;
	padding:10px 2px 2px;
}
.cp-card__brand{
	min-height:13px;
	font-size:10.5px;font-weight:600;line-height:1.2;
	color:var(--cp-primary,#3C4CE6);
	text-transform:uppercase;
	letter-spacing:.5px;
	margin:0 0 4px;
}
.cp-card__title{
	font-size:13px !important;
	font-weight:500 !important;
	line-height:1.35 !important;
	color:#1f2937;
	margin:0 0 8px;
	padding:0;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	text-transform:none;
}
.cp-card__title a{
	color:inherit;
	text-decoration:none;
}
.cp-card__title a:hover{color:var(--cp-primary,#3C4CE6)}
.cp-card__price{
	margin-top:auto;
	min-height:24px;
	font-size:15px;font-weight:700;line-height:1;
	color:var(--cp-primary,#3C4CE6);
	display:flex;
	align-items:baseline;
	flex-wrap:wrap;
	gap:6px;
}
.cp-card__price-now{font-weight:700;color:var(--cp-primary,#3C4CE6)}
.cp-card__price-now--contact{font-size:13px;font-weight:600;color:var(--cp-text-muted,#6d6d6d)}
.cp-card__price-old{
	font-size:12px;font-weight:500;line-height:1;
	color:var(--cp-text-muted,#9aa5b1);
	text-decoration:line-through;
}
.cp-card__btn{
	display:block;
	margin-top:8px;
	padding:7px 10px;
	background:var(--cp-primary,#3C4CE6);
	color:#fff;
	border-radius:4px;
	text-align:center;
	font-size:12.5px;font-weight:600;line-height:1;
	text-decoration:none;
	transition:background .15s;
}
.cp-card__btn:hover{
	background:var(--cp-primary-dark,#005a91);
	color:#fff;
}

/* ==========================================================================
   Grid override — neutralize parent shopdevvn's width:25% / height:320px /
   float:left on li.product so .cp-card can stretch full-height and the grid
   can be 5/4/3/2 cols across breakpoints.
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products{
	display:grid !important;
	grid-template-columns:repeat(5,minmax(0,1fr)) !important;
	gap:12px !important;
	margin:0 0 16px !important;
	padding:0 !important;
	list-style:none !important;
	border-top:0 !important;
	float:none !important;
}
/* WC float-based clearfix pseudo-elements consume grid cells in grid layout;
   neutralize them so row 1 col 1 isn't left empty. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after{
	display:none !important;
	content:none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce[class*="columns-"] ul.products li.product,
.woocommerce-page[class*="columns-"] ul.products li.product{
	width:auto !important;
	max-width:none !important;
	min-width:0 !important;
	height:auto !important;
	min-height:0 !important;
	margin:0 !important;
	padding:0 !important;
	float:none !important;
	clear:none !important;
	overflow:visible !important;
	border:0 !important;
	background:transparent !important;
	list-style:none !important;
	box-sizing:border-box;
	display:flex !important;
	flex-direction:column;
}
/* Hide WC default sale flash — we render our own .cp-card__badge */
.woocommerce ul.products li.product .onsale{display:none !important}
/* Hide WC default add-to-cart button on loop — replaced by .cp-card__btn */
.woocommerce ul.products li.product > .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart{display:none !important}

/* ==========================================================================
   Section contexts — tighten where needed
   ========================================================================== */

/* Home carousel: owl-stage flex makes cards equal-height already */
.cp-products .owl-stage{display:flex; padding-bottom:6px}
.cp-products .owl-item{display:flex}
.cp-products .owl-item > .cp-card{width:100%}

/* Related products on single PDP: scope reused with 5-col grid */
.cp-pdp__related ul.products,
.cp-pdp__related .related.products ul.products{
	display:grid !important;
	grid-template-columns:repeat(5,minmax(0,1fr)) !important;
	gap:12px !important;
}

/* ==========================================================================
   Responsive grid: 5 → 4 → 3 → 2 → 1
   ========================================================================== */
@media (max-width:1199px){
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.cp-pdp__related ul.products,
	.cp-pdp__related .related.products ul.products{
		grid-template-columns:repeat(4,minmax(0,1fr)) !important;
	}
}
@media (max-width:991px){
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.cp-pdp__related ul.products,
	.cp-pdp__related .related.products ul.products{
		grid-template-columns:repeat(3,minmax(0,1fr)) !important;
	}
}
@media (max-width:640px){
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.cp-pdp__related ul.products,
	.cp-pdp__related .related.products ul.products{
		grid-template-columns:repeat(2,minmax(0,1fr)) !important;
		gap:8px !important;
	}
	.cp-card{padding:8px}
	.cp-card__title{font-size:12.5px !important}
	.cp-card__price{font-size:14px}
	.cp-card__btn{font-size:11.5px;padding:6px 8px}
}
@media (max-width:380px){
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.cp-pdp__related ul.products,
	.cp-pdp__related .related.products ul.products{
		grid-template-columns:repeat(2,minmax(0,1fr)) !important;
	}
}