/**
 * Printcart Photobook — shopper-facing cart / checkout / order read-out.
 *
 * Deliberately unopinionated: it borrows the theme's own colours through
 * currentColor and transparency instead of imposing a palette, so the read-out
 * sits inside any storefront without fighting it. Every rule is scoped to a
 * .pcpb-* class, so nothing here can leak onto theme or WooCommerce markup.
 */

/* -------------------------------------------------------------------------
 * Cart line: cover tile
 * ---------------------------------------------------------------------- */

.pcpb-cart-cover {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
}

.pcpb-cart-cover img {
	display: block;
	width: 100%;
	height: auto;
}

.pcpb-cart-cover--ready {
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.18 );
}

/* -------------------------------------------------------------------------
 * Cart line: "Edit design" link
 * ---------------------------------------------------------------------- */

.pcpb-cart-edit {
	display: block;
	margin-top: 4px;
	font-size: 0.85em;
	line-height: 1.4;
}

.pcpb-cart-edit a {
	text-decoration: underline;
	opacity: 0.85;
}

.pcpb-cart-edit a:hover,
.pcpb-cart-edit a:focus {
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Block cart / block checkout: the same link, delivered as one more item-data
 * row (PCPB_Blocks). It sits inside WooCommerce's own product-details list, so
 * it only needs to read as a link rather than as another value.
 * ---------------------------------------------------------------------- */

.pcpb-cart-edit-link {
	text-decoration: underline;
	opacity: 0.85;
}

.pcpb-cart-edit-link:hover,
.pcpb-cart-edit-link:focus {
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Order received / My account read-out
 * ---------------------------------------------------------------------- */

.pcpb-order-summary {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 8px;
	font-size: 0.9em;
	line-height: 1.5;
}

.pcpb-order-cover {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 4px;
	background: rgba( 0, 0, 0, 0.03 );
}

.pcpb-order-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * "Cover" — the placeholder inside the tile when there is no cover image yet.
 * It is real, un-hidden text, so it owes 4.5:1 at this size.
 *
 * Borrowing the theme's text colour and then thinning it is what makes that
 * hard: the ratio that survives depends entirely on a colour this file does not
 * choose. Measured against its actual backdrop (the tile's rgba(0,0,0,.03) over
 * white, i.e. #f7f7f7), the old 0.55/10px computed to 3.18:1 on a #333 theme and
 * 2.24:1 on a #666 one — the worst text in the plugin. At 0.9/11px the same two
 * come out at 8.75:1 and 4.34:1. 0.75 was not enough: it still left #666 at
 * 3.22:1, and #666 is an ordinary WooCommerce body colour, not an edge case.
 * Uppercase + letter-spacing already carry the "this is a placeholder" reading,
 * so the opacity does not have to.
 */
.pcpb-order-cover-glyph {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.9;
}

.pcpb-order-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcpb-order-rows li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The row label ("Pages", "Size"). Same problem, same arithmetic: on white,
 * 0.7 computed to 4.94:1 against a #333 theme but only 3.04:1 against a #666
 * one, and 0.8 would still have left that second case at 3.71:1. 0.9 gives
 * 9.23:1 and 4.59:1 respectively.
 *
 * The label/value hierarchy does not depend on this in the first place — the
 * value carries font-weight 600 — so the opacity is a hint, not the mechanism,
 * and can afford to be gentle. Note that no fixed value can guarantee AA here:
 * a theme whose own body text is already near the floor (#777 on white is
 * 4.48:1 at full strength) fails whatever we multiply it by.
 */
.pcpb-order-label {
	opacity: 0.9;
}

.pcpb-order-label::after {
	content: ": ";
}

.pcpb-order-value {
	font-weight: 600;
}

@media screen and ( max-width: 480px ) {

	.pcpb-order-cover {
		width: 44px;
		height: 44px;
	}
}