/*
 * Product range listing (Horse Trailers / Small Horseboxes / Large Horseboxes): starter styles.
 * Scoped to .pr-page and prefixed pr- so it never touches Current Stock (tl-) or the product page (pp-).
 * Fonts and heading fonts are inherited from the theme. Colours are estimates from screenshots: swap for the theme's exact values.
 */

.pr-page {
	--pr-navy: #1f2247;
	--pr-gold: #c2a97f;
	--pr-sand: #e3d9c5;
	--pr-text: #4a4a4a;
	--pr-on-navy: #ffffff;
	--pr-header-h: 100px; /* height of the site header that overlays the top of the banner: match it to your header */
	--pr-overlap: 30px;   /* how far the navy box overlaps the bottom of the image */
	--pr-arrow: 50px;     /* size of the gold arrow square */
	color: var(--pr-text);
}

.pr-page .pr-wrap {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}
.pr-page img { display: block; max-width: 100%; height: auto; }

/* Banner + breadcrumb */
.pr-banner {
	background: var(--pr-navy);
	color: var(--pr-on-navy);
	padding: calc(var(--pr-header-h) + 50px) 0 40px;
}
.pr-title {
	margin: 0 0 20px;
	padding-bottom: 20px;
	color: var(--pr-on-navy);
	font-size: 2.75rem;
	line-height: 1.15;
	border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.pr-breadcrumb { font-size: 13px; color: var(--pr-on-navy); }
.pr-breadcrumb a { color: var(--pr-on-navy); text-decoration: none; }
.pr-breadcrumb a:hover { text-decoration: underline; }
.pr-breadcrumb .pr-sep { margin: 0 8px; opacity: .6; }
.pr-breadcrumb .pr-current { color: var(--pr-gold); }

/* Optional intro */
.pr-intro { padding-top: 50px; max-width: 900px; text-align: center; }

/* Grid */
.pr-listing { padding-top: 70px; padding-bottom: 90px; }
.pr-grid {
	display: grid;
	grid-template-columns: repeat(var(--pr-cols, 3), minmax(0, 1fr));
	gap: 70px 40px;
}

/* Card: image on top, navy box overlapping its bottom-left, gold arrow square bottom-right */
.pr-card { position: relative; display: flex; flex-direction: column; }
.pr-card-media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: transparent;
}
.pr-page .pr-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pr-card:hover .pr-card-media img { transform: scale(1.03); }
.pr-noimg { display: block; width: 100%; height: 100%; background: var(--pr-sand); }

.pr-card-body {
	position: relative;
	z-index: 1;
	width: calc(100% - var(--pr-arrow));
	box-sizing: border-box;
	margin-top: calc(var(--pr-overlap) * -1);
	padding: 24px 28px 28px;
	background: var(--pr-navy);
	color: var(--pr-on-navy);
}
.pr-card-body p { margin: 0; }
.pr-card-price {
	padding-bottom: 14px;
	margin-bottom: 14px !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pr-gold);
	border-bottom: 1px solid var(--pr-gold);
}
.pr-card-title { margin: 0; font-size: 1.7rem; line-height: 1.2; }
.pr-card-title a { color: var(--pr-on-navy); text-decoration: none; }
/* whole card clickable */
.pr-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.pr-card-dims { margin-top: 10px !important; font-size: 13px; letter-spacing: .04em; color: rgba(255, 255, 255, .7); }

.pr-card-arrow {
	position: absolute;
	top: var(--pr-overlap);
	left: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pr-arrow);
	height: 47px;
	font-size: 22px;
	line-height: 1;
	color: var(--pr-on-navy);
	background: var(--pr-gold);
	transition: background .2s;
}
.pr-card:hover .pr-card-arrow { background: var(--pr-navy); }
.pr-card:focus-within { outline: 2px solid var(--pr-gold); outline-offset: 4px; }

.pr-empty { padding: 60px 20px; text-align: center; background: var(--pr-sand); }

/* Tablet and mobile */
@media (max-width: 1200px) {
	.pr-page { --pr-header-h: 150px; } /* the header wraps onto two rows at this width */
}
@media (max-width: 960px) {
	.pr-page { --pr-header-h: 80px; }
	.pr-banner { padding: calc(var(--pr-header-h) + 30px) 0 30px; }
	.pr-title { font-size: 2rem; }
	.pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px 24px; }
	.pr-listing { padding-top: 50px; }
}
@media (max-width: 600px) {
	.pr-grid { grid-template-columns: 1fr; }
	.pr-card-title { font-size: 1.45rem; }
}

/* [product_cards] shortcode embedded in another page (e.g. the homepage) */
.pr-embed { padding: 0; }
.pr-embed .pr-card-title { margin: 0; }