/* ===========================================================================
 * Rozhika Link Cards — the one and only stylesheet for .rzk-lc
 * ---------------------------------------------------------------------------
 * Everything in this file is scoped under the .rzk-lc class prefix, which no
 * other stylesheet on this site mentions. That is deliberate: it means these
 * rules never have to out-specify anybody and nobody has to out-specify them.
 * There is no !important in this file and there is no second file correcting
 * this one.
 *
 * Host pages tune the cards by SETTING CUSTOM PROPERTIES, not by overriding
 * declarations — see the "context hooks" block at the bottom. Re-declaring a
 * variable in a more specific scope is how CSS is designed to be themed; it
 * does not create a specificity conflict because the cascade only ever
 * resolves one value per scope.
 *
 * Sizing is fluid (clamp()) in the same idiom the Q&A and widget stylesheets
 * already use, so a card is proportionate on a 320 px phone and on a 2560 px
 * desktop without a single width media query.
 * =========================================================================== */

.rzk-lc {
	/* ---- tunable surface ------------------------------------------------ */
	--rzk-lc-accent: #7c3aed;
	/* The accent is for DECORATION — the icon tile, the chevron, the border. It
	   only has to clear 3:1 as a UI component. Text has to clear 4.5:1, and the
	   brand purple does not: #8b5cf6 on white measures 4.23:1, so the chip label
	   and the price were both failing AA while looking perfectly fine. Hence a
	   second, darker variable used ONLY for text. Each context below sets both. */
	--rzk-lc-ink: #6d28d9;
	--rzk-lc-accent-soft: rgba(124, 58, 237, 0.09);
	--rzk-lc-accent-line: rgba(124, 58, 237, 0.22);
	--rzk-lc-bg: #fff;
	/* The block card's fill is OPAQUE and flat.
	   It used to be a translucent purple tint under a translucent-white gloss
	   gradient. Two problems: Dark Reader rewrites background COLOURS but
	   leaves a background-image gradient alone, so in dark mode the white gloss
	   survived as a pale band across the card; and a translucent fill made the
	   card's real contrast depend on whatever panel it happened to sit on. One
	   flat colour is cleaner in light mode, trivial for Dark Reader to invert,
	   and gives contrast we can actually predict. */
	--rzk-lc-fill: #f9f7ff;
	--rzk-lc-fg: #1f2937;
	/* #6b7280 measured 4.83:1 on white — over AA, but with almost no margin, and
	   the subtitle is the smallest text on the card. This is 5.7:1. */
	--rzk-lc-fg-dim: #58616f;
	--rzk-lc-radius: 14px;
	--rzk-lc-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px -6px rgba(16, 24, 40, 0.12);
	--rzk-lc-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 12px 26px -8px rgba(124, 58, 237, 0.28);

	/* ---- fluid metrics -------------------------------------------------- */
	--rzk-lc-pad-y: clamp(9px, 8px + 0.35vw, 13px);
	--rzk-lc-pad-x: clamp(11px, 9px + 0.5vw, 16px);
	--rzk-lc-gap: clamp(8px, 7px + 0.3vw, 12px);
	--rzk-lc-ico: clamp(30px, 26px + 1.1vw, 40px);
	--rzk-lc-fs-title: clamp(12.5px, 11.7px + 0.26vw, 14.5px);
	--rzk-lc-fs-meta: clamp(10.5px, 9.9px + 0.19vw, 12px);

	/* The chevron is drawn pointing left ("<"). On this right-to-left site that
	   already aims at the end of the line, which is where the card's affordance
	   sits, so it is NOT mirrored by default. A left-to-right document is the
	   case that needs the mirror. */
	--rzk-lc-flip: 1;

	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
	color: var(--rzk-lc-fg);
	font-family: inherit;
	text-decoration: none;
}

.rzk-lc *,
.rzk-lc *::before,
.rzk-lc *::after {
	box-sizing: border-box;
}

[dir="ltr"] .rzk-lc {
	--rzk-lc-flip: -1;
}

/* ---------------------------------------------------------------------------
 * The block card: a URL that the author left alone on its own line. They meant
 * it as "go here", so it is presented as something you press.
 * ------------------------------------------------------------------------- */

