/* PepperScale Tools — Hot Sauce Review Card (pst-rev)
   Full-card shell per docs/design-card-specs.md: paper, 1px line, 14px radius,
   22px 24px padding, tinted shadow. Tokens per docs/design-color-tokens.md.

   Note: no overflow:hidden on the shell — the pepper chips' group tooltip has to
   be able to escape the card, same as on the profile card. The one section that
   carries its own background (the buy bar) rounds its own bottom corners. */

.pst-rev, .pst-rev * { box-sizing: border-box; }

/* ---- links ----------------------------------------------------------------
   The theme styles content links via `.entry-content a`, specificity (0,1,1),
   which beats a bare `.pst-rev-cta` at (0,1,0) — that is why the Buy button came
   out theme-blue on chili red. Every link rule below is written as
   `.pst-rev a.class`, (0,2,1), so it wins wherever the card is dropped, and each
   names :visited too or a followed link turns purple. */

.pst-rev a, .pst-rev a:visited { color: inherit; }

.pst-rev {
	background: #faf6f0;
	border: 1px solid #e3d8c6;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(42, 35, 32, .05);
	color: #2a2320;
	font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
	line-height: 1.45;
	margin: 26px 0;
}

/* Sections are separated by the shared row line, not by gaps. */
.pst-rev-sec { padding: 20px 24px; border-top: 1px solid #ece2d3; }
.pst-rev-sec:first-child { border-top: 0; padding-top: 22px; }
.pst-rev-sec:last-child { padding-bottom: 22px; }

.pst-rev-eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .07em;
	/* was #b08d4f, which measures 2.88:1 on paper and fails WCAG AA at any size.
	   #8a6d2f is the system bronze already used for series B and reads 4.53:1. */
	color: #8a6d2f;
	margin-bottom: 8px;
}

.pst-rev-note { font-size: 13.5px; color: #5b5146; }

/* ---- header -------------------------------------------------------------- */

.pst-rev-head { display: flex; gap: 22px; align-items: flex-start; }
.pst-rev-id { flex: 1 1 auto; min-width: 0; }

.pst-rev-name {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 600;
	font-size: 25px;
	line-height: 1.15;
	margin: 0;
	color: #2a2320;
}

/* Style label. Not a score — it's what kind of sauce this is, and it's the one
   descriptor that doesn't converge across a large review library. */
.pst-rev-styles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.pst-rev-style {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #7a5f26;
	background: #f1ebe1;
	border: 1px solid #e3d8c6;
	border-radius: 999px;
	padding: 4px 11px;
}

.pst-rev-summary { margin: 12px 0 0; font-size: 16.5px; }

.pst-rev-shot { flex: 0 0 110px; }
/* width:100% used to force every shot to fill the slot. Amazon product shots are
   portrait, and AAWP asks for a size that caps the LONGEST side, so a bottle
   arrives ~160px tall and under 60px wide. Filling 110px of width upscaled it to
   roughly 300px tall: soft, and far taller than the block beside it. Bound both
   axes instead and never scale past the source. */
.pst-rev-shot img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 128px;
	margin: 0 auto;
	border-radius: 10px;
	background: #fff;
}

/* ---- score block --------------------------------------------------------- */

.pst-rev-scores { display: flex; gap: 26px; align-items: center; }

.pst-rev-hero { flex: 0 0 176px; }

.pst-rev-big {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 600;
	font-size: 52px;
	line-height: 1;
	color: #b3261e;
	letter-spacing: -.01em;
}

.pst-rev-of {
	font-family: "Hanken Grotesk", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #6b5f52;
	margin-left: 2px;
}

/* A continuous 0-5 meter, not five discrete stars — the scores carry a decimal
   and stars would round it away. Same reason the component bars are bars. */
.pst-rev-meter {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: #ece2d3;
	margin: 11px 0 8px;
	overflow: hidden;
}
.pst-rev-meter-f {
	position: absolute;
	inset: 0 auto 0 0;
	background: #b3261e;
	border-radius: 999px;
}

.pst-rev-parts { flex: 1 1 auto; min-width: 0; }

