/*
 * Round 7 · #8 — the pen prompt, and the pen's own product page.
 *
 * Loaded by inc/round7-essentials.php on exactly two kinds of page: a cartridge
 * product (the prompt) and an essential product (the body-class rules at the
 * bottom). Tokens only — no colour, radius or face that style.css :root does not
 * already define.
 */

/* --- The plate ------------------------------------------------------------
   It is a member of the buy panel, not a banner dropped into it, so it takes
   the exact recipe of the panel's other inset plate (.bundle-tiers in
   round2.css): hairline, --r-md, the raised surface, --s4 padding, --s5 block
   margin. Two rows: what and why, then price and the way there. */
.r7-pen {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--s3) var(--s4);
	margin: var(--s5) 0;
	padding: var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface-raised);
}

.r7-pen-mark {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
	border-radius: var(--r-sm);
	color: var(--accent-text);
}
.r7-pen-mark svg { display: block; width: 22px; height: 22px; }

.r7-pen-copy { min-width: 0; }

/* Two classes deep on purpose: the global h2 is clamp(27px, 3.1vw, 42px) and
   mobile.css raises it again to clamp(32px, 9vw, 38px). This is a real <h2> for
   the outline, sized as a plate heading like .bundle-head b. */
.r7-pen .r7-pen-title {
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	text-wrap: balance;
}
.r7-pen .r7-pen-text {
	max-width: none;
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.5;
}

.r7-pen-action,
.r7-pen .r7-pen-state {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: var(--s3);
	border-top: 1px solid var(--line);
}

.r7-pen-action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2) var(--s3);
}

/* WooCommerce wraps the figure in .amount > bdi, and .pd-price rules in
   style.css size those at 30px inside the buy panel's price row. This is a
   secondary figure, so it is sized here explicitly rather than inherited. */
.r7-pen-price,
.r7-pen-price .amount,
.r7-pen-price bdi,
.r7-pen-price .price-pending {
	color: var(--text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}
.r7-pen-price .price-pending { color: var(--muted); }

/* Ghost, never solid: the panel's one solid teal action is "add this cartridge".
   44px stays the floor on every width (mobile.css raises .btn to its own control
   height on phones, which is taller, and that is left alone). */
.r7-pen .r7-pen-cta {
	min-height: 44px;
	padding: 10px 18px;
	font-size: 14px;
}

/* The theme lifts every .btn on :hover, which on a touch screen fires on tap and
   sticks. Neutralise it here and hand the hover state back only to devices that
   actually have one. */
.r7-pen .r7-pen-cta:hover {
	transform: none;
	border-color: var(--line-strong);
	box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
	.r7-pen .r7-pen-cta:hover { border-color: var(--accent); }
}
.r7-pen .r7-pen-cta:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: 3px;
}

/* The quiet state: same row, same rule above it, no action. */
.r7-pen .r7-pen-state {
	display: flex;
	align-items: center;
	gap: var(--s2);
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.45;
}

/* 375px: the panel's content box is roughly 300px. The price and the button
   still share a row at that width; if a longer translation or a sale price
   (two figures) does not fit, the row wraps and the button takes the full line
   so it never becomes a cramped half-width target. */
@media (max-width: 420px) {
	.r7-pen { gap: var(--s3); }
	/* align-items stays "center" from the base rule: mobile.css makes the button
	   taller than the figure, and a stretched row parks the price at its top edge. */
	.r7-pen .r7-pen-cta { flex: 1 1 160px; }
}

@media (prefers-reduced-motion: reduce) {
	.r7-pen .r7-pen-cta { transition: none; }
}

/* --- The pen's own product page -------------------------------------------
   SAFETY NET, not the fix. woocommerce/single-product.php belongs to another
   lane and prints, on every product: a lab-report state in the buy panel, the
   #reports panel, the compare toggle, the purity statements (.pdp-trust) and the
   free-pen band, whose copy says the pen "cannot be purchased separately". On a
   pen each of those is meaningless or untrue — a device has no lab report to be
   "pending", no purity, and this is the page where it is purchased separately.
   display:none removes them from the accessibility tree as well as the screen.
   The proper fix is for the template to skip them when
   peptpro_r7_is_essential( $product ); once it does, these rules match nothing
   and can be deleted. */
.peptpro-r7-essential-pdp .buy-panel > .report-state,
.peptpro-r7-essential-pdp .report-panel,
.peptpro-r7-essential-pdp .pdp-tools .compare-toggle,
.peptpro-r7-essential-pdp .pdp-trust,
.peptpro-r7-essential-pdp .pdp-gift {
	display: none;
}