/**
 * Product card: the one card used on the home page, shop, category pages
 * and Related compounds (template-parts/product-card.php).
 *
 * States
 *   card      default / hover (lift) / focus-within / out of stock
 *   links     default / hover / focus-visible (image, category, title)
 *   button    default / hover (white text) / focus-visible / pressed /
 *             loading / added / disabled; secondary buttons share them
 *   view cart default / hover / focus-visible (appears after AJAX add)
 *
 * Brand: the button hovers to Orange Dark #BE5008 so its white text passes
 * WCAG AA (4.8:1); orange text on white also uses #BE5008.
 */

.sp-product-card {
	--sp-card-pad: 1.5rem;
	--sp-card-border: #ebe7e2;
	--sp-card-border-strong: #dcd6cc;
	--sp-card-ring: 0 0 0 2px var( --sp-white, #ffffff ), 0 0 0 4px var( --sp-orange, #e8620a );

	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var( --sp-card-pad );
	background: var( --sp-white, #ffffff );
	border: 1px solid var( --sp-card-border );
	border-radius: 20px;
	box-shadow: none;
	list-style: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* WooCommerce / Kadence add their own li.product box styles; reset them. */
.sp-product-card.entry.loop-entry,
.woocommerce ul.products li.sp-product-card,
.woocommerce ul.products li.sp-product-card.entry.loop-entry {
	width: auto;
	margin: 0;
	padding: var( --sp-card-pad );
	overflow: visible;
	background: var( --sp-white, #ffffff );
	box-shadow: none;
}

/* Hover / keyboard focus inside the card */
.sp-product-card:hover,
.sp-product-card:focus-within,
.sp-product-card.entry.loop-entry:hover,
.sp-product-card.entry.loop-entry:focus-within,
.woocommerce ul.products li.sp-product-card:hover,
.woocommerce ul.products li.sp-product-card:focus-within {
	border-color: var( --sp-card-border-strong );
	box-shadow: 0 16px 36px rgba( 0, 0, 0, 0.06 );
}

.sp-product-card:hover {
	transform: translateY( -4px );
}

/* --------------------------------------------------------------------------
   Image: full bleed to the card's top and side edges, square
   -------------------------------------------------------------------------- */

.sp-product-card__image-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	margin: calc( -1 * var( --sp-card-pad ) ) calc( -1 * var( --sp-card-pad ) ) 1.25rem;
	overflow: hidden;
	background: var( --global-palette8, #f5f5f5 );
	border-radius: 19px 19px 0 0;
	text-decoration: none;
}

.sp-product-card .sp-product-card__img,
.woocommerce ul.products li.sp-product-card a img.sp-product-card__img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.sp-product-card:hover .sp-product-card__img {
	transform: scale( 1.04 );
}

.sp-product-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 1.5rem;
}

.sp-product-card.outofstock .sp-product-card__img {
	opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Badges (purity / stock top-left, sale top-right)
   -------------------------------------------------------------------------- */

.sp-product-card__badges {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	max-width: calc( 100% - 6rem );
	pointer-events: none;
}

.sp-product-card__badge {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	background: var( --sp-white, #ffffff );
	border: 1px solid #e0dad3;
	border-radius: 999px;
	color: var( --global-palette6, #6b6b6b );
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.sp-product-card__badge--stock {
	background: var( --global-palette8, #f5f5f5 );
	border-color: var( --global-palette7, #e2e2e2 );
	color: var( --global-palette13, #b82105 );
}

.sp-product-card__badge--sale {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 3;
	background: var( --sp-black, #000000 );
	border-color: var( --sp-black, #000000 );
	color: var( --sp-white, #ffffff );
}

/* --------------------------------------------------------------------------
   Body: category, title
   -------------------------------------------------------------------------- */

.sp-product-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.sp-product-card .sp-product-card__category,
.woocommerce ul.products li.sp-product-card a.sp-product-card__category {
	align-self: flex-start;
	margin-bottom: 0.375rem;
	color: var( --sp-orange-dark, #be5008 );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 4px;
	transition: color 0.15s ease;
}

.sp-product-card .sp-product-card__category:hover,
.woocommerce ul.products li.sp-product-card a.sp-product-card__category:hover {
	color: var( --sp-black, #000000 );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sp-product-card .sp-product-card__category:focus-visible,
.woocommerce ul.products li.sp-product-card a.sp-product-card__category:focus-visible {
	color: var( --sp-black, #000000 );
	outline: none;
	box-shadow: var( --sp-card-ring );
}

.sp-product-card .sp-product-card__title {
	margin: 0;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var( --sp-card-border );
	color: var( --sp-black, #000000 );
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.25;
}

.sp-product-card .sp-product-card__title a,
.woocommerce ul.products li.sp-product-card .sp-product-card__title a {
	color: inherit;
	text-decoration: none;
	border-radius: 4px;
	transition: color 0.15s ease;
}

.sp-product-card .sp-product-card__title a:hover,
.woocommerce ul.products li.sp-product-card .sp-product-card__title a:hover {
	color: var( --sp-orange-dark, #be5008 );
}

.sp-product-card .sp-product-card__title a:focus-visible,
.woocommerce ul.products li.sp-product-card .sp-product-card__title a:focus-visible {
	color: var( --sp-orange-dark, #be5008 );
	outline: none;
	box-shadow: var( --sp-card-ring );
}

/* --------------------------------------------------------------------------
   Footer: price + button
   -------------------------------------------------------------------------- */

.sp-product-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 1rem;
}

.sp-product-card .sp-product-card__price {
	flex: 1 1 auto;
	min-width: 0;
	color: var( --sp-black, #000000 );
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
}

.sp-product-card .sp-product-card__price del {
	margin-right: 0.25rem;
	color: var( --global-palette6, #6b6b6b );
	font-size: 0.9375rem;
	font-weight: 400;
	opacity: 1;
}

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

/* --------------------------------------------------------------------------
   Add to cart button
   --------------------------------------------------------------------------
   default   white pill, grey border, near-black text
   hover     Orange Dark #BE5008, WHITE text (4.8:1, passes WCAG AA)
   focus     as hover + orange focus ring (keyboard)
   pressed   darker orange #9E4207, nudges down 1px
   loading   white pill, orange spinner in place of the icon, not clickable
   added     black pill, white text, check icon in place of the cart
   disabled  grey pill, muted text, not clickable
   Secondary buttons ("Select options", "Read more") share the same states;
   they lead with an arrow icon instead of the cart.
   Scoped past WooCommerce and Kadence button styles.
   -------------------------------------------------------------------------- */

.sp-product-card {
	--sp-btn-hover: var( --sp-orange-dark, #be5008 );
	--sp-btn-pressed: #9e4207;
}

.sp-product-card a.sp-product-card__cart-btn,
.woocommerce ul.products li.sp-product-card a.button.sp-product-card__cart-btn {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.4rem;
	width: auto;
	min-height: 40px;
	margin: 0;
	padding: 0.5rem 1rem;
	background: var( --sp-white, #ffffff );
	border: 1px solid var( --sp-card-border );
	border-radius: 999px;
	box-shadow: none;
	color: var( --global-palette4, #1a1a1a );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	opacity: 1;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.sp-product-card .sp-product-card__cart-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: currentColor;
}

/* Hover */
.sp-product-card a.sp-product-card__cart-btn:hover,
.woocommerce ul.products li.sp-product-card a.button.sp-product-card__cart-btn:hover {
	background: var( --sp-btn-hover );
	border-color: var( --sp-btn-hover );
	box-shadow: none;
	color: var( --sp-white, #ffffff );
}

/* Focus (keyboard) */
.sp-product-card a.sp-product-card__cart-btn:focus-visible,
.woocommerce ul.products li.sp-product-card a.button.sp-product-card__cart-btn:focus-visible {
	background: var( --sp-btn-hover );
	border-color: var( --sp-btn-hover );
	color: var( --sp-white, #ffffff );
	outline: none;
	box-shadow: var( --sp-card-ring );
}

/* Pressed */
.sp-product-card a.sp-product-card__cart-btn:active,
.woocommerce ul.products li.sp-product-card a.button.sp-product-card__cart-btn:active {
	background: var( --sp-btn-pressed );
	border-color: var( --sp-btn-pressed );
	color: var( --sp-white, #ffffff );
	transform: translateY( 1px );
}

/* Loading: AJAX add-to-cart in progress (WooCommerce adds .loading). */
.sp-product-card a.sp-product-card__cart-btn.loading,
.woocommerce ul.products li.sp-product-card a.button.sp-product-card__cart-btn.loading {
	background: var( --sp-white, #ffffff );
	border-color: var( --sp-card-border );
	color: var( --global-palette4, #1a1a1a );
	opacity: 1;
	transform: none;
	cursor: progress;
	pointer-events: none;
}

.sp-product-card a.sp-product-card__cart-btn.loading .sp-product-card__cart-icon {
	visibility: hidden;
}

.sp-product-card a.sp-product-card__cart-btn.loading::after,
.woocommerce ul.products li.sp-product-card a.button.sp-product-card__cart-btn.loading::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 1rem;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border: 2px solid var( --sp-card-border );
	border-top-color: var( --sp-orange, #e8620a );
	border-radius: 50%;
	animation: sp-card-spin 0.7s linear infinite;
}

@keyframes sp-card-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Added: black with a check in place of the cart (hover keeps it black). */
.sp-product-card a.sp-product-card__cart-btn.added,
.sp-product-card a.sp-product-card__cart-btn.added:hover,
.woocommerce ul.products li.sp-product-card a.button.sp-product-card__cart-btn.added,
.woocommerce ul.products li.sp-product-card a.button.sp-product-card__cart-btn.added:hover {
	background: var( --sp-black, #000000 );
	border-color: var( --sp-black, #000000 );
	color: var( --sp-white, #ffffff );
}

.sp-product-card a.sp-product-card__cart-btn.added .sp-product-card__cart-icon {
	visibility: hidden;
}

.sp-product-card a.sp-product-card__cart-btn.added::after,
.woocommerce ul.products li.sp-product-card a.button.sp-product-card__cart-btn.added::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 1rem;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: currentColor;
	-webkit-mask: url( ../../images/icons/check.svg ) center / contain no-repeat;
	mask: url( ../../images/icons/check.svg ) center / contain no-repeat;
}

/* Disabled */
.sp-product-card a.sp-product-card__cart-btn.disabled,
.sp-product-card a.sp-product-card__cart-btn[aria-disabled="true"],
.woocommerce ul.products li.sp-product-card a.button.sp-product-card__cart-btn.disabled {
	background: var( --global-palette8, #f5f5f5 );
	border-color: var( --global-palette7, #e2e2e2 );
	color: var( --global-palette6, #6b6b6b );
	transform: none;
	cursor: not-allowed;
	pointer-events: none;
}

/* "View cart" link WooCommerce adds after an AJAX add. */
.sp-product-card a.added_to_cart {
	flex: 1 0 100%;
	order: 3;
	display: inline-flex;
	justify-content: flex-end;
	padding: 0;
	background: none;
	color: var( --sp-orange-dark, #be5008 );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: underline;
	text-transform: none;
	text-underline-offset: 3px;
	border-radius: 4px;
	transition: color 0.15s ease;
}

.sp-product-card a.added_to_cart:hover {
	color: var( --sp-black, #000000 );
}

.sp-product-card a.added_to_cart:focus-visible {
	color: var( --sp-black, #000000 );
	outline: none;
	box-shadow: var( --sp-card-ring );
}

/* --------------------------------------------------------------------------
   Shop list view (Kadence grid/list toggle)
   -------------------------------------------------------------------------- */

.woocommerce ul.products.products-list-view li.sp-product-card {
	flex-direction: row;
	align-items: stretch;
	gap: 1.75rem;
}

.woocommerce ul.products.products-list-view .sp-product-card__image-wrapper {
	flex: 0 0 240px;
	aspect-ratio: auto;
	min-height: 240px;
	margin: calc( -1 * var( --sp-card-pad ) ) 0 calc( -1 * var( --sp-card-pad ) ) calc( -1 * var( --sp-card-pad ) );
	border-radius: 19px 0 0 19px;
}

.woocommerce ul.products.products-list-view .sp-product-card__title {
	font-size: 1.375rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media ( max-width: 800px ) {
	.sp-product-card,
	.woocommerce ul.products li.sp-product-card {
		--sp-card-pad: 1.125rem;
	}

	.woocommerce ul.products.products-list-view li.sp-product-card {
		flex-direction: column;
		gap: 0;
	}

	.woocommerce ul.products.products-list-view .sp-product-card__image-wrapper {
		flex-basis: auto;
		aspect-ratio: 1 / 1;
		min-height: 0;
		margin: calc( -1 * var( --sp-card-pad ) ) calc( -1 * var( --sp-card-pad ) ) 1.25rem;
		border-radius: 19px 19px 0 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sp-product-card,
	.sp-product-card:hover,
	.sp-product-card .sp-product-card__img,
	.sp-product-card a.sp-product-card__cart-btn {
		transition: none;
		transform: none;
	}

	.sp-product-card a.sp-product-card__cart-btn.loading::after {
		animation-duration: 2s;
	}
}