/**
 * GV Product Cards — front-end card styles.
 *
 * Desktop: horizontal layout  [ media | body | score | actions ]
 * Mobile : vertical layout with the rating box and ribbons as corner overlays,
 *          closely matching the supplied mockups.
 *
 * Only loaded on pages that actually render a card (see Render::register_assets).
 *
 * @package GV_Product_Cards
 */

:root {
	--gvpc-primary: #4285f4;
	--gvpc-badge: #f7b733;
	--gvpc-discount: #ff4d4f;
	--gvpc-rating-bg: #eef4ff;
	--gvpc-text: #222222;
	--gvpc-border: #e5e7eb;
	--gvpc-shadow: 0 8px 24px rgba( 0, 0, 0, .08 );
	--gvpc-radius: 16px;
}

/* ---------------------------------------------------------------- Card shell */
.gvpc-card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 24px 0;
	padding: 28px 26px 24px;
	background: #fff;
	border: 1px solid var( --gvpc-border );
	border-radius: var( --gvpc-radius );
	box-shadow: var( --gvpc-shadow );
	color: var( --gvpc-text );
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	overflow: hidden;
}

.gvpc-card *,
.gvpc-card *::before,
.gvpc-card *::after {
	box-sizing: border-box;
}

/* ----------------------------------------------------------- Corner: rank # */
.gvpc-rank {
	position: absolute;
	top: 8px;
	left: 12px;
	z-index: 4;
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	color: var( --gvpc-text );
}

/* --------------------------------------------------------- Corner: badge ribbon */
.gvpc-badge {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	padding: 7px 26px 7px 36px;
	background: var( --gvpc-badge );
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2px;
	line-height: 1.2;
	white-space: nowrap;
	-webkit-clip-path: polygon( 0 0, 100% 0, calc( 100% - 14px ) 100%, 0 100% );
	clip-path: polygon( 0 0, 100% 0, calc( 100% - 14px ) 100%, 0 100% );
}

/* --------------------------------------------------- Corner: discount ribbon */
.gvpc-discount {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	padding: 7px 14px;
	background: var( --gvpc-discount );
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	border-bottom-left-radius: 10px;
}

.gvpc-discount::after {
	/* Small folded "tail" under the right edge for a ribbon look. */
	content: "";
	position: absolute;
	right: 0;
	bottom: -7px;
	border-width: 0 8px 7px 0;
	border-style: solid;
	border-color: transparent #c8383a transparent transparent;
}

/* --------------------------------------------------------------- Main grid */
.gvpc-card-grid {
	display: grid;
	grid-template-columns: 150px minmax( 0, 1fr ) auto 232px;
	grid-template-areas: "media body score actions";
	align-items: center;
	gap: 22px;
	margin-top: 6px;
}

/* Media ----------------------------------------------------------------- */
.gvpc-media {
	grid-area: media;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gvpc-media img {
	max-width: 100%;
	max-height: 180px;
	height: auto;
	object-fit: contain;
}

/* Body ------------------------------------------------------------------ */
.gvpc-body {
	grid-area: body;
	min-width: 0;
}

.gvpc-title {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --gvpc-text );
}

.gvpc-desc {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: #6b7280;
}

.gvpc-features {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gvpc-features li {
	position: relative;
	padding: 0 0 10px 30px;
	font-size: 15px;
	line-height: 1.45;
	color: #333;
}

.gvpc-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var( --gvpc-rating-bg );
}

.gvpc-features li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 4px;
	width: 5px;
	height: 9px;
	border: solid var( --gvpc-primary );
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

/* Score box ------------------------------------------------------------- */
.gvpc-score {
	grid-area: score;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 18px;
	min-width: 96px;
	background: var( --gvpc-rating-bg );
	border-radius: 14px;
	text-align: center;
}

.gvpc-score-num {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	color: var( --gvpc-text );
}

/* Star rating (fractional overlay) -------------------------------------- */
.gvpc-stars {
	position: relative;
	display: inline-block;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 2px;
	white-space: nowrap;
}

.gvpc-stars-empty {
	color: #d6dae1;
}

.gvpc-stars-full {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: #ffb400;
}

