/**
 * 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;
}

/* Keep the text column anchored to the top so the Pick Reason box and feature
   list read top-down instead of being vertically centered in a tall row. */
.gvpc-card-grid > .gvpc-body {
	align-self: center;
}

/* 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 );
}

/* Pick Reason module — compact, highlighted editorial reason for the pick. */
.gvpc-card .gvpc-pickreason {
	margin: 0 0 12px;
	padding: 8px 12px;
	background: linear-gradient( 135deg, #fff8e6 0%, #fff2cc 100% );
	border: 1px solid #ffe08a;
	border-left: 4px solid var( --gvpc-badge );
	border-radius: 10px;
	box-shadow: 0 1px 4px rgba( 247, 183, 51, .12 );
	text-align: left;          /* never inherit centering from the card body */
}

.gvpc-card .gvpc-pickreason-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 3px;           /* tight gap before the reason text */
	padding: 0;
	line-height: 1.1;
}

.gvpc-card .gvpc-pickreason-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	object-fit: contain;
	display: block;
}

.gvpc-card .gvpc-pickreason-title {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .3px;
	line-height: 1.1;
	text-transform: uppercase;
	color: #946a00;
}

.gvpc-card .gvpc-pickreason-text {
	margin: 0;                 /* kill theme paragraph margins that bloat the box */
	padding: 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: #5b4a14;
}

.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: -8px;
	top: -10px; /* lifted above the centered CTA text so the tag no longer overlaps the button label */
	transform: 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: center;
	gap: 6px;
	font-size: 13px;
	color: #8a9099;
}

/* Bundled official Amazon logo — always rendered in full, never cropped or distorted. */
.gvpc-amazon-logo {
	display: inline-block;
	width: auto;             /* width follows the intrinsic aspect ratio */
	height: 26px;            /* drives the size; aspect ratio preserved */
	max-width: 100%;
	aspect-ratio: 1080 / 382; /* matches the padded SVG viewBox so it never squashes */
	object-fit: contain;     /* guard against any inherited img cropping */
	border-radius: 0;        /* defeat any theme rounding that would clip the logo's corners */
	overflow: visible;       /* never clip the artwork */
	vertical-align: middle;
}

/* ----------------------------------------------------------- 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;
	}

	/* Pick Reason stays a tidy, compact left-aligned card, not centered text. */
	.gvpc-card .gvpc-pickreason {
		text-align: left;
		margin-top: 8px;
	}

	.gvpc-card .gvpc-pickreason-head {
		justify-content: flex-start;
	}

	/* 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;
	}
}