/* Auction lots shown as a product loop — "My Bids" and "My Watchlist", and any
   other page where the auction plugin lists lots as WooCommerce cards.

   Scoped to `li.product.product-type-auction`, never to `li.product` at large,
   so the shop's own archives keep whatever the theme gives them. The grid is
   selected with `:has()` for the same reason: only a list that actually holds
   auction lots is touched. Where `:has()` is unsupported the cards fall back to
   the theme's float layout with their colours still corrected — degraded, not
   broken.

   WHAT WAS WRONG

   1. **The lot titles were invisible.** Same unscoped Cornerstone rule as the
      account area — `a:link { color:#fff }` for the black footer — and the
      title is a link inside the `h3`. The `h3` box was still there, so each
      card had a 37px gap where the name of the artwork should be. On a page
      whose entire job is "which lots am I watching / bidding on", the artwork's
      name was the one thing missing.
   2. **The images had rounded corners.** The theme rounds the card 4px and
      clips with `overflow:hidden`, so the top corners were taken off the
      artwork. Squared off here, deliberately, along with everything else that
      could crop a picture — see below.
   3. **Cards did not line up.** With `woocommerce-layout.css` dequeued the
      items are floats of a fixed width, so rows ran ragged and the last card in
      a row left a gap.
   4. **"Bid now" only existed on hover** — absolutely positioned 65px above the
      card header at `opacity:0`. Unreachable on a phone, and invisible to
      anyone tabbing to it. It is now a normal button in the card.

   NOTHING HERE MAY CROP THE ARTWORK. That is the standing instruction for this
   page and the reason for three separate decisions: square corners on the
   image, `object-fit: contain` rather than `cover`, and no hover transform
   inside the clipped image box. A lot's photograph is the thing being sold; the
   layout bends around it, not the other way round. */

/* --- the grid ------------------------------------------------------------ */

/* Four columns at most, on purpose. `auto-fill` kept adding a fifth and a sixth
   on a wide screen, which shrinks a painting to a thumbnail; the lots are the
   content here, so the column count is capped and the cards get the width
   instead. Explicit breakpoints rather than `minmax()` arithmetic because the
   number of columns is a design decision, not a consequence of one. */
.woocommerce ul.products:has(> li.product-type-auction) {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* Every row the same height as the tallest, so a two-line title cannot make
	   one row deeper than the next. With the square image box and the clamped
	   title below, every card in the grid ends up identical. */
	grid-auto-rows: 1fr;
	gap: 24px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1023px) {
	.woocommerce ul.products:has(> li.product-type-auction) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.woocommerce ul.products:has(> li.product-type-auction) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

/* The theme clears the old float layout with `::before`/`::after` on the list.
   Pseudo-elements of a grid container are grid ITEMS, so those two took the
   first two cells and pushed the real cards into column three — which looked
   exactly like a page that had lost its first two lots. */
.woocommerce ul.products:has(> li.product-type-auction)::before,
.woocommerce ul.products:has(> li.product-type-auction)::after {
	display: none;
}

/* The theme sizes each item as a fixed-width float with a bottom margin that
   the grid gap now provides. */
.woocommerce ul.products li.product.product-type-auction {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #e6e6e6;
	/* Squared on purpose: the theme's 4px radius plus `overflow:hidden` was
	   clipping the corners off the artwork. */
	border-radius: 0;
	background: #fff;
	overflow: hidden;
	list-style: none;
}

/* The image and the card body are not children of the `<li>` — the theme wraps
   them in `.entry-product`. So the `<li>` being a flex column buys nothing on
   its own: the wrapper sizes to its content and leaves the rest of the card
   empty beneath it, and the `margin-top: auto` further down has no flex parent
   to work against. This is the element that has to fill the row. */
.woocommerce ul.products li.product.product-type-auction .entry-product {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	margin: 0;
	padding: 0;
}

/* --- the image ----------------------------------------------------------- */

.woocommerce ul.products li.product.product-type-auction .entry-featured {
	position: relative;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	/* The theme's inset shadow on this box reads as a second frame around a
	   picture that usually has its own. */
	box-shadow: none;
	background: #fff;
}

.woocommerce ul.products li.product.product-type-auction .entry-featured a {
	display: block;
	border-radius: 0;
}

.woocommerce ul.products li.product.product-type-auction .entry-featured img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	/* `contain`, never `cover`: a lot whose photograph is not square must be
	   letterboxed, not trimmed. */
	object-fit: contain;
	border-radius: 0;
	/* Any scale inside an `overflow:hidden` box crops the edges of the picture
	   for as long as the pointer is over it. */
	transform: none;
}

