/**
 * SureCart Product Card Styling
 *
 * Server-side renders `.product-type--{slug}` on each product link via the
 * filter in /inc/surecart-product-type-class.php. CSS uses that class for
 * per-type cover treatments.
 *
 * Default cover treatment is generic — full-frame, no shadow, no book effect.
 * Book-like types get the hardcover treatment as an override.
 *
 * Note: SureCart's Cover block hides the <img> (display: none) and applies
 * the cover art as a background-image on the wrapper. So we style the
 * .wp-block-cover element itself for visual treatments.
 */

 .wp-block-surecart-product-template {
	row-gap: 60px !important;
}

/* ===========================================================================
   Base card elements
   =========================================================================== */

.wp-block-surecart-product-title {
	font-family: var(--text-font-family);
	font-size: calc(var(--text-m) * 0.9);
	font-weight: 525;
	line-height: 1.3;
	color: var(--text-color);
}

.wp-block-surecart-product-author {
	font-family: var(--text-font-family);
	font-size: calc(var(--text-s) * 1);
	font-weight: 450;
	line-height: 1.1;
	color: var(--text-primary);
}

.wp-block-surecart-product-type {
	font-size: calc(var(--text-s) * 1.1);
	color: var(--neutral-semi-light);
	font-weight: 450;
	padding-block-end: 10px;
}

.wp-block-surecart-product-group {
	gap: .5em;
}

.wp-block-surecart-product-list-price {
	font-size: calc(var(--text-s) * 1.1);
	color: var(--neutral-semi-dark);
}

.wp-block-surecart-product-scratch-price {
	font-size: calc(var(--text-s) * 1.1);
	color: var(--neutral-semi-light);
	font-weight: 450;
	text-decoration: line-through;
}

.wp-block-surecart-product-quick-view-button,
.wp-block-surecart-product-quick-view-button.wp-block-button__link {
	font-size: calc(var(--text-s) * 1.1);
	background-color: var(--white);
	color: var(--text-primary);
	font-weight: 600;
}

.wp-block-surecart-product-quick-view-button.wp-block-button__link:hover {
	background-color: var(--white);
	color: var(--text-primary);
	font-weight: 600;
}

/* ===========================================================================
   Cover frame
   ===========================================================================
   Square frame around the cover area. Provides a uniform-sized box for
   every product card regardless of cover dimensions. Visible overflow so
   that book hover shadows can extend outside. */

.wp-block-surecart-product-cover-frame {
	aspect-ratio: 1 / 1 !important;
	overflow: visible;
	border-radius: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wp-block-surecart-product-cover-frame > .wp-block-group__inner-container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ===========================================================================
   Default cover treatment (generic)
   ===========================================================================
   Fills the frame, no shadow, no book effect. Works for any product type.
   Book-like types override below. */

.wp-block-surecart-product-list .wp-block-cover {
	max-width: 100%;
	max-height: 100%;
	height: 100%;
	aspect-ratio: auto;
	margin: 0 !important;
	padding: 0;
	background-color: transparent;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: none;
	min-height: 0;
	transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

/* No border-radius on any product cover or image */
.wp-block-surecart-product-list .wp-block-cover,
.wp-block-surecart-product-list .wp-block-cover__image-background {
	border-radius: 0 !important;
}

/* Hide the cover's dim overlay */
.wp-block-surecart-product-list .wp-block-cover__background {
	display: none;
}

/* Image fills the cover wrapper, full height, auto width */
.wp-block-surecart-product-list .wp-block-cover .wp-block-cover__image-background {
	position: static;
	width: auto !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: contain;
}

/* Sale badge overlays the cover */
.wp-block-surecart-product-list .wp-block-cover .wp-block-cover__inner-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	padding: 8px;
}

.wp-block-surecart-product-list .wp-block-surecart-product-sale-badge {
	pointer-events: auto;
	margin-right: 0;
	margin-left: auto;
}

/* Hover lift — all products */
.wp-block-surecart-product-list .sc-product-item-link:hover .wp-block-cover {
	transform: translateY(-2px) scale(1.02);
}

.wp-block-surecart-cart-menu-icon-button .sc-cart-count {
	background-color: var(--primary);
    inset: -10px -10px auto auto;
    padding: 1px 5px;
    border: 1px solid var(--neutral-ultra-light);
}

/* ===========================================================================
   Book-like product overrides
   ===========================================================================
   Book, Booklet, Workbook, Hardcover, Paperback get the hardcover book
   treatment: narrower frame, 3:4 aspect, shadow, deeper hover shadow. */

.product-type--book .wp-block-cover,
.product-type--booklet .wp-block-cover,
.product-type--workbook .wp-block-cover,
.product-type--hardcover .wp-block-cover,
.product-type--paperback .wp-block-cover {
	max-width: 56%;
	max-height: none;
	height: auto;
	aspect-ratio: 3 / 4;
	margin-left: auto !important;
	margin-right: auto !important;
	box-shadow:
		inset 1px 1px 0 1px rgba(255, 255, 255, 0.1),
		inset 0 0 0 1px rgba(0, 0, 0, 0.05),
		0 2px 4px 0 rgba(0, 0, 0, 0.15),
		0 8px 20px 0 rgba(0, 0, 0, 0.1);
}

.product-type--book .wp-block-cover__image-background,
.product-type--booklet .wp-block-cover__image-background,
.product-type--workbook .wp-block-cover__image-background,
.product-type--hardcover .wp-block-cover__image-background,
.product-type--paperback .wp-block-cover__image-background {
	width: 100% !important;
	height: auto !important;
}

/* Book hover — deeper shadow (scale comes from the generic hover rule) */
.product-type--book:hover .wp-block-cover,
.product-type--booklet:hover .wp-block-cover,
.product-type--workbook:hover .wp-block-cover,
.product-type--hardcover:hover .wp-block-cover,
.product-type--paperback:hover .wp-block-cover {
	box-shadow:
		inset 1px 1px 0 1px rgba(255, 255, 255, 0.1),
		inset 0 0 0 1px rgba(0, 0, 0, 0.05),
		0 4px 8px 0 rgba(0, 0, 0, 0.15),
		0 16px 30px 0 rgba(0, 0, 0, 0.15);
}