/*
 * Catalog product card
 * Figma: "Product card v2 · WORKING" (239:1290). Spec: openspec/changes/catalog-product-card.
 * Markup: Flatsome woocommerce/content-product.php + hooks in inc/product-card.php.
 * Uses only --bb-* tokens from css/tokens.css.
 */

/* ---------- Card box ---------- */
.product-small.col > .col-inner {
	height: 100%;
}

.product-small.box {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--bb-space-md);
	background: var(--bb-color-bg-canvas);
	border: 1px solid var(--bb-color-border-default);
	border-radius: var(--bb-radius-xl);
	box-shadow: var(--bb-shadow-card);
	transition: box-shadow 0.2s ease;
}

.product-small.box:hover,
.product-small.box:focus-within {
	box-shadow: var(--bb-shadow-floating);
}

/* ---------- Media ---------- */
.product-small.box .box-image {
	width: 100%;
	border-radius: var(--bb-radius-md);
	overflow: hidden;
}

.bb-card__badge {
	position: absolute;
	top: var(--bb-space-sm);
	left: var(--bb-space-sm);
	z-index: 2;
	padding: var(--bb-space-xs) 10px;
	border-radius: var(--bb-radius-full);
	background: var(--bb-color-bg-support-muted);
	color: var(--bb-color-text-primary);
	font-size: 10px;
	font-weight: var(--bb-font-weight-bold);
	line-height: 1.2;
	white-space: nowrap;
}

/* Favourite: always visible (Flatsome shows it only on hover) */
.product-small.box .image-tools.top.right {
	padding: var(--bb-space-sm);
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.product-small.box .wishlist-button {
	width: var(--bb-size-control-min);
	height: var(--bb-size-control-min);
	min-height: var(--bb-size-control-min);
	margin: 0;
	background: var(--bb-color-bg-canvas);
	border: 1px solid var(--bb-color-border-default);
	color: var(--bb-color-text-primary);
	box-shadow: 0 2px 8px rgba(31, 36, 41, 0.08);
}

.product-small.box .wishlist-button:hover,
.product-small.box .wishlist-button.wishlist-added {
	background: var(--bb-color-bg-canvas);
	border-color: var(--bb-color-border-support);
	color: var(--bb-color-status-danger);
}

/* Availability line already says it; Flatsome label over the image is a fallback only */
.product-small .out-of-stock-label {
	display: none;
}

/* ---------- Content ---------- */
.product-small.box .box-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--bb-space-sm);
	padding: var(--bb-space-md) 0 0;
}

/* Flatsome centres every direct div of .text-center with auto margins; in a flex column
   that shrinks them to content width, so stretch them back. */
.product-small.box .box-text > div,
.product-small.box .box-text > p {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.product-small.box .title-wrapper {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.product-small.box .product-title {
	margin: 0;
	font-size: var(--bb-body-md-size);
	line-height: 18px;
	font-weight: var(--bb-font-weight-bold);
	text-align: center;
	/* Figma: fixed 2-line title */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 36px;
	max-height: 36px;
}

/* Flatsome makes the link inline-block (line-height 1.3), which line-clamp cannot cut */
.product-small.box .product-title a {
	display: inline;
	line-height: inherit;
	color: var(--bb-color-text-primary);
}

.product-small.box .product-title a:hover {
	color: var(--bb-color-text-link);
}

.bb-card__detail {
	margin: 0;
	color: var(--bb-color-text-secondary);
	font-size: 12px;
	line-height: 16px;
	text-align: center;
}

/* Specs: 2-column grid */
.bb-card__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px var(--bb-space-sm);
	margin: var(--bb-space-xs) 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

/* Beats Flatsome ".col-inner ul li { margin-left: 1.3em }", which indented the specs */
.product-small.box .bb-card__spec {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	margin: 0;
	color: var(--bb-color-text-secondary);
	font-size: 10px;
	line-height: 14px;
}

.bb-card__spec svg {
	flex: 0 0 14px;
}

.bb-card__spec-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Decision area: price, availability, CTA ---------- */
.product-small.box .price-wrapper {
	margin-top: auto;
	padding-top: var(--bb-space-sm);
	border-top: 1px solid var(--bb-color-border-default);
	text-align: left;
}

.product-small.box .price-wrapper .price {
	display: block;
	color: var(--bb-color-text-primary);
	font-size: 20px;
	line-height: 24px;
	font-weight: var(--bb-font-weight-bold);
}

.product-small.box .price-wrapper del {
	font-size: 12px;
	font-weight: var(--bb-font-weight-regular);
	color: var(--bb-color-text-secondary);
}

.bb-card__availability {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	color: var(--bb-color-text-primary);
	font-size: 11px;
	line-height: 15px;
	font-weight: var(--bb-font-weight-bold);
	text-align: left;
}

.bb-card__availability > span:last-child {
	color: var(--bb-color-status-success);
}

.bb-card__availability-dot {
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	border-radius: var(--bb-radius-full);
	background: var(--bb-color-status-success);
}

.bb-card__availability.is-outofstock > span:last-child {
	color: var(--bb-color-text-secondary);
}

.bb-card__availability.is-outofstock .bb-card__availability-dot {
	background: var(--bb-color-border-strong);
}

/* CTA "Comprar Agora": dark, full width, cart + chevron icons */
.product-small.box .add-to-cart-button {
	margin-top: var(--bb-space-xs);
}

.product-small.box .add-to-cart-button .button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bb-space-sm);
	width: 100%;
	min-height: var(--bb-size-control-min);
	margin: 0;
	padding: 0 var(--bb-space-md);
	border: 0;
	border-radius: 10px;
	background: var(--bb-color-bg-inverse);
	color: var(--bb-color-text-inverse);
	font-size: 13px;
	font-weight: var(--bb-font-weight-bold);
	letter-spacing: 0;
	text-transform: none;
	line-height: 1;
}

