/*------------------------------------------------------------------------
 Theme Name:    Eprom PCE Child
 Description:   Child theme for Platinum Cult Edition. Holds all site-specific
                changes so the Eprom parent theme stays untouched.
 Template:      eprom_1_5_5
 Version:       1.0.0
 Author:        Digidreams
 ------------------------------------------------------------------------*/


/* ----------------------------------------------------------------------
	Inherited from Eprom 1.5.5 style.css

	The framework enqueues the stylesheet via get_bloginfo('stylesheet_url'),
	which resolves to THIS file once the child theme is active, so the
	parent style.css is no longer loaded. Its rules are repeated here.
/* ---------------------------------------------------------------------- */

/* Captions */
.wp-caption {
	max-width: 100%;
	padding: 4px;
}
.wp-caption .wp-caption-text, .gallery-caption, .entry-caption {
	font-style: italic;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
}

/* Sticky post */
.sticky .featured-post { font-size: 14px; }


/* ----------------------------------------------------------------------
	Footer

	All footer styling lives in site-chrome.css, which is enqueued after
	this file. Two stylesheets setting the same footer colours produced a
	three-tone footer on 2026-08-01 - keep it in one place.
/* ---------------------------------------------------------------------- */


/* ----------------------------------------------------------------------
	Link colour

	The theme's accent #fa4c29 measures 2.74:1 against the product grid
	background and 3.43:1 on white - both below the 4.5:1 WCAG AA asks of
	body text, which the BFSG has made a compliance question for German
	shops since June 2025.

	#b32f13 is the same hue, darkened until it clears 4.5:1 on every
	background the site actually uses: 6.31:1 on #fff, 5.34:1 on #eee,
	4.96:1 on the #e6e6e6 behind the product grid. (A lighter #c23517 was
	the obvious first choice but lands at 4.39:1 on that last one.)

	Deliberately not changed:
	- Buttons keep the bright accent. Their text is white on an orange
	  fill, where the 3:1 rule for graphical objects applies, not 4.5:1.
	- Footer links keep their own greys on #1a1a1a, and #fa4c29 stays as
	  the footer hover: on that dark ground it measures 4.97:1.
/* ---------------------------------------------------------------------- */

a,
a > * {
	color: #b32f13;
}


/* ----------------------------------------------------------------------
	Shop listing grid

	The parent theme lays the product loop out with floats and fixed
	percentage widths (22.05%, or 48% below 768px). Floated cells have no
	concept of a row, so cells of unequal height snag on each other: on
	2026-08-01 the twelve products on page 1 measured between 572px and
	841px tall, which is what produced the holes and offset rows.

	A grid gives real rows. Cell heights equalise per row, the column count
	follows the available width instead of fixed breakpoints, and
	minmax(0, 1fr) makes it impossible for a cell to exceed its track.
/* ---------------------------------------------------------------------- */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 28px 18px;
	width: auto;
	margin: 0 0 13px;
}

/* Below the theme's own breakpoint the container is only 300px wide, where
   auto-fill would collapse to a single column. Two fixed columns keep the
   phone layout at the density it had before. */
@media only screen and (max-width: 768px) {

	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 12px;
	}
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	min-width: 0;
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
}

/* The loop link wraps cover, title and price and is inline in the parent. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link {
	display: block;
}

/* Fixed cover area. Covers come in two ratios — 1:1 for CDs, 3:4 for
   Mediabooks and Blu-rays — so without this every cell starts at a
   different height. Contained rather than cropped: cutting into cover
   artwork is not acceptable on a collector's shop. */
.woocommerce ul.products li.product .thumb-icon,
.woocommerce-page ul.products li.product .thumb-icon {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 4;
	margin-bottom: 10px;
	background: #e6e4e2;
}

.woocommerce ul.products li.product .thumb-icon img,
.woocommerce-page ul.products li.product .thumb-icon img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	margin: 0;
	object-fit: contain;
}

/* Keep the theme's hover overlay covering the whole cover area. */
.woocommerce ul.products li.product .thumb-icon > .icon,
.woocommerce-page ul.products li.product .thumb-icon > .icon {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* The parent sets loop titles at 24px/33.6px. That was tolerable while
   Cufon rendered them to canvas; as real text in a grid cell it produced
   235px-tall titles. Two clamped lines keep rows calm — the full title is
   on the product page. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.35;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	margin: 0 0 6px;
}

/* Germanized's MwSt., Versandkosten and Lieferzeit lines are mandatory
   under PAngV. Tightened, never removed. */
.woocommerce ul.products li.product .wc-gzd-additional-info,
.woocommerce-page ul.products li.product .wc-gzd-additional-info {
	margin: 0 0 2px;
}

/* Edition size, lifted out of the clamped title onto the cover.
   Positioned against li.product, whose top edge is the top of the cover. */
.woocommerce ul.products li.product .pce-limited,
.woocommerce-page ul.products li.product .pce-limited {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: #d03f22;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	padding: 5px 7px;
}

/* Stock on hand reads green, dated (not yet released) amber. Both sit at
   roughly 4.6:1 on white. */
.woocommerce ul.products li.product .delivery-time-inner,
.woocommerce-page ul.products li.product .delivery-time-inner {
	color: #2f7d54;
	font-weight: 600;
}

.woocommerce ul.products li.product .delivery-time-inner.pce-preorder,
.woocommerce-page ul.products li.product .delivery-time-inner.pce-preorder {
	color: #9a6510;
}

/* margin-top:auto drops the button to the bottom of the cell, so buttons
   line up across a row. border-box plus full width means it can no longer
   overflow its cell the way "In den Warenkorb" did at 163px in 144px. */
.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product a.button {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin-top: auto;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 10px;
	text-align: center;
	white-space: normal;
}