/* Product cards — loaded by inc/product-cards.php. */

.wd-product {
	/* Tweak these to restyle the card buttons. */
	--kp-btn-height: 46px;
	--kp-btn-height-mobile: 40px;
	--kp-btn-font-size: 15px;
	--kp-btn-font-size-mobile: 13.5px;
	--kp-btn-radius: 999px;   /* 999px = fully rounded ends; 8px = slightly rounded */
	--kp-btn-icon-size: 20px;

	--kp-card-radius: 12px;
	--kp-card-border: #ebe8e0;            /* thin warm off-white edge; transparent = none at all */
	--kp-card-shadow: 0 2px 12px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
	--kp-card-shadow-hover: 0 12px 28px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .05);
}

/* ---------- Card: soft shadow instead of the green outline ----------
 * The card template (Woodmart Layouts → product loop #3055) sets a 2px green border;
 * this overrides it without editing the template. Covers grids and carousels
 * (carousel items have no .wd-col, so match on .wd-hover-parent, which both have). */

.wd.wd .wd-product.wd-hover-parent .wd-product-wrapper {
	border: 1px solid var(--kp-card-border);
	border-radius: var(--kp-card-radius);
	box-shadow: var(--kp-card-shadow);
	transition: box-shadow .3s, transform .3s;
}

.wd.wd .wd-product.wd-hover-parent:hover .wd-product-wrapper {
	box-shadow: var(--kp-card-shadow-hover);
	transform: translateY(-3px);
}

.wd-product .wd-product-thumb,
.wd-product .wd-product-thumb img {
	border-radius: calc(var(--kp-card-radius) - 4px);
}

/* ---------- Add to cart / Select options button ---------- */

.wd-product .wd-add-btn a.button.add-to-cart-loop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--kp-btn-height);
	padding: 0 18px;
	border-radius: var(--kp-btn-radius);
	font-size: var(--kp-btn-font-size);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	transition: transform .2s, box-shadow .2s, filter .2s;
}

.wd-product .wd-add-btn a.button.add-to-cart-loop:hover {
	box-shadow: 0 6px 16px rgba(33, 104, 55, .28);
	filter: brightness(1.08);
	transform: translateY(-1px);
}

/* Woodmart slides the text out and an icon in on hover; keep the text (with our icon) in place instead.
 * Its tick after adding to cart and its loading spinner still work. */
.wd-product .wd-add-btn-replace > a.add-to-cart-loop:not(.added):hover span {
	transform: none;
}

.wd-product .wd-add-btn-replace > a.add-to-cart-loop:not(.added):hover::before {
	transform: translateY(100%);
}

/* Cart icon in front of the text (drawn with the text colour). */
.wd-product .wd-add-btn a.button.add-to-cart-loop .wd-action-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: inherit;
}

.wd-product .wd-add-btn a.button.add-to-cart-loop .wd-action-text::before {
	content: "";
	flex: none;
	width: var(--kp-btn-icon-size);
	height: var(--kp-btn-icon-size);
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 10.2a1 1 0 0 0 1 .8h8.9a1 1 0 0 0 1-.8L20 7H6.2'/%3E%3Ccircle cx='9' cy='19.5' r='1.3'/%3E%3Ccircle cx='17' cy='19.5' r='1.3'/%3E%3Cpath d='M13 9.5v-5M10.5 7h5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 10.2a1 1 0 0 0 1 .8h8.9a1 1 0 0 0 1-.8L20 7H6.2'/%3E%3Ccircle cx='9' cy='19.5' r='1.3'/%3E%3Ccircle cx='17' cy='19.5' r='1.3'/%3E%3Cpath d='M13 9.5v-5M10.5 7h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 767px) {
	.wd-product .wd-add-btn a.button.add-to-cart-loop {
		min-height: var(--kp-btn-height-mobile);
		padding: 0 10px;
		font-size: var(--kp-btn-font-size-mobile);
	}

	.wd-product {
		--kp-btn-icon-size: 17px;
	}
}

/* ---------- Spacing between cards ----------
 * Wider gaps in the same number of columns also make each card a little narrower.
 * Covers product grids (shop, categories, homepage) and product carousels.
 * !important is needed because Woodmart writes the gap inline on each grid. */

.wd-products.wd-grid-g,
.wd-products .wd-carousel {
	--wd-gap: 36px !important;   /* PC (was 20px) */
}

@media (max-width: 1024px) {
	.wd-products.wd-grid-g,
	.wd-products .wd-carousel {
		--wd-gap: 24px !important; /* tablet */
	}
}

@media (max-width: 768.98px) {
	.wd-products.wd-grid-g,
	.wd-products .wd-carousel {
		--wd-gap: 20px !important; /* phone, 2 per row: kept as before, cards are narrow */
	}
}

/* Carousels clip anything outside their box, which would cut off the card
 * shadow and hover lift; give them room above and below. */
.wd-products .wd-carousel {
	padding-block: 8px 22px;
	margin-block: -8px -22px;
}

/* ---------- Product name: whole name, two lines ----------
 * The card template (#3055) cuts names to one line; long combo names lost
 * most of their text. Show all of it, split by assets/js/product-cards.js
 * into the Bangla name (bold) and the English name (small, grey). */

.wd.wd .wd-product .wd-entities-title.wd-line-clamp {
	max-height: none;
	overflow: visible;
	font-size: 15px;
	--wd-line-height: 1.45em;
}

.wd-product .kp-name__bn,
.wd-product .kp-name__en {
	display: block;
}

.wd-product .kp-name__bn {
	color: #1f1f1f;
	font-weight: 600;
}

.wd-product .kp-name__en {
	margin-top: 4px;
	color: #7a7a7a;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.4;
}

@media (max-width: 768.98px) {
	.wd.wd .wd-product .wd-entities-title.wd-line-clamp {
		font-size: 13.5px;
	}

	.wd-product .kp-name__en {
		font-size: 11.5px;
	}
}