/**
 * Ex-rental clearance listing.
 *
 * Its own sheet rather than part of mt-public.css, because that one depends on
 * the flatpickr date-picker styles and the clearance page has no dates on it.
 * No reason to ship a calendar to a page selling second-hand shower stools.
 *
 * Deliberately says almost nothing. The card layout — columns, gutters, text
 * alignment, the button — belongs to the site's own stylesheet, and a plugin
 * that lays out the grid as well only gets to fight it. An earlier version set
 * `display: grid` with a `gap`, and although the site's `display: flex` won on
 * load order, `gap` applies to flexbox too and nothing was there to override
 * it: cards sized at a third each could no longer fit three to a row.
 *
 * So this styles the thumbnail, which is the one element the site's CSS has
 * never had to think about, and leaves the rest alone.
 */

.mt-ame-hire-ex-rental-thumb {
	display: block;
	margin-bottom: 15px;
}

.mt-ame-hire-ex-rental-thumb img {
	display: block;
	width: 100%;
	height: auto;
}

/* Pins the button to the bottom of the card so a two-line product name does
   not push its button out of line with the ones beside it. Only bites inside
   a flex column, which is what the card already is. */
.mt-ame-hire-ex-rental-form {
	margin-top: auto;
}

/* The ex-rental offer on a product page.
 *
 * Deliberately the same card as Hire and Purchase — same padding, same border,
 * same radius, same heading — because it is a third way to buy the same
 * product and anything quieter reads as a footnote. The border colour is left
 * to whatever the site sets on the other two, so all three stay in step. */

.mt-ame-hire-ex-rental-offer {
	margin-top: 1.25em;
	padding: 1.25em;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
}

.mt-ame-hire-ex-rental-offer h3 {
	margin-top: 0;
}

.mt-ame-hire-ex-rental-offer p {
	margin: 0 0 1em;
}

/* Matches the site's primary action: the green it uses on add-to-cart. No
   !important, so a theme that wants the button its own way still wins. */
.mt-ame-hire-ex-rental-link {
	display: inline-block;
	padding: 12px 24px;
	background: #036056;
	border: 1px solid #036056;
	border-radius: 4px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	min-height: 46px;
	line-height: 22px;
}

.mt-ame-hire-ex-rental-link:hover,
.mt-ame-hire-ex-rental-link:focus {
	background: #404040;
	border-color: #404040;
	color: #fff;
}

/* Anchored cards sit under a sticky header on some themes; give the browser
   somewhere to stop that is not the very top of the card. */
.mt-ame-hire-ex-rental-item[id] {
	scroll-margin-top: 24px;
}