.rzk-lc--block {
	display: flex;
	align-items: center;
	gap: var(--rzk-lc-gap);
	width: 100%;
	/* A card that stretches the whole width of a desktop article reads as a
	   banner, not as a link. Every unfurl-style card in the wild is capped;
	   this stops at a comfortable reading measure and still fills a narrow
	   chat bubble or a phone screen completely. */
	max-width: min(100%, 27rem);
	margin-block: clamp(7px, 6px + 0.3vw, 11px);
	padding: var(--rzk-lc-pad-y) var(--rzk-lc-pad-x);
	border: 1px solid var(--rzk-lc-accent-line);
	border-radius: var(--rzk-lc-radius);
	background-color: var(--rzk-lc-fill);
	background-image: none;
	box-shadow: var(--rzk-lc-shadow);
	text-align: start;
	transition: box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
		border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.rzk-lc--block:hover,
.rzk-lc--block:focus-visible {
	border-color: var(--rzk-lc-accent);
	box-shadow: var(--rzk-lc-shadow-hover);
	transform: translateY(-1px);
}

.rzk-lc--block:active {
	transform: translateY(0) scale(0.995);
}

/* ---- icon tile ---------------------------------------------------------- */

.rzk-lc__ico {
	flex: 0 0 auto;
	display: block;
	width: var(--rzk-lc-ico);
	height: var(--rzk-lc-ico);
	border-radius: calc(var(--rzk-lc-radius) - 5px);
	background: var(--rzk-lc-accent);
	/* The glyph itself is a mask, so one rule colours every icon and the markup
	   stays free of inline SVG. */
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 58%;
	mask-size: 58%;
}

.rzk-lc--chip .rzk-lc__ico {
	width: 1.05em;
	height: 1.05em;
	border-radius: 3px;
	-webkit-mask-size: 100%;
	mask-size: 100%;
	background: var(--rzk-lc-ink);
}

/* ---- product thumbnail -------------------------------------------------- */

.rzk-lc__thumb {
	flex: 0 0 auto;
	display: block;
	width: calc(var(--rzk-lc-ico) * 1.22);
	height: calc(var(--rzk-lc-ico) * 1.22);
	overflow: hidden;
	border: 1px solid var(--rzk-lc-accent-line);
	border-radius: calc(var(--rzk-lc-radius) - 5px);
	background: #f4f4f5;
}

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

/* ---- text column -------------------------------------------------------- */

.rzk-lc__body {
	flex: 1 1 auto;
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.rzk-lc__title {
	display: block;
	overflow: hidden;
	color: var(--rzk-lc-fg);
	font-size: var(--rzk-lc-fs-title);
	font-weight: 700;
	line-height: 1.45;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rzk-lc__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	color: var(--rzk-lc-fg-dim);
	font-size: var(--rzk-lc-fs-meta);
	font-weight: 500;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The price is plain text in our own elements (see the note in
   RZK_Link_Cards::describe_post), so nothing in the theme can recolour it. */
.rzk-lc__price {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	color: var(--rzk-lc-ink);
	font-weight: 700;
}

.rzk-lc--on-accent .rzk-lc__price {
	color: #fff;
}

.rzk-lc__was {
	color: var(--rzk-lc-fg-dim);
	font-weight: 500;
	text-decoration: line-through;
}

.rzk-lc__now {
	color: inherit;
	font-weight: 700;
}

.rzk-lc__stock {
	flex: 0 0 auto;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 0.92em;
	font-weight: 700;
	line-height: 1.5;
}

.rzk-lc__stock--in {
	background: rgba(16, 185, 129, 0.12);
	color: #047857;
}

.rzk-lc__stock--out {
	background: rgba(239, 68, 68, 0.12);
	color: #b91c1c;
}

/* ---- the affordance ----------------------------------------------------- */

.rzk-lc__go {
	flex: 0 0 auto;
	display: block;
	width: clamp(16px, 14px + 0.5vw, 20px);
	height: clamp(16px, 14px + 0.5vw, 20px);
	background: var(--rzk-lc-accent);
	opacity: 0.55;
	transform: scaleX(var(--rzk-lc-flip));
	transition: opacity 0.22s ease, translate 0.22s ease;
	-webkit-mask: var(--rzk-lc-chevron) center / 100% no-repeat;
	mask: var(--rzk-lc-chevron) center / 100% no-repeat;
}

.rzk-lc--block:hover .rzk-lc__go,
.rzk-lc--block:focus-visible .rzk-lc__go {
	opacity: 1;
	translate: calc(var(--rzk-lc-flip) * 2px) 0;
}

/* ---------------------------------------------------------------------------
 * The inline chip: a URL sitting inside a sentence. It must not break the line
 * box, so it keeps the text's own line-height and only borrows a little
 * padding.
 * ------------------------------------------------------------------------- */

.rzk-lc--chip {
	display: inline-flex;
	align-items: center;
	gap: 0.34em;
	max-width: 100%;
	margin-inline: 0.12em;
	padding: 0.12em 0.5em;
	border: 1px solid var(--rzk-lc-accent-line);
	border-radius: 0.65em;
	background: var(--rzk-lc-accent-soft);
	/* The LABEL is the near-black body colour, not the brand purple: it is the
	   most readable choice and it is what the surrounding sentence already uses,
	   so a chip reads as emphasised text rather than as a different voice. The
	   purple lives in the icon and the border. */
	color: var(--rzk-lc-fg);
	font-size: 0.96em;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	vertical-align: baseline;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Hover inverts the pill. The label has to invert WITH it -- left at the body
   colour it would be near-black on saturated purple. The ink shade is used for
   the fill so that white text on it clears AA; the lighter display accent would
   not. */
.rzk-lc--chip:hover,
.rzk-lc--chip:focus-visible {
	border-color: var(--rzk-lc-ink);
	background: var(--rzk-lc-ink);
	color: #fff;
}

.rzk-lc--chip:hover .rzk-lc__ico,
.rzk-lc--chip:focus-visible .rzk-lc__ico {
	background: #fff;
}

/* A chip is an inline-flex box, so its child has to be a real flex item with
   min-width:0 before overflow:hidden/text-overflow can do anything. Left as
   display:inline, a long product name simply spilled out of the pill — measured
   62px past the edge at 320px. */
.rzk-lc--chip .rzk-lc__body {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
}

.rzk-lc--chip .rzk-lc__title {
	display: block;
	overflow: hidden;
	/* inherit, so the hover inversion above reaches the label too */
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Keyboard focus. Always visible, never only a colour change.
 * ------------------------------------------------------------------------- */

.rzk-lc:focus-visible {
	outline: 2px solid var(--rzk-lc-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Icons. One mask per destination kind.
 * ------------------------------------------------------------------------- */

.rzk-lc {
	--rzk-lc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
}

.rzk-lc--page .rzk-lc__ico {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5z'/%3E%3Cpath d='M13.5 3v5.5H19'/%3E%3Cpath d='M8.8 13h6.4M8.8 16.6h4.4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5z'/%3E%3Cpath d='M13.5 3v5.5H19'/%3E%3Cpath d='M8.8 13h6.4M8.8 16.6h4.4'/%3E%3C/svg%3E");
}

.rzk-lc--post .rzk-lc__ico {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='4.4' width='17.6' height='15.2' rx='2.2'/%3E%3Cpath d='M6.8 9h7.2M6.8 12.6h10.4M6.8 16.2h6.8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='4.4' width='17.6' height='15.2' rx='2.2'/%3E%3Cpath d='M6.8 9h7.2M6.8 12.6h10.4M6.8 16.2h6.8'/%3E%3C/svg%3E");
}

.rzk-lc--product .rzk-lc__ico {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.1 11.1a2 2 0 0 1-2 1.8H8.1a2 2 0 0 1-2-1.8z'/%3E%3Cpath d='M9 8.4V6.2a3 3 0 0 1 6 0v2.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.1 11.1a2 2 0 0 1-2 1.8H8.1a2 2 0 0 1-2-1.8z'/%3E%3Cpath d='M9 8.4V6.2a3 3 0 0 1 6 0v2.2'/%3E%3C/svg%3E");
}

.rzk-lc--category .rzk-lc__ico,
.rzk-lc--term .rzk-lc__ico {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='3.6' width='7' height='7' rx='1.6'/%3E%3Crect x='13.4' y='3.6' width='7' height='7' rx='1.6'/%3E%3Crect x='3.6' y='13.4' width='7' height='7' rx='1.6'/%3E%3Crect x='13.4' y='13.4' width='7' height='7' rx='1.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='3.6' width='7' height='7' rx='1.6'/%3E%3Crect x='13.4' y='3.6' width='7' height='7' rx='1.6'/%3E%3Crect x='3.6' y='13.4' width='7' height='7' rx='1.6'/%3E%3Crect x='13.4' y='13.4' width='7' height='7' rx='1.6'/%3E%3C/svg%3E");
}

.rzk-lc--home .rzk-lc__ico {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 10.6L12 3.6l8.4 7'/%3E%3Cpath d='M5.6 9.6V19a1.4 1.4 0 0 0 1.4 1.4h10a1.4 1.4 0 0 0 1.4-1.4V9.6'/%3E%3Cpath d='M9.8 20.4v-5.6h4.4v5.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 10.6L12 3.6l8.4 7'/%3E%3Cpath d='M5.6 9.6V19a1.4 1.4 0 0 0 1.4 1.4h10a1.4 1.4 0 0 0 1.4-1.4V9.6'/%3E%3Cpath d='M9.8 20.4v-5.6h4.4v5.6'/%3E%3C/svg%3E");
}

.rzk-lc--external .rzk-lc__ico {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.6h6.4V10'/%3E%3Cpath d='M20.4 3.6l-8.8 8.8'/%3E%3Cpath d='M18 14.4V18a2.4 2.4 0 0 1-2.4 2.4H6A2.4 2.4 0 0 1 3.6 18V8.4A2.4 2.4 0 0 1 6 6h3.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.6h6.4V10'/%3E%3Cpath d='M20.4 3.6l-8.8 8.8'/%3E%3Cpath d='M18 14.4V18a2.4 2.4 0 0 1-2.4 2.4H6A2.4 2.4 0 0 1 3.6 18V8.4A2.4 2.4 0 0 1 6 6h3.6'/%3E%3C/svg%3E");
}

.rzk-lc--mail .rzk-lc__ico {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.4'/%3E%3Cpath d='M3.8 6.8L12 12.6l8.2-5.8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.4'/%3E%3Cpath d='M3.8 6.8L12 12.6l8.2-5.8'/%3E%3C/svg%3E");
}

.rzk-lc--tel .rzk-lc__ico {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 3.4h2.9l1.5 3.8-1.9 1.4a11.4 11.4 0 0 0 5.1 5.1l1.4-1.9 3.8 1.5v2.9a2 2 0 0 1-2.2 2A17.4 17.4 0 0 1 4.4 5.6a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 3.4h2.9l1.5 3.8-1.9 1.4a11.4 11.4 0 0 0 5.1 5.1l1.4-1.9 3.8 1.5v2.9a2 2 0 0 1-2.2 2A17.4 17.4 0 0 1 4.4 5.6a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E");
}

.rzk-lc--file .rzk-lc__ico {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6v10.8'/%3E%3Cpath d='M7.8 10.2L12 14.4l4.2-4.2'/%3E%3Cpath d='M4.6 19.6h14.8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6v10.8'/%3E%3Cpath d='M7.8 10.2L12 14.4l4.2-4.2'/%3E%3Cpath d='M4.6 19.6h14.8'/%3E%3C/svg%3E");
}

/* An off-site destination is visually quieter than one of ours: it is a
   neutral slate rather than the brand purple, so a reader can tell at a glance
   that they are about to leave the shop. */
.rzk-lc--external {
	--rzk-lc-accent: #475569;
	--rzk-lc-ink: #334155;
	--rzk-lc-accent-soft: rgba(71, 85, 105, 0.07);
	--rzk-lc-accent-line: rgba(71, 85, 105, 0.2);
	--rzk-lc-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 12px 26px -8px rgba(71, 85, 105, 0.26);
}

/* ---------------------------------------------------------------------------
 * On a saturated bubble (the customer's own chat message is a purple
 * gradient) the card inverts: a translucent white pane rather than a white
 * card with purple trim, which would vibrate against the background.
 * ------------------------------------------------------------------------- */

.rzk-lc--on-accent {
	--rzk-lc-accent: #fff;
	--rzk-lc-ink: #fff;
	/* DARKEN, do not lighten.
	   The instinct on a coloured bubble is to lay a translucent WHITE pane over
	   it, and that is what this rule used to do. Measured, it was a mistake: the
	   customer bubble's gradient starts at #9d4edd, and 14% white on top lifts it
	   to roughly #aa67e2, which drops white body text to 3.6:1 — under the 4.5:1
	   that WCAG AA asks for. A translucent BLACK pane moves the other way and
	   takes the same text to about 5.8:1 at the gradient's lightest point, while
	   still reading as a recessed panel rather than a separate card. */
	--rzk-lc-accent-soft: rgba(0, 0, 0, 0.18);
	--rzk-lc-accent-line: rgba(255, 255, 255, 0.42);
	--rzk-lc-bg: transparent;
	--rzk-lc-fg: #fff;
	--rzk-lc-fg-dim: rgba(255, 255, 255, 0.88);
	--rzk-lc-shadow: none;
	--rzk-lc-shadow-hover: 0 8px 20px -8px rgba(0, 0, 0, 0.45);
}

.rzk-lc--on-accent.rzk-lc--block {
	background: rgba(0, 0, 0, 0.18);
}

.rzk-lc--on-accent .rzk-lc__ico {
	background: rgba(255, 255, 255, 0.92);
}

.rzk-lc--on-accent.rzk-lc--block:hover,
.rzk-lc--on-accent.rzk-lc--block:focus-visible {
	background: rgba(0, 0, 0, 0.28);
	border-color: #fff;
}

.rzk-lc--on-accent.rzk-lc--chip {
	color: #fff;
}

.rzk-lc--on-accent.rzk-lc--chip .rzk-lc__ico {
	background: #fff;
}

.rzk-lc--on-accent.rzk-lc--chip:hover,
.rzk-lc--on-accent.rzk-lc--chip:focus-visible {
	background: #fff;
	color: var(--rzk-lc-accent-contrast, #5b21b6);
}

.rzk-lc--on-accent .rzk-lc__stock--in,
.rzk-lc--on-accent .rzk-lc__stock--out {
	background: rgba(0, 0, 0, 0.26);
	color: #fff;
}

/* ===========================================================================
 * Context hooks
 * ---------------------------------------------------------------------------
 * Each host supplies its own accent by re-declaring the variable inside its
 * own container. These are variable assignments, not declaration overrides:
 * no property defined above is being contradicted.
 * =========================================================================== */

/* Product Q&A — matches --wcpq-primary. */
.wcpq-question-content .rzk-lc,
.wcpq-answer-content .rzk-lc {
	--rzk-lc-accent: #8b5cf6;
	--rzk-lc-accent-soft: rgba(139, 92, 246, 0.09);
	--rzk-lc-accent-line: rgba(139, 92, 246, 0.24);
	--rzk-lc-radius: 14px;
	--rzk-lc-ink: #6d28d9;
}

/* An admin's answer already sits on a tinted panel, so the card needs a solid
   white pane to stay legible on it. */
/* An admin's answer sits on a tinted panel, so its card needs a plain pane to
   stay legible on it. Expressed as the fill VARIABLE, not as a hard-coded
   background: the dark-mode block above re-declares --rzk-lc-fill, and a
   literal `background-color:#fff` here would have survived that and produced a
   white card in dark mode. */
.wcpq-admin-answer .wcpq-answer-content .rzk-lc--block {
	--rzk-lc-fill: #fff;
}

/* Support chat, customer-facing widget — matches --rwh-primary.
 *
 * The :not() is load-bearing, not decoration. This selector is (0,2,0) and
 * .rzk-lc--on-accent is (0,1,0), so without the guard THIS rule won over the
 * on-accent variables and a card on the customer's purple bubble was handed the
 * light-background palette — the one case the variant exists to prevent. Making
 * the two selectors mutually exclusive means they never compete, which is a
 * different and better thing from making one of them shout louder. */
.rwh-message-bubble .rzk-lc:not(.rzk-lc--on-accent) {
	--rzk-lc-accent: #9d4edd;
	--rzk-lc-accent-soft: rgba(157, 78, 221, 0.1);
	--rzk-lc-accent-line: rgba(157, 78, 221, 0.26);
	--rzk-lc-accent-contrast: #7b2cbf;
	--rzk-lc-ink: #6b21a8;
	--rzk-lc-radius: 13px;
	/* The bubble is narrow; keep the card from pushing it wider. */
	--rzk-lc-ico: clamp(28px, 24px + 1vw, 34px);
}

/* Support chat, operator panel inside wp-admin. */
.rwh-message-text .rzk-lc {
	--rzk-lc-accent: #7c3aed;
	--rzk-lc-accent-soft: rgba(124, 58, 237, 0.08);
	--rzk-lc-accent-line: rgba(124, 58, 237, 0.22);
	--rzk-lc-radius: 12px;
	--rzk-lc-ink: #6d28d9;
	--rzk-lc-ico: clamp(28px, 25px + 0.8vw, 34px);
}

/* Reviews. The review card clamps its text to four lines with
   -webkit-line-clamp, and a flex child inside a -webkit-box is not reliably
   measured by that clamp. So in this one context the chip degrades to an
   inline run: it keeps the pill's colour and border but lets the browser treat
   it as ordinary text for line counting. */
.wcpr-review-content .rzk-lc--chip {
	--rzk-lc-accent: #7c3aed;
	--rzk-lc-ink: #6d28d9;
	--rzk-lc-accent-soft: rgba(124, 58, 237, 0.08);
	--rzk-lc-accent-line: rgba(124, 58, 237, 0.22);
	display: inline;
	padding: 0.05em 0.42em;
}

.wcpr-review-content .rzk-lc--chip .rzk-lc__ico {
	display: inline-block;
	margin-inline-end: 0.26em;
	vertical-align: -0.12em;
}

.wcpr-review-content .rzk-lc--chip .rzk-lc__body,
.wcpr-review-content .rzk-lc--chip .rzk-lc__title {
	display: inline;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}

/* The review detail modal shows the whole review, so a card is welcome there. */
.wcpr-detail-modal .rzk-lc,
.wcpr-modal-review-text .rzk-lc {
	--rzk-lc-ink: #6d28d9;
	--rzk-lc-accent: #7c3aed;
	--rzk-lc-accent-soft: rgba(124, 58, 237, 0.08);
	--rzk-lc-accent-line: rgba(124, 58, 237, 0.22);
}

/* ===========================================================================
 * Preferences and media
 * =========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.rzk-lc,
	.rzk-lc__go {
		transition: none;
	}

	.rzk-lc--block:hover,
	.rzk-lc--block:focus-visible,
	.rzk-lc--block:active {
		transform: none;
	}

	.rzk-lc--block:hover .rzk-lc__go,
	.rzk-lc--block:focus-visible .rzk-lc__go {
		translate: none;
	}
}

/* Coarse pointers get a comfortable target without changing the design: 44 px
   is the smallest reliably tappable height on a phone. */
@media (hover: none) and (pointer: coarse) {
	.rzk-lc--block {
		min-height: 44px;
	}

	.rzk-lc--chip {
		padding-block: 0.2em;
	}

	.rzk-lc--block:hover {
		border-color: var(--rzk-lc-accent-line);
		box-shadow: var(--rzk-lc-shadow);
		transform: none;
	}
}

/* The product thumbnail's placeholder must not be a light square. */

/* The stock pill reads as a flat tinted block once inverted; give it a border
   so it still reads as a badge rather than a smudge. */

@media (forced-colors: active) {
	.rzk-lc--block,
	.rzk-lc--chip {
		border-color: ButtonBorder;
		background: ButtonFace;
		color: ButtonText;
	}

	.rzk-lc__ico,
	.rzk-lc__go {
		background: ButtonText;
	}
}

/* A printed page cannot be clicked, so the destination is spelled out. */
@media print {
	.rzk-lc--block,
	.rzk-lc--chip {
		border: 1px solid #999;
		background: none;
		box-shadow: none;
		color: #000;
	}

	.rzk-lc__go {
		display: none;
	}

	.rzk-lc--external .rzk-lc__title::after {
		content: " (" attr(href) ")";
		font-weight: 400;
	}
}