/* A redundant "this is an auction" gavel, absolutely positioned against the
   card header — so on these pages, where every single item is an auction lot,
   it sits on top of the title telling nobody anything. */
.woocommerce ul.products li.product.product-type-auction .auction-bage {
	display: none;
}

/* --- the card body ------------------------------------------------------- */

/* `margin-top: auto` keeps this block against the foot of the card however tall
   the row turns out — so the title, price and button of every card sit on the
   same line across the grid instead of floating up under a short image. */
.woocommerce ul.products li.product.product-type-auction .entry-wrap {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	margin: auto 0 0;
	padding: 0;
	border-top: 1px solid #e6e6e6;
}

.woocommerce ul.products li.product.product-type-auction .entry-header {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 16px;
	text-align: left;
}

/* "Winning!" — the plugin ships it as pale green text on white, about 2:1. It
   is the most important word on the page for someone checking their bids, so
   it gets to be a badge and to be legible: #1E6B3A on #E7F4EC is 5.8:1.

   OVER THE PICTURE, NOT IN THE HEADER, and this is a layout decision rather
   than a decorative one. In the flow it added a line to the header of the one
   card that had it — and because `grid-auto-rows: 1fr` levels every card and
   `.entry-wrap` is pinned to the bottom, that single extra line opened a gap
   under the artwork on EVERY OTHER CARD ON THE PAGE. Nothing is winning yet
   (the auction opens 7 August), so this has never been seen; it would have
   appeared on the first live bid, which is the worst possible moment to
   discover it.

   The alternative was to reserve the badge's height on all 97 cards whether
   they are winning or not, which spends 26px of every card on a state almost
   none of them are in. Sitting over a corner of the picture is not cropping it
   — the whole image is still there underneath — and it puts "Winning!" where
   someone scanning their bids will actually see it. */