.pst-rev-bar {
	display: grid;
	/* max-content sizes the label column to the widest label, so "Heat balance"
	   plus its ⓘ never wraps and the column never has to be re-tuned when a
	   component is renamed. */
	grid-template-columns: max-content 1fr 38px;
	align-items: center;
	gap: 12px;
	padding: 7px 0;
}
.pst-rev-bar + .pst-rev-bar { border-top: 1px solid #ece2d3; }

.pst-rev-bar-l { font-size: 15px; font-weight: 600; color: #2a2320; white-space: nowrap; }

/* The label carries the component definition. Without it "Opening" and "Finish"
   are two unexplained numbers, and Flavor silently means the mid-palate. */
.pst-rev-bar-l.has-tip { position: relative; cursor: help; }
.pst-rev-bar-l.has-tip:focus-visible { outline: 2px solid #8a6d2f; outline-offset: 2px; }

.pst-rev-bar-t {
	position: relative;
	display: block;
	height: 10px;
	border-radius: 999px;
	background: #ece2d3;
	overflow: hidden;
}
.pst-rev-bar-t i {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	background: #b3261e;
	border-radius: 999px;
}

.pst-rev-bar-v {
	font-size: 15.5px;
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: #2a2320;
}

.pst-rev-scale { font-size: 12.5px; color: #5b5146; margin-top: 10px; line-height: 1.5; }

/* The scale key. Without it "4.1" is a number with no scale behind it, and a
   reader cannot tell a 4.0 from a 4.5. */
.pst-rev-scale-key { position: relative; cursor: help; border-bottom: 1px dotted #c3b6a4; }
.pst-rev-scale-key:focus-visible { outline: 2px solid #8a6d2f; outline-offset: 2px; }

/* ---- collectibility ------------------------------------------------------
   Sits on the inset surface and reads as an aside, because it is deliberately
   NOT one of the three components of the eating score. */

.pst-rev-collect {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	background: #f1ebe1;
}
/* the inset panel is darker than paper, so its eyebrow needs to be too */
.pst-rev-collect .pst-rev-eyebrow { margin-bottom: 4px; color: #7a5f26; }

.pst-rev-collect-v {
	flex: 0 0 auto;
	font-family: "Fraunces", Georgia, serif;
	font-weight: 600;
	font-size: 30px;
	line-height: 1;
	color: #7a5f26;
}
.pst-rev-collect-v .pst-rev-of { font-size: 14px; }

/* ---- heat ---------------------------------------------------------------- */

.pst-rev-heatline {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.pst-rev-heatpill {
	font-size: 13.5px;
	font-weight: 600;
	border-radius: 999px;
	padding: 6px 13px;
	background: #f3e2df;
	color: #b3261e;
}

.pst-rev-shu {
	font-size: 15px;
	color: #5b5146;
	font-variant-numeric: tabular-nums;
}

.pst-rev-band { position: relative; height: 19px; }

.pst-rev-here {
	position: absolute;
	bottom: 0;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 12.5px;
	font-weight: 700;
	color: #2a2320;
	background: #f1ebe1;
	border-radius: 999px;
	padding: 2px 8px;
}
.pst-rev-here.edge-l { transform: none; left: 0 !important; }
.pst-rev-here.edge-r { transform: translateX(-100%); }

.pst-rev-track {
	position: relative;
	display: flex;
	height: 16px;
	border-radius: 8px;
	overflow: hidden;
}
.pst-rev-track i { display: block; height: 100%; }
.pst-rev-track .z1 { background: #8ab24a; }
.pst-rev-track .z2 { background: #e2a12b; }
.pst-rev-track .z3 { background: #d1592c; }
.pst-rev-track .z4 { background: #7a1f18; }

.pst-rev-marker {
	position: absolute;
	top: -2px;
	bottom: -2px;
	width: 5px;
	margin-left: -2.5px;
	border-radius: 3px;
	background: #2a2320;
	box-shadow: 0 0 0 2px #faf6f0;
}

.pst-rev-anchors { position: relative; height: 17px; margin-top: 6px; }

.pst-rev-anchor {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 12px;
	color: #5b5146;
}

/* ---- pepper chips --------------------------------------------------------
   Two targets in one chip: the name links to the pepper's profile, the group
   half opens the same four-family key the profile card and heat strip use.
   Nesting a button inside the link would be invalid, hence the split. */

.pst-rev-peppers { display: flex; flex-wrap: wrap; gap: 8px; }

.pst-rev-pep {
	display: inline-flex;
	align-items: stretch;
	border-radius: 999px;
	overflow: visible;
	font-size: 13.5px;
	font-weight: 600;
}

.pst-rev-pep-n {
	padding: 6px 12px;
	border-radius: 999px 0 0 999px;
	text-decoration: none;
}
.pst-rev-pep > .pst-rev-pep-n:only-child { border-radius: 999px; }
/* inherit the chip's group tint, not the theme's link colour */
.pst-rev a.pst-rev-pep-n,
.pst-rev a.pst-rev-pep-n:visited,
.pst-rev a.pst-rev-pep-n:hover,
.pst-rev a.pst-rev-pep-n:focus { color: inherit; }
.pst-rev a.pst-rev-pep-n:hover { text-decoration: underline; }
.pst-rev a.pst-rev-pep-n:focus-visible { outline: 2px solid #8a6d2f; outline-offset: 2px; }

.pst-rev-pep-g {
	position: relative;
	padding: 6px 12px 6px 10px;
	border-radius: 0 999px 999px 0;
	border-left: 1px solid rgba(42, 35, 32, .18);
	cursor: help;
	white-space: nowrap;
	/* no opacity here — it was thinning an already-marginal tint contrast */
	font-weight: 600;
}
.pst-rev-pep-g:focus-visible { outline: 2px solid #8a6d2f; outline-offset: 2px; }

.pst-rev-i { font-style: normal; opacity: .78; margin-left: 4px; }

.pst-rev-pep.g-A { background: #eaf0dd; color: #4f6a24; }
.pst-rev-pep.g-B { background: #f8e7dd; color: #b3491f; }
.pst-rev-pep.g-C { background: #f0e6d6; color: #8a5a2b; }
.pst-rev-pep.g-D { background: #efe4f2; color: #77477f; }
.pst-rev-pep.g-none { background: #efe7d8; color: #7a6a52; }

/* Tooltip opens UPWARD — the pepper chips sit low in the card. */
.pst-rev-tip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	margin-left: -125px;
	z-index: 30;
	width: 250px;
	background: #2a2320;
	color: #f3ead9;
	border-radius: 10px;
	padding: 12px 13px;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .13s, transform .13s;
	box-shadow: 0 8px 22px rgba(42, 35, 32, .28);
}
.pst-rev-pep-g:hover .pst-rev-tip,
.pst-rev-pep-g:focus .pst-rev-tip,
.pst-rev-pep-g:focus-within .pst-rev-tip,
.pst-rev-bar-l.has-tip:hover .pst-rev-tip,
.pst-rev-bar-l.has-tip:focus .pst-rev-tip,
.pst-rev-bar-l.has-tip:focus-within .pst-rev-tip,
.pst-rev-scale-key:hover .pst-rev-tip,
.pst-rev-scale-key:focus .pst-rev-tip,
.pst-rev-scale-key:focus-within .pst-rev-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* The bar labels sit high in the card, so their tooltips open DOWNWARD; the
   pepper chips sit low and open upward. Each opens into the space it has. */
.pst-rev-tip-down {
	bottom: auto;
	top: calc(100% + 8px);
	left: 0;
	margin-left: 0;
	transform: translateY(-4px);
}
.pst-rev-tip .w {
	display: block;
	font-style: normal;
	margin-top: 8px;
	padding-top: 7px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	color: #e6b85a;
	font-size: 12.5px;
}
.pst-rev-tip b { color: #fff; font-weight: 600; }
/* The pepper tooltip opens mid-sentence ("Aroma families sort peppers by…"), so
   its <b> stays inline. The component tooltips lead with a heading. */
.pst-rev-tip b.h { display: block; margin-bottom: 5px; }
.pst-rev-tip .tl { display: block; margin-top: 5px; color: #d8cbb6; }
.pst-rev-tip .tl.cur { color: #fff; font-weight: 600; }
.pst-rev-tip .tl .k { display: inline-block; width: 15px; font-weight: 600; color: #e6b85a; }

/* The scale key needs room for a numeric column and a sentence per row. */
/* Hanging indent so a wrapped meaning lines up under itself rather than under
   its number. The three values must agree: the key column width equals the
   padding, and the negative indent pulls the first line back by the same amount.
   44px is set by "≤2.5", the widest key. */
.pst-rev-tip-wide { width: 292px; }
.pst-rev-tip-wide .tl { margin-top: 6px; padding-left: 48px; text-indent: -48px; }
.pst-rev-tip-wide .tl .k { width: 48px; text-indent: 0; font-variant-numeric: tabular-nums; }
.pst-rev-tip-wide .tl.cur .k { color: #fff; }
.pst-rev-tip .tl em { display: block; font-style: normal; opacity: .6; margin-left: 15px; }

/* ---- buy bar -------------------------------------------------------------
   The one section that leaves the paper. White ground + a solid chili button so
   the commerce action reads as the primary action on the card rather than as
   another tool link. */

.pst-rev-buy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	background: #ffffff;
	border-top: 1px solid #e3d8c6;
	border-radius: 0 0 13px 13px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.pst-rev-pricewrap { display: flex; flex-direction: column; gap: 1px; }
.pst-rev-buy .pst-rev-eyebrow { margin-bottom: 3px; }

.pst-rev-price {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.05;
	color: #2a2320;
}
/* AAWP wraps its price output in its own spans; neutralise them. */
.pst-rev-price .aawp-product__price,
.pst-rev-price span { font: inherit; color: inherit; }

.pst-rev-direct { font-size: 16px; font-weight: 500; color: #2a2320; }

.pst-rev-updated { font-size: 12.5px; color: #5b5146; margin-top: 3px; }

/* Affiliate disclosure. flex-basis 100% drops it onto its own row beneath both
   columns, which is where AAWP puts its own, so a review card and a Stock Up box
   on the same page carry the notice in the same place. Only rendered when there
   is an affiliate link to disclose. 12px on #ffffff at #5b5146 is 7.9:1. */
.pst-rev-disc {
	flex: 1 0 100%;
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #5b5146;
}

.pst-rev-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.pst-rev a.pst-rev-cta,
.pst-rev a.pst-rev-cta:visited,
.pst-rev a.pst-rev-cta:hover,
.pst-rev a.pst-rev-cta:focus,
.pst-rev a.pst-rev-cta:active { color: #fff; text-decoration: none; }

.pst-rev-cta {
	display: inline-block;
	text-decoration: none;
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: .01em;
	color: #fff;
	background: #b3261e;
	border: 0;
	border-radius: 999px;
	padding: 14px 28px;
	box-shadow: 0 2px 6px rgba(179, 38, 30, .28);
	transition: background .14s, box-shadow .14s, transform .14s;
}
.pst-rev-cta:hover {
	background: #8a1c16;
	box-shadow: 0 4px 12px rgba(179, 38, 30, .34);
	transform: translateY(-1px);
}
.pst-rev-cta:focus-visible { outline: 2px solid #2a2320; outline-offset: 3px; }

/* Secondary, only when a sauce is on Amazon AND has a maker page. */
.pst-rev-cta2 { font-size: 15px; font-weight: 600; text-underline-offset: 3px; }
.pst-rev a.pst-rev-cta2,
.pst-rev a.pst-rev-cta2:visited { color: #8a1c16; text-decoration: underline; }
.pst-rev a.pst-rev-cta2:hover { color: #b3261e; }

@media (prefers-reduced-motion: reduce) {
	.pst-rev-cta, .pst-rev-tip { transition: none; }
	.pst-rev-cta:hover { transform: none; }
}

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

@media (max-width: 640px) {
	.pst-rev-sec { padding: 17px 18px; }
	.pst-rev-head { gap: 16px; }
	.pst-rev-shot { flex-basis: 84px; }
	.pst-rev-shot img { max-height: 98px; }
	.pst-rev-name { font-size: 21px; }
	.pst-rev-scores { flex-direction: column; align-items: stretch; gap: 16px; }
	.pst-rev-hero { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
	.pst-rev-hero .pst-rev-eyebrow { flex: 1 0 100%; margin-bottom: 0; }
	.pst-rev-big { font-size: 42px; }
	.pst-rev-meter { flex: 1 1 120px; margin: 0; }
	.pst-rev-hero .pst-rev-note { flex: 1 0 100%; }
	.pst-rev-bar { grid-template-columns: max-content 1fr 36px; gap: 9px; }
	.pst-rev-bar-l { font-size: 14px; }
	.pst-rev-bar-v { font-size: 14.5px; }
	.pst-rev-summary { font-size: 16px; }
	.pst-rev-price { font-size: 28px; }

	/* Seven anchors collide below ~500px of track. Thin to four that still
	   span the range: Bell, Jalapeño, Habanero, Reaper. */
	.pst-rev-anchor { font-size: 10px; }
	.pst-rev-anchor:nth-child(2),
	.pst-rev-anchor:nth-child(4),
	.pst-rev-anchor:nth-child(5) { display: none; }

	/* A 250px tooltip can't be centred on a chip near either edge. */
	.pst-rev-tip { left: 0; margin-left: 0; width: min(250px, 78vw); }

	.pst-rev-buy { padding-top: 16px; padding-bottom: 16px; }
	.pst-rev-actions { width: 100%; }
	.pst-rev-cta { flex: 1 1 auto; text-align: center; }
	.pst-rev-price { font-size: 26px; }
}