/* Actions --------------------------------------------------------------- */
.gvpc-actions {
	grid-area: actions;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.gvpc-bought {
	margin: 0;
	font-size: 13px;
	color: #8a9099;
}

.gvpc-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 15px 22px;
	background: var( --gvpc-primary );
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba( 66, 133, 244, .35 );
	transition: background-color .15s ease, transform .05s ease;
}

.gvpc-cta:hover,
.gvpc-cta:focus {
	background: #3367d6;
	color: #fff;
}

.gvpc-cta:active {
	transform: translateY( 1px );
}

/* Prime / deal tag clinging to the button ------------------------------- */
.gvpc-prime {
	position: absolute;
	right: -10px;
	top: 50%;
	transform: translateY( -50% ) rotate( -7deg );
	padding: 5px 9px 5px 14px;
	background: var( --gvpc-badge );
	color: #3a2d00;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
	border-radius: 4px;
	box-shadow: 0 3px 8px rgba( 0, 0, 0, .18 );
	max-width: 84px;
}

.gvpc-prime::before {
	/* The "hole" of a price tag. */
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	background: #fff;
	border-radius: 50%;
}

/* Amazon availability --------------------------------------------------- */
.gvpc-amazon {
	display: inline-flex;
	align-items: flex-end;
	gap: 5px;
	font-size: 13px;
	color: #8a9099;
}

.gvpc-amazon-logo {
	position: relative;
	padding-bottom: 9px;
	font-size: 17px;
	font-weight: 700;
	color: #232f3e;
	line-height: 1;
}

.gvpc-amazon-smile {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	color: #ff9900;
}

/* ----------------------------------------------------------- Pros & Cons */
.gvpc-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var( --gvpc-border );
}

.gvpc-proscons h4 {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
}

.gvpc-proscons ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gvpc-proscons li {
	position: relative;
	padding: 0 0 8px 26px;
	font-size: 14px;
	line-height: 1.4;
	color: #333;
}

.gvpc-pros li::before,
.gvpc-cons li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}

.gvpc-pros h4 {
	color: #1a8754;
}

.gvpc-pros li::before {
	content: "\2714"; /* check */
	color: #1a8754;
}

.gvpc-cons h4 {
	color: #d23b3b;
}

.gvpc-cons li::before {
	content: "\2715"; /* cross */
	color: #d23b3b;
}

/* --------------------------------------------------- Editor-only states */
.gvpc-card--error,
.gvpc-card--placeholder {
	padding: 18px;
	box-shadow: none;
	background: #fafbfc;
	color: #6b7280;
	font-size: 14px;
	text-align: center;
}

/* ====================================================== Mobile / vertical */
@media ( max-width: 680px ) {

	.gvpc-card {
		padding: 64px 18px 22px;
	}

	/* Rating box becomes a top-right overlay (per mockup). */
	.gvpc-score {
		position: absolute;
		top: 12px;
		right: 12px;
		z-index: 3;
		min-width: 0;
		padding: 8px 12px;
		gap: 4px;
	}

	.gvpc-score-num {
		font-size: 22px;
	}

	/* Discount ribbon drops below the rating box. */
	.gvpc-discount {
		top: 86px;
		border-radius: 8px 0 0 8px;
	}

	.gvpc-discount::after {
		display: none;
	}

	/* Single-column flow: image, body, actions. */
	.gvpc-card-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"media"
			"body"
			"actions";
		gap: 16px;
		margin-top: 0;
	}

	.gvpc-media img {
		max-height: 200px;
	}

	.gvpc-body {
		text-align: center;
	}

	.gvpc-title {
		font-size: 19px;
	}

	/* Keep the checkmark list left-aligned but centered as a block. */
	.gvpc-features {
		display: inline-block;
		text-align: left;
	}

	.gvpc-actions {
		width: 100%;
	}

	.gvpc-proscons {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* Slightly tighter mid-size tablets. */
@media ( min-width: 681px ) and ( max-width: 900px ) {
	.gvpc-card-grid {
		grid-template-columns: 120px minmax( 0, 1fr ) auto 190px;
		gap: 16px;
	}

	.gvpc-cta {
		font-size: 15px;
		padding: 13px 16px;
	}
}