.woocommerce ul.products li.product.product-type-auction .winning {
	position: absolute;
	z-index: 2;
	/* Anchored to the header's OWN top edge, which is the bottom of the picture,
	   rather than to a `top` on some ancestor. The theme sets
	   `position: relative` on `.entry-header`, so that is the containing block
	   whatever `.entry-product` does — a `top: 10px` here put the badge 10px
	   inside the card body, on top of the artist's name. `bottom: 100%` cannot
	   be wrong about which element it is measuring from.

	   `top: auto` is not tidying-up. The vendor stylesheet sets a `top` on this
	   element, and an absolutely positioned box with BOTH `top` and `bottom`
	   resolved and `height: auto` has its height computed from the gap between
	   them — the badge rendered 8px tall with its text sliced off, rather than
	   the 24px its own line-height and padding ask for. */
	top: auto;
	bottom: calc(100% + 10px);
	left: 10px;
	display: inline-block;
	margin: 0;
	padding: 3px 10px;
	border-radius: 0.5em;
	background: var(--me-auction-success-tint, #E7F4EC);
	color: var(--me-auction-success, #1E6B3A);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* The artist, above the title. Printed by Auction_Listing::render_card_artist()
   at `woocommerce_shop_loop_item_title` priority 5, so it is a real child of
   `.entry-header` and needs no `order:` — it is the first thing in the header,
   the "Winning!" badge having been lifted out of the flow entirely. Grey rather
   than the title's black: the two lines are a pair, and set at the same size
   (client request, 2026-07-31 — artist up, title down) it is the colour and the
   capitals that sort them, not the scale. */
.woocommerce ul.products li.product.product-type-auction .entry-header .me-lot-artist {
	max-width: 100%;
	margin: 0;
	padding: 0;
	color: var(--me-ink, #000000);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

/* Two lines, always: reserved so a one-line title leaves the same gap a
   two-line one fills, and clamped so a runaway one cannot claim the card. Lot
   titles run from "Akeida" to "Connecting with Nature in Celebration of Tu
   Bishvat", and without this the cards in a row are all different shapes. */
.woocommerce ul.products li.product.product-type-auction .entry-header h3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	/* A third line as HEADROOM, never as layout. `min-height` reserves two, so
	   every card's header is the same height and the block below sits flush
	   under the picture; the third line exists only so that a title too long for
	   two is wrapped rather than truncated. It is deliberately never used at the
	   sizes set below — see the note on the gap.

	   THE GAP UNDER THE ART, and why the type sizes here are load-bearing.
	   `grid-auto-rows: 1fr` makes every card the same height and `.entry-wrap`
	   is pinned to the bottom of it, so ANY card whose header is shorter than
	   the tallest header on the page takes the difference as blank space
	   between the picture and the text. At 17px with 0.04em tracking, four of
	   the 97 titles ran to three lines — and those four alone gave the other 93
	   a 22px gap under the artwork. Measured on the real page: 93 cards at a
	   180px header with a 22px gap, four at 202px with none.

	   15px at 0.02em is the setting where no title needs a third line, so all
	   97 headers are 180px and every gap is 0. It is also, independently, the
	   "title a bit smaller" the client asked for. If either number is raised,
	   re-measure — the gap comes straight back. */
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	min-height: calc(2 * 1.3 * 15px);
	margin: 0;
	padding: 0;
	font-size: 14px;
	/* Client decision, 2026-07-31: upper case, and not bold. The tracking is not
	   decoration — capitals set solid read as a block, and this is the one
	   string on the card a person is actually scanning for. */
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* The repair. `a:link` is (0,1,1), so a class in front of the same pseudo-class
   takes it without `!important` or any dependence on stylesheet order. */
.woocommerce ul.products li.product.product-type-auction .entry-header h3 a:link,
.woocommerce ul.products li.product.product-type-auction .entry-header h3 a:visited {
	color: var(--me-ink, #000000);
	text-decoration: none;
}

.woocommerce ul.products li.product.product-type-auction .entry-header h3 a:hover,
.woocommerce ul.products li.product.product-type-auction .entry-header h3 a:active {
	color: var(--me-ink-hover, #6C6C6C);
	text-decoration: underline;
}

.woocommerce ul.products li.product.product-type-auction .entry-header h3 a:focus-visible {
	outline: 3px solid var(--me-pink-accessible, #8E2F63);
	outline-offset: 2px;
}

.woocommerce ul.products li.product.product-type-auction .price {
	margin: 0;
	color: var(--me-ink, #000000);
	font-size: 15px;
	line-height: 1.4;
}

.woocommerce ul.products li.product.product-type-auction .price .amount {
	color: var(--me-ink, #000000);
	font-weight: 700;
}

/* --- the call to action -------------------------------------------------- */

/* The theme parks this at `top:-65px; opacity:0` over the bottom of the image
   and fades it in on `li:hover` — so on a touch screen it does not exist, and a
   keyboard user tabs to something they cannot see. Put back in the flow at the
   foot of the card. The selector carries the extra classes it needs to outweigh
   the theme's own `[class*="woocommerce"] li.product .entry-header .button`.
   The theme's hover rule sets nothing but `opacity: 1`, which is already the
   resting state here, so it needs no answer — and MUST NOT get one: a `:hover`
   copy of this block re-declared `margin` at a higher specificity than the
   `margin-top: auto` below, so pointing at a card changed which margin won and
   nudged the button, the card, and every row beneath it down a few pixels. */
.woocommerce ul.products li.product.product-type-auction .entry-header a.button {
	position: static;
	top: auto;
	right: auto;
	left: auto;
	opacity: 1;
	display: inline-block;
	width: auto;
	min-height: 40px;
	padding: 9px 20px;
	border-radius: 0.5em;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	/* The theme paints every `.button` on the site with
	   `text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5)` — its "flat" button style,
	   from Theme Options, which has no setting for turning the shadow off. On a
	   filled pink button that reads as depth; under the black text of this
	   white secondary button it reads as a printing fault. Client decision,
	   2026-07-31. Scoped to the buttons this plugin styles: the same rule
	   without a scope would strip the shadow from the site's own buttons on
	   gallery pages ONLY, since this stylesheet does not load everywhere — a
	   worse inconsistency than the one it fixed. Site-wide belongs in the
	   theme's own CSS; see docs/site-settings.md. */
	text-shadow: none;
	box-shadow: none;
}

.woocommerce ul.products li.product.product-type-auction .entry-header a.button:link,
.woocommerce ul.products li.product.product-type-auction .entry-header a.button:visited,
.woocommerce ul.products li.product.product-type-auction .entry-header a.button:hover {
	color: #fff;
	text-decoration: none;
}

/* Pinned to the bottom so the buttons line up across a row whatever the length
   of the titles above them. */
.woocommerce ul.products li.product.product-type-auction .entry-header a.button {
	margin: auto 0 0;
}

/* A running lot's primary action follows the client's neutral gallery palette:
   black at rest, grey on hover, and no theme shadow. */
.woocommerce ul.products li.product.product-type-auction:has(.auction-price[data-status="running"]) .entry-header a.button {
	border: 1px solid var(--me-ink, #000000);
	background: var(--me-ink, #000000);
}

.woocommerce ul.products li.product.product-type-auction:has(.auction-price[data-status="running"]) .entry-header a.button:hover {
	border-color: var(--me-ink-hover, #6C6C6C);
	background: var(--me-ink-hover, #6C6C6C);
}

/* A lot that has not opened yet, or has closed, still gets a button — but its
   label is a status ("Auction not started"), not an invitation. Painting that
   in a colour that offers an action there is none of would be a lie, so those
   read as secondary. The state comes from the price block the plugin stamps
   with `data-status`; `running` above is the only one that is a call to bid. */
.woocommerce ul.products li.product.product-type-auction:has(.auction-price[data-status="future"]) .entry-header a.button,
.woocommerce ul.products li.product.product-type-auction:has(.auction-price[data-status="finished"]) .entry-header a.button {
	/* A11Y-2: #cfcfcf on white is 1.56:1, and on this white-filled "secondary"
	   button the border is the only thing marking it as a control rather than
	   plain text — WCAG 1.4.11 needs 3:1 for that boundary on its own.
	   --me-grey-light (2.71:1, see gift-certificate.css's A11Y-6 note) still
	   falls short. --me-grey (#706F6F) is already this button's text colour
	   two rules down and computes to 5.01:1 against #ffffff, so it is reused
	   for the border instead of introducing a colour used nowhere else. */
	border: 1px solid var(--me-grey, #706F6F);
	background: #fff;
}

.woocommerce ul.products li.product.product-type-auction:has(.auction-price[data-status="future"]) .entry-header a.button:link,
.woocommerce ul.products li.product.product-type-auction:has(.auction-price[data-status="future"]) .entry-header a.button:visited,
.woocommerce ul.products li.product.product-type-auction:has(.auction-price[data-status="finished"]) .entry-header a.button:link,
.woocommerce ul.products li.product.product-type-auction:has(.auction-price[data-status="finished"]) .entry-header a.button:visited {
	color: var(--me-ink, #000000);
}

.woocommerce ul.products li.product.product-type-auction:has(.auction-price[data-status="future"]) .entry-header a.button:hover,
.woocommerce ul.products li.product.product-type-auction:has(.auction-price[data-status="finished"]) .entry-header a.button:hover {
	border-color: var(--me-ink-hover, #6C6C6C);
	background: var(--me-grey-tint, #F2F2F2);
	color: var(--me-ink-hover, #6C6C6C);
}

/* --- section headings ---------------------------------------------------- */

/* The plugin prints these as raw `<h2>`, so they pick up the theme's default
   heading scale — 46px, against the ~29px a Cornerstone page title uses a few
   pixels above them on the sibling page. Brought back to the size the rest of
   the site gives a section heading. */
.wc-auctions h2 {
	margin: 0 0 20px;
	color: var(--me-ink, #000000);
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.25;
}

.wc-auctions + .wc-auctions,
.wc-auctions .woocommerce + h2 {
	margin-top: 40px;
}

/* "My Bids" prints every section whether or not it has anything in it, so a
   bidder who has not won anything yet gets a "Won auctions" heading standing
   over nothing at all, which reads as a page that failed to load. */
.wc-auctions h2:has(+ .woocommerce:empty) {
	display: none;
}

/* --- search and filters -------------------------------------------------- */

/* Built by auction-listing.js, so none of this exists without the script — and
   without the script the page is a plain paginated archive, which is why the
   pagination below has to stay legible rather than being styled as a leftover. */

.me-lot-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px 24px;
	width: 100%;
	margin: 0 0 24px;
	padding: 0;
}

.me-lot-control {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 180px;
	margin: 0;
}

/* The search is the primary control and gets the room; the two selects size to
   their content. */
.me-lot-control:first-child {
	flex: 1 1 320px;
}

.me-lot-control > span {
	display: block;
	color: var(--me-ink, #000000);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.me-lot-controls input[type="search"],
.me-lot-controls select {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	/* A11Y-2: #cfcfcf on white is 1.56:1. The lot search and price select have no
	   fill difference from the page and no underline, so this border is their
	   only visible boundary and has to clear WCAG 1.4.11's 3:1 minimum by
	   itself. --me-grey-light was checked and rejected (2.71:1, see the A11Y-6
	   note in gift-certificate.css). --me-grey (#706F6F) is already this
	   field's text colour below and computes to 5.01:1 against #ffffff. */
	border: 1px solid var(--me-grey, #706F6F);
	border-radius: 0.5em;
	background: #fff;
	color: var(--me-grey, #706F6F);
	font-size: 16px;
}

.me-lot-controls input[type="search"]:focus-visible,
.me-lot-controls select:focus-visible {
	border-color: var(--me-ink, #000000);
	outline: 2px solid var(--me-ink, #000000);
	outline-offset: 1px;
}

.me-lot-empty {
	margin: 0 0 24px;
	color: var(--me-grey, #706F6F);
}

/* --- loading more -------------------------------------------------------- */

.me-lot-loading {
	margin: 24px 0 0;
	color: var(--me-grey, #706F6F);
	font-size: 14px;
	text-align: center;
}

.me-lot-more {
	/* Carries the theme's `.button` class, so it carries the theme's button
	   text-shadow with it — see the note on the card buttons above. */
	text-shadow: none;
	display: block;
	min-height: 44px;
	margin: 24px auto 0;
	padding: 11px 26px;
	border-radius: 0.5em;
	font-size: 15px;
}

/* A11Y-9: "Show more lots" is the only way to reach the rest of the listing
   for anyone who is not scrolling with a mouse — the IntersectionObserver
   that drives infinite scroll never fires for keyboard navigation — and it
   had no :focus-visible rule of its own, so it relied on whatever outline
   the theme leaves on a plain <button>, which is exactly the default several
   Themeco skins remove. Shaped like the `h3 a:focus-visible` rule above
   rather than the `.me-lot-controls` input rule below: like that link, this
   button carries no border of its own (colour is the theme's `.button` fill,
   the same as the account-page buttons), so there is nothing to swap a
   border-color on — only the outline is available. */
.me-lot-more:focus-visible {
	outline: 3px solid var(--me-pink-accessible, #8E2F63);
	outline-offset: 2px;
}

/* Zero height: it exists to be seen by the observer, not by a person. */
.me-lot-sentinel {
	width: 100%;
	height: 1px;
	margin: 0;
}

/* `[hidden] { display: none }` is a USER AGENT rule, so any author `display` —
   the `block` on the button four rules up — silently outranks it and the
   element stays on screen with its `hidden` attribute set. That is how "Show
   more lots" survived to the end of the listing with nothing left to show, and
   it is the same trap as the pagination below and as UX-1 before it. Stated
   once here for every element this script toggles, so a `display` added to any
   of them later cannot resurrect it. Attribute plus class outranks the class
   alone, so no `!important` is needed. */
.me-lot-more[hidden],
.me-lot-loading[hidden],
.me-lot-sentinel[hidden] {
	display: none;
}

/* --- pagination ---------------------------------------------------------- */

/* The script hides this and loads the next page on scroll instead. It is still
   what a visitor without JavaScript gets, and what everyone gets back if a
   fetch fails — and every one of these links was white on white, so the fallback
   was no fallback at all. */
/* The script hides this with the `hidden` attribute, whose `display: none` comes
   from the user-agent stylesheet — and the theme sets a `display` on the
   pagination in an author stylesheet, which beats it. Without this the page
   ends up offering infinite scrolling AND page links, each contradicting the
   other about what "the end" means. */
.woocommerce nav.woocommerce-pagination[hidden] {
	display: none;
}

/* The result count goes with it: "Showing 1–12 of 97 results" is a claim about
   a page of results, and the script has just replaced pages with a listing that
   grows on scroll and shrinks on search. Same user-agent-versus-author problem —
   WooCommerce floats this paragraph, and a float carries a `display`. */
.woocommerce p.woocommerce-result-count[hidden] {
	display: none;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 32px 0 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce nav.woocommerce-pagination .page-numbers {
	display: block;
	min-width: 44px;
	min-height: 44px;
	padding: 11px 14px;
	border: 1px solid var(--me-pink, #BE5B8F);
	border-radius: 0.5em;
	background: transparent;
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

.woocommerce nav.woocommerce-pagination a.page-numbers:link,
.woocommerce nav.woocommerce-pagination a.page-numbers:visited {
	color: var(--me-ink, #000000);
	text-decoration: none;
}

.woocommerce nav.woocommerce-pagination a.page-numbers:hover {
	background: var(--me-grey-tint, #F2F2F2);
	color: var(--me-ink-hover, #6C6C6C);
}

.woocommerce nav.woocommerce-pagination .page-numbers.current {
	border-color: var(--me-pink-accessible, #8E2F63);
	background: var(--me-pink-accessible, #8E2F63);
	color: #fff;
	font-weight: 600;
}

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 479px) {
	.woocommerce ul.products:has(> li.product-type-auction) {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
		gap: 20px;
	}

	.woocommerce ul.products li.product.product-type-auction .entry-wrap {
		margin-top: 0;
	}

	/* One per row, so a title has the width to sit on one line and the reserved
	   two-line block is just dead space. */
	.woocommerce ul.products li.product.product-type-auction .entry-header h3 {
		font-size: 15px;
		min-height: 0;
	}

	.woocommerce ul.products li.product.product-type-auction .entry-header a.button {
		width: 100%;
	}
}