/**
 * Product Card Pro Styling - Premium Version
 * Modern, High-End UI for WooCommerce Catalog
 */

/* ── Container ──────────────────────────────────────────────────────── */
.pb-product-card {
	--pb-card-accent: #C5A059;
	--pb-card-pad-x: 20px;
	--pb-card-pad-y: 20px;
	--pb-card-title-size: 1.15rem;
	--pb-card-price-size: 1.4rem;
	--pb-card-align: left;
	--pb-card-btn-dir: row;

	background: #ffffff !important;
	border-radius: 16px !important;
	padding: 0 !important;
	margin-bottom: 20px !important;
	transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
	position: relative !important;
	overflow: visible !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
    border: 1px solid #f1f5f9 !important;
    text-align: var(--pb-card-align) !important;
}

.pb-product-card:hover {
	transform: translateY(-8px) !important;
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08) !important;
    border-color: #e2e8f0 !important;
}

/* ── Image Wrapper ──────────────────────────────────────────────────── */
.pb-product-image-wrap {
	position: relative !important;
	overflow: hidden !important;
	border-radius: 15px 15px 0 0 !important;
	aspect-ratio: 1/1 !important;
	background: #f8fafc !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.02) !important;
}

.pb-product-image-wrap::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	border: 1px solid rgba(0, 0, 0, 0.02) !important;
	border-radius: 15px 15px 0 0 !important;
	pointer-events: none !important;
	z-index: 2 !important;
}

.pb-product-image-wrap img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* ── Image Flip Effect ──────────────────────────────────────────────── */
.pb-card-hover-image {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	opacity: 0 !important;
	z-index: 1 !important;
	transform: scale(1.1) !important;
}

.pb-product-card:hover .pb-card-hover-image {
	opacity: 1 !important;
	transform: scale(1) !important;
}

/* ── Content Area ──────────────────────────────────────────────────── */
/* Hide old wrapper if cached */
.pb-product-content {
	display: none !important;
}

/* Add padding to the title wrapper (Astra) or direct elements below image */
.pb-product-card .astra-shop-summary-wrap,
.pb-product-card > *:not(.pb-product-image-wrap):not(.pb-badges):not(.pb-product-footer) {
	padding-left: var(--pb-card-pad-x) !important;
	padding-right: var(--pb-card-pad-x) !important;
	margin-top: var(--pb-card-pad-y) !important; /* Distance from image */
}

.pb-product-category {
	font-size: 0.75rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: #94a3b8 !important;
	margin-bottom: 8px !important;
	font-weight: 700 !important;
}

h2.woocommerce-loop-product__title,
.pb-product-card h2,
.pb-product-card .woocommerce-loop-product__title {
	font-size: var(--pb-card-title-size) !important; /* Customizable size */
	font-weight: 700 !important;
	color: #0f172a !important; /* Deep dark slate */
	margin: 0 0 10px 0 !important;
	line-height: 1.4 !important;
	padding: 0 !important;
	transition: color 0.3s ease !important;
}

.pb-product-card:hover h2.woocommerce-loop-product__title {
	color: var(--pb-card-accent) !important; /* Accent hover effect */
}

/* ── Product Footer (Price + ATC) - Fixed to Bottom ────────────────── */
.pb-product-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: var(--pb-card-btn-dir) !important; /* Controls button position */
    gap: 15px !important;
    background: transparent !important;
    z-index: 5 !important;
    margin-top: auto !important; /* Push to bottom naturally without absolute positioning */
    padding: 10px var(--pb-card-pad-x) var(--pb-card-pad-y) var(--pb-card-pad-x) !important;
}

/* Fix Astra or other themes extra margins */
.pb-product-card .astra-shop-summary-wrap {
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce ul.products li.product .pb-product-card {
    margin-bottom: 0 !important; /* The card wrapper itself handles margin if needed */
}

.pb-product-footer .price {
	font-size: var(--pb-card-price-size) !important; /* Customizable size */
	color: #0f172a !important;
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
    margin: 0 !important;
    line-height: 1 !important;
	font-weight: 800 !important; /* Bolder */
}

.pb-product-footer .price del {
	color: #94a3b8 !important;
	font-weight: 500 !important;
    font-size: 0.9rem !important;
}

.pb-product-footer .price ins {
	text-decoration: none !important;
	color: #ef4444 !important; /* Red for sale */
}

/* Compact Add to Cart Button in Footer */
.pb-product-footer .button.add_to_cart_button {
    width: 48px !important; /* Slightly larger */
    height: 48px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border-radius: 14px !important; /* More rounded */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important; /* Hide text */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border: none !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
}

.pb-product-footer .button.add_to_cart_button::before {
    content: "" !important;
    display: block !important;
    width: 22px !important; /* Larger icon */
    height: 22px !important;
    background-image: var(--pb-atc-icon-url) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: all 0.3s ease !important;
}

.pb-product-footer .button.add_to_cart_button:hover {
    background: var(--pb-card-accent) !important; /* Accent color on hover */
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2) !important;
}

/* Success State: Checkmark Animation */
.pb-product-footer .button.added {
    background: #10b981 !important; /* Green Success */
}

.pb-product-footer .button.added::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    transform: scale(1.1) !important;
}

.pb-product-footer .button.loading {
    opacity: 0.8 !important;
}

.pb-product-footer .button.loading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='6'/%3E%3Cline x1='12' y1='18' x2='12' y2='22'/%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'/%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'/%3E%3Cline x1='2' y1='12' x2='6' y2='12'/%3E%3Cline x1='18' y1='12' x2='22' y2='12'/%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'/%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'/%3E%3C/svg%3E") !important;
    animation: pbCircleRotate 1.2s linear infinite !important;
}

@keyframes pbCircleRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── WooCommerce Grid Adjustments ────────────────────────────────────── */
.woocommerce ul.products li.product {
    padding: 0 !important;
    background: transparent !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide theme defaults that might leak */
.pb-product-card .button.add_to_cart_button {
    display: none; /* Hide default below if it leaks */
}

/* ── Badges Integration ────────────────────────────────────────────── */
.pb-product-card .pb-badges {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    z-index: 10 !important;
    pointer-events: none !important;
}