.product-small.box .add-to-cart-button .button::before,
.product-small.box .add-to-cart-button .button::after {
	content: "";
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--bb-card-icon) center / contain no-repeat;
	mask: var(--bb-card-icon) center / contain no-repeat;
}

.product-small.box .add-to-cart-button .button::before {
	width: 18px;
	height: 18px;
	--bb-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h2l1.4 8h8.2L15 6H5'/%3E%3Ccircle cx='7' cy='14.5' r='1' fill='%23000'/%3E%3Ccircle cx='13' cy='14.5' r='1' fill='%23000'/%3E%3C/svg%3E");
}

.product-small.box .add-to-cart-button .button::after {
	width: 16px;
	height: 16px;
	--bb-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E");
}

.product-small.box .add-to-cart-button .button:hover,
.product-small.box .add-to-cart-button .button:focus-visible {
	background: var(--bb-color-action-primary);
	color: var(--bb-color-text-inverse);
}

.product-small.box .add-to-cart-button .button:focus-visible {
	outline: 2px solid var(--bb-color-focus-ring);
	outline-offset: 2px;
}

/* AJAX states from WooCommerce */
.product-small.box .add-to-cart-button .button.loading {
	opacity: 0.7;
}

.product-small.box .added_to_cart {
	display: block;
	margin-top: var(--bb-space-xs);
	font-size: 12px;
	text-align: center;
}

/* Hover-reveal on devices with a real pointer, from 550px (Flatsome "small" breakpoint).
   Space stays reserved (Figma Default and Hover have the same height), so the grid never jumps.
   Mobile and touch devices keep the CTA always visible. */
@media (min-width: 550px) and (hover: hover) {
	.product-small.box .add-to-cart-button {
		opacity: 0;
		transform: translateY(4px);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.product-small.box:hover .add-to-cart-button,
	.product-small.box:focus-within .add-to-cart-button {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.product-small.box,
	.product-small.box .add-to-cart-button {
		transition: none;
	}
}

/* ---------- Mobile (Figma variant Mobile, 171px card) ---------- */
@media (max-width: 549px) {
	.product-small.box {
		padding: 10px;
	}

	.product-small.box .product-title {
		font-size: 14px;
		line-height: 17px;
		min-height: 34px;
		max-height: 34px;
	}

	/* Deviation from Figma (2x2): at ~150px wide two columns truncate every value,
	   so mobile stacks the specs in one column. */
	.bb-card__specs {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bb-space-xs);
	}

	.product-small.box .price-wrapper .price {
		font-size: 17px;
		line-height: 20px;
	}

	.product-small.box .add-to-cart-button .button {
		gap: 6px;
		min-height: 40px;
		padding: 0 var(--bb-space-sm);
		font-size: 12px;
		white-space: nowrap;
	}

	.product-small.box .add-to-cart-button .button::after {
		display: none;
	}
}